@charset "utf-8";


.grille {
margin: 2em 0;
display: grid;
grid-template-columns: 15em calc(100% - 20em);
grid-auto-rows: min-content;
column-gap: 2em;
row-gap: 2em;
}

.grille h2, .grille .controles, .nogrille {
grid-column: span 2;
margin: 0;
}

.contenu label {
text-align: right;
}

.contenu .contsaisie {
position: relative;
}


.contenu .controles {
margin-left: 17em;
/*height: 4em;
margin: 2em 0 2em 16em;
line-height: 4em;
*/
}

.uitri {
height: 2em;
margin: 1em;
background: #fff5d0 !important;
position: relative;
z-index: 10;
-webkit-box-shadow: 0 0 1em 0 #777777;
        box-shadow: 0 0 1em 0 #777777;
}


button {
height: 3em;
padding: 0 2em 0 2em;
border: none;
font-size: 0.9em;
font-weight: normal;
color: #fff;
border-radius: 0.3em;
}

button:hover {
background-color: #eee;
}

button:active {
color:#555555;
}

button.blanc {
background-color: #fff;
color: #777;
}

button.bleu {
background-color: #4184C0;
}

button.orange {
background-color: #EC901A;
}

button.vert {
background-color: #0AA609;
}

button.annuler {
margin-left: 2em;
opacity: 0.6;
}

button.pdf::before {
display: inline-block;
content: '\f1c1';
left: 0;
margin-right: 1em;
font-family: Fontello;
}


input[type="color"] {
font-family: inherit;
height: 2em;
padding: 0.2em 1em;
border: 1px solid #999999;
}

input[type="text"], input[type="date"], input[type="time"], input[type="password"], input[type="tel"] {
font-family: inherit;
width: 35rem;
height: 2.5em;
padding: 0 1em;
border: 1px solid #999999;
font-weight: 300;
color: #555;
}

input[type="text"].petit, input[type="date"], input[type="time"], input[type="tel"], select.petit {
width: 10em;
}

input[type="text"].double {
width: 15em;
}

input[type="text"].full, input[type="password"].full {
width: calc(100% - 2em);
}

textarea {
font-family: inherit;
width: 35em;
height: 5em;
padding: 0.5em 1em;
border: 1px solid #999999;
font-weight: 400;
color: #555;
}


select {
font-family: inherit;
width: 35em;
height: 2.5em;
padding: 0.5em 1em;
border: 1px solid #999999;
font-weight: 400;
background-color: #f5f5f5;
color: #555;
}

select:disabled {
opacity: 0.5;
}

select.auto {
width: auto;
}

select.style {
padding: 0 1em;
}

select.err {
box-shadow: 0 0 10px 0 rgba(200, 0, 0, 0.5);
}

option {
background-color: #eee;
}

input[type="color"] {
}


.contenu .pagination {
text-align: center;
margin: 2em auto;
}

.pagination a, .pagination span {
display: inline-block;
width: 2rem;
height: 2rem;
margin-right: 0.5em;
line-height: 2rem;
/*font-size: 0.8em;*/
font-weight: normal;
text-decoration: none;
color: #555;
}

.pagination a:nth-child(-n+2), .pagination span:nth-child(-n+2), .pagination a:nth-last-child(-n+2), .pagination span:nth-last-child(-n+2) {
font-family: Fontello;
font-weight: 600;
}

.pagination a:last-child, .pagination span:last-child {
margin-right:0;
}

.pagination a:hover {
background-color: var(--fond-actif);
color: #fff;
}

.pagination span:not(.actif) {
opacity: 0.5;
}

.pagination span.actif {
background-color: var(--fond-main);
color: #fff;
}

.pagination.alpha a, .pagination.alpha span {
font-family: inherit;
font-weight: inherit;
}

.pagination a.reset, .pagination span.reset {
font-family: Fontello;
}


.jointure {
display: inline-block;
width: 15em;
margin-bottom: 0.5em;
}

.selimg {
float: left;
width: 50%;
}




@media only screen and (max-width: 991px) {

	.contenu .intitule {
	float: none;
	width: 100%;
	text-align: left;
	height: 2em;
	line-height: 2em;
	}

	.contenu .saisie {
	float: none;
	width: 100%;
	/*height: 2em;*/
	min-height: 2em;
	line-height: 2em;
	margin-bottom: 2em;
	}

	.contenu .controles {
	margin: 0;
	}

	button {
	width: calc(50% - 1em);
	padding: 0;
	}

	button.annuler {
	margin-left: 2em;
	}

	input[type="text"], input[type="date"], input[type="time"], input[type="password"], input[type="tel"] {
	width: calc(100% - 2em);
	}

	input[type="text"].petit, input[type="date"], input[type="time"], input[type="tel"], select.petit {
	width: calc(50% - 1em);
	}

	input[type="text"].double {
	width: calc(100% - 2em);
	}

	input[type="text"].full, input[type="password"].full {
	width: calc(100% - 2em);
	}

	textarea {
	width: calc(100% - 2em);
	height: 10em;
	}

	select {
	width: 100%;
	}


}