button:focus { outline: none; }
input:focus[type="text"], input:focus[type="password"] {
	outline: var(--na-light-red) solid medium;
}

form {
	margin: 15px;
}

label {
	font-size: 12pt;
}

.form-limit { max-width: 400px; }
.panel-limit { max-width: 800px; }

.panels-wrapper {
	margin-top: calc(30% + var(--header-thickness));
	margin-bottom: 100px;
}

.input-wrapper { margin: 30px 0; }
.input-wrapper label { float: left; margin-bottom: 1%; }

.form-remember-me { float: right; margin-left: 10px; }
.form-forgot-password { float: left; }

.panel input[type="text"], .panel input[type="password"] {
	width: 100%;
	border-radius: 5px;
	padding: 20px;
	border: solid 1px grey;
	box-sizing: border-box;
	display: block;
}

.panel input[type="submit"], .btn {
	width: 100%;
  border: solid 2px var(--na-red);
	border-radius: 5px;
	padding: 20px;
	font-size: 12pt;
	background-color: var(--na-red);
	color: white;
	margin: 15px 0 0 0;
	cursor: pointer;
	text-decoration: none !important;
	text-align: center;
}

.btn:hover {
  background: white !important;
  color: var(--na-red) !important;
}

.panel input[aria-invalid="true"], .panel button[aria-invalid="true"] {
	border: solid 2px var(--na-red);
}

.panel-subtitle { color: black; margin-top: 0; }
.panel form a { text-decoration: underline; color: grey; }

.id-provider { display: block; }

.under-panel {
    display: flex;
    font-family: roboto;
    font-weight: bold;
    color: black;
    margin: auto;
}

.under-panel a { color: black; }
.under-panel p { text-align: center; margin: auto; }

/*** BEGIN PASSWORD INPUT ***/

.input-error { display: block; margin: 1%; color: var(--na-red); font-size: small; }

.panel input[aria-invalid="true", type="password"] { border-right: none; }
.panel button[aria-invalid="true"] { border-left: none; }

.password-input-raw {
	border-radius: 5px 0 0 5px !important;
	border-right: none !important;
	width: 80% !important;
}

.password-input {
	display: inline-flex;
	width: 100%;
}

.password-input button {
	border: solid 1px grey;
	border-radius: 0 5px 5px 0;
	border-left: none;
	width: 20%;
	background: none;
}

.password-input svg {
	cursor: pointer;
	fill: grey;
}

/*** END PASSWORD INPUT ***/
/*** BEGIN PASSWORD RESET ***/

.btn-submit { float: right; }
.btn-back { 
	float: left;
  background: white !important;
  border: solid 2px var(--na-red) !important;
  color: var(--na-red) !important;
  font-weight: bold;
}

/*** END PASSWORD RESET ***/

/*** BEGIN register-user-profile.ftl ***/

#register {
	display: flex;
}

#register > form {
	font-size: 0; /* to fix whitespace probem on inline-flex elements */
}

#register .field-wrapper {
	box-sizing: border-box;
	padding: 5px;
	width: 50%;
}

#register .field-inline {
	display: inline-flex;
}

#register .field-inline > div {
	width: 100%;
}

/*** END register-user-profile.ftl ***/