@charset "utf-8";
/* CSS Document */
#tab { display: flex;justify-content: center; position: sticky; width: 100%; top:76px; left: 0;background-color: rgba(0,0,0,.6); margin-top: 0px;}
#tab:before { /*content: "";*/ width: 100%; height: 3px; display: block; background-color: #FE00EE; position: absolute; bottom: 0px; left: 0;}
#tab li { margin: 0px; width: calc( 25% - 0px); height: 70px; cursor: pointer; display: flex;justify-content: center;align-items: center; color: #333;background-color: #333; border-radius: 0em; border-bottom-left-radius: 0; border-bottom-right-radius: 0; position: relative; line-height: 1.2;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#494949+0,333333+100 */
background: #494949; /* Old browsers */
background: -moz-linear-gradient(top,  #494949 0%, #333333 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #494949 0%,#333333 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #494949 0%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
}
#tab li.selected { /*background-color: #FE00EE;*/ border:0px solid #FE00EE; border-bottom: none; box-sizing: border-box;  /*box-shadow: 0 0 10px #FE00EE; color: #FE00EE;*/ background-color: #FE00EE; color: #FFF;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f972ee+0,fe00ee+100 */
background: #f972ee; /* Old browsers */
background: -moz-linear-gradient(top,  #f972ee 0%, #fe00ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f972ee 0%,#fe00ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f972ee 0%,#fe00ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f972ee', endColorstr='#fe00ee',GradientType=0 ); /* IE6-9 */

}
#tab li.selected:before {content: ""; width: 100%; height: 0px; display: block; background-color: #000; position: absolute; bottom: -3px; left: 0;}
#tab li span { font-size: 130%;text-align: center; color: #fff;
}
#tab li.selected span {font-weight:bold!important; color: #FFF;}
.tab { display: none;}
.tab.open { display: block;}
#tabWrap { color: #FFF; padding: 10px;}

#container.lower:before, #container.system:before, #container.terminal:before {
    background-color: rgba(0,0,0,1);
}

@media screen and (max-width:700px) {
    #tab { flex-wrap: wrap; background-color: #000; padding-bottom: 3px;}
   #tab li { margin: 3px; width: calc( 50% - 6px);} 
    #tab:before,#tab li.selected:before {display: none;}
    #tab li { border-bottom-left-radius: 0em; border-bottom-right-radius: 0em;}
    #tab li.selected { border-bottom: 2px solid #FE00EE;}
}