*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
}

html{height:100%}

body{
    padding:0;
    margin:0;
    background-color: #ffffff;
    background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MDAnIGhlaWdodD0nNDAwJyB2aWV3Qm94PScwIDAgNDAwIDQwMCc+Cgk8ZGVmcz4KCQk8cGF0dGVybiBpZD0nYmx1ZXN0cmlwZScgcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgeD0nMCcgeT0nMCcgd2lkdGg9JzQnIGhlaWdodD0nNCcgdmlld0JveD0nMCAwIDQgNCcgPgoJCQk8bGluZSB4MT0nLTEnIHkxPSctMScgeDI9JzQnIHkyPSc0JyBzdHJva2U9JyNmZmZmZmYnIHN0cm9rZS13aWR0aD0nMScvPgoJCQk8bGluZSB4MT0nMycgeTE9Jy0xJyB4Mj0nNScgeTI9JzEnIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScxJy8+CgkJCTxsaW5lIHgxPSctMScgeTE9JzMnIHgyPScxJyB5Mj0nNScgc3Ryb2tlPScjZmZmZmZmJyBzdHJva2Utd2lkdGg9JzEnLz4KCQk8L3BhdHRlcm4+IAoJCTxmaWx0ZXIgaWQ9J2Z1enonIHg9JzAnIHk9JzAnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J3R1cmJ1bGVuY2UnIGJhc2VGcmVxdWVuY3k9Jy41JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+CgkJCTxmZUNvbnZvbHZlTWF0cml4IG9yZGVyPSczLDMnIGtlcm5lbE1hdHJpeD0nMCwtLjI1LDAsLS4yNSwyLC0uMjUsMCwtLjI1LDAnLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjYmx1ZXN0cmlwZSknLz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNmdXp6KScgb3BhY2l0eT0nMC4wOScvPgo8L3N2Zz4=');
    font-family:"Noto Sans", Helvetica, Arial, sans-serif;
}

#container{
    font-size:0;
    -webkit-filter:blur(10px);
    filter:blur(10px);
}

.square{
    text-align:center;
    display:inline-block;
    float:left;
}

.promotion-square{
    float:none;
}

.captured-pieces{position:absolute}

#board{
    border:1px solid black;
    border-bottom:none;
    position:absolute;
    box-shadow:0 0 5px rgba(0,0,0,0.2);
}
    .white{background:#FCFBE3}
    .black{background:#CDAF95}

.board-square{
    transition:0.1s;
    transition-property:background;
}

#local-info{
    position:absolute;
    padding-top:30px;
    display:none;
    -webkit-filter:blur(10px);
    filter:blur(10px);
}

#player{
    font-size:28pt;
    font-weight:bold; 
    color:black;
    -webkit-text-fill-color: white;
    text-fill-color: white;
    -webkit-text-stroke:1px black;
    text-stroke:1px black;
}

#check{
    font-size:20pt;
    margin-top:30px;
    visibility:hidden;
    color:black;
}

#check-label{
    font-weight:bold;
    color:black;
    -webkit-text-fill-color: white;
    text-fill-color: white;
    -webkit-text-stroke:1px black;
    text-stroke:1px black;
}

#promotion-box{
    visibility:hidden;
    opacity:0;
    transition:0.1s;
    border:1px solid black;
    font-size:0;
    position:absolute;
    cursor:pointer;
}

#load-prompt, #newLocalGame-prompt, #newOnlineGame-prompt, #createdOnlineGame-prompt{
    position:absolute;
    background:rgba(255,255,255,0.7);
    z-index:99;
    box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 5px;
    transition:0.1s;
    transition-property:opacity;
    max-height:85%;
    overflow:scroll;
}

.load-prompt-option{
    width:100%;
    cursor:pointer;
    padding:20px 40px 20px 20px;
}

.load-prompt-explanation {
    font-size:10pt;
}

#newLocalGame-prompt, #newOnlineGame-prompt, #createdOnlineGame-prompt{
    display:none;
    opacity:0;
    padding:20px;
}

.prompt-title{
    font-size:20pt;
    padding-right:40px;
}

.prompt-label{
    display:inline-block;
    font-size:14pt;
    padding-right:10px;
}

.prompt-label-right{
    display:inline-block;
    font-size:14pt;
    padding-left:10px;
}

.prompt-label-small{
    font-size:12pt;
}

.prompt-text{
    display:inline-block;
    background:none;
    border:none;
    outline:none;
    font-family:"Noto Sans", Helvetica, Arial, sans-serif;
    font-size:14pt;
}

.prompt-textarea{
    background:none;
    border:none;
    outline:none;
    font-family:"Noto Sans", Helvetica, Arial, sans-serif;
    font-size:14pt;
    resize:none;
    height:80px;
}

.prompt-button{
    display:inline-block;
    padding:5px 10px;
    color:rgba(0,122,255,1);
    cursor:pointer;
    transition:0.2s;
}

.prompt-okay-button{
    font-weight:bold;
}

.prompt-button:hover{
    color:rgba(0,122,255,0.5);
}

.checkbox{
    height:16px;
    width:14px;
    border:1px solid black;
    border-radius:4px;
    display:inline-block;
    cursor:pointer;
    background:rgba(255,255,255,1);
    color:rgba(0,0,0,1);
    line-height:6px;
    padding-left:2px;
    font-size:16pt;
    vertical-align:2px;
    transition:0.2s;
}

.radio{
    height:16px;
    width:16px;
    border:1px solid black;
    border-radius:16px;
    display:inline-block;
    cursor:pointer;
    background:rgba(255,255,255,1);
    color:rgba(0,0,0,1);
    line-height:14px;
    text-align:center;
    font-size:20pt;
    vertical-align:-5px;
    transition:0.2s;
}

.radio-unchecked{
    color:rgba(0,0,0,0);
    background:rgba(255,255,255,0);
}

.temp-cancel{
    color:rgba(180,180,180,1);
    cursor:default;
}

.greyed-out{color:rgb(180,180,180)}

#log{
    width:215px;
    overflow:auto;
    font-size:0;
}

.log-cell{
    display:inline-block;
    padding:5px;
    width:70px;
    text-align:center;
    font-size:12pt;
}

.log-cell:nth-child(3n - 1){
    background:rgba(255,255,255,0.6);
}

.log-cell:nth-child(3n){
    background:rgba(200,200,200,0.1)
}

.small{font-size:8pt}
#invitation-response {
    font-size:14pt;
    position:absolute;
    display:none;
}

#warning{display:none}

.axis-square{
    font-size:10pt !important;
    color:rgba(200,200,200,1);
}