﻿.whatsapp-button-generator {
        right: 5px;
        position: fixed;
        border-radius: 50%;
        background-color: #00b94e;
        margin-right: 20px;
        bottom: 20px;
        width: 80px;
        height: 80px;
        z-index: 110;
        cursor: pointer
    }

    #whatsapp-button-div:hover {
        background-color: #00b94e
    }

    svg {
        margin-left: 20px;
        margin-top: 20px
    }

    .whatsapp-button-content {
        padding-top: 7px;
        height: 60px
    }

    .whatsapp-button-web {
        display: none
    }

    .whatsapp-button-web:hover {
        background: red
    }

    .whatsapp-button-mobile {
        display: inherit
    }

    @media (min-width: 48em) {
        .whatsapp-button-web {
            display: inherit
        }

        .whatsapp-button-mobile {
            display: none
        }
    }

    .bounce-whatsapp-button {
        animation: bounce-whatsapp-button 2s infinite;
        -webkit-animation: bounce-whatsapp-button 2s infinite;
        -moz-animation: bounce-whatsapp-button 2s infinite;
        -o-animation: bounce-whatsapp-button 2s infinite
    }

    @-webkit-keyframes bounce-whatsapp-button {

        0%,
        100%,
        20%,
        50%,
        80% {
            -webkit-transform: translateY(0)
        }

        40% {
            -webkit-transform: translateY(-30px)
        }

        60% {
            -webkit-transform: translateY(-15px)
        }
    }

    .sonar-wave {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        background-color: #00b94e !important;
        opacity: 0;
        z-index: -1;
        pointer-events: none
    }

    .sonar-wave {
        animation: sonarWave 1s linear infinite
    }

    @keyframes sonarWave {
        from {
            opacity: 0.4;
        }
        to {
            transform: scale(3);
            opacity: 0;
        }
    }

    .bottombar
    {
        background-color: #0d0d42;
        position: fixed;
        bottom: 0px;
        width: 400px;
        left: 50%;
        margin-left: -200px;
        border-radius: 10px 10px 0 0;
        text-align: center;
        vertical-align: sub;
        opacity: 0.8;
        color: white;
        border: 3px solid #ff7200;
        border-bottom: none;
        z-index: 999;
    }
