/** 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;*/

}

input[type=text], input[type=number], 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;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
input[type=text]:focus, input[type=number]: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);
}

.error_msg {
  color: 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 {
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;

    padding: 0;
    margin: 0;
    height: 100%;
    z-index: 16777270;

    opacity:0;
    transition: all 0.17s ease-out;
    -webkit-transition: all 0.17s ease-out;
    background-color: rgba(0, 0, 0, 0.5);
}
.explainer_global_overlay_popup {
    position: fixed;
    left: 50%;
    top: 15%;
}
@media (max-width: 1150px) {
  .explainer_global_overlay_popup {
      top: 6%;
  }
}
.explainer_global_overlay_content_wrapper {
    position: relative;
    left: -50%;
    top: -15%;
    display: block;
    z-index: 16777271;
    padding: 12px;
}
@media (max-width: 1150px) {
  .explainer_global_overlay_content_wrapper {
    top: -6%;
  }
}
.explainer_global_overlay_close {
    right: 0!important;
    color: #fff!important;
    top: 0!important;
    border-radius: 50%!important;
    text-align: center!important;
    width: 24px!important;
    height: 24px!important;
    font-size: 15px!important;
    font-weight: 800!important;
    position: absolute!important;
    line-height: 24px!important;
    cursor: pointer!important;
    border: 2px solid #fff!important;
    background-color: #000;
    z-index: 16777272;
    -webkit-box-shadow: -1px 1px 5px 0 rgba(0,0,0,1);
    -moz-box-shadow: -1px 1px 5px 0 rgba(0,0,0,1);
    box-shadow: -1px 1px 5px 0 rgba(0,0,0,1);
    box-sizing: initial!important;
}
/*#explainer_content {
  background: white;
}*/

.explainer_text {
  padding: 20px;
  background-color: white;
  border-radius: 5px;
}



/*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: 90px;
 /*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); */

 color: white;
/*background: #4587eb;  
background: -webkit-linear-gradient(to left, #4587eb, #3a69ff); 
background: linear-gradient(to left, #4587eb, #3a69ff); */
  /*NEW310119*/
/*  background: #24243e;
  background: -webkit-linear-gradient(to right, #24243e, #302b63, #24243e); 
  background: linear-gradient(to right, #24243e, #302b63, #24243e); */
  /*background-image: linear-gradient(to right, #302b63 0%, #2575fc 100%);*/
background: #24243e;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #24243e, #302b63, #24243e);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #24243e, #302b63, #24243e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


 z-index: 16777268;/*68 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;*/

 /*NEW290119*/
 position: fixed;
 display: inline-block;

 left: 0;

 padding-left: 10px;
 z-index: 16777268;
}
/*@media (max-width: 1000px) {
 #topbar_logo {
  height: 26px;
 }
}*/

#topbar_links {
/* position: fixed;
 display: inline-block;
 top:0;
 right: 0;
 padding-top: 47px;*/

 /*NEW290119*/
 position: fixed;
 display: inline-block;
 right: 0;
 padding-top: 27px/*16px*/;
 padding-right: 10px;
 z-index: 16777269;
}
/*#topbar_links div {
  display: inline-block;
}*/
#topbar_links a {
/* padding-left : 7px;
 padding-right : 7px;
 text-decoration: none !important;
 cursor: pointer;*/

 /*NEW150918*/
/* font-family: 'Roboto';
 font-size: 15px;
 font-weight: 800;
 transition: all 0.15s;*/ 

 /*NEW290119*/
 padding-left : 7px;
 padding-right : 7px;
 text-decoration: none !important;
 color: white !important;
 cursor: pointer;
}
#topbar_links a:visited, a:link, a:active
{
/*    text-decoration: none !important;
    color: #002e4b !important;*/
    text-decoration: none !important;
    color: white !important;
}
#topbar_links a:hover
{
/*    text-decoration: none !important;
    color: #878787 !important;*/
/*    color: #6d7d87 !important;
    -webkit-filter: brightness(110%); */
    text-decoration: none !important;
    color: #fff6c9 !important;
}



#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: 10px;
  display: inline-block;
  background-color: #fafafd;
	font-size: 80%;
	color:#1c1c1c;
	text-align: left;
	padding: 4px;
	padding-bottom: 15px;*/

  /*NEW290119*/
/*  background: #4587eb;  
  background: -webkit-linear-gradient(to left, #4587eb, #3a69ff); 
  background: linear-gradient(to left, #4587eb, #3a69ff); */
  /*NEW310119*/
/*  background: #24243e;
  background: -webkit-linear-gradient(to right, #24243e, #302b63, #24243e);
  background: linear-gradient(to right, #24243e, #302b63, #24243e);*/
/*background-image: linear-gradient(to right, #302b63 0%, #2575fc 100%);*/
background: #24243e;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #24243e, #302b63, #24243e);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #24243e, #302b63, #24243e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


  margin-top: 90px;

  font-size: 80%;
  color:white;
  text-align: center;
  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);

}
/*#brandbannertitle {
	font-family: 'Raleway', sans-serif;
  font-size: 18px;
  font-weight: 700;

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

 padding-top: 5px;
}*/
#brandbannertitle {
  font-family: 'Raleway', sans-serif;
  font-size: 72px;
   text-align: center;
   padding-bottom: 15px;
   z-index: 16777268;
}
#brandbannertitle2 {
 font-family: 'Raleway', sans-serif;
 font-size: 20px;
 text-align: center;
}
#brandbanner_border {
  position: relative;
  display: block;
  height: 2px;
  background: -webkit-linear-gradient(left, #8f6B29, #FDE08D, #DF9F28);
  background: -ms-linear-gradient(left, #8f6B29, #FDE08D, #DF9F28);
  background: linear-gradient(left, #8f6B29, #FDE08D, #DF9F28);
  box-shadow: -1px 1px 2px 1px rgba(0, 0, 0, 0.2), -1px 2px 20px rgba(255, 255, 255, 0.6) inset;
}


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

.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;

/* background: #e55045;
 background: -webkit-linear-gradient(to bottom, #e55045, #e55045);
 background: linear-gradient(to bottom, #e55045, #e55045);*/


	z-index: 10;

    margin: 5px auto;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    -webkit-transition: all .3s ease;
    -khtml-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
    border: 0;
    color: #fff;
    max-width: 100%;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    white-space: nowrap;
    background: #4587eb;  
}
#button_validate_signupin:hover {
	-webkit-filter: brightness(110%);
  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;
}
/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
/*Bars page*/
#page_bars {
	/*background-color: #f0f0f0;*/
  background-color: transparent;

}
#add_bar_icon {
	transition: all 0.3s;
	border: 0px;
	width: 60px;
	height: 60px;
	cursor: pointer;
}
#add_bar_icon:hover {
	-webkit-filter: brightness(118%);
  filter: brightness(118%);
}
#page_bars_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%);
  filter: brightness(103%);
}
.table_bicolor img:hover {
	-webkit-filter: brightness(118%);
  filter: brightness(118%);
}
/*.table_bicolor td {
	text-align: center;
	width: 60px;
}*/
.loading_image {
	width: 20px;
	height: 20px;
}
.icon_edit_bar {
	width: 28px;
	height: 28px;
}
.edit_bar_a_tag {
	cursor: pointer;
/*  text-decoration:none !important;
  color: black !important;*/
}

.icon_duplicate_bar {
  width: 18px;
  height: 18px;
}
.duplicate_bar_a_tag {
  cursor: pointer;
}

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

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

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

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


 /* height: 500px;*/

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

}

/*Preview buttons characters*/
/*picked up from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css which defines beautiful icons*/
/*.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.fa-desktop:before{content:"\f108";}
.fa-mobile:before{content:"\f10b";}*/

#toggle_preview_desktop, #toggle_preview_mobile {
/*    color: white !important;
    display: block;
    position: fixed;
    text-align: center;
*/
/*    width: 60px;
    height: 60px;*/
    /*font-size: 25px;*/
/*    font-size: 24px;
    right: 0;*/

/*    cursor: pointer;
    color: #fff;*/

/*    text-align: center;
    line-height: 1;*/
    /*padding: 12px 20px;*/
/*    padding: 6px 10px;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;*/
/*    -webkit-transition: all .3s ease;
    -khtml-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;*/
/*    border: 0;
    color: #fff;
    max-width: 100%;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    background: #4587eb;

    z-index: 16777271;*/
    /* color: white !important; */
    color: #4587eb;
    display: block;
    position: fixed;
    text-align: center;

    font-size: 24px;
    right: 0;
    text-align: center;

    cursor: pointer;

    vertical-align: middle;
    -webkit-transition: all .3s ease;
    -khtml-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    z-index: 16777271;
    width: 30px;
}
#toggle_preview_desktop {
  top: 50%;
}
#toggle_preview_mobile {
  top: 55%;
  /*right: 4px;*/ /*shift it a little bit to get it vertically aligned with the desktop toggle button*/
  font-size: 38px; /*has to be set to get comparable icons sizes*/
}
#toggle_preview_desktop:hover, #toggle_preview_mobile:hover {
  filter: brightness(150%);
  -webkit-filter: brightness(150%); 
}
.toggle_preview_inactive {
  color: black !important;
/*  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);*/
}

#page_bar_frame {
  /*  margin: 0 auto;
*/  /*width: 400px;*/
  /*display: inl;*/
  /*width: 100%;*/
/*  display: table;
   margin: auto;*/

/* NEW190219 RMVED  position: absolute;
  left: 0; 
  right: 0; */
  margin-left: auto; 
  margin-right: auto; 

   /*display: inline-block;*/
   /*width: 900px;*/
   /* NEW190219 RMVED   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;
}

/*.link_come_back_to_bars_without_saving {
  float: right;
  cursor: pointer;
  font-size: 70%;

  margin: 10px;
}
#link_come_back_to_bars_without_saving_txt {
  color: black;
}*/

.gobacktobars {
    cursor: pointer;
    font-size: 80%;
    color: black;
}

#input_bar_name {
  font-size:22px;
  border-radius: 5px;
  width: 300px;
}
#bar_presets_select {
  border-radius: 5px;
  z-index: 20;
}
#bar_presets_select a, a:hover, a:visited, a:link, a:active
{
    text-decoration: none !important;
    color: black !important;
}

#button_validate_bar {
/* transition: all 0.3s;
 color: white !important; 
 padding: 20px;
 
  display: table;
  margin: 0 auto;

 font-weight: 100 !important;

 background-color: #ff6bf2 ;

 border-radius: 5px;

 width: 300px;
 text-align: center;

 background: #e55045;
 background: -webkit-linear-gradient(to bottom, #e55045, #e55045);
 background: linear-gradient(to bottom, #e55045, #e55045);

  cursor:pointer;

  z-index: 10;*/

    display: table;
    margin: 5px auto;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    /*height: 40px;*/
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    -webkit-transition: all .3s ease;
    -khtml-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
    border: 0;
    color: #fff;
    max-width: 100%;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    white-space: nowrap;
    /*background-color: #149efc;*/
    background: #4587eb;  
}
#button_validate_bar:hover {
  -webkit-filter: brightness(110%);
  filter: brightness(110%);
}
#button_validate_bar a {
  color: white !important;
}


/*bar page : Lego block*/
  #lego_pieces {
    /*display:block;*/
    border: 1px solid #eee;
    border-radius: 8px;
    /*margin: 10px;*/
    margin-top: 10px;
    margin-bottom: 2px;
    padding: 15px;
    background-color:#fffefb; /*#fffef8;*/

    /*width: 100%;*/
  }
 #sortable_texteditors, #sortable_imgblocks, #sortable_vidblocks, #sortable_buttongotoblocks, #sortable_buttonformblocks, #sortable_htmlblocks, #sortable_buttonnothankyoublocks {
    /*display: inline-flex;*/
    /*display: inline-table;*/
    display: inline-grid;
    /*display: inline-block;*/
    /*display: flex;*/
    /*border: 1px solid #eee;*/
    /*width: 142px;*/
    min-height: 20px;
    /*margin: 0;*/
    padding: 5px 0 0 0;
    margin-right: 10px;
  }

  #line1, #line2, #line3 {
    display: flex; /*important so that lego pieces stay vertically aligned*/
    border: dashed 4px #ccc;

/*    margin: 5px;
    margin-left: 10px;
    margin-right: 10px;*/
    margin-bottom: 5px;
    padding-left: 40px;
    padding-right: 40px;
    /*width: 900px;*/
    min-width: 350px;

    border-radius: 8px; 
    /*min-height: 130px;*/
    min-height: 190px;
    /*min-height: 230px;*/
    /*height: 200px;*/

    /*justify-content: center;*/
    /*align-items: center;*/
  }

  #line1 {background: url('imgs/bg_line1_FR.png') no-repeat center;}
  #line2 {background: url('imgs/bg_line2_FR.png') no-repeat center;}
  #line3 {background: url('imgs/bg_line3_FR.png') no-repeat center;}

/*  #sortable_conversions input, #line1 input {
    width: 50px;
  }*/

  
  .sortable_item {
    /*display: block;*/
    /*display: table;*/
    display: inline-flex;
    margin:5px;
    padding:8px;
    border-radius: 4px;
    color: #3b3b3b;
    position: relative;
    cursor:move;
    max-width: 250px;
    height: auto;
    font-size: 88%;

    /*box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);*/
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
  }
  .sortable_item:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }
  #line1 .sortable_item {display: inline-block; width:auto; /*min-height: 220px;*/ }
  #line2 .sortable_item {display: inline-block; width:auto; /*min-height: 220px;*/ }
  #line3 .sortable_item {display: inline-block; width:auto; /*min-height: 220px;*/ }

  #line1 .sortable_item:hover {box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);/*box-shadow: none;*/ }
  #line2 .sortable_item:hover {box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);/*box-shadow: none;*/ }
  #line3 .sortable_item:hover {box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);/*box-shadow: none;*/ }

  .item_title {font-weight: bold;}


  /*Close button style*/
  .sortable_item .closer { position: absolute; right: 5px; top: 2px; font: bold 14px arial; color: black; padding: 1px 3px; line-height: 1; cursor: pointer; display: none;}
  .sortable_item .closer:hover { color: grey; }

  #line1 .sortable_item .closer { display: block; } 
  #line2 .sortable_item .closer { display: block; } 
  #line3 .sortable_item .closer { display: block; } 


  .item_params {display: none;}
  .item_params input[type=text] {font-size: 11px;}
  #line1 .item_params {display: block;}
  #line2 .item_params {display: block;}
  #line3 .item_params {display: block;}


  .item_params_accordion_button {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 5px 10px;
    width: 100%;
    border: none;
    border-radius: 3px;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
  }
  .item_params_accordion_button_active, .item_params_accordion_button:hover {
    background-color: #ccc;
  }
  .item_params_accordion_panel {
    /*padding: 0 18px;*/
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }

/*  #conversion_name, #conversion_age {border-top:7px solid #7465B2; background-color: #fbfbfb ;}
  #nb_conversions_this_notification {border-top:7px solid #7465B2; background-color: #fbfbfb;}
  #nb_visits_this_page, #nb_visits_this_site {border-top:7px solid #77BA57; background-color: #fbfbfb;}*/
  #txw1 {border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #txw2 {border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #txw3 {border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #txw4 {border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #txw5 {border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #txw6 {border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #igwra1 {border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #igwra2 {border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #igwra3 {border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #igwra4 {border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #vdwra1 {border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #bgtw1{border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #bgtw2{border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #bfow1{border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #htwra1{border-top:7px solid #4587eb; background-color: #fbfbfb;}
  #bntyw1{border-top:7px solid #4587eb; background-color: #fbfbfb;}
/*  #emostate_name, #emostate_age, #emostate_v{border-top:7px solid #44B0B2; background-color: #fbfbfb;}
  #nb_remainings1 {border-top:7px solid #FF51A3; background-color: #fbfbfb;}
  #timer1 {border-top:7px solid #FF8463; background-color: #fbfbfb;}
  #logoblock {border-top:7px solid white; background-color: #fbfbfb;}*/
/*e0c6ea 7465B2 faebff    e9fbdf #    FF51A3  44B0B2  FF8463*/

.txt_selectphrase/*, .txt_selectc2a*/ {
  font-size: small;
}
.selectphrase/*, .selectc2a*/ {
  max-width: 250px;
}

.listemojis {
  text-align: center;
  margin: 5px;
  /*font-size: small;*/
}
.emojilink {
  cursor: pointer;
}
#tx1,#tx2,#tx3,#tx4 {
  background: /*white*/#fffefb;
  cursor: pointer;

  min-height: 40px;
  max-height: 150px;

  margin-top: 10px;
  margin-bottom: 10px;
}

/*created on the fly in AppController.js*/
#quilleditorcontent {
  background: white;
  border-radius: 8px;
}
#quilleditor_validate_button {
/*    transition: all 0.3s;
    color: white !important;
    padding: 15px;
    display: table;
    margin: 0 auto;
    font-weight: 100 !important;
    background-color: #ff6bf2;
    border-radius: 5px;
    text-align: center;
    background: #e55045;
    background: -webkit-linear-gradient(to bottom, #e55045, #e55045);
    background: linear-gradient(to bottom, #e55045, #e55045);
    cursor: pointer;*/
    /*display: inline-block;*/

    display: table;
    margin: 5px auto;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    /*height: 40px;*/
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    -webkit-transition: all .3s ease;
    -khtml-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
    border: 0;
    color: #fff;
    max-width: 100%;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    white-space: nowrap;
    /*background-color: #149efc;*/
    background: #4587eb;  
    /*box-shadow: 0 2px 4px 0 #d8e1eb;*/
}
#quilleditor_validate_button:hover {
  -webkit-filter: brightness(110%);
  filter: brightness(110%);
}
#quilleditor_validate_button a {
  color: white !important;
}

#texteditor1, #texteditor2, #texteditor3, #texteditor4 {
  background: white;
  width: 250px;
  height: 120px;
  overflow-y: auto;
  cursor: pointer;
}


/*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;
}


/** 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;
    /*NEW300119*/
    /*background: white;*//*it was not naturally white...*/
}

/*Small customization*/
.ql-container {
  background: #fafafa;
  border-radius: 8px;
}





.txt_imgurl {
  font-size: small;
}
.input_imgurl {
  width: 245px;
}
.txt_imgwidth {
  font-size: small;
}
.input_imgwidth {
  max-width: 45px;
}


.txt_vidurl {
  font-size: small;
}
.input_vidurl {
  width: 245px;
}
.txt_vidwidth {
  font-size: small;
}
.input_vidwidth {
  max-width: 45px;
}



.input_buttongotourl {
  width: 245px;
}
#bgt1,#bgt2 {
  background: /*white*/#fffefb;
  cursor: pointer;

  min-height: 40px;
  max-height: 150px;

  margin-top: 10px;
  margin-bottom: 10px;
}
.txt_buttongotobgcolor, .txt_buttongotobdcolor {
  font-size: small;
}
.txt_buttongotoborderwidth {
  font-size: small;
}
.input_buttongotoborderwidth {
  max-width: 30px;
}
.txt_buttongotoborderradius {
  font-size: small;
}
.input_buttongotoborderradius {
  max-width: 30px;
}
.input_buttongotocustomcss {
  width: 147px;
}


/*.txt_buttonformparamstitle {

}*/
.txt_bfothankyoumessage {
  font-size: small;
}
/*.input_buttonformthankyoumessage {
  width: 86px;
}*/
#bfotkm1 {
  background: /*white*/#fffefb;
  cursor: pointer;

/*  min-height: 40px;
  max-height: 150px;*/
  margin-top: 10px;
  margin-bottom: 10px;
}
.txt_bfourl {
  font-size: small;
}
.input_buttonformurl {
  width: 245px;
}
.txt_buttonformtogglefirststeptext {
  font-size: small;
}
.txt_buttonformemailplaceholder {
  font-size: small;
}
#bfoepl1 {
  width: 71px;
}
.txt_buttonformtogglefirstname {
  font-size: small;
}
.txt_buttonformfirstnameplaceholder {
  font-size: small;
}
#bfofpl1 {
  width: 54px;
}

/*ADDED210120*/
.txt_buttonformtogglephonenumber {
  font-size: small;
}
.txt_buttonformphonenumberplaceholder {
  font-size: small;
}
#bfophpl1 {
  width: 54px;
}


#bfobtx1, #bfofsbtx1 {
  background: /*white*/#fffefb;
  cursor: pointer;

/*  min-height: 40px;
  max-height: 150px;*/
  height: 25px; /*Stick to this height because when unrolling the accordion after having edited a long text here would not unroll the whole accordion...*/
  margin-top: 10px;
  margin-bottom: 10px;
}
.txt_buttonformbgcolor,.txt_buttonformbdcolor {
  font-size: small;
}
.txt_buttonformborderwidth {
  font-size: small;
}
.input_buttonformborderwidth,  .input_buttonformfirststepbuttonborderwidth {
  max-width: 30px;
}
.txt_buttonformborderradius {
  font-size: small;
}
.input_buttonformborderradius,  .input_buttonformfirststepbuttonborderradius {
  max-width: 30px;
}
.input_buttonformcustomcss,  .input_buttonformfirststepbuttoncustomcss {
  width: 143px;
}


.txt_systemtosendcontactto {
  font-size: small;
}
#cfu, #mck,#mcl, #sgi,#sgk,#sgl, #mjp,#mjs,#mjl, #whu {
  width: 245px;
}
#explainer_clickfunnels, #explainer_mailchimp, #explainer_sgautorepondeur, #explainer_mailjet, #explainer_webhook {
  font-size: small;
}

/*.txt_formintegrationcode {
  font-size: small;
}*/
#foc {
  width: 95%;
  min-height: 90px;
}

.txt_htmlvalue {
  font-size: small;
}
#html1 {
  width: 95%;
  min-height: 90px;
}


#bnty1 {
  background: /*white*/#fffefb;
  cursor: pointer;

/*  min-height: 40px;
  max-height: 150px;*/
  margin-top: 10px;
  margin-bottom: 10px;
}



/*Margins classes, common to all blocks*/
.txt_margintop, .txt_marginbottom, .txt_marginleft, .txt_marginright {
  font-size: small;
}
.input_margin {
  max-width: 42px;
}
.txt_paddingtop, .txt_paddingbottom, .txt_paddingleft, .txt_paddingright {
  font-size: small;
}
.input_padding {
  max-width: 42px;
}


/*#txt_bardesign_bgimgurl, */#txt_bardesign_customcss {
  font-size: small;
}
#bgu, #cstcss { /*bg img url and custom css Inputs for the whole magnet*/
  width: 300px;
}

#txt_bartrigger_behavior_delay_instruction, #txt_bartrigger_behavior_scroll_instruction {
  font-size: smaller;
}
#del, #scroll {
  max-width: 42px;
}
#clohovertxt {
  width: 300px;
}


#gdprtxt {
  background: /*white*/#fffefb;
  cursor: pointer;

/*  min-height: 40px;
  max-height: 150px;*/
  margin-top: 10px;
  margin-bottom: 10px;
}
#gdprurl {
  width: 300px;
}

/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
/*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%;
}

/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
/*Recommended Products page*/

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

.page_products_frame {
  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);

  /*NEW09032019*/
  width: 85%;
}


/************************************************************/
/************************************************************/
/************************************************************/
/************************************************************/
/*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;
}