body {
}
/* menu style */

.communications-channels {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
}

.communications-channels-wrapper .menu-object i.main-icon {
    width: 55px;
    display: inline-block;
}

    .communications-channels-wrapper .menu-object i.main-icon:before {
        content: url('/cms-resources/icons/com-channels/main-close.svg');
        height: 120px;
        width: 120px;
    }

.communications-channels-wrapper.active .menu-object i.main-icon:before {
    content: url('/cms-resources/icons/com-channels/main-open.svg');
}

.communications-channels-wrapper .menu-object ul {
    position: relative;
    margin-right: 10px;
    list-style: none;
}

    .communications-channels-wrapper .menu-object ul li {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        cursor: pointer;
        text-align: center;
        opacity: 0;
        transition: 0.5s;
    }

        .communications-channels-wrapper .menu-object ul li i {
            width: 90px;
        }

        .communications-channels-wrapper .menu-object ul li .embeddedServiceHelpButton {
            position: absolute;
            top: auto;
            left: auto;
        }

            .communications-channels-wrapper .menu-object ul li .embeddedServiceHelpButton .helpButton button:hover:before, .communications-channels-wrapper .menu-object ul li .embeddedServiceHelpButton .helpButton button:focus:before {
                display: none;
            }

            .communications-channels-wrapper .menu-object ul li .embeddedServiceHelpButton .helpButton {
                position: inherit;
                right: auto;
                height: auto;
                bottom: auto;
            }

                .communications-channels-wrapper .menu-object ul li .embeddedServiceHelpButton .helpButton button {
                    height: 60px;
                    display: inline-block;
                    width: 59px;
                    background-image: url(/cms-resources/icons/Chat4.png);
                    min-width: 0;
                    padding: 0;
                    background-color: transparent;
                    margin: 0;
                    border-radius: 0;
                    border: none;
                    box-shadow: none;
                }

                    .communications-channels-wrapper .menu-object ul li .embeddedServiceHelpButton .helpButton button * {
                        display: none !important;
                    }

        .communications-channels-wrapper .menu-object ul li i span {
            display: inline;
        }



.communications-channels-wrapper .menu-object .main-item {
    position: relative;
    z-index: 4;
}



.communications-channels-wrapper .menu-object {
    display: flex;
    align-items: baseline;
    direction:rtl;
}


.communications-channels .chat-item {
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
    z-index: 2;
}

.communications-channels .active .chat-item {
    transform: translateX(calc(65px * 2 - 115px * 2));
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
}



.communications-channels .whatsapp-item {
    /*   transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 3;*/
}

    .communications-channels .whatsapp-item i {
        content: url('/cms-resources/icons/com-channels/whatsup.svg');
    }

        .communications-channels .whatsapp-item i:before {
        }

.communications-channels .active .whatsapp-item {
    opacity: 1;
    transform: translateX(-15px);
    /*transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;*/
    padding: 2px 0 0 0;
}






@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}