@media (max-width:900px) {
/*General*/
.mobile-only {
    display: initial;
    opacity: 1;
    visibility: inherit;
}
.desktop-only {
    display:none;
    opacity: 0;
    visibility: hidden;
}

/*Main*/
#main {
    width: 100%;
}
#main > .toolbar {
    padding-left: 20px;
    padding-right: 20px;
}
#main > .toolbar > ul > li:nth-child(2) {
    margin-left: auto;
}
body.sidebar-visible #main {
    pointer-events: none;
}
.display {
    padding: 30px 40px;
}
.display h1 .title,
.display h1.title {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.8rem;
}
.date-box {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
#description,
.display .subtitle {
    font-size: 1.2rem;
}
.display .btn .btn-txt {
    font-size: 1.2rem;
}
.display .btn svg {
    width: 30px;
    height: 30px;
    margin-right: 3px;
}

/*Sidebar*/
#sidebar {
    position: absolute;
    width: 100%;
    left: -100%;
    z-index: 10;
    transition: ease-in-out;
    transition-duration: 300ms;
    min-height: 100vh;
}
body.sidebar-visible #sidebar {
    left: 0px;
    transition: ease-in-out;
    transition-duration: 300ms;
    box-shadow: -10px -13px 15px 5px #000;
}
#sidebar > .toolbar {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}
#list-new {
    margin-left: auto;
}

/*Task*/
#task {
    position: relative;
}
#title {
    max-width: calc(100% - 50px);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.8rem;
    min-height: 2.2rem;
}
#task-status-btns {
    position: absolute;
    right: 20px;
    top: 15px;
    display: inline-flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0px 0px 15px -10px #000;
    padding: 10px;
}
#task-status-btns button {
    cursor: pointer;
}
#task-status-btns svg {
    width: 26px;
    height: 26px;
}
#task-important-mobile svg {
    fill: #bbb;
}
#task-completed-mobile svg {
    fill: #bbb;
}
#main[active] #task-active-mobile svg {
    fill: var(--completed-color-dark);
}
#main:not([active]) #task-active-mobile svg {
    fill: var(--expired-color);
}
#main[important] #task-important-mobile svg {
    fill: var(--important-color-dark);
}
#main[completed] #task-completed-mobile svg {
    fill: var(--completed-color-dark);
}
}