* {
    margin: 0 0;
    box-sizing: border-box;
    background-repeat: no-repeat;
    padding: 0 0;
}
*::before, *::after {
    box-sizing: border-box;
    background-repeat: no-repeat;
}

img {
    max-width: 100%;
    height: auto;
}
select {
    appearance: none;
    cursor: pointer;
}
button {
    border: none;
    background-color: transparent;
    white-space: nowrap;
    cursor: pointer;
}

html {
    display: flex;
    height: 100%; /*fallback*/
    height: -webkit-fill-available;
}
body {
    width: 100%;
    overflow-x: hidden;
    background-color: #fff;
    background-position: center;
    background-size: cover;
    font-family: 'segoe ui',
    ubuntu, helvetica, sans-serif;
}
.loading .menu,
.loading .content {
    opacity: 0;
}
.container {
    display: grid;
    grid-template: 1fr auto / max-content auto;
    max-width: 1920px;
    min-height: 100%;
    margin: auto; /**/
    background-color: #fffc;
}
.sidebar {
    grid-row: 1 /-1;
    grid-column: 1 / 1;
    display: flex;
    flex-flow: column;
    position: relative;
    min-width: 227px;
    padding: 20px;
    color: #fff;
}
.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    bottom: auto;
    height: 100px;
    background-color: #0c7e7c;
}
.logo {
    display: flex;
    align-items: center;
    column-gap: 12px;
    position: relative;
}
.logo img {
    width: 170px;
    margin-bottom: 15px;
}
.logo span {
    display: none;
    margin: 0 2px;
    font-size: 28px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}
nav.menu {
    transition: 0.5s ease;
}
.nav-list {
    display: flex;
    flex-flow: column;
    row-gap: 5px;
    padding: 10px 0;
    list-style: none;
}
.nav-list:empty {
    display: none;
}
.nav-item {
    background-position: left center;
    background-size: 30px auto;
    padding: 10px 0 8px 40px;
    line-height: 22px;
}
.nav-item.home {
    /* img: nav1.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdVJREFUWEftlbtLw1AUxr8TX1B1UBBsjYirCD5ixBbERRwcfIGDFBzERTdB/wkR3HQQF0EcMlgXB3EpghVjrCL+AWqNgqCDjyHVXK1SaWvTJDZSh9wx557v+91zDieEAh8qsD9cgLwqEPOLi4kW8hF55ret/BXAkSCU+EppnYFGE8YEJqkaC3YoStwuiG0AVRA8eim3TUBPqhkDwpym9/sU5cUOhC2Am+62Gv21eAdAq4HJCVf82ufdi95ZhbAMoAbaGhgrCQOsIbc4XRDFe3z70QsrEJYAYgGxlRgSL6+xIgrgjhH6+H35xOy+KcB1l9gLwhYAj5lYRvyFA/q9ETmcKy8nQMzfOUpgGwCKbJp/XicgroOCfORQMso3BLj2i7Mfr57/0snvMIZp/kBezqaSVVwNiEuMYSo/2x/ZC3UReS7zaxpA5oJxGOBzYXn5xjGSpLek9jeA0YJxGgLALmn6YHJhZW3Bc2jzvKi+vslJ87ery/PyoZHmnC1IBl2Af1+Bx9UVaNHjtHaWtQuomJg0HBtHZ8AFcCvw5xV4XF/b5KqqRaORfg6FbrWz06fUeFlLS4VnYKjWKEd/uJcrg+PDljahkyvYTCvvf72ZgVncBSh4Bd4BEkHlIRffIjIAAAAASUVORK5CYII=);
    background-position-y: 4px;
}
.nav-item.upcoming {
    /* img: nav2.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAa9JREFUWEdjZBhgwEiO/f9XMbAxfGWIYWBgcIPq38Xwi2ExYzrDb1LNI9kB/xcxiDH8Y9jLwMCgg2bZeYb/DE6MiQwfSHEE6Q5YwNDDwMBQjMOSVsYEhhqKHJDsbin0+9e/nv//GcIYGBi4QYZlO9xhMFd4i2Lux++sDE1btRkYGRkY6r2vMPBy/EGRP/lAmGHqARW42P//DLvYOZgi5+48/g5ZIUYIxDqY72ZgYHBBVoTNAVef8TN07tIAK6v0uM6gKfEJrwNAkoyMDPMX7T+ZRMgB/0EK1HT14eqClPYyaAnexQjZg89MGJgZ/zLYSJ7HkLv2Xplh3T1nuPityxdB7K+LD5zkIdoBPpGxYLUKz2sZBD4fICVqGT7wOjI8kGwC69myfDED1AEMiw+cRAl1bFEAD4FRB8BCQOLtfAaeb+dIioIvXEYML4QTqRMFJNmMRTHFaWDUAaMhMBoCoyEwGgKjITAaAiMzBCj1NS79BBulcQ5mHf8ZGMtp4oD//7sWHzyFYjbWrlm0vVkgEwNjAAMjAydVHPKf4fs/hv8blh48tR7dPJL7hlRxEJIhAAzXTTDEGVlfAAAAAElFTkSuQmCC);
    background-position: 2px 5px;
    background-size: 26px;
}
.nav-item.overdue {
    /* img: nav3.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABKFJREFUWEfFl2tQVGUYgN/v7MLCXoCSkWIKnCSGAgYQBbWYFRaQQC5O2nAxHWWpqWa6Tn9qsh/9aHImfzRDNbLYjAqhYipIwF5CQsEBHTeRQCELxMjKAPe+e875mm/j0LqcPZytH5w/e/ac932/53tv33sQrPCFVnh9+E8AhZV7H2cRigeMIhGFMCA8LwU02dmkmw52Q6IBCqu1mRjwTgCUDwCx/AvhOxgjI2B8wtjSeFUMzLIA+S++FIdo5j1AqEyMQU4GA5yhWOZjfctXt4X0BAEKq2pLMUIHAUDBGXlkdbQkYU1cSEz0KipSpZIABpizWJi7f9xjJiYnafK7uCAGC0uhd0xNDecCQQQEKKjS7gIEBzjFhDVx0vKtGkVM9MMSoR39+tvv9FnDefvPU7dpTo4F9K6puaGJT48XQFNTt43C+BCnUJybE75lc1Z4MCHoMPXaey9ddi6GhMV1xpbGDn8bSwAKKvfFYgp9hwBFEOHS/C3ynOzMsGAW52QNff0Ow/cDjoX/8xRF5XUfOzTja2sJQH6V9jOEYAcRUm9cH1aiUcv5Fr81NU0bLww4EuLjpHnPZAf0TmuH3jZoHnYt2DhpaNa9ERBAU7P3aQpLjESAJNtbtbtJnfNu/vqNcfeR1jZrRnJSaFVFiTKQh2iagU8+183NW6wskcES0BiP6kY5+QesF1RrPwCAV8hLbeUOVeLa+JBAhofHxt1HT7VZ05OTQqsFAIj+Dz/ecDedPmddsPWFoVn3USCAXgB4MlKppN5//eUooT4p1gNkIYZhYP+n9bMejwcDwLihWadeAqDZ/doqinYNkxebMtNk24vyF2ufzwvBeIDoH/um3Xpt9Kab3LNSWarpSP09cr8YAk1N3QYK47PkYVlBrvzZrHWCmR+MB4hNkrD63n5vRbAIlZuaGoYeBKiqLaIQOkweVpeXKNJTkmRCpRcswJB52HWyQ2/zAmC8z/R1Y1dAgMqyYsW61KcEAbgQREWoqF3bS5Vxjz0qFQK+cm3Edby9SwDAJwQleWq5etN6wRDct1jZlrZO68QvUzSJ48bMNFlxrlouk4Xw1u35/kHHtz19AiHwScLsjFTZ88WFgknI7dY8MuZu0/fYrHY7VirkFMkfUpr+3jje1mW9MjwSOAmJQkG11luGSnk42v/mqw+JHVecTjfW9110XBy66sQYAzm4Xti2VRkVGUF5mw+L4cOD9bNOlytwGS4AiG5EfPGeufsnc6pLb5uanqH37KxQJieu9XqCy5dlG5F/K35buydSrBd8gW7emvQkPvFPF2VZFg58eXjur9n55VsxUfA9jHI3Z4U9l5vDexgJZbzvu9aObtug+bq4w8gbBr/jWExFBILp7Omz9/QPcjOBuOOYGPMfSDakpcgqijTyEKl02RmS6NvsDnyivds6OvGTh4PDYgcSTsF/JFMpFFRxXk54enKSTCLhn8rcHg8euGx2Gi9ccrrcbpLx3ivokYxT5BtKw2QylJGSFBobs1oapYqgSNnNWe4zU3dmGPPImItm/p1J4f8MpRzEio7lvsm1Yh8mfBm+Ip9mYus+WDlRZRWs0WDk/wb+gDg/Z1POQQAAAABJRU5ErkJggg==);
    background-position-x: 1px;
    background-size: 28px;
}
.nav-item.important {
    /* img: nav4.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAWtJREFUWEfFlTFKA0EYRt8negRtRVBhZ1QUhBQiEkihhZVi4QnscgMtPIFi4wlEDFYWWgRBrNJZJEFLC7WzEAKBmBFFQaO4s5tdZtrZf96bb2b/EYGHAvPxEnB1DAOMJJR9UMRdXI2vwAliPW6xH/OOFVnO42ryEqjJUIiDv8/nI+AoyVINJeC9+7wSWJLhymf3eQhUZSj5wrMXcBRkqYURcFzIspwEnm0CXWY1xU0ogTMZVpPC/RNocAxs/AO4BZ56OuGBLJU4qXwaETzSYlzztMIIiE1FHMXB/Y+gTpLHKGgndHSZS/I3+N2BJjs4it8iNcDwr4jFoSK2fKL/+sZLoHdB9/eRvNBhVDM8hxFwlGXZTwL3voQeCTSJmJZ4DSPgWJTlOik8qwROZVhLA89CoI1jUpb7UAK7MmynhfebwAJDjGmCdiiBiszHK9nXSNeIGpRl2OuL/FmcTuCSQRXpBBPIAtzXW5ClwBtyqYIho6g/iwAAAABJRU5ErkJggg==);
}
.nav-item.archive {
    /* img: nav5.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABDpJREFUWEftll1sVFUQx39z9+52LaWFFokgLcQUCBaVmBYVUg1qYzT4gYrRRETjBxojmtJF4ME0RA2mFZAEXzBIFFOJaRBNRGkjJBUFjIWgxipgUSMFxIoVKN3de0fv2W5h2/2qPPSF87R7z8yc35n/OWdGGOIhQ7w+FwEGnQGtxXbyqEK4T5Vy4HKgQIUOgd9QtjkuDcHFHMhG3qwBtJZgZBhPi7AYGJNF8B0Iy/2L2J7ONiuA7lVM8Ds0KZQmBBMf5I5GcvLRM3/A2c4Ba4mwzlfMM/IATjKQjADhlZSLSxMwwgTwBZDxtyJjZyBFZWDZ5+L2dKFHv0Z/bUZPfHfuu7DNzmO2LCDSHyItgL7GuKiPvcAoz1FGTcWavgRyCjIqoMdacfesgGi3sVVlYyDEvEEBROrZA1SYxcdchzV9KVi+hBhuyzLz36p8dQCU/t2O27IUIqfNnAjz7EVsPN8wZQaidTyoQoNxLJyCVfkKWP4Bizib74wpM+fjpFnRzh9xW5aAG/Xmf7dPUSq1nI0bpwSI1OOJWMZ/R9m6ZS2SX5x0gUwAnpO7by3a/mlciqcCIdalBfBOve3QbnZ/WQXWDS+l1DwbAD1zHPezx+MxtvpruCMtQLie5wVWG23Lq5HiWRcEYLKw/QX05CHvZ8Q+RZ7UEjYbTBY5UkcdQo0BuG09knvphQN8ux49uNnEcSwmBqs5mBIgXM8GgfnmcN3VaO5+qpGNBJ6vtm/F3fdmLIxS5Q/R3AcQrqdC4HMgL+VKXrqufARr8twEkziANfUxpHSOuWvJhh5uwt27JjZlcbu/GnMq+6wzQVhXPYGU3j0gtrv/LfTQR2Zb5I/HmvYsUjRloF3b++gP75nvrnJNToj9AyQIv871oiY1w85FEKxrn0PGV6VMjv51ALd1DXQdNnvynmqr7FHIye/zcXe9jHbsNv/tAAWykK6kZ6B/JmTcjVgVoXTK9OqquAca0bYGcMIQGI41azWSO9o8x84nD8e+w5f+GmbGAyYVLLyS6eLSLCMnDadwMlJyMzIisRCmIvLuvLa+AU4P1k31sZR//w760we954/qQA2r0gJ4k9F3p91DXnHs3tiXYE2aC3YwcybiFuF/TBa0sw1TL1xTCI/byhUSIlYcUr0D8cnolnt34kZmGEPxIWXzE8tvBhw9+TPuF8v6ipEqCc9wRgDdtmCic/rIbrr/HKkdu5DCybGKGByZMRN67Jvectxbd5RGf4j7+ztmbEgimypncuSrLTjRIuNs+ZEJVckbElX0yE704Id4VfC80WwHmC0L6Rk0gOegKyiJ2qYrmpQQwOuGvJYsWGjU1NMd0H0iwUTgbV8JT/7vliwezTSleSwQTFM6NqMGsB1luT/EjnS2GSXo7xxvy114SODq3rY8X4WjAr+gNDsOm4IvkqBBKohBA2Sx80GZXAQY8gz8C52SbTDP2VCxAAAAAElFTkSuQmCC);
    background-position-x: -1px;
}
.nav-item.label {
    /* img: pointer.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAZtJREFUeNrs1r1OwlAUB/D/hVJJmH0BI0WNDsbooIPyAroZBUXFr0SNA5sOLg64GAd1IUhURKNu+gK6GxYTweILGNeGUNre46RBghEqhYGerffkpr+Tc3t6GRGhmcFsgA0gIjDGTG2OX2RHOHN4V4LSqZn9RGQeEEvJ86KAI8bgUTUsmEGYBsRTr4cuF9v4ei7qdLgc8G1aDkgkcu3kNm4FwTFaul5U+e7ybNeOpYDj8+duj+i+Yw7qLM9pujG+FOi+twwQS2bHRdFxyRg8lfJzkxKz7BCeJDMRoc25/1uec6QXpqSBfwG2o08PAL77Sgz+va3BBwA4vZaV3yo3G5zwnldV/9psb6YiAKCx6PbQIwCc3ciWTCpdo2Q4IIVaE8A50vmiOtOIFiiqyoMAoJGWWw/1Zao6hPUC6BolF4O+UM1fQb0ASkHtKa+6YYBq5oOlgIJGkdWg76BZAMVQWEc47P34NyBxJaedTvTX8nbNwN3StDRhehSXAgAgdvGyKwquqUp/wvIwON6QZ8N/Vf8DYF9KbYANaGnA5wDlWnHQSMWqjwAAAABJRU5ErkJggg==);
    background-position-x: 3px;
    background-size: 28px;
}
.nav-link {
    font-size: 16px;
    line-height: 22px;
    text-transform: uppercase;
    transition: 0.2s ease;
}
.nav-link:hover {
    text-shadow: 0 0 5px #fffc;
}
.nav-item.label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
}
.nav-item .action {
    margin-right: -5px;
    transition: 0.4s ease;
    opacity: 0;
}
.nav-item:hover .action {
    opacity: 1;
}
.nav-item .label-btn {
    width: 24px;
    height: 18px;
    background-position: center;
    transform: translateY(1px);
}
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 20px;
    height: 100px;
    background-color: #0c7e7c;
    padding: 20px 40px 20px 0;
}
.header .display {
    display: flex;
    column-gap: 20px;
    color: #fffe;
}
.header .title {
    margin-right: auto;
    /* img: clip.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REJFRkRFMEQ3NkJFMTFGMDgwMzhFMEM5QkZFNkQ3OEIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REJFRkRFMEU3NkJFMTFGMDgwMzhFMEM5QkZFNkQ3OEIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEQkVGREUwQjc2QkUxMUYwODAzOEUwQzlCRkU2RDc4QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEQkVGREUwQzc2QkUxMUYwODAzOEUwQzlCRkU2RDc4QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnrMcA8AAAUZSURBVHja5JtriFVVFMf3nNF0UGuSHGfMZAwyRZpMx0D9ojZiaVBEzKSFosggph9MCRUNRVDMQTCt/GCi1QcfYUHiFFGakcj4wFIHER/j+63h+Oph039514bDbe999r3n3Hsed8GPuXPOXXuf/zr7vfctamtrE4VsTgSeoTtTcAF4CmwAzQx9Ls33QxSFVAV6gUYOgtvmgdVJLwE68WS1Sa8CJvFkPye5CniJvwdeBKct03saVIJy8Di4Di6D4+Cs7UO1i5D4WgvxfcEEMIYDoLOjnB81rCfDLgG24k3Fvyc3kOMzrLZ/g/VgGbgSRgCCEP8y+Ax08fEcN7jk7MpnIxiE+PfARp/iybqCb8CUfJUAG/F1YKchjYUcgKBtIvg6lwHIl3gq1r+Bg9zQPQMGgOfBYwa/u6AGHH74HwUgQHqBI+CWhstguEcaCw3+xCVQD4o0/sVgJrhqSGM3cB6+/JiJbwSVls/TD/xiSKuWvhdUFbAp9m+BHT6KPTVik8E/GTwXDZD2gjLFvVNUZZwEiye7CWZq7vWm9sJJsHhp37pb/TQb7SRcvLStmutDnRyJvx8h8WQHNNefzKYRtBFfFyHx0lp4ROi2VqdAxJP9qbhW7BSI+G6gQnH9opPQOp9uz2muWwXAVvxPERUvp9Qqa/JqBJMgfjD4QTP1N44DoiCeVoIW8xLXWjAwQ/Edwaca8bR+2KSbSFR4TGyugJE+Jzafg3YG//7gZJpPC+hoORmi2d4aQ/71utkgZbDTQ/xLIYiX1FmK/8SQ/yHwCH1XVTRWG4oaFftx4MccFvv+PH5/wrAQYjKHNbyjuU/5vgv+Ui2ITI/wm5dvzvHx5ompbh+3cxmvtqicroOakMWfA9U+xTek+7n/aTA4TkyA+BWqZTT5oTe/ZZXjMg/xC+Iq3h2ADzWOzaCDIfMRcRbvDsAhjfPbhsw7c4BiK14GoK/G+bBHi7s07uLlOEA3UdgO/jX0tzWGNTg//fwt8DrYl2U/L3jYPIt6eWExaKjS3Gs0+HXinRjVbuzsuIiXCZZr7u01+FVpJhjbaI4dF/Ey0QrN/tltg98dzfXyOIk3BeCSh18zzwvSbQhvTsZCPBkdkXmgWiz08KM6fgQMUtz7XqT29Gl57A3wKmgfRfFk1E1Q5n0UmxpepzfrQYOPlZrQxctMVI1WifA+tUmZ74mzeJmRrr4P8fClMcI0TVsQC/EyM92DvGLhT2fyXgMnLPNrAiOiIl4uiFRqhpLHPSZCbkrAEvCH4XDEjAAWM6yGt5kgl8Vp0POsIj5zwccZxLMTb0JU8aryMZE6x3NUszUV3pt39QL0d5FQHyS4wYJaRe4sNPHCNZxdw11futFu6ioKVBLFuwNw0VDUaTAzJ4ni3VWA7FHwu/j/HrrgB5iXYXtgshJO680wxYu0GR31z+/rAgWWcnVo7zPPHuC7KIgXiintZvCR4ft0zJQOHI/J8q3PALvBC1EQn14F3EHZAkZ5+O4HX/LbPG/4HvUiY8EkzcwzNPG6AMj2YBMYZpkOTY/PiNSZ/FZuR8p4bNHTMo2V4IN8ijcFQHBdpx8aTMnxM9znqrFJhGA2p8RogXN5AI2fyi6I1K9ADoiQzOaIzDpQDb4KsHje5l6lOkzxtiXAbTTGn88NZHGWwr/gEnVNRMCyPS1eykGgKfNww3ofrRm08DIZ9Ra/CrkvHxEL6rh8B5E6i0d04UkU9Qj0W74HIsJWVOg/n/9PgAEAd6XM1ni8y1cAAAAASUVORK5CYII=);
    background-position: left center;
    background-size: 30px;
    padding-left: 44px;
    white-space: nowrap;
    font-size: 31px;
    font-weight: 400;
}
.header .date {
    order: -1;
    white-space: nowrap;
    font-size: 31px;
    font-style: italic;
}
.header .action {
    display: flex;
    column-gap: 10px;
}
.header .create {
    border-radius: 5px;
    background-color: #fffe;
    background-position: 15px center;
    padding: 12px 15px 12px 50px;
    transition: 0.3s ease;
    font-size: 18px;
    color: #0c7e7c;
}
.header .create:hover {
    background-color: #fff;
}
.header #add_task {
    /* img: add1.svg */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiBmaWxsPSIjMGM3ZTdjIj4NCgk8cGF0aCBkPSJNNDgwLTgwcS04MyAwLTE1Ni0zMS41VDE5Ny0xOTdxLTU0LTU0LTg1LjUtMTI3VDgwLTQ4MHEwLTgzIDMxLjUtMTU2VDE5Ny03NjNxNTQtNTQgMTI3LTg1LjVUNDgwLTg4MHE2NSAwIDEyMyAxOXQxMDcgNTNsLTU4IDU5cS0zOC0yNC04MS0zNy41VDQ4MC04MDBxLTEzMyAwLTIyNi41IDkzLjVUMTYwLTQ4MHEwIDEzMyA5My41IDIyNi41VDQ4MC0xNjBxMzIgMCA2Mi02dDU4LTE3bDYwIDYxcS00MSAyMC04NiAzMXQtOTQgMTFabTI4MC04MHYtMTIwSDY0MHYtODBoMTIwdi0xMjBoODB2MTIwaDEyMHY4MEg4NDB2MTIwaC04MFpNNDI0LTI5NiAyNTQtNDY2bDU2LTU2IDExNCAxMTQgNDAwLTQwMSA1NiA1Ni00NTYgNDU3WiIvPg0KPC9zdmc+);
}
.header #add_label {
    /* img: add2.svg */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiBmaWxsPSIjMGM3ZTdjIj4NCgk8cGF0aCBkPSJNNDgwLTE2MHYtODBoMTIwbDE4MC0yNDAtMTgwLTI0MEgxNjB2MjAwSDgwdi0yMDBxMC0zMyAyMy41LTU2LjVUMTYwLTgwMGg0NDBxMTkgMCAzNiA4LjV0MjggMjMuNWwyMTYgMjg4LTIxNiAyODhxLTExIDE1LTI4IDIzLjV0LTM2IDguNUg0ODBabS0xMC0zMjBaTTIwMC0xMjB2LTEyMEg4MHYtODBoMTIwdi0xMjBoODB2MTIwaDEyMHY4MEgyODB2MTIwaC04MFoiLz4NCjwvc3ZnPg==);
}
.content {
    padding: 30px 40px 30px 0;
    transition: 0.5s ease;
}
.ghead {
    display: grid;
    grid-template-columns: auto repeat(2, minmax(0, 20%)) max-content;
    margin-bottom: 20px;
}
.ghead .text {
    min-width: 140px;
    padding: 0 25px;
    color: #0c7e7c;
}
.grid {
    display: grid;
    grid-template-columns: auto repeat(2, minmax(0, 20%)) max-content;
    grid-gap: 10px 0;
}
.grid:empty {
    border: 1px solid #0001;
    border-radius: 5px;
    background-color: #0c7e7c11;
}
.grid:empty::before {
    content: "No results";
    background-position: 12px center;
    padding: 20px 25px 20px 45px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.grid .task {
    display: contents;
}
.grid .data {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #0001;
    background-color: #0c7e7c11;
    padding: 15px 25px;
    text-overflow: ellipsis;
}
.grid .data +.data {
    border-left-width: 0;
}
.grid .data:first-child {
    border-radius: 5px 0 0 5px;
}
.grid .data:last-child {
    border-radius: 0 5px 5px 0;
}
.grid .data:empty::before {
    content: "...";
}
.task .main {
    column-gap: 15px;
}
.task .main::before {
    content: "";
    width: 24px;
    height: 24px;
    margin-left: -5px;
    /* img: icon1.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5RjdDRjRGN0Q2NzZGMDExQjM2NkUyM0E4MDc0QkIyNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozMDZFNjYyRjc2RTkxMUYwQkJFNEEwMUFCMDkzOTEzNyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozMDZFNjYyRTc2RTkxMUYwQkJFNEEwMUFCMDkzOTEzNyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkEwN0NGNEY3RDY3NkYwMTFCMzY2RTIzQTgwNzRCQjI0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjlGN0NGNEY3RDY3NkYwMTFCMzY2RTIzQTgwNzRCQjI0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+4wcWywAAAPdJREFUeNpi/P//PwMtAQsyh5GREaui/zOB6tgZooBMC6jQcYYHDEsYGxiwug7Z0SxEOYOdIRJI+iGJ+DMoMvwE0qsIaWVEti3eydzm/3/GOCBTCMRflHASRXHlBj0GZqb/DC1+l1HE4xaYw5jfGRn/z1y47+QRmAATqtcY02GGY3UNMAQZGfDGGSfUgTiDiBPs8v0njoN5CxktkSXb/C9hNRWmPs7RwhLdgUwMNAY0twB/Kor/f3zQ+2Bgg+jUgb3ixBhi5uD8kiwL8GkcDaLRIBpGQUT3OPgOqhOg5Tq54DtOH4CqOyD1jgLD30HNwF4n0wIABBgAL/5Pi0N3Wr8AAAAASUVORK5CYII=);
    background-position: center;
}
.prioritize .main::before {
    margin-bottom: -1px;
    height: 32px;
    /* img: icon2.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDMwMDNDOTAyNEQ3MTFGMDlFODc4OEZDQ0MwMTQyMUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDMwMDNDOTEyNEQ3MTFGMDlFODc4OEZDQ0MwMTQyMUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEMzAwM0M4RTI0RDcxMUYwOUU4Nzg4RkNDQzAxNDIxRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEMzAwM0M4RjI0RDcxMUYwOUU4Nzg4RkNDQzAxNDIxRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgKXo/gAAAIQSURBVHjaxFdNLwNBGH6n29a3Ewcu5SDEwQ0pR/+Bf+DmIhJ/BCE4OLm4ISkhPVCJiLj4OgmNjyAREl9ddDwzVm3LTrfM1CbPzO58vc+878yzM4xzTv/5BOifn2DBPQ5ZBGmXosUrkADOqYUbIMBpAGm/osUL2jSZ8wBRD1ClIDiK9NbvYKygRXjAKp3BLQWBBqQn8r1VfwiiSuNEM8QoaXIXqBbfMzBpeht2K+oWgR0ZBCME9plwfadH3B8oTbPIH016oBmo9qiLI/arZoWIUYfnvme0gdwGamXLDzG60a0D7R7lKaANGAbKgQqEYgGI4T2tk0DUo1wY7c2Ek0lfrIAA07cG9lkZ0kbFGAFXqOKYdwL5m85FWJdHgL7WA9E0jF/qXoQRn2TXMO91CuveBYzqkd47i0oIjQhJKKfNG2rm8ZbUvw0Z7WHwoUwYOA2irC1HjLZBYa5QJfQbgl1xFHEMCRJ9ztb7NG5jMy6j5syUEL1K8EyfkMu4KDmCRk7BK9ycEn4NXZIT/xRKFoATc1LMv/WxXHXH+BrxJzt6CIRcBGwYXqInzN7+oV+NmTNh0KUJF8CENM5NeiD7sZx+afkbhlBL97PiERAhKHUOp2O/NfyXm1FYOpzRJvKt4tyMsmcpZPgUGNdxsfsNgbS8ellS94tE4Cnr6xqIwQ+8eATusr6uJIk7H/1a8jd5F2AAsyJ+GVM1ZPwAAAAASUVORK5CYII=);
}
.task .task-btn {
    width: 30px;
    height: 30px;
    margin: 0 -5px;
    background-position: center;
}
.task-btn +.task-btn {
    margin-left: 9px;
}
.task #edit_task,
.label #edit_label {
    /* img: btn1.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAR5JREFUSEtjZKAxYKSx+QyD34KnRUXhDIyMixgZGOZJ9fZmoocIRT44evplsODlw1H8V48HMjCAQ6NDure3EtkSsi34v90v6DJ/Rf5nFmU7gQsHNgncPOUHMvg/A0ORTG9vP8wSsiwAGc7A8H8tyJDL/JWHwJZcPLhR4MZJfwYGhvvSvb1KZFuAbDjMEJglghcPbuS9eapdtqfnJFkWYDMc2ZJPLMoTbczE15EVB/gMhxjIGMzouQnFcLAoMRmNXMOJsoASwwlaQKnheC2ghuE4LaCW4VgtoKbhGBZQ23BMC/bF/Wf4+R5HysWezgklc5R88P9s83+Gj7cZMC0hz3BMH4AsAAEUS8g3HLcFcEs+YM3+hIKFrLKIFEOHlwUA1ESSGQXRmXEAAAAASUVORK5CYII=);
}
.task #remove_task,
.label #remove_label,
.grid:empty::before {
    /* img: btn2.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhdJREFUSEu1lc9rE1EQx78zm5TckkNT8CC0iMQ0ZRupB0WEkvRaBBHsQcSKWg+K/g/evHuwtCJFRfDHwZO0pN2TIlgMaywBhfYkeFPwUNv3dqRLNrxsNpsa2D2+ffP9vHnz5juEhD9KWB+RgE9TU9lTm5u//wf+eXo6d9JxfoVjugBb5fJx7XkfhPmuXa8/OwykOTMzD+ABMZ8rrK42zZgOwJeJiaOwrI8AjgDwWORSyXVfxUF8caIlEWEAP6HU6aLj7AQxbcD26GjmTza7BWDMEPSEaM6u119GQb5Wq5ctohWBcdVEO5n9/eKY4+wexHRk0CiXb4jIYkhMs8iFkuu+Ndeb1epFInrhAZa5zkS3C2trD7syCBZakEchuGKR2ZLrvjvY961SmdXMbwRIGUJCRHdM8a4M2hDbviJET0KQPRY5PzQ8nFbMrwGkO8Q972ZhfX2p7ysKNriTk/MEPA4F7KbzeUsMcf+UItdP1GrLUXWKbbSGbc8J0XMzk1Q+39YhQDytr45vbKz0eml9O7kFeYpWMQMAA1prfS1OvGcNzNMkCkj0inoU+W9qZIQgMtRx5yILxVot3D/+lsgaNJJ8pok2WqJW4ZtdLteAyDHT7OIcNdLsgO2MUuORZjewXQPLLUf9AaXORtp1cGp/4Ii8F6J7hx44lcotMN/XSp0pOc73ngMn+JHoyIybXoP86+tFg4iaMf8A5ucXKNizdTAAAAAASUVORK5CYII=);
}
.task #complete,
.completed .main::before {
    /* img: btn3.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAZ9JREFUSEtjZKAxYKSx+QyjFqCEcM+p/qBb569vnpU+6zdMgmpB1HaiLfbv///zfv77de7sx1N22722/wRZQhULYIYzMPxnARn688+vczefX7dZHbb6O8UWtB5tTfjHxDCHgeE/Mzy8GBn+sTNyRpSZF6+myAJ0l0OChPEv4z+GlGrr6gUYQeSw34GF7z3/cgbm/4s3+W/ahC+PEGM4igVpM9NYn4u/XM/wn8GbgYHhDyPT/2BclhBrOIoFfuv81/1nZAhEcvVfRqb/QeiWtB7riPvH+HceepgzMTCmVltUz0P3NTwO/Nb5efxnYgT5gANJ0S/G///9NwVt2gESw+ZyBgbGv0xIYY7TApAELksY/v/ztJSylAalc1hShBjE+JeViTmuwrxiGa74wkhFYEsYGTcwMDCwIyW7H2biZqzIwQJOLf+Zk6qtKhbhSwxYkyk2n5hJmCKZQ9jlBIsKdEsQFhBvOMGiAtkSiAWkGU7QAuSIN5cwZ2ZhZErAF6HY4oKoosJ3fYCntYw1f4Vp6QpSa0CiLCDVUGT1oxYQDD0AVx7DGVX+LAoAAAAASUVORK5CYII=);
}
.completed .data {
    color: #999;
}
.completed .main {
    text-decoration: line-through;
}
.completed #complete,
.completed #edit_task {
    display: none;
}
.completed #restore {
    display: block;
    margin-left: 0;
    /* img: btn4.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEFFN0ZGMUEyQUI1MTFGMDg0MzhGMTQyQkE5N0VCOTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEFFN0ZGMUIyQUI1MTFGMDg0MzhGMTQyQkE5N0VCOTUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4QUU3RkYxODJBQjUxMUYwODQzOEYxNDJCQTk3RUI5NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4QUU3RkYxOTJBQjUxMUYwODQzOEYxNDJCQTk3RUI5NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGbOpYAAAGBSURBVHjaYvz//z8DLQETKYrrXXjraWYB0PASINVAEwughnfTJIgoMRwEGPFFMtDwaiDVgib8EYjPA/E2IF7euOfzE0p8wIpFjB+IHYC4C4gfAR2xAoi5yLIA6LoGdB8AxRiBlDIQTwXi30AcDsT7gJawkhUHQANrgVQbmtg9IM4BMk2B+DkQmwNxB9mpCGgYtrgAiV8CUhFQbg7QF1Jk5wOoT7BZcghILQNiNiCOpygnQy3BBuZAaU+KLMADLkJpbXQJFixp/xOQ4gViHqCLvxJpwS9c5mHzwT0orU6CD3Sg9C1iLNgJpVNJsCATSm8nxoK5QAwqP1KAwWVIRFllC6TigPgvUmTjtgAY7iBvzoeG53qgAWp4DDcAUquh3ClAvY8IRjIU5AKxGTRsLwINmg6k+4EGPIYaDLK0CIiToWacAuJSkkpToCGgQm0pEHvjCSGQ5pWg4MSV4hgJ1clAixSAVBQQewCxPrSAA6X7LSDDgQY/I7s+oHulPygtAAgwAKwWfN/eI6TPAAAAAElFTkSuQmCC);
}

.modal {
    display: none;
    position: fixed;
    top: 0; right: 0;
    bottom: 0; left: 0;
    z-index: 1;
    border: none;
    transition: 0.5s ease allow-discrete;
    opacity: 0; /*allow discrete*/
}
.modal.active {
    display: block;
    opacity: 1;
    @starting-style {
        opacity: 0;
    } /*start value goes last*/
}
.modal:before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    background-color: #000c;
}
.modal .box {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%,-50%);
    width: 450px;
    max-width: 95%;
    box-shadow: 0 0 20px #0003;
    border-radius: 5px;
    background-color: #fff;
    padding: 20px;
}
.modal .close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0; right: 0;
    width: 40px;
    height: 40px;
    overflow: hidden;
    font-size: 0;
    transition: 0.5s ease;
    cursor: pointer;
}
.modal .close:before,
.modal .close:after {
    content: "";
    grid-area: 1 / 1;
    width: 16px;
    height: 2px;
    background-color: #000;
}
.modal .close:before {
    transform: rotate(-45deg);
}
.modal .close:after {
    transform: rotate(45deg);
}
.modal .close:hover {
    transform: rotate(360deg);
}
.modal .title {
    font-size: 30px;
    line-height: 50px;
    font-weight: 300;
}
.modal .hint {
    margin-bottom: 20px;
    color: #666;
}
.modal .required {
    font-size: 17px;
    color: red;
}
.modal .form-input {
    display: flex;
    flex-flow: column;
    row-gap: 10px;
}
.modal .label {
    display: block;
    margin-bottom: 5px;
    font-style: italic;
}
.modal .input {
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    padding: 0 8px;
    color: #0c7e7c;
    transition: 0.2s ease;
}
.modal .input:focus {
    border-color: #000;
}
.modal .input:user-invalid {
    border-color: red;
}
:-webkit-autofill {
    box-shadow: inset 0 0 0 30px #fff;
    -webkit-text-fill-color: #0c7e7c;
}
.modal .select {
    position: relative;
}
.modal .select::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 17px;
    width: 12px;
    height: 12px;
    border: solid #000;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
    pointer-events: none;
}
.modal option {
    background-color: #fff;
    font-size: 17px;
    color: #000;
}
.modal .priority {
    padding: 10px 0 5px;
}
.modal .checkbox {
    position: relative;
    bottom: -1px;
    width: unset;
    height: unset;
    margin-right: 5px;
    cursor: pointer;
    opacity: 0.5;
}
.modal .checkbox:checked {
    opacity: 1;
}
.modal .checkbox +label {
    cursor: pointer;
}
.modal .form-action {
    margin-top: 20px;
    text-align: center;
}
.modal .submit {
    min-width: 180px;
    outline: 1px solid transparent;
    border-radius: 5px;
    background-color: #fa0;
    padding: 15px 20px;
    font-size: 17px;
    color: #fff;
    transition: 0.3s ease;
    cursor: pointer;
}
.modal .submit:hover {
    outline-color: #ffb74d;
    background-color: #ffb74d;
}
.footer {
    grid-column: 1 / 3;
    background-color: #555;
    padding: 10px 20px;
    text-align: center;
    font-size: 15px;
    color: #fff;
}
.footer a {
    margin-left: 1px;
    color: inherit;
}


@media (max-width: 1100px) {

    html body {
        background-image: none;
    }
    .header .date {
        display: none;
    }
    .grid {
        display: flex;
        flex-flow: column;
        row-gap: 20px;
    }
    .ghead {
        display: none;
    }
    .grid .task {
        display: grid;
        grid-template: auto / 1fr 1fr 1fr;
    }
    .task .data {
        border-color: #0002;
        border-radius: 0 !important;
        background-color: #fff9;
    }
    .task .main {
        border-bottom-width: 0;
        background-color: #0c7e7c11;
    }
    .task .main + .data {
        border-left-width: 1px;
    }
    .task .data.main {
        grid-column: 1 / 4;
    }
}

@media (max-width: 900px) {

    .container {
        display: flex;
        flex-flow: column;
    }
    .sidebar {
        flex-flow: row;
        align-items: center;
        justify-content: space-between;
        column-gap: 10px;
        position: relative;
        height: 80px;
        background-color: #0c7e7c;
        padding: 20px 5%;
    }
    .sidebar::before {
        display: none;
    }
    .logo img {
        width: 32px;
        margin: 0;
    }
    .logo span {
        display: block;
    }
    .menu-button {
        min-width: 40px;
        height: 36px;
        border-radius: 5px;
        border: 2px solid #fff;
        /* img: menu.png */
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkIwNEI5MUIyQ0MwMTFGMDk3RkFENjk0RUM0OERCNTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkIwNEI5MUMyQ0MwMTFGMDk3RkFENjk0RUM0OERCNTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQjA0QjkxOTJDQzAxMUYwOTdGQUQ2OTRFQzQ4REI1NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGQjA0QjkxQTJDQzAxMUYwOTdGQUQ2OTRFQzQ4REI1NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvlzSLMAAACsSURBVHjaYvz//z/DQAImhgEGow4YdcCoAwbcASw4xNWBeDoVHfgPiFOB+C6GDKgkxIIX/ac+mI3NLlw+PECD0D6ETZBxxNcFLHjk7KicCLFGAa5EWEGDRFhISiLko0FoC5KSCFmB2AokTyXLQZYcBeI/o7mAWAf4QVPufyphkFkepDjAm4rxzwA1y4eUcqAZiHmAWJpKDngMxK2jRfGoA0YdMOqAQekAgAADAG2OGUiGzZPRAAAAAElFTkSuQmCC);
        background-position: center;
    }
    nav.menu {
        position: fixed;
        top: 80px;
        bottom: 0;
        left: 0; right: 0;
        z-index: 1;
        max-height: 0;
        overflow: hidden;
        background-color: #0c7e7cee;
        padding: 0 5%;
        transition: 1s ease;
        opacity: 0;
    }
    .menu.active {
        max-height: calc(100% - 80px);
        opacity: 1;
    }
    .nav-list {
        margin-top: 25px;
        padding: 0;
    }
    .nav-item .action {
        margin-right: unset;
        opacity: 1;
    }
    .nav-link {
        color: #fff;
    }
    .board {
        flex-grow: 1;
    }
    .content {
        padding: 30px 5%;
    }
    .header {
        height: auto;
        margin: 10px 0 -20px;
        background-color: #0c7e7c00;
        padding: 20px 5%;
    }
    .header .title {
        background: none !important;
        padding-left: 0;
        color: #0c7e7c;
    }
    .header .create {
        box-shadow: inset 0 0 0 2px #0c7e7cdd;
    }
}

@media (max-width: 600px) {

    .header h1 {
        font-size: 25px;
    }
    .header .create {
        height: 36px;
        padding-left: 40px;
        font-size: 0;
    }
    .grid .data {
        padding: 15px 20px;
    }
}