.page {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--background-color)
}

.main {
    width: 100%;
}

.widget-panel {
    border-left: 0.05rem var(--highlight-color) solid;
}

.sidebar {

}

@media (max-width: 1000px) {
    .widget-panel {
        display: none;
    }

}

.top-bar {
    background-color: var(--background-color);
    border-bottom: 0.05rem var(--highlight-color) solid;
    height: 3rem;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    position: sticky;
    top: 0;
    z-index: +6;

    i {
        padding-right: 0.5rem;
    }
}

.top-bar {
    .btn {
        margin-right: 0.5rem;
        padding: 0.2rem 0.4rem;
        border-radius: 0.5rem;
        cursor: pointer;
    }
}

.top-bar {
    .btn:hover {
        background-color: var(--hover-color);
    }
}

.top-bar {
    .btn i {
        display: inline-block;
        padding-right: 0;
        vertical-align: middle;
    }
}

.top-bar {
    .action {
        margin-left: auto;
    }
}

.top-bar {
    .action + .action {
        margin-left: 0;
    }
}

.top-bar {
    .action:last-child {
        margin-right: 0;
    }
}