:root {
    --sidebar-width: 60px;
  }
  

body {
    overflow: hidden;
    height: 100%;
    margin: 0;
    background-color: black;
}

iframe {
    border: 0px;
    height: 100%;
    width: 100%;
}

    .panel .sourceDropDown{
        background-color: #222222;
        color: white;
        font-size: 18px;
        border: none;
        outline: 0px;
        font-weight: bold;
        margin-top: 1px;
    }

    .panel .sourceDropDown::-ms-expand {
        display: none;
    }
    

    .panel .sourceDropDown {
        /* for Firefox */
        -moz-appearance: none;
        /* for Safari, Chrome, Opera */
        -webkit-appearance: none;
    }

    /* for IE10 */
    .panel .sourceDropDown::-ms-expand {
        display: none;
    }


    .panel > .header {
        flex: 0 1 auto;
        height: 30px;
        background-color: #222222;
        color: white;
        font-size: 18px;
        border-left: 2px solid black;
        border-right: 2px solid black;
    }

        .panel > .header > .header-left {
            float: left;
            height: 100%;
            margin-left: 10px;
        }

        .panel > .header > .header-right {
            height: inherit;
            margin-right: 10px;
            position: relative;
            float: right;
        }

            .panel > .header > .header-right > .header-icon {
                margin-top: 6px;
                cursor: pointer;
            }

                .panel > .header > .header-right > .header-icon.fa-volume-up {
                    color: #297029;
                }

.player{
    height: -moz-calc(100% - var(--sidebar-width)/2);
    height: -webkit-calc(100% - var(--sidebar-width)/2);
    height: calc(100% - var(--sidebar-width)/2);
}

/*Square Grid*/
#content.square-grid .panel {
    height: 50%;
    position: fixed;
    
    width: -moz-calc(50% - var(--sidebar-width)/2);
    width: -webkit-calc(50% - var(--sidebar-width)/2);
    width: calc(50% - var(--sidebar-width)/2);
}

    #content.square-grid #panelA {
        top: 0;
        left: var(--sidebar-width);
    }

    #content.square-grid #panelB {
        top: 0;
        left: -moz-calc(50% + var(--sidebar-width)/2);
        left: -webkit-calc(50% + var(--sidebar-width)/2);
        left: calc(50% + var(--sidebar-width)/2);
    }

    #content.square-grid #panelC {
        top: 50%;
        left: var(--sidebar-width);
    }

    #content.square-grid #panelD {
        top: 50%;
        left: -moz-calc(50% + var(--sidebar-width)/2);
        left: -webkit-calc(50% + var(--sidebar-width)/2);
        left: calc(50% + var(--sidebar-width)/2);
    }

/*Square Grid - Focused*/
#content.focus-grid .panel {
    position: fixed;
}

    #content.focus-grid .focus-grid-main {
        top: 0;
        height: 75%;
        left: var(--sidebar-width);
        width: -moz-calc(100% - var(--sidebar-width));
        width: -webkit-calc(100% - var(--sidebar-width));
        width: calc(100% - var(--sidebar-width));
    }

    #content.focus-grid .focus-grid-sub-a {
        top: 75%;
        height: 25%;
        left: var(--sidebar-width);
        width: -moz-calc(33.33% - var(--sidebar-width)/3);
        width: -webkit-calc(33.33% - var(--sidebar-width)/3);
        width: calc(33.33% - var(--sidebar-width)/3);
    }

    #content.focus-grid .focus-grid-sub-b {
        top: 75%;
        height: 25%;
        left: -moz-calc((33.33% - var(--sidebar-width)/3) + var(--sidebar-width));
        left: -webkit-calc((33.33% - var(--sidebar-width)/3) + var(--sidebar-width));
        left: calc((33.33% - var(--sidebar-width)/3) + var(--sidebar-width));
        width: -moz-calc(33.33% - var(--sidebar-width)/3);
        width: -webkit-calc(33.33% - var(--sidebar-width)/3);
        width: calc(33.33% - var(--sidebar-width)/3);
    }

    #content.focus-grid .focus-grid-sub-c {
        top: 75%;
        height: 25%;
        left: -moz-calc(2*(33.33% - var(--sidebar-width)/3) + var(--sidebar-width));
        left: -webkit-calc(2*(33.33% - var(--sidebar-width)/3) + var(--sidebar-width));
        left: calc(2*(33.33% - var(--sidebar-width)/3) + var(--sidebar-width));
        width: -moz-calc(33.33% - var(--sidebar-width)/3);
        width: -webkit-calc(33.33% - var(--sidebar-width)/3);
        width: calc(33.33% - var(--sidebar-width)/3);
    }

/*Tri Grid*/
#content.tri-grid .panel {
    height: 33.33%;
    position: fixed;
    
    width: -moz-calc(33.33% - var(--sidebar-width)/3);
    width: -webkit-calc(33.33% - var(--sidebar-width)/3);
    width: calc(33.33% - var(--sidebar-width)/3);
}

    #content.tri-grid #panelA {
        top: 0;
        left: var(--sidebar-width);
    }

    #content.tri-grid #panelD {
        top: 33.33%;
        left: var(--sidebar-width);
    }

    #content.tri-grid #panelG {
        top: 66.67%;
        left: var(--sidebar-width);
    }

    #content.tri-grid #panelB {
        top: 0%;
        left: -moz-calc(33.33% + 2*var(--sidebar-width)/3);
        left: -webkit-calc(33.33% + 2*var(--sidebar-width)/3);
        left: calc(33.33% + 2*var(--sidebar-width)/3);
    }

    #content.tri-grid #panelE {
        top: 33.33%;
        left: -moz-calc(33.33% + 2*var(--sidebar-width)/3);
        left: -webkit-calc(33.33% + 2*var(--sidebar-width)/3);
        left: calc(33.33% + 2*var(--sidebar-width)/3);
    }

    #content.tri-grid #panelH {
        top: 66.67%;
        left: -moz-calc(33.33% + 2*var(--sidebar-width)/3);
        left: -webkit-calc(33.33% + 2*var(--sidebar-width)/3);
        left: calc(33.33% + 2*var(--sidebar-width)/3);
    }

    #content.tri-grid #panelC {
        top: 0%;
        left: -moz-calc(66.67% + var(--sidebar-width)/3);
        left: -webkit-calc(66.67% + var(--sidebar-width)/3);
        left: calc(66.67% + var(--sidebar-width)/3);
    }

    #content.tri-grid #panelF {
        top: 33.33%;
        left: -moz-calc(66.67% + var(--sidebar-width)/3);
        left: -webkit-calc(66.67% + var(--sidebar-width)/3);
        left: calc(66.67% + var(--sidebar-width)/3);
    }

    #content.tri-grid #panelI {
        top: 66.67%;
        left: -moz-calc(66.67% + var(--sidebar-width)/3);
        left: -webkit-calc(66.67% + var(--sidebar-width)/3);
        left: calc(66.67% + var(--sidebar-width)/3);
    }

/*Quad Grid*/
#content.quad-grid .panel {
    height: 33.33%;
    position: fixed;
    
    width: -moz-calc(33.33% - var(--sidebar-width)/3);
    width: -webkit-calc(33.33% - var(--sidebar-width)/3);
    width: calc(33.33% - var(--sidebar-width)/3);
}

    #content.quad-grid .quad-main {
        top: 0;
        left: var(--sidebar-width);
        height: 66.67%;
        width: -moz-calc(33.33% - (2*var(--sidebar-width))/3);
        width: -webkit-calc(33.33% - (2*var(--sidebar-width))/3);
        width: calc(66.67% - (2*var(--sidebar-width))/3);
    }

    #content.quad-grid .quad-sub-3x1 {
        top: 0%;
        left: -moz-calc(66.67% + var(--sidebar-width)/3);
        left: -webkit-calc(66.67% + var(--sidebar-width)/3);
        left: calc(66.67% + var(--sidebar-width)/3);
    }

    #content.quad-grid .quad-sub-3x2 {
        top: 33.33%;
        left: -moz-calc(66.67% + var(--sidebar-width)/3);
        left: -webkit-calc(66.67% + var(--sidebar-width)/3);
        left: calc(66.67% + var(--sidebar-width)/3);
    }

    #content.quad-grid .quad-sub-1x3 {
        top: 66.67%;
        left: var(--sidebar-width);
    }

    #content.quad-grid .quad-sub-2x3 {
        top: 66.67%;
        left: -moz-calc(33.33% + 2*var(--sidebar-width)/3);
        left: -webkit-calc(33.33% + 2*var(--sidebar-width)/3);
        left: calc(33.33% + 2*var(--sidebar-width)/3);
    }

    #content.quad-grid .quad-sub-3x3 {
        top: 66.67%;
        left: -moz-calc(66.67% + var(--sidebar-width)/3);
        left: -webkit-calc(66.67% + var(--sidebar-width)/3);
        left: calc(66.67% + var(--sidebar-width)/3);
    }



#main{
    height: 100%;
    width: 100%;
    background-color: black;
}

#content{
    height: 100%;
    width: -moz-calc(100% - var(--sidebar-width));
    width: -webkit-calc(100% - var(--sidebar-width));
    width: calc(100% - var(--sidebar-width));
    background-color: #222222;
}

#sidebar{
    height: 100%;
    width: var(--sidebar-width);
    background-color: #222222;
}

#sidebar-content {
    padding-top: 1px;
    text-align: center;
    height: 100%;
    position: relative;
}

#sidebar-content .bottom{
    position: absolute;
    bottom: 20px;
    width: 100%;
}

#sidebar-content .logo {
    margin-bottom: 40px;
    color: white;
    margin-top: 10px;
    font-size: 30px;
}

#sidebar-content .sidebar-icon{
    margin-top: 30px;
    color: white;
}
#sidebar-content .sidebar-icon .fas{
    font-size: 24px;
}
#sidebar-content .sidebar-icon img{
    width: 32px;
}

#sidebar-content .clickable{
    cursor: pointer;
}