body
{
	background-color: #eeeeff; /*  #8C2213;*/
	font-family: Arial,Helvetica,sans-serif;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	margin:  0px 5px 0px 5px;
  border-radius: 4px;	
    
    
    /*overflow: hidden;
    padding: 0;
    position: relative;
    */    
}
/*
body, html {
  height: 100%;
  width: 100%;
}
*/

video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}

.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.body.row { top: 90px; bottom: 0px; }
.message { position:fixed; top:5px; left:5px; background-color: #FFFFFF;
           display: none; z-index:2005; background: white;  
           border:4px solid black; margin: 6px; padding: 7px; resize:both;  max-height:800px; overflow-y: auto;
           border-radius: 5px;
         } 

a:link {text-decoration: none}
a:visited {text-decoration: none; color:  black;}
a:active {text-decoration: none}
a:hover {text-decoration: none; color: red;}
/* A.menubar:hover {text-decoration: none; color: red; font-size:120%;} */
	

h1
{
background-color: #5e6375; /* #9999cc; */
border-radius: 6px;
padding-left: 20px;
color: #FFFFFF;
}

h2
{
background-color: #5e6375; /* #9999cc; */
border-radius: 5px;
padding-left: 20px;
color: #FFFFFF;
}

h3
{
background-color: #5e6375; /* #9999cc; */
border-radius: 5px;
padding-left: 20px;
margin: 2px;
color: #FFFFFF;
}

form
{
padding: 5px;
}

h3 a, h3 a:visited
{
color: #FFFFFF;
}

.sgo_button {
   /* This imageless css button was generated by CSSButtonGenerator.com */
    -moz-box-shadow:inset 1px 1px 15px -5px #888888;
  -webkit-box-shadow:inset 1px 1px 15px -5px #888888;
  box-shadow:inset 1px 1px 15px -5px #888888;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #FAFAFF), color-stop(1, #8A8AFF) );
  background:-moz-linear-gradient( center top, #FAFAFF 5%, #8A8AFF 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFF', endColorstr='#8A8AFF');
  background-color:#FAFAFF;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border-radius:8px;
  border:2px solid #5e6375;
  display:inline-block;
  color:#000000; 
/* font-family:arial;
  font-size:15px;*/
  font-weight:bold; 
  padding:2px 4px;
  text-decoration:none;
  /* text-shadow:1px 1px 0px #2e1906; */
}.sgo_button:hover {
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8A8AFF), color-stop(1, #FAFAFF) );
  background:-moz-linear-gradient( center top, #8A8AFF 5%, #FAFAFF 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8A8AFF', endColorstr='#FAFAFF');
  background-color:#8A8AFF;
}.sgo_button:active {
  position:relative;
  top:1px;
}

.tile_button {
   border: 1px outset blue;
   background-color: lightBlue;
   height:50px;
   width:150px;
   border-radius: 6px;
   cursor:pointer;
}

.tile_button_select {
   border: 1px outset blue;
   height:50px;
   width:150px;
   cursor:pointer;
   border-radius: 6px;
   background-color: blue;
   color:white;
}
/*
.tile_button:hover {
   background-color: blue;
   border-radius: 6px;
   color:white;
}

div {
	background-color: #eeeeff;
}
*/

div.scrollable {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

input, select, textarea, input[type="checkbox"] {
  background-color: #fff;
  border: 1px solid #597183;
  border-radius: 4px;
  transition: all 0.3s ease;
}

input:focus, select:focus, textarea:focus, input[type="checkbox"]:focus {
  border-color: blue;
  border-style: outset double;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(21, 156, 228, 0.4);
  /*
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); */
} 

/* Tableau pour liste avec alternance de couleur */
table.list
{
  border: 1px solid #788b9e;
  padding:5px 5px 5px 5px;
  border-radius: 6px;  
}

.list thead tr{
	background-color: #788b9e;
	border-radius: 6px;
}

.list th
{
  padding:4px 5px 4px 5px;
  border: 1px solid #788b9e; 
  border-radius: 6px;  
}

.list td
{
   padding:1px 5px 1px 5px;
   border: 1px solid #abc1d7;
   border-radius: 6px;   
}

 .list thead tr th {
  border: 1px solid #788b9e;
  border-radius: 6px;  
 }
 
.list_highlight, .list_over, .list_th {
  padding:4px 5px 4px 5px;
  cursor:pointer;	
  border: 1px solid #788b9e;
  border-radius: 6px;  
}

.list_highlight { background-color: #E0E0FF; }

.list_over      { background-color: #E0E0FF; }

/* Tableau affichage formulaire */

table.simple
{
  border: 1px solid #788b9e; /* #eeeeff*/
  padding:5px 5px 5px 5px;
  border-radius: 4px;  
}

.simple th
{
  padding:2px 3px 2px 3px;
  font-size: 100%;
  background-color: #788b9e;
  color: #000000;
  text-align: left;
  border-radius: 4px; 
}
 
.simple tr
{
  background-color: #bfd7f1;
  /* border: 0px; */
  border: 1px solid #788b9e; /* #eeeeff*/
  border-radius: 6px;
}

.simple td
{
  background-color: #bfd7f1;
  padding:1px 3px 1px 3px;
  font-size: 100%;
  border-radius: 4px; 
}


table tr td 
{
  vertical-align:top;
  border-radius: 6px;
}

/*   Alternance de couleur pour le tableau de 'list' */

tr.l1     {  background-color: #bfd7f1; border-radius: 6px; }
tr.l2     {  background-color: #abc1d7; border-radius: 6px; }
tr.tot    {  background-color: #788b9e; } /* #DE7464; */

tr.vert  { background-color: #66CC33; } /* #e0fcd4 71C671 Case de couleur pour différent usages */
tr.rouge { background-color: #ffeaf2; color: #000000;} /* EE2C2C ********** TENIR SYNC AVEC SGO_C_RAPPORT::COLOR */

td.bom_inc  {  background-color: #FFFFFF; } /* BOM Incomplet. Données pas entrer(ex: qte a 0)   */
td.bom_hold {  background-color: #FFC000; } /* BOM en probleme (hold)  */
td.bom_recu {  background-color: #92D050; } /* BOM recu  */
td.bom_dp   {  background-color: #EEEE00; } /* BOM en Demande de Prix */
td.bom_req  {  background-color: #FFFFFF; } /* BOM en Requisition  */
td.bom_cmd  {  background-color: #C5D9F1; } /* BOM en cmd   */
td.bom_std  {  background-color: #F1C6D9; } /* Standby pour requisition  */
td.bom_cli  {  background-color: #C2E899; } /* Fourni par client  */
td.aq_manuel_requis {  background-color: #C5D9F1; } /* Manuel d'operation requis */

td.vert  { background-color: #66CC33; } /* 71C671 Case de couleur pour différent usages */
td.vertp { background-color: #C3FFA5; } 
td.rouge { background-color: #FF2211; color: #FFFFFF;} /* EE2C2C ********** TENIR SYNC AVEC SGO_C_RAPPORT::COLOR */
td.jaune { background-color: #E6E600; } /* EEEE00 */ 
td.orange{ background-color: #FBAF10; }
td.bleu  { background-color: #4372EF;  color: #FFFFFF;}
td.mauve { background-color: #CC99FF; } /* #B04AF4 */
td.rose  { background-color: #FFCCFF; }
td.gris  { background-color: #969696; /* Case pour la fin de semaine... */ }
th.vert { background-color: #92D050; } /* Case de couleur pour différent usages */

td.right   { text-align:right; }
td.left    { text-align:left; }
td.center  { text-align:center; }
td.cadre   { border:1px solid black; }

th.right   { text-align:right; }
th.left    { text-align:left; }
th.center  { text-align:center; }

/* Tableau pour la cédule de production Copie reference originale de fixedHeaderTable */
.fancyTable th, .fancyTable td {
    margin: 5px;
    border: 1px solid #798088;
    padding: 10px;
}
.fancyTable thead tr th, .fancyTable tfoot tr td {
    background-color: #788b9e;
    /* background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.2) 0%), url("../images/table_texture.png");
    */
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.5) inset;
    color: #000000;
    text-align: left;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    vertical-align: middle;
}
.fancyTable tbody tr td {
    background-color: #abc1d7;
    border-color: #9AA2AC;
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.5) inset;
    color: #2D3134;
    font-size: 12px;
    font-weight: 400;
}
.fancyTable tbody tr.odd td {
    background-color: #FFFFFF;
}
    
/* Tableau pour la cédule de production */
.cedule th, .cedule td {
    margin: 5px;
    border: 1px solid #798088;
    padding: 10px;
    width: 100px;
}
.cedule thead tr th, .cedule tfoot tr td {
    background-color: #788b9e; 
    /* background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.2) 0%), url("../images/table_texture.png");
    */
    /* box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.5) inset; */
    color: #000000;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    vertical-align: middle;
    height: 65px;
    width: 100px;
}
.cedule tbody tr td {
    background-color: #abc1d7;
/*    border-color: #9AA2AC; */
/*    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.5) inset; */
    color: #2D3134;
    font-size: 12px;
    font-weight: 400;
    height: 40px;
    width: 100px;
}

.cedule tbody tr td.fds      { background-color: #969696; /* Case pour la fin de semaine... */ }
.cedule tbody tr td.employe  { background-color: #FFFAFA; /* Case pour nom de employe... */ }
.cedule tbody tr td.vacance  { background-color: #CC99FF; }
.cedule tbody tr td.formation{ background-color: #00FFFF; }
.cedule tbody tr td.confirme { background-color: #8C2213; color: #FFFFFF; } 
.cedule tbody tr td.entretien{ background-color: #3A8369; color: #FFFFFF; }
.cedule tbody tr td.flexible { background-color: #EC8273; color: #FFFFFF; }
.cedule tbody tr td.maladie  { background-color: #008080; }
.cedule tbody tr td.occupe   { background-color: #F8FFB5; }
.cedule tbody tr td.usine    { background-color: #40D524; }
.cedule tbody tr td.trlg     { background-color: #FFFF00; } /* Travaux Leger */

.cedule tbody tr td.vert  { background-color: #92D050; } 
.cedule tbody tr td.rouge { background-color: #DA0000; color: #FFFFFF;} 
.cedule tbody tr td.jaune { background-color: #FFFF00; } 
.cedule tbody tr td.orange{ background-color: #FBAF10; }
.cedule tbody tr td.bleu  { background-color: #4372EF;  color: #FFFFFF;}
.cedule tbody tr td.mauve { background-color: #B04AF4; }
.cedule tbody tr td.rose  { background-color: #FFCCFF; }
.cedule tbody tr td.gris  { background-color: #969696; }


.cedule tbody tr.odd td {
    background-color: #FFFFFF;
}

.cedule tbody tr td.section {
    /* Row avec la section..tuyauteur, assembleur.... */	
    background-color: #202020;
    color: #DFDFDF;
    height:15px;
}

p, font, label, option
{
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	margin: 0;
	border: 0;
	padding: 0 0 6px 0;
    border-radius: 4px;	
}

ul
{
	margin: 0px 0px 0px 15px;
	border: 0;
	padding: 0;
	border-radius: 5px;
  list-style-type: none;
}

ol, li
{
	margin: 0 0 6px 15px;
	border: 0;
	padding: 0;
	border-radius: 5px;
}

img 
{
	border: 0px;
}

hr {
	border: 0px;
	color: black;
	background-color: black;
	height: 1px;
}


.center {
	text-align: center;
}
.center table {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.center th {
	text-align: center;
}

.newsdate {
	font-size: smaller;
	font-style: italic;
	color: #6666cc;
	background-color: transparent;
}

li {
	padding-top: 3px;
	padding-bottom: 3px;
	list-style-type: none;
}

em {
	font-weight: bold;
	font-style: italic;
}

.img_compte {
  width: 700px;
  height: auto;
  margin: 5px;
  border: 6px solid black; 

}

/* Sélection affiché, mais qui ne s'imprime pas */
#headsel {
}

#message {
}

#ContratMAJsous {
float:right;
/* width:300px;  Width of the box - may or may not be necessary*/
/* margin:-5px 0 0 0; /* positions the box next to the other. This will have to be adjusted depending on the LeftBox.*/
}


/* Header navigation area ------------------------------------------------- */

#headnav {
	color: white;
	background-color: #5e6375; /* #9999cc; */
	top: 0px;
	height: 90px;
	left:0px;
	right:0px;
	position: relative;
	font-size: 180%;
}

#headmenu {
	position: absolute;
	bottom: 0px;
	right: 0px; 
	text-align: right;
	padding-left: 8px;
	font-size: 18px;
	color: black;
	background-color: #eeeeff; /* #FFFFFF; */
	
}	 


/* Ajax Tooltip..... */
/* If you don't want the arrow - Just set the width of this div to 1 or something like that and drop the background selectors from the CSS below */
#ajax_tooltipObj{
	z-index:1000;
	text-align:left;
}
#ajax_tooltipObj div{
	position:relative;
}


#ajax_tooltipObj div.row { position: absolute; } /* SI on fait de Row et Col dans in toolti, il faut revenir absolute */ 
#ajax_tooltipObj div.col { position: absolute; }


/* If you don't want the arrow - Just set the width of this div to 1 or something like that and drop the background selectors from the CSS below */

#ajax_tooltipObj .ajax_tooltip_arrow{	/* Left div for the small arrow */
	background-image:url('../images/tooltip_arrow.gif');
	width:20px;
	position:absolute;
	left:0px;
	top:0px;
	background-repeat:no-repeat;
	background-position:center left;
	z-index:1005;
	height:60px;
}

#ajax_tooltipObj .ajax_tooltip_content{
	border:2px solid #317082;	/* Border width */
	left:18px;	/* Same as border thickness */
	top:0px;
	position:absolute;
	/* width:150px;	/* Width of tooltip content */
	/* height:200px;	/* Height of tooltip content */
	background-color:#FFF;	/* Background color */
	padding:5px;	/* Space between border and content */
	//font-size:0.8em;	/* Font size of content */
	overflow:auto;	/* Hide overflow content */
	z-index:1001;
	resize:both;
}

/* ********** pour QR CODE sgo/qrcode */

table.qr
{
	border-collapse: collapse;
	border: solid 1px black;
	table-layout: fixed;
}

table.qr td
{
	width: 5px;
	height: 5px;
	font-size: 2px;
}

table.qr td.on
{
	background: #000000;
}

/* ********** FIX Header table only CSS  apply fht1 style to table..must have thead & tdoby */
.fht1 {
  border: 0;
  border-collapse: collapse;
}

.fht1 tr {
  display: flex;
}

.fht1 td {
  padding: 3px;
  flex: 1 auto;
  border: 1px solid #aaa;
  width: 1px;
  word-wrap: break;
}

.fht1 thead tr:after {
  content: '';
  overflow-y: scroll;
  visibility: hidden;
  height: 0;
}

.fht1 thead th {
  flex: 1 auto;
  display: block;
  border: 1px solid #000;
}

.fht1 tbody {
  display: block;
  width: 100%;
  overflow-y: auto;
  height: 200px;
}

# Calendrier employer pour choisir vacance
.calendar, .calendar table {
	border: 0;
	margin: 0;
}
.calendar, .calendar table, .calendar td {
	text-align: center;
}
.calendar .year{
	font-family:Verdana; 
	font-size:18pt; 
	color:#000000;
}
.calendar .month{
	width: 25%;
	vertical-align: top;
}
.calendar .month table{
	font-size:10pt;
	font-family:Verdana;
}
.calendar .month th{
	text-align: center;
	font-size:12pt;
	font-family:Arial;
	color:#666699;
}
.calendar .month td{
	font-size:10pt;
	font-family:Verdana;
}
.calendar .month .days td{
	color:#666666;
	font-weight: bold;
}
.calendar .month .sat{
	color:#0000cc;
}
.calendar .month .sun{
	color:#cc0000;
}
.calendar .month .today{
	border: 3px solid black;
	color: #000000;
}
.calendar .month .cal_vac{
	background:#1ae58f;
	color: #000000;
}
.calendar .month .cal_con{
	background:#6fadd8;
	color: #000000;
}
.calendar .month .cal_pat{
	background:#ff8e5d;
	color: #000000;
}
.calendar .month .cal_trav{
	background:#e51a70;
	color: #ffffff;
}
.calendar .month .cal_ferie{
	background:#bbbbbb;
	color: #000000;
}
.calendar .month .cal_pto{
	background:#f3ff9d;
	color: #000000;
}

/* Spinner durant ajax call https://www.codewall.co.uk/add-jquery-ajax-loading-spinners-to-your-website/ */
.lds-dual-ring {
  display: inline-block;
  width: 30px;
  height: 30px;
}

.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 15px;
  height: 15px;
  margin: 2px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

.lds-dual-ring.hidden {
        display: none;
    }

   /*Add an overlay to the entire page blocking any further presses to buttons or other elements.*/
.overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0,0,0,.8);
        z-index: 999;
        opacity: 1;
        transition: all 0.5s;
    }
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}