/* CSS Styles for Navigation Menu */
* {
  font-family: "Neue Hans Kendrick";
  font-weight: 400;
}
h1 {
  font-size: clamp(30px, 2vw, 60px);
  font-weight: 800;
  margin-top: 0;
}
h2 {
  font-size: clamp(30px, 2vw, 40px);
  font-weight: 800;
  margin-top: 0;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
a:hover {
  color: #141100;
}
nav ul li {
  display: inline;
}
nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

body {
  margin: 0;
}
/* LOGIN */
.login_page {
  overflow: hidden;
}
div#product-table_wrapper {
  width: 100%;
  display: block;
}
.login_body {
  display: grid;
  grid-template-columns: 50% 50%;
  height: 100dvh;

  align-items: center;
  background-image: url("../img/bg.svg");
  background-size: 100% 100%;
}
.login_right_div {
  height: calc(100% - 128px);
  margin: 64px 0;
  background-color: #fffceb;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding-left: 64px;
}
img.login_logo {
  max-width: 450px;
}
.login_logo_div {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-right: 50px;
}
.login_right_div {
  height: calc(100% - 128px);
  margin: 64px 0;
  background-color: #fffceb;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding-left: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: -4px 2px 21px 3px rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: -4px 2px 21px 3px rgba(0, 0, 0, 0.19);
  -moz-box-shadow: -4px 2px 21px 3px rgba(0, 0, 0, 0.19);
}
.login_section.login_section_right {
  height: 100dvh;
}
.login_input_div {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin-bottom: 20px;
}
.login_input_div label {
  font-size: clamp(22px, 2vw, 16px);
  margin-bottom: 10px;
}
.login_input_div input {
  padding: 10px 20px;
  min-height: 30px;
  border: 1px solid #00000024;
  border-radius: 20px;
  font-size: 20px;
  line-height: 22px;
  color: #000;
}
.login_input_div input:focus,
.login_input_div input:focus-visible,
.login_input_div input:visited,
.login_input_div input:active,
.login_input_div input:focus-within,
.login_input_div input:target {
  border: 1px solid #00000024 !important;
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.19);
}
.login_input_div input:placeholder {
  font-size: 20px;
  line-height: 22px;
  color: #000;
  opacity: 1;
}
button.login_button {
  max-width: 400px;
  width: 100%;
  border: 0;
  border-radius: 20px;
  padding: 15px 20px;
  font-size: 22px;
  font-weight: 800;
  background-color: #ffef85;
}
button.login_button:hover {
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.19);
  cursor: pointer;
}
/* LOGIN */
/* HEADER */

.site_conent {
  margin-left: 220px;
  padding: 50px;
  background-color: #fffceb;
  min-height: calc(100dvh - 100px);
}
header.site_header {
  position: fixed;
  height: calc(100dvh - 100px);
  width: 200px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.22);
  -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.22);
  -moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.22);
  background-color: #fffceb;
  padding: 0px 10px;
  padding-bottom: 100px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  border: 1px solid #0000001f;
}

img.site_logo {
  width: 100%;
  max-width: 150px;
}
.site_logo_div {
  width: 100%;
  margin-top: 25px;
  margin-bottom: 75px;
}
.header_top {
  display: flex;
}
nav.site_navigation ul {
  display: flex;
  flex-direction: column;
}
.logout_div {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-direction: column;
  width: calc(100% - 60px);
}
.logout_div a {
  background-color: #ffef85;
  width: calc(100% - 60px);
  border-radius: 20px;
  text-decoration: none;
  /* width: 100%; */
  display: flex;
  align-items: center;
  padding: 10px 20px;
  gap: 10px;
}
.header_info_div div {
  font-size: 12px;
}
.logout_div span {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  margin-bottom: 0;
  padding-bottom: 0;
  cursor: pointer;
}
.logout_div a:hover {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
nav.site_navigation li a {
  display: flex;
  align-items: center;
  padding: 20px 15px;
  border-bottom: 1px solid #00000038;
  gap: 15px;
}
nav.site_navigation li a svg {
  font-size: 12px !important;
  width: 20px;
}
/* nav.site_navigation ul {
  padding: 0 10px;
} */
nav.site_navigation li a:hover {
  background-color: #fff6b8;
  /* color: #fff; */
}
nav.site_navigation li a:hover path {
  /* fill: #fff; */
}
/* HEADER */

.form_field {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.form_div {
  max-width: 600px;
}
.form_field label {
  font-size: 16px;
  margin-bottom: 10px;
  padding-left: 10px;
}
.form_field input,
.form_field select {
  padding: 12px 15px;
  border-radius: 20px;
  border: 1px solid #00000014;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  max-width: 600px;
}
/* select#category_update,
input#new_category_name,
select#category_delete {
  padding: 12px 15px;
  border-radius: 20px;
  border: 1px solid #00000014;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  max-width: 200px;
  width: 100%;
} */
.button,
button {
  background-color: #ffef85;
  border-radius: 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 10px 40px;
  font-weight: 800;
  gap: 10px;
  border: 0;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
}
.button:hover {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.form_footer {
  margin-top: 40px;
}
form.update_category label {
  font-size: 16px;
  margin-top: 40px;
}
form.update_category button,
form.delete_category button {
  margin-top: 20px;
  max-width: 200px;
  width: 100%;
}
form.update_category label:first-child {
  margin-top: 0;
}
h2.sub_title {
  margin-bottom: 20px;
  margin-top: 48px;
  font-size: clamp(30px, 2vw, 22px);
}
.form_div.div_1200 {
  max-width: 1200px;
}
form.delete_category label {
  font-size: 16px;
}
/* form.delete_category {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
} */
select#dt-length-0 {
  border-radius: 20px;
  min-width: 48px;
  padding: 10px;
}
input#dt-search-0 {
  border-radius: 20px;
  padding: 13px;
  max-width: 400px;
  width: 100%;
}
a.button.button_tabel {
  max-width: 100px;
  color: #000;
  width: 100%;
}
td.button_tabel_div {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: center;
}
.manage_users_div a {
  max-width: 150px;
  margin-top: 50px;
  margin-bottom: 50px;
  color: #000;
}
table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: center;
}

table.dataTable tr td {
  border-top: 1px solid #00000014 !important;
}
table.dataTable tr:first-child td {
  border: 0 !important;
}


.mobile_toggle_bttn_div {
  display: none;
}
@media (max-width: 1150px) {
    .dt-search {
  display: flex;
  align-content: center;
  align-items: center;
}
  div.dt-container div.dt-layout-row.dt-layout-table {
    display: block;
    overflow: scroll;
  }
  .dt-container .dt-length,
  .dt-container .dt-search {
    float: none;
    text-align: left;
  }
  .header_info_div div {
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
  }
  .login_right_div {
    margin-top: 40px;
    height: 100%;
    margin-bottom: 0;
    padding: 60px 20px;
  }
  .login_left_div img {
    max-width: 239px;
  }
  .login_section.login_section_right {
    height: auto;
  }
  .login_body {
    grid-template-columns: 1fr;
    height: auto;
  }
  .login_right_div {
    margin-top: 40px;
  }
  .login_left_div {
    margin-top: 40px;
  }
  .login_page {
    overflow: unset;
  }
  .mobile_toggle_bttn_div {
    display: block;
    position: absolute;
    right: -30px;
    top: 25px;
    background-color: #fffceb;
    padding: 11px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.22);
    -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.22);
  }
  img.menu_open {
    display: block;
  }
  img.menu_close {
    display: none;
  }
  .open_menu img.menu_close {
    display: block;
  }
  .open_menu img.menu_open {
    display: none;
  }
  header.site_header.open_menu,
  .open_menu nav.site_navigation {
    width: 220px;
    background-color: #fffceb;
    z-index: 999;
  }
  .site_conent {
    margin-left: 20px;
    padding: 50px 30px;
  }
  header.site_header,
  nav.site_navigation {
    width: 1px;
  }
  .open_menu nav.site_navigation,
  .open_menu .logout_div {
    display: block;
  }
  nav.site_navigation,
  .logout_div {
    display: none;
  }
}