/* ======================================================= 
 *
 *      Whatsapp Chat Support
 *      Version: 1.1
 *      By [castlecode]
 *
 *      ---------------------------------
 *      CONTENTS
 *      ---------------------------------
 *
 *      [A] GLOBAL
 *      [B] BUTTON
 *      [C] BUTTON PERSON
 *      [D] POPUP
 *          [1] HEADER
 *          [2] MULTIPLE PERSONS
 *          [3] INPUT TEXT FIELD
 *    
 * ======================================================= */

/* ====================================================================== *
        [A] GLOBAL
 * ====================================================================== */

.whatsapp_chat_support {
    position: relative;
    display: inline-block;
    vertical-align: top;
    color: var(--white-color);
}

/* ====================================================================== *
        [B] BUTTON
 * ====================================================================== */

.wcs_button {
    text-align: center;
    vertical-align: middle;
    padding: 9px 18px;
    border-radius: 50px;
    background: #26c281;
    color: #fff;
    display: inline-block;
    margin-right: 3px;
    cursor: pointer;

    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.wcs_button .fa {
    font-size: 15px;
    margin-right: 3px;
    color: var(--white-color);
}

.wcs_button_circle {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    padding: 0;
}

.wcs_button_circle .fa {
    line-height: 50px;
    font-size: 25px;
    margin-right: 0px;
}

.wcs_button_label {
    vertical-align: middle;
    cursor: pointer;
    display: inline-block;
    font-size: 1.4rem;
    margin-right: 10px;
    margin-left: 10px;
    background: #26c281;
    color: var(--bg-footer);
    padding: 5px 10px;
    border-radius: 4px;

    -webkit-transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    transition: 0.3s ease all;
}

.wcs_button_label_hide {
    -webkit-transform: translate(10px, 0);
    -moz-transform: translate(10px, 0);
    -ms-transform: translate(10px, 0);
    transform: translate(10px, 0);

    opacity: 0;
    visibility: hidden;
}

.wcs_fixed_right {
    z-index: 999;
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.wcs_fixed_left {
    z-index: 999;
    position: fixed;
    bottom: 20px;
    left: 20px;
}

.wcs_fixed_left .wcs_popup {
    left: 0 !important;
    right: unset !important;
}

/* ====================================================================== *
        [C] BUTTON PERSON
 * ====================================================================== */

.wcs_button_person {
    padding: 7px 18px 8px 10px;
    border-radius: 50px;
    text-align: left;
    background: #26c281;
    color: #fff;

    -webkit-transition: 0.4s ease all;
    -moz-transition: 0.4s ease all;
    transition: 0.4s ease all;

    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.wcs_button_person:hover {
    -webkit-transform: translate(0, -3px);
    -moz-transform: translate(0, -3px);
    -ms-transform: translate(0, -3px);
    transform: translate(0, -3px);

    -webkit-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    -moz-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    -o-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    -ms-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
}

/* PERSON IMG */

.wcs_button_person_img {
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
}

.wcs_button_person_img img {
    border: 2px solid #fff;
    border-radius: 50%;
    display: block;
    width: 60px;
    height: 60px;
}

.wcs_button_person_img .fa {
    font-size: 60px;
}

/* PERSON CONTENT */

.wcs_button_person_content {
    padding-left: 14px;
    display: table-cell;
    vertical-align: middle;
}

/* PERSON NAME */

.wcs_button_person_name {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.8);
}

/* PERSON DESCRIPTION */

.wcs_button_person_description {
    font-size: 14px;
    font-weight: bold;
    line-height: 23px;
    color: #fff;
}

/* PERSON STATUS */

.wcs_button_person_status {
    font-size: 10px;
    vertical-align: middle;
    color: #fff;
    background: rgba(255, 255, 255, 0.341);
    display: inline-block;
    padding: 1px 5px;
    border-radius: 5px;
}

/* BUTTON PERSON OFFLINE */

.wcs_button_person_offline {
    background: #a4a4a4 !important;
    cursor: auto !important;
}

.wcs_button_person_offline:hover {
    -webkit-transform: translate(0, 0) !important;
    -moz-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
    transform: translate(0, 0) !important;

    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -o-box-shadow: none !important;
    -ms-box-shadow: none !important;
    box-shadow: none !important;
}

.wcs_button_person_offline .wcs_button_person_status {
    background: #f1a528;
}

.wcs_button_person_offline .wcs_button_person_img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

/* ====================================================================== *
        [D] POPUP
 * ====================================================================== */

.wcs_popup {
    position: absolute;
    width: 300px;
    bottom: 100%;
    right: 0;
    margin-bottom: 20px;
    visibility: hidden;
    max-width: calc(100vw - 60px);
}

/* CLOSE */

.wcs_popup_close {
    position: absolute;
    top: 2px;
    right: 8px;
    cursor: pointer;

    opacity: 0.8;
    color: #fff;
    font-size: 18px;

    -webkit-transition: all 0.08s ease-in-out;
    -moz-transition: all 0.08s ease-in-out;
    transition: all 0.08s ease-in-out;
}

.wcs_popup_close:hover {
    opacity: 1;
}

/* ====================================================================== *
            [1] HEADER
     * ====================================================================== */

.wcs_popup_header {
    padding: 20px;
    background: #26c281;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    color: #fff;
    font-size: 1.6rem;
    text-align: center;

    -webkit-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    -moz-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    -o-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    -ms-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
}

.wcs_popup_header .fa-whatsapp {
    font-size: 50px;
    display: block;
    margin-bottom: 20px;
    color: var(--white-color);
}

.wcs_popup_header_description {
    display: block;
    margin-top: 10px;
    font-size: 1.4rem;
}

/* ====================================================================== *
            [2] MULTIPLE PERSONS
     * ====================================================================== */

/* CONTAINER */

.wcs_popup_person_container {
    /*max-height: 470px;
        overflow-y: scroll;*/
    background: #fff;
    padding: 20px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;

    -webkit-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    -moz-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    -o-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    -ms-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
}

/* PERSON */

.wcs_popup_person {
    background: #f5f7f9;
    padding: 10px;
    text-align: left;
    margin-bottom: 10px;
    cursor: pointer;

    -webkit-transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    transition: 0.2s ease all;
}

.wcs_popup_person:hover {
    -webkit-box-shadow: 0 1px 2px rgba(43, 43, 43, 0.15);
    -moz-box-shadow: 0 1px 2px rgba(43, 43, 43, 0.15);
    -o-box-shadow: 0 1px 2px rgba(43, 43, 43, 0.15);
    -ms-box-shadow: 0 1px 2px rgba(43, 43, 43, 0.15);
    box-shadow: 0 1px 2px rgba(43, 43, 43, 0.15);
}

.wcs_popup_person:last-child {
    margin-bottom: 0;
}

.wcs_popup_person::after {
    content: "";
    clear: both;
    display: table;
}

/* PERSON IMG */

.wcs_popup_person_img {
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
}

.wcs_popup_person_img img {
    border: 2px solid #26c281;
    border-radius: 50%;
    display: block;
    width: 60px;
    height: 60px;
}

/* PERSON CONTENT */

.wcs_popup_person_content {
    padding-left: 15px;
    display: table-cell;
    vertical-align: middle;
}

/* PERSON NAME */

.wcs_popup_person_name {
    font-size: 14px;
    color: #383838;
    font-weight: bold;
}

/* PERSON DESCRIPTION */

.wcs_popup_person_description {
    font-size: 11px;
    line-height: 18px;
    color: #8c8c8c;
}

/* PERSON STATUS */

.wcs_popup_person_status {
    font-size: 10px;
    vertical-align: middle;
    color: #fff;
    background: #26c281;
    border-radius: 5px;
    display: inline-block;
    padding: 1px 5px;
}

/* POPUP PERSON OFFLINE */

.wcs_popup_person_offline {
    cursor: auto !important;
}

.wcs_popup_person_offline .wcs_popup_person_img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.wcs_popup_person_offline:hover {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -o-box-shadow: none !important;
    -ms-box-shadow: none !important;
    box-shadow: none !important;
}

.wcs_popup_person_offline .wcs_popup_person_status {
    background: #f1a528;
}

/* ====================================================================== *
            [3] INPUT TEXT FIELD
     * ====================================================================== */

.wcs_popup_input {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    background: #fff;
    padding: 10px 10px;

    -webkit-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    -moz-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    -o-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    -ms-box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
    box-shadow: 0 4px 8px 1px rgba(43, 43, 43, 0.15);
}

.wcs_popup_input input {
    border: 0;
    outline: none;
    width: 90%;
    color: #555555;
}

.wcs_popup_input input::placeholder {
    color: #cfcfcf;
}

.wcs_popup_input>* {
    vertical-align: top;
}

.wcs_popup_input .fa {
    font-size: 17px;
    color: #9da3a5;
    vertical-align: middle;
    cursor: pointer;
}

/* AVATAR */

.wcs_popup_avatar {
    overflow: hidden;
    position: absolute;
    left: -70px;
    bottom: -4px;
}

.wcs_fixed_left .wcs_popup_avatar {
    left: initial;
    right: -70px;
}

.wcs_popup_avatar img {
    border-radius: 50%;
    border: 2px solid var(--main-color);
    display: block;
    height: 50px;
    width: 50px;

    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.wcs_popup_input_offline {
    color: #f1a528;
    font-size: 1.6rem;
}

.wcs_popup_input_offline+.wcs_popup_avatar {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

@media only screen and (max-width: 400px) {
    .wcs_popup_avatar {
        display: none;
    }
}

/* ====================================================================== *
        [H] EFFECTS
 * ====================================================================== */

.wcs-show .wcs_popup {
    visibility: visible;
}

/* Effect 0: Fade in */

.wcs-effect-0 .wcs_popup {
    opacity: 0;

    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.wcs-show.wcs-effect-0 .wcs_popup {
    opacity: 1;
}

/* Effect 1: Fade in and scale up */

.wcs-effect-1 .wcs_popup {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;

    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.wcs-show.wcs-effect-1 .wcs_popup {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

/* Effect 2: Slide from the right */

.wcs-effect-2 .wcs_popup {
    -webkit-transform: translateX(20%);
    -moz-transform: translateX(20%);
    -ms-transform: translateX(20%);
    transform: translateX(20%);
    opacity: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.wcs-show.wcs-effect-2 .wcs_popup {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}

/* Effect 3: Slide from the bottom */

.wcs-effect-3 .wcs_popup {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.wcs-show.wcs-effect-3 .wcs_popup {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}

/* Effect 4: Newspaper */

.wcs-effect-4 .wcs_popup {
    -webkit-transform: scale(0) rotate(720deg);
    -moz-transform: scale(0) rotate(720deg);
    -ms-transform: scale(0) rotate(720deg);
    transform: scale(0) rotate(720deg);
    opacity: 0;
}

.wcs-show.wcs-effect-4~.datepicker-in-fullscreen-background,
.wcs-effect-4 .wcs_popup {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.wcs-show.wcs-effect-4 .wcs_popup {
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

/* Effect 5: fall */

.wcs-effect-5.whatsapp_chat_support {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.wcs-effect-5 .wcs_popup {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(600px) rotateX(20deg);
    -moz-transform: translateZ(600px) rotateX(20deg);
    -ms-transform: translateZ(600px) rotateX(20deg);
    transform: translateZ(600px) rotateX(20deg);
    opacity: 0;
}

.wcs-show.wcs-effect-5 .wcs_popup {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-transform: translateZ(0px) rotateX(0deg);
    -moz-transform: translateZ(0px) rotateX(0deg);
    -ms-transform: translateZ(0px) rotateX(0deg);
    transform: translateZ(0px) rotateX(0deg);
    opacity: 1;
}

/* Effect 6: side fall */

.wcs-effect-6.whatsapp_chat_support {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.wcs-effect-6 .wcs_popup {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
    -moz-transform: translate(30%) translateZ(600px) rotate(10deg);
    -ms-transform: translate(30%) translateZ(600px) rotate(10deg);
    transform: translate(30%) translateZ(600px) rotate(10deg);
    opacity: 0;
}

.wcs-show.wcs-effect-6 .wcs_popup {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-transform: translate(0%) translateZ(0) rotate(0deg);
    -moz-transform: translate(0%) translateZ(0) rotate(0deg);
    -ms-transform: translate(0%) translateZ(0) rotate(0deg);
    transform: translate(0%) translateZ(0) rotate(0deg);
    opacity: 1;
}

/* Effect 7:  3D Rotate from bottom */

.wcs-effect-7.whatsapp_chat_support {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.wcs-effect-7 .wcs_popup {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateY(100%) rotateX(90deg);
    -moz-transform: translateY(100%) rotateX(90deg);
    -ms-transform: translateY(100%) rotateX(90deg);
    transform: translateY(100%) rotateX(90deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    transform-origin: 0 100%;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.wcs-show.wcs-effect-7 .wcs_popup {
    -webkit-transform: translateY(0%) rotateX(0deg);
    -moz-transform: translateY(0%) rotateX(0deg);
    -ms-transform: translateY(0%) rotateX(0deg);
    transform: translateY(0%) rotateX(0deg);
    opacity: 1;
}

/* Effect 8:  3D Rotate in from left */

.wcs-effect-8.whatsapp_chat_support {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.wcs-effect-8 .wcs_popup {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    transform-origin: 0 100%;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.wcs-show.wcs-effect-8 .wcs_popup {
    -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
    -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
    -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
    transform: translateZ(0px) translateX(0%) rotateY(0deg);
    opacity: 1;
}

/* Effect 9: 3D flip horizontal */

.wcs-effect-9.whatsapp_chat_support {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.wcs-effect-9 .wcs_popup {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-70deg);
    -moz-transform: rotateY(-70deg);
    -ms-transform: rotateY(-70deg);
    transform: rotateY(-70deg);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
}

.wcs-show.wcs-effect-9 .wcs_popup {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
}

/* Effect 10: 3D flip vertical */

.wcs-effect-10.whatsapp_chat_support {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.wcs-effect-10 .wcs_popup {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-70deg);
    -moz-transform: rotateX(-70deg);
    -ms-transform: rotateX(-70deg);
    transform: rotateX(-70deg);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
}

.wcs-show.wcs-effect-10 .wcs_popup {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 1;
}

/* Effect 11: 3D sign */

.wcs-effect-11.whatsapp_chat_support {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.wcs-effect-11 .wcs_popup {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-60deg);
    -moz-transform: rotateX(-60deg);
    -ms-transform: rotateX(-60deg);
    transform: rotateX(-60deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.wcs-show.wcs-effect-11 .wcs_popup {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 1;
}

/* Effect 12: Super scaled */

.wcs-effect-12 .wcs_popup {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.wcs-show.wcs-effect-12 .wcs_popup {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

/* Effect 13: 3D split */

.wcs-effect-13.whatsapp_chat_support {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.wcs-effect-13 .wcs_popup {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-3000px) rotateY(90deg);
    -moz-transform: translateZ(-3000px) rotateY(90deg);
    -ms-transform: translateZ(-3000px) rotateY(90deg);
    transform: translateZ(-3000px) rotateY(90deg);
    opacity: 0;
}

.wcs-show.wcs-effect-13 .wcs_popup {
    -webkit-animation: slit 0.7s forwards ease-out;
    -moz-animation: slit 0.7s forwards ease-out;
    animation: slit 0.7s forwards ease-out;
}

@-webkit-keyframes slit {
    50% {
        -webkit-transform: translateZ(-250px) rotateY(89deg);
        opacity: 0.5;
        -webkit-animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translateZ(0) rotateY(0deg);
        opacity: 1;
    }
}

@-moz-keyframes slit {
    50% {
        -moz-transform: translateZ(-250px) rotateY(89deg);
        opacity: 0.5;
        -moz-animation-timing-function: ease-out;
    }

    100% {
        -moz-transform: translateZ(0) rotateY(0deg);
        opacity: 1;
    }
}

@keyframes slit {
    50% {
        transform: translateZ(-250px) rotateY(89deg);
        opacity: 1;
        animation-timing-function: ease-in;
    }

    100% {
        transform: translateZ(0) rotateY(0deg);
        opacity: 1;
    }
}

/* ====================================================================== *
        [G] DEBUG
 * ====================================================================== */

.wcs_debug {
    position: fixed;
    padding: 10px;
    background: white;
    border: 1px solid #dadada;
    top: 5px;
    right: 5px;
}

.wcs_debug strong {
    width: 125px;
    display: inline-block;
}