html{
    --left : 30%;
}

.scrollbar {
    scrollbar-color: #2098D1 #CFCFCF;
    scrollbar-width: thin;
}
.scrollbar::-webkit-scrollbar {
    width: 4px;
}
.scrollbar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
}
.scrollbar::-webkit-scrollbar-thumb {
    background: #2098D1;
    padding: 0 2px 0 2px;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
    background: #115D79;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/***************************************/
/********** film-container CSS *********/
/***************************************/

.film-container {
    display: flex;
    background-color: #F5F5F5;
    height: 10vw;
    max-height: 160px;
    min-height: 80px;
/*     padding: .5% .5% .5% .5%; */
    overflow: hidden;
    }

    /********** film-leftSide CSS *********/
    /***************************************/

    .film-leftSide{
/*         background-color: #ffffff; */
        display: flex;
        flex-direction: row;
        width: var(--left);
        min-width: 130px;
        }

        /********** film-filter CSS *********/

        .film-filter{
            width: 20%;
            min-width: 25px;
        }
        .film-filter ul{
            display:flex;
            align-items:center;
            flex-direction:column;
            justify-content:center;
            
        }
        .film-filter li{
            margin-bottom: .15vw;
            min-width: 85%;
            text-align: center;
            cursor: pointer;
        }
        .film-filter li img{
            height: 1.75vw;
            max-height: 30px;
            min-height: 12.5px;
        }
        .film-filter li:hover{
            box-shadow: 2px 0 0 0  #2098D1 inset;
        }
        .film-filter li.active{
            box-shadow: 2px 0 0 0  #2098D1 inset;
        }

        /********** film-list CSS *********/

        .film-list{
            /*padding: 1vw 0 1vw 0;*/
            height: 100%;
            width: calc(100% - 20%);
        }
        .film-list ul{
            margin-top: 4%;
            height: 90%;
            overflow-y: hidden;
        }
        .film-list ul:hover{
            overflow-y: scroll;            
        }
        .film-list li{
/*             margin-left: .5vw; */
            font-size: min(max(10px, 1vw), 16px);
            cursor: pointer;
        }
        /*.film-list li.hvr-back-pulse a:active{*/
        /*    background-color: rgba(32, 152, 209, 0.5);*/
        /*}*/
        .film-list li.active{
            transition-duration: 0s;
            -webkit-transition-duration: 0s;
            cursor: auto;
            background-color: rgba(32, 152, 209, 0.5);
        }

    /********** film-rightSide CSS *********/
    /***************************************/

    .film-rightSide{
        display: flex;
        position: relative;
        background-color: rgba(32, 152, 209, 0.15);
        height: 100%;
        width: calc(100% - var(--left));
        min-width: calc(310px - 160px);
        margin-left: .15vw;
        }
        .film-icons{
            height: 100%;
        }
        .film-icons img{
            height: 100%;
        }
        .film-description{
            position: absolute;
/*             text-align: center; */
            top:50%;
            left: 50%;
            transform: translate(-10%, -50%);
            width: 75%;
        }
        .film-description .content{
            position: absolute;
/*             top: 50%; */
/*             width: 100%; */
            transform: translate(0, -50%);
            font-size: min(max(7px, 1vw), 15px);
        }
        .film-description .title{
            font-size: min(max(9px, 2vw), 25px);
            color: #2098D1;
        }
        .descAnimation{
            animation: fadeIn ease 1s;
            -webkit-animation: fadeIn ease 1s;
        }
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}


@media (max-width: 1024px){
    .film-list ul{
        overflow-y: scroll;
    }
}