color palette from <https://github.com/vuejs/theme> :root{--vt-c-white: #ffffff;--vt-c-white-soft: #f8f8f8;--vt-c-white-mute: #f2f2f2;--vt-c-black: #181818;--vt-c-black-soft: #222222;--vt-c-black-mute: #282828;--vt-c-indigo: #2c3e50;--vt-c-divider-light-1: rgba(60, 60, 60, .29);--vt-c-divider-light-2: rgba(60, 60, 60, .12);--vt-c-divider-dark-1: rgba(84, 84, 84, .65);--vt-c-divider-dark-2: rgba(84, 84, 84, .48);--vt-c-text-light-1: var(--vt-c-indigo);--vt-c-text-light-2: rgba(60, 60, 60, .66);--vt-c-text-dark-1: var(--vt-c-white);--vt-c-text-dark-2: rgba(235, 235, 235, .64)}semantic color variables for this project :root{--color-background: var(--vt-c-white);--color-background-soft: var(--vt-c-white-soft);--color-background-mute: var(--vt-c-white-mute);--color-border: var(--vt-c-divider-light-2);--color-border-hover: var(--vt-c-divider-light-1);--color-heading: var(--vt-c-text-light-1);--color-text: var(--vt-c-text-light-1);--section-gap: 160px}@media (prefers-color-scheme: dark){:root{--color-background: var(--vt-c-black);--color-background-soft: var(--vt-c-black-soft);--color-background-mute: var(--vt-c-black-mute);--color-border: var(--vt-c-divider-dark-2);--color-border-hover: var(--vt-c-divider-dark-1);--color-heading: var(--vt-c-text-dark-1);--color-text: var(--vt-c-text-dark-2)}}*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400}body{min-height:100vh;color:var(--color-text);background:var(--color-background);background-color:#f8f8f8;transition:color .5s,background-color .5s;line-height:1.6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:15px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{max-width:900px;background-color:#fff;margin:0 auto;padding:2rem;font-weight:400}.cursor-na[data-v-09a6219c]{cursor:"not-allowed"}.rtl{direction:rtl}.vuejs3-datepicker{color:#2f2f2f;display:inline-block;position:relative}.vuejs3-datepicker *{box-sizing:border-box}.vuejs3-datepicker input{border:1px solid}.vuejs3-datepicker__icon{display:-webkit-flex;display:-ms-flexbox;display:flex}.vuejs3-datepicker__value{border:1px solid;border-radius:5px;cursor:pointer;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;min-width:200px;padding:13px 15px}.vuejs3-datepicker__content{font-size:15px;margin-left:10px}.vuejs3-datepicker__typeablecalendar{left:10px;position:absolute;top:10px}.vuejs3-datepicker__inputvalue{border:1px solid;border-radius:5px;cursor:pointer;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;min-width:200px;padding:12px 10px 13px 35px}.vuejs3-datepicker__calendar{background:#fff;border-radius:4px;box-shadow:0 .2rem 1rem #0000001f;margin-top:4px;position:absolute;width:300px;z-index:100}.vuejs3-datepicker__calendar-topbar{background-color:#40b983;border-radius:4px 4px 0 0;color:#fff;padding:25px;text-align:center}.vuejs3-datepicker__calendar-topbar-year{cursor:pointer;font-size:30px;margin:0;padding-bottom:10px}.vuejs3-datepicker__calendar-topbar-day{font-size:20px;margin:0}.vuejs3-datepicker__calendar-actionarea{padding:10px}.vuejs3-datepicker__calendar header{display:block;line-height:40px}.vuejs3-datepicker__calendar header span{float:left;text-align:center;width:71.42857142857143%}.vuejs3-datepicker__calendar header .next,.vuejs3-datepicker__calendar header .prev{float:left;position:relative;text-indent:-10000px;width:14.285714285714286%}.vuejs3-datepicker__calendar header .next:after,.vuejs3-datepicker__calendar header .prev:after{content:"";height:8px;left:50%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translate(-50%) translateY(-50%) rotate(45deg);width:8px}.vuejs3-datepicker__calendar header .prev:after{border-bottom:1px solid #2f2f2f;border-left:1px solid #2f2f2f}.vuejs3-datepicker__calendar header .next.disabled:after,.vuejs3-datepicker__calendar header .prev.disabled:after{opacity:.5}.vuejs3-datepicker__calendar header .next:after{border-right:1px solid #2f2f2f;border-top:1px solid #2f2f2f}.vuejs3-datepicker__calendar header .next:not(.disabled),.vuejs3-datepicker__calendar header .prev:not(.disabled),.vuejs3-datepicker__calendar header .up:not(.disabled){border-radius:4px;cursor:pointer;font-size:15px}.vuejs3-datepicker__calendar header .next:not(.disabled):hover,.vuejs3-datepicker__calendar header .prev:not(.disabled):hover,.vuejs3-datepicker__calendar header .up:not(.disabled):hover{background:#f8f8f8}.vuejs3-datepicker__calendar .disabled{color:#ddd;cursor:default}.vuejs3-datepicker__calendar .flex-rtl{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;width:inherit}.vuejs3-datepicker__calendar .cell{border:1px solid transparent;display:inline-block;font-size:14px;height:40px;line-height:40px;padding:0 5px;text-align:center;vertical-align:middle;width:14.285714285714286%}.vuejs3-datepicker__calendar .cell.month,.vuejs3-datepicker__calendar .cell.year{height:50px;line-height:28px;padding:10px 5px}.vuejs3-datepicker__calendar .cell.day-header{text-transform:uppercase}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year{cursor:pointer;transition:.45s}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover{border:1px solid #40b983}.vuejs3-datepicker__calendar .cell.selected{background:#40b983;color:#fff}.vuejs3-datepicker__calendar .cell.selected:hover{background:#40b983}.vuejs3-datepicker__calendar .cell.highlighted{background:#40b983;color:#fff}.vuejs3-datepicker__calendar .cell.highlighted.selected{background:#40b983}.vuejs3-datepicker__calendar .cell.highlighted.disabled{color:#a3a3a3}.vuejs3-datepicker__calendar .cell.highlighted.highlight-start,.vuejs3-datepicker__calendar .cell.highlighted:last-child{background:#2f9668}.vuejs3-datepicker__calendar .cell.grey{color:#888}.vuejs3-datepicker__calendar .cell.grey:hover{background:inherit}.vuejs3-datepicker__calendar .cell.day-header{cursor:inherit;font-size:75%;white-space:nowrap}.vuejs3-datepicker__calendar .cell.day-header:hover{background:inherit}.vuejs3-datepicker__calendar .month,.vuejs3-datepicker__calendar .year{width:33.333%}.vuejs3-datepicker__calendar-button,.vuejs3-datepicker__clear-button{cursor:pointer;font-style:normal;position:absolute;right:12px;top:12px}.vuejs3-datepicker__calendar-button.disabled,.vuejs3-datepicker__clear-button.disabled{color:#999;cursor:default}.vuejs3-datepicker #calendar-div{background-color:#fff;border-radius:5px}.dp-error{color:red;font-size:12px}.backdrop{background-color:#00000080;bottom:0;cursor:pointer;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:2}.mt-2[data-v-7c77277c]{margin-top:2px}.mt-10[data-v-7c77277c]{margin-top:10px}form div[data-v-7c77277c]{margin-bottom:10px}label[data-v-7c77277c]{margin-right:10px}.button-group button[data-v-7c77277c]{margin-top:5px;margin-right:20px;margin-bottom:20px;padding:8px 12px;border:1px solid #ccc;background-color:#f9f9f9;cursor:pointer;min-height:50px}.button-group button.active[data-v-7c77277c]{background-color:#007bff;color:#fff;border-color:#0056b3}.button-group button[data-v-7c77277c]:hover{background-color:#e6e6e6}button.submit[data-v-7c77277c]:disabled{opacity:.6;cursor:not-allowed}.flex-container[data-v-7c77277c]{display:flex;flex-wrap:wrap}.flex-container-div[data-v-7c77277c]{width:50%;padding:20px}@media (max-width: 768px){.flex-container-div[data-v-7c77277c]{width:100%}}.bold[data-v-7c77277c]{font-weight:500}.red[data-v-7c77277c]{color:red}.submit[data-v-7c77277c]{width:250px;margin-top:5px;margin-right:20px;margin-bottom:20px;padding:8px 12px;border:1px solid #ccc;cursor:pointer;min-height:50px;background-color:#007bff;color:#fff;border-color:#0056b3}.txt-input[data-v-7c77277c]{padding:10px;min-height:30px;width:100%;background-color:#f8f8f8;border:0}.txt-input[data-v-7c77277c]:focus{border:1px solid red!important}.alert[data-v-7c77277c]{text-align:center;margin:15px auto;padding:10px;width:80%;border-radius:5px;font-weight:700}.alert.success[data-v-7c77277c]{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.alert.error[data-v-7c77277c]{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}nav ul[data-v-632a53fd]{list-style:none;display:flex;gap:20px}nav ul li[data-v-632a53fd]{display:inline}header[data-v-632a53fd]{line-height:1.5;text-align:center}.logo[data-v-632a53fd]{text-align:center;display:block;margin:0 auto 2rem}@media (min-width: 1024px){header[data-v-632a53fd]{place-items:center;padding-right:calc(var(--section-gap) / 2)}.logo[data-v-632a53fd]{margin:0 2rem 0 0}header .wrapper[data-v-632a53fd]{place-items:flex-start;flex-wrap:wrap}}.filter[data-v-ad6bbd3b]{margin-bottom:20px}table[data-v-ad6bbd3b]{width:100%;border-collapse:collapse}th[data-v-ad6bbd3b],td[data-v-ad6bbd3b]{padding:8px;border:1px solid #ddd}th[data-v-ad6bbd3b]{background-color:#f4f4f4}.bold[data-v-ad6bbd3b]{font-weight:500}.txt-input[data-v-ad6bbd3b],.vuejs3-datepicker__value[data-v-ad6bbd3b]{padding:20px;min-height:30px;width:100%;background-color:#f8f8f8;border:0!important}.txt-input[data-v-ad6bbd3b]:focus{border:1px solid red!important}.alert[data-v-ad6bbd3b]{text-align:center;margin:15px auto;padding:10px;width:80%;border-radius:5px;font-weight:700;transition:all .3s ease}.alert.success[data-v-ad6bbd3b]{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.alert.error[data-v-ad6bbd3b]{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.delete-link[data-v-ad6bbd3b]{color:#c82333;text-decoration:none;cursor:pointer}.delete-link[data-v-ad6bbd3b]:hover{text-decoration:underline;color:#a71d2a}