@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
* {
    font-family: "Tajawal", sans-serif;
    letter-spacing: 0 !important;
}
body {
    background: #EEF1F8;
}
.auth-svg {
    display: block;
    margin: 0 auto;
    margin-bottom: 25px;
    width: 60px;
    height: 60px;
}
span {
    font-weight: 400;
}
.form label {
    font-weight: 500;
}
.form-image  {
    background: #285D84 !important;
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;
    align-items: center;
    justify-content: center;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
.form-form h1 {
    font-size: 18pt;
    margin-bottom: 10px;
    line-height: 1.5;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 400;
}
.form-form h1 span {
    color: #1e5075;
    font-weight: 600;
}
.form-form .form-form-wrap p.signup-link {
    margin-bottom: 0px;
    margin-top: 50px;
}
.btn-primary {
    background: #1e5075 !important;
    border-color: #1e5075 !important;
}
.auth-logo {
    height: 150px;
    margin: 0 auto;
    display: block;
    margin-bottom: 25px;
    margin-top: 30px;
}
a {
    color: #1e5075 !important;
}
.form-form .form-container {
    padding: 0;
}
.form-form .form-form-wrap {
    min-width: 400px;
}
.form-form .form-form-wrap form .field-wrapper input {
    font-weight: 500;
    border-radius: 4px;
    padding: 0px 55px;
    height: auto;
    max-height: unset;
    font-size: 15px;
}
.form-form .terms-conditions {
    margin-bottom: 25px;
}
h1.auth-sub-text {
    font-size: 16pt ;
    font-weight: 400;
    color: #333;
}
.mb-10 {
    margin-bottom: 10px !important;
}

.field-wrapper select.city {
    display: inline-block;
    vertical-align: middle;
    border-radius: 0;
    min-width: 50px;
    max-width: 635px;
    width: 100%;
    min-height: 36px;
    background-color: #ffffff;
    border: none;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    color: #3b3f5c;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid #e0e6ed;
    padding: 0px 35px 10px 0;
}
select:active , select:focus {
    box-shadow: none !important;
    outline: none !important;
}
.form-form .form-form-wrap form .field-wrapper a.forgot-pass-link {
    letter-spacing: 0;
    margin-top: 20px;
    text-align: right;
}
.form-label {
    font-weight: 400;
    font-size: 12pt;
    line-height: 1.5;
    margin-bottom: 45px;
}
.form-form .form-form-wrap form .field-wrapper.input {
    padding: 0;
    margin-bottom: 20px;
}
.form-form .form-form-wrap form .field-wrapper svg {
    position: absolute;
    top: 50%;
    color: #06222F;
    transform: translateY(-50%);
    z-index: 999;
    right: 20px;
    width: 20px;
}
.form-form .form-form-wrap form .field-wrapper input, .field-wrapper select.city {
    padding-top: 15px;
    padding-bottom: 15px;
}
.field-wrapper select.city {
    height: auto !important;
}
.form-form .form-form-wrap form .field-wrapper button.btn {
    margin-top: 15px;
}
.alert ul {
    padding: 0;
    margin: 0;
}
.alert ul li {
    margin-bottom: 10px;
    list-style-type: none;
    font-weight: 500;
}
.alert ul li:last-child {
    margin-bottom: 0;
}
.alert {
    border-radius: 4px;
}
.alert-success {
    font-weight: 500;
}
.subdomain-selector {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row-reverse;
    margin-top: 10px;
}
.subdomain-selector p {
    margin: 0;
    font-size: 13pt;
    font-weight: 500;
    padding: 0;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.10);
    padding: 10px 15px;
    border-radius: 6px;
}
.subdomain-selector.field-wrapper input {
    padding: 0px 0px 0px 35px !important;
    text-align: left;
    padding-bottom: 15px !important;
    padding-top: 15px !important;
    direction: ltr;
}
.form-form .form-form-wrap form .field-wrapper.input {
    position: relative !important;
}
.form-form .form-form-wrap form .field-wrapper.input .toggle-password {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.form-form .form-form-wrap form .field-wrapper.input .toggle-password svg {
    position: static !important;
    transform: none !important;
}
.mt-50 {
    margin-top: 40px !important;

}
.form-form .form-form-wrap form .field-wrapper.terms_condition {
    margin-bottom: 15px;
    margin-top: 25px;
}
#conditionsModal .modal-body {
    max-height: 350px;
    overflow-y: scroll;
}
#conditionsModal .modal-body p {
    font-weight: 400;
    font-size: 12pt;
}
#conditionsModal .btn {
    font-weight: 500;
}
.modal-open .modal {
    padding-right: 0 !important;
}
.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important
}
.was-validated input[type="password"].form-control:invalid {
    background-image: none !important;
}
.invalid-feedback {
    position: absolute;
    display: block !important;
    margin-top: 10px;
    padding-right: 5px;
}
.invalid {
    margin-bottom: 40px !important;

}
.invalid.mb-0 {
    margin-bottom: 0 !important
}
.invalid .form-control {
    border-color: #dc3545 !important;
}
.form-form .form-form-wrap form .field-wrapper.terms_condition {
    position: relative;
}
.form-form .form-form-wrap form .field-wrapper.terms_condition .invalid-feedback {
    margin: 0;
}
.moysar-form {
    margin-top: 25px;
 }
 .form h6 {
    font-weight: 700;
    margin-bottom: 10px;
 }
 .form .custom-radio {
    margin-bottom: 5px;
 }
 .transfer p {
    font-weight: 500;
    font-size: 13pt;
 }
 .transfer p:first-child {
    font-weight: bold;
 }
 .payment-method-holder {
    display: none;
    margin-top: 20px;
 }
 .custom-radio label {
    font-size: 16px !important;
 }
 .payment-method-holder .form-control {
    height: auto !important;
 }
 .transfer-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
 }
 .transfer-pending p {
    font-size: 13pt;
    text-align: center;
    font-weight: 600;
 }
 .transfer-pending svg {
    color: #1e5075;
    zoom: 1.8;
 }
 .select2-container {
    width: 100% !important;
 }
 .select2-container .select2-selection--single{
    display: inline-block;
    vertical-align: middle;
    border-radius: 0;
    min-width: 50px;
    max-width: 635px;
    width: 100%;
    min-height: 36px;
    background-color: #ffffff;
    border: none;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    color: #3b3f5c;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid #e0e6ed;
    padding: 10px 35px 10px 0;
    height: auto !important;
 }
 .select2-container--default.select2-container--disabled .select2-selection--single {
    background: transparent !important;
 }
 .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-weight: 500;
    color: #3b3f5c;
 }
/* .payment-form {
    width: 100% !important;
    margin: 0 !important;
    max-width: unset !important;
    font-family: "Tajawal", sans-serif !important;
    direction: rtl !important;
}
.payment-form label {
    font-family: "Tajawal", sans-serif !important;
}
.payment-form input {
    font-family: "Tajawal", sans-serif !important;

}
#mysr-cc-name {
    direction: rtl !important;
    text-align: right !important;
} */
 .mysr-form-label, .mysr-form-input, .mysr-form-button {
    font-family: "Tajawal", sans-serif !important;

 }
.mysr-form-footer a, .mysr-form-footer span {
    display: none !important;
}
.mysr-form-warn-icon {
    display: none !important;
}
#mysr-form-form-el#mysr-form-form-el#mysr-form-form-el.mysr-form-moyasarForm.mysr-form-fixedWidth {
    max-width: 400px !important;
}
#mysr-cc-name {
    text-align: right !important;
    direction: rtl !important;
}
.mysr-form-label, .mysr-form-input, .mysr-form-button, #mysr-form-form-el#mysr-form-form-el#mysr-form-form-el.mysr-form-moyasarForm[payment-form=true] .mysr-form-requiredAlert {
    font-family: "Tajawal", sans-serif !important;

 }
 #mysr-form-form-el#mysr-form-form-el#mysr-form-form-el.mysr-form-moyasarForm[payment-form=true] .mysr-form-button, #mysr-form-form-el#mysr-form-form-el#mysr-form-form-el.mysr-form-moyasarForm[payment-form=true] .mysr-form-button:active, #mysr-form-form-el#mysr-form-form-el#mysr-form-form-el.mysr-form-moyasarForm[payment-form=true] .mysr-form-button:hover {
    background-color: #1e5075 !important
}

.auth-header-top {
    display:flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 35px;
}
.auth-header-top svg {
    width: 50px;
    height: 50px;
}
.auth-header-top h2 {
    color: #06222F;
    font-weight: bold;
    margin: 0;
    font-size: 17pt;
}
.auth-slider-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    gap: 10px;
}
.auth-slider-item img {
    max-width: fit-content;
    height: 240px;
}
.auth-slider-item h2 {
    color: white;
    font-weight: 600;
    font-size: 20pt;
    margin: 0;
}
.auth-slider-item p {
    color: white;
    font-weight: 400;
    font-size: 14pt;
    margin: 0;
    max-width: 390px;
    text-align: center;
}
.subdomain-selector svg {
    left: 15px !important;
    right: auto !important;
}
.form-form .form-form-wrap form .subdomain-selector input {
    padding-left: 50px !important;
}
.subdomain-suggestion-label {
    color: darkgreen;
    display: none;
}
.subdomain-suggestion-label svg {
    color: darkgreen;
    margin-left: 5px;
  
}
@media screen and (max-width: 776px) {
    .form-form .form-form-wrap {
        min-width: auto;
        width: 85%;
    }
    .form-form .form-form-wrap form .field-wrapper.toggle-pass {
        margin-top: 15px;
    }
}
::-moz-selection { /* Code for Firefox */
    color: white;
    background: #4361ee
  }
  
  ::selection {
    color: white;
    background: #4361ee;
  }