body{
margin:0; padding:0; 
color:#000;
width:100%;
}

.overlay{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(255,255,255,0.8) url("loader.gif") center no-repeat;
}
/* 
body{
    text-align: center;
}
*/
/* Turn off scrollbar when body element has the loading class */
body.loading{
    overflow: hidden;   
}
/* Make spinner image visible when body element has the loading class */
body.loading .overlay{
    display: block;
}

:root{
    --bleu : #158cfb;
}   
 
#progress-bar{
    z-index: 999;
    height : 4px;
    position : fixed;
    width : 0%;
    transition: width .3s ease-in;
    border-bottom : 2px solid #FFF;
}   

.fa{
color: var(--bleu);
padding: 2px 3px;
}

.fa:hover{
color:#aeca2c; !important
}

.gras{ font-weight: bold;}

.mini {
font-size: 0.75em;
}

.supermini {
font-size: 0.5em;
}

select[id^="spe_"]{
    width: 144px;
}

.arr{
padding: 1px 2px;
}

.cadre{
border: 1px solid gray;
}


.fa-border {
    border: 0.07em outset #eee;
    border-radius: 0.3em;
}


/*http://instantsprite.com*/

.ic50{
background-repeat: no-repeat;
position: relative;
display: inline-block;
-webkit-transition: -webkit-transform 250ms ease-in-out;
-moz-transition: -moz-transform 250ms ease-in-out;
-o-transition: -o-transform 250ms ease-in-out;
-ms-transition: -ms-transform 250ms ease-in-out;
transition: transform 250ms ease-in-out;    
}

.ic50:hover{
-webkit-transform: rotateZ(360deg) scale(1);
-moz-transform: rotateZ(360deg) scale(1);
-o-transform: rotateZ(360deg) scale(1);
-ms-transform: rotateZ(360deg) scale(1);
transform: rotateZ(360deg) scale(1);
}


nav{
width: 98%;
height: 30px;
padding-left: 22px;
position: relative;
margin-top: -18px;
margin-bottom: 27px;
}

nav#nav_login{
opacity: 0.25;
} 

#nav_login span:last-child,#nav span:last-child{
    position: absolute;
    right: 10px;
    margin-top: 23px;
}

#nav span.fa{
	width:24px;
	height:24px;
	padding: 5px;
	text-align: center;
}

#one, #two, #three{
position: absolute;
top: 3px;
font-size: 0.8em;
color: lightsalmon;
text-align: center;
}

#one{
left: 112px;
}

#two{
left: 286px;
}

#three{
left: 568px;
}

/* 
#navadmin span:last-child{
    position: absolute;
    right: 10px;
    margin-top: -6px;
}

#navadmin span.fa{
	width:24px;
	height:24px;
	padding: 5px;
	text-align: center;
}
 */

.tagPlanning{
background-color:crimson;
color:#FFFFFF;
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5), 0 0 1px #FFFFFF inset;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.5), 0 0 1px #FFFFFF inset;
padding:3px 16px;
border-radius:6px;
}


/* SPRITE icones 50px */
.accueil { background-position: -800px 0; } 
.agenda { background-position: -750px -50px; } 
.ajouter { background-position: -700px -100px; } 
.allperiodes { background-position: -650px -150px; } 
.annu { background-position: -600px -200px; } 
.annuler { background-position: -550px -250px; } 
.googlecalendar { background-position: -500px -300px; } 
.graph { background-position: -450px -350px; } 
.hono { background-position: -400px -400px; } 
.jourj { background-position: -350px -450px; } 
.lettrecle { background-position: -300px -500px; } 
.logoordre { background-position: -250px -550px; } 
.logoordre2 { background-position: -200px -600px; } 
.pref { background-position: -150px -650px; } 
.todoliste { background-position: -100px -700px; } 
.vacances { background-position: -50px -750px; } 
.Zegarde { background-position: 0 -800px; } 

.todoliste{ 
background-position:  -100px -700px; 
transform: rotateZ(0) scale(1);
-webkit-transform: rotateZ(0) scale(1);
-moz-transform: rotateZ(0) scale(1);
-o-transform: rotateZ(0) scale(1);
-ms-transform: rotateZ(0) scale(1);
transform: rotateZ(0) scale(1); 
} 


/* SPRITE ICones 24 */
.ic24 {
background: url(sp24.png) no-repeat top left;
display: inline-block;
height: 24px;
width: 24px;
vertical-align: middle;
}

.marker1 { background-position: 0px 0px;  } 
.marker2 { background-position: -29px 0px;  } 
.marker3 { background-position: -58px 0px;  } 
.marker4 { background-position: -87px 0px;  } 

/* pour la taille des lignes du menu de gauche = ACCORDIOn jquery*/
.ui-accordion-content{
font-size:12px;
}

.ui-accordion .ui-accordion-content{
padding:5px;
border-top:0;
overflow:auto;
zoom:1;
}

/* je redeclare l'aspect des onglet jquery ui sinon trop gros */
.ui-widget{
font-size:1em;
}

img{
border:0 none;
vertical-align:middle;
}

.floatR{
float:right;
z-index:1;
}

.floatL{
float:left;
z-index:1;
}

.c{ 
text-align:center;
}

.c2{
margin: 7px auto;
width: 80%;
}

.espace{
padding-left:10%;
/* font-weight:bold; */
color:#069;
}

.indent {
text-indent:50px;
}

hr{ 
width:85%;
}

.hidden,.sp_jprint,.sp_jgarde{
display:none; !important;
}

a{
text-decoration:none;
color:#19455b;
}

a:hover, 
.getajax:hover,
.getDeleteJour:hover,
.getAddJour:hover,
.pointeur:hover,
#retroCopie:hover,
.enlarge:hover{
text-decoration:none;
color:#C00;
}

a:visited{
text-decoration:none;
}

ul{
list-style-type:none;
}

.bullet{
display: inline;
}

.bullet li{
margin-bottom:7px;
background: rgba(255,255,255,.8);
border-color: #e3ebc3;
border-color: rgba(255,255,255,.6);
border-style: solid;
border-width: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 3px 10px;
margin-bottom: 5px;
}

.colorli{
background: rgba(0, 105, 185, 0.30) !important;	/* 	#bleu */
}

.colorligreen{
background: rgba(255, 246, 204, 0.5) !important;	/* # vert/brun */
}

h2,c3b,.h2like {
position:relative;
color:#000;
padding-left:25px;
background-image: -webkit-linear-gradient(top, #fff 0, #e0e0e0 100%);
background-image: -o-linear-gradient(top, #fff 0, #e0e0e0 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
background-repeat: repeat-x;
border-color: #ccc;
background-repeat: repeat-x;
border-radius:0 5px 5px 0;
padding: 3px 25px;

}

h2{
font-size: 1.1em;
padding-left:18px;
box-shadow: 2px 2px 3px rgba(1, 1, 1,0.7);
}

h2 a{
color:#000;
}

span.a{
font-size: 1em;
}

#tabs h2{
margin-bottom: 5px;
/* font-size:1em; */
}

.sh{
box-shadow: 2px 2px 3px rgba(1, 1, 1,0.7);
border-radius: 0px 5px 5px 0px;
}

.sh2{
box-shadow: 2px 2px 3px rgba(1, 1, 1,0.7);
border-radius: 10px 20px 20px 10px;}

div[id^=p_stat] h2,#statOne,fieldset h2{
margin-bottom: 5px;
padding: 2px 20px;
font-size:1em;
}

div[id^=p_stat] h2:hover{
color:#C00;
}

.w180{
width:180px;
}

.max_w350{
max-width: 350px;
}

.max_w160{
max-width: 160px;
}

.titre{
position:relative;
color:#19455b;
padding:3px 20px;
padding-bottom:3px;
background:-webkit-gradient(linear, left top, left bottom,from(#ffffff),color-stop(0.50, #ffffff),to(#b5b5b5));
background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 50%,#b5b5b5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#b5b5b5 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#b5b5b5);
zoom:1;
-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,1);
box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,1);
border-radius:10px 0 10px 0;
}

.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 500;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 3px 10px;
font-size: 12px;
line-height: 1.4em;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: background-color .15s ease-in-out;
transition: background-color .15s ease-in-out;
}

.btn2 {
width: 194px;
border: 1px solid gray;
border-radius: 7px;
padding: 4px;
text-align: left;
color: #FFF;
background-color:ghostwhite;
}

.btn-color:hover {
color: #000;
background-color: #ec971f;
border-color: #d58512;
}

.btn3 {
width: 130px;
border: 3px ridge gray;
background: #f6a828;
color: #ffffff;
font-weight: bold;
border-radius: 7px;
padding: 2px;
text-align: center;
margin-left: 10px;
}

.right{
text-align:right; 
padding-right:7px;
}

.left{
text-align:left;padding-left:7px;
}

.entete_perso{
margin:50px;
text-align:left;
}

.margetop{ margin-top:25px;}
.italic{ font-style:italic;}
.r{ color:#C00;}
.gris{color:#ABABAB;}
.gris2{background-color:#999;}
.marron{ color:#600;}

.tf,.tg,.tb,.tx{
border: 1px ridge darkgrey;
-webkit-box-shadow: 3px 5px 3px rgba(1, 1, 1, 0.4);
box-shadow: 3px 5px 3px rgba(1, 1, 1, 0.4);
width: 99%;
margin: 7px auto;
padding: 3px;
border-radius: 10px 0 10px 0;

}

h2 + table.tf{
margin-top:0px;
}

.tg{
text-align: center;
}	

table.tf, table.tg, table.tb, table.tx{
border-collapse:collapse;
line-height:1.5em;
}
.grillage{
border-collapse:separate;
}

.tf tbody tr:nth-child(even){
background-color:#FFF;
}
.tf tbody tr:nth-child(odd){
background-color:#F2F2F2;
}

tr>th{
color: #fff;
background-color: var(--bleu);
border-color: #0088cc;
border-right: 1px ridge rgba(251, 186, 17, 0.3);
}

.planning tbody tr:nth-child(even){
background-color:#FFF;
}
.planning tbody tr:nth-child(odd){
background-color:#FFF;
}

.tj{
-webkit-box-shadow: 2px 2px 2px rgba(1, 1, 1, 0.2);
box-shadow: 2px 2px 2px rgba(1, 1, 1, 0.2);
border:1px ridge darkgrey;
margin:5px 0;
padding:5px;
/* border-radius:10px 0 10px 0; */
}

.tk{
/*background-color:#D2B48C;*/
-webkit-box-shadow: 3px 5px 3px rgba(1, 1, 1, 0.4);
box-shadow: 3px 5px 3px rgba(1, 1, 1, 0.4);
border:2px ridge;
margin:5px auto;
padding:5px;
border-radius:10px 0 10px 0;
}

.dotted{
border: 1px dotted black;
padding: 6px 2px;
}

.ligne_height{  line-height:2.2em;}

/* button,input{ font-weight: bold;} */
textarea{width:98%;padding:5px;}
input[type=text],input[type=email],input[type=tel]{padding-left:5px;text-align: center;} /*background-color:#E9EEF6;}*/
input[type=password]{padding-left: 5px; text-align:center;}
label{color:#00305e; padding-right:3px;}

ul.con li label{
width: 100px;
}

fieldset{
margin:10px 3px;
border-left: 0px;
border-right: 0px;
}

#container{
position:relative;
}

.grid{
display :table;
border-collapse:separate;
border-spacing:6px;
height:100%;
width:99%;
margin:10px auto;
}

header{
height:70px;
}

#numDep{
color: white;
position: absolute;
font-size: 9px;
top: 51px;
left: 31px;
    #border: 1px red solid;
width: 78px;
text-align: center;
}

#numDepBordereau{
color: white;
position: relative;
font-size: 9px;
top: 24px;
left: -86px;
}
.tablerow > div{
position:relative; /* Pour bien caler les icônes de rappel du menu */
/*  display:table-cell;*/
padding:0 0.5em;
color:#000;
/* 
background:rgba(2, 2, 2, 0.3);
 */
}

/* MEDIA QUERY */


/* si on est au + en 1024px  */

@media only screen and (max-width:1023px)
{
    .a{
    display:none;
    }
}


@viewport {
width: device-width; /* largeur du viewport */
zoom: 1; /* zoom initial à 1.0 (et clin d'oeil aux fans d'IE6/7) */
}

/* si on est au moins en 1024px on ajoute format tabulaire */
/*
@media only screen and (min-width:1024px)
{
*/
.tablerow>div{
display:table-cell;
}

.tablerow{
display:table-row;
}

.tablerow > div:first-child{
width:330px; 
min-width:330px;  
}

.tablerow > div:nth-child(3){
width:380px;
}

table.calculette{
width:99%;
}

/*}*/

footer{
line-height:20px;
background:rgba(2, 2, 2, 0.4);
}

.tablerow > div ,footer{
background-color:rgba(255, 191, 95, 0.2);	/* background-color:rgba(0, 0, 0, 0.05); */
border-radius:10px 0 10px 0;
border-right:1px solid rgba(2, 2, 2, 0.28);
border-left:1px solid rgba(2, 2, 2, 0.28);
border-top:1px solid rgba(250, 250, 250, 0.27);
box-shadow:rgba(255,255,255,0.3) 0 1px 0, rgba(0,0,0,0.3) 0 -1px 0;
-webkit-box-shadow:0 0 3px rgba(1, 1, 1, 0.7);
box-shadow:0 0 3px rgba(1, 1, 1, 0.7);
}

/* Pour tabs jquery ui */

.ui-tabs .ui-tabs-panel{
background-color:#D0D0D0;
border-width: 0;
display: block;
padding: 1em 0.4em;
}

/* ^pru ne pas avoir accordion actif avec fond NOIR = bug ? */
/* .ui-state-focus { background: none } */

.enteteBull { 
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}

.enteteBull li { 
margin: 5px; 
padding: 5px; 
float: left; 
width:31%; 
font-size: 1em; 
text-align: left; 
/* background-color:orange; important! */
border-radius:10px
}

.corpsBull { 
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}

.corpsBull li { 
margin: 5px; 
padding: 5px; 
width:100%;
float: left;  
font-size: 1em; 
text-align: left; 
/* background-color:lime; important! */
border-radius:10px
}


/* colorpicker */
.custom-size {
width: 300px;
height: 200px;
}

/* tableau statistique */
td.sorted{
background:#ffd;
}

/* Pour les stats opened et cmosed  */
.fleches{
position:absolute;
left:.1em;
top:50%;
margin-top:-8px;
background-image:url('png.png') ;
width:16px;
height:16px;
}

.closed{
background-position:-112px -192px;
}
.opened{
background-position:-128px -192px;
}

/* LES COULEURS */
.lightcoral{color:lightcoral;}
.salmon{color:salmon;}
.darksalmon{color:darksalmon;}
.lightsalmon{color:lightsalmon;}
.crimson{color:crimson;}
.red{color:red;}
.firebrick{color:firebrick;}
.darkred{color:darkred;}
.pink{color:pink;}
.hotpink{color:hotpink;}
.deeppink{color:deeppink;}
.mediumvioletred{color:mediumvioletred;}
.palevioletred{color:palevioletred;}
.lightsalmon{color:lightsalmon;}
.coral{color:coral;}
.tomato{color:tomato;}
.orangered{color:orangered;}
.darkorange{color:darkorange;}
.orange{color:orange;}
.gold{color:gold;}
.yellow{color:yellow;}
.papayawhip{color:papayawhip;}
.moccasin{color:moccasin;}
.peachpuff{color:peachpuff;}
.palegoldenrod{color:palegoldenrod;}
.khaki{color:khaki;}
.darkkhaki{color:darkkhaki;}
.lavender{color:lavender;}
.thistle{color:thistle;}
.plum{color:plum;}
.violet{color:violet;}
.orchid{color:orchid;}
.fuchsia{color:fuchsia;}
.magenta{color:magenta;}
.mediumorchid{color:mediumorchid;}
.mediumpurple{color:mediumpurple;}
.blueviolet{color:blueviolet;}
.darkviolet{color:darkviolet;}
.darkorchid{color:darkorchid;}
.darkmagenta{color:darkmagenta;}
.purple{color:purple;}
.indigo{color:indigo;}
.slateblue{color:slateblue;}
.darkslateblue{color:darkslateblue;}
.mediumslateblue{color:mediumslateblue;}
.greenyellow{color:greenyellow;}
.chartreuse{color:chartreuse;}
.lawngreen{color:lawngreen;}
.lime{color:lime;}
.limegreen{color:limegreen;}
.palegreen{color:palegreen;}
.lightgreen{color:lightgreen;}
.mediumspringgreen{color:mediumspringgreen;}
.springgreen{color:springgreen;}
.mediumseagreen{color:mediumseagreen;}
.seagreen{color:seagreen;}
.forestgreen{color:forestgreen;}
.green{color:green;}
.darkgreen{color:darkgreen;}
.yellowgreen{color:yellowgreen;}
.olivedrab{color:olivedrab;}
.olive{color:olive;}
.darkolivegreen{color:darkolivegreen;}
.mediumaquamarine{color:mediumaquamarine;}
.darkseagreen{color:darkseagreen;}
.lightseagreen{color:lightseagreen;}
.darkcyan{color:darkcyan;}
.teal{color:teal;}
.aqua{color:aqua;}
.cyan{color:cyan;}
.lightcyan{color:lightcyan;}
.paleturquoise{color:paleturquoise;}
.aquamarine{color:aquamarine;}
.turquoise{color:turquoise;}
.mediumturquoise{color:mediumturquoise;}
.darkturquoise{color:darkturquoise;}
.cadetblue{color:cadetblue;}
.steelblue{color:steelblue;}
.lightsteelblue{color:lightsteelblue;}
.powderblue{color:powderblue;}
.skyblue{color:skyblue;}
.lightskyblue{color:lightskyblue;}
.deepskyblue{color:deepskyblue;}
.dodgerblue{color:dodgerblue;}
.cornflowerblue{color:cornflowerblue;}
.mediumslateblue{color:mediumslateblue;}
.royalblue{color:royalblue;}
.blue{color:blue;}
.mediumblue{color:mediumblue;}
.darkblue{color:darkblue;}
.navy{color:navy;}
.midnightblue{color:midnightblue;}
.cornsilk{color:cornsilk;}
.blanchedalmond{color:blanchedalmond;}
.bisque{color:bisque;}
.navajowhite{color:navajowhite;}
.wheat{color:wheat;}
.burlywood{color:burlywood;}
.tan{color:tan;}
.rosybrown{color:rosybrown;}
.sandybrown{color:sandybrown;}
.goldenrod{color:goldenrod;}
.darkgoldenrod{color:darkgoldenrod;}
.peru{color:peru;}
.chocolate{color:chocolate;}
.saddlebrown{color:saddlebrown;}
.sienna{color:sienna;}
.brown{color:brown;}
.maroon{color:maroon;}
.white{color:white;}
.gainsboro{color:gainsboro;}
.lightgrey{color:lightgrey;}
.silver{color:silver;}
.darkgray{color:darkgray;}
.gray{color:gray;}
.dimgray{color:dimgray;}
.lightslategray{color:lightslategray;}
.slategray{color:slategray;}
.darkslategray{color:darkslategray;}
.black{color:black;}

.fondTurquoise{	background-color:#48d1cc;!important;}
.fondSilver{ background-color:#C0C0C0;!important;}
.fondJaune{	background-color:#fffff0;}
.fondClair{	background-color:#f5f5f5;!important;}

.colorpicker td{
width:20px;
height:20px;
}

.infoProcess{
position: fixed;
left:780px;
/* le top est géré par JS */
z-index:999;
width:300px;
text-align:center;
line-height:12px;
font-weight: 800;
background-color:deepskyblue;
-webkit-box-shadow: #666 2px 2px 2px;
box-shadow: #666 2px 2px 2px;
padding: 2px;
color: #000;
}

.ombre{
border:1px solid rgba(2, 2, 2, 0.28);
-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,1);
box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,1);
text-shadow:0px -1px 0px rgba(000,000,000,0.4),0px 1px 0px rgba(255,255,255,0.3);
}

.pointeur,
.enlarge,
.cpointer,
.toggleDiv, 
button, 
.getDeleteJour,
#allNotes,
#hideAllNotes,
.getAddJour,
input[type=submit],
input[type=reset],
.getPicker,
.printStat,
#statOne,
div[id^=p_],
.getajax,
#retroCopie,
.copyDebut,
.fa-minus-square,
.fa-plus-square,
.copyFin{
cursor: pointer;
}

.calculette {
border: 2px ridge;
box-shadow: 3px 5px 3px rgba(1, 1, 1, 0.4);
margin: 7px auto;
padding: 2px;
width: 80%;
}

.calculette tbody tr:nth-child(even){
background-color:#FFF;
}
.calculette tbody tr:nth-child(odd){
background-color: #E8D5C2;
border-bottom: 2px groove threedface;
}

table.calculette{
border-collapse:collapse;
line-height:1.5em;
}

.numweek{
font-size: 2em;
color: grey;
opacity: 0.5;
}

#infoPeriodeADeclarer{
position: absolute;
overflow: auto;
max-height: 110px;
width: 300px;
margin:0px;
top: 10px;
right: 60px;
z-index: 999;
background-color: rgba(241, 231, 145,1);
-webkit-box-shadow: #666 2px 2px 2px;
box-shadow: #666 2px 2px 2px;
border-radius: 10px 0 10px 0;
padding: 0 5px;
}

#todoliste{
position: absolute;
top: 7px;
left: 310px;
}

#manuellink{
position: absolute;
top: 7px;
right: 20px;
}

#infoToDoListe{
position: absolute;
top: 24px;
left: 15px;
width: 18px;
text-align: right;
font-size: 1em;
color: rgb(5, 5, 5);
text-shadow: 2px 2px 2px rgba(88, 87, 87, 0.7);
}

.transparent{
opacity: 0.5;
}

.vide{
opacity: 0;
}

.underline{
text-decoration:underline;
}

.highlight{
background-color:lawngreen;
}

.stabylo{
background-color: crimson;
color: #FFFFFF;
padding: 3px 3px;
border: 1px outset #FFFFFF;
}

.stabyloVert{
background-color:#aeca2c !important;
color: #FFFFFF;
padding: 3px 3px;
border: 1px outset #FFFFFF;
}

.striked{
text-decoration:line-through;
color:red;
font-style: italic;
}

.imgframe{
border: 1px outset #808080;
}

@media (max-device-width:768px) and (orientation: landscape) {
	html {
		-webkit-text-size-adjust: 100%;
	}
}

@media (max-width: 640px) {

	.a{
	display:none;
	}

	/* passer tous les éléments de largeur fixe en largeur automatique */
	body, element1, element2 {
	width: auto;
	margin: 0;
	padding: 0;
	}

	/* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
	img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
	max-width: 100%;
	}
	/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
	img {
	height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	/* gestion des mots longs */
	textarea, table, td, th, code, pre, samp {
	word-wrap: break-word; /* passage à la ligne forcé */
	-webkit-hyphens: auto; /* césure propre */
	-moz-hyphens: auto;
	hyphens: auto;
	}
	code, pre, samp {
	white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}

	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
	element1, element2 {
	float: none;
	width: auto;
	}

	/* masquer les éléments superflus */
	.hide_mobile {
	display: none !important;
	}

	/* Un message personnalisé */
	body:before {
	content: "Version mobile du site";
	display: block;
	color: #777;
	text-align: center;
	font-style: italic;
	}
}

/* on stylise les champs à la classe "nice" ... */
input.nice{
	line-height: 1.42857143;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

input.nice:focus {
	color: #C00;
}

input.nice:disabled {
	border-right: 4px solid gray;
}

input.nice[required] {
	border-right: 4px solid red;
}

.icon-ph {
    display: inline-block;
    font-size: 14px;
    height: 17px;
    line-height: 17px;
    min-width: 17px;
    padding: 1px;
    position: absolute;
    top: 3px;
    width: auto;
    z-index: 3;
  }
  
.custom-text {
/* 
    padding:6px 6px 6px 30px ;
 */
}
.input-container {
  position:relative;
}

*{
font-size:12px;
}

.bouton,.boutonUltrasoft {
    margin-bottom: 3px;
    padding: 5px 10px;
    width: auto;
    border: 0;
    border-radius: 4px;
    background: #FF8900;
    color: white;
    text-align: center;
    font-size: 12px
}
.labeldark {
    background: #286090;
    border-color: #204d74;
}

.labelorange {
	background-color: #b5cc18 !important;
	border-color: #b5cc18 !important;
	color: #FFF 
}

.labelverte {
	background-color: #FFF !important;
	color: #b5cc18 !important;
	border-color: #b5cc18;
}

.labelrouge {
background-color: #CF4024 !important;
border-color: #CF4024 !important;
color: #FFF 
}
a.bouton {
color: white
}

.labelgr {
background-color: #d0d0d0 !important;
color: #000;
border-radius: 10px; 
padding: 0 2px;
position: relative;
left: -15px;
top: -7px;
border: 1px ridge darkgray !important;;
}

.labelgrise {
color:#ba0924;
background: #EEE;
}

#menuaccueil{
 width:100%;
 vertical-align: middle;
 border-collapse: collapse;
}

#menuaccueil td.btn2>a {
text-decoration: none;
color:white;
}

td.h2like{
background: transparent;
padding: 2px 15px;
}

td.h2like>a{
margin-bottom: 3px;
padding: 5px 10px;
width: auto;
border: 0;
border-radius: 4px;
background: floralwhite;	/* #b5cc18; */
color: black;
text-align: center;
font-size: 12px;
display:inline-block;
}

tr.h2like td a{
text-decoration: none;
color:red;
}

#tableBordereau, #tableBoedereau tr{
line-height: 2.5em;
width:100%;
text-align:center;
border:1px solid gray;
margin:auto;
}

.cheque_ordre,.cheque_chiffres,.cheque_lettres,.cheque_date,.cheque_lieu{
text-align: left;
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Safari */
transform: rotate(270deg); /* Standard syntax */
}

.cheque_image{
position:relative;
text-align: center;	
}

.cheque_lettres{
margin-top: -340px;
margin-left: -109px;
padding-left: 106px;
}

.cheque_ordre{
margin-top: -80px;
margin-left: -71px;
padding-left: 45px;
}

.cheque_chiffres{
margin-top: -363px;
margin-left: -68px;
}

.cheque_lieu{
margin-top: 190px;
margin-left: 15px;
}

.haute{
line-height: 2.5em;
font-size: 13px;
background: bisque;
}

/* zone sortable bulletin */

.column{
padding: 3px;
border: 1px dashed gray;
background-color: #FFF;
}
.widthColDiv2{
width: 31.5%;
color:gray;
margin: 2px;
}
div.widthListChamps > .portlet{
width: 115px;
float: left;
}
.etiquette{
padding: 3px;
border: 1px dashed gray;
background-color: #FFF;
height : 100px;
width: 98%;
}
.listChamps{
position: relative;
width: 100%;
height: 100px;
}
.widthColDiv3{
width: 98%;
margin: 5px;
}
.portlet {
margin: 2px;
padding: 3px;
}
.portlet-header {
/* padding: 1px; */
position: relative;
text-align: center;
}
.portlet-content{
padding-top: 6px;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}

.triboules {
position: fixed;
background-color: transparent;
top: 6px;
right: 44px;
cursor: pointer;
padding: 2px;
text-align: right;
z-index: 10;
}

#c_1,#c_2,#c_3{
float: right;
margin-right: -7px;
}

/* 
pour le bouton plug-in scrolltotop
 */
#toTop2 {
position: fixed;
bottom: 38px;
right: 60px;
cursor: pointer;
display: none;
z-index: 10;
}

#toTop2.btn-info {
color: #fff;
background-color: rgb(21, 140, 251);
border-color: #bfb8af;
padding: 10px 6px;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
font-size: 10px;
font-weight: 800;
}

#putInTheCaddie, #btnValidModif_1,#btnValidModif_2 {
position: fixed;
top: 50%;
right: 1250px;
cursor: pointer;
display: none;
z-index: 10;
}

#putInTheCaddie.btn-info, #btnValidModif_1.btn-info, #btnValidModif_2.btn-info {
color: #fff;
background-color: rgb(21, 140, 251);
border-color: #bfb8af;
padding: 5px 5px;
font-size: 1em;
font-weight: 800;
}

/* 
POur fixer la position de la fenetre light de detail d'une fiche
 */
.ui-dialog {
    position: fixed !important;
}

/* 
#infoSuppr_1,#infoSuppr_2 {
position: absolute;
width: 160px;
height: 160px;
margin-top: -205px;
text-align: center;
}

#infoSuppr_2 {
margin-left: 950px;
}
#infoSuppr_1 {
margin-left: 390px;
}
 */

table.coolLabel label{
color: maroon;
background-color: bisque;
border-radius: 3px;
border: 1px ridge lightgray;
padding: 2px 2px;
}

.mask{
border: 3px ridge gray;
background: darkgrey;
color: white !important  ;
}

.clignote  {
   animation-duration: .8s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}

h2:before {
  content: '\21AA   ';
}

.fa-lg {
font-size: 1.25em;
line-height: 1em;
vertical-align: -.075em;
}

.details {
background-color: lightsteelblue !important;
}