/* Extra */
@import url('../codemirror/codemirror.min.css');
@import url('../codemirror/themes/eclipse.min.css');

/* General */
* {
    padding: 0;
    margin: 0;
    outline: none;
    box-sizing: border-box;
}

::-ms-reveal {
    display: none;
}

html {
    font-size:unset!important;
    scrollbar-width: thin;
    scrollbar-color: #E4E5E8 #FAFAFA;
}

body {
    font-family: 'a_regular'!important;
    font-size: unset!important;
	background: #fafafa!important;
    --toggle-background: var(--pbx-green);
    --toggle-text: #ffffff;
    --toggle-marker: #FAFAFA;
}

.hidden {
    overflow: hidden;
}

h2 {
    font-size: 28px;
    letter-spacing: -0.51px;
    font-weight: 300;
    font-family: 'a_regular';
}

h3 {
    font-family: 'a_regular_bold';
    letter-spacing: .3px;
}

p, span, li, a, th, td {
    font-family: 'a_regular';
    font-size: 15px;
    line-height: 1.6;
}

ul li {
    list-style: none;
}

a {
    text-decoration: none!important;
    color: #000!important;
    font-size: 13px;
}

.bubbles.idioma a{
    text-decoration:none!important;
    color:#000!important;
    font-size:13px
}

#principal {
    width: 100%;
    margin-left:2.7vw;
}


/* Colores institucionales */

:root {
	--pbx-grey: #4F5050 !important;
	--pbx-green: #A7C71C !important;
	--pbx-dark-green: #019D4A !important;
  }

  .pbx-grey {
	background-color: var(--pbx-grey);
  }

  .pbx-green {
	background-color: var(--pbx-green);
  }

  .pbx-dark-green {
	background-color: var(--pbx-dark-green);
  }


/* Iconos */
.iconos {
    font-size: 0;
}

.iconos:before {
    content: '';
    display: block;
}

.iconos.valign{
    display: block;
    max-height: 100%;
}

.folder,
.folder-back{
    display: block;
    padding-left: 25px;
    background: left center/auto .8lh no-repeat;
}

.folder{
    background-image: url(icons/folder.svg);
}

.folder-back{
    background-image: url(icons/goback2.svg);
}

.descargar:before, .download:hover:before {
    width: 20px;
    height: 20px;
    background: url(icons/descargar.svg) no-repeat;
    background-size: contain;
}

.current-location{
    padding: .35em .85em;
    background: #F5F6F9;
    border: 1px solid #DCDCDC;
    border-radius: .3em;
    font-size: 0.85rem;
    line-height: 1rem;
    color: #9b9eac;
    margin: -1em 0 1em 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.current-location span{
    flex: 1;
    overflow: hidden;
}

.download:before {
    width: 20px;
    height: 20px;
    background: url(icons/descargar-g.svg) no-repeat;
    background-size: contain;
}

.refresh:before {
    width: 20px;
    height: 20px;
    background: url(icons/refrescar.svg) no-repeat;
    background-size: contain;
}

.minimizar:before {
    width: 20px;
    height: 20px;
    background: url(icons/minimizar.svg) no-repeat;
    background-size: contain;
}

.contraer > a {
    display: flex;
    justify-content: center;
}

.contraer > a:before {
    width: 20px;
    height: 20px;
    background: url(icons/minimizar-n.svg) no-repeat;
    background-size: contain;
}

.maximizar > a {
    display: flex;
    justify-content: center;
}

.maximizar > a:before {
    width: 15px;
    height: 15px;
    background: url(icons/sumar.svg) no-repeat;
    background-size: contain;
}

.cerrar:before {
    width: 10px;
    height: 10px;
    background: url(icons/cerrar.svg) no-repeat;
    background-size: contain;
}

.quitar:before {
    width: 10px;
    height: 10px;
    background: url(icons/quitar.svg) no-repeat;
    background-size: contain;
}

.quitar:hover:before {
    background: url(icons/quitar-n.svg) no-repeat;
    background-size: contain;
}

.qr:before {
    width: 12px;
    height: 15px;
    background: url(icons/qr.png) no-repeat center center;
    background-size: 12px;
}

.qr:hover:before {
    background: url(icons/qr.png) no-repeat center center;
    background-size: 12px;
}

.editar:before {
    width: 12px;
    height: 15px;
    background: url(icons/editar-g.svg) no-repeat center center;
    background-size: 12px;
}

.editar:hover:before {
    background: url(icons/editar-n.svg) no-repeat center center;
    background-size: 12px;
}

.sync:before {
    width: 12px;
    height: 15px;
    background: url(icons/editar-g.svg) no-repeat center center;
    background-size: 12px;
}

.sync:hover:before {
    background: url(icons/editar-n.svg) no-repeat center center;
    background-size: 12px;
}

.obtener:before {
    width: 15px;
    height: 15px;
    background: url(icons/obtener-g.svg) no-repeat center center;
    background-size: 15px;
}

.obtener:hover:before {
    background: url(icons/obtener.svg) no-repeat center center;
    background-size: 15px;
}

.borrar:before {
    width: 10px;
    height: 15px;
    background: url(icons/borrar-g.svg) no-repeat center center;
    background-size: 10px;
}

.borrar:hover:before {
    background: url(icons/borrar-n.svg) no-repeat center center;
    background-size: 10px;
}

.estilos:before {
    width: 10px;
    height: 15px;
    background: url(icons/estilos-g.svg) no-repeat center center;
    background-size: 13px;
}

.estilos:hover:before {
    background: url(icons/estilos-n.svg) no-repeat center center;
    background-size: 13px;
}

.copiar:before {
    width: 10px;
    height: 15px;
    background: url(icons/copy.svg) no-repeat center center;
    background-size: 10px;
}

.copiar:hover:before {
    background: url(icons/copy-n.svg) no-repeat center center;
    background-size: 10px;
}

.copiar.copy-success:before,
.copiar.copy-success:hover:before{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #EDF2DB;
    background-image: url(icons/correcto-v.svg);
}


.eliminar:before {
    width: 15px;
    height: 15px;
    background: url(icons/eliminar-g.svg) no-repeat center center;
    background-size: 15px;
}

.eliminar:hover:before {
    background: url(icons/eliminar-n.svg) no-repeat center center;
    background-size: 15px;
}

.eliminar-blanco:before {
    width: 15px;
    height: 15px;
    background: url(icons/eliminar-b.svg) no-repeat center center;
    background-size: 15px;
}

.eliminar-blanco:hover:before {
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.mostrar .ojo:before {
    width: 17px;
    height: 17px;
    background: url(icons/mostrar.svg) no-repeat center center;
    background-size: 17px;
}

.ocultar .ojo:before {
    width: 17px;
    height: 17px;
    background: url(icons/ocultar.svg) no-repeat center center;
    background-size: 17px;
}

.agent-group:before {
    width: 17px;
    height: 17px;
    background: url(icons/agentes-gc.svg) no-repeat center center;
    background-size: 17px;
}

.agent-group:hover:before {
    width: 17px;
    height: 17px;
    background: url(icons/agentes-negro.svg) no-repeat center center;
    background-size: 17px;
}

.queue-group:before {
    width: 17px;
    height: 17px;
    background: url(icons/colas-g.svg) no-repeat center center;
    background-size: 17px;
}

.queue-group:hover:before {
    width: 17px;
    height: 17px;
    background: url(icons/colas-n.svg) no-repeat center center;
    background-size: 17px;
}

.department-group:before {
    width: 17px;
    height: 17px;
    background: url(icons/department.svg) no-repeat center center;
    background-size: 17px;
}

.department-group:hover:before {
    width: 17px;
    height: 17px;
    background: url(icons/department-negro.svg) no-repeat center center;
    background-size: 17px;
}

.ver:before {
    width: 17px;
    height: 17px;
    background: url(icons/ver.svg) no-repeat center center;
    background-size: 17px;
}

.ver:hover:before {
    width: 17px;
    height: 17px;
    background: url(icons/ver-n.svg) no-repeat center center;
    background-size: 17px;
}

a.metricas:before {
    width: 17px;
    height: 17px;
    background: url(icons/metricas-g.svg) no-repeat center center;
    background-size: 17px;
}

a.metricas:hover:before {
    width: 17px;
    height: 17px;
    background: url(icons/metricas-n.svg) no-repeat center center;
    background-size: 17px;
}

a.preguntas:before {
    width: 17px;
    height: 17px;
    background: url(icons/preguntas-g.svg) no-repeat center center;
    background-size: 17px;
}

a.preguntas:hover:before {
    width: 17px;
    height: 17px;
    background: url(icons/preguntas-n.svg) no-repeat center center;
    background-size: 17px;
}


.mover:before {
    width: 30px;
    height: 16px;
    background: url(icons/mover.svg) no-repeat center center;
    background-size: 30px;
}

.mover:hover:before {
    width: 30px;
    height: 16px;
    background: url(icons/mover-v.svg) no-repeat center center;
    background-size: 30px;
}

.seleccionar:before {
    width: 17px;
    height: 17px;
    background: url(icons/seleccionar.svg) no-repeat center center;
    background-size: 17px;
}

.seleccionar-todos:before, .seleccionar:hover:before {
    width: 17px;
    height: 17px;
    background: url(icons/seleccionar-todos.svg) no-repeat center center;
    background-size: 17px;
}

.seleccionar-si:before, .seleccionar-no:hover:before {
    width: 23px;
    height: 23px;
    background: url(icons/seleccionar-si.svg) no-repeat center center;
    background-size: 23px;
}

.seleccionar-no:before {
    width: 23px;
    height: 23px;
    background: url(icons/seleccionar-no.svg) no-repeat center center;
    background-size: 23px;
}

.csv {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-transform: uppercase;
	margin-right: 30px;
}

.csv:before {
    content: '';
    display: block;
    background: url(icons/descargar.svg) no-repeat center center;
    width: 17px;
    height: 23px;
    background-size: 23px;
    margin-right: 5px;
}

.csv:hover {
    text-decoration: underline;
}

.pdf {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-transform: uppercase;
}

.pdf:before {
	content: '';
	display: block;
	background: url(icons/descripcion.svg) no-repeat center center;
	width: 17px;
	height: 23px;
	background-size: 17px;
	margin-right: 5px;
}

.pdf:hover {
	text-decoration: underline;
}

.cancelar {
    margin: 0 0 30px auto;
    display: block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    text-transform: uppercase;
}

.cancelar:hover {
    color: black;
}

form div.force-large{
    width: 100% !important;
}

/* Cantidad a mostrar */
#subir-cantidad, .subir-cantidad{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 23px;
}

#subir-cantidad > div, .subir-cantidad > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#subir-cantidad div input, .subir-cantidad div input  {
    padding: 10px 28px;
    border: 0;
    border-radius: 4px;
    width: 92px;
    margin-left: 30px;
}

/* Header con buscador */
.header-buscador form > div:first-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 45px;
}

.header-buscador .search {
    width: 50%;
}

.header-buscador .search.large{
    flex: 1;
    margin-left: 20px;
}

.header-buscador .search.large .buscador{
    padding-top: 8px;
    padding-bottom: 8px;
}

.header-buscador .dates {
    display: flex;
    margin-left: 20px;
}

.header-buscador .dates div{
    display: flex;
    box-shadow: -1px 1px 4px 0 rgb(55 70 95 / 12%);
    border-radius: 4px 0 0 4px;
    align-items: center;
    background-color: #ffffff;
    padding: 9px 4px;
    margin: 0 5px;
}

.header-buscador .dates div label{
    font-size: 15px;
    color: #9b9eac;
}

.header-buscador .dates div input{
    width: 130px;
    border: 0;
    height: 100%;
    margin-left: 6px;
}

.header-buscador .dates + .search{
    flex: 1;
}

#subir-agentes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 23px;
}

#subir-agentes > div:first-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.subir-cargar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.primera-vez {
    margin-top: 30px;
}

#subir-agentes div input {
    padding: 10px 28px;
    border: 0;
    border-radius: 4px;
    width: 92px;
    margin-left: 30px;
}

.subir {
    display: block;
}

.subir input {
    display: none;
}

.subir .agentes {
    text-transform: uppercase;
    font-size: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.subir .agentes:before {
    content: '';
    display: block;
    background: url(icons/cargar.svg) no-repeat center center;
    width: 13px;
    height: 14px;
    background-size: 14px;
    margin-right: 5px;
}

.subir .agentes:hover {
    text-decoration: underline;
}

.subir a.texto-gris {
    font-size: 12px;
}

.subir a:hover {
    color: #31484c;
}

/* Cargar archivo */
.subir .archivo, .subir .eliminar {
    display: none;
}

.cargado.subir .archivo, .cargado.subir .eliminar {
    display: block;
}

.cargado {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.cargado .agentes {
	background: var(--pbx-dark-green);
	padding: 5px 10px;
	border-radius: 4px;
	color: white;
	margin: 0 15px;
}

.cargado .agentes:before, .cargado > a {
    display: none;
}

.cargado .agentes:hover {
    text-decoration: none;
}

.width-unset
{
    width: unset;
}

/* Botones */
.btn, .btn-verde, .btn-rojo, .btn-gris, .btn-azul {
    background: none 1em center/calc( 1em + 6px ) no-repeat;
	border-radius: 4px;
	color: white !important;
	border: 0;
	font-size: 13px !important;
	text-transform: uppercase;
	display: block;
	letter-spacing: 1.08px;
	cursor: pointer;
    transition: .3s;
}

.btn {
	background-color: var(--pbx-grey);
	padding: 8px 20px;
}

.btn-verde {
	background-color: var(--pbx-dark-green);
	padding: 10px 35px;
	text-align: center;
}

.btn-rojo {
    background: #d01414;
    padding: 6px 25px;
}

.btn-azul{
    background: #2C64BC;
    padding: 6px 25px;
}

.btn-gris {
    background: #9bacb0;
    padding: 10px 35px;
}

.btn-mini{
    width: min-content;
    flex: 0;
    white-space: nowrap;
    padding: 6px 20px;
    font-size: 0.85em;
}

.btn.buffering{
    padding-left: 3em;
    pointer-events: none;
    background-image: url(./icons/loading-circle-white.svg);
    filter: opacity(.8)
}

.btn-rounded{
    border-radius: .4em;
}

#bot-designer.btn{
    background-color: #4237dc;
	padding: 8px 90px;
}

#bot-designer.btn:hover{
    background-color: #3d32ce;
}


button:disabled,
button[disabled],
.btn-disabled,
.btn-submit-once:disabled{
    border: 1px solid #AAAAAA;
    background-color: #EEEEEE;
    color: #AAAAAA !important;
    pointer-events: none;
}

.room-chat-tags.btn-disabled{
    background-color: #777;
}

.icon-disabled,
.lbl-disabled{
    opacity: 0.48;
    pointer-events: none;
}


.modal-borrar .btn-gris {
    background: #66696a;
    padding: 6px 25px;
}

.audio-container{
    display: block;
    margin: 7px 0 20px;
}

.audio-container audio{
    display: block;
    height: 33px;
    margin: auto;
}

.btn:hover, .btn-verde:hover, .btn-rojo:hover, .btn-gris:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#botones {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 20px;
}

#botones .btn-gris {
    margin-right: 30px;
}

#botones .btn-pull-right{
    margin-left: auto;
}

.aplicar {
	border-radius: 5px;
	background-color: var(--pbx-dark-green);
	box-shadow: -1px 1px 4px 0 rgba(55, 70, 95, 0.12);
}

.aplicar input {
    color: white;
    border: 0;
    background: 0;
}

/* Fondos */
.fondo-blanco {
    border-radius: 4px;
    box-shadow: 0 2px 14px 0 rgba(209, 209, 209, 0.5);
    background-color: #fff;
    padding: 20px;
}

.fondo-gris {
    background-color: #fafafa;
}

.gris-oscuro {
    background-color: #e3e7e8;
}

.verde-claro {
    background-color: #e9eed6;
}

/* Textos */
.texto-rojo {
    color: #d0021b;
}

.texto-gris {
    color: #9bacb0;
}

.texto-bold {
    font-family: 'a_regular_bold';
}

.texto-color {
	color: var(--pbx-dark-green);
}

/* Modales */
.bubbles {
    position: relative;
}

.bubbles ul {
    position: absolute;
    background: white;
    box-shadow: 0 4px 16px 0 rgba(58, 70, 93, 0.08);
    border: solid 1px #e9ebf2;
    border-radius: 4px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 1;
    min-width: max-content;
}

th.bubbles ul.top {
    top: 35px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

.bubbles ul li {
    padding: 8px 13px;
    cursor: pointer;
    font-size: 13px;
}

.bubbles #actions_menu ul li{
    padding: 0;
}

.bubbles #actions_menu ul li a{
    padding: 8px 13px;
    display: block;
}

.bubbles ul li:hover {
    background-color: #fafafa;
}

.modal-borrar {
    position: absolute;
    box-shadow: 0 2px 8px 4px rgba(193, 193, 193, 0.5);
    text-align: center;
    background: white;
    border-radius: 5px;
    padding: 15px;
    z-index: 1;
}

.modal-borrar p {
    font-size: 13px;
}

.modal-borrar .botones {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 10px;
}

.modal-borrar .botones a span {
    display: none;
}

.modal-borrar .botones a:first-child {
    margin-right: 10px;
}

.modal-borrar .botones a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.background-modal {
    position: fixed;
    overflow: auto;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 2;
}

.modal-background {
    overflow: hidden;
}

.modal {
    padding: 10px;
    background: #fafafa;
    box-shadow: 0 2px 8px 4px rgba(193, 193, 193, 0.5);
    border-radius: 5px;
    z-index: 1;
    position: absolute;
    max-width: 300px;
    display: none;
}

.modal p {
    font-size: 13px;
}

.buy-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
}

.buy-modal-content {
    background-color: white;
    margin: 5% auto;
    width: 90%;
    max-width: 1000px;
    border-radius: 20px;
    overflow: hidden;
    color: white;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

.buy-modal-body {
    display: flex;
    overflow: hidden;
}

.text-content-wrapper {
    flex: 3;
    background-color: #019d4a;
    border-radius: 0 40px 40px 0;
}

.text-content {
    height: 100%;
    padding: 35px;
    min-height: 500px;
}

.buy-modal-title {
    font-size: 45px !important;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: bold;
}

.text-content p {
    font-size: 17px;
}

.space-parraf{
    margin-top: 20px;
}

.image-content {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 2;
}

.buy-component-logo {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.buy-modal-footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.buy-modal-footer button {
    background-color: white;
    color: #019d4a;
    border: none;
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: bold;
    width: 100%;
    max-width: 400px;
    margin-top: 30px;
}

.buy-modal-footer button:hover {
    background-color: #f0f0f0ed;
}

/* Header */
#header {
    background: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 5%;
    width: 100%;
    border-bottom: 1px solid black;
}

#header > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

#header .abrir a {
    display: inherit;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.mas:after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url(icons/mas-negro.svg) no-repeat;
    background-size: contain;
    margin-left: 5px;
}

#header .abrir ul {
	top: 25px;
	width: 120%;
	left: 0;
	z-index: 5;
}

#header .idioma {
    position: relative;
}

#header .idioma > a {
    font-size: 14px;
    width: 31px;
    height: 26px;
    border-radius: 4px;
    border: solid 2px #000000;
    display: block;
    text-align: center;
    font-weight: bold;
    margin-right: 30px;
}

#header .idioma ul {
    top: 33px;
    left: 0;
    width: 90px;
    z-index: 5;
}

#header .idioma.notification-bell ul a {
    text-decoration: none!important;
    color: #019D4A !important;
    font-weight: bold;
    font-size: 14px;
    margin-left: .5em;
}

#header .idioma.notification-bell ul {
    right: 26px!important;
    width: 315px!important;
    left: unset;
    max-height: 250px;
    overflow-y: scroll;
}

#header .idioma.notification-bell ul li{
    position: relative;
    padding-right: 24px;
}

#header .idioma.notification-bell li:hover {
    background-color: #d3d3d34a;
}

#header .idioma.notification-bell ul a.notification-action{
    display: flex;
    color: white !important;
    background: transparent;
    justify-content: center;
    align-items: center;
    width: 21px !important;
    height: 21px !important;
    position: absolute;
    top: 7px;
    right: 7px;
    border-radius: 4px;
}

#header .idioma.notification-bell ul a.dismiss-button{
    background-color: #D01414;
}

#header .idioma.notification-bell ul a.download-button{
    background-color: #019D4A;
}

#header .idioma.notification-bell ul a.notification-action span{
    font-size: 0;
}

#header .idioma.notification-bell ul a.notification-action i{
    font-size: 10px;
}

#header .idioma.notification-bell ul a[data-tooltip]::after{
    width: max-content;
    max-width: none;
    font-weight: normal;
    transform: translate(-30px, 50%);
}

.tabla a[data-tooltip-right]::before,
#header .idioma.notification-bell ul a[data-tooltip-right]::before{
    display: block;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    width: 10px;
    background: #191919;
    clip-path: polygon(0 0, 80% 50%, 0 100%);
    opacity: 0;
    transition: opacity .25s;
}

.tabla a[data-tooltip-right]:hover::before,
#header .idioma.notification-bell ul a[data-tooltip-right]:hover::before{
    opacity: 1;
}

.tabla a[data-tooltip-right]::after{    
    max-width: 240px;
    left: -10px;
}

.tabla a[data-tooltip-right]::before{
    top: 4px;
    bottom: 4px;
    right: auto;
    left: -11px
}

#header > div > div.puntos > a {
    font-size: 0;
    display: inline-block;
}

#header > div > div.puntos > a:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
}

#header .puntos > a:before {
    background: url(icons/sesion-negro.svg) no-repeat;
    background-size: contain;
}

#header .puntos ul {
    top: 30px;
    right: 5%;
    width: 90px;
    z-index: 1;
}

#contenido {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

main {
    margin: 45px 5%;
}





/* Chat */
#chat {
	position: fixed;
	bottom: 0;
	right: calc(5% - 2px);
	width: 25%;
	z-index: 101;
}

#minimizar, #cerrar {
    background: black;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#ver-chat, .chat-abierto #minimizar {
    display: none;
}

.chat-abierto #ver-chat {
    display: block;
}

#minimizar {
    border-radius: 4px 4px 0 0;
    padding: 12px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#minimizar h2 {
    color: white;
    font-size: 15px;
    font-family: 'a_regular';
    font-weight: normal;
}

#maximizar {
    border-radius: 4px 4px 0 0;
    background: black;
    padding: 20px;
}

#cerrar h1 {
    background: url(ui/logo-blanco.png) no-repeat center center;
    background-size: cover;
    font-size: 0;
    display: block;
    height: 17px;
    width: 93px;
    margin: auto;
}

#usuario-chat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: white;
}

#usuario-chat div {
    position: relative;
    margin: 15px 0 5px;
}

#usuario-chat div:after {
    content: '';
    display: block;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

#usuario-chat div.conectado:after {
    background: #2ecc71;
}

#usuario-chat div.desconectado:after {
    background: #d0021b;
}

#usuario-chat img {
    border-radius: 50%;
    max-height: 48px;
}

#usuario-chat h3, #usuario-chat p {
    margin-top: 5px;
    font-size: 13px;
    font-family: 'a_regular';
    font-weight: normal;
}

#lista-chat {
    padding: 15px 15px 0;
    background: white;
    max-height: calc(90vh - 285px);
    overflow: auto;
}

#lista-chat > li {
    margin-bottom: 15px;
}

#lista-chat ul li:not(:first-child) {
    margin-top: 5px;
}

.usuario > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.usuario img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
}

.usuario h3 {
    font-size: 13px;
    font-family: 'a_regular';
}

.usuario p, .respuesta p, .respuesta .img, .respuesta .quick_reply_options, .respuesta .list-menu {
    padding: 5px 15px;
    border-radius: 4px;
    width: 70%;
    font-size: 13px;
}

.usuario p {
    background-color: #e3e7e8;
    margin: 0 0 0 35px;
}

.respuesta p, .respuesta .img {
    background-color: #fafafa;
    margin-left: auto;
}

.respuesta .list-menu,
.respuesta .quick_reply_options{
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.respuesta .list-menu button,
.respuesta .quick_reply_options button{
    text-align: center;
    padding: 5px;
    border-radius: 4px;
    color: black;
    background: #FAFAFA;
    font-size: 13px;
    outline: none;
    border: 1px solid #E1E5E8;
    cursor: pointer;
}

.respuesta .list-menu button span{
    display: inline-block;
    padding-left: 1.2em;
    background: url('icons/bot-zero-menu.svg') left center/.98em no-repeat;
}

.respuesta .list-menu button.selected,
.respuesta .quick_reply_options button.not-selected,
.respuesta .quick_reply_options button.selected{
    pointer-events: none;
    cursor: default;
}
.respuesta .quick_reply_options button.not-selected{
    color: #AAADB0;
}

.respuesta .list-menu button.selected,
.respuesta .quick_reply_options button.selected{
    color: #418C6E;
    border-color: #418C6E;
    background: #E3F7F0;
}

.respuesta .error-response{
    background: #FFF5F5;
    color: #B90D0D;
}

.respuesta .img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.usuario > span {
    font-size: 13px;
    margin: 5px 0 0 35px;
}

.respuesta > span {
    font-size: 13px;
    margin: 5px 0 0 auto;
    display: block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

.respuesta .img span {
    font-size: 11px;
}

.respuesta .img img {
    width: 40px;
    height: 40px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
}

.respuesta .img div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

#chat-cloned .options-modal,
#chat .options-modal{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.56);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    opacity: 0;
    transition: .3s;
    overflow: hidden;
}

#chat-cloned .options-modal .options-modal-inner,
#chat .options-modal .options-modal-inner{
    max-height: 60%;
    width: 96%;
    box-sizing: border-box;
    background: white;
    border-radius: 15px 15px 0 0;
    padding: 20px 0 0;
    transform: translateY(100%);
    transition: .3s
}

#chat-cloned .options-modal.show,
#chat .options-modal.show{
    opacity: 1;
}

#chat-cloned .options-modal .options-modal-inner.show,
#chat .options-modal .options-modal-inner.show{
    transform: translateY(0%);
}

#chat-cloned .options-modal .options-modal-inner ul,
#chat .options-modal .options-modal-inner ul{
    margin: 1.5em 0;
}

#chat-cloned .options-modal .options-modal-inner .options-modal-inner-header,
#chat .options-modal .options-modal-inner .options-modal-inner-header{
    display: flex;
    padding: 0 15px;
}

#chat-cloned .options-modal .options-modal-inner .options-modal-inner-header a,
#chat .options-modal .options-modal-inner .options-modal-inner-header a{
    display: block;
    width: 20px;
    text-indent: -500px;
    overflow: hidden;
    background: url(icons/quitar.svg) center/13px no-repeat,
                url(icons/quitar-n.svg) center 400px/13px no-repeat;
}

#chat-cloned .options-modal .options-modal-inner .options-modal-inner-header a:hover,
#chat .options-modal .options-modal-inner .options-modal-inner-header a:hover{
    background-position: center 400px, center center;
}

#chat-cloned .options-modal .options-modal-inner .options-modal-inner-header b,
#chat .options-modal .options-modal-inner .options-modal-inner-header b{
    display: block;
    padding: 6px;
    text-transform: uppercase;
    text-align: center;
    width: calc( 100% - 40px );
    margin: auto;
}

#chat-cloned .options-modal .options-modal-inner input[type=radio],
#chat .options-modal .options-modal-inner input[type=radio]{
    display: none;
}

#chat-cloned .options-modal .options-modal-inner label,
#chat .options-modal .options-modal-inner label{
    border-top: 1px solid #DFDFDF;
    display: block;
    padding: 5px 35px 5px 15px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    color: #BBB;
    background: url(icons/flat-dot.svg) right 30px center/1em no-repeat;
}

#chat-cloned .options-modal .options-modal-inner input[type=radio]:checked + label,
#chat .options-modal .options-modal-inner input[type=radio]:checked + label{
    color: #418C6E;
    background-image: url(icons/seleccionar-no.svg);
}

#chat-cloned .options-modal .options-modal-inner button,
#chat .options-modal .options-modal-inner button{
    display: block;
    padding: 8px 15px;
    border: none;
    border-top: 1px solid #DFDFDF;
    border-bottom: 1px solid #DFDFDF;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    color: #CCC;
    cursor: pointer;
}

#chat-cloned .options-modal .options-modal-inner button.selected,
#chat .options-modal .options-modal-inner button.selected{
    color: #418C6E;
    border-top: 1px solid #E3F7F0;
    border-bottom: 1px solid #E3F7F0;
}

#chat-cloned form ,
#chat form {
    background: white;
    padding: 15px 25px;
    border-top: solid 1px #e9ebf2;
}

#chat-cloned form, #chat form div,
#chat form, #chat form div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

#chat-cloned form textarea,
#chat form textarea {
    font-size: 13px;
    border: none;
    width: 100%;
    overflow: hidden;
    display: block;
    height: 21px;
}

#chat-cloned form textarea::-webkit-input-placeholder,
#chat form textarea::-webkit-input-placeholder {
    color: #9bacb0;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#chat-cloned form textarea::-moz-placeholder,
#chat form textarea::-moz-placeholder {
    color: #9bacb0;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#chat-cloned form textarea:-ms-input-placeholder,
#chat form textarea:-ms-input-placeholder {
    color: #9bacb0;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#chat-cloned form textarea::placeholder,
#chat form textarea::placeholder {
    color: #9bacb0;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#chat-cloned form label,
#chat form label, #enviar {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
}

#chat-cloned form label,
#chat form label {
    background: url(icons/adjuntar.svg) no-repeat center center;
    background-size: 18px;
    margin-left: 10px;
}

#chat-cloned form label input,
#chat form label input {
    display: none;
}

#enviar {
    border: none;
    background: url(icons/enviar.svg) no-repeat center center;
    background-size: 14px;
    margin-left: 20px;
    font-size: 0;
}

#chat-cloned #maximizar #cerrar > *,
#chat-cloned #enviar{
    font-size: 0 !important;
}
/* Cargar imagen */
.cargar-imagen {
    width: 35%;
    position: relative;
}

.cambiar-img {
    position: relative;
    line-height: 0;
}

.cambiar-img img {
    width: 100%;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.background-cambiar {
    background-color: rgba(0, 0, 0, .9);
    padding: 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.background-cambiar label {
    cursor: pointer;
}

.background-cambiar input {
    display: none;
}

.background-cambiar span {
    color: white;
}

.background-cambiar span:hover {
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.background-cambiar .borrar:before {
    background: url(icons/borrar-b.svg) no-repeat center center;
    background-size: 14px;
    width: 14px;
    height: 17px;
}

/* Droppear */
.droppear {
	background: #fafafa;
	width: 100%;
	height: 300px;
	border-radius: 4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.droppear input {
    display: none;
}

.droppear label:before {
    content: '';
    background: #e3e7e8 url(icons/subir.svg) no-repeat center center;
    background-size: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.droppear label span {
    color: #9bacb0;
    text-align: center;
    width: 60%;
    display: block;
    margin: auto;
    font-size: 13px;
}

/* Notificaciones */
.notificacion {
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.notificacion > div {
    padding: 8px 0;
    width: 50%;
    margin: 5% auto 0;
    text-align: center;
}

.fondo-rojo {
    border-radius: 4px;
    background-color: #d0021b;
}

.fondo-rojo p, .fondo-verde p {
    color: white;
}

.fondo-verde {
	border-radius: 4px;
	background-color: var(--pbx-dark-green);
}

/* Formularios */
.input {
    padding: 6px 12px;
    background: none;
    border: solid 1px #e1e5e8;
    color: #404546;
}

.input.error {
    border: solid 1px #d0021b;
}

.input::-webkit-input-placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    color: #9bacb0;
}

.input::-moz-placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    color: #9bacb0;
}

.input:-ms-input-placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    color: #9bacb0;
}

.input::placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    color: #9bacb0;
}

textarea {
    font-family: 'a_regular';
    font-size: 13px;
    line-height: 1.6;
    resize: none;
}

textarea.resizable{
    min-height: 74px;
    resize: vertical;
}

select {
    width: 100%;
    display: block;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: url(icons/mas-negro.svg);
    background-repeat: no-repeat, repeat;
    background-position: right 12px bottom 4px;
    background-size: 20px auto, 100%;
    padding: 6px 12px;
    border: solid 1px #e1e5e8;
    color: #404546;
}

form .fake-input .input,
form .fake-input, form input:not(.btn-verde):not(.buscar) , form textarea {
    width: 100%;
    display: block;
    background-size: 20px auto, 100%;
    padding: 6px 12px;
    border: solid 1px #e1e5e8;
    color: #404546;
}

form .file-selector{
    display: flex;
    border: none;
    padding: 0;
}

form .file-selector .input{
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    user-select: none;
}

form .file-selector .input + a{
    background: #E35A3E url(icons/quitar-b.svg) center/1em no-repeat;
    color: white;
    border: none;
    height: 100%;
    aspect-ratio: 1;
    text-indent: -400px;
    display: block;
    width: 1.8lh;
    overflow: hidden;
}

form .file-selector .input + a.disabled{
    filter: grayscale(1);
    pointer-events: none;
}

form .file-selector .input + a:hover{
    background-color: #E8644B;
}

form input#showAgentsContactMe{
    width: auto;
    display: inline-block;
}

form input.btn-gris.quitar:not(.btn-verde):not(.buscar),
form input[type=checkbox]:not(.btn-verde):not(.buscar){
    display: inline-block;
    width: inherit;
}

.panel-header,
.panel-contents{
    padding: 8px 15px;
}

.panel-header{
    margin-top: 1.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #EDEDED;
}

.panel-header h3{
    font-size: 1rem;
    font-weight: normal;
    font-family: 'a_regular_semibold';
    color: #222;
}

.panel-toggle{
    text-indent: -500px;
    overflow: hidden;
    width: 40px;
}

.panel-toggle.arrow{
    background: url(icons/bajar.svg) center/12px no-repeat;
}

.panel-toggle-expanded{
    transform: rotate(180deg);

}

.panel-contents{
    height: 0;
    overflow: hidden;
    border: 1px solid transparent;
    padding-top: 0;
    padding-bottom: 0;
}

.panel-contents-expanded{
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    border-color: #EDEDED;
}

.checkbox, .radio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radio {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
}

.checkbox > span.texto, .radio > span.texto {
    margin-left: 20px;
    line-height: initial;
    color: #9bacb0;
}

.checkbox input, .radio input {
    position: absolute;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    cursor: pointer;
    height: 0;
    width: 0;
}

.radio .check {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background: url(icons/flat-dot.svg) no-repeat center center;
    background-size: 15px;
}

.radio input:checked ~ .check {
    background: url(icons/dot.svg) no-repeat center center;
}

.checkbox input:checked ~ .check {
    background: url(icons/checked.svg) no-repeat center center;
}

.checkbox input:checked ~ .texto {
    color: black;
}

.checkbox .unchecked {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background: url(icons/check.svg) no-repeat center center;
}

.checkbox .check {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    box-shadow: -1px 1px 4px 0 rgba(0, 0, 0, 1);
    background: url(icons/check.svg) no-repeat center center;
}

form input[type=checkbox].raw{
    width: auto !important;
}


.search {
    box-shadow: -1px 1px 4px 0 rgba(55, 70, 95, 0.12);
    border-radius: 4px 0 0 4px;
    position: relative;
    display: flex;
}
.search.search-with-gap {
    gap: 5px;
}

.search .field-group{
    flex: 1;
    display: flex;
}

.search .field-group .checkbox{
    flex: 1;
    padding-left: 2.5em;
    background: url(./icons/check.svg) .75em center/1.2em no-repeat;
}

.search .field-group :checked + .checkbox{
    flex: 1;
    padding-left: 2.5em;
    background-image: url(./icons/checked.svg);
}

.search .field-group.buscador{
    padding: 0;
}

.search .field-group label{
    display: flex;
    align-items: center;
    background: #F5F5F5;
    padding: 6px 12px;
    border: solid 1px #e1e5e8;
    color: #404546;
    padding: 0 9px;
    white-space: nowrap;
}


.buscador {
    border: 0;
    background-color: #ffffff;
    padding: 8px 18px;
    width: 100%;
    border-radius: 4px 0 0 4px;
}

.buscar {
	border: none;
	background: var(--pbx-dark-green) url(icons/buscar.svg) no-repeat center center;
	background-size: 18px;
	width: 18px;
	font-size: 0;
	padding: 0 25px;
	border-radius: 0 4px 4px 0;
	height: 36px;
}

.title-select{
    border: none;
    display: inline-block;
    width: auto;
    flex: none;
    font-family: 'a_regular_bold';
    padding-right: 1.5em;
    letter-spacing: .3px;
    line-height: 1.42857143;
    color: #333;
    font-size: 1.17em;
    background-position: right center;
}

.title-select option{
    font-family: 'a_regular';
}

.chart-container{
    background: #FFFFFF;
    padding: 10px 20px;
    border: 1px solid #ededed;
    border-radius: 4px;
}

.none {
    display: none !important;
}

/* Tablas */
.tabla {
    position: relative;
}

.tabla table {
    width: 100%;
    margin-bottom: 30px;
    border-collapse: collapse;
}

.tabla th {
    color: #9b9eac;
    font-weight: normal;
    text-align: left;
    padding: 12px 0;
    position: relative;
}

#table_queues th, #table_departments th {
    border: 1px solid white;
}

#table_queues thead, #table_departments thead {
    background: #f2f2f2;
}

.btn:hover, .btn:focus, .btn.focus {
    color: white!important;
}

.btn.btn-xs {
    padding: 2px 5px 0px 5px;
}

.tabla tr th a, thead .imagen, thead .llamadas, thead .preguntas, thead .borrar, thead .estilos, thead .copiar, thead .editar, thead .qr, thead .ver, thead .metricas, thead .obtener, thead .agent-group, thead .queue-group, thead .department-group, thead .btn-click {
    font-size: 0;
}

.tabla th div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.tabla th div.text-center{
    justify-content: center;
}

.tabla tbody {
    box-shadow: none;
    border-bottom: 1px solid #e7ecec;
}

.tabla tbody:hover {
    background: #f5f6f9;
}

table td {
    position: relative;
}

.tabla td.borrar > div {
    position: relative;
}

.tabla td.borrar .modal-borrar {
    bottom: 45px;
    right: 0;
}

.tabla .preguntas, .tabla .borrar, .tabla .estilos, .tabla .copiar, .tabla .editar, .tabla .ver, .tabla .metricas, .tabla .obtener, .tabla .qr, .tabla .agent-group, .tabla .queue-group, .tabla .department-group {
    width: 5%;
    margin: auto;
}

.tabla .imagen img, .tabla .imagen span, .tabla .llamadas span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: auto;
    display: block;
}

.tabla .imagen img {
    -o-object-fit: cover;
    object-fit: cover;
}

.tabla .llamadas.entrantes span {
    background: var(--pbx-dark-green) url(icons/entrante.svg) no-repeat center center;
    background-size: 18px;
}

.tabla .llamadas.salientes span {
    background: var(--pbx-dark-green) url(icons/saliente.svg) no-repeat center center;
    background-size: 18px;
}

.tabla .imagen span, .tabla .llamadas span {
    font-size: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.tabla .imagen span {
    background-color: #ffe03b;
}

.tabla tbody:nth-child(n) .imagen span {
    background-color: #ffe03b;
}

.tabla tbody:nth-child(2n) .imagen span {
    background-color: #c7cfd1;
}

.tabla tbody:nth-child(3n) .imagen span {
    background-color: #ffbd48;
}

.tabla tbody:nth-child(4n) .imagen span {
    background-color: #0c9aed;
}

.tabla .imagen span:before {
    content: attr(data-iniciales);
    font-size: 11px;
    color: white;
    text-transform: uppercase;
}

.tabla tbody tr:not(:last-child) {
    border-bottom: 1px solid #e7ecec;
}

.tabla table td {
    padding: 8px;
    font-size: 13px;
}

.tabla table td.correo a {
    color: #9bacb0;
}

.tabla table td li {
    font-size: 13px;
}

.tabla td.qr a.qr,.tabla td.editar a.editar, .tabla td.preguntas a.preguntas, .tabla td.borrar a.borrar,.tabla td.borrar a.eliminar,.tabla td.estilos a.estilos, .tabla td.copiar a.copiar, .tabla td.ver a.ver, .tabla td.metricas a.metricas, .tabla td.obtener a.obtener, a.download, .tabla td.agent-group a.agent-group, .tabla td.queue-group a.queue-group, .tabla td.department-group a.department-group {
    width: 30px;
    height: 30px;
    background-color: #fafafa;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.numeracion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 30px;
}

.numeracion li {
    background: white;
    margin-right: 10px;
}

.numeracion li:first-child, .numeracion li:last-child {
    background: var(--pbx-grey);
}

.numeracion li a {
    padding: 5px;
    border: 1px solid #e1e1e1;
    font-family: 'a_regular_bold';
    min-width: 27px;
    height: 27px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.numeracion li a.seleccionado, .numeracion li a:hover {
    background: #f5f6f9;
}

.anterior:before {
    width: 20px;
    height: 20px;
    background: url(icons/contraer.svg) no-repeat center center;
    background-size: 20px;
}

.siguiente:before {
    width: 20px;
    height: 20px;
    background: url(icons/expandir.svg) no-repeat center center;
    background-size: 20px;
}

.numeracion li .anterior:hover, .numeracion li .siguiente:hover {
    background: var(--pbx-dark-green);
}

/* Calendario */

/* UI CSS */
.gr-calendar{
    --gr-calendar-border-color: none;

    --gr-calendar-dayrow-background: #B3B7B8;

    --gr-calendar-prevmonth-day-background: white;
    --gr-calendar-prevmonth-day-color: #ACB6B7;
    --gr-calendar-nextmonth-day-background: white;
    --gr-calendar-nextmonth-day-color: #ACB6B7;

    --gr-calendar-prevnext-background: #F2F4F1;
    --gr-calendar-prevnext-color: #3D4B4C;

    --gr-calendar-firstday-background: var(--pbx-dark-green);
    --gr-calendar-firstday-color: #eeeeee;
    --gr-calendar-lastday-background: var(--pbx-dark-green);
    --gr-calendar-lastday-color: #eeeeee;
    --gr-calendar-rangeday-background: white;
    --gr-calendar-rangeday-color: #516063;

    --gr-calendar-today-background: none;
    --gr-calendar-today-color: black;
}

.gr-calendar{
    font-family: Arial;
}

.gr-calendar th{
    padding: 5px;
}

.gr-calendar th span,
.gr-calendar td span{
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 25px;
    width: 25px;
}

/* GRID */
.gr-calendar{
    border-collapse: collapse;
}

.gr-calendar a{
    text-decoration: none;
}

.gr-calendar-close {
    display: none;
}

.gr-calendar th,
.gr-calendar td{
    font-size: 11px;
    border: 1px solid var( --gr-calendar-border-color );
    border: none;
    padding: 3px;
}

.gr-calendar td span {
    font-size: 11px;
}

.gr-calendar th[colspan]{
    width: auto;
}

.gr-calendar .gr-calendar-prevmonth-day{
    background: var( --gr-calendar-prevmonth-day-background );
    color: var( --gr-calendar-prevmonth-day-color );
}

.gr-calendar .gr-calendar-nextmonth-day{
    background: var( --gr-calendar-nextmonth-day-background );
    color: var( --gr-calendar-nextmonth-day-color );
}

.gr-calendar .gr-calendar-currmonth-day{
    background: var( --gr-calendar-currmonth-day-background );
    color: var( --gr-calendar-currmonth-day-color );
}

.gr-calendar th span,
.gr-calendar td span{
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.gr-calendar td span{
    cursor: default;
}

.gr-calendar th span{
    cursor: pointer;
}

.gr-calendar .gr-table-header-prev a span,
.gr-calendar .gr-table-header-next a span{
    background-color: var( --gr-calendar-prevnext-background );
    color: var( --gr-calendar-prevnext-color );
}

.gr-calendar .gr-calendar-dayrow th{
    color: var( --gr-calendar-dayrow-background );
}

.gr-calendar td.gr-calendar-firstday span{
    background: var( --gr-calendar-firstday-background );
    color: var( --gr-calendar-firstday-color );
}

.gr-calendar td.gr-calendar-lastday span{
    background: var( --gr-calendar-lastday-background );
    color: var( --gr-calendar-lastday-color );
}

.gr-calendar td.gr-calendar-rangeday span{
    background: var( --gr-calendar-rangeday-background );
    color: var( --gr-calendar-rangeday-color );
    position: relative;
}

.gr-calendar td.gr-calendar-rangeday span:after{
    content: '';
    position: absolute;
    bottom: 3px;
    left: calc( 50% - 1.5px );
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var( --gr-calendar-rangeday-color );
}

.gr-calendar td.gr-calendar-today span{
    background: var( --gr-calendar-today-background );
    color: var( --gr-calendar-today-color );
}

#gr-calendar-modal-div{
    background: white;
    border: 1px solid #F5F6F7;
    box-shadow: 0 0 9px rgba( 0,0,0,.12);
    display: inline-block;
    padding: 1em;
    position: absolute;
    right: 0;
    top: 3em;
    z-index: 3;
}


input.toggle{
    display: none !important;
}

input.toggle + label{
    background: var(--toggle-background); /*url(icons/palanca-v.svg);*/
    background-size: 30px;
    border-radius: .8em;
    color: var(--toggle-text);
    cursor: pointer;
    display: block;
    filter: grayscale(1) opacity(0.8);
    margin: 0 .5em;
    padding: .3em calc( 1.75em + 7px );
    position: relative;
    transition: filter 0.25s linear .14s;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

input.toggle + label::before{
    background: var(--toggle-marker);
    border-radius: 50%;
    content: '';
    display: block;
    height: 1.1em;
    left: 0.5em;
    position: absolute;
    top: 0.3em;
    transition: left 0.25s cubic-bezier(0.6, -0.18, 0.735, 0.045);
    width: 1.1em;
}

input.toggle:checked + label{
    filter: grayscale(0) opacity(1);
}

input.toggle:checked + label::before{
    left: calc( 100% - 1.6em );
}
input.toggle:checked:disabled + label,
input[disabled].toggle:checked + label{
    filter: grayscale(1)
}

input.toggle.notext + label{
    overflow: hidden;
    padding-left: 1.6em;
    padding-right: 1.6em;
    text-indent: -400px;
}

.user-row{
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-row .user-form {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
}

.user-row .user-form .col-md-6 {
    flex: 1;
}

.user-row .user-form label,
.user-row .user-form span {
    display: inline-block;
}

.dropdown-chat-zoom{
    white-space: nowrap;
}

/* TABLET */
@media ( max-width: 1023px ) {
    main {
        margin: 30px;
        min-height: 100vh;
    }

    /* Header buscador */
    .header-buscador form > div:first-child a {
        font-size: 0;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        padding: 0;
    }

    .header-buscador form > div:first-child a:before {
        content: '+';
        font-size: 20px;
        color: white;
        font-weight: bold;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 35px;
    }

    .csv {
        margin-right: 15px;
    }

    #subir-agentes div input {
        margin-left: 15px;
    }

    /* Chat */
    #chat {
        width: 40%;
        right: 30px;
    }

    /* Notificaciones */
    .notificacion > div {
        width: 70%;
    }

    .dropdown-chat-zoom{
        white-space: normal;
    }
}

.warning{
    background: #FFF7ED;
    color: #764005;
    padding: 3px 6px;
    font-size: .6em;
    line-height: 1.6em;
    letter-spacing: 0.4px;
    margin-top: 2px;
}

.alert-floating{
    position: absolute;
    width: 87%;
    transform: translateY(-45px);
    padding-top: 10px;
    padding-bottom: 10px;
}

.estado label.disabled{
    pointer-events: none;
    opacity: 0.8;
    filter: grayscale(1);
}

.preloader{
    flex-direction: column;
}

.preloader-text:empty{
    display: none;
}

.preloader-text{
    margin-top: 50px;
    color: #9bacb0;
    font-size: 14px;
    line-height: 18px;
    font-family: 'a_regular';
    text-align: center;
}

/* MOBILE */
@media ( max-width: 767px ) {


    main {
        margin: 30px 30px 74px;
    }

    .numeracion {
        margin-top: 30px;
    }

    #contenido {
        min-height: 100%;
    }

    /* Header con buscador */
    .header-buscador form > div:first-child {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        -ms-grid-row-align: flex-start;
        align-items: flex-start;
        margin-bottom: 30px;
    }

    .header-buscador form > div:first-child a {
        position: absolute;
        width: 30px;
        height: 30px;
        right: 30px;
    }

    .header-buscador form > div:first-child a:before {
        height: 30px;
    }

    .header-buscador .search {
        width: 100%;
        margin-top: 30px;
    }

    /* Header */
    #header  > div.abrir {
        margin-left: auto;
        width: calc(100% - 120px);
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

	#header .idioma > a {
		width: 36px;
		margin-right: 20px;
	}

    /* Chat */
    #lista-chat {
        max-height: calc(85vh - 285px);
    }

    /* Notificaciones */
    .notificacion > div {
        width: 90%;
    }

    div[data-id='bubble'] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .5);
        z-index: 2;
    }

    .bubbles ul, .modal-borrar {
        position: fixed;
        z-index: 1;
        left: 0;
        border-radius: 25px 25px 0 0;
        border: 0;
        box-shadow: 0 2px 14px 0 rgba(209, 209, 209, 0.5);
    }

    .bubbles ul li {
        text-align: center;
        padding: 20px 0;
        border-bottom: 1px solid #e9ebf2;
    }

    .bubbles ul li:last-child {
        border-bottom: 0;
    }

    .bubbles ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        top: initial !important;
        right: initial;
        bottom: 0;
        width: 100% !important;
    }

    /* Botones */
    #botones {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    #botones .btn-gris {
        margin: 30px 0 0;
    }

    /* Modal borrar */
    .modal-borrar {
        bottom: 0 !important;
        width: 100%;
    }

    .modal-borrar p {
        display: none;
    }

    .modal-borrar .botones {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
        margin-top: 0;
    }

    .modal-borrar .botones a {
        width: 100%;
        padding: 20px 0;
        text-transform: initial;
    }

    .modal-borrar .botones a span {
        display: block;
        margin-left: 5px;
    }

    .modal-borrar .botones a:first-child {
        margin-right: 0;
    }

    .modal-borrar .botones a:last-child {
        border-bottom: 1px solid #dadada;
    }

    .modal-borrar .btn-gris {
        background: none;
        color: #66696a;
    }

    .modal-borrar .btn-rojo {
        background: none;
        color: #d01414;
    }

    /* Chat */
    #chat {
        width: 100%;
        right: 0;
        z-index: 0;
    }

    /* Tablas */
    .tabla tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .tabla thead {
        display: none;
    }

    .tabla tbody {
        display: block;
        margin-bottom: 20px;
        padding: 7px 15px;
        position: relative;
    }

    .tabla tbody:last-child {
        margin-bottom: 0;
    }

    .tabla .imagen {
        display: block;
        width: 56px;
        padding-bottom: 0;
    }

	.tabla td.borrar > div {
		position: fixed;
	}

	.tabla table {
		margin-bottom: 0px;
	}

    .dropdown-chat-zoom{
        white-space: nowrap;
    }

    .export-text {
        display: none;
    }
}

@media ( max-width: 480px ) {
	footer {
		margin-left: 50px;
		width: 75%;
	}
}

textarea[readonly],
input[readonly]{
    background: #efefef;
    color: #AAA;
}

/* MARGIN INIT */
.mt-0 {
    margin-top: 0;
}
.mt-1 {
    margin-top: .5em;
}
.mt-2 {
    margin-top: 1em;
}
.mt-3 {
    margin-top: 1.5em;
}
.mt-4 {
    margin-top: 2em;
}
.mt-5 {
    margin-top: 2.5em;
}
.mb-0 {
    margin-bottom: 0;
}
.mb-1 {
    margin-bottom: .5em;
}
.mb-2 {
    margin-bottom: 1em;
}
.mb-3 {
    margin-bottom: 1.5em;
}
.mb-4 {
    margin-bottom: 2em;
}
.mb-5 {
    margin-bottom: 2.5em;
}
.mr-0 {
    margin-right: 0;
}
.mr-1 {
    margin-right: .5em;
}
.mr-2 {
    margin-right: 1em;
}
.mr-3 {
    margin-right: 1.5em;
}
.mr-4 {
    margin-right: 2em;
}
.mr-5 {
    margin-right: 2.5em;
}
.ml-0 {
    margin-left: 0;
}
.ml-1 {
    margin-left: .5em;
}
.ml-2 {
    margin-left: 1em;
}
.ml-3 {
    margin-left: 1.5em;
}
.ml-4 {
    margin-left: 2em;
}
.ml-5 {
    margin-left: 2.5em;
}
/* MARGIN END*/
/* PADDING INIT */
.pt-0 {
    padding-top: 0;
}
.pt-1 {
    padding-top: .5em;
}
.pt-2 {
    padding-top: 1em;
}
.pt-3 {
    padding-top: 1.5em;
}
.pt-4 {
    padding-top: 2em;
}
.pt-5 {
    padding-top: 2.5em;
}
.pb-0 {
    padding-bottom: 0;
}
.pb-1 {
    padding-bottom: .5em;
}
.pb-2 {
    padding-bottom: 1em;
}
.pb-3 {
    padding-bottom: 1.5em;
}
.pb-4 {
    padding-bottom: 2em;
}
.pb-5 {
    padding-bottom: 2.5em;
}
.pr-0 {
    padding-right: 0;
}
.pr-1 {
    padding-right: .5em;
}
.pr-2 {
    padding-right: 1em;
}
.pr-3 {
    padding-right: 1.5em;
}
.pr-4 {
    padding-right: 2em;
}
.pr-5 {
    padding-right: 2.5em;
}
.pl-0 {
    padding-left: 0;
}
.pl-1 {
    padding-left: .5em;
}
.pl-2 {
    padding-left: 1em;
}
.pl-3 {
    padding-left: 1.5em;
}
.pl-4 {
    padding-left: 2em;
}
.pl-5 {
    padding-left: 2.5em;
}

/* DISPLAY START */
.d-none
{
    display: none;
}
.d-flex
{
    display: flex;
}
.d-block
{
    display: block;
}
.d-inline-table
{
    display: inline-table;
}
/* DISPLAY END */

.select2-container .select2-selection--single {
    height: 34px;
}

.select2-container--open {
    z-index: 99;
}

/* Padding */
.p-0
{
    padding: 0 !important;
}

.font-bold {
    font-weight: bold;
}

.font-bolder {
    font-weight: bolder;
}

.font-normal {
    font-weight: normal;
}

.font-lighter {
    font-weight: lighter;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}
/* Text Colors */
.text-success {
    color: #a5c439;
}

.text-danger {
    color: red;
}

.text-white {
    color: white;
}
/* Text Colors */

/* Bg Colors */
.bg-white {
    background: white;
}
/* Text Colors */

/* Dropdown */

.btn.dropdown-toggle {
    box-shadow: none;
}

.btn.dropdown-toggle:hover {
    color: white!important;
    box-shadow: none;
    text-decoration: none;
}

.dropdown-menu {
    padding: .1em .5em;
}

.dropdown-item:hover {
    background: #f0f0f0;
}

.dropdown-item {
    padding: .5em .5em;
    display: block;
    text-decoration: none!important;
}
/* Dropdown */

/* Width */
.w-25 {
    width: 25%;
}

.w-50 {
    width: 50%;
}

.w-100 {
    width: 100% !important;
}
/* Width */

/* Button WA */
.btn-button-wa {
    padding: 0.1em 3em !important;
    color: #6868ef !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    border-color: seashell !important;
    text-transform: unset !important;
}
/* Button WA */

.input-button-group{
    display: flex;
    gap: 6px;
}

.input-button-group .group-button{
    white-space: nowrap;
    padding: 0 30px;
    border-radius: 5px;
    background: #019D4A none 5px center/19px no-repeat;
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 12px;
}

.input-button-group .group-button.disabled{
    background-color: #343A40;
    cursor:default !important;
}

.input-button-group .group-button.button-download.loading{
    background-color: #678174;
    background-image: url(icons/loading-circle-white.svg);
}

.checkbox-cc {
    height: 2em;
    width: 2em;
}

.checkbox-cc-15 {
    height: 1.5em;
    width: 1.5em;
}

.switch-view {
    height: 35px;
    display: inline-flex;
}

.radio {
    width: 18px!important;
    height: 18px;
}

/* RT-COMPONENT */
.agent-card {
    margin-bottom: 0.5em;
    font-size: .9em;
    min-height: 195px;
    padding: 0 0.3em !important;
}

.agent-card .agent-status {
    height: 95px;
}

.agent-card .agent-status-main {
    height: 110px;
}

.agent-card .agent-card-inner {
    background: white;
    padding: .8em 1em;
    box-shadow: 0 4px 16px 0 rgba(58, 70, 93, 0.08), -1px 1px 4px 0 rgba(58, 70, 93, 0.12) !important;
    display: flex;
    flex-direction: column;
}

.agent-card .agent-card-inner .call-counters,
.agent-card .agent-card-inner .chat-counters{
    overflow: auto;
    font-size: 13px;
}

.agent-card .agent-card-inner .call-counters + .chat-counters{
    margin-top: .5em;
}

.agent-card .agent-card-inner.min-height {
    min-height: 388px;
}

.agent-card .agent-card-inner hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

.agent-title {
    display: flex;
}

.agent-title img {
    width: 2.3em;
    border-radius: 18px;
}

.agent-title img {
    width: 2.3em;
    border-radius: 18px;
    height: 2.3em;
}

.agent-status p {
    display: inline-block;
    min-height: 18px;
    width: 100%;
    font-size: 12px;
    word-break: break-word;
    hyphens: auto;
}
.agent-status p:has( small:empty){
    display:none
}

.agent-status-icon, .agent-call-break-icon {
    font-size: 1.72em;
    width: 35px !important;
    height: 21px !important;
    display: inline-block;
    margin-bottom: 0;
}

.agent-chat-icon-number-container {
    width: 35px !important;
    height: 24px !important;
}

.agent-chat-icon {
    font-size: 1.8em;
    display: inline-block;
    margin-bottom: 0.3em;
    color: black;
}

.agent-chat-counter {
    position: absolute;
    left: 0.53em;
    top: 0.2em;
    font-weight: 900;
    color: #7d9e9e;
    border-radius: 5em;
    min-width: 22px;
    text-align: center;
    max-height: 20px;
}

.agent-chat-counter.bg-darkgray {
    background: #7d9e9e;
}

.agent-chat-counter.bg-green {
    font-size: 13px;
    height: 18px;
    background: #b9db42;
    color: #545353;
}

.agent-status-icon.fa.fa-coffee, .agent-status .fa.fa-coffee {
    color: #d71a1a;
}

.texto-gris .agent-status-icon.fa.fa-coffee, .agent-status .texto-gris .fa.fa-coffee {
    color: #C4C4C4;
}

.agent-card .agent-name {
    height: 13px;
    display: inline-block;
    overflow: hidden;
    font-size: 12px;
}

.agent-card .agent-number {
    font-size: 12px;
}

.agent-talking-time .agent-chronometer,
.agent-logged-time .agent-chronometer,
.agent-row-times .agent-chronometer,
.agent-status-main .agent-chronometer
{
    font-size: 10px;
}

.agent-talking-time .agent-chronometer span,
.agent-talking-time .agent-chronometer i,
.agent-logged-time .agent-chronometer span,
.agent-logged-time .agent-chronometer i,
.agent-status-main .agent-chronometer span,
.agent-status-main .agent-chronometer i,
.agent-row-times .agent-chronometer span,
.agent-row-times .agent-chronometer i
{
    font-size: 10px;
}

.agent-status-description {
    line-height: 0.5 !important;
    font-size: 11px;
}

/*  ICONS */
.fa.fa-outgoing-call {
    background: url(icons/outgoing-call-svgrepo-com.svg) no-repeat center center;
    background-size: contain;
}

.fa.fa-incoming-call {
    background: url(icons/incoming-call-svgrepo-com.svg) no-repeat center center;
    background-size: contain;
}

.fa.fa-outgoing-call.other-queue-call{
    background-image: url(icons/outgoing-call-other-queue.svg);
}

.fa.fa-incoming-call.other-queue-call{
    background-image: url(icons/incoming-call-other-queue.svg);
}

.fa.fa-agent-available {
    background: url(icons/agentes-b.svg) no-repeat center center;
    background-size: contain;
}

td i.fa.fa-incoming-call, td i.fa.fa-outgoing-call,  td i.fa.fa-agent-available  {
    width: 14px;
    height: 13px;
}

.table-view-container .fas.fa-phone-slash, .card-view-container .fas.fa-phone-slash {
    color: gray;
}

.agent-row-time .agent-chronometer, .agent-logged-time .agent-chronometer {
    text-align: left;
}
.agent-status-time .agent-chronometer {
    text-align: center;
}


.iconos[data-tooltip],
[data-tooltip]{
    position: relative;
}

.iconos[data-tooltip]::after,
[data-tooltip]::after{
    position: absolute;
    bottom: 5527px;
    content: attr(data-tooltip);
    font-size: 10px;
    line-height: 14px;
    padding: 5px 10px;
    max-width: 140px;
    background: #191919;
    color: white;
    opacity: 0;
    border-radius: 3px;
    transition: opacity .25s;
}

.iconos[data-tooltip]:hover::after,
[data-tooltip]:hover::after{
    opacity: 1;
    bottom: 27px;
}

[data-tooltip]:not(.iconos)::after{
    max-width: 80%;
    width: max-content;
    left: 50%;
    transform: translateX(-50%);
}

[data-tooltip-right]:not(.iconos)::after{
    bottom: 50%;
    left: auto;
    right: 0;
    transform: translate(-100%, 50%);
}


.iconos[data-tooltip-left]::after{
    bottom: 50%;
    left: 0;
    transform: translate(-100%, 50%);
}

.tabla [data-tooltip]:not(.iconos)::after{
    max-width: none;
    text-transform: none;
}

.modal-buttons-actions {
    right: 0.7em;
    width: 130px;
    font-size: .9em;
    padding: 0.5em 0;
}

.modal-buttons-actions button:hover {
    background: #80808014;
    text-decoration: none;
}

.modal-buttons-actions button {
    padding: .5em .5em;
}

.text-black {
    color: black;
}

#hangup_call {
    padding: 0.2em 0.5em;
    margin-left: 0.6em;
    height: 24px;
    background: #d71a1a;
}

#hangup_call i {
    font-size: .8em;
}

.card-in-call {
    border: 0.2em solid #f9dd16;
}

.cursor-pointer {
    cursor: pointer;
}

.audio-mini{
    width: 180px;
    margin: auto;
    display: block;
    border-radius: 20px;
    background: #f2f2f2 !important;
    height: 30px;
}


.component-actions .modal-borrar .btn-gris, .component-actions .modal-borrar .btn-rojo {
    padding: 2px 7px;
    font-size: .7em;
}



div.error_page .card{
    margin: .5em 0 2rem;
    padding-bottom: 2em;
    border: 1px solid #BB8485;
    border-radius: 0 0 .5em .5em
}

div.error_page .card h1{
    background: #FFE5E9;
    color: #AA000E;
    font-size: 2rem;
    padding: .5em 2rem;
    margin-bottom: .5em;
    font-weight: normal;
    border-bottom: 1px solid #DBBFC1;
}

div.error_page .card h2{
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 2rem;
    color: gray;
}

div.error_page .card p{
    padding: 0 2rem;
}

.error_page {
    margin: 20px;
}

.error-image {
    height: auto;
    margin: auto;
    display: block;
}

.error_page h1 {
    font-size: 1.8em;
}

.error_page h2 {
    font-size: 1.3em;
    margin-top: 15px;
}

.error_page p {
    font-size: 1em;
    margin-top: 15px;
}

.btn-bg-gray{
    background-color: #d9d9d9 !important;
}

.btn-export-link {
    text-decoration: none !important;
    color: #000 !important;
    font-size: 13px;
    white-space: nowrap;
}

.export-text {
    font-size: 13px;
}

#modal-logs{
    position: fixed;
    z-index: 106;
    inset: 0;
    background: rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-logs > div{
    background: #FFFFFF;
    width: 70vw;
    height: 90vh;
    box-sizing: border-box;
    padding: 1.5em 3em;
    border-radius: .75em;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#modal-logs .modal-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E3E3E3;
    padding-bottom: .75em;
    margin-bottom: .5em;
    gap: 10px;
}

#modal-logs .modal-header a{
    font-size: 0px;
    width: 22px;
    height: 22px;
    display: inline-block;
    transform: rotate(45deg);
    background:
            url(./icons/add-g.svg) center center/contain no-repeat,
            url(./icons/add.svg) center -500px/contain no-repeat;
}

#modal-logs .modal-header a.download{
    transform: rotate(0);
    background-image: url(./icons/abajo-g.svg),
    url(./icons/abajo.svg);
}

#modal-logs .modal-header a:hover{
    background-position: center -500px, center center;
}

#modal-logs .modal-header h3{
    font-size: 22px;
    letter-spacing: -0.51px;
    font-weight: 300;
    font-family: 'a_regular';
    margin: 0;
    flex:1;
}

#modal-logs .modal-header .modal-toolbar{
    white-space: nowrap;
    width: fit-content;
    display: flex;
    gap: 10px;
    align-items: center;
}

#modal-logs .modal-body{
    flex: 1;
    overflow: hidden;
}

#modal-logs .modal-body-filled{
    background-color: #F0F2E8;
}

#modal-logs .modal-body > div{
    scrollbar-width: thin;
    scrollbar-color: #E3E3E3 #F5F2F0;
}

#modal-logs .modal-body .modal-loading{
    display: flex;
    gap: 6px;
    color: #153371;
    font-family: 'a_regular';
}

#modal-logs .modal-body .modal-loading::before{
    content: '';
    display: block;
    width: 1lh;
    height: 1lh;
    background: url(./icons/loading-circle.svg) center/contain no-repeat;
}

#modal-logs .modal-body ul{
    padding-right: .5em;
}

#modal-logs .modal-body .log-item{
    padding: .5em .7em;
    margin-bottom: 10px;
    background: #F2F5FA;
    color: #5276AD;
    border-radius: .4em;
    font-size: 13px;
    line-height: 16px;
}

#modal-logs .modal-body .log-item p{
    font-size: 13px;
    line-height: 16px;
}

#modal-logs .modal-body .log-error{
    background: #F7F0F2;
    color: darkred;
}

#modal-logs.modal-flowchart > div{
    width: 96vw;
    height: 96vh;
    border-radius: 0;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
}

#modal-logs.modal-flowchart .modal-header{
    width: 100%;
    height: min-content;
}

#modal-logs.modal-flowchart .modal-settings{
    width: 20vw;
    min-width: 300px;
    background: #F7F7F7;
    box-sizing: border-box;
    padding: .75em 1em;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #E3E3E3 #F5F2F0;
}

#modal-logs.modal-flowchart .modal-settings,
#modal-logs.modal-flowchart .modal-body{
    height: calc( 96vh - 50px - 3em );
}

#modal-logs.modal-flowchart .modal-settings h3{
    margin: 0 0 .75em;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items h3{
    margin-top: 1.5em;
}

#modal-logs.modal-flowchart .modal-settings h3.config-main-title{
    text-transform: uppercase;
}

#modal-logs.modal-flowchart .modal-settings *:not(h3){
    font-size: 13px;
}

#modal-logs.modal-flowchart .modal-settings .form-item{
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 9px;
}

#modal-logs.modal-flowchart .modal-settings .form-item-with-action{
    display: flex;
}

#modal-logs.modal-flowchart .modal-settings .form-item-with-action input,
#modal-logs.modal-flowchart .modal-settings .form-item-with-action select{
    flex: 1;
    width: 100%;
}

#modal-logs.modal-flowchart .modal-settings .submit.buffering{
    pointer-events: none;
    background-image: url(./icons/loading-circle-white.svg);
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 1lh;
}

#modal-logs.modal-flowchart .modal-settings .submit:disabled,
#modal-logs.modal-flowchart .modal-settings .submit[disabled]{
    background-color: #767676 !important;
    color: #999999 !important;
    border-color: #DDDDDD !important;
}

#modal-logs.modal-flowchart .modal-settings .form-item-with-action select[disabled],
#modal-logs.modal-flowchart .modal-settings .form-item-with-action select:disabled{
    background-color: #F4F4F4;
    color: #999999;
    border-color: #DDDDDD;
}

#modal-logs.modal-flowchart .modal-settings .form-item-action{
    aspect-ratio: 1;
    min-width: 2.5em;
    text-indent: -200px;
    background: #9BACB0;
    overflow: hidden;
}

#modal-logs.modal-flowchart .modal-settings .form-item-action.cancel{
    background: #E35A3E url(icons/quitar-b.svg) center/1em no-repeat
}

#modal-logs.modal-flowchart .modal-settings .form-item-action.add{
    background: #9BACB0 url(icons/sumar-b.svg) center/1em no-repeat
}

#modal-logs.modal-flowchart .modal-settings .form-item-line-top{
    margin-top: 1.4em;
    border-top: 1px solid #CBCBCB;
    padding-top: 1.4em;
}
#modal-logs.modal-flowchart .modal-settings .form-item-margin-top{
    margin-top: 1.4em;
}

#modal-logs.modal-flowchart .modal-settings .form-item input[type=checkbox]{
    display: none;
}

#modal-logs.modal-flowchart .modal-settings .form-item input[type=checkbox] + label{
    cursor: pointer;
    padding-left: 2em;
    background: url(./icons/palanca.svg) .25em center/contain no-repeat;
}

#modal-logs.modal-flowchart .modal-settings .form-item input[type=checkbox]:checked + label{
    background-image: url(./icons/palanca-v.svg);
}

#modal-logs.modal-flowchart .modal-settings *:not(input):not(textarea){
    user-select: none;
}

#modal-logs.modal-flowchart .modal-settings .form-item input,
#modal-logs.modal-flowchart .modal-settings .form-item select,
#modal-logs.modal-flowchart .modal-settings .form-item textarea{
    border: 1px solid #E0E0E0;
    padding: .6em;
    background-color: white;
}

#modal-logs.modal-flowchart .modal-settings .form-item input.input-error{
    border-color: darkred;
}
#modal-logs.modal-flowchart .modal-settings .form-item span.input-limiter-error{
    background: #FBF9E5;
    border-color: #766A4B;
    color: #766A4B;
    display: block;
    padding: 3px 10px;
}

#modal-logs.modal-flowchart .modal-settings .form-item span.input-error{
    background: pink;
    border-color: darkred;
    color: darkred;
    display: block;
    padding: 3px 10px;
}

#modal-logs.modal-flowchart .modal-settings .options-menu{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#modal-logs.modal-flowchart .modal-settings .options-menu .options-row{
    display: flex;
    gap: 4px;
    align-items: flex-end;
}

#modal-logs.modal-flowchart .modal-settings .options-menu .options-row div{
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
}

#modal-logs.modal-flowchart .modal-settings .options-menu .options-row div label{
    color: #B9B9B9;
}

#modal-logs.modal-flowchart .modal-settings .options-menu .options-row div input{
    width: 100%;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-panel {
    padding: .5em .7em;
    background: #FFF;
    border-radius: .5em;
    height: auto;
    transition: height .5s;
}
#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-panel.panel-with-error{
    border: 1px solid #F0B7B7;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-panel.panel-with-error .context-header h4{
    color: #E88686;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-panel.collapsed > div:not(:first-child):not(:last-child){
    display: none;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-panel.collapsed > .form-item-line-top{
    margin-top: 0;
    border-top: none;
    padding-top: .4em;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-panel.collapsed > .form-item-line-top label{
    width: fit-content;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-panel.collapsed > .form-item-line-top .form-item-with-action,
#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-panel.collapsed > .form-item-line-top select{
    flex: 1;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-panel.collapsed > .form-item-line-top .form-item-with-action a{
    display: none;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-header{
    display: flex;
    align-items: center;
    flex-direction: row;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-panel .context-header{
    margin-bottom: 1em;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-header h4{
    text-transform: uppercase;
    padding: .2rem 0;
    font-size: .8rem;
    color: #9bacb0;
    flex: 1;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-header a{
    width: .8rem;
    height: .8rem;
    overflow: hidden;
    text-indent: -300px;
    background: none center/contain no-repeat, none -400px center/contain no-repeat;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-header a.toggle{
    background-image: url(icons/menos-g.svg), url(icons/bajar-g.svg);
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-panel.collapsed .context-header a.toggle{
    background-image: url(icons/bajar-g.svg), url(icons/menos-g.svg);
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-panel .context-header a.delete{
    background-image: url(icons/borrar-g.svg), url(icons/borrar-n.svg);
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-inputs-panel .context-header a.delete:hover{
    background-image: url(icons/borrar-n.svg), url(icons/borrar-g.svg);
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-header h3{
    flex: 1;
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-header a.add{
    margin-top: 1em;
    background-image: url(icons/add-g.svg), url(icons/add.svg);
}

#modal-logs.modal-flowchart .modal-settings .context-form-items .context-header a.add:hover{
    background-image: url(icons/add.svg), url(icons/add-g.svg);
}

#modal-logs.modal-flowchart .modal-settings .bot-options-delete{
    width: 0.5lh;
    overflow: hidden;
    margin-top: 10px;
    text-indent: -500px;
    align-self: stretch;
    background: url(icons/borrar-g.svg) center/contain no-repeat, url(icons/borrar-n.svg) center -500px/contain no-repeat;
}

#modal-logs.modal-flowchart .modal-settings .bot-options-delete:hover{
    background-image: url(icons/borrar-n.svg), url(icons/borrar-g.svg);
}

#modal-logs.modal-flowchart .modal-header .button,
#modal-logs.modal-flowchart .modal-header .test-bot,
#modal-logs.modal-flowchart .modal-header .add-context,
#modal-logs.modal-flowchart .modal-settings .bot-options-add{
    border: 1px solid #9BACB0;
    color: #9BACB0 !important;
    width: fit-content;
    padding: .45em 1em .45em 2em;
    align-self: flex-end;
    border-radius: .25em;
    font-size: 12px;
    line-height: 14px;
    background: url(icons/add-g.svg) .35em center/.9lh no-repeat, url(icons/add.svg) .35em 200px/.9lh no-repeat;
    cursor: pointer;
}

#modal-logs.modal-flowchart .modal-header .button:hover,
#modal-logs.modal-flowchart .modal-header .test-bot:hover,
#modal-logs.modal-flowchart .modal-header .add-context:hover,
#modal-logs.modal-flowchart .modal-settings .bot-options-add:hover{
    background-image: url(icons/add.svg), url(icons/add-g.svg);
    color: black !important;
    border-color: black;
    opacity: 0.8;
}

#modal-logs.modal-flowchart .modal-header .button,
#modal-logs.modal-flowchart .modal-header .test-bot{
    background-image: none;
    padding-right: 2em;
}

#modal-logs.modal-flowchart .modal-header .button:hover,
#modal-logs.modal-flowchart .modal-header .test-bot:hover{
    background-image: none;
    background-color: #EDEDED;
}
#modal-logs.modal-flowchart .modal-header .button[disabled],
#modal-logs.modal-flowchart .modal-header .button:disabled,
#modal-logs.modal-flowchart .modal-header .test-bot[disabled],
#modal-logs.modal-flowchart .modal-header .test-bot:disabled{
    background-color: #ccc;
    color: #eee;
}

#modal-logs.modal-flowchart .modal-header .button.button-save{
    background-color: #EDF7F0;
    border-color: #B7BCAD;
    color: #3E5024 !important;
}

#modal-logs.modal-flowchart .modal-header .button.button-save:hover{
    background-color: #BCD3C1;
}

#modal-logs.modal-flowchart .modal-header .button.button-cancel{
    background-color: #FAF5F5;
    border-color: #C9ADAD;
    color: #6A1517 !important;
}

#modal-logs.modal-flowchart .modal-header .button.button-cancel:hover{
    background-color: #EDDEDE;
}


#modal-logs.modal-flowchart .modal-settings .context-form-buttons{
    margin-top: 2rem;
    display: flex;
    gap: 20px;
}

#modal-logs.modal-flowchart .modal-settings .context-form-buttons button{
    border: none;
    padding: .6em 1em;
    flex: 1;
    text-align: center;
    cursor: pointer;
}

#modal-logs.modal-flowchart .modal-settings .context-form-buttons button:hover{
    background-color: #DEDEDE;
}

#modal-logs.modal-flowchart .modal-settings .context-form-buttons button.submit{
    background-color: #7E8E43;
    color: white;
}

#modal-logs.modal-flowchart .modal-settings .delete-button{
    padding: .6rem;
    background: #9B0A21;
    cursor: pointer;
    color: white;
    border-radius: .35em;
    border: none;
}
#modal-logs.modal-flowchart .modal-settings .delete-button:hover{
    background: #A70A24;
}


#modal-logs.modal-flowchart .modal-settings .context-form-buttons button.submit:hover{
    background-color: #6C7C39;
}

#chat-container,
#chat-cloned{
    height: 100%;
}

#chat-cloned{
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
}

#chat-cloned.chat-abierto #ver-chat{
    flex: 1;
    overflow: hidden;
    height: auto;
}

#bot0-toast.show{
    bottom: 3vh;
}

#bot0-toast{
    min-width: 40vw;
    text-align: center;
    position: fixed;
    bottom: -10vh;
    left: 50%;
    transform: translateX(-50%);
    padding: .75em 1.5em;
    box-shadow: 0 0 20px rgba(255,227,229,.5);
    background: #FFF2F5;
    color: #A0171A;
    border: 1px solid #E8B9BC;
    border-radius: .3em;
    z-index: 110;
    transition: bottom .4s ease-in-out;
}

#bot0-toast.error{
    background: #FFF2F5;
    color: #A0171A;
    border-color: #E8B9BC;
}

#bot0-toast.success{
    background: #E3EADE;
    color: #244D12;
    border-color: #D6E5CE;
}

#bot0-toast.info{
    background: #E0E8EA;
    color: #0F67A5;
    border-color: #CBD6DE;
}

.autogrow{
    field-sizing: content;
}

body.no-overflow{
    overflow: hidden;
}

.CodeMirrorContainer {
    border: solid 1px #e1e5e8;
    position: relative;
    min-height: 300px;
    resize: vertical;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 75vh;
}

.CodeMirrorContainer.short {
    min-height: 150px;
}

.CodeMirror {
    padding-right: 20px;
}

.CodeMirror-linenumber{
    font-size: 13px !important;
    line-height: 1.7;
}

.modal-body .CodeMirrorContainer,
.modal-body .CodeMirror{
    height:  100% !important;
}

.modal-body-locked .CodeMirror{
    user-select: none;
    cursor: default;

}

.notification-bell {

}

.notification-dot {
    position: absolute;
    top: -5px;
    right: 27px;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
}

.notification-pending-loader {
    width: 100%;
    height: 4.8px;
    display: inline-block;
    position: relative;
    background: rgb(0 0 0 / 64%);
    overflow: hidden;
}
.notification-pending-loader::after {
    content: '';
    width: 192px;
    height: 4.8px;
    background: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    animation: animloader 2s linear infinite;
}

.notification-error {
    font-size: 13px;
    color: #e71515
}

.notification-bell .lista-abierta ul li,
table tbody{
    opacity: 1;
    transition: .45s opacity;
}

.notification-bell .lista-abierta ul li.dismissed
table tbody.dismissed{
    opacity: 0;
}

@keyframes animloader {
    0% {
        left: 0;
        transform: translateX(-100%);
    }
    100% {
        left: 100%;
        transform: translateX(0%);
    }
}


.hidden, .d-none {
    display: none;
}


.jq-toast-wrap.max-width {
    width: 350px;
}