body {
    margin: 0px;
    font-family: Arial;
}

[hidden] {
    display: none !important;
}

p, h1, h2, h3, h4, h5, h6, form {
    margin: 0px;
}

.overlay {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
}
.overlay > div {
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    max-width: calc(100% - 80px);
}

.inputbox {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    font-size: 14px;
}
.inputbox label:after {
    content: ':';
}
.inputbox input, .inputbox textarea, .inputbox select {
    font-family: inherit;
    font-size: 14px;
    padding: 7px;
    max-width: 100%;
    border-radius: 5px;
    border: 1px solid black;
}

.inputbox select {
    width: fit-content;
    max-width: 100%;
}

.btn-create {
    height: fit-content;
    padding: 7px 10px;
    border-radius: 5px;
    color: white;
    background: dodgerblue;
    border: 2px solid dodgerblue;
    transition: 0.2s;
}
.btn-create:hover {
    color: dodgerblue;
    background: white;
}

.btn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: fit-content;
    padding: 7px 10px;
    border-radius: 5px;
    color: black;
    background: white;
    border: 2px solid black;
    transition: 0.2s;
    opacity: 0.5;
}
.btn:hover {
    opacity: 1;
}


.textcenter, [textcenter] {
    text-align: center;
}


.table-list {
    font-size: 16px;
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
}
.table-list th {
    text-align: left;
    background: white;
    padding: 10px;
    text-wrap: nowrap;
    border-bottom: 1px solid lightgray;
}
.table-list td {
    padding: 10px;
    background: white;
}
.table-list tr:hover > td {
    background: #f0f0f0;
}
.table-list tr:not(:last-child) > td {
    border-bottom: 1px solid lightgray;
}
.table-list label {
    display: block;
    width: fit-content;
    font-size: 14px;
    padding: 7px 10px;
    border-radius: 5px;
    background: lightgray;
}
/* priority */
.table-list label[priority='0'] { background: #a3d5b9; }
.table-list label[priority='1'] { background: #fdf4a5; }
.table-list label[priority='2'] { background: #eaaea3; }
/* Status */
.table-list label[status='0'] { background: #b19dd6; }
.table-list label[status='1'] { background: #95c9f3; }
.table-list label[status='2'] { background: #fdf4a5; }
.table-list label[status='3'] { background: #a3d5b9; }
.table-list label[status='4'] { background: #eaaea3; }


#loading {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 998;
}
#loading > div {
    padding: 20px;
    border-radius: 10px;
    background: white;
}
.loading {
    width: 60px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
    background: 
        var(--_g) 0%   50%,
        var(--_g) 50%  50%,
        var(--_g) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: l3 1s infinite linear;
}
@keyframes l3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}