/* ---------------------------------------------- */

.feed,
.backgrounding {
    --color0           : #0C0C0D;
    --color1           : #E2211C;
    --color2           : #F3A8A4;
    --color3           : #F9D4D2;
    --color4           : #FCE9E8;
    --color5           : #FFFFFF;
    --text             : #58595B;
    --popup-color      : #DEDEDE; 

    --controls__background-color : var(--color5);
    --controls__border           : none;

    margin-inline      : auto;
}

/* ---------------------------------------------- */

.finishing {
    --color0           : #231F20;
    --color1           : #58595B;
    --color2           : #BCBDBD;
    --color3           : #DEDEDE;
    --color4           : #EFEFEF;
    --color5           : #FFFFFF;
    --text             : #58595B;
    --popup-color      : #F9D4D2; 

    --controls__background-color : var(--color5);
    --controls__border           : none;

    margin-inline      : auto;
}

/* ---------------------------------------------- */

:root {
    --font-size        : 1.0rem;
    --h3-font-size     : 1.5rem;
}
@media screen and (width > 768px) {
    :root {
        --font-size    : 1.5rem;
        --h3-font-size : 2.0rem;
    }
}

.red {
    color              : #E2211C;
}

.textbox,
.combobox {
    padding            : 0;
    margin             : 0;
    text-align         : center;
    line-height        : 1.5;
    height             : 100%;
    font-size          : var(--font-size);
}

.textbox::selection,
.combobox::selection {
    background-color   : var(--color1);
    opacity            : 0.5;
}

/*span {
    font-size          : var(--font-size);
}*/

/* ---------------------------------------------- */

.content {
    position           : relative;
    padding            : 1rem 4rem;
    width              : 100%;
    color              : var(--text);
    max-width          : var(--std-width);
}

h2 {
    color              : var(--site__color-light);
    font-weight        : var(--fw-bold);
    padding-block      : 1rem;
}

h3 {
    color              : var(--site__color-dark);
    font-weight        : var(--fw-bold);
    font-size          : var(--h3-font-size);
    padding-block      : 0.2rem;
}

.content h2 a:hover {
    color: var(--color5);
} 

/* ---------------------------------------------- */

table {
    width              : 100%;
    max-width          : var(--std-width);
    font-size          : var(--font-size);
/*    border-collapse    : collapse;*/
    border-spacing     : 0;
    border             : 3px solid var(--color0);
}
tr:nth-of-type(odd) {
    background-color   : var(--color3);
}
tr:nth-of-type(even) {
    background-color   : var(--color2);
}
td {
    text-align         : center;
    padding-block      : 0.5rem; 
    position           : relative;
/*    border             : 1px solid var(--color3);*/
}
td input, 
td select {
    width              : 100%;
    height             : 100%;
}
td:has(input), 
td:has(select) {
    padding            : 0;
}
td:first-of-type {
    text-align         : right;
    padding-inline-end : 1rem;
}

/* ---------------------------------------------- */

.button-container { 
    padding-block      : 1rem; 
}
.promo-button {
    color              : var(--color5);
    background-color   : var(--color1);
}
.promo-button:hover {
    color              : var(--color1);
    background-color   : var(--color2);
}
.print-button {
    color              : var(--color0);
    background-color   : var(--color5);
    border             : 1px solid var(--color0);
}
.print-button:hover {
    color              : var(--color5);
    background-color   : var(--color0);
    border             : 1px solid var(--color5);
}

/* ---------------------------------------------- */

.title {
    color              : var(--site__color-dark);
    background-color   : var(--site__color-light);
}
.field, .field-noborder, .total {
    background-color   : var(--site__color-light);
}
.field {
    border             : 1px solid var(--color0);
}
.field-noborder {
    border             : 1px solid var(--color2);
}
.total {
    color              : var(--color1);
    border             : 1px solid var(--color1);
}
.lite1 {
    background-color   : var(--color4);
} 
.lite2 {
    background-color   : var(--color3);
} 

/* ---------------------------------------------- */

#calc-results {
    padding-block      : 1rem;
    margin-inline      : auto;
    max-width          : 600px;
}
#calc-results table {
    border             : 3px solid var(--color5);
}
.results1 {
    color              : var(--color5);
    background-color   : var(--color0);
    border             : 2px solid var(--color0);
}
.results2 {
    color              : var(--color5);
    background-color   : var(--color1);
    border             : 2px solid var(--color0);
}
#calc-results .results1,
#calc-results .results2 {
    border             : 2px solid var(--color5);
}

/* ---------------------------------------------- */

.group-title i {
    font-style         : normal;
    font-size          : 0.7em;
}

.group-title td {
    color              : var(--color5);
    background-color   : var(--color1);
    border-left        : 2px solid var(--color5);
}

/* ---------------------------------------------- */

.checkbox, 
input[type="date"] {
    font-size: 1.2rem;
}

span:has(+ span:empty) {
    display: none;
}

input {
    max-width: 90%;
}

span:has(+ input:invalid) {
    display: none;
}