@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

.page--material, .page--material__content, .page__content h1, .page__content h2, .page__content h3, .page__content h4, .page__content h5 {
    font-family: "Open Sans"
}

.logo {
	background-color:#2e3192;
	width: 100%;
	height:25%;
	position: absolute;	
	padding: 0;
	display: flex;
	margin: 0;
}

.logo img {
	margin: auto;	
	display: block;
}

body {
  background: #eeeeee;	  
}

.page--material__background 
{
	background: none;
}

.text-input--material__label--active {
	font-family: "Open Sans";
    color: #2e3192;
}
.text-input--material {    
    font-family: "Open Sans";   
	height: 28px;
}

.text-input--material__label {
	font-family: "Open Sans";   
    left: 10px;
}

.text-input--material {
    padding: 0 0 2px 10px;
}

.button--material {
	background: #2e3192;
	border-radius: 0px;
	font-family: "Open Sans";
	font-weight: 900;	
	font-size: 16px;
	padding: 10px;
}

.button--material:hover {
    cursor: pointer;
	
    opacity: .8;
    transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -webkit-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;	
}

.button--material--flat {
	background: black;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);
    color: #8084ff;
}

.page--material__content h2 {
	background: black;
	color: #8084ff;
	padding: 10px;
}


.btn-ok {
	width: 48%;	
	margin-right: 1%;
}

.btn-cancel {
	width: 48%;	
	margin-left: 1%;
}


#login-btn {
	width: 100%;	
}

#register-btn {
	width: 100%;
	background: black;
}

ons-input {    
    width: 100%;
}

.inner {    
    margin-top: 0px;    
}

.text-input--material:focus {
    background-image: linear-gradient(#2e3192,#c10312),linear-gradient(to top,transparent 1px,#afafaf 1px);
    -webkit-animation: material-text-input-animate .3s forwards;
    animation: material-text-input-animate .3s forwards;
}

@media only screen and (max-width: 920px) {
	.logo {
		height: 15%;
	}
	.logo img {
		width: 50%;
		height: 65%;
	}
	.outer {
		height: 100%;
		width: 90%;
	}
	.middle {
		/* display: block;		 */
	}
	.inner {	
		margin: auto;
		margin-top: 50px !important;
	}
}