@charset "utf-8";
@font-face {
font-family: "Samsung";
src: url("../font/samsung/SamsungSans-Regular.woff") format("woff")
}
@font-face {
font-family: "Montserrat";
src: url("../font/montserrat/MontserratAlternates-Bold.woff2") format("woff2")
}

:root {
--apptheme: #1C1C1C;
--apptheme_2:#161616;
--font: #595959;
--font_2: #666;
--font_3: #888;
--theme_dark: #152C51;
--theme: #295499;
--theme_1: #3770CC;
--theme_2: #458cff;
--theme_3: #6AA3FF;
--theme_4: #7CAEFF;
--bgcontent: #F2F6FB;
--bghead: #FAFBFC;
--line:rgba(0,0,0,0.075);
--line2:#C1CAE2;
--line3:rgba(0,0,0,0.17);
--green: #45B363;
--green2: green; 
--green3:#2ecc71;
--green4:#176638;
--red: #F92D32;
--red_2:#73171b;
--camel: #D3A372;
--orange:#FFA54F;
--orange2:#FA464A;
--orange4:#FF6600;
--orange5:#EA6C15;
--jaune:#ffe500;
--off: #eef;
/** TOOLS **/
--disabled : #e9e9ed;
--off_minus : rgba(67,95,113,0.2);
--hint-bottom: rgba(0,0,0,0.2);
--hint-top: rgba(255,255,255,0.05);
--hint : rgba(0,0,0,0.05);
--dash:#bbb;
--dash1 :#93949A;
--dash2:#787a81;
--dash3:#ccd;
--dash4:#c0c0c0;
--red_pin:#C1272D;
--dropzone:#f5f5f5;
--bank_zone :#05a4be;
--bank_zone_2:#EBF7F9;
--buy_zone: #fa4b47;
--buy_zone_2: #FEF2F1;
--sale_zone :#F2AC2E;
--sale_zone_2 :#FDF6EA;
--ndf_zone:#97a1aa;
--onday:rgba(255,204,97,.47);
}
* {
border:none;
box-sizing: border-box;
outline: none;
-webkit-tap-highlight-color: transparent!important;
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
-khtml-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
margin: 0;
padding: 0;
scrollbar-width: thin;
}
*::before,*::after{pointer-events:none;}
::-webkit-scrollbar { display: none; }

html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
background: var(--bgcontent);
}
body {
display: block;
position: relative;
font-family: 'Samsung';
font-size:1em;
color: var(--font)
}

#loader{display:none}
#overlay{
display:block;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.47);
z-index: 100;
}
#confirmBox{
display:block;
position:fixed;
text-align:center;
line-height:24px;
width:max-content;
max-width: 100%;
background:#FFFFFF;
height:max-content;
max-height:100%;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
padding: 25px 45px;
border-radius:5px;
box-shadow:0 1px 3px rgba(0,0,0,.47);
z-index:101;
}
#warner,.warner{
  font-size: 1.8em;
  color: var(--red_pin);
  display: block;
  margin-bottom: 8px;}
#warner.mild{color:var(--orange)} 
#confirmBox span{
display: inline-block;
position:relative;
color:#FFFFFF;
box-shadow: 0 1px 2px rgba(0,0,0,.47);
text-shadow: 0 1px 2px rgba(0,0,0,.27);
padding: 4px 12px;
margin:8px 0 6px 0;
font-weight:normal;
cursor:pointer;
border-radius:3px	
}
#confirmBox span:active{ top: 3px}
#confirmBox #goBook{ 
background: linear-gradient(to bottom, var(--theme_2),var(--theme));
margin-right: 4px
}
#confirmBox #cancelBook{ 
background: linear-gradient(to bottom, var(--red),var(--red_2));
margin-left: 4px
}

#confirmBox #conf_closer{
position: absolute;
top: 5px;
right: 15px;
box-shadow:none;
text-shadow:none;
cursor:pointer;
height: 30px;
}
#confirmBox #conf_closer::before,#confirmBox #conf_closer::after{
content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 8px;
  margin: auto;
  width: 24px;
  height: 5px;
  background: var(--red);
  border-radius: 2px;	
}
#confirmBox #conf_closer::before{transform: rotate(-45deg);}
#confirmBox #conf_closer::after{transform: rotate(45deg);}

#confirmBox #conf_msg{
	display:block;
	width:max-content;
	max-width:220px;
	margin:auto;
	box-shadow:none;
	text-shadow:none;
	color:var(--font);
	font-weight:bold;
	word-wrap: break-word;
}
#confirmBox #conf_btn{display:block;background:var(--green)}
#confirmBox #conf_btn.red{background: linear-gradient(180deg, var(--red),var(--red_2));}

body.loading #loader{
display: block;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999999;	
background: rgba(0,0,0,.45)
}
body.loading #loader span{
position:absolute;
display:block;
color:var(--theme_3);	
top:0;
bottom:0;
left:0;
right:0;
margin:auto	;
height:115px;
width: 115px;
border-radius: 50%;
background:white;
text-align:center;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
body.loading #loader span i{
width:max-content;
height:max-content;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
font-size:5.5em;
opacity:.8
}

table{table-layout:fixed;border-collapse:collapse;width:100%}
input{background:white;color:var(--font)}
input[type="number"]{appearance:textfield}
.bolder{font-family:'Montserrat', sans-serif;}

#dropdown ,#menu_trigger,#side_trigger ,#km_calc  .bg,#km_calc,#km_settings .bg{background:white}
.shadowed {
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.shadowed_plus {
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.shadowed_2 {
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}

.graphs{
  position: relative;
  display: inline-block;
  width: max-content;	
}
#beta{
position: relative;
display: inline-block;
width: 30px;
font-size: .54em;
background: white;
height: 18px;
line-height: 18px;
color: var(--apptheme_2);
text-align: center;
border-radius: 2px;
font-weight: normal;
opacity: .9;
text-transform:uppercase;
top: -4px;	
}
#bilan span{
  display: inline-block;
  position: relative;
  vertical-align: top;
  width:150px	
}

#logger{
position:absolute;
top:0;
left:0;
right:0;
height:65%;
background: linear-gradient(to bottom, var(--theme_3) 0%,var(--theme) 100%);
}
#logger::before{
content:'';
display:block;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
}
#logger::after {
content: "";
display: block;
position: absolute;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 20vh 0 0 100vw;
border-color: transparent transparent transparent var(--bgcontent);;
}
#logger .log_container{
display: block;
position: absolute;
right: 2.8%;
width: 55%;
padding: 60px;
border-radius: 5px;
margin: auto;
top: 160px;
z-index: 3;
box-shadow: 0 20px 20px -15px rgba(0,0,0,0.75);
background: linear-gradient(to bottom, white 0%,var(--dash4) 100%);
max-width: 530px;

}
#logger .log_container::before{
content: '';
display: block;
position: absolute;
width: 100px;
height: 100px;
background: linear-gradient(to bottom, white 0%, white 50%, transparent 100%);
left: 0;
right: 0;
margin: auto;
top: -45px;
border-radius:50%;
}
#logger .log_container::after{
content:'';
display:block;
position:absolute;
left: 0;
right: 0;
margin: auto;
width: 90px;
height: 90px;
top: -40px;
border-radius:50%;
background:url('../img/svg/favicon.svg');
background-size:contain;
background-position:center;
background-repeat:no-repeat

}
#logger .log_type{
display:block;
position:relative;
margin: 35px 0 30px 20px;
cursor:pointer
}
#logger #log_span{
display:inline-block;
text-transform:uppercase;
font-size: 1.4em;
margin-right: 20px;
position: relative;
}
#logger #log_span::after{
display:none;
content:'';
position:absolute;
height:2px;
bottom: -7px;
left: 0;
right: 0;
background: var(--theme);	
transition:width .3s ease
}
#logger #log_span:hover::after,
#logger #log_span.on::after{display:block;}
#logger #sub_span{
position: relative;
transition:all .3s ease;
border-radius: 25px;
top:-2px
}
#logger #sub_span:hover,
#logger #sub_span.on{
color:white;
background: var(--green3);
padding: 10px 15px;

}
#logger #sub_span:active{top:3px;background:var(--green4)}
#logger fieldset{display:block;padding-bottom: 50px}
#logger section{position:relative}
#logger section .password {  display: none;}
#logger input{
font-family: 'Samsung'; 
display:block;
position:relative;
width: 100%;
height:50px;
padding: 10px;
text-indent: 10px;
border: 1px solid var(--dash3);
font-size:1em;
border-radius:7px;
margin-bottom:15px;
}
#logger input:focus{ border:2px solid var(--theme);height:49px;text-indent: 9px;}
#logger input.wrong{ border:2px solid var(--red); margin-bottom: 3px; height:49px;text-indent: 9px;}
#logger input.wrong + span{ 
display:block;
color: var(--red);
font-weight: bold;
font-size: .8em;
padding-left: 3px;
margin-bottom: 6px;}
#logger input.col-50{width:49%; display:inline-block}
#logger input.col-50.wrong + span{width:max-content; position:absolute}
#logger input.col-right{float:right}
#logger input.col-right.wrong + span{right:6px}
#logger input.col-50.col-right.wrong ~ #sub_adresse,
#logger input.col-50.wrong ~ #sub_adresse,
#logger input.col-50.col-right.wrong ~ #sub_pass_o,
#logger input.col-50.wrong ~ #sub_pass_o,
#logger input.col-50.col-right.wrong ~ #sub_siret_o,
#logger input.col-50.wrong ~ #sub_siret_o{margin-top: 24px!important;}

#sub_nom,#sub_alias,#sub_city{text-transform:uppercase}
#sub_id_o{text-transform:lowercase}


#logger button{
display:block;
color:white;
width:100%;	
background: linear-gradient(180deg, var(--theme_2),var(--theme));
box-shadow: 0 2px 5px rgba(0,0,0,0.47);
text-transform:uppercase;
padding: 15px;
border-radius:7px;
font-size:1em;
cursor:pointer
}
#logger button:hover{
top:-2px;
box-shadow: 0 4px 5px var(--theme);
position:relative
}
#logger button:active{position:relative;box-shadow: 0 2px 5px rgba(0,0,0,0.47);top:3px;}
#logger #msgDumper{font-weight:bold;text-align:center;display: block;margin-bottom: 15px;}
#logger #msgDumper.done{color:var(--green);}
#logger #msgDumper.err{color:red}

#logger .desc{
display:block;
position:absolute;
min-width:440px;
width:440px	;
font-family:'Montserrat', sans-serif;
right: 55%;
top:220px;
z-index: 2;
}
#logger .desc h3{
display:block;
position:relative;
text-align:center;
color:white;
opacity:.5;
margin-bottom:15px
}
#logger .desc p{
display:block;
position:relative;
text-align:center;
color:white;
font-size:.9em;
margin-bottom:15px
}
#logger .desc span{
display:block;
position:relative;
white-space:nowrap;
text-align:center;
color:white;
padding:8px 25px;
font-size:1.8em;
width: max-content;
margin: auto;	
z-index: 2;
}
#logger .desc span i{ margin:0 5px }

#adList{
display: block;
position: absolute;
top: 70%;
left: 0;
right: 0;
text-align: center;
padding-bottom: 80px;
}

#adList h1{ color:var(--theme);text-transform: uppercase;margin-bottom:15px;padding:0 15px}
#adList h4{ font-weight:normal;font-size:1.1em}
#adList hr{display:block;border-bottom:2px solid var(--line);margin: 34px auto 68px;  width: 200px;}
#adList section{
width: 100%;
height: 150px;
text-align: center;
max-width: 1150px;
margin: auto;
}
#adList section table td{text-align:center; position:relative;vertical-align:middle;height: 125px;}
#adList section table td::before{
content : '';
position:absolute;	
left: 0;
right: 0;
margin: auto;
width:60px;
height:60px;
display:block;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
#adList section table td div{
display: block;
position: absolute;
width: 80%;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 15px;
text-align:center;
color:var(--theme);
font-weight:bold
}
#adList section table td span{ 
display:block;
position:absolute; 
height:max-content;
width:max-content;
left:0;
right:0;
top:0;bottom:0;
margin:auto;  }

#adList section table td:first-of-type::before{background-image:url('../img/icon/005-file-transfer.png');top: -30px;}
#adList section table td:nth-of-type(2)::before{background-image:url('../img/icon/006-bars.png');top:-10px}
#adList section table td:nth-of-type(3)::before{background-image:url('../img/icon/008-races.png');top:5px}
#adList section table td:nth-of-type(4)::before{background-image:url('../img/icon/010-diagram.png');top:20px}
#adList section table td:nth-of-type(5)::before{background-image:url('../img/icon/009-computer.png');top:45px}

#adList section table td:first-of-type div{}
#adList section table td:nth-of-type(2) div{bottom: -10px;}
#adList section table td:nth-of-type(3) div{bottom:-25px}
#adList section table td:nth-of-type(4) div{bottom:-40px}
#adList section table td:nth-of-type(5) div{bottom:-60px}

#adList section table td:first-of-type  span{}
#adList section table td:nth-of-type(2) span{top: 40px;}
#adList section table td:nth-of-type(3) span{top:65px}
#adList section table td:nth-of-type(4) span{top:110px}
#adList section table td:nth-of-type(5) span{top:150px}

#app_menu {
display: block;
position: fixed;
cursor: pointer;
top: 0;
bottom: 0;
left: 0;
width: 220px;
background: var(--apptheme);
transition: all .3s ease;
overflow-y: auto;
z-index: 15
}
#app_menu .logo {
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 1.5em;
font-weight: 900;
text-align: center;
line-height: 90px;
display: block;
position: relative;
border-bottom: 1px solid var(--hint-bottom)
}
#app_menu .logo i {
display: none;
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 90px;
width: 90px;
font-size: 1.25em;
line-height: 90px;
}
#app_menu .navBtn {
display: block;
position: relative;
border-top: 1px solid var(--hint-top);
border-bottom: 1px solid var(--hint-bottom);
height: 50px;
line-height: 50px;
color: var(--font_3);
white-space: nowrap;
font-weight: bold;
padding-left: 15px;
}
#app_menu .navBtn i {	margin-right: 3px;width:25px}
#app_menu .navBtn:hover, #app_menu .navBtn.active {
background: var(--apptheme_2);
color: white
}
#app_menu .navBtn::before {
content: '';
display: none;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: var(--theme)
}
#app_menu .navBtn:hover::before, #app_menu .navBtn.active::before {
display: block
}

#demoTrigger_2{
display: block;
position: absolute;
bottom: 25px;
left: 25px;
background: #fff;
padding: 4px 18px;
border-radius: 25px;
color:var(--apptheme_2)
 }
#demoTrigger_2:active{
bottom: 22px;
}

#app_content {
display: block;
background: var(--bgcontent);
position: absolute;
top: 0;
right: 0;
left: 220px;
transition: all .3s ease;
padding: 80px 15px 15px;
min-height:100vh;
height: max-content;
}

#app_tools {
display: block;
position: fixed;
cursor: pointer;
top: 0;
left: 0;
right: 0;
height: 60px;
line-height: 60px;
background: white;
z-index: 10;
}

#menu_trigger {
position: relative;
display: inline-block;
height: 60px;
line-height: 60px;
width: 60px;
text-align: center;
border-right: 1px solid var(--line)
}
#menu_trigger span {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 23px;
height: 2px;
background-color: var(--theme);
}
#menu_trigger span:first-of-type {
top: -12px
}
#menu_trigger span:last-of-type {
top: 12px
}
#side_trigger {
display: block;
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
color: var(--theme);
border-left: 1px solid var(--line)
}
#side_trigger i {
width: max-content;
height: max-content;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#menu_trigger:active, #side_trigger:active {
background: var(--theme);
color: white
}
#menu_trigger:active span {
background: white
}

#dropdown {
display: block;
position: absolute;
right: 60px;
width: 280px;
border-left: 1px solid var(--line);
top: 0;
bottom: 0;
line-height: 60px;
padding-left: 80px;
font-size: 1.1em;

}
#dropdown::after {
display: block;
position: absolute;
font: var(--fa-font-solid);
content: "\f107";
transition: all .3s ease;
top: 0;
bottom: 0;
margin: auto;
height: max-content;
font-size: 1.1em;
right: 15px;
}
#dropdown .down_list {
display: block;
position: absolute;
background: white;
width: 100%;
left: 0;
border-radius: 0 0 6px 6px;
overflow: hidden;
top: -5px;
height: 0px;
}
#dropdown.open .down_list {
height: 270px;
transition: all .3s ease;
border-top: 1px solid var(--line);
top: unset;
top:60px
}
#dropdown.open::after {
transform: rotate(-180deg);
transition: all .3s ease
}
#dropdown .down_list span {
display: block;
position: relative;
padding: 15px 20px;
line-height: normal;
font-size: 1.1em
}
#dropdown .down_list span i {
display: block;
position: absolute;
right: 20px;
top: 0;
bottom: 0;
height: max-content;
margin: auto;
}
#dropdown .down_list span:hover {
background: rgba(0,0,0,0.027);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 14px 20px;
} 

#avatar {
background-image: url('../img/blender/logo.webp');
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 40px;
left: 20px;
height: 40px;
margin: auto;
border-radius: 50%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
pointer-events: none!important;
}
#userName{pointer-events:none;}
#side_pannel {
display: block;
position: fixed;
top: 60px;
right: -380px;
bottom: 0;
width: 370px;
background: white;
cursor:pointer;
border-left: 1px solid var(--line);
transition: all .3s cubic-bezier(0.55, 0, 0.25, 1);
overflow-y: auto;
z-index: 4;
}

body.showPannel #side_pannel {
right: 0;
transition: all .3s cubic-bezier(0.55, 0, 0.25, 1)
}

#contact_pannel #my_accountant * {transition: all 0.5s ease;}

#side_pannel::before {
display: block;
content: '';
height: 5px;
background: linear-gradient(to left, var(--theme) 0%, var(--theme) 0%, var(--theme_2) 100%);
}
#side_pannel .contact .comptable {
display: block;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
background-image: url('../img/blender/myr_ico.webp');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin: 25px auto
}
#side_pannel .contact span {
display: block;
text-align: center;
margin: 6px 0;
}
#side_pannel .contact #ctc_name {
font-size: 1.25em;
font-weight: bold;
}
#side_pannel .contact hr {
width: 60%;
color: white;
border: 1px inset rgba(0,0,0,0.1);
margin: 22px auto 0;
}
#side_pannel .contact i {
margin-right: 4px
}
#side_pannel .contact #ctc_writer {
text-transform: uppercase;
color: var(--theme);
font-size: 1.25em;
cursor: pointer;
padding: 10px 0;
margin: 0;
}
#side_pannel .contact #ctc_writer i {
/*font-size: 2.4em;*/
font-size:1em;
position: relative;
/*margin-right: 0;*/
margin-right: 8px;
display: inline-block;
text-shadow: 0 1px 2px rgba(0,0,0,0.47);
/** triks **/
/*transform: rotate(45deg);
top: 5px;
right: 8px;*/
}
#side_pannel .contact #ctc_writer i svg {
position: absolute;
width: 30px;
left: 5px;
top: 50%;
transform: rotate(-45deg);
}
#side_pannel .contact #ctc_writer i.fa-envelope{font-size:1.25em;margin: 0 8px;}
#side_pannel .contact #ctc_writer p {
display: inline-block;
height: 60px;
line-height: 60px;
vertical-align: top;
}
#side_pannel .contact #ctc_writer:active i svg * {
fill: var(--theme)
}
#side_pannel .top_infos{
padding: 12px 20px;
background: var(--theme_2);
display:block;
color:white;
font-weight:bold
}

#contact_pannel.messaging #ctc_my_accountant{  
transition: all 1.4s ease; 
background-color:var(--theme); 
transform: scale(0);
opacity:0 
}
#contact_pannel.messaging #ctc_name{  transition: all 1.3s ease .2s; transform: translateX(100%);}
#contact_pannel.messaging #ctc_pro{ transition: all 1.3s ease .3s; transform: translateX(100%)}
#contact_pannel.messaging #ctc_tel{ transition: all 1.3s ease .4s;  transform: translateX(100%)}
#contact_pannel.messaging #my_accountant hr{ transition: all 1.3s ease .4s; opacity:0}
#contact_pannel.messaging #ctc_writer{ transition: all 1s ease .1s; transform: translateX(100%)}

#message_box{
display: block;
position: absolute;
width: 100%;
top: 0;
bottom:0;
background:white;
padding: 10px 25px;
opacity:0
}
#message_box block{display: block; padding: 15px 0 25px;}

#message_box #avatar_plane{
opacity:0;
position:relative;margin:auto;
background:var(--theme);color:white; border-radius:50%;
display:block;
transform: scale(0);
transform-origin: center;
transition: transform 1.2s ease .4s;

}
#message_box #avatar_plane i{
width:max-content;
height:max-content;
position:absolute;
top:0;
left: 0;
bottom: 0;
right:0;
margin:auto;
font-size:20px;
transform: translateX(-100%) translateY(200%);
display:block
}
#message_box #avatar_plane.sent {background:var(--green); }
#message_box #avatar_plane.sent .fa-paper-plane,
#message_box #avatar_plane .fa-check{ display:none}
#message_box #avatar_plane.sent .fa-check { display:block}
#message_box #backPen{display:none;}
#message_box #backPen{
display:block;
position:absolute;
cursor:pointer;
width:60px;
height:52px;
top:0;
right:-60px
}
#message_box #backPen::before,
#message_box #backPen::after{
content:'';
display:block;
width:26px;
height:6px;
border-radius:3px;
background:red;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;

}
#message_box #backPen::before{transform:rotate(45deg)}
#message_box #backPen::after{transform:rotate(-45deg)}

#dialBox{
display:block;
padding-top:15px;
position:relative;
width:100%;
left: 120%;
transition: all .5s ease ;
}
#dialBox fieldset{display :block;margin-bottom:16px}
#dialBox input,#dialBox textarea{
width: 100%;
resize: none;
border: 1px solid var(--line3);
border-radius: 5px;
background: white;
padding: 10px 15px;
font-family: inherit;
}
#dialBox input{ font-size:14px; color: var(--font)}
#dialBox textarea{ height: 120px;font-size:16px; color: var(--font)}
#dialBox input:hover,#dialBox textarea:hover,
#dialBox input:focus,#dialBox textarea:focus{border:1px solid var(--theme)}
#dialBox #objField.err,#dialBox #msgField.err {
margin-bottom:0px
}
#dialBox #objField.err input,#dialBox #msgField.err textarea{
border:1px solid red;
}
#dialBox #objField.err::after,#dialBox #msgField.err::after{
display:block;
font-weight:bold;
font-size:.7em;
padding-left:5px;
margin:3px 0 3px;
color:red;	
}
#dialBox #objField.err::after{content :'Veuillez renseigner l\'objet du message';}
#dialBox #msgField.err::after{content :'Veuillez taper votre message';}
#dialBox button{
display: block;
position: relative;
right: 0;
width: 100%;
padding: 11px;
font-size: 1.2em;
color: white;
background: linear-gradient(180deg, var(--theme_2),var(--theme));
border-radius: 4px;
cursor: pointer;
height: 45px;
text-transform: uppercase;	
}
#dialBox button:active{top:3px }

#contact_pannel.messaging #message_box{transition: all .0s ease .5s; opacity:1;}
#contact_pannel.messaging #message_box #backPen{right:0 ;transition: all .5s ease .8s; }
#contact_pannel.messaging #message_box #avatar_plane{
opacity:1;
width:50px;
height:50px;
transform: scale(1);
transform-origin: center;
transition: transform 1.2s ease .8s;
}
#contact_pannel.messaging #message_box #avatar_plane i{
transition: all .5s ease 1.4s;
transform:translateX(0%) translateY(0%);
}
#contact_pannel.messaging #message_box #dialBox{
transition: all .5s ease 1s;
left:0;
max-width: 680px;
margin: auto;	
}

#side_pannel #contact_pannel.messaging {height:340px}
#side_pannel .contact{
position:relative;
overflow-x: hidden;}
#side_pannel .contact table{width: max-content;margin: auto;}
#side_pannel .contact table td{position: relative}
#side_pannel .dossiers span{
display:block;
position:relative;
padding:12px 20px;
border-bottom:1px solid var(--line)	
}
#side_pannel .dossiers span.selected::before{
content:'\f54f';
display:inline-block;
font: var(--fa-font-solid);
animation: fa-bounce 2s infinite linear;
color:var(--green);
border-bottom:none
}
#side_pannel .dossiers span.selected{color:var(--theme);font-weight:bold;}
#side_pannel .dossiers span.selected i:first-of-type{display:none	}
#side_pannel .dossiers span.selected::after{
display: block;
position: absolute;
font: var(--fa-font-solid);
content: "\f248";
top:0;right:20px;bottom:0;height:max-content;
margin:auto	;
color:var(--orange)
}
#side_pannel .dossiers span:hover,
#side_pannel .dossiers span.selected:hover{	background:var(--theme); font-weight:bold;color:white;}
#side_pannel .dossiers span.selected:hover{	cursor:not-allowed	}
#side_pannel .dossiers span.selected:hover::before,
#side_pannel .dossiers span.selected:hover::after{color:white}
#side_pannel .infos{
padding: 10px 20px;
display:block;
border-bottom:1px solid var(--line)	
}
#side_pannel .infos span{
display:block;
padding: 8px 0px;	
}
#side_pannel .infos span i{ margin-right:8px}

#calender{
display:block;
padding-bottom: 5px;
/*border-bottom:1px solid var(--line)*/
}
#calender .top_calender{
display:block;
background: linear-gradient(to right, var(--theme) 0%, var(--theme_2) 100%);
height: 55px;
position:relative;

}
#calender .top_calender div{
color:white;
display:block;
position:absolute;
top:0;
bottom:0;
font-size:22px;
font-weight:bold;
text-transform:uppercase;
height: 55px;
line-height:55px;
text-align:center

}
#calender .top_calender #last_m{left:0;width:60px;right:unset}
#calender .top_calender #show_m{left:60px;right:60px;}
#calender .top_calender #next_m{left:unset;width:60px;right:0}
#calender th, #calender td{
position:relative;
text-align:center;
vertical-align:middle}
#calender th{color:var(--theme_2);height:65px;}
#calender td {height:55px;}
#calender td:hover span{font-weight:bold;color:white}
#calender td:hover::before{
content:'';
display:block;
width:38px;
height:38px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background:var(--orange2);
border-radius: 50%;	
}
#calender td.off:hover::before,
#calender td.nofree:hover::before{display:none}
#calender td.nofree:hover span{font-weight:normal;color:var(--font)}
#calender td span{display:block;position:relative;font-size: .8em;}
#calender td.off{background:var(--hint);cursor:not-allowed}
#calender td.today{color:white;font-weight:bold}
#calender td.today::before{
content:'';
display:block;
width:38px;
height:38px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background:var(--orange);
border-radius: 50%;
}
#calender td.nofree{cursor:not-allowed}
#calender td.nofree:hover{color: var(--font);}

#side_pannel .dossiers{display:none;}
#side_pannel .dossiers::before{
content:'';
display:block;
position:relative;
height:4px;
background: linear-gradient(to left, var(--theme) 0%, var(--theme) 0%, var(--theme_2) 100%);
}
#side_pannel .dossiers,
#side_pannel .top_infos,
#side_pannel .infos,
#side_pannel .dossiers,
#side_pannel #calender{
display:none	
}

body[data-nav="bilan"] #side_pannel .top_infos,
body[data-nav="bilan"] #side_pannel .infos,
body[data-nav="classeur"] #side_pannel .dossiers,
body[data-nav="classeur"] #side_pannel .top_infos,
body[data-nav="classeur"] #side_pannel .infos,
body[data-nav="kilometres"] #side_pannel .top_infos,
body[data-nav="kilometres"] #side_pannel .infos,
body[data-nav="simul"] #side_pannel .top_infos,
body[data-nav="simul"] #side_pannel .infos,
body[data-nav="admin"] #side_pannel .top_infos,
body[data-nav="admin"] #side_pannel .infos,
body[data-nav="rdv"] #side_pannel #calender{display:block}

body[data-nav="classeur"] #side_pannel .top_infos{
background: linear-gradient(to left, var(--theme) 0%, var(--theme) 0%, var(--theme_2) 100%)
}
body[data-nav="rdv"] #side_pannel .contact hr {width:100%}
body[data-nav="rdv"] #ctc_writer,
body[data-nav="rdv"] #ctc_mail {display:none}

.demo::before{
content:'démo';
position: absolute;
top: 8px;
left: -50px;
font-weight: bold;
background: red;
color: #FFF;
padding: 2px 50px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
transform: rotate(-45deg);
display: block;
font-size: .7em;
z-index: 2;
text-transform: uppercase;	
}
#recap{
min-height:90px;
display:block;
background:white;
position:relative;
border-radius:5px;	
margin-bottom: 25px;
overflow:hidden
}
#recap div{
display:block;
position:absolute;
top:0;
bottom:0;
width:50%;
background: white;	
}
#recap div:first-of-type{left:0; }
#recap div:last-of-type{ right:0; }
#recap div table{
height:100%;
width:100%;

}
#recap div:first-of-type table td:nth-of-type(2){
border-right:1px solid var(--line);
border-left:1px solid var(--line);

}
#recap div:last-of-type table td:first-of-type{
border-right:1px solid var(--line);

}
#recap div table td{ padding:15px 0px 15px 60px; position:relative}
#recap div table td span{ display:block;position:relative;}
#recap div table td span:first-of-type{color:var(--theme)} 
#recap div table td .trend{
position: absolute;
right: 22px;
top: 0;
bottom: 0;
height: max-content;
margin: auto;
font-size:1.1em;
color:var(--off)	
} 
#recap div table td .trend[data-trend="up"] .fa-caret-up {color:green; opacity:.67}
#recap div table td .trend[data-trend="down"] .fa-caret-down {color:red; opacity:.67}
#recap div table td .legend{font-size:12px} 

.divHeader{display:block;
height:50px;
background:var(--bghead);
border-bottom:1px solid var(--line);
position: relative;
}
.divHeader .placeholder{
position: absolute;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: max-content;
  width: max-content;
  margin: auto;	
}

.divHeader .placeholder i{color:var(--theme);}

#graph{display:block;
overflow:hidden;
position:relative;
width:100%;
border-radius: 5px;
background:white;
margin-bottom:25px
}
#graph div{padding:50px 25px 65px 65px;display:block;position:relative;background: white;}
#graph div span::before{
display:block;
content:'';
position:absolute;
left:8px;
top:0;
bottom:0;
border-left:1px solid var(--hint-bottom)}
#graph div span:first-of-type::before{top:-8px}

#graph div span::after{font-size:10px;
position:absolute;top: -6px;
left: -40px}
#graph div span:nth-of-type(1)::after{content:'100%'}
#graph div span:nth-of-type(2)::after{content:'75%'}
#graph div span:nth-of-type(3)::after{content:'50%'}
#graph div span:nth-of-type(4)::after{content:'25%'}
#graph div span{display:block;
height:95px;
border-top:1px solid var(--hint-bottom);
position: relative;
z-index: 2}
#graph div span:last-of-type{border-bottom:1px solid var(--hint-bottom) }
#graph .bars{
display: flex; 
flex-direction: row;
align-items: flex-end;
padding: 0;
position: absolute;
left: 73px;
right: 25px;
bottom: 65px;
top:50px
}
#graph .bars .chartBar{
height:0px;
padding:0;
flex:1;
position:relative;
background:var(--theme);
transition: all 1s ease;
margin:0 2%;
z-index: 3
}
#graph .bars .chartBar::after{
content: '';
display: block;
position: absolute;
bottom: -8px;
height: 8px;
width: 1px;
background: var(--hint-bottom);
left: 0;
right: 0;
margin: auto;
}
#graph .bars .chartBar p{
text-align:center;
position:absolute;
bottom:-25px;
text-transform:uppercase;
font-size:10px;
left:0;
right:0;
margin:auto;
}

#pie{
display:inline-block;
width:49%;
overflow:hidden;
position:relative;
border-radius: 5px;
background:white;
vertical-align:top;
margin-right:.5%;
margin-bottom:25px
}
#pie div{ 
display:block;
background:white ;
text-align:center;
padding:20px
}
#pie div strong{
display:block;
text-align:center;
font-size:20px;}
#pie div p{
text-align:center;
font-size:14px;
margin-bottom:30px	
}

#pie div #pieChart{
display:block;
width:200px;
height:200px;
border-radius:50%;
margin: 0 auto 55px;
position:relative;
animation: float 2s ease infinite;
}
#pie div #pieChart::before{
content: '';
display: block;
position: absolute;
width: 120px;
height: 2px;
background: rgba(0,0,0,0.1);
border-radius: 50%;
box-shadow: 0 0 3px 4px rgba(0,0,0,0.1);
margin: auto;
animation: shadow 2s ease infinite;
bottom: -25px;
left: 0;
right: 0;

}
#pie div #pieChart::after{
content:'';
display:block;
width:80px;
height:80px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background: white;
border-radius: 50%;	
}

#pie div .pieSets{
display:block;
position:relative;
padding:20px;
border:2px solid var(--line);
border-radius:5px;
width:260px;
margin: 0 auto 20px;
}
#pie div .pieSets div{padding:5px 0;}
#pie div .pieSets div i{margin-right:15px}
#pie div .pieSets div span{font-weight:bold;margin-left:15px}

#set_pie1 i{color:var(--theme)}
#set_pie2 i{color:var(--theme_1)}
#set_pie3 i{color:var(--theme_4)}

#news{
display:inline-block;
width:49%;
overflow:hidden;
position:relative;
border-radius: 5px;
background:white;
vertical-align:top;
margin-left:.5%;
margin-bottom:25px;
cursor:pointer;
float: right;
}
#news div{padding:20px 50px;min-height:430px; overflow-y: auto;background: white;}
#news div span {display:block;position:relative;margin-bottom:9px}
#news div span::after {display:block;
content:'';height: 6px;
border-bottom:1px dashed var(--line2)}
#news div span:last-of-type::after {display:none}
#news div span .label{
display:inline-block;
width:100px;
height:95px;
vertical-align:top;
background:var(--off);
margin-right:20px
}
#news div span fieldset{display:inline-block;height:100px;;vertical-align:top;padding:15px}
#news div span fieldset p{color:var(--line2);font-size:15px}
#news .more{
display: block;
position: absolute;
left: 0;
right: 0;
height: 60px;
bottom: 0;
text-align: center;
line-height: 60px;
background: white;
border-top: 1px solid var(--line);
font-weight:bold;
color:var(--theme)

}
#news .more:active{background:var(--theme);color:white}
#news .more i{margin-right:5px}

#km_calc{
display:inline-block;
max-width:450px;
overflow:hidden;
position:relative;
border-radius: 5px;
background:white;
vertical-align:top;
margin-left:.5%;
margin-bottom:15px;
cursor:pointer
}
#km_calc .bg{ 
display: block;
position: absolute;
background: white;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#km_calc .divHeader{position:relative}
#km_calc .divHeader div.title{
display:block; 
position:absolute;
height:max-content;
top:0;
bottom:0;
margin:auto;
left:20px
}
#km_calc .divHeader #cv_list{
display:block; 
position:absolute;
top:0;
bottom:0;
margin:auto;
cursor:pointer;
height: 50px;
line-height: 50px;
padding: 0 25px;
right:0
}
#km_calc .divHeader #cv_list::after{
display:inline-block;
position:relative;
font: var(--fa-font-solid);
content:'\f0d7';
margin-left:8px;
color:var(--theme);
transition:all .4s ease
}
#km_calc .divHeader #cv_list.spread::after{
transform:rotate(-180deg);
top:2px;	
}
#km_calc .km_simul{
display:block;
position:relative;
width:350px;
height:346px;
margin:auto	
}
#km_calc table{
margin-bottom: 25px;
z-index: 2;
position: relative;	
}
#km_calc table th{
text-transform:uppercase;
color:var(--theme);
font-weight:normal;
font-size:14px;
text-align:center
}	
#km_calc table td {font-size:24px;text-align:center;padding:12px 0;position:relative}	
#km_calc table th:last-of-type,
#km_calc table td:last-of-type{
border-left:2px solid var(--dash3)
}

#ik_result *{left:-10px;position:relative}
#ik_result i{color:var(--dash3)}
#ik_valo::after{
content:'\f153';
font: var(--fa-font-solid);
font-size:.7em;
height:max-content;
position:absolute;
top:0;
bottom:0;
margin: auto;
margin-left:5px
}
#speed {
display:block;
position:absolute;
width:300px;
height:max-content;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
#speed .speed_cadran {
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background:	white
}
#speed .speed_cadran  .speed_dash{ 
display:block;
position:absolute;
height:2px;
right:0;
left:0;
top:0;
bottom:0;
margin:auto
}
#speed .speed_cadran  .speed_dash::before{
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 8px;
height:1px;
border-bottom:1px solid var(--dash);
margin: auto;
}
#speed .speed_cadran  .speed_dash.bigger::before{ 
width:18px;
left:-10px;border-color:var(--dash)
}
#speed .speed_cadran  .digits{
display: block;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: max-content;
height: max-content;
font-size:8px;
color:#595959		
}

/** DIMENSIONS **/
#valSpeedInc,
#valSpeed,
#valSpeed::after{
width: 160px;
height: 160px;	
}
#valSpeed::after{ top:120px;width:135px;}

#speed .speed_cadran  .digits:nth-of-type(1){left: -200px;  bottom: -120px;}
#speed .speed_cadran  .digits:nth-of-type(2){left: -230px;top:5px }
#speed .speed_cadran  .digits:nth-of-type(3){left:-190px;top:-120px;}
#speed .speed_cadran  .digits:nth-of-type(4){left: -110px;  top: -200px;}
#speed .speed_cadran  .digits:nth-of-type(5){top:-240px;}
#speed .speed_cadran  .digits:nth-of-type(6){right:-110px;top:-200px;}
#speed .speed_cadran  .digits:nth-of-type(7){right:-190px;top:-120px;}
#speed .speed_cadran  .digits:nth-of-type(8){right: -230px;top:5px}
#speed .speed_cadran  .digits:nth-of-type(9){
right: -190px;
bottom: -120px;
}

#valSpeedInc{
display:block;
position:absolute;
left:0;
top:-10px;
bottom:0;
right:0;
margin:auto;
border-radius:50%;
transform:rotate(-30deg);
transition:all .8s ease;
}
#valSpeed{
display:block;
position:absolute;
left:0;
top:-10px;
bottom:0;
right:0;
margin:auto;
border-radius:50%;
border:2px solid var(--dash)
}
#valSpeed span{
position: absolute;
width: max-content;
height: max-content;
left: 0;
right: 0;
margin: auto;
bottom: 0;	
}
#valSpeedInc::before{
content: '\f111';
font: var(--fa-font-solid);
top: 8px;
bottom: 0;
position: absolute;
left: -8px;
margin: auto;
width: 16px;
height: 16px;
color:var(--red_pin);

}
#valSpeed::after{
content:'';
display: block;
position: absolute;
height: 50px;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: white;	
}

#vs_year{top:-60px;text-transform:uppercase;color:var(--theme)}
#vs_total{top:-0;font-size:40px}
#vs_type{top:50px;color:var(--dash);font-size:12px}

#IK{display: block;
margin: auto;
position: relative;
width: 200px;
height: 40px;
padding: 10px;
border: 1px solid var(--dash);
border-radius: 7px;
font-size: 1.1em;
top: 110px;
background:white;
color:var(--font);
}  
#IK:focus {
border: 2px solid var(--theme);
background:white;
color:var(--font);
}

#km_settings{
display:inline-block;
max-width:450px;
overflow:hidden;
position:relative;
border-radius: 5px;
background:white;
vertical-align:top;
margin-right:.5%;
margin-bottom:15px;
cursor:pointer
}
#km_settings #showCar{
display:block;
position:absolute;
width:50px;
height:50px;
top:0;
left:0;
bottom:0;
line-height:50px;
text-align:center;
color:var(--theme)
}
#km_settings #switchCar{
display:block;
position:absolute;
width:50px;
height:50px;
top:0;
right:0;
bottom:0;
line-height:50px;
text-align:center;
transition:all .4s ease;
color:var(--theme)
}
#km_settings #titre_saisie,
#km_settings #titre_info_car{font-size: .85em;}
#km_settings.saisie #titre_saisie .in_add_car{display:none }
#km_settings.new_ride #titre_saisie .in_saisie{display:none }
#km_settings .divHeader p{
display:block;
position:absolute;
height:50px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
line-height:50px;
}
#km_settings .divHeader #switch_carview{left:50px;text-align: left;}
#km_settings .divHeader p[data-id="carbrand"]{
right: 50px;
padding-left: 28px;
font-size: .85em;
text-align: left;
width: max-content;
max-width:136px;
min-width:70px
}
#km_settings .divHeader p[data-id="carbrand"] span{
display: block;
position: absolute;
height: 50px;
width: 28px;
left: 0;
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
}
#km_settings .divHeader #car_list p,#km_settings .divHeader #car_list i{pointer-events:none}
#km_settings .divHeader #car_list{
min-height: 50px;
height: 50px;
width: 140px;
position: absolute;
right: 0;	
}
#km_settings .divHeader #car_list.spread #switchCar{transform:rotate(-180deg);top:2px}
#km_settings .divHeader #dropCarlist{
position:absolute;
right:0;
height: max-content;
cursor:pointer;
min-height:0;
top:50px;
width: max-content;
background:white;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
transition:all .4s ease;
z-index:3;
padding:15px 0;
display:none
}
#km_settings .divHeader #car_list.spread #dropCarlist{
display:block;
}
#km_settings .divHeader .oCar{padding: 4px 18px;cursor:pointer;display: block;}
#km_settings .divHeader .oCar:hover{color:#fff;background:var(--theme)}
#km_settings .divHeader .oCar:active{ color:#fff;background:var(--orange5); }
#km_settings .divHeader .oCar_logo{
  background-image: url('img/cars/BMW.svg');
  display: inline-block;
  position: relative;
  height: 18px;
  width: 18px;
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  top: 3px;
  margin-right: 8px;}
#km_settings .modules{
display: block;
position: absolute;
bottom: 0;
width: 100%;	
border-top:1px solid var(--line);
z-index: 2;
height: 42px;
}
#km_settings .modules span{
display:block;
width:100%;
padding:12px 5px;
text-align:center	
}
#km_settings .modules td.picked{
background:var(--theme_2);
font-weight:bold;
color:white;
text-shadow: 0 1px 3px rgba(0,0,0,.47);	
}
#km_settings .modules td:hover,
#km_settings .modules td.picked:hover{
background:var(--theme);
font-weight:bold;
color:white	;
text-shadow: 0 1px 3px rgba(0,0,0,.47);
}
#km_settings .modules span:first-of-type{border-right:1px solid var(--line)}
#km_settings .modules span:last-of-type{border-left:1px solid var(--line)}
#km_settings #info_car{
display:block;
position:relative;
background: white;
height:0;
padding:0;
left: 100%;
transition:none;
z-index:1;	
}
#km_settings.info_car #info_car{
left: 0;
height:max-content;	
padding:15px 30px 45px 30px;
transition:all .15s ease-in;
}
#km_settings #info_car table{width:100%}
#km_settings #info_car table tr td{padding: 6px;
position:relative;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#km_settings #info_car table tr td.gap{height:15px}
#km_settings #info_car table tr td:first-of-type{font-weight:bold;text-align:left;padding-left:15px}
#km_settings #info_car table tr td:last-of-type{text-align:right;padding-right:15px}
#km_settings #info_car table tr:nth-child(odd) td{background:var(--hint-bottom)}
#km_settings #info_car table tr td.car_delete_case{padding : 15px 0 12px}
#km_settings #info_car table tr td.car_delete_case button{
display:block;
position:relative;
padding: 11px;
font-size: 1.2em;
color: white;
background: linear-gradient(180deg, var(--red),var(--red_2));
text-shadow: 0 1px 3px rgba(0,0,0,.27);
border-radius:4px;
cursor: pointer;
width:100%;
text-transform: uppercase;
}
#km_settings #info_car table tr td.car_delete_case button:active{
top:3px;	
}

#km_settings #carBrand{text-align:left;}
#km_settings #carLogo{text-align:right;}
#km_settings #carLogo span{
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
width:	70px;
height:70px;
}
#km_settings #kmFields{
display:block;
position:relative;
background: white;
height:max-content;
padding:15px 30px 45px 30px;	
}
#km_settings.info_car #kmFields{height:0;padding:0}
#km_settings #kmFields fieldset{
display:none;
white-space:nowrap;position:relative;height:80px;
margin-bottom:15px;
max-width:400px
}
#km_settings #kmFields[data-field="dayField"] #dayField{display:block}
#km_settings #kmFields[data-field="editField"] #editField{display:block}
#km_settings #kmFields[data-field="addField"] #addField{display:block}
#km_settings #kmFields[data-field="listField"] #listField{display:block;text-align: left;height: max-content;
  max-height: 415px;
  overflow-y: auto;}
#km_settings #kmFields #dayField::before,
#km_settings #kmFields #editField::before{ display:block;
height:30px;
line-height:30px;
color:white;
padding-left:15px;
font-weight:bold;
border-radius:4px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
text-shadow:0 1px 2px rgba(0,0,0,0.2);
}
#km_settings #kmFields #dayField::before{ content : 'Kilomètres du jour';background:var(--green);}
#km_settings #kmFields #editField::before{ content : 'Autre date / Modif.'; background:var(--orange5);}
#km_settings #kmFields fieldset .input{	
display: block;
position:absolute;
left:0;
right:110px;
height:45px;
top: 40px;
}
#km_settings #kmFields fieldset input{
display: block;
position:relative;
width:100%;
height:100%;
padding: 10px 10px 10px 15px;
border-radius: 4px 0 0 4px;
border: 1px solid var(--line3);
border-right:none;
font-size: 1.2em;
}
#km_settings #kmFields fieldset input:focus{
border:2px solid var(--theme)!important;
padding: 9px 9px 9px 14px;}
#km_settings #kmFields fieldset select:focus{border:2px solid var(--theme)!important;}
#km_settings #kmFields fieldset button{
display:block;
position:absolute;
right:0;
top: 40px;
width:110px;
padding:11px; 
font-size: 1.2em;
color:white;
background:linear-gradient(180deg, var(--theme_2),var(--theme));
border-radius: 0 4px 4px 0;
cursor:pointer;
height:45px;
text-transform:uppercase
}
#km_settings #kmFields fieldset button:active{ background:var(--green) }
#km_settings #kmFields fieldset .input{ right:60px;}
#km_settings #kmFields #editField input {
display: inline-block;
font-size:.9em
}
#km_settings #kmFields #editField input:first-of-type { 	width:60%;}
#km_settings #kmFields #editField input:last-of-type { border-radius:0;	width:40%;}

#km_settings #kmFields #editField button { width:60px}
#km_settings #kmFields #addField{height:max-content}
#km_settings #kmFields #addField .input{ display:block;
position:relative; 
height : 45px; 
top: unset;
margin-bottom:8px;
}
#km_settings #kmFields #addField .input select{
  display: block;
  width: 100%;
  border: 1px solid var(--line3);
  padding: 10px 10px 10px 14px;
  height: 100%;
  border-radius: 4px;
  cursor:pointer;
  background:#FFFFFF;
  color: var(--font);
  font-size: 1.2em;	
}
#km_settings #kmFields #addField #km_immat_o,
#km_settings #kmFields #addField #km_immat_o_2{text-transform:uppercase;}
#km_settings #kmFields #addField #km_immat_o::placeholder,
#km_settings #kmFields #addField #km_immat_o_2::placeholder{text-transform:none}
#km_settings #kmFields #addField #cg_filer,#km_settings #kmFields #addField #cg_filer_2{
border:1px solid var(--line3);
width:100%;
border-radius:4px;
height:45px;
line-height:45px;
}

#km_settings #kmFields #addField input{border: 1px solid var(--line3);border-radius:4px;}
#km_settings #kmFields #addField button{ display: block;
position: relative;
height: 45px;
top: unset;
width:100%;
border-radius:4px;}
#km_settings #kmFields #addField button:last-of-type{margin-top: 8px;} 

#km_settings #kmFields #addField #km_cg_o,
#km_settings #kmFields #addField #km_cg_o_2{display:none;
position:absolute;
opacity:0;
width:0;
height:0}
#km_settings #kmFields #addField label{
display:block;
height:45px;
line-height:45px;
cursor:pointer;
text-align: center;
overflow:hidden;
position: absolute;
left: 15px;
right: 15px;
top: 0;
bottom: 0;
text-overflow:ellipsis
}
#km_settings #kmFields #addField #cg_filer:hover,
#km_settings #kmFields #addField #cg_filer_2:hover{
color:white;
background: var(--orange5)	
}
#km_settings #kmFields #addField #cg_filer:active,
#km_settings #kmFields #addField #cg_filer_2:active{color:white;background:var(--orange4);top: 4px;}
#km_settings #kmFields #addField #cg_filer.valid_file,
#km_settings #kmFields #addField #cg_filer_2.valid_file{color:white;background:green}
#km_settings #kmFields #addField #cg_filer.valid_file:hover,
#km_settings #kmFields #addField #cg_filer_2.valid_file:hover{color:white;background:var(--green4)}
#km_settings #kmFields #addField #cg_filer.valid_file:active,
#km_settings #kmFields #addField #cg_filer_2.valid_file:active{color:white;background:var(--green4);top: 4px;}
#km_settings #kmFields #addField label i{font-size:1.2em;margin-right:6px;}
/*#km_settings #kmFields #addField label i.fa-file-lines{transform: rotate(-90deg);}*/
#km_settings #kmFields #listField span{
display:block;
position:relative;
padding:6px 6px 6px 15px;	
}
#km_settings #kmFields #listField span .fa-calendar-days{margin-right:6px}
#km_settings #kmFields #listField span .fa-arrow-right-long{margin: 0 6px}
#km_settings #kmFields #listField span .fa-trash-can{display:none; position:absolute;width:max-content;height:max-content;top:0;bottom:0;margin:auto;right:15px }
#km_settings #kmFields #listField span:hover{color:#FFFFFF;background:var(--theme_2)}
#km_settings #kmFields #listField span:hover .fa-trash-can{display:inline-block;}

#addFieldForm.noReady #cg_filer,
#addFieldForm.noReady #cg_filer_2,
#addFieldForm.noReady button{
	display:none!important
	
}


#km_calc .divHeader #dropCarcv{
position:absolute;
right:0;
height: max-content;
cursor:pointer;
min-height:0;
top:50px;
width: max-content;
background:white;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
transition:all .4s ease;
z-index:3;
padding:15px 0;
display:none	
}
#km_calc .divHeader #cv_list.spread + #dropCarcv {
  display: block;
}
#km_calc .chvx{
display:block;
text-align:left;
padding: 4px 18px;	
}
#km_calc .chvx:hover{ color:#FFFFFF; background:var(--theme)}
#km_calc .chvx:active{ color:#FFFFFF; background:var(--orange5)}

#modules_set_btns,#modules_set_btns_2{background:white;}
/*
#modules_set_btns #km_car span i{position:relative;font-size: 1.2em;top: -1px;}
#modules_set_btns #km_car span i::after{
font: var(--fa-font-solid);
display:block;
position:absolute;
top:-3px;
right:-6px;
font-size:.55em
}
*/

#section_classeur .top_band{
padding: 0px 1.2em;
display: block;
position: fixed;
height: 15px;
background: var(--apptheme);
left: 220px;
right: 0;
top: 60px;
color:rgba(255,255,255,.7);
z-index:2

}

#dir_info{
display: block;
position: relative;
font-size:.8em;
line-height:15px;
height:15px;
}

.timeZone{
display:block;
position:fixed;
top:75px;
height:60px;
background: linear-gradient(to right, var(--theme) 0%,var(--theme_2)100%);
color: white;
left: 220px;
right:0;
cursor:pointer;
z-index: 3;
}

#goLastDrop,#goNextDrop{
display:block;
position:absolute; 
width:75px;
height:60px;
line-height:60px;
text-align:center;
top:0;
font-size:1.8em;
cursor:pointer}
#goLastDrop{left:0;	}
#goLastDrop:active{
background: white;
color: var(--theme);
border-bottom:1px solid var(--theme)
}
#goNextDrop{right:0}
#goNextDrop:active{
background: white;
color: var(--theme_2);
border-bottom:1px solid var(--theme_2)
}
#dropTime{
display:block;
position:absolute;
width:max-content;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:60px;
line-height:60px;
font-size:1.6em	;
font-weight:bold;
text-transform:uppercase
}
#dropZone{
position:relative;
width:100%;
height:160px;
background:white;
border-radius:5px;
overflow:hidden;
top:75px
}
#dropZone table{ height:100%;background: white }
#dropZone table td{position: relative;	}
#dropZone table span{
display:block;
position: absolute;
border:1px dotted black ;
left:8px;
top:8px;
right:8px;
bottom:8px;
border-radius:5px;
background:var(--dropzone);
cursor:pointer}
#dropZone .pins table{height:15px}
#dropZone .pins table td{height:15px;line-height:15px;text-align:center;vertical-align:middle}
#dropZone table td:first-of-type span{right:4px}
#dropZone table td:nth-of-type(2) span{left:4px;right:4px}
#dropZone table td:last-of-type span{left:4px}

#dropZone table #bq_zone:hover span, #dropZone table #bq_zone.hover span{ 
border:2px solid var(--bank_zone);
background:var(--bank_zone_2)}
#dropZone table #buy_zone:hover span, #dropZone table #buy_zone.hover span{ 
border:2px solid var(--buy_zone);
background:var(--buy_zone_2)}
#dropZone table #sale_zone:hover span, #dropZone table #sale_zone.hover span{ 
border:2px solid var(--sale_zone);
background:var(--sale_zone_2)}
#dropZone table td input[type='file']{ position:absolute; display:none;}
label.zoneLab{
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;	
}

#dropZone table td span:before{ 
display:block;
position:absolute;
width:max-content;
height:max-content;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
padding: 6px 10px;
text-transform: uppercase;
font-size:.8em;
color:white;
font-weight:bold;
border-radius:4px;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#dropZone table #bq_zone span:before{content:'banque';background:var(--bank_zone);color:white}
#dropZone table #buy_zone span:before{content:'achats';background:var(--buy_zone);;color:white}
#dropZone table #sale_zone span:before{content:'ventes';background:var(--sale_zone);;color:white}
#dropZone, #pin_info{display:block;}

#section_classeur .pins{
position:relative;
top:85px;
}
#section_classeur .pins table td{text-align:center;font-size:1.8em;color:var(--dash)}
#section_classeur .pins .notice{
display:block;position:relative;background:white;padding:5px;margin-top:5px;
height:max-content;
border-radius:5px;
border:1px dashed var(--dash)
}
#section_classeur .pins .notice h2{text-align:center}

#dumpContent{
display:block;
position:relative;
top:75px;
}
#dumpContent .folder{
display:block;
position:relative;
background: white;
height:max-content;
overflow:hidden;
border-radius:5px;
cursor: pointer;
margin-bottom:10px
}
#dumpContent .folder:last-of-type{margin-bottom: 285px;}
#dumpContent .folder .topDossier{
display:block;
height:50px;
position:relative;
margin:auto;
cursor:pointer;
}
#dumpContent .folder .topDossier i:first-of-type,
#dumpContent .folder .topDossier div:first-of-type{ 
display:block;
position:absolute;
text-align:center;
height:50px;
}
#dumpContent .folder .topDossier i:first-of-type{
left:0;
font-size:1.6em ;
width:40px;
line-height:50px;
transition:transform .3s ease;

}
#dumpContent .folder .topDossier div:first-of-type{
left:40px;
text-align:center;
width:24px;
height:50px;
line-height:50px;
position:absolute;

}
#dumpContent .folder .topDossier div:first-of-type span{
content:'';
width: 24px;
height: 24px;
line-height: 24px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
color:white;
background:var(--theme);
border-radius:50%;	
font-weight:bold;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
pointer-events:none;
font-size: .8em;

}
#dumpContent .folder .topDossier div:nth-of-type(2){
display:block;
position:absolute;
height:50px;
line-height:50px;
left:70px;
font-weight:bold;
text-transform:uppercase
}
#dumpContent .folder .topDossier .file_controls{
display: block;
width: max-content;
position: absolute;
white-space:nowrap;
right: 0	
}
#dumpContent .folder .topDossier .file_controls i{
display:none;
position:relative;
font-size:1.2em ;
text-align:center;
width:40px;
line-height: 50px;
}
#dumpContent .folder  i[data-fonction="locker"]{color:var(--green2);}
#dumpContent .folder  i[data-fonction="unlocker"]{ color:var(--red);display:none }
#dumpContent .folder  i[data-fonction="trash_all"]:active{ color:var(--red)!important; }
#dumpContent .folder .topDossier:hover{background:var(--theme); color:white;}
#dumpContent .folder.locked .topDossier:hover{background:var(--dash1); }
#dumpContent .folder .topDossier:hover div:nth-of-type(3) i{color:white;}
#dumpContent .folder .topDossier:hover div:first-of-type span{ background:white; color:var(--theme)}
#dumpContent .folder .fileDump{
display:none;
position:relative;
padding: 0 15px 30px;
} 
#dumpContent .folder::after{
content: '';
display: none;
position: relative;
left: 0;
right: 0;
bottom: 0;
height: 45px;
pointer-events: none;
}
#dumpContent .fileDump::before{
content: 'Tous les documents';
display: block;
border-bottom: 1px solid var(--line);
border-top: 1px solid var(--line);
position: absolute;
font-weight:bold;
background:var(--off);
left: 0;
right: 0;
padding: 5px 12px;
}
#dumpContent .folder .download{
border-radius: 25px;
background-color: var(--green);
color: white;
height: 30px;
line-height: 30px;
padding: 0 15px;
cursor: pointer;
position: absolute;
display: none!important;
bottom: 8px;
right: 10px;	
}
#dumpContent .folder .download:hover{ background:var(--green2)}
#dumpContent .folder .download:active{bottom:5px} 
#dumpContent .folder.open .topDossier .fa-caret-right{transform:rotate(90deg)	}
#dumpContent .folder.open{border:2px solid var(--theme)}
#dumpContent .folder.locked{opacity: .85;}
#dumpContent .folder.locked.open{border:2px solid var(--dash2);opacity:1}

#dumpContent .folder.open .fileDump,
#dumpContent .folder.open::after,
#dumpContent .folder.open .topDossier .file_controls,
#dumpContent .folder.open .download{ display:block;}

#dumpContent .folder.locked  .topDossier .file_controls  i[data-fonction="locker"],
#dumpContent .folder.locked i[data-fonction="select_all"],
#dumpContent .folder.locked i[data-fonction="trash_all"],
#dumpContent .folder.open.locked i[data-fonction="locker"],
#dumpContent .folder.open.locked i[data-fonction="select_all"],
#dumpContent .folder.open.locked i[data-fonction="trash_all"]{ display:none;} 

#dumpContent .folder .topDossier .file_controls i[data-fonction="locker"],
#dumpContent .folder.locked  i[data-fonction="unlocker"],
#dumpContent .folder.open.locked  i[data-fonction="unlocker"],
#dumpContent .folder.open i[data-fonction="locker"],
#dumpContent .folder.open i[data-fonction="select_all"],
#dumpContent .folder.open i[data-fonction="trash_all"]{ display:inline-block} 

#dumpContent .folder.spotted{border:2px solid var(--theme)}
#dumpContent .folder.spotted.locked{border:2px solid var(--dash2)}
#dumpContent .fileDump .files{
display: block;
position: relative;
padding: 5px 0px;
top: 31px;
white-space: nowrap;
}
#dumpContent .fileDump .files::after{
content:'';
display:block;
position:absolute;
left:-12px;
right:-12px;
border-bottom: 1px solid var(--line);
bottom: 0;
}
#dumpContent .fileDump .files span{
display:inline-block;
position:relative;
overflow:hidden;
text-overflow:ellipsis;
top:2px
}
#dumpContent .fileDump .files span:first-of-type{
width:40px;
height:	16px;
border-radius:2px;
} 
#dumpContent .fileDump .files span.fileCoche{
width:16px;
height:16px;
border-radius:2px;
border:2px solid var(--font);
top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  position: absolute;
  left: 45px;
}
#dumpContent .fileDump .files span.fileCoche::before{
content:'';
position:absolute;
display:none;
left:0;
right:0;
transform:rotate(45deg);
border-bottom:2px solid black;
top: 5px;
}
#dumpContent .fileDump .files span.fileCoche::after{
content:'';
position:absolute;
display:none;
left:0;
right:0;
transform:rotate(-45deg);
border-bottom:2px solid black;
top: 5px;
}
#dumpContent .fileDump .files.selected span.fileCoche::before,
#dumpContent .fileDump .files.selected span.fileCoche::after{display:block;}

#dumpContent .fileDump .files span.fileName{
position: absolute;
height: max-content;
top: 0;
bottom: 0;
margin: auto;
right: 110px;
left: 65px
}
#dumpContent .fileDump .files span.fileDate{
position: absolute;
height: 25px;
right: 0px;
top: 0;
bottom: 0;
margin: auto;
line-height: 25px;
}
#dumpContent .fileDump .files span.fileCut{
position: absolute;
right: -8px;
height: 25px;
line-height: 25px;
top: 0;
  bottom: 0;
  margin: auto;
width: 25px;
text-align: center;
display:none
}
#dumpContent .fileDump .files span.fileCut:active i{color:var(--red)!important}
#dumpContent .fileDump .files.selected span.fileDate{right: 20px;}
#dumpContent .fileDump .files.selected span.fileCut{display:block}
#dumpContent .fileDump .files[data-typefile="bank"] span:first-of-type{background : var(--bank_zone)}
#dumpContent .fileDump .files[data-typefile="buy"] span:first-of-type{background : var(--buy_zone)}
#dumpContent .fileDump .files[data-typefile="sales"] span:first-of-type{background : var(--sale_zone)}
#dumpContent .fileDump .files[data-ndf="true"] span:first-of-type{background : var(--ndf_zone)}

#dumpContent .folder.open.locked .fileDump,
#dumpContent .folder.open.locked .download,
#dumpContent .folder.locked div.triggable{
filter: grayscale(1);
opacity: .7;
cursor: not-allowed;
}

#dumpContent .folder.open.locked .fileDump > *{pointer-events:none}
#dumpContent *.triggable{pointer-events:none!important}

.ibtn{
display:block;
position:fixed;
background: linear-gradient(to bottom, var(--theme_2),var(--theme));
width:60px;
height:60px;
color:white;
right:20px;
border-radius:50%;
text-align:center;
font-size:1.4em;
cursor:pointer
}
.ibtn i{
position:absolute;
width:max-content;
height:max-content;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;

}

#ndf_contener{
display:none;
position:fixed; 
background-color: rgba(0,0,0,0.6);
top:0;
bottom:0;
left:0;
right:0;
z-index: 10;
}
body[data-ndf="on"] #ndf_contener{display:block;}

#ndf_contener #navCal_ndf #close_cal_ndf,
#ndf_contener #ndf_frame #close_ndf{
display: block;
position: absolute;
cursor: pointer;
right: 0;
top: 0;
color: var(--red);
background:#FFFFFF;
height: 50px;
width: 50px;
font-size:2em;

}

#ndf_contener #navCal_ndf #close_cal_ndf::before,
#ndf_contener #navCal_ndf #close_cal_ndf::after,
#ndf_contener #ndf_frame #close_ndf::before,
#ndf_contener #ndf_frame #close_ndf::after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 24px;
  height: 5px;
  background: var(--red)!important;
  border-radius: 2px;
}

#ndf_contener #navCal_ndf #close_cal_ndf::before,
#ndf_contener #ndf_frame #close_ndf::before {
  transform: rotate(-45deg);
}

#ndf_contener #navCal_ndf #close_cal_ndf::after,
#ndf_contener #ndf_frame #close_ndf::after{
	 transform: rotate(45deg);
}

#ndf_contener #navCal_ndf #close_cal_ndf:active,
#ndf_contener #ndf_frame #close_ndf:active{
color:#FFFFFF;
background:var(--red)  
}

#ndf_contener #navCal_ndf #close_cal_ndf:active::before,
#ndf_contener #navCal_ndf #close_cal_ndf:active::after,
#ndf_contener #ndf_frame #close_ndf:active::before,
#ndf_contener #ndf_frame #close_ndf:active::after{background:#FFFFFF!important}

#ndf_contener #navCal_ndf #close_cal_ndf i,
#ndf_contener #ndf_frame #close_ndf i{
width:max-content;
height:max-content;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;

}
#ndf_contener #ndf_frame #back_ndf{
width: max-content;
display: block;
position: absolute;
top: 20px;
cursor:pointer
} 
#ndf_contener #ndf_frame #back_ndf:hover{text-decoration:underline}

#ndf_contener #navCal_ndf,
#ndf_contener #ndf_frame{
display:block;
overflow:hidden;
width:max-content;
height:max-content;
min-width: 400px;
min-height: 480px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background:white;
padding: 35px 25px 25px;
text-align:center;
box-shadow: 0 3px 8px rgba(0,0,0,0.47);
border-radius: 5px	 
}
#ndf_contener #ndf_frame span{display:inline-block;
text-align:center;
padding-top:15px;
width:115px;
height:100px;
border: 1px solid white; cursor:pointer }
#ndf_contener #ndf_frame span i,
#ndf_contener #ndf_frame span p{display:block} 
#ndf_contener #ndf_frame span i{font-size:2.6em;margin-bottom: 8px;} 
#ndf_contener #ndf_frame span p{font-size:.65em;padding: 0;width:auto;white-space: nowrap;}
#ndf_contener #ndf_frame span:nth-child(3n):after {  content: "";  display: block; }
#ndf_contener #ndf_frame span:hover{
background: #E2F3E2;
border: 1px solid var(--font); 
}

#days_cal_ndf{
display: block;
  position: absolute;
  height: max-content;
  top: 35px;
  bottom: 25px;
  margin: auto;
  left: 25px;
  right: 25px;
}

#entete_cal_ndf{
height: 60px;
/*line-height: 60px;*/
font-weight:bold;
cursor:pointer;
margin-bottom: 20px;	
}

#entete_cal_ndf table{height: 100%;}
#entete_cal_ndf table td{position:relative}
#browseCalender{cursor:pointer;font-size: 1.2em;line-height: 60px;}
#agendaPast, #agendaNext{width:60px;background: linear-gradient(180deg, var(--theme_2),var(--theme)); color:#FFFFFF;cursor:pointer;font-size: 1.8em;}
#agendaPast i, #agendaNext i{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: max-content;
  width: max-content;
  margin: auto;
}

#datePickNdf td{height:50px;width:50px; cursor:pointer}
#datePickNdf td:hover{background:var(--theme_2);color:#FFFFFF}
#datePickNdf td:active{background:var(--theme);color:#FFFFFF}
#datePickNdf td.dayOff{ background: var(--hint);cursor: not-allowed; color:var(--font)}
#datePickNdf td.dayOff:hover{ background: var(--hint-bottom);}
#datePickNdf td.dayNow{ background: var(--orange);color:#FFFFFF;}
#datePickNdf td.dayNow:hover{background: var(--orange4);}
#datePickNdf td.dayNow:active{background: var(--orange2);}

#grabForm #inTitle{pointer-events:none}
#grabForm #inTitle_box #inTitle::placeholder{opacity:1;}
#grabForm #inTitle_box:active #inTitle{background: linear-gradient(180deg, var(--theme_2),var(--theme)); border-color: var(--theme_2);color:#FFFFFF }
#grabForm #inTitle_box:active #inTitle::placeholder{opacity:1;color:#FFFFFF!important}

#form_NDF{
display: block;
position: absolute;
left: 25px;
right: 25px;
height: max-content;
margin: auto;
top: 50px;
bottom: 25px;} 
#form_NDF table{width:265px;margin: auto;}
#form_NDF table tr td{font-size:2.5em;font-weight:bold}
#form_NDF table tr td:first-of-type{ width:45px;text-align:left}
#form_NDF table tr td:nth-of-type(2){width:15px;}
#form_NDF #i_title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#form_NDF .note_grabber{display:block;margin-top: 15px;}
#form_NDF .note_grabber input{	width:0;height:0;opacity:0;} 
#form_NDF .note_grabber i{font-size:12em; color:var(--theme)}
#form_NDF #date_NDF{
height: 38px;
top: -6px;
position: relative;
border: 1px solid var(--dash4);
border-radius: 4px;
padding-left: 10px;
font-size: 18px;
width: 100%;
} 
#form_NDF #cpt_NDF{
display:block;
border-radius:4px ;
height: 38px;
position:relative;
background:var(--dash4);
overflow:hidden;
cursor:pointer
}
#form_NDF #cpt_NDF .switch_btn{
display: block;
width: 25px;
height: 100%;
background: white;
margin: auto;
position: absolute;
transition:all .3s ease;
left:0;
right:unset;
}

#form_NDF #cpt_NDF .pro_span,
#form_NDF #cpt_NDF .perso_span{ 
text-transform: uppercase;
display: block;
position: absolute;
width: 100%;
height: 38px;
line-height:38px;
font-size: .7em;
color: white;
font-weight:bold;
transition:all .3s ease
}

#form_NDF #cpt_NDF .pro_span{ background: var(--theme)}
#form_NDF #cpt_NDF .perso_span{ background: var(--bank_zone)}

#form_NDF #cpt_NDF[data-ndf_cpt="pro"]{border:1px solid var(--theme);}
#form_NDF #cpt_NDF[data-ndf_cpt="perso"]{	border:1px solid var(--bank_zone);}

#form_NDF #cpt_NDF[data-ndf_cpt="pro"]  .pro_span{left:0;}
#form_NDF #cpt_NDF[data-ndf_cpt="pro"]  .perso_span{left:-100%;}
#form_NDF #cpt_NDF[data-ndf_cpt="pro"]  .switch_btn{left:0;  transition:all .3s ease;}

#form_NDF #cpt_NDF[data-ndf_cpt="perso"]  .pro_span{left:100%;}
#form_NDF #cpt_NDF[data-ndf_cpt="perso"]  .perso_span{left:0;}
#form_NDF #cpt_NDF[data-ndf_cpt="perso"]  .switch_btn{left: calc(100% - 25px);}

/******************************************/

#grabForm{display:block;
position:relative;
width:80%;
margin:auto; 
margin-top:70px

}
#grabForm input[type="text"] {
display:block;
position:relative;
width:100%;
padding: 10px 10px 10px 70px;
font-size: 1.2em;
border:1px solid var(--line3) ;
border-radius:4px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis
}
#grabForm input[type="text"] :focus {  border: 2px solid var(--theme);  padding: 9px 9px 9px 59px;}

#grabForm div {display:block;
position: relative;
cursor:pointer;
overflow:hidden; border-radius:4px;
margin-bottom:18px;white-space:nowrap}
#grabForm div.champs::before {display:block;
position: absolute;content:'';
top:0;left:0;bottom:0; width:55px;background: linear-gradient(180deg, var(--theme_2),var(--theme));z-index:1}		 
#grabForm div.champs i{display:block;
position: absolute;
height:max-content;
width:max-content;left:15px;top:0;bottom:0;margin:auto;font-size:1.7em;color:#FFFFFF;z-index:2}
#grabForm #date_NDF_display{pointer-events:none}

#grabForm #date_champs:active  * {
background: linear-gradient(180deg, var(--theme_2),var(--theme));
border-color:var(--theme_2);
color:#FFFFFF	
}

#grabForm div.champs i[data-codec="N014"]{font-size: 1.6em;left: 16px;}
#grabForm div.champs i[data-codec="N04"]{font-size: 1.4em}
#grabForm div.champs i[data-codec="N06"]{font-size: 1.5em}
#grabForm div.champs i[data-codec="N07"]{left: 18px;font-size: 1.6em;top: 2px;}
#grabForm div.champs i[data-codec="N08"],
#grabForm div.champs i[data-codec="N09"]{font-size: 1.35em}
#grabForm div.champs i[data-codec="N10"]{font-size: 1.35em;left: 14px;}
#grabForm div.champs i[data-codec="N11"]{left: 17px;}
#grabForm div.champs i[data-codec="N12"]{font-size: 1.6em}
#grabForm div.champs i[data-codec="calender"]{font-size: 1.5em;left: 17px;}

#grabForm div.switch{ overflow:visible; }
#grabForm div.switch input[type="radio"]{display:none;}		 
#grabForm div.switch label{
 display:inline-block;
 position: relative;
 width:50%;
 text-align:center;
 cursor:pointer;
 text-transform:uppercase;
 font-size:1em;
 font-weight:bold;
 padding:11px;
 background:var(--line); 
 border:1px solid var(--line3) ;
 color: var(--font_3)		 
}

#grabForm div.switch input[type="radio"]:checked + label{ 
padding:12px; 
background: linear-gradient(180deg, var(--theme_2),var(--theme));
border:none;
color:#FFFFFF}	
#grabForm div.switch label:first-of-type{border-radius:4px 0 0 4px}
#grabForm div.switch label:last-of-type{border-radius:0 4px 4px 0}
#grabForm div.switch input[type="radio"] + label > i{display:none;font-size:.8em;}
#grabForm div.switch input[type="radio"]:checked + label > i{display:inline-block;
position: relative; 
 top: -.1em; }

#grabForm div.pic_grab{
background: linear-gradient(180deg, var(--theme_2),var(--theme));
box-shadow: 0 1px 3px rgba(0,0,0,.47)}
#grabForm div.pic_grab input[type="file"]{display:none}
#grabForm div.pic_grab label{ 
display:block;
position:relative; 
padding:14px; 
width:100%; 
border-radius:4px; 
cursor:pointer;
color:#fff;
font-size:1.2em;
text-transform: uppercase;
}
#grabForm div.pic_grab label i{ margin-right:4px}		 
#grabForm div.pic_grab:active{top:3px}

#dwnld{
display: block;
  padding: 15px;
  border-radius: 5px;
  background: white;
  position: absolute;
  bottom: 25px;
  left:15px;
  right: 235px
}

body[data-device="electron"] #grabForm div.pic_grab #grab_NDF{
display: none!important
}

/******************************************/

#rolodex{
display:none;
position:absolute;
width:max-content;
height:max-content;
padding: 35px 25px 25px;
border-radius: 8px;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
box-shadow : 0 2px 7px rgba(0,0,0,.27);
z-index:115;
background: #fff;
text-align:center;
overflow:hidden;
}
#rolodex #close_rolodex{ 
display:block; 
position:absolute;
font-size:28px;
height:36px;
width:48px;
top:6px;
right:3px;
padding: 6px 12px;
cursor:pointer
}
#rolodex #close_rolodex::before,
#rolodex #close_rolodex::after{
content: '';
display: block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width: 24px;
height: 5px;
background: var(--red);
border-radius: 2px;

}
#rolodex #close_rolodex::before{
transform:rotate(-45deg)	
}
#rolodex #close_rolodex::after{
transform:rotate(45deg)	
}
#rolodex .display_month{
  padding: 8px 14px;
  text-align: center;
  font-size: 34px;
  vertical-align: middle;
  cursor:pointer
}
#rolodex table{table-layout: unset;}
#rolodex table tr td{position:relative;}
#rolodex table tr td.roll{width:28px;}
#rolodex table tr td.roll span{ 
display:block; 
font-size:28px;
cursor:pointer;
width: 30px;
position:absolute;
}
#rolodex #cap_m_up,#rolodex #cap_y_up{ top:0}
#rolodex #cap_m_dwn,#rolodex #cap_y_dwn{ bottom:0}
#rolodex table tr td:first-child span{text-align:left;}
#rolodex table tr td:last-child span{text-align:right}
#rolodex table tr td button{
  display: block;
  position: relative;
  width: 220px;
  padding: 11px;
  font-size: 1.2em;
  color: white;
  background: linear-gradient(180deg, var(--theme_2),var(--theme));
  box-shadow: 0 2px 3px rgba(0,0,0,0.27);
  border-radius: 4px;
  cursor: pointer;
  height: 45px;
  text-transform: uppercase;
  margin:16px auto}
#rolodex table tr td button:active{
  box-shadow: 1px 2px 3px rgba(0,0,0,0.37);
  top: 4px;}
#rolodex .offTime{
  padding: 14px 28px;
  text-align: center;
  font-size: 26px;
  vertical-align: middle;
  cursor:pointer;
  opacity:.2	
}
#rolodex .onTime{
  padding: 20px 28px;
  text-align: center;
  font-size: 26px;
  vertical-align: middle;
  min-width: 120px;	
}
#rolodex .offTime span{display:block;width:max-content;text-align:center;margin: auto;}
#rolodex table td.breakTime{width:32px}
#off_m_up, #off_y_up{border-bottom:1px solid var(--theme_2)}
#off_m_dwn, #off_y_dwn{border-top:1px solid var(--theme_2)}

body[data-nav="classeur"] #rolodex{ display:block;}

/* Default position #shots_pin */ 
/* BROWSE MODE */
#pinGroup{position: absolute;}
#pinGroup.browse #dir_pin{display:none}
#pinGroup.browse #drop_pin{bottom:153px;}
#pinGroup.browse #drop_pin:active{bottom:150px} 
#pinGroup.browse #drop_pin i{right: 4px;}
#pinGroup.browse #date_pin/*,#pinGroup.browse #drop_pin,#pinGroup.drop #dir_pin*/{bottom:83px}
#pinGroup.browse #date_pin:active/*,#pinGroup.browse #drop_pin:active,#pinGroup.drop #dir_pin:active*/{bottom:80px} 
#pinGroup.browse #shots_pin{bottom:15px}
#pinGroup.browse #shots_pin:active{bottom:12px}

/* DROP MODE */   
#pinGroup.drop #drop_pin{display:none}
#pinGroup.drop #dir_pin{bottom:153px}
#pinGroup.drop #dir_pin:active{bottom:150px}
#pinGroup.drop #date_pin{bottom:83px}
#pinGroup.drop #date_pin:active{bottom:80px}
#pinGroup.drop #shots_pin{bottom:15px}
#pinGroup.drop #shots_pin:active{bottom:12px}

#section_booking .book_tools{
display:block;
white-space:nowrap;
position:relative
}
#section_booking .book_tools span{
display:inline-block;
vertical-align:top;
position:relative;
margin-right:6px;
background:white;
height:50px;
line-height:50px;
padding:0 18px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
font-size:1.4em;
border-radius: 5px;
cursor:pointer;
font-weight:bold;
text-transform:uppercase
}

#book_pin::after{
display:block;
position:absolute;
font: var(--fa-font-solid);
/*content : '\2b';*/
font-size:.6em;
bottom: 4px;
right: 10px

}

#section_booking .book_tools span:hover{
background:var(--theme);
color:white;
}
#section_booking .book_tools span:active{
border:2px solid var(--theme);
color:var(--theme);
background:white;
padding:0 16px;	
}
#section_booking #book_pin:active::after{
bottom: 2px;
right: 8px	
}

#book_pin{display:none!important}
#month_display::before{
display:inline-block;
font: var(--fa-font-solid);
content : '\f783';
margin-right:8px
}

#section_booking .book_tools span#last_month,
#section_booking .book_tools span#next_month{margin:0;display:none}
#section_booking .book_tools span#last_month{
border-top-right-radius:0;
border-bottom-right-radius:0

}
#section_booking .book_tools span#next_month{
border-top-left-radius:0;
border-bottom-left-radius:0

}

#book_sets{
display:block;
position:fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index:50
}
#book_sets .book_layer{
content:'';
display:block;
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
backdrop-filter: blur(4px);
background-color: rgba(255, 255, 255, 0.4);	
}
#bookForm{
display:block;
width:92%;
max-width:600px;
height:max-content;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background:white;
border-radius: 8px;
}
#bookForm .bookTop{
background:var(--theme);
color:white	;
display:block;
padding:8px 20px;
box-shadow: 0 3px 4px rgba(0,0,0,0.37);
position:relative;
border-top-left-radius: 8px;
border-top-right-radius: 8px;

}
#bookForm .bookTop o{ display:block;font-size:.8em}
#bookForm  #book_close{
display: block;
position: absolute;
content: '';
right: 15px;
top: 0;
bottom: 0;
background: var(--red);
width: 30px;
height: 30px;
margin: auto;
text-align: center;
border-radius:50%;
cursor:pointer;
text-shadow: 0 3px 4px rgba(0,0,0,0.17);
box-shadow: 0 3px 4px rgba(0,0,0,0.17)
}
#bookForm  #book_close:active{top:3px;}
#bookForm  #book_close i{ 
display:block;
position:absolute; 
right:0;
left:0;
top:0;
bottom:0;
margin:auto;
color:white;
height:max-content;
font-size:1.4em;
}
#bookForm .book_steps fieldset,
#bookForm .book_steps label{display:block;}
#bookForm .book_steps{
padding:15px 28px;
position: relative; 
border-bottom:1px solid var(--dash3);
background: white;}
#bookForm .book_steps:last-of-type{
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
#bookForm .book_steps .step_id{
display:block;
position:absolute;
background-color: var(--theme);
color: white;
border-radius: 50%;
width: 28px;
height: 28px;
text-align: center;
line-height: 28px;
left:-14px;
top:0;
bottom:0;
margin:auto
}
#bookForm .book_steps.process_RDV .step_id{ background:var(--green);left: -18px;color: transparent;}
#bookForm .book_steps.process_RDV .step_id::before{ 
display:block; content: '\f00c'; 
position:absolute;
height:max-content;
width:max-content;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
color:#FFFFFF;
font : var(--fa-font-solid);}
#bookForm .book_steps.process_RDV{border-left: 4px solid var(--green);}
#bookForm .book_steps label{margin-bottom:8px}
#bookForm .book_steps fieldset{
position: relative;
width: 100%;
font-weight: 600;
color: #8c8c9c;
height: 45px;
line-height:25px;
padding: 10px;
border: 1px solid var(--dash);
appearance: none;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
background:var(--disabled)
}
#bookForm .book_steps fieldset  i{
display: block;
position: absolute;
right:20px;
top:0;
bottom:0;
height:max-content;
margin:auto	;
transition:all .2s ease
}
#bookForm .book_steps fieldset.spread  i{
transform:rotate(180deg)	
}
#bookForm .book_steps fieldset dropdown{
display:none;
cursor:pointer;
padding: 10px;
left: 0;
right: 0;
background: white;
position:absolute;
margin-top:8px;
border: 1px solid var(--dash);
z-index: 4;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px
}
#bookForm .book_steps fieldset dropdown span{
display:block;
padding:3px 0;	
}
#bookForm .book_steps fieldset dropdown span:hover {
color: var(--theme);
}
#bookForm .book_steps fieldset.spread dropdown{
display:block		
}
#bookForm .book_steps.tips_blender{
min-height:300px	
}
#bookForm .book_steps.tips_blender::before{
content:'\f073';
display:block;
font:var(--fa-font-solid);
color: rgba(67,95,113,0.2);
font-size: 220px;
width: max-content;
pointer-events: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: max-content;
}

#bookForm #bookrows div,
#bookForm #bookrows table,
#bookForm #bookrows.activated::before{display:none;}
#bookForm #bookrows.activated div{display:block;}
#bookForm #bookrows.activated table{display:table;}
#bookForm #bookrows.activated .week_browse{
display:block;
text-align:center;
white-space:nowrap;
font-weight:bold;
margin-bottom:10px;
cursor:pointer
}
#bookForm #bookrows.activated .week_browse #now_W{margin:0 10px}
#bookForm #bookrows.activated .week_browse #now_W:hover{text-decoration:underline}
#bookForm #bookrows.activated .week_browse #now_W:active{color:var(--theme_2)}
#bookForm #bookrows.activated .week_browse #last_W,
#bookForm #bookrows.activated .week_browse #next_W{
background:var(--theme);
color:white	;
width:35px;
height:35px;
line-height:35px;
text-align:center;
border-radius:50%;
display:inline-block;
font-size:1.2em;
}
#bookForm #bookrows.activated .week_browse #last_W:hover,
#bookForm #bookrows.activated .week_browse #next_W:hover{
background:var(--theme_2)
}
#bookForm #bookrows.activated .week_browse #last_W:active,
#bookForm #bookrows.activated .week_browse #next_W:active{
background:var(--theme_dark);
color:white
}
#bookForm #bookrow s.activated .tips_blender td{
position:relative;
text-align:center;
border:3px solid transparent
}
#bookForm #bookrows.activated .tips_blender td span{
display:block;
text-align:center;
border-radius:4px;
margin:auto	
}
#bookForm #bookrows.activated .tips_blender #days_row td {border-bottom:8px solid transparent}
#bookForm #bookrows.activated .tips_blender #days_row td span{line-height:22px}
#bookForm #bookrows.activated .tips_blender #days_row td span::first-line{
font-weight: bold;
}
#bookForm #bookrows.activated .tips_blender td span.rdv_today{background:var(--onday); }
#bookForm #bookrows.activated .tips_blender  td span{
line-height:40px;
cursor:pointer
}
#bookForm #bookrows.activated .tips_blender  td.on span{
background:var(--theme_2);
color:white;
width:100%;
max-width: 75px;
font-size:.9em;
font-weight:bold;
}
#bookForm #bookrows.activated .tips_blender  td.on span:hover{
color:var(--theme);
background:var(--jaune)	
}
#bookForm #bookrows.activated .tips_blender  td.on span:active{
color:white;
background:var(--orange4)		
}
#bookForm #bookrows.activated .tips_blender td.off{
cursor:not-allowed;
position: relative;
}
#bookForm #bookrows.activated .tips_blender td.off::before{
content:'\f068';
display:block;
position:absolute;
font:var(--fa-font-solid);
color: var(--off_minus);
width:max-content;
height:max-content;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
font-size:1.2em	
}

#tips_blender{border-collapse: separate;}

.group_tableau section{
display: block;
max-width: 768px;
overflow: hidden;
position: relative;
border-radius: 5px;
margin-bottom: 15px;
cursor: pointer;
background :#FFFFFF	
}
.group_tableau > section > .divHeader > i:first-of-type{
display:inline-block;
position:relative;
text-align:center;
width:50px;
height:50px;
line-height:50px;
color:var(--theme)	
}
.group_tableau > section > .divHeader > span{
height:50px;
line-height:50px;
color:var(--theme)	
}
.group_tableau > section > .divHeader > span > o{
	color:var(--green)
}
.group_tableau > section > div{
display:none;
position:relative;
padding:25px;	
}
.group_tableau > section > div.regul{ padding: 25px 10px 10px; }
.group_tableau .modules{ height:max-content; display:block}
.group_tableau table td{
border-left: 1px solid var(--line);
border-top: 1px solid var(--line);
text-align:center;
}
.group_tableau table td span{
  display: block;
  width: 100%;
  padding: 13.5px 5px;
  text-align: center;
  cursor:pointer;
  font-size: 1.2em;	
}
.group_tableau table td.picked span,.group_tableau table td:hover span{
background:var(--theme_2);
color:#FFFFFF	
}
.group_tableau table td:hover span{background:var(--theme_2);}
.group_tableau table td:active span{
background:var(--theme);
color:#FFFFFF
}
.group_tableau div td{border:none;}
.group_tableau div td.bumper{width:8px}
.group_tableau  fieldset{
display:block;
position:relative;
overflow: hidden;
height:45px;
line-height:45px
}
.group_tableau  fieldset input {
  display: block;
  position: relative;
  width: 100%;
  height: 45px;
  padding: 10px;
  font-size: 1.2em;  
  border-radius: 4px ;
  border: 1px solid var(--line3);
}
.group_tableau  fieldset input[readonly]{cursor:pointer}
.group_tableau  fieldset input[readonly]:hover{background:var(--theme_2); color:#FFFFFF;border-color : var(--theme_2)}
.group_tableau  fieldset input[readonly]:active{background:var(--green); color:#FFFFFF; border-color :var(--green);}
.group_tableau  fieldset i:first-of-type{animation: blink_2 1s infinite}
.group_tableau  fieldset i:nth-of-type(2){animation: blink_2 1s infinite;animation-delay: .1s;}
.group_tableau  fieldset i:last-of-type{animation: blink_2 1s infinite;animation-delay: .2s;}
.group_tableau  fieldset input:focus { border:2px solid var(--theme); padding: 8px 8px 8px 10px;}
.group_tableau .regul td:not(.button){ 
  border-right:25px solid transparent;
  border-left:25px solid transparent;
  border-bottom:15px solid transparent;
}
.group_tableau .regul td.button{
  width: max-content;
  border-right:25px solid transparent;
  border-bottom:15px solid transparent;
}
.group_tableau .regul td button {
  display: block;
  position:relative;
  width: 100%;
  padding: 11px;
  font-size: 1.2em;
  color: white;
  background: linear-gradient(180deg, var(--theme_2),var(--theme));
  border-radius: 4px;
  cursor: pointer;
  height: 45px;
  margin: auto;
  text-transform: uppercase;
  max-width:250px;
  min-width: 50px;
}
.group_tableau .regul td.button {	
  width:220px;
  min-width: 50px;
}
.group_tableau > section[data-mode="regul"] > div.regul,
.group_tableau > section[data-mode="employees"] > div.employees,
.group_tableau > section[data-mode="salary"] > div.salary,
.group_tableau > section[data-mode="user_list"] > div.user_list,
.group_tableau > section[data-mode="user_pass"] > div.user_pass,
.group_tableau > section[data-mode="user_add"] > div.user_add{display:block;background: #fff;}
.group_tableau > section[data-mode="regul"] #sim_regul span,
.group_tableau > section[data-mode="employees"] #sim_employees span,
.group_tableau > section[data-mode="salary"] #sim_salary span,
.group_tableau > section[data-mode="user_list"] #sim_user_list span,
.group_tableau > section[data-mode="user_pass"] #sim_user_pass span,
.group_tableau > section[data-mode="user_add"] #sim_user_add span{
background:var(--theme_2);
color:#FFFFFF
}
.group_tableau #regul_result i{ color:var(--orange); font-size:4em}

/************************************/
#brandCorp{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #141417;
color: #A1A1A2;
text-align: right;
font-size: 60%;
z-index: 9999;
display: block;
cursor: pointer; 
height: 25px;
}
#brandCorp div{
display: block;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 25px;
line-height: 25px;
right: 25px;
}
#brandCorp div span {
display:inline-block;
top:0;
position: relative;
width: max-content;
height: 20px;
}
.E{
position:absolute;
vertical-align:middle; 

}

.noElectron, .noAndroid, .noPc{display:none!important}

/************************************/

@media only screen and (max-width: 1245px) { 
#recap div table td{padding-left:40px} 
#km_calc {margin-left:0;width: 100%}
#km_settings{margin-right:0;width: 100%}
}
@media only screen and (max-width: 1028px) {
.nophone {
display: none!important
}
#app_menu {
left: -224px
}
#app_content {
left:0;
padding: 75px 15px 15px;

}
#app_menu .logo i {
display: block;
}
body.open #app_menu {
left: 0;
width: 100%
}
#dropdown {
width: unset;
left: 60px;
border-left: none;
padding-left: 60px;
font-size: 1em;
}
#avatar{left: 10px;}
body.showPannel #side_pannel {
width: 101vw;
right: 0
}
#side_pannel .contact #ctc_writer {  padding: 10px 0;}
#side_pannel .contact .comptable {margin: 16px auto;width: 80px;height: 80px}
#side_pannel .contact hr { margin: 18px auto 0;}
#pie{width:100%;margin-right:0;}
#news{width:100%;margin-left:0;}
#recap,#recap,#graph,#pie,#news{margin-bottom:15px}
#section_classeur .top_band,.timeZone{left:0}
#logger .log_container {  left:0;right: 0;}
#logger .desc,
#adList{display:none}
#brandCorp div{ right:0;left:0;width:max-content}
body[data-nav="kilometres"] #section_kilometres {  text-align: center;}
.group_tableau section {margin:auto}
.group_tableau .regul td.button {
    width: 80px;
}
#dwnld{right:15px}
}
@media only screen and (max-width: 768px){
#recap div {
display: block;
position: relative;
width: 100%;
height: 75px;
}
#recap div:first-of-type table td:nth-of-type(2) {  border-right: none;} 
#recap div:last-of-type {border-top: 1px solid var(--line);}
#recap div table td { padding-left: 50px;}
#graph div{padding-top:45px;padding-left:25px}
#graph div span{height:45px}
#graph div span::after{display:none}
#graph .bars {left: 33px;top: 45px;}
#logger{height: auto;bottom:0;}
#logger .log_container{
	 width:100%;
border-radius:0;
top:0;bottom:0;padding: 150px 60px 0;
max-width:unset;
overflow: hidden;
overflow-y: auto;}
#logger #log_span {font-size:1.2em}
#logger .log_container::before {width: 85px;height: 85px; top: 65px;}
#logger .log_container::after {width: 80px;height: 80px;  top: 65px;}
#dropZone{height:125px}

}
@media only screen and (max-width: 570px){
#confirmBox { top: 120px;  bottom: unset;}
#rolodex {max-width:unset;height:100vh;width:100vw; border-radius: unset;position: fixed;padding-top: 85px;}
#rolodex #close_rolodex{position:fixed}
#recap div table td { padding-left: 35px;}
#side_pannel .infos {border-bottom:none}
#side_pannel .contact table td i{top:3px}

#dialBox fieldset{margin-bottom:10px}
#dialBox input{padding : 8px 15px;}

#graph div{padding-top:40px;padding-bottom:52px}
#graph div span{height:50px}
#graph .bars{top:40px;bottom:52px}
#graph .bars .chartBar{margin:0 5px;}
#graph .bars .chartBar p o{display:none}
#news div {  padding: 20px;}
#recap div table td span {  font-size: .8em;}
#recap div table td .trend {right: 12px;}
#dumpContent .folder .topDossier .file_controls i {width:32px}
#dumpContent .folder .topDossier .file_controls {right:4px}	
#dumpContent .fileDump .files span:first-of-type {  width: 16px;}
#dumpContent .fileDump .files span.fileCoche {left:20px}
#dumpContent .fileDump .files span.fileName {left:40px}
#dumpContent .fileDump .files span.fileDate {display:none}
#dumpContent .folder .topDossier i:first-of-type{font-size:1.2em}
#dumpContent .folder .topDossier .file_controls i {font-size:1em}
#dumpContent .folder .topDossier div:nth-of-type(2) { font-size: .9em;}
#dropTime {font-size: 1.3em;}
#bookForm{width:unset;left:18px;right:10px}
/** HANDLE PASSWORD **/
#logger .log_container{ padding: 150px 30px 0;}
#logger section input{/*color:transparent*/}
#logger section input::placeholder{color:var(--font)}
#logger section .password {
display: none;
position: absolute;
top: 5px;
bottom: 5px;
left: 20px;
width: max-content;
pointer-events:none;
height: 40px;
line-height: 40px;
font-size: .4em;
color:var(--font)
}
#logger section .password.lighted{
color:white;
background: var(--theme);
padding-left: 10px;
padding-right: 10px;
left:15px	
}

/*
#logger input#login_mdp_o{ font-size:1.7em }
#logger input#login_mdp_o::placeholder{ font-size:.6em }
*/


#logger section input:focus + span::after {
content: '';
display: block;
width: 2px;
height: 3.5em;
background-color: var(--font);
position: absolute;
top: 0;
right: -3px;
animation: blink 1s infinite;
bottom: 0;
margin: auto;
}
#logger section .password.lighted::after,
#logger.cropped .log_container::after{display:none}
#section_booking .book_tools span {/* font-size:1em */}
#section_booking .book_tools span:hover{
background:white;
color:var(--font);	
}
#section_booking .book_tools span:active{
background:var(--theme);
color:white;	
}
/*#month_display::before{display:none}*/
#dumpContent .fileDump .files span.fileName{right:20px}
#ndf_contener {background:white}
#ndf_contener #ndf_frame #close_ndf { position: fixed;}
#ndf_contener #ndf_frame #back_ndf{position: fixed; left:25px}
#ndf_contener #ndf_frame{
left:0;
right:0;
top:0;
bottom:0; 
width: auto; 
padding: 25px 10px;	 
}
#ndf_contener #ndf_frame span {
width: 100px;
height: 90px;}

#ndf_contener #navCal_ndf, #ndf_contener #ndf_frame {
  display: block;
  overflow: hidden;
  width: auto;
}

#ndf_contener #navCal_ndf{ height: 100vh;padding: 0; min-width: unset;}
#datePickNdf{margin:auto}
#datePickNdf td { max-width: 20px!important;}

#form_NDF { top: 0;}
#form_NDF table{width:350px;max-width:75%}
#form_NDF .note_grabber{margin-top: 30px;}
#ndf_contener #ndf_frame { box-shadow: unset;min-width: 100vw;}

#grabFormx{margin-top:auto}

body[data-device="electron"] #ndf_contener #ndf_frame #close_ndf{ top:32px}
body[data-device="electron"] #rolodex #close_rolodex{ top:40px;right:5px}

#bookForm #bookrows.activated table,
#bookForm #bookrows.activated .week_browse #now_W ,
#bookForm .bookTop,
#bookForm .book_steps > label {  font-size: .8em!important;} 
}
@media only screen and (max-width: 370px) {
#avatar {
display: none
}
#dropdown {
padding-left: 20px;
}
#recap div table td .legend { font-size: .6em;}
#km_settings .divHeader #switch_carview { width: 100px;}

#bookForm #bookrows.activated .tips_blender td span {  line-height: 34px!important;}
#bookForm #bookrows.activated .tips_blender #days_row td span { line-height: 18px!important;}
#bookrows { padding: 10px!important ;}
#bookForm .book_steps fieldset {  height: 35px;  line-height: 25px;  padding: 5px 10px;}	
#bookForm .book_steps fieldset dropdown { margin-top: 2px;}
#bookForm #bookrows.activated .week_browse {   margin-bottom: 0px;}
#bookForm .book_steps { padding: 10px 28px; }
#grabForm input[type="text"] { font-size: 1.1em;}
#browseCalender{font-size: 1.1em;}
#entete_cal_ndf { height: 50px!important;line-height: 50px;}
#browseCalender{  line-height: 50px;}
#agendaPast, #agendaNext {  width: 50px;font-size: 1.5em;}
#days_cal_ndf { 
left: 15px;
  right: 15px;}
}
@media only screen and (max-width: 320px) {
body *{display: none!important;}
#tb_sets{ display:table}
#bod_sets{display:table-row-group}
#tr_sets{display:table-row;}
#version,
#minimize,
#context,
#exit{display:table-cell}
#version *{display:block}
}

/************************************/
@media only screen and (min-width: 1028px) {
.dophone, #menu_trigger {	display: none!important}
#km_calc table th{font-size:12px}
#dropdown .down_list{  left: -1px;}
#dumpContent,#dropZone, #pin_info, #section_bilan { max-width: calc(100vw - 250px); }
#pie,#news{width:49%; max-width:49%}
}

/* HEIGHT SIZES */
@media only screen and (max-height: 800px){
#logger .desc span{
color:var(--theme); 
border: 2px solid var(--theme);
border-radius: 5px;
background: var(--bgcontent);
}
}
@media only screen and (max-height: 680px){
#logger .desc p { 
color:var(--theme);
background:var(--bgcontent)
}
}
@media only screen and (max-height: 570px){
#logger .desc{background:var(--bgcontent);padding: 30px 15px 40px;box-shadow: 0 1px 2px rgba(0,0,0,0.2);}
#logger .desc h3 {color:var(--theme);opacity:1}
#logger .desc p {color:var(--theme);}
}
@media only screen and (max-height: 640px) and (max-width: 370px){
#logger .log_container { padding: 110px 30px 30px; }	
#logger .log_container.engaged::after{
width: 55px;
height: 55px;	
top:28px 
}
#logger .log_container.engaged::before {
width: 60px;
height:60px;
top:26px
}
#logger .log_container.engaged .log_type{ display:none	;}

}
@media only screen and (max-height: 500px){
#logger .log_type {	font-size:.8em}
#logger input {/*height: 40px;font-size:.8em*/}
#logger input:focus{/*height: 39px;*/}
#logger button { /*padding: 10px;*/}
}

@keyframes shadow{
0%, 100%{width:120px;
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
background:rgba(0,0,0,0.1);
box-shadow:0 0 3px 4px rgba(0,0,0,0.1)}
50%{
width:90px;
-webkit-transform:translate3d(0, 15px, 0);
transform:translate3d(0, 15px, 0);
background:rgba(0,0,0,0.05);
box-shadow:0 0 3px 4px rgba(0,0,0,0.05)}
}
@keyframes float{
0%, 100%{
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
50%{
-webkit-transform:translate3d(0, -15px, 0);
transform:translate3d(0, -15px, 0)
}

}
@keyframes blink {
0% { opacity: 1;}
50% { opacity: 0;  }
100% { opacity: 1; }
}
@keyframes blink_2 {
0% { opacity: 1;top:0;position:relative; }
50% { opacity: 0; top:-4px;position:relative; }
100% { opacity: 1; position:relative;}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

#dialog_box{
display: block;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,.4);
margin: auto;
z-index: 10;	
}
.dialog_confirm{
display: block;
position: fixed;
width: 280px;
height: 130px;
background: white;
z-index: 10;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border-radius: 5px;
cursor:pointer;
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
text-align:center	;
overflow: hidden;
}
.dialog_confirm #abort_push{
position:absolute;
width:max-content;
height:max-content;
color:white;
background:var(--red);
font-size:1.2em;
padding:4px 10px;
right:0	;
top: 0;
}
.dialog_confirm #abort_push:active{
background:white;
color:var(--red);
border-left:1px solid var(--red);
border-bottom:1px solid var(--red)	
}
.dialog_confirm span{
display: block;
width: max-content;
margin: 40px auto 15px;	
}
.dialog_confirm #confirm_yes,
.dialog_confirm #confirm_no{
display:inline-block;
position:relative;
padding:8px 22px;
cursor:pointer;
border-radius:4px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);	
}
.dialog_confirm #confirm_no{ margin:0 15px;}
.dialog_confirm #confirm_yes{ margin :0 15px;background:var(--theme_4);color:white}
.dialog_confirm #confirm_yes:hover{background:var(--theme_2);}
.dialog_confirm #confirm_yes:active,
.dialog_confirm #confirm_no:active{opacity:.7;top:2px}
#section_bilan{display:none}
body[data-nav="bilan"] #section_bilan{display:block;position: relative;}
#section_classeur{display:none}
body[data-nav="classeur"] #section_classeur{display:block}
#section_kilometres{display:none}
body[data-nav="kilometres"] #section_kilometres{display:block}
#section_booking{display:none;position: relative;}
body[data-nav="rdv"] #section_booking{display:block}

#section_simulateurs {display:none}
body[data-nav="simul"] #section_simulateurs {display:block}

#section_admin{display:none}
body[data-nav="admin"] #section_admin{display:block}

#sizeWindows{bottom:0;top:unset;height: max-content;}

#app_content{
display: block;
  position: relative;
  height: 100Vh;	
}
/*************** ELECTRON ********************/

body[data-device="electron"] #rolodex{ top:64px}

#navElectron{display: none; -webkit-app-region: drag;}
body[data-device="electron"] #navElectron{
display: block;
position: fixed;
left: 0;
right: 0;
z-index: 999;
height: 32px;
color: var(--font);
background:white;
border-bottom:1px solid var(--line);
-webkit-app-region: drag;
}
body[data-device="electron"] #navElectron.dark{
color:white;
background:	var(--apptheme); 
border-bottom:0
}

#navElectron table{
width:100%;
height:100%;
}
#navElectron table td{ position:relative}
#navElectron table #version {}
#navElectron table #version img{
position:absolute; 
height:16px;
width:16px;
top:0;bottom:0;
left:8px;
margin:auto}
#navElectron table #version span{
display:block;
position:absolute;
height:max-content;
top:0;
bottom:0;
margin:auto;
left:30px;
font-size:.8em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#navElectron table #minimize,
#navElectron table #context,
#navElectron table #exit{
text-align:center;
cursor:pointer;
width:45px;
-webkit-app-region: no-drag;	
}
#navElectron table #exit:hover{background:#F3101C;color:white}
#navElectron table #exit:active{opacity:.7}
#navElectron table #context,
#navElectron table #minimize{font-size:.7em}
#navElectron table #context:not(.whide) .fa-window-restore{display:none;}
#navElectron table #context.whide .fa-square-full{display:none}
#navElectron table #context:hover,
#navElectron table #minimize:hover{background:var(--dash3)}
#navElectron table #context:active,
#navElectron table #minimize:active{background:var(--dash)}

body[data-device="electron"] #app_menu,
body[data-device="electron"] #app_tools{top:32px;}
body[data-device="electron"] #side_pannel,
body[data-device="electron"] #section_classeur .top_band{top:92px	}
body[data-device="electron"] #app_content{padding-top: 107px;}
body[data-device="electron"] .timeZone{ top:107px }

/**************** TUTORIALS ******************/
.tuto::before{
content:'';
position: fixed;
background-color: rgba(0,0,0,0.8);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
transform: none;	
}
.tuto {
  z-index: 99999 !important;
  top: 85px;
  position: fixed!important;
  width: unset !important;
  max-width: unset !important;
  margin: 0 !important;
  left: 235px;
  right: 15px;
}
#app_tools.tuto {position: fixed!important;}
#section_kilometres .tuto{max-width: 450px!important;}
#section_simulateurs .tuto{max-width: 768px!important;}

@media only screen and (max-width: 768px) {
  .tuto {
    max-width: unset !important;
    top: 60px !important;
    left: 15px !important;
    right: 15px !important;
  }
  #app_tools.tuto {
    top: 0 !important;
  }
  #app_tools.tuto, #section_classeur .tuto{
    left: 0 !important;
    right: 0 !important;
  }
}

#app_tools.tuto{z-index:10!important}
#timeZoneNav.tuto #dropTime{
width:unset;
z-index: -1;
text-align:center;
background: var(--theme);
}
#timeZoneNav.tuto #goLastDrop, 
#timeZoneNav.tuto #goNextDrop {background: var(--theme);}
#business_name.tuto{background: var(--red); padding: 0 ; height: 25px;line-height:25px}
#business_name.tuto #dir_info{background: var(--red);
color: white;
line-height: 25px;
height: 25px; 
padding-left:20px;
font-size: .95em;}

.disabled{display:none!important; pointer-events:none!important}