/** GLOBAL SETTINGS */

* {
    font-family: 'Open Sans', sans-serif; /*'Roboto', sans-serif;*/ /*Helvetica;*/
    /*font-family: 'Roboto', sans-serif;*/

    margin:0;
	padding:0;
  }

body {

    width:100%; 
    /*height:100%; */

     /*max-width: 100%;*/

     /*overflow-x: hidden;*/

     background-color: #f0f0f0;
     /*background-color: white;*/

     padding-top: 82px;

/*     background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
     background-size: 400% 400%;
     -webkit-animation: Gradient 80s ease infinite;
     -moz-animation: Gradient 80s ease infinite;
     animation: Gradient 80s ease infinite;*/

  /*REMOVE SELECTION*/
       -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

input[type=text], textarea {
/*  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;*/
  outline: none;
  border:none;
/*  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;*/
/*  border: 1px solid #DDDDDD;

  border-radius: 5px;*/
}
input[type=text]:focus, textarea:focus {
/*  box-shadow: 0 0 5px rgba(81, 203, 238, 0.5);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 0.5);*/
}
/* https://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css
In modern browsers you can use :placeholder-shown to target the empty input (not to be confused with ::placeholder).*/
/*input[type=text]:placeholder-shown {
    border: 1px solid red;
}*/

.i_info_span {
  display:inline;
  vertical-align: sub;
}
.i_info {
  width: 20px;
  height: 20px;
}
/*Tutorial modal window styles*/
.explainer_icon {
  display:inline;
  vertical-align: sub;
  cursor: pointer;
}
.explainer_icon img {
  width: 20px;
  height: 20px;
}
#explainer_global_overlay {
    opacity:0;
    transition: all 0.17s ease-out;
    -webkit-transition: all 0.17s ease-out;
    background-color: rgba(0, 0, 0, 0.5);
}
.explainer_text {
  padding: 20px;
  background-color: white;
  border-radius: 5px;
}
/*#explainer_global_overlay{
    display: none;
    opacity:0;


    transition: all 0.17s ease-out;
    -webkit-transition: all 0.17s ease-out;

    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
    z-index: 16777270;
}*/

/*For tutorial modal window : Main wrapper used to center 'explainer_wrapper' in the screen */
/*#explainer_wrapper0 {
    position:fixed;
    left:50%;
    top: 25%;
}*/
/*For tutorial modal window : wrapper*/
/*#explainer_wrapper {
   position:relative;
   left:-50%;
   top:-25%;
   width: 500px;
   height:300px;
   opacity:1;
   display: block;
   z-index:16777271;
}*/

/*classes for toggle*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
#loading_screen {
	position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    /*background:rgba(255,255,255,0.9);*/
    background:rgba(255,255,255,0.3);
    z-index: 16777271;
}
/*loader icon*/
.sk-spinner-pulse {
  width: 40px;
  height: 40px;
  margin: 40px auto;
  background-color: #0084FF;
  border-radius: 100%;

  position:relative; /*to approximatively vertically center the loader icon*/
  top:35%;

  -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
          animation: sk-pulseScaleOut 1s infinite ease-in-out; }
@-webkit-keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }
@keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }
/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
#topbar {
 position: fixed;
 top: 0;
 width: 100%;
 /*height: 82px;*/
 height: 88px;
 /*height: 24px;*/

 color: #363636;

/*background: #4587eb;  
background: -webkit-linear-gradient(to left, #4587eb, #4a8cf5); 
background: linear-gradient(to left, #4a8cf5, #4587eb); */

background: #fafafa;  
background: -webkit-linear-gradient(to left, #fafafa, #fafafa); 
background: linear-gradient(to left, #fafafa, #fafafa); 

 z-index: 16777269;/*69 leaves some layers ABOVE that! So that the explainer popup can display well*/

 -webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.36);
 -moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.36);
 box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.36);
}
#topbar_logo {
 /*display: inline-block;*/
 /*padding-left: 10px;*/
 z-index: 16777269;/*69 leaves some layers ABOVE that! So that the explainer popup can display well*/
 /*width: 110px;*/
 /*width: 200px;*/
 height: 41px;
}
@media (max-width: 1000px) {
 #topbar_logo {
  height: 26px;
 }
}

#topbar_links {
 position: fixed;
 display: inline-block;
 top:0;
 right: 0;
 padding-top: 47px;/*16px
 /*line-height: 88px;
 padding-right: 10px;
 z-index: 16777269;/*69 leaves some layers ABOVE that! So that the explainer popup can display well*/

 /*background-color: red;*/
}
/*#topbar_links div {
  display: inline-block;
}*/
#topbar_links a {
 padding-left : 7px;
 padding-right : 7px;
 text-decoration: none !important;
 /*color: #363636 !important;*/
 cursor: pointer;

 /*NEW150918*/
 font-family: 'Roboto';
 font-size: 15px;
 font-weight: 800;
 color: #002e4b !important;
 transition: all 0.15s; 
}
#topbar_links a:visited, a:link, a:active
{
    text-decoration: none !important;
    /*color: #363636 !important;*/
    color: #002e4b !important;
}
#topbar_links a:hover
{
    text-decoration: none !important;
    color: #878787 !important;
/*    color: #6d7d87 !important;
    -webkit-filter: brightness(110%); */
}


#img_logout_button {
 width: 20px;
 height: auto;
 vertical-align: text-top;
}

/*MOBILE version   850px*/
/*@media (max-width: 767px) {
 #topbar_logo {
  font-size: 64%;
 }
 .topbar_links {
  font-size: 64%;
  padding-right: 2px;
 }
}*/


/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
#brandbanner {

   position: fixed;
 /*left: 74px;*/
 left: 10px;

  display: inline-block;


/*background: #4587eb;  
background: -webkit-linear-gradient(to left, #4587eb, #4a8cf5); 
background: linear-gradient(to left, #4a8cf5, #4587eb); */
/*background: #fafafa;  
background: -webkit-linear-gradient(to left, #fafafa, #fafafa); 
background: linear-gradient(to left, #fafafa, #fafafa); */

background-color: #fafafd;
/*margin-top: 74px;*/

	font-size: 80%;
	color:#1c1c1c;
	text-align: left;
	padding: 4px;
	padding-bottom: 15px;

	/*pas de width 100% ici!*/
    
/* -webkit-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.36);
 -moz-box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.36);
 box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.36);*/


 /*z-index: 16777271;*/
}
#brandbannertitle {
	font-family: 'Raleway', sans-serif;
	/*font-size: 72px;*/
  font-size: 18px;
  font-weight: 700;
	 /*text-align: center;*/

   padding-left: 10px;
	 padding-bottom: 7px;
	 z-index: 16777270;
}
#brandbannertitle2 {
  /*display: inline-block;*/
 font-family: 'Raleway', sans-serif;
 font-size: 14px;
 /*text-align: center;*/
 padding-left: 10px;

 padding-top: 5px;
}




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

.copy{
/*pas de width 100% ici!*/
 margin: 0px;
 background-color: white;
 color: black;
 font-size: 18px;

 padding: 18px;
 padding-left: 350px;
 padding-right: 350px;
}
/*SMALLER SCREENS*/
@media (max-width: 1300px) {
 .copy{
   padding-left: 100px;
   padding-right: 100px;
 }
}
@media (max-width: 767px) {
 .copy{
   padding-left: 18px;
   padding-right: 18px;
   font-size: 16px;
 }
}

.copy a {
    text-decoration: none !important;
    color: blue !important;
}
.copy a:hover, a:visited, a:link, a:active
{
    text-decoration: none !important;
    color: blue !important;
}

/*MOBILE version */
/*@media (max-width: 767px) {
 .copy{
   padding-left: 18px;
   padding-right: 18px;

   font-size: 16px;
 }
}*/


.input_signupin {
	font-size:22px;
	border-radius: 5px;
	width: 300px;	
  border: none;
}
#button_validate_signupin {
 transition: all 0.3s;
 /*display: inline-block;*/
 color: white !important; 
 padding: 15px;
 
  display: table;
  margin: 0 auto;

/* padding-bottom: 14px;*/
 /*font-size: 110% !important;*/
 font-weight: 100 !important;

 background-color: #ff6bf2 ;

 border-radius: 5px;

 width: 200px;
 text-align: center;

 background: #e55045;  /* fallback for old browsers */
 background: -webkit-linear-gradient(to bottom, #e55045, #e55045);  /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to bottom, #e55045, #e55045); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


	cursor:pointer;

	z-index: 10;
}
#button_validate_signupin:hover {
	-webkit-filter: brightness(110%);	
}

#button_validate_signupin a {
	color: white !important;
}

.pass_reset_email_msg {
	color: green;
}





/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
/*Start page*/
#page_start {
	/*background-color: #f0f0f0;*/
  background-color: transparent;
}
#span_welcome {
	font-weight: 900; font-size: 150%; color:#3d3d3d;
	text-align: center;
}
#span_mission {
	color:#8a8a8a;
	text-align: left;
	font-size: 92%;
}
#quickstart_guide {
	margin: 0 auto;
	width: 400px;
	font-size: 110%;
	font-weight: 200;
	
	color: #505050;
	background-color: #fafafa;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;

	padding-top: 10px;
	padding-bottom: 10px;
}
#quickstart_guide_wrapper {
	display: inline-block;
-webkit-box-shadow: 0px 6px 28px -8px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 6px 28px -8px rgba(0,0,0,0.45);
box-shadow: 0px 6px 28px -8px rgba(0,0,0,0.45);
}

/*#span_news {
	font-weight: 900; font-size: 150%; color:#3d3d3d;
	text-align: center;
}*/
/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
/*Pixel page*/
#page_pixel {
	/*background-color: #f0f0f0;*/
  background-color: transparent;
}
#page_pixel hr{
	margin: 30px -20px 20px;
    border: 0;
    border-top: 1px solid #e6e6e6;
}
#page_pixel_frame{
/*	margin: 0 auto;
*/	/*width: 400px;*/
	color: #505050;
	background-color: #fafafa;
	border-radius: 10px;

	padding: 20px;

	display: inline-block;

	-webkit-box-shadow: 0px 6px 28px -8px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 6px 28px -8px rgba(0,0,0,0.15);
	box-shadow: 0px 6px 28px -8px rgba(0,0,0,0.15);	
}
#page_pixel_frame img {
	vertical-align: middle;
}
#page_pixel_frame_title {
	font-weight: 900; font-size: 120%; color:#3d3d3d;
}
#page_pixel_frame_subtitle {
	font-size: 92%;
	color:#8a8a8a;
}

.img_pixel {
	width: 150px;
	height: 150px;
}
/*#pixelcode*/.copyandpaste_textarea {
	margin: 0 auto;
 border-radius: 5px;
 background-color: #eeeeee;
 width: 100%;
 height: 12em;

 /*padding: 10px;*/

 border: none;
    overflow: auto;
    outline: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.one_em_textarea {
  height: 1.4em;
}

#pixelcode_clipboardbutton {
	position:absolute;
	color:white;
    bottom:15px;
    right:15px;
    z-index:20;
    padding:10px;
    background-color:#d1d5de;
    border-radius: 7px;
    cursor: pointer;

    transition: all 0.3s;
}
#pixelcode_clipboardbutton:hover {
 	background-color:#eff0f2;
}
/*#pixelcode_clipboardbutton:focus {
 	background-color:#226ad5;
}*/
.page_pixel_help_text{
	text-align: left;
	font-size: 92%;
	color:#8a8a8a;
}
/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
/*Chats page*/
#page_chats {
	/*background-color: #f0f0f0;*/
  background-color: transparent;

}
#add_chat_icon {
	transition: all 0.3s;
	border: 0px;
	width: 60px;
	height: 60px;
	cursor: pointer;
}
#add_chat_icon:hover {
	-webkit-filter: brightness(118%);
}
#page_chats_frame{
	text-align: center;
}
.table_bicolor {
/*	border:0;
	width: 300px;*/

	/*to center the div*/
 	 position: absolute;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 

	width: 80%;
	color: #333;
    /*font-family: Helvetica, Arial, sans-serif;*/
    /*width: 70%;*/ /*900px; */

    border-collapse: separate !important;
    border:0;
    border-spacing:0; 

    /*margin: 0 auto;*/
}
/*MOBILE version   850px*/
/*@media (max-width: 767px) {
	#chats_list {
	    width: 400px; 
	}
}*/
.table_bicolor td, th {  
    /*border: 1px solid transparent;*/ /* No more visible border */
    border:0;
    height: 30px; 
    transition: all 0.3s;  /* Simple transition for hover effect */
}
.table_bicolor th {  
    background: #DFDFDF;  /* Darken header a bit */
    font-weight: bold;
}
.table_bicolor td {  
    background: #FAFAFA;
    text-align: center;
    border: 0;
}
/* Cells in even rows (2,4,6...) are one color */        
.table_bicolor tr:nth-child(even) td { background: #F1F1F1; }   
/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */        
.table_bicolor tr:nth-child(odd) td { background: #FEFEFE; }  
/*.table_bicolor tr td:hover { background: #666; color: #FFF; }  */
.table_bicolor td:first-child, .table_bicolor th:first-child {
    border-left: none;
}
.table_bicolor th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
.table_bicolor th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
.table_bicolor th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
.table_bicolor tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}
.table_bicolor tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
} 

.table_bicolor tr:hover td {
	-webkit-filter: brightness(103%);
}
.table_bicolor img:hover {
	-webkit-filter: brightness(118%);
}
/*.table_bicolor td {
	text-align: center;
	width: 60px;
}*/
.loading_image {
	width: 20px;
	height: 20px;
}
.icon_edit_chat {
	width: 28px;
	height: 28px;
}
.edit_chat_a_tag {
	cursor: pointer;
/*  text-decoration:none !important;
  color: black !important;*/
}
/*.edit_chat_a_tag a {

}
.edit_chat_a_tag a:hover {
  color: blue;
}*/
.icon_share_chat {
  width: 28px;
  height: 28px;
}
.share_chat_a_tag {
  cursor: pointer;
}
.icon_duplicate_chat {
  width: 18px;
  height: 18px;
}
.duplicate_chat_a_tag {
  cursor: pointer;
}

.icon_chat_profilingdata {
  width: 40px;
/*  height: 28px;*/
}
.chat_profilingdata_a_tag{
  cursor: pointer;
}

.remove_chat_a_tag{
	cursor: pointer;
	color:red !important;
}
.remove_chat_a_tag:hover {
	-webkit-filter: brightness(118%);
}
.remove_chat_red_cross {
	color:red !important;
}

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

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

/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
/*Chat page*/
#page_chat {
  display: block;
	/*background-color: #f0f0f0;*/
  background-color: transparent;
  /*background-color: #355C7D;*/


 /* height: 500px;*/

  /*z-index: 0;*/
  /*overflow: none;*/

}


.page_chat_frame {
  /*  margin: 0 auto;
*/  /*width: 400px;*/
  /*display: inl;*/
  /*width: 100%;*/
/*  display: table;
   margin: auto;*/
   position: absolute;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 

   /*display: inline-block;*/
   /*width: 900px;*/
   width: 80%;
   /*margin: 10px;*/
   /* WORKED without width margin: 0 auto;*/
   /*margin: 0 auto;*/

  color: #505050;
  background-color: #fafafa;
  border-radius: 10px;

  padding: 50px;

  /*display: inline-block;*/

  -webkit-box-shadow: 0px 6px 28px -8px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 6px 28px -8px rgba(0,0,0,0.15);
  box-shadow: 0px 6px 28px -8px rgba(0,0,0,0.15); 

  text-align: left;
}

#input_conversation_name {
  font-size:22px;
  border-radius: 5px;
  width: 400px;
}

#page_chat_steps_buttons_wrapper {
  position: absolute;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; /*to center!*/

  text-align: center;
  width: 100%;
}

/*Margin for page_chat_steps_buttons_wrapper !!! (long bug css fix*/
/*no more needed #page_chat__step_design , #page_chat__step_integration */
#page_chat__step_template, #page_chat__step_options, #page_chat__step_content {
  /*position: relative;*/
  margin-top: 60px;
}

.page_chat_step_button {
  display: inline-block;
  color: black;
  font-weight: 900;
  padding: 18px;
  border-radius: 20px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  cursor: pointer;
}

.page_chat_step_button_clicked {
  color: white;
  background-color: #464fde;
}


.link_come_back_to_chats_without_saving {
  float: right;
  cursor: pointer;
  font-size: 70%;

  margin: 10px; /*to get the "come back" link a bit more vertically aligned!*/
}
#link_come_back_to_chats_without_saving_txt {
  color: black;
}





#chat_correctness_checkings_message_to_customer {
/*  display:none;
  background-color: #f04000;
  color: white;
  position: fixed;
  bottom:0;left:0;
  width: 100%;

  padding: 13px;
  padding-top: 5px;
  padding-bottom: 5px;

  transition: all 0.15s;*/
  display:none;
  background-color: white;
  color: #f04000;
  /*font-size: 82%;*/
  font-size: 100%;
  position: fixed;
  bottom:0;left:25%;
  width: 50%;

  border-radius: 3px;

  padding: 13px;
  padding-top: 5px;
  padding-bottom: 5px;

  margin-bottom: 5px;

  box-shadow: 0 0 2pt 2pt #f04000;
}

/*#add_chatblocks_buttons_wrapper {
  margin: 10px;
  text-align: center;
}*/

/*.chatblock_button {
  display: inline;
  
  cursor: pointer;
  background: #ffffee;
}
.chatblock_button:hover {
  background: #ffaaff;
}*/


/*.chatblock_button {
  display: inline;
  cursor: pointer;*/

/*  margin: 5px;
  padding: 7px;
  border-radius: 4px;*/
/*  border-top: 1px solid #0084FF;
  color: #0084FF;
  background-color: white;*/

/*  color: white;
  background-color: #0084ff;*/


/*  padding: 13px;
  padding-top: 10px;
  padding-bottom: 10px;

  right: 35px;
  bottom: 35px;

  border-radius: 4px;
  color: white;
  background-color: #0084ff;

  cursor: pointer;

  transition: all 0.15s;
}*/
/*.chatblock_button:hover{

  -webkit-filter: brightness(108%);
}*/

#chat_build_area_div_wrapper {

  /*background-color:#bdbdbd;*/
  background-color: transparent;

  display: block;

  position: absolute;
  left: 0px; 

  width: 100%;
  height: 100%;
/*  width: 5000px;
  height: 5000px;*/

  overflow: none;
}
#chat_build_area_div {

  /*background-color:#fffefb;*/
  background-color: #464fde; /*bleu mauve*/

  /*background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);*/
  /*background: linear-gradient(-45deg, #f0b3a1, #eba7c2, #98d0e3, #94e0cd);*/
/*  background-size: 400% 400%;
  -webkit-animation: Gradient 80s ease infinite;  
  -moz-animation: Gradient 80s ease infinite;
  animation: Gradient 80s ease infinite;*/
  /*FAIT RAMER LE MAC DE MATT ??*/

  /*to center the div*/
   position: absolute;
  left: 0px; 
  /*top: 0px;*/ 
/*  margin-left: auto; 
  margin-right: auto; */

/*  width:100%;
  height: 60%;*/
  /*overflow:none;*/
/*  width: 10000px;
  height: 10000px;*/
/*  width: 20000px;
  height: 20000px;*/
  width: 20000px;
  height: 20000px;
  /*transition: all 0.2s;*/
  /*z-index: 0;*/
  
  /*overflow-x:hidden;*/
}
@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}
#chat_canvas_links {
/*  position: absolute;
  top: 0;
  left: 0;*/

/*  width: 2000px;
  height: 2000px;*/

/*  transform-origin: 0px 0px;
  transform: scale(4.0);*/

  position: fixed;
  /*position: absolute;*/

  top: 0; right: 0; bottom: 0; left: 0;

  background-color: rgba(158, 167, 24, 0.0);

  z-index: 9999;
  pointer-events: none;

  /*opacity: 0.99;*/
}
#chat_build_area_div_multiple_selection_rectangle {
  position: relative;
  border: 6px solid #DDDDDD;
}

.chatblock {
  position: absolute;
  background-color: #f0f0f0;
  cursor: move;
  /*padding: 10px;*/
  /*border-radius: 5px;*/
  padding: 15px;
  border-radius: 20px;

  display: inline-block; /*necessary to get a fixed size!*/
  width: 350px;

  /*z-index: 10000;*/
}
.chatblock_selected {
  /*outline: 1px solid blue;*/
  /*box-shadow: 0 0 3pt 2pt blue;*/
  box-shadow: 0 0 6pt 5pt #FF496F;
  /*border: 1px solid rgba(81, 203, 238, 0.5);*/
  /*box-shadow: 0 0 3pt 2pt rgba(81, 203, 238, 0.5);*/
}
.chatblock_declaration {
  /*background-color: #27CC14;*//*#FF9E00*/
  background-color: #CCCCCC;
}
.chatblock_choices {
  background-color: #0084FF; /*blue messenger*/
}
.chatblock_logic {
  background-color: #858585; /*dark grey*/
}
.chatblock_sending {
 /* background-color: #fffced;*/ /*pale yellow*/
  background-color: #fafafa;
}
.chatblock_subdiv{
  /*display: block;*/
  position: relative;/*important for "veil_if_too_far" overlay which is a child with position: absolute;*/
  /*width:100%; */

 /* display: table;*/
  /*background-color: lightblue;*/
}

.chatblock_item_integratedsending_mailchimp_loadmergefieldsbutton img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}


.chatblock_style_dropdown {
    position: relative;
    /*display: flex;*/

    /*color: #cb3f79; *//*indian pink*/
  margin: 3px;
  padding: 4px;

  /*color: #cb3f79;*/
  /*font-size: small;*/
  /*font-weight: 800;*/
  
  min-height: 40px; /*because "Style ▼" and "Style parameters" buttons are "float" "left" and "right" respectively,
  they need some minimal height in order not to overlap the next divs*/
}
.chatblock_style_dropdown_trigger_button {
  float: left;

  cursor: pointer;
  background-color: #cb3f79; /*indian pink*/
  border-radius: 4px;
  color: white;
  padding: 8px;
  /*transition: all 0.15s;*/
}
.chatblock_style_dropdown_trigger_button:hover {
    -webkit-filter: brightness(118%);
}
.chatblock_style_dropdown_content {
    display: none;
    position: absolute;
    top:0;
    /*background-color: #ffffff;*/ /*#CCCCCC;*/ /*#f9f9f9;*/
    width: 1000px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

    border-radius: 4px;
    background-color: #ffffff;

    padding: 4px;
    padding-top: 25px;
}
.chatblock_style_dropdown_content_close_button {
  /*display: inline-block;*/
  /*width: 70px;*/
  /*float: right;*/
  position: absolute;
    top: 0;
    right: 0;
  cursor: pointer;
}
.chatblock_style_dropdown_content_close_button:hover {
  -webkit-filter: brightness(105%);
}
/*.dropdown:hover .dropdown-content {*/
/*.chatblock_style_dropdown_display {
    display: block;
}*/
/*.chatblock_style_dropdown_img {
    width: 70px;
    height: auto;
}*/
.chatblock_style_dropdown_txt {
    padding: 5px;
    text-align: center;
    font-size: small;
}
.chatblock_style_dropdown_button {
  display: inline-block;
  
  cursor: pointer;

  width: 190px;
  height: 115px;
  /*margin: 1px;*/

  /*border-radius: 5px;*/
  /*small border*/
/*  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.24);
  box-shadow: 0 0 1px rgba(34, 25, 25, 0.4);*/
  border:1px solid #f0f0f0;

  /*overflow: hidden;*/

  transition: all 0.15s;
}
.chatblock_style_dropdown_button:hover {
/*  -webkit-filter: brightness(118%);*/
/*    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);*/
  box-shadow: 0 0 2pt 2pt #f0f0f0;
}
.chatblock_style_dropdown_button_selected {
  /*box-shadow: 0 0 2pt 2pt #cb3f79;*/
  border: 1px solid #464fde; /*bleu mauve*/
}
.chatblock_style_dropdown_preview {
  zoom: 0.5;
}
.chatblock_style_dropdown_preview_wrapper {
  height: 46px;
  overflow: hidden;
}
.chatblock_style_parameters_div {
  margin-left: 4px;
  /*display: inline-block;*/
  /*float : right;*/
/*  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.24);
  box-shadow: 0 0 1px rgba(34, 25, 25, 0.4);*/
}
.chatblock_style_parameters_div_button {
  float: right;

  cursor: pointer;
  background-color: #cb3f79; /*indian pink*/
  border-radius: 4px;
  color: white;
  padding: 8px;

  font-size: small;
}
.chatblock_style_parameters_div_button:hover {
  -webkit-filter: brightness(118%);
}
.chatblock_style_params_content_div {
  display: none;
  /*display: inline-block;*/
}
.style_parameter_wrapper_div {
  display: inline-block;
  border-radius: 4px;
  background-color: #e1e1e1;
  /*background-color: rgba(200,200,200, 0.76);*/
  padding: 2px;
  margin: 2px;
}
.style_parameter_text {
  font-size: small;
  color: #292929;
}
.style_parameter_input_number {
  width: 41px;
}






.chatblock_element_inline{
  display: inline-block;
}
.chatblock_icon_duplicate_button, .chatblock_icon_delete_button{
  float: right;
}
.chatblock_colordiv{
  display: inline-block; /*necessary to get a fixed size!*/
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.chatblock_color0div{
  border:1px solid #464fde;
  width: 10px;
  height: 10px;
}
.chatblock_hat_color0 {
  border-top: none;
}
.chatblock_hat_color1 {
  border-top:19px solid #FF4F00;
}
.chatblock_hat_color2 {
  border-top:19px solid #00A963;
}
.chatblock_hat_color3 {
  border-top:19px solid #FFD819;
}
.chatblock_hat_color4 {
  border-top:19px solid #FF496F;
}
.chatblock_hat_color5 {
  border-top:19px solid #0080B6;
}

.chatblock_icon_button {
  cursor: pointer;

  /*z-index: 16777271;*/
}
.chatblock_icon_button:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}
/*.chatblock_icon_add_item {
  margin: 5px;
  padding: 7px;
  border-radius: 4px;
  border-top: 1px solid #0084FF;
  color: #0084FF;
  background-color: white;
}*/
.chatblock_icon_add_class_to_choice {
  margin: 2px;
  padding: 3px;
  border-radius: 7px;
  border-top: 1px solid #0084FF;
  color: #0084FF;
  background-color: white;

  text-align: center;
  font-size: 70%;
}
.square_image_small{
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.chatblock_input_name {
  background-color: #f0f0f0;
  width: 100%;
}
.chatblock hr{
  margin: 10px 0px 0px;
    border: 0;
    border-top: 1px solid #e6e6e6;
}

.chatblock_circle {
  /*display: block;*/
/*  position:absolute;
  bottom: -50px;*/
  /*left: auto;*/
  /*margin-left:50%;*/

  display: block;
  position:absolute;

  border: 2.5px solid #DDDDDD;
  border-radius: 50%;

  background: /*white*/#00c3a2; /*greenish*/

  width: 20px;
  height: 20px;

  cursor: pointer;

  z-index: 16777272; /*above the 'chatblock_item_veil_too_far' !*/
}
/*useful when drawing a link*/
.chatblock_circle_pointed {
  /*box-shadow: 0 0 3pt 2pt #cb3f79;*/
  box-shadow: 0 0 4pt 4pt white;
  /*border: 4px solid yellow !important;*/
}
.chatblock_top_circle_linked {
  /*background-color: white !important;*/ /*must erase the bg color of 'chatblock_declaration_circle_top_link' and 'chatblock_choices_circle_top_link'*/
  border: 4px solid /*white*/#00c3a2 /*greenish*/ !important;
}
/*.chatblock_nontop_circle_pointed {
  box-shadow: 0 0 3pt 2pt blue;
}*/
.chatblock_nontop_circle_linked {
  background-color: /*white*/#00c3a2 /*greenish*/ !important; /*must erase the bg color of 'chatblock_declaration_circle_top_link' and 'chatblock_choices_circle_top_link'*/
}
.chatblock_declaration_circle_top_link {
  /*to center the div horizontally*/
  left: 0;
  right: 0;
  margin: 0 auto;

  top: -10px;
  /*top: 0px;*/

  /*background-color: #f04000;*/ /*orange*/
  background-color: transparent;
  border: 4px solid #f04000;
}
.chatblock_declaration_circle_bottom_link {
  /*to center the div horizontally*/
  left: 0;
  right: 0;
  margin: 0 auto;

  bottom: -10px;
  /*bottom: 0px;*/
}

.chatblock_choices_circle_top_link {
  /*to center the div horizontally*/
  left: 0;
  right: 0;
  margin: 0 auto;

  top: -10px;
  /*top: 0px;*/

  /*background-color: #f04000;*/ /*orange*/
  background-color: transparent;
  border: 4px solid #f04000;
}


.chatblock_choices_circle_bottom_link {
  /*to center the div horizontally*/
  left: 0;
  right: 0;
  margin: 0 auto;

  bottom: -10px;
  /*bottom: 0px;*/
}

.chatblock_choices_choice_circle_right_link {
  /*to center the div vertically*/
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;

  right: -10px;
  /*right: 0px;*/

  background-color: #f04000; /*orange*/


  /*border: 9px solid #f04000;*/
  /*z-index: 99999;*/
}
.chatblock_choices_choice_circle_left_link {
  /*to center the div vertically*/
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;

  left: -10px;

  background-color: #f04000; /*orange*/
}

.chatblock_logic_circle_top_link {
  /*to center the div horizontally*/
  left: 0;
  right: 0;
  margin: 0 auto;

  top: -10px;
  /*top: 0px;*/

  background-color: transparent;
  border: 4px solid #f04000;
}

.chatblock_logic_rule_circle_right_link {
  /*to center the div vertically*/
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;

  right: -10px;
  /*right: 0px;*/

  background-color: #f04000; /*orange*/
}
.chatblock_logic_rule_circle_left_link {
  /*to center the div vertically*/
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;

  left: -10px;

  background-color: #f04000; /*orange*/
}

.chatblock_sending_circle_top_link {
  /*to center the div horizontally*/
  left: 0;
  right: 0;
  margin: 0 auto;

  top: -10px;
  /*top: 0px;*/

  background-color: transparent;
  border: 4px solid #f04000;
}
.chatblock_sending_circle_bottom_link {
  /*to center the div horizontally*/
  left: 0;
  right: 0;
  margin: 0 auto;

  bottom: -10px;
  /*bottom: 0px;*/
}

.chatblock_item_wrapper {
  position: relative;
  display: block;
  width: 100%;

  

/*  margin-top: 10px;
  margin-bottom: 10px;*/

  /*padding: 3px;*/

  /*border-radius: 5px;*/

  border-radius: 5px;
  margin-bottom: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgba(255,255,255, 0.4);

  /*max-height: 350px;*/ /*The block may be tall, particularly for large images! But not too much! */
}
/*.chatblock_item_image_wrapper {
  height: 400px;
}*/
.chatblock_item_veil_too_far {
  /*background-color: rgba(70,79,222, 0.5);*/
  background-color: rgba(255,255,255, 0.5);
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  z-index: 16777271;

  cursor: move;
}

.chatblock_item_txt {
  position: relative;
  display: block;

  resize: none;

  background-color: white;
  width: 100%;
/*  margin:0;
  padding: 0;*/

/*  margin-top: 10px;
  margin-bottom: 10px;*/

  /*background-color: #f0f0f0;*/

  /*necessary for textarea autogrow*/
/*  overflow: hidden;
  resize: none;
  box-sizing: content-box;*/
  /*height: 200px;*/
}
/*small modification for Quill text editor : the 'Snow' theme has a border --> we don't want it!*/
.ql-snow {
  border: none !important;
}
/*TODO remove that from here IF you translate the software...
  Small modification for Quill text editor : link text in French */
.ql-snow .ql-tooltip[data-mode="link"]::before {
    content: "Entrez votre lien :" !important;
}
.chatblock_item_delete_icon, .chatblock_item_topdown_icon {
  float: right;
  width: 16px;
  height: 16px;

  margin-left: 5px;
  margin-right: 5px;
/*  display: block;
  position: absolute;
  right: -8px ;
  top: -8px;

  width: 16px;
  height: 16px;*/
}

.chatblock_item_script, .chatblock_item_calculus, .chatblock_item_formscript {
  position: relative;
  display: block;

  resize: none;

  background-color: white;
  width: 100%;
}
.chatblock_item_calculus_note {
  color: black;
  font-size: small;
}
/*.chatblock_item_delete_icon img {
  width: 16px;
  height: 16px;
}*/

.chatblock_item_img_removallink {
  display: none;
  /*clear: right; *//*because it's placed just after the delete,top,down arrows item that are positioned using float: right; 
  we have to call this in order to "jump the line"! */
  /*Finally : I prefer to solved the alignment issue with the delete,top,down arrows buttons icons by setting a limited width!*/
  width: 50%;
  color: red;
  font-size: small;
  cursor: pointer;

  /*background-color: white;*/
}
.chatblock_item_img_removallink:hover {
  -webkit-filter: brightness(118%);  
}
.chatblock_item_img {
  position: relative;
  display: block;

  background-color: white;
  width: 100%;
/*  margin:0;
  padding: 0;*/

  /*background-color: #f0f0f0;*/
}
.chatblock_item_img_preview {
  width: 100%;
  /*height: 100%;*/
  /*max-height: 100%;*/
  max-height: 350px; /*The block may be tall, particularly for large images! But let's limit it! */

  /*background-color: blue;*/
  overflow: hidden;

  text-align: left;
}

.chatblock_item_img_preview img {
  position:relative;
  width: 100%;
}
.chatblock_item_img_width_percentage {
  width: 12%;
}

.chatblock_item_videolink {
  position: relative;
  display: inline-block;

  background-color: white;
  width: 100%;
}

.chatblock_item_sound {
  position: relative;
  display: block;

  background-color: white;
  width: 100%;
/*  margin:0;
  padding: 0;*/

  /*background-color: #f0f0f0;*/
}

.chatblock_item_field {
  position: relative;
  display: block;

  background-color: white;
  width: 100%;
}
.chatblock_item_pause {
  position: relative;
  display: inline-block;

  background-color: white;
  width: 21%;
}
.chatblock_item_donotshowtriggers {
  position: relative;
  display: inline-block;

  background-color: white;
  width: 11%;
}
.chatblock_item_facebookshareurl {
  position: relative;
  display: block;

  background-color: white;
  width: 100%;
}

.chatblock_field_empty_but_shouldnt {
  /*border: 1px solid red;*/
  background-color: #f04000 ; /*orange*/
}
.chatblock_field_empty_but_shouldnt::placeholder {
    color: white;
    opacity: 1; /* Firefox */
}

.chatblock_field_empty_but_shouldnt:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: white;
}

.chatblock_field_empty_but_shouldnt::-ms-input-placeholder { /* Microsoft Edge */
   color: white;
}

/*.chatblock_choices_layout_selected {
  box-shadow: 0 0 3pt 2pt blue;
}*/

/*.chatblock_choices_choice {
  border-radius: 1px;
  margin-bottom: 17px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgba(255,255,255, 0.4);
}*/


.chatblock_item_class_delete_icon {
  float: right;
  width: 11px;
  height: 11px;

  margin-left: 4px;
  margin-right: 4px;
}
.chatblock_choices_choice_class_table {
  width: 100%;
}
.chatblock_choices_choice_class_name, .chatblock_choices_choice_class_operation {
  position: relative;
  display: block;

  /*background-color: white;*/
  width: 100%;
}


#chat_build_area_save_button {
  position: fixed;
  display: block;

  right: 35px;
  bottom: 15px;
}
#chat_build_area_save_button:hover {
  -webkit-filter: brightness(118%);
}

#add_declaration_button {
  position: absolute;
  display: inline;

  left: 15px;
  top: 15px;
  /*width: 82px;*/
  width: 110px;

  z-index: 10000;
}
#explainer_add_declaration_button {
  position: absolute;
  display: inline;
  left: 150px;
  top: 28px;
  z-index: 10000;
}
/*#add_field_button {
  position: absolute;
  display: inline;

  left: 15px;
  top: 65px;
  width: 82px;

  z-index: 10000;
}*/
#add_choices_button {
  position: absolute;
  display: inline;

/*  left: 105px;
  top: 15px;*/
  left: 15px;
  top: 65px;
  /*width: 82px;*/
  width: 110px;

  z-index: 10000;
}
#explainer_add_choices_button {
  position: absolute;
  display: inline;
  left: 150px;
  top: 78px;
  z-index: 10000;
}
#add_logic_button {
  position: absolute;
  display: inline;

/*  left: 195px;
  top: 15px;*/
  left: 15px;
  top: 115px;
  /*width: 82px;*/
  width: 110px;

  z-index: 10000;
}
#explainer_add_logic_button {
  position: absolute;
  display: inline;
  left: 150px;
  top: 128px;
  z-index: 10000;
}
#add_sending_button {
  position: absolute;
  display: inline;

  left: 15px;
  top: 165px;
  /*width: 82px;*/
  width: 110px;

  z-index: 10000;
}
#explainer_add_sending_button {
  position: absolute;
  display: inline;
  left: 150px;
  top: 178px;
  z-index: 10000;
}
#zoominview_button {
  position: fixed;
  display: inline;
  z-index: 10000;
  left: 15px;
  bottom: 30px;
}
#zoomoutview_button {
  position: fixed;
  display: inline;
  z-index: 10000;
  left: 60px;
  bottom: 30px;
}
#resetview_button {
  position: fixed;
  display: inline;
  z-index: 10000;
  left: 105px;
  bottom: 45px;
}
#explainer_view_buttons {
  position: fixed;
  display: inline;
  left: 250px;
  bottom: 39px;
  z-index: 10000;
}
.view_button {
  -webkit-filter: brightness(82%);/*to see them better outside the purple frame*/
  width: 40px;
  height: 40px;
  color: white;
  font-size: small;
  cursor: pointer;
  transition: all 0.15s;
}
.view_button:hover {
  -webkit-filter: brightness(93%);
}
.chat_edition_button {
  margin: 5px;
  padding: 7px;
  /*border-radius: 4px;*/
/*  border-top: 1px solid #0084FF;
  color: #0084FF;
  background-color: white;*/
  background-color: #cb3f79; /*indian pink*/
  border-radius: 20px;
  color: white;
  font-weight: 800;

  cursor: pointer;
}

#chat_content_run_preview_window {

  position: absolute;
  right: 0;
  /*top: 0;*/

  background-color: #556de5; /**/ /*#464fde;*/

  width: 30px;
  height: 70%;
  border-radius: 3px;

  padding: 3px;

  color: white;

 /*z-index: 16777269;*/

 /*box-shadow: 12px 0 15px -4px rgba(0,0,0,0.36), -12px 0 8px -4px rgba(0,0,0,0.36);*/
 box-shadow: 6px 0 15px -4px rgba(0,0,0,0.36), -6px 0 8px -4px rgba(0,0,0,0.36);

  -webkit-transition: width 0.3s ease-out;
  -moz-transition: width 0.3s ease-out;
  -o-transition: width 0.3s ease-out;
  transition: width 0.3s ease-out;
}
.chat_content_run_preview_window_showhide_button {
  display: inline-block;
}
#chat_content_run_preview_window_top_bar {
  display: inline-block;
}
.chat_content_run_preview_window_showhide_button_image {
  width: 30px;
  height: 30px;
  cursor: pointer;

  vertical-align: sub;

  -webkit-transition: all 0.2s ease; /*transition for brightness*/
  transition: all 0.2s ease;
}
.chat_content_run_preview_window_showhide_button_image:hover {
  -webkit-filter: brightness(82%); 
}
.chat_content_run_preview_window_content {
  transition: opacity 0.2s ease;
}

/*060418*/
#chat_content_run_preview_window_embedded {
  width: 100%; /*so that the chat embedded in this KNOWS that the width is defined */
  height: 92%; /*because of the button+Preview */
  /*background-color: lightblue;*/

  background-color: white;
  border-radius: 3px;
}
#chat_content_run_preview_window_reload_buttons {
  display: block;
  position:absolute;

  /*to center the div vertically*/
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;

  left: -30px;

/*  border: 2.5px solid #DDDDDD;
  border-radius: 50%;*/

  background: transparent;

  z-index: 16777272; /*above the 'chatblock_item_veil_too_far' !*/
}
.chat_content_run_preview_window_reload_button {
  cursor: pointer;
  text-align: center;
  -webkit-transition: all 0.2s ease; /*transition for brightness*/
  transition: all 0.2s ease;
}
.chat_content_run_preview_window_reload_button img {
  width: 20px;
  height: 20px;
}
.chat_content_run_preview_window_reload_button a, .chat_content_run_preview_window_reload_button a:hover {
  text-decoration: none;
  color: white !important;
}

.chat_content_run_preview_window_reload_button:hover {
  -webkit-filter: brightness(82%); 
}

.chat_save_button {
  padding: 13px;
  padding-top: 10px;
  padding-bottom: 10px;

/*  border-radius: 4px;
  background-color: #0084ff;*/
  background-color: #cb3f79;
  border-radius: 20px;
  color: white;

  cursor: pointer;

  transition: all 0.15s;
}
.chat_edition_button:hover {
  -webkit-filter: brightness(108%);
}

/*.chat_page_template_selected {
  box-shadow: 0 0 3pt 2pt #03a6ff;
}*/

/*.input_trigger_display_url {
  width: 400px;
}*/

/*To show that some features are disabled due to Plan0, or 1*/
.chat_non_available {
  cursor: pointer;
    -webkit-filter: grayscale(100%) opacity(.4);
       -moz-filter: grayscale(100%) opacity(.4);
            filter: grayscale(100%) opacity(.4);
}





/** Additional Fonts in Quill Editor *

/*CF https://codepen.io/anon/pen/oYdyKa thanks!!!*/
/*Default font in the dropdown*/
.ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: 'Open Sans';
    font-family: 'Open Sans', sans-serif;
}

/*Set the names of the dropdown select options !  (hard to find the right code...) */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=opensans]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=opensans]::before {
    content: 'Open Sans';
    font-family: 'Open Sans', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sourcesanspro]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sourcesanspro]::before {
    content: 'Source Sans Pro';
    font-family: 'Source Sans Pro', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=roboto]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=roboto]::before {
    content: 'Roboto';
    font-family: 'Roboto', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=arial]::before {
    content: 'Arial';
    font-family: 'Arial', sans-serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=georgia]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=georgia]::before {
    content: 'Georgia';
    font-family: 'Georgia', sans-serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=raleway]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=raleway]::before {
    content: 'Raleway';
    font-family: 'Raleway', sans-serif;
}

/*Quill js color textbox cf https://stackoverflow.com/questions/42068335/quill-js-color-textbox*/
.ql-color .ql-picker-options [data-value=custom-color] {
  background: none !important;
  width: 100% !important;
  height: 20px !important;
  text-align: center;
}
.ql-color .ql-picker-options [data-value=custom-color]:before {
  content: 'Couleur personnalisée';
}
.ql-color .ql-picker-options [data-value=custom-color]:hover {
  border-color: transparent !important;
}

/*NEW210818
"The Editor Can't Get Focus On IOS Platform" Matt semblait avoir ce souci sur son safari
cf https://github.com/KillerCodeMonkey/ngx-quill/issues/86*/
.ql-editor {
    -webkit-user-select: text;
}

/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
/*Share page*/
#page_share {
  background-color: transparent;
}
.gobacktochats {
  cursor:pointer;
  font-size: 80%;
}

.input_txt_share {
  font-size:22px;
  border-radius: 5px;
  width: 500px;
}
.input_number_share {
  /*font-size:22px;*/
  border-radius: 5px;
  width: 50px;
}

#integration_cliquableimage_img_preview {
    width: 50px;
    height: 50px;

    border-radius: 50%;
}

/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
/*Profiling data page*/
#page_profiling {
  display: block;
  background-color: transparent;
}
/*.export_all_recs {
  cursor:pointer;
}*/


#page_profiling_steps_buttons_wrapper {
  position: absolute;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; /*to center!*/

  text-align: center;
  width: 100%;
}

/*Margin for page_chat_steps_buttons_wrapper !!!*/
#page_profiling__step_statistics, #page_profiling__step_journeys {
  /*position: relative;*/
  margin-top: 60px;
}

.page_profiling_step_button {
  display: inline-block;
  color: black;
  font-weight: 900;
  padding: 18px;
  border-radius: 20px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  cursor: pointer;
}

.page_profiling_step_button_clicked {
  color: white;
  background-color: #464fde;
}

#chat_statistics_area_div_wrapper {

  /*background-color:#bdbdbd;*/
  background-color: transparent;

  display: block;

  position: absolute;
  left: 0px; 

  width: 100%;
  height: 100%;
/*  width: 5000px;
  height: 5000px;*/

  overflow: none;
}
#chat_statistics_area_div {

  /*background-color:#fffefb;*/
  background-color: #464fde; /*bleu mauve*/

  /*background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);*/
  /*background: linear-gradient(-45deg, #f0b3a1, #eba7c2, #98d0e3, #94e0cd);*/
/*  background-size: 400% 400%;
  -webkit-animation: Gradient 80s ease infinite;  
  -moz-animation: Gradient 80s ease infinite;
  animation: Gradient 80s ease infinite;*/
  /*FAIT RAMER LE MAC DE MATT ??*/

  /*to center the div*/
   position: absolute;
  left: 0px; 
  /*top: 0px;*/ 
/*  margin-left: auto; 
  margin-right: auto; */

/*  width:100%;
  height: 60%;*/
  /*overflow:none;*/
/*  width: 10000px;
  height: 10000px;*/
/*  width: 20000px;
  height: 20000px;*/
  width: 20000px;
  height: 20000px;
  /*transition: all 0.2s;*/
  /*z-index: 0;*/
  
  /*overflow-x:hidden;*/
}
#stats_reset_button {
  left: 15px;
  top: 15px;
  text-align: center;
  font-size: small;
}
/*the chat can be loaded and triggered (when the user clicks on a trigger, or triggered on exit intent)
or just loaded and directly displayed (when embedded directly into a page)*/
#stat_nbdisplayed {
  left: 15px;
  top: 65px;
}
/*#stat_nbloads {
  left: 15px;
  top: 65px;
}*/
/*#stat_nbloads_reset_button {
  left: 130px;
  top: 16px;
}*/
/*#stat_nbtriggered {
  left: 15px;
  top: 115px;
}*/
/*#stat_nbtriggered_reset_button {
  left: 130px;
  top: 66px;
}*/
.stat_global_number_chat {
  position: absolute;
  display: inline;

  z-index: 10000;

  -webkit-filter: brightness(82%);/*to see them better outside the purple frame*/
/*  width: 40px;
  height: 40px;*/
  color: white;
}

.remove_stat_red_cross {
  color: #ffbfbf;
  cursor: pointer;
  transition: all 0.15s;
}
.remove_stat_red_cross:hover {
  color: red;

}
#zoominview_in_stats_button {
  position: fixed;
  display: inline;
  z-index: 10000;
  left: 15px;
  bottom: 30px;
}
#zoomoutview_in_stats_button {
  position: fixed;
  display: inline;
  z-index: 10000;
  left: 60px;
  bottom: 30px;
}
#resetview_in_stats_button {
  position: fixed;
  display: inline;
  z-index: 10000;
  left: 105px;
  bottom: 45px;
}
/*Statistics in the blocks*/
.page_profiling_step_statistics_div {
  color: #171717; /*almost black*/
  font-weight: 700;
  font-size: 2em;
}
.page_profiling_step_statistics_div_on_white {
  color: darkgrey;
}
.page_profiling_step_statistics_getwordsdata {
  display: inline-block;
  padding: 13px;
  padding-top: 10px;
  padding-bottom: 10px;

  background-color: #cb3f79;/*pink*/
  border-radius: 20px;
  color: white;

  cursor: pointer;

  transition: all 0.15s;
}
.page_profiling_step_statistics_getwordsdata:hover {
  /*-webkit-filter: brightness(108%); causes flicks,flucks and blooms... in fact some visual artefacts*/
  background-color: #d6759e; /*lighter pink*/
}
.page_profiling_step_statistics_hidewordsdatadivs:hover {
  color: #828282;
}
.page_profiling_step_statistics_hidewordsdatadivs {
  display: inline-block;
  padding: 13px;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.page_profiling_step_wordslist_div {

  color: black;
  background-color: white;
  height: 150px;
  overflow-y: auto; /*for simple scroll*/
}
.page_profiling_step_wordscloud_div {
  position: relative;
  /*width: 150px;*/
/*  width: 100%;
  height: 80%;*/
  width: 350px;
  height: 350px;
  /*because the word cloud plugin needs defined dimensions and position : cf http://mistic100.github.io/jQCloud/#installation*/

  background-color: white;
  /*color: white;*/
  color: black;
}



/** Journeys Step */
.remove_recording_a_tag {
  cursor: pointer;
}
.remove_recording_a_tag:hover {
  -webkit-filter: brightness(118%);
}
.profiling_info_div {
  display: inline-block !important; /*!important is used to to override the other classes display*/
  overflow: hidden !important;
  padding: 3px !important;
/*  width: 80px !important;
  height: 50px !important;*/
  width: 150px !important;
  height: 100px !important;
  font-size: 75% !important;
}
/*.profiling_info_rightarrow_div {
  display: inline-block;
  background-color: red;
  height: 100px;
  padding-bottom: 45px;
}*/
.profiling_info_vars_div {
  overflow: auto !important;
  text-align: left !important;
}

/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
/*Training page*/

#page_training {
  background-color: transparent;
}

#current_training_div {
  text-align: center;
  height: 480px;
}
#current_exercise_div {
  text-align: center;
  min-height: 50vh;
}

/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
/*Help page*/

#page_help {
	/*background-color: #f0f0f0;*/
  background-color: transparent;
}

#page_help_intro {
	color:#8a8a8a;
	text-align: left;
}
#page_help_faq_title {
	font-weight: 900; font-size: 150%; color:#3d3d3d;
	text-align: center;
}
.faq_question {
	font-weight: 300;
	font-size: 120%;
}
.faq_answer {
	color:#8a8a8a;
	font-size: 92%;
}



/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
/*Affiliate link page*/

#page_affiliatelink {
  background-color: transparent;
}

#page_affiliatelink_title {
  font-weight: 900; font-size: 150%; color:#3d3d3d;
  text-align: center;
}
#page_affiliatelink_intro {
  color:#4d4d4d;
  text-align: left;
}