html, body {
  background-color: #fff;
  color: var(--sonic-blue);
  font-family: 'Quicksand';
  height: 100%;
}



.sonic-bold {
  font-weight: bold;
}
.bg-sonic-blue {
    background-color: var(--sonic-blue);
}

.dl-dark {
    background-color: var(--sonic-blue);
    color: white;
    transition:
        background-color 1000ms linear,
        color 1000ms linear;
}

.dl-light {
    background-color: #fff;
    color: var(--sonic-blue);
    transition:
        background-color 1000ms linear,
        color 1000ms linear;
}
.dl-light > div > a {
    color: var(--sonic-blue);
    transition: color 1000ms linear;
}
.dl-dark > div > a {
    color: white;
    transition: color 1000ms linear;
}

.btn-sonic-blue {
    background-color: var(--sonic-blue);
    border-color: var(--sonic-blue);
    font-weight: bold;
}
.btn-sonic-blue:hover,
.btn-sonic-blue:focus {
    font-weight: bold;
    background-color: var(--sonic-pale-blue);
    border-color: var(--sonic-pale-blue);
}
.btn-sonic-blue:active {
    background-color: var(--sonic-bright-blue);
    border-color: var(--sonic-bright-blue);
}



.dl-dark button.btn-sonic-blue {
    background-color: #fff;
    border-color: #fff;
    color: var(--sonic-blue);
}
.dl-dark button.btn-sonic-blue:active {
    background-color: var(--sonic-bright-blue);
    border-color: var(--sonic-bright-blue);
}
.dl-dark .btn-sonic-blue:hover,
.dl-dark .btn-sonic-blue:focus {
    font-weight: bold;
    background-color: var(--sonic-pale-blue);
    border-color: var(--sonic-pale-blue);
}

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-middle { vertical-align: middle; }
.text-bold { font-weight: bold; font-family: 'Quicksand';}
.text-very-small {
    font-size: 0.25em;
}
.text-big {
  font-size: 1.6em;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.va-top {
  vertical-align: top!important;
}
.va-bottom {
  vertical-align: bottom!important;
}
.btn {
  border-radius:2px;
  font-weight: bold;
}

.menu-icon {
  font-size: 48px;
}
.text-topbar {
  font-weight: bold;
  font-size: 24px!important;
  line-height: 38px;
}

.text-bg-sonic {
  background-color: var(--sonic-blue);
  color: #fff;
}

.topbar {
  width: 100%;
  height: 56px;
  background-color: var(--sonic-blue);
  color: #fff;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 24px;
  line-height: 38px;
}
.menu-kind-symbol {
  width:24px;
}
.container-calendar {
  position: absolute;
  left:0px;
  top: 56px;
  width:256px!important;
  height: calc(100% - 56px);
  overflow-y: auto;
}
.date-list-item {
  border-radius: 0px!important;
  font-weight: bold;
  font-family: "Quicksand";
  font-weight: normal;
  font-size: 0.85em;
}
.date-list-item:hover {
  background-color: #DF395140!important;
  color: black;
}
.date-list-item.day-active:hover {
  background-color: var(--sonic-red)!important;
}
.day-normal {
  font-weight: bold;
}
.day-sunday {
  background-color: #ff8080!important;
  color: white!important;
  font-weight: bold;
}
.day-saturday {
  background-color: #ffff80!important;
  color: black!important;
  font-weight: bold;
}
.day-today {
  background-color: #00ADDF60!important;
}
.day-active {
  font-weight: bold;
  color: white!important;
  background-color: var(--sonic-red)!important;
}

.menu-toggle-bar {
  text-decoration: none;
}
.container-content-notices {
  font-family: "Quicksand";
  font-size: 0.9em;
  position: absolute;
  left:0px;
  top: 56px;
  width:100%;
  height: calc(100% - 56px);
  background-color: #fff;
  overflow-y: auto;
}
.container-content {
  font-family: "Quicksand";
  font-size: 0.9em;
  position: absolute;
  left:256px;
  top: 56px;
  width:calc(100% - 256px);
  height: calc(100% - 56px);
  background-color: var(--sonic-blue)!important;
  overflow-y: auto;
}
.shopping-list-item {
  padding: 3px!important;
}
.row-shopping-list {
  margin:0px;
  padding:0px;
}
.col-shopping-list {
  padding:2px;
}
.btn-xs {
  padding:3px;
  margin:0px;
  font-size: 1em;
  font-weight: bold;
  height:25px;
  width:25px;
}
.sum-input {
  text-align: right;
  font-weight: bold;
  width:60px;
}



.nutriscore-background {
  border-radius: 6px;
  /* background-color: #ffffffc0; */
  padding: 3px;
  text-align: center;
  width: 120px;
  font-weight: bold;
  /* color: black; */
  box-shadow: 2px 2px 4px #000000;

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */

}
.nutriscore-background-small {
  border-radius: 4px;
  /* background-color: #ffffffc0; */
  padding: 2px;
  text-align: center;
  width: 100px;
  font-weight: bold;
  /* color: black; */
  font-size: 0.85em;
  box-shadow: 1px 1px 2px #000000;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.nutriscore-background-big {
  border-radius: 6px;
  /* background-color: #ffffffc0; */
  padding: 3px;
  text-align: center;
  width: 190px;
  font-size: 22px;
  font-weight: bold;
  /* color: black; */
  box-shadow: 2px 2px 4px #000000;

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */

}


.nutriscore-background-edit {
  border-radius: 6px;
  padding: 0px;
  text-align: center;
  width: 140px;
  font-weight: bold;
  /* box-shadow: 1px 1px 2px #000000; */
}

.nutri-option {
  text-align: center;
  width: 16px;
  display: inline-block;
  font-weight: bold;
  color: #ffffff80;
  border-radius: 4px;
  cursor: pointer;
}
.nutri-option-small {
  text-align: center;
  width: 12px;
  display: inline-block;
  font-weight: bold;
  color: #ffffff80;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
  width: 14.28%;
  cursor: default;
}
.nutri-option-mini {
  text-align: center;
  width: 12px;
  display: inline-block;
  font-weight: bold;
  color: #ffffff80;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
  width: 14.28%;
  cursor: default;
}
.nutri-option-big {
  text-align: center;
  width: 24px;
  display: inline-block;
  font-weight: bold;
  color: #ffffff80;
  border-radius: 4px;
  cursor: pointer;
}

.nutri-option.active {
  color: white;
  text-align: center;
  font-size: 1.5em;
  padding-left: 5px;
  padding-right: 5px;
  width: 24px;
  margin-right: -2px;
  margin-left: -2px;
}
.nutri-option-small.active {
  color: white;
  text-align: center;
  font-size: 1.25em;
  width:20%;
}
.nutri-option-mini.active {
  color: white;
  text-align: center;
  width:18px;
  font-size: 1.0em;
  font-weight: bold;
}

.nutri-option-big.active {
  color: white;
  text-align: center;
  font-size: 1.5em;
  padding-left: 5px;
  padding-right: 5px;
  width: 38px;
  margin-right: -2px;
  margin-left: -2px;
}

.nutri-0 {
  background-color: rgb(16,16,16);
}

.nutri-a {
  background-color: rgb(0,122,62);
}
.nutri-b {
  background-color: rgb(109,190,42);
}
.nutri-c {
  background-color: rgb(238,189,7);
}
.nutri-d {
  background-color: rgb(226,122,0);
}
.nutri-e {
  background-color: rgb(218,59,16);
}

.hotness-1 {
  background-color: rgb(0,122,62);
}
.hotness-2 {
  background-color: rgb(238,189,7);
}
.hotness-3 {
  background-color: rgb(226,122,0);
}
.hotness-4 {
  background-color: rgb(0,0,0);
}


.menu-collapse-btn {
  margin-top: 5px;
  margin-left: 0px;
  margin-right: 0px;
}
.menu-layout td {
  padding:5px;
}
.menu-textarea {
  resize:none;
  height:200px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  font-size: .9rem;
  font-weight: bold;

}
.menu-textarea-additional {
  height:100px;
  font-size: .9rem;
}
.menu-textarea-label {
  font-size: .875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom: 0px;
}
.card-body {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top: 0px;
}

div.collapse {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.input-sum {
  width: 72px;
}
.w-60px{
  width:60px!important;
}
.nowrap {
  white-space: nowrap;
}

/* td {
  border:1px dotted #00000030;
} */


foodsymbol > img {
  border: 2px solid red;
  border-radius: 50%;
}

foodsymbol.readonly > img {
  border: 2px solid #00000000;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
foodsymbol.disabled > img {
  border: 2px solid #00000000;
}


.menu-form-message {
  font-weight: bold;
  padding:6px;
  margin-right: 5px;
  margin-left: 5px;
}
.count-marker {
  display: inline-block;
  padding:0px;
  width: 20px;
  /* padding-left:7px; */
  /* padding-right:7px; */
  font-weight: bold;
  border-radius: 3px;
  text-align: center;
}

#custom-alert-background {
  display: none;
  z-index: 9998;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #00000060;
}
#custom-alert {
  display: none;
  z-index: 9999;
  position: absolute;
  top: 200px;
  left: calc(50% - 320px);
  width: 640px;
  /* height: 240px; */
  background-color: white;
  color: black;
}

.alert-card-body {
  padding:0px!important;
}
.alert-card-text {
  padding: 5px;
  font-weight: bold;
  text-align: center;
}
.alert-card-title {
  font-weight: bold;
  padding: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.alert-card-button {
  padding: 5px;
  width: 100%;
  text-align: right;
}


.button-big:hover {
  background-color: #ffffff10;
  cursor: pointer;
}

.col-notice {
  font-weight: bold;
}
.div-notice {
  border-radius: 5px;
}
.col-date {
  font-weight: bold;
  margin-top: 5px;
}
.col-menu-text {
  font-size:0.95em;
  min-height: 45px;
}
.col-menu-additional-text {
  font-size:0.75em;
  font-weight: bold;
}
.span-menu-ingedients {
  font-size:0.75em;
  font-weight: bold;
  margin-right: 50px;
}

hr {
  margin-top:0px!important;
  margin-bottom:0px!important;
  color: var(--sonic-blue);
}
.span-sum {
  font-size:0.95em;
  font-weight: bold;
  padding-right: 4px;
}
.span-sum-guests {
  font-weight: bold;
}

.menu-container {
  padding:10px;
  margin-bottom:5px;
  margin-top:5px;
  border-radius: 5px;
  min-height: 128px;
}
.menu-container.menu-container-main {
  background-color: rgba(var(--bs-primary-rgb),0.1);
}

.menu-container.menu-container-dessert {
  background-color: rgba(var(--bs-success-rgb),0.1);
}
.preorder-link {
  cursor: pointer;
}

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}


.container-display-queue {
  position: absolute;
  top: 0px;
  background-color: black;
  width: 1080px;
  height: 1920px;
  padding:0px;
}
#carousel-menus-main-queue {
  z-index: 100001;
  position: absolute;
  top: 200px;
  left: 0px;
  width: 1080px;
  height: 1255px;
  background-color: rgba(var(--bs-primary-rgb),0.25);
  color: white;
  overflow: scroll;
  overflow-x: hidden;
}
#carousel-menus-main-queue::-webkit-scrollbar,
#carousel-menus-dessert-queue::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
#carousel-menus-main-queue,
#carousel-menus-dessert-queue {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
#carousel-menus-main-full-queue {
  z-index: 100001;
  position: absolute;
  top: 200px;
  left: 0px;
  width: 1080px;
  height: 1664px;
  background-color: rgba(var(--bs-primary-rgb),0.25);
  color: white;
  overflow: hidden;
}

#carousel-menus-dessert-queue {
  z-index: 100001;
  position: absolute;
  top: 1460px;
  left: 0px;
  width: 1080px;
  height: 404px;
  background-color: rgba(var(--bs-success-rgb),0.25);
  color: white;
  overflow: scroll;
  overflow-x: hidden;
}



.container-display-portrait {
  position: absolute;
  top: 0px;
  background-color: black;
  width: 1080px;
  height: 1920px;
  padding:0px;
}
#carousel-menus-main-portrait {
  z-index: 100001;
  position: absolute;
  top: 60px;
  left: 0px;
  width: 1080px;
  height: 1395px;
  background-color: rgba(var(--bs-primary-rgb),0.25);
  color: white;
  overflow: scroll;
  overflow-x: hidden;
}


#carousel-menus-main-portrait::-webkit-scrollbar,
#carousel-menus-dessert-portrait::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
#carousel-menus-main-portrait,
#carousel-menus-dessert-portrait {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}



#carousel-menus-main-full-portrait {
  z-index: 100001;
  position: absolute;
  top: 60px;
  left: 0px;
  width: 1080px;
  height: 1804px;
  background-color: rgba(var(--bs-primary-rgb),0.25);
  color: white;
  overflow: hidden;
}

#carousel-menus-dessert-portrait {
  z-index: 100001;
  position: absolute;
  top: 1460px;
  left: 0px;
  width: 1080px;
  height: 404px;
  background-color: rgba(var(--bs-success-rgb),0.25);
  color: white;
  overflow: scroll;
  overflow-x: hidden;
}

#carousel-notices-short-portrait {
  z-index: 100001;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 1022px;
  height: 56px;
  background-color: black;
  color: white;
  overflow: hidden;
  border-top: 3px solid black;
}
#carousel-notices-portrait {
  z-index: 100001;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 1080px;
  height: 56px;
  background-color: black;
  color: white;
  overflow: hidden;
  border-top: 3px solid black;
}

.menu-title-portrait {
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 0px;
}
.menu-price-portrait {
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 0px;
}


.menu-text-portrait {
  font-size: 20px;
}



.menu-price-portrait {
  float: right;
  vertical-align: top;
}


.container-display {
  position: absolute;
  top: 0px;
  background-color: black;
  width: 1920px;
  height: 1080px;
  padding:0px;
}
.carousel-inner {
  z-index: 100002;
  height: 100%;
}
.menu-title {
  font-weight: bold;
}
.menu-text {
  font-size: 48px;
}
.menu-number {
  font-weight: bold;
  color: #ffffff80;
}
.notice {
  font-weight: bold;
  font-size: 24px;
}
.carousel-item {
  height: 100%;
  text-align: center;
}
#carousel-menus-main {
  z-index: 100001;
  position: absolute;
  top: 60px;
  left: 0px;
  width: 1280px;
  height: 960px;
  background-color: rgba(var(--bs-primary-rgb),0.25);
  color: white;
  overflow: hidden;
}
#carousel-menus-main-full {
  z-index: 100001;
  position: absolute;
  top: 60px;
  left: 0px;
  width: 1920px;
  height: 960px;
  background-color: rgba(var(--bs-primary-rgb),0.25);
  color: white;
  overflow: hidden;
}

#carousel-menus-dessert {
  z-index: 100001;
  position: absolute;
  top: 60px;
  left: 1280px;
  width: 640px;
  height: 960px;
  background-color: rgba(var(--bs-success-rgb),0.25);
  color: white;
  overflow: hidden;
}
#carousel-notices-short {
  z-index: 100001;
  position: absolute;
  top: 1020px;
  left: 0px;
  width: 1862px;
  height: 56px;
  background-color: black;
  color: white;
  overflow: hidden;
  border-top: 3px solid black;
}
#carousel-notices {
  z-index: 100001;
  position: absolute;
  top: 1020px;
  left: 0px;
  width: 1920px;
  height: 56px;
  background-color: black;
  color: white;
  overflow: hidden;
  border-top: 3px solid black;
}

.datetime-field {
  font-weight: bold;
  font-size: 38px;
  position: absolute;
  top: 0px;
}

#date-field {
  left: 0px;
}

#time-field {
  right: 0px;
}

#queue-field {
  z-index: 100001;
  position: absolute;
  width: 1080px;
  text-align: center;
  top: 50px;
  left: 0px;

  font-size:6em;
  color: white;
}


#qrcode-field {
  z-index: 100001;
  position: absolute;
  text-align: left;
  top: 1020px;
  right: 3px;
  width: 53px;
  height: 56px;
  background-color: white;
  color: white;
  overflow: hidden;
  border-top: 3px solid black;
}

#qrcode-field-portrait {
  z-index: 100001;
  position: absolute;
  text-align: left;
  bottom: 0px;
  right: 3px;
  width: 53px;
  height: 56px;
  background-color: white;
  color: white;
  overflow: hidden;
  border-top: 3px solid black;
}


.menu-price {
  font-weight: bold;
  color: white;
}





#watermark-main-full-queue {
  filter: brightness(20%);
  z-index: 10000;
  position: absolute;
  left: 540px;
  top: 1000px;
  transform: translate(-50%, -50%);
  color: white;
}

#watermark-main-queue {
  filter: brightness(20%);
  z-index: 10000;
  position: absolute;
  left: 540px;
  top: 820px;
  transform: translate(-50%, -50%);
  color: white;
}

#watermark-dessert-queue {
  filter: brightness(20%);
  z-index: 10000;
  position: absolute;
  left: 540px;
  bottom: 40px;
  transform: translate(-50%, -50%);
  color: white;
}







#watermark-main-full-portrait {
  filter: brightness(20%);
  z-index: 10000;
  position: absolute;
  left: 540px;
  top: 960px;
  transform: translate(-50%, -50%);
  color: white;
}

#watermark-main-portrait {
  filter: brightness(20%);
  z-index: 10000;
  position: absolute;
  left: 540px;
  top: 760px;
  transform: translate(-50%, -50%);
  color: white;
}

#watermark-dessert-portrait {
  filter: brightness(20%);
  z-index: 10000;
  position: absolute;
  left: 540px;
  bottom: 40px;
  transform: translate(-50%, -50%);
  color: white;
}


#watermark-main-full {
  filter: brightness(20%);
  z-index: 10000;
  position: absolute;
  left: 960px;
  top: 540px;
  transform: translate(-50%, -50%);
  color: white;
}

#watermark-main {
  filter: brightness(20%);
  z-index: 10000;
  position: absolute;
  left: 640px;
  top: 540px;
  transform: translate(-50%, -50%);
  color: white;
}

#watermark-dessert {
  filter: brightness(20%);
  z-index: 10000;
  position: absolute;
  left: 1600px;
  top: 540px;
  transform: translate(-50%, -50%);
  color: white;
}

@media print {
    .no-print, .no-print *
    {
        display: none !important;
    }
}


.additional-text {
  height:88.5px;
  width: 100%;
}