body {
    font-family: "Noto Sans Thai", sans-serif;
    /* font-family: "Noto Serif Thai", serif; */
    /* font-family: "Sarabun", sans-serif; */
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    /* background-color: oklch(96.7% 0.003 264.542); */
    font-size: 16px;
    display: flex;
    flex-direction: column;
}

html,
body {
    height: 100%;
}

.font-serif {
    font-family: "Noto Serif Thai", serif;
}

.font-sans-serif {
    font-family: "Noto Sans Thai", sans-serif;
}

button:disabled {
    cursor: not-allowed;
    pointer-events: all !important;
}

select {
    cursor: pointer;
}

input[type="checkbox"] {
    cursor: pointer;
}

input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

input[type="text"]:read-only {
    cursor: default;
}

.text-sub-rel {
    font-size: 0.75em;
    color: #6c757d;
}

.modal-dialog-custom {
    position: fixed;
    top: 1rem;
    right: 1rem;
    margin: 0;
    min-width: 350px;
}

.modal-dialog-custom-left {
    position: fixed;
    top: 1rem;
    left: 1rem;
    margin: 0;
    min-width: 350px;
}

input:disabled {
    cursor: not-allowed;
}

button {
    font-family: "Noto Sans Thai", sans-serif !important;
}

input[type="text"] .datepicker {
    cursor: pointer !important;
}

.alert-modal-2 {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    padding: 2em;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.1); /* optional glass effect */
    border-radius: 12px;
}

.fade-slide {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 5s ease, transform 5s ease;
}

.fade-slide.hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

/* @media (prefers-color-scheme: dark) {
  body {
    background-color: oklch(21% 0.034 264.665);
    color: #ffffff;
  }

  .card {
    background-color: #1e1e1e;
    border-color: #444;
  }

  .btn {
    background-color: #333;
    color: #fff;
  }
} */

.tooltip {
    font-family: "Noto Serif Thai", serif;
}

.nav-breadcrumb {
    font-family: "Noto Sans Thai", sans-serif;
}

.square {
    aspect-ratio: 1 / 1;
    width: 200px; /* or any width */
}

/* sm breakpoint */
@media (min-width: 576px) {
    .fs-sm-5 {
        font-size: 1.25rem !important;
    }

    .border-sm-end {
        border-right: 1px solid var(--bs-border-color);
    }
}

/* md breakpoint */
@media (min-width: 768px) {
    .fs-md-5 {
        font-size: 1.25rem !important;
    }

    .border-md-end {
        border-right: 1px solid var(--bs-border-color);
    }
}

/* lg breakpoint */
@media (min-width: 992px) {
    .fs-lg-5 {
        font-size: 1.25rem !important;
    }

    .border-lg-end {
        border-right: 1px solid var(--bs-border-color);
    }
}

/* xl breakpoint */
@media (min-width: 1200px) {
    .fs-xl-5 {
        font-size: 1.25rem !important;
    }

    .border-xl-end {
        border-right: 1px solid var(--bs-border-color);
    }
}

/* xxl breakpoint */
@media (min-width: 1400px) {
    .fs-xxl-5 {
        font-size: 1.25rem !important;
    }

    .border-xxl-end {
        border-right: 1px solid var(--bs-border-color);
    }
}