:root, body.light {
    --primary:#006e17;
    --on-primary:#ffffff;
    --primary-container:#93f990;
    --on-primary-container:#002203;
    --secondary:#52634f;
    --on-secondary:#ffffff;
    --secondary-container:#d5e8ce;
    --on-secondary-container:#101f0f;
    --tertiary:#38656a;
    --on-tertiary:#ffffff;
    --tertiary-container:#bcebf0;
    --on-tertiary-container:#001f23;
    --error:#ba1b1b;
    --error-container:#ffdad4;
    --on-error:#ffffff;
    --on-error-container:#410001;
    --background:#fcfdf6;
    --on-background:#1a1c19;
    --surface:#fcfdf6;
    --on-surface: #1a1c19;
    --surface-variant:#dee5d8;
    --on-surface-variant:#424840;
    --outline:#73796f;
    --inverse-on-surface:#f0f1eb;
    --inverse-surface:#2f312d;
    --inverse-primary:#78dc77;
    --shadow:#000000;
    --surface-container-low: #fcfdf6;
}

body {
    background-color: white;
}

.list > a.row:hover,
.list > a.row.active {
    background-color: var(--secondary-container);
}

.list > .row {
    padding:0.5rem 0.5rem;
    white-space: normal;
}

fieldset {
    border: none;
}

.field > :disabled {
    opacity: 1;
}

/* fieldset:not([disabled]) input {
    background-color: var(--surface-variant)!important;
    color: var(--on-surface-variant)!important;
} */

form.edit, article.edit, fieldset.edit {
    border: .1rem dashed var(--primary);
    /* background-color: var(--surface-variant); */
}

article.incomplete {
    background-color: var(--on-secondary);
    opacity: 0.8;
    background-image: radial-gradient(var(--on-surface-variant) 0.5px, var(--surface-variant) 0.5px);
    background-size: 10px 10px;
}

article.incomplete div.complete {
    background-color: var(--surface);
}

/* article.edit input {
    background-color: var(--surface-variant);
} */

.edit input:invalid + label, .edit textarea:invalid + label {
    font-weight: bolder;
    color: var(--error);
}

.field.textarea {
    margin-bottom: 1rem;
}


/* .field.min.textarea > textarea:focus {
    margin-top: -15rem !important;
} */

.field.min.field > textarea {
    max-block-size: none;
}

.field:has(>:disabled), input:disabled+span{
    opacity: 0.8 !important;
}


/* temporaryly fix */
.page {
    display: none
}

.page.active {
    display: block
}

.field label {
    max-width: 100%;
}

.field span {
    max-width: 90%;
}


.wrap {
    flex-wrap: wrap;
}

.wrap label {
    flex-wrap: wrap;
    white-space: normal;
}

div.page {
    max-width: 1140px;
    margin: auto;
}

article {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

/* 
colored radio buttons
*/

.radio>input[value="2"].color+span:before {
    color: orange;
}


.radio>input[value="1"].color+span:before {
    color: red;
}


div.archived article {
    background-color: var(--surface-variant);
}

div.archived button, div.archived a.primary {
    display: none;
}

div.archived button[data-archive]{
    display: inherit;
}

div.scrollbox {
    overflow: auto;
    max-height: 46vh;
}

footer.dossier {
    position: fixed;
    top: inherit;
    bottom: 0;
    width: 100%;
    z-index: 0;
}


a.dragging {
    background-color: red;
    width: 40em;
}

div.dropzone > div > span {
    border: .1rem dashed var(--primary) !important;
    background-color: var(--secondary-container);
}

.field {
    margin-block-end: 1rem;
}

/* hide date input calendar widget */
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}


/* Make a menu item take full width and clickable*/
li.round > a {
    width: 100%;
}