/*==============================================================================
============================== MAIN ============================================
==============================================================================*/

:root {
  --color-background: #ffffff;
  --color-main-background: #421f1045;
  --color-main-border: #c7c7c7;
  --color-main: #1d1f25;
  --color-side-background: #421f10;
  --color-side-border: #dbdbdd;
  --color-side: #ffffff;
  --color-input-background: #ffffff;
  --color-input-disabled-background: #ebebeb;
  --color-input-border: #0000000d;
  --border-radius: 6px;
  --box-shadow-input: 0px 0px 1px rgba(0, 0, 0, 0.32), 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 1px 3px rgba(0, 0, 0, 0.08);
  --font-main: 'Titillium Web';
  --color-background-2: #f6f8fc;
  --color-1: #421f10;
  --color-2: #ffd600;
  --color-3: #ffffff;
}

/*
  background-color: var(--border-radius);
  border: 1px solid var(--colors-input-border);
*/


* {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0px;
  background-color: var(--color-background);
  color: var(--color-main);
  font-family: var(--font-main);
  font-size: 14px;
}

#main-body.popup-open {
  overflow: hidden;
}

#body {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

a {
  color: var(--color-main);
  text-decoration: none;
}

/*==============================================================================
============================== MARGIN ==========================================
==============================================================================*/

.mt-0 {
  margin-top: 0px;
}

.mt-5 {
  margin-top: 5px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}


.mb-0 {
  margin-bottom: 0em;
}

.mb-1 {
  margin-bottom: 1em;
}

.mb-2 {
  margin-bottom: 2em;
}

.mb-3 {
  margin-bottom: 3em;
}

.ml-10 {
  margin-left: 10px;
}

/*==============================================================================
============================== PADDING =========================================
==============================================================================*/

.pt-0 {
  padding-top: 0em !important;
}

.pb-0 {
  padding-bottom: 0em !important;
}

/*==============================================================================
============================== GRID ============================================
==============================================================================*/


/*==============================================================================
============================== ALLGEMEIN =======================================
==============================================================================*/

.align-center {
  text-align: center;
}

.semibold {
  font-weight: 600;
}

.justify-content-center {
  display: flex;
  justify-content: center;
}

.uppercase {
  text-transform: uppercase;
}

.hidden{
  display: none !important;
}

.wsnw {
  white-space: nowrap;
}


/*==============================================================================
============================== HEADS ===========================================
==============================================================================*/


h1 {
  margin: 0px;
}

h2 {
  font-size: 1.4em;
  line-height: 1.4em;
  /*text-transform: uppercase;*/
  margin-top: 0em;
  margin-bottom: 0em;
}

h3 {
  font-weight: 600;
  font-size: 1.2em;
  line-height: 1.2em;
  margin-top: 0em;
  margin-bottom: 0em;
  color: #222222;
}

h4 {
  font-size: 1em;
  line-height: 1em;
  font-weight: 400;
  margin-top: 0em;
  margin-bottom: 0em;
  color: #888887;
  text-transform: uppercase;
}

h5 {
  font-weight: 400;
  font-size: 0.8em;
  margin-top: 0em;
  margin-bottom: 0em;
  color: #222222;
}

h6 {
  font-weight: 400;
  font-size: 0.8em;
  margin-top: 0em;
  margin-bottom: 0em;
  color: #A1A1A1;
}



/*==============================================================================
============================== CONTENT =========================================
==============================================================================*/

#main {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
  background-color: #d8eaff;
}

#control-area {
  width: calc( 100% - 250px );
  height: 100%;
  /*background: #d4c5ff;*/
}

#checkout-area {
  width: 250px;
  height: 100%;
  /*background: #d4c5ff;*/
  border-left: 1px solid #333333;
}

.main-control-area-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.main-checkout-area-items {
  height: calc( 100% - 120px );
}

.main-checkout-area-control {
  height: 120px;
  /*background: #d4c5ff;*/
  border-top: 1px solid #333333;
  padding-left: 10px;
  padding-right: 10px;
}

.main-checkout-area-control > div {
  height: 40px;
}


.main-checkout-area-order {
  padding-left: 10px;
  padding-right: 10px;
}


.main-checkout-area-total {
  font-size: 20px;
  padding-top: 5px;
}


.order-item {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #333333;
}

.order-item-inner {
  display: flex;
}

.order-item-details {
  display: flex;
  justify-content: space-between;
}

.order-item-left {
  width: calc( 100% - 50px );
  padding-right: 5px;
}

.order-item-right {
  width: 50px;
}

.order-item-title {
  font-weight: 700;
}



/*==============================================================================
============================== BTN =============================================
==============================================================================*/

.btn {
  display: inline-block;
  padding: 7px 20px;
  font-family: var(--font-main);
  border-radius: var(--border-radius);
  background-color: #d7d7d7;
  color: var(--color-1);
  box-shadow: var(--box-shadow-input);
  text-decoration: none;
  cursor: pointer;
}

.btn-fluid {
  width: 100%;
}

.btn-item {
  width: 50px;
  height: 30px;
}

.btn-red {
  color: #ffffff;
  border: 0px;
  background-color: red;
}

.btn-orange {
  color: #ffffff;
  border: 0px;
  background-color: orange;
}



/*==============================================================================
============================== KASSA ===========================================
==============================================================================*/


.kassa-item {
  position: absolute;
  padding: 10px;
}

.kassa-item-body {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #f4ffe7;
  padding: 10px;
  border: 1px solid #6cc900;
  border-radius: 5px;
}

.kassa-item-body > div {
  width: 100%;
}


.kassa-item-title {
  text-align: center;
}

.kassa-item-price {
  text-align: center;
  position: absolute;
  bottom: 20px;
}

.kassa-item-price > h3 {
  font-size: 24px;
}


.kassa-item-x-0 {
  left: 0%;
}

.kassa-item-x-1 {
  left: 8.33%;
}

.kassa-item-x-2 {
  left: 16.67%;
}

.kassa-item-x-3 {
  left: 25%;
}

.kassa-item-x-4 {
  left: 33.33%;
}

.kassa-item-x-5 {
  left: 41.67%;
}

.kassa-item-x-6 {
  left: 50%;
}

.kassa-item-x-7 {
  left: 58.33%;
}

.kassa-item-x-8 {
  left: 66.67%;
}

.kassa-item-x-9 {
  left: 75%;
}

.kassa-item-x-10 {
  left: 83.33%;
}

.kassa-item-x-11 {
  left: 91.67%;
}

.kassa-item-x-12 {
  left: 100%;
}

.kassa-item-y-0 {
  top: 0%;
}

.kassa-item-y-1 {
  top: 8.33%;
}

.kassa-item-y-2 {
  top: 16.67%;
}

.kassa-item-y-3 {
  top: 25%;
}

.kassa-item-y-4 {
  top: 33.33%;
}

.kassa-item-y-5 {
  top: 41.67%;
}

.kassa-item-y-6 {
  top: 50%;
}

.kassa-item-y-7 {
  top: 58.33%;
}

.kassa-item-y-8 {
  top: 66.67%;
}

.kassa-item-y-9 {
  top: 75%;
}

.kassa-item-y-10 {
  top: 83.33%;
}

.kassa-item-y-11 {
  top: 91.67%;
}

.kassa-item-y-12 {
  top: 100%;
}


.kassa-item-width-0 {
  width: 0%;
}

.kassa-item-width-1 {
  width: 8.33%;
}

.kassa-item-width-2 {
  width: 16.67%;
}

.kassa-item-width-3 {
  width: 25%;
}

.kassa-item-width-4 {
  width: 33.33%;
}

.kassa-item-width-5 {
  width: 41.67%;
}

.kassa-item-width-6 {
  width: 50%;
}

.kassa-item-width-7 {
  width: 58.33%;
}

.kassa-item-width-8 {
  width: 66.67%;
}

.kassa-item-width-9 {
  width: 75%;
}

.kassa-item-width-10 {
  width: 83.33%;
}

.kassa-item-width-11 {
  width: 91.67%;
}

.kassa-item-width-12 {
  width: 100%;
}


.kassa-item-height-0 {
  height: 0%;
}

.kassa-item-height-1 {
  height: 8.33%;
}

.kassa-item-height-2 {
  height: 16.67%;
}

.kassa-item-height-3 {
  height: 25%;
}

.kassa-item-height-4 {
  height: 33.33%;
}

.kassa-item-height-5 {
  height: 41.67%;
}

.kassa-item-height-6 {
  height: 50%;
}

.kassa-item-height-7 {
  height: 58.33%;
}

.kassa-item-height-8 {
  height: 66.67%;
}

.kassa-item-height-9 {
  height: 75%;
}

.kassa-item-height-10 {
  height: 83.33%;
}

.kassa-item-height-11 {
  height: 91.67%;
}

.kassa-item-height-12 {
  height: 100%;
}