#eauth-wrap {
	max-width: 750px;
}

#eauth-wrap h1 {
	padding-bottom: 0;
}

#eauth-wrap h2 {
	margin: 3em 0 1em;
	padding: 0.5em;
	border-bottom: 1px solid black;
	background: linear-gradient(0.25turn, #ffffff, #00000000);
}

#eauth-wrap h2[data-status="pass"] {
	background: linear-gradient(0.25turn, #00ff0020, #00000000);
}

#eauth-wrap h2[data-status="error"] {
	background: linear-gradient(0.25turn, #ff000020, #00000000);
}

#eauth-wrap h2[data-status="partial"] {
	background: linear-gradient(0.25turn, #ffff0020, #00000000);
}

#eauth-wrap h2[data-status="incomplete"],
#eauth-wrap h2[data-status="unknown"] {
	background: linear-gradient(0.25turn, #88888820, #00000000);
}

#eauth-wrap h3 {
	margin: 1.5em 0 0.5em;
}

#eauth-wrap h4 {
	margin: 0.5em 0;
}

#eauth-wrap ul {
	margin: 0;
}

#eauth-wrap ul > li::before {
	content: '-';
	margin-right: 0.5em;
}

#eauth-wrap .error:empty {
	display: none;
}

#eauth-wrap .notice.multiline,
#eauth-wrap .error.multiline {
	white-space: pre-wrap;
}

#eauth-toc ul {
	margin: 0;
	gap: 1em;
	display: flex;
	flex-wrap: wrap;
}

#eauth-toc li {
	margin: 0;
}

#eauth-toc li:before {
	display: none;
}

.eauth-dns-record > dt {
	margin-top: 1em;
	font-weight: 600;
}

.eauth-dns-record > dd {
	margin: 0.5em 0 0;
	background: white;
	padding: 0.5em;
	border-radius: 0.5em;
	word-break: break-all;
}

#eauth-options > :not(h1):not(h2):not(h3):not(dialog),
.eauth-dialog > :not(h1):not(h2):not(h3){
	margin: 1em 0;
}

#eauth-options .eauth-pre-output-static {
	margin-bottom: 0;
}

#eauth-options .eauth-pre-output-static + .eauth-output {
	margin-top: 0;
}

.eauth-status {
	font-size: 125%;
	line-height: 1.5;
}

.eauth-static > div,
.eauth-output > div {
	margin: 0.5em 0;
}

.eauth-dkim-key > button {
	cursor: pointer;
	border: none;
	background: none;
	padding: 0;
}

.eauth-email-input {
	display: inline-flex;
	gap: 0.5em;
	flex-wrap: wrap;
}

.eauth-address-input {
	display: inline-flex;
	flex-direction: column;
}

.eauth-radio-options > :not(:first-child) {
	margin-top: 0.5em;
}

.eauth-value,
.eauth-variable {
	font-style: unset;
}

.eauth-value,
.eauth-variable .value {
	font-family: monospace;
}

#eauth-wrap .eauth-dialog {
	padding: 1em 2em;
	border: 1px solid black;
	border-radius: 4px;
	box-shadow: 2px 2px 7px 0px #00000090;
}

#eauth-wrap .eauth-dialog h3 {
	margin: 1em 0 0.5em;
}

#eauth-spf-set-ip-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;
}

.eauth-checker-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

#eauth-wrap .eauth-recheck {
	font-size: 1em;
	height: 1em;
	width: 1em;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.eauth-current-record-container {
	display: flex;
	column-gap: 1em;
	row-gap: 0.5em;
	align-items: start;
}

.eauth-current-record-expanded {
	flex-direction: column;
}

.eauth-current-record {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.eauth-current-record-expanded .eauth-current-record {
	white-space: normal;
	line-break: anywhere;
}

.eauth-current-record-expand {
	visibility: hidden;
}

.eauth-current-record-expandable .eauth-current-record-expand,
.eauth-current-record-expanded .eauth-current-record-expand {
	visibility: initial;
}