/* width */.modal {
  overflow: auto;
}.highlight {
  background: palegreen;
}.nav-sidebar {
    background-color: #fbfafd;
    border-left-style: solid;
    border-width: thin;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sidebar-top-level-items {
    list-style:none;
    padding-left:0
}

.sidebar-top-level-items > li:hover {
    background-color: rgba(41,41,97,0.08);
}

.sidebar-top-level-items > li > a {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    cursor: pointer;
}

.toggle-sidebar-button {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    color:black
}

.invalid-item {
    cursor:pointer
}

.invalid-item:hover {
    background-color: rgba(41,41,97,0.08);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #d7d7d7;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #c8c7c7;
}

/* To avoid black border when user select scenario element in Run Mode */
/* https://stackoverflow.com/questions/61992025/google-chrome-showing-black-border-on-focus-state-for-button-user-agent-styles */
*,*:focus,*:hover{
  outline:none;
}

.modal-body {
  overflow: auto;
}

/* specific property for modals with comboBox or SelectComponent */
.modal-body .long-content {
  min-height: 35vh;
  max-height: 70vh;
}

/* for all modal enable to have a body with a scrollbar to see always bottom buttons */
.modal-xl .modal-body {
  max-height: 70vh;
}

.modal-fullscreen .modal-body {
  /* header + footer = 140px */
  height: calc(100vh - 140px);
}

.leaflet-draw-toolbar a {
  background-image: url("spritesheet.svg") !important;
}

body {
  font-family:"Noto Sans", "Open Sans", system-ui !important; 
  height: 100vh;
  width: 100vw;
}