html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

#nprogress{pointer-events:none}#nprogress .bar{background:#29d;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #29d, 0 0 5px #29d;opacity:1;-webkit-transform:rotate(3deg) translate(0, -4px);-ms-transform:rotate(3deg) translate(0, -4px);transform:rotate(3deg) translate(0, -4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:#29d;border-left-color:#29d;border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.dashboard-page{height:100vh;width:100%;background:#000}.text-white{color:#fff !important}.text-uppercase{text-transform:uppercase}.text-warning{color:#da9d2c}.text-active{color:#5acac5}.onos-sidebar{position:fixed;left:10px;height:90vh;top:40px;width:40px;background:rgba(7,22,61,0.788);backdrop-filter:blur(5px);box-shadow:0px 3px 12px -1px rgba(27,23,23,0.774);z-index:99;display:flex;flex-direction:column;justify-content:space-between;border-radius:20px}@media (max-width: 600px){.onos-sidebar{display:none}}.onos-sidebar .onos-logo{width:22px;margin:12px auto}.onos-sidebar .sidebar-nav{margin:10px auto;padding-bottom:10px;display:flex;flex-direction:column}.onos-sidebar .sidebar-nav i{padding:5px;margin-top:15px;border-radius:2px;color:rgba(148,146,146,0.877);background:rgba(8,8,44,0.973);cursor:pointer;transition:0.3s}.onos-sidebar .sidebar-nav i:hover{background:rgba(10,10,126,0.973);color:#fff;transition:0.3s}.onos-sidebar .sidebar-nav i.active{background:rgba(23,197,197,0.973);color:rgba(10,10,126,0.973);transition:0.3s}.info-bar{position:fixed;height:100vh;width:300px;background:#21242b;backdrop-filter:blur(5px);z-index:99;right:0px;top:0px;overflow:hidden;overflow-y:auto}@media (max-width: 600px){.info-bar{width:100%;height:45%;top:unset;bottom:0px;border-radius:10px 10px 0px 0px;border-top:5px solid #3cdbe6;box-shadow:1px 0px 25px 2px rgba(107,235,218,0.39)}}.info-bar .info-nav{background:#323946;padding:0px 20px 8px;position:sticky;top:0px;z-index:900}.info-bar .info-nav span{font-size:11px;text-transform:uppercase;margin-right:15px;color:#7c7c7c;padding:10px 5px;cursor:pointer;border-bottom:3px solid transparent}.info-bar .info-nav span:hover{transition:0.3s;color:#fff}.info-bar .info-nav span.active{font-weight:700;color:#fff;border-bottom:3px solid #538bf1;cursor:default}.info-bar .content-body{padding:15px 15px;display:flex;flex-direction:column}.map-container{height:100vh;width:100%;display:grid}.map-container img{filter:contrast(130%) opacity(70%);height:100%;width:100%}@media (max-width: 750px){.map-container img{transform:translateY(30%)}}.card-item{background:#323946;border-radius:2px;width:100%;color:#fff;margin-bottom:15px;height:auto}.time-widget{padding:10px 15px;height:auto;display:flex;flex-direction:column;border-left:1px solid #42c5ba}.time-widget span{font-weight:100}.time-widget small{font-size:11px;color:#7e8085}.image-widget{padding:5px 10px 10px;display:flex;flex-direction:column;border-left:1px solid #3167ad;border-right:1px solid #3167ad}.image-widget.active-image{background:rgba(7,22,61,0.788)}.image-widget small{font-size:11px;color:#7e8085;margin-bottom:5px}.image-widget small i{color:#42c5ba}.image-widget img{height:auto;width:auto;object-fit:cover}.image-widget button{border:0;background:#326b99;color:#fff;padding:5px 15px;width:fit-content;margin-top:10px;text-transform:uppercase;font-size:11px;float:right;border-radius:1px}.card-widget{padding:10px 15px;height:auto;display:flex;align-items:center;border-left:1px solid #42c5ba}.card-widget div{width:100%}.card-widget span{font-weight:100}.card-widget small{font-size:11px;color:#7e8085}.card-widget i{font-size:40px;margin-right:20px;color:#42c5ba}.card-widget div{display:flex;flex-direction:column}.card-widget.danger{border-left:8px solid #e94057;border-right:8px solid #e94057;box-shadow:0px 5px 12px -1px rgba(247,110,110,0.164);color:#eb6e7e}.card-widget.danger i{color:#f15569}.onos-slider{width:100%}.s-thumb{background:#6f7481;padding:2px 5px;font-size:10px;position:relative;top:-6px}.s-track{background:linear-gradient(to left, #43cea2, #185a9d);height:7px}.x-track{background:linear-gradient(to right, #8a2387, #e94057, #f27121);height:7px}.y-track{background:linear-gradient(to right, #00c3ff, #ffff1c);height:7px}.s-track-1,.x-track-1,.y-track-1{background:#515253}.filter-sliders{height:auto}.slider-segment{padding:5px 0px;margin-bottom:20px}.slider-segment small{font-size:12px;padding:2px 10px;position:relative;top:-4px}.item-list{color:#6f7481;padding:0px 0px;list-style:none}.item-list li{font-size:14px;border-bottom:1px solid #515253;background:#323946;padding:5px 10px;display:flex;justify-content:space-between;align-items:center;transition:0.3s;cursor:pointer}.item-list li i{font-size:20px;color:#42c5ba}.item-list li i.la-chevron-circle-up{display:none}.item-list li:hover{background:#314058;border-left:3px solid #42c5ba;color:#42c5ba;transition:0.3s}.item-list li.active{background:#314058;border-left:10px solid #5cadf0;color:#68c7ec;transition:0.3s}.item-list li.active i.la-chevron-circle-up{display:block}.item-list li.active i.la-chevron-circle-down{display:none}.report-segment{height:auto;border-left:1px solid #42c5ba}.report-segment .segment-header{margin:10px 0px;position:relative;left:-1px}.report-segment .segment-header span{font-size:13px;background:#323946;color:#fff;padding:7px 15px;border:1px solid #43cea2;border-left:5px solid #43cea2}.report-segment .segment-header span.top-segment{padding-left:5px}.text-header{color:#9e9d9d;font-size:13px;text-transform:uppercase}.text-header small{text-transform:lowercase !important;color:#6b6b6b;line-height:16px;display:block}.save-btn{background:#42c5ba;border:0px;padding:10px;border-radius:2px;outline:none;cursor:pointer;margin:20px 0px;text-transform:uppercase;transition:0.3s}.save-btn:hover{background:#29948b;transition:0.3s}.event-data{margin:10px 0px}.event-data li{color:#9b9a9a;font-size:12px;display:block}.event-data li span{font-weight:600;color:#ec8c85}.image-info-tab{position:fixed;z-index:99;right:320px;top:20px;background:rgba(0,0,0,0.829);padding:0px 15px;border-radius:20px;color:rgba(255,255,255,0.644);box-shadow:0px 3px 12px -1px rgba(27,23,23,0.774)}@media (max-width: 600px){.image-info-tab{right:20px}}.image-info-tab span{font-size:12px;font-weight:100;position:relative;top:-2px}.image-info-tab span strong{color:#68b1ec}.current-image-modes{position:fixed;display:flex;bottom:10px;right:310px;z-index:100}@media (max-width: 600px){.current-image-modes{display:none}}.current-image-modes .image-box{height:auto;width:80px;padding:5px 5px 5px;background:rgba(0,0,0,0.562);margin-left:10px;cursor:pointer;opacity:0.8;transition:0.3s}.current-image-modes .image-box small{color:#fff;font-size:10px;text-transform:uppercase;display:none}.current-image-modes .image-box small i{color:#68c7ec}.current-image-modes .image-box img{height:auto;object-fit:contain}.current-image-modes .image-box:hover{opacity:1;background:rgba(0,0,0,0.774);transition:0.3s}.current-image-modes .image-box:hover small{display:block}.image-item{object-fit:cover;filter:brightness(120%) contrast(120%) hue-rotate(35deg)}#image_canvas{display:none}.analysis-component{display:flex;display:none;flex-direction:column;background:#323946;margin:5px 0px 10px}.analysis-component .item-header{padding:4px 10px;border-bottom:0.3px solid rgba(121,119,119,0.555)}.analysis-component .item-header i{color:#5acac5}.analysis-component #current-delta-img{height:120px;width:100%;object-fit:cover;filter:contrast(120%)}.analysis-component .main-predictions{width:100%;display:flex;flex-direction:column;padding:10px 10px}.analysis-component .main-predictions .result{display:flex;width:100%;padding:10px;border-radius:4px;color:#fff;border:0.3px solid rgba(116,110,110,0.493);margin-bottom:5px;background:rgba(49,45,45,0.568)}.analysis-component .main-predictions .result span{position:relative;text-transform:uppercase;font-weight:100;left:10px;top:5px}.analysis-component .main-predictions .result.top-result{border:none;padding:10px 15px;background:linear-gradient(to right, rgba(90,190,90,0.877), rgba(68,128,151,0.938)),url("/current.gif") center no-repeat;background-size:cover}.analysis-component .main-predictions .result.top-result span{font-weight:700}.analysis-component .main-predictions .result.top-result .icon-wrapper{height:30px;width:30px;display:grid;border:2px solid #fff;border-radius:100%}.analysis-component .main-predictions .result.top-result .icon-wrapper i{margin:auto;font-size:20px}#main-image{filter:contrast(130%) brightness(110%) hue-rotate(40deg)}

/*
 * react-circular-progressbar styles
 * All of the styles in this file are configurable!
 */

.CircularProgressbar {
  /*
   * This fixes an issue where the CircularProgressbar svg has
   * 0 width inside a "display: flex" container, and thus not visible.
   */
  width: 100%;
  /*
   * This fixes a centering issue with CircularProgressbarWithChildren:
   * https://github.com/kevinsqi/react-circular-progressbar/issues/94
   */
  vertical-align: middle;
}

.CircularProgressbar .CircularProgressbar-path {
  stroke: #3e98c7;
  stroke-linecap: round;
  -webkit-transition: stroke-dashoffset 0.5s ease 0s;
  transition: stroke-dashoffset 0.5s ease 0s;
}

.CircularProgressbar .CircularProgressbar-trail {
  stroke: #d6d6d6;
  /* Used when trail is not full diameter, i.e. when props.circleRatio is set */
  stroke-linecap: round;
}

.CircularProgressbar .CircularProgressbar-text {
  fill: #3e98c7;
  font-size: 20px;
  dominant-baseline: middle;
  text-anchor: middle;
}

.CircularProgressbar .CircularProgressbar-background {
  fill: #d6d6d6;
}

/*
 * Sample background styles. Use these with e.g.:
 *
 *   <CircularProgressbar
 *     className="CircularProgressbar-inverted"
 *     background
 *     percentage={50}
 *   />
 */
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
  fill: #3e98c7;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
  fill: #fff;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
  stroke: #fff;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
  stroke: transparent;
}

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.headerImage {
  width: 6rem;
  height: 6rem;
}

.headerHomeImage {
  width: 8rem;
  height: 8rem;
}

.backToHome {
  margin: 3rem 0 0;
}