body{font-size:16px}
select{border:1px solid #d3d3d3;background:#fff;padding:5px 3px;font-size:15px;font-family:Arial;font-weight:normal}
.outTable{border-collapse:collapse;width:auto}
.outTable td{white-space:nowrap;padding:4px 10px;color:#333;font-size:15px;border:0}
#previewBox, #previewBoxSol{background:#f5f5f5;width:100%;height:430px;padding:20px;text-align:center}
#previewBox .preview, #previewBoxSol .preview{width:500px;height:430px;margin: 0 auto;}
h3{border-bottom:1px solid #d6d6d6;font-size:15px;font-weight:700;margin-bottom:20px;position:relative}
h3 span{border-bottom:2px solid #00a9e0;padding-bottom:10px;display:inline-block;position:relative;top:1px}
h3+div{margin-bottom:30px}
.errorBox{border:solid 1px #F6D4D4;background:#FBDFDF;color:#B62724;font-weight:bold;font-size:12pt;padding:12px;width:100%;margin:0 0 20px 0;border-radius:3px;display:none}
#loaderb{top:170px;position:absolute;left:calc(50% - 32px)}
.smBtn{color:#888;cursor:pointer;display:inline-block;border:solid 1px #ccc;padding:3px 8px;border-radius:3px;}
option:disabled{color:#999}
.tool-title{margin:0 0 5px;font-size:26px;font-style:normal;font-weight:700;line-height:1.2;color:#2f3235;}
.tool-desc{margin:0 0 30px;font-size:16px;line-height:1.2;color:#2f3235;padding:0 0 5px;border-bottom:solid 1px #f5f5f5}
#control_box{margin:5px 0 0;background-color:#f0f0f0;padding:10px;float:left;width:100%;text-align:center}
#control_box ul{list-style:none;padding:0;margin:0}
#control_box li{float:left;font-size:18px;cursor:pointer;border:1px solid #ddd;background-color:#fff;margin:2px;text-align:center;line-height:38px;width:40px;height:40px}
#control_box li.selected{background-color:#ff9}
.su-preview td:not(.su-filled){cursor:pointer}
#solResult{text-align:center;margin-top:10px}
#wrapper{text-align:center;margin:0 auto 0;padding:0;width:100%}
.sp-replacer{width:54px;padding: 5px;border-color: #d3d3d3;}
.sp-dd{padding: 0px 0;}
.sp-preview{height: 16px;}
.colorSwatch{width:24px;height:24px;margin:2px;box-shadow:1px 1px 3px 0 #ccc}
#previewBox > table{background: #fff;box-shadow: 0px 0px 5px #ccc;}

.toolWrapBox .outerBox{background-color:#f9f9f9;border:5px solid #e7e7e7;border-radius:20px;margin:50px 0;padding:20px}
.toolWrapBox .outerBox h3{border:1px solid #f0f0f0;background:#ececec;font-size:15px;font-weight:700;margin-bottom:20px;position:relative;padding:5px}
#game{margin:auto;width:550px;height:750px;display:grid;grid-row-gap:50px;padding:20px 0 0;grid-template-rows:50px 1fr 50px;grid-template-columns:repeat(3,1fr)}
#setup-form{width:540px;height:540px}
#title{grid-column:1 / 4;text-align:center;font-size:50px}
canvas,form{grid-column:1 / 4;grid-row:2 / 3}
canvas{position:relative;margin:60px auto auto}
form{display:grid;padding:100px;text-align:center;z-index:100;grid-gap:10px}
#result-form{display:none;background-color:rgba(220,220,220,.9);margin-top:20px}
form input,form select{background-color:#fff;font-size:20px;border:2px solid silver;border-radius:6px}
form h5{font-size:50px;text-transform:uppercase;align-self:end}
form select{display:block;margin:auto;width:100%;text-align:center;text-align-last:center}
form input{padding:5px 16px;text-transform:uppercase;cursor:pointer}
canvas{display:none}
.score{display:grid;grid-gap:10px;text-align:center;font-size:20px;text-transform:uppercase}
.score h4{font-size:30px}
#score-player-1{grid-column:1;padding-left:50px}
#score-player-2{grid-column:3;padding-right:50px}
#restart{cursor:pointer;}