/* dark copy made by dark-mode.php, don't edit, it's remade when the original changes */



:root {
	--app-sidebar-width: 240px;
	--app-topbar-height: 70px;
	--app-line-colour: #34383c;
}

#page-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1006;
	height: var(--app-topbar-height);
	background-color: #121212;
	border-bottom: 1px solid var(--app-line-colour);
}
#page-topbar .navbar-header {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}


.topbar-left {
	display: flex;
	align-items: center;
	height: 100%;
	min-width: 0;
}
.topbar-brand {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 var(--app-sidebar-width);
	width: var(--app-sidebar-width);
	height: 100%;
	padding: 0 20px 0 24px;
}
.topbar-brand img {
	display: block;
	max-height: 40px;
	max-width: 100%;
}

@media (min-width: 993px) {
	.topbar-brand-centre {
		justify-content: center;
		padding: 0 20px;
	}
}

.topbar-brand::after {
	content: "";
	position: absolute;
	right: 0;
	top: 25%;
	height: 50%;
	width: 1px;
	background-color: var(--app-line-colour);
}

.topbar-breadcrumb {
	min-width: 0;
	padding-left: calc(24px / 2 + 12px);
}
.topbar-breadcrumb .breadcrumb {
	margin: 0;
	padding: 0;
	font-size: calc(.825rem + 1px);
	background-color: transparent;
	flex-wrap: nowrap;
	white-space: nowrap;
}


.topbar-right {
	display: flex;
	align-items: center;
	height: 100%;
	padding-right: 24px;
}

.topbar-website {
	display: flex;
	align-items: center;
	margin-right: 24px;
	color: #889199;
	font-size: 1.6em;
}
.topbar-website:hover {
	color: #b5b9bd;
}
.topbar-profile {
	display: flex;
	align-items: center;
	color: #b5b9bd;
}
.topbar-profile:hover {
	color: #b5b9bd;
}
.topbar-avatar {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border: 1px solid var(--app-line-colour);
}

.account-badge {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	user-select: none;
}
.account-badge-large {
	width: 64px;
	height: 64px;
	border-width: 3px;
	font-size: 26px;
}
.account-badge-xl {
	width: 120px;
	height: 120px;
	border-width: 4px;
	font-size: 52px;
}
.topbar-badge {
	width: 40px;
	height: 40px;
	font-size: 18px;
}
.topbar-name {
	margin-left: 10px;
	font-size: 16px;
	font-weight: 400;
}
.topbar-logout {
	display: flex;
	align-items: center;
	margin-left: 24px;
	color: #889199;
	font-size: 15px;
}
.topbar-logout i {
	margin-right: 6px;
	font-size: 1.6em;
}


.vertical-menu {
	top: var(--app-topbar-height);
	border-right: 1px solid var(--app-line-colour);
	-webkit-box-shadow: none;
	box-shadow: none;
}


.mobilemenubg {
	z-index: 1010;
	overflow-y: auto;
}
.mobile-menu-top {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: var(--app-topbar-height);
	padding: 0 16px;
}
.mobile-menu-top .mobcross {
	font-size: 1.8em;
	cursor: pointer;
}
.mobile-menu-list {
	padding: 0 16px 24px 16px;
}
.mobile-menu-title {
	margin: 18px 4px 8px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	opacity: .8;
}
.mobile-menu-title:first-child {
	margin-top: 0;
}
.mobile-menu-item {
	display: flex;
	align-items: center;
	height: 52px;
	margin-bottom: 8px;
	padding: 0 16px;
	background-color: #121212;
	border-radius: .35rem;
	border-left: 4px solid transparent;
	font-size: 15px;
}
.mobile-menu-item i {
	width: 28px;
	margin-right: 10px;
	font-size: 1.5em;
}
.mobile-menu-item.active {
	font-weight: 600;
}


.page-title-action {
	margin-left: 24px;
	font-size: 15px;
}
.page-title-action + .page-title-action {
	margin-left: 8px;
}

.data-table-top,

.data-table-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}
.data-table-top {
	margin-bottom: 12px;
}
.data-table-box {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background-color: #121212;
	border-radius: .25rem;
	-webkit-box-shadow: 0 0 17px 0 rgba(130,122,122,0.1);
	box-shadow: 0 0 17px 0 rgba(130,122,122,0.1);
}

.data-table-box-search,
.data-table-add {
	margin-left: auto;
}
.data-table-box-spacer {
	flex: 0 0 0;
}
.data-table-bulk,
.data-table-search,
.data-table-per-page,
.data-table-paging {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.data-table-bulk .custom-select,
.data-table-per-page .custom-select {
	width: auto;
}

.data-table-per-page label {
	font-size: 15px;
}

.data-table-box .custom-select,
.data-table-box .form-control,
.data-table-box .btn,
.data-table-box .page-link {
	height: auto;
	padding-top: .6rem;
	padding-bottom: .6rem;
	font-size: 15px;
}

.data-table-search .input-group {
	width: 360px;
	max-width: 100%;
}
.data-table-search .dt-filter {
	width: auto;
	max-width: 100%;
}

.data-table-filters {
	margin-left: auto;
}

.data-table-add-group {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}
.data-table-add-group .data-table-add {
	margin-left: 0;
}
.data-table-add-link {
	white-space: nowrap;
}
.data-table-add-row {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}
.data-table-filter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.data-table-filter-form .dt-filter {
	width: auto;
	max-width: 100%;
}
.data-table-clear {
	white-space: nowrap;
}
.data-table-paging {
	gap: 18px;
}

.data-table-count {
	margin-top: 12px;
	color: #889199;
}
.data-table-card {
	margin-bottom: 12px;
}
.data-table {
	font-size: 15px;
}
.data-table th {
	white-space: nowrap;
	border-top: 0;
}
.data-table .data-table-row-actions {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}
.data-table td {
	vertical-align: middle;
}
.data-table .data-table-check {
	width: 36px;
}
.data-table-sort {
	color: inherit;
}
.data-table-sort i {
	vertical-align: middle;
	opacity: .5;
}
.data-table-sort.active i {
	opacity: 1;
}
.data-table-add {
	white-space: nowrap;
}


.footer {
	background-color: #121212;
	border-top: 1px solid var(--app-line-colour);
	color: #889199;
	text-align: center;
}


@media (max-width: 992px) {
	.topbar-brand {
		flex: 0 1 auto;
		width: auto;
		padding-left: 4px;
	}
	.topbar-brand::after {
		display: none;
	}
	.topbar-right {
		padding-right: 12px;
	}
	.topbar-logout {
		margin-left: 16px;
	}
	.topbar-website {
		margin-right: 16px;
	}
}


#sidebar-menu ul li a {
	padding: .8rem 1.5rem;
	-webkit-transition: none;
	transition: none;
}
#sidebar-menu ul li a:hover {
	padding-left: 1.5rem;
}
#sidebar-menu ul li ul.sub-menu li a {
	-webkit-transition: none;
	transition: none;
}
#sidebar-menu ul li ul.sub-menu li a:hover {
	padding-left: 3.25rem;
}

#sidebar-menu ul li a:hover i,
#sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li a.active i {
	opacity: 1;
}


.preview-box {
	border: 1px solid #363636;
}


.front-page h1 {
	font-size: 22px;
	margin-bottom: 16px;
}
.front-page h2 {
	font-size: 17px;
	margin: 20px 0 8px;
}
.contact-details {
	list-style: none;
	padding: 0;
	margin: 16px 0 24px;
}
.contact-details li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
}
.contact-details i {
	font-size: 20px;
}
.contact-sent,
.contact-problem {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
}
.contact-sent {
	background: #223527;
	color: #1e7b34;
}
.contact-problem {
	background: #2a1919;
	color: #b3261e;
}


.form-group .input-group-text {
	min-width: 48px;
	justify-content: center;
}
.form-group .input-group-text i {
	font-size: 18px;
}


.editor-field .tox-tinymce {
	border-radius: .25rem;
}


.contact-layout.has-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}
.contact-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.contact-stats .front-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 14px;
	border-radius: 10px;
	color: #121212;
}
.contact-stats .front-stat-figure {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
}
.contact-stats .front-stat-text {
	margin: 4px 0;
	font-size: 13px;
	font-weight: 600;
}
.contact-stats .front-stat-note {
	font-size: 11px;
	opacity: .75;
}
@media (max-width: 767px) {
	.contact-layout.has-stats {
		grid-template-columns: 1fr;
	}
	.contact-layout.has-stats .contact-main {
		order: -1;
	}
}
.auth-footer a {
	color: inherit;
}
.auth-footer p:last-child {
	margin-bottom: 0;
}


.mail-preview {
	display: block;
	width: 100%;
	border: 1px solid #2c3136;
	border-radius: 10px;
	background: #1d2022;
}
.mail-preview-live {
	height: calc(100vh - 460px);
	min-height: 420px;
}
.mail-sticky {
	position: sticky;
	top: 90px;
}