@keyframes spinner {
  to {transform: rotate(360deg); }
}

.loading-spinner {

 animation: spinner .6s linear infinite;
 transform-origin: center;
}

.hover-helper {
    transform: translateY(0px);    
    transition: transform 0.3s ease-in-out;
}

.hover-helper:hover {
    transform: translateY(-2px);
}

.release-notes h2 {
    padding-top: 2em;
}

.release-notes h4 {
    padding: 0.8em;
}

.release-notes .markdown-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.release-notes .markdown-list {
    width: 800px;
    font-size: 1.2em;
}

.main-help-section .help-link {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 2em;
    color: rgb(40, 40, 40);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 30px rgba(0,0,0,0.5);
}

.main-help-section .help-link .help-icon {
    color: rgb(40, 40, 40);
    padding-top: 2.5em;
    padding-bottom: 1em;
}

.main-help-section .help-link .help-title {
    font-size: 1.2em;
    margin: 1em;
    font-weight: bold;
}

.main-help-section .help-link:hover .help-title {
    color: #00bcd4;
}


.main-help-section .help-link:hover .help-icon {
    color: #00bcd4;
}

.checkmark {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  display: block;

  stroke-width: 2;

  stroke: #fff;

  stroke-miterlimit: 10;

  box-shadow: inset 0px 0px 0px #7ac142;

  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;

}



.checkmark__circle {

  stroke-dasharray: 166;

  stroke-dashoffset: 166;

  stroke-width: 2;

  stroke-miterlimit: 10;

  stroke: #7ac142;

  fill: none;

  animation: stroke .6s cubic-bezier(0.650, 0.000, 0.450, 1.000) forwards;

}



.checkmark__check {

  transform-origin: 50% 50%;

  stroke-dasharray: 48;

  stroke-dashoffset: 48;

  animation: stroke .3s cubic-bezier(0.650, 0.000, 0.450, 1.000) .8s forwards;

}



@keyframes stroke {

  100% {

    stroke-dashoffset: 0;

  }

}



@keyframes scale {

  0%, 100% {

    transform: none;

  }

  50% {

    transform: scale3d(1.1, 1.1, 1);

  }

}



@keyframes fill {

  100% {

    box-shadow: inset 0px 0px 0px 30px #7ac142;

  }

}