.component_page_filespage{
    display: flex;
    flex-direction: column;
    height: 100%;
    .error{
        cursor: pointer;
    }
    .container{
        padding: 5px 0 20px 0;
        box-sizing: border-box;
    }

    .page_container{
        flex: 1;
        display: flex;
        overflow: hidden;
    }

    .infinite_scroll_loading{
        text-align: center;
        .component_loader{
            margin-top: -50px;
            svg{
                height: 40px;
            }
        }
    }

    .sidebar{
        width: 250px;
        transition: width 0.3s ease;
        background: var(--light);
        &.close{width: 0;}
    }
}

.scroll-y{
    flex: 1;
    overflow-y: scroll!important;
    overflow-x: hidden!important;
    -webkit-overflow-scrolling: touch;
    > .container{
        height: 100%;
    }
}

.component_stats{
    h2{
        margin: 0 0 5px 0;
        font-size: 1.2em;
        font-weight: 100;
        .percent{color: var(--emphasis-primary);}
        > div{
            float: right;
            span.grandTotal{
                font-size: 0.8em;
                color: var(--emphasis-secondary);
                &:before { content: "/"; }
            }
            span.completed{
                color: var(--emphasis-secondary);
            }
        }
    }
    .stats_content {
        clear: both;
        max-height: 150px;
        overflow-y: auto;
        overflow-x: hidden;
        font-size: 0.85em;
        div{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: calc(100% - 10px);
            -webkit-overflow-scrolling: touch;
        }
        .error_color{
            color: var(--error);
        }
        .todo_color{
            color: var(--light);
        }
    }
}