html {
    box-sizing: border-box;
    font-family: arial, sans-serif;
}

body {
    position: relative;
    font-family: arial, sans-serif;
    font-size: 0.8em;
    background-color: white;
    line-height: 1.4;
    overflow-x: hidden;
    align-content: center;
    align-items: center;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: rgb(38, 38 ,38);
    color: white;
    font-size: 0.9em;
}

.nav-menu-button {
    background-color: rgb(38, 38, 38);
    color: darkgray;
    border: 0.3px solid darkgrey;
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 5px;
    font-size: 0.9em;
}

.nav-menu-button-left {
    background-color: rgb(38, 38, 38);
    color: darkgray;
    border: 0.3px solid darkgrey;
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 5px;
    float: left;
}

.nav-menu-button-right {
    background-color: rgb(38, 38, 38);
    color: darkgray;
    border: 0.3px solid darkgrey;
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 5px;
    float: right;
}

#div-left {
    float: left;
    margin-left: 5px;
}

#div-right {
    float: right;
    margin-right: 5px;
}
    
.main-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    padding-top: 20px;
    column-gap: 1px;
    row-gap: 8px;
}

.button-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    padding-top: 20px;
    column-gap: 1px;
    row-gap: 8px;
}

.card {
    display: block;
    border: none;  
    /* border: 1px solid grey; */
    border-radius: 0px;
    margin: 0;
}

.card-title {
    color: rgb(102, 102, 102);
    padding-left: 10px;
    font-weight: 500;
    font-size: 0.9em;
}

input {
    padding: 9px 5px;
    border: 0.9px solid rgb(166, 166, 166);
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.9em;
    margin: 2px 2px;
}

select {
    padding: 9px 5px;
    border: 0.9px solid rgb(166, 166, 166);
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.8em;
    margin: 2px 2px;
}

input[type=number] {
    padding: 9px 5px;
    border: 0.9px solid rgb(166, 166, 166);
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.9em;
    margin: 2px 2px;
}

input[type=text] {
    padding: 9px 5px;
    border: 0.9px solid rgb(166, 166, 166);
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.9em;
    margin: 2px 2px;
}

input[type=decimal] {
    padding: 9px 5px;
    border: 0.9px solid rgb(166, 166, 166);
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.9em;
    margin: 2px 2px;
}

input[type=password] {
    padding: 9px 5px;
    border: 0.9px solid rgb(166, 166, 166);
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.9em;
    margin: 2px;
}

input[type=submit] {
    padding: 9px 5px;
    border: 0.9px solid rgb(51, 51, 51);
    border-radius: 3px;
    background-color: rgb(51, 51, 51);
    color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.8em;
    margin: 2px;
}

input[type=date] {
    font-size: 0.9em;
}

.main-menu-button {
    width: 350px;
    font-size: 0.8em;
    border: 0.5px solid black;
    border-radius: 0px;
    padding: 10px;
    margin: 1px;
}

#menu-item {
    width: 350px;
    font-size: 0.8em;
    border: 0.5px solid black;
    border-radius: 0px;
    padding: 10px;
    margin: 1px;
}

#filled-text-field {
    border: 0.9px solid rgb(166, 166, 166);
    background-color: rgb(217, 217, 217);
}

#required-text-field {
    border: 0.9px solid rgb(166, 166, 166);
    background-color: rgb(255, 204, 204);
}

#take-on-cost-text-field {
    border: 0.9px solid rgb(166, 166, 166);
    background-color: rgb(224, 225, 229);
}

#disposal-text-field {
    border: 0.9px solid rgb(255, 153, 255);
    background-color: rgb(255, 153, 255);
}

#scrapped-text-field {
    border: 0.9px solid rgb(255, 153, 153);
    background-color: rgb(255, 153, 153);
}

#blue-text-field {
    border: 0.9px solid rgb(166, 166, 166);
    background-color: rgb(230, 238, 255);
}

#filled-text-field-calculation {
    border: 0.9px solid rgb(153, 175, 255);
    background-color: rgb(204, 215, 255);
}

#filled-text-field-verification {
    border: 0.9px solid rgb(255, 153, 153);
    background-color: rgb(255, 204, 204);
}

#spreadsheet-item {
    width: 350px;
    height: 45px;
    background-color:  rgb(0, 71, 0);
    color: white;
    text-decoration: none;
    padding: 0.8em 0.8em;
    margin: 5px;
    border-radius: 3px;
    border: none;
}

#hide-show {
    display: none;
}

#hot-button {

    color: rgb(230, 230, 230);
    border: 0.9px solid rgb(64, 64, 64); 
    background-color: rgb(128, 0, 0);
}

.hot-button {

    color: rgb(230, 230, 230);
    border: 0.9px solid rgb(64, 64, 64); 
    background-color: rgb(128, 0, 0);
}

#error-button {

    color: rgb(230, 230, 230);
    border: 0.9px solid rgb(204, 0, 0); 
    background-color: rgb(204, 0, 0);
}

#black-button {

    color: rgb(230, 230, 230);
    border: 0.9px solid black; 
    background-color: black;
}

#disposal-button {

    color: rgb(230, 230, 230);
    border: 0.9px solid rgb(255, 153, 255); 
    background-color: rgb(255, 153, 255);
}

#disabled-button {

    color: rgb(230, 230, 230);
    border: 0.9px solid rgb(179, 179, 179);
    background-color: rgb(179, 179, 179);
}

.disabled-button {

    color: rgb(230, 230, 230);
    border: 0.9px solid rgb(179, 179, 179);
    background-color: rgb(179, 179, 179);
}

#verification-border {

    border: 0.9px solid rgb(255, 26, 26);
}

#navbar-button {

    background-color: rgb(38, 38, 38);
    color: darkgray;
    border: 0.3px solid darkgrey; 
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 25px;
    font-size: 1em;
}