/*
|--------------------------------------------------------------------------
| WP Live Chat
|--------------------------------------------------------------------------
*/

#wplc-button{

    position:fixed;

    bottom:25px;

    right:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#0d6efd;

    color:#fff;

    font-size:30px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    box-shadow:0 8px 25px rgba(0,0,0,.25);

    z-index:999999;

    transition:.3s;

}

#wplc-button:hover{

    transform:scale(1.1);

}

.wplc-left{

    left:25px !important;

    right:auto !important;

}

.wplc-right{

    right:25px !important;

    left:auto !important;

}

/*
|--------------------------------------------------------------------------
| Chat Box
|--------------------------------------------------------------------------
*/

#wplc-chatbox{

    position:fixed;

    bottom:100px;

    right:25px;

    width:360px;

    height:520px;

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

    display:none;

    flex-direction:column;

    z-index:999998;

}

#wplc-chatbox.show{

    display:flex;

}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.wplc-header{

    background:#0d6efd;

    color:#fff;

    height:60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px;

    font-size:18px;

    font-weight:bold;

}

#wplc-close{

    cursor:pointer;

    font-size:22px;

}

#wplc-close:hover{

    opacity:.7;

}

/*
|--------------------------------------------------------------------------
| Body
|--------------------------------------------------------------------------
*/

#wplc-body{

    flex:1;

    overflow-y:auto;

    padding:15px;

    background:#f5f7fb;

}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.wplc-footer{

    display:flex;

    padding:10px;

    border-top:1px solid #ddd;

    background:#fff;

}

#wplc-message{

    flex:1;

    border:1px solid #ddd;

    border-radius:30px;

    padding:10px 15px;

    outline:none;

    font-size:14px;

}

#wplc-send{

    width:50px;

    margin-left:10px;

    border:none;

    border-radius:50%;

    background:#0d6efd;

    color:#fff;

    cursor:pointer;

    font-size:18px;

}

#wplc-send:hover{

    background:#0b5ed7;

}

/*
|--------------------------------------------------------------------------
| Message Bubble
|--------------------------------------------------------------------------
*/

.wplc-me{

    background:#0d6efd;

    color:#fff;

    padding:10px 14px;

    border-radius:18px 18px 5px 18px;

    margin-bottom:10px;

    margin-left:50px;

    word-break:break-word;

}

.wplc-agent{

    background:#fff;

    color:#333;

    padding:10px 14px;

    border-radius:18px 18px 18px 5px;

    margin-bottom:10px;

    margin-right:50px;

    border:1px solid #ddd;

    word-break:break-word;

}

.wplc-system{

    text-align:center;

    color:#666;

    background:#eef3ff;

    border-radius:10px;

    padding:10px;

    margin-bottom:15px;

    font-size:13px;

}

/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/

#wplc-body::-webkit-scrollbar{

    width:6px;

}

#wplc-body::-webkit-scrollbar-thumb{

    background:#c7c7c7;

    border-radius:20px;

}

/*
|--------------------------------------------------------------------------
| Animation
|--------------------------------------------------------------------------
*/

@keyframes wplcFade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

#wplc-chatbox.show{

    animation:wplcFade .3s;

}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media(max-width:480px){

    #wplc-chatbox{

        width:100%;

        height:100%;

        right:0;

        left:0;

        bottom:0;

        border-radius:0;

    }

    #wplc-button{

        right:20px;

        bottom:20px;

    }

}