.user-list
    // border-radius: 1rem
    // border: 1px solid $grey
    margin-top: .5rem

    .head
        // border-bottom: 1px solid $grey
        // padding: 1.5rem 0

        & *
            font-weight: 500
            font-size: 1.4rem
            color: #777
            cursor: pointer
            display: flex

            & img
                width: 1rem
                margin-left: .3rem
                margin-top: .1rem

                &.DESC
                    transform: rotate(180deg)

    .users
        width: 100%

        .user
            margin-top: 1.5rem
            box-shadow: 0 .5rem .9rem 0 transparentize($black, .9)
            // border-bottom: 2px dashed $lightgrey
            padding: 1rem 0
            display: flex
            align-items: center
            background: $white
            transition: background .2s

            &.active
                // background: #e8f4f8
                background: lighten($blue, 40%)
                // transform: scale(1.03)
                // transform-style: initial

            &:first-child
                margin-top: 1rem

            &:last-child
                border-bottom: none

            .icons
                display: flex
                justify-content: space-evenly
                position: relative

    .add-user
        background: $lightgrey
        border-radius: 1rem
        width: 9rem
        height: 4rem

.property
    padding: .5rem .2rem
    background: inherit
    border-radius: 1rem
    width: calc(100% - .4rem)
    background: $white

    &.capacity
        width: 4rem

        &:read-only
            width: 2.5rem
            -moz-appearance: textfield

            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button
                -webkit-appearance: none
                margin: 0

    &.empty
        border: 1px solid $yellow

.icons
    width: 13%

.name
    width: 13%

.email
    width: 20%

.username
    width: 11%

.roles
    width: 27%
    display: flex
    align-items: center

.info
    width: 3%
    display: flex
    justify-content: center
    & img
        width: 2rem
        cursor: pointer
        margin: auto

.name-long
    width: 25%
.street
    width: 17%
.number
    width: 10%
.city
    width: 18%
.country
    width: 17%


    
#dropdown-basic
    background: $lightgrey
    border: $lightgrey
    font-size: 2rem
    height: 2.5rem
    line-height: 2rem

.dropdown-item
    font-size: 1.7rem !important

.users-top-bar
    width: 100%
    display: flex
    justify-content: space-between
    align-content: center
    margin: 2rem 0 1rem

    .new-user
        display: inherit
        align-items: center
        justify-content: space-between
        color: $white
        height: 3.6rem
        min-width: 12rem
        font-size: 1.6rem
        font-weight: 500
        padding: 0 2rem 0 1rem
        border-radius: 100rem
        @include gradient-blue
        @include shadow-blue
        transition: transform .2s

        &:hover
            transform: scale(1.05)

        & img
            width: 1.5rem
            margin-right: .5rem
            margin-top: -.2rem

    .search-container
        // width: 16em
        display: flex
        border-radius: 100rem
        overflow: hidden

        & input
            width: 20rem
            background: $white
            padding: .5rem 1rem
            font-size: 1.6rem

        .loupe
            width: 3.5rem
            background: $white
            display: flex
            align-items: center

            & img
                width: 2.1rem

        .search-category
            height: 100%
            background: $white
            border: none
            cursor: pointer
            font-size: 1.5rem
            width: 12rem