*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  text-decoration:none;
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
}

html,
body{
  overflow:hidden;
  -moz-user-select: none; /* Firefox */
  -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
  -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
  user-select: none; /* Propriété standard */
}

input:disabled,
input[disabled]{
  color:var(--textColor);
  border-color: var(--textColor);
  opacity:1;
}

textarea:focus, input:focus{
  outline: none;
}

/* Phoneview */
.phone {
  border: 40px solid #ddd;
  border-width: 55px 7px;
  border-radius: 40px;
  margin: 50px auto;
  overflow: hidden;
  transition: all 0.5s ease;
  width: 400px;
  height: 750px;
}

.phone #normalView {
  border: 0;
  width: 100%;
  height: 100%;
}

.phone.view {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  box-shadow: 0px 3px 0 #BBB, 0px 4px 0 #BBB, 0px 5px 0 #BBB, 0px 7px 0 #BBB, 0px 10px 20px #666;
}

/* End */

a, button{
  color:var(--textColor);
}

.primaryButton{
  display:inline-block;
  height:40px;
  padding:10px 15px 12px 15px;
  margin:0px 15px 10px 0px;
  font-size:16px;
  font-family:"Poppins Bold" !important;
  line-height: 16px;
  border:none;
  border-radius: 19px;
  vertical-align: top;
}

.secondaryButton{
  display:inline-block;
  height:40px;
  padding:10px 15px 12px 15px;
  margin:0px 15px 10px 0px;
  font-size:16px;
  font-family:"Poppins Bold" !important;
  line-height: 16px;
  border:none;
  border-radius: 19px;
}

.primaryButton.svg span,
.secondaryButton.svg span{
  position:relative;
  bottom:3px;
  padding-left:10px;
}

.primaryButton.svg svg,
.secondaryButton.svg svg{
  width:18px; height:18px;
  /* color TODO */
}

.commonButton{
  display:inline-block;
  height:40px;
  padding:12px 15px;
  margin:0px 15px 10px 0px;
  font-size:16px;
  font-family:"Poppins Bold" !important;
  line-height: 16px;
  color:var(--textColor);
  background-color: var(--backgroundSelect);
  border:none;
  border-radius: 19px;
}

svg {
  pointer-events: none;
}

.POI_text {
  color:var(--textColor);
}

/* override inline colors */
.POI_text * {
  color:var(--textColor) !important;
}

.POI_text a {
  color: #007bff !important;
  text-decoration: underline;
}

.POI_text u {
  text-decoration-line: underline;
}

.POI_text s {
  text-decoration: line-through;
}

.POI_text blockquote {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
  border-left: 4px solid #CCC;
  padding-left: 8px;
}

.POI_text pre {
  display: block;
  font-family: monospace;
  white-space: pre-wrap;
  margin: 1em 0;
}

#UI{
  display:block;
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  z-index:0;
  overflow: hidden;
}

  /* UI Common */
  #UI .hide{
      display:none!important;
  }

  #UI .btn_round{
    display:inline-block;
    width:50px;height:50px;
    margin:0; padding:0;
    border-radius:50%;
    background:var(--backgroundSelect);
    cursor:pointer;
    border:none;
  }

  #UI .ui-box-header{
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0;
    padding-top: 10px;
    text-align: center;
    font-size: 16px;
    color: var(--textColor);
    line-height: 1.3;
    font-family: 'Poppins Medium';
  }

  #UI .menu_button{
    display:block;
    width:95%;height:50px;
    padding-left: 50px;
    margin:auto;margin-bottom:5px;
    background-color:var(--backgroundSelect);
    background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    color:var(--textColor);
    border:none;
    border-radius: 5px;
    font-size:16px;
    line-height: 1.3;
    font-family: 'Poppins Medium';
  }

  #UI .inputSearch{
      display:block;
      width:100%; height:30px;
      padding:6px 25px 5px 10px;
      text-align: left;
      color:var(--textColor);
      background: var(--backgroundSelect);
      border:none;
      border-radius:10px;
      font-size: 14px;
      font-weight: bolder;
  }

  #UI .inputSearch.cancelable{
    background-image: url('/assets/default/croix.svg');
    background-position: 98% center;
    background-size: 12px;
    background-repeat: no-repeat;
  }

  /* LANGAGE */
  #langSelectPlaceHolder{
    position:absolute;
    bottom:10px;left:10px;
    width:50px; height:50px;
    margin:0;
    border-radius:25px;
    z-index:50;
  }

  #langSelect{
    position:absolute;
    bottom:10px;left:10px;
    width:50px; height:50px;
    margin:0;
    background:transparent;
    z-index:50;
  }

    .lang_french{
      background:url('/i18n/flags/france.svg') no-repeat !important;
      background-size: contain !important;
      border:1px solid !important;
    }
    .lang_english{
      background:url('/i18n/flags/united-kingdom.svg') no-repeat !important;
      background-size: contain !important;
      border:1px solid !important;
    }
    .lang_german{
      background:url('/i18n/flags/germany.svg') no-repeat !important;
      background-size: contain !important;
      border:1px solid !important;
    }
    .lang_italian{
      background:url('/i18n/flags/italy.svg') no-repeat !important;
      background-size: contain !important;
      border:1px solid !important;
    }
    .lang_spanish{
      background:url('/i18n/flags/spain.svg') no-repeat !important;
      background-size: contain !important;
      border:1px solid !important;
    }
    .lang_chinese{
      background:url('/i18n/flags/china.svg') no-repeat !important;
      background-size: contain !important;
      border:1px solid !important;
    }
    .lang_japanese{
      background:url('/i18n/flags/japan.svg') no-repeat !important;
      background-size: contain !important;
      border:1px solid !important;
    }

  #UI #langSelectOther{
    display:block;
    position:absolute;
    bottom:10px;left:10px;
    width:70px;height:auto;
    padding:5px;
    z-index:70;
    background:var(--backgroundInput);
    border:none;
    border-radius: 0;
    box-shadow:0px -1px 2px rgba(0, 0, 0, 0.75);
  }

  #UI .ui-box-content-lang{
    display:block;
    width:100%;height:auto;
    margin:0;padding:0;
    text-align: center;
  }

  /* ACCESSIBILITY */

  #accessSelectPlaceHolder{
    position:absolute;
    bottom:10px;right:10px;
    width:50px; height:50px;
    margin:0;
    border-radius:25px;
    z-index:50;
  }

  #accessSelect{
    position:absolute;
    bottom:10px;right:10px;
    width:50px; height:50px;
    margin:0;
    background:var(--backgroundSelect);
    border-radius:25px;
    z-index:50;
  }

    #accessSelectToggle{
      -webkit-mask-image: url("/assets/default/Accessibilite.svg");
      mask-image: url("/assets/default/Accessibilite.svg");
      background-repeat: no-repeat;
      background-size: contain !important;
    }

  #UI #accessMenu{
    display:block;
    position:absolute;
    bottom:70px;right:5%;
    width:90%;height:auto;
    z-index:70;
    background:var(--backgroundColor);
    color:var(--textColor);
    border:0;
    border-radius: 0;
    box-shadow:0px -1px 2px rgba(0, 0, 0, 0.75);
  }

  #UI .ui-box-content-access{
    display:block;
    width:100%;height:auto;
    margin:0;padding:10px;
    text-align: center;
  }

  #UI .menu_button.outToApp{
    background-image: url("/assets/default/app.svg");
  }

  #UI #mapGeoLoc{
    position: absolute;
    right: 10px;
    bottom: 65px;
    z-index: 50;
  }

  #UI #mapGeoLoc .mapboxgl-ctrl-group{
    border:none!important;
    box-shadow:none!important;
    background:transparent!important;
    border-radius: 0!important;
  }

  #UI #mapGeoLoc .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{
    background-image: url('/assets/default/gps.svg')!important;
    width:40px;height:40px;
    background-size: 100%;
    background-position: 50% 50%;
  }

  #UI #mapGeoLoc .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{
    background-image: url('/assets/default/gps_on.svg')!important;
    width:40px;height:40px;
    background-size: 100%;
    background-position: 50% 50%;
  }

  #UI #mapGeoLoc button{
    width:40px;height:40px;
    margin:0;padding:0;
    border:none;
    background-color:var(--backgroundSelect);
    background-image: none;
    border-radius: 50%;
    color:var(--textColor);
    box-shadow:0px -1px 2px rgba(0, 0, 0, 0.75);
  }

  #UI #mapGeoLoc button div.geolocIcon,
  #UI #mapGeoLoc button div.geolocIcon svg{
    width: 40px;height:40px;
    margin:0;padding:0;
    border:none;
    background-color: transparent;
  }

  #UI #mapGeoLoc button div.geolocIcon svg path,
  #UI #mapGeoLoc button div.geolocIcon svg circle,
  #UI #mapGeoLoc button div.geolocIcon svg rect{
    fill: var(--textColor);
  }

  /* BRAND LOGO */

  #mapHeaderPlaceHolder{
    width:95%;height:50px;
    position:absolute;
    top:10px;left:2.5%;
    z-index:50;
    background-color: #fafafa;
    border: none;
    border-radius: 26px;
  }

  #mapHeader{
    width:100%;height:52px;
    position:absolute;
    top:10px;left:0;
    padding:0 12px;
    display:grid;
    grid-template-columns: 50px auto;
    grid-template-rows: 50px;
    z-index:50;
    background-color: transparent;
    /*overflow:hidden;*/
  }

  #brandLogo{
    grid-column: 1;
    grid-row: 1;
    width:50px; height:50px;
    margin:0;
    background:var(--backgroundColor) url('/assets/default/Weezy.png') no-repeat;
    background-size: 100%;
    background-position: 50% 50%;
    border: none;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    box-shadow:0px -1px 2px rgba(0, 0, 0, 0.75);
  }

  #searchBox{
    width:100%;height:50px;
    padding:0;
    background:transparent;
    border:none;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    overflow: hidden;
    box-shadow:0px -1px 2px rgba(0, 0, 0, 0.75);
  }

  #searchBox .inputSearch{
    height:50px!important;
    padding:11px 7px 11px 7px!important;
    font-size:16px!important;
    line-height: 20px;
    color:var(--textColor);
    border:none;
    border-radius: 0;
  }

  .cat_list_container{
    width: 100%;height: 40px;
    padding: 7px 10px 0px 10px;
    background-color: transparent;
    overflow-y: hidden;
    overflow-x: scroll;
    text-wrap: nowrap;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .cat_list{
    width:fit-content; height:30px;
  }

  .cat_title{
    display:block;
    width: 100%;
    text-align: center;
    padding:20px 0;
  }

  .cat_title span{
    display:inline-block;
    height: 24px;
    padding: 5px 20px;
    font-size: 12px;
    font-family: "Poppins Bold" !important;
    line-height:14px;
    text-transform:uppercase;
    color:var(--textColor);
    border-radius: 12px;
  }

  .title_left,
  .title_right{
    display:inline-block;
  }

  .title_left{
    width:50%;
    text-align:left;
    position: relative;
    top: 12px;
    color:var(--textColor);
  }

  .title_left strong{
    font-size:18px;
  }

  .reduceModale{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0px;
    left: 10px;
    background: transparent;
    border: none;
    background:url("/assets/default/reduce.svg") no-repeat;
    background-position: center middle;
    background-size: contain;
  }

  .ui-draggable .reduceModale{
    display:none;
  }

  #mapCategories{
    width: 100%;height: 34px;
    position: absolute;
    top: 65px;left: 0px;
    padding: 0 6px;
    padding-top:5px;
    z-index: 61;
    background-color: transparent;
    overflow-y: hidden;
    overflow-x: scroll;
    text-wrap: nowrap;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  #mapCategories::-webkit-scrollbar,
  .cat_list_container::-webkit-scrollbar{
    display:none;
  }

    #mapCategories .blankCategory{
      display:inline-block;
      width: 115px; height: 28px;
      background-color:var(--backgroundColor);
      border-radius: 14px;
    }

    #mapCategories .buttonCategory,
    .cat_list_container .buttonCategory{
      display:inline-block;
      width: auto; height: 28px;
      padding: 10px;
      margin:0 5px 0 5px;
      background-color: var(--backgroundSelect);
      border-radius: 14px;
      border:none;
      line-height:14px;
      font-size: 14px;
      font-family:'Poppins Medium' !important;
      box-shadow:0px -1px 2px rgba(0, 0, 0, 0.75);
    }

    .cat_list_container .buttonCategory{
      box-shadow: none;
    }

    #mapCategories .buttonCategory img,
    #mapCategories .buttonCategory svg,
    .cat_list_container .buttonCategory img,
    .cat_list_container .buttonCategory svg{
      height:20px;width:20px;
      position:relative;
      bottom:7px;
    }

    #mapCategories .buttonCategory span,
    .cat_list_container .buttonCategory span{
      position:relative;
      vertical-align: top;
      bottom:3px;
      padding-left:2px;
      color:var(--textColor);
      font-family: 'Poppins Medium';
    }


    /* Modal */
  #globalCard{
    position:absolute;
    display:block;
    bottom:0;left:0;
    width:100%;height:100%;
    z-index:70;
    background-color: var(--backgroundColor);
    border: none;
    box-shadow:0px -1px 2px rgba(0, 0, 0, 0.75);
    border-top-left-radius:10px;
    border-top-right-radius:10px ;
  }

  .modale_speech{
    display:block;
    width:90%;
    margin:10px auto;
    font-weight: bold;
    font-size:18px;
    color:var(--textColor);
  }

    #globalCardSizeHandler{
      height:20px;
      cursor:grab;
      background: transparent;
      background-image: url('/assets/default/handler.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

      #globalCardSizeHandler svg{
        height:20px;width:auto;
        display:block;
        margin:auto;
      }

    /* Modale de recherche */
    #globalCardContentContainer{
      width: 100%;
    }

    #globalCard.format_full #globalCardContentContainer{
      max-height:100%;
      overflow-y: scroll;
      overflow-x: hidden;
    }

    #globalCardContentContainer p{
      color: var(--textColor);
      padding: 30px 30px 0px 20px;
      text-align: center;
      font-family: 'Poppins Medium';
      font-size: 18px;
    }

    #globalCardContentContainer .MOD_search{
      padding-top:150px;
    }

    #globalCardContentContainer .POI_title{
      padding:0px 20px;
    }

      #globalCard .POI_name{
        font-size: 22px;
        font-family: "Poppins Bold" !important;
        padding-bottom:5px;
        color:var(--textColor);
        padding-right: 30px;
      }

      #globalCard .POI_cat{
        padding-bottom:5px;
      }

        #globalCard .POI_cat span{
          display:inline-block;
          height: 24px;
          padding: 5px 20px;
          font-size: 12px;
          font-family: "Poppins Bold" !important;
          line-height:14px;
          text-transform:uppercase;
          color:#000000;
          border-radius: 12px;
        }

      #globalCard .POI_extid{
        font-size:18px;
        font-weight:normal;
        font-family: "Poppins Medium" !important;
        color:var(--textColor);
      }

    #globalCardContentContainer .POI_infos{
      padding:10px 20px;
    }

    #globalCardContentContainer .POI_content{
      padding:0px 20px;
    }

    #globalCardContentContainer .POI_image{
      width:100%;
      border-radius: 20px;
      background:#fff;
      margin-bottom:23px;
      border-radius: 12px;
      overflow: hidden;
    }

      #globalCardContentContainer .POI_image img{
        width:100%;
      }

    #globalCardContentContainer .POI_text{
      font-size: 18px;
      padding-bottom:100px;
      text-align: center;
    }

  button.closeModale{
    width:40px; height:40px;
    position: absolute;
    top: 5px;
    right: 5px;
    border: none;
    background: transparent url("/assets/default/fermer.svg") no-repeat;
    background-position: center middle;
    background-size: contain;
    border-radius: 20px;
    z-index:100;
  }

  /* SEARCH */

  #UI #search_form{
    display:grid;
    width:100%;height:65px;
    padding: 10px 10px 0 10px;
    grid-template-columns: 50px auto;
    grid-template-rows: 50px;
  }

  #UI .searchDestLogo{
    grid-column: 1;
    grid-row: 1;
    width: 50px;
    height: 50px;
    margin: 0;
    background: var(--backgroundSelect) url(/assets/default/Weezy.png) no-repeat;
    background-size: 100%;
    background-position: 50% 50%;
    border: none;
    border-right: none;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
  }

  #UI .searchDestInput{
    width: 100%;
    height: 50px;
    padding: 0;
    background: transparent;
    border: none;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border: 1px solid;
    border-left:none;
    overflow: hidden;
  }

  #UI .searchDestInput input{
    height: 50px !important;
    padding: 11px 7px 11px 7px !important;
    font-size: 16px !important;
    line-height: 16px;
    color: var(--textColor);
    border: none;
    border-radius: 0;
  }


  #UI .starting-point button,
  #UI .dest-point button{
    position: absolute;
    z-index: 60;
    top: 20px;
    right: 35px;
    width: 30px;
    height: 30px;
    background:transparent;
    background-image: url(/assets/default/croix.svg);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: 10px 8px;
    border:none;
  }  

  #UI #search_results{
    width:100%;
    overflow:auto;
    padding:0 20px;
    height: 500px;
  }

    #UI #searchResults{
      width:100%;
    }

  #UI .ui-box-categories{
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row:2;
    display:flex;
    width:100%;height:70px;
    margin:0;padding:0 5px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 2px;
    overflow-x: auto;
  }

    /* Cat */
    #UI .ui-box-categories .ui-box-category{
      flex-basis:25%;
      text-align: center;
    }

    #UI .ui-box-categories .ui-box-category .poi_cat_button{
      display:inline-block;
      width:50px;height:50px;
      margin:0 5px;padding:5px;
      border:1px solid !important;
      border-radius: 10px;
      box-shadow:none;
      background-color: var(--backgroundInput);
    }

    #UI .ui-box-categories .ui-box-category .poi_cat_button svg{
      width:40px;height:40px;
    }

    #UI .ui-box-categories .ui-box-category .poi_cat_button.active{
      box-shadow: 5px 2px 5px #cacaca;
    }

  #UI .ui-box-title-search{
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row:3;
    height:40px;
    padding:5px;
    text-align: center;
    color: var(--textColor);
    font-size: 21px;
    font-weight: bolder;
    line-height:40px;
  }
    

  #UI .ui-box-content-search{
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row:4;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #UI #selectGPS{
    display:block;
    height:38px;width:100%;
    color:var(--textColor);
    background: var(--backgroundSelect);
    background-image:url("/assets/default/gps_on.svg");
    background-repeat: no-repeat;
    background-position: 10px 5px;
    background-size: 28px 28px;
    font-size: 16px;
    font-family: 'Poppins Medium';
    line-height: 1.2;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border:none;
    margin:5px 0px;
    margin-bottom:0px;
    padding-left:50px;
    text-align:left;
  }

  #UI #selectOnMap{
    display:block;
    height:38px;width:100%;
    color:var(--textColor);
    background: var(--backgroundSelect);
    background-image:url("/assets/default/cliquez-sur.svg");
    background-repeat: no-repeat;
    background-position: 10px 5px;
    background-size: 28px 28px;
    font-size: 16px;
    font-family: 'Poppins Medium';
    line-height: 1.2;
    border-radius: 10px;
    border:none;
    margin:5px 0px;
    padding-left:50px;
    text-align:left;
  }

  #UI #selectOnMap.withGPS{
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    margin-top:2px;
  }

  #UI .no_result_floor{
    color:var(--textColor);
    font-size: 14px;
    font-style: italic;
    padding:0 15px;
  }

  #UI .buildingTitle{
    font-size:22px;
    color:var(--textColor);
    padding:5px 0px 0px 20px;
    font-family: 'Poppins Bold';
  }

  #UI .floorTitle{
    display: inline-block;
    height: 24px;
    font-size: 14px;
    padding: 4px 12px;
    margin: 10px 20px;
    color: var(--textColor);
    line-height: 14px;
    border: 1px solid;
    border-radius: 14px;
  }

  #UI .floorList,
  #UI .poiList{
    background-color: var(--backgroundSelect);
    border-radius: 15px;
    margin: 10px 0px;
    overflow:hidden;
  }

  #UI .POI{
    display: flex;
    width: 100%;
    height: 45px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    border-bottom: 1px solid var(--backgroundColor);
    text-align: left;
    color:var(--textColor);
    align-items: center;
  }

  #UI .POI.withFloor{
    height:60px;
    flex-wrap: wrap;
  }

  #UI .POI:last-child{
    border: none;
  }
  
    #UI .POI.featured{
      background-image:url('data:image/svg+xml;utf8,<svg version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <path d="M 12,18.952 C 10.371621,19.7972 8.7602311,20.677762 7.1210095,21.500395 6.0841687,21.912917 4.9824631,20.779229 5.3524406,19.747631 5.6382937,18.080421 5.9241469,16.41321 6.21,14.746 4.9029152,13.458442 3.5675866,12.197847 2.2785278,10.89308 1.5652394,10.034229 2.3033396,8.6351431 3.3992567,8.6681697 5.0735045,8.4251131 6.7477522,8.1820566 8.422,7.939 9.2425947,6.2979496 10.028959,4.6384522 10.871401,3.0091758 11.467609,2.0654057 13.025866,2.335611 13.333044,3.3876809 14.081696,4.9047872 14.830348,6.4218936 15.579,7.939 c 1.813753,0.2731573 3.634451,0.5081423 5.443774,0.8056506 1.082466,0.27503 1.307558,1.8413404 0.401547,2.4589704 -1.21144,1.18046 -2.422881,2.360919 -3.634321,3.541379 0.300734,1.80981 0.640427,3.614379 0.916298,5.427535 0.07205,1.114027 -1.347081,1.812307 -2.214397,1.141354 C 14.994601,20.526593 13.4973,19.739296 12,18.952 Z" class="svgFill"/></svg>');
      background-position: 90% 50%;
      background-repeat: no-repeat;
      background-size: 30px 30px;
    }

    #UI .POI.gps{
      background-image:url('data:image/svg+xml;utf8,<svg fill="none" height="512" viewBox="0 0 48 48" width="512" version="1.1" id="svg16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <defs id="defs20" /><g clip-rule="evenodd" fill="rgb(0,0,0)" fill-rule="evenodd" id="g14"><path d="m 24,30 c 3.3137,0 6,-2.6863 6,-6 0,-3.3137 -2.6863,-6 -6,-6 -3.3137,0 -6,2.6863 -6,6 0,3.3137 2.6863,6 6,6 z" id="path2" /><path d="m24 33c4.9706 0 9-4.0294 9-9s-4.0294-9-9-9-9 4.0294-9 9 4.0294 9 9 9zm0 3c6.6274 0 12-5.3726 12-12s-5.3726-12-12-12-12 5.3726-12 12 5.3726 12 12 12z" id="path4" /><path d="m24 6.5c.8284 0 1.5.67157 1.5 1.5v5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5v-5c0-.82843.6716-1.5 1.5-1.5z" id="path6" /><path d="m24 33.5c.8284 0 1.5.6716 1.5 1.5v5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5v-5c0-.8284.6716-1.5 1.5-1.5z" id="path8" /><path d="m41.5 24c0 .8284-.6716 1.5-1.5 1.5h-5c-.8284 0-1.5-.6716-1.5-1.5s.6716-1.5 1.5-1.5h5c.8284 0 1.5.6716 1.5 1.5z" id="path10" /><path d="m14.5 24c0 .8284-.6716 1.5-1.5 1.5h-5c-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5h5c.8284 0 1.5.6716 1.5 1.5z" id="path12" /></g></svg>');
      background-position: 90% 50%;
      background-repeat: no-repeat;
      background-size: 30px 30px;
    }

    #UI .POI .name{
      display:block;
      width:100%;height:30px;
      padding:5px 10px 6px 10px;
      margin:0;
      font-size: 14px;
      line-height: 1.6;
      overflow:hidden;
      font-family: 'Poppins Medium';
    }

    #UI .POI.withFloor .name{
      padding: 5px 12px 0px 12px;
      height:24px;
      width: 100%;
      overflow: hidden;
      overflow-wrap: normal;
      line-height: 1.5;
    }

    #UI .POI .floor{
      display:block;
      width:100%;height:20px;
      margin:0px; padding: 0px 12px 5px 12px;
      font-size: 13px;
      line-height: 14px;
      font-weight: normal;
      text-decoration: italic;
    }

  /* PARCOURS */

  #UI .poiList .POI{
    height: 60px;
    position:relative;
  }

  #UI .poiList .POI.active{
    background: var(--textColor)!important;
  }

  #UI .poiList .POI.withExtPois{
    align-items: start;
  }

  #UI .poiList .POI .name{
    padding:3px 10px 3px 60px
  }

  #UI .poiList .POI.active .name{
    color:var(--backgroundSelect)!important;
  }

  #UI .POI .stepNumber{
    position: absolute;
    top: 15px;
    left: 10px;
    width: 30px;
    height: 30px;
    background: var(--textColor);
    border-radius: 15px;
    color: var(--backgroundSelect);
    text-align: center;
    font-family: 'Poppins Bold';
    font-size: 20px;
  }

  #UI .POI.active .stepNumber{
    background: var(--backgroundSelect)!important;
    color: var(--textColor)!important;
  }

  #UI .POI .extPois{
    position:absolute;
    top:30px;
    left:70px;
  }

  #UI .POI .extPoi{
    display: inline-block;
    position:relative;
    width:35px;
    height:20px;
    padding:0px;
    text-align: center;
    border-radius: 10px;
  }

  #UI .POI .extPoi svg{
    width: 18px;
    height: 18px;
    fill: #ffffff;
    position: relative;
    left: 2px;
    top: 1px;
  }

  /* SELECT ON MAP */

  #UI .searchOnMap{
    grid-column: 2;
    grid-row:5;
    text-align: center;
  }

  #UI .selectOnMap{
    width:250px;height:40px;
    border:none;
    background:var(--backgroundInput);
    border-radius:10px;
    color:var(--textColor);
    font-size: 15px;
    font-weight:bolder;
    padding:0px 0px 0px 40px;
    border:1px solid;
    background-image: url("/assets/default/cliquez-sur.svg");
    background-position: 10px 50%;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    box-shadow: 5px 2px 5px #cacaca;
  }

  /* STAIRS */
  #UI #wayPathType{
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row-start:2;
    grid-row-end:span 4;
    display:grid;
    width:100%;height:100%;
    padding-left:5%;
    z-index:70;
    background:transparent;
    border:none;
    grid-template-columns: 100%;
    grid-template-rows: 80px 80px 80px 80px;
  }

  /* APP REDIRECT */

  #appRedirect{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    background:rgba(0, 0, 0, 0.75);
    z-index:120;
  }

    #appRedirectContainer{
      width:90%;height:50%;
      position:absolute;
      top:25%;left:5vw;
      background:var(--backgroundColor);
      border:none;
      border-radius:25px;
      text-align: center;
    }

      #appRedirectText{
        color:var(--textColor);
        padding:30px 25px 10px 25px;
        font-size:18px;
      }

      #appRedirectText p{
        padding-bottom:20px;
      }

      #appRedirectButtons{
        position:absolute;
        bottom:20px;left:0;
        width:100%;
      }

  /* DIRECTION */

  #UI #guidanceInfos{
    display: block;
    position:absolute;
    top:0;left:0;
    width:100%;height:130px;
    margin:0;padding:0;
    background-color:var(--backgroundColor)!important;
  }

    #UI #guidanceInfosContainer{
      display:grid;
      width:100%;height:130px;
      margin:0;padding:0;
      grid-template-columns: 40px auto 40px;
      grid-template-rows: 90px 40px;
    }

    #UI #cancelGuidance{
      background:transparent;
      border:none;
      background-image: url("/assets/default/return.svg");
      background-repeat: no-repeat;
      background-size: 30px 30px;
      background-position: center 10px;
    }

    #UI #guidanceInfosPoints{
      padding-left: 30px;
      background-image: url("/assets/default/waypath.svg");
      background-size: 30px;
      background-position: 0px 10px;
      background-repeat: no-repeat;
    }

    #UI #guidanceInfosPoints .starting-point,
    #UI #guidanceInfosPoints .dest-point{
      padding: 7px 0px;
    }

    #UI #guidanceInfosPoints #guidanceStart,
    #UI #guidanceInfosPoints #guidanceDest{
      border:1px solid var(--textColor);
      height:30px;
      border-radius: 15px;
      color:var(--textColor);
    }

    #UI #guidanceInfosPoints #guidanceStartCancel{
      top: 7px;
      right: 45px;
    }

    #UI #guidanceInfosPoints #guidanceDestCancel{
      top: 51px;
      right: 45px;
    }

    #UI #guidanceDirectionSwitcher{
      grid-column:span 3;
      padding:5px 10px;
      overflow-x: scroll;
      overflow-y: hidden;
      text-wrap: nowrap;
      white-space: nowrap;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    #UI #guidanceDirectionSwitcher button{
      display:inline-block;
      width: auto; height: 28px;
      padding: 10px;
      margin:0 5px 0 5px;
      background-color: var(--backgroundSelect);
      border-radius: 14px;
      border:none;
      line-height:14px;
      font-size: 14px;
      font-family:'Poppins Medium' !important;
      box-shadow:0px -1px 2px rgba(0, 0, 0, 0.75);
    }

    #UI #guidanceDirectionSwitcher button.active{
      color:#000000;
    }

    #UI #guidanceDirectionSwitcher button svg{
      height:18px;width:18px;
      position:relative;
      bottom:5px;
    }

    #UI #guidanceDirectionSwitcher button svg path{
      fill:#000000;
    }

    #UI #guidanceDirectionSwitcher button span{
      position:relative;
      vertical-align: top;
      bottom:3px;
      padding-left:2px;
      color:var(--textColor);
      font-family: 'Poppins Medium';
    }

    #UI #guidanceDirectionSwitcher button.active span{
      color:#000000;
    }

  #currentDirection{
    display:grid;
    position:absolute;
    top:0;left:0;
    width:100%;height:90px;
    background-color: var(--backgroundInput);
    box-shadow: 0px 2px 5px #cacaca;
    border:none;
    border-radius: none;
    text-decoration:none!important;
    grid-template-columns: 30px auto 30px;
    grid-template-rows: auto;
    z-index: 60;
  }

  .cancel-selectOnMap{
    grid-row: 1;
    grid-column: 1;
    display:block;
    width:30px; height:50px;
    background-color:transparent;
    background-image: url("/assets/default/return.svg");
    background-repeat: no-repeat;
    background-position: 50% 14px;
    background-size: 20px 20px;
    border:none;
  }

  .inverse-departureAndArrival{
    grid-row: 1;
    grid-column: 3;
    width: 40px;
    height: 90px;
    background-color: transparent;
    background-image: url(/assets/default/echanger.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 30px;
    border: none;
  }


  #currentDirection .ui-box-search{
    grid-row: 1;
    grid-column: 2;
    width:100%;
  }

  #currentDirection.onGuidance{
    height:50px;
  }

  #currentDirection.onGuidance .starting-point{
    display:none;
  }

  #currentDirection.onGuidance .ui-box-search{
    height:50px;
    padding:0;
    background-image: none;
  }

  #stepperDirection{
    position:absolute;
    bottom:0;left:5%;
    width:90%;height:100px;
    background-color: transparent;
    border:none;
  }

  #destinationPoint{
    display:block;
    position:absolute;
    top:0;left:0;
    width:100%;height:50px;
    border:none;
    border-radius: none;
    text-decoration:none!important;
    z-index: 60;
    padding:0 10px;
  }

  #destinationPoint .destinationPointContainer{
    display:grid;
    background-color: var(--backgroundInput);
    box-shadow: 5px 5px 4px #cacaca;
    grid-template-columns: 30px auto;
    grid-template-rows: auto;
    font-size:18px;
    text-align: center;
  }

  #currentDestination{
    font-size:18px;
    text-align: center;
    font-weight:bolder;
    padding:15px 10px;
  }

  /* GUIDANCE */
  .noGPS{
    display:none;
  }

  .button_start{
    display: inline-block;
    height: 36px;
    padding: 8px 12px;
    margin: 15px 0px;
    font-size: 18px;
    font-family: "Poppins Bold" !important;
    line-height: 18px;
    color: #000000;
    background-color: var(--validColor);
    border: none;
    border-radius: 19px;
  }

  .noDirection{
    background-color: var(--backgroundInput);
  }

  #guidanceCard{
    position:absolute;
    display:block;
    top:0;left:0;
    width:100%;height:90px;
    background:transparent;
    border:10px solid transparent;
  }

    #stepCardContainer{
      border-radius: 10px;
      box-shadow: 5px 2px 5px #cacaca;
    }

    .stepCard{
      width: 100%;
      display:grid;
      grid-template-columns: 70px auto;
      grid-template-rows: 100%;
      border:none;
    }

    .stepCard.off{
      display:none!important;
    }

    .stepCard.start{
      display:block;
      background: transparent;
      text-align: center;
      box-shadow: none;
    }

    .stepCard.start button.startGuidance{
      display: inline-block;
      margin-top:20px;padding-right:20px;
      width:140px; height:50px;
      color:var(--backgroundInput);
      border:none;
      background:#5FC37D;
      background-image: url('/assets/default/next.svg');
      background-repeat: no-repeat;
      background-position: 95% 50%;
      background-size: 20px 20px;
      border-radius: 10px;
      font-size:21px;
      font-weight:bolder;
      vertical-align: top;
    }

    .stepCard.start button.changeJourney{
      position: absolute;
      display: inline-block;
      margin:0;
      padding-top:5px;
      padding-left: 2px;
      padding-right: 0px;
      padding-bottom: 5px;
      width: 30px;
      height: 30px;
      border: 1px solid;
      background-color: var(--backgroundInput);
      border-radius: 10px;
      bottom: 20px;
      left: 0px;
      vertical-align: bottom;
    }

    .stepCard.start button.changeJourney svg{
      width:18px;
      height:18px;
    }

    .stepCard button.stepPrevious{
      grid-column: 1;
      grid-row:1;
      display:block;
      width:100%;height: 90px;
      border:none;
      background: transparent;
      background-image: url('/assets/default/previous.svg');
      background-repeat: no-repeat;
      background-position: 5px 50%;
      background-size: 40px 40px;
    }
    .stepCard .stepPreviousHide{
      grid-column: 1;
      grid-row:1;
      width:100%;height: 90px;
      background:transparent;
    }

      .stepCard .stepContent{
        grid-column: 2;
        grid-row:1;
        display:flex;
        width:100%;height: 90px;
        font-family: 'Poppins Bold';
        padding:6px 5px;
        font-size: 20px;
        overflow: hidden;
        line-height: 1.2;
        align-items: center;
      }

      .stepCard .stepContent span{
        display:block;
        text-align: center;
      }

      .stepCard .stepIcon{
        grid-column: 1;
        grid-row:1;
        display:block;
        width:100%;height:90px;
        padding:20px 0px;
        text-align:center;
        background-color:transparent;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 50px 50px;
      }

      .stepCard .stepIcon svg{
        display:block;
        width:50px;height:50px;
        margin:auto;
      }

      /* .stepCard .stepIcon svg circle,
      .stepCard .stepIcon svg path,
      .stepCard .stepIcon svg rect{
        fill:var(--textColor) !important;
        stroke:var(--textColor) !important;
      } */

      .stepIcon.iconManeuverstraight{
        background-image: url('/assets/default/straight.svg');
      }
      .stepIcon.iconManeuverturn-left{
        background-image: url('/assets/default/turn-left.svg');
      }
      .stepIcon.iconManeuverturn-right{
        background-image: url('/assets/default/turn-right.svg');
      }
      .stepIcon.iconManeuverturn-slight-left{
        background-image: url('/assets/default/turn-slight-left.svg');
      }
      .stepIcon.iconManeuverturn-slight-right{
        background-image: url('/assets/default/turn-slight-right.svg');
      }
      .stepIcon.iconManeuverturn-sharp-left{
        background-image: url('/assets/default/turn-sharp-left.svg');
      }
      .stepIcon.iconManeuverturn-sharp-right{
        background-image: url('/assets/default/turn-sharp-right.svg');
      }
      .stepIcon.iconManeuveru-turn{
        background-image: url('/assets/default/u-turn.svg');
      }
      .stepIcon.iconManeuveruturn-left{
        background-image: url('/assets/default/uturn-left.svg');
      }
      .stepIcon.iconManeuveruturn-right{
        background-image: url('/assets/default/uturn-right.svg');
      }
      .stepIcon.iconManeuverenter{
        background-image: url('/assets/default/enter.svg');
      }
      .stepIcon.iconManeuverexit{
        background-image: url('/assets/default/exit.svg');
      }
      .stepIcon.iconManeuvertakeStairs{
        background-image: url('/assets/default/escalier.svg');
      }
      .stepIcon.iconManeuvertakeEscalator{
        background-image: url('/assets/default/escalator.svg');
      }
      .stepIcon.iconManeuvertakeElevator{
        background-image: url('/assets/default/ascenseur.svg');
      }
      .stepIcon.iconManeuverend_of_road-left{
        background-image: url('/assets/default/end_of_road-left.svg');
      }
      .stepIcon.iconManeuverend_of_road-right{
        background-image: url('/assets/default/end_of_road-right.svg');
      }
      .stepIcon.iconManeuverarrive-left{
        background-image: url('/assets/default/arrive-left.svg');
      }
      .stepIcon.iconManeuverarrive-right{
        background-image: url('/assets/default/arrive-right.svg');
      }
      .stepIcon.iconManeuvergoTo{
        background-image: url('/assets/default/end_guidance.svg');
      }
        

    .stepCard button.stepNext{
      grid-column: 3;
      grid-row:1;
      display:block;
      width:100%;height: 90px;
      border:none;
      background: transparent;
      background-image: url('/assets/default/next.svg');
      background-repeat: no-repeat;
      background-position: 5px 50%;
      background-size: 40px 40px;
    }

    .stepCard button.stepFinish{
      display: block;
      margin:0 auto;
      width:140px; height:40px;
      color:var(--backgroundColor);
      border:none;
      background:#5FC37D;
      background-image: none;
      border-radius: 10px;
      font-size:21px;
      font-weight:bolder;
    }

  #guidanceEndInfos{
    display:block;
    position:absolute;
    width:100%; height:100%;
    bottom:0;left:0;
    border:none;
    background: transparent;
    text-align: center;
  }

  #guidanceEndInfosContainer{
    display:grid;
    position:absolute;
    bottom:0;left:0;
    width:100%; height:auto;
    max-height:100%;
    grid-template-columns: 100%;
    grid-template-rows: 130px auto 120px 60px;
    border: 10px solid transparent;
    border-bottom: 0;
  }

    #guidanceEndInfosContainer .destinationHead{
      grid-column: 1;
      grid-row:1;
      padding:10px;
      font-size:15px;
      width:100%;height:130px;
      line-height: 1.3;
    }
      .headSpaceLogo{
        position:relative;
        top:-10px;
        width:50px;height:30px;
        margin:auto;
        z-index:100;
        overflow: visible;
      }
      .headSpaceLogo svg{
        width: 50px;
        height: 50px;
        padding:5px;
        border-radius: 25px;
      }

      .headSpaceLogo svg path{
        fill:var(--backgroundColor);
      }

      .headDestination{
        position:absolute;
        top:30px;left:0px;
        width:100%;height:100px;
        z-index:90;
        background:var(--backgroundColor);
        padding-top: 35px;
        font-weight: bolder;
        box-shadow:0px -1px 2px rgba(0, 0, 0, 0.75);
        color:var(--textColor);
      }

    /* Modale Guidance */
    #guidanceCancelButton{
      position:absolute;
      top:5px;right:10px;
      width:50px;height:50px;
      border:none;
      background: transparent;
      background-image: url('/assets/default/fermer.svg');
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: 40px 40px;
    }

    #guidancePanel{
      display:grid;
      grid-template-columns: 70px auto 70px;
      grid-template-rows: auto;
    }

      #guidancePanelLeft{
        grid-column: 1;
        grid-row:1;
        width:70px;height:50px;
      }

          #guidancePanelLeft button{
            position:absolute;
            top:80px;left:10px;
            width:70px;height:50px;
            border:none;
            background: transparent;
            background-image: url('/assets/default/previous.svg');
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: 70px 50px;
          }

      #guidancePanelCenter{
        grid-column: 2;
        grid-row:1;
        width:100%;height:250px;
      }

        #guidanceDestinationName{
          height: 60px;
          padding: 4px 0px;
          color: var(--textColor);
          font-size: 16px;
          font-family: 'Poppins Bold';
          text-align: center;
          overflow: hidden;
          line-height: 1.2;
        }

        #guidanceSteps{
          text-align: center;
          color: var(--textColor);
          padding: 12px 0;
          font-size: 16px;
          font-family: 'Poppins Medium';
        }

      #guidancePanelRight{
        grid-column: 3;
        grid-row:1;
        width:70px;height:50px;
      }

        #guidancePanelRight button{
          position:absolute;
          top:80px;right:10px;
          width:70px;height:50px;
          border:none;
          background: transparent;
          background-image: url('/assets/default/next.svg');
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-size: 70px 50px;
        }

    /* Guidance end panel */
    #guidanceEndInfosContainer .destinationInfos{
      grid-column: 1;
      grid-row:2;
      font-size:15px;
      padding:10px 15px;
      text-align: justify;
      overflow-y: auto;
      background-color: var(--backgroundColor);
      height:auto;
      max-height:300px;
      min-height:0px;
      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75);
    }

    #guidanceEndInfosContainer .destinationInfosContainer{
      height:auto;
    }

      #guidanceEndInfosContainer #destinationImage{
        width:100%;
        border-radius: 20px;
        background:#fff;
        margin-top:5px;
        margin-bottom:10px;
        overflow: hidden;
      }
  
        #guidanceEndInfosContainer #destinationImage img{
          width:100%;
        }

      #destinationUrl{
        text-align:right;
      }
    
    #rateGuidance{
      grid-column: 1;
      grid-row:3;
      text-align:center;
      padding:15px 10px;
      font-weight: bolder;
      border-top:1px solid var(--textColor);
      background-color: var(--backgroundColor);
      line-height: 40px;
      text-align: center;
      font-size: 18px;
      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75);
    }

    #rateGuidance .rateGuidanceText{
      width:100%;height:40px;
      border-top:1px solid var(--textColor);
      border-left:1px solid var(--textColor);
      border-right:1px solid var(--textColor);
      border-bottom: none;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      line-height: 40px;
      text-align: center;
      font-size: 15px;
      color:var(--textColor);
      background-color: var(--backgroundSelect);
    }

    #rateGuidance .rateGuidanceButtons{
      width:100%;height:50px;
      padding:10px 0;
      border-top:none;
      border-left:1px solid var(--textColor);
      border-right:1px solid var(--textColor);
      border-bottom: 1px solid var(--textColor);
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      background-color: var(--backgroundSelect);
    }

    #rateGuidance .rateGuidanceButton{
      width:30px; height:30px;
      margin:0 10px; padding:0;
      background: transparent;
      background-position: 50% 50%;
      background-size: 30px 30px;
      background-repeat: no-repeat;
      border:1px solid var(--textColor);
      border-radius:15px;
    }

    #rateGuidance .rateGuidanceButton.bad{
      background-image: url("/assets/default/bad.svg");
    }

    #rateGuidance .rateGuidanceButton.middle{
      background-image: url("/assets/default/middle.svg");
    }

    #rateGuidance .rateGuidanceButton.good{
      background-image: url("/assets/default/good.svg");
    }

    #ratedGuidance{
      grid-column: 1;
      grid-row:3;
      text-align:center;
      padding:10px 5px;
      font-size:19px;
      font-weight: bolder;
      color:var(--textColor);
      border-top:1px solid var(--textColor);
      background-color: var(--backgroundColor);
      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75);
    }



    #endGuidance{
      background-color: var(--backgroundColor);
      grid-column: 1;
      grid-row:4;
      width:100%;height:60px;
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
    }

      #guidanceEndInfos .endGuidance{
        width:50%;height:36px;
        border:none;
        background: var(--validColor);
        color:#000000;
        text-align: center;
        border-radius:19px;
        font-size:18px;
        font-family: 'Poppins Bold';
      }

  /* GUIDANCE TEXT */
  #guidanceText{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top:90px;
    background: var(--backgroundColor);
    overflow: auto;
    color:var(--textColor)
  }
    #guidanceTextContent{
      width:100%;height:auto;
      background: transparent;
    }

    #guidanceTextContent .stepCard{
      border-bottom:0.5px solid var(--textColor);
      box-shadow: none;
    }

    #guidanceTextContent button{
      width:90%;height:40px;
      margin-left:5%;margin-right:5%;
      margin-top:50px;margin-bottom:10px;
      border:0.5px solid var(--textColor);
      background:var(--backgroundInput);
      border-radius:10px;
    }

  /* HELP TEXT */
  #helpText{
    display:block;
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    padding:10%;
    text-align:center;
    background:#0000006A;
    border:none;
    z-index:100;
    text-decoration: none;
  }

    #helpText_icon{
      display:block;
      width:100%;height:50%;
      background-color: transparent;
      background-position: 50% 90%;
      background-repeat: no-repeat;
      background-size: 70px 70px;
      color:#FAFAFAFF;
    }

    #helpText_content{
      display:block;
      width:100%;height:50%;
      font-size:21px;
      font-weight:bolder;
      color:#FAFAFAFF;
    }

  /* MAP */

  #mapLayer{
    display:block;
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    z-index:0;
  }

    #mi_map_logo{
        display:none!important;
    }
    a[href^="http://maps.google.com/maps"]{display:none !important}
    a[href^="https://maps.google.com/maps"]{display:none !important}

    .gmnoprint a, .gmnoprint span, .gm-style-cc {
        display:none;
    }
    .gmnoprint div {
        background:none !important;
    }

    /* floor select */
  div.floor-selector{
      background:transparent;
  }

      div.floor-selector>a{
        text-decoration: none;
        background:var(--backgroundColor)!important;
      }
      div.floor-selector>a.active{
          font-weight: bold;
          text-decoration: none;
      }

    /* LOADER */

    #splashScreen{
        display:block;
        position:absolute;
        top:0; left:0;
        width:100%; height:100%;
        z-index:100;
        background:transparent;
    }

    #splashScreen .splashIcon{
      display:block;
      position:absolute;
      top:40%;
      width:100%;height:200px;
      text-align:center;
    }

      #splashScreen .splashIcon svg{
          width:100px;
          height:100px;
          animation: color-transition 3s infinite;
      }

      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top: 8px
      }
      
      .rotateX {
        transform: rotateX(55deg);
      }
      
      .dot {
        height: 24px;
        width: 24px;
        background: black;
        border-radius: 9999px;
        animation: dot-transition 3s infinite;
        z-index: 1;
      }
      
      .pulse {
        position: absolute;
        border: 2px solid #F46C00;
        border-radius: 9999px;
        z-index: 0;
        animation: pulse-transition 3s infinite;
      }
      
      @keyframes color-transition {
        0%, 100% { 
          stroke: black; 
          transform: translateY(-25%);
        }
        50% { 
          stroke: #FF7A00;
          transform: translateY(0);
        }
      }
      
      @keyframes dot-transition {
        0%, 100% { 
          background-color: black; 
        }
        50% { 
          background-color: #FF7A00;
        }
      }
      
      @keyframes pulse-transition {
        0% { 
          height: 15px;
          width: 15px;
        }
        50% { 
          opacity: 0.5;
        }
        100% { 
          height: 50px;
          width: 50px;
          opacity: 0;
        }
      }

        #splashScreen #loadingBar{
          position:absolute;
          display:block;
          left:0;bottom:5px;
          width:100%;height:10px;
          text-align: center;
          margin:0; padding:0;
        }

        #splashScreen #loadingBar .loadPixel{
          display:inline-block;
          vertical-align: top;
          width:5px; height:5px;
          border:none;
          margin:0 1px;
        }

        #splashScreen #loadingBar .loadPixel.notLoaded{
          background:red;
        }
        #splashScreen #loadingBar .loadPixel.loaded{
          background:green;
        }
        #splashScreen #loadingBar .loadPixel.loading{
          background:orange;
          animation: loading 0.5s infinite alternate;
        }
       @keyframes loading{
          from{
            opacity:0;
          }
          to{
            opacity:1;
          }
       }

    /* SKELETON LOADING */
    @keyframes placeHolderShimmer {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: 1000px 0;
      }
    }

    .loading {
      animation-duration: 15s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      animation-name: placeHolderShimmer;
      animation-timing-function: linear;
      background-color: #fafafa;
      background: linear-gradient(to right, #fafafa 8%, #eeeeee 18%, #fafafa 33%);
      background-size: 100% 100%;
    }

    /* ERROR */

    #errorScreen{
      display:none;
      position:absolute;
      top:0; left:0;
      width:100%; height:100%;
      z-index:110;
      background:#F7EBE7;
    }

      #errorLogo{
        height:40vh;
        width: 100vw;
        padding:0 5vw;
      }
        #errorLogo svg{
          display:block;
          width:90vw; height: auto;
          max-height: 40vh;
          margin:auto;
        }

      #errorTitle{
        padding:5vh 10vw 2vh 10vw;
        font-size:40px;
        color:#444444;
        text-align: center;
        font-family: "Poppins Bold"!important;
      }

      #errorDescription{
        padding:0vh 10vh;
        font-size:21px;
        color:#444444;
        text-align: center;
        font-family: "Poppins Bold"!important;
      }

/* MAPBOX */
.marker {
  background-color: transparent;
  background-image: url('/assets/default/pin.svg');
  background-size: contain;
  background-repeat: no-repeat;
  border:none;
  width: 40px;
  height: 40px;
  cursor: pointer;
  top:-20px!important;
  z-index:90;
}

.marker .markerLogo{
  display:none;
  position:absolute;
  width:15px;
  height:15px;
  top:8px;
  left:8px;
}

.positionMarker {
  background-color: transparent;
  background-image: url('/assets/default/qr_marker.svg');
  background-size: contain;
  background-repeat: no-repeat;
  border:none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  top:-10px!important;
}

.gpsMarker {
  background-color: transparent;
  background-image: url('/assets/default/gps_marker.svg');
  background-size: contain;
  background-repeat: no-repeat;
  border:none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  top:-10px!important;
}

.groupMarker {
  background-color: transparent;
  background-image: url('/assets/default/pin_pastille.svg');
  background-size: contain;
  background-repeat: no-repeat;
  border:none;
  width: 40px;
  height: 40px;
  cursor: pointer;
  top:-20px!important;
  font-size: 10px;
  font-family: 'Poppins Bold';
  text-align: center;
  padding-bottom: 10px;
  color:#000000;
  z-index:90;
}

#mi_map_logo{
  display:none!important;
}
.mapboxgl-ctrl-logo,
.mapboxgl-ctrl-attrib,
.mapboxgl-ctrl-attrib-button{
  display:none!important;
}

.mapboxgl-ctrl-top-right .floor-selector{
  margin-top:140px!important;
}

.mapsindoors.floor-selector{
  border-radius: 20px!important;
  overflow: hidden!important;
  font-size:14px!important;
  width:34px!important;
  box-shadow:0px -1px 2px rgba(0, 0, 0, 0.75)!important;
}

/* TRACKS */

#trackScreen{
  position:absolute;
  top:0; left:0;
  width:100%; height: 100%;
  max-height: 100%;
  background-color: var(--backgroundSelect);
  z-index: 50;
}

  #trackMode{
      display:grid;
      width:100%; height: 100%;
      grid-template-rows: 150px auto 300px 60px;
      grid-template-columns: 100%;
  }

      #trackModeTitle{
          padding:30px 60px 10px 60px;
          grid-column: 1;
          grid-row: 1;
          text-align: left;
          font-size:18px;
          font-family:"Poppins Bold"!important;
          color:var(--textColor);
          line-height:2;
      }

        #trackModeTitle span{
          text-align: left;
          font-size:24px;
          font-family:"Poppins Bold"!important;
          color:var(--textColor);
          line-height:2;
        }

        #trackSiteName{
          font-size: 30px !important;
          text-transform: uppercase;
          line-height:1.2!important;
        }

      #trackModeLogo{
          grid-column: 1;
          grid-row: 2;
          vertical-align: top;
          text-align: center;
      }

        #trackModeLogo img{
          width:150px;
        }

      #trackModeContent{
          grid-column: 1;
          grid-row: 3;
      }
      
      #trackModeLangs{
        grid-column: 1;
        grid-row: 4;
        padding-left:20px;
      }

      /* Track Mode Content */
      #trackModeProfilTitle{
        display:inline-block;
        border-bottom:2px solid;
        margin-left:40px;
      }

      #trackModeProfilTitle,
      #trackModeProfilTitle span{
        text-align: center;
        font-size:16px;
        font-family:"Poppins Medium"!important;
        color:var(--textColor);
      }

      #trackModeProfilTitle svg{
        width:20px;height:20px;
      }

      #trackModeProfilButtons{
        padding:20px;
      }

      #trackModeProfilButtons button{
        display:block;
        position:relative;
        width:100%; height:50px;
        margin-bottom:10px;
        padding-left:30px;
        line-height: 1.4;
        font-family: "Poppins Medium";
        font-size: 18px;
        text-align: left;
        background-color: var(--backgroundColor);
        color:var(--textColor);
        border-radius: 15px;
        border:none;
      }

      #trackModeProfilButtons button svg{
        position:absolute;
        width:30px;height:30px;
        top:10px;right:20px;
        fill:var(--textColor);
        stroke:var(--textColor);
      }


      #trackHome{
        padding:20px;
      }


      #trackHome button{
        display:block;
        position:relative;
        width:100%; height:50px;
        margin-bottom:10px;
        padding-left:30px;
        line-height: 1.4;
        font-family: "Poppins Medium";
        font-size: 18px;
        text-align: left;
        background-color: var(--backgroundColor);
        color:var(--textColor);
        border-radius: 15px;
        border:none;
      }

      #trackHome button.disabledButton{
        opacity:0.5;
      }

      #trackHome button svg{
        position:absolute;
        width:30px;height:30px;
        top:10px;right:20px;
        fill:var(--textColor);
      }

      #trackHome #track_returnToProfils{
        position:absolute;
        top:10px;left:10px;
        width:30px;height:30px;
        background:url('/assets/default/return.svg') no-repeat;
        background-position: center center;
        background-size: 100% 100%;
      }

      .s-hidden {
        visibility: hidden;
        padding-right: 10px;
      }
      
      .select {
        display: block;
        position: relative;
        width:100%; height:50px;
        margin-bottom: 10px;
        cursor: pointer;
      }
      
      .styledSelect {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border:2px solid var(--textColor);
        border-radius: 15px;
        padding: 9px;
        padding-left: 30px;
        color:var(--textColor);
        line-height: 1.4;
        font-family: "Poppins Medium";
        font-size: 18px;
        text-align: left;
        font-weight: normal;
      }
      
      .styledSelect:after {
        content: "";
        width: 0;
        height: 0;
        border: 12px solid transparent;
        border-color: transparent transparent transparent var(--textColor);
        position: absolute;
        top: 11px;
        right: 11px;
      }

      .styledSelect:active,
      .styledSelect.active{
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
      
      .styledSelect:active::after,
      .styledSelect.active::after {
        border-color: var(--textColor) transparent transparent transparent;
        top: 18px;
        right: 18px;
      }
      
      .options {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 999;
        margin: 0 0;
        padding: 0 0;
        list-style: none;
      }
      
      .options li {
        padding: 9px 30px;
        margin: 0 0;
        height:50px;
        border: none;
        background-color: var(--backgroundColor);
        color:var(--textColor);
        border-bottom: 1px solid var(--backgroundSelect);
        line-height: 1.4;
        font-family: "Poppins Medium";
        font-size: 18px;
        text-align: left;
        font-weight: normal;
      }

      .options li:last-child{
        border-bottom:none;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }

      #trackHome #buttonStartTrack{
        background-color: #5FC37D;
        color:#000000;
      }

      #trackHome #buttonStartTrack span{
        font-family: 'Poppins Bold';
      }

      #trackHome #buttonStartTrack svg{
        fill:#000000;
      }

/* Track Infos */

#UI #trackInfos{
  display: block;
  position:absolute;
  top:0;left:0;
  width:100%;height:90px;
  margin:0;padding:0;
  background-color:var(--backgroundColor)!important;
}

  #UI #trackInfosContainer{
    display:grid;
    width:100%;height:90px;
    margin:0;padding:0;
    grid-template-columns: 40px auto 40px;
    grid-template-rows: 90px 40px;
  }

  #UI #cancelTrack{
    background:transparent;
    border:none;
    background-image: url("/assets/default/return.svg");
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: center 10px;
  }

  #UI #trackInfosPoints{
    padding-left: 30px;
    background-image: url("/assets/default/waypath.svg");
    background-size: 30px;
    background-position: 0px 10px;
    background-repeat: no-repeat;
  }

  #UI #trackInfosPoints .starting-point,
  #UI #trackInfosPoints .dest-point{
    padding: 7px 0px;
  }

  #UI #trackInfosPoints #trackStart,
  #UI #trackInfosPoints #trackDest{
    border:1px solid var(--textColor);
    height:30px;
    border-radius: 15px;
    color:var(--textColor);
  }

  #UI #trackContent{
    display:grid;position: absolute;
    width:100%;height:100%;
    top:0;left:0;
    padding: 0 10px;
    grid-template-columns: 100%;
    grid-template-rows: 80px 70px 68px 20px auto 70px;
    z-index: 99;
  }

  #UI #trackContent #trackDetails{
    grid-column: 1;
    grid-row: 1;
    height:80px;
    padding:10px;
    text-align: right;
  }

    #UI #trackContent #trackDetails #detailsButton{
      height:60px;
      padding:10px;
      background-color: var(--backgroundSelect);
      color:var(--textColor);
      border:none;
      border-radius: 10px;
    }

      #UI #trackContent #trackDetails #detailsButton svg{
        height: 40px;
        width: 40px;
        fill:var(--textColor)!important;
        stroke:var(--textColor)!important;
      }

  #UI #trackContent #trackStepCount{
    grid-column: 1;
    grid-row: 2;
    background-color: var(--backgroundSelect);
    border-top: 1px solid var(--textColor);
    border-right: 1px solid var(--textColor);
    border-left: 1px solid var(--textColor);
    text-align:center;
    padding:20px 0px;
  }

    #UI #trackContent #trackStepCount #trackStepCountContent{
      color: var(--textColor);
      text-align: center;
      display: inline-block;
      margin: auto;
      padding: 5px 50px;
      border: 1px solid var(--textColor);
      border-radius: 18px;
      font-size: 14px;
    }

  #UI #trackContent #trackStepTitle{
    grid-column: 1;
    grid-row: 3;
    background-color: var(--backgroundSelect);
    border-right: 1px solid var(--textColor);
    border-left: 1px solid var(--textColor);
  }

    #UI #trackContent #trackStepTitle #trackStepTitleContent{
      display:block;
      margin:0 20px;
      background-color: var(--backgroundInput);
      padding:15px 30px;
      color:var(--textColor);
      font-size: 16px;
      font-family: 'Poppins Bold';
      border-radius: 10px;
      text-align: center;
      line-height:1.2;
    }

  #UI #trackContent #trackStepProgression{
    grid-column: 1;
    grid-row: 4;
    background-color: var(--backgroundSelect);
    border-right: 1px solid var(--textColor);
    border-left: 1px solid var(--textColor);
    padding:0 20px;

    display:flex;
    flex-direction: row;
    column-gap: 5px;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items:center;
  }

    #UI #trackContent #trackStepProgression span{
      display:block;
      flex-grow: 1;
      flex-basis: auto;
      background-color: var(--textColor);
      height:6px;
      border-radius: 3px;
      border:none;
    }

  #UI #trackContent .trackButtonLink{
    display: inline-block;
    background-color: var(--validColor);
    color: #000000;
    border: none;
    padding: 10px 30px;
    border-radius: 10px;
    margin: 10px auto;
    font-family: 'Poppins Bold';
  }

  #UI #trackContent #trackStepImageText{
    grid-column: 1;
    grid-row: 5;
    background-color: var(--backgroundSelect);
    border-right: 1px solid var(--textColor);
    border-left: 1px solid var(--textColor);
    overflow-y: scroll;
    padding:0 20px;
    text-align: center;
  }

    #UI #trackContent #trackStepImageText img{
      display:block;
      width:100%;height:auto;
      border:2px solid var(--textColor);
      border-radius: 15px;
    }

    #UI #trackContent #trackStepImageText p{
      font-size:16px;
      font-family: 'Poppins Medium';
      color:var(--textColor);
      text-align: left;
    }

  #UI #trackContent #trackStepButton{
    grid-column: 1;
    grid-row: 6;
    background-color: var(--backgroundSelect);
    border-right: 1px solid var(--textColor);
    border-left: 1px solid var(--textColor);
    text-align: center;
  }

    #UI #trackContent #trackStepButton #trackButton{
      background-color: var(--validColor);
      color:#000000;
      border: none;
      padding: 10px 30px;
      border-radius: 10px;
      margin: 10px auto;
      font-family: 'Poppins Bold';
    }

  .POI.active{
    background-color: var(--backgroundInput)!important;
  }

/* DEBUG */
#debugButton{
  position: absolute;
  bottom: 70px;
  right: 0px;
  width: 40px;
  height: 40px;
  background-color: #DADADA;
  background-image: URL("/assets/default/debug.svg");
  background-position: 50% 50%;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  z-index:100;
}

#debugButton.hide{
  display:none;
}

#debugScreen{
  width:100%;height:100%;
  position:absolute;
  top:0;left:0;
  background-color: var(--backgroundColor);
  color:var(--textColor);
}

#debugScreen.hide{
  display:none;
}

#copyToClipBoard{
  position:relative;
  top:5px;
  left:5px;
}

#debugContent{
  min-width: 100%;max-width: 100%;
  width:100%;
}