* {
    
    padding:                    0px;
    margin:                     0px;
}

html, body {
    
    width:                      100%;
    height:                     100%;
}



.horizontal-aligner {
    
    display:                    flex;
    flex-direction:             row;
    
    width:                      100%;
    height:                     100%;
    
    background-color:           #000000;
}



.generic-panel {
    
    min-width:                  150px;
    height:                     100%;
    
    background-color:           #2c3046;
    border-right:               solid 1px #1c1e24;
    border-left:                solid 1px #1c1e24;
}

.generic-panel > .header {
    
    display:                    flex;
    flex-direction:             row;
    align-items:                center;
    justify-content:            space-around;
    
    width:                      100%;
    height:                     24px;
    
    font-size:                  16px;
    font-weight:                750;
    
    background-color:           #1c1e24;
    color:                      #ffffff;
}



.info-view {
    
    min-width:                  100px;
    width:                      50%;
    height:                     100%;
    
    
}

.control-view {
    
    min-width:                  100px;
    width:                      25%;
    height:                     100%;
    
    
}



.monitor-view {
    
    display:                    flex;
    flex-direction:             column;
    align-items:                center;
    justify-content:            space-around;
    
    width:                      100%;
    min-width:                  400px;
    height:                     100%;
    
    background-color:           #080808;
}

.monitor {
    
    width:                      50vw;
    height:                     auto;
    padding-left:               3px;
    padding-right:              3px;
    
    background-color:           #1c1e24;
    border-bottom-left-radius:  5px;
    border-bottom-right-radius: 5px;
}

.monitor > .info-header {
    
    display:                    flex;
    flex-direction:             row;
    align-items:                center;
    justify-content:            space-around;
    
    height:                     24px;
    
    font-size:                  16px;
    font-weight:                750;
    
    background-color:           #1c1e24;
    color:                      #ffffff;
}

.monitor > .output {
    
    width:                      100%;
    height:                     calc(50vw * 0.5625);
    
    background-color:           #000000;
}





noscript {
    
    width:                      100%;
    height:                     100%;
    background-color:           #000000;
    color:                      #ffffff;
}