body{
  background: linear-gradient(45deg, #50a3a2 0%, #0fa967 100%);
  color: #000;
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
  position:relative;
}

body::before{
	content: "";
	background: url('../images/tile-bg.png');
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width:100%;
    opacity: .1;
    transform: translate(-50%, -50%);
}

.logo{
	max-width: 150px;
	border-radius: 15px;
    margin-bottom: 10px;
	margin-top:-20px;
    transform: translateX(-50%);
    margin-left: 50%;
    padding: 10px;
}

/* Wordmark shown in place of an uploaded logo image. */
.logo-text{
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #0b6b45;
	text-align: center;
	margin-bottom: 4px;
}

/* ---- Sign in ------------------------------------------------------------ */

.card-signin.card-login{
	border-radius: 14px;
	box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
	overflow: hidden;
}

.card-signin.card-login .card-body{
	padding: 2.5rem 2.25rem;
}

.login-intro{
	text-align: center;
	margin-bottom: 1.75rem;
}

.login-intro p{
	color: #6b7280;
	font-size: 14px;
	margin: 0;
}

/* Labels sit above the field, so the field's own purpose survives autofill
   wiping the placeholder. */
.login-field{
	text-align: left;
	margin-bottom: 1.15rem;
}

.login-field label{
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #4b5563;
	margin-bottom: .45rem;
}

.form-signin .login-field .form-control{
	text-align: left;
	border: 1px solid #dbe0e6;
	border-radius: 9px;
	padding: 13px 16px;
	font-size: 15px;
	background: #fbfcfd;
	transition: border-color .15s, box-shadow .15s, background .15s;
}

.form-signin .login-field .form-control:focus{
	background: #fff;
	border: 1px solid #0fa967;
	box-shadow: 0 0 0 3px rgba(15, 169, 103, .14);
}

.form-signin .login-field .form-control.is-invalid{
	border-color: #dc3545;
}

.form-signin .login-field .form-control.is-invalid:focus{
	box-shadow: 0 0 0 3px rgba(220, 53, 69, .14);
}

/* Spaces the PIN out so 6 digits read as digits, not a word. */
.form-signin .login-field .pin-input{
	text-align: center;
	letter-spacing: .7em;
	text-indent: .7em;
	font-size: 19px;
	padding-right: 46px;
}

.pin-wrap{
	position: relative;
}

/* Reveal toggle. Sits inside the field, so it cannot be mistaken for the
   submit button the way a button below the field can. */
.pin-toggle{
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	border: 0;
	background: none;
	color: #9aa3ad;
	font-size: 17px;
	line-height: 1;
	padding: 8px 10px;
	cursor: pointer;
	z-index: 3;
	filter: grayscale(1);
	opacity: .55;
	transition: opacity .15s;
}

/* The button sits over the field, so anything inside it must not become the
   click target in place of the button. */
.pin-toggle > *{
	pointer-events: none;
}

.pin-toggle:hover,
.pin-toggle:focus{
	color: #0fa967;
	outline: none;
	opacity: 1;
}

.login-meta{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.4rem;
}

.login-meta .custom-control-label{
	font-size: 14px;
	color: #4b5563;
}

.form-signin .btn-login{
	background: #0fa967;
	border-color: #0fa967;
	color: #fff;
	font-weight: 600;
	letter-spacing: .02em;
	border-radius: 9px;
	padding: 13px 20px;
	font-size: 15px;
}

.form-signin .btn-login:hover,
.form-signin .btn-login:focus{
	background: #0c9159;
	border-color: #0c9159;
	color: #fff;
	box-shadow: 0 0 0 3px rgba(15, 169, 103, .18);
}

.login-help{
	text-align: center;
	margin-top: 1.4rem;
	margin-bottom: 0;
	font-size: 13px;
	color: #6b7280;
}

.login-social{
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid #eceff2;
}

.custom-control-label {
    margin-bottom: 0;
    margin-top: 1px;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none; 
            user-select: none; 
}
 
.card-signin {
  border: 0;
  border-radius: 5px;
  background: #FFFFFF;
}

.card-signin .card-header {
  font-weight: 300;
  font-size: 1.5rem;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #FFFFFF;
}

.login-form-head {
    text-align: center;
    background: #ffffff;
    padding: 30px 15px;
    border-bottom: 1px solid #e8e8e8;
}

.login-form-head h4 {
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.card-signin .card-body {
  padding: 2rem;
}

.form-signin {
  font-family: 'Poppins', sans-serif;
  width: 100%;
  text-align: center;
}

.form-signin .btn {
  font-size: 14px;
  letter-spacing: .1rem;
  padding: 12px 20px;
  transition: all 0.2s;
}

.form-signin .form-control {
  padding: 12px 20px;
  text-align: center;
  height: auto;
}

.form-signin .form-control:focus{
  box-shadow: none;
  border: 1px solid #007bff;
} 

/* Sign UP */
.card-signup {
  border: 0;
  border-radius: 5px;
  background: #FFFFFF;
}

.card-signup .card-header {
  font-weight: 300;
  font-size: 1.5rem;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #FFFFFF;
}

.card-signup .card-body {
  padding: 2rem;
}

.form-signup {
  font-family: 'Poppins', sans-serif;
  width: 100%;
}

.form-signup .btn {
  font-size: 14px;
  letter-spacing: .1rem;
  padding: 12px 20px;
  transition: all 0.2s;
}

.form-signup .form-control {
  padding: 12px 20px;
  height: auto;
}

.form-signup .form-control:focus{
  box-shadow: none;
  border: 1px solid #007bff;
} 

select.form-control {
    padding: 12px 20px;
    height: auto !important;
}

.custom-control-label:before {
    background: #CCCCCC;
	border-radius: 50% !important;
}

.custom-control {
   display: inline-block;
}

#extend_membership{
	font-family: 'Poppins', sans-serif;
}

.btn-register{
	text-align: center;
  display: block;
  color: #000000;
	font-size: 16px !important;
}

.btn-register:hover{
	color: #000000;
}

.btn-google{
	background: #DB4437;
	color: #FFF;
 }
 
 .btn-google:hover{
	background: #c0392b;
	color: #FFF;
 }
 
 .btn-facebook{
	 background: #3b5998;
	 color: #FFF;
 }
 
 .btn-facebook:hover{
	 color: #FFF;
 }