:root {
    --dark-primary: #221F20;
    --on-dark-primary: #ffffff;
    --light-primary: #DDCEBE;
    --on-light-primary: #221F20;
    --mid-primary: #54595F;
    --on-mid-primary: #ffffff;
    --invalid: rgb(250, 230, 220);
    --button-bg-hover: #A9845C;
    --button-fg-hover: #221F20;
    --button-bg: #936A4B;
    --button-fg: #ffffff;
    --button-bg-disable: #575757;
    --button-fg-disable: #ffffff;
    --table-bg: #ffffff;
    --on-table: #221F20;
    --background: #F6F3EF;
    --on-background: #221F20;
    --image-background: #F6F3EF;
    --item-radius: 5px;
    --page-radius: 25px;
    --btn-radius: 50px;
    --select-line-height-mobile: 2.5em;
    --input-font-mobile: 1.15em;
    --select-font-mobile: 1.05em;
}

body {
    background-color: #eeebea00;
    font-family: "PT Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

input,
select,
option {
    font-family: "PT Sans", sans-serif;
}

label {
    font-weight: bold;
    padding-left: 5px;
}

h2 {
    border-radius: 2px;
    background: #221F20;
    color: white;
    border-top: none;
    border-bottom: none;
    padding-top: 5px;
    padding-bottom: 5px;
}

.page-container {
    border-radius: var(--page-radius);
    background: var(--background);
    color: var(--on-background);
}

.order-header {
    border-bottom: solid var(--dark-primary) 2px;
    color: var(--dark-primary);
}

select {
    border: solid var(--mid-primary) 1px;
}

input {
    border: solid var(--mid-primary) 1px;
}


@media (max-width: 580px) {
    .page-container {
        background: var(--background);
    }

    body {
        background: var(--background);
    }

}


input,
select.select-styled {
    font-weight: 200;
    font-style: normal;
}

table,
table.style-table {
    background: var(--light-primary);
}

table caption {
    color: #221F20;
}

button {
    background: var(--button-bg);
    color: var(--button-fg);
    border-radius: var(--btn-radius);
    transition-property: background, color;
    transition-duration: 0.5s;

}

button:hover {
    background: var(--button-bg-hover);
    color: var(--button-fg-hover);
}

button:disabled {
    background: var(--button-bg-disable);
    color: var(--button-fg-disable);
    border-radius: var(--btn-radius);
    transition-property: background, color;
    transition-duration: 0.5s;
    
}

input:invalid {
    background: var(--invalid);
}

.order-header {
    color: #221F20;
}

.style-item .header-line {
    padding: 0px var(--item-radius) 0px var(--item-radius);
    border-radius: var(--item-radius) var(--item-radius) 0px 0px;
    background: #0d1317;
    color: var(--on-dark-primary);
}

.style-configuration {
    padding: var(--item-radius);
    background: var(--light-primary);
    color: var(--on-light-primary);
    border: solid 2px var(--dark-primary);
    border-radius: 0px 0px var(--item-radius) var(--item-radius);
}

.order-row {
    border-bottom: solid black 2px;
}


.light-note {
    color: rgb(73, 73, 73);
}

.fraction-denominator {
    border-top: solid 2px var(--mid-primary);
}


.popup {

    background: var(--dark-primary);
    color: var(--on-dark-primary);
    z-index: 1;
    visibility: hidden;

}

.popup.show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

.image-panel {
    background: var(--image-background);
}