/* IP CONFIG brand fonts. The OpenSpeedTest engine stays at upstream v2.5.4. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../../../../assets/fonts/SourceSerif4-Variable.ttf") format("truetype");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../../../../assets/fonts/JetBrainsMono-Variable.ttf") format("truetype");
}

body {
  margin: 0px;
  padding: 0px;
  display: block;
  color: #1a1611;
  background: #fffaf0;
  font-family: "Source Serif 4", Georgia, serif;
}

::-webkit-scrollbar {
  display: none;
}
html {
  -ms-overflow-style: none; 
  scrollbar-width: none;
}
 
.Credits {
color: rgb(125 119 119);
text-align: center;
font-size:14px;
font-family: "Source Serif 4", Georgia, serif;
font-weight: 500;
} 
.Credits a {
  text-decoration: none;
  color: #5f0e0e;
}
.Credits a:hover {
color: #d9514d;
}

.ConnectError {
  display: none;

}

.openSpeedtestApp {
 
  height: 100vh;
  width: 100vw;
  display: none;
  overflow: hidden;
}
.main-Gaugebg {
  fill: none;
  stroke: rgb(231, 231, 232);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 22px;
  stroke-dasharray: 681;
}
.main-GaugeBlue {
  fill: none;
  stroke: url(#gradient);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 22px;
  stroke-dasharray: 681;
  stroke-opacity: 0;
}
.main-GaugeWhite {
  fill: none;
  stroke: rgb(255, 255, 255);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 15px;
  stroke-dasharray: 0, 681;
  stroke-dashoffset: 1;
  stroke-opacity: 0;
}
.oDo-Meter {
  font-size: 16.633283615112305px;
  fill: gray;
  font-family: Roboto-Medium, Roboto;
  font-weight: 500;
}
.oDoLive-Speed {
  font-size: 28px;
  fill: #201e1e;
  font-family: Roboto-Medium, Roboto;
  font-weight: 500;
  text-anchor: middle;
}

.oDoLive-Status {
  font-size: 10px;
  fill: #d2d1d2;
  font-family: Roboto-Medium, Roboto;
  font-weight: 500;
  text-anchor: middle;
}
.uiBg {
  fill: #d2d1d2;
}
.progressbg {
  stroke: rgb(231, 231, 232);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
.Cards {
  fill: #f2f2f2;
}
.Symbol {
  fill: url(#gradient);
}
.rtext {
  font-size: 12px;
  fill: #333;
  font-family: Roboto-Medium, Roboto;
  font-weight: 500;
}
.rtextnum {
  font-size: 23px;
  fill: #201e1e;
  font-family: Roboto-Medium, Roboto;
  font-weight: 500;
  text-anchor: middle;
}
.rtextmbms {
  font-size: 12px;
  fill: #5f5f5f;
  font-family: Roboto-Medium, Roboto;
  font-weight: 500;
  text-anchor: middle;
}
.jitter-Mob {
  font-size: 9px;
  fill: #5f5f5f;
  font-family: Roboto-Medium, Roboto;
  font-weight: 500;
  text-anchor: middle;
}
.startButton {
  fill: url(#RadialGradient1);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  pointer-events: visible;
}
.buttonTxt {
  font-size: 40px;
  fill: #ffffff;
  font-family: Roboto-Medium, Roboto;
  font-weight: 500;
  text-anchor: middle;
}

.intro-Progress {
  stroke: #56c4fb;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
.progressElmstart {
  stroke: #56c4fb;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
  display: block;
}
.Startsettings {
  fill: url(#RadialGradient1);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  pointer-events: visible;
  opacity: 0.1;
  transition: opacity 1s ease-in-out;
}
.Startsettings:hover {
  opacity: 1;
}

.progressbg {
  stroke: rgb(231, 231, 232);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
.deskStart {
  fill: none;
  stroke: rgb(231, 231, 232);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 22px;
  stroke-dasharray: 681;
  stroke: url(#gradient);
}
#UI-Desk {
  display: none;
}
#UI-Mob {
  display: none;
}
.oDoTop-Speed {
  font-size: 16.96px;
  fill: gray;
  font-family: Roboto-Medium, Roboto;
  font-weight: 500;
  text-anchor: end;
}
#upSymbolDesk {
  fill: #14b0fe;
  display: none;
}
#downSymbolDesk {
  fill: #14b0fe;
  display: none;
}
#upSymbolMob {
  fill: #14b0fe;
  display: none;
}
#downSymbolMob {
  fill: #14b0fe;
  display: none;
}

#ipMob {
  font-size: 15px;
  fill: #201e1e;
  font-family: Roboto-Medium, Roboto;
  font-weight: 500;
  text-anchor: middle;
  display: none;
}
#ipDesk {
  font-size: 15px;
  fill: #201e1e;
  font-family: Roboto-Medium, Roboto;
  font-weight: 500;
  text-anchor: middle;
  display: none;
}

.spinner {
  position: absolute;
  z-index: 999;
  top: 50vh;
  left: 50vw;
  text-align: center;
}

.spinner > div {
  width: 20px;
  height: 20px;
  background-color: #2196f3;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.darkmode {
  margin-bottom: -15px;
  fill: #75757a99;
  padding-top: 16px;
  display: none;
  cursor: pointer;
  margin-right: 30px;
}
#daymode {
  margin-right: 40px;
}
.darkmode:hover {
  fill: #000000;
}

.Mobile,
.Desktop {
  visibility: hidden;
  width: 100vw;
  height: 100vh;
}

@media only screen and (orientation: landscape) {
  .Mobile {
    visibility: hidden;
  }
  .Desktop {
    visibility: visible;
  }
}

@media only screen and (orientation: portrait) {
  .spinner {
    top: 42vh;
    left: 42vw;
  }
  .Mobile {
    visibility: visible;
  }
  .Desktop {
    visibility: hidden;
  }
}
@media only screen and (max-width: 300px) {
  .Credits{
    display: none;
  }
}

/* IP CONFIG presentation layer: brand palette, typography and accessible motion. */
:root { color-scheme: light dark; }
.oDo-Meter,
.oDoLive-Speed,
.oDoLive-Status,
.rtext,
.rtextnum,
.rtextmbms,
.jitter-Mob,
.buttonTxt,
.oDoTop-Speed,
#ipMob,
#ipDesk {
  font-family: "JetBrains Mono", Consolas, monospace;
}
.main-Gaugebg,
.progressbg,
.deskStart { stroke: #c9bea1; }
.main-GaugeBlue { stroke: url(#gradient); }
.Cards { fill: #fffaf0; }
.uiBg { fill: #ece4cf; }
.rtext,
.rtextnum,
#ipMob,
#ipDesk,
.oDoLive-Speed { fill: #1a1611; }
.rtextmbms,
.jitter-Mob,
.oDo-Meter,
.oDoTop-Speed { fill: #6f6555; }
.oDoLive-Status { fill: #8b1a1a; }
#upSymbolDesk,
#downSymbolDesk,
#upSymbolMob,
#downSymbolMob { fill: #d9514d; }
.intro-Progress,
.progressElmstart { stroke: #d9514d; }
.spinner > div { background-color: #d9514d; }
.Credits {
  padding: 0 14px 12px;
  color: #6f6555;
  line-height: 1.45;
}
.Credits a { color: #5f0e0e; text-decoration: underline; text-underline-offset: 3px; }
.Credits a:focus-visible { outline: 3px solid #8b1a1a; outline-offset: 3px; }

@media (prefers-color-scheme: dark) {
  body { color: #f4eedf; background: #0a0e17; }
  .Cards { fill: #111827; }
  .uiBg { fill: #253047; }
  .main-Gaugebg,
  .progressbg,
  .deskStart { stroke: #3f4b63; }
  .rtext,
  .rtextnum,
  #ipMob,
  #ipDesk,
  .oDoLive-Speed { fill: #f4eedf; }
  .rtextmbms,
  .jitter-Mob,
  .oDo-Meter,
  .oDoTop-Speed,
  .Credits { fill: #c9bea1; color: #c9bea1; }
  .oDoLive-Status { fill: #ff7a72; }
  .Credits a { color: #ff7a72; }
}

/* The parent page synchronizes its explicit theme into this same-origin frame. */
html[data-theme="light"] body { color: #1a1611; background: #fffaf0; }
html[data-theme="light"] .Cards { fill: #fffaf0; }
html[data-theme="light"] .uiBg { fill: #ece4cf; }
html[data-theme="light"] .main-Gaugebg,
html[data-theme="light"] .progressbg,
html[data-theme="light"] .deskStart { stroke: #c9bea1; }
html[data-theme="light"] .rtext,
html[data-theme="light"] .rtextnum,
html[data-theme="light"] #ipMob,
html[data-theme="light"] #ipDesk,
html[data-theme="light"] .oDoLive-Speed { fill: #1a1611; }
html[data-theme="light"] .rtextmbms,
html[data-theme="light"] .jitter-Mob,
html[data-theme="light"] .oDo-Meter,
html[data-theme="light"] .oDoTop-Speed,
html[data-theme="light"] .Credits { fill: #6f6555; color: #6f6555; }
html[data-theme="light"] .oDoLive-Status { fill: #8b1a1a; }
html[data-theme="light"] .Credits a { color: #5f0e0e; }

html[data-theme="dark"] body { color: #f4eedf; background: #0a0e17; }
html[data-theme="dark"] .Cards { fill: #111827; }
html[data-theme="dark"] .uiBg { fill: #253047; }
html[data-theme="dark"] .main-Gaugebg,
html[data-theme="dark"] .progressbg,
html[data-theme="dark"] .deskStart { stroke: #3f4b63; }
html[data-theme="dark"] .rtext,
html[data-theme="dark"] .rtextnum,
html[data-theme="dark"] #ipMob,
html[data-theme="dark"] #ipDesk,
html[data-theme="dark"] .oDoLive-Speed { fill: #f4eedf; }
html[data-theme="dark"] .rtextmbms,
html[data-theme="dark"] .jitter-Mob,
html[data-theme="dark"] .oDo-Meter,
html[data-theme="dark"] .oDoTop-Speed,
html[data-theme="dark"] .Credits { fill: #c9bea1; color: #c9bea1; }
html[data-theme="dark"] .oDoLive-Status { fill: #ff7a72; }
html[data-theme="dark"] .Credits a { color: #ff7a72; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}