/* wheels.css*/

body{
    width:100%; 
    height:100%; 
    background-color:var(--bg-col); 
    text-align: center;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

#main-body-container {
    height: 100vh;
    margin: 0px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
    overflow: hidden;
}

#toolbar-container {
    flex-grow: 0;
}

#edit-area-container {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* calc(100vh - var(--toolbar-height)); */
    /* border: 1px solid green */
}

#edit-canvas-container {
    overflow: auto;
    width: 100%;
    max-height: 100%;
}

#canvas {
    height: 0px;
    width: 0px;
    position: relative;
}

#toolBar{
    width:100%
}

td{
    text-align:center;
    /* border: 1px solid black; */
}

input[type=text], button, select{
    cursor:pointer; 
    padding: 3px
}

select{
    margin: 0px
}

.label{
    font-weight:bold
}

.leftAlign{
    text-align:left
}

.rightAlign{
    text-align:right
}

input[type=range]{
    width:10vw;
    margin: 0px;
}

#brushPreview{
    height:100px; 
    width:100px
}

#textContent, #textLabel{
    display:none
}

#textPreview{
    display: none
}

#previewCell{
    width:120px
}


#popupCont {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
}


/*
button, .button {
    background-color: var(--bg-col);
    border: 2px solid var(--border-col);
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.5em;
    box-shadow: 0px var(--button-travel) var(--border-col);
    margin-bottom: 0px;
    transition: transform 0.1s linear, box-shadow 0.1s linear;
}
button:hover, .button:hover {
    box-shadow: 0px 0px;
    transform: translateY(var(--button-travel));
}
*/