@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Quicksand:400,500,700,600");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}

button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}

/* over all sty */
/* 滚动条容器 */
::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #b5d3e7, #4c9af3); /* 柔和的渐变颜色 */
  border-radius: 10px; /* 圆润边角 */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* 内部阴影，提升立体感 */
  border: 2px solid #f9f9f9; /* 外层边框，与轨道衔接 */
  background-clip: padding-box; /* 防止边框影响背景颜色 */
}

/* 鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #468ad8, #9dcded); /* 更亮的渐变颜色 */
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5); /* 加强立体感 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: linear-gradient(to bottom, #ffffff, #f0f0f0); /* 柔和的轨道渐变 */
  border-radius: 10px; /* 圆润边角 */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* 内部轻微阴影 */
}

/* 滚动条边界 */
::-webkit-scrollbar-corner {
  background: #f9f9f9; /* 滚动条和轨道的交汇处颜色 */
}

/*////////////////////////////////*/
.loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 1728px;
  height: 1020px;
  background: rgba(0, 0, 0, 0.5); /* 背景透明度 */
  z-index: 99918;
  display: none; /* 默认隐藏 */
  align-items: center; /* 垂直居中加载指示器 */
  justify-content: center; /* 水平居中加载指示器 */
  display: none; /* 使用 flexbox 来居中加载指示器 */
}
.sk-cube-grid {
  width: 50px;
  height: 50px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #fec96c;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  } 
}

.globalPage {
  background-color: #f6f6f6;
  display: grid;
  flex-direction: row;
  justify-content: center;
  width: 1728px;
  height: 1050px;
  overflow: hidden;
}
@media (min-width: 800px) and (max-width: 1300px) {
  body {
    transform: scale(0.73);
    transform-origin: 0% -15%; 
    width: calc(100vw / 111);
    height: calc(100vh / 155); 
  }
  .globalPage {
    background-color: #fafafa;
    display: grid;
    flex-direction: row;
    justify-content: center;
    width: 1728px;
    height: 1020px;
    overflow: hidden;
  }
}

@media (min-width: 1300px) and (max-width: 1700px) {
  body {
    transform: scale(0.97); 
    transform-origin: 5% 8%; 
    width: calc(100vw / 6);
    height: calc(100vh / 5); 
  } 
  .globalPage {
    background-color: #f6f6f6;
    display: grid;
    flex-direction: row;
    justify-content: center;
    width: 1728px;
    height: 1020px;
    overflow: hidden;
  }
}

@media (min-width: 2200px) and (max-width: 2600px) {
  body {
    transform: scale(1.45); 
    transform-origin: 1% 1%; 
    width: calc(100vw / 10);
    height: calc(100vh / 5.5); 
  } 
  .globalPage {
    background-color: #f6f6f6;
    display: grid;
    flex-direction: row;
    justify-content: center;
    width: 1728px;
    height: 1020px;
    overflow: hidden;
  }
}

.action-btn {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  color: #38488f;
  padding: 12px 20px;
  font-size: 16px;
  text-align: center;
  line-height: normal;
  z-index: 100;
  background-color: transparent;
  border: 2px solid #38488f;
  border-radius: 8px;
  transition: all 0.4s ease;
  cursor: pointer;
}
body.lang-short .action-btn {
  font-weight: 500 !important;
}

.action-btn:hover {
  color: #2d3671;
  transform: scale(1.1);
}


.std-select {
  display: none;
  width: 257px;
  height: 65px;
  background-color: #fec96c;
  border-radius: 75px;
  font-family: "Quicksand", Helvetica;
  font-weight: 700;
  color: #38488f;
  font-size: 20px;
  text-align: center;
  line-height: normal;
}

.globalPage .overlap-wrapper {
  background-color: #f6f6f6;
  overflow: hidden;
  width: 1728px;
  height: 1100px;
}

.globalPage .overlap {
  display: flex;
  flex-direction: column;  
  position: relative;
  width: 3690px;
  height: 1100px;
  top: -169px;
  left: -474px;
}

.globalPage .mainLandingPage {
  display: flex;
  flex-direction: column;
  width: 3690px;
  height: 2620px;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}

.globalPage .frame {
  display: flex;
  height: 780px;
  align-items: flex-start;
  padding: 0px 520px 0px 600px;
  position: relative;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}

.globalPage .cookAndArrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0px 36px 0px 0px;
  position: relative;
  flex: 0 0 auto;
}

.globalPage .cookGraphicsFrame {
  position: relative;
  width: 418.99px;
  height: 721.79px;
}

.globalPage .div-wrapper {
  width: 419px;
  height: 722px;
}

.globalPage .layer {
  height: 722px;
}

.globalPage .overlap-group {
  position: relative;
  height: 722px;
}

.globalPage .rectangle {
  position: absolute;
  width: 303px;
  height: 508px;
  top: 214px;
  left: 0;
}

.globalPage .img {
  position: absolute;
  width: 61px;
  height: 53px;
  top: 302px;
  left: 94px;
}

.globalPage .group-wrapper {
  position: absolute;
  width: 152px;
  height: 136px;
  top: 246px;
  left: 52px;
  background-image: url(.././img/rectangle-2.png);
  background-size: 100% 100%;
}

.globalPage .group-2 {
  position: absolute;
  width: 72px;
  height: 57px;
  top: 42px;
  left: 36px;
}

.globalPage .group-3 {
  position: absolute;
  width: 36px;
  height: 109px;
  top: 394px;
  left: 110px;
}

.globalPage .vector {
  position: absolute;
  width: 39px;
  height: 160px;
  top: 373px;
  left: 91px;
  mix-blend-mode: multiply;
}

.globalPage .rectangle-2 {
  position: absolute;
  width: 114px;
  height: 19px;
  top: 386px;
  left: 234px;
}

.globalPage .rectangle-3 {
  position: absolute;
  width: 53px;
  height: 41px;
  top: 355px;
  left: 272px;
}

.globalPage .graphic-elements {
  position: absolute;
  width: 217px;
  height: 155px;
  top: 0;
  left: 130px;
}

.globalPage .vector-2 {
  position: absolute;
  width: 95px;
  height: 31px;
  top: 239px;
  left: 198px;
}

.globalPage .group-4 {
  position: absolute;
  width: 72px;
  height: 15px;
  top: 248px;
  left: 209px;
}

.globalPage .vector-3 {
  position: absolute;
  width: 68px;
  height: 31px;
  top: 158px;
  left: 149px;
}

.globalPage .vector-4 {
  position: absolute;
  width: 68px;
  height: 31px;
  top: 104px;
  left: 259px;
}

.globalPage .group-5 {
  position: absolute;
  width: 49px;
  height: 15px;
  top: 165px;
  left: 159px;
}

.globalPage .group-6 {
  position: absolute;
  width: 40px;
  height: 15px;
  top: 112px;
  left: 275px;
}

.globalPage .vector-5 {
  position: absolute;
  width: 68px;
  height: 31px;
  top: 0;
  left: 293px;
}

.globalPage .group-7 {
  position: absolute;
  width: 56px;
  height: 15px;
  top: 9px;
  left: 299px;
}

.globalPage .vector-6 {
  position: absolute;
  width: 68px;
  height: 31px;
  top: 45px;
  left: 77px;
}

.globalPage .group-8 {
  position: absolute;
  width: 54px;
  height: 15px;
  top: 54px;
  left: 84px;
}

.globalPage .group-9 {
  position: absolute;
  border-radius: 30px;
  width: 900px;
  height: 200px;
  top: 15%;
  left: -100px;
}

.globalPage .element-tif {
  position: relative;
  width: 286.38px;
  height: 70.46px;
  left: 26%;
  top: 1%;
}
.globalPage .caption_yordando{
  position: absolute;
  height: 65px;
  width: 557px;
  border-radius: 75px;
  top: 8%;
  font-size: 24px;
  left: 19%;
  color: #384382;
  font-family: "Quicksand", Helvetica;
  font-weight: 700;
}
.globalPage .caption_explane{
  position: absolute;
  height: 65px;
  width: 534px;
  border-radius: 75px;
  top: 52%;
  font-size: 27px;
  left: 16%;
  color: #fec96c;
  font-family: "Quicksand", Helvetica;
  font-weight: 900;
}

.globalPage .landingPageCentralBox {
  display: flex;
  flex-direction: column;
  width: 561px;
  height: 415px;
  left: 6%;
  align-items: center;
  justify-content: center;
  gap: 66px;
  padding: 90px 66px;
  position: relative;
  background-color: #ffffff;
  border-radius: 36px;
  box-sizing: border-box;
}

.globalPage .frame-wrapper {
  position: relative;
  width: 257px;
  height: 65px;
}

.globalPage .frame-3 {
  height: 65px;
}

/* .globalPage .select-preset-wrapper {
  position: relative;
  width: 257px;
  height: 65px;
  background-color: #fec96c;
  border-radius: 75px;
} */

.globalPage .registerBtn {
  position:relative;
  height: 65px;
  width: 257px;
  border-radius: 75px;
  font-family: "Quicksand", Helvetica;
  font-weight: 700;
  /* color: #38488f; */
  background-color: #fec96c;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  text-align: center;
  display: flex;
  justify-content: center; 
  align-items: center;
  border: none; 
  outline: none;
}

.globalPage .don-t-miss-out-on {
  position: relative;
  align-self: stretch;
  font-family: "Quicksand", Helvetica;
  font-weight: 400;
  color: #2a478b;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.globalPage #problemSelectionAfterLoginFrame {
  display: none;
  flex-direction: column;
  width: 639px;
  height: 457px;
  align-items: center;
  justify-content: center;
  gap: 66px;
  padding: 90px 66px;
  position: relative;
  background-color: #ffffff;
  border-radius: 36px;
  box-sizing: border-box; 
}




.globalPage .footer {
  position: relative;
  width: 3493px;
  height: 1250.21px;
  margin-top: -240px;
}

.globalPage .footer-inner {
  position: relative;
  width: 2104px;
  height: 1250px;
}

.globalPage .yellow-b-gchef {
  position: absolute;
  width: 765px;
  height: 765px;
  top: 0;
  left: 0;
  background-color: #e1ab42;
  border-radius: 382.5px;
}

.globalPage .union {
  position: absolute;
  width: 1668px;
  height: 331px;
  top: 0;
  left: 436px;
}

.globalPage .frame-4 {
  display: flex;
  flex-wrap: wrap;
  width: 1152px;
  height: 1250px;
  align-items: flex-start;
  justify-content: center;
  gap: 60px 60px;
  padding: 60px 0px;
  position: absolute;
  top: 0;
  left: 824px;
}

.globalPage .group-10 {
  position: relative;
  width: 735px;
  height: 70px;
}

.globalPage .group-11 {
  position: absolute;
  width: 26px;
  height: 26px;
  top: 0;
  left: 0;
}

.globalPage .flexcontainer-wrapper {
  position: absolute;
  width: 695px;
  height: 70px;
  top: 0;
  left: 42px;
}

.globalPage .flexcontainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  width: 793px;
  height: 70px;
}

.globalPage .text {
  position: relative;
  align-self: stretch;
  font-family: "Quicksand", Helvetica;
  font-weight: 500;
  width: 100%;
  color: #f6f6f6;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
  text-decoration: underline;
}

.globalPage .text-wrapper {
  font-family: "Quicksand", Helvetica;
  font-weight: 500;
  color: #f6f6f6;
  font-size: 24px;
  letter-spacing: 0;
  text-decoration: underline;
}

.globalPage .p {
  position: relative;
  width: fit-content;
  font-family: "Quicksand", Helvetica;
  font-weight: 600;
  color: #f6f6f6;
  font-size: 18px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
}

.globalPage .header-BG {
  display: flex;
  width: 1728px;
  height: 120px;
  align-items: center;
  gap: 10px;
  padding: 60px 60px 36px;
  position: absolute;
  top: 169px;
  left: 474px;
  background-color: #ffffff;
  box-sizing: border-box;
}

.globalPage .headerStrip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 300px;
  position: relative;
  flex: 0 0 auto;
  margin-top: -9.50px;
  margin-bottom: -9.50px;
}

.globalPage .headerLogo {
  position: relative;
  width: 1124px;
  cursor:pointer;
}

.logoHomeBtn {
  position: absolute;
  top: 0;
  left: -10px;
  width: 20%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  border: 2px solid rgba(255, 255, 255, 0);
  cursor: pointer;
  z-index: 10000;
}
.language-selector {
  position: relative;
}
.language-selector img {
  cursor: pointer;
  width: 30px;
  height: 30px;
}


.settingLoginStripDropdown {
  position: absolute;
  top: 45px;
  left: -26px;
  display: none;
  font-size: 12px;
  font-family: "Quicksand", Helvetica, sans-serif;
  font-weight: 600;
  border: 1px solid #e9e6e6;
  padding: 8px 12px;  /* 增加内边距使得列表项之间有足够的空间 */
  background-color: rgb(242, 241, 241);
  z-index: 10;
  border-radius: 8px; /* 圆角效果 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.243); /* 添加阴影让框看起来更立体 */
  min-width: 90px; /* 给下拉框设置最小宽度 */
}


.settingLoginStripDropdown option {
  padding: 8px 10px;  /* 增加选项的内边距，确保它们更易点击 */
  border-radius: 4px; /* 圆角效果，和下拉框一致 */
  background-color: rgba(233, 236, 237, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease; /* 添加平滑过渡效果 */
}

.settingLoginStripDropdown option:hover {
  background-color: #7b7171; /* 鼠标悬停时改变背景颜色 */
}

.settingLoginStripDropdown option:active {
  background-color: #f1b5b5; /* 点击时改变背景颜色 */
}


.globalPage .settingLoginStrip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  position: relative;
  flex: 0 0 auto;
}

.globalPage .homeBtn {
  position: relative;
  width: 38px;
  height: 38px;
  margin-top: -1.86px;
  margin-bottom: -1.86px;
  margin-left: -2.00px;
  z-index: 1000;
  transition: all 0.4s ease;
  cursor: pointer;
}
.homeBtn:hover {
  color: #2d3671;
  border-color: #d9e0a299;
  transform: scale(1.1);
}

.globalPage .settingsBtn {
  position: relative;
  width: 37.44px;
  height: 38.28px;
  margin-top: -2.00px;
  margin-bottom: -2.00px;
  z-index: 1000;
  transition: all 0.4s ease;
  cursor: pointer;
}
.settingsBtn:hover {
  color: #2d3671;
  border-color: #d9e0a299;
  transform: scale(1.1);
}

.globalPage .loginDialogBtn {
  position: relative;
  display: flex;
  width: 37.98px;
  height: 38px;
  margin-top: -1.86px;
  margin-bottom: -1.86px;
  margin-right: -2.00px;
  z-index: 1000;
  transition: all 0.4s ease;
  cursor: pointer;
}
.loginDialogBtn:hover {
  color: #2d3671;
  border-color: #d9e0a299;
  transform: scale(1.1);
}

.globalPage .logoffDialogBtn {
  display: none;
  width: 37.98px;
  height: 38px;
  margin-top: -1.86px;
  margin-bottom: -1.86px;
  transition: all 0.4s ease;
  cursor: pointer;
  transform: scale(1.1);
}
.logoffDialogBtn:hover {
  color: #2d3671;
  border-color: #d9e0a299;
  transform: scale(1.25);
}

.userInfo {
  position: relative; /* 使子元素可以使用绝对定位 */
  display: inline-block; /* 使容器的大小适应内容 */
  z-index: 1000;
}

.restaurantName {
  position: absolute; /* 绝对定位 */
  display: none;
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 使文本居�? */
  color: white; /* 文字颜色 */
  cursor: pointer;
  font-weight: bold; /* 文字加粗 */
}

.logoutMenu {
  display: none; /* 默认隐藏 */
  position: absolute; /* 绝对定位 */
  background-color: white; /* 菜单背景色 */
  border: 1px solid #ccc; /* 边框 */
  z-index: 1000; /* 确保在其他元素之上 */
  margin-top: 5px; /* 与按钮的间距 */
}

.logoutMenu ul {
  list-style-type: none; /* 去掉列表样式 */
  padding: 0; /* 去掉内边距 */
  margin: 0; /* 去掉外边距 */
}

.logoutMenu li {
  padding: 10px; /* 内边距 */
  cursor: pointer; /* 鼠标指针样式 */
}

.logoutMenu li:hover {
  background-color: #f0f0f0; /* 悬停时背景色 */
}

.modalWindow,
.loginDialog {
  flex-direction: row; /* Arrange children in a row */
  width: 1620px; /* Width of the dialog */
  height: 860px; /* Height of the dialog */
  align-items: center; /* Center items vertically */
  justify-content: center; /* Center items horizontally */
  gap: 150px; /* Space between children */
  padding: 24px 24px 24px 0px; /* Padding around the content */
  position: absolute; /* Position the dialog absolutely */
  top: 92px; /* Distance from the top */
  left: -1430px; /* Initial position off-screen */
  background-color: #4274af; /* Background color */
  border-radius: 24px; /* Rounded corners */
  box-shadow: 0px 6px 12px #0000001f; /* Soft shadow effect */
  z-index: 1000; /* Ensure dialog appears above other elements */
  border: 10px solid; /* Border around the dialog */
  border-color: #f6f6f6; /* Border color */
  display: flex !important;
  visibility: hidden; /* Initially hidden */
  opacity: 0; /* Initially invisible */
  transform: translateY(-20px); /* Off-screen initially */
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s; /* Transition for opacity and transform */
}

/* When the .visible class is added, the dialog becomes visible */
.modalWindow.visible,
.loginDialog.visible {
  visibility: visible; /* Make it visible */
  opacity: 1; /* Fully visible */
  transform: translateY(0); /* Bring it into view */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth fade-in and slide-in */
}

.modalWindow{
  left: -886px;
  align-items: center;
  width: 1020px;
  font-weight: bold;
  height: 560px;
  color: #4274af;
  /* instructionText */
  background-color:white;
  font-family: "Quicksand", Helvetica, sans-serif;
  display: block !important;
}
.OrderQueueDialog {
  flex-direction: row; /* Arrange children in a row */
  width: 1200px; /* Width of the dialog */
  height: 800px; /* Height of the dialog */
  justify-content: center; /* Center items horizontally */
  gap: 150px; /* Space between children */
  padding: 24px 24px 24px 0px; /* Padding around the content */
  position: absolute; /* Position the dialog absolutely */
  background-color: #fafbfc; /* Background color */
  border-radius: 24px; /* Rounded corners */
  box-shadow: 0px 6px 12px #0000001f; /* Soft shadow effect */
  z-index: 1000; /* Ensure dialog appears above other elements */
  border: 10px solid; /* Border around the dialog */
  border-color: #dce0e6; /* Border color */
  display: flex !important;
  left: 1%;
  top: 8%;
  visibility: hidden; /* Initially hidden */
  opacity: 0; /* Initially invisible */
  transform: translateY(-20px); /* Off-screen initially */
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s; /* Transition for opacity and transform */
}

/* When the .visible class is added, the dialog becomes visible */
.OrderQueueDialog.visible {
  visibility: visible; /* Make it visible */
  opacity: 1; /* Fully visible */
  transform: translateY(0); /* Bring it into view */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth fade-in and slide-in */
}

.loginIntroForm {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  position: relative;
  flex: 0 0 auto;
}

/* logout */
#logoutMenu {
  display: none;  /* 默认隐藏 */
  position: absolute;  /* 绝对定位 */
  background-color: #fff;  /* 背景颜色 */
  border: 1px solid #ddd;  /* 边框 */
  border-radius: 15px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);  /* 阴影 */
  padding: 10px 0;  /* 内边距 */
  z-index: 1000;  /* 确保菜单显示在最上层 */
  opacity: 0;  /* 初始为透明 */
  left: -28px;
  animation: fadeInUp 0.5s forwards;  /* 增加向上的动画效果 */
}

/* 设置菜单选项的样式 */
#logoutOptionsList li {
  list-style: none;  /* 去除默认的列表标记 */
  padding: 8px 20px;  /* 内边距 */
  color: #38488f;  /* 文本颜色 */
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;  /* 鼠标指针变为手型 */
  transition: background-color 0.3s ease;  /* 渐变效果 */
  box-sizing: border-box;  /* 使 padding 也包含在宽度计算中 */
}

/* 鼠标悬停时改变菜单项的背景颜色 */
#logoutOptionsList li:hover {
  background-color: #f1f1f1;  /* 鼠标悬停时的背景颜色 */
}

/* 显示菜单的淡入向上动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 隐藏菜单时的动画 */
@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}


.globalPage .loginText {
  position: relative;
  width: fit-content;
  max-width: 660px;
  margin-top: -1.00px;
  color: #ffffff;
  font-size: 24px;
  font-family: "Quicksand", Helvetica;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.toggleIcon {
  position: absolute;
  right: 10px; /* 调整图标位置 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 垂直居中 */
  cursor: pointer; /* 鼠标悬停显示手型光标 */
  z-index: 1001; /* 确保图标在其他元素上面 */
  transition: transform 0.2s; /* 添加过渡效果 */
  width: 17px;
  height: 15px;
}
.NewPasswordIcon{

}

.toggleIcon:hover {
  transform: translateY(-50%) scale(1.2); /* 鼠标悬停时放大 */
}

.globalPage .new-user-create-an {
  display: flex;
  flex-direction: column;
  position: relative;
  width: fit-content;
  font-family: "Quicksand", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.loginRegisterLink {
  color: #f5f5f5;
  text-decoration: underline;
  transition: all 0.4s ease;
  cursor: pointer;
}

.loginRegisterLink:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
}




.globalPage .span {
  font-family: "Quicksand", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
}

.globalPage .userPassDialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 36px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  box-sizing: border-box; /* ȷ��padding�������ڿ����� */
}


.loginDialogInput {
  position: relative;
  width: 224px;
  height: 42px;
  font-family: "Quicksand", Helvetica;
  font-weight: 500;
  text-align: center;
  border-radius: 25px;
  margin: auto;
  background-image: url(.././img/rectangle-71-1.svg);
  background-size: 100% 100%;
  border: none;
  outline: none;
}

#recoverEmail {
    width: 400px; 
}

#submitPasswordReset {
    width: 144px; 
}


.globalPage .loginIforgotPassword {
  position: relative;
  width: fit-content;
  font-family: "Quicksand", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  text-decoration: underline;

  transition: all 0.4s ease;
  cursor: pointer;
}

.loginIforgotPassword:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
}
.globalPage .msubmitLogin {
  position: relative;
  width: 135px;
  border-radius: 40px;
  background-color: transparent;
  border-style: none;
  background-image: url(.././img/rectangle-71-2.svg);
  background-size: 100% 100%;
}

.recoverPasswordDialog {
  display: none;
  flex-direction: column;
  width: 1620px;
  height: 860px;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 120px 24px 24px;
  position: absolute;
  top: 92px;
  left: -1430px;
  background-color: #4274af;
  z-index: 1002;
  border-radius: 24px;
  border: 10px solid;
  border-color: #f6f6f6;
  /* 设置初始透明度和位置偏移 */
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease; 
}

/* 为 .loginDialog 元素添加 .visible 类时生效 */
.recoverPasswordDialog.visible {
  display: flex !important; /* 显示元素 */
  opacity: 1; /* 设置完全可见 */
  transform: translateY(0); /* 重置偏移 */
}
.registerDialog {
  display: none;
  flex-direction: column;
  width: 1620px;
  height: 860px;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 120px 24px 24px;
  position: absolute;
  top: 92px;
  left: -1430px;
  background-color: #4274af;
  z-index: 1001;
  border-radius: 24px;
  border: 10px solid;
  border-color: #f6f6f6;
  /* 设置初始透明度和位置偏移 */
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease; 
}

/* 为 .loginDialog 元素添加 .visible 类时生效 */
.registerDialog.visible {
  display: flex !important; /* 显示元素 */
  opacity: 1; /* 设置完全可见 */
  transform: translateY(0); /* 重置偏移 */
}

.registerDialogForm {
  display: flex;
  flex-direction: column;
  width: 1095px;
  height: 607px;
  align-items: center;
  gap: 36px;
  padding: 36px 0px;
  position: relative;
}

.registerDialogInputRow {
  display: flex;
  flex-direction: row;  
  align-items: end;
  gap: 110px;
  position: relative;
  flex: 0 0 auto;
}

.inputFieldTitleGroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.inputCheckNewPasswordTitleGroup {
  left: 8%;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: flex-start;
}

.registerInputLabel {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Quicksand", Helvetica;
  margin: 9px;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.recoverNewPasswordDialog {
  display: none; /* Initially hidden */
  flex-direction: row; /* Arrange children in a row */
  width: 1620px; /* Width of the dialog */
  height: 860px; /* Height of the dialog */
  align-items: center; /* Center items vertically */
  justify-content: center; /* Center items horizontally */
  gap: 150px; /* Space between children */
  padding: 24px 24px 24px 0px; /* Padding around the content */
  position: absolute; /* Position the dialog absolutely */
  top: 92px; /* Distance from the top */
  left: -1430px; /* Initial position off-screen */
  background-color: #4274af; /* Background color */
  border-radius: 24px; /* Rounded corners */
  box-shadow: 0px 6px 12px #0000001f; /* Soft shadow effect */
  z-index: 10200;
  border: 10px solid; /* Border around the dialog */
  border-color: #f6f6f6; /* Border color */
  
  /* 设置初始透明度和位置偏移 */
  opacity: 0;
  /* opacity: 1; */
  transform: translateY(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease; 
}

/* 为 .loginDialog 元素添加 .visible 类时生效 */
.recoverNewPasswordDialog.visible {
  display: flex; /* 显示元素 */
  opacity: 1; /* 设置完全可见 */
  transform: translateY(0); /* 重置偏移 */
}

.contentWrapper {
  display: flex;
  flex-direction: column; /* Stack resetYourPasswordText and form vertically */
  align-items: center;
  justify-content: center;
  gap: 20px; /* Adjust this for desired vertical spacing */
  position: relative; /* Enables the bottom positioning */
}

.resetYourPasswordText {
  font-family: "Quicksand", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.checkCodeAndNewPasswordInputRow {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: flex-start; /* Align items to the start (left side) */
  gap: 40px; /* Adjust this for the desired spacing between elements */
  padding: 40px; /* Optional: add padding around the form */
}

.inputCheckCodeTitleGroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.checkCodeInputLabel {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Quicksand", Helvetica;
  margin: 9px;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}
.checkCodeInput {
  position: relative;
  width: 224px;
  height: 42px;
  text-align: center;
  border-radius: 25px;
  margin: auto;
  background-image: url(.././img/rectangle-71-1.svg);
  background-size: 100% 100%;
  border: none; 
  outline: none; 
}
.inputNewPasswordTitleGroup{
  left: 8%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.newPasswordInputLabel{
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Quicksand", Helvetica;
  margin: 9px;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}
.newPasswordInput{
  position: relative;
  width: 224px;
  height: 42px;
  text-align: center;
  border-radius: 25px;
  margin: auto;
  background-image: url(.././img/rectangle-71-1.svg);
  background-size: 100% 100%;
  border: none; 
  outline: none; 
}
.NewPasswordIcon {
  top: 75%;
}
.checkPasswordIcon{
  top: 75%;
  right:16px;
}
.checkNewPasswordInputLabel{
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Quicksand", Helvetica;
  margin: 9px;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}
.checkNewPasswordInput{
  position: relative;
  width: 224px;
  height: 42px;
  text-align: center;
  border-radius: 25px;
  margin: auto;
  background-image: url(.././img/rectangle-71-1.svg);
  background-size: 100% 100%;
  border: none; 
  outline: none; 
}
.inputFieldTitleGroup{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
.msubmitReset{
  display: block; /* Ensures it's a block element for easy centering */
  margin: 0 auto; /* Centers it horizontally if it has a fixed width */
  text-align: center; /* Centers text within the element */
  position: relative;
  left: 53%;
  width: 130px;
  border-radius: 40px;
  background-color: transparent;
  border-style: none;
  background-image: url(.././img/rectangle-71-2.svg);
  background-size: 100% 100%;
}

.reloginDialog{
  display: none; /* Initially hidden */
  flex-direction: row; /* Arrange children in a row */
  width: 1620px; /* Width of the dialog */
  height: 860px; /* Height of the dialog */
  align-items: center; /* Center items vertically */
  justify-content: center; /* Center items horizontally */
  gap: 150px; /* Space between children */
  padding: 24px 24px 24px 0px; /* Padding around the content */
  position: absolute; /* Position the dialog absolutely */
  top: 92px; /* Distance from the top */
  left: -1430px; /* Initial position off-screen */
  background-color: #4274af; /* Background color */
  border-radius: 24px; /* Rounded corners */
  box-shadow: 0px 6px 12px #0000001f; /* Soft shadow effect */
  z-index: 10300; /* Ensure dialog appears above other elements */
  border: 10px solid; /* Border around the dialog */
  border-color: #f6f6f6; /* Border color */
  
  /* 设置初始透明度和位置偏移 */
  opacity: 0;
  /* opacity: 1; */
  transform: translateY(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease; 
}

/* 为 .loginDialog 元素添加 .visible 类时生效 */
.reloginDialog.visible {
  display: flex; /* 显示元素 */
  opacity: 1; /* 设置完全可见 */
  transform: translateY(0); /* 重置偏移 */
}
.reloginText{
  font-family: "Quicksand", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
}
.inputReloginTitleGroup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.reloginUsernameLabel {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Quicksand", Helvetica;
  margin: 9px;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}
.inputReloginUsername {
  position: relative;
  width: 224px;
  height: 42px;
  text-align: center;
  border-radius: 25px;
  margin: auto;
  background-image: url(.././img/rectangle-71-1.svg);
  background-size: 100% 100%;
  border: none; 
  outline: none; 
}

.msubmitRelogin{
  display: block; /* Ensures it's a block element for easy centering */
  margin: 0 auto; /* Centers it horizontally if it has a fixed width */
  text-align: center; /* Centers text within the element */
  position: relative;
  left: 33%;
  width: 126px;
  border-radius: 40px;
  background-color: transparent;
  border-style: none;
  background-image: url(.././img/rectangle-71-2.svg);
  background-size: 100% 100%;
}

/* dishTable 样式 */
.ongoingDishTable {
  width: 100%;
  margin-top: 13px; 
  border-collapse: collapse;
  font-size: 14px;
  text-align: center;
  border-radius: 35.5px;  /* 增加表格的圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影，提升立体感 */
  background-color: #fff; /* 背景白色 */
  opacity: 0; /* 初始为透明 */
  transition: opacity 3s ease, transform 3s ease; /* 过渡效果 */
  animation: fadeIn 3s ease-in-out forwards; /* 动画效果 */
}

/* 标题行的样式 */
.ongoingDishTable th {
  background-color: #fec96c;  /* 标题行的颜色 */
  font-weight: bold;  /* 增加标题行的粗体效果 */
  padding: 12px 16px;  /* 增加间距，使标题行看起来更宽松 */
  color: #38488f; 
  font-size: 16px;  /* 调整字体大小 */
  text-transform: uppercase;  /* 字母大写 */
  letter-spacing: 1px;  /* 字母间距稍微增大 */
  text-align: center;
  transition: background-color 0.5s ease;  /* 添加渐变效果 */
  opacity: 0; /* 初始为透明 */
  animation: fadeIn 2s ease-in-out forwards; /* 淡入效果 */
}

/* 表格行和单元格的样式 */
.ongoingDishTable td {
  font-weight: bold;
  padding: 10px 16px;  /* 增加单元格的内边距 */
  border-radius: 8px;  /* 给单元格添加圆角 */
  border-bottom: 1px solid #ddd;  /* 单元格底部边框 */
  font-size: 14px;  /* 调整字体大小 */
  color:#38488f; /* 文本颜色稍微柔和 */
  background-color: #fafafa;  /* 每个单元格背景色 */
  transition: background-color 0.5s ease;  /* 添加渐变效果 */
  opacity: 0; /* 初始为透明 */
  animation: fadeIn 2s ease-in-out forwards; /* 淡入效果 */
}

/* 表格行的淡入淡出动画 */
.ongoingDishTable tr {
  opacity: 0; /* 初始状态为透明 */
  animation: fadeIn 2s ease-in-out forwards; /* 动画效果 */
}
.ongoingDishTable.fadeOut {
  animation: fadeOut 2s ease-in-out forwards;
}
/* 淡入效果 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 淡出效果 */
@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* 表格行悬停效果 */
.ongoingDishTable tr:hover td {
  background-color: #f0f0f0;  /* 鼠标悬停时改变背景颜色 */
}

/* 固定 dishName 列宽度为 10 个中文字符宽 */
.dishNameColumn {
  white-space: nowrap;
  overflow: hidden;
  width: 180px;  /* 调整宽度 */
  text-overflow: ellipsis;
  position: relative;
  cursor: pointer; 
}
.dishNameColumn::after {
  content: attr(data-title);
  position: fixed;  /* 固定位置 */
  background-color: #38488f;
  color: white;
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  white-space: nowrap;
  pointer-events: none;
  top: 14%; /* 调整为合适的显示位置 */
  left: 50%;
  transform: translateX(-50%);
}


/* 鼠标悬停时显示 tooltip */
.dishNameColumn:hover::after {
  visibility: visible;
  opacity: 1;
}

/* 使表格外框有圆角 */
.ongoingDishTable {
  overflow: hidden;  /* 确保表格外框的圆角效果 */
}
/* 改变 flatpickr 日历的位置 */
.flatpickr-calendar {
  position: absolute !important; /* 使用绝对定位 */
  top: 395px !important; /* 你可以调整这个值来改变日历的垂直位置 */
  left: 1350px !important; /* 你可以调整这个值来改变日历的水平位置 */
  font-family: "Quicksand", Helvetica!important;
  z-index: 999999; /* 确保日历浮动在页面上方 */
}
.flatpickr-day.selected {
  background: #d04b4b!important;
  border-color:  #d04b4b!important;
}
.flatpickr-monthDropdown-month{
  font-size: 10px !important;
}

.flatpickr-calendar {
  animation: fadeIn 0.7s ease-in-out;
}

@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}


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


.globalPage .text-wrapper-5 {
  position: absolute;
  width: 48px;
  height: 24px;
  top: 7px;
  left: 44px;
  font-weight: 600;
  color: #38488f;
  font-size: 16px;
  font-family: "Quicksand", Helvetica;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.globalPage .mainMenuBtns {
  display: inline-flex;
  /* display: none; */
  align-items: center;
  justify-content: center;
  gap: 40px;
  position: absolute;
  top: 5px;
  left: 446px;
}

.globalPage .group-14 {
  position: relative;
  width: 89px;
  height: 33px;
}

.globalPage .group-15 {
  width: 91px;
  height: 33px;
}

.globalPage .mainMenuBtn {
  position: relative;
  justify-content: center;
  width: 104px;
  height: 40px;
  max-width: 200px;
  background-color: #fec96c;
  border-radius: 26.5px;
  border: none; 
  outline: none; 
  transition: transform 1s ease, box-shadow 1s ease, background-color 1s ease, border 1s ease; /* 更改为1秒 */
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
}

/* 被激活的按钮样式 */
.mainMenuBtn.active {
  background-color: #d04b4b; /* 更明亮的激活颜色 */
  color: white;
  transform: translateY(2px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.globalPage .mainMenuBtn .action-btn {
  width: auto;  /* 自动调整宽度 */
  white-space: nowrap;  /* 防止文字换行 */
}

.mainMenuBtn.activePlanner {
  background-color: #d04b4b; /* 更明亮的激活颜色 */
  color: white;
  font-size: 22px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.globalPage .group-16 {
  position: relative;
  width: 91px;
  height: 33px;
  margin-right: -2.00px;
}



.loggedInMainSidebar {
  position: relative;
  width: 407px;
  height: 998px;
  top: 174px;
  left: 474px;
}

.mainSidebarBlueCover {
  position: relative;
  display: flex;
  cursor: ew-resize; 
  flex-direction: column;
  width: 493px;
  height: 998px;
  z-index: 1000!important;
  padding: 10px 20px;
  background-color: #4174af;
}

.mainSidebarGroup {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
/*  height: 250px;*/
}


.mainSidebarGroupIconTitle {
  display: flex;
  flex-direction: row;
  align-items: flex-end; 
  padding: 25px 3px 3px 25px;
}


.mainSidebarGroupIcon {
    position: relative;
    padding: 6px;
  width: 30px;
  /*height: 30px;*/
}

.mainSidebarGroupTitle {
  position: relative;
  font-family: "Quicksand", Helvetica;
  font-weight: 700;
  bottom: 3px;
  color: #f6f6f6;
  font-size: 18px;
  letter-spacing: 0;
  line-height: normal;
}

.mainSidebarGroupInner {
  position: relative;
  font-family: "Quicksand", Helvetica;
  font-weight: 700;
  color: #38488f;
  font-size: 18px;
  letter-spacing: 0;
  padding: 16px 30px;
  /* margin: 3px 10px 30px 10px; */
  margin: 10px 2px 10px 5px;
  line-height: normal;
  background-color: #f6f6f6;
  border-radius: 35.5px
}
.mainSidebarGroupInnerExp {
  position: relative;
  font-family: "Quicksand", Helvetica;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 0;
  padding: 16px 30px;
  /* margin: 3px 10px 30px 10px; */
  margin: 10px 2px 10px 5px;
  line-height: normal;
  font-weight: 500px;
  background-color: #4174af;
}

.cn-spacing .dish-instructions p {
  line-height: 1.9; /* 调整行高 */
  font-size: 17px;
}

.mainSidebarGroupDotEntry {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 1px 0px;
}

#mainMenuDishesBtn,
#mainMenuOrdersBtn,
#mainMenuStaffBtn,
#mainMenuPlannerBtn{
  display: none;
}
.mainSidebarGroupInnerColumnFlex span{
  margin: 8px 3px;	    
}
.StaffTaskInfoContainer {
  border-radius: 20px;
  position: relative;
  display: none;
  font-family: "Quicksand", Helvetica;
  font-weight: 700;
  color: #38488f;
  font-size: 15px;
  width: 97%;
  height: 100%;
  top:4%;
  height: auto; /* 使用 auto 高度以适应内容 */
  left: 10px;
  overflow-y: auto;
}
.dishInfoContainer {
  position: relative;
  display: block;
  font-family: "Quicksand", Helvetica;
  font-weight: 700;
  color: #38488f;
  font-size: 15px;
  width: 100px;
  left: 830px;
  top:4%;
  height: auto; /* 使用 auto 高度以适应内容 */
  overflow-y: auto;
}

.staffItemInfo{
  display: block;
  align-items: center; /* 垂直居中对齐子元素 */
  justify-content: flex-start; /* 子元素靠左对齐 */
  margin: 25px 0; /* 上下间距 */
  width: 100%; /* 使其占满父容器宽度 */
}
.staffItem {
  display: flex; /* 使用 flexbox 进行布局 */
  align-items: center; /* 垂直居中对齐子元素 */
  justify-content: flex-start; /* 子元素靠左对齐 */
  margin: 9px 0; /* 上下间距 */
  width: 100%; /* 使其占满父容器宽度 */
}

.beforStaffStyle {
  width: 16px;
  height: 16px;
}

.staffName {
  margin-left: 10px; /* 添加左边距以分隔图标和名字 */
}

.runningTaskofStaff {
  margin-left: 10px; /* 添加左边距以分隔名字和任务 */
  color: #ffffff;
  background-color: #4174af;
  border-radius: 30px;
  padding: 10px; 
}

.nextTaskofStaff {
  background-color: #e6e7e8;
  margin-left: 20px; /* 添加左边距以分隔名字和任务 */
  color: #ffffff;
  border-radius: 30px;
  padding: 10px; 
}
.sidebarBtmLineTask {
  margin: 10px 0;
  width: 100%;
}

.dish-instructions {
  max-width: 100%; /* 设置合适的最大宽度 */
  line-height: 1.5; /* 行高 */
  font-weight: 500px !important;
}

.dish-instructions h3 {
  text-align: center; /* 居中标题 */
  font-size: 25px; /* 设置标题大小 */
  font-weight: bold;
  color: #d04b4b; /* 标题颜色 */
  margin-bottom: 9%;
}

.dish-instructions p {
  margin-bottom: 10px; /* 段落间距 */
  font-size:18px;
  font-weight: 100 !important;
}

.dish-instructions strong {
  color: #fec96c; /* 强调文本颜色 */
  font-weight: bold;
}

.save-reminder {
  color: #d9534f; /* 保存提醒的红色 */
  font-weight: bold;
}

.mainSidebarGroupInnerRowFlex {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.mainSidebarGroupInnerColumnFlex {
  display: flex;
  flex-direction: column;
}

.mainSidebarGroup .sidebarBtmLine {
  height:1px;
  width: 100%;  
  border-width: 0;
  color: #f6f6f6;
  background-color: #f6f6f6;
  margin: 25px 3px 3px 3px;
}

.mainSidebarGroup .onlineNumber {
    color: #4274af;
}

.mainSidebarGroup .offlineNumber {
    color: #c6c9ce;
}

.mainSidebarGroup .dishCircle {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  margin: 3px 3px 3px 3px;
}

.mainMenuWindow {
  display: none;
  flex-direction: row;
  width: 3690px;
  height: 2620px;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 64px;
  position: relative;
  top: 120px;
  left: 0;
}

.mainMenuCentralPage {
  display: flex;
  flex-direction: column;
  width: 1210px;
  height: 984px;
  position: relative;
  top: 174px;
  left: 503px;
}

.centralPageAlarmWindow {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  margin: 4px 8px;
  background-color: white;
  border-radius: 14px;
  justify-content: space-between;
}

.centralPageAlarmWindowInner {
  position: relative;
  display: flex;
  font-family: "Quicksand", Helvetica;
  font-weight: 700;
  color: #4274af;
  font-size: 18px;
  letter-spacing: 0;
  padding: 16px 30px;
  align-content: center;
  line-height: normal;
}

.alarmBellInWindow {
  width: 18px;
  margin: 5px 20px;  
}

.centralPageAlarmWindowInner span {
  align-content: center;
}

#startPlannerButton,
#addDishInfoBtn,
#addOrderInfoBtn,
#addStaffInfoBtn {
  display: grid;
  width: 145px;
  height: 48px;
  margin: 0px 24px;
}

/*/////////////planner table//////////////////////////////////////////////*/
/* 表格样式 */
/* 表格淡入效果 */
/* 定义淡入动画 */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rowFadeIn {
  0% {
    opacity: 0;
    /* transform: translateY(-10px); 初始偏移 */
  }
  100% {
    opacity: 1;
    /* transform: translateY(0); 恢复到原位 */
  }
}

.staffCurTable {
  width: 100%;
  border-collapse: collapse;
  font-family: "Quicksand", Helvetica, Arial, sans-serif;
  font-weight: 700;
  border-radius: 5px;

  opacity: 0; /* 初始为透明 */
  transform: translateY(-10px); /* 初始向上偏移 */
  transition: opacity 3s ease, transform 3s ease; /* 过渡效果 */
  animation: fadeIn 3s ease-in-out forwards; /* 动画效果 */
}

/* 标题行样式 */
.staffCurTable th {
  padding: 8px;
  margin-top: 61px;
  padding-top: 24px;
  font-size: 16px;
  background-color: #fec96c;
  color: #38488f;
  text-align: center;
  font-weight: bold;
  transition: background-color 0.5s ease;
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
}


/* 设置表格列的宽度 */
.staffCurTable th:nth-child(1) {
  width: 5% !important;
}

.staffCurTable th:nth-child(2) {
  width: 15% !important;
}

.staffCurTable th:nth-child(3) {
  width: 25% !important;
}

.staffCurTable th:nth-child(4) {
  width: 25% !important;
}

.staffCurTable th:nth-child(5) {
  width: 15% !important;
}

.staffCurTable th:nth-child(6) {
  width: 15% !important;
}

/* 行内容样式 */
.staffCurTable td {
  padding: 15px 12px;
  font-size: 14px;
  word-wrap: break-word; /* 如果内容超出单元格宽度，自动换行 */
  word-break: break-all; /* 强制单词内断开，避免超出宽度 */
  white-space: normal; /* 确保文本能换行 */
  color: #38488f;  /* 文字颜色：白色 */

  text-align: center;  /* 文本居中 */
  font-weight: bold;  /* 文字加粗 */
  background-color: #fafafa;  /* 每个单元格背景色 */
  transition: background-color 0.5s ease;  /* 添加渐变效果 */
  opacity: 0; /* 初始为透明 */
  animation: fadeIn 1s ease-in-out forwards; /* 淡入效果 */
}
/* 表格行的淡入淡出动画 */
.staffCurTable tr {
  opacity: 0; /* 初始状态为透明 */
  animation: fadeIn 1s ease-in-out forwards; /* 动画效果 */
}
.staffCurTable.fadeOut {
  animation: fadeOut 1s ease-in-out forwards;
}


/* flex 状态的样式 */
.flex {
  background-color: #28a745;  /* 背景色：绿色 */
  color: white;
  font-weight: bold;
}

/* frozen 状态的样式 */
.frozen {
  background-color: #6c757d;  /* 背景色：灰色 */
  color: white;
  font-weight: bold;
}

/* 索引列样式 */
.staffCurTable td:nth-child(1) {
  text-align: left;  /* 索引列左对齐 */
  padding-left: 20px; /* 左侧留有空隙 */
}

/* 角色列和状态列样式 */
.staffCurTable td:nth-child(5),
.staffCurTable td:nth-child(6) {
  font-style: italic;  /* 让角色和状态列文字呈现斜体 */
  font-size: 14px;     /* 调整字体大小 */
}

/* 处理任务列内容 */
.staffCurTable td:nth-child(3),
.staffCurTable td:nth-child(4) {
  font-weight: 600;  /* 强调当前和下一个任务 */
}


/*//////////////////////////////////////////////////////////*/
.textDisplayArea {
  margin-top: 12px;
  left: 2% !important;
  /* display: flex; */
  flex-wrap: wrap !important;
  line-height: 1.2;
  width: 100%;
  overflow-y: auto;
}
.textSubmittedOrderItem{
  height: 42px;
  position: relative;
  left: 1% !important;
}
/* 设置 .textDishAndStaffItem 样式 */
.textSubmittedOrderItem,
.textDishAndStaffItem {
  color: #38488f;
  font-family: "Quicksand", Helvetica;
  font-weight: normal;
  text-align: center;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  user-select: none; /* 禁止文本选择 */

  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none; /* 标准 */

  margin-top: 5px;  /* 上边距调整为较小的值 */
  margin-bottom: 5px;  /* 下边距仍然保持5px */
  margin-left: 15px;   /* 左边距 */
  margin-right: 15px;  /* 右边距 *

  /* 去掉边框 */
  border: none;

  /* 去掉下拉框右侧的箭头 */
  -webkit-appearance: none; /* Safari */
  -moz-appearance: none; /* Firefox */
  appearance: none; /* 标准化去除默认的下拉箭头 */
  
  /* 自定义下拉框背景样式 */
  background-image: none;  /* 去掉默认背景图片 */
  
  /* 禁用焦点时的黑色边框 */
  outline: none;  /* 禁用点击后的边框 */
}

/* 调整 select 样式 */
.textSubmittedOrderItem select,
.textDishAndStaffItem select {
  width: 100%;  /* 设置宽度 */
  font-family: "Quicksand", Helvetica;
  font-size: 13px;  /* 设置字体大小 */
  font-weight: normal;
  background-color: #f0f0f0;
  padding: 10px;
  border: none;
  border-radius: 16px;
  appearance: none;
  cursor: pointer;
  color: #7c7979;
}

/* 修改 option 样式 */
.textSubmittedOrderItem option,
.textDishAndStaffItem option {
  font-family: "Quicksand", Helvetica;
  font-size: 10px;  /* 设置字体大小 */
  font-weight: normal;  /* 字体正常 */
  text-align: center !important;
  justify-content: center !important;
  color: #6c6b6b;  
  cursor: pointer;
  background-color: #f0f0f0; 
  padding: 0px;  /* 内边距 */
  transition: background-color 0.3s ease;  /* 背景颜色渐变 */
}

/* 鼠标悬浮时改变选项的背景颜色 */
.textSubmittedOrderItem option:hover,
.textDishAndStaffItem option:hover {
  cursor: pointer;
  background-color: #ebb2b2 !important;  /* 设置悬浮时的背景颜色 */
  color: #be5b5b !important;  /* 设置悬浮时的字体颜色 */
}

/* 禁用焦点时的黑色边框 */
.textSubmittedOrderItem select:focus,
.textDishAndStaffItem select:focus {
  outline: none; /* 去掉点击后的黑色边框 */
}

/* adddish/////////////////////////////////////////////////// */

/* Initial state of the addDishPage */
.addDishPage {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 20px; 
  box-sizing: border-box;  
  font-size: 20px;
  font-family: "Quicksand", Helvetica;
  font-weight: bold;
  color:#4274af;
  opacity: 0; 
  display: block !important;
  overflow-y: auto;
  visibility:hidden;
  border-radius: 1%;
  transform: translateY(-20px); /* Slightly offscreen to make the transition smoother */
  transition: opacity 1s ease, visibility 0s linear 1s, transform 1s ease;
}

.addDishPage.visible {
  opacity: 1; /* Make it fully visible */
  visibility: visible; /* Make it interactable */
  transform: translateY(0); /* Bring it into view */
  transition: opacity 1s ease, visibility 0s linear 0s, transform 0.5s ease;
}

.instructionText {
  font-size: 24px;        /* 字体大小 */
  text-align: center;    /* 居中对齐 */
  margin-bottom: 20px;   /* 和下方内容保持间距 */
  margin-top:20px;
}
.addDishHeader {
  justify-content: center; /* 水平居中对齐内容 */
  display: flex;                /* 使用 flexbox 布局 */
  align-items: center;          /* 垂直居中对齐元素 */
  width: 100%;                  /* 宽度为100% */
  height: 15%;
  top: 2%;
  padding: 10px;                /* 内边距，可以根据需要调整 */
  position: relative;           /* 使关闭按钮可以绝对定位 */
}
.addOrderHeader {
  justify-content: center; /* 水平居中对齐内容 */
  display: flex;                /* 使用 flexbox 布局 */
  align-items: center;          /* 垂直居中对齐元素 */
  width: 100%;                  /* 宽度为100% */
  top: 6%;
  gap: 30px;
  margin-bottom: 1px;
  position: relative;           /* 使关闭按钮可以绝对定位 */
}
.addTimestampHeader{
  justify-content: center; /* 水平居中对齐内容 */
  display: flex;                /* 使用 flexbox 布局 */
  align-items: center;          /* 垂直居中对齐元素 */
  width: 100%;                  /* 宽度为100% */
  top: 6%;
  position: relative;           /* 使关闭按钮可以绝对定位 */
}
.closeAddInfoPage {
  position: absolute;
  top: 3%;
  right:2%;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}

.closeAddInfoPage:hover {
  transform: scale(1.3); /* Slightly enlarge on hover */
}


.orderNameLabel,
.tableNumLabel,
.dishNameLabel,
.TimestampLabel {
  font-size: 18px; /* 标签的字体大小 */
  color: #d04b4b; /* 标签颜色为中性色 */
  font-weight: bold;
  text-transform: capitalize; /* 标签文本首字母大写 */
  letter-spacing: 1px; /* 字母间距略微增加，提升视觉效果 */
  padding-right: 10px; /* 标签和输入框之间留出些许空间 */
}
.orderInput,
.dishNameInput {
  height: 43px;
  padding: 12px 18px; /* 输入框内边距，增加空间感 */
  font-size: 16px; /* 输入框字体大小 */
  width: 250px; /* 稍微增加宽度，让输入框看起来更宽松 */
  border-radius: 30px; /* 更圆润的圆角 */
  border: 2px solid #d1d1d1; /* 细致的边框颜色 */
  font-family: "Quicksand", Helvetica, sans-serif; /* 简洁的字体 */
  color: #5d5b5b; /* 输入文字颜色 */
  font-weight: bold;
  text-align: center; /* 输入框文字居中 */
  z-index: 1111;
  background-color: #f9f9f9; /* 温和的背景色 */
  box-sizing: border-box; /* 确保边距不影响整体宽度 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}
.tableInput{
  width: 140px !important;
}
.orderInput:focus,
.dishNameInput:focus {
  border-color: #fec96c; /* 聚焦时边框颜色 */
  box-shadow: 0 0 8px rgba(254, 201, 108, 0.5); /* 轻微的光晕效果 */
  background-color: #fffbe6; /* 聚焦时背景变为浅黄色 */
  outline: none; /* 移除默认的outline */
  color: #333333; /* 聚焦时文字颜色加深 */
}
.orderInput{
  height: 40px;
  width: 200px;
}

#addMainTableContainer{
  max-height: 310px;
  left: 1%;
  overflow-y: auto;
  display: block;
}
#addRoleTableContainer{
  max-height: 250px;
  left: 1%;
  overflow-y: auto;
  display: block;
  margin-top: 10%;
}

.addOrderTableContainer{
  margin-top: 10%;
}
/* 公共样式 */
.addMainTable {
  width: 96%;
  margin-top: 13px;
  border-collapse: collapse;
  position: relative;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影，提升立体感 */
  background-color: #fff; /* 背景白色 */
  opacity: 0; /* 初始为透明 */
  transform: translateY(-10px); /* 初始向上偏移 */
  transition: opacity 1s ease, transform 1s ease; /* 过渡效果 */
  animation: fadeIn 1s ease-in-out forwards; /* 动画效果 */
  table-layout: fixed; /* 固定表格布局 */
}

/* 针对 addDishTable 的样式 */
.addDishTable {
  width: 96%; /* 保持公共样式中的宽度 */
}
.addOrderTable{
  width: 78%;
  left: 10%;
}
.addStaffTable {
  width: 60%; /* 修改宽度 */
  margin-top: 10%; /* 特殊边距 */
  left: 18%; /* 特定位置偏移 */
}

.addStaffTable th:nth-child(1), 
.addStaffTable td:nth-child(1) {
  width: 15% !important;  /* Step Num 列 */
}

.addStaffTable th:nth-child(2), 
.addStaffTable td:nth-child(2) {
  width: 20% !important; /* Task Name 列 */
}
.addStaffTable th:nth-child(3), 
.addStaffTable td:nth-child(3) {
  width: 65% !important; /* Task Name 列 */
}
.addOrderTable th:nth-child(1), 
.addOrderTable td:nth-child(1) {
  width: 16% !important;  
}
.addOrderTable th:nth-child(2), 
.addOrderTable td:nth-child(2) {
  width: 40% !important; 
}
.addOrderTable th:nth-child(3), 
.addOrderTable td:nth-child(3) {
  width: 8% !important; 
}

.addOrderTable th:nth-child(4), 
.addOrderTable td:nth-child(4) {
  width: 45% !important; 
}

.addRoleTable{
  width: 67%;
  left: 17%;
}

.addRoleTable th:nth-child(1), 
.addRoleTable td:nth-child(1) {
  width: 15% !important;  /* Step Num 列 */
}

.addRoleTable th:nth-child(2), 
.addRoleTable td:nth-child(2) {
  width: 20% !important; /* Task Name 列 */
}
.addRoleTable th:nth-child(3), 
.addRoleTable td:nth-child(3) {
  width: 65% !important; /* Task Name 列 */
}

.dishSelectForOrders {
  width: 100%;
  padding: 6px;
  border: 2px solid #d1d1d1; /* 细致的边框颜色 */
  font-family: "Quicksand", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;         /* 字体大小 */
  color: #4274af;          /* 字体颜色，使用十六进制颜色 */
}

/* 标题行的样式 */
.addOrderTable th,
.addMainTable th {
  background-color: #fec96c;  /* 标题行的颜色 */
  font-weight: bold;  /* 增加标题行的粗体效果 */
  padding: 12px 16px;  /* 增加间距，使标题行看起来更宽松 */
  color: #38488f; 
  justify-content: center;  /* 横向居中 */
  align-items: center;  /* 纵向居中 */
  font-size: 15px;  /* 调整字体大小 */
  text-transform: uppercase;  /* 字母大写 */
  letter-spacing: 1px;  /* 字母间距稍微增大 */
  transition: background-color 0.5s ease;  /* 添加渐变效果 */
  opacity: 0; /* 初始为透明 */
  animation: fadeIn 1s ease-in-out forwards; /* 淡入效果 */
}

/* 设置每一列的宽度 */
.addMainTable th:nth-child(1), 
.addMainTable td:nth-child(1) {
  width: 8%; /* Step Num 列 */
}

.addMainTable th:nth-child(2), 
.addMainTable td:nth-child(2) {
  width: 31%; /* Task Name 列 */
}

.addMainTable th:nth-child(3), 
.addMainTable td:nth-child(3) {
  width: 12%; /* Total Duration 列 */
}

.addDishTable th:nth-child(4), 
.addDishTable td:nth-child(4) {
  width: 12%; /* Work Duration 列 */
}

.addDishTable th:nth-child(5), 
.addDishTable td:nth-child(5) {
  width: 11%; /* Depending Task 列 */
}
.openModalSelectInfoBtn{
  padding: 8px;
  position: relative;
  font-weight: bold;
  font-size: 14px;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  text-align: center;
  cursor: pointer;
  font-family: "Quicksand", Helvetica, sans-serif;
  border: 1px solid #ccc;
  color: #d04b4b;
  background-color: #fafafa;
  transition: background-color 0.5s ease;
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

/* General modal styles */
.modalTaskSelectInfo,
.modalRoleSelectInfoOnDish,
.modalRoleSelectInfo {
  position: absolute;
  border-radius: 20px;
  top: 6%;
  display: block;
  left: 10%;
  width: 78%;
  height: 68%;
  background: rgb(31 92 162 / 82%); /* Semi-transparent blue background */
  opacity: 0;  /* Initially invisible */
  visibility: hidden;  /* Initially hidden */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: white;
  font-family: "Quicksand", Helvetica, sans-serif;
  font-weight: bold;
  transform: translateY(-20px); /* Slightly offscreen to make the transition smoother */
  transition: opacity 0.5s ease, visibility 0s linear 0.5s, transform 0.5s ease;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2); /* Larger, softer shadow for a floating effect */
}

/* When modal is visible */
.modalTaskSelectInfo.visible,
.modalRoleSelectInfoOnDish,
.modalRoleSelectInfo.visible {
  opacity: 1; /* Make it fully visible */
  visibility: visible; /* Make it interactable */
  transform: translateY(0); /* Bring it into view */
  transition: opacity 0.5s ease, visibility 0s linear 0s, transform 0.5s ease;
}


.infoList {
  width: 74%;
  border-radius: 35.5px;
  overflow: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 25px;
  max-height: 350px;
  overflow-y: auto;
  margin: 0 auto; /* Centers horizontally */
  margin-top: 15%; /* Adjust this value as needed */
}

/* 基础样式 */
.InfoRowTextCon, .InfoRowText_Con {
  display: flex;
  height: 10px;
  width: 100%;
  align-items: center;
  justify-content: start;
  margin-bottom: 10px;
  position: relative;
  border-radius: 10px;
  font-size: 19px;
  cursor: pointer;
  transition: all 0.5s ease, transform 0.5s ease;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.InfoRowText_Con{
  margin-bottom: 25px !important;
  font-size: 18px !important;
  left: 3% !important;
} 

/* 悬停效果 */
.InfoRowTextCon:hover, .InfoRowText_Con:hover {
  transform: scale(1.02); /* 微微放大 */
}


/* 图标样式 */
.selectIcon{
  width: 20px !important;
  margin-right: 10px;
  position: relative;
  font-size: 1em;
  display: block !important;
  height: 20px !important;
  background-size: cover;
  transition: all 0.4s ease;
  background-image: url('../img/checked-in.svg'); /* 更换图标 */
  transition: transform 0.7s ease, background-image 0.7s ease;
}
.select_Icon {
  width: 20px !important;
  margin-right: 10px;
  position: relative;
  font-size: 1em;
  display: block !important;
  height: 20px !important;
  transition: all 0.4s ease;
  background-image: url('../img/unchecked-in.svg');
}

.InfoRowText_Con.selected .select_Icon {
  transform: rotate(360deg); /* 添加旋转 */
  background-image: url('../img/checked-in.svg'); /* 更换图标 */
  background-size: cover;
  transition: transform 0.7s ease, background-image 0.7s ease;
}

.InfoRow{
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 10px;
  margin: 5px 0;
  position: relative;
  font-size: 19px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}


.lagTextInput {
  width: 45px;  /* Adjust the width of the input */
  margin-left: 5px;  /* Add some spacing between text and input */
  border-radius: 6px;
  border-color: #fff;  /* Default border color */
  color: #38488f;
  font-family: "Quicksand", Helvetica, sans-serif;
  font-weight: bold;
  transition: border-color 0.7s ease;  /* Smooth transition for border color */
}
.lagTextInput:focus {
  border-width: 2px; 
  outline: none;  /* Remove default outline */
}
.lagTextInput:hover {
  border-color: #e6efaf;  /* Change border color when hovering over the input */
}
.InfoRow_Text,
.InfoRowText {
  flex: 1;
  position: relative;
  font-size: 1em;
}

.alertInfoTitle{
  position: relative;
  display: none;
  color: red;
  font-size: 26px;
  padding: 10px;
  border-radius: 5px;
  margin-top: 71px;
}

#confirmInfoBtnOnDish,
#confirmInfoBtnOnStaff,
#confirmInfoButton {
  position: fixed;
  left: 49%;
  bottom: 7%;
  transform: translateX(-50%); /* 使按钮水平居中 */
}

.modalSelectInfoTitle{
  position: relative;
  font-size: 24px;  /* Adjust the font size */
  font-weight: bold;  /* Make the text bold */
  text-align: center;  /* Center the text */
  margin-bottom: 20px;  /* Add space below the heading */
  top: 10%;
}

.addDishTable th:nth-child(6), 
.addDishTable td:nth-child(6) {
  width: 12%; /* LAG 列 */
}

.addDishTable th:nth-child(7), 
.addDishTable td:nth-child(7) {
  width: 10%; /* Add Time 列 */
}
.addDishTable th:nth-child(8), 
.addDishTable td:nth-child(8) {
  width: 11%; /* Add Time 列 */
}
/* Ensure the container looks like an input field */
.selectChefTrackContainer {
  position: relative;
  width: 100%; /* Ensure it matches the cell width */
}

/* Style the dropdown input field to look like an input box */
.inputChefTrackField {
  width: 100%;
  padding: 8px;
  font-family: "Quicksand", Helvetica;
  font-weight: bold;
  color:#d04b4b;
  text-align: center;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  box-sizing: border-box;
}

/* Hover effect for the dropdown to indicate it's clickable */
.inputChefTrackField:hover {
  border-color: #fec96c;
}
/* Adjust the options within the dropdown */
.inputChefTrackField option {
  padding: 10px;
  color: #d04b4b;
  font-size: 10px;
  font-family: "Quicksand", Helvetica;
  text-align: left; /* 使选项内容居中 */
}

/* 表格行和单元格的样式 */
.addMainTable td {
  font-weight: bold;
  left: 1%;
  text-align: center;
  border-bottom: 1px solid #ddd;  /* 单元格底部边框 */
  font-size: 14px;  /* 调整字体大小 */
  color:#4274af; /* 文本颜色稍微柔和 */
  background-color: #fafafa;  /* 每个单元格背景色 */
  transition: background-color 0.5s ease;  /* 添加渐变效果 */
  opacity: 0; /* 初始为透明 */
  animation: fadeIn 1s ease-in-out forwards; /* 淡入效果 */
}

/* 表格行的淡入淡出动画 */
.addMainTable tr {
  opacity: 0;
  padding: 0 10px;
  animation: fadeIn 1s ease-in-out forwards;
}
.addMainTable.fadeOut {
  animation: fadeOut 1s ease-in-out forwards;
}
/* 表格行的样式 */
.addMainTable tbody tr {
  text-align: left; /* 设置标题行的文本左对齐 */
  padding: 0 12px !important; /* 为标题行单元格添加适当的内边距 */
  vertical-align: middle; /* 垂直居中对齐 */
}
/* 设置所有表格内的输入框统一样式 */
.addMainTable input[type="number"],
.addMainTable input[type="text"] {
    width: 100%;  /* 让输入框充满单元格 */
    padding: 8px;  /* 添加内边距，使输入框内容不至于太拥挤 */
    font-size: 14px;  /* 统一字体大小 */
    border: 1px solid #ccc;  /* 给输入框添加边框 */
    font-family: "Quicksand", Helvetica;
    font-weight: bold;
    color:#4274af;
    text-align: center;
    border-radius: 2px;  /* 圆角边框 */
    box-sizing: border-box;  /* 确保内边距不会影响输入框的宽度 */
    background-color: #fcfafa;  /* 背景色 */
    transition: border-color 0.3s ease;  /* 添加过渡效果 */
}

/* 聚焦时的效果 */
.addMainTable input[type="number"]:focus,
.addMainTable input[type="text"]:focus {
    border-color: #727070;  /* 聚焦时的边框颜色 */
    outline: none;  /* 去掉默认的蓝色轮廓 */
}

/* 可以根据需要为输入框设置不同的提示文字颜色 */
.addMainTable input[type="number"]::placeholder,
.addMainTable input[type="text"]::placeholder {
    color: #978f8f;  /* 更柔和的提示文字颜色 */
}


/* 垃圾桶图标样式 */
.deleteRowIcon {
  display: block; /* 默认隐藏图标 */
  position: relative;
  right: -12px; /* 图标在表格右侧 */
  cursor: pointer;
  top: 8px;
  z-index: 1000; /* 确保图标在顶部 */
  pointer-events: none; /* 不允许点击 */
  transition: opacity 0.3s ease; /* 平滑过渡效果 */
}

/* 垃圾桶图标的样式 */
.deleteRowIcon svg {
  width: 18px;
  height: 18px;
  stroke:#b7b4b4;
  transition: transform 1s ease; /* 平滑过渡效果 */
}
.addMainTable tr:hover .deleteRowIcon {
  opacity: 1;
  pointer-events: auto; /* 允许点击 */
  transition: opacity 0.3s ease;
}
/* 鼠标悬停时放大图标 */
.deleteRowIcon:hover svg {
  transform: scale(1.2); /* 放大至原始大小的 1.2 倍 */
}

.addRowBtn {
  border: 2px solid #f3f2e6;
  border-radius: 5px;
  padding: 4px 8px;
  cursor: pointer;
  position: absolute;
  left: 48%;
  transition: background-color 1s ease, color 1s ease;
}
.addRowOfOrderBtn{
  left: 50%;
}
.addRowOfStaffBtn{
  left: 48%;
}
.addRowBtn:hover {
  background-color: #f9d46e; /* 悬停时背景颜色 */
  transform: scale(1.2);
  transition: opacity 1s ease;
}
.orderBtnGroup {
  left: 43%;
  position: absolute;
  top: 20%;
  display: inline-flex;
}

#submitOrder {
  left: 47%;
  position: absolute;
  top: 63%;
  display: inline-flex;
}

#submitOrder:hover {
  background-color: #d04b4b; /* 鼠标悬停时按钮颜色 */
  color: #ffffff;
}

.orderBtnGroup button {
  width: 93px;
  height: 41px;
  left: 45%;
  padding: 0;
  position: absolute;
  text-align: center;
  font-size: 16px;
  border: none; /* 无边框 */
  border-radius: 5px; /* 圆角边框 */
  cursor: pointer; /* 鼠标指针变化 */
  transition: background-color 0.3s ease; /* 动画效果 */
}

.orderBtnGroup button:hover {
  background-color: #d04b4b; /* 鼠标悬停时按钮颜色 */
  color: #ffffff;
}

.orderBtnGroup button:focus {
  outline: none; /* 去掉按钮的聚焦框 */
}

#saveStaffInfoBtn,
#saveInfoBtn {
  bottom: 30%;
  width: 93px;
  height: 41px;
  left:557px;
  padding:0px;
  position: absolute;
}
#saveRoleInfoBtn{
  bottom: 7%;
  width: 93px;
  height: 41px;
  left:45%;
  padding:0px;
  position: absolute;
}

#inactiveInfoBtn{
  top: 20%;
  /* justify-items: center; */
  /* align-items: center; */
  position: absolute;
  right: 1%;
  border-radius: 15px;
  width: 107px;
  height: 45px;
  font-size: 10px;
}
#updateStaffInfoBtn,
#updateInfoBtn{
  bottom: 30%;
  width: 100px;
  height: 41px;
  font-size: 14px;
  left: 45%;
  padding:0px;
  position: absolute;
}

#updateInfoBtn {
  display: none;
}
#updateStaffInfoBtn:hover,
#updateInfoBtn:hover,
#saveStaffInfoBtn:hover,
#inactiveInfoBtn:hover,
#saveRoleInfoBtn:hover,
#confirmInfoBtnOnStaff:hover,
#confirmInfoBtnOnDish:hover,
#saveInfoBtn:hover {
  background-color: #d04b4b; /* 鼠标悬停时按钮颜色 */
  color: #ffffff;
}

/* 菜单的基本样式 */
.custom-context-menu {
  display: none;  /* 默认隐藏 */
  position: absolute;  /* 必须设置为绝对定位 */
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  z-index: 1000;  /* 确保菜单显示在其他内容之上 */
  width: auto; /* 根据内容自适应宽度 */
  padding: 10px;
  max-width: 300px; /* 可自定义最大宽度 */
}

.context-menu-item {
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;  /* 防止文本换行 */
}

.context-menu-item:hover {
  background-color: #f0f0f0;
}

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

.stopPlannerButtonCompound {
  position: relative;
  display: none;
  width: 129px;
  height: 46px;
  background-color: #e1292c;
  border-radius: 36px;
  box-shadow: inset 0px 0px 6px #0000001a;
}

.stopPlannerButtonCompound .rectangle {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 11px;
  left: 15px;
  background-color: #f6f6f6;
  border-radius: 19px;
}

#stopPlannerButton {
  position: absolute;
  width: 69px;
  height: 42px;
  top: 2px;
  left: 40px;
  font-family: "Quicksand", Helvetica;
  font-weight: 600;
  color: #f6f6f6;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  background-color: #e1292c;
}

.alarmWindowTimer {
  position: relative;
  display: flex;
  width: 175px;
  height: 46px;
  justify-content: center;
  font-family: "Quicksand", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 28px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  background-color: #38488f;
  border-radius: 36px;
  box-shadow: inset 0px 4px 4px #00000040;
}

.alarmWindowTimer span {
  align-content: center;
}

.mainMenuPage {
  width: 100%;
  height: 100%;
  margin: 4px 8px;
  background-color: white;
  border-radius: 14px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0; /* 默认透明 */
  overflow-x: scroll;
  transition: opacity 0.8s ease; /* 过渡效果 */
}

.mainMenuPage.active {
  opacity: 1; /* 激活状态不透明 */
}



.mainMenuPage.fade-out {
  opacity: 0; /* 隐藏时透明 */
  visibility: hidden; /* 设为不可见 */
  transition: opacity 0.5s ease, visibility 0s 0.5s; /* 过渡效果 */
}

.orderMainMenuPage,
.staffMainMenuPage {
  position: absolute;
  flex-direction: column;
  width: 1321px;
  height: 984px;
  top: 295px;
  left: 921px;
  background-color: red;
}

.mainMenuPageCentralBackgroundImage {
  align-items: center;
  justify-content: center;
}

.closeMainMenuPageCross {
  position: relative;
  width: 14px;
  top: 28px;
  left: 1259px;
}

.staff-result-page {
  display: flex;
  flex-direction: column;
  width: 1321px;
  height: 984px;
  align-items: flex-start;
  /*justify-content: center;*/
  gap: 15px;
  /*position: absolute;*/
  top: 0;
  left: 0;
}

.staff-frame-14 {
  position: relative;
  width: 1308px;
  height: 114px;
}

.staff-group-9 {
  position: relative;
  height: 114px;
  background-color: #ffffff;
  border-radius: 14px;
}

.staff-frame-15 {
  position: absolute;
  width: 756px;
  height: 25px;
  top: 43px;
  left: 66px;
}


.settingsFormBox {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 72px 48px 60px 54px;
  position: absolute;
  top: 128px;
  left: 131px;
  background-color: #4174af;
  border-radius: 12px;
  box-shadow: 0px 6px 12px #0000001f;
}

.settingsFormTitle {
  position: relative;
  width: fit-content;
  font-family: "Quicksand", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.settingsFormSubTitle {
  position: relative;
  width: fit-content;
  font-family: "Quicksand", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}


.settingsFormBody {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  padding: 36px 0px;
  position: relative;
  flex: 0 0 auto;
}

.expertModePanel {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  padding: 60px 0px 0px;
  position: relative;
  flex: 0 0 auto;
}

.smallFriedPorkColor {
    background: yellow;
}

.potatoeRoastedBeansColor {
    background: red;
}
.closeInfoPage,
.closeLoginPage {
  position: absolute;
  top: 3%;
  right: 3%;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;
  transition: color 0.3s ease, transform 0.3s ease;
}

.closeLoginPage:hover {
  transform: scale(1.3); /* Slightly enlarge on hover */
}


/****************** FROM THE OLD PAGE THE time based resultBar******************/
/******************** styling below ********************************************/
/* taskbar CSS grid styling */

.dishDisplay {
    display: grid;
    grid-template-columns: 300px repeat(36, 1fr);
    grid-template-rows: repeat(36, 1fr);
    min-width: 61.8%;
    margin-left: 0;
}

#singleDishGridDiv {
    display: grid;
    grid-template-columns: 500px repeat(20, 1fr);
    grid-template-rows: repeat(1, 1fr);
}

#dishDisplayDiv {
    overflow: auto;
    background-color: white;
    border: none;
    border-radius: 10px;
    padding: 16px 24px;
    margin: 24px auto;
    margin-left: 0;
    display: grid;
    grid-template-columns: 500px repeat(24, 64px);
    grid-template-rows: repeat(36, 36px);
    text-transform: uppercase;
    color: #384382;
    align-content: left;
    justify-content: left;
    align-items: center;
    justify-items: left;
    font-size: smaller;
}



.TaskBar {
    visibility: initial;
    display: inline-block;
    color: #384382;
    font-size: 12px;
    font-weight: bolder;
    text-transform: capitalize;
    background-color: #DEE3F3;
    /* border-left: 2px solid #384382; */
    border: 2px solid #fff;
    width: 100%;
    height: 14px;
    /* align-content: center;
    align-self: center;
    justify-self: center; */
    padding: 3px;
    margin: 6px;
    border-radius: 100px;
    /* border-bottom-right-radius: 6px; */
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: normal;
    text-align: center;
    overflow-x: hidden;
    cursor: pointer;
}

.TaskBar:hover {
    color: #f7f7f7;
    background-color: #384382;
    opacity: 0,9;
    z-index: 11;
    visibility: visible;
}

#singleDishGridDiv {
    margin-top: 24px;
    margin-bottom: 48px;
}

.solutionGridGrid {
    position: relative;
    top: 0px;
    left: 0px;
    display: grid;
    grid-template-columns: 100px repeat(200, 1fr);
    grid-template-rows: repeat(20, 1fr);
    margin: 0 0 16px 16px;
    background-color: #f7f7f7;
    padding: 0 24px 16px 16px;
    height: fit-content;
    border: none;
    border-radius: 6px;
    mix-blend-mode: multiply;
}

.solutionGridDarkBlend {
    position: absolute;
    top: 0px;
    left: 300px;
    display: block;
    width: 300px;
    height: 200px;
    background-color: grey;
    mix-blend-mode: multiply;
}

.solutionNewOrderRow {
    padding: 24px 24px 24px 24px;
    animation: opacityOn 8s normal forwards;
}

@keyframes opacityOn {
    0% {
	opacity: 1;
    }
    85% {
	opacity: 1;
    }
    100% {
	opacity: 0;
    }
}

.newOrderLabel {
    font-weight: bold;
    padding: 8px;
    margin: 8px;
}

.newOrderElement {
    border: 1.5px solid black;
    font-weight: bold;
    border-radius: 6px;
    padding: 8px;
    margin: 8px 8px 8px 8px;
    min-height: fit-content;
    position: relative;
    mix-blend-mode: multiply;
}

.rasterIndexY {
    width: 120px;
    /* text-overflow: ellipsis; */
    padding: 3px;
    text-overflow: clip;
    display: flex;
}


/*Different resultbar types*/
.resultBar {
    cursor: pointer;
    border: 1.5px solid #f7f7f7;
    border-radius: 6px;
    padding: 3px;
    min-height: fit-content;
    position: relative;
    mix-blend-mode: multiply;
}

.resultBar.frozen {
    border: 3px solid black;
}

.resultBar.blinkElement {
    animation: blink-animation 1s steps(5, start) infinte;
    -webkit-animation: blink-animation 1s steps(5,start) infinite;
}
@keyframes blink-animation {
    to {
	visibility: hidden;
    }
}
@-webkit-keyframes blink-animation {
    to {
	visibility: hidden;
    }
}






.resultBar:before {
  content: attr(data-taskname);
  visibility: hidden;
  opacity: 0;
  width: fit-content;
  text-align: center;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
  padding: 5px 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 1;
  left: 0;
  top: 110%;
  color: #384382;
  padding: 10px 16px 10px 16px;
  border: #384382 2px solid;
  font-size: 12px;
  background-color: hsla(0, 0%, 97%, 0.9);
  display: flex;
  position: absolute;
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1);
  text-transform: capitalize;
}

.resultBar:hover::before {
  opacity: 1;
  visibility: visible;
}


.resultBar.ready2serve {
    border: 2px solid #f7f7f7;
    text-align: center;
    text-justify: center;
}

.resultBar.ready2serve::after {
    content: "o";
    color: white;
}

.resultBar.ready2serve.frozen {
    border: 3px solid #000000;
    text-align: center;
    text-justify: center;
}
.resultBar.ready2serve.frozen::after {
    content: "o";
    color: #000000;
}

.rasterIndexX {
   
}
.rasterIndexY {

}

.legendElement {
    display: flex;
    flex-direction: row;
    margin-top: 6px;
}

.legendText {
    text-transform: capitalize;
}

.legendColorSquare {
    border: none;
    border-radius: 500px;
    padding: 6px;
    align-self: center;
    margin-left: 16px;
    margin-right: 6px;
}

/**/
/* 平台下载链接容器 */
.platform-links {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  justify-content: space-around; /* 项目之间均匀分布 */
  gap: 20px; /* 项目之间的间隔 */
  font-family: "Quicksand", Helvetica;
  font-size: 15px;
  font-weight: normal;
  margin: 20px 0; /* 顶部和底部的外边距 */
}

/* 每个下载项的样式 */
.platform-link {
  text-align: center; /* 居中文本 */
  text-decoration: none; /* 去除默认链接下划线 */
  color: #384382; /* 设置字体颜色 */
  width: 150px; /* 固定宽度 */
  padding: 15px;
  border-radius: 8px; /* 圆角效果 */
  border: 2px solid transparent; /* 默认没有边框 */
  transition: all 0.3s ease;
}

/* 图标的样式 */
.platform-link i {
  font-size: 4rem; /* 调整图标大小 */
  margin-bottom: 10px; /* 图标与文本之间的间隔 */
}

.platform-link .fa-laptop {
  transform: rotate(90deg); /* 将iPad图标旋转90度 */

}

/* 设置每个平台项的hover效果 */
.platform-link:hover {
  background-color: #eff1f2; /* 背景变蓝 */
  transform: scale(1.05); /* 放大效果 */
}


.platform-link[style*="pointer-events: none"]:hover {
  title: "This feature is under development"; /* 鼠标悬停显示提示 */
}

/* 模态框背景层 */
.selectWifiAndNameModal {
  position: absolute;  /* 定位到父元素内部 */
  font-family: "Quicksand", Helvetica;
  font-weight: bold;
  background-color: rgba(255, 255, 255);
  display: none;  /* 默认隐藏 */
  width: 100%;  /* 宽度设置 */
  height: 100%;
  border-radius: 36px;
  padding: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;  /* 确保在其他元素之上 */
  flex-direction: column;  /* 子元素竖直排列 */
  color: #4274af;  /* 设置字体颜色 */
  align-items: center;  /* 水平居中对齐子元素 */
  /* 动画相关 */
  opacity: 0; /* 初始不可见 */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 让模态框可见（渐进动画） */
.selectWifiAndNameModal.visible {
  opacity: 1;
}
/* 文字描述 */
.selectWifiAndNameModalText {
  font-size: 20px;
  top: 10%;
  position: relative;
  margin-bottom: 20px;
}

/* 标签与输入框组合容器 */
.selectWifiAndNameModalInputWrapper {
  position: relative;
  display: flex;
  align-items: center;
  top: 21%;
  margin-bottom: 25px;
  width: 66%;
}

/* 标签 */
.selectWifiAndNameModalLabel {
  font-size: 16px;
  width: 45%;  /* 标签宽度 */
}

/* 输入框样式 */
.selectWifiAndNameModalInput {
  width: 45%;  /* 输入框宽度 */
  padding: 10px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 20px;
  font-family: "Quicksand", Helvetica;
  font-weight: bold;
  text-align: center;  /* 输入框内容居中 */
}

/* 提交按钮样式 */
#submitWifiAndNameInfoBtn {
  position: relative;
  top: 32%;
}

/* 按钮悬停效果 */
#submitWifiAndNameInfoBtn:hover {
  background-color: rgb(208, 75, 75);
  color: #ffffff;
}