/* ------------------------------------------------------------ *\
	Reset
\* ------------------------------------------------------------ */

*,
*:before,
*:after { padding: 0; margin: 0; outline: 0; box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main { display: block; }

html,
body { height: 100%; }

html { tap-highlight-color: rgba(0,0,0,0); }

body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; }

img, iframe, video, audio, object { max-width: 100%; }

img { height: auto; display: inline-block; vertical-align: middle; }

b,
strong { font-weight: bold; }

address { font-style: normal; }

svg:not(:root) { overflow: hidden; }

a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="file"],
input[type="image"],
label[for] { cursor: pointer; }

a[href^="tel"],
button[disabled],
input[disabled],
textarea[disabled],
select[disabled] { cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner { padding: 0; border: 0; }

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="color"],
textarea,
a[href^="tel"] {  }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { display: none; -webkit-appearance: none; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

textarea { overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }

button,
input,
optgroup,
select,
textarea { font-family: inherit; font-size: inherit; color: #000000; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }

button,
select { text-transform: none; background: #ffffff; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; }


ul,
ol { padding-left: 20px; }

nav ul,
nav ol { list-style: none outside none; padding: 0; }


/* ------------------------------------------------------------ *\
	Base
\* ------------------------------------------------------------ */


body { height: 100%; background: #ffffff; font-family: 'Open Sans', sans-serif; font-size: 14px; color: #000000; overflow-x: overlay; }

a { color: inherit; text-decoration: none; display: inline-block; }

a[href^="tel"] { text-decoration: none; }

img { border: 0; }

h1,
h2,
h3,
h4,
h5,
h6 { margin-bottom: 0; }

p,
ul,
ol,
dl,
table,
blockquote { margin-bottom: 1.43em; }

h1[class],
h2[class],
h3[class],
h4[class],
h5[class],
h6[class],
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
table:last-child,
blockquote:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ *\
	Helpers
\* ------------------------------------------------------------ */

.clear:after { content: ''; line-height: 0; display: table; clear: both; }

.notext { white-space: nowrap; text-indent: 100%; text-shadow: none; overflow: hidden; }
.notext-old { font-size: 0; line-height: 0; text-indent: -4000px; }

.alignleft { text-align: left; }
.aligncenter { text-align: center; }
.alignright { text-align: right; }

[disabled],
.disabled { cursor: default; }

.mobileonly { display: none; }
.strong { font-weight: bold; }

[class^='ico'] { display: inline-block; vertical-align: middle; font-size: 0; background-repeat: no-repeat; background-position: center; }

/* ------------------------------------------------------------ *\
	Wrapper
\* ------------------------------------------------------------ */

.wrapper { position: relative; min-height: 100%; width: 100%; }

.wrapper:has(+ .fancybox-container) { position: absolute; }

/* ------------------------------------------------------------ *\
	Header
\* ------------------------------------------------------------ */

.header { height: 50px; background-color: #222933; color: #ffffff; }
.header .mobile-nav { display: none; }
.header .logout { float: right; margin-right: 10px; margin-top: 10px; font-size: 14px; }
.header .logout span { margin-top: -2px; display: inline-block; vertical-align: middle; }
.header .logout a { vertical-align: middle; }
.header .logout i { margin-left: 10px; margin-right: 10px; vertical-align: top; }

.header .toggle { float: left; margin-left: 10px; margin-top: 10px; }
.wrapper:has(.sidebar.hidden) .toggle .toggle-sidebar i { transform: rotate(180deg); }
.header-logo { float: left; height: 24px; margin-top: 13px; width: 237px; text-align: center; position: relative; }
.header-logo img { position: absolute; top: 0; left: 10px; bottom: 0; height: 100%; }

/* ------------------------------------------------------------ *\
	Main-nav
\* ------------------------------------------------------------ */

.main-nav { font-size: 14px; }
.main-nav li { margin-bottom: 1px; background: #393f48; color: #ffffff; }
.main-nav li a { display: block; padding: 5px 0 3px 10px; position: relative; }
.main-nav i { margin-right: 10px; margin-bottom: 2px; }


.main-nav li.current a { background: #393f48; color: #ffffff; }
.main-nav li a:hover { background: #4d535b; color: #ffffff; }

.main-nav .has-submenu ul { display: none; }
.main-nav .has-submenu.open ul { display: block; }

.main-nav .has-submenu li { margin-bottom: 0; background: #222933; } 
.main-nav .has-submenu li:hover { background: #4d535b; } 
.main-nav .has-submenu li a { padding: 6px 0 1px 20px; font-size: 11px; }

.main-nav .has-submenu > a:after { position: absolute; right: 10px; font-family: 'Material Icons'; content: 'expand_less'; font-size: 24px; padding: 4px; width: 32px; height: 32px; display: inline-block; }
.main-nav .has-submenu.open > a:after { transform: rotate(180deg); }

.main-nav .bullet { position: absolute; right: 10px; top: 6px; padding-top: 4px; text-align: center; background: #ff0000; color: #ffffff; font-weight: bold; width: 30px; height: 30px; border-radius: 50%; }


/* ------------------------------------------------------------ *\
	Container
\* ------------------------------------------------------------ */

.container { margin-left: 20px; margin-right: 20px; padding-top: 20px; display: block; vertical-align: top; font-size: 0; }
.sidebar + .container,
.sidebar + .container + .container { margin-left: 300px; }

.container + .container { padding-top: 0; }

.container.login { margin: 0 auto; width: 800px; margin-top: 180px; }


.container .form-head { padding: 5px 0 3px 10px; position: relative; background-color: #222933; color: #ffffff; font-weight: bold; }
.container.settings .form-head,
.container.login .form-head,
.container.popup .form-head { background-color: #0099cc; } 

.container .form-head span.id { right: 20px; position: absolute; }

.container .form-head i { margin-bottom: 2px; }
.container .form-head.toggle { cursor: pointer; }

.container .form-head.toggle .ico-toggle { position: absolute; right: 10px; transition: .3s; }
.container .form-head.toggle.toggled .ico-toggle { transform: rotate(180deg); transition: .3s; }


.container .form-content { border-left: 1px solid #222933; border-right: 1px solid #222933; border-bottom: 1px solid #222933; padding: 0 20px 20px 20px; }
.container .form-content.hidden { display: none; }

.container.settings .form-content,
.container.login .form-content,
.container.popup .form-content { border-left: 1px solid #0099cc; border-right: 1px solid #0099cc; border-bottom: 1px solid #0099cc; }

.container.popup .form.flat .form-content { border: none; padding: 0; }

.popup { padding-bottom: 20px; }

/* ------------------------------------------------------------ *\
	Sidebar
\* ------------------------------------------------------------ */

.sidebar { position: absolute; height: 100%; width: 280px; padding-top: 20px; background: #222933; }
.sidebar.hidden { width: 52px; }
.sidebar.hidden .has-submenu ul { display: none; }

.sidebar.hidden .main-nav span.text { display: none; }
.sidebar.hidden .main-nav .has-submenu > a:after { content: none; }
.sidebar.hidden + .container,
.sidebar.hidden + .container + .container { margin-left: 72px; }


@media (max-width: 1024px){
	.sidebar { width: 52px; }
	.sidebar .main-nav { font-size: 0; }
	.sidebar .has-submenu ul { display: none; }
	.sidebar .toggle { display: none; }
	.sidebar + .container,
	.sidebar + .container + .container { margin-left: 72px; }
}

/* ------------------------------------------------------------ *\
	tabs
\* ------------------------------------------------------------ */

ul.tabs { padding: 0; margin-bottom: 20px; border-bottom: 1px solid #0099cc; list-style-type: none; font-size: 0; display: inline-block; width: 100%; color: #0099cc; white-space: nowrap; overflow-x: hidden; }
ul.tabs li { font-size: 14px; display: inline-block; border-left: 1px solid #0099cc; border-right: 1px solid #0099cc; border-top: 1px solid #0099cc; }
ul.tabs li.current,
ul.tabs li:hover { background: #0099cc; color: #ffffff; }
ul.tabs li + li { margin-left: 20px; }
ul.tabs li a { width: 100%; height: 100%; display: inline-block; padding: 3px 20px 1px 10px; vertical-align: middle; min-height: 38px; }
ul.tabs li i { margin-bottom: 2px; }

ul.tabs li.labels,
ul.tabs li.options { float: right; }
ul.tabs li.labels a,
ul.tabs li.options a { padding: 3px 10px 1px 10px; }
ul.tabs li.labels + li,
ul.tabs li.options + li { margin-left: 0px; }


ul.tabs.toggle { margin-bottom: 0; display: block; }

ul.tabs.toggle { padding-right: 200px; }


/* ------------------------------------------------------------ *\
	quick-action
\* ------------------------------------------------------------ */

.quick-action { position: absolute; right: 0; top: 0; background: #ffffff; font-size: 14px; }
.quick-action .form-row { padding: 8px 20px 9px 0; display: inline-block; }
.quick-action .form-controls input[type="checkbox"] { margin-top: -4px; }
.quick-action .id { padding: 8px 0 9px 20px; display: inline-block; }
.quick-action .form-cols:not(.upload) { width: auto; }
.quick-action .form-col:not(.position) .form-controls { display: inline-block; }

.quick-action ~ .form .form-content { padding-top: 10px; }

/* ------------------------------------------------------------ *\
	DL
\* ------------------------------------------------------------ */

.stats-box { display: inline-block; width: 100%; }
.stats { float: right; margin-right: 102px; }
.stats.five { margin-right: 122px; }
.stats.six { margin-right: 140px; }

.stats dl dt { float: left; clear: left; width: 300px; font-weight: bold; text-align: right; }
.stats dl dd { margin: 0 0 0 310px; text-align: right; }


/* ------------------------------------------------------------ *\
	Form
\* ------------------------------------------------------------ */

form { position: relative; }

.form.hidden { display: none; }

input,
select { border: 1px solid #dddddd; height: 32px; background-color: #ffffff; padding-left: 9px; padding-right: 9px; }
select { padding-left: 4px; }

textarea { border: 1px solid #dddddd; vertical-align: text-top; height: 4em; padding: 9px 9px 9px 13px; }
textarea.big { height: 15em; }
textarea.extra-big { height: 35em; }

.position { vertical-align: text-top; }

.form { margin-bottom: 20px; font-size: 14px; background: #eeeeee; color: #222933; }
.popup .form { margin-bottom: 0; }
.flat.form { background: none; }

hr { border: none; border-bottom: 1px solid #dddddd; height: 1px; margin-top: 10px; }

.alert { display: inline-block; margin-top: 10px; }
.alert strong { width: 246px; text-align: right; display: inline-block; margin-right: 20px; }

.alert.error { color: #ff0000; }

.alert_box { padding: 10px; margin-bottom: 10px; font-size: 14px; }
.alert_box.success { border: 1px solid #006400; background-color: #90ee90; color: #006400; }
.alert_box.error { border: 1px solid #8b0000; background-color: #ea4335; color: #8b0000; }

.headline { padding: 10px; display: block; font-weight: bold; }
.headline .alignright { margin-right: -10px; float: right; }


.form-row { padding: 10px 0 0 10px; font-size: 0; position: relative; }
.form-cols { display: inline-block; font-size: 0; }
.form-cols:not(.upload) { width: calc(100% - 236px); }

.form-row.left { float: left; padding-top: 24px; }

.form-label,
.form-label-after,
.form-label-box,
.form-label-link,
.form-col { display: inline-block; font-size: 14px; padding-left: 20px; vertical-align: top; }

.form-label { font-weight: bold; text-align: right; width: 236px; vertical-align: top; margin-top: 6px; }
.form-label.drag { position: absolute; left: 0; top: 4px; width: auto; }

.form-label-after { margin: 4px 4px 4px 4px; padding-left: 0; }
.form-label-after.large { width: 150px; }


.form-label-link { margin: 0 4px 0 4px; padding-left: 0; }

.form-label-after + .form-col { padding-left: 0; }

.form-col:not(.position) .form-controls { position: relative; display: grid; grid-template-columns: 1fr; align-items: center; }
.form-col:not(.position) .form-controls:has(> .form-label-after),
.form-col:not(.position) .form-controls:has(> .form-label-link) { grid-template-columns: minmax(36px, 100%) 1fr; }
.form-col.right { float: right; }

.form-cols .form-col:has(.form-controls > .form-label-after) + .form-col,
.form-cols .form-col:has(.form-controls > .form-label-link) + .form-col { padding-left: 0; }
.form-cols.upload + .form-cols { width: calc(100% - 476px); float: right; }
.form-cols.upload.files + .form-cols { width: calc(100% - 569px); float: right; }
.form-cols.upload + .form-cols .form-label { display: block; width: auto; margin-bottom: 8px; }
.form-cols.upload + .form-cols .form-label i { margin-left: 20px; }

.form-row.cell .form-label-after { width: 160px; }


.label-row { padding: 10px 0 0 10px; font-size: 0; position: relative; }
.label-col { display: inline-block; font-size: 14px; padding-left: 29px; vertical-align: top; width: 236px; font-weight: bold; position: relative; }
.label-cols { width: calc(100% - 236px); display: inline-block; font-size: 0; }
.label-col.right { float: right; }

.label-col .toggle_multi { position: absolute; right: 0; top: -5px; }

.form-label:has(> a) { margin-top: 0; }
.form-label-box { background: #dddddd; margin: 0; border: 1px solid #dddddd; height: 32px; padding: 5px 10px 0 8px; }

.form-col:not(.position) .form-controls:has(> .field):has(> .form-label-box),
.form-col:not(.position) .form-controls:has(> .select):has(> .form-label-box) { display: flex; align-items: stretch; width: 100%; }
.form-col:not(.position) .form-controls:has(> .field):has(> .form-label-box) > .field,
.form-col:not(.position) .form-controls:has(> .select):has(> .form-label-box) > .select { flex: 1 1 auto; min-width: 0; }
.form-col:not(.position) .form-controls:has(> .field):has(> .form-label-box) > .form-label-box,
.form-col:not(.position) .form-controls:has(> .select):has(> .form-label-box) > .form-label-box { flex: 0 0 auto; white-space: nowrap; }



.position .form-label-after { text-align: left; width: 180px; }
.position input { height: inherit; }

.form-action { text-align: right; padding-top: 20px; }

.btn { border: none; background-color: inherit; vertical-align: middle; }

input[type="checkbox"] { vertical-align: middle; }
input[type="checkbox"] + .form-label-after { width: 180px; margin: 4px 0 0 0; }
input[type="checkbox"] + .form-label-after.small { width: 107px; }
input[type="checkbox"] + .form-label-after.large { width: 350px; }
input[type="radio"] { margin: 2px; width: inherit; }


.form-controls:not(.tree-select) input[type="checkbox"] { cursor: pointer; margin-top: 6px; margin-right: 4px; width: 36px; height: 20px; background-color: #222933; }
.form-controls:not(.tree-select) input[type="checkbox"] { border: none; border-radius: 50px; position: relative; appearance: none; outline: none; transition-duration: 200ms; }
.form-controls:not(.tree-select) input[type="checkbox"]:after { top: 2px; left: 2px; width: 16px; height: 16px; background-color: #ffffff; border-radius: 50%; content: ""; position: absolute; }
.form-controls:not(.tree-select) input[type="checkbox"]:checked { background-color: #0099cc; }
.form-controls:not(.tree-select) input[type="checkbox"]:checked:after { left: 17px; }

.form-controls:not(.tree-select) input[type="checkbox"]:disabled { background-color: #dddddd; }
.form-controls:not(.tree-select) input[type="checkbox"]:checked:disabled { background-color: #999999; }

.field.hidden { display: none; }

.image-singleupload { position: absolute; top: 0; right: 0; margin: 0; opacity: 0; height: 200px; width: 200px !important; display: block; }
.label-upload { padding-top: 45%; font-size: 20px; cursor: pointer; height: 200px; width: 200px; display: block; background: no-repeat center; background-size: contain; border: 1px solid #dddddd; text-align: center; }

input[type="file"] { background: #ffffff; border: 2px solid initial; padding-top: 3px; }

.thumb-info { font-size: 14px; display: inline-block; vertical-align: top; margin-left: 30px; width: 300px; }
.thumb-info dt { float: left; width: 100px; }

.form-label.textarea { vertical-align: top; margin-top: 30px; }
.form-label.tree { vertical-align: top; margin-top: 9px; }
.form-label-after.tree  { vertical-align: top; margin-top: 5px; }

.code-editor { display: none; }
.form-full .ace_editor { height: 6em; }
.big .ace_editor{ height: 15em; }
.extra-big .ace_editor{ height: 35em; }

.form-small + .radio { margin-left: 10px; }
.form-label-after i { margin-bottom: -2px; }

input,
select,
textarea { width: 100%; }

.form-full:not(.upload) { width: 100%; }
.form-xxxsmall,
.label-xxxsmall { width: 60px; }
.form-xxsmall,
.label-xxsmall { width: calc((100% - 40px) / 10); }
.form-xsmall,
.label-xsmall { width: calc((100% - 160px) / 6); }
.form-small,
.label-small { width: calc((100% - 80px) / 5); }
.form-medium,
.label-medium { width: calc((100% - 60px) / 4); }
.form-large,
.label-large { width: calc((100% - 20px) / 2); }
.form-xlarge,
.label-xlarge { width: calc(100% - 60px); }


.form.inline-form { margin-bottom: 0; display: none; }

.inline-form input,
.inline-form select,
.inline-form textarea { width: 100%; }

input:read-only,
select:disabled,
textarea:read-only { background: none; }

/* ------------------------------------------------------------ *\
	textarea-panel
\* ------------------------------------------------------------ */

.textarea-panel { list-style-type: none; margin-bottom: 0; padding-left: 0; font-size: 0; border-bottom: 1px solid #0099cc; color: #0099cc; }
.textarea-panel li { display: inline-block; cursor: pointer; padding: 4px 20px 1px 10px; font-size: 14px; border-left: 1px solid #0099cc; border-right: 1px solid #0099cc; border-top: 1px solid #0099cc; }
.textarea-panel li.current,
.textarea-panel li:hover { background: #0099cc; color: #ffffff; }
.textarea-panel li + li { margin-left: 20px; }


/* ------------------------------------------------------------ *\
	chips
\* ------------------------------------------------------------ */

.chips { display: block; font-size: 0; padding: 0; margin-left: -10px; }
.chips li { cursor: pointer; display: inline-block; font-size: 14px; margin-left: 10px; margin-bottom: 10px; background-color: #ffffff; color: #0099cc; border-radius: 50px; }
.chips span { padding: 3px 10px 5px 10px; display: block; }

.chips li:hover { background: #0099cc; color: #ffffff; }

/* ------------------------------------------------------------ *\
	button
\* ------------------------------------------------------------ */

.button { text-align: right; font-size: 0; }
.button.absolute { position: fixed; right: 70px; bottom: 20px; }
.btn { display: inline-block; padding: 5px 20px 3px 10px; background-color: #222933; color: #ffffff; font-size: 14px; margin-left: 10px; }
.btn:hover,
.btn.active { background-color: #0099cc; }

.container.settings .btn,
.container.login .btn,
.container.popup .btn { background-color: #0099cc; }
.container.settings .btn:hover,
.container.login .btn:hover,
.container.popup .btn:hover { background-color: #222933; }

/* ------------------------------------------------------------ *\
	table
\* ------------------------------------------------------------ */


.tox :not(svg):not(rect) .table, 
.table { display: inline-table; width: 100%; margin-top: 20px; margin-bottom: 20px; table-layout: fixed; }

.tox :not(svg):not(rect) .table-head,
.table-head { display: table-header-group; color: #ffffff; font-size: 14px; }

.tox :not(svg):not(rect) .table-body,
.table-body { display: table-row-group; font-size: 14px; }

.table-foot { display: table-footer-group; font-size: 14px; }
.table-row { display: table-row; }

.table-full { display: table; width: calc(100vw - 335px); margin-bottom: 0; table-layout: fixed; }
.wrapper:has(.sidebar.hidden) .table-full { width: calc(100vw - 108px); }
.table-full .table { margin: 0; }

.tox :not(svg):not(rect) .table-cell,
.table-cell { display: table-cell; border-bottom: 1px solid #ffffff; vertical-align: top; width: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-cell + .table-cell { border-left: 1px solid #ffffff; }
.table-cell p { white-space: normal; }

.table-head .table-cell { background: #222933; }
.table-head .table-cell a { width: 100%; display: block; padding: 10px 10px 10px 10px; font-weight: bold; }

.table-head .table-cell a:has(> i) { padding: 3px 10px 1px 10px; }

.table-head .table-cell.multiselect,
.multiupload_output .table-head .table-cell { padding: 8px 10px 8px 10px; }

.table-head .table-cell i { margin-bottom: 2px; }
.table-body .table-cell { padding: 8px 10px 8px 10px; }
.table-full .table-head .table-cell { padding: 0; }

.table-cell.c_active { padding: 0 10px; }
.table-body .table-row:nth-child(even) .table-cell { background: #dddddd; }
.table-body .table-row:nth-child(odd) .table-cell { background: #eeeeee; }
.table-full .table-head .table-row:nth-child(even) .table-cell,
.table-full .table-head .table-row:nth-child(odd) .table-cell { background: #222933; }

.table-full .table-body .table-row:nth-child(even) .table-cell { background: #f3f3f3; }
.table-full .table-body .table-row:nth-child(odd) .table-cell { background: #f9f9f9; }


.table-body .table-row.duplicate .table-cell { background: #bbbbbb; }
.table-body .table-row.inactive,
.table-body .table-cell.inactive { color: #666666; }
.table-body .table-row.important { color: #ff0000; }

.table-body .table-cell:not(.toolbar) > a { display: block; height: 100%; width: 100%; }

.table-body .container.popup { display: block; margin: 0; padding: 0; width: calc(100vw - 465px); }
.table-body .container .form { margin: 0; }


.table .table-cell.multiselect input { height: auto; margin-top: -4px; }
.table-grid .grid-box.multiselect input { height: 16px; float: left; width: 16px; margin: 12px 4px 12px 12px; }

.table-body .table-cell .material-icons.md-24 { padding-top: 6px; }
.table-body .table-cell .material-icons.md-22 { padding-top: 2px; }
.table-cell.icon i { vertical-align: top; margin-right: 10px; }
.table-cell.size-xxsmall a:has(> i),
.table-cell.size-xxsmall a { padding: 3px 0 1px 0; }
.table-cell.size-xxxsmall { width: 50px; }
.table-cell.size-xxsmall { width: 64px; }
.table-cell.size-xsmall { width: 88px; }
.table-cell.size-small { width: 141px; }
.table-cell.size-medium { width: 240px; }
.table-cell.size-large { width: 300px; }
.table-cell.multiselect { width: 50px; text-align: center; } 
.table-cell.toolbar { width: 79px; font-size: 0; text-align: right; padding: 4px 0 0 0; }
.table-cell.toolbar.size-1 { width: 27px; }
.table-cell.toolbar.size-2 { width: 53px; }
.table-cell.toolbar.size-3 { width: 79px; }
.table-cell.toolbar.size-4 { width: 105px; }
.table-cell.toolbar.size-5 { width: 131px; }
.table-cell.toolbar.size-6 { width: 157px; }
.table-cell.toolbar.size-7 { width: 183px; }
.table-cell.toolbar.size-8 { width: 209px; }
.table-cell.toolbar.size-9 { width: 235px; }
.table-cell.toolbar.size-10 { width: 261px; }
.table-cell.toolbar a + a { margin-left: 2px;}

@media (max-width: 1024px){
	.table-cell.size-medium { width: 120px; }
	.table-cell.size-large { width: 180px; }
	.table-cell.size-xsmall,
	.table-cell.size-small,
	.table-cell.size-medium,
	.table-cell.size-large { width: auto; }
	
	.table-cell.toolbar.size-4,
	.table-cell.toolbar.size-5,
	.table-cell.toolbar.size-6,
	.table-cell.toolbar.size-7,
	.table-cell.toolbar.size-8,
	.table-cell.toolbar.size-9,
	.table-cell.toolbar.size-10 { width: 97px; }
}


.table-head .table-cell.toolbar,
.table-body .table-row:nth-child(even) .table-cell.toolbar,
.table-body .table-row:nth-child(odd) .table-cell.toolbar { background: none; }

.toolbar a { display: inline-block; font-size: 0; }
.toolbar a.hidden { display: none; }

.table-cell i { color: #222933; }
.table-body .table-cell a.active i,
.table-body .table-cell a:hover i { color: #0099cc; }

.multicheck_control { display: none; float: left; }
.btn.select { display: none; }

.table-row:has(> .quick.active) .table-cell { vertical-align: middle; }

.table-row .table-cell a:has(> img) { float: left; }
.table-row .table-cell img { float: left; display: inline-block; width: 40px; height: 40px; vertical-align: top; margin-right: 10px; object-fit: contain; aspect-ratio: 1; }



.table-body .table-row .table-cell a {  color: #0099cc; }
.table-full .table-head .table-cell a { color: inherit; }
.table-body + .table-row { margin-top: 20px; }



.form-action + .table-grid { margin-top: 20px; }

.table-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-rows: 1fr; border: 1px solid #222933; padding: 10px; background: #ffffff; }
.flat .table-grid { border: none; padding: 0; padding-top: 20px; }

.table-grid.action-bar { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

.table-grid .table-cell { background: #eeeeee; padding: 0; position: relative; }
.table-grid .ui-sortable-placeholder { background: #0099cc; padding: 0; position: relative; }

.table + .table-grid { margin-top: -21px; }

.table-grid .grid-title { text-align: left; font-size: 11px; color: #ffffff; padding: 12px 10px 12px 10px; background-color: #dddddd; color: #222933; }
.table-grid .grid-action { position: absolute; top: 3px; right: 0; font-size: 0; }
.table-grid .grid-action i { color: #222933; }
.table-grid .grid-action a.active i,
.table-grid .grid-action i:hover { color: #0099cc; }

.table-grid .grid-content { padding: 10px; }
.table-grid .grid-content a { width: 100%; height: 100%; aspect-ratio: 1; padding-top: 15%; }
.table-grid .grid-content img { object-fit: contain; width: 100%; height: 100%; aspect-ratio: 1; }
.table-grid .grid-content .material-icons { padding-top: calc(1vw + 1vh + 1vmin); font-size: calc(5vw + 5vh + 2vmin); display: flex; align-items: center; justify-content: center; }

.table-grid .grid-box .caption { padding: 0 10px; font-size: 11px; text-align: center; margin-bottom: 10px; }
.table-grid .grid-box .caption { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.table-grid .grid-box .grid-bottom-action { text-align: left; }
.table-grid .grid-box .grid-bottom-action a.active i,
.table-grid .grid-box .grid-bottom-action a:hover i { color: #0099cc; }
.table-grid .grid-box .grid-bottom-action a.right { float: right; }

.table-grid .edit,
.table-cell.edit,
.change_folder { cursor: pointer; }

.button-form { display: inline-block; vertical-align: middle; }

.form-action.hidden,
.table.hidden,
.table-grid.hidden { display: none; }


@media (max-width: 1420px){
	.table-grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
	.table-grid.action-bar { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* ------------------------------------------------------------ *\
	tinymce
\* ------------------------------------------------------------ */

.tox-tinymce { border: none !important; }

.tox-tinymce, 
.tox .tox-menu,
.tox .tox-split-button,
.tox .tox-mbtn,
.tox .tox-tbtn,
.tox .tox-collection__item,
.tox .tox-dialog,
.tox .tox-listboxfield .tox-listbox--select,
.tox .tox-textarea,
.tox .tox-textarea-wrap .tox-textarea:focus,
.tox .tox-textfield,
.tox .tox-toolbar-textfield,
.tox.tox-tinymce-aux .tox-toolbar__overflow { border-radius: 0 !important; }

.tox .table-row,
.tox .table-grid .table-cell { cursor: pointer; }

.tox .tox-dialog__body-content .table-head a,
.tox .tox-dialog__body-content .table-head a:hover { color: #ffffff; text-decoration: none; }

.tox .tox-tbtn--select { width: 80px !important; }

/* ------------------------------------------------------------ *\
	Multiupload
\* ------------------------------------------------------------ */

.image-upload { display: none; }

.multiupload_output { display: none; }
.multiupload_output .table-cell { width: 100%; }

.multiupload_output .success { background-color: #5cb85c !important; }
.multiupload_output .error { background-color: #d9534f !important; }
.multiupload_output .duplicate { background-color: #5bc0de !important; }


.dragging-container { display: none; z-index: 20; position: fixed; top: 0; left: 0; right: 0; bottom: 0; text-align: center; font-size: 80px; font-weight: bold; line-height: 100vh; }
.dragging-container { background-color: #0099ccEE; outline: 2px dashed #ffffff; outline-offset: -10px; color: #ffffff; }

.form-row.upload-box { padding: 40px; text-align: center; background-color: #dddddd; color: #222933; outline: 2px dashed #222933; outline-offset: -10px; font-size: 30px; }
.form-row.upload-box .upload-note i { display: block; margin: 0 auto;  }
.form-row.upload-box .form-action { display: block; text-align: center; padding-top: 0; }
.form-row.upload-box.active { background-color: #0099cc; color: #ffffff; outline: 2px dashed #ffffff; }
.form-row.upload-box.active .form-action { visibility: hidden; }

.form-row.upload-box:has(.upload-note) .form-action { padding-top: 20px; }

/* ------------------------------------------------------------ *\
	Buttons
\* ------------------------------------------------------------ */

.btn i { margin-bottom: 2px; }

.context-menu { display: none; position: absolute; border: 1px solid #0099cc; width: 200px; background: #eeeeee; }
.context-menu ul { padding: 0; list-style: none; margin: 10px; }
.context-menu ul li + li { margin-top: 10px; }
.context-menu ul li i { margin-bottom: 2px; margin-right: 10px; }
.context-menu ul li a { display: inline-block; width: 100%; padding: 5px 20px 3px 10px; background-color: #222933; color: #ffffff; font-size: 14px; }
.context-menu ul li a:hover { background-color: #0099cc; }

/* ------------------------------------------------------------ *\
	fancybox
\* ------------------------------------------------------------ */

.fancybox-content { -ms-overflow-style: none; scrollbar-width: none; }
.fancybox-content::-webkit-scrollbar { display: none; }
.fancybox-slide--html .fancybox-close-small { position: fixed; color: #ffffff; }

.fancybox-content.container:not(.popup) { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 10px; min-height: auto; margin: 0 auto !important; width: calc(100vw - 100px); }
.fancybox-content.container.popup { display: inline-block; vertical-align: middle; padding: 10px; min-height: auto; margin: 0 auto !important; width: calc(100vw - 100px); }

/* ------------------------------------------------------------ *\
	skeleton
\* ------------------------------------------------------------ */


.skeleton { display: block; position: relative; border-radius: 5px; background-color: #cccccc; overflow: hidden; }
.skeleton::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; transform: translateX(-100%); }
.skeleton::after { background-image: linear-gradient(90deg, #ffffff00 0, #ffffff20 20%, #ffffff50 60%, #ffffff00); animation: skeleton-frame 2s infinite; }

.skeleton:has(> img) + .skeleton { float: right; width: calc(100% - 50px); }
.table-row .table-cell .skeleton:has(> img) { display: inline-block; width: 40px; height: 40px; vertical-align: top; margin-right: 10px; object-fit: contain; aspect-ratio: 1; }

@keyframes skeleton-frame {
	100% { transform: translateX(100%); }
}

/* ------------------------------------------------------------ *\
	update manager
\* ------------------------------------------------------------ */

.container.popup.update-manager-box { width: 720px; max-width: 90vw; padding: 0; }
.update-manager-progress { height: 10px; background: #e5e5e5; border-radius: 10px; overflow: hidden; margin-bottom: 8px; margin-top: 20px; }
.update-manager-progress-bar { width: 0; height: 10px; background: #222933; transition: width .25s ease; }
.update-manager-progress-text { font-size: 13px; margin-bottom: 12px; color: #555; }
.update-manager-log { height: 360px; overflow: auto; background: #111820; color: #d7e4ef; padding: 14px; border-radius: 4px; font-family: monospace; font-size: 12px; line-height: 1.5; }
.update-manager-actions { margin-top: 14px; text-align: right; }
.update-manager-log .success { color: #91ff91; }
.update-manager-log .error { color: #ff8f8f; }


/* ------------------------------------------------------------ *\
	Material icons
\* ------------------------------------------------------------ */

.material-icons { vertical-align: middle; }

.material-icons.md-16 { font-size: 16px; padding: 0 2px 4px 2px; width: 20px; height: 20px; }
.material-icons.md-20 { font-size: 20px; padding: 2px; width: 24px; height: 24px; }
.material-icons.md-22 { font-size: 24px; padding: 0; width: 24px; height: 24px; }
.material-icons.md-24 { font-size: 24px; padding: 4px; width: 32px; height: 32px; }
.material-icons.md-40 { font-size: 40px; padding: 0; width: 40px; height: 40px; }
.material-icons.md-48 { font-size: 48px; padding: 8px; width: 64px; height: 64px; }
.material-icons.md-96 { font-size: 96px; padding: 12px; width: 128px; height: 128px; }


.material-icons.md-white { color: #ffffff; }
.material-icons.md-black { color: #222933; }
.material-icons.md-blue { color: #0099cc; }
.material-icons.md-grey { color: #999999; }
.material-icons.md-green { color: #006400; }



.material-icons.md-r45 { transform: rotate(45deg); }
.material-icons.md-r90 { transform: rotate(90deg); }
.material-icons.md-r180,
.material-icons.DESC { transform: rotate(180deg); }
.material-icons.md-r270 { transform: rotate(270deg); }

.material-icons.hidden { display: none; }

/* ------------------------------------------------------------ *\
	icons
\* ------------------------------------------------------------ */

.ico-auto { width: 32px; height: 32px; padding: 4px; }

/* ------------------------------------------------------------ *\
	pulse
\* ------------------------------------------------------------ */

.pulse { box-shadow: 0 0 0 rgb(255,255, 255); border-radius: 50%; animation: pulse 2s infinite; }
.material-icons.md-24.pulse { padding: 0; width: 24px; height: 24px; }

@keyframes pulse {
  0% {  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8); }
  70% { box-shadow: 0 0 0 10px rgba(0, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}