@font-face {
    font-family: "Pike";
    src: url("/font/Pike-Regular.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PikeBold";
    src: url("/font/Pike-Bold.woff2") format("woff2"),
    url("/font/Pike-Bold.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PikeLight";
    src: url("/font/Pike-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: Pike;
    padding: 0;
    margin: 0;
    overflow: hidden;
    letter-spacing: 1px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#main-container-box {
    padding: 0;
    margin: 0;
}
#main-container {
    width: 1080px;
    height: 1920px;
    position: relative;
    padding: 0;
    margin: 0;
}
#top-bar {
    position: relative;
    background-color: #F2F0EB;
    width: 1080px;
    height: 55px;

}
#top-header {
    color: #1E3932;
    font-family: PikeBold;
    font-size: 35px;
    letter-spacing: 1px;
    line-height: 89px;
    text-align: center;
}

/* Lang */
#selected-lang-container {
    float: right;
    width: 250px;
}
#menu-lang {
    position: absolute;
    right: 0;
    top: 0;
    width: 244px;
    padding: 25px 0px 20px 0px;
    font-size: 18px;
    background-color: #F2F0EB;
    box-shadow: 4px 4px 16px 0 rgba(169, 169, 169, 0.5);
    z-index: 999;
}
.row-menu-lang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 35px 10px 14px;
}
.row-menu-lang-separator {
    height: 2px;
    background-color: #fff;
    border: none;
}

/* screensaver */
#main-container.screensaver {
    background: url("/img/screensaver.jpg") no-repeat top center;
    background-size: 100% 100%;
    text-align: center;
}
#screensaver {
    width: 100%;
    height: 100%;
}
.btn-screensaver {
    position: absolute;
    bottom: 50px;
    left: 266px;
    font-size: 56px;
    width: 550px;
    height: 141px;
}

.btn-screensaver span {

}

/* select drink */
#select-your-drink-container-wrapper {
    height: 1520px;
    overflow: hidden;
}
#select-your-drink-container {
    margin: 0px 20px 0px 20px;
    height: 1520px;
    overflow: scroll;
}
#select-your-drink-container::-webkit-scrollbar {
    display: none;
}

.drink-container {
    position: relative;
    background-color: #fff;
    box-shadow: 4px 4px 16px 0 rgba(169, 169, 169, 0.5);
    width: 244px;
    height: 302px;
    text-align: center;
    padding: 30px 30px 0px 30px;
    display: flex;
    flex-direction: column;
    float: left;
    margin: 20px;
}
.drink-container.vtouch-active,
.cup-box.vtouch-active,
.payment-method-box.vtouch-active
{
    transform: scale(0.97);
    box-shadow: none;
}

.drink-container.not-available.vtouch-active,
.cup-box.vtouch-active.not-available,
.payment-method-box.vtouch-active.not-available
{
    transform: scale(1) !important;
    box-shadow: 4px 4px 16px 0 rgba(169, 169, 169, 0.5) !important;
}

/*.btn-screensaver.vtouch-active,
.btn.vtouch-active,
.btn-full.vtouch-active,*/
.btnAnimateBack, .btnAnimateCancel, .btnAnimate
{
    animation: btnClick 300ms linear 1 normal;
}

/*
 .drink-container:active,
.cup-box:active,
 .payment-method-box:active
{
    transform: scale(0.97);
    box-shadow: none !important;
}
.btn-screensaver:active,
.btn:active,
.btn-full:active
{
    animation: btnClick 300ms linear 1 normal;
}
*/
.pulsate
{
    animation: btnPulsate 3000ms linear infinite normal;
}
@keyframes btnClick {
    0% { transform: scale(1) }
    50% { transform: scale(0.95) }
    100% { transform: scale(1) }
}
@keyframes btnPulsate {
    0% { transform: scale(1) }
    50% { transform: scale(0.8) }
    100% { transform: scale(1) }
}
.drink-container img {
    max-height: 115px;
}
.drink-container.not-available {
    background-color: #ffffff;
}
.drink-container.not-available img {
    /*xfilter: grayscale(100%);*/
}
.drink-container .not-available {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.7);
}

.drink-header {
    font-family: PikeBold;
    font-size: 30px;
    color: #1E3932;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 15px;
}
.drink-description {
    font-size: 18px;
}
.drink-price {
    font-family: Pike;
    font-size: 22px;
    color: #1E3932;

    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 140px;
}


/* page select size */
#select-size, #espresso-subpage, #latte-iced-subpage, #customise {
    border-top: 3px solid #006241;
    padding-top: 70px;
    text-align: center;
}
#select-size, #espresso-subpage, #customise {
    margin: 0px 50px 0px 50px;
}

#espresso-subpage-drink-container-wrapper {
    width: 690px;
    margin: 0 auto;
    text-align: center;
}
#espresso-subpage-drink-container-wrapper .drink-header {
    margin-top: 35px;
}
#espresso-subpage-drink-container-wrapper .drink-container {
    height: 270px;
}
#espresso-subpage-drink-container-wrapper .drink-price {
    bottom: 30px;
}
/* page select a size */
.cup-box {
    font-family: Pike;
    width: 355px;
    height: 157px;
    padding: 35px;
    margin: 55px auto;
    display: flex;
    align-items: center;
    font-size: 20px;
    letter-spacing: 1px;
    background-color: #fff;
    box-shadow: 4px 4px 16px 0 rgba(169, 169, 169, 0.5);
    position: relative;
}
.cup-size-header {
    font-family: PikeBold;
    font-size: 26px;
}
.cup-box.not-available {
    background-color: #ffffff;
}
.cup-box .not-available {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.7);
}
.cup-box .cup-box-txt {
    position: absolute;
    left: 195px;
}

/* admin lock */
#adminCornerBtn {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 250px;
    height: 250px;
    border: 0px solid #000;
    z-index: 99999;
}
#adminLockContainer {
    top: 300px;
    position: relative;
}
#pin-keyboard {
    text-align: center;
    margin: 0 auto;
}
.btn-pin {
    font-size: 40px;
    font-weight: bold;
    color: #006241;
    padding: 30px 50px;
    border: 3px solid #006241;
    margin: 10px;
}
.btn-pin:active {
    background-color: #006241;
    color: #fff;
}
.service-menu-bottom {
    position: absolute;
    bottom: 90px; /*120*/
}
.selectDefaultLang, .selectDefaultLang select {
    font-size: 22px;
    padding: 15px;
    color: #1E3932;
}
.selectDefaultLang span {
    font-size: 24px;
    margin-right: 15px;
}

/* summary */
#summary {
    position: relative;
    top: 20px;
    height: 1650px;
}
.summary-data-container {
    background-color: #F9F9F9;
    /*padding: 60px 60px 60px 0px;*/
    width: 1040px;
    margin: 0 auto;
}
.summary-data-header {
    background-color: #fff;
    padding: 80px 0px 80px 0px;
    overflow: auto;
    box-shadow: 4px 4px 16px 0 rgba(169, 169, 169, 0.5);
}
.summary-data-header div {
    float: left;
}
.summary-drink-image {
    margin-right: 50px;
    text-align: center;
}
.summary-drink-data {
    float: left;
    margin-left: 0px;
}
.summary-drink-data div {
    float: none;
}
.summary-size {
    color: #1E3932;
    font-family: PikeBold;
    font-size: 36px;
    letter-spacing: 1px;
    line-height: 52.4px;
    /*width: 180px;*/
    text-align: left;
    display: block;
}
.summary-size span {
    font-family: Pike;
    font-size: 18px;
    text-decoration: underline;
    margin-left: 20px;
    text-transform: uppercase;
}
.summary-size-info span {
    font-family: Pike;
    font-size: 18px;
}
.summary-header {
    color: #1E3932;
    font-family: PikeBold;
    font-size: 50px;
    letter-spacing: 2px;
    line-height: 72.05px;
    width: 337px;
    text-align: left;
    text-transform: uppercase;
}

.summary-data-row {
    background-color: #fff;
    display: flex;
    height: 140px;
    margin-top: 22px;
    padding: 20px 0px 20px 60px;
    box-shadow: 4px 4px 16px 0 rgba(169, 169, 169, 0.5);
}
.summary-data-row div {
    float: left;
    align-self: center;
}
.ingredient-title {
    color: #1E3932;
    font-family: PikeBold;
    font-size: 28px;
    letter-spacing: 1px;
    line-height: 41.92px;
    width: 133px;
    text-align: left;
    text-transform: uppercase;
    font-weight: bold;
}
.ingredient-value {
    color: #000000;
    font-family: Pike;
    font-size: 28px;
    letter-spacing: 0.5px;
    line-height: 41.92px;
    text-align: left;
    max-width: 210px;
}


/* customize */
.customise-data-row {
    margin-top: 35px;
    margin-bottom: 35px;
    border-bottom: 3px solid #F9F9F9;
    height: 250px;
}
.customise-data-row:last-child {
    border-bottom: 0px;
}
.customise-box {
    position: relative;
    font-family: Pike;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    xmargin: 0px 15px;
    margin-left: 23px;
    display: flex;
    align-items: center;
    background-color: #F9F9F9;
    box-shadow: 4px 4px 16px 0 rgba(169, 169, 169, 0.5);
    position: relative;
    float: left;
}
.customise-data-row .customise-box:last-child {
    margin-right: 0;
}
.customise-box.size-roast {
    width: 257px;/*330*/
    height: 112px;/*185*/
    padding: 35px;
}
.customise-box.size-small {
    width: 158px;/*211*/
    height: 112px;/*165*/
    padding: 25px;
    margin-bottom: 30px;
}
.customise-box .active_img {
    position: absolute;
    top: -20px;
    right: -20px;
    display: none;
}
.customise-box.active .active_img {
    display: block;
}
.customise-box.size-roast, .customise-box.size-small {
    border: 3px solid transparent;
}
.customise-box.size-roast.active, .customise-box.size-small.active {
    border: 3px solid #006241;
}
.customise-box-header, .customise-row-title {
    font-family: PikeBold;
    font-size: 26px;
}
.customise-box-header span {
    display: block;
    font-family: Pike;
    padding-top: 5px;
}
.customise-box-header {
    text-transform: uppercase;
}
.customise-box.not-available {
    background-color: #ffffff;
}
.customise-box .not-available {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.7);
}

.customise-botttom-box-container {
    position: absolute;
    bottom: 70px;
}

.customise-botttom-box {
    border-top: 4px solid #1E3932;
    padding: 0px 100px;
    margin: 0px 50px;
}
.customise-txt {
    color: #006241;
    font-size: 22px;
    text-align: right;
    position: absolute;
    right: 80px;
}
.customise-txt span {
    text-decoration: underline;
}

.total-container {
    position: absolute;
    width: 100%;
    bottom: 30px;
}
.total {
    border-top: 4px solid #1E3932;
    padding: 45px 0px;
    margin: 0px 50px;
}
.total .price {
    text-transform: uppercase;
    color: #1E3932;
    font-size: 52px;
}

/* footer */
#footer-green {
    position: absolute;
    height: 55px;
    width: 100%;
    bottom: 0;
    background-color: #1E3932;
    z-index: 2;
}
#bottom-strip-container {
    position: absolute;
    bottom: 55px;
    height: 105px;
    width: 100%;
    background-color: #F2F0EB;
    z-index: 2;
}
#bottom-strip {
    padding: 23px 45px 23px 50px;
}
#footer-green .info-container span {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}

/* pay at the till popup*/
.popup {
    position: absolute;
    top: 60px;
    left: 40px;
    background-color: #FFFFFF;
    box-shadow: 0 7px 12px 0 rgba(129, 125, 125, 0.5);
    width: 890px;
    height: 1070px;
    padding: 55px;
    text-align: center;
}
.popup-content {
    width: 100%;
    border-top: 3px solid #006241;
}
.popup-price {
    color: #1E3932;
    font-size: 80px;
    font-family: PikeBold;
}
.overlay {
    position: fixed; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(215, 215, 215, 1); /* 0.8 bg with opacity */
    z-index: 3;
}
.overlay.alpha {
    background-color: rgba(215, 215, 215, 0.5); /* 0.8 bg with opacity */
}

/* payment options popup */
.payment-method-box-container {
    border: 0px solid red;
    margin: 0 auto;
    width: 710px;
}
.payment-method-box:first-child {
    margin-right: 45px;
}
.payment-method-box {
    position: relative;
    padding-top: 15px;
    border: 0px solid red;
    float: left;
    background-color: #F9F9F9;
    box-shadow: 4px 4px 16px 0 rgba(169, 169, 169, 0.5);
    width: 330px;
    height: 400px;
    text-align: center;
}
.pm-txt-container {
    position: absolute;
    bottom: 50px;
    text-align: center;
    width: 100%;
    border: 0px solid red;
}
.payment-method-box .pm-header {
    font-family: PikeBold;
    font-size: 30px;
    color: #1E3932;
    letter-spacing: 2px;
}
.payment-method-box .pm-desc {
    font-size: 20px;
    margin-top: 20px;
    letter-spacing: 0.5px;
}

/* changelog */
.changelog {
    margin-top: 25px;
    max-height: 1390px;
    overflow-y: scroll !important;
    padding-right: 50px;
}
.changelog h3 {
    margin-top: 0;
    margin-bottom: 0px;
}
.changelog ul {
    margin-top: 10px;
    margin-bottom: 35px;
}

/* enjoy  page */
.enjoy {
    text-align: center;
}
.enjoy-text {
    color: #fff;
    font-family: Pike;
    font-size: 25px;
    letter-spacing: 2px;
    line-height: 32.75px;
    margin-top: 40px;
}
.enjoy img {
    margin-top: 250px;
}
.enjoy-btn-container {
    width: 450px;
    margin: 0 auto;
    margin-top: 200px;
}

/* Place your cup into the dispenser page */
.common-green-page-container {
    width: 85%;
    margin: 0 auto;
    text-align: center;
}
hr.row-green-page-separator {
    height: 2px;
    background-color: #006241;
    border: none;
}

/* button */
#back-touch-container {
    position: relative;
    top: -25px;
    left: -25px;
    padding: 25px;
    overflow: auto;
    width: 230px;
}
#cancel-touch-container {
    position: relative;
    top: -25px;
    right: -50px;
    padding: 25px;
    overflow: auto;
    width: 230px;
}
.info-touch-container {
    position: relative;
    padding: 15px;
    right: -15px;
}
.btn {
    border: 3px solid #1E3932;
    border-radius: 8px;
    font-family: PikeBold;
    text-align: center;
    display: flex;
    align-items: center;
    color: #1E3932;
    text-transform: uppercase;
}
.btn.btn-bw {
    border: 3px solid #888;
    color: #888;
}
.btn .btn-text {
    text-align: center;
    width: 100%;
}
.btn-size-1 {
    width: 194px;
    height: 53px;
    font-size: 22px;
}
.btn-size-2 {
    width: 297px;
    height: 75px;
    font-size: 30px;
    letter-spacing: 2.9px;
}
.btn-size-3 {
    width: 506px;
    height: 130px;
    font-size: 40px;
    letter-spacing: 3.2px;
}

.btn-admin-menu {
    width: 297px;
    height: 75px;
    font-size: 30px;
    letter-spacing: 1px;
    padding: 10px 20px;
}

.btn-customise-drink {
    /*margin: 0px auto;*/
    margin-top: 150px;
    width: 320px;
}

.btn-full {
    border-radius: 8px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    background-color: #1E3932;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-full-standard {
    font-family: Pike;
    font-size: 28px;
    width: 300px;
    height: 77px;
}
.btn-full-standard-make-my-drink {
    font-family: Pike;
    font-size: 54px;
    width: 500px;
    height: 125px;
}
.btn-start-new-drink {
    border: 2px solid #fff;
    background-color: #fff;
    color: #1E3932;
}
.btn-order-same-drink {
    background-color: transparent;
    color: #fff;
    border: 3px solid #fff;
}
.btn-proceed {
    /*min-width: 445px;*/
    width: 645px;
    /*padding-left: 30px;
    padding-right: 30px;*/
    height: 112px;
    font-size: 42px;
    letter-spacing: 2.9px;

    background-color: #fff;
    color: #006241;
    font-family: PikeBold;
}

h1,h2 {
    font-family: PikeBold;
    color: #1e3932;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0px;
}

h1 {
    font-size: 70px;
}
h2 {
    font-size: 36px;
}

body {
    position: relative;
    background-color: #F9F9F9;
}
#jsdebug {
    position: absolute;
    top: 450px;
    background-color: #fff;
    opacity: 0.9;
    z-index: 1000;
}
.controls {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 2000;
}
.controls input {
    font-size: 10px;
}
pre {
    font-size:16px;
    border-top: 1px solid #ccc;
    padding-left: 20px;
    margin: 0;
}

/* tag / text in circle */
.tag {
    font-size: 18px;
    width: 21px;
    height: 22px;
    padding-left: 1px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    background-color: transparent;
    border: 2px solid #1E3932;
}

/* progress bar */
.progress-bar-box {
    width: 800px;
    padding: 40px;
    margin:50px auto;
    /*background:#f3f3f3;
    box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.1);*/
}
.bar {
    width: 100%;
    /*background:#dfdfdf;*/
    overflow: hidden;
    padding:3px;
}
.progress{
    float:left;
    padding:2px;
    background-color: #006241;
}
.progress.white {
    background-color: #fff;
}

#loader {
    padding:50px;
    xheight:350px;
    background-color: #ccc;
    border-radius: 10px;
    position: absolute;
    top: 40%;
    left: 428px;
    z-index: 99999;
}

/* common */
.no-sel {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.grayscale {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray; /* IE 6-9 */
}
.bg-darkgreen {
    /*position: relative;
    top: -45px;
    padding-top: 100px;*/
    background-color: #1E3932;
}
.white {
    color: #fff;
}
.uppercase {
    text-transform: uppercase;
}
.striked {
    text-decoration: line-through;
}
.red {
    color: #D80000;
}
.fll {
    float: left;
}
.flr {
    float: right;
}
.tal {
    text-align: left;
}
.tac {
    text-align: center;
}
.tar {
    text-align: right;
}
.hid {
    display: none;
}
.nomargin {
    margin: 0 !important;
}
.mt0 {
    margin-top: 0 !important;
}
.ml15 {
    margin-left: 15px;
}
.ml25 {
    margin-left: 25px;
}
.mr20 {
    margin-right: 20px;
}
.mr50 {
    margin-right: 50px;
}
.mt15 {
    margin-top: 15px;
}
.mt25 {
    margin-top: 25px;
}
.mt45 {
    margin-top: 45px;
}
.mt65 {
    margin-top: 65px !important;
}
.mt85 {
    margin-top: 85px;
}
.mt100 {
    margin-top: 100px;
}
.mt125 {
    margin-top: 125px;
}
.mt200 {
    margin-top: 200px;
}
.mt350 {
    margin-top: 350px;
}
.mt770 {
    margin-top: 770px;
}
.mb45 {
    margin-bottom: 45px;
}
.mb60 {
    margin-bottom: 60px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb25 {
    margin-bottom: 25px !important;
}
.mb70 {
    margin-bottom: 70px;
}
.pt65  {
    padding-top: 65px;
}
.pt100 {
    padding-top: 100px;
}
.pb15 {
    padding-bottom: 15px;
}
.m0a {
    margin: 0 auto;
}
.top60 {
    top: 60px !important;
}
.clr::after {
    content: "";
    clear: both;
    display: table;
}
.h250 {
    height: 250px;
}
.w100p {
    width: 100%;
}
.w700 {
    width: 700px;
}
.w890 {
    width: 890px;
}
.w245 {
    width: 245px;
}
.w265 {
    width: 265px;
}
.w285 {
    width: 285px;
}
.w325 {
    width: 325px;
}
.h1710 {
    height: 1710px;
}
.fwb  {
    font-family: PikeBold;
}
.fz28  {
    font-size: 28px;
}
.fz36 {
    font-size: 36px;
}
.fz42  {
    font-size: 42px !important;
}
.fz50  {
    font-size: 50px !important;
}
.fz60 {
    font-size: 60px;
}
.fz68 {
    font-size: 60px;
}
.fz80 {
    font-size: 80px;
}
.fz90 {
    font-size: 90px;
}
.fz160 {
    font-size: 160px;
}
.bt4green {
    border-top: 4px solid #1E3932;
}
.p0-100 {
    padding: 0px 100px;
}
.p0-115 {
    padding: 0px 115px;
}
.tdu {
    text-decoration: underline;
}
.tal {
    text-align: left !important;
}
.l30 {
    left: 30px;
}