/******************************************************************************/
/*****************************  Elements HTML / Generique   *******************/
/* bouton: rouge #c00c16, bleu #0476E1, #4E6BF7, clair #4CBFFF inactif background-color: #222;
/******************************************************************************/
body{
	font-family: "Century Gothic", Calibri, Verdana, sans-serif; font-size: 12px;
	/*background-color: #f2f2f2;*/
	color: #222;
   /*position: relative;*/
   min-height: 100%;
   overflow: visible; box-sizing: border-box;
}

h2 {margin: .5em auto;}

a { color : #0066CC; text-decoration :	none; }
a:link, a:visited { color: #396F9A; text-decoration: none; font-weight: normal;}
a:hover { color: #0066CC; text-decoration: underline; font-weight: normal; cursor: pointer;}
a:active { outline:none; }
a, .no-border { border: 0 !important; }

form{
   text-align: left;
   border-radius: 5px;
   background-color: #f2f2f2;
   box-shadow: 0px 0px 5px 1px #ccc;
/*   z-index: 500;*/
}
input[type="text"].modifiable:focus,input[type="number"].modifiable:focus,input[type="password"].modifiable:focus,
input[type="file"]:focus,input[type="email"].modifiable:focus,
textarea.modifiable:focus, select.modifiable:focus {
   box-shadow: none;
   outline: none;
   border-color: #868686;
}
input[type="text"],input[type="number"],input[type="password"],input[type^="date"],
input[type="file"],input[type="email"],
textarea, select {
   color	  : #333;
   border  : 1px solid #a6a6a6;
   margin  : 2px;
   padding : 3px 4px;
   /*background-color: #EDEDED;*/
   vertical-align: middle;
   min-height: 22px;
   border-radius: 3px;
}
input[type^="date"],input[type="text"].date {/*min-width: 5.2em;*/ max-width: 5.3em}
input[type="number"]:not(.modifiable) {appearance:normal; /*-moz-appearance: textfield;*/}
textarea { width: 98%; }
textarea::-moz-placeholder{font-stretch: condensed; font-size: smaller; color: #111}

select { max-width: 98%;}
option {}
label{ display: inline-block;vertical-align: middle;}
input[type="image"]:not(.pj){
   cursor: pointer;
   vertical-align: middle;
   width: 18px;
   min-height: 18px;
   border: 0;
}

.pj { background: url('../images/trombone-icone-32.png') no-repeat top right}
a>img {vertical-align: bottom; padding-right: 5px;}

.fieldset input.checkbox,
.fieldset input[type="checkbox"]{
   border:0;
   vertical-align:top;
   margin-right:5px;
}
input.radio, input[type="radio"],
.fieldset input.checkbox,
.fieldset input[type="checkbox"]{
   border:0;
   margin:3px;
}

form input[type="button"].ajouter,
form input[type="button"][id$="_modify"],
 input[type="button"][id$="_save"],
form input[type="button"][id$="_cancel"],
form input[type="submit"]{
   background-color: #222;
   text-decoration: none;
   color: white;
   border: 0px none; border-radius: .33em;
   width: auto; min-width: 70px;
   padding: .6em .25em;
}
/*form input[type="button"][id$="_modify"]:hover,
 input[type="button"][id$="_save"]:hover,
form input[type="button"][id$="_cancel"]:hover,
form input[type="submit"]:hover, button:hover{
   background-color: #0476E1;
}*/
form input[type="button"][id$="_cancel"]{  color: red; font-style: italic; }
form input[type="button"][id$="_cancel"]:hover{  background-color: whitesmoke; font-style: italic; }
/*table */ input[type="button"][name="ajouter"]{
   min-width: 60px; width: auto;
}
form input[type="radio"] {width: 20px; height: 20px;margin: 0px 5px;	padding: 2px;}
form input[type="radio"]:checked { background-color: red; }
form input[type="radio"]:not(:checked) { color: green; }

table.listing {
   border-collapse: inherit; border-spacing: 0;
   margin: 4px auto;
   width: 100%;
   border: 2px solid transparent;
}
table.listing > thead, table.listing > tfoot{ font-weight: bold; color: white;
   /*background-color: #0476E1;*/
}
table.listing >  tbody >  tr > td	{
   min-height: 30px; height: 30px;
   padding: 2px 3px;
   border: 2px solid transparent;
   vertical-align: middle;
   cursor: pointer;
}
table.listing > thead > tr >td {border-bottom: 1px solid transparent;}
/*table.listing > thead > tr[title] > td[title="Colonne non triable"]:hover { cursor: default; }*/
table.listing > thead > tr[title] > td[id] { cursor: pointer }
table.listing > thead > tr[title] > td[id].sort {
   border-bottom: 1px solid #222 !important;
   background-position:right center;
   background-repeat:no-repeat;
   padding-right:18px;
}
table.listing > thead > tr[title] > td[id].ASC {
   background-image:url('../images/arrow-up.png');
}
table.listing > thead > tr[title] > td[id].DESC {
   background-image:url('../images/arrow-down.png');
}
table.listing > tfoot span>img {max-height: 1.5em;}


div#appLoading {
   display: block; position: fixed;
   top: 1px;   left: 1px;   bottom: 1px;   right: 1px;
   padding: 20%;
   background-color: #f2f2f2;
   opacity: 0.85;
   z-index: 8000;
}
div#appLoading > div {
   position: relative;
   width: 100%;
   border: 5px solid transparent; border-radius: 10px;
   padding: 2% 2%;
   background-color: #f2f2f2;
   text-align: center;
	background-image:url('../images/loading.gif');
   background-position:2% center;
   background-repeat:no-repeat;
}
div#appNotification, div#appNotifError {
   display: block;
   position: fixed;
   border: 5px solid transparent;
   border-radius: 10px;
   width: 40%;
   bottom: 30px;   right: 30%;
   min-height: 60px;
   text-align: center;
   vertical-align: middle;
   z-index: 7500;
	font-size: 130%
}
div#appNotification {   background-color: #f2f2f2;   color: #708C0B;}
div#appNotifError { background-color: #F98E1F; /* border-color: red;*/ color: white; }

div#main_menu{
   clear: both;
   text-align: center;
   margin: 0 auto;
   margin-bottom: .5em;
}
div#header input[type="image"] {
   width: 20px;
   height: 20px;
}
div#main_content{
   display: block;
   clear: both;
   margin: 1em auto;
   margin-bottom: 10px;
   padding: .25em .1%;
   width: 99.5%;
	/*overflow-x: hidden;*/
   position: relative;
}
div#main_content>div {min-height: 400px;}

/******************************************************************************/
/*****************************       Class       ******************************/
/******************************************************************************/

.spacer {}
.calendar { vertical-align: middle; max-width: 14%; margin-left: -7px; cursor: pointer;}
.date	{ /* padding: 3px 2px	*/}
.nombre, .right, .code_postal	{	text-align:right;}
.code_postal		{	min-width: 3.5em;}
.center				{ text-align: center; margin: 0 auto;}
.centre				{	text-align:center;}
.bold, .gras		{	font-weight: bold;}
.italic				{	font-style: italic;}
.smaller				{	font-size: 85% !important; }
.clair				{	background-color: #E3E3E3; padding: 3px;}
.red					{	color: red; }
.redBackground		{	background-color: red !important; }
.barre				{	text-decoration: line-through !important; }
.inline				{	display: inline-block;}
.absolute			{	padding: 5px;}
.bordure				{	border : 1px solid black;}
.noDisplay, .noShow	{	display:none !important; }
.noVisible				{	visibility: hidden !important;}

.exportPdf{
	background: url("../images/icons/file.pdf.png") no-repeat center left;
	padding-left: 22px !important; padding-right: 8px !important;
}


form.filtre { background-color: #ccc; border: none;}
form.filtre > table {width: 99.9%}

form .controls {
   text-align:center;
   display: block;
   clear: both;
   padding: .8em 0 .5em 0;
}
form.filtre div.controls { float: right; padding: 0 }

input.ongletNew {
   top: 0px;
}

.divfieldset-menu, .btnNav {
   /*float : left;*/
	text-align: center;
	border: 1px solid transparent;
   margin: 2px 1px;
	cursor: pointer;
}
.divfieldset-menu {
   display: inline-block;
	font-size: 1.33em; font-weight: bold; line-height: 4.5em;
   height: 4em; min-height: 4em;
   border-radius: 10px;
   padding-bottom: 3px;
	background: transparent none no-repeat left bottom border-box ;
	background-size: contain;
	text-overflow: ellipsis;
}
.btnNav{
   padding : 5px 2px;
   min-width: 90px;
}

.btnNav:hover{
/*   background-color: #E97E1F;
   font-style: italic;*/
}
.btnNav.btn-active{
   background-color: white !important; /*font-style: italic; font-weight: bold;*/
    border-color: black; color: #222;
}

input.btnPager, .btnMenu {
   border: 0px none;
   border-radius: 1.33em;
   background-color: #333740;
   text-decoration: none;
   color: white;
   width: auto;   min-width: 4.5em;
   padding: .2em .33em;
   line-height: 133%;
   font-style: normal;
   cursor: pointer;
}
input.btnPager:hover, .btnMenu:hover{   background-color: #494F5C; }
form input[type="button"][id$="_save"][value="+"] {   width: 2em; min-width: 1.75em;  padding: .33em;}
input.btnPager[disabled]{   visibility: hidden; }

fieldset, div.fieldset{
   border: 2px transparent solid;
   margin-top: 2px;
   border-radius: 10px 5px;
   background-color: #f2f2f2;
   padding: 2px 1px 0 2px;
   position: relative;
}
div.fieldset > .legend, fieldset>legend{
   border: 2px solid transparent;
   border-radius: 5px 5px 0 0;
   background-color: transparent;
   color: white;
	margin: -4px -3px 0px -4px;
	padding: 3px 10px;
   font-weight: bold;
}
.fieldset label{   text-align: right;	font-style: italic;}
td > label, fieldset>label{   text-align: right;margin-left: 1em; min-width: 3.5em;}
/*.fieldset label:not(.checkpole){ min-width: 120px; }*/
.fieldset img + label:not(.checkpole){ min-width: 100px; width: auto }

.notif-number{
	z-index: 505;
   position: absolute;
   top: -5px;
   right: -15px;
   height: 25px;
   width: 33px;
   border-radius: 25px;
   background-color: #F98E1F;
   color: #FFF;
   text-align: center;
   line-height: 25px;
   font-weight: bold;
   font-size: 90%;
	border: 1px #f2f2f2 solid;
}

.obligatoire, .obligatoire:focus {
   border: 2px solid red !important;
   padding: 4px !important;/**/
}

/*table.listing >  tbody >  tr*/.impair	{   background-color: #ECECEC;}
/*table.listing >  tbody  > tr*/.pair 	{   background-color: #D5D5D5;}
table.listing > tbody > tr:hover		{   background-color: #c60e59;}
table tr.selected {
   /*border-style: outset;*/
   background-color: #ABABAB !important;
/*   font-style: oblique;*/
   font-weight: bolder;
   cursor: pointer;
}

/*****************************   Auto Complete   ******************************/
div.autocomplete{   min-width: 15em;   z-index: 1002;}
div.autocomplete ul {
   list-style: none;
   margin: 0 0 -4px 0;
   padding: 0;
   overflow: hidden;  overflow-y: auto;
   background-color: #fff;
   color: #5B605A;
   max-height: 15em;
   padding: 2px;
   border-radius: 2px;
   box-shadow: 0px 0px 5px 1px #5B605A;
}
div.autocomplete ul li{
   padding: 1px ;
   text-align: left;
   display: block;
   text-decoration: none;
   background-color: transparent;
   position: relative;
   width: 99%;
}
div.autocomplete ul li:hover,
div.autocomplete ul li:focus,
div.autocomplete ul li.selected{
   background-color: #ddd;
   cursor: pointer;
}
div.autocomplete ul li span {
   display: block;
   padding: 1px 1px 1px 10px;
   font-style: italic;
   font-size: 85%;
}
div.autocomplete ul li span.informal{
   display:inline-block;
}
div.autocomplete ul em{
   font-style: normal;
   color: #6EADE7;
}

/*****************************   Class Colonne    ******************************/
.left_div{ float: left; clear:left;  width: 49.3%;}
.right_div { float: right; width: 49.6%;}

.col2{
   float: left;
   width: 49.5%;
   box-sizing: border-box;
   padding: 2px;
}
.col2 + .col2{  margin-left: 2px;}

.col3{
   float: left;
   width: 33.2%;
   box-sizing: border-box;
   padding: 2px 2px;
}
.col3 + .col3{ margin-left: 1px;}

.fieldset .col3 {padding: 1px !important; margin-left: 0px !important}

.col4{
   float: left;
   width: 24.8%;
   box-sizing: border-box;
   padding: 2px 1px;
}
.col4 + .col4{   margin-left: 1px;}

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

/******************************************************************************/
/*****************************   Media Device    ******************************/
/******************************************************************************/
@-moz-document url-prefix(){
   body{   }
}

@media (max-width: 1000px) {
	div#main_content {display: inline-block;max-height: 2em;height: 2em;overflow: hidden; font-size: 120%}
	div#main_content>div, div#divMenuContext {display: none;}
	div#main_content:before {display: block; content: "L'application ne peut fonctionner sur un petit écran!"; text-align: center}
}
@media (min-width: 1000px) {
   html, body { font-size: 12px; }
   form { padding: 2px; }
	div#main_menu{width:99%}
	.fieldset label:not(.checkpole) { min-width:60px; width: auto;}
	select { width: auto; max-width: 100px;}
}
@media (min-width: 1100px) {
	html, body{  font-size: 13px;  }
   form { padding: 3px; }
	div#main_menu{width:96%}
	.divfieldset-menu { max-width:16.3%;margin-left: 2px}
   input[type="image"].PJajout{ height: 12px; }
	input[type="text"]:not(.nombre):not(.code_postal):not(.date), select{ min-width: 90px;}
	.fieldset label:not(.checkpole):not(.simpleCheckbox) { min-width: 90px; width:auto /*125px*/;}
	select { max-width: 160px;}
	label.simpleCheckbox:before {letter-spacing: -3px !important;}
	label.simpleCheckbox {padding-right:14px !important;}
	/*input[type="checkbox"]:checked + label.simpleCheckbox:before {left: auto; right:1px !important;}*/
}