body {
    margin: 0;
    font-family: 'Kanit', sans-serif;

    background-color: var(--color-background);
    
    color: var(--text-color);

    min-height: 100vh;
}
h1 { font-size: var(--font-4xl); }
h2 { font-size: var(--font-3xl); }
h3 { font-size: var(--font-2xl); }
h4 { font-size: var(--font-xl); }
h5 { font-size: var(--font-lg); }
h6 { font-size: var(--font-md); }
p  { font-size: var(--font-md); }
small { font-size: var(--font-sm); }
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}
h1, h2, h3 {
    font-family: 'Prompt', sans-serif;
    font-weight: 600;
    margin-bottom: 0px;
}
.input-input-9c {
    padding: 0.5vh 1vw;
    border-style: solid;
    border-radius: 6px;
    border-width: 2px;
    border-color: var(--text-color);

    background-color: var(--color-background);
    color: var(--txt-color);
}
.input-input-9c:hover {
    border-color: var(--color-primary);
}
.input-input-9c:focus {
    border-color: var(--color-primary);
    outline: none; 
}
.input-input-9c:not(:placeholder-shown) {
    border-color: var(--color-primary);
    outline: none; 
}
.input-error {
    border-color: var(--color-danger) !important;
}

.text-link {
    color: var(--color-primary);
    cursor: pointer;
}
.text-link:hover {
    color: var(--color-primary-hover);
}
.btn9c-Henshin {
    padding: 1vh 1vw;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

    background-color: var(--color-primary);

    border: 2px solid var(--text-color);
    border-radius: 6px;

    color: var(--color-background);

    gap: 0.5vw;

    cursor: pointer;
}
.btn9c-Normal {
    padding: 1vh 1vw;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

    background-color: var(--bg-color);

    border: 2px solid var(--text-color);
    border-radius: 6px;

    color: var(--text-color);

    gap: 0.5vw;

    cursor: pointer;
}
.btn9c-icon {
    border-style: solid;
    border-radius: 6px;
    border-width: 2px;
    border-color: var(--text-color);

    background-color: var(--bg-color);
    color: var(--txt-color);
}
.btn9c-Normal:hover {
    background-color: var(--navbar-bg-color);
}
.btn9c-Henshin:hover {
    background-color: var(--color-primary-hover);
}
.sweetalert2-btn9c {
    padding: 1vh 1vw;

    border: 2px solid var(--text-color);
    border-radius: 6px;

    color: var(--bg-color);
}
.sweetalert2-btn9c-confirm {
    padding: 1vh 1vw;

    border: 2px solid var(--text-color);
    border-radius: 6px;

    color: black;

    background-color: var(--color-primary);
}
.sweetalert2-btn9c-confirm:hover {
    background-color: var(--color-primary-hover);
}
.sweetalert2-btn9c-deny {
    padding: 1vh 1vw;

    border: 2px solid var(--text-color);
    border-radius: 6px;

    color: black;

    background-color: var(--color-success);
}
.sweetalert2-btn9c-deny:hover {
    background-color: var(--color-success-hover);
}
.sweetalert2-btn9c-close {
    padding: 1vh 1vw;

    border: 2px solid var(--text-color);
    border-radius: 6px;

    color: black;

    background-color: var(--color-secondary);
}
.sweetalert2-btn9c-close:hover {
    background-color: var(--color-secondary-hover);
}
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}
input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
}



/* .btn-9c-normal:hover {
    background-color: var(--text-color-hover);
    color: black;
} */
/* .btn-9c-normal {
    padding: 0.5vh 1vw;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background-color: var(--bg-color-1);

    border: 2px solid var(--text-color);
    border-radius: 6px;

    color: var(--text-color);

    gap: 0.5vw;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
} */
/* .btn-9c-secondary {
    padding: 0.5vh 1vw;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background-color: var(--btn-bg-secondary-color);
    color: var(--btn-text-secondary-color);

    border: 2px solid var(--btn-border-secondary-color);
    border-radius: 6px;

    gap: 0.5vw;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
} */
/* body {
    font-family: Arial, Helvetica, sans-serif;

    background: linear-gradient(
        to bottom, 
        var(--bg-color-3) 0%, 
        var(--bg-color-2) 25%, 
        var(--bg-color-1) 100%
    );
} */
/* h1 { font-size: var(--font-3xl); } */
/* h2 { font-size: var(--font-2xl); } */
/* h3 { font-size: var(--font-xl); } */
/* h4 { font-size: var(--font-lg); } */
/* h5 { font-size: var(--font-md); } */
/* h6 { font-size: var(--font-sm); } */