/********************************************************************
	Classes d'embellissement
*********************************************************************/

.radius {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.shadow,
.shadow-bottom {
	-moz-box-shadow: 2px 2px 2px #6E6E6E;
	-webkit-box-shadow: 2px 2px 2px #6E6E6E;
	box-shadow: 2px 2px 2px #6E6E6E;
}
.shadow-top {
	-moz-box-shadow: 2px -2px 2px #6E6E6E;
	-webkit-box-shadow: 2px -2px 2px #6E6E6E;
	box-shadow: 2px -2px 2px #6E6E6E;
}

.t-shadow {
  text-shadow: 1px 2px 2px #424242;
}

.opacity {
	opacity: 0.5;
	filter:alpha(opacity=50); /* For IE8 and earlier */
}

.stabilo-white {
	background-color: white;
}

.stabilo-green {
	background-color: lightgreen;
}

.stabilo-blue {
	background-color: blue;
	color: white;
}

.stabilo-brown {
	background-color: brown;
	color: white;
}

.stabilo-red {
	background-color: red;
}

.stabilo-lightred {
	background-color: pink;
}

.stabilo-orange {
	background-color: #ffeb00;
}

.stabilo-dark-orange {
	background-color: orange;
}

.stabilo-grey {
	background-color: lightgrey;
}

.stabilo-dark-grey {
	background-color: grey;
	color: white;
}

.stabilo-yellow {
	background-color: yellow;
}

.stabilo-magenta {
	background-color: magenta;
}

.stabilo-cyan {
	background-color: skyblue;
}

.font-white, .font_white {
	color: white;
}

.font-green, .font_green {
	color: green;
}

.font-blue, .font_blue {
	color: blue;
}

.font-red, .font_red {
	color: red;
}

.font-orange, .font_orange {
	color: #e1b622;
}

.darker-15pc {
	background-color: rgba(0, 0, 0, 0.15);
}

.darker-8pc {
	background-color: rgba(0, 0, 0, 0.08);
}

/********************************************************************
	classe de dimensionnement
*********************************************************************/
.fixwidth500px { width: 500px; }
.fixwidth200px { width: 200px; }

.margin8px { margin: 8px; }

.width1p { width: 1%; }
.width5p { width: 5%; }
.width10p { width: 10%; }
.width15p { width: 15%; }
.width21p { width: 21%; }
.width23p { width: 23%; }
.width28p { width: 28%; }
.width33p, .width { width: 33%; }
.width42p { width: 42%; }
.width50p { width: 50%; }
.width70p { width: 70%; }

/********************************************************************
	header
*********************************************************************/

.header {
	/* shadow-bottom */
	-moz-box-shadow: 2px 2px 2px #6E6E6E;
	-webkit-box-shadow: 2px 2px 2px #6E6E6E;
	box-shadow: 2px 2px 2px #6E6E6E;
}
.header h1 {
	margin: 0 auto;
	padding: 0.2em 0.2em 0.2em 0.2em;
	text-align: center;
	font-weight: bold;
	font-size: 3em;
	letter-spacing: 0.2em;
}

/********************************************************************
	menu du haut
*********************************************************************/

.menu {
	/* shadow-bottom */
	-moz-box-shadow: 2px 2px 2px #6E6E6E;
	-webkit-box-shadow: 2px 2px 2px #6E6E6E;
	box-shadow: 2px 2px 2px #6E6E6E;
}
.menu-entry-list {
	display: inline-block;
	list-style-type: none;
}
.menu .f-left .menu-entry:not(:first-child) {
	border-left: 1px solid #E6E6E6;
}
.menu .f-right .menu-entry:not(:last-child) {
	border-right: 1px solid #E6E6E6;
}
.menu-entry {
	display: inline-block;
	padding: 0px 5px;
	height: 97%;
}
.menu a {
	display: inline-block;
}
.menu a:hover, .menu a:focus {
}
.menu a:link, .menu a:visited {
}
.menu img {
	vertical-align: middle;
	height: 20px;
	position: relative;
	top: -1px;
}

.hidden_entries_menu {
	/* radius */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	/* shadow */
	-moz-box-shadow: 2px 2px 2px #6E6E6E;
	-webkit-box-shadow: 2px 2px 2px #6E6E6E;
	box-shadow: 2px 2px 2px #6E6E6E;
}

/********************************************************************
	menu de gauche
*********************************************************************/

.submenu-title {
	font-weight: normal;
	padding: 3px;
	margin-bottom: 2px;

	/* radius */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	/* shadow */
	-moz-box-shadow: 2px 2px 2px #6E6E6E;
	-webkit-box-shadow: 2px 2px 2px #6E6E6E;
	box-shadow: 2px 2px 2px #6E6E6E;
}
.submenu-entry-list {
	padding: 3px;
	margin-bottom: 8px;

	/* radius */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	/* shadow */
	-moz-box-shadow: 2px 2px 2px #6E6E6E;
	-webkit-box-shadow: 2px 2px 2px #6E6E6E;
	box-shadow: 2px 2px 2px #6E6E6E;
}

.submenu-show-hidden-entries {
	font-weight: normal;
	padding: 3px;
	margin-bottom: 8px;

	/* radius */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	/* shadow */
	-moz-box-shadow: 2px 2px 2px #6E6E6E;
	-webkit-box-shadow: 2px 2px 2px #6E6E6E;
	box-shadow: 2px 2px 2px #6E6E6E;
}

/********************************************************************
	center
*********************************************************************/

.center {
	/* radius */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	/* shadow */
	-moz-box-shadow: 2px 2px 2px #6E6E6E;
	-webkit-box-shadow: 2px 2px 2px #6E6E6E;
	box-shadow: 2px 2px 2px #6E6E6E;
}
.center-title-1 {
	font-weight: bold;
	text-align: center;
	padding: 3px;
	margin-bottom: 2px;

	/* radius */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	/* shadow */
	-moz-box-shadow: 2px 2px 2px #6E6E6E;
	-webkit-box-shadow: 2px 2px 2px #6E6E6E;
	box-shadow: 2px 2px 2px #6E6E6E;
}
.center-title-2 {
	font-size: 1.2em;
	font-weight: bold;
	padding: 3px;
	border-bottom: 3px double #424242;
	margin-bottom: 10px;
}
.center-title-3 {
	font-weight: normal;
	padding: 3px;
	border-bottom: 2px dashed #424242;
	margin-bottom: 10px;
	display: inline-block;
}
.center-title-4 {
	padding: 3px;
	border-bottom: 2px dotted #424242;
	display: inline-block;
}
.center-title-5 {
	padding: 3px;
	border-bottom: 1px solid #848484;
	display: inline-block;
}
.center a {
}
.center a:hover, .center a:focus {
}
.center a:link, .center a:visited {
}

/********************************************************************
	footer
*********************************************************************/

.footer {
	/* .shadow-top */
	-moz-box-shadow: 2px -2px 2px #6E6E6E;
	-webkit-box-shadow: 2px -2px 2px #6E6E6E;
	box-shadow: 2px -2px 2px #6E6E6E;
}
.footer p {
	padding: 0px 5px;
	display: inline;
}
.footer p:not(:first-child) {
	border-left: 1px solid #424242;
}
.footer ul {
	display: inline;
}
.footer li {
	padding: 0px 5px;
	display: inline;
	border-left: 1px solid #424242;
}
.footer a { 
}
.footer a:hover, .footer a:focus {
}
.footer a:link, .footer a:visited {
}

/********************************************************************
	style des balises
*********************************************************************/

.style-ul, .style-ol {
	margin: 0.75em 2.6em;
}

.style-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 1px;
}
.style-table.odd-even tr:nth-child(odd) td:not(.custom-style) { }
.style-table.odd-even tr:nth-child(even) td:not(.custom-style) { }
.style-table th:not(.zero-padding), .style-table td:not(.custom-style):not(.zero-padding), .style-table td:not(.custom-border-style) { padding: 0.2em 0.4em; }
.style-table th.zero-padding, .style-table td:not(.custom-style).zero-padding { padding: 0.0em 0.0em; }
.style-table th, .jforms-table th {
	font-weight: normal;
	cursor: pointer;
	vertical-align: middle;
}
.style-table-same-width-columns {
	table-layout: fixed;
}
.datatable-toggle-vis {
	padding-bottom:0.5em;
}

.datatable-top {
	padding-bottom:2.2em;
}

.datatable-bottom {
	padding-top:0.2em;
}

.style-fieldset {
	/* radius */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	border: 1px solid black;
	margin-top: 4px;
	margin-bottom: 8px;
	padding: 0.5em;
}
.style-legend {
}

.style-radio .jforms-radio, .style-radio .jforms-chkbox {
	display: block;
}

.style-select {
	border: 0 !important;  /*Removes border*/
	-webkit-appearance: none;  /*Removes default chrome and safari style*/
	-moz-appearance: none; /* Removes Default Firefox style*/
	text-indent: 0.01px; /* Removes default arrow from firefox*/
	text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
	border-radius: 15px;
	padding: 0 8px 0 5px;
	box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
	border-radius: 10px 0;
}

.style-select option { 
}

// changement de la couleur de la ligne sous le curseur pour le table avec style-table ou dataTable via la class "hl-hover"
.style-table.hl-hover tr:hover td:not(.custom-style) { }
.style-table.odd-even.hl-hover tr:hover td:not(.custom-style) { }
table.dataTable.hl-hover tr:hover, table.dataTable.hl-hover tr:hover td.sorting_1,  table.dataTable.hl-hover tr:hover td.sorting_2 { }

/********************************************************************
	styles à nous
*********************************************************************/

.f-right, .right { float: right; }
.f-left, .left { float: left; }
.f-clear, .clear { clear: both; }
.t-right, :not(th).numeric { text-align: right; }
.t-left { text-align: left; }
.t-center { text-align: center; }
.t-verbatim {
	font-family: monospace;
	font-size: 1.3em;
	white-space: pre-wrap;
}

.hide { display: none; } /* utilisées par la classe crud */
.scrollable, .crud3_edit_form { overflow: auto; } /* utilisées par la classe crud */
.non_scrollable { overflow: hidden; }
.resize_non_scrollable { overflow: visible; }
.transparent { border-color: transparent; background-color: transparent; } /* utilisées par la classe crud */
.inline { white-space:nowrap; }

.t-ellipsis { text-overflow: ellipsis; }

.v-align-top { vertical-align: top; }
.v-align-middle { vertical-align: middle; }
.v-align-bottom { vertical-align: bottom; }

.active, .bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.paragraphe {
	margin-top: 10px;
	margin-bottom: 10px;
}

.paragraphe_extra_space_apres {
	margin-top: 10px;
	margin-bottom: 3em;
}

.style-table.dataTable th:not(.sorting):not(.sorting_asc):not(.sorting_desc):not(.zero-padding) { padding: 0.2em 0.4em 0.2em 0.4em; } 
.style-table.dataTable th:not(.zero-padding) { padding: 0.2em 1.4em 0.2em 0.4em; } 
.style-table.dataTable td:not(.zero-padding) { padding: 0.2em 0.4em; }
.style-table.dataTable th.zero-padding { padding: 0.0em 0.5em; }
.style-table.dataTable td.zero-padding { padding: 0.0em; }
.style-table.dataTable thead th { 
	font-weight: normal;
}
.style-table.dataTable thead th.dt-hide {
	background-color: transparent;
}
.style-table.dataTable thead th.dt-width {
	width: 1%;
}

.style-table.dataTable td.th-color-left-border, .th-color-left-border {
	border-left: 2px solid #6E6E6E;
}

.style-table.dataTable td.th-color-right-border, .th-color-right-border {
	border-right: 2px solid #6E6E6E;
}

.style-table.dataTable td.th-color-top-border, .th-color-top-border {
	border-top: 2px solid #6E6E6E;
}

.zero-padding {
	padding: 0.0em 0.0em;
}

/*
	bouton
*/
.jforms-submit, .jforms-reset {
	padding: 4px 22px 4px 6px;
	margin: 2px;
	display: inline-block;
	cursor: pointer;
	border-style: none;
	vertical-align: middle;

	/* radius */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	/* shadow */
	-moz-box-shadow: 1px 1px 3px #6E6E6E;
	-webkit-box-shadow: 1px 1px 3px #6E6E6E;
	box-shadow: 1px 1px 3px #6E6E6E;
}

.bouton {
	padding: 4px 6px;
	margin: 2px;
	display: inline-block;
	cursor: pointer;
	border-style: none;
	vertical-align: middle;

	/* radius */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	/* shadow */
	-moz-box-shadow: 1px 1px 3px #6E6E6E;
	-webkit-box-shadow: 1px 1px 3px #6E6E6E;
	box-shadow: 1px 1px 3px #6E6E6E;
}

.bouton.bouton_sans_texte {
	height: 1em;
}

.bouton:active, .jforms-submit:active, .jforms-reset:active {
	position: relative;
	top: 1px;
}

a.bouton {
}
a.bouton:hover, a.bouton:focus {
}
a.bouton:link, a.bouton:visited {
}

/*
	picto
*/
.return		{ }
.create		{ }
.update		{ }
.delete		{ }
.validate	{ }
.view		{ }
.download	{ }
.pdf		{ }
.xls		{ }
.up			{ }
.down		{ }
.mail		{ }
.foudre		{ }
.zip		{ }

.return, .create, .update, .remove, .delete, .validate, .view, .download, .pdf, .xls, .up, .down, .mail, .foudre, .zip {
	display: inline-block;
	padding-right: 22px;
}

.bouton.return		{ }
.bouton.create		{ }
.bouton.update		{ }
.bouton.delete		{ }
.bouton.view		{ }
.bouton.download	{ }
.bouton.pdf			{ }
.bouton.xls			{ }
.bouton.validate	{ }
.bouton.up			{ }
.bouton.down		{ }
.bouton.mail		{ }
.bouton.foudre		{ }
.bouton.zip			{ }

/********************************************************************
	Niveaux de zoom
*********************************************************************/
.zoom_50pc {
	zoom: 50%;
}

.zoom_60pc {
	zoom: 60%;
}

.zoom_70pc {
	zoom: 70%;
}

.zoom_80pc {
	zoom: 80%;
}

.zoom_90pc {
	zoom: 90%;
}

.zoom_100pc {
	zoom: 100%;
}

/********************************************************************
	La mire de login
*********************************************************************/

.login {
	/* Size and position */
	width: 300px;
	margin: 60px auto 30px;
	padding: 10px;
	position: relative;
 
	/* Font styles */
	font-family: 'Raleway', 'Lato', Arial, sans-serif;
	text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}
.login h1 {
	font-size: 1.3em;
	padding-bottom: 15px;
}
.login label {
	display: none;
	padding: 0 0 5px 2px;
	cursor: pointer;
}
.login input[type=text], 
.login input[type=password] {
	/* problème du champs de saisie plus grand que son container */
	box-sizing: border-box;
	-moz-box-sizing: border-box;

	/* Size and position */
	width: 100%;
	padding: 8px 4px 8px 10px;
	margin-bottom: 15px;
 
	/* Styles */
	border: 1px solid #424242; /* Fallback */
	background: rgba(0,0,0,0.15);
	border-radius: 2px;
 
	/* Font styles */
	font-family: 'Raleway', 'Lato', Arial, sans-serif;
	font-size: 13px;
}

.login input::-webkit-input-placeholder {
	text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
 
.login input:-moz-placeholder {
	text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
 
.login input:-ms-input-placeholder {
	text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
 
/* Fallback */
.no-boxshadow .login input[type=text]:focus,
.no-boxshadow .login input[type=password]:focus {
	outline: 1px solid white;
}

.login input[type=submit] {
	/* Size and position */
	width: 100%;
	padding: 8px 5px;
	 
	/* Styles */
	border-radius: 5px;
	border: 1px solid #4e3043;
	box-shadow: 
		inset 0 1px rgba(255,255,255,0.4), 
		0 2px 1px rgba(0,0,0,0.1);
	cursor: pointer;
	transition: all 0.1s ease-out;
 
	/* Font styles */
	text-shadow: 0 1px 0 rgba(0,0,0,0.3);
	font-size: 16px;
	font-weight: bold;
	font-family: 'Raleway', 'Lato', Arial, sans-serif;
}
 
.login input[type=submit]:hover {
}
 
/* Fallback */
.no-boxshadow .login input[type=submit]:hover {
}

.login_subbox {
	/* Size and position */
	width: 300px;
	margin: 20px auto 20px;
	padding: 10px;
	position: relative;
 
	/* Font styles */
	font-family: 'Raleway', 'Lato', Arial, sans-serif;
	text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}

.login_cas {
	/* Size and position */
	width: 100%;
	padding: 5px;
	 
	/* Styles */
	border-radius: 5px;
	border: 1px solid #4e3043;
	box-shadow: 
		inset 0 1px rgba(255,255,255,0.4), 
		0 2px 1px rgba(0,0,0,0.1);
	cursor: pointer;
	transition: all 0.1s ease-out;
 
	/* Font styles */
	text-shadow: 0 1px 0 rgba(0,0,0,0.3);
	font-size: 16px;
	font-weight: bold;
	font-family: 'Raleway', 'Lato', Arial, sans-serif;

}

button.login_cas {
	background-color: #6E6E6E;
	text-decoration: none;
	color: white;
	width: 100%;
}

button.login_cas:hover {
	text-decoration: none;
	background-color: #424242;
}

a.login_cas:visited {
	color: white;
}

/********************************************************************
	Maintenance
*********************************************************************/

.maintenance {
	/* Size and position */
	width: 300px;
	margin: 60px auto 30px;
	padding: 10px;
	position: relative;
}

/********************************************************************
	Fatal error
*********************************************************************/

.fatal_error {
	/* Size and position */
	width: 400px;
	margin: 60px auto 30px;
	padding: 10px;
	position: relative;
	border: 4px solid red;
}

/********************************************************************
	Spinner box
*********************************************************************/

.spinner {
	position: absolute;
	top: 40%;
	left: 40%;
	right: 40%;
	min-width: 60px;
	border: 1px solid #000000;
	margin: 4px;

	border-radius: 5px;
	padding: 5px;
	text-align: center;

	text-shadow: 2px 2px 4px gray;
	font-style: italic;
	z-index: 9500;
}

/********************************************************************
   Custom tooltip
	Usage: <span data-tooltip="content of the tooltip" data-tooltip-position="bottom|top|left|right">text having the tooltip.</span>
*********************************************************************/
[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

/* sticky header sur table */
.sticky-header {
	overflow: visible;
	display: inline-block;
   /*min-width: 99.5%;*/
}

.sticky-header th {
	position: sticky;
	top: 0;
	z-index: 10;
}

sup {
	vertical-align: super;
	font-size: smaller;
}