/*
class <-> .
id <-> #
*/
@font-face {
	font-family: 'Akashi';
	src: url("/fonts/akashi-webfont.eot") format("eot");
	src: url("/fonts/akashi-webfont.eot?#iefix") format("embedded-opentype"),
		 url("/fonts/akashi-webfont.woff") format("woff"),
		 url("/fonts/akashi-webfont.ttf") format("truetype"),
		 url("/fonts/akashi-webfont.svg#akashi") format("svg");
	font-weight: normal;
	font-style: normal;
}

#bloc-page {
	margin: 0px;
	padding: 0px;
	outline: 0px;
	/* It is possible to fix a background-color, but it will only be applied to the inside part of the page,
	without the space covered by the padding :
	background-color: rgb(207,213,167);*/
	color: rgb(122, 67, 0); /*#7a4300*/
	box-sizing: border-box;
	height: 100%; /*% of container dimension (body, div, nested div...) in which the element is displayed*/
}

#content {
	padding-top: 0px;
}

body {
	/* Complete screen can receive a backgrournd-image (e.g. color gradient...) */
	/* Interesting to use a radial gradient : in case of image exceeding the display size, gradient repeats smoothly */
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cfd5a7+0,c1c991+40,acb76f+100 */
	background: rgb(207,213,167); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, rgb(207,213,167) 0%, rgb(193,201,145) 40%, rgb(172,183,111) 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover, rgb(207,213,167) 0%,rgb(193,201,145) 40%,rgb(172,183,111) 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center, rgb(207,213,167) 0%,rgb(193,201,145) 40%,rgb(172,183,111) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfd5a7', endColorstr='#acb76f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	/*to allow space for top nav-bar it is necessary to create some top-padding*/
	padding: 50px;
}

header {
	display: block;
	margin: 0px;
	padding: 0px;
	outline: 0px;
	box-sizing: border-box;
	height: 15%;
}

footer {
	display: block;
	border-top: 1px solid #ccc;
	margin: 0px;
	padding: 0px;
	outline: 0px;
	box-sizing: border-box;
	padding-top: 10px;
	text-align: center;
}

section {
	display: block;
	margin: 0px;
	padding: 0px;
	outline: 0px;
	box-sizing: border-box;
	height: 85%;
}

/* logo GP, affiché dans le coin supérieur gauche------------------------------------------*/
#logoGP
{
	font-family: 'Akashi', Arial, Verdana, sans-serif;
	color:rgb(249, 223, 19);
	text-shadow: 4px 4px 4px rgb(160, 149, 61);
}

#logoGP .G_de_logo
{
	font-size: 32px;
	text-align:left;
	position:relative;
	left: 0px;
	top: -5px;
}
	
#logoGP .P_de_logo
{
	font-size: 32px;
	text-align:left;
	position:relative;
	left: -20px;
	top: 3px;
}

/* logo IMS by GPSpec, affiché en haut du menuS et fixe sur la page -----------------------*/
#logoIMS {
	display: inline-block;
	box-sizing: border-box;
	height: 100%;
	vertical-align: top;
	font-family: 'Akashi', Arial, Verdana, sans-serif;
	color:rgb(249, 223, 19);
	text-shadow: 6px 6px 6px rgb(160, 149, 61);
	width: 10%;
	position: fixed; /* stay in place on scroll */
	z-index: 1; /* Stay on top */
	top: 0; /* Stay at the top */
	left: 0;
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 50px;
	padding-left: 20px;
}

.logo_main {
	font-size: 56px;
	text-align:left;
}
	
.logo_secondary {
	font-size: 14px;
	text-align:left;
	position: relative;
	left: 50px;
	top: -10px;
}

/* logo IMS by GPSpec, affiché dans le footer ---------------------------------------------*/
.IMS_small {
	font-family: 'Akashi', Arial, Verdana, sans-serif;
	color:rgb(249, 223, 19);
	text-shadow: 6px 6px 6px rgb(160, 149, 61);
	font-size: 1.5em;
}

.GPSpec_small {
	font-family: 'Akashi', Arial, Verdana, sans-serif;
	font-size: 0.5em;
}

/*-----------------------------------------------------------------------------------------*/
#menuP {
	display: inline-block;
	box-sizing: border-box;
	height: 100%;
	vertical-align: top;
	width: 99%;
	left: 5%;
}

#menuS {
	display: inline-block;
	box-sizing: border-box;
	height: 100%;
	vertical-align: top;
	width: 5%;
	border-radius: 10px;
	margin-left: 3px;
}

#main {
	display: inline-block;
	box-sizing: border-box;
	height: 100%;
	vertical-align: top;
	width: 95%;
	border-radius: 10px;
	margin-left: 7.5%;
	margin-top: -2%;
}

#loader {
  border: 10px solid #f3f3f3;/*initially a 10px thick grey square*/
  border-radius: 50%;/*transform the square into a circle*/
  border-top: 10px solid #3498db;/*makes the top part of the "square" blue*/
  width: 35px;/*width of the form*/
  height: 35px;/*height of the form*/
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  visibility: hidden;/*initialy not displayed*/
  display: inline-block;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*#containerMenuNavP {
	padding: 5px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}
*/
/*#containerMenuNavS {
	padding: 0px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	border: 1px red solid;
}
*/
/*special for starting page-----------------------------------------------------------------------------------*/

.hello {
	box-sizing: border-box;
	text-align: center;
	font-size: 2em;
	font-weight: 600; /*between normal (=400) and bold (=700)*/
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 90%;
}
/*-----------------------------------------------------------------------------------------*/

.topnav {
  position: fixed; /* Fixed navbar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 50; /* Stay at the top */
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 0px;
  padding-left: 0px;
}


.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 15; /* Stay at the top */
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

#logo .Spec_de_logo
{
	font-size: 78px;
	text-align:left;
	position: relative;
	left: -53px;
	top:20px;
	font-size:24px;
}


.GPSpec {
	font-family: 'Akashi', Arial, Verdana, sans-serif;
}

.IMS {
	font-family: 'Akashi', Arial, Verdana, sans-serif;
	color:rgb(249, 223, 19);
	text-shadow: 6px 6px 6px rgb(160, 149, 61);
	font-size: 3em;
}

/*tables, in general----------------------------------------------------------------------------*/

.inputfield {
	background-color: rgb(255, 242, 204);
}

table {
	font-family: Arial, Verdana, sans-serif;
 	border-collapse: collapse;
	width: 100%;
	table-layout: fixed; /*Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells*/
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
}

.noLeftBorder {
    border-left-style: none;
}

.noRightBorder {
    border-right-style: none;
}

.nodisplay {
	display: none;
}

.divider {
  height: 0.1px;
  width:100%;
  display:block; /* for use on default inline elements like span */
  margin: 0px 0px;
  overflow: hidden;
  border-color: #337ab7;/* same as color for bootstrap .#337ab7 */
}

.inter2 {
	width: 0.2%;/*width + border must no be more than 100%*/
/*	background-color: rgb(196,215,155);*/
	background-color: transparent;
}

tr.selected {
	background-color: rgb(172,183,111); /*#acb70b*/
	background-color: #78804e; /*30% plus sombre*/
}

table textarea {
	width: 100%;/*width + border must no be more than 100%*/
	height: 100%;
	border: none;
  margin: 0px 0px 1px 0px;
  padding: 1px 2px;
  -webkit-padding-before: 3px;
  -webkit-padding-end: 2px;
  -webkit-padding-after: 3px;
  -webkit-padding-start: 2px;
}

table input[type='text'] {
	width: 100%;/*width + border must no be more than 100%*/
	height: 100%;
	border: none;
  margin: 0px 0px 1px 0px;
  padding: 1px 2px;
  -webkit-padding-before: 3px;
  -webkit-padding-end: 2px;
  -webkit-padding-after: 3px;
  -webkit-padding-start: 2px;
}

table select {
	width: 100%;/*width + border must no be more than 100%*/
	height: 100%;
	border: none;
  margin: 0px 0px 1px 0px;
  padding: 4px 2px;
  -webkit-padding-before: 3px;
  -webkit-padding-end: 2px;
  -webkit-padding-after: 3px;
  -webkit-padding-start: 2px;
}

.W50 {
	width: 50%;
}

.W20 {
	width: 20%;
}

/*particular tables-----------------------------------------------------------------------------*/
table.table_listOfAFIs tr.filter_data td {
	border: 1px solid #555;
	border-top-style : none;
	border-bottom-style : none;
}




table.table_AFIs textarea {
	width: 90%;
}

table.table_AFIs input[type='text'] {
	width: 90%;
}

table.table_AFIs select {
	width: 90%;
}

tr.opportunity_for_action {
	background-color: rgb(255,140,140);
}

tr.planned_action {
	background-color: rgb(255,211,71);
}

tr.progress_in_action {
	background-color: rgb(171,219,119);
}

.opportunity_for_action select {
	background-color: rgb(255,255,255);
	width:170px;
	height:30px;
}

.tableOfObservations select {
	background-color: rgb(255,255,255);
	width:205px;
	height:70px;
}

.customerManagement select {
	width:205px;
}

table.table_RiskDetails textarea {
	width: 100%;
	height: 100%;
	border: none;
  padding: 1px 2px;
  -webkit-padding-before: 3px;
  -webkit-padding-end: 2px;
  -webkit-padding-after: 3px;
  -webkit-padding-start: 2px;
}

table.table_RiskDetails input[type='text'] {
	width: 100%;
	height: 100%;
	border: none;
  padding: 1px 2px;
  -webkit-padding-before: 3px;
  -webkit-padding-end: 2px;
  -webkit-padding-after: 3px;
  -webkit-padding-start: 2px;
}

table.table_RiskDetails th, td {
	border: none;
}

table.table_RiskList textarea {
	width: 100%;
	height: 100%;
	border: none;
  padding: 1px 2px;
  -webkit-padding-before: 3px;
  -webkit-padding-end: 2px;
  -webkit-padding-after: 3px;
  -webkit-padding-start: 2px;
}

/*QSE buttons-----------------------------------------------------------------------------*/
.btn-QSE {
/*	#080808 = 8,8,8
	#3c3c3c = 60,60,60
	#9d9d9d = 157,157,157
*/
	background-color: rgb(50,50,50);
	border-color: rgb(80,80,80);
	color: rgb(80,80,80);
	border-radius: 25%;
}

.btn-QSE:focus {
	color: rgb(80,80,80);
}

.btn-QSE.active {
	background-color: rgb(80,80,80);
	border-color: rgb(120,120,120);
	color: rgb(157,157,157);
	border-radius: 25%;
}

.btn-QSE:hover
 {
	color: rgb(255,255,255);
	font-weight: bold;
}

/*table row for adding new items-----------------------------------------------------------------------------*/
.addNewItems {
	background-color: rgb(158, 166, 98);
	border-top: 4px solid rgb(41,68,6);
}

.addNewItems textarea {
	background-color: rgb(196,215,155);
}

/*make list items in drop downs wrap and add a border to separate items------------------------------------*/
.dropdown-menu-wrap > li > a {
  white-space: normal;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
}

/*blinking by background change----------------------------------------------------------------------------*/
.bgdblink {
	background-color: #e7e7e7;/*for some unknown reason Chrome and Edge (and others ?) need heere an instruction like backgournd or border ...*/
	-webkit-animation:	blinkingbackground 1s  infinite; /* Safari 4+ */
	-moz-animation:		blinkingbackground 1s  infinite; /* Fx 5+ */
	-o-animation:		blinkingbackground 1s  infinite; /* Opera 12+ */
	animation:			blinkingbackground 1s  infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes blinkingbackground {
	0%   {background-color: #e7e7e7; /* Gray*/}
	50%  {background-color: #4CAF50; /* Green */}
	100% {background-color: #e7e7e7; /* Gray*/}
}
@-moz-keyframes blinkingbackground {
	0%   {background-color: #e7e7e7; /* Gray*/}
	50%  {background-color: #4CAF50; /* Green */}
	100% {background-color: #e7e7e7; /* Gray*/}
}
@-o-keyframes blinkingbackground {
	0%   {background-color: #e7e7e7; /* Gray*/}
	50%  {background-color: #4CAF50; /* Green */}
	100% {background-color: #e7e7e7; /* Gray*/}
}
@keyframes blinkingbackground {
	0%   {background-color: #e7e7e7; /* Gray*/}
	50%  {background-color: #4CAF50; /* Green */}
	100% {background-color: #e7e7e7; /* Gray*/}
}

/*autoclomplete-----------------------------------------------------------------------------------------*/
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
/*input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}
*/
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  /*
  top: 100%;
  left: 0;
  right: 0;
  */
}
.autocomplete-items div {
  /*padding: 10px;*/
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

.modal
{
	/*necessary to manage the good display of successive modals in a same page*/
  overflow: auto !important;
}