/* 
  ********** Theme **********
*/

/* Embed Font */
@import url('../../assets/fonts/noto-sans-thai-v25-latin_latin-ext_thai/noto-sans-thai-stylesheet.css');
@import url('../../assets/fonts/kanit-v15-latin_latin-ext_thai_vietnamese/kanit-stylesheet.css');

body {
  font-family: var(--primary-ci-font);
  background-color: #F0F3F7;
}
/* Variable */
:root {
  --primary-ci-font: 'Noto Sans Thai', 'Helvetica Neue', Arial, sans-serif;
  --primary-ci-color-110: #144734;            /* Primary Value Up         */
  --primary-ci-color-100: #437B58;            /* Primary                  */
  --primary-ci-color-90: #B3E1A5;             /* Primary Value Down       */
  --primary-ci-color-rgb-110: 20, 71, 52;       /* Primary RGB Value Up     */
  --primary-ci-color-rgb-100: 67, 123, 88;      /* Primary RGB              */
  --primary-ci-color-rgb-90: 179, 225, 165;     /* Primary RGB Value Down   */

  --secondary-ci-color-100: #E55205;          /* Secondary                */
  --secondary-ci-color-rgb-100: 229, 82, 5;     /* Secondary RGB            */
}
/* Button */
.btn-primary {
  --bs-btn-color: var(--primary-ci-color-100);
  --bs-btn-bg: var(--primary-ci-color-90);
  --bs-btn-border-color: var(--primary-ci-color-90);
  --bs-btn-hover-color: var(--primary-ci-color-100);
  --bs-btn-hover-bg: rgba(var(--primary-ci-color-rgb-90), 0.75);
  --bs-btn-hover-border-color: rgba(var(--primary-ci-color-rgb-90), 0.75);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--primary-ci-color-100);
  --bs-btn-active-bg: rgba(var(--primary-ci-color-rgb-90), 0.75);
  --bs-btn-active-border-color: var(--primary-ci-color-90);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary-ci-color-90);
  --bs-btn-disabled-bg: var(--primary-ci-color-90);
  --bs-btn-disabled-border-color: var(--primary-ci-color-90);
}
.btn-outline-primary {
  --bs-btn-color: var(--primary-ci-color-100);
  --bs-btn-bg: var(--primary-ci-color-90);
  --bs-btn-border-color: var(--primary-ci-color-90);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(var(--primary-ci-color-rgb-100));
  --bs-btn-hover-border-color: rgba(var(--primary-ci-color-rgb-100));
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-ci-color-100);
  --bs-btn-active-border-color: var(--primary-ci-color-100);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary-ci-color-100);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--primary-ci-color-100);
  --bs-gradient: none;
}
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}
.btn-outline-secondary {
  --bs-btn-color: #000;
  --bs-btn-border-color: #ddd;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f8f8;
  --bs-btn-hover-border-color: #ddd;
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ddd;
  --bs-btn-active-border-color: #ddd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ddd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ddd;
  --bs-gradient: none;
}
.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--primary-ci-color-100);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: rgba(var(--primary-ci-color-rgb-100), 0.75);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--primary-ci-color-100);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  text-decoration: none;
}
.btn-link-black {
  --bs-btn-font-weight: 400;
  --bs-btn-color: #000;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--primary-ci-color-100);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--primary-ci-color-100);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  text-decoration: none;
}
.btn-link-white {
  --bs-btn-font-weight: 400;
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: rgba(255, 255, 255, 0.50);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  text-decoration: none;
}
.btn-ci-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--secondary-ci-color-100);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(var(--secondary-ci-color-rgb-100), 0.75);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--secondary-ci-color-100);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}
.btn-ci-outline-secondary {
  --bs-btn-color: var(--secondary-ci-color-100);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--secondary-ci-color-100);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--secondary-ci-color-100);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}
/* Text Color */
.text-primary-110 {
  color: rgba(var(--primary-ci-color-rgb-110), var(--bs-text-opacity)) !important;
}
.text-primary {
  color: rgba(var(--primary-ci-color-rgb-100), var(--bs-text-opacity)) !important;
}
.text-primary-90 {
  color: rgba(var(--primary-ci-color-rgb-90), var(--bs-text-opacity)) !important;
}
.text-ci-secondary {
  color: rgba(var(--secondary-ci-color-rgb-100), var(--bs-text-opacity)) !important;
}
/* Background Color */
.bg-primary-110 {
  background-color: rgba(var(--primary-ci-color-rgb-110), var(--bs-bg-opacity)) !important;
}
.bg-primary {
  background-color: rgba(var(--primary-ci-color-rgb-100), var(--bs-bg-opacity)) !important;
}
.bg-primary-90 {
  background-color: rgba(var(--primary-ci-color-rgb-90), var(--bs-bg-opacity)) !important;
}
.bg-ci-secondary {
  background-color: rgba(var(--secondary-ci-color-rgb-100), var(--bs-bg-opacity)) !important;
}
/* Border Color */
.border-primary {
  border-color: rgba(var(--primary-ci-color-rgb-100), var(--bs-border-opacity)) !important;
}
/* List Group */
.list-group-item {
  position: relative;
  display: block;
  padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
  color: var(--bs-list-group-color);
  text-decoration: none;
  background-color: #F8F8F8;
  border: none;
}
.list-group-item.active {
  z-index: 2;
  color: var(--bs-list-group-active-color);
  background-color: var(--primary-ci-color-100);
  border-color: var(--bs-list-group-active-border-color);
}
.list-group-item-action:hover, .list-group-item-action:focus {
  z-index: 1;
  color: #fff;
  text-decoration: none;
  background-color: var(--primary-ci-color-100);
}
.list-group-item i {
  color: var(--primary-ci-color-100);
}
.list-group-item.active i {
  color: #fff;
}
.list-group-item:hover i {
  color: #fff;
}
/* Page Link */
.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--primary-ci-color-100);
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.page-link:hover {
  z-index: 2;
  color: var(--primary-ci-color-100);
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
}
.page-link.active, .active > .page-link {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--primary-ci-color-100);
  border-color: var(--primary-ci-color-100);
}
.page-link:focus {
  z-index: 3;
  color: var(--primary-ci-color-100);
  background-color: var(--bs-pagination-focus-bg);
  outline: 0;
  box-shadow: var(--bs-pagination-focus-box-shadow);
}
/* Nav Bar */
.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: #fff;
  text-decoration: none;
  background: none;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: #fff;
  background: var(--primary-ci-color-100);
}
.nav-link:hover, .nav-link:focus {
  color: var(--primary-ci-color-90);
}
/* Dropdown */
.dropdown-item.active, .dropdown-item:active {
  color: var(--primary-ci-color-100);
  text-decoration: none;
  background-color: rgba(var(--primary-ci-color-rgb-100), 0.25);
}
/* For Tab */
.nav-pills .nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: #8D8D8D;
  text-decoration: none;
  background: #E4E9F0;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--primary-ci-color-100);
  background-color: var(--primary-ci-color-90);
}
/* Accordion */
.accordion-button:not(.collapsed) {
  color: var(--primary-ci-color-100);
  background-color: rgba(var(--primary-ci-color-rgb-90), 0.5);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}