/* ******************************** */
/*         CAROUSEL STYLING         */
/* ******************************** */
.splide__arrow svg {
    display: none;
}

.horizontal-full.carousel-section:nth-child(1) {
    padding-top: 1.5rem;
}

.horizontal-full.carousel-section {
}

    .horizontal-full.carousel-section:nth-last-child(1) {
        padding-bottom: 1.5rem;
    }

.content-carousel {
    position: relative;
}

    .content-carousel header {
        display: flex;
        gap: 1rem;
        align-items: center;
        padding-bottom: 1rem;
    }

    .content-carousel #carousel-heading {
        font-weight: 500;
        font-size: var(--text-xl);
        color: var(--base-mute);
    }

    .content-carousel .view-all-link {
        flex-shrink: 0;
        text-decoration: none;
        color: var(--base-mute);
        border: 1px solid var(--base-mute);
        padding: .125rem .75rem;
        border-radius: 1.5rem;
        background-color: transparent;
        font-size: var(--text-sm);
    }

        .content-carousel .view-all-link:hover {
            background-color: var(--base-03);
        }

        .content-carousel .view-all-link i {
            margin-left: .25rem;
        }

    .content-carousel .splide__arrow--prev {
        left: 0;
    }

    .content-carousel .splide__arrow--next {
        right: 0;
    }

    .content-carousel:hover .splide__arrow {
        opacity: 1;
        visibility: visible;
    }

    .content-carousel .splide__arrow {
        position: absolute;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 4.5rem;
        width: 1.5rem;
        border-radius: .25rem;
        border: none;
        background-color: rgba(50, 64, 77, 0.40);
        color: var(--dark-content);
        opacity: 0;
        transition: var(--three);
        transform: translateY(-50%);
        top: 50%;
    }

    .content-carousel:hover .splide__arrow {
        background-color: rgba(50, 64, 77, 0.40);
    }

    .content-carousel .splide__arrow:hover {
        background-color: rgba(50, 64, 77, 0.40);
    }

    .content-carousel .splide__arrow i {
        color: var(--base-01);
    }

    .content-carousel .splide__track {
        transition: var(--three);
        padding-right: 0px !important;
    }

    .content-carousel .splide__pagination {
        justify-content: end;
        gap: .25rem;
    }

    .content-carousel .splide__pagination__page.is-active {
        background-color: var(--primary);
        width: 1.5rem
    }

    .content-carousel .splide__pagination__page {
        height: .25rem;
        width: .5rem;
        border-radius: .125rem;
        border: none;
        background-color: rgba(34, 38, 59, 0.5);
        transition: var(--five);
    }

.horizontal-full {
    padding: .75rem;
}
/* ******************************** */
/*            MEDIA STYLING         */
/* ******************************** */
.media-container, .person-container {
    position: relative;
    background-color: var(--base-01);
    overflow: hidden;
    box-shadow: 0 2px 8px -2px rgb(0 108 123 / 15%);
    border-radius: .5rem;
    border: 1px solid #ededed;
    align-self: start;
    height: 100%;
}

.media-details-container {
    margin-top: .5rem;
}

.media-container a, .person-container a {
    text-decoration: none;
}

.media-details-container {
}

.media-container .thumb-img-container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 0rem;
    margin-bottom: .5rem;
    line-height: 1.3;
    display: block;
}

.article-Person .thumb-img-container {
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 21.875%;
    margin-right: 21.875%;
    margin-top: .5rem;
}
.article-Person .thumb-img-container .thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.person-carousel .content-carousel .splide__arrow {
    top: calc((100vw - 1.25rem) / 2);
}

.person-container .thumb-img-container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    margin-bottom: .5rem;
    line-height: 1.3;
    border: 2px solid var(--base-05);
}

    .person-container .thumb-img-container .thumb-img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

.media-container:hover .thumb-img-overlay,
.person-container:hover .thumb-img-overlay {
    visibility: visible;
    opacity: 1;
}

.person-carousel .thumb-img-overlay {
    justify-content: center;
    border-radius: 100%;
    aspect-ratio: 1;
    height: 100%;
    margin: auto;
}

.media-container .thumb-img-overlay,
.person-container .thumb-img-overlay {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: end;
    padding: .5rem;
    gap: .25rem;
    background: rgb(34,38,72);
    background: -moz-linear-gradient(180deg, rgba(34,38,72,0) 0%, rgba(34,38,72,0.5) 80%);
    background: -webkit-linear-gradient(180deg, rgba(34,38,72,0) 0%, rgba(34,38,72,0.5) 80%);
    background: linear-gradient(180deg, rgba(34,38,72,0) 0%, rgba(34,38,72,0.5) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#222648",endColorstr="#222648",GradientType=1);
    transition: var(--three);
}

.person-container .thumb-img-overlay {
    justify-content: center;
}

    .media-container .thumb-img-overlay button,
    .person-container .thumb-img-overlay button {
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        width: 2.5rem;
        height: 2.5rem;
        border: none;
        border-radius: 100%;
        color: var(--base-content);
        position: relative;
        background-color: var(--base-01);
        transition: var(--three);
    }

        .media-container .thumb-img-overlay button:hover, .media-container .thumb-img-overlay button:focus,
        .person-container .thumb-img-overlay button:hover, .person-container .thumb-img-overlay button:focus {
            background-color: var(--border-color);
        }

    .media-container .thumb-img-overlay .favorite-btn i::before,
    .person-container .thumb-img-overlay .favorite-btn i::before {
        transition: var(--three);
    }

    .media-container .thumb-img-overlay .favorite-btn.isfavorite i::before,
    .person-container .thumb-img-overlay .favorite-btn.isfavorite i::before {
        font-weight: 900;
        transition: var(--three);
    }

    .media-container .thumb-img-overlay .favorite-btn.isfavorite,
    .person-container .thumb-img-overlay .favorite-btn.isfavorite {
        animation: pop 0.3s ease;
        background-color: var(--base-02);
    }

@keyframes pop {
    0% {
        transform: scale(1); /* Start at original size */
    }

    50% {
        transform: scale(1.1); /* Scale up to 110% */
    }

    100% {
        transform: scale(1); /* Scale back to original size */
    }
}

.duration-count-container {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    font-size: var(--text-xs);
    background-color: rgba(34, 38, 72, 0.66);
    color: var(--dark-content);
    padding: 4px 4px 4px 4px;
    border-radius: .25rem;
    line-height: 1;
    z-index: 1;
}

.media-container .progress-indicator-container,
.person-container .progress-indicator-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: .2rem;
    background-color: rgba(34, 38, 59, 0.5);
    z-index: 1;
}

.media-container .progress-indicator,
.person-container .progress-indicator {
    background-color: var(--primary);
    height: 100%;
}

.media-container p,
.person-container p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: var(--text-xs);
    color: var(--base-mute);
    line-height: 1.3;
    margin-top: .175rem;
}

.media-container h3,
.person-container h3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
    padding: 0;
}

.carousel {
    --padding: 1.5rem;
    --image-width: calc(100vw - var(--padding));
    --image-height: calc(var(--image-width) * 0.5625);
}

.splide__arrow:disabled {
    display: none !important;
}
.session-main .carousel {
    overflow: auto;
}
.session-main .carousel .content-carousel {
    width: 100%;
}
.content-carousel .splide__track {
   padding-top: .5rem;
   padding-bottom: .5rem;
}
li.selected article {
    background-color: var(--base-04);
    border: 1px solid var(--secondary);
    margin: -8px;
    padding: 7px;
    border-radius: .325rem;
}
.session-main .carousel .session-main h3 {
    padding: 0;
}
@media only screen and (min-width: 360px) {
    /* ******************************** */
    /*         CAROUSEL STYLING         */
    /* ******************************** */
.carousel {
    --padding: 2.25rem;
    --image-width: calc((100vw - var(--padding)) / 2);
    --image-height: calc(var(--image-width) * 0.5625);
}
.person-carousel .content-carousel .splide__arrow {
    top: calc(((100vw - 2.25rem) / 2) / 2);
}
    /* ******************************** */
    /*            MEDIA STYLING         */
    /* ******************************** */
    .person-carousel .thumb-img-overlay {
        padding-bottom: .75rem
    }
}

@media only screen and (min-width: 500px) {
    /* ******************************** */
    /*         CAROUSEL STYLING         */
    /* ******************************** */

    /* ******************************** */
    /*            MEDIA STYLING         */
    /* ******************************** */
}

@media only screen and (min-width: 640px) {
    /* ******************************** */
    /*         CAROUSEL STYLING         */
    /* ******************************** */
    .horizontal-full {
        padding: 1.25rem 1.25rem;
    }
.carousel {
    --padding: 3.25rem;
}
    /* ******************************** */
    /*            MEDIA STYLING         */
    /* ******************************** */
}

@media only screen and (min-width: 768px) {
    /* ******************************** */
    /*         CAROUSEL STYLING         */
    /* ******************************** */
.carousel {
    --padding: 4rem;
    --image-width: calc((100vw - var(--padding)) / 3);
}
.person-carousel .content-carousel .splide__arrow {
    top: calc(((100vw - 4rem) / 3) / 2);
}
    /* ******************************** */
    /*            MEDIA STYLING         */
    /* ******************************** */
}

@media only screen and (min-width: 1024px) {
    /* ******************************** */
    /*         CAROUSEL STYLING         */
    /* ******************************** */
    .horizontal-full {
        padding: 1.5rem 2.5rem;
    }
.carousel {
    --padding: 7.25rem;
    --image-width: calc((100vw - var(--padding)) / 4);
}
.carousel {
    --padding: 6.5rem;
}
    /* ******************************** */
    /*            MEDIA STYLING         */
    /* ******************************** */
}

@media only screen and (min-width: 1280px) {
    /* ******************************** */
    /*         CAROUSEL STYLING         */
    /* ******************************** */
.person-carousel .content-carousel .splide__arrow {
    top: calc(((100vw - 7.25rem) / 4) / 2);
}
    .content-carousel #carousel-heading {
        font-size: var(--text-xl);
    }

    button.splide__arrow.splide__arrow--prev {
        left: -2rem;
    }

    button.splide__arrow.splide__arrow--next {
        right: -2rem;
}
   
    /* ******************************** */
    /*            MEDIA STYLING         */
    /* ******************************** */
    .media-container h3,
    .person-container h3 {
        font-size: var(--text-base);
    }
}

@media only screen and (min-width: 1536px) {
    /* ******************************** */
    /*         CAROUSEL STYLING         */
    /* ******************************** */
.carousel {
    --padding: 8rem;
    --image-width: calc((100vw - var(--padding)) / 5);
}
.person-carousel .content-carousel .splide__arrow {
    top: calc(((100vw - 8rem) / 5) / 2);
}
    /* ******************************** */
    /*            MEDIA STYLING         */
    /* ******************************** */
}

.progress_hide_0 {
    display: none;
}


/* ******************************** */
/*         ADDED BY CONRAD         */
/* ******************************** */

/*.media-options-container:NOT(.active) .media-options-menu {
    visibility: none;
    opacity: 0;
    transition: var(--three);
    bottom: unset;
}

.media-options-container.active .media-options-menu {
    visibility: visible;
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: var(--three);
    bottom: unset;
}*/

.media-details-container {
    display: flex;
    position: relative;
    padding: 0 1rem 1rem;
}

.media-options-container {
    width: 1.5rem;
}

.media-options-btn {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--base-01);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    font-size: var(--text-sm);
    color: var(--base-mute);
}

.media-options-menu {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--base-01);
    min-width: 160px;
    border-radius: 0.5rem;
    padding: 0;
    text-wrap: nowrap;
    border: 1px solid var(--dark-focus);
    box-shadow: 0px 0 50px 500px rgb(0 53 95 / 5%);
    overflow: hidden;
    transition: var(--three);
    bottom: -100%;
    top: 1.75rem;
}

.media-options-container.active .media-options-menu {
    visibility: visible;
    opacity: 1;
    transition: var(--three);
    bottom: unset;
}

.media-options-menu button {
    padding: .75rem 1rem;
    white-space: nowrap;
    text-decoration: none;
    display: flex;
    gap: .5rem;
    align-items: center;
    background-color: transparent;
    color: var(--dark-focus);
    font-weight: 500;
    font-size: var(--text-sm);
    width: 100%;
    border: none;
}

    .media-options-menu button:hover {
        background-color: var(--base-02);
    }