/* CSS Espace cartographie : Observatoire de l'Hydrologie
================================================== */
.center {text-align: center;}
.erreur {color: #FF0000; font-size: 0.85em; font-weight:bold;margin-left: 1em}

.gm-style, .gm-style div, .gm-style span, .gm-style label, .gm-style a { /*Forcer la font pour les fonds GMap*/
  font-family: 'Open Sans',Helvetica,Arial,sans-serif;
  font-size: inherit;
  font-weight: 400;
  font-size: 14px;
}
#chicken_FrameDecorationDiv_4 , img #chicken_FrameDecorationImg_4 {
  /*left: -14px;*/
  /*top: -713px;*/
}

/*Forcer la taille de la police au chargement des fonds Google Maps*/
.gm-style div.allDiv  > div.olButton,
.gm-style div.allDiv > div.olButton > span,
.gm-style .titre_couche_selection,
.gm-style div.themetitle {
  font-size: 11.2px;
}

.gm-style div.layersDiv label.olButton {
  font-size: 10px;
}

div.clearfix:before, div.clearfix:after { /*Forcer pour écraser les textes envoyés en content sur les vignettes météo*/
  content: "";
}

div.openlayers-container-map-dreal-map {
  margin-bottom: 100px;
}

div.openlayers-map-dreal-map { /*Fond blanc si pas de fond de carte chargé*/
  background: #FFF;
}

div.openlayers_behavior_fullscreen_buttonItemInactive { /*Bouton Plein écran*/
  background: #fff;
  height: 35px;
  width: auto;
  font-size: 0.9em;
  text-transform: uppercase;
  color: #012b35;
  cursor: pointer;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 7px 10px 0px 10px;
}

div.openlayers_behavior_fullscreen_buttonItemInactive:after { /*Bouton Plein écran*/
  content: url("../img/pic_fullscreen.png");
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

div.openlayers_behavior_fullscreen_buttonItemInactive:hover { /*Bouton Plein écran : hover*/
  text-decoration: underline;
}


div.maploading {
  position: relative;
  overflow: visible;
  background: #FFF url(../img/ajax-loader.gif) no-repeat center 5px;
  color: #004271;
  z-index: 2000;
  display: none;
  top: 30%;
  margin: auto;
  width: 250px;
  height: 25px;
  padding: 40px 0 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 30px; /*OK > IE8*/
  -webkit-border-radius: 30px; /*For Safari*/
}

div.printloading {
  position: absolute;
  overflow: visible;
  background: #ECECEC url(../img/ajax-loader.gif) no-repeat center 5px;
  color: #004271;
  z-index: 2000;
  display: none;
  top: 300px;
  margin: auto;
  width: 380px;
  height: 25px;
  padding: 40px 0 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 30px; /*OK > IE8*/
  -webkit-border-radius: 30px; /*For Safari*/
}


/* Barre agrandissement et réduction
================================================== */
div.olControlPersoLayerSwitcher,
div.ol-persolayerswitcher{
  top: 0;
  right: 0;
  font-size:0.8em;
  width: 250px; /*sans scroll 265px;*/
  height: 100%;
}

div.searchtoolbar .toggler.open,
div.tableaubord .toggler.open,
.boholder .barre  { /*Bouton agrandir le bloc*/
  height: 100%;
  float: left;
  position: relative;
  /*top: 8rem;*/
  background:  url(../img/pic_max_min.png) no-repeat -30px center;
  cursor: pointer;
  border: none;
}
.boholder .open  { /*Bouton agrandir le bloc*/
  height: 100%;
  float: left;
  position: relative;
  /*top: 8rem;*/
  background:  url(../img/pic_max_min.png) no-repeat -30px center;
  cursor: pointer;
  border: none;
}

.boholder .close  { /*Bouton agrandir le bloc*/
  width: 10px;
  background: #012b35 url(../img/pic_max_min.png) no-repeat left center;
  height: 100%;
  cursor: pointer;
  opacity: 1;
}


div.searchtoolbar .toggler.open:hover,
div.tableaubord .toggler.open:hover,
div.toolbar .toggler.open:hover { /*Bouton agrandir le bloc : hover*/
  background-position: -20px center;
}

div.maximizeDiv {
  background: #fff url(../img/pic_arrow_open.png) no-repeat center center;
  height: 35px;
  cursor: pointer;
  width: 20px;
  top: 10px;
  right: 0;
  position:relative;
}

div.maximizeDiv:hover {
  background: #fff url(../img/pic_arrow_open_hov.png) no-repeat center center;
}

div.minimizeDiv {
  width: 20px;
  background: #fff url(../img/pic_arrow_close.png) no-repeat center center;
  height: 100%;
  cursor: pointer;
  opacity: 1;
  height: 35px;
  right: 20px;
  top: 10px;
  position:relative;

}

div.minimizeDiv:hover {
  background: #fff url(../img/pic_arrow_close_hov.png) no-repeat center center;
}

div.searchtoolbar .toggler.close,
div.tableaubord .toggler.close,
div.toolbar .toggler.close { /*Bouton réduire le bloc*/
  /* float: left; */
  width: 10px;
  background: #012b35 url(../img/pic_max_min.png) no-repeat left center;
  height: 100%;
  cursor: pointer;
  opacity: 1;
}

div.searchtoolbar .toggler.close:hover,
div.tableaubord .toggler.close:hover,
div.toolbar .toggler.close:hover { /*Bouton réduire le bloc : hover*/
  background-position: -10px center;
}

div.searchtoolbar .toggler.open,
div.searchtoolbar .toggler.close,
div.tableaubord .toggler.open,
div.tableaubord .toggler.close
{
  height: 43px;
  margin: 0;
  float: left;
}

div.toolbar .toggler.open,
div.toolbar .toggler.close {
  height: 650px;/*442px;*/
  margin: 0;
  float: left;
}

/* Bloc "Ma sélection" "Catalogue"
================================================== */
div.allDiv { /*Bloc "Ma sélection"/"Catalogue" */
  float: left;
  width: 250px; /* sans scroll 253px;*/
  height: 100%;
  line-height: 19px;
  position:relative;
}

div.allDiv > div.olButton { /*Titre des onglets "Ma Sélection" " Catalogue" avec puce (-)*/
  /* background: #004372 url(../img/pic_plus_moins.png) no-repeat 95% -88px; */
  background: #012b35;
  cursor: pointer;
  height: 45px;
  color: #FFF;
  font-size: 1.3em;
  font-weight: bold;
  line-height: normal;
  padding: 0 0 0 1rem;
}

div.allDiv > div.olButton .title {
  width: 88%;
  display: inline-block;
  vertical-align: middle;
}

div.allDiv > div.olButton:after {
  content: url("../img/pic_moins.png");
  display: inline-block;
  vertical-align: bottom;
}

div.allDiv div.selectionTitleDiv_close:after,
div.allDiv div.catalogTitleDiv_close:after {
  content: url("../img/pic_plus.png");
}

div.allDiv div.selectionTitleDiv_close:hover, div.allDiv div.catalogTitleDiv_close:hover { /*Puce des onglets (+) : hover*/
  background-position: 95% -32px;
}

div.allDiv  > div.olButton > span { /*Chiffre du nombre d'élément chargé*/
  font-weight: bold;
}

div.catalogTitleDiv, div.catalogTitleDiv_close{ /*Titre onglet "Catalogue"*/
  margin: 1% 0 0 0;
}

div.allDiv div.selectionDiv { /*Bloc contenant toutes les couches de "Ma Sélection"*/
  max-height: 86%; /*pose pb sur ie8 dans le survol*/
  overflow: auto;
  width: 100%;
}

div.bloc_couche_selection { /*Blocs des couches de selection "Ma Sélection"*/
  /*min-height: 70px; 100px*/
  display: table;
  border-left: 1px solid #004271;
  border-bottom: 1px solid #004271;
  background: #FFF;
  /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88a7bd), color-stop(40%,#ffffff));
  background: linear-gradient(to bottom, #88a7bd 0%,#ffffff 40%); */
  width: 99.9%;
  /*min-width: 250px;
  float: left;*/
}

div.layersDiv { /*Contient les couches "Catalogue"*/
  background: #FFF;
  /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88a7bd), color-stop(10%,#ffffff));
  background: linear-gradient(to bottom, #88a7bd 0%,#ffffff 10%); */
  overflow: auto; /*idéalement hidden lorsque le scroll pourra se faire*/
  height: 86%;
}

div.thematic-containerData > .title {
  border-bottom: 1px solid #EBEBEB;
}

div.theme-containerData {
  border-top: 1px solid #CCC;
}

div.thematictitle { /*Titre des thématiques : Sécheresse/Inondation*/
  font-size: 1.5rem;
  font-weight: bold;
}

div.thematictitle:before {
  content: url("../img/pic_dossier_close.png");
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.visible div.thematictitle:before {
  content: url("../img/pic_dossier_open.png");
}

.theme-containerData.notVisible .themetitle,
.sstheme-containerData.notVisible .ssthemetitle {
  background-image: url("../img/pic_plus-min.png"); /* symbole plus*/
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 7%;
  margin-right: 0.5rem;
}

.theme-containerData.visible .themetitle,
.sstheme-containerData.visible .ssthemetitle {
  background-image: url("../img/pic_minus-min.png"); /* symbole minus*/
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 7%;
  margin-right: 0.5rem;
}

.sstheme-containerData {
  border-top: 2px solid #FFFFFF;
}

.sstheme-containerData:first-child {
  border:0;
}

.sstheme-containerData.visible {
  background-color: #EBEBEB;
}

div.themetitle { /*Titre des thèmes/Catégories*/
  font-size: 1.5rem;
  font-weight: bold;
  padding: 1rem 2.2rem 1rem 1rem;
  cursor: pointer;
}

div.ssthemetitle { /*Titre des ss-thèmes*/
  font-size: 1.5rem;
  padding: 0.6rem 2.2rem 0.6rem 1rem;
  cursor: pointer;
}

div.sstheme-null div.ssthemetitle  { /*Avec sous-thèmes vide*/
  padding-top: 0;
  padding-bottom: 0;
}

div.layersDiv .containerData {
  margin: 0;
}

div.layersDiv .containerData.visible div.data{
  display: block;
  padding: 5px 15px;
}

div.layersDiv .containerData.notVisible div.data{
  display:none;
}

div.layersDiv .containerData .title {
  cursor: pointer;
  padding: 10px;
  background: #5baab6;
}

.sstheme-containerData .labelSpan.olButton {
  color: #012b35;
  cursor: help;
  text-decoration: none;
  line-height: 1.2em;
  display: inline-block;
  vertical-align: middle !important;
}

.sstheme-containerData .labelSpan.olButton:hover {
  text-decoration: underline;
}

/**/
div.layersDiv .thematic-containerData.visible div.data,
div.layersDiv .theme-containerData.visible div.data,
div.layersDiv .sstheme-containerData.visible div.data{
  display: block;
}

div.layersDiv .thematic-containerData.notVisible div.data,
div.layersDiv .theme-containerData.notVisible div.data,
div.layersDiv .sstheme-containerData.notVisible div.data {
  display:none;
}

div.layersDiv .sstheme-containerData div.data{
  padding: 0 0.5rem 0 1rem;
}

div.layersDiv .thematic-containerData > .title {
  cursor: pointer;
  padding: 10px;
  background: #5baab6;
}

input[type="checkbox"].olButton {
  margin: 5px 9px 0;
}

div.layersDiv input[type="checkbox"].olButton {
  margin: 0.8rem 0.5rem 0.8rem 0;
  vertical-align: sub;
  cursor: pointer;
}

div.bloc_couche_selection input[type="checkbox"].olButton {
  float: left;
}

div.layersDiv img {
  margin: 0;
  display: none;
  visibility: hidden;
}

/*Pour les couches WMS/WMTS*/
div.layersDiv img.small{
  width: 11px;
}

div.layersDiv label.olButton {
  margin:0;
  font-weight: normal;
  font-size: 1.1rem;
  display: inline-block;
  line-height: 1em;
  width: 80%;
  vertical-align: middle !important;
}

div.bloc_couche_selection div.olButton { /*3 boutons : Up, Down et Close Sélection de la couche*/
  float:right;
  cursor: pointer;
}

div.closeSel{ /*fermeture de la couche*/
  background: transparent url(../img/pic_up_down_close.png) no-repeat 0 0;
  width: 12px;
  height: 12px;
  margin: 10px;
}

div.closeSel:hover { /*fermeture de la couche : hover*/
  background-position: 0 -12px;
}

div.upSel{ /*fleche de tri up*/
  background: transparent url(../img/pic_up_down_close.png) no-repeat 0 -36px;
  width: 12px;
  height: 5px;
  margin: 8px 0 0 0;
}

div.upSel:hover{ /*fleche de tri up : hover*/
  background-position: 0 -41px;
}

div.downSel{ /*fleche de tri down*/
  background: transparent url(../img/pic_up_down_close.png) no-repeat 0 -51px;
  width: 12px;
  height: 5px;
  margin: 18px -12px 0 0;
}

div.downSel:hover { /*fleche de tri down : hover*/
  background-position: 0 -56px;
}

/*Légende affiché dans le bloc "Ma sélection" */
div.bloc_couche_selection img.legende, div.bloc_couche_selection canvas.legende {
  margin:0 5px 5px 30px;
  float: left;
  clear: both;
}

div.label_couche_selection div.titre_couche_selection,
div.label_couche_selection div.bloc_couche_slider  {
  float: left;
  max-width: 70%;
  line-height: 1.3em;
  margin-left: 3rem;
}

div.label_couche_selection > canvas + div.titre_couche_selection,
div.label_couche_selection img.legende + div.titre_couche_selection {
  margin: 0;
}

div.label_couche_selection img[src$="LEGEND.jpg"],
div.label_couche_selection a.legende img[src$="#"] {
  height: 0px; /*Légende non disponible donc on masque l'image*/
  width: 0;
}

div.label_couche_selection a[href$="LEGEND.jpg"]:after,
div.label_couche_selection a.legende[href$="#"]:after {
  content: 'Légende non disponible';
  display: inline-block;
  margin-bottom: 0.5rem;
}

.article-content .label_couche_selection img {
  margin-top: 0;
}

.labelSpan {
  float: left;
  width: 65%;
  line-height: 1.3em;
}

.labelSpan.olButton {
  width: 80%;
  float: none;
}

div.label_couche_selection div.bloc_couche_slider {margin: 1.5rem 0 1.5rem 3rem;}

.gm-style .bloc_couche_selection label.labelSpan {font-weight: bold; font-size: 1.1em;}

/*Actions sur les couches : Téléchargement */
div.actions-couche {
  float: left;
  clear: both;
  margin: 0.5rem 0.5rem 0.5rem 2.5rem;
}

div.download {
  background: transparent url(../img/pic_telecharger.png) no-repeat 0 -57px;
  height: 19px;
  width: 20px;
}

div.partager_carte {
  position: absolute;
  right: 4rem;
  top: 0.8rem;
  font-size: 2.2rem;
}
div.partager_carte a {
  color: #FFF;
  padding: 0.3rem;
  height: 27px;
  display: block;
}

div.partager_carte a:hover, div.partager_carte a:focus {
  background-color: #FFF;
  color: #012b35;
}

div.partager_carte span.btn-partage-couche {
  background: url("../img/pic_partager_couche-min.png") no-repeat;
  width: 22px;
  height: 21px;
  display: inline-block;
}

div.partager_carte a:hover span.btn-partage-couche, div.partager_carte a:focus span.btn-partage-couche {
  background: url("../img/pic_partager_couche_active-min.png") no-repeat;
}


/*Bloc attribution des crédits de la carte*/
body .olControlAttribution {left: 70px; width: 50%;}

/* Bloc Sélection du fond de carte
================================================== */
div.vpanel {right: 490px; top: 5px; /* sans scroll 275px;*/ width: 35px; height: 35px;position:absolute;}
div.fondcarteItemInactive {color: #FFF; display: inline-block; font-weight: bold; font-size: 0.9em; line-height: 30px; text-transform: uppercase; width: 35px;}
div.dropdownRsltItemInactive {background: url("../img/pic_mini_map.png") no-repeat; border-radius: 5px; cursor: pointer; width: 35px; height: 35px; border: 3px solid #fff;text-indent: -9999px;}

div.dropdownBtnItemInactive {background: #fff; cursor: pointer; font-size: 0.8em; padding: 5px 10px; width: 150px;}
div.dropdownBtnItemInactive:nth-child(2) {border-radius: 5px 5px 0 0;}
div.dropdownBtnItemInactive:last-child {border-radius: 0 0 5px 5px;}
div.dropdownBtnItemInactive:hover {color: #5baab6;}
div.optionselected {font-weight: bold; color: #5baab6;}




/* Bloc Info sur les couches
================================================== */
.info{
  background: #FFF; min-width: 330px;
}

.info_data {
  font-size: 0.9em;
  overflow: hidden;
  background: #FFF;
  margin-right: 10px;
}

.info_data .table-data {
  padding-bottom: 1rem;
  overflow-x: auto;
  overflow-y: auto;
  width: 750px;
}
.info_data .width-full-table-data{width: 68vw;}

.class.body .layer-title {
  margin: 10px 20px;
  font-size: 0.95em;
}

.class.body .layer-title span{
  font-weight: bold;
}

.class.body table {
  margin: 0 20px;
  width: 1000px;
}

.info_data .no-result {
  padding: 2rem;
}
.wnd-info.window table tbody td{
  width: 1%;
  white-space: nowrap;
}
.table_couche table thead th,
.table_couche table tbody td,
.wnd-info.window table thead th,
.wnd-info.window table tbody td{
  padding-right: 12px;
  border: 1px solid #9DB2AF;
  padding-left: 12px;
}
.table_couche table thead,
.wnd-info.window table thead
{background-color: #5BAAB6 !important;}
.window .body .table-data table th{
  background-color: #5BAAB6 !important;
}

/*Bloc de recherche
================================================== */
.searchBoxDiv {
  background: #FFF;
  width: 330px;
  height: 650px;
  position: absolute;
  padding: 10px;
}
.searchBoxDiv select {
  height: 35px;
  width: 100%;
}
.searchBoxDiv input {
  height: 35px;
  margin: 10px 0;
  width: 100%;
}

.searchBoxDiv .valider {
  color: #012b35;
  background: transparent;
  text-transform: uppercase;
  border: 1px solid #012b35;
  border-radius: 20px;
  font-weight: bold;
  padding: 5px 0;
  text-align: center;
}

.searchBoxDiv .valider:hover {
  opacity: 0.5;
}

/*.searchBoxDiv .commune{
    width: 60px;
}

.searchBoxDiv .adresse{
    width: 80px;
}*/

.blocresultat {
  background: #FFF;
  top: 120px;
  left: 60px;
  height: 650px;
  position: absolute;
}

.olControlPrintImg {
  background: #FFF;
  width: 330px;
  height: 650px;
}

a.bt_close_window {
  background: transparent url("../img/bt_close_window.png") no-repeat left -9px;
  background-position: 0 -39px;
  float: right;
  height: 12px;
  margin: 5px;
  width: 12px;
}

a.bt_minmax_window {
  float: right;
  height: 12px;
  margin: 5px;
  width: 12px;
}

a.bt_minmax_window.maxon {
  background: transparent url("../img/bt_maxon_window.png") no-repeat left -9px;
}

a.bt_minmax_window.minon {
  background: transparent url("../img/bt_minon_window.png") no-repeat left -9px;
}

a.bt_close_window:hover, a.bt_minmax_window:hover {
  background-position: 0 -39px;
}


.olLayerDiv img {
  margin: 0px
}

.blocresultat  div.header,
.blocchoixcouche  div.header,
.wms_wnd  div.header,
.olControlAide div.header,
.olControlTableauBord div.header,
.olControlPrintImg div.header,
.kml_bloc div.header,
.gpx_bloc div.header,
.repere div.header,
.info div.header,
.olPopup-catalogue div.header {
  background: #FFF;
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #D5D5D5;

}

.blocresultat div.header > div ,
.blocchoixcouche div.header > div,
.wms_wnd  div.header > div,
.olControlAide div.header > div,
.olControlTableauBord div.header > div,
.olControlPrintImg div.header > div,
.kml_bloc div.header > div,
.gpx_bloc div.header > div,
.repere div.header > div,
.info div.header > div,
.olPopup-catalogue div.header > div
{
  float: left;
  font-size: 1.8em;
  font-weight: bold;
  /*height: 50px;*/
  color: #012b35;
  text-align: center;
  width: 90%;
}

.search_data {
  height: 390px;
}

.search_data .lib_couche {
  margin: 10px 20px;
  font-size: 0.85em;
}

.search_data .lib_couche span{
  font-weight: bold;
}

.blocresultat.window .table_couche {
  height: 497px;
  overflow-x: auto;
  overflow-y: auto;
  width: 750px;
}

.blocresultat.window table {
  margin: 0 20px;
}

.blocresultat.window thead th{
  /*display:block;*/
  padding: 2px 5px;
}

.blocresultat.window td {
  width: 100%;
  padding: 0 5px;
}

.blocresultat.window th {
  /*padding: 0.3em 1em;*/
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

.blocresultat.window .col_1 th, .blocresultat.window .col_1 td { /*100-7-2=91*/
  width: 91%;
}

.blocresultat.window .col_2 th, .blocresultat.window .col_2 td { /*(100-7-4)/2=44.5*/
  width: 44.5%;
}

.search_data .col_3 td, .search_data .col_3 td { /*(100-7-6)/2=29*/
  width: 29%;
}

.search_data .col_4 td, .search_data .col_4 td { /*(100-7-8)/2=21.25*/
  width: 21.25%;
}

.search_data .col_5 td, .search_data .col_5 td { /*(100-7-10)/2=16.6*/
  width: 16.6%;
}

.search_data th:first-child, .search_data td:first-child  { /*7% avec padding*/
  width: 2%;
  padding-left: 1rem;
}

/* code 1 à 8 */
.search_data th:nth-child(2), th:nth-child(3), th:nth-child(4), th:nth-child(5), th:nth-child(6), th:nth-child(7), th:nth-child(8), th:nth-child(9) {
  width: 80px;
}
/* Libelle */
.search_data th:nth-child(13) {
  width: 260px;
}
/* Massif */
.search_data th:nth-child(15) {
  width: 140px;
}

/* Geo */
.search_data th:nth-child(21) {
  width: 85px;
}

.table_couche tbody tr:nth-child(odd) {
  /*bg tr*/
  background: #CCC;
}

.search_data tbody{
  /*display:block;*/
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden; /*Scroll horizontal caché*/
}

.table_couche .zoomall, .table_couche .zoom {
  background: transparent url("../img/pic_marqueur_localise.png") no-repeat left top;
  float: left;
  height: 25px;
  width: 12px;

}

.table_couche .zoomall:hover, .table_couche .zoom:hover {
  background-position: left -25px;
}

.blocresultat.window .body .export {
  background: transparent url("../img/pic_export.png") no-repeat right -56px;
  color: #004372;
  text-transform:uppercase;
  font-weight: bold;
  font-size:1.0em;
  text-decoration: none;
  padding:0 25px 0 0;
  float: right;
  margin: 10px;
}

.search_data .export:hover {
  text-decoration: underline;
}

/*Outil mesure
================================================== */
.measureinfo{
  background: #FFF;
  margin: 0;
  padding: 10px;
  color: #012b35;
  text-transform: capitalize;
  top: 0 !important;
}

/*Outil import WMS/KML/GPX
================================================== */
.wms_wnd{
  background: #FFF; width: 390px; height: 650px;
}

.wms_data, .kml_data, .gpx_data, .print_data , .reperedata{
  padding:10px;
}

div.choix_wms {
  float:left;
  margin: 0 10px 0 0;
  font-size: 0.9em;
  font-weight: bold;
}

div.choix_kmlgpx{
  float:left;
  margin: 0 10px 0 0;
  font-size: 0.9em;
  font-weight: bold;
}

div.choix_print {
  float:left;
  margin: 0 10px 0 0;
  font-size: 0.9em;
  font-weight: bold;
}

.wms_data #div_choix_predefini select {
  margin: 20px 0;
  width: 100%;
  height: 35px;
}

.wms_data #div_choix_libre {
  width: 100%;
  display: inline-block;
  font-weight: bold;
  margin-top: 10px;
}

.wms_data #div_choix_libre input,
.wms_data #div_choix_libre select,
.wms_data #bloc_tout_charger input{
  width: 100%;
  margin: 5px 0 10px 0;
  height: 35px;
  font-weight: normal;
}

.wms_data #div_choix_libre select {
  width: auto;
  display: block;
}

.wms_data #div_choix_libre input#btn_wms,
.wms_data #bloc_tout_charger input#tout_charger {
  color: #012b35;
  background: transparent;
  text-transform: uppercase;
  border: 1px solid #012b35;
  border-radius: 20px;
  font-weight: bold;
  padding: 5px 20px;
  text-align: center;
}

.kml_data  > div .btn-warning {
  color: #012b35;
  background: transparent;
  text-transform: uppercase;
  border: 1px solid #012b35;
  border-radius: 20px;
  font-weight: bold;
  padding: 5px 20px;
  text-align: center;
  width: 100%;
}

.wms_data #div_choix_libre input#btn_wms:hover,
.wms_data #bloc_tout_charger input#tout_charger:hover,
.kml_data  > div .btn-warning:hover {
  opacity: 0.5;
}

.wms_data #wms_selections{
  width: 100%;
  height:100px;
}

.repere {
  background: #FFF;
}

#bloc_choix_wmslayer {
  left:300px;
  top:500px;
  z-index:10000;
  position:absolute;
}

.unchoix_layer{
  width:100%
}

.wms_wnd input[type="radio"],
.wms_wnd input[type="checkbox"] {
  margin: 5px 5px 0 0;
  vertical-align: sub;
}


/*Outil Sélection
================================================== */
.blocchoixcouche{
  background: #FFF; width:320px; height: 650px;
}

/*.choix_layers_user {*/
/*  padding:10px;*/
/*  font-size: 0.9em;*/
/*}*/

.choix_layers_user > div label{
  font-weight: bold;
  padding:5px
}

.choix_layers_user > div input[type="radio"],
.choix_layers_user > div input[type="checkbox"] {
  margin: 5px 0 0;
  vertical-align: sub;
}

/**Outil GPX, KML - Fenêtre d'impression
*****************************************************/
.kml_bloc {
  background: #FFF; width: 440px; height: 650px;
}

.kml_data .form-item-type-de-couche > label, .kml_data .form-item-layer-name > label,
.print_data .form-item-type-impression > label, .print_data .form-item-titre > label, .print_data .form-item-format > label, .print_data .form-item-orientation > label, .print_data .form-item-dimensions > label {
  display: inline-block;
  width: 35%;
  margin: 5px 0;
  font-weight: bold;
}

.kml_data label.option, .print_data label.option {
  margin-left: 5px;
  vertical-align: middle;
}

#edit-type-de-couche,
#item_type_impression, #titre_obligatoire, #item_orientation, #bloc_choix_dimensions {
  width: 100%;
}

.kml_data .form-item-layer-name > input,
.kml_data .form-item-url > input {
  width: 100%;
  height: 35px;
  border-radius: 0;
  border-color: #012b35;
  margin-bottom: 15px
}

.kml_data > .form-item-acces-a-la-couche label,
.kml_data > .form-item-acces-a-la-couche .radio label,
.kml_data > .form-item-acces-a-la-couche .checkbox label {
  font-weight: bold;
}

.print_data .form-item-titre > div > input , .print_data .form-item-dimensions > div > select {
  width: 100%;
  margin-bottom: 10px;
  height: 35px;
}

.print_data .form-item-format > select {
  width: 100%;
  height: 35px;
  margin-bottom: 10px;
}

.kml_data .form-item-type-de-couche div > div {
  display: inline-block;
  width: 15%;
  margin-top: 0;
}

.print_data .form-item-type-impression div > div,
.print_data .form-item-orientation div > div {
  display: inline-block;
  width: 25%;
  margin-top: 0;
}

.kml_data .form-item-upload-kml-file > div input,
.kml_data .form-item-upload-gpx-file > div input {
  border-color: #012b35;
}

.kml_data .form-item-upload-kml-file > div .btn-primary,
.kml_data .form-item-upload-gpx-file > div .btn-primary {
  background: #5baab6;
  border-color: #5baab6;
  margin-top: 0 !important;
}

.kml_data .form-item-upload-kml-file > div .btn-primary:hover,
.kml_data .form-item-upload-gpx-file > div .btn-primary:hover,
.kml_data input[type="file"]

{
  border-color: #012b35;
}
.control-group .control-label[forlabel="nom_couche"]{
  margin-top: 1rem;
}
#nom_couche{
  border-color: #012b35;
}
.kml_data .form-item-type-de-couche, .kml_data .form-item-layer-name, .kml_data > .form-item-acces-a-la-couche,
.print_data .form-item-type-impression, .print_data .form-item-titre, .print_data .form-item-format, .print_data .form-item-orientation, .print_data .form-item-dimensions {
  display: block;
  width: 100%;
  margin-bottom: 0;
}

.print_data .form-item-largeur, .print_data .form-item-hauteur {margin: 0.5em 0 0 0.5em; font-size: 0.9em}
.print_data .form-item-largeur label, .print_data .form-item-hauteur label {display: inline-block; width: 60px;}
.print_data .form-item-largeur .form-radio, .print_data .form-item-hauteur .form-radio {width: 30px;}

.print_data #bloc_bas input {
  color: #012b35;
  background: transparent;
  text-transform: uppercase;
  border: 1px solid #012b35;
  border-radius: 20px;
  font-weight: bold;
  padding: 10px 20px;
  text-align: center;
  margin-top: 50px;
}

.print_data #bloc_bas input:hover {
  opacity: 0.5;
}

.form-item-upload-kml-file label,
.form-item-upload-gpx-file label,
.form-item-url label {
  font-weight: bold;
  margin-top: 15px;
}

.kml_bloc #edit-upload-gpx-file-remove-button,
.kml_bloc #edit-upload-kml-file-remove-button {
  margin-top: 0!important;
  padding: 6px 20px;
}

.kml_data #btn_importer
{
  color: #012b35;
  background: transparent;
  text-transform: uppercase;
  border: 1px solid #012b35;
  border-radius: 20px;
  font-weight: bold;
  padding: 10px 20px;
  text-align: center;
  margin-top: 2rem;
}

.kml_data #btn_importer:hover {
  opacity: 0.5;
}

/* Outil Aide
******************************************************/
.olControlAide    {
  background: #FFF; width: 350px; height: 650px; position: absolute; overflow-y: auto;
}

.olControlAide div.aide_data {
  padding: 10px;
}

/*Bloc de carte miniature
================================================== */
.olControlOverviewMap .olControlOverviewMapMinimizeButton, .olControlOverviewMap .olControlOverviewMapMaximizeButton {
  bottom: 0px;
  right: 290px;
}

.olControlOverviewMap .olControlOverviewMapElement {
  padding: 0;
  border: 3px solid #fff;
  position: relative;
  background: #FFF;
}

.olControlOverviewMap .olControlOverviewMapElement .olMap {
  border-radius: 5px 5px 0 0;
}

.olControlBlocMiniMap {
  background: #fff;
  padding: 5px 20px;
  border-radius: 10px 10px 0 0;
  font-size: 0.8em;
  width: 186px;
  cursor: pointer;
}

.olControlOverviewMapMinimizeButton {
  display: none;
}


.gm-style .olControlOverviewMap .olControlOverviewMapElement,
.gm-style .olControlOverviewMap .olControlOverviewMapMinimizeButton,
.gm-style .olControlOverviewMap .olControlOverviewMapMaximizeButton { /*Déplacement de la miniature à cause des crédits GMap*/
  bottom: 15px;
}




/* Infobulle sur les marqueurs au survol et clic
================================================== */
.olLayerDiv image,.olLayerDiv path,.olLayerDiv polyline{
  cursor: pointer;
}
.olPopup{
  max-width: 500px;
  z-index: 2001 !important;
}

.olPopup .olFramedCloudPopupContent {
  padding: 0;
  overflow: hidden;
  width: 100% !important;
}

.info-clique .olPopupCloseBox {
	background: url("../img/bt_close_station.png") no-repeat center;
	right:4px;
	position:absolute;
	width:17px;
	height:17px;
	z-index:1;
	top: 5px;

}

/* .openlayers-map .olPopup .olPopupCloseBox:hover {
	background-position:0 -31px;
} */
.kml_data .control-group{
  display: flex;
  flex-direction: column;
}
.info_svol, .gm-style  .info_svol {
  background: #FFF;
  font-size:0.8em;
  padding: 2px;
}

.info_clic, .gm-style .info_clic  {
  font-size:0.8em;
  padding: 2px;
  min-width: 250px;
}

.info_clic > .header {
  font-size: 1.5em;
  font-weight: bold;
  color: #012b35;
  text-align: center;
  width: calc(100% - 35px);
}

.info_clic > .content {
  padding: 10px;
}

.info_svol p, .info_clic > .content p {
  margin: 0px;
  font-size: 1.2em;
}

/*note sur le point repere*/
#repere_note{
  width: 146px;
  margin-top: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
}
.mapnote{
  background-color: white;
  border: 1px solid red
}
/*Infobulle pour une station hydrologique*/
.info_clic > .content p.nom_station {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.3em;
}

.info_clic > .content p.valeur_station {
  margin: 1em 0;
}

.info_clic > .content p.valeur_station .titre_meteo {
  display: block;
}

.info_clic > .content p.valeur_station a.tab_ajouter {
  background-position: left 1px;
  width: 100%;
  margin: 5px 0;
}

.info_clic > .content p.avertissement_valeur {
  background: url("../img/pic_alert_small.png") no-repeat left 5px;
  font-size: 1em;
  font-style: normal;
  margin: 15px 0 15px 0;
  padding: 0 0 0 25px;
}

.info_clic > .content p.avertissement_valeur span {
  color: #ce656a;
}


.info_clic > .content .widget_meteo{
  min-width: 133px; /*encart img météofrance + 4px padding*/
  height: 120px;
  display: inline-block;
}

.info_clic > .content .widget_meteo > .vignette-paysage {
  background:none;
  border:none;
  width: 133px;
  max-height: 120px;
}

fieldset .meteo  .header.vignette-paysage,
.info_clic > .content .widget_meteo .header.vignette-paysage {
  display:none;
}

.info_clic > .content .widget_meteo a.outlink, .container.vignette-paysage a.outlink{
  display:none;
}

.info_clic > .content .widget_meteo .map li.vignette-paysage {
  border: 1px solid #EBEBEB;
  margin: 0 25px;
}

fieldset .meteo .map li .titre,
fieldset .meteo .map li.vignette-paysage .data.vignette-pictos span,
.info_clic > .content .widget_meteo .map li .titre,
.info_clic > .content .widget_meteo .map li.vignette-paysage .data.vignette-pictos span {
  color: #474445;
  font-weight: bold;
}

.info_clic > .content .widget_meteo .footer a.vignette-paysage img,
fieldset .meteo .footer a.vignette-paysage img {
  background: #004975;
  padding: 2px;
  margin-top: 5px;
}

.openlayers-map .olPopup img {
  margin:0;
}

/*Popup Information sur la couche du catalogue
================================================== */
.olPopup-catalogue {
  min-width: 500px;
  max-width: none;
  z-index: 10000 !important;
}

.olPopup-catalogue .olPopupContent {
  overflow: hidden;
}

.info-couche-catalogue {
  overflow: auto;
  height: 150px;
  margin: 0;
}

.info-couche-catalogue .table-data {
  margin: 10px 20px;
  width: auto;
}

.info-couche-catalogue .table-data p,
.info-couche-catalogue .layer-title {
  font-size: 1.2rem;
}

div.info-clique{
	background-color: white;
}


/*Outil : Tableau de bord*/

.tabbord_intro {
  padding: 1em;
}

.olControlTableauBord {
  width: 790px;
}

.olControlTableauBord  .wserv_data {
  height: 600px;
  overflow: auto;
  background-color: white;
}

.olControlTableauBord  .wserv_data fieldset {
  border:0;
  margin: 10px;
  width: auto;
  background: none;
}

.olControlTableauBord  .wserv_data fieldset legend{
  font-weight: bold;
  font-size: 1.1em;
  color: #012b35;
}

.olControlTableauBord .wserv_data .station {
  /*line-height: 30px;
height: 30px;*/
  margin-bottom:5px;
  float:left;
  width:100%
}

.olControlTableauBord .title-graphe-3days, .olControlTableauBord .title-graphe-15days  {
  float:left;
  margin: 0.5rem 0;
  font-style: italic;
}

.olControlTableauBord .graphe-3days {
  margin-bottom: 1rem;
}

.station .elt_station,
.station .elt_cours_eau {
  float: left;
  margin: 0 20px 0 0;
}
.station .elt_valeur{
  width: 300px;
  float: left;
}
.meteo{
  display: block;
}

img.debit {
  margin: 0 0 0 10px;
}

.bas_station {
  height: 20px;
  padding: 0 0 2em 0;
}

a.tab_retirer {
  background: url("../img/pic_ajouter_retirer.png") no-repeat left -28px;
  height: 15px;
  font-weight: bold;
  padding-left: 12px;
  float: right;
}

a.tab_ajouter {
  background: url("../img/pic_ajouter_retirer.png") no-repeat left -2px;
  height: 15px;
  font-weight: bold;
  padding-left: 12px;
  float: right;
}

div.carte-vigilence {
	float: left;
	margin: 0.5em 0.2em 0 0;
	width:100%;
	position:relative
}

div.titre-vigilence {
  line-height: 30px;
  height: 30px;
  font-size: 0.85em;
  font-weight: bold;
  text-align: center;
}

div.img-vigilence {
  text-align: center;
}

div.img-vigilence img {
  border: 1px solid #474445;
}

div.img-vigilence-legend{
	position: absolute;
    right: 0;
    bottom: 2px;
    z-index: 1;
}

div.img-vigilence-legend img{
	float: left;
	clear: both
}

.tab-export {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 30px;
}

.tab-export .export {
  color: #012b35;
  background: transparent;
  text-transform: uppercase;
  border: 1px solid #012b35;
  border-radius: 20px;
  font-weight: bold;
  padding: 10px 20px;
  text-align: center;
}

.tab-export .export:hover {
  opacity: 0.5;
}

/*Texte intro sur le tableau de bord*/
.tabbord_intro p.blockquote {
  color: #ce656a;
  font-style: normal;
  font-size: 0.85em;
  background: url("../img/pic_alert.png") no-repeat left 10px;
  margin: 15px;
  padding: 0 0 0 50px;
}

.tabbord_intro p.blockquote:before {
  content: '';
}

/*bloc vigilance*/
.vigilances{
  width:100%;
  float:left;
}

/*Affichage du widget Météo et Température*/
fieldset .meteo > .vignette-paysage {
  background:none;
  border:none;
  margin: auto;
}

/* Zoom */
.olMapViewport div.olControlZoom {
  top: 5px;
  right: 280px;
  left: initial;
  background: #FFF;
  padding: 0;
}

.olMapViewport div.olControlZoom a {
  background: none;
  font-family: 'Roboto Condensed', sans-serif;
  color: #012b35;
  width: 30px;
  height: 30px;
  padding-top: 5px;
}

.olMapViewport div.olControlZoom a:first-child {
  border-bottom: 1px solid #D5D5D5;
}

.olMapViewport div.olControlZoom a:hover {
  background: none;
  color: #5baab6;
}

div.a-clicked{
  background-color:#012b35;
  color:white;
}

/* Retirer les espaces sur l'export PDF du tableau de bord des stations*/
.pdf div{
  padding-bottom:0px !important;
  margin-bottom:0px !important;
}
.pdf legend{
  padding-bottom:0px !important;
  margin-bottom:0px !important;
}

.graphe-15days, .graphe-3days{
  clear: both
}

/** nouvelle version*/
.control-group.type-couche{
  display: flex;
  flex-direction: column;
}
.window{
  min-width: 500px;
  height:650px;
  position:absolute;
  z-index: 10000;
  /*top: 500px;
  left: 50px;*/
  border: 1px solid black;
  background-color: white;
}


.window .body{
	padding: 1px;
	overflow: auto;
	height:600px;
	background-color:white
}
.window .body .table-data table th{
  background-color: yellow;
}
.window .body .table-data table th,.window .body .table-data table td{
  /*border: 1px solid black;*/
  border-collapse: collapse;
}

.window .body .table-data .layer-title{
  padding-top:5px
}

.wnd-info{
  width: 400px;
  height: 400px;
}

.wnd-repere_note{
  min-width: 20rem;
  height: 150px;
}
.wnd-repere_note .btn{
  width: 6rem;
  margin: 1rem !important;
}
.wnd-repere_note .body{
	height: auto;
	margin-bottom:0px;
display: flex;
flex-direction: column;}


.header .title{
  width:80%;
  left:0px;
  position:relative
}
.blocresultat div.header{
  width:100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.blocresultat div.header > div.close{
  width:20px;
}
/*.blocresultat div.header > div.close a {*/
/*  color: #d9edf7 !important;*/
/*}*/
.ol-dragbox{
  border: 2px solid red;
  /*background-color: rgba(255,255,255,0.4);*/
}

/*a.zoom:before {*/
/*  content: "☞"*/
/*}*/

.ol-zoom{
  position: absolute;
  width:25px;
  left: 270px
}

.ol-rotate{
  position:absolute;
  width:30px;
  left: 230px;
}

.ol-attribution{
  display: none;
}

div.ol-persolayerswitcher{
  right:0;
  position: absolute;
  width:250px;
  height:100%
}


div.ol-persolayerswitcher .layersDiv{
  overflow:auto;
  height:86%
}
.choix_wms input{
  margin: 0px 5px 0px 0px !important;
}
.ol-zoom.ol-unselectable.ol-control{
  top: 5px;
  right: 280px;
  left: initial;
  background: #FFF;
  padding: 0;
}
.carto .ol-zoom-in{
  border-bottom: #2b2b2b;
}
.carto .ol-zoom-in,.carto .ol-zoom-out{
  border: none;
  width: 25px;
  font-size: 23px;
  margin-bottom: 1px;
}
.carto .ol-rotate-reset{
  display: none;
}

div.tabbord{
	width: 790px
}
div.tabbord .body{
	height: 600px;
	width: 790px
}

.ol-tooltip {
	position: relative;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	color: white;
	padding: 4px 8px;
	opacity: 0.7;
	white-space: nowrap;
	font-size: 12px;
	cursor: default;
	user-select: none;
  }
  .ol-tooltip-measure {
	opacity: 1;
	font-weight: bold;
  }
  .ol-tooltip-static {
	background-color: #ffcc33;
	color: black;
	border: 1px solid white;
  }
  .ol-tooltip-measure:before,
  .ol-tooltip-static:before {
	border-top: 6px solid rgba(0, 0, 0, 0.5);
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	content: "";
	position: absolute;
	bottom: -6px;
	margin-left: -7px;
	left: 50%;
  }
  .ol-tooltip-static:before {
	border-top-color: #ffcc33;
  }

  .ol-tooltip-repere {
	background: white;
	color: black;
  }
.kml_data span{
  font-weight: bold;
}

.choix_kmlgpx,.choix_wms{
  display: flex;
}

  div.div_choix_predefini span,
  div.div_choix_libre span,
  div.wms_result span,
  div.wnd-print span
  {
    width:100%;
    display:block;clear:both;
    font-weight: bold;
    margin-top: 10px;
  }

  span.list-vide{
    padding-left: 15px;
    font-size: 1rem;
  }
.header .title{
  float: left;
  font-size: 1.8em;
  font-weight: bold;
  /*height: 50px;*/
  color: #012b35;
  text-align: center;
  width: 90%;

}
.class.header .close a {
  color: #012b35 !important;
}
.window .header{
  align-items: center;
  background: #FFF;
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #D5D5D5;
  display: flex;
  flex-direction: row;
  justify-content: space-around;

}

.class.body fieldset,
.choixlayer.window .intro ,
.choixlayer.window .choix_layers_user
{
  padding: 0rem 0rem 0rem 2rem;
}
.wnd-rech.window .class.body.searchBoxDiv{
  width: 100%;
  padding: 3rem;
}
/*.header .close a {*/

/*  background: transparent url(../../couche/img/bt_close_window.png) no-repeat left -9px;*/
/*  background-position: 0 -39px;*/
/*  float: right;*/
/*  height: 12px;*/
/*  margin: 5px;*/
/*  width: 12px;*/

/*}*/
.table_couche table thead th,

.table_couche table tbody td{
  padding-right: 12px;
  border: 1px solid #9DB2AF;
  padding-left: 12px;
}
.table_couche td{
max-width: 8%;
}
.table_couche th:first-child,
.table_couche td:first-child{
  width: 2% !important;
  padding-left: 1rem;
}
.lib_couche{
  padding: 1rem 1rem 1rem 2rem;
}
.lib_couche span{
  font-weight: bold;
  color: #012b35;
}
.div_choix_predefini,
.div_choix_libre,
.wms_result,
.choix_wms{
  padding: 1rem 1rem 1rem 2rem;
}
.wms_result select{
  width: 100%;
}

.container_line{
  width:100%;
  clear:both;
}

.control-group{
  width:100%;
  clear:both;
  margin-top:2rem;
}

.wnd_help .body{
  padding: 2rem;
  height:300px
}

 div.slidecontainer  {
  float: left;
  width: 70%;
  line-height: 1.3em;
  margin-left: 3rem;
  margin-top:1rem;
  margin-bottom:1rem;
}

.ol-full-screen button{
  position:absolute;
  right: 320px;
  top:5px
}

div.wnd-print .container, div.wnd-print .control-group{
  clear:both;
  padding:10px;
}


.kml_data.window .control-group input[type="radio"],
.kml_data.window input[type="radio"]{
  margin: 1px 10px 0 0;
}
.kml_data.window .control-label{
  margin-bottom: 1rem;
}
.kml_data.window .control-group div{
  margin-bottom: 1rem;
}
.wnd-print .control-group{
  display: flex;
  flex-direction: column;
  margin-top: 0;
}
.layer-title span {
  margin-left: 2px;
}
.wnd-print.window{
  min-width: 300px;
}
.wnd-print.window .choix_print{
  display: flex;
}
.wnd-print.window input[type="radio"]{
  height: 29px;
  margin-right: 1rem;
}
.wnd-print.window input,
.wnd-print.window select{
  height: 35px;
}
.wnd-print.window input[type="button"]{
  color: #012b35;
  background: transparent;
  text-transform: uppercase;
  border: 1px solid #012b35;
  border-radius: 20px;
  font-weight: bold;
  padding: 8px 20px;
  text-align: center;
  float: right;
  margin-right: 1rem;
  margin-top: 2rem;
}
.choix_impression,
div:first-child .choix_print{
  margin-left: 10px;
}
.selectionTitleDiv.olButton,
.catalogTitleDiv.olButton{
  display: flex;
  align-items: center;
}
.table-data p{
  margin-left: 20px;
  font-size: 1.2rem;
  margin-right: 20px;
}
/**************************************************************
 *********************RESPONSIVE DESIGN***********************
**************************************************************/

/* Jusqu'à 1200px et inférieur
================================================== */
@media (max-width: 1200px) {
  .olControlSheetItemInactive,
  .olControlSheetItemActive,
  .olControlRectSelectionItemInactive,
  .olControlRectSelectionItemActive,
  .olControlKMLloaderItemInactive,
  .olControlKMLloaderItemActive,
  .olControlPrintImgItemInactive,
  .olControlPrintImgItemActive,
  .olControlTableauBordItemInactive,
  .olControlTableauBordItemActive {
    display: none;
  }
}

/* Entre 992px et 1150px
================================================== */
@media screen and (min-width: 992px) and (max-width: 1150px) {

}

/* Jusqu'à 991px et inférieur
================================================== */
@media screen and (max-width: 991px) {
  .olControlBlocMiniMap {
    display: none;
  }

  .olMapViewport .openlayers_behavior_fullscreen_button_panel {
    right: 375px;
  }

  div.vpanel {
    right: 330px;
  }

  .olMapViewport .openlayers_behavior_fullscreen_buttonItemInactive {
    width: 30px;
    color: transparent;
  }

  .olMapViewport .openlayers_behavior_fullscreen_buttonItemInactive:after {
    margin-left: -5px;
    margin-top: -65px;
  }
}


:root,
:host {
  --ol-background-color: white;
  --ol-accent-background-color: #F5F5F5;
  --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
  --ol-partial-background-color: rgba(255, 255, 255, 0.75);
  --ol-foreground-color: #333333;
  --ol-subtle-foreground-color: #666666;
  --ol-brand-color: #00AAFF;
}

.ol-scale-line {
  background: var(--ol-partial-background-color);
  border-radius: 4px;
  bottom: 8px;
  left: 8px;
  padding: 2px;
  position: absolute;
}

.ol-scale-line-inner {
  border: 1px solid var(--ol-subtle-foreground-color);
  border-top: none;
  color: var(--ol-foreground-color);
  font-size: 10px;
  text-align: center;
  margin: 1px;
  will-change: contents, width;
  transition: all 0.25s;
}

.ol-scale-bar {
  position: absolute;
  bottom: 8px;
  left: 100px;
}

.ol-scale-bar-inner {
  display: flex;
}

.ol-scale-step-marker {
  width: 1px;
  height: 15px;
  background-color: var(--ol-foreground-color);
  float: right;
  z-index: 10;
}

.ol-scale-step-text {
  position: absolute;
  bottom: -5px;
  font-size: 10px;
  z-index: 11;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-text {
  position: absolute;
  font-size: 12px;
  text-align: center;
  bottom: 25px;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-singlebar {
  position: relative;
  height: 10px;
  z-index: 9;
  box-sizing: border-box;
  border: 1px solid var(--ol-foreground-color);
}

.ol-scale-singlebar-even {
  background-color: var(--ol-subtle-foreground-color);
}

.ol-scale-singlebar-odd {
  background-color: var(--ol-background-color);
}


/* Jusqu'à 979px et inférieur (MENU)
================================================== */
@media screen and (max-width: 979px) {

}

/* Jusqu'à 767px et inférieur
================================================== */
@media screen and (max-width: 767px) {
  .wms.brctrl.notautoicon,
  .recherche.brctrl.notautoicon,
  .repere.brctrl.notautoicon,
  .polygonmeasure.brctrl.notautoicon,
  .linemeasure.brctrl.notautoicon,
  .sheet.brctrl.notautoicon,
  .boxselect.brctrl.notautoicon
  {
    display: none;
  }

  .olMapViewport div.olControlZoom {
    left: 72px;
    top: 50px;
    right: initial;
  }

  .olMapViewport .openlayers_behavior_fullscreen_button_panel {
    left: 72px;
    top: 120px;
    right: initial;
  }

  div.vpanel {
    left: 70px;
    top: 5px;
    right: initial;
  }
}

/* Jusqu'à 479px et inférieur
================================================== */
@media screen and (max-width: 479px) {
  div.olControlPersoLayerSwitcher {
    width: 220px;
    z-index: 9999 !important;
  }
}

/* Jusqu'à 320px et inférieur
================================================== */
@media screen and (max-width: 320px) {

}