/*
    Stylesheet Mango.css
    version 1.0
    for ERP : Enterprise Resource Planning
*/

@charset "UTF-8";

:root {
  --bs-font-inter: 'Inter', 'Sarabun', sans-serif !important;
  --bs-font-manrope: 'Manrope', 'Sarabun', sans-serif !important;
  --bs-font-table: 'Manrope', 'Sarabun', sans-serif !important;
  --bs-font-option: 'Sarabun', sans-serif !important;
}

body, html {
  font-family: var(--bs-font-manrope);
  font-size: 13.5px;
  color: #000000 !important;
  font-feature-settings: 'tnum';
  -webkit-font-feature-settings: 'tnum';
  -moz-font-feature-settings: 'tnum';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-default {
  font-family: var(--bs-font-inter) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0rem;
}

.font-extra {
  font-family: var(--bs-font-manrope) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0rem;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-font-inter);
  font-weight: 400
}

p {
  font-family: var(--bs-font-inter)
}

.main-header {
  height: 50px !important;
  max-height: 50px !important
}

  .main-header .sidebar-toggle {
    font-family: fontAwesome, var(--bs-font-inter);
  }

    .main-header .sidebar-toggle.fa5 {
      font-family: "Font Awesome\ 5 Free", var(--bs-font-inter);
    }

  .main-header .logo {
    font-family: var(--bs-font-inter);
  }

.nav-font-color {
  color: #00707E;
  font-family: var(--bs-font-inter) !important;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 1
}

.jconfirm {
  font-family: var(--bs-font-inter) !important
}

.padding-detail {
  padding: 0px 10px
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
  border-top: 1px solid #dde2eb
}

b, strong {
  font-weight: 600 !important
}

.text-bold {
  font-weight: 600 !important
}

.extra-bold {
  font-weight: 600 !important
}

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  font-family: var(--bs-font-inter)
}

label {
  color: #000000 !important;
  font-family: var(--bs-font-manrope);
  font-weight: 500;
  white-space: nowrap;
  font-feature-settings: 'tnum';
  -webkit-font-feature-settings: 'tnum';
  -moz-font-feature-settings: 'tnum';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.content {
  padding: 5px !important;
}

.content-body {
  overflow-x: hidden;
  overflow-y: auto;
}

.content-overflow {
  overflow-x: hidden;
  overflow-y: auto;
}

.pointer {
  cursor: pointer;
}

  .pointer:hover {
    opacity: 0.8;
    transition: 0.2s;
  }

.form-group {
  margin-bottom: 8px !important;
}

.form-control {
  font-family: var(--bs-font-manrope);
  font-size: 13.5px;
  font-weight: 400;
  color: #121724;
  border: 1px solid #e4e6ef;
  border-radius: 5px;
}

  .form-control:focus {
    border-color: #b5b5c3 !important;
  }

select.form-control {
  font-family: var(--bs-font-manrope);
  font-weight: 400;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url('Images/Icon PNG/Arrow-Down.png') no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap
}

  select.form-control.input-sm {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-indent: 2px !important;
    line-height: 30px !important
  }

select > option {
  font-family: 'Segoe UI', 'Sarabun', sans-serif;
  font-feature-settings: 'tnum' !important;
  -webkit-font-feature-settings: 'tnum' !important;
  -moz-font-feature-settings: 'tnum' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.form-control-black {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: .25rem;
  border-color: #d2d6de;
  background-image: none;
  color: #525252;
  font-family: var(--bs-font-manrope);
  font-size: 13.5px;
  box-shadow: none;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  vertical-align: middle;
}

  .form-control-black:focus {
    border-color: #3c4252;
    box-shadow: 0 1px 20px 0 rgba(69,90,100,0.08)
  }

select.form-control-black {
  font-family: var(--bs-font-manrope);
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  background: #fff url('../Images/Image/Arrow-Down-White.png') no-repeat;
  background-position: right 5px center;
  background-size: 20px;
  line-height: 1.9;
  text-indent: 1px;
}

input.input-sm {
  line-height: 30px !important
}

textarea.form-control {
  line-height: 1.4 !important;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  background-color: #F3F3F3;
}

.form-control-black[disabled], .form-control-black[readonly], fieldset[disabled] .form-control-black {
  background-color: #F3F3F3;
}

.text-middle {
  vertical-align: middle !important;
}

.text-underline-hover:hover {
  cursor: pointer !important;
  text-decoration: underline
}

.no-copy {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.extension-left {
  width: 100%;
  margin: 10px 0 20px;
  border-bottom: 1px solid #000;
  line-height: 0.1em;
  text-align: left;
}

  .extension-left span {
    padding: 0 10px;
    padding: 0 10px;
    background-color: white;
  }

.treeview-menu > li > a {
  font-size: 13.5px !important;
}

.pagination {
  user-select: none;
  margin: 0 !important;
  font-family: var(--bs-font-inter)
}

  .pagination > li > a, .pagination > li > span {
    margin-right: 3px;
    border: 0 !important;
    background-color: #fff !important
  }

  .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    border-radius: .475rem;
    border-color: #273c75 !important;
    background-color: #273c75 !important;
  }

.pagination-sm > li > a, .pagination-sm > li > span {
  font-size: 13.5px
}

.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
  border-radius: .475rem;
  background-color: #eee !important;
}

.header-progress-container {
  width: auto;
  padding: 30px 10px 0;
  border-radius: 10px;
  background-color: white;
}

.header-progress-list {
  padding: 0;
  list-style-type: none;
}

.header-progress-item {
  display: inline-block;
  position: relative;
  width: 135px;
  line-height: 3em;
  text-align: center;
}

  .header-progress-item:after {
    display: block;
    position: absolute;
    top: -2px;
    left: -65px;
    width: 135px;
    height: 4px;
    background-color: darkgreen;
    content: "";
    z-index: 1;
  }

  .header-progress-item:before {
    position: absolute;
    top: -10px;
    left: 58px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 1.2em;
    background-color: darkgreen;
    line-height: 1.2em;
    content: " ";
    z-index: 2;
  }

  .header-progress-item:first-child:after {
    display: none;
  }

  .header-progress-item.todo {
    color: #DDDADD;
  }

    .header-progress-item.todo:after {
      background: #F1F1F1;
    }

    .header-progress-item.todo:before {
      background-color: #DADADA;
    }

.mx-calendar {
  font-family: var(--bs-font-inter) !important;
}

.mx-datepicker {
  font-family: inherit !important;
}

  .mx-datepicker.disabled {
    opacity: unset !important;
  }

.mx-table-date .today {
  color: #ff0000 !important;
}

.mx-table > thead > tr > th {
  background-color: #fff !important;
  color: #3f4254 !important
}

.mx-calendar-content .cell.active {
  display: table-cell !important;
  color: #fff !important
}

.control-sidebar-heading {
  font-size: 13.5px !important;
}

.dropdown-menu {
  border-radius: .475rem;
  background-color: #FFF;
  font-size: 13.5px;
  box-shadow: 0 0 50px 0 rgb(82 63 105 / 15%);
}

  .dropdown-menu > li > a {
    color: #17202A !important
  }

.radio label, .checkbox label {
  padding-left: 10px;
  font-family: var(--bs-font-inter)
}

.radio, .checkbox {
  margin-top: unset;
  margin-bottom: unset;
  padding-left: unset;
}

.bglogin {
  background-repeat: no-repeat;
  background-size: cover;
}

.error {
  background-repeat: no-repeat;
  background-size: cover;
}

.line {
  top: 0;
  left: 50%;
  height: 500px;
  height: 1px;
  margin-left: -3px;
  border-top: 1px solid;
  border-color: #000;
}

.mx-datepicker-popup {
  z-index: 2000 !important;
}

.disabled-click {
  opacity: 0.8;
  pointer-events: none !important
}

.disabled-menu {
  cursor: not-allowed !important;
  opacity: 0.4;
  pointer-events: none;
}

.disabled-select > td {
  pointer-events: none;
  cursor: not-allowed;
  color: #12172473 !important
}

  .disabled-select > td > input {
    pointer-events: none;
    cursor: not-allowed;
    color: #202124 !important;
    background-color: #F3F3F3 !important
  }

  .disabled-select > td > select {
    pointer-events: none;
    cursor: not-allowed;
    color: #202124 !important;
    background-color: #F3F3F3 !important
  }

swal2-container {
  font-family: var(--bs-font-inter)
}

.swal2-title {
  font-family: var(--bs-font-inter)
}

.swal2-content {
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

.wrapper {
  height: auto;
  min-height: 100%;
}

.jconfirm.jconfirm-material .jconfirm-box div.jconfirm-content {
  padding-left: 6px !important;
  font-size: 13.5px
}

.v-icon-width {
  width: 17px !important;
  cursor: pointer !important;
  transition: transform .2s
}

.svg-icon-width {
  width: 19px !important;
  cursor: pointer !important;
  transition: transform .2s
}

.icon-width {
  width: 35px !important
}

.no-border-radius {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important
}

.btn-table {
  border: 1px solid #ccc !important;
  border-left: none !important;
  background-color: #fff;
  color: #121724;
  font-size: 12px
}

.select-center {
  text-align: center;
  text-align-last: center
}

.select-left {
  text-align: left;
  text-align-last: left
}

.select-right {
  text-align: right;
  text-align-last: right
}

  .select-center, .select-left, .select-right > option {
    text-align: left
  }

.sort-cursor {
  color: white !important;
  cursor: pointer !important;
  pointer-events: all !important
}

.d-none {
  display: none !important
}

.box {
  box-shadow: 0 1px 20px 0 rgba(69,90,100,0.08) !important
}

.box-header {
  border-bottom: none !important;
  background-color: transparent !important;
  font-family: var(--bs-font-inter);
  font-weight: 500
}

.alert {
  border-radius: .475rem !important
}

.separator {
  display: block;
  height: 0;
  border-bottom: 1px solid #eff2f5;
}

.border-gray-200 {
  border-color: #eff2f5 !important;
}

input[type=checkbox]:focus, input[type=file]:focus, input[type=radio]:focus {
  outline: none !important
}

i {
  padding-right: 2px !important
}

/* Button Style */

.btn {
  user-select: none;
  display: inline-block;
  border: 1px solid transparent;
  font-family: var(--bs-font-inter);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  vertical-align: middle
}

  .btn.btn-light {
    border-color: #f5f8fa;
    background-color: #f5f8fa;
    color: #7e8299
  }

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

/* Input Group */

.input-group-addon {
  font-family: var(--bs-font-inter) !important
}

div.input-group > div.input-group > span.input-group-addon:not(:last-child) {
  border-radius: 0px
}

.input-group-sm > .form-control {
  font-size: 13.5px !important
}

.input-group-sm > .input-group-addon {
  font-size: 12px !important
}

.input-group-sm > .input-group-btn > .btn {
  font-size: 12px !important
}

.input-group-btn > .btn {
  height: 30px !important
}

.custom-search > .input-group-sm > .input-group-btn > .btn {
  height: 34px !important
}

.input-group-btn:last-child > .btn {
  z-index: 3
}

.custom-search {
  height: 100% !important
}

  .custom-search > .input-group {
    height: 100% !important
  }

  .custom-search button {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    position: relative;
    margin-bottom: 0;
    padding: 2px 5px;
    border: 0;
    border-radius: 3px;
    outline: none !important;
    background: none;
    box-shadow: none !important
  }

  .custom-search input:focus + button {
    z-index: 3
  }

.nowrap-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

/* Report Align Text */

.align-left {
  width: 20%;
  float: left;
  text-align: left
}

.align-center {
  width: 60%;
  float: left;
  text-align: center;
}

.align-right {
  width: 20%;
  float: left;
  text-align: right;
}

/* Display Flex */

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}

.flex-nav-item {
  width: 50%;
  margin-bottom: 25px;
  text-align: center;
  cursor: pointer
}

/* Sidebar Menu */

@media (min-width: 768px) {
  .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right), .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    width: 260px
  }
}

.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
  top: 42px !important
}

.main-footer {
  border: none !important;
  font-size: 13.5px
}

.sidebar-menu > li > a {
  padding: 10px 5px 12px 10px
}

.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
  margin-left: -10px
}

.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
  margin-right: -1px
}

@media (max-width: 767px) {
  .fixed .content-wrapper, .fixed .right-side {
    padding-top: 50px
  }

  .main-sidebar {
    padding-top: 60px
  }

  .control-sidebar {
    padding-top: 50px
  }
}

.skin-black .sidebar-menu > li:hover > a, .skin-black .sidebar-menu > li.active > a, .skin-black .sidebar-menu > li.menu-open > a {
  background: #02234e !important;
}

.skin-black .main-header .navbar > .sidebar-toggle {
  height: 50px;
  margin-left: -5px;
  border-right: 1px solid #eee;
  background-color: #02234e;
  color: #fff;
  max-width: 400px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

/* Content Layout */

.content-wrapper {
  margin-left: 0 !important;
  padding-left: 50px;
  background-color: #F5F5F7;
}

.sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .right-side {
  margin: 0 !important;
  padding-left: 50px;
}

@media only screen and (max-width: 835px) {
  .sidebar-open .content-wrapper {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0px, 0);
  }

  .content-wrapper {
    padding: 50px 0 0;
  }
}

/* Main Tab Custom by AdminLTE */

.nav > li.pull-right {
  margin-right: 5px !important
}

.nav-pills > li.active > a {
  color: #000000;
  font-weight: 500;
}

  .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
    background-color: white !important;
    color: black !important
  }

.nav-stacked > li.active > a, .nav-stacked > li.active > a:hover {
  border-left-color: #000000 !important
}

.nav-tabs-custom {
  box-shadow: none
}

.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.nav-tabs-custom > .nav-tabs > li > a {
  color: #000000;
  font-family: var(--bs-font-manrope)
}

.nav-tabs-custom > .nav-tabs > li {
  margin-right: 0;
  margin-bottom: -2px;
  border-top: 3px solid transparent;
  border-top-color: transparent;
}

  .nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: #000000;
  }

    .nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
      color: #000000;
      font-weight: 600
    }

/* Main Tab Custom by KitaponJit. */

.tabbable-panel {
  padding: 5px;
}

.tabbable-line > .nav-tabs {
  margin: 0px;
  border: none;
}

  .tabbable-line > .nav-tabs > li {
    margin-right: 2px;
  }

    .tabbable-line > .nav-tabs > li > a {
      margin-right: 0;
      margin-bottom: 5px;
      border: 0;
      color: #000000;
      font-family: var(--bs-font-inter);
      font-weight: 400;
    }

      .tabbable-line > .nav-tabs > li > a > i {
        color: #a6a6a6;
      }

    .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li.pull-right:hover {
      border-bottom: 0px !important;
    }

      .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
        border: 0;
        border-radius: 10px;
        background: #CCEEFF;
        color: #000000;
      }

        .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
          color: #000000;
        }

      .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
        margin-top: 0px;
      }

    .tabbable-line > .nav-tabs > li.active {
      position: relative;
      border-bottom: 1px solid #ddd;
      font-weight: 600;
    }

      .tabbable-line > .nav-tabs > li.active > a {
        border: 0;
        border-radius: 10px;
        background: #CCEEFF;
        color: #000000;
      }

        .tabbable-line > .nav-tabs > li.active > a > i {
          color: #000000;
        }

.tabbable-line > .tab-content {
  padding: 15px 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-top: 1px solid #eee;
  background-color: #fff;
}

.portlet .tabbable-line > .tab-content {
  padding-bottom: 0;
}

/* Modal by AdminLTE */

.modal-sm {
  width: 40%
}

.modal-md {
  width: 50%
}

.modal-lg {
  width: 60%
}

.modal-lg-2 {
  width: 70%
}

.modal-xl {
  width: 80%
}

.modal-xl-2 {
  width: 90%
}

@media (max-width: 1366px) {
  .modal-xl {
    width: 90%
  }

  .modal-xl-2 {
    position: fixed;
    margin: 0 !important;
    width: 100%;
    height: 100%;
    padding: 0 !important;
  }

    .modal-xl-2 > .modal-content > .modal-body {
      max-height: calc(100vh - 220px)
    }
}

@media (max-width: 767px) {
  .modal-sm {
    width: auto !important
  }

  .modal-md {
    width: auto !important
  }

  .modal-lg-2 {
    width: auto !important
  }

  .modal-lg-2 {
    width: auto !important
  }

  .modal-xl {
    width: auto !important
  }

  .modal-xl-2 {
    width: auto !important
  }
}

.modal-dialog {
  margin: 45px auto;
}

.modal-content {
  border: 0 solid rgba(0,0,0,.2);
  border-radius: .475rem;
  outline: 0;
  background-clip: padding-box;
  background-color: #fff;
  box-shadow: 0 0.25rem 0.5rem rgb(0 0 0 / 10%)
}

.modal-header {
  height: 45px;
  padding-top: 3px;
  padding-bottom: 5px;
  border-bottom: none !important;
  background: #02234e;
  color: #FFF;
  font-family: var(--bs-font-inter);
  font-weight: 600 !important;
  opacity: 1;
}

.modal-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto
}

.modal-footer {
  border-top: none !important
}

.fade {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  transition: opacity .15s linear;
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
}

button.close {
  padding: 8px !important;
  color: #FFF !important;
  font-size: 24px !important;
  font-weight: bold !important;
  text-shadow: unset;
  opacity: 1 !important;
}

.close:hover, .close:focus {
  color: unset;
}

/* Modal Right/Left by KitaponJit. */

.modal.left .modal-dialog,
.modal.right .modal-dialog {
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  position: fixed;
  width: 320px;
  height: 100%;
  margin: auto;
  transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
  padding: 15px 15px 80px;
}

.modal.left.fade .modal-dialog {
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  left: -320px;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog {
  left: 0;
}

.modal.right.fade .modal-dialog {
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  right: -320px;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
  right: 0;
}

/* Modal Bottom by KitaponJit. */

.modal.bottom .modal-dialog {
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  position: fixed;
  width: 100% !important;
  height: 360px;
  margin: auto;
  transform: translate3d(0%, 0, 0);
}

.modal.bottom .modal-content {
  width: 100% !important;
  height: 100% !important;
  overflow-y: auto;
}

.modal.bottom.fade .modal-dialog {
  -webkit-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  -o-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  bottom: -100% !important;
  transition: opacity 0.3s linear, bottom 0.3s ease-out;
}

.modal.bottom.fade.in .modal-dialog {
  bottom: 0 !important;
}

/* Table by AdminLTE */

.table > thead > tr > th,
.table > tbody > tr > th, .table > tfoot > tr > th,
.table > thead > tr > td, .table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px
}

thead > tr > th {
  font-family: var(--bs-font-extra);
  font-weight: 500 !important;
  background: #303952;
  letter-spacing: 0;
  color: #FFFFFF;
  opacity: 1;
  font-weight: 500 !important;
  text-align: center;
  vertical-align: middle !important
}

tbody > tr > th {
  background-color: #eeeeee;
  vertical-align: middle !important
}

tbody > tr > td {
  font-family: var(--bs-font-extra);
  vertical-align: middle !important
}

tbody, tfoot {
  font-size: 13.5px
}

.table-selected {
  background-color: #273c75;
  color: #fff;
  font-weight: bold;
}

  .table-selected > td {
    background-color: #D5EAFC !important;
    color: #273C75;
    transition-duration: 0.3s;
  }

.table-header-color > td {
  background-color: #EEEEEE;
}

.table-fixed thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Table (Custom) by KitaponJit. */

.custom-table {
  position: relative;
  max-width: 100%;
  max-height: 20em;
  overflow: auto;
  border-collapse: collapse
}

.custom-table-header {
  display: table-header-group
}

  .custom-table-header div {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-clip: padding-box;
    background-color: #02234E;
    color: #fff;
    font-family: var(--bs-font-manrope);
    font-weight: 500;
    text-align: center;
    vertical-align: middle
  }

.custom-table-body {
  display: table-row-group;
  position: absolute;
  font-size: 13.5px;
}

  .custom-table-body div {
    position: relative;
    background-clip: padding-box
  }

  .custom-table-body:hover {
    background-color: #f5f5f5
  }

.custom-table-row {
  display: table-row
}

.custom-table-cell {
  display: table-cell;
  padding: 0.5rem;
  border: 1px solid #f4f4f4
}

.custom-table-body .custom-table-cell {
  border-top: none;
  border-bottom: 1px solid #f4f4f4 !important
}

.custom-table-footer {
  display: table-footer-group;
  color: black;
  font-family: var(--bs-font-manrope);
  font-size: 13.5px;
  font-weight: 500
}

  .custom-table-footer div {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    border: 1px solid #f4f4f4;
    background-color: #ffffff;
    font-weight: 700;
    z-index: 10
  }

.custom-footer-cell {
  display: table-cell;
  padding: 0.5rem;
  border-bottom: 1px solid black
}

.custom-border-focus:focus {
  border-color: #d2d6de
}

.custom-table-striped {
  background-color: #f5f5f5 !important
}

.custom-header-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10
}

.custom-footer-sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 10
}

.no-border-left {
  border-left: none !important
}

.resize-observer {
  display: none
}

/* Tooltip , Popper by AdminLTE */

.tooltip {
  word-wrap: break-word;
  display: block;
  position: absolute;
  margin: 0;
  font-family: var(--bs-font-inter);
  font-size: .925rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  opacity: 0;
  z-index: 9999
}

.tooltip-inner {
  max-width: 200px;
  padding: .75rem 1rem;
  border-radius: 3px;
  text-align: center
}

.tooltip .tooltip-inner {
  background-color: #181c32;
  color: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #181c32;
}

.popper {
  border: 1px solid #fff !important;
  border-radius: .475rem !important;
  background-clip: padding-box !important;
  background-color: #fff !important;
  font-family: var(--bs-font-inter);
  font-size: 13.5px !important;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15) !important
}

/* Checkbox and Radio : Petty Checkbox Vue */

td > .pretty {
  margin-right: 0 !important
}

.pretty .state label {
  font-family: var(--bs-font-inter)
}

.pretty.p-icon .state .icon {
  left: 0.5px !important
}

.p-table {
  margin-top: 0em !important;
  margin-right: unset !important;
  overflow: unset !important
}

  .p-table[p-checkbox] {
    font-size: 15px !important
  }

.pretty input[disabled] ~ * {
  cursor: not-allowed !important;
  opacity: 0.8 !important
}

@-moz-document url-prefix() {
  .p-switch-table {
    margin-right: 0 !important;
    margin-left: 0.5rem !important
  }
}

.p-disabled {
  background-color: #ddd !important;
  border-radius: 20% !important;
  opacity: 1 !important;
  color: #ddd !important;
}

/* Custom Checkbox & Radio */

.form-check .form-check-label {
  cursor: pointer
}

.form-check .form-check-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer
}

.form-check .form-check-input {
  margin-left: -2.25rem;
  float: left
}

.form-check-input {
  appearance: none;
  color-adjust: exact;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: -.125rem;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  vertical-align: top;
  border: 1px #babfc7 solid !important
}

@media (prefers-reduced-motion:reduce) {
  .form-check-input {
    transition: none
  }
}

.form-check-input[type=checkbox] {
  border-radius: .45em
}

.form-check-input[type=radio] {
  border-radius: 50%
}

.form-check-input:active {
  filter: brightness(90%)
}

.form-check-input:focus {
  border-color: #b5b5c3;
  outline: 0;
  box-shadow: none
}

.form-check-input:checked {
  border-color: #009ef7;
  background-color: #009ef7
}

  .form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23FFFFFF'/%3e%3c/svg%3e")
  }

  .form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFFFFF'/%3e%3c/svg%3e")
  }

.form-check-input[type=checkbox]:indeterminate {
  border-color: #009ef7;
  background-color: #009ef7;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}

.form-check-input:disabled {
  filter: none;
  opacity: .5;
  pointer-events: none
}

  .form-check-input:disabled ~ .form-check-label,
  .form-check-input[disabled] ~ .form-check-label {
    opacity: .5
  }

.form-check.form-check-custom {
  display: flex;
  align-items: center;
  margin: 0;
  padding-left: 0
}

  .form-check.form-check-custom .form-check-input {
    flex-shrink: 0;
    margin: 0;
    float: none
  }

  .form-check.form-check-custom .form-check-label {
    font-family: var(--bs-font-inter);
    font-weight: 400;
    margin-top: .40rem;
    margin-left: .55rem
  }

.form-check:not(.form-switch) .form-check-input[type=checkbox] {
  background-size: 50% 55%
}

.form-check.form-check-solid .form-check-input {
  background-color: #eff2f5
}

  .form-check.form-check-solid .form-check-input:active,
  .form-check.form-check-solid .form-check-input:focus {
    background-color: #eff2f5;
    filter: none
  }

  .form-check.form-check-solid .form-check-input:checked {
    background-color: #009ef7
  }

  .form-check.form-check-solid .form-check-input[type=radio],
  .form-check.form-check-solid .form-check-input[type=radio]:active,
  .form-check.form-check-solid .form-check-input[type=radio]:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFFFFF'/%3e%3c/svg%3e")
  }

.form-check.form-check-success .form-check-input:checked {
  background-color: #50cd89
}

.form-check.form-check-danger .form-check-input:checked {
  background-color: #f1416c
}

.form-check.form-check-warning .form-check-input:checked {
  background-color: #ffc700
}

.form-check.form-check-custom.form-check-sm .form-check-input {
  width: 1.4rem;
  height: 1.4rem
}

.form-check.form-check-custom.form-check-lg .form-check-input {
  width: 2.25rem;
  height: 2.25rem
}

.form-switch {
  padding-left: 3.75rem
}

  .form-switch .form-check-input {
    width: 3.25rem;
    margin-left: -3.75rem;
    border-radius: 3.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-position: left center;
    transition: background-position .15s ease-in-out
  }

@media (prefers-reduced-motion:reduce) {
  .form-switch .form-check-input {
    transition: none
  }
}

.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23B5B5C3'/%3e%3c/svg%3e")
}

.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e");
  background-position: right center
}

.form-check:not(.form-switch) .form-check-input[type=checkbox] {
  background-size: 60% 60%
}

.form-switch.form-check-solid .form-check-input {
  height: 2.25rem;
  border-radius: 3.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")
}

  .form-switch.form-check-solid .form-check-input:active,
  .form-switch.form-check-solid .form-check-input:checked,
  .form-switch.form-check-solid .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    filter: none
  }

.form-switch.form-check-solid.form-switch-sm .form-check-input {
  width: 2.5rem;
  height: 1.5rem
}

.form-switch.form-check-solid.form-switch-lg .form-check-input {
  width: 3.75rem;
  height: 2.75rem
}

.form-swtich-center {
  justify-content: center !important
}

/* Vue Input Tag Styles */

.vue-input-tag-wrapper .input-tag {
  border: 1px solid#999 !important;
  border-radius: 4px !important;
  background-color: #f2f2f2 !important;
  color: #525252 !important;
}

.vue-input-tag-wrapper {
  margin-bottom: 5px !important;
  padding: 0px 10px !important;
  border-radius: 5px !important;
}

  .vue-input-tag-wrapper span {
    line-height: normal;
  }

  .vue-input-tag-wrapper .input-tag {
    height: 23px !important;
    margin: 3px 3px 3px 0px !important;
  }

    .vue-input-tag-wrapper .input-tag .remove {
      color: #d74d4d !important;
    }

      .vue-input-tag-wrapper .input-tag .remove:hover {
        opacity: 0.8;
      }

  .vue-input-tag-wrapper .new-tag {
    margin: 1px 0px !important;
  }

/* Row Grid Divider */

@media ( min-width: 768px ) {
  .grid-divider {
    position: relative;
    padding: 0;
  }

    .grid-divider > [class*='col-'] {
      position: static;
    }

      .grid-divider > [class*='col-']:nth-child(n+2):before {
        position: absolute;
        top: 0;
        bottom: 0;
        border-left: 1px solid #DDD;
        content: "";
      }

  .col-padding {
    padding: 0 15px;
  }
}

/* Media Print */

@media print {
  .no-print, .no-print * {
    display: none !important;
  }

  .content {
    margin: 0px;
    padding: 0px !important;
  }
}

@media (max-width: 1366px) {
  .screen-zoom {
    zoom: 0.9;
  }
}

@media (max-width: 1536px) {
  .screen-zoom {
    zoom: 0.8;
  }
}

/* DHX Table */

.dhx-striped {
  background: #FCFCFC;
}

.dhx_string-cell, .dhx_tree-cell {
  padding: 0 17px;
  line-height: 35px !important
}

.dhx_footer-rows {
  font-weight: 500;
  text-shadow: none !important
}

.dhx_span-cell {
  font-weight: 500;
  text-shadow: none !important
}

.dhx_grid-footer-cell {
  border-color: #f4f4f4 !important;
  background-color: white !important;
  color: black;
  font-weight: 500;
  text-align: right;
  text-shadow: none !important;
}

#importModal .dhx_grid-content, #importModal .dhx_grid-body {
  width: auto !important;
}

/* AG Grid */

.ag-flex {
  display: flex;
  flex-direction: column;
  height: 100%
}

.ag-theme-balham-dark {
  font-family: var(--bs-font-manrope) !important;
  font-size: 13.5px !important
}

.ag-theme-alpine {
  font-family: var(--bs-font-manrope) !important;
}

  .ag-theme-alpine .ag-header {
    font-family: var(--bs-font-manrope) !important;
  }

  .ag-theme-alpine .ag-root-wrapper {
    border: 1px solid #f4f4f4;
  }

  .ag-theme-alpine .ag-header {
    background-color: #02234E !important
  }

  .ag-theme-alpine .ag-header-row {
    font-weight: 500 !important
  }

.ag-header-group-cell-label, .ag-header-cell-label {
  justify-content: center !important
}

.ag-row .ag-cell {
  font-family: var(--bs-font-manrope) !important;
  font-size: 13.5px !important;
  white-space: pre
}

.ag-theme-alpine .ag-cell, .ag-theme-alpine .ag-full-width-row .ag-cell-wrapper.ag-row-group {
  line-height: 35px !important
}

.ag-theme-alpine .ag-header-cell-resize::after {
  top: 0 !important;
  width: 1px !important;
  height: 100% !important;
}

.ag-header-cell-label .ag-header-cell-text {
  line-height: 2em;
}

.ag-theme-alpine .ag-header {
  background-color: #02234E !important;
  font-size: 13.5px !important
}

.ag-theme-alpine .ag-header-cell-moving {
  background-color: #45475a !important;
}

.ag-theme-alpine .ag-header-group-text {
  color: #FFF !important;
}

.ag-theme-alpine .ag-floating-filter-button-button, .ag-header-cell-label, .ag-header-icon {
  color: #FFF !important;
}

.ag-cell-label-container {
  margin-left: 10px !important
}

.ag-theme-alpine .ag-ltr .ag-cell {
  border-right: 1px solid #F4F4F4
}

.ag-theme-alpine .ag-cell-wrapper > *:not(.ag-cell-value):not(.ag-group-value) {
  height: 35px !important
}

.ag-theme-alpine .ag-row-selected {
  background-color: #D5EAFC !important;
}

.ag-row-group {
  font-weight: 500 !important
}

  .ag-row-group.ag-row-level-0 {
    background-color: #dddbdb !important;
  }

  .ag-row-group.ag-row-level-1 {
    background-color: #e6e5e5b3 !important;
  }

  .ag-row-group.ag-row-level-2 {
    background-color: #e6e5e5b3 !important;
  }

.ag-cell-checkbox {
  white-space: normal !important
}

.ag-theme-alpine .ag-row-hover {
  background-color: #f5f5f5;
}

.ag-theme-balham-dark .ag-row-hover {
  background-color: #3d4749 !important
}

.ag-theme-alpine .ag-icon {
  padding-bottom: 2px !important
}

/* Select 2 */

.select2-container {
  width: 100% !important
}

.select2-container--bootstrap .select2-selection {
  -webkit-box-shadow: unset;
  border: 1px solid #e4e6ef !important;
  border-radius: 5px;
  box-shadow: unset;
  font-family: var(--bs-font-manrope);
  font-weight: 400;
  font-size: 13.5px !important
}

.select2-container--bootstrap .select2-selection--single.input-sm {
  font-family: var(--bs-font-manrope);
  font-weight: 400
}

.select2-container--bootstrap .select2-selection--single {
  height: 30px !important;
  line-height: 30px
}

.warp-table > div > .select2-container--bootstrap .select2-selection--single {
  height: 35px !important;
  line-height: 35px !important;
  border-radius: 0 !important
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
  line-height: 25px
}

.form-group-sm .select2-container--bootstrap .select2-selection--single, .input-group-sm .select2-container--bootstrap .select2-selection--single, .select2-container--bootstrap .select2-selection--single.input-sm {
  border-color: #d2d6de !important
}

.select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection {
  border-color: #b5b5c3 !important;
  box-shadow: none !important
}

.select2-container--bootstrap .select2-dropdown {
  border-color: #b5b5c3 !important
}

.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
  font-size: 13.5px
}

.select2-selection__rendered {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
  color: #121724 !important
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0px !important
}

.warp-table > .select2-container .select2-selection--single .select2-selection__rendered {
  margin-top: -3px !important
}

.select2-container--bootstrap.select2-container--disabled .select2-selection, .select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
  background-color: #F3F3F3 !important;
}

.input-group-sm .select2-container--bootstrap .select2-selection--single {
  height: 35px !important;
  border-radius: 0 !important;
}

  .input-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    font-size: 13.5px;
    line-height: 35px
  }

/* Mobile PM */

.dark-gray {
  background-color: #18181d;
}

/* View Document */

.skin-view {
  background-color: #f0f3fe !important
}

.box-striped > .box:nth-of-type(even) {
  background-color: #F8FAFF !important
}

.box-border {
  border: 1px solid #C2CFFF;
}

.btn-w-50 {
  width: 50%
}

.btn-center {
  margin-right: auto;
  margin-left: auto
}

/* Progress Wizard (Custom) */

.progress-indicator > li {
  color: #1A1A1A !important;
  font-family: var(--bs-font-inter)
}

  .progress-indicator > li.completed, .progress-indicator > li.completed .bubble {
    color: #6688FF !important
  }

    .progress-indicator > li.completed .bubble, .progress-indicator > li.completed .bubble:after, .progress-indicator > li.completed .bubble:before {
      border-color: #6688FF;
      background-color: #6688FF;
    }

/* PDF Form Print */

.table-tax > tbody > tr > td {
  width: 24px;
  height: 34px !important;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}

.border-tr > td {
  border: 1px solid black;
  width: 20px;
  text-align: center;
}

.td-empty {
  border: none !important;
  width: unset !important;
}

.table-header-wht > thead > tr > th {
  padding: 5px;
  border: 1px solid white;
  vertical-align: top;
  background: white !important;
}

.table-wht > thead > tr > th {
  background-color: white;
  color: black;
  padding: 5px;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}

.table-wht > tbody > tr > td, .table-wht > tfoot > tr > td {
  padding: 5px;
  border: 1px solid black;
  vertical-align: top;
}

th {
  font-weight: 500 !important;
}

ul {
  font-weight: normal !important;
  padding-left: 10px;
}

.text-bold {
  font-weight: bold;
}

.circle {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid black;
}

.under-double {
  border-bottom: 3px double black !important;
}

.border-t-none {
  border-top: none !important;
}

.border-b-none {
  border-bottom: none !important;
}

.border-l-none {
  border-left: none !important;
}

.border-r-none {
  border-right: none !important;
}

.word-break-all {
  text-overflow: unset !important;
  white-space: normal !important;
  overflow: hidden !important;
  word-break: break-all !important;
}

.pdf-app .toolbar {
  z-index: 1 !important
}

/* Sweet Modal */

.sweet-modal .sweet-title > h2 {
  margin: revert !important
}