/* depricated font-family names application - see below */
@font-face {
    font-family: NotoSans-Regular;
    src: url('../fonts/NotoSans-Regular.ttf');
}

@font-face {
    font-family: NotoSans-Medium;
    src: url('../fonts/NotoSans-Medium.ttf');
}

@font-face {
    font-family: NotoSans-SemiBold;
    src: url('../fonts/NotoSans-SemiBold.ttf');
}

@font-face {
    font-family: NotoSans-Bold;
    src: url('../fonts/NotoSans-Bold.ttf');
}

@font-face {
    font-family: NotoSans-ExtraBold;
    src: url('../fonts/NotoSans-ExtraBold.ttf');
}



/* corrected font-family names with font-weights */
@font-face {
    font-family: NotoSans;
    font-weight: 400;
    src: url('../fonts/NotoSans-Regular.ttf');
}

@font-face {
    font-family: NotoSans;
    font-weight: 500;
    src: url('../fonts/NotoSans-Medium.ttf');
}

@font-face {
    font-family: NotoSans;
    font-weight: 600;
    src: url('../fonts/NotoSans-SemiBold.ttf');
}

@font-face {
    font-family: NotoSans;
    font-weight: 700;
    src: url('../fonts/NotoSans-Bold.ttf');
}

@font-face {
    font-family: NotoSans;
    font-weight: 800;
    src: url('../fonts/NotoSans-ExtraBold.ttf');
}


.orange-color {
    color: Orange;
}

.red-color {
    color: #E43636;
}

.blue-color {
    color: #1D42C5 !important;
}

.extra-bold {
    font-family: NotoSans-ExtraBold !important;
    font-weight: 800 !important;
}

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

button {
    background: none;
    outline: none;
    cursor: pointer;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

body {
    font: 16px/1.5;
    font-family: NotoSans-Regular;
    /*IE FIX*/
    /*display: flex;
    flex-direction: column;*/
}

body {
    overflow-x: hidden;
}


/* CONTAINER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
    display: flex;
    flex-direction: column-reverse;
    background: var(--main-white-color);
}

.page-footer ul {
    display: flex;
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.page-footer ul li:not(:last-child) {
    margin-right: 20px;
}

/* this used to go on forever, let's limit it somewhere */
@media (min-width: 1520px) {
    .container {
        max-width: 1480px;
    }
}

html body .tooltip.bs-tooltip-top {
    z-index: 1 !important;
}

html body .password-change-response {
    position: relative;
    top: 13px;
}

html body.uwp_account_page .tooltip.bs-tooltip-top {
    top: 70px !important;
}

html body.uwp_account_page .bs-tooltip-top .arrow::before {
    top: -35px !important;
    transform: rotate(180deg) !important;
}

body.hip-screening-progress .child-dashboard,
body.hip-screening-progress .list-treatment-map,
body.hip-screening-progress .resource-library {
    visibility: hidden;
}

body.hip-screening-completed .child-dashboard,
body.hip-screening-completed .list-treatment-map,
body.hip-screening-completed .resource-library {
    visibility: visible;
}

/* custom-css 2-feb */

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

/* custom-css 2-feb */


/* custom-css 29-march start */
.menu-item-type-custom,
li.my-account-cl {
    display: none;
}

ul#menu-subscriber {
    width: 100%;  /* make the title bar wide and put the buttons at the end */
    justify-content: flex-end;
}

@media screen and (max-width:767px) {
    li.my-account-cl {
        margin-top: 0px;
        padding: 0px 0px;
        display: block;
        background-color: transparent !important;
    }
}

/* 8/4/2024 */
.hip-row table.table.table-borderless.border-0.responsive-tables {
    margin-bottom: 0px !important;
}

.hip-row .custom-layout-part .bg-white.box-shadow-custom.custom_table {
    border-bottom: none !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

/* 9/4/2024 */
.share_by_defalut {
    width: 100%;
    max-width: 65%;
    font-size: 17px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.thrive-guide-team_bg {
    background-color: #d2e0fa;
}

/* 01/05/2024 */
@media screen and (max-width: 980px) {
    .innerbox-main .btn.btn-link {
        gap: 10px;
    }

    .share_by_defalut {
        max-width: 50%;
    }
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown .status-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 142px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 15px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    color: #0B0C1A;
}

span.status-acive-icon {
    padding-right: 5px;
    display: flex;
    align-items: center;
}

span.status-arrow-icon {
    margin-left: auto;
    display: flex;
    align-items: center;
    transform: rotate(180deg);
    width: 16px;
    height: 16px;
}

span.status-arrow-icon.up {
    transform: rotate(0deg);
}

.dropdown .status-dropdown-toggle .icon {
    margin-right: 5px;
}

.dropdown .status-dropdown-toggle .status-icon {
    margin-left: auto;
    color: #f00;
    /* Example for red triangle */
}

.dropdown .dropdown-status-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 221px;
    top: 100%;
    left: -55%;
    margin-top: 5px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

#mark-completed-modal {
    z-index: 9999;
}

.dropdown-status-item {
    display: flex;
    padding: 8px;
    margin: 8px;
    border-radius: 4px;
    font-weight: 500;
    line-height: 24px;
    font-size: 16px;
}

.dropdown-status-item:hover {
    background: #E4EAF6;
    cursor: pointer;
}

img.status-dowpdown-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.dropdown .dropdown-status-menu .dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
}

.dropdown .dropdown-status-menu .dropdown-item:hover {
    background-color: #f0f0f0;
}

.dropdown .dropdown-status-menu .dropdown-item .check-icon {
    margin-right: 8px;
    color: #28a745;
    /* Green checkmark */
}

li.hip-upgrade-plus {
    margin-top: auto;
    margin-bottom: auto;
    padding-right: 25px;
    font-weight: 600;
    font-size: 12px;
    line-height: 30px;
}

.hip-upgrade-plus img {
    width: 20px;
    height: 20px;
}

.hip-upgrade-plus a#plus-upgrade {
    color: #ffffff;
    padding: 10px 15px;
    text-align: center;
    border-radius: 3px;
    text-decoration: none;
    background-image: linear-gradient(90deg, rgba(207, 85, 112, 1) 0%, rgba(181, 57, 81, 1) 80%);
    cursor: pointer;
}

.dropdown.disable {
    pointer-events: none;
}

.dropdown.disable:hover {
    cursor: pointer;
}

.popup-overlay {
    display: none;
    /* Initially hidden */
    position: fixed;
    /* Ensure it covers the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 999999;
    /* Bring it to the front */
}

.popup-content {
    font-family: 'Noto Sans';
    display: flex;
    background: #ffffff;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    max-width: 1240px;
    height: calc(100vh - 2em);
    max-height: 893px;
    transform: translate(-50%, -50%);
    width: 90%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    /* Ensure proper z-index stacking within modal */
    z-index: 10000;
    /* Ensure it stays on top of the overlay */
}

.popup-container h3 {
    color: #1D42C5;
    font-family: Noto Sans;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

#popupOverlay .popup-left {
    max-height: unset;
    height: unset;
}

.popup-left {
    flex: 1;
    padding: 20px 30px;
    overflow: auto;
    max-height: 696px;
    height: 100%;
}

.popup-right {
    flex: 1;
    max-width: 448px;
}

.popup-footer {
    text-align: center;
}

h3.feature-title {
    /* font-family: Noto Sans; */
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1D42C5;
}

.logo .pop-upgrade-logo {
    width: 190px;
    height: 45px;
}

.popup-body h2 {
    color: #1D42C5;
    font-size: 28px;
    font-weight: 800;
    line-height: 38px;
}

.m-only {
    display: none !important;
}

.features {
    margin: 40px 0;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 30px;
}

.feature img {
    width: 40px;
    height: 40px;
    max-width: unset;
}

img.popup-featured-image {
    height: 100%;
    object-fit: cover;
    border-radius: 0 10px 10px 0;
}

.feature p {
    font-family: Noto Sans;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 0;
    color: #000;
}

.secondary-button {
    background: none;
    border: none;
    color: #888;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.secondary-button:hover {
    color: #444;
    background-color: transparent;
}

.popup-mobile-image {
    display: none;
}

.m-only {
    display: none;
}

.d-only {
    display: unset;
}

@media screen and (max-width: 992px) {
    .popup-header .logo {
        text-align: center;
        padding-bottom: 20px;
    }

    .popup-left {
        max-width: 100%;
        padding: 20px;
    }

    .popup-mobile-image {
        display: block;
        margin-left: -20px;
        margin-right: -20px;
    }

    .popup-right {
        display: none;
    }

    .popup-content {
        width: 98%;
        margin-top: 5em;
        height: calc(100vh - 6.5em);
        max-height: calc(100vh - 6.5em);
    }

    .price-section::before {
        transform: translate(-35%, -35%);
    }

    .price-section::after {
        display: none;
    }

    .popup-body h2 {
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }

    .feature {
        flex-direction: column;
        align-items: flex-start;
        background: #F6F6FA;
        padding: 25px;
        border-radius: 10px;
    }

    h3.feature-title {
        font-size: 18px;
        line-height: 30px;
        font-weight: 700;
    }

    .popup-learn-more {
        text-align: center;
        margin-top: 15px;
        color: #1D42C5;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
    }

    .m-only {
        display: block;
    }

    .d-only {
        display: none;
    }

}

span.action_plan__counter {
    width: 40px;
    height: 40px;
    padding: 8px 15px 8px 15px;
    border-radius: 4px 0px 0px 0px;
    background: #DADFF3;
    margin-right: 1em;
}


/* Blurred content effect */
.blurred-content {
    filter: blur(5px);
    pointer-events: none;
    /* Prevent interactions */
    user-select: none;
    /* Prevent text selection */
}

/* Blur overlay */
.blur-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 656px;
    transform: translate(-50%, -50%);
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    z-index: 10;
}

.blur-overlay h4 {
    margin-bottom: 0.5rem;
    color: #1D42C5;
    font-family: Noto Sans;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.blur-overlay p {
    color: #0B0C1A;
    font-family: Noto Sans;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.blur-overlay svg {
    max-width: 20px;
}

.blur-overlay svg path {
    fill: #170E7E;
}

/* Positioning and styling */
.elementor-element-bcf0aaa {
    position: relative;
    /* Ensure positioning context for overlay */
}

div.read-more-popup {
    display: none;
}

.read-more-popup {
    position: fixed;
    z-index: 1;
    max-width: 1312px;
    width: 100em;
    margin: 0 auto;
    background: #EDEDFA;
    display: flex;
    justify-content: center;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 10px;
    border: 3px solid #170E7E;
}

.read-more-popup h1 {
    font-size: 32px;
    font-family: 'NotoSans-Regular';
    text-align: center;
    padding: 30px;
}

.read-more-popup span.close-button:hover {
    cursor: pointer;
}

.read-more-popup img {
    border-radius: 10px;
    display: flex;
    width: 400px;
    max-width: 500px;
    align-items: center;
    margin-top: 10px;
    margin: 0 auto;
    margin-bottom: 30px;
    /* align-items: center; */
}

.read-more-popup span.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 5px;
    padding: 5px 10px;
    background: #000;
    font-size: 16px;
    color: #fff;
    text-align: center;
    font-weight: 700;
}

.tm-video-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.tm-video-popup-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tm-video-popup iframe {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 8px;
}

.tm-video-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    color: #000;
    cursor: pointer;
}

.next-steps .right-section div.step-item::after {
    font-size: 70px;
}

.next-steps .right-section div.step-item::after {
    bottom: -20px;
}

.whisker-box .scale-tip-hover a.close-psyc-content-popup {
    display: flex;
    justify-content: end;
    position: absolute;
    right: 35px;
    bottom: 10px;
    color: #d0385b;
    text-decoration: none;
    font-size: 23px;
    font-family: 'NotoSans-Bold';
}

a.unclickable-link {
    cursor: url('/wp-content/themes/astra-child/assets/images/starbust-blue.svg'), auto;
}

/* Popup container */
.ty-upgrade-popup {
    font-family: 'Noto Sans', sans-serif;
    text-align: center;
    background: #ffffff;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Heading */
.ty-upgrade-popup h2 {
    font-family: Noto Sans;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

/* Icon */
.popup-icon {
    width: 80px;
    height: 80px;
    margin: 1em 0;
}

/* Paragraph */
.ty-upgrade-popup p {
    color: #333;
    margin-bottom: 1.5em;
    font-family: Noto Sans;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

/* Close button */
.popup-close {
    background: none;
    border: none;
    color: #636369;
    font-size: 1em;
    cursor: pointer;
    font-weight: bold;
    text-decoration: underline;
    font-family: Noto Sans;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

/* Close button hover */
.popup-close:hover,
.popup-close:focus {
    color: #0056b3;
    background: transparent;
    text-decoration: underline;
}

.ty-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black background */
    z-index: 9999;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 20px;
    background-color: transparent;
    animation: fall-confetti 3s linear infinite;
    border-radius: 50%;
    top: -10%;
    /* Ensure pieces start above the screen */
}

/* Random rotation and falling animation */
@keyframes fall-confetti {
    0% {
        transform: translateY(-100%) rotate(0deg);
        /* Start above the screen */
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(110vh) rotate(720deg);
        /* End below the screen */
        opacity: 0;
    }
}

/* these should be in main scss no? */
div.hero__text {
    max-width: none;
}

.hero div.hero__text h1 {
    line-height: 70px;
}

.psychometric-scores .scale-section .scale .whisker-box div.score-marker {
    top: -23px;
}

.psychometric-scores .scale-section .scale .whisker-box .score-marker .score-content span.score-text {
    font-size: 18px;
}

.next-steps .right-section div.step-item {
    height: 160px;
}