:root {
	
  --color-primary-1: rgb(27, 98, 162);
  --color-primary-2: rgb(15, 40, 81);
  --color-primary-3: rgb(0, 39, 79);
  --color-alternate-1: rgb(225, 239, 255);
  --color-alternate-2: rgb(176, 214, 255); 
  --color-alternate-3: rgb(247, 251, 255); 
  
  --color-text-primary-0: #323232;
  --color-text-primary-1: white;
  --color-text-primary-2: var(--color-primary-3);
  
  --nav-link-color-main: var(--color-alternate-1);
  
  --background-primary:var(--color-alternate-3);
  --background-secondary:var(--color-alternate-1);
  --background-gradient:linear-gradient(var(--background-primary), var(--background-primary) 70%, var(--background-secondary) 100%) fixed;
  
  --table-highlight:var(--color-primary-1);
  --table-sort-asc:rgb(57, 27, 162);
  --table-sort-desc:rgb(15, 40, 81);
  --selection-border:var(--color-primary-3);
  --table-link-color:var(--color-primary-2);
   	
  --table-bg-color-1: var(--color-alternate-1);
  --table-bg-color-2: var(--color-alternate-2);
  --table-header-bg:var(--color-primary-1);
  --table-header-text:var(--color-text-primary-1);

  --header-gradient:linear-gradient(var(--color-primary-2) 0%, var(--color-primary-2) 60%, var(--color-primary-1) 100%);
  --header-gradient-webkit:-webkit-gradient(var(--color-primary-2) 0%, var(--color-primary-2) 60%, var(--color-primary-1) 100%);
  
  --team-header-background-color-1:rgba(206,220,231,1); /*grey*/
  --team-header-background-color-2:var(--color-primary-2);

  --nav-logo-url:url(../img/nav-logo.png);
 
}

/***** General style, all sections *****/

.fhlElement{  
	font-size: 15px; 
	font-family: 'Roboto','Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
	font-weight: 300; 
/* 	color: #888; */
	color: var(--color-text-primary-0);
	
}

body.fhlElement {  

	font-size: 15px; 
	font-family: 'Roboto',"Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
	font-weight: 300; 

	color: var(--color-text-primary-0);

	background: var(--background-primary);
	background: var(--background-gradient);
    
}

/*team banner and logo gradients*/
.team-header-content { 

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cedce7+9,596a72+100 */
    background: rgb(206,220,231); /* Old browsers */
    background: -moz-linear-gradient(top, var(--team-header-background-color-1) 9%, var(--team-header-background-color-2) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, var(--team-header-background-color-1) 9%,var(--team-header-background-color-2) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, var(--team-header-background-color-1) 9%,var(--team-header-background-color-2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72', GradientType=0); /* IE6-9 */

}


/*Base FHL element styling*/
.fhlElement strong { font-weight: 600; }

/*a { color: #4C96D7; text-decoration: none; transition: all .3s; }*/
.fhlElement a { text-decoration: none; transition: all .3s; } 

.fhlElement a:hover, a:focus { color: #856dc0; border: 0; text-decoration: none;   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);}

/* .fhlElement h1,h2,h3,h4,h5,h6{text-align: center; text-transform: uppercase;}  */

.fhlElement img { max-width: 100%; }

.fhlElement .medium-paragraph { font-size: 17px; line-height: 32px; }

::-moz-selection { background: #7762ac; color: #fff; text-shadow: none; }
::selection { background: #7762ac; color: #fff; text-shadow: none; }

.lien-blanc  {
font-size:10pt;
color:#ffffff;
text-decoration: none;
}
/* .lien-blanc:hover { */
/* font-size:10pt; */
/* color:#FFC741; */
/* text-decoration: none; */
/* } */
.lien-noir {
font-size:10pt;
color:#000000;
text-decoration: none;
}
.lien-noir:hover {
font-size:10pt;
color:#8B1F1C;
text-decoration: none;
}

.text-blanc {
color:#ffffff;
text-decoration: none;
}

.bold-blanc {
font-weight: bold;
color:#ffffff;
}

.fhlElement th:focus,
.fhlElement a:focus,
.fhlElement a:hover {
  outline-color: var(--selection-border); 
}

.tablesorter  th:hover{
	transition: all .3s;
	
	text-decoration: underline;
}

/*default Section header with gradient*/
.section-header {
	
	background: var(--header-gradient-webkit);
	background: var(--header-gradient);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7',
		endColorstr='#596a72', GradientType=0); /* IE6-9 */
    overflow: hidden;
    width: 100%;
    float: left;

	-moz-border-radius-bottom-right: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.square-bottom-border{
	-moz-border-radius-bottom-right: 0px;
	-webkit-border-bottom-right-radius: 0px;
	border-bottom-right-radius: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-bottom-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.section-header .header-container{ 
	background: var(--header-gradient-webkit);
    background: var(--header-gradient);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7',
		endColorstr='#596a72', GradientType=0); /* IE6-9 */
    text-align: center;
} 


.section-header .gloss {
	height: 20px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%,
		rgba(255, 255, 255, 0.5) 35%, rgba(255, 255, 255, 0.1) 100%);
		
}

.section-header .header {
    vertical-align: middle;
    display: flex;
    justify-content: center;
    font-size: 30px; 
    font-weight: 600; 
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    margin-top:-23px;

}

/***** Main Navbar  **** */

#main-navbar.navbar {
	background: #444;
	-o-transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s;
	-webkit-backface-visibility: hidden; 
	backface-visibility: hidden;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}
#main-navbar.navbar.navbar-no-bg { background: #444; background: rgba(0, 0, 0, 0.5); }

#main-navbar.navbar-dark .navbar-nav { font-size: 17px; color: #fff; text-transform: uppercase; }
#main-navbar.navbar-dark .navbar-nav .nav-link { color: #4C96D7; color: var(--nav-link-color-main); border: 0; }
#main-navbar.navbar-dark .navbar-nav .nav-link:hover { color: #fff; }
#main-navbar.navbar-dark .navbar-nav .nav-link:focus { color: #fff; outline: 0; }
#main-navbar.navbar-dark .navbar-nav .dropdown-menu .nav-item{text-align:right;}

#main-navbar.navbar-expand-lg .navbar-nav .nav-link { padding-left: 1rem; padding-right: 1rem; }

#main-navbar.navbar-dark .navbar-nav .nav-link-inner {color: #444; color: rgba(0, 0, 0, 0.8); border: 0;}
#main-navbar.navbar-dark .navbar-nav .nav-link-inner { padding-left: 1rem; padding-right: 1rem; }
#main-navbar.navbar-dark .navbar-nav .nav-link-inner { display:block; }
#main-navbar.navbar-dark .navbar-nav .nav-link-inner:hover { color: #444; }
#main-navbar.navbar-dark .navbar-nav .nav-link-inner:focus { color: #444; outline: 0;}
#main-navbar.navbar-expand-lg .navbar-nav .nav-link-inner { padding-left: 1rem; padding-right: 1rem; }

#main-navbar .navbar-brand {
	background: var(--nav-logo-url);
	background-repeat: no-repeat;
    background-position: left center;
	max-height: 35px;
	max-width: 150px;
	height: 35px;
	width: 150px;
	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
	border: 0;
	text-indent: -99999px;
}


#main-navbar .navbar-nav ul{
 line-height:1.5;
}


/***** Top content Main page *****/

.inner-bg { padding: 200px 0; }

.top-content{
	text-align: center;
}

/***** Section 1 Main page*****/
/* .section-1 .description { margin-top: 5px; padding-bottom: 5px;} */
/* .section-1 { margin-top: 10px; background-color: #D8D8D8; border-radius:10px; } */


/***** Header style *****/
.header-content .description { margin-top: 5px; padding-bottom: 5px;}
/* .header-content { margin-top: 67px; padding-bottom:10px; background-color: #D8D8D8; border-radius:10px; } */
.header-content { margin-top: 0px; padding-bottom:0px; background-color: #D8D8D8; border-radius:10px; }


/***** Logo header *****/
.logo-header { margin-bottom: 10px; background-color: #D8D8D8; border-radius:10px; }

/***** Footer support*****/
html, body.fhlElement { height:100%; }

body.fhlElement{
    display:flex;
    flex-direction:column;
    
}

.site-content{
    flex: 1 0 auto;
}

#page-footer.footer{
    flex-shrink: 0;
    background-color: #444;
    color:white;
}

#page-footer p {
    margin-top: 0;
    margin-bottom: 0rem;
}

/***** iFrame embeds *****/
.iframe-container {
  padding-top: 0%;
}

.iframe-container iframe {
   width: 100vw;
   height: 100vh;
}

/***** Bootstrap overrides *****/

.tooltip-arrow,
.tooltip > .tooltip-inner {
	background-color: var(--color-primary-2);
	color: white;
	opacity: 1;
  filter:alpha(opacity=100);
}

.fhlElement .btn-link {
	color: var(--color-primary-1);
}

.fhlElement .nav-link {
	color: var(--color-primary-1);
}

/* .custom-select:focus { */
/*   border-color: var(--color-primary-1); */
/*    box-shadow: none; */
/* } */

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.custom-select:focus:focus {   
  border-color: var(--color-primary-1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px var(--color-primary-2);
  outline: 0 none;
}

.fhlElement .form-control:focus {
  box-shadow: none;
}

/*bootstrap pagination overrides*/
.fhlElement .page-link {
    color: var(--color-primary-1);
}

.fhlElement .page-item.active .page-link {
    z-index: 1;
    color: var(--color-text-primary-1);
    background-color: var(--color-primary-1);
    border-color: var(--color-primary-2);
}

/*bootstrap button overrides*/

.fhlElement .btn-primary{color:#fff;background-color:var(--color-primary-1);border-color:var(--color-primary-2)}

.fhlElement .btn-primary:hover{color:var(--color-primary-1);background-color:var(--color-alternate-1);border-color:var(--color-primary-2)}
.fhlElement .btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(var(--color-primary-2),0.5)}
.fhlElement .btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:var(--color-primary-1);border-color:#005a5a}
.fhlElement .btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#00b3b3;border-color:#000}
.fhlElement .btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}


.fhlElement .btn-outline-primary{color:var(--color-primary-1);background-color:transparent;background-image:none;border-color:var(--color-primary-2)}
.fhlElement .btn-outline-primary:hover{color:#fff;background-color:var(--color-primary-1);border-color:var(--color-primary-2)}
.fhlElement .btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
.fhlElement .btn-outline-primary.disabled,.btn-outline-primary:disabled{color:var(--color-primary-1);background-color:transparent}
.fhlElement .btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#009a9a;border-color:var(--color-primary-1)}
.fhlElement .btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}


/*bootstrap table overrides*/


div .tableau-top{
	margin-bottom:5px;
	text-transform: uppercase;
	font-size: 1.25rem;
	font-weight: 500;
	background-color:var(--color-primary-1);
	color:var(--color-text-primary-1);
	text-align: center;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	margin-bottom:0px;

}



.fhlElement .table{
/* 	line-height:25px; not sure why i did this here */
	white-space:nowrap;
	border-collapse: collapse;
	width: 100%;
}

.fhlElement .table-sm{
 	line-height:20px; 
 }

.fhlElement .table-sm>tfoot td,
.fhlElement .table-sm>thead th{
	line-height:25px;
}

.fhlElement .table>tbody a { 
	color: var(--table-link-color); 
 	font-weight: 500; 
}


.fhlElement .table>tfoot td,
.fhlElement .table>thead th{
    background-color:var(--table-header-bg);   
    color:#ffffff;
}

.fhlElement .table{
	color: var(--color-text-primary-0); /*table text colour*/
}

.fhlElement .table td {
	font-size: 0.8rem; /*was 12 and 13*/
	margin: 0px;
}
.fhlElement .table th {
	font-size: 0.9rem;
 	margin: 0px; 
}


.fhlElement .table-striped>tbody>tr:nth-child(odd)>td, 
.fhlElement .table-striped>tbody>tr:nth-child(odd)>th {
   background-color: var(--table-bg-color-1);
 }

.fhlElement .table-striped>tbody>tr:nth-child(even)>td, 
.fhlElement .table-striped>tbody>tr:nth-child(even)>th {
    background-color: var(--table-bg-color-2);  
 }
 
.fhlElement .table > tbody > tr.tableau-top > td {
    background-color:var(--table-header-bg);  
    color:var(--table-header-text);  
}

.fhlElement .table > tbody > tr > td > a {
   display:block; 
   width:100%;
   transition: none;
}

.fhlElement .table>tbody a:hover,
.fhlElement .table>tbody a:focus { 
    filter:none;
    text-decoration: underline;
}


.fhlElement .table.fixed-column td,
.fhlElement .table.fixed-column th {
    padding-left: 0.2rem;
	padding-right: 0.2rem;
}

.fhlElement .table.fixed-column th:first-child,
.fhlElement .table.fixed-column td:first-child {
	position: sticky;
	left: 0px;
}

.fhlElement .table.fixed-column th a
{
  color:#ffffff;
}

.fhlElement table.table-sm>thead>tr>th{
	padding-left: 0.2rem;
	padding-right: 0.2rem;
}

/* rounded table */
.fhlElement .table-rounded th:first-of-type,
.fhlElement .table-rounded-top th:first-of-type {
  border-top-left-radius: 5px;
}
.fhlElement .table-rounded th:last-of-type,
.fhlElement .table-rounded-top th:last-of-type {
  border-top-right-radius: 5px;
}
.fhlElement .table-rounded tr:last-of-type td:first-of-type,
.fhlElement .table-rounded-bottom tr:last-of-type td:first-of-type  {
  border-bottom-left-radius: 5px;
}
.fhlElement .table-rounded tr:last-of-type td:last-of-type,
.fhlElement .table-rounded-bottom tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 5px;
}

.fhlElement .table-rounded-bottom>thead th{
	background:var(--table-header-bg);  
}

/* needs to be last part of rounded */
.fhlElement .table-hover>tbody>tr:hover td,
.fhlElement .table-hover>tbody>tr:hover td>a{
	  background-color: var(--table-highlight);
	  color:var(--color-text-primary-1);
}

/*table sorter*/
.tablesorter th[aria-sort="descending"]{
  background-color:var(--table-sort-desc);  
}

.tablesorter th[aria-sort="ascending"]{
  background-color:var(--table-sort-asc);  
}

.tablesorter th{
	cursor:pointer;
}

/*Datatables overrides*/
.fhlElement .dataTable > thead > tr > th[class*="sort"]:after{
    content: "" !important;
    background-color:var(--table-sort-desc);  
}
.fhlElement .dataTable > thead > tr > th[class*="sort"]:before{
    content: "" !important;
    background-color:var(--table-sort-desc);  
}

.fhlElement .dataTable th.sorting_desc{
  background-color:var(--table-sort-desc);  
}

.fhlElement .dataTable th.sorting_asc{
   background-color:var(--table-sort-asc);  
}

.fhlElement table.dataTable.table-sm>thead>tr>th{
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

/* fixes dt alignment issue with table-sm */
.fhlElement .table-sm-px tr th, .table-sm-px tr td {
	 padding: 5px;
}

/* Table hover */
.fhlElement a.info {
  position:relative;
  text-decoration: none; 
  color:white;
}
.fhlElement a:hover.info {
  text-decoration: none;
  background: none;
/*   color:#FFC741; */
}
.fhlElement a.info span {display: none;}
.fhlElement a:hover.info span {
  display: inline;
  position: fixed; 
  bottom:15px;
  left:1px;
  z-index: 20;
  background:#00A7FE;
  color: white;
  border:1px solid #000;
  text-align:center;
  font-size: 10px;
  line-height:12px;
  padding:2px 6px;
/*   width:100px; */
}

/* Other table styling*/
.fhlElement .tableau {
	border-collapse: collapse;
	width:100%;
}

.fhlElement .tableau-top td{
	font-size: 12px;
	font-weight: 400;
}