body {
flex-direction: column;
background-color: black;
}

page-header {
display: flex;
position: relative;
width: calc( 100% - (var(--margin) * 2) );
height: 10rem;
padding: calc(var(--margin) / 2) var(--margin);
align-items: center;
}

page-header logo {
display: flex;
position: relative;
height: 8.9rem;
aspect-ratio: 2.5 / 1;
background: url('/static/images/logo-1.png') 0 / auto 100%;
background-position: center;
background-repeat: no-repeat;
}

page-header page-title {
display: flex;
position: relative;
flex: 1;
justify-content: center;
}

page-header page-title * {
color: white;
text-transform: uppercase;
opacity: 0.69;
}

.down {
margin-top: var(--margin);
}


body * {
user-select: unset!important;
-webkit-user-select: unset!important; 
-moz-user-select: unset!important;
}



page-bar {
display: flex;
position: relative;
width: 100%;
height: fit-content;
flex-direction: row;
margin-bottom: var(--margin);
}

page-bar h1 {
font-size: 2.5rem; 
}

page-bar select {
margin-left: auto;
}

drop-nav {
margin-left: auto;
}

drop-nav select {
font-family: var(--font);
font-size: 3rem;
}


tml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0px;
padding: 0px;
border: 0px;
}


html {
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: none;
font-size: 10px;
font-size: 8px;
font-family: var(--subfont);
font-weight: normal;
font-weight: 500;
max-width: 100%;
overflow-x: hidden;
overflow-y: auto;
}

body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
position: relative;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*flex-wrap: wrap; /*these together force elements to touch vertically*XXX/
align-content: flex-start; /*these together force elements to touch vertically*XXX/
flex: 1;
flex-direction: row;*/
/*height: fit-content;*/
/*width: 100vw;
max-height: 100vh;*/

/*min-height: 100vh;
overflow-y: auto;*/
font-size: 1rem;
/*font-family: "Inter", sans-serif;*/
color:  var(--dark);
background: #fff;
background-color: black;
flex-direction: column;
overflow: hidden;
}

body * {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}

/*body::before {
z-index: -1;
content: "";
display: block;
position: absolute;
position: fixed;
top: 0;
left: 0;
width: 100%;
/*min-height: 100%;*xxxxxxxxxxx/
height: 100vh;
background: url('/static/lander/lander-grid.png') 0 / auto 10rem;
background-position: 0 0;
background-position: center -5rem;
background-repeat: repeat;
/*filter: invert();
opacity: 0.33;*xxxxxxxxxxxxxx/
opacity: 0.25;
}*/
    
:root {
--margin: 2.5rem;
--margin-half: 1.25rem;

--dark: #000;
--dark: #0a0c0e;

--dark-alt: #332927;

--light: #ffffff;

--brand: #7FE80E;
--brand-2: #6BC40C;
--brand-alt: #E87E0E;
--brand-sub: #dd00aa;
--money: #68933A;

--offwhite: #EBE8DF;

--font: 'Lexend', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Tahoma, Geneva, Verdana, sans-serif, sans-serif;
--subfont: 'Russo One', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Tahoma, Geneva, Verdana, sans-serif, sans-serif;

--text: #000;

--font-huge: 13.75rem;

--border-radius: 0;
--border-radius: calc(var(--margin) * 1.0);
--border-radius: calc(var(--margin) * 1.25);
}



h {
position: relative;
width: fit-content;
font-family: var(--subfont);
font-size: 6rem;
font-size: 7.5rem;
line-height: 1.33;
color: var(--text);
font-weight: 600;
font-weight: bold;
word-wrap: break-word;
align-self: center;
}

h1 {
position: relative;
width: fit-content;
font-family: var(--subfont);
font-size: 2.5rem;
font-size: 3.5rem;
line-height: 1.33;
color: var(--text);
font-weight: 600;
font-weight: bold;
font-weight: normal;
word-wrap: break-word;
}

h2 {
position: relative;
width: fit-content;
font-family: var(--subfont);
font-size: 2.5rem;
line-height: 1.33;
color: var(--text);
font-weight: 600;
font-weight: bold;
font-weight: normal;
word-wrap: break-word;
}

h3 {
position: relative;
width: fit-content;
font-family: var(--font);
font-size: 2rem;
line-height: 1.33;
color: var(--text);
font-weight: 600;
font-weight: bold;
word-wrap: break-word;
}

h4 {
position: relative;
width: fit-content;
font-family: var(--font);
font-size: 1.75rem;
line-height: 1.33;
color: var(--text);
font-weight: 600;
}

p {
position: relative;
font-family: var(--font);
margin-top: 1rem;
font-size: 2rem;
line-height: 1.5;
color: var(--mid);
word-wrap: break-word;
}

        points {
        position: relative;
        font-family: var(--font);
        margin-top: 1.25rem;
        font-size: 2.5rem;
        line-height: 1.5;
        color: var(--mid);
        word-wrap: break-word;
        }

.subtract {
color: var(--brand-alt)!important;
}

.price {
color: var(--money);
}



button {
border: none;
}

button,
.button {
display: inline-block;
position: relative;
width: fit-content;
height: fit-content;
padding: calc( var(--margin) / 2 );
background-color: transparent;
color: var(--dark);
border: 0.2rem solid var(--dark);
text-align: center;
font-family: var(--font);
font-size: 2.5rem;
text-decoration: none;
/*border-radius: calc(var(--border-radius) / 2);*/

/*border-radius: calc(var(--margin) / 2);*/
/*border-radius: 0.42rem calc(var(--margin) / 2);*/
border-radius: 0.69rem calc(var(--margin) / 1.25);
border-radius: 10rem;
}

button:hover {
filter: brightness(0.89);
}

button:disabled,
button[disabled] {
filter: saturate(0);
}

.button-alt {
color: var(--light);
border: 0.2rem solid var(--light);
}

.button-confirm {
background-color: var(--brand);
border: 0.2rem solid var(--brand);
font-weight: 400;
text-transform: uppercase;
/*box-shadow: 0 2px 4px -1px rgba(0,0,0,.16), 0 4px 5px 0 rgba(0,0,0,.05), 0 1px 10px 0 rgba(0,0,0,.08);*/
white-space: nowrap;
}

.button-warning {
background-color: var(--light);
border: 0.2rem solid var(--brand-alt);
color: var(--brand-alt);;
font-weight: 400;
text-transform: uppercase;
/*box-shadow: 0 2px 4px -1px rgba(0,0,0,.16), 0 4px 5px 0 rgba(0,0,0,.05), 0 1px 10px 0 rgba(0,0,0,.08);*/
white-space: nowrap;
}




/* SPECIAL BUTTON CSS */
.button-confirm {
  background-color: initial;
  background-image: none;
  border-style: none;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  z-index: 0;
}

.button-confirm:before,
.button-confirm:after {
  border-radius: 10rem;
}

/*.button-confirm:before {
  background-color: rgba(107,196,12, .42);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -2;
}*/

.button-confirm:after {
    /*background-color: white;*/
  background-color: initial;
  background-image: linear-gradient(92.83deg, var(--brand) 0, var(--brand) 100%);
  bottom: 0.6rem;
  content: "";
  display: block;
  left: 0.6rem;
  overflow: hidden;
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
  transition: all 100ms ease-out;
  z-index: -1;
}

.button-confirm:hover:not(:disabled):after {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  transition-timing-function: ease-in;
}

/*.button-confirm:active:not(:disabled) {
  color: #ccc;
}*/

.button-confirm:active:not(:disabled):after {
  background-image: linear-gradient(0deg, rgba(104,147,58, 1.0), rgba(104,147,58, 1.0)), linear-gradient(92.83deg, var(--brand) 0, var(--brand) 100%);
  bottom: 0.6rem;
  left: 0.6rem;
  right: 0.6rem;
  top: 0.6rem;
}

.button-confirm:disabled {
  cursor: default;
  opacity: 0.42;
}






.button-large {
width: 100%!important;
padding: calc( var(--margin) / 1 ) 0;
text-align: center;
}

header {
z-index: 1000;
display: flex;
position: fixed;
flex: 0 0 100%;
width: 100%;
height: 7.5rem;
background-color: var(--light);
align-items: center;
/*border-bottom: 0.1rem solid var(--line);*/
/*box-shadow: rgba(24,36,48, 0.12) 0px 3px 6px;*/
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

split {
display: flex;
position: relative;
width: 50%;
height: 100vh;
flex-direction: column;
}

.inside split:first-of-type {
width: 33.33%;
}

.inside split:last-of-type {
width: 66.66%;
}

.employee split:first-of-type {
width: 33.33%;
}

.employee split:last-of-type {
width: 66.66%;
}



.hide {
display: none!important;
}


centered {
display: flex;
position: relative;
width: fit-content;
height: fit-content;
margin: auto;
}



main-page {
display: flex;
position: relative;
flex: 1;
padding: calc(var(--margin) * 1.0) calc(var(--margin) * 1);
background-color: whitesmoke;
flex-direction: column;

overflow-y: scroll;
}

main-page centered {
width: 100%;
flex-direction: column;
}

.inside main-page {
    flex: unset;
/*width: 100%;*/
min-height: 100%;
max-height: 100%;
}





icon {
    display: inline-block;
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1;
    background-image: url('/static/images/back.png');
    background-size: auto 89%;
    background-position: center;
    background-repeat: no-repeat;
    }
    
    page-header {
    display: flex;
    position: relative;
    width: 100%;
    height: fit-content;
    }
    
    page-header icon {
    margin-right: var(--margin);
    }
    
    page-header h1 {
        font-size: 4.2rem;
    white-space: nowrap;
    }



.button-confirm:before {
  content: "";
  /*background: linear-gradient(
    45deg,
    #E83E0E,
    #E87E0E,
    #fffb00,
    #7FE80E,
    #68933A,
    #0EAFE8,
    #6425E8,
    #CB0EE8,
    #E83E0E
  );*/
  background: linear-gradient(
    45deg,
    #6BC40C,
    #559C09,
    #7FE80E,
    #3F7307,
    #284A04,
    #3F7307,
    #7FE80E,
    #559C09,
    #6BC40C
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 30s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10rem;
}

@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-85:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}




page-navtabs {
display: flex;
position: relative;
height: fit-content;
padding: calc(var(--margin) / 2) var(--margin);
}

page-navtabs navtab {
display: flex;
position: relative;
width: fit-content;
flex-grow: 0;
padding: calc(var(--margin) / 1.5) var(--margin);
margin-right: calc(var(--margin) / 2);
font-family: var(--font);
font-size: 3.5rem;
color: var(--light);
border-bottom: 0.3rem solid transparent;
}

page-navtabs navtab.active {
border-bottom: 0.42rem solid var(--brand);
}

page-navtabs navtab notify {
display: flex;
position: relative;
min-width: 4.2rem;
height: 4.2rem;
margin-left: calc(var(--margin) / 2);
background-color: var(--brand-sub);
border-radius: 100%;
text-align: center;
justify-content: center;
align-items: center;
}





form {
display: flex;
position: relative;
flex: 1;
flex-direction: column;
}

form fi {
display: flex;
position: relative;
flex-direction: column;
margin-bottom: calc(var(--margin) / 1);
}

form input,
form textarea {
margin-top: 1rem;
}


input,
textarea {
display: flex;
/*width: 100%;*/
padding: calc(var(--margin) / 2);
font-family: var(--font);
font-size: 2.5rem;
}

input {
height: fit-content;
}





















stock-list {
display: flex;
position: relative;
width: 100%;
padding: calc(var(--margin) / 2) 0;
/*background-color: white;
border-radius: var(--border-radius);*/
flex-direction: column;
}

stock-list list-item {
display: flex;
position: relative;
width: calc(100% - var(--margin));
width: calc(100% - ( var(--margin) * 2) );
padding: calc(var(--margin) / 1) var(--margin);
margin-bottom: calc(var(--margin) / 1);
/*padding: calc(var(--margin) / 2) 0;
margin: calc(var(--margin) / 4) 0;*/
font-family: var(--font);
font-size: 2.75rem;
flex-direction: row;
background-color: white;
border-radius: var(--border-radius);
}

stock-list list-item:last-of-type {
border-bottom: none;
}


list-item span {
display: flex;
position: relative;
text-transform: capitalize;
}

list-item span.description {
opacity: 0.69;
}

list-item span.stock {
margin-left: auto;
}

list-item span.low-stock {
margin-left: auto;
color: red;
}



edit-item {
z-index: 100;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
left: 12%;
right: 0;
}

edit-item-settings {
z-index: 200;
display: flex;
position: relative;
height: 100%;
aspect-ratio: 1 / 1;
margin-right: calc( var(--margin) / 2 );
}

edit-item-settings::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url('/static/images/settings.png') 0 / auto 100%;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}



select {
font-family: var(--font);
font-size: 3rem;
}

input[type="file"] {
padding: 5rem;
margin-bottom: var(--margin);
border: 0.2rem solid #dadada;
border-radius: var(--border-radius);
}

.cover-link {
z-index: 999;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: all!important;
}


.top-link {
z-index: 1999;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: all!important;
}





.page-action-btn {
z-index: 9999;
display: block;
position: fixed;
bottom: var(--margin);
right: var(--margin);
width: fit-content;
padding: var(--margin);
background-color: var(--dark);
border-radius: 10rem;
font-size: 2.5rem;
color: white;
}

.page-accept-btn {
z-index: 9999;
display: block;
position: fixed;
bottom: var(--margin);
left: var(--margin);
width: fit-content;
padding: var(--margin);
background-color: var(--brand);
border-radius: 10rem;
font-size: 2.5rem;
color: var(--dark);
}



    

delete {
display: block;
position: absolute;
top: 0;
right: 0;
width: 6.9rem;
height: 6.9rem;
}



delete::after {
content: "+";
position: absolute;
top: calc(50% - 0.4rem);
left: calc(50% - 0.4rem);
transform: translate(-50%,-50%) rotate(-45deg);
font-family: var(--font);
font-size: 5rem;
line-height: 5rem;
color: rgba(0,0,0,0.69);
}







.page-action-btn_alt {
  z-index: 9999;
  display: block;
  position: fixed;
  bottom: var(--margin);
  right: var(--margin);
  width: fit-content;
  padding: var(--margin);
  background-color: var(--brand);
  border-radius: 10rem;
  font-size: 2.5rem;
  color: var(--dark);
  }


box-list {
display: flex;
position: relative;
/*width: 100%;*/
padding: calc(var(--margin) / 2) var(--margin);
background-color: white;
border-radius: var(--border-radius);
flex-direction: column;
}

box-list list-item {
display: flex;
position: relative;
width: calc(100% -(var(--margin)* 2));
width: 100%;
padding: calc(var(--margin) / 1) 0;
font-family: var(--font);
font-size: 2.75rem;
flex-direction: row;
border-bottom: 0.1rem solid #eeeeee;
}

item-details {
  display: flex;
  position: relative;
  width: fit-content;
  min-width: 50%;
}

list-item span {
  display: flex;
  position: relative;
  white-space: nowrap;
}

item-stock {
  display: flex;
  position: absolute;
  width: fit-content;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  align-items: center;
}