/* BACKGROUNDS BORDERS HEADERS FOOTER KAWHI CIRCLE */



/* Vendor Info Screens Website */

/* sets coffee background image for Vendor Screens */
.vendorinfobkgrnd01 {
  background-image: url("../..assets/images/jonathan-borba-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}

.vendorinfoborder {
  width: calc(100vw - 12px) !important;
  height: calc(90vh - 12px) !important;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 45px;
  border: 3px solid #ffffff;
  color: white;
}





/* sets coffee background image for Home screen */
.coffeebkgrnd00 {
  background-image: url("../../assets/images/kawhi-main-01-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}


/* sets coffee background image for add to friend screen */
.coffeebkgrnd08 {
  background-image: url("../../assets/images/kawhi-blake-wisz-01-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}

/* sets coffee background image for Ordering Screen */
.coffeebkgrnd09 {
  background-image: url("../../assets/images/kawhi-phil-hearing-01.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}












.theme {
  
  background-image: url("../../assets/images/kawhi-theme-01-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}




.coffeeborder {
  width: calc(100vw - 12px) !important;
  height: calc(100vh - 12px) !important;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 45px;
  border: 3px solid #ffffff;
  color: white;

}


.coffeeborder01 {
  width: calc(100vw - 12px) !important;
  height: calc(100vh - 12px) !important;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 45px;
  border: 3px solid #ffffff;
  color: white;
  background-color: #000000b2;
}



.oncard{
  background-color: #C98344; opacity: 75%;

}

.onborder {
  width: calc(100vw - 12px) !important;
  height: calc(100vh - 12px) !important;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 45px;
  border: 3px solid #ffffff;
  color: white;
}





.onboarding1 {
  background-image: url("../../assets/images/kawhi-onboarding-01-nathan-dumlao.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}

.onboarding2 {
  background-image: url("../../assets/images/kawhi-onboarding-02-devin-avery.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}

.onboarding3 {
  background-image: url("../../assets/images/kawhi-onboarding-03-nathan-dumlao.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}

.onboarding4 {
  background-image: url("../../assets/images/kawhi-onboarding-04-mohamed-shaffaf.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}

.onboarding5 {
  background-image: url("../../assets/images/kawhi-onboarding-05-nathan-dumlao.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}

.onboarding6 {
  background-image: url("../../assets/images/kawhi-onboarding-06-nathan-dumlao.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}

.onboarding7 {
  background-image: url("../../assets/images/kawhi-onboarding-07-nathan-dumlao.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}



/* the following creates the top Header section for the main screen views*/
.headerframe {
  border-bottom-left-radius: 45px;
  border-bottom-right-radius: 45px;
  border: 3px solid #ffffff;
  color: white;
  height: 75px;
  width: 100vw;
}

/* the following creates the bottom footer section for the main screen views*/
.footerframe {
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  border: 3px solid #ffffff;
  color: white;
  height: 65px;
  width: 100vw;
  position: absolute;
  left: 0;
  bottom: 0;
}



/* the following creates the back ground boarder for KWAD screens*/
.productframe {

  border-radius: 45px;
  border: 3px solid #ffffff;
  color: white;
  height: 100vh;
  width: 100vw;
}


/* LOYALTY CARDS */

/* the following creates the borders for the Card Buttons used on the main screen */
.kcards-p {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border: 2px solid #ffffff;
  color: white;
  background-color: #cab9b9b0;
}

.kcards-l {

  border-radius: 25px;
  border: 2px solid #ffffff;
  color: white;
  background-color: #cab9b9b0;
}

/* the following creates the borders for the Loyalty Cards */
.kwad {
  border-radius: 17px;
  border: 1px solid #ffffff;
  color: white;
  background-color: #ffffff70;
}

.kwadbase {
  border-bottom-left-radius: 17px;
  border-bottom-right-radius: 17px;
  text-align: center;
  color: white;
}







.kordering {
  border-radius: 0px;
  border: 0px solid #ffffff;
  color: white;
  background-color: #000000b2;
}



.pickup {
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
  border: 1px solid #ffffff;
  color: white;
  background-color: #0000009e;
}





.send {
  border-top-left-radius: 17px;
  border-bottom-left-radius: 17px;
  border: 1px solid #ffffff;
  color: white;
  background-color: #b47b3b9e;
}








/* controls kwallet card text width to ensure text truncates */
.kwad .io-text-truncate {
  padding: 8px 5px !important;
}

/* the following creates the borders for sorting icons */
.ksort {
  border-radius: 5px;
  border: 1px solid #ffffff79;
  padding: 3px;
}

.ksortactive {
  border-radius: 5px;
  border: 2px solid #ffffff;
  color: white;
  padding: 3px;
}

/* the following creates the go back circle button */
.gobackcircle {
  background: #ffffff;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  text-align: center;
  border: .5px solid #00000099;
  box-shadow: 0px 0px 20px #ffffff;
}

.gobacktxt {
  padding: 10px;
  font-weight: bold;
  margin: 15px 0px 20px;
  color: #000000;
}

/* the following creates the borders for the full loyalty stamp cards */
.kloyalty {
  border: 3px solid #ffffffc5;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-right: 2px solid transparent;
 

}




/* the following creates the top Header section for the main screen views*/
.kmenu {
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  border-bottom-right-radius: 35px;
  border-bottom-left-radius: 35px;
  border: 3px solid #ffffff;
  color: white;
  background-color: #ffffff;
  width: 100vw;
}













/* Colour Pallet for SMOOTH THEME
      https://coolors.co/fffff3-d15b14-ffa600-4b543b
      */




.crdbkgrnd01 {
  background-color: #ffa600;
  opacity: 90%;
}

.vendor01 {
  color: #fffff3;
  text-transform: uppercase;
  font-size: 20px;
}

.crduse01 {
  color: #44355B;
  font-size: 0.8em;
}

.stamped01 {
  border-radius: 17px;
  border: 2px solid #fffff3;
  background-color: #d15b14;
}

.unstamped01 {
  border-radius: 17px;
  border: 2px solid #d15b14;
  color: #fffff3;
  background-color: #ffa600;
  opacity: 90%;
}

.crdmssg01 {
  color: #44355B;
  font-size: 0.8em;
}

/* sets coffee background image for Loyalty Cards main screen */
.coffeebkgrnd01 {
  background-image: url("../../assets/images/kawhi-kwallet-01-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}

.crdtheme01 {

  color:#ffa600;
}










/* Colour Pallet for BARBIE THEME
     https://mycolor.space/?hex=%23CC0863&sub=1
      */


      .crdtheme02 {

        color:#CC0863;
      }

.crdbkgrnd02 {
  background-color: #CC0863;
  opacity: 85%;
}

.vendor02 {
  color: #fffff3;
  text-transform: uppercase;
  font-size: 20px;
}

.crduse02 {
  color: #FFE3EF;
  font-size: 0.8em;
}


.stamped02 {
  border-radius: 17px;
  border: 2px solid #45BEA4;
  background-color: #45BEA4;
}

.unstamped02 {
  border-radius: 17px;
  border: 2px solid #45BEA4;
  color: #fffff3;
  background-color: #CC0863;
  opacity: 90%;
}

.crdmssg02 {
  color: #44355B;
  font-size: 0.8em;
}

/* sets coffee background image for Loyalty Cards Indvidual screen */
.coffeebkgrnd02 {
  background-image: url("../../assets/images/kawhi-kwallet-02-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}











/* Spot / Classy Colour Palette for Crazy Kitchen THEME
    https://mycolor.space/?hex=%238CB357&sub=1
      */
      .crdtheme03 {

        color:#c1ceac;
      }

.crdbkgrnd03 {
  background-color: #c1ceac;
  opacity: 85%;
}

.vendor03 {
  color: #657A48;
  text-transform: uppercase;
  font-size: 20px;
}

.crduse03 {
  color: #657A48;
  font-size: 0.8em;
}

.stamped03 {
  border-radius: 17px;
  border: 2px solid #43493A;
  background-color: #8CB357;
}

.unstamped03 {
  border-radius: 17px;
  border: 2px solid #A7AE9C;
  color: #fffff3;
  background-color: #657A48;
  opacity: 90%;
}

.crdmssg03 {
  color: #43493A;
  font-size: 0.8em;
}

/* sets coffee background image for Loyalty Cards Indvidual screen */
.coffeebkgrnd03 {
  background-image: url("../../assets/images/kawhi-kwallet-03-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}




/* Espresso 141 THEME
https://coolors.co/palette/562a0e-78380c-c8691c-d09259-e4ceaf
*/
.crdtheme04 {

  color:#D09259;
}

.crdbkgrnd04 {
  background-color: #D09259;
  opacity: 85%;
}

.vendor04 {
  color: #562A0E;
  text-transform: uppercase;
  font-size: 20px;
}

.crduse04 {
  color: #562A0E;
  font-size: 0.8em;
}

.stamped04 {
  border-radius: 17px;
  border: 2px solid #78380C;
  background-color: #D09259;
}

.unstamped04 {
  border-radius: 17px;
  border: 2px solid #E4CEAF;
  color: #fffff3;
  background-color: #C8691C;
  opacity: 90%;
}

.crdmssg04 {
  color: #43493A;
  font-size: 0.8em;
}

/* sets coffee background image for Loyalty Cards Indvidual screen */
.coffeebkgrnd04 {
  background-image: url("../../assets/images/kawhi-kwallet-04-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}



/* Zeno THEME
https://coolors.co/palette/001233-002a41-00526e-8a7968-ab947e
*/

.crdtheme05 {

  color:#001233;
}

.crdbkgrnd05 {
  background-color: #001233;
  opacity: 75%;
}

.vendor05 {
  color: #AB947E;
  text-transform: uppercase;
  font-size: 20px;
}

.crduse05 {
  color: #8A7968;
  font-size: 0.8em;
}

.stamped05 {
  border-radius: 17px;
  border: 2px solid #002A41;
  background-color: #001233;
}

.unstamped05 {
  border-radius: 17px;
  border: 2px solid #AB947E;
  color: #fffff3;
  background-color: #00526E;
  opacity: 90%;
}

.crdmssg05 {
  color: #8A7968;
  font-size: 0.8em;
}

/* sets coffee background image for Loyalty Cards Indvidual screen */
.coffeebkgrnd05 {
  background-image: url("../../assets/images/kawhi-kwallet-05-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}



/* LANEWAY THEME
https://mycolor.space/?hex=%23CC0863&sub=1
*/

.crdbkgrnd06 {
  background-color: #B29B00;
  opacity: 75%;
}

.vendor06 {
  color: #564146;
  text-transform: uppercase;
  font-size: 20px;
}

.crduse06 {
  color: #564146;
  font-size: 0.8em;
}

.stamped06 {
  border-radius: 17px;
  border: 2px solid #002A41;
  background-color: #B29B00;
}

.unstamped06 {
  border-radius: 17px;
  border: 2px solid #AB947E;
  color: #fffff3;
  background-color: #005242;
  opacity: 90%;
}

.crdmssg06 {
  color: #564146;
  font-size: 0.8em;
}

/* sets coffee background image for Loyalty Cards Indvidual screen */
.coffeebkgrnd06 {
  background-image: url("../../assets/images/kawhi-kwallet-06-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}


/* sets coffee background image for Menu Screen */
.coffeebkgrnd07 {
  background-image: url("../../assets/images/kawhi-menu-01-1030w.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #241d1d;
  height: 100vh;
  width: 100vw;
}




/* sets Icon background circle */
.iconbk {
  background: #ffffff64;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: .5px solid #ffffff1b;
}
.iconbk-warning {
  background: #e4762c;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: .5px solid #f3c3a2;
}

.iconbk-success {
  background: #75ac50;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: .5px solid #c3dbb3;
}
.iconbk-primary {
  background: #3f51b5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: .5px solid #afb7e0;
}
.iconbk-accent {
  background: #941c84;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: .5px solid #cd8cc4;
}






/*     */
/* Various margin adjustments, some may no longer be used */





/* Top Margins */


.mv5 {
  margin: 5px 0;
}

.mv6 {
  margin: 6px 0;
}

.mv8 {
  margin: 8px;
}
.mv10 {
  margin: 10px;
}

.mv16 {
  margin: 16px;
}

.mv17 {
  margin: 17px;
}

.mv18 {
  margin: 18px;
}

.mv19 {
  margin: 19px;
}
.mv25 {
  margin: 25px;
}

.mv60 {
  margin: 60px 0;
}

.mv65 {
  margin: 65px 0;
}

.mv80 {
  margin: 100px 0;
}

.mv100 {
  margin: 100px 0;
}

.mv120 {
  margin: 120px 0;
}


.mv140 {
  margin: 140px 0;
}




/* Left Margins */

.ml3{
	margin-left: 3px;
}
.ml4{
	margin-left: 4px;
}
.ml5{
	margin-left: 5px;
}
.ml6{
	margin-left: 6px;
}
.ml7{
	margin-left: 7px;
}
.ml8{
	margin-left: 8px;
}
.ml9{
	margin-left: 9px;
}
.ml0{
	margin-left: 10px;
}

.ml16{
	margin-left: 16px;
}
.ml17{
	margin-left: 17px;
}
.ml18{
	margin-left: 18px;
}
.ml19{
	margin-left: 19px;
}
.ml20{
	margin-left: 20px;
}
.ml21{
	margin-left: 21px;
}
.ml22{
	margin-left: 22px;
}


.ml23 {
  margin-left: 23px;
}
.ml24{
	margin-left: 24px;
}

.ml25{
	margin-left: 25px;
}
.ml26{
	margin-left: 26px;
}

.ml27{
	margin-left: 27px;
}

.ml28{
	margin-left: 28px;
}






.ml32 {
  margin-left: 32px;
}
.ml33 {
  margin-left: 33px;
}
.ml34 {
  margin-left: 34px;
}
.ml35 {
  margin-left: 35px;
}
.ml36 {
  margin-left: 36px;
}
.ml37 {
  margin-left: 37px;
}
.ml38 {
  margin-left: 38px;
}
.ml39 {
  margin-left: 39px;
}
.ml40 {
  margin-left: 40px;
}
.ml41 {
  margin-left: 41px;
}

.ml42 {
  margin-left: 42px;
}

.ml43 {
  margin-left: 43px;
}
.ml44 {
  margin-left: 44px;
}
.ml45 {
  margin-left: 45px;
}
.ml46 {
  margin-left: 46px;
}
.ml47 {
  margin-left: 47px;
}
.ml48 {
  margin-left: 48px;
}
.ml49 {
  margin-left: 49px;
}
.ml50 {
  margin-left: 50px;
}

.ml59{
	margin-left: 59px;
}


/* Right Margins */
.mr10 {
  margin-right: 10px;
}
.mr27 {
  margin-right: 27px;
}


/* the following creates the Kawhi Circle */
.kawhi-logo {
  display:block;
  width:70px;
  height:70px;
  line-height:70px;
  border: 2px solid #606D5D;
  border-radius: 50%;
  color:#606D5D;
  text-align:center;
  text-decoration:none;
  background: #ffffff;
  box-shadow: 0px 0px 20px #b3b1b1;
  font-size:18px;
  font-weight:lighter;

}



.smalltext {
  font-size: xx-small;
  color: #555758;
 
}



.kawhigreen {
  color:#606D5D;
}









.io-button {
  
  border: 2px solid #677423;
  border-radius: 50%;
  background-color: #bbc19171;
  color: #F1ECE2;
  }