body{
    padding: 4px;
}

.no_grow {
    flex-grow: 0 !important;
}

#main_frame{
    display: flex;
    /* background-color: DodgerBlue; */
    height: 100%;
}

#command_frame{
    flex: 40%;
    /* background-color: green; */
    padding: 4px;
    border-right: 1px solid lightgray;
    overflow-y: scroll;
}

#command_frame table  {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid black;
    margin-bottom: 8px;
}

#command_frame table td, #command_frame table th {
    border: 1px solid black;
    text-align: center;
}

#command_frame table td input{
    width: 100%;
}

#command_frame table td button{
    background-color: unset;
    border: 0px;
    cursor: pointer;
}

#canvas_frame{
    position: relative;
    flex: 60%;
    padding: 4px;
}

#canvas_frame canvas{
    width: 100%;
    height: 100%;
}

#canvas_frame button {
    position: absolute;
    top: 12px;
    right: 12px;
    height: 30px;
    width: 30px;

    cursor: pointer;

    border-radius: 5px;
    border: 1px solid black;
    background-image: url("refresh.png");
    background-repeat: no-repeat;
    background-size: contain;
}

#toolbox {
    position: absolute;
    border: 1px solid black;
    border-radius: 5px;
    padding: 8px;
    padding-top: 10px;
    margin-top: 16px;
}

#toolbox .toolbox_title {
    position: absolute;
    top: calc(1em / -2 - 2px);
    left: 10px;
    background-color: #FFFFFF;
}

.input_field {
    display: flex;
}

.input_field div:last-child{
    flex: 1;
    flex-grow: 1;
    margin-left: 4px;
}