:root{
	/* CSS HSL */
		--rich-black: hsla(237, 100%, 4%, 1);
		--gunmetal: hsla(193, 68%, 11%, 1);
		--aquamarine: hsla(168, 99%, 49%, 1);
		--silver: hsla(0, 0%, 76%, 1);
		--antiflash-white: hsla(0, 0%, 92%, 1);
		--white-smoke: hsla(0, 0%, 96%, 1);
		--bright-pink-crayola: hsla(355, 96%, 69%, 1);
		--magenta-dye: hsla(327, 89%, 44%, 1);
	
		--persian-rose: hsla(327, 100%, 61%, 1);
	
	
		--rich-black: #000114ff;
		--gunmetal: #09272fff;
		--gunmetal-light: hsla(193, 68%, 18%, 1);
		--gunmetal-lighter: hsla(193, 68%, 21%, 1);
		--aquamarine: #01f9c6ff;
		--aquamarine-transp: hsla(168, 99%, 49%, .3);
		--silver: #c2c2c2ff;
		--antiflash-white: #ebebebff;
		--white-smoke: #f5f5f5ff;
		--bright-pink-crayola: #fc6471ff;
		--magenta-dye: #d30c7bff;
		--persian-rose: #ff37a6ff;

		--magenta-dye-transp: hsla(355, 96%, 69%, .6);

		--main : var(--aquamarine);
	
		--radius:.75rem;
	

		--ease: cubic-bezier(0.4, 0, 0.2, 1);
	}

html.light,
html.light body{
	/* --gunmetal: rgb(211, 210, 210); */
	--aquamarine-transp: hsl(0, 0%, 100%);
	--antiflash-white:#222;
	 
	background: whitesmoke!important;
	--main : #fff!important;
	tr{ 
		--main : #000!important; 
	}
	.paneldispo{
		background: rgb(211, 210, 210);
		background: #efecec!important;
	}
	.has-important-bg > a {
		color: #ff00fc;
		&.now.checked{
			background: #ff00fc;
			color: #fff;
			
		}
	}
	thead, tfoot {
		background-color: #ffffff;
	}
	input[type="submit"]{
		background: #fff;
		color: #000;
		border:0.04em solid #000;
	}
	.theme-switch .ball,
	.theme-switch .label{
		border-color: #000;
	}
	header.headroom{
		border:0.04em solid #000;
	}
	.paneldispo td input[type="button"]{
		background: #fff!important;
		
		border:0.04em solid #000!important; 
	}
	td input[type="button"].button{
		background: #fff!important;
		
		border:0.04em solid #000!important; 
	}
	
	.auto ul{
		background: var(--white-smoke);

	}
	.auto ul li:hover{
		background: var(--magenta-dye);
		color: #fff;

	}
	input#poids{
		border-color: #000;
		color: #000;
	}
	tr:has(td.has-important-bg) td.date>small{
		color: #ff00fc;
	}

	#export_button{
		background: transparent;
		border:0.08em solid #000;
		border-radius: var(--radius);
		color: #000;
		svg.excel_logo{
			fill: #000;
		}
	}
}
html.light body:after{
	filter: grayscale(1);
}

#mobile-menu-trigger{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 320;
}
	

	@font-face {
		font-family: 'Basier Circle';
		src: url('fonts/basiercircle-medium-webfont.woff2') format('woff2');
		font-weight: 500;
		font-style: normal;
	}

	

	@font-face {
		font-family: 'Basier Circle';
		src: url('fonts/basiercircle-regular-webfont.woff2') format('woff2');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'Basier Circle';
		src: url('fonts/basiercircle-semibold-webfont.woff2') format('woff2');
		font-weight: 600;
		font-style: normal;
	}
	@font-face {
		font-family: 'Basier Circle';
		src: url('fonts/basiercircle-bold-webfont.woff2') format('woff2');
		font-weight: bold;
		font-style: normal;
	}

	@font-face {
		font-family: 'monocleicon';
		src:url('fonts/monocleicon.woff?xuus1s') format('woff');
		font-weight: normal;
		font-style: normal;
		font-display: block;
	  }
	  
	  [class^="icon-"], [class*=" icon-"] {
		/* use !important to prevent issues with browser extensions that change fonts */
		font-family: 'monocleicon' !important;
		speak: never;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
	  
		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	  }
	  

body::-webkit-scrollbar {
  width: thin;
}
html,
body {
  scrollbar-width: 10px;
  scrollbar-color: #ff37a6 transparent;
  
}

body.body-has-margin{
	padding: 1rem;
	box-sizing: border-box;

	header{
		margin-bottom: 1.5rem;
	}
	
}
::-webkit-scrollbar-track {
  background: transparent;
   
}

::-webkit-scrollbar {
    width: 10px;
}
 
/* Track */
::-webkit-scrollbar-track {
    border-radius: 5px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #ff37a6; 
    
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #ad2c73;
}
.has-important-bg:before,
input[type="date"]:after,
body.modif .planningTable td:has(label.attrib) .shiftsContainer>label.attrib:after,
body.modif table.planningTable tbody td div.shiftsContainer div label.attrib input[type="checkbox"]:checked:after,	  
[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'monocleicon' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
  

  .icon-fav:before {
	content: "\e934";
  }
  .icon-account:before {
	content: "\e92e";
  }
  .icon-password:before {
	content: "\e92f";
  }
  .icon-cal2:before {
	content: "\e922";
  }
  .icon-messenger2:before {
	content: "\e923";
  }
  .icon-qr:before {
	content: "\e924";
  }
  .icon-bill-qr:before {
	content: "\e925";
  }
  .icon-bill:before {
	content: "\e926";
  }
  .icon-income:before {
	content: "\e927";
  }
  .icon-village:before {
	content: "\e928";
  }
  .icon-activity:before {
	content: "\e935";
  }
  .icon-alert-circle:before {
	content: "\e900";
  }
  .icon-alert-octagon:before {
	content: "\e901";
  }
  .icon-alert-triangle:before {
	content: "\e902";
  }
  .icon-arrow-down:before {
	content: "\e903";
  }
  .icon-arrow-down-circle:before {
	content: "\e906";
  }
  .icon-arrow-left:before {
	content: "\e907";
  }
  .icon-arrow-left-circle:before {
	content: "\e908";
  }
  .icon-arrow-right:before {
	content: "\e909";
  }
  .icon-arrow-right-circle:before {
	content: "\e90a";
  }
  .icon-arrow-up:before {
	content: "\e90b";
  }
  .icon-arrow-up-circle:before {
	content: "\e90c";
  }
  .icon-calendar:before {
	content: "\e90d";
  }
  .icon-check-circle:before {
	content: "\e90e";
  }
  .icon-clipboard:before {
	content: "\e929";
  }
  .icon-edit:before {
	content: "\e91b";
  }
  .icon-edit-2:before {
	content: "\e91c";
  }
  .icon-edit-3:before {
	content: "\e91d";
  }
  .icon-external-link:before {
	content: "\e91e";
  }
  .icon-eye:before {
	content: "\e939";
  }
  .icon-eye-off:before {
	content: "\e93a";
  }
  .icon-file-plus:before {
	content: "\e90f";
  }
  .icon-home:before {
	content: "\e930";
  }
  .icon-info:before {
	content: "\e912";
  }
  .icon-key:before {
	content: "\e931";
  }
  .icon-link:before {
	content: "\e913";
  }
  .icon-link-2:before {
	content: "\e91f";
  }
  .icon-list:before {
	content: "\e920";
  }
  .icon-log-in:before {
	content: "\e932";
  }
  .icon-log-out:before {
	content: "\e933";
  }
  .icon-minus-circle:before {
	content: "\e914";
  }
  .icon-minus-square:before {
	content: "\e915";
  }
  .icon-percent:before {
	content: "\e936";
  }
  .icon-plus-circle:before {
	content: "\e916";
  }
  .icon-plus-square:before {
	content: "\e917";
  }
  .icon-refresh-cw:before {
	content: "\e92a";
  }
  .icon-repeat:before {
	content: "\e92b";
  }
  .icon-search:before {
	content: "\e918";
  }
  .icon-server:before {
	content: "\e937";
  }
  .icon-tool:before {
	content: "\e921";
  }
  .icon-trash-2:before {
	content: "\e919";
  }
  .icon-user:before {
	content: "\e92c";
  }
  .icon-user-plus:before {
	content: "\e92d";
  }
  .icon-users:before {
	content: "\e938";
  }
  .icon-x-circle:before {
	content: "\e91a";
  }
  .icon-document-search:before {
	content: "\e904";
  }
  .icon-search2:before {
	content: "\e905";
  }
  .icon-moneybag:before {
	content: "\e910";
  }
  .icon-dollar:before {
	content: "\e911";
  }
  
	  
/* :root{
	--main:#ef0060;
} */
html{
	height: 100%;
	width: 100%;
	font-size: max(16px,1.4vw);
	
} 
iframe{
	border:none;
}

body {
	font-family: 'Helvetica Neue',Helvetica, Verdana, Arial, Helvetica, sans-serif;
	/* font-size: 76%; */
	/* height: 95%; */
	/*width: 100%;*/
	background: var(--rich-black);
	color: var(--antiflash-white);
	accent-color: var(--persian-rose);
	margin: 0;
}
body:after{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 30;
	content: '';
	background-image: url("/images/head.svg");
	pointer-events: none;
	background-size: auto max(300px,38vh);
	background-repeat: no-repeat;
	background-position: calc(100% - 2rem) 2rem;
	mix-blend-mode: multiply;
	opacity: 0.3;
}

.hidefromfront{
	display: none;
}

body:has(header.headroom--top):after{
	mix-blend-mode: hard-light;
}
select,
input{
	font-size: 0.8rem;
}
input[type="checkbox"]{
	font-size: 1.1rem;
}
textarea,
select,
input[type="date"],
input[type="number"],
input[type="password"],
input[type="text"]{
	border:0.035rem solid var(--main);
	background: transparent;
	color: var(--main);
	border-radius: calc(var(--radius) - 0.4rem);
	padding: .1rem .2rem;
	margin: .2rem 0;
}

input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(100%) hue-rotate(180deg);
	opacity: 0;
  }
  input[type="date"]{
	position: relative;
	&:after{
		position: absolute;
		top: 50%;
		right: .2rem;
		transform: translateY(-50%);
		content:'\e922';
		pointer-events: none;

	}
  }


textarea{
	width: 12rem;
	min-height: 2rem;
}
label{
	cursor: pointer;
}
label:has(input:disabled){	
	cursor: not-allowed;
}
label[for="poids"]{
	font-size: .8rem;
	
	display: inline-block;
}
input#poids{
	width: 1.3rem;
	margin-left: 0.2rem;
	min-width: 3rem;
}

input#poids::-webkit-outer-spin-button,
input#poids::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number]#poids {
  -moz-appearance: textfield;
} 
input#poids:focus{
	outline: none;
}


input[type="text"]:focus{
	outline: none;
	border-color: var(--white-smoke);
}

.flex-col{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 0.5rem;
}


a {color:var(--main);text-decoration:underline;}
a.nounderline {color:var(--rich-black);text-decoration:none;}

/*-----------box course-----------*/
.pine {
	width: 10px;
	border: 0;
	}
.delete {
	width: 15px;
	height: 15px;
	border: 0;
	}
.aligne_droite{
text-align: right;
}
.aligne_gauche{
text-align: left;
}

.mise_a_jour{
	position: sticky;
	z-index: 3;
	padding: 0.2rem;
	border-radius: var(--radius);
	top: 0rem;
	margin-top: -.2rem;
/* position: relative; */
float: right;

text-align: right;
color: var(--rich-black);
margin-right: var(--radius);
background: var(--white-smoke);

   a.iflexcenter{
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
   }
	a span{
		font-size: 0.5em;
		
	}

	a:not(.iflexcenter):hover{
		color: var(--magenta-dye);
	}
}

.cpc{
width : 100%; 
}

.date_dispo {
	position: relative;
	float: right;
	align: top;
	width: 400px;
	text-align: right;
	margin-right: 8px;
	}

.tableau_dispo {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 5px;
  color: #000000;
  height:357px;
  overflow: auto;
  font-size: 12px;
  }
  	
.telephone {
width:100px;
}
.commune {
width:130px;
}
table td,
table th,
table{
	border-color: transparent;
}

.boutonlien {
   background: transparent;
   border: 0px;
   font-size: 12px;
   cursor: pointer;
   text-decoration: underline;
   color: blue;
   }
 
.champs{
 width:1000px; 
 } 



#content {
	/* height: 100%; */
	/*margin: 3em;*/
	display: flex;
	flex-direction: column-reverse;
	padding-top: 12rem;
}
#content header {
	background: var(--main);
	
	padding: .5rem 1rem;
	
	margin: .3rem 1rem;
	border-radius: var(--radius);
	position: fixed;
	top: 0;
	z-index: 50;
}
.headroom {
    will-change: transform;
    transition: transform 200ms linear;
	h3,
	ul{
		transition: max-height .3s var(--ease);
		overflow: hidden;
	}
}
.headroom--pinned {
    transform: translateY(0%);
}
header.headroom--unpinned {
	transform: translateX(-80%);
	#logo svg path:last-child,
	#doco-lesplus ul,
	#mainmenuliens>div:not(:first-child){
		display: none;
	}
	
	
	
}
header #logo{
	width: clamp(200px, 18vw, 300px);
	/* padding: 1rem; */
	
	display: inline-block;
	
}
#doco-lesplus{
	flex-basis: clamp(100px,25%,260px);
	ul{
		margin-top: 1rem;
	}
}
#mainmenuliens{
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem max(1rem,6vw);
	
	
}
#mainmenuliens h3{
	margin-top: 0;
	margin-bottom: 0.2rem;
	font-size: .9rem;
	color: var(--gunmetal);
	opacity: 0.8;
}
#mainmenuliens ul{
	border-left: 0.035em solid var(--gunmetal);
}
#mainmenuliens li{
	margin-bottom: 0.1rem;
	

	a{
		font-family: Helvetica Verdana, Arial, Helvetica, sans-serif!important;
		text-decoration: none;
		color: var(--rich-black,#000);
		font-weight: 500;
		display: inline-block;
		padding-left: 0.3rem;
		@media (hover: hover) {
			&:hover {
				color: var(--magenta-dye);
			}
		}
	}
}
/*
#content p {
	height: 95%;
}
*/

#mainmenudispopop {
height: 100%;
/*margin: auto;*/
padding: 1em;
}
#mainmenudispo {
/* height: 65%; */
/*margin: auto;*/
padding: 1em;
margin-bottom: 50px;
}

#mainmenuactions {
/*margin: auto;*/
/*margin-top: 50px;*/
margin-left: 1em;
margin-right: 1em;
padding: 1em;
border: .035em solid var(--main);
}

#mainmenuliens {
/* height: 15%; */
/*margin: auto;*/
/*margin-top: 50px;*/

}

fieldset.supplements{
	table tr{
		display: flex;
		flex-direction: row-reverse;
		justify-content: start;
		align-items: center;
		gap:.5rem;
		
	}

	.has-pb{
		padding-bottom: .3rem!important;
	}
}

.has-tooltips span.infos{
	position: absolute;
	display: none;
	background: var(--rich-black);
	border: 0.035em solid var(--main);
	color: var(--white-smoke);
	border-radius: calc( var(--radius) - 0.2rem);
	padding: .3rem;
	font-size: 0.8rem;
	z-index: 100;
	max-width: 300px;
	white-space: normal;
	transform: translateX(80%);
}
.has-tooltips i.icon-info:hover + span.infos{
	display: block;
}


.sublime-me{
	min-width: 80vw;
	border: .035em solid var(--main);
	padding: .6rem;
	overflow: scroll;
	background: var(--gunmetal);
	border-radius: var(--radius);

	&.password{
		min-width: unset;
		max-width: 30rem!important;
	}
}

.panel {
	clear: both;
	display: none;
	border: .035em solid var(--main);
	padding: .6rem;
	overflow: scroll;
	background: var(--gunmetal);
	border-radius: var(--radius);
}
.panel a{
	color: var(--main);
}
.panel.active-tab-body {
	display: block;
	height: 95%;
	/*margin: auto;*/
}
.paneldispo {
	clear: both;
	display: none;
	border: .035em solid var(--main);
	padding: .6em;
	background: var(--gunmetal);
	overflow: scroll;
	border-radius: var(--radius);
}
.paneldispo.active-tab-body {
	display: block;
	height: 100%;
	/*margin: auto;*/
}

#tabs {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-left: var(--radius);
}
#tabs li {
	position: relative;
	float: left;
}
#tabs a {
	float: left;
	padding: .2rem .8rem;
	margin-right: 6px;
	border: 1px solid var(--main);
	border-width: 1px 1px 0 1px;
	text-decoration: none;
	border-radius: var(--radius) var(--radius) 0 0;
	color: var(--aquamarine);
}
#tabs a:hover {
	background-color: var(--magenta-dye);
	border-color: var(--magenta-dye);
	color: #FFF;
}
#tabs a.active-tab {
	background-color: var(--main);
	border-color: var(--main);
	color: var(--rich-black);
	font-weight: bold;
}
#tabsdispo {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-left: 0.8rem;
	
}

#tabsdispo li {
	position: relative;
	float: left;
}
#tabsdispo a {
	
	padding: .2rem .8rem;
	margin-right: 6px;
	border: 1px solid var(--main);
	border-width: 1px 1px 0 1px;
	text-decoration: none;
	color: var(--main);
	border-radius: var(--radius) var(--radius) 0 0;
	display: inline-block;
	/* padding: 0 .3rem; */
}
#tabsdispo a:hover {
	background-color: var(--magenta-dye);
	border-color: var(--magenta-dye);
	color: #FFF;
}
#tabsdispo a.active-tab {
	background-color: var(--main);
	color: var(--rich-black);
	font-weight: bold;
}

table {
	border-collapse: collapse;
	table-layout: fixed;
	white-space: nowrap;
	font-size: 0.8rem;
}

.sanscadre td {
	border: 0px solid #CCC;
}

td, th {
	padding: 0.02rem .2rem;
	/* border: 1px solid #CCC; */
	/*white-space: nowrap;
	overflow: hidden;*/
}
td a:has(i[class^="icon-"]){
	text-decoration: none;
	font-size: 1.3em;
}
td.small,
.table_interieure{
	font-size: 0.75rem;
}
td.date>small{
	font-size: inherit;
	font-weight: bold;
	display: block;
}
html.dark tr:has(td.has-important-bg) td.date>small{
	color: #FFED00;
}


.addr-destinataire.small{
	strong{
		font-weight: 500;
		font-size: 0.75rem;
	}
	font-size: .6rem;
}
.table_interieure td {
	border: 0px none;
	padding: 0;
	/*white-space: nowrap;
	overflow: hidden;*/
}

.has-important-bg{
	/* border-left: 0.3rem solid var(--magenta-dye); */
	
	position: relative;
	/* &:after{
		content: '';
		position: absolute;
		top: .4rem;
		left: .4rem;
		z-index: 0;
		width: calc(100%);
		height: calc(100% - 0.8rem);
		border-radius: .6rem;
		border: 0.035em solid var(--magenta-dye);
		opacity: 0.8;
	} */
	&:before{
		content: '\e902';
		color: #ff00fc;
		display: inline-block;
		margin-right: 0.3rem;
		/* position: absolute;
		left: 0;
		top: 50%;
		transform: translateX(-100%) translateY(-50%); */
	}
	&>*{
		position: relative;
		z-index: 1;
	}
	&>a{
		text-transform: uppercase;
		text-decoration: none;
		color: #ffed00;/*var(--magenta-dye);*/
		display: inline-flex;
		align-items: center;
		min-height: 1.8rem;

		&.now.checked{
			background: #ffed00;
			color: #000;
			border-radius: .3em;
		}
		
	}
}

/*th {
   white-space: pre;
}*/

thead, tfoot {
	background-color: var(--aquamarine);
}
thead tr th{
	position: sticky;
	top: 0;
	color: var(--rich-black);
}

tr.rowodd {
	background-color: transparent;
}

tr.roweven {
	background-color: var(--aquamarine-transp);
}
tr.pec {
	background-color: #EEF7C1;
}
tr.dech {
	background-color: #F7C1E7;
}
tr.city {
	background-color: #C1D8F7;
}
td a{
	color: var(--main);
}
.sortcol {
	cursor: pointer;
	padding-right: 20px;
	background-repeat: no-repeat;
	background-position: right center;
}
.sortasc {
	background-color: #DDFFAC;
	background-image: url(../images/up.gif);
}
.sortdesc {
	background-color: #B9DDFF;
	background-image: url(../images/down.gif);
}
.nosort {
	cursor: default;
}

th.resize-handle-active {
	cursor: e-resize;
}

div.resize-handle {
	cursor: e-resize;
	width: 2px;
	border-right: 1px dashed #1E90FF;
	position:absolute;
	top:0;
	left:0;
}

/*-----------tout pour les info-bulles...---------------------------------*/
a.info {
   position: relative;
   color: var(--main);
   text-decoration: none;
   /* border-bottom: 0.08em dotted var(--silver); on souligne le texte */
}
a.info>span {
   display: none; /* on masque l'infobulle */
   transform: translateY(50%);
   opacity: 0;
   position: absolute;
   white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
   bottom: -.3rem; /* on positionne notre infobulle */
   left: 0;
   font-size: .6rem;
   color: var(--silver);
   background: var(--gunmetal);
   padding:.4rem;
   border: 0.03rem solid var(--main);
   border-radius: .3rem;
   
}
a.info:hover {
   background: none; /* correction d'un bug IE */
   z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

   cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover>span {
   transform: translateY(100%);
   opacity: 1;
   display: inline; /* on affiche l'infobulle */
   
   transition: opacity .3s var(--ease),transform .3s var(--ease);

   
}

a.info span.important{
	color: var(--magenta-dye);
}

#doco-swissconnect{
	font-size:0.8em;
	
}

/*-----------tout pour les entetes---------------------------------*/
a.entete {
   position: relative;
   color: black;
   text-decoration: none;
   border-bottom: 1px black dotted; /* on souligne le texte */

}
a.entete:hover {
   background: none; /* correction d'un bug IE */
   z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
}

/* Tout pour le calendrier jusqu'à la fin de la page, merci de ne rien écire après cette ligne*/
/* the div that holds the date picker calendar */
.dpDiv {
	}


/* the table (within the div) that holds the date picker calendar */
.dpTable {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	color: #505050;
	background-color: #ece9d8;
	border: 1px solid #AAAAAA;
	}


/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
	}


/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
	}


/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
	}


/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
	}


/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
	border: 1px solid #ece9d8;
	}


/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	}


/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
	background-color: #aca998;
	border: 1px solid #888888;
	cursor: pointer;
	color: red;
	}


/* the table cell that holds the name of the month and the year */
.dpTitleTD {
	}


/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
	}


/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
	}


/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	color: white;
	}


/* additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 12px;
	color: gray;
	font-weight: bold;
	}


/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {
	color: 4060ff;
	font-weight: bold;
	}


/* the forward/backward buttons at the top */
.dpButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	padding: 0px;
	}


/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	}
	
	.centerFieldset fieldset{
		padding: 0.4rem;
	
	}
	.premierecolonne {
	width:800px;
	}
	
	.centerFieldset>fieldset {
	/* display:inline;
	margin-left:auto;
	margin-right:auto;
	text-align:left; */
	border:none;
	display: flex;
	gap:1rem;
	flex-wrap: wrap;

	&>legend{
		display: none;

	}
	&>fieldset{
		border-radius: calc(var(--radius) - 0.2rem);
		border:0.035rem solid var(--main)
	}
	#supptype fieldset{
		padding: 0;
		border:none;
		legend{
			display: none;
		}
		td{
			padding: 0;
			label{
				display: inline-block;
				margin-bottom: 0.3rem;
			}
		}
	}
	
	legend{
		padding: 0 .5rem;
		color: var(--main);
	}
	}

	fieldset.facturation{
		label{
			display: inline-block;
			margin-bottom: 0.3rem;
		}
	}

	fieldset.actions{
		border:none!important;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap:1rem;

		legend{
			display: none;
		}
	}
/* Pour l'autocomplétion... */
	ul{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	
	/* Autocompletion */
	
	.auto ul {
		    list-style-type: none;
		    /* font-size: 12px; */
		    margin: 5px 0 0 0;
		    padding: 3px;
		    width: min-content;
		    background-color: var(--gunmetal);
			border: 0.035rem solid var(--main);
			border-radius: var(--radius);
		    
		  }
		  
	.auto li {
			padding: 0 .2rem .2rem .2rem;
			line-height:1;
		    cursor: default;
			margin-bottom: 0.15rem;
			border-bottom: 0.035rem solid var(--main);
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			gap: 0rem;

			&:last-child{
				border-bottom: none;;
			}

			br{
				display: none;
			}
		  }
			
		  
	.auto li .alias {
			margin: 0;
			font-weight:500;
			font-size: 0.6rem;
			line-height: 0.8;
		  }
	.auto li .informal{
		font-size: max(10px,0.5rem);
		opacity: 0.7;
	}
	
	.auto li:hover {
		    background: var(--main);
		    color: var(--rich-black);			
		  }
	li.selected { color: var(--magenta-dye)}


.export_section {
	display:flex;
	margin-right: 11px;
	justify-content: flex-end;
}
#export_button{
	background: transparent;
	border:0.08em solid var(--main);
	border-radius: var(--radius);
	color: var(--main);
	margin-right: 1.5rem;
	display: flex;
	gap:.3rem;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	
	font-weight: bold;
	padding: .2rem .5rem;
	cursor: pointer;

	svg.excel_logo{
		fill: var(--main);
		width: 1rem;
		height: 1rem;
		
	}
	
}
#export_button, .excel_logo {
	
	width: auto;
}






label:not(.attrib):has(input[type="checkbox"],input[type="radio"]) {
	font-family: system-ui, sans-serif;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.1;
	display: inline-grid;
	grid-template-columns: 1em auto;
	gap: 0.5em;
  }
  
 label:not(.attrib):has(input[type="radio"]) input[type="radio"] ,
 label:not(.attrib):has(input[type="checkbox"]) input[type="checkbox"] {
	/* Add if not using autoprefixer */
	-webkit-appearance: none;
	/* Remove most all native input styles */
	appearance: none;
	/* For iOS < 15 */
	/* background-color: var(--form-background); */
	/* Not removed via appearance */
	margin: 0;
  
	font: inherit;
	color: currentColor;
	width: 1.15em;
	height: 1.15em;
	border: 0.035rem solid var(--main);
	border-radius: 0.15em;
	transform: translateY(-0.075em);
  
	display: grid;
	place-content: center;
  }

  label:not(.attrib):has(input[type="radio"]) input[type="radio"]{
	border-radius: 50%;
  }
  label:not(.attrib):has(input[type="radio"]) + label{
	margin-right: 1rem;
  }

  th label:not(.attrib):has(input[type="radio"]) input[type="radio"],
  th label:not(.attrib):has(input[type="checkbox"]) input[type="checkbox"] {
	border-color: var(--rich-black);
  }
  
  label:not(.attrib):has(input[type="radio"]) input[type="radio"]::before ,
  label:not(.attrib):has(input[type="checkbox"]) input[type="checkbox"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	
	transform: scale(0);
	transform-origin: bottom left;
	transition: 200ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--magenta-dye);
	/* Windows High Contrast Mode */
	background-color: CanvasText;
  }
  label:not(.attrib):has(input[type="radio"]) input[type="radio"]::before{
	/* clip-path: circle(50% at 50% 50%); */
	transform-origin: center center; 
  }
  label:not(.attrib):has(input[type="radio"]) input[type="radio"]:checked,
  label:not(.attrib):has(input[type="checkbox"]) input[type="checkbox"]:checked{
	border-color: var(--magenta-dye);
  }

  label:not(.attrib):has(input[type="radio"]) input[type="radio"]:checked::before ,
  label:not(.attrib):has(input[type="checkbox"]) input[type="checkbox"]:checked::before {
	transform: scale(1);
  }
  
  input[type="color"] {
	-webkit-appearance: none;
	border: none!important;
	width: 1.5rem!important;
	height: 1.5rem;
	display: block;
	cursor: pointer;
	border-radius: 50%;
	clip-path: circle(45% at 50% 50%)

}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
}
  
  
  label:not(.attrib):has(input[type="radio"]) input[type="radio"]:disabled ,
  label:not(.attrib):has(input[type="checkbox"]) input[type="checkbox"]:disabled {
	--form-control-color: var(--rich-black);
  
	color: var(--rich-black);
	border-color: var(--rich-black);
	cursor: not-allowed;
  }

  input[type="submit"],
  td input[type="button"]{
	background: var(--main);
	color: var(--rich-black);
	border: 1px solid var(--main);
	border-radius: .3rem;
	margin: .15rem;
	cursor: pointer;
	font-weight: bold;
	padding: .2rem .5rem;
  }
  

  .flatpickr-calendar span.flatpickr-weekday,
  .flatpickr-calendar .flatpickr-months .flatpickr-month,
  .flatpickr-calendar{
	background-color: var(--gunmetal);
  }

  .flatpickr-current-month .flatpickr-monthDropdown-months{
	background-color: transparent!important;
  }

  .flatpickr-calendar{
	border: 0.035rem solid var(--main);
	border-radius: var(--radius);
	overflow: hidden;
	.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay{
		background-color: var(--main);
		color: var(--gunmetal);
		font-weight: bold;
	}
  }

  

body{
	--bg-color: #292639;
	--text-color: #ebeaf7;
	--switch-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.5) inset;
}
  .theme-switch {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  .theme-switch .checkbox {
	opacity: 0;
	position: absolute;
  }
  
  .theme-switch .label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	border-radius: 50px;
	border: 1px solid var(--aquamarine);
	position: relative;
	height: 40px;
	width: 80px;
	cursor: pointer;
	/* box-shadow: var(--switch-shadow); */
	transition: var(--transition);
  }
  
  .theme-switch .label:hover .moon,
  .theme-switch .label:hover .sun {
	transform: rotate(360deg);
  }
  
  .theme-switch .ball {
	transition: var(--transition);
	background-color: var(--text-color);
	border:0.04em solid var(--aquamarine);
	position: absolute;
	border-radius: 50%;
	top: 4px;
	left: 5px;
	height: 30px;
	width: 30px;
   }
  
  .theme-switch .moon {
	color: #f1c40f;
	transform-origin: center center;
	transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
	transform: rotate(0);
  }
  
  .theme-switch .sun {
	color: #ff6b00;
	transform-origin: center center;
	transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
	transform: rotate(0);
  }
  
  .theme-switch .ball {
	transform: translatex(0);
  }
  
  .dark .theme-switch .ball {
	background-color: var(--rich-black);
	transform: translatex(55px);
  }


  body .icon-menu{
	display: none;
  }
  

  @media screen and (max-width: 768px) {
	body::after{
		background-size: auto 20vw;
	}
	.theme-switch {
	  top: 1rem;
	  right: auto;
	  left: 1rem;
	}
	body .icon-menu{
		display: block;
		background: transparent;
		border: none;
		svg{
			width: 4em;
			height: 4em;
			fill: var(--magenta-dye);
		}
	  }
	  
	body:has(header:not(.closed)) svg#menu_ico,
	body:has(header.closed) #close_ico{
		display: none!important;
	}
	
	body:has(header.closed) svg#menu_ico{
		display: block!important;
	}
	
	#mainmenudispo{
		padding-left: 0.2rem;
		padding-right: 0.2rem;
	}
	#content{
		#export_button{
			margin-right: 0.5rem;
		}
		padding-top: 3rem;
		.mise_a_jour{
			float: left;
			margin-left: 0.5rem;
			top: .3rem;
			margin-bottom: 0.3rem;
			font-size: 1.3em;
		}
		#tabsdispo li{
			float: right;
		}
	}
		header.closed{
			transform: translateX(calc(-1 * (100% + 1rem)));
		}
		header:not(.closed){
			overflow: auto;
			max-height: 100vh;
			
		}
		header #mainmenuliens{
			flex-direction: column;
			padding-bottom: 4rem;

			.table_interieure{
				font-size: 1.5rem;
			}
		}
  }