@keyframes scale-out {
  from {
    opacity: 0;
    transform: scale(0)
  }
}

@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
}
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
}
@keyframes dropin {
  from {
    opacity: 0;
    transform: translateY(-2rem);
  }
}
@keyframes dropin-2 {
  from {
    opacity: 0;
    transform: translateY(-2rem);
  }
}
@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(25deg);
  }
  66% {
    transform: rotate(-25deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes arrow-dots {
  from {
    stroke-dashoffset: 180;
  }
  to {
    stroke-dashoffset: 0;
  }
}


html, body {
  font-family: 'Proxima Nova', sans-serif;
  background: #f7f7f7;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
svg {
  width: 100%;
}
.cvk-cn-wrapper ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cvk-cn-wrapper button {
  border: none;
  background: none;
  color: #04355C;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.4;
  height: 100%;
  cursor: pointer;
  outline: none;
}
.cvk-cn-wrapper button:hover,
.cvk-cn-wrapper button:focus {
  color: #1C88C6;
}

.cvk-cn-svg-shadow {
  /* height: fit-content; */
  filter: drop-shadow(2px 6px 8px rgb(0,33, 56, 0.2));
}

.cvk-defs {
  position: absolute;
  pointer-events: none;
}




.cvk-connect-icon {
  color: #CCC;
  cursor: pointer;
  transition: transform 0.3s ease;
  transform-origin: 50% 50%;
}
.cvk-connect-icon:hover {
  color: white;
}
.icon-bell .cvk-connect-icon-group {
  transform-origin: 7% 43%;
  animation: swing 1.3s 3.1s ease-out both;
  /* transform: rotate(0); */
}
.icon-alert {
  animation: dropin 0.3s 3s cubic-bezier(.47,1.64,.41,.8) both;
}

.cvk-cn-wrapper {
  display: flex;
  flex-flow: column;
  width: 100%;
  max-width: 80vw;
}
.cvk-cn-tabs {
  padding: 0.5rem;
  background: #e7e7e7;
  margin-bottom: 10vh;
}
.cvk-cn-tabs-item.active .cvk-cn-tabs-btn {
  font-weight: 900;
}
.cvk-tab-dzn.active ~ .cvk-cn-tabs-marker {
  transform: translateX(100%);
}
.cvk-tab-rcl.active ~ .cvk-cn-tabs-marker {
  transform: translateX(200%);
}
.cvk-cn-graphic-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  height: 80vh;
}

.cvk-cn-graphic {
  position: absolute;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 80%;
  transform: scale(0.8);
  transition: opacity 0.35s ease-in, transform 0.35s ease-in;
}

.cvk-cn-graphic.cvk-cn-fixed {
  opacity: 1;
  transform: none;
}

.cvk-cn-graphic.cvk-cn-fixed .cvk-ani-wrapper {
  opacity: 0.05;
  transition: opacity 0.5s ease-out;
}

.rcl-active .cvk-cn-graphic.cvk-cn-fixed .inv-auto .cvk-ani-wrapper {
  opacity: 1;
  transition-delay: 0.5s;
}

.cvk-cn-graphic.cvk-cn-fixed.active .cvk-ani-wrapper {
  opacity: 1;
}

.cvk-cn-graphic.active {
  opacity: 1;
  transform: none;
  pointer-events: all;
}


.cvk-cn-fixed .cvk-appear,
.active .cvk-appear {
  animation: appear 2s ease-out both;
}
.cvk-cn-fixed .cvk-scale-out,
.active .cvk-scale-out {
  animation: scale-out 2s ease-out both;
}
.cvk-ani:nth-child(n+1) {
  animation-delay: 0.2s;
}
.cvk-ani:nth-child(n+2) {
  animation-delay: 0.4s;
}
.cvk-ani:nth-child(n+3) {
  animation-delay: 0.6s;
}
.cvk-ani:nth-child(n+4) {
  animation-delay: 0.8s;
}
.cvk-cn-graphic .inv-central {
  transform-origin: 8% 16%;
  animation-delay: 1s
}
.cvk-cn-graphic .inv-delinq .cvk-ani-wrapper {

  transform: translateY(42%);
}
.cvk-cn-graphic .inv-delinq {
  /* transform-origin: 30% 20%;
  transform-origin: 8% 16%; */
  
  transform-origin: 40% 20%;
  transform-origin: 8% 16%;
  /* animation-delay: 0.4s */
}
.cvk-cn-graphic .inv-configure {
  transform-origin: 30% 20%;
  transform-origin: 8% 16%;
  /* animation-delay: 0.6s */
}
.cvk-cn-graphic .inv-auto .cvk-ani-wrapper {

  transform: translateY(-38.5%);
}
.cvk-cn-graphic .inv-auto {
  /* transform-origin: 40% 20%;
  transform-origin: 8% 16%; */

  transform-origin: 30% 20%;
  transform-origin: 8% 16%;
  /* animation-delay: 0.8s */
}

@keyframes inv-cn-subtitle {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.1;
  }
}

.inv-central g {
  cursor: pointer;
}

.inv-central-move {
  z-index: 10;
  transition: transform 0.5s ease-in-out;
}

.inv-central-agency:hover .inv-central-move {
  transform: translate(19.2%, 0.2%);
}

.inv-central-spec:hover ~ .inv-central-move {
  transform: translate(0%, -21.1%);
}

.inv-central-legal:hover .inv-central-move {
  transform: translate(0.15%, 20.92%);
}


.cvk-cn-svg-btn {
  cursor: pointer;
}

.cvk-cn-svg-btn:hover,
.cvk-cn-svg-btn:focus {
  filter: brightness(1.1);
}

.inv-cn-subtitle {
  animation: inv-cn-subtitle 1s 0.6s ease-out both;
}

.cvk-cn-tabs-list {
  position: relative;
  display: flex;
  list-style: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.cvk-cn-tabs-item {
  flex: 1 1 33.3333%;
  text-align: center;
  z-index: 1;
}
.cvk-cn-tabs-btn {
  padding: 1rem 2rem;
  text-align: center;
  display: inline-flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.cvk-cn-tabs-btn:hover,
.cvk-cn-tabs-btn:focus {
  background: rgba(255,255,255,0.25);
}

.cvk-cn-tabs-marker {
  position: absolute;
  inset: 0 auto 0 0;
  background: #fff;
  width: 33.3333%;
  transition: transform 0.3s ease-in-out;
}

.cvk-cn-tabs-marker:hover,
.cvk-cn-tabs-marker:focus {
  background: #f5b011;
}


.cvk-ifbox {
  position: absolute;
  border: 2px solid #DCDCDC;
  padding: 0.25rem 1rem;
  background: #F7F7F7;
  border-radius: 24px;
  font-size: 1rem;
  z-index: 0;
}

.cvk-ifbox select {
  border: none;
  cursor: pointer;
  font-size: inherit;
  border-radius: 2em;
  margin-left: 0.1em;
  margin-right: 0.1em;
  transition: 0.2s ease-out;
  margin-bottom: -0.25em;
  padding: 0.25em 0.5em;
  box-shadow: 0.125em 0.125em 0.5em rgba(0,0,0, 0.25);
}
.cvk-ifbox select:hover,
.cvk-ifbox select:focus {
  box-shadow: 0.025em 0.025em 0.1em rgba(0,0,0, 0.5);
}


.cvk-ifbox-item {
  position: relative;
  display: block;
  margin-bottom: 1em;
  line-height: 1.5;
  z-index: 10;
  color: #04355c;
}
.cvk-ifbox-item p {
  margin-top: 0;
  margin-bottom: 0;
}
.cvk-ifbox-title {
  display: inline-block;
  text-transform: uppercase;
  font-weight: bold;
  color: #1C7979;
  font-size: 0.9em;
  margin-left: -0.5em;
  background: #F7F7F7;
  padding: 0 0.5em;
}
.cvk-ifbox-item:first-of-type {
  margin-top: -1em
}
.cvk-ifbox-item:first-of-type .cvk-ifbox-title {
  margin-bottom: 0.25em
}
.cvk-ifbox-item:last-of-type {
  margin-bottom: 0.5em
}
.cvk-ifbox-item:first-of-type:last-of-type {
  margin-top: -1.6em
}
.cvk-ifbox-item:first-of-type:last-of-type .cvk-ifbox-title {
  margin-bottom: 0;
  margin-top: 0.6em;
}
.cvk-ifbox-cog {
  position: absolute;
  top: 100%;
  width: 2.5em;
  height: 2.5em;
  display: flex;
  align-items: center;
  margin-top: -1.15em;
  right: 1em;
  cursor: pointer;
  background: #F7F7F7;
}
.cvk-ifbox-cog-svg {
  z-index: 10;
}

.cvk-ifbox-cog::before {
  position: absolute;
  left: 0;
  background: white;
  padding: 0.4rem 0.4rem 0.4rem 2rem;
  content: "Configure";
  font-weight: bold;
  z-index: 0;
  border-radius: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  box-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0, 0.25);
}
.cvk-ifbox-cog:hover::before {
  opacity: 1;
}

.cvk-pnt {
  position: absolute;
  width: 1px;
  height: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
}
.cvk-cn-outcome,
.cvk-borderbox {
  position: absolute;
  display: block;
  padding: 3px;
  background: #04355c;
  border-radius: 12px;
  color: #6D6D6D;
  font-weight: bold;
  z-index: 20;
}
.show-guides .cvk-pnt::before,
.show-guides .cvk-pnt::after {
  position: absolute;
  background: red;
  z-index: 100;
  content: "";
  width: 1px;
  height: 1px;
}
.cvk-pnt::before {
  left: -4px;
  width: 9px;
}
.cvk-pnt::after {
  top: -4px;
  height: 9px
}

.cvk-borderbox-container {
  position: relative !important;
  display: flex;
  padding: 0.6em 1em;
  height: 100%;
  align-items: center;
  text-align: left;
  background: white;
  border-radius: 8px;
  text-wrap: nowrap;
}

.cvk-borderbox-icon {
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
}

.cvk-borderbox.cvk-blue {

  background: linear-gradient(#a6cded, #2b8fde);
}
.cvk-borderbox.cvk-gold,
.cvk-borderbox.cvk-gold .cvk-borderbox-container {
  border-radius: 2rem;
}
.cvk-borderbox.cvk-gold {
  background: linear-gradient(#ffe473, #f8a41d);
}
.cvk-cn-outcome,
.cvk-borderbox.cvk-cobalt,
.cvk-borderbox.cvk-green,
.cvk-borderbox.cvk-purple {
  text-transform: uppercase;
  color: white;
  letter-spacing: 1px;
  font-size: 0.9rem;
}
.cvk-borderbox.cvk-cobalt {
  background: linear-gradient(#1c88c6, #05518f);;
}
.cvk-borderbox.cvk-green {
  background: linear-gradient(#51b4b4, #1c7979);;
}
.cvk-borderbox.cvk-purple {
  background: linear-gradient(#8250B4, #46295E);;
}
.cvk-borderbox.cvk-cobalt .cvk-borderbox-container,
.cvk-borderbox.cvk-green .cvk-borderbox-container,
.cvk-borderbox.cvk-purple .cvk-borderbox-container {
  background: none;
}

.cvk-slider {
  position: absolute;
  display: flex;
  align-items: center;
  border-radius: 1rem;
  width: 15rem;
  overflow: hidden;
  padding: 2px;
  background: #dcdcdc;
  /* box-shadow: inset 0 0 0 3px #dcdcdc; */
}

.cvk-slider::before {
  position: absolute;
  content: '';
  inset: 0px;
  border-radius: inherit;
  border: 2px solid #dcdcdc;
  z-index: 35;
  pointer-events: none;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: #1c7979;
  border-radius: 1rem;
  background-color: #1c7979;
  cursor: pointer;
  width: 15rem;
  height: 12px;
  margin: 0;
}

input[type=range]::-webkit-slider-runnable-track {
  background: transparent !important;
}

input[type=range]::-moz-range-track {
  background: transparent !important;
}

/* Removes default focus */
input[type="range"]:focus {
 outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
  /* background-color: #1c7979; */
  position: relative;
  border-radius: 0.5rem;
  height: 0.5rem;  
}


input[type="range"]::-webkit-slider-thumb {
  position: relative;
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: -2px; /* Centers thumb on the track */
  height: 12px;
  width: 12px;
  
  background-color: #f8a41d;
  background-image: linear-gradient(#ffe473, #f8a41d);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #dcdcdc,  -10rem 0 0 150px #05518f;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease-out;
}

input[type="range"]::-moz-range-thumb {
  position: relative;
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: -2px; /* Centers thumb on the track */
  height: 12px;
  width: 12px;
  
  background: #f8a41d;
  background: linear-gradient(#ffe473, #f8a41d);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #dcdcdc,  -10rem 0 0 150px #05518f;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease-out;
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {   
 /* border: 1px solid #05518f;
 outline: 3px solid #05518f; */
 /* outline-offset: 0.125rem;  */
  background: #ffe473;
}

/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
  background-color: #05518f;
  border-radius: 0.5rem;
  height: 0.5rem;
}

/* slider thumb */
/* input[type="range"]::-moz-range-thumb {
  height: 1.5rem;
  width: 1.5rem;
  
  background: linear-gradient(#ffe473, #f8a41d);
  border: 3px solid #dcdcdc;
  border-radius: 50%;
  box-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0, 0.25);
  cursor: pointer;
} */

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus::-moz-range-thumb {
 /* border: 1px solid #05518f;
 outline: 3px solid #05518f; */
 /* outline-offset: 0.125rem;  */
 background: #ffe473;
}

/* ::-webkit-slider-runnable-track,
::-webkit-slider-thumb,
::-moz-range-progress,
::-ms-fill-lower {
  background: #05518f;

} */
/* .cvk-slider .cvk-slider-marker {
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(#ffe473, #f8a41d);
  border: 3px solid #dcdcdc;
  box-shadow: 0.125rem 0.125rem 0.5rem rgba(0,0,0, 0.25);
  cursor: pointer;
} */
.cvk-slider ~ .cvk-cn-outcome {
  top: 1.1rem;
}
.cvk-slider ~ .cvk-outcome-1 {
  right: 4rem;
}
.cvk-slider ~ .cvk-outcome-2 {
  left: 4rem;
}

.cvk-cn-outcome {
  padding: 2px 0.5rem;
  border-radius: 6px;
}

.cvk-cn-outcome.cvk-outcome-select {
  cursor: pointer;
  transition: background 0.2s ease-out;
}
.cvk-cn-outcome.cvk-outcome-select:hover {
  background: #1c88c6;
}

.cvk-pnt,
.cvk-ifbox,
.cvk-svg-dia {
  transform-origin: 50% 50%;
  animation: scale-out 0.5s ease-out both;
}

@keyframes draw-in {
  from {
    stroke-dashoffset: 2150;
  }
}

.cvk-svg-path {
  stroke-dasharray: 2150 2150;
  animation: draw-in 3s ease-out both;
}

.disable-animations .cvk-pnt,
.disable-animations .cvk-svg-path,
.disable-animations .cvk-ifbox,
.disable-animations .cvk-cn-outcome,
.disable-animations .cvk-borderbox,
.disable-animations .cvk-svg-dia,
.disable-animations .cvk-svg-path {
  animation-delay: 0s !important;
  animation-duration: 0.5s !important;
}
.inactive .cvk-pnt,
.inactive .cvk-svg-path,
.inactive .cvk-ifbox,
.inactive .cvk-cn-outcome,
.inactive .cvk-borderbox,
.inactive .cvk-svg-dia {
  animation: none !important;
}