/*:root {*/
/*    --q-primary: #981E32;*/
/*    --q-secondary: #1976d2;*/
/*    --q-accent: #9c27b0;*/
/*    --q-positive: #21ba45;*/
/*    --q-negative: #c10015;*/
/*    --q-info: #31ccec;*/
/*    --q-warning: #f2c037;*/
/*    --q-dark: #1d1d1d;*/
/*    --q-dark-page: #121212;*/
/*}*/

* {
    box-sizing: border-box;
}
html {
    font-size: calc(0.7rem + 0.25vw); /* Scales with viewport width */
    /*font-size: 16px;*/
}

body {
    font-size: 1rem; /* Base font size */
    margin: 0;
    padding-top: 1rem;
}

html, body, #q-app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
.q-header {
    background-color: #fff;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.scrolled-header {
    background-color: #981E32;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Add shadow effect */
}
.q-header .q-tabs {
    /*width: 60%;*/
    align-items: flex-end;
}
.scrolled-header .q-tabs {
    width: 100%;
}
.q-header .q-tab{
    color: #981E32;
    transition: color 0.3s ease, box-shadow 0.3s ease;
    padding-right: 4px;
}
h1.title {
    font-size: 1.8rem;
    line-height: 1.8rem;
    font-weight: 600;
    letter-spacing: normal;
    color: #253746;
    margin: 15px 0 0 0;
}
.scrolled-header .q-tab{
    color: #fff;
    padding-bottom: 0;
}
/*post-footer, search-form, card-section-3, quick-links-container*/
.narrow-section {
    max-width: 100%;
    width: 1024px;
    margin: 0 auto;
}
.quick-links-container .justify-center.items-end.with-icons.q-pb-sm>div {
    max-width: 150px;
    height: 150px;
    padding: 0 5px;
    flex: 1 0 16.667%;
}
.full-width-section {
    width: 1380px;
    max-width: 95%;
    display: flex;
    margin: 0 auto;
    flex-direction: column;
}
.full-width-section aside.q-drawer.q-drawer--left.q-drawer--standard {
    width: 256px !important;
    top: 100px !important;
    bottom: 50% !important;
    padding-left: 75px;
}
.sticky-search {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #981E32;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.sticky-search .search-form {
    width: 100%;
    display: block;
}
.search-input {
    width: calc(100% - 40px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.close-search {
    background: none;
    border: none;
    cursor: pointer;
    color: #243142; /* Match your theme */
}
.hero-section {
    position: relative;
    width: 100%;
    height: 80vh; /* Full viewport height */
}

.hero-image {
    position: absolute;
    width: 100%;
    height: 100%;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    /*background: rgba(0, 0, 0, 0.25); !* Semi-transparent background *!*/
    color: white;
}

.search-container {
    width: 100%;
    max-width: 900px; /* Adjust as needed */
}

.search-box {
    width: 100%;
}



.sticky-search .q-field__append,
.sticky-search input,
.sticky-search .q-field__control,
.sticky-search .q-field {
    /*background-color: white !important;*/
    border: none;
}


.sticky-search .q-field__bottom {
    display: none; /* Hide the error message area if not necessary */
}




.hero-section .q-expansion-item__container.relative-position {
    /*padding: 10px 10px 0 10px;*/
}

.pubmed-logo {
    max-width: 100px; /* Adjust logo size */
}

.pubmed-search-input {
    width: calc(100% - 80px); /* Adjust based on button size */
}
h2.section-title {
    font-size: 2.1em;
    font-weight: 400;
    margin-bottom: 5px;
}
/*.q-field--filled .q-field__control {*/
/*    padding-right: 0 !important;*/
/*    background-color: #fff !important;*/
/*}*/
.article-section {
    padding: 10px;
}
.content-section {
    padding: 10px;
}
.content-parent-container>div {
    padding: 10px;
    margin: 0 auto;
}
.content-parent-container>div>img {
    display: block;
    margin: 0 auto;
}

.FullWidthCallout {
    background: var(--q-accentBlueDark);
    margin: 3rem 0;
    position: relative;
}
p {
    font-size: 18px;
    margin-right: 15px;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}
font {
    all: unset !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
}

.Wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 61.111111111rem;
    width: 93%;
}
.FullWidthCallout__wrap {
    padding: 3.5rem 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 61.111111111rem;
    width: 93%;
}

.FullWidthCallout__image {
    position: absolute;
    top: 0;
    max-width: 100%;
    width: 58%;
    /*left: 20rem;*/
}

.FullWidthCallout__image img {
    display: block;
    top: -3rem;
    position: relative;
    -webkit-mask-image: none;
    mask-image: none !important;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
}

.FullWidthCallout__box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.FullWidthCallout__content {
    text-align: center; /* Center-align text */
    color: #ffffff; /* Ensure text color is white */
}

.u-text-white {
    color: #ffffff; /* Ensure white text color */
}

.ButtonSecondary--inverted {
    border: 2px solid white;
    color: white;
}
.tab-item {
    width: 150px; /* Adjust to your desired width */
    text-align: center;
}
.card-section {
    justify-content: space-between;
    flex-wrap: wrap;
}
.card-section-1 .my-card {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
}
.card-section-2 .my-card {
    width: 50%;
    max-width: 100%;
    flex: 1 1 48%;
}
.card-section-3 .my-card {
    width: 33.33%;
    max-width: 100%;
    flex: 1 1 30%;
}
.card-section-4 .my-card {
    width: 25%;
    max-width: 100%;
    flex: 1 1 23%;
}
.narrow-section .card-section.card-section-2 .my-card {
    width: 47%;
    max-width: 100%;
    flex: 1 1 47%;
}
.narrow-section .card-section.card-section-4 .my-card {
    width: 22%;
    max-width: 100%;
    flex: 1 1 22%;
}

/*.custom-menu {*/
/*    position: absolute !important; !* Ensure menu is positioned absolutely *!*/
/*    top: 100%; !* Position directly below the parent tab *!*/
/*    left: 0; !* Align with the left edge of the parent tab *!*/
/*    width: 100% !important; !* Match the width of the parent tab *!*/
/*    box-shadow: none; !* Adjust as needed *!*/
/*    border: 1px solid #ccc; !* Optional border for better visibility *!*/
/*}*/
/*.q-route-tab {*/
/*    flex: 1;*/
/*    text-align: center;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/
.q-page-container {
    padding-left: 0 !important;
}
aside.q-drawer.q-drawer--left.q-drawer--standard {
    /*width: 25% !important;*/
    top: 0 !important;
    bottom: 50% !important;
    position: relative;
}
.q-route-tab {
    position: relative;
    display: inline-block;
}
.q-tab__content.self-stretch.flex-center.relative-position.q-anchor--skip.non-selectable.column {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: capitalize;
}

.q-header .q-tab__content--inline .q-tab__icon+.q-tab__label {
    font-size: .97rem;
    padding-left: 8px;
     width: 120px;
    white-space: normal;
    text-align: left;
    /*max-width: 120px;*/
    /*word-break: break-word;*/
    line-height: 1.2;
}


.q-menu.nav-dropdown {
    min-width: 150px !important; /* Adjust as necessary */
    width: auto;
    /*overflow: visible;*/
    /*top: 130px !important;*/
    z-index: 1000;
    padding: 20px 10px;
}
.default-dropdown-position {
    top: 80px !important; /* Position when scrolled */
}

.scrolled-dropdown-position {
    top: 40px !important; /* Default position */
}
.q-tab:hover .q-menu {
    display: block; /* Ensure the menu shows when the parent is hovered */
}
.q-focus-helper {
    position: absolute; /* Ensure it doesn’t push other elements */
    top: 0;
    left: 0;
    width: 0; /* Hide its width */
    height: 0; /* Hide its height */
    overflow: hidden; /* Prevent any visual impact */
}
.q-toolbar, .q-tabs.row.no-wrap.items-center.justify-center.items-end .q-tabs__content a.q-tab, .q-tabs__content, .q-tab__content {
    align-items: flex-end !important;
}
.q-tab {
    padding-bottom: 20px;
}



.custom-menu {
    /*position: absolute;*/
    /*top: 100%;   !* Align directly below the parent tab *!*/
    /*left: 0;*/
    /*width: 100%; !* Make the dropdown the same width as the parent tab *!*/
    /*box-shadow: none; !* Adjust shadows if needed *!*/
}

.q-menu-item {
    padding: 10px;
}

.nav-item {
    position: relative;
}

.q-menu {
    min-width: 200px;
}
.q-header .custom-tabs.with-icons .tab:not(:last-child){
    border-right: 1px solid #dedede;
}
.q-item.active-anchor {
    border-left: var(--q-primary) 2px solid;
}
.custom-tabs {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    /*gap: 1rem;*/
}

.tab {
    padding: .5rem 0 .5rem 2.25rem;
    margin-bottom: 10px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.tab:hover {
    background-color: #f0f0f0;
    color: #007bff;
}

.tab i {
    font-size: 1.2rem;
}

.tab.text-secondary {
    color: #6c757d;
}

.tab.text-primary {
    color: #007bff;
}

.q-header .with-icons .q-tab:not(:last-child){
    border-right: 1px solid #dedede;
}

.with-icons i {
    font-size: 2.25rem;
    /*padding: 0 .15em 0 .15em;*/
    padding-right: .15em;
    align-self: center;
    margin-top: 5px;
}

.quick-links-container {
    display: block;
    margin: 0px auto;
    padding-bottom: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: white;
    border-radius: 8px;
    position: relative;
    top: -5vh;
    padding-top: 20px;
}
.quick-links .q-tab__content {
    align-items: center !important;
}
.quick-links .with-icons i {
    padding: 10px;
    margin-bottom: 10px;
    font-size: 2.7rem;
}
.q-card#editorImageModal {
    width: 50%;
    padding: 20px 10px;
}
.q-btn {
    font-weight: normal;
    text-transform: capitalize;
}
.q-card>img {
    height: 250px;
    width: auto;
    object-fit: cover;
}
.narrow-section .q-card .q-img {
    height: 250px;
}
.narrow-section .q-card {
    border-radius: .5rem;
}
.narrow-section .q-card__section, .narrow-section .q-card__actions {
    padding: 1.5rem;
}
.footer {
     padding: 16px;
     position: relative;
}
.footer .q-item__label{
    margin-bottom: 1rem;
}

.footer-content {
    /*display: flex;*/
    /*justify-content: space-evenly;*/
    /*flex-wrap: wrap;*/
    margin: 20px auto;
    max-width: 86.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.footer-row {
    display: flex;
    flex-wrap: wrap;
    list-style: "";
    margin-right: -0.75rem;
    margin-left: -0.75rem;
    padding-left: 0;
    justify-content: space-around;
    width: 100%;
}
.q-list.footer-list {
    /*flex-basis: 0;*/
    /*flex-grow: 1;*/
    /*max-width: 100%;*/
    margin-top: 20px;
    margin-bottom: 20px;
}
.post-footer {
    padding: 32px 0 24px;
}
/*.footer-menu {*/
/*    flex: 1 1 30%; !* Each menu takes 30% of width on larger screens *!*/
/*    min-width: 250px; !* Ensure menu doesn't shrink too much *!*/
/*    margin: 16px; !* Space between menus *!*/
/*    text-align: center; !* Center text within the menu *!*/
/*}*/

/*!* Responsive: Full width menus on small screens *!*/
/*@media (max-width: 600px) {*/
/*    .footer-menu {*/
/*        flex: 1 1 100%; !* Full width on small screens *!*/
/*    }*/
/*}*/
.custom-drawer {
    max-height: 50vh; /* Limit the height of the drawer */
    overflow-y: auto;  /* Allow vertical scrolling if content exceeds max-height */
}

.q-dialog .q-toolbar {
    padding: 20px;
}

.custom-tabs .tab {
    text-align: left;
    /*flex: 1; !* Equal space for each tab *!*/
    font-size: 1.1rem;
    line-height: 1.15;
    flex: 0 1 33%;
}
.scrolled-header .q-tabs {
    flex: 0 1 75% !important;
    margin: 0 auto;
}





@media(max-width: 1564px) {
    .custom-tabs .tab {
        font-size: 1rem;
        padding: 1rem 0 1rem 1.5rem;
    }
}
@media(max-width: 1427px) {
    .custom-tabs .tab {
        font-size: 1rem;
        padding: .5rem 0 .5rem 1.5rem;
    }
    .q-header .q-tab {
        padding-left: 0.25rem;
        padding-right: 0.25em;
        margin-right: 0.25rem;
    }
    .q-tab__content.self-stretch.flex-center.relative-position.q-anchor--skip.non-selectable.column {
        font-size: 0.95rem;
    }
}
@media (max-width: 1248px) {
   .side-menu-page .card-section.card-section-4 .my-card {
        width: 50%;
        max-width: 100%;
        flex: 1 1 47%;
    }
}
@media (max-width: 1165px) {
    .q-pa-md.home-buttons {
        display: none;
    }
}
@media (max-width: 1024px) {
    html {
        font-size: calc(0.65rem + 0.2vw);
    }
}
@media(max-width: 915px) and (min-width: 768px) {
    .card-section-4 .my-card {
        flex: 1 0 47%
    }
}
@media(max-width: 767px) {
    /*html {*/
    /*    font-size: 90%; !* 1rem will be 14.4px *!*/
    /*}*/
    html {
        font-size: 0.85rem;
    }
    .my-card {
        flex: 1 1 100% !important;
    }
    .footer-list {
        flex: 1 1 100%; /* Make lists full width on mobile */
    }
    .header-logo,
    .q-tabs,
    .custom-tabs, .header-top-links {
        flex: 0 0 100%; /* Stack elements vertically */
    }
    .quick-links-container .justify-center.items-end.with-icons.q-pb-sm>div {
        flex: 1 0 33.3333%;
    }
    .content-parent-container {
        display: block;
    }
    .content-parent-container>div {
        width: 100% !important;
        padding: 10px !important;
        float: none !important;
    }
}
@media (max-width: 600px) {
    /*.q-tab {*/
    /*    font-size: 14px; !* Adjust font size for smaller screens *!*/
    /*}*/

    .q-menu {
        min-width: 100%; /* Ensure dropdown takes full width on smaller screens */
    }
}


@media (max-width: 480px) { /* Mobile */
    html {
        font-size: 0.75rem;
    }
    .q-tab {
        padding: 0 10px 20px;
    }
    .q-tab__label {
        font-size: 12px;
    }
    .quick-links-container .justify-center.items-end.with-icons.q-pb-sm>div {
        flex: 1 0 50%;
    }
}