:root {
    --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -6 16 16"><line y1="-3" y2="3" stroke="red" transform="rotate(15)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(75)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(-45)"></line></svg>');
    --trash: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-trash-can-outline" width="24" height="24" viewBox="0 0 24 24"><path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" /></svg>')
}

a.foot:link,
a.foot:visited {
    color: var(--footfg)
}

input:not([type=file]) {
    background-color: var(--fldbg);
    color: var(--fldfg)
}

input[type=checkbox],
input[type=radio] {
    width: 1em
}

input[type=color] {
    width: 30%;
    padding: 5px
}

select {
    background-color: var(--fldbg);
    color: var(--fldfg)
}

input:invalid {
    border: 1px solid var(--fldred)
}

body {
    font-family: verdana;
    margin: auto;
    background: var(--bg);
    color: var(--txt)
}

.c,
body {
    text-align: center
}

.clear {
    clear: both
}

.foot {
    background-color: transparent!important;
    all: revert;
    float: right;
    margin: 0;
    font-size: .6em
}

#doc>a.red,
button.red {
    background-color: var(--btnred)
}

#doc>a.red:focus,
#doc>a.red:hover,
button.red:focus,
button.red:hover {
    background-color: var(--btnredhi)
}

#doc {
    text-align: left;
    margin: 0 auto;
    display: inline-block;
    color: var(--txt);
    width: 80%;
    min-width: 300px;
    max-width: 600px;
    display: table
}

td {
    font-size: .87rem;
    padding-bottom: 0;
    padding-top: 0
}

th {
    padding-top: .5em
}

* {
    box-sizing: border-box
}

input,
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: .6rem;
    resize: vertical
}

label {
    padding: 12px 18px 12px 0;
    display: inline-block
}

.required {
    background-image: var(--star);
    background-size: 1.5em 1.5em;
    background-position: right;
    background-repeat: no-repeat
}

.edit:before {
    content: "\0000a0"
}

.edit {
    background-image: var(--edit);
    background-size: 1.5em 1.5em;
    background-position: left;
    background-repeat: no-repeat;
    width: 1.5em;
    display: inline-block;
    text-decoration: none
}

.trash:before {
    content: "\0000a0"
}

.trash {
    background-image: var(--trash);
    background-size: 1.5em 1.5em;
    background-position: left;
    background-repeat: no-repeat;
    width: 1.5em;
    display: inline-block;
    text-decoration: none
}

#doc>a,
.dist>a,
button,
input[type=submit] {
    padding: 12px;
    border: 1px solid var(--btnbrd);
    border-radius: .6rem;
    background-color: var(--btnbg);
    color: var(--btnfg);
    font-size: 1rem;
    width: 100%;
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none
}

#doc>a:hover,
.dist>a:hover,
button:hover,
input[type=submit]:hover {
    background-color: var(--btnbghi)
}

.container {
    background-color: var(--grpbg);
    color: var(--grpfg);
    border-radius: .6rem;
    padding: 10px;
    margin: 20px 0
}

.dist {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.dist>a {
    flex-grow: 1;
    margin: 0 6px
}

.dist>a:first-child {
    margin-left: 0
}

.dist>a:last-child {
    margin-right: 0
}

.col-25 {
    float: left;
    width: 25%;
    text-align: right;
    margin: 0
}

.col-75 {
    margin: 0;
    float: left;
    width: 75%
}

.row:after {
    content: "";
    display: table;
    clear: both
}

.row {
    font-size: .833rem;
    margin: 5px
}

.gap,
.row:last-of-type {
    margin: 5px 5px 20px
}

.error,
.info,
.success,
.validation,
.warning {
    border: 1px solid;
    margin: 10px auto;
    padding: 15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    max-width: 500px
}

.info {
    color: #00529B;
    background-color: #BDE5F8
}

.success {
    color: #4F8A10;
    background-color: #DFF2BF
}

.warning {
    color: #9F6000;
    background-color: #FEEFB3
}

.error {
    color: #D8000C;
    background-color: #FFD2D2
}

@media screen and (max-width:800px) {
    .col-25,
    .col-75,
    input[type=submit] {
        width: 100%;
        margin-top: 0
    }
    .col-25 {
        text-align: left
    }
    label {
        padding: 5px 18px 5px 0
    }
}