td {max-width:210px}
td.right {border-right: 1px solid black;}
h3 {text-align: center; cursor:pointer; }
h3 > input {
   border: none;
   font-size: 1.2em;
   font-family: Times New Roman;
   text-align: center;
   width: 100%;
   font-weight: bold;
   width: calc(100% - 60px);
   box-sizing: border-box;
}
h3 > span {
    box-sizing: border-box;
    display:inline-block;
    height:1em;
    width: 30px;
    background-position: center center;
    background-repeat:  no-repeat;
    background-size: contain;
    background-image: url('left.png');
}
h3 > span:nth-of-type(2) {
    transform: rotateZ(180deg);
}

td:last-of-type > h3 > span:last-of-type, td:first-of-type > h3 > span:first-of-type {
 visibility: hidden;
}

td {
    vertical-align: top;
 }

td > div {
    box-sizing: border-box;
    display:block;
    width: 100%;
}

td > div > span {
    display: inline-block;
    width: 25%;
    box-sizing: border-box;
    margin-bottom: 5px;
}

td > div > span > input, td > div > span > select {
    width: 100%;
    box-sizing: border-box;
}

td > div.initial > span:nth-of-type(1n) {
   width: 50%;
   padding-left: 10px;
 }
 td > div.initial > span:nth-of-type(2n) {
   width: 50%;
 }
 td > div.initial > span:nth-of-type(2n) > input {
   width: 50%;
 }

ul#addremovebuttons li > span:first-of-type {margin-right: 20px;}
ul#addremovebuttons li {margin-bottom: 5px;}

table#units th {
   text-align: left;
   font-size: 1.6em;
   text-decoration: underline;
}

table#units td > p {
   margin-top: 0px;
   margin-bottom: 5px;
}

table#units td > p > input {
 display: block;
}

span.openbutton, span.savebutton, span.copybutton, span.pastebutton, span.addbutton, span.removebutton {
   display: inline-block;
   width: 40px;
   height: 40px;
   background-size: contain;
   background-repeat: no-repeat;
   cursor: pointer;
   transition: all 0.2s linear;
}

:root {
   --canpaste: 0.4;
}

span.openbutton {
   background-image: url('open.png');
}

span.savebutton {
   background-image: url('save.png');
   margin-left:10px;
}

span.copybutton {
   background-image: url('copy.png');
   margin-left:10px;
}

span.pastebutton {
   background-image: url('paste.png');
   margin-left:10px;
   opacity: var(--canpaste);
}

span.addbutton {
    background-image: url('add.png');
} 

span.removebutton {
    background-image: url('del.png');
    margin-left:10px;
}

span.openbutton:hover, span.savebutton:hover,
span.copybutton:hover, span.pastebutton:hover,
span.addbutton:hover, span.removebutton:hover
{
   transform: scale(1.2);
}

div.dialogbox {
   z-index: 5;
   position: fixed;
   width: 500px;
   height: 300px;
   border: 2px solid navy;
   left: 50%;
   top: 100px;
   transform: translateX(-50%);
   background-color: aliceblue;
   box-shadow: darkgray 5px 5px;
   display: none;
}

div.dialogbox > div:first-of-type {
   background-color: cornflowerblue;
   color: white;
   padding: 6px;
   font-weight: bold;
   position: relative;
}

div.dialogbox > div:first-of-type > span {
   position: absolute;
   cursor: pointer;
   display: block;
   width: 30px;
   text-align: center;
   border: 1px solid white;
   right: 1px;
   top: 1px;
   bottom: 1px;
   padding: 3px;
}

div.dialogbox > div:nth-of-type(2) {
   padding: 15px;
   bottom: 50px;
   position: absolute;
   top: 30px;
   border: 1px solid black;
   width: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
}

div.dialogbox > div:nth-of-type(2) > div {
   width: 100%
}

div.dialogbox > div:nth-of-type(2) > div#filelist, div.dialogbox > div:nth-of-type(2) > div#openfilelist {
   border: 1px solid cadetblue;
   box-sizing: border-box;
   position: relative;
   margin-top: 5px;
   flex: auto;
   overflow-y: scroll;
}

div.dialogbox > div:nth-of-type(2) > div#filelist > ul, div.dialogbox > div:nth-of-type(2) > div#openfilelist > ul {
   padding-left: 0px;
   margin-left: 5px;
   margin-right: 5px;
}

div.dialogbox > div:nth-of-type(2) > div#filelist > ul > li, div.dialogbox > div:nth-of-type(2) > div#openfilelist > ul > li {
   display: block;
   border-bottom: 1px solid blueviolet;
   margin-left: 0px;
   padding-top: 3px;
   padding-bottom: 3px;
   cursor: pointer;
}

div.dialogbox > div:nth-of-type(2) > div#filelist > ul > li:last-of-type, div.dialogbox > div:nth-of-type(2) > div#openfilelist > ul > li:last-of-type {
   border-bottom: none;
}

div.dialogbox > div:nth-of-type(2) > div#filelist > ul > li > span:first-of-type, div.dialogbox > div:nth-of-type(2) > div#openfilelist > ul > li > span:first-of-type {
   float: right;
   margin-left: 10px;
   font-family: courier;
}

div.dialogbox > div:nth-of-type(2) > div#filelist > ul > li.selected, div.dialogbox > div:nth-of-type(2) > div#openfilelist > ul > li.selected {
   background-color: cornflowerblue;
   color: white;
   font-weight: bold;
}

div.dialogbox > div:last-of-type {
   position: absolute;
   left: 0px;
   right: 0px;
   bottom: 0px;
   padding: 10px;
   text-align: center;
}

div.dialogbox > div:last-of-type > span:first-of-type {
   display: block;
   position: absolute;
   left: 20%;
   padding-left: 20px;
   padding-right: 20px;
   bottom: 10px;
   border: 1px solid blueviolet;
   padding-top: 5px;
   padding-bottom: 5px;
   cursor: pointer;
   background-color: cornflowerblue;
   color: white;
   border-radius: 10px;
   width: 14%;
}

div.dialogbox > div:last-of-type > span:last-of-type {
   position: absolute;
   right: 20%;
   padding-left: 20px;
   padding-right: 20px;
   bottom: 10px;
   border: 1px solid blueviolet;
   padding-top: 5px;
   padding-bottom: 5px;
   cursor: pointer;
   background-color: cornflowerblue;
   color: white;
   border-radius: 10px;
   width: 14%;
}

div.dialogbox > div:last-of-type > span, div.dialogbox > div:first-of-type > span {
   transition: all 0.2s linear;
}

div.dialogbox > div:last-of-type > span:hover, div.dialogbox > div:first-of-type > span:hover{
   transform: scale(1.2);
}

.error {
   background-color: crimson;
   color: white;
 }