:root {
    --title-color:silver;
    --title-back:dimGrey;
    --title-dark-color:rgb(183, 182, 182);
    --title-dark-back:rgb(39, 39, 39);
    --trash-color:silver;
    --trash-back:darkred;
    --heap-back:coral;
    --name-color:black;
    --name-back:lightgrey;
    --name-selected-color:lightgrey;
    --name-selected-back:black;

}

body {
    font-family: "Trebuchet MS", sans-serif;
    margin: 0px 0px 0px 30px;
}


select {
    width: 200px;
}

input {
    height: 30px;
    width: 100%;
    font-size: 0.7em;
}

.fakewindowcontain .ui-widget-overlay {
    position: absolute;
}

.flex-container {
    display: flex;
}

/* Main menu */
.button {
    font-size: 0.6em;
}

.btn-active {
    background: crimson
}

#menu {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Titles */
#title {
    width: 100%;
    background-color: var(--title-dark-back);
    color: var(--title-dark-color);
    font-size: 0.9em;
}

.title {
    font-size: 0.55em;
    text-align: left;
    padding-left: 20px;
    width: 100%;
    background-color: var(--title-back);
    color: var(--title-color);
}

/* Info */
#infoPanel {
    flex-direction: row;
    flex-wrap: wrap;
}

#info {
    width: 100%;
    background-color: var(--title-dark-back);
    color: var(--title-dark-color);
    font-size: 0.7em;
}

/* Navigation */
#naviset, #speedset, #qualityset, #footset {
    font-size: 0.5em;
}
#speedset, #qualityset, #footset {
    flex-direction: row;
    height: 50px;
}

/* Drawing */
#drawing-area {
    flex-direction: column;
    margin-left: 50px;
    width: 1700px;
    height: 1100px;
    background-color: white;
}

#stage{
    width: 1700px;
    height: 1000px;
    position: relative;
}

canvas{
    position: absolute;
    width: 1700px;
    padding: 0;
    margin: auto;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#back-canvas{ 
    height: 1100px;
    z-index: 1;
}

#mid-canvas{ 
    height: 1100px;
    z-index: 2;
}

#front-canvas{ 
    height: 1100px;
    z-index: 3;
}

#word-canvas{ 
    height: 160px;
    width: 1700px;
    margin-top: 0px;
    margin-left: 0px;
    z-index: 4;
    background-color: rgb(253, 217, 144);
}

#angleSlider{
    margin-top: 15px;
    margin-left: 15px;
    width: 300px;   
}

#player {
    margin-left: 30%;
    width: 40%;
    height: 60px;
}

#playSlider {
    width: 300px;
}

#subsigns, #curves, #signs, #dims {
    flex-direction: column;
}


#droppable {
    flex-direction: column;
}

#preview{
    flex-direction: column;
}

.subsign {
    margin: 3px 3px 3px 0;
    padding: 1px;
    float: left;
    width: 100%;
    height: 70px;
    font-size: 0.6em;
    text-align: left;
    background: #ffffff;
}

.addition {
    margin: 3px 3px 3px 0;
    padding: 1px;
    float: left;
    width: 100%;
    height: 60px;
    text-align: left;
    background: lightgray;
}

.addition li {
    list-style-type: none;
    margin: 3px 3px 3px 0;
    padding: 1px;
    float: left;
    width: 100%;
    height: 85%;
    text-align: center;
}

.addition .ui-selecting {
    background: #FECA40;
}

.addition .ui-selected {
    background: var(--name-selected-back);
    color: var(--name-selected-color);
}

#spinners {
    padding-left: 20px;
    margin: 0%;
    width: 200px;
    height: 200px;
    flex-direction: column;
}

.spinner-label {
    width: 100px;
    margin: 0;
    font-size: 0.7em;
}

/* Dialog */
#dialog-link {
    padding: .4em 1em .4em 20px;
    text-decoration: none;
    position: relative;
}

#dialog-link span.ui-icon {
    margin: 0 5px 0 0;
    position: absolute;
    left: .2em;
    top: 50%;
    margin-top: -8px;
}

label,
input {
    display: block;
}

fieldset {
    padding: 0;
    border: 0;
    margin-top: 25px;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

/* drag and drop */

.draggable {
    width: 90px;
    height: 80px;
    padding: 5px;
    float: left;
    margin: 0 10px 10px 0;
    font-size: .9em;
}

.ui-widget-content p {
    margin: 0;
}

#trash {
    width: 100%;
    height: 100px;
    margin: 10px 0px 10px 0px ;
    background: var(--trash-back);
    color: var(--trash-color)
}

/* Library */

#library {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 2300px;
}

#library li {
    margin: 3px 3px 3px 0;
    padding: 1px;
    float: left;
    width: 120px;
    height: 50px;
    font-size: 0.6em;
    text-align: center;
}

#library .ui-selecting {
    background: #FECA40;
}

#library .ui-selected {
    background: var(--name-selected-back);
    color: var(--name-selected-color);
}

#heap, #dimsHeap {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100px;
    background: var(--heap-back);
}

#heap li, #dimsHeap li{
    margin: 3px 3px 3px 0;
    padding: 1px;
    float: left;
    width: 100%;
    height: 40px;
    font-size: 0.6em;
    text-align: center;
}

#heap .ui-selecting, #dimsHeap .ui-selecting {
    background: #FECA40;
}

#heap .ui-selected, #dimsHeap .ui-selected{
    background: var(--name-selected-back);
    color: var(--name-selected-color);
}


/* -- */


/* Main Layout */

.item1 {
    grid-area: menu;
}

.item2 {
    grid-area: header;
}

.item3 {
    grid-area: left;
}

.item4 {
    grid-area: center;
}

.item5 {
    grid-area: right;
}

.item6 {
    grid-area: footer;
}

.item7 {
    grid-area: navi;
}

.grid-container {
    display: grid;
    grid-template-rows: 100px 1090px 70px;
    grid-template-columns: 10% 30% 20% 18% 10% 10%;
    grid-template-areas:
        'menu header header header navi navi'
        'left center center center center right'
        'footer footer footer footer footer footer';
    gap: 5px;
    background-color: rgba(255, 255, 255, 1.00);
    padding: 5px;
}

.grid-container>div {
    background-color: rgba(255, 255, 255, 1.0);
    text-align: center;
    padding: 0;
    font-size: 30px;
}