/*@import url('https://fonts.googleapis.com/css?family=Cairo');*/

.inbenta-bot,
.inbenta {
    font-family: 'Cairo', sans-serif !important;
    z-index: 10000;
}

.inbenta-bot .inbenta-bot__chat__body {
    background-color: #ffffff;
}

/*SIDE-BUBBLE************************************************************/

/*HEADER*/

.inbenta .inbenta-bot__bubble__header {
    background-color: rgba(89, 89, 91, 1);
    color: #ffffff;
    font-family: 'Cairo', sans-serif;
}

.inbenta .inbenta-bot__bubble .header__title {
    font-family: 'Cairo', sans-serif;
}

/*BODY*/

.inbenta .inbenta-bot__bubble__body {
    background-color: #ffffff;
}

.inbenta .inbenta-bot__bubble__body a {
    color: rgba(89, 89, 91, 1);
}

.inbenta .inbenta-bot__bubble__body a:hover {
    color: rgba(89, 89, 91, 1);
}

/*bullets, viñetas*/

.inbenta .inbenta-bot__bubble__body ul {
    list-style-type: none;
}

.inbenta .inbenta-bot__bubble__body ul li {
    color: rgba(89, 89, 91, 1) !important;
    margin-left: -15px;
    padding: 0;
    border-bottom: 1px solid #dddddd;
    padding-bottom: 5px;
    padding-left: 1px;
    margin-bottom: 5px;
    background-repeat: no-repeat;
    background-position: 0px 3px;
}

.inbenta .inbenta-bot__bubble__body ul li:before {
    color: #97c851 !important;
    content: "» ";
}


.inbenta .inbenta-bot__bubble__body ol {
    list-style-type: none;
}

.inbenta .inbenta-bot__bubble__body ol li {
    color: rgba(89, 89, 91, 1) !important;
    margin-left: -15px;
    padding: 0;
    border-bottom: 1px solid #ced5e2;
    padding-bottom: 5px;
    margin-bottom: 5px;
    counter-increment: item;
}

.inbenta .inbenta-bot__bubble__body ol li:before {
    color: #FFFFFF !important;
    /*    content: "» ";*/
    margin-right: 10px;
    content: counter(item);
    background: #97c851;
    border-radius: 150%;
    width: 1.8em;
    text-align: center;
    display: inline-block;
    font-size: .8em;
}





/*botones contenidos relacionados*/

.inbenta .inbenta-bot__chat .content__related-contents {
}

.inbenta .inbenta-bot__chat .content__related__show {
    font-family: 'Cairo', sans-serif !important;
    color: #000000;
}

.inbenta .content__related-buttons button {
    background-color: #ffffff;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-family: 'Cairo', sans-serif !important;
    color: #97c851;
    text-align: center;
}

.inbenta .content__related-buttons button {
    background-color: #ffffff;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-family: 'Cairo', sans-serif !important;
    color: #97c851;
    text-align: center;
}

.inbenta .content__related-buttons button:hover {
    background-color: #97c851 !important;
     color: #ffffff !important;
}

.inbenta .inbenta-bot__chat .content__related__button:hover {
    color: #000000;
}


/*FOOTER*/

/*ratings*/

.inbenta .inbenta-bot__bubble__footer {
    font-family: 'Cairo', sans-serif !important;
    font-weight: normal !important;
}

.inbenta .inbenta-bot-rating__content__buttons .inbenta-bot-button {
    border: 2px solid #97c851;
    background-color: #97c851;
    color: #ffffff;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.inbenta .inbenta-bot-rating__content__buttons .inbenta-bot-button:hover {
    border: 2px solid rgba(89, 89, 91, 1);
    background-color: rgba(89, 89, 91, 1);
    color: #ffffff;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

/*rating "WHY?" . */

.inbenta .inbenta-bot-rating .comment__wrapper .inbenta-bot-button {
    height: 48px !important;
}

/*ratings en ventana de mensajes*/
.inbenta .inbenta-bot-rating__content__phrase{
    padding-left: 15px !important;
}

.inbenta .inbenta-bot-rating__content__buttons .inbenta-bot-button{
    border: 2px solid #97c851 !important;
    background-color: #97c851 !important;
    color: #ffffff !important;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    margin: 2px;
}


/*MAIN WINDOW**************************************************************************************/

/***HEADER++++++++++*/

/*main header*/

.inbenta .inbenta-bot__chat__header {
    background-color: rgba(89, 89, 91, 1);
    color: #ffffff;
    font-family: 'Cairo', sans-serif;
}

.inbenta .inbenta-bot__chat .header__title {
    font-family: 'Cairo', sans-serif;
}



/***BODY++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.inbenta .inbenta-bot__chat .content__text {
    color: #9197AE;
    line-height: 145% !important;
}

.inbenta .inbenta-bot__chat .messages__message--received .messages__message__avatar {
    display: none;
    /*
    background-color: #76798d;
    color: #ffffff !important;
    border: 1px solid #76798d;
*/
}

.inbenta .inbenta-bot__chat .body__wrapper {
    background-color: #ffffff;
    border-left: 1px solid #e2e2e2;

}

.inbenta .inbenta-bot__chat .body__avatar-content .body__avatar-content__avatar {
    /*avatar background: el video actual, hace las veces de background*/
    /*    background-color: #283C6C;*/
}

.inbenta-bot-avatar .body__avatar-content__avatar div {
    /*    posición avatar video*/
    position: relative !important;
    bottom: 0px !important;
    left: 0px !important;
}


/*area de mensajes***************************************************************************/

.inbenta .inbenta-bot__chat .body__wrapper {
    padding: 0px !important;
}

.inbenta .inbenta-bot__chat .body__wrapper__messages {
    padding: 0px 5px 0px 5px;
}



/****Bubbles chat**/

.inbenta .inbenta-bot__bubble .messages__message--sent .messages__message__content,
.inbenta .inbenta-bot__chat .messages__message--sent .messages__message__content {
    background-color: #ffffff;
    box-shadow: none;
}

.inbenta .inbenta-bot__bubble .messages__message--received .messages__message__content,
.inbenta .inbenta-bot__chat .messages__message--received .messages__message__content {
    background-color: #ffffff;
    box-shadow: none;
}

/*boton "ver mas" que aparece cuando se cierra el side bubble */

.inbenta-bot__bubble .content__open-sidebubble__phrase,
.inbenta-bot__chat .content__open-sidebubble__phrase {
    color: #97c851 !important;

}

.inbenta-bot__chat .content__open-sidebubble__icon {
    color: #97c851 !important;
    margin-left: 15px;
}

/*RECEIVED: textos que escribe el chatbot*************************************************************************/

.inbenta .inbenta-bot__chat .messages__message--received .content__label {
    opacity: 1.0 !important;
    background-color: transparent;
    color: rgba(89, 89, 91, 1);
    font-weight: bolder;
    min-width: 100px;
    padding: 5px 0px 5px 10px;

    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    display: block;
}

/*forza el nombre el avatar*/

.inbenta .inbenta-bot__chat .messages__message--received .content__label:after {
    padding-left: 8px;
    /*    content: " Gloria";*/
}

/*icono avatar: se muestra al lado del nombre del BOT*/

.inbenta .inbenta-bot__chat .messages__message--received .messages__message__content {
    background-image: url("sep-left.png");
    background-repeat: no-repeat;
    background-position: 0px top;
    border: 1px solid #f5f5f5 !important;
    border-left: 0px solid #f5f5f5 !important;
    box-shadow: 5px 2px 5px #f5f5f5 !important;
    padding: 8px 0 0 12px !important;
}

.inbenta .inbenta-bot__chat .messages__message--received .extended_message_container{
    background-image: none;
    box-shadow: none !important;
}

.inbenta .inbenta-bot__chat .messages__message--received .content__text {
    /*    border-left: 2px solid #8D99AE;*/
    padding: 10px 5px 5px 15px !important;


}

/*links*/

.inbenta .inbenta-bot__chat .messages__message--received .content__text a {
    color: #97c851 !important;
    font-weight: bolder !important;
    text-decoration: underline;
}

.inbenta .inbenta-bot__chat .messages__message--sent .content__text a:hover {
    color: rgba(89, 89, 91, 1) !important;
}

.inbenta .inbenta-bot__chat .messages__message--sent .content__text a {
    color: #97c851 !important;
    font-weight: bolder !important;
    text-decoration: underline;
}

.inbenta .inbenta-bot__chat .messages__message--sent .content__text a:hover {
    color: rgba(89, 89, 91, 1) !important;
}


/*bullets, viñetas*/

.inbenta .inbenta-bot__chat .messages__message--received .content__text ul {
    list-style-type: none;
}

.inbenta .inbenta-bot__chat .messages__message--received .content__text ul li {
    color: rgba(89, 89, 91, 1) !important;
    margin-left: -15px;
    padding: 0;
    border-bottom: 1px solid #dddddd;
    padding-bottom: 5px;
    padding-left: 1px;
    margin-bottom: 5px;
    background-repeat: no-repeat;
    background-position: 0px 3px;
}

.inbenta .inbenta-bot__chat .messages__message--received .content__text ul li:before {
    color: #97c851 !important;
    content: "» ";
}

.inbenta .inbenta-bot__chat .messages__message--received .content__text ol {
    list-style: none;

}

.inbenta .inbenta-bot__chat .messages__message--received .content__text ol li {
    color: rgba(89, 89, 91, 1) !important;
    margin-left: -15px;
    padding: 0;
    border-bottom: 1px solid #ced5e2;
    padding-bottom: 5px;
    margin-bottom: 5px;
    counter-increment: item;
}

.inbenta .inbenta-bot__chat .messages__message--received .content__text ol li:before {
    color: #FFFFFF !important;
    /*    content: "» ";*/
    margin-right: 10px;
    content: counter(item);
    background: #97c851;
    border-radius: 150%;
    width: 1.8em;
    text-align: center;
    display: inline-block;
    font-size: .8em;
}


/*tablas*/

.inbenta .inbenta-bot__chat .messages__message--received .content__text table {
    border-collapse: collapse;
    font-size: 12px;
    line-height: 120%;
    margin: 15px 0px 15px 0px;
}


.inbenta .inbenta-bot__chat .messages__message--received .content__text th,
.inbenta .inbenta-bot__chat .messages__message--received .content__text td {
    padding: 4px;
    text-align: left;
    border: 1px solid #afafaf !important;
}



/*SENT: textos del usuario**********************************************************************************/

/*icono avatar: se muestra al lado del nombre del BOT*/

.inbenta .inbenta-bot__chat .messages__message--sent .messages__message__content {
    background-image: url("sep-right.png");
    background-repeat: no-repeat;
    background-position: right top;
    border: 1px solid #f2f2f2;
    border-right: 0px solid #f2f2f2;
    box-shadow: -5px 2px 5px #f5f5f5;

}

.inbenta .inbenta-bot__chat .messages__message--sent .content__label {

    opacity: 1.0 !important;
    background-color: transparent;
    color: #97c851;
    font-weight: bolder;
    width: auto !important;
    padding: 5px 10px 5px 10px;

    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;

    display: block !important;
    float: right;


}

.inbenta .inbenta-bot__chat .messages__message--sent .content__label:after {}

.inbenta .inbenta-bot__chat .messages__message--sent .content__text {
    clear: both;
    /*    border-right: 2px solid #AA1A30;*/
    padding: 10px 15px 5px 10px;
    text-align: right;
    display: block !important;
}

/*Reset SPAN to make a behaivor like DIV (label and text)*/

/*resetea para que los SPAN del label y texto se comporten como divs*/

.inbenta-bot__bubble .messages__message--received,
.inbenta-bot__bubble .messages__message--sent .messages__message__content,
.inbenta-bot__chat .messages__message--received,
.inbenta-bot__chat .messages__message--sent .messages__message__content {
    display: inline-block!important;
    -webkit-align-items: none !important;
    -ms-align-items: none !important;
    -ms-flex-align: none !important;
    align-items: none !important;
}

/*LINKS MULTI-CHOISE: inside the text*/

.inbenta .inbenta-bot__chat .content__buttons--multiple-choise .inbenta-bot-button {
    background-color: none !important;
    color: rgba(89, 89, 91, 1);
    border: none !important;
}

.inbenta .inbenta-bot__chat .content__buttons--multiple-choise .inbenta-bot-button:hover {
    background-color: transparent !important;
    color: #97c851;
    border: none !important;
}


.inbenta .inbenta-bot__chat .content__buttons--multiple-choise .inbenta-bot-icon--faq-icon:before {
    content: "→ ";
    font-size: 16px;
    color: rgba(89, 89, 91, 1);
    padding: 0px 10px 0px 0px
}

.inbenta .inbenta-bot__chat .content__buttons--multiple-choise .inbenta-bot-button:disabled {
    background-color: transparent !important;
    color: rgba(89, 89, 91, 1);
    border: none !important;
}


/*****ERROR ALERT******************/

.inbenta .inbenta-bot__chat .alert-box__title {
    color: rgba(89, 89, 91, 1) !important;
    font-weight: bold;
}

.inbenta .inbenta-bot-button {
    color: #ffffff;
    background-color: #97c851;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

.inbenta .inbenta-bot-button:hover {
    background-color: rgba(89, 89, 91, 1) !important;
}

/*FOOTER*/

/* askinput
area/campo para comentar*+++++++++++++++++++++++++++++++*/

.inbenta .inbenta-bot__chat .footer__form--focus .footer__form__button .inbenta-bot-icon--send {
    color: #97c851;
}

.inbenta .inbenta-bot__chat .footer__form__button {
    border: none !important;
    color: #97c851;
    background-color: #ffffff;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

/*LAUNCHER+++++++++++++++++++++++++++++++++++++++++++++++++++*/

.inbenta .inbenta-bot__launcher {

    opacity: 1 !important;

    position: fixed!important;
    right: 10px!important;
    top: 90%!important;
    margin-top: -73px;
    background: transparent !important;
    color: #2c2f2f;
    border: 0px solid #2c2f2f;
    padding: 0px !important;

    /*-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;*/

    width: 200px !important;
    height: 50px !important;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0), 0 3px 12px 0 rgba(0, 0, 0, 0);
    transition: all .3s ease 0s
}

.inbenta .inbenta-bot__launcher:hover {
    transition: width 2s;
    opacity: 1.0 !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: none;
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0), 0 3px 12px 0 rgba(0, 0, 0, 0);
}

.inbenta .inbenta-bot__launcher__image {
    overflow: visible !important;
    /*    background-image:url(icon-chat-full.jpg);*/
    background-image: url('btn-launcher.png');

    background-repeat: no-repeat;
    width: 200px;
    height: 50px;
}

.inbenta .inbenta-bot__launcher__text {
    display: block !important;
    font-size: 14px;

}


/*****BUTTONS***************************************************/

.inbenta .content__buttons{
    padding: 10px;
}

.inbenta .content__buttons .inbenta-bot-button {
    border: 2px solid rgba(89, 89, 91, 1);
    color: #ffffff;
    background-color: rgba(89, 89, 91, 1);
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

.inbenta .content__buttons .inbenta-bot-button:hover {
    border: 2px solid #97c851;
    color: #ffffff;
    background-color: #97c851 !important;

}

.inbenta .content__buttons .inbenta-bot-button:disabled {
    border: 2px solid #c6c6c6;
    background-color: transparent;
    color: #c6c6c6;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

.inbenta .content__buttons .inbenta-bot-button.clicked {
    border: 2px solid #76798d;
    background-color: transparent;
    color: rgba(89, 89, 91, 1);
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;

}


/*HYPERCHAT */

/*Cuando un agente está escribiendo*/
.inbenta .inbenta-bot__chat .footer__chat-activity .activity__avatar{
    background-color: rgba(89, 89, 91, 1);
}
.inbenta .inbenta-bot__chat .footer__chat-activity .activity__content{
    background-color: rgba(89, 89, 91, 1);
}
.inbenta .inbenta-bot__chat .footer__chat-activity .activity__content .activity__dot{
    background-color: #ffffff;
}
.inbenta .inbenta-bot__chat .content__status{
     right: 20px;
}

.inbenta .messages__message__content .status__icon.inbenta-bot-icon--doblecheck{
    color: #97c851;
}
.inbenta .messages__message__content .status__icon.inbenta-bot-icon--check{
    color: #97c851;
}

/*Estilos para botones en ventana del chat*/
.menuli {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 100%;
}

.menuli li {
    display: block;
    width: 210px;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    border-bottom: none !important;
}

.menuli li:after {
    content: '' !important;
}

.menuli li:before  {
    content: '' !important;
}

.btninsidechat {
    display: table;
    width: 100%;
    background: #4a3c80;
    box-shadow: 0 0 7px 4px rgba(0, 0, 0, 0.07);
    border-radius: 100px;
    font-size: 0.8rem;
    text-decoration: none !important;
    padding-left: 8px;
    padding-right: 8px;
    border: 2px solid #4a3c80;
}

.insidecolor {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #FFF;
    font-weight: normal;
	background-color:#69b32d
    width: 100%;
    height: 35px;
}

.btninsidechat:hover {
    background-color: #1F1F1F;
    border: 2px solid #ffffff;
}

.agente {
    position: relative;
    display: table;
    width: 100%;
    background: #69b32d;
    color: #96c11e;
    box-shadow: 0 0 7px 4px rgba(0, 0, 0, 0.07);
    border-radius: 100px;
    font-size: .9rem;
    text-decoration: none !important;
    padding-left: 8px;
    padding-right: 8px;
    border: 2px solid #69b32d;
}

.agenteicono {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 24px;
    height: 24px;
    display: table;
    background: #FFF;
    border: solid 1px #FFF;
    color: #4A3C80;
    -webkit-border-radius: 50% 50% 50% 50%;
    border-radius: 50% 50% 50% 50%;   
}

.agenteicono span {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    text-align: center;
}

.agenteicono span img {
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0), 0 1px 3px 0 rgba(0,0,0,0);
}

.agente .insidecolor {
    padding-left: 10px;
}