/* 自定义样式 */

.navbar {
  background-color: #7b7b7b;
  color: white;
  height: 80px;
  /* 调整为您希望的高度值 */
  position: relative;
  z-index: 1000;
}
.menu-col {
  margin-top: 20px;
  /* 调整为适当的间距值，以确保侧边栏不会覆盖导航栏 */
  position: relative;
  z-index: 900;
}
.accordion-button:not(.collapsed) {
  background-color: transparent;
}
.accordion-button::after {
  display: none;
}
.content {
  min-height: calc(100vh - 80px);
  /* 计算剩余可用高度 */
  padding: 20px;
  /* 添加内边距 */
  box-sizing: border-box;
  /* 确保内边距不增加元素的实际高度 */
}
.main-content-container {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
}
.dropdown-submenu {
  margin-left: 12px;
  margin-top: 5px;
  position: static;
}
.nested-dropdown-menu li {
  position: relative;
}
@media (min-width: 992px) {
  .dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
  }
  .dropdown-submenu {
    position: absolute;
  }
  .dropdown-submenu,
  .dropdown-submenu[data-bs-popper] {
    left: 100%;
    margin-left: 0;
    margin-top: 0;
    top: -7px;
  }
  .dropdown-submenu.show {
    display: none;
  }
}
.login-container {
  max-width: 400px;
  margin: 0 auto;
  margin-top: 150px;
}
.login-form {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
}
.login-form .form-group {
  margin-bottom: 20px;
}
.login-form label {
  font-weight: bold;
}
.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.login-form button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.login-form button:hover {
  background-color: #0056b3;
}
.ingredient-section {
  background-color: #efdded;
  border-radius: 10px;
  padding: 10px;
}
.step-section {
  background-color: #fefbda;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.flow-section {
  background-color: #fff4e5;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.make-section {
  background-color: #fde9e9;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

.step {
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  cursor: pointer;
}
.Greatstep {
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  cursor: pointer;
}
.with-ingredient {
  background-color: yellow;
}

.stacked-images {
  position: relative;
  width: 100% ;
}

.stacked-images img {
  position: absolute;
  top: 0;
  left: 35%;
  transform: translateY(0);
  z-index: 6;
}

.stacked-images img:nth-child(2) {
  transform: translateY(12%);
  z-index: 5;
}
.stacked-images img:nth-child(3) {
  transform: translateY(24%);
  z-index: 4;
}
.stacked-images img:nth-child(4) {
  transform: translateY(36%);
  z-index: 3;
}
.stacked-images img:nth-child(5) {
  transform: translateY(48%);
  z-index: 2;
}
.stacked-images img:nth-child(6) {
  transform: translateY(65%);
  z-index: 1;
}
.tooltip-content {
  display: none;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.operationstyle {
  background: #EAD1E7;
}
.inputstyle {
  background: lightblue;
}
.ifstyle {
  background: lightyellow;
}
.outputstyle {
  background: pink;
}
.forstyle {
  background: lightgreen; 
}
.cntstyle {
  background: rgb(224, 106, 224);
}
.tab-content{
  border: 1px solid #000000a0;
  border-radius: 5px;
  padding: 10px;
}
#step-indicator {
  border: 1px solid #000000a0;
  background: #f8f8f8;
  border-radius: 5px;
  padding: 10px;
}
.step-arrow {
  color: red;
  font-size: 15px;
  text-decoration: none;
}
.solo-step-arrow {
  color: red;
  font-size: 15px;
  text-decoration: none;
}

td {
  vertical-align: middle;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
.typingtext {
  white-space: nowrap;
  overflow: hidden;
  animation: typing 5s steps(50, end);
}


/* 自訂title提示框的樣式 */
.tooltipX {
  position: absolute;
  z-index: 1;
  background-color: #555;
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 14px;
  display: none; /* 預設隱藏 */
}

/* 滑鼠移到圖片時顯示提示框 */
.ingredient-item:hover .tooltipX {
  display: block;
}

/* 隱藏預設的title提示框 */
.ingredient-item img[title] {
  display: none;
}