main.css

@import 'fonts.css';
@import 'basic.css';

/* Icons */
:root {
	--icon-logo: url("icons/logo.svg");
	--icon-profile: url("icons/profile_small.svg");
	--icon-security: url("icons/shield_small.svg");
	--icon-favorites: url("icons/favorites_small.svg");
	--icon-logout: url("icons/exit.svg");
	--icon-toggle-all: url("icons/chevron-right.svg");
	--icon-alert: url("icons/alert.svg");
	--icon-favorite: url("icons/favorite.svg");
	--icon-favorite--active: url("icons/favorite_active.svg");
	--icon-manual: url("icons/manual.svg");
	--icon-color-scheme: url("icons/color_scheme.svg");
	--icon-arrow-left: url("icons/arrow_left.svg");
	--icon-arrow-right: url("icons/arrow_right.svg");
	--icon-visible: url("icons/visible.svg");
	--icon-invisible: url("icons/invisible.svg");
	--icon-loading: url("icons/loading.svg");
}

html[data-color-scheme="dark"] {
	--icon-logo: url("icons/logo--dark.svg");
	--icon-profile: url("icons/profile_small--dark.svg");
	--icon-security: url("icons/shield_small--dark.svg");
	--icon-favorites: url("icons/favorites_small--dark.svg");
	--icon-logout: url("icons/exit--dark.svg");
	--icon-toggle-all: url("icons/chevron-right--dark.svg");
	--icon-alert: url("icons/alert--dark.svg");
	--icon-favorite: url("icons/favorite--dark.svg");
	--icon-favorite--active: url("icons/favorite_active--dark.svg");
	--icon-manual: url("icons/manual--dark.svg");
	--icon-color-scheme: url("icons/color_scheme--dark.svg");
	--icon-arrow-left: url("icons/arrow_left--dark.svg");
	--icon-arrow-right: url("icons/arrow_right--dark.svg");
	--icon-visible: url("icons/visible--dark.svg");
	--icon-invisible: url("icons/invisible--dark.svg");
	--icon-loading: url("icons/loading--dark.svg");
}

/* Account for the jump links bar */
html {
	scroll-padding-top: 36px;
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Body */
body {
	background: var(--body-bg);
	overflow-y: scroll;
}

body.popup {
	background: var(--content-bg);
}

/* Header */
#header {
	min-height: 40px;
	text-align: left;
	background: var(--header-bg);
}

#header h1 {
	position: absolute;
}

#header h1 a {
	display: block;
	height: 16px;
	padding: 12px 12px 12px 42px;
	background: var(--icon-logo) no-repeat 10px center;
	font-weight: 400;
}

#header h1 a .app-title {
	font-size: 17px;
	color: var(--header-text);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#header h1 a {
		font-weight: 300;
	}
}

#tmenu {
	display: flex;
	justify-content: flex-end;
}

#tmenu li {
	position: relative;
}

#tmenu a, #tmenu .profile button {
	margin: 0;
	padding: 13px 12px;
	display: inline-block;
}

#tmenu sup {
	position: absolute;
	top: 5px;
	left: 20px;
	font-size: .6rem;
	color: var(--header-bg);
	background: var(--header-text);
	padding: 2px;
	border-radius: 2px;
	text-indent: 0;
	font-weight: 400;
}

#tmenu .burger {
	display: none;
}

#tmenu .burger button {
	margin-right: -2px;
	padding: 8px 10px 9px;
	background: none;
	border: 0;
}

#tmenu .burger svg {
	margin-bottom: -1px;
	vertical-align: middle;
}

#tmenu .profile button {
	position: relative;
	cursor: pointer;
	font-size: .875rem;
	font-weight: 400;
	border: none;
	padding-right: 26px;
	background: url("icons/chevron-down.svg") right 9px top 14px no-repeat;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#tmenu .profile button {
		font-weight: 300;
	}
}

#tmenu a, #tmenu .profile button, #tmenu .burger button {
	color: var(--header-text);
	transition: background-color .3s ease;
}

#tmenu a:hover, #tmenu a.hover, #tmenu li:hover .profile button, #tmenu .active .profile button, #tmenu .burger button:hover {
	background-color: var(--header-bg-hover);
}

#tmenu ul.menu_level_1 {
	min-width: 150px;
	position: absolute;
	right: 6px;
	margin-top: 5px;
	background: var(--content-bg);
	border: 1px solid var(--content-border);
	box-shadow: 0 1px 6px rgba(0,0,0,.2);
	z-index: 2;
	color: var(--text);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}

#tmenu .active ul.menu_level_1 {
	opacity: 1;
	visibility: visible;
}

#tmenu ul.menu_level_1 li a {
	display: block;
	color: inherit;
	padding: 6px 20px 6px 40px;
	white-space: nowrap;
}

#tmenu ul.menu_level_1 li a:hover {
	background-color: var(--nav-hover-bg);
}

#tmenu ul.menu_level_1 .info {
	color: var(--info);
	padding: 15px 20px;
	border-bottom: 1px solid var(--border);
	line-height: 1.4;
	margin-bottom: 9px;
	white-space: nowrap;
}

#tmenu ul.menu_level_1 strong {
	color: var(--text);
	display: block;
}

#tmenu ul.menu_level_1:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	right: 9px;
	top: -14px;
	border: 7px solid transparent;
	border-bottom-color: var(--content-bg);
}

#tmenu ul.menu_level_1:after {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	position: absolute;
	top: -6px;
	right: 11px;
	border-top: 1px solid var(--content-border);
	border-right: 1px solid var(--content-border);
	transform: rotateZ(-45deg);
}

#tmenu ul.menu_level_1 .logout {
	margin-top: 9px;
	padding: 6px 0;
	border-top: 1px solid var(--border);
}

#tmenu .icon-alert, #tmenu .icon-favorite, #tmenu .icon-manual, #tmenu .icon-color-scheme {
	width: 16px;
	margin-bottom: -2px;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 28px; /* 16px width + 12px padding */
}

#tmenu .icon-alert {
	background: var(--icon-alert) center center no-repeat;
}

#tmenu .icon-favorite {
	background: var(--icon-favorite) center center no-repeat;
}

#tmenu .icon-favorite--active {
	background: var(--icon-favorite--active) center center no-repeat;
}

#tmenu .icon-manual {
	background: var(--icon-manual) center center no-repeat;
}

#tmenu .icon-color-scheme {
	background: var(--icon-color-scheme) center center no-repeat;
}

#tmenu .icon-profile {
	background: var(--icon-profile) 20px center no-repeat;
}

#tmenu .icon-security {
	background: var(--icon-security) 20px center no-repeat;
}

#tmenu .icon-favorites {
	background: var(--icon-favorites) 20px center no-repeat;
}

#tmenu .icon-logout {
	background: var(--icon-logout) 20px center no-repeat;
}

/* Container */
#container {
	display: flex;
	min-height: calc(100vh - 40px);
}

.popup #container {
	padding: 0;
	width: auto;
	min-height: 0;
	max-width: none;
}

/* Left */
#left {
	width: 220px;
	background: var(--nav-bg);
	display: flex;
	flex-direction: column;
}

#left .version {
	margin-top: 4em;
	padding: 15px 18px;
	font-size: .75rem;
	line-height: 1.4;
}

#left .version, #left .version a {
	color: var(--nav-group);
}

/* Main */
#main {
	width: calc(100% - 220px);
	display: flex;
	flex-direction: column;
}

.popup #main {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	display: initial;
}

#main .content {
	margin: 0 15px 15px;
}

#main .content {
	background: var(--content-bg);
	border: 1px solid var(--content-border);
}

.popup #main .content {
	margin: 0;
	border: 0;
	overflow: auto;
}

/* Navigation */
#tl_navigation {
	flex-grow: 1;
}

#tl_navigation .menu_level_0 {
	padding-top: 20px;
}

#tl_navigation .menu_level_0 > li:after {
	content: "";
	width: calc(100% - 30px);
	height: 1px;
	display: block;
	margin: 15px auto;
	background: var(--nav-separator);
}

#tl_navigation .menu_level_0 > li.last:after {
	display: none;
}

#tl_navigation .menu_level_0 a[class^="group-"] {
	display: block;
	margin: 0 15px;
	padding: 3px 3px 3px 22px;
	color: var(--nav-group);
	font-size: .75rem;
	text-transform: uppercase;
	font-weight: 500;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#tl_navigation .menu_level_0 a[class^="group-"] {
		font-weight: 400;
	}
}

#tl_navigation .group-favorites {
	background: url("icons/favorites_group.svg") 3px 2px no-repeat;
}

#tl_navigation .group-content {
	background: url("icons/content.svg") 3px 2px no-repeat;
}

#tl_navigation .group-design {
	background: url("icons/monitor.svg") 3px 2px no-repeat;
}

#tl_navigation .group-accounts {
	background: url("icons/person.svg") 3px 2px no-repeat;
}

#tl_navigation .group-system {
	background: url("icons/wrench.svg") 3px 2px no-repeat;
}

#tl_navigation .menu_level_1 {
	padding-top: 5px;
}

#tl_navigation [class^="menu_level_"] a {
	display: block;
	padding: 5px 33px 5px 37px;
	font-weight: 400;
	color: var(--nav);
	transition: color .2s ease;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#tl_navigation [class^="menu_level_"] a {
		font-weight: 300;
	}
}

#tl_navigation [class^="menu_level_"] > li.current > a {
	background-color: var(--nav-current);
	border-left: 4px solid var(--contao);
}

#tl_navigation .menu_level_1 > li.current > a {
	padding-left: 33px;
}

#tl_navigation .menu_level_2 a {
	padding-left: 49px;
}

#tl_navigation .menu_level_2 > li.current > a {
	padding-left: 45px;
}

#tl_navigation .menu_level_3 a {
	padding-left: 61px;
}

#tl_navigation .menu_level_3 > li.current > a {
	padding-left: 57px;
}

#tl_navigation .menu_level_4 a {
	padding-left: 73px;
}

#tl_navigation .menu_level_4 > li.current > a {
	padding-left: 69px;
}

#tl_navigation .menu_level_5 a {
	padding-left: 85px;
}

#tl_navigation .menu_level_5 > li.current > a {
	padding-left: 81px;
}

#tl_navigation .menu_level_2 a {
	font-size: .75rem;
}

#tl_navigation .menu_level_1 li.has-children:not(.first) {
	padding-top: 5px;
}

#tl_navigation .menu_level_1 li.has-children:not(.last) {
	padding-bottom: 5px;
}

#tl_navigation .menu_level_1 a:hover, #tl_navigation .menu_level_1 li.current > a {
	color: var(--nav-hover);
	background-color: var(--nav-current);
}

#tl_navigation .collapsed .menu_level_1 {
	display: none;
}

/* Buttons */
#tl_buttons {
	margin: 0;
	padding: 9px 15px;
	text-align: right;
}

.toggleWrap {
	cursor: pointer;
}

.opacity {
	-moz-opacity: .8;
	opacity: .8;
}

/* Data container */
#main_headline {
	margin: 18px 16px;
	font-size: 1.1rem;
	display: flex;
}

.popup #main_headline {
	display: none;
}

#main_headline span {
	display: inline-block;
	max-width: max-content;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 22px;
	flex: 1 0 0;
}

#main_headline span:nth-child(even) {
	font-weight: 400;
}

#main_headline span + span::before {
	content: "\A0› "; /* Non-breaking-space to prevent collapsing whitespace */
	font-weight: 600;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#main_headline span:nth-child(even) {
		font-weight: 300;
	}

	#main_headline span + span::before {
		font-weight: 500;
	}
}

h2.sub_headline {
	margin: 3px 18px;
	padding: 7px 0;
}

.label-info {
	color: var(--gray);
	padding-left: 3px;
}

.label-date {
	color: var(--gray);
	padding-right: 3px;
}

.tl_gerror {
	margin: 12px;
	padding: 3px 0 3px 22px;
	background: url("icons/error.svg") no-repeat left center;
}

.tl_error, .tl_confirm, .tl_info, .tl_new {
	margin: 0 0 1px;
	padding: 11px 18px 11px 32px;
	line-height: 1.3;
}

.tl_error {
	background: var(--error-bg) url("icons/error.svg") no-repeat 11px 12px;
}

.tl_confirm {
	background: var(--confirm-bg) url("icons/ok.svg") no-repeat 11px 12px;
}

.tl_info {
	background: var(--info-bg) url("icons/show.svg") no-repeat 11px 12px;
}

.tl_new {
	background: var(--new-bg) url("icons/featured.svg") no-repeat 11px 12px;
}

.tl_gerror, .tl_gerror a, .tl_error, .tl_error a {
	color: var(--red);
}

.tl_gerror a, .tl_error a {
	text-decoration: underline;
}

.tl_confirm, .tl_confirm a {
	color: var(--green);
}

.tl_info, .tl_info a {
	color: var(--blue);
}

.tl_new, .tl_new a {
	color: var(--orange);
}

.widget .tl_error, .widget .tl_confirm, .widget .tl_info, .widget .tl_new {
	padding: 8px 10px 8px 30px;
	background-position: 9px 9px;
}

.tl_error strong, .tl_confirm strong, .tl_info strong, .tl_new strong {
	color: inherit;
}

/* Filter */
.tl_panel, .tl_version_panel {
	padding: 4px 12px;
	background: var(--panel-bg);
	border-bottom: 1px solid var(--content-border);
	text-align: right;
}

.tl_version_panel {
	padding: 8px 12px;
}

.tl_panel .tl_select {
	text-align: left;
}

.tl_version_panel .tl_select {
	max-width: 280px;
}

.tl_version_panel .tl_submit {
	vertical-align: middle;
}

.tl_version_panel .tl_formbody {
	position: relative;
}

.tl_img_submit {
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
	text-indent: 16px; /* 16px width */
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	top: 9px;
	cursor: pointer;
}

.filter_apply {
	background: url("icons/filter-apply.svg") center center no-repeat;
}

.filter_reset {
	background: url("icons/filter-reset.svg") center center no-repeat;
}

.tl_subpanel {
	float: right;
	letter-spacing: -.31em;
}

.tl_subpanel * {
	letter-spacing: normal;
}

.tl_subpanel strong, .tl_search span {
	vertical-align: middle;
}

.tl_submit_panel {
	min-width: 32px;
	padding-left: 6px;
	padding-right: 3px;
}

.tl_panel .active, .tl_panel_bottom .active, #search .active {
	background-color: var(--active-bg);
}

.tl_filter {
	width: 100%;
}

.tl_filter .tl_select {
	max-width: 14.65%;
	margin-left: 3px;
}

.tl_submit_panel + .tl_filter {
	width: 86%;
}

.tl_limit {
	width: 22%;
}

.tl_limit .tl_select {
	width: 52%;
	margin-left: 3px;
}

.tl_search {
	width: 40%;
}

.tl_search .tl_select {
	width: 38%;
	margin-left: 3px;
	margin-right: 1%;
}

.tl_search .tl_text {
	width: 30%;
	margin-left: 1%;
	-webkit-appearance: textfield;
	box-sizing: content-box;
}

.tl_sorting {
	width: 26%;
}

.tl_sorting .tl_select {
	width: 60%;
	margin-left: 1%;
}

/* Jump targets */
.jump-targets {
	min-height: 30px;
	padding-top: 1px;
	background: var(--panel-bg);
	border-bottom: 1px solid var(--content-border);
	position: sticky;
	top: 0;
	z-index: 1;
}

.jump-targets .inner {
	overflow-x: scroll;
	scrollbar-width: none;
}

.jump-targets .inner::-webkit-scrollbar {
	display: none;
}

.jump-targets ul {
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.jump-targets li {
	display: inline-block;
	padding: 9px 10px;
	white-space: nowrap;
	font-size: .75rem;
}

.jump-targets button {
	padding: 0;
	background: none;
	border: none;
}

.jump-targets:before, .jump-targets:after {
	content: "";
	display: block;
	width: 10px;
	height: 100%;
	position: absolute;
	top: 0;
}

.jump-targets:before {
	background: linear-gradient(-90deg, transparent 0, var(--panel-bg) 50%);
}

.jump-targets:after {
	right: 0;
	background: linear-gradient(90deg, transparent 0, var(--panel-bg) 50%);
}

/* Boxes */
.tl_xpl {
	padding: 0 18px;
}

.tl_tbox, .tl_box {
	padding: 12px 0 25px;
	border-bottom: 1px solid var(--border);
}

.tl_tbox:last-child, .tl_box:last-child {
	border-bottom: 0;
}

.tl_box h3, .tl_tbox h3, .tl_xpl h3 {
	margin: 0;
	padding-top: 13px;
	height: 16px;
	font-size: .875rem;
}

.tl_box h4, .tl_tbox h4 {
	margin: 6px 0 0;
	padding: 0;
	font-size: .875rem;
}

.tl_tbox.theme_import {
	padding-left: 15px;
	padding-right: 15px;
}

.tl_tbox.theme_import h3, .tl_tbox.theme_import h4, .tl_tbox.theme_import p {
	line-height: 1.3;
}

.tl_help, .tl_help * {
	font-size: .75rem;
}

.tl_help, .tl_help a {
	margin-bottom: 0;
	line-height: 1.2;
	color: var(--info);
}

.tl_help a:hover, .tl_help a:focus, .tl_help a:active {
	text-decoration: underline;
}

#tl_buttons + .tl_edit_form .tl_formbody_edit {
	border-top: 1px solid var(--border);
}

.tl_formbody_submit {
	border-top: 1px solid var(--content-border);
	position: sticky;
	bottom: 0;
	z-index: 2;
}

.tl_submit_container {
	padding: 8px 12px;
	background: var(--panel-bg);
}

.tl_submit_container .tl_submit {
	margin: 2px 0;
}

/* Maintenance */
.maintenance_active {
	padding-top: 12px;
}

.maintenance_active, .maintenance_inactive {
	border-top: 1px solid var(--border);
}

.maintenance_inactive .tl_tbox {
	border: 0 !important;
	padding: 6px 15px 14px;
}

.maintenance_inactive .tl_message {
	margin: 0 15px 3px;
}

.maintenance_inactive h2.sub_headline {
	margin: 16px 15px 3px;
}

.maintenance_inactive .tl_submit_container {
	background: none;
	padding: 0 15px 24px;
	border: 0;
}

/* Crawler */
@keyframes crawl-progress-bar-stripes {
	0% {
		background-position-x: 1rem;
	}
}

#tl_crawl .tl_message {
	margin-bottom: 24px;
}

#tl_crawl .tl_message > p {
	padding-top: 0;
	padding-bottom: 0;
	background-color: transparent;
	background-position-y: center;
}

#tl_crawl .tl_tbox {
	margin-top: 0;
	padding-top: 0;
	padding-right: 0;
	padding-left: 0;
}

#tl_crawl .tl_checkbox_container {
	margin-top: 6px;
}

#tl_crawl .inner {
	position: relative;
	margin: 0 18px 18px;
}

#tl_crawl .progress {
	display: flex;
	height: 20px;
	background-color: var(--tree-header);
	border-radius: 2px;
}

#tl_crawl .progress-bar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: white;
	text-align: center;
	white-space: nowrap;
	background-size: 10px 10px;
}

#tl_crawl .progress-bar.running {
	background-color: var(--progress-running);
	background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
	animation: crawl-progress-bar-stripes 1s linear infinite;
}

#tl_crawl .progress-bar.finished {
	background-color: var(--progress-finished);
}

#tl_crawl .progress-count {
	margin: 6px 0 24px;
}

#tl_crawl .results h3 {
	font-size: .9rem;
	margin: 18px 0 9px;
}

#tl_crawl .results p {
	margin-bottom: 6px;
}

#tl_crawl .crawl-hint {
	margin-top: -2px;
	line-height: 1.3;
}

#tl_crawl .subscriber-log {
	display: none;
	padding: 5px 0;
	margin-bottom: 0;
}

#tl_crawl .wait {
	margin-top: 9px;
	color: var(--gray);
}

#tl_crawl .debug-log {
	display: none;
	margin-top: 11px;
}

#tl_crawl .results.running .show-when-finished, #tl_crawl .results.finished .show-when-running {
	display: none;
}

#tl_crawl .results.running .show-when-running, #tl_crawl .results.finished .show-when-finished {
	display: block;
}

#tl_crawl .result .summary.success {
	color: var(--green);
}

#tl_crawl .result .summary.failure {
	color: var(--red);
}

#tl_crawl .result .warning {
	display: none;
	color: var(--blue);
}

/* Two-factor */
.two-factor {
	border-top: 1px solid var(--border);
	padding-bottom: 9px;
}

.two-factor h2.sub_headline {
	margin: 18px 15px 3px;
}

.two-factor > p {
	margin: 0 15px 12px;
	line-height: 1.3;
}

.two-factor li {
	margin-left: 2em;
	list-style: initial;
}

.two-factor .qr-code {
	margin: 0 15px;
}

.two-factor .tl_listing_container {
	margin-top: 6px;
}

.two-factor .widget {
	height: auto;
	margin: 15px 15px 12px;
}

.two-factor .widget .tl_error {
	margin: 0;
	padding: 1px 0;
	background: none;
	font-size: .75rem;
	line-height: 1.25;
}

.two-factor .tl_submit_container {
	background: none;
	padding: 0 15px 10px;
	border: 0;
}

.two-factor .submit_container {
	clear: both;
	margin: 0 15px 12px;
}

.two-factor .tl_message {
	margin: 0 15px 12px;
}

.two-factor .tl_message > p {
	padding: 0 3px 0 27px;
	background-color: transparent;
	background-position: 3px center;
}

.two-factor .tl_backup_codes > p, .two-factor .tl_trusted_devices > p {
	margin: 0 15px 12px;
	line-height: 1.3;
}

.two-factor .backup-codes {
	max-width: 224px;
	margin: 15px 15px 24px;
	padding: 0;
	display: grid;
	grid-template-columns:repeat(2, 1fr);
}

.two-factor .backup-codes li {
	margin: 0;
	list-style: none;
}

.two-factor .tl_trusted_devices th, .two-factor .tl_trusted_devices td {
	line-height: 16px;
}

/* Picker search */
#search {
	margin: 18px 18px -9px;
	text-align: right;
}

#search .tl_text {
	max-width: 160px;
	-webkit-appearance: textfield;
	box-sizing: content-box;
}

/* Preview image */
.tl_edit_preview {
	margin-top: 18px;
}

.tl_edit_preview img {
	max-width: 100%;
	height: auto;
	padding: 2px;
	border: 1px solid var(--content-border);
	background: var(--white);
}

.tl_edit_preview_enabled {
	position: relative;
	cursor: crosshair;
	display: inline-block;
}

.tl_edit_preview_important_part {
	position: absolute;
	margin: -1px;
	border: 1px solid var(--black);
	box-shadow: 0 0 0 1px var(--white), inset 0 0 0 1px var(--white);
	opacity: 0.5;
}

/* Listing */
table.tl_listing {
	width: 100%;
}

.tl_listing_container {
	margin: 18px 0;
	padding: 0 15px;
}

#tl_buttons + .tl_listing_container, #tl_buttons + .tl_form .tl_listing_container {
	margin-top: 12px;
}

#paste_hint + .tl_listing_container {
	margin-top: 36px;
}

.tl_folder_list, .tl_folder_tlist {
	padding: 6px;
	border-bottom: 1px solid var(--border);
	background: var(--table-header);
	font-weight: 600;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.tl_folder_list, .tl_folder_tlist {
		font-weight: 500;
	}
}

.tl_folder_tlist {
	line-height: 16px;
	border-top: 1px solid var(--border);
}

.tl_file, .tl_file_list {
	position: relative;
	padding: 5px 6px;
	border-bottom: 1px solid var(--border);
	background: var(--content-bg);
}

.tl_file_list .ellipsis {
	height: 16px;
	text-overflow: ellipsis;
	overflow: hidden;
	padding-right: 18px;
	word-break: break-all;
}

.tl_right_nowrap {
	padding: 6px;
	vertical-align: top;
	text-align: right;
	white-space: nowrap;
}

.tl_listing.picker .tl_file, .tl_listing.picker .tl_folder, .tl_listing.picker .tl_right_nowrap, .tl_listing_container.picker .tl_content_header, .tl_listing_container.picker .tl_content {
	background-image: linear-gradient(90deg, transparent calc(100% - 26px), var(--tree-header) 26px);
}

.tl_listing.picker .tl_tree_checkbox, .tl_listing.picker .tl_tree_radio, .tl_listing_container.picker .tl_tree_checkbox, .tl_listing_container.picker .tl_tree_radio {
	margin-top: 2px;
	margin-left: 8px;
}

.tl_listing.picker .tl_tree_checkbox:disabled, .tl_listing.picker .tl_tree_radio:disabled, .tl_listing_container.picker .tl_tree_checkbox:disabled, .tl_listing_container.picker .tl_tree_radio:disabled {
	visibility: hidden;
}

.tl_listing_container.picker div[class^="ce_"] {
	padding-right: 24px;
}

.tl_listing_container.picker .limit_toggler {
	width: calc(100% - 26px);
}

/* List view */
.list_view .tl_listing img.theme_preview {
	margin-right: 9px;
}

.tl_show {
	width: 96%;
	margin: 18px 2%;
	padding: 9px 0 18px;
}

.tl_show + .tl_show {
	margin-top: 36px;
}

.tl_show th, .tl_show td {
	line-height: 16px;
	white-space: pre-line;
}

.tl_show td:first-child {
	width: 34%;
	white-space: normal;
}

.tl_show td p:last-of-type {
	margin-bottom: 0;
}

.tl_show small {
	display: block;
	color: var(--info);
}

.tl_label {
	margin-right: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.tl_label small {
	font-weight: 400;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.tl_label {
		font-weight: 500;
	}

	.tl_label small {
		font-weight: 300;
	}
}

.tl_empty {
	margin: 0;
	padding: 18px;
}

.tl_empty_parent_view {
	margin: 0;
	padding: 18px 0 0;
}

.tl_listing_container + .tl_empty {
	margin-top: -18px;
}

.tl_noopt {
	margin: 0 0 -1px;
}

.tl_select_trigger {
	margin-top: -9px;
	padding: 0 6px 3px 0;
	text-align: right;
}

.tl_radio_reset {
	margin-top: 6px;
	padding: 0 6px 3px 0;
	text-align: right;
}

.tl_select_label, .tl_radio_label {
	margin-right: 2px;
	color: var(--gray);
	font-size: .75rem;
}

/* Parent view */
.tl_header {
	margin-bottom: 18px;
	padding: 10px;
	background: var(--table-header);
}

.tl_header_table {
	line-height: 1.3;
}

.tl_content_header {
	padding: 7px 6px;
	border-bottom: 1px solid var(--border);
	background: var(--table-header);
	font-weight: 600;
}

.tl_header + .tl_content_header {
	border-top: 1px solid var(--border);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.tl_content_header {
		font-weight: 500;
	}
}

.as-grid .tl_content_header {
	margin-top: 24px;
	padding: 0 1px;
	border: 0;
	background-color: transparent;
	font-size: 1rem;
}

.tl_content {
	border-bottom: 1px solid var(--border);
	position: relative;
}

.tl_content .inside {
	padding: 6px;
	background-color: var(--content-bg);
}

.tl_content.draft .inside {
	min-height: 16px;
}

.tl_content.draft > *, .tl_folder.draft > *, .tl_file.draft > *, .hover-row.draft > td {
	opacity: 0.5;
}

.as-grid .tl_content {
	margin-top: 18px;
	padding: 0;
	border: 1px solid var(--border);
	background-color: var(--content-bg);
}

.as-grid .tl_content .inside {
	display: grid;
	grid-template-columns: 1fr auto;
}

.as-grid .tl_content_header + .tl_content {
	margin-top: 12px;
}

.parent_view > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.parent_view:not(.as-grid) > ul {
	background-color: var(--table-header);
}

.tl_content.indent_1 {
	margin-left: 20px;
}

.tl_content.indent_2 {
	margin-left: 40px;
}

.tl_content.indent_3 {
	margin-left: 60px;
}

.tl_content.indent_4 {
	margin-left: 80px;
}

.tl_content.indent_5 {
	margin-left: 100px;
}

.as-grid .tl_content .inside {
	padding: 0;
}

.as-grid .tl_content.indent {
	margin: 0;
	padding: 15px 15px 0;
	border-width: 0 1px;
	background: var(--nested-bg);
}

.as-grid .tl_content.indent_2 {
	padding-left: 30px;
	padding-right: 30px;
}

.as-grid .tl_content.indent_3 {
	padding-left: 45px;
	padding-right: 45px;
}

.as-grid .tl_content.indent_4 {
	padding-left: 60px;
	padding-right: 60px;
}

.as-grid .tl_content.indent_5 {
	padding-left: 75px;
	padding-right: 75px;
}

.as-grid .tl_content.indent_last {
	padding-bottom: 15px;
}

.as-grid .tl_content.indent .inside {
	border: 1px solid var(--border);
}

.as-grid .tl_content.wrapper_stop {
	margin-top: 0;
}

.as-grid .tl_content.indent.wrapper_stop {
	padding-top: 0;
}

.tl_content_left {
	line-height: 16px;
}

.as-grid .tl_content_left {
	padding: 8px 10px;
}

.tl_content_right {
	position: relative;
	z-index: 1;
	float: right;
	text-align: right;
	margin-left: 12px;
	margin-bottom: -1px;
}

.as-grid .tl_content .tl_content_right {
	order: 2;
	float: none;
	margin-left: 0;
	margin-bottom: 0;
	padding: 8px 10px;
	border-left: 1px solid var(--border);
	background: var(--table-header);
}

.tl_right button, .tl_content_right button {
	margin: 0;
	padding: 0;
	border: 0;
	height: 16px;
	background: none;
}

.cte_type {
	margin: 0 0 4px;
	font-size: .75rem;
	color: var(--info);
	line-height: 16px;
}

.as-grid .cte_type {
	order: 1;
	margin-bottom: 0;
	padding: 8px 10px;
	background-color: var(--table-header);
	font-size: .8rem;
}

.cte_type.published, .cte_type.published a {
	color: var(--green);
}

.cte_type.unpublished, .cte_type.unpublished a {
	color: var(--red);
}

.cte_type.icon-protected {
	padding-left: 27px;
	background: var(--table-header) url("icons/protected.svg") 8px center no-repeat;
}

.cte_type .visibility {
	color: var(--gray);
}

.cte_preview {
	line-height: 1.25;
	position: relative;
}

.cte_preview h1 {
	font-size: 1.25rem;
	margin-bottom: 6px;
}

.cte_preview h2 {
	font-size: 1rem;
	margin-bottom: 6px;
}

.cte_preview h3 {
	font-size: .9rem;
	margin-bottom: 6px;
}

.cte_preview h4, .cte_preview h5, .cte_preview h6 {
	font-size: .875rem;
	margin-bottom: 6px;
}

.cte_preview p, .cte_preview figure, .cte_preview ol, .cte_preview ul, .cte_preview table, .cte_preview div.tl_gray, .content-hyperlink, .content-toplink, .cte_preview table caption {
	margin-bottom: 6px;
}

.cte_preview img {
	max-width: 320px;
	height: auto;
	padding: 6px 0;
}

.cte_preview th, .cte_preview td {
	padding: 3px 6px;
	border-bottom: 1px solid var(--border);
}

.cte_preview th {
	padding: 6px;
	background: var(--table-header);
}

.cte_preview td {
	background: var(--content-bg);
}

.cte_preview table caption {
	text-align: left;
	font-size: .75rem;
}

.cte_preview pre {
	margin-top: 0;
	margin-bottom: 6px;
	word-break: break-all;
	white-space: pre-wrap;
}

.cte_preview pre.disabled {
	color: var(--pre-disabled);
}

.cte_preview .content-gallery ul {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	list-style: none;
}

.cte_preview a {
	color: var(--green);
}

.cte_preview div.tl_gray a {
	color: var(--gray);
}

.cte_preview span.comment {
	color: var(--blue);
	display: inline-block;
	margin-bottom: 3px;
}

.cte_preview input, .cte_preview select, .cte_preview textarea, .cte_preview button {
	background: var(--form-bg);
	border: 1px solid var(--form-border);
}

.cte_preview input[type="file"] {
	position: relative;
}

.cte_preview select {
	-moz-appearance: menulist;
	-webkit-appearance: menulist;
}

.cte_preview label, .cte_preview .checkbox_container legend, .cte_preview .radio_container legend {
	display: block;
	margin-bottom: 6px;
}

.cte_preview .widget {
	margin: 0 0 6px;
}

.cte_preview .checkbox_container label, .cte_preview .radio_container label {
	display: initial;
}

.cte_preview .widget-captcha {
	display: block !important;
}

.cte_preview .widget-captcha .captcha_text {
	padding-left: 3px;
	vertical-align: middle;
}

.cte_preview.empty {
	display: none;
}

.as-grid .cte_preview {
	order: 3;
	grid-column: 1 / span 2;
	padding: 10px 10px 6px;
	border-top: 1px solid var(--border);
}

/* Backwards compatibility */
.limit_height {
	overflow: hidden;
}

.limit_toggler {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: var(--content-bg);
	line-height: 11px;
	text-align: center;
}

.limit_toggler button {
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--content-bg);
	width: 24px;
	line-height: 8px;
	color: var(--gray);
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}

.limit_toggler button span {
	position: relative;
	top: -4px;
	z-index: 1;
}

/* Tree view */
.tl_folder_top {
	padding: 5px 6px;
	border: solid var(--tree-header-border);
	border-width: 1px 0;
	background: var(--tree-header);
}

.tl_folder {
	padding: 5px 6px;
	border-bottom: 1px solid var(--border);
	background: var(--table-header);
}

.tl_folder.tl_folder_dropping, .tl_folder_top.tl_folder_dropping {
	background-color: var(--drag-bg) !important;
	color: var(--text) !important;
}

.tl_folder.tl_folder_dropping a, .tl_folder_top.tl_folder_dropping a {
	color: inherit;
}

.tl_listing .tl_left {
	flex-grow: 1;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: normal;
}

.tl_listing .tl_left.tl_left_dragging {
	position: absolute;
	background: var(--drag-bg);
	border-radius: 10px;
	color: var(--text);
	padding: 5px 10px !important;
	margin-left: 0;
	text-indent: 0;
	white-space: nowrap;
}

.tl_listing .tl_left.tl_left_dragging .preview-image, .tl_listing .tl_left.tl_left_dragging a img {
	display: none;
}

.tl_listing .tl_left.tl_left_dragging a, .tl_listing .tl_left.tl_left_dragging .tl_gray {
	color: inherit;
}

.tl_listing_dragging .hover-div:not(.tl_folder):hover {
	background-color: transparent !important;
}

.tl_listing .tl_left * {
	vertical-align: text-top;
}

.tl_listing .tl_left a:hover {
	color: var(--text);
}

.tl_tree_xtnd .tl_file {
	padding-top: 5px;
	padding-bottom: 5px;
}

.tl_tree_xtnd .tl_file .tl_left img {
	margin-right: 2px;
}

.tl_file_manager .preview-image {
	max-width: 100px;
	max-height: 75px;
	width: auto;
	height: auto;
	margin: 0 0 2px 22px;
}

.tl_file_manager .preview-important {
	max-width: 80px;
	max-height: 60px;
	width: auto;
	height: auto;
	margin: 0 0 2px 0;
	vertical-align: bottom;
}

.tl_listing .tl_right {
	padding: 1px 0 0 9px;
	white-space: nowrap;
}

@-moz-document url-prefix() {
	.tl_listing .tl_right {
		padding-top: 0;
	}
}

.tl_listing, .tl_listing ul {
	margin: 0;
	padding: 0;
}

.tl_listing li {
	display: flex;
	margin: 0;
	list-style-type: none;
}

.tl_listing li.parent {
	display: inline;
	padding-left: 0;
	padding-right: 0;
}

label.tl_change_selected {
	margin-right: 2px;
	color: var(--gray);
	font-size: .75rem;
}

/* Breadcrumb */
#tl_breadcrumb {
	margin: 0 0 12px;
	padding: 4px 6px;
	display: flow-root;
	background: var(--active-bg);
	border: 1px solid var(--active-border);
	border-radius: 2px;
	line-height: 24px;
}

#tl_breadcrumb li {
	margin: 0;
	padding: 0 3px;
	list-style-type: none;
	float: left;
}

#tl_breadcrumb li a {
	display: inline-block;
}

#tl_breadcrumb li img {
	width: 16px;
	height: 16px;
	vertical-align: -3px;
}

/* Picker */
.selector_container {
	margin-top: 1px;
	position: relative;
}

.selector_container > ul {
	margin: 0 0 1px;
	padding: 0;
	list-style-type: none;
}

.selector_container > ul > li {
	margin: 0 9px 0 0;
	padding: 2px 0;
}

.selector_container p {
	margin-bottom: 1px;
}

.selector_container ul:not(.sgallery) img {
	margin-right: 1px;
	vertical-align: text-top;
}

.selector_container img {
	max-width: 320px;
	height: auto;
}

.selector_container .limit_height {
	height: auto !important;
	max-height: 190px;
}

.selector_container .limit_toggler {
	display: none;
}

.selector_container h1, .selector_container h2, .selector_container h3, .selector_container h4 {
	margin: 0;
	padding: 0;
}

.selector_container pre {
	white-space: pre-wrap;
}

.selector_container table.showColumns {
	margin: 2px 0 3px;
}

.selector_container table.sortable td {
	cursor: move;
}

ul.sgallery {
	display: flow-root;
}

ul.sgallery li {
	min-width: 100px;
	min-height: 75px;
	float: left;
	margin: 2px 4px 2px 0;
	padding: 0;
	background: var(--form-button);
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

/* Welcome screen */
.popup #tl_soverview {
	margin-top: 15px;
}

#tl_soverview > div {
	padding: 5px 15px;
	border-bottom: 1px solid var(--border);
}

#tl_soverview > div:last-child {
	border-bottom: 0;
}

#tl_messages h2, #tl_shortcuts h2 {
	margin: 14px 0 10px;
}

#tl_versions h2 {
	margin: 14px 0 12px;
}

#tl_messages p {
	margin-bottom: .5em;
}

#tl_messages p:last-child {
	margin-bottom: 1em;
}

#tl_messages .tl_error, #tl_messages .tl_confirm, #tl_messages .tl_info, #tl_messages .tl_new {
	padding: 0 0 0 21px;
	background-position: left 1px;
	background-color: transparent;
}

#tl_shortcuts p a {
	text-decoration: underline;
}

#tl_versions {
	margin-bottom: 0;
}

#tl_versions table {
	width: 100%;
	margin-bottom: 18px;
}

#tl_versions th, #tl_versions td {
	padding: 6px;
}

#tl_versions th {
	line-height: 16px;
}

#tl_versions td:first-child {
	white-space: nowrap;
}

#tl_versions td:last-child {
	width: 32px;
	white-space: nowrap;
	text-align: right;
}

#tl_versions .pagination {
	margin-top: 18px;
	margin-bottom: 14px;
	padding: 12px 6px;
	background: var(--table-header);
}

/* CHMOD table */
.tl_chmod {
	width: 100%;
}

.tl_chmod th {
	height: 18px;
	text-align: center;
	font-weight: 400;
	background: var(--tree-header);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.tl_chmod th {
		font-weight: 300;
	}
}

.tl_chmod td {
	text-align: center;
	background: var(--table-header);
}

.tl_chmod th, .tl_chmod td {
	width: 14.2857%;
	padding: 6px;
	border: 1px solid var(--content-bg);
}

/* Wizards */
.tl_modulewizard button, .tl_optionwizard button, .tl_key_value_wizard button, .tl_tablewizard button, .tl_listwizard button, .tl_checkbox_wizard button, .tl_metawizard button, .tl_sectionwizard button, .tl_image_size + button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	vertical-align: middle;
}

/* Module wizard */
.tl_modulewizard {
	width: 100%;
	max-width: 800px;
	margin-top: 2px;
}

.tl_modulewizard td {
	position: relative;
	padding: 0 3px 0 0;
}

.tl_modulewizard th {
	font-size: .75rem;
	font-weight: 400;
	padding: 0 6px 1px 0;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.tl_modulewizard th {
		font-weight: 300;
	}
}

.tl_modulewizard td:last-child {
	width: 1%;
	white-space: nowrap;
}

.tl_modulewizard .tl_select, .tl_modulewizard .tl_select_column {
	margin: 2px 0;
}

.tl_modulewizard input.mw_enable + button, .js .tl_modulewizard input.mw_enable {
	display: none;
}

.js .tl_modulewizard input.mw_enable + button {
	display: inline;
	width: 16px;
	height: 16px;
	background: var(--icon-invisible) 0 0 no-repeat;
}

.js .tl_modulewizard input.mw_enable:checked + button {
	background-image: var(--icon-visible);
}

.tl_modulewizard img.mw_enable {
	display: none;
}

.js .tl_modulewizard img.mw_enable {
	display: inline;
	margin-right: 1px;
}

/* Options and key/value wizard */
.tl_optionwizard {
	width: 100%;
	max-width: 600px;
}

.tl_key_value_wizard {
	width: 100%;
	max-width: 450px;
}

.tl_optionwizard, .tl_key_value_wizard {
	margin-top: 2px;
}

.tl_optionwizard label, .tl_key_value_wizard label {
	margin-right: 3px;
}

.tl_optionwizard td, .tl_key_value_wizard td {
	padding: 0 3px 0 0;
}

.tl_optionwizard th, .tl_key_value_wizard th {
	font-size: .75rem;
	font-weight: 400;
	padding: 0 6px 1px 0;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.tl_optionwizard th, .tl_key_value_wizard th {
		font-weight: 300;
	}
}

.tl_optionwizard td:nth-child(n+3), .tl_key_value_wizard td:nth-child(n+3) {
	width: 1%;
	white-space: nowrap;
}

.tl_optionwizard .tl_text {
	margin: 2px 0;
}

.tl_optionwizard img, .tl_key_value_wizard img {
	position: relative;
	top: 1px;
}

.tl_optionwizard .fw_checkbox, .tl_key_value_wizard .fw_checkbox {
	margin: 0 1px;
}

#ctrl_allowedAttributes {
	max-width: none;
}

#ctrl_allowedAttributes td:first-child {
	width: 100px;
}

/* Table wizard */
#tl_tablewizard {
	margin-top: 2px;
	padding-bottom: 2px;
	overflow: auto;
}

.tl_tablewizard td {
	padding: 0 3px 0 0;
}

.tl_tablewizard thead td {
	padding-bottom: 3px;
	text-align: center;
	white-space: nowrap;
}

.tl_tablewizard tbody td:last-child {
	white-space: nowrap;
}

.tl_tablewizard td.tcontainer {
	vertical-align: top;
}

.tl_tablewizard .tl_textarea {
	margin: 2px 0;
}

/* List wizard */
.tl_listwizard {
	margin: 1px 0;
	padding: 0;
	list-style: none;
}

.tl_listwizard .tl_text {
	width: 78%;
	margin: 2px 0;
}

/* Checkbox wizard */
.tl_checkbox_wizard .fixed {
	display: block;
	margin-top: 1px;
}

.tl_checkbox_wizard .sortable span {
	display: block;
}

.tl_checkbox_wizard .sortable img {
	vertical-align: bottom;
}

/* Meta wizard */
.tl_metawizard {
	margin: 3px 0;
	padding: 0;
	list-style: none;
}

.tl_metawizard li {
	margin-bottom: 2px;
	padding: 9px;
}

.tl_metawizard li:nth-child(odd) {
	background: var(--table-header);
}

.tl_metawizard li:nth-child(even) {
	background: var(--table-even);
}

.tl_metawizard label {
	float: left;
	width: 18%;
	margin-top: 9px;
}

.tl_metawizard .tl_text, .tl_metawizard .tl_textarea {
	float: left;
	width: calc(82% - 20px);
	margin: 1px 0;
}

.tl_metawizard .tl_textarea {
	resize: vertical;
}

.tl_metawizard .tl_text + a {
	position: relative;
	top: 7px;
	margin-left: 4px;
}

.tl_metawizard br {
	clear: left;
}

.tl_metawizard .lang {
	display: block;
	margin: 3px 0 9px;
	font-weight: 600;
	position: relative;
}

.tl_metawizard .lang button {
	position: absolute;
	right: 0;
	top: -1px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.tl_metawizard .lang {
		font-weight: 500;
	}
}

/* Section wizard */
.tl_sectionwizard {
	margin-top: 2px;
	width: 100%;
	max-width: 680px;
}

.tl_sectionwizard td {
	width: 25%;
	position: relative;
	padding: 0 3px 0 0;
}

.tl_sectionwizard th {
	font-size: .75rem;
	font-weight: 400;
	padding: 0 4px 1px 0;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.tl_sectionwizard th {
		font-weight: 300;
	}
}

.tl_sectionwizard td:last-child {
	white-space: nowrap;
}

/* Paste/sort hint */
#paste_hint {
	position: relative;
	z-index: 1;
}

.tl_message + #paste_hint {
	margin-top: -12px;
}

#paste_hint p {
	position: absolute;
	font-family: "Architects Daughter", cursive;
	font-size: 1rem;
	color: var(--paste-hint);
	top: 0;
	right: 30px;
	padding: 0 36px 24px 0;
	background: var(--icon-arrow-right) bottom right no-repeat;
	transform: rotate(-1deg);
}

.sort_hint {
	position: absolute;
	font-family: "Architects Daughter", cursive;
	font-size: 1rem;
	color: var(--paste-hint);
	top: -50px;
	left: 160px;
	padding: 0 6px 24px 42px;
	background: var(--icon-arrow-left) 6px bottom no-repeat;
	transform: rotate(-2deg);
}

.widget + .subpal .sort_hint {
	left: 260px;
}

.widget + .widget .sort_hint {
	left: 320px;
}

/* SERP preview */
.serp-preview {
	max-width: 600px;
	margin: 2px 0;
	padding: 7px 7px 3px;
	font-family: Arial, sans-serif;
	font-weight: 400;
	color: var(--serp-preview);
	background: var(--panel-bg);
	border-radius: 3px;
}

.serp-preview p {
	margin-bottom: 4px;
	line-height: 1.5;
}

.serp-preview .title {
	font-size: 18px;
	color: var(--serp-preview-title);
	line-height: normal;
}

.serp-preview .description:empty {
	display: none;
}

/* Ajax box */
#tl_ajaxBox {
	width: 300px;
	padding: 2em;
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	margin-left: -150px;
	background: var(--white) var(--icon-loading) no-repeat right 2em center;
	border: 2px solid var(--black);
	border-radius: 2px;
	font-size: 1rem;
	text-align: left;
}

#tl_ajaxOverlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: var(--white);
	opacity: 0.5;
}

/* Misc */
.ce_gallery ul {
	display: flow-root;
}

.ce_gallery li {
	float: left;
	margin: 0 6px 6px 0;
}

.drag-handle {
	cursor: move;
}

ul.sortable li {
	cursor: move;
	position: relative;
}

ul.sortable li .dirname {
	display: none;
}

ul.sortable li:hover .dirname {
	display: inline;
}

ul.sortable button {
	position: absolute;
	top: 0;
	right: 0;
	border: 0;
	border-radius: 2px;
	background: var(--form-button);
	margin: 0;
	padding: 0 0 3px;
	font-size: 22px;
	line-height: 9px;
	cursor: pointer;
	transition: all .1s linear;
}

ul.sortable button:hover {
	background: var(--form-button-hover);
}

ul.sortable button[disabled] {
	color: var(--gray);
	cursor: not-allowed;
}

ul.sortable button[disabled]:hover {
	background: rgba(255,255,255,.7);
}

#picker-menu {
	padding: 9px 6px 0;
	border-bottom: 1px solid var(--content-border);
}

#picker-menu > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#picker-menu li {
	display: inline-block;
	padding: 8px 0;
	background-color: var(--table-even);
	border: 1px solid var(--content-border);
	border-radius: 2px 2px 0 0;
	position: relative;
	top: 1px;
}

#picker-menu li:hover {
	background-color: var(--panel-bg);
}

#picker-menu li.current {
	background-color: var(--panel-bg);
	border-bottom-color: var(--panel-bg);
}

#picker-menu a {
	padding: 3px 12px 3px 32px;
	background: url("icons/manager.svg") 12px center no-repeat;
}

#picker-menu a:hover {
	color: var(--text);
}

#picker-menu a.pagePicker {
	background-image: url("icons/pagemounts.svg");
	background-size: 16px;
}

#picker-menu a.filePicker {
	background-image: url("icons/filemounts.svg");
	background-size: 14px;
}

#picker-menu a.articlePicker {
	background-image: url("icons/articles.svg");
	background-size: 16px;
}

#picker-menu a.close {
	background-image: url("icons/back.svg");
}

.ace_editor {
	padding: 3px;
	z-index: 0;
}

.ace_editor, .ace_editor * {
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
	font-size: .75rem !important;
	color: var(--text);
}

.ace-fullsize {
	overflow: hidden !important;
}

.ace-fullsize .ace_editor {
	position: fixed !important;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto !important;
	height: auto !important;
	margin: 0;
	border: 0;
	z-index: 10000;
}

div.mce-edit-area {
	width: 99.9%;
}

time[title] {
	cursor: help;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.foldable img {
	transition: transform .2s ease;
	transform: none;
	will-change: transform;
}

.foldable--open img {
	transform: rotateZ(90deg);
}

.foldable--loading {
	position: relative;
	pointer-events: none;
}

.foldable--loading img {
	visibility: hidden;
}

.foldable--loading::after {
	content: "";
	position: absolute;
	inset: 2px auto auto 2px;
	width: 14px;
	height: 14px;
	background: var(--icon-loading) 0 0/contain no-repeat
}

/* Default icon classes */
.header_icon, .header_clipboard, .header_back, .header_new, .header_rss, .header_edit_all, .header_delete_all,
.header_new_folder, .header_css_import, .header_theme_import, .header_store, .header_toggle, .header_sync {
	display: inline-block;
	padding: 3px 0 3px 21px;
	background-color: transparent;
	background-position: left center;
	background-repeat: no-repeat;
	border: none;
	margin-left: 15px;
}

.list_icon {
	margin-left: -3px;
	padding-left: 20px;
	background-position: left center;
	background-repeat: no-repeat;
}

.list_icon_new {
	width: 16px;
	background-position: 1px center;
	background-repeat: no-repeat;
}

/* Header icons */
.header_clipboard {
	background-image: url("icons/clipboard.svg");
}

.header_back {
	background-image: url("icons/back.svg");
}

.header_new {
	background-image: url("icons/new.svg");
}

.header_rss {
	background-image: url("icons/rss.svg");
}

.header_edit_all {
	background-image: url("icons/all.svg");
}

.header_new_folder {
	padding-left: 24px;
	background-image: url("icons/newfolder.svg");
}

.header_css_import {
	background-image: url("icons/cssimport.svg");
}

.header_theme_import {
	background-image: url("icons/theme_import.svg");
}

.header_store {
	padding-left: 18px;
	background-image: url("icons/store.svg");
}

.header_toggle {
	background-image: var(--icon-toggle-all);
}

.header_sync {
	background-image: url("icons/sync.svg");
}

/* Visual hint for TRBL fields - thanks to Eugene Rybyakov */
.tl_text_trbl, .tl_imageSize_0, .tl_imageSize_1, #ctrl_playerSize input {
	background: var(--form-bg) url("icons/hints.svg") no-repeat right 1px top 2px;
}

#ctrl_playerSize_1, .tl_imageSize_1 {
	background-position: right 1px top -28px !important;
}

.trbl_top {
	background-position: right 1px top -59px !important;
}

.trbl_right {
	background-position: right 1px top -89px !important;
}

.trbl_bottom {
	background-position: right 1px top -119px !important;
}

.trbl_left {
	background-position: right 1px top -149px !important;
}

#ctrl_shadowsize_top {
	background-position: right 1px top -179px !important;
}

#ctrl_shadowsize_right {
	background-position: right 1px top -209px !important;
}

#ctrl_shadowsize_bottom {
	background-position: right 1px top -238px !important;
}

#ctrl_shadowsize_left {
	background-position: right 1px top -269px !important;
}

#ctrl_borderradius_top {
	background-position: left -299px !important;
}

#ctrl_borderradius_right {
	background-position: right 1px top -329px !important;
}

#ctrl_borderradius_bottom {
	background-position: right 1px top -352px !important;
}

#ctrl_borderradius_left {
	background-position: left -382px !important;
}

/* Error messages */
label.error, legend.error, .tl_checkbox_container.error legend {
	color: var(--red);
}

.tl_tbox .tl_error, .tl_box .tl_error {
	background: none;
	padding: 0;
	margin-bottom: 0;
	font-size: .75rem;
}

.tl_formbody_edit > .tl_error {
	margin-top: 9px;
}

.broken-image {
	display: inline-block;
	padding: 12px 12px 12px 30px;
	background: var(--error-bg) url("icons/error.svg") no-repeat 9px center;
	color: var(--red);
	text-indent: 0;
}

/* Fieldsets */
fieldset.tl_tbox, fieldset.tl_box {
	margin-top: 5px;
	padding-top: 0;
	border-top: none;
	border-left: 0;
	border-right: 0;
	margin-inline: 0;
}

fieldset.tl_tbox.nolegend, fieldset.tl_box.nolegend {
	border-top: 0;
}

fieldset.tl_tbox > legend, fieldset.tl_box > legend {
	box-sizing: border-box;
	color: var(--legend);
	padding: 9px 12px 9px 28px;
	background: url("icons/navcol.svg") 13px 10px no-repeat;
	cursor: pointer;
}

fieldset.collapsed {
	margin-bottom: 0;
	padding-bottom: 5px;
}

fieldset.collapsed div {
	display: none !important;
}

fieldset.collapsed > legend {
	background: url("icons/navexp.svg") 13px 10px no-repeat;
}

/* Maintenance */
#tl_maintenance_cache table {
	width: 100%;
}

#tl_maintenance_cache td {
	line-height: 1.2;
	padding: 9px 6px;
}

#tl_maintenance_cache td span {
	color: var(--gray);
}

#tl_maintenance_cache td:first-child {
	width: 16px;
}

#tl_maintenance_cache .nw {
	white-space: nowrap;
}

#tl_maintenance_cache .tl_checkbox_container {
	margin-top: 3px;
}

#tl_maintenance_cache .tl_checkbox_container label {
	vertical-align: initial;
	font-weight: 600;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#tl_maintenance_cache .tl_checkbox_container label {
		font-weight: 500;
	}
}

/* Pagination */
.pagination {
	display: flow-root;
	background: var(--panel-bg);
	margin-bottom: 18px;
	border: solid var(--border);
	border-width: 1px 0;
	padding: 12px 15px;
}

.pagination ul {
	width: 60%;
	float: right;
	text-align: right;
}

.pagination p {
	width: 30%;
	float: left;
	margin-bottom: 0;
}

.pagination li {
	display: inline;
	padding-left: 3px;
}

.pagination .active {
	color: var(--gray);
}

.pagination-lp {
	margin-bottom: 0;
	border-bottom: 0;
	padding: 15px 12px;
}

/* File synchronization */
#result-list {
	margin: 15px;
}

#result-list .tl_error, #result-list .tl_confirm, #result-list .tl_info, #result-list .tl_new {
	padding: 3px 0;
	background: none;
}

/* DropZone */
.dropzone {
	margin: 2px 0;
	min-height: auto !important;
	border: 3px dashed var(--border) !important;
	border-radius: 2px;
	background: var(--form-bg) !important;
}

.dropzone-filetree {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: .8;
	z-index: 1;
}

.dropzone-filetree-enabled {
	display: block;
}

.dz-message span {
	font-size: 1.3125rem;
	color: var(--gray);
}

/* TinyMCE */
.tox-tinymce {
	margin: 3px 0;
	border-radius: 2px !important;
}

/* Undo */
.tl_undo_header {
	max-width: 880px;
	display: grid;
	grid-template-columns:2fr 2fr 3fr 3fr;
	grid-column-gap: 24px;
}

.hover-row:hover .tl_undo_header {
	background-color: var(--hover-row) !important;
}

.tl_undo_preview {
	margin-top: 5px;
	padding: 10px 15px;
	position: relative;
}

.tl_undo_preview td {
	padding-left: 0 !important;
	padding-right: 32px !important;
}

.tl_undo_preview td:empty {
	display: none;
}

.tl_undo_preview img {
	max-width: 320px;
	height: auto;
}

.tl_undo_preview {
	font-size: .75rem;
}

.tl_undo_preview .cte_preview h1 {
	font-size: 1.15rem;
}

.tl_undo_preview .cte_preview h2 {
	font-size: .9rem;
}

.tl_undo_preview .cte_preview h3 {
	font-size: .8rem;
}

.tl_undo_preview .cte_preview h4, .tl_undo_preview .cte_preview h5, .tl_undo_preview .cte_preview h6 {
	font-size: .775rem;
}


/* Tablet */
@media (max-width: 991px) {
	#container {
		display: block;
	}

	#main, #left {
		float: none;
	}

	#main {
		width: 100% !important;
		position: relative;
		transition: transform .2s ease;
		-webkit-transform: none;
		transform: none;
		will-change: transform;
	}

	.show-navigation #main {
		-webkit-transform: translateX(240px);
		transform: translateX(240px);
	}

	#left {
		visibility: hidden;
		position: absolute;
		top: 40px;
		width: 240px;
		transition: transform .2s ease, visibility .2s ease;
		-webkit-transform: translateX(-240px);
		transform: translateX(-240px);
		will-change: transform, visibility;
	}

	.show-navigation #left {
		visibility: visible;
		-webkit-transform: none;
		transform: none;
	}

	#tmenu .burger {
		display: inline;
	}
}

/* Handheld */
@media (max-width: 767px) {
	#header h1 a {
		min-width: 22px;
		padding: 12px;
	}

	#header h1 a .app-title {
		display: none;
	}

	#header h1 a .badge-title {
		margin-left: 32px;
	}

	#tmenu > li > a {
		width: 16px;
		margin-bottom: -2px;
		position: relative;
		overflow: hidden;
		white-space: nowrap;
		text-indent: 28px; /* 16px width + 12px padding */
		background-size: 18px !important;
	}

	#tmenu sup {
		top: 6px;
		font-size: .5rem;
	}

	#tmenu .icon-debug {
		background: url("icons/debug.svg") center center no-repeat;
	}

	#tmenu .icon-preview {
		background: url("icons/preview.svg") center center no-repeat;
	}

	#tmenu .profile button {
		width: 40px;
		margin: 0 0 -2px;
		padding-right: 12px;
		overflow: hidden;
		white-space: nowrap;
		text-indent: 28px; /* 16px width + 12px padding */
		background: url("icons/profile.svg") center center no-repeat;
		background-size: 18px;
	}

	#main .content {
		margin: 15px 10px;
	}

	#main_headline {
		margin: 13px 0;
		padding: 0 11px;
	}

	div.tl_tbox, div.tl_box {
		position: relative;
	}

	.tl_content_left {
		width: 100%;
		float: none;
	}

	.showColumns th, .showColumns td {
		display: block;
	}

	.showColumns th:empty {
		display: none;
	}

	.tl_label {
		white-space: normal;
	}

	.list_view .tl_listing img.theme_preview {
		display: none;
	}

	.tl_filter {
		box-sizing: border-box;
		padding: 0 3px 0 7px;
	}

	.tl_filter strong {
		display: none;
	}

	.tl_filter .tl_select {
		display: block;
		max-width: 100%;
	}

	.tl_search {
		width: 76%;
		max-width: 283px;
	}

	.tl_search .tl_select {
		width: 36%;
	}

	.tl_search .tl_text {
		width: 26%;
	}

	.tl_sorting {
		width: 60%;
		max-width: 212px;
	}

	.tl_limit {
		width: 50%;
		max-width: 177px;
	}

	.tl_submit_panel {
		float: right;
		z-index: 1;
	}

	input.tl_submit {
		margin-top: 3px;
		margin-bottom: 3px;
		padding-left: 6px !important;
		padding-right: 7px !important;
	}

	.tl_listing .tl_left, .tl_show td {
		word-break: break-word;
	}

	#tl_breadcrumb li {
		padding: 3px;
	}

	#tl_versions {
		display: none;
	}

	.tl_version_panel .tl_select {
		width: 44%;
	}

	.tl_modulewizard td:first-child {
		width: 1%;
	}

	.tl_modulewizard td:first-child .tl_select {
		max-width: 52vw;
	}

	#paste_hint, .sort_hint {
		display: none;
	}

	#tl_maintenance_cache table {
		width: 100%;
	}

	#tl_maintenance_cache tr th:last-child, #tl_maintenance_cache tr td:last-child {
		display: none;
	}

	.tl_file_list .ellipsis {
		padding-right: 10px;
	}

	.tl_undo_header {
		grid-template-columns:2fr 3fr;
	}

	.tl_undo_header div:not(.tstamp):not(.source) {
		display: none;
	}
}

/* Phones */
@media (max-width: 599px) {
	.tl_metawizard label {
		width: auto;
		float: none;
		font-size: .9em;
		display: block;
		margin-top: 3px;
	}

	.tl_metawizard .tl_text {
		width: 100%;
	}
}

@media (max-width: 479px) {
	.tl_modulewizard td:first-child .tl_select {
		max-width: 48vw;
	}
}