body {
  font-family: 'Sarabun', sans-serif;
}

.content-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #343a40;
  display: flex;
  justify-content: space-around;
  padding: 0;
  z-index: 1000;
}

.footer-menu a {
  color: white;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
  padding: 10px;
  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
  flex: 1;
  /* แบ่งพื้นที่ของแต่ละปุ่มให้เท่ากัน */
  padding: 10px 0;
  /* เพิ่มพื้นที่ภายในปุ่ม */
}

.footer-menu a:active {
  transform: scale(0.9);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}

.footer-menu a.active {
  background-color: #495057;
  /* เปลี่ยนพื้นหลังเมื่อปุ่มถูกเลือก */
  color: #ffffff;
  /* สีตัวอักษร */
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
  /* เอฟเฟกต์กด */
  transform: scale(0.95);
  /* ย่อขนาดเล็กลงเล็กน้อย */
}

.toggle {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 320px;
  height: 110px;
  color: white;
  outline: 0;
  text-decoration: none;
  border-radius: 6px;
  border: 2px solid #546E7A;
  background-color: #263238;
  transition: all 500ms;

  &:active {
    background-color: darken(#263238, 5%);
  }

  &:hover:not(.toggle--moving) {
    &:after {
      background-color: #455A64;
    }
  }

  &:after {
    display: block;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    line-height: 95px;
    text-align: center;
    text-transform: uppercase;
    font-size: 50px;
    color: white;
    background-color: #37474F;
    border: 2px solid;
    transition: all 500ms;
  }
}

.toggle--on {
  &:after {
    content: 'เปิด';
    /*border-radius: 5px 50px 50px 5px;*/
    border-radius: 6px;
    transform: translate(100%, 0);
    color: #66BB6A;
  }
}

.toggle--off {
  &:after {
    content: 'ปิด';
    /*border-radius: 50px 5px 5px 50px;*/
    border-radius: 6px;
    color: #f44336;
  }
}

.toggle--moving {
  background-color: darken(#263238, 5%);

  &:after {
    color: transparent;
    border-color: darken(#546E7A, 8%);
    background-color: darken(#37474F, 10%);
    transition: color 0s,
      transform 500ms,
      border-radius 500ms,
      background-color 500ms;
  }
}

.content-wrapper {
  background-image: radial-gradient(lighten(#263238, 20%), #263238);
}

.plug-icon {
  font-size: 38px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.switch-shadow {
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.hour-box {
	width: 100%;
	height: 45px;
	background-color: #f0f0f0;
	border: 1px solid #ddd;
	/* display: flex; */
	/* justify-content: center; */
	/* align-items: center; */
	margin: 0;
	/* text-align: center; */
	cursor: pointer;
	transition: all 0.3s ease;
	user-select: none;
  position: relative;
}

.hour-box:active, .small-box:active {
  transform: scale(0.97);
  box-shadow: inset 0 3px 5px rgba(70, 69, 69, 0.2);
}

.hour-box-active {
  background-color: #09c45d;
  border: 1px solid #006421;
}
.small-box {
  margin-bottom: 15px !important;
}

.bottom-aligned-p {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0;
}