/*Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600&display=swap');

/*Root*/
:root {
    --main-font: 'Noto Sans', sans-serif;
    --main-color: #4E4260;
    --main-color-dark: #362D43;
    --main-text-color: #707070;
    --expired-color:#F23374;
    --important-color:#F5FF6B;
    --completed-color:#C9FF78;
    --important-color-dark:#d5e31b;
    --completed-color-dark:#99dd33;
    --off-color:#FAFAFA;
    --container-width: 100%;
    --main-link-color: #362D43;
    --main-link-hover-color: #4E4260;
    --sidebar-width: 300px;
    --toolbar-height: 60px;
    --footer-height: 40px;
}

/*General*/
* {
    font-family: var(--main-font);
    color: var(--main-text-color);
    box-sizing: border-box;
    border: 0;
    margin: 0;
    padding: 0;
    font-size: 100%;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
p {
    margin-block-start: 1.5rem;
    margin-block-end: 1.5rem;
}
strong {
    font-weight: 600;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
a {
    color: var(--main-link-color);
    text-decoration: none;
}
a:hover {
    color: var(--main-link-hover-color);
}
.container {
    max-width: var(--container-width);
    width: 100%;
}
button[disabled] {
    opacity: 0.2;
    pointer-events: none;
}
*:focus {
    outline: 0;
}
.mobile-only {
    display:none;
    opacity: 0;
    visibility: hidden;
}
.desktop-only {
    display:initial;
    opacity: 1;
    visibility: visible;
}

/*Mainframe*/
#container {
    display: flex;
    flex-direction: row;
}
#container > div > .toolbar {
    height: var(--toolbar-height);
    display: flex;
    flex-direction: row;
    align-items: center;
}
#sidebar {
    flex-basis: var(--sidebar-width);
    width: var(--sidebar-width);
    min-height: calc(100vh - var(--footer-height));
    background-color: #fff;
}
#main {
    width: calc(100% - var(--sidebar-width));
}
#sidebar > .toolbar {
    background-color: var(--main-color-dark);
    padding-left: 40px;
    padding-right: 40px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
#main > .toolbar {
    background-color: var(--main-color);
    padding-left: 70px;
    padding-right: 70px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    align-items: center;
}
.toolbar button {
    background-color: transparent;
}
.toolbar button svg {
    transition: fill 150ms ease-in-out;
}

/*Container*/
.display {
    max-width: 1150px;
    padding: 50px 70px 70px 70px;
    min-height: calc(100vh - var(--footer-height) - var(--toolbar-height));
}
.display section {
    padding-bottom: 3rem;
}
.display h1 .title,
.display h1.title {
    font-weight: 300;
    color: var(--main-color);
    font-size: 3rem;
    width: 100%;
    margin-bottom: 0.5rem;
}
.display .subtitle {
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.5;
    width: 100%;
    margin-bottom: 1rem;
}
.display .btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.display .btn svg {
    fill: var(--main-color);   
    width: 40px;
    height: 40px; 
    margin-right: 6px;
}
.display .btn .btn-txt {
    color: var(--main-color);
    font-weight: 500;
    font-size: 1.4rem;
}
.display .btn:hover * {
    color: var(--main-color-dark);
    fill: var(--main-color-dark);
    
}
.display .code {
    color: var(--main-color);
    font-weight: 500;
}

/*Tasklist toolbar*/
.list-btn svg {
    width: 36px;
    height: 36px;
    cursor: pointer;
}
#list-new svg {
    fill: #eee;
}
#mobile-hide-sidebar svg {
    width: 36px;
    height: 36px;
    fill: #eee;
    cursor: pointer;
}
#list-delete-bulk svg {
    fill: var(--expired-color);
    cursor: pointer;
}

/*Tasklist*/
#sidebar nav {
    background-color: #fafafa;
}

/*Tasklist Element*/
.tasklist-element {
    display: flex;
    flex-direction: row;
    cursor: pointer;
    border-bottom: 1px solid #cccccc;
    transition: background-color 150ms ease-in-out;
}
.tasklist-element:hover {
    background-color: #f5f5f5;
    transition: background-color 150ms ease-in-out;
}
.tasklist-element .task-check {
    width: 45px;
    flex-basis: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tasklist-element .task-check input {
    width: 21px;
    height: 21px;
}
.tasklist-element .task-selectable {
    width: calc(100% - 45px);
    flex-basis: calc(100% - 45px);
    display: flex;
}
.tasklist-element .task-data {
    width: calc(100% - 45px);
    flex-basis: calc(100% - 45px);
    padding: 18px 0;
}
.tasklist-element .task-data .titlebox {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}
.tasklist-element .task-data .titlebox * {
    pointer-events: none;
}
.tasklist-element .task-data .title {
    color: var(--main-color);
    font-size: 1.2rem;
    font-weight: 500;
    width: fit-content;
    transition: margin-left 300ms linear, color 150ms ease-in-out;
}
.tasklist-element .task-data .title::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: calc(1.2 * 1.2rem);
    width: 30px;
    background: linear-gradient(90deg, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 100%);
}
.tasklist-element .task-data .date {
    font-size: 0.8rem;
    transition: color 150ms ease-in-out;
}
.tasklist-element .task-status {
    width: 45px;
    flex-basis: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 150ms ease-in-out;
}
.tasklist-element .task-status svg {
    fill: var(--main-color);
    opacity: 0;
    transition: opacity 0ms ease-in-out, fill 150ms ease-in-out;
}
.tasklist-element.selected .task-status svg {
    opacity: 1;
    transition: opacity 150ms ease-in-out, fill 150ms ease-in-out;
}
.tasklist-element[expired] .task-status {
    background-color: var(--expired-color);
}
.tasklist-element[expired]:not([completed]) .task-data .title {
    color: var(--expired-color);
}
.tasklist-element[expired]:not([important]):not([completed]) .task-status svg {
    fill: #ffffff;
}
.tasklist-element[expired]:not([important]):not([completed]):not([active]) .task-status svg {
    fill: var(--main-color);
}
.tasklist-element[important] .task-status {
    background-color: var(--important-color);
}
.tasklist-element[completed] .task-status {
    background-color: var(--completed-color);
}
.tasklist-element:not([active]) {
    background-color: #ffffff;
}
.tasklist-element:not([active]) .task-status {
    background-color: #fafafa;
}
.tasklist-element:not([active]) .title,
.tasklist-element:not([active]) .date {
    color: #cccccc;
}

/*Task toolbar*/
.main-btn svg {
    width: 36px;
    height: 36px;
    cursor: pointer;
    fill: #eee;
}
#mobile-show-sidebar svg {
    fill: #eee;
}
#task-active svg {
    fill: var(--completed-color);
}
#task-delete svg {
    fill: var(--expired-color);
}
#main[important] #task-important svg {
    fill: var(--important-color);
}
#main[completed] #task-completed svg {
    fill: var(--completed-color);
}
#main:not([active]) #task-active svg {
    fill: var(--expired-color);
}
#main .toolbar li:last-child {
    margin-left: auto;
}
#language > span {
    color: #fff;
}

/*Language*/
#language {
    position: relative;
    align-items: center;
}
#language-btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
#language-btn svg {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    fill: #eee;
}
#language-text {
    font-size: 0.9rem;
}
#language-btn span {
    color: #eee;
}
#language-list {
    position: absolute;
    z-index: 10;
    background-color: #fff;
    padding: 6px 8px 8px;
    border-radius: 5px;
    box-shadow: 0px 0px 9px -7px #000;
    visibility: hidden;
    opacity: 0;
}
#language-list.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 150ms ease-in-out, opacity 150ms ease-in-out;
}
#language-list.visible {
    visibility: visible;
    opacity: 1;
    transition: visibility 150ms ease-in-out, opacity 150ms ease-in-out;
}
#language-list li {
    padding: 6px 10px;
    cursor: pointer;
    transition: color 300ms ease-in-out;
    color: #aaa;
    font-size: 0.85rem;
}
#language-list li.selected {
    color: #362D43;
}
#language-list li:hover {
    cursor: pointer;
    color: #362D43;
}

/*Task*/
#task label {
    position: absolute;
    z-index: -1;
}
#task label[for="date"] {
    position: relative;
    z-index: initial;
}
#title {
    font-weight: 300;
    color: var(--main-color);
    font-size: 3rem;
    width: 100%;
    resize: none;
    margin-bottom: 0.5rem;
}
#title:focus::placeholder {
    color: transparent;
}
#title::placeholder {
    color: var(--main-color);
}
.date-box {
    font-weight: 300;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    width: 100%;
}
.date-picker {
    position: relative;
    display: inline-block;
}
#date {
    font-weight: 400;
    background-color: #fff;
}
#date::-webkit-calendar-picker-indicator {
    background-image: none;
    background-color: #ffffff;
    display: block;
    width: 100%;
    height: 29px;
    position: absolute;
    left: 0;
    top: 0;
}
#date-picker-text {
    display: inline-block;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 1;
    bottom: 1px;
    pointer-events: none;
    background-color: #fff;
}
#main[expired] #date-picker-text {
    color: var(--expired-color);
}
#description {
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.5;
    width: 100%;
    height: auto;
    resize: none;
}
#description:focus::placeholder {
    color: transparent;
}
#task form input:focus,
#task form textarea:focus {
    outline: 0px!important;
}

/*Footer*/
#footer {
    min-height: var(--footer-height);
    border-top: 1px solid #ddd;
    padding: 8px 40px;
}
.footer-text {
    text-align: center;
    color: #999;
    font-size: 0.8rem;
}