body {
  color: #2F2F2F;
  font-family: "Kanit", sans-serif;
}

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 76px !important;
}

/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks>* {
  display: block !important;
}

.demo-inline-spacing>* {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing>* {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg>* {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing-lg.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl>* {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing-xl.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}

.layout-demo-placeholder img {
  width: 900px;
}

.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

.btn-primary {
  background-color: #FF5200;
  border-color: #FF5200;
  box-shadow: 0 0.125rem 0.25rem 0 rgba(243, 73, 0, 0.4)
}

.btn-primary:hover {
  background-color: #ff6822;
  border-color: #ff6822;
  transform: translateY(-1px);
}

.btn-check:focus+.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
  background-color: #ff6822;
  border-color: #ff6822;
}

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

.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
  border-color: #FF5200 !important;
}

a {
  color: #FF5200;
}

a:hover {
  color: #fd5c11;
}

.bg-menu-theme .menu-inner>.menu-item.active>.menu-link {
  color: #FF5200;
  background-color: #ff510033 !important;
}

.bg-menu-theme .menu-inner>.menu-item.active:before {
  background-color: #FF5200;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
  background-color: #FF5200;
  border-color: #FF5200;
  box-shadow: 0 0.125rem 0.25rem 0 rgba(243, 73, 0, 0.4)
}

.nav .nav-link:hover,
.nav .nav-link:focus {
  color: #FF5200;
}

.alert-success {
  background-color: #b0ef8b59;
  border-color: #b0ef8b59;
  color: #6A994E;
}

form-select:focus {
  border-color: #FF5200 !important;
}

.form-select:focus-visible {
  border-color: #FF5200 !important;
}

.table-sm {
  font-size: 14px;
}

.save-status {
  /* Base styles for the span containing the icon */
  display: inline-block;
  line-height: 1;
}

.save-status i,
.new-item-status i {
  /* Apply to both existing and new status icons */
  /* Styles for the icon itself */
  font-size: 1.2em;
  /* Adjust icon size */
  vertical-align: middle;
  opacity: 0.9;
}

/* REMOVED custom color rules for .save-status.saving i, etc. */

/* Input border styles remain the same */
.editable-cell-input.saving,
.new-item-row input.saving {
  border-color: orange;
}

.editable-cell-input.success,
.new-item-row input.success {
  border-color: lightgreen;
}

.editable-cell-input.error,
.new-item-row input.error {
  border-color: lightcoral;
}

/* Style for the new row inputs */
.new-item-row td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  vertical-align: top;
  /* Align top for better label association */
}

.new-item-row .form-control {
  margin-bottom: 0.25rem;
  /* Add some space below inputs */
}

.new-item-row .action-buttons {
  white-space: nowrap;
  /* Prevent buttons from wrapping */
}

.new-item-row .action-buttons .btn {
  margin-right: 0.25rem;
}

/* Add this to your CSS */
.input-wrapper {
  position: relative;
}

.input-feedback-icon {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  /* Adjust as needed */
  transform: translateY(-50%);
  font-size: 1.1rem;
  /* Adjust icon size */
  pointer-events: none;
  /* Prevent icon from interfering with input focus */
  z-index: 3;
  /* Ensure icon is above input background */
}

/* Style for the input itself when feedback icon is present */
.signatory-input {
  /* Add padding to prevent text overlapping the icon */
  padding-right: 2.5rem !important;
  /* Adjust as needed, use !important if necessary */
}


/* Background colors for feedback (you might already have these) */
.input-saved-success {
  background-color: #d1e7dd !important;
  /* Light green */
  border-color: #a3cfbb !important;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.input-saved-error {
  background-color: #f8d7da !important;
  /* Light red */
  border-color: #f1aeb5 !important;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Optional: Smooth transition back to normal */
.signatory-input {
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, padding-right 0.3s ease-in-out;
}

/* Simple temporary feedback styles */
.input-saved-success {
  border-color: #198754 !important;
  /* Bootstrap success green */
  background-color: #d1e7dd !important;
  /* Lighter green */
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.input-saved-error {
  border-color: #dc3545 !important;
  /* Bootstrap danger red */
  background-color: #f8d7da !important;
  /* Lighter red */
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

/* Add this to your CSS */
.input-wrapper {
  position: relative;
}

.input-feedback-icon {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  /* Adjust as needed */
  transform: translateY(-50%);
  font-size: 1.1rem;
  /* Adjust icon size */
  pointer-events: none;
  /* Prevent icon from interfering with input focus */
  z-index: 3;
  /* Ensure icon is above input background */
}

/* Style for the input itself when feedback icon is present */
.signatory-input {
  /* Add padding to prevent text overlapping the icon */
  padding-right: 2.5rem !important;
  /* Adjust as needed, use !important if necessary */
}


/* Background colors for feedback (you might already have these) */
.input-saved-success {
  background-color: #d1e7dd !important;
  /* Light green */
  border-color: #a3cfbb !important;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.input-saved-error {
  background-color: #f8d7da !important;
  /* Light red */
  border-color: #f1aeb5 !important;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Optional: Smooth transition back to normal */
.signatory-input {
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, padding-right 0.3s ease-in-out;
}


.datepicker {
  border-radius: var(--bs-border-radius-lg, 0.5rem);
  /* Slightly larger radius */
  border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175));
  /* Lighter border */
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  /* Softer shadow */
  padding: 0.75rem;
  /* More padding */
  background-color: var(--bs-body-bg, #fff);
}

/* --- Header (Month/Year Switch & Arrows) --- */
.datepicker-days .datepicker-switch,
.datepicker-months .datepicker-switch,
.datepicker-years .datepicker-switch {
  font-weight: 500;
  /* Medium weight */
  font-size: 1rem;
  color: var(--bs-body-color, #212529);
  padding: 0.5rem 0;
  border-radius: var(--bs-border-radius, 0.375rem);
  transition: background-color 0.15s ease-in-out;
}

.datepicker-days .datepicker-switch:hover,
.datepicker-months .datepicker-switch:hover,
.datepicker-years .datepicker-switch:hover {
  background-color: rgba(0, 0, 0, 0.04);
  /* Very subtle hover */
  color: inherit;
  /* Keep text color */
}

.datepicker .prev,
.datepicker .next {
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  border-radius: 50%;
  /* Circular arrows */
  color: var(--bs-secondary-color, #6c757d);
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.datepicker .prev:hover,
.datepicker .next:hover {
  background-color: rgba(0, 0, 0, 0.04);
  /* Very subtle hover */
  color: var(--bs-body-color, #212529);
}

/* --- Days of Week Header --- */
.datepicker-days thead tr:nth-child(2) th {
  font-weight: 400;
  /* Normal weight */
  font-size: 0.75rem;
  /* Smaller */
  color: var(--bs-secondary-color, #6c757d);
  padding: 0.6rem 0;
  border-radius: 0;
}

/* --- General Cell Styling (Days, Months, Years) --- */
.datepicker td,
.datepicker th {
  border-radius: 50%;
  /* Make all cells circular */
  border: none;
  width: 36px;
  /* Fixed size for circular look */
  height: 36px;
  line-height: 36px;
  padding: 0;
  text-align: center;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  font-size: 0.875rem;
  /* MUI-like font size */
}

/* --- Day Cells --- */
.datepicker-days td.day:not(.disabled):not(.active):not(.today):hover {
  background-color: rgba(0, 0, 0, 0.04);
  /* Subtle hover */
  color: var(--bs-body-color, #212529);
  cursor: pointer;
}

/* --- Old/New Month Days (Dimmed) --- */
.datepicker-days td.old,
.datepicker-days td.new {
  color: var(--bs-secondary-color, #6c757d);
  opacity: 0.6;
}

.datepicker-days td.old:hover,
.datepicker-days td.new:hover {
  background-color: transparent;
  /* No hover effect */
}


/* --- Today's Date --- */
.datepicker-days td.today {
  /* MUI often just uses a border or different text color for today */
  background-color: transparent;
  color: #FF5200;
  /* Use your theme's primary color for text */
  border: 1px solid #FF5200;
  /* Add border with primary color */
  font-weight: 400;
  /* Normal weight unless selected */
}

.datepicker-days td.today:hover {
  background-color: rgba(255, 82, 0, 0.06);
  /* Subtle primary color hover */
}

/* --- Selected Date --- */
.datepicker-days td.active,
.datepicker-days td.active:hover {
  background-color: #FF5200;
  /* Use your theme's primary color */
  color: #fff;
  box-shadow: none;
  /* Remove BS shadow */
  font-weight: 500;
  /* Medium weight when selected */
  border: none;
  /* Remove today's border if selected */
}

/* Ensure today+active uses active style */
.datepicker-days td.today.active,
.datepicker-days td.today.active:hover {
  background-color: #FF5200 !important;
  /* Explicitly set primary color */
  color: #fff !important;
  border: none !important;
  /* Remove border */
}


/* --- Disabled Dates --- */
.datepicker-days td.disabled,
.datepicker-days td.disabled:hover {
  background-color: transparent;
  color: var(--bs-secondary-color, #6c757d);
  opacity: 0.4;
  cursor: default;
}

/* --- Month & Year Views --- */
.datepicker-months td span,
.datepicker-years td span {
  display: block;
  width: auto;
  /* Let content determine width */
  height: 3rem;
  line-height: 3rem;
  margin: 0.2rem;
  padding: 0 1rem;
  /* Add horizontal padding */
  cursor: pointer;
  border-radius: var(--bs-border-radius-pill, 50rem);
  /* Pill shape */
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  font-size: 0.875rem;
}

.datepicker-months td span:hover,
.datepicker-years td span:hover {
  background-color: rgba(0, 0, 0, 0.04);
  /* Subtle hover */
}

.datepicker-months td span.active,
.datepicker-months td span.active:hover,
.datepicker-years td span.active,
.datepicker-years td span.active:hover {
  background-color: #FF5200;
  /* Primary color background */
  color: #fff;
  box-shadow: none;
  /* Remove shadow */
  font-weight: 500;
}

.datepicker-months td span.disabled,
.datepicker-months td span.disabled:hover,
.datepicker-years td span.disabled,
.datepicker-years td span.disabled:hover {
  background-color: transparent;
  color: var(--bs-secondary-color, #6c757d);
  opacity: 0.4;
  cursor: default;
}

/* --- CSS for Input Validation Feedback (SVG Version) --- */
.validation-icon {
  position: absolute;
  right: 5px; /* Adjust as needed */
  top: 50%;
  transform: translateY(-50%);
  /* font-size: 1.2em; NO LONGER NEEDED for SVG size */
  display: inline-block; /* Make the span always visible (but content hidden initially) */
  line-height: 0; /* Prevent span from taking extra height */
  pointer-events: none;
  z-index: 2;
}

/* Hide both SVGs by default */
.validation-icon svg {
    display: none;
    vertical-align: middle; /* Align SVG nicely if needed */
}

/* Success State */
td.input-success {
  background-color: rgba(40, 199, 111, 0.15) !important;
  transition: background-color 0.3s ease-in-out;
}
/* Show SUCCESS SVG and set its color */
td.input-success .validation-icon svg.icon-success {
  display: inline-block !important; /* Show the success icon */
  fill: var(--bs-success); /* Set color using CSS variable */
}
/* Ensure error icon is hidden in success state */
td.input-success .validation-icon svg.icon-error {
    display: none !important;
}


/* Error State */
td.input-error {
  background-color: rgba(255, 62, 62, 0.15) !important;
  transition: background-color 0.3s ease-in-out;
}
/* Show ERROR SVG and set its color */
td.input-error .validation-icon svg.icon-error {
  display: inline-block !important; /* Show the error icon */
  fill: var(--bs-danger); /* Set color using CSS variable */
}
/* Ensure success icon is hidden in error state */
td.input-error .validation-icon svg.icon-success {
    display: none !important;
}


/* Style to remove feedback */
td.input-feedback-clear {
  background-color: transparent !important;
  transition: background-color 0.5s ease-out;
}
/* Hide BOTH SVGs when clearing */
td.input-feedback-clear .validation-icon svg {
  display: none !important;
}