html,body {
	height: 100%;
}

body.my-login-page {
    background: url(/images/AdobeStock_340840922.jpeg) no-repeat left;
    background-size: cover;
    font-size: 14px;
    
}

.my-login-page .brand img {
    padding: 40px;
	width: 100%;
}

.my-login-page .card-wrapper {
	width: 400px;
}

.my-login-page .card {
	border-color: transparent;
	box-shadow: 0 4px 8px rgba(0,0,0,.05);
}

.my-login-page .card.fat {
	padding: 10px;
}

.my-login-page .card .card-title {
	margin-bottom: 30px;
}

.my-login-page .form-control {
	border-width: 2.3px;
}

.my-login-page .form-group label {
	width: 100%;
    padding-top: 15px;
}

.my-login-page .btn.btn-block {
	padding: 12px 10px;
}

.my-login-page .footer {
	margin: 40px 0;
	color: #888;
	text-align: center;
}

/*Forgot Password Page*/
body.my-forgot-page {
    background: url(/images/AdobeStock_340840922.jpeg) no-repeat left;
    background-size: cover;
    font-size: 14px;
    
}

.my-forgot-page .brand img {
    padding: 40px;
	width: 100%;
}

.my-forgot-page .card-wrapper {
	width: 400px;
}

.my-forgot-page .card {
	border-color: transparent;
	box-shadow: 0 4px 8px rgba(0,0,0,.05);
	width: inherit;
}

.my-forgot-page .card.fat {
	padding: 10px;
}

.my-forgot-page .card .card-title {
	margin-bottom: 30px;
}

.my-forgot-page .form-control {
	border-width: 2.3px;
}

.my-forgot-page .form-group label {
	width: 100%;
    padding-top: 15px;
	padding-bottom: 15px;
}

.my-forgot-page .btn.btn-block {
	padding: 12px 10px;
}

.my-forgot-page .footer {
	margin: 40px 0;
	color: #888;
	text-align: center;
}
/*Verification Code Page*/
body.my-verification-page {
    background: url(/images/AdobeStock_340840922.jpeg) no-repeat left;
    background-size: cover;
    font-size: 14px;
    
}

.my-verification-page .brand img {
    padding: 40px;
	width: 100%;
}

.my-verification-page .card-wrapper {
	width: 400px;
}

.my-verification-page .card {
	border-color: transparent;
	box-shadow: 0 4px 8px rgba(0,0,0,.05);
	width: inherit;
}

.my-verification-page .card.fat {
	padding: 10px;
}

.my-verification-page .card .card-title {
	margin-bottom: 30px;
}

.my-verification-page .form-control {
	border-width: 2.3px;
}

.my-verification-page .form-group label {
	width: 100%;
    padding-top: 15px;
}

.my-verification-page .btn.btn-block {
	padding: 12px 10px;
}

.my-verification-page .footer {
	margin: 40px 0;
	color: #888;
	text-align: center;
}
.sendCodeAgain{
	border: 5px;
	border-color: #2F80ED;
	cursor: pointer;
	text-decoration: underline;
}

.timer h5 {
	margin: 40px 0;
	color: #2F80ED;
	font-size: small;
}
.btnSend{

    background: linear-gradient(105deg,#56CCF2 ,#2F80ED);
	width: 10%;
    color: #fff;
    border:none; 
    border-radius:10px; 
    padding:15px;
	margin-top: 15px;
    min-height:30px; 
    min-width: 100px;
	cursor: pointer;

}
.btnSend:active {
	transform: scale(0.98);
	/* Scaling button to 0.98 to its original size */
	box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
	/* Lowering the shadow */
}

/* The message box is shown when the user clicks on the password field */
#message {
	display:none;
	background: #f1f1f1;
	color: #000;
	position: relative;
	padding: 20px;
	margin-top: 10px;
  }
  
  #message p {
	padding: 10px 35px;
	font-size: xx-small;
  }
  /* Add a green text color and a checkmark when the requirements are right */
.valid {
	color: green;
  }
  
  .valid:before {
	position: relative;
	left: -35px;
	content: "✔";
  }
  
  /* Add a red text color and an "x" when the requirements are wrong */
  .invalid {
	color: red;
  }
  
  .invalid:before {
	position: relative;
	left: -35px;
	content: "✖";
  }
  .password-container{
	width: 320px;
	position: relative;
  }
  .password-container input[type="password"],
  .password-container input[type="text"]{
	width: 100%;
	padding: 12px 36px 12px 12px;
	box-sizing: border-box;
  }
  .fa-eye{
	position: absolute;
	top: 60%;
	right: 4%;
	cursor: pointer;
	color: #2F80ED;
  }

input { display: none; }
input + label { display: inline-block }

input ~ .tab { display: none }
#tab1:checked ~ .tab.content1,
#tab2:checked ~ .tab.content2,
#tab3:checked ~ .tab.content3,
#tab4:checked ~ .tab.content4,
#tab5:checked ~ .tab.content5 { display: block; }

input + label {
  border: 1px solid #999;
  background: #EEE;
  padding: 4px 12px;
  border-radius: 4px 4px 0 0;
  position: relative;
  top: 1px;
}
input:checked + label {
  background: #FFF;
  border-bottom: 1px solid transparent;
}
input ~ .tab {
  border-top: 1px solid #999;
  padding: 12px;
}

.newCustomerPanel {
	text-align: center;
	margin-top:30px
}

@media screen and (max-width: 425px) {
	.my-login-page .card-wrapper {
		width: 90%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 320px) {
	.my-login-page .card.fat {
		padding: 0;
	}

	.my-login-page .card.fat .card-body {
		padding: 15px;
	}
}