:root {
    --dark-mode-bg: #18191a;
    --dark-mode-navbar-bg: #18191a;
    --dark-mode-text-color: #fff;
    --dark-mode-link-color: #fff;
    --dark-mode-link-disabled-color: #4d4d4d;

    --dark-mode-nav-link-focus-color: red;

    --dark-mode-invalid-color: red;
    --dark-mode-valid-color: green;

    --dark-mode-form-float-bg: #4e4f50;


    --form-float-text-color: #000;
    --form-float-border-bottom-color: #ccc;
    --form-float-input-focus-color: #007bff;
    --form-float-invalid-color: red;
    --form-float-valid-color: green;

    --text-red-color: #ed1c24;
}

body {
    background-color: #fff;
    font-family: "Noto Sans Thai", sans-serif;
    font-weight: 400;
}


.section-full {
    height: 100vh;
}

.min-vh-90 {
    height: 90vh;
}


.navbar {
    background-color: none;
}

.nav-white {
    background-color: #fff;
}

.nav-dark {
    background-color: var(--dark-mode-navbar-bg)
}

.btn-close {
    --bs-btn-close-bg: none;
}
.btn-circle{
    border-radius: 50%;
}

.navbar-toggler {
    border: none;
}


.anim-slide-down {
    animation: slide-down 0.5s ease-in-out;
}

@keyframes slide-down {
    0% {
        transform: translateY(-500%);
    }

    100% {
        transform: translateY(0);
    }

}

.form-float {
    position: relative;
}

.form-float label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: var(--form-float-text-color);
    font-size: 0.875;
    pointer-events: none;
    transition: 0.3s;
}

.form-float input {
    width: 100%;
    padding: 10px 20px;
    font-size: 16px;
    border: 0;
    border-bottom: 1px solid var(--form-float-border-bottom-color);
    outline: none;
}

.form-float input:focus {
    border-bottom: 1px solid var(--form-float-input-focus-color);
}

.form-float input:not(:placeholder-shown)~label,
.form-float input:focus~label {
    top: 0;
    font-size: 1rem;
    /* 16px = rem 1 */
    padding: 0 10px;
    color: var(--form-float-text-color);
}

/* .form-float input:valid {
        border-bottom: 1px solid #28a745;
    } */

.form-float input.is-invalid~label {
    color: var(--form-float-invalid-color)
}

.form-float input.is-valid~label {
    color: var(--form-float-valid-color)
}



.dark-mode,
.dark-mode .offcanvas {
    background-color: var(--dark-mode-bg);
    color: var(--dark-mode-text-color);
}

.dark-mode a {
    color: var(--dark-mode-link-color);
}

.dark-mode .nav-link.disabled,
.nav-link:disabled {
    color: var(--dark-mode-link-disabled-color);
}


.bg-dark {
    /* color: #fff !important; */
    color: var(--dark-mode-text-color);
}

.dark-mode .navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.nav-link:focus,
.nav-link:hover {
    /* color: rgb(166 166 166); */
    color: var(--dark-mode-nav-link-focus-color);
}

/* hight color navbar-toggler*/
.dark-mode .navbar-toggler {
    color: var(--dark-mode-text-color);
}

/*dark-mode form-float */
.dark-mode .form-float input {
    background-color: var(--dark-mode-form-float-bg);
    color: var(--dark-mode-text-color);
}

/* .dark-mode .form-float input:focus {
        border-bottom: 1px solid #007bff;
    } */

.dark-mode .form-float input:not(:placeholder-shown)~label,
.dark-mode .form-float input:focus~label {
    top: 0;
    font-size: 1rem;
    padding: 0 10px;
    color: var(--dark-mode-text-color);
}

/* .dark-mode .form-float input:valid {
        border-bottom: 1px solid #28a745;
    } */

.dark-mode .form-float input.is-invalid~label {
    color: var(--dark-mode-invalid-color);
}

.dark-mode .form-float input.is-valid~label {
    color: var(--dark-mode-valid-color);
}

.dark-mode .form-float label {
    color: var(--dark-mode-text-color);
}

.dark-mode .form-float input:disabled {
    background-color: var(--dark-mode-form-float-bg);
    color: var(--dark-mode-text-color);
}

.dark-mode .form-float input:disabled~label {
    color: var(--dark-mode-text-color);
}

.form-float input.is-invalid {
    /* color: red !important; */
    color: var(--form-float-invalid-color) !important;
}




/*ประการตัวแปรค่า่สี css */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    font-weight: bold;
    /* สี led neon */
    /* text-shadow:
            0 0 1px #fff,
            0 0 2px #fff,
            0 0 3px #fff,
            0 0 3px #ff0000,
            0 0 6px #ff0000,
            0 0 7px #ff0000,
            0 0 9px #ff0000,
            0 0 14px #ff0000; */
    /* text-shadow:
            0 0 1px #000,
            0 0 2px #000,
            0 0 3px #ff0000,
            0 0 5px #ff0000; */

    /* transition: 1.0s; */

}

.text-red {
    color: var(--text-red-color);
}

.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode textarea:-webkit-autofill,
.dark-mode textarea:-webkit-autofill:hover,
.dark-mode textarea:-webkit-autofill:focus,
.dark-mode select:-webkit-autofill,
.dark-mode select:-webkit-autofill:hover,
.dark-mode select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dark-mode-text-color);
    -webkit-box-shadow: 0 0 0px 1000px #212529 inset;
    border-bottom: 1px solid var(--form-float-border-bottom-color);

}

;




/* add transition d-none to d-block */
.d-none {
    opacity: 0;
}

/* 0 - 5s; */
.d-block {
    opacity: 1;
    transition: 1s;
}