/**
* ICONS
**/
.icon{
    display: block;
    height: 1.5rem;
    width: 1.5rem;
    background-color: #8F8F8F;
    background: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
}

.icon.user-add{
    mask: url(../img/icons/user-add.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/user-add.svg) no-repeat 50% 50%;
}
.icon.directbox-send{
 mask: url(../img/icons/directbox-send.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/directbox-send.svg) no-repeat 50% 50%;
}
.icon.arrow-square-up{
    mask: url(../img/icons/arrow-square-up.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/arrow-square-up.svg) no-repeat 50% 50% ;
}
.icon.arrow-square-down{
    transform: rotate(180deg);
    mask: url(../img/icons/arrow-square-up.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/arrow-square-up.svg) no-repeat 50% 50% ;
}
.icon.book{
     mask: url(../img/icons/book.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/book.svg) no-repeat 50% 50%;
}
.icon.briefcase{
    mask: url(../img/icons/briefcase.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/briefcase.svg) no-repeat 50% 50%;
}
.icon.calculator{
    mask: url(../img/icons/calculator.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/calculator.svg) no-repeat 50% 50%;
}
.icon.key{
    mask: url(../img/icons/key.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/key.svg) no-repeat 50% 50%;
}
.icon.receipt-edit{
    mask: url(../img/icons/receipt-edit.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/receipt-edit.svg) no-repeat 50% 50%;
}
.icon.teacher{
    mask: url(../img/icons/teacher.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/teacher.svg) no-repeat 50% 50%;
}
.icon.user-line{
    mask: url(../img/icons/user-line.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/user-line.svg) no-repeat 50% 50%;
}
.icon.user{
     mask: url(../img/icons/user.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/user.svg) no-repeat 50% 50%;
}
.icon.user-minus{
    mask: url(../img/icons/user-minus.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/user-minus.svg) no-repeat 50% 50%;
}
.icon.profile-add{
    mask: url(../img/icons/profile-add.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/profile-add.svg) no-repeat 50% 50%;
}
.icon.edit{
    mask: url(../img/icons/edit.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/edit.svg) no-repeat 50% 50%;
}

.icon.user-search {
    mask: url(../img/icons/user-search.svg) no-repeat 50% 50%;
    -webkit-mask: url(../img/icons/user-search.svg) no-repeat 50% 50%;
}