@keyframes animated_in {
  0% {
    left: 100vw !important;
  }
  100% {
    left: 0 !important;
  }
}

@keyframes animated_out {
  0% {
    left: 0 !important;
  }
  100% {
    left: -100vw !important;
  }
}

:root {
  --gap_size: 8px;
}

body {
  font-family: "Anuphan", sans-serif;
  padding: 0;
  margin: 0;
}

input, select, textarea {
  font-family: "Anuphan", sans-serif;
}

.material-symbols-outlined {
  color: var(--white_color);
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: var(--h4_size);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

.hidden {
  content-visibility: hidden !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  visibility: hidden !important;
}

.section {
  margin: calc(var(--gap_size)*2) auto;
  width: 90vw;
}

.sub {
  width: 100%;
}

.table {
  width: 100%;
  border-collapse: collapse;
  /* white-space: nowrap; */
  table-layout: fixed;
}

.table_head {
  padding: var(--gap_size);
  border: solid 1px black;
}

.table_body {
  padding: var(--gap_size);
  border: solid 1px black;
}

@media screen and (min-width: 576px) {

}

@media screen and (min-width: 768px) {
  
}

@media screen and (min-width: 992px) {

}

@media screen and (min-width: 1200px) {
  
}