* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Inter", sans-serif;
}

html {
    font-size: 62.5%;
}
.content {
    padding: 2rem 2rem 0 2rem;
    /* overflow-y: scroll;
    overflow-x: hidden; */
}
.d-grid {
    display: grid;
}
.grid-2-col {
    grid-template-columns: 1fr 1fr;
}
.grid-3-col {
    grid-template-columns: 1fr 1fr 1fr;
}
.grid-4-col {
    grid-template-columns: repeat(4, 1fr);
}
.grid-5-col {
    grid-template-columns: repeat(5, 1fr);
}
.grid-6-col {
    grid-template-columns: repeat(6, 1fr);
}
.grid-7-col {
    grid-template-columns: repeat(7, 1fr);
}
.grid-5-col-nomor {
    grid-template-columns: auto 1fr 1fr 1fr 1fr;
}
.grid-6-col-nomor {
    grid-template-columns: 2rem 1fr 1fr 1fr 1fr 1fr;
}

.gap-1 {
    gap: 1rem;
}
.gap-2 {
    gap: 2rem;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.span-all {
    grid-column: 1/-1;
}

.d-flex {
    display: flex;
}
.j-space-between {
    justify-content: space-between;
}
.a-center {
    align-items: center;
}

.data-entry {
    background-color: #495057;
}

.progress {
    background-color: #f59f00;
}

.barang-kering {
    background-color: #4263eb;
}

.barang-borongan {
    background-color: #f59f00;
}

.barang-marketing {
    background-color: #0ca678;
}

.frozen-food {
    background-color: #f03e3e;
}

.d-none {
    display: none;
}
.mtop-2 {
    margin-top: 2rem;
}

.s-center {
    align-self: center;
}

.s-start {
    align-self: flex-start;
}
.j-s-start {
    justify-self: start;
}
.j-center {
    justify-content: center;
}
.j-icenter {
    justify-items: center;
}
.w-100 {
    width: 100%;
}

.h-100vh {
    height: 100vh;
}
.h-100 {
    height: 100%;
}
.flex-column {
    flex-direction: column;
}
.m-top-2 {
    margin-top: 2rem;
}
.m-top-4 {
    margin-top: 4rem;
}
sup {
    color: red;
    font-size: 1.6rem;
}

.m-left-auto {
    margin-left: auto;
}
.span-2 {
    grid-column: 3/-1;
}
.token {
    width: 100%;
    box-shadow: 0 0 4px 1px #f03e3e;
    grid-column: span 2;
    padding: 3rem;
    box-sizing: border-box;
    text-align: center;
    margin-top: 2rem;
}
.token label {
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.token input {
    width: 100%;
    font-size: 1.9rem;
    padding: 1rem 2rem;
}
