@font-face {
	font-family: "oswald-light";
	src:url("../fonts/oswald-light.woff2") format("woff2"),
		url("../fonts/oswald-light.woff") format("woff");
}

html {
	background-color:#fafafa;
	font-family: Verdana, sans-serif;
}

body {
	background-image: url(../images/bg_amu.png);
	background-position:50% 30%;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;	
	justify-content: center;
}

.mdc-card {
	background-color:transparent;
	border: none;
	box-shadow: none;
}

.mdc-drawer-app-content {
	padding:30px 30px 0px 30px;
	width:540px;
}

#main-content {
	background: #e6e6e6;
	padding: 20px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}

#login-form-controls{
	width : 500px;
}

#loginForm {
	margin-top:-30px;
}

#loginForm h2 {
	font-family: oswald-light;
	font-weight: 400;
	font-size: 25.7px;
	color: rgb(85,85,85);
	text-align:center;
}

#loginErrorsPanel {
	font-size: 14px;
	font-family: Verdana, sans-serif;
	line-height: 1.4em;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
	text-align:center;
}

label[for="username"], label[for="password"] {
	color: #555;
	font-family: Verdana, sans-serif;
	font-weight: normal;
	font-size: 15px;
	display: flex;
	align-items:center;
	padding:0px;
	width:100%;
	margin-bottom:-5px;	
}

label[for="username"] img, label[for="password"] img {
	margin-right:15px;
}

#username, #password {
	border: solid 1px lightgrey;
	border-radius: 5px;
	border-color: rgb(255,255,255);
	padding-left: 5px;
	-webkit-transition: border-color 0.15s;
	transition: border-color 0.15s;
	background-color:white;
	height:35px;
	color:#333;
	font-family: Verdana, sans-serif;
	font-size:large;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;	
	box-sizing: border-box;	  
}

#username:hover, #password:hover {
	border-color: rgb(22,188,230);
}

#username:focus, #password:focus {
	border: solid 2px #0071b9;
}

#loginForm #btn-submit {
	background: rgb(22,188,230);
	font-family: Verdana, sans-serif;
	border: 0;
	font-weight: bold;
	font-size: 15px;
	color: white;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	width:100%;
	margin-top:15px; 
}

#loginForm #btn-submit:active {
	background: #0071b9;
}

.sidebar-content{
	margin-top:30px;
}

#warning-message, #help-message{
	display: flex;
	align-items:center;
	gap:20px;
	font-family: Verdana, sans-serif;
	line-height: 1.4em;
	font-size: 16px;
	color: #555;
}

.logo_amu {
	color: #999;
	opacity: 0.2;
	height: 150px;
	display:block;
	margin-left: auto;
	margin-right: auto;
}

a:link, a:visited {
	color: rgb(22,188,230);
	text-decoration: none;
}

.alert, .alert-success, h2.banner-heading {
	color: rgb(0,101,189);
	font-size: 30px;
	font-family: verdana;
	font-weight: normal;
	margin-top : 0px;
	margin-bottom: 20px;
	text-align: center;
}

.banner-message {
	text-align: center;
}

.row {
	text-align: center;
}

/* MFA */
#login {
    display:flex;
    align-items: center;
}

.gauth-qrcode {
	text-align: center;
}

button#confirm, button#print, button#registerButton, button#login {
	margin-right: 5px;
	background: rgb(22,188,230);
	font-family: Verdana, sans-serif;
	border: 0;
	font-weight: bold;
	#font-size: 15px;
	color: white;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

button#confirm:active, button#print:active, button#registerButton:active, button#login:active {
	background: #0071b9;
}

button#cancel, button#cancelButton {
	color:black;
}

label[for="token"], label[for="accountName"] {
	font-weight: normal;
	font-size: 15px;
	display: flex;
	align-items:center;
	width:100%;
}

#token, #accountName {
	border: solid 1px lightgrey;
	border-radius: 5px;
	padding-left: 5px;
	-webkit-transition: border-color 0.15s;
	transition: border-color 0.15s;
	background-color:white;
	width: 100%;
	height:35px;
	color:#333;
	font-family: Verdana, sans-serif;
	font-size:large;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#errorPanel {
	font-size: 14px;
	font-family: Verdana, sans-serif;
	line-height: 1.4em;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
	text-align:center;
}

.mdc-chip-set {
	width:100%;
	display:block;
}

#scratch-code {
	margin-bottom: 5px;
}

a#cancel {
	font-family: Verdana, sans-serif;
	font-weight: bold;
	color: white;
	margin-top:17px;
}

#input-otp{
	padding-top:20px;
	padding-bottom:20px;
}

#button-otp{
	display: flex;
	justify-content: end;	
}

/*interrupt*/
@font-face {
 font-family: "roboto";
 src: url("../fonts/roboto-bold.woff2") format("woff2");
 font-family: "Titillium Web";
 src: url("../fonts/titillium-web.woff2") format ("woff2");
}

#interrupt-title {
	font-family:'roboto', sans-serif;
	font-weight: bold;
	color:#101227;
}

#interrupt-flex {
	display: inline-flex;
	align-items:end;
	
}

#interrupt-flex .mdc-data-table{
	display:none;
}

#interruptMessage {
	font-family:'Titillium Web', sans-serif;
	font-size: medium;
	width:350px;
}

#interruptLinks a {
	border-radius: 5px;
	font-family:'roboto', sans-serif;
	font-weight: bold;
	background-color:#0065BD;
	color:white;
	border-color:transparent;
	font-size:12px;
}

#fm1 {
	margin-top: 30px;
	display: flex;
	justify-content: center;
}

button#proceed{
	margin-right: 5px;
	background: rgb(22,188,230);
	font-family: Verdana, sans-serif;
	border: 0;
	color: white;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-family:'roboto', sans-serif;
	font-weight: bold;
}

button#proceed:active {
	background: #0071b9;
}

#interrupt-cancel-button {
	background-color: grey;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;	
}

#interrupt-cancel-button-text {
	font-family:'roboto', sans-serif;
	font-weight: bold;
	color: white;
}

/* responsive */

@media (max-width: 540px) {
	.logo_amu { 
		display:none; 
	}
	.mdc-drawer-app-content {
		width:auto;
		padding: 0px;
	}
	.d-flex, #main-content, button, #loginForm {
		min-width:100px;
	}
	.justify-content-center {
 		justify-content: normal !important;
	}
}