/*------------- toggle Style ---------------*/
.whatsapp-toggle {
    font-weight: normal;
}

.whatsapp-toggle .toggle-content {
    z-index: 100;
    border-radius: 5px;
    overflow: hidden;
    transform: scale(0);
    opacity: 0;
    transition: .4s ease-in-out;
    transform-origin: 100% 100%;
}
.whatsapp-toggle .toggle-content > div {
    width: 100%;
    padding: 10px;
}
.whatsapp-toggle .toggle-header {
    font-size: 12pt;
}
.whatsapp-toggle .toggle-body {
    width: 100%;
    background-color: #EEEEEE;
}
.whatsapp-toggle .account-item {
    width: 100%;
    padding: 8px;
    display: inline-flex;
    border-radius: 10px;
    cursor: pointer;
}
.whatsapp-toggle .account-picture {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    overflow: hidden;
}
.whatsapp-toggle .account-picture img {
    width: 100%;
}
.whatsapp-toggle .account-description {
    margin-left: 10px;
}
.whatsapp-toggle .account-description > span {
    display: block;
}
.whatsapp-toggle .account-title, .whatsapp-toggle .account-number {
    font-size: 9pt;
}
.whatsapp-toggle .account-name {
    font-size: 12pt;
}
.whatsapp-toggle .account-number {
    letter-spacing: .7px;
}
.whatsapp-toggle .toggle-footer {
    padding: 5px !important;
    padding-right: 15px !important;
    font-size: 11pt;
    text-align: right;
}
.whatsapp-toggle .toggle-footer span {
    cursor: pointer;
    transition: .4s ease;
}
.whatsapp-toggle .toggle-footer span .fa {
    transition: .4s ease;
}
.whatsapp-toggle .toggle-footer span:hover {
    letter-spacing: .5px;
}
.whatsapp-toggle .toggle-footer span:hover > .fa {
    transform: translateX(2pt);
}

.whatsapp-toggle .toggle-lg {
    width: 350px;
}
.whatsapp-toggle .toggle-md {
    width: 300px;
}
.whatsapp-toggle .toggle-sm {
    width: 250px;
}

.whatsapp-toggle .right-bottom {
    position: fixed;
    /* bottom: 40px; */
    bottom: 80px;
    right: 20px;
}
.whatsapp-toggle .left-bottom {
    position: fixed;
    bottom: 40px;
    left: 20px;
}

/*------------- toggle Icon Style ---------------*/

.whatsapp-toggle .toggle-icon {
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    cursor: pointer;
    overflow: hidden;
}
.whatsapp-toggle .toggle-icon-lg {
    width: 60px;
    height: 60px;
    font-size: 25pt;
}
.whatsapp-toggle .toggle-icon-md {
    width: 50px;
    height: 50px;
    font-size: 20pt;
}
.whatsapp-toggle .toggle-icon-sm {
    width: 40px;
    height: 40px;
    font-size: 15pt;
}
.whatsapp-toggle .toggle-icon:hover .fa {
    -webkit-animation: icon-shake 2s ease-in 0s infinite normal;
    -o-animation: icon-shake 2s ease-in 0s infinite normal;
    animation: icon-shake 2s ease-in 0s infinite normal;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}


/*------------- toggle events ---------------*/

.whatsapp-toggle .content-hide {
    width: 0px;
    opacity: 0;
    transform: scale(0);
}
.whatsapp-toggle .content-show {
    opacity: 1;
    transform: scale(1);
}


/*------------- toggle Animations ---------------*/

@keyframes icon-shake {
    0% {
        transform: scale(1);
    }
    20%, 30%, 40% {
        transform: scale(1.15) rotateZ(30deg);
    }
    25%, 35%, 45% {
        transform: scale(1.15) rotateZ(-30deg);
    }
    50% {
        transform: scale(1) rotateZ(0deg);
    }
}
@-webkit-keyframes icon-shake {
    0% {
        transform: scale(1);
    }
    20%, 30%, 40% {
        transform: scale(1.15) rotateZ(30deg);
    }
    25%, 35%, 45% {
        transform: scale(1.15) rotateZ(-30deg);
    }
    50% {
        transform: scale(1) rotateZ(0deg);
    }
}
@-moz-keyframes icon-shake {
    0% {
        transform: scale(1);
    }
    20%, 30%, 40% {
        transform: scale(1.15) rotateZ(30deg);
    }
    25%, 35%, 45% {
        transform: scale(1.15) rotateZ(-30deg);
    }
    50% {
        transform: scale(1) rotateZ(0deg);
    }
}
@-o-keyframes icon-shake {
    0% {
        transform: scale(1);
    }
    20%, 30%, 40% {
        transform: scale(1.15) rotateZ(30deg);
    }
    25%, 35%, 45% {
        transform: scale(1.15) rotateZ(-30deg);
    }
    50% {
        transform: scale(1) rotateZ(0deg);
    }
}