:root {
	--color-primary: #78C0CF;
	--color-text: ;

  }

img {
	max-width: 100%;
}

.text-danger {
	color: #fff!important;
}

.form-group{
	margin-bottom: 0.2rem;
	text-align: left;
}

.logo_body{
	width:60%;
	padding-left:15px;
	padding-right: 15px;
	padding-top:20px;
}
.text-warning {
	color: #000 !important;
	float: left;
	margin-left: 1%;
	padding-top: 5%;
	padding-bottom: 5%;
	text-decoration: underline;
}

.font-weight-bold {
	font-weight: 100 !important;
}

::-webkit-input-placeholder {
	color: rgb(107, 107, 107);
	font-weight: 200;
}

.header {
	width: 100%;
	background-color: #003769;
	height: 70px;
}

.text-muted {
	font-size: 90%;
	color: #003769 !important;
}

.eye-icon {
	text-align: center; 
	margin-left: 19.5%;
	margin-top: 1.3%;
	position: fixed;
}

.login_input {
	padding-top: 10px;
	font-size: 16px !important;
	width: 100%;
	display: inline-block;
	padding: 10px 25px;
	margin-bottom: 10px;
	font-weight: 400;
	color: #7890d5;
	background-color: #dbdbdb;
	border: 1px solid #dbdbdb;
	border-radius: 3px;
}
.forgotPassword{
	float:right;
	font-weight: 300;
	color: #1899d3;
	font-weight: 400;
}
.forgotPassword:hover{
	color: #fab517;
}

label{
	color: #888;
	text-align: left !important;
	font-weight: 500;
}

.form-group button:focus{
	box-shadow: 0 0 0 0;
	border: 0 none;
	outline: 0;
}
.customer-head-line {
	color: #a1adc8;
	margin-top: 30px;
	font-weight: 200;
	text-align: center;
	width: 100%;
	padding-left:30px;
	padding-bottom:15px;
}

#logoSecundary {
	margin-top: -4.7%;
	float: right;
}

#LoginButton {
	border-radius: 5px;
	width: 100%;
	height: 50px;
	color: #fff;
	margin-top: 4%;
	margin-bottom: 5%;
	background-color: #009e61;
	border-color: #009e61;
	border-top-color: #fff (92, 184, 92);
	border-right-color: #fff(92, 184, 92);
	border-bottom-color: #fff(92, 184, 92);
	border-left-color: #fff(92, 184, 92);
	text-transform: uppercase;
}

#LoginButtonIndex {
	border-radius: 5px;
	width: 100%;
	height: 50px;
	color: #fff;
	margin-top: 4%;
	margin-bottom: 5%;
	background-color: #1a2450;
	border-color: #1a2450;
	border-top-color: #fff (92, 184, 92);
	border-right-color: #fff(92, 184, 92);
	border-bottom-color: #fff(92, 184, 92);
	border-left-color: #fff(92, 184, 92);
	text-transform: uppercase;
}

#LoginButton:hover { 
	background-color: #bc0c13;
}

#login {
	text-align: center;
	display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
	height: 100vh;
	top: -10px;
	color: #fff;

}

#cover-caption {
	box-shadow: 0 0 1em rgba(167, 167, 167, 0.425);
	background-color: #fff;
	height: 100%;
	max-height: 420px;
	width: 360px;
	margin-top: 5%;
	border-radius: 5%;
	margin-left: 37%;
}

.cover-caption{
    background-color:#fff;
    border-radius: 4px;
    /* -webkit-box-shadow: 19px -28px 15px -10px rgba(51,51,51,0), -1px 3px 10px 1px rgba(51,51,51,0.29); 
    box-shadow: 19px -28px 15px -10px rgba(51,51,51,0), -1px 3px 10px 1px rgba(51,51,51,0.29); */
    box-shadow: 0 0 1em rgb(55 0 0 / 43%);
	max-width: 360px;
    width: 100%;
	position: absolute;
    right: 0;
    height: 100vh;
    min-width: 40vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
	border-radius: 50px 0px 0px 50px;
}

.container-fluid{
	max-width: 450px;
}

@media (max-width:500px){
	.cover-caption{
		max-width: 340px;	
	}
}	

.header-headline {
	color: #fff;
	text-align: center;
	padding-top: 1.5%;
	font-size: 130%;
}

.btn-success {
	color: #fff;
	background-color: #122449;
	border-color: #0679aa;
	border-top-color: #fff (92, 184, 92);
	border-right-color: #fff(92, 184, 92);
	border-bottom-color: #fff(92, 184, 92);
	border-left-color: #fff(92, 184, 92);
}

.btn-success.active, .btn-success:active, .open>.btn-success.dropdown-toggle {
	color: #fff;
	background-color: #0000006e !important;
	border-color: #0000006e !important;
	background-image: none;
}

.btn-success.focus, .btn-success:focus {
	color: #fff;
	background-color: #0000006e !important;
	border-color: #0000006e !important;
}

.navbar-dark .navbar-brand {
	color: #fff;
}

.navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover {
	color: #fff;
}

.form-control, .btn {
	font-size: 16px;
	width: 100%;
	display: inline-block;
	font-weight: 400;
	line-height: 1.25;
	text-align: center;
}

.password_group{
	position: relative;
}
.eye-icon {
    position: absolute;
    right: 10px;
    top: 10px;
}

.content-modal-password{
	height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-title{
	color:#888;
	font-weight: 300;
	font-size: 1.4rem;
}
.modal-sub-title{
	color:#888;
	font-weight: 200;
	padding-bottom:20px;
	font-size: 1.0rem;
}
#loginFailed{
	color:rgb(192, 9, 9) !important;
}

/* 
@media only screen and (width: 2560px) {

	.eye-icon {
	text-align: center;
	margin-left: 11%;
	margin-top: 0.7%;
	position: fixed;
	}

	#cover-caption {
	position: absolute;
	right: 42%;
	width: 15%;
	top: 5%;
	}

	#logoSecundary {
	float: right !important;
	margin-top: -3.3% !important;
	}

	#logo {
	margin-top: -5.2% !important;
	}

	.container-footer {
	margin-top: 27%;
	margin-left: -0% !important;
	}
}

@media only screen and (width: 1920px) {

	.eye-icon {
	text-align: center;
	margin-left: 14.1%;
	margin-top: 1%;
	position: fixed;
	}

	#cover-caption {
	position: absolute;
	right: 39%;
	width: 20%;
	top: 5%;
	}

	#logoSecundary {
	float: right !important;
	margin-top: -4% !important;
	}

	#logo {
	margin-top: -6% !important;
	}

	.container-footer {
	margin-top: 27%;
	margin-left: -0% !important;
	}
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {

	.eye-icon {
	text-align: center;
	margin-left: 16%;
	margin-top: 1%;
	position: fixed;
	}
}

@media only screen and (min-width: 1402px) and (max-width: 1599px) {

	.eye-icon {
	text-align: center;
	margin-left: 17%;
	margin-top: 1%;
	position: fixed;
	}
}

@media only screen and (min-width: 1066px) and (max-width: 1290px) {

	.eye-icon {
	text-align: center;
	margin-left: 21%;
	margin-top: 1.5%;
	position: fixed;
	}
}

@media only screen and (min-width: 1025px) and (max-width: 1195px) {

	.eye-icon {
		text-align: center !important;
		margin-left: 24% !important;
		margin-top: 1.5% !important;
		position: fixed !important;
	}
}

@media only screen and (width: 1022px) and (width: 1024px) {

	.eye-icon {
		text-align: center !important;
		margin-left: 30% !important;
		margin-top: 1.5% !important;
		position: fixed !important;
	}
}

@media only screen and (min-width: 1162px) and (max-width: 1194px) {

	.eye-icon {
		text-align: center !important;
		margin-left: 22% !important;
		margin-top: 1.5% !important;
		position: fixed !important;
	}
}

@media only screen and (min-width: 0px) and (max-width: 1024px) {
			
	#cover-caption {
	position: absolute;
	right: 30%;
	width: 40%;
	top: 5%;
	}

	.container-footer {
	margin-top: 27% !important;
	margin-left: 5% !important;
	text-align: left;
	color: #003769 !important;
	}

	#logo {
	width: 20%;
	margin-top: -9.5% !important;
	}

	#logoSecundary {
	float: right !important;
	width: 14%;
	margin-top: -7% !important;
	}

	.eye-icon {
	text-align: center;
	margin-left: 29%;
	margin-top: 2%;
	position: fixed;
	}
}

@media only screen and (min-width: 963px) and (max-width: 1023px) {

	.container-footer {
	margin-top: 15%;
	margin-left: -11% !important;
	text-align: center;
	color: #003769 !important;
	}
}

@media only screen and (min-width: 800px) and (max-width: 956px) {

	.container-footer {
	margin-top: 20% !important;
	margin-left: -3% !important;
	text-align: left;
	color: #003769 !important;
	}
}

@media screen and (max-width: 782px) {

	#cover-caption {
	position: absolute;
	right: 23%;
	width: 50%;
	top: 5%;
	}

	.container-footer {
	margin-top: 27% !important;
	margin-left: -1.5% !important;
	text-align: left;
	color: #003769 !important;
	}

	.eye-icon {
	text-align: center;
	margin-left: 37%;
	margin-top: 2.5%;
	position: fixed;
	}

	#logo {
	width: 20%;
	margin-top: -13.5% !important;
	}

	#logoSecundary {
	float: right !important;
	width: 15%;
	margin-top: -8.5% !important;
	}

	.header-headline {
	color: #fff;
	text-align: center !important;
	padding-top: 3%;
	font-size: 115%;
	}
}

@media screen and (max-width: 670px) {

	.eye-icon {
	text-align: center;
	margin-left: 35%;
	margin-top: 2.5%;
	position: fixed;
	}
}

@media screen and (width: 960px) and (height: 540px) {

	#cover-caption {
	right: 30% !important;
	width: 40% !important;
	top: 0% !important;
	}

	.container-footer {
	margin-top: 27%;
	margin-left: -20% !important;
	text-align: left;
	color: #003769 !important;
	}
}

@media screen and (width: 640px){ 
	body{
		overflow: auto;
	}

	.eye-icon{
		text-align: center;
		margin-left: 73% !important;
		margin-top: 5.9% !important;
		position: absolute !important;	
  		z-index: 1;
	}

}

@media screen and (max-width: 580px) {
	
	#cover-caption {
	position: absolute;
	right: 15%;
	width: 70%;
	top: 10%;
	}

	.container-footer {
	margin-top: 20%;
	margin-left: -5%;
	text-align: left;
	color: #003769 !important;
	}

	.eye-icon {
	text-align: center;
	margin-left: 50%;
	margin-top: 3%;
	position: fixed;
	}
}

@media screen and (max-width: 414px) {

	.eye-icon {
	text-align: center;
	margin-left: 44% !important;
	margin-top: 3.5% !important;
	position: fixed;
	}

	.header-headline {
	color: #fff;
	text-align: center;
	padding-top: 5.5%;
	padding-left: 2%;
	font-size: 85%;
	}

	#logo {
	width: 20% !important;
	margin-top: -19.5% !important;
	}

	#logoSecundary {
	float: right !important;
	width: 15% !important;
	margin-top: -10.5% !important;
	}
}

@media screen and (width: 411px) {

	.eye-icon {
	text-align: center;
	margin-left: 45% !important;
	margin-top: 3.5% !important;
	position: fixed;
	}

	.container-footer {
	margin-top: 40% !important;
	margin-left: -17% !important;
	text-align: left;
	width: 140% !important;
	color: #003769 !important;
	}
}

@media screen and (width: 320px) {

	.header-headline {
	color: #fff;
	text-align: center;
	padding-top: 7.5%;
	padding-left: 4%;
	font-size: 80%;
	}

	#logo {
	width: 20% !important;
	margin-top: -25.5% !important;
	}

	#logoSecundary {
	float: right !important;
	width: 15% !important;
	margin-top: -13.5% !important;
	}

	.eye-icon {
	text-align: center;
	margin-left: 42% !important;
	margin-top: 4.5% !important;
	position: fixed;
	}

	#cover-caption {
	height: 110%;
	}

	.container-footer {
	margin-top: 30% !important;
	margin-left: 2% !important;
	text-align: left;
	width: 100% !important;
	color: #003769 !important;
	}
}

@media screen and (width: 280px) {

	.header-headline {
	color: #fff;
	text-align: center;
	padding-top: 8.5%;
	padding-left: 5%;
	font-size: 70%;
	}

	#logo {
	width: 20% !important;
	margin-top: -27.5% !important;
	}

	#logoSecundary {
	float: right !important;
	width: 15% !important;
	margin-top: -13.5% !important;
	}

	.eye-icon {
	text-align: center;
	margin-left: 39% !important;
	margin-top: 5.9% !important;
	position: fixed;
	}

	#cover-caption {
	height: 130%;
	width: 70% !important;
	}

	.container-footer {
	margin-top: 30% !important;
	margin-left: 7% !important;
	text-align: left;
	width: 100% !important;
	color: #003769 !important;
	}
} */