body {background-color: black; color: white;}

img {width: 20vw;}

option {color: black;}

.header-container { display: flex; width: 90vw; flex-wrap: wrap; justify-content: space-between; text-align: center; margin: auto; position: sticky; top: 0px; padding-top: 20px; padding-bottom: 50px; z-index: 999; background-image: linear-gradient(black, rgba(0, 0, 0, 0.79), transparent);}

.content {display: grid; grid-template-columns: 1fr 4fr; width: 90vw; margin: auto; margin-top: 50px; column-gap: 10vw;}

.right-panel {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 3.2vw; grid-template-rows: auto; height: min-content;}

.row-header {margin-bottom: 1.5vh;  margin-top: 3vh; grid-column-start: 1; grid-column-end: 5; color: rgb(190, 190, 190);}
.two-columns {grid-column: span 2; grid-column: span 2; height: min-content;}

.square-small {background-color: rgb(34, 34, 34); border-radius: 5px; height: 150px;  width: 260px; color: white; padding: 30px; padding-top: 20px;  font-size: 24px; display: flex; flex-direction: column;}
.square-small.double {height: 300px; align-items: start; width: unset;}

.table-container{grid-column-start: 1; grid-column-end: 5; background-color: rgb(34, 34, 34); margin-bottom: 50px; padding: 30px; border-radius: 5px;}

th {color: rgb(160, 160, 160);}
tr {border-color: rgb(30, 30, 30); border-bottom-width: 2px;}

.sidebar-container {background-color: rgb(34, 34, 34); border-radius: 5px; position: sticky; top: 160px; margin-bottom: 50px; width: 300px;}

.sidebar { padding-top: 80px; padding-bottom: 80px;}

.sidebar-item {color: white; height: 80px; font-size: 22px;}

.input-wrapper {margin-top: 30px;}

.input-small {width: 30vw; padding-right: 30px;}

.input-small.material{width: 90%;padding: 0px; padding-left: 5%; }
.input-small.material.select {background-color: transparent; }

.input-big {width: 30vw; }

.input-small.noinput {border-color: rgb(36, 36, 36); color: rgb(160, 160, 160); background-color: rgb(36, 36, 36); padding-top: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.input-big.noinput {border-color: rgb(36, 36, 36); color: rgb(160, 160, 160); background-color: rgb(36, 36, 36);}

.single-product {width: 20vw;}

.grid-right-column {display: flex; flex-direction: column; align-items: flex-end;}

.delete-options {display: flex; align-items: center;}

.product-title {margin-top: 10px;}

.modal-header {
    background-color: rgb(34, 34, 34);
    border-color: rgb(34, 34, 34);
 }

.modal-body{
    background-color: rgb(34, 34, 34); 
    border-color: rgb(34, 34, 34);
 }

 .modal-footer{
    background-color: rgb(34, 34, 34);
    border-color: rgb(34, 34, 34);
 }

.statistics-value {
   font-weight: bold;
   margin-top: 5px;
}

.statistics-header {
   color: rgb(160, 160, 160);
}