.gradient-overly-top:before {
    background: -webkit-gradient(linear, left bottom, left top, from(rgb(9 87 5 / 85%)), to(rgb(7 103 6 / 50%)));
    background: #d2e3d1;
	
}
.mb-5, .my-5 {
    margin-bottom: 0rem !important;
}
.h1, .display-1, .h2, .display-2, .h3, .display-3, .h4, .display-4, .h5, .display-5, .h6, .display-6, h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: #020202;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.32rem;
    font-weight: 600;
    line-height: .2;
}
.h3, h3 {
    font-size: 1.3rem;
}
.mb-0, .my-0 {
    margin-bottom: 0 !important;
    font-size: 0.8rem;
    border-radius: 1.25rem;
}
.login-signup-card small, .login-signup-card a.small {
    font-size: 9px;
    font-weight: 800;
}
.form-group {
    margin-bottom: 0rem;
}
.pb-5, .py-5 {
     padding-bottom: 0rem !important; 
}
.mt-4, .my-4 {
     margin-top: .5rem !important; 
}
.outline-btn, .secondary-solid-btn, .primary-solid-btn, .solid-white-btn, .outline-white-btn, .secondary-outline-btn, .levelportal {
    padding: 6px 7px;
  
}
.form-control {
    
    background-color: #ccffc854;
   
}
.ptb-100 {
    padding: 200px 0;
}
.branch {
  animation:sway 10s infinite linear alternate;
  border-bottom:none;
  border-left:solid 6px #060;
  border-right:none;
  border-top:none;
  border-top-left-radius:100%;
  bottom:0;
  height:200px;
  left:25%;
  position:absolute;
  transform-origin:bottom;
  width:50px;
   opacity: 0.5;
   margin-left: 50%;
}

.branch:nth-child(2) {
  border-width:6px;
  height:320px;
   opacity: 0.5
}

.branch:nth-child(3) {
  border-color:#070;
  border-width:12px;
  height:480px;
  opacity: 0.5
}

.branch:nth-child(4) {
  animation:sway 5s infinite linear alternate-reverse;
  border-left:none;
  border-right:solid 12px #070;
  border-top-right-radius:100%;
  height:350px;
  left:auto;
  right:74%;
}

.branch:nth-child(5) {
  animation:sway 5s infinite linear alternate-reverse;
  border-left:none;
  border-right:solid 9px #060;
  border-top-right-radius:100%;
  height:250px;
  left:auto;
  right:75%;
}

.branch:nth-child(6) {
  animation:sway 5s infinite linear alternate-reverse;
  border-left:none;
  border-right:solid 6px #050;
  border-top-right-radius:100%;
  height:150px;
  left:auto;
  right:75%;
}

@keyframes sway {
  0% {
    width:120px;
  }
  100% {
    width:200px;
  }
}
@import url("https://fonts.googleapis.com/css?family=Raleway:200");
.digit-group {
	
		display: flex;
	align-items: center;
	justify-content: center;
	
}



.digit-group input {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #195116;
    border: none;
    line-height: 50px;
    text-align: center;
    font-size: 15px;
    font-family: monospace;
    font-weight: 500;
    color: #b7eda6;
    margin: 0 2px;
    border-radius: 25px;
}

.digit-group input:focus {
background-color: green;

	
}
.digit-group input:hover {
background-color: #0ca704;
 
	
}



.digit-group .splitter {
	padding: 0 5px;
	color: white;
	font-size: 24px;

}

.prompt {
	margin-bottom: 20px;
	font-size: 20px;
	color: white;
		display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.explanation {
    position: relative;
    background: linear-gradient(90deg, #2b7c1d, #0e4105)!important;
    border: 10px solid #33780e!important;
    padding: 1rem 2rem;
    border-radius: 9px!important;
    color: white!important;
}
.explanation::after {
    font-family: "Roboto", sans-serif;
    content: "Enter the code sent to your email"!important;
    text-transform: uppercase;
    font-weight: 800;
    top: -19px;
    left: 0.7rem;
    padding: 0 0.5rem;
    font-size: 1rem!important;
    position: absolute;
    z-index: 1;
    color: #000;
    background: #fff;
}

.explanation.loading {
    content: "Loading... please wait.";
}


.explanationlog {
    position: relative;
    background: linear-gradient(90deg, #2b7c1d, #0e4105)!important;
    border: 10px solid #33780e!important;
    padding: 1rem 2rem;
    border-radius: 9px!important;
    color: white!important;
}
.explanationlog::after {
    font-family: "Roboto", sans-serif;
    content: "Verifying your account..."!important;
    text-transform: uppercase;
    font-weight: 800;
    top: -19px;
    left: 0.7rem;
    padding: 0 0.5rem;
    font-size: 1rem!important;
    position: absolute;
    z-index: 1;
    color: #000;
    background: #fff;
}
.primary-solid-btn {
    border: 1px solid #74b76e;
    background: #e1ffdd;
    color: #000000;
    font-weight: 600;
}
.form-control {
   
    font-weight: 800;
    line-height: 1.5;
    color: #060202;