@import "./components/header/header-desktop.css";
@import "./components/header/mobile-header.css";

.php-header-logo {
    display: flex;
    flex: 1 0 0;
}

#siteHead {
    .searchform {
        height: 50px;
        max-width: 200px;

        .form-control,
        .btn {
            color: #9494ab;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            border: none;
            border-radius: 0;
            font-size: 15px;
            font-weight: 400;
            font-variation-settings: "wght" 500, "KSHD" 100;
            padding: 0;
        }
    }

    .logout-button {
        color: #ea5861;
    }
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

#captchaslidermodal {
    z-index: 1352;
    background: rgba(0, 0, 0, 0.3);
}

#loginModal {
    .modal-content {
        min-height: 350px;

        .modal-header {
            padding: 8px 16px;
            display: flex;
            flex-direction: column;

            div {
                display: flex;
                width: 100%;
                justify-content: space-between;
                align-items: flex-start;
                position: relative;

                .btn-close {
                    margin-top: 5px;
                    padding: 0 !important;
                }
            }

            .modal-title-notice {
                align-self: self-start;
                font-size: 12px;
                color: #185adb;
                margin-top: 3px;
                min-height: 18px;
            }

            #loginModalLabel {
                cursor: pointer;
            }
        }

        .modal-body {
            position: relative;

            #login-form-modal {
                .g-recaptcha {
                    margin: 20px auto;
                }

                #login-phone-error {
                    display: block;
                    min-height: 18px;
                    text-align: center;
                }

                .form-group {
                    .login-mobile-email {
                        direction: rtl;
                    }

                    .password-container-wrapper {
                        .password-container {
                            display: flex;
                            background-color: #fff;

                            .container-inputs {
                                display: none;
                                justify-content: center;
                                align-items: center;

                                .inputs {
                                    direction: ltr;
                                    max-height: 32px;

                                    .input {
                                        width: 40px;
                                        border: none;
                                        border-bottom: 3px solid rgb(143 135 135 / 50%);
                                        margin: 0 10px;
                                        text-align: center;
                                        font-size: 18px;
                                    }

                                    .input:focus-visible {
                                        border-bottom: 3px solid #185adb;
                                        outline: none;
                                    }
                                }
                            }

                            .submit-pass {
                                top: 28px;
                                border-radius: 6px;
                                display: inline-block;
                            }

                            div:last-child {
                                .one-time-Code {
                                    cursor: pointer;
                                    height: 20px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }

                                .countDown-timer {
                                    display: flex;
                                    visibility: hidden;

                                    .send-code-again {
                                        background-color: transparent;
                                        color: rgb(133, 133, 155);
                                        border: none;
                                    }

                                    #countdownButton {
                                        cursor: default;
                                        background-color: #04a448;
                                        padding: 6px;
                                        border-radius: 10px;
                                        min-width: 55px;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        color: #fff;
                                        font-size: 12px;
                                    }
                                }

                                .login-to-irb {
                                    cursor: pointer;
                                    display: block;
                                }
                            }
                        }
                    }
                }
            }

            #password_form_modal {
                .form-group {
                    div:last-child {
                        .btn {
                            padding: 6px 24px;
                        }
                    }
                }
            }
        }
    }

    .btn {
        color: #9494ab;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        border: none;
        border-radius: 0;
        font-size: 15px;
        font-weight: 400;
        font-variation-settings: "wght" 500, "KSHD" 100;
        padding: 0;
    }
}

.logout-button {
    color: #ea5861;
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

#loginModal {
    .modal-content {
        min-height: 350px;

        .modal-header {
            padding: 8px 16px;
            display: flex;
            flex-direction: column;
        }
    }

    @media (min-width: 1024px) {
        #loginModal {
            .modal-content {
                min-height: 350px;
            }
        }
    }

    @media (max-width: 1023px) {
        #loginModal {
            .modal-content {
                min-height: 100vh !important;
                max-height: 100vh !important;
            }
        }

        .modal-title-notice {
            align-self: self-start;
            font-size: 12px;
            color: #185adb;
            margin-top: 4px;
            min-height: 18px;
        }

        #loginModalLabel {
            cursor: pointer;
        }
    }

    .modal-body {
        position: relative;

        #login-form-modal {
            .g-recaptcha {
                margin: 20px auto;
            }

            #login-phone-error {
                display: block;
                min-height: 18px;
                text-align: center;
            }

            .form-group {
                .login-mobile-email {
                    direction: rtl;
                }

                .password-container-wrapper {
                    .password-container {
                        display: flex;
                        background-color: #fff;

                        .container-inputs {
                            display: none;
                            justify-content: center;
                            align-items: center;

                            .inputs {
                                direction: ltr;
                                max-height: 32px;

                                .input {
                                    width: 40px;
                                    border: none;
                                    border-bottom: 3px solid rgb(143 135 135 / 50%);
                                    margin: 0 10px;
                                    text-align: center;
                                    font-size: 18px;
                                }

                                .input:focus-visible {
                                    border-bottom: 3px solid #185adb;
                                    outline: none;
                                }
                            }
                        }

                        .submit-pass {
                            top: 28px;
                            border-radius: 6px;
                            display: inline-block;
                        }

                        div:last-child {
                            .one-time-Code {
                                cursor: pointer;
                                height: 20px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }

                            .countDown-timer {
                                display: flex;
                                visibility: hidden;

                                .send-code-again {
                                    background-color: transparent;
                                    color: rgb(133, 133, 155);
                                    border: none;
                                }

                                #countdownButton {
                                    cursor: default;
                                    background-color: #04a448;
                                    padding: 6px;
                                    border-radius: 10px;
                                    min-width: 55px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    color: #fff;
                                    font-size: 12px;
                                }
                            }

                            .login-to-irb {
                                cursor: pointer;
                                display: block;
                            }
                        }
                    }
                }
            }
        }

        #password_form_modal {
            .form-group {
                div:last-child {
                    .btn {
                        padding: 6px 24px;
                    }
                }
            }
        }
    }
}

.btn {
    padding: 6px 24px;
}

@media (min-width: 1024px) {
    #loginModal {
        .modal-content {
            min-height: 350px;
        }
    }
}

@media (max-width: 1023px) {
    #loginModal {
        .modal-content {
            min-height: auto !important;
            max-height: auto !important;
        }
    }
}

@media (max-width: 768px) {
    #loginModal {
        .modal-content {
            min-height: 100vh !important;
            max-height: 100vh !important;
            width: 100vw !important;
        }
    }
}

#loginModal {
    z-index: 10000 !important;
}

.modal-header__inner {
    gap: 20px;
}

.php-hamberger-menu {
    display: none;
}

.php-btn__white {
    display: flex;
    padding: var(--Spaces-S5-10, 10px) var(--Spaces-S8-16, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--Spaces-S3-6, 6px);
    border-radius: var(--Radius-R4-8, 8px);
    border: 1px solid var(--Border-Neutral-C, #e2e8f0);
    background: var(--BG-Neutral-White, #fff);
    color: var(--text-icon-fg-brand-blue-b-main, #185adb);
    margin-inline-start: 54px;
    /* Form/F2 */
    font-family: var(--Typography-Font-family, "EstedadVF");
    font-size: var(--Typography-Font-Size-F4-14, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typography-LineHeight-L3-20, 20px); /* 142.857% */
}

.php-header-input-dynamic {
    display: flex;
    width: 184px;
    padding: var(--Spaces-S5-10, 10px) var(--Spaces-S6-12, 12px);
    align-items: center;
    gap: var(--Spaces-S4-8, 8px);
    flex-shrink: 0;
    border-radius: var(--Radius-R4-8, 8px);
    background: var(--BG-Neutral-B, #f1f5f9);
}

.php-header-input-dynamic input {
    color: var(--text-icon-fg-neutral-e, #64748b);
    text-align: right;
    width: 136px;
    border: none;
    background: transparent;
    /* Body/B3 */
    font-family: var(--Typography-Font-family, "EstedadVF");
    font-size: var(--Typography-Font-Size-F4-14, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typography-LineHeight-L3-20, 20px); /* 142.857% */
}

.php-header-input-dynamic input:focus {
    outline: none;
}

.php-header-searchandlogin-dynamic {
    display: flex;
    flex: 1 0 0;
    justify-content: end;
    align-items: center;
    gap: var(--Spaces-S6-12, 12px);
    flex-shrink: 0;
}

.php-header-logo {
    display: flex;
    flex: 1 0 0;
}

.php-btn__white-dynamic {
    display: flex;
    padding: var(--Spaces-S5-10, 10px) var(--Spaces-S8-16, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--Spaces-S3-6, 6px);
    border-radius: var(--Radius-R4-8, 8px);
    border: 1px solid var(--Border-Neutral-C, #e2e8f0);
    background: var(--BG-Neutral-White, #fff);
    color: var(--text-icon-fg-neutral-c, #334155);

    /* Form/F2 */
    font-family: var(--Typography-Font-family, "EstedadVF");
    font-size: var(--Typography-Font-Size-F4-14, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typography-LineHeight-L3-20, 20px); /* 142.857% */
}

.php-header-dynamic-toggle {
    display: block !important;
}

.page__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 158px;
    z-index: 100000;
    width: 100%;
    justify-content: center;
    background-color: white;
    border-bottom: 1px solid var(--Border-Neutral-C, #e2e8f0);
    background: var(--BG-Neutral-White, #fff);

}

.pdp-page__header-dynamic {
    display: none;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    border-bottom: 1px solid var(--Border-Neutral-C, #e2e8f0);
    background: var(--BG-Neutral-White, #fff);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.08);
    width: 100%;
}

.php-header__static {
    padding: var(--Spaces-S8-16, 16px) 0px;
    z-index: 1000;
    width: 100%;
    margin: auto;
    align-items: center;
    justify-content: space-between;
    display: flex;
    gap: 40px;
}

.php-header__links-item-dynamic {
    color: var(--text-icon-fg-neutral-c, #334155);
    text-align: right;

    /* Body/B2 */
    font-family: var(--Typography-Font-family, "EstedadVF");
    font-size: var(--Typography-Font-Size-F5-16, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typography-LineHeight-L3-20, 20px); /* 125% */
}

.php-header__dynamic {
    width: 100%;
    padding: var(--Spaces-S8-16, 16px) 0;
    margin: auto;
    align-items: center;
    justify-content: space-between;
    display: flex;
    gap: 40px;
}

.php-header__logo {
    display: flex;
    align-items: center;
    gap: 8.77px;
}

.php-header__links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--Spaces-S12-28, 28px);
    flex: 1 0 0;
}

.php-header__links-item {
    display: flex;
    align-items: center;
    gap: var(--Spaces-S2-4, 4px);
    color: var(--text-icon-fg-neutral-white, #fff) !important;
    text-align: right;
    font-family: var(--Typography-Font-family, "EstedadVF");
    font-size: var(--Typography-Font-Size-F5-16, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typography-LineHeight-L3-20, 20px); /* 125% */
}

@media screen and (max-width: 1300px) {
    .php-hamberger-menu {
        display: none;
    }

    .php-header__static {
        display: flex;
        width: 100%;
        padding: var(--Spaces-S8-16, 16px) var(--Spaces-S11-24, 24px);
        justify-content: center;
        align-items: center;
    }

    .php-header__links {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--Spaces-S6-12, 12px);
        flex: 1 0 0;
    }
}

@media screen and (max-width: 778px) {
    .php-header__links {
        display: none;
    }

    .php-btn__white-dynamic span {
        display: none;
    }

    .php-btn__white span {
        display: none;
    }

    .php-hamberger-menu {
        display: block;
    }

    .php-btn__white {
        margin-inline-start: 0;
    }

    .php-header__static {
        justify-content: space-between;
        white-space: nowrap;
    }

    .pdp-page__header {
        gap: 40px;
    }

    .pdp-page__header {
        margin-bottom: 10px;
    }

    .php-header__dynamic {
        display: none;
    }
}

.php__btn--transparent {
    display: flex;
    padding: var(--Spaces-S5-10, 10px) var(--Spaces-S4-8, 8px);
    justify-content: center;
    align-items: center;
    gap: var(--Spaces-S3-6, 6px);
    flex: 1 0 0;
    border-radius: var(--Radius-R4-8, 8px);
    border: 1px solid var(--Border-Neutral-C, #e2e8f0);
    color: var(--text-icon-fg-neutral-c, #334155);

    /* Form/F2 */
    font-family: var(--Typography-Font-family, "EstedadVF");
    font-size: var(--Typography-Font-Size-F4-14, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typography-LineHeight-L3-20, 20px); /* 142.857% */
}

.php__btn-border--blue {
    display: flex;
    padding: var(--Spaces-S5-10, 10px) var(--Spaces-S4-8, 8px);
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    gap: var(--Spaces-S3-6, 6px);
    border-radius: var(--Radius-R4-8, 8px);
    border: 1px solid var(--Border-Brand-Blue-A, #185adb);
    background: var(--BG-Neutral-White, #fff);
    color: var(--text-icon-fg-brand-blue-b-main, #185adb);

    flex: 1 0 0;
    /* Form/F2 */
    font-family: var(--Typography-Font-family, "EstedadVF");
    font-size: var(--Typography-Font-Size-F4-14, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typography-LineHeight-L3-20, 20px); /* 142.857% */
}

.singin-input-checkbox {
    border: none;
    background-color: transparent;
}

.spinner-login--simple {
    animation: rotate 2s linear infinite;
    justify-self: center;
    width: 16px;
    height: 16px;

    & .path {
        stroke: #ffffff;
        stroke-linecap: round;
        animation: dash 1.5s ease-in-out infinite;
    }

}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

@media screen and (min-width: 778px) {
    .php-btn--avatar-logedin {
        display: flex;
        border: none;
        width: 32px;
        height: 32px;
        padding: 6px;
        justify-content: center;
        align-items: center;
        border-radius: var(--radius-full, 9999px);
        background: var(--BG-Neutral-A, #f8fafc);
    }

    .php-btn--avatar {
        display: none;
    }

    .php-header-searchandlogin-dynamic .php-btn__white-dynamic {
        display: flex;
    }

    .php-header-input-dynamic {
        display: flex;
    }
}

@media screen and (max-width: 778px) {
    /*.php-header-searchandlogin-dynamic .php-btn__white-dynamic {*/
    /*    display: none;*/
    /*}*/
    .php-hamberger-menu {
        display: none;
    }

    .php-header-input-dynamic {
        display: none;
    }

    .php-btn--avatar-logedin {
        display: flex;
        border: none;
        width: 32px;
        height: 32px;
        padding: 6px;
        justify-content: center;
        align-items: center;
        border-radius: var(--radius-full, 9999px);
        background: var(--BG-Neutral-A, #f8fafc);
    }

    .php-btn--avatar {
        display: flex;
        border: none;
        width: 32px;
        height: 32px;
        padding: 6px;
        justify-content: center;
        align-items: center;
        border-radius: var(--radius-full, 9999px);
        background: var(--BG-Neutral-A, #f8fafc);
    }

    .php-header__links {
        display: none;
    }

    .php-btn__white-dynamic span {
        display: none;
    }

    .php-btn__white span {
        display: none;
    }

    .php-hamberger-menu {
        display: block;
    }

    .php-btn__white {
        margin-inline-start: 0;
    }

    .php-header__static {
        justify-content: space-between;
        white-space: nowrap;
    }

    .php-header-searchandlogin-dynamic {
        flex: 0 0 0;
    }

    .pdp-page__header {
        gap: 40px;
    }

    .php-header-logo {
        display: flex;
        gap: 9px;
        justify-content: center;
    }

    .pdp-page__header {
        margin-bottom: 10px;
    }

    .php-header__dynamic {
        display: none;
    }

    .php-page {
        overflow: hidden;
    }
}

.new-header-design {
    width: 100%;
    border: 1px solid #ebf0f5;
    border-radius: 12px;
    background: #fff;
    margin: 24px 0;
}

.new-header-design__top-section {
    padding: 32px 32px 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.new-header-design__calendar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #64748b;
    font-size: 14px;
}

.new-header-design__calendar p {
    font-weight: 500;
    font-variation-settings: "wght" 500;
    font-size: 16px !important;
    color: #64748B
}

.new-header-design__calendar p:first-child {
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

.new-header-design__title {
    color: #0f172a;
    font-weight: 600;
    font-variation-settings: "wght" 600;
    font-size: 32px;
    padding: 24px 32px 32px 32px;
    position: relative;
}

.new-header-design__title > p {
    color: #0f172a;
    font-weight: 600;
    font-variation-settings: "wght" 600;
    font-size: 32px;
}

.new-header-design__title > * {
    font-size: 32px !important;
    margin: 0 !important;
    font-weight: 500 !important;
    font-variation-settings: "wght" 500 !important;
}

.new-header-design__title:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 24px;
    width: 4px;
    background: #185adb;
    border-radius: 4px;
}

.new-header-design p {
    margin: 0 !important;
    padding: 0
}


.new-header-design__breadcrump .breadcrumbs {
    padding: 0 !important;
    font-size: 16px;
    color: #64748b;
}

.new-header-design__breadcrump .breadcrumbs:before {
    width: 16px;
    height: 16px;
    color: #64748b;
}

.new-header-design__breadcrump .breadcrumbs a {
    color: #64748b;
}

.edit-emailorphone--btn {
    display: none;
    color: var(--text-icon-fg-brand-blue-b-main, #185ADB);
    text-align: right;
    z-index: 9999;
    font-family: var(--Typography-Font-family, "EstedadVF");
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    font-variation-settings: "wght" 500;
    line-height: var(--Typography-LineHeight-L3-20, 20px); /* 125% */
    position: absolute;
    left: 16px;
    top: 52%;
    border: none;
    background-color: transparent;
}

.singin-modal__input {
    position: relative;
}

.new-header-design.magazine {
    border: none
}

.new-header-design.magazine .new-header-design__title {
    padding: 24px 32px 16px 32px
}

@media (max-width: 768px) {
    .new-header-design {
        border: none;
        background: transparent;
        margin: 16px 0
    }

    .ibw-interest-rates {
        margin-top: 16px !important
    }

    .new-header-design__calendar {
        display: none;
    }


    .new-header-design__top-section {
        padding: 8px;
    }

    .new-header-design__title {
        padding: 8px !important;
        font-size: 20px;
        position: unset;
    }

    .new-header-design__title > p {
        font-size: 20px
    }

    .new-header-design__title:after {
        right: 0;
        top: unset;
        /*transform: unset;*/
        transform: translateY(-28px);
    }

    .new-header-design__breadcrump .breadcrumbs {
        font-size: 14px
    }

    .new-header-design__top-section {
        font-size: 16px
    }

    .magazine__hero-image-section {
        border-radius: 8px;
    }

    .new-header-design__title > * {
        font-size: 20px !important;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media only screen and (min-width: 769px ) and (max-width: 992px) {
    .new-header-design__title {
        font-size: 28px;
    }
}

.profile-user-info-panel {
    display: none;
    list-style: none;
    position: absolute;
    left: 0;
    top: 40px;
    z-index: 10;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #EBF0F5;
    opacity: 1;
    box-shadow: 0 20px 24px -4px rgba(15, 23, 42, 0.08), 0 8px 8px -4px rgba(15, 23, 42, 0.03);
    padding: 8px !important;
    width: 184px;
}

a.irb-panel__link {
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    gap: 4px;
    font-size: 14px;
    color: #0E121B;
    transition: all 0.3s ease-in-out;
    padding: 8px;
    border-radius: 8px;
}

a.irb-panel__link:hover {
    background-color: #F5F7FA;
}

li.irb-panel__item--divider {
    width: 100%;
    height: 1px;
    background: #E1E4EA;
    margin: 6px 0;
}