body {
	background: #fff;
	color: #111827;
	transition: background-color 0.2s ease, color 0.2s ease;
	min-height: 100vh;
	/*font-size: 1.3em;*/
}

h1 {
	font-size: 1.6em;
}

h4 {
	margin-top: 2px;
	margin-bottom: 2px;
}

.bg {
	background: url(images/bg.png) repeat-x;
	min-height: 100vh;
}

.whf-tab-border {
	border: 1px solid #dbd9d9;
	box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
	padding: 20px;
}

#submit-button {
	font-size: 1.12em;
	padding: 10px;
	box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.3);
}

.submit-button {
	font-size: 1.12em;
	padding: 10px;
	box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.3);
}

.help-button {
	cursor: pointer;
	position: absolute;
	z-index: 100;
	/* 	top: 10px;*/
	right: 10px;
	color: #ffffff;
	font-size: 0.9em;
	font-weight: bold;
	background-color: #449d44;
	box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.3);
	border-radius: 5px;
	padding: 4px;
}

.help-text {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	border: 1px solid #d3d3d3;
	padding: 5px;
	z-index: 1300;
	width: 240px;
	top: 15px;
	right: 40px;
	margin-left: 10px;
	box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.3);
	border-radius: 5px;
}


.sticky {
	cursor: pointer;
	position: absolute;
	z-index: 1000;
	top: -20px;
	right: -20px;
	color: #000000;
	font-size: 0.7em;
	/*background-color: rgba(0, 0, 0, 0.7);*/
	background-color: rgba(211, 227, 133, 0.7);
	box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.3);
	border-radius: 5px;
	padding: 7px;

}


#legende {
	position: absolute;
	z-index: 900;
	top: 0px;
	right: -10px;
	width: 300px;
	background-color: #fff;
	border: 1px solid #dbd9d9;
	box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
	padding: 20px;

	transform: scale(0);
	transition: .3s ease opacity, .3s ease transform;
}

#legende span {
	padding: 7px;
}




.navbar-brand {
	margin-top: 0px !important;
}

#navbar {
	margin-top: 95px;
}

.nav>li>a {
	color: #fff;
	padding-top: 7px;
	padding-bottom: 7px;
}

.nav>li>a:hover {
	color: #000;
}

.nav>li.open>a {
	color: #000;
}

.jumbotron {
	margin-top: 30px;
}


.panel-group {
	border-radius: 10px !important;
}

.panel {
	border-radius: 10px !important;
}

.panel-heading {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.panel-heading h3 {
	padding: 0px;
	margin: 0px;
	font-size: 1.4em;
}

.green-border {
	margin: 10px;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid rgba(0, 128, 0, 0.300);
}

.blue-border {
	padding: 10px;
	border-radius: 5px;
	border: 1px solid blue;
}

.grey-border {
	margin-left: 10px;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid grey;
}

.whf-head-bar {
	margin-top: 20px;
	padding: 5px;
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 5px;
}

.whf-sort-bar {
	margin-top: 20px;
	padding: 10px;
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 5px;
}

.whf-container {
	margin-top: 30px;
	padding: 10px;
	border: 0px solid #ddd;
	background: #fff;
	border-radius: 10px;
	border: 1px solid #ddd;
	box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
}

.whf-container-light-blue {
	margin-top: 30px;
	padding: 10px;
	border: 1px solid #ddd;
	background-color: aliceblue;
	border-radius: 5px;
}

.whf-headline {
	position: absolute;
	top: -30px;
	left: -20px;
	padding: 12px;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 5px;
	font-size: 16px;
	font-weight: 700;
}

.email-accordion-row {
	margin-top: 30px;
}

.email-domain-panel {
	border-radius: 8px;
	margin-bottom: 15px;
}

.email-domain-panel .panel-heading {
	background: #2b8f56;
	border-bottom: 0;
	color: #fff;
}

.email-domain-panel .panel-heading h4 {
	font-size: 1.1em;
	font-weight: 600;
	color: #fff;
}

.email-domain-panel .panel-heading a {
	color: #fff;
}


.theme-dark .email-domain-panel .panel-heading {
	background-color: #2b8f56;
	color: #fff;
	border-color: #1f6d42;
}

.theme-dark .email-domain-panel .panel-heading h4,
.theme-dark .email-domain-panel .panel-heading a {
	color: #fff;
}

.email-domain-body {
	padding: 0 20px 10px;
}

.email-entry {
	padding: 15px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.email-entry:last-child {
	border-bottom: none;
}

.email-entry-address strong {
	display: block;
	font-size: 1.05em;
}

.email-entry-label,
.status-label {
	display: inline-block;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #6b7280;
}

.email-entry-destination {
	font-size: 0.95em;
}

.email-entry-status {
	font-size: 0.95em;
}

.email-entry-actions {
	text-align: right;
	font-size: 1.2em;
}


.footer {
	margin-top: 20px;
	padding: 10px;
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 5px;
}

.center {
	margin: 0 auto;
}

.pagination {
	margin: 0px;
}

.info {
	background: #DDFFDD;
	color: #000;
	padding: 20px;
}

.danger {
	border: 1px solid red;
	color: #000;
	padding: 20px;
}

.loginas {
	position: absolute;
	right: 13%;
	top: 75px;
	color: #fff;
}

/*Form Setup*/
select[name=searchfield],
input[name=searchtext] {
	display: inline;
}

input[name=Go] {
	color: #fff;
	background: green;
	border: 1px solid transparent;
	border-radius: 4px;
}

input[type=text],
input[type=password],
input[type=submit],
select {
	padding: 5px;
}

.btn,
button,
input[type=submit] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-weight: 400;
	color: #f7fff7;
	background: #2b8f56;
	border: 1px solid #1f6d42;
	border-radius: 6px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
	text-decoration: none;
	transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.btn:hover,
button:hover,
input[type=submit]:hover {
	background: #309d5f;
	color: #f8fff8;
	border-color: #1b5c37;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
	text-decoration: none;
}

.btn:active,
button:active,
input[type=submit]:active {
	transform: translateY(1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
}

.btn:focus,
button:focus,
input[type=submit]:focus {
	outline: 2px solid #38c172;
	outline-offset: 2px;
}

.fancytree-container .fancytree-active span.fancytree-title,
.fancytree-container .fancytree-focused span.fancytree-title {
	background: transparent !important;
	color: inherit !important;
}

.fancytree-container .fancytree-hover span.fancytree-title,
.fancytree-container .fancytree-active span.fancytree-title,
.fancytree-container .fancytree-focused span.fancytree-title,
.fancytree-container .fancytree-node:hover span.fancytree-title,
.fancytree-container .ui-state-hover span.fancytree-title {
	background: #2b8f56 !important;
	color: #f7fff7 !important;
	border-radius: 4px;
}

button a,
.btn a {
	color: inherit !important;
	text-decoration: none;
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.btn .glyphicon,
.btn a .glyphicon,
button .glyphicon {
	color: inherit !important;
	vertical-align: middle;
}

.pill-btn {
	padding: 8px 12px !important;
}

a.helpLink {
	border: 1px solid #ddd;
	padding: 5px;
}

.nav-tabs li {
	background: #eee;
	border: 1px solid #d6d3d3;
	border-bottom: 2px solid #d6d3d3;
	border-radius: 2px;
	border-top-right-radius: 25px;
	box-shadow: -1px -1px 10px rgba(0, 0, 0, 0.2);
}

.nav-tabs>li a {
	color: #000;
	background: none;
	border-top-left-radius: 18px;
	border-top-right-radius: 25px;
}

.nav-tabs>li.active a {
	color: #000;
	background: #fff;
	font-weight: bold;
	border-top-right-radius: 25px;
	border-top-left-radius: 18px;
}

.nav-tabs>li>a:hover {
	background: #e9f3ff;
	color: #0b5ed7;
	text-decoration: none;
	border-top-right-radius: 25px;
	border-top-left-radius: 18px;
}

.theme-toggle .theme-toggle-label {
	margin-left: 6px;
	font-size: 0.85em;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.spacer {
	margin-bottom: 10px;
	margin-left: 5px;
}

.nginx-settings-alert {
	position: absolute;
	border: 1px solid red;
	height: 620px;
	overflow-y: auto;
}

.glyphicon {
	font-size: 1.2em !important;
}

.sticky .glyphicon {
	font-size: 1.8em !important;
}

.social-icon {
	width: 26px;
	height: 26px;
	vertical-align: middle;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

/* Domain overview polish */
.domain-page {
	background: #f7f9fb;
}

.domain-actions .btn {
	margin-left: 8px;
	margin-bottom: 10px;
}

.domain-list {
	padding: 15px 20px;
	border-radius: 10px;
}

.domain-panel {
	border: 1px solid #dfdfdf;
	border-radius: 10px !important;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.domain-panel .panel-heading {
	background: none;
	border-bottom: 1px solid #e4e4e4;
}

.domain-panel .panel-heading h4 {
	color: #0f612e;
	font-weight: 700;
}

.domain-panel .panel-body {
	padding: 15px 10px 5px 10px;
	border: none !important;
}

.panel-group .panel-heading+.panel-collapse>.panel-body,
.panel-group .panel-heading+.panel-collapse>.list-group {
	border-top: none;
}

.domain-row {
	border: 1px solid #e4e4e4;
	border-radius: 8px;
	margin-top: 8px !important;
	padding: 10px 12px !important;
	background: #fdfefe;
}

.domain-row a {
	color: #0b5ed7;
	font-weight: 600;
}

.domain-row .buttons span,
.domain-row .buttons a span {
	opacity: 0.9;
}

.btn-default,
.btn-success {
	color: #f7fff7 !important;
	background-color: #2b8f56 !important;
	border-color: #1f6d42 !important;
}

.btn-default:hover,
.btn-success:hover {
	background-color: #309d5f !important;
	border-color: #1b5c37 !important;
	color: #f8fff8 !important;
}

.theme-dark .btn,
.theme-dark button,
.theme-dark input[type=submit],
.theme-dark .btn-default,
.theme-dark .btn-success {
	color: #0b1220 !important;
}

/* Dark mode */
.theme-dark body {
	background: #0b1220;
	color: #e6edf3;
	min-height: 100vh;
}

.theme-dark a {
	color: #8cc7ff;
}

.theme-dark a:hover {
	color: #b9dcff;
}

.theme-dark .bg {
	background: linear-gradient(135deg, #0e182b 0%, #0b1020 100%);
	min-height: 100vh;
}

.theme-dark .loginas {
	color: #cbd5e1;
}

.theme-dark .nav>li>a {
	color: #e6edf3;
}

.theme-dark .nav>li>a:hover,
.theme-dark .nav>li.open>a,
.theme-dark .nav>li>a:focus {
	color: #8cc7ff;
	background-color: rgba(255, 255, 255, 0.08);
}

.theme-dark .navbar-brand,
.theme-dark .navbar-brand a {
	color: #e6edf3;
}

.theme-dark .navbar-brand a:hover {
	color: #8cc7ff;
}

.theme-dark .btn,
.theme-dark button,
.theme-dark input[type=submit],
.theme-dark .btn-default,
.theme-dark .btn-success {
	background: #34b166 !important;
	border-color: #138243 !important;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
	color: #0b1220 !important;
}

.theme-dark .btn:hover,
.theme-dark button:hover,
.theme-dark input[type=submit]:hover,
.theme-dark .btn-default:hover,
.theme-dark .btn-success:hover {
	background: #3fc474 !important;
	color: #0b1220 !important;
}

.theme-dark .btn .glyphicon,
.theme-dark .btn a .glyphicon,
.theme-dark button .glyphicon {
	color: #0b1220 !important;
}

.theme-dark .btn:focus,
.theme-dark button:focus,
.theme-dark input[type=submit]:focus {
	outline: 2px solid #5ee696;
}

.theme-dark .dropdown-menu {
	background-color: #0f172a;
	border: 1px solid #1f2937;
}

.theme-dark .dropdown-menu>li>a {
	color: #e6edf3;
}

.theme-dark .dropdown-menu>li>a:hover,
.theme-dark .dropdown-menu>li>a:focus {
	color: #0b1220;
	background-color: #8cc7ff;
}

.theme-dark #nginx_tree .fancytree-container,
.theme-dark #nginx_tree .ui-widget-content,
.theme-dark #tree .fancytree-container,
.theme-dark #tree .ui-widget-content,
.theme-dark #fcgicache_tree .fancytree-container,
.theme-dark #fcgicache_tree .ui-widget-content {
	background: #0f1829 !important;
	color: #cbd5e1 !important;
	border-color: #1f2937 !important;
}

.theme-dark #nginx_tree .fancytree-container span.fancytree-title,
.theme-dark #tree .fancytree-container span.fancytree-title,
.theme-dark #fcgicache_tree .fancytree-container span.fancytree-title {
	color: #cbd5e1 !important;
}

.theme-dark #nginx_tree .fancytree-container .fancytree-hover span.fancytree-title,
.theme-dark #nginx_tree .fancytree-container .fancytree-active span.fancytree-title,
.theme-dark #nginx_tree .fancytree-container .fancytree-focused span.fancytree-title,
.theme-dark #nginx_tree .fancytree-container .fancytree-node:hover span.fancytree-title,
.theme-dark #tree .fancytree-container .fancytree-hover span.fancytree-title,
.theme-dark #tree .fancytree-container .fancytree-active span.fancytree-title,
.theme-dark #tree .fancytree-container .fancytree-focused span.fancytree-title,
.theme-dark #tree .fancytree-container .fancytree-node:hover span.fancytree-title,
.theme-dark .fancytree-container .ui-state-hover span.fancytree-title {
	background: #2b8f56 !important;
	color: #0b1220 !important;
	border-radius: 4px;
}

.theme-dark #nginx_tree .fancytree-container .fancytree-selected span.fancytree-title,
.theme-dark #tree .fancytree-container .fancytree-selected span.fancytree-title {
	background: transparent !important;
	color: #cbd5e1 !important;
}

.theme-dark .whf-tab-border,
.theme-dark .whf-head-bar,
.theme-dark .whf-sort-bar,
.theme-dark .whf-container,
.theme-dark .whf-container-light-blue,
.theme-dark .footer,
.theme-dark .panel,
.theme-dark .panel-heading,
.theme-dark .panel-body,
.theme-dark .panel-default,
.theme-dark .help-text,
.theme-dark #legende,
.theme-dark .jumbotron {
	background-color: #101827;
	color: #e6edf3;
	border-color: #1f2937;
	box-shadow: none;
}

.theme-dark .domain-page {
	background: radial-gradient(circle at 20% 20%, rgba(71, 85, 105, 0.08), transparent 45%), #0e1728;
	border: 1px solid #1c2b3f;
}

.theme-dark .domain-list {
	background: rgba(12, 22, 40, 0.8);
	border: 1px solid #1f2937;
}

.theme-dark .domain-panel {
	background: #0f1829;
	border-color: #1f2937;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.theme-dark .domain-panel .panel-heading {
	border-bottom: 1px solid #1f2937;
}

.theme-dark .domain-panel .panel-heading h4 {
	color: #35c35f;
}

.theme-dark .domain-row {
	background: #111c30;
	border-color: #1f2937;
}

.theme-dark .domain-row a {
	color: #8cc7ff;
}

.theme-dark .whf-container-light-blue {
	background-color: #0f1829;
}

.theme-dark .panel-heading {
	background-color: #0d1624;
}

.theme-dark .info {
	background: #102321;
	color: #b7f5d2;
	border: 1px solid #1f423f;
}

.theme-dark .danger {
	background: #2c1619;
	color: #f8d7da;
	border: 1px solid #a53a43;
}

.theme-dark input[type=text],
.theme-dark input[type=password],
.theme-dark input[type=submit],
.theme-dark input[type=email],
.theme-dark input[type=number],
.theme-dark select,
.theme-dark textarea,
.theme-dark button {
	background-color: #0f1829;
	color: #e6edf3;
	border: 1px solid #1f2937;
}

.theme-dark input[type=submit],
.theme-dark button {
	background-color: #1f7a4a;
	border-color: #18623a;
}

.theme-dark input[type=submit]:hover,
.theme-dark button:hover {
	background-color: #239a58;
}

.theme-dark ::placeholder {
	color: #94a3b8;
	opacity: 1;
}

.theme-dark table {
	color: #e6edf3;
}

.theme-dark .table>thead>tr>th,
.theme-dark .table>tbody>tr>th,
.theme-dark .table>tfoot>tr>th,
.theme-dark .table>thead>tr>td,
.theme-dark .table>tbody>tr>td,
.theme-dark .table>tfoot>tr>td {
	border-color: #1f2937;
}

.theme-dark .table-striped>tbody>tr:nth-of-type(odd) {
	background-color: #0e1625;
}

.theme-dark .table-striped>tbody>tr:nth-of-type(even) {
	background-color: #101b2d;
}

.theme-dark .nav-tabs li {
	background: #0f1829;
	border: 1px solid #1f2937;
	border-bottom: 2px solid #1f2937;
	box-shadow: none;
}

.theme-dark .nav-tabs>li a {
	color: #cbd5e1;
	border-top-left-radius: 18px;
	border-top-right-radius: 25px;
}

.theme-dark .nav-tabs>li.active a {
	color: #8cc7ff;
	background: #101827;
	font-weight: bold;
	border-top-right-radius: 25px;
	border-top-left-radius: 18px;
}

.theme-dark .nav-tabs>li>a:hover {
	background: #0f1829;
	color: #8cc7ff;
	text-decoration: none;
	border-top-right-radius: 25px;
	border-top-left-radius: 18px;
}

.theme-dark .pagination>li>a,
.theme-dark .pagination>li>span {
	background-color: #0f1829;
	border: 1px solid #1f2937;
	color: #e6edf3;
}

.theme-dark .pagination>li>a:hover,
.theme-dark .pagination>li>span:hover {
	background-color: #1b2945;
	color: #8cc7ff;
}

@media only screen and (max-width : 768px) {

	.hide-on-mobile {
		display: none;
	}

	nav {
		margin-bottom: 55px;
	}

	#navbar {
		margin-top: 30px;
	}

	.nav>li>a {
		padding: 10px;
		color: #000;
		background-color: #eee;
		font-size: 1.1em !important;
	}

	.dropdown-menu>li>a {
		padding: 15px;
		font-size: 1.3em !important;
	}

	span.buttons {
		position: absolute;
		top: -28px;
		right: 5px;
	}

	span.buttons span.glyphicon {
		padding: 10px;
	}

	.loginas {
		position: absolute;
		right: 9%;
		top: 95px;
		color: #fff;
	}

	.mobileDisable {
		display: none;
	}

	.theme-dark .nav>li>a {
		color: #e6edf3;
		background-color: #0f1829;
	}

	.theme-dark .nav>li>a:hover {
		color: #8cc7ff;
		background-color: #1b2945;
	}

	.theme-dark .dropdown-menu>li>a {
		background-color: #0f1829;
		color: #e6edf3;
	}

	.theme-dark .dropdown-menu>li>a:hover {
		color: #0b1220;
		background-color: #8cc7ff;
	}
}