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-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;
flex-direction: row;
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;
}



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;
}


rewards-main {
display: flex;
position: relative;
flex: 1;
padding: var(--margin);
background-color: black;
flex-direction: column;
}

rewards-main centered {
width: 89%;
height: fit-content;
flex-direction: column;
align-items: center;
}

rewards-main logo {
display: flex;
position: relative;
width: 100%;
aspect-ratio: 2.5 / 1;
margin-top: calc(var(--margin) / 2);
/*background-color: rgba(255,255,255,0.25);*/
background: url('/static/images/logo-1.png') 0 / auto 100%;
background-position: center;
background-repeat: no-repeat;
}

rewards-company h1 {
    font-size: 6.9rem;
    font-weight: normal!important;
    color: var(--brand-alt);
    color: whitesmoke;
margin-top: var(--margin);
margin-left: 0.7rem;
align-self: center;
text-transform: uppercase;
letter-spacing: 9px;
}

rewards-company logo {
margin-top: 0!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) * 2);
background-color: whitesmoke;
flex-direction: column;
}

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

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


select-login {
display: flex;
display: none;
position: relative;
width: 100%;
height: fit-content;
margin-bottom: var(--margin);
flex-direction: row;
justify-content: space-between;
}

select-login selector {
display: flex;
position: relative;
width: calc(50% - ( var(--margin) / 2 ) );
aspect-ratio: 2 / 1;
border: 0.2rem solid grey;
border-radius: var(--border-radius);
}

select-login selector.active {
border: 0.2rem solid green;
}


login-input {
display: flex;
position: relative;
width: 100%;
height: 7.5rem;
margin-top: calc(var(--margin) / 1);
/*border: 0.2rem solid lightgray;
border-radius: var(--border-radius);
background-color: white;*/
}


.input-hidden {
display: none;
}

keypad {
display: flex;
position: relative;
width: 100%;
height: fit-content;
margin-top: var(--margin);
flex-direction: row;
flex-wrap: wrap;
max-width: 40rem;
align-self: center;
justify-content: center;
}

keypad numb {
display: flex;
position: relative;
width: 12rem;
aspect-ratio: 1 / 1;
/*padding: calc(var(--margin) / 3)calc(var(--margin) / 2);*/
font-family: var(--font);
font-size: 4.2rem;
font-weight: normal;
justify-content: center;
align-items: center;
}

keypad numb key {
display: flex;
position: relative;
width: 10rem;
aspect-ratio: 1 / 1;
margin: auto;
font-family: var(--font);
font-size: 4.2rem;
font-weight: normal;
background-color: white;
border-radius: 50rem;
justify-content: center;
align-items: center;
pointer-events: none;
}

keypad numb key.blank {
background-color: transparent;
}

keypad numb.back key {
/*background: url('/static/images/backspace.png') 0 / auto 42%;*/
background-image: url('/static/images/backspace.png');
background-size: auto 42%;
background-position: center;
background-repeat: no-repeat;
}

keypad numb.blank,
keypad numb.blank key {
background-color: transparent;
}


.button-keypad {
display: flex;
position: relative;
width: 10rem;
aspect-ratio: 1 / 1;
margin: 1.25rem;
margin: 1rem;
font-family: var(--subfont);
font-size: 3.5rem;
font-weight: 600;
background-color: white;
background-color: var(--brand);
border: 0px;
border-radius: 100%;
justify-content: center;
align-items: center;
}


.btn-wobble {
    /*animation: wobble 0.666s cubic-bezier(0.82, 0.27, 0.16, 0.67);*/
    animation: wobble 0.666s cubic-bezier(0, 0.31, 0, 1.01);
    animation: wobble 0.333s cubic-bezier(0.21, 1.05, 0, 0.88);
  }
  
  @keyframes wobble {
    50% {
      /*width: 12rem;*/
      transform: scale(1.2);
    }
  }



user-overview {
display: flex;
position: relative;
width: 100%;
height: fit-content;
flex-direction: column;
}










                                /*
                                            REWARDS
                                */



nimda {
z-index: 750;
display: block;
display: none;
position: absolute;
top: 0;
right: 12rem;
right: 0;
width: 25rem;
height: 6.9rem;
/*background-color: rgba(60, 64, 67, 0.025);*/
background-image: url('/static/images/oc-stars.png');
background-size: auto 89%;
background-position: bottom;
background-repeat: no-repeat;
}


user-points {
display: flex;
position: relative;
width: 100%;
align-items: center;
margin-top: calc( var(--margin) * 1.5 );
color: white;
flex-direction: column;
}

user-points h1 {
font-size: 3.5rem;
font-weight: normal!important;
line-height: 5rem;
color: #E87E0E!important;
color: whitesmoke!important;
text-transform: uppercase;
letter-spacing: 0.125rem;
}

user-points p {
/*margin-top: var(--margin);*/
/*color: #0EAFE8!important;*/
margin-top: 0;
color: var(--money)!important;
font-size: 6.9rem;
line-height: 10rem;
}


store-categories {
display: flex;
position: relative;
width: fit-content;
height: fit-content;
padding: calc( var(--margin) / 2 );
margin-top: var(--margin);
margin-right: auto;
background-color: #efefef;
border-radius: 1rem;
flex-direction: row;
}

store-categories cat {
display: flex;
position: relative;
width: fit-content;
height: fit-content;
font-family: var(--font);
font-size: 2rem;
font-weight: bold;
padding: 1.25rem var(--margin);
}


store-rewards {
display: flex;
position: relative;
flex: 1;
overflow-y: auto;
padding-top: calc( var(--margin) * 1.5 );
padding-bottom: calc( var(--margin) * 10 );
flex-direction: row;
flex-wrap: wrap;
/*justify-content: space-around;*/
}

store-rewards reward {
display: flex;
position: relative;
/*width: calc(33% - ( (var(--margin) * 2) / 3 ) );*/
width: calc(33% - var(--margin));
margin: calc(var(--margin) / 2);
height: fit-content;
margin-bottom: var(--margin);
/*margin-right: 0;*/
/*border: 0.2rem solid #dadada;*/
flex-direction: column;
background-color: white;
/*border-radius: var(--border-radius);
box-shadow: rgba(69, 69, 69, 0.420) 0px 1px 2px 0px, rgba(69, 69, 69, 0.18) 0px 0px 9px 0px;*/
border-radius: calc(var(--margin) / 2);
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);
}

store-rewards reward * {
pointer-events: none;
}

store-rewards reward p {
color: var(--money);
}

store-rewards reward:nth-of-type(3n) {
margin-right: 0;
}

reward reward-icon {
display: flex;
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
}

reward reward-icon icon {
display: flex;
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background-color: transparent;
background: url('/static/images/gift.png') 0 / auto 50%;
background-position: center;
background-repeat: no-repeat;
border: 0px;
/*border-bottom: 0.1rem solid #bababa;*/
border-radius: var(--border-radius) var(--border-radius) 0 0;
}

reward reward-icon icon.default {
opacity: 0.5;
}

reward reward-icon img {
display: flex;
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border: 0px;
/*border-bottom: 0.1rem solid #bababa;*/
border-radius: var(--border-radius) var(--border-radius) 0 0;
border-radius: 1rem;
}


reward reward-details {
display: flex;
position: relative;
flex: 1;
height: fit-content;
padding: calc( var(--margin) / 2  );
flex-direction: column;
align-items: center;
}

reward h3 {
font-family: var(--font);
text-align: center;
text-transform: capitalize;
}






                                /*
                                            EMPLOYEE
                                */



.employee {
flex-direction: row!important;
}

employee-use-only {
display: flex;
position: relative;
width: 100%;
align-items: center;
}

employee-use-only h1 {
color: var(--brand-sub);
white-space: nowrap;
margin: 0 auto;
transform: translateX(-0.69rem);
font-size: 3rem;
text-transform: uppercase;
}

go-back button,
add-points button {
width: 100%!important;
margin-top: calc( var(--margin) / 2 );
}

add-points button,
claim-now button {
/*padding: calc( var(--margin) / 1 );*/
padding: calc( var(--margin) / 0.75 ) calc( var(--margin) * 2 );
}

claim-now button {
width: 100%;
}

/*add-points {
margin-top: auto;
}*/


rewards-calculator {
display: flex;
position: relative;
width: 100%;
height: fit-content;
flex-direction: row;
margin-top: calc( var(--margin) * 1.5 );
margin: auto 0;
}

rewards-calculator spent {
display: flex;
position: relative;
width: 60%;
/*min-width: 42rem;*/
min-width: unset;
width: 36rem;
height: 100%;
flex-direction: column;

}

rewards-calculator spent h2 {
align-self: center;
font-size: 3rem;
}


rewards-calculator percent {
display: flex;
position: relative;
/*width: calc(100% - 42rem - var(--margin) - var(--margin));*/
flex: 1;
height: 100%;
flex-direction: column;
margin-left: auto;
margin-left: var(--margin);
}

rewards-calculator percentage {
display: flex;
position: relative;
height: calc(20% - ( ( var(--margin) * 4 ) / 5 ) );
height: 11.5rem;
width: 100%;
margin-bottom: 1.25rem;
flex-direction: column;
/*border: 0.2rem solid #dadada;*/
border-radius: 25rem;
background-color: white;
}

rewards-calculator percentage * {
font-family: var(--font);
font-size: 4.2rem;
margin: auto;
pointer-events: none;
}


points-overview {
display: flex;
position: relative;
width: 100%;
height: fit-content;
flex-direction: column;
}

points-overview h2 {
color: whitesmoke;
align-self: center;
}

points-list {
display: flex;
position: relative;
flex: 1;
/*margin: var(--margin) calc( var(--margin) / 2 );*/
margin: var(--margin) 0;
flex-direction: column;
}

points-list points {
display: flex;
position: relative;
width: 100%;
flex-direction: row;
margin-top: calc( var(--margin) / 2 );
margin-top: 0;
}

points-list span {
line-height: 4rem;
color: white;
}

points-list span:last-of-type {
margin-left: auto;
color: var(--money);
}


points-total {
display: flex;
position: relative;
width: 100%;
height: fit-content;
margin-top: auto;
justify-content: center;
}

points-total h1 {
font-family: var(--font);
font-size: 4.2rem;
color: var(--money);
align-self: center;
}





points-list detailed-points {
display: flex;
position: relative;
width: 100%;
flex-direction: column;
margin-top: calc( var(--margin) / 2 );
margin-top: 0;
padding: calc( var(--margin) / 2 ) 0;
border-bottom: 0.1rem solid gray
}

points-list span {
font-family: var(--font);
line-height: 4rem;
color: white;
}

points-list span:last-of-type {
margin-left: auto;
}

detailed-points point-details {
display: flex;
position: relative;
width: 100%;
height: fit-content;
flex-direction: row;
}

detailed-points time {
display: flex;
position: relative;
width: 100%;
height: fit-content;
flex-direction: row;
margin-top: 0.5rem;
}

detailed-points point-details span {
font-size: 2.5rem;
font-weight: normal;
}

detailed-points point-details span:last-of-type {
margin-left: auto;
color: var(--money);
}



detailed-points time span {
font-size: 2rem;
font-weight: normal;
line-height: 2rem;
opacity: 0.66;
}

detailed-points time span:last-of-type {
margin-left: auto;
color: var(--dark);
font-style: italic;
}






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;
    }




claim-now {
display: flex;
position: relative;
width: 100%;
height: fit-content;
justify-content: center;
margin-top: var(--margin);
}

/*claim-now button {
padding: calc( var(--margin) / 1 ) calc( var(--margin) * 2 );
}*/


store-rewards.claim-reward {
flex: unset;
width: 100%;
height: fit-content;
padding-bottom: var(--margin);
justify-content: center;
}


#EXIT-Claim * {
pointer-events: none;
}











/* CSS */
/*.button-85 {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}*/

.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;
}