@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Code+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Koh+Santepheap&family=Open+Sans&display=swap');

body {
  margin: 0;
}

.instruction {
  font-family: 'Koh Santepheap', cursive;
  font-size: larger;
  line-height: 35px;
}

.highlight {
  color: red;
}

.web_title {
  display: inline-table;
  position: relative;
  font-family: 'Bebas Neue', cursive;
  font-family: 'Source Code Pro', monospace;
  font-size: x-large;
  font-weight: 800;
  text-decoration: underline #3949ab 3px;
  z-index: 2;
  overflow: hidden;
  cursor: default;
}

.web_title:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: rgba(255, 200, 0, 5);
  transition: all 250ms ease-out;
}

.highlight_container:hover .web_title:before {
  left: 0;
}

table {
  text-align: center;
}

.daily_production_table {
  width: 90%;
}

.inventory_table {
  margin: auto;
}

.popup_table {
  text-align: center;
  margin: auto;
}

.popup_table input[type='text'],
.popup_table input[type='number'],
.input_user {
  width: 70px;
  background-color: lightgray;
  border: 1px solid black;
}

.popup_table input[type='text'].wide {
  width: 300px;
}

.eslin_logo {
  width: 100%;
  border: 3px solid white;
}

.container {
  width: 100%;
  /* height: 100vh; */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
}

.container.login-body::after {
  width: 100%;
  height: 100%;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: url('../assets/login_background.jpg') no-repeat bottom
      center/cover,
    rgba(0, 0, 0, 0.5);
  background-blend-mode: multiply;
  filter: blur(3.5px);
  zoom: 1.2;
  opacity: 0.8;
  z-index: -2;
}

.container.center {
  align-items: center;
  height: 40%;
  margin: auto 0;
}

.container.login {
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-field {
  background-color: white;
}

.legend_title {
  background-color: white;
  border-radius: 3px;
  border: 1.5px solid gray;
}

.container.center::after {
  width: 100%;
  height: 50%;
  content: '';
  position: absolute;
  top: 25%;
  left: 0;
  background: url('../assets/login_background.jpg') no-repeat bottom
      center/cover,
    rgba(0, 0, 0, 0);
  background-blend-mode: multiply;
  opacity: 0.8;
  z-index: -1;
}

.table_sticky_header {
  background-color: white;
  position: sticky;
  top: 0;
}

.table_sticky_header.colspan {
  top: 25px;
}

iframe {
  width: 100%;
  height: 83vh;
  margin-top: 50px;
  border: 2px solid #f5f5f5;
}

textarea[name='Event_title'],
textarea[name='Memo'] {
  height: 100px;
}

/*menu bar*/

.header {
  margin-top: 30px;
  display: flex;
}

.header_info {
  width: 50%;
}

.attached_shipping_file {
  width: 50%;
}

.attached_shipping_file_filedset {
  border-width: 3px;
}

.attached_shipping_file_legend {
  font-weight: bolder;
}

.main {
  width: 82%;
  height: 100vh;
  margin-left: 17%;
}

.menu {
  position: fixed;
  width: 15%;
  height: 100vh;
  background-color: rgb(26, 30, 71);
  z-index: 100;
  overflow-y: scroll;
  overscroll-behavior: contain;
}

.menu::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  background-color: rgb(26, 30, 71);
}

.menu::-webkit-scrollbar-corner {
  /* custom corner section at right bottom */
  background-color: rgb(26, 30, 71);
}

.menu::-webkit-scrollbar-thumb {
  /* custom scroll bar */
  border-radius: 10px;
  background-color: #faeee0;
}

.menu a {
  color: white;
}

.menu-group {
  margin: 20px;
  color: white;
}

.group-list {
  list-style-type: '└ ';
}

.menu-group .group-title {
  font-size: x-large;
  font-weight: bolder;
}

.menu-title:hover {
  background-color: rgba(246, 255, 0, 0.4);
}

.color_explanation {
  width: fit-content;
  margin-top: 10px;
  border: 1px solid rgb(167, 167, 167);
  border-radius: 2px;
  display: flex;
}

/*file*/

.file {
  background-color: silver;
}

.download_box {
  margin-top: 30px;
}

.shipping_file_ol {
  padding: 0;
}

.shipping_file_container {
  display: flex;
  flex-flow: row;
}

.shipping_file_container::before {
  content: '•';
  padding: 4px 5px 0 5px;
}

.shipping_file {
  display: inline-block;
  margin: 5px auto 0 0;
}

.delete_file_container {
  margin-bottom: auto;
}

.delete_file {
  padding: 5px 35px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.delete_file:hover {
  padding: 3px 33px;
  background-color: lightgray;
  border: 2px solid darkgray;
  border-radius: 3px;
}

/*open & close & lock & unlock etc.*/

.open,
.close,
.lock,
.unlock,
.total {
  font-weight: bolder;
}

.open,
.close {
  font-size: larger;
}

.open {
  background-color: #8bc34a;
}

.close {
  background-color: #f44336;
}

.lock {
  background-color: lightyellow;
}

.unlock {
  background-color: silver;
}

.same_as_makeqty {
  background-color: #ef9a9a;
}

.more_than_makeqty {
  background-color: #d1c4e9;
}

.minus {
  background-color: #ef9a9a;
}

.printed {
  background-color: #ffe4bc;
}

.schedule_highlight,
.schedule_shipping,
.schedule_receiving,
.schedule_closed {
  color: white;
}

.schedule_highlight {
  background-color: #d10000;
}

.schedule_shipping {
  background-color: #0027c2;
}

.schedule_receiving {
  background-color: #009e53;
}

.schedule_closed {
  background-color: rgb(5, 5, 5);
}

/*form*/

.select_box {
  display: inline-block;
  margin: 5px;
}

.input_small_width {
  width: 50px;
}

.input_max_width {
  width: -webkit-fill-available;
  background-color: rgb(240, 240, 240);
  text-align: center;
}

.td_Bg_color {
  line-height: 35px;
  width: 100px;
}

/*btn*/

.add_popup_btn {
  padding: 10px 10px;
}

.checkbox {
  zoom: 1.3;
}

.login_btn {
  width: 100%;
  height: 30px;
}

/*user*/

.main_title {
  margin: 15px 0;
}

.user {
  color: rgb(42, 47, 145);
  text-decoration: underline 2px rgb(42, 47, 145);
  font-weight: 600;
}

.expire_time {
  color: #ff389b;
  font-weight: 600;
}

/* winding, cutting, packaging */

.winding {
  background-color: #c5cae9;
}

.cutting {
  background-color: #f0f4c3;
}

.packaging {
  background-color: #ffcdd2;
}

/* modifying item list */

.input-item-list-ti {
  width: 350px;
  font-size: large;
}

.input-item-list-td {
  width: 450px;
  font-size: large;
}

.input-item-list-f {
  width: 65px;
}