/*Eye-Icon*/

.eyeIcon{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex; 
    justify-content: center;
    align-items: center;
    transition:  all 0.2s ease-in-out;
}

.eyeIcon i{
    text-decoration: none;
    color:rgb(86, 86, 86) !important;
    transition: all 0.4s ease-in-out;
}

.eyeIcon:hover {
    box-shadow: 4px 4px 4px grey;
    background: rgba(151, 151, 151, 0.2);
    cursor:pointer;
    color: rgb(32, 44, 100)!important;

}

.eyeIcon:hover i{
    filter: grayscale(100%) brightness(200%);
    color: rgb(32, 44, 100);
}

.eyeIcon:active {
    box-shadow: -4px -4px -4px grey;
    filter: grayscale(100%) brightness(20%);
}

/*Delete-Icon*/
.deleteIcon{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex; 
    justify-content: center;
    align-items: center;
    transition:  all 0.2s ease-in-out;
}

.deleteIcon i{
    text-decoration: none;
    color:rgb(86, 86, 86) !important;
    transition: all 0.4s ease-in-out;
}

.deleteIcon:hover {
    box-shadow: 4px 4px 4px grey;
    background: rgba(151, 151, 151, 0.2);
    cursor:pointer;
    color: rgb(32, 44, 100)!important;
}

.deleteIcon:hover i{
    filter: grayscale(100%) brightness(200%);
    color: rgb(32, 44, 100);
}

.deleteIcon:active {
    box-shadow: -4px -4px -4px grey;
    filter: grayscale(100%) brightness(20%);
}

.deleteIcon:hover img{
    filter: grayscale(100%) brightness(200%);
}

.deleteIcon img{
    color:rgb(86, 86, 86) !important;
    transition: all 0.2s ease-in-out;
}


/*List-Icon*/

.listIcon{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex; 
    justify-content: center;
    align-items: center;
    transition:  all 0.2s ease-in-out;
}

.listIcon i{
    text-decoration: none;
    color:rgb(86, 86, 86) !important;
    transition: all 0.4s ease-in-out;
}

.listIcon:hover {
    box-shadow: 4px 4px 4px grey;
    background: rgba(151, 151, 151, 0.2);
    cursor:pointer;
    color: rgb(32, 44, 100)!important;
}

.listIcon:hover i{
    filter: grayscale(100%) brightness(200%);
    color: rgb(32, 44, 100);
}

.listIcon:active {
    box-shadow: -4px -4px -4px grey;
    filter: grayscale(100%) brightness(20%);
}



/*Box-Icon*/

.boxIcon{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex; 
    justify-content: center;
    align-items: center;
    transition:  all 0.2s ease-in-out;
}

.boxIcon i{
    text-decoration: none;
    color:rgb(86, 86, 86) !important;
    transition: all 0.4s ease-in-out;}

.boxIcon:hover {
    box-shadow: 4px 4px 4px grey;
    background: rgba(151, 151, 151, 0.2);
    cursor:pointer;
    color: rgb(32, 44, 100)!important;
}

.boxIcon:hover i{
    filter: grayscale(100%) brightness(200%);
    color: rgb(32, 44, 100);
}

.boxIcon:active {
    box-shadow: -4px -4px -4px grey;
    filter: grayscale(100%) brightness(20%);
}




.gradIcon{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex; 
    justify-content: center;
    align-items: center;
    transition:  all 0.2s ease-in-out;
}

.gradIcon i{
    text-decoration: none;
    color:rgb(86, 86, 86) !important;
    transition: all 0.4s ease-in-out;}

.gradIcon:hover {
    box-shadow: 4px 4px 4px grey;
    background: rgba(151, 151, 151, 0.2);
    cursor:pointer;
    color: rgb(32, 44, 100)!important;
}

.gradIcon:hover i{
    filter: grayscale(100%) brightness(200%);
    color: rgb(32, 44, 100);
}

.gradIcon:active {
    box-shadow: -4px -4px -4px grey;
    filter: grayscale(100%) brightness(20%);
}



/*Share-Icon*/
.shareIcon{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex; 
    justify-content: center;
    align-items: center;
    transition:  all 0.2s ease-in-out;
}

.shareIcon i{
    text-decoration: none;
    color:rgb(86, 86, 86) !important;
    transition: all 0.4s ease-in-out;}

.shareIcon:hover {
    box-shadow: 4px 4px 4px grey;
    background: rgba(151, 151, 151, 0.2);
    cursor:pointer;
    color: rgb(32, 44, 100)!important;
}

.shareIcon:hover i{
    filter: grayscale(100%) brightness(200%);
    color: rgb(32, 44, 100);
}

.shareIcon:active {
    box-shadow: -4px -4px -4px grey;
    filter: grayscale(100%) brightness(20%);
}


/*Edit Icon*/

.editIcon{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex; 
    justify-content: center;
    align-items: center;
    transition:  all 0.2s ease-in-out;
}

.editIcon i{
    text-decoration: none;
    color:rgb(86, 86, 86) !important;
    transition: all 0.4s ease-in-out;}

.editIcon:hover {
    box-shadow: 4px 4px 4px grey;
    background: rgba(151, 151, 151, 0.2);
    cursor:pointer;
    color: rgb(32, 44, 100)!important;
}

.editIcon:hover i{
    filter: grayscale(100%) brightness(200%);
    color: rgb(32, 44, 100);
}

.editIcon:active {
    box-shadow: -4px -4px -4px grey;
    filter: grayscale(100%) brightness(20%);
}

/*Add New- Img*/

.addnew-link{
    
    margin: 0px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 0px !important;
    display: flex !important; 
    justify-content: center !important;
    align-items: center ;
    transition:  all 0.2s ease-in-out;
}

.addnew-link img{
    text-decoration: none;
    margin: 0px !important;
    transition: all 0.4s ease-in-out;
}

.addnew-link:hover {
    box-shadow: 4px 4px 4px grey;
    background: rgba(151, 151, 151, 0.2);
    cursor:pointer;

}

.addnew-link:hover img{
    filter: grayscale(100%) brightness(300%);

}

.addnew-link:active {
    box-shadow: -4px -4px -4px grey;
    filter: grayscale(100%) brightness(20%);
}




.hide-block{
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: flex; 
    justify-content: center;
    align-items: center;
    transition:  all 0.2s ease-in-out;
background:linear-gradient(145deg, #FFFFFF, #e5e7ea);

}

.hide-block i{
    
  
    text-decoration: none;
    color:rgb(86, 86, 86) ;
    transition: all 0.4s ease-in-out;
}

.hide-block:hover {
    box-shadow: 4px 4px 4px grey;
    background: rgba(151, 151, 151, 0.2);
    cursor:pointer;
    color: rgb(32, 44, 100)!important;
}

.hide-block:hover i{
    filter: grayscale(100%) brightness(200%);
    color: rgb(32, 44, 100);
}






/*Minus Icon*/
.hide-block{
    
    margin: 0px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin-left: 0px !important;
    display: flex !important; 
    justify-content: center !important;
    align-items: center ;
    transition:  all 0.2s ease-in-out;
}

.hide-block i{
    text-decoration: none;
    margin: 0px !important;
    transition: filter 0.4s ease-in-out;
}

.hide-block:hover {
    box-shadow: 4px 4px 4px grey;
    background: rgba(151, 151, 151, 0.2);
    cursor:pointer;

}

.hide-block:hover i{
    filter: grayscale(100%) brightness(300%);

}

.hide-block:active {
    box-shadow: -4px -4px -4px grey;
    filter: grayscale(100%) brightness(20%);
}

/*Edit Icon*/
.unlinkIcon{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex; 
    justify-content: center;
    align-items: center;
    transition:  filter 0.2s ease-in-out;
}

.unlinkIcon i{
    
    padding:3px;
    text-decoration: none;
    color:rgb(86, 86, 86) ;
    transition: filter 0.4s ease-in-out;
}

.unlinkIcon:hover {
    box-shadow: 4px 4px 4px grey;
    background: rgba(151, 151, 151, 0.2);
    cursor:pointer;
    color: rgb(32, 44, 100)!important;
}

.unlinkIcon:hover i{
    filter: grayscale(100%) brightness(200%);
    color: rgb(32, 44, 100);
}

.unlinkIcon:active {
    box-shadow: -4px -4px -4px grey;
    filter: grayscale(100%) brightness(20%);
}
.add-user{
    padding:3px;
    background: rgba(151, 151, 151, 0.2);
    color:rgb(86, 86, 86) ;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    transition:  filter 0.2s ease-in-out;
    box-shadow: 4px 4px 4px grey;    
}

/*linkIcon*/
.linkIcon{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex; 
    justify-content: center;
    align-items: center;
    transition:  filter 0.2s ease-in-out;
}

.linkIcon i{
    
    padding:3px;
    text-decoration: none;
    color:rgb(86, 86, 86) !important;
    transition: filter 0.4s ease-in-out;}

.linkIcon:hover {
    box-shadow: 4px 4px 4px grey;
    background: rgba(151, 151, 151, 0.2);
    cursor:pointer;
    color: rgb(32, 44, 100)!important;
}

.linkIcon:hover i{
    filter: grayscale(100%) brightness(200%);
    color: rgb(32, 44, 100);
}

.linkIcon:active {
    box-shadow: -4px -4px -4px grey;
    filter: grayscale(100%) brightness(20%);
}