html, body, button, input
{
    font-family: 'Roboto Mono', monospace !important;
}

#main
{
    margin: 15px;
    padding: 15px;
}

.group
{
    padding-top: 10px;
    padding-left: 15px;
    padding-bottom: 30px;

    margin-top: 10px;   
    margin-bottom: 10px;
    margin-left: 15px;

    font-size: 12pt;

    width: 640pt;

    border: 1px solid black;
}

.canvas
{
    
}

#canvas-container
{
}

.canvas-wrapper
{
    width: 640pt;

    margin-left: 15px;
    margin-bottom: 15px;

    padding-left: 15px;
    padding-bottom: 15px;
    border: 1px solid black;
}

.canvas-overlay
{

}

.canvas-info-table
{

}

.canvas-info-title
{
    font-size: 14pt;
    padding-left: 25px;
    padding-top: 5px;
}

.canvas-info-content
{
    font-size: 12pt;
    padding-left: 25px;
    padding-top: 5px;
}

#canvas-control
{

}

input
{
    padding-left: 0.5em;
    width: 10em;
}

.input-table th
{
    text-align: left;
    padding-right: 15px;
}

#planks-table tr
{
    border-bottom: 1px solid black;
}

.input
{
    display: inline-block;
    position: relative;
}

.input-slider
{
    width: 15em;
}

.input::after
{
    position: absolute;
    top: 2px;
    right: .5em;
    transition: all .05s ease-in-out;
}

/* move unit more to the left on hover or focus within
   for arrow buttons will appear to the right of number inputs */
.input:hover::after,
.input:focus-within::after 
{
  right: 1.5em;
}

/* handle Firefox (arrows always shown) */
@supports (-moz-appearance:none) 
{
  .input::after {
    right: 1.5em;
  }
}

/* set the unit abbreviation for each unit class */
.input-mm::after 
{
    content: 'mm';
}

.input-legend
{
    font-weight: lighter;
    font-size: 10pt;
}

#button-add-plank
{
    width: 100%;
    height: 100%;

    min-width: 5em;
    min-height: 1.5em;

    margin: 0;
    padding: 0;
}

#button-remove-plank
{
    width: 100%;
    height: 100%;

    min-width: 5em;
    min-height: 1.5em;

    margin: 0;
    padding: 0;

    margin-left: 1.5em;
    
    background: none;
    border: none;
}

#button-clear-planks
{
    background: none;
    border: none;
}

#button-remove-plank:hover, #button-clear-planks:hover
{
    color: red;
}

#button-calculate
{
    min-width: 10em;
    min-height: 2em;
}