payunitjs-test/dist/payunitPaypal.css

PayUnit is Seven's Payment aggregator created @SevenGroups by SevenGPS Core Engineers and tested by Silicon Valley professionals and Google experts

@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
div#mobile-paypal {
  min-height: 100vh;
  display: flex;
  /* align-self: center; */
  background: url("bg.png") no-repeat center;
  background-size: 100% 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

div#mobile-paypal .payUnit_test {
  text-align: center;

}
div#mobile-paypal .payUnit_test h5{
  color: #3ab19b;
  font: 600 2.5rem Montserrat,sans-serif;
}

div#mobile-paypal .paypalButton {
  margin-top: 15px;
}
.elementLoading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 15vh;
}
.element {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 10vh;
}
label {
  position: relative;
  height: 125px;
  width: 125px;
  display: inline-block;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  border-left-color: #5cb85c;
  animation: rotate 1.2s linear infinite;
}
@keyframes rotate {
  50% {
    border-left-color: #9b59b6;
  }
  75% {
    border-left-color: #e67e22;
  }
  100% {
    transform: rotate(360deg);
  }
}
label .check-icon {
  display: none;
    /* display: block; */
}
label .check-icon:after {
  position: absolute;
  content: "";
  top: 50%;
  left: 28px;
  transform: scaleX(-1) rotate(135deg);
  height: 56px;
  width: 28px;
  border-top: 4px solid #5cb85c;
  border-right: 4px solid #5cb85c;
  transform-origin: left top;
  animation: check-icon 0.8s ease;
}
@keyframes check-icon {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 28px;
    opacity: 1;
  }
  40% {
    height: 56px;
    width: 28px;
    opacity: 1;
  }
  100% {
    height: 56px;
    width: 28px;
    opacity: 1;
  }
}
input {
  display: none;
}
input:checked ~ label .check-icon {
  display: block;
}
input:checked ~ label {
  animation: none;
  border-color: #5cb85c;
  transition: border 0.5s ease-out;
}