/*
 * Background color for light/dark theme
 */

.bg-tertiary {
    --bs-bg-opacity: 1;
    background-color: var(--bs-tertiary-bg);
}

.table-bg-transparent {
    --bs-table-bg: transparent !important;
}

/*
 * Hide extra map ingo
 */

.maplibregl-ctrl-bottom-right  {
    display: none;
}


/*
 * Border radius for plots
 */
#deployment-map .maplibregl-canvas, #deployment-map .main-svg {
    border-radius: var(--bs-border-radius-lg);
    /*border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);*/
}

#deployment-ts-files .main-svg, #deployment-ts-data .main-svg, #deployment-spectrum .main-svg {
    border-radius:var(--bs-border-radius-lg);
}


/*
 * About page - Ocean Background
 */
#about {
    position: relative;
    background-color: black;
    height: 100vh;
    /*min-height: 25rem;*/
    width: 100%;
    overflow: hidden;
}

#about video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

#about .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.15;
  z-index: 1;
}

#about .container {
  position: relative;
  z-index: 2;
}

#about .lead {
    display: none;
}

@media (min-width: 48em) {
    #about .lead {
        display: block;
    }
}

/*
 * Theme-aware dash core components
 */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    /*--Dash-Spacing: 4px;*/

    --Dash-Stroke-Strong: rgba(var(--bs-emphasis-color-rgb), 0.45);
    --Dash-Stroke-Weak: var(--bs-border-color-translucent);

    --Dash-Fill-Interactive-Strong: var(--bs-primary);
    --Dash-Fill-Interactive-Weak: var(--bs-primary-bg-subtle);
    --Dash-Fill-Inverse-Strong: var(--bs-body-bg);

    --Dash-Text-Primary: var(--bs-body-color);
    --Dash-Text-Strong: var(--bs-emphasis-color);
    --Dash-Text-Weak: var(--bs-secondary-color);
    --Dash-Text-Disabled: var(--bs-tertiary-color);

    --Dash-Fill-Primary-Hover: rgba(var(--bs-emphasis-color-rgb), 0.06);
    --Dash-Fill-Primary-Active: rgba(var(--bs-emphasis-color-rgb), 0.12);
    --Dash-Fill-Disabled: var(--bs-secondary-bg);

    /*--Dash-Shading-Strong: rgba(22, 23, 24, 0.35);*/
    /*--Dash-Shading-Weak: rgba(22, 23, 24, 0.2);*/
}


.border-dashed {
    border-style: dashed !important;
}