@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@100;300;400;700;800&display=swap');

thead {
  color: #7f858c;
}

tbody {
  color: #848990;
  font-size: 15px;
  font-weight: 400;
}

#content:not(.dashboard){
  visibility: hidden;
}

/* Custom CSS */
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #f8f8fa;
  font-family: 'Poppins', sans-serif;
}

#toggleButton {
  position: fixed;
  top: 0px;
  left: 215px;
  z-index: 10;
  background-color: #2581C6 !important;
  border-color: #2581C6 !important;
}

#toggleButton:active,
#toggleButton:focus,
#toggleButton:focus-visible,
#toggleButton:hover {
  background-color: #2581C6 !important;
}


#toggleButton.collapsed {
  left: -20px;
}

#toggleButton:before {
  content: '\2190';
  color: #fff;
}

#toggleButton.collapsed:before {
  content: '\2192';
  color: #fff;
}

#sidebar {
  width: 250px;
  height: 100vh;
  position: fixed;
  overflow-y: auto;
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.4s ease, visibility 0.4s ease;
  background-color: #381326 !important;

}

#sidebar ul li:first-child {
  margin-top: 3px;
}

#sidebar.collapsed {
  width: 0;
  overflow: hidden;
  transform: translateX(-250px);
  visibility: hidden;
}

#toggleButton {
  transition: left 0.4s ease;
}

.active {
  background-color: #fff;
  color: black !important;
  border-radius: 10px;
}

#toggleButton:active,
#toggleButton:focus,
#toggleButton:focus-visible,
#toggleButton:hover {
  outline: none;
  box-shadow: none;
  background-color: inherit;

}

#sidebar.collapsed .toggle-visible {
  display: none;

}

#content {
  margin-left: 250px;
  padding: 30px 20px;
  transition: margin-left 0.4s ease;
}

#content.collapsed {
  margin-left: 0;
}

@media (max-width: 768px) {
  #sidebar {
    position: absolute;
    z-index: 1;
  }

  #sidebar:not(.collapsed) {
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  }

  #content {
    z-index: 999;
    /* Just below sidebar */
    margin-left: 0px;
  }
}

#sidebar li:hover:not(.submenu) {
  background-color: #fff;
  border-radius: 10px;
}

#sidebar li:hover>a {

  color: #333;
}

#sidebar ul>li>a {

  color: #fff;
}

/*  #sidebar li.active {
       background-color: #fff;
   } */

.logout-button {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: 10px;
}

.brand {
  text-align: center;
  font-size: 3rem;
  font-weight: 400;
}

#submenu,
#submenu1,
#submenu2 {
  margin-left: 20px;
}

.submenu-indicator {
  transition: transform 0.3s ease-in-out;
  text-shadow: 1px 0 currentColor, -1px 0 currentColor, 0 1px currentColor, 0 -1px currentColor;
}

.collapsed-icon {
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
  display: inline-block;
}

.expanded-icon {
  transform: rotate(180deg);
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}

.submenu-collapse li {
  font-style: italic;
}

.mainUl>li:not(.submenu) {
  font-weight: 600;
}

.mainUl {
  font-size: 0.9rem;
}

h4 {
  font-weight: 600;
  font-size: 16px;

}

h5 {
  font-weight: 600;
}

.card.top .card-body {
  border: none;
  border-radius: 5px;
  background-color: #2581C6;
}

.card {
  border: none;

}

.cardArea-top {
  margin-bottom: 30px;
}

.cardArea {
  margin-bottom: 30px;
}

table thead {
  font-size: 0.9rem;
}

.devTableCard,
.repTopCard,
.repTableCard {
  box-shadow: none !important;
}

/* h4,
h5 {
  text-align: end;
} */
.subMenu {
  padding-left: 10px;
}



.cardArea h4,
.modal-body {
  color: #7f858c;
}

h6,
.modal-header {
  /* font-size: 18px; */
  font-weight: 700;
  color: #7f858c;
}

.h6, h6 {
  font-size: 0.8rem;
}
.lead {
  font-size: 14px;
  font-weight: 400;
  color: #7f858c;
}

.card {
  border: none !important;
}

input {
  box-shadow: none !important;
}


.buttons-excel {
  background: orange !important;
  border: none !important;
  border-radius: 5px !important;
  height: 35px !important;
  color: #fff !important;
  font-family: 'Sarabun', sans-serif;
  font-weight: 400;
}

.addButton,
.modal-body button {
  background: #626ed4 !important;
  border: none !important;
  border-radius: 5px !important;
  height: 35px !important;
  color: #fff !important;
  font-family: 'Sarabun', sans-serif;
  font-weight: 400;
}

.modal-body a {
  text-decoration: none;
}

.ftco-section {
  padding: 7em 0;
}

.ftco-no-pt {
  padding-top: 0;
}

.ftco-no-pb {
  padding-bottom: 0;
}

.heading-section {
  font-size: 28px;
  color: #000;
}

.fa-play-circle {
  position: relative;
  top: 5px;
  left: 5px;
}

.fa-edit {
  position: relative;
  top: 51px;
  left: 51px;
}

#icon {
  position: absolute;
  right: 0px;
  float: right;
  width: 50px;
  height: 50px;
  background-color: silver;
}

thead tr th {
  color: grey;
}

.fa-regular,
.fa-solid {
  color: grey;
  cursor: pointer;
}

.btn {
  border-radius: 0.8rem;
  line-height: 1.5rem;
  font-size: 0.8rem;
  border-width: 2px;
  font-weight: 600;
  padding: 0 1rem;
  transition: 0.2s all ease-in;
}

.btn.logout:hover {
  background: transparent;
  color: #2581C6;
}

.form-check-input:checked {
  background-color: #2581C6;
}

.btn.logout{
  background-color: #2581C6;
  border-color: #2581C6;
}

.chartButton .bt1 {
  background-color: #2581C6;
  border-color: #2581C6;
  color: #fff;
}
.chartButton .bt1:hover {
  background: transparent;
  color: #2581C6;
}
.chartButton .bt2 {
  background-color: #7D0040;
  border-color: #7D0040;
  color: #fff;
  
}
.chartButton.bt2 {

  background-color: #7D0040;
  border-color: #7D0040;
  color: #fff;
  pointer-events: visible;
}
.chartButton .bt2:hover {
  background: transparent;
  color: #7D0040;
}
.chartButton.bt2:hover {
  background: transparent;
  color: #7D0040;
}
.chartButton .bt3 {
  background-color: #DD3930;
  border-color: #DD3930;
  color: #fff;
}
.chartButton .bt3:hover {
  background: transparent;
  color: #DD3930;
}

.container-fluid.bodyPart {
  background-color: #f5efef;
  padding-top: 3rem;
  height: 100%;
}

.container.bodyPart {
  background-color: #fff;
  border-radius: 10px;
}

.container-fluid.wrapper {
  padding: 0;
}

.action {
  cursor: pointer;
}

.dataTables_filter {
  margin-bottom: 15px;
}

.dataTables_filter input,
.dataTables_length select {
  height: 30px;
  border-radius: 5px;
  font-size: small;
}

.dataTables_filter,
.dataTables_length {
  font-size: small;
}

.dataTables_info {
  margin-top: 30px;
  font-size: small;
  color: #2581C6;
}

.dataTables_paginate.paging_simple_numbers {
  margin-top: 30px;
  font-size: small;
  color: #2581C6;
}

.dataTables_paginate.paging_simple_numbers > span > a{
  color: #2581C6;
}


.paginate_button.page-item.previous >a:focus,.paginate_button.page-item.next >a:focus {
  box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background-color: #2581C6;
  color: #fff !important;
}

.dataTables_wrapper {
  margin-top: 20px;
  margin-bottom: 30px;
}

.dataTables_wrapper .row {
  margin-bottom: 30px;
}

.registered {
  color: green;

}

.rejected {
  color: red;

}

.notUsed {
  color: blue;

}

.modal button {
  float: right;
}

tbody,
.modal-body {
  font-size: 0.9rem;
}

.mdlBdyText {
  border-bottom: 1px solid black;
  padding-bottom: 10px;
}

.modal-close-fa-btn {
  background: none;
  border: none;
}

.changed {
  color: red;
}

.logo {
  font-size: 3rem;
  color: red !important;
}



.fa-pen-to-square {
  color: orange;
}

.fa-trash-can {
  color: red;
}

.fa-file-export {
  color: #fff;
}

.loaderSpinner {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
}

.devTableCard input,
select {
  box-shadow: none !important;
}

.devTableCard label {
  color: #848990 !important;
}

.inlineDivs {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.inlineDivs div {
  width: 50%;
}

#messages {
  position: absolute;
  z-index: 99;
  right: 0;
  top: 40px;
  white-space: nowrap;
}

.dataTables_scrollBody,
.table,
.modal-dialog-scrollable,
.modal-body,* {
  scrollbar-width: thin !important;
  scrollbar-color: #800020 #fff !important;
}

/* Works on Chrome, Edge, and Safari */
.dataTables_scrollBody::-webkit-scrollbar,
.table::-webkit-scrollbar,
.modal-dialog-scrollable::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,*::-webkit-scrollbar {
  width: 12px !important;
}

.dataTables_scrollBody::-webkit-scrollbar-track,
.table::-webkit-scrollbar-track,
.modal-dialog-scrollable::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,*::-webkit-scrollbar-track {
  background: #fff !important;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb,
.table::-webkit-scrollbar-thumb,
.modal-dialog-scrollable::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,*::-webkit-scrollbar-thumb {
  background-color: #800020 !important;
  border-radius: 20px !important;
  border: 3px solid #fff !important;
}

.modal-body {
  overflow-x: auto;
}

.content {
  opacity: 0;
  transition: opacity 1s;
}

.content-loaded {
  opacity: 1;
}

.material-symbols-rounded {
  vertical-align: bottom;
  font-variation-settings:
  'FILL' 0.5,
  'wght' 200,
  'GRAD' 400,
  'opsz' 20
}

.mini-stat-label {
  /* position: absolute; */
  /* right: 0;
  top: 18px; */
  font-weight: 600;
  padding: 20px 30px 20px 50px;
  -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 24% 50%, 6% 0);
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 24% 50%, 6% 0);
} 

.datepicker-header .datepicker-controls .button {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

.datepicker-picker {
  font-size: 0.8rem !important;
}

.datepicker .dow {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

.badge.bg-info {
  background-color: #2581C6 !important;
  min-width: 130px !important;
}



.report_heading {
  font-size: 0.9rem;
  font-weight: 700;
  color: #7f858c;
}

.reports_form  label {
  font-size: 0.9rem;
}

.bs-searchbox > .form-control {
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: .875rem;
}

.bootstrap-select .dropdown-menu li {
  font-size: 0.9rem;
}
.bootstrap-select button.btn-light {
  border-radius: 8px;
  background-color: #2581C6;
  color: #fff !important;
  box-shadow: none;
  border-color: #2581C6;
}

.report-box-div :not(p) :not(select) {
  color: grey;
}

.dropdown-menu.inner.show > li > a {
  color: grey !important;
}

.clrButton {
  background-color: #ffc107;
  border-color: #ffc107;
}

#reports_wrapper {
  color: grey;
}

.dt-buttons {
  float: right !important;
}

th {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10; /* Make sure the header is above other elements */
}

div.dataTables_processing {
  position: fixed !important; /* Make it fixed relative to the viewport */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  /* transform: translate(-50%, -50%);  */
  z-index: 1100; /* Ensure it's above all other elements */
  
}

.dataTables_wrapper .dataTables_filter input:focus-visible {
  outline: none;
  border-color: deepskyblue;
}

div[id$="-indicator"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: grey;
}

.sub-part {
  color: grey;
}

.bootstrap-select button.btn-light:focus,.bootstrap-select button.btn-light:focus-visible {
  outline: none !important;
}

.btn-group.btn-group-sm {
  display: flex !important;
  justify-content: space-between !important;
  gap: 60px !important;
}

.btn-group.btn-group-sm button{
  font-size: 0.7rem;
  border-radius: 10px !important;

}

.btn-group.btn-group-sm button:hover{
  background-color: #fff !important;
  color: #2581C6 !important;

}

.custom-disabled:hover {
  cursor:not-allowed !important;
  pointer-events: visible;
}