html[lang="en"] {
    /* Regular */
    --regular-font-family: 'Poppins-Regular', sans-serif;
    /* Medium */
    --medium-font-family: 'Poppins-Medium', sans-serif;
    /* Bold */
    --bold-font-family: 'Poppins-SemiBold', sans-serif;
}

html[lang="am"] {
    /* Regular */
    --regular-font-family: 'Montserratarm-Regular', sans-serif;
    /* Medium */
    --medium-font-family: 'Montserratarm-Medium', sans-serif;
    /* Bold */
    --bold-font-family: 'Montserratarm-Bold', sans-serif;
}


ul {
    list-style-type: none;
}

h1, h2, h3, h4, h5, h6, p {
    margin-bottom: 0 !important;
}

a {
    text-decoration: none !important;
    color: unset !important;
}

#client-body body {
    padding-bottom: 0 !important;
}

.client-wrapper .router-link-exact-active {
    background: transparent !important;
}

#client-body .container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    padding-inline: 50px;
}

.page-padding-block {
    padding-block: 50px 90px;
    min-height: 500px;
}

.test {
    color: #54577A;
    font-family: var(--regular-font-family);
    font-size: 21px;
    font-weight: 400;
    line-height: 27px;
}

/* buttons */

.button {
    border: none;
    outline: none;
    cursor: pointer;
}

.secondary-btn-white {
    border-radius: 10px;
    border: 1px solid #FFF;
    background-color: transparent;
    padding: 9px 16px;

    color: white;
    font-family: var(--bold-font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

.primary-btn-white {
    border-radius: 10px;
    border: 1px solid #FFF;
    background-color: #FFF;
    padding: 9px 16px;

    color: #00D3A1;
    font-family: var(--bold-font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

.secondary-btn {
    border-radius: 10px;
    border: 1px solid #8C98BA;
    background-color: #FFF;
    

    color: #54577A;
    font-family: var(--bold-font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    transition: .5s ease;
    width: 100%;
}

.secondary-btn.lg {
    padding: 9px 16px;
}

.secondary-btn.sm {
    padding: 5px 16px;
}

.secondary-btn:hover, .secondary-btn-white:hover, .primary-btn-white:hover {
    border: 1px solid #141522;
    color: #141522;
}

.secondary-btn:active, .secondary-btn-white:active, .primary-btn-white:active {
    background-color: #E0E7ED;
    border: 1px solid #141522;
    color: #141522;
}

.primary__btn {
    width: 100%;
    border-radius: 10px;
    background-color: #00D3A1;
    color: #FFF;
    transition: .5s linear;
}

.primary__btn-sm {
    padding: 5px 16px;
}

.primary__btn-lg {
    padding: 13px 24px;
}

.primary__btn:hover {
    background-color: #009471;
}

.primary__btn:active {
    background-color: #005742;
}

.primary__btn:disabled {
    background-color: rgba(0, 211, 161, 0.4);
}

.minimal__btn {
    width: 100%;
    border-radius: 10px;
    padding: 9px 16px;
    background-color: transparent;
    color: #54577A;
    transition: .5s linear;
}

.minimal__btn:hover {
    color: #141522;
}

.minimal__btn:active {
    background-color: #E0E7ED;
    color: #141522;
}

.button-content-width {
    width: max-content;
}

/* Typography  */

.h1__semibold {
    font-family: var(--bold-font-family);
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 60px;
}

.h2__semibold {
    font-family: var(--bold-font-family);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px;
}

.h3__semibold {
    font-family: var(--bold-font-family);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
}

.h3__regular {
    font-family: var(--regular-font-family);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
}

.body_1_semibold {
    font-family: var(--bold-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.body_1_medium {
    font-family: var(--medium-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.body_1_regular {
    font-family: var(--regular-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.body_2_semibold {
    font-family: var(--bold-font-family);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 21px;
}

.body_2_medium {
    font-family: var(--medium-font-family);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
}

.body_2_regular {
    font-family: var(--regular-font-family);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
}

.caption__semibold {
    font-family: var(--bold-font-family);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
}

.caption__medium {
    font-family: var(--medium-font-family);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.caption__ragular {
    font-family: var(--regular-font-family);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.go-back__slash {
    color: #DFE1F3;
    margin-left: 3px;
    font-family: var(--regular-font-family);
    font-size: 23px;
    font-weight: 400;
    line-height: 27px;
}

.page-main-title {
    text-align: center;
    color: #425064;
}

.button_text {
    font-family: var(--bold-font-family);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 21px;
}


/* End Typography */

.client__dropdown-container {
    width: 100%;
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(112, 134, 170, 0.22);
    border-radius: 10px;
}

.client__dropdown-item {
    padding: 20px;
    cursor: pointer;
    transition: .5s linear;
    display: flex;
    align-items: center;
    column-gap: 10px;

    &:nth-child(1) {
        border-radius: 10px 10px 0 0;
    }

    &:last-child {
        border-radius: 0 0 10px 10px;
    }

    &:hover {
        background-color: #DFE1F3;
    }

    &:active {
        background-color: #8C98BA;
    }
}


/* modal */

.modal-scroll {
    max-height: 85vh;
    overflow: auto;
}

.card-scroll::-webkit-scrollbar,
.modal-scroll::-webkit-scrollbar {
    width: 7px;
}

.card-scroll::-webkit-scrollbar-track,
.modal-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.card-scroll::-webkit-scrollbar-thumb,
.modal-scroll::-webkit-scrollbar-thumb {
    border-radius: 12px;
    background: #C2C6E8;
}


.checkbox__sm {
    width: 16px;
    height: 16px;
    border-color: #425064;
    border-radius: 4px;
    accent-color: #425064;
}

.loader__container {
    background: rgba(0, 2, 81, 0.2);
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 111;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader__container-gif {
    width: 100px;
    height: 100px;
}

.loader__button-gif {
    width: 22px;
    height: 22px;
    margin-left: 10px;
    cursor: progress;
}

.custom-form__checkbox {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.custom-form__checkbox-inp {
    width: 20px;
    height: 20px;
    accent-color: #425064;
    cursor: pointer;
}

.custom-form__checkbox-label {
    color: #000;
    cursor: pointer;
}

.custom-form__list-inp-icon {
    position: absolute;
    height: 23px;
    top: 67%;
    transform: translateY(-50%);
    right: 10px;
    background-color: transparent;
}

.custom-form__list-inp-icon img {
    width: 16px;
    height: 16px;
}

.form-alert__error {
    display: flex;
    align-items: flex-start;
    column-gap: 4px;
    width: max-content;
    margin-top: 6px;
    color: #EB5757;
}

.form-alert__error img, .form-alert__info img {
    width: 14px;
    height: 14px;
    padding-top: 3px;
}


.form-alert__info  {
    display: flex;
    align-items: flex-start;
    column-gap: 4px;
    width: max-content;
    margin-top: 6px;
    color: #425064;
}




/* MODAL STYLES START */
.client-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 2, 81, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1111;
}

.client-modal-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 6px;
}

.client-modal-body {
    padding-inline: 64px;
    padding-block: 6px 30px;
    display: flex;
    flex-direction: column;
}

.client-close-btn {
    background: transparent;
}
.client-close-btn img {
    width: 32px;
    height: 32px;
}

.client-modal {
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0px 5px 7px 0px rgba(123, 124, 171, 0.2);
}

/* MODAL STYLES END */


/* ALERTS STYLES START */

.alert__warning {
    display: flex;
    align-items: flex-start;
    column-gap: 9px;
    border-radius: 12px;
    background: #fdf8e8;
    padding: 12px;
}

.alert__warning img {
    width: 14px;
    height: 14px;
}

.alert__warning-message {
    color: #141522;
}


.success-modal__top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.success-modal__icon {
    width: 100px;
    height: 100px;
}

.success-modal__message {
    margin-top: 20px;
    color: #425064;
}

.success-modal__status {
    margin-top: 10px;
    color: #324057;
}

/* ALERTS STYLES END */

/* FORM STYLES START */

.custom-form {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}

.custom-form__list {
    display: block;
}

.custom-form__list label {
    display: block;
    position: relative;
}

.form-error {
    display: flex;
    align-items: center;
    column-gap: 4px;
    margin-top: 5px;   
}

.form-error img {
    width: 14px;
    height: 15px;
}

.error-message {
    color: #eb5757;
    font-size: 12px;
}

.form-important-star {
    color: #eb5757;
}

.form-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 30px;
}

.form-inp {
    width: 100%;
    margin-top: 6px;
    border-radius: 10px;
    border: 1px solid #d6d9de;
    background: #fff;
    padding: 14px 12px;
    transition: 0.5s linear;
}

.form-inp:focus {
    outline: none;
    border-color: #9eafff;
}

.form-inp:invalid {
    border-color: #eb5757;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    background-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

/* FORM STYLES END */


/* RADIO INPUTS START */

.form-container__radio-title {
    margin-bottom: 10px;
    color: #324057;
}

.form-container__radio-wrap {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.form-container__radio-wrap label {
    display: flex;
    align-items: center;
    column-gap: 8px;
    cursor: pointer;
}

.form-container__radio-name {
    color: #141522;
}

.form-container__radio-wrap input {
    width: 20px;
    height: 20px;
    accent-color: #425064;
}

/* RADIO INPUTS END */


.verify__actions {
    width: 100%;
    display: flex;
    column-gap: 30px;
    justify-content: center;
    margin-top: 8px;
}

.verify__main {
    padding-block: 80px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    row-gap: 8px;
}

.verify__inputs {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
}

.verify__input {
    width: 90px;
    height: 90px;
    border-radius: 8px;

    text-align: center;
    font-size: 35px;
    outline: 1px solid #f0f1f9;
    border: 1px solid #f0f1f9;
    color: #324057;
    padding: 30px 25px;
}

.verify__input-error {
    outline: 1px solid #eb5757;
    border-color: #eb5757;
}

.verify__input::placeholder {
    background-image: url("/images/client/placeholder-star.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 15px;
    height: 15px;
    padding-left: 20px;
    padding-top: 30px;
    /* padding: 36px; */
}

.verify__input:focus {
    outline: 2px solid #2451f5;
    border-color: #2451f5;
}

.verify__resend {
    margin-top: 20px;
}

.verify__resend p {
    text-align: center;
    color: #54577a;
}

.verify__resend-bold {
    color: #141522;
    background-color: transparent;
}