:root {
  --font-headline: "basier_circlesemibold", sans-serif;
  --font-body: "basier_circleregular", sans-serif;
  --color-primary: #009ddf;
  --color-primary-rgb: rgb(0, 157, 223);
  --color-primary-hover: rgba(0, 157, 223, 0.9);
  --color-cyan: #d0f3ff;
  --color-black: #212529;
  --color-black2: #1f2125;
  --color-white: #fff;
  --color-white2: #fff;
  --color-grey1: #6a6b6c;
  --color-grey2: #e8e8e8;
  --color-grey3: #8c8c8c;
  --color-grey4: #6b7280;
  --color-pink: #ea5098;
  --color-pink2: #fc5e63;
  --color-pink2-hover: rgba(252, 94, 99, 0.9);
  --color-orange: #ffa300;
  --color-orange-hover: rgba(255, 163, 0, 0.9);
  --color-green: rgb(82, 242, 90);
}

.box-shadow {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 2px;
  padding: 1em;
}

.color-pink {
  color: var(--color-pink2);
}

.color-cyan {
  color: var(--color-primary);
}

.calculator-wrapper h1,
.calculator-wrapper h2 {
  color: var(--color-primary);
}
.calculator-wrapper h3 {
  color: #555;
}
.calculator-wrapper .ce_tabs {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 2px;
}
.calculator-wrapper .ce_tabs .panes {
  padding: 0.5em;
}

.calculator select.car-selector {
  border: 1px solid var(--color-primary);
  border-radius: 2px;
}
.calculator .current-car {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.calculator .current-car img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 200px;
}
.calculator .current-car .car-name {
  font-family: var(--font-headline);
}

.range-calculator .calc-range-value {
  text-align: center;
  font-size: 2.5rem;
  font-family: var(--font-headline);
  margin-bottom: 10px;
}
.range-calculator .circle {
  text-align: center;
}
.range-calculator .winter-range {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.range-calculator .winter-range label:hover,
.range-calculator .winter-range input:hover {
  cursor: pointer;
}
.range-calculator .winter-range .winter-icon img {
  width: 2em;
  height: 2em;
  object-fit: contain;
}
.range-calculator .winter-range input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}
.range-calculator .winter-range label {
  cursor: pointer;
  text-indent: -9999px;
  width: 50px;
  height: 30px;
  background: grey;
  display: block;
  border-radius: 100px;
  position: relative;
}
@media (max-width: 767px) {
  .range-calculator .winter-range label {
    width: 50px;
    height: 25px;
  }
}
.range-calculator .winter-range label:after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 25px;
  height: 25px;
  background: #fff;
  border-radius: 90px;
  transition: 0.2s ease-in-out all;
}
@media (max-width: 767px) {
  .range-calculator .winter-range label:after {
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
  }
}
.range-calculator .winter-range input:checked + label {
  background: var(--color-primary);
}
.range-calculator .winter-range input:checked + label:after {
  left: calc(100% - 2.5px);
  transform: translateX(-100%);
}
.range-calculator .winter-range label:active:after {
  width: 65px;
}

.risk-calculator .circle {
  text-align: center;
}

.range-input {
  /*input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ff0;
  }*/
}
.range-input input,
.range-input input:active,
.range-input input:hover,
.range-input input:focus {
  border: none !important;
  padding-inline: 0 !important;
}
.range-input input[type=range] {
  -webkit-appearance: none;
  /*margin: 0 auto;*/
  margin-bottom: 0;
  width: 100%;
  background: none;
}
.range-input input[type=range]:focus {
  outline: none;
}
.range-input input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  /*border-top: 1px solid #b99400;*/
  /*border-bottom: 2px solid #ffd631;*/
  cursor: pointer;
  /*animate: 0.2s;*/
  /*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
  background: #7cff25;
  background: linear-gradient(90deg, #555555 28%, #7cff25 100%);
  /* Standard syntax (must be last) */
  border-radius: 25px;
  /*border: 0px solid #000101;*/
  transition: background 0.1s ease;
}
.range-input input[type=range]::-webkit-slider-thumb {
  /*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
  border: 10px solid var(--color-primary);
  height: 40px;
  width: 40px;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -15px;
  transition: border 0.1s ease;
  -webkit-box-shadow: 0px 11px 27px -12px rgb(145, 94, 31);
  -moz-box-shadow: 0px 11px 27px -12px rgb(145, 94, 31);
  box-shadow: 0px 11px 27px -12px rgb(145, 94, 31);
}
.range-input input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  /*border-top: 1px solid #b99400;*/
  /*border-bottom: 2px solid #ffd631;*/
  cursor: pointer;
  animate: 0.2s;
  /*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
  background: #7cff25;
  background: linear-gradient(90deg, #555555 28%, #7cff25 100%);
  border-radius: 25px;
  /*border: 0px solid #000101;*/
  transition: background 0.1s;
}
.range-input input[type=range]::-moz-range-thumb {
  /*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
  border: 10px solid var(--color-primary);
  height: 20px;
  width: 20px;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
  transition: border 0.1s ease;
}
.range-input input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  /*border-top: 1px solid #b99400;*/
  /*border-bottom: 2px solid #ffd631;*/
  cursor: pointer;
  animate: 0.2s;
  /*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
  background: #7cff25;
  background: linear-gradient(90deg, #555555 28%, #7cff25 100%);
  border-radius: 25px;
  /*border: 0px solid #000101;*/
  transition: background 0.2s ease;
}
.range-input input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
.range-input input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
.range-input input[type=range]::-ms-thumb {
  /*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
  border: 3px solid var(--color-primary);
  height: 20px;
  width: 20px;
  border-radius: 30px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
  transition: border 0.1s;
}
.range-input input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}
.range-input input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}
.range-input input[type=range]:hover::-webkit-slider-thumb {
  /*background: #fff;*/
  border-color: var(--color-primary);
  -webkit-box-shadow: 0px 6px 27px -12px rgb(145, 94, 31);
  -moz-box-shadow: 0px 6px 27px -12px rgb(145, 94, 31);
  box-shadow: 0px 6px 27px -12px rgb(145, 94, 31);
}
.range-input input[type=range]:active::-webkit-slider-thumb {
  /*background: #fff;*/
  border-color: var(--color-primary);
  -webkit-box-shadow: 0px 6px 27px -12px rgb(145, 94, 31);
  -moz-box-shadow: 0px 6px 27px -12px rgb(145, 94, 31);
  box-shadow: 0px 6px 27px -12px rgb(145, 94, 31);
}
.range-input input[type=range]:hover::-moz-range-thumb {
  background: #fff;
  border-color: var(--color-primary);
}
.range-input input[type=range]:active::-moz-range-thumb {
  background: #fff;
  border-color: var(--color-primary);
}

.svg-item {
  max-width: 10em;
  font-size: 16px;
  margin: 0 auto;
  animation: donutfade 1s;
}
@media (min-width: 992px) {
  .svg-item {
    width: 15em;
  }
}

.text.module-text {
  width: 100%;
}

@keyframes donutfade {
  /* this applies to the whole svg item wrapper */
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@media (min-width: 992px) {
  .svg-item {
    width: 15em;
  }
}
.donut-ring {
  stroke: #ebebeb;
}

.donut-segment {
  transform-origin: center;
  stroke: #ff6200;
}

.donut-segment-2 {
  stroke: var(--color-pink2);
  animation: donut1 3s;
}

.donut-segment-3 {
  stroke: var(--color-primary);
  animation: donut2 3s;
}

.donut-segment-module-replace {
  stroke: var(--color-pink2);
  animation: donut-module-replace 3s;
}

.donut-segment-battery-replace {
  stroke: var(--color-pink2);
  animation: donut-battery-replace 3s;
}

.donut-segment-aviloo-cert {
  stroke: var(--color-primary);
  animation: donut-aviloo-cert 3s;
}

.segment-1 {
  fill: #ccc;
}

.segment-2 {
  fill: aqua;
}

.segment-3 {
  fill: var(--color-primary);
}

.segment-4 {
  fill: #ed1e79;
}

.donut-percent {
  animation: donutfadelong 1s;
}

@keyframes donutfadelong {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes donut1 {
  0% {
    stroke-dasharray: 0, 100;
  }
  100% {
    stroke-dasharray: 20, 80;
  }
}
@keyframes donut2 {
  0% {
    stroke-dasharray: 0, 100;
  }
  100% {
    stroke-dasharray: 80, 20;
  }
}
@keyframes donut-module-replace {
  0% {
    stroke-dasharray: 0, 100;
  }
  100% {
    stroke-dasharray: 25, 75;
  }
}
@keyframes donut-battery-replace {
  0% {
    stroke-dasharray: 0, 100;
  }
  100% {
    stroke-dasharray: 100, 0;
  }
}
@keyframes donut-aviloo-cert {
  0% {
    stroke-dasharray: 0, 100;
  }
  100% {
    stroke-dasharray: 3, 97;
  }
}
.donut-text {
  font-family: Arial, Helvetica, sans-serif;
  fill: #ff6200;
}

.donut-text-1 {
  fill: var(--color-pink2);
}

.donut-text-2 {
  fill: var(--color-primary);
}

.donut-text-3 {
  fill: var(--color-primary);
}

.donut-label {
  font-size: 0.28em;
  font-weight: 700;
  line-height: 1;
  fill: #000;
  transform: translateY(0.25em);
}

.donut-percent {
  font-size: 0.45em;
  line-height: 1;
  transform: translateY(0.5em);
  font-weight: bold;
}

.donut-data {
  font-size: 0.12em;
  line-height: 1;
  transform: translateY(0.5em);
  text-align: center;
  text-anchor: middle;
  color: #666;
  fill: #666;
  animation: donutfadelong 1s;
}

/*# sourceMappingURL=style.css.map */