body {
    background-color: #242424; /* Darker version of #0068a0; */
    background-position: top 20px right 20px;
    background-repeat: no-repeat;
    background-image: url(../images/OIRRC-logo.png);
    font-family: "Helvetica", "Arial", sans-serif;
    /* font-size: 12pt; */
    color: #cccccc;
    /* --smart-grid-default-width: 1280px; */
    /* --smart-slider-default-width: 1024px; */
    /* --smart-slider-track-size: 10px; */
    /* margin: 0px; */
}


div.full-screen {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: none;
    background: rgba(0, 0, 0, 0.75);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: end;
    /* overflow: hidden; */
}

div.centered-item {
    width: 250px;
    boder: 4px solid red;
    height: 250px;
}

smart-circular-progress-bar.echo-animation {
    margin-left: 450px; /* TODO This is a hack to center-ish the progress bar. */
    /* Use vars if browser supports! CSS vars on stroke-width DO NOT work in EDGE ! */
    --smart-circular-progress-bar-fill-size: 8;
    --smart-background: none;
    width:250px;
}

    smart-circular-progress-bar.echo-animation > .smart-container,
    smart-circular-progress-bar.echo-animation .smart-label-container {
        border: none;
    }

    smart-circular-progress-bar.echo-animation .smart-value {
        stroke: url(#outlineGrad);
        animation: circle-around 3s infinite linear;
        stroke-width: calc(var(--smart-circular-progress-bar-fill-size) + 2);
        stroke-width: 10;
        transform-origin: center center;
    }

    smart-circular-progress-bar.echo-animation .smart-value-path {
        stroke: url(#blueGrad);
        stroke-width: var(--smart-circular-progress-bar-fill-size);
        stroke-width: 8;
    }

/* MS EDGE only solution for the SVG animation */
@supports (-ms-ime-align: auto) {
    smart-circular-progress-bar.echo-animation svg:first-of-type {
        animation: circle-around 2.5s infinite linear;
    }
}

/* IE10+ solution for the SVG animation for the SVG animation*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    smart-circular-progress-bar.echo-animation svg:first-of-type {
        animation: circle-around 2.5s infinite linear;
    }
}

@keyframes circle-around {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}