/* V1.0 */
#section_input {
    grid-column: 1/3;
    overflow: auto;
}

#section_output {
    grid-column: 3/5;
    overflow: auto;
}

#section_input, #section_output {
    border: solid black 1px;
    border-radius: .5em;
    margin: .5em;
    padding: .5em;
    padding-bottom: 0;
    display: grid;
}

#out_rec {
    margin: .7em;
    padding: .5em;
    background-color: #084a7e;
    color: white;
    border-radius: .5em;
    border: solid black 1px;
}

#out_rec:empty {
    margin: 0;
    padding: 0;
    background-color: whitesmoke;
    color: white;
    border: none;
}

.ul_data {
    list-style-type: none;
    margin: .1em;
    padding: .1em;
    align-self: start;
}

.li_input, .li_output {
    margin: .3em;
    padding: .3em;
}

.li_input input, .li_input select, .li_output output {
    float: right;
}

.li_input input {
    width: 3em;
}

.li_input select {
    width: 3em;
    margin-left: 0;
    padding-left: 0;
}

#form_input, #form_output {
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-rows: min-content min-content min-content auto;
}

.ul_data li:nth-of-type(odd) {
    background-color: rgb(221, 219, 219);
}

.ul_button {
    list-style-type: none;
    margin: 0;
    padding: 0;
    align-self: flex-end;
}

.ul_button li {
    margin-bottom: .3em;
    padding: .1em;
}

input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

li summary {
    outline: none;
}

li details>summary {
    list-style-type: none;
}

li details>summary::-webkit-details-marker {
    display: none;
}

li details>summary::before {
    content: '\1F6C8\A0';
}

li details[open]>summary::before {
    content: '\2A09\A0';
}

summary{
    outline: none;
    cursor: pointer;
}

li{
    overflow: hidden;
}

@media (max-width: 55em) {
    /*I/O data*/
    section, #section_input, #section_output {
        display: block;
        margin-left: 0;
        margin-right: 0;
        padding: .1em;
    }
    #section_input label, #section_output label {
        width: unset;
        padding-bottom: .2em;
    }
    output, input, select {
        float: right;
    }

    li details > summary::before{
        content: "\2139\a0";
    }
}

@media(max-width: 20em) {
    .li_input input, .li_input select, .li_output output {
        display: block;
        float: unset;
    }
}