/**
 * .wcl-tpl-base is this template unique class.
 * Prepend this class to every CSS entry to avoid conflicts with
 * host page styles pr other widget templates
 */

 /* Theme color */

.wcl-tpl-aster .wcl-widget-dialog,
.wcl-tpl-aster .wcl-system-category,
.wcl-tpl-aster .wcl-input-submit:hover:active {
/*background: rgba(1, 50, 90, .9); blue zerocoda*/
background: rgba(255, 255, 255, 1); bianco
}





/* colore del titolo: */
  .wcl-tpl-aster .wcl-widget-header { color: #ff6200; text-shadow: 0 0 1px #ff6200; }

/* sfondo della nuvoletta del messaggio utente: */
  .wcl-tpl-aster .wcl-user-message .wcl-entry-content { background: #fff} 


/* colore del testo dentro le nuvolette (sia utente che bot): */
  .wcl-tpl-aster .wcl-entry-content { color: #01325A; }

/** 
* se preferisci usare 2 colori diversi per il testo delle nuvolette di bot e utente, usa queste 2 regole al posto della precedente:
* .wcl-tpl-aster .wcl-user-message .wcl-entry-content { color: #8f250c; } // nuvoletta messaggio utente
* .wcl-tpl-aster .wcl-user-message .wcl-sent-mark .fa { color: #8f250c; } // spunta ricezione messaggio utente
* .wcl-tpl-aster .wcl-system-message .wcl-entry-content { color: #023047; } // nuvoletta messaggio bot
*/



@media (min-width: 200px), (min-device-width: 350px) /*per far vedere bene anche su device di piccolo schermo */


{
 
.wcl-tpl-aster .wcl-widget-controls .wcl-btn-collapse {
    display: block;
  /*  background-image: url('https://prod.b-optimist.com/projects/zerocoda/img/Shape.png'); */
	}



  .wcl-tpl-aster.wcl-widget.wcl-bottom {

    /* Bordo colorato intorno al widget */
    border-width: 2px 0 2px 2px;
    border-color: #ff6200;
    border-style: solid;

    /* Angoli smussati del widget*/
    border-radius: 1.5rem 0 0 1.5rem;
  }

.wcl-tpl-aster.wcl-bottom .wcl-widget-tab {
    transform: translateY(-100%);
    background-color: transparent;
    background-image: url('https://prod.b-optimist.com/projects/zerocoda/img/Frame_15.png');
    background-repeat: no-repeat;
    background-position: center center;
	/* colore scritta 'Ti serve aiuto?' */
    /*color: #FF6200;  */
	/* dimensioni scritta 'Ti serve aiuto?' */
    /*line-height:0.7; */

  position: fixed !important;
  top: auto !important;
  bottom: 1rem !important;
  right: 1rem;
  transform: translateY(0) !important;
}


}


/*Per aggiungere il bordo intorno alla nuvoletta del bot */
.wcl-tpl-aster .wcl-system-message .wcl-entry-content {
    border-width: 1px;
 /*   border-color: #ff6200; arancione */
    border-color:#01325A;
    border-style: solid;
}

/*Per aggiungere il bordo intorno alla nuvoletta del utente */
.wcl-tpl-aster .wcl-user-message .wcl-entry-content {
    border-width: 1px;
 /*   border-color: #ff6200; arancione */
    border-color:#01325A;
    border-style: solid;
}


/*per nascondere l'omino che è l'icona orginale del bot */
.wcl-tpl-aster .wcl-system-message .wcl-entry-header > i {
display:none;
}


/*Per aggiungere il bordo intorno alla icona rotonda del bot e il simbolo del robot */
.wcl-tpl-aster .wcl-system-message .wcl-entry-header { 
  border-color: #01325A;
  background-image: url('https://prod.b-optimist.com/projects/zerocoda/img/Robot.png'); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px;
 }

/*Per aggiungere il bordo intorno alla icona rotonda dell'utente e il simbolo dell'omino */
.wcl-tpl-aster .wcl-user-message .wcl-entry-header { 
  border-color: #01325A; 
  background-image: url('https://prod.b-optimist.com/projects/zerocoda/img/Omino.png'); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30px;

 }


/*per nascondere la freccia originale di invio messaggio */
.wcl-tpl-aster .wcl-input-submit > i {
display:none;
}

/*Per aggiungere l'iconda della freccia d invio messaggio */
.wcl-tpl-aster .wcl-input-submit { 
  background-color: #fff;
  background-image: url('https://prod.b-optimist.com/projects/zerocoda/img/freccia.png'); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30px;

 }





/* per nascondere l'icona originale del chiudi chat e sostituirla con un altra immagine */
.wcl-tpl-aster .wcl-widget-controls .wcl-btn-collapse  > i {
display:none;
}

.wcl-tpl-aster .wcl-widget-controls .wcl-btn-collapse {
   background-image: url('https://prod.b-optimist.com/projects/zerocoda/img/Shape.png'); 
  background-repeat: no-repeat;
  background-position: center center;
background-size: 14px;

	}



/* per nascondere l'icona originale del full screen e sostituirla con un altra immagine */
.wcl-tpl-aster .wcl-widget-controls .wcl-btn-fullscreen  > i {
display:none;
}

.wcl-tpl-aster .wcl-widget-controls .wcl-btn-fullscreen{
   background-image: url('https://prod.b-optimist.com/projects/zerocoda/img/Shape_fs.png'); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px;

	}



/* Input area */

/*
.wcl-tpl-aster .wcl-widget-input {
  background: #ff62008c; //arancione


}
*/
.wcl-tpl-aster .wcl-input-field {
/*blu*/   
color: #01325A; 
    border-width: 1px;
    border-color:#ff9149;
    border-style: solid;
    border-radius: 1.5rem;
    margin-bottom: 10px;
    margin-left: 10px;

}

/* per ridurre la lunghezza da destra dell'input testo  */
.wcl-tpl-aster .wcl-input-container {
    padding: 0 70px 0 0;
}

/* colore della scrollbar  */
.wcl-tpl-aster .wcl-scroll-slider {
    position: relative;
    border-radius: 2px;
    background: #ff62008c;
    /* color: red; */
}