/*******************************************************************************
 *  App specific configs
 ******************************************************************************/
@import url("darkgrey_extra.b6e3851bc7d6.css");

/*******************************************************************************
 *  Variables
 ******************************************************************************/

html {
  --cse-text-color:             #A5A5A5;
  --cse-text-color-dark:        #242424;
  --cse-text-color-light:       #FEFEFE;
  --cse-text-color-mild:        #EBEBEB;
  --cse-link-color:             #8E8E8E;
  --cse-link-color-hover:       #6E6E6E;
  --cse-link-color-active:      #FFFFFF;
  --cse-background-color:       #4B4B4D;
  --cse-background-color-light: #E9ECEF;
  --cse-background-color-mild:  #D1D4D6;
  --cse-background-color-dark:  #3E3E3E;
  --cse-shadow-light:           #818181;
  --cse-shadow-mild:            #515151;
  --cse-shadow-dark:            #212121;
  --cse-btn-active:             #F8F9FA;
  --cse-btn-selected:           #E1F7E9;
  --cse-btn-disabled:           #E2E6EA;
  --cse-btn-dim:                #E2E6EA;
  --cse-btn-border:             #6E6E6D;
  --cse-border-mild:            #949494;
  --cse-btn-danger:             #f2d3d3;
  --cse-btn-danger-border:      #b84242;
  --cse-table-color-header:     var(--cse-background-color-light);
  --cse-table-color-bright:     #FDFDFE;
  --cse-table-color-dim:        #F3F3F4;
  --cse-color-ok:               #CEE0CE;
  --cse-color-nok:              #E8CECE;
  --cse-sidebar-width:          18em;   /* (18 x 'font-size') */
  --cse-min-screen-width:       325px;
  --cse-sidebar-show-min-width: calc( var(--cse-sidebar-width) + var(--cse-min-screen-width));
}


/*******************************************************************************
 *  Basic top-level tags
 ******************************************************************************/

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  position: relative;
}

body {
  font-size: 14px; /* don't change */
  font-family: 'Open Sans', sans-serif;
  background-color: var(--cse-background-color);
}

a {
  color: var(--cse-link-color);
}

a.dark {
  color: var(--cse-text-color-dark);
}

a:hover {
  color: var(--cse-link-color-hover);
}

a.dark:hover {
  color: var(--cse-link-color-hover);
}

textarea {
  border-radius: .5em;
  padding: .2em .4em .2em .4em;
  border: 1px solid var(--cse-border-mild);
}

#page-content {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header {
}

article {
  flex: 1 100%;
  display: flex;
}

aside {
  position: relative; overflow: hidden;
}

aside:empty {
  display: none;
}

aside:before {
  content:"";
  position: absolute;
  background-image: url("../img/sidebar_tiles.41ea15d0ccef.img");
  background-repeat: repeat;
  background-size: 5em 4.45em;
  transform: rotate(-45deg);
  z-index: -1;
}

main {
  min-width: var(--cse-min-screen-width);
}

footer {
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cse-text-color);
  background-color: var(--cse-background-color-dark);
}

.subsection {
  padding: 1em;
}

.form-edit-panel {
  padding: 2em 3em 2em 3em;
  background-color: var(--cse-background-color-light);
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, default */
}

/* Small screens
 * 577 is the current value for var(--cse-sidebar-show-min-width)
*/
@media all and (max-width: 576px) {
  /* No sidebar, 'aside' content above the main content */
  article { flex-flow: row wrap; align-content: flex-start; }
  main { width: 100%; margin: auto; }
  aside { width: 100%; margin: auto; }

  /*******************************************************************************
  *  Sub-categories: icons above the main content
  ******************************************************************************/
  .subcategory-list { display: flex; flex-flow: row nowrap; }
  .subcategory-list img { width: 90px; height: 56px; padding: 3px; border-radius: 28px; }
  .subcategory-list span { text-transform: uppercase; white-space: nowrap; line-height: 56px; padding-right: 1em; }
  .subcategory-list a {
    color: white;
    display: flex;
    margin-left: 0.5em;
    border-radius: 32px;
    border: 1px solid white;
    background-color: rgba(62, 62, 62, 0.9);
  }
  .subcategory-list a:first-child { margin-left: 1em; }
  .subcategory-list a:last-child { margin-right: 1em; }
  .subcategory-list a:hover, .subcategory-list a:active, .subcategory-list .current {
    text-decoration: none;
    color: var(--cse-link-color-active);
    background-image: linear-gradient(to right, rgba(62, 62, 62, 0.35), rgba(75, 75, 77, 1));
  }
  .subcategory-list-container {
    display: flex;
    padding: 1em 0em 1em 0em;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
  }
  aside:before {
    top: -50vmax;
    left: -40vmax;
    width: 150vmax;
    height: 150vmax;
  }
}

/* Larger screens
 *
 * 577 is the current value for var(--cse-sidebar-show-min-width)
*/
@media all and (min-width: 577px) {
  /* Use sidebar */
  main    { flex: 3 0px; }
  article { flex-flow: row nowrap; }
  aside   { width: var(--cse-sidebar-width);  }

  /*******************************************************************************
  *  Sub-categories: sidebar on the left from the main content
  ******************************************************************************/
  .subcategory-list { width: 100%; display: flex; flex-flow: column nowrap; }
  .subcategory-list img { width: 90px; height: 56px; padding: 3px; border-radius: 28px; }
  .subcategory-list span { text-transform: uppercase; white-space: nowrap; line-height: 56px; padding-left: 0.5em; }
  .subcategory-list a {
    color: white;
    display: flex;
    margin-top: 0.75em;
    overflow: hidden;
    border-right: none;
    white-space: nowrap;
    border-top-right-radius: 0;
    border-top-left-radius: 32px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 32px;
    border-top:    1px solid white;
    border-left:   1px solid white;
    border-bottom: 1px solid white;
    background-color: rgba(62, 62, 62, 0.9);
  }
  .subcategory-list a:first-child { margin-top: 1em; }
  .subcategory-list a:last-child { margin-bottom: 1em; }
  .subcategory-list a:hover, .subcategory-list a:active {
    text-decoration: none;
    color: var(--cse-link-color-active);
    background-image: linear-gradient(to right, rgba(62, 62, 62, 0.35), rgba(75, 75, 77, 1));
  }

  .subcategory-list .current {
    background-image: linear-gradient(to right, rgba(209, 212, 214, 0.35), rgba(75, 75, 77, 1));
  }

  .subcategory-list-container {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0em 0em 0em 1em;
  }
  aside:before {
    top: 20vmax;
    left: -83vmax;
    width: 200vmax;
    height: 200vmax;
  }
}


/*******************************************************************************
*  Basic appearance of div-based responsive table
******************************************************************************/

.cse-table-header {
  padding: 1em;
  text-align: center;
  background-color: var(--cse-table-color-header);
}

.cse-table-row, .cse-table-col {
  padding: .5em;
  text-align: center;
}

.cse-table-row:nth-child(even) {
  background-color: var(--cse-table-color-dim);
}

.cse-table-row:nth-child(odd) {
  background-color: var(--cse-table-color-bright);
}

.cse-table-row:hover, .cse-table-row:active {
  /* to be done */
}

/*******************************************************************************
*  Basic appearance of a button
******************************************************************************/

.cse-btn {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  user-select: none;
  line-height: 1.5;
  font-size: 1rem;
  height: 42px;             /* 3em */
  min-width: 100px;
  cursor: pointer;
  font-weight: 400;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  border-radius: 42px;
  padding-left: 1.2em;
  padding-right: 1.2em;
  text-decoration: none;
  color: var(--cse-text-color-dark);
  background-color: var(--cse-btn-active);
  border: 1px solid var(--cse-btn-border);
}

.cse-btn-selected {
  text-decoration: none;
  color: var(--cse-text-color-dark);
  background-color: var(--cse-btn-dim);
}

.cse-btn-small {
  font-size: .8em;
  height: 21px;
  min-width: 58px;
  border-radius: 21px;
  padding-left: .8em;
  padding-right: .8em;
}

.cse-btn-danger {
    border: 1px solid var(--cse-btn-danger-border);
}

.cse-btn:disabled {
  background-color: var(--cse-btn-disabled);
}

.cse-btn:hover {
  cursor: pointer;
  text-decoration: none;
  color: var(--cse-text-color-dark);
  background-color: var(--cse-btn-dim);
}

/*******************************************************************************
 *  Navigation panel (window top)
 ******************************************************************************/

.navbar {
  background-color: var(--cse-background-color-dark);
}

.nav-link {
  color: var(--cse-link-color);
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
}

.nav-link:hover {
  color: var(--cse-link-color-active);
}

/* Parent container for BranchSelect in navbar */
#dropdownBranchSelect {
  position: absolute;
  top: 2em;
  left: 4.5em;
}

.landing_pattern_line {
  height: auto;
  position: relative;
  overflow: hidden;
}

.landing_pattern_line:before {
  content:"";
  position: absolute;
  background-image: url("../img/sidebar_tiles.41ea15d0ccef.img");
  background-repeat: repeat;
  background-size: 5em 4.45em;
  transform: rotate(-45deg);
  z-index: -1;
  top: -50vmax;
  left: -50vmax;
  width: 250vmax;
  height: 250vmax;
}

.landing_city {
  display: block;
  white-space: nowrap;
  color: white;
  font-size: 36px;
  padding-top: 2em;
  padding-bottom: .5em;
}

.landing_branch {
  padding-left: 1em;
  padding-bottom: 1em;
}

.branch_name {
  color: white;
  display: inline-block;
  white-space: nowrap;
  line-height: 30px;
  font-size: 28px;
  font-style: italic;
  font-family: 'Playfair Display', serif;
}

.branch_name:hover {
  color: white;
}

.branch_name_clar {
  display: block;
  white-space: nowrap;
  font-size: 12px;
  font-style: italic;
  color: var(--cse-link-color);
}

.branch_name_address {
  display: block;
  white-space: nowrap;
  font-size: 12px;
  font-style: italic;
  color: white;
}

.shop_status_base {
  position: relative;
  transform: rotate(-15deg);
  padding-left: .5em;
  height: 3em;
  width: auto;
  fill: white;
  stroke-width: 3px;
  stroke: red;
}

@media only screen and (max-width: 570px) and (max-height: 330px) {
  .branch_name_navbar {
    max-width: 20em;
    font-size: 22px;
  }
  .shop_status {
    left: 26em;
  }
}

@media only screen and (max-width: 330px) and (max-height: 570px) {
  .branch_name_navbar {
    width: 9em;
    font-size: 17px;
  }
  .shop_status {
    left: 9.3em;
  }
}

@media screen and (min-width: 330px) {
  .branch_name_navbar {
    width: 9.5em;
    font-size: 18px;
  }
  .shop_status {
    left: 12em;
  }
}

@media screen and (min-width: 768px) {
  .branch_name_navbar {
    width: 8em;
    font-size: 18px;
  }
  .shop_status {
    left: 9.5em;
  }
}

@media screen and (min-width: 1024px) {
  .branch_name_navbar {
    width: 12em;
    font-size: 20px;
  }
  .shop_status {
    left: 16em;
  }
}

#dropdownBranchSelect > .shop_status_closed {
  stroke: red;
}
.shop_status_closed a:visited {
  stroke: red;
  fill: white;
}

#dropdownBranchSelect > .shop_status_open {
  stroke: green;
}
.shop_status_open a:visited {
  stroke: green;
  fill: white;
}

#dropdownBranchSelect > .shop_status_preorder {
  stroke: yellow;
}
.shop_status_preorder a:visited {
  stroke: yellow;
  fill: white;
}

#dropdownBranchSelect > span{
  display: block;
  white-space: nowrap;
  font-size: 12px;
  font-style: italic;
  color: var(--cse-link-color);
}

/*******************************************************************************
 *  Product Grid

 clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 70%, 30% 40%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 70%, 30% 40%);

 ******************************************************************************/
.cropped {width: 100%; height: 100%; object-fit: cover;}
.fitted {width: 100%; height: 100%; object-fit: contain;}
.fixed-xy-container {width: 100%; padding-bottom: 61.8%; position: relative;}
.fixed-xy-contents {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}

.grid-container {
  display: flex;
  flex-flow: row wrap;
  padding-right: 14px;      /* 1em */
  padding-bottom: 14px;     /* 1em */
  justify-items: space-between;
  justify-content: space-between;
}

.grid-item {
  flex: 1 1 33%;
  min-width: calc(var(--cse-min-screen-width) - 14px);
  max-width: var(--cse-sidebar-show-min-width);
  padding-top: 14px;        /* 1em */
  padding-left: 14px;       /* 1em */
}

/* Carousel settings */
.carousel-item-next, .carousel-item-prev, .carousel-item.active {
  display: block;
  transition: transform 2s ease;
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-duration: 1s;
  transition-property: opacity;
}

/* Product cards */
.card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: linear-gradient(150deg, rgb(209,212,214), rgb(62,62,62));
}

.title-container {
  position: absolute;
  left: calc(5% + 3px);
  top: calc(5% + 5px);
}

.card-title {
  font-size: 155%;
  line-height: 25px;
  width: 80%;    /* Leave 20% for the price */
  color: var(--cse-text-color-light);
  text-shadow: 0px 0px 2px var(--cse-shadow-mild);
}

.card-price {
  position: absolute;
  right: calc(5% + 3px);
  top: calc(5% + 5px);
  font-size: 115%;
  line-height: 25px;
  text-align: right;
  color: var(--cse-text-color-light);
  text-shadow: 0px 0px 2px var(--cse-shadow-mild);
}

.allergens, .additives {
  font-size: 70%;
  line-height: 12px;
  font-style: italic;
  color: var(--cse-text-color-mild);
}

/* Adapt color for Bootstrap-Tooltip */
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--cse-background-color-dark); }
.tooltip .tooltip-inner {
  font-size: 0.9em;
  line-height: 1.1em;
  background-color: var(--cse-background-color-dark);
}

.card-img {
  width: auto;
  height: auto;
  max-width: 73%;
  max-height: 70%;
  object-fit: contain;
  position: absolute;
  right: calc(5% + 3px);
  bottom: calc(5% + 30px);
  transform: scale(0.85);
  transition: transform .2s;
  transform-origin: 100% 50%;
  -webkit-filter: drop-shadow(20px 16px 12px var(--cse-shadow-dark));
  filter: drop-shadow(20px 16px 12px var(--cse-shadow-dark));
}

.card-img:hover {
  transform: scale(1);
}

.card-subtitle {
  display: table;
  position: absolute;
  bottom: calc(5% + 5px);
  left: calc(5% + 3px);
  width: 30%;
  overflow: hidden;
}

.card-subtitle p {
  display: table-cell;
  font-size: 1.0em;
  line-height: 1.1em;
  padding-bottom: .2em;
  color: var(--cse-text-color-light);
  text-shadow: 0px 0px 1px var(--cse-shadow-mild);
}

/* Cart page */
.cart-img {
  width: 100%;
  max-width: 200px;
  padding: 16px;
  filter: drop-shadow(15px 11px 8px var(--cse-shadow-light));
  -webkit-filter: drop-shadow(15px 11px 8px var(--cse-shadow-light));
}

/* Cart controller buttons for every product list item (container) */
.prod-cart-ctl {
  position: absolute;
  bottom: calc(5% + 5px);
  right: calc(5% + 3px);
}

.cart-ctl-container {
  display: block;
  position: relative;
}

.cart-ctl {
  width: 112px;             /* 8em */
  height: 42px;             /* 3em */
  margin: 0 auto;
  white-space: nowrap;
}

.cart-ctl-btn {
  border: none;
  height: 42px;             /* 3em */
  cursor: pointer;
  border-radius: 42px;      /* 3em */
  text-align: center;
  text-decoration: none;
  background-color: var(--cse-btn-active);
  border: 1px solid var(--cse-btn-border);
}

.cart-ctl .cart-ctl-btn {
  margin: 0;
  padding: 0;
  border: 1px solid #6E6E6D;
}

.cart-ctl-btn:hover, .cart-ctl-btn:active {
  background-color: var(--cse-btn-dim);
}

.cart-ctl-add {
  z-index: 4;
  width: 100%;
  position: relative;
}

.cart-ctl-group {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
}

.cart-ctl-plus {
  position: absolute;
  top:0;
  right:0;
  z-index: 3;
  width: 42px;              /* 3em */;
  font-weight: bold;
  display: inline-block;
}

.cart-ctl-minus {
  position: absolute;
  top:0;
  left:0;
  width: 42px;             /* 3em */
  z-index: 3;
  font-weight: bold;
  display: inline-block;
}

.cart-ctl-display {
  width: 100%;
  height: 42px;             /* 3em */
  line-height: 42px;        /* 3em */
  text-align: center;
  white-space: nowrap;
  display: block;
  border-radius: 42px;      /* 3em */
  background-color: rgba(209,212,214,0.8); /* --cse-background-color-mild */
}

.cart-ctl-wait {
  z-index: 5;
  width: 26px;
  height: 26px;
  position: absolute;
  top: calc(50% - 13px);
  left: calc(50% - 13px);
  white-space: nowrap;
}

#modal_overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  z-index: 1100;
  display: none;
  position: absolute;
  background-color: black;
}

#modal_overlay img {
  width: 42px;
  height: 42px;
  position: absolute;
  top: calc(50% - 21px);
  left: calc(50% - 21px);
}

.address_group {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}

.address {
  position: relative;
  margin: 1em;
  padding: 1em;
  min-width: 14em;
  max-width: 18em;
  min-height: 7em;
  border: 1px solid black;
  border-radius: .3rem;
}

.address .cse-btn {
  margin-top: 1em;
}


/*******************************************************************************
 *  Orders, order management
 ******************************************************************************/

.control-panel-orders {
  white-space: nowrap;
  text-align: left;
  color: var(--light);
  background-color: #a3a5a8;
}

p.customer_note {
  width: 100%;
  border: none;
  resize: none;
  background: none;
  font-size: small;
}

a.order-current-state {
  border-bottom: 1px dotted;
  text-decoration: none;
  color: var(--dark);
}

.singleorder {
  position: relative;
  top: 0;
  left: 0;
}

.order-state-new .order-icon {
  position: absolute;
  width: 0;
  height: 0;
  border-top-left-radius: 5px;
  border-top: 2em solid var(--red);
  border-right: 2em solid transparent;
}

@keyframes blink-success {
  0%    {background-color: white;}
  30%   {background-color: #b4edc1;}
  100%  {background-color: white;}
}

.order-update-success {
  animation-name: blink-success;
  animation-duration: 2s;
}

[class*="order-state-"] {
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 1px #424242;
}

[class*="order-state-"]:hover, [class*="order-state-"]:active {
  box-shadow: 0 0 12px #424242;
}

/* DECLINED */
.order-state-DC {
  background-color: #ebebeb;
}

/* FAILED */
.order-state-FA {
  background-color: #ebebeb;
}

/* COMPLETED */
.order-state-CL {
  background-color: #ebebeb;
}

/* CANCELED */
.order-state-CA {
  background-color: #ebebeb;
}

/* CREATED */
.order-state-CD {
}

/* ACCEPTED */
.order-state-AC {
  background-color: #fffccc;
}

/* CHARGE_FAILED */
.order-state-CF {
}

/* CHARGE_RETRY */
.order-state-CR {
}

/* CHARGED */
.order-state-CH {
}

/* IN_PRODUCTION */
.order-state-IP {
}

/* PICKUP_READY */
.order-state-PR {
}

/* DELIVERY_READY */
.order-state-DR {
}

/* IN_DELIVERY */
.order-state-ID {
}

/* IN_CANCELING */
.order-state-IC {
}

/* REFUND_FAILED */
.order-state-RF {
}

/* REFUND_RETRY */
.order-state-RR {
}

/* INTERNAL_ERROR */
.order-state-IE {
  background-color: #ebebeb;
}

#order-counter-icon {
  display: inline-block;
  padding: 0em .3em .1em .3em;
  margin-left: .4em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  color: var(--light);
  background-color: var(--primary);
}

#order-counter-icon:empty {
   display: none;
}


/*******************************************************************************
 *  Editing content
 ******************************************************************************/
@keyframes blink-success {
  0%    {background-color: white;}
  20%   {background-color: lightgreen;}
  100%  {background-color: white;}
}

@keyframes blink-fail {
  0%    {background-color: white;}
  10%   {background-color: salmon;}
  100%  {background-color: white;}
}

.card-body-success {
  animation-name: blink-success;
  animation-duration: 2s;
}

.card-body-fail {
  animation-name: blink-fail;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}


/*******************************************************************************
 *  Game Snake
 ******************************************************************************/
.snakegame {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--light);
}