#child{
	position:absolute;
	display:none;
    top:200px;
	z-index:9;
	color:red;
}
#td1{}
#td2{color:#4e5860; text-align:right;}
.point:before{content: "";
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    background-color: #c7cfd7;
    border-radius: 100%;
    margin-left: 8px;
    margin-right: 8px;
	display:inline-block;
	}	
	
#titreprestation{
	text-align:center;
	border-bottom:solid 0.3px #d8d8d8;
	padding-bottom: 1.313rem;
}
.nbprestation{
	color:#4e5860;
	margin:10px 0;
}
#titreprestation,.sstitre,#titrebonasavoir{
	font-size: 0.75rem;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    color: #272727;
    margin-bottom: 0.938rem;
	}
	
#apropos{
	font-size: 0.813rem;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.69;
    letter-spacing: 0.41px;
    color: #252525;
    margin-bottom: 0.938rem;
}

#child:target{

display:block;
}

#child { opacity: 0; }
#child:target {opacity: 1;}

.divfermer a{ display:block; font-size:18px;
    text-decoration:none; color:#202020; font-weight:bold;}
	
.divtitre1	{font-size: 1rem;
    letter-spacing: 2px;
    color: #272727;
    padding-bottom: 1.688rem;
    margin-bottom: 1.313rem;
    border-bottom: solid 0.3px #d8d8d8;
    text-transform: uppercase;
    text-align: center;}

.black_overlay {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1001;
  -moz-opacity: 0.6;
  opacity: .60;
  filter: alpha(opacity=80);
}

.white_content {
	font-size: 0.813rem;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.69;
    letter-spacing: 0.41px;
    color: #252525;
    margin-bottom: 0.938rem;
	border-radius: 3px;
	box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);
	transition:all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  display: none;
  position: fixed;
  top: 15%;
  left: 15%;
  width: 70%;
    height: 70%;
    max-height: 80%;
  padding: 16px;
  z-index: 1002;
  overflow: auto;
  text-align: justify; 
  background:#ffffff;
}

.headerclass {
    text-align: left; 
}

.divfermer {
	float: right;
    text-align: right; 
}

.boutonprestation{
	border-color: white;
	font-style: bold;
	color: #81d742;
}

.cheveux{margin: 20px 0;}

.cheveux p{
  border: 2px solid #dcdcdc;
  border-radius: 4px;
  box-shadow: 0 0 8px #d9d9d9;
  border-spacing: 16px;
  margin: 10px 0px 10px 0;
  padding: 15px;
}

.classDetailCheveux p {
  display: flex;
  justify-content: space-between;
  border: 2px solid #dcdcdc;
  border-radius: 4px;
  box-shadow: 0 0 8px #d9d9d9;
  border-spacing: 16px;
  margin: 10px 40px 0 0;
  padding: 15px;
}


#idspanchev1,#idspanchev2,.tdright{text-align:right; text-wrap-mode: nowrap;}














 .libelleNomPro
    {
        font-size: 24px;
    font-weight: 600;
    text-align: left;
    color: #202020;
	margin:0 0 10px 0;
    }

    .libelleAdrPro
    {
        font-size: 16px;
    text-align: left;
    font-weight: 400;
    color: #4e5860;
    }
	.adrPro::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.2084 9.16665C15.2084 12.5 10.0001 16.0416 10.0001 16.0416C10.0001 16.0416 4.79175 12.5 4.79175 9.16665C4.79175 6.24998 7.23866 3.95831 10.0001 3.95831C12.7615 3.95831 15.2084 6.24998 15.2084 9.16665Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.875 9.16669C11.875 10.2022 11.0355 11.0417 10 11.0417C8.96447 11.0417 8.125 10.2022 8.125 9.16669C8.125 8.13115 8.96447 7.29169 10 7.29169C11.0355 7.29169 11.875 8.13115 11.875 9.16669Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  margin-right: 8px;
  vertical-align: middle;
}
	.telPro::before {
 content: "\2706";
    display: inline-block;
    margin: 0 11px 0 3px;
    font-size: 16px;
    font-weight: 600;
}

.libNum{color:#625df5; margin-right:4px;}

.libelle1{font-weight:500;
	font-size:20px; margin: 20px 0;}

.libelle{text-overflow: ellipsis;
    font-weight:400;
	font-size:14px;
    color: #4e5860;
    margin-bottom: 8px;}

    .libelle3
    {
        font-size: 24px; font-weight:600; margin: 40px 0;
    }

html,body {
  height: 100%;
  background:#f7f7f7;
  font-family: Inter, Helvetica, sans-serif;
  margin: 0;
  padding:0;
}

.wrapper{display: flex;
  flex-direction: column;
  min-height: 100vh;}
  
  main{flex:1;}

footer {
   padding: 1rem;
  text-align: left;
  border-top: 1px solid #ddd;
  background: #f7f7f7;
  margin-left: 10%;
  margin-right: 10%;
  margin-top:32px;
}

footer img{margin:-3px 4px 0 0;}

.floatedTable {
    position:fixed;
    margin-left:-150px; /* half of width */
    margin-top:-150px;  /* half of height */
    text-align: center;
    top:35%;
    left:25%;
    font-size: 14pt;
}
table {
    width: 100%;
	background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #eef0f2;
    box-shadow: 0 4px 8px -2px rgba(26, 27, 31, 0.08);
}
td {
    padding: 30px 32px 30px 32px;
	border-bottom: 1px solid #eef0f2;
	cursor:pointer;
}
.nomCategorie{font-size:16px;}
.buttonChoisir{padding:8px 12px; min-height:32px; border-radius:8px; background-color:#202020; color:#ffffff; font-size:14px;  cursor:pointer;}
.buttonSelectionner{padding:8px 12px; min-height:32px; border-radius:8px; background-color:#eef0f2; color:#4e5860; font-size:14px; cursor:pointer;}
.buttonSelectionner:hover{background-color:#c7cfd7;}

header{background:#FFFFFF;}
.professionnel{max-width:80%; margin:auto;}
#logopro{width:140px; margin:30px 0;}
#contentPage{margin:auto; max-width:80%; padding-top:32px;}

a.details{color:#4e5860; margin-top:8px; display:block;}


#week-view{width:470px;}
#week-view ul li a .badge{background:#f7f7f7;}
#week-view ul li a .badge:hover{background:#eef0f2;}
#week-view ul li.active a .badge{background-color:#202020; color:#ffffff;}
#week-view ul li.active{border-bottom:0;}

#dialog-saisie-email{text-align:center;}
#dialog-saisie-email button{margin-top:20px;}
.prochainedispo{display:none;}


.myDateLeft{float:left; width:500px;}
.myDateRight{float:left; width:450px; text-align:center;}
#idtypeform{text-align:center;}



    input#myDate {height:60px; border:1px solid #202020; border-radius:8px; font-size: 22px; margin:45px 0 25px 0;}

    .confirmation
    {
        font-size: 28px; 
    }

    #listWorker
    {
		border:1px solid rgb(199 207 215);
		box-shadow:0 2px 4px -1px rgba(26, 27, 31, 0.05);
		border-radius:8px;
		line-height: 1.15;
		font-family: sans-serif;
        height:40px;
		flex-grow: 1;
		padding: 8px;
		font-weight:400;
		font-size:14px;
		width: 300px;
    }
    .month-year, .week-container, .badge {
        font-size: 16pt;
        font-weight: 400 !important
    }


    .fieldset { 
        padding:0; 
        border:0; 
        margin-top:15px; 
    }

    .tabcenter {
    }
	
	.tdHour{padding:15px;}
	.tdHour span{background:#f7f7f7; padding:10px; font-size:18px;}
	.tdHour.tdHourinActive span:hover{background:#eef0f2;}
	.tdHourActive span{color:#ffffff; background:#202020;}
	.tdHourinActive span{}

    #container {
      width: 100%;
      padding: 10px 0;

    }

    #tablehoraire
    {
    }

    #disponibilite
    {
    }

    #dispo_body
    {
    }

    .container_row
    {
        width: 100%;
        white-space: nowrap;
        display: inline-block;
        margin: 0 auto;
        overflow-x: scroll;
    }


	.fieldset .label, .fieldset .input { 
        display:block; 
    }

   .fieldset .input { 
	margin-top:10px;
        margin-bottom:15px;		
        width:100%; 
        padding: .4em; 
    }

    .fieldset { 
        padding:0; 
        border:0; 
        margin-top:15px; 
    }


    .erreur
    {
      padding: 1px;
      background-color: red;
    }



@media only screen and (max-width: 750px) {
footer{margin-left:0; margin-right:0;}
.professionnel{max-width:100%; padding:5px;}
#contentPage{max-width:100%; padding:5px;}
.nomCategorie{font-size:22px;}
#td1,#idchev1,#idchev2{font-size:22px;}
td{padding:20px 10px;}
.classDetailCheveux td{padding:20px 1px;}
}

@media only screen and (max-width: 500px) {
#week-view{width:300px;}
.myDateLeft{width:350px;}
.myDateRight{width:350px;}
}