:root {
    --main-bg-color: #dfddd2;
    --light-color: white;
    --main-strong-color: #b02a2a;
    --second-light-color: #dcd5cc;
    --strong-color: #315c82;
    --small-shadow: 0 4px 6px 0 #00000033;
    --shadow: 0 8px 16px 0 #00000033;
    --good-color: #6cc56c;
    --bad-color: #fd8383;
    --bad-color-light: #fd838381;
    --darken: #00000010;
    --darken-more: #00000020;
    --lighten: #FFFFFF70;
    --more-lighten: #FFFFFFD0;
    --card-color: floralwhite;
    --info-color: #fff7b6;
    --warning-color: #ffc107;
    --base-font-size: 16px;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
}

html {
    font-size: var(--base-font-size);
}

body {
    background-color: var(--second-light-color);
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

table.orderTable {
    padding: 3px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0 0 10px 10px;
    box-shadow: var(--shadow);
    background-color: var(--more-lighten);
}

table.orderTable th {
    padding-right: 5px;
    padding-left: 5px;
}

caption {
    background-color: var(--main-strong-color);
    font-size: 24px;
    color: var(--light-color);
    padding: 5px;
    border-radius: 10px 10px 0 0;
    border: 4px solid var(--light-color);
}

td.pic_id {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    justify-items: start;
    gap: 3px;
}

td.size {
    width: 40px;
    height: 28px;
}

td.size10x15 {
    background-color: #9cdab163;
    font-size: large;
}

td.size3x5,
td.size4x6,
td.size6x9,
td.size15x21,
td.size20x30,
td.size30x45 {
    color: #555;
    background-color: var(--light-color);
    border: #d6c4c4 1px solid;
    border-radius: 5px;
    font-size: large;
}

table.orderTable input[type=number],
table.orderTable input[type=text] {
    text-align: center;
    font-size: large;
}

table.orderTable input[type=number] {
    width: 40px;
}

table.orderTable input.sum {
    width: 50px;
}

input.inErrorValue {
    background-color: #ffb0b0;
}

input.inCorrValue {
    background-color: #b0ffb0;
}

input#remark {
    width: -webkit-fill-available;
    width: 100%;
    max-width: 100%;
}

table.orderTable td {
    margin: 5px;
    padding: 5px;
    text-align: center;
}

table.orderTable th {
    background-color: #c4c4c4;
    padding-right: 5px;
    padding-left: 5px;
    font-weight: normal;
}

table.orderTable tr:hover {
    background-color: var(--more-lighten);
    box-shadow: drop-shadow(1px 1px 2px grey);
}

table.orderTable td.eraseCell {
    border: medium solid #C00;
    background-color: #FEE;
}

table.orderTable td.pay {
    border: medium solid #0A0;
    background-color: #EFE;
}

table.orderTable tr:nth-child(odd) {
    background-color: #d2d2d280;
}

table.orderTable tr:nth-child(odd):hover {
    background-color: var(--more-lighten);
}

input.orderButton {
    background-color: var(--good-color);
    border: none;
    border-radius: 10px;
    color: white;
    padding: 15px 72px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    box-shadow: var(--shadow);
}

table#contact td {
    padding: 10px;
}

a {
    text-decoration: none;
    color: #555;
}

nav {
    padding: 20px;
    margin: auto;
}

ul#navigation {
    padding: 0;
}

nav ul {
    display: flex;
}

li.menu {
    box-shadow: var(--small-shadow);
    border-radius: 5px;
    background-color: var(--lighten);
    padding: 10px 20px;
    margin: 15px;
    border: white 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
}

li.social {
    background-color: #faebd700;
    box-shadow: none;
    padding: 0px;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
}

li.menu a {
    width: 100%;
    height: 100%;
}

a.menu:hover {
    text-decoration: none;
}

a.menu li.menu {
    color: #333;
    font-size: 24px;
    font-variant: small-caps;
}

li.menu a.login-btn img {
    height: 60px;
    box-shadow: var(--small-shadow);
    border-radius: 5px;
}

h1 {
    font-variant: small-caps;
    font-size: 3rem;
    margin: 15px;
}

h1,
h2 {
    font-weight: lighter;
}

div.control {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    justify-content: space-evenly;
    padding: 20px;
}

div.control div.button {
    display: grid;
    background-color: var(--light-color);
    color: black;
    grid-template-columns: 1fr;
    border: 1px solid #999;
    margin: auto;
    padding: 10px;
    border-radius: 10px;
    box-shadow: var(--shadow);
}

div.control div.button:hover {
    box-shadow: var(--shadow);
}

div.picThumb {
    float: left;
    padding: 10px 5px;
    border: 2px solid #9e9e9e;
    margin: 5px;
    border-radius: 20px;
    min-height: 265px;
    box-shadow: var(--small-shadow);
    background-color: var(--lighten);
}

img.microThumbPic {
    height: 40px;
    display: block;
    width: auto;
    object-fit: cover;
    padding-left: 10px;
}

div.info {
    display: inline-block;
    background-color: var(--info-color);
    padding: 5px 15px;
    margin: 10px;
    border: white solid 3px;
    box-shadow: var(--small-shadow);
}

button.index {
    background-color: #6EB37F;
    border: none;
    color: var(--light-color);
    padding: 15px 32px;
    margin-top: 25px;
    margin-bottom: 15px;
    text-align: center;
    text-decoration: none;
    display: flex;
    font-size: 26px;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
    box-shadow: var(--shadow);
    clear: both;
}

div#footer-wrapper {
    left: 0;
    bottom: 0;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #00000045;
    color: var(--light-color);
    text-align: center;
    margin-top: 20px;
}


td.printer img,
div.printer img {
    width: 40px;
    height: 40px;
    padding: 5px;
}

td.folder img {
    margin-top: 10px;
    height: 100px;
    max-width: 167px;
}

button:focus, a:focus, input:focus, textarea:focus {
    outline: 3px solid var(--darken-more);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--more-lighten);
}