.rdr-header i {
  --fa-secondary-opacity: 1;
  --fa-primary-color: rgb(4, 56, 161);
  --fa-secondary-color: rgb(108, 108, 108);


  background-color: whitesmoke;
  border-radius: 50%;
  padding: 3px;


  animation-name: compass-spin-return;
  animation-duration: 1s;
  animation-timing-function: linear;
}

.rdr-header:hover i {
  animation-name: compass-spin;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;

}

.rdr-header i:first-child {
  animation-delay: 0.1s;

}

.logo{
  max-height: 100px;
}

@keyframes compass-spin {

  100% {
    rotate: 1080deg;
  }
}

@keyframes compass-spin-return {
  0% {
    rotate: 180deg;
  }

  100% {
    rotate: 0deg;
  }
}

body {
 background-color: #ededed;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

pre {
  background-color: #ededed;
  border: thin solid #d7d7d7;
  border-radius: 0.5rem;
  padding: 1rem;
}


.text-quote{
  font-style: italic;
  color: darkcyan;
}
.text-quote::before,
.text-quote::after{
  content: '"';
}

.rdr-rewiew {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 100px auto;
  counter-reset: steps;
}

.rdr-rewiew>* {
  /*outline: 1px solid blue;*/
  background-color: #fafafa;
}

.rdr-rewiew>div {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 1rem;
  font-weight: 300;
  font-size: 0.9rem;
}

.rdr-rewiew>span:nth-child(odd) {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 1rem;
  padding-bottom: 1rem;


  position: relative;
  isolation: isolate;
}

.rdr-rewiew>span:nth-child(odd):not(:last-of-type):after {
  content: '';
  display: block;
  width: 3px;
  height: calc(100% - 2rem + 15px);
  background-color: rgb(182, 182, 182);
  position: absolute;
  top: 2rem;
  z-index: 1;
  opacity: 0.5;
}

.rdr-rewiew>span:nth-child(odd):not(:last-of-type):before {
  display: block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-regular);
  content: '\f107';
  font-size: 1.5rem;
  color: rgb(182, 182, 182);
  position: absolute;
  bottom: -25px;
  z-index: 3;
  opacity: 0.5;
}

.rdr-rewiew>span:nth-child(odd) i {
  font-size: 1.3rem;
  background-color: rgb(120, 195, 219);
  padding: 0.7rem;
  border-radius: 50%;
  color: whitesmoke;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
}

.rdr-rewiew>span:nth-child(odd) i:after {
  counter-increment: steps;
  content: counter(steps);
  position: absolute;
  top: -0.40rem;
  left: -0.40rem;
  color: rgb(120, 195, 219);
  ;
  font-size: 0.9rem;

  font-family: 'Montserrat';
  font-weight: 700;

}

textarea {
  min-height: 200px !important;
}