/*----------------------------------- De aplicación general para todo */
      * {
        box-sizing:border-box;
      }

      body {
        margin:0;
        font-family:Arial, Helvetica, sans-serif;  /* #ConfigCuentosIE# */
        font-size:13px;  /* #ConfigCuentosIE# */
        /* background-color:DodgerBlue;   #ConfigCuentosIE# */
      }

      /*----------------------------------- Color de la cabecera de título de los modales */
      .modal{
          font-size: 1.5em;
      }
      
      .modalesColor {
          background-color:DodgerBlue;  /* #ConfigCuentosIE# */
          font-size: 2em;
          text-align:center;
      }
      
/*      .modal-title {
          font-size: 1.1em; 
          text-align:center;
      }
*/      
      
      /*----------------------------------- Menú principal */
      .topnavIconosFont {
         font-size:19px;   /* Tamaño letra de los iconos del menú superior */
      }
      
      .topnav {
        overflow:hidden;
        background-color:DodgerBlue;  /* #ConfigCuentosIE# */
        width:100%;
      }

      .topnav a {
        float:left;
        display:block;
        color:#f2f2f2;  /* #ConfigCuentosIE# */
        text-align:center;
        padding:5px 16px 5px 16px;
        text-decoration:none;
/* ARR        font-size:17px; */  /* #ConfigCuentosIE# */
      }

      .topnav a:hover {
/* ARR        background-color:#ddd; */  /* #ConfigCuentosIE# */
        color:black;  /* #ConfigCuentosIE# */
      }

      .topnav a.active {
        background-color:#4CAF50;
        color:white;
      }

      .topnav .icon {
        display:none;
      }

      .content {
        padding-top:100px;
      }

/*      @media screen and (max-width:768px) { */
/*      @media screen and (max-width:900px) { */
      @media screen and (max-width:1000px) { 
        .topnav a:not(:first-child) {display:none;}
        .topnav a.icon {
          float:right;
          display:block;
        }
        .topnav.responsive {position:relative;}
        .topnav.responsive .icon {
          position:absolute;
          right:0;
          top:0;
        }
        .topnav.responsive a {
          float:none;
          display:block;
          text-align:left;
        }
      }

      .content {
        padding:16px;
      }
      
      
      
      
      
      /*--------------------------------------------------------------------------------------------------------- Chatbot */
      /*------------------------- De aplicación general */
      .col-md-2, .col-md-10{
          padding:0px;
      }

      .container-fluid {  /* ARR        Añadido */
         padding-top:3px;
         padding-left:3px;
         padding-right:3px;
      }
      
      .panel-primary {  /* ARR        Añadido */
         padding:0px;
      }
      
      .panel{
          margin-bottom:0px;
          padding:0px;
      }
      
      /*------------------------- Columna izquierda de logos */
      .header {
/* ARR        padding:10px; */
        padding:0px;
        text-align:center;
      }

      .logos {
        color:#ffffff;
        padding:15px;
      }

      .headerTitulo {
        color:#000000;
        padding:5px;
        font-size:16px;
      }

      .headerFoto {
        padding:5px;
      }

      /*------------------------- Responsive design para anchura de columna izquierda de logos */
      @media screen and (max-width:780px) {
         .header {   /* ARR Añadido */
            display: none;
         }
         .avatar {
            display:none;
         }
        .headerFoto {
          display:none;
        }
        .logos {
          display:none;
        }
        .headerTitulo {
          display:none;
/* Si quisiera que apareciese en la línea superior
          padding-top:10px;
          width:100%;
*/
        }
      }
      @media screen and (min-width:781px and max-width:1280px) {
        .headerTitulo {
          font-size:10px;
        }
      }
      
      /*------------------------- Efectos del cuento mostrado */
      .estiloCuento {
	font-family: sans-serif;
	font: sans-serif;
	padding: 30px;
	background: #ccc;
	border-left: 20px solid #ff2929;
	box-shadow: -50px 50px 50px rgba(0, 0, 0, .5);
/*	text-align: justify; Quitado porque no es aconsejable dejarlo así en formato móvil, porque está demostrado que no se sigue bien el cambio de línea*/
      }

      .estiloTituloCuento {
/*	margin: 0 0 20px 0;
	padding: 0;
*/	font-size:2em;
	font: sans-serif bold italic;
	text-align: center;
/*	color: #9e9e9e; */
/*	background: #ccc;
	border-left: 20px solid #ff2929;
	box-shadow: -50px 50px 50px rgba(0, 0, 0, .5);
*/      }
      
      /*------------------------- Caja Pie de la ventana del chat */
      .panel-footer {
        float:center;
        background-color:#8a8a5c;      /* #ConfigCuentosIE# */
        color:white;                  /* #ConfigCuentosIE# */
/* ARR        padding-left:20px; */
        padding-left:5px;
/* ARR        padding-right: 5px;   */
        padding-right:0px;
        padding-top:5px;
        padding-bottom:5px;
/* ARR        margin-right:30px; */
        margin-right:3px; 
        
        position:relative;
        overflow:hidden;
        border-radius:0 0 20px 20px;
        box-shadow:20px 20px 50px 10px pink;     /* #ConfigCuentosIE# */ 
      }
      
      #chat-input {  /* textarea de entrada de texto en el chatbot */
/* ARR         width:70vw; */
/*         width:calc(100% - 50px); */
         width:calc(100% - 75px);
         resize:both; 
         border:none;
         border-radius:5px 5px 5px 8px;   /* ARR Añadido */
      }
      
      .iconoAyudaFont { /* Icono ayuda en cualquier lado de CuentosIE */
         font-size:19px;
         color:red;
         padding:0; 
         background-color:white;
      }
      
      #btn-chat-sos {   /* Botón ayuda en entrada de texto en el chatbot */ /* ARR Añadido */
         padding:2px; 
         padding-top:8px;
      }
      
      /*------------------------- Ventana principal (sin el menú principal) de la aplicación incluyendo columna de logos y títulos */
      .chat-window{
/* ARR          padding:10; */
          padding:0;
          display:flex;
          width:100%;
          flex:1;
/* ARR          margin:15px; */
          margin:3px;
      }
      
      /*------------------------- Caja Título de la ventana del chat */
      .top-bar {
        background-color:#8a8a5c;  /* #ConfigCuentosIE# */
        color:white;  /* #ConfigCuentosIE# */
/* ARR        font-family:Copperplate, "Times New Roman";   */
/*        font-family:"Brush Script MT";*/
        text-align:center;
        font-size:0.8rem;  /* #ConfigCuentosIE# */
/* ARR        font-size:22px; */ /* #ConfigCuentosIE# */
        line-height:1;  /* ARR Añadido */
/*        padding:10px; */
        padding:5px;
        position:relative;
        overflow:hidden;
/* ARR        margin-right:30px; */
/* ARR        margin-right:3px; */
        margin:0px;
        border-radius:20px 20px 0 0;
        box-shadow:20px 20px 50px 10px pink;    /* #ConfigCuentosIE# */
      }
      
      /*----------------------------------- Estilo texto brillante/parpadeante */
      .glow {
/* NNNWP          background-color:#FFFFCC; */  /* #ConfigCuentosIE# */
          background-color:#d8f3e5;  /* #ConfigCuentosIE# */
      }

/*      .glow {
          animation:glow 1s ease-in-out infinite alternate;
      }

      @-webkit-keyframes glow {
        from {
          text-shadow:0 0 5px #fff, 0 0 5px #fff, 0 0 7px #e60073, 0 0 10px #e60073, 0 0 12px #e60073, 0 0 15px #e60073, 0 0 17px #e60073;
        }
        
        to {
          text-shadow:0 0 7px #fff, 0 0 7px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 15px #ff4da6, 0 0 17px #ff4da6, 0 0 20px #ff4da6;
        }
      }
*/   
      /*------------------------- Caja Cuerpo que contiene los mensajes de la ventana del chat */
      .msg_container_base{
        background:#e5e5e5;  /* #ConfigCuentosIE# */
        margin:0;
/* ARR        height:70vh; 
        max-height:70%;
        min-height:70%; */
        height:calc(100vh - 115px);
        overflow-x:hidden;
        overflow-y:scroll;
/* ARR        margin-right:30px; */
        margin-right:3px;
        box-shadow:20px 20px 50px 10px pink;   /* #ConfigCuentosIE# */
      }
      
      /*------------------------- Común a todos los mensajes de CuentosIE de la ventana del chat */
      .msg_container {
          padding:10px;
          overflow:hidden;
          display:flex;
      }
      
      .messagesFont {
/* NNN        font-size:13px;    #ConfigCuentosIE# */
        font-size:1.5em;   /* #ConfigCuentosIE# */
      }
      
      .messagesLetraDestacada {  /* Color rojo destacado de trozos de mensajes */
/* ARR          color:#cc2900;   */  /* #ConfigCuentosIE# */
/* NNN         color:#009900;   #ConfigCuentosIE# */
         color:#009063;  /* #ConfigCuentosIE# */
      }
      
      .messages {
        background:white;  /* #ConfigCuentosIE# */
        padding:10px;
        box-shadow:10px 10px 10px grey;
        max-width:100%;
      }
      .messages p {
          margin:0 0 0.2rem 0;
        }
      .messages time {
          font-size:11px;    /* #ConfigCuentosIE# */
          color:#ccc;        /* #ConfigCuentosIE# */
      }
      
      /*------------------------- Mensajes enviados por el chat (de izq. a dcha.) de la ventana del chat */
      .msg_sent{
          padding-bottom:20px;
          margin-right:0;
          border-radius:20px 0 0 20px;
      }
      .msg_sent > time{
          float:right;
      }

      /*------------------------- Mensajes recibidos del usuario por el chat (de dcha. a izq.) de la ventana del chat */
      .msg_receive{
          padding-left:10px;
          margin-left:0;
          margin-right:30px; 
          border-radius:0 20px 20px 0;
          background-color:#ffe992;        /* #ConfigCuentosIE# */ 
          color:black;        /* #ConfigCuentosIE# */ 
      }

      /*------------------------- Bloque (8 pos para mensaje + 2 pos para avatar) para mensajes enviados por el chat (de izq. a dcha.) de la ventana del chat */
      .base_sent {
        margin-left:10px; 
      }
      
      /*------------------------- Triángulo que aparece en los mensajes enviados por el chat (de izq. a dcha.) de la ventana del chat */
      .base_sent > .avatar:after {
          content:"";
          position:absolute;
          bottom:0;
          left:0;
          width:0;
          height:0;
          border:5px solid white;  /* #ConfigCuentosIE# */
          border-right-color:transparent;
          border-top-color:transparent;
          box-shadow:10px 10px 10px grey;
      }

      /*------------------------- Avatar en los mensajes de la ventana del chat */
      .avatar {
          position:relative;
      }
      .base_sent > .avatar {
         padding-left:20px;
      }

      /*------------------------- Triángulo que aparece en los mensajes del usuario recibidos por el chat (de dcha. a izq.) de la ventana del chat */
      .base_receive > .avatar:after {
          content:"";
          position:absolute;
          top:0;
          right:0;
          width:0;
          height:0;
          border:5px solid #ffe992;  /* #ConfigCuentosIE# */
          border-left-color:rgba(0, 0, 0, 0);
          border-bottom-color:rgba(0, 0, 0, 0);
          box-shadow:10px 10px 10px grey;
      }
      .base_receive > .avatar {
          padding-right:20px;
      }

      /*------------------------- Estilo de los cuadros de entrada de registro */
      .CamposRegistro {
        width:100%;
        padding:15px;
        margin:5px 0 5px 0;
/*        display:inline-block; */
        display:inline;
        border:none;
        background:#f1f1f1;
      }
      
      .CamposRegistro_up {
/*        width:100%;*/
        padding:5px;
        margin:5px 0 5px 0;
/*        display:inline-block; */
        display:inline;
        border:none;
        background:#f1f1f1;
      }

      /*------------------------- Estilo de los títulos de los formularios de los modales*/
      label { 
        display:inline !important;
      }