textarea.ui-input-text.ui-textinput-autogrow {
overflow:scroll;
}

::-webkit-scrollbar {
    height: 12px;
	width: 12px;
	background: white;
	border-radius:10px;
    }
::-webkit-scrollbar-thumb {
    background: white;
    -webkit-border-radius: 1ex;
}
::-webkit-scrollbar-corner {
    background: white;
    border-radius:10px;
}

.ProceedToCheckout .PayPalExpressCheckout:last-child {
display:none;
}

.ui-popup {
    border-radius: 10px !important;
}
// * -ms-overflow-style: none !important;  // Internet Explorer 10+
// * scrollbar-width: none !important;  // Firefox

.scrollbarWeb::-webkit-scrollbar {
    background: white;  
    width:10px;
    height:10px;
}


.scrollbarWeb::-webkit-scrollbar-thumb {
     background: #bdbdbd;
}


.scrollbarNone::-webkit-scrollbar {
   display:none;
}

.question {
    padding: 10px;
    font-weight: 300;
    font-size: 18px;
    cursor: pointer;
}

.reponse {
    display: none;
    font-size: 15px;
}
     .transparent-btn {
            position: relative;
            width: 50px;
            height: 50px;
            border: 3px solid #d3d3d3;
            border-radius: 50%; 
            cursor: pointer;
            background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%),
                              linear-gradient(45deg, #ccc 25%, #fff 25%, #fff 75%, #ccc 75%);
            background-size: 20px 20px;
            background-position: 0 0, 10px 10px;
        }

     
        .transparent-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%; 
            height: 3px;
            background-color: red;
            transform: translate(-50%, -50%) rotate(-45deg); 
            transform-origin: center;
        }

.switchButton {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
  background-color: #6bccd0;
  border-radius: 2px;
}
.sliderButton {
  border-radius: 50%;
   position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
}
.offButton {

  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.onButton {

  -webkit-transition: .4s;
  transition: .4s;
    -webkit-transform: translateX(55px);
  -ms-transform: translateX(55px);
  transform: translateX(55px);
}

.offButtonText {
	color:white;
	text-align:right;
	padding:6px;
	padding-right:10px;
	
}
.onButtonText {
	color:white;
	text-align:left;
	padding:6px;
	padding-left:10px;
	
}

.titreRubrique {
	font-weight: 300;
	font-size: 22px;
}

.lds-dual-ring {
  display: inline-block;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 84px;
  height: 84px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #6bccd0;
  border-color: #6bccd0 transparent #6bccd0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.slideInAnimation {
  -webkit-animation: slideIn 0.2s forwards;
  -moz-animation: slideIn 0.2s forwards;
  animation: slideIn 0.2s forwards;
}

@-webkit-keyframes slideIn {
  0% {
    transform: translateX(500px);
  }
  100% {
    transform: translateX(0);
  }
}


.slideOutAnimation {
  -webkit-animation: slideOut 0.1s forwards;
  -moz-animation: slideOut 0.1s forwards;
  animation: slideOut 0.1s forwards;
}

@-webkit-keyframes slideOut {
  0% {
    transform: translateX(-500px);
  }
  100% {
    transform: translateX(0);
  }
}



#toastLight {
 
  min-width: 150px; /* Set a default minimum width */
  background-color: #6bccd0; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  z-index: 10; /* Add a z-index if needed */
  bottom: 165px; /* 30px from the bottom */
  -webkit-animation: fadeout 2s;
  animation:  fadeout 2s;
}


 @keyframes 
fadeout {  0% {
 opacity: 1;
}
 30% {
opacity: 1;
}

100% {
opacity: 0;
}
}

.card_field {
	background-color: white;
	height: 40px;

}


.card_field::placeholder {
	color:#c0c0c0;
}


.modalGreet {
  perspective: 2000px;
  z-index: 2;
  top: 5px;
  display: none;
}
 
 
 

.cardtroisd {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-size: 40px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}



 

#greetPage1, #greetPage2, #greetPage3, #greetPage4, #greetPage5 {
  position: absolute;
  box-sizing: border-box;
  
}

#greetPage1 {
  text-align: center;
  cursor: pointer;
  z-index: 3;
  transform-origin: 0% 50%;
  transform: rotateY(0deg);
    backface-visibility: hidden;
  
}

#greetPage2, #greetPage3, #greetPage4 {
  width: 600px;
}

#greetPage2 {
  transform-origin: 50% 50%;
}

.backGreetOpen {
  transform-origin: 50% 50%;
  transform: rotateY(-180deg);
}

.openedGreetSemi {
  transform-origin: 50% 50%;
  transform: rotateY(100deg);
}

.left190 {
	left: -150px;
}
#greetPage2 .contentGreet { transform: rotateY(190deg); }

.greetPage1-open { animation: greetPage1open 0.4s forwards ease-in-out;}
.greetPage1-close { animation: greetPage1close 0.4s forwards ease-in-out;}

.greetPage2-open { animation: greetPage2open 0.4s forwards ease-in-out;}
.greetPage2-close { animation: greetPage2close 0.4s forwards ease-in-out;}

.greetPage2-openTotal { animation: greetPage2openTotal 0.4s forwards ease-in-out; }
.greetPage2-openTotalBack { animation: greetPage2openTotalFullback 0.4s forwards ease-in-out; }


.greetPage2-closeTotal { animation: greetPage2closeTotal 0.4s forwards ease-in-out; }
.greetPage2-verycloseTotal { animation: greetPage2verycloseTotal 0.4s forwards ease-in-out; } 

.greetPage3-openSemi { animation: greetPage3openSemi 0.4s forwards ease-in-out; }
.greetPage3-closeSemi { animation: greetPage3closeSemi 0.4s forwards ease-in-out; }


.greetPage3-openFinal { animation: greetPage3openFinal 0.4s forwards ease-in-out; }
.greetPage3-closeFinal { animation: greetPage3closeFinal 0.4s forwards ease-in-out; }


.modal-slide { animation: modalslide 0.4s forwards ease-in-out; }

.back-close { animation: backGreet 0.4s forwards reverse ease-in-out; }


.greetPage4-final { animation: greetPage4final 0.4s forwards ease-in-out; }
.greetPage4-final2 { animation: greetPage4final2 0.4s forwards ease-in-out; }
.greetPage4-ouverture { animation: greetPage4ouverture 0.4s forwards ease-in-out; }



.greetPage5-arrivee { animation: greetPage5arrivee 0.4s forwards ease-in-out; }
.greetPage5-arriveeBack { animation: greetPage5arriveeBack 0.4s forwards ease-in-out; }

 @keyframes 
modalslide {  0% {
 left: 0px;
}
 100% {
 left: -50px;
}
}

 @keyframes 
greetPage1open {  0% {
 transform: rotateY(0deg);
}
 100% {
 transform: rotateY(-100deg);
}
}

 @keyframes 
greetPage1close {  0% {
 transform: rotateY(-100deg);
 }
 100% {
transform: rotateY(0deg);
}
}


@keyframes 
greetPage2open {  0% {
 transform: rotateY(360deg);
}
 100% {
 transform: rotateY(263deg);
 }
}
@keyframes 
greetPage2close {  0% {
 transform: rotateY(263deg);
}
 100% {

 transform: rotateY(360deg);
}
}
@keyframes 
greetPage2openTotal {  0% {
 transform: rotateY(-100deg);
 left:-50%;
}
 100% {
 transform: rotateY(-180deg);
 left:0%;
}
}

@keyframes 
greetPage2verycloseTotal {  0% {
 transform: rotateY(-180deg);
 left:0%;
}
 100% {
 
  transform: rotateY(-100deg);
 left:-50%;

}
}

@keyframes 
greetPage2openTotalFullback {  0% {
 transform: rotateY(-100deg);
}
 100% {
 transform: rotateY(-180deg)}
}
}


@keyframes 
greetPage2closeTotal {  0% {

 transform: rotateY(-180deg);
 left:0%;
}
 100% {

  transform: rotateY(-100deg);
 left:-50%;
}
}



@keyframes 
greetPage3openSemi {  0% {
 transform: rotateY(0deg);
 left:-50%;
}
 100% {
  transform: rotateY(-80deg);
   left:-3px;
  
}
}

@keyframes 
greetPage3closeSemi {  0% {
  transform: rotateY(-80deg);
   left:-5px;
}
 100% {

   transform: rotateY(0deg);
 left:-50%;
}
}


@keyframes 
greetPage3openFinal {  0% {
  transform: rotateY(-80deg);
}
 100% {
  transform: rotateY(-180deg);
}
}

@keyframes 
greetPage3closeFinal {  0% {
  transform: rotateY(-180deg);

}
 100% {
  transform: rotateY(-80deg);
}
}

@keyframes 
greetPage4final {  0% {
  transform: rotateY(80deg);
  z-index:5;
}
 100% {
  transform: rotateY(0deg);
    z-index:5;
   }
}

@keyframes 
greetPage4ouverture {  0% {
  transform: rotateY(0deg);
  z-index:5;
}
 100% {
  transform: rotateY(100deg);
    z-index:5;
}
}

@keyframes 
greetPage4final2 {  0% {
  transform: rotateY(0deg);
  z-index:5;
}
 100% {
  transform: rotateY(100deg);
    z-index:5;
   }
}



@keyframes 
greetPage5arrivee {  0% {
 top:-50%;
}
 100% {
  top:1%;
}
}

@keyframes 
greetPage5arriveeBack {  0% {
  top:1%;
}
 100% {

   top:-60%;
}
}

@media only screen and (min-width:500px) {


	
.contentGreetZone {
	width:376px;
	height: 381px;
	margin:0 auto;
	
}

.modalGreet {
  perspective: 2000px;
  z-index: 2;
  top: 60px;
  display: none;
}
 

#greetPage1, #greetPage2, #greetPage3, #greetPage4, .greetPage5 {

  height: 381px;
  position: absolute;
  box-sizing: border-box;
  
}

#greetPage1 {
   width:376px;
  text-align: center;
  cursor: pointer;
  z-index: 3;
  backface-visibility: hidden;
  transform-origin: 0% 50%;
  transform: rotateY(0deg);
}

#greetPage2, #greetPage3, #greetPage4 {
  width: 752px;
}

#greetPage2 {
  transform-origin: 50% 50%;
  transform: rotateY(-100deg);
}

.backGreetOpen {
  transform-origin: 50% 50%;
  transform: rotateY(-180deg);
}

.greetPage3openSemi {
  transform-origin: 50% 50%;
  transform: rotateY(100deg);
}

.left190 {
	left: -190.5px;
}
#greetPage2 .contentGreet { transform: rotateY(190deg); }

.greetPage1-open { animation: greetPage1open 0.4s forwards ease-in-out; }

.greetPage2-open { animation: greetPage2open 0.4s forwards ease-in-out; }
.greetPage2-openTotal { animation: greetPage2openTotal 0.4s forwards ease-in-out; }

.greetPage3-openSemi { animation: greetPage3openSemi 0.4s forwards ease-in-out; }
.greetPage3-openFinal { animation: greetPage3openFinal 0.4s forwards ease-in-out; }

.modal-slide { animation: modalslide 0.4s forwards ease-in-out; }

.back-close { animation: backGreet 0.4s forwards reverse ease-in-out; }



.greetPage4-final { animation: greetPage4final 0.4s forwards ease-in-out; }
.greetPage4-final2 { animation: greetPage4final2 0.4s forwards ease-in-out; }
.greetPage4-ouverture { animation: greetPage4ouverture 0.4s forwards ease-in-out; }


.greetPage5-arrivee { animation: greetPage5arrivee 0.4s forwards ease-in-out; }

 @keyframes 
modalslide {  0% {
 left: 0px;
}
 100% {
 left: -50px;
}
}

 @keyframes 
greetPage1open {  0% {
 transform: rotateY(0deg);

}
 
 100% {
 transform: rotateY(-100deg);
}
}

@keyframes 
greetPage2open {  0% {
 transform: rotateY(360deg);
}
 50% {

}
 100% {
 transform: rotateY(260deg);
}
}

@keyframes 
greetPage2openTotal {  0% {
 transform: rotateY(-100deg);
 left:-50%;
}
 100% {
 transform: rotateY(-180deg);
 left:0%

}
}


@keyframes 
greetPage3openSemi {  0% {
 transform: rotateY(0deg);
 left:-50%;
}
 100% {
  transform: rotateY(-80deg);}
  left:0%;
}
}

@keyframes 
greetPage3openFinal {  0% {
  transform: rotateY(-80deg);
}
 100% {
  transform: rotateY(-180deg);
}
}

@keyframes 
greetPage4final {  0% {
  transform: rotateY(80deg);
  z-index:5;
}
 100% {
  transform: rotateY(0deg);
    z-index:5;
}
}

@keyframes 
greetPage4ouverture {  0% {
  transform: rotateY(0deg);
  z-index:5;
}
 100% {
  transform: rotateY(100deg);
    z-index:5;
}
}

@keyframes 
greetPage4final2 {  0% {
  transform: rotateY(0deg);
  z-index:5;
}
 100% {
  transform: rotateY(100deg);
    z-index:5;
   }
}


@keyframes 
greetPage5arrivee {  0% {
 top:-50%;
}
 100% {
  top:1%;
 
}
}
}
/* -----------------------------------------------------------------*/
.StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}





button.emoji-picker__category-button {
	padding:0px;
}

.emoji-picker__emojis::-webkit-scrollbar {
    background: #f4f4f4 !important;  
    width:10px !important;  
    height:10px !important;  
}

.emoji-picker__emojis::-webkit-scrollbar-thumb {
     background: #bdbdbd !important;  
}
.emoji-picker__emojis::-webkit-scrollbar-corner {
    background: #f4f4f4 !important;  
}
.button.emoji-picker__category-button {
	padding: 0px;
}
.emoji-picker__emoji {
	width: 1.4em !important;
}
.wrapper {
	z-index:99999;
}
.ui-resizable-helper { 
	border-bottom: 2px dotted #00F;
  	border-right: 2px dotted #00F; 
  }


.speech-bubble {
	position: relative;
	background: white;
	border-radius:24px;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 11px solid transparent;
	border-left-color: white;
	border-right: 0;
	margin-top: -11px;
	margin-right: -9px;
	
}

.speech-bubbleLeft {
	position: relative;
	background: white;
	border-radius:24px;
}

.speech-bubbleLeft:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 11px solid transparent;
	border-right-color: white;
	border-left: 0;
	margin-top: -11px;
	margin-left: -11px;
}

.diamond {
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-bottom-color: red;
      position: relative;
      top: -50px;
}

.diamond:after {
      content: '';
      position: absolute;
      left: -50px;
      top: 50px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-top-color: red;
}
  
.material-icons.white { color: #FFFFFF; }




#choixlistpaysPopupContentUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#choixlistpaysPopupContentUL li .onecountry {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: white; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 15px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
  height: 22px;
  cursor:pointer;
}

#choixlistpaysPopupContentUL li .onecountry:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}

#addressCountryListSelect-listbox::-webkit-scrollbar {
    background: white;  
}
#addressCountryListSelect-listbox::-webkit-scrollbar-thumb {
     background: #bdbdbd;
}

#choixlistpaysPopupSearchInput {
    color: inherit;
    text-shadow: inherit;
    border:0px;
    border-bottom: 1px solid #cacaca;
    margin: 0;
    min-height: 2.2em;
    text-align: left;
    background: transparent none;
    -webkit-appearance: none;
    -webkit-border-radius: inherit;
    border-radius: 0px;
        padding: .4em;
    line-height: 1.4em;
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    font-size: 1em;
    font-family: "Helvetica Neue",sans-serif;
}
.zone1 {
	font-size:13px !important;
	
}
.toastDesktop {
	max-width: 530px !important;
	margin : 0 auto !important;
}
.toastItemDesktop {
	border-top: 2px solid white !important;
	border-bottom: 2px solid white !important;
}

 #image_file_input {position:absolute; top:-100px;}

#nameGiropay::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #b7b7b7;
  opacity: 1; /* Firefox */
}

#accountholder-name::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #b7b7b7;
  opacity: 1; /* Firefox */
  border-radius:0px;
}

#emailSepa::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #b7b7b7;
  opacity: 1; /* Firefox */
  border-radius:0px;
  
}

.ui-inputcustom-Giropay {
    background: white;
    border: 0px solid;
      border-radius:0px;
    
}

input[type=email],input[type=password],input[type=text] {
    background: white;
    border: none;
    border-bottom: 1px solid #000000;
}
.ui-selectmenu{
    height: 440px;
    max-height: 440px;
    width: 300px;
    overflow-y:scroll;
}
.ui-selectmenu-open{
        max-height: 420px;
        overflow-y: scroll;
    }
.ui-input-search.ui-input-has-clear .ui-btn.ui-input-clear {
	
	margin: -10px .3125em 0;
	
}

#searchContactInputCardsSent::placeholder { /* #d6d6d6 Chrome, Firefox, Opera, Safari 10.1+ */
  color: #d6d6d6;
  opacity: 1; /* Firefox */
}

#searchContactInputCardsSent:-ms-input-placeholder{ /* Internet Explorer 10-11 */
  color: #d6d6d6;
}

#searchContactInputCardsSent::-ms-input-placeholder{ /* Microsoft Edge */
  color: #d6d6d6;
}
#searchContactInputPhoneBook::placeholder { /* #d6d6d6 Chrome, Firefox, Opera, Safari 10.1+ */
  color: #d6d6d6;
  opacity: 1; /* Firefox */
}

#searchContactInputPhoneBook:-ms-input-placeholder{ /* Internet Explorer 10-11 */
  color: #d6d6d6;
}

#searchContactInputPhoneBook::-ms-input-placeholder{ /* Microsoft Edge */
  color: #d6d6d6;
}
.positionSelecteurPays {
	
	top:115px !important;
	position: fixed;
}

.flag-icon-fr {
    background-repeat: no-repeat;
    background-position: 6% center;
    padding-left: 30% !important;
}

.flag-icon-commun {
    background-repeat: no-repeat;
    background-position: 6% center;
    padding-left: 30% !important;
}
.ui-corner-all {
    -webkit-border-radius: 0;
    border-radius: 0;
}
.ui-collapsible-themed-content .ui-collapsible-content {
    border-bottom-width: 0px;
    background-color: #ececec !important;
}
.ui-popup-screen {
position : fixed;	
}


.ui-resizable-se {
  background: url("../images/resizeIcon.png"); 
  width:32px;
  height: 32px;
  right: -30px;
  bottom: -30px;
}


.ui-rotatable-handle {
   
    cursor: pointer;
    background-size: cover;
    background-image: url("../images/rotateIcon.png");
    background-size: 100%;

}

body{
    padding-top: constant(safe-area-inset-top); /*for iOS 11.2*/
    padding-top: env(safe-area-inset-top);/*for iOS 11.1*/
}

.ripple {
  background-position: center;
  transition: background 0s;
  padding-bottom: 11px;
  padding-top: 8px;
}

.rippleText {
	
	font-size:43px !important;
}
.rippleImage {
	width:36px;
	height:36px;
}





/* Button style */
button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  color: white;
  background-color: #2196f3;
  outline: none;
}


.ui-panel {
	width: 17em;
}
.tipsImage {
	clear:both;
	padding-top:5px ;
	width:300px;
	margin:0 auto;
	
}
.tipsMsg {
	clear:both;
	padding:10px;
	font-size:16px;
	margin-top:20px;
	color:white;

}

.bubbleMe {
	position: relative;
	background: #6bccd0;
	border-radius: .4em;
}

.bubbleMe:after {
	content: '';
	position: absolute;
	top: 0;
	left: 80%;
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-bottom-color: #6bccd0;
	border-top: 0;
	margin-left: -30px;
	margin-top: -18px;
}

.bubbleMeTips {
	position: relative;
	background: #6bccd0;
	border-radius: .4em;
}

.bubbleMeTips:after {
	  content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: #6bccd0 transparent;
    border-width: 15px 15px 0;
    bottom: -15px;
    left: 84%;
    margin-left: -15px;
}
.cadreLeger, .greetcadreLeger {
	position: absolute;
    z-index: 9;
    border: 1px solid white;
    pointer-events: none;
    visibility: hidden;
}

.menuLabel {
	padding-bottom:80px;
	clear:both;
	padding-top: 20px;
	font-size:35px;
	font-weight:300;
	text-align:center;
	color:#6bccd0;
	
}

	
.menuPrincipalZone {
	margin: 10px;
	font-weight: normal;
	clear:both;
	padding:10px;
	border-bottom:1px solid #cacaca;
}	
.menuZone {
	margin: 10px;
	font-weight: normal;
	clear:both;
	padding:10px;
	border-top:1px solid #cacaca;
}
.menuZoneMenu {
	margin: 10px;
	font-weight: normal;
	clear:both;
	padding:10px;
	border-top:1px solid #cacaca;
}
.menuIcon {
	float:left;
	font-size:24px;
	width:24px !important;
	height:24px !important;
	margin-top:2px;
	color:#444444;
	margin-right: 10px;
	
}
.menuIconMenu {
	float:left;
	font-size:24px;
	color:#444444;
}
.menuLibelle {
	float:left;
	padding-left:15px;
	padding-top:5px;
	font-size:19px;
	color:#444444;
	cursor:pointer;
}
.menuLibelleMenu {
	float:left;
	padding-left:14px;
	padding-top:5px;
	font-size:19px;
	color:#444444;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 76px;
  left: 36px;
}
.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}

.jcarousel {
    position: relative;
    overflow: hidden;
}

/*
This is the container of the carousel items.
You must ensure that the position is relative or absolute and
that the width is big enough to contain all items.
*/
.jcarousel ul {
    width: 10000em;
    position: relative;

    /* Optional, required in this case since it's a <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
.jcarousel li {
    /* Required only for block elements like <li>'s */
    float: left;
    width:300px;
}



.tap-target {
  width: 50%;
  height: 100%;
  padding: 10%;
  margin: 10% auto;

  border-radius: 100%;

  font-size: 1.125em;
  text-align: center;
  color: #fff;
  background-color: #29e;

  cursor: pointer;

  transition: all 0.3s;
}

.tap-target.switchButton-bg {
  background-color: #f40;
}

.tap-target.large {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

.rotate {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.divPourimageDansComposition {
	touch-action: none;
	display: block;
	position : relative;
	z-index:2;
}

.imageCompo {
	
  max-width: 100%;
  margin: auto;
  width:100%;
  	position : relative;
	z-index:2;
	background-color: white;
height:100%;
}



.bordH, .bordB, .bordG, .bordD,.bordHext, .bordBext, .bordGext, .bordDext, .greetbordHext, .greetbordBext, .greetbordGext, .greetbordDext, .Nobordext {
	overflow:hidden;
	position : relative;
	z-index:2;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box; 
	background-color:#f9f9f9;
	height:100%;
}

.handleDrag {
	width:100%;
	height:100%;
	background-color:transparent;
	position:absolute;
	z-index:1;
}

.gutter {
    background-color:white;
    z-index:3;
    position:relative;

}
.gutter:after {
    content:'';
    position:absolute;
    top:-10px; bottom:-10px; 
    left:-10px; right:-10px; 

}
.split, .gutter.gutter-horizontal {
    float: left;
 
}

.categorieCadre {
	background-repeat: no-repeat, repeat; 
	background-position: center center; 
	background-size: cover;
	width:150px;
	height:113px;
	margin-left:10px;
	padding-top:4px;
	cursor:pointer;
	
	
}

/*  font 2025--------------------*/

@font-face {
	font-family: 'Balhattan-Italic';
	src: url('../font/Balhattan-Italic.ttf');
  }
  
  @font-face {
	font-family: 'Baliana';
	src: url('../font/Baliana.ttf');
  }
  
  @font-face {
	font-family: 'BLUE-OCEAN';
	src: url('../font/BLUE-OCEAN.ttf');
  }
  
  @font-face {
	font-family: 'BungeeShade-Regular';
	src: url('../font/BungeeShade-Regular.ttf');
  }
  
  @font-face {
	font-family: 'CaesarDressing-Regular';
	src: url('../font/CaesarDressing-Regular.ttf');
  }
  
  @font-face {
	font-family: 'CHRISTMAS-PARTY';
	src: url('../font/CHRISTMAS-PARTY.ttf');
  }
  
  @font-face {
	font-family: 'Creepster-Regular';
	src: url('../font/Creepster-Regular.ttf');
  }
  
  @font-face {
	font-family: 'Ewert-Regular';
	src: url('../font/Ewert-Regular.ttf');
  }
  
  @font-face {
	font-family: 'FascinateInline-Regular';
	src: url('../font/FascinateInline-Regular.ttf');
  }
  
  @font-face {
	font-family: 'Gnevenn';
	src: url('../font/Gnevenn.ttf');
  }
  
  @font-face {
	font-family: 'gomarice_block_western';
	src: url('../font/gomarice_block_western.ttf');
  }
  
  @font-face {
	font-family: 'HappyMemories';
	src: url('../font/HappyMemories.ttf');
  }
  
  @font-face {
	font-family: 'Kranky-Regular';
	src: url('../font/Kranky-Regular.ttf');
  }
  
  @font-face {
	font-family: 'Limelight-Regular';
	src: url('../font/Limelight-Regular.ttf');
  }
  
  @font-face {
	font-family: 'Maranatha';
	src: url('../font/Maranatha.ttf');
  }
  
  @font-face {
	font-family: 'Marshmallow';
	src: url('../font/Marshmallow.ttf');
  }
  
  @font-face {
	font-family: 'Mayorice';
	src: url('../font/Mayorice.ttf');
  }
  
  @font-face {
	font-family: 'Metalina';
	src: url('../font/Metalina.ttf');
  }
  
  @font-face {
	font-family: 'MilkyWeek';
	src: url('../font/MilkyWeek.ttf');
  }
  
  @font-face {
	font-family: 'MonsieurLaDoulaise-Regular';
	src: url('../font/MonsieurLaDoulaise-Regular.ttf');
  }
  
  @font-face {
	font-family: 'MouldyCheese';
	src: url('../font/MouldyCheese.ttf');
  }
  
  @font-face {
	font-family: 'NaturalMonoAlt-Regular';
	src: url('../font/NaturalMonoAlt-Regular.ttf');
  }
  
  @font-face {
	font-family: 'Neonderthaw-Regular';
	src: url('../font/Neonderthaw-Regular.ttf');
  }
  
  @font-face {
	font-family: 'Sagewold-Regular';
	src: url('../font/Sagewold-Regular.ttf');
  }
  
  @font-face {
	font-family: 'SimpleDaily';
	src: url('../font/SimpleDaily.ttf');
  }
  
  @font-face {
	font-family: 'Sofia-Regular';
	src: url('../font/Sofia-Regular.ttf');
  }
  
  @font-face {
	font-family: 'SpicyRice-Regular';
	src: url('../font/SpicyRice-Regular.ttf');
  }
  
  @font-face {
	font-family: 'SuperChips';
	src: url('../font/SuperChips.ttf');
  }
  
  @font-face {
	font-family: 'SuperGiggle';
	src: url('../font/SuperGiggle.ttf');
  }
  
  @font-face {
	font-family: 'SuperMystery';
	src: url('../font/SuperMystery.ttf');
  }
  
  @font-face {
	font-family: 'SuperPeanut';
	src: url('../font/SuperPeanut.ttf');
  }
  
  @font-face {
	font-family: 'Travellia';
	src: url('../font/Travellia.ttf');
  }
  
  @font-face {
	font-family: 'UnifrakturMaguntia-Regular';
	src: url('../font/UnifrakturMaguntia-Regular.ttf');
  }
  
  @font-face {
	font-family: 'Wheetpaste-Regular';
	src: url('../font/Wheetpaste-Regular.otf');
  }
  
  @font-face {
	font-family: 'Tess-Italic';
	src: url('../font/Tess-Italic.otf');
  }
  
  @font-face {
	font-family: 'Rye-Regular';
	src: url('../font/Glamlips.otf');
  }
  
  @font-face {
	font-family: 'Glamlips';
	src: url('../font/Glamlips.otf');
  }
  
  @font-face {
	font-family: 'FloridaVibesbyTurbologo';
	src: url('../font/FloridaVibesbyTurbologo.otf');
  }
  
  @font-face {
	font-family: 'Wotham';
	src: url('../font/Wotham.ttf');
  }
  

  @font-face {
	font-family: 'Courgette';
	src: url('../font/Courgette-Regular.ttf');
  }
  
  @font-face {
	font-family: 'IndieFlower';
	src: url('../font/IndieFlower.ttf');
  }
  
  @font-face {
	font-family: 'Cookie';
	src: url('../font/Cookie-Regular.ttf');
  }
  
  @font-face {
	font-family: 'fabfeltscript';
	src: url('../font/fabfeltscript.bold.ttf');
  }
  
  @font-face {
	font-family: 'Amandine';
	src: url('../font/Amandine.ttf');
  }
  
  @font-face {
	font-family: 'LaBelleAurore';
	src: url('../font/LaBelleAurore.ttf');
  }
  
  @font-face {
	font-family: 'Gloria';
	src: url('../font/GloriaHallelujah.ttf');
  }
  
  @font-face {
	font-family: 'Georges';
	src: url('../font/Georges.ttf');
  }
  
  @font-face {
	font-family: 'Telolet';
	src: url('../font/Telolet.ttf');
  }
  
  @font-face {
	font-family: 'Grunge';
	src: url('../font/SFGrungeSans.ttf');
  }
  
  @font-face {
	font-family: 'Amita';
	src: url('../font/Amita-Regular.ttf');
  }
  
  @font-face {
	font-family: 'BadScript';
	src: url('../font/BadScript-Regular.ttf');
  }
  
  @font-face {
	font-family: 'Mali';
	src: url('../font/Mali-Regular.ttf');
  }
  
  
  @font-face {
	font-family: 'Parisienne';
	src: url('../font/Parisienne-Regular.ttf');
  }
  
  @font-face {
	font-family: 'ILoveYOUForever';
	src: url('../font/ILoveYOUForever.ttf');
  }
  
  @font-face {
	font-family: 'WeAreInLove-3BRy';
	src: url('../font/WeAreInLove-3BRy.ttf');
  }
  
  @font-face {
	font-family: 'ACharmingFontExpanded-ZEpB';
	src: url('../font/ACharmingFontExpanded-ZEpB.ttf');
  }
  
  @font-face {
	font-family: 'MonbijouxClownpiece-V1vZ';
	src: url('../font/MonbijouxClownpiece-V1vZ.ttf');
  }
  
  @font-face {
	font-family: 'EspenHalloween';
	src: url('../font/EspenHalloween.ttf');
  }
  
  @font-face {
	font-family: 'Choko-6O9A';
	src: url('../font/Choko-6O9A.ttf');
  }
  
  @font-face {
	font-family: 'BigSnow';
	src: url('../font/BigSnow.ttf');
  }
  
  @font-face {
	font-family: 'BunnyEar';
	src: url('../font/BunnyEar.ttf');
  }
  
  @font-face {
	font-family: 'Caveat-VariableFont_wght';
	src: url('../font/Caveat-VariableFont_wght.ttf');
  }
  
  @font-face {
	font-family: 'JustAnotherHand-Regular';
	src: url('../font/JustAnotherHand-Regular.ttf');
  }
  
  @font-face {
	font-family: 'PatrickHand-Regular';
	src: url('../font/PatrickHand-Regular.ttf');
  }
  
  @font-face {
	font-family: 'DancingScript-VariableFont_wght';
	src: url('../font/DancingScript-VariableFont_wght.ttf');
  }
  
  @font-face {
	font-family: 'Satisfy-Regular';
	src: url('../font/Satisfy-Regular.ttf');
  }
  
  @font-face {
	font-family: 'GreatVibes-Regular';
	src: url('../font/GreatVibes-Regular.ttf');
  }
  
  @font-face {
	font-family: 'HomemadeApple-Regular';
	src: url('../font/HomemadeApple-Regular.ttf');
  }
  
  @font-face {
	font-family: 'Merienda-VariableFont_wght';
	src: url('../font/Merienda-VariableFont_wght.ttf');
  }
  
/* end font 2025--------------------*/



@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../font/MaterialIcons-Regular.woff2') format('woff2'),
       url('../font/MaterialIcons-Regular.woff') format('woff'),
       url('../font/MaterialIcons-Regular.ttf') format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}




@font-face {
  font-family: 'Material Icons Outline';
  font-style: normal;
  font-weight: 400;
  src: url('../font/material-iconsoutline.woff') format('woff');
}


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 34px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


.material-icons-round {
  font-family: 'Material Icons Round';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-sharp {
  font-family: 'Material Icons Sharp';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-two-tone {
  font-family: 'Material Icons Two Tone';
  font-weight: normal;
  font-style: normal;
  font-size: 34px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-outline {
  font-family: 'Material Icons Outline';
  font-weight: normal;
  font-style: normal;
  font-size: 34px;
  line-height: 36px;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  height : 34px;
  width: 34px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


html, body {
    height: 100%;
}
.ui-content {
 -webkit-overflow-scrolling: touch;
  overflow: hidden;
  padding: 0;
 }

*:not(input):not(textarea) {
   -webkit-user-select: none;  /* disable selection/Copy  */ 
   -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}

.ui-mobile, .ui-mobile body {
	height: 100%;
}
.ui-field-contain {
border-bottom-width: 0px;
margin: 0px;
}

.ui-checkbox {
margin:0px;
}

.ui-loading .ui-loader {
padding: 0px;
border: none;
opacity: .95;
border-radius: 10px;
}
.ui-loader-verbose {
margin-left: -97px;
box-shadow:none;
}
.ui-loader-background {
    width:100%;
    height:100%;
    top:0px;
    margin: 0px;
    background: rgba(0, 0, 0, 0.3);
    display:none;
    position: fixed;
    z-index:9999;
}
.ui-panel {
	min-height: 30px;
	z-index: 9999;
	top:-1px;

}
.ui-loading .ui-loader-background {
    display:block;
}


.ui-body-a {
	border-width: 0px;
}

.ui-panel-display-overlay {
	z-index: 9999;
}
/*.textarea.ui-input-text { height: inherit !important }*/
/*.textarea_height {
  height: auto !important; /* !important is used to force override. */
/*}*/

#messageValue {
    height: 300px !important;
    max-height: 300px !important; 
    min-height: 300px !important;
}
.thumbnail{
    padding:5px;
    height:150px;
}
 

.hiddenZone	{
	display:none;
}

.ui-btn, label.ui-btn {
	font-weight: normal;
	font-size: 12px;
	margin-right:5px;
	margin-left:5px;
}
.bouton-action {
	
	background-color : #fb5656;
}
.container {
    position: absolute;   
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
}

.headerZone {
	margin-bottom: 5px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:45px;
	min-height: 22px;
	display:none;
}

.headerZoneSmall {
	margin-bottom: 5px;
	padding-top:10px;
	padding-bottom:10px;
	
}

.headerTitle {
	color:#4F5154;
	float:left;
	width:270px;
	padding-left:5px;
	font-size:16px;
}
	
.headerSubTitle {
	color:#4F5154;
	padding-left:8px;
	font-size: 17px;
	font-style :italic;
	padding-top:3px;
	
}

.grid-item { width: 100px; }
.grid-item--width2 { width: 120px; }

.contentZone {
	width:560px;
	margin:0 auto;
	
}
.buttonsZone {
		width:430px;
		margin:0px auto;
	
	}
	
.contentZoneExtra {
	width:560px;
	margin:0 auto;
	
}
.contentZoneQuestion {
	width:250px;
	margin:0px auto;
	
}
.listSearchAddress {
		width:560px;
	}

.listSearchAddressZone {
		margin-top: -9px;
	}
	.listSearchButton {
		margin-left: 81px;
	}
	
.swiper-container {	
    width: 255px;
    height: 45px;
}      
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
	background-image : url("")
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
		background-image : url("")
	
}
.filterName {
	    font-size: 14px;
    width: 100px;
    margin: 0 auto;
    text-align: center;
    padding-top: 15px;
    font-family: nunito;
}

#cropzoom-image {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}

.boutonZone {
	width:110px;
	padding:10px;
	font-size:15px;
}


.petitboutonRond {
	background-color:#dcfbfe;
	color:#444444;
	margin-left: 6px;
	text-align: center;
    width: 34px;
    height: 34px;
    line-height: 17px;
    border-radius: 50%;
    padding-right: 0px;
    padding-left: 0px;
    font-size: 20px;
    font-weight: normal;
	cursor:pointer;
    margin: 0 auto;
}

.boutonRond {
	background-color:#dcfbfe;
	color: #444444;
	margin-left: 6px;
	text-align: center;
    width: 48px;
    height:39px;
    line-height: 29px;
    border-radius: 50%;
    padding-right: 0px;
    padding-left: 0px;
    font-size: 20px;
    font-weight: normal;
    padding-top: 6px;
    padding-bottom: 2px;
    cursor:pointer;
    margin: 0 auto;
}
.boutonRondLabel {
	font-size:12px;
	padding-top:1px;
	
}
.petitboutonRondContainer {
	 text-align:center; 
	  width: 70px;
	  height: 80px;
}
.trespetitboutonRondContainer {
	 text-align:center; 
	  width: 35px;
}
.boutonRondContainer {
	 text-align:center; 
	 margin-left: 18px;
	 width: 70px;
}
.material-icons-two-tone.rougePhotoweb { color: #fe6a60; }

.rougePhotoweb {
	color : #fe6a60;
	background-color :#fe6a60;
}
.bleuPhotoweb {
	color: #6bccd0;
	background-color :#6bccd0;
}
.jaunePhotoweb {
	color : #fff46f;
	background-color: #fff46f;
}

.vertPhotoweb {
	color: #95cf92;
	background-color :#95cf92;
}

.smallButtonModify {
	padding-left:20px;
}
.boutonDispositionZone {
	width:110px;
	padding:10px;
	font-size:16px;
	float:left;
}


.carrouselCompositionElementDown {
	padding-top:5px;
}
.carrouselEtiquette {
	background: white;
    font-size: 25px;
    height: 146px;
    line-height: 150px;
    text-align: center;
    width: 36px;
   	margin-left:10px;
}
.imageDispositionContainer {
width:115px;
margin: 0 auto;	
padding-left: 5px;
cursor:pointer;
}

.imageDisposition {
width:115px;
margin: 0 auto;	
border:2px solid white;
}
.boutonZoneExtra {
	width:100px;
	padding:10px;
	font-size:16px;
}
.boutonZone2 {
	width:110px;
	padding:5px;
	font-size:16px;
}

.boutonText {
	width:210px;
	padding:10px;
	font-size:16px;
	
}
.boutonTextIntro {
	width:230px;
	padding:10px;
	font-size:16px;
	
}

.switchButton {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
  background-color: #6bccd0;
  border-radius: 2px;
  font-size:16px;
}
.sliderButton {
  border-radius: 50%;
   position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
}


.boutonTextCGU {
	width:320px;
	padding:10px;
	font-size:16px;
	
}

.boutonTextUpload {
	width:220px;
	padding:10px;
	font-size:14px;
	
}



.boutonCentralZone {
	width:285px;
	margin: 0px auto;
	clear:both;
	padding-top:50px;
	
}
.boutonCentralZoneSelectAddress {
		padding-top:180px;
}
	
.boutonDispositionCentralZone {
	width:403px;
	margin: 0px auto;
	clear:both;
	padding-top:50px;
}

.boutonCentralZoneExtra {
	width:310px;
	margin: 0px auto;
	clear:both;	
}

.twoButtonZone {
	width:560px;
	margin: 0 auto;
	clear:both;
}

.stampZone {
	width:400px;
	height:400px;
	}
	
.boutonValidateStamp {
	padding-left:144px;
}
	
.tableau2colonnes,.tableau2colonnesGauche,.tableau2colonnesDroite  {
	width:250px;
	font-size:14px;
	
}




.logoPaiementZone {
	margin:0px auto;
	padding-top:10px;
}

.facticeButtonComposer{
	float:left;
	width:85px;
	height:56px;
}
.facticeButtonComposerSmall{
	float:left;
	width:138px;
	height:56px;
}
.facticeButtonComposerVerySmall{
	float:left;
	width:125px;
	height:56px;
}

.boutonWithRotate {
	
    z-index:10;
    position: relative;
	
}

.paletteZone {
	margin-bottom: 0px;
	z-index:30;
	position: relative;
	width:553px;
	margin:0 auto;
	height: 112px;
	overflow-x:scroll;
}


.signatureCanvasContentZone {
	padding-top:0px;
	padding-left:0px
}
.signatureZone {
	
	width:600px;
	margin:0 auto;
	height:600px;
	padding-top: 60px;
}
.signatureButtonZone {
	position: fixed;
	top:400px;
}

.verticalRougeGrand {
	float:left;
	background-color:#fb5656;
	height:20px;
	width:3px;
	margin-top:2px;
	margin-bottom:5px
}

.verticalRouge {
	float:left;
	background-color:#fb5656;
	height:20px;
	width:3px;
	margin-top:2px;
	margin-bottom:5px
}

.verticalRougePetit {
	float:left;
	background-color:#fb5656;
	height:20px;
	width:3px;
	margin-top:2px;
	margin-bottom:5px
}

.cardPrincipale {
	
	padding-top:45px;
	
}


.codePromoValidateZone {
	
	padding-left: 20px;
	
}
@media only screen and (max-height:750px) {
	.boutonCentralZone {
		padding-top:0px;
		
	}
	
	.boutonCentralZoneSelectAddress {
		padding-top:90px;
	}
	.boutonDispositionCentralZone {
		padding-top:0px;
	}
	
	
	
	
}


@media only screen and (max-height:700px) {
	.boutonCentralZone {
		padding-top:0px;
		
	}
	.boutonDispositionCentralZone {
		padding-top:0px;
	}
	
	.boutonCentralZoneSelectAddress {
		padding-top:90px;
	}
	
	.cardPrincipale {
	
	padding-top:10px;
	
	}
	
}
@media only screen and (min-width:1023px) {

	
	.boutonDispositionCentralZone {
    		margin: 0px auto;
    		clear: both;
		padding-top: 0px;
	}
	
	#detailturnCarte {	
		height : 0px !important;
	}
	.boutonCentralZone {
  	  	margin: 0px auto;
  	  	clear: both;
    	  	padding-top: 0px;  	  
	}
	

	
	.cardPrincipale {
    		padding-top: 5px;
	}
	
}

@media only screen and (max-height:500px) {
	.boutonCentralZone {
		padding-top:0px;
		
	}
	.boutonCentralZoneSelectAddress {
		padding-top:90px;
	}
	
	.boutonDispositionCentralZone {
		padding-top:0px;
	}
	.cardPrincipale {
	
	padding-top:0px;
	
	}
}


@media only screen and (max-width:500px) {
	
	@media only screen and (max-height:700px) {
		.signatureZone {
			padding-top:30px;
		}
				

	}


	
	@media only screen and (max-height:500px) {
		.signatureZone {
			padding-top:0px;
		}
	}

	

.ripple {

  padding-bottom: 3px;
  padding-top: 0px;
}
.rippleText {
	
	font-size:34px !important;
}
.rippleImage {
	width:34px;
	height:34px;
}	
.menuLabel {
	padding-bottom:80px;
	clear:both;
	padding-top: 20px;
	font-size:35px;
	font-weight:300;
	text-align:center;
	color:#6bccd0;
	
}
		

.menuIcon {
	float:left;
	font-size:33px;
	width:33px !important;
	height:33px !important;
	margin-top:0px;
	color:#444444;
	margin-right: 0px;
	
}
.menuIconMenu {
	float:left;
	font-size: 28px;
	color:#444444;
}
.menuLibelle {
	float:left;
	padding-left:15px;
	padding-top:5px;
	font-size:18px;
	color:#444444;
}

.menuLibelleMenu {
	float:left;
	padding-left:15px;
	padding-top:7px;
	font-size:18px;
	color:#444444;
}

	
#messageValue {
    height: 300px !important;
    max-height: 300px !important; 
    min-height: 300px !important;
}
	
	@media only screen and (max-height:400px) {
		#messageValue {
    		height: 150px !important;
   		 max-height: 150px !important; 
    		min-height: 150px !important;
		}
	}
	.verticalRougeGrand {
	float:left;
	background-color:#fb5656;
	height:53px;
	width:3px;
	margin-top:2px;
	margin-bottom:5px
}

.verticalRouge {
	float:left;
	background-color:#fb5656;
	height:47px;
	width:3px;
	margin-top:2px;
	margin-bottom:5px
}
.verticalRougePetit {
	float:left;
	background-color:#fb5656;
	height:20px;
	width:3px;
	margin-top:2px;
	margin-bottom:5px
}
	.signatureButtonZone {
	position: inherit;
}

.signatureZone {
	width:305px;
	margin:0 auto;
	height:inherit;
}

.signatureCanvasContentZone {
		padding-top:0px;
		margin-left:0px
	
}
.paletteZone {
		float:left;
	width:50px;
	margin-bottom: 0px;
	padding-top:10px;
	margin-left: -50px;
	z-index:30;
	position: relative;
	height: 163px;
	overflow-x: scroll;
}
.boutonWithRotate {
	-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
	height: 30px;
    width: 90px;
    clear: both;
    padding-top: 47px;
    z-index:10;
    position: relative;
	}

	
	.facticeButtonComposer {
	float:left;
	width:85px;
	height:41px;
     }
	
		.facticeButtonComposerSmall {
	float:left;
	width:83px;
	height:41px;
     }
		.facticeButtonComposerVerySmall {
	float:left;
	width:60px;
	height:41px;
     }

	.headerZone {
		margin-bottom: 5px;
		padding-top:5px;
		padding-bottom:30px;
		padding-left:10px;
		min-height: 20px;
		display:none;
	}
	.headerZoneSmall {
		margin-bottom: 5px;
		padding-top:5px;
		
	}
	
	.headerTitle {
		color:#4F5154;
		float:left;
		width:220px;
		padding-left:5px;
		font-size:15px;
	}
	.headerSubTitle {
		color:#4F5154;
		padding-left:12px;
		margin-right:10px;
		font-size: 19px;
		font-style :italic;
		padding-top:3px;
	}
	
	.contentZone {
		width:345px;
		margin:0px auto;
	
	}
	.buttonsZone {
		width:261px;
		margin:0px auto;
	
	}

	.smallButtonModify {
	padding-left:5px;
}
	.contentZoneExtra {
		width:320px;
		margin:0px auto;
	
	}
	.contentZoneQuestion {
		width:250px;
		margin:0px auto;
	
	}
	
	.listSearchAddress {
		width:280px;
	}
	.listSearchAddressZone {
		margin-top: -20px;
	}
	
	.listSearchButton {
		margin-left: 25px;
	}
	
	.boutonZone {
		width:75px;
		padding-right:0px;
		padding-left:0px;
		font-size:13px;
		font-weight: normal;
		padding-top: 3px;
		padding-bottom: 3px;
	}
	.boutonDispositionZone {
		width:60px;
		padding-right:4px;
		padding-left:4px;
		font-size:12px;
		font-weight: normal;
		padding-top: 3px;
		padding-bottom: 0px;
		margin-right: 2px;
		margin-left: 2px;
		float:left;
	}
	.imageDispositionContainer {
		width:90px;
		margin:0 auto;	
		padding-left: 5px;
	}
	.imageDisposition {
		width:95px;
		margin:0 auto;	
	
	}
	.boutonZoneExtra {
		width:60px;
		padding-right:0px;
		padding-left:0px;
		font-size:12px;
		font-weight: normal;
		padding-top: 3px;
		padding-bottom: 3px;
	}
	.boutonZoneSmall {
		width:60px;
		padding-right:0px;
		padding-left:0px;
		font-size:12px;
		font-weight: normal;
		padding-top: 3px;
		padding-bottom: 3px;
	}
	
	.boutonZone2 {
		width:75px;
		padding-right:0px;
		padding-left:0px;
		font-size:12px;
		font-weight: normal;
		padding-top: 3px;
		padding-bottom: 3px;
		line-heigth:20px;
	}
	
	.boutonText {
		width:160px;
		padding:5px;
		font-size:12px;
	
	}
		.boutonTextIntro {
		width:180px;
		padding:5px;
		font-size:12px;
	
	}
	.switchButton {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 25px;
  background-color: #6bccd0;
  border-radius: 2px;
  font-size:12px;
}
.sliderButton {
  border-radius: 50%;
   position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
}

	.boutonTextCGU {
		width:230px;
		padding:5px;
		font-size:12px;
	
	}
	.boutonCentralZone {
		width:282px;
		margin: 0px auto;
		clear:both;
		
	}
	.boutonDispositionCentralZone {
		width:278px;
		margin: 0px auto;
		clear:both;
		
		
	}
	
	.boutonCentralZoneExtra {
		width:308px;
		margin: 0px auto;
		clear:both;
		padding-left:10px
		
	}
	.stampZone {
		width:200px;
		height:200px;
	
	}
	
	.twoButtonZone {
		width:280px;
		margin: 0px auto;
		clear:both;	
	}
	
		
	.boutonValidateStamp {
		padding-left:90px;
	}
	
	.tableau2colonnes {
		width:144px;
		font-size:12px;
	
	}	
	
	.tableau2colonnesDroite {
		width:100px;
		font-size:12px;
	
	}	
	.tableau2colonnesGauche {
		width:222px;
		font-size:13px;
	
	}	
	
	.logoPaiementZone {
		margin:0px auto;
		padding-top:10px;
		width: 290px;
	}

	.boutonTextUpload {
		width:200px;
		padding:5px;
		font-size:13px;
	
	}
	
}



-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);


.palette-case {
    width:320px;
    margin:auto;
    text-align:center;
}
.palette-box {
    float:left;
    padding:2px 6px 2px 6px;
}
.palette, .paletteTaille {
    border:4px solid white;
    height:40px;
    width:40px;
    border-radius: 2.3em;
    float: left;
  	margin-bottom: 5px;
   	margin-bottom: 5px;
 
  	margin-right: 4px;
 
}

.paletteEffect {
    border:4px solid white;
  	padding:9px;
    border-radius: 2.3em;
    float: left;
  	margin-bottom: 5px;
   	margin-bottom: 5px;
 
  	margin-right: 4px;
 
}
.paletteblack{
    background-color:#000000;
}
.paletteprune{
    background-color:#ee638f;
}
.paletteblue{
    background-color:#929dcb;
}
.paletteviolet{
    background-color:#863c71;
}
.paletteorange{
    background-color:#f68055;
}
.palettegreylight{
    background-color:#f4525e;
}
.palettebluelight{
    background-color:#039eb9;
}
.palettegreen{
    background-color:#41a941;
}
.palettebleumarine{
    background-color:#002060;
}

.paletteyellow{
    background-color:#ffff00;
}

#loaderZone {
  height: 100%;
  background-color: white;
  background-size: 100%;

}
html .spin {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -15px;
  border: 3px solid #d8663a;
  border-radius: 50%;
}
html .spin:before, html .spin:after {
  content: "";
  position: absolute;
  display: block;
  width: 3px;
  background-color: #d8663a;
  border-radius: 1.5px;
  transform-origin: 50% 0;
}
html .spin:before {
  height: 9px;
  left: 13.5px;
  top: 50%;
  animation: spin 3000ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media only screen and (max-width:320px) {

.codePromoValidateZone {
	
	padding-left: 0px;
	
}
	
	
.menuLabel {
	padding-bottom:20px;
	clear:both;
	padding-top: 0px;
	font-size:35px;
	font-weight:300;
	text-align:center;
	color:#6bccd0;
	
}

.menuIcon {
	float:left;
	font-size:26px !important;
	width:26px !important;
	height:26px !important;
	margin-top: 2px;
	color:#444444;
}
.menuIconMenu {
	float:left;
	font-size:26px !important;
	color:#444444;
}
.menuLibelle {
	float:left;
	padding-left:15px;
	padding-top:9px;
	font-size:14px;
	color:#444444;
}
.menuLibelleMenu {
	float:left;
	padding-left:15px;
	padding-top:5px;
	font-size:17px;
	color:#444444;
}
#messageValue {
    height: 150px !important;
    max-height: 150px !important; 
    min-height: 150px !important;
}

	.verticalRougeGrand {
	float:left;
	background-color:#fb5656;
	height:53px;
	width:3px;
	margin-top:2px;
	margin-bottom:5px
}

.verticalRouge {
	float:left;
	background-color:#fb5656;
	height:40px;
	width:3px;
	margin-top:2px;
	margin-bottom:5px
}
.verticalRougePetit {
	float:left;
	background-color:#fb5656;
	height:20px;
	width:3px;
	margin-top:2px;
	margin-bottom:5px
}
	.signatureButtonZone {
	position: inherit;
}

.signatureZone {
	width:305px;
	margin:0 auto;
	height:inherit;
	padding-top:0px;
}

.signatureCanvasContentZone {
		padding-top:0px;
		margin-left:25px
	
}
.paletteZone {
		float:left;
	width:50px;
	margin-bottom: 0px;
	padding-top:10px;
	margin-left: -50px;
	z-index:30;
	position: relative;
}
.boutonWithRotate {
	-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
	height: 30px;
    width: 90px;
    clear: both;
    padding-top: 34px;
    padding-left: 37px;
    z-index:10;
    position: relative;
	}

	
	.facticeButtonComposer {
	float:left;
	width:85px;
	height:41px;
     }
	
		.facticeButtonComposerSmall {
	float:left;
	width:83px;
	height:41px;
     }
		.facticeButtonComposerVerySmall {
	float:left;
	width:60px;
	height:41px;
     }

	.headerZone {
		margin-bottom: 5px;
		padding-top:5px;
		padding-bottom:30px;
		padding-left:10px;
		min-height: 20px;
		display:none;
	}
	.headerZoneSmall {
		margin-bottom: 5px;
		padding-top:5px;
		
	}
	
	.headerTitle {
		color:#4F5154;
		float:left;
		width:220px;
		padding-left:5px;
		font-size:15px;
	}
	.headerSubTitle {
		color:#4F5154;
		padding-left:12px;
		margin-right:10px;
		font-size: 15px;
		font-style :italic;
		padding-top:3px;
	}
	
	.contentZone {
		width:300px;
		margin:0px auto;
	
	}
	.buttonsZone {
		width:261px;
		margin:0px auto;
	
	}

	.smallButtonModify {
	padding-left:5px;
}
	.contentZoneExtra {
		width:320px;
		margin:0px auto;
	
	}
	.contentZoneQuestion {
		width:250px;
		margin:0px auto;
	
	}
	
	.listSearchAddress {
		width:280px;
	}
	.listSearchAddressZone {
		margin-top: -20px;
	}
	
	.listSearchButton {
		margin-left: 25px;
	}
	
	.boutonZone {
		width:75px;
		padding-right:0px;
		padding-left:0px;
		font-size:13px;
		font-weight: normal;
		padding-top: 3px;
		padding-bottom: 3px;
	}
	.boutonDispositionZone {
		width:60px;
		padding-right:4px;
		padding-left:4px;
		font-size:12px;
		font-weight: normal;
		padding-top: 3px;
		padding-bottom: 0px;
		margin-right: 2px;
		margin-left: 2px;
		float:left;
	}
	.imageDispositionContainer {
		width:67px;
		margin:0 auto;	
		padding-left: 5px;
	}
	.imageDisposition {
		width:75px;
		margin:0 auto;	
	
	}
	.boutonZoneExtra {
		width:60px;
		padding-right:0px;
		padding-left:0px;
		font-size:12px;
		font-weight: normal;
		padding-top: 3px;
		padding-bottom: 3px;
	}
	.boutonZoneSmall {
		width:60px;
		padding-right:0px;
		padding-left:0px;
		font-size:12px;
		font-weight: normal;
		padding-top: 3px;
		padding-bottom: 3px;
	}
	
	.boutonZone2 {
		width:75px;
		padding-right:0px;
		padding-left:0px;
		font-size:12px;
		font-weight: normal;
		padding-top: 3px;
		padding-bottom: 3px;
		line-heigth:20px;
	}
	
	.boutonText {
		width:160px;
		padding:5px;
		font-size:12px;
	
	}
		.boutonTextIntro {
		width:180px;
		padding:5px;
		font-size:12px;
	
	}
	
	.switchButton {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 25px;
  background-color: #6bccd0;
  border-radius: 2px;
  font-size:12px;
}
.sliderButton {
  border-radius: 50%;
   position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
}
	.boutonTextCGU {
		width:230px;
		padding:5px;
		font-size:12px;
	
	}
	.boutonCentralZone {
		width:282px;
		margin: 0px auto;
		clear:both;
		margin-top: -5px;
	}
	.boutonDispositionCentralZone {
		width:278px;
		margin: 0px auto;
		clear:both;
		
		
	}
	
	.boutonCentralZoneExtra {
		width:308px;
		margin: 0px auto;
		clear:both;
		padding-left:10px
		
	}
	.stampZone {
		width:200px;
		height:200px;
	
	}
	
	.twoButtonZone {
		width:280px;
		margin: 0px auto;
		clear:both;	
	}
	
		
	.boutonValidateStamp {
		padding-left:90px;
	}
	
	.tableau2colonnes {
		width:135px;
		font-size:12px;
	
	}	
	
	.tableau2colonnesDroite {
		width:60px;
		font-size:12px;
	
	}	
	.tableau2colonnesGauche {
		width:221px;
		font-size:14px;
	
	}	
	
	.logoPaiementZone {
		margin:0px auto;
		padding-top:10px;
		width: 280px;
	}

	
	.boutonTextUpload {
	width:140px;
	padding:3px;
	font-size:9px;
	
	}
	
}



-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);


.palette-case {
    width:320px;
    margin:auto;
    text-align:center;
}
.palette-box {
    float:left;
    padding:2px 6px 2px 6px;
}
.palette, .paletteTaille {
    border:4px solid white;
    height:40px;
    width:40px;
    border-radius: 2.3em;
    float: left;
  	margin-bottom: 5px;
   	margin-bottom: 5px;
 
  	margin-right: 1px;
 
}

.paletteEffect {
    border:4px solid white;
  	padding:9px;
    border-radius: 2.3em;
    float: left;
  	margin-bottom: 5px;
   	margin-bottom: 5px;
 
  	margin-right: 4px;
 
}
.paletteblack{
    background-color:#000000;
}
.paletteprune{
    background-color:#ee638f;
}
.paletteblue{
    background-color:#929dcb;
}
.paletteviolet{
    background-color:#863c71;
}
.paletteorange{
    background-color:#f68055;
}
.palettegreylight{
    background-color:#f4525e;
}
.palettebluelight{
    background-color:#039eb9;
}
.palettegreen{
    background-color:#41a941;
}
.paletteyellow{
    background-color:#ffff00;
}

#loaderZone {
  height: 100%;
  background-color: white;
  background-size: 100%;

}
html .spin {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -15px;
  border: 3px solid #d8663a;
  border-radius: 50%;
}
html .spin:before, html .spin:after {
  content: "";
  position: absolute;
  display: block;
  width: 3px;
  background-color: #d8663a;
  border-radius: 1.5px;
  transform-origin: 50% 0;
}
html .spin:before {
  height: 9px;
  left: 13.5px;
  top: 50%;
  animation: spin 3000ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.contentZoneExemple {
	margin: 0 auto;
	max-width: 1120px;

	#galleryfilter {
		padding-top: 10px;
		@media screen and (min-width:650px) {
			padding-top: 20px;
		}
		.active-button {
			background-color: #6bccd0 !important;
			color:white !important;
		}
	}
	
	#galleryexemples {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 15px;
		padding: 10px;

		@media screen and (min-width:650px) {
			grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
			gap: 30px;
			padding: 20px;
		}

		.filter-warp {
			border-radius: 10px;
			align-items: center;
			justify-content: center;
			padding: 5%;
			cursor: pointer;

			img {
				display: block;
				max-width: 100%;
				box-shadow: 0 5px 9px -1px #969696;
			}
		}
	}
}