@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Source+Sans+Pro:400,400i,700,700i');

:root {
	--mustard-yellow: #fcd966;
	--mustard-yellow-light: #ffeaa4;
	--mustard-yellow-lighter: #fff4cf; 
}

body {
	font-family: Montserrat, sans-serif;
	background: white; /* #0E1652 */
	background-image: url(/images/bgnd.png);
	background-position: right top;
	background-repeat: no-repeat; 
}

/* workaround for Chrome stupid forced styling on auto-fill */
input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /*0 0 0 50px #9F907B inset;*/
    -webkit-text-fill-color: #252525;
}
html{
    height:100%;
    min-height:100%;
}

.appLogo {
    position:relative;
    background: url(../images/mustard-logo.png) no-repeat center center;
    background-size: contain;
    margin-top: 20px;
    height:192px;
}
#login {
    max-width:260px;
    position:absolute;
    top:calc(50% - 85px);
    left:calc(50% - 140px);
}
.login{
    position: relative;
    height: 150px; 
    width: 100%;
    padding: 10px;
    z-index: 2;
    margin:auto;
}
.background {
    position: absolute;
    width: 360px;
    height: 235px;
    opacity: 1;
    background: var(--mustard-yellow);
    margin: -50px;
    border-radius: 18px;
    z-index: -1;
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.45);
}
.login input[type=text]{
	width: 250px;
	height: 30px;
	background: white;
	border-width: 1px; 
	border-style: solid; 
	border-color: var(--mustard-yellow);
	border-radius: 2px;
	color: black;
    font-family: 'Source Sans Pro', sans-serif;font-size: 16px;font-weight: bold;padding: 4px;}

.login input[type=password]{
	width: 250px;
	height: 30px;
	background: white;
	border-width: 1px; 
	border-style: solid; 
	border-color: var(--mustard-yellow);
	border-radius: 2px;
	color: black;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding: 4px;
    margin-top: 10px;
}

.login input[type=submit],
.login input[type=button]{
	width: 100%;
	height: 35px;
	background-color: black;
	border: 1px solid black;
	cursor: pointer;
	border-radius: 2px;
	color: white;
    font-family: 'Source Sans Pro', sans-serif;
    text-transform:uppercase;
    font-size: 16px;
    font-weight: 400;
    padding: 6px;
    margin-top: 10px;
    transition:all 0.5s ease
}

.login input[type=submit]:hover,
.login input[type=button]:hover {background-color: var(--mustard-yellow-lighter);color: black;border: 1px solid var(--mustard-yellow);border-radius:5px;}
.login input[type=submit]:active,
.login input[type=button]:active{opacity: 1;}
.login input[type=text]:focus{outline: none;border-width: 1px; border-style: solid; border-color: var(--mustard-yellow-lighter);}
.login input[type=password]:focus{outline: none;border-width: 1px; border-style: solid; border-color: var(--mustard-yellow-lighter);}
.login input[type=submit]:focus,
.login input[type=button]:focus{outline: none;}

.login .links a {color:rgba(88,89,91,0.7); font-family: 'Roboto', sans-serif; font-weight:bold; font-size:12px;text-decoration:none;padding-top: 5px;}
#forgot {
    max-width:260px;
    position:absolute;
    top:calc(50% - 75px);
    left:calc(50% - 140px);
}
@media (min-height:740px) {
    .footer{
        position: absolute;
        top: calc(99% - 10px);
        left: calc(50% - 350px);
        font-weight:300;
        font-family: lato, arial, sans-serif;
        font-size: 12px;
        color: #fff;
        width: 700px;
        text-align:center;
    }
}

@media (max-height:740px){
    .footer{
        position: relative;
        font-weight:300;
        font-family: lato, arial, sans-serif;
        font-size: 12px;
        color: #98cef5;
        width: 330px;
        text-align:center;
        margin:auto;
    }
}
.footer a {color:#fff;}