html { height: 100%; }

body {
	margin:           0;
	height:           100%;
	font-family:      "roc-grotesk", sans-serif;
	font-weight:      400;
	font-size:        16px;
	line-height:      1.4em;
	color:            #333;
	background-color: #fff;
}

* { box-sizing: border-box; }

a { color: #333; }

a:hover { text-decoration: underline; }

.error {
	margin:     1em 5% 10px;
	border:     1px solid #c69;
	padding:    0 1em 0 1em;
	background: #FFEFF7;
}

input[type="text"],
input[type="password"] {
	box-sizing:       border-box;
	margin-top:       3px;
	outline:          none;
	border:           1px solid #333 !important;
	border-radius:    5px;
	padding:          10px;
	width:            100%;
	filter:           none;
	background-color: #fff !important;
}

input[type="text"]:focus,
input[type="password"]:focus {
	border:  2px solid #333 !important;
	padding: 9px;
}

.strong_id,
input[type="submit"] {
	position:         relative;
	margin:           0;
	border-radius:    23px;
	border:           none;
	padding:          14px 50px 12px 17px;
	font-family:      "roc-grotesk", sans-serif;
	font-size:        16px;
	line-height:      20px;
	white-space:      nowrap;
	color:            #fff;
	background-color: #2f2d4e;
	cursor:           pointer;
}


.strong_id::after,
input[type="submit"]::after {
	position:            absolute;
	top:                 11px;
	right:               12px;
	width:               24px;
	height:              24px;
	content:             '';
	background-image:    url(arrowright.svg);
	background-size:     20px;
	background-position: center;
	background-repeat:   no-repeat;
}

.strong_id:hover,
input[type="submit"]:hover {
	text-decoration:           underline;
	text-decoration-thickness: 2px;
}

#content-wrapper {
	margin:    10px auto;
	max-width: 1000px;
}

#content {
	position:         relative;
	margin:           0 auto;
	box-shadow:       0px 0px 3px RGBA(100, 100, 100, 0.5);
	padding:          120px 30px 60px 30px;
	background-color: #fff;
}

.enablebox { margin: 30px 0 20px 0; }

#logo {
	position:   absolute;
	top:        -1px;
	left:       40px;
	border:     1px solid #d7d7d7;
	padding:    20px;
	width:      90px;
	height:     100px;
	box-shadow: 0 2px 3px #d7d7d7;
}

#logo img {
	position: absolute;
	top:      15px;
	left:     20px;
	width:    50px;
	height:   auto;
}

.login-wrapper {
	margin-top:       20px;
	padding:          25px 30px 25px 30px;
	background-color: #f8dceb;
}

.login-option {
	margin-top: 25px;
	text-align: center;
}

.login-wrapper label {
	display:     block;
	margin-top:  10px;
	font-weight: normal;
}

.login-wrapper p { margin: 10px 0 0 0; }

.login-wrapper .submit {
	display:         flex;
	flex-wrap:       nowrap;
	margin:          15px 0 0 0;
	justify-content: space-between;
	align-items:     center;
}

#login .instructions {
	display: inline;
	margin:  15px 20px 0 0;
}

.strong_id_submit {
	display:         flex;
	margin:          0;
	padding-top:     15px;
	justify-content: flex-end;
}


h1 {
	display:     block;
	margin:      0;
	padding:     0 110px 10px 110px;
	text-align:  center;
	font-size:   32px;
	font-weight: 700;
	line-height: 1.05em;
	color:       #333;
}

h2 {
	display:     block;
	margin:      0;
	padding:     0 0 5px 0;
	font-size:   20px;
	font-weight: normal;
	line-height: 1.2em;
}

h2.lpw_renew { margin: 0 0 10px 0; }

#languagebar {
	padding:    15px 60px 0 60px;
	font-size:  80%;
	text-align: center;
}

.language-bar {
	position: relative;
	margin:   20px auto 0 auto;
	height:   60px;
}

div #error {
	margin:           10px 0 15px 0;
	border-radius:    4px;
	border:           2px solid #f00;
	padding:          8px 20px;
	color:            #f00;
	background-color: #fff;
}

div #error.login { padding: 8px 20px 15px 20px; }

#login-front { position: relative; }

#footer { text-align: center; }

.login-wrapper div.element input.inputelement {
	margin-left:  auto;
	margin-right: auto;
}

.lpw-submit {
	margin:     15px 0 20px 0;
	text-align: right;
}

.lpw-submit input[type="submit"] { margin: 0; }

.success { text-align: center; }

.set-password input[type="submit"] { float: right; }

.set-password.login-wrapper { padding-bottom: 80px; }

.membershipnum {
	margin-bottom: 20px;
	font-size:     18px;
	text-align:    center;
}

.membershipnum span { font-weight: 600; }

@media only screen and (max-width: 600px) {
	#content {
		padding-left:  40px;
		padding-right: 40px;
	}
}

@media only screen and (max-width: 480px) {
	#content {
		padding-left:  30px;
		padding-right: 30px;
	}
}
/* Accessible links share the original button appearance. */
a.strong_id {
	display:         inline-block;
	text-decoration: none;
}

a.strong_id:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px    solid #2f2d4e;
	outline-offset: 3px;
}

@media (max-width: 600px) {
  	#content-wrapper { width: 100%; }

  	#content {
		margin:  10px;
		padding: 110px 18px 30px;
		width:   calc(100% - 20px);
	}
  
  	h1 {
		padding:   0 0 10px;
		font-size: 28px;
	}
 
  	.login-wrapper { padding: 22px 18px; }

  	.login-wrapper .submit {
		flex-wrap: wrap;
		gap:       18px;
	}

  	.strong_id { white-space: normal; }

  	#languagebar { padding: 15px 0 0; }
}