@font-face {
  font-family: "Pacifico";
  src : url('/public/css/Pacifico.ttf');
}

body {
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#link_website:hover {
    cursor: pointer;
}

#image {  
  height:auto;
  max-width:100%;
  max-height:80px;
}

#img_accueil {
  height:auto;
  max-width: calc(100% - 20px);
  max-height:80px;
}

#Main_menu {
  height:calc (100% - #banner.offsetHeight);
}

/*Centre une image dans un div*/
.clsImage, #login0{
  position : absolute;
  max-width: 95%;
  max-height: 95%;
  left : 50%;
  top : 50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
}


.center_text{
  text-align: center;
}

.Title{
  font-size : 30px;
  font-family: "Pacifico";
  color : black;
}

.btn_back{
  position: absolute;
  left: 15px; top: 40px;
}

.color1{
  background:#EAEAEA;
  border:#EAEAEA;
  color:#262626;
}
.color2{
  background:#D8D8D8;
  border:#D8D8D8;
  color:#262626;
}
.color3{
  background:#BFD8D5;
  border:#BFD8D5;
  color:#262626;
}
.color4{
  background:#B1BED5;
  border:#B1BED5;
  color:#262626;
}
.color5{
  background: #A9B2B2;
  border: #A9B2B2;
  color:#262626;
}
.color6{
  background: #ABD6D0;
  border: #ABD6D0;
  color:#262626;
}
.color_return{
  background:#B6D3FB;
  border:#B6D3FB;
  color:#262626;
}

.color_prime{
  background:#ABD6D0;
  border:#ABD6D0;
  color:#262626;
}

.color_sec{
  background:#D8D8D8;
  border:#D8D8D8;
  color:#262626;
}

.bouton_rond{
  width: 45px; height: 45px;
  border-radius: 50%;
}

.btn-menu_old{
  width:160px;
  height:160px;
  line-height: 160px;
  vertical-align: center;
  border-radius: 50%;
  //background:#DFDFDF;
  //border:#DFDFDF;
  margin:25px
}

.btn-menu{
  width:150px;
  height:150px;
  line-height: 150px;
  vertical-align: center;
  border-radius: 50%;
  margin:25px;
}

@media screen and (min-width: 780px) {
  .btn-menu{
    font-size:20px;
  }
}


@media screen and (max-width: 780px) {
  .btn-menu{
    width:110px;
    height:110px;
    line-height: 110px;
    vertical-align: center;
    border-radius: 50%;
    margin:15px;
  }

  .btn-max {
    max-width:140px;
    min-height:190px;
  }
}

#btn_home_group{
  //margin-bottom:10px;
  overflow-y: hidden;
}

.hide{
  display:none;
}

.overflow_x_hidden{
  overflow-x: hidden;
}

@media screen and (min-width: 500px) {
  #row_fonction_Selection {
    overflow: hidden; }
  #Select_Cadre {
    overflow: hidden; }
}

.margin_cadre{
  margin: 5px;
}

.center_font{
  display:inline-block;
  vertical-align: middle;
}

.viewer{
  position:absolute;
  height:100%;
  width:100%;
  background: black;
}

.background_image{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  filter : brightness(50%) blur(10px);
  -webkit-filter: brightness(50%) blur(10px);
}

.shadow_cadre{
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
}

.shadow_cadre_blanc{
  box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.4);
}

.round_image{
  border-radius: 20px;
}

.close_preview{
  position:absolute;
  left:15px;
  top:15px;
  width: 45px; height: 45px;
  border-radius: 50%;
  //color:#fafafa;
  transition: 0.3s;
}

.close_preview_droit{
  left:calc(100% - 65px);
}

#print_btn{
  background-color: transparent;
  border-color: transparent;
  color:white;
  cursor: pointer;
  transition: 0.3s;
}

#print_btn:hover{
  transform: scale(1.2);
}

#download_preview, #share_unik_btn_img{
  /* background-color: transparent;
  border-color: transparent;
  color:white; */
  cursor: pointer;
  transition: 0.3s;
}

#download_preview:hover, #share_unik_btn_img:hover{
  transform: scale(1.2);
}

 #call_mail{
  position:relative;
  top:3px;
  width:40px;
  background-color: transparent;
  border-color: transparent;
  /* color:white; */
  cursor: pointer;
  transition: 0.3s;
}

#call_mail:hover{
  transform: scale(1.2);
 }

@media screen and (min-height: 900px) {
  #download{
    position:absolute;
    right:30px;
    top:75px;
    background-color: transparent;
    border-color: transparent;
    color:white;
  }
}


.valide{
  position:absolute;
  min-width:150px;
  height:50px;
  bottom: 20px;
  right:30px;
  transition: 0.3s;
}
.valide:hover {
  transform: rotate(-5deg) scale(1.1);
}

.close_preview:hover{
  transform: rotate(-90deg) scale(1.1);
}

.align_middle{
  vertical-align: middle;
}

.cover_img{
  object-fit:cover;
}

#progress {
    width: 80%;
    margin: auto;
    position: relative;
    height: 10px;
    border: solid 2px white;
    border-radius: 5px;
    position: relative;
}
#progress > div {
    background-color: #EAEAEA;
    height: 100%;
    width: 0;
}

#loader{
  position:absolute;
  height:100%;
  width:100%;
  background: black;
}

.streamCam{
  position: absolute;
  height: 100%;
  width:100%;
}


#rec {
  position:absolute;
  bottom:35px;
  left:50%;
	width: 60px;
	height: 60px;
	font-size: 0;
	border: 0;
  border-spacing: 15px;
	border-radius: 60px;
	margin: 0px;
	outline: none;
  transform: translateX(-50%);
}

.notRec{
	background-color: darkred;
}

.Rec{
  background-color: red;
	animation-name: pulseRec;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes pulseRec{
	0%{
		box-shadow: 0px 0px 5px 0px rgba(173,0,0,.6);
	}
	65%{
		box-shadow: 0px 0px 5px 15px rgba(173,0,0,.6);
	}
	95%{
		box-shadow: 0px 0px 5px 25px rgba(173,0,0,0);
	}
}

#recorder{
  position : absolute;
  max-width: 95%;
  max-height: 95%;
  left : 50%;
  top : 50%;
  transform: translateX(-50%) translateY(-50%) rotateY(180deg);
  overflow: hidden;
}

.switch_camera{
  position:absolute;
  right:15px;
  top:15px;
  background-color: transparent;
  border-color: transparent;
  color:white;
}

.color_gris{
  color:#424242;
}
.login{
  //transition: 0.3s;
}
.login:hover {
  //transform: rotate(-5deg) scale(1.1);
  //transition: 0.3s;
}

/* #login{
  background:white;
} */

.swal2-confirm {
  width: 150px;
  height:50px;
  margin:5px;
}

.swal2-deny {
  width: 150px;
  height:50px;
  margin:5px;
}

#logout{
  position:sticky;
  bottom: 30px;
  width: 100%;
  margin-top:40px;
}

@media screen and (min-width: 768px) {
  #logout{
    position:absolute;
    width: 100%;
    bottom:30px;
    margin-top:30px;
  }
}

.bouton-question{
  border-radius: 50px;
  line-height:45px;
}

#dashboard_panel{
  height: 100vh;
}

.ms_clk{
  cursor:pointer;
}

#sidebar{
  transition-timing-function: ease;
  transition-duration: 0.5s;
}

.fa-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.limit_img{
  max-height: 200px;
}






.portfolio-menu{
	text-align:center;
}
.portfolio-menu ul li{
	display:inline-block;
	margin:0;
	list-style:none;
	padding:10px 15px;
	cursor:pointer;
	-webkit-transition:all 05s ease;
	-moz-transition:all 05s ease;
	-ms-transition:all 05s ease;
	-o-transition:all 05s ease;
	transition:all .5s ease;
}

.portfolio-item{
	/*width:100%;*/
}
.portfolio-item .item{
	/*width:303px;*/
	float:left;
	margin-bottom:10px;
}

.nGY2Navigationbar0{
  text-align:center;
}


.ql-snow .ql-picker.ql-size .ql-picker-label::before, 
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: attr(data-value);
}
.ql-bubble .ql-picker.ql-size .ql-picker-label::before, 
.ql-bubble .ql-picker.ql-size .ql-picker-item::before {
  content: attr(data-value);
}

/* .ql-bubble {
  z-index: 9999;
} */

.ql-toolbar {
  border-radius: 20px 20px 0px 0px;
  /* background-color: #EAEAEA; */
  background-color: #F7F7F7;
}

.ql-container {
  border-radius: 0px 0px 20px 20px;
}

/* .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=14px]::before {
  content: attr('Normal');
  font-size: 14px !important;
} */

.ql-color .ql-picker-options [data-value=color-picker]:before {
  content: 'Ma couleur';
}

.ql-color .ql-picker-options [data-value=color-picker] {
  background: none !important;
  width: 100% !important;
  height: 25px !important;
  text-align: center;
  color: blue;
  text-decoration: underline;
}

.ql-background .ql-picker-options [data-value=color-picker]:before {
  content: 'Ma couleur';
}

.ql-background .ql-picker-options [data-value=color-picker] {
  background: none !important;
  width: 100% !important;
  height: 25px !important;
  text-align: center;
  color: blue;
  text-decoration: underline;
}

.ql-picker-options{
  max-height:300px; 
  min-width:150px; 
  overflow-y:auto;
  overflow-x:hidden;
}

/* .ql-picker-options{
  max-height:300px; 
  overflow-y:auto;
} */

.ql-picker-label{
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

.ql-align-center{
  margin:0px;
}



.blob {
  width: 2rem;
  height: 2rem;
  background: rgba(230,230,230,0.85);
  border-radius: 50%;
  position: absolute;
  left: calc(50% - 1rem);
  top: calc(50% - 1rem);
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0.25);
}

.blob-2 { animation: animate-to-2 1.5s infinite; }
.blob-3 { animation: animate-to-3 1.5s infinite; }
.blob-1 { animation: animate-to-1 1.5s infinite; }
.blob-4 { animation: animate-to-4 1.5s infinite; }
.blob-0 { animation: animate-to-0 1.5s infinite; }
.blob-5 { animation: animate-to-5 1.5s infinite; }

@keyframes animate-to-2 {
  25%, 75% { transform: translateX(-1.5rem) scale(0.75); }
  95% { transform: translateX(0rem) scale(1); }
}

@keyframes animate-to-3 {
  25%, 75% { transform: translateX(1.5rem) scale(0.75); }
  95% { transform: translateX(0rem) scale(1); }
}

@keyframes animate-to-1 {
  25% { transform: translateX(-1.5rem) scale(0.75); }
  50%, 75% { transform: translateX(-4.5rem) scale(0.6); }
  95% { transform: translateX(0rem) scale(1); }
}

@keyframes animate-to-4 {
  25% { transform: translateX(1.5rem) scale(0.75); }
  50%, 75% { transform: translateX(4.5rem) scale(0.6); }
  95% { transform: translateX(0rem) scale(1); }
}

@keyframes animate-to-0 {
  25% { transform: translateX(-1.5rem) scale(0.75); }
  50% { transform: translateX(-4.5rem) scale(0.6); }
  75% { transform: translateX(-7.5rem) scale(0.5); }
  95% { transform: translateX(0rem) scale(1); }
}

@keyframes animate-to-5 {
  25% { transform: translateX(1.5rem) scale(0.75); }
  50% { transform: translateX(4.5rem) scale(0.6); }
  75% { transform: translateX(7.5rem) scale(0.5); }
  95% { transform: translateX(0rem) scale(1); }
}

.processing{
  display : none;
  position : absolute;
  height : 100%;
  width : 100%;
}

#check_abo_annuel {
  transform: scale(2);
  margin-left : 3px;
  margin-right : 20px;
}

#btn_group_alternative {
  position: absolute;
  width: 100%;
  bottom:60px;
}

.btn_home_csl{
  padding-left:5px;
  padding-right:5px;
}

 #font_stack {
  position:fixed;
  width:100%;
  height:100%;
  z-index:-1; 
  //background: linear-gradient(180.03deg,rgba(74,163,162,.53) -1.76%,#4aa3a2 87.95%);
}

.pick_col {
  width:50px;
}

.capture_webcam_portrait {
  position:absolute;
  width:80px;
  height:80px;
  bottom:30px;
  left : 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: white;
  border: 3px solid #EFEFEF;
  transition: 0.3s;
}

.capture_webcam_paysage {
  position:absolute;
  width:80px;
  height:80px;
  top: 50%;
  right : 30px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: white;
  border: 3px solid #EFEFEF;
  transition: 0.3s;
}

.capture_webcam_paysage_droit {
  position:absolute;
  width:80px;
  height:80px;
  top: 50%;
  left : 30px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: white;
  border: 3px solid #EFEFEF;
  transition: 0.3s;
}

.change_camera_portrait {
  position:absolute;
  bottom: 50px;
  right : 50px;
  background-color: transparent;
  border-color: transparent;
  color:white;
  cursor: pointer;
  transition: 0.3s;
}

.change_camera_paysage {
  position:absolute;
  top: 50px;
  right : 50px;
  background-color: transparent;
  border-color: transparent;
  color:white;
  cursor: pointer;
  transition: 0.3s;
}

.change_camera_paysage_droit {
  position:absolute;
  top: 50px;
  left : 50px;
  background-color: transparent;
  border-color: transparent;
  color:white;
  cursor: pointer;
  transition: 0.3s;
}

#stack_options{
  position:absolute;
  right:15px;
  top:15px;
}

.tab_event{
  height:50px;
}

.big_btn_call_action {
  height:65px;
}

#create_qrcode, #create_photographe, #create_event {
  height:65px;
}

.dashboard_menu_icon {
  width:16px;
  height:16px;
}

.printer_status{
  position:absolute;  
  bottom:25px; 
  left:25px; 
  height:7px; 
  width:7px; 
  border-radius:50px;
}
.printer_unconnected{
  color:#ff6464;
  background:#ff6464;
 }

.printer_connected{
  animation: blinker 1.5s linear infinite;
  color:#7dd87d;
  background:#7dd87d;
}
@keyframes blinker {
  /* 50% {
   opacity: 0;
 } */
 0% {
  /* transform: scale(0.1); */
  box-shadow: 0 0 0 0 rgb(125 216 125 / 60%);
  opacity:1;
  }

  50% {
    /* transform: scale(1); */
    box-shadow: 0 0 0 10px rgba(125, 216, 125, 0);
    /* opacity: 0.5; */
  }
}


.signal-icon {
  height: 18px;
  width: 18px;
  /* To show you the power of flexbox! */
  display: flex;
  /* Bars should be placed left to right */
  flex-direction: row;
  /* Evenly space the bars with space in between */
  justify-content: space-between;
  /* Sink the bars to the bottom, so they go up in steps */
  align-items: baseline;
}
.signal-icon .signal-bar {
  /* 4 + 3 + 4 + 3 + 4 = 18px (as set above)
     4px per bar and 3px margins between */
  width: 4px;
  /* All bars faded by default */
  opacity: 30%;
  /* Choose a color */
  background: #aa2200;
}

/* 3 different heights for 3 different bars */
.signal-icon .signal-bar:nth-child(1) { height: 40%; }
.signal-icon .signal-bar:nth-child(2) { height: 70%; }
.signal-icon .signal-bar:nth-child(3) { height: 100%; }

/* Emphasize different bars depending on
   weak/medium/strong classes */
.signal-icon.weak .signal-bar:nth-child(1),
.signal-icon.medium .signal-bar:nth-child(1),
.signal-icon.medium .signal-bar:nth-child(2),
.signal-icon.strong .signal-bar:nth-child(1),
.signal-icon.strong .signal-bar:nth-child(2),
.signal-icon.strong .signal-bar:nth-child(3)
{ opacity: 100%; }


/* #font_stack {
  position:absolute;
  height:100%;
  width:100%;
  background-image: url("https://dev.facebooth.fr/public/back.jpg");
  background-position: top;
  background-size:cover;
  background-repeat: no-repeat;
  z-index:-1; 
} */

/* body {
  background-image: url("https://dev.facebooth.fr/public/back.png");
  background-position: top;
  background-size:100%;
}  */



/*Progress Circle
.dashboard {
  display: flex;
}

svg {
  width: 114px;
  height: 114px;
  margin: 1em;
}

.bg {
  fill: none;
  stroke-width: 10px;
  stroke: #1A2C34;
}

[class^="meter-"] {
  fill: none;
  stroke-width: 10px;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  
}

.meter-1 {
  stroke-dasharray: 360;
  stroke-dashoffset: 100;
  stroke: aqua;
  animation: progress-1 1s ease-out;
}
*/

#progress_paper{
  height:25px;
}

#stack_print{
  position:absolute;
  height:calc(100% - 250px);
  width:100%;
  padding-left: 4%;
  padding-right: 4%;
}


#select{
	/* position:sticky; */
	left:0px;
	/* bottom:-200px; */
  bottom:0px;
	z-index:1;
	width:100%;
	height:200px;
	background-color:white;
    /* background: rgba(255, 255, 255, .6); */
	border-radius: 35px 35px 0px 0px;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, .13) 0px 6px 26px;
	transition: all 0.3s ease-in-out;
    /* backdrop-filter: blur(20px); */
}

#select_button{
	position: absolute;
	top:5%;
	left:5%;
	height:90%;
	width:90%;
}

#select_button .btn{
	min-height:55px;
}

.domain_check_confirm{
  width:250px;
}

.print_user_limit{
	font-size:13px;
}

#ad_mode {
	position: absolute;
	width:100%;
	height:15px;
	line-height: 15px;
	background-color: red;
	text-align: center;
}

/* #unlk{
	position: absolute;
	top:0;
	left:0;
	width:40px;
	height:40px;
	background-color: transparent;
	z-index: 1000;
} */

#SharingModal .modal {
	z-index: 1255;
}

#share_btn_img{
  /* background-color: transparent;
  border-color: transparent;
  color:white; */
  cursor: pointer;
  transition: 0.3s;
}

#share_btn_img:hover{
  transform: scale(1.2);
}

#img_end {
  margin-top:30px;
  height:auto;
  max-width: calc(100% - 20px);
  max-height:80px;
}

#text_title_end {
  margin-top:30px;
}

.deldate {
  min-width:50px;
}

.swal2-input-label {
  display: flex;
  justify-content: center; /* Centrer horizontalement */
  align-items: center; /* Centrer verticalement */
  text-align: center; /* Centrer le texte si nécessaire */
}

#cancel_upload{
	position : relative;
  left : calc(50vw - 40px);
  top : calc(50vh + 30px);
  min-width:80px;
}

.btn_addon {
  min-width: 110px;
}

.moderation_btn {
  min-width:90px;
}

.photographe_name_btn {
  min-width: 158px;
}

#info_tool {
  position: absolute;
  top: 15px;
  right:20px;
  font-size: .500em;
}

.icon-white {
  color:white;
}

#temps_restant_compteur_info.flipdown.flipdown__theme-dark .rotor, #temps_restant_compteur_info.flipdown.flipdown__theme-dark .rotor-top, #temps_restant_compteur_info.flipdown.flipdown__theme-dark .rotor-leaf-front{
  background-color: #3F3B3B;
}

#temps_restant_compteur_info.flipdown.flipdown__theme-dark .rotor-bottom, #temps_restant_compteur_info.flipdown.flipdown__theme-dark .rotor-leaf-rear {
  background-color: #3F3B3B;
}



.printer_status_connected{
  animation: blinker_status 1.5s linear infinite;
}
@keyframes blinker_status {
 0% {
  box-shadow: 0 0 0 0 rgb(13 110 253 / 60%);
  opacity:1;
  }
  50% {
    box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
  }
}

.panel_decor {
  background:#F5F5F7;
  padding: 20px 15px;
  border-radius: 20px;
}

#custom_note_info p {
  margin-top: 0;
  margin-bottom: 0;
}

.mini_txt {
  font-size: 16px;
}

.form-switch.form-switch-lg .form-check-input {
  height: 2rem;
  width: calc(3rem + 0.75rem);
  border-radius: 4rem;
}

.beta_menu {
  position: absolute;
  font-size: 8px;
  transform: rotate(25deg);
}
.beta_badge {
  transform: rotate(-15deg);
}

.shadow_blue {
  box-shadow: rgba(13, 110, 253, 0.5) 0px 0px 20px 0px;
}