body{
    background: #ffffff;
    text-align: center;
}

td, th {
    border: 1px solid #ebebeb;
    text-align: left;
    padding: 8px;
}

h1 {
    font-size: 3vmin;
}

.valid{
    color: green;
}

.invalid{
    color: red;
}

.listbox{
    border-style: solid;
    margin:auto;
    margin-top:2vmin;
    width:30vmin;
    height:50vmin;
    display:inline-block;
    overflow: auto;
}

#keyboardcontainer{
    padding:0px;
    margin:auto;
    width:100vmin;
    height:60vmin;
    display:block;
}

.keyboardbox{
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vmin;
    left:0;
    right:0;
    background: #ffffff;
    width:90vmin;
    height:47.4vmin;
    display:inline-block;
    position:absolute;
    z-index:1;
}
.kbrow{
    height: 27%;
    display:flex;
    justify-content: space-evenly;
}

.kbspacerow{
    height: 18%;
    display:flex;
    justify-content: space-evenly;
}

.overlaycanvas{
    position:absolute;
    width:100vmin;
    height:60vmin;
    display:inline-block;
    z-index: 20;
}

#kbcenterpathcanvas{
    z-index: 19;
}

#kbpointcanvas{
    z-index: 21;
}

#kbstrokecanvas{
    position: relative;
    z-index: 20;
}

#endgame{
    margin:auto;
    text-align: center;
}

#winner{
    margin:auto;
    font-size: 30pt;
}

#reset{
    margin:auto;
    font-size: 20pt;
    background: #eae6da;
    border-color: #eae6da;
}

.numsquare{
    border-style: solid;
    border-radius: 10px;
    text-align: center;
    font-size: 16pt;
    vertical-align: top;
    width:7.5%;
    height:22%;
    display:inline-block;
}

.square{
    background: #ffffff;
    margin-left: 0.4%;
    margin-right: 0.4%;
    margin-top: 1.0%;
    margin-bottom: 1.0%;
    border-style: solid;
    border-radius: 10px;
    border-color: #888888;
    text-align: center;
    font-size: 100%;
    vertical-align: top;
    width: calc(10% - 1.6%);
    display:inline-block;
}

.square h1{
    font-family: Verdana, sans-serif;
    font-weight: 100;
    font-size: 5vmin;
    color: #888888;
    margin-top: 23%;
}

#space{
    background: #ffffff;
    width:50%;
}

#buffer{
    background: #ffffff;
    border-style: none;
    width:4.5%;
}

#bottombuffer{
    background: #ffffff;
    border-style: none;
    width:13.5%;
}
#spacebuffer{
    border-style: none;
    width:22.5%
}

.vertline{
    display:inline-block;
    background:black;
    margin-bottom:-1vmin;
    width:1vmin;
    height:25vmin;
}

.horzline{
    display:inline-block;
    background:black;
    width:80vmin;
    height:1vmin;
}
#worddiv{
    background: #ffffff;
    margin: 0px;
    text-align:center;
}

#wordinputdiv{
    background: #ffffff;
    margin: auto;
    width:95vmin;
    display:inline-block;
    text-align:center;
}

#currentword{
    font-size: 5vmin;
    margin: 0px;
}

.underlineinput{
    font-size: 3vmin;
    /* border-left:0;
    border-right:0;
    border-top:0; */
    text-align: left;
}
#wordinputlabel{
    font-size: 4vmin;
}
.minimalbutton{
    background:#ffffff;
    font-size: 2vmin;
    border-radius: 0.5vmin;
    border-color: #474747;
    padding-top: 5px;
    padding-bottom: 5px;
}
.minimalbutton:hover{
    background:#4a4a4a;
    border-color: #4a4a4a;
    color:#ffffff;
}
.minimalbutton:active{
    background:#2e2e2e;
    border-color: #2e2e2e;
    color:#ffffff;
}

#wordconfirm{
    background:#0292e0;
    color:#ffffff;
}
#wordconfirm:hover{
    background:#004970;
    border-color: #4a4a4a;
    color:#ffffff;
}
#wordconfirm:active{
    background:#2e2e2e;
    border-color: #2e2e2e;
    color:#ffffff;
}

#slidelabel{
    display: inline-block;
}

.tooltip {
    content:'?';
    position: relative;
    display: inline-block;
    background: #e6e4e4;
    border-width: 1px;
    border-style: solid; 
    border-color: black;
    border-radius:2.2ex;
    font-size: 1.8ex;
    font-weight: bold;
    width:2.4ex;
    text-align:center;
  }
  
.tooltip .tooltiptext {
    visibility: hidden;
    width: 20vmin;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

.setting{
    margin-left: 1vmin;
    text-align: left;
}

.roundedborderbox{
    border-style:solid;
    border-width:0.25vmin;
    border-radius: 0.5vmin;
    border-color: #737373;
}

#settingscontainer{
    padding: 1vmin;
    margin: auto;
    width:50vmin;
    display:block;
    text-align:left;
}

.settingsheader{
    font-size: 3vmin;
    margin:0px;
    margin-top:10vmin;
}

.settingdropdown{
    font-size: 2vmin;
}

#modeselectlabel{
    font-size: 3vmin;
}
#modeselect{
    font-size: 2vmin;
    /* border-left:0;
    border-right:0;
    border-top:0; */
    text-align: left;
}

.shownworksdiv{
    margin:auto;
    margin-top:10vmin;
    text-align: center;
    width:70vmin;
}
#shownworksheader{
    margin:0.5vmin;
    font-size: 3vmin;
    text-align: center;
}
#shownworkslist{
    margin:0.5vmin;
    font-size: 1.5vmin;
    display:inline-block;
    text-align: left;
}
#canvastooltip{
    margin:0.5vmin;
    font-size: 1.5vmin;
    position:fixed;
    display:inline-block;
    text-align: center;
    border-radius: 6px;
    padding: 6px;
    background:#2e2e2e;
    z-index:22;
    visibility: hidden;
}
#canvastooltiptext{
    color: #fff;
    margin: 0px;
}
#jsondataheader{
    margin:0px;
    margin-top:10vmin;
    font-size: 3vmin;
    text-align: center;
}
.typingjsondropdown{
    font-size: 2vmin;
}
#typingjsondiv{
    padding: 1vmin;
    margin: auto;
    width:50vmin;
    display:block;
    text-align:left;
}
#typingjsoncontainer{
    margin:auto;
    margin-top: 1vmin;
    width:90%;
    text-align: left;
}
#typingjsonselectall{
    font-size: 1vmin;
}
#typingjsoncopy{
    font-size: 1vmin;
}
.jsondisplaytextbox{
    width:100%;
    background:#cfcfcf;
    display:block;
}