﻿/* ==========================================================================
   Custom styles
   ========================================================================== */

body {
	/* background: url("../img/bg-container.png") repeat-y scroll center top #EDEDED; */
	color: black;
	min-height: 800px;
	font-family: 'arial','verdana','helvetica','serif';
	font-size: 11px;
	margin: 0;
	background-color: white;
}

input[type="checkbox"], input[type="radio"] {
	display: none;
}

.hide {
	display: none !important;
}

/* Chrome Frame Prompt */
.chromeframe { display: block; position: absolute; top: 40px; z-index: 100; width: 100%; margin: 0; text-align: center; font-size: 0.9em; background: #FFFF07; color: black; padding: 1px; }

.container {
	background-color: white;
	-moz-box-sizing: border-box;
	/* border: 1px solid #E5E5E5;
	box-shadow: 0 8px 16px -8px #222222; */
	padding: 0;
}

/* Header */
.page-header {
    position: relative;
    background: url(../img/siteon0.jpg) no-repeat scroll 116px top rgba(0, 0, 0, 0);
    height: 140px;
    padding: 0;
    margin: 0 0;
    left: 0;
    top: 0;
    vertical-align: top;
}
#header-logo h1 {
    display: block;
    font-family: 'arial','verdana','helvetica','serif';
    font-weight: bold;
    margin: 50px 0 0 0;
    position: absolute;
    font-size: 28px;
    /* vertical-align: bottom; */
    /* color: white; */
    top: 0;
    left: 160px;
}
.page-header h1 {
	display: block;
	font-family: 'arial','verdana','helvetica','serif';
	float: left;
	font-weight: bold;
	margin: 75px 0 0 5px;
	position: relative;
	font-size: 33px;
	/* vertical-align: bottom; */
	color: white;

}
.page-header h1 span {
	font-size: 24px;
	font-weight: bold;
}
.page-header h3 {
	display: block;
	float: left;
	font-size: 16px;
	font-weight: bold;
	color: white;
	position: relative;
	margin: 115px 0 0 -205px;
	/* vertical-align: bottom; */
}
.navbar {
    margin-bottom: 1px;
    min-height: 20px;
}
.nav-tabs {
    border-bottom: 1px solid white;
}
#nav {
	padding: 10px 15px 0px 15px;
}
.list-group-item {
	border: none;
}

.footer {
	padding-left: 15px;
}
/* eo Header */

/* colonnes */
.titre-recomm {
	padding-top: 20px;
}
.list-group li {
	padding: 5px;
}
#col1 {
	padding: 0 10px;
	margin: 10px 0px 20px 15px; /* haut droite bas gauche */
}
.table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td {
    padding: 3px;
}
.overview {
	padding-bottom: 10px;
}
a {
	text-decoration: none;
}
h2 {
	font-weight: bold;
	line-height: 20px;
	font-size: 16px;
}
h5 {
    margin: 0;
}
.titre-recomm {
	margin-top: 3px;
}
#col2 {
	margin: 10px 15px 15px 0px; /* haut droite bas gauche */
}
#pdf-link {
	font-size: 14px;
	padding-left: 5px;
}

/* footer */
#logo-pont {
	width: auto;
	height: 50px;
	padding-left: 10px;
}
#logo-meteo {
	width: auto;
	height: 50px;
	padding-right: 10px;
}
#logo-dreal {
	width: auto;
	height: 50px;
	padding-right: 10px;
}
.aa_fl {
float:left;
margin: 0px 5px 0px 5px; /* haut droite bas gauche */
}
.aa_fr {
float:right;
margin: 0px 5px 0px 5px; /* haut droite bas gauche */
}
#p-btn-sm {
    margin: 0 0;
}
/* map elements */
#btn-loc, #btn-stop-loc {
	margin: 6px 7px 0px 0px;
}
.btn-primary {
	margin: 3px 14px 0px 0px;
}
#map {
    height: 540px;
    border-radius: 6px;
}
.leaflet-control-defaultextent-toggle{
    background: #fff url(data:image/gif;base64,R0lGODlhGAAYAOZdACIiIiMjIy8vLyoqKsPDwzMzM0xMTDQ0NGlpaUtLS+Tk5J2dnXd3d7m5ueDg4GdnZykpKSYmJkpKSre3t09PT5eXl4KCgrCwsHNzc1lZWWhoaCcnJ5ubm3R0dFJSUp+fn1RUVJqamoODg8TExD09PYqKijo6OpGRkV1dXVFRUUNDQ3FxcZmZmYCAgEVFRXV1dSgoKIaGhlxcXEdHR5SUlMvLy5iYmNXV1VNTU7GxsbOzs9ra2jExMdbW1isrKywsLFtbW6qqqnh4eGpqat3d3XBwcI2NjWRkZLi4uL+/vyUlJZycnNvb297e3r6+vvf392VlZcbGxq2trWFhYWZmZszMzE5OTsDAwG1tbZWVlZaWlqGhod/f3////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAF0ALAAAAAAYABgAQAf/gF2Cg10KLFASAgISVBWEhFkAklaPlT0Rkpk2XRCZnj4oEwQknp4Dgw0BAFqPLZ0ZFJ4BDYICpSWEURNBpZ4Cgx+qvQAmgjs4AAEflV1XBckgShkJEQeeBUmPLwAezF0jKTqDGJkdXQaZLt5dTj/DCRq9MDldHgAbw5kPhdb5AAkXBpXAd0ABMyED8g1gsE6QAwwJhw3oQMQbB1UyRlSpQeDJAiClAoQg5OCZkUrPAGzpImJIpgJNBHWKIMUbF0FMGsTIdOpBphUNb5jo9cBWJgveLOQTgM6TihOCjkgq4s9AiGEUHFyoMMUfAA5dGHjFooEHDQSkMjEUREBYPiSDHEQkI1CJQL9SM5aAkHSAbsMuCxAYUGQAwQJvgQAAOw==) no-repeat scroll center center;
    background-size: 12px 12px;
}
.leaflet-control-defaultextent-toggle:focus{
    outline: 0;
}
.leaflet-label {
	z-index: 0;
	border-width: 0;
	border-color: rgba(0, 0, 0, 0.6);
	padding: 0 3px;
	background: none repeat scroll 0 0 padding-box #FFFFFF;
	margin-top: 4px;
	font: bold 11px/20px "Helvetica Neue",Arial,Helvetica,sans-serif;
	margin-left: -20px;
}
.leaflet-label:before {
	left: -7px;
	border-right: none;
}
.leaflet-label:before, .leaflet-label:after {
	border-right-width: 5px;
}

/* ------------------------------------------------------------------------- */
#logo-prefecture {
	position: absolute;
	top: 12px;
	left: 50px;
}

.col-sm-offset-7 {
	margin-left: 49.333333%;
}

.leaflet-popup-content-wrapper {
	color: black;
}

.dark-mode {
	background-color: black;
	color: white;
  }

.dark-mode-body {
	background-color: black;
	color: white;
	background: black;
}

.dark-mode-container {
	background-color: black;
	color: white;
	border: none;
	box-shadow: none;
}

.dark-mode-header {
	background-color: #1e1e1e;
}

.dark-mode-navbar-brand{
	color: white !important;
}

/* Applique le dark mode au conteneur principal de Select2 */
.dark-mode-body .select2-container--default .select2-selection--single {
    background-color: #333 !important;
    color: white !important;
    border-color: #555 !important;
}

/* Applique le dark mode au dropdown (liste des options) */
.dark-mode-body .select2-container--default .select2-dropdown {
    background-color: #222 !important;
    border-color: #444 !important;
}

/* Applique le dark mode aux options de la liste */
.dark-mode-body .select2-container--default .select2-results__option {
    background-color: #222 !important;
    color: white !important;
}

/* Change la couleur de survol des options */
.dark-mode-body .select2-container--default .select2-results__option--highlighted {
    background-color: #444 !important;
    color: white !important;
}

/* Bordure et fond de la barre de recherche */
.dark-mode-body .select2-container--default .select2-search__field {
    background-color: #333 !important;
    color: white !important;
    border-color: #555 !important;
}

.btn-secondary {
    background-color: white; /* Couleur du bouton en mode clair */
    color: black;
    border: 1px solid #ccc;
	border: none;
}

.dark-mode-btn-secondary {
	color: var(--bs-btn-active-color);
    background-color: #1e1e1e;
    border-color: var(--bs-btn-active-border-color);
}

tr.info {
	background-color: rgb(26 115 232 / 49%);
	--bs-table-bg: transparent;
}

tr.info td {
	color: white;
}

tr td:nth-child(2) {
	cursor: pointer;
}

#title {
	color: black;
	font-size: 2em;
	text-align: center;
}

#title:hover {
	color: black;
}

#forecast2 {
	margin-bottom: 0;
}

.warning {
	border: 2px solid black;
}

/* tweaks to responsive design behavior */
@media (max-width: 979px) {
    .navbar-fixed-top { margin-bottom: 0; }
    .jumbotron { padding: 20px 0 5px; }
}
@media (max-width: 800px) {
    body { padding: 0; overflow-x: hidden;}
    .navbar, .container { padding-left: 10px; padding-right: 10px; }
    .navbar-brand { display: block; }
    .jumbotron { display: none; }
    #gerbe { background: none; }
	.page-header h1 { margin: 75 0 0 0; font-size: 24px; }
    .page-header h3 { display: none; }
}
@media (max-width: 600px) {
	.page-header h1 { font-size: 14px; }
}
@media (max-width: 400px) {
	.page-header h1 { margin: 50 0 0 0; font-size: 0.8em; }

	/* .page-header h1 span { font-size: 0.6em; } */
	#col1 { margin-top: 10px; }
}

/* Print Handling */
@media print {
    .btn-navbar { display: none !important; }
    #map { box-shadow: none;  }
}

@media (max-width: 430px) {
	.col-6 {
	  display: inline-block;
	  width: 50%;
	}
}

@media (max-width: 1280px) {
	.container-fluid {
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
	}

	#title {
		font-size: 1.6em;
	}

	#legend {
		max-width: 100% !important;
		height: auto;
	}
}
