:root {
  --swisens-green: #58a333;
  --swisens-red: #e84610;
  --swisens-blue: #009acb;
  --swisens-gray: #8690a0;
  --swisens-dark-gray: #303e47;
  --swisens-light-gray: #bdc1c9;
}

ul:not(#bs-select-1, .pagination){
    margin-left: 5px;
    padding-left: 0px;
    margin-bottom: 0px;
}

.tooltip-inner {
  max-width: fit-content;
  word-wrap: break-word;
  text-align: left;
}

#bs-select-1 .dropdown-menu {
  display: block;
  z-index: 9000;
}

.tab-content ul {
  margin-left: 25px;
  padding-left: 0px;
}

.toc {
  font-size: 15px;
  margin-left: 20px;
}

.toc-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

.bg-dark {
    background-color: #303e47!important;
}

.btn-primary {
    background-color: #009acb;
}

.btn-secondary {
    background-color: #8690a0;
}

.btn-success {
    background-color: #58a333;
}

.btn-danger {
    background-color: #e84610;
}

.input-group-text {
    background-color: #8690a0;
    color: white;
    border: 0px
}

/* group-level-0 to 2 have gray background with increasing brightness*/
.group-level-0 {
    background-color: #bdc1c9 !important;
}
.group-level-0 > td:first-child {
    padding-left: 1em;
}
.group-level-1 {
    background-color: #d0d3d9 !important;
}
.group-level-1 > td:first-child {
  padding-left: 2em;
}
.group-level-2 {
    background-color: #e5e6e9 !important;
}
.group-level-2 > td:first-child {
  padding-left: 3em;
}

/* All buttons inside a table should have smaller */
table .btn {
    padding-top: 1px;
    padding-bottom: 1px;
}

blockquote{
    width:100%;
    margin:10px auto;
    color: #555555;
    padding: 10px 0px 1px 10px;
    border-left:8px solid #e84610 ;
    line-height:1.2;
    position: relative;
    background:#EDEDED;
  }

  .img-failed {
    position: relative;
    text-decoration: underline dotted;
    cursor: help;
  }
  
  .img-failed::before,
  .img-failed::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out;
  }
  
  .img-failed:hover::before,
  .img-failed:hover::after {
    opacity: 1;
    z-index: 999999999999999999;
    visibility: visible;
  }
  
  .img-failed::before {
    content: attr(data-tooltip);
    width: 240px;
    color: #fff;
    background: rgba(0,0,0, .7);
    border-radius: 5px;
    padding: 5px;
  }
  
  .img-failed::after {
    content: "";
    width: 0;
    height: 0;
  }
  
  .img-failed::before,
  .img-failed::after {
    top: 100%;
    left: 0%;
    transform: translate(-50%);
    margin-top: 15px;
  }
  
  .img-failed::after {
    margin-top: 8px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid rgba(0,0,0, .7);
  }

  .custom-checkbox {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 15px;
    width: 15px;
    border: 1px solid;
    cursor: pointer;
  }
  .custom-checkbox:after {
    position: absolute;
    width: 100%;
    line-height: 100%;
    text-align: center;
  }
  .custom-checkbox.active:after {
    content: "X"; /*"✓";*/
  }

*[class^='ace_']{
  font-family : monospace !important;
  font-size: 15px !important;
  direction:ltr !important;
  text-align:left !important;
}

.outer-fl.progress {
  position: absolute;
  background: none;
  width: 100%;
  height: 15px;
  margin-left: -15px;
  margin-right: -15px;
  border-radius: 0px;
}

.outer-fl > .progress-bar {
  z-index: 100;
}

.inner-fl.progress {
  position: absolute;
  width: 100%;
  height: 3px;
  border-radius: 0px;
}

.fl-graph-container > .outer-fl {
  height: 79px;
}

.fl-graph-container > .outer-fl > .inner-fl.progress {
  height: 15px;
  background-color: transparent;
}

.progressbar-text-custom {
  display: none!important;
  align-items: center;
  height: 15px;
  
}

.outer-fl:hover > .inner-fl > .progressbar-text-custom {
  display: flex!important;
}

.highlighted {
  outline: 2px solid #e846108e;
  outline-offset: -2px;
}

.select-checkbox {
  padding-left: 1em !important;
}

.select-checkbox::before {
  top: 1em !important;
}


td.focus {
  outline: none !important;
}

.table-button-group {
  display: flex;
  justify-content: space-between;
}

.table-button {
  flex: 1;
  padding: 0.3em 0.5em;
  margin: 0 0.5em;
  background-color: var(--swisens-blue);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.table-button:first-child {
  margin-left: 0;
}

.table-button:last-child {
  margin-right: 0;
}

.table-button i {
  margin-right: 0.5em;
}

#import-dataset {
  /*make button swisens green*/
  background-color: var(--swisens-green);
  color: white;
}

.ui-autocomplete {
  max-height: 15em;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
}

.event-tooltip {
  min-width: 520px !important;
  overflow: hidden !important;
}

.event-tooltip .tooltip-inner {
  min-width: 520px !important;
  background-color: white;
  opacity: 1 !important;
  overflow: hidden !important;
}

.event-tooltip .arrow {
  border-bottom-color: white !important;
}

.tooltip-system-settings {
  min-width: fit-content !important;
}

.tooltip-system-settings .tooltip-inner {
  min-width: fit-content !important;
}

.dataset-meta-content {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-style: solid;
  border-right-width: 1px;
  border-color: var(--swisens-gray);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.dataset-meta-pills {
  background-color: var(--swisens-dark-gray);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.dataset-meta-pills .nav-link {
  color: white;
}

.dataset-meta-pills .nav-link.active {
  background-color: var(--swisens-blue);
}

.input-group-text {
  background-color: var(--swisens-gray);
}

.collaps-arrow {
  --circle-size: 40px;
  width: var(--circle-size);
  height: var(--circle-size);
  background-color: var(--swisens-blue);
  position: relative;
  left: calc(50% - var(--circle-size)/2);
  top: calc(0px - var(--circle-size)/2);
  border-radius: 50%;
  color: white;
  text-align: center;
  line-height: 20px;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
  outline-style: solid;
  outline-width: 2px;
  margin-bottom: -30px;
}

.collaps-arrow i {
  position: relative;
  top: 8px;
}

.metadata-row-open + .collaps-arrow {
  transform: rotate(0deg);
}

.metadata-row-close + .collaps-arrow {
  transform: rotate(180deg);
}

.metadata-row-open {
  position: relative;
}

.metadata-row-close {
  height: 3.5rem;
  overflow: hidden;
  position: relative;
}

.metadata-row-close::before {
  box-shadow: inset 0 -25px 26px -10px var(--swisens-dark-gray);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  content: "";
  z-index: 1;
}

#doAnalysis {
  padding: 1.5em;
  background-color: var(--swisens-green);
  color: white;
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#doAnalysis:hover {
  box-shadow: 0 0 0 0.3rem rgba(0, 123, 255, 0.5);
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(201, 107, 19, 0.4);
    box-shadow: 0 0 0 0 rgba(201, 107, 19, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
      box-shadow: 0 0 0 20px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

.analyzing {
  animation: pulse 2s infinite;
  animation-timing-function: ease;
}

.do-analysis {
  display: none;
}
.loading-graph {
  display: none;
}

.idle .do-analysis {
  display: block;
}
.analyzing .loading-graph {
  display: block;
}

.analyzing {
  background-color: var(--swisens-red) !important;
  cursor: progress !important;
  padding: 2.5em !important;
}

.modal-image-container {
  position: relative;
  display: inline-block; /* Makes the container fit the size of the image */
}

.overlay-scale {
  position: absolute;
  bottom: 30px;
  right: 10px;
  width: 8.33%;
  height: 2px;
  background-color: black;
  color: black;
  font-size: 12px;
  text-align: center;
  padding-top: 5px;
}

/* Ensures the text is placed after the scale bar */
.overlay-scale::after {
  content: ' ';
  position: absolute;
  top: 100%; /* Position below the bar */
  left: 50%;
  transform: translateX(-50%);
}

.overlay-legend {
  position: absolute;
  bottom: 15px;
  left: 30px;
  color: black;
  font-size: 12px;
  text-align: center;
  padding-top: 5px;
}

/* Ensures the text is placed after the scale bar */
.overlay-legend::before {
  content: '';
  position: absolute;
  transform: translateX(-120%);
  height: 1lh;
  width: 1lh;
  background-color: red;
  border-radius: 50%;
}

* :not(.fa){
    font-family: 'Open Sans';/* <-- fonts */
}