/****************************************
  Couleurs principales de l'application
****************************************/
/* Palette de couleurs
   ------------------------------------ */
/* Couleurs spécifiques Sispea
   ------------------------------------ */
/* Couleurs de fond
   ------------------------------------ */
/* Couleurs pour les graphiques
   ------------------------------------ */
/* Couleurs pour les textes
   ------------------------------------ */
/* Couleurs de validation des formulaires
   ------------------------------------ */
/* Couleurs pour l'écran du périmètre
   ------------------------------------ */
/* Couleurs pour l'écran des indicateurs
   ------------------------------------ */
/* Règles typographiques générales
******************************************************************************/
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-inline {
  white-space: nowrap;
}
.character-limit--medium {
  max-width: 150px;
  display: inline-block;
  vertical-align: middle;
}
.text-bold {
  font-weight: bold;
}
.text-no-bold {
  font-weight: normal;
}
.text-align-center {
  text-align: center;
}
.text-align-top {
  vertical-align: top;
}
.text-wrap {
  margin: 20px;
  max-width: 90%;
}
/* Classes communes d'affichage
******************************************************************************/
.layout-page-width {
  width: 98% !important;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 1900px;
}
.layout-height-maximised {
  height: 100%;
}
.display-inline {
  display: inline;
}
.display-inline-block {
  display: inline-block;
}
.clear {
  clear: both;
}
/* Marges
******************************************************************************/
.padding-none {
  padding: 0 !important;
}
.padding-bottom--small {
  padding-bottom: 10px;
}
.padding-top--small {
  padding-top: 10px;
}
.padding-top--medium {
  padding-top: 30px;
}
.margin-none {
  margin: 0 !important;
}
.margin-top--none {
  margin-top: 0;
}
.margin-top--small {
  margin-top: 10px;
}
.margin-top--medium {
  margin-top: 30px;
}
.margin-top--large {
  margin-top: 50px;
}
.margin-bottom--small {
  margin-bottom: 10px;
}
.margin-bottom--medium {
  margin-bottom: 30px;
}
.margin-left--small {
  margin-left: 10px;
}
.margin-right--small {
  margin-right: 10px;
}
/* Mixins less
******************************************************************************/
/* Transformation 2D pour rester compatible IE9
******************************************************************************/
.perimeter-hide {
  display: none;
}
.perimeter-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.6);
}
.perimeter-spinner {
  position: absolute;
  height: 50px;
  width: 50px;
  font-size: 50px;
  top: 135px;
  right: 0;
  left: 0;
  margin: auto;
}
.glyphicon {
  font-family: 'Sispea' !important;
}
.glyphicon-remove::before {
  content: "\e929";
}
.perimeterOverview-area {
  position: relative;
  margin-top: 30px;
}
.highlight-enter-setup {
  background: yellow;
}
.highlight-enter-start {
  background: white;
}
.perimeterOverview-fields {
  position: relative;
  margin-top: 35px;
  width: 190px;
  height: 100%;
  border: 1px solid transparent;
}
.perimeterOverview-field {
  height: 35px;
  line-height: 35px;
}
.perimeterOverview-field-details-enabler {
  display: none;
}
.perimeterOverview-field-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: 200px;
  padding-right: 7px;
  margin: 0;
  font-weight: normal;
  text-align: right;
}
.perimeterOverview-field-label::before {
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  cursor: pointer;
}
.perimeterOverview-viewport {
  position: absolute;
  top: 0;
  bottom: -35px;
  left: 200px;
  right: 20px;
  overflow: hidden;
}
.perimeterOverview-container {
  position: absolute;
  top: 35px;
  margin-left: 20px;
  margin-right: 20px;
  transform: translate3d(0px, 0px, 0px);
  transition-property: transform;
  transition-duration: 0.5s;
}
.perimeterOverview-timeline {
  position: absolute;
  top: -35px;
  bottom: 0;
  left: 0;
  right: 0;
}
.perimeterOverview-timeline-markers {
  position: absolute;
  height: 30px;
  width: 100%;
  line-height: 30px;
  white-space: nowrap;
}
.perimeterOverview-field-values {
  position: relative;
  height: 30px;
  line-height: 30px;
  margin-top: 5px;
  white-space: nowrap;
}
.perimeterOverview-state-chunk {
  display: inline-block;
  height: 30px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  padding-left: 6px;
  border: solid transparent;
  border-width: 0 4px 0 6px;
  border-radius: 5px;
  background-clip: padding-box;
  transition-property: width;
  transition-duration: 0.8s;
}
.perimeterOverview-state-chunk i[class^="icon-mission-"] {
  padding: 0 3px;
}
.perimeterOverview-memberCount-details {
  font-size: 90%;
  display: block;
  margin: 5px 0 10px 0px;
  color: #888;
}
.member-timeline {
  position: absolute;
  top: -35px;
  bottom: 0;
  left: 0;
  right: 0;
}
.memberOverview-timeline-markers {
  position: absolute;
  height: 30px;
  width: 100%;
  line-height: 30px;
}
.memberOverview-timeline-chunk {
  display: inline-block;
  height: 30px;
  text-align: center;
  margin-left: 2px;
  margin-right: 2px;
  position: relative;
}
.memberOverview-grid-chunk {
  text-align: center;
  margin-left: 2px;
  margin-right: 2px;
  width: 106px;
  display: inline-block;
}
.collectivity-memberOverview-grid-chunk {
  text-align: center;
  margin-left: 2px;
  margin-right: 2px;
  width: 86px;
  display: inline-block;
}
.membership-direct {
  background-color: #3bc9db;
  border-color: #3bc9db;
}
.membership-via {
  background-color: #99e9f2;
  border-color: #99e9f2;
}
.membership-desservi {
  background-color: #d5d5d5;
  border-color: #d5d5d5;
}
.membership-none {
  background-color: #b9c4cb;
  border-color: #b9c4cb;
}
.membership-municipality {
  background-color: #7ad2d6;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%234b999d' fill-opacity='0.12' fill-rule='evenodd'/%3E%3C/svg%3E");
  border-color: #7ad2d6;
}
.membership-collectivity {
  background-color: #4b999d;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237ad2d6' fill-opacity='0.63' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  border-color: #4b999d;
}
span.membership-initial {
  border-radius: 50%;
  width: 20px;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  font-weight: bold;
  margin-right: 3px;
  text-align: center;
}
span.collectivity-membership-initial {
  border-radius: 8px;
  width: 100px;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  font-weight: bold;
  margin-right: 3px;
  text-align: center;
}
.memberOverview-timeline-chunk span.membership-initial {
  background: #FFF;
}
.membership-available span.membership-initial {
  background: rgba(0, 0, 0, 0.05);
  color: #aaa;
  margin-right: 0;
}
.clicked .membership-selector {
  display: block !important;
}
.menuHidden .membership-selector {
  display: none;
}
.perimeterOverview-grid-chunk {
  height: 30px;
}
.perimeterOverview-grid-chunk:hover {
  border-radius: 5px;
  cursor: pointer;
  background: rgba(234, 45, 149, 0.3);
}
.clicked .perimeterOverview-grid-chunk {
  border-color: #ea2d95;
  border-width: 2px;
  border-style: solid;
  border-radius: 5px;
  cursor: pointer;
  background: rgba(234, 45, 149, 0.4);
}
.dropdown-content-menu {
  right: 120%;
  bottom: -100%;
  transform: translateY(50%);
  display: none;
}
.display .dropdown-content-menu {
  display: block !important;
  z-index: 99999999;
}
.dropdown-content-menu > ul > li button {
  background-color: transparent;
  padding: 5px 15px 5px 15px;
  color: #FFF;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}
.dropdown-content-menu > ul > li button .membership-initial {
  color: #000;
  float: right;
  margin-top: 5px;
}
.dropdown-content-menu > ul > li button.current {
  color: #ea2d95;
}
.dropdown-content-menu > ul > li button.current .membership-initial {
  background: #ea2d95;
}
.dropdown-content-menu > ul > li button.current:hover {
  color: #000;
}
.dropdown-content-menu > ul > li button.disabledItem {
  color: #888;
  background-color: transparent;
}
.dropdown-content-menu > ul > li button.disabledItem span.membership-initial {
  color: #aaa;
  cursor: default;
  pointer-events: none;
  background: #888;
}
.dropdown-content-menu-border {
  left: 100%;
  top: 50%;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-left-color: #313e50;
  border-width: 15px;
  margin-top: -30px;
}
.membership-sector {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 1;
}
.menuEntry-title {
  font-weight: bold;
  white-space: normal;
  display: block;
  line-height: 20px;
}
.header-search--perimeter {
  position: absolute;
  top: 40px;
  width: 200px;
  border-radius: 0;
  border: 1px solid #ddd;
}
.perimeterOverview-fields {
  margin-top: 35px;
}
.perimeter-search-text {
  width: 120px;
}
.perimeter-buttons-area {
  margin-top: 30px;
}
.stickyBanner {
  position: fixed;
  bottom: 35px;
  right: calc(1% + 10px);
  background: #6B7B8B;
  z-index: 1;
  width: calc(81.67% - 10px);
  max-width: 1573.33px;
  padding: 0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  height: 0;
  opacity: 0;
  transition: height .5s 0s, opacity .3s .2s;
  overflow: hidden;
}
.stickyBanner.opened {
  height: 175px;
  overflow: visible;
  opacity: 1;
}
.stickyBanner .banner-title {
  color: #FFF;
  font-size: 120%;
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-top: 1px solid #526679;
  display: flex;
}
.stickyBanner .banner-body {
  display: flex;
  margin: 20px;
}
.stickyBanner .banner-button {
  font-weight: normal;
}
.stickyBanner .banner-button:first-of-type {
  margin-left: auto;
  margin-right: 10px;
}
.stickyBanner .banner-button .icon-close {
  vertical-align: middle;
}
#perimeterOverview-wrapper.banner-opened {
  padding-bottom: 175px;
}
@media (min-width: 1900px) {
  .referentialPage .perimeterFiltersBanner,
  .referentialPage .perimeterSelectedBanner {
    right: calc(50% - 940px);
  }
}
.displayFilter {
  display: block !important;
}
.perimeter-filters-toggle {
  position: absolute;
  left: 0;
}
.perimeterFiltersBanner {
  position: fixed;
  bottom: 35px;
  right: calc(1% + 10px);
  background: #6B7B8B;
  z-index: 1;
  width: calc(81.67% - 10px);
  max-width: 1573.33px;
  padding: 0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  height: 0;
  opacity: 0;
  transition: height .5s 0s, opacity .3s .2s;
  overflow: hidden;
}
.perimeterFiltersBanner.opened {
  height: 175px;
  overflow: visible;
  opacity: 1;
}
.perimeterFiltersBanner .banner-title {
  color: #FFF;
  font-size: 120%;
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-top: 1px solid #526679;
  display: flex;
}
.perimeterFiltersBanner .banner-body {
  display: flex;
  margin: 20px;
}
.perimeterFiltersBanner .banner-button {
  font-weight: normal;
}
.perimeterFiltersBanner .banner-button:first-of-type {
  margin-left: auto;
  margin-right: 10px;
}
.perimeterFiltersBanner .banner-button .icon-close {
  vertical-align: middle;
}
.perimeterSelectedBanner {
  position: fixed;
  bottom: 35px;
  right: calc(1% + 10px);
  background: #6B7B8B;
  z-index: 1;
  width: calc(81.67% - 10px);
  max-width: 1573.33px;
  padding: 0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  height: 0;
  opacity: 0;
  transition: height .5s 0s, opacity .3s .2s;
  overflow: hidden;
}
.perimeterSelectedBanner.opened {
  height: 175px;
  overflow: visible;
  opacity: 1;
}
.perimeterSelectedBanner .banner-title {
  color: #FFF;
  font-size: 120%;
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-top: 1px solid #526679;
  display: flex;
}
.perimeterSelectedBanner .banner-body {
  display: flex;
  margin: 20px;
}
.perimeterSelectedBanner .banner-button {
  font-weight: normal;
}
.perimeterSelectedBanner .banner-button:first-of-type {
  margin-left: auto;
  margin-right: 10px;
}
.perimeterSelectedBanner .banner-button .icon-close {
  vertical-align: middle;
}
.selectedMembersSubscriptions {
  margin: 10px 0 0 0;
  padding: 0;
}
.selectedMembersSubscriptions li {
  display: inline-block;
  margin-right: 10px;
  text-align: center;
}
.selectedMembersSubscriptions li span.membership-initial {
  margin-right: 10px;
}
.selectedMembersSubscriptions li button:hover span.membership-initial {
  background-color: rgba(255, 255, 255, 0.5);
}
.perimeterSelectedBanner-zone {
  margin-right: 20px;
}
.perimeterSelectedBanner-zone:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding-right: 15px;
}
.perimeterSelectedBanner-zone .button-toggle {
  margin-bottom: 5px;
}
.perimeterSelectedBanner-zone-title {
  color: #FFF;
}
@media (min-width: 1300px) {
  .selectedMembersSubscriptions li span.membership-initial {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
.perimeterOverview-time-chunk--with-marker {
  position: relative;
  left: 0;
  top: 0;
  width: 96px;
  margin-left: 7px;
  margin-right: 7px;
  border-radius: 8px;
  height: 30px;
  background-color: #4b76ae;
  color: #FFF;
}
.perimeterOverview-time-chunk--with-marker:hover {
  cursor: pointer;
  background-color: #ea2d95;
}
.collectivity-perimeterOverview-time-chunk--with-marker {
  position: relative;
  left: 0;
  top: 0;
  width: 76px;
  margin-left: 7px;
  margin-right: 7px;
  border-radius: 8px;
  height: 30px;
  background-color: #4b76ae;
  color: #FFF;
}
.collectivity-perimeterOverview-time-chunk--with-marker:hover {
  cursor: pointer;
  background-color: #ea2d95;
}
.perimeterOverview-field-details-enabler + .perimeterOverview-field-label::before {
  content: "\f070";
}
.perimeterOverview-field-details-enabler:checked + .perimeterOverview-field-label::before {
  content: "\f06e";
}