/*
#F2F6EF
#DBE6D1
#BED1AB
#ADC596
#96B578
#80A45B
#69874A
#52693A
#3B4C2A
#242E19
#0D1009
*/

:root {
  --primary:#7F2020;
	--secondary:#869B7E;
	--green-soft:#C9CAAC;
	--stone:#DCCFC0;
	--background:#F4F1E8;
	--text-primary:#241010;
	--text-secondary:#644949;
	--border:#F1F0E7;
	--white:#FFFFFF;
	--paper:#E6E1DE;
	--success-text:#6B8E5A;
	--success-bg:#F0F2E4;
	--error-text:#D46057;
	--error-bg:#F9ECE9;
	--warning-text:#C68B39;
	--warning-bg:#FCF4E0;
	--information-text:#577599;
	--information-bg:#F1F3F7; 
	--disabled-text:#B0AEAD;
	--disabled-bg:#E5E3E1;
	--grey: #B6B6B6;
	--ink-soft:#8a8478;


	--bg:#e8e0d4;
	--sidebar:#fff;
	--card:#fff;
	--olive:#7a8450;
	--olive-dark:#5f6840;
	--red:#9e4a4a;
	--red-bg:rgba(158,74,74,.08);
	--ink:#2c2a24;

	--line:#d9d1c4;
	--shadow:0 2px 12px rgba(0,0,0,.06);
	--radius:12px;
}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url(https://heroicons.com/);

h1 {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif;
	font-size: 32px;
	font-weight: 500;
	text-transform: capitalize;
}

h2 {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif;
	font-size: 24px;
	font-weight: 500;
	text-transform: capitalize;
}

h3 {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif;
	font-size: 20px;
	font-weight: 500;
	text-transform: capitalize;
}

body {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif;
	font-size: 16px;
	background-color: var(--background) !important;
	color: var(--text-primary);
	margin-bottom: 80px !important;
}

caption {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif;
	font-size: 12px;
	font-weight: 400;
}

/* Breadcrumb */
  .breadcrumb {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif !important;
	font-size:12px;
	text-transform: capitalize;
	color:var(--disabled-text);
	margin-bottom:16px;
	display:flex;
	align-items:center;
	gap:4px;
	flex-wrap:wrap;
}
  .breadcrumb .sep {
	margin:0 2px;
	color:var(--disabled-text);
}
  .breadcrumb .active {
	font-family:'Roboto','IBM Plex Sans Thai',sans-serif !important;
	color:var(--primary);
	font-weight:600;
}
  .bc-icon {
	font-size:13px;
	width:18px;
	text-align:center;
	color:var(--disabled-text);
}

#breadcrumb {
  display: flex;
  align-items: flex-start;
  gap: 4px; /* เว้นระยะห่างระหว่างไอคอนและข้อความ */
  font-family:'Roboto','IBM Plex Sans Thai',sans-serif !important;
}

#breadcrumb span:not(.active):not(.sep) {
  color: var(--disabled-text); /* สีเทาสำหรับ item ที่ไม่ใช่ตัวปัจจุบัน */
}

#breadcrumb .sep {
  display: inline-flex;
  align-items: center;
  color: var(--disabled-text); /* สีเทาอ่อนสำหรับตัวคั่น */
}

#breadcrumb .active {
  font-weight: bold;
  color: var(--primary); /* สีเข้มสำหรับโฟลเดอร์ปัจจุบัน */
}

#breadcrumb .bc-icon {
  color: var(--disabled-text); /* สีน้ำเงินสำหรับไอคอนโฟลเดอร์หลัก */
}


a {
	color: var(--secondary) !important;
	text-decoration: none !important;
}

a:hover {
	color: var(--dark-olive) !important;
	text-decoration: none !important;
}

.nav-link {
	color: var(--secondary) !important;
}

.nav-link:hover {
	color: var(--dark-olive) !important;
}
.nav-link.active {
	color: var(--dark-olive) !important;
	background-color: #ffffff !important;
}

.tab-content {
	background-color: #ffffff !important;
}

.navbar {
	--bs-tertiary-bg-rgb: 255,255,255 !important;
}

.nav-bg {
	background-color: #fff !important;
	box-shadow: 3px 3px 10px 0px rgb(0 0 0 / 0.1) !important;
}

.navbar-toggler {
	border: none !important;
}

.menu-shadow {
	display: block;
	justify-content: center;
	border: 0 !important;
	box-shadow: 3px 3px 10px 0px rgb(0 0 0 / 0.1) !important;
	height: 270px !important;
    width: -webkit-fill-available;
    border-radius: 20px !important;
    font-weight: 500;
    font-size: 32px;
}

.menu-shadow:hover {
	display: block;
	border: 0 !important;
	box-shadow: 3px 3px 10px 0px rgb(0 0 0 / 0.1) !important;
	transition: 0.5s;
	height: 270px !important;
    width: -webkit-fill-available;
    border-radius: 20px !important;
}

.primary-text-color.active {
	color: #3C6D2B !important;
}

.btn-ghost {
	min-width: 110px !important;
	background-color: transparent !important;
	border: none !important;
	color: var(--primary) !important;
}
.btn-ghost:hover {
	background-color: transparent !important;
	color: var(--secondary) !important;
	border: none !important;
}


.btn-secondary {
	min-width: 110px !important;
	background-color: var(--secondary) !important;
	border: none !important;
}
.btn-secondary:hover {
	background-color: rgba(134, 155, 126, 0.8) !important;
	color: var(--white) !important;
	border: none !important;
}

.btn-secondary:disabled,
.btn-primary:disabled {
	color: var(--disabled-text) !important;
	background-color: var(--disabled-bg) !important;
	cursor:not-allowed;
}

.btn-primary {
	min-width: 110px !important;
	background-color: var(--primary) !important;
	border: none !important;
}
a.btn-primary {
	color: var(--white) !important;
	border: none !important;
}

.btn-primary:hover {
	background-color: rgba(127, 32, 32, 0.6) !important;
	border: none !important;
}

.btn-outline-primary {
	min-width: 110px !important;
	background-color: transparent !important;
	border-color: var(--primary) !important;
	color: var(--primary) !important;
}

.btn-outline-primary:hover {
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
	color: var(--white) !important;
}

.btn-outline-secondary {
	min-width: 110px !important;
	background-color: transparent !important;
	border-color: var(--secondary) !important;
	color: var(--secondary) !important;
}

.btn-outline-secondary:hover {
	background-color: rgba(134, 155, 126, 0.8) !important;
	border-color: rgba(134, 155, 126, 0.8) !important;
	color: var(--white) !important;
}
/*.btn-outline-secondary:focus {
	min-width: 110px !important;
	background-color: transparent !important;
	border-color: var(--sage) !important;
}*/

.breadcrumb {
	font-size: 14px !important;
	font-weight: 400;
}

.breadcrumb-item.active {
	font-weight: 500;
	color: var(--primary) !important;
}

.breadcrumb-item.active a {
	font-weight: 500;
	color: var(--primary) !important;
}

.breadcrumb-item+.breadcrumb-item::before {
	color: var(--sage) !important;
}

.card:hover {
	background-color: var(--success-bg);
	color: var(--success-text);
}

.form-check input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

input[type="radio"]:focus {
  outline: 2px solid #CAD3A5; /* เปลี่ยนสีเส้นขอบเมื่อถูกโฟกัส */
  box-shadow: 0 0 5px rgba(255, 87, 34, 0.5); /* เพิ่มเงาให้ดูโดดเด่น */
}

.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-bg: var(--bs-body-bg);
    --bs-pagination-border-width: var(--bs-border-width);
    --bs-pagination-border-color: var(--border) !important;
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-hover-color: var(--success-text) !important;
    --bs-pagination-hover-bg: var(--success-bg) !important;
    --bs-pagination-hover-border-color: var(--border) !important;
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-bg: var(--light-sage);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-pagination-active-color: #fff !important;
    --bs-pagination-active-bg: #8A9553 !important;
    --bs-pagination-active-border-color: #8A9553 !important;
    --bs-pagination-disabled-color: var(--text-disable);
    --bs-pagination-disabled-bg: var(--disable);
    --bs-pagination-disabled-border-color: var(--disable);
}

.active>.page-link, .page-link.active {
	border-color: #8A9553 !important;
}

.active>.page-link, .page-link.active:hover {
	color: #fff !important;
}

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


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

table {
	background-color: transparent !important;
}

/*.form-control:focus {
	border-color: var(--light-sage) !important;
}*/

input.form-control:focus {
  outline: 2px solid #CAD3A5 !important; /* เปลี่ยนสีเส้นขอบเมื่อถูกโฟกัส */
  box-shadow: 0 0 5px rgba(255, 87, 34, 0.5); /* เพิ่มเงาให้ดูโดดเด่น */
  border-color: #8A9553 !important;
}

.active>.dropdown-item, .dropdown-item.active:hover {
	--bs-dropdown-link-active-bg: #CAD3A5 !important;
}

.dropdown-menu a.dropdown-item:selected {
	background-color: var(--success-bg) !important;
}

.dropdown-menu a.dropdown-item:hover {
	background-color: var(--success-bg) !important;
}

input.radio {
	width: 20px;
	height: 20px;
	margin: 4px;
}

input.radio:checked {
	width: 20px;
	height: 20px;
	margin: 4px;
}

input.radio:focus {
	background-color: var(--sage) !important;
}

.card-radio {
	padding: 6px;
	border-radius: 10px !important;
}

.details {
	margin: 10px;
}

.btn-check:checked+.btn {
	background-color: var(--dark-olive) !important;
	border-color: var(--dark-olive) !important;
	color: var(--white) !important;

}

.accordion-button:not(.collapsed) {
    color: var(--success-text) !important;
    background-color: var(--success-bg) !important;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-button:focus {
	outline: 0;
	border-color: transparent !important;
	box-shadow: none !important;
}

.link-file {
	font-size: 14px !important;
}

.sub-table {
	width: 60px;
}

.btn-link {
	min-width: 80px !important;
	color: var(--sage) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}

.btn-link:hover {
	min-width: 80px !important;
	color: var(--dark-olive) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}

.row-checkbox {
	width: 20px !important;
	height: 20px !important;
}

input.row-checkbox:checked {
	background-color: var(--sage) !important;
}

a.disabled {
	color: var(--text-disable) !important;
}

/*[popover] {
  margin: initial;
  position: relative;
  left: 40%;
  top: 20%;
}*/
[popover] {
  margin: initial;
  position-area: right;
}
.popover-menu {
  list-style: none;
  border: none;
  box-shadow: 3px 3px 10px 0px rgb(0 0 0 / 0.1) !important;
  background-color: var(--background);
  margin: 10px;
  border-radius: 10px;
}
.popover-menu li {
  /*border-bottom: 1px solid var(--dark-olive);*/
  padding: 10px;
  display: block;
}
.popover-menu li:hover {
  /*border-bottom: 1px solid var(--dark-olive);*/
  padding: 10px;
  display: block;
  background-color: var(--success-bg);
  border-radius: 50px;
}
.popover-menu a {
  
  display: block;
}
.popover-menu a:hover {
  
  padding: 0px;
  display: block;
  
}