* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --body-color: #FFF;
    --box-bg: #4f7692;
    --sec-bg: #E8DFCA;
    --text-color: #313131;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    color: #597A9C;
    text-decoration: none;
    font-family: 'Alexandria', serif;
}

body {
    background: radial-gradient(108.54% 421.02% at 50% 50%, #7895B2 0%, #69689E 100%);
    font-family: 'Alexandria', serif;
    direction: rtl;
    position: relative;
    min-height: 100vh;

}

body:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../images/about-bg.png");
    background-size: cover;
    z-index: -1;
}

.btn-primary {
    background-color: #597A9C;
}
.btn-primary:hover{
    background: #517092;
}
.btn-outline-primary:hover{
    background-color: #6a8aab;
    color: white !important;
}
.content {
    height: calc(100vh - 100px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.content .card {
    padding: 20px;
    border-radius: 24px;
}

.content .login-headings {
    margin-bottom: 36px;
}

.content h1 {
    font-size: 32px;
    color: #212E3A;
    margin-bottom: 16px;
}

.content h3 {
    font-size: 16px;
    color: #637689;
}

.form-control,
.select2-container--default .select2-selection--single,
.file-label {
    padding: 20px;
    background: #FFFFFF;
    border-radius: 8px;
    display: block;
    margin-bottom: 24px;
    border: 1px solid #CAD6E2;
    width: 100%;
}

.file-label.disabled {
    background-color: #e9ecef
}

select.form-control {
    padding: 4px !important;
}

.select2-container--default .select2-selection--single {
    text-align: right;
    padding-top: 8px;
    height: 40px;
}

.content button.btn-primary {
    padding: 16px 24px;
    border-radius: 16px;
}

.content .pass-toggle-btn {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    cursor: pointer;

}

/*=== Register===*/
.regis .card{
    margin-bottom: 40px;
}
.regis label {
    display: block;
    text-align: right;
}

.steps-list {
    font-size: 12px;
    margin-bottom: 20px;
}

.step-number {
    width: 32px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #CAD6E2;
    border-radius: 8px;
    margin: 0 auto 8px;
    color: #94A3B2;
}
.steps-list li{
    position: relative;
}
.steps-list li:not(:last-child):after {
    content: '';
    width: 50px;
    height: 3px;
    background: #CAD6E2;
    position: absolute;
    top: 17px;
    left: -60px;
    border-radius: 3px;
}
li:nth-child(-n+3):has(+ li.active) .step-number {
    background: #6DC686;
    border: 1px solid #6DC686;
    color: white;
}
.active .step-number {
    background-color: #597A9C;
    border: 1px solid #597A9C;
    color: #FFF;
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    top: 30%;
    transform: translateY(-50%) !important;
}

.select2-container--default {

    text-align: right;
}

.file-label + input {
    display: none;
}

.file-label:before {
    content: '';
    height: 24px;
    width: 24px;
    background-image: url(../images/upload.svg);
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    top: 12px;
    right: -7px;
}

.file-name {
    color: #94A3B2;
    font-size: 12px;
    position: relative;
    right: 28px;
    display: block;
}
/*=== step 2 ===*/
.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text {
    border-radius: .25rem 0 0 .25rem  !important;
}
.input-group>.custom-select:not(:last-child), .input-group>.form-control:not(:last-child){
    border-radius: 0 .25rem .25rem 0 !important;
}
/*=== step 4 ===*/
.preview{
    margin-top: 40px;
}
.preview h4,
.preview span{
    display: block;
    font-size: 16px;
    text-align: right;
}
.preview h4{
    color: #212E3A;
}
.preview span{
    color: #637689;
    margin-bottom: 16px;
}
.preview hr{
    width: 100%;
}

.select-user  {
    width: 30rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: 3rem;
}

.select-user .user-selection .user-profile{
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
}

.select-user .user-selection .user-info, .new-user-label .new-user-info{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.user-selection .user-label, .select-user .add-user .new-user-label {
    display: flex;
    gap: 1.5rem;
    padding:.75rem 1rem;
    margin: 0;
    border-radius: 16px;
}

.select-user .user-selection input[type="radio"]:not(:checked) + .user-label,
.select-user .add-user input[type="radio"]:not(:checked) + .new-user-label {
    cursor: pointer;
}

.user-selection input[type="radio"]:not(:checked) + .user-label:hover,
.select-user .add-user input[type="radio"]:not(:checked) + .new-user-label:hover {
    background-color: rgb(240 244 249);
}

.user-selection input[type="radio"]:checked + .user-label {
    background-color: rgb(218, 226, 236);
}

.user-selection .user-info .user-name, .new-user-label .new-user-info{
    font-weight: 700;
    font-size: 16px;
}

.user-selection .user-info .user-email{
    color: gray;
}

.select-user .user-selection hr, .add-user hr{
    margin: 0 1rem;
}

.new-user-label .new-user-icon{
    width: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.new-user-label .new-user-icon img{
    width: 3rem;
}

.select-user .add-user input[type="radio"]:not(:checked) + .new-user-label + .new-user-inputs {
    display: none;
}

.select-user .add-user input[type="radio"]:checked + .new-user-label + .new-user-inputs {
    display: block;
}

.select-user .add-user .new-user-inputs {
    padding: 0 1.5rem 0 1rem;
    text-align: right;
}