@font-face {
    font-family: "helsinkiregular";
    src:
        url("../fonts/helsinki/helsinki-webfont.853058e7e726.eot?#iefix") format("embedded-opentype"),
        url("../fonts/helsinki/helsinki-webfont.3aceb43af5a1.woff") format("woff"),
        url("../fonts/helsinki/helsinki-webfont.4534e1801bb5.ttf") format("truetype"),
        url("../fonts/helsinki/helsinki-webfont.f4b55f1e3104.svg#helsinkiregular") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src:
        url("../fonts/fira_sans/FiraSans-Regular.12801b916168.eot"),
        url("../fonts/fira_sans/FiraSans-Regular.12801b916168.eot") format("embedded-opentype"),
        url("../fonts/fira_sans/FiraSans-Regular.979a13914c33.woff2") format("woff2"),
        url("../fonts/fira_sans/FiraSans-Regular.200d5e7cc951.woff") format("woff"),
        url("../fonts/fira_sans/FiraSans-Regular.b0aa1958e34c.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: #fafafa !important;
    word-break: break-word;
}

.helsinki {
    font-family: "helsinkiregular" !important;
}

.font-family-native {
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol" !important;
}

.bg-blue {
    background-color: #2557b7;
}

.text-blue {
    color: #2557b7;
}

.bg-lightblue {
    background-color: #346bc2;
}

.bg-darkblue {
    background-color: #004993 !important;
}

/* Wikipedia Info Box Styling */
.wikipedia-info-box {
    border-left: 4px solid #2557b7;
    background-color: #f8f9fa;
}

.wikipedia-info-box h6 {
    color: #2557b7;
}

.wikipedia-info-box .btn-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    transition: all 0.2s ease;
}

.btn-outline-primary {
    border-color: #2557b7 !important;
    color: #2557b7;
}

.wikipedia-info-box .btn-outline-primary:hover {
    background-color: #2557b7;
    border-color: #2557b7;
    transform: translateY(-1px);
}

.wikipedia-info-box .btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    transform: translateY(-1px);
}

.btn-xs {
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    border-radius: 15px;
}

.bg-placeholder {
    background-color: #adadad !important;
}

.bg-grey {
    background-color: #fafafa !important;
}

.bg-darkergrey {
    background-color: #c6c6c6;
}

.btn-primary {
    background-color: rgb(37, 87, 183);
    border-color: rgb(37, 87, 183);
}

.word-break-keep {
    word-break: keep-all;
}

.mw-1200 {
    max-width: 1200px;
}

.underline-not {
    text-decoration: none;
    color: inherit;
}

.underline-not:hover {
    text-decoration: none;
    color: inherit;
}

.section-header {
    border-top: 3px solid #000000;
    border-bottom: 1px solid #000000;
}

.minvh-100 {
    min-height: 100vh;
}

.underline {
    text-decoration: underline;
}

.breadcrumb-item+.breadcrumb-item::before {
    padding-right: 0.2rem;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: 0.2rem;
}

.dropdown-menu {
    /* Greater z-index than sticky-top */
    z-index: 1025;
}

.htmx-indicator-hidden {
    display: none;
}

.htmx-request .htmx-indicator-hidden {
    display: inherit;
}

.htmx-request.htmx-indicator-hidden {
    display: inherit;
}

ins.adsbygoogle[data-ad-status="unfilled"] {
    /* Hide unfilled google ads space */
    display: none !important;
}

.movie-container .poster {
    width: 200px;
    height: 286px;
}

.movie-container .details {
    max-width: 200px;
}

.movie-grid .movie-grid-ad-container .adsbygoogle {
    width: 200px;
    height: 396px;
    max-width: 200px;
    max-height: 396px;
}

@media (max-width: 767px) {

    .movie-container .poster,
    .movie-container .poster img {
        width: 140px;
        height: 200.2px;
    }

    .movie-container .details .movie-genres {
        max-height: 24px;
        overflow: hidden;
    }

    .movie-container .details {
        max-width: 140px;
    }

    .movie-grid .movie-grid-ad-container .adsbygoogle {
        width: 140px;
        height: 310px;
        max-width: 140px;
        max-height: 310px;
    }
}

@media (max-width: 908px) {
    .hide-on-mobile {
        position: absolute;
        top: -99999px;
        left: -99999px;
        opacity: 0 !important;
        height: 0px !important;
    }

    h2,
    .h2 {
        font-size: 1.25rem !important;
    }
}

.Toastify__toast {
    border-radius: 0.25rem !important;
    font-family: "helsinkiregular" !important;
    min-height: auto !important;
    padding-left: 15px !important;
}

.Toastify__toast--success {
    background: #0f9960 !important;
}

.Toastify__toast--info {
    background: #323232 !important;
}

/* QUANCAST COOKIE BANNER */
.qc-cmp-button {
    background-color: #2557b7 !important;
    border-color: #2557b7 !important;
}

.qc-cmp-button:hover {
    background-color: transparent !important;
    border-color: #2557b7 !important;
}

.qc-cmp-alt-action,
.qc-cmp-link {
    color: #2557b7 !important;
}

.qc-cmp-button.qc-cmp-secondary-button {
    color: #2557b7 !important;
}

.qc-cmp-button.qc-cmp-button.qc-cmp-secondary-button:hover {
    color: #ffffff !important;
}

.qc-cmp-button.qc-cmp-secondary-button {
    border-color: #2557b7 !important;
    background-color: transparent !important;
}

.qc-cmp-button.qc-cmp-secondary-button:hover {
    background-color: #2557b7 !important;
}

.qc-cmp-ui a,
.qc-cmp-ui .qc-cmp-alt-action {
    color: #2557b7 !important;
}

.qc-cmp-small-toggle.qc-cmp-toggle-on,
.qc-cmp-toggle.qc-cmp-toggle-on {
    background-color: #2557b7 !important;
    border-color: #2557b7 !important;
}

.cursor-pointer {
    cursor: pointer;
}

/*          Navigation          */
.navigation {
    background-color: #346bc2;
    font-family: "helsinkiregular";
}

.main-nav {
    display: flex;
    margin: 0 auto;
    padding: 0;
    background-color: #346bc2;
}

.main-nav li {
    margin: auto;
    padding: 14px 0 14px 0;
    display: inline;
    text-align: center;
    border-left: 1px solid black;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    color: aliceblue;
}

.main-nav li:hover {
    background-color: #1551c4;
    padding: 14px 0 14px 0;
}

.main-nav li:first-of-type {
    padding: 8px 0 8px 0;
    font-size: 1.5em;
    flex: 2 2 0;
    border: none;
    /* Compatibilité safari ios
  -webkit-flex: 2;
  -webkit-box-flex: 2;
*/
}

.main-nav li:first-of-type:hover {
    background-color: #1551c4;
    padding: 8px 0 8px 0;
}

.main-nav li a {
    font-family: "helsinkiregular";
    text-decoration: none;
    color: aliceblue;
}

.main-nav li:first-child a {
    font-family: "Fira Sans";
    font-weight: bold;
}

.dropbtn {
    background-color: #1551c4;
    color: white;
    font-family: "helsinkiregular";
    padding: 13.5px;
    margin: 0;
    font-size: 17px;
    border: none;
    cursor: pointer;
    width: 100%;
}

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

.dropdownContent {
    display: none;
    position: absolute;
    z-index: 10;
    right: 5px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdownContent a {
    color: black;
    font-family: "helsinkiregular", "lato", sans-serif;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdownContent a:hover {
    background-color: #031a7b;
    color: aliceblue;
}

.dropdown:hover .dropdownContent {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #031a7b;
}

#mobileNav {
    display: none;
    background-color: #346bc2;
    color: aliceblue;
}

#mobileNav ul li:first-child {
    cursor: pointer;
}

/*Le menu de navigation sidenav*/
.sidenav {
    height: 100%;
    /*Occupe toute la hauteur*/
    width: 0;
    /*A changer avec javascript*/
    position: fixed;
    /*Reste à sa place*/
    z-index: 1;
    /*Reste tout en haut*/
    top: 0;
    left: 0;
    background-color: #0b1c21;
    /*Noir #111*/
    overflow-x: hidden;
    /*On désactive le défilement*/
    padding-top: 60px;
    /*On place le contenu à 60px du haut*/
    transition: 0.5s;
    /*Effet de transition slide de 0.5s dans la sidenav*/
}

/*Liens du menu de navigation sidenav*/
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    font-family: "LatoWeb";
    color: #818181;
    /*  color: #F6F6F6;*/
    display: block;
    transition: 0.3s;
}

/*Change la couleur des liens au survol de la souris*/
.sidenav a:hover,
offcanvas,
.sidenav a:focus {
    color: #f1f1f1;
}

/*Position et style du bouton fermant (en haut a droite)*/
.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}

/*Pousse toute la page vers la droite a l'ouverture de la sidenav*/
#main {
    transition: margin-left 0.5s;
    /*  padding: 20px;*/
    margin: 0;
}

/*Media queries pour petit écran*/
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}

#mobileNav {
    display: none;
}

.nav-link:hover {
    cursor: pointer;
}

/* END Navigation */

/* FIVE STAR RATING */

.rating {
    background: #fff;
}

.rating input[type="radio"] {
    position: fixed;
    top: 0;
    right: 100%;
}

.rating label {
    font-size: 1.5em;
    padding: 0.1em;
    margin: 0;
    float: left;
    cursor: pointer;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.rating input[type="radio"]:checked~input+label {
    background: none;
    color: #aaa;
}

.rating input+label {
    color: orange;
    margin: 0 0 1em 0;
}

.rating input+label:first-of-type {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.rating input:checked+label {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* END FIVE STAR RATING */

/* Movie List */

.movie-list-item-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1em;
    background-color: #fff;
    overflow: hidden;
}

.movie-list-item-image-container {
    min-width: 170px;
    max-width: 180px;
    height: 225px;
}

.movie-list-item-details-container {
    width: 100%;
    margin: 0 0.5em;
    padding: 0.5em;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: felx-start;
    -ms-flex-pack: felx-start;
    -webkit-justify-content: felx-start;
    justify-content: felx-start;
}

.movie-list-item-buttons {
    margin: auto 0 0;
    font-size: 0.9em;
    color: #333;
}

.movie-list-item-meta {
    font-size: 11px;
    font-weight: 400;
    font-style: normal;
    max-width: 400px;
    letter-spacing: -0.005em;
    color: #666666;
}

.movie-list-item-descrtiption {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: rgb(51, 51, 51);
}

@media (max-width: 500px) {
    .movie-list-item-details-container {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        font-size: 1em;
        margin: 0 0.5em;
        padding: 8px 8px 0px 8px;
    }

    .movie-list-item-container {
        margin: 8px auto;
    }

    .movie-list-item-title {
        font-size: 14.4px;
        margin-bottom: 1.43333px;
    }

    .movie-list-item-meta {
        margin-top: 0;
        font-size: 11.2px;
        height: 13.5px;
        overflow: hidden;
    }

    .movie-list-item-descrtiption {
        margin-top: 3.36667px;
        font-size: 0.7em;
        max-height: 50px;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .movie-list-item-image-container {
        min-width: 101.999px;
        height: 135px;
    }
}

/*  En Movie List  */

.movie-jumbotron-container {
    max-width: 1200px;
    margin-top: 0px;
    margin-right: auto;
    display: flex;
    align-items: flex-start;
}

.movie-jumbotron-poster-container {
    width: calc(56.25%);
    position: relative;
    background-color: rgb(255, 255, 255);
    margin-right: 10px;
    overflow-x: hidden;
    overflow-y: hidden;
}

.movie-jumbotron-poster-container::before {
    content: "";
    display: block;
    padding-top: calc(154.6875%);
}

.absolute-wrappers {
    position: absolute;
    top: 0px;
    width: 100%;
}

@media (max-width: 767px) {
    .absolute-wrappers {
        position: relative;
    }
}

.movie-jumbotron-video-container {
    position: relative;
    width: calc(154.6875%);
    background-color: rgb(255, 255, 255);
}

/* Movie Detail CSS */

@media all and (max-width: 930px),
all and (max-device-width: 480px) {
    #video_et_description .videoDescription {
        text-align: center;
        padding: 0 0 0 4px;
        width: 100%;
        max-width: 1000px;
    }
}

@media (min-width: 768px) {
    #video-title {
        font-size: 2em !important;
    }
}

/*          Page Video          */

.movie-page-container {
    background-color: #fafafa;
}

/* Making webtorrent (& archive.org & dailymotion iframe) Video keep a 16:9 ratio */
#video_webtorrent,
#nav-archive,
#nav-dailymotion {
    position: relative;
    padding-bottom: 56.25%;
    /*16:9*/
    height: 0;
    overflow: hidden;
}

.size-video {
    max-height: 0;
    padding-bottom: "56.25%";
}

#video_webtorrent iframe,
#video_webtorrent object,
#video_webtorrent embed,
#video_webtorrent video,
#nav-archive iframe,
#nav-archive video,
#nav-dailymotion iframe,
.video-taken-down {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.next-link {
    max-width: 190px;
}

#video_et_description {
    text-align: center;
    margin: 1em 0;
}

#video_et_description .videoDescription {
    background-color: rgb(255, 255, 255);
    margin: 0;
    text-align: center;
    padding: 0 0 0 4px;
    width: 100%;
}

.videoDescription ul,
.videoDescription ol {
    text-align: left;
}

#video_et_description .video video {
    width: 100%;
    height: 100%;
}

#video_et_description .videoDescription h1,
#video_et_description .videoDescription h2,
#video_et_description .videoDescription h6 {
    color: #333;
    font-weight: bolder;
    font-size: 1.7em;
}

.video-js {
    width: 100%;
    height: 300px;
    max-width: 640px;
    margin: auto;
}

#rs {
    display: flex;
    justify-content: center;
}

.button {
    color: #ffffff;
    border: none;
    height: 3em;
    width: 10em;
    font-size: 1em;
}

.button:hover {
    padding-top: 2px;
    opacity: 0.9;
}

.share_facebook {
    background-color: #3b5998;
}

.share_twitter {
    background-color: #1da1f2;
}

.watch-container {
    min-height: 1400px !important;
}

/* End Movie Detail CSS */

/* ROWS */

.css-1m496b4 {
    display: flex;
    flex-direction: column;
    text-decoration-line: none;
    text-decoration-style: initial;
    text-decoration-color: initial;
    text-decoration: none;
    max-width: 142.8px;
    min-width: 142.8px;
    width: 142.8px;
    font-size: 0.8rem;
}

.css-ek764d {
    width: 142.8px;
    height: 189px;
    -webkit-background-size: cover;
    background-size: cover;
    background-position-x: 50%;
    background-position-y: 50%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.css-150mp99 {
    width: 142.8px;
    height: 189px;
}

.movie-poster {
    width: 170px;
    height: 225px;
}

.poster-wrapper {
    margin: 0 10px 0 0;
    width: 170px;
}

.poster-wrapper>a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    max-width: 170px;
}

.poster-image {
    height: 225px !important;
    width: 170px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 5px;
}

.poster-image:hover {
    filter: brightness(120%);
}

@media (max-width: 768px) {

    .poster-image img,
    .poster-image {
        height: 168.75px !important;
        width: 127.5px !important;
    }

    .poster-title,
    .title-wrapper button {
        font-size: 0.8rem;
    }

    .title-wrapper {
        margin-top: 10px;
        /* margin-bottom: 7px; */
        flex-direction: row !important;
    }

    .poster-wrapper>a {
        width: 127.5px;
    }

    .poster-wrapper {
        width: 127.5px;
        min-width: 127.5px;
    }

    .home .row h1 {
        font-size: 1.5rem;
        margin-bottom: 19px;
    }

    .slick-slide {
        margin-right: 10px;
    }
}

@media (max-width: 768px) {
    .blog-post h1 {
        font-size: 1.8em;
    }

    .card-img-top {
        height: 90.5px;
        width: 151px;
    }

    .category .card-body {
        padding: 0.8rem;
    }

    .category .card-title {
        font-size: 16px;
        height: 40px;
        overflow: hidden;
    }

    .category .card-subtitle {
        font-size: 10.5px;
        height: 15px;
        overflow: hidden;
    }

    .category-headline {
        flex-direction: row !important;
    }

    .category .card {
        margin-right: 0px !important;
    }

    .category-headline h1 {
        font-size: 32px !important;
    }

    .category-headline .btn {
        font-size: 12px !important;
        margin-bottom: 0px;
    }

    .home .card-deck {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0px;
    }

    .home .card {
        margin: 5px;
    }

    .home .card-deck .card-title {
        font-size: 16px;
        height: 40px;
        overflow: hidden;
    }

    .home .card-deck .card-subtitle {
        font-size: 10.5px;
        overflow: hidden;
    }

    .tag .card-deck {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0px;
    }

    .tag .card {
        margin: 5px;
    }

    .tag .card-deck .card-title {
        font-size: 16px;
        height: 40px;
        overflow: hidden;
    }

    .tag .card-deck .card-subtitle {
        font-size: 10.5px;
        overflow: hidden;
    }
}

.poster-wrapper {
    margin: 0 10px 0 0;
    width: 170px;
    /* display: none !important; */
}

.poster-wrapper>a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    max-width: 170px;
}

.poster-image {
    height: 225px !important;
    width: 170px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 5px;
}

.poster-image:hover {
    filter: brightness(120%);
}

@media (max-width: 768px) {

    .poster-image img,
    .poster-image {
        height: 168.75px !important;
        width: 127.5px !important;
    }

    .poster-title,
    .title-wrapper button {
        font-size: 0.8rem;
    }

    .title-wrapper {
        margin-top: 10px;
        /* margin-bottom: 7px; */
        flex-direction: row !important;
    }

    .poster-wrapper>a {
        width: 127.5px;
    }

    .poster-wrapper {
        width: 127.5px;
    }

    .home .row #background h1 {
        font-size: 1.5rem;
        margin-bottom: 19px;
    }

    .poster-title {
        height: 46px !important;
    }
}

.poster-title {
    margin: auto;
    text-align: center;
    height: 54px;
}

.movie-carousel {
    padding: 0px !important;
}

.movie-carousel-next {
    display: none;

    color: black;
    background: rgba(20, 20, 20, 0.5);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
    width: 4%;
    text-align: center;
    border: none;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
}

.movie-carousel-prev {
    display: none;
    color: black;
    background: rgba(20, 20, 20, 0.5);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
    width: 4%;
    text-align: center;
    border: none;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
}

.movie-carousel-next:hover,
.movie-carousel-prev:hover {
    cursor: pointer;
}

.movie-carousel-next::before {
    content: "→";
}

.movie-carousel-prev::before {
    content: "←";
}

.movie-carousel:hover .movie-carousel-next,
.movie-carousel:hover .movie-carousel-prev {
    display: flex !important;
    align-items: center;
}

/* Hack slick track to fit homepage use case */
.slick-slide {
    margin-right: 5px;
}

.slick-track {
    width: 105000px !important;
}

.y-scroll,
.regular {
    margin-right: 0;
    margin-left: 0;
    overflow: auto hidden;
    display: flex;
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;
    max-width: 100%;
}

.y-scroll .poster-wrapper,
.y-scroll>div,
.regular .poster-wrapper,
.regular>div {
    margin-right: 10px !important;
}

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}

.row.display-flex>[class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* END ROWS */

/*    Footer     */

#footer_nav {
    background-color: #264a8f;
    display: flex;
    flex-wrap: wrap;
}

.fContainer {
    flex: 1;
    margin: 40px;
}

.fContainer h4 {
    color: white;
    font-family: "helsinkiregular";
}

.fContainer li,
.fContainer li a,
.fContainer li:first-child a {
    color: #878f90;
    font-family:
        "lato",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol";
}

.fContainer ul {
    list-style-type: none;
}

#footerBottom {
    color: #ffffff;
    background-color: #264a8f;
    font-family: "Open Sans", sans-serif;
    display: flex;
    flex-wrap: wrap;
    min-height: 50px;
}

#footerBottom p {
    text-align: center;
    flex: 1 1 22px;
    margin: auto;
}

#footerBottom a {
    color: aliceblue;
}

#footerBottom p:nth-of-type(2) {
    order: -1;
}

#footerBottom p:first-of-type {
    flex: 2 2 auto;
}

/*   END Footer     */

/* LOGIN/SIGNUP */

.blue-button {
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.4s;
    line-height: normal;
    border: none;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    /* float: left; */
    margin: 1px 0 20px 0;
    width: 100%;
    min-width: 20px;
    font-size: 18px;
    background-color: #2557b7;
}

/* BLOG */

.blog-title {
    font-weight: bold;
    text-align: center;
    font-size: 3rem;
    padding: 20px;
    margin: 0.5em auto;
    font-family:
        "helsinkiregular",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
}

.blog-post {
    max-width: 900px;
}

.blog-post .subtitle {
    font-size: 0.5em;
}

.blog .card-title,
.blog h2,
.blog h3,
.blog h4,
.blog h5,
.blog h6,
.blog-post h1,
.blog-post h2,
.blog-post h3,
.blog-post h4,
.blog-post h5,
.blog-post h6 .blog h1 {
    font-weight: 700;
}

.blog {
    background-color: #fafafa;
}

.card-blog {
    min-width: none;
    max-width: none;
    margin: auto;
}

.card-img-blog {
    height: 250px;
}

.pagination {
    word-break: normal;
}

.pagination .page-link {
    font-weight: bolder;
    padding: 9px;
}

.captcha {
    width: 150px;
    margin-bottom: 5px;
}

#div_id_captcha {
    margin-bottom: 2px !important;
    border-top: 1px solid #dee2e6 !important;
    margin-top: 0.5em;
    padding-top: 0.4em;
}

/*****
 STAR RATING DECIMAL
****/

.videoDescription .star-rating-container i {
    font-size: 30px;
}

.movie-list-item-container .star-rating-container i {
    font-size: 20px;
}

/* Clickable star rating hover effect */
.videoDescription button.btn-link {
    text-decoration: none !important;
}

.videoDescription button:hover .star-rating-container {
    opacity: 0.8;
    transform: scale(1.02);
    transition: all 0.2s ease;
}

[data-star] {
    text-align: left;
    font-style: normal;
    display: inline-block;
    position: relative;
    unicode-bidi: bidi-override;
}

[data-star]::before {
    display: block;
    content: "★★★★★";
    color: #eee;
}

[data-star]::after {
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
    content: "★★★★★";
    width: 0;
    color: #ffc107;
    overflow: hidden;
    height: 100%;
}

[data-star^="0.1"]::after,
[data-star^=".1"]::after {
    width: 2%;
}

[data-star^="0.2"]::after,
[data-star^=".2"]::after {
    width: 4%;
}

[data-star^="0.3"]::after,
[data-star^=".3"]::after {
    width: 6%;
}

[data-star^="0.4"]::after,
[data-star^=".4"]::after {
    width: 8%;
}

[data-star^="0.5"]::after,
[data-star^=".5"]::after {
    width: 10%;
}

[data-star^="0.6"]::after,
[data-star^=".6"]::after {
    width: 12%;
}

[data-star^="0.7"]::after,
[data-star^=".7"]::after {
    width: 14%;
}

[data-star^="0.8"]::after,
[data-star^=".8"]::after {
    width: 16%;
}

[data-star^="0.9"]::after,
[data-star^=".9"]::after {
    width: 18%;
}

[data-star^="1"]::after {
    width: 20%;
}

[data-star^="1.1"]::after {
    width: 22%;
}

[data-star^="1.2"]::after {
    width: 24%;
}

[data-star^="1.3"]::after {
    width: 26%;
}

[data-star^="1.4"]::after {
    width: 28%;
}

[data-star^="1.5"]::after {
    width: 30%;
}

[data-star^="1.6"]::after {
    width: 32%;
}

[data-star^="1.7"]::after {
    width: 34%;
}

[data-star^="1.8"]::after {
    width: 36%;
}

[data-star^="1.9"]::after {
    width: 38%;
}

[data-star^="2"]::after {
    width: 40%;
}

[data-star^="2.1"]::after {
    width: 42%;
}

[data-star^="2.2"]::after {
    width: 44%;
}

[data-star^="2.3"]::after {
    width: 46%;
}

[data-star^="2.4"]::after {
    width: 48%;
}

[data-star^="2.5"]::after {
    width: 50%;
}

[data-star^="2.6"]::after {
    width: 52%;
}

[data-star^="2.7"]::after {
    width: 54%;
}

[data-star^="2.8"]::after {
    width: 56%;
}

[data-star^="2.9"]::after {
    width: 58%;
}

[data-star^="3"]::after {
    width: 60%;
}

[data-star^="3.1"]::after {
    width: 62%;
}

[data-star^="3.2"]::after {
    width: 64%;
}

[data-star^="3.3"]::after {
    width: 66%;
}

[data-star^="3.4"]::after {
    width: 68%;
}

[data-star^="3.5"]::after {
    width: 70%;
}

[data-star^="3.6"]::after {
    width: 72%;
}

[data-star^="3.7"]::after {
    width: 74%;
}

[data-star^="3.8"]::after {
    width: 76%;
}

[data-star^="3.9"]::after {
    width: 78%;
}

[data-star^="4"]::after {
    width: 80%;
}

[data-star^="4.1"]::after {
    width: 82%;
}

[data-star^="4.2"]::after {
    width: 84%;
}

[data-star^="4.3"]::after {
    width: 86%;
}

[data-star^="4.4"]::after {
    width: 88%;
}

[data-star^="4.5"]::after {
    width: 90%;
}

[data-star^="4.6"]::after {
    width: 92%;
}

[data-star^="4.7"]::after {
    width: 94%;
}

[data-star^="4.8"]::after {
    width: 96%;
}

[data-star^="4.9"]::after {
    width: 98%;
}

[data-star^="5"]::after {
    width: 100%;
}

.episodes-row {
    position: relative;
    padding-bottom: 10px;
    width: 100%;
}

.episodes-row .card-container {
    width: 95%;
    min-width: 20%;
    min-height: 80px;
    margin-right: 10px;
    position: relative;
    /* to position the absolute card inside */
    margin-bottom: 0.5rem;
}

/* For very large screens (>= 1200px) */
@media (min-width: 1200px) {
    .episodes-row .card-container {
        width: 23%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .episodes-row .card-container {
        width: 31%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .episodes-row .card-container {
        width: 47%;
    }
}

/* Initial state for the card */
.episodes-row .card {
    max-height: 96px;
    min-height: 80px;
    width: 100%;
    overflow: hidden;
    transition:
        transform 0.3s ease-in-out,
        box-shadow 0.3s ease-in-out,
        max-height 0.3s ease-in-out;
    position: relative;
    transform: scale(1);
    /* Starting scale */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Light shadow for some depth */
}

/* State on hover */
.episodes-row .card:hover {
    transform: scale(1.05);
    /* Zoom-in effect */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* Enhanced shadow for "lift" effect */
    max-height: 500px;
    position: absolute;
    z-index: 10;
    /* Ensure it appears above other elements */
    width: 100%;
    margin-right: calc(18rem - 100%);
}

.episodes-row .card .card-title {
    max-height: 27px;
    overflow: hidden;
}

.episodes-row .card:hover .card-title {
    max-height: 80px;
}

/* When the card is NOT being hovered over */
.episodes-row .card:not(:hover) {
    transition:
        transform 0.3s ease-in-out,
        box-shadow 0.3s ease-in-out,
        max-height 0s;
}

.episodes-row .card .card-text {
    opacity: 0.9;
    /* Adjust the initial opacity as you prefer */
}

.episodes-row .card:hover .card-text {
    opacity: 1;
}

.search-results-container {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 10px;
    border: 1px solid #ccc;
}

.result-item {
    display: flex;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.result-item:last-child {
    border-bottom: none;
}

.result-item img {
    margin-right: 10px;
}

.result-info .result-title {
    font-weight: bold;
}

.result-info .result-overview {
    font-size: 0.8rem;
    color: #666;
}

.suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #f8f9fa;
    /* Light background */
    box-sizing: border-box;
    z-index: 1000;
    text-align: left;
}

.suggestion-item:hover,
.suggestion-item:focus {
    background-color: #e9ecef !important;
    /* Lighter gray for hover */
    color: #343a40 !important;
    /* Dark text color */
    text-decoration: none !important;
}

.suggestion-list {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
}

.suggestion-item {
    background-color: #f8f9fa;
    color: #343a40;
    /* Dark text color */
    border-bottom: 1px solid #ddd;
    /* Light border for items */
}

.suggestion-link {
    color: #007bff;
    /* Standard link color */
    text-decoration: none;
}

.suggestion-link:hover,
.suggestion-link:focus {
    background-color: #e9ecef;
    color: #0056b3;
    /* Darker link color on hover */
    text-decoration: underline;
}