// stylelint-disable max-nesting-depth, selector-max-compound-selectors

.warning-container {
    margin-top: 10px;
    color: $brand-danger;
}

.display-container {
    border: 1px solid $color-border-gray;
    margin-top: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 500px;

    .heading-container {
        width: 100%;
        height: 40px;
        font-weight: bold;
        border-bottom: 1px solid $color-border-gray;
        background-color: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;

        .name-title,
        .permission-title,
        .citation-title {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .name-title {
            padding-left: 40px;
            width: 50%;
        }

        .permission-title {
            width: 30%;
        }

        .citation-title {
            width: 20%;
        }

        &.mobile {
            .name-title {
                padding-left: 5px;
                width: 100%;
            }
        }
    } 
}

.add-user-container {
    margin-top: 10px;

    .user-search-container {
        margin-top: 10px;
        max-height: 425px;
        overflow: hidden;
    }

    &.mobile {
        max-height: 450px;
    }
}
