/***********************************************************************
 _____ _       _           _   _____      _   _   _                 
|  __ \ |     | |         | | /  ___|    | | | | (_)                
| |  \/ | ___ | |__   __ _| | \ `--.  ___| |_| |_ _ _ __   __ _ ___ 
| | __| |/ _ \| '_ \ / _` | |  `--. \/ _ \ __| __| | '_ \ / _` / __|
| |_\ \ | (_) | |_) | (_| | | /\__/ /  __/ |_| |_| | | | | (_| \__ \
 \____/_|\___/|_.__/ \__,_|_| \____/ \___|\__|\__|_|_| |_|\__, |___/
                                                           __/ |    
                                                          |___/     
************************************************************************/

:root {
  /* regular */
  --menu-base-color: #2a3f54;
  --menu-selected-hovered-color: #172d44;
  --sideNavHeaderColour: #1ba1e2;
  --sideNavGroupTitleColour: lightskyblue;
  /* brown */
  /* --sideNavHeaderColour: #A43820;
    --sideNavGroupTitleColour: #BA5536;
    --menu-base-color: #693D3D;
    --menu-selected-hovered-color: #46211A;
     */
  /* teal1 */
  /* --sideNavHeaderColour: #66a5ad;
    --sideNavGroupTitleColour: #c4dfe6;
    --menu-base-color: #07575b;
    --menu-selected-hovered-color: #003b46; */
  /* teal2 */
  /* --sideNavHeaderColour: #2c7873;
    --sideNavGroupTitleColour: #6fb98f;
    --menu-base-color: #004445;
    --menu-selected-hovered-color: #021c1e; */
  /* red */
  /* --sideNavHeaderColour: #E8A735;
    --sideNavGroupTitleColour: #E2C499;
    --menu-base-color: #C8000A;
    --menu-selected-hovered-color: #8C0004; */
  /* purple */
  /* --sideNavHeaderColour: #9754CB;
    --sideNavGroupTitleColour: #DEACF5;
    --menu-base-color: #6237A0;
    --menu-selected-hovered-color: #28104E; */
  --navBarHeight: 52px;
  --pageHeight: calc(100vh - -52px);
}

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;
}

.marginCenter {
  margin: auto;
}

.textCenter {
  text-align: center;
  align-items: center;
}

.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.sk-folding-cube .sk-cube:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
  animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
  transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
  transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
  transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {

  0%,
  10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }

  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }

  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes sk-foldCubeAngle {

  0%,
  10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }

  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }

  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

/*************************************************************************************
  _______              _     _   _       _   _  __ _           _   _                 
 |__   __|            | |   | \ | |     | | (_)/ _(_)         | | (_)                
    | | ___   __ _ ___| |_  |  \| | ___ | |_ _| |_ _  ___ __ _| |_ _  ___  _ __  ___ 
    | |/ _ \ / _` / __| __| | . ` |/ _ \| __| |  _| |/ __/ _` | __| |/ _ \| '_ \/ __|
    | | (_) | (_| \__ \ |_  | |\  | (_) | |_| | | | | (_| (_| | |_| | (_) | | | \__ \
    |_|\___/ \__,_|___/\__| |_| \_|\___/ \__|_|_| |_|\___\__,_|\__|_|\___/|_| |_|___/
                                                                                     
                                                                                     
*************************************************************************************/

.toast-container {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* width: auto; */
}

.toastzone {
  max-width: 300px;
  min-width: 280px;
  height: fit-content;
  position: fixed;
}

#toastTL {
  top: 72px !important;
  left: 20px !important;
}

#toastTR {
  top: 72px !important;
  right: 20px !important;
}

#toastC {
  top: 50% !important;
  left: 50% !important;
  margin-top: -100px;
  margin-left: -145px;
}

#toastBL {
  bottom: -15px !important;
  left: 20px !important;
}

#toastBR {
  bottom: -15px !important;
  right: 20px !important;
}

.toast-container .toast {
  position: relative;
  pointer-events: auto;
  height: fit-content;
  width: 100%;
  max-width: 300px;
  min-width: 280px;
  background-color: #fff;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.15),
    0 10px 10px -5px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.toast-container .toast:hover {
  box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.15),
    0 15px 15px -5px rgba(0, 0, 0, 0.1);
}

.toast-container .toast .toast-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0;
  color: #262626;
  font-weight: 600;
  font-size: 1.1rem;
}

.toast-container .toast .toast-text {
  color: #262626;
  margin: 5px 0 0 0;
}

.toast-container .toast.active {
  opacity: 1;
  visibility: visible;
}

.toast.toast-success {
  background-color: #ddffdd;
}

.toast.toast-error {
  background-color: #ffdddd;
}

.toast.toast-warning {
  background-color: #ffffcc;
}

.toast.toast-info {
  background-color: #ddffff;
}

.toast.flash {
  animation-name: flash;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes flash {
  0% {
    filter: brightness(1);
    filter: contrast(1);
    filter: saturate(80%);
    border: 2px solid rgba(0, 0, 0, 0.25);
    -webkit-filter: brightness(1);
    -webkit-filter: contrast(1);
    -webkit-filter: saturate(80%);
  }

  50% {
    filter: brightness(1);
    filter: contrast(0.4);
    filter: saturate(500%);
    border: 2px solid rgba(0, 0, 0, 1);
    -webkit-filter: brightness(1);
    -webkit-filter: contrast(0.4);
    -webkit-filter: saturate(500%);
  }

  100% {
    filter: brightness(1);
    filter: contrast(1);
    filter: saturate(80%);
    border: 2px solid rgba(0, 0, 0, 0.25);
    -webkit-filter: brightness(1);
    -webkit-filter: contrast(1);
    -webkit-filter: saturate(80%);
  }
}

/* ********************************************************************** 
 _____ _     _        _   _             _             _   _             
/  ___(_)   | |      | \ | |           (_)           | | (_)            
\ `--. _  __| | ___  |  \| | __ ___   ___  __ _  __ _| |_ _  ___  _ __  
 `--. \ |/ _` |/ _ \ | . ` |/ _` \ \ / / |/ _` |/ _` | __| |/ _ \| '_ \ 
/\__/ / | (_| |  __/ | |\  | (_| |\ V /| | (_| | (_| | |_| | (_) | | | |
\____/|_|\__,_|\___| \_| \_/\__,_| \_/ |_|\__, |\__,_|\__|_|\___/|_| |_|
                                           __/ |                        
                                          |___/                         
*************************************************************************/

.navBarIcon {
  width: 40px !important;
  height: 40px !important;
  font-size: 25px !important;
}

/* sidebar */

#adminSidebar {
  height: 100%;
  width: 280px;
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  transition: 0.5s;
  padding-top: 0;
  margin-top: 0;
}

#adminSidebar.collapsed {
  width: 60px;
}

#adminSidebar.collapsed .navHeaderHide,
#adminSidebar.collapsed .caption {
  display: none;
}

#adminSidebar.collapsed #sideNavHeader {
  padding-left: 0px;
}

/* buns & sweets header */

#sideNavHeader {
  transition: all 1s ease;
  height: 52px;
  line-height: 52px;
  display: flex;
  color: #fff;
  font-weight: 200;
  padding-left: 28px;
  margin: 0;
  background-color: var(--sideNavHeaderColour);
  font-size: 2rem;
  overflow: hidden;
}

.navHeaderHide {
  transition: all 1s ease;
  display: block;
}

/* menu body */

#side-menu {
  height: 100%;
  display: block;
  list-style: none inside;
  margin: 0px;
  padding: 0px;
  width: 100%;
  line-height: 27px;
  font-size: 18px;
  position: relative;
}

/* titles for sections */

.group-title {
  color: var(--sideNavGroupTitleColour);
  font-weight: 700;
  margin-left: 5px;
  display: block;
}

#adminSidebar.collapsed .group-title {
  display: none;
}

.group-collapse {
  display: none;
  position: relative;
}

#adminSidebar.collapsed .group-collapse {
  display: block !important;
}

#sideNavMainContent {
  height: 90%;
  background-color: var(--menu-base-color) !important;
}

.menu-item,
.submenu-item {
  color: white;
  align-items: center;
  position: relative;
  text-decoration: none;
  line-height: 40px;
  height: 40px;
  display: flex;
}

.menu-item .icon,
.submenu-item .icon {
  width: 48px;
  height: 40px;
  font-size: 25px;
  display: block;
  text-align: center;
  position: relative;
}

.menu-item .icon i,
.submenu-item .icon i {
  width: 40px;
  height: 40px;
  font-size: 25px;
  margin-top: 5px;
  vertical-align: center;
}

.menu-item:hover,
.submenu-item:hover {
  background-color: var(--menu-selected-hovered-color);
}

.caption {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
  height: 40px;
  display: block;
}

#adminSidebar.collapsed .menu-item:hover .caption {
  display: block !important;
  float: left;
  position: absolute;
  background-color: var(--menu-selected-hovered-color);
  white-space: nowrap;
  height: 40px;
  line-height: 40px;
  padding-right: 10px;
  padding-left: 10px;
  z-index: 120;
  transform: translateX(58px);
}

.badge {
  width: 16px;
  line-height: 16px;
  font-size: 14px;
  padding: 0 !important;
  margin-top: 4px !important;
  background: #f8f8f8;
  color: #1d1d1d;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  border-radius: 0.25rem;
  font-weight: 700;
  transform: translateY(-50%) translateX(50%);
}

.hidden {
  display: none !important;
}

/* footer section */

#sideNavFooter {
  transition: 0.5s;
  bottom: 0px;
  position: fixed;
  height: calc(10% - 52px);
  width: 280px;
  display: block;
  background: var(--menu-selected-hovered-color);
  z-index: 999;
  margin-left: 0px;
}

#adminSidebar.collapsed #sideNavFooter a {
  transition: 0.5s;
  display: none !important;
  margin-left: -280px;
}

#adminSidebar.collapsed #sideNavFooter {
  transition: 0.5s;
  width: 60px;
}

#sideNavFooter a {
  padding: 7px 0 3px;
  display: block;
  font-size: 17px;
  float: left;
  width: 25%;
  text-align: center;
  text-decoration: none;
  color: grey;
  font-weight: 900;
}

#right {
  margin-left: 280px;
  transition: 0.5s;
  height: 100vh;
}

#main {
  height: calc(100vh - 52px);
}

#adminSidebar.collapsed+#right {
  transition: 0.5s;
  margin-left: 60px !important;
}

.submenu {
  display: none;
  list-style: none inside;
  margin: 0;
}

#adminSidebar.collapsed .submenu {
  display: none;
}

#adminSidebar.collapsed .active-container .submenu,
#adminSidebar.collapsed .active-container .submenu .caption {
  display: block !important;
  float: left;
  position: absolute;
  background-color: var(--menu-selected-hovered-color);
  white-space: nowrap;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  z-index: 120;
  transform: translateX(20px);
}

.selected+.submenu {
  display: block;
}

#adminSidebar.collapsed .selected+.submenu {
  display: block !important;
  float: left;
  position: absolute;
  background-color: var(--menu-base-color);
  white-space: nowrap;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  border: 2px solid transparent;
  z-index: 120;
  transform: translateY(-44px) translateX(58px);
}

#adminSidebar.collapsed .selected+.submenu .caption {
  display: block;
}

.menuOpenButton {
  height: 52px;
  width: 52px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: 2px transparent solid;
}

.menuOpenButton:hover {
  background-color: #cecece;
}

/*********************************************************************
 _____            ___  ___                  ______            
|_   _|           |  \/  |                  | ___ \           
  | | ___  _ __   | .  . | ___ _ __  _   _  | |_/ / __ _ _ __ 
  | |/ _ \| '_ \  | |\/| |/ _ \ '_ \| | | | | ___ \/ _` | '__|
  | | (_) | |_) | | |  | |  __/ | | | |_| | | |_/ / (_| | |   
  \_/\___/| .__/  \_|  |_/\___|_| |_|\__,_| \____/ \__,_|_|   
          | |                                                 
          |_|                                            
*********************************************************************/

#topMenuBar {
  background-color: white;
  border-bottom-color: black;
  height: 52px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

#topTabNav {
  margin-bottom: 0px !important;
  border-bottom: 0px !important;
  /* width: 70%; */
  margin-right: auto;
  height: 52px;
}

.mainTab {
  font-size: 20px;
  font-weight: 700;
  padding-left: 10px !important;
  padding-right: 10px !important;
  border-bottom: none;
  background-color: #fff;
}

.mainTab.tabActive {
  border: 1px solid #dfdfdf;
}

.mainTab a {
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #000;
}

.mainTab div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.mainTab a:hover {
  text-decoration: none;
}

.tabWidth {
  width: 100%;
}

.tab-list {
  list-style: none inside;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: row;
  border: 0;
  margin-top: 0;
  max-height: none;
  overflow: visible;
}

.tabContent {
  display: none;
  height: 100%;
}

.tabContent.tabContentActive {
  display: block;
}

.chatMessageContent {
  padding: 10px;
  margin: 10px;
  text-align: right;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  word-wrap: break-word;
  width: fit-content;
  max-width: 80%;
  transition: all 0.3s ease-in-out;
}

.chatMessageContent.mine {
  background: lightblue;
  border-bottom-left-radius: 25px;
  margin-left: auto;
}

#chatBody {
  width: 100%;
  height: 400px;
  background-color: aliceblue;
  overflow-y: scroll;
}

.chatMessageContent.theirs {
  background: lightgrey;
  border-bottom-right-radius: 25px;
  text-align: left;
}


/* Sender info (username or tillID) */
.chatMessageHeader {
  font-size: 12px;
  font-weight: bold;
  color: #555;
  margin-bottom: -15px;
  z-index: 10;
}

/* On hover, show tillID if a username exists */
.chatMessageHeader[title]:hover::after {
  content: attr(title);
  position: absolute;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  top: -20px;
  left: 5px;
}

.chatMessageMeta {
  font-size: 12px;
  color: gray;
  margin-top: -10px;
  text-align: left;
}

.chatMessageHeader,
.chatMessageMeta {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.chatMessage:hover .chatMessageHeader,
.chatMessage:hover .chatMessageMeta,
.chatMessage.expanded .chatMessageHeader,
.chatMessage.expanded .chatMessageMeta {
  opacity: 1;
}

/*********************************************************************
 __      ___                  _____                   _ _               
 \ \    / (_)                / ____|                 | (_)              
  \ \  / / _  _____      __ | (___  _   _ _ __  _ __ | |_  ___ _ __ ___ 
   \ \/ / | |/ _ \ \ /\ / /  \___ \| | | | '_ \| '_ \| | |/ _ \ '__/ __|
    \  /  | |  __/\ V  V /   ____) | |_| | |_) | |_) | | |  __/ |  \__ \
     \/   |_|\___| \_/\_/   |_____/ \__,_| .__/| .__/|_|_|\___|_|  |___/
                                         | |   | |                      
                                         |_|   |_|                                                 
*********************************************************************/

#supplierEditor {
  width: 100%;
  height: calc(100vh - 52px);
  display: grid;
  grid-template-rows: 52px 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  row-gap: 10px;
  grid-template-areas: "supHead supHeadInfo supHeadInfo supHeadInfo supHeadInfo""supList supInfo supContact . .""supList supInfo supContact . .""supList supProducts supProducts . .""supList supOrderHistory supOrderHistory . .";
}

.supplierHeader {
  grid-area: supHead;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding-top: 10px;
  border-bottom: solid 1px black;
}

.supplierHeaderInfo {
  grid-area: supHeadInfo;
  font-size: 20px;
  font-weight: 700;
  padding-top: 10px;
  padding-left: 80px;
  border-bottom: solid 1px black;
}

.supplierList {
  grid-area: supList;
}

.supplierInfo {
  grid-area: supInfo;
  padding: 10px;
}

.supplierContact {
  grid-area: supContact;
}

.supplierProducts {
  grid-area: supProducts;
}

.supplierOrderHistory {
  grid-area: supOrderHistory;
}

#supplierEditor ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

#supplierEditor ul>li {
  font-size: 15px;
  font-weight: 700;
  padding: 10px 10px 10px 25px;
}

#supplierEditor ul {
  padding-top: 10px;
}

#supplierEditor ul>li:nth-child(odd) {
  background: #dae5f4;
}

#supplierEditor ul>li:nth-child(even) {
  background: #b8d1f3;
}

.supplierSection {
  font: normal 20px "Bitter", serif;
  color: #2a88ad;
  margin-bottom: 5px;
  font-weight: 700;
}

/*********************************************************************

 __      ___                 _____                          _ _            _       
 \ \    / (_)               |_   _|                        | (_)          | |      
  \ \  / / _  _____      __   | |  _ __   __ _ _ __ ___  __| |_  ___ _ __ | |_ ___ 
   \ \/ / | |/ _ \ \ /\ / /   | | | '_ \ / _` | '__/ _ \/ _` | |/ _ \ '_ \| __/ __|
    \  /  | |  __/\ V  V /   _| |_| | | | (_| | | |  __/ (_| | |  __/ | | | |_\__ \
     \/   |_|\___| \_/\_/   |_____|_| |_|\__, |_|  \___|\__,_|_|\___|_| |_|\__|___/
                                          __/ |                                    
                                         |___/      
*********************************************************************/

#rawIngredientEditor {
  display: flex;
  width: 800px;
  /* height:  calc(100vh - 52px); */
}

.searchBar {
  height: 100%;
  width: 325px;
  background-color: rgba(211, 211, 211, 0.925);
  overflow-y: scroll;
}

.gridTable {
  width: auto;
  -webkit-box-flex: 1;
  flex: 1;
  padding: 10px;
  display: grid;
  border-collapse: collapse;
}

.gridTable thead {
  display: contents;
}

.gridTable tbody {
  display: contents;
}

.gridTable tr {
  display: contents;
}

.gridTable th {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

.gridTable th:last-child {
  border-right: 0;
}

.gridTable th {
  background-color: lightskyblue;
}

.gridTable th,
.gridTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gridTable td {
  padding-left: 10px;
  border-right: 1px solid black;
}

.gridTable td:last-child {
  border-right: 0;
}

/* purchase order */

.writeOrderProductCatalog,
.writeOrderProductCatalogItem {
  display: grid;
  grid-template-columns:
    minmax(50px, 1fr) minmax(50px, 3fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

.writeOrderProductCatalog div {
  border-right: 1px solid black;
}

.writeOrderProductCatalog div:last-child {
  border-right: 0;
}

.writeOrderProductCatalog.headerRow {
  border-bottom: 1px solid black;
  background-color: lightskyblue;
  overflow-y: scroll;
}

.writeOrderProductCatalog.headerRow::-webkit-scrollbar {
  visibility: hidden;
  border-bottom: 1px solid black;
}

.writeOrderProductCatalog div,
.writeOrderProductCatalog input {
  padding-top: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid grey;
}

#writeOrderProductCatalogue>div:nth-of-type(even) {
  background-color: rgba(0, 0, 0, 0.1);
}

.buttonsActive {
  color: black;
}

.buttonsInactive {
  color: lightgrey;
  pointer-events: none;
}