@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

:root {
   --Primary-font-static: 80 85 110;
   --Primary-color: 3 165 117;
   --Primary-color-darker: 0 145 97;
   --Primary-color-lighter: 22 190 140;
   --Danger: 0, 70%, 50%;
   --Danger-darker: 0, 70%, 42%;
   --Danger-lighter: 0, 70%, 58%;
   --Medium-warning: 30, 80%, 50%;
   --Medium-warning-lighter: 30, 80%, 60%;
   --Confirm: 115, 100%, 40%;
   --Neutral: 200, 80%, 50%;

   /* Font sizes */
   --fs-200: 10px;
   --fs-300: 11px;
   --fs-400: 12px;
   --fs-600: 14px;
   --fs-800: 16px;
   --fs-1000: 20px;

   /* Score colors HSL */
   --score-green: 115 100% 40%;
   --score-yellow: 40 100% 57%;
   --score-red: 0 100% 50%;
}

@media (prefers-color-scheme: dark) {
   :root {
      --Bg-light: #2C2E30;
   }
}

@media print {
   :root {
      --fs-200: 6pt;
      --fs-300: 7pt;
      --fs-400: 8pt;
      --fs-600: 10pt;
      --fs-800: 12pt;
      --fs-1000: 24pt;
   }
}

* {
   box-sizing: border-box;
}

body {
   color: rgb(var(--Primary-font));
   font-family: Open Sans, system-ui, sans-serif;
   font-size: 14px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   background: var(--Bg-light);
   margin: 0;
}

a:link,
a:visited {
  color: rgb(var(--Primary-color));
  text-decoration: none;
}

.alert a:link,
.alert a:visited {
  color: rgb(var(--Primary-color-lighter));
  text-shadow: 0 0 black;
}

a:hover,
a:active {
  text-decoration: underline;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--Icon-color) var(--Bg-light-darker);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--Bg-light-darker);
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--Icon-color);
  border-radius: 20px;
  border: 3px solid var(--Bg-light-darker);
}

#alert-wrapper .alert-width-full {
/*   margin-block-start: 0.5rem;
   margin-block-end: -1rem;
   padding-inline: 1.5rem;*/
   margin-block-end: 1rem;
}

.link-md a {
   font-size: var(--fs-500);
   font-weight: 400;
}

.link-sm {
   display: flex;
   align-items: baseline;
   gap: 0.5rem;
   
   color: rgb(var(--Primary-color));
}
.link-sm a {
   font-size: var(--fs-400);
   font-weight: 400;
}

::-moz-selection { /* Code for Firefox */
     background: rgb(var(--Primary-color) / 0.2);
   }

::selection {
  background: rgb(var(--Primary-color) / 0.2);
}

.box-white {
   border-radius: 0.5rem;
   padding: 0.5rem;
   background: var(--Bg-light-lightest);
}

.box-green {
   border-radius: 0.5rem;
   padding: 0.5rem;
   background-color: rgb(var(--Primary-color));
}

.shadow-soft {
   box-shadow: 0px 4px 16px 0px rgb(var(--Box-shadow));
}
.shadow-soft-green {
   box-shadow: 0px 4px 16px 0px rgb(19 56 47 / 0.30);
}

h1,h2,h3,h4 {
 -webkit-font-smoothing: antialiased;
}

h2 {
   font-size: 1.5rem;
   margin: 0;
}

h3 {
   font-weight: 700;
}

#header {
   /* This is the top bar containing the logo, main navigation and righthand side dropdown menus */
   background: var(--Bg-light-lighter);
   position: relative;
   z-index: 9999;
}

#logo-dark,
#logomark-dark {
   display: var(--Display-switch-inverted);
}

#logo-light,
#logomark-light {
   display: var(--Display-switch);
}

.layout {
   margin: 0 auto;
   padding: 1rem;
}

 #left-side {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   gap: 0.5rem;

   width: 320px;
}

#left-side .walkinBtn, #content-area-booking .walkinBtn {
   display: none;
}

#left-side.isToday .walkinBtn, #content-area-booking.isToday .walkinBtn {
   display: flex;
}

.main {
   display: flex;
   gap: 1rem;         
}

.content-area {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   gap: 1.5rem;

   padding: 2rem;
   font-weight: 600;
   height: fit-content;
}

.main-content {
   padding: 2rem;
   width: 100%;
}

.content-area hr.sectionDivider {
   border: 0;
   border-top: 1px solid var(--Bg-light-darker);
   margin-inline: -1rem;
}

.content-area-booking {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;

   width: 100%;
   height: fit-content;
}

.content-area-booking .stats, .content-area-booking #bookings-status {
   display: none;
}

#restaurantMenu {
   width: 280px;
}

.custom-popup, .modal {
   display: none;
   width: 95%;
   max-width: 600px;
   overflow-y: auto;
   z-index: 9999999;
   position: fixed;
   top: 40%;
   left: 50%;
   transform: translate(-50%,-40%);
}

#capacityBox, #bookingBox {
   position: absolute;
   display: none;
   z-index: 100000;
   /* background-color: #fff;
   text-align: left;
   padding: 20px 24px;
   border-radius: 15px;
   box-sizing: border-box;
   -webkit-box-shadow: 5px 5px 30px rgba(128,128,128,.5);
   -moz-box-shadow: 5px 5px 30px rgba(128,128,128,.5);
   box-shadow: 5px 5px 30px rgba(128,128,128,.5) */
}

#capacityBox {
   min-width: 200px;
   max-width: 250px;
   width: 230px;
}

/* Top right hamburger menu START */
.mainMenu-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;

   padding-block: 0.5rem;
   padding-inline: 0.5rem;
   width: 100%;
}
.mainMenu-footer span {
   font-size: var(--fs-200);
   color: var(--Primary-font-lighter);
}

.mainMenu-footer #colorSchemeSwitch-Wrapper {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 4px;

   font-size: var(--fs-200);
}
/* Top right hamburger menu END */

#calendar-trigger {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;   
   border-radius: 4px 4px 0 0;   
   border: 1px solid transparent;   
}
#calendar-trigger h2 {
   white-space: nowrap;
}

.noteOnTheDay {   
   padding: 8px;   
   background: hsl(from var(--Note) h s l);
   border-radius: 8px;
   border: 1px solid hsl(from var(--Note) h s calc(l - 20));   
}

.noteOnTheDay .theNote {
   --lh: 1.1rem;
   --max-lines: 6;
   line-height: var(--lh);
   max-height: calc(var(--lh) * var(--max-lines));
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--max-lines);
   font-size: var(--fs-400);
   font-weight: 500;
   transition: all 150ms;
}
.noteOnTheDay .showAll {
   text-align: center;
   font-size: var(--fs-400);
   font-weight: 700;
   cursor: pointer;
   background: hsl(from var(--Note) h s calc(l - 8));
   margin-block-start: 4px;
   border-radius: 4px;
}
.noteOnTheDay .showAll:hover {
   background: hsl(from var(--Note) h s calc(l - 16));
}
.noteOnTheDay .theNote.expand + .showAll i {
   transform: rotate(180deg);
}
.expand {
   display: block !important;
   max-height: 100% !important;
}

.drag {
   cursor: move;
}

.badge-wrapper {
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
}

.badge {
   min-width: 25px;
   max-width: 200px;
   padding: 2px 4px;
   align-items: center;
   gap: 10px;
   border-radius: 2px;
   white-space:nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
}

.http-method {
   color: #fff;
   min-width: 58px;
   text-align: center;
   padding: 2px 8px;
}

.http-get {
   background-color: #33A3FF;
}

.http-post {
   background-color: #85D65C;
}

.http-put {
   background-color: #EBAC00;
}

.http-delete {
   background-color: #D92626;
}

/*--- Booking type box colors ---*/
      
.color0 {
   background: rgba(var(--Booking-color0));
   color: #fff;
}      
.color1 {
   background: rgba(var(--Booking-color1));
   color: #fff;
}

.color2 {
   background: rgba(var(--Booking-color2));
   color: #fff;
}

.color3 {
   background: rgba(var(--Booking-color3));
   color: #fff;
}
.color4 {
   background: rgba(var(--Booking-color4));
   color: #fff;
}
.color5 {
   background: rgba(var(--Booking-color5));
   color: #fff;
}
.color6 {
   background: rgba(var(--Booking-color6));
   color: #fff;
}
.color7 {
   background: rgba(var(--Booking-color7));
   color: #fff;
}
.color8 {
   background: rgba(var(--Booking-color8));
   color: #fff;
}
.color9 {
   background: rgba(var(--Booking-color9));
   color: #fff;
}
.color10 {
   background: rgba(var(--Booking-color10));
   color: #fff;
}
.color11 {
   background: rgba(var(--Booking-color11));
   color: #fff;
}

.color0.striped {
   background: repeating-linear-gradient(135deg,rgb(var(--Booking-color0)),rgb(var(--Booking-color0)) 7px,#ed964a 7px,#ed964a 14px)
}

.color1.striped {
   background: repeating-linear-gradient(135deg,rgb(var(--Booking-color1)),rgb(var(--Booking-color1)) 7px,#0fbd9d 7px,#0fbd9d 14px)
}

.color2.striped {
   background: repeating-linear-gradient(135deg,rgb(var(--Booking-color2)),rgb(var(--Booking-color2)) 7px,#6db9df 7px,#6db9df 14px)
}

.color3.striped {
   background: repeating-linear-gradient(135deg,rgb(var(--Booking-color3)),rgb(var(--Booking-color3)) 7px,#b78dd8 7px,#b78dd8 14px)
}

.color4.striped {
   background: repeating-linear-gradient(135deg,rgb(var(--Booking-color4)),rgb(var(--Booking-color4)) 7px,#cacd18 7px,#cacd18 14px)
}

.color5.striped {
   background: repeating-linear-gradient(135deg,rgb(var(--Booking-color5)),rgb(var(--Booking-color5)) 7px,#dd3608 7px,#dd3608 14px)
}

.color6.striped {
   background: repeating-linear-gradient(135deg,rgb(var(--Booking-color6)),rgb(var(--Booking-color6)) 7px,#3e50da 7px,#3e50da 14px)
}

.color7.striped {
   background: repeating-linear-gradient(135deg,rgb(var(--Booking-color7)),rgb(var(--Booking-color7)) 7px,#32b913 7px,#32b913 14px)
}

.color8.striped {
   background: repeating-linear-gradient(135deg,rgb(var(--Booking-color8)),rgb(var(--Booking-color8)) 7px,#ce41a6 7px,#ce41a6 14px)
}

.color9.striped {
   background: repeating-linear-gradient(135deg,rgb(var(--Booking-color9)),rgb(var(--Booking-color9)) 7px,#ec8e81 7px,#ec8e81 14px)
}

.color10.striped {
   background: repeating-linear-gradient(135deg,rgb(var(--Booking-color10)),rgb(var(--Booking-color10)) 7px,#ffc34e 7px,#ffc34e 14px)
}

.color11.striped {
   background: repeating-linear-gradient(135deg,rgb(var(--Booking-color11)),rgb(var(--Booking-color11)) 7px,#ff9d7e 7px,#ff9d7e 14px)
}

/* Helper utilities START */
.pf-lighter {
   color: var(--Primary-font-lighter) !important;
}

.truncate-text {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}
      
/*-- Padding --*/
.p-0 {
   padding: 0 !important;
}

.p-bl-start-12px {
   padding-block-start: 12px !important;
}

.p-bl-start-125 {
   padding-block-start: 1.25rem;
}

.p-bl-025 {
   padding-block: 0.25rem;
}
.p-bl-05 {
   padding-block: 0.5rem;
}
.p-bl-1 {
   padding-block: 1rem;
}
.p-bl-2 {
   padding-block: 2rem;
}
.p-bl-end-05 {
   padding-block-end: 0.5rem;
}
.p-bl-end-1 {
   padding-block-end: 1rem;
}
.p-bl-end-0 {
   padding-block-end: 0 !important;
}
.p-bl-0 {
   padding-block: 0 !important;
}
.p-in-1 {
   padding-inline: 1rem;
}

/*-- Margin block--*/
.m-0 {
   margin: 0 !important;
}
.m-bl-auto {
   margin-block: auto;
}
.m-bl-start-auto {
   margin-block-start: auto;
}
.m-bl-start-05 {
   margin-block-start: 0.5rem;
}
.m-bl-025 {
   margin-block: 0.25rem;
}
.m-bl-05 {
   margin-block: 0.5rem;
}
.m-bl-1 {
   margin-block: 1rem;
}
.m-bl-2 {
   margin-block: 2rem;
}
.m-bl-end-4px {
   margin-block-end: 4px;
}

.m-bl-end-05 {
   margin-block-end: 0.5rem;
}
.m-bl-end-1 {
   margin-block-end: 1rem;
}
.m-bl-end-2 {
   margin-block-end: 2rem;
}
.m-in-auto {
   margin-inline: auto !important;
}
.m-in-start-auto {
   margin-inline-start: auto;
}
.m-in-start-100 {
   margin-inline-start: 100%;
}

/*-- Width -- Mainly used for input elements -- */
.width-fit-content {
   width: fit-content !important;
}
.width-auto {
   width: auto !important;
}
.width-full {
   width: 100% !important;
}
.width-2-05rem {
   width:2.5rem !important;
}
.width-3-05rem {
   width:3.5rem !important;
}
.width-4-05rem {
   width:4.5rem !important;
}
.width-5-05rem {
   width:5.5rem !important;
}
.width-6-05rem {
   width:6.5rem !important;
}
.width-8-05rem {
   width:8.5rem !important;
}
.width-9-05rem {
   width:9.5rem !important;
}
.width-10-05rem {
   width:10.5rem !important;
}
.width-12-05rem {
   width:12.5rem !important;
}
.width-14-05rem {
   width:14.5rem !important;
}
.width-15-05rem {
   width:15.5rem !important;
}
.width-16-05rem {
   width:16.5rem !important;
}

/* Height */
.height-auto {
   height: auto !important;
}

/* Flex */
.flex-inline {
   display: inline-flex;
}
.flex-column {
   display: flex;
   flex-direction: column;
}
.flex-row {
   display: flex;
   flex-direction: row;         
}
.flex-wrap {
   flex-wrap: wrap;
}
.flex-just-center {
   justify-content: center;
}
.flex-just-space {
   justify-content: space-between;
}
.flex-just-end {
   justify-content: flex-end !important;
}
.flex-items-center {
   align-items: center;
}
.flex-items-start {
   align-items: flex-start !important;
}
.align-items-end {
   align-items: flex-end !important;
}
.flex-gap-4px {
   gap: 4px !important;
}
.flex-gap-05 {
   gap: 0.5rem !important;
}
.flex-gap-075 {
   gap: 0.75rem !important;
}
.flex-gap-1 {
   gap: 1rem !important;
}
.flex-gap-105 {
   gap: 1.5rem !important;
}
.flex-gap-2 {
   gap: 2rem !important;
}
.flex-grow-0 {
   flex-grow: 0 !important;
}
.flex-grow-1 {
   flex-grow: 1 !important;
}

/* Alignment */
.text-left {
   text-align: left !important;
}
.text-center {
   text-align: center !important;
}
.text-right {
   text-align: right !important;
}
.float-left {
   float: left;
}

/* Font */
.font-size-400 {
   font-size: var(--fs-400);
}

.font-size-600 {
   font-size: var(--fs-600);
}

.font-size-800 {
   font-size: var(--fs-800);
}

.font-weight-400, .fw-400 {
   font-weight: 400 !important;
}

.font-weight-500, .fw-500 {
   font-weight: 500 !important;
}

.font-weight-600, .fw-600 {
   font-weight: 600 !important;
}

.font-weight-700, .fw-700 {
   font-weight: 700 !important;
}

.font-weight-800, .fw-800 {
   font-weight: 800 !important;
}

/* Other */

.bg-lightest {
   background-color: var(--Bg-light-lightest) !important;
}
.nowrap {
   white-space: nowrap;
}
.flex-nowrap {
   flex-wrap: nowrap !important;
}
.hidden {
   display: none !important;
}

.of-hidden {
   overflow: hidden;
}

/* Helper utilities END */

#body.booking #left-side, #body.daysettings #left-side {
   display: none;
}

span[data-tool-tip]:has(i) {
   margin-block: auto;
}

#dialog-manager-popup #managerPin {
   font-size: 26px;
   width: 100px;
   text-align: center;
   -webkit-text-security: disc;
}

.box-green {
   border-radius: 0.5rem;
   padding: 0.5rem;
   background-color: rgb(var(--Primary-color));
}

.emptyState {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   align-items: center;
   text-align: center;
}
.emptyState img {
   width: 100%;
   max-width: 136px;
}
.emptyState :is(h3, p, button) {
   padding: 0;
   margin: 0;
   align-self: center;
   text-align: center;
}
.emptyState h3 {
   font-size: var(--fs-1000);
   font-weight: 600;
}
.emptyState p {
   font-weight: 400;
}

@keyframes l3 {
   to{transform: rotate(1turn)
   }
}

ul.list-reset {
   list-style: none;
   padding: 0;
   margin: 0;
}
/* Media queries */

@media (max-width: 480px) {
   #menu-settings {
      position: absolute !important;
      top: 100%;
      width: 100%;
      max-width: 300px;
      border: 1px solid var(--Thin-line);
   }
   #menu-settings :is(span, a) {
      font-size: var(--fs-600);
      padding: .75rem; 
   }

   body {
/*       background-color: red;*/
   }
   #body.diagramView:not(.booking, .daysettings) .content-area-booking {
      display: none;
   }
   #topbar {
      padding-inline: 0.5rem;
   }
   .layout,
   .main-content {
      padding: 0.5rem;
   }

   .main {
      flex-direction: column;
      gap: 0.5rem;
   }
   #left-side {
      display: flex;
      width: 100%;
      gap: 0.5rem;
   }

   .main:has(#booking)  #left-side {
      display: none;
   }

   .content-area {
      padding: 1rem;
   }
   .content-area-header {
      padding-block-end: 0;
   }
   .content-area hr.sectionDevider {
      margin-inline: -1rem;
   }
   .main-content,
   .changeviewmodes,
   .largeBookingListButtons {
      display: none;
   }
   :is(#calendar, #calendar-popup) {
      position: relative;
      z-index: 9999999;
      width: 100%;
   }
   #calendar-container {
      display: none;
   }
   .flex-sm-col {
      display: flex !important;
      flex-direction: column !important;
   }
   .flex-sm-align-c {
      align-items: center !important; 
   }
   .flex-sm-just-sb {
      justify-content: space-between !important;
   }
   .width-sm-half {
      width: 50% !important;
   }
   .width-sm-full {
      width: 100% !important;
   }
   .flex-sm-align-fs {
      align-items: flex-start !important;
   }
   .flex-gap-05-sm {
      gap: 0.5rem !important;
   }
   .height-sm-auto {
      height: auto !important;
   }
   .hidden-sm {
      display: none !important; 
   }
   #calendar-trigger i {
      display: inline;
   }
}

@media (max-width: 639px) {
   .booking-header {
      flex-direction: column;
   }
   #calendar-trigger {
      padding-block: 6px;
   }
   .create-bookings-btns > button {
      width: 100% !important;
      margin-block: 8px !important;
      padding-inline: 0 !important;
   }
   #menu-settings {   
      width: 100%;
      max-width: 100% !important;
   }

}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 900px) {
   body {
/*      background-color: yellow;*/
   }
   #left-side {
      display: none;
   }

   #body.tableplanView.booking #left-side {
      display: flex;
      width: 100%;
   }

   #body.tableplanView.booking #content-area-booking {
      display: none;
   }

   .content-area-booking .stats, .content-area-booking #bookings-status {
      display: flex;
   }
   #topbar {
      padding-inline: 1rem;
   } 
   .layout,    
   .main,
   .main-content {
      padding: 0.5rem;
   }
   .booking-header {
      justify-content: space-between;
   }
   
   .content-area, .main-content  {
      padding: 1rem;
   }  
   .content-area hr.sectionDevider {
      margin-inline: -1rem;
   }
   .content-area-header {
      padding-block-end: 0;
   }
   .flex-row.flex-sm-col {
      flex-direction: column !important;
   }
   .flex-sm-col {
      display: flex !important;
      flex-direction: column !important;
   }
   .flex-sm-align-fs {
      align-items: flex-start !important;
   }
   .flex-sm-align-c {
      align-items: center !important;
   }
   .flex-sm-just-sb {
      justify-content: space-between !important;
   }
   .width-sm-half {
      width: 50% !important;
   }
   .width-sm-full {
      width: 100% !important;
   }
   .flex-gap-05-sm {
      gap: 0.5rem !important;
   }
   .height-sm-auto {
      height: auto !important;
   }
   :is(#calendar, #calendar-popup) {      
      position: absolute;
      margin-block-start: 4px;
      z-index: 9999999;
      width: calc(100% - 2rem);
   }
   #calendar-trigger {
      padding-block: 6px;
      padding-inline: 8px;
      border-bottom: 1px solid var(--Thin-line);
   }
   #calendar-trigger:hover {
      cursor: pointer;
      outline: 2px solid rgb(var(--Primary-color) / 0.2);
      border: 1px solid rgb(var(--Primary-color));      
   }
   #calendar-trigger i {
      display: inline;
   }
   .create-bookings-btns {
      flex-grow: 1;
   }
   .create-bookings-btns > button {
      width: 100% !important;      
      padding-inline: 0 !important;      
   }
}

@media (min-width: 481px) and (max-width: 900px) {
   #menu-settings {
      position: absolute !important;
      top: 100%;
      width: 100%;
      max-width: 300px;
      border: 1px solid var(--Thin-line);
   }
   #menu-settings :is(span, a) {
      font-size: var(--fs-600);
      padding: .75rem; 
   }

   #calendar-trigger {
      padding-inline: 8px;
      border-bottom: 1px solid var(--Thin-line);
   }
   #calendar-trigger:hover {
      cursor: pointer;
      outline: 2px solid rgb(var(--Primary-color) / 0.2);
      border: 1px solid rgb(var(--Primary-color));
   }

   .hidden-sm {
      display: none !important; 
   }
}

@media (min-width: 901px) {
   #calendar-trigger i {
      display: none;
   }
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 901px) and (max-width: 1024px){
   body {
/*       background-color: blue;*/
   }   
   #left-side {
      width: 280px;
   }
   .listView #left-side {
      display: none;
   }

   .content-area-booking .stats, .content-area-booking #bookings-status {
      display: flex;
   }
   #topbar {
      padding-inline: 1rem !important;
   }
   .layout, 
   .main {
      padding: 0.5rem;
   }
   .content-area  {
      padding: 1rem;
   }
   .content-area hr.sectionDevider {
      margin-inline: -1rem;
   }
   .main-content {
      padding: 1rem;
   }
   #alert-wrapper {
      /* margin-block-end: 0; */
   }
   :is(#calendar, #calendar-popup) {      
      position: relative;
      margin-block-start: 4px;
      z-index: 9999999;
      /* width: calc(100% - 2rem);
      max-width: 280px */
   }
   #calendar-trigger {
      padding-block: 6px;
      padding-inline: 8px;
      border-bottom: 1px solid var(--Thin-line);
   }
   #calendar-trigger:hover {
      cursor: pointer;
      outline: 2px solid rgb(var(--Primary-color) / 0.2);
      border: 1px solid rgb(var(--Primary-color));      
   }
   #body.tableplanView.booking #left-side {
      display: flex;
   }

}

/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) /* and (max-width: 1280px) */ {
   #body.booking #left-side,
   #body.daysettings #left-side,
   #body.tableplanView.booking #left-side {
      display: flex;
   }

   body {
/*       background-color: green;*/
   }  
   #topbar {
      padding-inline: 1.5rem;
   }
   
   #booking-list-small {
      display: none !important;
   }
   #body.diagramView #booking-list-small, #body.tableplanView #booking-list-small {
      display: block !important;
   }

   #content-area-booking .daynote {
      display: none;
   }
   
}

/* Media Query for Large screens */
@media (min-width: 1281px) {
   body {
/*       background-color: white;*/
   }
   .main {
      gap: 2rem;
   }
   .layout {   
      padding: 1.5rem;
   }
}

@media (max-width: 1024px) {
   .hidden-md {
      display: none !important;
   }

}

#body.access3 .daysettings,
#body.access3 #booking-list-large .actions > span,
#body.access3 .tableInfo button,
#body.access3 .tableInfo .button-set-status-wrapper,
#body.access3 .btnAddProduct,
#body.access3 #attachfile,
#body.access3 .booking-status-buttons {
   display: none !important;
}

#body.access1 #booking #files i.delete,
#body.access1 #booking #promocodes i.delete,
#body.access2 #booking #files i.delete,
#body.access2 #booking #promocodes i.delete,
#body.access3 #left-side .cancel {
   display: inline-block !important;
}

@media print {

   body,
      #header,
      .content-area-header * {
      background-color: transparent !important;
   }

   section {
      break-inside: avoid !important;
   }

   .group-container {
      width: 100% !important;
   }

   #page-nav,
   #right-side-content,
   .segmented-controls,
   *[type=button],
   .searchField,
   #search,
   .largeBookingListButtons,
   .changeviewmodes,
   #calendar-trigger i,
   #left-side,
   span#toggleHiddenBookings > div, span#toggleHiddenBookingsBig > div,
   i.fa-bars,
   .input-select:has(#results),
   #bookings-status {
      display: none !important;
   }

   .shadow-soft {
      box-shadow: none !important;
   }

   .main-content,
   .layout,
   .content-area {
      padding: 0 !important;
   }

   .table div,
   .booking-type,
   table.dataTable th,
   .state-cancelled.booking {      
      -webkit-print-color-adjust: exact !important;
      color-adjust: exact !important;
   }

   #calendar-trigger,
   .content-area-header h2{
      padding: 0 !important;
      border: none !important;
   }

   .content-area-booking,
   .content-area {
      gap: 0.5rem !important;
   }

   .content-area-header {
      padding-block-end: 0rem !important
   }

   div:has( > .dataTable.scrollX) {
      overflow-x: visible!important;
      width: 100% !important;
   }

   #booking-list-large td {
      padding-block: 3pt !important;
   }

   table.dataTable :is(th, td) {
      padding: 3pt !important;
   }

   span#toggleHiddenBookings {
      visibility: hidden !important;
   }

   #topbar,
   #daterange {
      border: none !important;
      padding-inline: 0 !important;
   }

   .input-textfield:has(input#daterange, input.daterange)::before {
      content: none !important;
   }

   section.twoBytwo-charts {
      flex-direction: row !important;
   }

   .pagination div:first-child {
      justify-content: flex-start !important;
   }

   .pagination div:first-child > span {
      width: 20pt !important;
      height: 20pt !important;
   }

   .stats {
      margin-top: 0!important;
   }

   .stats * {
      font-size: 10pt !important;
      font-weight: 600 !important;
   }

}