:root {
    --dark-primary: #18303d;
    --on-dark-primary: #7cfc0d;
    --light-primary: #C0C7CA;
    --on-light-primary: #000000;
    --mid-primary: gray;
    --on-mid-primary: #000000;
    --invalid: #E5FFCF;
    --button-bg-hover: #254F01;
    --button-fg-hover: #ffffff;
    --button-bg: #7cfc0d;
    --button-fg: #000000;
    --table-bg: #ffffff;
    --on-table: #000000;
    --background: #dfdfdf;
    --image-background: #E9F2F7;
    --item-radius: 10px;
    --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: #ededed00;
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
  }

h2 {
    color: var(--dark-primary);
    border-top: solid var(--dark-primary) 3px;
    border-bottom: solid var(--dark-primary) 3px;
}

.page-container {
    border-radius: var(--page-radius);
    background: var(--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: gray;
}

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);
}


.style-item .header-line {
    padding: 0px var(--item-radius) 0px var(--item-radius);
    border-radius: var(--item-radius) var(--item-radius) 0px 0px;
    background: var(--dark-primary);
    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: var(--mid-primary);
}

.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);
}