* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background-color: rgb(45, 45, 46);
    font-family: Arial, sans-serif;
    height: 100%;
    margin: 0;
}

.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
}

.title-row{
    height: 100px;
}

.toolbar-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 5px;
}

.row {
    /* fixed height or content height */
    background-color: #222222;   
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid rgb(100, 100, 100);
    padding: 20px;
    text-align: center;
    color: rgb(200, 200, 200);
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: bold;
    font-size: small;
}

.canvas-row {
    flex: 1;           /* fills remaining space */
    overflow: auto;
    position: relative; /* important */
    /* align-items: baseline;
    justify-content: baseline; */
    padding: 1px;
}

.floating {
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: 1000;
    padding: 10px;
    background: rgba(26, 25, 25, 0.6);
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 40px;
}

.floating-bottom{
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    padding: 10px;
    background: rgba(26, 25, 25, 0.6);
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;    
}

.drawer-container{
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 1000;
}

.drawer{
    position: absolute;
    top: 164px;
    left: 12px;
    padding: 10px;
    background: rgba(26, 25, 25, 0.6);
    border-radius: 5px;
    flex-direction: row;
    align-items: center;
}

.hidden{
    display: none;
}

.drawer-shown{
    display: flex;
}

.fit-controls{
    display: flex; 
    flex-direction: row; 
    margin-left: auto; 
    padding-right: 10px;
}


.download-button{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(55, 111, 85);
    color: white;
    border: none;
    cursor: pointer;
    pointer-events: all;
}

.download-button-dsabled{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: none;
    pointer-events: none;
    background-color: #444444;
    color: #6f6f6f;
}

.toolbar-button{
    width: 50px;
    height: 30px;
    margin-right: 2px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.color-button-container{
    width: 30px;
    height: 30px;
    margin: 5px;
    background-color: red;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
}

.color-dlg{
    width: 80px; 
    height: 80px; 
    border: none;
    transform: translate(-50%, -50%);

}

.open-button{
    background-color: rgb(8, 115, 209);    
}

.apply-button{
    height: 30px;
    margin-right: 2px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(55, 111, 85);
    width: 100px;
    margin: 5px;
}

.apply-button:hover{
    background-color: rgb(79, 158, 121);
}

.reset-button{
    height: 30px;
    margin-right: 2px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100px;
    background-color: rgb(151, 103, 60);   
    margin: 5px;
}

.reset-button:hover{
    background-color: rgb(182, 123, 72);   
}

.toolbar-button:hover{
    background-color: rgb(11, 135, 243);    
}

label{
    color: white;
    font-size: small;
}

.toolbar-nud{
    height: 30px;
    background-color:rgb(211, 213, 213);
    border-radius: 5px;
    font-weight: bold;
    font-size: small;
    padding: 5px;
    width: 40px;
    margin-right: 5px;
}

.toolbar-combo{
    height: 28px;
    background-color:rgb(211, 213, 213);
    border-radius: 5px;
    font-weight: bold;
    font-size: small;
    padding: 5px;
    width: 70px;
    margin-right: 5px;
}

.toolbar-chk{
    height: 20px;
    width: 20px;
    margin-left: 5px;
    margin-right: 1px;
}

.canvas-frame{
    /* flex: 1; */
    /* overflow: auto; */
    width: 100%;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    position: absolute;
}

.menu-sep{
    border-right-width: 1px; 
    border-color: rgb(89, 89, 89); 
    border-style: solid; 
    height: 20px; 
    margin-left: 5px;
}

.canvas{
    /* width: 100%; */
    /* height: 100%; */
    /* display: block; */
}

.generic-row{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.generic-col{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 5px;
    width: 100%;
}

.controls-frame{
    display: flex;
    flex-direction: column;
}

.controls-row{
    display: flex;
    flex-direction: row;
    width: 100%;
}

.controls-col{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px;
    justify-content: center;
}