body {
    margin: 0;
    background-color: black;
    overflow: hidden;
}
.hidden {
    visibility: hidden;
}
.mobile-port-conceal {
    font-family: monospace;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: black;
    color: white;
}
#time-acclrtr .slider-label-right.no-warp {
    display: none;
    pointer-events: none;
}
#time-acclrtr .slider-label-right button.limit,
#time-acclrtr .slider-label-right button.limit:last-child {
    color: #aaa;
    background-color: #222;
    cursor: not-allowed;
}
#warp-thumb.no-warp,
#warp-thumb.warp-off {
    display: none;
}
.mobile-port-msg-cntnr {
    max-width: 200px;
    text-align: center;
}
.mobile-port-msg-cntnr h3 {
    margin-bottom: 10px;
}
.mobile-port-msg-cntnr h4 {
    margin-top: 10px;
    color: #999;
}
#page-header {
    flex-direction: column;
    align-items: center;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    margin-top: var(--edge-margin);
}
#page-header * {
    margin: 0;
}
#page-header h3 {
    color: var(--header-load-color);
}
#page-header h3.loaded {
    visibility: hidden;
}
#page-header h3 span {
    color: var(--header-load-color);
}
.load-dot:nth-child(1) {
    animation: dot-load-1 linear infinite 2s;
}
.load-dot:nth-child(2) {
    animation: dot-load-2 linear infinite 2s;
}
.load-dot:nth-child(3) {
    animation: dot-load-3 linear infinite 2s;
}
#hud-upper-left {
    margin: 0 0 5px 0;
    margin: var(--edge-margin) 0 0 var(--edge-margin);
    align-items: center;
}
#hud-upper-left .hud-box-hide-tab {
    align-self: stretch;
}
#hud-upper-left.hide h3 {
    display: none;
}
#hud-upper-left
#altitude-readout > h3 {
    margin: 0 0 5px 0;
    font-weight: normal;
}
.hud-box.hud-hide-soft {
    transition: transform 0.3755s ease;
}
.hud-box.hud-hide-soft.hide {
    transition: transform 0.3755s ease 0.625s;
}
.hud-box.hud-hide-soft:hover {
    transition: transform 0.275s ease;
}
.hud-box.hud-hide-hard.hide {
    display: none;
}
#hud-upper-right {
    z-index: 101;
    flex-direction: row;
    align-items: stretch;
    margin-right: var(--edge-margin);
    margin-top: var(--edge-margin);
    right: 0;
    top: 0;
}
#hud-upper-right .hud-box-hide-tab,
#dialog-btn-cntnr .hud-box-hide-tab {
    border-radius: calc(var(--edge-margin) / 2) 0 0 calc(var(--edge-margin) / 2);
}
#hud-upper-right .hud-box-content {
    flex-direction: column;
    align-items: center;
}
#hud-upper-right .hud-box-content,
#dialog-btn-cntnr .hud-box-content {
    margin-left: 5px;
}
#hud-upper-right.hide,
#dialog-btn-cntnr.hide {
    transform: translateX(100%);
}
#hud-controls-cntnr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
#full-screen-button {
    position: relative;
    padding: 5px;
    border: var(--hud-border-width) solid var(--hud-color);
    color: var(--hud-color);
    font-family: monospace;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
}
#full-screen-button .button-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    visibility: hidden;
    pointer-events: none;
}
#full-screen-button .button-inner.active {
    visibility: visible;
}
#full-screen-button .minimize {
    position: absolute;
}
#hide-hud-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
}
#hud-controls-cntnr > div:first-child {
    margin-bottom: 10px;
}
#back-to-bodies {
    cursor: pointer;
    margin-bottom: 10px;
}
@media (min-width: 577px ) {
    .mobile-port-conceal {
        display: none;
    }
    #back-to-bodies {
        z-index: 10;
    }
}
.normal-weight {
    font-weight: normal;
}
#back-to-bodies a {
    text-decoration: none;
}
#back-to-bodies .svg-cntnr {
    height: 2em;
    width: auto;
}
#back-to-bodies svg {
    height: 100%;
}
#back-to-bodies svg line {
    stroke-linecap: round;
}
#back-to-bodies svg polyline {
    stroke-linejoin: bevel;
    stroke-linecap: round;
}
#back-to-bodies svg line,
#back-to-bodies svg polyline {
    stroke: var(--hud-color);
    stroke-width: 10;
}
#back-to-bodies h2 {
    margin: 0;
}
@media (hover: hover) {
    #back-to-bodies:hover svg line,
    #back-to-bodies:hover svg polyline {
        stroke: var(--back-color);
    }
    #back-to-bodies:hover * {
        color: var(--back-color);
        text-decoration: underline;
    }

}
input[type="range"] {
    -webkit-appearance: none;
    width: var(--slide-width-sm);
    height: 8px;
    background-color: #555;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent; 
  border-color: transparent;
  color: transparent;
}
input[type=range]::-webkit-slider-thumb {
    border: 0;
    -webkit-appearance: none;
    height: var(--slide-thumb-hgt-sm);
    width: var(--slide-thumb-wdth-sm);
    border-radius: var(--slide-thumb-border-rad);
    background-color: var(--slide-thumb-bg-clr);
    cursor: pointer;
}
input[type=range]::-moz-range-thumb {
    border: 0;
    height: var(--slide-thumb-hgt-sm);
    width: var(--slide-thumb-wdth-sm);
    border-radius: var(--slide-thumb-border-rad);
    background-color: var(--slide-thumb-bg-clr);
    cursor: pointer;
}
input[type=range]::-ms-thumb {
    border: 0;
    -ms-appearance: none;
    border-radius: 0;
    height: var(--slide-thumb-hgt-sm);
    width: var(--slide-thumb-wdth-sm);
    border-radius: var(--slide-thumb-border-rad);
    background-color: var(--slide-thumb-bg-clr);
    cursor: pointer;
}

.hud-box {
    position: fixed;
    display: flex;
    font-family: monospace;
    color: var(--hud-color);
    z-index: 10;
}
.hud-box * {
    font-family: monospace;
    color: var(--hud-color);
}
.hud-box h2 {
    font-size: 120%;
}
.hud-box h3 {
    font-size: 95%;
}
.hud-box h4 {
    font-size: 90%;
}
.hud-box.controls p {
    font-size: 88%;
}
.hud-pin {
    display: none;
    padding: 0 2px;
    align-self: stretch;
    width: 13px; 
    background-color: var(--hud-ctrl-bg-color-2);
    border-radius:2px;
    stroke-width: 5;
    cursor: pointer;
}
.hud-pin:hover {
    background-color: var(--hud-ctrl-bg-color-2-hover);
    border-color: var(--hud-ctrl-bg-color-2-hover);
}
.hud-box.hide .hud-pin {
    display: flex;
}
.hud-box.pinned .hud-pin {
    background-color: var(--hud-ctrl-bg-color-2-active);
    border-color: var(--hud-ctrl-bg-color-2-active);
}
.hud-box.pinned .hud-pin svg {
    stroke: var(--hud-ctrl-svg-color-2-active);
    fill: var(--hud-ctrl-svg-color-2-active);
}
#hud-upper-left .hud-pin,
#time-controls .hud-pin {
    margin-right: 2px;
}
#hud-upper-right.hide .hud-pin,
#dialog-btn-cntnr.hide .hud-pin {
    margin-left: 7px;
}
.hud-pin svg {
    justify-content: center;
    align-items: center;
    stroke:var(--hud-ctrl-svg-color-2);
    fill: var(--hud-ctrl-svg-color-2);
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-width: 5;
}
.hud-box-hide-tab {
    width: var(--edge-margin);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--hud-ctrl-bg-color);
    opacity: 0;
}
.hud-box.hide  .hud-box-hide-tab {
    transition: opacity 0.375s ease 0.625s;
    opacity: 1;
}
.hud-box.hide:hover .hud-box-hide-tab {
    transition: opacity 0.375s ease;
    opacity: 0;
}
.hud-box.pinned .hud-box-hide-tab {
    opacity: 0;
}
#hud-upper-left .hud-box-hide-tab,
#time-controls .hud-box-hide-tab {
    border-radius: 0 calc(var(--edge-margin) / 2) calc(var(--edge-margin) / 2) 0;
}
.hud-box-hide-tab svg {
    width: 90%;
    stroke: var(--hud-ctrl-svg-color);
    fill: var(--hud-ctrl-svg-color);
}
#altitude-cntnr {
    display: flex;
    align-items: center;
}
#altitude-readout {
    /*padding: 5px;*/
    font-size: 85%;
    flex-direction: column;
    background-color: var(--hud-bg-color-1);
    left: 0;
    top: 0;
}
#altitude-readout h4 {
    margin: 0 0 3px 0;
}
#altitude-readout > *:last-child h4 {
    margin: 0;
}
#altitude-readout-value {
    padding-left: 10px;
    color: var(--hud-color-value);
    color: var(--hud-color-value-2);
}
#altitude-readout-units {
    padding-left: 2px;
    color: var(--hud-color-units);
    color: var(--hud-color-units-2);
}
#render-qlty-cntnr {
    display:flex;
    align-items: flex-start;
}
#render-qlty-cntnr h3 {
    margin: 0.25em 0 0.25em 0;
}
#render-qlty-slctns {
    display: flex;
    align-items: center;
    align-self: center;
    margin: 0 0 0 0.5em;
}
#render-qlty-slctns h3 {
    display: flex; 
    align-items: center;
    justify-content: center;
    width: 3.5em; 
    text-align: center;
    margin:0; 
    padding:0.125em 0;
}
#render-qlty-slctns h3.high { 
    color: var(--quality-color-high);
}
#render-qlty-slctns h3.low { 
    color: var(--quality-color-low);
}
#render-qlty-slctns h3.active { 
    cursor: not-allowed;
    background-color: rgba(255,255,255,0.25);
}
#render-qlty-slctns h3.inactive {
    color:#999;
    font-weight: normal;
    background-color: rgba(255,255,255,0.125);
}
@media (hover: hover) {
    #render-qlty-slctns h3.inactive:hover {
        background-color: rgba(255,255,255,0.5);
        color: #222;
    }
}
#render-qlty-slctns a {
    display: flex; 
    align-items: center;
    text-decoration: none;
}
.controls {
    display: flex;
}
.controls h2 {
    margin: 5px 0;
}
#camera-controls {
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--edge-margin);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
#camera-controls p {
    margin: 0;
}
#time-controls {
    background-color: var(--hud-bg-color-1);
    bottom: 0;
    left: 0;
    flex-direction: row;
    margin-bottom: var(--edge-margin);
    margin-left: var(--edge-margin);
}
#time-controls .hud-box-content {
    display: flex;
    flex-direction: column;
}
#hud-upper-left.hide,
#time-controls.hide {
    transform: translateX(-100%);
}
#hud-upper-left.hide:hover,
#time-controls.hide:hover,
#hud-upper-right.hide:hover,
#dialog-btn-cntnr.hide:hover,
#hud-upper-left.hide.pinned,
#time-controls.hide.pinned,
#hud-upper-right.hide.pinned,
#dialog-btn-cntnr.hide.pinned  {
    transform: none;
}
.slider-cntnr {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.slider-label-cntnr {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 12px;
}
.slider-label-cntnr button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    height: 15px;
    width: 15x;
    margin-left: 4px;
    border-radius: 2px;
    background-color: #444;
    cursor: pointer;
}
.slider-label-cntnr .checkbox-hack {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background-color: #ddd;
    color: black;
    font-weight: bold;
    align-self: center;
    cursor: pointer;
}
#season-picker .slider-label-right.irrel {
    display: none;
    pointer-events: none;
}
.slider-label-cntnr .checkbox-hack.checked {
    background-color: var(--hud-color-value-2);
}
.slider-label-left {
    display: flex;
    align-items: flex-end;
}
.slider-label-right {
    display: flex;
    align-items: flex-end;
}
.time-readout-first {
    padding-left: var(--slider-readout-margin);
}
#time-acclrtr .slider-label-right button {
    color: #79f;
}
#time-acclrtr .slider-label-right button:last-child {
    color: #f88;
}
.slider-label-fixed-cntnr {
    display: flex;

}
#time-slider-cntnr {
    position: relative;
}
#warp-thumb {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    font-weight: bold;
    right: 0;
    top: 50%;
    color: black;
    transform: translateY(-50%);
    width: var(--slide-thumb-wdth);
    height: var(--slide-thumb-hgt);
    border-radius: var(--slide-thumb-border-rad);
    background-color: var(--warp-color-low);
    z-index: 20;
}
#warp-thumb.warp-med {
    background-color: var(--warp-color-med);
}
#warp-thumb.warp-hgh {
    background-color: var(--warp-color-hgh);
}
#warp-thumb.reverse {
    left: 0;
}
#warp-thumb sup {
    color: black;
    align-self: flex-start;
}
#time-slider-cntnr .time-readout-first {
    color: var(--hud-color-soft-1);
}
#season-picker .slider-label-cntnr span.value {
    color: var(--hud-color-value-2);
}
#time-acclrtr span.value {
    color: var(--hud-color-value-2);
}
#time-acclrtr span.units {
    margin-left: var(--slider-readout-margin);
    color: var(--hud-color-units-2);
}
#time-slider-readout {
    margin-left: 3px;
}
#time-slider-readout .num-mult {
    color: var(--hud-color-units-2);
}
.time-control {
    display: flex;
    flex-direction: column;
    left: 0;
    top: 0;
    padding: 12px 5px;
}
.time-control * {
    margin: 0;
}
.time-control h3 {
    margin-bottom: 0;
}
#dialog-btn-cntnr {
    flex-direction: row;
    align-items: stretch;
    right: 0;
    bottom: 0;
    margin-bottom: var(--edge-margin);
    margin-right: var(--edge-margin);
}
#dialog-btn-cntnr .hud-box-content {
    flex-direction: column;
    align-items: stretch;
}
#dialog-btn-cntnr .dialog-button {
    position: relative;
    margin-bottom: 10px;
    justify-content: center;
    align-items: center;
}
#dialog-btn-cntnr .dialog-button:last-child {
    margin-bottom: 0;
}
.hud-button-1 {
    background-color: var(--hud-bg-color-1);
    border: var(--hud-border-width) solid var(--hud-color);
    cursor: pointer;
}
@media (hover: hover) {
    .hud-button-1:hover {
        background-color: var(--button-color-hover-1);
    }
}
.hud-button-1:active {
    border-color: transparent;
    background-color: var(--hud-color);
    color: var(--hud-color-neg);
}
.hud-button-1:active span {
    color: var(--hud-color-neg);
}
.hud-button-1.selected {
    border-color: transparent;
    background-color: var(--hud-color);
    color: var(--hud-color-neg);
}
.hud-button-1.selected span {
    color: var(--hud-color-neg);
}
.hud-button-1:active svg line {
    stroke: var(--hud-color-neg);
}
.dialog-button {
    padding: 5px;
}
.dialog-body .value {
    color: var(--hud-color-value-4);
    color: var(--hud-color-value);
}
.dialog-body .value sup {
    color: var(--hud-color-value-4);
    color: var(--hud-color-value);
}
.dialog-body .value.null-value {
    color: var(--hud-color-soft-1);
}
.dialog-body .units {
    color: var(--hud-color-units-4);
    color: var(--hud-color-units);
}
.dialog-body h4 {
    color: var(--hud-color-soft-1);
}
.dialog-body::-webkit-scrollbar {
    -webkit-overflow-scrolling: auto;
    width: 15px;
    background-color: rgba(255,255,255,0.25);
}
.dialog-body::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0.25);
}
.dialog-body::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.25);
}
.dialog-body section {
    padding: var(--dialog-edge-pad-y) var(--dialog-edge-pad-x);
    border-bottom: var(--hud-border-width) solid var(--hud-color-lowcntrst);
}
.dialog-body section:last-child {
    border-bottom: none;
}
.dialog-body section > *:last-child {
    margin-bottom: 0;
}
.dialog-body p {
    color: var(--hud-color-soft-1);
    margin-top: 0;
}
.dialog-body p:last-child {
    margin-bottom: 0;
}
.dialog-body a {
    color: var(--link-color);
    text-decoration: none;
}
.dialog-body .highlight {
    color: var(--hud-color);
}
@media (hover: hover) {
    .dialog-body a:hover {
        text-decoration: underline;
    }
}
#reference-links a {
    color: var(--hud-color-value-5);
}
#reference-links li {
    margin-bottom: 6px;
    word-wrap: break-word;
}
#reference-links li:last-child {
    margin-bottom: 0;
}
.render-object-param h4,
#reference-links ol li::marker {
    color: var(--hud-color-soft);
}
.dialog-box {
    display: none;
    flex-direction: column;
    z-index: 11;
    width: 90%;
    height: 90%;
    max-width: 600px;
    max-height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,0.9);
    border: var(--hud-border-width) solid var(--hud-color);
}
#dialog-body-index {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#dialog-body-index > p {
    margin: 20px;
}
.index-system-cntnr {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    min-width: 150px;
    margin-bottom: var(--index-system-margin);
}
.index-system-cntnr:first-child {
    margin: var(--index-system-margin);
}
.index-system-cntnr.planet {
    border: var(--index-system-brdr-wdth) solid var(--index-color-planet);
    border-top: none;
}
.index-system-cntnr.planet .index-link-cntnr.moon {
    background-color: var(--index-color-moon-2);
    border-bottom: 1px solid var(--index-color-planet);
}
.index-system-cntnr.planet .index-link-cntnr.moon:last-child {
    border-bottom: none;
}
.index-system-cntnr.dwarf-planet .index-link-cntnr.moon {
    border-bottom: 1px solid var(--index-color-dwarf);
}
.index-system-cntnr.dwarf-planet .index-link-cntnr.moon:last-child {
    border-bottom: none;
}
.index-system-cntnr.dwarf-planet {
    border: var(--index-system-brdr-wdth) solid var(--index-color-dwarf);
    border-top: none;
}
.index-system-cntnr.wip {

}
.index-link-cntnr {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#dialog-box-index .index-link-cntnr span {
    text-decoration: none;
}
.index-link-cntnr h3 {
    margin: var(--index-body-name-margin) 0;
}
.index-link-cntnr.planet {
    background-color: var(--index-color-planet);
}
#dialog-box-index .index-link-cntnr.planet span,
#dialog-box-index .index-link-cntnr.dwarf-planet span {
    color: var(--hud-color-value);
}
#dialog-box-index .index-link-cntnr.moon span {
    color: var(--hud-color-value-dark);
}
#dialog-box-index .index-link-cntnr.wip span {
    color: var(--wip-link-2);
}
.index-link-cntnr.planet:last-child h3 {
    margin-bottom: calc(var(--index-body-name-margin) - var(--index-system-brdr-wdth));
}
.index-link-cntnr.dwarf-planet:last-child h3 {
    margin-bottom: calc(var(--index-body-name-margin) - var(--index-system-brdr-wdth));
}
.index-link-cntnr.dwarf-planet {
    background-color: var(--index-color-dwarf);
}
@media (hover: hover) {
    #dialog-box-index .index-link-cntnr.planet a:hover span,
    #dialog-box-index .index-link-cntnr.dwarf-planet a:hover span,
    #dialog-box-index .index-link-cntnr.moon a:hover span {
        color: var(--hud-color-value-2);
        text-decoration-color: var(--hud-color-value-2);
    }
    #dialog-box-index a:hover {
        color: var(--hud-color-value-2);
    }
}

@media (min-height: 376px) {
    .dialog-box {
        background-color: rgba(0,0,0,0.75);
    }
    .hud-box h2 {
        font-size: 135%;
    }
    .hud-box h3 {
        font-size: 100%;
    }
    .hud-box h4 {
        font-size: 100%;
    }
    #altitude-readout {
        font-size: 97%;
    }
    .hud-box.controls p {
        font-size: 95%;
    }
}
.dialog-box.selected {
    display: flex;
}
.dialog-header-strip {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: var(--hud-border-width) solid var(--hud-color);
    height: 30px;
}
.dialog-close {
    margin-right: 4px;
    margin-top: 4px;
    position: absolute;
    height: 20px;
    width: 20px;
    right: 0;
    top: 0;
    background-color: transparent;
}
.dialog-close svg {
    width: 100%;
    height: 100%;
}
.dialog-close svg line {
    stroke-width: 7;
    stroke: var(--hud-color);
    stroke-linecap: square;
}
.dialog-back {
    left: 0;
    top: 0;
    background-color: transparent;
    margin-left: 4px;
    margin-top: 4px;
    position: absolute;
    height: 20px;
    width: 20px;
}
.dialog-back svg {
    width: 100%;
    height: 100%;
}
.dialog-back svg polyline {
    stroke-width: 7;
    fill: none;
    stroke: var(--hud-color);
    stroke-linecap: square;
}
.dialog-body {
    overflow-y: auto;
    height: 100%;
}
.dialog-body h3 {
}
.dialog-body > h3:first-child {
    margin-top: 0;
}
.dialog-body section h3 {
    margin-top: 0;
    margin-bottom: 15px;
}
.dialog-body h3 span {
    color: var(--hud-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}
.model-info-param h4 {
    margin-top: 3px;
    margin-bottom: 3px;
}
#model-render-info {
    padding: 20px 0;
}
#model-render-info > * {
    padding: 0 var(--dialog-edge-pad-x);
}
#model-render-info .model-info-param {
    padding: 0;
}
#model-render-info .model-info-param.inline {
    padding-right:15px;
}
#model-render-info .model-info-param > h4 {
    background-color: rgba(255,255,255,0.0625);
    padding: 2px var(--dialog-edge-pad-x);
}
#model-render-info .render-object-params {
    padding: 0 var(--dialog-edge-pad-x);
}
#model-render-info .model-info-param.inline > h4 {
    background-color: transparent;
}
.model-body-param .units {
    margin-left: 0.25em;
}
#model-body-info .model-info-param {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#model-scale h4 {
    display: inline-block;
}
#model-scale {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.render-object-params h4 {
    margin-left: var(--dialog-edge-pad-x);
}
.render-object-param {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#texture-media-cntnr {
    display: none;
}
@media (min-width: 1200px ) {
    h1 {
        font-size: 250%;
    }
    .hud-box h2 {
        font-size: 140%;
    }
    .hud-box h3 {
        font-size: 105%;
    }
    .hud-box.controls p {
        font-size: 95%;
    }
    input[type="range"] {
        width: var(--slide-width);
        height: var(--slide-hgt);
    }
    input[type=range]::-webkit-slider-thumb {
        height: var(--slide-thumb-hgt);
        width: var(--slide-thumb-wdth);
    }
    input[type=range]::-moz-range-thumb {
        height: var(--slide-thumb-hgt);
        width: var(--slide-thumb-wdth);
    }
    input[type=range]::-ms-thumb {
        height: var(--slide-thumb-hgt);
        width: var(--slide-thumb-wdth);
    }
}

@keyframes dot-load-1 {
    0% {
        opacity: 0;
    }
    24.9% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}
@keyframes dot-load-2 {
    0% {
        opacity: 0;
    }
    49.9% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}
@keyframes dot-load-3 {
    0% {
        opacity: 0;
    }
    74.9% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}