@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*,html{font-family: 'Roboto', sans-serif; margin: 0;padding: 0;border: 0;-webkit-tap-highlight-color: rgba(0,0,0,0);outline: none;}
 ::after, ::before {
    box-sizing: border-box;
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
}
 a{text-decoration:none;color: inherit;}
 
 .noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
 
 body{color : #454550}
 
 .select-css {
    cursor: pointer;
    color: var(--font);
    line-height: 1.3;
    padding: .2em 1.5em .2em .4em;
    max-width: 220px;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--line_grey);
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}
 .overlay
 {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 150;
    background-color: rgba(0,0,0,.7);
    display:none;
 }
 
  .overlay.display{display:block}
 
 div.content
 {
	display: block;
height: 100%;
width: 100%;
position: absolute;
overflow-x: hidden; 
 }
 
.logger_body
{
width:100%;
height: 100%;
background-color:var(--lightblue);	
}

.title_form
 {
   text-align:center;
   padding-top:40px;
   display:block;
   margin-bottom: 20px;	
   color:var(--theme) 
 }
 
.logger
{
  display:block;
  margin: auto;
  background-color: #FFFFFF;
  width : 30%;
  top: 230px;
  position: relative;
  height:35%;
  max-width:700px;
  transition:all .4s ease;
  border-radius:5px;
  box-shadow: 0 4px 8px rgba(0,0,0,.3);
  padding: 3%;
}

.logger form
{
 margin:auto;
 display:block;
}

.logger input
{
width:300px;
line-height:38px;
border:1px solid var(--blue);
border-radius:4px;
display:block;
margin: 15px auto;
font-size:18px;
padding-left:5px;
transition:all .4s ease; 
color:var(--theme)	
}

.logger input:focus
{
padding-left:15px	
}

button.valider 
{
    border: none;
    width: 300px;
    background-color: #458cff;
    color: white;
    border-radius: 5px;
    padding: 10px 0;
    display: block;
    font-weight: bold;
    font-size: 22px;
    text-shadow: 0 2px 3px rgba(0,0,0,0.47);
    box-shadow: 0 2px 3px rgba(0,0,0,0.47);
    text-align: center;
    cursor: pointer;
    position: relative;
	margin:auto;
	transition:all .4s ease;
}

button.valider:active
{
  top:5px	
}

.err_msg{color:red;margin-top: 5px;}
 
#sidemenu
{
 width:250px;
 height:100%;
 display: block;
 cursor:pointer;
 background-color: var(--blue);
 transition:all .2s ease;
 position:fixed;
 z-index:200
}

#sidemenu span
{
display:block;
width:100%;
font-size:18px;
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(0,0,0,0.2);
color:#FFFFFF;
padding: 15px 0;
white-space: nowrap;
}

#sidemenu span.item:hover,#sidemenu span.open
{
background-color: var(--lightblue);	
color: var(--blue);
}

#sidemenu span a
{
width: 100%;
display: table;
}


#sidemenu span:last-of-type
{
border-bottom: none;
padding: 0px;	
}

#sidemenu span i{padding-left: 18px;display: table-cell;}

#sidemenu span strong
{
text-align:right;
display: table-cell;
padding-right:20px;
}

#menu_btn
{
color:#FFFFFF;
background-color: var(--blue); 
display:none;
position:absolute;
margin: 10px;
cursor:pointer;
z-index:150;
box-shadow: 0 4px 5px rgba(0,0,0,0.3);
}

#menu_btn i
{
font-size:28px;	
}

#menu_btn .fa-bars{display:block;padding:15px 18px;}
#menu_btn .fa-times{display:none;padding:15px 20px;}

#menu_btn.active .fa-bars{display:none}
#menu_btn.active .fa-times{display:block}

.appview{display: block;width:100%; height:100% ; position:absolute; padding : 40px 0;transition: all .2s ease;margin-left: 250px;}

.appview.display{margin-left: 250px;}


/*********************************** THEME **********************************************************/

section.theme,section.soins,section.infos{margin-left: 25px;}
section.theme form{margin-top:10px; margin-bottom: 15px}

section.theme fieldset{display:block}

section.theme label
{
 border: 1px solid #ccd	;
 padding: 5px 10px;
 border-radius:4px;
 display:inline-block;
 cursor:pointer
}

section.theme input[type=text]
{
 width:53%;
 border: 1px solid #ccd	;
 padding: 5px 10px;
 border-radius:4px;	
 line-height:20px;
 margin-bottom:8px
 
}

section.theme input[type=text]:focus
{
 border: 2px solid #e94286	;	
}

#preview{width:90%; height:870px}

.reset_btn{height:30px;width:40px;border-radius:4px; cursor:pointer;position:relative;color:white;background-color:#d08442;box-shadow: 0 2px 5px rgba(0,0,0,0.3);}
.reset_btn:active{top:2px}

.sendCustom{padding:6px 10px 5px;border-radius:4px;background-color : #00a34e; color : white;font-size:18px;cursor:pointer;box-shadow: 0 2px 5px rgba(0,0,0,0.3);position:relative;font-weight:bold}
.sendCustom:active{top:3px}

#confirm,#confirm_2
{
  width:50%;
  position:fixed;
  z-index:150;
  background-color:white;
  display:none;	
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  margin-top:10px;
  overflow:hidden;
  border-radius:4px;
  max-width: 585px;
}

#confirm.display,#confirm_2.display{display:block;	}

#confirm span.close,#confirm_2 span.close{background-color:red;color:white;padding:12px; display:block;width:20px;text-align:center;float:right;cursor:pointer}

#confirm span.entete,#confirm_2 span.entete{text-align:center;margin: 15px auto;display: block;width: 50%; font-weight:bold; font-size:22px;}
#confirm span.texte,#confirm_2 span.texte{text-align:justify;margin: 15px auto;display: block;width: 95%; }

/*********************************** SOINS **********************************************************/

dropdown {display:block;cursor:pointer;margin: 12px 0 10px  0; overflow:hidden;white-space:nowrap;font-size:16px; text-transform:uppercase}
dropdown ul,dropdown li{list-style:none}

dropdown > ul > li{
border-left: 1px solid rgba(255,255,255,0.05);
border-right: 1px solid rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(0,0,0,0.2);
text-align: center; width: 100px;height: 30px;background-color: var(--blue);float:left;color:var(--font_alt);font-weight:bold;padding-top: 15px;
white-space:nowrap;text-overflow:ellipsis; overflow:hidden
	}

dropdown > ul > li > ul{display:block;position:absolute;z-index:60;background-color: var(--blue);margin-top: 12px;margin-left: -1px;}

dropdown > ul > li > ul > li{
	text-overflow: ellipsis;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(0,0,0,0.2);
text-align: center; width: 72px;height: 30px;background-color: var(--blue);color:var(--font_alt);font-weight:bold; display:none;padding: 10px 15px 0;}

dropdown > ul > li > ul > li:hover,dropdown > ul > li > ul > li.active{background-color: var(--lightblue);color: var(--blue);}

dropdown > ul > li:first-of-type
{
 border-top-left-radius: 4px;
 border-bottom-left-radius: 4px;
 	
}

dropdown > ul > li:last-of-type
{
 border-top-right-radius: 4px;
 border-bottom-right-radius: 4px;
 	
}

dropdown > ul > li.active{border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;}

dropdown > ul > li.active > ul > li{display:block}

dropdown > ul > li > ul {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;overflow: hidden;}

#newpic{display:block;opacity:0;
position: absolute;
cursor: pointer;}
#avatar_soin
{width: 100%;
height: 100%;
float:left ;
overflow: hidden;
border-radius: 5px;
/*border: 1px solid var(--line_grey);*/
margin-right:15px;
margin-bottom:10px;
cursor:pointer;
background-color:#efefef;
z-index:50;
}
#avatar_soin i{left:32px; top:18px; display:block;position: relative;font-size:35px;color:#ccc;pointer-events: none;}

#corps_soin{text-align:justify;width:73%;min-height: 190px;margin-bottom: 50px; display:block;}

section.soins input[type=text]
{
  font-size: 18px; font-weight:bold; color: var(--font);margin: 6px 0;
}
section.soins input[type=text]::placeholder{text-transform:uppercase;}

#text_soin{display: block;cursor:pointer;min-width: 200px;
min-height: 80px;}
#text_soin:hover{opacity:.5}

section.soins #textarea_soins{box-shadow: 0 2px 5px rgba(0,0,0,0.3);width:95%; height:380px;background-color:#F7F7F9;border-radius:5px;padding: 10px 100px 10px 10px;display:none;}
section.soins input[type=text]::placeholder{ color: var(--font);opacity:1}
section.soins input[type=text]:focus{border:1px solid black;line-height:30px;border-radius:5px;padding: 5px 10px;  transition:all .2s ease;}
section.soins input[type=text]:focus::placeholder{ color: var(--font);opacity:0}

/*********************************** INFOS **********************************************************/

section.infos li.active{background-color:var(--lightblue);color:var(--blue);border:1px solid var(--blue);height:29px}
section.infos dropdown > ul > li > ul > li:hover, 
section.infos dropdown > ul > li > ul > li.active 
{
border-left:1px solid var(--blue);
border-right:1px solid var(--blue);
border-bottom:1px solid var(--blue);
width:120px!important;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

section.infos form{margin-top:10px; margin-bottom: 15px}

section.infos fieldset{display:block}

section.infos label
{
 border: 1px solid #ccd	;
 border-radius:4px;
 display:inline-block;
 cursor:pointer;
 width: 150px;
 height: 120px;
}

section.infos input
{
 width:60%;
 border: 1px solid #ccd	;
 padding: 5px 10px;
 border-radius:4px;	
 line-height:20px;
 margin-bottom:8px
 
}

section.infos input:focus
{
 border: 2px solid #e94286	;	
}

input[type=number]
{
-moz-appearance: textfield;
-webkit-appearance: textfield;
}


#close,#save{display:none}
#close.show,#save.show{display:inline-block!important}
.show{display:block!important}
.hide{display:none!important}



.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--theme);
    color: white;
    text-align: right;
    padding-top: 3px;
    padding-bottom: 1px;
    font-size: 80%;
	white-space: nowrap;
	z-index:999
}
.foot_left{text-align:left;width:48%;display: inline-block;}
.footer .foot_group{width:49%;display: inline-block}

/** PHONE **/
@media screen and (max-width: 1024px) 
{
	
	
section.infos input
{
 width:95%;
}

section.soins textarea{width:100%;padding: 10px;}
.sendCustom{font-size:14px;}

#corps_soin{width:97%;}
#corps_soin h1{margin: 10px 0;}

#confirm,#confirm_2
{
width:95%;
left: 12px;
}

body
{
overflow-x:hidden;	
}

.title_form
 {
	padding-top:100px; 
 }
 
 
.logger
{
width:100%;
height:100%;
top:0;
margin: auto;
padding:0
}

#sidemenu
{
 width:0px;	
}

#sidemenu > span > a {display:none;}

#sidemenu.active
{
width:250px; 	
}

#sidemenu.active a
{
  display:table	
}

#menu_btn
{
 display:block;	
 border-radius:50%;
 right:0
}

.appview{margin-left:unset; }

.content{overflow-x:hidden!important;width:100%}

#preview {
    height: 570px;
}
.foot_left{display:none!important}
.footer {text-align:center}	
.nophone{display:none!important}
}