@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: #eef6fc;

    --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;
}

/* ::-webkit-scrollbar {
    width: 0px;
} */

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;
}

.card-informations {
    display: flex;
    gap: 15px;
}

.information-charts {
    display: flex;
    gap: 15px;
    background-color: var(--color-7);
    padding: 20px 40px;
    font-size: 16px;
    border-left: 3px solid var(--color-4);
    border-radius: 3px;
    min-width: 435px;
    
}

.information-charts p {
    color: var(--color-1);
    margin-bottom: 5px;
}

.information-charts img {
    width: 100px;
}

.top-table {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.table-information {
    margin: 10px 0;
    padding: 20px;
    background-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-3);
    color: var(--color-7);
    height: 35px;
    text-align: center;
}

/* datatable */

.btn-checked {
    padding: 5px 15px;
    border: none;
    border-radius: 3px;
    background-color: var(--color-warning);
    color: var(--color-7);
}

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

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

.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);
}

.title-form {
    /* margin-top: 30px; */
    padding: 20px;
    text-align: center;
    justify-items: center;
    background-color: var(--color-7);
}

.title-form .title-form-button {
    width: var(--webkit-fill-available);
    display: flex;
    flex-direction: row-reverse;
}

.title-form .title-form-button button {
    padding: 6px 15px;
    border: 1px solid var(--color-3);
    border-radius: 6px;
    background-color: var(--color-7);
    color: var(--color-1);
}

.title-form .title-form-button button:hover,
.title-form .title-form-button button:hover i {
    background-color: var(--color-3);
    color: var(--color-7);
}

.title-form img {
    width: 150px;
    margin-bottom: 15px;
}

.title-form p:last-child {
    width: 700px;
    color: var(--color-8);
}

.form-content {
    background-color: var(--color-7);
    justify-items: center;
}

.form-content form {
    min-width: 700px;
    padding: 20px;
}

.form-content form label {
    margin-top: 1rem;
    color: var(--color-8);
}

.form-content form input,
.form-content form textarea,
.form-content form select {
    padding: 10px 15px;
    margin: 5px 0;
    border: none;
    border-radius: 6px;
    background-color: var(--color-7);
    width: var(--webkit-fill-available);
    box-shadow: var(--box-shadow-1);
}

.form-content form .form-body {
    width: 700px;
    margin: 0 10px;
}

.form-content form div img {
    width: 50%;
    margin: 15px 10px;
}

.chart {
    margin: 15px 10px;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    gap: 15px;
}

.chart_style {
    width: 57%;
    padding: 20px;
    background-color: var(--color-7);
    border: none;
    border-radius: 3px;
}

.chart_style div {
    margin: 10px 0 20px;
}

.chart_style input {
    padding: 10px 20px;
    margin: 5px;
    width: 250px;
    border: 1px solid var(--color-8);
    border-radius: 3px;
}

.chart_style button {
    padding: 10px 20px;
    margin: 5px;
    border: 1px solid var(--color-3);
    border-radius: 3px;
    background-color: var(--color-3);
    color: var(--color-7);
}

.chart_style button:active,
.chart_style #downloadChart:active,
.chart_style #downloadChart2:active {
    background-color: var(--color-7);
    color: var(--color-1);
}

.chart_style #downloadChart,
.chart_style #downloadChart2 {
    border: 1px solid var(--color-confirm);
    background-color: var(--color-confirm);
}

.chart_table {
    width: 100%;
    padding: 20px;
}

.chart_table table {
    width: 100%;
    border-collapse: collapse;
}

.chart_table table th,
.chart_table table td {
    border: 1px solid var(--color-8);
    padding: 10px;
    height: 80px;
}

.chart_table table td img {
    width: 60px;
    margin: 5px 10px;
}