.view-roles,
.view-roles .portlet-sidebar {
    height: 100%;
    overflow: auto;
}

.view-roles {
    .dijitTabPaneWrapper .dijitContentPane {
        box-sizing: content-box;
        overflow: auto;
    }

    .portlet-main {
        height: 100%;
        width: 100%;
    }
}

.view-roles__filter {
    margin-bottom: $spacing-1 * 2;
}

.view-roles__heading {
    background-color: $color-palette-gray-200;
    border-radius: $border-radius-xs;
    border: solid 1px $color-palette-gray-400;
    display: flex;
    justify-content: space-between;
    margin-bottom: $spacing-1 * 4;
    min-height: 50px;
    padding: $spacing-1;
}

.view-roles__tree {
    height: auto;
    padding-bottom: $spacing-2;
}

.view-roles__tabs,
.view-roles__tabs-container {
    height: 100%;
}

.view-roles__user-filter {
    margin-bottom: $spacing-1 * 2;
    width: 300px;
}

.view-roles__user-grid {
    margin-bottom: $spacing-1;
}

.view-roles__portlets-list {
    border: solid 1px $color-palette-gray-400;
    border-radius: $border-radius-xs;
    margin: 0 0 $spacing-1;
    height: 175px;
    overflow: auto;

    ul {
        margin: 0;
    }
}

.view-roles__portlets-list-item {
    display: flex;
    justify-content: space-between;
    padding: $spacing-1;
    border-bottom: solid 1px $color-palette-gray-400;
    align-items: center;
}

.nameText {
    align-self: center;
    font-size: $font-size-lmd;
    font-weight: normal;
}

.view-roles__cms-tabs {
    .dojoxGridMasterView .dojoxGridRowTable {
        td {
            cursor: pointer;
        }
    }
}
