:root {
    --plaindefault: #004b96;
    --paledefault: #dbe4ef;
    --dimdefault: #afc5dd;
    --plainblack: #000000;
    --paleblack: #dbdada;
    --dimblack: #afaeae;
    --plainred: #b22222;
    --palered: #f4dfdf;
    --dimred: #e7b9b9;
    --plaingreen: #2e8b57;
    --palegreen: #e1eee6;
    --dimgreen: #bddac9;
    --plainblue: #004b96;
    --paleblue: #dbe4ef;
    --dimblue: #afc5dd;
    --plainorange: #ff6347;
    --paleorange: #ffe8e4;
    --dimorange: #ffcdc5;
    --plainyellow: #ffd700;
    --paleyellow: #fff9db;
    --dimyellow: #fff2af;
}

html {
    font-size: 100%;
    font-family: sans-serif;
    margin: 0;
}

body {
    margin: 0;
}

body * {
    box-sizing: border-box;
}

body > form {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    justify-content: space-between;
}

body > form > header {
}

body > form > main,
body > form > table {
    flex: 0 1 0;
}

body > form > footer {
}

main {
    /*display: block;*/
    width: 100%;
    margin-top: 1em;
    /*margin-bottom: 0.5em;*/
    padding-left: 0.5em;
    padding-right: 0.5em;

    
}

header {
    display: flex;
    column-gap: 0.5em;
    background-color: var(--paledefault);
    border-top: 1px solid var(--plaindefault);
    border-bottom: 1px solid var(--plaindefault);
    padding: 0.25em 0.25em 0.25em 0.25em;
    margin: 0 0 0.5em 0;
    align-items: center;
}

header > button {
    all: unset;
    text-align: center;
    background-color: var(--plaindefault);
    text-overflow: clip;
    border: 0;
    padding: 0;
    line-height: 1.5em;
    height: 1.5em;
    font-weight: bold;
    font-size: 1.5em;
    color: white;
    border-radius: 0.25em;
    border-style: none;
    flex: 0 0 1.5em;
}

header > a > img {
    transform: rotate(-10deg);
    height: 1.25em;
}

header > a {
    flex: 0 0 1.5em;
}

header > div {
    flex: 1 1 auto;
    font-weight: bold;
    min-width: 1.5em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

header > menu  {
    all: unset;
    /*text-align: center;*/
    /*background-color: var(--plaindefault);*/
    /*text-overflow: clip;*/
    /*border: 0;*/
    padding: 0;
    /*line-height: 1.5em;*/
    height: 1.5em;
    font-weight: bold;
    font-size: 1.5em;
    /*color: white;*/
    /*border-radius: 0.25em;*/
    /*border-style: none;*/
    flex: 0 0 1.5em;
}

header > menu > label {
    display:block;
    height: 100%;
    color: white;
    padding: 0;
    margin: 0;
}

header > menu > label > img {
    border-radius: 50%;
    height: 100%;
}

header > menu > label + input {
    display: none;
}

header > menu label .close {
    display: none;
}

header > menu label .open {
    display: inline;
}

header > menu:has(input:checked) label .close {
    display: inline;
}

header > menu:has(input:checked) label .open {
    display: none;
}

header > menu > div {
    display: none;
}

header > menu > input:checked ~ div  {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    border-style: none
}

header > menu > div > button {
    display: block;
    font-size:1em;
    line-height: 0.5em;
    text-align: right;
    border-style: solid solid none solid;
    border-width: 1px;
    border-color: white;
    padding: 0.25em;
    margin: 0 0.25em 0 0.25em;
    color: white;
    background-color: var(--plaindefault);
    text-decoration: none;
}

header > menu > div > button:first-of-type {
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
    margin-top: 0.25em;
}

header > menu > div > button:last-of-type {
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
    border-bottom-style: solid;
    margin-bottom: 0.25em;
}

article {
    text-align: left;
}

article section * {
    margin-bottom: 0.5em;
}

article section {
    margin: 2em;
    padding-left: 1em;
    padding-right: 1em;
}

article section hgroup {
    text-align: center;
}

article section hgroup p {
    margin-top: 0;
}

article section h1 {
    font-size: 2em;
}

article section h2 {
    font-size: 1.5em;
}

article section h3 {
    font-size: 1.25em;
}

article section h4 {
    font-size: 1.25em;
}

article section h5 {
    font-size: 1.125em;
}

article section h6 {
    font-size: 0.5em;
}

/*main section:has(h1) {*/
/*    border: 2px dashed blue;*/
/*}*/

/*main section:has(h2) {*/
/*    border: 2px dashed green;*/
/*}*/

/*main section:has(h3) {*/
/*    background-color: var(--plaindefault);*/
    
/*    border: 2px dashed orange;*/
/*}*/

/*main section:has(h4) {*/
/*    border: 2px dashed red;*/
/*}*/

/*main section h5,*/
/*main section h5 ~ * {*/
/*    margin-left: 5em;*/
/*    margin-right: 5em;*/
/*}*/

/*main section h6,*/
/*main section h6 ~ * {*/
/*    margin-left: 6em;*/
/*    margin-right: 6em;*/
/*}*/

/*ingredients {position: absolute; top: 0; left: 0; align-items: start;}*/
/*hamburger {position: absolute; top: 0; left: 0; width: 32px; background-color: blue; display: inline;}*/
/*ingredients > ul {*/
/*    float: left;*/
/*}*/

.top {
    width: 100%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.top > div {
    display: flex;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}


/*.top > div .user {float:left;vertical-align:text-bottom;}*/
/*.top > div .user img {border-radius:50%; height:30px;}*/
.top > div .corner {float:right;vertical-align:text-top;}
.top > div img.user {float:left;height:30px;border-radius:50%;margin-left:4px;}
.top > div img.logo {float:right;height:30px;margin-left:4px;}
.top > div .navigation {float:left;font-size:100%;vertical-align:text-top;margin:2px 2px 3px 2px;padding:2px 2px 3px 2px;}
/*.top > div .navigation button {vertical-align:right;}*/
.top > div .navigation .title {margin:2px 2px 3px 2px;padding:2px 2px 3px 2px;border-radius:7px;border:1px solid #004B96; background-color:#004B96; color:white}
.top > div .navigation .back {margin:2px 2px 3px 2px;padding:2px 2px 3px 2px;border-radius:7px;border:1px solid #004B96; background-color:#004B96; color:white;height:30px;}
.top > div .navigation input {margin:2px 2px 3px 2px;padding:2px 2px 3px 2px;border-radius:7px;border:1px solid #004B96; background-color:white; color:#004B96;height:30px;}
.top > div button {font-weight:bold;border-radius:10px;background-color:#004B96;border-color:#004B96;border:1px;color:white;}

.bottom {width:90%;margin-left:5%;margin-right:5%;margin-top:10px;height:30px;}
.bottom .links {float:center;vertical-align:text-bottom;}
.bottom .links a {color:black; width:100%; text-align:center; margin:10px 0 10px 0;}

main nav {
    text-align: right;
    margin: 0 0 1em 0;
}

main nav:last-child {
    text-align: left;
    margin: 1em 0 0 0;
}

main nav label,
main nav button {
    text-align: center;
    padding: 0.25em;
    display: inline-block;
    text-overflow: clip;
    min-width: 1.2em;
    font-size: 1.2em;
    background-color: var(--plaindefault);
    color: white;
    border-radius: 0.25em;
    border: 1px solid var(--plaindefault);
    margin: 0 0.25em 0 0;
}

main nav input {
    -moz-appearance: textfield;
    text-align: right;
    padding: 0.25em;
    display: inline-block;
    width: 2em;
    font-size: 1.2em;
    background-color: var(--paledefault);
    color: black;
    border-radius: 0.25em;
    border: 1px solid var(--plaindefault);
    margin: 0 0.25em 0 0;
}

main nav input::-webkit-outer-spin-button,
main nav input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

main nav label input[type='file'] {
    display: none;
}

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


main > div {
    display: flex;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

main > div > button,
main > div > a {
    all: unset;
    text-align: center;
    display: block;
    overflow: hidden;
    padding: 0;
    border: 0;
    text-overflow: ellipsis;
    line-height: 2em;
    height: 2em;
    font-weight: bold;
    font-size: 1.5em;
    color: white;
    white-space: nowrap;
    background-color: var(--plaindefault);
    border-style: none none none solid;
    border-width: 1px;
    border-color: white;
}

/*main > div > button a {*/
/*    all: unset;*/
/*}*/

button a {
    all: unset;
}

main > div > button:first-of-type,
main > div > a:first-of-type {
    flex: 1;
    text-align: left;
    text-indent: 0.5em;
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    border-left-style: none;
}

main > div > button:first-of-type:has(slot),
main > div > a:first-of-type:has(slot) {
    text-indent: 0.25em;
}

main > div > button:last-of-type,
main > div > a:last-of-type{
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}

main > div > button:has(slot),
main > div > a:has(slot) {
    width: 2em;
    text-overflow: clip;
}

main .buttons button {font-weight:bold;border-radius:10px;background-color:#004B96;border-color:#004B96;border:1px;color:white;}
main .buttons input[type='submit'] {font-weight:bold;border-radius:10px;background-color:#004B96;border-color:#004B96;border:1px;color:white;}

main > div > details {
    overflow: hidden;
    text-overflow: ellipsis;
    text-indent: 0.5em;
    width: 100%;
    background-color: var(--paledefault);
    border-radius: 0.75em;
}

main > div > details > summary {
    text-overflow: ellipsis;
    line-height: 2em;
    font-weight: bold;
    list-style: none;
    cursor: pointer;
    height: 2em;
    font-size: 1.5em;
    background-color: var(--plaindefault);
    color: white;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 0.5em;
}

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

main > div > details > summary > * {
    display: inline;
}

main > table button,
main > div > details > button {
    text-align: center;
    padding: 0;
    display: inline-block;
    text-overflow: clip;
    float: right;
    height: 1.5em;
    line-height: 1.5em;
    width: 1.5em;
    font-size: 1.5em;
    background-color: var(--plaindefault);
    color: white;
    border-radius: 0.25em;
    border: 0;
    margin: 0.25em 0.25em 0.25em 0;
}

main > div.red details {
    background-color: var(--palered);
}

main > div.red summary {
    background-color: var(--plainred)
}

main > table.red button,
main > div.red button {
    background-color: var(--plainred);
}

main > div.green details {
    background-color: var(--palegreen);
}

main > div.green summary {
    background-color: var(--plaingreen);
}

main > table.button button,
main > div.green button {
    background-color: var(--plaingreen);
}

main > div.blue details {
    background-color: var(--paleblue);
}

main > div.blue summary {
    background-color: var(--plainblue);
}

main > table.blue button,
main > div.blue button {
    background-color: var(--plainblue);
}

main > div.orange details {
    background-color: var(--paleorange);
}

main > div.orange summary {
    background-color: var(--plainorange);
}

main > table.orange button,
main > div.orange button {
    background-color: var(--plainorange);
}

main > details {
    padding: 0 0.5em 0.5em 0.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-indent: 0.5em;
    width: 100%;
    background-color: var(--paledefault);
    border-radius: 0.75em;
    min-height: 2em;
}

main > details > summary {
    margin: 0 -0.5em -0.5em -0.5em;
    text-overflow: ellipsis;
    line-height: 2em;
    font-weight: bold;
    list-style: none;
    cursor: pointer;
    height: 2em;
    font-size: 1.5em;
    /*background-color: var(--plaindefault);*/
    /*color: white;*/
    overflow: hidden;
    white-space: nowrap;
    border-radius: 0.5em;
}

main > label,
main > details > label {
    display: block;
    width: 100%;
    text-indent: 0.5em;
    font-weight: bold;
}

main > label b,
main > details > label b {
    text-indent: 0.5em;
    width: 100%;
    font-weight: lighter;
}

main > label > input {
    display: block;
    width: 100%;
    font-size: 1.5em;
    height: 1.5em;
    min-height: 1.5em;
    border-radius: 0.5em;
    border: 1px solid var(--plaindefault);
    background-color: var(--paledefault);
    padding: 0.1em 0.5em 0.05em 0.5em;
    margin: 0 0 0 0;
}

main > details > label > input {
    display: block;
    width: 100%;
    font-size: 1.5em;
    height: 1.5em;
    min-height: 1.5em;
    border-radius: 0.5em;
    border: 1px solid var(--plaindefault);
    background-color: white;
    padding: 0.1em 0.5em 0.05em 0.5em;
    margin: 0 0 0 0;
}

main input::-webkit-date-and-time-value {
    text-align: left; /* Safari uses internal date control with centerred text. This fixes the problem. */
    padding: 0.1em 0 0 0;
    color: black ; /* Safari uses internal date control with fixed/os-set color. This fixes the problem. */
    /*-webkit-min-logical-width: calc(100% - 1em);*/
    /*padding: 0.1em 0.5em 0.05em 0.5em;*/
}

main input[type='date'] {
    -webkit-min-logical-width: calc(100% - 1em - 2px); /* Safari uses internal date control with fixed width. This fixes the problem. */
    -webkit-max-logical-height: calc(1.5em - 2px); /* Safari uses internal date control with fixed width. This fixes the problem. */
    -webkit-max-logical-height: calc(1.5em - 2px); /* Safari uses internal date control with fixed width. This fixes the problem. */

    font-family: sans-serif;
    height: 1.5em;
}

main > label > select {
    display: block;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1.5em;
    height: 1.5em;
    border-radius: 0.5em;
    border: 1px solid var(--plaindefault);
    background-color: var(--paledefault);
    padding: 0.1em 0.5em 0.05em 0.5em;
    color: black;
}

main > details > label > select {
    display: block;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1.5em;
    height: 1.5em;
    border-radius: 0.5em;
    border: 1px solid var(--plaindefault);
    background-color: white;
    padding: 0.1em 0.5em 0.05em 0.5em;
    color: black;
}

table {
    margin-top: 1em;
    margin-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-radius: 0.5em;
    font-size: 100%; /* table have a fixed size and won't resize with body, unless explicity set here */
    border: 0;
    width: 100%;
    text-align: center;
    overflow: hidden;
    border-spacing: 0;
}

table thead tr th {
    text-align: center;
    background-color: var(--plaindefault);
    color: white;
    font-weight: bold;
    padding: 0;
}

table thead tr th:has(span) {
    vertical-align: bottom;
    text-align: center;
    width: 1.5em;
}

table thead tr th span {
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

table thead tr:first-of-type th:first-of-type {
    border-top-left-radius: 0.5em;
}

table thead tr:first-of-type th:last-of-type {
    border-top-right-radius: 0.5em;
}

table tfoot tr td {
    background-color: var(--plaindefault);
    color: white;
    font-weight: bold;
    padding: 0;
    font-weight: normal;
}

table tfoot tr:last-of-type td:first-of-type {
    border-bottom-left-radius: 0.5em;
}

table tfoot tr:last-of-type td:last-of-type {
    border-bottom-right-radius: 0.5em;
}

table tr {
    overflow: hidden;
}

table tr td {
    background-color: var(--paledefault);
    border: 0;
    border-bottom: 1px solid var(--plaindefault);
    overflow: hidden;
    padding: 0;
}

main > label > input {
    display: block;
    width: 100%;
    font-size: 1.5em;
    height: 1.5em;
    min-height: 1.5em;
    border-radius: 0.5em;
    border: 1px solid var(--plaindefault);
    background-color: var(--paledefault);
    padding: 0.1em 0.5em 0.05em 0.5em;
    margin: 0 0 0 0;
}

fieldset {
    margin: 0;
    border: 0;
    padding: 0;
}

fieldset div {
    border-radius: 0.75em;
    background-color: var(--paledefault);
    border: 1px solid var(--plaindefault);
    width: 100%;
    padding: 0 0.25em 0 0.25em;
    margin: 0;
}

fieldset legend {
    margin: 0 0.5em 0 0.5em;
    padding: 0;
    font-weight: bold;
}

fieldset label:has(input[type='radio']),
fieldset label:has(input[type='checkbox']){
    display: inline-block;
    background-color: var(--paledefault);
    border-radius: 0.5em;
    border: 1px solid var(--dimdefault);
    margin: 0.25em 0.5em 0.25em 0.5em;
    padding: 0.25em 0.25em 0.25em 0.25em;
}

fieldset label:has(input:not(:checked)[type='radio']),
fieldset label:has(input:not(:checked)[type='checkbox']),
fieldset label:has(input:not(:checked)[type='radio']) slot,
fieldset label:has(input:not(:checked)[type='checkbox']) slot {
    color: var(--dimdefault); !important;
    border-color: var(--dimdefault) !important;
}

fieldset label:has(input:checked[type='radio']),
fieldset label:has(input:checked[type='checkbox']) {
    background-color: white;
    border-color: var(--plaindefault);
}

fieldset label input[type='radio'],
fieldset label input[type='checkbox']{
    display: none;
}

td select {
    -webkit-appearance: none;
    -moz-appearance: none;
	appearance: none;
	font-size: 1em;
    height: 1.5em;
    min-height: 1em;
    border-radius: 0.5em;
    border: 1px solid var(--plaindefault);
    background-color: white;
    padding: 0.1em 0.1em 0.1em 0.1em;
    margin: 0 0 0 0;
	font-family: inherit;
	outline: none;
}

td option {
	background-color: white;
	color: black;
}

option::after {
    content: ' ' attr(title);
}

table tr.red td {
    background-color: var(--palered);
}

table tr.green td {
    background-color: var(--palegreen);
}

table tr.blue td {
    background-color: var(--paleblue);
}

table tr.orange td {
    background-color: var(--paleorange);
}

table tr.yellow td {
    background-color: var(--paleyellow);
}

table th:first-of-type {
    text-align: left;
    padding-left: 0.5em;
}

table td:first-of-type {
    text-align: left;
    padding-left: 0.5em;
    font-weight: bold;
}

table td:first-of-type div {
    font-weight: normal;
    font-style: italic;
}

main dl {
    margin: 0.5em 0 0.5em 0;
}

main dt {
font-weight: bold;
text-decoration: underline;
}

main dd {
text-indent: 0;
padding: 0 0 0.5em 0;
}

.detail-drawing {
    stroke-width: 5;
    stroke: black;
}

.detail-drawing .surface {
    fill: #f0f0ff;
}

.detail-drawing .inside {
    fill: #e0e0ff;
}

.detail-drawing .through {
    fill: transparent;
}

.detail-drawing .behind {
    fill: transparent; 
    stroke:transparent;
    stroke-dasharray: 10 10;
    
}

.detail-drawing .joint {
    fill: transparent;
    stroke-width: 2;
    
}

.detail-drawing .support {
    stroke-width: 1;
    stroke: #808080;
} 

.detail-drawing .arrow {
    stroke-width: 1;
    stroke: #808080;
    fill: #808080;
} 

.detail-drawing .arrow path {
    stroke: transparent;
}

.detail-drawing .arrow text {
    stroke:transparent;
    dominant-baseline: middle;
    text-anchor: middle;
    font-size: xxx-large;
}

footer {
    margin: 0.5em;
    display: flex;
    justify-content: space-evenly;
}

slot.default {
    color: var(--plaindefault)
}

slot.dim {
    color: var(--dimdefault)
}

slot.black {
    color: var(--plainblack)
}

slot.red {
    color: var(--plainred)
}

slot.green {
    color: var(--plaingreen)
}

slot.blue {
    color: var(--plainblue)
}

slot.orange {
    color: var(--plainorange)
}

slot.yellow {
    color: var(--plainyellow)
}