@font-face {
    font-family: ds-digi;
    src: url('/fonts/ds-digii.ttf');
}

@font-face {
    font-family: 'Andale Mono Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Andale Mono Regular'), url('/fonts/ANDALEMO.woff') format('woff');
}

.centered-figure-text {
    font-size: large;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.fade-out {
    opacity: 0;
    animation: fade 2s linear ;
}

@keyframes fade {
  0% { opacity: 0 }
  20% { opacity: 1 }
  70% { opacity: 1 }
  100% { opacity: 0 }
}

/* Line chart figure elements */
.figure-loader {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.chart-wrapper {
    position: relative;
}


/* Metric traffic lights on figure pages */
.traffic-light-header {
    font-size: small;
    font-weight: 500;
}

.traffic-light-var {
    font-size: small;
}

.traffic-light-value {
    font-size: small;
    font-family: 'Courier New';
    font-weight: bold;

    border-style: solid;
    border-width: 1px;
    border-color: darkgrey;
    border-radius: 5px;
}

/* Tab buttons on figure pages */
button[data-toggle="tab"].modaq-nav-link {
    font-weight: 300;
    font-size: 16px;
    line-height: 32.5px;
    background-color: #f5f5f5;
    margin-bottom: -1px;
}

button[data-toggle="tab"].modaq-nav-link.active {
    font-size: 18px;
    font-weight: 300;
    line-height: 32.5px;
}

/* tab panes borders */
div.modaq-tab-pane {
    border: 1px solid #dee2e6;
    border-radius: 0px 7px 7px 7px;
    padding-bottom: 0px;
    padding-top: 10px;
}

.modaq-nav-tabs {
    border-bottom: 0px solid #dee2e6;
}


/* Use full screen width for content on small screens */
@media only screen and (max-width: 959px) {
    #modaq-content {
        margin-left: 0px;
        margin-right: 0px;
        max-width: 100%;
        padding-right: 0px;
        padding-left: 0px;
    }
}

.digital-font {
    font-family: ds-digi;
}

.andale-mono-font {
    font-family: 'Andale Mono Regular';
}

.naked-button {
    border: none;
    background: none;
}

.tooltip {
    font-size: 1.2em;
}

/**
 * Fake bootstrap classes since we're using BS4
 * TODO - remove after switching to BS5
 */
.fs-1 {
    font-size: 2.5rem;
}
.fs-2 {
    font-size: 2.0rem;
}
.fs-3 {
    font-size: 1.75rem;
}
.fs-4 {
    font-size: 1.5rem;
}
.fs-5 {
    font-size: 1.25rem;
}
.fs-6 {
    font-size: 1rem;
}

.fs-medium {
    font-size: medium;
}

/* 2px White halo around text */
.white-text-halo-2 {
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
    1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}

.black-text-halo-2 {
    text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,
    1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}

.gray-text-halo-2 {
    --gray: #eeeeeedd;
    --blur: 2px;

    text-shadow: 2px 0 var(--blur) var(--gray), -2px 0  var(--blur) var(--gray),
        0 2px  var(--blur) var(--gray), 0 -2px  var(--blur) var(--gray),
        1px 1px var(--blur) var(--gray), -1px -1px  var(--blur) var(--gray),
        1px -1px var(--blur) var(--gray), -1px 1px  var(--blur) var(--gray);
}

.blur {
    filter: blur(5px);
}