.nav-link.active {
  box-shadow: 0px 3px 0px 0px #000;
  padding-bottom: 1px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 8px;
  margin-right: 8px;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}

.icone-etape {
  background: #dc3545;
  border-radius: 50%;
  opacity: 0.7;
}

.icone-groupe-etapes .icone-etape {
  position: absolute;
}

.lien-carte.btn-primary {
  /*background: rgb(11, 94, 215) !important;*/
}

.btn-etape {
  color: #0B5ED7;
}

.groupe-etapes {
  border: 2px none #dc3545;
  border-radius: 50%;
  opacity: 0.5;
  display: block;
  width: 50px;
  height: 50px;
  background: no-repeat;
  background-size: cover;
  background-image: url('data:image/svg+xml,%3Csvg width="31.829mm" height="26.538mm" version="1.1" viewBox="0 0 31.829 26.538" xmlns="http://www.w3.org/2000/svg"%3E%3Cg transform="translate(-103.53 -103.53)" fill="%23dc3545" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="2" stroke-width=".079375"%3E%3Ccircle cx="120.2" cy="113.77" r="10.205" opacity="1"/%3E%3Ccircle cx="125.11" cy="119.82" r="10.205" opacity="1"/%3E%3Ccircle cx="113.77" cy="119.63" r="10.205" opacity="1"/%3E%3C/g%3E%3C/svg%3E');
}

.btn-etape:hover {
  background: var(--bs-secondary-bg-subtle) !important;
  color: var(--bs-text-secondary) !important;
}

.btn-etape-lieu {
  cursor: pointer;
  font-weight: 600;
}

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


.bulle-grappe-marqueurs .leaflet-popup-content-wrapper,
.bulle-grappe-marqueurs .leaflet-popup-tip {
  background: #ddd;
  border-radius: 3px;
}

/*.groupe-etapes span {
  background: red;
  border-radius: 50%;
  opacity: 0.5;
  display: block;
  width: 20px;
  height: 20px;
}*/

#menu .lien-carte {

}

#titre-voyage {
  font-size: 12px;
}

#calendrier-voyage {

}

#tableur_wrapper {
  margin: 10px;
  margin-top: 0;
  padding: 10px;
  background: #fff;
}

#tableur_wrapper * {
  font-size: 12px !important;
}

#tableur_wrapper .pagination a {
  font-size: 12px !important;
  padding: 3px 8px;
}

.dataTables_info {
  padding-top: 0 !important;
}

.dataTables_empty {
  height: 800px;
}

.visibilite-colonne:not(:checked) + .form-check-label {
  text-decoration: line-through;
  border-color: transparent;
  background: transparent;
  color: #999;
}

.visibilite-colonne:checked + .form-check-label {
  color: #666;
}

.visibilite-colonne:not(:checked) {
  background: #ddd;
  border: #666;
}

.btn-check:checked + .btn {
  color: #333;
  background-color: #333;
  border-color: var(--bs-btn-active-border-color);
}

#menu-colonnes .form-check-input:checked {
  background-color: #999;
  border-color: #999;
}

#chargement {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fffc;
  background: linear-gradient(180deg, rgba(222,226,230,0.8) 1%, rgba(255,255,255,1) 30%);
  z-index: 10;
}

#chargement::after {
  content: "Chargement des données...";
  font-size: 12px;
  color: #999;
  position: absolute;
  left: 50%;
  top: 250px;
  transform: translate(-50%,0);
}

.loader {
  width: 15px;
  height: 15px;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 200px;
  margin-left: -7px;
}
.loader::after,
.loader::before {
  content: '';
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  animation: rotation 2s ease-in-out infinite;
}
.loader::after {
  /*border-color: #ccc;
  animation-delay: 1s;*/
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

div.dataTables_wrapper div.dataTables_filter {

}

div.dataTables_wrapper div.dataTables_info {
  padding-top: 0;
}

.popover-calendrier {
  box-shadow: 3px 3px 4px 0px #0006;
}

.popover-calendrier .popover-header {
  min-width: 130px;
  padding: 10px;
  font-size: 13px !important;
}

.popover-calendrier .popover-body {
  min-width: 130px;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  font-size: 13px !important;
}


.tooltip-inner {
  font-size: 11px;
}

div.dataTables_wrapper div.dataTables_filter input {
  background: #0d6efd33;
}

.leaflet-control-scale {
  margin-bottom: 15px !important;
  text-align: right;
}

.leaflet-control-scale::before {
  content: "";
  background: transparent;
  border-left: 3px solid black;
  height: 14px;
  position: absolute;
  left: 0;
  top: 11px;
}

.leaflet-control-scale::after {
  content: "";
  background: transparent;
  border-left: 3px solid black;
  height: 14px;
  position: absolute;
  top: 11px;
  right: -2px;
}

.leaflet-control-scale-line {
  background: #fff9;
  border-left: none;
  border-right: none;
  border-bottom: 4px solid black;
  text-shadow: none;
}
.popupKm .leaflet-popup-content-wrapper, .popupKm .leaflet-popup-tip {
  background: #000;
  color: #fff;
}

.popupKm .leaflet-popup-content {
  margin: 5px;
}


.carte-docs {
  margin-left: 0;
  padding: 0;
  margin-top: -1px;
  max-width: 200px;
  width: 200px;
  overflow: hidden;
}

.carte-doc-vignettes-infos {
  max-width: 200px;
  background: #f7f7f7;
  max-width: none;
  width: 100%;
  background: #262b2e;
}

.carte-doc-vignettes {
  height: 123px;
  max-width: 200px;
  min-width: 200px;
  max-width: none;
}

.carte-doc-vignettes-lien {
  display: block;
  text-align: center;
}

.carte-doc-vignettes-lien:hover .shadow-2 {
  opacity: 0.5;
}

.carte-doc-infos {

}

.shadow-2 {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.7) !important
}


.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
  border: 20px solid #666;
}

.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.modal-fullscreen .modal-header {
  border-radius: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}

.modal-fullscreen .modal-header .close {
  position: absolute;
  right: 20px;
  top: 20px;
  background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x' viewBox='0 0 16 16'%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center center no-repeat;
  background-size: 35px;
}

.modal-fullscreen .modal-body {
  overflow: hidden;
  padding: 0;
}

.modal-fullscreen .modal-footer {
  border-radius: 0;
  padding: 0;
  position: relative;
  z-index: 2;
  display: none;
}

.modal-fullscreen .modal-footer .btn-fermer {
  position: absolute;
  bottom: 10px;
  right: 24px;
}