html{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;

    --main-color: #222;
    --main-color-light: #333;
    --main-color-translucent: rgba(30, 30, 30, 0.5);
}

body{
    background-color: var(--main-color);
    height: 100%;
}

input[type = checkbox]{
    position: relative;
    top: 2px;
}

input[type = radio].hidden{
    display: none;
}

input[type = range]{
    flex-grow: 1;
}

button{
    background-color: rgba(100, 100, 100, 0.5);
    border-radius: 5px;
    height: 32px;
    min-width: 32px;
    line-height: 32px;
    text-align: center;
    border-width: 0px;
    color: white;
    transition: background-color ease-in-out 0.2s;
    position: relative;
    margin-bottom: 20px;
}

button:last-of-type{
    margin-bottom: 0;
}

button:disabled{
    opacity: 0.6;
}

button:disabled:hover{
    cursor: default;
    background-color: rgba(100, 100, 100, 0.5);
}

button:active,
button:focus,
button:active:focus{
    outline: 0;
}

button:hover{
    cursor: pointer;
    background-color: rgba(100, 100, 100, 0.8);
}

button.warning{
    background-color: rgba(221, 73, 47, 0.9);
}

button.success{
    background-color: rgba(219, 216, 41, 0.829);
}

.container{
    display: flex;
    position: fixed;
    top: 0;bottom:0; left:0; right: 0;
}

.canvas-container {
    flex-grow: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#hint-bar{
    position: relative;
    width: 822px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: var(--main-color-light);
    color: white;
}

#main-canvas{
    width: 820px;
    height : 615px;
    margin: 0; 
    border: 1px solid black;
    background-color: white;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    cursor: default;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}

#main-canvas.pick-color{
    cursor: url('./images/pick_color.png') 0 16, pointer;
}

.row-group{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.side-container{
    flex: 286px 2 0;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    background-color: var(--main-color-light);
    height: 100%;
    justify-items: flex-start;
    padding: 20px;
    color: white;
}

.tool-bar{
    flex: 120px 0 0; 
    /* border-bottom: 1px solid rgba(200, 200, 200, 0.4); */
}

.tool-bar>div{
    height: calc(100% - 20px);
    display: flex;  
    flex-direction: column; 
    justify-content: space-between;
}

.layer-bar{
    flex: 150px 1 0;
    display: flex;
    overflow: hidden;
    flex-direction: column; 
}

.layer-tool{
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* For the layer conainter */ 
#layer-container{
    height: 100%;
    background-color: rgba(100, 100, 100, 0.3);
    margin: 10px 0;
    overflow-y: scroll;
}

/* One single layer */ 
.layer-display{
    display: flex;
    align-items: center;
    background-color: rgba(100, 100, 100, 0.3);
    justify-content: space-between;
    height: 55px;
    padding: 10px;
    margin-bottom: 2px;
}

.layer-display.active{
    background-color: rgba(28, 100, 207, 0.3);
}

.layer-display.hidden{
    opacity: 0.7;
}

.layer-display .infor{
   height: 50px;
   display: flex;
   align-items: center;
   justify-items: flex-start;
}

.infor .title{
    border: solid 1px transparent;
   color: white;
   background-color: transparent;
}

.infor .title:focus{
    border-color:#ddd;
    border-radius: 5px;
    outline: 0;
 }

.demo-image{
    display: inline-flex;
    margin-right: 10px;
    height: 50px;
    width: 50px;
    background-color: whitesmoke;
}

.demo-image img{
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}