:root{
	--dataDico-000: #133552;
}
.row {
	margin-top: 20px;
	display: flex;
  align-items: center;
}
.row_start{
	margin-top: 0;
}
.hidden{
	visibility: hidden !important;
}

/* TITRES ET TEXTE */
p{
	color:var(--dark-100)
}
.titre {
	margin-top: 30px;
	margin-bottom: 20px;
}
h1{
	font-size: 60px;
}
h2{
	font-size: 40px !important; 
}
.bold {
	font-weight: bold;
}
.medium {
	font-weight: medium;
}
.btn-secondary:focus{
	box-shadow: none;
}


/* FOND ECRAN IMAGE */
#background_picture{
	background-image: url('images/Fond_ecran.png');
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
#background_picture::before { /* Rajoute une couche de Blanc semi-transparent */
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(225, 225, 225, 0.2);
}


/* BOUTONS AJUSTEMENTS */
.btn-sel_bibli { /*Boutons carrés tri table variables*/
	border-radius: 7px;
	padding: 10px;
	padding-top: 1px;
	padding-bottom: 1px;
	margin-left: 5px;
}
.btn-sel_bibli.active{
	background-color: var(--primary-100);
	color: var(--white);
}
.btn-primary{
	display: flex;
  align-items: center;
	color: var(--white) !important;
}
.btn-primary:focus{
	background-color: var(--primary-000);
	border-color: var(--primary-000);
}
.btn-primary:hover{
	border-color: var(--primary-000);
}
.btn-primary p{
	color: white;
	margin-bottom: 0px;
}
.btn-secondary p{
	margin-bottom: 0px;
}
.btn-secondary:hover p{
	color: white;
}
.btn-icone{
	background-color: var(--secondary-100);
	color: var(--dark-100);
	width: 35px !important;
	height: 35px !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* BOUTON SWITCH CUSTOM*/
.custom_switch_div{
	border-radius: 50px;
	background-color: var(--secondary-100);
	border: 4px solid var(--secondary-100); 
	padding: 0px 5px;
	width: fit-content;
	height: fit-content;
	position: absolute;
	visibility: visible;
}
.switch_variables{
	top: 170px;
}
.switch_tables {
	top: 0;
}

.custom_switch_div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 45%;
  background: var(--dataDico-000);
  transition: transform 0.5s ease;
  border-radius: 50px;
  z-index: 1;
}
.switch_variables.active::before {
  transform: translateX(80%);
	width: 55%;
}
.switch_tables.active::before {
  transform: translateX(80%);
	width: 55%;
}
.switch_tables{
	position: relative;
}

/* petits details de css pour le switch de page explo table */
.custom_switch_div:has(#tables-switch_button_graph)::before{
  width: 42%;
}
.custom_switch_div.active:has(#tables-switch_button_graph)::before{
  transform: translateX(77%);
	width: 55%;
}
.switch_button {
	position: relative;
	border-radius: 50px;
	border: none;
	padding: 0px 5px;
	transition: color 0.3s;
	background: none;
	color: black;
	z-index: 2;
}
.switch_button:hover{
	background: none;
}
#moda_explo_1-switch_button_moda, #tables-switch_button_table{
	color: white;
}


/* PAGE ACCUEIL */
#accueil_gauche {
	margin-top: 30px;
	margin-left: 70px;
	padding-right: 100px;
}
#accueil_help_right{
	background-color: var(--dataDico-000);
	color: white;
	position: absolute;
	top: 15%;
	right: 0;
	padding: 110px;
	border-radius: 150px 0 0 150px;
}
#accueil_help_right h2{
	color: var(--secondary-100);
}
.accueil_texte {
	padding: 10px 5px;
	margin-bottom: 5px;
}
.accueil_info{
	width: 1000px;
  padding: 0;
}
.row_info{
	display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.div_boutons_accueil{
	margin-top: 40px;
}
.btn-accueil{
	background-color: var(--secondary-200);
	border: 1px solid var(--light-100);
	border-radius: 40px 0px;
	letter-spacing: 0.38px;
	color: var(--dark-100);
	text-transform: uppercase;
	margin-right: 40px;
	width: 30%;
	padding: 20px;
	font-weight: bold;
	display: flex;
}
.btn-accueil:hover{
	background-color: var(--secondary-300);
}
.col_icone_accueil {
	align-items: center;
	display: flex;
	justify-content: center;
}
.col_span_accueil{
	display: flex;
	text-align: left;
}

/*Element contact qui slide dans la page accueil*/
#slide_contact_div{
	background-color: var(--dataDico-000);
	color: var(--white);
	padding: 20px;
	border-radius: 0px 80px 0px 0px;
	width: 30%;
	height: 20%;
	position: fixed;
	left: 0;
	bottom: 0;
	transition: transform 0.5s ease-in-out;
}
#slide_contact_div.translation {
	transform: translateX(-100%); 
}
#accueil-slide_contact_button{
	color: var(--white);
	border: none;
	border-radius: 0px 30px 30px 0px;
	display: flex;
	position: absolute;
	left: 100%;
	bottom: 27%;
	padding-left: 11px;
}
#accueil-slide_contact_button:focus{
	background-color: var(--primary-100);
}
.mail_btn {
	margin-right: 7px;
}

#slide_contact_div h3{
	color: var(--white);
	margin-bottom: 15px;
}
.mail_lien{
	margin-left: 5px;
}
.mail_lien a{
	color: var(--secondary-100);
}


/* BARRE DE NAVIGATION */
nav.navbar > ul{
  display:none !important;
}
.navbar{
  height:inherit !important;
	width: 100%
}
.navbar .btn{
  padding: 0!important;
  padding-bottom: 10px;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent;
	margin: 0 40px;
}
.navbar .btn:hover{
  background-color:transparent;
  border-bottom: 2px solid var(--primary-100);
}
.navbar-item.btn.page_selected{
	color: var(--primary-100);
	border-bottom: 2px solid var(--primary-100);
	font-size: 25px;
}
.navbar_column_button{
	display: flex;
	justify-content: flex-start;
	padding-right: 50px;
}
.navbar-subtitle{
	font-size: 20px;
	color: var(--dark-100);
	margin: 0 10px;
	display: flex;
	justify-content: flex-end;
}


/* PAGE EXPLORATEUR DE VARIABLES*/ 
/*MODULE GAUCHE de la page*/
#col_gauche_explo_data, #col_gauche_explo_table{ 
	position: relative;
  top: 0;
  left: 0;
	padding: 5px;
}
/*Message d'erreur*/
#vars_explo-msg_erreur_annee {
	display: none;
	padding-left: 12px;
	margin: 0;
	color: red;
}
/* Premiers module de boutons à gauche*/
.recherche_generale{ 
	background: var(--light-100) 0% 0%;
	border: 1px solid var(--bluegrey-100);
	border-radius: 10px;
	margin: 0;
	height: 64px;
}
#vars_explo-var_dt .dataTables_filter input[type="search"]{
	background-color: var(--light-100);
  padding: 10px;
	border: none;
	border-radius: 10px;
	outline: none;
	font-size: 14px;
	position: absolute;
	top: -100px;
	left: 30px;
}
.icon-search{
	margin-left: 3px;
}
/*Boutons ronds*/
.column_btn_icone { 
	display: flex;
	justify-content: space-evenly;
}

/* Custom select des droits */
.select_droit{
	border-radius: 10px;
	z-index: 50;
}
.custom-select{
	padding: 0;
}
.selectedelement{
	padding: 2px 0 0 3px;
	width: 100%;
}
.select_droit::before, .custom-select::after, 
.selectedelement div::after{
	display: none;
}
.selectfilter{
	margin: 7px 0 0 10px;
	width: 100% !important;
	padding-left: 3px !important;
}
.selectedelement div{
	color: var(--dark-100);
	background-color: transparent;
	padding-left: 10px;
}
.dropdownarea{
	overflow-x: visible;
	overflow-y: visible;
}

/*Filtre sorting de la table*/
table thead .form-group input.form-control{
	background-color: var(--light-100);
	border: 1px solid var(--bluegrey-100);
	padding: 10px;
	border-radius: 10px;
	outline: none;
	font-size: 14px;
}
table thead td {
	padding: 0 10px 5px 0 !important;
}
table thead td:last-child {
	padding-right: 0 !important;
}

/*Bouton back to Top*/
.backToTop{
	display: none;
	position: fixed; 
	bottom: 65px; 
	right: 30.5%;
	z-index: 41;
	transition: all 0.2s ease;
}
.backToTop button {
	font-size: 35px !important;
	background-color: var(--primary-100);
	color: white !important;
	line-height: 0 !important;
	padding: 0 !important;
}
.backToTop button:hover{
	background-color: var(--primary-000);
}

/*Footer de la table*/
.btn-primary_important {
	background-color: var(--primary-100) !important;
	color: var(--white) !important;
	display: flex !important;
  align-items: center !important;
	border-radius: 50px !important;
	padding: 5px 15px !important;
}
.btn-primary_important:focus{
	background-color: var(--primary-000) !important;
	border-color: var(--primary-000) !important;
}
.btn-primary_important:hover{ 
	background-color: var(--primary-000) !important; 
}
.btn-primary_important i {
	padding-right: 5px;
}
.dataTables_wrapper {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	z-index: 45;
}
.dataTables_wrapper .dataTables_info{
	display: flex;
	justify-content: center;
}
.dataTables_wrapper div.dt-buttons{
	display: flex;
	justify-content: center;
	margin-top: 5px;
}
/*
table thead th {
	color: transparent;
}
th::before,
th::after {
color: black; 
display: block;
}*/


/* PAGE EXPLORATEUR DE VARIABLES*/ 
/*MODULE DROITE de la page*/
#fluidrow_moda_explo_data, .table_explo_right{
	position: fixed;
	top: 0;
	right: 0;
	padding: 15px;
	padding-top: 5%;
	height: 95%;
	width: 30%;
	margin-left: 10px;
  overflow-y: auto;
	border: 2px solid var(--dataDico-000);
	border-radius: 0 0 0 120px !important;
	background-color: var(--dataDico-000);
	color: white;
	display: flex;
	flex-direction: column;
	z-index: 40;
	transition: all 0.2s ease;
}
#fluidrow_moda_explo_data.expanded {
	width: 60%;
}
.expandModaDiv{
	display: none;
	position: fixed; 
	right: 30%; 
	top: 170px;
	z-index: 40;
	transition: all 0.2s ease;
}
.expandModaDiv button {
	border-radius: 30px 0 0 30px;
	font-size: 20px;
}
.expandModaDiv button:focus{
	background-color:  var(--secondary-100);
	border-color: var(--secondary-100);
	color: black;
}

#fluidrow_moda_explo_data p, #fluidrow_moda_explo_data h3, 
#fluidrow_moda_explo_data .dataTables_wrapper .dataTables_info, 
.table_explo_right h3, .dataTables_paginate {
	color: white !important;
}
/* Bas de page de modalité */
#fluidrow_moda_explo_data .dataTables_info,
.dataTables_paginate {
	display: flex;
  align-content: center;
  justify-content: center;
	margin-bottom: 20px;
}
#fluidrow_moda_explo_data .dataTables_wrapper{
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	margin-left: 0 !important;
}
#fluidrow_moda_explo_data .dataTables_paginate .paginate_button {
	height: fit-content;
}

/*Titres avec variable ou table*/
#fluidrow_moda_explo_data h3 { 
	margin : 5px 0px;
}
.titre_defaut{
	display: flex;
	justify-content: center;
	margin-top: 50%;
}
.titre_defaut h6{
	width: 60%;
	text-align: center;
	font-size: 20px;
}
#badgeInfo {
	background-color: var(--primary-100);
	color: white;
	border-radius: 100%;
	width: 20px;
	height: 20px;
	padding-left: 8px;
	display: none;
	position: absolute;
	top: 17.5%;
	left: 210px;
	font-size: 14px;
	justify-content: center;
	align-items: center;
}

/* Boutons de téléchargement des modalités */
.row_download{
	display: flex;
  justify-content: start;
}
#moda_explo_1-export_moda {
	display: flex;
  align-items: center;
	padding: 5px 20px;
	text-transform: uppercase;
	border: none !important;
	margin: 0 0 0 10px;
}
#moda_explo_1-export_moda p{	
	padding-left: 5px;
	font-size: 14px;
}
#moda_explo_1-nomen_var input[type="search"]{ /*recherche du tableau des modalités*/
	background-color: white;
  padding: 10px;
	border: none;
	border-radius: 10px;
	outline: none;
	position: absolute;
	right: 20px;
	top: -35px;
}

/*Tableau modalité*/
#fluidrow_moda_explo_data .dataTables_scroll{
	background-color: white;
	padding: 0;
	margin-top: 5px;
	margin-bottom: 5px;
}

#moda_explo_1-tmp_var_nomen .titre_variable{
	padding-left: 5px;
	margin-top: 25px;
}
.sous_titre_variable {
	padding-left: 5px;
	margin-top: 60px;
}

.dataTables_scroll{
	overflow: visible !important;
  z-index: 24 !important;
}

/*Informations des variables à droites, switch sur info*/
.row_info_panel_droite {
	margin-top: 60px;
	margin-bottom: 15px;
}
.info_panel_droite .row {
	display: flex;
	align-items: start;
}
.info_panel_droite .row div {
	padding: 10px;
	padding-left: 15px;
}
.info_inferieur_partie_droite {
	padding: 0 !important;
}

/*PAGE EXPLORATEUR DE TABLES*/
#tables_explo_div {
  position: fixed;
  top: 0;
  right: -75%;
  width: 75%;
  height: 100%;
  background-color: white;
  z-index: 9999;
  overflow-y: scroll;
  scrollbar-width: none;
  padding-right: 10px;
  padding-left: 10px;
  transition: transform 0.4s ease-in-out;
  transform: translateX(0);
}
#tables-tables_dt .dataTables_filter input[type="search"] {
	background-color: var(--light-100);
  padding: 10px;
	border: none;
	border-radius: 10px;
	outline: none;
	font-size: 14px;
	position: absolute;
	top: -124px;
	left: 30px;
}

#tables_explo_div.visible {
  transform: translateX(-100%); /* Revient à sa position normale */
}

#tables-table_graph_ui {
	margin-left: 10px;
	width: 100%;
}
#tables-table_graph_ui svg{
	margin-left: 10px;
	width: 100%;
}

/*Module de droite de page explorateur de tables*/
.titre_sm_tables{
	padding: 10px 9px;
}
.div_sm_tables{
	background-color: var(--white);
	border-radius: 15px 0px;
}
.div_sm_tables th {
	font-weight: normal;
	border-bottom: 1px solid;
	border-top: none;
	color: var(--secondary-100);
}
.div_sm_tables td {
	color: var(--dark-100);
}
#test_tables_explo-test_pour_tables .titre_variable {
	padding-left: 5px;
}

/* Droits */
.dropdownarea {
  overflow: visible !important;
  z-index: 25 !important;
}

/*ELEMENTS EN COMMUN PAGES EXPLORATEUR TABLES ET VARIABLES*/
/* Switch afficher les dates */
.shiny-input-container:has(.material-switch), .shiny-input-container:has(#vars_explo-sel_bibli) {
	margin: 0;
}
.material-switch label.switch { 
	margin-bottom: 4px !important; 
}
.col_switch_date{
	display: flex;
	justify-content: flex-end;
}

/*Modification css tableaux*/
.selectedvert {
	background-color: var(--secondary-200) !important;
}
thead th, thead td {
  border: none !important;
}
span.glyphicon-remove-circle {
	display: none !important;
}

/*PAGE HISTORIQUE DES MISES A JOUR*/
.card-maj{
  padding: 20px;
  width: 400px;
  min-width: 400px;
  margin: 20px;
  border-radius: 32px 0 32px 0;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.div_droit_maj{
	margin-top: 10px;
}

.maj-date{
  width:100%;
  display: flex;
	flex-wrap: wrap;
}

#histo_maj-histo_maj_ui > h3{
  display:block;
  width:100%;
  border-bottom:1px solid rgba(0,0,0,0.5);
}
#tables-table_graph_ui h4 {
	margin-top: 10px;
}
.badge-droit{
  background-color:var(--primary-100);
  color:#FFF;
  padding:3px;
  margin-right:5px;
  border-radius : 6px;
}
#histo_maj-input_date_button {
    display: none !important;
}

/*ICONES*/
.icon-mail {
	padding-right: 2%
}
.mail_btn{
	padding-right: 5%;
}

#vars_explo-export:after{ /*icon-download*/
	display: none;
}
.icon-share-2:before{
	font-size: 18px;
}
.icon-message-square{
	margin-right: 5px;
}