:root {
  --color-site-bg: #F9F5F6;
  --color-container-bg: #FCFAFB;

  --color-accent: #2985dd;
  --color-accent-faded: #97b7d5;
  --color-accent-save: #e2ca38;
  --color-accent-alt: #de87e2;

  --color-text-heading: #4d4c5a;
  --color-text-normal: #4d4c5a;
  --color-text-info: #807f8b;

  --color-red: #f07070;

  --color-type-general: #4294ca;
  --color-type-concession: #8c75d3;
  --color-type-child: #40bf64;
  --color-type-teen: #5ec3ca;
  --color-type-adult: #4294ca;
  --color-type-adultwithbaby: #f8d346;
  --color-type-unknown: #646c7b;

  --color-initials: #707d90;

  --box-shadow-1: 0 3px 10px rgb(0 0 0 / 0.2);;
  --box-shadow-ticket: 0 3px 10px rgb(0 0 0 / 0.2);;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #BBBBBB88 transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: #BBBBBB88;
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #BBBBBBCC;
}

html, body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
}

.site-container {
  width: 100vw;
  height: 100vh;
  position: relative;

  padding: 20px 20px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  background-color: var(--color-site-bg);
}

.site-container-inner {
  width: 100%;
  height: 100%;
  position: relative;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.seating-confirm-button {
  position: absolute;
  right: 30px;
  bottom: 30px;

  height: 30px;
  width: 30px;
  padding: 10px;
  background-color: var(--color-accent-save);
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  box-shadow: var(--box-shadow-1);

  filter: grayscale(1);
  opacity: 0.3;
  pointer-events: none;

  transition: .3s all ease;
}

.seating-confirm-enabled {
  filter: grayscale(0);
  pointer-events: auto;
  opacity: 1;
  animation: wobble 1s ease forwards;
}

@keyframes wobble {
  0% { transform: scale(1); }
  20% { transform: scale(1.2); }
  40% { transform: scale(1.1); }
  50% { transform: scale(1.2); }
  70% { transform: scale(1); }
}

.seating-confirm-button:hover {
  filter: grayscale(0) contrast(1.2);
}

.seating-confirm-button img {
  width: 100%;
  height: 100%;
}

.barge-bookings-area {
  position: relative;
  height: 100%;
  width: 50%;
  /* flex-grow: 1; */
  margin-right: 10px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  padding: 20px 10px;
  border-radius: 20px;
  background-color: var(--color-container-bg);
  box-shadow: var(--box-shadow-1);
}

.barge-bookings-area-heading {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  margin-bottom: 16px;
  padding: 0 10px;
}

.barge-bookings-area-heading-top {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  margin-bottom: 6px;
}

.barge-bookings-area-heading-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.barge-title-name {
  font-weight: 600;
  font-size: 1.3rem;
}

.barge-title-date {
  display: flex;
  justify-content: space-between;
}

.barge-title-date-day {
  font-style: italic;
  font-size: 1.1rem;
}

.barge-title-date-time {
  background-color: var(--color-accent);
  padding: 3px 6px;
  color: white;
  /* font-style: italic; */
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 4px;

  margin-right: 10px;
}


.barge-title-type {
  background-color: var(--color-accent-alt);
  padding: 3px 6px;
  color: white;
  /* font-style: italic; */
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 4px;

  margin-left: 10px;
}

.barge-title-type:empty {
  background-color: transparent;
}

.barge-bookings-area-rows {

  padding: 10px;
  height: 100%;
  width: 97%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
}

.booking-row {
  /* height: 50px; */
  padding: 10px;
  width: 95%;
  background-color: white;
  margin-bottom: 10px;
  position: relative;

  border-left: 4px solid white;
  border-radius: 4px;

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;

  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);

  cursor: pointer;

  transition: .3s all ease;
}

.booking-row-info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.booking-row-lower {
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.booking-row-hovered {
  /* transform: translate(10px, 0px); */
  border-left: 4px solid var(--color-accent-faded);
}

.booking-row-selected {
  /* transform: translate(20px, 0px); */
  border-left: 4px solid var(--color-accent);
}

.booking-row-info .initials:not(.booking-tickets .initials) {
  text-transform: uppercase;
  /* width: 10%; */
  font-weight: 600;
  font-size: 1.8rem;
  text-align: center;
  margin-right: 10px;

  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;

  height: 60px;
  width: 60px;
  background-color: var(--color-initials);
  border-radius: 100px;
  color: white;

  transition: .3s all ease;
}

.booking-row-hovered .booking-row-info .initials:not(.booking-tickets .initials) {
  background-color: var(--color-accent-faded);
}

.booking-row-selected .booking-row-info .initials:not(.booking-tickets .initials) {
  background-color: var(--color-accent);
}

.booking-row-info > .name:not(.booking-tickets .name) {
  /* text-transform: uppercase; */
  /* width: 30%; */
  margin-right: 10px;
  font-weight: 600;
  color: var(--color-text-heading);
  text-align: left;

  /* display: flex;
  justify-content: center;
  align-items: center; */
}

.booking-edit {
  position: absolute;
  right: 10px;
  /* position: relative; */
  height: 28px;
  width: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 3px;
  opacity: 0.2;
  border-radius: 3px;
  transition: .3s all ease;
}
.booking-edit:hover {
  background-color: #c2c4cd;
  opacity: 0.35;
}

.booking-edit img {
  height: 100%;
  width: 100%;
}

.booking-source {
  position: absolute;
  bottom: -2px;
  border-radius: 100px;
  left: -2px;
  height: 22px;
  width: 22px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* padding: 3px; */
  border-radius: 100px;
  overflow: hidden;
  transition: .3s all ease;
  filter: grayscale(1);
  opacity: 1;
}
.booking-source:hover {
  /* background-color: #c2c4cd; */
}

.booking-source img {
  height: 100%;
  width: 100%;
  border-radius: 5px;
}

.booking-delete {
  position: absolute;
  right: 50px;
  /* position: relative; */
  height: 28px;
  width: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 3px;
  border-radius: 3px;
  transition: .3s all ease;
  filter: grayscale(1);
  opacity: 0.25;
  display: none;
}
.booking-delete:hover {
  background-color: #c2c4cd;
  opacity: 0.35;
}

.booking-delete img {
  height: 100%;
  width: 100%;
  border-radius: 5px;
}

.booking-delete-confirm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  background-color: white;

  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.booking-delete-confirm-options {
  display: flex;
  justify-content: center;
  align-items: center;
}
.booking-delete-confirm-button {
  background-color: #35dd35;
  margin: 3px 6px;
  padding: 4px 8px;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.booking-delete-decline-button {
  background-color: #e84f4f;
  margin: 3px 6px;
  padding: 4px 8px;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.booking-row-info-text {
  width: 200px;
  overflow: auto;
  text-wrap: nowrap
}


.booking-row-info-text > .date {
  margin-top: 4px;
  /* font-style: italic; */
  /* max-width: 500px; */
  font-size: 13px;
  /* color: #555; */
  color: var(--color-text-info);
  font-style: italic;
}


.booking-row-info-text > .notes {
  margin-top: 4px;
  /* font-style: italic; */
  /* max-width: 500px; */
  font-size: 13px;
  color: var(--color-text-normal);
  text-wrap: auto;
}

.booking-row-info-text > .notes-edit {
  width: 100%;
  min-height: 60px;
  font-size: 13px;
  resize: vertical;
}

.booking-row-info-icons {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 4px;
}

.booking-row-info-names {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 4px;
}

.booking-tickets {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
}

.booking-ticket {
  width: 65px;
  height: 40px;
  min-width: 65px;
  min-height: 40px;
  margin-right: 8px;
  margin-bottom: 8px;


  overflow: hidden;
  font-weight: 700;
  text-align: center;
  border-radius: 3px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  position: relative;
  color: white;
  box-shadow: var(--box-shadow-ticket);

  /* opacity: 0.7; */
}

.barge-seating-preview .booking-ticket {
  cursor: grab;
  margin-bottom: 0px;
  margin-left: 4px;
  margin-right: 4px;
}

.booking-ticket > .initials {
  font-size: 1rem;
  /* margin-right: 8px; */
  width: 40px;
  height: 40px;

  display: flex;
  justify-content: center;
  align-items: center;

}


.booking-ticket > .seat-id {
  position: absolute;
  right: 8px;
  font-size: 0.7rem;
  /* color: #4f7ac5; */
  /* margin-right: 8px; */
  background-color: white;
  width: 20px;
  height: 20px;

  /* margin: 10px; */

  display: flex;
  justify-content: center;
  align-items: center;
}

.draggable-ticket {
  box-shadow: var(--box-shadow-1);
}

.ticket-type-general {
  background-color: var(--color-type-general);
}
.ticket-type-general > .ticket-seat {
  color: var(--color-type-general);
}
.ticket-type-general > .seat-id {
  color: var(--color-type-general);
}

.ticket-type-adult {
  background-color: var(--color-type-general);
}
.ticket-type-adult > .ticket-seat {
  color: var(--color-type-general);
}
.ticket-type-adult > .seat-id {
  color: var(--color-type-general);
}

.ticket-type-adultwithbaby {
  background-color: var(--color-type-adultwithbaby);
  background: linear-gradient(48deg, var(--color-type-adult) 0%, var(--color-type-adult) 82%, var(--color-type-adultwithbaby) 83%)
}
.ticket-type-adultwithbaby > .ticket-seat {
  color: var(--color-type-adult);
}
.ticket-type-adultwithbaby > .seat-id {
  color: var(--color-type-adult);
}

.ticket-type-concession {
  background-color: var(--color-type-concession);
}
.ticket-type-concession > .ticket-seat {
  color: var(--color-type-concession);
}
.ticket-type-concession > .seat-id {
  color: var(--color-type-concession);
}

.ticket-type-child {
  background-color: var(--color-type-child);
}
.ticket-type-child > .ticket-seat {
  color: var(--color-type-child);
}
.ticket-type-child > .seat-id {
  color: var(--color-type-child);
}

.ticket-type-teen {
  background-color: var(--color-type-teen);
}
.ticket-type-teen > .ticket-seat {
  color: var(--color-type-teen);
}
.ticket-type-teen > .seat-id {
  color: var(--color-type-teen);
}

.ticket-type-unknown {
  background-color: var(--color-type-unknown);
}
.ticket-type-unknown > .ticket-seat {
  color: var(--color-type-unknown);
}
.ticket-type-unknown > .seat-id {
  color: var(--color-type-unknown);
}

.ticket-unassigned {
  /* opacity: 0.8; */
  /* border-radius: 14px; */
}
.barge-seating-preview .ticket-unassigned:hover {
  opacity: 0.8;
}

.ticket-unassigned > .seat-id {
  border-radius: 100px;
  font-weight: 600;
  font-size: 1rem;

  background-color: var(--color-red);
  color: white;
}

.cf-ticket {
  cursor: pointer;
}

.cf-ticket.ticket-unassigned  > .seat-id {
  background-color: white;
  color: white;
}

.booking-footer {
  width: calc(95% + 22px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.booking-new {
  min-height: 50px;
  /* height: 50px; */
  /* width: 50px; */
  background-color: white;
  margin-bottom: 10px;
  position: relative;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  color: var(--color-text-heading);

  border-left: 4px solid white;
  transition: .3s all ease;
  opacity: 1;
  cursor: pointer;
  padding: 5px 20px;

}

.booking-new:hover {
  opacity: 1;
  /* background-color: #eef */
  border-left: 4px solid var(--color-accent-faded);
}

.booking-new-add {
  height: 25px;
  width: 25px;
  margin-right: 10px;
  border-radius: 100px;
  opacity: 0.85;
}

.booking-new-add img {
  width: 100%;
  height: 100%;
}
.booking-new:hover .booking-new-add {
  background-color: #0001;
}

.assignments-counter {
  font-size: 0.8rem;
  background-color: var(--color-red);
  padding: 8px;
  border-radius: 4px;
  opacity: 0.85;
  box-shadow: var(--box-shadow-1);
}

.assignments-assigned {
  background-color: green;
  display: none;

}

.barge-seating-area {
  /* background-color: red; */
  position: relative;
  height: 100%;
  min-width: 40%;
  margin-left: 10px;

  padding: 100px 0px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  box-sizing: border-box;
  padding: 20px;
  border-radius: 20px;
  background-color: var(--color-container-bg);
  box-shadow: var(--box-shadow-1);
}

.barge-seating-preview {
  z-index: 2;
  position: absolute;
  top: 15px;


  width: 80%;
  height: 64px;
  box-sizing: border-box;


  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
  /* display: none; */


  /* box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); */
  border-radius: 10px;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.2));
}

.preview-locked {
  opacity: 0.5;
  pointer-events: none;
}

.barge-seating-preview-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-info {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 90%);
  width: 190px;
  padding: 10px;
  background-color: white;
  border-radius: 0px 0px 10px 10px;
}

.preview-naming {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.preview-name {
  /* position: absolute; */
  text-wrap: nowrap;
  bottom: 5px;
  left: 60px;
  max-width: 80%;
  overflow: hidden;
  font-weight: 600;
  opacity: 0.7;
  font-size: 0.8rem;
}

.preview-initials {
  text-transform: uppercase;
  /* width: 10%; */
  font-weight: 600;
  font-size: 1.2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  background-color: var(--color-accent);
  border-radius: 100px;
  color: white;
  transition: .3s all ease;
}

.preview-tickets {
  position: relative;
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; */
  justify-content: flex-start;
  align-items: center;
  /* align-content: flex-start; */
  margin: 0 14px;
  height: 100%;
  overflow-x: auto;
}

.preview-arrows {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.preview-arrow {
  width: 20px;
  height: 20px;
  position: relative;
  /* top: 50%; */
  border-radius: 100px;
  padding: 5px;

  cursor: pointer;
}

.preview-arrow:hover {
  background-color: #0001;
}

.preview-arrow img {
  width: 100%;
  height: 100%;
}

.preview-locked .preview-arrow {
  pointer-events: none;
  opacity: 0.5;
}

#preview-previous img {
  transform: translateX(-1px) rotate(-90deg);
}

#preview-next img {
  transform: translateX(1px) rotate(90deg);
}

.seating-chart {
  margin-right: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.seating-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.seat-elem {
  cursor: pointer;
}

.seat-holder {
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
}

.space {
  width: 75px;
  height: 40px;
  /* background-color: grey; */
  border-radius: 2px;
  margin: 5px;

  display: flex;
  justify-content: center;
  align-items: center;
  /* overflow: hidden; */
}

.axis {
  background-color: #e5e5e6;
  color: #585665;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row-special {
  padding: 4px 8px;
}

.row-letter {
  margin-left: 15px;
  height: 25px;
  width: 25px;
}

.row-number {
  height: 25px;
  width: 25px;
}

.seating-numbers {
  /* height: 30px; */
  margin-bottom: -8px;
}
.space-title {

}

.seat {

  /* width: 40px; */
  /* height: 40px; */
  background-color: #d3d3d3;
}

.seat-elem:hover {

  filter: contrast(1.2);
}

.split {
  width: 33px;
}

.split-a {
  margin-right: 2px;
}

.split-b {
  margin-left: 2px;
}

.bench {
  background-color: #bbb;
  margin-bottom: 5px;
}

.stool {
  background-color: #aaa;
}

.bench-side {
  opacity: 0.5;
  /* background-color: #aaa; */
  /* margin-bottom: 20px; */
}

.space {
  /* width: 40px; */
  /* height: 40px; */
  /* background-color: grey; */
  /* margin: 2px; */
}

.bench-row {
  margin-bottom: 5px;
}

.seat-options-box {
  position: absolute;
  padding: 7px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  /* width: 150px; */
  font-size: 0.7rem;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 100;
}

.seat-option {
  padding: 6px;
  cursor: pointer;
}

.seat-option:hover {
  background-color: #eee;
}

.square-assigned {
  width: 100%;
  height: 100%;
  font-size: 1.4rem;

  color: white;
  font-weight: bold;

  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;

  position: relative;
}

.square-assigned .seat-id, .seat-number {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0px 5px;
  border-radius: 2px;

  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translate(-50%, 50%);

  background-color: white;

  display: none;
  justify-content: center;
  align-items: center;

  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);

  z-index: 5;
}

.seat-number-active {
  display: flex;
}

.split-a .seat-id {
  left: 100%;
  margin-left: 2px;
}

.split-b .seat-id   {
  display: none;
}

.split .initials {
  font-size: 1rem;
}

/* NEW BOOKING WINDOW */
/* NEW BOOKING WINDOW */
/* NEW BOOKING WINDOW */
.new-booking-window {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  display: none;
  justify-content: center;
  align-items: center;
  background-color: #0009;
}

.new-booking-window-inner {
  position: relative;
  width: 520px;
  height: 400px;
  overflow-y: auto;
  background-color: white;
  border-radius: 4px;
  padding: 35px 30px;
  /* padding-bottom: 60px; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

.window-shown {
  display: flex;
}

.create-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.create-close {
  position: absolute;
  right: 30px;
  top: 20px;
  height: 20px;
  width: 20px;
  opacity: 0.8;
  transition: .3s all ease;
  cursor: pointer;
}

.create-close:hover {
  opacity: 1;
}
.create-close img {
  height: 100%;
  width: 100%;
}

.create-form {
  width: 100%;
  position: relative;
  flex-grow: 1;
}

.create-form-group {
  margin-bottom: 10px;
  display: flex;
}

.create-form-group label {
  margin-right: 10px;
  width: 40%;
}

.create-form-group input {
  font-size: 1rem;
  width: 60%;
}

.create-form-group textarea {
  resize: vertical;
  width: 60%;
}

.create-form-group select {
  font-size: 1rem;
  width: 100%;
  padding-right: 10px;
}

.cf-button {
  position: absolute;
  right: 0px;
  font-size: 1rem;
  /* height: 1.3rem; */
  /* width: 1.3rem; */
  background-color: #575c62;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;

  border-radius: 2px;
  cursor: pointer;
  border: none;
  padding: 4px 8px;
  border-radius: 5px;
  /* text-transform: uppercase; */
  font-size: 0.8rem;
  letter-spacing: 0.05rem;
}

.cf-button:hover {
  filter: contrast(1.4);
}

.cf-button:active {
  filter: contrast(0.7);
}

.cf-add-ticket {
  margin-left: 10px;
}

.cf-ticket-container-inner {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 60%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.save-new-booking {
  position: absolute;
  right: 0px;
  bottom: 0px;
  /* height: 1.3rem; */
  /* width: 1.3rem; */
  background-color: var(--color-accent);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;

  border-radius: 2px;
  cursor: pointer;
  border: none;
  /* text-transform: uppercase; */
  font-size: 0.8rem;
  letter-spacing: 0.05rem;
  padding: 4px 8px;
  border-radius: 5px;
}

.ticket-tooltip {
  position: absolute;
  background: #eee;
  color: #222;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ticket-tooltip-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 700;

  text-transform: capitalize;
  margin-bottom: 4px;
}

.tooltip-splodge {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
}

.tt-splodge-general { background-color: var(--color-type-general) }
.tt-splodge-concession { background-color: var(--color-type-concession) }
.tt-splodge-child { background-color: var(--color-type-child) }
.tt-splodge-teen { background-color: var(--color-type-teen) }
.tt-splodge-adult { background-color: var(--color-type-adult) }
.tt-splodge-adultwithbaby { background-color: var(--color-type-adultwithbaby) }
.tt-splodge-unknown { background-color: var(--color-type-unknown) }

.ticket-tooltip-seat {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 500;
  font-style: italic;

  opacity: 1;
  font-size: 0.6rem;
  /* letter-spacing: 0.1rem; */
  text-transform: uppercase;
}

.ticket-tooltip-id {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 500;
  font-style: italic;

  font-weight: 500;
  opacity: 1;
  font-size: 0.6rem;
  /* letter-spacing: 0.1rem; */
  text-transform: uppercase;
}

.tooltip-info {
  font-weight: 400;
  opacity: 1;
  font-size: 0.6rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  width: 34px;
  font-style: normal;
  opacity: 0.8;
}

.issue-feedback {
  position: absolute;
  top: 53%;              /* start off-screen */
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;

  padding: 12px 20px;
  background-color: #C0392B;
  color: #fff;
  border-radius: 6px;

  transition: top 0.4s ease, opacity 0.4s ease;
  z-index: 1000;
  pointer-events: none;
}

.issue-feedback.issue-feedback-shown {
  animation: feedbackIn 0.3s ease forwards;
}

@keyframes feedbackIn {
  from {
    opacity: 0;
    top: 53%;
  }
  to {
    opacity: 1;
    top: 50%
  }
}

.calendar-prompt {
  /* position: absolute; */
  /* left: 10px; */
  /* top: 10px; */

  /* transform: translateX(-4px); */
  margin-right: 10px;
  cursor: pointer;

  padding: 3px;
  border-radius: 6px;

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 101;
}

.calendar-prompt:hover {
  background-color: #d2d4dd;
}

.calendar-prompt img {
  height: 24px;
  width: 24px;
  opacity: 0.6;
}

.calendar-prompt:hover img {
  opacity: 0.8;
}

.calendar-prompt-active {
  background-color: white;
}

.calendar-prompt-active img  {
  opacity: 1;
}

.calendar-container {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: #0005;
  top: 0;

  z-index: 100;
  display: none;
  justify-content: center;
  align-items: flex-start;
}

.calendar-outer {
  position: relative;
  top: 25%;
  /* top: 10px; */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.calendar-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.calendar-shown {
  display: flex;
}

.calendar {
  /* width: 350px; */
  /* height: 350px; */
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2985dd;
  color: white;
  padding: 10px;
}

.calendar-header button {
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
}

.calendar-header span {
  font-size: 18px;
}

.calendar-mover {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 100px;
  transition: .3s all ease;
  padding: 5px;
}

.calendar-mover:hover {
  background-color: #ffffff33;
}

.calendar-mover img {
  width: 100%;
  height: 100%;
  filter: invert(0.9);
  transition: .3s all ease;
}

#prev-month img {
  transform: translateX(-1px) rotate(-90deg);
}

#next-month img {
  transform: translateX(1px) rotate(90deg);
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #f4f4f9;
  padding: 4px;
}

.calendar-day {
  font-weight: bold;
  background-color: #f0f0f0;
}

.calendar-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);  /* Same as above: 7 equal columns */
  grid-gap: 2px; /* Small gap between dates */
  padding: 4px;
}

.calendar-date {
  font-size: 0.9rem;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  cursor: pointer;
  background-color: #fff;
  transition: background-color 0.3s ease;
  border-radius: 100px;
  margin: 1px;
  border: 2px #007bff00 solid;
  pointer-events: none;
}

.calendar-date.future-day {
  pointer-events: auto;
}
.calendar-date.past-day {
  pointer-events: auto;
}
.calendar-date.today-day {
  pointer-events: auto;
}

.calendar-date:hover {
  background-color: #cfe2ff;
  /* color: white; */
}

.calendar-date.active {
  background-color: #2985dd !important;
  color: white  !important;
}

.past-day {
  /* opacity: 0.75; */
  /* background-color: #fef; */
  /* color: #85868b; */
}

.today-day {
  border: 2px #2985dd solid;
  /* opacity: 0.75; */
  /* background-color: #fef; */
  /* color: #85868b; */
}

.occurrence-day > .c-marker {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translate(-50%, 50%);
  background-color: #2985dd;

  border: 2px solid white;
  height: 5px;
  width: 5px;
  border-radius: 100px;
}

.calendar-return {
  text-align: center;
  padding: 2px;
  /* background-color: #f4f4f9; */
  /* background-color: #f4f4f9; */

  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 50%);
  opacity: 0.85;
  margin-bottom: 10px;
}

.calendar-return img {
  /* padding: 5px 15px; */
  /* background-color: #2985dd; */
  /* color: white; */
  /* border: none; */
  /* border-radius: 20px; */
  cursor: pointer;

  height: 24px;
  width: 24px;

}

.calendar-return img:hover {
  background-color: #0056b3;
}

.calendar-actions {
  /* margin-top: 10px; */
  border-radius: 8px;
  position: relative;
  width: 100%;
  background-color: white;

  display: flex;
  justify-content: center;
  align-items: center;
}

.calendar-occurrences {
  /* margin: 10px 20px; */
  /* margin-top: 10px; */
}

.calendar-occurrence {
  margin: 10px 20px;
  border: 2px solid #2985dd;
  border-radius: 8px;
  padding: 4px 6px;

  cursor: pointer;
}

.calendar-occurrence:hover {
  background-color: #e5edfb;
}

.occurrence-name {
  font-weight: 600;
}

.occurrence-date {
  display: flex;
  justify-content: space-between;
}

.occurrence-date-day {
  font-style: italic;
  font-size: 0.9rem;
}

.occurrence-date-time {
  background-color: #2985dd;
  padding: 2px 3px;
  color: white;
  /* font-style: italic; */
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 2px;
}


.search-prompt {
  position: absolute;
  right: 20px;
  top: 20px;
  margin-right: 10px;
  cursor: pointer;

  padding: 3px;
  border-radius: 6px;

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 101;
}

.search-prompt:hover {
  background-color: #d2d4dd;
}

.search-prompt img {
  height: 24px;
  width: 24px;
  opacity: 0.6;
}

.search-prompt:hover img {
  opacity: 0.8;
}

.search-prompt-active {
  background-color: white;
}

.search-prompt-active img  {
  opacity: 1;
}

.search-container {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: #0005;
  top: 0;

  z-index: 100;
  display: none;
  justify-content: center;
  align-items: flex-start;
}

.search-outer {
  position: relative;
  top: 25%;
  /* top: 10px; */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.search-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.search-area {
  background-color: white;
  position: relative;
  width: 520px;
  height: 400px;
  overflow-y: auto;
  background-color: white;
  border-radius: 4px;
  padding: 35px 30px;
  /* padding-bottom: 60px; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

.search-header {
  font-size: 1.3rem;
  font-weight: bold;
}

.search-text {
  margin-top: 10px;
  opacity: 0.3;
}

.search-shown {
  display: flex;
}

.mobile-view-toggle {
  position: absolute;
  left: 30px;
  bottom: 30px;

  height: 30px;
  width: 30px;
  padding: 10px;
  background-color: var(--color-accent-faded);
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  box-shadow: var(--box-shadow-1);

  transition: .3s all ease;
  display: none;
}

.mobile-view-toggle:hover {
  filter: contrast(1.2);
}

.mobile-view-toggle img {
  width: 100%;
  height: 100%;
}

/* -- -- -- -- -- -- -- - -- -- -- -- -- -- -- */
/* -- -- -- -- -- Aspect Tweaks -- -- -- -- -- */
/* -- -- -- -- -- -- -- - -- -- -- -- -- -- -- */

@media screen and (max-width: 1350px) {
  /* .barge-seating-area { min-width: 45%; } */

}

@media screen and (max-width: 1300px) {
  /* .axis { min-width: 50%; } */
  .seating-chart { margin-right: 50px; }
  .barge-seating-preview { margin-left: 30px; }
}

@media screen and (max-width: 1250px) {
  .seating-chart { margin-right: 20px; }
  .barge-seating-preview { margin-left: 60px; }
}

@media screen and (max-width: 1200px) {
  .seating-chart { margin-right: 20px; }
  .barge-seating-preview { margin-left: 20px; }
  .row-special { margin-left: 0px; }
  .row-letter { margin-left: 0px; }
  .row-special span { display: none; }
  .space-left { width: 35px; }
  .seating-confirm-button { bottom: 20px; right: 20px; }
  .barge-bookings-area { width: 55%; }
  .booking-row-info-text { width: 150px; }
}

@media screen and (max-width: 1150px) {

}

@media screen and (max-width: 1100px) {
}

@media screen and (max-width: 1050px) {

}

@media screen and (max-width: 1000px) {

}

/* Page Switch */
@media screen and (max-width: 1024px) {
  .mobile-view-toggle { display: flex; }
  .mobile-hide { width: 100%; display: none; }
  .mobile-show { width: 100%; display: flex; }
  .barge-seating-area { margin-left: 0; }
  .barge-bookings-area { margin-right: 0; }
  .space { width: 14.5vw; height: 5vh; margin: 4px; }
  .space-left { width: 30px; }
  .barge-seating-preview { width  : 90%; height: 10vh; }
}

/* Mobile */
@media screen and (max-width: 768px) {
  .site-container { padding: 8px; }
  .mobile-view-toggle { bottom: 10px; left: 10px; }
  .seating-confirm-button { bottom: 10px; right: 10px; }
  .preview-info { width: 160px; padding: 10px 4px; }

  .booking-row { flex-direction: column; width: 90%; }
  .booking-row-info-text { width: auto; }
  .booking-new { margin-bottom: 20px; }
  .barge-bookings-area-rows { padding: 10px; }
  .barge-bookings-area { padding: 10px 0px; }
  .booking-footer { width: calc(90% + 22px); }

  .new-booking-window-inner { padding: 10px; }
  .create-form-group label { width: 30%; }
}

/* Page Switch */
@media screen and (max-width: 340px) {

}

/* Smaller Devices */
@media (max-width: 400px) {

}


@media (max-width: 415px) and (orientation: portrait) and (max-height: 750px) {

}

/* Tiny Phones */
@media (max-width: 400px) and (orientation: portrait) and (max-height: 700px) {

}

/* Skinny */
@media (max-width: 360px) and (orientation: portrait) and (max-height: 750px) {

}

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) and (device-width : 320px) and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 12.9" ----------- */

/* iPad Pro 12.9" Portrait */
@media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1366px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
  .space { width: 14.2vw; height: 4.8vh; margin: 8px; }
  .space-left { width: 40px; }
  .booking-ticket { width: 90px; height: 50px;}
  .booking-ticket > .initials { margin-left: 10px; font-size: 1.2rem; }
  .booking-ticket > .seat-id { font-size: 1rem; right: 10px; padding: 2px; }
  .preview-info { width: 300px; }
  .preview-name {  font-size: 1.2rem; }
}

/* iPad Pro 12.9" Landscape */
@media only screen
  and (min-device-width: 1366px)
  and (max-device-width: 1366px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {

  .space { width: 85px; height: 55px; }
  .seating-chart { margin-right: 25px; }
  .barge-seating-preview { margin-left: 60px; }
}


/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 834px)
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2) {

}


/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {

    /* .seating-chart { margin-right: 20px; } */
  .barge-seating-preview { margin-left: 20px; }
  .space { width: 73px; margin: 4px 5px; }
  .space-left { width: 35px; }
  .seating-numbers {margin-bottom: -10px; }
  .seating-confirm-button { bottom: -5px; right: -5px; }
}



/* iPad Pro */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
}

/* iPad Pro */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
}


/* iPad Portrait */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
}

@media (hover: none) {
}

/* Messages Icon */
.messages-icon {
  margin-left: 10px;
  cursor: pointer;
  font-size: 1.2rem;
  color: #e6a700;
}

.messages-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0005;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
}

.messages-popup-inner {
  background: white;
  padding: 20px;
  border-radius: 6px;
  max-width: 400px;
}

.messages-item {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.messages-dismiss {
  margin-top: 15px;
  padding: 8px 16px;
  background: #555;
  color: white;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
}