@font-face {
    font-family: "IBMPlexSansThai-Regular";
    src: url("../fonts/IBMPlexSansThai-Regular.ttf");
}
:root {
    --font-color-2: #fff;
    --p-head-nav: #ff91bd;
    --p-nav-a-hover: #ffc1da;
    --p-carousel-indicator: #ff4f93;
    --p-accordion: #ff4f93;
    --p-accordion-nav: #9c9c9c;
    --p-pn-btn: #ff4f93;
    --p-pn-btn-hov: #ffc1da;
    --p-pn-accordion: #ffc1da;
    --p-pn-accordion-focus: #ffc1da;
    --p-footer: #8accd5;
    --p-footer-text: #ffffff;
    --bs-boxshad: rgba(var(--p-pn-btn), 0.5);
    --color1: #ff4f93;
    --color2: #ffc1da;
    --color2rgb: 255, 193, 218;
    --color3: #f8f8e1;
    --color4h: #5c98a0;
    --color4: #8accd5;
    --color4rgb: 138, 204, 213;
    --text: #555c63;
    --nav-side: #343a40;
    --nav-side-ac: #31383f;
    --info: #89cbd9;
    --warning: #e2c777;
    --danger: #d5636e;

    --colord1: #ff4f93;
    --colord1a: #ffc1da;
    --colord2: #ecd985;
    --colord2a: #fcf1c0;
    --colord3: #87c9d8;
    --colord3a: #bff3ff;
    --colord4: #6fc79e;
    --colord4a: #aee9cd;
}
html,
body {
    color: var(--text);
    font-family: "IBMPlexSansThai-Regular";
}

.modal-dialog {
    width: 400px;
    margin: 70px auto 0;
}

.modal-dialog {
    transform: scale(0.5);
}

.modal-dialog {
    transform: scale(1);
}

.modal-dialog .modal-content {
    text-align: center;
    border: none;
}

.modal-content .close {
    color: #fff;
    background: linear-gradient(
        to right,
        var(--bs-colorbtn),
        var(--bs-colornav)
    );
    font-size: 20px;
    font-weight: 400;
    text-shadow: none;
    line-height: 22px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    overflow: hidden;
    opacity: 1;
    position: absolute;
    left: auto;
    right: 8px;
    top: 8px;
    z-index: 1;
    transition: all 0.3s;
    border: 0;
}

.modal-content .close:hover {
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.close:focus {
    outline: none;
}

.modal-body {
    padding: 60px 40px 40px !important;
}

.modal-body .title {
    color: var(--bs-colorbtn);
    font-size: 33px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 0 10px;
}

.modal-body .description {
    color: #9a9ea9;
    font-size: 16px;
    margin: 0 0 20px;
}

.modal-body .form-group {
    text-align: left;
    margin-bottom: 20px;
    position: relative;
}

.modal-body .input-icon {
    color: #777;
    font-size: 18px;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 20px;
}

.modal-body .form-control {
    font-size: 17px;
    height: 45px;
    width: 100%;
    padding: 6px 0 6px 50px;
    margin: 0 auto;
    border: 2px solid #eee;
    border-radius: 5px;
    box-shadow: none;
    outline: none;
}

.form-control::placeholder {
    color: #aeafb1;
}

.modal-content .modal-body .btn {
    color: #fff;
    background: linear-gradient(
        to right,
        var(--bs-colorbtn),
        var(--bs-colornav)
    );
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 38px;
    width: 100%;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 5px;
    border: none;
    display: inline-block;
    transition: all 0.6s ease 0s;
    box-shadow: 0 16px 36px var(--bs-boxshad);
}

.modal-content .modal-body .btn:hover {
    color: #fff;
    letter-spacing: 2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.modal-content .modal-body .btn:focus {
    outline: none;
}

@media only screen and (max-width: 480px) {
    .modal-dialog {
        width: 95% !important;
    }

    .modal-content .modal-body {
        padding: 60px 20px 40px !important;
    }
}
.navbar-brand img {
    width: 30px;
}

.bg-dark {
    --bs-bg-opacity: 1;
    background-color: var(--p-head-nav) !important;
}

.btn-primary {
    color: #fff;
    background-color: var(--color2);
    border-color: var(--color2);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--color2);
    border-color: var(--color2);
}
.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--color2rgb), 0.5);
}
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active,
.btn-check:focus + .btn-primary,
.btn-primary:focus {
    color: #fff;
    background-color: var(--color2);
    border-color: var(--color2);
    box-shadow: 0 0 0 0.25rem rgba(var(--color2rgb), 0.5);
}
.form-control:focus,
.dataTable-input:focus {
    color: #2f3133;
    background-color: #fff;
    border-color: var(--color2);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--color2rgb), 0.2.5);
}

.btn-outline-primary {
    color: var(--color2);
    background-color: #fff;
    border-color: var(--color2);
}

.btn-outline-primary:hover {
    color: var(--color2);
    background-color: #f7f7f7;
    border-color: var(--color2);
}

.card {
    border-radius: 20px;
}