body {
    color:#000; padding:0; margin:0; 
    font-size:16px;
    text-align: center;
    background-color:#e6ccb3;
}

@media screen and (min-width: 1200px) and (max-width:1600px) {
    body {
        font-size:14px;
    }
}

@media screen and (min-width: 800px) and (max-width:1200px) {
    body {
        font-size:12px;
    }
}

@media screen and (max-width: 800px)  {
    body {
        font-size:10px;
    }
}

#board {
    width: 94%; height: 90vh; z-index: 4;
    box-sizing: border-box;
    color: #fff;
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url('./bg.jpg');
    overflow: hidden;
    position: relative;
    margin-left: auto; margin-right: auto;
    padding-left: 2em; padding-right: 2em;
    box-shadow: 1px 1px 12px rgba(0,0,0,0.7);
    margin-bottom: 45px; margin-top: 1.5em;
    border-radius: 8px;
}

/**************** Buttons  ********************/

#startDayButton {
    background-color: #4CAF50; /* Green */
    cursor: pointer;
    border: none;
    color: white;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    transition: opacity 0.2s ease-out;
}

#tutorialButton {
    background-color: #cc0000; 
    cursor: pointer;
    border: none;
    color: white;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,1), 0 6px 20px 0 rgba(0,0,0,1);
    transition: opacity 0.2s ease-out;
}

input.disabled {
    opacity: 0.0;
}

input[type=button]:hover {
    color: #999;
    box-shadow: 2px 2px 6px 6px rgba(224, 154, 133, 0.2) !important;
}

/**************** WorkSpaces  ********************/

table#workplaces_container {
    width:100%;
    box-sizing: border-box;
}

table#workplaces_container th {
    font-size: 1.5em;
    line-height: 1.8em;
    font-weight: bold;
    color: #eabcae;
    
}

table#workplaces_container td {
    vertical-align: top;
}

#supplies, #shipping {
    padding-top: 7em;
    padding-left: 2em; 
    overflow-y: hidden;
    min-height:25vh; max-height:25vh;
}

#supplies .chip,
#shipping .chip {
    margin-left: -2em !important;
}

#shipping {
    background-image: url('./box.png');
    background-size: 10em ;
    background-position: right bottom;
    background-repeat: no-repeat;
    opacity:1;
}



.workspace_area {
    min-height:25vh; max-height:25vh; 
    margin-top:-1.5em; margin-left:0.2em;  margin-right:0.2em;
    padding-top: 2em; 
    border-radius: 1em;
    background-color: rgba(224, 154, 133, 0.7);
    overflow-y: hidden;
}

.avatar {
    width: 6em;
}
.avatar:hover {
    -webkit-filter: drop-shadow(0px 0px 0.8em rgba(224, 154, 133, 0.5));
    filter:         drop-shadow(0px 0px 0.8em rgba(224, 154, 133, 0.5)); 

}

/**************** Tokens ********************/

.chip, 
.missedjob {
    display: inline-block;
    margin: 0.2em;
    height: 3em;
    width: 3em; 
    border-radius: 1.5em;
}

.chip {
    background-image: url('./token.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}

.missedjob {
    border: 2px rgba(0, 0, 0, 0.4) dashed;
    background-color: rgba(66, 21, 0, 0.1);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

/**************** Dices ********************/
.dice {
    margin-top: -3em;
    padding-top: 1em;
    display: block;
    min-height: 4em;
    z-index: 100;
}

.dice img {
    width: 3.5em; height: 3.5em;
    transition: visibility 0.1s ease-out;
}

.hidden img{
    visibility: hidden;
}

/**************** Stats ********************/
td.stat {
    padding-top: 1em;
    font-size: 1em;
    color: #ffc;
}

th.stat-label {
    font-size: 1em;
    color: #421500;
    background-color: rgba(224, 154, 133, 0.8);
}