:root
{
    /* General */
    --ts-chat-font-family: "Roboto";

    /* Chat Bubble */
    --ts-chat-bubble-background-color: #474747;
    --ts-chat-bubble-size: 60px;

    /* Chat Top */
    --ts-chat-top-background-color: #FFF;

    /* Chat Main Content*/
    --ts-chat-main-background-color: #FFF;

    --ts-chat-top-font-color: #474747;

    /* Agent/Bot Profile */
    --ts-chat-top-agent-or-bot-profile-fill: #c4c4c4;
    --ts-chat-agent-profile-circle-background-color: #FFFFFF;
    --ts-chat-agent-profile-circle-border-color: #c4c4c4;


    --ts-chat-top-control-button-colors: #474747;
    --ts-chat-border-input-color: #grey;
    --ts-chat-contact-open-chat-background-color: #5C5C5C;
    --ts-chat-contact-open-chat-text-color: #FFF;

    /*Contact Form*/
    --ts-chat-contact-input-width: 60%;
    --ts-chat-contact-input-border-color: #A0A0A0;
    --ts-chat-contact-input-text-color: #333333;
    --ts-chat-contact-input-background-color: #FFF;
    --ts-chat-contact-open-conversation-button: #5C5C5C;
    --ts-chat-contact-policy-color: #5c5c5c;
    --ts-chat-contact-send-email-color: #5c5c5c;
    --ts-chat-contact-size-logo: 80%;
    --ts-chat-contact-sizeY-logo: initial;

    /* *** */
    /* FAQ */
    /* *** */
    --ts-chat-contact-faq-bubble: #474747;
    --ts-chat-faq-bubble-hover-fill-color: #474747;

    --ts-chat-faq-card-background-color: #f0f0f0;
    --ts-chat-faq-card-color: #515151;

    --ts-chat-faq-inner-content-background-color: #FFF;
    --ts-chat-faq-inner-content-text-color: #515151;

    /* ************ */
    /* Conversation */
    /* ************ */

    --ts-chat-conversation-background-color: #FFF;
    --ts-chat-conversation-actions-background: #FFFFFF;
    --ts-chat-conversation-client-message-background: #707070;
    --ts-chat-conversation-client-message-text-color: #fff;
    --ts-chat-conversation-agent-message-background: #4266a5;
    --ts-chat-conversation-agent-message-text-color: #fff;
    --ts-chat-conversation-textarea-placehodler-color: #757575;
    --ts-chat-conversation-textarea-text-color: #474747;
    --ts-chat-conversation-buttons-send-attach-fill-color: #474747;
    --ts-chat-speaker-color: #FFFFFF;
    --ts-chat-conversation-scrollbar-color: #cccccc;
    --ts-chat-font-size: 12px;
    --ts-chat-margin-conversation: 15px;
    --ts-chat-width-conversation: 55%;
    --ts-chat-shadow: rgba(0,0,0, 0.25);

    /*Close Conversation Popup*/
    --ts-chat-close-conversation-buttons-background: #DADADA;
    --ts-chat-close-conversation-buttons-color: #333333;

    /* Suggestions */
    --ts-chat-bot-message-indicator: #4266a5;
    --ts-chat-suggestions-background-color: #ffffff;
    --ts-chat-suggestions-text-color: #4266a5;
    --ts-chat-suggestions-border-color: #4266a5;
    --ts-chat-suggestions-selected-color: #4266a5;
    --ts-chat-suggestions-selected-text: ffffff;
    --ts-chat-suggestions-info-color: #4266a5;
    --ts-chat-survey-bot-icon-color: #1a273e;
    --ts-chat-suggestions-shadow: rgba(0,0,0, 0.25);
    --ts-chat-suggestions-border-style: solid;
    --ts-chat-suggestions-align: none;
    --ts-chat-suggestions-display: inline;
    --ts-chat-suggestions-text-align: center;

    /* Survey*/
    --ts-chat-survey-main-background-color: #eeeeee;
    --ts-chat-survey-title: #4266A5;
    --ts-chat-survey-questions-font-color: #474747;
    --ts-chat-survey-answer-font-color: #474747;
    --ts-chat-survey-answer-background-color: #FFF;

    --ts-chat-survey-answer-input-buttons-display: inline-block;
    --ts-chat-survey-answer-input-buttons-background: #d5d7d9;
    --ts-chat-survey-answer-input-buttons-text-color: #1378b9;

    --ts-chat-survey-smiles-color: #4b7ba3;
}

/*html, body
{
    font-family: var(--ts-chat-font-family);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #E5E5E5;
}*/

@keyframes tsFadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.ts-fade-in{
    animation: tsFadeIn .2s forwards 0s linear;
}

@keyframes tsFadeOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.ts-fade-out{
    animation: tsFadeOut .2s forwards 0s linear;
}

.chat-logo{
    width: var(--ts-chat-contact-size-logo);
    height: var(--ts-chat-contact-sizeY-logo);
}


chat-tecsible-main p, chat-tecsible-main span
{
    font-family: var(--ts-chat-font-family);
}

chat-tecsible-main .tecsible-chat-main
{
    position: fixed;
    font-family: var(--ts-chat-font-family);
    z-index: 99998;
    line-height: 18px;
    right: 15px;
    bottom: 15px;
    width: 350px;
    height: 600px;
    background: var(--ts-chat-main-background-color);
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

chat-tecsible-main .tecsible-chat-top
{
    width: 100%;
    height: 9%;
    right: 0px;
    top: 0px;
    background: var(--ts-chat-top-background-color);
    border-bottom: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 6px 6px 0px 0px;
}

chat-tecsible-main .tecsible-chat-agent-info-status
{
    float: left;
    display: inline-block;
    width: 100%;
    height: 100%;
}

chat-controls .tecsible-chat-left-controls
{
    justify-content: flex-end;
    box-sizing: content-box !important;
    float: right;
    display: flex;
    width: 100%;
    height: 100%;
}

chat-controls .tecsible-chat-close-wrapper
{
    float: right;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 40%;
}

chat-controls .tecsible-chat-mute-wrapper
{
    display: flex;
    height: 100%;
    align-items: center;
    padding: 0pc 10px;
    margin-left: auto;
    opacity: 0.3;
    cursor: default;
}

chat-controls .tecsible-chat-menu-wrapper
{
    float: right;
    position: relative;
    display: inline-block;
    text-align: center;
    height: 100%;
    width: 5%;
}

chat-controls #menu-button
{
    float: right;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 15px;
    height: 18px;
    cursor: pointer;
    fill: var(--ts-chat-top-control-button-colors);
}

chat-controls #close-button
{
    box-sizing: content-box !important;
    float: right;
    position: absolute;
    width: 20px;
    height: 20px;
    padding: 4px;
    background: none;
    border-radius: 100%;
    stroke: var(--ts-chat-top-control-button-colors);
    cursor: pointer;
    transition: .3s;
}

chat-controls #close-button:hover
{
    background: rgba(0,0,0,0.6);
    border-radius: 100%;
    stroke: #FFF;
}

chat-controls #back-button-to-channels
{
    float: right;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    right: 75%;
    width: 20px;
    height: 20px;
    stroke: var(--ts-chat-top-control-button-colors);
    cursor: pointer;
}

chat-controls #back-button-to-channels line
{
    stroke: var(--ts-chat-top-control-button-colors);
}

.tecsible-chat-agent-profile
{
    position: relative;
    height: 100%;
    float: left;
    width: 25%;
    padding: 0 0 0 5%;
    display: inline-block;
    box-sizing: content-box;
}

.tecsible-chat-agent-profile #tecsible-agent-img circle {
    fill: var(--ts-chat-agent-profile-circle-background-color);
    stroke: var(--ts-chat-agent-profile-circle-border-color);
}

#tecsible-agent-img
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.tecsible-chat-agent-info-status #tecsible-agent-img #chat-tecsible-top-agent-profile
{
    fill: var(--ts-chat-top-agent-or-bot-profile-fill);
}

.tecsible-chat-agent-info-status #tecsible-agent-img  #chat-tecsible-top-agent-profile.chat-bot
{
    transform: translate(5px, 5px);
    fill: var(--ts-chat-top-agent-or-bot-profile-fill);
}

.tecsible-chat-content
{
    height: 91%;
    width: 100%;
    border-radius: 0 0 5px 5px;
}

.tecsible-chat-agent-info {
    display: inline-block;
    width: 70%;
    height: 100%;
    float: left;
    position: relative;
}

.tecsible-chat-agent-info p
{
    margin: 0;
    padding: 0;
}

.tecsible-chat-agent-info p.tecsible-agent-name
{
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    color: var(--ts-chat-top-font-color);
    top: 20%;
    user-select: none;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: normal;
    box-sizing: content-box;
}

.tecsible-chat-agent-info p.tecsible-agent-status
{
    position: absolute;
    font-size: 12px;
    font-style: italic;
    color: var(--ts-chat-top-font-color);
    top: 55%;
    user-select: none;
    line-height: normal;
    box-sizing: content-box;
}

.tecsible-chat-agent-info .tecsible-agent-wrapper
{
    height: 100%;
}

div.tecsible-chat-main chat-agent-info
{
    height: 100%;
    width: 60%;
    float: left;
    box-sizing: border-box;
}

div.tecsible-chat-main chat-controls
{
    height: 100%;
    width: 40%;
    float: right;
    box-sizing: border-box;
}

/******************/

div.tecsible-chat-main chat-info-contact
{
    height: 100%;
    width: 60%;
    float: left;
    box-sizing: border-box;
}

.tecsible-chat-info-contact
{
    position: relative;
    float: left;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.tecsible-chat-info-contact p.tecsible-info-contact-title
{
    font-family: var(--ts-chat-font-family);
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: var(--ts-chat-top-font-color);
    font-weight: bold;
    position: absolute;
    padding: 0 0 0 15%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

div.tecsible-chat-main chat-loading
{
    animation: .2s fsFadeIn;
}

div.tecsible-chat-main chat-content
{
    display: block;
    height: 100%;
    width: 100%;
}

div.tecsible-chat-main chat-contact-form
{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
}

#chat-contact-form-logo {
    margin-top: 12px;
    height: 10%;
}
/********* Loading CSS *********/
/********* Loading CSS *********/
/********* Loading CSS *********/

.cube-folding {
    width: 50px;
    height: 50px;
    display: inline-block;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    font-size: 0;
}
.cube-folding span {
    position: relative;
    width: 25px;
    height: 25px;
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    display: inline-block;
}
.cube-folding span::before {
    content: '';
    background-color: var(--ts-chat-contact-policy-color);
    position: absolute;
    left: 15px;
    top: 15px;
    display: block;
    width: 9px;
    height: 9px;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -moz-animation: folding 2.5s infinite linear both;
    -webkit-animation: folding 2.5s infinite linear both;
    animation: folding 2.5s infinite linear both;
}
.cube-folding .leaf2 {
    -moz-transform: rotateZ(90deg) scale(1.1);
    -ms-transform: rotateZ(90deg) scale(1.1);
    -webkit-transform: rotateZ(90deg) scale(1.1);
    transform: rotateZ(90deg) scale(1.1);
}
.cube-folding .leaf2::before {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    background-color: var(--ts-chat-contact-policy-color);
}
.cube-folding .leaf3 {
    -moz-transform: rotateZ(270deg) scale(1.1);
    -ms-transform: rotateZ(270deg) scale(1.1);
    -webkit-transform: rotateZ(270deg) scale(1.1);
    transform: rotateZ(270deg) scale(1.1);
}
.cube-folding .leaf3::before {
    -moz-animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    background-color: var(--ts-chat-contact-policy-color);
}
.cube-folding .leaf4 {
    -moz-transform: rotateZ(180deg) scale(1.1);
    -ms-transform: rotateZ(180deg) scale(1.1);
    -webkit-transform: rotateZ(180deg) scale(1.1);
    transform: rotateZ(180deg) scale(1.1);
}
.cube-folding .leaf4::before {
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
    background-color: var(--ts-chat-contact-policy-color);
}

@-moz-keyframes folding {
    0%, 10% {
        -moz-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    25%, 75% {
        -moz-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    90%, 100% {
        -moz-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}
@-webkit-keyframes folding {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}
@keyframes folding {
    0%, 10% {
        -moz-transform: perspective(140px) rotateX(-180deg);
        -ms-transform: perspective(140px) rotateX(-180deg);
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    25%, 75% {
        -moz-transform: perspective(140px) rotateX(0deg);
        -ms-transform: perspective(140px) rotateX(0deg);
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    90%, 100% {
        -moz-transform: perspective(140px) rotateY(180deg);
        -ms-transform: perspective(140px) rotateY(180deg);
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}
.cube-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    text-align: center;
}

.cube-wrapper .loading {
    font-size: 12px;
    letter-spacing: 0.1em;
    display: block;
    color: white;
    position: relative;
    top: 25px;
    z-index: 2;
    -moz-animation: text 0.5s ease infinite alternate;
    -webkit-animation: text 0.5s ease infinite alternate;
    animation: text 0.5s ease infinite alternate;
}

@-moz-keyframes text {
    100% {
        top: 35px;
    }
}
@-webkit-keyframes text {
    100% {
        top: 35px;
    }
}
@keyframes text {
    100% {
        top: 35px;
    }
}
@-moz-keyframes shadow {
    100% {
        bottom: -18px;
        width: 100px;
    }
}
@-webkit-keyframes shadow {
    100% {
        bottom: -18px;
        width: 100px;
    }
}
@keyframes shadow {
    100% {
        bottom: -18px;
        width: 100px;
    }
}

.datepicker-input {
    cursor: pointer;
    text-align: center;
}

chat-contact-form #chat-tecsible-contact-form
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#chat-tecsible-form-contact
{
    padding-right: 2rem;
}

chat-contact-form #chat-tecsible-contact-form input[type=text],
chat-contact-form #chat-tecsible-contact-form input[type=date],
chat-contact-form #chat-tecsible-contact-form input[type=email],
chat-contact-form #chat-tecsible-contact-form select
{
    display: block;
    width: 100%;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:border-box;
    background: var(--ts-chat-contact-input-background-color);
    border: 2px solid var(--ts-chat-contact-input-border-color);
    border-radius: 15px;
    padding: 5px 10px;
    margin: 5px 0;
    outline: none;
    transition: all .3s linear;
    color: var(--ts-chat-contact-input-text-color);
    font-size: 14px;
    line-height: normal;
    height: 33px;
}

chat-contact-form #chat-tecsible-contact-form input[type=text]::placeholder,
chat-contact-form #chat-tecsible-contact-form input[type=email]::placeholder,
chat-contact-form #chat-tecsible-contact-form select::placeholder
{
    filter: opacity(0.5);
    color: var(--ts-chat-contact-input-text-color);
}

chat-contact-form #chat-tecsible-contact-form select option:disabled
{
    color: #474747;
    font-weight: bold;
}

chat-contact-form #chat-tecsible-contact-form select:has(option.titleoption:disabled)
{
    color: red;
}

chat-contact-form #chat-tecsible-contact-form input[type=text]:focus,
chat-contact-form #chat-tecsible-contact-form input[type=email]:focus,
chat-contact-form #chat-tecsible-contact-form select:focus
{
    border-color: var(--ts-chat-contact-input-text-color);;
}

chat-contact-form #chat-tecsible-contact-form input:-internal-autofill-selected {
    background-color: none !important;
    background-image: none !important;
    color: #333333; !important;
}

chat-contact-form #chat-tecsible-contact-form textarea
{
    width: 100%;
    box-sizing: border-box;
    padding: 3px;
    margin: 10px 0;
    resize: none;
}

chat-contact-form #chat-tecsible-open-chat
{
    font-family: var(--ts-chat-font-family);
    font-weight: bold;
    background: var(--ts-chat-contact-open-chat-background-color);
    background-color: var(--ts-chat-contact-open-chat-background-color);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    -webkit-appearance: none;
    border: none;
    color: var(--ts-chat-contact-open-chat-text-color);
    width: 100%;
    height: 30px;
    outline: none;
    cursor: pointer;
    margin: 15px 0 0 0;
}

chat-contact-form .chat-tecsible-faq
{
    position: absolute;
    display: inline-block;
    bottom: 32px;
    left: 18px;
    fill: #474747;
    outline: none;
    cursor: pointer;
    padding: 10px;
}

chat-contact-form .chat-tecsible-faq svg
{
    fill: var(--ts-chat-contact-faq-bubble);
    transition: fill .3s;
}

chat-contact-form .chat-tecsible-faq svg:hover
{
    fill: var(--ts-chat-faq-bubble-hover-fill-color);
}

chat-contact-form #chat-tecsible-contact-send-email
{
    padding: 10px 10px 0 10px;
    font-weight: bold;
    font-size: 20px;
    margin: 0;
    cursor: pointer;
    color: #717171;
    line-height: normal;
    display: block;
}

chat-contact-form #chat-tecsible-contact-send-email input[type=checkbox]
{
    transform: translateY(3px) scale(.9);
}

chat-contact-form #chat-tecsible-contact-send-email span
{
    font-size: 12px;
    font-weight: bold;
    color: var(--ts-chat-contact-send-email-color);
    cursor: pointer;
}

chat-contact-form a#chat-tecsible-data-policy,
chat-conversation a#chat-tecsible-data-policy
{
    display: inline;
    font-size: 12px;
    padding: 6px;
    font-weight: bold;
    color: var(--ts-chat-contact-policy-color);
    text-decoration: underline;
    background: transparent;
    outline: none;
}

chat-contact-form #chat-tecsible-top-template-schedule
{
    margin: 0;
    padding: 5px 0;
    box-sizing: border-box;
    line-height: normal;
    width: 100%;
    display: block;
}

chat-contact-form #chat-tecsible-top-template-schedule p.chat-tecsible-contact-schedule
{
    padding: 0;
    margin: 0;
    line-height: normal;
    font-size: 14px !important;
    color: var(--ts-chat-contact-policy-color);
}

chat-conversation
{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

chat-conversation .chat-tecsible-messages-pool
{
    display: block;
    width: 100%;
    height: 85%;
    box-sizing: border-box;
    padding: 10px 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--ts-chat-conversation-background-color);
}

chat-conversation .chat-tecsible-messages-pool::-webkit-scrollbar
{
    width: 6px !important;
    height: 6px !important;
}

chat-conversation .chat-tecsible-messages-pool::-webkit-scrollbar-thumb
{
    background-color: var(--ts-chat-conversation-scrollbar-color);
}

chat-conversation .chat-tecsible-messages-pool::-webkit-scrollbar-track
{
    background: rgba(255,255,255,0.1);
}

chat-contact-form .chat-tecsible-form-contact-div::-webkit-scrollbar
{
    width: 6px !important;
    height: 6px !important;
}

chat-contact-form .chat-tecsible-form-contact-div::-webkit-scrollbar-thumb
{
    background-color: var(--ts-chat-conversation-scrollbar-color);
}

chat-contact-form .chat-tecsible-form-contact-div::-webkit-scrollbar-track
{
    background: rgba(255,255,255,0.1);
}

chat-conversation .chat-tecsible-messages-actions
{
    display: flex;
    border-radius: 0 0 5px 5px;
    border-top: 1px solid #C4C4C4;
    background: var(--ts-chat-conversation-actions-background);
    width: 100%;
    height: 82px;
}

chat-conversation .chat-tecsible-advise-conversation-container
{
    width: 80%;
    height: auto;
    background: white;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    border-radius: 13px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

chat-conversation .chat-tecsible-advise-conversation-advise
{
    box-sizing: border-box;
    padding: 20px 0;
}

chat-conversation .chat-tecsible-advise-conversation-advise > p
{
    font-family: var(--ts-chat-font-family);
    margin: 0;
    padding: 0 10px;
    text-align: center;
    font-weight: 500;
    color: #333333;
}

chat-conversation p.chat-tecsible-poweredby
{
    font-family: var(--ts-chat-font-family);
    position: absolute;
    font-size: 10px;
    font-style: italic;
    font-weight: normal;
    color: var(--ts-chat-conversation-buttons-send-attach-fill-color);
    margin: 0;
    padding: 0;
    bottom: 5px;
    right: 15px;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

chat-conversation svg#chat-tecsible-send-message {
    width: 36px;
    height: 70%;
    cursor: pointer;
    padding-right: 10px;
    margin-right: auto;
}

chat-conversation svg#chat-tecsible-send-attachment {
    width: 32px;
    height: 70%;
    cursor: pointer;
    padding-right: 10px;
    margin-right: auto;
}

chat-conversation svg#chat-tecsible-speech-to-text {
    width: 29px;
    height: 70%;
    cursor: pointer;
    padding-right: 11px;
    margin-right: auto;
}

.record {
    animation-name: recording;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.stop-record {
    animation-name: stop-recording;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes recording {
    0% {
        fill: var(--ts-chat-conversation-buttons-send-attach-fill-color)
    }
    100% {
        fill: red;
    }
}

@keyframes stop-recording {
    0% {
        fill: red;
    }
    100% {
        fill: var(--ts-chat-conversation-buttons-send-attach-fill-color)
    }
}

.blocked-record {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.available-record {
    opacity: 1;
    cursor: pointer;
    pointer-events: all;
}

chat-conversation svg#chat-tecsible-text-to-speech {
    height: 1.5rem;
}

chat-conversation svg.chat-tecsible-disable-actions {
    pointer-events: none;
    opacity: .2;
}

chat-conversation svg#chat-tecsible-send-attachment > path, chat-conversation svg#chat-tecsible-send-message > path, chat-conversation svg#chat-tecsible-speech-to-text > path {
    fill: var(--ts-chat-conversation-buttons-send-attach-fill-color);
}

chat-conversation svg#chat-tecsible-text-to-speech > path {
    fill: var(--ts-chat-speaker-color);
}

svg#chat-tecsible-cancel-speech > path{
    fill: var(--ts-chat-top-control-button-colors);
}

chat-conversation .chat-tecsible-messagebox-wrapper
{
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}

chat-conversation textarea#chat-tecsible-messagebox
{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    outline: none;
    border: none;
    resize: none;
    background: none;
    color: var(--ts-chat-conversation-textarea-text-color);
}

chat-conversation textarea#chat-tecsible-messagebox::placeholder
{
    color: var(--ts-chat-conversation-textarea-text-color);
    filter: opacity(0.65);
}

chat-conversation textarea#chat-tecsible-messagebox::-webkit-scrollbar {
    width: 0;
    display: none;
}

.chat-client-message
{
    text-align: right;
}

chat-conversation div.chat-message-text
{
    font-family: var(--ts-chat-font-family);
    position: relative;
    display: inline-block;
    color: white;
    margin: 5px var(--ts-chat-margin-conversation);
    padding: 13px 40px 13px 15px;
    font-size: var(--ts-chat-font-size);
    text-align: left;
    max-width: var(--ts-chat-width-conversation);
    line-height: 18px;
    font-weight: 500;
}

chat-conversation div.chat-message-text span.chat-message-date
{
    position: absolute;
    right: 2px;
    bottom: 0;
    font-size: 10px;
}

chat-conversation .chat-agent-message div.chat-message-text
{
    border-radius: 12px 12px 12px 0;
    background: var(--ts-chat-conversation-agent-message-background);
    color: var(--ts-chat-conversation-agent-message-text-color);
    box-shadow: 0 2px 1px var(--ts-chat-shadow);
    text-overflow: ellipsis;
    overflow-wrap: break-word;
}

chat-conversation .chat-agent-message div.chat-message-text span.chat-message-date
{
    color: var(--ts-chat-conversation-agent-message-text-color);
    padding: 0 8px 2px 0;
}

.speaker {
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 10px 0 0;
    cursor: pointer;
}

chat-conversation .chat-agent-message div.chat-message-text:hover > .speaker {
    visibility: visible;
}

chat-conversation .chat-client-message div.chat-message-text
{
    border-radius: 12px 12px 0 12px;
    background: var(--ts-chat-conversation-client-message-background);
    color: var(--ts-chat-conversation-client-message-text-color);
    box-shadow: 0 2px 1px var(--ts-chat-shadow);
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
}

chat-conversation .chat-client-message div.chat-message-text span.chat-message-date
{
    color: var(--ts-chat-conversation-client-message-text-color);
    padding: 0 8px 2px 0;
}

chat-conversation .chat-client-message div.chat-message-text:hover > .speaker {
    visibility: visible;
}

chat-conversation svg.tecsible-chat-attachment-icon
{
    margin: 0 10px 0 0;
    display: inline-block;
    font-size: inherit;
    height: 1.2em;
    overflow: visible;
    vertical-align: -0.125em;
    pointer-events: none;
}

chat-conversation span.tecsible-chat-attachment-icon-wrapp
{
    cursor: pointer;
}

chat-conversation .chat-message-wrapper-closed-chat
{
    line-height: normal;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    color: grey;
    padding: 0 45px;
}

chat-conversation .chat-message-wrapper-closed-chat .chat-message-text-closed-chat
{
    line-height: normal;
    margin: 10px 0;
    padding: 0;
    font-size: 16px;
    color: #333;
}

chat-conversation .chat-tecsible-suggestion-wrapper-items
{
    padding: 0 5px;
    margin: 0.5em;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    transition: all .5s;
    float: var(--ts-chat-suggestions-align) !important;
}

chat-conversation .chat-tecsible-suggestion-wrapper-items.ts-fadeout
{
    opacity: 0;
}

chat-conversation input.chat-tecsible-suggestion-item
{
    margin: 5px;
    border-radius: 20px;
    background: var(--ts-chat-suggestions-background-color);
    box-shadow: 0 3px 6px var(--ts-chat-suggestions-shadow);
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ts-chat-suggestions-text-color);
    border: 2px var(--ts-chat-suggestions-border-style) var(--ts-chat-suggestions-border-color);
    padding: 7px 15px;
    white-space: pre-line;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s;
    outline: none;
    display: var(--ts-chat-suggestions-display) !important;
    text-align: var(--ts-chat-suggestions-text-align);
}

chat-conversation input.chat-tecsible-suggestion-item:hover
{
    background: var(--ts-chat-suggestions-selected-color);
    color: var(--ts-chat-suggestions-selected-text);
    transform: scale(1.1);
}

chat-conversation .chat-tecsible-suggestion-info-icon
{
    width: 25px;
    height: 25px;
    display: block;
    margin: 0px 20px;
}

chat-conversation .chat-tecsible-suggestion-info-icon > path
{
    fill: var(--ts-chat-suggestions-info-color);
}

chat-conversation #chat-tecsible-conversation-policy-wrapper
{
    position: absolute;
    bottom: 6em;
    width: max-content;
    max-width: 80%;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    background: var(--ts-chat-main-background-color);
}

chat-bubble #tecsible-chat-bubble {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    width: var(--ts-chat-bubble-size);
    height: var(--ts-chat-bubble-size);
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--ts-chat-bubble-background-color);
    -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
    z-index: 1001;
    cursor: pointer;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
}

chat-bubble #tecsible-chat-bubble:hover
{
    transform: scale(0.95);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

chat-bubble #tecsible-chat-bubble-icon {
    align-self: center;
    color: white;
    cursor: pointer;
    width: 35px;
    height: auto;
    text-shadow: 3px 3px 20px black;
    background: transparent;
    border: 0;
}

chat-close-conversation
{
    z-index: 1000;
    width: 100%;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    background: #00000010;
    border-radius: 5px;
}

chat-conversation .chat-tecsible-close-conversation-container
{
    width: 80%;
    height: auto;
    background: white;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    border-radius: 13px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}

chat-conversation .chat-tecsible-close-conversation-advise
{
    box-sizing: border-box;
    padding: 20px 0;
}

chat-conversation .chat-tecsible-close-conversation-advise > p
{
    font-family: var(--ts-chat-font-family);
    margin: 0;
    padding: 0 10px;
    text-align: center;
    font-weight: 500;
    color: #333333;
}

chat-conversation input.chat-tecsible-close-buttons
{
    font-family: var(--ts-chat-font-family);
    background: var(--ts-chat-close-conversation-buttons-background);
    color: var(--ts-chat-close-conversation-buttons-color);
    border-radius: 15px;
    border: none;
    margin: 0 5px 15px 5px;
    padding: 5px 25px;
    font-size: 16px;
    outline: none;
    line-height: normal;
    cursor: pointer;
    transition: all .2s;
}

chat-conversation input.chat-tecsible-close-buttons:hover
{
    background: var(--ts-chat-close-conversation-buttons-color);
    color: var(--ts-chat-close-conversation-buttons-background);
}

chat-channels
{
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
}

chat-channels .chat-tecsible-channels-content
{
    left: 50%;
    width: 60%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
}

chat-channels #chat-tecsible-select-channel
{
    display: block;
    width: 100%;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: border-box;
    border: 2px solid var(--ts-chat-contact-input-border-color);
    border-radius: 15px;
    padding: 5px 10px;
    margin: 5px 0;
    outline: none;
    transition: all .3s linear;
    background: none;
    color: #333333;
    font-size: 14px;
    line-height: normal;
    height: 33px;
}

chat-channels #chat-tecsible-button-channel
{
    width: 100%;
    display: block;
    margin: 20px 0;
    font-family: var(--ts-chat-font-family);
    font-weight: bold;
    background: var(--ts-chat-contact-open-conversation-button);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    -webkit-appearance: none;
    border: none;
    color: white;
    width: 100%;
    height: 30px;
    outline: none;
    cursor: pointer;
    margin: 18px 0;
}

chat-error
{
    display: block;
    width: 100%;
    height: 100%;
}

chat-error .chat-tecsible-errors-container
{
    transform: translateY(-50%) translateX(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    text-align: center;
}

chat-error p.chat-tecsible-error-message
{
    font-weight: 300;
    margin: 0;
    padding: 0;
    line-height: normal;
    color: #333;
    font-style: normal;
    font-size: 18px;
}

chat-error input.chat-tecsible-retry-button
{
    width: 100%;
    display: block;
    font-family: var(--ts-chat-font-family);
    font-weight: bold;
    background: var(--ts-chat-contact-open-conversation-button);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    -webkit-appearance: none;
    border: none;
    color: white;
    height: auto;
    outline: none;
    cursor: pointer;
    margin: 18px 0;
    padding: 5px;
    transition: .25s;
}

chat-error input.chat-tecsible-retry-button:hover {
    box-shadow: none;
    filter: brightness(.75);
}

chat-faq
{
    display: block;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

chat-faq::-webkit-scrollbar
{
    width: 6px !important;
    height: 6px !important;
}

chat-faq::-webkit-scrollbar-thumb
{
    background-color: var(--ts-chat-conversation-scrollbar-color);
}

chat-faq::-webkit-scrollbar-track
{
    background: rgba(255,255,255,0.1);
}

chat-faq .wrap-collabsible {
    margin-bottom: 1.2rem 0;
}

chat-faq input[type='checkbox'] {
    display: none;
}

chat-faq .lbl-toggle {
    display: block;
    font-weight: normal;
    font-family: var(--ts-chat-font-family);
    font-size: 16px;
    text-align: left;
    padding: 12px 35px;
    color: var(--ts-chat-faq-card-color);
    background: var(--ts-chat-faq-card-background-color);
    cursor: pointer;
    border-bottom: 1px solid #FFFFFF;
    transition: all 0.25s ease-out;
    margin: 0;
}

chat-faq .lbl-toggle::before {
    content: ' ';
    display: inline-block;

    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
    vertical-align: middle;
    margin-right: .7rem;
    transform: translateY(-2px);

    transition: transform .2s ease-out;
}

chat-faq .toggle:checked + .lbl-toggle::before {
    transform: rotate(90deg) translateX(-3px);
}

chat-faq .collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

chat-faq .toggle:checked + .lbl-toggle + .collapsible-content {
    /*max-height: 100vh;*/
    max-height: 1000%;
}

chat-faq .toggle:checked + .lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

chat-faq .collapsible-content .content-inner p {
    background: var(--ts-chat-faq-inner-content-background-color);
    color: var(--ts-chat-faq-inner-content-text-color);
    line-height: normal;
    font-weight: normal;
    font-size: 16px;
    font-style: normal;
    border: none;
    padding: .5rem 1rem;
    margin: 0;
}

chat-faq img {
    max-width: 100% !important;
    height: auto !important;
}

chat-conversation .chat-message-text .ts-chat-bot-icon
{
    fill: var(--ts-chat-survey-bot-icon-color);
}

@keyframes saleElChat
{
    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        transform: translate3d(10px, 0, 0);
    }

    90% {
        transform: translate3d(-5px, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}

.chat-tecsible-unactive {
    animation: bounceOutRight .5s forwards 0s ease-in;
}

.chat-tecsible-active
{
    animation: saleElChat .5s forwards 0s ease-in;
}

/*
 *********************************************************
 * CUSTOM SURVEYS
 *********************************************************
 */

chat-conversation .chat-tecsible-survey-parent
{
    text-align: center;
    margin: 0;
    padding: 20px 0;
}

chat-conversation .chat-tecsible-survey-wrapper
{
    width: 90%;
    background-color: var(--ts-chat-survey-main-background-color);
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 20px;
    font-size: 14px;
    color: rgb(0, 110, 180);
    margin-top: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

chat-conversation textarea.chat-tecsible-survey-textarea {
    border: 1px solid #888888;
    border-radius: 2px;
    margin: 0;
    width: 100%;
    height: 60px;
    resize: none;
    padding: 5px;
    font-size: 12px;
    outline: none;
    color: var(--ts-chat-survey-answer-font-color);
    background-color: var(--ts-chat-survey-answer-background-color);
}

chat-conversation textarea.chat-tecsible-survey-textarea:disabled
{
    background-color: #FFF;
}

chat-conversation div.chat-tecsible-survey-question-input-wrapper
{
    padding: 0 20px;
    margin: 0;
}

chat-conversation div.chat-tecsible-survey-question-input-wrapper input
{
    width: 100%;
    border: 1px solid #888888 !important;
    margin: 0;
    padding: 5px;
    border-radius: 2px;
    height: 30px;
    font-size: 12px;
    outline: none;
    color: var(--ts-chat-survey-answer-font-color);
    background-color: var(--ts-chat-survey-answer-background-color);
    transition: border 2s;
}

@keyframes chat-tecsible-animation-survey-required
{
    0%{
        background: #ffb7b7;
    }
    100%{
    }
}

chat-conversation .chat-tecsible-survey-required-alert
{
    animation: chat-tecsible-animation-survey-required 1s forwards 0s linear;
}

chat-conversation select.chat-tecsible-survey-select
{
    border: 1px solid #888888;
    width: 100%;
    padding: 5px;
    border-radius: 2px;
    display: block;
    color: var(--ts-chat-survey-answer-font-color);
    background-color: var(--ts-chat-survey-answer-background-color);
    outline: none;
    box-shadow: none;
    font-size: 12px;
}

chat-conversation .chat-tecsible-survey-title-wrapper
{
    padding: 0 20px;
    margin: 0;
}

chat-conversation .chat-tecsible-survey-title-wrapper .chat-tecsible-survey-title-text
{
    text-align: left;
    margin: 0 0 20px 0;
    padding: 0;
    color: var(--ts-chat-survey-title);
    font-weight: bold;
    font-size: 18px;
}

chat-conversation .chat-tecsible-suruvey-text
{
    padding: 0 20px;
    text-align: justify;
    color: var(--ts-chat-survey-questions-font-color);
    background-color: transparent;
}

chat-conversation .chat-tecsible-suruvey-text p
{
    margin: 0 0 8px 0;
    padding: 0;
    line-height: normal;
    color: var(--ts-chat-survey-questions-font-color);
    font-size: 14px;
}

chat-conversation .chat-tecsible-survey-question-wrapper
{
    margin: 0 0 25px 0;
    padding: 0;
}

div.surveyCustom-checkboxGroup-tecsible,
div.surveyCustom-radioGroup-tecsible
{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Chrome */
    background-color: transparent;
}

chat-conversation div.chat-tecsible-survey-checkbox-group
{
    display: block;
}

chat-conversation div.chat-tecsible-survey-checkbox-group input[type=checkbox]
{
    display: none;
}

chat-conversation div.chat-tecsible-survey-checkbox-group label
{
    display: var(--ts-chat-survey-answer-input-buttons-display);
    background: var(--ts-chat-survey-answer-input-buttons-background);
    color: var(--ts-chat-survey-answer-input-buttons-text-color);
    border-radius: 10px;
    padding: 8px;
    margin: 3px;
    font-weight: normal;
    font-size: 12px;
    transition: background .4s, color .4s;
    cursor: pointer;
    box-shadow: 0 6px 10px -8px rgba(0,0,0,0.75);
}

div.chat-tecsible-survey-checkbox-group input[type=checkbox]:checked + label
{
    background: var(--ts-chat-survey-answer-input-buttons-text-color);
    color: var(--ts-chat-survey-answer-input-buttons-background);
}

div.chat-tecsible-survey-smiles-group label
{
    display: inline-block;
    background: transparent;
    color: var(--ts-chat-survey-smiles-color);
    filter: opacity(0.5);
    border-radius: 0;
    padding: 0;
    margin: 3px;
    font-weight: normal;
    font-size: 12px;
    cursor: pointer;
    box-shadow: none;
    transition: filter .3s ease-in-out;
}

div.chat-tecsible-survey-smiles-group label.overSmile:hover
{
    color: var(--ts-chat-survey-smiles-color);
    filter: opacity(0.8);
}

div.chat-tecsible-survey-smiles-group input[type=radio]:checked + label
{
    background: transparent;
    filter: none;
    color: var(--ts-chat-survey-smiles-color);
}

div.chat-tecsible-survey-smiles-group input[type=radio]
{
    display: none;
}

chat-conversation div.surveyCustom-radioGroup-tecsible input[type=radio]
{
    display: none;
}

div.surveyCustom-radioGroup-tecsible label
{
    display: var(--ts-chat-survey-answer-input-buttons-display);
    background: var(--ts-chat-survey-answer-input-buttons-background);
    color: var(--ts-chat-survey-answer-input-buttons-text-color);
    border-radius: 10px;
    padding: 8px;
    margin: 3px;
    font-weight: normal;
    font-size: 12px;
    transition: background .4s, color .4s;
    cursor: pointer;
    box-shadow: 0 6px 10px -8px rgba(0,0,0,0.75);
}

div.surveyCustom-radioGroup-tecsible input[type=radio]:checked + label
{
    background: var(--ts-chat-survey-answer-input-buttons-text-color);
    color: var(--ts-chat-survey-answer-input-buttons-background);
}

chat-conversation #chat-tecsible-survey-send-results
{
    padding: 6px 20px;
    background-color: var(--ts-chat-survey-answer-input-buttons-background);
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: 10px 10px 33px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 33px -8px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 6px -3px rgba(0,0,0,0.75);
    outline: none;
    cursor: pointer;
    transition: all 1s;
    color: var(--ts-chat-survey-answer-input-buttons-text-color);
    font-weight: bold;
    margin: 0 0 15px 0;
}

chat-conversation #chat-tecsible-survey-send-results.chat-tecsible-survey-sended
{
    cursor: none;
    box-shadow: 0px 0px 6px -3px rgba(0,0,0,0.75);
    pointer-events: none;
}

#back-button line
{
    stroke: var(--ts-chat-top-control-button-colors);
}


@keyframes shakeX {
    from,
    to {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-3px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(3px, 0, 0);
    }
}

.shakeX {
    animation: shakeX 1s forwards 0s ease-in;
}

chat-contact-form .chat-tecsible-faq[data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    top: -35px;
    display: inline-block;
    padding: 7px 17px;
    border-radius: 7px;
    background: var(--ts-chat-faq-bubble-hover-fill-color);
    color: #ffffff;
    font-size: 12px;
    font-family: var(--ts-chat-font-family);
    white-space: nowrap;
}

chat-contact-form .chat-tecsible-faq[data-title]:hover::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 17px;
    display: inline-block;
    color: #0e2e86;
    background: transparent;
    transform: rotate(180deg);
    border: 6px solid transparent;
    border-bottom: 8px solid var(--ts-chat-faq-bubble-hover-fill-color);
}

chat-controls #close-button[data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    top: -30px;
    display: inline-block;
    padding: 7px 17px;
    border-radius: 7px;
    background: var(--ts-chat-faq-bubble-hover-fill-color);
    color: #ffffff;
    font-size: 12px;
    font-family: var(--ts-chat-font-family);
    white-space: nowrap;
}

chat-controls #close-button[data-title]:hover::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 17px;
    display: inline-block;
    color: #0e2e86;
    background: transparent;
    transform: rotate(180deg);
    border: 6px solid transparent;
    border-bottom: 8px solid var(--ts-chat-faq-bubble-hover-fill-color);
}

chat-controls div#chat-tecsible-calendar-schedule
{
    float: right;
    position: relative;
    display: inline-block;
    text-align: center;
    height: 100%;
    width: 40%;
    transform: translateX(40%);
}

chat-controls div#chat-tecsible-calendar-schedule svg#chat-tecsible-out-of-time
{
    box-sizing: content-box !important;
    float: right;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 18px;
    height: 18px;
    padding: 4px;
    background: none;
    border-radius: 0;
    cursor: pointer;
    transition: .3s;
}

chat-controls div#chat-tecsible-calendar-schedule svg#chat-tecsible-out-of-time path
{
    fill: var(--ts-chat-top-control-button-colors);
}
:root {--ts-chat-font-family : Roboto, sans-serif;
--ts-chat-top-background-color : #ffffff;
--ts-chat-top-font-color : #474747;
--ts-chat-top-control-button-colors : #474747;
--ts-chat-main-background-color : #ffffff;
--ts-chat-bubble-background-color : #ec5b14;
--ts-chat-agent-profile-circle-border-color : #c4c4c4;
--ts-chat-agent-profile-circle-background-color : #ffffff;
--ts-chat-top-agent-or-bot-profile-fill : #ec5b14;
--ts-chat-conversation-agent-message-background : #ec5b14;
--ts-chat-conversation-agent-message-text-color : #ffffff;
--ts-chat-conversation-client-message-background : #707070;
--ts-chat-conversation-client-message-text-color : #ffffff;
--ts-chat-conversation-scrollbar-color : #cccccc;
--ts-chat-conversation-background-color : #ffffff;
--ts-chat-speaker-color : #4b7ba3;
--ts-chat-shadow : rgba(0,0,0, 0);
--ts-chat-conversation-actions-background : #ffffff;
--ts-chat-conversation-textarea-text-color : #474747;
--ts-chat-conversation-buttons-send-attach-fill-color : #474747;
--ts-chat-contact-show-logo : -1;
--ts-chat-contact-url-logo : ;
--ts-chat-contact-policy-color : #5c5c5c;
--ts-chat-contact-send-email-color : #5c5c5c;
--ts-chat-contact-input-border-color : #5c5c5c;
--ts-chat-contact-input-text-color : #333333;
--ts-chat-contact-input-background-color : #ffffff;
--ts-chat-contact-open-chat-background-color : #5c5c5c;
--ts-chat-contact-open-chat-text-color : #ffffff;
--ts-chat-contact-faq-bubble : #474747;
--ts-chat-faq-bubble-hover-fill-color : #474747;
--ts-chat-suggestions-background-color : #ffffff;
--ts-chat-suggestions-text-color : #4266a5;
--ts-chat-suggestions-border-color : #4266a5;
--ts-chat-suggestions-selected-color : #4266a5;
--ts-chat-suggestions-selected-text : #ffffff;
--ts-chat-suggestions-info-color : #4266a5;
--ts-chat-survey-bot-icon-color : #1a273e;
--ts-chat-suggestions-shadow : rgba(0,0,0, 0.25);
--ts-chat-suggestions-border-style : solid;
--ts-chat-suggestions-align : none;
--ts-chat-faq-card-background-color : #f0f0f0;
--ts-chat-faq-card-color : #515151;
--ts-chat-faq-inner-content-background-color : #ffffff;
--ts-chat-faq-inner-content-text-color : #515151;
--ts-chat-survey-main-background-color : #eeeeee;
--ts-chat-survey-title : #4266a5;
--ts-chat-survey-questions-font-color : #474747;
--ts-chat-survey-answer-font-color : #474747;
--ts-chat-survey-answer-background-color : #ffffff;
--ts-chat-survey-answer-input-buttons-background : #d5d7d9;
--ts-chat-survey-answer-input-buttons-text-color : #1378b9;
--ts-chat-survey-smiles-color : #4b7ba3;
--ts-chat-suggestions-display : inline;
--ts-chat-suggestions-text-align : center;
--ts-chat-contact-sizeY-logo : 0px;
--ts-chat-contact-input-width : 60%;
--ts-chat-contact-size-logo : 60%;
--ts-chat-font-size : 14px;
--ts-chat-margin-conversation : 15px;
--ts-chat-width-conversation : 55%;
}