html,
body {
    background: #222;
    color: #ddd;
    font-family: 'verdana';
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: radial-gradient(#300, #000);

    & * {
        transition: .3s;
        cursor: default;

        &:focus {
            outline: 1px solid #f22;
        }
    }

    & .off {
        display: none !important;
    }
}

.loading_svg_{
    fill: #fff2;
    margin: auto;
    height: max-content;
    margin-top: 60px;
    width: 36px;
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#my-player {
    width: 100%;
    background: #000 !important;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    &.flowplayer{
        & .fp-header{
            & .title_media_play{
                display: flex;
                align-items: center;
                justify-content: start;
            }

            & .close{
                background: #fff2;
                display: flex;
                height: 24px;
                width: 24px;
                border-radius: 6px;
                margin: 12px 0;
                margin-right: 12px;
                & svg{
                    cursor: pointer!important;;
                    fill: #fff!important;
                }

                &:hover{
                    background: #fff5;
                }
            }
            & .title_item {

            }
        }
        & .fp-controls{
            & .title_media_next{
                display: flex;
                align-items: center;
                justify-content: start;
            }

            & .next_episode{
                background: #fff2;
                display: flex;
                height: 24px;
                width: 24px;
                border-radius: 6px;
                margin: 12px 0;
                margin-right: 0px;
                & svg{
                    cursor: pointer!important;;
                    fill: #fff!important;
                }
                &:hover{
                    background: #fff5;
                }
            }
            & .title_item {

            }
        }
        & .fp-share{
            display: none;
        }
    }
}

.button_1:hover {
    scale: 1.1;
    color: #dddd;
    background: #7777;
    border-color: #9999;
    cursor: pointer;

    & * {
        pointer-events: none;
    }
}


.voltar {
    position: fixed;
    left: 12px;
    top: 12px;
    border-radius: 60px;
    background: #7777;
    border: 1px solid #9999;
    fill: #bbbb;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 30px;
    z-index: 50;

    & svg {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }
}

.home {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;

    & .options {
        display: flex;
        margin-top: auto;

        & .option {
            background: #5555;
            padding: 24px 24px;
            border-radius: 60px;
            margin: 12px;
            border: 1px solid #7777;
            color: #cccc;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            fill: #9999;

            & span {
                white-space: nowrap;
            }

            & svg {
                margin-right: 6px;
                fill: inherit;
            }

            & * {
                pointer-events: none;
            }

            &:hover {
                scale: 1.1;
                color: #dddd;
                background: #7777;
                border-color: #9999
            }
        }
    }

    & .info {
        margin-bottom: 6px;
        margin-top: auto;
        display: flex;
        width: 100%;

        & .left,
        .right {
            display: flex;
            flex-direction: column;
            padding: 24px;
        }

        & .left {
            margin-right: auto;
            margin-left: 0;
        }
    }
}

.listas.view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;

    & .title {
        max-width: 600px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        & h2 {
            margin-right: auto;
        }

        & button {
            width: 60px;
            height: 30px;
            border-radius: 60px;
            border: 1px solid #9999;
            background: #7777;
            fill: #bbbb;
            margin: 12px 6px;

            & svg {}
        }
    }

    & .list {
        display: flex;
        padding: 12px 18px;
        width: 600px;
        max-width: calc(100% - 36px);
        flex-direction: column;

        & .item {
            border: 1px solid #9999;
            background: #7777;
            border-radius: 12px;
            display: flex;
            width: 100%;
            position: relative;
            padding: 12px;
            cursor: pointer;
            margin-bottom: 18px;

            &:hover {
                color: #dddd;
                background: #9999;
                border-color: #aaaa
            }

            & .counter {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                border-right: 1px solid #7777;
                padding-right: 12px;
                pointer-events: none;
            }

            & .two {
                display: flex;
                flex-direction: column;
                width: 100%;
                margin-left: 18px;
                pointer-events: none;

                & span {
                    color: #aaaa;
                    height: 1em;
                }

                & b {
                    height: 1em;
                }
            }

            & .remove_list {
                fill: #aaaa;
                background: #7777;
                position: absolute;
                right: -72px;
                border-radius: 60px;
                height: 60px;
                top: 0px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 60px;
                border: 1px solid #9999;
                cursor: pointer;

                & * {
                    pointer-events: none;
                }

                &:hover {
                    fill: #dddd;
                    background: #9999;
                    border-color: #aaaa
                }
            }
        }
    }

    & .info {
        margin-bottom: 6px;
        margin-top: auto;
        display: flex;
        width: 100%;

        & .left,
        .right {
            display: flex;
            flex-direction: column;
            padding: 24px;
        }

        & .left {
            margin-right: auto;
            margin-left: 0;
        }
    }
}

.edit_list {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    & input,
    button.salvar {
        margin-bottom: 24px;
        height: 30px;
        width: 100%;
        max-width: 252px;
        font-size: 18px;
        border-radius: 18px;
        border: 1px solid #7777;
        background: #5555;
        color: #dddd;
        padding: 0 24px;
    }

    & button.salvar {
        cursor: pointer;

        &:hover {
            color: #dddd;
            background: #7777;
            border-color: #9999
        }
    }
}

.filmes.view {
    display: flex;
    flex-direction: row;
    height: 100%;

    & .voltar {
        position: relative;
        top: 0;
        left: 0;
        width: calc(100% - 36px);
        margin: 0 18px;
        margin-bottom: 18px;

        &::after {
            content: 'Voltar';
            margin-left: 0;
            margin-right: auto;
            position: absolute;
            font-size: 18px;
            color: #cccc
        }

        & svg {
            margin-right: auto;
            margin-left: 3px;
        }
    }

    & .categorias {
        background: #2222;
        border-right: 1px solid #3333;
        padding-top: 18px;
        overflow: auto;
        display: flex;
        align-items: start;
        justify-content: start;
        flex-direction: column;
        height: calc(100% - 18px);
        width: max-content;
        width: 100%;
        max-width: 400px;
        & .search {
            background: #7777;
            border: 1px solid #9999;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            fill: #9999;
            padding: 0 6px;
            margin: 0 18px;
            height: 30px;
            width: calc(100% - 54px);

            & input {
                background: transparent;
                border: 0;
                padding: 0;
                outline: none;
                color: #bbbb;
                font-size: 18px;
            }
        }

        & .list {
            border-top: 1px solid #5555;
            height: 100%;
            display: flex;
            width: 100%;
            margin-top: 18px;
            flex-direction: column;
            height: max-content;
            padding: 3px 0;
            & span {
                background: #5555;
                border-radius: 6px;
                height: 40px;
                border: 1px solid #7777;
                display: flex;
                align-items: center;
                justify-content: start;
                padding-left: 12px;
                margin: 3px 6px;
                color: #dddd;
                cursor: pointer;
                font-size: 18px;
                &:hover{
                    background: #8888;
                    color: #eeee;
                    border-color: #aaaa;
                }
                &.active{
                    background: #fff4;
                }
            }
        }
    }
    & .items{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        overflow: auto;
        align-items: start;
        justify-content: start;
        width: 100%;
        margin: 3px auto;
        height: max-content;
        max-height: calc(100% - 6px);
        & .media_item{
            display: flex;
            flex-direction: column;
            width: 200px;
            height: 300px;
            margin: 6px 6px;
            padding: 0 6px;
            &:hover{
                scale: 1.03;
                & img{
                    border-color: #fff;
                }
            }
            & *{
                pointer-events: none;
            }
            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 6px;
                border: 1px solid #7777;
                background-image: url('http://player.aplicativo.space/imgs/404.png');
                background-position: center;
                background-size: cover;
            }
            & span{
                white-space: nowrap;
                text-align: center;
                color: #dddd;
                margin-top: 3px;
            }
        }
    }
}

.trailer_view{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    & iframe{
        width: 100%;
        height: 100%;
    }
}

.media_info{
    display: flex;
    flex-direction: column;
    padding-top: 60px;
    background: #0000!important;
    z-index: 2;
    position: relative;
    width: calc(100% - 48px);
    & .background_{
        background-size: cover;
        background-position: center;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        &:after{
            content: "";
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(#000a, #000f);
            z-index: 1;
        }
    }
    & .voltar{
        position: fixed!important;
        left: 24px!important;;
        top: 24px!important;;
        width: 150px!important;
    }
    & h1{
        margin: 24px 48px;
    }
    & > .one{
        display: flex;
        margin: 0 48px;
        margin-bottom: 24px;
        & .starts{
            fill: yellow;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 24px;
            & svg{
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        & .ano{
            display: flex;
            background: #7777;
            border-radius: 12px;
            padding: 6px 6px;
            align-items: center;
            justify-content: center;
            margin-right: 24px;
        }
        & .duration{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 24px;
            fill: #7777;

            & svg{
                margin-right: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        & .categoria{
            background: #7777;
            border-radius: 12px;
            padding: 6px 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    & .info{
        display: flex;
        align-items: center;
        justify-content: start;
        margin: 0 48px;
        margin-bottom: 24px;
    }
    & .buttons{
        display: flex;
        align-items: center;
        justify-content: start;
        margin: 0 48px;
        margin-bottom: 24px;
        & button{
            margin-right: 24px;
            background: #7777;
            border-radius: 12px;
            padding: 6px 6px;
            border: 0;
            color: #dddd;
            display: flex;
            align-items: center;
            justify-content: start;
            fill: #aaaa;
            padding-right: 9px;
            & svg{
                margin-right: 3px
            }
            &.temporada{
                & select{
                    background: #0000;
                    color: #aaa;
                    border: 0;
                    outline: none;
                }
            }
        }
    }
    & .episodios{
        display: flex;
        margin: 24px;
        overflow: auto;
        width: 100%;
        max-width: 100%;
        & .episodio{
            display: flex;
            flex-direction: column;
            margin-right: 12px;
            padding-bottom: 12px;
            & img{
                width: 150px;
                height: 250px;
                border-radius: 12px;
                border: 1px solid #7777;
                object-fit: cover;
                object-position: center;
                background-image: url('http://player.aplicativo.space/imgs/404.png');
                background-position: center;
                background-size: cover;
            }
        }
    }
    & .elenco{
        display: flex;
        align-items: center;
        justify-content: start;
        margin: 0 48px;
        margin-bottom: 24px;
        width: 100%;
        overflow: auto;
        & .item{
            display: flex;
            flex-direction: column;
            margin-right: 12px;
            & img{
                border-radius: 12px;
            }
        }
    }
}

#userMenu{
    position: fixed;
    right: 12px;
    top: 12px;
    z-index: 999999;
    height: 76px;
    &:hover{
        & .options{
            opacity: 1!important;
            pointer-events: all!important;;
        }
    }
    & .display {
        background: #fff3;
        border-radius: 6px;
        padding: 6px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: default;
        border: 1px solid #fff2;
        background: 0;
        border: 0;
        padding: 6px;
        & span{
            margin-right: 12px;
            pointer-events: none;
        }
        & img{
            width: 60px;
            border-radius: 60px;
            border: 2px solid #fff7;
            pointer-events: none;
        }
        &:hover{
            /*             background: #fff4; */
        }
    }
    & .options{
        display: flex;
        flex-direction: column;
        background: #fff4;
        border-radius: 6px;
        padding: 12px 12px;
        border: 1px solid #fff2;
        opacity: 0;
        pointer-events: none;
        &.active{
            opacity: 1;
            pointer-events: all;
        }
        & .option{
            background: #fff3;
            border-radius: 6px;
            padding: 6px 12px;
            cursor: pointer;
            border: 1px solid #fff2;
            & span{
                pointer-events: none;
            }
            &:hover{
                background: #fff5;
            }
        }
    }
}