zl365/src/component/content/index.css

.zl-365-content {
    display: flex;
    flex: 0 0 calc(100% - 47px);
    max-width: calc(100% - 47px);
    height: calc(100vh - 48px);
    flex-wrap: wrap;
}

img.content-header-img-size {
    width: 48px;
    height: 48px;
}

.content-header-img {
    flex-shrink: 0;
    margin-right: 20px;
    display: flex;
    align-items: center;
    align-self: center;
}

.zl-365-content-header {
    display: flex;
    flex: 0 0 100%;
    max-width: 100%;
    height: 80px;
    align-items: center;
    padding-left: 32px;
    padding-right: 32px;
    justify-content: space-between;
}

.zl-365-content-header-left {
    display: flex;
}

.content-header-img-name-text {
    color: rgb(50, 49, 48);
    font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 24px;
    font-weight: 600;
}

button.btngroup-btn {
    display: flex;
    border: none;
    background-color: transparent;
    margin: 0 8px;
}

.zl-365-content-header-btngroup {
    display: flex;
}

.tools-text {
    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightRegular);
    line-height: var(--lineHeightBase300);
}

button.btngroup-btn {
    color: var(--colorNeutralForeground1);
    color: rgb(96, 94, 92);
}

    button.btngroup-btn:hover {
        color: var(--colorBrandBackground);
    }

a.content-side-li-nav {
    color: #323130;
    padding-left: 30px;
    height: 44px;
    line-height: 44px;
    position: relative;
    display: inline-block;
    font-style: var(--fontStyleRegular);
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightCustomFont500, var(--fontWeightRegular));
}

.zl-365-content-side-li:hover {
    background: #faf9f8;
    color: #4f6bed;
    cursor: pointer;
}

    .zl-365-content-side-li:hover a.content-side-li-nav {
        color: #4f6bed;
    }

.zl-365-content-side {
    flex: 0 0 227px;
    max-width: 227px;
    height: calc(100vh - 128px);
    overflow: auto;
    border-right: 1px solid #edebe9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.zl-365-content-body {
    flex: 0 0 calc(100% - 227px);
    max-width: calc(100% - 227px);
    height: calc(100vh - 128px);
    overflow: auto;
}

.zl-365-content-side-li.side-li-active > a:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-left: 2px solid #4f6bed;
}


.other-app-icon {
    display: flex !important;
    height: 40px;
    width: 40px;
    font-size: 32px;
    justify-content: flex-start;
    padding-left: 9px;
}

    .other-app-icon img {
        width: 32px;
        height: 40px;
        margin-left: 20px;
    }


.zl-365-content-side-teamify {
    border-top: 1px solid #edebe9;
    color: #666;
    font-size: 14px;
}

.zl-365-content-side-li.side-li-active {
    background-color: #F0F0F0;
}

    .zl-365-content-side-li.side-li-active a.content-side-li-nav {
        font-weight: 600;
        color: #242424;
    }

.zl-365-content-side-ul {
    font-size: var(--fontSizeBase300);
    font-family: var(--fontFamilyBase);
}