html, body {
    height: 100%;
    margin:0;
    background-color: #222222;
    /*background-color: #20e5ff;*/
    font-family: 'Courier New', Courier, monospace;
    -webkit-text-size-adjust: none;
    overscroll-behavior: none;
    overflow: hidden;
}
*, *:before, *:after {
    /*touch-action: none;*/
    -webkit-user-select: none;
    user-select: none;
    /*-webkit-touch-callout: none;*/
}
.notAlink {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -moz-window-dragging: no-drag;
}
.noShow {
    display: none;
}
html, body, div, a, span, img, table, th, tr, td, p {
    box-sizing: border-box;
}
#loadingT {
    display: inline-block;
}
#mainLink {
    text-decoration: none;
    font-weight: light;
    font-size: 1em;
    color: rgb(233, 236, 253);
    background-color: black;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
}
/*buttons */
.uiButtonShell {
    z-index: 100;
    position:fixed;
    top:85px;
    left:4%;
    width:9%;
    z-index: 101;
}
.uiButton {
    text-decoration: none;
    color:inherit;
    display: block;
    margin-bottom:15px;
    width: 100%;
    border:2px solid #aaa;
    color:#ccc;
    border-radius:15px;
    box-shadow: 0px 0px 9px #999999;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:13px;
    padding-right:13px;
    z-index: 102;
    text-align: center;
    
}

#ddump {
    display: none; 
    width:90%;
    height:30px;
    margin-left: auto;
    margin-right: auto;
    white-space: pre;
    font-family: monospace;
}
#navBar {
    position:fixed;
    top:0px;
    left:0px;
    width: 100%;
    font-weight: light;
    font-size: 1em;
    color: rgb(233, 236, 253);
    background-color: black;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    padding-top: 5px;
    padding-bottom: 7px;
    margin-top: 0px;
    margin-bottom: 7px;
}
#topBar {   
    position:fixed;
    top:40px;
    left:2%;
    width: 96%;
    font-weight: light;
    font-size: 1em;
    color: rgb(169, 169, 169);
    background-color: rgb(7, 7, 7);
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 0px;
    margin-bottom: 5px;
    
}
#footBar {
    position:fixed;
    bottom:0px;
    left:0px;
    width: 100%;
    font-weight: light;
    font-size: 1em;
    color: rgb(159, 159, 159);
    background-color: black;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
}
#PickLessBar {
    position:fixed;
    bottom:6%;
    left:30%;
    width: 40%;
    display: flex;
    font-weight: light;
    font-size: 1em;
    color: rgb(197, 196, 196);
    background-color:#202020;
    text-align: left;
    font-family: 'Courier New', Courier, monospace;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 0px;
    border:3px solid magenta;
    border-radius: 15px;
    box-sizing:border-box;
    opacity: 0;
    transition: opacity 0.5s ease;
    box-shadow: 0px 0px 93px #ccc;
}
#PickLessBar.fade {
    opacity: 1;
}
#PickLessIcon{
    flex: 0 0 15%;
    border-right: 2px solid #111111;
    box-sizing: border-box;
    text-align: center;
}
#PickLessCount {
    flex: 0 0 10%;
    border-left: 2px solid #111111;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
#PickLessTip {
    flex:1;
    text-align:center;  
    align-items: center;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#uiBox {
    position:fixed;
    top:13%;
    left:15%;
    width:70%;
    height: 65%;
    font-weight: light;
    font-size:1em;
    color: #c5c4c4;
    font-family: 'Courier New', Courier, monospace;
    padding-top: 13px;
    padding-bottom: 13px;
    padding-left: 7px;
    padding-right: 7px;
    border:3px solid #ccc;
    border-radius: 15px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    box-shadow: 0px 0px 93px #ccc;
    overflow-y: auto !important;
    touch-action: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background-color: #202020;
    z-index: 300;
}
#uiBox.fade {
    opacity: 1;
    pointer-events:auto !important;
    text-align: center;
}
.uiBoxNav {
    width: 21%;
    display: inline-block;
    padding-left:5px;
    padding-right:5px;
    height: 100%;
    vertical-align: top;
}
.uiBoxContent {
    width: 55%;
    height: inherit;
    border-left: none;
    border-right: none;
    border-left: 2px solid #444;
    border-right: 2px solid #444;
    display: inline-block;
    padding-left:13px;
    padding-right:13px;
    height: 100%;
    vertical-align: top;
    text-align: center;
}
.uiBoxSide {
    width: 20%;
    display: inline-block;
    padding-left:5px;
    padding-right:5px;
    height: 100%;
    vertical-align: top;
    text-align: center;
}

#indexBoxNavContent, #indexBoxContentTitle {
    margin-top:50px;
}
.indexBoxNavItem {
    text-align: center;
    display: block;
    position: relative;
    z-index: 400;
    padding-top:7px;
    padding-bottom:7px;
    margin-bottom:15px;
    border:2px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 #444;
    color: inherit;
    text-decoration: none;
    font-size: inherit;
}
#indexBoxContentTitle {
    margin-bottom: 13px;
    font-weight: bold;
    text-align: left;
}
#indexBoxContentBody {
    height: inherit;
    margin-bottom: 27px;
    text-align: left;
}


#gameBox {
    display: block;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 100%;
    width: 100%;
    align-self: center;
    touch-action: none;
    /*border: 2px solid gray;*/
}
@media(max-width: 768px) {
    #PickLessBar {
	width:90%;
	left:5%
	}
    .uiButtonShell {
        width:29%;
    }
    .uiBoxNav, .uiBoxContent, .uiBoxSide {
        display: block !important;
        height:auto !important;
        width: 100% !important;
        height: inherit;
        overflow-y: scroll;
        border-top: none;
        border-bottom: none;
    }
    .uiBoxContent {
        border-left: none;
        border-right: none;
        border-top: 2px solid #444 !important;
        border-bottom: 2px solid #444 !important;
    }
    #uiBox {
        width: 90%;
        left:5%;
    }
    #indexBox {
      width:90%;
      left:5%;
    }
    /*
    #indexBox {
    flex-direction: column !important;
    }
    #indexBoxIcon, #indexBoxSide, #indexBodyShell {
      /*display:block;*
      width: 100% !important;
      height: auto !important;
      margin-bottom:15px;
      display:block !important;
      flex: auto !important;
      border:0;
    }
    #indexBoxSide {
      text-align:center;
      margin-top:25px;
      border-top: 2px solid #ccc;
      padding-top: 5px;
      padding-bottom: 5px;
    } */
}