root {
  --color-primary: #03754a;
  --text-color: #333333;
  --text-color-2: #666666;
  --text-color-white: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1rem;
}

.bg-image-bkk {
  background-image: url("../images/bkk_map.png");
  background-size: contain;
  background-position: start;
  background-repeat: no-repeat;
  height: 10rem;
}

.list-style {
  list-style: none;
}

.flex {
  display: flex;
}

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

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

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

/* รูปแบบ ตัวอักษร */
.text-header {
  font-size: 25px;
  font-weight: normal;
}

.text-normal {
  font-size: 18px;
  font-weight: 400;
}

/* ขนาดตัวอักษร */
.text-xs {
  font-size: 12px;
}

.text-sm {
  font-size: 14px;
}

.text-md {
  font-size: 16px;
}

.text-lg {
  font-size: 18px;
}

.text-xl {
  font-size: 20px;
}

.text-22 {
  font-size: 22px;
}

.text-2xl {
  font-size: 24px;
}

/* ความหนาของตัวอักษร */
.bold {
  font-weight: bold;
}

.normal {
  font-weight: normal;
}

.medium {
  font-weight: 500;
}

.light {
  font-weight: 300;
}

.thin {
  font-weight: 100;
}

.regular {
  font-weight: 400;
}

.semi-bold {
  font-weight: 600;
}

/* สีตัวอักษร */
.text-color-m {
  color: #333333;
}

.text-color-w {
  color: #ffffff;
}

.text-color-2 {
  color: #666666;
}

.text-color-3 {
  color: #999999;
}

.text-color-main {
  color: #03754a;
}

/* ระยะห่าง Gap */
.gap-2 {
  gap: 8px;
}

.gap-4 {
  gap: 16px;
}

.gap-6 {
  gap: 24px;
}

.gap-7 {
  gap: 28px;
}

.line-h-1 {
  border-bottom: 1px solid #dddddd;
  margin: 10px 0;
}

.dice-none {
  list-style: none;
}

.tag-status {
  padding: 6px 2px;
  display: flex;
  color: #333333;
  align-items: center;
  border-radius: 4px;
  justify-content: center;
  line-height: 20px;
  width: 100%;
}

.status-o {
  width: 20px;
  height: 20px;
  display: grid;
  place-content: center;
  border-radius: 100%;
  background: white;
}

.status-blue {
  background-color: rgb(59, 204, 255);
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

.status-b-blue {
  border: 2px solid rgb(59, 204, 255);
}

.status-green {
  background-color: rgb(146, 208, 80);
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

.status-b-green {
  border: 2px solid rgb(146, 208, 80);
}

.status-yellow {
  background-color: rgb(255, 255, 0);
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

.status-b-yellow {
  border: 2px solid rgb(255, 255, 0);
}

.status-or {
  background-color: rgb(255, 162, 0);
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

.status-b-or {
  border: 2px solid rgb(255, 162, 0);
}

.status-red {
  background-color: rgb(240, 70, 70);
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

.status-b-red {
  border: 2px solid rgb(240, 70, 70);
}

.status-vary-good {
  background-color: rgb(59, 204, 255);
}

.status-good {
  background-color: rgb(146, 208, 80);
}

.status-normal {
  background-color: rgb(255, 255, 0);
}

.status-bad {
  background-color: rgb(255, 162, 0);
}

.status-vary-bad {
  background-color: rgb(240, 70, 70);
}

.input-style {
  height: 100%;
  border-radius: 4px;
  outline: none;
  flex-grow: 1;
  border: 1px solid #aaaaaa;
}

.select-style {
  height: 43px;
  width: 100%;
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  outline: none;
}

.bg-g-main {
  background: rgb(3, 117, 74);
  background: linear-gradient(90deg,
      rgba(3, 117, 74, 1) 0%,
      rgba(36, 167, 118, 1) 100%);
}

.bg-g-2 {
  background: rgb(5, 105, 66);
  background: linear-gradient(90deg,
      rgba(5, 105, 66, 1) 0%,
      rgba(4, 73, 105, 1) 100%);
}

@media (max-width: 575px) {
  .menumobile {
    width: 15rem;
    height: 100%;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1001;
  }

  .menumobile-list {
    li {
      padding: 10px 0;

      a {
        text-decoration: none;
        color: black;
        font-size: 16px;
        font-weight: 600;
      }

      a[active] {
        color: #03754a;
        position: relative;
      }

      a[active]::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 45%;
        height: 3px;
        background-color: #03754a;
      }
    }
  }
}