@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Thai:wght@100..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Noto Serif Thai', serif;
    text-decoration: none;
    list-style: none;
}

:root {
    --color-1: #00296B;
    --color-2: #003F88;
    --color-3: #00509D;
    --color-4: #FDC500;
    --color-5: #FFD500;
    --color-6: #000000;
    --color-7: #FFFFFF;
    --color-8: #808080;
    --color-9: #353535;
    --color-confirm: #70e000;
    --color-warning: #ff9900;
    --color-deleted: #f8312f;
    --color-bg: #F8FAFC;

    --box-shadow-1: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    --box-shadow-2: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    --box-shadow-3: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;

    --webkit-fill-available: -webkit-fill-available;
}

i {
    margin: 0 10px 0 10px;
    /* color: var(--color-1); */
    font-size: 1.5rem;
}

hr {
    margin: 10px 0;
    color: var(--color-1);
}

p {
    font-size: 1rem;
}

nav {
    background-color: var(--color-9);
    box-shadow: var(--box-shadow-1);
}

main {
    min-height: 100vh;
    padding: 20px 40px;
}

/* button */
.btn-checked {
    padding: 5px 15px;
    border: 1px solid var(--color-warning);
    border-radius: 3px;
    background-color: var(--color-warning);
    color: var(--color-7);
}

.btn-checked:hover {
    background-color: var(--color-7);
    color: var(--color-warning);
    border: 1px solid var(--color-warning);
}

.btn-checked:hover i {
    color: var(--color-warning);
}

.btn-deleted {
    padding: 5px 15px;
    border: 1px solid var(--color-deleted);
    border-radius: 3px;
    background-color: var(--color-deleted);
    color: var(--color-7);
}

.btn-deleted:hover {
    background-color: var(--color-7);
    color: var(--color-deleted);
    border: 1px solid var(--color-deleted);
}

.btn-deleted:hover i {
    color: var(--color-deleted);
}

.btn-confirmed {
    padding: 5px 15px;
    border: 1px solid var(--color-confirm);
    border-radius: 3px;
    background-color: var(--color-confirm);
    color: var(--color-7);
    margin-top: 15px;
    width: var(--webkit-fill-available);
}

.btn-confirmed:hover {
    background-color: var(--color-7);
    color: var(--color-confirm);
    border: 1px solid var(--color-confirm);
}

.btn-confirmed:hover i {
    color: var(--color-confirm);
}

.btn-checked i,
.btn-deleted i,
.btn-confirmed i {
    color: var(--color-7);
}

.btn-insert {
    background-color: var(--color-7);
    border: 1px solid var(--color-1);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--color-1);
    margin: 0 5px;
}

.btn-insert:active {
    background-color: var(--color-3);
    color: var(--color-7);
}

.btn-insert:active i {
    color: var(--color-7);
}

/* datatable */
.dataTables_wrapper .dataTables_length select {
    padding: 5px 10px;
    margin: 15px 10px;
    font-size: 16px;
    border: none;
    border-radius: 3px;
    box-shadow: var(--box-shadow-1);
}

.dataTables_wrapper .dataTables_filter input {
    padding: 7px 10px;
    margin: 15px 10px;
    border: none;
    border-radius: 3px;
    font-size: 16px;
    box-shadow: var(--box-shadow-1);
}

table th {
    background-color: var(--color-9);
    color: var(--color-7);
    height: 35px;
    text-align: center;
}

/* footer */
footer {
    background-color: var(--color-9);
    height: 200px;
    width: var(--webkit-fill-available);
    padding: 20px 40px;
    color: var(--color-7);
}

/* responsive */
@media screen and (max-width: 768px) {
    main {
        padding: 20px;
    }

}