/* Icon Fonts */
@font-face {
  font-family: 'Font Awesome 5 Solid';
  src: url("./fa-solid-900.woff") format("woff"), url("./fa-solid-900.ttf") format("truetype"); 
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-display: swap;
}
@font-face {
  font-family: 'Line Awesome 5 Regular';
  src: url("./la-regular-400.woff") format("woff"), url("./la-regular-400.ttf") format("truetype"); 
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-display: swap;
}
html, body {
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  color: rgb(218, 218, 218);
  background-color: rgb(250, 250, 235);
  margin: 0;
  -webkit-text-size-adjust: none;
  height: 100%;
  overflow: hidden;
}
input {
  font-size: 12pt;
  color: #555;
  -webkit-text-size-adjust: none;
}
input:focus {
  outline: none;
} 
button {
  font-size: 12pt;
  color: #333;
  -webkit-touch-callout: none;
  -webkit-user-select: none;  
  -moz-user-select: none;     
  -ms-user-select: none;     
  user-select: none;     
}
button:hover {
  color: grey;
}
button:focus-visible {
  outline-offset: 2px;
  outline-color:  rgb(165, 249, 234);
  outline-style: dotted;
  outline-width: 2px;
}
select {
  font-size: 12pt;
  color: #333;
}
.cocktailListMain {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 320px;
  width: 100%;
  height: 100%;
}
/* Header Styles */
.cocktailListHeader {
  flex: 0 0 auto;
  box-sizing: border-box;
  background-color: rgb(42, 136, 136);
  width: 100%;
  padding: 2px;
}
.inputSearchContainer {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: stretch;
  background-color: white;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 2px;
  border-radius: 10px;
  width: 16em;
}
.inputSearch {
  width: 100%;
  margin: 0px;
  padding: 5px;
  border-radius: 10px;
  border-style: none;
}
#buttonSearchDeleteTmp {
  display: none;
}
.buttonSearchDelete {
  display: none;
  font-family: 'Font Awesome 5 Solid';
  color:rgb(128, 128, 128);
  background-color: transparent;
  border-style: none;
  text-align: center;
  margin-right: 5px;
  margin-top: auto;
  margin-bottom: auto;
  padding: 0px;
  width: 20px;
}
.buttonSearchDelete:before {
  content: "\f00d";
}
.buttonSearchDelete:hover {
  color: rgb(64, 64, 64);
}
.buttonSearch{
  font-family: 'Font Awesome 5 Solid';
  background-color: transparent;
  color: rgb(165, 249, 234);
  border-style: none;
  cursor: pointer;
  margin-left: 3px;
  margin-right: 10px;
  margin-bottom: 3px;
  padding: 0px;
  font-size: 1.2em;
  vertical-align: middle;
 }
 .buttonSearch:hover {
   color: rgb(215, 253, 246);
   cursor: pointer;
 }
 .buttonSearch:before {
  content: "\f021";
}
.buttonSettings {
  font-family: 'Font Awesome 5 Solid';
  background-color: transparent;
  color: rgb(165, 249, 234);
  border-style: none;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 0px;
  margin-bottom: 3px;
  padding: 0px;
  font-size: 1.2em;
  min-width: 5px;
  vertical-align: middle;
 }
 .buttonSettings:hover {
   color: rgb(215, 253, 246);
   cursor: pointer;
 }
 .buttonSettings:before {
  content: "\f142";
}
.settingsMenu {
  position: absolute;
  top: 40px;
  left: 5px;
  z-index: 1;
  background-color: #FFFFFF;
  border: 1px solid #969696;
  color:rgb(48, 48, 48);
  border-radius: 5px;
  padding: 2px;
  font-size: 90%;
  min-width: 12em;
  max-width: 24em;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.settingsMenu div {
  display: flex;
  justify-content: flex-start;
  padding: 2px;
  padding-right: 5px;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
}
.settingsMenuItemOver { /* mouse over */
  background-color: rgb(119, 196, 196);
}
.settingsMenuChecked {
  visibility: visible;
  padding-right: 5px;
}
.settingsMenuUnchecked {
  visibility: hidden;
  padding-right: 5px;
}
.buttonOrders {
  font-family: 'Font Awesome 5 Solid';
  position: fixed;
  right: 0px;
  background-color: transparent;
  color: rgb(165, 249, 234);
  border-style: none;
  cursor: pointer;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 10px;
  padding: 0px;
  padding-top: 2px;
  padding-bottom: 0px;
  font-size: 1.5em;
  vertical-align: middle;
}
.buttonOrders:before {
  content: "\f57b";
  /*content: "\f07a";*/
}
.buttonOrders:hover {
  color: rgb(215, 253, 246);
  cursor: pointer;
}
.buttonOrdersAlert {
  color: rgba(204, 171, 88);
  -webkit-animation: buttonOrdersAlert 1s alternate infinite;
  -moz-animation: buttonOrdersAlert 1s alternate infinite;
  animation: buttonOrdersAlert 1s alternate infinite;
}
.buttonOrdersAlert:hover {
  color: rgb(234, 201, 118);
}
@keyframes buttonOrdersAlert {
from {
    text-shadow: none;
  }
  to {
    text-shadow: 0 0 3px #fff, 0 0 6px rgb(204, 164, 104), 0 0 9px rgb(204, 164, 104), 0 0 12px rgb(255, 163, 35);
  }
}
/* Suggesst List Styles */
.suggestList {
  position: absolute;
  z-index: 1;
  background-color: #FFFFFF;
  border: 1px solid #969696;
  color:rgb(48, 48, 48);
  border-radius: 5px;
  padding: 2px;
  font-size: 90%;
  min-width: 12em;
  max-width: 24em;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.suggestList div {
  display: block;
  min-width: 12em;
  max-width: 24em;
  padding: 2px;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
}
.suggestList div.select{ /* keydown, keyup */
  color: white;
  background-color: rgb(0, 158, 158);
}
.suggestList div.over{ /* mouse over */
  background-color: rgb(119, 196, 196);
}
/* Message Area Styles */
.cocktailListMessage {
  display: flex;
  align-items: center;
  width: 100%;
  white-space: wrap;
  padding-top: 0px;
  padding-bottom: 0px;
   background-color: rgb(33, 110, 110);
}
.buttonMessageClose {
  font-family: 'Line Awesome 5 Regular';
  background-color: transparent;
  color:rgb(221, 58, 58);
  border-style: none;
  padding: 0px;
  margin-left: 5px;
  margin-right: 8px;
  font-size: 1.2em;
  cursor: pointer;
}
.buttonMessageClose:hover {
  color: rgb(255, 79, 79);
}
.buttonMessageClose:before {
  content: "\f057";
}
.spanMessageText {
  white-space: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* Cocktail List Styles */
.cocktailListContainer {
  position: relative;
  flex: 1 1 auto;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
  align-items: center;
  background-color: rgb(250, 250, 235);
  color:rgb(48, 48, 48);
  max-width: 1000px;
  width: 100%;
  padding-top: 5px;
  padding-left: 3px;
  padding-right: 3px;
  margin: auto;
}
.cocktailCard {
  position: relative;
  box-sizing: border-box;
  width: 10em;
  height: 15em;
  margin: 5px;
  padding: 15px;
  cursor: default;
  background-color: rgb(101, 197, 192);
  background-image: radial-gradient(circle,  rgb(128, 255, 250), rgb(101, 197, 192));
  border-style: none;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.cocktailCardPadding {
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: center;
  width: 100%;
  height: 100%;
}
.cocktailCardImage {
  height: 100%;
  width: auto;
  margin: auto;
}
.cocktailCardName {
  position: absolute;
  display: inline-block; 
  bottom: 0;
  left: 0;
  right: 0;
  width: fit-content; /* key for flexible width */
  margin: 0 auto;
  background-color: rgba(83, 163, 159, 0.7);
  color: rgb(248, 248, 248);
  border-radius: 6px;
  padding: 5px;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  user-select: none; /* Might not be needed */
}
.cocktailCardMarkButtonUnchecked {
  position: absolute;
  top: -10px;
  left: -10px;
  font-family: 'Line Awesome 5 Regular';
  background-color: transparent;
  color: rgba(50, 100, 100, 0.7);
  padding: 0px;
  margin: 0px;
  border-style: none;
  font-size: 1.25em;
  cursor: pointer;
}
.cocktailCardMarkButtonUnchecked:before {
  content: "\f111";
}
.cocktailCardMarkButtonUnchecked:hover {
  color: rgba(110, 240, 240, 0.7);
}
.cocktailCardMarkButtonChecked {
  position: absolute;
  top: -10px;
  left: -10px;
  font-family: 'Line Awesome 5 Regular';
  background-color: transparent;
  color: rgba(50, 100, 100, 0.7);
  padding: 0px;
  margin: 0px;
  border-style: none;
  font-size: 1.25em;
  cursor: pointer;
}
.cocktailCardMarkButtonChecked:before {
  content: "\f058";
}
.cocktailCardMarkButtonChecked:hover {
  color: rgba(110, 240, 240, 0.7);
}
.cocktailCardOrderButtonUnchecked {
  position: absolute;
  top: -10px;
  right: -10px;
  font-family: 'Font Awesome 5 Solid';
  background-color: transparent;
  color: rgba(80, 160, 160, 0.7);
  padding: 0px;
  margin: 0px;
  border-style: none;
  font-size: 1.25em;
  cursor: pointer;
}
.cocktailCardOrderButtonUnchecked:before {
  content: "\f217";
}
.cocktailCardOrderButtonUnchecked:hover {
  color: rgba(110, 240, 240, 0.7);
}
.cocktailDetailsOrderButton {
  position:static;
  visibility: hidden;
  font-size: 1em;
  color: rgb(43, 90, 90);
  padding: 0px;
  margin: 0px;
  margin-right: 2px;
}
.cocktailDetailsOrderButton:hover {
  color: rgba(110, 240, 240, 0.7);
}
.cocktailCardOrderButtonChecked {
  color: rgba(255, 163, 35, 0.7);
}
.cocktailCardOrderButtonChecked:hover {
 color: rgba(249, 202, 137, 0.7);
}
.cocktailCategoryTitle {
  box-sizing: border-box;
  width: 100%;
  font-size: 125%;
  font-weight: bold;
  text-align: center;
  margin: 3px;
  padding: 5px;
  background-color: rgb(0, 150, 150);
  color: rgb(180, 250, 250);
  border-style: none;
  border-radius: 8px;
}
.cocktailListBottomSpace {
  width: 100%;
  height: 12em;
}
.cocktailListLargeText {
  font-size: 1.5em;
}
/* Card background gradients for the different cocktail categories: .cocktailCardBg-<CategoryID> */
.cocktailCardBg-0 {
  background-image: radial-gradient(circle,  rgb(72, 140, 137), rgb(101, 197, 192));
}
.cocktailCardBg-1 {
  background-image: radial-gradient(circle,  rgb(197, 120, 101), rgb(101, 197, 192));
}
.cocktailCardBg-2 {
  background-image: radial-gradient(circle,  rgb(197, 157, 101), rgb(101, 197, 192));
}
.cocktailCardBg-3 {
  background-image: radial-gradient(circle,  rgb(196, 197, 101), rgb(101, 197, 192));
}
.cocktailCardBg-4 {
  background-image: radial-gradient(circle,  rgb(125, 197, 101), rgb(101, 197, 192));
}
.cocktailCardBg-5 {
  background-image: radial-gradient(circle,  rgb(101, 173, 197), rgb(101, 197, 192));
}
.cocktailCardBg-6 {
  background-image: radial-gradient(circle,  rgb(101, 128, 197), rgb(101, 197, 192));
}
.cocktailCardBg-7 {
  background-image: radial-gradient(circle,  rgb(112, 101, 197), rgb(101, 197, 192));
}
.cocktailCardBg-8 {
  background-image: radial-gradient(circle,  rgb(159, 101, 197), rgb(101, 197, 192));
}
.cocktailCardBg-9 {
  background-image: radial-gradient(circle,  rgb(197, 101, 176), rgb(101, 197, 192));
}
.cocktailCardBg-20 {
  background-image: radial-gradient(circle,  rgb(193, 193, 193), rgb(101, 197, 192));
}
.cocktailCardBg-21 {
  background-image: radial-gradient(circle,  rgb(193, 193, 193), rgb(101, 197, 192));
}
.cocktailCardBg-22 {
  background-image: radial-gradient(circle,  rgb(193, 193, 193), rgb(101, 197, 192));
}
/* Cocktail Details Card Styles */
.cocktailDetailsCard {
  width: 20em;
  min-height: 15em;
  height: auto;
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
}
.cocktailGrowCard {
  animation: growCard 0.5s;
}
@keyframes growCard {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}
.cocktailShrinkCard {
  animation: shrinkCard 0.5s ;
}
@keyframes shrinkCard {
  from {
    transform: scale(2);
  }
  to {
    transform: scale(1);
  }
}
.cocktailDetailsContainer {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.cocktailDetailsDescription {
  box-sizing: border-box;
  line-height: 1.25;
  width: 100%;
  margin-bottom: 10px;
  padding: 0px;
  background-color: rgba(160, 244, 244, 0.5);
  border-style: none;
  border-radius: 8px;
}
.cocktailDetailsTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(83, 163, 159, 0.7);
  color: rgb(248, 248, 248);
  border-radius: 6px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  padding: 2px;
  margin: 0px;
  font-size: 110%;
  font-weight: normal;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
}
.cocktailDetailsCloseButton {
  font-family: 'Line Awesome 5 Regular';
  background-color: transparent;
  color: rgb(43, 90, 90);
  border-style: none;
  cursor: pointer;
  margin-left: 2px;
  margin-right: 0px;
  padding: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 1.2em;
  vertical-align: middle;
}
.cocktailDetailsCloseButton:before {
    content: "\f057";
}
.cocktailDetailsCloseButton:hover {
  color: rgba(110, 240, 240, 0.7);
  cursor: pointer;
}
.cocktailDetailsImageContainer {
  float: left;
  position: relative;
  box-sizing: border-box;
  width: 5em;
  height: 8em;
  margin: 0px;
  margin-left: 5px;
  margin-right: 5px;;
}
.cocktailDetailsDescriptionText {
  font-size: 90%;
  margin: 5px;
}
.cocktailDetailsIngredientsTitle { 
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: rgb(160, 244, 244);
  text-align: left;
  font-size: 110%;
  font-weight: bold;
  }
.cocktailDetailsIngredients {
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
  background-color: rgba(160, 244, 244, 0.5);
  border-style: none;
  border-radius: 8px;
}
.cocktailDetailsIngredientsQuantity {
  color: rgb(43, 90, 90);
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.cocktailDetailsIngredientsQuantityForm {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.cocktailDetailsInput {
  width: 2em;
  padding: 2px;
  font-size: 90%;
  text-align: center;
  background-color: rgb(188, 251, 251);
  border-style: none;
  border-radius: 4px;
  margin: 0px;
  margin-left: 3px;
  margin-right: 3px;
}
.cocktailDetailsDecreaseButton {
  font-family: 'Font Awesome 5 Solid';
  background-color: transparent;
  color: rgb(43, 90, 90);
  border-style: none;
  cursor: pointer;
  margin-left: 2px;
  margin-right: 0px;
  padding: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 1.2em;
  min-width: 5px;
  vertical-align: middle;
}
.cocktailDetailsDecreaseButton:before {
    content: "\f0d7";
}
.cocktailDetailsDecreaseButton:hover {
  color: rgba(79, 170, 170, 0.7);
  cursor: pointer;
}
.cocktailDetailsIncreaseButton {
  font-family: 'Font Awesome 5 Solid';
  background-color: transparent;
  color: rgb(43, 90, 90);
  border-style: none;
  cursor: pointer;
  margin-left: 0px;
  margin-right: 2px;
  padding: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 1.2em;
  min-width: 5px;
  vertical-align: middle;
}
.cocktailDetailsIncreaseButton:before {
    content: "\f0d8";
}
.cocktailDetailsIncreaseButton:hover {
  color: rgba(79, 170, 170, 0.7);
  cursor: pointer;
}
.cocktailDetailsIngredientsTable {
  box-sizing: border-box;
  width: 100%;
  border-spacing: 0px;
  margin: 0px;
  font-size: 90%;
}
.cocktailDetailsQuantityCell {
  vertical-align: top;
  text-align: right;
  text-wrap: nowrap;
}
.cocktailDetailsRecipeTitle {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: rgb(160, 244, 244);
  padding-top: 2px;
  padding-bottom: 2px;;
  vertical-align: middle;
  text-align: left;
  font-size: 110%;
  font-weight: bold;
}
.cocktailDetailsGlass {
  background-color: rgba(83, 163, 159, 0.7);
  color: rgb(248, 248, 248);
  border-radius: 6px;
  padding: 3px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 90%;
  font-weight: normal;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
}
.cocktailDetailsRecipeStep {
  box-sizing: border-box;
  width: 100%;
  font-size: 90%;
  line-height: 1.25;
  margin-top: 10px;
  background-color: rgba(160, 244, 244, 0.7);
  border-style: none;
  border-radius: 8px;
  padding: 5px;
  margin-top: 8px;
}
/* Cocktail Orders Confirmation */
.cocktailOrderConfirm {
  position: absolute;
  z-index: 1;
  background-color: rgba(175, 232, 232, 0.7);
  color:rgb(48, 48, 48);
  border: 1px solid #969696;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.cocktailOrderConfirmContainer {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  cursor: pointer;
}
.cocktailOrderConfirmCancelButton {
  font-family: 'Line Awesome 5 Regular';
  background-color: transparent;
  color: rgb(160, 20, 20);
  border-style: none;
  padding: 0px;
  margin-left: 2px;
  margin-right: 5px;
  font-size: 1.2em;
  cursor: pointer;
}
.cocktailOrderConfirmCancelButton:hover {
  color: rgb(220, 80, 80);
}
.cocktailOrderConfirmCancelButton:before {
  content: "\f057";
}
.cocktailOrderConfirmSubmitButton {
  font-family: 'Line Awesome 5 Regular';
  background-color: transparent;
  color: rgb(25, 130, 80);
  border-style: none;
  padding: 0px;
  margin-left: 2px;
  margin-right: 5px;
  font-size: 1.2em;
  cursor: pointer;
}
.cocktailOrderConfirmSubmitButton:hover {
  color: rgba(85, 190, 140);
}
.cocktailOrderConfirmSubmitButton:before {
  content: "\f058";
}
.cocktailOrderConfirmQuantity {
  display: inline-block;
  padding: 3px;
  padding-left: 1px;
  padding-right: 1px;
  text-align: center;
  min-width: 1.1em;
}
.cocktailOrderConfirmUser {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 3px;
  margin-top: 5px;
  padding: 3px;
  border-radius: 5px;
  border-style: none;
  font-size: 90%;
}
/* Cocktail Orders Styles */
.cocktailOrdersContainer {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 1000px;
  padding: 6px;
  padding-top: 3px;
  border-style: none;
}
.cocktailOrders {
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  background-color: rgb(135, 200, 200);
  color: rgb(48, 48, 48);
  border-style: none;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.cocktailOrdersHeader {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0px;
  font-weight: normal;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  color: rgb(43, 90, 90);
}
.buttonOrdersClose {
  font-family: 'Line Awesome 5 Regular';
  background-color: transparent;
  color: rgb(43, 90, 90);
  border-style: none;
  padding: 0px;
  margin-left: 5px;
  margin-right: 8px;
  font-size: 1.2em;
  cursor: pointer;
}
.buttonOrdersClose:hover {
  color: rgba(110, 240, 240, 0.7);
}
.buttonOrdersClose:before {
  content: "\f057";
}
.spanOrderHeaderText {
  white-space: wrap;
  padding-top: 3px;
  padding-bottom: 3px;
}
.cocktailOrdersTableContainer {
  width: 100%;
  margin: 0px;
  max-height: 10em;
  overflow-y: auto;
} 
/* Cocktail List Table Styles */
.cocktailListTable {
  table-layout: auto;
  width: 100%;
  border: none;
  color: rgb(48, 48, 48);
  border-collapse: collapse;
} 
.cocktailListHeaderRow {
  position: sticky;
  top: 0;
  color: rgb(96, 96, 96);
  background-color: rgb(0, 150, 150);
  color: rgb(180, 250, 250);
}
.cocktailListHeaderCell {
  box-sizing: border-box; /* Needed for workaround of missing position: fixed for Safari 9 */
  padding: 3px;
  font-size: 90%;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  cursor: pointer;
}
.cocktailListHeaderCell:hover {
  color: rgb(220, 255, 255);
}
.cocktailListHeaderMark {
  font-family: 'Line Awesome 5 Regular';
  padding: 3px;
}
.cocktailListHeaderMark:before {  
  content: "\f146";
}
.cocktailListHeaderMarkChecked:before {  
  content: "\f14a";
}
.cocktailListHeaderMarkUnchecked:before {  
  content: "\f0c8";
}
.cocktailListHeaderSort {
  font-family: 'Font Awesome 5 Solid';
  padding-left: 5px;
  visibility: hidden;
}
.cocktailListHeaderSort:before {
  content: "\f884"; /* Hidden dummy content to avoid flickering when the actual sort symbols are shown */
}
.cocktailListHeaderSortAsc:before {
  content: "\f884";
  visibility: visible;
}
.cocktailListHeaderSortDesc:before {
  content: "\f161";
  visibility: visible;
}
.cocktailListTableRow:nth-child(odd) {
  background-color: rgba(220, 240, 240, 0.8);
}
.cocktailListTableRow:nth-child(odd) button:focus-visible {
  outline-color: rgb(43, 90, 90);
}
.cocktailListTableRow:nth-child(even) {
  background-color: rgba(150, 220, 220, 0.8);
}
.cocktailListTableRowAlert:nth-child(odd) {
  background-color: rgba(215, 180, 130, 0.8);
}
.cocktailListTableRowAlert:nth-child(even) {
  background-color: rgba(195, 160, 110, 0.8);
}
.cocktailListTableCell {
  box-sizing: border-box; /* Needed for workaround of missing position: fixed for Safari 9 */
  padding: 3px;
  font-size: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
.cocktailListTableCellExpanded {
  vertical-align: top;
  background-color: rgba(0, 0, 0, 0.03);
}
.cocktailListButtonCell {
  width: 1.2em;
}
.cocktailListIngredientCell {
  width: auto;
  max-width: 8em;
}
.cocktailListCocktailCell {
  width: auto;
  max-width: 10em;
}
.cocktailListQuantityCell {
  width: 1em;
  padding-left: 0px;
  padding-right: 0px;
}
.cocktailListMaxWidthCell {
  max-width: 5em;
}
.cocktailListHideableCell {
  display:table-cell;
}
.cocktailListButtonUnchecked {
  font-family: 'Line Awesome 5 Regular';
  background-color: transparent;
  color: rgb(43, 90, 90);
  padding: 0px;
  margin: 0px;
  border-style: none;
  font-size: 1.25em;
  cursor: pointer;
}
.cocktailListButtonUnchecked:before {
  content: "\f0c8";
}
.cocktailListButtonUnchecked:hover { 
  color: rgb(65, 150, 150);
}
.cocktailListButtonChecked {
  font-family: 'Line Awesome 5 Regular';
  background-color: transparent;
  color: rgb(43, 90, 90);
  padding: 0px;
  margin: 0px;
  border-style: none;
  font-size: 1.25em;
  cursor: pointer;
}
.cocktailListButtonChecked:before {
  content: "\f14a";
}
.cocktailListButtonChecked:hover { 
  color: rgb(65, 150, 150);
}
.cocktailListTextDisabled {
  color:rgb(110, 139, 139);
  text-decoration: line-through;
}
.cocktailListTextHighlighted   {
  font-weight: bold;
}
.cocktailListDecreaseButton {
  font-family: 'Font Awesome 5 Solid';
  background-color:transparent;
  color: rgb(43, 90, 90);
  padding: 0px;
  border-style: none;
  font-size: 1.15em;
  cursor: pointer;
}
.cocktailListDecreaseButton:before {
  content: "\f0d7";
}
.cocktailListDecreaseButton:hover {
  color: rgb(65, 150, 150);
}
.cocktailListDecreaseButtonDisabled {
  font-family: 'Font Awesome 5 Solid';
  background-color:transparent;
  color: rgb(113, 133, 133);
  padding: 0px;
  border-style: none;
  font-size: 1.15em;
}
.cocktailListDecreaseButtonDisabled:before {
  content: "\f0d7";
}
.cocktailListIncreaseButton {
  font-family: 'Font Awesome 5 Solid';
  background-color:transparent;
  color: rgb(43, 90, 90);
  padding: 0px;
  border-style: none;
  font-size: 1.15em;
  cursor: pointer;
}
.cocktailListIncreaseButton:before {
  content: "\f0d8";
}
.cocktailListIncreaseButton:hover {
  color: rgb(65, 150, 150);
}
.cocktailListIncreaseButtonDisabled {
  font-family: 'Font Awesome 5 Solid';
  background-color:transparent;
  color: rgb(113, 133, 133);
  padding: 0px;
  border-style: none;
  font-size: 1.15em;
}
.cocktailListIncreaseButtonDisabled:before {
  content: "\f0d8";
}
.cocktailListButtonDelete {
  font-family: 'Line Awesome 5 Regular';
  background-color:transparent;
  color: rgb(43, 90, 90);
  padding: 0px;
  margin: 0px;
  margin-left: 5px;
  margin-right: 5px;
  border-style: none;
  font-size: 1.15em;
  cursor: pointer;
}
.cocktailListButtonDelete:hover {
  color: rgb(65, 150, 150);
  cursor:pointer;
}
.cocktailListButtonDelete:before {
  content: "\f2ed";
}
.cocktailListButtonDeleteDeleting {
  color: rgb(218, 68, 68);
}
.cocktailListButtonDeleteDeleting:hover {
  color: rgb(248, 98, 98);
}
.cocktailListButtonDeleteDisabled {
  font-family: 'Line Awesome 5 Regular';
  background-color:transparent;
  color: rgb(128, 176, 176);
  padding: 0px;
  margin: 0px;
  margin-left: 5px;
  margin-right: 5px;
  border-style: none;
  font-size: 1.15em;
}
.cocktailListButtonDeleteDisabled:before {
  content: "\f2ed";
}
.cocktailListButtonDeleteDisabled:hover {
  color: rgb(128, 176, 176);
}
.cocktailListExpandButton {
  font-family: 'Font Awesome 5 Solid';
  background-color:transparent;
  color: rgb(43, 90, 90);
  padding: 0px;
  padding-left: 5px;
  border-style: none;
  font-size: 1.15em;
  cursor: pointer;
}
.cocktailListExpandButton:hover {
  color: rgb(65, 150, 150);
}
.cocktailListExpandButtonExpanded:before {
  content: "\f0d7";
}
.cocktailListExpandButtonCollapsed:before {
  content: "\f0da";
}
/* Cocktail Ingredients Page Styles */
.ingredientsPage {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(250, 250, 235, 0.7);
  border-style: none;
  padding: 0px;
  margin: 0px;
}
.ingredientsContainer {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 80%;
  max-width: 30em;
  max-height: 80%;
  margin: auto;
  margin-top: 5%;
  background-color: rgb(135, 200, 200);
  color: rgb(48, 48, 48);
  border-style: solid;
  border-color: rgb(43, 90, 90);
  border-width: 1px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.ingredientsHeader {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 1.75em;
  margin: 0px;
  font-weight: normal;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  color: rgb(43, 90, 90);
}
.buttonIngredientsClose {
  font-family: 'Line Awesome 5 Regular';
  background-color: transparent;
  color: rgb(43, 90, 90);
  border-style: none;
  padding: 0px;
  margin-left: 5px;
  margin-right: 8px;
  font-size: 1.2em;
  cursor: pointer;
}
.buttonIngredientsClose:hover {
  color: rgba(110, 240, 240, 0.7);
}
.buttonIngredientsClose:before {
  content: "\f057";
}
.spanIngredientsHeaderText {
  white-space: wrap;
  padding-top: 3px;
  padding-bottom: 3px;
}
.ingredientsTableContainer {
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  min-height: 0; /* Workaround for Safari bug that prevents the container from shrinking when the cocktail list is expanded */
  overflow-y: auto;
} 
.ingredientsTableContainer .cocktailListTableCell:last-child {
  padding-right: 10px;
}
.ingredientsTableContainer .cocktailListHeaderCell:last-child {
  padding-right: 10px;
}
.ingredientsFooter {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 1.75em;
  margin: 0px;
  padding-left: 5px;
  padding-right: 5px;
  color: rgb(43, 90, 90);
}
.buttonIngredientsShopMarked {
  background-color: transparent;
  font-family: 'Font Awesome 5 Solid';
  color: rgb(142, 142, 142);
  padding: 2px;
  margin: 5px;
  margin-left: 0px;
  border: none;
  font-size: 110%;
}
.buttonIngredientsShopMarkedEnabled {
   color: rgb(25, 130, 80);
}
.buttonIngredientsShopMarked:hover {
  color: rgb(175, 175, 175);
}
.buttonIngredientsShopMarkedEnabled:hover {
   color: rgba(110, 240, 240, 0.7);
}
.buttonIngredientsShopMarked:before {
  content: "\f217";
}
#buttonIngredientsShopMarkedConfirm {
  font-family: 'Line Awesome 5 Regular';
  background-color: transparent;
  color: rgb(43, 90, 90);
  border-style: none;
  padding: 2px;
  margin: 5px;
  margin-left: 0px;
  font-size: 1.2em;
  cursor: pointer;
}
#buttonIngredientsShopMarkedConfirm:hover {
  color: rgba(110, 240, 240, 0.7);
}
#buttonIngredientsShopMarkedConfirm:before {
  content: "\f058";
}
#ingredientsFooterMessage {
  font-size: 90%;
}
#buttonIngredientsMessageClose {
  font-family: 'Line Awesome 5 Regular';
  background-color: transparent;
  color: rgb(160, 20, 20);
  border-style: none;
  padding: 2px;
  margin: 5px;
  margin-left: 2px;
  font-size: 1.1em;
  cursor: pointer;
}
#buttonIngredientsMessageClose:hover {
  color: rgb(220, 80, 80);
}
#buttonIngredientsMessageClose:before {
  content: "\f057";
}
/* Tablet  Media Queries */
@media only screen 
and (min-width: 700px) and (max-width: 1200px) and (max-device-width: 1200px){
  body {
    font-size: 18pt;
   }
  input {
    font-size: 18pt;
  }
  button {
    font-size: 18pt;
  }
  select {
    font-size: 18pt;
  }
}
/* Mobile Media Queries */
@media only screen 
and (max-width : 700px) and (max-device-width: 700px){ 
  body {
    font-size: 14pt;
  }
  input {
    font-size: 12pt;
  }
  button {
    font-size: 12pt;
  }
  select {
    font-size: 12pt;
  }
  .cocktailCard {
    width: 30%;
    height: 10em;
    padding: 10px;
  }
  .cocktailDetailsCard {
    width: 64%;
    height: auto;
    font-size: 90%;
  }
  .cocktailCardName  {
    font-size: 90%;
  }
  .cocktailCategoryTitle {  
    font-size: 100%;
  }
  .cocktailCardMarkButtonUnchecked {
    top: -7px;
    left: -7px;
  }
  .cocktailCardMarkButtonChecked {
    top: -7px;
    left: -7px;
  }
  .cocktailCardOrderButtonUnchecked {
    top: -6px;
    right: -6px;
  }
  .cocktailCardOrderButtonChecked {
    top: -6px;
    right: -6px;
  }
  .cocktailOrdersTableContainer {
    max-height: 3em;
  }
}
/* Mobile Media Portrait Mode Queries */
@media only screen 
and (max-width : 700px) 
and (max-device-width : 700px) 
and (orientation: portrait) {
  .cocktailCard {
    width: 46%;
    height: 10.5em;
  }
  .cocktailDetailsCard {
    width: 100%;
    height: auto;
  }
  .inputSearchContainer {
    width: 10em;
  }
  .cocktailListHideableCell {
    display: none;
  }
  .cocktailOrdersContainer {
    padding-bottom: 10px;
  }
  .cocktailOrdersTableContainer {
    max-height: 10em;
  }
  .ingredientsContainer {
    width: 90%;
    max-width: none;
    margin-top: 15%;
  }
}
/* Print Styles */
@media print {

  /* Page setup */
  @page {
    margin: 20mm;
  }
  /* Hide everything except the cocktail details card */
  body * {
    visibility: hidden;
  }
  .cocktailDetailsCard,
  .cocktailDetailsCard * {
    visibility: visible;
  }
  .cocktailListMain, .cocktailListContainer {
    visibility: visible;
    background: white !important;
    overflow: visible !important;
  }
  .cocktailListContainer > * {
    display: none;
  }
  .cocktailDetailsCard {
    display: block !important;
  }
  /* Basic typography and layout for print */
  html, body {
    background: white !important;
    color: #222 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Hide buttons */
  button {
    display: none !important;
  }
  /* Inputs should look like text */
  input {
    border: none !important;
    background: transparent !important;
    color: #222 !important;
    font-size: inherit !important;
    padding: 0 !important;
  }
  /* Remove card styling */
  .cocktailCard {
    box-shadow: none !important;
    background: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default !important;
  }
  /* Position the card as the only visible content */
  .cocktailDetailsCard {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    padding-left: 20mm !important;
    padding-right: 20mm !important;
    box-sizing: border-box;
  }
  /* Title */
  .cocktailDetailsTitle {
    width: 100% !important;       /* <-- forces line break */
    display: block !important;
    text-align: center;
    background: none !important;
    color: #000 !important;
    font-size: 28pt;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
    margin-bottom: 15px;
    padding-bottom: 5px;
  }
  /* Image and Description Layout */
  .cocktailDetailsDescription {
    display: flex !important;
    flex-wrap: wrap;              /* <-- important */
    align-items: flex-start;
    gap: 15px;
    background: none !important;
    padding-top: 30px !important;
    margin-bottom: 20px;
    page-break-inside: avoid;
  }
  /* Image stays left, below title */
  .cocktailDetailsImageContainer {
    width: 100px !important;
    min-width: 100px;
    min-height: 150px;
    margin: 0 15px 10px 0 !important;
  }
  #cocktailDetailsImage {
    width: 100%;
    height: auto;
    border-radius: 6px;
  }
 .cocktailDetailsDescriptionText {
    flex: 1;
    font-style: italic;
    font-size: 11pt;
    margin: 0 0 8px 0;
  }
  /* Section titles */
  .cocktailDetailsIngredientsTitle,
  .cocktailDetailsRecipeTitle {
    color: #000 !important;
    font-size: 14pt;
    font-weight: bold;
    border-bottom: 1px solid #aaa;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 5px;
  }
  /* Glass label */
  .cocktailDetailsGlass {
    background: none !important;
    color: #555 !important;
    border: 1px solid #ccc;
    border-radius: 12px;
    font-size: 10pt;
    padding: 2px 10px;
  }
  /* Ingredients section */
  .cocktailDetailsIngredients {
    background: none !important;
    padding: 0 !important;
    page-break-inside: avoid;
  }
  .cocktailDetailsIngredientsTable {
    font-size: 11pt;
    width: 100%;
    border-spacing: 0;
  }
  .cocktailDetailsIngredientsTable td {
    padding: 3px 0;
  }
  .cocktailDetailsQuantityCell {
    font-weight: bold;
    padding-right: 10px !important;
    text-align: right;
    white-space: nowrap;
    width: 3em;
  }
  #cocktailDetailsIngredientsHeader {
    border-bottom: 1px solid #ccc;
  }
  .cocktailDetailsIngredientsQuantity {
    display: block !important;
    font-size: 10pt;
    margin-bottom: 10px;
  }
  /* Each line (Portionen / Menge) */
  .cocktailDetailsIngredientsQuantityForm {
    display: block !important;
    margin-bottom: 3px;
    color: #000;
  }
  /* Labels (Portionen / Menge) */
  .cocktailDetailsIngredientsQuantityForm b {
    display: inline-block;
    min-width: 8px;   /* aligns both labels nicely */
    font-weight: bold;
  }
  /* Values (inputs now text-like) */
  .cocktailDetailsIngredientsQuantityForm input {
    display: inline;
    margin-left: 4px;
  }
  /* Recipe steps */
  #cocktailDetailsRecipe {
    counter-reset: step;
  }
  .cocktailDetailsRecipeStep {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 10px;
    font-size: 11pt;
    line-height: 1.5;
    page-break-inside: avoid;
  }
  .cocktailDetailsRecipeStep::before {
    counter-increment: step;
    content: counter(step) ". ";
    font-weight: bold;
  }
  /* Layout reset */
  .cocktailDetailsContainer {
    display: block !important;
  }
}