@import "../../../assets/styles/mixins.scss";
@import "../../../assets/styles/variables.scss";
.xpo-user-list {
    padding: 0 $gutter-base*5 $gutter-base*5;
    margin: $gutter-zero;
    li {
        padding: $gutter-base*3 $gutter-base*5;
    }
    li:nth-child(odd) {
        background: $color-grey-2;
    }
}

.user-search-box {
    padding: $gutter-zero $gutter-base*5;
    align-items: center;
    display: flex;
}

.add-user {
    margin-right: $gutter-base*11;
}

.user-details {
    word-break: break-word;
}

.create-user {
    border: none !important;
}
.user-search-box /deep/ input {
    border-bottom: $gutter-zero;
} 
@media(max-width: $tablet-screen) {
    .xpo-hidden {
        display: none;
    }
    .create-user {
        min-width: $gutter-base*10 !important;
        padding: $gutter-base*3;
    }
    .add-user {
        margin-right: $gutter-base;
    }
    .xpo-flex-grid {
        display: flex;
        .xpo-col-1 {
            margin: $gutter-zero $gutter-zero $gutter-base*2 $gutter-zero;
        }
    }
    .xpo-hidden {
        display: none;
    }
    .xpo-user-list {
        padding: $gutter-zero;
        li {
            padding: $gutter-base*3 $gutter-base*2;
        }
    }
    .user-search-box {
        padding: $gutter-base*2;
        @include border-bottom($border-base, $border-default-pattern, $color-grey-4);
    }
    .add-user {
        margin: 0;
        padding: 0;
        @include border-left($border-base, $border-default-pattern, $color-grey-4);
        @include border-bottom($border-base, $border-default-pattern, $color-grey-4);
    }
    .create-user {
        min-width: $gutter-base*10 !important;
        margin: $gutter-base;
    }
    .xico-add {
        margin-right: $gutter-zero !important;
    }
}