@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Josefin+Sans:wght@600;700&family=Open+Sans:wght@300;400;600;700&display=swap);

.signup-page {
    margin: 0 auto 0;
    max-width: 850px
}

.signup-page .signup-back-btn {
    margin: 5px;
    position: absolute;
    right: 0;
    color: #fff;
    font-size: 19px;
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 50%;
    line-height: -15px;
    border: none
}

.signup-page .form-area small {
    font-size: .6rem
}

.signup-page .left-side-signup {
    background-image: url(/wp-content/uploads/SignUp_Image.webp);
    background-size: contain;
    background-repeat: no-repeat
}

.signup-page .signup-container {
    border-radius: 10px;
    border: solid 2px #1560bd;
    background-color: #1254a5;
    max-width: 1080px;
    margin: 0 auto
}

.signup-page h2 {
    font: normal normal normal 21px/44px "Bebas Neue", sans-serif;
    width: 100%;
    text-align: center;
    margin: 15px 0
}

.signup-page span {
    font-size: 16px;
    color: #fff;
    font-weight: lighter;
    padding: 5px
}

.signup-page span.call2 {
    font-size: 21px;
    color: #e40000;
    text-align: center;
    display: block
}

.signup-page .signup-disclaimer {
    color: #fff;
    font-size: 11px
}

.signup-page .signup-disclaimer ul {
    list-style: none
}

.signup-page .form-area label {
    font-size: 14px;
    line-height: 11px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 2px
}

.signup-page .form-area label.error {
    color: #e40000;
    font-size: 12px
}

.signup-page .form-area label small {
    font-size: 12px
}

.signup-page .form-area label em {
    opacity: .5;
    line-height: 20px;
    font-size: 11px;
    font-weight: 400
}

.signup-page .form-area input {
    padding-inline-start: 15px;
    width: 100%;
    border: 1px solid #1560bd;
    height: 40px;
    font-size: 14px;
    color: #6784a7;
    border-radius: 10px;
    margin: 2px 0 0
}

.signup-page .form-area input:-internal-autofill-selected {
    -webkit-text-fill-color: #000;
    transition: background-color 5000s ease-in-out 0s
}

.signup-page .form-area input:focus, .signup-page .form-area input:hover {
    border: 2px solid #1560bd;
    transition: all .25s
}

.signup-page .form-area select {
    margin-top: 8px;
    width: 100%;
    height: 50px;
    border: 1px solid #1560bd;
    border-radius: 50px;
    background: #0c3a72;
    padding: 0 30px;
    color: #6784a7;
    text-transform: uppercase
}

.signup-page .form-area span.rounded-circle {
    background-color: #77b11c;
    color: #fff;
    height: 40px;
    width: 40px;
    display: inline-flex;
    padding: 8px;
    font-size: 15px
}

.signup-page .form-area span.rounded-circle.icon-secure {
    font-size: 24px
}

.signup-page .register-bullets {
    display: grid;
    margin-bottom: 10px
}

.signup-page .register-bullets span {
    text-align: center;
    font-size: 41px
}

.signup-page .register-bullets i {
    text-align: center;
    color: #fff;
    font: normal 400 normal 11px/10px "Open Sans", sans-serif;
    width: 100%
}

#emailExist .modal-dialog .modal-content, #wrongCode .modal-dialog .modal-content {
    color: #fff;
    background: #282f3e;
    border-radius: 10px
}

#signupErrorModal .modal-header {
    background: #e40000;
    color: #fff
}

#activeSession .active-session {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 10px;
    display: inline-block;
    text-align: center;
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: all .3s ease-in
}

#activeSession .active-session.go {
    background: #77b11c
}

#activeSession .active-session.stay {
    background: #2134c2
}

#activeSession span {
    color: #fff;
    display: block;
    font-size: 12px;
    padding: 5px 0 5px;
    text-align: center
}

.signup-page #verifyCode-error {
    color: #e40000
}

.account-success p {
    font-size: .9rem;
    text-align: justify
}

.account-success button {
    text-align: center
}

.account-success ul {
    font-size: .9rem
}

/* ======================================
   INTL TEL INPUT CLEAN FIX
====================================== */

/* CONTENEDOR */
.iti {
    width: 100% !important;
}

#phoneNumber {
    padding-left: 109px !important;  /* mismo valor que intl-tel-input pone inline */
}
.phone-group .iti {
    display: block;
}
.iti__selected-country {
    padding-left: 12px !important;
    padding-right: 10px !important;
}

.iti__selected-dial-code {
    margin-left: 8px !important;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.iti__arrow {
    margin-left: 6px !important;
}

.iti__dropdown-content {
    background: #fff !important;
    border-radius: 12px !important;
    border: 1px solid #dcdcdc !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.15) !important;
}

.iti__country-list {
    background: #fff !important;
    color: #000 !important;
}

.iti__search-input {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 10px !important;
    height: 45px !important;
    padding: 10px 15px !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
}

.iti__country {
    padding: 10px 14px !important;
}

.iti__country:hover {
    background: #f5f5f5 !important;
}

.form-area,
.tab-content,
.tab-pane,
.form-group {
    overflow: visible !important;
}

#phone-error-container {
    padding-left: 0 !important;
    padding-inline-start: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
}

#phone-error-container label.error {
    padding-left: 0 !important;
    padding-inline-start: 0 !important;
    margin-left: 0 !important;
}