html,
body,
#map {
    height: 100%;
    width: 100%;
    padding: 0;
    padding-top: 40px;
    margin: 0;
    overflow: hidden;
}

.leaflet-sidebar {
    z-index: 1;
}
.sidebar {
    width: 40%;
    overflow: hidden;
    z-index: 1111;
}
.modal {
    left: 20px;
    z-index: 2500;
}
.sidebar-tabs {
    top: 0;
    bottom: 0;
    height: 100%;
    BACKGROUND-COLOR: #381f63;
}

.sidebar-header {
    margin: -10px -20px 0;
    height: 40px;
    padding: 0 30px;
    line-height: 40px;
    font-size: 14.4pt;
    color: #fff;
    background-color: #fa7803;
    overflow-y: hidden;
}

.sidebar-tabs > li.active,
.sidebar-tabs > ul > li.active {
    color: #ff7a01;
    background-color: #fcfdfc;
}

.sidebar-tabs > li,
.sidebar-tabs > ul > li {
    width: 100%;
    height: 40px;
    color: #fefefe;
    font-size: 12pt;
    overflow: hidden;
    transition: all 80ms;
}

.navbar-default {
    background-image: url("BANNER.jpg");
    background-size: 100% 100%;
    border-image-repeat: space;
    height: 80px;

}

.imgcontainer {
    text-align: center;
    margin: 5px 0 5px 0;
    position: relative;
}


/*Configuration du Spinner et ses propriétes*/

.spiner {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 1);
    height: 100%;
    width: 100%;
    left: 0px;
    z-index: 99999999
}

.spiner_img {
    z-index: 99999999;
    position: absolute;
    top: 30%;
    left: 35%;
    height: 50%;
}


/*Fin du spinner*/

.sidebar-table {
    position: absolute;
    width: 100%;
    top: 124px;
    bottom: 0px;
    overflow: auto;
}

/*Configuration de la photo et du titre*/





.leaflet-popup-content {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
}

.leaflet-popup-content-wrapper {
    border-radius: 5px;
}

@media (max-width: 992px) {
    .navbar .navbar-brand {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .url-break {
        word-break: break-all;
        word-break: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

/* Print Handling */

@media print {
    .navbar {
        display: block !important;
    }

    .leaflet-control-container {
        display: none !important;
    }
}

.modal-header {
    padding: 10px;
    text-align: center;
    background-color: #381f63;
    color: white;
    text-shadow: 1px 2px 2px #000;
    text-transform: uppercase;
}

.modal-footer {
    padding: 10px;
    text-align: left;
}

.modal-body {
    max-height: 500px;
    max-width: 600px;
    overflow: auto;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
}

.modal-bod {
    max-height: 450px;
    max-width: 600px;
    overflow: auto;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
}

.modal-b {
    max-height: 450px;
    max-width: 600px;
    overflow-x: hidden;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
    text-align: left;
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    margin-left: 40%;
}
.closebtn2 {
    color: #fff;
    background-color: #d90d47;
    position: absolute;
    right: 15px;
    border-width: inherit;
    z-index: 9999999;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000;
}


/*Fin de configuration du boutton*/


/* Scrollbar styles */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px #0074d9;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background: rgba(0, 186, 227, 0.9);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);
}


/*Scroolbar style fin*/


.leaflet-popup-scrolled {
    border-bottom: 1px solid #aaa;
    border-top: 5px solid #aaa;
    overflow-x: hidden;
}

.leaflet-popup-scrolled table {
    border-bottom: 0.5px solid #ddd;
    overflow-x: hidden;
}

.leaflet-popup-content-wrapper {
    text-align: left;
    border-radius: 5px;
    width: 30px;
}

.leaflet-popup-content {
    padding: 1px;
}

.glyphicon {
    cursor: pointer;
    border-radius: 50%;
}

.table-bordered tbody tr:hover {
    background-color: #fa7803;
    color: snow;
    font-weight: normal;
    cursor: pointer;
}

.table-bordered tbody tr:active {
    background-color: #02294a;
    color: white;
    font-weight: bold;
}

.table-hover {
    cursor: pointer;
}


/*Propriété du modal*/

@media (max-width: 720px) {
    .modal-dialog {
        width: 375px;
        margin: 30px auto;
    }
}



label {
    display: inline-block;
    font-family: "sans-serif";
}


/*
==========================================
DEBUT
==========================================
*/
.tooltip-inner {
    color: #eee;
    font-size: 14px;
    background: #074219;
    border: outset 2px #fff;
    background-size: contain;
    text-shadow: 1px 1px 1px #111;
    font-family: sans-serif
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-bottom-color: #000;
    border-width: 0 5px 5px;
}

.btn span.glyphicon {
    opacity: 0;
}

.btn.active span.glyphicon {
    opacity: 1;
}

.btn {
    margin: 0;
    text-transform: uppercase;
    word-wrap: break-word;
    white-space: normal;
    cursor: pointer;
    border: 5px;
    border-radius: 0rem;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 3px 0 rgba(0, 0, 0, 0.12);
    padding: .84rem 1.14rem;
    font-size: 1rem;
    font-family: Arial;

}

.btn-default {
    color: #FFF;
    background-color: #381f63 !important;
}

.btn-default:not([disabled]):not(.disabled):focus,
.btn-default:not([disabled]):not(.disabled):checked,
.show > .btn-default.dropdown-toggle {
    background-color: #fa7803 !important;
    -webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.18), 0 2px 10px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 2px 10px 0 rgba(0, 0, 0, 0.15);
}


.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 5px;
}

table th {
    font-size: 12px;
    font-weight: bold;
}

table td {
    font-size: 12px;
    font-weight: 400;
}

#titre_stat {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background-color: #228232;
    color: white;
    text-transform: uppercase;
    text-shadow: black 1px 1px 1px;
}

#citoy3 {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    background-color: #333;
    color: white;
    text-transform: uppercase;
    text-shadow: black 1px 1px 1px;
}


#citoy2 {
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    color: black;
    text-transform: uppercase;
}

/*
==========================================
FIN
==========================================
*/
/* checkbox csss */
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.img1{
  width: 490px;
  height: auto;
}
.img2{
  width: 235px;
  height: 235px;
  align-content: center;
  align-items: center;
}
.citoy3 {
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    background-color: #084b99;
    color: white;
    text-transform: uppercase;
    text-shadow: black 1px 1px 1px;
}
.citoy31 {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    background-color: #af092c;
    color: white;
    text-transform: capitalize;
    text-shadow: black 1px 1px 1px;
}