.captcha {
  background-color:#f9f9f9;
  border:2px solid #d3d3d3;
  border-radius:5px;
  color:#4c4a4b;
  display:flex;
  justify-content:center;
  align-items:center;
  height: 100px;
      max-width: 327px;
    margin: 0 auto;
    margin-top: 10px;
}


.text {
  font-size:1.1em;
  font-weight:500;
  margin-right:1em;
}
.spinner {
  position:relative;
  width:2em;
  height:2em;
  display:flex;
  margin:2em 1em;
  align-items:center;
  justify-content:center;
      margin-left: -1em;
}
input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; }
input[type="checkbox"]+.checkmark {
  display:inline-block;
  width:1.8em;
  height:1.8em;
  background-color:#fcfcfc;
  border:2.5px solid #c3c3c3;
  border-radius:3px;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor: pointer;
}
input[type="checkbox"]+.checkmark span {
  content: '';
    position: relative;
    margin-top: -18px;
    transform: rotate(45deg);
    width: 1.1em;
    height: 1.2em;
    opacity: 0;
}
input[type="checkbox"]+.checkmark>span:after {
  content: '';
    position: absolute;
    display: block;
    height: 3px;
    bottom: 2px;
    left: 7px;
    background-color: #dc3545;
}
input[type="checkbox"]+.checkmark>span:before {
  content: '';
    position: absolute;
    display: block;
    width: 3px;
    bottom: -6px;
    right: 0;
    background-color: #dc3545;
}
input[type="checkbox"]:checked+.checkmark { 
  animation:2s spinCa forwards;
}
input[type="checkbox"]:checked+.checkmark>span { 
  animation:1s fadein 1.9s forwards;
}
input[type="checkbox"]:checked+.checkmark>span:after {animation:.3s bottomslide 2s forwards;}
input[type="checkbox"]:checked+.checkmark>span:before {animation:.5s rightslide 2.2s forwards;}
@keyframes fadein {
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes bottomslide {
  0% {width:0;}
  100% {width:100%;}
}
@keyframes rightslide {
  0% {height:0;}
  100% {height:100%;}
}


.logo-h {
  display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    align-self: flex-end;
    margin: 0.5em 1em;
        height: 47px;
   
}



.logo-h{
  display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    margin-left: 0px;
    margin-bottom: -0.4em;
        margin-right: -14px;
}

.marg {
  margin-bottom: -5px;
}

.logo-h img {
  height:1.7em;
  width:1.7em;
}
.logo-h p {
  color:#9d9ba7;
  margin:0;
  font-size:0.9em;
  font-weight:700;
  margin:.4em 0 .2em 0;
}
.logo-h small {
  color:#9d9ba7;
  margin:0;
  font-size:.8em;
}
@keyframes spinCa {
  10% {
    width:0;
    height:0;
    border-width:6px;
  }
  30% {
    width:0;
    height:0;
    border-radius:50%;
    border-width:1em;
    transform: rotate(0deg);
    border-color:rgb(199,218,245);
  }
  50% {
    width:2em;
    height:2em;
    border-radius:50%;
    border-width:4px;
    border-color:rgb(199,218,245);
    border-right-color:rgb(89,152,239);
  }
  70% {
    border-width:4px;
    border-color:rgb(199,218,245);
    border-right-color:rgb(89,152,239);
  }
  90% {
    border-width:4px;
  }
  100% {
    width:2em;
    height:2em;
    border-radius:50%;
    transform: rotate(720deg);
    border-color:transparent;
  }
}
::selection {
  background-color:transparent;
  color:teal;
}
::-moz-selection {
  background-color:transparent;
  color:teal;
}



@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background-image: linear-gradient(
    90deg,
    rgba(34,197,94,0.2) 0%,
    rgba(34,197,94,0.7) 50%,
    rgba(34,197,94,0.2) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite linear;
  
  color: transparent;
}

@keyframes shimmerX {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background-image: linear-gradient(
    90deg,
    rgba(34,197,94,0.2) 0%,
    rgba(34,197,94,0.7) 50%,
    rgba(34,197,94,0.2) 100%
  );
  background-size: 200% 100%;
  animation: shimmerX 1.6s linear infinite;
  
}