/* ============== HTMLEDITOR ============== */
.htmleditor textarea { width:80%; display:block;}
/* ============== CHATBOT Button ============== */
.chatbot-button{
    background-color:#575756;
    border:0;height:62px;
    transition:all .25s ease-in;
    width:200px;z-index:1010;
    border-radius:5px 0 0 5px;
    color:#fff
}
.chatbot-button:hover{
    cursor:pointer;
    color:#fff;
    background-color:#404040
}
.chatbot-button:active,
.chatbot-button:focus{
    background-color:#575756
}
.chatbot-button:active
.chatbot-button__text,
.chatbot-button:focus
.chatbot-button__text{
    text-decoration:underline
}
.chatbot-button{
    position:fixed;
    bottom:10%;
    right:0%;
    transform:translateY(-50%)
}
/* ============== CHATBOT Text ============== */
.chatbot-button__text{
    color:inherit;
    text-transform:uppercase;
    font-weight:bold;
    font-size:1rem;
    text-align:left;
    text-transform:uppercase;
    position:absolute;
    right:40px;
    top:0px;
    height:100%;
    display:flex;
    align-items:center;
    line-height:1.25em}
/* ============== CHATBOT Anim ============== */
.chatbot-button__anim-container{
    width:100px;
    transition:.45s;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center
}
.chatbot-button__anim-container img{
    transition:.6s;
    position:absolute;
    top:5px;
    left:15px;
    max-width: 55px;
}
.chatbot-button__anim-container img
.chatbot-button__icon--closed{
    height:50px;
}
.chatbot-button__anim-container img
.chatbot-button__icon--opened{
    height:50px;
    opacity:1;
}
.chatbot-button__anim-container.morphed
.chatbot-button__icon--opened{
    opacity:1;
    visibility: hidden;
}
.chatbot-button__anim-container.morphed
.chatbot-button__icon--closed{
    opacity:1;

}
/* ============== CHATBOT Container-Wrapper ============== */
.chatbot-container-wrapper{
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:0.3s;
    z-index:1020
}
.chatbot-container-wrapper.fadeout{
    background:rgba(0,0,0,0.0);
    opacity:0;
    visibility:hidden
}
.chatbot-container-wrapper.fadein{
    background:rgba(0,0,0,0.6);
    opacity:1;
    visibility:visible
}

/* ============== CHATBOT Container ============== */
.chatbot-container{
    background-color:#fff;
    border:0px solid rgba(0,0,0,0.2);
    box-shadow:0 0.25rem 0.3rem rgba(0,0,0,0.3);
    height:calc(100% - 40px);
    width:100%;
    max-width:1200px;
    z-index:1020;
    border-radius:.3rem;
    margin:20px;
    transition:0.4s
}
.chatbot-container.show{
    opacity:1;
    display:block;
    z-index:1020;
    visibility:visible;
    position:relative;
    transform:translateY(0)
}
.chatbot-container.hide{
    opacity:0;
    display:none;
    transition:.2s;
    visibility:hidden;
    transform:translateY(-10%)
}
/* ============== CHATBOT iframe ============== */
.chatbot-container-wrapper iframe{
    overflow:hidden;
    border:0px;
    min-height:100%;
    min-width:100%;
    width:100%;
    height:100%
}
/* ============== CHATBOT CLOSE ============== */
.chatbot-container__close{
    position:absolute;
    top:0px;
    right:0px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    border-top-right-radius:calc(.3rem - 2px)
}
.chatbot-container__close button{
    color:#e3001b;
    background:none;
    border:0;
    padding:10px 20px;
    min-height:70px;
    border-top-right-radius:calc(.3rem - 2px);
    transition:all 0.2s ease-in
}
.chatbot-container__close span{
    background:none;
    border:0;
    color:#fff;
    font-size:2.4rem;
    font-weight:700
}
.chatbot-container__close button:focus,
.chatbot-container__close button:hover{
    background:#575756;
    cursor:pointer
}
.chatbot-container__close button:focus span,
.chatbot-container__close button:hover span{
    color:#fff
}
.chatbot-container__close:focus span,
.chatbot-container__close:hover span{
    color:#fff
}

/* ============== CHATBOT RESPONSIVE ============== */
@media only screen and (max-width:540px){
    .chatbot-container{
        margin:0;
        height:100%;
        border-radius:0;
        box-shadow:none
    }
}@media only screen and (min-height:860px){
    .chatbot-container{
        max-height:80%
    }
}