:root {
  --main-bg-color: #f2f2f2;
  --main-text-color: #666;
  --main-accent-color: #36D120;
}

@font-face {
  font-family: RobotoMedium;
  src: url(Assets/Interface/Fonts/Roboto/Roboto-Medium.ttf);
  font-weight: bold;
}

@font-face {
  font-family: RobotoRegular;
  src: url(Assets/Interface/Fonts/Roboto/Roboto-Regular.ttf);
  font-weight: 200;
}

@font-face {
  font-family: RobotoLight;
  src: url(Assets/Interface/Fonts/Roboto/Roboto-Light.ttf);
  font-weight: 100;
}

* {
  font-family: robotoMedium;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}

.importantHide {
  display: none !important;
}

body {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  background: rgb(214, 225, 251);
  flex-wrap: wrap;
  justify-content: flex-start;

  overflow: hidden;

  align-content: flex-end;
  flex-direction: column;
}

body::before {
  z-index: 1;
  content: "";
  position: absolute;
  width: 75px;
  height: 75px;
  pointer-events: none;
  background-image: url(Assets/imgs/Logo_VolumetricStudio_Transparent.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 1;
  left: 15px;
  bottom: 90px;
}

@media screen and (min-width: 672px) {
  body::before {
    right: 15px;
    left: auto;
    bottom: 15px;
  }
}

#customBtn1 {
  display: none;
  flex-direction: column;
  gap: 10px;

  align-items: center;
  justify-content: center;

  z-index: 1;
  position: absolute;
  top: 170px;
  left: 10px;

  height: 70px;
  width: 70px;
  background-color: #f1f3f4;
  border-radius: 7px;
  cursor: pointer;

  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;

  transition: 0.1s ease-in-out;
  filter: invert(0);
}

#toggleTopView {
  z-index: 1;
  position: absolute;
  top: 10px;
  left: 10px;

  display: flex;
  flex-direction: column;
  gap: 10px;


  height: 150px;
  width: 70px;
  background-color: #f1f3f4;
  border-radius: 7px;
  cursor: pointer;


  -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.3);
}

#toggleTopView::before {
  content: "";
  z-index: 0;
  position: absolute;
  top: calc(50% + 5px);
  left: 5px;
  right: 5px;
  height: calc(50% - 10px);
  background-color: #36d120;
  border-radius: 5px;
  transition: top 0.3s ease-in-out;
}

#toggleTopView>div {
  flex-grow: 1;
  z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
}

#drone {
  background-image: url(Assets/imgs/drone_grey.png);
  background-size: 60%;
}

#pieton {
  background-image: url(Assets/imgs/walk_white.png);
  background-size: 50%;
}

.toggleTopViewActive>#drone {
  background-image: url(Assets/imgs/drone_white.png) !important;
}

.toggleTopViewActive>#pieton {
  background-image: url(Assets/imgs/walk_grey.png) !important;
}

.toggleTopViewActive::before {
  top: 5px !important;
}

#canvasWrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  flex-shrink: 0;
  flex-grow: 1;
}

canvas {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  background: rgb(214, 225, 251);
  background: linear-gradient(0deg, rgba(214, 225, 251, 1) 0%, rgba(146, 163, 201, 1) 100%);
}


/*GOOGLE MAPS ET CHRONO*/

#chrono, #subProj {
  z-index: 3;
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  padding: 70px 10px 10px 10px;
  max-height: calc(100% - 185px);

  border-radius: 7px;

  background-color: #f1f3f4;
  transition: all 0.5s ease-in-out;
  max-width: 550px;

  -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.3);
}

#focusPhase {
  z-index: 3;
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 92px;
  display: none;
  padding: 20px 40px;
  max-height: calc(100% - 185px);

  border-radius: 7px;

  background-color: #f1f3f4;
  transition: all 0.5s ease-in-out;
  max-width: 550px;

  -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.3);

  z-index: 1;

  cursor: pointer;
}
.focusPhaseVisible{
  display: flex !important;
}
#imgFocus{
  flex-grow: 1;
  background-image: url(Assets/imgs/meeting-point.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}

#focusPhase h2 {
  color: #818181;
  font-family: robotoMedium;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}

@media (orientation: landscape) {
  #chrono, #subProj {
    max-height: calc(100% - 20px);
    max-width: 400px;
  }

  #focusPhase {
    max-width: 400px;
  }
}

@media (orientation: portrait) {
  #chrono, #subProj {
    max-height: calc(100% - 185px);
    max-width: 550px;
  }

  #focusPhase {
    max-width: 550px;
  }
}

.chronoShrink, .subProjShrink {
  max-height: 72px !important;
  padding: 5px !important;
}

#innerChrono, #innerSubProj {
  flex-grow: 1;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: none;

}

.chronoShrink>#innerChrono, .subProjShrink>#innerSubProj {
  pointer-events: none !important;
}

.chronoItem, .subProjItem {
  overflow: hidden;
  cursor: pointer;
  position: relative;
  width: 100%;
  display: flex;
  gap: 0px;
  flex-direction: column;
  justify-content: center;
  padding: 5px 10px 5px 30px;
  border-radius: 7px;
  height: auto;
  max-height: 250px;
  min-height: 57px;
  background-color: white;
  box-sizing: border-box;
  transition: all 0.5s linear;
  flex-shrink: 0;
}

.chronoShrink>#innerChrono>.chronoItem, .subProjShrink>#innerSubProj>.subProjItem {
  width: calc(100% - 40px) !important;
  max-height: 57px !important;
}

.chronoItemVisible::after, .subProjItemVisible::after {
  content: "";
  width: 40px;
  height: calc(100% - 5px);
  position: absolute;
  right: 0;
  bottom: 0;
  background-image: url(Assets/imgs/view_grey.png);
  background-position: top;
  background-size: 50%;
  background-repeat: no-repeat;
  opacity: 25%;
}

.chronoItemVisible {
  border: 2px dotted #818181;
}

.chronoItemColorBg {
  position: absolute;
  left: 5px;
  top: 5px;
  bottom: 5px;
  display: none;
  border-radius: 5px;
  width: 20px;
}

.chronoItemVisible>.chronoItemColorBg {
  display: block !important;
}

.chronoItem>h2, .subProjItem>h2,
.chronoItem>p {
  z-index: 1;
  color: #818181;
  font-family: RobotoRegular;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}

.chronoItem>h2, .subProjItem>h2 {
  text-align: left;
  font-family: RobotoMedium !important;
}

.chronoItem>p {
  text-align: left;
  font-size: 13px;
}

.chronoItem>span {
  transition: all 0.5s linear;
  background-color: #f1f3f4;
  color: #818181;
  font-size: 14px;
  width: 100%;
  max-height: 250px;
  padding: 10px;
  border-radius: 5px;
  margin-top: 5px;
  opacity: 1;
  font-family: RobotoRegular;
}

.chronoShrink>#innerChrono>.chronoItem>span {
  max-height: 0;
  padding: 0px;
  margin-top: 0px;
  opacity: 0;
}

.chronoShrink>#innerChrono>.chronoItem {
  padding: 0px 10px 0px 30px;
}

#toggleChrono, #toggleSubProj {
  cursor: pointer;
  z-index: 2;
  position: absolute;
  top: 5px;
  left: 0;
  padding: 20px;

  height: 60px;
  width: 100%;

  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
}

#toggleChrono>h2, #toggleSubProj>h2 {
  color: #818181;
  transition: opacity 0.25s ease-in-out;
  opacity: 100%;
}

.chronoShrink>#toggleChrono>h2, .subProjShrink>#toggleSubProj>h2 {
  opacity: 0%;
}

#toggleChrono::after, #toggleSubProj::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 100%;
  background-image: url(Assets/imgs/right-arrow_grey_top.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 40%;
  transition: transform 0.25s ease-in-out;

  transform: rotate(180deg);
}

.chronoShrink>#toggleChrono::after {
  transform: rotate(0deg) !important;
}





#boussole {
  width: 32px;
  height: 32px;
  background-image: url(Assets/imgs/boussole.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#map {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: none !important;
}

#map * {
  border: 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;
}


@media (orientation: landscape) {
  .largeMap {
    width: 50vw !important;
    height: 70vh !important;
    max-width: 50vw !important;
    max-height: 100% !important;
  }
}

@media (orientation: portrait) {
  .largeMap {
    width: 100vw !important;
    height: 100vh !important;
    max-width: calc(100vw - 20px) !important;
  }
}

#floatingMap {
  position: relative;
  top: 10px;
  right: 10px;
  width: 250px;
  max-width: calc(100vw - 105px);
  height: 150px;
  max-height: calc(50vh - 30px);
  transition: all 0.5s ease-in-out;
  z-index: 2;
}

@media (max-height: 400px) and (max-width: 800px) {
  #floatingMap {
    display: none !important;
  }

  #chrono {
    max-width: 340px !important;
  }

  #focusPhase {
    max-width: 340px !important;
  }
}


#floatingMapInner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  overflow: hidden;
  -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.3);
}

#mapZoomBtn {
  cursor: pointer;
  position: absolute;
  width: 35px;
  height: 35px;
  bottom: 5px;
  left: 5px;
  background-color: rgba(255, 255, 255, 0.575);
  border-radius: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;

  background-image: url(Assets/imgs/maximize.png);
}

#hideUIBtn {
  cursor: pointer;
  position: absolute;
  width: 35px;
  height: 35px;
  top: 5px;
  right: 5px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;

  background-image: url(Assets/imgs/user-interface.png);
}
#hideUIBtn div{
  background-color: red;
  position: absolute;
  top: 0;
  left:0;
}

#FullScreenBtn {
  cursor: pointer;
  position: absolute;
  width: 35px;
  height: 35px;
  top: 5px;
  left: 5px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;

  background-image: url(Assets/imgs/maximize.png);
}
#FullScreenBtn div{
  background-color: red;
  position: absolute;
  top: 0;
  left:0;
}
#FullScreenBtn .fullScreenActive {
  background-image: url(Assets/imgs/minimize.png) !important;
}

.largeMap>#floatingMapInner>#mapZoomBtn {
  background-image: url(Assets/imgs/minimize.png) !important;
}

.marker {
  width: 30px;
  height: 30px;
  transform: translateY(15px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.markerNeutral {
  background-image: url("Assets/imgs/markers/markerNeutral.svg");
}

.markerCurrent {
  background-image: url("Assets/imgs/markers/markerSelected.svg");
}


/* .GMAMP-maps-pin-view{
  display: none !important;
}
.GMAMP-maps-pin-view svg{
  display: none !important;
} */

.hideImportant {
  display: none !important;
  pointer-events: none !important;
}
.noBoxShadow{
  box-shadow:none! important;
  -webkit-box-shadow:none! important;
}

/* SubProject / Zone overrides */

#subProj {
  position: relative;
  top: 10px;
  right: 10px;
  bottom: 0px;
  left: initial;
  padding: 40px 10px 10px 10px;
  max-height: 100%;
}

#toggleSubProj>h2{
  font-size: 14px;
}

#toggleSubProj{
  top: 0px;
  height: 40px;
}

#innerSubProj {
  width: 100%;
}

.subProjItem {
  padding: 5px 10px 5px 10px;
  min-height: 37px;
}

.subProjItem>h2 {
  font-size: 12px;
}

.subProjShrink>#innerSubProj>.subProjItem>h2 {
  font-size: 14px;
}

.subProjShrink>#innerSubProj>.subProjItem {
  padding: 0px 10px 0px 10px;
  /*background: none;*/
  background-color: transparent;/*
  min-height: 100%;
  max-height: 100% !important;*/
  justify-content: center;
  display: none;
}

.subProjShrink>#innerSubProj>.subProjItemVisible {
  display: flex;
}

.subProjShrink>#innerSubProj>.subProjItemVisible::after {
  display: none;
}

.subProjItemVisible::after {
  top: 25%;
}

.subProjShrink {
  max-height: 45px !important;
  padding: 5px !important;
  min-height: 40px;
}

.subProjShrink>#toggleSubProj::after {
    transform: rotate(180deg) !important;
}

#toggleSubProj::after {

  transform: rotate(0deg);
}

#application {
  height: 100vh !important;
  width: 100vw !important;
}

#loader {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--main-bg-color);
  z-index: 0;
  font-family: RobotoRegular;
}

.loader{
  background-color: var(--main-bg-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition-duration: .4s;
  pointer-events: none;
}

.loader svg {
  pointer-events: none;
  scale: 3;
}

.loader h3 {
  color: var(--main-text-color);
  font-weight: 400;
}
.loader h1 {
  color: var(--main-text-color);
  font-weight: 600;
}

.loader-svg {
  width: calc( 24px * 3);
  height: calc( 15px * 3);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}

.loading-bar {
  width: 20em;
  height: 10px;
  background-color: #ffffff;
  border-radius: 5px;
}

.loading-bar-inner {
  height: 100%; 
  background-color: var(--main-accent-color);
  border-radius: 5px;
  width: 10px;
}

svg path,
svg rect{
  fill: var(--main-accent-color);
}