src/components/RolesDocument/RolesDocument.scss

.roletype{
    display: flex;
}
.rolesdocument{
    padding-bottom:1rem;
    &__main{
        padding-left: 1rem;
        flex-direction: column;
        &-individual{
            display: flex;
        }
        &:hover{
            background-color: #32353b;
        }
    }
    &__header{
        display: flex;
        &-photo{
            padding: 1.2rem;
        }
    }
    &__content{
        display: flex;
        flex-direction: column;
        width: 100%;
        &-header{
            display: flex;
            align-items: center;
            padding-top: 1rem;
            width: 100%;
            position: relative;
        }
        &-name{
            color:#d9dde0;
            margin-right: 1rem;
            font-size: 1.6rem;
        }
        &-admin{
            color:#e74c3c;
        }
        &-date{
            color:#717479;
            font-size: 1.25rem;
            margin-right: auto;
        }
    }
    &__message{
        color:#d9dde0;
        font-family: 'Whitney-light', sans-serif;
        letter-spacing: .02rem;
        word-spacing: .02rem;
        padding-top: .5rem;
        padding-right: 1rem;
        white-space: pre-wrap;
        &-rolemenu{
            font-family: 'Whitney-bold';
        }
        &-react{
            margin-top: .4rem;
            font-size: 1.5rem;
        }
        &-allroles{
            display: flex;
            flex-direction: column;
            padding: 1.5rem 0;
        }
        &-rolebuttons{
            display: flex;
            align-items: center;
        }
    }
}

//////////////////////allrolescolormap
.allrolescolor{
    display: flex;
    align-items: center;
    padding: .9rem 0rem;
    &__rolename{
        &-span{
            background-color: #2f3136;
            font-size: 85%;
            padding: .4rem;
            border-radius: 3px;
        }
    }
    &__rolevalue{
        margin-right: .2rem;
    }
}
////////////////////////allroles
.allroles{
    display: flex;
    align-items: center;
    margin-right: .2rem;
    background-color: hsla(0,0%,100%,0.06);
    border-radius: 5px;
    padding: .3rem .5rem;
    cursor: pointer;
    &__number{
        margin-left: .5rem;
        color:#72767d;
        &:hover{
            color:#d9dde0;
        }
    }
}