.contacts {
    .no-icon {
        width: 0px;
    }
    .x-tool-expand-right:before{
        content: '\f0d9' !important
    }
    .x-tool-collapse-left:before{
        content: '\f0da' !important
    }
    .x-grid-row:hover {
        // call user
        .x-phone-display {
            padding-left: 45px;
            &:before {
                font-family: FontAwesome;
                content: "\f095";
            }
        }
        .x-phone-display-extra-margin {
            position: relative;
            left: 10px;

            &:before {
                font-family: FontAwesome;
                content: "\f095";
            }
        }
        // video call user
        .x-video-display {
            margin-left: 20px;

            &:before {
                font-family: FontAwesome;
                content: "\f03d";
            }
        }
        .x-video-display-extra-margin {
            position: relative;
            left: 10px;
            &:before {
                font-family: FontAwesome;
                content: "\f03d";
            }
        }

        .x-drop-display {
            position: relative;
            left: 5px;

            &:before {
                font-family: FontAwesome;
                content: $trash;
            }
        }
        // add user
        .x-add-user-display {
            position: relative;
            left: 10px;

            &:before {
                font-family: FontAwesome;
                content: $add-user;
            }
        }
        // edit user
        .x-edit-display {
            position: relative;
            left: 35px;

            &:before {
                font-family: FontAwesome;
                content: $edit;
            }
        }
        // remove user
        .x-remove-user-display {
            position: relative;
            right: 20px;
            &:before {
                font-family: FontAwesome;
                content: $trash;
            }
        }
    }
    // @include box-shadow(0px,2px,8px,0px,rgba(0,0,0,.15));
    @include box-shadow(0, 1px, 2px, 0, rgba(0,0,0,0.2));

    &.x-menu-default {
        border-width: 0;
    }

    .x-menu-header {
        line-height: 20px;
        background-color: $lightest-color;
        padding: 22px 15px;
        border-bottom: 1px solid #ccc !important;

        .x-title-icon-wrap {
            width: 40px;
            padding-right: 28px;
            text-align: left;
        }

        .x-title-text {
            font-size: 16px;
        }
    }

    .x-menu-item-icon-default {
        padding-top: 10px;
        padding-left: 12px;
        font-size: 16px;
        line-height: 24px;
    }

    .x-menu-item {
        line-height: 50px;

        .x-menu-item-text-default.x-menu-item-indent-no-separator {
            margin-left: 56px;
        }

        &.online-user {
            .x-menu-item-text-default.x-menu-item-indent-no-separator {
                margin-left: 18px;
            }

            .x-menu-item-link:after {
                color: $online-menu-item-color;
                content: "\f111";
                @extend .menu-item-common;
            }

            &.x-menu-item-active {
                .x-menu-item-link:after {
                    color: white;
                }
            }
        }

        &.offline-user {
            .x-menu-item-link:after {
                color: $offline-menu-item-color;
                content: "\f111";
                @extend .menu-item-common;
            }

            .x-menu-item-text-default.x-menu-item-indent-no-separator {
                margin-left: 20px;
            }
        }

        .x-menu-item-link:after {
            @extend .menu-item-common;
            color: $default-menu-item-color;
            content: "\f105";
        }
    }

    .x-action-col-icon {
        color: #919191;
        font-size: 18px;
        height: 16px;
        width: 18px;
        cursor: pointer;
    }
}
