/* ===================== */
/* POLICES DE CARACTERES */
/* ===================== */

@font-face {
    font-family: 'TheMixBold';
    src: url('../typos/TheMixBold-Plain.otf') format('truetype');
}
@font-face {
    font-family: 'TheMixSemiBold';
    src: url('../typos/TheMixSemiBold-Plain.otf') format('truetype');
}
@font-face {
    font-family: 'HelveticaLight';
    src: url('../typos/HelveticaNeueLTStd-Lt.otf') format('truetype');
}
@font-face {
    font-family: 'HelveticaRoman';
    src: url('../typos/HelveticaNeueLTStd-Roman.otf') format('truetype');
}
@font-face {
    font-family: 'HelveticaMedium';
    src: url('../typos/HelveticaNeueLTStd-Md.otf') format('truetype');
}

/* =================== */
/*  GENERALITES HTML   */
/* =================== */


	body {
		padding-top: 100px; /* Padding à 100px pour éviter d'avoir des éléments sous la barre de navigation (si texte) */
		background-color: white; /* Couleur de fond, gris */
		font-family: HelveticaRoman, Arial, serif;
		color: #707070;
    font-size: 16px;
	}


	h1 {
		margin-top: 30px;
		margin-bottom: 30px;
		font-family: TheMixBold, Arial, serif;
		color: #FF5600;
	}

  /* .search {
    font-size: 48px;
  } */

	h4 {
		font-family: TheMixSemiBold, Arial, serif;
		color: #FF5600;
	}

  h5 {
		font-family: TheMixSemiBold, Arial, serif;
		color: #7D8AAE;
    	font-size: 18px;
	}

	em {
		text-decoration: underline;
	}

	/* Assure une hauteur minimum à chaque page.*/
	.container-principal {
		min-height: 700px;
	}

	/* Correction du padding automatique lié au col-sm
	Notamment pour les titres de sections et pour gagner de la place à certains endroits */
	.padding_corr {
		padding-left: 0px;
		padding-right: 0px;
	}

	hr {
		background-color: #FF5600;
		height: 2px;
		width: 75%;
		border: none;
	}

  .italic {
    font-style: italic;
  }
/* Ajout d'une classe triangle pour les triangles oranges des listes */
.triangle{
    list-style-type: none;
}
.triangle:before {
    content: "";
    border-color: transparent #FF5600;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;

}

/* Etoile qui marque les champs obligatoires */
.star {
  margin-left: 5px;
  color: red;
  font-size: 20px;
  font-weight: bold;

}

/* ================ */
/*  CONTROLES BOT   */
/* ================ */


	/* Champ caché en CSS pour lutte anti-bot */
	.hp {
		display: none;
	}

	/* Label associé à la case à cocher nobot - Pour le login */
	.lab_bot_login {
		margin-left: 10px;
		margin-top: 20px;
		margin-bottom: 20px;
		color: black;
	}

	/* Label associé à la case à cocher nobot - Pour le reste */
	.lab_bot {
		margin-left: 10px;
		margin-top: 20px;
		margin-bottom: 20px;
	}


/* =============================== */
/*  ERREURS VALIDATE (plugin JS)   */
/* =============================== */

	/* Classe d'erreur définie par le plugin Validate - Pour le Login */
	.my-error-class_login{
		margin-top: 5px;
		color: #a11a02;
		font-weight: bold;
		
	}

	/* Classe d'erreur définie par le plugin Validate - Pour le reste */
	.my-error-class{
		margin-top: 5px;
		color: #a11a02;
		font-weight: bold;
	}

	.my-error-class-search{
		margin-top: 5px;
		display: block;
		color: #a11a02;
		font-weight: bold;
	}


/* ======================= */
/*  BARRE DE NAVIGATION    */
/* ======================= */

	

	/* Couleur de la barre de navigation */
	.navbar-inverse {
		background-color: #7D8AAE;
    	height: 5%;
		border-color: #6e7a9b;
	}

	/* Titre - Définition de la couleur et de la taille */
	.navbar-inverse .navbar-brand {
		color: #7D8AAE;
		font-size: 22px;
		font-weight: bold;
		font-variant: small-caps;
	}

	/* Menu - Définition de la couleur */
	.navbar-inverse .navbar-nav > li > a {
		color: white;
		font-family: HelveticaMedium, arial, serif;
    	font-size: 18px;
	}

	/* Au passage de la souris */
	.navbar-inverse .navbar-nav > li > a:hover,
	.navbar-inverse .navbar-nav > li > a:focus{
		color: black;
		opacity: 0.8;
	}

	.navbar-inverse .navbar-nav > li.dropdown {
		margin-right: -10px;
	}

	/* Sous-menus*/
	.navbar-inverse .navbar-nav > .open > a,
	.navbar-inverse .navbar-nav > .open > a:hover,
	.navbar-inverse .navbar-nav > .open > a:focus {
		color: #7D8AAE;
		background-color: white;
	}

	/* Menu déroulant */
	.dropdown-menu,
	.dropdown-menu > li > a {
		background-color: white;
		font-family: HelveticaRoman, arial, serif;
		color: #7D8AAE;
    font-size: 18px;
	}

	/* Sous-sous-menus */
	.dropdown-submenu{
		position:relative;
	}
	.dropdown-submenu>.dropdown-menu{
		top:0px;
		left:100%;
		margin-top:-6px;
		margin-left:0px;
		-webkit-border-radius:0 6px 6px 6px;
		-moz-border-radius:0 6px 6px 6px;
		border-radius:0 6px 6px 6px;
	}

	.dropdown-submenu:hover>.dropdown-menu{
		display:block;
	}

	.dropdown-submen >a:after{
		display:block;content:" "
		;float:right;width:0;
		height:0;
		border-color:transparent;
		border-style:solid;
		border-width:5px 0 5px 5px;
		border-left-color:#cccccc;
		margin-top:5px;
		margin-right:-10px;
	}

	.dropdown-submenu:hover>a:after{ border-left-color:#ffffff; }

	.dropdown-submenu.pull-left{ float:none; }

	.dropdown-submenu.pull-left>.dropdown-menu{
		left:-100%;
		margin-left:10px;
		-webkit-border-radius:6px 0 6px 6px;
		-moz-border-radius:6px 0 6px 6px;
		border-radius:6px 0 6px 6px;
	}

  /* #navbar-title{
    color:white;
    background-color: #7D8AAE;
    border-left: solid 1px black;
    border-right: solid 1px black;
    border-bottom: solid 1px black;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    margin: 50px;
    width:20%;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

  } */

  #navbar-title {
	color: white;
	background-color: #7D8AAE;
	border-radius: 50px;
	border-bottom-right-radius: 50px;
	margin: auto;
	margin-top: 20px;
	width: 20%;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.24);
	padding: 5px;
  }

/* ==================== */
/*  FORMULAIRE LOGIN    */
/* ==================== */


	/* Menu déroulant sur la barre de navigation */
	#loginForm{
		margin-right: 2px;
		border: 2px solid black;
		border-radius: 6px;
	}

	#loggedForm > a{
		color: black;
		padding-top: 15px;
	}

	#loggedForm > a:focus{
		color: black;
	}


	.icheckbox_flat-green{
		border: thin solid;
	}

  /* Bouton de base */
  	.bouton{
		background:#FF5600;
		color:white;
		margin: auto;
		border: 2px solid white;
    	font-family: "HelveticaMedium", helvetica, arial, sans-serif;
		font-size: 20px;
		font-weight: bold;
		padding: 9px 20px ;
		text-align: center;
		height: 50px;
		border-radius: 12px;
  	}

  	.bouton:hover{
		background: white;
		color: #FF5600;
		border: 2px solid #FF5600;
  	}

	/* Boutons en haut à droite */
	/* #connect_button {
    border-radius: 0px;
		border-bottom-left-radius: 50px;
	} */
	#connect_button {
		border-radius: 20px;
		margin: 5px;
		font-size: 18px;
		height: 40px;
		text-align: center;
		display: inline-block;
		vertical-align: middle;
		padding: 5px;
		padding-right: 20px;
		padding-left: 20px;
	}
	#connect_button:hover {
		background-color: #ff732c;
		color: white;
		border-color: white;
	}
	#connect_button:hover {
		background-color: #ff732c;
		color: white;
		border-color: white;
	}

	/* Message qui s'affiche en cas de connexion interdite (bot par exemple ou javascript défaillant et mauvais ID)*/
	#error_connection {
		margin: auto;
		text-align: center;
		vertical-align: middle;
		width: 400px;
		color: red;
		font-weight: bold;
		margin-bottom: 10px;
		margin-top: 10px;
	}

  	button {
		margin-left: 10px;
		background:#FF5600;
		color:white;
		margin: auto;
		border: 2px solid #FF5600;
    	font-family: "HelveticaMedium", helvetica, arial, sans-serif;
		font-size: 20px;
    	border-radius: 6px;
	}

  button:hover {
    background: white;
    color: #FF5600;
    border: 2px solid #FF5600;
  }

  button .glyphicon{
    top:4px;
  }
/* ================ */
/*  PIED DE PAGE    */
/* ================ */

	.footer {
		position: absolute;
		bottom: 0 px;
		width: 100%;
		/* Taille du footer */
		min-height: 50px;
		background-color: #7D8AAE;
		margin-top: 0px;
	}


	#logoBBEES, #logoMNHN, #logoIN2P3, #logoCNRS{
		max-width: 100%;
    height: auto;
    width: 80px;
	}

/* ============================== */
/*  MISE EN FORME DES TABLEAUX    */
/* ============================== */

	table {
		border-width: solid #7D8AAE;
		border-collapse: collapse;
		margin-top: 10px;
	}

	.td_alert {
		color : red;
		padding: 10px;
	}

	table button {
		margin-left: 10px;
    background:#FF5600;
    color:white;
		margin: auto;
		border: 2px solid #FF5600;
    font-family: "HelveticaMedium", helvetica, arial, sans-serif;
		font-size: 20px;
    border-radius: 6px;
	}

  table a {
    color: #FF5600;
  }

  table tbody tr td a {
    color: #FF5600;
  }

  table button:hover {
    background: white;
    color: #FF5600;
    border: 2px solid #FF5600;
  }

	.dataTables_scrollBody table select, table input, table textarea {
		margin-right:0px;
	}

	th {
		text-align: center;
    border-color: #7D8AAE;
	}

	.element_small {
		width: 50px;
	}

	.element_smallmed {
		width: 100px;
	}
	.element_medium {
		width: 150px;
	}Anisotremus

	.element_medlarge {
		width: 200px;
	}

	.element_large {
		width: 250px;
	}

	.element_xlarge {
		width: 350px;
	}

	.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
		padding: 4px;
   	}

	/* Pour les tables dynamiques sans bordure */
	.table_simple   {
		padding: 10px;
		width: 90%;
	}

	.table_simple  th  {
		font-size: 12px;
		text-align: left;
		padding-top: 0px;
		padding-bottom: 10px;
		padding-left: 15px;
		font-family: "HelveticaMedium",Helvetica,Arial,sans-serif;
	}

	.table_simple  td  {
		padding-bottom: 10px;
		padding-left: 15px;
		padding-right: 0px;

	}

	.bouton_add_site {
		padding: 1px 6px;
		margin-right: 10px;
		padding-bottom: 3px;
		margin-top: 6px;
	}

	.bouton_delete_site {
		padding: 1px 6px;
		margin-right: 10px;
		padding-bottom: 3px;
		margin-top: 6px;
		padding-right: 8px;
	}

	.bouton_add_nat_geo {
		padding: 1px 6px;
		margin-right: 10px;
		padding-bottom: 3px;
		margin-top: 6px;
		margin-left: 10px;
	}

	/* Alignement vertical des cellules */
	.table > tbody > tr > td {
		vertical-align: middle;
	}

  /* Alignement d'un élément hors d'un tableau aux éléments dans un <td> d'un tableau */
  .td_align {
    padding-left:12px;
  }

  .table_infos {
    border: solid #7D8AAE 1px;
    color: black;
    font-size: 16px;

  }

  .table_infos > thead {
    background-color: #7D8AAE;
    color:white;
  }

  .table_infos th {
  border: solid #7D8AAE 1px;
  }

  .table_infos .th-1 {
  border-right: solid white 1px;
  width: 30%;
  }

  .table_infos .th-2 {
  border-left: solid white 1px;
  width: 70%;
  }

  .table_infos td {
  border: solid #7D8AAE 1px;
  padding: 5px;
  }

  .table_infos > tbody > tr > td {
    text-align: left;
  }



/*========================================================================================================================================================= */
/*===================================================================  Dialog  ============================================================================ */
/*========================================================================================================================================================= */

	.dialog_label {
		margin-bottom: 20px;
	}

	.dialog_input {
		margin-bottom: 40px;
	}

	#email_message {
		height: 200px;

	}

  .modal {
    vertical-align: middle;
  }

  .modal-content {
    background:#7D8AAE;
    width: 400px;
    text-align: left;
    margin: auto;
    border-bottom-right-radius: 50px;
    border-top-left-radius: 50px;
    color: white;
    font-size: 20px;
  }

  .modal-content a {
    color: white;
    font-size: 16px;
  }

  .modal-content div {
    color: white;
    font-size: 16px;
  }

  .modal-footer {
    border-top: 0;
  }

  .modal-header {
    border-bottom: 0;
  }

  .modal-title {
    color: white;
  }

/*========================================================================================================================================================= */
/*===================================================================  Datatables  ======================================================================== */
/*========================================================================================================================================================= */

	/* CSS des tables-child*/
	.table-child {
		margin: auto;
		margin-top: 50px;
		margin-bottom: 50px;
		border: 1px #7D8AAE solid;
		width: auto;
	}

	/* Message qui s'affiche quand il n'y a pas de données dans les tables childs */
	.no-data {
		font-weight: bold;
		font-variant: small-caps;
	}

	/* Th des tables child - A changer en fonction du thèmes UI utilisé */
	.dt-th{
		font-weight: bold;
		color: #7D8AAE;
		text-align: center;
		font-variant: small-caps;
	}

	/* Bouton ColVis (visibilité) */
	.dt-button-collection{
		width: 220px !important;
		margin-top: 0px;
	}

	.boutons {
		margin-top: 10px;
		margin-bottom : 10px;
		margin-left : 7px;

	}

  /* Datatables boutons */
    .ui-buttonset button.ui-button-text-only {
      	background: none;
      	background-color:#FF5600;
      	color:white;
  		border: 2px solid white;
      	font-family: "HelveticaMedium", helvetica, arial, sans-serif;
  		font-size: 17px;
  		font-weight: bold;
  		padding: 3px 20px ;
  		text-align: center;
      	height: 50px;
      	border-radius: 12px;
    }

    .ui-buttonset .ui-button-text-only:hover {
      background: none;
      background-color:white;
      color: #FF5600;
  		border: 2px solid #FF5600;
    }

    .ui-buttonset .ui-button-text-only:hover .ui-button-text {
      background: none;
    }

    /* Boutons de parcours des résultats */
    .ui-buttonset a.ui-button{
      background: none;
      background-color:#FF5600;
      color:white;
  		border: 1px solid white;
      font-family: "HelveticaMedium", helvetica, arial, sans-serif;
    }

    .ui-buttonset a.ui-button:hover{
      background: none;
      background-color:white;
      color:#FF5600;
  		border: 1px solid #FF5600;
      font-family: "HelveticaMedium", helvetica, arial, sans-serif;
    }

	.ui-buttonset button.selectAll {
		background-color:white;
      	color:#626b85;
  		border: 2px solid #4e5366;
		width: 220px;
		font-size: 16px;
	}

	.ui-buttonset button.selectAll:hover {
		background-color:#ffffff;
      	color:#3b4152;
  		border: 2px solid #3b4152;
	}

  /* Datatables Recherche */
    .dataTables_filter label {
      font-family: "HelveticaMedium", helvetica, arial, sans-serif;
      font-size: 16px;
      color: white;

    }

    .dataTables_filter input {
      border-radius: 6px;
      height: 45px;
      border: 0px;
      color: #707070;
      /* align: center; */
      font-size: 16px;
    }

  /* Couleur des barres en haut et en bas de la datatable */
    .ui-toolbar {
      background: none;
      background-color: #7D8AAE;
    }

  /* Titre des colonnes */
    .dataTables_wrapper .dataTables_scroll .ui-state-default, thead > tr > .ui-state-default {
      background: none;
      color: #FF5600;
    }

    /* Liens dans les datatables */
    .ui-widget-content a {
      color:#FF5600;
    }

    .dt-button-collection button.ui-state-active {
      background: none;
      background-color:white;
      color:#FF5600;
  		border: 1px solid #FF5600;
      font-family: "HelveticaMedium", helvetica, arial, sans-serif;
    }



 /*******************************************************************************/
/* Partie réservée au switcher de couches - A placer après le reste du code pour un meilleur fonctionnement */

	.layer-switcher {
		position: absolute;
		top: 1em;
		right: 0.5em;
		text-align: left;
	}

	.layer-switcher .panel {
		padding-right: 50px;
		border: 1px solid #cccccc;
		background-color: white;
	}

	.layer-switcher .panel {
		display: none;
	}

	.layer-switcher.shown .panel {
		display: block;
	}

	.layer-switcher button {
		float: right;
		width: 38px;
		height: 38px;
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==') /*logo.png*/;
		background-repeat: no-repeat;
		background-position: 2px;
		background-color: rgba(0, 60, 136, 0.5);
		border: none;
	}

	.layer-switcher button:focus, .layer-switcher button:hover {
		background-color: rgba(0, 60, 136, 0.7);
	}

	.layer-switcher ul {
		padding-left: 1em;
		list-style: none;
	}

	.layer-switcher li{
		padding-top: 5px;
	}

	.layer-switcher li.group {
		padding-top: 5px;
	}

	.layer-switcher li.group > label {
		font-weight: bold;
	}

	input[type="checkbox"]{
		margin-right: 10px;
	}

	.layer-switcher  .buttonMyLayer{
		float: right;
		width: 38px;
		height: 38px;
				border: red;
	}


	/******************* LISTE POUR LES DONNES CLIMATIQUES ********************/

	.glyphicon.glyphicon-search {
		color: white;
	  }

	#climate_search b {
		color: white;
	}
	  
	.input-group-addon {
		background: #FF5600;
	}


/*============================================================================================================================================================================= */
/*======================================================================= Préparation des données  =========================================================================== */
/*============================================================================================================================================================================= */


.telechargement-fichier {
	font-size: 16px;
	font-weight: normal;
	width: 300px;
	word-wrap: break-word;
	white-space: normal;
	height: auto;
	margin: 50px;
	margin-top : 100px;
}

.telechargement {
	text-align: center;
}