.ssc-hk .sidebar-wrapper {
    display: flex;
    width: 100%;
    height: calc(100vh - 50px - 32px);
    align-items: stretch;
}

.ssc-hk.no-navbar .sidebar-wrapper {
    height: calc(100vh - 10px);
}

.ssc-hk .sidebar-wrapper #sidebar {
    min-width: 250px;
    max-width: 250px;
    color: #fff;
    transition: all 0.3s;
}

.ssc-hk .sidebar-wrapper #sidebar .sidebar-header {
    background-color: #8bb6dc !important;
    height: 28px;
    padding: 3px 0px;
}

.ssc-hk .sidebar-wrapper #sidebar .sidebar-header .sidebar-header-title {
    float: left;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    margin: 4px 6px;
}

.ssc-hk .sidebar-wrapper #sidebar .sidebar-header .sidebar-header-btn {
    background-color: transparent !important;
    min-width: 40px !important;
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
    float: right;
}

.ssc-hk .sidebar-wrapper .sidebar-header-extension {
    background-color: #8bb6dc !important;
    height: 28px;
    margin: 0px 4px 0px -4px;
    padding: 2px 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    float: left;
}

.ssc-hk .sidebar-wrapper .sidebar-header-extension .sidebar-collapse-btn {
    background-color: transparent !important;
    min-width: 40px !important;
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
}

.ssc-hk .sidebar-wrapper #sidebar #tree-view {
    overflow: auto;
    height: calc(100vh - 50px - 32px - 30px) !important;
    background-color: #e9edf1;
}

.ssc-hk.no-navbar .sidebar-wrapper #sidebar #tree-view {
    height: calc(100vh - 10px - 30px) !important;
}

.ssc-hk .sidebar-wrapper #sidebar #tree-view .list-group-item {
    background-color: transparent;
}

.ssc-hk .sidebar-wrapper #sidebar #tree-view .list-group-item > div[data-role=wrapper] {
    padding: 0px 4px 0px 0px;
}

.ssc-hk .sidebar-wrapper #sidebar #tree-view .list-group-item.active > div[data-role="wrapper"] {
    background-color: #2e6da4 !important;
}

.ssc-hk .sidebar-wrapper #content {
    width: calc(100% - 250px);
}

.ssc-hk .sidebar-wrapper #content .tab-content {
    width: 100%;
    height: calc(100vh - 50px - 32px - 34px) !important;
    margin: 0px;
    overflow-x: hidden;
    overflow-y: auto;
}

.ssc-hk.no-navbar .sidebar-wrapper #content .tab-content {
    height: calc(100vh - 10px - 34px) !important;
}

.ssc-hk .sidebar-wrapper #content .datagrid th,
.ssc-hk .sidebar-wrapper #content .datagrid td {
    padding: 6px 8px;
}

.ssc-hk .sidebar-wrapper #content .datagrid thead th > div {
    display: inline;
}

.ssc-hk .sidebar-wrapper #content .datagrid thead th [data-role="sorticon"] i.gj-icon,
.ssc-hk .sidebar-wrapper #content .datagrid thead th [data-role="sorticon"] i.material-icons {
    font-size: 16px;
}

.ssc-hk .sidebar-wrapper #content .datagrid td {
    white-space: normal;
}

.ssc-hk .sidebar-wrapper:not(.force-sidebar-visible) #sidebar {
    display: none;
}

.ssc-hk .sidebar-wrapper:not(.force-sidebar-visible) #content {
    width: 100%;
}