html, body {
    overflow: hidden;
    background-color: #33334C;
    width:    100%;
    height:   100%;
    margin:   0;
    padding:  0;
}

div {
    overflow: hidden;
    background-color: #33334C;
    border:   0;
    padding:  0;
}

.Toolbar {
    background-color: #33334C;
    color:            #d0d0d0;

    font-family:   Arial, Helvetica, sans-serif;
    font-size:     12px;

    position:      absolute;
    width:         100%; 
    height:        95px; 
    padding-top:   5px;	
}

.OptionTitle {
	font-size:     14px;    
}

.OptionsContainerTitle {
	/* font-size:     14px; */
	font-size:     13px;    	
}

.OptionsContainer { 
    border:         1px solid #aaaaaa;	
    height:         30px;
    padding-top:    3px;	
    padding-bottom: 3px;
}

.ShowHideOptionsCheckBox { 
    padding-top:   5px;	
}

#generate_btn_id { 
    background-color: #90EE90;
}

#save_btn_id { 
    background-color: #ADD8E6;
}

#animate_btn_id { 
    background-color: #FFD580;
}

#cgi_mode_title_id {
	color:         #d0d0d0;
    font-family:   Arial, Helvetica, sans-serif;
	font-size:     14px;  
}

#canvasZone {
    position:      absolute;
    top:           80px; 
    bottom:        0;
    width:         100%;
    height:        calc(100%-80px);
}

#renderCanvas { 
    width:         100%;
    height:        100%;  
    touch-action:  none;
}
  
.Mnemonics {
    background-color: #33334C;
    font-family: Arial, Helvetica, sans-serif;
    font-size:   20px;
    width:       100%;    
}

.MnemonicsInputField {
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size:   15px;
    width:       70%;    
}