.header {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-logo {
        display: flex;
        align-items: center;
        cursor: pointer;

        &-picture {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

        &-text {
            font-size: 16px;
            font-weight: 500;
        }
    }

    &-operation {
        display: flex;
        align-items: center;
        cursor: pointer;

        &-picture {
            width: 30px;
            height: 30px;
            background: @primary-color;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            color: #FFFFFF;
        }

        &-name {
            font-weight: 500;
            color: @primary-color;
            margin-right: 10px;
        }

        &-down {
            color: @primary-color !important;
        }
    }
}

.nav {
    width: 200px !important;
    height: calc(100vh - 50px) !important;
    background: #FFFFFF !important;

    &-menu {
        width: 100%;
        height: calc(100vh - 100px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    &-bottom {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.breadcrumb {
    width: 100%;
    height: 48px;
    padding: 20px;
    background: @background-color;
    display: flex;
    align-items: center;
}

.content {
    width: 100%;
    height: 100%;
    padding: 0 20px 20px 20px;
    background: @background-color;
    overflow: auto;
}