html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

/* --- ITALIC --- */
@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Jost';
    src: url('../lib/fonts/Jost-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../lib/fonts/CormorantGaramond-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../lib/fonts/CormorantGaramond-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../lib/fonts/CormorantGaramond-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../lib/fonts/CormorantGaramond-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../lib/fonts/CormorantGaramond-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../lib/fonts/CormorantGaramond-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../lib/fonts/CormorantGaramond-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../lib/fonts/CormorantGaramond-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../lib/fonts/CormorantGaramond-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../lib/fonts/CormorantGaramond-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* Prompt Font Family */

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Prompt';
    src: url('../lib/fonts/Prompt-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Prompt', sans-serif;
    /*color: #0E1620;*/
}

p, span, label, a, tr, td {
    font-family: 'Prompt', sans-serif;
    /*color: #0E1620;*/
}

div {
    font-family: 'Prompt', sans-serif;
}

.dataTables_info {
    font-family: 'Prompt', sans-serif;
}

/*Modal*/
.custom-alert-modal .modal-dialog {
    /* max-width: 700px; */
}

.custom-alert-content {
    border: none;
    border-radius: 10px;
    background: #ffffff;
    padding: 22px 30px 26px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.custom-alert-header {
    border-bottom: none;
    padding: 0;
    align-items: center;
}

.custom-alert-title {
    font-size: 22px;
    font-weight: 700;
    color: #3d4856;
    margin: 0;
}

.custom-alert-close {
    width: 18px;
    height: 18px;
    opacity: 0.45;
    box-shadow: none !important;
}

    .custom-alert-close:hover {
        opacity: 0.8;
    }

.custom-alert-body {
    padding: 34px 0 22px;
}

    .custom-alert-body p {
        margin: 0;
        font-size: 18px;
        color: #667085;
        font-weight: 500;
    }

.custom-alert-footer {
    border-top: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 18px;
}

.btn-alert-cancel {
    min-width: 78px;
    height: 48px;
    border-radius: 18px;
    background: #ff341f;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 8px rgba(255, 52, 31, 0.28);
}

    .btn-alert-cancel:hover,
    .btn-alert-cancel:focus {
        background: #ef2c19;
        color: #ffffff;
    }

.btn-alert-ok {
    min-width: 78px;
    height: 48px;
    border-radius: 18px;
    background: #ffd8b6;
    color: #333333;
    font-size: 17px;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 8px rgba(98, 119, 255, 0.25);
}

    .btn-alert-ok:hover,
    .btn-alert-ok:focus {
        background: #ffc999;
        color: #333333;
    }

/* Backdrop ให้เทาใกล้ภาพ */
.modal-backdrop.show {
    opacity: 0.45;
}