@charset "UTF-8";
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,table,th,td {
	font-family:'open sans',sans-serif;
	font-weight: normal;
	margin: 0;
	padding: 0;
	cursor: default;
}
body {background: #1a1a1a}
ul { list-style-type: none; }

h1 {
	font-size: 22px;
	font-weight: 300;
	padding: 20px;
	color: #444;
}

.trans-full {
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

[data-icon]:before {
	font-family: "tabler-icons" !important;
	content: attr(data-icon);
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
	font-family: "tabler-icons" !important;
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	line-height: 1;
	display: inline-block;
	min-width: 1em;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-menu:before {content:"\ea94"}
.icon-settings:before {content:"\eb20"}
.icon-remove:before {content:"\eb41"}
.icon-add:before {content:"\eb0b"}
.icon-save:before {content:"\eb62"}
.icon-dot:before {content:"\f671"}
.icon-edit:before {content:"\ea98"}
.icon-grid:before {content:"\edba"}
.icon-html:before {content:"\ebd0"}
.icon-list:before {content:"\eb6b"}
.icon-article:before {content:"\f1e2"}
.icon-users:before {content:"\ebf2"}
.icon-user:before {content:"\eb4d"}
.icon-logout:before {content:"\eba8"}
.icon-login:before {content:"\eba7"}

[class^="icon-"],
[class*=" icon-"] {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

a[class^="icon-"],
a[class*=" icon-"] {
	min-width: 16px;
	min-height: 16px;
}

.fl {float:left}
.fr {float:right}
.clear:after {content:'';display:block;clear:both}

.ml-10 {margin-left:10px}
.mr-10 {margin-right:10px}
.mt-10 {margin-top:10px}
.mb-10 {margin-bottom:10px}

.ml-15 {margin-left:15px}
.mr-15 {margin-right:15px}
.mt-15 {margin-top:15px}
.mb-15 {margin-bottom:15px}

.ml-20 {margin-left:20px}
.mr-20 {margin-right:20px}
.mt-20 {margin-top:20px}
.mb-20 {margin-bottom:20px}

.hidden {display:none!important}
.loading{cursor:wait!important}
.loading *{pointer-events:none}

.t-a-l {text-align:left}
.t-a-c {text-align:center}
.t-a-r {text-align:right}


.container-wrapper {font-size:12px;font-weight:300;padding:0 20px 20px 20px;color:#444}
.panel-wrapper .panel-heading {color:#93a8a8;background:#fafbfc;border:1px solid #dadfe3;border-top-right-radius:3px;position:relative;border-top-left-radius:3px;margin-bottom:-1px;min-height:50px}
.panel-wrapper .panel-heading h2 {color:#93a8a8;font-size:14px;font-weight:400;padding:15px;margin:0;text-transform:uppercase}
.panel-wrapper .panel-heading .tools {position:absolute;top:0;right:0}
.panel-wrapper .panel-heading .tools .filters {padding:11px 0}
.panel-wrapper .panel-heading .tools .filters select {font-size:12px;color:#000;padding:5px 10px;border-radius:2px;border:1px solid #9e9e9e}
.panel-wrapper .panel-heading .tools a {color:#93a8a8;font-size:20px;line-height:1;padding:14px;display:block;text-decoration:none}
.panel-wrapper .panel-heading .tools label {color:#93a8a8;font-size:12px;line-height:49px;padding:16px 20px}
.panel-wrapper .panel-body {color:#93a8a8;background:#fff;border:1px solid #dadfe3;border-bottom-right-radius:3px;border-bottom-left-radius:3px;padding:15px}
.panel-wrapper .panel-body .panel-row {display:table;width:100%;word-break:break-word}
.panel-wrapper .panel-body .panel-row input,.panel-wrapper .panel-body .panel-row select, .panel-wrapper .panel-body .panel-row textarea {font-size:12px;color:#000;width:100%!important;padding:5px 10px;border-radius:2px;border:1px solid #9e9e9e;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;outline:none}
.panel-wrapper .panel-body .panel-row input[disabled] {color:#d5d5d5;border-color:#d5d5d5;background:#eee}
.panel-wrapper .panel-body .panel-row textarea {min-height:65px}
.panel-wrapper .panel-body .panel-row input[type=file] {padding:3px}
.panel-wrapper .panel-body .panel-row label {color:#444;font-size:12px;margin-bottom:5px;display:block;font-weight:bold}
.panel-wrapper .panel-body .panel-row .panel-col {display:table-cell;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;vertical-align:top}
.panel-wrapper .panel-body .panel-row .panel-col.col-1 {width:100%}
.panel-wrapper .panel-body .panel-row .panel-col.col-2 {width:50%}
.panel-wrapper .panel-body .panel-row .panel-col.col-2:nth-child(1) {padding-right:10px}
.panel-wrapper .panel-body .panel-row .panel-col.col-2:nth-child(2) {padding-left:10px}
.panel-wrapper .panel-body .panel-row .panel-col.col-3 {width:33.33%}
.panel-wrapper .panel-body .panel-row .panel-col.col-3:nth-child(1) {padding-right:10px}
.panel-wrapper .panel-body .panel-row .panel-col.col-3:nth-child(2) {padding:0 10px}
.panel-wrapper .panel-body .panel-row .panel-col.col-3:nth-child(3) {padding-left:10px}
.panel-wrapper .panel-body .panel-row .panel-col.col-4 {width:25%}
.panel-wrapper .panel-body .panel-row .panel-col.col-5 {width:20%}
.panel-wrapper .panel-body .panel-row .panel-col.col-6 {width:16.66%}

.article-wrapper .panel-row.url strong {color:#444;font-size:12px;margin-right:5px}
.article-wrapper .panel-row.url a {color:#444;font-size:12px;margin-right:5px;text-decoration:none;margin-right:10px}
.article-wrapper .panel-row.url .link {background:#f0f0e5}
.article-wrapper .panel-row.image-preview .image {text-align:center;padding:5px;border:1px solid #9e9e9e;border-radius:2px}
.article-wrapper .panel-row.image-preview .image .img {position:relative;background:url(../img/preloader.gif) center center no-repeat}
.article-wrapper .panel-row.image-preview .image .img img {margin:5px;display:block;min-width:153px;min-height:153px;cursor:pointer;background:#fff}
.article-wrapper .panel-row.image-preview .image .img.selected img {border:5px solid #92d371;margin:0;border-radius:2px}
.article-wrapper .panel-row.image-preview .image .img .icon-remove,
.article-wrapper .panel-row.image-preview .image .img .media-remove {display:none;position:absolute;top:0;right:0;background:#d24d4d;color:#fff;width:25px;height:25px;line-height:28px;cursor:pointer}
.article-wrapper .panel-row.image-preview .image .img:hover .icon-remove,
.article-wrapper .panel-row.image-preview .image .img:hover .media-remove {display:block}

.progress-bar-wrapper {overflow:hidden;border-radius:2px;border:1px solid #9e9e9e;height:28px;padding:3px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.progress-bar{width:0%;height:100%;border-radius:2px;background-color:#5cb85c;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-size:40px 40px;-webkit-animation:progress-bar-animation 2s linear infinite;-moz-animation:progress-bar-animation 2s linear infinite;-ms-animation:progress-bar-animation 2s linear infinite;-o-animation:progress-bar-animation 2s linear infinite;animation:progress-bar-animation 2s linear infinite;-webkit-transition:width .6s ease;-moz-transition:width .6s ease;transition:width .6s ease}
@-webkit-keyframes progress-bar-animation{from{background-position:40px 0}to{background-position:0 0}}@-moz-keyframes progress-bar-animation{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-animation{from{background-position:0 0}to{background-position:40px 0}}@keyframes progress-bar-animation{from{background-position:40px 0}to{background-position:0 0}}

#main-wrapper {
	max-width: 1140px;
	margin: 0 auto;
	background: #f2f5f7;
	box-sizing: border-box;
}
#main-wrapper .table-wrapper {
	display: table;
	table-layout: fixed;
	width: 100%;
	box-sizing: border-box;
}
#main-wrapper .row {
	display: table-row;
}
#main-wrapper .top-navigation-wrapper {
	background: #313e3e;
	min-height: 50px;
	border-bottom: 1px solid #485a5a;
	box-sizing: border-box;
}
#main-wrapper .aside-wrapper {
	width: 240px;
	border-right: 1px solid #dadfe3;
	box-sizing: border-box;
	background: #f0f3f5;
	min-height: 100%;
	display: table-cell;
	vertical-align: top;
}
#main-wrapper .content-wrapper {
	box-sizing: border-box;
	background: #e6eaed;
	display: table-cell;
	vertical-align: top;
}
#main-wrapper .footer-wrapper {
	background: #f0f3f5;
	border-top: 1px solid #e3e8eb;
	line-height: 30px;
	padding: 5px 20px;
	font-size: 11px;
	box-sizing: border-box;
	text-align: center;
}
#main-wrapper .top-navigation-wrapper .logout {
	color: #fff;
	text-decoration: none;
	font-size: 22px;
	padding: 9px 13px;
	display: block;
}

#main-wrapper .aside-wrapper .user-info-wrapper .avatar {
	width: 30px;
	height: 30px;
	overflow: hidden;
	border-radius: 30px;
}
#main-wrapper .aside-wrapper .user-info-wrapper .user-name {
	line-height: 14px;
	color: #93a8a8;
}
#main-wrapper .aside-wrapper .user-info-wrapper {
	padding: 20px;
	line-height: 30px;
	font-size: 12px;
}
#main-wrapper .aside-wrapper .user-info-wrapper a {
	font-size: 13px;
	color: #313e3e;
	text-decoration: none;
}
#main-wrapper .aside-wrapper .user-info-wrapper a:hover {
	text-decoration: underline;
}
#main-wrapper .aside-wrapper .navigation-wrapper ul:last-child {
	margin-bottom: 100px;
	border-bottom: 1px solid #e3e8eb;
}
#main-wrapper .aside-wrapper .navigation-wrapper ul > li.header {
	color: #f0f3f5;
	background: #313e3e;
	display: block;
	padding: 14px 20px;
	font-size: 10px;
	border-top: 1px solid #d4d9dc;
	font-weight: 400;
	text-transform: uppercase;
}
#main-wrapper .aside-wrapper .navigation-wrapper ul > li > a {
	color: #5f7676;
	background: #f0f3f5;
	border-top: 1px solid #e3e8eb;
	display: block;
	padding: 14px 20px;
	font-size: 12px;
	text-decoration: none;
}
#main-wrapper .aside-wrapper .navigation-wrapper ul > li:hover > a {
	background: #f5f7f8;
	color: #313e3e;
}
#main-wrapper .aside-wrapper .navigation-wrapper ul > li.current > a {
	background: #95a5a6;
	color: #fff;
}



#tools-wrapper {
	padding: 0 20px;
	border-bottom: 1px solid #dadfe3;
}
#grid-wrapper {
	position: relative;
	padding: 20px;
	background: #f2f5f7;
}
#settings-form {display:none}
#settings-form .box-search-list {display:none}
#settings-form .static-box-list {display:none}

.ui-autocomplete {
	max-height: 260px;
	overflow-y: auto;
	overflow-x: hidden;
}

#tools-wrapper:after {
	content: '';
	display: block;
	clear: both;
}
#tools-wrapper .tabs:after {
	content: '';
	display: block;
	clear: both;
}
#tools-wrapper .tabs .tab {
	color: #93a8a8;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: -1px;
	border-radius: 2px 2px 0 0;
	border: 1px solid rgba(0, 0, 0, 0);
	position: relative;
	display: inline-block;
	padding: 10px 20px;
	font-size: 12px;
	text-decoration: none;
}
#tools-wrapper .tabs .tab:hover {
	color: #5f7676;
	border-bottom: 1px solid #dadfe3;
	background-color: rgba(0, 0, 0, 0.02);
}
#tools-wrapper .tabs .tab.selected {
	background-color: #f2f5f7;
	color: #313e3e;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border: 1px solid rgba(0, 0, 0, 0);
	box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.04), 1px 0px 0px 0px rgba(0, 0, 0, 0.04), 0px -1px 0px 0px rgba(0, 0, 0, 0.02), 0px -1px 1px 0px rgba(0, 0, 0, 0.02);
}
#tools-wrapper .sections {
	border: none;
	padding: 5px 10px;
}
#tools-wrapper .save-grid {
	display: none;
	padding: 5px 20px;
	background: #444;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
#tools-wrapper .delete-grid {
	padding: 5px 20px;
	background: #df4848;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
.master-group {
	padding: 0;
	background: #fff !important;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	margin-bottom: 20px;
}
.master-group:last-child {
	margin-bottom: 0;
}
.group-wrapper {
	margin: 0;
	padding: 0;
}
.group {
	background: rgba(255, 255, 255, 0.2) !important;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	z-index: 2;
	position: absolute;
}
.group .boxes {
	padding: 10px 0 0 10px;
	position: relative;
	width: 100% !important;
	height: calc(100% - 28px);
	box-sizing: border-box;
	font-size: 12px;
	overflow: hidden;
}
.master-group header {
	background: #34495e;
	padding: 5px 10px;
	color: #fff;
	cursor: move;
	font-size: 10px;
	position: relative;
	text-transform: uppercase;
}
.group > header {
	background: #5394c9;
}
.box > header {
	background: #37bf8d;
}
header > .icon-dot,
header > .layout-state-icon {
	color: #70e464;
	position: relative;
	margin-right: 5px;
	font-size: 10px;
	display: none;
}
.has-params > header > .icon-dot,
.has-params > header > .layout-state-icon {
	display: inline-block;
}
.box:hover > header > .icon-menu,
.group:hover > header > .icon-menu,
.master-group:hover > header > .icon-menu,
.box:hover > header > .layout-menu-trigger,
.group:hover > header > .layout-menu-trigger,
.master-group:hover > header > .layout-menu-trigger {
	opacity: 1;
}
.box > header > .icon-menu,
.group > header > .icon-menu,
.master-group > header > .icon-menu,
.box > header > .layout-menu-trigger,
.group > header > .layout-menu-trigger,
.master-group > header > .layout-menu-trigger {
	position: absolute;
	top: 5px;
	right: 4px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	line-height: 20px;
	opacity: 0;
	-moz-transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
.gs-resize-handle-both {
	-moz-transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
.box > header > .icon-menu:hover,
.group > header > .icon-menu:hover,
.master-group > header > .icon-menu:hover,
.box > header > .layout-menu-trigger:hover,
.group > header > .layout-menu-trigger:hover,
.master-group > header > .layout-menu-trigger:hover {
	color: #444;
}
.icon-menu.active,
.layout-menu-trigger.active {
	opacity: 1 !important;
}
.box > .info {
	display: block;
	padding: 5px;
	word-break: break-word;
	font-size: 10px;
}
.group .boxes .box {
	width: 85px;
	height: 85px;
	background: rgba(255, 255, 255, 0.2) !important;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.09);
	float: left;
	display: block;
	position: relative;
	margin: 0 10px 10px 0;
	box-sizing: border-box;
}
.preview-holder {
	border: none!important;
	border-radius: 0!important;
	background: #fff !important;
	opacity: 0.5 !important;
	position: absolute;
}
.group .boxes .ui-state-highlight {
	width: 85px;
	height: 85px;
	float: left;
	background: #fefefe;
	display: block !important;
	margin: 0 10px 10px 0;
	box-sizing: border-box;
}
.ui-state-highlight {
	background: #fefefe;
	display: block !important;
	margin: 0 10px 10px 0;
	box-sizing: border-box;
	width: 100%;
	height: 257px;
}
.ui-state-highlight:last-child {
	margin: 0;
}
#arrow-box {
	min-width: 155px;
	position: relative;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 5px;
	position: absolute;
	z-index: 9999;
	display: none;
}
#arrow-box:after, #arrow-box:before {
	bottom: 100%;
	left: 20px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
#arrow-box.rr:after, #arrow-box.rr:before {
	left: initial;
	right: 20px;
}

#arrow-box:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 5px;
	margin-left: -5px;
}
#arrow-box:before {
	border-color: rgba(68, 68, 68, 0);
	border-bottom-color: #ccc;
	border-width: 6px;
	margin-left: -6px;
}
#arrow-box a {
	display: block;
	color: #575757;
	font-size: 12px;
	text-decoration: none;
	padding: 5px 10px;
	border-radius: 3px;
	font-weight: 600;
	-moz-transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
	transition: background-color 0.3s;
}
#arrow-box a > i {
	display: inline-block;
	margin-right: 10px;
	position: relative;
	top: 1px;
}
#arrow-box hr {
	border: none;
	border-bottom: 1px solid #eee;
}
#arrow-box a:hover {
	background: #fafafa;
}

.section-list li .drag-handle {
    cursor: move;
    padding: 0 8px;
    user-select: none;
}

.panel-wrapper .panel-body ul li:first-child {
	border: 0;
	padding: 0 0 7px 0;
}
.panel-wrapper .panel-body ul li:last-child {
	padding: 7px 0 0 0;
}
.panel-wrapper .panel-body ul li {
	padding: 7px 0;
	line-height: 21px;
	border-top: 1px dashed #dadfe3;
}
.panel-wrapper .panel-body ul li a {
	color: #5f7676;
	font-size: 14px;
	text-decoration: none;
}
.panel-wrapper .panel-body ul li .html {
	display: none;
}
.panel-wrapper .panel-body ul li .section,
.panel-wrapper .panel-body ul li .section a {
	color: #93a8a8;
	font-size: 12px;
}
.panel-wrapper .panel-body ul li .date,
.panel-wrapper .panel-body ul li .date a {
	color: #93a8a8;
	font-size: 12px;
}
.panel-wrapper .panel-body ul li .tools .icon {
	border: 1px solid #dadfe3;
	border-radius: 3px;
	font-size: 12px;
	line-height: 9px;
	margin-left: 5px;
	padding: 5px;
	display: inline-block;
}
.panel-wrapper .panel-body ul li .tools .icon:hover {
	border-color: #aab0b5;
}
.panel-wrapper .panel-body ul li .tools .icon-edit {
	color: #80c8f9;
}
.panel-wrapper .panel-body ul li .tools .icon-edit:hover {
	color: #3498db;
}
.panel-wrapper .panel-body ul li .tools .icon-remove,
.panel-wrapper .panel-body ul li .tools .ti-trash,
.panel-wrapper .panel-body ul li .tools .ti-x {
	color: #f98080;
}
.panel-wrapper .panel-body ul li .tools .icon-remove:hover,
.panel-wrapper .panel-body ul li .tools .ti-trash:hover,
.panel-wrapper .panel-body ul li .tools .ti-x:hover {
	color: #db3434;
}
.panel-wrapper .panel-body ul li .tools .icon-dot,
.panel-wrapper .panel-body ul li .tools .status-toggle {
	color: #93a8a8;
}
.panel-wrapper .panel-body ul li .tools .icon-dot:hover,
.panel-wrapper .panel-body ul li .tools .status-toggle:hover {
	color: #61d759;
}
.panel-wrapper .panel-body ul li .tools .icon-dot.active,
.panel-wrapper .panel-body ul li .tools .status-toggle.active {
	color: #61d759;
}
.panel-wrapper .panel-body ul li .tools .icon-dot.active:hover,
.panel-wrapper .panel-body ul li .tools .status-toggle.active:hover {
	color: #93a8a8;
}

#static-html-form input[type=text] {
	box-sizing: border-box;
	width: 100%;
	min-width: 100%;
	margin-bottom: 10px;
	font-size: 12px;
	color: #333;
	padding: 5px;
	border: 1px solid #93a8a8;
}
#static-html-form textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	font-size: 12px;
	color: #333;
	padding: 5px;
	border: 1px solid #93a8a8;
}

.show-aside-menu #main-wrapper .aside-wrapper {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
	border-right: 1px solid #969696;
	box-shadow: 0 0 0 100vw rgba(51, 51, 51, 0.30);
}

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

	#main-wrapper .aside-wrapper {
		display: none;
	}
	#main-wrapper .content-wrapper {
		display: block;
	}
	
}

/* UniFi-like Minimal Backend Theme */
:root {
	--u-bg: #f3f7fb;
	--u-surface: #ffffff;
	--u-surface-muted: #f8fbfe;
	--u-line: #dde6ef;
	--u-line-strong: #cfdbe8;
	--u-text: #1f2f3d;
	--u-muted: #6d7f91;
	--u-accent: #2a93ff;
	--u-accent-soft: #e9f4ff;
	--u-danger: #e24b4b;
	--u-radius: 10px;
	--u-shadow: 0 8px 24px rgba(19, 37, 56, 0.08);
}

html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
button,
textarea,
p,
blockquote,
table,
th,
td {
	font-family: 'Manrope', 'Open Sans', sans-serif;
}

body {
	background: var(--u-bg);
	color: var(--u-text);
	font-weight: 500;
}

h1 {
	padding: 20px 24px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--u-text);
}

#main-wrapper {
	max-width: 1380px;
	margin: 14px auto;
	background: var(--u-surface);
	border: 1px solid var(--u-line);
	border-radius: 14px;
	box-shadow: var(--u-shadow);
	overflow: hidden;
}

#main-wrapper .top-navigation-wrapper {
	min-height: 54px;
	padding: 0 14px;
	background: #fdfefe;
	border-bottom: 1px solid var(--u-line);
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

#main-wrapper .top-navigation-wrapper .logout {
	color: #5f7285;
	padding: 8px 10px;
	font-size: 18px;
	border-radius: 8px;
	transition: color .2s ease, background-color .2s ease;
}

#main-wrapper .top-navigation-wrapper .logout:hover {
	color: var(--u-accent);
	background: var(--u-accent-soft);
}

#main-wrapper .aside-wrapper {
	width: 252px;
	background: #f9fcff;
	border-right: 1px solid var(--u-line);
}

#main-wrapper .aside-wrapper .user-info-wrapper {
	padding: 18px;
	border-bottom: 1px solid var(--u-line);
	background: #fdfefe;
}

#main-wrapper .aside-wrapper .user-info-wrapper .avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--u-line-strong);
}

#main-wrapper .aside-wrapper .user-info-wrapper .user-name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: #2e4052;
}

#main-wrapper .aside-wrapper .navigation-wrapper ul > li.header {
	background: transparent;
	color: #8092a3;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	padding: 14px 18px 8px;
	border-top: none;
}

#main-wrapper .aside-wrapper .navigation-wrapper ul > li > a {
	margin: 0 10px 4px;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #415668;
	border-radius: 8px;
	border: 1px solid transparent;
	background: transparent;
	transition: all .2s ease;
}

#main-wrapper .aside-wrapper .navigation-wrapper ul > li:hover > a {
	border-color: var(--u-line);
	background: #f2f8ff;
	color: #2b4860;
}

#main-wrapper .aside-wrapper .navigation-wrapper ul > li.current > a {
	border-color: #c7def7;
	background: var(--u-accent-soft);
	color: #1269c4;
}

#main-wrapper .content-wrapper {
	background: var(--u-bg);
}

#main-wrapper .footer-wrapper {
	background: #fdfefe;
	border-top: 1px solid var(--u-line);
	color: #8a9bad;
	font-size: 12px;
	padding: 10px 20px;
}

.container-wrapper {
	padding: 0 22px 22px;
	color: var(--u-text);
}

.panel-wrapper .panel-heading {
	background: var(--u-surface);
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius) var(--u-radius) 0 0;
	min-height: 52px;
}

.panel-wrapper .panel-heading h2 {
	padding: 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	color: #4f6376;
}

.panel-wrapper .panel-heading .tools a {
	color: #84a2be;
	font-size: 18px;
	padding: 16px;
	border-left: 1px solid #edf3f8;
	transition: color .2s ease, background-color .2s ease;
}

.panel-wrapper .panel-heading .tools a:hover {
	color: var(--u-accent);
	background: #f5f9ff;
}

.panel-wrapper .panel-body {
	background: var(--u-surface);
	border: 1px solid var(--u-line);
	border-radius: 0 0 var(--u-radius) var(--u-radius);
	padding: 16px;
}

.panel-wrapper .panel-body .panel-row input,
.panel-wrapper .panel-body .panel-row select,
.panel-wrapper .panel-body .panel-row textarea,
#static-html-form input[type=text],
#static-html-form textarea,
#tools-wrapper .sections,
.ui-dialog input,
.ui-dialog select,
.ui-dialog textarea {
	background: #fff;
	border: 1px solid var(--u-line-strong);
	border-radius: 8px;
	color: var(--u-text);
	font-size: 13px;
	padding: 8px 10px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.panel-wrapper .panel-body .panel-row input:focus,
.panel-wrapper .panel-body .panel-row select:focus,
.panel-wrapper .panel-body .panel-row textarea:focus,
#static-html-form input[type=text]:focus,
#static-html-form textarea:focus,
#tools-wrapper .sections:focus,
.ui-dialog input:focus,
.ui-dialog select:focus,
.ui-dialog textarea:focus {
	border-color: #7cbdfd;
	box-shadow: 0 0 0 3px rgba(42, 147, 255, 0.15);
	outline: none;
}

#tools-wrapper {
	background: #f8fbff;
	border-bottom: 1px solid var(--u-line);
	padding: 0 22px;
}

#tools-wrapper .tabs .tab {
	padding: 11px 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	color: #73879a;
	border-radius: 8px 8px 0 0;
	border: 1px solid transparent;
}

#tools-wrapper .tabs .tab.selected {
	background: #fff;
	border-color: var(--u-line);
	border-bottom-color: #fff;
	color: #3c5368;
}

#tools-wrapper .save-grid,
#tools-wrapper .delete-grid {
	padding: 8px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	border-radius: 8px 8px 0 0;
}

#tools-wrapper .save-grid {
	background: #4aa4ff;
	color: #fff;
}

#tools-wrapper .delete-grid {
	background: #f06f6f;
	color: #fff;
}

#grid-wrapper {
	background: #f3f7fb;
	padding: 20px;
}

.master-group,
.group,
.group .boxes .box {
	border-radius: 8px;
	border: 1px solid var(--u-line-strong);
	box-shadow: none;
}

.master-group {
	background: #fff !important;
	padding: 2px;
}

.group {
	background: #f9fcff !important;
}

.group .boxes {
	padding: 8px 0 0 8px;
	background: #f9fcff;
	border-radius: 0 0 8px 8px;
}

.group .boxes .box {
	background: #fff !important;
	width: 88px;
	height: 88px;
}

.master-group header,
.group > header,
.box > header {
	padding: 8px 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: 7px 7px 0 0;
	background: #eff5fc;
	color: #51687e;
}

.box > .info {
	padding: 7px;
	font-size: 10px;
	line-height: 1.35;
	color: #60768b;
}

#arrow-box {
	padding: 6px;
	border-radius: 10px;
	border: 1px solid var(--u-line-strong);
	background: #fff;
	box-shadow: var(--u-shadow);
}

#arrow-box a {
	padding: 6px 9px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 6px;
	color: #476078;
}

#arrow-box a:hover {
	background: var(--u-accent-soft);
	color: #1d6cbf;
}

.panel-wrapper .panel-body ul li {
	padding: 10px 0;
	border-top: 1px solid #edf3f8;
	line-height: 1.4;
}

.panel-wrapper .panel-body ul li a {
	font-size: 14px;
	font-weight: 600;
	color: #30485f;
}

.panel-wrapper .panel-body ul li .tools .icon {
	padding: 6px;
	line-height: 9px;
	border-radius: 7px;
	border: 1px solid var(--u-line);
	background: #fff;
}

.panel-wrapper .panel-body ul li .tools .icon:hover {
	border-color: #b9d7f7;
	background: #f2f8ff;
}

.ui-widget {
	font-family: 'Manrope', 'Open Sans', sans-serif;
	font-size: 13px;
}

.ui-widget-content {
	border: 1px solid var(--u-line);
	border-radius: 10px;
	background: #fff;
	color: var(--u-text);
}

.ui-dialog {
	border-radius: 12px;
	box-shadow: 0 18px 44px rgba(22, 36, 52, 0.18);
	overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar {
	padding: 11px 14px;
	background: #f6faff;
	border: none;
	border-bottom: 1px solid var(--u-line);
	color: #3f566d;
}

.ui-dialog .ui-dialog-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.ui-dialog .ui-dialog-titlebar-close {
	border: 1px solid var(--u-line);
	border-radius: 6px;
	background: #fff;
}

.ui-dialog .ui-dialog-content {
	padding: 14px;
	background: #fbfdff;
}

.ui-dialog .ui-dialog-buttonpane {
	padding: 10px 12px;
	border-top: 1px solid var(--u-line);
	background: #fff;
}

.ui-dialog .ui-dialog-buttonpane .ui-button {
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 700;
	color: #36516b;
	background: #f7fbff;
	border: 1px solid var(--u-line-strong);
	border-radius: 7px;
	transition: all .2s ease;
}

.ui-dialog .ui-dialog-buttonpane .ui-button:hover {
	border-color: #a8ccf2;
	background: #eef6ff;
	color: #24588d;
}

.ui-dialog .ui-dialog-buttonpane .ui-button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(42, 147, 255, 0.16);
}

.ui-menu {
	padding: 5px;
	border: 1px solid var(--u-line-strong);
	border-radius: 9px;
	box-shadow: 0 12px 28px rgba(20, 35, 52, 0.12);
	background: #fff;
}

.ui-menu .ui-menu-item-wrapper {
	padding: 7px 9px;
	border: none;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 600;
	color: #3e556b;
}

.ui-menu .ui-state-active,
.ui-menu .ui-menu-item-wrapper.ui-state-active {
	background: #edf6ff;
	color: #1e6ec2;
	margin: 0;
}

.ui-autocomplete {
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
}

.mobile-menu {
	margin: 10px;
	padding: 8px 11px;
	font-size: 11px;
	font-weight: 700;
	color: #3e5367;
	text-decoration: none;
	border-radius: 7px;
	border: 1px solid var(--u-line);
	background: #fff;
}

.show-aside-menu #main-wrapper .aside-wrapper {
	border-right: 1px solid var(--u-line-strong);
	box-shadow: 0 0 0 100vw rgba(27, 39, 51, 0.36);
}

@media screen and (max-width: 1100px) {
	#main-wrapper {
		margin: 0;
		max-width: none;
		border-radius: 0;
		box-shadow: none;
	}
	#main-wrapper .aside-wrapper {
		background: #fbfdff;
	}
}

/* Grid and TinyMCE refinements */
#layout-wrapper {
	max-width: 100%;
	min-width: 0;
}

#tools-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

#tools-wrapper .tabs {
	display: flex;
	gap: 4px;
	float: none;
}

#tools-wrapper .sections {
	min-width: 240px;
	margin-left: auto;
	float: none;
}

#tools-wrapper .save-grid,
#tools-wrapper .delete-grid {
	float: none;
	border-radius: 8px;
	line-height: 1;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#grid-wrapper,
#grid-wrapper .gridster,
#grid-wrapper .gridster ul,
#grid-wrapper .gridster li,
.master-group,
.group,
.group .boxes,
.group .boxes .box {
	box-sizing: border-box;
}

#grid-wrapper .gridster ul {
	margin: 0;
	padding: 0;
}

.master-group,
.group,
.group .boxes .box,
.group .boxes .ui-state-highlight {
	border-radius: 8px;
}

.master-group,
.group {
	min-width: 0;
	overflow: hidden;
}

.group .boxes .box,
.group .boxes .ui-state-highlight {
	width: 85px;
	height: 85px;
	margin: 0 10px 10px 0;
}

.master-group header,
.group > header,
.box > header {
	min-height: 28px;
	line-height: 1.1;
	display: flex;
	align-items: center;
	padding-right: 26px;
}

.box > header > .icon-menu,
.group > header > .icon-menu,
.master-group > header > .icon-menu,
.box > header > .layout-menu-trigger,
.group > header > .layout-menu-trigger,
.master-group > header > .layout-menu-trigger {
	right: 6px;
	top: 4px;
	font-size: 18px;
	color: #87a0b7;
}

.box > header > .icon-menu:hover,
.group > header > .icon-menu:hover,
.master-group > header > .icon-menu:hover,
.box > header > .layout-menu-trigger:hover,
.group > header > .layout-menu-trigger:hover,
.master-group > header > .layout-menu-trigger:hover {
	color: #2a93ff;
}

.group .boxes {
	overflow: auto;
	background-image: linear-gradient(0deg, rgba(42, 147, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(42, 147, 255, 0.04) 1px, transparent 1px);
	background-size: 24px 24px;
}

.group .boxes .box {
	overflow: hidden;
}

.box > .info {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.preview-holder {
	border: 1px dashed #8dc3f8 !important;
	background: rgba(42, 147, 255, 0.1) !important;
	opacity: 1 !important;
}

.article-wrapper .mce-tinymce,
.article-wrapper .mce-container,
.article-wrapper .mce-panel {
	border-color: #d2dfec !important;
	border-radius: 8px !important;
}

.article-wrapper .mce-tinymce {
	box-shadow: none;
	overflow: hidden;
	background: #fff;
}

.article-wrapper .mce-toolbar-grp {
	background: #f7fbff !important;
	border-bottom: 1px solid #dbe7f3 !important;
	padding: 4px !important;
}

.article-wrapper .mce-btn {
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 6px !important;
	box-shadow: none !important;
}

.article-wrapper .mce-btn:hover,
.article-wrapper .mce-btn:focus,
.article-wrapper .mce-btn.mce-active {
	background: #eaf4ff !important;
	border-color: #b9d7f7 !important;
}

.article-wrapper .mce-ico {
	color: #4d657d !important;
}

.article-wrapper .mce-edit-area iframe {
	background: #fff;
}

.article-wrapper .mce-statusbar {
	background: #fbfdff !important;
	border-top: 1px solid #dbe7f3 !important;
	color: #7a8ea3 !important;
}

@media screen and (max-width: 900px) {
	#tools-wrapper .sections {
		margin-left: 0;
		width: 100%;
	}
	#tools-wrapper .save-grid,
	#tools-wrapper .delete-grid {
		height: 30px;
	}
}

/* Extended jQuery UI theme overrides */
.ui-widget-overlay {
	background: rgba(27, 39, 51, 0.42) !important;
	opacity: 1 !important;
}

.ui-widget-header {
	background: #f6faff !important;
	border: 1px solid #dbe7f3 !important;
	color: #3f566d !important;
	font-weight: 700 !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	background: #f7fbff !important;
	border: 1px solid #d3e0ed !important;
	color: #3e556b !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	background: #eef6ff !important;
	border: 1px solid #b9d7f7 !important;
	color: #24588d !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	background: #e6f2ff !important;
	border: 1px solid #9cc8f6 !important;
	color: #1d6ec2 !important;
}

.ui-button,
button.ui-button,
input.ui-button {
	border-radius: 7px !important;
	box-shadow: none !important;
	font-family: 'Manrope', 'Open Sans', sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
	display: flex;
	gap: 8px;
}

.ui-dialog .ui-dialog-titlebar-close {
	width: 24px !important;
	height: 24px !important;
	right: 10px !important;
	top: 50% !important;
	margin-top: -12px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon {
	background-image: none !important;
	text-indent: 0 !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	font-size: 13px;
	line-height: 1;
	color: #5e748a;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon:before {
	content: 'x';
	font-weight: 700;
	text-transform: uppercase;
}

.ui-widget-overlay {
	z-index: 1000 !important;
}

.ui-dialog.ui-front {
	z-index: 1010 !important;
}

.ui-autocomplete.ui-front,
.ui-menu.ui-front {
	z-index: 1020 !important;
}

.ui-menu .ui-menu-item {
	margin: 0;
}

.ui-autocomplete .ui-menu-item-wrapper {
	white-space: normal;
	line-height: 1.3;
}

.ui-sortable-placeholder,
.placeholder {
	border: 1px dashed #9cc8f6 !important;
	background: rgba(42, 147, 255, 0.08) !important;
	visibility: visible !important;
}

/* Reference-inspired backend redesign */
:root,
html[data-theme="light"],
body[data-theme="light"] {
	--app-bg: #f3f4f7;
	--shell-bg: #ffffff;
	--shell-muted: #fafbfc;
	--panel-bg: #ffffff;
	--panel-soft: #fbfcfe;
	--line: #e6e9ef;
	--line-strong: #d9dee7;
	--text: #161c24;
	--text-soft: #798392;
	--text-dim: #9aa3af;
	--accent: #5b6cff;
	--accent-soft: rgba(91, 108, 255, 0.10);
	--accent-strong: #4455f5;
	--success: #2eaf67;
	--danger: #e05e5e;
	--shadow: 0 18px 44px rgba(16, 24, 40, 0.10);
	--card-shadow: 0 4px 18px rgba(16, 24, 40, 0.04);
	--radius-xl: 18px;
	--radius-lg: 14px;
	--radius-md: 10px;
	--radius-sm: 8px;
}

html[data-theme="dark"],
body[data-theme="dark"] {
	--app-bg: #5a5a5a;
	--shell-bg: #171a1f;
	--shell-muted: #1d2128;
	--panel-bg: #191d23;
	--panel-soft: #20252d;
	--line: #2a313b;
	--line-strong: #343c48;
	--text: #f2f5f8;
	--text-soft: #9da7b4;
	--text-dim: #707b89;
	--accent: #7b88ff;
	--accent-soft: rgba(123, 136, 255, 0.14);
	--accent-strong: #8f9aff;
	--success: #57c886;
	--danger: #f07b7b;
	--shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
	--card-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

html,
body,
input,
textarea,
button,
select {
	font-family: 'Manrope', 'Open Sans', sans-serif;
}

html,
body {
	background: var(--app-bg);
	color: var(--text);
	min-height: 100%;
}

body {
	transition: background-color .2s ease, color .2s ease;
}

h1 {
	padding: 24px 24px 12px;
	font-size: 18px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.02em;
}

#main-wrapper {
	max-width: 1420px;
	margin: 28px auto;
	background: var(--shell-bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow);
	overflow: hidden;
}

#main-wrapper .table-wrapper {
	display: block;
	width: 100%;
}

#main-wrapper .row {
	display: flex;
	align-items: stretch;
	min-height: 720px;
}

#main-wrapper .top-navigation-wrapper {
	min-height: 70px;
	padding: 0 20px;
	background: var(--shell-bg);
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}

#main-wrapper .aside-wrapper {
	width: 238px;
	background: var(--shell-muted);
	border-right: 1px solid var(--line);
	display: block;
	min-height: 100%;
	flex: 0 0 238px;
}

#main-wrapper .content-wrapper {
	background: var(--panel-soft);
	flex: 1 1 auto;
	min-width: 0;
	padding-bottom: 28px;
}

#main-wrapper .footer-wrapper {
	padding: 12px 24px;
	line-height: 1.4;
	font-size: 11px;
	text-align: center;
	background: var(--shell-bg);
	border-top: 1px solid var(--line);
	color: var(--text-dim);
}

#main-wrapper .top-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	float: none;
}

.top-search {
	width: 260px;
	padding: 0 12px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel-soft);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
}

.top-search i {
	color: var(--text-dim);
	font-size: 15px;
}

.top-search input {
	border: 0;
	background: transparent;
	color: var(--text);
	width: 100%;
	font-size: 12px;
	outline: none;
	padding: 0;
}

.theme-switcher {
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel-soft);
	display: inline-flex;
	gap: 4px;
}

.theme-toggle-button,
.logout,
input[type=submit],
input[type=button],
button,
.button-like {
	appearance: none;
	border: 1px solid var(--line);
	background: var(--panel-bg);
	color: var(--text);
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	height: 38px;
	padding: 0 14px;
	box-sizing: border-box;
	transition: all .2s ease;
	text-decoration: none;
	cursor: pointer;
}

.theme-toggle-button {
	width: 38px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.theme-toggle-button.active {
	border-color: transparent;
	background: var(--accent);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.logout {
	width: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.theme-toggle-button:hover,
.logout:hover,
input[type=submit]:hover,
input[type=button]:hover,
button:hover,
.button-like:hover {
	border-color: var(--line-strong);
	background: var(--panel-soft);
	color: var(--text);
}

input[type=submit] {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	min-width: 112px;
}

input[type=submit]:hover {
	background: var(--accent-strong);
	border-color: var(--accent-strong);
	color: #fff;
}

.mobile-menu {
	float: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel-soft);
	color: var(--text);
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	margin: 0;
}

#main-wrapper .aside-wrapper .user-info-wrapper {
	padding: 22px 20px;
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1.2;
	font-size: 12px;
	background: var(--shell-bg);
}

.brand-badge {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--accent-soft);
	color: var(--accent);
	border: 1px solid rgba(91, 108, 255, 0.12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex: 0 0 38px;
}

#main-wrapper .aside-wrapper .user-info-wrapper .user-name {
	color: var(--text);
	display: flex;
	flex-direction: column;
	gap: 3px;
	line-height: 1.2;
}

#main-wrapper .aside-wrapper .user-info-wrapper .user-name strong {
	font-size: 14px;
	font-weight: 700;
}

#main-wrapper .aside-wrapper .user-info-wrapper .user-name span {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-soft);
}

#main-wrapper .aside-wrapper .navigation-wrapper {
	padding: 14px 12px 24px;
}

#main-wrapper .aside-wrapper .navigation-wrapper ul {
	margin-bottom: 18px;
	border: 0;
}

#main-wrapper .aside-wrapper .navigation-wrapper ul:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

#main-wrapper .aside-wrapper .navigation-wrapper ul > li.header {
	padding: 10px 10px 8px;
	background: transparent;
	color: var(--text-dim);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	border-top: 0;
	text-transform: uppercase;
}

#main-wrapper .aside-wrapper .navigation-wrapper ul > li > a {
	padding: 11px 12px;
	margin-bottom: 4px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: var(--text-soft);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: all .2s ease;
}

#main-wrapper .aside-wrapper .navigation-wrapper ul > li > a i {
	font-size: 16px;
	color: var(--text-dim);
}

#main-wrapper .aside-wrapper .navigation-wrapper ul > li:hover > a,
#main-wrapper .aside-wrapper .navigation-wrapper ul > li.current > a {
	background: var(--panel-bg);
	border-color: var(--line);
	color: var(--text);
	box-shadow: var(--card-shadow);
}

#main-wrapper .aside-wrapper .navigation-wrapper ul > li:hover > a i,
#main-wrapper .aside-wrapper .navigation-wrapper ul > li.current > a i {
	color: var(--accent);
}

.container-wrapper {
	padding: 0 24px 24px;
	font-size: 12px;
	font-weight: 500;
	color: var(--text);
}

.panel-wrapper {
	margin-bottom: 20px;
}

.panel-wrapper .panel-heading {
	min-height: 58px;
	margin-bottom: -1px;
	border: 1px solid var(--line);
	border-radius: 14px 14px 0 0;
	background: var(--panel-bg);
	color: var(--text-soft);
	box-shadow: var(--card-shadow);
}

.panel-wrapper .panel-heading h2 {
	padding: 19px 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.panel-wrapper .panel-heading .tools {
	height: 58px;
	display: flex;
	align-items: center;
	gap: 8px;
	right: 14px;
	top: 0;
}

.panel-wrapper .panel-heading .tools a,
.panel-wrapper .panel-heading .tools .icon-add,
.panel-wrapper .panel-heading .tools .icon-save {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel-soft);
	color: var(--text-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 16px;
	line-height: 1;
	box-sizing: border-box;
}

.panel-wrapper .panel-heading .tools a:hover {
	color: var(--accent);
	border-color: var(--line-strong);
	background: var(--accent-soft);
}

.panel-wrapper .panel-heading .tools .filters {
	padding: 0;
	margin: 0;
	float: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.panel-wrapper .panel-heading .tools .filters select,
.panel-wrapper .panel-heading .tools label,
.panel-wrapper .panel-body .panel-row input,
.panel-wrapper .panel-body .panel-row select,
.panel-wrapper .panel-body .panel-row textarea,
#static-html-form input[type=text],
#static-html-form textarea,
#tools-wrapper .sections {
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel-bg);
	color: var(--text);
	font-size: 13px;
	font-weight: 500;
	box-sizing: border-box;
	outline: none;
	transition: all .2s ease;
}

.panel-wrapper .panel-body .panel-row textarea,
#static-html-form textarea {
	min-height: 110px;
	height: auto;
	padding: 12px;
	line-height: 1.55;
	resize: vertical;
}

.panel-wrapper .panel-heading .tools .filters select:focus,
.panel-wrapper .panel-body .panel-row input:focus,
.panel-wrapper .panel-body .panel-row select:focus,
.panel-wrapper .panel-body .panel-row textarea:focus,
#static-html-form input[type=text]:focus,
#static-html-form textarea:focus,
#tools-wrapper .sections:focus,
.top-search:focus-within {
	border-color: rgba(91, 108, 255, 0.35);
	box-shadow: 0 0 0 4px rgba(91, 108, 255, 0.10);
}

.panel-wrapper .panel-body {
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 0 0 14px 14px;
	background: var(--panel-bg);
	color: var(--text);
	box-shadow: var(--card-shadow);
}

.panel-wrapper .panel-body .panel-row {
	display: table;
	width: 100%;
	word-break: break-word;
}

.panel-wrapper .panel-body .panel-row label {
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.panel-wrapper .panel-body ul li {
	padding: 12px 0;
	border-top: 1px solid var(--line);
	line-height: 1.5;
}

.panel-wrapper .panel-body ul li:first-child {
	padding-top: 0;
	border-top: 0;
}

.panel-wrapper .panel-body ul li:last-child {
	padding-bottom: 0;
}

.panel-wrapper .panel-body ul li a {
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.panel-wrapper .panel-body ul li .section,
.panel-wrapper .panel-body ul li .section a,
.panel-wrapper .panel-body ul li .date,
.panel-wrapper .panel-body ul li .date a {
	color: var(--text-soft);
	font-size: 12px;
	font-weight: 500;
}

.panel-wrapper .panel-body ul li .tools .icon,
.section-wrapper .section-list li .tools a {
	width: 32px;
	height: 32px;
	margin-left: 6px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel-soft);
	color: var(--text-soft);
	font-size: 15px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.panel-wrapper .panel-body ul li .tools .icon:hover,
.section-wrapper .section-list li .tools a:hover {
	color: var(--accent);
	border-color: var(--line-strong);
	background: var(--accent-soft);
}

.panel-wrapper .panel-body ul li .tools .icon-dot.active,
.panel-wrapper .panel-body ul li .tools .icon-dot,
.panel-wrapper .panel-body ul li .tools .status-toggle.active,
.panel-wrapper .panel-body ul li .tools .status-toggle,
header > .icon-dot,
header > .layout-state-icon {
	color: var(--success);
}

.article-wrapper .panel-row.url strong,
.article-wrapper .panel-row.url a,
.article-wrapper .panel-row.url .tools {
	color: var(--text-soft);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

.article-wrapper .panel-row.url .link {
	background: var(--panel-soft);
	border-radius: 8px;
	padding: 4px 8px;
	color: var(--text);
}

.article-wrapper .panel-row.image-preview .image {
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--panel-soft);
	text-align: left;
}

.article-wrapper .panel-row.image-preview .image .img img {
	margin: 0;
	min-width: 153px;
	min-height: 153px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--panel-bg);
}

.article-wrapper .panel-row.image-preview .image .img {
	margin: 0 10px 10px 0;
	background: transparent;
}

.article-wrapper .panel-row.image-preview .image .img.selected img {
	border: 2px solid var(--accent);
	margin: 0;
	box-shadow: 0 0 0 4px var(--accent-soft);
}

.article-wrapper .panel-row.image-preview .image .img .icon-remove,
.article-wrapper .panel-row.image-preview .image .img .media-remove {
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(12, 18, 26, 0.72);
	color: #fff;
	line-height: 28px;
	text-align: center;
}

.progress-bar-wrapper {
	overflow: hidden;
	height: 12px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--panel-soft);
}

.progress-bar {
	background-color: var(--accent);
	background-image: linear-gradient(45deg, rgba(255,255,255,0.16) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.16) 75%, transparent 75%, transparent);
	background-size: 24px 24px;
}

#tools-wrapper {
	padding: 0 24px;
	background: transparent;
	border-bottom: 0;
	margin-bottom: 18px;
	gap: 12px;
}

#tools-wrapper .tabs {
	padding-top: 2px;
	gap: 8px;
}

#tools-wrapper .tabs .tab,
#tools-wrapper .save-grid,
#tools-wrapper .delete-grid {
	height: 38px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel-bg);
	color: var(--text-soft);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	text-transform: none;
	box-shadow: var(--card-shadow);
}

#tools-wrapper .tabs .tab.selected {
	background: var(--accent-soft);
	border-color: rgba(91, 108, 255, 0.22);
	color: var(--accent);
	box-shadow: none;
}

#tools-wrapper .delete-grid {
	color: #fff;
	background: var(--danger);
	border-color: var(--danger);
}

#tools-wrapper .sections {
	background: var(--panel-bg);
	box-shadow: var(--card-shadow);
}

#grid-wrapper {
	padding: 0 24px 24px;
	background: transparent;
}

.master-group,
.group,
.group .boxes .box {
	border: 1px solid var(--line);
	background: var(--panel-bg) !important;
	box-shadow: var(--card-shadow);
	border-radius: 14px;
}

.master-group header,
.group > header,
.box > header {
	min-height: 34px;
	padding: 10px 14px;
	border-radius: 13px 13px 0 0;
	background: var(--panel-soft);
	color: var(--text-soft);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--line);
}

.box > .info {
	padding: 10px;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-soft);
}

.group .boxes {
	padding: 10px 0 0 10px;
	background: transparent;
	background-image: none;
}

#arrow-box {
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--panel-bg);
	box-shadow: var(--shadow);
}

#arrow-box a {
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-soft);
	display: flex;
	align-items: center;
	gap: 10px;
}

#arrow-box a:hover {
	background: var(--panel-soft);
	color: var(--text);
}

#arrow-box hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 6px 0;
}

.section-list li .drag-handle {
	padding: 0 10px 0 0;
	color: var(--text-dim);
	font-size: 16px;
}

.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: 'Manrope', 'Open Sans', sans-serif;
}

.ui-widget-content,
.ui-dialog,
.ui-menu,
.ui-autocomplete {
	background: var(--panel-bg);
	color: var(--text);
	border-color: var(--line) !important;
}

.ui-dialog {
	border-radius: 16px;
	box-shadow: var(--shadow);
}

.ui-dialog .ui-dialog-titlebar {
	background: var(--panel-soft) !important;
	border-bottom: 1px solid var(--line) !important;
	color: var(--text) !important;
}

.ui-dialog .ui-dialog-content,
.ui-dialog .ui-dialog-buttonpane,
.ui-menu,
.ui-autocomplete {
	background: var(--panel-bg) !important;
	color: var(--text) !important;
}

.article-wrapper .mce-tinymce,
.article-wrapper .mce-container,
.article-wrapper .mce-panel {
	border-color: var(--line) !important;
	background: var(--panel-bg) !important;
}

.article-wrapper .mce-toolbar-grp,
.article-wrapper .mce-statusbar {
	background: var(--panel-soft) !important;
	border-color: var(--line) !important;
}

.article-wrapper .mce-btn {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--text-soft) !important;
}

.article-wrapper .mce-btn:hover,
.article-wrapper .mce-btn.mce-active {
	background: var(--accent-soft) !important;
	border-color: rgba(91, 108, 255, 0.22) !important;
	color: var(--accent) !important;
}

.article-wrapper .mce-ico,
.article-wrapper .mce-caret {
	color: var(--text-soft) !important;
	border-top-color: var(--text-soft) !important;
}

body[data-theme="dark"] .top-search input::placeholder,
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
	color: #6f7987;
}

body[data-theme="dark"] .article-wrapper .panel-row.image-preview .image .img .icon-remove,
body[data-theme="dark"] .article-wrapper .panel-row.image-preview .image .img .media-remove {
	background: rgba(6, 10, 16, 0.84);
}

@media screen and (max-width: 1100px) {
	#main-wrapper {
		margin: 0;
		max-width: none;
		border-radius: 0;
		box-shadow: none;
	}
	#main-wrapper .row {
		display: block;
	}
	#main-wrapper .aside-wrapper {
		width: 280px;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 1030;
		transform: translateX(-100%);
		transition: transform .2s ease;
	}
	.show-aside-menu #main-wrapper .aside-wrapper {
		transform: translateX(0);
	}
	#main-wrapper .content-wrapper {
		display: block;
	}
	#main-wrapper .top-navigation-wrapper {
		padding: 0 14px;
	}
	.top-search {
		display: none;
	}
	.mobile-menu.hidden {
		display: inline-flex !important;
	}
}

/* TinyMCE Tabler icons */
.article-wrapper .mce-ico,
.article-wrapper .mce-btn-small .mce-ico {
	font-family: 'tabler-icons' !important;
	font-size: 17px !important;
	line-height: 16px !important;
	font-weight: 400 !important;
	text-shadow: none !important;
	background: none !important;
}

.article-wrapper .mce-i-newdocument:before {
	content: "\eb0b" !important;
}

.article-wrapper .mce-i-undo:before {
	content: "\eb77" !important;
}

.article-wrapper .mce-i-redo:before {
	content: "\eb78" !important;
}

.article-wrapper .mce-i-forecolor:before,
.article-wrapper .mce-i-backcolor:before {
	content: "\eb61" !important;
}

.article-wrapper .mce-i-bold:before {
	content: "\eb7b" !important;
}

.article-wrapper .mce-i-italic:before {
	content: "\eb93" !important;
}

.article-wrapper .mce-i-underline:before {
	content: "\eba2" !important;
}

.article-wrapper .mce-i-alignleft:before {
	content: "\ea09" !important;
}

.article-wrapper .mce-i-aligncenter:before {
	content: "\ea07" !important;
}

.article-wrapper .mce-i-alignright:before {
	content: "\ea0a" !important;
}

.article-wrapper .mce-i-alignjustify:before {
	content: "\ea08" !important;
}

.article-wrapper .mce-i-bullist:before {
	content: "\eb6b" !important;
}

.article-wrapper .mce-i-numlist:before {
	content: "\ef11" !important;
}

.article-wrapper .mce-i-outdent:before {
	content: "\eb91" !important;
}

.article-wrapper .mce-i-indent:before {
	content: "\eb92" !important;
}

.article-wrapper .mce-i-link:before {
	content: "\eade" !important;
}

.article-wrapper .mce-i-image:before {
	content: "\eb0a" !important;
}

.article-wrapper .mce-listbox .mce-caret,
.article-wrapper .mce-menubtn .mce-caret {
	border-top-color: var(--text-soft) !important;
}

/* TinyMCE dialogs and floating menus */
.mce-window,
.mce-floatpanel,
.mce-menu {
	border: 1px solid var(--line) !important;
	border-radius: 14px !important;
	background: var(--panel-bg) !important;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
	overflow: hidden !important;
	font-family: 'Manrope', 'Open Sans', sans-serif !important;
}

.mce-window-head,
.mce-floatpanel .mce-container-body,
.mce-menu-item,
.mce-menu,
.mce-window .mce-container-body {
	background: var(--panel-bg) !important;
}

.mce-window-head {
	border-bottom: 1px solid var(--line) !important;
	padding: 14px 16px !important;
}

.mce-window-head .mce-title {
	color: var(--text) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	font-family: 'Manrope', 'Open Sans', sans-serif !important;
}

.mce-close,
.mce-close i {
	color: var(--text-soft) !important;
	transition: color .2s ease, background .2s ease !important;
	border-radius: 8px !important;
}

.mce-close:hover,
.mce-close:focus {
	color: var(--text) !important;
	background: var(--accent-soft) !important;
}

.mce-window-body {
	padding: 16px !important;
	background: var(--panel-bg) !important;
}

.mce-window-body .mce-label,
.mce-window-body label,
.mce-window-body .mce-text {
	color: var(--text-soft) !important;
	font-family: 'Manrope', 'Open Sans', sans-serif !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	letter-spacing: .02em !important;
}

.mce-window-body .mce-textbox,
.mce-window-body .mce-listbox button,
.mce-window-body .mce-combobox input,
.mce-window-body .mce-combobox button {
	height: 40px !important;
	border: 1px solid var(--line) !important;
	border-radius: 10px !important;
	background: var(--panel-bg) !important;
	color: var(--text) !important;
	box-shadow: none !important;
	font-family: 'Manrope', 'Open Sans', sans-serif !important;
}

.mce-window-body .mce-textbox,
.mce-window-body .mce-combobox input {
	padding: 0 12px !important;
}

.mce-window-body .mce-listbox button,
.mce-window-body .mce-combobox button {
	padding: 0 12px !important;
}

.mce-window-body .mce-textbox:focus,
.mce-window-body .mce-listbox button:focus,
.mce-window-body .mce-combobox input:focus,
.mce-window-body .mce-combobox button:focus {
	border-color: rgba(91, 108, 255, 0.4) !important;
	box-shadow: 0 0 0 4px rgba(91, 108, 255, 0.12) !important;
}

.mce-window-body .mce-listbox .mce-caret,
.mce-window-body .mce-menubtn .mce-caret,
.mce-menu-item .mce-caret {
	border-top-color: var(--text-soft) !important;
	border-left-color: var(--text-soft) !important;
}

.mce-foot {
	background: var(--panel-soft) !important;
	border-top: 1px solid var(--line) !important;
	padding: 12px 16px !important;
}

.mce-foot .mce-btn {
	height: 40px !important;
	border: 1px solid var(--line) !important;
	border-radius: 10px !important;
	background: var(--panel-bg) !important;
	box-shadow: none !important;
}

.mce-foot .mce-btn button {
	color: var(--text) !important;
	font-family: 'Manrope', 'Open Sans', sans-serif !important;
	font-weight: 600 !important;
}

.mce-foot .mce-primary {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
}

.mce-foot .mce-primary button {
	color: #fff !important;
}

.mce-menu-item {
	padding: 8px 12px !important;
	transition: background .2s ease, color .2s ease !important;
}

.mce-menu-item .mce-text,
.mce-menu-item .mce-ico {
	color: var(--text) !important;
}

.mce-menu-item:hover,
.mce-menu-item.mce-active,
.mce-menu-item.mce-selected,
.mce-menu-item:focus {
	background: var(--accent-soft) !important;
}

.mce-menu-item:hover .mce-text,
.mce-menu-item.mce-active .mce-text,
.mce-menu-item.mce-selected .mce-text,
.mce-menu-item:hover .mce-ico,
.mce-menu-item.mce-active .mce-ico,
.mce-menu-item.mce-selected .mce-ico {
	color: var(--accent) !important;
}

/* TinyMCE global Tabler icon overrides for dialogs and submenus */
.mce-ico,
.mce-btn-small .mce-ico,
.mce-menu-item .mce-ico,
.mce-close i {
	font-family: 'tabler-icons' !important;
	font-size: 17px !important;
	line-height: 16px !important;
	font-weight: 400 !important;
	text-shadow: none !important;
	background: none !important;
}

.mce-i-newdocument:before {
	content: "\eb0b" !important;
}

.mce-i-undo:before {
	content: "\eb77" !important;
}

.mce-i-redo:before {
	content: "\eb78" !important;
}

.mce-i-forecolor:before,
.mce-i-backcolor:before {
	content: "\eb61" !important;
}

.mce-i-bold:before {
	content: "\eb7b" !important;
}

.mce-i-italic:before {
	content: "\eb93" !important;
}

.mce-i-underline:before {
	content: "\eba2" !important;
}

.mce-i-alignleft:before {
	content: "\ea09" !important;
}

.mce-i-aligncenter:before {
	content: "\ea07" !important;
}

.mce-i-alignright:before {
	content: "\ea0a" !important;
}

.mce-i-alignjustify:before {
	content: "\ea08" !important;
}

.mce-i-bullist:before {
	content: "\eb6b" !important;
}

.mce-i-numlist:before {
	content: "\ef11" !important;
}

.mce-i-outdent:before {
	content: "\eb91" !important;
}

.mce-i-indent:before {
	content: "\eb92" !important;
}

.mce-i-link:before {
	content: "\eade" !important;
}

.mce-i-unlink:before {
	content: "\eb1b" !important;
}

.mce-i-anchor:before {
	content: "\eb55" !important;
}

.mce-i-image:before {
	content: "\eb0a" !important;
}

.mce-i-table:before {
	content: "\efa5" !important;
}

.mce-i-code:before {
	content: "\ea9f" !important;
}

.mce-i-fullscreen:before {
	content: "\eb09" !important;
}

.mce-i-charmap:before {
	content: "\eb66" !important;
}

.mce-i-searchreplace:before {
	content: "\ec88" !important;
}

.mce-i-pastetext:before {
	content: "\eb5e" !important;
}

.mce-i-visualblocks:before {
	content: "\f00d" !important;
}

.mce-close i:before {
	content: "\eb55" !important;
}