@import url('https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed&family=Barlow+Semi+Condensed&display=swap');

/*
    font-family: 'Barlow', sans-serif;
    font-family: 'Barlow Condensed', sans-serif;
    font-family: 'Barlow Semi Condensed', sans-serif;
*/

:root {
    --color1 : #FFD700;
    --color2 : #bcbd36;
    --color3 : #53D2DC;
    --color4 : #FFE3B3;
    --color5 : #FFF;
    --color6 : darkcyan;
    --color7 : #22ADAD;
}

@font-face {
    font-family: "Barlx";
    src: url("/font/Barlow-Regular.ttf");
}


* {
    box-sizing: border-box;
    font-family: 'Barlx', sans-serif;
    scroll-behavior: smooth;
}
body {
    font-size: 1rem;
    margin: 0;
    padding: 0;
    font-family: 'Barlow', sans-serif;
    background: #eee;
    overflow: hidden;
}
.dis-none {
    display: none !important;
}
.hr {
    width: 45%;
    height: 2px;
    margin: 15px auto;
}

.h-date {
    width: 100%;
    text-align: center;
}

input[type="checkbox"] {
    position: relative;
}
input[type="checkbox"]::after {
    content: attr(data-text) "";
    position: absolute;
    top: 100%;
    width: 150%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 8px;
    color: inherit;
}


.prepare, .green, [data-bg="green"] {
    background: linear-gradient(45deg, limegreen,  green) !important;
    color: white !important;
    border: none !important;
}
.color-prepare, .clr-green, [data-color="green"] { color: limegreen !important;}
.br-prepare {
    border-color: limegreen !important;
}

.shipping, .purple, [data-bg="purple"] {
    background: linear-gradient(45deg, rebeccapurple,  purple) !important;
    color: white !important;
    border: none !important;
}
.color-shipping, .clr-purple, [data-color="purple"] { color: purple !important;}
.br-shipping { border-color: purple !important;}

.ready, .blue, [data-bg="blue"] {
    background: linear-gradient(45deg, skyblue, deepskyblue) !important;
    color: white !important;
    border: none !important;
}
.color-ready, .clr-blue, [data-color="blue"] { color: deepskyblue !important;}
.br-ready {border-color: deepskyblue !important;}

.delivery, .pickup, .red, [data-bg="red"] {
    background: linear-gradient(45deg, red, darkred) !important;
    color: white !important;
    border: none !important;
}
.color-delivery, .color-pickup, .clr-red, [data-color="red"] {color: red !important;}
.br-delivery, .br-pickup {border-color: red !important;}

.instal, .yellow, [data-bg="yellow"] {
    background: linear-gradient(45deg, yellow, goldenrod) !important;
    color: black !important;
    border: none !important;
}
.color-instal, .clr-yellow, [data-color="yellow"] {color: #FFD700 !important;}
.br-instal {border-color: #FFD700 !important;}

.past, .black, [data-bg="black"] {
    background: linear-gradient(45deg, #111, black) !important;
    color: white !important;
    border: none !important;
}
.color-past, .clr-black, [data-color="black"] {color: black !important;}
.br-past {border-color: black !important;}

.fuin, .grey, .gray, [data-bg="grey"] {
    background: linear-gradient(45deg, lightgray, gray) !important;
    color: white !important;
    border: none !important;
}
.color-fuin, .clr-grey, [data-color="grey"] {color: grey !important;}
.br-fuin {border-color: grey !important;}

.fuout, .orange, [data-bg="orange"] {
    background: linear-gradient(45deg, orange, orangered) !important;
    color: white !important;
    border: none !important;
}
.color-fuout, .clr-orange, [data-color="orange"] {color: orange !important;}
.br-fuout {border-color: orange !important;}

.white, [data-bg="white"] { background: linear-gradient(45deg, white, #eee);}
.br-white, .clr-white, [data-color="white"] {color: white !important;}
.color-white {color: white !important;}

.color-default, .darkcyan, .clr-default, [data-color="default"] {color: darkcyan !important;}
.default, [data-bg="default"] {
    background: linear-gradient(45deg, var(--color6), var(--color7));
    color: white;
}


.bsc {
    font-family: 'Barlow Semi Condensed', sans-serif !important;
}
.bc {
    font-family: 'Barlow Condensed', sans-serif !important;
}

.pages {
    width: min(100%, 1200px) !important;
    margin: 0 auto;
    position: relative;
}

.grays {
    
}


#for-data-display {
   position: fixed;
   top: 0;
   left: 0; 
   height: 100vh;
   width: 100vw;
   margin: 0;
   padding: 10px;
   z-index: 100000;
   background: rgba(0,0,0,.5);
   backdrop-filter: blur(4px);
}
#for-data-display h4 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
   border: 2px solid white;
   border-radius: 4px;
}
#the-data, .the-datax {
   height: calc(100vh - 100px);
   background: transparent;
   width: calc(100vw - 20px);
   overflow: scroll;
   border: 4px solid transparent;
   border-radius: 4px;
   padding: 5px;
}
table {
   width: fit-content !important;
   position: relative;
   border-collapse: separate;
   background: transparent !important;  
}
tr td {
   width: 170px !important;
   padding: 3px !important;
   text-align: center !important;
   font-size: 11px;
   border: none;
   background: white;
   color: dimgray;
   border-spacing: 5px;
}
tbody tr:nth-child(even) td {
    background: #ccc !important;
    color: #333;
    border: none;
}
thead td {
    background: darkcyan;
    color: white;
}


.dashboard {
    position: relative;
    overflow: scroll;
    height: 100vh;
    width: 100vw;
    padding-bottom: 70px;
}
.dashboard-img {
    height: 200px;
    width: 100%;
    background: linear-gradient(45deg, #009C9C, #006969);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
.dashboard-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px;
    color: white;
    position: sticky;
    top: 0;
    backdrop-filter: blur(4px);
    z-index: 1000;
}
.dashboard-top h4 {
    margin: 0;
}

.dashboard-schedule {
    padding: 10px;
    color: white;
}
.dashboard-schedule span {
    margin: 0;
    padding: 0;
    font-size: 10px;
}
.dashboard-schedule p {
    margin: 0;
    padding: 0;
    font-size: 25px;
    font-weight: bolder;
}

.dashboard-sales {
    margin: 0 10px;
    padding: 10px;
    border-radius: 7px;
    background: linear-gradient(45deg, var(--color5), var(--color5));
    background: #efefef;
}
.dash-sales-mtd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    position: relative;
}
.dash-sales-mtd::after {
    content: attr(data-text) "";
    position: absolute;
    bottom: calc(100% - 3px);
    left: 2px;
    font-size: 8px;
    font-weight: bolder;
    color: var(--color6);
}
.dash-sales-mtd p {
    font-size: 25px;
    font-weight: bolder;
    padding: 0;
    margin: 0;
    position: relative;
    color: darkcyan;
}
.dash-sales-mtd p::after {
    content: attr(data-percent) "";
    position: absolute;
    left: calc(100% + 4px);
    bottom: 3px;
    font-size: 10px;
    color: var(--darkBlue);
}
.dash-sales-mtd span {
    font-size: 8px;
    font-weight: bold;
    color: darkcyan;
}
.dash-sales-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3px;
}
.sales-detail-box {
    --color: transparent;
    background: linear-gradient(45deg, var(--color6), var(--color6));
    color: white;
    padding: 7px;
    border-radius: 5px;
    width: 100%;
}
.sales-detail-box h5 {
    padding: 0;
    margin: 0;
    width: 80%;
    font-size: 8px;
    border-bottom: 1.3px solid var(--color1);
    color: var(--color1);
}
.sales-detail-mtd, .sales-detail-gap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sales-detail-mtd {
    margin: 4px 0;
}
.sales-detail-mtd p, .sales-detail-mtd span {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: bold
}
 .sales-detail-mtd span {
     font-size: 9px
 }
.sales-detail-gap p, .sales-detail-gap span {
    margin: 0;
    padding: 0;
    font-size: 8px;
}

.dashboard-calendar {
    margin: 0 10px;
    padding: 10px;
    border-radius: 7px;
    border: 0px solid white;
    backdrop-filter: blur(4px);
    background: #eee;
}
.calendar-control {
    display: flex;
    justify-content: space-between;
    align-content: center;
    gap: 4px;
}
.calendar-control i {
    height: 25px;
    aspect-ratio: 1;
    border: 1.3px solid transparent;
    color: var(--color1);
    font-size: 16px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.calendar-control span {
    color: var(--color6);
    border-radius: 4px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: bolder;
    border: 1.3px solid transparent;
    text-transform: uppercase;
}
.calendar-day {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 5px;
    gap: 2px;
    width: 100%;
    margin: 10px 0 5px;
}
.calendar-day span {
    width: 100%;
    text-align: center;
    color: var(--color6);
    font-size: 10px;
    padding: 2px;
    text-transform: uppercase;
    font-weight: bolder;
}
.calendar-date-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 2px;
    margin-top: 4px;
}
.calendar-date {
    width: calc((100% - 12px)/7);
    font-size: 8px;
    aspect-ratio: 3/4;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    gap: 2px;
}
.calendar-date.xdate {
    border: none !important;
}
.calendar-date .date-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
    padding-left: 3px;
    border-radius: 0px;
    border-bottom: 1.5px dashed darkcyan;
}
.date-top span:nth-child(1) {
    font-size: 12px;
    font-weight: bolder;
}
.date-middle {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}
.date-data {
    height: 14px;
    aspect-ratio: 1;
    border: 3px solid white !important;
}
.date-bottom {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
}
.date-bottom i {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    font-size: 8px;
}


.dash-today-sales {
    --color: darkcyan;
    margin: 20px 10px;
    padding: 10px;
    position: relative;
    background: #eee;
    border-radius: 7px;
}
.db-today-main {
    position: relative;
    padding: 10px 0;
    border-radius: px;
    margin: 0;
    margin-bottom: 10px;
    background: #eee;
}
.db-today-main label {
    font-size: 12px;
    padding: 0;
    color: dimgray;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 3px;
    left: 0;
}
.db-today-main p {
    margin: 0;
    padding: 5px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: darkcyan;
    font-weight: bolder;
    font-size: 14px;
}
.db-today-main p span {
    font-weight: 0;
    font-size: 10px;
}


.db-today-sales {
    gap: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.db-today-sales-group {
    position: relative;
    width: 100%;
    border-radius: 5px;
    color: var(--color);
    background: #eee;
    padding: 5px 10px;
    border: 1.3px solid var(--color);
}
.db-today-sales-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 8px;
    color: dimgray;
}
.db-today-sales-top label {
    font-weight: bolder;
    text-transform: uppercase;
    font-size: 9px;
}
.db-today-sales-top span {
    font-weight: bolder;
}
.db-today-sales-group p {
    width: 100%;
    margin: 0;
    padding: 3px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bolder;
    font-size: 11px;
}
.db-today-diagram {
    width: 100%;
    height: 5px;
    border-radius: 100px;
    background: lightgray;
    position: relative;
    overflow: hidden;
}
.db-today-bars {
    height: 100%;
    background: var(--color);
    width: 0;
}


.today-dept {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    gap: 10px;
    border-top: 1.3px solid darkcyan;
    padding-top: 7px;
    position: relative;
}
.today-dept::after {
    content: attr(data-text) "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -60%);
    font-size: 9px;
    color: darkcyan;
    background: #eee;
    padding: 2px 5px;
    text-transform: uppercase;
    font-weight: bolder;
}
.today-dept-code {
    width: 25px;
    aspect-ratio: 16/9;
    display: grid;
    place-items: center;
    position: relative;
    border: 1.3px solid darkcyan;
    border-radius: 4px;
}
.today-dept-code::after {
    content: attr(data-code);
    font-size: 12px;
    color: darkcyan;
}

.dashboard-task {
    padding: 10px;
    margin: 10px;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
    border-radius: 5px;
    background: linear-gradient(45deg, red, darkred) ;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dashboard-task h5 {
    width: 80%;
    margin: 0 0 3px 0;
    border-bottom: 1.3px solid #FFD700 ;
}
.dashboard-task i { 
    color: var(--color1);
}




.dashboard-calendar-detail {
    z-index: 100000;
    width: 100vw;
    height: 100vh;
    background: darkcyan;
    position: fixed;
    top: 100vh;
    left: 0;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.dashboard-calendar-detail.on {
    top: 0;
}

.dashboard-calendar-detail i.fa-x {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid white;
    border-radius: 100%;
    height: 40px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    color: white;
    opacity: .5;
}
.date-detail-list {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    height: 86%;
    width: 100%;
    background: linear-gradient(45deg, white, #ddd);
    border-radius: 20px 20px 0 0;
}
.date-detail-list::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    height: 5px;
    width: 100px;
    border-radius: 100px;
    background: darkgray;
}
.date-detail-list h4 {
    position: sticky;
    top: 0;
    margin: auto;
    text-align: center;
    width: fit-content;
    padding: 5px 10px;
    color: darkcyan;
    border-bottom: 2px solid var(--color1);
}
.date-detail-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    margin: 5px 0;
    border-radius: 4px;
    background: linear-gradient(45deg, #00ACAC, darkcyan);
}
.date-detail-link i:nth-child(1){
    height: 30px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    border-radius: 4px;
}
.date-detail-link i.fa-circle-info{
    aspect-ratio: 1;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    padding: 0px 7px;
}
.date-detail-link p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    margin: 0;
    padding: 1px 5px;
    width: 100%;
    font-weight: thin;
    color: white;
}




#fu, #as, #sc, #setting {
    height: 100vh;
    width: 100vw;
    overflow: auto;
    padding-bottom: 80px;
    position: relative;
}
#fu .fu-top, #as .as-top, #setting .set-top {   
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding: 10px;
    backdrop-filter: blur(4px);
    position: sticky;
    top: 0;
}
:is(.fu-top, .as-top, .sc-top, .set-top) h5 {
    margin: 0;
    padding: 0;
}

.fu-search {
    padding: 10px 20px;
    border-radius: 4px;
}
.search-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    width: 100%;
    background: #eee;
}
.search-group label {
    position: absolute;
    top: 0;
    left: 9px;
    transform: translateY(-50%);
    font-size: 12px;
    padding: 0 7px;
    background: #eee;
}
.search-group input {
    width: 100%;
    padding: 5px 30px 5px 10px;
    border: 1.3px solid ;
    border-radius: 6px;
    background: transparent;
    font-size: 1rem;
}
.search-group i {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    font-size: 13px;
}


.as-note {
}
.as-note-progress {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0 20px;
    row-gap: 12px;
    border-radius: 10px;
    background: #eee;
    padding: 15px 10px;
    position: relative;
    overflow: hidden;
}
.progress-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border-radius: 3px;
    place-self: center;
    width: 80%;
    aspect-ratio: 1;
    padding: 0 7px;
    transition: all .4s cubic-bezier(0.47, 0, 0.745, 0.715);
}
.progress-box.on {
    border: 1.3px dashed rgba(0,0,0,.2);
}
.progress-box img {
    width: 30px !important;
    mix-blend-mode: darken;
    filter: contrast(100%);
}
.progress-box i {
    display: grid;
    place-items: center;
    width: 100%;
    color: darkcyan;
    border-bottom: 1.3px solid #00BCBC;
    font-size: 19px;
    margin: 0 5px;
    padding-bottom: 5px;
}
.progress-box label {
    font-size: 11px;
    margin: 0 0 0 0;
    padding: 0;
    text-align: center;
    color: #444;
    border-top: 1.3px solid transparent;
    width: 200%;
    margin-top: 1.3px;
    font-style: italic;
}
.as-note-progress .effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
}

.box-off {
    transform: scale(.85);
    filter: grayscale(100%);
}


.as-search {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 20px;
    padding: 12px;
    background: #eee;
    border-radius: 11px;
}

.as-group {
    position: relative;
    margin: 6px 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
}
.as-status-img {
    width: 56px;
    border-radius: 6px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 2px solid;
}
.as-status-img img {
    width: 75%;
}
.as-status-img span {
    width: 100%;
    font-size: 8px;
    text-align: left;
    text-transform: uppercase;
    font-weight: bolder;
    color: #444;
    margin: 0;
    padding: 0;
}
.as-gap {
    --bg : darkcyan;
    width: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    gap: 4px;
}
.as-gap::before {
    content: "";
    width: 3px;
    height: 20px;
    background: var(--bg);
    border-radius: 100px;
}
.as-gap::after {
    content: "";
    width: 3px;
    height: 30px;
    background: var(--bg);
    border-radius: 100px;
}
.as-group-data {
    width: 100%;
    padding: 5px 0;
    color: #333 !important;
}
.as-group-data p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.data-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2px 5px;
}
.data-bellow {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    border-top: 1px dashed gray;
    padding-top: 4px;
    margin-top: 4px;
    gap: 6px;
}
.data-bellow p {
    font-size: 12px;
    font-style: italic;
    text-align: left;
}
.data-bellow button {
    font-size: 10px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    border-width: 1.4px;
    border-radius: 4px;
    padding: 4px 10px;
}
.data-bellow img {
    width: 25px;
}
.data-bellow span {
    font-size: 10px;
    font-weight: bold;
    font-style: italic;
}
.bellow-xtra {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    width: fit-content;
}
.bellow-xtra p {
    -webkit-line-clamp: 2;
    font-size: 11px;
}


.add-list {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    position: relative;
}
.add-link {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    height: 200px;
    aspect-ratio: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    background: white;
    border-radius: 5px;
}
.add-link i { 
    width: 35%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: linear-gradient(45deg, var(--color6), var(--color7));
    border-radius: 5px;
    position: relative;
    color: white;
    
}
.add-link i:after {
    content: attr(data-text) "";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) scale(.7);
    font-size: 8px;
    width: 200%;
    text-align: center;
}




#add-fu, #add-as, #add-link, #add-task{
    padding: 0;
    background: linear-gradient(45deg, var(--color6), var(--color7));
    overflow: scroll;
    height: calc(100vh - 70px);
}
:is(#add-fu, #add-link, #add-as, #add-task) h1 {
    padding: 60px 0;
    margin: 0;
    width: 100%;
    text-align: center;
    color: white;
}
.fu-form, .as-form, .link-form, .task-form {
    background: #efefef;
    padding: 20px;
    height: fit-content;
    min-height: calc(100vh - 200px);
}



.reciept {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    color: #007A7A;
    position: relative;
}
.reciept::after {
    content: attr(data-show) "";
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-size: 14px;
    color: red;
    text-align: center;
}
.reciept input {
    padding: 5px;
    border: 1.3px solid #00ADAD;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: #006969;
    border-radius: 4px;
    text-align: center;
    text-transform: uppercase;
}
.reciept input::placeholder {
    color: #AAA;
}
.reciept-store {width: 45px;}
.reciept-cashier {width: 40px;}
.reciept-date {width: 90px;}
.reciept-order {width: 40px;}
#reciept-date-control {
    margin: 0 30%;
    opacity: 0;
    padding: 5px;
    width: 40%;
}

.greys {
    filter: grayscale(100%);
}

.items-add {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #005858;
    position: relative;
    margin-top: 50px;
}
.items-add h4{
    margin: 0 0 0 0;
    padding: 0;
}
.items-add h5 {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 0;
    transform: translateX(0%);
    margin: 0 0 0 0;
    padding: 0;
    
}
.items-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1.3px solid darkcyan;
    gap: 3px;
    padding: 5px 0 15px;
    margin: 5px 0;
}
.items-group input, .items-group select {
    padding: 4px 8px;
    margin: 0;
    border: 1.3px solid #00BCBC;
    outline: none;
    background: transparent;
    border-radius: 4px;
    color: darkcyan;
}
.items-group input::placeholder {
    color: #bbb;
}
.article {
    width: calc(25% - 2px);
    min-width: 50px !important;
    text-align: center;
    font-weight: bolder;
    color: #006969;
}
.product {
    width: calc(75% - 2px);
    min-width: 90px;
}
.qty {
    width: calc(20% - 2px);
    min-width: 40px;
}
.price {
    width: calc(40% - 2px);
    min-width: 50px;
}
.total {
    width: calc(40% - 2px);
    min-width: 50px;
}
.site {
    width: calc(100% - 31px);
    min-width: 100px;
}
.items-group i {
    aspect-ratio: 1;
    color: white;
    text-align: center;
    width: 28px;
    display: grid;
    place-items: center;
    font-size: 13px;
    background: red;
    border-radius: 4px;
    border: 1.3px solid white;
}



.add-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    position: relative;
    width: 100%;
    margin: 15px 0;
}
.add-group label {
    position: absolute;
    bottom: calc(100%);
    transform: translateY(50%);
    left: 7px;
    background: #eee;
    color: dimgray;
    padding: 0 5px;
    font-size: 10.5px;
}
.add-group label span {
    font-size: 8px;
    font-style: italic;
}
.add-group input, .add-group select, .add-group textarea {
    padding: 7px 10px;
    border: 1.3px solid #00BCBC;
    background: transparent;
    font-size: 15px;
    color: #005858;
    border-radius: 4px;
    width: 100%;
}
.add-group .check {
    width: 35px;
    aspect-ratio: 1;
    position: relative;
    margin: 0 auto;
}
.add-group i {
    font-size: 17px;
    height: 35px;
    aspect-ratio: 1;
    color: darkcyan;
    border-radius: 4px;
    border: 1.3px solid darkcyan;
    display: grid;
    place-items: center;
}

/*
.form-in-box .add-group {
    mix-blend-mode: screen;
}
.form-in-box .add-group label {
    background: #000;
    color: #fff !important;
}
.form-in-box .add-group input, .form-in-box .add-group select, .form-in-box .add-group textarea {
    border: 1.3px solid white;
    color: white;
}
*/

.add-task {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #006969;
    padding: 0;
}
.add-task h5 {
    margin: 0;
    padding: 0;
}
.add-task-list {
    border-top: 1.3px solid darkcyan;
    padding-top: 3px;
    margin-top: 3px;
}
.task-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
    gap: 4px;
}
.task-group input[type="checkbox"] {
    width: 30px;
    aspect-ratio: 1;
}
.task-group input[type="text"] {
    width: 100%;
    padding: 5px 10px;
    border: 1.3px solid #00BCBC;
    outline: none;
    background: transparent;
    border-radius: 4px;
    color: 15px;
    color: darkcyan;
}
.task-group i {
    font-size: 16px;
    margin-left: 5px;
    color: white;
    background: red;
    border: 1.3px solid white;
    display: grid;
    place-items: center;
    height: 30px;
    aspect-ratio: 1;
    border-radius: 4px;
}



.fp-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    position: relative;
}
.fp-form::after {
    content: attr(data-text) "";
    position: absolute;
    bottom: 100%;
    left: 20px;
    font-size: 12px;
    font-weight: bold;
    color: darkcyan;
}
.fp-form input[type="number"], .fp-form input[type="text"] {
    padding: 5px 10px;
    border: 1.3px solid #00BCBC;
    outline: none;
    background: transparent;
    border-radius: 4px;
    color: 15px;
    color: #006969;
}
.fp-form input[type="number"] {width: 100px;}
.fp-form input[type="text"] {width: 100%;}
.fp-form input#fp-activated {
    width: 40px;
    aspect-ratio: 1;
    position: relative;
}
.fp-form input::placeholder {
    color: #bbb;
}

.form-btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.form-btn {
    text-align: center;
    padding: 5px 10px;
    width: 100px;
    border-radius: 6px;
    font-size: 14px;
}

nav {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 15px 10px;
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: darkcyan;
    gap: 10px;
    z-index: 100;
}
nav .nav-link {
    padding: 0 10px;
    width: fit-content;
    height: 40px;
    text-align: center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    color: white;
    transition: all .4s cubic-bezier(0.23, 1, 0.320, 1);
}
.nav-link.on {
    border-bottom: 3px solid var(--color1);
    transform: scale(1.3);
    font-weight: bolder;
}
.nav-link i {
    display: block;
    font-size: 16px;
}
.nav-link.on i {
    color: var(--color1);
}
.nav-link span {
    font-size: 8px;
    padding: 2px 0;
}


#sc {
    position: relative;
    overflow: scroll;
    background: linear-gradient(0deg, rgb(245,245,245), #fff);
    height: calc(100vh - 73px);
}
.sc-top {
    padding: 10px 10px 0;
    border-radius: 0 0 30px 30px;
    position: relative;
    background: linear-gradient(45deg, var(--color6), var(--color7));
    height: 250px;
}
.sc-top h4 {
    margin: 0 0 15px;
    padding: 0;
    width: fit-content;
    transform: translateX(30px);
    text-transform: uppercase;
}
.sc-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #fff;
    position: sticky;
    top: 0;
    backdrop-filter: blur(5px);
}
.sc-nav h6 {
    padding: 0;
    margin: 5px 0
}
.sc-date {
    position: relative;
    margin: 0 20px;
    padding: 0;
    display: flex;
    justify-content: stretch;
}
#sc-date {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#sc-text-date {
    flex: 1;
    padding: 6px 15px;
    font-size: 14px;
    border: 1.4px solid #008B8B66;
    border-radius: 100px;
    background: transparent;
    color: #006969;
}
.sc-date i {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #00BCBC;
}

.sc-diagram {
    padding: 15px 15px 45px;
    margin: 20px auto;
    position: relative;
    width: min(calc(100% - 20px), 350px);
    aspect-ratio: 4.5/3;
    background: white;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,.0);
    overflow: hidden;
}
.diagram-bg {
    --pixel : 10px;
    width: calc(100% - 2* var(--pixel));
    height: calc(100% - (4 * var(--pixel)));
    position: absolute;
    left: 0;
    top: 0;
    margin: var(--pixel);
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: column;
}
.diag-line {
    border-top: .5px dashed #ddd;
}
.sc-diagram::after {
    content: "";
    position: absolute;
    bottom: 41px;
    left: 10px;
    width: calc(100% - 20px);
    border-top: .5px dashed lightgray;
    z-index: -1;
}
.diagram-box {
    position: relative;
    height: 96%;
    width: calc(100%/4);
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-self: flex-end;
    transform: translateY(2px);
    transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.diagram-box::after {
    display: none;
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-2px);
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: transparent;
    border-top: .4px dashed lightgray;
}
.diagram-box::before {
    content: attr(data-type)"";
    position: absolute;
    left: 50%;
    top: calc(100% + 15px);
    transform: translateX(-50%);
    width: 100%;
    color: darkcyan;
    font-size: 9px;
    text-align: center;
    font-weight: bolder;
    background: darkcyan;
    color: #fff;
    border-radius: 100px;
    padding: 3px;
}
.sc-detail-box {
    position: absolute;
    top: 14px;
    left: 100%;
    width: 65%;
    padding-top: 3px;
    padding-left: 5px;
    height: 91%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 7px;
    background: white;
    overflow: scroll;
}
.sc-detail-box.on {
    left: 30%;
}

.sc-detail-sales {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: darkcyan;
    font-weight: bold !important;
    padding: 5px;
    position: relative;
    border: 1.3px solid #008B8B33;
    border-radius: 5px;
}
.sc-detail-sales.x {
    border: none;
    flex: 1;
    color: #000 !important;
}
.sc-detail-sales::before {
    content: attr(data-text) "";
    position: absolute;
    top: 0;
    left: 10px;
    font-size: 10px;
    color: inherit;
    font-style: italic;
    background: white;
    transform: translateY(-50%) scale(.8);
    padding: 0 4px;
}

.sc-detail-sales p {
    margin: 0;
    padding: 0;
    font-size: 12px;
}
.sc-detail-sales span {
    font-size: 10px;
    text-align: right;
}
#sc-today .today-span {
    font-size: 8px;
    padding-right: 25px;
}
.today-span .span {
    position: relative;
    width: 100px;
    text-align: right;
}
.today-span .span::after {
    content: attr(data-text)"";
    font-size: 8px;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    text-align: right;
    width: 25px;
}
.sc-close {
    font-size: 10px;
    width: 100%;
    padding: 6px 10px;
    color: white !important;
    margin: 0 auto;
    text-align: center;
    font-weight: bolder;
    border-radius: 100px;
    transform: scale(.7);
}

.acv-box, .today-box {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
}
.today-box {display: none;}
.acv-box::before {
    content: attr(data-mtd)"";
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: bold;
}
.acv-box::after {
    content: "371.67";
    position: absolute;
    bottom: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 8px;
    font-weight: bolder;
    display: none;
}
.today-box::before {
    content: "8.95";
    position: absolute;
    width: fit-content;
    text-align: center;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: bolder;
    bottom: calc(100% + 20px);
    left: 50%;
    display: none;
}

.gap {
    width: 40px;
    border-radius: 5px;
    background: linear-gradient(45deg, limegreen, green);
    position: relative;
}
.gap::after {
    content: attr(data-gap)"";
    color: inherit;
    font-size: 8px;
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) scale(.9);
    font-weight: bold;
}

.current {
    width: 40px;
    border-radius: 5px;
    background: linear-gradient(45deg, deepskyblue, deepskyblue);
}
.current::before {
    content: "";
}

.today {
    position: relative;
    width: 10px;
    height: 50%;
    border-radius: 100px;
    background: linear-gradient(45deg, deepskyblue, darkcyan);
}
.today::after {
    content: "-9.45";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) scale(.9);
    font-size: 8px;
    text-align: center;
    width: fit-content;
    font-weight: bold;
    color: darkcyan;
}
.today::before {
    content: "39.45";
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) scale(.9);
    font-size: 8px;
    text-align: center;
    width: fit-content;
    font-weight: bold;
    color: darkcyan;
}


.sc-weekly {
    background: white;
    margin: 20px;
    background: white;
    border-radius: 20px;
    padding: 10px 0;
    position: relative;
    overflow: scroll;
}
.weeks-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    position: sticky;
    left: 0;
}
.weeks-btn div {
    --color: transparent;
    padding: 3px;
    font-weight: bolder;
    font-size: 11px;
    width: 15%;
    text-align: center;
    background: transparent !important;
    text-transform: capitalize;
    border-bottom: 1.3px dashed var(--color);
    color: var(--color);
    text-transform: uppercase;
    transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.weeks-btn div.on {
    border: 1.3px solid;
}

.weekly {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    position: relative;
    padding: 0 10px;
}
.week-box {
    padding-right: 10px;
}
.days {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: fit-content;
}
.day-group {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
    border: .3px dashed #ddd;
    width: 150px !important;
}
.day-group.tommorow {
    filter: grayscale(100%);
    opacity: .5;
}
.day-detail {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 100%;
    left: 0;
    background: #dedede;
    padding: 5px;
    transition: all .4s  cubic-bezier(0.77, 0, 0.175, 1);
    overflow: scroll;
}
.day-group:hover .day-detail {
    top: 0;
}
.day-detail h6 {
    margin: 0;
    padding: 0;
    border-bottom: 1px dashed darkcyan;
    color: darkcyan;
}
.detail-group {
    --color: darkcyan;
    display: grid;
    grid-template-columns: 1fr;
    font-size: 8px;
    padding: 20px 5px 7px;
    border-radius: 5px;
    position: relative;
    margin: 10px 0;
    background: var(--color);
}
.detail-group label {
    position: absolute;
    transform: translate(3px, 2px);
    padding: 0 2px;
    font-weight: bolder;
    color: white;
    text-transform: uppercase;
    font-size: 10px;
    width: 100%;
    border-bottom: 1.6px solid white;
}
.detail-group span {
    font-weight: bolder;
    color: white;
    margin-top: 15px;
    position: relative;
    width: 100%;
    font-size: 14px;
}
.detail-group span::after {
    content: attr(data-text)"";
    position: absolute;
    top: 0;
    left: 0px;
    color: #ddd;
    font-size: 10px;
    transform: translateY(-12px) scale(1);
}
.detail-group span:nth-child(odd) {
    text-align: left;
}
.day-trx {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    background: lightgray;
    border-radius: 4px;
    color: #222;
    font-size: 12px;
    padding: 5px 10px;
    margin-bottom: 10px;
}
.day-trx p {
    margin: 0;
    padding: 0;
}
.day-no-sales {
    position: sticky;
    top: 0;
    width: 105%;
    height: 105%;
    background: #dedede;
    display: grid;
    place-items: center;
    text-transform: uppercase;
    z-index: 100;
}
.day-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    padding-left: 5px;
}
.day-top span {
    --color:  darkcyan;
    height: 28px;
    aspect-ratio: 1;
    border-radius: 4px;
    border: 1.3px solid var(--color);
    color: var(--color);
    display: grid;
    place-items: center;
    font-weight: bolder;
}
.day-top span::after {
    content: attr(data-date)"";
    font-size: 11px;
    color: inherit;
}
.day-sch {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: dimgray;
}
.day-sch p {
    margin: 0;
    padding: 0;
    font-size: 9px;
}
.day-sch label{
    --color: darkcyan;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: bolder;
    color: var(--color);
}
.day-diagram {
    padding: 20px 0px 20px;
    position: relative;
}
.zonk {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-0deg);
    font-weight: bolder;
    font-size: 25;
    color: gray;
    border: 1.3px solid transparent;
    border-radius: 7px;
    padding: 7px 10px;
    width: 100px;
    text-align: center;
    opacity: 1;
}
.d-diagram-box {
    height: 120px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    gap: 15px;
    border-top: .5px dashed #ccc;
    border-bottom: .5px dashed #ccc;
    padding: 0 5px;
}
.d-box {
    height: 100%;
    position: relative;
    display: grid;
    place-items: end;
}
.grayscale {
    filter: grayscale(100%);
    opacity: 0.1;
}
.d-dept-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin: 6px 3px 0;
    padding: 0 5px;
    border-bottom: 1.3px dashed lightgray;
}
.d-dept-group span {
    font-weight: bolder;
}
.d-dept-group p {
    margin: 0;
}
.d-box::before {
    content: attr(data-type)"";
    position: absolute;
    width: 100px;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: bolder;
    color: dimgray;
    text-align: center;
    text-transform: uppercase;
}
.d-bar {
    --color : transparent;
    --height: 70%;
    width: 12px;
    height: var(--height);
    background: var(--color);
    color: var(--color);
    border-radius: 100px;
    position: relative;
}
.d-bar::before {
    content: attr(data-target)"";
    position: absolute;
    width: 100px;
    top: calc(100% + 1.4px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: bolder;
    color: inherit;
    text-align: center;
}
.d-bar::after {
    content: attr(data-mtd)"";
    position: absolute;
    width: 100px;
    bottom: calc(100% + 1.4px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: bolder;
    color: inherit;
    text-align: center;
}

.weeky-box {
    width: inherit;
    position: relative;
    margin: 0;
    margin-top: 12px;   
}
.week-group {
    width: inherit;
    padding: 10px;
    border-radius: 10px;
    position: relative;
    border: .5px dashed #ddd;
}
.week-group p {
    position: absolute;
    transform: translate(10px, -50%);
    top: 0;
    left: 0;
    background: white;
    padding: 0 8px;
    margin: 0;
    font-size: 12px;
    font-weight: bolder;
    color: darkcyan;
}
.week-number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: dimgray;
    font-weight: bolder;
}
.week-number label {
    color: orangered;
}
.w-diagram {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    background: #eee;
    height: 10px;
    width: 100%;
    border-radius: 100px;
    overflow: hidden;
}
.w-bar {
    background: orange;
    height: 100%;
}
/*
.dayly {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
    width: fit-content;
}
.dayly-group {
    position: relative;
    width: fit-content;
    background: red;
}
.dayly-sch {
    position: relative;
    margin-bottom: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 2px;
    border: .5px dashed lightgray;
    border-radius: 5px;
    gap: 4px;
}
.dayly-sch span{
    font-size: 12px;
    padding: 4px 7px;
    background: darkcyan;
    border-radius: 4px;
    color: white;
}
.day-sch p {
    margin: 0;
    padding: 0;
    width: 100%;
    font-weight: bolder;
    font-size: 8px;
    text-align: center;
}
.day-sch {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 12px;
    font-weight: bolder;
}
.dayly-data {
    border: .5px dashed #ddd;
    border-radius: 10px;
    padding: 0 5px 2px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    position: relative;
}
.daylyx {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    padding: 0;
    margin: 0;
    padding-top: 16px;
}
.dayly-bar {
    height: 110px;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 5px;
    margin: 0 5px;
    border-top: .5px dotted gray;
}
.d-bar {
    border-radius: 100px;
    width: 10px;
    margin: 0 auto;
    position: relative;
}
.d-bar::after {
    content: attr(data-gap) "";
    position: absolute;
    bottom: calc(100%);
    left: 50%;
    transform: translateX(-50%) scale(1);
    width: 1000%;
    font-size: 8px;
    text-align: center;
    font-weight: bold;
}
.d-bar-main{
    background: darkcyan;
    color: darkcyan !important;
}
.d-bar-ftr {
    background: #FFD700;
    color: goldenrod !important;
}
.d-bar-acc {
    background: deepskyblue;
    color: deepskyblue !important;
}
.d-bar-fp {
    background: #FF6969;
    color: #FF6969 !important;
}
.dayly-mtd {
    font-size: 9px;
    padding: 2px 0;
    text-align: center;
    width: 100%;
    font-weight: bolder;
    background: transparent !important;
    height: fit-content !important;
    color: gray;
}

.weekly-group {
    position: relative;
    border: .5px dashed lightgray;
    border-radius: 7px;
    padding: 15px 5px 5px;
}
.weekly-group span {
    color: darkcyan;
    text-transform: uppercase;
    position: absolute;
    top: 0;
    left: 4px;
    transform: translateY(-50%);
    font-size: 12px;
    background: #fff;
    padding: 0 3px;
    font-weight: bolder;
}
.week-bar {
    width: 100%;
    margin: 5px 0;
    position: relative;
}
.week-bar::before {
    content: attr(data-mtd)"";
    position: absolute;
    bottom: 100%;
    left: 2px;
    font-size: 9px;
}
.week-bar::after {
    content: attr(data-target)"";
    position: absolute;
    right: 0;
    bottom: 100%;
    font-size: 9px;
    padding-right: 2px;
}
.w-bar {
    width: 66.4%;
    height: 10px;
    border-radius: 100px;
    z-index: 10;
    overflow: hidden !important;
    display: block;
}
.week-bar label {
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: calc(100%);
    transform: translate(-50%, 0);
    left: 50%;
    font-size: 9px;
    color: orangered;
}


*/


.sc-sets {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 20px;
    padding: 10px;
}
.fetch-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column-reverse;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px;
    background: white;
    border-radius: 15px;
    border: .5px solid #eee;
    box-shadow: 0 0 10px rgba(0,0,0,.0);
}
.fetch-data p {
    margin: 0;
    padding: 0;
    color: darkcyan;
    font-weight: bolder;
    font-size: 12px;
}
.fetch-data img {
    height: 35px;
}

.fetch-result {
    
}


.sc-dept {
    margin: 5px 20px 20px;
    padding: 15px;
    border: .5px solid #eee;
    background: white;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}
.sc-dept-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.sc-dept-group {
    width: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: auto;
}
.dept-code {
    width: 24px;
    height: 24px;
    font-weight: bolder;
    text-align: center;
    padding-top: 7px;
    font-size: 9px;
    border-radius: 4px !important;
}
.dept-detail {
    padding: 10px;
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    top: 0;
    left: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    transition: all .5s ease-in-out;
}
.dept-detail.on {
    left: 0;
}
.dept-detail .code {
    height: 100%;
    aspect-ratio: 1;
    background: linear-gradient(45deg, var(--color6), var(--color7));
    display: grid;
    place-items: center;
    border-radius: 10px;
    position: relative;
}
.dept-detail .code i {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -40%);
    font-size: darkcyan;
    background: white;
    padding: 7px;
    font-size: 10px;
    border-radius: 4px;
    color: darkcyan;
}
.dept-detail .code::before {
    content: attr(data-code) "";
    font-size: 30px;
    color: #fff;
    transform: translateY(-6px);
}
.dept-detail .code::after {
    content: attr(data-name) "";
    font-size: 8px;
    color: white;
    position: absolute;
    bottom: 10px;
    left: 0;
    text-align: center;
    width: 100%;
    font-weight: bolder;
}
.dept-data {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: scroll;
}
.dept-data h3 {
    position: relative;
    padding: 0;
    margin: 0;
}
.dept-data p {
    margin: 0;
    padding: 0;
}
.dept-number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 17px 0;
    position: relative;
    padding: 6px 10px;
    border: 1.3px solid #008B8B66;
}
.dept-number span {
    position: absolute;
    top: 0;
    left: 5px;
    transform: translateY(calc(-50% - 2px));
    padding: 0 5px;
    background: white;
    font-size: 8px;
    text-transform: uppercase;
    font-weight: bolder;
}
.dept-number p {
    font-size: 12px;
    position: relative;
    font-weight: bolder;
}
.dept-number p::before {
    content: attr(data-text) "";
    position: absolute;
    bottom: 100%;
    left: 5px;
    font-size: 8px;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
}
p.dept-item {
    font-size: 12px;
    background: lightgray;
    padding: 5px 10px;
}






.target-form {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background: rgba(0,0,0,.3);
    padding: 10px;
    z-index: 100;
    backdrop-filter: blur(4px);
}
.target-form-box {
    padding: 50px 15px;
    width: min(400px, 85%);
    height: calc(100%);
    background: #eee;
    margin: 0 auto;
    overflow: scroll;
    border-radius: 10px;
}
.target-form-box h3 {
    text-align: center;
}
.target-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    margin: 10px 0;
}
.target-group label{
    position: absolute;
    top: 0;
    left: 7px;
    font-size: 10px;
    padding: 0 5px;
    transform: translateY(-50%);
    background: #eee;
    color: #333;
}
.target-group input {
    width: 100%;
    padding: 7px 12px;
    font-size: 14px;
    border: 1.3px solid #00BCBC;
    border-radius: 5px;
    background: transparent;
}
.dept-target {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    margin: 10px 0;
    gap: 3px;
}
.target-code {
    height: 30px;
    aspect-ratio: 1;
    border-radius: 5px;
    background: linear-gradient(45deg, var(--color6), var(--color7));
    display: grid;
    place-items: center;
}
.target-code::before {
    content: attr(data-code) "";
    font-size: 13px;
    color: #fff;
}
.dept-target input {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 11px;
    font-size: 14px;
    border: 1.3px solid #00BCBC;
    border-radius: 5px;
    background: transparent;
}
.target-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    gap: 10px;
    margin-top: 20px;
    position: sticky;
    bottom: 0;
    background: #eee;
    padding: 10px 5px 20px;
}
.target-submit div {
    width: 100px;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 13px;
}




.sales-detail {
    position: relative;
    min-height: 100%;
    padding-top: 20px;
}
.sales-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    width: min(80%, 350px);
    margin: 0 auto;
    gap: 5px;
}
.sales-top input {
    width: 100%;
    padding: 5px 10px;
    border: 1.3px solid darkcyan;
    border-radius: 500px;
    background: white;
}
.sales-top span {
    width: 90px;
    background: darkcyan;
    padding: 6px;
    text-align: center;
    color: white;
    border-radius: 600px;
    font-size: 13px;
    font-weight: bold;
}


#setting {
    position: relative;
    height: 100vh;
    width: 100%;
    padding: 0 0 70px;
    overflow: scroll;
}

.schedule {
    height: fit-content;
}
.schedule h3 {
   margin-left: 20px;
   text-transform: uppercase;
   color: #fff;
}
.sch-form {
    background: #fafafa;
    margin: 10px;
    padding: 10px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.sch-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 20px;
    text-transform: uppercase;
    font-weight: bolder;
    padding: 0 15px;
}
.sch-top span {
    color: darkcyan;
}
.sch-top i {
    color: gold;
}
.days-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 2px;
}
.days-box span {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: darkcyan;
    text-transform: uppercase;
}
.sch-calx {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
}
.sch-box {
    width: calc(100% / 7);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.sch-content {
    width: calc(100% - 3px);
    aspect-ratio: 1;
    margin: auto;
    padding: 5px 3px 3px;
    font-size: 13px;
    text-align: center;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    background: white;
    border-radius: 5px;
    box-shadow: 0 0 2px rgba(0,0,0,.05);
}
.sch-content.tday {
    border: 1.3px solid darkcyan;
}
.sch-date {
    color: dimgray;
    font-weight: bolder;
    font-size: 13px;
}
.sch-date-code {
    color: gray;
    font-size: 11px;
}
.sch-date-code.on {
    color: darkcyan;
    font-weight: bold;
}
.choose-sch {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: grid;
    place-items: center;
}
.sch-list2 {
    width: 240px;
    min-height: fit-content;
    max-height: 75%;
    background: white;
    padding: 12px;
    overflow: scroll;
    border-radius: 10px;
}
.sch-list2 h4 {
    color: darkcyan;
    margin: 0;
    padding: 0 0 6px;
    width: 100%;
    border-bottom: 1.3px dashed darkcyan;
    background: white;
    position: sticky;
    top: 0;
}
.sch-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 0;
    gap: 7px;
}
.sch-div p {
    margin: 0;
    padding: 0;
    background: transparent;
    width: 70px;
    padding: 2px 3px;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    border: 1.3px solid darkcyan;
    color: darkcyan;
    font-weight: bold;
}
.sch-div.on p {
    background: darkcyan;
    color: #fff;
    border: none;
}
.sch-div span {
    font-size: 10px;
    width: calc(100% - 80px);
    border-bottom: 1px dashed darkcyan;
    text-align: right;
}
.sch-button {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    background: transparent;
    padding: 7px;
    margin-top: 15px;
    border-top: 1.3px solid #00BCBC;
}
.sch-btn {
    width: 80px;
    background: darkcyan;
    padding: 4px 10px;
    text-align: center;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
}


.sch-control-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3px;
    width: min(100%, 450px);
    margin: 15px auto 0;
}
.code-group {
    position: relative;
    width: 80px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.code-group input {
    padding: 5px 10px;
    border: 1.3px solid darkcyan;
    border-radius: 6px;
    background: transparent;
    color: darkcyan;
    outline: none;
    font-size: 14px;
    width: 100%;
}
.code-group label {
    position: absolute;
    top: 0;
    left: 8px;
    transform: translateY(-50%);
    padding: 0 4px;
    font-size: 10px;
    color: darkcyan;
    text-align: center;
    background: #eee;
}

.time-group {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: darkcyan;
    position: relative;
    border-bottom: 1.3px solid darkcyan;
    width: min(300px, 40%);
}
.time-group input {
    padding: 5px 10px;
    border: none;
    background: transparent;
    color: darkcyan;
    outline: none;
    font-size: 14px;
    width: 60px;
    text-align: center;
}
.time-group input::placeholder {
    color: #aaa;
}
.time-group label {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    color: darkcyan;
    font-size: 10px;
}
.sch-color {
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    outline: none;
    font-size: 10px;
    width: min(70px, 25%);
    text-align: center;
    font-style: italic;
}
.sch-work {
    width: 30px;
    height: 30px;
    color: darkcyan;
}