:root {
	--body-color: #333333;
	--primary-color: #005E80;
	--gray: #999999;
	--light-gray: #EEE;
	--error-bg: #FDEDED;
	--error-text: #5F2120;
	--success-bg: #EDF7ED;
	--success-text: #1E4620;
	--red: #E12C2E;

}

body {
	margin: 0;
}

#logo {
	text-align: center;
}

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	background: url('./bg.jpg') !important;
	background-size: cover !important;
	height: 100%;
	width: 100%;
	min-height: 100vh;
}

.panel {
	background: white;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--body-color);
	padding: 2rem;
	border-radius: 8px;
	width: 100%;
	max-width: 480px;
	box-shadow: 0 1px 2px 1px rgba(0,0,0,0.2);
	margin: 1rem;
}

#signup-signin .panel {
	min-height: 480px;
}

h1,h2 {
	font-weight: bold;
	text-align:left;
	text-transform: uppercase;
}
h1 {
	font-size: 2rem;
	letter-spacing: 1.25px;
	text-align: center;
}
h2 {
	font-size: 1rem;
}

hr {
	opacity: 0.3;
}


label, button {
	display: block;
}

input, select {
	border: 1px solid var(--body-color);
	border-radius: 4px;
	box-sizing: border-box;
	margin-bottom: 1rem;
	padding: 0.5rem;
	width: 100%;
}

input#signInNamePhoneEmail {
	margin-bottom: 0;
}

.buttons {
	margin: 1rem 0;
}

button {
	margin-bottom: 1rem;
	border: 1px solid var(--primary-color);
	padding: 0.5rem;
	min-width: 200px;
	border-radius: 4px;
	font-weight: bold;
	background-color: var(--primary-color);
	color: white;
	width: 100%;
	cursor: pointer;
	font-size: 0.85rem;
}

button.btn-secondary, button#cancel, button.sendNewCode {
	background-color: white;
	color: var(--primary-color);
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor: default;
}

a {
	color: var(--primary-color);
	font-weight: bold;
	text-transform: none;
}
a:hover {
	text-transform: underline;
}

.text-small {
	font-size: 0.75rem;
}

.intro {
	margin-bottom: 2rem;
	font-size: 0.875rem;
}

#attributeList ul {
	padding: 0;
	list-style: none;
}

label {
	margin-bottom: 0.5rem;
}

#signup-signin .error.itemLevel>p, 
div:not(#signup-signin) .error.itemLevel.show,
#claimVerificationServerError,
#phoneVerificationControl_error_message:not([aria-hidden="true"]),
#emailVerificationControl_error_message:not([aria-hidden="true"]) {
	background: var(--error-bg);
	border: 1px solid var(--error-bg);
	border-radius: 4px;
	box-sizing: border-box;
	color: var(--error-text);
	font-size: 0.75rem;
	margin-bottom: 0.5rem;
	padding: 0.5rem;
	width: 100%;
}

#signup-signin .error.itemLevel>p:before, 
div:not(#signup-signin) .error.itemLevel.show:before,
#phoneVerificationControl_error_message:not([aria-hidden="true"]):before, 
#emailVerificationControl_error_message:not([aria-hidden="true"]):before {
	content: "!";
	background: var(--error-text);
	color: white;
	height: 1rem;
	width: 1rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 9999px;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
}

#phoneVerificationControl_error_message:not([aria-hidden="true"]), 
#emailVerificationControl_error_message:not([aria-hidden="true"]) {
	display: block !important;
}

#forgot-password #emailVerificationControl_but_change_claims {
	display: none !important;
}

.hideall{opacity:1 !important}

#staff-sign-in {
	margin-top: 2rem;
}

[id*="success_message"]:not([aria-hidden="true"]) {
    display: block !important;
    padding: 1rem;
    background: var(--success-bg);
    color: var(--success-text);
    margin-bottom: 1rem;
    border-radius: 4px;
}

.success-alert {
    display: block !important;
    padding: 1rem;
    background: var(--success-bg);
    color: var(--success-text);
    margin-bottom: 1rem;
    border-radius: 4px;
}

/* required fields */
label:not(#extension_MiddleName_label):not(#emailVerificationControl_label):not(#phoneVerificationControl_label):not(#responseMsg_label):after {
	content: " *";
	color: var(--red);
}

.verificationControlContent {
	border: 1px solid var(--light-gray);
    padding: 1rem;
    border-radius: 4px;
}

.VerificationControl.emailVerificationControl_li {
	margin-bottom: 1rem;
}

/* New sign-up link class that mimics the button class */
a.sign-up-button {
    display: block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
	font-size: 0.85rem;
	font-family: "MS Shell Dlg \32", Arial, Helvetica, sans-serif;
	margin-bottom: 1rem;
}

a.sign-up-button:hover {
    background-color: var(--primary-color);
    color: white;
}