.page[name='studentTasks'] > .content {
    position:absolute;
    top:96px;
    bottom:0;
    box-sizing:border-box;
    overflow-y:auto;
}
.page[name='studentTasks'] > .content > .tasks {
    box-sizing:border-box;
    padding-top: 32px;
    padding-bottom: 32px;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar {
    display:flex;
    justify-content: flex-start;
    align-items:center;
    gap: 32px;
    white-space: nowrap;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .date {
    display: flex;
    align-items: center;
    gap: 24px;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .date > .wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .date > .wrapper > .button,
.page[name='studentTasks'] > .content > .tasks > .toolbar > .date > .button {
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .date > .button[key='selectDate'] {
    height:44px;
    padding: 12px 20px;
    box-sizing:border-box;
    border-radius:22px;
    font-size:14px;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .date > .button[key='selectDate'] > img {
    width:16px;
    height:16px;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .date > .wrapper > .button {
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .date > .wrapper > .button > img {
    width:12px;
    height:12px;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .date > .wrapper > .button[key='previous'] > img {
    transform:rotate(180deg);
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .date > .wrapper > .info > .title {
    font-size:12px;
    font-weight:500;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .date > .wrapper > .info > .range {
    margin-top:4px;
    font-size:14px;
    font-weight:600;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    overflow-x: auto;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .filters > .tabs {
    display:flex;
    align-items:center;
    max-width:100%;
    white-space: nowrap;
    overflow-x: auto;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .filters > .tabs > .title {
    font-size:12px;
    font-weight:600;
    width: 30px;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .filters > .tabs > .button {
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 8px 20px;
    border-radius:18px;
    font-size:12px;
    font-weight:500;
}
.page[name='studentTasks'] > .content > .tasks > .toolbar > .filters > .tabs > .title,
.page[name='studentTasks'] > .content > .tasks > .toolbar > .filters > .tabs > .button {
    flex-shrink:0;
}
.page[name='studentTasks'] > .content > .tasks > .summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
    margin-top:40px;
}
.page[name='studentTasks'] > .content > .tasks > .summary > .item {
    display:flex;
    flex-direction:column;
    align-items:center;
    box-sizing:border-box;
    padding:20px;
    border-radius:16px;
}
.page[name='studentTasks'] > .content > .tasks > .summary > .item > .icon {
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
}
.page[name='studentTasks'] > .content > .tasks > .summary > .item > .icon > img {
    width:24px;
    height:24px;
}
.page[name='studentTasks'] > .content > .tasks > .summary > .item > .value {
    margin-top:12px;
    font-size:20px;
    font-weight:700;
}
.page[name='studentTasks'] > .content > .tasks > .summary > .item > .name {
    margin-top:4px;
    font-size:14px;
    font-weight:500;
}
.page[name='studentTasks'] > .content > .tasks > .list {
    display: grid;
    gap: 24px;
    margin-top:24px;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item {
    box-sizing:border-box;
    padding:16px;
    border-radius:16px;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .top {
    display:flex;
    align-items:center;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .top > .icon {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .top > .icon > img {
    width:16px;
    height:16px;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .top > .info > .subject {
    font-size:14px;
    font-weight:600;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .top > .info > .teacher {
    font-size:12px;
    font-weight:500;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .top > .status {
    padding: 4px 10px;
    border-radius:12px;
    font-size:10px;
    font-weight:600;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .details > div,
.page[name='studentTasks'] > .content > .tasks > .list > .item > .stats > div {
    padding-left:8px;
    padding-right:8px;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .name {
    margin-top:12px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:14px;
    font-weight:600;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .details,
.page[name='studentTasks'] > .content > .tasks > .list > .item > .stats {
    display:flex;
    column-gap:8px;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .details {
    margin-top:14px;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .stats {
    margin-top:8px;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .details > div,
.page[name='studentTasks'] > .content > .tasks > .list > .item > .stats > div {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:4px;
    padding-bottom:4px;
    border-radius:12px;
    font-size:12px;
    font-weight:500;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .details > [key='time'] > img,
.page[name='studentTasks'] > .content > .tasks > .list > .item > .stats > [key='score'] > img {
    width:12px;
    height:12px;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .button {
    height:40px;
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    font-size:12px;
    font-weight:600;
}
.page[name='studentTasks'] > .content > .tasks > .list > .item > .button > img {
    width:12px;
    height:12px;
}

@media(min-width: 1201px) {
    .page[name='studentTasks'] > .content > .tasks {
        padding-right: 20px;
        padding-left: 20px;
    }
    .page[name='studentTasks'] > .content > .tasks > .toolbar > .filters {
        display: flex;
        gap: 20px;
    }
    .page[name='studentTasks'] > .content > .tasks > .list {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
@media(max-width: 1200px) {
    .page[name='studentTasks'] > .content > .tasks > .summary {
        padding-right: 20px;
        padding-left: 20px;
    }
    .page[name='studentTasks'] > .content > .tasks > .list {
        padding-right: 20px;
        padding-left: 20px;
    }
    .page[name='studentTasks'] > .content > .tasks > .list {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media(max-width: 910px) {
     .page[name='studentTasks'] > .content > .tasks > .list {
        grid-template-columns: 1fr 1fr;
    }
}
@media(max-width: 768px) {
    .page[name='studentTasks'] > .content > .tasks > .toolbar {
        align-items:normal;
        flex-direction: column;
    }
    .page[name='studentTasks'] > .content > .tasks > .toolbar > .date {
        gap: 20px;
    }
    .page[name='studentTasks'] > .content > .tasks > .summary {
        grid-template-columns: 1fr 1fr;
    }
}
@media(max-width: 630px) {
     .page[name='studentTasks'] > .content > .tasks > .list {
        grid-template-columns: 1fr;
    }
}
@media(max-width: 480px){
    .page[name='studentTasks'] > .content > .tasks > .toolbar {
        gap: 40px;
    }
    .page[name='studentTasks'] > .content > .tasks > .toolbar > .date {
        flex-direction: column-reverse;
    }
    .page[name='studentTasks'] > .content > .tasks > .toolbar > .date > .wrapper {
        gap: 36px;
    }
    .page[name='studentTasks'] > .content > .tasks > .toolbar > .date > .button {
        width: 180px;
    }
    .page[name='studentTasks'] > .content > .tasks > .summary {
        grid-template-columns: 1fr 1fr;
    }
}
@media(min-width: 480px) {
    .page[name='studentTasks'] > .content > .tasks {
        border-radius: 16px;
    }
    .page[name='studentTasks'] > .content  {
        padding-right:20px;
        padding-bottom:20px;
        padding-left:20px;
    }
}