/* The Modal (background) */

.common-modal {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 9999; /* Sit on top */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

  padding-top: 60px;

}



.common-modal .modal-content {

  background-color: #fefefe;

  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */

  border: 0px solid #888;

  width: 40%; /* Could be more or less, depending on screen size */

}

.common-modal .modal-content .model-head {background-color: #004471; color: #fff;

 font-size: 15px; padding: 10px 25px 10px 10px; text-align: center;}

.common-modal .modal-content .model-head small{padding: 5px; display: block;}



.common-modal .close {position: absolute; right: 10px; top: 2px; color: #000; font-size: 25px; font-weight: bold;}



.common-modal .close:hover,.common-modal .close:focus {cursor: pointer; opacity: 0.9;}



.common-modal input[type=text], .common-modal select, .common-modal input[type=password], .common-modal input[type=email], .common-modal textarea,.common-modal input[type=date]{

  width: 100%;

  padding: 8px 10px;

  margin: 0px 0 10px 0px;

  display: inline-block;

  border: 1px solid #ccc;

  box-sizing: border-box;

  font-size: 14px;
  height: 46px;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;

}



.common-btn button { background-color: #0072bc; color: white; padding: 6px 20px; margin: 8px 0; border: none;

  cursor: pointer; }



.common-btn button:hover { opacity: 0.8;}



.common-modal .cancelbtn {width: auto;  padding: 10px 18px; background-color: #f44336;}



.common-modal .imgcontainer { text-align: center; margin: 15px 0 12px 0; position: relative;}



.common-modal img.avatar { width: 80px; height: 80px; border-radius: 50%; border: 1px solid #ccc; padding: 5px;}



.common-modal .container { padding: 16px; width: 100%;}



.common-modal span.psw { float: right; padding-top: 0px;}





@media screen and (max-width: 300px) {

  span.psw {

     display: block;

     float: none;

  }

  .cancelbtn {

     width: 100%;

  }

}



@media screen and (max-width: 1024px) {

  .common-modal .modal-content {

    width: 70%;

  }

}

@media screen and (max-width: 767px) {

  .common-modal .modal-content {

    background-color: #fefefe;

    margin: 5% auto 15% auto;

    border: 1px solid #888;

    width: 96%;

  }

.common-modal .modal-content .model-head {font-size: 13px; padding: 10px 25px 10px 10px;}

}





/*--end login and get qt popup--*/





.animate {

  -webkit-animation: animatezoom 0.6s;

  animation: animatezoom 0.6s

}



@-webkit-keyframes animatezoom {

  from {-webkit-transform: scale(0)} 

  to {-webkit-transform: scale(1)}

}

  

@keyframes animatezoom {

  from {transform: scale(0)} 

  to {transform: scale(1)}

}



@media screen and (max-width: 300px) {

  span.psw {

     display: block;

     float: none;

  }

  .cancelbtn {

     width: 100%;

  }

}







/*.aside-form-popup*/

.aside-form-popup {

  display: none;

  position: fixed;

  z-index: 9999;

  left: 0;

  top: 0;

  width: 100%;

   height: 100%;

  background-color: rgb(255 255 255 / 60%);

  padding-top: 60px;

}



.aside-form-popup .modal-content {

  background-color: #fefefe;

  margin: 5% auto 15% auto; 

  border: 0px solid #888;

  width: 40%;

  padding: 15px;

  box-shadow: 0px 0px 4px #000;

}

.aside-form-popup .modal-content .model-head {background-color: #004471; color: #fff;

 font-size: 15px; padding: 10px 25px 10px 10px; text-align: center;}



.aside-form-popup .close {position: absolute; right: 10px; top: 2px; color: #000; font-size: 25px; font-weight: bold;}



.aside-form-popup .close:hover, .aside-form-popup .close:focus {cursor: pointer; color: #f00; opacity: 0.9;}



.aside-form-popup figure { text-align: center; }

.aside-form-popup figure img{width: 80%;}



@media screen and (max-width: 1024px) {

  .aside-form-popup .modal-content {

    width: 70%;

  }

}

@media screen and (max-width: 767px) {

  .aside-form-popup .modal-content {

    width: 96%;

  }

}

#login-popup .modal-content{ width:350px; max-width:100% }

#login-popup .modal-content label{padding: 10px}


/ // -----------------------------#popup_on_pageload start---------------------------// /
#popup_on_pageload {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.6);
  z-index: 99999;
}

    
#popup-onload {
    width: 45%;
    max-width: 100%;
    height: auto;
    background: #04489d;
    border-radius: 30px;
    position: relative;
    left: 0;
    right: 0px;
    margin: 0px auto;    
}
#popup-onload select, #popup-onload input{height: 50px;}
#popup-onload .close{
      position: absolute;
      right: -15px;
      top: -15px;
      background-color: #e84d1d;
      padding: 5px 10px;
      border-radius: 50%;
      border: 1px solid #e84c23;
      a{color: #fff; text-decoration: none;}
    }

@media only screen and (max-width: 640px) and ( min-width: 320px)
{
  #popup-onload { width: 90%; top: 90px;}
}