/* ******************************** */
/*         CAROUSEL STYLING         */
/* ******************************** */
.splide__arrow svg {
   display: none;
}
.content-carousel {
   position: relative;
}
.content-carousel header, .saved-search-section header {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   align-items: center;
   padding-bottom: 1rem;
}
.content-carousel #carousel-heading,
.dashboard .film-carousel h2, . saved-search-section h2 {
   font-weight: 600;
   font-size: var(--text-lg);
}
.content-carousel .view-all-link, .saved-search-section .view-all-link {
   flex-shrink: 0;
   text-decoration: none;
   color: var(--base-content);
}
.content-carousel .view-all-link:hover, .saved-search-section .view-all-link:hover {
   color: var(--primary);
}
.content-carousel .view-all-link i, .saved-search-section .view-all-link i {
   margin-left: .25rem;
}
.content-carousel .splide__arrow--prev {
   left: -.75rem;
}
.content-carousel .splide__arrow--next {
   right: -.75rem;
}
.splide__arrow[disabled],
.content-carousel:hover .splide__arrows .splide__arrow[disabled]  {
   opacity: 0;
   visibility: hidden;
   transition: var(--three);
}
.content-carousel:hover .splide__arrows .splide__arrow {
   opacity: 1;
   visibility: visible;
   transition: var(--three);
}
.content-carousel .splide__arrow {
   position: absolute;
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 2.5rem;
   width: 2.5rem;
   border-radius: 100%;
   border: .5px solid var(--border-color);
   background-color: var(--base-01);
   color: var(--dark-content);
   opacity: 0;
   transition: var(--three);
   box-shadow:0 4px 4px rgba(0, 0, 0, .3), 0 0 4px rgba(0, 0, 0, .2);
}

.content-carousel .splide__arrow i {
   color: var(--base-mute);
}
.content-carousel .splide__track {
   transition: var(--three);
   z-index: unset !important;
    overflow: unset;
    overflow-y: visible;
    overflow-x: clip;
}

.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;
   position: relative;
}
.media .splide__pagination {
   display: none;
}
/* ******************************** */
/*            MEDIA STYLING         */
/* ******************************** */
.media-container, .person-container {
   position: relative;
}
.media-container a, .person-container a  {
   text-decoration: none;
}
.media-container .thumb-img-container {
   position: relative;
   overflow: hidden;
   aspect-ratio: 16 / 9;
   border-radius: .5rem;
   margin-bottom: .5rem;
   line-height: 1.3;
}
.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);
}
.content-carousel .media-container:hover .thumb-img {
    transform: scale(1.1);
}
.content-carousel .media-container .thumb-img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    transform: scale(1.02);
    transition: var(--three);
}
.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;
}
.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;
   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);
   gap: .5rem;
}
.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(--primary);
   position: relative;
   background-color: var(--base-01);
   transition: var(--three);
}
.media-container .thumb-img-overlay .favorite-btn i::before,
.person-container .thumb-img-overlay .favorite-btn i::before,
.media-options-menu .favorite-btn i::before {
   transition: var(--three);
}
.media-container .thumb-img-overlay .favorite-btn.active i::before,
.person-container .thumb-img-overlay .favorite-btn.active i::before,
.media-options-menu .favorite-btn.active i::before  {
   font-weight: 900;
   transition: var(--three);
}
.media-container .thumb-img-overlay .favorite-btn.active,
.person-container .thumb-img-overlay .favorite-btn.active,
.media-options-menu .favorite-btn.active {
   animation: pop 0.3s ease;
   background-color: var(--base-02);
}
.media-options-menu .favorite-btn.active .favorite-text,
.media-options-menu .favorite-btn .unfavorite-text {
   display: none;
}
.media-options-menu .favorite-btn.active .unfavorite-text,
.media-options-menu .favorite-btn .favorite-text {
   display: unset;
}
@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 */
   }
}
.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);
}
.media-container .progress-indicator ,
.person-container .progress-indicator {
   background-color: var(--primary);
   height: 100%;
}
.media-details-container {
   display: flex;
   position: relative;
}
.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-bottom: .25rem;
}
.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;
}
.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(--primary);
    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(--primary);
    font-weight: 500;
    font-size: var(--text-sm);
    width: 100%;
    border: none;
}
.media-options-menu button:hover {
    background-color: var(--base-02);
}
@media only screen and (min-width: 360px) {
   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */

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

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

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

@media only screen and (min-width: 640px) {
   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .content-carousel .splide__arrow--next {
      right: -1.5rem;
   }
   .horizontal-full {
      padding: 1.25rem 1.25rem;
   }
.content-carousel .splide__track::after {
    right: -5.25rem;
}
   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
    .media-options-menu {
        visibility: hidden;
        opacity: 0;
        transform: scale(.99) translateY(1rem);
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 0;
        top: 1.75rem;
        bottom: unset;
        left: 0;
        background-color: var(--base-01);
        min-width: 160px;
        z-index: 1;
        border-radius: 0.5rem;
        padding: 0;
        text-wrap: nowrap;
        border: 1px solid var(--primary);
        box-shadow: 0px 4px 16px -4px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        transition: var(--three);
    }
    .media-options-container.active .media-options-menu {
        visibility: visible;
        opacity: 1;
        transform: scale(1) translateY(0);
        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(--primary);
        font-weight: 500;
        font-size: var(--text-sm);
        width: 100%;
        border: none;
    }
    .media-options-menu button:hover {
        background-color: var(--base-02);
    }
}

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

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

@media only screen and (min-width: 1024px) {
   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .horizontal-full {
      padding: 1.5rem 2.5rem;
   }
   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
}

@media only screen and (min-width: 1280px) {
   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .content-carousel #carousel-heading,
   .dashboard .film-carousel h2, . saved-search-section h2 {
      font-size: var(--text-xl);
   }
   .media .splide__pagination {
       display: flex;
   }
   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
   .media-container h3,
   .person-container h3 {
      font-size: var(--text-base);
   }
}

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

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

.progress_hide_0 {
  display:none;
}