body {
    --c-main: #1976d2;
    --c-header-bg: #1976d2;
    --c-header-fg: white;
    /*font-family: Roboto, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;*/
    margin: 0;
}

body.home-background, .home-background {
    background-color: #fff;
    background-image: url('/custom/resources/home-background.png');
    background-size: cover;
}

#app-loader {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 254;
    background: white;
}

#app-loader-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 255;
    background: url(/custom/resources/loader.gif) no-repeat center fixed;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

body > .x-mask {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.home-background.x-fit-item > .x-panel-body {
    background: none;
}

.home-background.x-fit-item > .x-box-layout-ct > .x-box-inner {
    background: none;
}

.home-background.x-fit-item > .x-box-layout-ct > .x-box-inner > .x-box-target > .x-box-item {
    background: none;
}

.home-background.x-fit-item > .x-box-layout-ct > .x-box-inner > .x-box-target > .x-box-item > .x-panel-body {
    background: none;
}

.home-background > .x-panel > .x-panel-body-default,
.solution-editor > .x-panel-body-default,
.x-drawer > .x-panel-body-default {
    background: transparent;
}

.hide-scrollbar {
    scrollbar-color: #eee8 white;
    scrollbar-width: thin;
}

.app-header .x-btn-inner-default-toolbar-medium {
    font-weight: bold !important;
    font-size: 16px !important;
}
.drawer .x-panel-default-collapsed, .drawer-collapsed {
    display: none !important;
}
.app-header .drawer-button {
    background: transparent;
}
.app-header .drawer-button .x-btn-inner {
    max-width: 25vw !important;
}
.drawer-button::after {
    content: " ";
    position: absolute;
    right: 4px;
    top: 15%;
    width: 1px;
    height: 70%;
    background: var(--c-header-fg);
}
.app-header .x-btn *, .app-header .x-btn .x-btn-split-right:after {
    color: var(--c-header-fg);
}
.app-header .x-btn-over.x-btn-default-toolbar-medium.x-box-item {
    --highlight: color-mix(in srgb, var(--c-header-fg) 20%, var(--c-header-bg));
    background: var(--highlight);
    border-color: var(--highlight);
}
/*.app-header .drawer-button * {
    color: #4b4c4c;
}*/
.app-header {
    background-color: var(--c-header-bg);
    color: var(--c-header-fg);
    /*border-bottom: 1px solid #e0e0e0;*/
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 5px 1px;
    z-index: 3;
}
.app-header #headerTitle {
    color: var(--c-header-fg);
    background-color: transparent;
}
#headerTitle {
    /*font-family: Roboto, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;*/
    font-weight: bold;
    font-size: 16px;
    line-height: 2em;
    background-color: var(--c-header-fg);
}
.drawer-active-item {
    color: var(--c-header-bg) !important;
}
.drawer .x-panel-default-collapsed, .drawer-collapsed {
    display: none !important;
}

.search-box input {
    border-radius: 6px !important;
    background-color: #eee;
}

.search-box .x-form-trigger-wrap-focus input {
    border: 1px solid #aaa;
}

.search-box .x-form-trigger-wrap-default {
    border-width: 0;
}

.home-toolbar {
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.4) !important;
}

.small-toolbar, .small-toolbar a {
    padding: 1px !important;
}

.logo {
    border: 1px solid transparent;
}

.logo.on-over-logo {
    cursor: pointer;
    border: 1px solid #ccc;
}

@media screen and (max-width:360px) {
    .header-background .logo {
        display: none;
    }
}

.impersonate {
    display: block;
    text-align: center;
    font-size: 9px;
    color: #999;
}
.drawer-item .impersonate {
    position: absolute;
    bottom: -6px;
    left: 50px;
}

.footer {
    background-color: white;
    font-size: 11px;
    text-align: left;
    padding: 8px;
    color: steelblue;
    border-top: 1px solid lightsteelblue;
    white-space: nowrap;
}

.footer a {
    color: black;
}

.footer img {
    vertical-align: middle;
}

.above-mask {
    z-index: 20000 !important;
}

.above-debugger {
    z-index: 20001 !important;
}

.center-center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 255;
}

.toast-window {
    max-width: 90%;
    white-space: normal;
}

.toast-window .x-title-text {
    color: white;
}

.toast-error .x-fa, .toast-error .x-title {
    color: white !important;
}

.toast-success .x-window-body {
    background-color: #EEE;
}

.toast-success .x-fa, .toast-success .x-title {
    color: white !important;
}

.error-style, .error-style .x-panel-body, .toast-error .x-window-body {
    background: #efef99;
}

.settings-view .x-tab-default-top {
    padding: 8px 1px 8px 1px;
}

.settings-view .x-tab-text.x-tab-icon-left > .x-tab-icon-el-default {
    margin-right: 2px;
}

.tile-button > .x-panel-body {
    background-color: rgba(248, 248, 255, .4) !important;
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tile-button-over > .x-panel-body {
    background-color: rgba(255, 255, 255, .8) !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    cursor: pointer;
}

.ItemsCardContainer > .x-panel-body {
    background-color: #f6f6f6;
}

.toc, .ItemsCardContainer > .x-panel-body > .InlineView {
    /*
    margin: 2px 10px 10px 10px;
    border-radius: 6px;
    */
}

.toc > .x-panel-header {
    background-color: #ececec;
}

.empty-solution {
    font-weight: bold;
    color: #506060;
    font-size: 2em;
    line-height: 1.25em;
}

.empty-solution a {
    color: steelblue;
    text-decoration: none;
}

.items-grid-toolbar-text, .x-toolbar-text-default.items-grid-toolbar-text {
    color: #AFAFAF;
    font: normal 1.5em helvetica;
}

.items-grid-toolbar-text2 {
    font: normal 1em helvetica;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relationship-tabs > .x-tab-bar, .relationship-tabs > .x-tab-bar-plain {
}

.subtypes-relationship-tabs {
    /*
    margin: 6px;
    background: white;
    border-radius: 6px;
    */
}

@media screen and (max-width:640px) {
    .subtypes-relationship-tabs {
        margin: 0;
    }
}

.relationship-tabs .x-tab-active {
}

.SolutionsContainer, .SolutionsContainer > .solution-editor-tab-bar.x-tab-bar {
    background: white;
}

.item-form .x-panel-body {
}

.item-form-read .x-panel-body {
}

.item-form-update .x-panel-body, .openitem-type-read .x-panel-body {
    background-color: white !important;
}

.item-form-new .x-panel-body {
    background-color: white !important;
}

.warning-message {
    color: darkred;
    text-align: center;
    text-shadow: 1px 1px 4px #404040;
}

.icon-solution, .x-tree-icon-custom.icon-solution {
    background-image: url(/res/config/Solution.png);
}
.tile-button .icon-solution {
    background-image: url(/res/config/SolutionLarge.png);
}

/*.tree-mi-icons .x-tree-node-text {
    display: inline-flex;
    flex-flow: row nowrap;
}
.tree-mi-icons .x-tree-node-text .material-icons {
    position: relative;
    left: -6px;
}*/

.tree-mi-icons [class*='mi-'].x-tree-icon,
.tree-mi-icons .x-tree-icon.x-fa,
.tree-mi-icons .x-tree-icon.fas {
    position: relative;
    /*width: 0.8em;*/
    left: -6px;
}

.fas.x-menu-item-icon-default {
    top: 7px;
}
[class*=mi-].x-menu-item-icon-default {
    top: 6px;
}

.icon-itemtype, .x-tree-icon-custom.icon-itemtype {
    background-image: url(/res/config/ItemType.png);
}
.tile-button .icon-itemtype {
    background-image: url(/res/config/ItemTypeLarge.png);
}

.icon-type-change, .x-tree-icon-custom.icon-type-change {
    background-image: url(/res/config/TypeChange.png);
}

.tab-icon {
    line-height: 1em;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

span.tab-icon {
    display: inline-block;
}

.only-left-border, .only-left-border.x-docked-right {
    border-left-color: lightgray !important;
}

.readonly-field input {
    background: transparent;
}

.readonly-field .x-form-text-default {
    min-height: 22px;
    padding: 0;
    background-color: transparent;
}

.readonly-field .x-form-display-field-default {
    margin-top: 0;
    min-height: 22px;
    padding-top: 4px;
}

.readonly-field .x-form-item-body {
    padding: 2px 10px 4px 10px;
    background-color: #fafafa;
    border-bottom: lightblue 1px solid;
}

.open-link-trigger.x-form-trigger-default:before {
    content: "\f08e";
}

.link-item {
    color: #777;
}

.breadcrumb-button.active-breadcrumb-button {
    opacity: 0.6 !important; /* a bit darker */
    background-image: none !important;
    background-color: white !important;
    border-color: transparent !important;
}

.breadcrumb-button.active-breadcrumb-button .x-btn-inner {
    color: black !important;
}

.breadcrumb-button .x-btn-inner, .breadcrumb-back-btn .x-btn-inner {
    color: rgb(22,115,208) !important;
}

.item-form-header .x-btn {
    border: 0 !important;
    background: white !important;
    padding: 0 !important;
}

.item-form-header .x-btn.breadcrumb-properties-btn {
    padding: 7px !important;
}

.item-form-header .breadcrumb-button .x-btn-inner, .item-form-header .breadcrumb-back-btn .x-btn-inner {
    text-decoration: underline;
}

.item-form-header .breadcrumb-button.active-breadcrumb-button .x-btn-inner {
    text-decoration: none;
}

.reference-identifier {
    padding: 0 10px 0 10px;
}

.expandable-list-group {
    background: transparent !important;
    font-weight: bold !important;
}

.expandable-list-group:hover {
    text-decoration: underline;
}

.expandable-list-item {
    padding-left: 20px !important;
}

.url-toggle-icon {
    display: inline-block;
    float: right;
    cursor: pointer;
}

.board-item {
    height: 100px;
}

.board-item .x-fa {
    float: right;
    display: none;
}

.board-item:hover .x-fa {
    display: inline-block;
}

.preview-loading-frame {
    min-width: 300px;
    min-height: 200px;
    background-image: url(/custom/resources/loader.gif);
    background-repeat: no-repeat;
}

.items-status-text {
    padding-right: 4px;
}

.items-status-text, .pagenumber {
    font-size: 1.1em;
    font-weight: bold;
    color: steelblue;
}

.tabcount {
    display: inline-block;
    min-width: 1em;
    border-radius: 6px !important;
    background-color: black;
    color: white;
}

.breadcrumb-back-btn .x-fa {
    color: rgb(22,115,208);
}

.green-icon {
    color: rgb(22, 159, 34) !important;
}

.items-action-icon {
    margin-left: 2px;
    height: 16px;
    font-size: 16px;
    display: inline-block;
    cursor: pointer;
}

input.items-action-icon {
    font-size: 12px !important;
}

.relationship-tabs .details-toolbar > .x-toolbar {
    border-top: 0 !important;
}

.relationship-tabs.split > .x-tab-bar, .relationship-tabs.split > .x-tab-bar-plain {
    background-color: #ececec !important;
}

.details-toolbar > .x-toolbar .x-btn {
}

.details-toolbar > .x-panel-body {
    border-top: 0;
}

.item-form-header {
    background: white !important;
}

.item-form-header .x-title {
    display: none;
}

.items-tab > .x-panel-body {
    border-top: 0;
}

.items-tab > .x-panel-header * {
    background-color: transparent !important;
    color: black !important;
}

.items-tab > .x-panel-header {
    background-color: #F6F6F6 !important;
}

@media screen and (max-width:640px) {
    .items-tab > .x-panel-header {
        padding: 4px !important;
    }

    .items-grid-toolbar-text, .x-toolbar-text-default.items-grid-toolbar-text,
    .items-tab > .x-panel-header .items-grid-toolbar-text {
        color: #606060 !important;
        font: normal 1.2em helvetica;
    }
}

.title-icon-text img {
    position: relative;
    top: 2px;
}

.title-icon-text b {
    position: relative;
    top: -2px;
}

.title-emulation {
    border-top: 0 !important;
    background-color: #ececec !important;
    padding: 4px 0 4px 10px !important;
}

@-moz-document url-prefix() {
    .title-emulation {
        padding: 4px 0 5px 10px !important;
    }
}

.title-emulation .x-title-text, .title-emulation .x-tool * {
    color: #404040;
}

.title-emulation .x-title-icon {
    width: 32px !important;
    height: 32px !important;
}

.title-emulation .x-title-icon-wrap {
    visibility: hidden;
    width: 1px !important;
}

.inline-title {
    padding: 6px;
    color: #606060;
    line-height: 20px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
}

.inline-title .x-title-icon {
    margin-right: 8px;
}

.simple-header > .x-panel-header {
    background: transparent !important;
}

.simple-header > .x-panel-header .x-box-target {
    background: transparent !important;
}

.simple-header > .x-panel-header .x-title-text {
    font-size: 1.1em !important;
    font-weight: 600;
    color: #999999 !important;
}

.simple-header > .x-panel-body {
    border: 0 !important;
}

.simple-header .x-panel {
    border: 0 !important;
}

.solution-tab-cog {
    position: absolute;
    top: 0;
    left: calc(100% - 16px);
    display: none;
}
.solution-tab-start-icon {
    position: absolute;
    top: 0;
    left: calc(100% - 32px);
}

.no-border-text-field input {
    pointer-events: none;
}

.no-border-text-field .x-form-item-body .x-form-trigger-wrap {
    border-top-style: hidden !important;
    border-bottom-style: hidden !important;
    border-left-style: hidden !important;
    border-right-style: hidden !important;
    background-image: none !important;
}

.no-border-text-field .x-form-item-body .x-form-text-default {
    background-color: transparent !important;
}

.no-wrap-form .readonly-field .x-form-display-field-default {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toolbar-button-configurable {
    border: 1px dashed darkgray !important;
    /* this is for fill */
    height: 32px !important;
    display: block !important;
    top: 0 !important;
}

.toolbar-button-configure-true {
    background-color: #dfd !important;
}

.toolbar-button-configure-false {
}

.large-tabbar-icon .x-tab-icon-el {
    height: 32px;
    font-size: 32px;
}

.gnosis-model-form .nav-tabs .large-tabbar-icon .x-tab-icon-el.x-fa {
    font-size: 2em;
}

.gnosis-model-form .nav-tabs .x-tab-icon-el.x-fa {
    font-size: 1em;
}

.collapsed-tabbar .x-tab-default-top {
    padding: 2px 6px 2px 6px;
}

.grid-column-icon {
    display: inline-block;
    width: 16px;
}

.grid-inline-edit .x-toolbar, .grid-inline-edit .x-grid-header-ct {
    z-index: 0 !important; /* Fix for invisible inline edit buttons in empty grid */
}

.link-on-hover {
    text-decoration: none;
}

.link-on-hover:hover {
    text-decoration: underline;
}

.icon-visible-on-hover .x-fa, .x-grid-row .icon-on-hover {
    visibility: hidden !important;
}

.icon-visible-on-hover:hover .x-fa, .x-grid-row:hover .icon-on-hover {
    visibility: visible !important;
}

/* Print support */

@media print {
    body * {
        visibility: hidden;
    }

    .printable-element, .printable-element * {
        visibility: visible;
    }

    .printable-element {
        position: absolute;
        left: 0;
        top: 0;
    }

    .printable-element .x-toolbar {
        display: none;
    }
}

.tab-config-grid .x-grid-cell {
    vertical-align: middle !important;
}

.tab-config-grid .x-grid-cell-inner {
    padding: 1px !important;
    min-height: 24px;
}

.settings-view .settings-icon {
    cursor: pointer;
    font-size: 16px;
}

.settings-view .x-fa.fa-toggle-off {
    opacity: 0.3;
}

.settings-view .x-toolbar {
    padding-left: 0;
}

.settings-view .x-toolbar .x-toolbar-text {
    font-weight: bold;
    padding: 4px 8px 4px 2px;
    font-size: 12pt;
}

.active-item-bold, .default-view-menu-item .x-menu-item-text {
    font-weight: bold;
}

.tree-item-arrow {
    display: none;
}

.completion-hint {
    position: absolute;
    background: #fffcc9;
    border: 1px solid #dddaa7;
    color: black;
}

.completion-hint > div {
    padding: 4px;
}

.completion-hint .caption {
    border-bottom: 1px groove #fffcc9;
}

.completion-hint .info {
    border-bottom: 1px groove #fffcc9;
    font-weight: bold;
}

.completion-hint .info span, .completion-hint .info div {
    font-weight: normal;
}

.completion-hint .info > div {
    margin-left: 16px;
}

.embedded-menu-icon {
    top: 3px;
    position: relative;
    padding-right: 4px;
}

.abstract-item-type .x-menu-item-text {
    opacity: 0.7;
}

.abstract-item-type img {
    opacity: 0.7;
}

.no-scroll-panel > .x-panel-body {
    overflow: hidden !important;
}

.lov-tree .x-tree-icon-custom {
    width: 16px !important;
    margin-left: 2px !important;
}

.docpreview {
    position: absolute;
    display: none;
    z-index: 65535;
    background: transparent;
}

.docpreview .docpreview-close {
    float: left;
    margin-left: 0;
    position: absolute;
    color: white;
    font-size: 16pt;
    cursor: pointer;
}

.docpreview .docpreview-close > div {
    display: inline-block;
}

.noscroll-boundlist > .x-boundlist-list-ct {
    overflow: hidden !important;
}

.field-required-indicator {
    display: none;
    color: red;
    padding-left: 2px;
}

.x-field-is-required .field-required-indicator {
    display: inline;
}

.transparent-background {
    background: transparent !important;
}

.inline-file {
    display: inline-block !important;
}

.inline-file .x-form-trigger {
    width: 100% !important;
}

.inline-file img {
    /*margin-top: 4px;*/
    margin-right: 4px;
}

.only-left-border, .only-left-border.x-docked-right {
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left-width: 1px !important;
    border-left-style: solid !important;
}

.readonly-field .x-form-trigger-wrap-default, .readonly-field .x-form-text-wrap {
    border: 0 none transparent;
}

.link-item {
    display: none;
}

.tab-bar-special-buttons, .tab-bar-special-buttons > .x-panel-body {
    background: transparent;
}

.tab-bar-special-buttons .x-btn {
    background: transparent;
    border: 0;
}

.items-grid .x-toolbar-default {
    background-color: #f6f6f6;
}

.items-grid > .x-toolbar ~ .x-grid-header-ct {
    border-top: 1px solid #d0d0d0 !important;
}

.items-tab .x-tab-bar-horizontal .x-tab,
.x-window .x-tab-bar-horizontal .x-tab {
    border-radius: 6px 6px 0 0;
    background-color: transparent !important;
}

.items-tab .x-tab-bar-horizontal .x-tab-active,
.x-window .x-tab-bar-horizontal .x-tab-active {
    background-color: #f6f6f6 !important;
    border: none !important;
    border-right: 1px solid lightgray !important;
    border-left: 1px solid lightgray !important;
    border-top: 1px solid lightgray !important;
}

.items-tab .x-tab-bar-horizontal .x-tab:hover,
.x-window .x-tab-bar-horizontal .x-tab:hover {
    background-color: #f6f6f6 !important;
}

.items-tab .x-tab-bar-horizontal > .x-tab-bar-body {
    padding-left: 6px !important;
}

.items-tab .x-tab-active *, .x-window .x-tab-active * {
    color: #606060 !important;
}

.item-form-read .x-form-item-label-text {
    font-weight: bold;
}

.label-hint {
    opacity: 0.5;
    font-weight: normal;
}

.label-hint-button {
    text-decoration: none;
    color: #606060;
    display: inline-block;
    float: right;
    cursor: pointer;
    margin-left: 3px;
    margin-top: -2px;
    padding: 0 3px 0 3px;
    border: 1px solid #909090;
    border-radius: 6px;
}

.items-grid .x-column-header {
    background-color: #f6f6f6 !important;
}

.items-grid {
    border-radius: 6px;
}

.TypeItemForm .items-grid {
    margin: 0;
    border-radius: 0;
}

.items-grid.embedded-grid {
    margin: 4px;
    border-radius: 6px;
    box-shadow: 1px 1px 2px 1px;
    width: calc(100% - 24px) !important; /*compensate possible scrollbars*/
}

.items-grid-side-details > .x-panel-body > .x-fit-item {
    border-left: 1px solid lightgray;
}

div[class*=" TypeItems-"] > .x-panel-body > .InlineView > .x-panel-body > .gnosis-model-form > .x-panel-body,
.relationship-tabs > .x-panel-body > .InlineView > .x-panel-body > .gnosis-model-form > .x-panel-body {
    background: #f6f6f6;
}

.item-form-read .x-panel-header, .items-tab > .x-panel-body .item-form-read .x-panel-header {
    background-color: #f6f6f6;
}

.items-tab-main-area > .x-panel-body {
    background-color: #f6f6f6;
}

.items-tab > .x-panel-body .x-panel-header {
    background-color: #f6f6f6;
    border-color: #f6f6f6;
    /*
    border-top: 1px solid lightgray !important;
    border-bottom: 1px solid lightgray !important;
    */
}

.items-tab > .x-panel-body .x-panel-header.collapsed {
    border-width: 0;
}

.items-tab.items-tab-details-tab > .x-panel-body .x-panel-header {
    border-top: 0 !important;
}

.items-tab > .x-panel-body .relationship-tabs .x-panel-header {
    border-top: 0 !important;
}

@supports (-ms-ime-align:auto) {
    .items-tab > .x-panel-body .relationship-tabs .x-panel-header {
        border-top: 1px solid transparent !important;
    }
}

.items-tab > .x-panel-body .x-panel-header .x-tool-img {
    background-color: transparent;
}

.items-tab > .x-panel-body .x-panel-header .x-title-text, .items-tab > .x-panel-body .x-panel-header .x-tool-img {
    color: #606060;
}

.item-form-read .x-panel-header, .items-tab > .x-panel-body .item-form-read .x-panel-header {
    border-top: none !important;
}

.picklist-grid-picker .x-grid-group-hd {
    background-color: #d0d0d0;
    border-top: double 1px #32404e;
    border-bottom: 1px double #32404e;
}

.picklist-item-unselectable span {
    text-decoration: line-through;
}

.picklist-item-unselectable .picklist-item-unselectable-reason {
    opacity: 0.5;
    text-decoration: none;
}

.picklist-item-unselectable .picklist-item-unselectable-reason::before {
    content: " (";
}

.picklist-item-unselectable .picklist-item-unselectable-reason::after {
    content: ")";
}

.protected-value {
    display: inline-block;
    padding: 4px;
    border: 1px solid #999;
    border-radius: 6px;
    background-color: rgba(160, 228, 255, 0.25);
}

.failed-value {
    display: inline-block;
    color: red;
}

.summary-panel > .x-toolbar, .x-toolbar.summary {
    background: linear-gradient(170deg, #f6f6f6 20%, #ffffff 100%)
}

.item-info {
    width: 100%;
    padding: 1em;
    background: linear-gradient(170deg, #f6f6f6 0%, #ffffff 50%);
    color: SteelBlue;
}

.item-info.plain {
    background: none;
}

.item-info table {
    width: 100%;
    border-collapse: collapse;
}

.item-info.auto-width table {
    width: unset;
}

.item-info table tr.underlined {
    border-bottom: 1px dotted rgba(70, 130, 180, 0.2);
}

.item-info table tr.hidden {
    display: none;
}

.item-info table th {
    padding-top: 12px;
    vertical-align: bottom;
}

.item-info table tr:first-of-type th {
    padding-top: 0;
}

.item-info table td {
    padding: 0;
    vertical-align: top;
}

.item-info .label, .item-info .value {
    display: inline-block;
    vertical-align: top;
}

.item-info .label {
    margin-right: 4px;
    font-weight: 600;
}

.item-info .id {
    font-size: .8em;
}

.item-info .id .label {
    font-weight: normal;
    font-variant: small-caps;
}

.item-info .value ul {
    padding-left: 0;
}

.item-info .title {
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 8px;
}

/* Default print styles */

.item-content .item-title-print {
    font-size: 16px;
    font-weight: bold;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    padding-top: 1em;
}

.item-content .property-name-print {
    display: inline-block;
    font-weight: bold;
    width: 200px;
}

.item-content .property-value-print {
    display: inline-block;
}

.item-content .property-print {
    padding-left: 10px;
}

.item-level-2 {
    padding-left: 10px;
}

.item-level-3 {
    padding-left: 20px;
}

.item-level-4 {
    padding-left: 30px;
}

.item-level-5 {
    padding-left: 40px;
}

.item-level-6 {
    padding-left: 50px;
}

.item-level-7 {
    padding-left: 60px;
}

.item-level-8 {
    padding-left: 70px;
}

.list-item {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #999;
    background-color: rgba(160, 228, 255, 0.25);
}

.list-icon {
    float: left;
    padding-right: 10px;
}

.list-label {
    font: bold 13px arial;
}

.list-body {
    font: normal 11px arial;
}

.table-header {
    font-size: 14px;
    padding: 4px;
    text-align: center;
    border-bottom: 2px solid #999;
}

.table-cell {
    padding: 14px 4px 4px 4px;
    font: normal 9pt arial;
    border-bottom: 1px dashed #999;
}

.table-cell2 {
    padding: 14px 4px 4px 4px;
    font: normal 9pt arial;
}

.table-cell3 {
    text-align: right;
    padding: 14px 4px 4px 4px;
    font: normal 9pt arial;
}

.table-items {
    display: table;
}

.table-label {
    font: bold 13px arial;
    padding: 4px;
    border: 1px solid #999;
    background-color: rgba(160, 228, 255, 0.25);
}

.cell-body {
    font: normal 11px arial;
    padding: 4px;
    display: table-cell;
}

/* Default styles for ToHtml function */

.object {
}

.object div, .object table {
    margin-left: 16px;
}

.object > div, .object > table, .object td > div, .object td > table {
    margin-left: 0;
}

.object span.label {
    font-weight: bold;
}

    .object span.label:after {
        content: ": ";
    }

.object span > img {
    vertical-align: middle;
}

.object table {
    border-collapse: collapse;
}

.object th, .object td {
    border: 1px solid lightgray;
    padding: 4px;
}

.object td > table {
    width: 100%;
}

/* JsonView styles */

.json-name {
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
}

.json-name:after {
    content: ":";
    margin-right: 8px;
}

.json-value {
    display: inline-block;
    vertical-align: top;
}

.json-value.string {
    color: green;
}

.json-value.boolean {
    color: darkmagenta;
}

.json-value.number {
    color: blue;
}

.json-value.null {
    color: red;
}

.json-time {
    position: absolute;
    right: 4px;
    border-radius: 6px;
    background: white;
    border: 1px solid #ddd;
}

.json-error {
    color: red;
}

/**/

.picklist-grid-picker.x-panel-default {
    border: 1px solid #3892d4;
}

.picklist-grid-picker.x-panel-default:not(.x-panel-above) {
    border-top-width: 0;
}

.picklist-grid-picker.x-panel-default.x-panel-above {
    border-bottom-width: 0;
}

.picklist-buttons .x-btn {
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
}

.picklist-buttons .x-btn * {
    color: #959595 !important;
}

/* paging toolbar */
.paging-slider .x-slider-horz .x-slider-thumb {
    font: inherit !important;
    width: unset;
    user-select: none;
}

.paging-slider .x-slider-horz .x-slider-thumb .slider-text {
    padding: 0 0.2em;
    color: steelblue;
    font: default !important;
    font-weight: bold !important;
    font-size: 1.1em;
}

.grid-drop-target > .x-panel-body {
    background: lightyellow !important;
}

.search-trigger .x-form-trigger-wrap-default {
    border: 0;
}

/* Link form gradient toolbar fix */

.fix-link-form-toolbar .x-panel-body,
.fix-link-form-toolbar > .x-toolbar {
    background: transparent;
}

.fix-link-form-toolbar {
    background: linear-gradient(170deg, #f6f6f6 0%, #ffffff 50%);
}

.fix-link-form-toolbar .item-info {
    background: transparent;
}

.fc-left .x-form-trigger-wrap-default {
    border: 0;
}

.grid-in-menu.x-menu-item-indent-default {
    left: 0 !important;
}

.grid-in-menu, .grid-in-menu * {
    width: 100% !important;
}

.grid-in-menu .x-grid-cell:first-child .x-grid-cell-inner {
    padding-left: 36px;
    display: grid;
    grid-template-columns: 1fr min-content;
}

.grid-in-menu .x-grid-item {
    border: 0 !important;
}

.grid-in-menu .x-grid-body {
    border-top-width: 1px;
}

.grid-in-menu .x-column-header-inner {
    display: none;
}

.grid-in-menu .search-trigger .x-form-trigger {
    padding-right: .5em;
}

.items-grid .x-grid-body {
    border-width: 1px;
}

/* This is experimental for combined header/search
.items-grid.filters-visible .search-trigger .x-form-trigger-default {
	background-color: white;
}
.items-grid.filters-visible .x-column-header {
	background-color: white;
}
.items-grid.filters-visible .x-column-header-inner {
	display: none;
}
.items-grid.filters-visible .x-column-header {
	background-color: white !important;
}
.items-grid.filters-visible .search-trigger .x-form-text-default {
	background-color: white;
}
.items-grid.filters-visible .x-autocontainer-form-item {
	margin-bottom: 0;
}
*/

.dataview-items {
    padding: 0.5em;
    background: #fafafa;
}

.dataview-items-grid .x-dataview-item {
    display: inline-block;
    vertical-align: top;
}

.dataview-items .item-info {
    margin: 0.5em;
    padding: 0.5em;
    width: unset;
    border: 1px dotted #ccc;
}

.dataview-items .x-item-selected .item-info {
    background: #e0f8ff;
}

.tree-no-toggle-icons .x-tree-expander {
    display: none !important;
}
.drawer {
    background: #fff6;
    backdrop-filter: blur(3px);
}
.drawer > .x-panel-body > .x-tree-view {
    border-right: 1px solid #0000001f;
}
.drawer .x-grid-cell-inner {
    padding: 0;
}
.drawer .drawer-item {
    padding: 7px 10px 6px;
    display: flex;
    font-size: 14px;
    line-height: 32px;
    align-items: center;
}
.drawer .drawer-icon {
    font-size: 20px;
    display: inline-block;
    width: 40px;
    text-align: center;
}
.drawer .x-grid-item:not(.x-grid-item-over):not(.x-grid-item-selected) {
    background: transparent;
}
.drawer .drawer-item-expanded {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: flex-end;
}