* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: rgba(241, 235, 255, 0.61);
    overflow: hidden;
}

main {
    width: 100%;
    height: 100%;
}

main > section {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(231, 227, 238);
}

#login-panel {
     z-index: 10; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#login-header {
    border-bottom: 1px solid rgba(128, 128, 128, 0.438);
    width: 95%;
    height: 10%;
    padding-left: 2.5%;
    padding-right: 2.5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb(0, 112, 218);
}

#login-header h1 {
    border-radius: 1.5em;
    text-align: center;
    width: 10%;
    font-size: 1.5em;
    padding: 10px;
    color: white;
    background-color:  rgb(0, 112, 218);
}

#login-panel-icons {
    /* border: 1px solid; */
    width: 12%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-size: 1.5em;
}

#login-panel-icons span {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#login-panel-icons sup {
    border-radius: 3px;
    position: relative;
    top: -30%;
    width: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: red;
    scale: .7;
    font-size: .7!important;
}

#login-panel footer {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;
    color: grey;
    background-color: white;
}

#login-panel footer p {
    font-size: .9em;
}

#login-form {
    position: relative;
    width: 60%;
    height: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 1%;
    scale: .8;
}

#login-form h1 {
    border-bottom: 5px solid;
    width: 40%;
    height: 10%;
    text-align: center;
    font-size: 2.5em;
    color: rgb(0, 140, 255);
    scale: .9;
}

#login-image {
    border: 1px solid grey;
    width: 15%;
    height: 20%;
    border-radius: 50%;
    scale: .7;
}

#login-image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#input-div {
    /* border: 1px solid; */
    width: 40%;
    height: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    color: grey;
}

.input-cover {
    width: 90%;
    height: 35%;
    display: flex;
    align-items: center;
    justify-content: start;
    background-color: white;
}

.input-cover:active {
    border: 2px solid rgb(0, 140, 255);
}

.input-cover label {
    width: 15%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-cover label[for="password"] i {
    transform: rotate(-140deg);
}

.input-cover input {
    border: none;
    outline: none;
    height: 100%;
    width: 85%;
    font-size: 1em;
    color: grey;
}

#login-buttons {
    width: 40%;
    height: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

#login-buttons button {
    border-radius: 5px;
    outline: none;
    border: none;
    width: 90%;
    height: 40%;
}

#login-buttons button:nth-child(1) {
    color: white;
    background-color: rgba(0, 140, 255, 0.637);
}

#login-buttons button:nth-child(2) {
    color: white;
    background-color: rgba(255, 17, 0, 0.637);
}

#forgotten {
    border-bottom: 1px solid;
}

#main-panel {
    width: 100%;
    height: 100%;
}

#main-panel-header {
    border-bottom: 1px solid rgba(128, 128, 128, 0.418);
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    color: rgb(0, 112, 218);
    display: none;
}

#left-div {
    width: 15%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

#left-side-menu {
    border-radius: 50%;
    width: 18%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    scale: .9;
}

#left-side-menu:hover {
    color: rgb(0, 112, 218);
    background-color: rgb(241, 235, 255);
}

.span-header {
    border-radius: 1em;
    width: 70%;
    height: 90%;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(0, 112, 218);
    background-color: rgb(241, 235, 255);
    font-weight: bolder;
    scale: .8;
}

#right-div {
    width: 30%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

#right-div sup {
    position: relative;
    padding: 5px;
    font-size: .9em;
    background-color: red;
}


#contents-panel {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#left-panel {
    width: 10%;
    height: 99%;
    transition: .3s;
    display: flex;
    flex-direction: column;
    background: rgb(9, 35, 61);
}

#left-panel-icons {
    list-style: none;
    position: relative;
    top: 0;
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#left-panel-icons li {
    border-radius: 5px;
    width: 100%;
    height: 8%;
    padding-left: 5%;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10%;
    color: rgb(255, 255, 255);
    cursor: pointer;
    scale: .9;
}

#left-panel-icons li:hover {
    border-left: 5px solid rgb(25, 144, 255);
    color: white;
    background-color: rgba(0, 113, 218, 0.349);
}

#left-panel-icons-plus-text {
    border: 1px solid;
    z-index: 10;
    position: absolute;
    top: 0;
    width: 15%;
    height: 100%;
    background-color: rgb(241, 235, 255)
}

#right-panel {
    /* border: 1px solid red; */
    width: 90%;
    height: 99%;
}

#right-panel > div {
    /* border: 1px solid yellowgreen; */
    position: absolute;
    width: 85%;
    height: 90%;
    background-color: rgb(231, 227, 238);
    /* scale: .9; */
}

#dashboard-sub-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;    
}

#dashboard-top-boxes {
    width: 99%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#dashboard-top-boxes > div {
    /* border-radius: 15px; */
    width: 24%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10%;
    font-size: 24px;
    color: rgb(255, 255, 255);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#dashboard-top-boxes > div:nth-child(1) {
    background-color: turquoise;
}

#dashboard-top-boxes > div:nth-child(2) {
    background-color: rgb(27, 141, 218);
}

#dashboard-top-boxes > div:nth-child(3) {
    background-color: rgb(150, 51, 243);
}

#dashboard-top-boxes > div:nth-child(4) {
    background-color: rgb(55, 35, 241);
}

#dashboard-top-boxes > div > span:nth-child(2) {
    font-weight: bold;
    font-size: 1.2em;
}

#dashboard-top-boxes > div > span:nth-child(2) i {
    color: rgba(233, 233, 233, 0.548);
}

#dashboard-mid-box {
    width: 99%;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#daily-sales {
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: first baseline;
    justify-content: space-between;
}

#daily-sales-box-wrapper {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.daily-sales-boxes {
    /* border-radius: 15px; */
    width: 49%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: white;
}

.daily-sales-boxes:nth-child(1) {
    background-color: rgb(0, 140, 255);
}

.daily-sales-boxes:nth-child(2) {
    background-color: tomato;
}

.daily-sales-location {
    border-bottom: 2px solid rgba(226, 226, 226, 0.247);
    width: 40%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.daily-sales-figure {
    width: 90%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.daily-sales-figure > span {
    /* border: 1px solid; */
    width: 33%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    font-size: 24px;
    font-weight: bolder;
    scale: .8;
}

.daily-sales-figure > span span {
    font-size: 1.5em;
}

.daily-sales-amount {
    width: 90%;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.daily-sales-amount-figure {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    font-family: monospace;
}

.charts-grid {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.chart-card {
    background: #fff;
    width: 30%;
    padding: 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    scale: .9;
}

.chart-card > div {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    scale: .8;
}

#inventory-sub-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    /* display: none; */
}

.all-panel-h1 {
    width: 90%;
    height: 5%;
    margin-left: 5%;
    font-weight: lighter;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* font-size: 2rem; */
    font-weight: lighter;
    color: grey;
}

.all-panel-h1 i {
    scale: .7;
}

#inventory-header {
    /* border-bottom: 1px solid rgba(128, 128, 128, 0.425); */
    width: 100%;
    height: 10%;
    display: flex;
    align-items: last baseline;
    justify-content: start;
}

#inventory-header ul {
    list-style: none;
    width: 30%;
    height: 70%;
    display: flex;
    align-items: last baseline;
    justify-content: start;
}

#inventory-header ul li {
    border: 1px solid rgba(128, 128, 128, 0.425);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 40%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: grey;
    cursor: pointer;
}

#search-input-cover {
    width: 70%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 1%;
}

#search-input-cover select {
    border: 1px solid rgba(128, 128, 128, 0.425);
    border-radius: 20px;
    width: 20%;
    height: 70%;
    padding-left: 1%;
    font-size: 15px;
    color: grey;
    background-color: white;
}

#search-input-cover select:focus {
    outline: 2px solid rgba(0, 132, 255, 0.466);
    background-color: white;
}

#search-input-cover input {
    border: 1px solid rgba(128, 128, 128, 0.425);
    border-radius: 20px;
    width: 60%;
    height: 70%;
    padding-left: 1%;
    font-size: 18px;
    color: grey;
    /* background-color: inherit; */
}

#search-input-cover input:focus {
    border: none;
    outline: 2px solid rgba(0, 132, 255, 0.466);
    background-color: white;
}

#search-input-cover button {
    border: none;
    border-radius: 20px;
    width: 10%;
    height: 70%;
    color: white;
    background-color: rgba(255, 17, 0, 0.637);
}

#inventory-tables-cover {
    width: 100%;
    height: 90%;
}

#inventory-tables-cover table {
    border-collapse: collapse;
    position: absolute;
    width: 100%;
    color: grey;
    background-color: white;
}

#inventory-tables-cover table thead {
    font-size: 13px;
    color: rgb(255, 255, 255);
    background-color: rgb(25, 76, 105);
}

#inventory-tables-cover table thead th {
    text-align: left;
    padding: 10px;
    font-weight: lighter;
}

#inventory-tables-cover table tbody {
    font-size: 13px;
}

#inventory-tables-cover table tbody tr {
    border-bottom: 1px solid rgba(128, 128, 128, 0.356);
    height: 1.5em;
}

#inventory-tables-cover table tbody tr td {
    padding: 10px;
}

#inventory-tables-cover table tbody tr td button {
    border-radius: 5px;
    border: none;
    width: 5em;
    height: 2em;
    color: white;
    background-color: rgba(30, 168, 248, 0.637);
}

#sales-stats-cover {
    width: 100%;
    height: 12%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 1%;
}

#sales-stats-cover .card {
    border-radius: 10px;
    width: 25%;
    height: 100%;
    padding-left: 1%;
    display: flex;
    flex-direction: column;
    align-items: first baseline;
    justify-content: space-evenly;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    color: #fff;
    scale: .9;
}

#sales-stats-cover .card:nth-child(1) {
    background-color: rgb(57, 22, 184);
}

#sales-stats-cover .card:nth-child(2) {
    background-color: rgb(146, 27, 146);
}

#sales-stats-cover .card:nth-child(3) {
    background-color: rgb(46, 154, 255);
}
#sales-stats-cover .card:nth-child(4) {
    background-color: rgb(247, 92, 36);
}

#sales-stats-cover .card h3 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:24px;
}

#sales-stats-cover .card p {
    font-size: 18px;
}

.progress-ring {
    position: relative;
    width: 100px;
    height: 100px;
}

.progress-ring circle {
    fill: none;
    stroke-width: 10;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.progress-ring text {
    font-size: 16px;
    fill: rgba(255, 255, 255, 0.877);
}

#sales-search {
    width: 100%;
    height: 5%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    /* scale: .9; */
}

#sales-search > div {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 1%;
}

#sales-search input, select {
    border-radius: 1.5em;
    border: 1px solid rgba(128, 128, 128, 0.479);
    width: 100%;
    height: 90%;
    padding-left: 5%;
}

#sales-search button {
    border-radius: 1.5em;
    border: none;
    width: 40%;
    height: 100%;
    color: white;
    background-color: rgba(255, 17, 0, 0.637);
}

#sales-table-cover {
    width: 100%;
    height: 60%;
    font-size: 13px;
}

#sales-sub-panel table {
    border-collapse: collapse;
    border: none;
    width: 100%;
    background-color: white;
}

#sales-sub-panel table thead {
    color: rgb(255, 255, 255);
    background-color: rgb(25, 76, 105);
}

#sales-sub-panel table thead th {
    border: none;
    text-align: left;
    height: 2.5em;
    font-weight: lighter;
}

#sales-sub-panel table tr {
    border-bottom: 1px solid rgba(128, 128, 128, 0.384);
    height: 1.5rem;
}

#sales-sub-panel table tr td p {
    border-radius: 10px;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    scale: .8;
}

.tadi-loc {
    background-color: rgba(153, 205, 50, 0.342);
}

.accra-loc {
    background-color: rgba(255, 99, 71, 0.37);
}

#transfer-search {
    width: 100%;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 1%;
}

#transfer-search-input {
    border-radius: 1.5em;
    border: none;
    width: 89%;
    height: 60%;
    padding-left: 1%;
}

#transfer-search-input:focus {
    border: none;
    outline: 2px solid rgba(0, 132, 255, 0.466);
    background-color: white;
}

#transfer-search button {
    border: none;
    border-radius: 25px;
    width: 8%;
    height: 70%;
    color: white;
    background-color: rgba(255, 17, 0, 0.637);
    scale: .9;
}

#transfer-table-cover {
    height: 90%;
}

#transfer-table-cover table {
    border-collapse: collapse;
    width: 100%;
    background-color: white;
}

#transfer-table-cover table thead {
    /* height: 2em; */
    font-weight: lighter;
    color: rgb(255, 255, 255);
    background-color: rgb(25, 76, 105);
}

#transfer-table-cover table thead th {
    padding: 10px;
    font-weight: lighter;
    text-align: left;
}

#transfer-table-cover table tbody tr {
    border-bottom: 1px solid rgba(128, 128, 128, 0.404);
    height: 2.5em;
}

#transfer-table-cover table tbody tr td {
    padding: 10px;
    font-size: 13px;
}

#transfer-table-cover table span {
    border-radius: 10px;
    width: 10em;
    padding: 5px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}