@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;600&display=swap");
:root {
  --main: #3a5a40;
  --main-dark: #344e41;
  --red: #dc3545;
  --grey: #525353;
  --violet: #891ca1;
  --color: #fff;
  --bg: #000;
  --app-height: 100%; }

html,
body {
  font-size: 18px;
  font-family: "Noto Sans Thai", sans-serif; }

.text-muted {
  font-size: 0.8rem;
  padding-top: 0.15rem; }

.flatpickr-input[readonly] {
  background: #fff; }

.btn:focus {
  box-shadow: none;
  outline: none; }

.dt-buttons.btn-group {
  display: none; }

.btn-main {
  background: var(--main);
  color: var(--color);
  border: 2px solid var(--main); }

.btn-main-dash {
  background: #fff;
  color: var(--main);
  border: 2px dashed var(--main); }

.btn-main-dash:hover {
  background: var(--main);
  color: var(--color);
  border: 2px dashed #fff; }

.btn-main-dark {
  background: var(--main-dark);
  color: var(--color);
  border: 2px solid var(--main-dark); }

.btn-main:hover {
  background: none;
  color: var(--main); }

.btn-main-dark:hover {
  background: none;
  color: var(--main-dark); }

.dataTables_filter {
  display: none; }

.tableFixHead thead th {
  position: sticky !important;
  background-color: #fff;
  top: 0px;
  z-index: 1; }

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

i {
  margin-right: 7px; }

.form-control.danger,
.form-select.danger {
  border-color: var(--red);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); }

.form-check-input.danger {
  border-color: var(--red); }

.alert {
  display: none;
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 100; }

.alert.show {
  display: flex; }

.backoffice .login {
  height: 100vh; }
  .backoffice .login .box {
    width: 320px;
    border-radius: 10px; }
    .backoffice .login .box .header {
      color: var(--color);
      background: var(--main);
      padding: 1rem;
      text-align: center;
      font-size: 2rem; }
    .backoffice .login .box .form {
      padding: 1rem;
      background: #fff; }

.sidebar {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  background: var(--main);
  height: 100vh; }
  .sidebar .list-box {
    display: flex;
    flex-flow: column; }
    .sidebar .list-box .list {
      color: var(--color);
      padding: 0.5rem 1rem;
      border-top: 2px solid var(--main-dark);
      transition: 0.3s;
      text-transform: capitalize; }
    .sidebar .list-box .list:first-child {
      border: none; }
    .sidebar .list-box .list:hover,
    .sidebar .list-box .list.active {
      color: var(--main);
      background: #fff;
      transition: 0.3s; }

.menu-mobile {
  padding: 0;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  background: var(--main);
  height: auto; }
  .menu-mobile .header {
    padding: 0.75rem 1rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .menu-mobile .header .fas {
      cursor: pointer; }
  .menu-mobile .list-box {
    display: none;
    flex-flow: column; }
    .menu-mobile .list-box .list {
      color: #fff;
      padding: 0.5rem 1rem;
      border-top: 2px solid var(--main-dark);
      transition: 0.3s;
      text-transform: capitalize; }
    .menu-mobile .list-box .list:hover,
    .menu-mobile .list-box .list.active {
      color: var(--main);
      background: #fff;
      transition: 0.3s; }

.content {
  overflow: auto; }
  .content .back {
    color: var(--main); }
  .content .content-header {
    padding: 1rem; }
    .content .content-header .title {
      border-bottom: 2px solid #ccc;
      line-height: 2.75rem;
      display: flex;
      justify-content: space-between;
      text-transform: capitalize; }
      .content .content-header .title .btn-bar {
        margin-bottom: 0.25rem; }
    .content .content-header .tabs {
      font-weight: bold; }
      .content .content-header .tabs .line {
        margin-top: -2px;
        border-bottom: 2px solid #ccc; }
      .content .content-header .tabs .btn {
        color: #ccc;
        padding: 0.325rem 1rem;
        border: 0;
        border-bottom: 2px solid none;
        border-radius: 0;
        text-transform: capitalize; }
      .content .content-header .tabs .btn:hover,
      .content .content-header .tabs .btn.active {
        color: var(--main);
        border-bottom: 4px solid var(--main); }
    .content .content-header .form-underline {
      border-radius: 0;
      border: 0;
      border-bottom: 2px solid var(--main); }
    .content .content-header .form-underline:focus {
      box-shadow: none; }
    .content .content-header .search {
      position: relative; }
      .content .content-header .search .fa-solid {
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 10px; }
  .content .content-filter {
    padding-left: 1rem;
    padding-right: 1rem; }
    .content .content-filter .filter {
      display: flex;
      flex-flow: row;
      align-items: center; }
  .content .content-form {
    padding-left: 1rem;
    padding-right: 1rem;
    height: calc(100vh - 125px);
    overflow: auto; }
  .content .content-table {
    padding-left: 1rem;
    padding-right: 1rem;
    height: calc(100vh - 140px);
    overflow: auto;
    margin: 0.5rem auto; }
  .content .content-chart {
    padding-left: 1rem;
    padding-right: 1rem;
    height: calc(100vh - 160px);
    overflow: auto;
    margin: 0.5rem auto;
    padding-bottom: 2rem; }
    .content .content-chart .chart-render {
      height: calc(100vh - 300px); }
      .content .content-chart .chart-render .chart {
        margin-bottom: 1rem; }
    .content .content-chart .title {
      font-weight: 500;
      font-size: 1.2rem; }
    .content .content-chart .sub-title {
      font-size: 0.9rem; }
  .content .card-box .sub-title {
    font-size: 0.8rem; }
  .content .card-box .description {
    font-size: 0.8rem; }
  .content .img-thumbnail {
    background: #f2f2f2;
    max-height: 80px;
    width: auto; }

.copy {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: none; }
  .copy .box {
    display: flex;
    justify-content: center; }
  .copy .text {
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    padding: 0.5rem 1rem;
    background: var(--main);
    color: #000;
    display: block; }

@media (max-width: 576px) {
  .content .content-header {
    padding: 0.5rem 0; }
    .content .content-header .search {
      margin-top: 0.5rem; }
  .content .content-filter {
    padding-left: 0rem;
    padding-right: 0rem; }
  .content .content-form {
    padding-left: 0rem;
    padding-right: 0rem; }
  .content .content-table {
    padding-left: 0rem;
    padding-right: 0rem; }
  .card-box .sub-title {
    font-size: 0.8rem; }
  .card-box .description {
    font-size: 0.8rem; }
  .img-thumbnail {
    background: #f2f2f2;
    max-width: 300px;
    width: auto; } }