* {
    font-family: 'Roboto', Segoe UI;
    -webkit-font-smoothing: antialiased;
}
#videoPlaceholder {
    display:none;
    max-width:100%;
    max-height:90vh;
    margin:0 auto;
    aspect-ratio: 16/9;
}
.videoContainerRow {
    display: flex;
    /*flex-direction: row;*/
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 0;
    min-height: 0;
}
.videoContainerCol {
    display: flex;
    flex-direction: column;
    /*width: 100%;*/
    /*height: 100%;*/
    /*min-height: 0;*/
    max-height: 90%;
}

#video {
    width:100%;
    height:100%;
    margin:0 auto;
}

#buttonscontainer {
    width:100%;
    margin-bottom: 1vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.5vh 0.5vw;
}

#dropdowncontainer {
    display: none;
}

.customButton {
    cursor: pointer;
    outline: 0;
    color: #ffd;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    max-width: 50%;
    background-color: #333333;
    font-weight: 500;
    line-height: 5vh;
    text-align: center;
    border: 0.1vh solid #333333;
    padding: 0 0.35vw;
    font-size: 0.937rem;
    opacity: 0.8;
    border-radius: .25rem;
    transition: .5s ease-in-out,background-color .5s ease-in-out,border-color .5s ease-in-out,box-shadow .5s ease-in-out;
    &:hover {
        opacity: 1;
        background-color: #474747;
        border-color: #474747;
    }
}

#channelsbutton {
    font-size: 1.035rem;
    cursor: pointer;
    outline: 0;
    color: #ffd;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 95%;
    background-color: #333333;
    font-weight: 500;
    line-height: 5vh;
    text-align: center;
    border: 0.1vh solid #333333;
    padding: 0 0.35vw;
    opacity: 0.8;
    border-radius: .25rem;
    transition: .5s ease-in-out,background-color .5s ease-in-out,border-color .5s ease-in-out,box-shadow .5s ease-in-out;
    &:hover {
        opacity: 1;
        background-color: #474747;
        border-color: #474747;
    }

}

body {
    background-color: black;
    /*margin:0;*/
}

.shaka-controls-button-panel{
    justify-content: center;
}

.hidden {
    display: none;
}

/*Document PiP style*/
body:not(:has(#dropdowncontainer, #buttonscontainer)) {
    margin: 0 auto;
    padding: 0;
    #videoPlaceholder {
        max-height: 100%;
    }
    .shaka-controls-button-panel>* {
        padding: 0 1.4vw;
        margin: 0.4vh 0.4vw;
    }
    .shaka-volume-bar-container {
        width: 22vw;
    }
    .shaka-controls-button-panel>* {
        padding: 0 0.5vw;
    }
}

@media (orientation: portrait) {
    #dropdowncontainer {
        display: flex;
        flex-direction: row;
        width:100%;
        margin-bottom: 1vh;
        justify-content: center;
        align-items: stretch;
        gap: 0;
    }
    #buttonscontainer {
        justify-content: space-between;
        flex-wrap: wrap;
        opacity: 0;
        max-height: 0;
        z-index: -1;
        visibility: hidden;
    }
    /*watch out for the screen.orientation event listener in index.js, it could affect transitions*/
    /*body:not(:has(#videoPlaceholder:fullscreen)):not(:has(input:checked))*/
    body:not(:has(#videoPlaceholder:fullscreen)) #buttonscontainer {
        /*transition-property: opacity, max-height, visibility;*/
        /*transition-duration: 2s;*/
        /*transition-behavior: allow-discrete;*/
        /*transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;*/
        transition: all 1.3s;
    }

    #dropdowncontainer:has(input:checked) + #buttonscontainer {
        opacity: 1;
        max-height: 100vh;
        visibility: visible;
        z-index: 1;
        transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
    }

    @starting-style {
        #buttonscontainer {
            opacity: 0;
            max-height: 0;
            visibility: hidden;
            z-index: -1;
        }
    }
    .customButton {
        width: 49%;
    }
    .shaka-controls-button-panel>* {
        padding: 0 1.4vw;
        margin: 0.4vh 0.4vw;
    }
    .shaka-volume-bar-container {
        width: 22vw;
    }
    .shaka-controls-button-panel>* {
        padding: 0 0.5vw;
    }
}