:root{
    --default-width: 360px;
    --default-heigth: 600px;
    --chatbot-call-width: 68px;
    --chatbot-bottom: 100px;
    --call-bottom: 0px;
}

.chatbot-div-iframe{
    width: var(--default-width);
    height: var(--default-heigth);
    position: fixed;
    transition: all .5s ease-in-out;
    bottom: var(--chatbot-bottom);
    -webkit-box-shadow: 3px 0px 9px 2px rgba(172, 172, 172, 0.65); 
    box-shadow: 3px 0px 9px 2px rgba(172, 172, 172, 0.65);
    z-index: 1100;
    background-color: #fff;
}

.chatbot-iframe{
    width: 100%;
    height: 100%;
    border: none;
    z-index: 1101;
}

.chatbot-div-iframe.initial-position.left{left: calc(var(--default-width)*-1);}
.chatbot-div-iframe.initial-position.right{right: calc(var(--default-width)*-1);}
.chatbot-div-iframe.presentation-position.left{left: 20px;}
.chatbot-div-iframe.presentation-position.right{right: 20px;}

.chatbot-call {
    border: none;
    cursor: pointer;
    width: var(--chatbot-call-width);
    height: 68px;
    background-color: #e9571c;
    border-radius: 50%;
    transition: all .5s ease-in-out;
    position: fixed;
    text-align: center;
    bottom: calc(var(--call-bottom) + 1em);
    z-index: 1000;
}
.chatbot-call.left{left: 1em !important;}
.chatbot-call.right{right: 1em !important;}

.chatbot-call .person-pic{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: 2x;
    z-index: 1001;
    transition: all .5s ease-in-out;
}

.position-setter{
    position: absolute;
    top: 0;
    right: 0;
}
.position-setter .menu-icon{
    position: absolute;
    top: 0;
    right: 0;
    padding: 23px;
    cursor: pointer;
}
.position-setter .menu-icon:after {
    content: '\2807';
    font-size: 35px;
    color:white;
}
.position-setter .menu{
    margin: 0;
    position: absolute;
    right: 10px;
    width: 150px;
    top: 68px;
    background: white;
    border: 1px solid #f3f3f3;
    border-radius: 0 0 8px 8px;
}
.position-setter ul.menu{
    list-style: none;
    padding: .3em .5em;
}
.position-setter ul.menu li{
    cursor: pointer;
    font-size: .8em;
    font-family: sans-serif;
}

.chatbot-msg{
    text-align: center;
    z-index: 900;
    position: fixed;
    transition: all .5s ease-in-out;
    box-shadow: 3px 0px 9px 2px rgb(172 172 172 / 65%);
    padding: 0.7em;
    font-family: sans-serif;
    width: 130px;
    border-radius: 16px;
    font-size: .8em;
    bottom: calc(var(--call-bottom) + 100px);
    background-color: #fff;
}

.chatbot-msg:after{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
    bottom: -8px;
}
.chatbot-msg.left::after{left: 13%;}
.chatbot-msg.right::after{right: 13%;}

#chatbot-msg-close{
    cursor: pointer;
    position: absolute;
    right: 5px;
    border-radius: 50%;
    background: #fff;
    width: 15px;
    color: #9d9d9d;
    line-height: 15px;
    top: 5px;
}

.chatbot-d-none{display: none;}
.chatbot-d-show{display: show;}

.chatbot-msg.initial-position.left{left: calc(var(--default-width)*-1);}
.chatbot-msg.initial-position.right{right: calc(var(--default-width)*-1);}
.chatbot-msg.presentation-position.left{left: 1em;}
.chatbot-msg.presentation-position.right{right: 1em;}


@media (max-width: 640px)
{
    .chatbot-div-iframe{height: 80%;}
    .chatbot-call {bottom: .5em !important;}
    .chatbot-call.left{left: .5em !important;}
    .chatbot-call.right{right: .5em !important;}
    .chatbot-call-opacity{height: 55px; width: 55px; background-color: #e9561c62}
    .chatbot-call-opacity .person-pic{margin-top: 3px; width: 49px; height: 49px; opacity: 0.8;}
    .chatbot-msg{bottom: 90px;}
    .chatbot-div-iframe{width: 97%;}
    .chatbot-div-iframe.chatbot-call-opacity-active{bottom: 70px; height:87%;}
    .chatbot-div-iframe.initial-position.left{left: calc(97% * -1);}
    .chatbot-div-iframe.initial-position.right{right: calc(97% * -1);}
    .chatbot-div-iframe.presentation-position.left{left: 5px;}
    .chatbot-div-iframe.presentation-position.right{right: 5px;}
}