/*@import url('https://fonts.googleapis.com/css?family=Ubuntu');*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;400&display=swap');
:root {
	--main-width: 300px;	
	--main-height: 300px;
	--ui-icones-URL : url(http://www.watcheezy.net/fo/img/icones/icones_interface.png);
	--1erecouleur : 231,76,60;
	--2emecouleur : 192,57,43;
	--3emecouleur : 255,255,255;
	--4emecouleur : 167,189,24;

	--zoneMessageHeight : 76px; 
	--arrondi-widget-hg : 0px;
	--arrondi-widget-hd : 0px;
	--arrondi-widget-bd : 0px;
	--arrondi-widget-bg : 0px;
	--imageBot : url('https://www.watcheezy.net/media/user/small/_avatar.jpg');
}

/*------ pour eviter le zoom quand on clique sur un champs sur ios ---*/
#WatchBox-MessageWrapper input[type='text'],
#WatchBox-MessageWrapper input[type='number'],
#WatchBox-MessageWrapper textarea{
  font-size: 16px !important;
}
/*------*/

#vwatch {
	display: block;
    position: relative;
    z-index: 9999999999;
}

#mydesk, #mydesk p {
	font-family: 'Noto Sans', sans-serif !important;
	text-align: left !important;
	font-size: 14px;
	line-height: normal !important;
	/*color:#8f8f8f;*/
	font-weight: 500;
}
#mydesk {
	clear: both;
	position: fixed;
	display: block;
	z-index: 100001;
	-webkit-box-shadow: 0px 3px 18px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 18px rgba(0,0,0,0.2);
	box-shadow: 0px 3px 18px rgba(0,0,0,0.2);
	width: var(--main-width);
	height: var(--main-height);
	border-top-left-radius:var(--arrondi-widget-hg);
	border-top-right-radius:var(--arrondi-widget-hd);
	border-bottom-right-radius:var(--arrondi-widget-bd);
	border-bottom-left-radius:var(--arrondi-widget-bg);
}
#mydesk dt{
	padding: 0px 0px !important;
}

#tf_mydesk-button {
	cursor: pointer;
	background: rgba(231,76,60,1);
	width: 50px;
	height: 50px;
    position: fixed;
    bottom: 30px;
    right: 130px;
    color: rgba(255,255,255,1);
    border-top-left-radius: 30%;
    border-bottom-left-radius: 30%;
    border-top-right-radius: 30%;
    border-bottom-right-radius: 30%;
}

#tf_mydesk-button svg {
	padding: 6px;
}

#tf_mydesk-button-hover {
  position: relative;
  height: 100px;
}

#tf_mydesk-button:hover {
	width:150px;
	-webkit-animation: left-animate 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: left-animate 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/*--- animations 2021 ---*/
@-webkit-keyframes left-animate{
	0% {
	  -webkit-transform: width;
			  transform: translateX(300px);
	}
	100% {
	  -webkit-transform: translateX(0px);
			  transform: translateX(0px);
	}
  }
  @keyframes left-animate {
	0% {
		-webkit-transform: translateX(300px);
		transform: translateX(300px);
	}
	100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}
  }

.tf_visio:hovert {
	background-color: rgba(255,255,255,.4);
}



.wz_custom_img{
	display:none !important;
}


#mydesk svg{
	vertical-align: baseline !important;
}
#mydesk #phone_ico{
	pointer-events: none; /* pour pouvoir cliquer sur l'icone douverture de la popup */
}
#mydesk ::selection{
	color: 	rgba(167,189,24,1) !important;
	background: rgba(231,76,60,1) !important;
}
#mydesk ::-moz-selection{
	color: 	rgba(167,189,24,1) !important;
	background: rgba(231,76,60,1) !important;
}

#mydesk.open {
	width: var(--main-width);
	height: var(--main-height);
}
.imageCurrentAgent {
	border-radius: 50%;
	height: 42px;
	width: 42px;
}
#mydesk.rdState.ndState{display:none !important}
#mydesk.rdState.position_bottom_middle{
	bottom:30px;
	left:calc(50% - 25px);
}
#mydesk.open.position_bottom_middle, #mydesk.tf_open.position_bottom_middle{
	bottom:10px;
	left:calc(50% - 150px);
}
#mydesk.position_bottom_middle{
	bottom:10px;
	left:calc(50% - 150px);
}
#mydesk.open.desk_Left{
	left:0px;
	top: calc(50% - 150px);
}
#mydesk[class*='Left'].open.sideon, #mydesk[class*='left'].open.sideon{
	left:0px;
	height: 100% !important;
	bottom: 0;
	top: 0;
}
#mydesk.open.position_bottom_left{
	left:10px;
	bottom:10px;
}
#mydesk[class*='Right'].open.sideon, #mydesk[class*='right'].open.sideon{
	right:0px;
	height: 100% !important;
	bottom: 0;
	top: 0;
}
#mydesk.open.desk_Right{
	right:0px;
	top: calc(50% - 150px);
}
#mydesk.open.position_bottom_right{
	right:10px;
	bottom:10px;
}
#mydesk.wb_online #watcheBox_offline {
	display: none;
}
@-webkit-keyframes slide-right {
	0% {
	  -webkit-transform: translateX(300px);
			  transform: translateX(300px);
	}
	100% {
	  -webkit-transform: translateX(0px);
			  transform: translateX(0px);
	}
  }
  @keyframes slide-right {
	0% {
		-webkit-transform: translateX(300px);
		transform: translateX(300px);
	}
	100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}
  }
  @-webkit-keyframes slide-left {
	0% {
		-webkit-transform: translateX(-300px);
		transform: translateX(-300px);
	  }
	  100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	  }
	}
  @keyframes slide-left {
	0% {
		-webkit-transform: translateX(-300px);
		transform: translateX(-300px);
	}
	100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}
  }
  @-webkit-keyframes body_slide-left {
	0% {
		margin-left: 0px;
	  }
	  100% {
		margin-left: 300px;
	  }
	}
  @keyframes body_slide-left {
	0% {
		margin-left: 0px;
	}
	100% {
		margin-left: 300px;
	}
  }
  @-webkit-keyframes body_slide-right {
	0% {
		margin-right: 0px;
	}
	100% {
		margin-right: 300px;
	}
  }
  @keyframes body_slide-right {
	0% {
		margin-right: 0px;
	}
	100% {
		margin-right: 300px;
	}
  }
#mydesk.desk_Right.open {
	-webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#mydesk.desk_Left.open {
	-webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.TF_slide_right{
	-webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.TF_slide_left{
	-webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.TF_body_slide_right{
	-webkit-animation: body_slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: body_slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.TF_body_slide_left{
	-webkit-animation: body_slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: body_slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#mydesk.desk_Bottom #WatchBox-titleBar {
	z-index: 2;
	width: 100%;
	border-top-left-radius:var(--arrondi-widget-hg);
	border-top-right-radius:var(--arrondi-widget-hd);
}
#WatchBox-titleBar .tf_TitleBar {
    flex-direction: row;
    flex-wrap: nowrap;
}
div#contentDesk {
	position: relative;
	width: 100%;
	height: 100%;
}
.WZ-chatAgentIMG {
	position: absolute;
	bottom: 0;
	top: initial !important;
	left: -52px;
	width: 40px;
	height: 40px;
	border-radius: 20px;
}
#mydesk.open div#mydesk-outer {
	display: none;
}
/*--------------------------------------------*/
/* MODE DEMO */
#mydesk.modedemo2023{
	-webkit-box-shadow:none;
	box-shadow:none;
}
#mydesk.modedemo2023 #mydesk-outer {
	display: none;
}
#mydesk.modedemo2023 #TargetBox-close,#mydesk.modedemo2023 #TargetBox-moveWidget,#mydesk.modedemo2023 #TargetBox-reduce {
	display: none!important;
}
#mydesk.open.position_bottom_right.modedemo2023 {
    right: 10%!important;
}
#mydesk.open.desk_Bottom.modedemo2023 {
    bottom: 3%!important;
}
/* END MODE DEMO */
/*--------------------------------------------*/
#tf_iconeWhatsapp, #tf_iconeVisio, #tf_iconeCallback, #tf_iconeWebcall, #tf_iconeChatbot, #tf_iconeAgent, #tf_iconeChatbotContact, #tf_iconeAgenda, #tf_iconeMessenger, #tf_iconeAskVisio, #tf_iconeAskConf{
	width: 34px;
    height: 34px;
    position: relative;
    z-index: 2;
    border-radius: 50%;
    cursor: pointer;
}
#tf_iconeWhatsapp, #tf_iconeVisio, #tf_iconeCallback, #tf_iconeChatbot, #tf_iconeAgent, #tf_iconeChatbotContact, #tf_iconeAgenda, #tf_iconeMessenger, #tf_iconeAskVisio, #tf_iconeAskConf{
    margin-left: 8px;
	margin-top: 4px;
}
#tf_Webcall{
	margin-top: 4px;
    margin-left: 8px;
}
#tf_ContentWebcall {
    border-radius: 18px;
    height: 32px;
}
#tf_ContentWebcall.inactive {
	width: 34px;
    background-color: rgba(256, 256, 256, 0.0);
}
#tf_ContentWebcall.active {
	width: 100px;
    background-color: rgba(256, 256, 256, 0.2);
	display: inline-flex;
    flex-direction: row;
}
#tf_ContentWebcall.inactive .wave-container,
#tf_ContentWebcall.inactive #tf_iconeCloseWebcall {
	display: none;
}

#tf_iconeCloseWebcall {
	width: 25px;
    height: 25px;
    position: relative;
    z-index: 2;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(256, 0, 0, 0.8);
    top: 4px;
	margin-left: 8px;
}
#tf_phone_close {
    height: 36px;
    width: 38px;
    padding-top: 2px;
    display: block;
	fill: rgba(256, 256,256, 0.9);
}
#tf_iconeWebcall{
    margin-left: 0px;
	margin-top: 0px;
	display: flex;
    flex-direction: row;
}
#tf_iconeWhatsapp:hover, #tf_iconeVisio:hover, #tf_iconeCallback:hover, #tf_iconeWebcall:hover, #tf_iconeChatbot:hover, #tf_iconeChatbotContact:hover, #tf_iconeAgenda:hover, #tf_iconeMessenger:hover, #tf_iconeAskVisio:hover, #tf_iconeAskConf:hover{
	background-color: rgba(0,0,0,0.1);
}
.textEscalade{
    color: white;
    font-size: 0.8em;
    padding-left: 5px!important;
    background-color: #5ac1ed;
    display: inline-block;
    width: 47%;
    height: 18px;
    padding: 1px;
    margin-top: 7px;
    margin-left: -7px;
    border: 1px solid white;
    border-left: none;
	border-radius: 2px;
}

#tf_iconeAgent{
    width: 66%;
    position: relative;
    left: 97px;
}

#tf_conteneurIcones {
	transition: height 300ms ease-out;
    width: 100%;
	background-color: rgb(231,76,60);
	display: flex;
	overflow: hidden;
}

#tf_conteneurIcones.tf_openMenuChanel {
	height: 38px;
}
#tf_conteneurIcones.tf_closeMenuChanel {
	height: 0px;
}

/*--- conteneur video local et remote stream ---*/
#videosContainer {display: inline-flex; flex-direction: row; width: 100%; margin-top: 8px; margin-bottom: 16px;}
#remote-WebcallContainer {display: flex !important; flex-direction: row;}
#local-WebcallContainer {display: flex !important; flex-direction: row;}
#local-WebcallContainer.pos_absolute {position: absolute;}
#local-WebcallContainer.pos_relative {position: relative; left: calc(50% - 45px);}
#local-WebcallContainer video {border-radius: 8px;}

/*--- wave stream audio ---*/
.wave-container {margin-left: 4px; display: flex; flex-direction: row;}
.wave-container.bg--color-white .wave-bar {background-color: rgba(256, 256, 256, 0.5);}
.wave-container .wave-bar {
  display: inline-block;
  width: 4px;
  margin: 0px 2px 0px 0px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  animation: beat1 1s infinite;
  transform: scaleY(0.1);
} 

#tfWaveSound .wave-container .wave-bar {
  background-color: rgba(256, 256, 256, 0.5);
}
.wave-container .wave-bar:nth-child(2n) {
  animation-name: beat2;
  animation-delay: 0.2s;
}
.wave-container .wave-bar:nth-child(3n) {
  animation-name: beat3;
  animation-delay: 0.5s;
  animation-duration: 0.5s;
}
.wave-container .wave-bar:nth-child(4n) {
  animation-name: beat2;
  animation-delay: 0.4s;
  animation-duration: 0.8s;
}
.wave-container .wave-bar:nth-child(5n) {
  animation-delay: 0.6s;
}
.wave-container .wave-bar:nth-child(6n) {
  animation-delay: 0.2s;
}
@keyframes beat1 {
  0% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(0.7);
  }
  100% {
    transform: scaleY(0);
  }
}

@keyframes beat2 {
  0% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(0.5);
  }
  100% {
    transform: scaleY(0);
  }
}

@keyframes beat3 {
  0% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(0.3);
  }
  100% {
    transform: scaleY(0);
  }
}


.tf_inactif {display: none;}
.tf_actif {display: flex;}

#tf_icone_visio {
	height: 34px;
    width: 34px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
}
#tf_icone_whatsapp{
	height: 34px;
    width: 34px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
}
#tf_phone_icone {
	height: 34px;
    width: 34px;
    padding-left: 2px;
    padding-right: 3px;
    padding-top: 0px;
}
#tf_icone_chatbot{
	height: 32px;
    width: 31px;
    padding-left: 2px;
    padding-right: 3px;
}
.apzVisioOn #tf_conteneurIcones {
	display: none;
}
#tf_icone_agenda {
	height: 31px;
    width: 30px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
}
#tf_icone_messenger {
	height: 34px;
    width: 34px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
}
.tf_titleTab_txt {
	font-size: 0.9em;
	text-align: left;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
	margin-top: auto;
    margin-bottom: auto;
    margin-left: 0px;
    margin-right: auto;
	padding-left: 113px;
    width: calc(100% - 50px);
    /*bottom: 20px;
    position: absolute;*/
    /*line-height: 1.2em !important;*/
	font-weight: 400;
}
.playaudio {
    cursor: pointer;
}
.showContext {
    position: absolute;
    right: 6px;
    bottom: -16px;
    cursor: pointer;
}
.tf_unseen{
	display: none;
}
.tf_seen{
	width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
	border: 1px solid rgba(231,76,60, 0.1);
}
.tf_seen svg {
	fill: rgb(231,76,60);
}

/*---------------------------------------------*/
/*--- Zone de chat ---*/
/*---------------------------------------------*/
#mydesk.desactive {
	bottom: 0%;
	border:0px solid #0ff;
}
#mydesk.open.desk_Bottom {
	bottom: 0%;
}
/*---------------------------------------------*/
/*--- Zone de chat ---*/
/*---------------------------------------------*/
.watchFormDisplayNone{
	display: none;
}
#contentWatchBox{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	min-height: 100%;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
div#WatchBoxContainer {
	position: absolute;
	display: flex;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	flex-direction: column;
}
#WatchBox-contentChat{
	z-index: 1;
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	background-color: #fff;
	border-bottom-right-radius:var(--arrondi-widget-bd);
	border-bottom-left-radius:var(--arrondi-widget-bg);
}
#WatchBox-conversation-body{
	z-index: 5;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 56px;
	overflow-x: hidden;
	overflow-y: scroll;
}
#WatchBox-conversation *{
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box !important;
}
#WatchBox-conversation {
	padding: 0px 12px 20px 12px;
	display: block;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
}
#WatchBox-conversation div[class*='message_'] img{
	padding: 0px;
	margin-bottom: -5px;
	border-radius: 4px;
	margin: 0 0 8px 0;
	display: inline-block;
	max-width: 100%;
	height: auto;
}
#tf_WatchBox_Powered{
	z-index: 6;
	position: absolute;
    text-align: center;
    width: 100%;
    font-size: 10px;
	padding-bottom: 2px;
	padding-top: 2px;
}
#tf_WatchBox_Powered a {
	font-weight: 100;
	color: #999999;
	text-decoration: none;
}
#tf_WatchBox_Powered a:hover {
	text-decoration: underline;
}
div#communication {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/*-------Masque au chargement la comBox-----------*/
div#communication.watchComDisplayNone #WatchBox-contentChat{
	display:none;
}
/*---------------------------------------------*/
/*--- Zone de formulaire notification ---*/
/*---------------------------------------------*/
.form-notif-attente[type="phone"],
.form-notif-attente[type="number"],
.form-notif-attente[type="email"] {
    height: 22px;
	display: block;
	width: 90%!important;
    padding: 6px 12px;
    color: #9c9b9b;
    vertical-align: middle;
    background-color: white;
    border: 1px solid #d6d4d4;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form-notif-attente + span {
  padding-right: 30px;
}
.form-notif-attente:invalid {
  border: 1px solid #8b0000;
}

.form-notif-attente:valid {
	border: 1px solid #009000;
}
#btnNotifAttente {
	background-color: rgba(231,76,60,1);
    transition: background-color 500ms ease-out;
    color: rgba(167,189,24,1);
	border: 0px !important;
    height: 36px;
    padding: 0 14px 0 14px;
    opacity: 1;
}
#btnNotifAttente:disabled {
    opacity: 0.3 !important;
}

/*---------------------------------------------*/
/*--- Zone de formulaire satisfaction ---*/
/*---------------------------------------------*/
#watchFormSATIS input[type="radio"]{
	opacity: 1 !important;
	-webkit-appearance: none;
	-webkit-opacity:1 !important;
	-moz-appearance: none;
	outline: none !important;
	background:url(../../../img/icones/icones_interface.svg) !important;
	background-repeat: no-repeat !important;
	min-width: 27px;
	min-height:27px;
	width: 27px;
	height:27px;
	border:1px dashed rgba(192,57,43,0);
	cursor:pointer;
	border-radius: 13px;
	display: -webkit-inline-box;
	transform: scale(1.6);
	transition: transform 300ms ease-in;
}
#watchFormSATIS input[type="radio"]:hover{
  transition: transform 300ms ease-out;
  transform: scale(1.8);
}
#watchFormSATIS input[value="1"]{
	background-position: -374px -284px!important
}
#watchFormSATIS input[value="2"]{
	background-position: -348px -284px!important
}
#watchFormSATIS input[value="3"]{
	background-position: -322px -284px!important
}
#watchFormSATIS  input[type="radio"]:checked{
   background-position: -402px -284px!important
}
#watchFormSATIS li label, .watchFormSATIS li label{
  margin-top:5px;
  display: none;
}
#watchFormSATIS .listeSATIS, .watchFormSATIS .listeSATIS{
  width:100%;
  list-style: none;
  padding-left: 0px;
}
#watchFormSATIS .listeSATIS li, .watchFormSATIS .listeSATIS li{
  height: 30px;
}
#watchFormSATIS fieldset, .watchFormSATIS fieldset{
  margin-bottom: 0px !important;
  margin-top: 0px !important;
  background-color: none;
  background: none;
  border:0px !important;
}
#watchFormSATIS .titreSATIS, .watchFormSATIS .titreSATIS
#watchFormABS #titleABS{
	padding: 12px 14px 12px 14px;
	margin: 0px 4px 0px 4px;
}
#watchFormSATIS p, .watchFormSATIS p{
	margin: 0;
}
#watchFormSATIS .labelSATIS, .watchFormSATIS .labelSATIS{
	/*font-size:0.8em;*/
	text-align: center;
	margin: 0;
}
#mydesk.mydesk-template #watchFormSATIS .btnSATIS, #mydesk.mydesk-template .watchFormSATIS .btnSATIS{
  margin-top:10px;
}
#watchFormSATIS fieldset, .watchFormSATIS fieldset,
#watchFormLEAD fieldset,
#watchFormSATIS fieldset,
#watchFormPRECHAT fieldset{
  background-color: rgba(0,0,0,0);
  border: 0px solid #E74C3C !important;
}
#mydesk.mydesk-template #watchFormSATIS .btnSATIS, #mydesk.mydesk-template .watchFormSATIS .btnSATIS,
#mydesk.mydesk-template #watchFormLEAD .btnLEAD,
#mydesk.mydesk-template #watchFormPRECHAT .btnLEAD,
#watchFormPRECHAT .btnSATIS,
#watchFormABS a.btn{
	transition : background-color 300ms ease-out;
	background: rgba(var(--1erecouleur),1);
    border: 1px solid rgba(var(--1erecouleur),1);
    color: rgba(var(--4emecouleur),1);
    display: inline-block;
    font-size: 1.3em;
    cursor: pointer;
    margin-top: 12px;
    margin-bottom: 0px;
    padding: 10px 18px;
}
#watchWaiting .waitingMessage{
	transition : background-color 300ms ease-out;
	background: rgba(var(--1erecouleur),1);
    border: 1px solid rgba(var(--1erecouleur),1);
    color: rgba(var(--4emecouleur),1);
    display: inline-block;
    font-size: 1.1em;
    cursor: pointer;
    margin-top: 12px;
    margin-bottom: 0px;
    padding: 10px 18px;
    border-radius: 10px;
    margin-top: 200px;
    text-align: center;
}

/*--- message exemple d'intro bot ---*/
#communication .introMessage{
    color: rgba(var(--1erecouleur),1);
    font-size: 1.1em;
    margin-bottom: 0px;
    padding: 10px 18px;
    margin-top: 3px;
    text-align: center;
	width: 95%;
}
#bottomIntroBulles{
	position: absolute;
    bottom: 10px;
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
}
.firstBotButton {
	border-radius: 4px;
	display: inline-block;
	color: rgb(var(--1erecouleur));
    margin-bottom: 5px;
    min-width: 30%;
	border: 1px solid #d5d5d5;
	cursor: pointer;
	width: 90%;
}
.firstBotButton:hover {
	background-color: rgb(var(--1erecouleur));
	color: white;
	border: 1px solid rgb(var(--1erecouleur));
}
.firstBotButton p{
	font-size: small!important;
	margin: 8px;
	padding: 0px 5px;
	cursor: pointer;
}

#mydesk.mydesk-template #watchFormSATIS .btnSATIS:hover, #mydesk.mydesk-template .watchFormSATIS .btnSATIS:hover,
#mydesk.mydesk-template #watchFormLEAD .btnLEAD:hover,
#mydesk.mydesk-template #watchFormPRECHAT .btnLEAD:hover,
#watchFormPRECHAT .btnSATIS:hover,
#watchFormABS a.btn:hover{

	transition : background-color 300ms ease-out;
	background: rgba(var(--2emecouleur),1);
    border: 1px solid rgba(var(--1erecouleur),1);
    color: rgba(var(--4emecouleur),1);
    display: inline-block;
    font-size: 1.3em;
    cursor: pointer;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px 18px;
}
#watchFormSATIS fieldset,#watchFormLEAD fieldset,
#watchFormSATIS fieldset,#watchFormPRECHAT fieldset, 
.watchFormSATIS fieldset,#watchFormLEAD fieldset,
.watchFormSATIS fieldset,#watchFormPRECHAT fieldset{
	background-color: rgba(0,0,0,0.05);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
}
#watchFormSATIS .listeSATIS .txtListeSATIS, .watchFormSATIS .listeSATIS .txtListeSATIS{
	height: 24px;
}
#watchFormSATIS ul, .watchFormSATIS ul{
	margin: 0;
}
#mydesk.desk_Left #watchFormSATIS .titreSATIS,
#mydesk.desk_Right #watchFormSATIS .titreSATIS,
#mydesk.desk_Left .watchFormSATIS .titreSATIS,
#mydesk.desk_Right .watchFormSATIS .titreSATIS,
#mydesk.desk_Left #watchFormLEAD .titreLEAD,
#mydesk.desk_Right #watchFormLEAD .titreLEAD,
#mydesk.desk_Left #watchFormPRECHAT .titreLEAD,
#mydesk.desk_Right #watchFormPRECHAT .titreLEAD,
#watchFormABS #titleABS {
	margin: 0px -24px 10px;
	padding: 0 24px;
}
#watchFormSATIS .listeSATIS,#watchFormLEAD .listeLEAD, .watchFormSATIS .listeSATIS,#watchFormLEAD .listeLEAD, #watchFormPRECHAT .listeLEAD{
  display:-webkit-inline-box;
  display:inline-flex;
  min-height:48px;
}
#watchFormSATIS .listeSATIS li, .watchFormSATIS .listeSATIS li, #watchFormLEAD .listeLEAD li, #watchFormPRECHAT .listeLEAD li{
  margin: 4px 2px 4px 2px;
  width:33%;
  text-align: center;
}
/*---------------------------------------------*/
/*--- Zone de formulaire message ---*/
/*---------------------------------------------*/
div#WatchBox-MessageWrapper {
	border-top: 1px solid #ccc;
	z-index: 20;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 56px;
	border-bottom-right-radius:var(--arrondi-widget-bd);
	border-bottom-left-radius:var(--arrondi-widget-bg);
	background-color: white;
}
#mydesk a[disabled], #mydesk button[disabled], #mydesk textarea[disabled] {
	cursor: not-allowed !important;
	opacity: 1 !important;
}
#mydesk input[disabled] {
	cursor: not-allowed;
	opacity: 1;
}

textarea#WatchBox-message{
	outline: none;
	box-sizing: border-box;
	padding-top: 12px;
	padding-right: 114px;
	/*margin-left: 38px;*/
	padding-left: 38px;
	width: 100%;
	height: 100%;
	min-height: 52px;
	font-weight: 400;
	background-color: #fff;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
	bottom: 0;
	left: 0;
	cursor: text;
	bottom: 0;
	left: 0;
	color: #000;
	resize: none;
	border: none;
	margin-bottom: 0px !important;
	overflow-y: hidden;

}
textarea#WatchBox-message:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important; /* Supprime aussi tout effet d'ombre */
} 
#mydesk[class*='bottom'] textarea#WatchBox-message, #mydesk[class*="middle"] textarea#WatchBox-message,#mydesk[class*='bottom'] #contentListAgent.actif, #mydesk[class*='middle'] #contentListAgent.actif  {
	border-bottom-right-radius:0 !important;
	border-bottom-left-radius:0 !important;
}
#mydesk[class*='Left'] textarea#WatchBox-message {
	border-bottom-right-radius:var(--arrondi-widget-hd);
	border-top-right-radius:0;
	border-bottom-left-radius:0;
	border-top-left-radius:0;
}
#mydesk[class*='Left'] .contentTitleBar{
	border-bottom-right-radius:0;
	border-top-right-radius:var(--arrondi-widget-bd);
	border-bottom-left-radius:0;
	border-top-left-radius:0;
}
#mydesk[class*='Right'] textarea#WatchBox-message{

}
#mydesk[class*='Right'] .contentTitleBar {
	border-bottom-left-radius:0;
	border-top-left-radius:var(--arrondi-widget-bg);
	border-bottom-right-radius:0;
	border-top-right-radius:0;
}
textarea#WatchBox-message:focus {
	box-shadow: 0px 0px 2px 0px rgba(231,76,60,0.5);
}
#WatchBox-MessageWrapper div:first-child {
		position: static !important;/*position: static;*/
}
#WatchBox-conversation::-webkit-scrollbar-track {
	border-radius: 10px;
	background-color: rgba(53,98,114,.1);
}
#WatchBox-conversation::-webkit-scrollbar {
	width: 12px;
	background-color: none;
}
#WatchBox-conversation::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: rgba(58,111,129,1);
	margin-right:3px;
}
div#WatchBox-chatSend {
	position: absolute;
    z-index: 3;
    float: right;
    right: 6px;
    bottom: 10px;
    width: 32px;
	min-width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 50%;
    padding-top: 4px;
    padding-left: 6px;
}
div#WatchBox-chatSend:hover {
	background-color: rgba(192,57,43,0.2);
}
div#watcheezyFooter {
	display: none;
	width: auto;
	position: absolute;
	bottom: 0;
	right: 2px;
	vertical-align: baseline;
	color:rgba(0,0,0,0.5);  
}
.watcheezyFooterLink a{
	text-transform: inherit;
	border-bottom: inherit;
}

#watcheezyFooter a, #emojiicon{
	text-transform: inherit;
	border-bottom: inherit;
  }
#mydesk.wzbot a#emojiicon {
	display: none;
}
a#emojiicon {
	position: absolute;
	top: 18px !important;
	text-decoration: none;
	right : 32px!important;
}
div#picker_panel {
	position: absolute !important;
	outline: none!important;
	top: -145px !important;
	z-index: 999 !important;
	width: 100% !important;
	height: 140px !important;
	padding: 7px !important;
	margin-top: 5px !important;
	overflow: auto  !important;
	right: 0px  !important;
	background: rgb(255, 255, 255);
	box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
	animation: animationEmoji 0.3s ease-in-out 0s 1 normal forwards running ;
}
.watchFormDisplay{
	position: absolute;
	top: 56px;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 24px;
	background-color: #FBFBFB;
	z-index: 109;
	display: block !important;
}
/*-----------------------------------------------*/
/*------------- WATCHEEZY PUSH ------------------*/
/*-----------------------------------------------*/
#mydesk-push{
	padding: 0px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	display: table;
	display: inline-block;
	word-wrap: break-word;
	width: 300px;
	min-height:80px;
	max-width: 300px;
	position: fixed;
	-webkit-box-shadow: 0px 3px 12px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 12px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 12px rgba(0,0,0,0.3);
	z-index:100000;
}
#mydesk-push.push_Bottom{
	bottom: 60px;
}
#mydesk-push.push_Right{
	top: calc(50% - 150px);
	right: 70px;
}
#mydesk-push.push_Left{
	top: calc(50% - 150px);
	left: 70px;
}
#mydesk-push.push_Right.rdState{
	top: calc(50% - 30px);
	right: 70px;
}
#mydesk-push.push_Left.rdState{
	top: calc(50% - 30px);
	left: 70px;
}
#mydesk-push.push_Center{
	position:fixed;
	left: 50%;
	margin-left:-225px;
	max-width:inherit!important;
	width:450px!important;
	top:50%;
	margin-top:-100px;
	height:200px!important;
	z-index: inherit !important;
}
#mydesk-push.desactive, mydesk-push.tf_desactive{
	display:none !important;
}
#mydesk-push.open, #mydesk-push.tf_open{
	display:block !important;
}
#mydesk-push #closePush{
	position: absolute;
	top: 4px;
	right: 4px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	z-index: 6;
	cursor: pointer;
	width: 16px;
	height: 16px;
	background-position: -96px -100px;	
}
#mydesk-push.showPush{
	display:block;
}
#mydesk-push.hidePush{
	display:none;
}

.pushclose:hover{
	background-color:#999999;
	cursor:pointer;
}
#mydesk-push-photo {
	position:absolute;
	bottom: 0px;
	right: 0px;
	display:block;
	width:30%;
}
#mydesk-push-photo.photo_Center {
	bottom: 132px !important;
}
#mydesk-push-photo img{
	max-width:100%;
	float:right;
}
#mydesk-push.push_Bottom:before {
	right: 60%;
	top: 100%;
	border-left: 0px solid;
	border-bottom: 0px solid;
	border-top: 16px solid;
	border-right: 21px solid;
}
#mydesk-push.push_Right:before {
	left: 100%;
	top:calc(50% - 10px);
	border-right: 0px solid;
	border-bottom: 10px solid;
	border-top: 10px solid;
	border-left: 20px solid;
}
#mydesk-push.push_Left:before {
	right: 100%;
	top: calc(50% - 10px);
	border-left: 0px solid;
	border-bottom: 10px solid;
	border-top: 10px solid;
	border-right: 20px solid;
}
#mydesk-push.push_Center:before {
	right: 60%;
	top: 100%;
	border-left: 0px solid;
	border-bottom: 0px solid;
	border-top: 16px solid;
	border-right: 21px solid;
}
.mydesk-text-push{
	display:block;
}
.mydesk-text-push p{ margin:0}
.mydesk-title-push{
	color:#ffffff;
	font-family: Helvetica,Arial,sans-serif;
	padding:10px !important;
}
.title-push_Center{
	height:27px;
	width:90%;
	padding:24px 0 15px 20px!important;
}
.mydesk-content-push{
	color:#C0392B;
	padding:10px 0px 10px 10px !important;
}
.content-push_Center{
	padding:20px 0px 10px 20px !important;
}
#tab_settings #mydesk-push{
	padding: 0px;
	margin:40px 0px 10px 0px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	display: table;
	display: inline-block;
	word-wrap: break-word;
	width: 330px;
	min-height:80px;
	max-width: 330px;
	position: relative;
	right:0px;
	bottom:0px;
	-webkit-box-shadow: 0px 3px 12px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 12px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 12px rgba(0,0,0,0.3);
}
#tab_settings .mydesk-title-push{
	padding:10px;
	width:330px;
	padding:10px 0px 10px 10px;
}
#tab_settings .mydesk-content-push{
	padding:10px 0px 10px 10px;
	font-family: Helvetica,Arial,sans-serif !important;
}
/*-----------------------------------*/
/*--- PUSH ---*/
/*-----------------------------------*/
#mydesk-text-push p{
	margin:0;
}
#mydesk-push.mydesk-push {
	background: #A7BD18; /* Old browsers */
}
#mydesk-push.mydesk-push.push_Bottom:before,
#mydesk-push.mydesk-push.push_BottomRight:before,
#mydesk-push.mydesk-push.push_BottomLeft:before {
	border-color: #A7BD18;
	border-left-color: transparent;
	border-right-color: transparent;
}
#mydesk-push.mydesk-push.push_Right:before {
	border-color: #A7BD18;
	border-top-color: transparent;
	border-bottom-color: transparent;
}
#mydesk-push.mydesk-push.push_Left:before {
	border-color: #A7BD18;
	border-top-color: transparent;
	border-bottom-color: transparent;
}
#mydesk-push.mydesk-push.push_Center:before {
	border-color: #A7BD18;
	border-top-color: transparent;
	border-bottom-color: transparent;
}
#mydesk-push.mydesk-push .mydesk-title-push{
	border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
	background: #E74C3C; /* Old browsers */
}

#mydesk-push.mydesk-push .mydesk-content-push{
	max-width:68%;
}
#mydesk-push.mydesk-push  #closePush{
	background-color: #E74C3C;
}
#push_layer{
	display:none;
	position:fixed;
	-webkit-backface-visibility: hidden;
	cursor:pointer;
	width:100%;
	height:100%;
	z-index:99999;
	top:0;
	left:0;
	background:rgba(0,10,5,0.7);
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
#push_layer.overlay_open{
	display:block;
}
#push_layer.overlay_close{
	display:none;
}
#push_centered{
	display:none;
	position:fixed;
	-webkit-backface-visibility: hidden;
	cursor:pointer;
	width:100%;
	height:100%;
	z-index:99999;
	top:0;
	left:0;
	background:rgba(0,10,5,0.7);
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
#push_centered.overlay_open{
	display:block;
}
#push_centered.overlay_close{
	display:none;
}
#push_centered.open{
	display:block;
}
#push_centered .push_active{
	z-index:99999;
	padding:0;
	text-align:center;
	background:none;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	cursor:auto;
	-webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
	-webkit-text-stroke: rgba(255,255,255,0.01) 0.1px;
	-webkit-text-stroke-width: 0.1px;
}

#pushRedImg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-width: 100%;
	max-height: 100%;
	padding: 20px;
}
#mydesk-push.pushImg{
  width:0px;
}
#mydesk-push.pushImg #closePush{
  width:0px;
}
#mydesk-push.pushImg #standard_push{
  display:none;
}
#mydesk-push.pushImg.push_Bottom:before {
  border-left:none;
  border-top:none;
}
/*---------------------------------------------*/
/*--- Zone capture ecran ---*/
/*---------------------------------------------*/
#targetFirst_iconeTakeCapture,
#targetFirst_iconeStopCapture {
	background-color: rgba(231,76,60, 0.8);
}
#targetFirst_iconeTakeCapture {
	position:absolute;
	border-radius: 50%;
	padding: 16px;
	width: 64px;
	height: 64px;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
}
#targetFirst_iconeTakeCapture:hover {
	width: 74px;
	height: 74px;
	top: calc(50% - 37px);
	left: calc(50% - 37px);
}
#targetFirst_iconeStopCapture {
	position:absolute;
	border-radius: 50%;
	padding: 2px;
	width: 28px;
	height: 28px;
	top: 8px;
	right: 8px;
}
#targetFirst_iconeStopCapture:hover {
	width: 32px;
	height: 32px;
	top: 6px;
	right: 6px;
}
#targetFirst_iconeTakeCapture svg,
#targetFirst_iconeStopCapture svg {
	fill: rgba(167,189,24, 1);
}

#loadingCapture {
	background-color: rgba(231,76,60, 1);
}
#loadingCapture {
	position: absolute;
	border-radius: 50%;
	padding: 13px;
	width: 64px;
	height: 64px;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
}

/*---------------------------------------------*/
/*--- boutons fiche Agent ---*/
/*---------------------------------------------*/
div#TargetBox-pref, div#TargetBox-reduce, div#TargetBox-close, div#TargetBox-moveWidget, div#TargetBox-full, div#TargetBox-unfull {
	z-index: 5;
	width: 22px;
	height: 22px;
	position: absolute;
	top: 8px;
	display: block !important;
	background-color: rgb(231,76,60, 1);
	border-radius: 2px;
}
div#TargetBox-pref {
	width: 22px;
	height: 22px;
	right: 43px;
	cursor: help;
	position: absolute;
	bottom: 56px;
	left: 0;
	top: auto;
	z-index: 28;
	background-color:transparent;
}
div#TargetBox-pref path {
	fill: #666
}
div#TargetBox-pref:hover path {
	fill:rgb(192,57,43, 1)
}

div#TargetBox-reduce:hover, div#TargetBox-close:hover, div#TargetBox-moveWidget:hover  {
	background-color: rgba(192,57,43,0.4);
}

/* full screen du widget (pleine hauteur)*/
div#TargetBox-full, div#TargetBox-unfull {
    right: 75px;
    cursor: pointer;
}
.fullHeight {
	height: 100%!important;
		
}
.fullHide {
	z-index: -1!important;
}
#mydesk.desk_Right.open.topHeight {
	top: 0;
}
#mydesk.desk_Left.open.topHeight {
	top: 0;
}

div#TargetBox-moveWidget {
    right: 53px;
    cursor: pointer;
}
div#TargetBox-pref{
	right: 43px;
	cursor:help;
}
div#TargetBox-reduce{
	right: 28px;
	cursor:pointer;
	transform: rotate(-90deg);
}
div#TargetBox-close{
	right: 3px;
    cursor: pointer;
}

.position_bottom_right #TargetBox-moveWidget {
	transform: rotate(0deg);
}
.position_bottom_left #TargetBox-moveWidget, .desk_Left #TargetBox-moveWidget{
	transform: rotate(180deg);
}

/*---------------------------------------------*/
/*--- fiche Agent ---*/
/*---------------------------------------------*/
.contentTitleBar {
	display: flex;
	height: 58px;
	width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
	background-color: rgb(231,76,60);
	border-top-left-radius: var(--arrondi-widget-hg);
	border-top-right-radius: var(--arrondi-widget-hd);
}
.apzVisioOn .contentTitleBar {
	height: 56px;
}
.imageCurrentAgentContainer {
	display: flex;
	order: 1;
	margin: 8px;
	cursor: pointer;
	width: 40px;
    height: 40px;
}
.descCurrentAgentContainer {
	/* position: absolute; */
	display: flex;
	order: 2;
	width: calc(100% - 106px);
}
.currentAgentJob {
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
	width: calc(100% - 130px);
	flex-direction: row;
	margin: 0;
	position: absolute;
	margin: 0;
	color:rgb(167,189,24) !important;
	padding: 0;
	top: 29px;
	left: 58px;
}
.currentAgentName {
	width: calc(100% - 130px);
	display: inherit !important;
	flex-direction: row;
	margin: 0;
	position: absolute;
	margin: 0;
	color:rgb(167,189,24) !important;
	padding: 0;
	top: 8px;
	left: 58px;
}
/*-------------------------------------------------------------*/
/*  Affichage des dates dans le chat   */
/*-------------------------------------------------------------*/
.dates-marqueur{
	float: right;
	width: 100%;
	height: 0px;
}	
.wz-marqueur-sticky{height:20px}

.dates-messages {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	padding: 4px 0px !important;
	margin-bottom: 26px !important;
	margin-top: 10px !important;
	background-color: rgba(255,255,255,0.8);
	backdrop-filter: blur(5px);
	text-align: center;
	width: calc(100% + 32px);
	margin-left: -10px;
	display: flex;
    flex-direction: row!important;
}
.dates-messages:after {
	margin-left: 6px!important;
    float: right!important;
	content: ""!important;
    background-color: #4A4A66!important;
    height: 1px!important;
    margin-top: 10px!important;
    opacity: .16!important;
    flex: 1!important;
}
.dates-messages:before {
	margin-right: 6px!important;
	margin-left: 6px!important;
    float: left!important;
	display: flex!important;
    flex-direction: row!important;
    content: ""!important;
    background-color: #4A4A66!important;
    height: 1px!important;
    margin-top: 10px!important;
    opacity: .16!important;
    flex: 1!important;
}
/*--- invible sur la visio ---*/
.apzVisioOn .dates-messages {
	display: none;
}
/*--- affiche sur la visio et middle chat ---*/
.apzVisioOn.middleState .dates-messages {
	display: flex;
}

/*---------------------------------------------*/
/*--- message Visiteur ---*/
/*---------------------------------------------*/
.messageVisiteur{
	/*background-color:rgba(255,255,255,1);*/
	border-radius: 4px;
	display: table;
	max-width: 90%;
	min-width: 25%;
	margin:36px 6px 4px auto !important;
	padding: 6px 6px 6px 6px !important;
	background-image: linear-gradient(rgb(255,255,255) 10%,  rgb(192,57,43) 150%);
    background-attachment: fixed;
}

.messageVisiteur:before{
	z-index: -1;
	content: "";
    position: absolute;
    right: calc(0% - 6px);
    border-top: 8px solid rgba(255,255,255,1);
    border-left: 10px solid transparent;
    border-bottom: 8px solid rgba(255,255,255,1);
	background-image: linear-gradient(rgb(255,255,255) 10%,  rgb(192,57,43) 150%);
    background-attachment: fixed;
}
.messageVisiteur img{
	padding: 5px;
	margin-bottom: -5px;
	border-radius: 4px;
}
.messageVisiteur p, .messageVisiteur .txtChat{
	min-width: 50% !important; 
	font: 1em !important;
	color:rgba(167,189,24,1)  !important;
}

#WatchBox-conversation .messageVisiteur .txtChat a{
	word-break: break-all;
	color:rgba(167,189,24,1)  !important;
	font-size: 14px !important;
}
#WatchBox-conversation:hover .messageVisiteur .txtChat a{
	word-break: break-all;
	color:rgba(167,189,24,1)  !important;
}
.statusMessageVisiteur {
	position: static;
	font-size: 0.8em;
	margin-top: -2px;
	min-width: 100%;
	text-align: right;
}

/*---------------------------------------------*/
/*--- message Agent ---*/
/*---------------------------------------------*/
/*--- isTyping message ---*/
.isTyping {
  position: relative;
    color: rgba(192,57,43,1) !important;
    left: 0px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
	margin-left: 46px;
	margin-top: 16px;
    padding: 4px 4px 4px 4px !important;
    max-width: 90%;
	min-width: 25%;
    display: table;
    background-color: #FFF;
    min-height: 33px;
}
.isTyping.chatIMG:before {
	content: "";
	position: absolute;
	left: -9px;
	top: calc(100% - 28px);
	width: 0;
	height: 0;
	border-left: inherit;
	border-top: 8px solid transparent;
	border-right: 10px solid #FFF;
	border-bottom: 8px solid transparent;
}

.isTyping .isTyping_message {
	position: absolute;
    top: 10px;
}

/*--- isTyping animation ---*/
.WatchBox-istyping {
	margin: 6px 11px 0!important;
	display: inline-flex;
}
.WatchBox-istyping > div {
	width: 8px;
	height: 8px;
	margin-right: 3px;
	background-color:rgba(231,76,60,1);
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
	animation: bouncedelay 1.4s infinite ease-in-out;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.WatchBox-istyping .bounce1 {
	-webkit-animation-delay: -0.48s;
	animation-delay: -0.48s;
}
.WatchBox-istyping .bounce2 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
@-webkit-keyframes bouncedelay {
	0%, 80%, 100% { -webkit-transform: translateY(3px); }
	40% { -webkit-transform: translateY(0px); }
}
@keyframes bouncedelay {
	0%, 80%, 100% { 
	  transform: translateY(3px);
	  -webkit-transform: translateY(3px);
	} 40% { 
	  transform: translateY(0px);
	  -webkit-transform:translateY(0px);
	  opacity: 1;
	}
}
  
.btnbot {
	background: #5bc5f2;
	color: #114277;
	border-radius: 25px;
	padding: 19px 45px!important;
	cursor: pointer;
	white-space: nowrap;
}
.WZ-chatAgentIMG {
	position: absolute;
	bottom: 0;
	top: initial !important;
	left: -53px;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}
.messageAgent.chatIMG:before {
	content: "";
	position: absolute;
	left: inherit;
	left: -6px;
	top: calc(100% - 28px);
	width: 0;
	height: 0;
	border-left: inherit;
	border-top: 8px solid transparent;
	border-right: 10px solid #F1F1f1;
	border-bottom: 8px solid transparent;
}
.messageAgent {
	position: relative;
	left: 0px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	margin: 36px 23px 4px 46px !important;
	padding: 6px 6px 6px 6px !important;
	max-width: 90%;
	min-width: 25%;
	display: table;
	background-color: #F1F1f1;
}
.messageAgent.isTyping {
	min-width: 16%;
}

.timestamp_Agent {
	font-size: 0.8em;
	font-style: italic;
	position: absolute;
	top: -17px;
	right: 6px;
}
.nom_Agent, 
.nom_Visiteur,
.isTyping_nom{
  display: none;
} 
.timestamp_Visiteur {
	font-size: 0.8em;
	font-style: italic;
	position: absolute;
	top: -17px;
	right: 6px;
}
#WatchBox-conversation .txtChat {
	margin: 8px 4px 8px 4px;
	word-break: break-word;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
#WatchBox-conversation .message_Agent .txtChat,
#WatchBox-conversation .message_Agent .txtChat p {
	color:#181818;
}


#WatchBox-conversation .message_Visiteur .txtChat {
	color:#ffffff;
}
#WatchBox-conversation .txtChat a,
#WatchBox-conversation .txtChat a:hover{
  word-break: break-all;
  color:rgba(231,76,60,1)  !important;
  font-weight: normal !important;
  font-size: 1em !important;
  text-decoration: underline;
}

#mydesk.desk {
	display: block !important;
}
/*--- cacher uniquement pour ie11 ---*/
_:-ms-fullscreen, :root #mydesk.desk { display: none !important; }


#WatchBox-MessageWrapper #icon_emoji path{
	fill:rgba(231,76,60,0.5);
}
#WatchBox-MessageWrapper #icon_emoji:hover path{
	fill:rgba(192,57,43,1);
}
#WatchBox-chatSend #bt_envoi polygon{
	fill:rgba(231,76,60,1);
}
.icone_sendMessage {
	background-position: -393px -339px;
}
#WatchBox-chatSend:hover #bt_envoi polygon{
	fill:rgba(231,76,60,1);
}
#WatchBox-chatupload #icon_upload polygon{
	fill:rgba(231,76,60,1);
}
/*---------------------------------------------*/
/*--- 	  Formulaires avec mode SVG 		---*/
/*---------------------------------------------*/
#watchFormSATIS fieldset, .watchFormSATIS fieldset,#watchFormLEAD fieldset,
#watchFormPRECHAT fieldset{
	background-color: rgba(0,0,0,0);
	border: 0px solid #E74C3C !important;
}
#watchFormSATIS .btnSATIS, .watchFormSATIS .btnSATIS, #watchFormLEAD .btnLEAD, #watchFormPRECHAT .btnLEAD{
	background-color: #E74C3C;
	transition : background-color 500ms ease-out;
	color:#ffffff;
	border: 0px solid #E74C3C !important;
	min-height: 2em !important;
	cursor: pointer;
	border: 0px !important;
	font-weight: normal;
	display: block;
	display: block;
	text-align: center;
	width: calc(100% - 42px);
	margin: 10px auto 0 auto;
	font-weight: normal;
}
#watchFormSATIS .btnSATIS:hover, .watchFormSATIS .btnSATIS:hover, #watchFormLEAD .btnLEAD:hover, #watchFormPRECHAT .btnLEAD:hover{
	background-color: #A7BD18;
	transition : background-color 500ms ease-out;
	color:#ffffff;
	border: 0px solid #E74C3C !important;
	cursor: pointer;
	border: 0px !important;
	font-weight: normal;
	display: block;
	width: calc(100% - 42px);
	margin: 10px auto 0 auto;
}
/*-----------------------------------*/
/*--- 		formulaire lead svg		 ---*/
/*-----------------------------------*/
#watchFormLEAD .reactivLEAD {
	border: 0px solid rgba(231,76,60,0.8);
}
#watchFormLEAD .reactivLEAD input {
	min-height: 1em;
	max-height: 1.5em;
	color:#E74C3C;
	transition : border 500ms ease-out;
	transition : color 500ms ease-out;
	border: 0px solid #E74C3C !important;
	border-bottom: 1px solid #E74C3C !important;
	box-shadow:none!important;
	width: 100% !important;
	display: inline-block;
}




#watchFormLEAD .reactivLEAD input:focus::-webkit-input-placeholder ,#watchFormLEAD .reactivLEAD textarea:focus{
	color: #A7BD18;
}
/* Firefox < 19 */
#watchFormLEAD .reactivLEAD input:-moz-placeholder ,#watchFormLEAD .reactivLEAD textarea:focus{
	color: ##A7BD18;
}
#watchFormLEAD .reactivLEAD input:focus:-moz-placeholder ,#watchFormLEAD .reactivLEAD textarea:focus{
	color: #A7BD18;
}
/* Firefox > 19 */
#watchFormLEAD .reactivLEAD input::-moz-placeholder ,#watchFormLEAD .reactivLEAD textarea:focus{
	color: ##A7BD18;
}
#watchFormLEAD .reactivLEAD input:focus::-moz-placeholder ,#watchFormLEAD .reactivLEAD textarea:focus{
	color: ##A7BD18;
}
/* Internet Explorer 10 */
#watchFormLEAD .reactivLEAD input:-ms-input-placeholder ,#watchFormLEAD .reactivLEAD textarea:focus{
	color: ##A7BD18;
}
#watchFormLEAD .reactivLEAD input:focus:-ms-input-placeholder ,#watchFormLEAD .reactivLEAD textarea:focus{
	color: #A7BD18;
}
#watchFormLEAD .reactivLEAD input:focus{
	color:#A7BD18;
	outline: none;
	transition : border 500ms ease-out;
	border-bottom: 1px solid #A7BD18 !important;
	width: calc(100% - 10px) !important;
}
#watchFormLEAD .reactivLEAD textarea{
	background: transparent;
	padding: 6px 0px 6px 0px;
	margin: 1px 0px 8px 0px;
	color:#E74C3C;
	transition : color 500ms ease-out;
	border: 0px solid #E74C3C !important;
	border-bottom: 1px solid #E74C3C !important;
	width: calc(100% - 10px) !important;
}
#watchFormLEAD .reactivLEAD textarea:focus{
	outline: none;
	background: transparent;
	color:#A7BD18;
	transition : color 500ms ease-out;
	border: 0px solid #E74C3C !important;
	border-bottom:1px solid #A7BD18 !important;
	width: calc(100% - 10px) !important;
}
#watchFormLEAD .contentFormLEAD{
	margin: 0px 0px 10px 0px;
}
#watchFormLEAD .btnSATIS{
	text-transform: uppercase;
	padding: 4px 10px 4px 10px !important;
	margin: 0px 10px 0px 10px !important;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	text-indent: inherit;
	float: inherit;
	border: 0px solid !important;
	background: #E74C3C;
	color:#ffffff;
}
.reactivLEAD label{
	width: calc(100% - 10px);
	bottom: rgba(192,57,43,0.1);
}
/*-----------------------------------*/
/*--- 	formulaire prechat svg	 ---*/
/*-----------------------------------*/
form.formLEAD{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 0px 24px;
	margin: 0 !important;
}
#watchFormPRECHAT .reactivLEAD{
	border: 1px solid rgba(231,76,60,0.8);
}
#watchFormPRECHAT .reactivLEAD input{
	min-height: 1em;
	max-height: 1.5em;
	height: 1em;
	color:#E74C3C;
	transition : border 500ms ease-out;
	transition : color 500ms ease-out;
	border: 0px solid #E74C3C !important;
	border-bottom: 1px solid #E74C3C !important;
	width: 100% !important;
	display: inline-block;
}
#watchFormPRECHAT .reactivLEAD input:focus{
	color:#C0392B;
	outline: none;
	transition : border 500ms ease-out;
	border-bottom: 1px solid #C0392B !important;
}
#watchFormPRECHAT .reactivLEAD input:focus::-webkit-input-placeholder ,#watchFormPRECHAT .reactivLEAD textarea:focus{
	color: #C0392B;
}
/* Firefox < 19 */
#watchFormPRECHAT .reactivLEAD input:-moz-placeholder ,#watchFormPRECHAT .reactivLEAD textarea:focus{
	color: ##C0392B;
}
#watchFormPRECHAT .reactivLEAD input:focus:-moz-placeholder ,#watchFormPRECHAT .reactivLEAD textarea:focus{
	color: #C0392B;
}
/* Firefox > 19 */
#watchFormPRECHAT .reactivLEAD input::-moz-placeholder ,#watchFormPRECHAT .reactivLEAD textarea:focus{
	color: ##C0392B;
}
#watchFormPRECHAT .reactivLEAD input:focus::-moz-placeholder ,#watchFormPRECHAT .reactivLEAD textarea:focus{
	color: ##C0392B;
}
/* Internet Explorer 10 */
#watchFormPRECHAT .reactivLEAD input:-ms-input-placeholder ,#watchFormPRECHAT .reactivLEAD textarea:focus{
	color: ##C0392B;
}
#watchFormPRECHAT .reactivLEAD input:focus:-ms-input-placeholder ,#watchFormPRECHAT .reactivLEAD textarea:focus{
	color: #C0392B;
}
#watchFormPRECHAT .reactivLEAD textarea{
	background: transparent;
	padding: 6px 0px 6px 0px;
	margin: 1px 0px 8px 0px;
	color:#E74C3C;
	transition : color 500ms ease-out;
	border: 0px solid #E74C3C !important;
	border-bottom: 1px solid #E74C3C !important;
	width: calc(100% - 10px) !important;
}
#watchFormPRECHAT .reactivLEAD textarea:focus{
	outline: none;
	background: transparent;
	color:#C0392B;
	transition : color 500ms ease-out;
	border: 0px solid #E74C3C !important;
	border-bottom:1px solid #C0392B !important;
}
#watchFormPRECHAT .contentFormLEAD{
	padding-bottom:24px; 
}
/* Error formulaire préChat*/
input.errorInput{
	border: 3px solid red!important;
}
/*-----------------------------------*/
/*--- formulaire satisfaction svg ---*/
/*-----------------------------------*/
#watchFormSATIS fieldset, .watchFormSATIS fieldset,#watchFormLEAD fieldset,#watchFormPRECHAT fieldset{
	border: 1px solid rgba(231,76,60,0.8);
}
#watchFormSATIS input[type="radio"]:checked + label:before, .watchFormSATIS input[type="radio"]:checked + label:before {
   background: #E74C3C;
}
#watchFormLEAD input[type="radio"]:checked + label:before {
   background: #E74C3C;
}
#watchFormPRECHAT input[type="radio"]:checked + label:before {
   background: #E74C3C;
}
#watchFormSATIS .titreSATIS, .watchFormSATIS .titreSATIS,#watchFormLEAD .titreLEAD,#watchFormPRECHAT .titreLEAD, #watchFormABS #titleABS{
	margin: 0 -24px 10px;
	background-color: rgba(192,57,43,0.2);
	text-align:center; 
}

/*-----------------------------------	*/
/*--- 		widget réracté	uniquement pour le Backoffice --*/
/*-----------------------------------	*/
#backoffice_targetfirst #mydesk[class*='left'].desactive.sideon{pointer-events: none;}
#backoffice_targetfirst #mydesk[class*='right'].desactive.sideon{pointer-events: none;}

/*-----------------------------------	*/
/*--- 		widget réracté	2nd State --*/
/*-----------------------------------	*/
#mydesk.desactive.ndState #contentdesk{}
#mydesk.desactive.desk_Bottom.position_bottom_left{left:10px; bottom: 0; }
#mydesk.desactive.desk_Bottom.position_bottom_right{right:10px ; bottom: 0; }
#mydesk.desactive.desk_Left{left:0px; top : calc(50% - 300px / 2 - 15px);}
#mydesk.desactive.desk_Right{right:0px; top : calc(50% - 300px / 2 - 15px);}
#mydesk[class*='left'].desactive.sideon{left:10px; bottom: 0; }
#mydesk[class*='right'].desactive.sideon{right:10px; bottom: 0; }
#mydesk.desactive.desk_Bottom.position_bottom_left.ndState, #mydesk.desactive.desk_Bottom.position_bottom_middle.ndState, #mydesk.tf_desactive.desk_Bottom.position_bottom_right.ndState {
	width :300px;
	height : 82px !important;
	transform: none !important;
}
#mydesk.desactive.desk_Left.ndState, #mydesk.tf_desactive.desk_Left.ndState{
	width : 300px;
	height : 50px;
	transform: rotate(90deg);
	transform-origin : 0% 100%;
}
#mydesk.desactive.desk_Right.ndState, #mydesk.tf_desactive.desk_Right.ndState{
	width : 300px;
	height : 50px;
	transform: rotate(-90deg);
	transform-origin : 100% 100%;
}
#mydesk.desactive.desk_Left.ndState #mydesk_thirdstate_picture {
	display: none;
}
#mydesk.desactive.desk_Right.ndState #mydesk_thirdstate_picture {
	display: none;
}
#mydesk[class*='position_bottom'].desactive.sideon.ndState #mydesk_thirdstate_picture {
	display: block !important;
}
#mydesk.desactive.desk_Left.ndState #mydesk-outer, #mydesk.desactive.desk_Right.ndState #mydesk-outer {
	background: rgba(167,189,24,1);
	height: 50px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
#mydesk[class*='position_bottom'].desactive.ndState #mydesk-outer {
	background: rgba(167,189,24,1);
	height: 82px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
dt#mydesk_title {
	display: flex;
	height: 50px;
	position: absolute;
	top: 0;
	background: rgba(231,76,60,1);
	width: 100%;
	color:rgba(167,189,24,1);
	border-top-left-radius: var(--arrondi-widget-hg);
	border-top-right-radius: var(--arrondi-widget-hd);
}
#mydesk-outer.ndState .titleOuterMydesk{
	text-align: left;
	position: absolute;
	left: 30px;
	right: 0;
	margin: 0;
	color:rgba(167,189,24,1);
}
 #mydesk[class*='position_bottom'].desactive.desk_Bottom.position_bottom_left.ndState .titleOuterMydesk, #mydesk[class*='position_bottom'].desactive.desk_Bottom.ndState .titleOuterMydesk, #mydesk[class*='position_bottom'].desactive.desk_Bottom.ndState .titleOuterMydesk{
	text-align: right;
	margin-right: 50px;
	margin-top: 0;
	display : inline-block;
	left:0;
	color: rgba(167,189,24,1) !important;
	height: 50px; /* hauteur du parent */
	line-height: 50px; /* hauteur de ligne (identique) */
	white-space: nowrap; /* interdiction de passer à la ligne */
}
#mydesk[class*='position_bottom'].desactive #mydesk-outer.nohotesse .titleOuterMydesk{
	margin-left: calc(300px / 12);
}
#mydesk_openMydesk, #mydesk_thirdstate_picture, #mydesk_thirdstate_icon{
	cursor: pointer;
}
#mydesk[class*='position_bottom'].desactive.ndState.sideon, #mydesk[class*='position_bottom'].desactive.ndState #mydesk_openMydesk,{
	height: 82px !important;
	border-top-left-radius: var(--arrondi-widget-hg);
	border-top-right-radius: var(--arrondi-widget-hd);
	background-color:rgba(167,189,24,1);
}
#mydesk.desactive #contentDesk{
	display: none;
}
#mydesk_thirdstate_icon{
	width: 38px;
	height: 38px;
	position:absolute;
	top: 6px;
	right: 6px;
	border-radius: 8px;
}
.tf_titleTab_text {
    padding-left: 100px;
    top: 5px;
    position: absolute;
    width: calc(100% - 40px);
}
.rdState .tf_titleTab_txt {
	display: none !important;
}
#mydesk_ndstate_icon{
	width: 40px;
	height: 40px;
	position:absolute;
	top: calc(50% - 20px);
	left: calc(50% - 20px);
	cursor: pointer;
}
#mydesk_thirdstate_icon:hover{
	background-color:rgba(192,57,43,1);
}
#mydesk_thirdstate_picture{
	position: absolute;
	bottom: 0;
	left: 10px;
	width:calc(300px / 3);
	max-height:120px;
	max-width: 90px;
	height:auto;
}
#mydesk_thirdstate_picture img{
	transition: unset; /* anti vacanceole */
}
#mydesk_thirdstate_picture img#agent_hote{
	width: 100%;
	max-width: 100%;
	height: auto;
}
#mydesk[class*='position_bottom'].desactive.desk_Bottom.ndState #mydesk_thirdstate_text{
	text-align: left;
	left: 113px;
	right:0 !important;
	position: absolute;
	bottom: 7px;
	color: rgba(192,57,43,1);
}
#mydesk[class*='position_bottom'].desactive #mydesk-outer.nohotesse #mydesk_thirdstate_text{
	left: calc(300px / 12) !important;
}
#mydesk_thirdstate_text.tfonline #tfoffline, #mydesk_thirdstate_text.tfoffline.fBmess #tfoffline,  #mydesk_thirdstate_text.tfoffline  #tfonline{
	display: none;
}
#mydesk_thirdstate_text.tfoffline #tfoffline, #mydesk_thirdstate_text.tfonline #tfonline {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#mydesk_thirdstate_text.tfoffline.fBmess{
	text-align: center;
	right: -25px;
}
#tfofflineFB {
	padding: 5px 8px !important;
	border-radius: 3px;
	background-color: #0084ff;
	color: #fff;
	width: auto;
	position: relative;
	top: initial;
	display: none;
}
.sideon #tfofflineFB{
	padding: 5px 8px !important;
	border-radius: 3px;
	background-color: #0084ff;
	color: #fff;
	width: auto;
	position: relative;
	top: initial;
	display: none;
}
#tfofflineFB:hover {
	text-decoration: none;
}
#tfofflineFB #logomess{
	width: 17px;
	height: 17px;
	position: relative;
	top: 3px;
	left: -3px;
}
#mydesk.agoffline.fBmess #tfofflineFB, #mydesk.desactive.agoffline.fbmess #tfofflineFB{
	display: inline !important;
	min-width: 120px;
	text-align: center;
	top:0 !important;
	padding: 0px 6px;
}
#mydesk.agoffline.fBmess #tfonline, #mydesk.desactive.agoffline.fbmess #tfonline{
	display: none !important;
}
#mydesk.desactive.ndState.agoffline.desk_Left.fbmess #tfofflineFB{
	display: inline !important;
	padding: 7px 8px;
	top: 0px;
	left: calc(100% - 120px - 10px);
	width: 120px;
}
#mydesk.desactive.ndState.agoffline.desk_Right.fbmess #tfofflineFB {
	display: inline !important;
	padding: 7px 8px;
	top: 0px;
	left: calc(100% - 120px - 10px);
	width: 120px;
}
#mydesk.rdState #mydesk_thirdstate_text{
	display: none;
}

/*-----------------------------------		*/
/*--- 		widget réracté	3rd State ---	*/
/*-----------------------------------		*/
#mydesk.desactive.desk_Bottom.position_bottom_left.rdState{left:30px ; bottom: 30px}
#mydesk.desactive.desk_Bottom.position_bottom_right.rdState{right:30px ; bottom: 30px}
@keyframes scalebt{
	0% {
	  transform:  scale(0)  ;
	}
	90% {
		transform:  scale(70px,70px)  ;
	  }
	100% {
	  transform:  scale(50px,50px)  ;
	}
  }
  @keyframes fbmessin{
	0% {
		background-color:rgba(231,76,60,1);
		border-radius: 30%;
		border-top-left-radius:30%;
		border-bottom-left-radius:30%;
		border-top-right-radius:30%;
		border-bottom-right-radius:30%;
	}
	100% {
		background-color: #0084ff;
		border-radius: 50%;
		border-top-left-radius:50%;
		border-bottom-left-radius:50%;
		border-top-right-radius:50%;
		border-bottom-right-radius:50%;
	}
  }
  @keyframes fbmessinDeskLeft{
	0% {
		background-color:rgba(231,76,60,1);
		border-radius: 30%;
		border-top-left-radius:0;
		border-bottom-left-radius:0;
	}
	100% {
		background-color: #0084ff;
		border-radius: 50%;
		border-top-left-radius:0;
		border-bottom-left-radius:0;
	}
  }
  @keyframes fbmessinDeskRight{
	0% {
		background-color:rgba(231,76,60,1);
		border-radius: 30%;
		border-top-right-radius:0;
		border-bottom-right-radius:0;
	}
	100% {
		background-color: #0084ff;
		border-radius: 50%;
		border-top-right-radius:0;
		border-bottom-right-radius:0;
	}
  }
  @keyframes fbmessinOn{
	0% {
		background-color: #0084ff;
		border-radius: 50%;
	}
	100% {
		background-color: rgba(231,76,60,1);
		border-radius: 30%;
	}
  }
  @keyframes fbmessinOnDeskRight{
	0% {
		background-color: #0084ff;
		border-radius: 50%;
		border-top-right-radius:0;
		border-bottom-right-radius:0;
	}
	100% {
		background-color: rgba(231,76,60,1);
		border-radius: 30%;
		border-top-right-radius:0;
		border-bottom-right-radius:0;
	}
  }
  @keyframes fbmessinOnDeskLeft{
	0% {
		background-color: #0084ff;
		border-radius: 50%;
		border-top-left-radius:0;
		border-bottom-left-radius:0;
	}
	100% {
		background-color: rgba(231,76,60,1);
		border-radius: 30%;
		border-top-left-radius:0;
		border-bottom-left-radius:0;
	}
  }
  @keyframes mydeskfbmessin{
	0% {
		background-color: rgba(231,76,60,1);
		border-radius: 30%;
	}
	100% {
		background-color: #0084ff;
		border-radius: 50%;
	}
  } @keyframes mydeskfbmessinDeskLeft{
	0% {
		background-color: rgba(231,76,60,1);
		border-radius: 30%;
		border-top-left-radius:0;
		border-bottom-left-radius:0;
	}
	100% {
		background-color: #0084ff;
		border-radius: 50%;
		border-top-left-radius:0;
		border-bottom-left-radius:0;
	}
  } @keyframes mydeskfbmessinDeskRight{
	0% {
		background-color: rgba(231,76,60,1);
		border-radius: 30%;
		border-top-right-radius:0;
		border-bottom-right-radius:0;
	}
	100% {
		background-color: #0084ff;
		border-radius: 50%;
		border-top-right-radius:0;
		border-bottom-right-radius:0;
	}
  }
  @keyframes mydeskfbmessinOn{
	0% {
		background-color: #0084ff;
		border-radius: 50% !important;
		border-top-left-radius:50%;
		border-bottom-left-radius:50%;
		border-top-right-radius:50%;
		border-bottom-right-radius:50%;
	}
	100% {
		background-color: rgba(231,76,60,1);
		border-radius: 30% !important;
		border-top-left-radius:30%;
		border-bottom-left-radius:30%;
		border-top-right-radius:30%;
		border-bottom-right-radius:30%;
	}
  }
  @keyframes mydeskfbmessinOnDeskLeft{
	0% {
		background-color: #0084ff;
		border-radius: 50%;
		border-top-left-radius:0;
		border-bottom-left-radius:0;
	}
	100% {
		background-color: rgba(231,76,60,1);
		border-radius: 30%;
		border-top-left-radius:0;
		border-bottom-left-radius:0;
	}
  }
  @keyframes mydeskfbmessinOnDeskRight{
	0% {
		background-color: #0084ff;
		border-radius: 50%;
		border-top-right-radius:0;
		border-bottom-right-radius:0;
	}
	100% {
		background-color: rgba(231,76,60,1);
		border-radius: 30%;
		border-top-right-radius:0;
		border-bottom-right-radius:0;
	}
  }
  @keyframes scalebtoff{
	0% {
	opacity: 1;
	  transform:  scale(1) rotate(0deg)  ;
	}
	99% {
	  transform:  scale(0) rotate(-180deg)   ;
	}
	100% {
		opacity: 0;
	  }
  }
  
  @keyframes scalebton{
	0% {
		opacity: 1;
		transform:  scale(0) rotate(-180deg)
	}
	100% {
		transform:  scale(1) rotate(0deg)  ;
		
	  }
  }
  @keyframes btFBon{
	0% {
		opacity: 1 !important;
		transform:  scale(0) rotate(180deg)
	}
	100% {
		transform:  scale(1) rotate(0deg)  ;
		opacity: 1 !important;
	  }
  }
  @keyframes btFBoff{
	0% {
	  transform:  scale(1) rotate(0deg); 
	  opacity: 1;
	}
	
	99% {
	  transform:  scale(0) rotate(180deg)   ;
	}
	100% {
		opacity: 0;
	  }
  }
#mydesk.desactive.rdState{
	height: 50px;
	width: 50px;
	border-top-left-radius:30%;
	border-bottom-left-radius:30%;
	border-top-right-radius:30%;
	border-bottom-right-radius:30%;
	animation: scalebt cubic-bezier(0.35, 1.51, 0.55, 1) 0.5s both;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-iteration-count: 1;
	animation-delay: 0s;
}
#mydesk.desactive.rdState #mydesk_ndstate_icon{
	/*
	animation: scalebt cubic-bezier(0.35, 1.51, 0.55, 1) 0.5s both;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-delay: 0s;
	*/
}
#mydesk.agoffline.desactive.rdState.fbmess svg#bulle{
	margin:5px;
	cursor: pointer;
	animation: scalebtoff linear 0.5s both;
	animation-iteration-count: 1;
	animation-delay: 1s;
	transform-origin: 50% 50%;
}
#mydesk.agonline.desactive.rdState.fbmess svg#bulle{
	margin:5px;
	cursor: pointer;
	animation: scalebton linear 0.5s both;
	animation-iteration-count: 1;
	animation-delay: 1s;
	transform-origin: 50% 50%;
}
#mydesk.agoffline.desactive.rdState.fbmess svg#icomessenger{
	position: absolute;
	top: 0;
	cursor: pointer;
	animation: btFBon linear 0.5s both;
	animation-iteration-count: 1;
	animation-delay: 1s;
	transform-origin: 50% 50%;
}
#mydesk.agonline.desactive.rdState.fbmess svg#icomessenger{
	opacity: 0;
	position: absolute;
	top: 0;
	cursor: pointer;
	animation: btFBoff linear 0.5s both;
	animation-iteration-count: 1;
	animation-delay: 1s;
	transform-origin: 50% 50%;
}
#mydesk[class*='position_bottom'].desactive.rdState dt#mydesk_title{
	height: 50px;
	position: absolute;
	top: 0;
	background: rgba(231,76,60,1);
	width: 50px;
	color:rgba(167,189,24,1);
	border-top-left-radius:30%;
	border-bottom-left-radius:30%;
	border-top-right-radius:30%;
	border-bottom-right-radius:30%;
}
#mydesk.desactive.rdState.desk_Right dt#mydesk_title{
	height: 50px;
	position: absolute;
	top: 0;
	background: rgba(231,76,60,1);
	width: 50px;
	color:rgba(167,189,24,1);
	
	border-top-left-radius:30%;
	border-bottom-left-radius:30%;
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}
#mydesk.desactive.rdState.desk_Left dt#mydesk_title{
	height: 50px;
	position: absolute;
	top: 0;
	background: rgba(231,76,60,1);
	width: 50px;
	color:rgba(167,189,24,1);
	
	border-top-right-radius:30%;
	border-bottom-right-radius:30%;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
} 
#mydesk[class*='position_bottom'].desactive.rdState.sideon dt#mydesk_title{
	height: 50px;
	position: absolute;
	top: 0;
	background: rgba(231,76,60,1);
	width: 50px;
	color:rgba(167,189,24,1);
	border-top-left-radius:30% !important;
	border-bottom-left-radius:30% !important;
	border-top-right-radius:30% !important;
	border-bottom-right-radius:30% !important;
}
#mydesk.agoffline.desactive.rdState.fbmess dt#mydesk_title {
	animation-name: scalebt, fbmessin !important;
	animation-timing-function:cubic-bezier(0.35, 1.51, 0.55, 1), linear;
	animation-duration: 1s, 1s;
	animation-fill-mode:both, both;
	animation-iteration-count: 1, 1;
	animation-delay: 1s, 1s;
	transform-origin: 50% 50%;
}
#mydesk.agoffline.desactive.desk_Left.rdState.fbmess dt#mydesk_title{
	animation-name: scalebt, fbmessinDeskLeft;
	animation-timing-function:cubic-bezier(0.35, 1.51, 0.55, 1), linear;
	animation-duration: 1s, 1s;
	animation-fill-mode:both, both;
	animation-iteration-count: 1, 1;
	animation-delay: 1s, 1s;
	transform-origin: 50% 50%;
}
#mydesk.agoffline.desactive.desk_Right.rdState.fbmess dt#mydesk_title{
	animation-name: scalebt, fbmessinDeskRight;
	animation-timing-function:cubic-bezier(0.35, 1.51, 0.55, 1), linear;
	animation-duration: 1s, 1s;
	animation-fill-mode:both, both;
	animation-iteration-count: 1, 1;
	animation-delay: 1s, 1s;
	transform-origin: 50% 50%;
}
#mydesk.agonline.desactive.rdState.fbmess dt#mydesk_title{
	animation-name: scalebt, fbmessOn;
	animation-timing-function:cubic-bezier(0.35, 1.51, 0.55, 1), linear;
	animation-duration: 1s, 1s;
	animation-fill-mode:both, both;
	animation-iteration-count: 1, 1;
	animation-delay: 1s, 1s;
	transform-origin: 50% 50%;
}
#mydesk.agoffline.desactive.desk_Left.rdState.fbmess{
	animation: mydeskfbmessinDeskLeft linear 1s both;
	animation-delay: 1s;
	animation-iteration-count: 1;
}
#mydesk.agonline.desactive.desk_Left.rdState.fbmess{
	animation: mydeskfbmessinOnDeskLeft linear 1s both;
	animation-delay: 1s;
	animation-iteration-count: 1;
}
#mydesk.agoffline.desactive.desk_Right.rdState.fbmess{
	animation: mydeskfbmessinDeskRight linear 1s both;
	animation-delay: 1s;
	animation-iteration-count: 1;
}
#mydesk.agonline.desactive.desk_Right.rdState.fbmess{
	animation: mydeskfbmessinOnDeskRight linear 1s both;
	animation-delay: 1s;
	animation-iteration-count: 1;
}
#mydesk.agoffline.desactive.rdState.fbmess{
	animation: mydeskfbmessin linear 1s both ;
	animation-delay: 1s;
	animation-iteration-count: 1;
}
#mydesk.agonline.desactive.rdState.fbmess{
	animation: mydeskfbmessinOn linear 1s both ;
	animation-delay: 1s;
	animation-iteration-count: 1;
}
#mydesk-outer > *, #mydesk-outer{
	cursor: pointer;
}
/*#mydesk_ndstate_icon svg#bulle{margin: 5px;}*/
#mydesk-outer.ndState #mydesk_ndstate_icon,#mydesk.tf_open #mydesk_ndstate_icon, #mydesk.open #mydesk_ndstate_icon,#mydesk-outer.rdState #mydesk_thirdstate_icon, #mydesk.tf_desactive svg#icomessenger, #mydesk.wzbot.tf_desactive svg#icomessenger{
	display: none;
}
#mydesk_ndstate_icon.fBmess svg#icomessenger{
	display: block;
}
#mydesk.desactive.rdState #mydesk_ndstate_icon, #mydesk.tf_desactive.rdState #mydesk_ndstate_icon {
	display: block; 
	width: 40px;
	height: 40px;
	margin: 0px;
}
#mydesk-outer.rdState .titleOuterMydesk{
	display: none;
}
.titleOuterMydesk span{
	white-space: nowrap;
	height: 50px;
	font-weight: 600;
}
.desk_Right .titleOuterMydesk span,
.desk_Left .titleOuterMydesk span{
	white-space: nowrap;
	height: 50px;
	font-weight: 100;
}
#mydesk.desactive.desk_Right.rdState{
	top: calc(50% - 25px);
	right: 0px ;
	border-top-left-radius: 30%;
	border-bottom-left-radius: 30%;
	border-top-right-radius: 0%;
	border-bottom-right-radius: 0%;
}
#mydesk.desactive.desk_Left.rdState{
	top: calc(50% - 25px);
	left: 0px ;
	right: inherit;
	border-top-left-radius: 0%;
	border-bottom-left-radius: 0%;
	border-top-right-radius: 30%;
	border-bottom-right-radius: 30%;
}
#mydesk[class*='right'].desactive.rdState.sideon{
	bottom: 30px ;
	right: 30px ;
	border-top-left-radius: 30%;
	border-bottom-left-radius: 30%;
	border-top-right-radius: 30%;
	border-bottom-right-radius: 30%;
}
#mydesk[class*='left'].desactive.rdState.sideon{
	bottom: 30px ;
	left: 30px ;
	right: inherit ;
	border-top-left-radius: 30%;
	border-bottom-left-radius: 30%;
	border-top-right-radius: 30%;
	border-bottom-right-radius: 30%;
}
#mydesk-outer.rdState #mydesk_thirdstate_picture{
	display: none;
}
@-webkit-keyframes heartbeat {
	from {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-transform-origin: center center;
			  transform-origin: center center;
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	10% {
	  -webkit-transform: scale(0.91);
			  transform: scale(0.91);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	17% {
	  -webkit-transform: scale(0.98);
			  transform: scale(0.98);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	33% {
	  -webkit-transform: scale(0.87);
			  transform: scale(0.87);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	45% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
  }
  @keyframes heartbeat {
	from {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-transform-origin: center center;
			  transform-origin: center center;
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	10% {
	  -webkit-transform: scale(0.91);
			  transform: scale(0.91);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	17% {
	  -webkit-transform: scale(0.98);
			  transform: scale(0.98);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	33% {
	  -webkit-transform: scale(0.87);
			  transform: scale(0.87);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	45% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
  }
@-webkit-keyframes swing-in-left-bck {
	0% {
	  -webkit-transform: rotateY(-70deg);
			  transform: rotateY(-70deg);
	  -webkit-transform-origin: left;
			  transform-origin: left;
	  opacity: 0;
	}
	100% {
	  -webkit-transform: rotateY(0);
			  transform: rotateY(0);
	  -webkit-transform-origin: left;
			  transform-origin: left;
	  opacity: 1;
	}
  }
  @keyframes swing-in-left-bck {
	0% {
	  -webkit-transform: rotateY(-70deg);
			  transform: rotateY(-70deg);
	  -webkit-transform-origin: left;
			  transform-origin: left;
	  opacity: 0;
	}
	100% {
	  -webkit-transform: rotateY(0);
			  transform: rotateY(0);
	  -webkit-transform-origin: left;
			  transform-origin: left;
	  opacity: 1;
	}
  }
  @-webkit-keyframes swing-in-right-bck {
	0% {
	  -webkit-transform: rotateY(70deg);
			  transform: rotateY(70deg);
	  -webkit-transform-origin: right;
			  transform-origin: right;
	  opacity: 0;
	}
	100% {
	  -webkit-transform: rotateY(0);
			  transform: rotateY(0);
	  -webkit-transform-origin: right;
			  transform-origin: right;
	  opacity: 1;
	}
  }
  @keyframes swing-in-right-bck {
	0% {
	  -webkit-transform: rotateY(70deg);
			  transform: rotateY(70deg);
	  -webkit-transform-origin: right;
			  transform-origin: right;
	  opacity: 0;
	}
	100% {
	  -webkit-transform: rotateY(0);
			  transform: rotateY(0);
	  -webkit-transform-origin: right;
			  transform-origin: right;
	  opacity: 1;
	}
  }
span#WZ-Badge.inactif{
	display: none;
	background-color: red;
	border-radius: 50%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	width: 10px;
	height: 10px;
}
span#WZ-Badge.actif{
	display: inline;
	background-color: red;
	border-radius: 50%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	width: 10px;
	height: 10px;
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	animation: heartbeat 1.5s ease-in-out infinite both;
}
#mydesk[class*='Right'] span#WZ-Badge.actif{
	transform: rotate(90deg);
}
#mydesk[class*='Left'] span#WZ-Badge.actif{
	transform: rotate(-90deg);
}
#mydesk[class*='Right'].sideon span#WZ-Badge.actif, 
#mydesk[class*='Left'].sideon span#WZ-Badge.actif
#mydesk[class*='right'].sideon span#WZ-Badge.actif, 
#mydesk[class*='left'].sideon span#WZ-Badge.actif
{
	transform: rotate(0);
}
#WZ-Badge.actif:hover {
	animation: none !important;
}
div#BadgeWZTxt:before {
	content: "";
	position: absolute;
	left: inherit;
	right: 30px;
	top: 100%;
	width: 0;
	height: 0;
	border-left: 11px solid transparent;
	border-right: 12px solid red;
	border-bottom: 10px solid transparent;
	animation: none;
}
div#BadgeWZTxt {
	display: none;
	background-color: red;
	position: absolute;
	z-index: 1;
	white-space: nowrap;
	top: -44px;
	right: -24px;
	padding: 5px;
	border-radius: 6px;
	color: #FFF;
	-webkit-animation: swing-in-right-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	animation: swing-in-right-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}
#mydesk.rdState.desk_Left div#BadgeWZTxt, #mydesk.rdState.position_bottom_left div#BadgeWZTxt  {
	right: -150px;
}
#mydesk.rdState.desk_Left div#BadgeWZTxt:before, #mydesk.rdState.position_bottom_left div#BadgeWZTxt:before {
	right: 156px;
}
#mydesk.ndState.sideon div#BadgeWZTxt:before{
	content: "";
	position: absolute;
	left: inherit;
	left: 20px;
	top: 100%;
	width: 0;
	height: 0;
	border-right: 11px solid transparent;
	border-left: 12px solid red;
	border-bottom: 10px solid transparent;
}
#mydesk.ndState.sideon span#WZ-Badge.actif {
	display: inline;
	background-color: red;
	border-radius: 50%;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	width: 10px;
	height: 10px;
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	animation: heartbeat 1.5s ease-in-out infinite both;
}
#mydesk.ndState.sideon div#BadgeWZTxt {
	display: none;
	background-color: red;
	position: absolute;
	z-index: 1;
	white-space: nowrap;
	top: -54px;
	right: calc(-300px * .70);
	padding: 5px;
	border-radius: 6px;
	color: #FFF;
	/*font-size: .8em;*/
	-webkit-animation: swing-in-left-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	animation: swing-in-left-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}
#WZ-Badge.actif:hover #BadgeWZTxt{display: inline !important;}
/*------------------------------*/
/*----   LISTE DES AGENTS   ----*/
/*------------------------------*/
dl.dl_listeAgent {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0;
	top: 28px;
}
#mydesk[class*="left"] #contentListAgent #ListAgent-close, #mydesk[class*="Left"] #contentListAgent  #ListAgent-close{
	display: block !important;
	top:5px;
	right:5px;
	cursor: pointer; 
}
#mydesk[class*="middle"] #contentListAgent #ListAgent-close{
	display: block !important;
	top:5px;
	right:5px;
	cursor: pointer; 
}
#mydesk[class*="right"] #contentListAgent #ListAgent-close, #mydesk[class*="Right"] #contentListAgent  #ListAgent-close{
	display: block !important;
	top:5px;
	left:5px;
	cursor: pointer;
}
#ListAgent-close:hover svg{
	fill:rgba(231,76,60,1);
}
#mydesk[class*="left"] #contentListAgent , #mydesk[class*="Left"] #contentListAgent {
	background: rgba(250,250,250,1);
	box-shadow: 0px 3px 18px rgb(0 0 0 / 20%);
}
#mydesk[class*="middle"] #contentListAgent , #mydesk[class*="Left"] #contentListAgent {
	background: rgba(250,250,250,1);
	box-shadow: 0px 3px 18px rgb(0 0 0 / 20%);
}
#mydesk[class*="right"] #contentListAgent, #mydesk[class*="Right"] #contentListAgent {
	background: rgba(250,250,250,1);
	box-shadow: 0px 3px 18px rgb(0 0 0 / 20%);
}
#contentListAgent{
	padding: 24px 24px 0 24px;
	position:absolute;
	z-index: 0;
	top: 0px;
	left: 24px;
	width: calc(210px);
	bottom:0;
}
/* Bouton liste agents */
#contentListAgent .icone_listeAgent:hover{
	background-color: rgba(167,189,24,0.2);
}
 #contentListAgent .listeAgentName{
	color:rgba(167,189,24,1);
}
@keyframes open_Right{
	0%{
		transform: translateX(100px);
	}
	100% {
		transform: translateX(-220px);
	}
}
@keyframes open_Left{
	0% {
		transform: translateX(0);
}
	100% {
		transform: translateX(310px);
	}
}
@keyframes open_mobile{
	0% {
		transform: translateX(300px);
}
	100% {
		transform: translateX(0);
	}
}
#mydesk[class*="left"] #contentListAgent.actif, #mydesk[class*="Left"] #contentListAgent.actif  {
	border-top-left-radius: 0px;
	border-top-right-radius: var(--arrondi-widget-hd);
	border-bottom-right-radius:var(--arrondi-widget-bd);
	transform: translateX(280px);
}
#mydesk[class*="right"] #contentListAgent.actif, #mydesk[class*="Right"] #contentListAgent.actif {
	border-top-left-radius: var(--arrondi-widget-hg);
	border-bottom-left-radius:var(--arrondi-widget-bg);
	border-top-right-radius: 0px;
	transform: translateX(-210px);
}
#mydesk[class*="middle"] #contentListAgent.actif {
	border-top-left-radius: 0px;
	border-top-right-radius: var(--arrondi-widget-hd);
	border-bottom-right-radius:var(--arrondi-widget-bd);
	transform: translateX(280px);
}
/*en bas*/
#agent_img img{
	border-radius: 50%;
    height: 47px;
    width: 47px;;

}
#ListeAgentOnline .online #agent_img img {
	border:2px solid #9ecf53;
}
#ListeAgentOnline .offline #agent_img img {
	border:2px solid red;
}
ul#listAgentMydesk {
	list-style-type: none;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-inline-start: 0;
}
ul#listAgentMydesk li.online:hover {
	background-color: rgba(0,0,0,0.05);
}
#OpenListAgent{width: 17px; height: 17px;border-radius: 50% ;position: absolute;z-index: 3;background:rgba(192,57,43,1);top:35px;left: 5px;cursor: pointer;}
#OpenListAgent svg{margin: 2px;cursor: pointer;}
#OpenListAgent #adressBook path {fill:rgba(167,189,24,1); }
#mydesk.listAgentsOff #OpenListAgent{display: none}
#contentListAgent.actif #ListAgent-close{display:block;}
#ListAgent-close{width: 20px; height: 20px; position: absolute; top:0;}
#contentListAgent.actif .contenerListeAgent{display:block;}
#contentListAgent.actif {display: block!important; left:10px}
#contentListAgent{display:block !important; overflow: hidden;transition: all .5s ease-in-out;};
#mydesk[class*="right"] #contentListAgent.inactif, #mydesk[class*="Right"] #contentListAgent.inactif {
	transform: translateX(70px);
}
#mydesk[class*="left"] #contentListAgent.inactif, #mydesk[class*="Left"] #contentListAgent.inactif {
	transform: translateX(0);
}
#mydesk[class*="middle"] #contentListAgent.inactif{
	transform: translateX(0);
}

.nomListeAgent {
	display: inline-block;
	min-height: 48px;
    width: calc(100% - 10px);
	padding-left: 54px;
}
.imageListeAgent {
	display: inline-block;
	position: absolute;
	max-width: 50px;
	max-height: 50px;
}
ul#listAgentMydesk{ margin: 0 !important; /*line-height: 1em;*/}

#listAgentMydesk li{
	border-top: 1px solid rgba(227,227,227,0.5);
	transition: all ease-in-out 0.5s;
	padding-left: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
}
#listAgentMydesk li:first-child{
	border-top: 1px solid rgba(227,227,227,0.5);
}
#listAgentMydesk li:last-child{
	border-top: 1px solid rgba(227,227,227,0.5);
	border-bottom: 1px solid rgba(227,227,227,0.5);
}
#listAgentMydesk li:hover{
	background-color:rgba(167,189,24,0.1);
	cursor: pointer;
}
#listAgentMydesk li.offline{
	opacity: 0.6;
}
#listAgentMydesk li.offline:hover{
	background-color:none !important;
}
.dl_listeAgent {
	overflow-x: hidden;
	overflow-y: scroll;
}
#contentListAgent .listeAgentName {
	color: rgba(80,80,80,1);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    max-width: 182px;
    text-overflow: ellipsis;
    position: relative;
}
span.listeAgentJob {
	color: rgba(170,170,170,1);
    font-size: 0.9em;
    display: inline-flex;
    margin-top: 0px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
span.listeAgentStatut {
	display: none;
}
dd#ListeAgentOnline{
	margin-left: 0px;
	font-size: inherit !important;
    line-height: inherit !important;
}
.position_bottom_left #contentListAgent  dd#ListeAgentOnline{
	margin-left: 10px;
}
span.listeAgentStatut:before{
	display: inline-flex;
	position: relative;
	margin-top: 0;
	box-sizing: border-box;
}
.online span.listeAgentStatut:before {
	content:"\2022 ";
	color: greenyellow;
}
.busy span.listeAgentStatut:before {
	content:"\2022 ";
	color: orange;
}
.offline span.listeAgentStatut:before {
	content:"\2022 ";
	color: red;
}
#reduce_ico rect, #close_ico polygon, #open_ico polygon, #bulle path{
	fill:rgba(167,189,24,1);
}
#contentListAgent #close_ico polygon {
	fill:rgba(150,150,150,1);
}
/*-----------------------------------		*/
/*--- 		Pause conversation ---			*/
/*-----------------------------------		*/
#mydesk.desactive div#dialogReconnexion, #mydesk.tf_desactive div#dialogReconnexion{
	display:none;
}
.wz_connexionSocket{
	text-align: center;
	position: absolute;
	top: 56px;
	left: 0px;
	right: 0px;
	bottom:0px;
	z-index: 1000;
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(205,205,205,1) 78%, rgba(205,205,205,0.8) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(205,205,205,1) 78%,rgba(205,205,205,0.8) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(205,205,205,1) 78%,rgba(205,205,205,0.8) 100%);
	padding: 24px 24px 0 24px;
}
#mydesk.desk_Right .wz_connexionSocket, #mydesk.desk_Left .wz_connexionSocket{
	position: absolute;
	top: 56px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(205,205,205,1) 78%, rgba(205,205,205,0.8) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(205,205,205,1) 78%,rgba(205,205,205,0.8) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(205,205,205,1) 78%,rgba(205,205,205,0.8) 100%);
	padding: 24px 24px 0 24px;
	text-align: center;
  }
.wz_titleReconnexion {
	text-align: center;
	padding-bottom: 14px !important;
	padding-top: 20px !important;
}
.wz_contentReconnexion {
	text-align: center;
	padding: 10px !important;
}
.wz_contentP{
	margin:0px 0px 8px 0px !important;
}
.wz_btsConnexion {
	padding: 8px 0px 8px 0px;
	text-align: center;
}
.wz-btReconnexion, .wz-btReconnexionNo {
	margin: 2px 8px;
	padding: 4px 16px 4px 16px;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;
	cursor:pointer;
}
#mydesk.mydesk-template  .wz-btReconnexion, #mydesk.mydesk-template .wz-btReconnexionNo{
	background-color: #E74C3C;
	text-transform: uppercase;
	transition : background-color 500ms ease-out;
	color:#ffffff;
	border: 0px solid #E74C3C !important;
	min-height: 2em !important;
	margin-bottom: 20px;
}
#mydesk.mydesk-template  .wz-btReconnexion:hover, #mydesk.mydesk-template .wz-btReconnexionNo:hover{
	background-color: #C0392B;
	text-transform: uppercase;
	transition : background-color 500ms ease-out;
	color:#ffffff;
	border: 0px solid #E74C3C !important;
}
#mydesk.desactive div#dialogReconnexion{
	display:none;
}
/*-----------------------------------		*/
/*--- 		scrollBar custom conversation ---			*/
/*-----------------------------------		*/
#WatchBox-conversation-body::-webkit-scrollbar,
#watchFormSATIS::-webkit-scrollbar, .watchFormSATIS::-webkit-scrollbar,
#watchFormABS::-webkit-scrollbar,
#watchFormPRECHAT::-webkit-scrollbar {
	width: 12px;
	background-color: transparent;
	border-radius: 6px;
}

#WatchBox-conversation-body::-webkit-scrollbar-thumb,
#watchFormSATIS::-webkit-scrollbar-thumb, .watchFormSATIS::-webkit-scrollbar-thumb,
#watchFormABS::-webkit-scrollbar-thumb,
#watchFormPRECHAT::-webkit-scrollbar-thumb {
	background-color:rgba(231,76,60,1);
	border-radius: 6px;
}
/*-----------------------------------		*/
/*--- 		scrollBar custom listing agent ---			*/
/*-----------------------------------		*/
.dl_listeAgent::-webkit-scrollbar,
#watchFormSATIS::-webkit-scrollbar, .watchFormSATIS::-webkit-scrollbar,
#watchFormABS::-webkit-scrollbar,
#watchFormPRECHAT::-webkit-scrollbar {
	width: 6px;
	background-color: transparent;
	border-radius: 3px;
}
.dl_listeAgent::-webkit-scrollbar-track,
#watchFormSATIS::-webkit-scrollbar-track, .watchFormSATIS::-webkit-scrollbar-track,
#watchFormABS::-webkit-scrollbar-track,
#watchFormPRECHAT::-webkit-scrollbar-track {
	background-color:rgba(190,190,190,0);
}
.dl_listeAgent::-webkit-scrollbar-thumb,
#watchFormSATIS::-webkit-scrollbar-thumb, .watchFormSATIS::-webkit-scrollbar-thumb,
#watchFormABS::-webkit-scrollbar-thumb,
#watchFormPRECHAT::-webkit-scrollbar-thumb {
	background-color:rgba(190,190,190,1);
  border-radius: 3px;
}
/*-----------------------------------		*/
/*--- 		Form Absence	 ---			*/
/*-----------------------------------		*/
#watchFormABS input[type='text']{
	padding: 10px;
    margin: 0px auto 9px auto;
    background-color: #ffffff;
    border: 1px solid #eee;
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#watchFormABS .ABSMessage{
	padding: 10px;
    margin: 0px auto 9px auto;
    background-color: #ffffff;
    border: 1px solid #eee;
	width:100%;
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#watchFormABS .labelAbs{
	display: none;
}
.watchFormDisplay {
	overflow-x: auto;
}
#titleABS{
	text-align: center;
}
.contentFormABS, .contentFormABS .subtitleAbs #mabs1, .contentFormABS .subtitleAbs #mabs2{
	text-align: center;
} 
#watchFormABS input, #watchFormLEAD input, #watchFormPRECHAT input{
	height: 35px !important;
	width: 100% !important;
	min-height: 35px!important;
	max-height: 35px !important;
	margin-bottom: 10px !important;
}
/*-----------------------------------		*/
/*--- 		Drop File 	 ---			*/
/*-----------------------------------		*/
#wz_dropzone.target_dropzone{
	backdrop-filter: blur(5px);
	top:0 !important;
	bottom:56px !important;
	height: auto !important;
}
#wz_dropzone.target_dropzone .dz-preview:hover .dz-image img {
	-webkit-transform: scale(1) !important;
	-moz-transform: scale(1) !important;
	-ms-transform: scale(1) !important;
	-o-transform: scale(1) !important;
	transform: scale(1) !important;
	-webkit-filter: blur(0px) !important;
	filter: blur(0px) !important;
}
#wz_dropzone.target_dropzone .dz-preview {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin: 0px !important;
	min-height: 100px;
	top: calc(50% - 150px) !important;
}
.dz-image{
	text-align: center;
}
.dz-image img{
	border: 5px #FFF solid;
}
#wz_dropzone.target_dropzone .dz-preview .dz-image {
	border-radius: 0px !important;
	overflow: hidden;
	min-height: 120px;
	min-width: 120px;
	position: relative;
	display: block;
	z-index: 10;
	border: 5px #FFF solid;
}
.dz-remove{
	width: 25px;
	height: 25px;
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 1003;
	background-color:rgba(231,76,60,1);
	border-radius: 50%;
}
.dz-remove svg{
	margin: 5px;
	width: 15px;
	height : 15px
}
#WatchBox-chatSendDropZone svg{
	width: 100%;
	height: auto;
	margin: 1px;
	fill: rgba(167,189,24,1);
}

#WatchBox-chatSendDropZone{
	background-color: rgba(231,76,60,1);
	border-radius : 50%;
	top: calc(50% - 16px);
	width: calc(300px / 8);
	height: calc(300px / 8);
	left:calc(50% - 19px );
	z-index: 1001;
	position: absolute;
}
.dz-message {
	top: 50%;
	position: absolute;
	text-align: center;
	width: calc(100%) !important;
	pointer-events: none;
}
.dz-progress {
  
	top: 84% !important;
	border: rgba(231,76,60,1) 2px solid;
  
}
svg.wz_icone_attachment{
	fill:rgba(167,189,24,1);
	fill: rgba(255,255,255,1);
	width: calc(300px / 8);
	transform: rotate(-45deg);
	margin: 10px;
}
span.formatFile {
	display: inline-block;
	height: 50px;
	padding-right: 15px;
	float: right;
}
a#filednwl:hover svg, a#filednwl:hover span{
	text-decoration: none;
	color: rgba(144,159,58,1);
	fill:rgba(144,159,58,1);
}
a#imgdnwl {
	display: block;
	position: relative;
}
#tfzoomin{
	display:none; 
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: auto;
	background-color: rgba(231,76,60,0.5);
}
#tfzoomin svg {
	display:none;
	width: 50px;
	position: absolute;
	top: calc(50% - 25px);
	left: calc(50% - 25px);
	fill:rgba(167,189,24,1);
}
a#imgdnwl:hover #tfzoomin, a#imgdnwl:hover #tfzoomin svg{
	display:block;
}
.element-animation{
	animation: animationFrames ease-out 2s;
	animation-iteration-count: 1;
	transform-origin: 50% 100%;
	-webkit-animation: animationFrames ease-out 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 100%;
	-moz-animation: animationFrames ease-out 2s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 100%;
	-o-animation: animationFrames ease-out 2s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 100%;
	-ms-animation: animationFrames ease-out 2s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 100%;
}
/*-----------------------------------		*/
/*--- 		CallBack Classic 	 ---			*/
/*-----------------------------------		*/
#mydesk-callback[class*="left"]{
	left:10px;
}
#mydesk-callback[class*="Left"]{
	left:calc(50px + 10px);
	bottom: 50%;
}
#mydesk-callback[class*="Left"].wzopen{
	left:calc(10px + 300px) !important;
	bottom: 50%;
}
#mydesk-callback[class*="Left"].wzclose.sideon, #mydesk-callback[class*="left"].wzclose.sideon{
	left: 10px;
	bottom: 90px;
}
#mydesk-callback[class*="right"]{
	right:10px;
}
#mydesk-callback[class*="Right"]{
	right: calc(50px + 10px);
	bottom: 50%;
}
#mydesk-callback[class*="Right"].wzopen{
	right: calc(10px + 300px) !important;
	bottom: 50%;
}
#mydesk-callback[class*="Right"].wzclose.sideon, #mydesk-callback[class*="right"].wzclose.sideon{
	right: 10px;
	bottom: 90px;
}
#mydesk-callback[class*="middle"], #mydesk-callback[class*="Middle"]{
	right:calc(50% - 150px);
}
.mydesk-callback .btn-callback.send {
	background: #E74C3C; /* Old browsers */
	color: #ffffff;
}
#closeCallback{
	position: absolute;
	right: 5px;
	top: 5px;
	max-height: 200px;
	cursor: pointer;
	z-index: 10000000;
}
#closeCallback #close_ico polygon{fill:#E74C3C}
.mydesk-callback .btn-callback.send:hover {
	background: #C0392B; /* Old browsers */
  color: #ffffff;
}
#mydesk-callback-photo {
	position:absolute;
	bottom: 0px;
	right: 0px;
	display:block;
	width: 30%;
}
#mydesk-callback.desactive, #mydesk-callback.tf_desactive{
	display:none !important;
}
#mydesk-callback.open, #mydesk-callback.tf_open{
	display:block !important;
}
#mydesk-callback{
	padding: 0px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	display: table;
	display: inline-block;
	word-wrap: break-word;
	width: 300px;
	min-height:80px;
	max-width: 300px;
	position: fixed;
	-webkit-box-shadow: 0px 3px 12px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 12px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 12px rgba(0,0,0,0.3);
	z-index:10000;
}
div#iconcallback {
	border-radius:50%;
	width:  30px;
	height:30px;
	position: absolute;
	top: 35px;
	right: 13px;
	background-color: rgba(192,57,43,1);
	cursor: pointer;
	padding:1%;
	animation: all 1s ease-out both;
	transform-origin: 50% 50%;
	z-index:10000;
	box-sizing: border-box;
}
div#iconcallback:hover {
	border-radius:50%;
	position: absolute;
	top: 35px;
	right: 13px;
	padding:1%;
	background-color: rgba(167,189,24,1);
	cursor: pointer;
	transform-origin: 50% 50%;
	z-index:10000;
}
div#iconcallback svg path{
	fill:rgba(167,189,24,1);
}
div#iconcallback:hover svg path{
	fill:rgba(192,57,43,1);
}
#mydesk-push.push_Bottom.wzclose,
#mydesk-callback.callback_Bottom.wzclose {
	bottom:110px;
}
#mydesk-push.push_Bottom.wzopen,
#mydesk-callback.callback_Bottom.wzopen {
	bottom:calc(20px + 300px);
}
.mydesk-text-callback{
	display:block;
	text-align: left;
}
#mydesk-callback.mydesk-callback .mydesk-title-callback{
	border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
}
#mydesk-callback-photo {
	position:absolute;
	bottom: 0px;
	right: 0px;
	display:block;
	width: 30%;
}
.mydesk-content-callback{
	color:#ffffff;
	padding:10px 0px 10px 10px !important;
}
#mydesk-callback p{margin: 0 !important}

#mydesk-callback-photo img{
	max-width:100%;
	float: right;
}
p.mydesk-title-callback{
	color:#ffffff;
	padding:10px !important;
}
/* Fenetre de Callback avec FB messenger */
#mydesk-callback.fbMessenger.agonline { background: #FFF !important; border: 1px solid rgba(192,57,43, 0.4); }
#mydesk-callback.fbMessenger.agonline .mydesk-title-callback { background: #FFF !important; color: rgba(192,57,43, 1); text-align: center; border-bottom: 1px solid rgba(192,57,43, 0.1); }
#mydesk-callback.fbMessenger.agonline #closeCallback { width: 17px; height: 17px; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
#mydesk-callback.mydesk-callback.callback_Bottom.fbMessenger.agonline:before, #mydesk-callback.mydesk-callback.callback_BottomRight.fbMessenger.agonline:before, #mydesk-callback.mydesk-callback.callback_BottomLeft.fbMessenger.agonline:before { border-left: 12px solid; border-top: 12px solid; border-right: 10px solid; border-color: rgba(192,57,43, 0.4); border-left-color: transparent; border-right-color: transparent; right: 45%; }
#mydesk-callback.fbMessenger.agonline:after { content: ""; position: absolute; width: 0; height: 0; }
#mydesk-callback.mydesk-callback.callback_Bottom.fbMessenger.agonline:after, #mydesk-callback.mydesk-callback.callback_BottomRight.fbMessenger.agonline:after, #mydesk-callback.mydesk-callback.callback_BottomLeft.fbMessenger.agonline:after { border-left: 12px solid; border-top: 12px solid; border-right: 10px solid; border-color: #FFF; border-left-color: transparent; border-right-color: transparent; top: calc(100% - 2px); right: 45%; }
#mydesk-callback.fbMessenger.agonline .form-control { height: 33px; width: 48.5% !important; padding: 0 0 0 0 !important; margin: 0 0 0 0 !important; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; }
#mydesk-callback.fbMessenger.agonline #callee { width: 100% !important; padding: 0 0 1px 0; margin: 0 0 2px 0 !important; max-width: 100% !important; }
#mydesk-callback.fbMessenger.agonline .btn-callback.actif { display: block; text-align: center; padding: 10px 0; }
#mydesk-callback.fbMessenger.agonline .form-callback { padding: 0 10px 0 10px !important;margin-bottom: 0 !important }
@keyframes opencallback {
	 0% { bottom: 120px; opacity: 0; }
	 100% { bottom: 90px; opacity: 1; }
}
@keyframes opencallbackSide {
	0% { bottom: 60%; opacity: 0; }
	100% { bottom: 50%; opacity: 1; }
}
#mydesk-callback.fbMessenger.agonline.open, #mydesk-callback.fbMessenger.agonline.tf_open { animation-name: opencallback; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; }
#mydesk-callback[class*='callback_'].fbMessenger.agonline.open, #mydesk-callback[class*='callback_'].fbMessenger.agonline.tf_open { animation-name: opencallbackSide; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; }

#mydesk-callback.mydesk-callback .mydesk-content-callback { color: rgba(192,57,43, 1); max-width: 90% !important; }
#mydesk-callback.callbackimg.mydesk-callback .mydesk-content-callback { color: rgba(192,57,43, 1); max-width: 70% !important; }

/* Agent offline */
#mydesk-callback.fbMessenger.agoffline { background: #FFF !important; border: 1px solid rgba(192,57,43, 0.4); }
#mydesk-callback.fbMessenger.agoffline .mydesk-title-callback { background: #FFF !important; color: rgba(192,57,43, 1); text-align: center; border-bottom: 1px solid rgba(192,57,43, 0.1); }
#mydesk-callback.fbMessenger.agoffline #closeCallback { width: 17px; height: 17px;border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
#mydesk-callback.mydesk-callback.callback_Bottom.fbMessenger.agoffline:before, #mydesk-callback.mydesk-callback.callback_BottomRight.fbMessenger.agoffline:before, #mydesk-callback.mydesk-callback.callback_BottomLeft.fbMessenger.agoffline:before { border-left: 12px solid; border-top: 12px solid; border-right: 10px solid; border-color: rgba(192,57,43, 0.4); border-left-color: transparent; border-right-color: transparent; right: 19%; }
#mydesk-callback.fbMessenger.agoffline:after { content: ""; position: absolute; width: 0; height: 0; }
#mydesk-callback.mydesk-callback.callback_Bottom.fbMessenger.agoffline:after, #mydesk-callback.mydesk-callback.callback_BottomRight.fbMessenger.agoffline:after, #mydesk-callback.mydesk-callback.callback_BottomLeft.fbMessenger.agoffline:after { border-left: 12px solid; border-top: 12px solid; border-right: 10px solid; border-color: #FFF; border-left-color: transparent; border-right-color: transparent; top: calc(100% - 2px); right: 19%; }
#mydesk-callback.fbMessenger.agoffline .form-control { height: 33px; width: 48.5% !important; padding: 0 0 0 0 !important; margin: 0 0 0 0 !important; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; }
#mydesk-callback.fbMessenger.agoffline #callee { width: 100% !important; padding: 0 0 1px 0; margin: 0 0 2px 0 !important; max-width: 100% !important; }
#mydesk-callback.fbMessenger.agoffline .btn-callback.actif { display: block; text-align: center; padding: 10px 0; }
#mydesk-callback.fbMessenger.agoffline .form-callback { padding: 0 10px 0 10px !important; margin-bottom: 0 !important}
@keyframes opencallback {
	0% { bottom: 120px; opacity: 0; }
	100% { bottom: 90px; opacity: 1; }
}
#mydesk-callback.fbMessenger.agoffline.wzclose.open,
#mydesk-callback.fbMessenger.agoffline.wzclose.tf_open { animation-name: opencallback; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; }
@keyframes opencallback2 {
	0% { bottom: calc(300 + 100px); opacity: 0; }
	100% { bottom: calc(300 + 85px); opacity: 1; }
}
#mydesk-callback.fbMessenger.wzopen.open,
#mydesk-callback.fbMessenger.wzopen.tf_open { animation-name: opencallback2; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; }

/* callback sans messenger*/
#mydesk-callback.agonline { background: #FFF !important; border: 1px solid rgba(192,57,43, 0.4); }
#mydesk-callback.agonline .mydesk-title-callback { background: #FFF !important; color: rgba(192,57,43, 1); text-align: center; border-bottom: 1px solid rgba(192,57,43, 0.1); }
#mydesk-callback.agonline #closeCallback { width: 17px; height: 17px; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
#mydesk-callback.agonline #mydesk-callback-photo {  /*display: none;*/ }
#mydesk-callback.mydesk-callback.callback_Bottom.agonline:before, #mydesk-callback.mydesk-callback.callback_BottomRight.agonline:before, #mydesk-callback.mydesk-callback.callback_BottomLeft.agonline:before { border-left: 12px solid; border-top: 12px solid; border-right: 10px solid; border-color: rgba(192,57,43, 0.4); border-left-color: transparent; border-right-color: transparent; right: 45%; }
#mydesk-callback.agonline:after { content: ""; position: absolute; width: 0; height: 0; }
#mydesk-callback.mydesk-callback.callback_Bottom.agonline:after, #mydesk-callback.mydesk-callback.callback_BottomRight.agonline:after, #mydesk-callback.mydesk-callback.callback_BottomLeft.agonline:after { border-left: 12px solid; border-top: 12px solid; border-right: 10px solid; border-color: #FFF; border-left-color: transparent; border-right-color: transparent; top: calc(100% - 2px); right: 45%; }
#mydesk-callback.agonline .form-control { height: 33px; width: 48.5% !important; padding: 0 0 0 0 !important; margin: 0 0 0 0 !important; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; }
#mydesk-callback.agonline #callee { width: 100% !important; padding: 0 0 1px 0; margin: 0 0 2px 0 !important; max-width: 100% !important; }
#mydesk-callback.agonline .btn-callback.actif { display: block; text-align: center; padding: 10px 0; }
#mydesk-callback.agonline .form-callback { padding: 0 10px 0 10px !important; margin-bottom: 0 !important}
@keyframes opencallback {
	0% { bottom: 120px; opacity: 0; }
	100% { bottom: 90px; opacity: 1; }
}
#mydesk-callback.agonline.open { animation-name: opencallback; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; }
#mydesk-callback.callback_Right.open,#mydesk-callback.callback_Left.open { animation-name: opencallbackSide; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; }
#mydesk-callback.mydesk-callback .mydesk-content-callback, #mydesk-callback .callback_ok { color: rgba(192,57,43, 1); max-width: 90% !important; }
#mydesk-callback.callbackimg.mydesk-callback .mydesk-content-callback, #mydesk-callback .callback_ok { color: rgba(192,57,43, 1); max-width: 70% !important; }
#mydesk-callback.agoffline { background: #FFF !important; border: 1px solid rgba(192,57,43, 0.4); }
#mydesk-callback.agoffline .mydesk-title-callback { background: #FFF !important; color: rgba(192,57,43, 1); text-align: center; border-bottom: 1px solid rgba(192,57,43, 0.1); }
#mydesk-callback.agoffline #closeCallback { width: 17px; height: 17px; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
#mydesk-callback.agoffline #mydesk-callback-photo {  /*display: none;*/ }
#mydesk-callback.mydesk-callback.callback_Bottom.agoffline:before, #mydesk-callback.mydesk-callback.callback_BottomRight.agoffline:before, #mydesk-callback.mydesk-callback.callback_BottomLeft.agoffline:before { border-left: 12px solid; border-top: 12px solid; border-right: 10px solid; border-color: rgba(192,57,43, 0.4); border-left-color: transparent; border-right-color: transparent; right: 45%; }
#mydesk-callback.agoffline:after { content: ""; position: absolute; width: 0; height: 0; }
#mydesk-callback.mydesk-callback.callback_Bottom.agoffline:after, #mydesk-callback.mydesk-callback.callback_BottomRight.agoffline:after, #mydesk-callback.mydesk-callback.callback_BottomLeft.agoffline:after { border-left: 12px solid; border-top: 12px solid; border-right: 10px solid; border-color: #FFF; border-left-color: transparent; border-right-color: transparent; top: calc(100% - 2px); right: calc(50% - 11px); }
#mydesk-callback.agoffline .form-control { height: 33px; width: 48.5% !important; padding: 0 0 0 0 !important; margin: 0 0 0 0 !important; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; }
#mydesk-callback.agoffline #callee { width: 100% !important; padding: 0 0 1px 0; margin: 0 0 2px 0 !important; max-width: 100% !important; }
#mydesk-callback.agoffline .btn-callback.actif { display: block; text-align: center; padding: 10px 0; }
#mydesk-callback.agoffline .form-callback { padding: 0 10px 0 10px !important; margin-bottom: 0 !important}
@keyframes opencallback {
	0% { bottom: 120px; opacity: 0; }
	100% { bottom: 90px; opacity: 1; }
}
#mydesk-callback.agoffline.wzclose.open { animation-name: opencallback; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; }
@keyframes opencallback2 {
	0% { bottom: calc(300 + 100px); opacity: 0; }
	100% { bottom: calc(300 + 85px); opacity: 1; }
}
#mydesk-callback.wzopen.open { animation-name: opencallback2; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; }
.callback_Right { min-height: 140px; max-height: 195px; }
#mydesk-callback.mydesk-callback.callback_Right:before { border-color: #fff; border-top-color: transparent; border-bottom-color: transparent; /* border-color: rgba(192,57,43,0.4);*/ }
li#system_changeAgent {
	position: relative;
	color:rgba(192,57,43, 1);
	float: left;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	margin: 9px 20px 8px 20px !important;
	padding: 4px 4px 6px 4px !important;
	max-width: 90%;
	min-width: 90%;
	display: flex;
	background-color:rgba(167,189,24, 1) ;
	min-height: 47px;
	list-style: none;
}
.formABSErreur{border-color:red !important;}

/*-----------------------------------------------*/
/*------ FORMULAIRE CALLBACK ---*/
/*-----------------------------------------------*/
.mydesk-callback .btn-callback.send {
	background: #E74C3C; /* Old browsers */
	color: #ffffff;
}
.mydesk-callback .btn-callback.send:hover {
	background: #C0392B; /* Old browsers */
	color: #ffffff;
}
#mydesk-callback  .form-callback{padding: 0px 0px 0px 10px; display:block;margin-bottom: 0 !important}
#mydesk-callback .submit-callback, #mydesk-callback .tel-callback {margin:0px 0px 10px 0px;}
#mydesk-callback .form-control, #mydesk-callback .select2-search input[type=text] {
	height: 28px;
	width: 60%;
	padding: 0px 0px 0px 8px;
	margin: 0px 8px 0px 0px;
	/*font-size: 1.0em;*/
	color: #34495e;
	border: 1px solid #bdc3c7;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	box-shadow: none;
	-webkit-transition: border .25s linear,color .25s linear,background-color .25s linear;
	transition: border .25s linear,color .25s linear,background-color .25s linear;
}
#mydesk-callback .btn-callback {
	padding: 4px 10px 4px 10px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	cursor: pointer;
	border: 0px !important;
	font-weight: normal;
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}
#mydesk-callback .btn-callback.actif {
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}
#callback_invit{max-width:250px;}
#mydesk-callback .actif {
	display: block;
}
#mydesk-callback .inactif {
	display: none;
}
#mydesk-callback .callback_ok {
	color:#ffffff;
}
#mydesk-callback .callback_error {
	color:#f02020;
}
/*-----------------------------------		*/
/*--- 			   PUSH						*/
/*-----------------------------------		*/
#mydesk-push.position_bottom_left{right: inherit ; left:10px ;}
#mydesk-push.position_bottom_middle{right: inherit ; left:calc(50% - 150px);  left:moz-calc(50% - 150px);}
#mydesk-push.position_bottom_right{right:10px ;}


div#pushclose {
	width: 28px;
	background-color:#C0392B;
	height: 28px;
	border-radius: 50%;
	padding: 5px;
	position: absolute;
	right: 15px;
	top: 15px;
}
div#pushclose svg polygon{
	fill:#A7BD18;
}
div#pushclose:hover {
	background-color:#E74C3C;
}
div#pushclose:hover svg polygon{
	fill:#A7BD18;
}
#push_layer{
	display:none;
	position:fixed;
	-webkit-backface-visibility: hidden;
	cursor:pointer;
	width:100%;
	height:100%;
	z-index:99999;
	top:0;
	left:0;
	background:rgba(0,10,5,0.7);
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
#push_layer.overlay_open{
	display:block;
}
#push_layer.overlay_close{
	display:none;
}
#push_centered{
	display:none;
	position:fixed;
	-webkit-backface-visibility: hidden;
	cursor:pointer;
	width:100%;
	height:100%;
	z-index:99999;
	top:0;
	left:0;
	background:rgba(0,10,5,0.7);
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
#push_centered.overlay_open{
	display:block;
}
#push_centered.overlay_close{
	display:none;
}
#push_centered.open{
	display:block;
}
#push_centered .push_active{
	z-index:99999;
	padding:0;
	text-align:center;
	background:none;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	cursor:auto;
   -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
   -webkit-text-stroke: rgba(255,255,255,0.01) 0.1px;
   -webkit-text-stroke-width: 0.1px;
}

#pushRedImg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-width: 100%;
	max-height: 100%;
	padding: 20px;
}
div#WatchBox-BTsettings {
	z-index: 2;
	background-color:  rgba(192,57,43,1);
	position: absolute;
	top: 21px;
	border: 1px  rgba(192,57,43,1) solid;
	border-radius: 50%;
	width: 15px;
	height: 15px;
	left: 4px;
	cursor: pointer;
	transition: transform 0.8s cubic-bezier(0, 0, 0.2, 1) 0s;
}
div#WatchBox-BTsettings svg{
	width: 100%;
	height: 100%;
	margin-bottom: 4px;
}
div#WatchBox-BTsettings polygon{
	fill:  rgba(167,189,24,1);
	transform: rotate(45deg);
	transform-origin:50%;
}
@keyframes settingOpening{
	0%{
		transform:  rotate(45deg)  ;
	}
	100%{
		transform:  rotate(0deg)  ;
	}
}
@keyframes settingClosing{
	0%{
		transform:  rotate(0deg)  ;
	}
	100%{
		transform:  rotate(45deg)  ;
	}
}
@keyframes settingOpeningPanel{
	0%{
		bottom: calc(var(--zoneMessageHeight) - 54px )  ;
		opacity: 0;
	}
	68%{
		opacity: 1;
	}
	70%{
		opacity: 1;
	}
	98%{
		z-index: 0;
		opacity: 1;
	}
	99%{
		z-index: 55;
		opacity: 1;
	}
	100%{
		bottom: var(--zoneMessageHeight)   ;
		z-index: 55;
		opacity: 1;
	}
}
@keyframes settingClosingPanel{
	0%{
		bottom: var(--zoneMessageHeight)  ;
	}
	1%{
		z-index: 0;
		opacity: 1;
	}
	70%{
		bottom: calc(var(--zoneMessageHeight) - 54px ) ;
		opacity: 0;
	}
	100%{
		bottom: calc(var(--zoneMessageHeight) - 76px ) ;
		z-index: 0;
		opacity: 0;
	}
}
div#WatchBox-options {
	z-index: 10;
	overflow: hidden;
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	height: 53px;
	background-color:  rgba(192,57,43,1);
	transition: bottom 0.5s cubic-bezier(0, 0, 0.2, 1) 0s;
	border-bottom-right-radius:var(--arrondi-widget-bd);
	border-bottom-left-radius:var(--arrondi-widget-bg);
}

div#WatchBox-options svg {
	width: 31px;
	height: 31px;
	margin: 5px;
}
div#WatchBox-options div {
	width: 32px; /* 35px le 20-02-2020*/
	height: 32px; /* 35px le 20-02-2020*/
	border-radius: 50%;
	margin: 10px calc(((var(--main-width)/5) - 60px)/2) 0;
	display: -webkit-inline-box;
	background-color:  rgba(231,76,60,1) !important;
	cursor: pointer;
}
div#WatchBox-options path.tronbone {
	transform: rotate(45deg) scale(0.7) translate(5px, -13px);
}
div#WatchBox-options path,
div#WatchBox-options circle{
	fill:  rgba(167,189,24,1);
}
div#WatchBox-options div:hover path,
div#WatchBox-options div:hover circle{
	fill:  rgba(231,76,60,1);
}
div#WatchBox-options div:hover{
	background-color:  rgba(167,189,24,1) !important;
}
span.tfoptionname {
	color: rgba(167,189,24,1);
	display: flex;
	position: absolute;
	top: 48px;
	width: 75px;
	text-align: center !important;
	justify-content: center;
	margin-left: -20px;
}
@media only screen and (max-height: 300px ){
	#mydesk.open, #mydesk.tf_open{
		height:calc(100% - 91px) !important;
	}
	#mydesk[class*='Right'].open, #mydesk[class*='Right'].tf_open, #mydesk[class*='Left'].open, #mydesk[class*='Left'].tf_open{
		top: initial;
		bottom: 0%;
	}
}
@media only screen and (max-width: 300px ){
	#mydesk.open, #mydesk.tf_open{
		width:100% !important;
	}
}
.txtChat iframe{
	width:100% !important;
	height: auto !important;
}

/*-----------------------------------		*/
/*--- 		Version Mobile 	 ---			*/
/*-----------------------------------		*/
@media only screen and (max-device-width: 450px){
	#mydesk {
		width: 100%;
		height: 100%;
		bottom:0px;
		right: 0px;
	}
	#emojiicon, #TargetBox-pref, #WatchBox-reset, #TargetBox-moveWidget{
		display: none !important;
		visibility: hidden;
	}
	div#TargetBox-close, div#TargetBox-reduce{
		width:38px;
		height: 38px;
	}		
	div#TargetBox-reduce{
		right: 50px;
	}	
	#WatchBox-chatSend #bt_envoi polygon{
		transform: translate(4px, 2px);
	}

	div#WatchBox-chatSend {
		position: initial;
		padding-top: initial;
		padding-left: initial;
	}
	div#WatchBox-micro {
		position: initial;
		display: none;
	}

	div#WatchBox-MessageWrapper{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 8px;
		justify-content: space-between;
	}
	div#WatchBox-BTsettings {
		background-color: rgba(35, 183, 249, 1);
		border: 1px rgba(35, 183, 249, 1) solid;
		border-radius: 50%;
		width: 26px;
		min-width: 26px;
		height: 26px;
		margin-right: 8px;
		/* left: 4px; */
		/* top: initial; */
		cursor: pointer;
		transition: transform 0.8s cubic-bezier(0, 0, 0.2, 1) 0s;
		/* position: initial; */
		/* display: block; */
		position: initial;
	}
	textarea#WatchBox-message{
		padding-right: 4px;
		min-height: initial;
		padding-top: initial;
	}
	div#MessageWrapper_contextAI {
		position: initial;
		margin-right: 8px;
	}
	#MessageWrapper_contextAI .illustrationContext {
		width: 38px !important;
		height: 38px !important;
		border-radius: 50% !important;
	}

	
	#mydesk dt#mydesk_title{
		font-weight: 600;
	}
	#mydesk[class*='Middle'].desactive.rdState, #mydesk[class*='middle'].desactive.rdState{
		bottom: 8px;
		top: initial;
		left: calc(50% - 25px);
		right: calc(50% - 25px);
	}
	#mydesk[class*='Left'].desactive.rdState{
		bottom: 20% ;
		top: initial ;
		left: 8px ;
		right: inherit ;
	}
	#mydesk[class*='bottom_left'].desactive.rdState{
		bottom: 8px ;
		top: initial ;
		left: 8px ;
		right: inherit ;
	}
	#mydesk[class*='Right'].desactive.rdState{
		bottom: 20% ;
		top: initial ;
		left: inherit ;
		right: 8px ;
	}
	#mydesk[class*='bottom_right'].desactive.rdState{
		bottom: 8px;
		top: initial ;
		left: inherit ;
		right: 8px ;
	}

	#mydesk[class*='middle'].desactive.rdState svg#bulle, #mydesk[class*='Middle'].desactive.rdState.fbmess svg#icomessenger,{
	margin: 10px 15px !important;
	}
	@keyframes Right_scalebt{
		0% {
			transform:  scale(0);
		}
		90% {
			transform:  scale(70px,70px);
		}
		100% {
			transform:  scale(50px,50px);
		}
	}
	@keyframes Right_fbmessin{
		0% {
			background-color:rgba(231,76,60,1);
			border-radius: 0px !important;
			border-top-right-radius: 100% !important;
		}
		100% {
			background-color: #0084ff;
			border-radius: 0px !important;
			border-top-right-radius: 100% !important;
		}
	}
	@keyframes Right_fbmessinOn{
		0% {
			background-color: #0084ff;
			border-radius: 0px !important;
			border-top-right-radius: 100% !important;
		}
		100% {
			background-color: rgba(231,76,60,1);
			border-radius: 0px !important;
			border-top-right-radius: 100% !important;
		}
	}
	@keyframes Right_mydeskfbmessin{
		0% {
			background-color: rgba(231,76,60,1);
			border-radius: 0px !important;
			border-top-right-radius: 100% !important;
		}
		100% {
			background-color: #0084ff;
			border-radius: 0px !important;
			border-top-right-radius: 100% !important;
		}
	}
	@keyframes Right_mydeskfbmessinOn{
		0% {
			background-color: #0084ff;
			border-radius: 0px !important;
			border-top-right-radius: 100% !important;
		}
		100% {
			background-color: rgba(231,76,60,1);
			border-radius: 0px !important;
			border-top-right-radius: 100% !important;
		}
	}
	#mydesk.desactive.ndState{
		width: 100% !important;
		margin:0;
		left : 0;
		right: 0;
		top: initial;
		background-color: rgb(167,189,24,1);
		border-radius:0;
	}
	#mydesk.desactive.ndState dt#mydesk_title{
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}

	#mydesk.desactive.desk_Bottom.position_bottom_left.rdState{
		left: 8px;
		bottom: 8px;
	}
	#mydesk.agonline.desactive.rdState.fbmess dt#mydesk_title{
		animation-name: Right_scalebt, Right_fbmessOn!important;
	}
	#mydesk.agonline.desactive.rdState.fbmess{
		animation: Right_mydeskfbmessinOn linear 1s both !important;
	}
	@keyframes radarHover{
		0% {	
			top: inherit;
			bottom: 0;
			height: 50px;
			width: 50px;
			background: rgba(231,76,60,1);
		}
		100% {	
			top: inherit;
			bottom: 0;
			height: 100px;
			width: 100px;
			background: rgba(231,76,60,0);
		}
	}

	div#iconcallback
	{	
		width: 47px;
		height: 47px;
		position: absolute;
		top: 4px;
		right: 53px;
		background-color:rgba(231,76,60,1);
		cursor: pointer;
	}  
	div#iconcallback:hover
	{
		top: 4px;
		right: 53px;
		position: absolute;
		border-radius: 0;
		background-color:rgba(192,57,43,1);
	}
	div#iconcallback svg path{
		fill:rgba(167,189,24,1);
	}
	div#iconcallback:hover svg path{
		fill:rgba(167,189,24,1);
	}
	
	#fake_bt-callback.pop {
		right: 0px !important;
		padding-right: 0px !important;
		border-bottom-left-radius: 5px !important;
		border-bottom-right-radius: 0 !important;
		border-top-left-radius: 5px !important;
		border-top-right-radius: 0 !important;
	}
	#mydesk.desactive.desk_Left.rdState #mydesk_ndstate_icon,
	#mydesk.tf_desactive.desk_Left.rdState #mydesk_ndstate_icon,
	#mydesk.desactive.position_bottom_left.rdState #mydesk_ndstate_icon,
	#mydesk.tf_desactive.position_bottom_left.rdState #mydesk_ndstate_icon {
		position: absolute;
		bottom: 0px;
	}
	#mydesk.open{
		width: 100%;
		height: 100%;
		margin: 0;
		left: 0;
		right: 0;
		top: 0;
		bottom:0;
	}	
	#mydesk-outer.ndState .titleOuterMydesk,
	#mydesk-outer.ndState.sideon .titleOuterMydesk,
	#mydesk.desactive.desk_Bottom.position_bottom_left.ndState .titleOuterMydesk,
	#mydesk.desactive.desk_Bottom.position_bottom_middle.ndState .titleOuterMydesk,
	#mydesk.desactive.desk_Bottom.position_bottom_right.ndState .titleOuterMydesk {
		text-align: right;
		margin-right: 50px;
		margin-top: 0;
		margin-left: calc(300px / 3);
		left:0;
		color: rgba(167,189,24,1);
	}
	#mydesk.open.position_bottom_middle, #mydesk.tf_open.position_bottom_middle{
		bottom:10px;
		left:0px;
	}
	#mydesk.desactive.desk_Left.ndState #mydesk_thirdstate_picture,
	#mydesk.desactive.desk_Right.ndState #mydesk_thirdstate_picture{
		display: block;
	}
	#mydesk.desactive.desk_Right.ndState{
		height: 82px !important;
		transform: none !important;
		bottom: 0;
	}
	#mydesk.desactive.desk_Left.ndState{
		height: 82px !important;
		transform: none !important;
		bottom: 0;
	}
	#mydesk.desactive.rdState.position_bottom_left dt#mydesk_title,
	#mydesk.desactive.rdState.desk_Left dt#mydesk_title,
	#mydesk.desactive.rdState.position_bottom_left.sideon dt#mydesk_title,
	#mydesk.desactive.rdState.desk_Left.sideon dt#mydesk_title{
		border-radius: 30% !important;
		background: #E74C3C;
	} 
	#mydesk.desactive.rdState.position_bottom_right dt#mydesk_title,	
	#mydesk.desactive.rdState.desk_Right dt#mydesk_title,
	#mydesk.desactive.rdState.position_bottom_right.sideon dt#mydesk_title{
		border-radius: 30% !important;
		background: #E74C3C;
	}
	#mydesk.desactive.desk_Right.rdState,
	#mydesk.desactive.desk_Left.rdState{
		border-radius: 30% !important;
	}
	#mydesk.desactive.rdState.desk_Right.sideon dt#mydesk_title,
	#mydesk.desactive.rdState.desk_Left.sideon dt#mydesk_title{
		border-radius: 30% !important;
		background: #E74C3C;
	}

	#mydesk[class*='position_bottom'].desactive.desk_Bottom.ndState #mydesk_thirdstate_text{
		text-align: left;
		left: 113px;
		right: 0;
	}
	#mydesk-push.push_Bottom.wzopen,
	#mydesk-callback.callback_Bottom.wzopen{
		top: 55px;
		right: 0;
		left: 0;
		bottom: auto;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}
	#mydesk-callback[class*="right"],#mydesk-callback[class*="left"],
	#mydesk-callback[class*="Right"],#mydesk-callback[class*="Left"] {
		right: 0;
		left: 0;
	}
	#mydesk-callback.agoffline #closeCallback{
		width: 30px;
		height: 30px;
	}
	#mydesk-callback{
		z-index: 100003;
		width: 100%;
		min-height: 80px;
		max-width: 100%;
		position: fixed;
	}
	#mydesk-callback.mydesk-callback.callback_Bottom.agoffline:after, #mydesk-callback.mydesk-callback.callback_BottomRight.agoffline:after, #mydesk-callback.mydesk-callback.callback_BottomLeft.agoffline:after{
		border:none !important;
	}
	.ViewerBotButton{
		overflow: auto !important;
	}

	.wzbot div#WatchBox-chatupload {
		display: none;
		visibility: hidden;
	}
	#mydesk[class*="right"] #contentListAgent.actif, #mydesk[class*="Right"] #contentListAgent.actif, 
	#mydesk[class*="left"] #contentListAgent.actif, #mydesk[class*="Left"] #contentListAgent.actif,
	#mydesk[class*="middle"] #contentListAgent.actif{
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
		transform: translateX(0);
		top: 56px;
		width: 100%;
		left: 0;
		bottom:0;
		right: 0;
		z-index: 100008;
	}
	#mydesk[class*="left"] #contentListAgent.inactif, #mydesk[class*="Left"] #contentListAgent.inactif,
	#mydesk[class*="right"] #contentListAgent.inactif, #mydesk[class*="Right"] #contentListAgent.inactif,
	#mydesk[class*="middle"] #contentListAgent.inactif {
		top: 56px;
		transform: translateX(300px);
	}
	#callback_layer{
		z-index: 100009 !important;
	}

	div#TargetBox-full, div#TargetBox-unfull {
		display:none;
	}
	/*--- pour la visioconf ---*/
	#tf_visioconfExterne {
		position: absolute;
		top: 8px;
		z-index: 1000;
		right: 8px;
	}
	#tf_visioconfExterne video {
		width: 140px;
	}
	#tf_iconeAgent{
		left: inherit;
		width: 150px
	}
	.textEscalade {
		width: 100%
	}
}
#mydesk.wzbot img#agent_hote {
		background: url(https://www.watcheezy.net/fo/img/hotesses/bot_bot.png) no-repeat;
		box-sizing: content-box;
		padding-top: 120px;
		background-size: contain;
}
/*--- pointer agent pour cobrowsing ---*/
#AdminPointer {
	transition: all .2s;
	z-index: 10002;
	width: 20px;
	height: 20px;
	border-radius: 0 50% 50% 50%;
	background-color: #5BC5F2;
	position: absolute;
}
#pointerNameAdmin {
	top: 1px;
	position: relative;
	background-color: rgba(245, 245, 245, 0.5);
	width: 120px;
	border-radius: 4px;
	color: #000;
}
/**** position du nom à droite par defaut ****/
#pointerNameAdmin.posRight {
  left: 24px;
  text-align: left;
  padding-left: 6px;
}
/**** position du nom à gauche ****/
#pointerNameAdmin.posLeft {
  right: 124px;
  text-align: right;
  padding-right: 6px;
}
#AdminPointer:before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #FFF;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
#AdminPointer:after {
	content: '';
	pointer-events: none;
}
.ClickPointer{
	opacity: 0;
	position: absolute;
	width: 1px;
	height: 1px;
	border-radius: 100px;
	border: 4px solid #5BC5F2;
	text-align: center;
	z-index: 10001;
}
.ClickPointer.click{
	animation:anim 0.8s;
	-webkit-animation:anim 0.8s;
}
@keyframes anim{
  50%{
	width: 50px;
	height: 50px;
	margin-top: -25px;
	margin-left: -25px;
	opacity: 0.8;
  }
  100%{
	opacity: 0;
  }
}
@-webkit-keyframes anim{
  50%{
	width: 50px;
	height: 50px;
	margin-top: -25px;
	margin-left: -25px;
	opacity: 0.8;
  }
  100%{
	opacity: 0;
  }
}

/*--------- cobrowsing --------*/
.inactifForCobrowsing{
  display:none;
}
@media screen and ( min-width: 1024px ){
  #CobrowsingActif.Actif {
	width: 60%;
  }
  .tf_titleCobrowsing {
	width: 50%;
	min-width: 350px;
  }
  .tf_btn_Cobrowsing{
	width: 100px;
  }
}
@media screen and ( min-width: 640px ) and ( max-width: 1024px ){
  #CobrowsingActif.Actif {
	width: 80%;
  }
  .tf_titleCobrowsing {
	width: 50%;
	min-width: 300px;
  }
  .tf_btn_Cobrowsing{
	width: 100px;
  }
}
@media screen and ( min-width: 320px ) and ( max-width: 640px ){
  #CobrowsingActif.Actif {
	width: 98%;
  }
  .tf_titleCobrowsing {
	width: 40%;
	min-width: 150px;
  }
  .tf_btn_Cobrowsing{
	width: 90px;
  }
}
@media screen and ( max-width: 320px ){
  #CobrowsingActif.Actif {
	width: 316px;
  }
  .tf_titleCobrowsing {
	width: 130px;
	min-width: 120px;
  }
  .tf_btn_Cobrowsing{
	width: 80px;
  }
}
#CobrowsingActif{
	display: -webkit-inline-box;
	display: inline-flex;
	margin: 6px 0px 0px 6px;
	height: 60px !important;
	border-radius: 30px;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 1000000000;
	overflow: hidden;
	-webkit-box-shadow: 0px 3px 12px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 12px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 12px rgba(0,0,0,0.3);
	-webkit-transition: width 0.5s ease, opacity 0.5s ease, background-color 0.5s ease;
	-moz-transition: width 0.5s ease, opacity 0.5s ease, background-color 0.5s ease;
	-o-transition: width 0.5s ease, opacity 0.5s ease, background-color 0.5s ease;
	transition: width 0.5s ease, opacity 0.5s ease, background-color 0.5s ease;
}
#CobrowsingActif.Actif {
	background-color: #E74C3C;
}
#CobrowsingActif.Inactif {
	background-color: #C0392B;
	width: 60px;
}
/*--- icone cobrowsing Menu---*/
#tf_actionCobrowsing {
	width: 60px;
	height: 60px;
	position: absolute;
	z-index: 10;
	border-radius: 30px;
	cursor: pointer;
}
#tf_actionCobrowsing:hover {
	background-color: rgba(255, 255, 255, 0.1)
}
.tf_iconeCobrowsing{
	border: 1px solid;
	width: 50px;
	height: 40px;
	float: left;
	cursor: pointer;
}
.tf_tv_icon {
	color: #fff;
	position: absolute;
	width: 24px;
	height: 16px;
	border-radius: 2px;
	border: solid 1px currentColor;
}
.tf_tv_icon:before {
	content: '';
	position: absolute;
	left: 12px;
	bottom: -4px;
	width: 1px;
	height: 3px;
	background-color: currentColor;
}
.tf_tv_icon:after {
	content: '';
	position: absolute;
	left: 9px;
	bottom: -4px;
	width: 7px;
	height: 1px;
	background-color: currentColor;
}
.tf_tv1{
	margin-top: 18px;
	margin-left: 11px;
}
.tf_tv2{
	margin-top: 25px;
	margin-left: 24px;
	background-color: #fff;
}
/*--------------------------------*/
/*--- icone cobrowsing fenetre Demande---*/
#tf_iconeDemandeCobrowsing {
	width: 60px;
	height: 60px;
	position: relative;
	left: calc(50% - 30px);
	z-index: 10;
	border-radius: 30px;
	cursor: pointer;
	background-color: #E74C3C;
}
.tf_tv_iconDemande {
	color: #fff;
	position: absolute;
	width: 24px;
	height: 16px;
	border-radius: 2px;
	border: solid 1px currentColor;
}
.tf_tv_iconDemande:before {
	content: '';
	position: absolute;
	left: 12px;
	bottom: -4px;
	width: 1px;
	height: 3px;
	background-color: currentColor;
}
.tf_tv_iconDemande:after {
	content: '';
	position: absolute;
	left: 9px;
	bottom: -4px;
	width: 7px;
	height: 1px;
	background-color: currentColor;
}
.tf_tv01{
	margin-top: 18px !important;
	margin-left: 11px !important;
}
.tf_tv02{
	margin-top: 25px !important;
	margin-left: 24px !important;
	background-color: #fff;
}
/*--------------------------------*/
  
.tf_titleCobrowsing {
	float: left;
	text-align: center;
	color: #fff;
	margin-top: 20px;
	margin-left: 54px;
}
.tf_btn_Cobrowsing{
	float: left;
	height: 32px !important;
	display: block;
	text-align: center;
	margin-top: 15px;
	padding: 0px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	cursor: pointer;
	border: 0px !important;
	font-weight: normal;
	background-color:#fff;
	color: #C0392B;
}
#tf_btn_MenuCobrowsing {
	color: #fff;
	position: relative;
	right: 6px;
	margin-top: 20px;
	margin-right: 12px;
	width: 21px;
	height: 21px;
	cursor: pointer;
	opacity:0;
	transition: position 0.5s ease, opacity 3s ease;
}
#tf_btn_MenuCobrowsing.Actif {
	position: absolute;
	opacity:1;
}
#tf_btn_MenuCobrowsing:before {
	content: '';
	position: absolute;
	top: 10px;
	width: 21px;
	height: 1px;
	background-color: currentColor;
	-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
}
#tf_btn_MenuCobrowsing:after {
	content: '';
	position: absolute;
	top: 10px;
	width: 21px;
	height: 1px;
	background-color: currentColor;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
/*--------- FIN cobrowsing --------*/

/*---------------------------------------------*/
/*--- WATCHBOX "offline" ou "online" ---*/
/*---------------------------------------------*/
#mydesk.wb_online #watcheBox_offline{display:none;}
#mydesk.open.wb_offline #watcheBox_offline,
#mydesk.tf_open.wb_offline #watcheBox_offline{display:block;}
#mydesk.desactive.wb_offline #watcheBox_offline{display:none;}
#watcheBox_offline{
	display: flex;
	z-index: 100;  
	position: absolute; 
	top: 100px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255,255,255,0.9);
}
.content_watcheBox_offline{
	display: flex;
    width: 62%;
    height: 200px;
    margin: auto;
}
#watcheBoxContentOffline{
  display: block; 
  position:relative;
  top:84px;
}
#watcheBoxContentOffline .title_error{
  margin-bottom:10px;
}
#watcheBoxContentOffline .content_error{
  font-weight:400;
}
/*--- animation connexion ---*/
@-webkit-keyframes arc {
  0% { border-width: 20px;}
  25% { border-width: 3px;}
  50% {-webkit-transform: rotate(27deg); transform: rotate(27deg); border-width: 20px;}
  75% {border-width: 3px;}
  100% {border-width: 20px;}
}
@keyframes arc {
  0% {border-width: 20px;}
  25% {border-width: 3px;}
  50% {-webkit-transform: rotate(27deg); transform: rotate(27deg); border-width: 20px;}
  75% {border-width: 3px;}
  100% {border-width: 20px;}
}
.cube-2d {
  background-color: #000;
}
.arc {
  position: absolute;
  left: calc(50% - 150px);
  width: 300px;
  height: 70px;
  overflow: hidden;
}
.arc-cube {
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important; 
  box-sizing: border-box !important; 
  position: absolute;
  bottom: -60px;
  left: calc(50% - 60px);
  margin-left: 0px;
  width: 120px;
  height: 120px;
  border-style: solid;
  border-top-color: transparent;
  border-right-color: #E74C3C;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  -webkit-animation: arc 2s ease-in-out infinite;
		  animation: arc 2s ease-in-out infinite;
  -webkit-transform: rotate(-200deg);
	  -ms-transform: rotate(-200deg);
		  transform: rotate(-200deg);
}
.system_rgpd {
	padding: 15px;
}
.system_rgpd button{
	margin-left: 15px;
}
.centerButtons{
	text-align:center;
}


/****** start visioconf *****/
#tf_visioConfContent {
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 56px;
}
#apzExtension {
	width: 100%;
	height: 100%;
}


/*--- mode chat split ---*/
.apzVisioOn.middleState #WatchBox-conversation-body.expand,
.apzVisioOn.middleState #WatchBox-conversation-body.retract {
    height: 50%;
	transition: height .3s ease,visibility 0s step-end;
}
.apzVisioOn.middleState #WatchBox-conversation-body {
	transition: height .3s ease,visibility 0s step-end;
	overflow: hidden;
	top: inherit;
	height: 50%;
    -webkit-mask-image: unset;
	background-color: white;
}


/*--- mode chat transparent ---*/
.apzVisioOn #WatchBox-conversation-body.expand {
    height: 80%;
	transition: height .3s ease,visibility 0s step-end;
}
.apzVisioOn #WatchBox-conversation-body.retract {
    height: 30%;
	transition: height .3s ease,visibility 0s step-end;
}
.apzVisioOn #WatchBox-conversation-body {
	overflow: hidden;
    position: absolute;
    height: 100px;
    bottom: 56px;
	top: inherit;
    -webkit-mask-image: linear-gradient(0deg, #fff 20%, #ffffff 60%, rgba(0,0,0,.26) 84%, rgba(0,0,0,0) 96%);
}

/*-- masque les dates quand c'est retracté, c'est moche --*/
.apzVisioOn #WatchBox-conversation-body.expand .dates-messages {
	position: inherit;
	display: flex;
}
.apzVisioOn.middleState #WatchBox-conversation-body.expand .dates-messages {
	position: sticky;
}
.apzVisioOn #WatchBox-conversation {
    overflow: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -15px;
    overflow-x: hidden;
    overflow-y: auto;
	padding-right: 30px;
}
#tf_iframeVisioConf {
	border: 0px solid;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: black;
	position:	absolute;
}
#tf_iframeVisioConf #remote-container,
#tf_iframeVisioConf #local-container {
	width: 50%;
	right: 0px;
	position: absolute;
	height: 100%;
}
.middleState #tf_iframeVisioConf #remote-container {
	height: calc(50% - 45px);
}
#tf_iframeVisioConf #remote-container video {
	height: 100%;
    width: auto;
    transform: translateX(-50%);
}
.middleState #tf_iframeVisioConf #remote-container video {
	height: 100%;
    width: auto;
    transform: translateX(-50%);
}
.apzVisioOn .messageVisiteur:before {
	right: calc(0% - -27px);
}
.apzVisioOn #tf_WatchBox_Powered a {
	color: white;
}

#remote-container video {
	width:100%;
}
#local-container video.mini {
	border-radius: 4px;
	position:absolute;
	right:8px;
	top:8px;
	width:30%;
}
#local-container video.full {
	height: 100%;
    width: auto;
    transform: translateX(-50%);
}
#control-container button {
	padding: 0px 0px 0px 0px !important;
	border-top-width: 0px !important;
	border-bottom-width: 0px !important;
	border-left-width: 0px !important;
	border-right-width: 0px !important;
	height: 32px !important;
	width: 32px !important;
}
#control-container .apz-control.active {
	display:inline-block;
}
#control-container .apz-control.inactive {
	display:none;
}
#control-container {
	position:absolute;
	top:8px;
	margin-left: 8px;
	width: calc(100% - 76px);
	text-align: center;
}
#control-container .material-icons {
	color:white;
}
#control-container svg {
	padding-right: 3px !important;
	margin-top: 3px !important;
	padding-left: 3px !important;
}
#unmute-audio,
#unmute-video {
	margin-right: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color:#9e9e9e;
	float: right;
	opacity: 0.8;
}

#mute-audio,
#mute-video{
	margin-right: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color:#4caf50;
	float: right;
	opacity: 0.8;
}
#close-conf, #close-conf-externe{
	margin-right: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color:#f44336;
	opacity: 0.8;
}

#middle-conf{
	margin-right: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-block;
	float: left;
}
#middle-conf.inactif{
	background-color:#9e9e9e;
	opacity: 0.8;
}
#middle-conf.actif{
	background-color:#4caf50;
	opacity: 0.8;
}
/****** end visioconf *****/


/****** push produit *****/
@media screen and (min-width: 260px) and (max-width: 320px){
	#WatchBox-conversation .tf-carousel-products{
		width: 272px;
	}
}
@media screen and (min-width: 321px) and (max-width: 375px){
	#WatchBox-conversation .tf-carousel-products{
		width: 328px;
	}
}
@media screen and (min-width: 376px) and (max-width: 410px){
	#WatchBox-conversation .tf-carousel-products{
		width: 347px;
	}
}
@media screen and (min-width: 411px) and (max-width: 425px){
	#WatchBox-conversation .tf-carousel-products{
		width: 378px;
	}
}
@media screen and (min-width: 426px){
	#WatchBox-conversation .tf-carousel-products{
		width: calc(300px - 48px);
	}
}
.message-carousel.tf_inactif {
	display: none
}
.message-carousel {
	margin: 36px 20px 4px -6px !important;
}
#contentDesk .tf-carousel-products{
	max-width: 300px;
	display: flex;
    overflow-x: auto;
    overflow-y: hidden;
	padding: 6px;
	margin-bottom: 6px;
}
#contentDesk .pushProduct{
    width: 170px;
	min-width: 170px;
    margin-right: 16px;
	border-radius: 8px;
	height: 280px;
    margin-top: 20px;
	cursor: pointer;
}
#contentDesk .pushProduct.selected{
    width: 186px;
	min-width: 186px;
    margin-right: 16px;
	border-radius: 8px;
	height: 320px;
	margin-top: 0px;
}
/* ajout l'icone du bot */
#contentDesk .pushProduct.selected:before {
    content: "";
    display: block;
    background-image: var(--imageBot);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    margin: 64px 0px 0 0;
    z-index: 1;
    border: 4px solid #fff;
}
#contentDesk .pushProduct .v-image{
    opacity: 0.4;
}
#contentDesk .pushProduct.selected .v-image{
    opacity: 1;
}
#contentDesk .pushProduct .v-card__title{
    opacity: 0.4;
}
#contentDesk .pushProduct.selected .v-card__title{
    opacity: 1;
}

#contentDesk .theme--light.v-sheet {
    background-color: #fff;
    border-color: #fff;
    color: rgba(0,0,0,.87);
}
#contentDesk .v-sheet {
    display: flex;
    position: relative;
    transition: .3s cubic-bezier(.25,.8,.5,1);
    flex-direction: column;
    justify-content: space-between;
}
#contentDesk .v-card {
    text-decoration: none;
}
#contentDesk .elevation-8 {
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)!important;
}
#contentDesk .elevation-2 {
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%) !important;
}
#contentDesk .layout {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    min-width: 0;
}


#contentDesk .v-responsive {
    position: relative;
    overflow: hidden;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    display: -ms-flexbox;
    display: flex;
}
#contentDesk .v-image {
    z-index: 0;
	height: 100px;
}
#contentDesk .v-responsive__sizer {
    transition: padding-bottom .2s cubic-bezier(.25,.8,.5,1);
    -ms-flex: 0 0 0px;
    flex: 0 0 0px;
}
#contentDesk .v-image__image--cover {
	background-position: center;
    background-size: cover;
}
#contentDesk .v-image__image {
    background-repeat: no-repeat;
}
#contentDesk .v-image__image,
#contentDesk .v-image__placeholder{
    width: 100%;
    height: 100px;
    background-size: cover;
    margin: auto;
	border-radius: 8px 8px 0px 0px;
}
/* EXCEPTION KAUFAMAN */
.kaufman .v-image__image {
	border-radius: inherit!important;
}
.kaufman.pushProduct {
	border-radius: 0px!important;
	font-family: 'Roboto', sans-serif;
}
.kaufman.pushProduct {
	border-radius: 0px!important;
	font-family: 'Roboto', sans-serif;
}
.kaufman .title {
    margin-top: 12px !important;
	height: 17px !important;
	overflow: visible!important;
	display: inline-block!important;
}
.kaufman.selected .title {
    margin-top: 13px !important;
}
.kaufman .subtitle {

}
.kaufman .redBandeau {
    position: absolute;
    top: 100px;
    width: 100%;
    height: 20px;
    background-color: #AE404F;
	color: white;
    font-size: 13px;
    text-align: center;
    padding-top: 4px;
	opacity: 0.5;
}
.kaufman.selected .redBandeau {
	opacity: 1;
}
.kaufman .plusencore{
	display: none!important;
}
.kaufman.selected .plusencore{
	display: block!important;
}
.kaufman .tf_fav_push {
	fill-opacity: 0!important;
}
.kaufman.selected .tf_fav_push {
	fill-opacity: 1!important;
}
.kaufman.pushProduct.selected:before {
	display: none!important;
}
.kaufman .v-card__actions{
	justify-content: center!important;
	position: absolute;
    bottom: 0px;
	opacity: 0.5;
}
.kaufman.selected .v-card__actions{
	position: absolute;
    bottom: 0px;
	margin-left: 8px;
	opacity: 1;
}
#system_transfert{
	height: 50px;
	display: flex;
    justify-content: center;
    align-items: center;
}
/*
#system_transfert .btn-newContext{
	float: left;
	height: inherit!important;
	padding: 4px 16px!important;
}
*/
.message_System .happyunhappy{
	font-size: 16px!important;
}
#bot_like .kaufman .plusencore, #bot_like .kaufman .redBandeau, #bot_like .kaufman .price2, #bot_like .kaufman .nbpieces2
{
	display: none!important;
}
#bot_like .kaufman .title{
	margin-top: 0!important;
}
.kaufman .tf_fav_push:hover
{
	fill: #ababab;
}
.kaufman .court
{
	width: 47%!important;
}
/* FIN EXCEPTION KAUFAMAN */
#contentDesk .v-responsive__content {
    -ms-flex: 1 0 0px;
    flex: 1 0 0px;
}

#contentDesk .v-card__title--primary {
    padding-top: 24px;
}
#contentDesk .v-card__title {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 12px;
}

#contentDesk .font-weight-bold {
    font-weight: 700!important;
}

#contentDesk .mb-0 {
    margin-bottom: 0!important;
}
#contentDesk .title {
    font-weight: 500;
    letter-spacing: .02em!important;
	/*height: 42px;*/
    display: -webkit-box;
    /*-webkit-line-clamp: 2;*/
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#contentDesk .py-2 {
    padding-top: 0px!important;
    padding-bottom: 0px!important;
    margin-bottom: 20px;
}
/*
#contentDesk .lignes-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
	font-size: 12px;
}

#contentDesk .pushProduct.selected .lignes-3 {
    height: 101px;
    -webkit-line-clamp: 6;
}
#contentDesk .pushProduct .lignes-3 {
    height: 66px;
    -webkit-line-clamp: 4;
}
*/
#contentDesk .v-card__actions {
    display: flex;
    padding: 0px 2px 8px 2px;
    justify-content: flex-end;
    align-items: center;
}

#formBot .v-btn:not(.v-btn--outline).info,
#contentDesk .v-btn:not(.v-btn--outline).info,
#contentDesk .v-btn:not(.v-btn--outline).info, #contentDesk .v-btn:not(.v-btn--outline) {
    color: #fff;
}

#formBot .v-btn,
#contentDesk .v-btn:not(.v-btn--depressed):not(.v-btn--flat) {
    will-change: box-shadow;
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}
#formBot .theme--light.v-btn,
#contentDesk .theme--light.v-btn {
    color: #ffffff;
}
#contentDesk .v-card__actions .v-btn, .v-card__actions>* {
    border-radius: 6px;
}
#contentDesk [type=reset], #contentDesk [type=submit], #contentDesk button, #contentDesk html [type=button] {
    -webkit-appearance: button;
}
#formBot .info,
#formMeeting .info,
#formC2c .info,
#contentDesk .info,
#bot_results_products .info {
    background-color: rgba(231,76,60,1);
    border-color: rgba(231,76,60,1);
}
#contentDesk .v-btn--small {
    height: 28px;
    padding: 0 8px;
}
#formBot .v-btn,
#formMeeting .v-btn,
#formC2c .v-btn,
#contentDesk .v-btn {
    padding: 0 16px;
}
#formBot .v-btn,
#formMeeting .v-btn,
#formC2c .v-btn,
#contentDesk .v-btn,
.pushProduct .v-btn {
    -ms-flex-align: center;
    align-items: center;
    border-radius: 6px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 36px;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-weight: 500;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 6px 8px;
    min-width: 50px;
    outline: 0;
    text-transform: uppercase;
    text-decoration: none;
    transition: .3s cubic-bezier(.25,.8,.5,1),color 1ms;
    position: relative;
    vertical-align: middle;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
	border: 0px;
}
#formBot .v-btn__content,
#formMeeting .v-btn__content,
#formC2c .v-btn__content,
#contentDesk .v-btn__content {
    -ms-flex-align: center;
    align-items: center;
    border-radius: inherit;
    color: inherit;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    transition: .3s cubic-bezier(.25,.8,.5,1);
    white-space: nowrap;
    width: inherit;
}
.btn-callNumber{
	text-transform: none !important;
}
#contentDesk [role=button], #contentDesk [type=button], #contentDesk [type=reset], #contentDesk [type=submit], #contentDesk button {
    cursor: pointer;
}
#formBot button, #formMeeting button, #formC2c button, #contentDesk button, #contentDesk input, #contentDesk select, #contentDesk textarea, #tf_visioconfExterne button {
    border-style: none;
    color: inherit;
}
#formBot button, #formMeeting button, #formC2c button, #contentDesk button, #contentDesk select {
    text-transform: none;
}
#formBot button, #formMeeting button, #formC2c button, #contentDesk button {
    overflow: visible;
}
#formBot button, #formMeeting button, #formC2c button, #contentDesk button, #contentDesk input, #contentDesk optgroup, #contentDesk select, #contentDesk textarea {
    font: inherit;
}
#contentDesk .v-btn:not(.v-btn--disabled):not(.v-btn--floating):not(.v-btn--icon) .v-btn__content .v-icon {
    transition: none;
}
#contentDesk .v-btn--round {
	border-radius: 2px;
}
.v-btn.primary{
	background-color: rgba(231,76,60,1) !important;
    border-color: rgba(231,76,60,1) !important;
}

.v-btn.success {
    background-color: #4caf50 !important;
    border-color: #4caf50 !important;
}

.v-btn.error {
    background-color: #f44336 !important;
    border-color: #f44336 !important;
}


/*** liste detail ***/
.list_detail .v-image__image{
	background-position: center;
	background-size: cover;
	height: 50px!important;
    width: 100px!important;
    float: left;
    margin-right: 12px;
	border-radius: 6px 0 0 6px;
}
.list_detail .v-card__actions{
	display: none;
}



/**** end panneau latteral ****/


/****** end push produit *****/


/********* debut webrtc ********/
#mydesk.popup_screensharing {
	width: 100% !important;
}
#mydesk.popup_screensharing #communication,
#mydesk.popup_screensharing #contentListAgent  {
	display: none !important;
}

#local_video {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;}
#remote_video {width: 100%;}

.tf_invisible {display: none !important;}
.tf_visible {display: inline-flex !important;}
#watchScreen {
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
}
#watchScreen .contentScreensharing {
    display: table-cell;
    vertical-align: middle;
}
#descriptionScreensharing {
	z-index: 2;
	width: 80%;
	background-color:#f1f1f1;
	padding: 18px;
}
#local_video {z-index: 1; opacity: 0.4;}
#btnFrontStartScreenshring {z-index: 3;}
#btnFrontStopScreenshring {z-index: 4;}
#btnFrontCloseWindow {z-index: 5;}
/********* fin webrtc ********/


/********* test iframe mirror ********/
#tf_iframeMirror.tf_iframeMirrorActif {
	position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
	border: 0px solid #f00;
	display: block;
	z-index: 8999;
}
#tf_iframeMirror.tf_iframeMirrorInactif {
	display: none;
	z-index: 0;
}
.tf_noScroll {
	overflow: hidden;
}
#control-container-externe {
    position: absolute;
    margin: 4px;
	z-index: 10;
}
#close-conf-externe button svg {
	padding-top: 4px;
    padding-right: 4px;
}

/*------ loader visioconf -----*/
.visioVente-loader {
    width: 80px;
    height: 80px;
    position: absolute;
    margin: auto;
    z-index: 10;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
}

.visioVente-loader .dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  animation: 1.7s dotrotate cubic-bezier(0.775, 0.005, 0.310, 1.000) infinite;
}

.visioVente-loader .dot:nth-child(1) {
  animation-delay: 0.2s;
}

.visioVente-loader .dot:nth-child(2) {
  animation-delay: 0.35s;
}

.visioVente-loader .dot:nth-child(3) {
  animation-delay: 0.45s;
}

.visioVente-loader .dot:nth-child(4) {
  animation-delay: 0.55s;
}

.visioVente-loader .dot:after, .visioVente-loader .dot .first {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
  left: 50%;
  margin-left: -4px;
}

.visioVente-loader .dot .first {
  background-color: white;
  margin-top: -4px;
  animation: 1.7s dotscale cubic-bezier(0.775, 0.005, 0.310, 1.000) infinite;
  animation-delay: 0.2s;
}

@keyframes dotrotate { 
  from { transform: rotate(0deg); } 
  to { transform: rotate(360deg); }
}

@keyframes dotscale { 
  0%, 10% { width: 16px; height: 16px; margin-left: -8px;  margin-top: -4px; } 
  50% { width: 8px; height: 8px; margin-left: -4px; margin-top: 0; }
  90%, 100% { width: 16px; height: 16px;  margin-left: -8px;  margin-top: -4px; }
}

#msg_msg {
	width: 100%;
}


/*---------------------------------*/
/* RESULTATS DE RECHERCHE DU MODE PUSH PRODUIT */
/*---------------------------------*/
#bot_results_products {
	height: 100%;
}

/* mode liste de produit */
#bot_content_products.list_detail .pushProduct div[onclick]{
	width: 100%;
}
#bot_content_products.list_detail .pushProduct {
	height: 80px;
    margin-right: 10px;
    background-color: #fff;
    color: rgba(0,0,0,.87);
	box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%) !important;
	display: inline-flex;
    width: calc(100% - 20px);
}
#bot_content_products.list_detail .v-image__image--cover {
	height: 64px;
    width: 64px;
    background-size: cover;
	margin: 8px;
}
#bot_content_products.list_detail .v-image {
	overflow: hidden;
	float: left;
}
#bot_content_products.list_detail .v-card__title--primary {
    padding-top: 4px;
}
#bot_content_products.list_detail .v-btn {
    padding: 4px 16px;
}


/**** panneau latteral des resultats de recherche ****/

#bot_content_products.list_detail .v-responsive__sizer{
	padding-bottom: 0!important;
}
/*
#bot_content_products.list_detail .v-card__title{
	display: flex;
}
#bot_content_products.list_detail .v-card__title .title,
#bot_content_products.list_detail .v-card__title .lignes-3{
	text-overflow: ellipsis;
    width: calc(100% - 50px);
    overflow: hidden;
    white-space: nowrap;
}
*/

#bot_content_products.list_detail .py-2 {
    padding-top: 0px!important;
    padding-bottom: 0px!important;
}

#bot_content_products.list_detail .lignes-3 {
    height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    box-sizing: content-box !important;
    margin-bottom: 4px;
}
#bot_content_products.list_detail .title {
	letter-spacing: .02em!important;
    height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#bot_content_products.list_detail .v-card__actions {
	max-width: 100%;
}
#bot_content_products.list_detail .info {
    color: white;
    -ms-flex-align: center;
    border-radius: 2px;
	line-height: 1.2;
    -ms-flex: 0 0 auto;
    font-size: 12px;
    font-weight: 500;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 6px 8px;
    min-width: 88px;
    outline: 0;
    text-transform: uppercase;
    text-decoration: none;
    transition: .3s cubic-bezier(.25,.8,.5,1),color 1ms;
    position: relative;
    vertical-align: middle;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: initial;
	cursor: pointer;
	will-change: box-shadow;
	box-shadow:0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    top: calc(50% - 8px);
    transform: translateY(-50%);
}
.btnDisabled{
	opacity: 0.2;
	cursor: default!important;
}
.list_detail .pushProduct .lignes-3 {
	/*
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
	*/
}

#bot_results .contenu_result {
	width: calc(100% - 38px);
}

/*---------------------------------*/
/* RESULTATS DE RECHERCHE DU MODE PUSH PRODUIT */
/* mode grille de produit */
/*---------------------------------*/

#bot_content_products.list_package .pushProduct {
	width: 254px;
    max-width: 254px;
	height: 310px;
    margin-right: 10px;
	border-radius: 10px;
    background-color: #fff;
    border-color: #fff;
    color: rgba(0,0,0,.87);
	box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%) !important;
}
.list_package .v-image__image{
	background-position: center center;
    background-size: cover;
    height: 120px;
    width: 100%;
    background-repeat: no-repeat;
}
#bot_content_products.list_package .v-image__image--cover {
	height: 100px;
    width: 100%;
    background-size: cover;
    margin: auto;
}
#bot_content_products.list_package .v-card__title--primary {
    padding: 12px !important;
}
#bot_content_products.list_package .v-btn {
    padding: 0 16px;
}


/**** panneau latteral des resultats de recherche ****/

#bot_content_products.list_package .v-responsive__sizer{
	padding-bottom: 0!important;
}
#bot_content_products.list_package .py-2 {
    padding-top: 3px!important;
    padding-bottom: 0px!important;
}

#bot_content_products.list_package .lignes-3 {
    height: 62px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    box-sizing: content-box !important;
    margin-bottom: 12px;
}
#bot_content_products.list_package .title {
	letter-spacing: .02em!important;
    height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
	font-weight: 500;
}
.font-weight-bold{
	font-weight: 600;
}

#bot_content_products.list_package .v-image {
	overflow: hidden;
}

#bot_content_products.list_package .info {
    color: white;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 2px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 36px;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 500;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 6px 8px;
    min-width: 88px;
    outline: 0;
    text-transform: uppercase;
    text-decoration: none;
    transition: .3s cubic-bezier(.25,.8,.5,1),color 1ms;
    position: relative;
    vertical-align: middle;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: initial;
	cursor: pointer;
	will-change: box-shadow;
	box-shadow:0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}

#bot_content_products.list_package .v-card__actions {
	cursor: initial;
    text-align: center!important;
}

#bot_content_products.list_package .tf-carousel-products{
    margin-top: 20px;
}

#bot_content_products.list_package .v-responsive__sizer {
	padding-bottom: 0!important;
}

.list_detail .pushProduct{
    margin-bottom: 8px;
    border-radius: 8px;
	min-height: 50px;
	border: 1px solid #eee;
}
.list_detail .pushProduct.selected,
.list_package .pushProduct.selected {
	background-color: rgba(192,57,43,0.1);
}
#bot_content.list_detail .fixed
{
	opacity: 1;
    min-height: 50px;
    height: 50px;
    overflow: hidden;
	padding: 7px 7px 7px 8px;
	margin-bottom: 6px;
}
#bot_content.list_detail .inactive
{
	opacity: 0;
    min-height: 0px;
    height: 0px;
    overflow: hidden;
	padding: 0px;
	margin-bottom: 0px;
}

#bot_content.list_detail .pushProduct
{
	animation-name: affichePetitesAnnonces; 
	animation-duration: 1.5s; 
	animation-fill-mode: forwards; 
	animation-iteration-count: 1;
	overflow: hidden;
}
@keyframes affichePetitesAnnonces {
	0% { opacity: 0; min-height: 0px; height: 0px; padding: 0px; margin-bottom: 0px;}
	20% { opacity: 0.1; padding: 8px; margin-bottom: 6px;}
	100% { opacity: 1; min-height: 48px; height: 48px; padding: 8px; margin-bottom: 6px;}
}

#bot_content.list_package .inactive
{
	opacity: 0;
    min-height: 0px;
    height: 0px;
    overflow: hidden;
}

#bot_content.list_package .active
{
	animation-name: afficheGrandesAnnonces; 
	animation-name: afficheGrandesAnnonces; 
	animation-duration: 1.5s; 
	animation-fill-mode: forwards; 
	animation-iteration-count: 1;
	overflow: hidden;
}
@keyframes afficheGrandesAnnonces {
	0% { opacity: 0; min-height: 0px; height: 0px;}
	/*40% { opacity: 0.3; min-height: 10px; height: 10px;}*/
	100% { opacity: 1; min-height: 330px; height: 330x;}
}

#bot_content.list_package .lignes-3
{
    display: -webkit-box;
    /* max-width: 200px; */
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#bot_like.list_detail .pushProduct.selected:before,
#bot_content.list_detail .pushProduct.selected:before {
    content: "";
    display: block;
    background-image: var(--imageBot);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: relative;
    right: calc(100% - 110px);
    margin: 6px 0px 0 0;
    z-index: 2;
    border: 3px solid #fff;
    float: right;
}
#bot_like.list_package .pushProduct.selected:before,
#bot_content.list_package .pushProduct.selected:before {
    content: "";
    display: block;
    background-image: var(--imageBot);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    position: relative;
    right: 10px;
    margin: 86px 0px 0 0;
    z-index: 2;
    border: 4px solid #fff;
    float: right;
}
#formBot .contentFormBot, #formMeeting .contentFormBot, #formC2c .contentFormBot, #formC2c .contentFormBot{
    padding: 20px;
    box-shadow: 0px 3px 18px rgba(0,0,0,0.1);
    border-radius: 6px;
    background: #e3e3e3;
}
.imgOpenResults, .imgCloseResults{
	width: auto;
	height: auto;
}
/* PRISE DE RENDEZ VOUS DANS LE BOT GPT */
#bot_title {
	width: calc(100% - 28px);
    padding-left: 20px;
	color: rgb(231,76,60);
}
.rdvinputbot{
    padding: 10px;
    margin: 0 0 20px 0;
    max-width: 100%;
    width: calc(100% - 28px) !important;
}
.lamaison #wzmeet .rdvinputbot{
    padding: 9px; 
    margin: 0 0 13px 9px;
    width: calc(100% - 31px) !important;
	color:grey;
	border: none;
	border-radius: 3px;
}
#wzmeet #tf-form-control{
	width: calc(100% - 28px) !important;
}
.lamaison #wzmeet #tf-form-control{
    padding: 9px;
    margin: 0 0 13px 9px;
	border: none;
	border-radius: 3px;
}
.heurePicker{
	width:121px!important;
	display: inline-block;
	margin:0px auto 10px auto !important;
}
.lamaison #wzmeet .heurePicker{
	width: 25% !important;
	display: inline-block;
	margin:0px auto 10px 10px !important;
	color:grey;
	border: none;
	border-radius: 3px;
	padding: 9px;
}
.lamaison .btnRdv{
	margin: auto !important;
    color: white !important;
    cursor: pointer;
}
/* FIN PRISE DE RENDEZ VOUS */

/* FORMUALIRE SATISFACTION BOT*/
.tf_satisFormBot{
    font-size: 11px !important;
    font-weight: 900 !important;
}
/* FIN SATISFACTION */

/* EXCEPTION LAMAISONCONVERTIBLE */
.lamaison .v-image__image{
	display: block;
}
.lamaison .title{
	margin: unset;
}
/* FIN EXCEPTION LAMAISONCONVERTIBLE */

@media screen and (max-width: 414px){
	#formBot .contentFormBot, #formMeeting .contentFormBot, #formC2c .contentFormBot {
		margin: 0px 14px 14px 14px;
	}
}
@media screen and (min-width: 415px){
	#formBot .contentFormBot, #formMeeting .contentFormBot, #formC2c .contentFormBot {
		margin: 0px 14px 14px 14px;
	}
}
@media screen and (min-width: 750px){
	#formBot .contentFormBot, #formMeeting .contentFormBot, #formC2c .contentFormBot {
		margin: 0px 8%;
	}
}
@media screen and (min-width: 1024px){
	#formBot .contentFormBot, #formMeeting .contentFormBot, #formC2c .contentFormBot {
		margin: 0px 15%;
	}
}
#bot_content.list_detail .pushProduct .actionPush {
	position: relative;
}
#bot_content.list_detail .pushProduct .actionPush .v-image {
	position: absolute;
}
#bot_content.list_detail .pushProduct .actionPush .text-xs-left {
    width: calc(100% - 120px);
    left: 110px;
    position: relative;
}

/*---------------------------------*/
/* debug flatpicker, vu chez lamaisonconvertible */
/*---------------------------------*/
.flatpickr-calendar.open {
  z-index: 9999999999!important;
}

/*---------------------------------*/
/* mode déployé en plein écran
/*---------------------------------*/
.fullscreen.tf_open{
	width: 100%!important;
	height: 100%!important;
	right: 0px!important;
}
/***		EXTRA CSS	:0	****//* CSS WZBOT */

/* RECUPERED DE TARGETFIRST.COM */

  .btnSATIS:hover{
    background:#E74C3C !important;
    background-color :#E74C3C !important;
  }
  #mydesk .bot_results{
	height: 100%;
  }
  
  @media (min-width: 641px){
    	  #mydesk.desactive.agoffline.wzbot #icon-on{
		  display: block;
	  }
	  #mydesk.agoffline.wzbot #zoneMessage rect{
		  transform: translateY(0);
	  }
  }
    .btnbot{
    background:#A7BD18;
    color: #C0392B;
    border-radius:25px;
    padding:15px 45px!important;
    cursor:pointer;
  }
  .btnbot:hover{
  background:#C0392B;
  color:#fff;
  }
  #mydesk.agoffline.wzbot #agent, #mydesk.agoffline.wzbot #ombre, #mydesk.agoffline.wzbot #ombre1, #mydesk.agoffline.wzbot #ombre2, #mydesk.agoffline.wzbot #headcontent{
    display: block !important
  }
    .BotButton{
    box-shadow: none !important;
    border:0px;
  }
  span.botButton{
    background:#A7BD18 !important;
    color: #000000 !important;
    padding: 10px 6px 10px 6px !important;
    border: none !important;
  }
    #watchFormSATIS input[type="radio"]
  {
    opacity: 1 !important;
    -webkit-appearance: none;
    -webkit-opacity:1 !important;
       outline: none !important;
       background:url(../../../img/icones/icones_interface.svg) !important;
       background-repeat: no-repeat !important;
       min-width: 27px;
       min-height:27px;
       width: 27px;
       height:27px;
       border:1px dashed rgba(192,57,43,0);
       cursor:pointer;
       border-radius: 13px;
       display: -webkit-inline-box;
       transform: scale(1.6);
       transition: transform 300ms ease-in;
  }
  #watchFormSATIS input[type="radio"]:hover{
    transition: transform 300ms ease-out;
    transform: scale(1.8);
  /*border:1px dashed rgba(192,57,43,0.8);*/
  }
  #watchFormSATIS input[value="1"]
  {
      background-position: -374px -284px!important
  
  }
  #watchFormSATIS input[value="2"]
  {
      background-position: -348px -284px!important
  
  }
  #watchFormSATIS input[value="3"]
  {
   background-position: -322px -284px!important
  }
  
  #watchFormSATIS  input[type="radio"]:checked{
     background-position: -402px -284px!important
  }
  #watchFormSATIS li label{
    margin-top:5px;
    display: none;
  }
  #watchFormSATIS .listeSATIS{
    width:80%;
    max-height: 30px;
    min-height: 30px;
  }
  #watchFormSATIS .listeSATIS li{
    height: 30px;
  }
  #watchFormSATIS fieldset{
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    background-color: none;
    background: none;
    border:0px !important;
  }
  #watchFormSATIS .titreSATIS{
    font-size: 0.9em !important;
      padding: 12px 14px 12px 14px;
      margin: 0px 4px 0px 4px;
  
  }
  #watchFormSATIS .labelSATIS{
    font-size:0.8em;
  }
  .champsRequired {
	color: red;
    font-size: 0.9em;
    margin-left: 20px;
	margin-top: -20px;
  }
  #mydesk.mydesk-template  #watchFormSATIS  .btnSATIS{
    margin-top:10px;
  }
  /* BOT */
  /* Ajustement de la zone de saisie pour lorsque le bot est activé */
  #mydesk.tf_open.desk_Bottom.wzbot #WatchBox-MessageWrapper {
          bottom: 0px ;
  }
  #mydesk.agoffline.wzbot div#watcheezyFooter{
    bottom: 0px !important;
  }
  #mydesk.desk_Right #watcheezyFooter{
    /*bottom: 32px !important;*/
    bottom: 1px !important;
  }
  #mydesk.wzbot #emojiicon, #mydesk.wzbot #WatchBox-chatupload{
    display: none;
  }
  
  /* Nouveau look Bot */
  #mydesk.agoffline.wzbot.desk_Bottom.iconsOff #WatchBox-conversation {
      /*height: calc(300px - 124px) !important;*/
  }
  .btnbot {
      background: #5bc5f2;
      color: #114277;
      border-radius: 25px;
      padding: 19px 45px!important;
      cursor: pointer;
      white-space: nowrap;
      font-size: 12px;
  }
  /* FORMULAIRE */
.inputFormBot {
    width: calc(100% - 28px) !important;
    padding: 4px 8px 14px 8px;
    margin: 2px 2px 12px 8px;
    min-height: 20px !important;
    border-radius: 4px;
	border: 1px solid #ddd !important;
	background-color: rgb(255, 255, 255) !important;
}
.contentBtnFormBot {
    float: right;
    margin-right: 6px;
}
.btnFormBot {
    min-width: 60px;
    background-color: #E74C3C !important;
    /*border: 1px solid #E74C3C !important;*/
    color: #fff !important;
	padding: 8px 12px !important;
  margin-top: 8px !important;
  border: 0px solid !important;
  border-radius: 4px !important;
}	
.contentFormBot fieldset{
	border:none;
}

	
  /* card */
  .botCard {
      width: calc(100% - 16px);
      padding-left: 8px !important;
      padding-right: 8px !important;
  }
  .img_paysage, .img_portrait, .img_carre, .img_none {display: -webkit-inline-box;}
  .botCardHead {
      width: 100%;
      padding-bottom: 6px !important;
      margin-bottom: 6px !important;
      border-bottom: 1px solid #E74C3C;
  }
  .img_paysage2 .botCardHeadImg{
      width: 100%;
      height: 100%;
  }
  .img_paysage .botCardHeadImg, .img_portrait .botCardHeadImg, .img_carre .botCardHeadImg  {
      width: 38%;
      height: 40%;
  }
  .botCardHeadImg  {
      margin-right: 4px !important;
      margin-bottom: 6px !important;
  }
  .botCardHeadImg img {
      width: 100%;
      height: 100%;
  }
  .img_none .botCardHeadTitre, .img_paysage2 .botCardHeadTitre {
      min-width: 100%;
      max-width: 100%;
  }
  .botCardHeadTitre {
      min-width: 62%;
      max-width: 62%;
      display: -webkit-inline-box;
      margin-bottom: 6px !important;
      font-weight: bold;
      color: #555;
  }
  .img_none .botCardHeadType, .img_paysage2 .botCardHeadType  {
      min-width: 100%;
      max-width: 100%;
  }
  .botCardHeadType {
      min-width: 62%;
      max-width: 62%;
      display: -webkit-inline-box;
      margin-bottom: 6px !important;
      font-style: italic;
  }
  .img_none .botCardHeadURL, .img_paysage2 .botCardHeadURL {
      min-width: 100%;
      max-width: 100%;
  }
  .botCardHeadURL {
      min-width: 62%;
      max-width: 62%;
      display: -webkit-inline-box;
      margin-bottom: 6px !important;
  }
  
  /* fin card */
  /* fin FORMULAIRE */ 
    .BotButton {
      float: left;
      position: relative;
      color: #C0392B;
      border-radius: 0px; 
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      background: #FFF !important;
      margin: 0px 30px 0px 56px !important;
      border-bottom: 1px solid rgba(25, 96, 172, 0.2) !important;
      padding: 4px 4px 6px 4px !important;
      max-width: 70%;
      min-width: 70%;
      display: inline-block;
  
  }
    .BotButton{
      background-color: #FFF !important
  }
  .BotButton:hover{
      background-color:#fcfcfc;
  }

  
	#mydesk.position_bottom_left .bot_results,
	#mydesk.desk_L0eft .bot_results{
		left:0px;
	}
	#mydesk.position_bottom_right .bot_results,
	#mydesk.desk_Right .bot_results,
	#mydesk.position_bottom_middle .bot_results{
		right:0px;
	}
	.bot_results{
		z-index: -1;
		top: 0px;
		width:0px;
		overflow: hidden;
	}
	#numResult {
		position: absolute;
		top: 0px;
		width: calc(100% - 140px);
		left:70px;
		font-size: 0.7em;
		line-height: 51px;
		z-index: 1;
	}
	#numResult .numResultText {
		text-align:center;
	}
	.sort_type_icone{
			float: right;
			border-radius: 20px;
			width: 20px;
			height: 30px;
			line-height: 32px;
			text-align: center;
	}
	/* ------------------------------------------------------ */
	/*ONGLET RESULTAT CHAT BOT WIDGET POSITION LEFT*/
	/* pour tous devices */

	@media screen and (max-width: 414px){
		.sort_type_icone{
			border: 1px solid #f1f1f1;
			background-color: #f5f5f5;
			margin-right: 8px;
			width: 30px;
			padding-left: 2px;
		}
		#numResult {
			font-size: 0.8em;
		}
		.bot_results{
			z-index: 10 !important;
			height: calc(100% - 56px) ;
			border-radius: 11px 0px 0px 11px;
			top: 58px ;
		}
		.bot_results .imgCloseResults {
			border: 1px solid #f1f1f1;
			background-color: #f5f5f5;
			border-radius: 15px;
		}
		.list_package  {
			font-size: 0.8em;
		}
		#mydesk.desk_Left #tf_openArrow img,
		#mydesk.position_bottom_left #tf_openArrow img{
			transform: rotate(0deg);
			margin-left: 12px;
		}
		#mydesk.desk_Left #tf_openArrow,
		#mydesk.position_bottom_left #tf_openArrow{
			top: 56px;
			z-index: 1;
			left: -100px;
		}
		#mydesk.desk_Left #closeArrow img,
		#mydesk.position_bottom_left  #closeArrow img{
			transform: rotate(180deg);
			float: left;
		}
		#mydesk.desk_Left #result_listing_display,
		#mydesk.position_bottom_left  #result_listing_display{
			right: 0px;
		}
		@keyframes openresultsdrawer_left {
			0% { left: 0vw; opacity: 1; width:100vw; }
			40% { left: 0vw; opacity: 1; width:100vw; }
			100% { left: 0px; width:100vw; opacity: 1; }
		}
		@keyframes closeresultsdrawer_left {
			0% { left: 0px; width: 100vw; opacity: 1;}
			99% { left:0vw; opacity: 1; width: 100vw; box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ left: 0vw; opacity: 0; width: 100vw;}
		}
	}
	
	@media screen and (min-width: 415px){
		.sort_type_icone{
			width: 20px
		}
		#numResult {
			font-size: 0.7em;
		}
		.list_package  {
			font-size: 0.8em;
		}
		#mydesk.desk_Left #tf_openArrow img,
		#mydesk.position_bottom_left #tf_openArrow img{
			transform: rotate(0deg);
			margin-left: 20px;
		}
		#mydesk.desk_Left #tf_openArrow,
		#mydesk.position_bottom_left #tf_openArrow{
			top: 0px;
			z-index: -1;
			border-top-right-radius: 11px;
			border-bottom-right-radius: 11px;
		}
		#mydesk.desk_Left #closeArrow img,
		#mydesk.position_bottom_left  #closeArrow img{
			transform: rotate(0deg);
			float: right;
		}
		#mydesk.desk_Left #result_listing_display,
		#mydesk.position_bottom_left  #result_listing_display{
			left: 35px;
			padding: 0 8px 0 0;
		}
		@keyframes openresultsdrawer_left {
			0% { left: 0px; opacity: 1; width:300px; }
			40% { left: 0px; opacity: 1; width:300px; }
			100% { left: 285px; width:320px; opacity: 1;}
		}
		@keyframes closeresultsdrawer_left {
			0% { left: 285px; width:320px; opacity: 1; }
			99% { left:0px; opacity: 1;width:320px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ left:0px; opacity: 0;width:280px;}
		}
		@-webkit-keyframes openresultsdrawer_left {
			0% { left: 0px; opacity: 1; width:300px; }
			40% { left: 0px; opacity: 1; width:300px; }
			100% { left: 285px; width:320px; opacity: 1;}
		}
		@-webkit-keyframes closeresultsdrawer_left {
			0% { left: 285px; width:320px; opacity: 1; }
			99% { left:0px; opacity: 1;width:320px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ left:0px; opacity: 0;width:280px;}
		}
	}
	
	@media screen and (min-width: 750px){
		#numResult {
			font-size: 0.8em;
		}
		.list_package  {
			font-size: 0.9em;
		}
		#mydesk.desk_Left #tf_openArrow img,
		#mydesk.position_bottom_left #tf_openArrow img{
			transform: rotate(0deg);
			margin-left: 20px;
		}
		#mydesk.desk_Left #tf_openArrow,
		#mydesk.position_bottom_left #tf_openArrow{
			top: 0px;
			z-index: -1;
			border-top-right-radius: 11px;
			border-bottom-right-radius: 11px;
		}
		#mydesk.desk_Left #closeArrow img,
		#mydesk.position_bottom_left  #closeArrow img{
			transform: rotate(180deg);
			float: right;
		}
		#mydesk.desk_Left #result_listing_display,
		#mydesk.position_bottom_left  #result_listing_display{
			left: 35px;
		}
		@keyframes openresultsdrawer_left {
			0% { left:0px; opacity: 1; width:280px; }
			40% { left:0px; opacity: 1; width:300px;  }
			100% { left: 285px;width:360px; opacity: 1; }
		}
		@keyframes closeresultsdrawer_left {
			0% { left: 285px;width:360px; opacity: 1;}
			99% { left:0px; opacity: 1;width:300px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ left:0px; opacity: 0;width:280px;}
		}
		@-webkit-keyframes openresultsdrawer_left {
			0% { left:0px; opacity: 1; width:280px; }
			40% { left:0px; opacity: 1; width:300px;  }
			100% { left: 285px;width:360px; opacity: 1; }
		}
		@-webkit-keyframes closeresultsdrawer_left {
			0% { left: 285px;width:360px; opacity: 1;}
			99% { left:0px; opacity: 1;width:300px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ left:0px; opacity: 0;width:280px;}
		}
	}
	
	@media screen and (min-width: 1024px){
		#numResult {
			font-size: 0.8em;
		}
		.list_package {
			font-size: 1em;
		}
		#mydesk.desk_Left #tf_openArrow img,
		#mydesk.position_bottom_left #tf_openArrow img{
			transform: rotate(0deg);
			margin-left: 20px;
		}
		#mydesk.desk_Left #tf_openArrow,
		#mydesk.position_bottom_left #tf_openArrow{
			top: 0px;
			z-index: -1;
			border-top-right-radius: 11px;
			border-bottom-right-radius: 11px;
		}
		#mydesk.desk_Left #closeArrow img,
		#mydesk.position_bottom_left  #closeArrow img{
			transform: rotate(180deg);
			float: right;
		}
		#mydesk.desk_Left #result_listing_display,
		#mydesk.position_bottom_left  #result_listing_display{
			left: 35px;
		}
		@keyframes openresultsdrawer_left {
			0% { left:0px; opacity: 1; width:280px;}
			40% { left:0px; opacity: 1; width:300px; }
			100% { left: 285px;width:450px; opacity: 1; }
		}
		@keyframes closeresultsdrawer_left {
			0% { left: 285px;width:450px; opacity: 1; }
			99% { left:0px; opacity: 1;width:280px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ left:0px; opacity: 0;width:280px;}
		}
		@-webkit-keyframes openresultsdrawer_left {
			0% { left:0px; opacity: 1; width:280px;}
			40% { left:0px; opacity: 1; width:300px; }
			100% { left: 285px;width:450px; opacity: 1; }
		}
		@-webkit-keyframes closeresultsdrawer_left {
			0% { left: 285px;width:450px; opacity: 1; }
			99% { left:0px; opacity: 1;width:280px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ left:0px; opacity: 0;width:280px;}
		}
	}
   
	#mydesk.position_bottom_left .bot_results.tf_open-left,
	#mydesk.desk_Left .bot_results.tf_open-left,
	#mydesk.position_bottom_left .bot_results.tf_open-100-left,
	#mydesk.desk_Left .bot_results.tf_open-100-left {
		animation-name: openresultsdrawer_left; 
		animation-duration: 1.5s; 
		animation-fill-mode: forwards; 
		animation-iteration-count: 1;
    }
	#mydesk.position_bottom_left .bot_results.tf_close-left,
	#mydesk.desk_Left .bot_results.tf_close-left,
	#mydesk.position_bottom_left .bot_results.tf_close-100-left,
	#mydesk.desk_Left .bot_results.tf_close-100-left {
        animation-name: closeresultsdrawer_left; 
        animation-duration: 1.5s; 
        animation-fill-mode: forwards; 
        animation-iteration-count: 1;
	}
	
	#mydesk.position_bottom_left .sort_type_icone,
	#mydesk.desk_Left .sort_type_icone{
		float: left;
	}

	/*--- bouton ouverture liste ---*/
	@media screen and (max-width: 414px){
		@keyframes showBtnOpenResult_Left {
			0% { left:-100px; opacity: 1; display: none;  box-shadow: 0px 3px 18px rgba(0,0,0,0);}
			50% { left:-100px; opacity: 1; display: block; }
			100% { left: 0; opacity: 1; display: block; }
		}
		@keyframes hideBtnOpenResult_Left {
			0% { left: 0; opacity: 1; display: block; }
			100%{ left:-100px; opacity: 1; display: none; box-shadow: 0px 3px 18px rgba(0,0,0,0);}
		}
	}
	@media screen and (min-width: 415px){
		@keyframes showBtnOpenResult_Left {
			0% { left:220px; opacity: 1; display: none;  box-shadow: 0px 3px 18px rgba(0,0,0,0);}
			50% { left:220px; opacity: 1; display: block; }
			100% { left: 290px; opacity: 1; display: block; }
		}
		@keyframes hideBtnOpenResult_Left {
			0% { left: 290px; opacity: 1; display: block; }
			100%{ left:220px; opacity: 1; display: none; box-shadow: 0px 3px 18px rgba(0,0,0,0);}
		}
		@-webkit-keyframes showBtnOpenResult_Left {
			0% { left:220px; opacity: 1; display: none;  box-shadow: 0px 3px 18px rgba(0,0,0,0);}
			50% { left:220px; opacity: 1; display: block; }
			100% { left: 290px; opacity: 1; display: block; }
		}
		@-webkit-keyframes hideBtnOpenResult_Left {
			0% { left: 290px; opacity: 1; display: block; }
			100%{ left:220px; opacity: 1; display: none; box-shadow: 0px 3px 18px rgba(0,0,0,0);}
		}
	}

	#mydesk.position_bottom_left .tf_openArrow_open,
	#mydesk.desk_Left .tf_openArrow_open{
		animation-name: showBtnOpenResult_Left; 
		animation-duration: 2.8s; 
		animation-fill-mode: forwards; 
		animation-iteration-count: 1;
    }
	#mydesk.position_bottom_left .tf_openArrow_close,
	#mydesk.desk_Left .tf_openArrow_close{
        animation-name: hideBtnOpenResult_Left; 
        animation-duration: 1s; 
        animation-fill-mode: forwards; 
        animation-iteration-count: 1;
	}
	
	#mydesk.desk_Left #tf_openArrow img,
	#mydesk.position_bottom_left #tf_openArrow img{
		margin-top: 12px;
	}
	#mydesk.desk_Left #tf_openArrow,
	#mydesk.position_bottom_left #tf_openArrow{
        width: 58px;
		background: #FFF;
		position: absolute;
		height: 56px;
		cursor:pointer;
		box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important;
    }
	#mydesk.tf_desactive.desk_Left .bot_results,
	#mydesk.tf_desactive.position_bottom_left .bot_results{top:1000px;} /*--- pour masquer la liste de resultats ---*/
	#mydesk.tf_desactive.desk_Left #tf_openArrow,
	#mydesk.tf_desactive.position_bottom_left  #tf_openArrow{top:1000px;} /*--- pour masquer le bouton qui ouvre la liste de resultats ---*/
	
	/* ------------------------------------------------------ */
	/*---- position central ----*/
	@media screen and (max-width: 414px){
		@keyframes openresultsdrawerMiddle {
			0% { right: -100vw; opacity: 1; width:100vw; }
			40% { right: -100vw; opacity: 1; width:100vw; }
			100% { right: 0px; width:100vw; opacity: 1; }
		}
		@keyframes closeresultsdrawerMiddle {
			0% { right: 0px; width: 100vw; opacity: 1;}
			99% { right:-100vw; opacity: 1; width: 100vw; box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ right: -100vw; opacity: 0; width: 100vw;}
		}

		@-webkit-keyframes openresultsdrawerMiddle {
			0% { right: -100vw; opacity: 1; width:100vw; }
			40% { right: -100vw; opacity: 1; width:100vw; }
			100% { right: 0px; width:100vw; opacity: 1; }
		}
		@-webkit-keyframes closeresultsdrawerMiddle {
			0% { right: 0px; width: 100vw; opacity: 1;}
			99% { right:-100vw; opacity: 1; width: 100vw; box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ right: -100vw; opacity: 0; width: 100vw;}
		}
		
		@keyframes openresultsdrawerMiddle100 {
			0% { right: -100vw; opacity: 1; width:100vw; }
			40% { right: -100vw; opacity: 1; width:100vw; }
			100% { right: 0px; width:100vw; opacity: 1; }
		}
		@keyframes closeresultsdrawerMiddle100 {
			0% { right: 0px; width: 100vw; opacity: 1;}
			99% { right:-100vw; opacity: 1; width: 100vw; box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ right: -100vw; opacity: 0; width: 100vw;}
		}
		@-webkit-keyframes openresultsdrawerMiddle100 {
			0% { right: -100vw; opacity: 1; width:100vw; }
			40% { right: -100vw; opacity: 1; width:100vw; }
			100% { right: 0px; width:100vw; opacity: 1; }
		}
		@-webkit-keyframes closeresultsdrawerMiddle100 {
			0% { right: 0px; width: 100vw; opacity: 1;}
			99% { right:-100vw; opacity: 1; width: 100vw; box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ right: -100vw; opacity: 0; width: 100vw;}
		}
	}
	@media screen and (min-width: 415px){
		#mydesk.position_bottom_middle .list_package{
			/*font-size: 0.6em;*/
		}
		#mydesk.position_bottom_middle .list_detail  {
			/*font-size: 0.8em;*/
		}
		.list_detail .result_img {
			width: 60px !important;
		}
		@keyframes openresultsdrawerMiddle {
			0% { right: 0px; opacity: 0; width:20px; }
			40% { right: 20px; opacity: 1; width:250px; }
			100% { right: 285px; width:280px; opacity: 1;}
		}
		@keyframes closeresultsdrawerMiddle {
			0% { right: 285px; width:280px; opacity: 1; }
			60%{ right:30px; opacity: 1;width:200px;}
			99% { right:10px; opacity: 1;width:50px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ right:0px; opacity: 0;width:20px;}
		}
		@-webkit-keyframes openresultsdrawerMiddle {
			0% { right: 0px; opacity: 0; width:20px; }
			40% { right: 20px; opacity: 1; width:250px; }
			100% { right: 285px; width:280px; opacity: 1;}
		}
		@-webkit-keyframes closeresultsdrawerMiddle {
			0% { right: 285px; width:280px; opacity: 1; }
			60%{ right:30px; opacity: 1;width:200px;}
			99% { right:10px; opacity: 1;width:50px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ right:0px; opacity: 0;width:20px;}
		}
	}
	@media screen and (min-width: 1024px){
		
		#mydesk.position_bottom_middle .list_package{
			/*font-size: 0.7em;*/
		}
		#mydesk.position_bottom_middle .list_detail  {
			/*font-size: 0.9em;*/
		}
		.list_detail .result_img {
			width: 120px !important;
		}
		@keyframes openresultsdrawerMiddle {
			0% { right: 0px; opacity: 0; width:20px; }
			40% { right: 20px; opacity: 1; width:250px; }
			100% { right: 285px; width:320px; opacity: 1;}
		}
		@keyframes closeresultsdrawerMiddle {
			0% { right: 285px; width:320px; opacity: 1; }
			60%{ right:30px; opacity: 1;width:200px;}
			99% { right:10px; opacity: 1;width:50px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ right:0px; opacity: 0;width:20px;}
		}
		@-webkit-keyframes openresultsdrawerMiddle {
			0% { right: 0px; opacity: 0; width:20px; }
			40% { right: 20px; opacity: 1; width:250px; }
			100% { right: 285px; width:320px; opacity: 1;}
		}
		@-webkit-keyframes closeresultsdrawerMiddle {
			0% { right: 285px; width:320px; opacity: 1; }
			60%{ right:30px; opacity: 1;width:200px;}
			99% { right:10px; opacity: 1;width:50px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ right:0px; opacity: 0;width:20px;}
		}
	}
	
	#mydesk.position_bottom_middle .bot_results.tf_open-right{
		animation-name: openresultsdrawerMiddle; 
		animation-duration: 1.5s; 
		animation-fill-mode: forwards; 
		animation-iteration-count: 1;
    }
	#mydesk.position_bottom_middle .bot_results.tf_close-right{
        animation-name: closeresultsdrawerMiddle; 
        animation-duration: 1.5s; 
        animation-fill-mode: forwards; 
        animation-iteration-count: 1;
	}

	#mydesk.position_bottom_middle .bot_results.tf_open-100-right{
		animation-name: openresultsdrawerMiddle100; 
		animation-duration: 1.5s; 
		animation-fill-mode: forwards; 
		animation-iteration-count: 1;
    }
	#mydesk.position_bottom_middle .bot_results.tf_close-100-right{
        animation-name: closeresultsdrawerMiddle100; 
        animation-duration: 1.5s; 
        animation-fill-mode: forwards; 
        animation-iteration-count: 1;
	}
	
	
	/* ------------------------------------------------------ */
	/* --- ONGLET RESULTAT CHAT BOT WIDGET POSITION RIGHT --- */
	/* pour mobiles devices */
	@media screen and (max-width: 414px){
		#mydesk.position_bottom_right .list_package ,
		#mydesk.desk_Right .list_package  {
			font-size: 0.8em;
		}
		#mydesk.desk_Right #result_listing_display,
		#mydesk.position_bottom_right  #result_listing_display,
		#mydesk.position_bottom_middle  #result_listing_display{
			padding: 0 8px 0 0;
		}
		@keyframes openresultsdrawerRight {
			0% { right: -100vw; opacity: 1; width:100vw; }
			40% { right: -100vw; opacity: 1; width:100vw; }
			100% { right: 0px; width:100vw; opacity: 1; }
		}
		@keyframes closeresultsdrawerRight {
			0% { right: 0px; width: 100vw; opacity: 1;}
			99% { right:-100vw; opacity: 1; width: 100vw; box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ right: -100vw; opacity: 0; width: 100vw;}
		}
	}
	
	@media screen and (min-width: 415px){
		#mydesk.position_bottom_right .list_package ,
		#mydesk.desk_Right .list_package  {
			font-size: 0.8em;
		}
		#mydesk.desk_Right #result_listing_display,
		#mydesk.position_bottom_right  #result_listing_display,
		#mydesk.position_bottom_middle  #result_listing_display{
			padding: 0 28px 0 0;
		}
		@keyframes openresultsdrawerRight {
			0% { right: -0px; opacity: 1; width:250px; }
			40% { right: -0px; opacity: 1; width:250px; }
			100% { right: 300px; width:320px; opacity: 1;}
		}
		@keyframes closeresultsdrawerRight {
			0% { right: 300px; width:320px; opacity: 1; }
			99% { right:-0px; opacity: 1;width:320px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ right:-0px; opacity: 0;width:250px;}
		}
	}
	
	@media screen and (min-width: 750px){
		#mydesk.position_bottom_right .list_package ,
		#mydesk.desk_Right .list_package  {
			font-size: 0.9em;
		}
		#mydesk.desk_Right #result_listing_display,
		#mydesk.position_bottom_right  #result_listing_display,
		#mydesk.position_bottom_middle  #result_listing_display{
			padding: 0 28px 0 0;
		}
		@keyframes openresultsdrawerRight {
			0% { right:-0px; opacity: 1; width:300px; }
			40% { right:-0px; opacity: 1; width:300px;  }
			100% { right: 300px;width:360px; opacity: 1; }
		}
		@keyframes closeresultsdrawerRight {
			0% { right: 300px;width:360px; opacity: 1;}
			99% { right:-0px; opacity: 1;width:300px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ right:-0px; opacity: 0;width:250px;}
		}
	}
	
	@media screen and (min-width: 1024px){
		#mydesk.position_bottom_right .list_package ,
		#mydesk.desk_Right .list_package  {
			font-size: 1em;
		}
		#mydesk.desk_Right #result_listing_display,
		#mydesk.position_bottom_right  #result_listing_display,
		#mydesk.position_bottom_middle  #result_listing_display{
			padding: 0 28px 0 0;
		}
		@keyframes openresultsdrawerRight {
			0% { right:0px; opacity: 0; width:300px;}
			1% { right:0px; opacity: 1; width:300px;}
			100% { right: 300px;width:450px; opacity: 1; }
		}
		@keyframes closeresultsdrawerRight {
			0% { right: 300px;width:450px; opacity: 1; }
			99% { right:0px; opacity: 1;width:300px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ right:0px; opacity: 0;width:300px;}
		}
		@-webkit-keyframes openresultsdrawerRight {
			0% { right:0px; opacity: 0; width:300px;}
			1% { right:0px; opacity: 1; width:300px;}
			100% { right: 300px;width:450px; opacity: 1; }
		}
		@-webkit-keyframes closeresultsdrawerRight {
			0% { right: 300px;width:450px; opacity: 1; }
			99% { right:0px; opacity: 1;width:300px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
			100%{ right:0px; opacity: 0;width:300px;}
		}
	}
    
	#mydesk.position_bottom_right .bot_results.tf_open-right,
	#mydesk.desk_Right .bot_results.tf_open-right {
		-webkit-animation-name: openresultsdrawerRight;
		-moz-animation-name: openresultsdrawerRight;
		-ms-animation-name: openresultsdrawerRight;
        -o-animation-name: openresultsdrawerRight;
        animation-name: openresultsdrawerRight; 
		animation-duration: 1.5s; 
		animation-fill-mode: forwards; 
		animation-iteration-count: 1;
    }
    #mydesk.position_bottom_right .bot_results.tf_close-right,
	#mydesk.desk_Right .bot_results.tf_close-right {
		-webkit-animation-name: closeresultsdrawerRight;
		-moz-animation-name: closeresultsdrawerRight;
		-ms-animation-name: closeresultsdrawerRight;
        -o-animation-name: closeresultsdrawerRight;
        animation-name: closeresultsdrawerRight; 
        animation-duration: 1.5s; 
        animation-fill-mode: forwards; 
        animation-iteration-count: 1;
	}
	
	
	/*-------------------------------------------*/
	/*--- ouverture 100% de l'onglet resultat ---*/
	#mydesk.position_bottom_right .bot_results.tf_open-100-right,
	#mydesk.desk_Right .bot_results.tf_open-100-right {
		-webkit-animation-name: openresultsdrawerRight100;
		-moz-animation-name: openresultsdrawerRight100;
		-ms-animation-name: openresultsdrawerRight100;
        -o-animation-name: openresultsdrawerRight100;
        animation-name: openresultsdrawerRight100; 
		animation-duration: 0.6s; 
		animation-fill-mode: forwards; 
		animation-iteration-count: 1;
    }
	#mydesk.position_bottom_right .bot_results.tf_close-100-right,
	#mydesk.desk_Right .bot_results.tf_close-100-right {
		-webkit-animation-name: closeresultsdrawerRight100;
		-moz-animation-name: closeresultsdrawerRight100;
		-ms-animation-name: closeresultsdrawerRight100;
        -o-animation-name: closeresultsdrawerRight100;
        animation-name: closeresultsdrawerRight100; 
        animation-duration: 0.6s; 
        animation-fill-mode: forwards; 
        animation-iteration-count: 1;
	}
	@keyframes openresultsdrawerRight100 {
		0% { right:0px; opacity: 0; width:300px;}
		1% { right:0px; opacity: 1; width:300px;}
		100% { right: 300px; width:calc(100vw - (300px + 30px)); opacity: 1; }
	}
	@keyframes closeresultsdrawerRight100 {
		0% { right: 300px; width:calc(100vw - (300px + 30px)); opacity: 1; }
		99% { right:0px; opacity: 1; width:300px; box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
		100%{ right:0px; opacity: 0; width:300px;}
	}
	@-webkit-keyframes openresultsdrawerRight100 {
		0% { right:0px; opacity: 0; width:300px;}
		1% { right:0px; opacity: 1; width:300px;}
		100% { right: 300px; width:calc(100vw - (300px + 30px)); opacity: 1; }
	}
	@-webkit-keyframes closeresultsdrawerRight100 {
		0% { right: 300px; width:calc(100vw - (300px + 30px)); opacity: 1; }
		99% { right:0px; opacity: 1; width:300px; box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
		100%{ right:0px; opacity: 0; width:300px;}
	}
	
		
	
	#mydesk.tf_desactive.desk_Right .bot_results,
	#mydesk.tf_desactive.position_bottom_right .bot_results{left:1000px;} /*--- pour masquer la liste de resultats ---*/
	#mydesk.tf_desactive.position_bottom_middle  .bot_results{top:1000px;} /*--- pour masquer la liste de resultats ---*/
    .bot_results {
        position: absolute;
        border :none;
        background: #fff;
        z-index: -1;
        border-radius: 11px 0px 0px 11px;
        display: block;
        box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important;
    }

	/*DEUXIEME TORROIR*/
	@media screen and (min-width: 1024px){
			@keyframes openresultsdrawerRight2 {
				0% { right:0px; opacity: 0; width:300px;}
				1% { right:0px; opacity: 1; width:300px;}
				100% { right: 585px;width:300px; opacity: 1; }
			}
			@keyframes closeresultsdrawerRight2 {
				0% { right: 585px;width:300px; opacity: 1; }
				99% { right:0px; opacity: 1;width:300px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
				100%{ right:0px; opacity: 0;width:300px;}
			}
			@-webkit-keyframes openresultsdrawerRight2 {
				0% { right:0px; opacity: 0; width:300px;}
				1% { right:0px; opacity: 1; width:300px;}
				100% { right: 585px;width:300px; opacity: 1; }
			}
			@-webkit-keyframes closeresultsdrawerRight2 {
				0% { right: 585px;width:300px; opacity: 1; }
				99% { right:0px; opacity: 1;width:300px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
				100%{ right:0px; opacity: 0;width:300px;}
			}
	}	
	@media screen and (min-width: 1024px){
			@keyframes openresultsdrawerLeft2 {
				0% { left:0px; opacity: 0; width:300px;}
				1% { left:0px; opacity: 1; width:300px;}
				100% { left: 726.75px;width:300px; opacity: 1; }
			}
			@keyframes closeresultsdrawerLeft2 {
				0% { left: 555.75px;width:300px; opacity: 1; }
				99% { left:0px; opacity: 1;width:300px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
				100%{ left:0px; opacity: 0;width:300px;}
			}
			@-webkit-keyframes openresultsdrawerFelt2 {
				0% { left:0px; opacity: 0; width:300px;}
				1% { left:0px; opacity: 1; width:300px;}
				100% { left: 726.75px;width:300px; opacity: 1; }
			}
			@-webkit-keyframes closeresultsdrawerLeft2 {
				0% { left: 555.75px;width:300px; opacity: 1; }
				99% { left:0px; opacity: 1;width:300px;box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important; }
				100%{ left:0px; opacity: 0;width:300px;}
			}
	}

	#mydesk.position_bottom_right .bot_results2.tf_open,
	#mydesk.desk_Right .bot_results2.tf_open{
		-webkit-animation-name: openresultsdrawerRight2;
		-moz-animation-name: openresultsdrawerRight2;
		-ms-animation-name: openresultsdrawerRight2;
		-o-animation-name: openresultsdrawerRight2;
		animation-name: openresultsdrawerRight2; 
		animation-duration: 1.5s; 
		animation-fill-mode: forwards; 
		animation-iteration-count: 1;
	}
	#mydesk.position_bottom_right .bot_results2.tf_close,
	#mydesk.desk_Right .bot_results2.tf_close{
		-webkit-animation-name: closeresultsdrawerRight2;
		-moz-animation-name: closeresultsdrawerRight2;
		-ms-animation-name: closeresultsdrawerRight2;
		-o-animation-name: closeresultsdrawerRight2;
		animation-name: closeresultsdrawerRight2; 
		animation-duration: 1.5s; 
		animation-fill-mode: forwards; 
		animation-iteration-count: 1;
	}
	#mydesk.position_bottom_left .bot_results2.tf_open,
	#mydesk.desk_Left .bot_results2.tf_open{
		-webkit-animation-name: openresultsdrawerLeft2;
		-moz-animation-name: openresultsdrawerLeft2;
		-ms-animation-name: openresultsdrawerLeft2;
		-o-animation-name: openresultsdrawerLeft2;
		animation-name: openresultsdrawerLeft2; 
		animation-duration: 1.5s; 
		animation-fill-mode: forwards; 
		animation-iteration-count: 1;
	}
	#mydesk.position_bottom_left .bot_results2.tf_close,
	#mydesk.desk_Left .bot_results2.tf_close{
		-webkit-animation-name: closeresultsdrawerLeft2;
		-moz-animation-name: closeresultsdrawerLeft2;
		-ms-animation-name: closeresultsdrawerLeft2;
		-o-animation-name: closeresultsdrawerLeft2;
		animation-name: closeresultsdrawerLeft2; 
		animation-duration: 1.5s; 
		animation-fill-mode: forwards; 
		animation-iteration-count: 1;
	}

	#mydesk.tf_desactive.desk_Right .bot_results2,
	#mydesk.tf_desactive.position_bottom_right .bot_results2{left:1000px;} /*--- pour masquer la liste de resultats ---*/

	#mydesk.tf_desactive.desk_Left .bot_results2,
	#mydesk.tf_desactive.position_bottom_left .bot_results2{right:1000px;} /*--- pour masquer la liste de resultats ---*/

	#mydesk.tf_desactive.position_bottom_middle  .bot_results2{top:1000px;} /*--- pour masquer la liste de resultats ---*/
	.bot_results2 {
		position: absolute;
		border :none;
		background: #fff;
		z-index: -1;
		border-radius: 11px;
		display: block;
		box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important;
	}
	/*FIN DEUXIEME TORROIR*/

	/*--- Bouton pour fermer la liste de recherche ---*/
	#closeArrow{
        width: 100%;
        background: #FFF;
        height: 50px;
        margin-bottom: 0px !important;
		position: relative;
		top: 0;
		height: 56px;
		cursor: pointer;
    }
    #mydesk.desk_Right #closeArrow,
	#mydesk.position_bottom_right  #closeArrow,
	#mydesk.position_bottom_middle  #closeArrow{
        border-top-left-radius:11px;
    }
	#mydesk.desk_Left #closeArrow,
	#mydesk.position_bottom_left  #closeArrow{
        border-top-right-radius:11px;
    }
	#closeArrow img{
        margin: 10px !important;
	}
	#mydesk.desk_Right #closeArrow img,
	#mydesk.position_bottom_right  #closeArrow img,
	#mydesk.position_bottom_middle  #closeArrow img{
		transform: rotate(0deg);
    }

	
	/*--- Bouton pour ouvrir la liste de recherche module à droite ---*/
	#mydesk.tf_desactive.desk_Right #tf_openArrow,
	#mydesk.tf_desactive.position_bottom_right #tf_openArrow{left:1000px;} /*--- pour masquer le bouton qui ouvre la liste de resultats ---*/
	#mydesk.tf_desactive.position_bottom_middle  #tf_openArrow{top:1000px;} /*--- pour masquer le bouton qui ouvre la liste de resultats ---*/
	#tf_openArrow{
        width: 56px;
		background: #FFF;
		border-top-left-radius: 11px;
		border-bottom-left-radius: 11px;
		position: absolute;
		right: 220px ;
		top: 0px;
		height: 56px;
		cursor:pointer;
		z-index: -1;
		box-shadow: 0px 3px 18px rgba(0,0,0,0.1) !important;
    }
	#tf_openArrow img{
		transform: rotate(180deg);
		margin-top: 12px;
		margin-left: 8px;
	}
	
	@keyframes showBtnOpenResult_Right {
		0% { right:220px; opacity: 1; display: none;  box-shadow: 0px 3px 18px rgba(0,0,0,0);}
		50% { right:220px; opacity: 1; display: block; }
		100% { right: 290px; opacity: 1; display: block; }
	}
	@keyframes hideBtnOpenResult_Right {
		0% { right: 290px; opacity: 1; display: block; }
		100%{ right:220px; opacity: 1; display: none; box-shadow: 0px 3px 18px rgba(0,0,0,0);}
	}
	@-webkit-keyframes showBtnOpenResult_Right {
		0% { right:220px; opacity: 1; display: none;  box-shadow: 0px 3px 18px rgba(0,0,0,0);}
		50% { right:220px; opacity: 1; display: block; }
		100% { right: 290px; opacity: 1; display: block; }
	}
	@-webkit-keyframes hideBtnOpenResult_Right {
		0% { right: 290px; opacity: 1; display: block; }
		100%{ right:220px; opacity: 1; display: none; box-shadow: 0px 3px 18px rgba(0,0,0,0);}
	}
	#mydesk.position_bottom_middle .tf_openArrow_open,
	#mydesk.position_bottom_right .tf_openArrow_open,
	#mydesk.desk_Right .tf_openArrow_open{
		-webkit-animation-name: showBtnOpenResult_Right;
		-moz-animation-name: showBtnOpenResult_Right;
		-ms-animation-name: showBtnOpenResult_Right;
        -o-animation-name: showBtnOpenResult_Right;
        animation-name: showBtnOpenResult_Right;
		animation-duration: 2.8s; 
		animation-fill-mode: forwards; 
		animation-iteration-count: 1;
    }
	#mydesk.position_bottom_middle .tf_openArrow_close,
	#mydesk.position_bottom_right .tf_openArrow_close,
	#mydesk.desk_Right .tf_openArrow_close{
		-webkit-animation-name: hideBtnOpenResult_Right;
		-moz-animation-name: hideBtnOpenResult_Right;
		-ms-animation-name: hideBtnOpenResult_Right;
        -o-animation-name: hideBtnOpenResult_Right;
        animation-name: hideBtnOpenResult_Right; 
        animation-duration: 1s; 
        animation-fill-mode: forwards; 
        animation-iteration-count: 1;
	}
	
	/*--- pour mobile ---*/
	@media screen and (max-width: 414px){
		.contenu_result{
			/*height: calc(300px - 50px);*/
			height: calc(100% - 56px) !important;
			overflow-y: auto;
			 overflow-x: hidden;
			display: block;
			box-sizing: content-box;
		/*	position: absolute;*/
			/*width: 320px;*/
			padding: 0px 0px 0px 20px !important;
		}
		#tf_openArrow{
			right: -86px ;
			top: 58px;
			z-index: 2;
			width: 48px;
			height: 48px;
			border-left: 1px solid #bbb;
			border-bottom: 1px solid #bbb;
		}
		#tf_openArrow img{
			margin-top: 8px;
			margin-left: 8px;
		}
		.imgOpenResults{
			border: 1px solid #f1f1f1;
			background-color: #f5f5f5;
			border-radius: 15px;
		}
		
		@keyframes showBtnOpenResult_Right {
			0% { right:-80px; opacity: 1; display: none; }
			50% { right:-80px; opacity: 1; display: block; }
			100% { right:0px; opacity: 1; display: block; }
		}
		@keyframes hideBtnOpenResult_Right {
			0% { right:0px; opacity: 1; display: block; }
			100%{ right:-80px; opacity: 1; display: none;}
		}
		@-webkit-keyframes showBtnOpenResult_Right {
			0% { right:-80px; opacity: 1; display: none; }
			50% { right:-80px; opacity: 1; display: block; }
			100% { right:0px; opacity: 1; display: block; }
		}
		@-webkit-keyframes hideBtnOpenResult_Right {
			0% { right:0px; opacity: 1; display: block; }
			100%{ right:-80px; opacity: 1; display: none;}
		}
		#ListAllContextAI {
			height: calc(100% - 98px) !important;
			border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
		}
	}
		
	/*
	la largeur du module
	285	*/

	/*
	@media screen and (max-width: 414px){
		#bot_results .contenu_result {
			width: 284px;
		}
	}
	@media screen and (min-width: 415px){
		#bot_results .contenu_result {
			width: 284px;
		}
	}
	@media screen and (min-width: 750px){
		#bot_results .contenu_result {
			width: 438px;
		}
	}
	@media screen and (min-width: 1024px){
		#bot_results .contenu_result {
			width: 564px;
		}
	}	
	*/
	.bot_result .titleNumResult {
		position: relative;
		top: 18px;
	}

    #result_listing_display{
        width: auto;
        height: 14px;
		position: absolute;
		top: 10px;
		cursor: pointer;
		z-index: 2;
    }
	#mydesk.desk_Right #result_listing_display,
	#mydesk.position_bottom_right  #result_listing_display,
	#mydesk.position_bottom_middle  #result_listing_display{
		right: 0px;
    }
	
    #result_listing_display svg{
        cursor: pointer;
    }
    #result_listing_display svg.selected,
	#viewFav svg.selected{
        cursor: initial;
    }
    #result_listing_display svg:hover rect,
	#result_listing_display svg:hover path,
	#viewFav svg:hover rect,
	#viewFav svg:hover path{
        fill: #555 !important;
    }
    #result_listing_display .selected rect,
	#result_listing_display .selected path,
	#viewFav .selected rect,
	#viewFav .selected path{
        fill: #555 !important;
    }
    #result_listing_display svg:first-child{
        margin-right: 3px;
    }

	#mydesk[class*='Right'].open.sideon  .contenu_result,
	#mydesk[class*='right'].open.sideon .contenu_result,
	#mydesk[class*='Left'].open.sideon  .contenu_result,
	#mydesk[class*='left'].open.sideon .contenu_result	{
		height: calc(100% - 56px);
	}
    .contenu_result{
        height: calc(100% - 86px);
        overflow-y: auto;
         overflow-x: hidden;
        display: block;
        box-sizing: content-box;
      /*  position: absolute;*/
        /*width: calc(100% - 35px);*/
    }
	#mydesk.position_bottom_left .contenu_result,
	#mydesk.desk_Left .contenu_result{
		padding: 20px 0px 0px 34px !important;
	}
	#mydesk.desk_Left #bot_preview,
	#mydesk.desk_Left #bot_form,
	#mydesk.position_bottom_left #bot_preview,
	#mydesk.position_bottom_left #bot_form{
		padding: 20px 0px 0px 22px !important;
	}
    .contenu_result .diapo_fleche{
        display:none;
    }
    #push_centered{
        z-index: 100002 !important;
    }
	
    /*------ Listing mode Package --------*/
	#mydesk .contenu_result.list_package{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
	}
	#mydesk .contenu_result.list_package.list_hide{
		display: none;
	}
    .list_package > div {
        /*width: 222px;*/
        margin-right: 4% !important;
        margin-bottom:4% !important;
        cursor: pointer;
		border: 1px solid #eee;
		border-radius: 12px;
		height: 330px;
		padding: 12px;
		box-shadow: 0px 3px 6px rgba(0,0,0,0.05);
    }
	.list_package .lignes-3 {
		font-size: 0.9em;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.list_package .v-image div {
		border-radius: 6px;
	}
	.list_package .headline{
		font-size: 0.9em;
		height: 56px;
		-webkit-line-clamp: 3;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.list_package .v-image {
		height: 120px;
	}
	.list_package .v-card__title {
		height: 160px;
		padding-top: 10px;
	}
	.list_package .v-card__actions {
		height: 60px;
		display: flex;
		padding: 0px 2px 8px 2px;
		justify-content: flex-end;
		align-items: center;
	}

    /* listing de 3 images */ 
    .list_package > div:nth-child(3n) {
        margin-left: 0 !important;
    }
    .list_package .result_img{
        background-color: #C4C4C4;
        width: 100%;
        /*height: 110px; */ 
    }
    .list_package .result_description {
		padding-left:3px;
	}
    
    .list_package .result_description .desc_courte, .list_package .result_description .info_picto{
        display:none;
    }
    .list_package .result_title{
        text-align: center;
        width: 100%;
        display: block;
        height: 30px;
        background-color: #E74C3C;
        line-height: 30px;
        color: #fff;
    }
	.list_package .surface{
		font-size:0.9em;
	}
	.list_package .desc_surface{
		font-size:0.8em;
		color: #888;
	}
	.list_package .desc_prix {
		font-size:0.8em;
	}
    .list_package .link_to_prestation{
		font-size: 12px !important;
    }
    .list_package .lieu_resid{
        font-size: 10px;
    }
    .list_package .btn_more_info{
        border: 1px solid #000000;
        padding: 2px 3px;
        margin: 2px 0 0 0;
        /* text-align: right; */
        float: right;
    }
    .list_package .btn_more_info:hover{
        background-color:#FFFFFF;
        padding: 2px 3px;
        margin: 2px 0 0 0;
        /* text-align: right; */
        float: right;
        color:#000000;
        text-decoration:none;
    }
    .list_package .wraper_prix_divers{
        position: absolute;
        top: 0;
        background-color: rgba(192,57,43, 0.8);
        color:#000000;
        font-size:11px;
        width:100%;
        line-height: 16px !important;
    }

    .list_package .soit,.list_package .soit , .list_package .prix_pers{
        display: none;
    }
    .list_package .nbr_nuit
    {
        padding-left: 5px !important;
    }
    .list_package img{
        box-sizing: border-box;
        width: 100%;
		max-width: 100%;
		vertical-align: top;
		height: 200px;
		object-fit: cover;
    }
    .list_package .bon_plan{
        display: none;
        position: absolute;
        bottom:0;
        width: 100%;
        text-align: left;
        background-color: #E74C3C;
        line-height: 22px !important;
        color: #000000;
        font-weight: 400; 
    }

    .list_package .pourcentage_promo{
        display: block;
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        text-align: left;
        background-color: #E74C3C;
        line-height: 22px !important;
        color: #000000;
        font-weight: 400;
    }

    /*------ Listing mode détail ------*/
	#mydesk .contenu_result.list_detail.list_show {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: stretch;
	}
    .list_detail .resultBien{
        padding-bottom: 3px !important;
        padding-top: 2px !important;
        border-bottom: rgba(231,76,60, 0.3) 1px solid !important;
        border-top: rgba(255, 255, 255, 0.55) 1px solid !important; 
        display: block;
		min-height: 80px !important;
		width: 100%;
    }
    .list_detail > div:hover{
        background-color: rgba(231,76,60, 0.05);
        cursor: pointer;
    }
	/*
    .list_detail > div:first-child{
        border-top: none !important;
    }
    .list_detail > div:last-child{
        border-bottom: none !important;
    }
	*/
    .list_detail .result_img{
		height: 100%;
		box-sizing: content-box;
		margin-right: 10px;
		background-color:#C0392B;
		display: block;
		float: left;
    }
    .list_detail .result_title{
		width: calc(100% - 110px);
		color: #E74C3C;
		font-weight: 600;
		margin-left: 110px;
    }
    .list_detail .result_description{
        font-size: 0.8em;
        font-weight: 400;  
		margin-top: 4px;
		width: calc(100% - 110px);
		padding-left: 110px !important;
    }
	
	.list_detail .desc_prix{
		color: #888;
		font-size: 0.8em;
		font-weight: 100;
	}
	.list_detail .desc_surface{
		color: #888;
		font-size: 0.8em;
		font-weight: 100;
	}
    .list_detail img{
        box-sizing: border-box;
        background-size: cover !important;
		width: 100%;
		max-width: 100%;
		vertical-align: top;
		height: 100% !important;
		object-fit: cover;
    }
    .list_detail .bon_plan{
        display: none;
    }

	.list_show{
		display: unacceptablevalue; /* pour remettre le display de base ... oui c'est tricky*/
	}
	.list_hide {
		display: none;
	}
	.gooResult {
	   position:relative;
	   bottom:2px;
	   left:-119px;
	   /*bottom:20px;
	   left:-5px;*/
	}
	.list_package .gooResult {
	 position:relative;
	   bottom:208px; /* 227 */
	   left:0px;
	}
    /*FIN ONGLET RESULTAT CHAT BOT */
	
	/*AFFICHE SINGLE RESULTAT CHAT BOT */
	#contentResultatInIframe {
		position:absolute !important;
		/*
		width:70vw;
		height:50vw;
		top:calc(50% - 25vw);
		left:calc(50% - 35vw);
		*/
		width: 100% !important;
		height: 100% !important;
		top:0px !important;
		left:0px !important;
		bottom: 0px !important;
		right: 0px !important;
		background-color: #fff !important;
		border: 0px !important;
	}
	#pushResultat {
		cursor:pointer;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		height: 95%;
	}
	.iframetContentResul {
		text-align: initial;
		position: relative;
		background-color: transparent;
		text-align: center;
		height: calc(100% - 160px);
		margin: 80px;
		width: 100%;
	}
	
	#pushResultat .pushclose {
        background: url(//www.watcheezy.net/fo/img/icones/cross.svg) rgb(231,76,60)no-repeat !important;
		z-index: 10;
		right: 60px !important;
		top: 60px !important;
       /* position: absolute;
        right: 5px;
        width: 15px;
        height: 15px;
        top: 5px;*/
    }
	#pushResultat .pushclose:hover {
		width: 34px !important;
		height: 34px !important;
		right: 58px !important;
		top: 58px !important;
	}
	@media screen and (max-width: 414px){
		#pushResultat {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			width: 100vw;
			height: 100%;
		}
		.iframetContentResul {
			-webkit-overflow-scrolling: touch;
			overflow: auto;
			margin: 30px 0px 0px 0px;
			height: calc(100% - 30px);
		}
		#contentResultatInIframe {
			width: 100%;
			height: calc(100% - 35px);
			top: 35px;
			left: 100%;
		}
		#pushResultat .pushclose {
			right: 5px !important;
			top: 5px !important;
		}
		#pushResultat .pushclose:hover {
			right: 2px !important;
			top: 2px !important;
		}
	}
	
	/*
	.tf_iconlike {
		position:absolute;
		left:125px;
		cursor:pointer;
	}
	*/
	.tf_iconcart {
		padding-right: 8px;
		cursor:pointer;
	}
	/*
	.list_package .tf_iconlike {
		position: relative;
		top: 10px;
		left: 0px;
	}
	*/
	#bot_like .unliked {
		display:none;
	}
	
	/*--- loader CSS ---*/
	.lds-ring {
		display: inline-block;
		position: absolute;
		width: 64px;
		height: 64px;
		top: calc(50% - 32px);
		left: calc(50% - 32px);
		z-index: 1;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 42px;
		padding: 10px;
	}
	.lds-ring div {
	  box-sizing: border-box;
	  display: block;
	  position: absolute;
	  width: 51px;
	  height: 51px;
	  margin: 6px;
	  border: 6px solid #fff;
	  border-radius: 50%;
	  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	  border-color: rgb(231,76,60) transparent transparent transparent;
	}
	.lds-ring div:nth-child(1) {
	  animation-delay: -0.45s;
	}
	.lds-ring div:nth-child(2) {
	  animation-delay: -0.3s;
	}
	.lds-ring div:nth-child(3) {
	  animation-delay: -0.15s;
	}
	@keyframes lds-ring {
	  0% {
		transform: rotate(0deg);
	  }
	  100% {
		transform: rotate(360deg);
	  }
	}

/*
    div.node{
        position: relative;
        border: 2px solid #FFF;
        box-sizing: border-box !important;
        background-color:rgba(0,0,0, 0.1);
    }
    div.node:hover{
		box-shadow: #8b98a1 0px 0px 12px;
		position: relative;
		z-index: 80
    }
*/
	/* BOUTON RESET pour relancer le bot à zero */
    #mydesk.tf_open #WatchBox-reset{
        display: none;
    }
    #mydesk.wzbot.tf_open #WatchBox-reset{
        display: block;
    }
            .messageVisiteur{
            min-width: 25% !important; 
            background-color: #FFFFFF;
            display:table;
			position: relative;
			right: -10px;
           }
        .WatchBox-reset{
			z-index: 5;
			width: 22px;
			height: 22px;
			position: absolute;
			top: 8px;
			display: block !important;
			border-radius: 2px;
			right: 100px;
			cursor: pointer;
        }
		.WatchBox-reset:hover  {
			background-color: rgba(192,57,43,0.4);
		}
        .WatchBox-micro{
            cursor: pointer;
			height: 32px;
			position: absolute;
			bottom: 10px;
			right: 46px;
			z-index: 2;
			width: 32px;
			border-radius: 50%;
			padding-top: 3px;
			padding-left: 2px;
        }
		.WatchBox-micro:hover{
			background-color: rgba(192,57,43,0.2);
        }
		.WatchBox-micro.off{
			display: none;
        }
		.WatchBox-micro.on{
			display: block;
        }
		.WatchBox-micro svg{
			fill:rgba(231,76,60, 1)
        }
    	/* FIN BOUTON RESET 
 	/* ICONE zoom sur les images clicables */
	.WatchBox-zoom{
		max-width:20px;
		position:absolute;
		top:50%;right:50%;
		opacity:0.3;
    }
        #bt_botrest path{
        fill:rgba(192,57,43, 1)
    }
    #bt_botrest:hover path{
        fill:rgba(231,76,60, 1)
    }
        /* FIN ICONE */
/* BOUTONS VERTICAL */
.ContentBotButton  {
	width: calc(100% - 24px);
}
.ContentBotButtonVert, .ViewerBotButtonVert{
    min-width: calc(100% - 24px) !important;
    max-width: 100% !important;
}

.ContentBotButtonVert .BotButtonReponse {
    position: relative;
    border: 1px solid rgba(231,76,60, 1) !important;
                /*min-width: 100% !important;*/
      
    /*max-width: 100% !important;*/
    
    /*box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12) !important;*/
    cursor: pointer;
}
.ContentBotButtonVert .BotButtonReponse {
	border-radius : 0;
    margin: 0px auto !important;
    /*padding: 0px 10px !important;*/
}
.ContentBotButtonVert .BotButtonReponse:first-child{
	border-top-right-radius:8px;
    border-top-left-radius:8px;
    border-top: 1px solid rgba(192,57,43, 1) !important;
}

.ContentBotButtonVert .BotButtonReponse:last-child{
	border-bottom-right-radius:8px;
    border-bottom-left-radius:8px;
    border-top: 0px ; 
}

/* bouton seule */
.ContentBotButtonVert .BotButtonAlone{
	margin-top: 10px;
    border-radius: 8px;
    border: 1px solid rgba(29,50,67, 1) !important;
}
.ContentBotButtonVert .BotButtonAlone:hover{
  background-color: #C0392B !important;
}
/**/
.ContentBotButtonVert .BotButtonReponse{
    border-top: 0px !important; 
}
.ContentBotButtonVert .txtReponse {
    /*width: calc(100% - 10px) !important;*/
    padding: 12px !important;
    margin: 0px !important;
    font-size: 14px;
    line-height: 1.2em;
	color: #E74C3C !important;

}
.ContentBotButtonVert .txtReponse:hover {
	color:rgba(167,189,24, 1)!important;
}

/* SCROLL HORIZONTAL */
.BotButtonReponse {
    position: relative;
    border: 1px solid #C0392B;
    cursor: pointer;
}
.BotButtonReponse:hover, .BotButtonReponse:hover .txtReponse{
    background-color: #E74C3C;
    color: #A7BD18 !important;
}
.BotButton {
	position: relative;
	color: #ffffff;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	margin: 9px 25px 8px 25px !important;
	padding: 4px 4px 6px 4px !important;
	background-color:#C0392B;
	max-width: 80%;
	cursor:pointer;
	display: inline-block;
    border: 1px solid grey;
    box-shadow: 1px 1px 1px grey;
}
.listBotButtons, .listBotButtonsResum{
	position: relative;
    color: rgba(29,50,67,1) !important;
    /*float: right;*/
    right: -12px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    margin: 20px 6px 4px auto !important;
    padding: 4px 4px 6px 4px !important;
	min-width: 20%;
    max-width: 60%;
	display: table;
}



.BotButtonReponse {
    border-radius: 25px;
    margin: 14px 6px 0px 18px !important;
    /*padding: 0px 6px !important;*/
}


.txtReponse {
    width: fit-content !important;
    width: -moz-fit-content !important;
    padding: 0px 5px !important;
    color: #C0392B !important;
    margin:4px 4px 3px 4px;
}
.txtReponse:hover {
    color: #A7BD18 !important;
}

.tf-botSelector {
	border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
    height: 32px !important;
	color: #C0392B !important;
    background-color: #fff !important;
	/*background-color: rgba(255,255,255,0.7) !important;*/
    border: 1px solid #C0392B !important;
    padding-left: 8px !important;
    max-width: 80% !important;
	cursor: pointer;
}
.tf-botSelector, .tf-botSelector :active, .tf-botSelector :focus{
	outline: none;
}

    .ViewerBotButton {
        width: 100%;
        /*margin-left: 30px !important;*/
        overflow: hidden;	
    }
    .tf-arrow {
        position: absolute;
        z-index : 9;
        cursor: pointer;
        background-color: #E74C3C;
        top: 7px;
        width: 46px;
        height: 46px;
        border-radius: 25px;
        border: 1px solid #A7BD18;
    }
    .tf-arrow:hover{
        background-color: #FFFFFF;
    }
    .tf-arrow--right:hover .tf-iconeRightArrow{
        border-left: 12px solid #A7BD18;
    }
    .tf-arrow--left:hover .tf-iconeLeftArrow{
        border-right: 12px solid #A7BD18;
    }
    .tf-arrow--left {
        left: -40px;
        border-radius: 0 50% 50% 0;
    }
    
    .tf-arrow--right {
        right: -40px;
        border-radius: 50% 0 0 50%;
    }
    .tf-iconeLeftArrow {
        width: 0;
        height: 0;
        border-top: 9px solid transparent;
        border-right: 12px solid #A7BD18;
        border-bottom: 9px solid transparent;
        right: -40%;
        position: relative;
        top: 32%;
    }
    .tf-iconeRightArrow {
        width: 0;
        height: 0;
        border-top: 9px solid transparent;
        border-left: 12px solid #A7BD18;
        border-bottom: 9px solid transparent;
        left: 30%;
        position: relative;
        top: 32%;
    }

.ContentBotButton {
    display: flex;
	justify-content: center;
    padding: 0px 0px 8px 0px !important;
}
/* FIN SCROLL HORIZONTAL */

/* DEBUT DATERANGE ET DATEPICKER */
.tf-date-range {
     width: 100%;
	 text-align: right;
}
.ContentBotButton .tf-date-picker:before {
     position: absolute;
     top: 0px;
     margin-left: 14px;
     color: #C0392B;
}
.ContentBotButtonVert .tf-date-picker:before {
    position: relative;
    color: #C0392B;
}
.tf-date-range__start[data-tf-date-picker-label]:before {
    content: attr(data-tf-date-picker-label)
}
.tf-date-range__end[data-tf-date-picker-label]:before {
    content: attr(data-tf-date-picker-label)
}
.tf-date-picker {
     width: 100%;
}
.tf-date-picker input[type='date'] {
    /* line-height: 11px; */
    border-radius: 18px;
    color: #C0392B !important;
    border: 1px solid #C0392B !important;
    background-color: rgba(255,255,255,0.7) !important;
    outline: none;
    max-width: initial !important;
    width: 120px !important;
    margin: 0px 6px 8px 8px;
    padding: 6px 0px 6px 6px;
    font-size: 1em;
    font-family: 'Ubuntu', sans-serif !important;
}
.tf-date-picker input[type='date']::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
}
.inactif{
	opacity: 0.3;
    cursor: inherit!important;
	width: 100%;
}
.inactif .ContentBotButtonVert .BotButtonReponse:hover, .inactif .txtReponse:hover, .inactif .BotButtonReponse:hover .txtReponse{
	cursor: inherit!important;
	background: inherit!important;
	color: inherit!important;
}

.tf_contextAI {
	position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #E74C3C;
    bottom: 32px;
    left: -34px;
    border: 2px solid #fff;
	cursor: pointer;
	z-index: 1;
}
.tf_contextAI:before {
	content: 'i';
    font-size: 1.2em;
    color: #fff;
    left: 10px;
    position: absolute;
}

#fondContextAI {
	width: 100%;
    z-index: 50;
    position: absolute;
    height: calc(100% - 56px);
	backdrop-filter: blur(5px);
	background-color: RGBA(255, 255, 255, 0.6);
}

#showContextAI {
    position: absolute;
    top: calc(50% - 160px);
    left: calc(50% - 100px);
}

.pushProduct {
	box-sizing: content-box;
}


.pushProduct .tf_infoProduct {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	font-size: 0.9em;
}
.pushProduct .tf_descitionProduct:before {
	content: attr(description)
}
.pushProduct .lignes-1-title,
.pushProduct .lignes-2-title,
.pushProduct .lignes-1,
.pushProduct .lignes-2,
.pushProduct .lignes-3,
.pushProduct .lignes-4,
.pushProduct .lignes-5,
.pushProduct .lignes-6 {
    overflow: hidden;
	margin-top: 1px;
    margin-bottom: 1px;
	display: -webkit-box;
    -webkit-box-orient: vertical;
}
/*-- selected --*/
.pushProduct .lignes-1-title {
    height: 19px;
    -webkit-line-clamp: 1;
	font-size: 1em;
	line-height: 1.3em;
}
.pushProduct .lignes-2-title {
    height: 37px;
    -webkit-line-clamp: 2;
	font-size: 1em;
	line-height: 1.3em;
}
.pushProduct .lignes-1 {
    height: 14px;
    -webkit-line-clamp: 1;
	font-size: 0.9em;
	line-height: 1.1em;
}
.pushProduct .lignes-2 {
    height: 28px;
    -webkit-line-clamp: 2;
	font-size: 0.9em;
	line-height: 1.1em;
}
.pushProduct .lignes-3 {
    height: 42px;
    -webkit-line-clamp: 3;
	font-size: 0.9em;
	line-height: 1.1em;
}
.pushProduct .lignes-4 {
    height: 55px;
    -webkit-line-clamp: 4;
	font-size: 0.9em;
	line-height: 1.1em;
}
.pushProduct .lignes-5 {
    height: 69px;
    -webkit-line-clamp: 5;
	font-size: 0.9em;
	line-height: 1.1em;
}
.pushProduct .lignes-6 {
    height: 83px;
    -webkit-line-clamp: 6;
	font-size: 0.9em;
	line-height: 1.1em;
}

/*-- selected --*/
.pushProduct.selected .lignes-1-title,
.pushProduct.selected .lignes-2-title,
.pushProduct.selected .lignes-1,
.pushProduct.selected .lignes-2,
.pushProduct.selected .lignes-3,
.pushProduct.selected .lignes-4,
.pushProduct.selected .lignes-5,
.pushProduct.selected .lignes-6 {
	display: -webkit-box;
    -webkit-box-orient: vertical;
	font-size: 1em;
    line-height: 1.3em;
}
.pushProduct.selected .lignes-1-title {
    height: 36px;
    -webkit-line-clamp: 2;
}
.pushProduct.selected .lignes-2-title {
    height: 36px;
    -webkit-line-clamp: 2;
}
.pushProduct.selected .lignes-1.tf_price {
    height: 22px;
    -webkit-line-clamp: 2;
}
.pushProduct.selected .lignes-1 {
    height: 24px;
    -webkit-line-clamp: 2;
}
.pushProduct.selected .lignes-2 {
    height: 36px;
    -webkit-line-clamp: 2;
}
.pushProduct.selected .lignes-3 {
    height: 56px;
    -webkit-line-clamp: 3;
}
.pushProduct.selected .lignes-4 {
    height: 74px;
    -webkit-line-clamp: 4;
}
.pushProduct.selected .lignes-5 {
    height: 92px;
    -webkit-line-clamp: 5;
}
.pushProduct.selected .lignes-6 {
    height: 110px;
    -webkit-line-clamp: 6;
}

.pushProduct .tf_fav_push {
    position: absolute;
    top: 8px;
    right: 8px;
    fill-opacity: 0.9;
	fill: #ababab;
    stroke-width: 2px;
    stroke: #fff;
    stroke-opacity: 0.8;
	width: 34px;
	z-index: 1;
}
#fondContextAI .pushProduct .tf_fav_push:hover,
.tf-carousel-products .pushProduct .tf_fav_push:hover{
    top: 6px;
    right: 6px;
	fill: #f12323;
	width: 38px;
}

.tf-carousel-products .tf_prix.orange{
	font-size: 1.3em;
	color: rgb(238, 125, 0);
}

.pushProduct .tf_price{
	font-size: 0.8em;
	display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 4px;
	background-color:  #E74C3C;
	color: #ffffff;
	width: calc(100% + 17px);
    left: -12px;
    position: relative;
}
.pushProduct .tf_price .price{
	font-size: 1.3em;
}
.pushProduct.selected .tf_price{
	font-size: 0.9em;
	display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 4px;
	background-color:  #E74C3C;
	color: #ffffff;
	width: calc(100% + 17px);
    left: -12px;
    position: relative;
}
.pushProduct.selected .tf_price .price{
	font-size: 1.2em;
}
/*--- affichage matchKey jauge ---*/
.pushProduct .title.tf_gauge {
	margin-top: 8px;
}
.pushProduct .tf_gaugeMatch {
	background-color: white;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    position: absolute;
    top: 78px;
	text-align: center;
}
#bot_like .pushProduct .tf_gaugeMatch {
	display: none;
}
.pushProduct .tf_gaugeMatch .tf_gaugeText {
	color: grey;
    font-size: 0.8em;
}
	
:root {
  --baseGaugeSizeValue: 90; /* Defines the size of the gauge, lower the number higher the size */
}
.sb-score-chart-mask {
	top: 4px;
	left: 4px;
  position: relative;
  overflow: hidden;
  display: block;
  width: calc(200 / var(--baseGaugeSizeValue) * 1rem);
  height: calc(100 / var(--baseGaugeSizeValue) * 1rem);
}

.sb-score-chart-semi-circle {
  position: relative;
  display: block;
  width: calc(200 / var(--baseGaugeSizeValue) * 1rem);
  height: calc(100 / var(--baseGaugeSizeValue) * 1rem);
  background: linear-gradient(to right, #c0392b 0%, #f1c40f 50%, #1abc9c 100%);
  border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}

.sb-score-chart-semi-circle::before {
  content: "";
  position: absolute;

  left: 50%;
  z-index: 2;
  display: block;
  width: calc(100 / var(--baseGaugeSizeValue) * 1rem);
  height: calc(50 / var(--baseGaugeSizeValue) * 1rem);
  margin-left: calc(-50 / var(--baseGaugeSizeValue) * 1rem);
  margin-top: calc(50 / var(--baseGaugeSizeValue) * 1rem);
  background: #fff;
  border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}

.sb-score-chart-semi-circle--mask {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(200 / var(--baseGaugeSizeValue) * 1rem);
  height: calc(200 / var(--baseGaugeSizeValue) * 1rem);
  background: transparent;
  transform: rotate(80deg) translate3d(0, 0, 0); /* Based on score change the rotate value */
  transform-origin: center center;
  backface-visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.sb-score-chart-semi-circle--mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0%;
  z-index: 2;
  display: block;
  width: calc(202 / var(--baseGaugeSizeValue) * 1rem);
  height: calc(102 / var(--baseGaugeSizeValue) * 1rem);
  margin: -1px 0 0 -1px;
  background: #efefef;
  border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}



/**
 * ==============================================
 * Tool tips
 * ==============================================
 */
 
.tool-tip.tool-tip-gauge[data-tooltip-position="top"]::after,
.tool-tip.tool-tip-gauge[data-tooltip-position="bottom"]::after {
  left: 100px;
  top: calc(100% + 6px);
}


.tool-tip.tool-tip-gauge[data-tooltip-position="top"]:hover::after {
  transform: translate3d(-50%, 0px, 0); 
}
.tool-tip.tool-tip-gauge[data-tooltip-position="top"]:hover::before {
  display: none;
}
.tool-tip.tool-tip-gauge[data-tooltip-position="bottom"]:hover::after {
  transform: translate3d(-50%, -25%, 0);
}



/* sinon c'est au survole qu'il s'active*/
.tool-tip.tool-tip-gauge::after,
.tool-tip.tool-tip-gauge.active::after {
  background-color: rgb(192,57,43);
  border-radius: 6px;
  color: #ffffff;
  content: "Destination : Allemagne, Budget_max : 1500, MoisDépart : 08, AnnéeDépart : 2024, DuréeSéjour : 6, ";

  max-width: 200px;
  width: 100px;
  height: 30px;
  text-align: left;
  text-transform: none;
  margin-left: -20px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  line-height: 1.4;
  font-size: 0.9em;
  position: absolute;
  transition: height 50ms ease 0ms, opacity 150ms ease 0ms, transform 150ms ease 0ms;
  transform-style: preserve-3d;
  opacity: 0;
  z-index: -1;
  overflow: auto;
}

.tool-tip.tool-tip-gauge:hover::after {
  content: attr(data-tooltip-title) " ";
  /*text-transform: uppercase;*/
  opacity: 1;
  height: 120px;
  z-index: 100;
  width: 150px;
}


/*---------------- fin jauge ------------------*/

#fondContextAI .pushProduct .tf_fav_push.selected,
.tf-carousel-products .pushProduct .tf_fav_push.selected {
    top: 6px;
    right: 6px;
	fill: #f12323;
	width: 38px;
}

.tf-carousel-products .btn-callNumber,
#bot_like .btn-callNumber {
	background-color: #0fa30f;
    color: #ffffff;
}
#showContextAI .btn-callNumber .v-btn__content {
	color: #ffffff;
}

.WZ-MessageChat {
	transition: margin 300ms ease-out;
}
.tf-carousel-products.min {
	opacity: 0;
}
.tf-carousel-products.max {
	opacity: 1;
}
.tf-carousel-products {
	transition: opacity 3000ms ease-out;
}

/* ne pas afficher les br dans le message carrousel */
#WatchBox-conversation .message-carousel .txtChat br {
	/*display:none;*/
}
.messageSystem {
	margin-top: 18px;
}
.tf_allResults {
	cursor: pointer;
}
.tf_allResultsIcone {
	background-color:  #E74C3C;
    position: relative;
    top: 18px;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    left: 4px;
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(0, 0, 0.2, 1) 0s;
}
.tf_allResultsIcone polygon {
	fill: rgba(255,255,255,1);
    transform: rotate(45deg);
    transform-origin: 50%;
}
.tf_allResultsTxt {
	margin-left: 28px;
}

/*---------------- Bot like ------------------*/
#bot_like.list_detail .tf_price {
	display: none;
}
#bot_like.list_detail .pushProduct .lignes-1.title,
#bot_like.list_detail .pushProduct .lignes-2.title,
#bot_like.list_detail .pushProduct .lignes-3.title,
#bot_like.list_detail .pushProduct .lignes-4.title,
#bot_like.list_detail .pushProduct .lignes-5.title,
#bot_like.list_detail .pushProduct .lignes-6.title {
    height: 14px;
    -webkit-line-clamp: 1;
}
#bot_like.list_detail .pushProduct .lignes-1,
#bot_like.list_detail .pushProduct .lignes-2,
#bot_like.list_detail .pushProduct .lignes-3,
#bot_like.list_detail .pushProduct .lignes-4,
#bot_like.list_detail .pushProduct .lignes-5,
#bot_like.list_detail .pushProduct .lignes-6 {
    height: 26px;
    -webkit-line-clamp: 2;
	font-size: 0.8em;
    line-height: 1.2em;
}
#bot_like.list_package .pushProduct .tf_fav_push {
	top: 6px;
    right: 6px;
    fill: #f12323;
    left: 80%;
    position: relative;
    float: left;
    z-index: 1;
}
#bot_like.list_package .pushProduct #logoGoo {
    top: 6px;
    left: -24px;
    position: relative;
    float: left;
}
#bot_like.list_detail .pushProduct #logoGoo {
	display: none;
}
#bot_like.list_detail .pushProduct .tf_fav_push {
	top: 2px;
    left: 2px;
    fill: #f12323;
    position: relative;
    float: left;
    /* z-index: 1;*/
}
#bot_like.list_detail .pushProduct .tf_fav_push svg {
	width: 28px;
    position: absolute;
}
#bot_like.list_detail .pushProduct {
	width: 98%;
	box-shadow: 0px 3px 6px rgba(0,0,0,0.05);
}
#bot_content .pushProduct .tf_fav_push {
	display: none;
}

.bot_results .list_package .actionPush {
	height: 282px;
}
.bot_results .list_detail .actionPush {
	height: 50px;
}
.bot_results .list_detail .pushProduct .lignes-3,
.bot_results .list_detail .actionPush .title {
	line-height: 1.1em;
	font-size: 0.8em;
}

.bot_results .list_detail .actionPush .title {
	height: 14px;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bot_results .list_detail .actionPush .lignes-3 {
	height: 26px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bot_results .list_detail .actionPush .text-xs-left {
	display: flex;
    justify-content: center;
    flex-direction: column;
    height: 50px;
	margin-right: 8px;
}
.bot_results .list_detail .selected .actionPush .text-xs-left {
	width: calc(100% - 160px);
    position: absolute;
    left: 134px;
}


#bot_preview.list_show {
	/*
	position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    height: 100%;
    width: 100%;
	*/
	position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    height: calc(100% - 72px);
    width: 100%;
    top: 58px;
}
#bot_preview.list_show iframe {
    border-radius: 6px;
    border: 0px;
    width: calc(100% - 28px);
    /*height: calc(100% - 66px);*/
	height: 100%;
	box-shadow: 0px 3px 12px rgba(0,0,0,0.3);
}




@media screen and (max-width: 414px){
	.WatchBox-reset{
		width: 36px;
		height: 36px;
		top: 8px;
		right: 50px;
	}
	.WatchBox-reset svg{
		width: 36px;
		height: 36px;
	}
	/*--- liste detail ---*/
	.list_detail.lignes-3 {
		height: 41px;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.list_detail .headline{
		font-size: 1.1em;
		line-height: 1.2em;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.list_detail .pushProduct {
		margin-right: 10px;
	}
	/*--- liste package ---*/
	.list_package .lignes-3 {
		font-size: 1.3em;
	}
	.list_package .headline{
		font-size: 1.4em;
		line-height: 1.1em;
	}
	#pushResultat {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 100vw;
		height: 100%;
	}
	.iframetContentResul {
		-webkit-overflow-scrolling: touch;
		overflow: auto;
		margin: 30px 0px 0px 0px;
		height: calc(100% - 30px);
	}
	#contentResultatInIframe {
		width: 100%;
		height: calc(100% - 35px);
		top: 35px;
		left: 100%;
	}
	#pushResultat .pushclose {
		right: 5px !important;
		top: 5px !important;
	}
	#pushResultat .pushclose:hover {
		right: 2px !important;
		top: 2px !important;
	}
	.list_package > div {
		width: 280px;
	}
}

#logoGoo {
	width: 34px;
    height: 34px;
    position: absolute;
    left: 8px;
	top: 8px;
	z-index: 2;
}




@media screen and (min-width: 320px){
	#bot_results .contenu_result {
		width: 92%;
	}
	.list_package > div {
        width: 280px;
    }
	.list_package .pushProduct .lignes-1-title,
	.list_package .pushProduct .lignes-2-title,
	.list_package .pushProduct .lignes-1,
	.list_package .pushProduct .lignes-2,
	.list_package .pushProduct .lignes-3,
	.list_package .pushProduct .lignes-4,
	.list_package .pushProduct .lignes-5,
	.list_package .pushProduct .lignes-6 {
		font-size: 1.2em;
		line-height: 1.3em;
	}
	.list_package .pushProduct .lignes-1 {
		height: 22px;
	}
	.list_package .pushProduct .lignes-2 {
		height: 36px;
	}
	.list_package .pushProduct .lignes-4 {
		height: 72px;
	}
	#bot_like #viewFav {
		margin-top: -36px;
	}
	#mydesk.position_bottom_middle .contenu_result.list_detail,
	#mydesk.position_bottom_right .contenu_result.list_detail,
	#mydesk.desk_Right .contenu_result.list_detail,
	#mydesk.position_bottom_middle .contenu_result.list_package,
	#mydesk.desk_Right .contenu_result.list_package,
	#mydesk.position_bottom_right .contenu_result.list_package{
		padding: 40px 0px 0px 20px !important;
	}

}
@media screen and (min-width: 375px){
	#bot_results .contenu_result {
		width: 90%;
	}
	.list_package > div {
        width: 280px;
    }
	.list_package .pushProduct .lignes-1-title,
	.list_package .pushProduct .lignes-2-title,
	.list_package .pushProduct .lignes-1,
	.list_package .pushProduct .lignes-2,
	.list_package .pushProduct .lignes-3,
	.list_package .pushProduct .lignes-4,
	.list_package .pushProduct .lignes-5,
	.list_package .pushProduct .lignes-6 {
		font-size: 1.2em;
		line-height: 1.3em;
	}
	.list_package .pushProduct .lignes-1 {
		height: 22px;
	}
	.list_package .pushProduct .lignes-2 {
		height: 36px;
	}
	.list_package .pushProduct .lignes-4 {
		height: 72px;
	}
	#bot_like #viewFav {
		margin-top: -36px;
	}
	#mydesk.position_bottom_middle .contenu_result.list_detail,
	#mydesk.position_bottom_right .contenu_result.list_detail,
	#mydesk.desk_Right .contenu_result.list_detail,
	#mydesk.position_bottom_middle .contenu_result.list_package,
	#mydesk.desk_Right .contenu_result.list_package,
	#mydesk.position_bottom_right .contenu_result.list_package{
		padding: 40px 0px 0px 20px !important;
	}
}
@media screen and (min-width: 425px){
	#mydesk.position_bottom_middle #bot_results .contenu_result {
		width: 86%;
	}
	#bot_results .contenu_result {
		width: 94%;
	}
	.list_package > div {
        width: 222px;
    }
	.list_package .pushProduct .lignes-1-title,
	.list_package .pushProduct .lignes-2-title,
	.list_package .pushProduct .lignes-1,
	.list_package .pushProduct .lignes-2,
	.list_package .pushProduct .lignes-3,
	.list_package .pushProduct .lignes-4,
	.list_package .pushProduct .lignes-5,
	.list_package .pushProduct .lignes-6 {
		font-size: 1.1em;
		line-height: 1.3em;
	}
	.list_package .pushProduct .lignes-1 {
		height: 22px;
	}
	.list_package .pushProduct .lignes-2 {
		height: 36px;
	}
	.list_package .pushProduct .lignes-4 {
		height: 82px;
	}

	.list_package .lignes-3 {
		height: 104px;
		-webkit-line-clamp: 6;
	}
	#bot_like #viewFav {
		margin-top: -36px;
	}
	#mydesk.position_bottom_middle .contenu_result.list_detail,
	#mydesk.position_bottom_right .contenu_result.list_detail,
	#mydesk.desk_Right .contenu_result.list_detail,
	#mydesk.position_bottom_middle .contenu_result.list_package,
	#mydesk.desk_Right .contenu_result.list_package,
	#mydesk.position_bottom_right .contenu_result.list_package{
		padding: 40px 0px 0px 20px !important;
	}
}
@media screen and (min-width: 768px){
	#mydesk.position_bottom_middle #bot_results .contenu_result {
		width: 86%;
	}
	#bot_results .contenu_result {
		width: 94%;
	}
	.list_package > div {
        width: 172px;
    }
	.list_package .lignes-3 {
		height: 104px;
		-webkit-line-clamp: 7;
	}
	#bot_like #viewFav {
		margin-top: -26px;
	}
	#mydesk.position_bottom_middle .contenu_result.list_detail,
	#mydesk.position_bottom_right .contenu_result.list_detail,
	#mydesk.desk_Right .contenu_result.list_detail,
	#mydesk.position_bottom_middle .contenu_result.list_package,
	#mydesk.desk_Right .contenu_result.list_package,
	#mydesk.position_bottom_right .contenu_result.list_package{
		padding: 22px 0px 0px 20px !important;
	}
}
@media screen and (min-width: 1024px){
	#mydesk.position_bottom_middle #bot_results .contenu_result {
		width: 86%;
	}
	#bot_results .contenu_result {
		width: 94%;
	}
	#bot_results .contenu_result {
		width: 94%;
	}
	.list_package > div {
        width: 222px;
    }
	.list_package .lignes-3 {
		height: 104px;
		-webkit-line-clamp: 6;
	}
	#bot_like #viewFav {
		margin-top: -26px;
	}
	#mydesk.position_bottom_middle .contenu_result.list_detail,
	#mydesk.position_bottom_right .contenu_result.list_detail,
	#mydesk.desk_Right .contenu_result.list_detail,
	#mydesk.position_bottom_middle .contenu_result.list_package,
	#mydesk.desk_Right .contenu_result.list_package,
	#mydesk.position_bottom_right .contenu_result.list_package{
		padding: 22px 0px 0px 20px !important;
	}
}
@media screen and (min-width: 1440px){
	#bot_results .contenu_result {
		width: 94%;
	}
	.list_package > div {
        width: 222px;
    }
	#bot_like #viewFav {
		margin-top: -26px;
	}
	#mydesk.position_bottom_middle .contenu_result.list_detail,
	#mydesk.position_bottom_right .contenu_result.list_detail,
	#mydesk.desk_Right .contenu_result.list_detail,
	#mydesk.position_bottom_middle .contenu_result.list_package,
	#mydesk.desk_Right .contenu_result.list_package,
	#mydesk.position_bottom_right .contenu_result.list_package{
		padding: 22px 0px 0px 20px !important;
	}
}

#bot_form, #bot_like, #bot_preview, #bot_content {
	position: absolute;
	width: 100%;
	overflow: auto;
    height: calc(100% - 64px);
}
    
#bot_like #viewFav {
    position: absolute;
}

#bot_like #viewFav .sort_type_icone.iconeListe,
#bot_like #viewFav .sort_type_icone.iconeBlock {
    cursor: pointer;
}



.list_show{}
.list_hide {
	display: none;
}
.gooResult {
   position:relative;
   bottom:2px;
   left:-119px;
   /*bottom:20px;
   left:-5px;*/
}
.list_package .gooResult {
 position:relative;
   bottom:208px; /* 227 */
   left:0px;
}

/*--- ratting star ---*/
#SATISTexteName {
	margin-bottom: 20px;
}
#SATISTexteName .rate {
    transform: rotate(180deg);
    /* float: left; */
    height: 30px;
    display: flex;
    /* right: 119px; */
    position: sticky;
    justify-content: flex-end;
}
#SATISTexteName .rate:not(:checked) > input {
	display: none;
}
#SATISTexteName .rate:not(:checked) > label {
    cursor: pointer;
    position: relative;
    margin-left: 0.9em;
    margin-right: 0.9em;
    margin-bottom: 0;
	margin-top: 1.5em;
    border-right: 0.3em solid transparent;
    border-bottom: 0.7em solid #ccc;
    border-left: 0.3em solid transparent;
    font-size: 14px;
	transform: rotate(180deg);
}
#SATISTexteName .rate:not(:checked) > label:before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: -1em;
    border-right: 1em solid transparent;
    border-bottom: 0.7em solid #ccc;
    border-left: 1em solid transparent;
    transform: rotate(-35deg);
}
#SATISTexteName .rate:not(:checked) > label:after {
    content: "";
    position: absolute;
    top: 0.6em;
    left: -1em;
    border-right: 1em solid transparent;
    border-bottom: 0.7em solid #ccc;
    border-left: 1em solid transparent;
    transform: rotate(35deg);
}
#SATISTexteName .rate > input:checked ~ label,
#SATISTexteName .rate > input:checked ~ label:before,
#SATISTexteName .rate > input:checked ~ label:after {
    border-bottom: 0.7em solid #fc0;   
}

#SATISTexteName .rate:not(:checked) > label:hover,
#SATISTexteName .rate:not(:checked) > label:hover:before,
#SATISTexteName .rate:not(:checked) > label:hover:after{
    border-bottom: 0.7em solid #fc0;
}

#SATISTexteName .rate:not(:checked) > label:hover ~ label,
#SATISTexteName .rate:not(:checked) > label:hover ~ label:before,
#SATISTexteName .rate:not(:checked) > label:hover ~ label:after {
    border-bottom: 0.7em solid #fc0;
}

/* ------ bouton dans le chat -----*/
#WatchBox-conversation .message_Agent .txtChat button {
	border: 1px solid;
    margin: 10px 10px 2px 0px;
    padding: 6px 18px;
    border-radius: 6px;
    background-color: #E74C3C;
	color: #ffffff;
}
#WatchBox-conversation .message_Agent .txtChat button.desactivate {
    background-color: #c9c9c9;
}

#WatchBox-conversation .messageAgent.disabled {
    -webkit-animation: fadeInFromNone 1.5s ease-out;
    -moz-animation: fadeInFromNone 1.5s ease-out;
    -o-animation: fadeInFromNone 1.5s ease-out;
    animation: fadeInFromNone 1.5s ease-out;
	display: none;
}
.messageAgent img.inactif {
	display:none !important;
}
.messageAgent .txtChat img {
	width: 100%;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: block;
        opacity: 1;
    }

    1% {
        display: block;
        opacity: 1;
    }

    100% {
        display: none;
        opacity: 0;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: block;
        opacity: 1;
    }

    1% {
        display: block;
        opacity: 1;
    }

    100% {
        display: none;
        opacity: 0;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: block;
        opacity: 1;
    }

    1% {
        display: block;
        opacity: 1;
    }

    100% {
        display: none;
        opacity: 0;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: block;
        opacity: 1;
    }

    1% {
        display: block;
        opacity: 1;
    }

    100% {
        display: none;
        opacity: 0;
    }
}

.tf_illustrationContext {
	width: 86px;
    height: 72px;
    background-size: cover;
    float: left;
    margin-right: 8px;
	margin-bottom: 4px;
	margin-top: 8px;
	margin-left: 5px;
    position: relative;
    background-position: center;
    border-radius: 4px;
	cursor: pointer;
	display: block !important;
}
.message_Agent .tf_illustrationContext {
	margin-top: 0px;
}

#showCTA a, #showCTAC2C a {
	font-weight: 700 !important;
    font-size: 1.2em !important;
	background-color: #e4002b;
    color: white !important;
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    width: 200px;
    border-radius: 6px;
    left: calc(50% - 100px);
    position: relative;
	text-decoration: none;
}

#WatchBox-MessageWrapper.contextAI textarea#WatchBox-message{
	padding-left: 84px;
}
#MessageWrapper_contextAI {
	z-index: 2;
	top: 4px;
    left: 28px;
    position: absolute;
	background-color: rgb(231,76,60);
	border-radius: 8px;
    cursor: pointer;
	caret-color: transparent;
}
#MessageWrapper_contextAI .illustrationContext {
	display: block;
    width: 46px;
    height: 46px;
    background-size: cover;
    float: left;
    position: relative;
    background-position: center;
	border-radius: 8px;
}
#MessageWrapper_contextAI .iconePlanet {
	fill: rgba(255, 255, 255, 0.6);
	margin-top: 3px;
    margin-left: 3px;
}


/*--- liste contextAi ---*/
#fondListContextAI {
	width: 100%;
    z-index: 50;
    position: absolute;
    height: calc(100% - 56px);
	backdrop-filter: blur(8px);
	background-color: RGBA(255, 255, 255, 0.8);
}
#showListContextAI {
    width: 100%;
    padding: 10px;
    height: 100%;
    display: flex;
    align-content: flex-end;
    flex-wrap: wrap;
}
#showListContextAI .tf_btnCloseListeContext {
	width: 28px;
    height: 28px;
    z-index: 2;
    position: relative;
    top: 16px;
    border: 1px #ccc solid;
    border-radius: 50%;
    /* width: 15px; */
    /* height: 15px; */
    left: calc(300px - 72px);
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(0, 0, 0.2, 1) 0s;
}
.tf_btnCloseListeContext {
  background-color: #fff;
}
.tf_btnCloseListeContext:hover {
  background-color: #eee;
}
.tf_btnCloseListeContext:before, .tf_btnCloseListeContext:after {
  position: absolute;
    left: 12px;
    content: ' ';
    height: 18px;
    width: 2px;
    top: 4px;
    background-color: #ccc;
}
.tf_btnCloseListeContext:before {
  transform: rotate(45deg);
}
.tf_btnCloseListeContext:after {
  transform: rotate(-45deg);
}

#ConteneurListAllContextAI {
	width: 100%;
    height: 80%;
	max-height: 320px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 8px;
    font-size: 0.9em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	margin-bottom: 8px;
}
#ListAllContextAI {
	width: 100%;
    display: flex;
    flex-direction: column;
	overflow: auto;
    height: calc(100% - 86px);
    background-color: #fafafa;
    padding: 12px;
}
#ListAllContextAI .tf_Context {
	display: flex;
    flex-direction: row;
    align-items: center;
	justify-content: space-between;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
	margin-bottom: 4px;
}
#ListAllContextAI .tf_Context:hover {
	background-color: #f1f1f1;
}
#ListAllContextAI .tf_Context.selected {
	background-color: #C0392B;
	color: #ffffff;
	cursor:	inherit;
	border: 1px solid #dadada;
}
.TitreListContextAI {}
.iconeHistoContextAI {}

#ListAllContextAI .tf_Context.selected .tf_illustrationListContext:before {
    content: "";
    display: block;
    background-image: var(--imageBot);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    border: 3px solid #fff;
    left: 24px;
    top: -6px;
}

.tf_illustrationListContext {
	width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
	margin-right: 2px;
	background-color: rgb(231,76,60);
}
.tf_illustrationListContext .iconePlanet {
	fill: rgba(255, 255, 255, 0.6);
	margin-top: 5px;
    margin-left: 5px;
}
.tf_Context.selected .iconePlanet {
	margin-top: -31px;
}

.tf_ContextTitle {
	width: calc(100% - 64px);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.tf_titleListContext {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 1.1em;
    padding: 8px;
}
.btn-newContext {
	color: #ffffff;
	background-color: #C0392B;
}

.tf_btn_allProduct {
	background-color: #C0392B;
}

/* --- menu messageBot ---*/
.happyunhappy {
	display: flex;
}

.happyunhappy .iconeThumb {
	margin-left: 8px;
    width: 24px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid rgba(231,76,60, 0.1);
    text-align: center;
    padding-top: 2px;
    font-size: 12px;
    cursor: pointer;
}

.infosMessageBot {
	display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    position: absolute;
    right: 12px;
	bottom: -12px;
	z-index: 2;
}
.tf_menuMessageBot {
    z-index: 5;
	margin-left: 8px;
	caret-color: transparent;
}
.tf_iconeMenuMessageBot {
    border-radius: 50%;
    border: 1px solid rgba(231,76,60, 0.1);
	display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
	width: 24px;
    height: 24px;
	background-color: #fff;
}
.tf_iconeMenuMessageBot svg {
    fill: rgb(231,76,60);
}
.tf_iconeMenuMessageBot.tf_close::before {
	content: "x";
    padding-bottom: 4px;
    font-size: 20px;
}
.tf_iconeMenuMessageBot.tf_open::before {
	font-size: 22px;
    content: "...";
    z-index: 100;
    padding-bottom: 14px;
}
.tf_contentMenuMessageBot.hide {
	display: none;
}
.tf_contentMenuMessageBot.show {
	border: 1px solid rgba(231,76,60, 0.1);
	border-radius: 8px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    background-color: #fff;
    width: calc(100% - 20px);
    padding-left: 6px;
    padding-bottom: 12px;
	padding-top: 6px;
    padding-right: 6px;
	position: absolute;
    bottom: 12px;
}
.tf_btnMenuMessageBot {
	display: flex;
    flex-direction: row;
	align-items: center;
    width: 100%;
    background-color: rgba(231,76,60, 0.08);
    border-radius: 4px;
    margin-bottom: 4px;
	cursor: pointer;
}
.tf_btnMenuMessageBot:hover {
    background-color: rgba(231,76,60, 0.12);
}
.tf_btnMenuMessageBot svg {
	padding-left: 4px;
    padding-right: 4px;
	padding-bottom: 2px;
    padding-top: 2px;
	fill: rgb(231,76,60);
}

/* --- menu message ---*/
.tf_menuMessage {
    border-radius: 14px;
    border: 2px solid #fff;
	display: flex;
    justify-content: center;
    align-items: center;
	z-index: 5;
}
.tf_menuMessage svg {
    fill: #ffffff;
}
.tf_menuMessage.tf_close {
	width: 24px;
    height: 24px;
    background-color: rgb(231,76,60);
}
.tf_menuMessage.tf_open {
	width: 200px;
    height: 300px;
	background-color: rgb(231,76,60);
}
#fondAttentBot {
    width: 100%;
    z-index: 50;
    position: absolute;
    height: 100%;
    backdrop-filter: blur(6px);
    background-color: RGBA(255, 255, 255, 0.5);
	display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
	display: none;
}
.isTyping_message_attente {
	
}
.WZagent-Bot-attente .WatchBox-istyping > div {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    margin-left: 4px;
}
.WZagent-Bot-attente {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.WZagent-Bot-attente:after {
    content: "Loading";
    position: absolute;
    left: calc(50% - 28px);
    top: calc(50% - 10px);
    color: #898989;
}

.tf_chargeCard {
	width: 186px;
    min-width: 186px;
    margin-right: 16px;
    border-radius: 8px;
    height: 320px;
    margin-top: 0px;
    display: flex;
    background-color: rgba(0,0,0,0.4);
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}
#closeArrow a:not([href]) {
    cursor: inherit;
}
#ListAllContextAI div:empty,
.tf_chargeCard div:empty {
	display:block;
}

.tf_Card .tf_chargeCard {
	width: 170px;
    min-width: 170px;
    height: 280px;
}
.tf_Card .tf_chargeCard.selected {
	width: 186px;
    min-width: 186px;
	height: 320px;
}
.tf_Card.tf_efface {
	animation-name: effaceCard; 
	animation-duration: 3s; 
	animation-fill-mode: forwards; 
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}
@keyframes effaceCard{
	0% {
		opacity:1;
		width: 186px;
		min-width: 186px;
	}
	90% {
		opacity:0;
		width: 186px;
		min-width: 186px;
	}
	100% {
		opacity:0;
		width: 0px;
		min-width: 0px;
		display:none;
	}
}
/**
 * ==============================================
 * AI loader
 * ==============================================
 */
:root {
  --size: 70px;
  --speed: 4s;
}

.tf_loader_bot {
  width: var(--size);
  height: var(--size);
}

.tf_loader_bot .loader__inner {
  position: absolute;
  display: block;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  box-shadow: 
    0 -10px 0 0 rgba(255,77,64, .6),
    -7.5px 5px 0 0 rgba(0,121,107, .6),
    7.5px 5px 0 0 rgba(0,150,136, .6);
  animation: rotate var(--speed) linear infinite;
}
.tf_loader_bot .loader__inner:nth-child(2) {
  box-shadow: 
    7.5px -5px 0 0 rgba(49,27,146, .6),
    -7.5px -5px 0 0 rgba(81,45,168, .6),
    0 10px 0 0 rgba(103,58,183, .6);
  animation: rotate__other var(--speed) linear infinite;
}
@keyframes rotate {
  50% {
    transform: scale(1.4) rotate(360deg);
  }
  100% {
    transform: scale(1) rotate(720deg);
  }
}

@keyframes rotate__other {
  50% {
    transform: scale(1.5) rotate(-360deg);
  }
  100% {
    transform: scale(1) rotate(-720deg);
  }
}
 
/**
 * ==============================================
 * Dot Bricks
 * ==============================================
 */
.dot-bricks {
  position: relative;
  top: 8px;
  left: -9999px;
  width: 8px;
  height: 8px;
  background-color: #fff;
  color: #fff;
  box-shadow: 9991px -16px 0 0, 9991px 0 0 0, 10007px 0 0 0;
  animation: dot-bricks 4s infinite ease-in-out;
}

@keyframes dot-bricks {
  0% {
    box-shadow: 9991px -16px 0 0, 9991px 0 0 0, 10007px 0 0 0;
  }
  8.333% {
    box-shadow: 10007px -16px 0 0, 9991px 0 0 0, 10007px 0 0 0;
  }
  16.667% {
    box-shadow: 10007px -16px 0 0, 9991px -16px 0 0, 10007px 0 0 0;
  }
  25% {
    box-shadow: 10007px -16px 0 0, 9991px -16px 0 0, 9991px 0 0 0;
  }
  33.333% {
    box-shadow: 10007px 0 0 0, 9991px -16px 0 0, 9991px 0 0 0;
  }
  41.667% {
    box-shadow: 10007px 0 0 0, 10007px -16px 0 0 #fff, 9991px 0 0 0;
  }
  50% {
    box-shadow: 10007px 0 0 0, 10007px -16px 0 0 #fff, 9991px -16px 0 0;
  }
  58.333% {
    box-shadow: 9991px 0 0 0, 10007px -16px 0 0 #fff, 9991px -16px 0 0;
  }
  66.666% {
    box-shadow: 9991px 0 0 0, 10007px 0 0 0, 9991px -16px 0 0;
  }
  75% {
    box-shadow: 9991px 0 0 0, 10007px 0 0 0, 10007px -16px 0 0;
  }
  83.333% {
    box-shadow: 9991px -16px 0 0, 10007px 0 0 0 , 10007px -16px 0 0;
  }
  91.667% {
    box-shadow: 9991px -16px 0 0, 9991px 0 0 0, 10007px -16px 0 0;
  }
  100% {
    box-shadow: 9991px -16px 0 0, 9991px 0 0 0, 10007px 0 0 0;
  }
}

/**
 * ==============================================
 * info changement context
 * ==============================================
 */
 /* si tool tips est activé par la class "active" */
.infoContext {
  background-color: rgb(231,76,60);
  border-radius: 6px;
  color: #fff;

  min-width: 260px;
  width: calc(300px - 50px);
  text-align: left;
  font-weight: 100;
  text-transform: none;
  padding-left: 10px;
  padding-right: 6px;
  padding-top: 4px;
  padding-bottom: 4px;
  z-index: -1;
  height: 1px;
  left: 28px;
  position: absolute;
  opacity: 0;
  transform: translate3d(0, 0px, 0);
  transition: transform 130ms ease 0ms;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.infoContext div {
	  /* --- coupe le text si trp long --- */
    height: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.infoContext[data-infoContext-position="top"]::before {
    content: " ";
    border-top: 10px solid rgb(231,76,60);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    left: 16px;
    top: 100%;
    position: absolute;
}
.infoContext.active {
  opacity: 1;
  transform: translate3d(0%, 0px, 0);
  transition: opacity 190ms ease 0ms, transform 130ms ease 0ms;
  transform-style: preserve-3d;
  bottom: 66px;
  height: 101%;
  display: inline-table;
}
.infoContext #cloreConv {
	background-color: rgb(192,57,43);
	margin: 4px 8px 8px 8px;
}

/**
 * ==============================================
 * Tool tips
 * ==============================================
 */
 
 /* --- tooltips spécial jauge produit --- */
 /* --- avec mise en page du text --- */
 .tf_tooltip p {
	color: #ffffff;
	font-size: 0.8em !important;
	font-weight:200 !important;
}

.tf_tooltip {
	max-width: 180px;
    min-width: 158px;
	opacity: 0;
    padding:8px;
	border-radius:3px;
	position:absolute;
	box-shadow:1px 1px 10px 0 #ccc;
	margin: 300px 0 0 -6px;
	background:rgb(231,76,60);
	-webkit-transition:margin .5s ease-in-out, opacity .2s ease-in-out;
	-moz-transition:margin .5s ease-in-out, opacity .2s ease-in-out;
	z-index:2;
}
.tf_tooltip .arrow {
	position:absolute;
	margin:-18px 0 0px 8px;
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid rgb(231,76,60);
}

.tf_gaugeMatch:hover .tf_tooltip {
    margin:38px 0 0 -6px;
	opacity: 1;
    -webkit-transition: margin .10s ease-in-out, opacity .3s ease-in-out;
	-moz-transition: margin .10s ease-in-out, opacity .3s ease-in-out;

}
 
 
/* --- tool-tips classic sans mise en forme du text --- */
/* si tool tips est activé par la class "active" */
.tool-tip.tool-tip-contextAI.active::after {
  background-color: rgb(231,76,60);
  border-radius: 6px;
  color: #fff;
  content: attr(data-tooltip-title) " ";
  font-weight: normal;
  min-width: 260px;
  width: calc(300px - 50px);
  height: calc(100% + 14px);
  text-align: left;
  font-weight: 100;
  text-transform: none;
  /*text-transform: uppercase;*/
  margin-left: 16px;
  padding-left: 60px;
  padding-top: 4px;
  opacity: 1;
  z-index: 100;
  transform: translate3d(-50%, 50px, 0);
  display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tool-tip.tool-tip-contextAI.active::before {
	width: 46px;
    height: 46px;
	margin: 4px 0px 0 4px; 
    border: 4px solid #fff;
  opacity: 1;
  z-index: 101;
}
.illustrationContext.active {
	border: 2px solid rgb(231,76,60);
}

/* sinon c'est au survole qu'il s'active*/
.tool-tip.tool-tip-contextAI::after {
  background-color: rgb(231,76,60);
  border-radius: 6px;
  color: #fff;
  content: " ";
  font-weight: normal;
  min-width: 300px;
  width: calc(300px - 50px);
  height: 0;
  text-align: left;
  font-weight: 100;
  text-transform: none;
  /*text-transform: uppercase;*/
  margin-left: 20px;
  padding-left: 66px;
	padding-top: 0px;
	line-height: 1.2;
}

.tool-tip.tool-tip-contextAI::before {
  content: "";
    display: block;
    background-image: var(--imageBot);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 0px;
    height: 0px;
    border-radius: 50%;
    left: 50%;
    margin: 0px; 
    border: 0px;
}

.tool-tip.tool-tip-contextAI::before,
.tool-tip.tool-tip-contextAI::after {
  position: absolute;
  transition: height 50ms ease 0ms, opacity 150ms ease 0ms, transform 150ms ease 0ms;
  transform-style: preserve-3d;
  opacity: 0;
  z-index: -1;
}

.tool-tip[data-tooltip-position="top"]::after {
  left: 150px;
}
.tool-tip[data-tooltip-position="bottom"]::after {
  left: 50%;
}

.tool-tip[data-tooltip-position="top"]::after {
  transform: translate3d(-50%, 10px, 0);
}

.tool-tip[data-tooltip-position="bottom"]::after {
  transform: translate3d(-50%, -10px, 0);
}

.tool-tip[data-tooltip-position="top"]::after {
  bottom: calc(100% + 10px);
}

.tool-tip[data-tooltip-position="bottom"]::after {
  top: calc(100% + 10px);
}

.tool-tip[data-tooltip-position="left"]::after,
.tool-tip[data-tooltip-position="right"]::after {
  top: 50%;
}

.tool-tip[data-tooltip-position="left"]::after {
  transform: translate3d(10px, -50%, 0);
}

.tool-tip[data-tooltip-position="right"]::after {
  transform: translate3d(-10px, -50%, 0);
}

.tool-tip[data-tooltip-position="left"]::after {
  right: calc(100% + 10px);
}

.tool-tip[data-tooltip-position="right"]::after {
  left: calc(100% + 10px);
}


/* Pointers */

.tool-tip[data-tooltip-position="bottom"]::before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  left: 50%;
}

.tool-tip[data-tooltip-position="top"]::before {
  transform: translate3d(-50%, 10px, 0);
}

.tool-tip[data-tooltip-position="bottom"]::before {
  transform: translate3d(-50%, -10px, 0);
}

.tool-tip[data-tooltip-position="top"]::before {
  /*border-top: 7px solid #323a45;*/
  bottom: calc(100% + 16px);
}

.tool-tip[data-tooltip-position="bottom"]::before {
  border-bottom: 7px solid #323a45;
  top: calc(100% + 3px);
}

.tool-tip[data-tooltip-position="left"]::before,
.tool-tip[data-tooltip-position="right"]::before {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  top: 50%;
}

.tool-tip[data-tooltip-position="left"]::before {
  transform: translate3d(10px, -50%, 0);
}

.tool-tip[data-tooltip-position="right"]::before {
  transform: translate3d(-10px, -50%, 0);
}

.tool-tip[data-tooltip-position="left"]::before {
  border-left: 7px solid #323a45;
  right: calc(100% + 3px);
}

.tool-tip[data-tooltip-position="right"]::before {
  border-right: 7px solid #323a45;
  left: calc(100% + 3px);
}

.tool-tip:hover::before,
.tool-tip:hover::after {
  opacity: 1;
}
.tool-tip.tool-tip-contextAI:hover::before{
	width: 46px;
    height: 46px;
	margin: 4px 0px 0 2px; 
    border: 4px solid #fff;
	z-index: 101;
}
.tool-tip.tool-tip-contextAI:hover::after {
  content: attr(data-tooltip-title) " ";
  height: calc(100% + 14px);
  /*padding: 3px 8px;*/
  z-index: 100;
  margin-left: 16px;
  padding-left: 66px;
  padding-top: 4px;
}



.tool-tip[data-tooltip-position="top"]:hover::before,
.tool-tip[data-tooltip-position="bottom"]:hover::before,
.tool-tip[data-tooltip-position="top"]:hover::after,
.tool-tip[data-tooltip-position="bottom"]:hover::after {
  transform: translate3d(-50%, 0px, 0); 
}

.tool-tip[data-tooltip-position="left"]:hover::before,
.tool-tip[data-tooltip-position="right"]:hover::before,
.tool-tip[data-tooltip-position="left"]:hover::after,
.tool-tip[data-tooltip-position="right"]:hover::after {
  transform: translate3d(0px, -50%, 0);
}

.wz_tobemoderated {
	/*display:none;*/opacity: 0.3;
}
.wz_moderated {
	display:block;
}

/*
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover::before,
.rate:not(:checked) > label:hover::after,
.rate:not(:checked) > label:hover ~ label,
.rate:not(:checked) > label:hover ~ label:before,
.rate:not(:checked) > label:hover ~ label:after {
    border-bottom: 0.7em solid #fc0;
}

.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > input:checked ~ label:hover ~ label:before,
.rate > input:checked ~ label:hover ~ label:after,
.rate > label:hover ~ input:checked ~ label,
.rate > label:hover::before ~ input:checked ~ label,
.rate > label:hover::after ~ input:checked ~ label,
.rate > label:hover ~ input:checked ~ label:befor,
.rate > label:hover ~ input:checked ~ label:after {
	border-bottom: 0.7em solid #c59b08;
}
*/