/* FUGU override styles*/

/* Global link defaults (site-wide) */
/*:root {
    --bs-link-color: #9d9f5d;
    --bs-link-hover-color: #c0c36e;*/ /* slightly darker for hover */

    /*--bs-link-decoration: none;
    --bs-link-hover-decoration: none;
    --bs-link-underline-opacity: .2;*/ /* optional, used by BS */
    /*--bs-link-underline-opacity-hover: .4;*/ /* optional, used by BS */

    /*--bs-brand-color: #9d9f5d;
    --bs-branddark-color: #6d6f41;
    --bs-brandlight-color: #babb8d;

    --bs-primary-color: #d29000;
    --bs-primarydark-color: #936400;
    --bs-primarylight-color: #dfb14c;*/

    /* for grid row styling */
    /*--status-3-bg: #444;
    --status-3-fg: #fff;
}*/

/* Base link styles */
a {
    color: var(--bs-link-color);
    text-decoration: var(--bs-link-decoration);
}

    a:visited {
        color: var(--bs-link-color);
        text-decoration: var(--bs-link-decoration);
    }

        /* Hover/focus ALWAYS wins */
        a:hover,
        a:focus {
            color: var(--bs-link-hover-color);
            text-decoration: var(--bs-link-hover-decoration);
        }

    /* Optional */
    a:active {
        color: var(--bs-link-active-color, var(--bs-link-hover-color));
    }

/* Section that wants black links */
.section-links-black {
    --bs-link-color: #111;
    --bs-link-hover-color: #000;
}

/* colors*/
a.red {
    color: #ff0000;
}

    a.red:hover {
        color: #de3d3d;
    }

a.orange {
    color: var(--bs-primary-color);
    ;
}

    a.orange:hover {
        color: var(--bs-primarydark-color);
    }


a.white {
    color: #e9e7e7;
}

    a.white:hover {
        color: #fff;
    }


.dropdownoverride {
    right: 0px !important;
}

.margin20 {
    margin: 20px;
}

.minheight500 {
    min-height: 500px;
}

.bodyminheight {
    min-height: 700px;
    background-color: white;
}

/* Keep the hamburger aligned visually with other utility icons */
.navbar-tool.btn.btn-link {
    color: inherit;
    text-decoration: none;
}

    .navbar-tool.btn.btn-link:focus {
        box-shadow: none;
    }

.offcanvas.offcanvas-start {
    width: 320px; 
}

.topbar {
    padding: .225rem 0;
}

.topbar-dark .topbar-text > i, .topbar-dark .topbar-link > i {
    color: #767676;
}

.topbar-link.icon-on > i {
    color: var(--bs-primary-color);
}

.navbar-tool {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

    .navbar-tool .navbar-tool-label {
        background-color: var(--bs-primary-color);
    }

.navbar-tool-label {
    margin-top: 0px;
}

/*below is actually the secondary brand color but is named primary to override the bootstrap defaults*/
.text-primary {
    color: var(--bs-primary-color) !important; 
}

.text-primary-dark {
    color: var(--bs-primarydark-color) !important;
}

.text-default {
    color: var(--bs-brand-color) !important; 
}

.text-default-dark {
    /* color: #7f8052 !important;*/
    color: var(--bs-branddark-color) !important;
}

.text-grey-dark {
    color: #666 !important;
}

/* Scope black links within a container */
.link-scope-black {
    --bs-link-color: #000;
    --bs-link-hover-color: #333;
    --bs-link-underline-opacity: .2;
}

.btn-primary {
    background-color: var(--bs-primary-color); /*secondary brand color*/
    border-color: var(--bs-primary-color);
    color: white;
}

    .btn-primary:hover,btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary.active, .btn-primary.show {
        background-color: var(--bs-primarylight-color); /*brand orange light*/
        border-color: var(--bs-primarylight-color);
    }

.btn-primary:visited {
    color: white;
}

.btn-brand {
    background-color: var(--bs-brand-color); 
    border-color: var(--bs-brand-color);
    color: white;
}

    .btn-brand:hover, .btn-brand:active, .btn-brand:focus, .btn-brand.active, .btn-brand.show {
        background-color: var(--bs-primarylight-color);
        border-color: var(--bs-primarylight-color);
    }

.btn-brand:visited {
    color: white;
}


.btn-info { /*match to brand so as to capture built in bootstrap parent button styles */
    background-color: var(--bs-brand-color);
    border-color: var(--bs-brand-color);
}

    .btn-info:hover, .btn-info:active, .btn-info:focus, .btn-info.active, .btn-info.show {
        background-color: var(--bs-brandlight-color);
        border-color: var(--bs-brandlight-color);
    }

.btn-dkgrey {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

    .btn-dkgrey:hover, .btn-dkgrey:active, .btn-dkgrey:focus, .btn-dkgrey.active, .btn-dkgrey.show {
        background-color: #474747;
        border-color: #474747;
        color: #fff;
    }

.skew-button {
    color: black;
    transform: skewX(13deg);
    padding: 0px 8px;
    text-align: center;
}

    .skew-button span {
        display: inline-block;
        transform: skewX(-13deg); /* Unskew the inner text */
    }


/*    glowing effects*/
@keyframes glowingbuttonprimary {
    0% {
        background-color: var(--bs-primary-color);
        box-shadow: 0 0 5px var(--bs-primary-color);
    }

    50% {
        background-color: var(--bs-primarylight-color);
        box-shadow: 0 0 20px var(--bs-primarylight-color);
    }

    100% {
        background-color: var(--bs-primary-color);
        box-shadow: 0 0 5px var(--bs-primary-color);
    }
}

@keyframes glowingbuttonbrand {
    0% {
        background-color: var(--bs-brand-color);
        box-shadow: 0 0 5px var(--bs-brand-color);
    }

    50% {
        background-color: var(--bs-brandlight-color);
        box-shadow: 0 0 20px var(--bs-brandlight-color);
    }

    100% {
        background-color: var(--bs-brand-color);
        box-shadow: 0 0 5px var(--bs-brand-color);
    }
}

@keyframes glowingbuttondkgrey {
    0% {
        background-color: #333;
        box-shadow: 0 0 5px #333;
    }

    50% {
        background-color: #5e5e5e;
        box-shadow: 0 0 20px #5e5e5e;
    }

    100% {
        background-color: #333;
        box-shadow: 0 0 5px #333;
    }
}

.btn-primary.glowing {
    animation: glowingbuttonprimary 2s infinite;
}

.btn-brand.glowing {
    animation: glowingbuttonbrand 2s infinite;
}

.btn-dkgrey.glowing {
    animation: glowingbuttondkgrey 2s infinite;
}

.text-red {
    color: #e10001;
}

.text-yellow {
    color: yellow;
}

.background-yellow {
    background-color: yellow;
}

.text-purple {
    color: purple;
}

.breadcrumb {
    background: none !important;
    margin-top: 4px;
    font-size: small;
}

.breadcrumb-item {
    color: #848484;
    font-size: small;
}

    .breadcrumb-item > a {
        color: #848484 !important;
        font-size: small !important;
    }

        .breadcrumb-item > a:hover {
            color: var(--bs-primary-color) !important;
        }

.pe-lg-2 {
    padding-right: 0px;
}

@media (min-width: 992px) {
    .pe-lg-2 {
        padding-right: 0px !important;
    }

    .me-lg-2 {
        margin-right: 0rem !important;
    }
}

@media (min-width: 992px) {
    .ps-lg-0 {
        padding-left: 30px !important;
    }
}


.opacity-100 {
    opacity: 1 !important;
}

    .opacity-100:hover {
        opacity: 1 !important;
    }

.banner-main-default {
    text-align: center;
    background-color: #000; 
}

.banner-contentsponsor-default {
    text-align: center;
    background-color: #000;
}

.banner-leadsponsor-default {
    text-align: center;
    background-color: #000;
}

/*-----------------------------------------------------------------------*/
/*FUGU new styles*/
.pagetitle {
    font-size: 24px;
    padding-top: 20px;
    /* margin-left: 0px;
    padding-left: 0;*/
    border-bottom: 1px dotted var(--bs-brand-color);
}

.pagebody {
    margin-top: 20px;
    margin-bottom: 20px;
}


hr.dottedline {
    border-top: 1px dotted var(--bs-brand-color);
}


.text-highlight {
    color: var(--bs-primary-color);
}

.text-highlight-alt {
    color: var(--bs-brand-color);
}

.brand-lightgrey {
    color: #f5f5f5;
}

.section-header-icon {
    font-size: 18px;
    font-weight: bold;
    padding-top: 14px;
    position: absolute;
    left: 10px;
}

.section-header-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 6px;
    position: absolute;
    left: 40px;
}

    .section-header-title.dk-grey {
        color: #444;
    }

    a.section-header-title.dk-grey {
        color: #444;
    }

a.section-header-title.dk-grey:hover {
    color: #000;
}

.section-header-subtitle {
    padding-top: 12px;
    padding-bottom: 6px;
    position: absolute;
    left: 40px;
}

.section-header-actiontext {
    font-size: .9rem;
    font-weight: normal;
}

    .section-header-actiontext.dk-grey {
        color: #666;
    }

a.section-header-actiontext.dk-grey {
    color: #474747;
}

    a.section-header-actiontext.dk-grey:hover {
        color: #676767;
    }

@media (max-width: 480px) {
    .section-header-actiontext {
        font-size: .75rem;
    }
}

.section-series {
    background-color: #f5f5f5;
    margin: 0px 0px 0px 0px;
    min-height: 200px;
}

.section-series-header {
    background-color: #fff;
    height: 40px;
    background-image: url("/images/backgrounds/angle_sectionheader_grey.png");
    background-repeat: no-repeat;
    background-position: left;
    font-weight: bold;
}

.section-events {
    background-color: #9ea05d;
    margin-bottom: 0px;
    min-height: 200px;
}

.section-events-header {
    background-color: #f5f5f5;
    height: 40px;
    background-image: url("/images/backgrounds/angle_sectionheader_green.png");
    background-repeat: no-repeat;
    background-position: left;
    color: #fff;
    font-weight: bold;
}

.section-uploads {
    background-color: #9ea05d;
    margin-bottom: 0px;
    min-height: 200px;
}

.section-uploads-header {
    background-color: #f5f5f5;
    height: 40px;
    background-image: url("/images/backgrounds/angle_sectionheader_green.png");
    background-repeat: no-repeat;
    background-position: left;
    color: #fff;
    font-weight: bold;
}

.section-courses {
    background-color: #333;
    margin-bottom: 0px;
    min-height: 200px;
}

.section-courses-header {
    background-color: #9ea05d;
    height: 40px;
    background-image: url("/images/backgrounds/angle_sectionheader_darkgrey.png");
    background-repeat: no-repeat;
    background-position: left;
    color: #fff;
    font-weight: bold;
}

.section-episodes {
    background-color: #333;
    margin-bottom: 0px;
    min-height: 200px;
}

.section-episodes-header {
    background-color: #9ea05d;
    height: 40px;
    background-image: url("/images/backgrounds/angle_sectionheader_darkgrey.png");
    background-repeat: no-repeat;
    background-position: left;
    color: #fff;
    font-weight: bold;
}

.section-learningcenters {
    background-color: #fff;
    margin-bottom: 0px;
    min-height: 200px;
}

.section-learningcenters-header {
    background-color: #333;
    height: 40px;
    background-image: url("/images/backgrounds/angle_sectionheader_white.png");
    background-repeat: no-repeat;
    background-position: left;
    font-weight: bold;
}

.section-promotions {
    background-color: #fff;
    margin-bottom: 0px;
    min-height: 200px;
}

.section-promotions-header {
    background-color: #333;
    height: 40px;
    background-image: url("/images/backgrounds/angle_sectionheader_white.png");
    background-repeat: no-repeat;
    background-position: left;
    font-weight: bold;
}


@media (max-width: 480px) {

    .section-series-header {
        background-image: url("/images/backgrounds/angle_sectionheader_grey_mb.png");
    }

    .section-uploads-header {
        background-image: url("/images/backgrounds/angle_sectionheader_green_mb.png");
    }

    .section-header-title {
        margin-left: 20px;
    }

    .section-header-subtitle {
        font-size: smaller;
        position: inherit;
        margin-left: 0px;
        padding-bottom: 20px;
    }

    .flex-section-header-title {
        margin-left: 20px;
    }

    .section-header-icon {
        padding-top: 8px;
    }

    .section-events-header {
        background-image: url("/images/backgrounds/angle_sectionheader_green_mb.png");
    }

    .section-courses-header {
        background-image: url("/images/backgrounds/angle_sectionheader_darkgrey_mb.png");
    }

    .section-episodes-header {
        background-image: url("/images/backgrounds/angle_sectionheader_darkgrey_mb.png");
    }


    .section-learningcenters-header {
        background-image: url("/images/backgrounds/angle_sectionheader_white_mb.png");
    }

    .section-promotions-header {
        background-image: url("/images/backgrounds/angle_sectionheader_white_mb.png");
    }
}

.full-width-right {
    left: 60%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    position: relative;
    right: 40%;
    width: 100vw;
}

.utility-bar-background {
    background-color: #2d2d2d;
    background-image: url("/images/backgrounds/angle_utilitybar_background_alt.png");
    background-repeat: no-repeat;
    background-position: right bottom;
}

.utility-bar-background {
    transition: opacity 0.2s ease-in-out;
}

    .utility-bar-background:not(.nav-loaded) {
        opacity: 0;
    }

@media (max-width: 480px) {
    .utility-bar-background {
        background-image: url("/images/backgrounds/angle_utilitybar_background_alt_mb.png");
    }
}

.utility-bar-circle-label {
    background-color: var(--bs-brand-color);
    position: absolute;
    top: -.1125rem;
    right: -0.4rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    color: #fff;
    font-size: .65rem;
    font-weight: 500;
    text-align: center;
    line-height: 0.9rem;
}

.primarynav-bar-background {
    background-image: url("/images/backgrounds/angle_primarynav_background.png");
    background-repeat: no-repeat;
    background-position: right top;
}

.full-bar-background {
    background-image: url("/images/backgrounds/angle_full_background.png");
    background-repeat: no-repeat;
    background-position: right top;
}

.primarynav-bar-background {
    transition: opacity 0.2s ease-in-out;
}

    .primarynav-bar-background:not(.nav-loaded) {
        opacity: 0;
    }

.setprimarynavheight {
    height: 80px;
    position: relative;
    z-index: 500;
}

.setutilitybarheight {
    height: 32px;
}

.high-z {
    z-index: 20 !important;
}

@media (max-width: 480px) {
    .primarynav-bar-background {
        background-image: url("/images/backgrounds/angle_primarynav_background_mb.png");
    }

    .full-bar-background {
        background-image: url("/images/backgrounds/angle_full_background_mb.png");
    }
}

.vertline-spacer:before {
    padding-right: 10px;
    padding-left: 10px;
    content: "|";
    float: left;
}

@media (max-width: 480px) {
    .vertline-spacer:before {
        padding-right: 6px;
        padding-left: 6px;
        content: "|";
        float: left;
    }
}

.badgebar {
    /*   margin-left: 6px;
        margin-right: 6px;*/
    font-size: 1.25em;
}

/*these area colors for the badge icons themselves and not the background colors*/
.fugubadge {
    color: #000;
}

.badge-green {
    color: var(--bs-brand-color);
}

.badge-gold {
    color: var(--bs-primary-color);
}

.badge-silver {
    color: silver;
}

.badge-blue {
    color: #4f84b6;
}

.badge-pink {
    color: #ac4ea7;
}

.badge-yellow {
    color: yellow;
}

/*custom fontawesome sizes*/
.fa-1-5x {
    font-size: 1.5em !important;
}

.badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    color: #fff;
    background-color: #666;
    border-radius: 50px;
}

    .badge-pill .btn-close {
        margin-left: 8px;
        color: #fff;
        background: none;
        border: none;
        cursor: pointer;
    }

.badge-count {
    position: absolute;
    bottom: 0px; /* Moves the badge count down */
    right: -0.9em; /* Moves the badge count to the right */
    font-size: 0.7em;
    /* padding: 0.25em 0.5em;*/
}

.search-count-badge {
    font-size: .75rem;
    line-height: 1;
    padding: .3rem .5rem;
    border-radius: 999px;
    background: var(--bs-light);
    color: var(--bs-body-color);
    border: 1px solid rgba(0,0,0,.08);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.pill-count {
    position: absolute;
    bottom: 0px; /* Moves the pill count down */
    right: -0.9em; /* Moves the pill count to the right */
    font-size: 0.5em;
    /* padding: 0.25em 0.5em;*/
    align-items: center;
    padding: 0.5rem 0.75rem;
}

.rankbar {
    /* margin-left: 6px;
        margin-right: 6px;*/
    font-size: 1.10em;
}

.fugurank {
    color: #fff;
}

    .fugurank i:hover {
        color: #fff;
    }

.rankgreen {
    color: green;
}

.rankwhite {
    color: white;
}

.rankblack {
    color: black;
}

.rankred {
    color: #e10001;
}

.rankyellow {
    color: yellow;
}

.rankpurple {
    color: purple;
}

.icon-shadow-light {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}

.icon-shadow-glow {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

.icon-size-md {
    font-size: 1.2rem;
}

.icon-size-md {
    font-size: 1.2rem;
}

/*testimonial slider*/
.bg-testimonial-quotes {
    background-image: url("/images/icons/quotes.png");
    background-repeat: no-repeat;
    background-position: 150px 0px;
}

.testimonial-container {
    width: 100%;
    height: auto;
    position: relative;
}

.testimonial-carousel {
    background: transparent;
    text-align: center;
    width: 100%;
    min-height: 250px;
    border: none !important;
    z-index: 9;
}

.testimonial-item {
    color: #000;
    font: 36px/200px sans-serif;
    text-align: center;
    z-index: 1000;
}

.hero-button-container {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding-bottom: 40px;
    flex-shrink: 0; /* Prevents buttons from shrinking when text expands */
}

.hero-angled-box-white,
.hero-angled-box-black {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 280px;
    text-align: center;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 0 !important;
    transition: opacity 0.3s ease;
}

@media (max-width: 992px) {
    .hero-angled-box-white,
    .hero-angled-box-black {
        height: 60px;
        /*      width: 170px;*/
        font-size: 0.8rem;
    }
}

.hero-angled-box-white {
    background-color: white;
    color: black;
    /* clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%);*/
    /*overflow: visible;*/
    transform: skewX(13deg);
    margin-right: 5px;
    /* padding: 1rem 2rem;*/
    /* display: block;*/
    background-color: rgba(255, 255, 255, 1); /* solid initially */
    transition: background-color 0.3s ease;
}

    .hero-angled-box-white .unskew {
        transform: skewX(-13deg); /* reverse the outer skew */
    }

    .hero-angled-box-white:hover {
        background-color: rgba(255, 255, 255, 0.7); /* faded black, but text remains fully visible */
    }

.hero-angled-box-black {
    background-color: black;
    color: white;
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);*/
    /*overflow: visible;*/
    transform: skewX(13deg);
    margin-left: 5px;
    /*    padding: 1rem 2rem;*/
    /* display: block;*/
    background-color: rgba(0, 0, 0, 1); /* solid initially */
    transition: background-color 0.3s ease;
}

    .hero-angled-box-black .unskew {
        transform: skewX(-13deg); /* reverse the outer skew */
    }

    .hero-angled-box-black:hover {
        background-color: rgba(0, 0, 0, 0.7); /* faded black, but text remains fully visible */
    }


.overlay-datetag {
    color: #fff;
    font-size: 16px;
    font-weight: 100;
    text-align: center;
}

.overlay-timer {
    font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
    position: absolute;
    top: .75rem;
    right: -1.5rem;
    color: #fff;
    z-index: 5;
}

.overlay-timertext {
    font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
    position: absolute;
    top: .75rem;
    right: 1.0rem;
    color: #fff;
    z-index: 5;
}

.smalldescriptivetext {
    color: var(--bs-brand-color);
    font-size: 12px;
    font-family: Oswald;
}

.countdowntimer {
    display: inline-flex;
    flex-wrap: nowrap;
    text-align: right;
    padding-top: 4px;
    padding-right: 40px;
    text-shadow: 2px 2px 8px #000;
}

.image-overlay {
    position: absolute;
    width: 90%;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Oswald;
}

.overlay-title {
    color: #fff;
    font-size: 34px;
    font-weight: 400;
    text-align: center;
    line-height: 36px;
    text-shadow: 0 0 6px #000;
}

a.overlay-title:link,
a.overlay-title:visited,
a.overlay-title:active {
    color: #fff;
    text-decoration: none;
}

.overlay-subtitle {
    color: var(--bs-brandlight-color);
    font-size: 20px;
    font-weight: 100;
    text-align: center;
    width: 100%;
    margin-top: 8px;
    vertical-align: baseline;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0.4) 90%, rgba(0,0,0,0) 100%);
}

/*expand product-card class*/
.product-card {
    /*min-height: 500px;*/
    padding-bottom: 0px; /*override of default bootstrap*/
}

.card-showdate-span {
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background-color: #2d2d2d;
    background-image: url("/images/backgrounds/angle_showdate-span_background.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    color: #fff;
    font-size: .75rem;
    font-family: Oswald;
    letter-spacing: .05rem;
    display: flex;
}

.card-videoinfo-span {
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background-color: #2d2d2d;
    background-image: url("/images/backgrounds/angle_showdate-span_background.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    color: #fff;
    font-size: .75rem;
    font-family: Oswald;
    letter-spacing: .05rem;
    display: flex;
}

.card-videoshare-span {
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: .1rem;
    padding-bottom: .1rem;
    background-color: #fff;
}

.video-container {
    margin: 0px;
    padding: 0px;
    background-color: black;
}

.card-subtitle-span {
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    background-color: var(--bs-brand-color);
    background-image: url("/images/backgrounds/angle_subtitle-span_background.png");
    background-repeat: no-repeat;
    background-position: right top;
    display: flex;
}

.card-subtitle-text {
    color: #000;
    font-size: .75rem;
    font-family: Oswald;
    letter-spacing: .05rem;
}

a.card-subtitle-text:link,
a.card-subtitle-text:visited,
a.card-subtitle-text:active {
    color: #000;
    text-decoration: none;
}

a.card-subtitle-text:hover {
    color: #000;
    text-decoration: underline;
}


.overlay-darken {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #000;
    opacity: .3;
}

    .overlay-darken:hover {
        opacity: .1;
    }

.school-logo-tag {
    text-align: center;
    color: #000;
    margin-left: 20px;
    margin-right: 20px;
}


/*ribbon*/
/* common https://codepen.io/nxworld/pen/oLdoWb */
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    z-index: 6;
}

    .ribbon.bandblue::before,
    .ribbon.bandblue::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        border: 5px solid #2980b9;
    }

    .ribbon.bandblue span {
        position: absolute;
        display: block;
        width: 225px;
        /*padding: 15px 0;*/
        padding: 15px 0;
        background-color: #3498db;
        box-shadow: 0 5px 10px rgba(0,0,0,.1);
        color: #fff;
        font: 700 18px/1 'Lato', sans-serif;
        /*    font: 700 16px/2 'Lato', sans-serif;*/
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        /* text-transform: uppercase;*/
        text-align: center;
    }

    .ribbon.bandred::before,
    .ribbon.bandred::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        border: 5px solid #bf372a;
    }

    .ribbon.bandred span {
        position: absolute;
        display: block;
        width: 225px;
        /*padding: 15px 0;*/
        padding: 15px 0;
        background-color: #e43;
        box-shadow: 0 5px 10px rgba(0,0,0,.1);
        color: #fff;
        font: 700 18px/1 'Lato', sans-serif;
        /*    font: 700 16px/2 'Lato', sans-serif;*/
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        /* text-transform: uppercase;*/
        text-align: center;
    }

    .ribbon.bandyellow::before,
    .ribbon.bandyellow::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        border: 5px solid #946b11;
    }

    .ribbon.bandyellow span {
        position: absolute;
        display: block;
        width: 225px;
        /*padding: 15px 0;*/
        padding: 15px 0;
        background-color: var(--bs-primary-color);
        box-shadow: 0 5px 10px rgba(0,0,0,.1);
        color: #fff;
        font: 700 18px/1 'Lato', sans-serif;
        /*    font: 700 16px/2 'Lato', sans-serif;*/
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        /* text-transform: uppercase;*/
        text-align: center;
    }

    .ribbon.bandblack::before,
    .ribbon.bandblack::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        border: 5px solid #000;
    }

    .ribbon.bandblack span {
        position: absolute;
        display: block;
        width: 225px;
        /*padding: 15px 0;*/
        padding: 15px 0;
        background-color: #333;
        box-shadow: 0 5px 10px rgba(0,0,0,.1);
        color: #fff;
        font: 700 18px/1 'Lato', sans-serif;
        /*    font: 700 16px/2 'Lato', sans-serif;*/
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        /* text-transform: uppercase;*/
        text-align: center;
    }

    .ribbon.bandgreen::before,
    .ribbon.bandgreen::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        border: 5px solid #6d6f41;
    }

    .ribbon.bandgreen span {
        position: absolute;
        display: block;
        width: 225px;
        /*padding: 15px 0;*/
        padding: 15px 0;
        background-color: var(--bs-brand-color);
        box-shadow: 0 5px 10px rgba(0,0,0,.1);
        color: #fff;
        font: 700 18px/1 'Lato', sans-serif;
        /*    font: 700 16px/2 'Lato', sans-serif;*/
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        /* text-transform: uppercase;*/
        text-align: center;
    }

.statuscolorband {
    font: 700 18px/1 'Lato', sans-serif;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-align: center;
    letter-spacing: 1px;
}

    .statuscolorband:hover {
        opacity: 0.7;
        cursor: pointer;
    }

.statuscolorband.bandblue {
    background-color: #3498db;
}

    .statuscolorband.bandred {
        background-color: #e43;
    }

    .statuscolorband.bandyellow {
        background-color: var(--bs-primary-color);
    }

    .statuscolorband.bandgreen {
        background-color: var(--bs-brand-color);
    }

.statuscolorband.bandblack {
    background-color: #333;
}

.seriesdescriptivetext {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1px;
}

/* top left*/
.ribbon-top-left {
    top: -10px;
    left: -10px;
}

    .ribbon-top-left::before,
    .ribbon-top-left::after {
        border-top-color: transparent;
        border-left-color: transparent;
    }

    .ribbon-top-left::before {
        top: 0;
        right: 0;
    }

    .ribbon-top-left::after {
        bottom: 0;
        left: 0;
    }

    .ribbon-top-left span {
        right: -25px;
        top: 30px;
        transform: rotate(-45deg);
    }

.seriesfooter-subtitle-text {
    color: #fff;
    font-size: 1.2rem;
    font-family: Oswald;
    letter-spacing: .05rem;
}

a.seriesfooter-subtitle-text:link,
a.seriesfooter-subtitle-text:visited,
a.seriesfooter-subtitle-text:active {
    color: var(--bs-brand-color);
    text-decoration: none;
}

a.seriesfooter-subtitle-text:hover {
    color: var(--bs-brandlight-color);
    text-decoration: underline;
}

.bg-footer {
    background-color: #333 !important;
    background-image: url("/images/backgrounds/angle_footer_background.png");
    background-repeat: no-repeat;
    background-position: right bottom;
}


.bg-subfooter {
    background-color: #2d2d2d !important;
    background-image: url("/images/backgrounds/angle_subfooter_background_alt.png"); /*this alt version is cheated to the left as the footer "right bottom" doesn't have enough into to set correctly to align with this one*/
    background-repeat: no-repeat;
    background-position: right top;
}

.bg-darkGrey {
    background-color: #2d2d2d !important;
}

.bg-primary {
    background-color: var(--bs-primary-color); /*orange*/
}

.bg-brand {
    background-color: var(--bs-brand-color); 
}


.site-slogan {
    line-height: 150%;
}

@media (max-width: 480px) {
    .bg-footer {
        background-image: url("/images/backgrounds/angle_footer_background_mb.png");
        background-position: right top;
    }

    .bg-subfooter {
        background-image: none;
        background-color: #1b1b1b !important;
    }

    .site-slogan {
        line-height: 120%;
    }
}


.rate {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}



.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center
}

    .rating > input {
        display: none;
    }

    .rating > label {
        position: relative;
        /* width: 1em;*/
        font-size: 20px;
        font-weight: 300;
        color: #FFD600;
        cursor: pointer
    }

        .rating > label::before {
            content: "\2605";
            position: absolute;
            opacity: 0;
        }

        .rating > label:hover:before,
        .rating > label:hover ~ label:before {
            opacity: 1 !important
        }

    .rating > input:checked ~ label:before {
        opacity: 1
    }

    .rating:hover > input:checked ~ label:before {
        opacity: 0.4
    }

/*square glows*/
.divglow {
    -webkit-animation: activediv 2s infinite;
    -moz-animation: activediv 2s infinite;
    animation: activediv 2s infinite;
}

@keyframes activediv {
    50% {
        /* box-shadow: 10px 20px 30px blue;*/
        /*box-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;*/
        box-shadow: 0px 0px 20px 10px rgba(210,144,0,0.9);
    }
}

/*  use this one for shaped glows*/
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0px 0px rgba(210,144, 0, 0.4);
    }

    50% {
        box-shadow: 0 0 8px 8px rgba(210,144, 0, 0.85);
    }

    100% {
        box-shadow: 0 0 0px 0px rgba(210,144, 0, 0.4);
    }
}

.button-glow {
    animation: pulse-glow 1.5s infinite ease-in-out;
    /*border-radius: 1.5rem;*/
}

@keyframes pulse-inner-glow {
    0% {
        box-shadow: inset 0 0 0px 0px rgba(210, 144, 0, 0.4);
    }

    50% {
        box-shadow: inset 0 0 8px 4px rgba(210, 144, 0, 0.85);
    }

    100% {
        box-shadow: inset 0 0 0px 0px rgba(210, 144, 0, 0.4);
    }
}

.inner-glow {
    animation: pulse-inner-glow 1.5s infinite ease-in-out;
}

/* Invisible recaptcha */
.grecaptcha-badge {
    visibility: hidden;
}

/*telerik style mods*/
.k-tabstrip-items-wrapper .k-item:focus, .k-tabstrip-items-wrapper {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Custom CSS for focused tab text color */
.k-tabstrip .k-item.k-focus {
    color: red !important; 
}

/* Custom CSS for selected tab text color */
.k-tabstrip .k-item.k-selected {
    color: green !important; 
}

/* Custom CSS for non-focused and non-selected tab text color */
.k-tabstrip .k-item:not(.k-focus):not(.k-selected) {
    color: var(--bs-brand-color) !important; 
}

.k-tabstrip-items .k-link {
    color: var(--bs-brand-color) !important;
    gap: 0.2rem !important; /*space between items within a tab such as led light from text*/
}


    .icon-with-dot {
        position: relative;
        display: inline-block;
    }

    /*green dot stop right color-profile icon*/
    .icon-with-dot .dot-green {
        position: absolute;
        bottom: -2px;
        right: -8px;
        height: 6px;
        width: 6px;
        background-color: green;
        border-radius: 50%;
    }



.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu .dropdown-menu {
        display: none;
        top: 0;
        left: 100%;
        margin-left: -1px;
    }

.dropdown-submenu-left .dropdown-menu {
    left: auto;
    right: 100%;
    margin-right: -1px;
}

.dropdown:hover > .dropdown-menu, .dropdown-menu:hover {
    display: block;
}

.character-countdown {
    font-size: 12px;
    color: gray;
    margin-bottom: -14px;
    padding-bottom: 0px;
}



.text-muted-standard {
    /*  font-size: 12px;*/
    opacity: 0.8;
}

.text-muted-white {
    /*  font-size: 12px;*/
    opacity: 0.8;
    color: white;
}

.unstyled-button {
    all: unset; /* Remove all inherited styles */
    cursor: pointer; /* Ensure the button still looks clickable */
    display: inline; /* Optional: Make it behave like plain text */
}




.userFileTitleheader {
    font-weight: bold;
    padding: 0px;
    margin: 0px;
    color: #373f50;
}

a.userFileTitleheader {
    color: #373f50;
}

    a.userFileTitleheader:hover {
        color: #000;
    }

/* White hover Variation */
.userFileTitleheader-white {
    font-weight: bold;
    padding: 0px;
    margin: 0px;
    color: #373f50; /* Keep same base color */
}

a.userFileTitleheader-white {
    color: #373f50;
}

    a.userFileTitleheader-white:hover {
        color: white !important; /* White hover */
    }

/* Green Variation */
.userFileTitleheader-green {
    font-weight: bold;
    padding: 0px;
    margin: 0px;
    color: var(--bs-brand-color); /* Keep same base color */
}

a.userFileTitleheader-green {
    color: var(--bs-brand-color);
}

    a.userFileTitleheader-green:hover {
        color: white !important; /* White hover */
    }

.userFileFilterPopup {
    align-content: end;
}


.overlayUserFileImage {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 1; /* Ensure it’s above the image */
}

.mono {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.6rem; /* Large font for numbers */
    font-weight: 500;
    line-height: 1; /* Ensures numbers and colons align properly */
}


.forum-comment {
    margin-bottom: 10px;
    padding: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* black with 50% opacity */
}


/* IMPORTANT: need to keep classes called from the database content blocks in the universal stylesheet */
.hero-titletext {
    font-size: 2.5rem;
    font-family: Oswald;
    letter-spacing: .05rem;
}

.hero-subtitletext {
    font-size: 1rem;
    /* font-size: clamp(0.75rem, 2vw, 1.5rem);*/
    font-family: Oswald;
    color: var(--bs-brand-color);
    letter-spacing: .02rem;
    text-transform: uppercase;
    display: inline-block; /* Ensures background only covers text */
    padding: 5px 100px; /* Adds some spacing */
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0) 100%);
}

.hero-button-text {
    font-size: 1.5rem;
    font-family: Oswald;
    font-weight: 300;
    letter-spacing: 0.1rem;
    /* opacity: 1 !important;*/
}

    .hero-button-text span { /*allow hover to pass through text*/
        pointer-events: none;
        opacity: 1 !important;
    }

@media (max-width: 992px) {
    .hero-subtitletext {
        padding: 5px 10px; /* Adds some spacing */
    }
}

.hero-bodytext {
    font-size: 1.5rem;
    /*    font-size: clamp(1rem, 2vw, 2rem);*/
    font-family: Oswald;
    letter-spacing: 0.1rem;
}


.school-logo-hover {
    transition: opacity 0.3s ease;
}

    .school-logo-hover:hover {
        opacity: 0.5;
    }


.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* dim the grid */
    z-index: 10;
}

.grid-wrapper {
    max-width: 100%;
    overflow-x: auto; /* allows horizontal scroll if needed */
}

.grid-slider {
    padding: 0px 16px;
}

.telerik-grid .k-table td a {
    text-decoration: underline;
}

/*grid filter buttons */
.k-button-solid-primary {
    border-color: var(--bs-primary-color);
    background-color: var(--bs-primary-color);
}

    .k-button-solid-primary:hover {
        border-color: var(--bs-primarydark-color);
        background-color: var(--bs-primarydark-color);
    }

.k-grid-header .k-grid-header-menu.k-active {
    background-color: var(--bs-primary-color);
}

.k-badge-solid-primary {
    border-color: var(--bs-primary-color);
    background-color: var(--bs-primary-color);
}

.k-svg-icon > svg {
    fill: var(--bs-primary-color);
}


.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.7);
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

    .loader-overlay.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .loader-overlay.hide {
        opacity: 0;
        visibility: hidden;
    }

.loader-container {
    text-align: center;
    margin-top: 40px;
    opacity: 1;
    animation: fadeIn 0.3s ease-in-out;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--bs-primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in forwards;
}

.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

.fade-transition {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

    .fade-transition.hidden {
        opacity: 0;
        pointer-events: none;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


/* Ensure the drawer section always takes up space, even when collapsed */
.drawer-fixed-width {
    min-width: 56px; /* matches mini drawer width */
    width: 56px;
    flex-shrink: 0;
    transition: width 0.3s ease;
}

/* Optional: widen when expanded, if you track expanded state with a class */
.drawer-expanded .drawer-fixed-width {
    width: 240px;
}

/* Keep consistent spacing */
.admin-layout-drawer-wrap {
    align-items: flex-start;
}

.content-area {
    transition: margin-left 0.3s ease;
}

.k-editor .k-dropdown .k-list .k-item {
    color: black !important;
}

.k-editor .k-svg-icon > svg {
    color: black !important;
}

/* Default track background */
.k-switch-track {
    background-color: #ccc; /* OFF state background */
    border: 2px solid #000; /* your custom outline color */
}

/* ON state background */
.k-switch.k-switch-on .k-switch-track {
    background-color: var(--bs-brand-color) !important; /* Customize ON state */
    border: 2px solid var(--bs-branddark-color); 
}

/* darken the color of the icon and x on the telerik notification pop up */
.k-notification.k-notification-warning .k-icon,
.k-notification.k-notification-warning .k-notification-close {
    color: var(--bs-primarydark-color) !important; /* Use a darker amber/orange */
}

/* Completely stop bolding of selected tabs */
.k-tabstrip .k-item {
    font-weight: normal !important;
    transition: none !important; /* stops flicker */
}

    /* Make the selected tab text black */
    .k-tabstrip .k-item.k-active .k-link-text {
        color: #000 !important;
    }

    .k-tabstrip .k-item:hover .k-link-text {
        color: #666;
    }

.k-tabstrip-content {
    padding-inline: 6px;
    padding-top: 8px;
}

.k-tabstrip-content.k-active {
    min-height: 500px;

}

.searchbar .k-button-md {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
}

/* Modify sort popup background, border, and shadow */
.custom-dropdown-popup {
    background-color: white !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04) !important;
    color: #212529 !important;
    padding: 0px !important;
    margin: 0px !important;
}

    /* Style menu items inside dropdown */
    .custom-dropdown-popup .k-item {
        font-size: 1rem !important;
        color: #212529 !important;
        padding: 0px;
    }

        /* Change hover and selected item styles */
        .custom-dropdown-popup .k-item:hover {
            background-color: #dee2e6 !important;
            border: 0px;
        }

        .custom-dropdown-popup .k-item.k-selected > .k-link {
            background-color: purple !important;
            color: white !important;
            font-weight: bold !important;
        }


        .custom-dropdown-popup .k-item.k-focus > .k-link {
            background-color: var(--bs-primary-color) !important;
            color: white !important;
            border: 0px;
            box-shadow: none;
        }

        .custom-dropdown-popup .k-item:hover {
            background-color: lightblue !important;
            color: black !important;
        }

        /* Fix flash color on click */
        .custom-dropdown-popup .k-item .k-link:active {
            background-color: #b3d7ff !important;
            color: #000 !important;
        }

.icon-grey {
    color: #666;
    padding-top: 2px;
}

/* Style the multiselect dropdown popup */
.custom-multiselect .k-popup {
    background-color: white !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    padding: 5px;
    max-height: 300px;
    overflow-y: auto;
}

/* Style each selectable item */
.custom-multiselect .k-list .k-item {
    font-size: 1rem;
    color: #212529;
    padding: 8px 12px;
}

    /* Hover effect */
    .custom-multiselect .k-list .k-item:hover {
        background-color: #e9ecef !important;
        color: #000;
    }

    /* Selected item */
    .custom-multiselect .k-list .k-item.k-selected {
        background-color: purple !important;
        color: white !important;
        font-weight: bold;
    }

    /* Click flash */
    .custom-multiselect .k-list .k-item:active {
        background-color: #b3d7ff !important;
        color: #000 !important;
    }

/* Style the dropdown popup */
.k-multiselect-popup.k-popup {
    background-color: white !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    padding: 5px;
    max-height: 300px;
    overflow-y: auto;
}

/* Style each item */
.k-multiselect-popup .k-list .k-item {
    font-size: 1rem;
    color: #212529;
    padding: 8px 12px;
}

    /* Hover effect */
    .k-multiselect-popup .k-list .k-item:hover {
        background-color: #e9ecef !important;
        color: black !important;
    }

    /* Selected item */
    .k-multiselect-popup .k-list .k-item.k-selected {
        background-color: purple !important;
        color: white !important;
        font-weight: bold;
    }

    /* Active (click flash) */
    .k-multiselect-popup .k-list .k-item:active {
        background-color: #b3d7ff !important;
        color: #000 !important;
    }


.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    background-color: var(--bs-primary-color) !important;
}


    .k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover, .k-list-item.k-selected.k-hover, .k-selected.k-hover.k-list-optionlabel {
        color: #ffffff;
        background-color: var(--bs-primary-color) !important;
    }


/*remove page padding on telerik tab pages*/
@media (max-width: 768px) {
    .k-tabstrip-content {
        padding: 0 !important;
        padding-inline: 0 !important;
    }
}

@media (max-width: 768px) {
    .col-12.col-md-3 {
        margin: 0 !important;
        padding: 0 !important; /* Optional: remove any inner padding */
    }

        .col-12.col-md-3 > .bg-white {
            margin-bottom: 1rem; /* Optional: consistent vertical spacing between boxes */
            border-radius: 0 !important; /* Optional: flatten if needed on mobile */
            box-shadow: none !important; /* Optional: simplify appearance */
        }
}

.navbar-light .nav-item {
    background-color: transparent !important;
}

@media (max-width: 992px) and (min-width: 768px) {
    .navbar-nav > li > a {
        font-weight: 400 !important;
        display: inline-block !important;
        white-space: nowrap !important;
        background-color: transparent !important;
    }

    .navbar-toolbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        /*     overflow-x: auto !important;*/
        white-space: nowrap !important;
    }

        .navbar-toolbar ul.navbar-nav {
            display: flex !important;
            flex-wrap: nowrap !important;
            /* overflow-x: auto !important;*/
            white-space: nowrap !important;
        }

            .navbar-toolbar ul.navbar-nav > li {
                flex-shrink: 0 !important;
                white-space: nowrap !important;
            }

                .navbar-toolbar ul.navbar-nav > li > a {
                    display: block !important;
                    white-space: nowrap !important;
                }

    ul.navbar-nav.navbar-mega-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        /*   overflow-x: auto;*/
    }

        ul.navbar-nav.navbar-mega-nav > li {
            flex-shrink: 0;
            white-space: nowrap;
        }
}

.navbar {
    padding: 0px !important;
}

.navbar-toolbar {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    /*   overflow-x: auto;*/
    -ms-overflow-style: none; /* IE 10+ */
    scrollbar-width: none; /* Firefox */
}

    .navbar-toolbar::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .navbar-toolbar ul.navbar-nav {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        margin-bottom: 0;
        padding-left: 0;
        overflow-x: visible;
    }

        .navbar-toolbar ul.navbar-nav > li {
            flex-shrink: 0;
            white-space: nowrap;
        }

            .navbar-toolbar ul.navbar-nav > li > a {
                display: block;
                white-space: nowrap;
            }


.glow-hover img {
    transition: filter 0.3s ease-in-out;
}

    .glow-hover img:hover {
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    }

/*carousel overrides*/
.k-scrollview.k-scrollview-light .k-scrollview-nav-wrap {
    background-color: transparent !important;
    pointer-events: none;
}

.k-scrollview.k-scrollview-light kendo-scrollview-pager {
    background-color: transparent !important;
}

.k-scrollview-nav > .k-link.k-primary {
    background: var(--bs-primary-color) !important;
    border: var(--bs-primary-color) !important;
}

.k-scrollview-nav {
    margin-top: 30px !important; /* push dots further down */
}

.k-scrollview-nav-wrap {
    padding-top: 30px; /* increase space below the dots */
}

.k-scrollview {
    margin: 0 auto;
}

.k-primary {
    background: var(--bs-primary-color) !important;
    border: var(--bs-primary-color) !important;
}

.series-banner {
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
    text-align: center;
}

    .series-banner .overlay-content {
        z-index: 2;
        background: rgba(0, 0, 0, 0.5);
      /*  padding: 1.5rem;*/
        margin: 0;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 80%; /* adjust as needed for your layout */
        box-sizing: border-box;
    }

.blackback_overlay-content {
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    margin: 0;  
}

.series-hero-countdown-container {
    position: absolute;
    top: 1rem; /* adjust spacing as needed */
    right: 2rem;
    z-index: 5; /* ensure it appears above background */
}

@media (max-width: 992px) {
    .series-banner .overlay-content {
        padding: 1rem 1rem;
        max-width: 100vw;
    }

    .series-hero-countdown-container {
        top: 1rem;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        z-index: 10;
    }
}

.seriesheadertext {
    font-family: "Cal Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 45px;
    line-height: 100%;
    color: white;
}

.seriessubheadertext {
    font-family: "Cal Sans", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 100%;
    color: #fff;
}


.tab-header {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* spacing between label and dot */
}

.dot-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 1px;
    background-color: #28a745; /* default fallback */
    vertical-align: middle;
    animation: blink 1s infinite;
}

/* Color variants */
.dot-green {
    background-color: #28a745;
}

.dot-red {
    background-color: #dc3545;
}

.dot-orange {
    background-color: #fd7e14;
}

/* Animation */
@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

.noresultsmessage {
    font-size: 1.2em;
    font-style: italic;
    color: darkgray;
    text-align: center;
    margin-top: 3em;
}

.no-tab-padding {
    padding: 0 !important;
}


.displaytext {
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 45px;
    line-height: 100%;
}

.subheadertext {
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    color: #fff;
}

.hover-image-wrapper {
    position: relative;
    overflow: hidden;
}

.overlay-desc {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.6); /* semi-opaque dark */
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    z-index: 10;
    pointer-events: none;
}

.hover-image-wrapper:hover .overlay-desc {
    opacity: 1;
}

i.cursor-pointer {
    cursor: pointer;
    display: inline-block;
    padding: 0.5rem;
}

.star-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0 2px;
    cursor: pointer;
    outline: none;
}

.k-grid .k-svg-icon,
.k-grid-toolbar .k-svg-icon,
.k-pager .k-svg-icon,
.k-grid .k-icon.k-svg-icon {
    color: #000 !important;
}

    .k-grid .k-svg-icon > svg {
        fill: #000 !important;
    }

/* Overrides Telerik's background on the full appointment container */
/* Appointment block background - need to remove the default padding */
/* remove the default padding, so the template container expands to cover the whole appointment */
.k-scheduler .k-event {
    padding: 0px;
}
/* set some padding to the template containers, expand them and add any other desired customizations. 
Styles from the model will be obtained from the ItemTemplate context and set inline.
based on the specific appointment*/
.custom-appointment {
    width: 100%;
    height: 100%;
    padding: 8px;
    color: #474747;
}

.k-event-link {
    color: #474747 !important;
}

.a.k-event-link {
    color: #474747 !important;
}

    .a.k-event-link:hover {
        color: black;
    }

.event-bg-yellow {
    background-color: #dfb14c !important;
}

.event-bg-gray {
    background-color: #d6d8d9 !important;
}

.event-bg-blue {
    background-color: #d1ecf1 !important;
}

.event-bg-red {
    background-color: #f8d7da !important;
}

.event-bg-default {
    background-color: #babb8d !important;
}

.event-bg-orange {
    background-color: #dfb14c !important;
}

/* Prevent shadow from being cut off */
.k-scheduler-content {
    overflow: visible !important;
}

/* Add space for the glow to render */
.k-event.border-glow {
    box-shadow: 0 0 8px 4px rgba(255, 193, 7, 0.7);
    border: 2px solid rgba(255, 193, 7, 0.9);
    z-index: 10; /* raise it above others */
    position: relative;
}

.k-button-solid-base.k-selected {
    border-color: var(--bs-primary-color);
    background-color: var(--bs-primary-color);
}

.k-button-flat > .k-button-text {
    color: var(--bs-primary-color);
}

.dropdown-header {
    font-weight: 500;
    color: black;
}

.navprimary-header {
    font-size: 1.2em;
    font-weight: 500;
    font-family: Oswald;
    letter-spacing: .05rem;
}


/* Base style */
.pop-window {
    width: auto;
    height: auto;
}

/* Override size for small screens */
@media (max-width: 768px) {
    .pop-window {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
    }

}

.mud-switch-label-medium {
    font-size: 0.85rem !important;
}

/* Scoped style: only affects svg inside our custom dialog */
.custom-upload-dialog .k-svg-icon > svg {
    fill: black;
}

.mud-switch-label-large {
    font-size: 1.0rem !important;
}

/* Ensure snackbars sit above sticky headers */
.mud-snackbar {
    z-index: 20000 !important; /* higher than your sticky header */
}

/* Offset top-positioned snackbars so they don't hide behind the sticky bar */
.mud-snackbar-anchor-top-center,
.mud-snackbar-anchor-top-left,
.mud-snackbar-anchor-top-right {
    top: calc(var(--utilitybar-height, 64px) + 12px) !important; /* set your bar height */
}


/* Target all the d-flex switch containers */
@media (min-width: 768px) {
    .switch-container > div:not(:last-child)::after {
        content: "|";
        margin-left: 8px;
        font-size: 1.5rem;
        color: #ccc; /* lighter color; adjust as needed */
    }
}

.auth-form .input-group-text {
    width: 42px; /* adjust as needed */
    justify-content: center;
    padding: 0.375rem 0.75rem;
}

.no-padding {
    padding: 0 !important;
}

.no-background {
    background-color: #fff !important;
    position: relative;
    z-index: 1;
}

.avatar-container-link:hover .avatar-container {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

/* For private avatars: no fade, lock overlay on hover */
.avatar-container-private {
    position: relative;
}

.lock-overlay {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    /*  color: white;
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7); */
}

.lock-icon {
    color: rgba(255, 255, 255, 0.8); /* Slight transparency */
    opacity: 0.7; /* Full opacity to test shadow */
    font-size: 2rem; /* Force visibility */

    text-shadow: 0 0 2px rgba(0, 0, 0, 1), 0 0 8px rgba(0, 0, 0, 1), 0 0 16px rgba(0, 0, 0, 1), 0 0 24px rgba(0, 0, 0, 0.9);
}


.avatar-container-private:hover .lock-overlay {
    opacity: 1;
}

.badge-pulse {
    background-color: var(--bs-primary-color);
}

.pulse {
    animation: pulse-bounce 1s ease-out;
}

@keyframes pulse-bounce {
    0% {
        transform: scale(1);
        background-color: #0d6efd;
        color: white;
    }

    50% {
        transform: scale(1.3);
        background-color: #198754;
    }

    100% {
        transform: scale(1);
        background-color: #0d6efd;
    }
}

.avatar-hover-wrapper {
    display: inline-block;
    cursor: pointer;
}

.user-preview-popover {
    border-radius: 8px;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

/* fade stale rows, but not while interacting */
.user-row.stale {
    opacity: .55;
    filter: grayscale(12%);
    transition: opacity .15s ease, filter .15s ease;
}

    .user-row.stale:hover,
    .user-row.stale:focus-within {
        opacity: 1;
        filter: none;
    }

.user-row .username {
    color: inherit;
}

.videoplayer-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9; /* or your own sizing */
    background: #000;
}

    .videoplayer-wrap iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }


.dropdown-item:focus, .dropdown-item:visited {
    color: #4b566b;
}

/* Grid row classes - ensure enough specificity to beat k-alt zebra striping, etc. */
.k-grid tr.row-status-3,
.k-table-row.row-status-3 {
    background-color: var(--status-3-bg) !important;
    color: var(--status-3-fg) !important;
}

    .k-grid tr.row-status-3:hover {
        background-color: #555 !important;
    }


.editor-limit-tooltip {
    /* styles are already set via JS; override here if desired */
}