* {
    font-family: sans-serif;
    margin:0;
    padding:0;
    border:0;
}



body {
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    overflow: visible;
    overflow-x:hidden;
    background:#303234;
    color:#fbfdff;
}



.nav {
    position: absolute;
    top:0;
    left:0;
    width:100vw;
    background-color: #202224; 
    z-index:10;
}

.pages {
    position:absolute;
    top:180px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:1;
    overflow-x:hidden;
    overflow-y:auto;
}

.page {
    position:relative;
    width:100%;
    height:100%;
    display:none;
}

.active {
    display:block;
}

.a { 
    cursor:pointer; 
}

.a:hover {
    border-color: rgba(255,255,255,0.3);
}

.logInfo {
    background:#202224;
    color:#fff;
    font-size:12px;
    margin-bottom:5px;
}

.logWarn {
    background:#202224;
    color:#f88;
    font-size:12px;
    margin-bottom:5px;
}


.backRed {
    background:#944;
}
.backYellow {
    background:#994;
}
.backGreen {
    background:#494;
}


.grid, .gridFlat, .gridNav, .gridRow {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(auto-fit, minmax(8%,1fr)); /* cell12 ~ 8% */
}


.grid > div {
    padding: 20px 20px;
    font-weight:700; 
    font-size:14px;   
}

.gridNav > div {
    padding: 20px 20px;
    font-weight:700; 
    font-size:16px;  
    vertical-align: middle;
    line-height: 24px; 
}
.gridFlat > div {
    padding:10px 20px;  
    font-weight:500; 
    font-size:14px;   
}

.gridRow > div {  
    font-weight:500; 
    font-size:13px; 
}

.cell, .cell1, .cell2, .cell3, .cell4, .cell5, .cell6, .cell7, .cell8, .cell9, .cell10, .cell11, .cell12 {
    line-height:20px;
    font-size: 16px;
    border: solid 1px #202224;
}
.cellLeft {
    padding:10px 10px 10px 20px;
    border-right:0;
    background:#404244;
    cursor:pointer;
}
.cellMiddle {
    border-left:0;
    padding:10px 10px 10px 10px;
    border-right:0;
    background:#404244;
    cursor:pointer;
}
.cellRight {
    border-left:0;
    padding:10px 20px 10px 10px;
    background:#404244;
    cursor:pointer;
}
.cellHead {
    background:#36383a;
    text-align:left;
    color: #a0a2a4;
    line-height: 2px;
}
.cellFolder {
    background:#303234;
    text-align:left;
    color: #a0a2a4;
    padding:10px 20px 10px 20px; 
    cursor:pointer;  
}
.cellFolder:hover {
    background:#36383a; 
} 
.cell1 {
    grid-column: auto / span 1;
}
.cell2 {
    grid-column: auto / span 2;
}
.cell3 {
    grid-column: auto / span 3;
}
.cell4 {
    grid-column: auto / span 4;
}
.cell5 {
    grid-column: auto / span 5;
}
.cell6 {
    grid-column: auto / span 6;
}
.cell7 {
    grid-column: auto / span 7;
}
.cell8 {
    grid-column: auto / span 8;
}
.cell9 {
    grid-column: auto / span 9;
}
.cell10 {
    grid-column: auto / span 10;
}
.cell11 {
    grid-column: auto / span 11;
}
.cell12 {
    grid-column: auto / span 12;
}



.micon {
    width: 20px;
    height: 2px;
    background-color: #eee;
    margin: 3px 0;
}




.row {
    width:100vw;
    height:60px;

    line-height:60px;
    padding:0 30px;   
    cursor:pointer;
    border:solid 1px rgba(0,0,0,0.1);
}
.row2 {
    width:100vw;
    height:120px;

    line-height:120px;
    padding:0 30px;   
    cursor:pointer;
    border:solid 1px rgba(0,0,0,0.1);
}

.button {
    cursor:pointer;
}