/* =============================================================
   Back-End Theme — Common Styles
   Shared across account, admin, regcheck, support sub-domains
   ============================================================= */

/* Body */
body {
	font-size: 1em;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color: #23282D;
	background: #EFEFEF;
	line-height: 2;
}

/* Page Wrapper */
#wrap {
	width: 70%;
	min-width: 300px;
	margin: 0 auto;
	padding: 20px 5%;
	background: #FFF;
	border: 1px solid #666;
}

/* Headings */
h1, h2, h3, p, form {
	padding: .2em .2em 1em 0;
}
h1 {
	font-size: 200%;
	padding-bottom: 5px;
	border-bottom: 2px solid #0598f4;
}
h2 {
	font-size: 150%;
	padding-bottom: 6px;
}
h3 {
	font-size: 120%;
	padding-bottom: 6px;
}
h2.itemHeading,
h3.itemHeading {
	border: 1px solid #666;
	padding: 3px 6px;
	margin-bottom: 15px;
	line-height: 2;
	background-color: #0598f4;
	color: #EEE;
	font-size: 125%;
}
h4 {
	font-size: 110%;
	padding-bottom: 4px;
}
hr {
	color: #333;
}

/* Header */
header {
	margin: 0;
	padding: 60px 0 2px 0;
	background-color: #FFF;
}
header .logo {
	float: right;
	margin-top: -20px;
}
header h1 {
	margin: 0;
	padding: 0;
	color: #0598f4;
	font-size: 45px;
	line-height: 1;
}
header p {
	color: #575757;
}
header h1 a {
	color: #0598f4;
	text-decoration: none;
}

/* Top Nav */
nav.top-menu {
	display: flex;
	gap: 1rem;
}
nav.top-menu a {
	display: inline-block;
	padding: 0.5rem 1rem;
	margin: 0 .25em;
	background-color: #0598f4;
	color: #ffffff;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
nav.top-menu a:hover,
nav.top-menu a:focus {
	background-color: #037ac0;
	color: #ffffff;
	text-decoration: none;
}

/* Footer */
footer {
	clear: both;
	margin-top: 50px;
	text-align: center;
}

/* Utilities */
.centeredContent {
	width: 100%;
	text-align: center;
}
.footnote {
	display: block;
	line-height: 1;
	font-size: 75%;
	font-style: italic;
	text-align: right;
}

/* Box Sizing */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Header */
#eeUserDisplay {
	margin: 5px 20px 0 0;
	padding: 0;
	float: right;
	font-size: 80%;
	font-style: italic;
}

/* Tables */
.eeTable {
	width: 100%;
}
.eeTable,
.eeTable th,
.eeTable td {
	border: 1px solid #0598f4;
	border-collapse: collapse;
}
.eeTable th {
	padding: 5px;
	background-color: #0598f4;
	color: #fff;
	font-weight: bold;
}
.eeTable td {
	padding: 5px;
}

/* Notifications */
#notifications {
	background-color: #fafafa;
}
#notifications p {
	color: #000;
	font-weight: bold;
	line-height: 1.5;
	padding: 5px;
}
#notifications .messages { color: green;  display: block; }
#notifications .warnings { color: orange; display: block; }
#notifications .errors   { color: red;    display: block; }

/* Utilities */
.clearing {
	clear: both;
	display: block;
}

/* Form Styles */

label {
	display: block;
	width: 100%;
	margin-bottom: 6px;
}

input[type=text],
input[type=email],
input[type=password],
input[type=url],
select,
textarea {
	padding: 5px;
	font-size: 110%;
	display: block;
	width: 100%;
	margin-bottom: 3px;
}

input[type=submit],
input[type=reset] {
	font-size: 123%;
}

textarea {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

fieldset {
	position: relative;
	width: 94%;
	padding: 20px 3%;
	background-color: #f6f6f6;
	margin-bottom: 1em;
	border: 1px solid #666;
}

.eeCenteredForm {
	text-align: center;
}
.eeCenteredForm label {
	display: inline-block;
	width: 40%;
	text-align: left;
	margin-right: 5px;
}
.eeCenteredForm .radioLabel {
	width: auto;
}
.eeCenteredForm input[type=text],
.eeCenteredForm input[type=email],
.eeCenteredForm input[type=url],
.eeCenteredForm input[type=password] {
	display: inline-block;
	width: 40%;
	text-align: left;
}

/* -------------------------------------------------------
   Tooltip — sup.tip[data-tooltip]
   Pure CSS, no JavaScript or external library.
   Usage: <sup class="tip" data-tooltip="Your hint here" tabindex="0">&#x2139;&#xFE0F;</sup>
------------------------------------------------------- */
sup.tip {
	position: absolute;
	top: 8px;
	right: 10px;
	cursor: help;
	font-size: 1.1rem;
	line-height: 1;
	background: none;
	padding: 0;
}

sup.tip[data-tooltip]::after,
sup.tip[data-tooltip]::before {
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s ease;
	z-index: 100;
}

/* bubble — opens downward-left from the icon so it stays inside the fieldset */
sup.tip[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	left: auto;
	transform: none;
	background: rgba(5, 153, 245, 0.95);
	color: #fff;
	border-radius: 4px;
	padding: .4em .7em;
	font-size: .8rem;
	line-height: 1.4;
	white-space: normal;
	max-width: 260px;
	width: max-content;
	text-align: left;
	font-weight: normal;
	vertical-align: baseline;
}

/* arrow */
sup.tip[data-tooltip]::before {
	content: '';
	position: absolute;
	top: calc(100% + 4px);
	right: 4px;
	left: auto;
	transform: none;
	border: 5px solid transparent;
	border-bottom-color: rgba(5, 153, 245, 0.95);
}

sup.tip[data-tooltip]:hover::after,
sup.tip[data-tooltip]:hover::before,
sup.tip[data-tooltip]:focus-visible::after,
sup.tip[data-tooltip]:focus-visible::before {
	opacity: 1;
}

sup.tip:focus-visible {
	outline: 2px solid #0598f4;
	outline-offset: 2px;
}

/* When sup.tip sits directly inside a heading, anchor to the heading instead */
h3:has(> sup.tip) {
	position: relative;
	padding-right: 1.8em;
}

h3 > sup.tip {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}