/* -----[ variables ]------------------------------------------ */

/* standard variables (dark mode) */
:root {
	--font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	/* background for the page */
	--background-color: #111827;
	--title-color: #ffffff;
	/* standard text color */
	--text-color: #ffffff;
	/* color for subtitles and such */
	--text-sub-color: #9ca3af;
	/* slightly off textcolor */
	--text-off-color: #f3f4f6;
	/* link color */
	--link-color: var(--title-color);
	/* background for the top header */
	--header-background-color: #1f2937;
	/* color when hovering on menu item */
	--menu-hover-background-color: #374151;
	/* background for content boxes and table content */
	--content-background-color: var(--header-background-color);

	/* font sizes should be set up so that the full with is about the max text size */
	--max-font-size: 16px;
	--min-font-size: 12px;
	--calc-font-size: 1.4vw;

	/* forms and inputs CHECK */
	--form-textcolor: #fff;
	--form-placeholdercolor: #aaa;
	--input-bordercolor: #374151;
	--input-bordercolor-selected: #374151;
	--input-errorcolor: #bf1e4b;
	--input-background-color: #374151;
	--input-background-color-disabled: #333333;

	/* popup */
	--popup-background-color: var(--background-color);
	--popup-border-color: #374151;
	--popup-text-color: #9BA0A8;

	/*
		Not in variables:
		- the stuff for media queries (900px / 901px)
	*/

	--breadcrumb-color: #9BA0A8;
	--breadcrumb-arrow-color: #58616E;

	--input-background-color: #374151;

}

/* variables for light mode */
.xlight-mode {
	/* background for the page */
	--background-color: #fff;
	--form-textcolor: #000;
	--breadcrumb-color: #1f2937;
	--breadcrumb-arrow-color: #888;
	--header-background-color: #e8e8ea;
	--title-color: #1f2937;
	--text-color: #1f2937;
	--text-sub-color: #4f6285;
	--text-off-color: #0C0B09;
	--menu-hover-background-color: #d8d8da;
	--content-background-color: var(--header-background-color);
}

/* -----[ basic page elements ]-------------------------------- */

/* use border-box for everything */
*,
*:before,
*:after {
	box-sizing: border-box;
}

/* set the 1rem size */
html {
	font-size: min(max(var(--min-font-size), var(--calc-font-size)), var(--max-font-size));
}

body {
	/*font-family: Arial, sans-serif;*/
	font-family: var(--font-family);
	background-color: var(--background-color);
	margin: 0;

	display: flex;
	flex-direction: column;
	color: var(--text-color);

	max-height: 100vh;
	height: 100vh;
}

html, body {
	overflow-x: hidden;
	overflow-y: hidden;
}

header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex-flow: flex-start;
	justify-content: flex-start;
	align-items: stretch;

	min-height: 3rem;
	max-height: 3rem;
	background-color: var(--header-background-color);

	margin-left: 0;
	padding: 0 20px;

	z-index: 101;
}
header svg {
	margin: 12px;
}
header > i {
	margin: 12px;
	font-size: 1.5rem;
}
header h1 {
	font-size: 1.5rem;
	margin: 7px 0;
}
header span.divider {
    width: 0;
    /* justifies it to the right (along with everything that follows it) */
    /* see https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties#33856609 */
    margin-left: auto;
}
header menu {
	list-style: none;
	display: flex;
	flex-direction: row;
	margin: 0;
}
header menu div {
	display: flex;
	flex-direction: row;
	margin: 0;
}
header menu li {
	display: block;
	padding: 0.8rem;
	position: relative;
}
header menu li:hover {
	background-color: var(--menu-hover-background-color);
}
header menu li.active {
	position: relative;
}
/* this is a faux text-decoration:underline that includes the icon */
header menu > div > li.active > a:after {
  content: '';
  position: absolute;
  top: calc(100% - 0.8rem);
  bottom: 0;
  left: 0.8rem;
  right: 0.8rem;
  border-top: 1px solid var(--title-color);
}
header menu li a {
	color: var(--title-color);
	text-decoration: none;
}
header menu li.active a {
	/*
	text-decoration: underline;
	text-underline-offset: 5px;
	*/
}

/* menuitem */
header span.menuitem {
	position: relative;
}
header span.menuitem:hover {
	background-color: var(--menu-hover-background-color);
}
header span.menuitem a {
	display: inline-block;
	padding: 0.8rem;
	color: #fff;
	text-decoration: none;
}
/* this is a faux text-decoration:underline that includes the icon */
header span.menuitem.active a:after {
  content: '';
  position: absolute;
  top: calc(100% - 0.8rem);
  bottom: 0;
  left: 0.8rem;
  right: 0.8rem;
  border-top: 1px solid #fff;
}

/* submenu */
header ul.submenu {
	list-style: none;
	display: none;
	flex-direction: column;
	margin: 0;
	position: absolute;
	top: 3rem;
	right: 0;
	z-index: 125;
	background-color: var(--header-background-color);
	padding: 0;
	min-width: 100%;
	border-left: 0.25rem solid var(--background-color);
	border-right: 0.25rem solid var(--background-color);
	border-bottom: 0.25rem solid var(--background-color);
	border-bottom-left-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}
header ul.submenu.show {
	display: flex;
}
header ul.submenu li {
	white-space: nowrap;
	position: relative;
}
header ul.submenu li a {
	padding: 0.8rem;
}
/* put a line indicator on the left */
header ul.submenu li.active:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1px;
  right: 0.8rem;
  border-top: none;
  border-left: 5px solid #fff;
  border-bottom: none;
  border-top: none;
}
header ul.submenu li:hover {
	background-color: var(--menu-hover-background-color);
}

/* menubutton */
header span.menubutton {
	display: none;
	position: relative;
}
header span.menubutton:hover {
	background-color: var(--menu-hover-background-color);
}
header span.menubutton a {
	display: inline-block;
	padding: 0.8rem;
	color: #fff;
	text-decoration: none;
}
/* this is a faux text-decoration:underline that includes the icon */
header span.menubutton.active a:after {
  content: '';
  position: absolute;
  top: calc(100% - 0.8rem);
  bottom: 0;
  left: 0.8rem;
  right: 0.8rem;
  border-top: 1px solid #fff;
}

@media only screen and (max-width: 900px) { /* responsive-max-width */
	header menu {
		display: none;
		position: absolute;
		flex-direction: column;
		left: 0;
		right: 0;
		top: 3rem;
		z-index: 125;
		background-color: var(--header-background-color);
		padding: 0;
	}
	header menu div {
		flex-direction: column;
	}
	header menu.show {
		display: block;
	}
	header menu li {
		padding: 1rem 2rem;
	}
	/* put a line indicator on the left */
	header menu > div > li.active > a:after {
	  content: '';
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 5px;
	  right: 0.8rem;
	  border-top: none;
	  border-left: 5px solid #fff;
	}

	header span.menubutton {
		display: block;
	}

	header ul.submenu {
		position: relative;
		top: 0.8rem;
		margin-right: -2rem;
		margin-left: -1rem;

		/* we don't want these borders here */
		border-left: none;
		border-right: none;
		border-bottom: none;
		border-bottom-left-radius: none;
		border-bottom-right-radius: none;
	}
	/* hover on submenu item should not highlight parent item */
	header menu > li:hover:has(ul.submenu li:hover) {
		background-color: var(--header-background-color);
	}
}

div.pagehead {
	padding: 10px 20px;
	position: relative;
	vertical-align: middle;
}
div.pagehead nav.crumbs ol {
	list-style-type: none;
	padding-left: 0;
	padding: 0;
}
div.pagehead nav.crumbs li {
	display: inline-block;
	font-size: 1.2rem;
	color: var(--breadcrumb-color);
}
div.pagehead nav.crumbs li:after {
	display: inline-block;
	content: "»";
	font-size: 1rem;
	font-weight: bold;
	padding: 0 5px 0 8px;
	color: var(--breadcrumb-arrow-color);
}
div.pagehead nav.crumbs li:last-child:after {
	display: none;
}
div.pagehead nav.crumbs li a {
	color: var(--breadcrumb-color);
	text-decoration: underline;
	text-underline-offset: 5px;
}

div.pagehead span.buttons {
	display: block;
	position: absolute;
	top: 22px;
	right: 20px;
}
div.pagehead span.buttons button:disabled {
	/* we don't want this one to look ugly */
	background-color: #374151 !important;
	border-color: #374151 !important;
	cursor: wait;
}
@media only screen and (max-width: 900px) { /* responsive-max-width */
	div.pagehead span.buttons {
		position: relative;
		top: auto;
		text-align: right;
		right: 0;
	}
}

main {
	padding: 0 20px;
	height: 100%;

	flex-grow: 1;
	position: relative;
	overflow: none;

	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-color: #374151 #1f2937;
}
/*
	This adds a gradient to the bottom; only noticeable when scrolling.
	It does however add some "padding" to the bottom of the main area.
*/
/*
main:after {
    content: '';
    display: block;
    position: sticky;
	bottom: 0;
	left: 0;
	width: 100%;
    height: 2rem;
    background-image: linear-gradient(to bottom, rgba(76,76,76,0), var(--background-color));
    pointer-events: none;
	z-index: 5;
}
*/

footer {
	height: 60px;
	padding: 8px 20px;
	text-align: right;
}
/* hide footer completely when it's empty */
footer:not(:has(>*)) {
	display: none;
}

/* -----[ responsive hints ]----------------------------------- */

@media only screen and (min-width: 901px) { /* responsive-max-width+1 */
	/* show only in responsive */
	.responsive { display: none !important; }
}
@media only screen and (max-width: 900px) { /* responsive-max-width */
	/* hide in responsive */
	.non-responsive { display: none !important; }
}

/* -----[ text styles ]---------------------------------------- */

h1, h2, h3, h4, h5 {
	font-weight: normal;
	color: var(--title-color);
	margin: 0;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; border-bottom: 1px solid var(--title-color); }
h5 { font-size: 1rem; border-bottom: 1px solid var(--title-color); }
a { text-decoration: none; }

.width-100pct { width: 100%; }
.d-none { display: none !important; }

/* -----[ buttons ]-------------------------------------------- */

/* color samples: https://getbootstrap.com/docs/5.0/components/buttons/ */
a.button, button {
	font-family: inherit;
	display: inline-block;
	background-color: #374151;
	text-decoration: none;
	margin: 0 0 0 0.3125rem;
	padding: 0.33rem 0.66rem;
	color: #fff;
	border-radius: 10px;
	border: 1px solid #374151;
	xheight: 2.4rem;
	font-size: 1rem;
	cursor: pointer;
}
a.button:hover, button:hover {
	background-color: #4b5563;
	border: 1px solid #4b5563;
}
a.button:focus, button:focus {
	border: 1px solid var(--input-bordercolor-selected) !important;
	outline: none;
}
a.button.selectable, button.selectable {
	color: #9ca3af;
}
a.button.selected, button.selected {
	/* https://box-shadow.dev/ */
	/*
	box-shadow: inset 0px 0px 5px 0px #4b5563;
	border: 1px solid #4b5563;
	*/
	color: #fff;
	/*
	text-decoration: underline;
	text-underline-offset: 5px;
	*/
}
a.button.button-info, button.button-info {
	background-color: #0d6efd;
	border: 1px solid #0d6efd;
}
a.button.button-info:hover, button.button-info:hover {
	background-color: #0b5ed7;
	border: 1px solid #0b5ed7;
}
a.button.button-ok, button.button-ok {
	background-color: #22c55e;
	border: 1px solid #22c55e;
}
a.button.button-ok:hover, button.button-ok:hover {
	background-color: #157347;
	border: 1px solid #157347;
}
a.button.button-cancel, button.button-cancel {
	background-color: #bb2d3b;
	border: 1px solid #bb2d3b;
}
a.button.button-cancel:hover, button.button-cancel:hover {
	background-color: #a81424;
	border: 1px solid #a81424;
}
a.button:disabled, button:disabled {
	background-color: #888 !important;
	border: 1px solid #888 !important;
	cursor: not-allowed;
}

/*
a.button:first-child {
	margin: 0;
}
*/
a.button.button-mini, button.button-mini {
	font-size: 12px;
	padding: 5px 0;
	margin: 0 0 0 2px;
	height: auto;
	width: 25px;
	height: 25px;
	text-align: center;
}
a.button.button-mini:first-child, button.button-mini:first-child {
	margin: 0;
}
a.button.button-xmini, button.button-xmini {
	font-size: 10px;
	padding: 1px 0 0 0;
	margin: 0 0 0 2px;
	height: auto;
	width: 16px;
	height: 16px;
	text-align: center;
}
a.button.button-xmini:first-child, button.button-xmini:first-child {
	margin: 0;
}

a.button.connect-right, button.connect-right {
	margin-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
a.button.connect-left, button.connect-left {
	margin-left: -4px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
a.button.connect-left.border-between, button.connect-left.border-between {
	/* use the border to simulate a 1px gap */
	border-left: 1px solid var(--content-background-color);
}

/* -----[ colors ]--------------------------------------------- */

.color-blue { color: #7f8af4; }
a.color-blue:hover { color: #a2b1f7; }
.color-red { color: #f87171; }
a.color-red:hover { color: #f8a3a3; }
.color-green { color: #22c55e; }
a.color-green:hover { color: #157347; }
.color-gray { color: #666666; }
.color-light { color: #9ca3af !important; }
.color-white { color: #fff; }

/* -----[ table styles ]--------------------------------------- */

table {
	width: 100%;
	border-collapse: collapse;
	border-radius: 8px;
	overflow: hidden;
}
table thead tr th:first-child {
	border-top-left-radius: 8px;
}
table thead tr th:last-child {
	border-top-right-radius: 8px;
}
table thead tr th {
	white-space: nowrap;
}
table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 8px;
}
table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 8px;
}
table tbody tr th.full-width {
	width: 100%;
}
table tbody tr td {
	background-color: var(--content-background-color);
	white-space: nowrap;
}
table tbody tr td.cut-off {
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 0;
	width: 100%;
}
table tr {
	/* https://stackoverflow.com/questions/13624276/how-to-separate-table-rows-with-a-line */
	border: solid;
	border-width: 1px 0;
	border-color: #374151;
}
table tr:first-child {
	border-top: none;
}
table tr:last-child {
	border-bottom: none;
}
table th {
	text-align: left;
	color: rgb(209 213 219);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.8rem;
	font-weight: 500;
	background-color: #374151;
}
table th svg {
	width: 0.75rem;
	height: 0.75rem;
	vertical-align: middle;
	margin-left: 0.25rem;
	display: inline;
}
table th, td {
	padding: 10px;
}
table tbody tr:hover td {
	/* blend colors: https://meyerweb.com/eric/tools/color-blend/#1F2937:374151:5:hex */
	background-color: #2B3544;
}

table tbody tr.deleted td:not(:last-child) {
	/* strike-through for deleted DNS records */
	text-decoration: line-through;
	color: #9ca3af;
}
table tbody tr:not(.deleted) a.x-restore-record {
	/* don't show restore DNS record option unless it's deleted */
	display: none;
}
table tbody tr.deleted a.x-delete-record {
	/* don't show delete DNS record option when it's deleted */
	display: none;
}
table tbody tr.changed td:not(:last-child) {
	/* special color for changed DNS records */
	color: #7f8af4;
}
table tbody tr.added td:not(:last-child) {
	/* special color for added DNS records */
	color: #22c55e;
}

table th span.sortable {
	cursor: pointer;
}
table th span.sortable i {
	color: rgb(155, 160, 168);
}
table th span.sortable i + i {
	/* position the up and down carets at the same horizontal position */
	margin-left: -1rem;
}
table th span.sortable i.selected {
	color: rgb(209, 213, 219);
}

/* -----[ dialogs ]-------------------------------------------- */

div.overlay, div.overlay-responsive {
	z-index: 99;
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: ' ';
	/*
	background-color: #fff;
	opacity: 0.1;
	*/
	background-color: transparent;
	backdrop-filter: blur(5px) saturate(150%) contrast(90%);
}
div.overlay.show {
	display: block;
}
/* make sure the div.overlay-responsive is only shown in responsive mode */
@media only screen and (max-width: 900px) { /* responsive-max-width */
	div.overlay-responsive.show {
		display: block;
	}
}

dialog {
	z-index: 200;
	border: 0;
	border-radius: 8px;
	background-color: var(--content-background-color);
	color: #fff;

	width: 700px;
	max-width: calc(100vw - 10px);
	top: 75px;

	max-height: calc(100vh - 100px);
	border: 1px solid rgb(55, 65, 81);

	padding: 0;
}
dialog:focus {
	outline: none;
}

dialog.show {
	display: flex;
	flex-direction: column;
}

dialog .dialog-head {
	padding: 1rem;
	position: relative;
}
dialog .dialog-head:not(:first-child) {
	padding: 20px 0 20px 0;
}
dialog .dialog-footer {
	margin-top: 1.5rem;
	text-align: right;
	padding: 1rem;
}

div.dialog-content {
	overflow-y: auto;
	scrollbar-color: #374151 #1f2937;
	padding: 1rem;
}

dialog .dialog-head a[data-action=modal-close] {
	color: #fff;
	position: absolute;
	top: 1.3rem;
	right: 1rem;
	background-color: #374151;
	padding: 0.15rem 0.2rem;
	height: 1.6rem;
	width: 1.6rem;
	border-radius: 0.8rem;
}
dialog .dialog-head a[data-action=modal-close]:hover {
	background-color: #4b5563;
}

/* -----[ forms ]---------------------------------------------- */

.form-group-group {
	display: flex;
	flex-direction: row;
	flex-flow: flex-start;
	justify-content: flex-start;
	align-items: stretch;
}
.form-group {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}
.form-group.wide {
	flex-grow: 1;
}
.form-group.small {
	max-width: 5rem;
	margin-left: 0.5rem;
}

input[type=text],input[type=password],input[type=number],select {
	font-family: var(--font-family);
	background-color: #374151;
	border: none;
	border: 1px solid #374151;
	margin: 0;
	padding: 0.50rem 0.66rem;
	font-size: 1rem;
	color: #fff;
	border-radius: 8px;
	height: 2.4rem;
	min-width: 50px;
	max-width: 100%;

	/* this makes the vertical align in select-boxes consistent with other inputs */
	box-sizing: content-box;
	padding: 0 0.66rem;
	height: calc(2.4rem - 2px);
}
select[multiple] {
	height: auto;
	overflow-y: auto;
	min-height: calc(2.4rem - 2px);
	padding: 0;
}
select[multiple] optgroup {
	font-style: italic;
	font-weight: normal;
	padding: 0 0.66rem;
}
select[multiple] option {
	font-style: normal;
	color: #fff;
	height: calc(2.4rem - 2px);
	padding: 0.4rem 0.66rem;
}
select[multiple]:focus option:checked,
select[multiple] option:checked {
	color: var(--background-color);
}
select[multiple] optgroup option {
	padding: 0.4rem 0 0.4rem 1rem;
}
input[type=text].input-error,input[type=password].input-error,input[type=number].input-error,select.input-error,
.input-field.input-error input[type=text],
.input-field.input-error input[type=password],
.input-field.input-error input[type=number],
.input-field.input-error select,
.input-field.input-error label.faux-input {
	border-color: #f87171;
}
input[type=text]:disabled,input[type=password]:disabled,input[type=number]:disabled,select:disabled {
	background: var(--input-background-color-disabled);
	color: #888;
}
input[type=text]::placeholder,input[type=password]::placeholder,input[type=number]::placeholder {
	color: #9ca3af;
}
textarea {
	font-family: var(--font-family);
	background-color: #374151;
	border: none;
	margin: 0;
	padding: 0.50rem 0.66rem;
	font-size: 1rem;
	color: #fff;
	border-radius: 8px;
	min-width: 50px;
	max-width: 100%;
	resize: vertical;
}
label.faux-input {
	white-space: nowrap;
	font-family: inherit;
	background-color: #374151;
	text-decoration: none;
	margin: 0 0 0 0.3125rem;
	margin: 0;
	padding: 0.33rem 0.66rem 0.33rem 0.66rem;
	color: #fff;
	border-radius: 10px;
	border: 1px solid #374151;
	border: none;
	height: 2.4rem;
	font-size: 1rem;
	cursor: pointer;
	border: 1px solid #374151;

	/* this aligns the text properly with inputs and buttons */
	display: flex;
	align-items: center;
	column-gap: 0.3rem;

	/* this makes the vertical align in select-boxes consistent with other inputs */
	/* seems not really needed here but just to be sure */
	box-sizing: content-box;
	padding: 0 0.66rem;
	height: calc(2.4rem - 2px);
}
label.faux-input.small {
	flex-grow: 0;
}
label.faux-input.overflow {
	overflow: hidden;
	text-overflow: ellipsis;

	/* this is needed because the ellipsis doesn't work for display: flex */
	display: inline-block;
	padding: 0.45rem 0.66rem;
	box-sizing: border-box;
	height: 2.4rem;
}
input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,select:focus {
	outline: none;
}
input[type=text].connect-right,
input[type=password].connect-right,
input[type=number].connect-right,
select.connect-right,
label.faux-input.connect-right {
	margin-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: none;
}
input[type=text].connect-left,
input[type=password].connect-right,
input[type=number].connect-right,
select.connect-left,
label.faux-input.connect-left {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: none;
}

span.input-title, label.input-title {
	margin-bottom: 5px;
}
span.input-field {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex-flow: flex-start;
	justify-content: flex-start;
	align-items: stretch;

	position: relative;
}
span.input-field > * {
	flex-grow: 0;
}
span.input-field > *:first-child {
	flex-grow: 3;
}
span.input-explanation {
	color: rgb(156, 163, 175);
	font-size: 0.8rem;
}

form.disabled {
	color: #888;
}

/* don't show spinner arrows on number fields */
input[type=number].no-spinner { -moz-appearance: textfield; }
input[type=number].no-spinner::-webkit-outer-spin-button,
input[type=number].no-spinner::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* -----[ zone list ]------------------------------------------ */

div.zone-boxes {
	width: 100%;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	flex-flow: flex-start;
	align-items: stretch;
	justify-content: space-evenly;
	gap: 1rem;
}

div.zone-box {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 0;

	min-width: 23rem;
	/*max-width: 45rem;*/
	border: 1px solid rgb(55, 65, 81);
	border-radius: 8px;
	background-color: var(--content-background-color);
	color: var(--text-off-color);

	display: flex;
	flex-direction: column;
}
div.zone-box.hide {
	visibility: hidden;
}
div.zone-box div.zone-box-inner {
	/* used so the zone box doesn't need padding, keeping the hidden ones small */
	padding: 1.2rem;
}
div.zone-box div.zone-header {
	display: flex;
	flex-direction: row;
}
div.zone-box div.zone-header span.zone-title {
	display: block;
	color: var(--text-color);
	font-weight: bold;
	font-size: 1.125rem;

	text-overflow: ellipsis;
	overflow: hidden;
	width: 100%;
}
div.zone-box div.zone-header span.zone-link {
	display: block;
	font-size: 1.125rem;
	margin: 0 0 0 0.5rem;
}
div.zone-box div.zone-updated {
	color: var(--text-sub-color);
	font-size: 0.875rem;
	margin-bottom: 0.8rem;
}
div.zone-box div.zone-dnssec {
	margin-bottom: 0.6rem;
	display: flex;
	flex-direction: row;
}
div.zone-box div.zone-dnssec span.zone-dnssec-link {
	margin-left: auto;
}
div.zone-box div.zone-actions {
	display: flex;
	flex-direction: row;
}
div.zone-box div.zone-actions span.zone-action-delete {
	margin-left: auto;
}

/* -----[ filters ]-------------------------------------------- */

div.filters {
	background-color: var(--content-background-color);
	padding: 0.5rem 1rem;
	border: 1px solid rgb(55, 65, 81);
	border-radius: 8px;
	margin-top: 1.3rem;
	margin-bottom: 0.5rem;
	display: none;
}
/* only show the filters block when it has some content */
div.filters:has(>*) {
	display: block;
}

/* -----[ message ]-------------------------------------------- */

div.message {
	background-color: var(--content-background-color);
	padding: 0.5rem 1rem;
	border: 1px solid rgb(55, 65, 81);
	border-radius: 8px;

	position: absolute;
	top: 20px;
	left: 50%;

	transform: translate(-50%,0);
}
div.message.message-ok {
	color: rgb(134, 239, 172);
	border: 1px solid rgb(74, 222, 128);
	background-color: rgba(20, 83, 45, 0.2);
}
div.message.message-ok i {
	color: rgb(74, 222, 128);
}
div.message.message-error {
	color: rgb(253, 224, 71);
	border: 1px solid rgb(250, 204, 21);
	background-color: rgba(113, 63, 18, 0.2);
}
div.message.message-error i {
	color: rgb(250, 204, 21);
}

/* -----[ notices ]-------------------------------------------- */

div.notice {
	background-color: rgba(113, 63, 18, 0.2);
	color: rgb(253, 224, 71);
	padding: 1.3rem 1.3rem 1.3em 2.8rem;
	border-left: 5px solid rgb(250, 204, 21);
	margin-bottom: 0.5rem;

	position: relative;
}
div.notice i {
	color: rgb(250, 204, 21);
}
div.notice > i:first-child {
	position: absolute;
	left: 1rem;
	top: 1.5rem;
}

div.notice.notice-ok {
	color: rgb(134, 239, 172);
	border-left: 5px solid rgb(74, 222, 128);
	background-color: rgba(20, 83, 45, 0.2);
}
div.notice.notice-ok i {
	color: rgb(74, 222, 128);
}

div.notice.notice-error {
	color: #ff683c;
	border-left: 5px solid #ff683c;
	background-color: #67382a;
}
div.notice.notice-error i {
	color: #f24310;
}

/* -----[ key blocks ]----------------------------------------- */

.key-block {
	display: flex;
	flex-direction: column;
}
.key-block .key-block-title {
	display: flex;
	flex-direction: row;
	margin-top: 1rem;

	flex-flow: flex-start;
	align-items: stretch;
	justify-content: space-between;
}
.key-block .keyinfo {
	display: flex;

	background-color: rgba(55, 65, 81, 0.5);
	padding: 0.8rem 1rem;
	border: 1px solid rgb(55, 65, 81);
	border-radius: 8px;
	margin-top: 0.5rem;
}
.key-block .keyinfo:has(+ .keyinfo-details.show) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.key-block .keyinfo span {
	display: inline-block;
	padding: 0.1rem 0.5rem;
}
.key-block .keyinfo span.divider {
    width: 0;
    /* justifies it to the right (along with everything that follows it) */
    /* see https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties#33856609 */
    margin-left: auto;
}
.key-block .keyinfo > a {
	color: rgb(156, 163, 175);
	padding: 0.1rem 0 0.15rem 0;
}
.key-block .keyinfo > a:hover {
	color: #fff;
}
.key-block .keyinfo-details {
	display: none;
	padding: 0.8rem 1rem;
	border: 1px solid rgb(55, 65, 81);
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
.key-block .keyinfo-details.show {
	display: block;
}
.key-block .keyinfo-details .keyinfo-properties {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.key-block .keyinfo-details .keyinfo-property {
	width: 50%;
}
.dnssec-disable {
	margin-top: 1rem;
}

/* -----[ pills ]---------------------------------------------- */

.pill {
	background-color: #888;
	border-radius: 0.5rem;
	padding: 0.1rem 0.5rem 0.15rem 0.5rem !important;
}
table .pill {
	padding: 0 0.5rem 0 0.5rem !important;
}
.pill-purple {
	background-color: rgb(88, 28, 135);
}
.pill-blue {
	background-color: rgb(30, 58, 138);
}
.pill-green {
	background-color: rgb(20, 83, 45);
}
.pill-orange {
	background-color: #d28d12;
}

/* -----[ checkboxes and radios ]------------------------------ */

/* checkbox */
input[type=checkbox] {
	position: absolute;
	opacity: 0;
}
input[type=checkbox] + span {
	position: relative;
	cursor: pointer;
	padding: 0;
}
input[type=checkbox] + span:before {
	content: '';
	margin-right: 10px;
	display: inline-block;
	vertical-align: text-top;
	width: 20px;
	height: 20px;
	background: var(--input-background-color);
	border: 1px solid var(--input-bordercolor);
	margin-top: -2px;
}
input[type=checkbox]:hover + span:before {
	box-shadow: inset 0 0 2px var(--input-bordercolor);
}
input[type=checkbox]:focus + span:before {
	border: 1px solid var(--input-bordercolor-selected);
	box-shadow: inset 0 0 2px var(--input-bordercolor);
}
input[type=checkbox]:checked + span:before {
	background: var(--input-background-color);
}
input[type=checkbox]:disabled + span {
	cursor: auto;
}
input[type=checkbox]:disabled + span:before {
	box-shadow: none;
	background: var(--input-background-color-disabled);
}
input[type=checkbox]:checked + span:after {
	position: absolute;
	left: 4px;
	top: 2px;
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c";
	font-size: 0.7em;
	color: var(--form-textcolor);
}
input[type=checkbox]:disabled + span:after {
	color: #888;
}

/* radio */
input[type=radio] {
	position: absolute;
	opacity: 0;
}
input[type=radio] + span {
	position: relative;
	cursor: pointer;
	padding: 0;
}
input[type=radio] + span:before {
	content: '';
	margin-right: 10px;
	display: inline-block;
	vertical-align: text-top;
	width: 20px;
	height: 20px;
	background: var(--input-background-color);
	border: 1px solid var(--input-bordercolor);
	border-radius: 10px;
}
input[type=radio]:hover + span:before {
	box-shadow: inset 0 0 2px var(--input-bordercolor);
}
input[type=radio]:focus + span:before {
	box-shadow: inset 0 0 2px var(--input-bordercolor);
}
input[type=radio]:checked + span:before {
	background-color: #fff;
}
input[type=radio]:disabled + span {
	color: #b8b8b8;
	cursor: auto;
}
input[type=radio]:disabled + span:before {
	box-shadow: none;
	background: #ddd;
}
input[type=radio]:checked + span:after {
	position: absolute;
	width: 14px;
	height: 14px;
	top: 3px;
	left: 3px;
	background-color: var(--form-textcolor);
	content: ' ';
	border-radius: 7px;
}

/* -----[ loader ]--------------------------------------------- */

.loader {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: var(--background-color);
	background-image: url('images/ajax-loader.gif');
	background-position: center center;
	background-size: auto auto;
	background-repeat: no-repeat;
}

/* -----[ settings page ]-------------------------------------- */

div.interact-boxes {
	width: 100%;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	flex-flow: flex-start;
	align-items: stretch;
	justify-content: space-between;
	justify-content: space-evenly;
	justify-content: flex-start;
	gap: 1rem;
}

div.interact-box {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 0;

	min-width: min(35rem, 100%);
	max-width: 45rem;
	border: 1px solid rgb(55, 65, 81);
	border-radius: 8px;
	background-color: var(--content-background-color);
	color: var(--text-off-color);

	display: flex;
	flex-direction: column;
}
div.interact-box.hide {
	visibility: hidden;
}
div.interact-box div.interact-box-inner {
	/* used so the zone box doesn't need padding, keeping the hidden ones small */
	padding: 1.2rem;
}
div.interact-box div.interact-box-title {
	color: #fff;
	font-weight: bold;
	font-size: 1.125rem;

	text-overflow: ellipsis;
	overflow: hidden;
	width: 100%;
}
div.interact-box form {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

div.interact-box span.notification {
	margin-left: 0.5rem;
	font-style: italic;
}
div.interact-box span.notification.notification-ok { color: #22c55e; }
div.interact-box span.notification.notification-error { color: #f87171; }

/* -----[ pop-ups with tippy ]--------------------------------- */

.tippy-box[data-theme~='custom'] {
	background-color: var(--popup-background-color);
	border: 1px solid var(--popup-border-color);
	color: var(--popup-text-color);
}
.tippy-box[data-theme~='custom'][data-placement^='top'] > .tippy-arrow::before {
	border-top-color: var(--popup-background-color);
}
.tippy-box[data-theme~='custom'][data-placement^='bottom'] > .tippy-arrow::before {
	border-bottom-color: var(--popup-background-color);
}
.tippy-box[data-theme~='custom'][data-placement^='left'] > .tippy-arrow::before {
	border-left-color: var(--popup-background-color);
}
.tippy-box[data-theme~='custom'][data-placement^='right'] > .tippy-arrow::before {
	border-right-color: var(--popup-background-color);
}

/* -----[ TFA dialog ]----------------------------------------- */

.buttons-tfa {
	display: flex;
	flex-direction: row;
}

.button-tfa {
	display: block;
	width: 100px;
	height: 100px;
	margin: 0 10px 10px 0;
	background-color: #374151;

	border-radius: 5px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	color: var(--color-fg-main);
	border: 1px solid var(--color-bo-forms);
	border: 1px solid #ccc;
	border: 1px solid #374151;
	position: relative;
}
.button-tfa.selected {
	/*border: 1px solid var(--color-bo-forms-selected);*/
}
.button-tfa .button-tfa-check {
	display: none;
}
.button-tfa.selected .button-tfa-check {
	display: block;
	position: absolute;
	top: 0.15rem;
	right: 7px;
	right: 0.15rem;
	color: #0a0;
	color: #22c55e;
	font-size: 1rem;
}
.button-tfa:hover {
	/*background-color: #ccc;*/
	border: 1px solid var(--color-bo-forms-selected);
	border: 1px solid #6e82a2;
}
.button-tfa .button-tfa-icon i.fas {
	font-size: 2.4rem;
	margin-top: 15px;
	margin-top: 0.525rem;
	border: 1px solid #1f2937;
	background-color: #1f2937;
	padding-top: 10px;
	padding-top: 0.65rem;

	width: 3.8rem;
	height: 3.8rem;
	border-radius: 1.9rem;
	color: #6e82a2;
	color: #ccc;
}
.button-tfa span {
	display: block;
	margin-bottom: 10px;
}

/* -----[ input errors ]--------------------------------------- */

span.input-check {
	display: inline-block;
	width: 0;
}
span.input-check:after {
	display: none;

	width: 1.25rem;
	max-width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	margin-top: 0.7rem;
	margin-left: -2rem;
	margin-right: 0rem;
	border: none;
	cursor: pointer;

	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; font-weight: 900;
	font-size: 1rem;
}

.input-field:has(input.input-error) span.input-check:after,
.input-field.input-error span.input-check:after {
	display: inline-block;
	content: "\f071"; /* exclamation triangle */
	color: #f87171;
}
.input-field:has(input.input-verified) span.input-check:after,
.input-field.input-verified span.input-check:after {
	display: inline-block;
	content: "\f00c"; /* checkmark */
	color: #22c55e;
}

.input-field:has(input.input-error):not(:has(span.input-check)):after,
.input-field.input-error:not(:has(span.input-check)):after {
	display: inline-block;
	content: "\f071"; /* exclamation triangle */
	position: absolute;
	right: 0.8rem;
	top: 0.7rem;
	color: #f87171;

	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; font-weight: 900;
	font-size: 1rem;
}
.input-field:has(input.input-verified):not(:has(span.input-check)):after,
.input-field.input-verified:not(:has(span.input-check)):after {
	display: inline-block;
	content: "\f00c"; /* checkmark */
	position: absolute;
	right: 0.8rem;
	top: 0.7rem;
	color: #22c55e;

	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; font-weight: 900;
	font-size: 1rem;
}


/* ------------- */

form.disabled {
	color: #888;
}

/* -----[ login dialog language select ]----------------------- */

span.language-select {
	display: inline-block;
	position: absolute;
	top: 0.3rem;
	right: 1rem;
	background-color: var(--content-background-color);
}
span.language-select a {
	color: #fff;
}
span.language-select > ul {
	position: relative;
}
span.language-select ul {
	list-style-type: none;
	padding: 0;
}
span.language-select > ul ul {
	display: none;
	z-index: 201;
	border: 0.25rem solid var(--background-color);
	border-radius: 0.25rem;
}
span.language-select.expanded > ul ul {
	display: block;
	position: absolute;
	top: 100%;
	right: 0;
}
span.language-select.expanded > ul ul li {
	white-space: nowrap;
	padding: 0.5rem 1rem;
	background-color: var(--content-background-color);
}
span.language-select.expanded > ul ul li:hover {
	background-color: --menu-hover-background-color;
}

/* -----[ responsive table buttons ]--------------------------- */

@media only screen and (max-width: 900px) { /* responsive-max-width */
	table tr {
		position: relative;
	}
	.slider {
		-webkit-transition: width 0.2s ease-in-out;
		-moz-transition: width 0.2s ease-in-out;
		-o-transition: width 0.2s ease-in-out;
		transition: width 0.2s ease-in-out;

		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;

		display: flex !important;
		flex-direction: row;
		padding: 0;
		width: 0;
		overflow: hidden;
	}
	.slider a {
		display: block;
		background-color: #fcc;
		font-size: 1.4rem;
		padding: 0.5rem 0.7rem;
	}
	.slider a.color-blue { background-color: #7f8af4; color: #000; }
	.slider a.color-red { background-color: #f87171; color: #000; }
	.slider a.color-green { background-color: #22c55e; color: 000; }
}