p {
  line-height: 2;
}
.btn-toticket{
  background-color: #ce5192;
  color: #fff;
}

.btn-toticket:hover,
.btn-toticket:active{
  background-color: #c72278;
  outline: none;
  box-shadow: none;
}

.btn-toticket:focus{
  outline: none;
  box-shadow: none;
}

#captcha>div{
  margin: 0 auto;
}
.form-bg{
  background:#FFF url(/images/taitraComputex/main-bg.jpg) no-repeat center top;
  min-height: calc( 100vh - 40px);
}
.form-content{
  background-color:white;
}
.identity-column-inner{
  height:100%;
  min-height:100px;
  border:1px solid #cccccc;
  cursor:pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.identity-column-inner-icon{
  flex: 0 0 auto!important;
  vertical-align: middle;
  padding: 0 .5em;
  background-color:#cccccc;
}
.identity-column-inner-icon::before{
  content: '';
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.identity-column-inner-icon-dot{
  height:100%;
  color:white;
  font-size:.75em;
  transition: font-size .5s ;
   -webkit-transition: font-size .5s ease;
  -moz-transition: font-size .5s ease;
  -o-transition: font-size .5s ease;
  transition: font-size .5s ease;
}
.identity-column-inner-text{
  padding:15px 15px;
  flex: 1 1 auto!important;
  /* line-height: 30px; */
  transition: width 1s ;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  background-color:#ffffff;
}
.identity-column-inner:hover, .identity-column-inner.active{
  border:1px solid #ce5192;
}
.identity-column-inner:hover .identity-column-inner-icon,
.identity-column-inner.active .identity-column-inner-icon{
  background-color: #ce5192;
}
.identity-column-inner:hover .identity-column-inner-icon-dot,
.identity-column-inner.active .identity-column-inner-icon-dot{
  font-size: 1.2em;
}
.identity-column-inner:hover .identity-column-inner-text,
.identity-column-inner.active .identity-column-inner-text{
}
.form-column-title{

}
.form-column-content{
  float:left;
  width:calc(100% - 20px);
  line-height: 30px;
}
.questionnaire-column-inner{
  position:relative;
}
.questionnaire-column-inner-title-num{
  float:left;
  width:40px;
}
.questionnaire-column-inner-title-text{
  float:left;
  margin-left:15px;
  margin-right:15px;
}
.questionnaire-column-inner-title-content{;
  float:left;
  margin-left:25px;
  margin-right:25px;
  width:100%;
}
.form-column-inner-phone-country{
  float:left;
  width:140px;
}
.form-column-inner-phone-content{
  float:left;
  width:calc(100% - 140px);
  max-width:360px;
}

.image-list-div{
  position: relative;
  display: flex;
  flex-direction: row;
  padding: 5px;
  overflow-x: auto;
}

.image-list-ele{
  height: 100%;
  padding: 5px;
  position: relative;
  margin-right: 10px;
}

.image-list-ele>img{
    width:150px;
    height:150px;
    object-fit: cover;
  }

.image-list-close{
  position: absolute;
  right: 15px;
  top: 15px;
  color: #fff;
  background-color: #000;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s ease;
}

.image-list-see{
  position: absolute;
  right: 50px;
  top: 15px;
  color: #fff;
  background-color: #000;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s ease;
}


.image-list-ele:hover .image-list-close{
  opacity: 1;
}

.image-list-ele:hover .image-list-see{
  opacity: 1;
}

.image-list-ele-add{
  min-width: 160px;
  width: 160px;
  height: 160px;
  border: dashed 2px #ddd;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ddd;
  cursor: pointer;
}

/* loading */
.fixed-loading{
  position: fixed;
  flex-direction: column;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: 9999;
}

@media (max-width: 480px){
  .contentListDiv {
    width: 280px;
    margin:auto;
    padding-right:10px;
    padding-left:10px;
  }
}
 @media (min-width: 480px) AND (max-width: 640px){
  .contentListDiv {
    width: 360px;
    margin:auto;
    padding-right:10px;
    padding-left:10px;
  }
}
@media (min-width: 640px){
  .contentListDiv {
     width: 560px;
    margin:auto;
    padding-right:10px;
    padding-left:10px;
  }
}