.container_su,
.container_si,
.container_fp{
    background-image: url(../images/cloud-horizon.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 110px 15px 36px;
}
.container_fp{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

h5{
    color: #009900;
}

  .card {
    border: 1px solid rgba(0, 153, 0, 0.8);
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
	  box-shadow: 0 8px 6px -6px black;
  }

.card-header {
    color: #ffffff;
    background-color: #009900;
  }

.container{
    height:90px;
  }
  
.btn-link {
    color: #009900;
    text-decoration: none;
  }

.btn-link:hover {
    color: #033f03;
    text-decoration: none;
  }

.form-check-label {
    color: #009900;
  }

.btn-success {
    background-color: #009900;
  }

.btn-success:hover {
    background-color: #033f03;
}
.form-check-input{
  margin-top: .4rem;
}
.username-container{
  position: relative;
}
#username-spinner{
  position: absolute;
  color: #009900 !important;
  top: .7rem;
  right: .7rem;  
}

/* Radio Button Area*/

body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	color: #333;
	background-color: #eee;
}

h1, h2, h3, h4, h5, h6{
	font-weight: 200;
}

h1{
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 2px solid #2fcc71;
	max-width: 40%;
	margin: 20px auto;
}

/* CONTAINERS */

@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700");
*
{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body 
{
  font-family: Raleway, sans-serif;
}
.main-container 
{
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.main-container h2 
{
  margin: -100px 0 20px 0;
  color: #555;
  font-size: 30px;
  font-weight: 300;
}

.radio-buttons 
{
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.custom-radio input 
{
  display: none;
}

.radio-btn 
{
  margin: 10px;
  width: 220px;
  height: 120px;
  border: 20px solid transparent;
  display: inline-block;
  border-radius: 10px;
  position: relative;
  text-align: center;
  box-shadow: 0 0 20px #c3c3c367;
  cursor: pointer;
}

.radio-btn > i {
  color: #ffffff;
  background-color: #009900;
  font-size: 25px;
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%) scale(2);
  border-radius: 50px;
  padding: 3px;
  transition: 0.5s;
  pointer-events: none;
  opacity: 0;
}

.radio-btn .hobbies-icon 
{
  width: 150px;
  height: 150px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.radio-btn .hobbies-icon img
{
  display:block;
  width:100%;
  margin-bottom:20px;
  
}
.radio-btn .hobbies-icon i 
{
  color: #FFDAE9;
  line-height: 80px;
  font-size: 60px;
}

.radio-btn .hobbies-icon h3 
{
  color: #555;
  font-size: 18px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing:1px;
}

.custom-radio input:checked + .radio-btn 
{
  border-style: 2px solid #009900;
  background-color: #009900;

}

.custom-radio input:checked + .radio-btn h3 
{
  border: 2px solid #009900;
  background-color: #009900;
  color: #FFF;
}

.custom-radio input:checked + .radio-btn h5 
{

  color: #FFF;
}

.custom-radio input:checked + .radio-btn i
{
  border: 2px solid #FFF;

}

.custom-radio input:checked + .radio-btn > i 
{
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --white:#fff;
    --smoke-white:#f1f3f5;
    --blue:#009900;
}
.pay_container{
    position:relative;
    margin-top: -100px;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.selector{
    position:relative;
    width:30%;
    background-color:var(--white);
    height:40px;
    display:flex;
    justify-content:space-around;
    align-items:center;
}
.selector-item{
    position:relative;
    flex-basis:calc(200% / 3);
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.selector-item_radio{
    appearance:none;
    display:none;
}
.selector-item_label{
    position:relative;
    height:80%;
    width:100%;
    text-align:center;
    border-radius:9999px;
    line-height:220%;
    font-family: 'Poppins', sans-serif;
    font-weight:700;
    transition-duration:.5s;
    transition-property:transform, box-shadow;
    transform:none;
}

.selector-item_label i{
    color: #fff;
}

.selector-item_radio:checked + .selector-item_label{
    background-color:var(--blue);
    color:var(--white);
    box-shadow:0 0 4px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.5);
    transform:translateY(-2px);
}

.selector-item_radio:checked + .selector-item_label i{
    color: #fff;

}

@media (max-width:480px) {
	.selector{
		width: 90%;
	}
}

.terms_container{
    padding: 20px;
}

.password-wrap{ position:relative; }

.password-wrap .toggle-password{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:#009900;
  cursor:pointer;
  z-index:5;
}

.password-wrap .form-control1{
  padding-right:55px;
}

.pw-wrap{
  position: relative;
  width: calc(100% - 40px);   /* match .form-control1 width */
}

.pw-wrap .form-control1{
  width: 100% !important;     /* now fill the wrapper */
  padding-right: 45px;        /* space for the icon */
}

.pw-wrap .toggle-password{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-5%);
  color: #009900;
  cursor: pointer;
  z-index: 10;
}

@media (max-width: 768px) {

    .form-control1,
    .form-control2,
    .form-control12,
    select {
        width: 100% !important;
        height: 44px !important;
        padding: 8px 12px !important;
        font-size: 14px;
    }

    /* remove side shrink on mobile */
    .col-md-6,
    .col-md-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* keep password icons centered */
    .pw-wrap {
        width: 100%;
    }
}