:root {
  --color:#f7931e;
  --sub-color: #688c04;

  --shadow-color:rgba(232, 125, 2, 0.4);
  --shadow-color-level-2:rgba(140, 86, 4, 0.034);
}

html,
body,
.sidenav *,
.custom-select {
  font-family: "Line-Font" !important;
}

a {
  cursor: pointer !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

.scrollbar {
  max-width: auto; /* Set maximum height to 100% of viewport height */
  overflow-y: auto; /* Enable vertical scrollbar */
}

/* scrollbar y body */
.scrollbar::-webkit-scrollbar {width: 8px !important;height: 5px !important;
}
.scrollbar::-webkit-scrollbar-track {background-color: #F5F6FA !important;
  border-radius: 42px !important;
}
.scrollbar::-webkit-scrollbar-thumb {background: #D1D1D6 !important;
  border-radius: 42px !important;
}

.scrollbar::-webkit-scrollbar-thumb:hover{background: var(--color) !important;
}

/* Custom CSS for modal scrollbar */
.modal-scrollbar-x {
  max-width: 80vh; /* Set maximum height to 80% of viewport width */
  overflow-x: auto; /* Enable vertical scrollbar */
}

/* Custom CSS for modal scrollbar */
.modal-scrollbar {
  max-height: 80vh; /* Set maximum height to 80% of viewport height */
  overflow-y: auto; /* Enable vertical scrollbar */
}

/* scrollbar y modal body */
.modal-scrollbar::-webkit-scrollbar, 
.modal-body::-webkit-scrollbar {width: 8px !important;height: 5px !important;
}
.modal-scrollbar::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {background-color: #F5F6FA !important;
  border-radius: 42px !important;
}
.modal-scrollbar::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {background: #D1D1D6 !important;
  border-radius: 42px !important;
}

.modal-scrollbar::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover {background: var(--color) !important;
}

/* Custom CSS for modal scrollbar */
.modal-scrollbar-x {
  max-width: 80vh; /* Set maximum height to 80% of viewport width */
  overflow-x: auto; /* Enable vertical scrollbar */
}

/* scrollbar x */
.modal-scrollbar-x::-webkit-scrollbar, 
.modal-scrollbar-x::-webkit-scrollbar {height: 5px !important;
}
.modal-scrollbar-x::-webkit-scrollbar-track,
.modal-scrollbar-x::-webkit-scrollbar-track {background-color: #F5F6FA !important;
border-radius: 42px !important;
}
.modal-scrollbar-x::-webkit-scrollbar-thumb,
.modal-scrollbar-x::-webkit-scrollbar-thumb {background: #D1D1D6 !important;
border-radius: 42px !important;
}

.modal-scrollbar-x::-webkit-scrollbar-thumb:hover {background: var(--color) !important;
}
/* end */

.card.form-add .card-body label,
label {
  color: #344054;
}

.card.form-add .card-body label {
  font-size: 16px;
}

html,
body {
  height: 100%;
}

.h-80 {
  height: 80%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

a:hover {
  text-decoration: none !important;
}

.mt-custome1 {
  margin-top: 10px !important;
}

#contents {
  display: none;
}

html,
body {
  overflow-y: auto;
  overflow-x: auto;
}

.error {
  color: red;
}

.text-strong {
  color: #0c0c0c;
}

.dashboard-group {
  border-right: 2px solid rgb(0 0 0 / 7%);
}

.form-control {
  border-radius: 8px;
  border: 1px solid #D0D5DD;
  padding: 10px, 14px, 10px, 14px;
}

.alert {
  border-radius: 12px;
}

.fa-user-check.text-samll,
.fa-user-slash.text-samll {
  font-size: 18px;
}

.container .card {
  border: 1px solid #E4E7EC;
}

label,
.form-group,
.form-control,
.dataTables_info,
.paginate_button,
.text-small {
  font-size: 14px;
}

.dataTable tbody tr td,
.dataTable thead tr th {
  font-size: 12px;
}

.margin-7 {
  margin-left: 7% !important;
  margin-right: 7% !important;
}

.margin-10 {
  margin-left: 10% !important;
  margin-right: 10% !important;
}

.bg-light {
  background-color: #ffffff;
}

.card {
  border-radius: 12px;
}

.card-header {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: #fff;
}

.card-header.focus {
  background-color: #E4E7EC;
}

.card-header.none-radius {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.card-body {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

td.dataTables_empty {
  line-height: 100px;
  font-size: 14px;
  color: #667085;
}

.dataTable tbody tr td svg,
.dataTable tbody tr td a svg,
.dataTable tbody tr td button svg {
  font-size: 25px !important;
}

.dataTable tbody tr td svg.text-small {
  font-size: 17px !important;
}

.dataTable tbody tr td button.btn-none-merge svg {
  font-size: 14px !important;
}

.dataTable thead th {
  color: #667085;
  line-height: 18px;
  font-weight: normal;
}

.card-header {
  color: #263753;
  font-weight: 500;
}

.dataTable tbody tr td .btn {
  font-size: 12px !important;
  padding: 8px 14px !important;
  font-weight: 400;
}

.page-item.active a {
  color: #fff !important;
}

.page-item.disabled a {
  color: #5c6375 !important;
}

.badge {
  padding: 2px 8px;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  border-radius: 16px !important;
}

.badge-warning {
  background-color: var(--color);
}

.custom-control-input:checked~.custom-control-label::before {
  border-color: var(--color);
  background-color: var(--color);
}

.navbar-text {
  font-size: 14px;
}

.navbar-text.icon {
  font-size: 22px !important;
  margin-right: 3px;
}

td div {
  line-height: 25px;
}

.dataTable tbody tr td .text-strong {
  color: #000000 !important;
  font-weight: 400 !important;
}

.card {
  border: 1px solid rgb(241, 241, 241);
}

.card-header {
  border: none;
}

.card-header#headerToggle{
  border-radius: 10px;
}

#btnHide {
  display: none;
}

.ui-datepicker {
  padding: 5px;
  border-radius: 8px !important;
}

.ui-widget-header {
  background-color: #F9FAFB !important;
  border-color: #98A2B3 !important;
}

.ui-widget.ui-widget-content {
  border: none !important;
}

.ui-timepicker-standard {
  border: 1px solid #D0D5DD !important;
  color: #98A2B3 !important;
  border-radius: 8px !important;
}

.ui-menu-item:hover a {
  border: none !important;
  color: #fff !important;
  background-color: var(--color) !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid var(--color) !important;
  background: var(--color) !important;
  color: #fff !important;
}

.card,
.ui-datepicker,
.dropdown-menu {
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.1), 0px 4px 6px -2px rgba(16, 24, 40, 0.05) !important;
}

.card-body.none-padding {
  padding: 0px !important;
}

.card-body table {
  margin-top: 0px !important;
}

table.display,
table.card {
  border-top: 1px solid rgba(0,0,0,.125) !important;
  border-bottom: 1px solid rgba(0,0,0,.125) !important;
  background-color: #fff;
}

.dataTable tbody tr td button svg.text-small,
.dataTable tbody tr td * button svg.text-small {
  font-size: 11px !important;
}

div.dataTables_wrapper div.dataTables_paginate {
  margin-bottom: 20px !important;
}

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

.form-area {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.125);
}

.dataTables_paginate {
  margin: 15px !important;
}

.space-div {
  margin-top: 70px !important;
}

#card-content.card,
#formCreate.card {
  border: 1px solid #E4E7EC;
  border-radius: 20px;
}

#card-content.card-header,
#formCreate.card-header {
  border-radius: 20px 20px 0px 0px;
}

#card-content.card-footer,
#formCreate.card-footer {
  border-radius: 0px 0px 20px 20px;
}

.sidebar-icon {
  color: rgba(0,0,0,.5);
}

.sidebar-icon span {
  top: -5px !important;
  position: relative !important;
}

.sidebar-icon {
  display: none;
  position: absolute;
  top: 20px;
  left: 25px;
  font-size: 20px;
}

.lists,
#side-footer,
#s-icon {
  display: none;
}

.sidebar-footer {
  position: absolute;
  bottom: 0;
}

.modal-content {
  border-radius: 20px;
}

.modal label {
  color: #344054;
}

.fade-in {
  animation: fadeOnIn ease 1s;
  -webkit-animation: fadeOnIn ease 1s;
  -moz-animation: fadeOnIn ease 1s;
  -o-animation: fadeOnIn ease 1s;
  -ms-animation: fadeOnIn ease 1s;
}

.fade-in-slow {
  animation: fadeOnIn ease 2s;
  -webkit-animation: fadeOnIn ease 2s;
  -moz-animation: fadeOnIn ease 2s;
  -o-animation: fadeOnIn ease 2s;
  -ms-animation: fadeOnIn ease 2s;
}

@keyframes fadeOnIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeOnIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeOnIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeOnIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeOnIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

.fade-out {
  animation: fadeOnOut ease 1s;
  -webkit-animation: fadeOnIn ease 1s;
  -moz-animation: fadeOnOut ease 1s;
  -o-animation: fadeOnOut ease 1s;
  -ms-animation: fadeOnOut ease 1s;
}

@keyframes fadeOnOut {
  100% {opacity:0;}
  0% {opacity:1;}
}

@-moz-keyframes fadeOnOut {
  100% {opacity:0;}
  0% {opacity:1;}
}

@-webkit-keyframes fadeOnOut {
  100% {opacity:0;}
  0% {opacity:1;}
}

@-o-keyframes fadeOnOut {
  100% {opacity:0;}
  0% {opacity:1;}
}

@-ms-keyframes fadeOnOut {
  100% {opacity:0;}
  0% {opacity:1;}
}

/* date picker */
.ui-datepicker {
  z-index: 100000 !important;
}

.ui-datepicker .ui-datepicker-header {
  padding: 0px !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: -1px !important;
}

.ui-datepicker table {
  font-size: .7em !important;
}

.ui-state-default {
  border-radius: 3px !important;
}

th.th-driver,
td.td-driver {
  border-right: solid 1px #dee2e6;
}

th.th-driver:last-child,
td.td-driver:last-child {
  border-right: none !important;
}

table.tb-small thead tr th {
  font-size: 8.5px !important;
}

table.tb-small tbody tr td {
  font-size: 12px !important;
}

table.tb-samll thead tr th,
table.tb-small tbody tr td {
  padding: 5px !important;
}

#example_wrapper, .card-body {
  overflow: scroll;
}

table.more-col {
  min-width: 1200px !important;
}

/* //table pagination */
.page-link {border: 0px solid #dee2e6;
}
.page-item a, .page-link:hover {color: var(--color);font-size:10px; border-radius: 8px;
}
.page-item.active .page-link {background-color: var(--color);
  border-radius: 8px; box-shadow: none;
}

.custom-input {
  position: relative;
}

.custom-input-label {
  position: absolute;
  top: calc(50%); /* Center vertically */
  left: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: all 0.3s ease;
}

.form-control:focus ~ .custom-input-label,
.form-control:not(:focus):not(:placeholder-shown) ~ .custom-input-label {
  top: calc(50% - 36px); /* up */
  transform: translateY(0);
  color: var(--color) !important;
  padding: 5px;
  font-size: 12px !important;
}

.form-control:focus{
  box-shadow: 0 0 5px var(--shadow-color);
  border: none !important;
}

.form-control:focus ~ .custom-input-label{
  font-size: 12px !important;
}

.form-control:hover {
  box-shadow: 0 0 5px var(--shadow-color);
}

.bi-toggle-on {
  color: var(--color) !important;
}

.text-warning {
  color: var(--color) !important;
}

.btn-warning {
  background-color: var(--color) !important;
  color: #f9f9f9 !important;
}

.btn-warning:hover {
  background-color: #f9f9f9 !important;
  color: var(--color) !important;
  border-color: var(--color) !important;
}

.btn-outline-warning {
  color: var(--color) !important;
  border-color: var(--color) !important;
}

.btn-outline-warning:hover {
  background-color: var(--color) !important;
  color: #f9f9f9 !important;
  border-color: #f9f9f9 !important;
}

/* select2-container */
.select2{
  width:100% !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 35px ;
}
.select2-container--default .select2-selection--single {
  border: 1px solid #D0D5DD !important;
  text-align: center;
}

.select2-container .select2-selection--single:hover {
  border-color: var(--color) !important;
}

.select2-container .select2-selection--single {
  height: 35px !important;
  border-radius: 8px !important;
}
.select2-container--default .select2-results > .select2-results__options {
  min-height: auto !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color) !important;
  color: white;
}
.select2-results__option--highlighted {
  background-color: var(--color) !important;
  color: #ffffff !important;
}
.select2-results__option--highlighted:hover {
  background-color: var(--color) !important;
  color: #ffffff !important;
}
.select2-results__option--selected {
  background-color: #ffa41b1a !important;
  color:rgb(77, 50, 0) !important;
}
.select2-search__field {
  border-radius: 14px !important;
}

option:is(:checked) {
  background-color: var(--color) !important;
}
.custom-select > option:hover {
  background-color: var(--color) !important;
}


.select2-results__options::-webkit-scrollbar, 
.select2-results__options::-webkit-scrollbar {width: 8px !important;height: 5px !important;
}
.select2-results__options::-webkit-scrollbar-track,
.select2-results__options::-webkit-scrollbar-track {background-color: #F5F6FA !important;
  border-radius: 42px !important;
}
.select2-results__options::-webkit-scrollbar-thumb,
.select2-results__options::-webkit-scrollbar-thumb {background: var(--shadow-color) !important;
  border-radius: 42px !important;
}

.select2-results__options::-webkit-scrollbar-thumb:hover,
.select2-results__options::-webkit-scrollbar-thumb:hover {background: var(--color) !important;
}
/* end */

/* set all table content to middle row */
.table td, .table th {
  vertical-align: middle !important;
}

.bg-warning {
  background-color: var(--shadow-color) !important;
}

/* Dark Mode - body */
body.dark-mode {
  background-color: #121212 !important;
  color: #fff;
}

#settingsSidebar {
  position: fixed;
  top: 0;
  right: -300px;
  height: 100%;
  background: #f8f9fa;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  z-index: 1050;
  padding: 20px;
}

#settingsSidebar.show {
  right: 0;
}

body.dark-mode .dataTables_wrapper {
  color: #e0e0e0;
}

body.dark-mode table.dataTable {
  background-color: #1c1c1c;
  color: #e0e0e0;
  border-color: #333;
}

body.dark-mode table.dataTable thead {
  background-color: #2a2a2a;
  color: #ffffff;
}

body.dark-mode table.dataTable tbody tr {
  background-color: #1f1f1f;
}

body.dark-mode table.dataTable tbody tr:hover {
  background-color: #4d4c4c;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #e0e0e0 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select {
  background-color: #2c2c2c;
  color: #e0e0e0;
  border: 1px solid #444;
}

body.dark-mode .form-control {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border: 1px solid #444;
}

body.dark-mode .form-control:focus {
  background-color: #2a2a2a;
  border-color: #6c5ce7; /* เปลี่ยนสีขอบเมื่อโฟกัส */
  color: #fff;
  box-shadow: 0 0 5px rgba(108, 92, 231, 0.5);
}

body.dark-mode .form-control::-webkit-input-placeholder {
  color: #bbb;
}

body.dark-mode .form-control:-ms-input-placeholder {
  color: #bbb;
}

body.dark-mode .form-control::placeholder {
  color: #bbb;
}

/* Dark Mode - .bg-white */
body.dark-mode .bg-white {
  background-color: #2a2a2a !important; /* สีพื้นหลังของ .bg-white ใน Dark Mode */
  color: #e0e0e0; /* สีตัวอักษรใน Dark Mode */
}

/* Light Mode - .bg-white (ค่า default) */
body:not(.dark-mode) .bg-white {
  background-color: #fff !important; /* สีพื้นหลังของ .bg-white ใน Light Mode */
  color: #292929; /* สีตัวอักษรใน Light Mode */
}

/* Dark Mode - .select2 */
body.dark-mode .select2-container .select2-selection {
  background-color: #2a2a2a; /* พื้นหลังของ select */
  color: #e0e0e0; /* สีของข้อความใน select */
  border: 1px solid #444; /* สีของขอบ */
}

body.dark-mode .select2-container .select2-selection:focus {
  border-color: #6c5ce7; /* สีขอบเมื่อโฟกัส */
  box-shadow: 0 0 5px rgba(108, 92, 231, 0.5);
}

body.dark-mode .select2-container .select2-selection .select2-selection__rendered {
  color: #e0e0e0; /* สีของตัวเลือกที่ถูกเลือก */
}

body.dark-mode .select2-container--open .select2-dropdown {
  background-color: #1f1f1f; /* พื้นหลังของ dropdown */
  border: 1px solid #444;
}

body.dark-mode .select2-container--open .select2-dropdown .select2-results__option {
  background-color: #2a2a2a; /* พื้นหลังของตัวเลือกใน dropdown */
  color: #e0e0e0; /* สีข้อความของตัวเลือก */
}

body.dark-mode .select2-container--open .select2-dropdown .select2-results__option:hover {
  background-color: #333; /* สีเมื่อเอาเมาส์ไปวางบนตัวเลือก */
}

/* Dark Mode - card-header */
body.dark-mode .card-header {
  background: linear-gradient(145deg, #1c1c1c, #2a2a2a);
  color: #e0e0e0;
  border-color: #333;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Light Mode - card-header (ค่า default) */
body:not(.dark-mode) .card-header {
  background: #fff; /* สีพื้นหลังของ card-header ใน Light Mode */
  color: #292929; /* สีข้อความใน Light Mode */
  border-color: #ddd; /* สีขอบใน Light Mode */
  box-shadow: none; /* ไม่มีเงาใน Light Mode */
}

/* Dark Mode - .dropdown-menu */
body.dark-mode .dropdown-menu {
  background-color: #333 !important; /* พื้นหลังของ dropdown ใน Dark Mode */
  color: #e0e0e0 !important; /* สีตัวอักษรใน dropdown */
  border: 1px solid #444; /* ขอบของ dropdown */
}

body.dark-mode .dropdown-item {
  color: #e0e0e0 !important; /* สีของ item ใน dropdown */
}

body.dark-mode .dropdown-item:hover {
  background-color: #444 !important; /* พื้นหลังของ item ใน dropdown เมื่อ hover */
  color: #fff !important; /* สีของ item เมื่อ hover */
}

/* Light Mode - .dropdown-menu */
body:not(.dark-mode) .dropdown-menu {
  background-color: #fff !important; /* พื้นหลังของ dropdown ใน Light Mode */
  color: #292929 !important; /* สีตัวอักษรใน dropdown */
  border: 1px solid #ddd; /* ขอบของ dropdown */
}

body:not(.dark-mode) .dropdown-item {
  color: #292929 !important; /* สีของ item ใน dropdown */
}

body:not(.dark-mode) .dropdown-item:hover {
  background-color: var(--color);
  color: #fff !important; /* สีของ item เมื่อ hover */
}

/* Dark Mode - .thead-light */
body.dark-mode .thead-light {
  background-color: #444 !important; /* พื้นหลังของ thead ใน Dark Mode */
  color: #fff !important; /* สีตัวอักษรของ thead */
}

/* Light Mode - .thead-light */
body:not(.dark-mode) .thead-light {
  background-color: #f8f9fa !important; /* พื้นหลังของ thead ใน Light Mode */
  color: #292929 !important; /* สีตัวอักษรของ thead */
}

/* Dark Mode - .swal2-popup */
body.dark-mode .swal2-popup {
  color: #e0e0e0 !important; /* สีตัวอักษรใน Dark Mode */
  background-color: #344054;
}

/* Light Mode - .swal2-popup */
body:not(.dark-mode) .swal2-popup {
  color: #333 !important; /* สีตัวอักษรใน Light Mode (สีดำอ่อน ๆ ที่ดูดี) */
  background-color: #e0e0e0;
}

/* Dark Mode - modal-content */
body.dark-mode .modal-content {
  background-color: #333; /* สีพื้นหลังของ modal-content ใน dark mode */
  color: #e0e0e0; /* สีตัวอักษรใน dark mode */
  border-color: #444; /* สีขอบใน dark mode */
}

/* Light Mode - modal-content */
body:not(.dark-mode) .modal-content {
  background-color: #f8f9fa; /* สีพื้นหลังของ modal-content ใน light mode */
  color: #333; /* สีตัวอักษรใน light mode */
  border-color: #ddd; /* สีขอบใน light mode */
}

/* Dark Mode - scrollbar */
body.dark-mode #sidebar-wrapper::-webkit-scrollbar-track {
  background-color: #444;
}
body.dark-mode #sidebar-wrapper::-webkit-scrollbar-thumb {
  background: #ddd;
}

/* Light Mode - scrollbar */
body:not(.dark-mode) #sidebar-wrapper::-webkit-scrollbar-track {
  background-color: #faf5f5;
}
body:not(.dark-mode) #sidebar-wrapper::-webkit-scrollbar-thumb {
  background: #D1D1D6;
}

/* Light Mode - table */
body:not(.dark-mode) table {
  color: #333;
}
body.dark-mode table {
  color: #D1D1D6;
}

/* Light Mode - table */
body:not(.dark-mode) .card-income {
  background: linear-gradient(135deg, #1f3004, #597024) !important; /* ไล่เฉดสีแนวทะแยง */
}
body.dark-mode .card-income {
  background: #444;
}

body.dark-mode .page-item.disabled .page-link {
  background: none;
  border:none;
}

body.dark-mode .page-item:last-child .page-link {
  background: none;
  border:none;
}

body.dark-mode .page-link {
  background: none !important;
  border:none;
}

.btn {
  padding: .25rem .5rem;
}
.input-group-text {
  padding:0;
}