body {
    overflow: hidden;
}

.ol-zoom {
    display: none;
}

.ol-control {
    background-color: rgba(34, 34, 34, 0.75);
}

.ol-control:hover {
    background-color: rgba(75, 75, 75, 0.75);
}

.ol-zoomslider:hover {
    background-color: rgba(75, 75, 75, 0.75);
}

.ol-zoomslider {
    width: 20px;
    border-radius: 10px;
    top: 58px;
    left: auto;
    bottom: auto;
    right: 18px;
}

.ol-zoomslider button {
    background: #42a5f5;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    margin-top: -3px;
}

.ol-zoomslider button:focus,
.ol-zoomslider button:hover {
    background: #62b3f4;
}

.ol-attribution {
    background-color: transparent;
}

.ol-attribution:hover {
    background-color: transparent;
}

.ol-attribution ul {
    color: #f9f9f9;
    text-shadow: none;
}

.ol-attribution a {
    color: inherit;
    text-decoration: none;
}

td a {
    color: inherit;
    text-decoration: none;
}

.ol-attribution button {
    background: #575757;
    width: 26px;
    height: 26px;
}

.ol-rotate-reset {
    background: #575757;
}

.ol-attribution button:hover,
.ol-attribution button:focus {
    background-color: rgba(94, 94, 94, 0.9);
}

.ol-attribution:not(.ol-collapsed) {
    background-color: rgba(34, 34, 34, 0.75);
}

.ol-full-screen {
    background-color: transparent;
}

.ol-full-screen button {
    background-color: rgba(60, 60, 60, 0.9);
    width: 26px;
    height: 26px;
}

.ol-full-screen:hover {
    background-color: transparent;
}

.ol-full-screen button:hover,
.ol-full-screen button:focus {
    background-color: rgba(80, 80, 80, 0.9);
}

.ol-tooltip {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    opacity: 0.7;
    white-space: nowrap;
    font-size: 12px;
    cursor: default;
    user-select: none;
}

.ol-tooltip-measure {
    opacity: 1;
    font-weight: bold;
}

.ol-tooltip-static {
    background-color: #ffcc33;
    color: black;
    border: 1px solid white;
}

.ol-tooltip-measure:before,
.ol-tooltip-static:before {
    border-top: 6px solid rgba(0, 0, 0, 0.5);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: "";
    position: absolute;
    bottom: -6px;
    margin-left: -7px;
    left: 50%;
}

.ol-tooltip-static:before {
    border-top-color: #ffcc33;
}

.Resizer {
    background: #000;
    opacity: 0.2;
    z-index: 1;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
}

.Resizer:hover {
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
}

.Resizer.horizontal {
    height: 11px;
    margin: -5px 0;
    border-top: 5px solid rgba(255, 255, 255, 0);
    border-bottom: 5px solid rgba(255, 255, 255, 0);
    cursor: row-resize;
    width: 100%;
}

.Resizer.horizontal:hover {
    border-top: 5px solid rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}

.Resizer.vertical {
    width: 11px;
    margin: 0 -5px;
    border-left: 5px solid rgba(255, 255, 255, 0.5);
    border-right: 5px solid rgba(255, 255, 255, 0.5);
    cursor: col-resize;
}

.Resizer.vertical:hover {
    border-left: 5px solid rgba(0, 0, 0, 0.8);
    border-right: 5px solid rgba(0, 0, 0, 0.8);
}

.Resizer.disabled {
    cursor: not-allowed;
}

.Resizer.disabled:hover {
    border-color: transparent;
}

.fast-overlays {
    will-change: transform;
}

.fast-overlays:hover {
    cursor: pointer;
}

.sos-flash {
    animation: sos_color_change .25s infinite alternate;
}

.rollover-flash {
    animation: rollover_color_change .25s infinite alternate;
}

.hybrid-flash {
    animation: hybrid_color_change .25s infinite alternate;
}

.comms-flash {
    animation: comms_color_change .25s infinite alternate;
}

@keyframes sos_color_change {
    0% {
        fill: hsl(0, 50%, 25%);
        stroke: hsl(0, 50%, 25%);
    }

    100% {
        fill: hsl(0, 100%, 50%);
        stroke: hsl(0, 100%, 50%);
    }
}

@keyframes rollover_color_change {
    0% {
        fill: #000;
        stroke: #000;
    }

    100% {
        fill: #f69000;
        stroke: #f69000;
    }
}

@keyframes hybrid_color_change {
    0% {
        fill: #000;
        stroke: #000;
    }

    100% {
        fill: hsl(200deg 100% 66%);
        stroke: hsl(200deg 100% 66%);
    }
}

@keyframes comms_color_change {
    0% {
        fill: #000;
        stroke: #000;
    }

    100% {
        fill: #009bd6;
        stroke: #009bd6;
    }
}

.baseEntryOverlay {
    min-width: 50px;
    border: 2px solid #FFF;
    border-radius: 0 16px 16px 16px;
    white-space: nowrap;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.5);
    padding: 1px 6px 1px 4px;
    font-family: 'Roboto Condensed';
    font-size: 18px;
    background: #45484d;
    font-weight: 400;
}

.baseStagePointOverlay {
    min-width: 20px;
    border: 2px solid #c1c1c1;
    border-radius: 0 16px 16px 16px;
    background-color: #171717;
    white-space: nowrap;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 2px 8px 1px 8px;
    font-family: 'Roboto Condensed';
    font-size: 18px;
    font-weight: 400;
}

.splitPoint {
    width: 12px !important;
    min-width: 12px !important;
}

.primaryStagePoints {
    z-index: 10;
}

.secondaryStagePoints {
    z-index: 9;
}

.zIndex0 {
    z-index: 0
}

.zIndex1 {
    z-index: 1
}

.zIndex2 {
    z-index: 2
}

.zIndex3 {
    z-index: 3
}

.zIndex4 {
    z-index: 4
}

.zIndex5 {
    z-index: 5
}

.zIndex6 {
    z-index: 6
}

.zIndex7 {
    z-index: 7
}

.zIndex8 {
    z-index: 8
}

.zIndex9 {
    z-index: 9
}

.zIndex10 {
    z-index: 10
}

.onStage {
    background: #171717;
    color: #fff;
    background-image: linear-gradient(#45484d, #000000);
}

.beam {
    color: #fff;
    background: #5e5e5e;
    background-image: linear-gradient(#5e5e5e, #7c7c7c);
}

.oldEntryData {
    opacity: 0.4;
    background-image: linear-gradient(#898989, #333);
}

.transportMoving {
    color: #000;
    background: #e2e2e2;
    background-image: linear-gradient(#e2e2e2, #ffffff);
}

.transportStopped {
    color: #fff;
    background: #5e5e5e;
    background-image: linear-gradient(#5e5e5e, #7c7c7c);
}

.hazard {
    color: #000;
    background: #fcd80a;
    background-image: linear-gradient(#fcd80a, #e89c04);
}

.overtake {
    color: #fff;
    background: #1a62db;
    background-image: linear-gradient(#4786e7, #1a62db);
}

.sos {
    color: #fff;
    background: #e81b00;
    background-image: linear-gradient(#e81b00, #c60000);
}

.rollover {
    color: #fff;
    background: #ed6e00;
    background-image: linear-gradient(#ed6e00, #c25a00);
}

.ok {
    color: #000;
    background: #00c617;
    background-image: linear-gradient(#00c617, #00a022);
}

.lastMsgTimeOk {
    border-color: #00c617;
}

.lastMsgTimeWorrying {
    border-color: #fcd80a;
}

.lastMsgTimeBad {
    border-color: #c60000;
}

.lastMsgTimeOld {
    border-color: #b7b7b7;
}

.innerOverlay {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-evenly;
}

.planeOverlay {
    background: #0050b7;
}

.vehicleDot {
    margin-top: -1px;
}

.baseControl {
    border: 2px solid rgb(26, 26, 26);
    white-space: nowrap;
    background: rgba(31, 31, 31, 0.95);
    color: #f0f0f0;
    position: absolute;
    min-width: 48px;
    height: 48px;
    padding: 0px;
}

.controlButton {
    border-radius: 24px;
    padding: 10px;
}

.controlButtonTiles {
    padding: 0;
}

.controlButton:hover {
    background-color: rgb(47 47 47 / 90%);
}

.stageContainer {
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    height: auto;
}

.sideLink {
    text-decoration: none;
    color: inherit;
}

.sideLinkActive {
    color: #03a9f4;
    background: #03a9f424;
    display: block;
    text-decoration: none;
}

.stageButton {
    border-radius: 10px;
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    align-items: normal;
    padding: 2px 8px;
}

.loglevel-None {
    color: white
}

.loglevel-Trace {
    color: #28ffa6
}

.loglevel-Debug {
    color: #00ea00
}

.loglevel-Information {
    color: #419dff
}

.loglevel-Warning {
    color: #ffe212
}

.loglevel-Error {
    color: #ff2863
}

.loglevel-Critical {
    color: #c170ff
}

.msgHistory-tracking td {
    color: #00ea00
}

.msgHistory-blue td {
    color: #419dff
}

.msgHistory-hazard td {
    color: #ffe212
}

.msgHistory-other td {
    color: #ff9797
}

.msgHistory-not-processed td {
    opacity: 0.4;
}

.msgHistory-failed td {
    color: #f01515
}

.custom-tooltip-measure {
    background: rgba(0, 0, 0, 0.65) !important;
    color: white !important;
    font-size: 14px !important;
    padding: 8px !important;
    font-family: "Roboto" !important;
    font-weight: 100 !important;
}

.cell-bg {
    background: #202020
}

.cell-bg-alt {
    background: #2b2b2b
}

.Embed.WACFrameWord {
    background: #313131 !important;
    border: none !important;
}

.WACStatusBarContainer {
    display: none;
}

::-webkit-scrollbar-thumb:hover {
    background: #6E6E6E;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0.3, 0.3, 0.3, 0);
}

::-webkit-scrollbar-thumb {
    background-color: #919191;
    border-radius: 20px;
    outline: #161616 1px;
}

::-webkit-scrollbar-corner {
    background-color: rgba(0.3, 0.3, 0.3, 0);
}