body {
  font-family: 'Open Sans', sans-serif !important;
}
/* Styles for the overlay */
.modal-overlay {
   width: 100% !important;
    height: 100% !important;
    display: flex;
    position: fixed !important;
    flex-direction: column !important;
    z-index: 1000 !important;
    justify-content: center !important;
    align-items: center !important;
    background: rgba(33,37,40,.95) !important;
    inset: 0!important;
}

/* Styles for the modal container */
.modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #fff !important;
    padding: 48px 32px !important;
    border-radius: 10px !important;
    box-shadow: 0 11px 15px -7px #0003, 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f !important;
    z-index: 1000 !important;
    width: 30% !important;
    transition: all .5s ease !important;
    justify-content: center !important;
    font-size: 20px !important;
    height: auto !important;
    -webkit-box-sizing:border-box !important;
}

/* Styles for the close button */
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
#modal-box h4
{
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: #3f4346;
  padding:0 0 24px 0;
  font-family: 'Open Sans', sans-serif !important;
  margin:0;
}
#modal-box h6
{
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  color: #3f4346;
  padding-bottom: 16px;
  padding-top: 0;
  font-family: 'Open Sans', sans-serif !important;
  margin:0;
}
.iti.iti--allow-dropdown.iti--separate-dial-code
{
    width: 100%;
    margin-bottom: 10px;
}
#modal-box input[type=text], select, textarea,#modal-box input[type=tel] {
  height: 36px;
  line-height: 36px;
  border: 1px solid #d5d9dc;
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  color: #3f4346;
  background-color: #fff;
  margin:0 0 15px 0;
  font-family: 'Open Sans', sans-serif !important;
  width:-webkit-fill-available;
  padding:var(--has-classic-forms, var(--form-field-padding, 0 12px));
  width: -moz-available;
  }
  #modal-box input[type=text]:focus, select, textarea:focus,#modal-box input[type=tel]:focus {
    border-color: transparent;
    outline: 2px solid #1e75ba!important;
    font-family: 'Open Sans', sans-serif !important;
  }
  
#modal-box input[type=submit] {
    background-color: #1157a6;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    text-transform: none;
    font-weight: 500;
    font-size: 16px;
    min-height: auto !important;
   
  }
  
#modal-box input[type=submit]:hover {
    background-color:#1157a6;
  }
  
  .alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
    border-radius: 0.375rem;
    padding:1rem;
    font-size: 14px;
}
#shortcodes-maindiv
{
    background: #fff;
    padding: 10px;
    border: 1px solid #d5d9dc;
    width: 100%;
    height: 100%;
    padding:25px;
}
#shortcodes-maindiv input[type=text], select, textarea,#shortcodes-maindiv input[type=tel] {
  height: 36px;
  line-height: 36px;
  border: 1px solid #d5d9dc;
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  color: #3f4346;
  background-color: #fff;
  margin:0 0 15px 0;
  font-family: 'Open Sans', sans-serif !important;
  width: 100%;
  }
  #shortcodes-maindiv input[type=text]:focus, select, textarea:focus,#shortcodes-maindiv input[type=tel]:focus {
    border-color: transparent;
    outline: 2px solid #1157a6!important;
    font-family: 'Open Sans', sans-serif !important;
   
  }
#shortcodes-maindiv input[type=submit] {
  background-color: #1157a6;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;;
    text-transform: none;
    font-weight: 500;
    font-size: 16px;
    width: 100%;
  }
  

  #shortcodes-maindiv h4
  {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #3f4346;
    padding:0 0 24px 0;
    margin:5px 0 5px 0;
    font-family: 'Open Sans', sans-serif !important;
    margin:0;
  }
  #shortcodes-maindiv  h6
  {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    color: #3f4346;
    padding-bottom: 16px;
    padding-top: 0;
    margin:5px 0 5px 0;
    font-style: normal;
    font-family: 'Open Sans', sans-serif !important;
    margin:0;
  }
  .error
  {
    color: red;
    font-size: 14px;
  }
  .iti__flag-container
  {
    display: table;
  }
  /*#shortcodes-maindiv .iti__selected-flag,  #modal-box .iti__selected-flag
  {
    padding:6px 6px 6px 8px !important;
  }*/
  #shortcodes-maindiv .iti__selected-dial-code
  {
    font-weight: lighter;
    font-size: 14px;
  }
  .iti__country-list
  {
    max-width: 330px;
  }
  #modal-box .iti__selected-dial-code
  {
    font-weight: lighter;
    font-size: 14px;
  }
  #emailresendLink p,#mobileresendLink p
  {
    font-weight: 400;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif !important;
    margin:0 !important;
    padding-bottom: 10px;
    color: grey !important;
  }
  #emailresendLink p a,#mobileresendLink p a
  {
    color:grey;
    padding-bottom: 10px;
    text-decoration: none;
  }
  #otpmobileresend,#otpemailresend
  {
    color: grey !important;
  }
  #otpmobileresend p,#otpemailresend p
  {
    font-weight: 400;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif !important;
    margin: 0;
    padding-bottom: 10px;
    color: grey !important;
  }
  .popup-otp-verification-footer
  {
    font-weight: 400;
    font-size: 12px;
    color: #8f9396;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: fixed;
    left: 28px;
    bottom: 28px;
    z-index: 40000;
  }
  .popup-otp-verification-footer span
  {
    margin-bottom: -4px;
  }
  @media (min-width: 300px) and (max-width: 600px) {
    .modal
    {
      width: 90% !important;
    }
    #shortcodes-maindiv
    {
      width: 100% !important;
    }
  }
  #modal-box .hide
  {
    display: none !important;
  }
  .alert-danger
  {
    font-size: 14px;
  }
  #shortcodes-maindiv p a
  {
    font-size: 14px;
    color: gray !important;
  }
  .popup-otp-verification-footer img
  {
    width: 100px;
    height: auto;
    margin-bottom: -12px;
    margin-left: 3px;
  }
  .iti__flag-container
  {
    height: -webkit-fill-available;
    height: -moz-available;;
  }