.fi:before {
    font-family: Material Icons !important;
}
.fi-align-center:before {
    content: "format_align_center" !important;
}
.fi-align-justify:before {
    content: "format_align_justify" !important;
}
.fi-align-left:before {
    content: "format_align_left" !important;
}
.fi-align-right:before {
    content: "format_align_right" !important;
}
.fi-arrow-down:before {
    content: "arrow_downward" !important;
}
.fi-arrow-left:before {
    content: "\f060" !important;
}
.fi-arrow-right:before {
    content: "arrow_forward" !important;
}
.fi-arrow-up:before {
    content: "arrow_upward" !important;
}
.fi-bars:before {
    content: "menu" !important;
}
.fi-caret-down:before {
    content: "arrow_drop_down" !important;
}
.fi-caret-left:before {
    transform: rotate(270deg);
    transform-origin: 50% 50%;
}
.fi-caret-left:before,
.fi-caret-right:before {
    content: "arrow_drop_up" !important;
    display: inline-block;
}
.fi-caret-right:before {
    transform: rotate(90deg);
    transform-origin: 50% 50%;
}
.fi-caret-up:before {
    content: "arrow_drop_up" !important;
}
.fi-check:before {
    content: "check" !important;
}
.fi-chevron-down:before {
    display: inline-block;
    transform: rotate(270deg);
    transform-origin: 50% 50%;
}
.fi-chevron-down:before,
.fi-chevron-left:before {
    content: "chevron_left" !important;
}
.fi-chevron-right:before {
    content: "chevron_right" !important;
}
.fi-chevron-up:before {
    content: "chevron_left" !important;
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: 50% 50%;
}
.fi-edit:before {
    content: "edit" !important;
}
.fi-ellipsis-h:before {
    content: "more_horiz" !important;
}
.fi-ellipsis-v:before {
    content: "more_vert" !important;
}
.fi-filter:before {
    content: "filter_list" !important;
}
.fi-gear:before {
    content: "settings" !important;
}
.fi-group:before {
    content: "group" !important;
}
.fi-home:before {
    content: "home" !important;
}
.fi-lock:before {
    content: "lock" !important;
}
.fi-minus:before {
    content: "remove" !important;
}
.fi-pencil:before {
    content: "edit" !important;
}
.fi-plus:before {
    content: "add" !important;
}
.fi-print:before {
    content: "print" !important;
}
.fi-redo:before {
    content: "redo" !important;
}
.fi-refresh:before {
    content: "refresh" !important;
}
.fi-save:before {
    content: "save" !important;
}
.fi-search:before {
    content: "search" !important;
}
.fi-star:before {
    content: "star" !important;
}
.fi-times:before {
    content: "close" !important;
}
.fi-trash:before {
    content: "delete" !important;
}
.fi-th:before {
    content: "view_module" !important;
}
.fi-th-list:before {
    content: "list" !important;
}
.fi-undo:before {
    content: "undo" !important;
}
.fi-unlock:before {
    content: "lock_open" !important;
}
.fi-user:before {
    content: "person" !important;
}
.x-froala {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.x-froala .fr-wrapper {
    flex: 1;
}
.x-froala i.fas.fa-markdown {
    font-family: Font Awesome\5 Brands;
    font-weight: 400;
}
.x-froala i.fas.fa-enable-tracking:before {
    content: "\f573";
}
.x-froala i.fas.fa-show-changes:before {
    content: "\f06e";
}
.x-froala i.fas.fa-apply-all:before {
    content: "\f560";
}
.x-froala i.fas.fa-remove-all:before {
    content: "\f0e2";
}
.x-froala i.fas.fa-apply-last:before {
    content: "\f00c";
}
.x-froala i.fas.fa-remove-last:before {
    content: "\f0e2";
}
.fr-popup .fr-dropdown-list a.fr-command i.fas {
    line-height: 200%;
    text-align: center;
    width: 100%;
}
.x-froala.fr-box.fr-basic .fr-wrapper {
    background-color: #fafafa;
    background-color: var(--background-color);
    border-color: #e0e0e0;
    border-color: var(--reverse-border-color);
    border-style: solid;
}
.x-froala.fr-box.fr-basic .fr-wrapper .fr-element {
    color: #111;
    color: var(--color);
}
.x-froala .second-toolbar {
    background-color: #fafafa;
    background-color: var(--background-color);
    border-color: #e0e0e0;
    border-color: var(--reverse-border-color);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    border-style: solid;
}
.x-froala .fr-modal,
.x-froala .fr-popup,
.x-froala .fr-toolbar {
    background-color: #f5f5f5;
    background-color: var(--alt-background-color);
    border-color: #e0e0e0;
    border-color: var(--reverse-border-color);
    border-style: solid;
    color: #111;
    color: var(--color);
}
.x-froala .fr-modal .fr-newline,
.x-froala .fr-popup .fr-newline,
.x-froala .fr-toolbar .fr-newline {
    background: #e0e0e0;
    background: var(--reverse-alt-border-color);
    height: 2px;
}
.x-froala .fr-modal .fr-more-toolbar,
.x-froala .fr-modal .fr-more-toolbar.fr-expanded,
.x-froala .fr-popup .fr-more-toolbar,
.x-froala .fr-popup .fr-more-toolbar.fr-expanded,
.x-froala .fr-toolbar .fr-more-toolbar,
.x-froala .fr-toolbar .fr-more-toolbar.fr-expanded {
    background-color: #f5f5f5;
    background-color: var(--alt-background-color);
}
.x-froala .fr-modal .fr-command.fr-btn,
.x-froala .fr-popup .fr-command.fr-btn,
.x-froala .fr-toolbar .fr-command.fr-btn {
    color: #2196f3;
    color: var(--base-color);
    font-size: 13px;
}
.x-froala .fr-modal .fr-command.fr-btn.fr-btn-hover:not(.fr-table-cell),
.x-froala .fr-modal .fr-command.fr-btn.fr-expanded:not(.fr-table-cell),
.x-froala .fr-modal .fr-command.fr-btn:not(.fr-table-cell):focus,
.x-froala .fr-popup .fr-command.fr-btn.fr-btn-hover:not(.fr-table-cell),
.x-froala .fr-popup .fr-command.fr-btn.fr-expanded:not(.fr-table-cell),
.x-froala .fr-popup .fr-command.fr-btn:not(.fr-table-cell):focus,
.x-froala .fr-toolbar .fr-command.fr-btn.fr-btn-hover:not(.fr-table-cell),
.x-froala .fr-toolbar .fr-command.fr-btn.fr-expanded:not(.fr-table-cell),
.x-froala .fr-toolbar .fr-command.fr-btn:not(.fr-table-cell):focus {
    background: #eee;
    background: var(--hovered-background-color);
}
.x-froala .fr-modal .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active),
.x-froala .fr-popup .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active),
.x-froala .fr-toolbar .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active) {
    background: #f5f5f5;
    background: var(--alt-background-color);
}
.x-froala .fr-modal .fr-command.fr-btn.fr-dropdown:after,
.x-froala .fr-popup .fr-command.fr-btn.fr-dropdown:after,
.x-froala .fr-toolbar .fr-command.fr-btn.fr-dropdown:after {
    border-top-color: #2196f3;
    border-top-color: var(--base-color);
}
.x-froala .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active,
.x-froala .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:hover,
.x-froala .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active,
.x-froala .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover,
.x-froala .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
.x-froala .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover {
    background: #eee;
    background: var(--hovered-background-color);
}
.x-froala .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:after,
.x-froala .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:after,
.x-froala .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:after {
    border-bottom-color: #2196f3;
    border-bottom-color: var(--base-color);
}
.x-froala .fr-modal .fr-command.fr-btn + .fr-dropdown-menu,
.x-froala .fr-popup .fr-command.fr-btn + .fr-dropdown-menu,
.x-froala .fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu {
    background: #fafafa;
    background: var(--background-color);
}
.x-froala .fr-modal .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active,
.x-froala .fr-modal .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a:hover,
.x-froala .fr-popup .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active,
.x-froala .fr-popup .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a:hover,
.x-froala .fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active,
.x-froala .fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a:hover {
    background: #eee;
    background: var(--hovered-background-color);
}
.x-froala .fr-modal .fr-command.fr-btn i,
.x-froala .fr-popup .fr-command.fr-btn i,
.x-froala .fr-toolbar .fr-command.fr-btn i {
    color: #2196f3;
    color: var(--base-color);
    font-size: 13px;
}
.x-froala .fr-modal .fr-command.fr-btn:hover,
.x-froala .fr-popup .fr-command.fr-btn:hover,
.x-froala .fr-toolbar .fr-command.fr-btn:hover {
    background: hsla(0, 0%, 7%, 0.075);
}
.x-froala .fr-modal.fr-top,
.x-froala .fr-popup.fr-top,
.x-froala .fr-toolbar.fr-top {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.x-froala .fr-modal .fr-dropdown-content .fr-command i,
.x-froala .fr-popup .fr-dropdown-content .fr-command i,
.x-froala .fr-toolbar .fr-dropdown-content .fr-command i {
    color: #2196f3;
    color: var(--base-color);
    font-size: 13px;
}
.x-button-alt.x-button-decline {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-alt.x-button-decline .x-inner-el {
    background-color: #c62828;
    background-color: var(--alert-color);
}
.x-button-alt.x-button-decline .x-icon-el,
.x-button-alt.x-button-decline.x-hovered {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-alt.x-button-decline.x-hovered .x-inner-el {
    background-color: #c62828;
    background-color: var(--alert-color);
}
.x-button-alt.x-button-decline.x-hovered .x-icon-el,
.x-button-alt.x-button-decline.x-pressed,
.x-button-alt.x-button-decline.x-pressing {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-alt.x-button-decline.x-pressed .x-inner-el,
.x-button-alt.x-button-decline.x-pressing .x-inner-el {
    background-color: #c62828;
    background-color: var(--alert-color);
}
.x-button-alt.x-button-decline.x-pressed .x-icon-el,
.x-button-alt.x-button-decline.x-pressing .x-icon-el,
.x-keyboard-mode .x-button-alt.x-button-decline.x-focused {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-keyboard-mode .x-button-alt.x-button-decline.x-focused .x-inner-el {
    background-color: #c62828;
    background-color: var(--alert-color);
}
.x-button-alt.x-button-confirm,
.x-keyboard-mode .x-button-alt.x-button-decline.x-focused .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-alt.x-button-confirm .x-inner-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
}
.x-button-alt.x-button-confirm .x-icon-el,
.x-button-alt.x-button-confirm.x-hovered {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-alt.x-button-confirm.x-hovered .x-inner-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
}
.x-button-alt.x-button-confirm.x-hovered .x-icon-el,
.x-button-alt.x-button-confirm.x-pressed,
.x-button-alt.x-button-confirm.x-pressing {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-alt.x-button-confirm.x-pressed .x-inner-el,
.x-button-alt.x-button-confirm.x-pressing .x-inner-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
}
.x-button-alt.x-button-confirm.x-pressed .x-icon-el,
.x-button-alt.x-button-confirm.x-pressing .x-icon-el,
.x-keyboard-mode .x-button-alt.x-button-confirm.x-focused {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-keyboard-mode .x-button-alt.x-button-confirm.x-focused .x-inner-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
}
.x-keyboard-mode .x-button-alt.x-button-confirm.x-focused .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button .x-icon-el.fa-1x {
    height: 100%;
    width: 100%;
}
.x-button .x-icon-el.fa-1x:before,
.x-ie11 .x-button .x-icon-el.fa-1x:before {
    font-size: 1em;
}
.x-button .x-icon-el.fa-2x {
    height: 100%;
    width: 100%;
}
.x-button .x-icon-el.fa-2x:before {
    font-size: 1em;
}
.x-ie11 .x-button .x-icon-el.fa-2x:before {
    font-size: 2em;
}
.x-button .x-icon-el.fa-3x {
    height: 100%;
    width: 100%;
}
.x-button .x-icon-el.fa-3x:before {
    font-size: 1em;
}
.x-ie11 .x-button .x-icon-el.fa-3x:before {
    font-size: 3em;
}
.x-button .x-icon-el.fa-4x {
    height: 100%;
    width: 100%;
}
.x-button .x-icon-el.fa-4x:before {
    font-size: 1em;
}
.x-ie11 .x-button .x-icon-el.fa-4x:before {
    font-size: 4em;
}
.x-button .x-icon-el.fa-5x {
    height: 100%;
    width: 100%;
}
.x-button .x-icon-el.fa-5x:before {
    font-size: 1em;
}
.x-ie11 .x-button .x-icon-el.fa-5x:before {
    font-size: 5em;
}
.x-button .x-icon-el.fa-6x {
    height: 100%;
    width: 100%;
}
.x-button .x-icon-el.fa-6x:before {
    font-size: 1em;
}
.x-ie11 .x-button .x-icon-el.fa-6x:before {
    font-size: 6em;
}
.x-button .x-icon-el.fa-7x {
    height: 100%;
    width: 100%;
}
.x-button .x-icon-el.fa-7x:before {
    font-size: 1em;
}
.x-ie11 .x-button .x-icon-el.fa-7x:before {
    font-size: 7em;
}
.x-button .x-icon-el.fa-8x {
    height: 100%;
    width: 100%;
}
.x-button .x-icon-el.fa-8x:before {
    font-size: 1em;
}
.x-ie11 .x-button .x-icon-el.fa-8x:before {
    font-size: 8em;
}
.x-button .x-icon-el.fa-9x {
    height: 100%;
    width: 100%;
}
.x-button .x-icon-el.fa-9x:before {
    font-size: 1em;
}
.x-ie11 .x-button .x-icon-el.fa-9x:before {
    font-size: 9em;
}
.x-button .x-icon-el.fa-10x {
    height: 100%;
    width: 100%;
}
.x-button .x-icon-el.fa-10x:before {
    font-size: 1em;
}
.x-ie11 .x-button .x-icon-el.fa-10x:before {
    font-size: 10em;
}
.x-button .x-icon-el.fa-lg,
.x-button .x-icon-el.fa-sm,
.x-button .x-icon-el.fa-xs {
    height: 100%;
    width: 100%;
}
.x-button .x-icon-el.fa-lg:before,
.x-button .x-icon-el.fa-sm:before,
.x-button .x-icon-el.fa-xs:before {
    font-size: 1em;
}
.x-ie11 .x-button .x-icon-el.fa-lg:before {
    font-size: 1.33333em;
}
.x-ie11 .x-button .x-icon-el.fa-xs:before {
    font-size: 0.75em;
}
.x-ie11 .x-button .x-icon-el.fa-sm:before {
    font-size: 0.875em;
}
.x-splitButton-alt.x-splitButton-decline,
.x-splitButton-alt.x-splitButton-decline .x-arrow-el,
.x-splitButton-alt.x-splitButton-decline .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-alt.x-splitButton-decline .x-splitBody-el {
    background-color: #c62828;
    background-color: var(--alert-color);
}
.x-splitButton-alt.x-splitButton-decline.x-arrow-align-right .x-splitArrow-el {
    border-left: 1px solid #fff;
    border-left: 1px solid var(--base-foreground-color);
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-alt.x-splitButton-decline.x-arrow-align-right .x-splitArrow-el.x-focused,
.x-splitButton-alt.x-splitButton-decline.x-arrow-align-right .x-splitArrow-el.x-hovered,
.x-splitButton-alt.x-splitButton-decline.x-arrow-align-right .x-splitArrow-el.x-pressed,
.x-splitButton-alt.x-splitButton-decline.x-arrow-align-right .x-splitArrow-el.x-pressing {
    border-left: 1px solid #fff;
    border-left: 1px solid var(--base-foreground-color);
}
.x-splitButton-alt.x-splitButton-decline.x-arrow-align-bottom .x-splitArrow-el,
.x-splitButton-alt.x-splitButton-decline.x-arrow-align-bottom .x-splitArrow-el.x-focused,
.x-splitButton-alt.x-splitButton-decline.x-arrow-align-bottom .x-splitArrow-el.x-hovered,
.x-splitButton-alt.x-splitButton-decline.x-arrow-align-bottom .x-splitArrow-el.x-pressed,
.x-splitButton-alt.x-splitButton-decline.x-arrow-align-bottom .x-splitArrow-el.x-pressing {
    border-top: 1px solid #fff;
    border-top: 1px solid var(--base-foreground-color);
}
.x-splitButton-alt.x-splitButton-decline .x-hovered,
.x-splitButton-alt.x-splitButton-decline.x-hovered,
.x-splitButton-alt.x-splitButton-decline.x-hovered .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-alt.x-splitButton-decline .x-hovered.x-splitArrow-el,
.x-splitButton-alt.x-splitButton-decline .x-hovered.x-splitBody-el,
.x-splitButton-alt.x-splitButton-decline .x-hovered.x-splitInner-el {
    background-color: #c62828;
    background-color: var(--alert-color);
}
.x-splitButton-alt.x-splitButton-decline .x-pressed,
.x-splitButton-alt.x-splitButton-decline .x-pressing,
.x-splitButton-alt.x-splitButton-decline.x-pressed,
.x-splitButton-alt.x-splitButton-decline.x-pressed .x-icon-el,
.x-splitButton-alt.x-splitButton-decline.x-pressing,
.x-splitButton-alt.x-splitButton-decline.x-pressing .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-alt.x-splitButton-decline .x-pressed.x-splitArrow-el,
.x-splitButton-alt.x-splitButton-decline .x-pressed.x-splitBody-el,
.x-splitButton-alt.x-splitButton-decline .x-pressed.x-splitInner-el,
.x-splitButton-alt.x-splitButton-decline .x-pressing.x-splitArrow-el,
.x-splitButton-alt.x-splitButton-decline .x-pressing.x-splitBody-el,
.x-splitButton-alt.x-splitButton-decline .x-pressing.x-splitInner-el {
    background-color: #c62828;
    background-color: var(--alert-color);
}
.x-keyboard-mode .x-splitButton-alt.x-splitButton-decline .x-focused,
.x-keyboard-mode .x-splitButton-alt.x-splitButton-decline.x-focused,
.x-keyboard-mode .x-splitButton-alt.x-splitButton-decline.x-focused .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-keyboard-mode .x-splitButton-alt.x-splitButton-decline .x-focused.x-splitArrow-el,
.x-keyboard-mode .x-splitButton-alt.x-splitButton-decline .x-focused.x-splitBody-el,
.x-keyboard-mode .x-splitButton-alt.x-splitButton-decline .x-focused.x-splitInner-el {
    background-color: #c62828;
    background-color: var(--alert-color);
}
.x-splitButton-alt.x-splitButton-confirm,
.x-splitButton-alt.x-splitButton-confirm .x-arrow-el,
.x-splitButton-alt.x-splitButton-confirm .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-alt.x-splitButton-confirm .x-splitBody-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
}
.x-splitButton-alt.x-splitButton-confirm.x-arrow-align-right .x-splitArrow-el {
    border-left: 1px solid #fff;
    border-left: 1px solid var(--base-foreground-color);
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-alt.x-splitButton-confirm.x-arrow-align-right .x-splitArrow-el.x-focused,
.x-splitButton-alt.x-splitButton-confirm.x-arrow-align-right .x-splitArrow-el.x-hovered,
.x-splitButton-alt.x-splitButton-confirm.x-arrow-align-right .x-splitArrow-el.x-pressed,
.x-splitButton-alt.x-splitButton-confirm.x-arrow-align-right .x-splitArrow-el.x-pressing {
    border-left: 1px solid #fff;
    border-left: 1px solid var(--base-foreground-color);
}
.x-splitButton-alt.x-splitButton-confirm.x-arrow-align-bottom .x-splitArrow-el,
.x-splitButton-alt.x-splitButton-confirm.x-arrow-align-bottom .x-splitArrow-el.x-focused,
.x-splitButton-alt.x-splitButton-confirm.x-arrow-align-bottom .x-splitArrow-el.x-hovered,
.x-splitButton-alt.x-splitButton-confirm.x-arrow-align-bottom .x-splitArrow-el.x-pressed,
.x-splitButton-alt.x-splitButton-confirm.x-arrow-align-bottom .x-splitArrow-el.x-pressing {
    border-top: 1px solid #fff;
    border-top: 1px solid var(--base-foreground-color);
}
.x-splitButton-alt.x-splitButton-confirm .x-hovered,
.x-splitButton-alt.x-splitButton-confirm.x-hovered,
.x-splitButton-alt.x-splitButton-confirm.x-hovered .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-alt.x-splitButton-confirm .x-hovered.x-splitArrow-el,
.x-splitButton-alt.x-splitButton-confirm .x-hovered.x-splitBody-el,
.x-splitButton-alt.x-splitButton-confirm .x-hovered.x-splitInner-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
}
.x-splitButton-alt.x-splitButton-confirm .x-pressed,
.x-splitButton-alt.x-splitButton-confirm .x-pressing,
.x-splitButton-alt.x-splitButton-confirm.x-pressed,
.x-splitButton-alt.x-splitButton-confirm.x-pressed .x-icon-el,
.x-splitButton-alt.x-splitButton-confirm.x-pressing,
.x-splitButton-alt.x-splitButton-confirm.x-pressing .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-alt.x-splitButton-confirm .x-pressed.x-splitArrow-el,
.x-splitButton-alt.x-splitButton-confirm .x-pressed.x-splitBody-el,
.x-splitButton-alt.x-splitButton-confirm .x-pressed.x-splitInner-el,
.x-splitButton-alt.x-splitButton-confirm .x-pressing.x-splitArrow-el,
.x-splitButton-alt.x-splitButton-confirm .x-pressing.x-splitBody-el,
.x-splitButton-alt.x-splitButton-confirm .x-pressing.x-splitInner-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
}
.x-keyboard-mode .x-splitButton-alt.x-splitButton-confirm .x-focused,
.x-keyboard-mode .x-splitButton-alt.x-splitButton-confirm.x-focused,
.x-keyboard-mode .x-splitButton-alt.x-splitButton-confirm.x-focused .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-keyboard-mode .x-splitButton-alt.x-splitButton-confirm .x-focused.x-splitArrow-el,
.x-keyboard-mode .x-splitButton-alt.x-splitButton-confirm .x-focused.x-splitBody-el,
.x-keyboard-mode .x-splitButton-alt.x-splitButton-confirm .x-focused.x-splitInner-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
}
.x-size-monitored {
    position: relative;
}
.x-size-monitors {
    left: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
}
.x-size-monitors,
.x-size-monitors > * {
    height: 100%;
    overflow: hidden;
    width: 100%;
}
.x-size-monitors.scroll > .shrink:after {
    content: "";
    display: block;
    height: 200%;
    min-height: 1px;
    min-width: 1px;
    width: 200%;
}
.x-size-monitors.scroll > .expand:after {
    content: "";
    display: block;
    height: 100000px;
    width: 100000px;
}
.x-size-monitors.overflowchanged > .shrink > * {
    height: 100%;
    width: 100%;
}
.x-size-monitors.overflowchanged > .expand > * {
    height: 200%;
    width: 200%;
}
.x-size-change-detector {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: -1;
}
.x-size-change-detector > * {
    visibility: hidden;
}
.x-size-change-detector-shrink > * {
    height: 200%;
    width: 200%;
}
.x-size-change-detector-expand > * {
    height: 100000px;
    width: 100000px;
}
@-webkit-keyframes x-paint-monitor-helper {
    0% {
        zoom: 1;
    }
    to {
        zoom: 1;
    }
}
@keyframes x-paint-monitor-helper {
    0% {
        zoom: 1;
    }
    to {
        zoom: 1;
    }
}
.x-paint-monitored {
    position: relative;
}
.x-safari .x-paint-monitor.cssanimation {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.x-paint-monitor {
    height: 0 !important;
    visibility: hidden;
    width: 0 !important;
}
.x-paint-monitor.cssanimation {
    -webkit-animation-duration: 0.0001ms;
    animation-duration: 0.0001ms;
    -webkit-animation-name: x-paint-monitor-helper;
    animation-name: x-paint-monitor-helper;
}
.x-paint-monitor.overflowchange {
    overflow: hidden;
}
.x-paint-monitor.overflowchange:after {
    content: "";
    display: block;
    height: 1px !important;
    width: 1px !important;
}
.x-unselectable {
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    cursor: default;
}
.x-hidden-clip {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
}
.x-hidden-display,
.x-hiddenfield {
    display: none !important;
}
.x-hidden-offsets {
    display: block !important;
    position: absolute !important;
    top: -10000px !important;
    visibility: hidden !important;
}
.x-hidden-opacity {
    opacity: 0 !important;
    pointer-events: none;
}
.x-hidden-visibility {
    visibility: hidden !important;
}
.x-pressed .x-ripple-transition,
.x-pressed .x-ripple-transition .x-arrow-el,
.x-pressed .x-ripple-transition .x-icon-el,
.x-pressing .x-ripple-transition,
.x-pressing .x-ripple-transition .x-arrow-el,
.x-pressing .x-ripple-transition .x-icon-el {
    transition:
        background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        color 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.x-rippling {
    position: relative;
}
.x-rippling.x-component-confirm .x-ripple {
    background-color: #7cb342;
    background-color: var(--confirm-color);
}
.x-rippling.x-component-decline .x-ripple {
    background-color: #c62828;
    background-color: var(--alert-color);
}
.x-rippling.x-rippling-unbound {
    overflow: visible !important;
}
.x-rippling.x-rippling-unbound .x-ripple-container {
    overflow: visible;
    position: absolute;
}
.x-safari .x-rippling:not(.x-rippling-unbound) .x-ripple-container {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.x-ripple-container {
    bottom: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.x-ripple-wrapper {
    z-index: 1000;
}
.x-button-fab .x-ripple-container,
.x-button-round .x-ripple-container,
.x-splitButton-fab .x-ripple-container,
.x-splitButton-round .x-ripple-container {
    border-radius: 10000px;
}
.x-ripple {
    background-color: hsla(0, 0%, 7%, 0.4);
    border-radius: 50%;
    opacity: 0.4;
    pointer-events: none;
    position: absolute;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.x-rippling.x-rippling-unbound .x-ripple {
    -webkit-animation: x-ripple-unbound-animation 0.3s ease-out forwards;
    animation: x-ripple-unbound-animation 0.3s ease-out forwards;
}
.x-rippling:not(.x-rippling-unbound) .x-ripple {
    -webkit-animation: x-ripple-animation 0.35s ease-out forwards;
    animation: x-ripple-animation 0.35s ease-out forwards;
}
@-webkit-keyframes x-ripple-animation {
    0% {
        opacity: 0.4;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    75% {
        opacity: 0.2;
        -webkit-transform: scale(2);
        transform: scale(2);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(2.35);
        transform: scale(2.35);
    }
}
@keyframes x-ripple-animation {
    0% {
        opacity: 0.4;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    75% {
        opacity: 0.2;
        -webkit-transform: scale(2);
        transform: scale(2);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(2.35);
        transform: scale(2.35);
    }
}
@-webkit-keyframes x-ripple-unbound-animation {
    0% {
        opacity: 0.4;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    75% {
        opacity: 0.2;
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2);
    }
}
@keyframes x-ripple-unbound-animation {
    0% {
        opacity: 0.4;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    75% {
        opacity: 0.2;
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2);
    }
}
.x-progress {
    overflow: hidden;
    position: relative;
}
.x-progress-bar {
    height: 100%;
    width: 0;
}
.x-progress-text {
    overflow: hidden;
}
.x-progress-bar {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
}
.x-touch-action-pan-y {
    overflow-x: hidden !important;
}
.x-touch-action-pan-x {
    overflow-y: hidden !important;
}
.x-drag-body {
    cursor: default;
}
.x-drag-body * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.x-drag-dragging {
    pointer-events: none;
    z-index: 1000000 !important;
}
.x-treelist {
    background-position: 22px 0;
    overflow: hidden;
    padding: 0;
}
.x-treelist-container,
.x-treelist-root-container {
    width: 100%;
}
.x-treelist-toolstrip {
    display: none;
}
.x-treelist-micro > .x-treelist-toolstrip {
    display: inline-block;
}
.x-treelist-micro > .x-treelist-root-container {
    display: none;
}
.x-treelist-container,
.x-treelist-item,
.x-treelist-root-container {
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.x-treelist-item-tool,
.x-treelist-item-wrap,
.x-treelist-row {
    position: relative;
}
.x-treelist-item-expander,
.x-treelist-item-icon {
    display: none;
    position: absolute;
    top: 0;
}
.x-treelist-item-expander {
    cursor: pointer;
    right: 0;
}
.x-treelist-expander-only .x-treelist-item-expandable > * > .x-treelist-item-wrap > * {
    cursor: pointer;
}
.x-treelist-item-text {
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}
.x-treelist-item-collapsed > .x-treelist-container {
    display: none;
}
.x-treelist-item-expandable > * > * > .x-treelist-item-expander,
.x-treelist-item-icon {
    display: block;
}
.x-treelist-item-floated > * > * > .x-treelist-item-expander,
.x-treelist-item-floated > * > * > .x-treelist-item-icon {
    display: none;
}
.x-treelist-expander-first .x-treelist-item-expander {
    left: 0;
    right: auto;
}
.x-treelist-toolstrip {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-treelist-item-tool {
    padding-left: 16px;
    padding-left: var(--content-padding);
    padding-right: 16px;
    padding-right: var(--content-padding);
}
.x-treelist-item-expander,
.x-treelist-item-icon:before,
.x-treelist-item-tool:before {
    line-height: 24px;
}
.x-big .x-treelist-item-expander,
.x-big .x-treelist-item-icon:before,
.x-big .x-treelist-item-tool:before {
    line-height: 32px;
}
.x-treelist-item-expander,
.x-treelist-item-icon,
.x-treelist-item-tool {
    background-position: 0;
    background-repeat: no-repeat;
    text-align: center;
}
.x-treelist-item-loading .x-treelist-item-icon {
    background-image: url(resources/images/tree/loading.gif);
    color: transparent;
}
.x-treelist-item-icon,
.x-treelist-item-tool {
    color: #111;
    color: var(--color);
    font-size: 18px;
    width: 22px;
}
.x-treelist-item-tool {
    width: 54px;
}
.x-treelist-item-expander {
    color: #111;
    color: var(--color);
    font-size: 16px;
    width: 16px;
}
.x-big .x-treelist-item-expander {
    font-size: 24px;
    width: 24px;
}
.x-treelist-item-expander:after {
    content: "keyboard_arrow_down";
    font-family: Material Icons;
    font-feature-settings: "liga";
    line-height: 24px;
}
.x-treelist-item-expanded > * > * > .x-treelist-item-expander:after {
    content: "keyboard_arrow_up";
    font-family: Material Icons;
    font-feature-settings: "liga";
    line-height: 24px;
}
.x-treelist-item-text {
    color: #111;
    color: var(--color);
    font-size: 14px;
    line-height: 24px;
    margin-left: 38px;
    margin-right: 16px;
    text-overflow: ellipsis;
}
.x-big .x-treelist-item-text {
    line-height: 32px;
    margin-right: 24px;
}
.x-treelist-row {
    padding-left: 16px;
    padding-left: var(--content-padding);
    padding-right: 16px;
    padding-right: var(--content-padding);
}
.x-treelist-item-floated .x-treelist-container {
    width: auto;
}
.x-treelist-item-floated > .x-treelist-row {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-big .x-treelist-item-floated > .x-treelist-container,
.x-treelist-item-floated > .x-treelist-container {
    margin-left: -16px;
}
.x-treelist-item-floated > * > * > .x-treelist-item-text {
    margin-left: 0;
}
.x-treelist-item-floated > * .x-treelist-row {
    cursor: pointer;
    padding-left: 0;
}
.x-treelist-item-floated .x-treelist-row:before {
    width: 0;
}
.x-treelist-item-floated > .x-treelist-row-over {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-treelist-item-floated > .x-treelist-row-over > * > .x-treelist-item-text {
    color: #111;
    color: var(--color);
}
.x-treelist-item-expanded > .x-treelist-item-expander:after {
    content: "keyboard_arrow_up";
    font-family: Material Icons;
    font-feature-settings: "liga";
    line-height: 1;
}
.x-treelist-item-collapsed > * > .x-treelist-item-expander:after {
    content: "keyboard_arrow_down";
    font-family: Material Icons;
    font-feature-settings: "liga";
    line-height: 1;
}
.x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-expander,
.x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-icon,
.x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-text {
    color: #111;
    color: var(--color);
    transition: color 0.5s;
}
.x-treelist-row-over {
    background-color: rgba(0, 0, 0, 0.03);
    background-color: var(--overlay-color);
}
.x-treelist-row-over > * > .x-treelist-item-expander,
.x-treelist-row-over > * > .x-treelist-item-icon,
.x-treelist-row-over > * > .x-treelist-item-text {
    color: #111;
    color: var(--color);
    transition: color 0.5s;
}
.x-treelist-expander-first .x-treelist-item-icon {
    left: 16px;
}
.x-big .x-treelist-expander-first .x-treelist-item-icon {
    left: 24px;
}
.x-treelist-expander-first .x-treelist-item-text {
    margin-left: 54px;
    margin-right: 0;
}
.x-treelist-expander-first .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
    margin-left: 24px;
}
.x-big .x-treelist-expander-first .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
    margin-left: 32px;
}
.x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
    margin-left: 8px;
}
.x-treelist-nav {
    background-position: 24px 0;
    padding: 0;
}
.x-treelist-nav,
.x-treelist-nav .x-treelist-toolstrip {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-treelist-nav .x-treelist-item-selected.x-treelist-item-tool {
    background-color: #d4d4d4;
    color: #111;
    color: var(--color);
}
.x-treelist-nav .x-treelist-item-selected.x-treelist-item-tool:after {
    background-color: #ff9800;
    background-color: var(--accent-color);
    content: " ";
    height: 44px;
    left: 0;
    position: absolute;
    top: 0;
    width: 4px;
}
.x-treelist-nav .x-treelist-item-selected > .x-treelist-row {
    background-color: #e1e1e1;
}
.x-treelist-nav .x-treelist-item-tool {
    padding-left: 16px;
    padding-left: var(--content-padding);
    padding-right: 16px;
    padding-right: var(--content-padding);
}
.x-treelist-nav .x-treelist-item-tool-floated:after {
    background-color: #ffe0b2;
    background-color: var(--accent-light-color);
    content: " ";
    height: 44px;
    left: 0;
    position: absolute;
    top: 0;
    width: 4px;
}
.x-treelist-nav .x-treelist-item-expander,
.x-treelist-nav .x-treelist-item-icon:before,
.x-treelist-nav .x-treelist-item-tool:before {
    line-height: 44px;
}
.x-treelist-nav .x-treelist-item-expander,
.x-treelist-nav .x-treelist-item-icon,
.x-treelist-nav .x-treelist-item-tool {
    background-position: 0;
    background-repeat: no-repeat;
    text-align: center;
}
.x-treelist-nav .x-treelist-item-loading .x-treelist-item-icon {
    background-image: url(resources/images/tree/loading.gif);
    color: transparent;
}
.x-treelist-nav .x-treelist-item-icon,
.x-treelist-nav .x-treelist-item-tool {
    color: #515151;
    font-size: 18px;
    width: 24px;
}
.x-treelist-nav .x-treelist-item-tool {
    width: 56px;
}
.x-treelist-nav .x-treelist-item-expander {
    color: #5e5e5e;
    font-size: 22px;
    width: 24px;
}
.x-treelist-nav .x-treelist-item-expander:after {
    content: "keyboard_arrow_down";
    font-family: Material Icons;
    font-feature-settings: "liga";
    line-height: 44px;
}
.x-treelist-nav .x-treelist-item-expanded > * > * > .x-treelist-item-expander:after {
    content: "keyboard_arrow_up";
    font-family: Material Icons;
    font-feature-settings: "liga";
    line-height: 44px;
}
.x-treelist-nav .x-treelist-item-text {
    color: #111;
    color: var(--color);
    font-size: 16px;
    line-height: 44px;
    margin-left: 40px;
    margin-right: 24px;
}
.x-treelist-nav .x-treelist-row {
    padding-left: 16px;
    padding-left: var(--content-padding);
    padding-right: 16px;
    padding-right: var(--content-padding);
}
.x-treelist-nav .x-treelist-item-selected > .x-treelist-row:before,
.x-treelist-nav .x-treelist-row-over:before {
    content: " ";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 6px;
}
.x-treelist-nav .x-treelist-row-over:before {
    background-color: #ffe0b2;
    background-color: var(--accent-light-color);
}
.x-treelist-nav .x-treelist-item-selected > .x-treelist-row-over:before,
.x-treelist-nav .x-treelist-item-selected > .x-treelist-row:before {
    background-color: #ff9800;
    background-color: var(--accent-color);
}
.x-treelist-nav .x-treelist-item-floated .x-treelist-container {
    width: auto;
}
.x-treelist-nav .x-treelist-item-floated > .x-treelist-row {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-big .x-treelist-nav .x-treelist-item-floated > .x-treelist-container,
.x-treelist-nav .x-treelist-item-floated > .x-treelist-container {
    margin-left: -16px;
}
.x-treelist-nav .x-treelist-item-floated > * > * > .x-treelist-item-text {
    margin-left: 0;
}
.x-treelist-nav .x-treelist-item-floated > * .x-treelist-row {
    cursor: pointer;
    padding-left: 0;
}
.x-treelist-nav .x-treelist-item-floated .x-treelist-row:before {
    width: 0;
}
.x-treelist-nav .x-treelist-item-floated > .x-treelist-row-over {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-treelist-nav .x-treelist-item-floated > .x-treelist-row-over > * > .x-treelist-item-text {
    color: #111;
    color: var(--color);
}
.x-treelist-nav .x-treelist-item-expanded {
    background-color: #eee;
}
.x-treelist-nav .x-treelist-item-expanded > .x-treelist-item-expander:after {
    content: "keyboard_arrow_up";
    font-family: Material Icons;
    font-feature-settings: "liga";
    line-height: 1;
}
.x-treelist-nav .x-treelist-item-collapsed > * > .x-treelist-item-expander:after {
    content: "keyboard_arrow_down";
    font-family: Material Icons;
    font-feature-settings: "liga";
    line-height: 1;
}
.x-treelist-nav .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-icon {
    color: #515151;
    transition: none;
}
.x-treelist-nav .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-expander,
.x-treelist-nav .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-text {
    color: #111;
    color: var(--color);
    transition: none;
}
.x-treelist-nav .x-treelist-row-over {
    background-color: #e1e1e1;
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.x-treelist-nav .x-treelist-row-over > * > .x-treelist-item-icon {
    color: #515151;
    transition: none;
}
.x-treelist-nav .x-treelist-row-over > * > .x-treelist-item-expander,
.x-treelist-nav .x-treelist-row-over > * > .x-treelist-item-text {
    color: #111;
    color: var(--color);
    transition: none;
}
.x-treelist-nav .x-treelist-expander-first .x-treelist-item-icon {
    left: 24px;
}
.x-treelist-nav .x-treelist-expander-first .x-treelist-item-text {
    margin-left: 64px;
    margin-right: 0;
}
.x-treelist-nav .x-treelist-expander-first .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
    margin-left: 32px;
}
.x-treelist-nav .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
    margin-left: 8px;
}
@font-face {
    font-family: ExtJS;
    font-style: normal;
    font-weight: 400;
    src: url(resources/font-ext/fonts/ExtJS.eot?-tqegh9);
    src:
        url(resources/font-ext/fonts/ExtJS.eot?#iefix-tqegh9) format("embedded-opentype"),
        url(resources/font-ext/fonts/ExtJS.ttf?-tqegh9) format("truetype"),
        url(resources/font-ext/fonts/ExtJS.woff?-tqegh9) format("woff"),
        url(resources/font-ext/fonts/ExtJS.svg?-tqegh9#ExtJS) format("svg");
}
.ext {
    font-family: ExtJS;
}
.ext-sencha:before {
    content: "\e61e";
}
.ext-checkbox-checked:before {
    content: "\e613";
}
.ext-checkbox-unchecked:before {
    content: "\e614";
}
.ext-chevron-left:before {
    content: "\e615";
}
.ext-chevron-right:before {
    content: "\e616";
}
.ext-double-chevron-left:before {
    content: "\e617";
}
.ext-double-chevron-right:before {
    content: "\e618";
}
.ext-sort-down:before {
    content: "\e619";
}
.ext-sort-up:before {
    content: "\e61a";
}
.ext-spinner-down:before {
    content: "\e61b";
}
.ext-spinner-up:before {
    content: "\e61c";
}
.ext-square-edit:before {
    content: "\e61d";
}
.ext-equals-vertical:before {
    content: "\e612";
}
.ext-expand:before {
    content: "\e600";
}
.ext-columns:before {
    content: "\e601";
}
.ext-dirty:before {
    content: "\e602";
}
.ext-dirty-rtl:before {
    content: "\e603";
}
.ext-edit-html:before {
    content: "\e604";
}
.ext-equals:before {
    content: "\e605";
}
.ext-collapse:before {
    content: "\e606";
}
.ext-group-by:before {
    content: "\e607";
}
.ext-minimize:before {
    content: "\e608";
}
.ext-nw-handle:before {
    content: "\e609";
}
.ext-ne-handle:before {
    content: "\e60a";
}
.ext-sw-handle:before {
    content: "\e60b";
}
.ext-se-handle:before {
    content: "\e60c";
}
.ext-text-background-color:before {
    content: "\e60d";
}
.ext-text-color:before {
    content: "\e60e";
}
.ext-text-decrease:before {
    content: "\e60f";
}
.ext-text-increase:before {
    content: "\e610";
}
.ext-unpin:before {
    content: "\e611";
}
.x-float-wrap {
    bottom: 0;
    left: 0;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.x-float-wrap > .x-floated {
    pointer-events: all;
    position: absolute;
}
#ext-global-floatWrap {
    z-index: 999999;
}
body.x-chromeios {
    height: 100vh !important;
}
body.x-chromeios .x-float-wrap {
    height: 100vh;
}
.x-root {
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.x-root,
.x-root *,
.x-root :after,
.x-root :before {
    box-sizing: border-box;
}
.x-has-viewport > body,
html.x-has-viewport {
    height: 100%;
    margin: 0;
    width: 100%;
}
.x-fixed-viewport > body,
html.x-fixed-viewport {
    position: fixed;
}
@media print {
    .x-has-unscalable-viewport > body,
    html.x-has-unscalable-viewport {
        position: static;
    }
}
.x-user-selectable-all {
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}
.x-user-selectable-auto {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: text;
    user-select: auto;
}
.x-user-selectable-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.x-user-selectable-text {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.x-focused {
    outline: none;
}
.x-maximized {
    height: 100% !important;
    left: 0 !important;
    max-height: 100% !important;
    max-width: 100% !important;
    top: 0 !important;
    transform: translateZ(0) !important;
    width: 100% !important;
}
@-ms-viewport {
    width: device-width;
}
@-webkit-keyframes x-loading-spinner-rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    8.32% {
        -webkit-transform: rotate(0deg);
    }
    8.33% {
        -webkit-transform: rotate(30deg);
    }
    16.65% {
        -webkit-transform: rotate(30deg);
    }
    16.66% {
        -webkit-transform: rotate(60deg);
    }
    24.99% {
        -webkit-transform: rotate(60deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
    }
    33.32% {
        -webkit-transform: rotate(90deg);
    }
    33.33% {
        -webkit-transform: rotate(120deg);
    }
    41.65% {
        -webkit-transform: rotate(120deg);
    }
    41.66% {
        -webkit-transform: rotate(150deg);
    }
    49.99% {
        -webkit-transform: rotate(150deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    58.32% {
        -webkit-transform: rotate(180deg);
    }
    58.33% {
        -webkit-transform: rotate(210deg);
    }
    66.65% {
        -webkit-transform: rotate(210deg);
    }
    66.66% {
        -webkit-transform: rotate(240deg);
    }
    74.99% {
        -webkit-transform: rotate(240deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
    }
    83.32% {
        -webkit-transform: rotate(270deg);
    }
    83.33% {
        -webkit-transform: rotate(300deg);
    }
    91.65% {
        -webkit-transform: rotate(300deg);
    }
    91.66% {
        -webkit-transform: rotate(330deg);
    }
    to {
        -webkit-transform: rotate(330deg);
    }
}
@keyframes x-loading-spinner-rotate {
    0% {
        transform: rotate(0deg);
    }
    8.32% {
        transform: rotate(0deg);
    }
    8.33% {
        transform: rotate(30deg);
    }
    16.65% {
        transform: rotate(30deg);
    }
    16.66% {
        transform: rotate(60deg);
    }
    24.99% {
        transform: rotate(60deg);
    }
    25% {
        transform: rotate(90deg);
    }
    33.32% {
        transform: rotate(90deg);
    }
    33.33% {
        transform: rotate(120deg);
    }
    41.65% {
        transform: rotate(120deg);
    }
    41.66% {
        transform: rotate(150deg);
    }
    49.99% {
        transform: rotate(150deg);
    }
    50% {
        transform: rotate(180deg);
    }
    58.32% {
        transform: rotate(180deg);
    }
    58.33% {
        transform: rotate(210deg);
    }
    66.65% {
        transform: rotate(210deg);
    }
    66.66% {
        transform: rotate(240deg);
    }
    74.99% {
        transform: rotate(240deg);
    }
    75% {
        transform: rotate(270deg);
    }
    83.32% {
        transform: rotate(270deg);
    }
    83.33% {
        transform: rotate(300deg);
    }
    91.65% {
        transform: rotate(300deg);
    }
    91.66% {
        transform: rotate(330deg);
    }
    to {
        transform: rotate(330deg);
    }
}
.x-shim {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
}
.x-css-shadow {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
}
.x-floated,
.x-shadow {
    -webkit-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);
}
.x-no-shadow {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.x-floating {
    position: absolute !important;
}
.x-center {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.x-center > * {
    position: relative;
}
.x-center > .x-floating {
    position: relative !important;
}
.x-fullscreen {
    position: absolute !important;
}
.x-ios-native:not(.x-phone.x-landscape) {
    padding-top: 20px;
}
.x-fi:before,
.x-font-icon {
    align-items: center;
    display: inline-flex;
    font-weight: 400;
    justify-content: center;
    vertical-align: top;
}
.x-fi:before,
.x-font-icon:before {
    display: flex;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    word-wrap: normal;
    direction: ltr;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    text-rendering: optimizeLegibility;
}
.x-noborder-l {
    border-left-width: 0 !important;
}
.x-noborder-b,
.x-noborder-bl {
    border-bottom-width: 0 !important;
}
.x-noborder-bl {
    border-left-width: 0 !important;
}
.x-noborder-r,
.x-noborder-rl {
    border-right-width: 0 !important;
}
.x-noborder-rl {
    border-left-width: 0 !important;
}
.x-noborder-rb,
.x-noborder-rbl {
    border-bottom-width: 0 !important;
    border-right-width: 0 !important;
}
.x-noborder-rbl {
    border-left-width: 0 !important;
}
.x-noborder-t,
.x-noborder-tl {
    border-top-width: 0 !important;
}
.x-noborder-tl {
    border-left-width: 0 !important;
}
.x-noborder-tb,
.x-noborder-tbl {
    border-bottom-width: 0 !important;
    border-top-width: 0 !important;
}
.x-noborder-tbl {
    border-left-width: 0 !important;
}
.x-noborder-tr,
.x-noborder-trl {
    border-right-width: 0 !important;
    border-top-width: 0 !important;
}
.x-noborder-trl {
    border-left-width: 0 !important;
}
.x-noborder-trb {
    border-bottom-width: 0 !important;
    border-right-width: 0 !important;
    border-top-width: 0 !important;
}
.x-noborder-trbl {
    border-width: 0 !important;
}
.x-button-reset {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    margin: 0;
    padding: 0;
}
.x-button-reset:focus {
    outline: none;
}
.x-gecko .x-button-reset::-moz-focus-inner {
    border: none;
    padding: 0;
}
.x-component {
    position: relative;
}
.x-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.x-container-body-el {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.x-has-flexbasis-bug .x-container-body-el {
    flex-basis: auto;
}
.x-body-sizer-el {
    flex: 1;
    position: relative;
}
.x-body-sizer-el > .x-container-body-el {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.x-ie11 .x-container.x-max-height-wrapped {
    flex-direction: row;
}
.x-max-height-el {
    flex: 1 1 auto;
    flex-direction: column;
}
.x-dock,
.x-max-height-el {
    display: flex;
    overflow: hidden;
}
.x-dock {
    background-color: inherit;
    flex: 1 1;
    position: relative;
}
.x-ie11 .x-dock {
    flex-basis: auto;
}
.x-dock > .x-component {
    flex-shrink: 0;
}
.x-dock-body {
    background-color: inherit;
    display: flex;
    flex: 1 1;
    overflow: hidden;
}
.x-dock-body,
.x-dock-vertical {
    flex-direction: column;
}
.x-dock-vertical > .x-component {
    width: auto;
}
.x-dock-horizontal > .x-component {
    height: auto;
}
.x-indicator {
    align-items: center;
    display: flex;
    flex: 1 1;
    justify-content: center;
}
.x-indicator span {
    display: block;
}
.x-indicator.x-indicator-horizontal {
    width: 100%;
}
.x-indicator.x-indicator-vertical {
    flex-direction: column;
    height: 100%;
}
.x-component.x-layout-card-item {
    height: 100%;
    position: absolute;
    width: 100%;
}
.x-viewport-body-el {
    background-color: #fafafa;
    background-color: var(--background-color);
    z-index: 0;
}
.x-orientation-inspector {
    display: none;
}
@media (orientation: landscape) {
    .x-orientation-inspector-landscape {
        display: block;
    }
}
@media (orientation: portrait) {
    .x-orientation-inspector-landscape {
        display: none;
    }
}
#ext-viewport {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.x-treelist-float-wrap {
    height: auto;
    pointer-events: all;
    position: absolute;
    right: auto;
    width: auto;
}
.x-button {
    display: inline-flex;
    min-height: 0;
    min-width: 0;
    position: relative;
}
.x-button .x-inner-el {
    flex: 1 1 auto;
}
.x-button .x-body-el,
.x-button .x-inner-el {
    align-items: center;
    display: flex;
    overflow: hidden;
}
.x-button .x-body-el {
    cursor: inherit;
    justify-content: center;
    margin: auto;
}
.x-button .x-icon-el {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: none;
    flex-shrink: 0;
    text-align: center;
}
.x-button.x-has-icon .x-icon-el {
    display: flex;
}
.x-button .x-text-el {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-button.x-has-text .x-text-el {
    display: block;
}
.x-button.x-icon-align-bottom .x-text-el,
.x-button.x-icon-align-top .x-text-el {
    max-width: 100%;
}
.x-button .x-arrow-el {
    display: none;
    flex-shrink: 0;
}
.x-button.x-has-arrow .x-arrow-el,
.x-button.x-has-menu:not(.x-no-arrow) .x-arrow-el {
    display: flex;
}
.x-button .x-badge-el {
    display: none;
    overflow: hidden;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 2;
}
.x-button.x-has-badge .x-badge-el {
    display: block;
}
.x-button .x-button-el {
    border: 0;
    bottom: 0;
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    outline: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 3;
}
.x-button.x-icon-align-top .x-body-el {
    flex-direction: column;
}
.x-button.x-icon-align-bottom .x-body-el {
    flex-direction: column-reverse;
}
.x-button.x-icon-align-right .x-body-el {
    flex-direction: row-reverse;
}
.x-button.x-text-align-left .x-body-el {
    margin-left: 0;
}
.x-button.x-text-align-right .x-body-el {
    margin-right: 0;
}
.x-ie11 .x-button:not(.x-has-text) .x-body-el {
    flex-direction: column;
}
.x-button.x-arrow-align-right .x-inner-el {
    align-items: center;
    flex-direction: row;
}
.x-button.x-arrow-align-bottom .x-inner-el {
    flex-direction: column;
    justify-content: flex-start;
}
.x-button.x-arrow-align-bottom .x-body-el {
    margin-bottom: 0;
    max-width: 100%;
}
.x-button.x-arrow-align-bottom .x-arrow-el {
    margin-top: auto;
}
.x-button.x-disabled {
    pointer-events: none;
}
.x-keyboard-mode .x-button.x-focused:after {
    bottom: -1px;
    content: "";
    left: -1px;
    pointer-events: none;
    position: absolute;
    right: -1px;
    top: -1px;
}
.x-button:before {
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.x-button.x-pressed:before,
.x-button.x-pressing:before {
    opacity: 1;
}
.x-title {
    max-width: 100%;
}
.x-title .x-innerhtml {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-layout-box {
    display: flex;
}
.x-layout-box.x-horizontal {
    flex-direction: row;
}
.x-layout-box.x-horizontal.x-reverse {
    flex-direction: row-reverse;
}
.x-layout-box.x-horizontal.x-constrain-align > .x-layout-box-item:not(.x-heighted) {
    max-height: 100%;
}
.x-layout-box.x-vertical {
    flex-direction: column;
}
.x-layout-box.x-vertical.x-reverse {
    flex-direction: column-reverse;
}
.x-layout-box.x-vertical.x-constrain-align > .x-layout-box-item:not(.x-widthed) {
    max-width: 100%;
}
.x-layout-box.x-align-start {
    align-items: flex-start;
}
.x-layout-box.x-align-center {
    align-items: center;
}
.x-layout-box.x-align-end {
    align-items: flex-end;
}
.x-layout-box.x-align-stretch {
    align-items: stretch;
}
.x-layout-box.x-pack-start {
    justify-content: flex-start;
}
.x-layout-box.x-pack-center {
    justify-content: center;
}
.x-layout-box.x-pack-end {
    justify-content: flex-end;
}
.x-layout-box.x-pack-justify,
.x-layout-box.x-pack-space-between {
    justify-content: space-between;
}
.x-layout-box.x-pack-space-around {
    justify-content: space-around;
}
.x-layout-box.x-wrap {
    flex-wrap: wrap;
}
.x-layout-box.x-wrap-reverse {
    flex-wrap: wrap-reverse;
}
.x-layout-box-item {
    flex-shrink: 0;
}
.x-ie11 .x-layout-box.x-pack-center,
.x-ie11 .x-layout-box.x-pack-end {
    justify-content: flex-start;
}
.x-ie11 .x-layout-box.x-pack-center:after,
.x-ie11 .x-layout-box.x-pack-center:before,
.x-ie11 .x-layout-box.x-pack-end:before {
    content: "";
    display: block;
    flex: 0.00005 1 0px;
}
.x-toolbar {
    position: relative;
    z-index: 1;
}
.x-navigation-bar .x-container,
.x-toolbar {
    overflow: visible;
}
.x-tool {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    outline: none;
}
.x-tool .x-icon-el {
    flex: none;
}
.x-boxscroller > .x-tool {
    align-self: center;
}
.x-tool-dock {
    align-items: center;
    background-color: inherit;
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
}
.x-tool-anchor {
    margin-right: auto;
}
.x-align-center > .x-tool-anchor {
    margin-left: auto;
    margin-right: auto;
}
.x-align-right > .x-tool-anchor {
    margin-left: auto;
    margin-right: 0;
}
.x-tool-anchor.x-headed {
    flex: 0 1 auto;
    margin-left: 0;
}
.x-tool-anchor.x-tailed {
    flex: 0 1 auto;
    margin-right: 0;
}
.x-tool-zone {
    align-items: center;
    display: flex;
    flex: none;
}
.x-tool-zone.x-tail {
    margin-right: auto;
}
.x-align-right > .x-tool-zone.x-tail {
    margin-right: 0;
}
.x-align-center > .x-tool-zone.x-head,
.x-align-right > .x-tool-zone.x-head {
    margin-left: auto;
}
.x-panel.x-header-position-top,
.x-panel.x-header-position-top > .x-max-height-el {
    flex-direction: column;
}
.x-panel.x-header-position-bottom,
.x-panel.x-header-position-bottom > .x-max-height-el {
    flex-direction: column-reverse;
}
.x-panel.x-header-position-left,
.x-panel.x-header-position-left > .x-max-height-el {
    flex-direction: row;
}
.x-panel.x-header-position-right,
.x-panel.x-header-position-right > .x-max-height-el {
    flex-direction: row-reverse;
}
.x-panel > .x-anchor-el {
    box-sizing: content-box;
    position: absolute;
    z-index: 1000;
}
.x-panel > .x-anchor-el .x-pointer-el {
    position: absolute;
    top: 0;
}
.x-panel > .x-anchor-el.x-bottom .x-pointer-el {
    transform: rotate(180deg);
}
.x-panel > .x-anchor-el.x-left {
    top: 0;
}
.x-panel > .x-anchor-el.x-left .x-pointer-el {
    transform: rotate(270deg);
}
.x-panel > .x-anchor-el.x-right {
    top: 0;
}
.x-panel > .x-anchor-el.x-right .x-pointer-el {
    transform: rotate(90deg);
}
.x-panel-body-wrap-el {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    overflow: hidden;
}
.x-has-flexbasis-bug .x-panel-body-wrap-el {
    flex-basis: auto;
}
.x-mask {
    align-items: center;
    background: rgba(0, 0, 0, 0.3) 50% no-repeat;
    bottom: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    min-width: 8.5em;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}
.x-mask.x-mask-gray {
    background-color: rgba(0, 0, 0, 0.5);
}
.x-mask.x-mask-transparent {
    background-color: transparent;
}
.x-mask .x-mask-inner {
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 0.95em;
    font-weight: 700;
    padding: 0.4em;
    position: relative;
    text-align: center;
}
.x-mask .x-loading-spinner-outer {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 8em;
    justify-content: center;
    min-width: 8em;
    width: 100%;
}
.x-mask.x-indicator-hidden .x-mask-inner {
    padding-bottom: 0 !important;
}
.x-mask.x-indicator-hidden .x-loading-spinner-outer {
    display: none;
}
.x-mask.x-indicator-hidden .x-mask-message {
    bottom: 0.25em;
    position: relative;
}
.x-mask .x-mask-message {
    bottom: 5px;
    color: #333;
    flex: 0 0;
    left: 0;
    position: absolute;
    right: 0;
}
.x-mask.x-has-message .x-mask-inner {
    padding-bottom: 2em;
}
.x-mask.x-has-message .x-loading-spinner-outer {
    height: 168px;
}
.x-ie .x-mask:not(.x-hidden) ~ div:not(.x-mask):not(.x-panel):not(.x-floating):not(.x-floated):not(.x-center):not(.x-msgbox) .x-input-el,
.x-ie .x-mask[visibility="visible"] ~ div:not(.x-mask):not(.x-panel):not(.x-floating):not(.x-floated):not(.x-center):not(.x-msgbox) .x-input-el {
    visibility: collapse;
}
.x-float-wrap > .x-mask {
    pointer-events: all;
    z-index: 0;
}
.x-audio audio {
    width: 100%;
}
.x-menuitem {
    display: flex;
    flex-direction: column;
}
.x-menuitem .x-body-el {
    align-items: center;
    display: flex;
    max-width: 100%;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    outline: 0;
    text-decoration: none;
}
.x-menuitem .x-text-el {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-menuitem .x-arrow-el {
    display: none;
}
.x-menuitem.x-has-arrow .x-arrow-el {
    display: flex;
}
.x-menuitem .x-icon-wrap-el {
    display: none;
    flex-shrink: 0;
    justify-content: center;
}
.x-menuitem.x-indented .x-left-icon-wrap-el {
    display: flex;
    visibility: hidden;
}
.x-menuitem.x-has-left-icon .x-left-icon-wrap-el,
.x-menuitem.x-has-right-icon .x-right-icon-wrap-el {
    display: flex;
    visibility: visible;
}
.x-menuitem:first-child .x-menuseparator {
    display: none;
}
.x-menu-body-el.x-has-separator:before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
}
.x-ctrl-key:before {
    content: "\2303";
}
.x-alt-key:before {
    content: "\2325";
}
.x-shift-key:before {
    content: "\21E7";
}
.x-meta-key:before {
    content: "\229e";
}
.x-mac .x-meta-key:before {
    content: "\2318";
}
.x-ctrl-key.x-alt-key:before {
    content: "\2303\2325";
}
.x-ctrl-key.x-shift-key:before {
    content: "\2303\21E7";
}
.x-ctrl-key.x-meta-key:before {
    content: "\2303\229e";
}
.x-mac .x-ctrl-key.x-meta-key:before {
    content: "\2303\2318";
}
.x-alt-key.x-shift-key:before {
    content: "\2325\21E7";
}
.x-alt-key.x-meta-key:before {
    content: "\2325\229e";
}
.x-mac .x-alt-key.x-meta-key:before {
    content: "\2325\2318";
}
.x-shift-key.x-meta-key:before {
    content: "\21E7\229e";
}
.x-mac .x-shift-key.x-meta-key:before {
    content: "\21E7\2318";
}
.x-ctrl-key.x-alt-key.x-shift-key:before {
    content: "\2303\2325\21E7";
}
.x-ctrl-key.x-shift-key.x-meta-key:before {
    content: "\2303\21E7\229e";
}
.x-mac .x-ctrl-key.x-shift-key.x-meta-key:before {
    content: "\2303\21E7\2318";
}
.x-alt-key.x-shift-key.x-meta-key:before {
    content: "\2325\21E7\229e";
}
.x-mac .x-alt-key.x-shift-key.x-meta-key:before {
    content: "\2325\21E7\2318";
}
.x-splitButton {
    display: inline-flex;
    min-height: 0;
    min-width: 0;
    position: relative;
}
.x-splitButton .x-splitBody-el {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
}
.x-splitButton .x-body-el {
    align-items: center;
    cursor: inherit;
    display: flex;
    justify-content: center;
    margin: auto;
    overflow: hidden;
}
.x-splitButton .x-icon-el {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: none;
    flex-shrink: 0;
    text-align: center;
}
.x-splitButton.x-has-icon .x-icon-el {
    display: flex;
}
.x-splitButton .x-text-el {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-splitButton.x-has-text .x-text-el {
    display: block;
}
.x-splitButton.x-icon-align-bottom .x-text-el,
.x-splitButton.x-icon-align-top .x-text-el {
    max-width: 100%;
}
.x-splitButton .x-arrow-el {
    display: none;
    flex-shrink: 0;
}
.x-splitButton.x-has-arrow .x-arrow-el,
.x-splitButton.x-has-menu:not(.x-no-arrow) .x-arrow-el {
    display: flex;
}
.x-splitButton .x-button-el {
    border: 0;
    bottom: 0;
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    outline: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 3;
}
.x-splitButton.x-icon-align-top .x-body-el {
    flex-direction: column;
}
.x-splitButton.x-icon-align-bottom .x-body-el {
    flex-direction: column-reverse;
}
.x-splitButton.x-icon-align-right .x-body-el {
    flex-direction: row-reverse;
}
.x-splitButton.x-text-align-left .x-body-el {
    margin-left: 0;
}
.x-splitButton.x-text-align-right .x-body-el {
    margin-right: 0;
}
.x-ie11 .x-splitButton:not(.x-has-text) .x-body-el {
    flex-direction: column;
}
.x-splitButton.x-arrow-align-right .x-splitBody-el {
    align-items: center;
    flex-direction: row;
}
.x-splitButton.x-arrow-align-bottom .x-splitBody-el {
    flex-direction: column;
    justify-content: flex-start;
}
.x-splitButton.x-arrow-align-bottom .x-body-el {
    margin-bottom: 0;
    max-width: 100%;
}
.x-splitButton.x-arrow-align-bottom .x-arrow-el {
    margin-top: auto;
}
.x-splitButton.x-disabled {
    pointer-events: none;
}
.x-keyboard-mode .x-splitButton.x-focused:after {
    bottom: -1px;
    content: "";
    left: -1px;
    pointer-events: none;
    position: absolute;
    right: -1px;
    top: -1px;
}
.x-splitButton:before {
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.x-splitButton.x-pressed:before,
.x-splitButton.x-pressing:before {
    opacity: 1;
}
.x-boxscroller {
    display: flex;
    overflow: hidden;
}
.x-boxscroller.x-tool-align-start > .x-tool {
    align-self: flex-start;
}
.x-boxscroller.x-tool-align-end > .x-tool {
    align-self: flex-end;
}
.x-boxscroller.x-tool-align-center > .x-tool {
    align-self: center;
}
.x-boxscroller.x-tool-align-stretch.x-horizontal > .x-tool {
    height: auto !important;
}
.x-boxscroller.x-tool-align-stretch.x-vertical > .x-tool {
    width: auto !important;
}
.x-boxscroller.x-tool-align-stretch > .x-tool {
    align-self: stretch;
}
.x-boxscroller-body {
    align-items: flex-start;
    box-sizing: content-box;
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
}
.x-boxscroller-body > .x-body-el {
    flex: none;
}
.x-boxscroller.x-horizontal {
    flex-direction: row;
}
.x-boxscroller.x-horizontal .x-boxscroller-body {
    margin-bottom: -100px;
    padding-bottom: 100px;
}
.x-boxscroller.x-horizontal .x-boxscroller-body > .x-body-el {
    min-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.x-boxscroller.x-vertical {
    flex-direction: column;
}
.x-boxscroller.x-vertical .x-boxscroller-body {
    margin-right: -100px;
    padding-right: 100px;
}
.x-boxscroller.x-vertical .x-boxscroller-body > .x-body-el {
    min-height: 100%;
    padding-bottom: 0;
    padding-top: 0;
}
.x-tabguard-el {
    height: 0;
    position: absolute;
    width: 0;
    clip: rect(0, 0, 0, 0);
}
.x-field {
    display: flex;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
    overflow: hidden;
}
.x-field.x-inline {
    display: inline-flex;
}
.x-field > .x-label-el {
    display: none;
    flex: none;
    max-width: 100%;
}
.x-field.x-labeled > .x-label-el {
    display: block;
}
.x-field.x-label-align-right {
    flex-direction: row-reverse;
}
.x-field.x-label-align-placeholder,
.x-field.x-label-align-top {
    flex-direction: column;
}
.x-field.x-label-align-bottom {
    flex-direction: column-reverse;
}
.x-field.x-label-align-vertical > .x-label-el {
    width: auto !important;
}
.x-field.x-no-label-wrap > .x-label-el {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-field.x-label-text-align-left > .x-label-el {
    text-align: left;
}
.x-field.x-label-text-align-center > .x-label-el {
    text-align: center;
}
.x-field.x-label-text-align-right > .x-label-el {
    text-align: right;
}
.x-field.x-required > .x-label-el:after {
    content: "*";
}
.x-field > .x-body-wrap-el {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
}
.x-field.x-label-align-vertical > .x-body-wrap-el {
    max-width: 100%;
    min-width: 100%;
}
.x-field.x-label-align-horizontal > .x-body-wrap-el {
    max-height: 100%;
    min-height: 100%;
}
.x-field.x-label-align-right > .x-body-wrap-el {
    flex-direction: row-reverse;
}
.x-field.x-error-target-under > .x-body-wrap-el {
    flex-direction: column;
}
.x-field > * > .x-body-el {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.x-field.x-body-align-start > * > .x-body-el {
    align-items: flex-start;
}
.x-field.x-body-align-center > * > .x-body-el {
    align-items: center;
}
.x-field.x-body-align-end > * > .x-body-el {
    align-items: flex-end;
}
.x-field.x-body-align-stretch > * > .x-body-el {
    align-items: stretch;
}
.x-field > * > .x-error-el {
    align-self: center;
}
.x-field > * > * > .x-error-icon-el,
.x-field > * > .x-error-el {
    display: none;
    flex-shrink: 0;
}
.x-field.x-error-target-under > * > .x-error-el {
    align-self: stretch;
    display: flex;
}
.x-field.x-error-target-side > * > * > .x-error-message-el {
    display: none;
}
.x-field.x-no-auto-fit-errors > * > * > .x-error-icon-el,
.x-field.x-no-auto-fit-errors > * > .x-error-el {
    display: flex;
    visibility: hidden;
}
.x-field.x-invalid > * > * > .x-error-icon-el,
.x-field.x-invalid > * > .x-error-el {
    display: flex;
    visibility: visible;
}
.x-field > * > * > .x-error-message-el {
    flex: 1 1 auto;
    overflow: hidden;
    overflow: ellipsis;
    word-wrap: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.x-layout-vbox > .x-field.x-no-min-content:not(.x-textareafield) {
    flex-basis: auto !important;
    flex-shrink: 0 !important;
}
.x-input {
    position: relative;
}
.x-input .x-input-el {
    -webkit-appearance: none;
    border-width: 0;
    display: block;
}
.x-input .x-mask-el {
    bottom: 0;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
.x-trigger {
    align-items: center;
    display: flex;
    justify-content: center;
}
.x-trigger.x-interactive {
    cursor: pointer;
}
div.x-trigger.x-grouped {
    width: auto;
}
.x-textfield .x-input-wrap-el {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
}
.x-textfield .x-underline-el {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
}
.x-textfield .x-underline-el:after,
.x-textfield .x-underline-el:before {
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
}
.x-textfield.x-animate-underline .x-underline-el:before {
    transform: scaleX(0);
}
.x-textfield.x-animate-underline.x-focused .x-underline-el:before {
    transform: scaleX(1);
}
.x-textfield .x-input-el {
    background-color: transparent;
    border: 0;
    box-sizing: content-box;
    color: inherit;
    flex: 1 1 auto;
    margin: 0;
    outline: none;
    width: 0;
}
.x-textfield .x-input-el::-ms-clear {
    display: none;
}
.x-textfield.x-text-align-left .x-input-el {
    text-align: left;
}
.x-textfield.x-text-align-center .x-input-el {
    text-align: center;
}
.x-textfield.x-text-align-right .x-input-el {
    text-align: right;
}
.x-textfield .x-after-input-el,
.x-textfield .x-before-input-el {
    display: flex;
}
.x-ie11 .x-textfield .x-after-input-el,
.x-ie11 .x-textfield .x-before-input-el {
    flex: none;
}
.x-chrome .x-textfield .x-input-el:-webkit-autofill,
.x-chromemobile .x-textfield .x-input-el:-webkit-autofill {
    animation-name: onAutoFillStart;
}
.x-textfield.x-label-align-placeholder .x-label-el {
    pointer-events: none;
    position: relative;
    z-index: 2;
}
.x-textfield.x-label-align-placeholder .x-input-el::-webkit-input-placeholder {
    opacity: 1;
    transition: opacity 0.4s;
}
.x-textfield.x-label-align-placeholder .x-input-el::-moz-placeholder {
    opacity: 1;
    transition: opacity 0.4s;
}
.x-textfield.x-label-align-placeholder .x-input-el:-ms-input-placeholder {
    opacity: 1;
    transition: opacity 0.4s;
}
.x-textfield.x-label-align-placeholder.x-label-inside .x-input-el::-webkit-input-placeholder {
    opacity: 0;
}
.x-textfield.x-label-align-placeholder.x-label-inside .x-input-el::-moz-placeholder {
    opacity: 0;
}
.x-textfield.x-label-align-placeholder.x-label-inside .x-input-el:-ms-input-placeholder {
    opacity: 0;
}
.x-editor {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-img.x-img-image {
    text-align: center;
}
.x-img.x-img-image img {
    height: 100%;
    width: auto;
}
.x-img.x-img-background {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
}
.x-textareafield {
    min-height: unset;
}
.x-textareafield .x-input-el {
    resize: none;
}
.x-ie11 .x-textareafield .x-input-el {
    min-width: 0;
    overflow: auto;
}
.x-msgbox,
.x-toast {
    max-height: 90vh;
    max-width: 90vw;
}
.x-toast .x-toast-text {
    text-align: center;
}
.x-video {
    background-color: #000;
}
.x-video,
.x-video > * {
    height: 100%;
    width: 100%;
}
.x-video .x-video-ghost {
    background-size: 100% auto;
    background: #000 50% no-repeat;
}
.x-carousel-body-el {
    overflow: hidden;
    position: relative;
}
.x-carousel-item,
.x-carousel-item > * {
    height: 100%;
    position: absolute !important;
    width: 100%;
}
.x-emptytext {
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}
.x-dataview-item {
    position: relative;
}
.x-itemheader {
    width: 100%;
    z-index: 5;
}
.x-keyboard-mode .x-itemheader.x-focused:not(.x-pinned) {
    z-index: 10;
}
.x-itemheader.x-pinned {
    z-index: 20;
}
.x-itemheader > .x-body-el > .x-innerhtml {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-itemheader > .x-body-el,
.x-itemheader > .x-tool-dock {
    min-width: 100%;
}
.x-listitem {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 0;
}
.x-listitem:not(.x-pinned) {
    min-width: 100%;
}
.x-listitem.x-hovered {
    z-index: 1;
}
.x-listitem.x-selected {
    z-index: 2;
}
.x-listitem.x-pressed {
    z-index: 3;
}
.x-listitem.x-listitem-placeholder {
    height: 1px;
}
.x-keyboard-mode .x-listitem.x-focused {
    overflow: visible;
}
.x-keyboard-mode .x-listitem.x-focused:not(.x-pinned) {
    z-index: 10;
}
.x-keyboard-mode .x-no-row-lines .x-listitem.x-focused:after {
    margin: 0;
}
.x-listitem.x-pinned {
    z-index: 20;
}
:not(.x-infinite) > .x-listitem:last-child {
    margin-bottom: 0;
}
.x-listitem-body-el {
    overflow: hidden;
    position: relative;
}
.x-listitem-body-el,
.x-listitem-inner-el {
    background-color: inherit;
    display: flex;
    flex: 1 1 auto;
}
.x-listitem-inner-el {
    align-items: center;
}
.x-listitem-inner-el.x-tool-anchor {
    align-self: center;
    display: block;
    flex-grow: 0;
}
.x-no-row-lines > .x-listitem {
    border: 0;
    margin-bottom: 0;
}
.x-list {
    overflow: hidden;
}
.x-list .x-list-body-el {
    display: flex;
    flex-direction: column;
    width: 100% !important;
}
.x-list .x-list-outer-ct {
    flex: 1 1 auto;
    position: relative;
    width: 100%;
    z-index: 0;
}
.x-list .x-list-inner-ct {
    min-width: 100%;
    position: relative;
}
.x-windows .x-list {
    touch-action: pinch-zoom pan-x;
}
.x-list-inner-ct.x-infinite > * {
    position: absolute;
    width: 100%;
}
.x-list.x-inline .x-listitem {
    display: inline-block;
}
.x-list.x-nowrap .x-listitem {
    white-space: nowrap;
}
.x-boundlistitem .x-selected-icon {
    visibility: hidden;
}
:not(.x-multi-select) > .x-boundlistitem .x-selected-icon,
:not(.x-show-selection) > .x-boundlistitem .x-selected-icon {
    display: none;
}
.x-multi-select .x-boundlistitem.x-selected .x-selected-icon,
.x-show-selection .x-boundlistitem.x-selected .x-selected-icon {
    visibility: visible;
}
.x-dataview.x-inline .x-dataitem,
.x-dataview.x-inline .x-dataview-item {
    display: inline-block;
    vertical-align: top;
}
.x-dataview.x-nowrap .x-body-el {
    white-space: nowrap !important;
}
.x-chipview .x-chipview-body-el {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
}
.x-indexbar {
    pointer-events: none;
    position: relative;
}
.x-indexbar > .x-body-el {
    bottom: 0;
    cursor: pointer;
    display: flex;
    pointer-events: auto;
    position: absolute;
    right: 0;
    transition: opacity 0.4s;
}
.x-indexbar > .x-body-el.x-horizontal {
    flex-direction: row;
    left: 0;
}
.x-indexbar > .x-body-el.x-vertical {
    flex-direction: column;
    top: 0;
}
.x-indexbar-indicator,
.x-indexbar-item {
    align-items: center;
    display: flex;
    justify-content: center;
}
.x-indexbar-indicator {
    position: absolute;
}
.x-listswiperaccordion {
    bottom: 0;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}
.x-listswiperaccordion-wrapper {
    display: none;
    flex-direction: row;
    position: relative;
    width: 100%;
}
.x-listswiperaccordion-wrapper .x-listswiperaction {
    flex: 1 0 0;
    overflow: hidden;
}
.x-listswiperaccordion-side-left {
    left: 0;
}
.x-listswiperaccordion-side-right {
    right: 0;
}
.x-listswiperaccordion-side-left .x-listswiperaccordion-wrapper-left,
.x-listswiperaccordion-side-right .x-listswiperaccordion-wrapper-right {
    display: flex;
}
.x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper-left:before,
.x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper-right:after {
    content: "";
    flex: 0;
}
.x-listswiperaccordion-multiple .x-listswiperaction,
.x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper:after,
.x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper:before {
    transition:
        flex 0.4s ease-in,
        padding 0.15s ease-in 0.25s,
        min-width 0.4s ease-in,
        border-color 0.4s ease-in,
        border-width 0.4s ease-in,
        opacity 0.4s ease-in;
}
.x-listswiperaccordion-wrapper.x-listswiperaccordion-single .x-listswiperaction {
    flex: 0 0 auto;
}
.x-listswiperaccordion-wrapper-left:after,
.x-listswiperaccordion-wrapper-right:before {
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}
.x-listswiperaccordion-wrapper-left.x-listswiperaccordion-single {
    justify-content: flex-start;
}
.x-listswiperaccordion-wrapper-right.x-listswiperaccordion-single {
    justify-content: flex-end;
}
.x-listswiperaccordion-collapsed .x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper-right {
    justify-content: flex-start;
}
.x-listswiperaccordion-collapsed .x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper-left {
    justify-content: flex-end;
}
.x-listswiperaccordion-collapsed .x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper-left:before,
.x-listswiperaccordion-collapsed .x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper-right:after {
    flex: 1;
}
.x-listswiperaccordion-collapsed .x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper-left .x-listswiperaction:not(:first-child),
.x-listswiperaccordion-collapsed .x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper-right .x-listswiperaction:not(:last-child) {
    border-color: transparent;
    border-width: 0 !important;
    flex: 0 !important;
    min-width: 0 !important;
    opacity: 0;
    padding: 0 !important;
}
.x-listswiperaccordion-collapsed .x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper-left .x-listswiperaction:first-child,
.x-listswiperaccordion-collapsed .x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper-right .x-listswiperaction:last-child {
    flex: 0;
}
.x-listswiperaccordion-was-collapsed .x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper:after,
.x-listswiperaccordion-was-collapsed .x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper:before,
.x-listswiperaccordion-was-collapsed .x-listswiperaccordion-multiple.x-listswiperaccordion-wrapper > .x-listswiperaction {
    transition:
        flex 0.4s ease-in,
        padding 0.15s ease-in 0.25s,
        border-color 0.4s ease-in,
        border-width 0.4s ease-in,
        min-width 0.4s ease-in,
        opacity 0.4s ease-in;
}
.x-listswiperundoable {
    opacity: 0;
    transition: opactiy 0.3s ease-out;
}
.x-listswiperaccordion.x-undo .x-listswiperundoable {
    opacity: 1;
}
.x-listswiperaccordion.x-undo .x-listswiperaccordion-wrapper {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none;
    transition:
        background-color 0.3s ease-out,
        opacity 0.3s ease-out;
}
.x-listswiperaccordion.x-undo .x-listswiperaccordion-wrapper .x-listswiperaction {
    opacity: 0 !important;
    transition: opacity 0.3s ease-out;
}
.x-listswiperaccordion ~ * {
    transition: opacity 0.3s ease-out;
}
.x-listswiperaccordion.x-undo ~ * {
    opacity: 0 !important;
    pointer-events: none;
}
.x-listswiperaccordion-measure {
    display: flex;
    position: absolute !important;
    width: auto !important;
}
.x-listswiperaccordion-measure > * {
    flex: 1 0 auto !important;
}
.x-listswiperstepper {
    bottom: 0;
    display: flex;
    flex-direction: row;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition:
        color 0.25s ease-out,
        background-color 25ms ease-out;
}
.x-listswiperstepper-body-el {
    display: flex;
    flex: 1;
}
.x-listswiperstepper-body-el > .x-icon-wrap-el {
    align-items: center;
    display: flex;
    justify-content: center;
}
.x-listswiperstepper.x-side-right .x-listswiperstepper-body-el {
    flex-direction: row-reverse;
}
.x-undo > .x-listswiperstepper-body-el {
    flex-direction: row;
}
.x-listswiperstepper-inner-el {
    flex: 1;
    width: 0;
}
.x-listswiperstepper-inner-el > .x-innerhtml {
    max-width: 100%;
}
.x-listswiperstepper-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-listpaging .x-loading-spinner {
    display: none;
}
.x-listpaging .x-message {
    cursor: pointer;
}
.x-listpaging.x-disabled .x-message {
    cursor: default;
}
.x-listpaging.x-loading .x-loading-spinner {
    display: block;
}
.x-listpaging.x-loading .x-message {
    display: none;
}
.x-list-item-dragging {
    z-index: 100;
}
.x-pullrefreshbar {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow: hidden;
}
.x-pullrefreshbar .x-pullrefreshbar-arrow {
    opacity: 1;
    transition: opacity 0.5s;
}
.x-pullrefreshbar.x-pullrefresh-loading .x-pullrefreshbar-loading-wrap {
    display: block;
}
.x-pullrefreshbar.x-pullrefresh-loaded .x-pullrefreshbar-arrow,
.x-pullrefreshbar.x-pullrefresh-loading .x-pullrefreshbar-arrow {
    opacity: 0;
}
.x-pullrefreshbar.x-pullrefresh-overlay {
    width: 100%;
}
.x-pullrefreshbar-info-wrap {
    text-align: center;
}
.x-pullrefreshbar-loading-wrap {
    position: relative;
}
.x-pullrefreshbar-mode-message .x-pullrefreshbar-loading-wrap,
.x-pullrefreshbar-mode-spinner .x-pullrefreshbar-info-wrap {
    display: none;
}
.x-pullrefresh-overlay {
    width: 100%;
}
.x-pullrefreshspinner {
    align-items: center;
    display: flex;
    justify-content: center;
}
.x-pullrefreshspinner-loading-wrap {
    display: block;
}
.x-pullrefreshspinner-main {
    opacity: 0;
    overflow: hidden;
    padding: 9px;
    transform: scale(1);
    transition: all 0.43s cubic-bezier(0.08, 0.55, 0.81, 1.8);
    z-index: 10001;
}
.x-pullrefreshspinner-loader-wrapper {
    height: 25px;
    width: 25px;
}
.x-pullrefreshspinner-arrow-wrapper {
    transition: all 0.2s ease;
}
.x-pullrefreshspinner-arrow-main,
.x-pullrefreshspinner-half-circle {
    border: 3px solid;
    border-color: #000 #000 transparent;
    border-radius: 999px;
    height: 25px;
    position: absolute;
    top: 0;
    width: 25px;
}
.x-pullrefreshspinner-arrow-main {
    margin-top: 10px;
    transform: rotate(-37deg);
}
.x-pullrefreshspinner-arrow-main:before {
    border-style: solid;
    border-width: 6px;
    content: "";
    display: block;
    height: 0;
    left: 0;
    position: relative;
    top: 14px;
    transform: rotate(-56deg);
    width: 0;
}
.x-pullrefreshspinner-spinner-main {
    animation: x-pullrefreshspinner-sporadic-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
    height: 25px;
    position: relative;
    width: 25px;
}
.x-pullrefreshspinner-spinner-main .x-pullrefreshspinner-spinner-left,
.x-pullrefreshspinner-spinner-main .x-pullrefreshspinner-spinner-right {
    height: 25px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 13px;
}
.x-pullrefreshspinner-spinner-main .x-pullrefreshspinner-spinner-left .x-pullrefreshspinner-half-circle,
.x-pullrefreshspinner-spinner-main .x-pullrefreshspinner-spinner-right .x-pullrefreshspinner-half-circle {
    animation-duration: 1.3125s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
}
.x-pullrefreshspinner-spinner-main .x-pullrefreshspinner-spinner-left {
    left: 0;
}
.x-pullrefreshspinner-spinner-main .x-pullrefreshspinner-spinner-left .x-pullrefreshspinner-half-circle {
    animation-name: x-pullrefreshspinner-left-wobble;
    border-right-color: transparent;
    left: 0;
}
.x-pullrefreshspinner-spinner-main .x-pullrefreshspinner-spinner-right {
    right: 0;
}
.x-pullrefreshspinner-spinner-main .x-pullrefreshspinner-spinner-right .x-pullrefreshspinner-half-circle {
    animation-name: x-pullrefreshspinner-right-wobble;
    border-left-color: transparent;
    right: 0;
}
.x-pullrefreshspinner-spinner-wrapper {
    animation: x-pullrefresh-spinner-outer-rotate 2.91667s linear infinite;
}
@keyframes x-pullrefreshspinner-outer-rotate {
    to {
        transform: rotate(1turn);
    }
}
@keyframes x-pullrefreshspinner-left-wobble {
    0%,
    to {
        transform: rotate(130deg);
    }
    50% {
        transform: rotate(-5deg);
    }
}
@keyframes x-pullrefreshspinner-right-wobble {
    0%,
    to {
        transform: rotate(-130deg);
    }
    50% {
        transform: rotate(5deg);
    }
}
@keyframes x-pullrefreshspinner-sporadic-rotate {
    12.5% {
        transform: rotate(135deg);
    }
    25% {
        transform: rotate(270deg);
    }
    37.5% {
        transform: rotate(405deg);
    }
    50% {
        transform: rotate(540deg);
    }
    62.5% {
        transform: rotate(675deg);
    }
    75% {
        transform: rotate(810deg);
    }
    87.5% {
        transform: rotate(945deg);
    }
    to {
        transform: rotate(3turn);
    }
}
.x-field > * > * > * > .x-box-el,
.x-field > * > * > .x-box-wrap-el {
    align-items: center;
    display: flex;
}
.x-field.x-box-label-align-before > * > * > .x-box-wrap-el {
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.x-field > * > * > * > .x-box-label-el {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-field.x-box-labeled > * > * > * > .x-box-label-el {
    display: block;
}
.x-checkboxfield .x-icon-el {
    overflow: hidden;
    position: relative;
}
.x-checkboxfield .x-input-el {
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.x-checkboxfield .x-input:before {
    pointer-events: none;
}
.x-field.x-checkboxfield .x-input {
    display: flex;
}
.x-containerfield > * > * > .x-container:not(.x-heighted) {
    flex: 1 1 auto;
}
.x-containerfield > * > * > .x-container.x-heighted {
    max-height: 100%;
}
.x-containerfield > * > * > .x-container.x-widthed {
    max-width: 100%;
}
.x-containerfield > * > .x-body-el {
    justify-content: flex-start;
}
.x-field-group-container {
    min-height: 0;
}
.x-field-group-container .x-group-inner-container > .x-body-el {
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
}
.x-field-group-container .x-group-inner-container .x-field.x-label-align-right > .x-label-el {
    flex: 1 1 auto;
}
.x-field-group-container .x-group-inner-container .x-field > .x-body-wrap-el {
    flex: inherit;
}
.x-field-group-container .x-group-inner-container.x-field-group-vertical > .x-body-el {
    flex-direction: column;
}
.x-ie .x-pickerfield .x-mask-el {
    z-index: 3;
}
.x-sheet.x-picker {
    padding: 0;
}
.x-sheet.x-picker .x-sheet-body-el .x-picker-slot .x-body-el {
    border-left: 1px solid #999;
    border-right: 1px solid #acacac;
}
.x-sheet.x-picker .x-sheet-body-el .x-picker-slot.x-first .x-body-el {
    border-left: 0;
}
.x-sheet.x-picker .x-sheet-body-el .x-picker-slot.x-last .x-body-el {
    border-left: 0;
    border-right: 0;
}
.x-picker-mask {
    align-items: stretch;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
}
.x-picker-slot-title {
    position: relative;
    z-index: 2;
}
.x-picker-slot-title > div {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-picker-slot .x-dataview-body-el {
    width: 100% !important;
}
.x-picker-slot .x-dataview-item {
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
}
.x-picker-slot .x-picker-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-ie .x-picker-item {
    cursor: default;
}
.x-ie .x-picker-item:before {
    color: transparent;
    content: ". .";
    left: 0;
    position: absolute;
    word-spacing: 3000px;
}
.x-picker-right {
    text-align: right;
}
.x-picker-center {
    text-align: center;
}
.x-picker-left {
    text-align: left;
}
.x-selectfield .x-chipview {
    flex: 1 1 auto;
}
.x-selectfield.x-multiselect:not(.x-combobox) input.x-input-el {
    order: 999999;
    padding: 0;
    pointer-events: none;
}
.x-combobox .x-chipview input.x-input-el {
    flex: 1 1 auto;
    min-width: 80px;
    order: 999999;
    padding-left: 2px;
}
.x-layout-carousel-wrap {
    display: block;
    overflow: hidden;
}
.x-layout-carousel {
    display: inline-flex;
    flex-direction: row;
    height: 100%;
    margin: 0;
    overflow: visible;
    padding: 0;
    position: relative;
    width: 100%;
}
.x-layout-carousel-item {
    flex: 0 0;
}
.x-dateview th {
    text-overflow: clip;
}
.x-dateview td {
    outline: none;
}
.x-dateview tbody .x-cell {
    position: relative;
}
.x-dateview td:not(.x-disabled) .x-inner {
    cursor: pointer;
}
.x-dateview .x-empty {
    pointer-events: none;
}
.x-dateview.x-hide-caption caption {
    display: none;
}
.x-paneltitle,
.x-paneltitle .x-body-el {
    align-items: center;
    display: flex;
    overflow: hidden;
}
.x-paneltitle .x-body-el {
    margin: auto;
}
.x-paneltitle .x-icon-el {
    display: none;
    flex-shrink: 0;
    margin: auto;
}
.x-paneltitle.x-has-icon .x-icon-el {
    display: flex;
}
.x-paneltitle .x-text-el {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-paneltitle.x-icon-align-vertical .x-body-el {
    align-items: stretch;
}
.x-paneltitle.x-icon-align-vertical .x-text-el {
    flex-shrink: 0;
}
.x-safari .x-paneltitle.x-icon-align-vertical.x-vertical .x-text-el {
    max-height: 100%;
}
.x-paneltitle.x-icon-align-right .x-body-el {
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.x-paneltitle.x-vertical {
    flex-direction: column;
}
.x-paneltitle.x-vertical .x-text-el {
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
}
.x-safari .x-paneltitle.x-vertical .x-text-el {
    text-overflow: clip;
}
.x-paneltitle.x-horizontal.x-text-align-left .x-body-el {
    margin-left: 0;
}
.x-paneltitle.x-horizontal.x-text-align-right .x-body-el {
    margin-right: 0;
}
.x-paneltitle.x-rotate-90 .x-body-el {
    flex-direction: column;
}
.x-paneltitle.x-rotate-90.x-icon-align-right .x-body-el {
    flex-direction: column-reverse;
}
.x-paneltitle.x-rotate-90.x-rotate-icon .x-icon-el:before {
    transform: rotate(90deg);
}
.x-paneltitle.x-rotate-90.x-text-align-left .x-body-el {
    margin-top: 0;
}
.x-paneltitle.x-rotate-90.x-text-align-right .x-body-el {
    margin-bottom: 0;
}
.x-paneltitle.x-rotate-270 .x-body-el {
    flex-direction: column-reverse;
}
.x-paneltitle.x-rotate-270.x-icon-align-right .x-body-el {
    flex-direction: column;
}
.x-paneltitle.x-rotate-270.x-rotate-icon .x-icon-el:before {
    transform: rotate(270deg);
}
.x-paneltitle.x-rotate-270 .x-text-el {
    transform: rotate(180deg);
}
.x-paneltitle.x-rotate-270.x-text-align-left .x-body-el {
    margin-bottom: 0;
}
.x-paneltitle.x-rotate-270.x-text-align-right .x-body-el {
    margin-top: 0;
}
.x-paneltitle.x-icon-align-top .x-body-el {
    flex-direction: column;
}
.x-paneltitle.x-icon-align-top.x-rotate-90 .x-body-el {
    flex-direction: row-reverse;
}
.x-paneltitle.x-icon-align-top.x-rotate-270 .x-body-el {
    flex-direction: row;
}
.x-paneltitle.x-icon-align-bottom .x-body-el {
    flex-direction: column-reverse;
}
.x-paneltitle.x-icon-align-bottom.x-rotate-90 .x-body-el {
    flex-direction: row;
}
.x-paneltitle.x-icon-align-bottom.x-rotate-270 .x-body-el {
    flex-direction: row-reverse;
}
.x-datetitle .x-body-el {
    position: relative;
    width: 100%;
}
.x-datetitle .x-year-el {
    cursor: pointer;
}
.x-datetitle .x-text-container-el {
    align-items: center;
    display: flex;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.x-datetitle .x-cloned {
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}
.x-datetitle.x-split .x-text-container-el {
    display: block;
}
.x-datetitle:not(.x-split) .x-text-el,
.x-yearpicker .x-listitem .x-innerhtml {
    text-align: center;
    width: 100%;
}
.x-datepanel {
    display: inline-flex;
    flex: 0 0 auto !important;
}
.x-datepanel:focus {
    outline: none;
}
.x-datepanel .x-panel-body-el {
    border-width: 0 !important;
}
.x-datepanel .x-panel-body-el .x-cloned {
    position: absolute;
}
.x-datepanel .x-dateview .x-cell .x-inner {
    align-items: center;
    display: flex;
    justify-content: center;
}
.x-numberfield input::-webkit-inner-spin-button,
.x-numberfield input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.x-numberfield input {
    -moz-appearance: textfield;
}
.x-numberfield input:invalid {
    box-shadow: none;
}
.x-searchfield .x-input-el {
    -webkit-appearance: textfield;
}
.x-searchfield .x-input-el::-webkit-search-cancel-button,
.x-searchfield .x-input-el::-webkit-search-decoration {
    -webkit-appearance: none;
}
.x-thumb {
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
}
.x-slider:not(.x-slider-vertical) .x-thumb {
    left: 0;
    top: 50% !important;
}
.x-slider-vertical .x-thumb {
    left: 50% !important;
    top: 0;
}
.x-thumb + .x-sizer-el {
    width: 0;
}
.x-thumb.x-dragging {
    cursor: default;
}
.x-slider,
.x-slider .x-track-el {
    align-items: center;
    display: flex;
    position: relative;
}
.x-slider .x-track-el {
    width: 100%;
}
.x-slider .x-thumb-wrap-el {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.x-slider .x-fill-el {
    border-right-width: 0 !important;
    left: 0;
    position: absolute;
    top: 0;
}
.x-slider .x-fill-el:not(:first-child) {
    border-left-width: 0 !important;
}
.x-slider.x-slider-vertical {
    justify-content: center;
}
.x-slider:not(.x-toggleslider) .x-fill-el {
    border-bottom-right-radius: 0 !important;
}
.x-sliderfield {
    overflow: visible;
}
.x-sliderfield .x-disabled > .x-body-wrap-el {
    opacity: 1;
}
.x-sliderfield .x-box-el,
.x-sliderfield .x-box-wrap-el {
    align-items: stretch;
}
.x-sliderfield .x-body-el,
.x-sliderfield .x-body-wrap-el {
    overflow: visible;
}
.x-sliderfield .x-box-el,
.x-sliderfield .x-box-wrap-el,
.x-sliderfield .x-slider {
    flex: 1 1 auto;
}
.x-spinnerfield input::-webkit-inner-spin-button,
.x-spinnerfield input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.x-spinnerfield .x-spinner-button {
    text-align: center;
}
.x-spinnerfield.x-grouped-buttons .x-input-el {
    text-align: left;
}
.x-form-fieldset-title .x-innerhtml {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-form-fieldset-instructions {
    text-align: center;
}
.x-formpanel .x-hidden-submit {
    bottom: 0;
    height: 0;
    position: absolute;
    right: 0;
    visibility: hidden;
    width: 0;
}
.x-celleditor {
    bottom: 0;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
.x-gridcell {
    display: table-cell;
    position: relative;
    vertical-align: middle;
}
.x-gridcell.x-dirty:before {
    left: 0;
    line-height: 1;
    position: absolute;
    top: 0;
}
.x-gridcell-body-el,
.x-roweditorcell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-gridcell.x-align-center {
    text-align: center;
}
.x-gridcell.x-align-right {
    text-align: right;
}
.x-rowbody {
    display: flex;
}
.x-grid:not(.x-has-rowexpander) .x-rowbody .x-spacer-el {
    display: none;
}
.x-gridrow {
    display: block;
}
.x-gridrow .x-cells-el {
    background-color: inherit;
    display: table;
    table-layout: fixed;
    width: 0;
}
.x-gridrow .x-cells-el.x-flexbox {
    display: flex;
    width: inherit;
}
.x-headercontainer-body-el > :last-child {
    overflow: hidden;
}
.x-menucheckitem .x-checkbox-el {
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.x-gridcolumn {
    overflow: visible;
}
.x-gridcolumn .x-header-el {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    position: relative;
}
.x-gridcolumn .x-title-wrap-el {
    overflow: hidden;
}
.x-gridcolumn .x-title-el {
    align-items: center;
    display: flex;
    overflow: hidden;
}
.x-gridcolumn .x-text-el {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-gridcolumn.x-align-center > .x-header-el {
    justify-content: center;
}
.x-gridcolumn.x-align-right > .x-header-el {
    justify-content: flex-end;
}
.x-gridcolumn.x-group > .x-header-el > .x-title-wrap-el,
.x-gridcolumn.x-group > .x-header-el > .x-tool-dock {
    min-width: 100%;
    width: 0;
}
.x-gridcolumn.x-group.x-align-center > .x-header-el .x-title-el {
    justify-content: center;
}
.x-gridcolumn.x-group.x-align-right > .x-header-el .x-title-el {
    justify-content: flex-end;
}
.x-gridcolumn.x-leaf .x-header-el {
    border-bottom: 0;
}
.x-gridcolumn.x-leaf .x-gridcolumn-body-el {
    display: none;
}
.x-gridcolumn .x-trigger-el {
    bottom: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.x-gridcolumn.x-menu-open > .x-header-el .x-trigger-el,
.x-gridcolumn > .x-header-el:hover .x-trigger-el {
    opacity: 1;
}
.x-gridcolumn.x-resizing .x-trigger-el {
    opacity: 0 !important;
}
.x-gridcolumn > .x-header-el:after {
    content: "";
    display: none;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}
.x-gridcolumn.x-resizing > .x-header-el:after {
    display: block;
}
.x-gridcolumn-body-el {
    flex: none;
    overflow: visible;
}
.x-headermenu-add-group:before {
    content: "\e910";
    font-family: ExtJS;
}
.x-headermenu-groups:before {
    content: "\e90f";
    font-family: ExtJS;
}
.x-headermenu-expand-groups:before {
    content: "expand_more";
}
.x-headermenu-collapse-groups:before {
    content: "expand_less";
}
.x-headermenu-remove-group:before {
    content: "\e911";
    font-family: ExtJS;
}
.x-checkcell .x-checkbox-el {
    cursor: pointer;
    outline: none;
}
.x-summaryrow .x-checkcell .x-checkbox-el {
    display: none;
}
.x-checkcolumn .x-title-wrap-el {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.x-checkcolumn.x-checkbox-align-top .x-title-wrap-el {
    flex-direction: column-reverse;
}
.x-checkcolumn.x-checkbox-align-right .x-title-wrap-el {
    flex-direction: row;
}
.x-checkcolumn.x-checkbox-align-left .x-title-wrap-el {
    flex-direction: row-reverse;
}
.x-checkcolumn.x-checkbox-align-bottom .x-title-el,
.x-checkcolumn.x-checkbox-align-top .x-title-el {
    max-width: 100%;
}
.x-checkcolumn .x-checkbox-el {
    outline: none;
}
.x-checkcolumn.x-no-header-checkbox .x-checkbox-el {
    display: none;
}
.x-checkcolumn:not(.x-has-text):not(.x-sorted) .x-title-el {
    margin: 0 !important;
}
.x-selmodel-row-numberer-hd {
    cursor: se-resize !important;
}
.x-selmodel-row-numberer-cell {
    cursor: e-resize;
}
.x-selmodel-column-select .x-column-header {
    cursor: s-resize;
}
.x-selmodel-extender-drag-handle {
    background-color: #2196f3;
    background-color: var(--base-color);
    cursor: crosshair;
    height: 7px;
    position: absolute;
    width: 7px;
    z-index: 3;
}
.x-big .x-selmodel-extender-drag-handle {
    height: 15px;
    width: 15px;
}
.x-selmodel-extender-mask {
    border: 1px dotted #2196f3;
    border: 1px dotted var(--base-color);
    pointer-events: none;
    position: absolute;
    z-index: 3;
}
.x-gridcolumn .x-resizer-el {
    background-color: transparent;
    bottom: 0;
    content: "";
    cursor: col-resize;
    display: none;
    position: absolute;
    right: -5px;
    top: 0;
    width: 10px;
    z-index: 1;
}
.x-big .x-gridcolumn .x-resizer-el {
    right: -10px;
    width: 20px;
}
.x-grid.x-has-columnresizing .x-gridcolumn.x-resizable .x-resizer-el {
    display: block;
}
.x-proxy-drag-el {
    display: inline-block;
}
.x-proxy-drag-el:before {
    vertical-align: text-bottom;
}
.x-header-drop-indicator-after:after,
.x-header-drop-indicator-after:before,
.x-header-drop-indicator-before:after,
.x-header-drop-indicator-before:before {
    position: absolute;
    z-index: 1;
}
.x-header-drop-indicator-before:last-child {
    overflow: visible;
}
.x-header-drop-indicator-before:first-child:after,
.x-header-drop-indicator-before:first-child:before {
    left: 0;
}
.x-header-drop-indicator-after:last-child:after,
.x-header-drop-indicator-after:last-child:before {
    right: 0;
}
.x-grid .x-resize-marker-el {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
}
.x-gridcell-nogroup .x-grid-group-icon {
    display: none;
}
.x-grid-group-header .x-body-el,
.x-grid-group-header .x-text-el {
    display: flex;
}
.x-grid-group-icon {
    height: 18px;
    width: 18px;
}
.x-big .x-grid-group-icon {
    height: 24px;
    width: 24px;
}
.x-grid-group-header-collapsible {
    cursor: pointer;
}
.x-grid-group-header-collapsible .x-grid-group-icon {
    color: #b0b0b0;
    display: flex;
    margin: 0 6px;
}
.x-grid-group-header-collapsible .x-grid-group-icon:before {
    content: "expand_less";
    font-family: Material Icons;
}
.x-grid-group-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x-grid-group-header-collapsed .x-grid-group-icon:before {
    content: "expand_more";
    font-family: Material Icons;
}
.x-expandercell .x-icon-el {
    cursor: pointer;
}
.x-grid-group .x-expandercell .x-icon-el,
.x-summaryrow .x-expandercell .x-icon-el {
    display: none;
}
.x-gridcolumn.x-grid-filters-filtered-column > .x-header-el {
    font-style: italic;
    font-weight: 600;
    text-decoration: underline;
}
.x-layout-fit {
    display: flex;
}
.x-layout-fit-item {
    flex: 1 1;
}
.x-ie11 .x-layout-fit-item {
    flex-basis: auto;
}
.x-body-sizer-el > * > .x-layout-fit-item {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.x-grid-group-column {
    background-color: #fafafa;
    background-color: var(--background-color);
    border-color: #e2e2e2;
    border-color: var(--divider-color);
    border-style: solid;
    border-width: 0 1px 1px 0;
    color: #111;
    color: var(--color);
    cursor: pointer;
    font:
        400 13px/16px Roboto,
        sans-serif;
    padding: 12px;
}
.x-grid-group-column .x-body-el {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    position: relative;
}
.x-grid-group-column .x-title-el {
    align-items: center;
    display: flex;
    overflow: hidden;
}
.x-grid-group-column-over {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-grid-group-column-inner {
    border: 0 solid #e2e2e2;
    font:
        400 13px/16px Roboto,
        sans-serif;
    margin: 1px;
    padding: 12px;
}
.x-grid-group-column-btn-image.x-icon-el:before {
    font-size: 18px;
}
.x-grid-group-column-btn-sort-asc:before {
    content: "arrow_upward";
    font-family: Material Icons;
}
.x-grid-group-column-btn-sort-desc:before {
    content: "arrow_downward";
    font-family: Material Icons;
}
.x-grid-group-panel-body {
    background-color: #fafafa;
    background-color: var(--background-color);
    border: solid #e2e2e2;
    border: solid var(--divider-color);
    border-width: 0;
}
.x-grid-group-panel-body .x-panelheader .x-panelheader-body-el {
    padding: 0;
}
.x-grid-group-panel-hint {
    color: #a9a9a9;
    padding: 5px;
}
.x-pagingtoolbar-summary {
    min-width: 4em;
    text-align: center;
    white-space: nowrap;
}
.x-summaries-icon:before {
    content: "\e912";
    font-family: ExtJS;
}
.x-summaryrow {
    white-space: nowrap;
}
.x-summaryrow :focus {
    outline: none;
}
.x-summaryrow .x-cells-el,
.x-summaryrow .x-cells-el-right-spacer {
    display: inline-table;
    vertical-align: middle;
}
.x-menuitem .x-operator-like:before,
.x-operatortrigger.x-operator-like .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e900";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-nlike:before,
.x-operatortrigger.x-operator-nlike .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e901";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-eq:before,
.x-operatortrigger.x-operator-eq .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e902";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-neq:before,
.x-operatortrigger.x-operator-neq .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e903";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-gt:before,
.x-operatortrigger.x-operator-gt .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e90b";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-gte:before,
.x-operatortrigger.x-operator-gte .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e90c";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-lt:before,
.x-operatortrigger.x-operator-lt .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e90d";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-lte:before,
.x-operatortrigger.x-operator-lte .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e90e";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-in:before,
.x-operatortrigger.x-operator-in .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e906";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-nin:before,
.x-operatortrigger.x-operator-nin .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e907";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-identical:before,
.x-operatortrigger.x-operator-identical .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e908";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-nidentical:before,
.x-operatortrigger.x-operator-nidentical .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e909";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-empty:before,
.x-operatortrigger.x-operator-empty .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e904";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-exists:before,
.x-operatortrigger.x-operator-exists .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e905";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-menuitem .x-operator-fn:before,
.x-operatortrigger.x-operator-fn .x-icon-el:before {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    content: "\e90a";
    font-family: ExtJS;
    font-feature-settings: "liga";
    font-size: 12px;
}
.x-grid-filterbar .x-grid-filter-base {
    border-color: #e2e2e2;
    border-color: var(--divider-color);
    border-style: solid;
    border-width: 0 1px 0 0;
}
.x-big .x-grid-filterbar .x-trigger {
    width: 24px;
}
.x-big .x-grid-filterbar .x-trigger .x-icon-el {
    height: 18px;
    width: 18px;
}
.x-big .x-grid-filterbar .x-trigger .x-icon-el:before {
    font-size: 18px;
}
.x-gridcolumn.x-grid-filterbar-filtered-column > .x-header-el {
    font-style: italic;
    font-weight: 600;
    text-decoration: underline;
}
.x-roweditorcell.x-align-center {
    text-align: center;
}
.x-roweditorcell.x-align-left {
    text-align: left;
}
.x-roweditorcell.x-align-right {
    text-align: right;
}
.x-no-transition {
    transition: none !important;
}
.x-roweditor {
    overflow: visible;
}
.x-roweditor.x-listitem {
    min-width: auto;
}
.x-roweditor-inner-el {
    flex: none;
    width: 100%;
}
.x-roweditor-button-ct > * > .x-panel-body-el {
    background-color: inherit;
}
.x-roweditor-button-ct-above .x-roweditor-button-ct > * > .x-panel-body-el {
    border-bottom-color: transparent !important;
}
.x-roweditor-button-ct-below .x-roweditor-button-ct > * > .x-panel-body-el {
    border-top-color: transparent !important;
}
.x-roweditorgap {
    height: 1px;
}
.x-layout-center {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}
.x-layout-center-item,
.x-layout-center > .x-innerhtml {
    margin: auto;
}
.x-layout-center-item.x-widthed {
    flex-shrink: 0;
}
.x-layout-float > .x-layout-float-item {
    float: left;
}
.x-layout-float.x-direction-right > .x-layout-float-item {
    float: right;
}
.x-layout-form {
    border-collapse: separate;
    display: table;
    width: 100%;
}
.x-layout-form.x-has-label-width {
    table-layout: fixed;
}
.x-layout-form .x-colgroup-el {
    display: table-column-group;
}
.x-layout-form .x-body-column-el,
.x-layout-form .x-label-column-el {
    display: table-column;
}
.x-layout-form-item.x-field {
    border-spacing: 0;
    display: table-row;
}
.x-layout-form-item.x-field > .x-label-el {
    display: table-cell;
    vertical-align: top;
    width: 1px !important;
}
.x-layout-form-item.x-field > .x-body-wrap-el {
    display: table-cell;
    vertical-align: middle;
    width: auto;
}
.x-layout-form-item.x-field > .x-body-wrap-el > .x-body-el {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}
.x-layout-form-item.x-field > .x-body-wrap-el > .x-body-el > .x-input-wrap-el {
    height: 100%;
}
.x-layout-form-item.x-field > .x-body-wrap-el > .x-body-el > .x-input-wrap-el.x-webkit-border-box-bug {
    box-sizing: content-box;
}
.x-layout-form-item.x-field > .x-body-wrap-el > .x-error-el {
    display: table-cell;
    vertical-align: middle;
    width: 1px;
}
.x-layout-form-item.x-field > .x-body-wrap-el > .x-error-el .x-error-message-el {
    display: none;
}
.x-panel.x-placeholder-animate-end.x-horizontal-header {
    flex-direction: column-reverse;
}
.x-panel.x-placeholder-animate-end.x-vertical-header {
    flex-direction: row-reverse;
}
.x-panel.x-sliding > .x-panelheader {
    z-index: 1000;
}
.x-panel.x-drawer {
    z-index: 999;
}
.x-panelheader {
    flex-shrink: 0;
}
.x-panelresizer {
    position: absolute;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    cursor: default;
    z-index: 1;
}
.x-panelresizer.x-north {
    left: 0;
    right: 0;
    top: 0;
}
.x-panelresizer.x-north.x-handle {
    cursor: n-resize;
}
.x-panelresizer.x-north.x-splitter {
    cursor: row-resize;
}
.x-panelresizer.x-northeast {
    cursor: ne-resize;
    right: 0;
    top: 0;
}
.x-panelresizer.x-east {
    bottom: 0;
    right: 0;
    top: 0;
}
.x-panelresizer.x-east.x-handle {
    cursor: e-resize;
}
.x-panelresizer.x-east.x-splitter {
    cursor: col-resize;
}
.x-panelresizer.x-southeast {
    bottom: 0;
    cursor: se-resize;
    right: 0;
}
.x-panelresizer.x-south {
    bottom: 0;
    left: 0;
    right: 0;
}
.x-panelresizer.x-south.x-handle {
    cursor: s-resize;
}
.x-panelresizer.x-south.x-splitter {
    cursor: row-resize;
}
.x-panelresizer.x-southwest {
    bottom: 0;
    cursor: sw-resize;
    left: 0;
}
.x-panelresizer.x-west {
    bottom: 0;
    left: 0;
    top: 0;
}
.x-panelresizer.x-west.x-handle {
    cursor: w-resize;
}
.x-panelresizer.x-west.x-splitter {
    cursor: col-resize;
}
.x-panelresizer.x-northwest {
    cursor: nw-resize;
    left: 0;
    top: 0;
}
.x-panelresizer.x-disabled.x-handle,
.x-panelresizer.x-disabled.x-splitter {
    cursor: default;
}
.x-panelresizer-proxy {
    cursor: default;
    position: absolute;
    z-index: 999999;
}
.x-resizeactive iframe {
    pointer-events: none;
}
.x-nativescroller {
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none;
}
.x-nativescroller.x-overflow-x-auto {
    overflow-x: auto !important;
}
.x-nativescroller.x-overflow-x-hidden {
    overflow-x: hidden !important;
}
.x-nativescroller.x-overflow-x-scroll {
    overflow-x: scroll !important;
}
.x-nativescroller.x-overflow-y-auto {
    overflow-y: auto !important;
}
.x-nativescroller.x-overflow-y-hidden {
    overflow-y: hidden !important;
}
.x-nativescroller.x-overflow-y-scroll {
    overflow-y: scroll !important;
}
.x-nativescroller > .x-scroller-spacer {
    font-size: 0;
    height: 1px;
    line-height: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1px;
}
.x-scrollindicator {
    position: absolute;
}
.x-scrollindicator.x-vertical {
    right: 0;
    top: 0;
}
.x-scrollindicator.x-horizontal {
    bottom: 0;
    left: 0;
}
.x-scrollbar {
    display: none;
    overflow: hidden;
    z-index: 2;
}
.x-scrollbar .x-spacer-el {
    height: 1px;
    position: absolute;
    width: 1px;
}
.x-scrollbar.x-enabled,
.x-scrollbar.x-overflow-scroll {
    display: block;
}
.x-scrollbar.x-vertical {
    bottom: 0;
    overflow-y: auto;
}
.x-scrollbar.x-vertical.x-overflow-scroll {
    overflow-y: scroll;
}
:not(.x-has-horizontal-scrollbar) > .x-scrollbar.x-vertical {
    margin-bottom: 0 !important;
}
.x-scrollbar.x-horizontal {
    overflow-x: auto;
    right: 0;
}
.x-scrollbar.x-horizontal.x-overflow-scroll {
    overflow-x: scroll;
}
:not(.x-has-vertical-scrollbar) > .x-scrollbar.x-horizontal {
    margin-right: 0 !important;
}
:not(.x-has-horizontal-scrollbar) > .x-scroller-inner {
    min-height: 100% !important;
}
:not(.x-has-vertical-scrollbar) > .x-scroller-inner {
    min-width: 100% !important;
}
.x-scrollbar-corner {
    bottom: 0;
    overflow: scroll;
    position: absolute;
    right: 0;
}
.x-windows .x-scrollbar-corner {
    overflow: hidden;
}
.x-scrolloverlay {
    position: absolute;
    z-index: 99999;
}
.x-virtualscroller {
    overflow: hidden;
    position: relative;
}
.x-virtualscroller .x-scroller-inner {
    float: left;
    min-height: 100%;
    min-width: 100%;
    position: relative;
}
.x-tab .x-active-indicator-el {
    bottom: 0;
    display: none;
    height: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 100%;
}
.x-tab.x-active .x-active-indicator-el {
    display: block;
}
.x-tab .x-close-icon-el {
    cursor: pointer;
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4;
}
.x-tab.x-closable .x-close-icon-el {
    display: flex;
}
.x-tab.x-tab-rotate-left .x-text-el {
    transform: rotate(180deg);
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
}
.x-tab.x-tab-rotate-left .x-icon-el {
    transform: rotate(270deg);
}
.x-tab.x-tab-rotate-left .x-close-icon-el {
    left: 0;
}
.x-tab.x-tab-rotate-right .x-text-el {
    margin-right: 8px;
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
}
.x-tab.x-tab-rotate-right .x-icon-el {
    transform: rotate(90deg);
}
.x-tab.x-tab-rotate-right .x-close-icon-el {
    bottom: 0;
    top: auto;
}
.x-tab.x-tab-position-left.x-active .x-active-indicator-el {
    height: 100%;
    left: inherit;
    right: 0;
}
.x-tab.x-tab-position-right.x-active .x-active-indicator-el {
    height: 100%;
    left: 0;
}
.x-tabbar-body-el {
    overflow: visible;
}
.x-tabbar .x-strip-el {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
}
.x-tabbar .x-active-indicator-el {
    bottom: 0;
    position: absolute;
    z-index: 2;
}
.x-root {
    color: #111;
    color: var(--color);
    font:
        400 14px/1.25 Roboto,
        sans-serif;
}
.x-big .x-root,
.x-root.x-big {
    font-size: 16px;
}
.x-fi:before,
.x-font-icon {
    font-family: Material Icons;
}
.x-loading-spinner {
    font-size: 250%;
    height: 16px;
    position: relative;
    -webkit-transform-origin: 8px 8px;
    transform-origin: 8px 8px;
    width: 16px;
}
.x-loading-spinner > span,
.x-loading-spinner > span:after,
.x-loading-spinner > span:before {
    content: " ";
    display: block;
    height: 4px;
    position: absolute;
    top: 0;
    -webkit-transform-origin: 0.5px 8px;
    transform-origin: 0.5px 8px;
    width: 1px;
}
.x-loading-spinner > span {
    left: 50%;
    margin-left: -0.05em;
}
.x-loading-spinner > span.x-loading-top {
    background-color: hsla(0, 0%, 67%, 0.99);
}
.x-loading-spinner > span.x-loading-top:after {
    background-color: hsla(0, 0%, 67%, 0.9);
}
.x-loading-spinner > span.x-loading-left:before {
    background-color: hsla(0, 0%, 67%, 0.8);
}
.x-loading-spinner > span.x-loading-left {
    background-color: hsla(0, 0%, 67%, 0.7);
}
.x-loading-spinner > span.x-loading-left:after {
    background-color: hsla(0, 0%, 67%, 0.6);
}
.x-loading-spinner > span.x-loading-bottom:before {
    background-color: hsla(0, 0%, 67%, 0.5);
}
.x-loading-spinner > span.x-loading-bottom {
    background-color: hsla(0, 0%, 67%, 0.4);
}
.x-loading-spinner > span.x-loading-bottom:after {
    background-color: hsla(0, 0%, 67%, 0.35);
}
.x-loading-spinner > span.x-loading-right:before {
    background-color: hsla(0, 0%, 67%, 0.3);
}
.x-loading-spinner > span.x-loading-right {
    background-color: hsla(0, 0%, 67%, 0.25);
}
.x-loading-spinner > span.x-loading-right:after {
    background-color: hsla(0, 0%, 67%, 0.2);
}
.x-loading-spinner > span.x-loading-top:before {
    background-color: hsla(0, 0%, 67%, 0.15);
}
.x-loading-spinner > span.x-loading-top {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.x-loading-spinner > span.x-loading-right {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.x-loading-spinner > span.x-loading-bottom {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.x-loading-spinner > span.x-loading-left {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}
.x-loading-spinner > span:before {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.x-loading-spinner > span:after {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
.x-loading-spinner {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: x-loading-spinner-rotate;
    animation-name: x-loading-spinner-rotate;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
.x-draggable {
    cursor: move !important;
}
.x-progress {
    background-color: #bbdefb;
    background-color: var(--base-light-color);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    min-height: 4px;
    text-align: center;
}
.x-big .x-progress {
    font-size: 15px;
    line-height: 24px;
    min-height: 4px;
}
.x-progress .x-progress-bar {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
    min-height: 4px;
}
.x-big .x-progress .x-progress-bar {
    min-height: 4px;
}
.x-progress .x-progress-text-back {
    color: #111;
}
.x-managed-borders > .x-docked-top {
    border-bottom-width: 0 !important;
}
.x-managed-borders > .x-docked-bottom {
    border-top-width: 0 !important;
}
.x-managed-borders > .x-docked-left {
    border-right-width: 0 !important;
}
.x-managed-borders > .x-docked-right {
    border-left-width: 0 !important;
}
.x-indicator span {
    background-color: #ccc;
    background-image: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    height: 10px;
    margin: 3px;
    width: 10px;
}
.x-indicator span.x-indicator-active {
    background-color: #ccc;
    background-image: none;
    height: 16px;
    width: 16px;
}
.x-indicator.x-indicator-horizontal {
    height: 26px;
}
.x-indicator.x-indicator-vertical {
    width: 26px;
}
.x-indicator-light span {
    background-color: hsla(0, 0%, 100%, 0.38);
    background-color: var(--reverse-disabled-color);
    background-image: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    height: 10px;
    margin: 3px;
    width: 10px;
}
.x-indicator-light span.x-indicator-active {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
    height: 16px;
    width: 16px;
}
.x-indicator-light.x-indicator-horizontal {
    height: 26px;
}
.x-indicator-light.x-indicator-vertical {
    width: 26px;
}
.x-indicator-dark span {
    background-color: hsla(0, 0%, 7%, 0.38);
    background-color: var(--disabled-color);
    background-image: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    height: 10px;
    margin: 3px;
    width: 10px;
}
.x-indicator-dark span.x-indicator-active {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
    height: 16px;
    width: 16px;
}
.x-indicator-dark.x-indicator-horizontal {
    height: 26px;
}
.x-indicator-dark.x-indicator-vertical {
    width: 26px;
}
.x-layout-card-item {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-button {
    border-radius: 2px;
    color: #2196f3;
    color: var(--base-color);
    font:
        600 14px/16px Roboto,
        sans-serif;
}
.x-big .x-button {
    border-radius: 2px;
    font-size: 14px;
    line-height: 24px;
}
.x-button .x-inner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    border-radius: 2px;
    padding: 8px;
}
.x-big .x-button .x-inner-el {
    border-radius: 2px;
    padding: 6px;
}
.x-button.x-has-text .x-inner-el {
    padding: 8px 16px;
}
.x-big .x-button.x-has-text .x-inner-el {
    padding: 6px 16px;
}
.x-button .x-icon-el {
    color: #2196f3;
    color: var(--base-color);
    height: 16px;
    width: 16px;
}
.x-big .x-button .x-icon-el {
    height: 24px;
    width: 24px;
}
.x-button .x-icon-el:before {
    font-size: 16px;
}
.x-big .x-button .x-icon-el:before {
    font-size: 24px;
}
.x-button.x-has-text.x-icon-align-left .x-icon-el {
    margin-right: 5px;
}
.x-big .x-button.x-has-text.x-icon-align-left .x-icon-el {
    margin-right: 8px;
}
.x-button.x-has-text.x-icon-align-right .x-icon-el {
    margin-left: 5px;
}
.x-big .x-button.x-has-text.x-icon-align-right .x-icon-el {
    margin-left: 8px;
}
.x-button.x-has-text.x-icon-align-top .x-icon-el {
    margin-bottom: 2px;
}
.x-big .x-button.x-has-text.x-icon-align-top .x-icon-el {
    margin-bottom: 3px;
}
.x-button.x-has-text.x-icon-align-bottom .x-icon-el {
    margin-top: 2px;
}
.x-big .x-button.x-has-text.x-icon-align-bottom .x-icon-el {
    margin-top: 3px;
}
.x-button .x-arrow-el {
    color: #2196f3;
    color: var(--base-color);
    height: 16px;
    width: 16px;
}
.x-big .x-button .x-arrow-el {
    height: 24px;
    width: 24px;
}
.x-button .x-arrow-el:before {
    content: "arrow_drop_down";
    font-size: 22px;
}
.x-big .x-button .x-arrow-el:before {
    font-size: 24px;
}
.x-button.x-arrow-align-right .x-arrow-el {
    margin-left: 5px;
}
.x-big .x-button.x-arrow-align-right .x-arrow-el {
    margin-left: 8px;
}
.x-button .x-text-el {
    min-height: 16px;
    text-transform: uppercase;
}
.x-big .x-button .x-text-el {
    min-height: 24px;
}
.x-button .x-badge-el {
    background-color: #ff9800;
    background-color: var(--accent-color);
    background-image: none;
    border-color: transparent;
    border-radius: 32px;
    color: #222;
    color: var(--accent-foreground-color);
    font-family: Roboto, sans-serif;
    font-size: 12px;
    line-height: 16px;
    max-width: 55%;
    min-width: 24px;
    padding: 4px;
    right: -10px;
    top: -10px;
}
.x-big .x-button .x-badge-el {
    font-size: 13px;
    line-height: 16px;
}
.x-button.x-hovered .x-inner-el {
    background-color: hsla(0, 0%, 7%, 0.075);
    background-image: none;
    border-color: rgba(0, 0, 0, 0.075);
}
.x-button:before {
    border-radius: 2px;
}
.x-button.x-pressed,
.x-button.x-pressing {
    color: #fafafa;
    color: var(--background-color);
}
.x-button.x-pressed .x-inner-el,
.x-button.x-pressing .x-inner-el,
.x-keyboard-mode .x-button.x-pressed .x-inner-el,
.x-keyboard-mode .x-button.x-pressing .x-inner-el {
    background-color: #6ab8f7;
    background-color: var(--base-pressed-color);
    background-image: none;
    border-color: #43a6f5;
}
.x-button.x-pressed .x-arrow-el,
.x-button.x-pressed .x-icon-el,
.x-button.x-pressing .x-arrow-el,
.x-button.x-pressing .x-icon-el,
.x-keyboard-mode .x-button.x-focused {
    color: #fafafa;
    color: var(--background-color);
}
.x-keyboard-mode .x-button.x-focused .x-inner-el {
    background-color: #42a5f5;
    background-color: var(--base-focused-color);
    background-image: none;
    border-color: #1b93f3;
}
.x-keyboard-mode .x-button.x-focused .x-arrow-el,
.x-keyboard-mode .x-button.x-focused .x-icon-el {
    color: #fafafa;
    color: var(--background-color);
}
.x-big .x-keyboard-mode .x-button.x-focused:after,
.x-keyboard-mode .x-button.x-focused:after {
    border-radius: 2px;
}
.x-button.x-disabled,
.x-button.x-disabled .x-arrow-el,
.x-button.x-disabled .x-icon-el {
    color: rgba(0, 0, 0, 0.26);
}
.x-button-alt {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-alt .x-inner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-button-alt .x-arrow-el,
.x-button-alt .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-alt.x-hovered .x-inner-el {
    background-color: hsla(0, 0%, 100%, 0.075);
    background-image: none;
    border-color: hsla(0, 0%, 92%, 0.075);
}
.x-button-alt.x-pressed,
.x-button-alt.x-pressing {
    color: #fff;
}
.x-button-alt.x-pressed .x-inner-el,
.x-button-alt.x-pressing .x-inner-el,
.x-keyboard-mode .x-button-alt.x-pressed .x-inner-el,
.x-keyboard-mode .x-button-alt.x-pressing .x-inner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-button-alt.x-pressed .x-arrow-el,
.x-button-alt.x-pressed .x-icon-el,
.x-button-alt.x-pressing .x-arrow-el,
.x-button-alt.x-pressing .x-icon-el {
    color: #fff;
}
.x-button-alt.x-disabled .x-inner-el {
    background-color: rgba(0, 0, 0, 0.12);
    background-image: none;
    border-color: rgba(0, 0, 0, 0.12);
}
.x-button-action {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-action .x-inner-el {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
    border-color: #0c82df;
}
.x-button-action .x-arrow-el,
.x-button-action .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-action.x-hovered .x-inner-el {
    background-color: #1976d2;
    background-color: var(--base-dark-color);
    background-image: none;
    border-color: #1562ae;
}
.x-button-action.x-pressed,
.x-button-action.x-pressing {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
}
.x-button-action.x-pressed .x-inner-el,
.x-button-action.x-pressing .x-inner-el,
.x-keyboard-mode .x-button-action.x-pressed .x-inner-el,
.x-keyboard-mode .x-button-action.x-pressing .x-inner-el {
    background-color: #6ab8f7;
    background-color: var(--base-pressed-color);
    background-image: none;
    border-color: #43a6f5;
}
.x-button-action.x-pressed .x-arrow-el,
.x-button-action.x-pressed .x-icon-el,
.x-button-action.x-pressing .x-arrow-el,
.x-button-action.x-pressing .x-icon-el {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
}
.x-button-action.x-disabled .x-inner-el {
    background-color: rgba(0, 0, 0, 0.12);
    background-image: none;
    border-color: rgba(0, 0, 0, 0.12);
}
.x-button-confirm,
.x-button-confirm .x-arrow-el,
.x-button-confirm .x-icon-el {
    color: #7cb342;
    color: var(--confirm-color);
}
.x-button-confirm.x-hovered .x-inner-el {
    background-color: #a2cc75;
    background-color: var(--confirm-pressed-color);
    background-image: none;
    border-color: #8ec157;
}
.x-button-confirm.x-pressed,
.x-button-confirm.x-pressing {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-confirm.x-pressed .x-inner-el,
.x-button-confirm.x-pressing .x-inner-el,
.x-keyboard-mode .x-button-confirm.x-pressed .x-inner-el,
.x-keyboard-mode .x-button-confirm.x-pressing .x-inner-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
    background-image: none;
    border-color: #679537;
}
.x-button-confirm.x-pressed .x-arrow-el,
.x-button-confirm.x-pressed .x-icon-el,
.x-button-confirm.x-pressing .x-arrow-el,
.x-button-confirm.x-pressing .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-keyboard-mode .x-button-confirm.x-focused {
    color: #fff;
}
.x-keyboard-mode .x-button-confirm.x-focused .x-inner-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
    background-image: none;
    border-color: #679537;
}
.x-keyboard-mode .x-button-confirm.x-focused .x-arrow-el,
.x-keyboard-mode .x-button-confirm.x-focused .x-icon-el {
    color: #fff;
}
.x-button-decline,
.x-button-decline .x-arrow-el,
.x-button-decline .x-icon-el {
    color: #c62828;
    color: var(--alert-color);
}
.x-button-decline.x-hovered .x-inner-el {
    background-color: #de5c5c;
    background-color: var(--alert-pressed-color);
    background-image: none;
    border-color: #d73a3a;
}
.x-button-decline.x-pressed,
.x-button-decline.x-pressing {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-decline.x-pressed .x-inner-el,
.x-button-decline.x-pressing .x-inner-el,
.x-keyboard-mode .x-button-decline.x-pressed .x-inner-el,
.x-keyboard-mode .x-button-decline.x-pressing .x-inner-el {
    background-color: #c62828;
    background-color: var(--alert-color);
    background-image: none;
    border-color: #a42121;
}
.x-button-decline.x-pressed .x-arrow-el,
.x-button-decline.x-pressed .x-icon-el,
.x-button-decline.x-pressing .x-arrow-el,
.x-button-decline.x-pressing .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-keyboard-mode .x-button-decline.x-focused {
    color: #fff;
}
.x-keyboard-mode .x-button-decline.x-focused .x-inner-el {
    background-color: #c62828;
    background-color: var(--alert-color);
    background-image: none;
    border-color: #a42121;
}
.x-keyboard-mode .x-button-decline.x-focused .x-arrow-el,
.x-keyboard-mode .x-button-decline.x-focused .x-icon-el {
    color: #fff;
}
.x-button-round {
    border-radius: 10000px;
}
.x-big .x-button-round {
    border-radius: 20000px;
}
.x-button-round .x-inner-el {
    border-radius: 10000px;
}
.x-big .x-button-round .x-inner-el {
    border-radius: 20000px;
}
.x-button-round:before,
.x-keyboard-mode .x-button-round.x-focused:after {
    border-radius: 10000px;
}
.x-big .x-keyboard-mode .x-button-round.x-focused:after {
    border-radius: 20000px;
}
.x-big .x-button-square,
.x-big .x-button-square .x-inner-el,
.x-big .x-keyboard-mode .x-button-square.x-focused:after,
.x-button-square,
.x-button-square .x-inner-el,
.x-button-square:before,
.x-keyboard-mode .x-button-square.x-focused:after {
    border-radius: 0;
}
.x-button-flat {
    color: #fff;
}
.x-button-flat .x-inner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    border-width: 0;
}
.x-button-flat .x-arrow-el,
.x-button-flat .x-icon-el {
    color: #fff;
}
.x-button-flat.x-hovered .x-inner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-button-flat.x-pressed,
.x-button-flat.x-pressing {
    color: #fff;
}
.x-button-flat.x-pressed .x-inner-el,
.x-button-flat.x-pressing .x-inner-el,
.x-keyboard-mode .x-button-flat.x-pressed .x-inner-el,
.x-keyboard-mode .x-button-flat.x-pressing .x-inner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-button-flat.x-pressed .x-arrow-el,
.x-button-flat.x-pressed .x-icon-el,
.x-button-flat.x-pressing .x-arrow-el,
.x-button-flat.x-pressing .x-icon-el,
.x-button-plain {
    color: #fff;
}
.x-button-plain .x-inner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    border-width: 0;
}
.x-button-plain .x-arrow-el,
.x-button-plain .x-icon-el {
    color: #fff;
}
.x-button-plain.x-hovered .x-inner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-button-plain.x-pressed,
.x-button-plain.x-pressing {
    color: #fff;
}
.x-button-plain.x-pressed .x-inner-el,
.x-button-plain.x-pressing .x-inner-el,
.x-keyboard-mode .x-button-plain.x-pressed .x-inner-el,
.x-keyboard-mode .x-button-plain.x-pressing .x-inner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-button-plain.x-pressed .x-arrow-el,
.x-button-plain.x-pressed .x-icon-el,
.x-button-plain.x-pressing .x-arrow-el,
.x-button-plain.x-pressing .x-icon-el {
    color: #fff;
}
.x-button-raised {
    box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.2);
}
.x-button-raised:before {
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
    content: "";
    transition: opacity 0.15s;
}
.x-button-raised.x-disabled {
    box-shadow: none;
}
.x-button-raised.x-disabled .x-inner-el {
    background-color: rgba(0, 0, 0, 0.12);
    background-image: none;
    border-color: rgba(0, 0, 0, 0.12);
}
.x-button-segmented {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-segmented .x-inner-el {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
    border-color: #0c82df;
}
.x-button-segmented .x-arrow-el,
.x-button-segmented .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-segmented.x-hovered .x-inner-el {
    background-color: #1976d2;
    background-color: var(--base-dark-color);
    background-image: none;
    border-color: #1562ae;
}
.x-button-segmented.x-pressed,
.x-button-segmented.x-pressing {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-button-segmented.x-pressed.x-hovered .x-inner-el,
.x-button-segmented.x-pressing.x-hovered .x-inner-el,
.x-keyboard-mode .x-button-segmented.x-pressed.x-hovered .x-inner-el,
.x-keyboard-mode .x-button-segmented.x-pressing.x-hovered .x-inner-el {
    background-color: #1976d2;
    background-color: var(--base-dark-color);
    background-image: none;
}
.x-button-segmented.x-pressed .x-inner-el,
.x-button-segmented.x-pressing .x-inner-el,
.x-keyboard-mode .x-button-segmented.x-pressed .x-inner-el,
.x-keyboard-mode .x-button-segmented.x-pressing .x-inner-el {
    background-color: #6ab8f7;
    background-color: var(--base-pressed-color);
    background-image: none;
    border-color: #43a6f5;
}
.x-button-segmented.x-pressed .x-arrow-el,
.x-button-segmented.x-pressed .x-icon-el,
.x-button-segmented.x-pressing .x-arrow-el,
.x-button-segmented.x-pressing .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-keyboard-mode .x-button-segmented.x-focused.x-hovered .x-inner-el {
    background-color: #1976d2;
    background-color: var(--base-dark-color);
    background-image: none;
}
.x-title {
    line-height: 1.3;
}
.x-toolbar {
    background-color: #f5f5f5;
    background-color: var(--alt-background-color);
    background-image: none;
    border-color: #767676;
    box-shadow:
        2px 2px 5px 0 rgba(0, 0, 0, 0.12),
        2px 2px 5px 0 rgba(0, 0, 0, 0.08);
    color: #111;
    color: var(--color);
    font:
        600 16px/16px Roboto,
        sans-serif;
}
.x-big .x-toolbar {
    font-size: 18px;
}
.x-toolbar .x-title {
    color: #111;
    color: var(--color);
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
}
.x-big .x-toolbar .x-title {
    font-size: 18px;
}
.x-toolbar-body-el {
    min-height: 48px;
    padding: 8px 16px;
}
.x-big .x-toolbar-body-el {
    min-height: 64px;
    padding: 10px 16px;
}
.x-toolbar-body-el.x-horizontal > .x-component,
.x-toolbar-body-el.x-horizontal > .x-component:last-child {
    margin-right: 0;
}
.x-toolbar-body-el.x-vertical > .x-component {
    margin-bottom: 6px;
}
.x-big .x-toolbar-body-el.x-vertical > .x-component {
    margin-bottom: 8px;
}
.x-toolbar-body-el.x-vertical > .x-component:last-child {
    margin-bottom: 0;
}
.x-toolbar-footer {
    background-color: #fafafa;
    background-color: var(--background-color);
    background-image: none;
    border-color: #7a7a7a;
    box-shadow: none;
}
.x-toolbar-footer .x-title {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
}
.x-tool {
    cursor: pointer;
}
.x-tool .x-icon-el {
    color: #9e9e9e;
}
.x-big .x-tool .x-icon-el,
.x-tool .x-icon-el {
    height: 18px;
    width: 18px;
}
.x-big .x-tool .x-icon-el:before,
.x-tool .x-icon-el:before {
    font-size: 18px;
}
.x-tool.x-start {
    margin: 0 6px 0 0;
}
.x-big .x-tool.x-start {
    margin: 0 8px 0 0;
}
.x-reverse > .x-tool.x-start {
    margin: 0 0 0 6px;
}
.x-big .x-reverse > .x-tool.x-start {
    margin: 0 0 0 8px;
}
.x-vertical > .x-tool.x-start {
    margin: 0 0 6px;
}
.x-big .x-vertical > .x-tool.x-start {
    margin: 0 0 8px;
}
.x-vertical.x-reverse > .x-tool.x-start {
    margin: 6px 0 0;
}
.x-big .x-vertical.x-reverse > .x-tool.x-start {
    margin: 8px 0 0;
}
.x-tool.x-end {
    margin: 0 0 0 6px;
}
.x-big .x-tool.x-end {
    margin: 0 0 0 8px;
}
.x-reverse > .x-tool.x-end {
    margin: 0 6px 0 0;
}
.x-big .x-reverse > .x-tool.x-end {
    margin: 0 8px 0 0;
}
.x-vertical > .x-tool.x-end {
    margin: 6px 0 0;
}
.x-big .x-vertical > .x-tool.x-end {
    margin: 8px 0 0;
}
.x-vertical.x-reverse > .x-tool.x-end {
    margin: 0 0 6px;
}
.x-big .x-vertical.x-reverse > .x-tool.x-end {
    margin: 0 0 8px;
}
.x-tool.x-hovered .x-icon-el {
    opacity: 0.8;
}
.x-tool.x-pressed .x-icon-el {
    opacity: 0.6;
}
.x-keyboard-mode .x-tool.x-focused {
    outline: 1px solid #2196f3;
    outline: 1px solid var(--base-color);
}
.x-tool.x-disabled {
    cursor: default;
}
.x-tool.x-disabled:not(.x-passive) .x-icon-el {
    opacity: 0.3;
}
.x-tool-itemheader .x-icon-el {
    color: #757575;
}
.x-tool-boxscroller {
    height: 32px;
    width: 32px;
}
.x-big .x-tool-boxscroller {
    height: 44px;
    width: 44px;
}
.x-big .x-tool-boxscroller .x-icon-el,
.x-tool-boxscroller .x-icon-el {
    height: 24px;
    width: 24px;
}
.x-big .x-tool-boxscroller .x-icon-el:before,
.x-tool-boxscroller .x-icon-el:before {
    font-size: 24px;
}
.x-tool-boxscroller-toolbar .x-icon-el {
    color: #303030;
    color: var(--reverse-background-color);
    opacity: 1;
}
.x-tool-boxscroller-toolbar.x-hovered .x-icon-el {
    opacity: 0.6;
}
.x-tool-boxscroller-toolbar.x-pressed .x-icon-el {
    opacity: 0.7;
}
.x-tool-boxscroller-toolbar.x-disabled:not(.x-passive) .x-icon-el {
    opacity: 0;
}
.x-tool-boxscroller-tabbar .x-icon-el {
    color: #fafafa;
    color: var(--background-color);
    opacity: 1;
}
.x-tool-boxscroller-tabbar.x-hovered .x-icon-el {
    opacity: 0.6;
}
.x-tool-boxscroller-tabbar.x-pressed .x-icon-el {
    opacity: 0.7;
}
.x-tool-boxscroller-tabbar.x-disabled:not(.x-passive) .x-icon-el {
    opacity: 0;
}
.x-tool-type-close:before {
    content: "close";
    font-family: Material Icons;
}
.x-tool-type-disclosure:before {
    content: "arrow_forward";
    font-family: Material Icons;
}
.x-tool-type-minimize:before {
    content: "remove";
    font-family: Material Icons;
}
.x-tool-type-maximize:before {
    content: "call_made";
    font-family: Material Icons;
}
.x-tool-type-restore:before {
    content: "call_received";
    font-family: Material Icons;
}
.x-tool-type-toggle:before {
    content: "arrow_drop_up";
    font-family: Material Icons;
}
.x-panel-collapsed .x-tool-type-toggle:before {
    content: "arrow_drop_down";
    font-family: Material Icons;
}
.x-tool-type-gear:before {
    content: "settings";
    font-family: Material Icons;
}
.x-tool-type-prev:before {
    content: "arrow_back";
    font-family: Material Icons;
}
.x-tool-type-next:before {
    content: "arrow_forward";
    font-family: Material Icons;
}
.x-tool-type-pin:before {
    content: "\f08d";
    font-family: Font Awesome\5 Free;
}
.x-tool-type-unpin:before {
    content: "\e611";
    font-family: ExtJS;
}
.x-tool-type-right:before {
    content: "keyboard_arrow_right";
    font-family: Material Icons;
}
.x-tool-type-left:before {
    content: "keyboard_arrow_left";
    font-family: Material Icons;
}
.x-tool-type-down:before {
    content: "keyboard_arrow_down";
    font-family: Material Icons;
}
.x-tool-type-up:before {
    content: "keyboard_arrow_up";
    font-family: Material Icons;
}
.x-tool-type-refresh:before {
    content: "refresh";
    font-family: Material Icons;
}
.x-tool-type-plus:before {
    content: "add";
    font-family: Material Icons;
}
.x-tool-type-menu:before {
    content: "menu";
    font-family: Material Icons;
}
.x-tool-type-minus:before {
    content: "remove";
    font-family: Material Icons;
}
.x-tool-type-search:before {
    content: "search";
    font-family: Material Icons;
}
.x-tool-type-save:before {
    content: "save";
    font-family: Material Icons;
}
.x-tool-type-help:before {
    content: "help_outline";
    font-family: Material Icons;
}
.x-tool-type-print:before {
    content: "print";
    font-family: Material Icons;
}
.x-tool-type-expand:before {
    content: "expand_more";
    font-family: Material Icons;
}
.x-tool-type-collapse:before {
    content: "expand_less";
    font-family: Material Icons;
}
.x-tool-type-resize:before {
    content: "\f337";
    font-family: Font Awesome\5 Free;
}
.x-tool-type-move:before {
    content: "open_with";
    font-family: Material Icons;
}
.x-tool-type-collapse-bottom:before,
.x-tool-type-expand-bottom:before {
    content: "keyboard_arrow_down";
    font-family: Material Icons;
}
.x-tool-type-collapse-top:before,
.x-tool-type-expand-top:before {
    content: "keyboard_arrow_up";
    font-family: Material Icons;
}
.x-tool-type-collapse-left:before,
.x-tool-type-expand-left:before {
    content: "keyboard_arrow_left";
    font-family: Material Icons;
}
.x-tool-type-collapse-right:before,
.x-tool-type-expand-right:before {
    content: "keyboard_arrow_right";
    font-family: Material Icons;
}
.x-tool-type-edit:before {
    content: "create";
    font-family: Material Icons;
}
.x-tool-type-trash:before {
    content: "delete";
    font-family: Material Icons;
}
.x-tool-type-scroll-right:before {
    content: "keyboard_arrow_right";
    font-family: Material Icons;
}
.x-tool-type-scroll-left:before {
    content: "keyboard_arrow_left";
    font-family: Material Icons;
}
.x-tool-type-scroll-down:before {
    content: "keyboard_arrow_down";
    font-family: Material Icons;
}
.x-tool-type-scroll-up:before {
    content: "keyboard_arrow_up";
    font-family: Material Icons;
}
.x-panel > .x-anchor-el {
    margin: 1px;
}
.x-panel > .x-anchor-el .x-pointer-el {
    fill: #fafafa;
    fill: var(--background-color);
    stroke-width: 1px;
    stroke: #e1e1e1;
    stroke: var(--faded-color);
}
.x-panel > .x-anchor-el.x-top {
    height: 10px;
    padding-bottom: 1px;
    top: -10px;
    width: 20px;
}
.x-panel > .x-anchor-el.x-bottom {
    bottom: -10px;
    height: 10px;
    padding-top: 1px;
    width: 20px;
}
.x-panel > .x-anchor-el.x-left {
    height: 20px;
    left: -10px;
    padding-right: 1px;
    width: 10px;
}
.x-panel > .x-anchor-el.x-left .x-pointer-el {
    transform-origin: 10px 10px;
}
.x-panel > .x-anchor-el.x-right {
    height: 20px;
    padding-left: 1px;
    right: -10px;
    width: 10px;
}
.x-panel > .x-anchor-el.x-right .x-pointer-el {
    transform-origin: 5px 5px;
}
.x-panel-body-el {
    background-color: #fafafa;
    background-color: var(--background-color);
    border: 1px solid #e1e1e1;
    border: 1px solid var(--faded-color);
    color: #111;
    color: var(--color);
    font:
        400 12px/18px Roboto,
        sans-serif;
}
.x-big .x-panel-body-el {
    font-size: 14px;
    line-height: 20px;
}
.x-panel-boxscroller {
    border: 1px solid #e1e1e1;
    border: 1px solid var(--faded-color);
}
.x-panel-boxscroller > .x-boxscroller-body > .x-body-el {
    border: 0;
}
.x-panel-outer-border-l {
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
    border-left-width: 1px !important;
}
.x-panel-outer-border-b,
.x-panel-outer-border-bl {
    border-bottom-color: #e1e1e1 !important;
    border-bottom-color: var(--faded-color) !important;
    border-bottom-width: 1px !important;
}
.x-panel-outer-border-bl {
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
    border-left-width: 1px !important;
}
.x-panel-outer-border-r,
.x-panel-outer-border-rl {
    border-right-color: #e1e1e1 !important;
    border-right-color: var(--faded-color) !important;
    border-right-width: 1px !important;
}
.x-panel-outer-border-rl {
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
    border-left-width: 1px !important;
}
.x-panel-outer-border-rb,
.x-panel-outer-border-rbl {
    border-bottom-color: #e1e1e1 !important;
    border-bottom-color: var(--faded-color) !important;
    border-bottom-width: 1px !important;
    border-right-color: #e1e1e1 !important;
    border-right-color: var(--faded-color) !important;
    border-right-width: 1px !important;
}
.x-panel-outer-border-rbl {
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
    border-left-width: 1px !important;
}
.x-panel-outer-border-t,
.x-panel-outer-border-tl {
    border-top-color: #e1e1e1 !important;
    border-top-color: var(--faded-color) !important;
    border-top-width: 1px !important;
}
.x-panel-outer-border-tl {
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
    border-left-width: 1px !important;
}
.x-panel-outer-border-tb,
.x-panel-outer-border-tbl {
    border-bottom-color: #e1e1e1 !important;
    border-bottom-color: var(--faded-color) !important;
    border-bottom-width: 1px !important;
    border-top-color: #e1e1e1 !important;
    border-top-color: var(--faded-color) !important;
    border-top-width: 1px !important;
}
.x-panel-outer-border-tbl {
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
    border-left-width: 1px !important;
}
.x-panel-outer-border-tr,
.x-panel-outer-border-trl {
    border-right-color: #e1e1e1 !important;
    border-right-color: var(--faded-color) !important;
    border-right-width: 1px !important;
    border-top-color: #e1e1e1 !important;
    border-top-color: var(--faded-color) !important;
    border-top-width: 1px !important;
}
.x-panel-outer-border-trl {
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
    border-left-width: 1px !important;
}
.x-panel-outer-border-trb {
    border-bottom-color: #e1e1e1 !important;
    border-bottom-color: var(--faded-color) !important;
    border-bottom-width: 1px !important;
    border-right-color: #e1e1e1 !important;
    border-right-color: var(--faded-color) !important;
    border-right-width: 1px !important;
    border-top-color: #e1e1e1 !important;
    border-top-color: var(--faded-color) !important;
    border-top-width: 1px !important;
}
.x-panel-outer-border-trbl {
    border-color: #e1e1e1 !important;
    border-color: var(--faded-color) !important;
    border-width: 1px !important;
}
.x-panelheader {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
    border: 1px solid #e1e1e1;
    border: 1px solid var(--faded-color);
}
.x-panelheader.x-horizontal {
    min-height: 48px;
}
.x-big .x-panelheader.x-horizontal {
    min-height: 64px;
}
.x-panelheader.x-vertical {
    min-width: 48px;
}
.x-big .x-panelheader.x-vertical {
    min-width: 64px;
}
.x-big .x-panelheader > .x-body-el,
.x-panelheader > .x-body-el {
    padding: 0 16px;
}
.x-panelheader.x-docked-right {
    border: 1px solid #e1e1e1;
    border: 1px solid var(--faded-color);
}
.x-big .x-panelheader.x-docked-right > .x-body-el,
.x-panelheader.x-docked-right > .x-body-el {
    padding: 16px 0;
    padding: var(--content-padding) 0;
}
.x-panelheader.x-docked-left {
    border: 1px solid #e1e1e1;
    border: 1px solid var(--faded-color);
}
.x-big .x-panelheader.x-docked-left > .x-body-el,
.x-panelheader.x-docked-left > .x-body-el {
    padding: 16px 0;
    padding: var(--content-padding) 0;
}
.x-panelheader.x-docked-bottom {
    border: 1px solid #e1e1e1;
    border: 1px solid var(--faded-color);
}
.x-paneltitle {
    color: #fff;
    color: var(--base-foreground-color);
    font:
        600 18px/24px Roboto,
        sans-serif;
    padding: 8px 0;
}
.x-big .x-paneltitle {
    font-size: 20px;
    line-height: 24px;
    padding: 8px 0;
}
.x-paneltitle .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
    height: 24px;
    width: 24px;
}
.x-big .x-paneltitle .x-icon-el {
    height: 24px;
    width: 24px;
}
.x-big .x-paneltitle .x-icon-el:before,
.x-paneltitle .x-icon-el:before {
    font-size: 24px;
}
.x-big .x-paneltitle.x-horizontal.x-icon-align-top .x-icon-el,
.x-paneltitle.x-horizontal.x-icon-align-top .x-icon-el {
    margin-bottom: 2px;
}
.x-paneltitle.x-horizontal.x-icon-align-right .x-icon-el {
    margin-left: 6px;
}
.x-big .x-paneltitle.x-horizontal.x-icon-align-right .x-icon-el {
    margin-left: 8px;
}
.x-big .x-paneltitle.x-horizontal.x-icon-align-bottom .x-icon-el,
.x-paneltitle.x-horizontal.x-icon-align-bottom .x-icon-el {
    margin-top: 2px;
}
.x-paneltitle.x-horizontal.x-icon-align-left .x-icon-el {
    margin-right: 6px;
}
.x-big .x-paneltitle.x-horizontal.x-icon-align-left .x-icon-el {
    margin-right: 8px;
}
.x-big .x-paneltitle.x-rotate-90,
.x-paneltitle.x-rotate-90 {
    padding: 0 8px;
}
.x-big .x-paneltitle.x-rotate-90.x-icon-align-top .x-icon-el,
.x-paneltitle.x-rotate-90.x-icon-align-top .x-icon-el {
    margin-left: 2px;
}
.x-paneltitle.x-rotate-90.x-icon-align-right .x-icon-el {
    margin-top: 6px;
}
.x-big .x-paneltitle.x-rotate-90.x-icon-align-right .x-icon-el {
    margin-top: 8px;
}
.x-big .x-paneltitle.x-rotate-90.x-icon-align-bottom .x-icon-el,
.x-paneltitle.x-rotate-90.x-icon-align-bottom .x-icon-el {
    margin-right: 2px;
}
.x-paneltitle.x-rotate-90.x-icon-align-left .x-icon-el {
    margin-bottom: 6px;
}
.x-big .x-paneltitle.x-rotate-90.x-icon-align-left .x-icon-el {
    margin-bottom: 8px;
}
.x-big .x-paneltitle.x-rotate-270,
.x-paneltitle.x-rotate-270 {
    padding: 0 8px;
}
.x-big .x-paneltitle.x-rotate-270.x-icon-align-top .x-icon-el,
.x-paneltitle.x-rotate-270.x-icon-align-top .x-icon-el {
    margin-right: 2px;
}
.x-paneltitle.x-rotate-270.x-icon-align-right .x-icon-el {
    margin-bottom: 6px;
}
.x-big .x-paneltitle.x-rotate-270.x-icon-align-right .x-icon-el {
    margin-bottom: 8px;
}
.x-big .x-paneltitle.x-rotate-270.x-icon-align-bottom .x-icon-el,
.x-paneltitle.x-rotate-270.x-icon-align-bottom .x-icon-el {
    margin-left: 2px;
}
.x-paneltitle.x-rotate-270.x-icon-align-left .x-icon-el {
    margin-top: 6px;
}
.x-big .x-paneltitle.x-rotate-270.x-icon-align-left .x-icon-el {
    margin-top: 8px;
}
.x-big .x-paneltitle.x-vertical .x-text-el,
.x-paneltitle.x-vertical .x-text-el {
    width: 24px;
}
.x-paneltool .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
    height: 20px;
    width: 20px;
}
.x-big .x-paneltool .x-icon-el {
    height: 20px;
    width: 20px;
}
.x-big .x-paneltool .x-icon-el:before,
.x-paneltool .x-icon-el:before {
    font-size: 20px;
}
.x-paneltool.x-hovered .x-icon-el {
    opacity: 0.8;
}
.x-paneltool.x-pressed .x-icon-el {
    opacity: 0.6;
}
.x-keyboard-mode .x-paneltool.x-focused {
    outline-color: #fff;
    outline-color: var(--base-foreground-color);
}
.x-panel-light-boxscroller > .x-boxscroller-body > .x-body-el {
    border: 0;
}
.x-panelheader-light {
    background-color: #f5f5f5;
    background-color: var(--alt-background-color);
    background-image: none;
}
.x-paneltitle-light,
.x-paneltitle-light .x-icon-el,
.x-paneltool-light .x-icon-el {
    color: #111;
    color: var(--color);
}
.x-keyboard-mode .x-paneltool-light.x-focused {
    outline-color: #2196f3;
    outline-color: var(--base-color);
}
.x-panel-accordion-body-el {
    border-width: 0;
    padding: 10px;
}
.x-panel-accordion-boxscroller {
    border-width: 0;
}
.x-panel-accordion-boxscroller > .x-boxscroller-body > .x-body-el {
    border: 0;
}
.x-panelheader-accordion {
    background-color: #f5f5f5;
    background-image: none;
    border-width: 0;
}
.x-panelheader-accordion.x-docked-bottom,
.x-panelheader-accordion.x-docked-left,
.x-panelheader-accordion.x-docked-right {
    border-width: 0;
}
.x-paneltitle-accordion,
.x-paneltitle-accordion .x-icon-el {
    color: #111;
}
.x-paneltool-accordion .x-icon-el {
    color: #9e9e9e;
}
.x-mask {
    background-color: #111;
    opacity: 0.7;
}
.x-sheet {
    border-color: #e1e1e1;
}
.x-sheet > .x-anchor-el .x-pointer-el {
    fill: #fafafa;
    fill: var(--background-color);
    stroke: #e1e1e1;
}
.x-sheet-body-el {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-sheet-body-el,
.x-sheet-boxscroller {
    border-color: #e1e1e1;
}
.x-sheet-boxscroller > .x-boxscroller-body > .x-body-el {
    border: 0;
}
.x-sheet {
    border: 0 solid #e1e1e1;
}
.x-sheet-body-el.x-vertical > .x-button {
    margin-bottom: 6px;
}
.x-sheet-body-el.x-vertical > .x-button:last-child {
    margin-bottom: 0;
}
.x-actionsheet {
    border-color: #e1e1e1;
}
.x-actionsheet > .x-anchor-el .x-pointer-el {
    fill: #fafafa;
    fill: var(--background-color);
    stroke: #e1e1e1;
}
.x-actionsheet-body-el {
    background-color: #fafafa;
    background-color: var(--background-color);
    border-color: #e1e1e1;
    padding: 16px;
    padding: var(--content-padding);
}
.x-actionsheet-boxscroller {
    border-color: #e1e1e1;
}
.x-actionsheet-boxscroller > .x-boxscroller-body > .x-body-el {
    border: 0;
}
.x-actionsheet {
    border: 0 solid #e1e1e1;
}
.x-actionsheet-body-el.x-vertical > .x-button {
    margin-bottom: 6px;
}
.x-actionsheet-body-el.x-vertical > .x-button:last-child {
    margin-bottom: 0;
}
.x-menuitem .x-body-el {
    color: #111;
    color: var(--color);
    cursor: pointer;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    height: 32px;
}
.x-big .x-menuitem .x-body-el {
    font-size: 16px;
    height: 48px;
}
.x-menuitem .x-icon-el {
    color: grey;
    height: 16px;
    width: 16px;
}
.x-big .x-menuitem .x-icon-el {
    height: 20px;
    width: 20px;
}
.x-menuitem .x-icon-el:before {
    font-size: 16px;
}
.x-big .x-menuitem .x-icon-el:before {
    font-size: 20px;
}
.x-menuitem .x-arrow-el {
    color: grey;
    height: 16px;
    margin: 0 7px;
    width: 16px;
}
.x-big .x-menuitem .x-arrow-el {
    height: 20px;
    width: 20px;
}
.x-menuitem .x-arrow-el:before {
    content: "chevron_right";
    font-size: 16px;
}
.x-big .x-menuitem .x-arrow-el:before {
    font-size: 20px;
}
.x-big .x-menuitem .x-arrow-el {
    margin: 0 10px;
}
.x-menuitem.x-active .x-body-el {
    background-color: #eee;
    background-color: var(--hovered-background-color);
}
.x-menuitem.x-disabled .x-body-el {
    cursor: default;
}
.x-menuitem.x-disabled .x-arrow-el,
.x-menuitem.x-disabled .x-icon-el,
.x-menuitem.x-disabled .x-text-el {
    opacity: 0.5;
}
.x-keyboard-mode .x-menuitem.x-focused .x-body-el:after {
    border: 1px solid #2196f3;
    border: 1px solid var(--base-color);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.x-menu,
.x-menu .x-big {
    border-radius: 2px;
}
.x-menu > .x-anchor-el .x-pointer-el {
    stroke: #e2e2e2;
    stroke: var(--divider-color);
}
.x-menu-body-el {
    border-color: #e2e2e2;
    border-color: var(--divider-color);
    padding: 8px 0;
}
.x-big .x-menu-body-el {
    padding: 16px 0;
}
.x-menu-boxscroller {
    border-color: #e2e2e2;
    border-color: var(--divider-color);
}
.x-menu-boxscroller > .x-boxscroller-body > .x-body-el {
    border: 0;
}
.x-menu-outer-border-l {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
}
.x-menu-outer-border-b,
.x-menu-outer-border-bl {
    border-bottom-color: #e2e2e2 !important;
    border-bottom-color: var(--divider-color) !important;
}
.x-menu-outer-border-bl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-radius: 0 0 0 2px;
}
.x-big .x-menu-outer-border-bl {
    border-radius: 0 0 0 2px;
}
.x-menu-outer-border-r,
.x-menu-outer-border-rl {
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
}
.x-menu-outer-border-rl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
}
.x-menu-outer-border-rb {
    border-bottom-color: #e2e2e2 !important;
    border-bottom-color: var(--divider-color) !important;
    border-radius: 0 0 2px;
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
}
.x-big .x-menu-outer-border-rb {
    border-radius: 0 0 2px;
}
.x-menu-outer-border-rbl {
    border-bottom-color: #e2e2e2 !important;
    border-bottom-color: var(--divider-color) !important;
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
}
.x-big .x-menu-outer-border-rbl,
.x-menu-outer-border-rbl {
    border-radius: 0 0 2px 2px;
}
.x-menu-outer-border-t,
.x-menu-outer-border-tl {
    border-top-color: #e2e2e2 !important;
    border-top-color: var(--divider-color) !important;
}
.x-menu-outer-border-tl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-radius: 2px 0 0;
}
.x-big .x-menu-outer-border-tl {
    border-radius: 2px 0 0;
}
.x-menu-outer-border-tb,
.x-menu-outer-border-tbl {
    border-bottom-color: #e2e2e2 !important;
    border-bottom-color: var(--divider-color) !important;
    border-top-color: #e2e2e2 !important;
    border-top-color: var(--divider-color) !important;
}
.x-menu-outer-border-tbl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
}
.x-big .x-menu-outer-border-tbl,
.x-menu-outer-border-tbl {
    border-radius: 2px 0 0 2px;
}
.x-menu-outer-border-tr {
    border-radius: 0 2px 0 0;
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
    border-top-color: #e2e2e2 !important;
    border-top-color: var(--divider-color) !important;
}
.x-big .x-menu-outer-border-tr {
    border-radius: 0 2px 0 0;
}
.x-menu-outer-border-trl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
    border-top-color: #e2e2e2 !important;
    border-top-color: var(--divider-color) !important;
}
.x-big .x-menu-outer-border-trl,
.x-menu-outer-border-trl {
    border-radius: 2px 2px 0 0;
}
.x-menu-outer-border-trb {
    border-bottom-color: #e2e2e2 !important;
    border-bottom-color: var(--divider-color) !important;
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
    border-top-color: #e2e2e2 !important;
    border-top-color: var(--divider-color) !important;
}
.x-big .x-menu-outer-border-trb,
.x-menu-outer-border-trb {
    border-radius: 0 2px 2px 0;
}
.x-menu-outer-border-trbl {
    border-color: #e2e2e2 !important;
    border-color: var(--divider-color) !important;
    border-radius: 2px;
}
.x-big .x-menu-outer-border-trbl {
    border-radius: 2px 2px;
}
.x-menuheader,
.x-menuheader.x-docked-bottom,
.x-menuheader.x-docked-left,
.x-menuheader.x-docked-right {
    border-color: #e2e2e2;
    border-color: var(--divider-color);
}
.x-menu-body-el > .x-menuitem .x-icon-wrap-el {
    width: 48px;
}
.x-big .x-menu-body-el > .x-menuitem .x-icon-wrap-el {
    width: 64px;
}
.x-menu-body-el > .x-non-menuitem {
    margin: 2px 16px;
}
.x-big .x-menu-body-el > .x-non-menuitem {
    margin: 3px 16px;
}
.x-menu-body-el > .x-non-menuitem.x-textfield:first-child {
    margin-top: 0;
}
.x-menu-body-el > .x-non-menuitem.x-textfield:last-child {
    margin-bottom: 0;
}
.x-big .x-menu-body-el > .x-non-menuitem.x-textfield:first-child {
    margin-top: 0;
}
.x-big .x-menu-body-el > .x-non-menuitem.x-textfield:last-child {
    margin-bottom: 0;
}
.x-menu-body-el > .x-non-menuitem.x-indented {
    margin-left: 48px;
}
.x-big .x-menu-body-el > .x-non-menuitem.x-indented {
    margin-left: 64px;
}
.x-menu-body-el.x-has-separator:before {
    border: solid #e2e2e2;
    border-color: var(--divider-color);
    border-width: 0 0 0 1px;
    margin-left: 48px;
    width: 1px;
}
.x-big .x-menu-body-el.x-has-separator:before,
.x-menu-body-el.x-has-separator > .x-non-menuitem.x-indented {
    margin-left: 64px;
}
.x-big .x-menu-body-el.x-has-separator > .x-non-menuitem.x-indented {
    margin-left: 80px;
}
.x-big .x-menu-body-el .x-menuitem:not(.x-indented):not(.x-has-left-icon) .x-text-el,
.x-big .x-menu-body-el.x-has-separator > .x-menuitem .x-text-el,
.x-menu-body-el .x-menuitem:not(.x-indented):not(.x-has-left-icon) .x-text-el,
.x-menu-body-el.x-has-separator > .x-menuitem .x-text-el {
    margin-left: 16px;
}
.x-big .x-menu-body-el .x-menuitem:not(.x-has-right-icon):not(.x-has-arrow) .x-text-el,
.x-menu-body-el .x-menuitem:not(.x-has-right-icon):not(.x-has-arrow) .x-text-el {
    margin-right: 16px;
}
.x-menu .x-menu-boxscroller {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-big .x-menu-body-el > .x-field,
.x-menu-body-el > .x-field {
    padding-bottom: 0;
}
.x-splitButton {
    border-radius: 2px;
    color: #2196f3;
    color: var(--base-color);
    font:
        600 14px/16px Roboto,
        sans-serif;
}
.x-big .x-splitButton {
    border-radius: 2px;
    font-size: 14px;
    line-height: 24px;
}
.x-splitButton .x-splitBody-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    border-radius: 2px;
}
.x-big .x-splitButton .x-splitBody-el {
    border-radius: 2px;
}
.x-splitButton .x-splitInner-el {
    padding: 14px;
    position: relative;
}
.x-splitButton .x-splitArrow-el {
    padding: 14px 3px;
    position: relative;
}
.x-big .x-splitButton.x-arrow-align-right .x-splitInner-el,
.x-splitButton.x-arrow-align-right .x-splitInner-el {
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
}
.x-splitButton.x-arrow-align-right .x-splitArrow-el {
    border-left: 1px solid #2196f3;
    border-left: 1px solid var(--base-color);
}
.x-big .x-splitButton.x-arrow-align-right .x-splitArrow-el,
.x-splitButton.x-arrow-align-right .x-splitArrow-el {
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
}
.x-splitButton.x-arrow-align-right .x-splitArrow-el.x-hovered {
    border-left: 1px solid #2196f3;
    border-left: 1px solid var(--base-color);
}
.x-splitButton.x-arrow-align-right .x-splitArrow-el.x-focused,
.x-splitButton.x-arrow-align-right .x-splitArrow-el.x-pressed,
.x-splitButton.x-arrow-align-right .x-splitArrow-el.x-pressing {
    border-left: 1px solid #2196f3;
    border-left: 1px solid var(--base-color);
    color: #fafafa;
    color: var(--background-color);
}
.x-splitButton.x-arrow-align-bottom .x-splitInner-el {
    padding: 10px 14px;
}
.x-big .x-splitButton.x-arrow-align-bottom .x-splitInner-el,
.x-splitButton.x-arrow-align-bottom .x-splitInner-el {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.x-splitButton.x-arrow-align-bottom .x-splitArrow-el {
    border-top: 1px solid #2196f3;
    border-top: 1px solid var(--base-color);
    padding: 5px 14px;
    width: 100%;
}
.x-big .x-splitButton.x-arrow-align-bottom .x-splitArrow-el,
.x-splitButton.x-arrow-align-bottom .x-splitArrow-el {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}
.x-splitButton.x-arrow-align-bottom .x-splitArrow-el.x-hovered {
    border-top: 1px solid #2196f3;
    border-top: 1px solid var(--base-color);
}
.x-splitButton.x-arrow-align-bottom .x-splitArrow-el.x-focused,
.x-splitButton.x-arrow-align-bottom .x-splitArrow-el.x-pressed,
.x-splitButton.x-arrow-align-bottom .x-splitArrow-el.x-pressing {
    border-top: 1px solid #2196f3;
    border-top: 1px solid var(--base-color);
    color: #fafafa;
    color: var(--background-color);
}
.x-splitButton.x-arrow-align-bottom .x-arrow-el {
    margin: auto;
}
.x-splitButton .x-icon-el {
    color: #2196f3;
    color: var(--base-color);
    height: 16px;
    width: 16px;
}
.x-big .x-splitButton .x-icon-el {
    height: 24px;
    width: 24px;
}
.x-splitButton .x-icon-el:before {
    font-size: 16px;
}
.x-splitButton.x-has-text.x-icon-align-left .x-icon-el {
    margin-right: 5px;
}
.x-big .x-splitButton.x-has-text.x-icon-align-left .x-icon-el {
    margin-right: 8px;
}
.x-splitButton.x-has-text.x-icon-align-right .x-icon-el {
    margin-left: 5px;
}
.x-big .x-splitButton.x-has-text.x-icon-align-right .x-icon-el {
    margin-left: 8px;
}
.x-splitButton.x-has-text.x-icon-align-top .x-icon-el {
    margin-bottom: 2px;
}
.x-big .x-splitButton.x-has-text.x-icon-align-top .x-icon-el {
    margin-bottom: 3px;
}
.x-splitButton.x-has-text.x-icon-align-bottom .x-icon-el {
    margin-top: 2px;
}
.x-big .x-splitButton.x-has-text.x-icon-align-bottom .x-icon-el {
    margin-top: 3px;
}
.x-splitButton .x-arrow-el {
    color: #2196f3;
    color: var(--base-color);
    height: 16px;
    width: 16px;
}
.x-big .x-splitButton .x-arrow-el {
    height: 24px;
    width: 24px;
}
.x-splitButton .x-arrow-el:before {
    content: "arrow_drop_down";
    font-size: 17px;
}
.x-big .x-splitButton .x-arrow-el:before {
    font-size: 24px;
}
.x-splitButton.x-arrow-align-right .x-arrow-el {
    margin-left: 3px;
    margin-right: 3px;
}
.x-big .x-splitButton.x-arrow-align-right .x-arrow-el {
    margin-left: 8px;
}
.x-splitButton .x-text-el {
    min-height: 16px;
    text-transform: uppercase;
}
.x-big .x-splitButton .x-text-el {
    min-height: 24px;
    text-transform: uppercase;
}
.x-splitButton .x-hovered.x-splitArrow-el,
.x-splitButton .x-hovered.x-splitBody-el,
.x-splitButton .x-hovered.x-splitInner-el {
    background-color: hsla(0, 0%, 7%, 0.075);
    background-image: none;
    border-color: rgba(0, 0, 0, 0.075);
}
.x-splitButton:before {
    border-radius: 2px;
}
.x-splitButton .x-pressed,
.x-splitButton .x-pressing {
    color: #fafafa;
    color: var(--background-color);
}
.x-splitButton .x-pressed.x-splitBody-el,
.x-splitButton .x-pressing.x-splitBody-el {
    background-color: #6ab8f7;
    background-color: var(--base-pressed-color);
    background-image: none;
    border-color: #43a6f5;
}
.x-splitButton .x-pressed .x-arrow-el,
.x-splitButton .x-pressed .x-icon-el,
.x-splitButton .x-pressing .x-arrow-el,
.x-splitButton .x-pressing .x-icon-el {
    color: #fafafa;
    color: var(--background-color);
}
.x-splitButton .x-pressed.x-splitArrow-el,
.x-splitButton .x-pressed.x-splitInner-el,
.x-splitButton .x-pressing.x-splitArrow-el,
.x-splitButton .x-pressing.x-splitInner-el {
    background-color: #6ab8f7;
    background-color: var(--base-pressed-color);
    background-image: none;
    border-color: #43a6f5;
}
.x-keyboard-mode .x-splitButton .x-focused {
    color: #fafafa;
    color: var(--background-color);
}
.x-keyboard-mode .x-splitButton .x-focused.x-splitBody-el {
    background-color: #6ab8f7;
    background-color: var(--base-pressed-color);
    background-image: none;
    border-color: #43a6f5;
}
.x-keyboard-mode .x-splitButton .x-focused .x-arrow-el,
.x-keyboard-mode .x-splitButton .x-focused .x-icon-el {
    color: #fafafa;
    color: var(--background-color);
}
.x-keyboard-mode .x-splitButton .x-focused.x-splitArrow-el,
.x-keyboard-mode .x-splitButton .x-focused.x-splitInner-el {
    background-color: #6ab8f7;
    background-color: var(--base-pressed-color);
    background-image: none;
    border-color: #43a6f5;
}
.x-big .x-keyboard-mode .x-splitButton .x-focused:after,
.x-keyboard-mode .x-splitButton .x-focused:after {
    border-radius: 2px;
}
.x-splitButton.x-disabled .x-arrow-el,
.x-splitButton.x-disabled .x-icon-el,
.x-splitButton.x-disabled .x-splitBody-el {
    color: rgba(0, 0, 0, 0.26);
}
.x-splitButton.x-disabled.x-arrow-align-right .x-splitArrow-el {
    border-left: 1px solid rgba(0, 0, 0, 0.26);
}
.x-splitButton.x-disabled.x-arrow-align-bottom .x-splitArrow-el {
    border-top: 1px solid rgba(0, 0, 0, 0.26);
}
.x-splitButton-alt {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-alt .x-splitBody-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-splitButton-alt .x-splitInner-el {
    padding: 14px;
    position: relative;
}
.x-splitButton-alt .x-splitArrow-el {
    padding: 14px 3px;
    position: relative;
}
.x-splitButton-alt.x-arrow-align-right .x-splitArrow-el,
.x-splitButton-alt.x-arrow-align-right .x-splitArrow-el.x-focused,
.x-splitButton-alt.x-arrow-align-right .x-splitArrow-el.x-hovered {
    border-left: 1px solid #fff;
    border-left: 1px solid var(--base-foreground-color);
}
.x-splitButton-alt.x-arrow-align-right .x-splitArrow-el.x-pressed,
.x-splitButton-alt.x-arrow-align-right .x-splitArrow-el.x-pressing {
    border-left: 1px solid #fff;
    border-left: 1px solid var(--base-foreground-color);
    color: #fff;
}
.x-splitButton-alt.x-arrow-align-bottom .x-splitInner-el {
    padding: 10px 14px;
}
.x-splitButton-alt.x-arrow-align-bottom .x-splitArrow-el {
    padding: 5px 14px;
    width: 100%;
}
.x-splitButton-alt.x-arrow-align-bottom .x-splitArrow-el,
.x-splitButton-alt.x-arrow-align-bottom .x-splitArrow-el.x-focused,
.x-splitButton-alt.x-arrow-align-bottom .x-splitArrow-el.x-hovered {
    border-top: 1px solid #fff;
    border-top: 1px solid var(--base-foreground-color);
}
.x-splitButton-alt.x-arrow-align-bottom .x-splitArrow-el.x-pressed,
.x-splitButton-alt.x-arrow-align-bottom .x-splitArrow-el.x-pressing {
    border-top: 1px solid #fff;
    border-top: 1px solid var(--base-foreground-color);
    color: #fff;
}
.x-splitButton-alt.x-arrow-align-bottom .x-arrow-el {
    margin: auto;
}
.x-splitButton-alt .x-arrow-el,
.x-splitButton-alt .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-alt .x-hovered.x-splitArrow-el,
.x-splitButton-alt .x-hovered.x-splitBody-el,
.x-splitButton-alt .x-hovered.x-splitInner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-splitButton-alt .x-pressed,
.x-splitButton-alt .x-pressing {
    color: #fff;
}
.x-splitButton-alt .x-pressed.x-splitBody-el,
.x-splitButton-alt .x-pressing.x-splitBody-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-splitButton-alt .x-pressed .x-arrow-el,
.x-splitButton-alt .x-pressed .x-icon-el,
.x-splitButton-alt .x-pressing .x-arrow-el,
.x-splitButton-alt .x-pressing .x-icon-el {
    color: #fff;
}
.x-splitButton-alt .x-pressed.x-splitArrow-el,
.x-splitButton-alt .x-pressed.x-splitInner-el,
.x-splitButton-alt .x-pressing.x-splitArrow-el,
.x-splitButton-alt .x-pressing.x-splitInner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-splitButton-alt.x-disabled .x-splitBody-el {
    background-color: rgba(0, 0, 0, 0.12);
    background-image: none;
    border-color: rgba(0, 0, 0, 0.12);
}
.x-splitButton-action {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-action .x-splitBody-el {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
    border-color: #0c82df;
}
.x-splitButton-action .x-splitInner-el {
    padding: 14px;
    position: relative;
}
.x-splitButton-action .x-splitArrow-el {
    padding: 14px 3px;
    position: relative;
}
.x-splitButton-action.x-arrow-align-right .x-splitArrow-el,
.x-splitButton-action.x-arrow-align-right .x-splitArrow-el.x-focused,
.x-splitButton-action.x-arrow-align-right .x-splitArrow-el.x-hovered {
    border-left: 1px solid #fff;
    border-left: 1px solid var(--base-foreground-color);
}
.x-splitButton-action.x-arrow-align-right .x-splitArrow-el.x-pressed,
.x-splitButton-action.x-arrow-align-right .x-splitArrow-el.x-pressing {
    border-left: 1px solid #fff;
    border-left: 1px solid var(--base-foreground-color);
    color: #fff;
}
.x-splitButton-action.x-arrow-align-bottom .x-splitInner-el {
    padding: 10px 14px;
}
.x-splitButton-action.x-arrow-align-bottom .x-splitArrow-el {
    padding: 5px 14px;
    width: 100%;
}
.x-splitButton-action.x-arrow-align-bottom .x-splitArrow-el,
.x-splitButton-action.x-arrow-align-bottom .x-splitArrow-el.x-focused,
.x-splitButton-action.x-arrow-align-bottom .x-splitArrow-el.x-hovered {
    border-top: 1px solid #fff;
    border-top: 1px solid var(--base-foreground-color);
}
.x-splitButton-action.x-arrow-align-bottom .x-splitArrow-el.x-pressed,
.x-splitButton-action.x-arrow-align-bottom .x-splitArrow-el.x-pressing {
    border-top: 1px solid #fff;
    border-top: 1px solid var(--base-foreground-color);
    color: #fff;
}
.x-splitButton-action.x-arrow-align-bottom .x-arrow-el {
    margin: auto;
}
.x-splitButton-action .x-arrow-el,
.x-splitButton-action .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-action .x-hovered.x-splitArrow-el,
.x-splitButton-action .x-hovered.x-splitBody-el,
.x-splitButton-action .x-hovered.x-splitInner-el {
    background-color: #0d87e9;
    background-image: none;
    border-color: #0a71c2;
}
.x-splitButton-action .x-pressed,
.x-splitButton-action .x-pressing {
    color: #fff;
}
.x-splitButton-action .x-pressed.x-splitBody-el,
.x-splitButton-action .x-pressing.x-splitBody-el {
    background-color: #0b76cc;
    background-image: none;
    border-color: #0960a5;
}
.x-splitButton-action .x-pressed .x-arrow-el,
.x-splitButton-action .x-pressed .x-icon-el,
.x-splitButton-action .x-pressing .x-arrow-el,
.x-splitButton-action .x-pressing .x-icon-el {
    color: #fff;
}
.x-splitButton-action .x-pressed.x-splitArrow-el,
.x-splitButton-action .x-pressed.x-splitInner-el,
.x-splitButton-action .x-pressing.x-splitArrow-el,
.x-splitButton-action .x-pressing.x-splitInner-el {
    background-color: #0b76cc;
    background-image: none;
    border-color: #0960a5;
}
.x-splitButton-action.x-disabled .x-splitBody-el {
    background-color: rgba(0, 0, 0, 0.12);
    background-image: none;
    border-color: rgba(0, 0, 0, 0.12);
}
.x-splitButton-confirm {
    color: #7cb342;
    color: var(--confirm-color);
}
.x-splitButton-confirm .x-splitInner-el {
    padding: 14px;
    position: relative;
}
.x-splitButton-confirm .x-splitArrow-el {
    padding: 14px 3px;
    position: relative;
}
.x-splitButton-confirm.x-arrow-align-right .x-splitArrow-el,
.x-splitButton-confirm.x-arrow-align-right .x-splitArrow-el.x-hovered {
    border-left: 1px solid #7cb342;
    border-left: 1px solid var(--confirm-color);
}
.x-splitButton-confirm.x-arrow-align-right .x-splitArrow-el.x-focused {
    border-left: 1px solid #7cb342;
    border-left: 1px solid var(--confirm-color);
    color: #fff;
}
.x-splitButton-confirm.x-arrow-align-right .x-splitArrow-el.x-pressed,
.x-splitButton-confirm.x-arrow-align-right .x-splitArrow-el.x-pressing {
    border-left: 1px solid #7cb342;
    border-left: 1px solid var(--confirm-color);
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-confirm.x-arrow-align-bottom .x-splitInner-el {
    padding: 10px 14px;
}
.x-splitButton-confirm.x-arrow-align-bottom .x-splitArrow-el {
    padding: 5px 14px;
    width: 100%;
}
.x-splitButton-confirm.x-arrow-align-bottom .x-splitArrow-el,
.x-splitButton-confirm.x-arrow-align-bottom .x-splitArrow-el.x-hovered {
    border-top: 1px solid #7cb342;
    border-top: 1px solid var(--confirm-color);
}
.x-splitButton-confirm.x-arrow-align-bottom .x-splitArrow-el.x-focused {
    border-top: 1px solid #7cb342;
    border-top: 1px solid var(--confirm-color);
    color: #fff;
}
.x-splitButton-confirm.x-arrow-align-bottom .x-splitArrow-el.x-pressed,
.x-splitButton-confirm.x-arrow-align-bottom .x-splitArrow-el.x-pressing {
    border-top: 1px solid #7cb342;
    border-top: 1px solid var(--confirm-color);
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-confirm.x-arrow-align-bottom .x-arrow-el {
    margin: auto;
}
.x-splitButton-confirm .x-arrow-el,
.x-splitButton-confirm .x-icon-el {
    color: #7cb342;
    color: var(--confirm-color);
}
.x-splitButton-confirm .x-pressed,
.x-splitButton-confirm .x-pressing {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-confirm .x-pressed.x-splitBody-el,
.x-splitButton-confirm .x-pressing.x-splitBody-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
    background-image: none;
    border-color: #679537;
}
.x-splitButton-confirm .x-pressed .x-arrow-el,
.x-splitButton-confirm .x-pressed .x-icon-el,
.x-splitButton-confirm .x-pressing .x-arrow-el,
.x-splitButton-confirm .x-pressing .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-confirm .x-pressed.x-splitArrow-el,
.x-splitButton-confirm .x-pressed.x-splitInner-el,
.x-splitButton-confirm .x-pressing.x-splitArrow-el,
.x-splitButton-confirm .x-pressing.x-splitInner-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
    background-image: none;
    border-color: #679537;
}
.x-keyboard-mode .x-splitButton-confirm .x-focused {
    color: #fff;
}
.x-keyboard-mode .x-splitButton-confirm .x-focused.x-splitBody-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
    background-image: none;
    border-color: #679537;
}
.x-keyboard-mode .x-splitButton-confirm .x-focused .x-arrow-el,
.x-keyboard-mode .x-splitButton-confirm .x-focused .x-icon-el {
    color: #fff;
}
.x-keyboard-mode .x-splitButton-confirm .x-focused.x-splitArrow-el,
.x-keyboard-mode .x-splitButton-confirm .x-focused.x-splitInner-el {
    background-color: #7cb342;
    background-color: var(--confirm-color);
    background-image: none;
    border-color: #679537;
}
.x-splitButton-decline {
    color: #c62828;
    color: var(--alert-color);
}
.x-splitButton-decline .x-splitInner-el {
    padding: 14px;
    position: relative;
}
.x-splitButton-decline .x-splitArrow-el {
    padding: 14px 3px;
    position: relative;
}
.x-splitButton-decline.x-arrow-align-right .x-splitArrow-el,
.x-splitButton-decline.x-arrow-align-right .x-splitArrow-el.x-hovered {
    border-left: 1px solid #c62828;
    border-left: 1px solid var(--alert-color);
}
.x-splitButton-decline.x-arrow-align-right .x-splitArrow-el.x-focused {
    border-left: 1px solid #c62828;
    border-left: 1px solid var(--alert-color);
    color: #fff;
}
.x-splitButton-decline.x-arrow-align-right .x-splitArrow-el.x-pressed,
.x-splitButton-decline.x-arrow-align-right .x-splitArrow-el.x-pressing {
    border-left: 1px solid #c62828;
    border-left: 1px solid var(--alert-color);
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-decline.x-arrow-align-bottom .x-splitInner-el {
    padding: 10px 14px;
}
.x-splitButton-decline.x-arrow-align-bottom .x-splitArrow-el {
    padding: 5px 14px;
    width: 100%;
}
.x-splitButton-decline.x-arrow-align-bottom .x-splitArrow-el,
.x-splitButton-decline.x-arrow-align-bottom .x-splitArrow-el.x-hovered {
    border-top: 1px solid #c62828;
    border-top: 1px solid var(--alert-color);
}
.x-splitButton-decline.x-arrow-align-bottom .x-splitArrow-el.x-focused {
    border-top: 1px solid #c62828;
    border-top: 1px solid var(--alert-color);
    color: #fff;
}
.x-splitButton-decline.x-arrow-align-bottom .x-splitArrow-el.x-pressed,
.x-splitButton-decline.x-arrow-align-bottom .x-splitArrow-el.x-pressing {
    border-top: 1px solid #c62828;
    border-top: 1px solid var(--alert-color);
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-decline.x-arrow-align-bottom .x-arrow-el {
    margin: auto;
}
.x-splitButton-decline .x-arrow-el,
.x-splitButton-decline .x-icon-el {
    color: #c62828;
    color: var(--alert-color);
}
.x-splitButton-decline .x-pressed,
.x-splitButton-decline .x-pressing {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-decline .x-pressed.x-splitBody-el,
.x-splitButton-decline .x-pressing.x-splitBody-el {
    background-color: #c62828;
    background-color: var(--alert-color);
    background-image: none;
    border-color: #a42121;
}
.x-splitButton-decline .x-pressed .x-arrow-el,
.x-splitButton-decline .x-pressed .x-icon-el,
.x-splitButton-decline .x-pressing .x-arrow-el,
.x-splitButton-decline .x-pressing .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-decline .x-pressed.x-splitArrow-el,
.x-splitButton-decline .x-pressed.x-splitInner-el,
.x-splitButton-decline .x-pressing.x-splitArrow-el,
.x-splitButton-decline .x-pressing.x-splitInner-el {
    background-color: #c62828;
    background-color: var(--alert-color);
    background-image: none;
    border-color: #a42121;
}
.x-keyboard-mode .x-splitButton-decline .x-focused {
    color: #fff;
}
.x-keyboard-mode .x-splitButton-decline .x-focused.x-splitBody-el {
    background-color: #c62828;
    background-color: var(--alert-color);
    background-image: none;
    border-color: #a42121;
}
.x-keyboard-mode .x-splitButton-decline .x-focused .x-arrow-el,
.x-keyboard-mode .x-splitButton-decline .x-focused .x-icon-el {
    color: #fff;
}
.x-keyboard-mode .x-splitButton-decline .x-focused.x-splitArrow-el,
.x-keyboard-mode .x-splitButton-decline .x-focused.x-splitInner-el {
    background-color: #c62828;
    background-color: var(--alert-color);
    background-image: none;
    border-color: #a42121;
}
.x-splitButton-round {
    border-radius: 10000px;
}
.x-big .x-splitButton-round {
    border-radius: 20000px;
}
.x-splitButton-round .x-splitBody-el {
    border-radius: 10000px;
}
.x-big .x-splitButton-round .x-splitBody-el {
    border-radius: 20000px;
}
.x-splitButton-round .x-splitInner-el {
    padding: 14px;
    position: relative;
}
.x-splitButton-round .x-splitArrow-el {
    padding: 14px 3px;
    position: relative;
}
.x-splitButton-round.x-arrow-align-right .x-splitInner-el {
    border-bottom-left-radius: 10000px;
    border-top-left-radius: 10000px;
}
.x-big .x-splitButton-round.x-arrow-align-right .x-splitInner-el {
    border-bottom-left-radius: 20000px;
    border-top-left-radius: 20000px;
}
.x-splitButton-round.x-arrow-align-right .x-splitArrow-el {
    border-bottom-right-radius: 10000px;
    border-top-right-radius: 10000px;
}
.x-big .x-splitButton-round.x-arrow-align-right .x-splitArrow-el {
    border-bottom-right-radius: 20000px;
    border-top-right-radius: 20000px;
}
.x-splitButton-round.x-arrow-align-bottom .x-splitInner-el {
    border-top-left-radius: 10000px;
    border-top-right-radius: 10000px;
    padding: 10px 14px;
}
.x-big .x-splitButton-round.x-arrow-align-bottom .x-splitInner-el {
    border-top-left-radius: 20000px;
    border-top-right-radius: 20000px;
}
.x-splitButton-round.x-arrow-align-bottom .x-splitArrow-el {
    border-bottom-left-radius: 10000px;
    border-bottom-right-radius: 10000px;
    padding: 5px 14px;
    width: 100%;
}
.x-big .x-splitButton-round.x-arrow-align-bottom .x-splitArrow-el {
    border-bottom-left-radius: 20000px;
    border-bottom-right-radius: 20000px;
}
.x-splitButton-round.x-arrow-align-bottom .x-arrow-el {
    margin: auto;
}
.x-keyboard-mode .x-splitButton-round .x-focused:after,
.x-splitButton-round:before {
    border-radius: 10000px;
}
.x-big .x-keyboard-mode .x-splitButton-round .x-focused:after {
    border-radius: 20000px;
}
.x-big .x-splitButton-square,
.x-big .x-splitButton-square .x-splitBody-el,
.x-splitButton-square,
.x-splitButton-square .x-splitBody-el {
    border-radius: 0;
}
.x-splitButton-square .x-splitInner-el {
    padding: 14px;
    position: relative;
}
.x-splitButton-square .x-splitArrow-el {
    padding: 14px 3px;
    position: relative;
}
.x-big .x-splitButton-square.x-arrow-align-right .x-splitInner-el,
.x-splitButton-square.x-arrow-align-right .x-splitInner-el {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.x-big .x-splitButton-square.x-arrow-align-right .x-splitArrow-el,
.x-splitButton-square.x-arrow-align-right .x-splitArrow-el {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.x-splitButton-square.x-arrow-align-bottom .x-splitInner-el {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 10px 14px;
}
.x-big .x-splitButton-square.x-arrow-align-bottom .x-splitInner-el {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.x-splitButton-square.x-arrow-align-bottom .x-splitArrow-el {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 5px 14px;
    width: 100%;
}
.x-big .x-splitButton-square.x-arrow-align-bottom .x-splitArrow-el {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.x-splitButton-square.x-arrow-align-bottom .x-arrow-el {
    margin: auto;
}
.x-big .x-keyboard-mode .x-splitButton-square .x-focused:after,
.x-keyboard-mode .x-splitButton-square .x-focused:after,
.x-splitButton-square:before {
    border-radius: 0;
}
.x-splitButton-flat {
    color: #fff;
}
.x-splitButton-flat .x-splitBody-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    border-width: 0;
}
.x-splitButton-flat .x-splitInner-el {
    padding: 14px;
    position: relative;
}
.x-splitButton-flat .x-splitArrow-el {
    padding: 14px 3px;
    position: relative;
}
.x-splitButton-flat.x-arrow-align-right .x-splitArrow-el,
.x-splitButton-flat.x-arrow-align-right .x-splitArrow-el.x-focused,
.x-splitButton-flat.x-arrow-align-right .x-splitArrow-el.x-hovered {
    border-left: 1px solid #fff;
}
.x-splitButton-flat.x-arrow-align-right .x-splitArrow-el.x-pressed,
.x-splitButton-flat.x-arrow-align-right .x-splitArrow-el.x-pressing {
    border-left: 1px solid #fff;
    color: #fff;
}
.x-splitButton-flat.x-arrow-align-bottom .x-splitInner-el {
    padding: 10px 14px;
}
.x-splitButton-flat.x-arrow-align-bottom .x-splitArrow-el {
    border-top: 1px solid #fff;
    padding: 5px 14px;
    width: 100%;
}
.x-splitButton-flat.x-arrow-align-bottom .x-splitArrow-el.x-focused,
.x-splitButton-flat.x-arrow-align-bottom .x-splitArrow-el.x-hovered {
    border-top: 1px solid #fff;
}
.x-splitButton-flat.x-arrow-align-bottom .x-splitArrow-el.x-pressed,
.x-splitButton-flat.x-arrow-align-bottom .x-splitArrow-el.x-pressing {
    border-top: 1px solid #fff;
    color: #fff;
}
.x-splitButton-flat.x-arrow-align-bottom .x-arrow-el {
    margin: auto;
}
.x-splitButton-flat .x-arrow-el,
.x-splitButton-flat .x-icon-el {
    color: #fff;
}
.x-splitButton-flat .x-hovered.x-splitArrow-el,
.x-splitButton-flat .x-hovered.x-splitBody-el,
.x-splitButton-flat .x-hovered.x-splitInner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-splitButton-flat .x-pressed,
.x-splitButton-flat .x-pressing {
    color: #fff;
}
.x-splitButton-flat .x-pressed.x-splitBody-el,
.x-splitButton-flat .x-pressing.x-splitBody-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-splitButton-flat .x-pressed .x-arrow-el,
.x-splitButton-flat .x-pressed .x-icon-el,
.x-splitButton-flat .x-pressing .x-arrow-el,
.x-splitButton-flat .x-pressing .x-icon-el {
    color: #fff;
}
.x-splitButton-flat .x-pressed.x-splitArrow-el,
.x-splitButton-flat .x-pressed.x-splitInner-el,
.x-splitButton-flat .x-pressing.x-splitArrow-el,
.x-splitButton-flat .x-pressing.x-splitInner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-splitButton-plain {
    color: #fff;
}
.x-splitButton-plain .x-splitBody-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    border-width: 0;
}
.x-splitButton-plain .x-splitInner-el {
    padding: 14px;
    position: relative;
}
.x-splitButton-plain .x-splitArrow-el {
    padding: 14px 3px;
    position: relative;
}
.x-splitButton-plain.x-arrow-align-right .x-splitArrow-el,
.x-splitButton-plain.x-arrow-align-right .x-splitArrow-el.x-focused,
.x-splitButton-plain.x-arrow-align-right .x-splitArrow-el.x-hovered {
    border-left: 1px solid #fff;
}
.x-splitButton-plain.x-arrow-align-right .x-splitArrow-el.x-pressed,
.x-splitButton-plain.x-arrow-align-right .x-splitArrow-el.x-pressing {
    border-left: 1px solid #fff;
    color: #fff;
}
.x-splitButton-plain.x-arrow-align-bottom .x-splitInner-el {
    padding: 10px 14px;
}
.x-splitButton-plain.x-arrow-align-bottom .x-splitArrow-el {
    border-top: 1px solid #fff;
    padding: 5px 14px;
    width: 100%;
}
.x-splitButton-plain.x-arrow-align-bottom .x-splitArrow-el.x-focused,
.x-splitButton-plain.x-arrow-align-bottom .x-splitArrow-el.x-hovered {
    border-top: 1px solid #fff;
}
.x-splitButton-plain.x-arrow-align-bottom .x-splitArrow-el.x-pressed,
.x-splitButton-plain.x-arrow-align-bottom .x-splitArrow-el.x-pressing {
    border-top: 1px solid #fff;
    color: #fff;
}
.x-splitButton-plain.x-arrow-align-bottom .x-arrow-el {
    margin: auto;
}
.x-splitButton-plain .x-arrow-el,
.x-splitButton-plain .x-icon-el {
    color: #fff;
}
.x-splitButton-plain .x-hovered.x-splitArrow-el,
.x-splitButton-plain .x-hovered.x-splitBody-el,
.x-splitButton-plain .x-hovered.x-splitInner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-splitButton-plain .x-pressed,
.x-splitButton-plain .x-pressing {
    color: #fff;
}
.x-splitButton-plain .x-pressed.x-splitBody-el,
.x-splitButton-plain .x-pressing.x-splitBody-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-splitButton-plain .x-pressed .x-arrow-el,
.x-splitButton-plain .x-pressed .x-icon-el,
.x-splitButton-plain .x-pressing .x-arrow-el,
.x-splitButton-plain .x-pressing .x-icon-el {
    color: #fff;
}
.x-splitButton-plain .x-pressed.x-splitArrow-el,
.x-splitButton-plain .x-pressed.x-splitInner-el,
.x-splitButton-plain .x-pressing.x-splitArrow-el,
.x-splitButton-plain .x-pressing.x-splitInner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-splitButton-raised {
    box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.2);
}
.x-splitButton-raised .x-splitInner-el {
    padding: 14px;
    position: relative;
}
.x-splitButton-raised .x-splitArrow-el {
    padding: 14px 3px;
    position: relative;
}
.x-splitButton-raised.x-arrow-align-bottom .x-splitInner-el {
    padding: 10px 14px;
}
.x-splitButton-raised.x-arrow-align-bottom .x-splitArrow-el {
    padding: 5px 14px;
    width: 100%;
}
.x-splitButton-raised.x-arrow-align-bottom .x-arrow-el {
    margin: auto;
}
.x-splitButton-raised:before {
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
    content: "";
    transition: opacity 0.15s;
}
.x-splitButton-raised.x-disabled {
    box-shadow: none;
}
.x-splitButton-raised.x-disabled .x-splitBody-el {
    background-color: rgba(0, 0, 0, 0.12);
    background-image: none;
    border-color: rgba(0, 0, 0, 0.12);
}
.x-splitButton-segmented {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-segmented .x-splitBody-el {
    background-color: #6ab8f7;
    background-color: var(--base-pressed-color);
    background-image: none;
    border-color: #43a6f5;
}
.x-splitButton-segmented .x-splitInner-el {
    padding: 14px;
    position: relative;
}
.x-splitButton-segmented .x-splitArrow-el {
    padding: 14px 3px;
    position: relative;
}
.x-splitButton-segmented.x-arrow-align-right .x-splitArrow-el,
.x-splitButton-segmented.x-arrow-align-right .x-splitArrow-el.x-focused,
.x-splitButton-segmented.x-arrow-align-right .x-splitArrow-el.x-hovered {
    border-left: 1px solid #fff;
    border-left: 1px solid var(--base-foreground-color);
}
.x-splitButton-segmented.x-arrow-align-right .x-splitArrow-el.x-pressed,
.x-splitButton-segmented.x-arrow-align-right .x-splitArrow-el.x-pressing {
    border-left: 1px solid #fff;
    border-left: 1px solid var(--base-foreground-color);
    color: #fafafa;
    color: var(--background-color);
}
.x-splitButton-segmented.x-arrow-align-bottom .x-splitInner-el {
    padding: 10px 14px;
}
.x-splitButton-segmented.x-arrow-align-bottom .x-splitArrow-el {
    padding: 5px 14px;
    width: 100%;
}
.x-splitButton-segmented.x-arrow-align-bottom .x-splitArrow-el,
.x-splitButton-segmented.x-arrow-align-bottom .x-splitArrow-el.x-focused,
.x-splitButton-segmented.x-arrow-align-bottom .x-splitArrow-el.x-hovered {
    border-top: 1px solid #fff;
    border-top: 1px solid var(--base-foreground-color);
}
.x-splitButton-segmented.x-arrow-align-bottom .x-splitArrow-el.x-pressed,
.x-splitButton-segmented.x-arrow-align-bottom .x-splitArrow-el.x-pressing {
    border-top: 1px solid #fff;
    border-top: 1px solid var(--base-foreground-color);
    color: #fafafa;
    color: var(--background-color);
}
.x-splitButton-segmented.x-arrow-align-bottom .x-arrow-el {
    margin: auto;
}
.x-splitButton-segmented .x-arrow-el,
.x-splitButton-segmented .x-icon-el {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-splitButton-segmented .x-hovered.x-splitArrow-el,
.x-splitButton-segmented .x-hovered.x-splitBody-el,
.x-splitButton-segmented .x-hovered.x-splitInner-el {
    background-color: #4dabf5;
    background-image: none;
    border-color: #2698f3;
}
.x-splitButton-segmented .x-pressed,
.x-splitButton-segmented .x-pressing {
    color: #fafafa;
    color: var(--background-color);
}
.x-splitButton-segmented .x-pressed.x-splitBody-el,
.x-splitButton-segmented .x-pressing.x-splitBody-el {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
    border-color: #0c82df;
}
.x-splitButton-segmented .x-pressed .x-arrow-el,
.x-splitButton-segmented .x-pressed .x-icon-el,
.x-splitButton-segmented .x-pressing .x-arrow-el,
.x-splitButton-segmented .x-pressing .x-icon-el {
    color: #fafafa;
    color: var(--background-color);
}
.x-splitButton-segmented .x-pressed.x-splitArrow-el,
.x-splitButton-segmented .x-pressed.x-splitInner-el,
.x-splitButton-segmented .x-pressing.x-splitArrow-el,
.x-splitButton-segmented .x-pressing.x-splitInner-el {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
    border-color: #0c82df;
}
.x-big .x-breadcrumbbar-items.x-button .x-icon-el:before,
.x-big .x-breadcrumbbar-items.x-splitButton .x-icon-el:before {
    font-size: 16px;
}
.x-breadcrumbbar .x-breadcrumbbar-body-el {
    background-color: #fafafa;
    background-color: var(--background-color);
    border: 0 solid #c2c2c2;
    min-height: 36px;
    padding: 6px 8px;
}
.x-breadcrumbbar .x-breadcrumbbar-items {
    margin: 0 4px;
}
.x-breadcrumbbar .x-breadcrumbbar-items.x-button .x-icon-el,
.x-breadcrumbbar .x-breadcrumbbar-items.x-splitButton .x-icon-el {
    width: 18px;
}
.x-breadcrumbbar .x-breadcrumbbar-items.x-splitButton .x-splitInner-el {
    padding: 8px 5px;
}
.x-breadcrumbbar .x-breadcrumbbar-items.x-splitButton .x-splitArrow-el {
    border-color: transparent;
    margin-left: 6px;
    padding: 8px 5px;
}
.x-breadcrumbbar .x-breadcrumbbar-items.x-button .x-inner-el {
    padding: 8px 5px;
}
.x-breadcrumbbar .x-breadcrumbbar-items.x-button .x-inner-el .x-arrow-el {
    margin-left: 15px;
}
.x-breadcrumbbar .x-breadcrumbbar-items.x-no-arrow .x-splitArrow-el {
    display: none;
}
.x-breadcrumbbar .x-breadcrumbbar-items .x-arrow-el:before {
    content: "keyboard_arrow_right";
    font-size: 22px;
}
.x-breadcrumbbar .x-breadcrumbbar-items.x-pressed .x-arrow-el:before {
    content: "keyboard_arrow_down";
    font-size: 22px;
}
.x-breadcrumbbar .x-breadcrumbbar-items.x-pressed .x-breadcrumbbar-icon-folder:before {
    content: "folder_open";
}
.x-breadcrumbbar .x-breadcrumbbar-icon-leaf:before {
    content: "description";
}
.x-breadcrumbbar .x-breadcrumbbar-icon-folder:before {
    content: "folder";
}
.x-chip {
    background-color: #e6e6e6;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    -ms-border-radius: 13px;
    -o-border-radius: 13px;
    border-radius: 13px;
    cursor: default;
    display: inline-block;
    height: 26px;
    margin: 0 3px 3px 0;
}
.x-big .x-chip {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
    height: 32px;
    margin: 0 5px 5px 0;
}
.x-chip .x-body-el {
    align-items: center;
    display: flex;
}
.x-chip .x-icon-el {
    background-size: contain;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    -ms-border-radius: 13px;
    -o-border-radius: 13px;
    border-radius: 13px;
    color: #111;
    color: var(--color);
    display: none;
    height: 26px;
    width: 26px;
    z-index: 10;
}
.x-big .x-chip .x-icon-el {
    height: 32px;
    width: 32px;
}
.x-chip .x-icon-el:before {
    font-size: 26px;
}
.x-big .x-chip .x-icon-el:before {
    font-size: 32px;
}
.x-big .x-chip .x-icon-el {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
}
.x-chip.x-has-icon .x-icon-el {
    display: inline-flex;
}
.x-chip .x-text-el {
    flex: 1 1 auto;
    line-height: 26px;
    margin: 0 6px;
    white-space: nowrap;
}
.x-big .x-chip .x-text-el {
    line-height: 32px;
    margin: 0 12px;
}
.x-chip .x-close-el {
    background-color: #ccc;
    border-radius: 9px;
    color: #444;
    cursor: pointer;
    display: none;
    height: 18px;
    margin: 0 4px;
    width: 18px;
}
.x-chip .x-close-el:before {
    content: "clear";
    font-size: 14px;
}
.x-big .x-chip .x-close-el:before {
    font-size: 16px;
}
.x-big .x-chip .x-close-el {
    border-radius: 12px;
    height: 24px;
    margin: 0 4px;
    width: 24px;
}
.x-chip.x-selected .x-close-el {
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
}
.x-chip:hover .x-close-el {
    background-color: #fff;
    color: #444;
}
.x-chip.x-selected:hover .x-close-el {
    background-color: hsla(0, 0%, 100%, 0.2);
    color: #444;
}
.x-chip.x-closable .x-text-el {
    margin-right: 0;
}
.x-chip.x-closable .x-close-el {
    display: flex;
}
.x-chip.x-hovered {
    background-color: #cfcfcf;
}
.x-chip.x-hovered .x-icon-el {
    opacity: 0.8;
}
.x-chip.x-selected {
    background-color: #3892d4;
    color: #fff;
}
.x-keyboard-mode .x-chip.x-focused:after {
    border: 1px solid #3892d4;
    border-radius: 13px;
    bottom: 1px;
    content: "";
    left: 1px;
    pointer-events: none;
    position: absolute;
    right: 1px;
    top: 1px;
}
.x-big .x-keyboard-mode .x-chip.x-focused:after {
    border: 1px solid #3892d4;
    border-radius: 16px;
    bottom: 1px;
    content: "";
    left: 1px;
    pointer-events: none;
    position: absolute;
    right: 1px;
    top: 1px;
}
.x-keyboard-mode .x-chip.x-selected.x-focused:after {
    border: 1px solid #e6e6e6;
    border-radius: 13px;
    bottom: 1px;
    content: "";
    left: 1px;
    pointer-events: none;
    position: absolute;
    right: 1px;
    top: 1px;
}
.x-big .x-keyboard-mode .x-chip.x-selected.x-focused:after {
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    bottom: 1px;
    content: "";
    left: 1px;
    pointer-events: none;
    position: absolute;
    right: 1px;
    top: 1px;
}
.x-selectfield .x-chipview {
    margin-top: 3px;
    min-height: 29px;
}
.x-big .x-selectfield .x-chipview {
    margin-top: 5px;
    min-height: 37px;
}
.x-selectfield .x-chipview .x-chipview .x-body-el {
    padding: 0;
}
.x-dialog > .x-anchor-el .x-pointer-el {
    fill: #fafafa;
    fill: var(--background-color);
    stroke-width: 0;
}
.x-dialog > .x-anchor-el.x-top {
    padding-bottom: 0;
}
.x-dialog > .x-anchor-el.x-bottom {
    padding-top: 0;
}
.x-dialog > .x-anchor-el.x-left {
    padding-right: 0;
}
.x-dialog > .x-anchor-el.x-right {
    padding-left: 0;
}
.x-dialog-body-el {
    background-color: #fafafa;
    background-color: var(--background-color);
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    padding: 16px;
    padding: var(--content-padding);
}
.x-dialog-boxscroller > .x-boxscroller-body > .x-body-el {
    border: 0;
}
.x-dialog-outer-border-l {
    border-left-width: 0 !important;
}
.x-dialog-outer-border-b,
.x-dialog-outer-border-bl {
    border-bottom-width: 0 !important;
}
.x-dialog-outer-border-bl {
    border-left-width: 0 !important;
}
.x-dialog-outer-border-r,
.x-dialog-outer-border-rl {
    border-right-width: 0 !important;
}
.x-dialog-outer-border-rl {
    border-left-width: 0 !important;
}
.x-dialog-outer-border-rb,
.x-dialog-outer-border-rbl {
    border-bottom-width: 0 !important;
    border-right-width: 0 !important;
}
.x-dialog-outer-border-rbl {
    border-left-width: 0 !important;
}
.x-dialog-outer-border-t,
.x-dialog-outer-border-tl {
    border-top-width: 0 !important;
}
.x-dialog-outer-border-tl {
    border-left-width: 0 !important;
}
.x-dialog-outer-border-tb,
.x-dialog-outer-border-tbl {
    border-bottom-width: 0 !important;
    border-top-width: 0 !important;
}
.x-dialog-outer-border-tbl {
    border-left-width: 0 !important;
}
.x-dialog-outer-border-tr,
.x-dialog-outer-border-trl {
    border-right-width: 0 !important;
    border-top-width: 0 !important;
}
.x-dialog-outer-border-trl {
    border-left-width: 0 !important;
}
.x-dialog-outer-border-trb {
    border-bottom-width: 0 !important;
    border-right-width: 0 !important;
    border-top-width: 0 !important;
}
.x-dialog-outer-border-trbl {
    border-width: 0 !important;
}
.x-dialogheader {
    background-color: #fafafa;
    background-color: var(--background-color);
    background-image: none;
}
.x-dialogtitle,
.x-dialogtitle .x-icon-el,
.x-dialogtool .x-icon-el {
    color: #111;
    color: var(--color);
}
.x-keyboard-mode .x-dialogtool.x-focused {
    outline-color: #2196f3;
    outline-color: var(--base-color);
}
.x-dialog {
    min-width: 250px;
}
.x-big .x-dialog {
    min-width: 300px;
}
.x-field > .x-label-el {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    font:
        400 12px/16px Roboto,
        sans-serif;
    padding: 7px 10px 7px 0;
    width: 100px;
}
.x-big .x-field > .x-label-el {
    font-size: 12px;
    line-height: 16px;
    padding: 12px 10px 12px 0;
    width: 120px;
}
.x-field.x-label-align-right > .x-label-el {
    padding: 7px 0 7px 10px;
}
.x-big .x-field.x-label-align-right > .x-label-el {
    padding: 12px 0 12px 10px;
}
.x-field.x-focused > .x-label-el {
    color: #2196f3;
    color: var(--base-color);
}
.x-field.x-disabled > .x-label-el {
    color: hsla(0, 0%, 7%, 0.38);
    color: var(--disabled-color);
}
.x-field.x-required > .x-label-el:after {
    font-family: Material Icons;
    font-size: 12px;
    font-weight: 400;
}
.x-field.x-error-target-side > * > * > .x-error-icon-el {
    color: #c62828;
    color: var(--alert-color);
    height: 16px;
    margin: 0 5px;
    width: 16px;
}
.x-big .x-field.x-error-target-side > * > * > .x-error-icon-el {
    height: 30px;
    margin: 0 8px;
    width: 30px;
}
.x-field.x-error-target-side > * > * > .x-error-icon-el:before {
    content: "error";
    font-size: 16px;
}
.x-big .x-field.x-error-target-side > * > * > .x-error-icon-el:before {
    font-size: 30px;
}
.x-field.x-error-target-under > * > * > .x-error-icon-el {
    color: #c62828;
    color: var(--alert-color);
    height: 16px;
    margin: 0 5px 0 0;
    width: 16px;
}
.x-big .x-field.x-error-target-under > * > * > .x-error-icon-el {
    height: 30px;
    margin: 0 8px 0 0;
    width: 30px;
}
.x-field.x-error-target-under > * > * > .x-error-icon-el:before {
    content: "error";
    font-size: 16px;
}
.x-big .x-field.x-error-target-under > * > * > .x-error-icon-el:before {
    font-size: 30px;
}
.x-field.x-error-target-under > * > .x-error-el {
    margin: 2px 0;
}
.x-big .x-field.x-error-target-under > * > .x-error-el {
    margin: 3px;
}
.x-field > * > * > .x-error-message-el {
    color: #c62828;
    color: var(--alert-color);
    font:
        normal 1rem/16px Roboto,
        sans-serif;
}
.x-big .x-field > * > * > .x-error-message-el {
    line-height: 24px;
}
.x-field:not(.x-field-solo).x-layout-auto-item,
.x-field:not(.x-field-solo).x-layout-vbox-item {
    margin-top: 4px;
    padding-bottom: 4px;
}
.x-big .x-field:not(.x-field-solo).x-layout-auto-item,
.x-big .x-field:not(.x-field-solo).x-layout-vbox-item {
    margin-top: 10px;
    padding-bottom: 10px;
}
.x-field:not(.x-field-solo).x-layout-auto-item:first-child,
.x-field:not(.x-field-solo).x-layout-vbox-item:first-child {
    margin-top: 0;
}
.x-field:not(.x-field-solo).x-layout-auto-item:last-child,
.x-field:not(.x-field-solo).x-layout-vbox-item:last-child {
    padding-bottom: 0;
}
.x-ripple-wrapper + .x-field.x-layout-auto-item,
.x-ripple-wrapper + .x-field.x-layout-vbox-item {
    margin-top: 0 !important;
}
.x-trigger {
    width: 24px;
}
.x-big .x-trigger {
    width: 36px;
}
.x-trigger .x-icon-el {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    height: 20px;
    width: 20px;
}
.x-big .x-trigger .x-icon-el {
    height: 30px;
    width: 30px;
}
.x-trigger .x-icon-el:before {
    content: "arrow_drop_down";
    font-size: 20px;
}
.x-big .x-trigger .x-icon-el:before {
    font-size: 30px;
}
.x-trigger.x-interactive:hover .x-icon-el {
    color: hsla(0, 0%, 7%, 0.38);
    color: var(--disabled-color);
}
.x-trigger.x-interactive:active .x-icon-el {
    color: #6ab8f7;
    color: var(--base-pressed-color);
}
.x-trigger.x-grouped {
    display: flex;
    flex-direction: column;
    flex-direction: column-reverse;
}
.x-trigger.x-grouped .x-trigger {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.x-big .x-trigger.x-grouped {
    flex-direction: row;
}
.x-trigger-alt {
    width: 40px;
}
.x-big .x-trigger-alt {
    width: 45px;
}
.x-trigger-alt .x-icon-el,
.x-trigger-alt.x-interactive:active .x-icon-el,
.x-trigger-alt.x-interactive:hover .x-icon-el {
    color: hsla(0, 0%, 100%, 0.6);
}
.x-trigger-faded {
    width: 40px;
}
.x-big .x-trigger-faded {
    width: 45px;
}
.x-trigger-faded .x-icon-el,
.x-trigger-faded.x-interactive:active .x-icon-el,
.x-trigger-faded.x-interactive:hover .x-icon-el {
    color: rgba(0, 0, 0, 0.4);
}
.x-big .x-trigger-solo,
.x-trigger-solo {
    width: 40px;
}
.x-trigger-solo .x-icon-el,
.x-trigger-solo.x-interactive:active .x-icon-el,
.x-trigger-solo.x-interactive:hover .x-icon-el {
    color: rgba(0, 0, 0, 0.4);
}
.x-cleartrigger .x-icon-el:before {
    content: "clear";
}
.x-textfield .x-body-wrap-el {
    width: 170px;
}
.x-big .x-textfield .x-body-wrap-el {
    width: 200px;
}
.x-textfield .x-input-wrap-el {
    background-color: transparent;
    color: #111;
    color: var(--color);
}
.x-textfield .x-input-el {
    font:
        400 13px/16px Roboto,
        sans-serif;
    min-height: 16px;
    padding: 4px 0;
}
.x-big .x-textfield .x-input-el {
    font-size: 16px;
    line-height: 20px;
    padding: 8px 0;
}
.x-textfield .x-input-el::-webkit-input-placeholder {
    color: hsla(0, 0%, 7%, 0.38);
    color: var(--disabled-color);
}
.x-textfield .x-input-el::-moz-placeholder {
    color: hsla(0, 0%, 7%, 0.38);
    color: var(--disabled-color);
}
.x-textfield .x-input-el:-ms-input-placeholder {
    color: hsla(0, 0%, 7%, 0.38);
    color: var(--disabled-color);
}
.x-textfield .x-underline-el {
    background-color: #e2e2e2;
    background-color: var(--divider-color);
    height: 1px;
}
.x-textfield.x-animate-underline .x-underline-el:before {
    transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.x-textfield.x-focused .x-underline-el:before {
    background-color: #2196f3;
    background-color: var(--base-color);
    height: 2px;
}
.x-textfield.x-focused .x-input-wrap-el {
    border-color: #3892d4;
}
.x-textfield.x-invalid .x-underline-el:after {
    background-color: #c62828;
    background-color: var(--alert-color);
    height: 2px;
}
.x-textfield.x-invalid .x-input-wrap-el {
    border-color: #c62828;
    border-color: var(--alert-color);
}
.x-textfield.x-disabled .x-input-wrap-el {
    color: hsla(0, 0%, 7%, 0.38);
    color: var(--disabled-color);
}
.x-textfield-celleditor .x-input-el {
    font-size: 13px;
    line-height: 16px;
    min-height: 16px;
    padding: 12px;
}
.x-big .x-textfield-celleditor .x-input-el {
    font-size: 14px;
    line-height: 20px;
    padding: 14px 12px;
}
.x-textfield-alt {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}
.x-textfield-alt .x-input-wrap-el {
    background-color: hsla(0, 0%, 100%, 0.2);
    border-width: 0;
    color: hsla(0, 0%, 100%, 0.6);
}
.x-big .x-textfield-alt .x-input-el,
.x-textfield-alt .x-input-el {
    padding: 7px 7px 7px 0;
}
.x-textfield-alt .x-input-el::-webkit-input-placeholder {
    color: hsla(0, 0%, 100%, 0.6);
}
.x-textfield-alt .x-input-el::-moz-placeholder {
    color: hsla(0, 0%, 100%, 0.6);
}
.x-textfield-alt .x-input-el:-ms-input-placeholder {
    color: hsla(0, 0%, 100%, 0.6);
}
.x-textfield-alt .x-underline-el,
.x-textfield-alt.x-focused .x-underline-el:before {
    height: 0;
}
.x-textfield-alt.x-focused .x-input-wrap-el {
    background-color: hsla(0, 0%, 100%, 0.15);
    color: hsla(0, 0%, 100%, 0.6);
}
.x-textfield-alt.x-focused .x-input-el::-webkit-input-placeholder {
    color: #fff;
}
.x-textfield-alt.x-focused .x-input-el::-moz-placeholder {
    color: #fff;
}
.x-textfield-alt.x-focused .x-input-el:-ms-input-placeholder {
    color: #fff;
}
.x-textfield-alt.x-invalid .x-underline-el:after {
    height: 0;
}
.x-textfield-faded {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}
.x-textfield-faded .x-input-wrap-el {
    background-color: rgba(0, 0, 0, 0.1);
    border-width: 0;
    color: rgba(0, 0, 0, 0.4);
}
.x-big .x-textfield-faded .x-input-el,
.x-textfield-faded .x-input-el {
    padding: 7px 7px 7px 0;
}
.x-textfield-faded .x-input-el::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.4);
}
.x-textfield-faded .x-input-el::-moz-placeholder {
    color: rgba(0, 0, 0, 0.4);
}
.x-textfield-faded .x-input-el:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.4);
}
.x-textfield-faded .x-underline-el,
.x-textfield-faded.x-focused .x-underline-el:before {
    height: 0;
}
.x-textfield-faded.x-focused .x-input-wrap-el {
    background-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.4);
}
.x-textfield-faded.x-focused .x-input-el::-webkit-input-placeholder {
    color: #333;
}
.x-textfield-faded.x-focused .x-input-el::-moz-placeholder {
    color: #333;
}
.x-textfield-faded.x-focused .x-input-el:-ms-input-placeholder {
    color: #333;
}
.x-textfield-faded.x-invalid .x-underline-el:after {
    height: 0;
}
.x-textfield-solo {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}
.x-textfield-solo .x-input-wrap-el {
    background-color: #fff;
    border-width: 0;
    color: rgba(0, 0, 0, 0.4);
}
.x-big .x-textfield-solo .x-input-el,
.x-textfield-solo .x-input-el {
    padding: 10px 10px 10px 0;
}
.x-textfield-solo .x-input-el::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.4);
}
.x-textfield-solo .x-input-el::-moz-placeholder {
    color: rgba(0, 0, 0, 0.4);
}
.x-textfield-solo .x-input-el:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.4);
}
.x-textfield-solo .x-underline-el,
.x-textfield-solo.x-focused .x-underline-el:before {
    height: 0;
}
.x-textfield-solo.x-focused .x-input-wrap-el {
    color: rgba(0, 0, 0, 0.4);
}
.x-textfield-solo.x-invalid .x-underline-el:after {
    height: 0;
}
.x-textareafield .x-body-wrap-el {
    height: 74px;
}
.x-big .x-textareafield .x-body-wrap-el {
    height: 98px;
}
.x-layout-fit > .x-textareafield.x-label-align-horizontal.x-has-percentage-size-flex-bug .x-body-wrap-el,
.x-layout-hbox.x-align-stretch > .x-textareafield.x-label-align-horizontal.x-has-percentage-size-flex-bug .x-body-wrap-el,
.x-layout-vbox > .x-textareafield.x-label-align-horizontal.x-has-percentage-size-flex-bug.x-flexed .x-body-wrap-el {
    height: auto;
}
.x-big .x-messagebox-body-el,
.x-messagebox-body-el {
    padding: 24px;
}
.x-messagebox-boxscroller > .x-boxscroller-body > .x-body-el {
    border: 0;
}
.x-big .x-messageboxheader > .x-body-el,
.x-messageboxheader > .x-body-el {
    padding: 0 24px;
}
.x-big .x-messageboxheader.x-docked-left > .x-body-el,
.x-big .x-messageboxheader.x-docked-right > .x-body-el,
.x-messageboxheader.x-docked-left > .x-body-el,
.x-messageboxheader.x-docked-right > .x-body-el {
    padding: 24px 0;
}
.x-segmentedbutton .x-horizontal .x-button:not(.x-first) .x-inner-el {
    border-left: 0;
}
.x-segmentedbutton .x-horizontal .x-button:not(.x-first):not(.x-last),
.x-segmentedbutton .x-horizontal .x-button:not(.x-first):not(.x-last) .x-inner-el,
.x-segmentedbutton .x-horizontal .x-button:not(.x-first):not(.x-last):after {
    border-radius: 0;
}
.x-segmentedbutton .x-horizontal .x-button.x-first,
.x-segmentedbutton .x-horizontal .x-button.x-first .x-inner-el,
.x-segmentedbutton .x-horizontal .x-button.x-first:after {
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}
.x-segmentedbutton .x-horizontal .x-button.x-last,
.x-segmentedbutton .x-horizontal .x-button.x-last .x-inner-el,
.x-segmentedbutton .x-horizontal .x-button.x-last:after {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
}
.x-segmentedbutton.x-vertical .x-button:not(.x-first) .x-inner-el {
    border-top: 0;
}
.x-segmentedbutton.x-vertical .x-button:not(.x-first):not(.x-last),
.x-segmentedbutton.x-vertical .x-button:not(.x-first):not(.x-last) .x-inner-el,
.x-segmentedbutton.x-vertical .x-button:not(.x-first):not(.x-last):after {
    border-radius: 0;
}
.x-segmentedbutton.x-vertical .x-button.x-first,
.x-segmentedbutton.x-vertical .x-button.x-first .x-inner-el,
.x-segmentedbutton.x-vertical .x-button.x-first:after {
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}
.x-segmentedbutton.x-vertical .x-button.x-last,
.x-segmentedbutton.x-vertical .x-button.x-last .x-inner-el,
.x-segmentedbutton.x-vertical .x-button.x-last:after {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
}
.x-titlebar {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
    border-color: #010c14;
    box-shadow:
        2px 2px 5px 0 rgba(0, 0, 0, 0.12),
        2px 2px 5px 0 rgba(0, 0, 0, 0.08);
    color: #fff;
    color: var(--base-foreground-color);
    font:
        600 18px/16px Roboto,
        sans-serif;
}
.x-big .x-titlebar {
    font-size: 20px;
}
.x-titlebar .x-title {
    color: #fff;
    color: var(--base-foreground-color);
    font-family: Roboto, sans-serif;
    font-size: 18px;
    font-weight: 600;
    padding: 0 4px 0 0;
}
.x-big .x-titlebar .x-title {
    font-size: 20px;
    padding: 0 8px 0 0;
}
.x-titlebar-body-el {
    min-height: 48px;
    padding: 8px 16px;
}
.x-big .x-titlebar-body-el {
    min-height: 64px;
    padding: 10px 16px;
}
.x-titlebar-body-el.x-horizontal > .x-component,
.x-titlebar-body-el.x-horizontal > .x-component:last-child {
    margin-right: 0;
}
.x-titlebar-body-el.x-vertical > .x-component {
    margin-bottom: 3px;
}
.x-big .x-titlebar-body-el.x-vertical > .x-component {
    margin-bottom: 4px;
}
.x-titlebar-body-el.x-vertical > .x-component:last-child {
    margin-bottom: 0;
}
.x-toast {
    -webkit-box-shadow:
        2px 2px 5px 0 rgba(0, 0, 0, 0.12),
        2px 2px 5px 0 rgba(0, 0, 0, 0.08);
    -moz-box-shadow:
        2px 2px 5px 0 rgba(0, 0, 0, 0.12),
        2px 2px 5px 0 rgba(0, 0, 0, 0.08);
    box-shadow:
        2px 2px 5px 0 rgba(0, 0, 0, 0.12),
        2px 2px 5px 0 rgba(0, 0, 0, 0.08);
    margin: 0;
}
.x-toast .x-toast-body-el {
    background-color: #303030;
    background-color: var(--reverse-background-color);
    color: #fff;
    color: var(--reverse-color);
    font:
        400 14px/18px Roboto,
        sans-serif;
    padding: 8px;
}
.x-big .x-toast .x-toast-body-el {
    font:
        400 16px/25px,
        16px Roboto,
        sans-serif;
    padding: 8px;
}
.x-emptytext {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    font:
        400 14px/1.25 Roboto,
        sans-serif;
    padding: 10px;
}
.x-big .x-emptytext {
    font-size: 16px;
    padding: 15px;
}
.x-dataview,
.x-dataview-default-body-el > .x-dataview-item {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-dataview-default-body-el > .x-dataview-item {
    color: #111;
    color: var(--color);
    font:
        400 13px/16px Roboto,
        sans-serif;
}
.x-big .x-dataview-default-body-el > .x-dataview-item {
    font-size: 14px;
    line-height: 20px;
}
.x-dataview-default-body-el > .x-dataview-item.x-odd {
    background-color: #f5f5f5;
}
.x-dataview-default-body-el > .x-dataview-item.x-hovered {
    background-color: #eee;
    background-color: var(--hovered-background-color);
}
.x-dataview-default-body-el > .x-dataview-item.x-pressed {
    background-color: #e0e0e0;
    background-color: var(--selected-background-color);
    color: #111;
    color: var(--color);
}
.x-keyboard-mode .x-dataview-default-body-el > .x-dataview-item.x-focused:after {
    border: 1px solid #2196f3;
    border: 1px solid var(--base-color);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.x-dataview-default-body-el.x-show-selection > .x-dataview-item.x-selected {
    background-color: #e0e0e0;
    background-color: var(--selected-background-color);
    color: #111;
    color: var(--color);
}
.x-dataitem-default {
    background-color: #fafafa;
    background-color: var(--background-color);
    color: #111;
    color: var(--color);
    font:
        400 13px/16px Roboto,
        sans-serif;
}
.x-big .x-dataitem-default {
    font-size: 14px;
    line-height: 20px;
}
.x-dataitem-default.x-odd {
    background-color: #f5f5f5;
}
.x-dataitem-default.x-hovered {
    background-color: #eee;
    background-color: var(--hovered-background-color);
}
.x-dataitem-default.x-pressed,
.x-show-selection > .x-dataitem-default.x-selected {
    background-color: #e0e0e0;
    background-color: var(--selected-background-color);
    color: #111;
    color: var(--color);
}
.x-keyboard-mode .x-dataitem-default.x-focused:after {
    border: 1px solid #2196f3;
    border: 1px solid var(--base-color);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.x-itemheader {
    background-color: #f5f5f5;
    background-color: var(--header-background-color);
    color: #111;
    color: var(--color);
    font:
        600 13px/16px Roboto,
        sans-serif;
}
.x-big .x-itemheader {
    font-size: 14px;
    line-height: 20px;
}
.x-itemheader.x-pinned {
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.2);
}
.x-itemheader.x-pinned-bottom {
    box-shadow: 0 -6px 6px -4px rgba(0, 0, 0, 0.2);
}
.x-keyboard-mode .x-itemheader.x-focused:after {
    border: 1px solid #2196f3;
    border: 1px solid var(--base-color);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.x-itemheader-body-el {
    padding: 12px;
}
.x-big .x-itemheader-body-el {
    padding: 14px 12px;
}
.x-big .x-itemheader-tool-dock,
.x-itemheader-tool-dock {
    padding: 0 12px;
}
.x-itemheader-tool-dock > .x-body-el {
    padding: 12px 0;
}
.x-big .x-itemheader-tool-dock > .x-body-el {
    padding: 14px 0;
}
.x-listitem {
    background-color: #fafafa;
    background-color: var(--background-color);
    border-color: #e2e2e2;
    border-color: var(--divider-color);
    border-style: solid;
    border-width: 1px 0;
    color: #111;
    color: var(--color);
    font:
        400 13px/16px Roboto,
        sans-serif;
    margin-bottom: -1px;
}
.x-listitem + .x-scrolldock-end {
    margin-top: 1px;
}
.x-listitem:first-child {
    border-top-color: #fafafa;
    border-top-color: var(--background-color);
}
.x-listitem.x-odd {
    background-color: #f5f5f5;
}
.x-listitem.x-hovered {
    background-color: #eee;
    background-color: var(--hovered-background-color);
}
.x-listitem.x-pressed,
.x-show-selection > .x-listitem.x-selected {
    background-color: #e0e0e0;
    background-color: var(--selected-background-color);
    color: #111;
    color: var(--color);
}
.x-listitem.x-pinned {
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.2);
}
.x-listitem.x-pinned-bottom {
    box-shadow: 0 -6px 6px -4px rgba(0, 0, 0, 0.2);
}
.x-big .x-listitem {
    font-size: 14px;
    line-height: 20px;
}
.x-keyboard-mode .x-listitem.x-focused:after {
    border: 1px solid #2196f3;
    border: 1px solid var(--base-color);
    bottom: 0;
    content: "";
    left: 0;
    margin: -1px 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.x-listitem-inner-el {
    padding: 12px;
}
.x-big .x-listitem-inner-el {
    padding: 14px 12px;
}
.x-big .x-listitem-tool-dock,
.x-listitem-tool-dock {
    padding: 0 12px;
}
.x-listitem-tool-dock > .x-inner-el {
    padding: 12px 0;
}
.x-big .x-listitem-tool-dock > .x-inner-el {
    padding: 14px 0;
}
.x-indexbar .x-body-el {
    border-radius: 22px;
    color: #111;
    color: var(--color);
    justify-content: space-between;
}
.x-indexbar .x-body-el,
.x-indexbar .x-body-el.x-pressed {
    background-color: transparent;
}
.x-big .x-indexbar .x-body-el {
    font-size: 12px;
}
.x-indexbar .x-body-el.x-pressed {
    opacity: 1;
}
.x-indexbar .x-body-el.x-vertical {
    padding: 5px 0;
    width: 22px;
}
.x-big .x-indexbar .x-body-el.x-vertical {
    padding: 7px 0;
}
.x-indexbar .x-body-el .x-indexbar-item {
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 400;
}
.x-indexbar .x-body-el.x-horizontal {
    padding: 0 5px;
    width: 100%;
}
.x-big .x-indexbar .x-body-el.x-horizontal {
    padding: 0 7px;
    width: 100%;
}
.x-list.x-indexed-vertical.x-indexed-no-autohide.x-indexed .x-itemheader-body-el > :last-child,
.x-list.x-indexed-vertical.x-indexed-no-autohide.x-indexed .x-listitem-inner-el > :last-child,
.x-list.x-indexed-vertical.x-indexed-no-autohide.x-indexed .x-listswiperitem-body-el {
    margin-right: 22px;
}
.x-list.x-indexed-vertical.x-indexed-no-autohide.x-indexed .x-listitem-tool-dock > .x-listitem-inner-el > :last-child {
    margin-right: 0;
}
.x-list.x-indexed-vertical.x-indexed-no-autohide.x-indexed .x-listitem-tool-dock > :last-child {
    margin-right: 22px;
}
.x-edge .x-indexbar .x-indexbar-indicator {
    background-color: #2196f3;
}
.x-indexbar .x-indexbar-indicator {
    background-color: #2196f3;
    background-color: var(--base-color);
    border-radius: 100%;
    color: #fff;
    color: var(--reverse-color);
    font-size: 14px;
    font-weight: 400;
    height: 64px;
    line-height: 25px;
    width: 64px;
}
.x-big .x-indexbar .x-indexbar-indicator {
    font-size: 16px;
    height: 92px;
    line-height: 32px;
    width: 92px;
}
.x-edge .x-indexbar .x-indexbar-indicator:before {
    background-color: #2196f3;
}
.x-indexbar .x-indexbar-indicator:before {
    background-color: #2196f3;
    background-color: var(--base-color);
    content: "";
    height: 25px;
    position: absolute;
    top: 19.5px;
    transform: rotate(45deg);
    width: 25px;
}
.x-indexbar.x-horizontal > .x-indexbar-indicator:before {
    bottom: -7px;
}
.x-indexbar.x-vertical > .x-indexbar-indicator:before {
    right: -7px;
}
.x-listswiper-shadow {
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.5);
}
.x-listswiperstepper {
    background-color: #f5f5f5;
    color: #c2c2c2;
    font:
        600 13px/16px Roboto,
        sans-serif;
}
.x-big .x-listswiperstepper {
    font-size: 14px;
    line-height: 20px;
}
.x-listswiperstepper-icon-wrap-el .x-icon-el {
    color: inherit;
    height: 16px;
    width: 16px;
}
.x-listswiperstepper-icon-wrap-el .x-icon-el:before {
    font-size: 16px;
}
.x-big .x-listswiperstepper-icon-wrap-el .x-icon-el:before {
    font-size: 20px;
}
.x-big .x-listswiperstepper-icon-wrap-el .x-icon-el {
    height: 20px;
    width: 20px;
}
.x-listswiperstepper.x-side-left .x-listswiperstepper-icon-wrap-el {
    margin-right: 5px;
}
.x-big .x-listswiperstepper.x-side-left .x-listswiperstepper-icon-wrap-el {
    margin-right: 8px;
}
.x-listswiperstepper.x-side-right .x-listswiperstepper-icon-wrap-el {
    margin-left: 5px;
}
.x-big .x-listswiperstepper.x-side-right .x-listswiperstepper-icon-wrap-el {
    margin-left: 8px;
}
.x-listswiperstepper.x-undo {
    background-color: #c62828;
    background-color: var(--alert-color);
    color: #fff;
}
.x-listswiperstepper.x-undo .x-listswiperstepper-icon-wrap-el .x-icon-el {
    color: inherit;
}
.x-listswiperstepper.x-active {
    background-color: #007de1;
    color: #fff;
}
.x-listswiperstepper.x-active .x-listswiperstepper-icon-wrap-el .x-icon-el {
    color: inherit;
}
.x-listswiperstepper-body-el {
    padding: 12px;
}
.x-big .x-listswiperstepper-body-el {
    padding: 14px 12px;
}
.x-button-listswiperstepper-trigger {
    color: #fff;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.x-button-listswiperstepper-trigger .x-inner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    border-width: 0;
}
.x-button-listswiperstepper-trigger.x-has-text .x-inner-el {
    padding: 12px;
}
.x-big .x-button-listswiperstepper-trigger.x-has-text .x-inner-el {
    padding: 14px 12px;
}
.x-button-listswiperstepper-trigger .x-icon-el {
    color: #fff;
    height: 16px;
    width: 16px;
}
.x-big .x-button-listswiperstepper-trigger .x-icon-el {
    height: 20px;
    width: 20px;
}
.x-button-listswiperstepper-trigger .x-icon-el:before {
    font-size: 16px;
}
.x-big .x-button-listswiperstepper-trigger .x-icon-el:before {
    font-size: 20px;
}
.x-button-listswiperstepper-trigger.x-has-text.x-icon-align-left .x-icon-el {
    margin-right: 5px;
}
.x-big .x-button-listswiperstepper-trigger.x-has-text.x-icon-align-left .x-icon-el {
    margin-right: 8px;
}
.x-button-listswiperstepper-trigger.x-has-text.x-icon-align-right .x-icon-el {
    margin-left: 5px;
}
.x-big .x-button-listswiperstepper-trigger.x-has-text.x-icon-align-right .x-icon-el {
    margin-left: 8px;
}
.x-button-listswiperstepper-trigger .x-arrow-el {
    color: #fff;
}
.x-button-listswiperstepper-trigger.x-hovered .x-inner-el {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}
.x-button-listswiperstepper-trigger.x-pressed,
.x-button-listswiperstepper-trigger.x-pressing {
    color: #fff;
}
.x-button-listswiperstepper-trigger.x-pressed .x-inner-el,
.x-button-listswiperstepper-trigger.x-pressing .x-inner-el,
.x-keyboard-mode .x-button-listswiperstepper-trigger.x-pressed .x-inner-el,
.x-keyboard-mode .x-button-listswiperstepper-trigger.x-pressing .x-inner-el {
    background-color: rgba(0, 0, 0, 0.2);
    background-image: none;
    border-color: rgba(0, 0, 0, 0.2);
}
.x-button-listswiperstepper-trigger.x-pressed .x-arrow-el,
.x-button-listswiperstepper-trigger.x-pressed .x-icon-el,
.x-button-listswiperstepper-trigger.x-pressing .x-arrow-el,
.x-button-listswiperstepper-trigger.x-pressing .x-icon-el {
    color: #fff;
}
.x-listswiperstepper-action.x-active {
    background-color: #64b5f6;
    background-color: var(--base-highlight-color);
}
.x-listswiperstepper-confirm.x-active {
    background-color: #628939;
}
.x-listswiperstepper-decline.x-active {
    background-color: #972424;
}
.x-tooltip {
    background-color: #eef7fe;
    border-radius: 3px;
}
.x-tooltip > .x-anchor-el .x-pointer-el {
    fill: #fafafa;
    fill: var(--background-color);
    stroke: #e1e1e1;
    stroke: var(--faded-color);
}
.x-tooltip-body-el {
    background-color: #fafafa;
    background-color: var(--background-color);
    border-color: #e1e1e1;
    border-color: var(--faded-color);
    color: #111;
    color: var(--color);
    padding: 8px;
}
.x-big .x-tooltip-body-el {
    padding: 8px;
}
.x-tooltip-boxscroller {
    border-color: #e1e1e1;
    border-color: var(--faded-color);
}
.x-tooltip-boxscroller > .x-boxscroller-body > .x-body-el {
    border: 0;
}
.x-tooltip-outer-border-l {
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
}
.x-tooltip-outer-border-b,
.x-tooltip-outer-border-bl {
    border-bottom-color: #e1e1e1 !important;
    border-bottom-color: var(--faded-color) !important;
}
.x-tooltip-outer-border-bl {
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
    border-radius: 0 0 0 3px;
}
.x-tooltip-outer-border-r,
.x-tooltip-outer-border-rl {
    border-right-color: #e1e1e1 !important;
    border-right-color: var(--faded-color) !important;
}
.x-tooltip-outer-border-rl {
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
}
.x-tooltip-outer-border-rb {
    border-bottom-color: #e1e1e1 !important;
    border-bottom-color: var(--faded-color) !important;
    border-radius: 0 0 3px;
    border-right-color: #e1e1e1 !important;
    border-right-color: var(--faded-color) !important;
}
.x-tooltip-outer-border-rbl {
    border-bottom-color: #e1e1e1 !important;
    border-bottom-color: var(--faded-color) !important;
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
    border-radius: 0 0 3px 3px;
    border-right-color: #e1e1e1 !important;
    border-right-color: var(--faded-color) !important;
}
.x-tooltip-outer-border-t,
.x-tooltip-outer-border-tl {
    border-top-color: #e1e1e1 !important;
    border-top-color: var(--faded-color) !important;
}
.x-tooltip-outer-border-tl {
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
    border-radius: 3px 0 0;
}
.x-tooltip-outer-border-tb,
.x-tooltip-outer-border-tbl {
    border-bottom-color: #e1e1e1 !important;
    border-bottom-color: var(--faded-color) !important;
    border-top-color: #e1e1e1 !important;
    border-top-color: var(--faded-color) !important;
}
.x-tooltip-outer-border-tbl {
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
    border-radius: 3px 0 0 3px;
}
.x-tooltip-outer-border-tr {
    border-radius: 0 3px 0 0;
    border-right-color: #e1e1e1 !important;
    border-right-color: var(--faded-color) !important;
    border-top-color: #e1e1e1 !important;
    border-top-color: var(--faded-color) !important;
}
.x-tooltip-outer-border-trl {
    border-left-color: #e1e1e1 !important;
    border-left-color: var(--faded-color) !important;
    border-radius: 3px 3px 0 0;
    border-right-color: #e1e1e1 !important;
    border-right-color: var(--faded-color) !important;
    border-top-color: #e1e1e1 !important;
    border-top-color: var(--faded-color) !important;
}
.x-tooltip-outer-border-trb {
    border-bottom-color: #e1e1e1 !important;
    border-bottom-color: var(--faded-color) !important;
    border-radius: 0 3px 3px 0;
    border-right-color: #e1e1e1 !important;
    border-right-color: var(--faded-color) !important;
    border-top-color: #e1e1e1 !important;
    border-top-color: var(--faded-color) !important;
}
.x-tooltip-outer-border-trbl {
    border-color: #e1e1e1 !important;
    border-color: var(--faded-color) !important;
    border-radius: 3px;
}
.x-tooltipheader {
    background-color: #fafafa;
    background-color: var(--background-color);
    background-image: none;
    border-color: #e1e1e1;
    border-color: var(--faded-color);
}
.x-big .x-tooltipheader.x-horizontal,
.x-tooltipheader.x-horizontal {
    min-height: 0;
}
.x-big .x-tooltipheader.x-vertical,
.x-tooltipheader.x-vertical {
    min-width: 0;
}
.x-big .x-tooltipheader > .x-body-el,
.x-tooltipheader > .x-body-el {
    padding: 8px 8px 0;
}
.x-tooltipheader.x-docked-right {
    border-color: #e1e1e1;
    border-color: var(--faded-color);
}
.x-big .x-tooltipheader.x-docked-right > .x-body-el,
.x-tooltipheader.x-docked-right > .x-body-el {
    padding: 8px 8px 8px 0;
}
.x-tooltipheader.x-docked-left {
    border-color: #e1e1e1;
    border-color: var(--faded-color);
}
.x-big .x-tooltipheader.x-docked-left > .x-body-el,
.x-tooltipheader.x-docked-left > .x-body-el {
    padding: 8px 0 8px 8px;
}
.x-tooltipheader.x-docked-bottom {
    border-color: #e1e1e1;
    border-color: var(--faded-color);
}
.x-tooltiptitle {
    color: #111;
    color: var(--color);
    font-weight: 600;
    padding: 0;
}
.x-big .x-tooltiptitle {
    padding: 0;
}
.x-tooltiptitle .x-icon-el {
    color: #111;
    color: var(--color);
}
.x-big .x-tooltiptitle.x-rotate-270,
.x-big .x-tooltiptitle.x-rotate-90,
.x-tooltiptitle.x-rotate-270,
.x-tooltiptitle.x-rotate-90 {
    padding: 0;
}
.x-tooltiptool .x-icon-el {
    color: #111;
    color: var(--color);
}
.x-keyboard-mode .x-tooltiptool.x-focused {
    outline-color: #2196f3;
    outline-color: var(--base-color);
}
.x-big .x-listpaging,
.x-listpaging {
    padding: 13px 0;
}
.x-listpaging.x-disabled .x-message {
    color: #111;
    color: var(--color);
}
.x-listpaging .x-message {
    color: #007de1;
    font-size: 14px;
    text-align: center;
}
.x-big .x-listpaging .x-message {
    font-size: 16px;
}
.x-listpaging .x-loading-spinner {
    font-size: 180%;
    margin: 0 auto;
}
.x-big .x-listpaging .x-loading-spinner {
    font-size: 180%;
}
.x-pullrefreshbar {
    background-color: #f5f5f5;
    min-height: 64px;
}
.x-big .x-pullrefreshbar {
    min-height: 64px;
}
.x-pullrefreshbar.x-pullrefresh-overlay {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
.x-pullrefreshbar .x-pullrefreshbar-loading-wrap {
    background-color: #fafafa;
    background-color: var(--background-color);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.x-big .x-pullrefreshbar .x-pullrefreshbar-loading-wrap,
.x-big .x-pullrefreshbar .x-pullrefreshbar-loading-wrap .x-pullrefresh-loading,
.x-pullrefreshbar .x-pullrefreshbar-loading-wrap .x-pullrefresh-loading {
    font-size: 150%;
}
.x-big .x-pullrefreshbar .x-pullrefreshbar-info-wrap,
.x-pullrefreshbar .x-pullrefreshbar-info-wrap {
    margin: 0 0 0 26px;
}
.x-pullrefreshbar .x-pullrefreshbar-arrow {
    color: #2196f3;
    color: var(--base-color);
    font-family: Material Icons;
    font-size: 250%;
    line-height: 1;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    transition: all 0.5s;
}
.x-pullrefreshbar .x-pullrefreshbar-arrow:before {
    content: "get_app";
    display: inline-block;
    font-feature-settings: "liga";
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.x-big .x-pullrefreshbar .x-pullrefreshbar-arrow {
    font-size: 250%;
}
.x-pullrefreshbar.x-pullrefresh-pulling .x-pullrefreshbar-arrow {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.x-big .x-pullrefreshspinner,
.x-pullrefreshspinner {
    min-height: 64px;
}
.x-pullrefreshspinner .x-pullrefreshspinner-main {
    background-color: #fafafa;
    background-color: var(--background-color);
    border-radius: 50%;
}
.x-pullrefreshspinner .x-pullrefreshspinner-arrow-main {
    border-color: #2196f3 #2196f3 transparent;
    border-color: var(--base-color) var(--base-color) transparent;
}
.x-pullrefreshspinner .x-pullrefreshspinner-arrow-main:before {
    border-color: #2196f3 transparent transparent;
    border-color: var(--base-color) transparent transparent transparent;
}
.x-pullrefreshspinner .x-pullrefreshspinner-spinner-main .x-pullrefreshspinner-spinner-left .x-pullrefreshspinner-half-circle,
.x-pullrefreshspinner .x-pullrefreshspinner-spinner-main .x-pullrefreshspinner-spinner-right .x-pullrefreshspinner-half-circle {
    border-top-color: #2196f3;
    border-top-color: var(--base-color);
}
.x-pullrefreshspinner .x-pullrefreshspinner-spinner-main .x-pullrefreshspinner-spinner-left .x-pullrefreshspinner-half-circle {
    border-left-color: #2196f3;
    border-left-color: var(--base-color);
}
.x-pullrefreshspinner .x-pullrefreshspinner-spinner-main .x-pullrefreshspinner-spinner-right .x-pullrefreshspinner-half-circle {
    border-right-color: #2196f3;
    border-right-color: var(--base-color);
}
.x-checkboxfield .x-icon-el {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    font-family: Material Icons;
    height: 18px;
    width: 18px;
}
.x-big .x-checkboxfield .x-icon-el {
    height: 20px;
    width: 20px;
}
.x-checkboxfield .x-icon-el:before {
    content: "check_box_outline_blank";
    font-size: 18px;
}
.x-big .x-checkboxfield .x-icon-el:before {
    font-size: 20px;
}
.x-checkboxfield.x-checked .x-icon-el {
    color: #2196f3;
    color: var(--base-color);
    font-family: Material Icons;
}
.x-checkboxfield.x-checked .x-icon-el:before {
    content: "check_box";
}
.x-keyboard-mode .x-checkboxfield.x-focused .x-icon-el {
    color: #2196f3;
    color: var(--base-color);
}
.x-checkboxfield.x-disabled .x-icon-el {
    color: hsla(0, 0%, 7%, 0.38);
    color: var(--disabled-color);
}
.x-checkboxfield .x-box-label-el {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    font:
        400 12px/16px Roboto,
        sans-serif;
    padding: 7px 0 7px 5px;
}
.x-big .x-checkboxfield .x-box-label-el {
    font-size: 12px;
    line-height: 16px;
    padding: 12px 0 12px 8px;
}
.x-checkboxfield.x-box-label-align-before .x-box-label-el {
    padding: 7px 5px 7px 0;
}
.x-big .x-checkboxfield.x-box-label-align-before .x-box-label-el {
    padding: 12px 8px 12px 0;
}
.x-picker .x-dataview {
    background: transparent;
}
.x-picker-body-el {
    background-color: #fafafa;
    background-color: var(--background-color);
    overflow: hidden;
}
.x-picker-mask {
    z-index: 0;
}
.x-picker-bar {
    height: 40px;
}
.x-big .x-picker-bar {
    height: 50px;
}
.x-use-titles .x-picker-bar {
    margin: 55px 0 0;
}
.x-picker-slot-title {
    border-bottom: 2px solid #e2e2e2;
    border-bottom-color: var(--divider-color);
    color: #111;
    color: var(--color);
    font:
        400 16px/32px Roboto,
        sans-serif;
    height: 55px;
    padding: 3px 13px;
}
.x-big .x-picker-slot-title {
    font:
        400 20px/44px Roboto,
        sans-serif;
}
.x-picker-slot-title > div {
    color: #111;
    color: var(--color);
}
.x-picker-slot .x-dataview-item {
    align-items: center;
    color: #111;
    color: var(--color);
    display: flex;
    font-size: 12px;
    height: 40px;
    justify-content: center;
    line-height: 40px;
    line-height: 32px;
    z-index: 1;
}
.x-big .x-picker-slot .x-dataview-item {
    font-size: 14px;
    line-height: 25px;
}
.x-picker-slot .x-dataview-item.x-selected {
    color: #ff9800;
    color: var(--accent-color);
    font-size: 20px;
    font-weight: 600;
}
.x-big .x-picker-slot .x-dataview-item {
    height: 50px;
    line-height: 50px;
}
.x-big .x-picker-slot .x-dataview-item.x-selected {
    font-size: 20px;
}
.x-selectfield .x-chipview .x-chipview-body-el {
    padding: 0 0 0 4px;
}
.x-datetrigger .x-icon-el:before {
    content: "date_range";
}
.x-listitem-yearpicker {
    font-size: 18px;
}
.x-listitem-yearpicker.x-hovered {
    background-color: transparent;
}
.x-show-selection > .x-listitem-yearpicker.x-selected {
    background-color: transparent;
    color: #2196f3;
    color: var(--base-color);
}
.x-listitem-yearpicker.x-selected {
    font-size: 26px;
}
.x-datepanel-boxscroller > .x-boxscroller-body > .x-body-el {
    border: 0;
}
.x-datetitle {
    font-size: 28px;
    line-height: 32px;
}
.x-datetitle.x-vertical .x-text-el {
    width: 32px;
}
.x-datepanel .x-navigation-tools {
    left: calc(35px - 1em);
    right: calc(35px - 1em);
    top: 15px;
}
.x-datepanel .x-split {
    padding: 12px 8px;
}
.x-datepanel .x-year-el {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
}
.x-big .x-datepanel .x-year-el {
    font-size: 16px;
}
.x-datepanel .x-year-el.x-inactive {
    font-size: 14px;
}
.x-datepanel .x-text-el.x-inactive,
.x-datepanel .x-year-el.x-inactive {
    opacity: 0.6;
    transition:
        font-size 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.x-datepanel .x-dateview table {
    margin: 15px;
}
.x-datepanel .x-dateview caption {
    color: #3e3e3e;
    font-size: 14px;
    font-weight: 600;
    padding: 0 0 10px;
    text-align: center;
}
.x-datepanel .x-dateview .x-cell {
    padding: 4px;
}
.x-big .x-datepanel .x-dateview .x-cell {
    padding: cell-spacing-big;
}
.x-datepanel .x-dateview .x-cell .x-inner {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    height: 40px;
    width: 40px;
}
.x-datepanel .x-dateview thead .x-cell {
    background-color: transparent;
}
.x-datepanel .x-dateview thead .x-cell .x-inner {
    color: #9e9e9e;
    font-weight: 500;
    height: 40px;
}
.x-datepanel .x-dateview tbody .x-cell.x-outside .x-inner {
    color: #d0d0d0;
}
.x-datepanel .x-dateview tbody .x-cell.x-today .x-inner {
    color: #2196f3;
    color: var(--base-color);
    font-weight: 700;
}
.x-datepanel .x-dateview tbody .x-cell.x-special .x-inner {
    color: #bbdefb;
    color: var(--base-light-color);
}
.x-datepanel .x-dateview tbody .x-cell.x-disabled .x-inner {
    background-color: #aaa;
}
.x-datepanel .x-dateview tbody .x-cell.x-selected .x-inner {
    background-color: #2196f3;
    background-color: var(--base-color);
    color: #fff;
    font-weight: 400;
}
.x-datepanel .x-dateview tbody .x-cell:not(.x-hide-focus):focus .x-inner:after {
    border: 1px solid #05365c;
    border-radius: 100%;
    bottom: 5px;
    content: "";
    left: 5px;
    pointer-events: none;
    position: absolute;
    right: 5px;
    top: 5px;
}
.x-big .x-datepanel .x-dateview tbody .x-cell:not(.x-hide-focus):focus .x-inner:after {
    border: 1px solid #05365c;
    bottom: 1px;
    content: "";
    left: 1px;
    pointer-events: none;
    position: absolute;
    right: 1px;
    top: 1px;
}
.x-datepanel .x-dateview tbody .x-cell.x-selected:not(.x-hide-focus):focus .x-inner:after {
    border: 1px solid #fff;
    border-radius: 100%;
    bottom: 5px;
    content: "";
    left: 5px;
    pointer-events: none;
    position: absolute;
    right: 5px;
    top: 5px;
}
.x-big .x-datepanel .x-dateview tbody .x-cell.x-selected:not(.x-hide-focus):focus .x-inner:after {
    border: 1px solid #fff;
    bottom: 1px;
    content: "";
    left: 1px;
    pointer-events: none;
    position: absolute;
    right: 1px;
    top: 1px;
}
.x-displayfield .x-body-el {
    border-color: transparent;
}
.x-displayfield .x-input-el {
    color: #111;
    color: var(--color);
    font:
        400 13px/16px Roboto,
        sans-serif;
    padding: 4px 0;
}
.x-big .x-displayfield .x-input-el {
    font-size: 16px;
    line-height: 20px;
    padding: 8px 0;
}
.x-revealtrigger .x-icon-el:before {
    content: "visibility";
}
.x-radiofield .x-icon-el {
    font-family: Material Icons;
}
.x-radiofield .x-icon-el:before {
    content: "radio_button_unchecked";
    display: inline-block;
    font-size: 16px;
    -webkit-transform: rotate(16pxdeg);
    transform: rotate(16pxdeg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.x-big .x-radiofield .x-icon-el:before {
    font-size: 18px;
}
.x-radiofield.x-checked .x-icon-el {
    font-family: Material Icons;
}
.x-radiofield.x-checked .x-icon-el:before {
    content: "radio_button_checked";
    display: inline-block;
    -webkit-transform: rotate(16pxdeg);
    transform: rotate(16pxdeg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.x-radiofield .x-box-label-el {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
}
.x-searchtrigger .x-icon-el:before {
    content: "search";
}
.x-thumb {
    background-color: #2196f3;
    background-color: var(--base-color);
    border-radius: 9px;
    height: 18px;
    margin-top: -9px;
    width: 18px;
}
.x-big .x-thumb {
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -ms-border-radius: 14px;
    -o-border-radius: 14px;
    border-radius: 14px;
    height: 28px;
    margin-top: -14px;
    width: 28px;
}
.x-thumb.x-disabled {
    background-color: #e1e1e1;
    background-color: var(--faded-color);
}
.x-slider-vertical .x-thumb {
    margin-left: -9px;
    margin-top: 0;
    transform: rotate(90deg);
}
.x-big .x-slider-vertical .x-thumb {
    margin-left: -14px;
}
.x-thumb-sizer {
    height: 18px;
}
.x-big .x-thumb-sizer {
    height: 28px;
}
.x-thumb-toggle-on {
    background-color: #2196f3;
    background-color: var(--base-color);
}
.x-big .x-thumb-toggle-on {
    margin-top: -14px;
}
.x-slider-vertical .x-thumb-toggle-on {
    margin-top: 0;
    transform: rotate(90deg);
}
.x-big .x-slider-vertical .x-thumb-toggle-on {
    margin-left: -14px;
}
.x-thumb-toggle-off {
    background-color: #e1e1e1;
    background-color: var(--faded-color);
}
.x-big .x-thumb-toggle-off {
    margin-top: -14px;
}
.x-slider-vertical .x-thumb-toggle-off {
    margin-top: 0;
    transform: rotate(90deg);
}
.x-big .x-slider-vertical .x-thumb-toggle-off {
    margin-left: -14px;
}
.x-slider .x-track-el {
    background-color: #e2e2e2;
    background-color: var(--divider-color);
    height: 2px;
}
.x-big .x-slider .x-track-el {
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
    height: 2px;
}
.x-slider .x-fill-el {
    background-color: #64b5f6;
    background-color: var(--base-highlight-color);
    height: 2px;
}
.x-big .x-slider .x-fill-el {
    border-radius: 1px;
    height: 2px;
}
.x-slider.x-disabled .x-fill-el {
    background-color: transparent;
}
.x-slider.x-slider-vertical .x-fill-el {
    width: 2px;
}
.x-slider.x-slider-vertical .x-track-el {
    height: 100%;
    width: 2px;
}
.x-big .x-slider.x-slider-vertical .x-track-el {
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
    width: 2px;
}
.x-sliderfield .x-body-wrap-el {
    width: 100px;
}
.x-big .x-sliderfield .x-body-wrap-el {
    width: 150px;
}
.x-sliderfield .x-box-el {
    padding: 5px 0 4px;
}
.x-big .x-sliderfield .x-box-el {
    padding: 2px 0;
}
.x-sliderfield .x-box-label-el {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    font:
        400 12px/16px Roboto,
        sans-serif;
    padding: 7px 0 7px 6px;
}
.x-big .x-sliderfield .x-box-label-el {
    font-size: 12px;
    line-height: 16px;
    padding: 12px 0 12px 8px;
}
.x-sliderfield.x-box-label-align-before .x-box-label-el {
    padding: 7px 6px 7px 0;
}
.x-big .x-sliderfield.x-box-label-align-before .x-box-label-el {
    padding: 12px 8px 12px 0;
}
.x-spindowntrigger .x-icon-el {
    height: 12px;
    width: 12px;
}
.x-spindowntrigger .x-icon-el:before {
    content: "arrow_drop_down";
    font-size: 20px;
}
.x-big .x-spindowntrigger .x-icon-el:before {
    content: "remove";
}
.x-spinuptrigger .x-icon-el {
    height: 12px;
    width: 12px;
}
.x-spinuptrigger .x-icon-el:before {
    content: "arrow_drop_up";
    font-size: 20px;
}
.x-big .x-spinuptrigger .x-icon-el:before {
    content: "add";
}
.x-timetrigger .x-icon-el:before {
    content: "alarm";
}
.x-header-position-left .x-analogtimeheader {
    height: 100%;
}
.x-header-position-left .x-analogtimeheader .x-header-el {
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 190px;
}
.x-header-position-left .x-analogtimeheader .x-meridiem-wrapper-el {
    height: auto;
    padding-left: 0;
}
.x-header-position-left .x-analogtimeheader .x-time-el {
    font-size: 42px;
}
.x-analogtimeheader .x-header-el {
    align-items: center;
    background-color: #2196f3;
    background-color: var(--base-color);
    color: #fff;
    color: var(--base-foreground-color);
    display: flex;
    flex-direction: row;
    height: 100px;
    justify-content: flex-end;
    padding: 10px 40px;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    cursor: default;
}
.x-analogtimeheader .x-meridiem-wrapper-el {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding-left: 0;
}
.x-analogtimeheader .x-time-wrapper-el {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.x-analogtimeheader .x-time-el {
    font-size: 68px;
    line-height: normal;
}
.x-analogtimeheader .x-meridiem-el,
.x-analogtimeheader .x-time-el {
    cursor: pointer;
    opacity: 0.7;
    user-select: none;
}
.x-analogtimeheader .x-meridiem-el.active,
.x-analogtimeheader .x-time-el.active {
    opacity: 1;
}
.x-analogtimeheader .x-time-el.x-minute-el {
    flex: 1;
    text-align: left;
}
.x-analogtimeheader .x-time-el.x-hour-el {
    flex: 1;
    text-align: right;
}
.x-analogtime {
    background-color: #fafafa;
    background-color: var(--background-color);
    height: 420px;
    width: 280px;
}
.x-analogtime:not(.x-vertical) {
    height: 280px;
    width: 420px;
}
.x-analogtime .x-inner-el {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}
.x-wide .x-analogtime .x-inner-el {
    flex-direction: row;
    height: auto;
    width: 100%;
}
.x-analogtime .x-picker-wrap-el {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 100%;
}
.x-analogtime .x-analog-picker-el {
    background-color: #f5f5f5;
    background-color: var(--alt-background-color);
    border-radius: 1000000px;
    position: relative;
    touch-action: none;
    width: 90%;
}
.x-analogtime .x-analog-picker-el:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.x-analogtime .x-analog-picker-el.animated .x-analog-picker-hand-el {
    transition: transform 0.3s ease-out;
}
.x-analogtime .x-analog-picker-el.animated-delayed .x-analog-picker-hand-el {
    transition: transform 0.3s ease-out 0.2s;
}
.x-analogtime .x-analog-picker-face-el {
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    cursor: default;
}
.x-analogtime .x-analog-picker-face-el > div {
    color: #111;
    color: var(--color);
    cursor: pointer;
    left: 50%;
    margin: -10px;
    position: absolute;
    text-align: center;
    top: 50%;
    transition: color 0.2s ease-out;
    user-select: none;
    width: 19px;
}
.x-analogtime .x-analog-picker-face-el > div.active {
    color: #fff;
    color: var(--reverse-color);
}
.x-analogtime .x-analog-picker-12hr-format {
    display: block;
    padding-left: 12px;
}
.x-analogtime .x-analog-picker-24hr-format {
    display: none;
    padding-left: 0;
}
.x-analogtime .hour-picker-el.align-pm-inside {
    font-size: 14px;
}
.x-analogtime .hour-picker-el.inner-track {
    opacity: 0.7;
}
.x-analogtime.x-header-position-left .x-analog-picker-hand-el.inner-dial {
    width: 30%;
}
.x-analogtime .x-analog-picker-hand-el {
    background-color: #2196f3;
    background-color: var(--base-color);
    height: 2px;
    left: 50%;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    transform: rotate(0deg);
    transform-origin: center left;
    width: 46%;
}
.x-edge .x-analogtime .x-analog-picker-hand-el,
.x-edge .x-analogtime .x-analog-picker-hand-el:after,
.x-edge .x-analogtime .x-analog-picker-hand-el:before {
    background-color: #2196f3;
}
.x-analogtime .x-analog-picker-hand-el.inner-dial {
    width: 32%;
}
.x-analogtime .x-analog-picker-hand-el.format-24hr:after {
    box-shadow: 0 0 0 14px #2196f3;
    box-shadow: 0 0 0 14px var(--base-color);
}
.x-analogtime .x-analog-picker-hand-el:before {
    background-color: #2196f3;
    background-color: var(--base-color);
    border-radius: 8px;
    content: "";
    height: 8px;
    left: -4px;
    position: absolute;
    top: -3px;
    width: 8px;
}
.x-analogtime .x-analog-picker-hand-el:after {
    background-color: #2196f3;
    background-color: var(--base-color);
    border-radius: 30px;
    box-shadow: 0 0 0 15px #2196f3;
    box-shadow: 0 0 0 15px var(--base-color);
    content: "";
    height: 4px;
    position: absolute;
    right: 14px;
    top: 0;
    width: 4px;
}
.x-analogtime .x-analog-picker-el.x-analog-picker-dot-indicator .x-analog-picker-hand-el:after {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-toggleslider .x-track-el {
    border-radius: 8px;
    height: 16px;
}
.x-big .x-toggleslider .x-track-el {
    height: 16px;
}
.x-toggleslider .x-fill-el {
    border-radius: 8px;
    height: 16px;
}
.x-big .x-toggleslider .x-fill-el {
    height: 16px;
}
.x-toggleslider.x-slider-vertical .x-track-el {
    height: 100%;
}
.x-toggleslider {
    width: 32px;
}
.x-big .x-toggleslider {
    width: 45px;
}
.x-big .x-toggleslider .x-fill-el,
.x-big .x-toggleslider .x-track-el,
.x-toggleslider .x-fill-el,
.x-toggleslider .x-track-el {
    border-radius: 8px;
}
.x-toggleslider .x-fill-el {
    width: 100%;
}
.x-big .x-togglefield .x-body-wrap-el,
.x-togglefield .x-body-wrap-el {
    width: auto;
}
.x-togglefield .x-box-el {
    padding: 5px 0 4px;
}
.x-big .x-togglefield .x-box-el {
    padding: 2px 0;
}
.x-trigger.x-filetrigger {
    width: auto;
}
.x-form-fieldset {
    margin: 0;
}
.x-form-fieldset .x-form-fieldset-body-el {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    border-style: none;
    padding: 8px;
}
.x-form-fieldset .x-field {
    background: transparent;
}
.x-form-fieldset-title {
    color: #111;
    color: var(--color);
    font:
        400 14px/18px Roboto,
        sans-serif;
    margin: 0;
}
.x-big .x-form-fieldset-title {
    font:
        400 16px/24px Roboto,
        sans-serif;
}
.x-form-fieldset-instructions {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    text-align: left;
}
.x-big .x-form-fieldset-instructions,
.x-form-fieldset-instructions {
    font-size: 12px;
    font-weight: 400;
    line-height: 32px;
}
.x-field.x-label-align-left:first-child .x-label-el {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
}
.x-field.x-label-align-left:last-child .x-label-el {
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
}
.x-field.x-label-align-right:first-child .x-label-el {
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
}
.x-field.x-label-align-right:last-child {
    border-bottom: 0;
}
.x-field.x-label-align-right:last-child .x-label-el {
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}
.x-field.x-label-align-top:first-child .x-label-el {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
}
.x-field.x-label-align-bottom:last-child .x-label-el {
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}
.x-formpanel-body-el {
    background-color: #fafafa;
    background-color: var(--background-color);
    padding: 8px 16px;
}
.x-big .x-formpanel-body-el {
    padding: 8px 16px;
}
.x-gridcell {
    font:
        400 13px/16px Roboto,
        sans-serif;
}
.x-big .x-gridcell {
    font-size: 14px;
    line-height: 20px;
}
.x-column-lines .x-gridcell {
    border-right: 1px solid #e2e2e2;
    border-right: 1px solid var(--divider-color);
}
.x-gridcell.x-hovered {
    background-color: #eee;
    background-color: var(--hovered-background-color);
}
.x-gridcell.x-pressed,
.x-gridcell.x-selected {
    background-color: #e0e0e0;
    background-color: var(--selected-background-color);
    color: #111;
    color: var(--color);
}
.x-keyboard-mode .x-gridcell.x-focused:after {
    border: 1px solid #2196f3;
    border: 1px solid var(--base-color);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.x-mark-dirty > * > .x-gridcell.x-dirty:before {
    color: #c62828;
    color: var(--alert-color);
    content: "\e602";
    font-family: ExtJS;
    font-size: 14px;
    height: 14px;
    width: 14px;
}
.x-big .x-mark-dirty > * > .x-gridcell.x-dirty:before {
    font-size: 18px;
    height: 18px;
    width: 18px;
}
.x-gridcell-body-el,
.x-roweditorcell {
    padding: 12px;
}
.x-big .x-gridcell-body-el,
.x-big .x-roweditorcell {
    padding: 14px 12px;
}
.x-big .x-gridcell-tool-dock,
.x-gridcell-tool-dock {
    padding: 0 12px;
}
.x-gridcell-tool-dock > .x-body-el {
    padding: 12px 0;
}
.x-big .x-gridcell-tool-dock > .x-body-el {
    padding: 14px 0;
}
.x-gridcell-summary {
    font-weight: 600;
}
.x-big .x-gridcell-summary-body-el,
.x-gridcell-summary-body-el {
    padding: dynamic(8px 0);
}
.x-big .x-gridcell-summary-tool-dock,
.x-gridcell-summary-tool-dock {
    padding: 0 dynamic(8px 0);
}
.x-big .x-gridcell-summary-tool-dock > .x-body-el,
.x-gridcell-summary-tool-dock > .x-body-el {
    padding: dynamic(8px 0) 0;
}
.x-rowbody .x-content-el {
    padding: 12px;
}
.x-headercontainer {
    background-color: #fafafa;
    background-color: var(--background-color);
    border: solid #e2e2e2;
    border-color: var(--divider-color);
    border-width: 0 0 1px;
}
.x-menucheckitem .x-body-el {
    color: #111;
    color: var(--color);
    cursor: pointer;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    height: 32px;
}
.x-big .x-menucheckitem .x-body-el {
    font-size: 16px;
    height: 48px;
}
.x-menucheckitem .x-icon-el {
    color: grey;
    height: 16px;
    width: 16px;
}
.x-big .x-menucheckitem .x-icon-el {
    height: 20px;
    width: 20px;
}
.x-menucheckitem .x-icon-el:before {
    font-size: 16px;
}
.x-big .x-menucheckitem .x-icon-el:before {
    font-size: 20px;
}
.x-menucheckitem .x-arrow-el {
    color: grey;
    height: 16px;
    margin: 0 7px;
    width: 16px;
}
.x-big .x-menucheckitem .x-arrow-el {
    height: 20px;
    width: 20px;
}
.x-menucheckitem .x-arrow-el:before {
    content: "chevron_right";
    font-size: 16px;
}
.x-big .x-menucheckitem .x-arrow-el:before {
    font-size: 20px;
}
.x-big .x-menucheckitem .x-arrow-el {
    margin: 0 10px;
}
.x-menucheckitem.x-active .x-body-el {
    background-color: #eee;
    background-color: var(--hovered-background-color);
}
.x-menucheckitem.x-disabled .x-body-el {
    cursor: default;
}
.x-menucheckitem.x-disabled .x-arrow-el,
.x-menucheckitem.x-disabled .x-icon-el,
.x-menucheckitem.x-disabled .x-text-el {
    opacity: 0.5;
}
.x-keyboard-mode .x-menucheckitem.x-focused .x-body-el:after {
    border: 1px solid #2196f3;
    border: 1px solid var(--base-color);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.x-menucheckitem .x-checkbox-icon-el {
    color: grey;
    height: 18px;
    width: 18px;
}
.x-big .x-menucheckitem .x-checkbox-icon-el {
    height: 20px;
    width: 20px;
}
.x-menucheckitem .x-checkbox-icon-el:before {
    content: "check_box_outline_blank";
    font-size: 18px;
}
.x-big .x-menucheckitem .x-checkbox-icon-el:before {
    font-size: 20px;
}
.x-menucheckitem.x-checked .x-checkbox-icon-el:before {
    content: "check_box";
}
.x-gridcolumn > .x-header-el {
    background-color: #fafafa;
    background-color: var(--background-color);
    border-color: #e2e2e2;
    border-color: var(--divider-color);
    border-style: solid;
    border-width: 0 1px 1px 0;
    color: #111;
    color: var(--color);
    font:
        400 13px/16px Roboto,
        sans-serif;
}
.x-big .x-gridcolumn > .x-header-el {
    font-size: 14px;
    line-height: 20px;
}
.x-gridcolumn > .x-header-el .x-trigger-el,
.x-gridcolumn > .x-header-el:hover {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-gridcolumn > .x-header-el .x-trigger-el {
    border: solid #e2e2e2;
    border-color: var(--divider-color);
    border-width: 0 0 0 1px;
    color: grey;
    width: 20px;
}
.x-gridcolumn > .x-header-el .x-trigger-el:before {
    content: "arrow_drop_down";
    font-size: 20px;
}
.x-big .x-gridcolumn > .x-header-el .x-trigger-el:before {
    font-size: 24px;
}
.x-big .x-gridcolumn > .x-header-el .x-trigger-el {
    width: 24px;
}
.x-gridcolumn > .x-header-el:after {
    background-color: #ffe0b2;
    background-color: var(--accent-light-color);
    width: 13px;
}
.x-gridcolumn.x-sorted > .x-header-el {
    background-color: #fafafa;
    background-color: var(--background-color);
}
.x-gridcolumn.x-sorted .x-sort-icon-el {
    color: #111;
    color: var(--color);
    height: 13px;
    margin: 0 0 0 3px;
    width: 13px;
}
.x-gridcolumn.x-sorted .x-sort-icon-el:before {
    font-size: 18px;
}
.x-gridcolumn.x-sorted.x-secondary-sort .x-sort-icon-el {
    color: #888;
}
.x-gridcolumn.x-sorted.x-aux-sort .x-sort-icon-el {
    color: #b8b8b8;
}
.x-gridcolumn.x-sorted-asc .x-sort-icon-el:before {
    content: "arrow_upward";
}
.x-gridcolumn.x-sorted-desc .x-sort-icon-el:before {
    content: "arrow_downward";
}
.x-gridcolumn-title-wrap-el {
    padding: 12px;
}
.x-big .x-gridcolumn-title-wrap-el {
    padding: 14px 12px;
}
.x-big .x-gridcolumn-tool-dock,
.x-gridcolumn-tool-dock {
    padding: 0 12px;
}
.x-gridcolumn-tool-dock > .x-title-wrap-el {
    padding: 12px 0;
}
.x-big .x-gridcolumn-tool-dock > .x-title-wrap-el {
    padding: 14px 0;
}
.x-headermenu-sort-asc:before {
    content: "arrow_upward";
}
.x-headermenu-sort-desc:before {
    content: "arrow_downward";
}
.x-headermenu-columns-icon:before {
    content: "\e601";
    font-family: ExtJS;
}
.x-headermenu-group-by-this:before {
    content: "\e607";
    font-family: ExtJS;
}
.x-menuradioitem .x-body-el {
    color: #111;
    color: var(--color);
    cursor: pointer;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    height: 32px;
}
.x-big .x-menuradioitem .x-body-el {
    font-size: 16px;
    height: 48px;
}
.x-menuradioitem .x-icon-el {
    color: grey;
    height: 16px;
    width: 16px;
}
.x-big .x-menuradioitem .x-icon-el {
    height: 20px;
    width: 20px;
}
.x-menuradioitem .x-icon-el:before {
    font-size: 16px;
}
.x-big .x-menuradioitem .x-icon-el:before {
    font-size: 20px;
}
.x-menuradioitem .x-arrow-el {
    color: grey;
    height: 16px;
    margin: 0 7px;
    width: 16px;
}
.x-big .x-menuradioitem .x-arrow-el {
    height: 20px;
    width: 20px;
}
.x-menuradioitem .x-arrow-el:before {
    content: "chevron_right";
    font-size: 16px;
}
.x-big .x-menuradioitem .x-arrow-el:before {
    font-size: 20px;
}
.x-big .x-menuradioitem .x-arrow-el {
    margin: 0 10px;
}
.x-menuradioitem.x-active .x-body-el {
    background-color: #eee;
    background-color: var(--hovered-background-color);
}
.x-menuradioitem.x-disabled .x-body-el {
    cursor: default;
}
.x-menuradioitem.x-disabled .x-arrow-el,
.x-menuradioitem.x-disabled .x-icon-el,
.x-menuradioitem.x-disabled .x-text-el {
    opacity: 0.5;
}
.x-keyboard-mode .x-menuradioitem.x-focused .x-body-el:after {
    border: 1px solid #2196f3;
    border: 1px solid var(--base-color);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.x-menuradioitem .x-checkbox-icon-el {
    color: grey;
}
.x-menuradioitem .x-checkbox-icon-el:before {
    content: "";
}
.x-menuradioitem.x-checked .x-checkbox-icon-el:before {
    content: "check";
}
.x-checkcell-body-el {
    padding: 11px 0;
}
.x-big .x-checkcell-body-el {
    padding: 14px 0;
}
.x-big .x-checkcell-tool-dock,
.x-checkcell-tool-dock {
    padding: 0;
}
.x-checkcell-tool-dock > .x-body-el {
    padding: 11px 0;
}
.x-big .x-checkcell-tool-dock > .x-body-el {
    padding: 14px 0;
}
.x-checkcell .x-checkbox-el {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    height: 18px;
    width: 18px;
}
.x-big .x-checkcell .x-checkbox-el {
    height: 20px;
    width: 20px;
}
.x-checkcell .x-checkbox-el:before {
    content: "check_box_outline_blank";
    font-size: 18px;
}
.x-big .x-checkcell .x-checkbox-el:before {
    font-size: 20px;
}
.x-checkcell.x-checked .x-checkbox-el,
.x-selected > * .x-checkcell.x-selection-cell .x-checkbox-el {
    color: #2196f3;
    color: var(--base-color);
}
.x-checkcell.x-checked .x-checkbox-el:before,
.x-selected > * .x-checkcell.x-selection-cell .x-checkbox-el:before {
    content: "check_box";
}
.x-checkcell.x-disabled .x-checkbox-el {
    color: hsla(0, 0%, 7%, 0.38);
    color: var(--disabled-color);
}
.x-checkcell .x-checkbox-el:focus {
    color: #2196f3;
    color: var(--base-color);
}
.x-checkcolumn .x-checkbox-el {
    color: hsla(0, 0%, 7%, 0.54);
    color: var(--highlight-color);
    height: 18px;
    width: 18px;
}
.x-big .x-checkcolumn .x-checkbox-el {
    height: 20px;
    width: 20px;
}
.x-checkcolumn .x-checkbox-el:before {
    content: "check_box_outline_blank";
    font-size: 18px;
}
.x-big .x-checkcolumn .x-checkbox-el:before {
    font-size: 20px;
}
.x-checkcolumn.x-checked .x-checkbox-el {
    color: #2196f3;
    color: var(--base-color);
}
.x-checkcolumn.x-checked .x-checkbox-el:before {
    content: "check_box";
}
.x-checkcolumn.x-disabled .x-checkbox-el {
    color: hsla(0, 0%, 7%, 0.38);
    color: var(--disabled-color);
}
.x-checkcolumn .x-checkbox-el:focus {
    color: #2196f3;
    color: var(--base-color);
}
.x-checkcolumn.x-checkbox-align-top .x-title-el {
    margin-top: 2px;
}
.x-big .x-checkcolumn.x-checkbox-align-top .x-title-el {
    margin-top: 3px;
}
.x-checkcolumn.x-checkbox-align-right .x-title-el {
    margin-right: 4px;
}
.x-big .x-checkcolumn.x-checkbox-align-right .x-title-el {
    margin-right: 6px;
}
.x-checkcolumn.x-checkbox-align-bottom .x-title-el {
    margin-bottom: 2px;
}
.x-big .x-checkcolumn.x-checkbox-align-bottom .x-title-el {
    margin-bottom: 3px;
}
.x-checkcolumn.x-checkbox-align-left .x-title-el {
    margin-left: 4px;
}
.x-big .x-checkcolumn.x-checkbox-align-left .x-title-el {
    margin-left: 6px;
}
.x-proxy-drag-el {
    background-color: #fafafa;
    background-color: var(--background-color);
    border: 1px solid #e1e1e1;
    color: #111;
    color: var(--color);
    padding: 5px;
}
.x-proxy-drag-el:before {
    color: #c62828;
    color: var(--alert-color);
    content: "cancel";
    font-family: Material Icons;
    padding-right: 5px;
}
.x-proxy-drag-el.x-valid-drop:before {
    color: #7cb342;
    color: var(--confirm-color);
    content: "check_circle";
}
.x-drop-indicator-before:before {
    border: solid #7cb342;
    border-color: var(--confirm-color);
    border-width: 1px 0 0;
}
.x-drop-indicator-after:after,
.x-drop-indicator-before:before {
    content: "";
    font-family: Roboto, sans-serif;
    position: absolute;
    width: 100%;
}
.x-drop-indicator-after:after {
    border: solid #7cb342;
    border-color: var(--confirm-color);
    border-width: 0 0 1px;
    bottom: 0;
}
.x-big .x-drop-indicator-before:before {
    border: solid #7cb342;
    border-color: var(--confirm-color);
    border-width: 5px 0 0;
}
.x-big .x-drop-indicator-after:after {
    border: solid #7cb342;
    border-color: var(--confirm-color);
    border-width: 0 0 5px;
}
.x-listitem.x-drag-indicator,
.x-show-selection > .x-listitem.x-drag-indicator {
    background: #ffe0b2;
    background: var(--accent-light-color);
    border-color: #ffe0b2;
    border-color: var(--accent-light-color);
}
.x-header-drop-indicator-after:before,
.x-header-drop-indicator-before:before {
    content: "arrow_downward";
    top: -4px;
}
.x-header-drop-indicator-after:after,
.x-header-drop-indicator-before:after {
    bottom: -4px;
    content: "arrow_upward";
}
.x-header-drop-indicator-after:after,
.x-header-drop-indicator-after:before,
.x-header-drop-indicator-before:after,
.x-header-drop-indicator-before:before {
    color: #7cb342;
    color: var(--confirm-color);
    font-family: Material Icons;
    font-size: 14px;
    font-weight: 700;
}
.x-header-drop-indicator-before:after,
.x-header-drop-indicator-before:before {
    left: -7px;
}
.x-header-drop-indicator-after:after,
.x-header-drop-indicator-after:before {
    right: -7px;
}
.x-grid.x-disabled {
    cursor: default;
    opacity: 0.6;
    pointer-events: none;
}
.x-grid .x-resize-marker-el {
    background-color: #e2e2e2;
    background-color: var(--divider-color);
    width: 1px;
    z-index: 1;
}
.x-big .x-expandercell-body-el,
.x-big .x-expandercell-tool-dock,
.x-big .x-expandercell-tool-dock > .x-body-el,
.x-expandercell-body-el,
.x-expandercell-tool-dock,
.x-expandercell-tool-dock > .x-body-el {
    padding: 0;
}
.x-expandercell .x-icon-el {
    color: #b0b0b0;
    height: 18px;
    width: 18px;
}
.x-big .x-expandercell .x-icon-el {
    height: 24px;
    width: 24px;
}
.x-expandercell .x-icon-el:before {
    content: "expand_more";
    font-family: Material Icons;
    font-size: 18px;
}
.x-big .x-expandercell .x-icon-el:before {
    font-size: 24px;
}
.x-expandercell.x-expanded .x-icon-el:before {
    content: "expand_less";
    font-family: Material Icons;
}
.x-big .x-widgetcell-body-el,
.x-big .x-widgetcell-tool-dock,
.x-big .x-widgetcell-tool-dock > .x-body-el,
.x-widgetcell-body-el,
.x-widgetcell-tool-dock,
.x-widgetcell-tool-dock > .x-body-el {
    padding: 0;
}
.x-drag-column .x-header-el {
    border-right: 0;
}
.x-row-drag-indicator:before {
    content: "drag_handle";
    font-family: Material Icons;
    font-size: 26px;
    position: absolute;
}
.x-gridfilters-menu-filters-icon:before {
    content: "filter_list";
}
.x-gridfilters-menu-filters-manage-icon:before {
    content: "settings";
}
.x-gridfilters-menu-filters-more-icon:before {
    content: "more_horiz";
}
.x-gridfilters-menu-filters-save-icon:before {
    content: "save";
}
.x-lockedgrid .x-lockedgridregion.x-lock-start {
    border-color: #2196f3;
    border-color: var(--base-color);
    border-style: solid;
    border-width: 0 2px 0 0;
}
.x-lockedgrid .x-lockedgridregion.x-lock-end {
    border-color: #2196f3;
    border-color: var(--base-color);
    border-style: solid;
    border-width: 0 0 0 2px;
}
.x-menuseparator {
    border: solid #e2e2e2;
    border-color: var(--divider-color);
    border-width: 1px 0 0;
    height: 1px;
    margin: 8px 0;
}
.x-pagingtoolbar {
    color: #111;
    color: var(--color);
}
.x-pagingtoolbar .x-pagingtoolbar-prev:before {
    content: "\f104";
    font-family: Font Awesome\5 Free;
}
.x-pagingtoolbar .x-pagingtoolbar-next:before {
    content: "\f105";
    font-family: Font Awesome\5 Free;
}
.x-gridviewoptions {
    background-color: #fafafa;
    background-color: var(--background-color);
    border-color: #e1e1e1;
}
.x-column-options-folder,
.x-column-options-groupindicator,
.x-column-options-leaf,
.x-column-options-sortablehandle,
.x-column-options-visibleindicator {
    height: 16px;
    width: 16px;
}
.x-big .x-column-options-folder,
.x-big .x-column-options-groupindicator,
.x-big .x-column-options-leaf,
.x-big .x-column-options-sortablehandle,
.x-big .x-column-options-visibleindicator {
    height: 24px;
    width: 24px;
}
.x-column-options-folder:before,
.x-column-options-groupindicator:before,
.x-column-options-leaf:before,
.x-column-options-sortablehandle:before,
.x-column-options-visibleindicator:before {
    font-size: 16px;
}
.x-big .x-column-options-folder:before,
.x-big .x-column-options-groupindicator:before,
.x-big .x-column-options-leaf:before,
.x-big .x-column-options-sortablehandle:before,
.x-big .x-column-options-visibleindicator:before {
    font-size: 24px;
}
.x-column-options-sortablehandle:before {
    content: "menu";
}
.x-column-options-sortablehandle.x-icon-el {
    color: #b0b0b0;
}
.x-column-options-visibleindicator:before {
    content: "remove_red_eye";
}
.x-column-options-visibleindicator.x-icon-el {
    color: #2196f3;
    color: var(--base-color);
}
.x-column-options-groupindicator:before {
    content: "group";
}
.x-column-options-groupindicator.x-icon-el {
    color: #b0b0b0;
}
.x-column-options-folder.x-icon-el,
.x-column-options-leaf.x-icon-el {
    color: #91e698;
}
.x-column-options-folder:before {
    content: "folder";
}
.x-column-options-leaf:before {
    content: "description";
}
.x-column-options-hidden .x-column-options-folder.x-icon-el,
.x-column-options-hidden .x-column-options-leaf.x-icon-el,
.x-column-options-hidden .x-column-options-text.x-icon-el,
.x-column-options-hidden .x-column-options-visibleindicator.x-icon-el {
    color: #b0b0b0;
}
.x-column-options-grouped .x-column-options-groupindicator.x-icon-el {
    color: #2196f3;
    color: var(--base-color);
}
.x-grid-filterbar .x-textfield .x-input-wrap-el {
    border: 0;
}
.x-panel-roweditor {
    background-color: #f5f5f5;
    background-color: var(--header-background-color);
}
.x-panel-roweditor > .x-anchor-el .x-pointer-el {
    fill: #f5f5f5;
    fill: var(--header-background-color);
    stroke-width: 1px 0;
    stroke: #e2e2e2;
    stroke: var(--divider-color);
}
.x-panel-roweditor > .x-anchor-el.x-top {
    padding-bottom: 1px 0;
}
.x-panel-roweditor > .x-anchor-el.x-bottom {
    padding-top: 1px 0;
}
.x-panel-roweditor > .x-anchor-el.x-left {
    padding-right: 1px 0;
}
.x-panel-roweditor > .x-anchor-el.x-right {
    padding-left: 1px 0;
}
.x-panel-roweditor-body-el {
    background-color: #f5f5f5;
    background-color: var(--header-background-color);
}
.x-panel-roweditor-boxscroller > .x-boxscroller-body > .x-body-el {
    border: 0;
}
.x-panel-roweditor-outer-border-l {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 0 !important;
}
.x-panel-roweditor-outer-border-b,
.x-panel-roweditor-outer-border-bl {
    border-bottom-color: #e2e2e2 !important;
    border-bottom-color: var(--divider-color) !important;
    border-bottom-width: 1px !important;
}
.x-panel-roweditor-outer-border-bl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 0 !important;
}
.x-panel-roweditor-outer-border-r,
.x-panel-roweditor-outer-border-rl {
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
    border-right-width: 0 !important;
}
.x-panel-roweditor-outer-border-rl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 0 !important;
}
.x-panel-roweditor-outer-border-rb,
.x-panel-roweditor-outer-border-rbl {
    border-bottom-color: #e2e2e2 !important;
    border-bottom-color: var(--divider-color) !important;
    border-bottom-width: 1px !important;
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
    border-right-width: 0 !important;
}
.x-panel-roweditor-outer-border-rbl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 0 !important;
}
.x-panel-roweditor-outer-border-t,
.x-panel-roweditor-outer-border-tl {
    border-top-color: #e2e2e2 !important;
    border-top-color: var(--divider-color) !important;
    border-top-width: 1px !important;
}
.x-panel-roweditor-outer-border-tl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 0 !important;
}
.x-panel-roweditor-outer-border-tb,
.x-panel-roweditor-outer-border-tbl {
    border-bottom-color: #e2e2e2 !important;
    border-bottom-color: var(--divider-color) !important;
    border-bottom-width: 1px !important;
    border-top-color: #e2e2e2 !important;
    border-top-color: var(--divider-color) !important;
    border-top-width: 1px !important;
}
.x-panel-roweditor-outer-border-tbl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 0 !important;
}
.x-panel-roweditor-outer-border-tr,
.x-panel-roweditor-outer-border-trl {
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
    border-right-width: 0 !important;
    border-top-color: #e2e2e2 !important;
    border-top-color: var(--divider-color) !important;
    border-top-width: 1px !important;
}
.x-panel-roweditor-outer-border-trl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 0 !important;
}
.x-panel-roweditor-outer-border-trb {
    border-bottom-color: #e2e2e2 !important;
    border-bottom-color: var(--divider-color) !important;
    border-bottom-width: 1px !important;
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
    border-right-width: 0 !important;
    border-top-color: #e2e2e2 !important;
    border-top-color: var(--divider-color) !important;
    border-top-width: 1px !important;
}
.x-panel-roweditor-outer-border-trbl {
    border-color: #e2e2e2 !important;
    border-color: var(--divider-color) !important;
    border-width: 1px 0 !important;
}
.x-panel-roweditor-buttons {
    background-color: #f5f5f5;
    background-color: var(--header-background-color);
}
.x-panel-roweditor-buttons > .x-anchor-el .x-pointer-el {
    fill: #f5f5f5;
    fill: var(--header-background-color);
    stroke-width: 1px;
    stroke: #e2e2e2;
    stroke: var(--divider-color);
}
.x-panel-roweditor-buttons > .x-anchor-el.x-top {
    padding-bottom: 1px;
}
.x-panel-roweditor-buttons > .x-anchor-el.x-bottom {
    padding-top: 1px;
}
.x-panel-roweditor-buttons > .x-anchor-el.x-left {
    padding-right: 1px;
}
.x-panel-roweditor-buttons > .x-anchor-el.x-right {
    padding-left: 1px;
}
.x-panel-roweditor-buttons-body-el {
    background-color: #f5f5f5;
    background-color: var(--header-background-color);
    padding: 4px 4px 4px 0;
}
.x-panel-roweditor-buttons-boxscroller > .x-boxscroller-body > .x-body-el {
    border: 0;
}
.x-panel-roweditor-buttons-outer-border-l {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-b,
.x-panel-roweditor-buttons-outer-border-bl {
    border-bottom-color: #e2e2e2 !important;
    border-bottom-color: var(--divider-color) !important;
    border-bottom-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-bl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-r,
.x-panel-roweditor-buttons-outer-border-rl {
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
    border-right-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-rl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-rb,
.x-panel-roweditor-buttons-outer-border-rbl {
    border-bottom-color: #e2e2e2 !important;
    border-bottom-color: var(--divider-color) !important;
    border-bottom-width: 1px !important;
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
    border-right-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-rbl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-t,
.x-panel-roweditor-buttons-outer-border-tl {
    border-top-color: #e2e2e2 !important;
    border-top-color: var(--divider-color) !important;
    border-top-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-tl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-tb,
.x-panel-roweditor-buttons-outer-border-tbl {
    border-bottom-color: #e2e2e2 !important;
    border-bottom-color: var(--divider-color) !important;
    border-bottom-width: 1px !important;
    border-top-color: #e2e2e2 !important;
    border-top-color: var(--divider-color) !important;
    border-top-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-tbl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-tr,
.x-panel-roweditor-buttons-outer-border-trl {
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
    border-right-width: 1px !important;
    border-top-color: #e2e2e2 !important;
    border-top-color: var(--divider-color) !important;
    border-top-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-trl {
    border-left-color: #e2e2e2 !important;
    border-left-color: var(--divider-color) !important;
    border-left-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-trb {
    border-bottom-color: #e2e2e2 !important;
    border-bottom-color: var(--divider-color) !important;
    border-bottom-width: 1px !important;
    border-right-color: #e2e2e2 !important;
    border-right-color: var(--divider-color) !important;
    border-right-width: 1px !important;
    border-top-color: #e2e2e2 !important;
    border-top-color: var(--divider-color) !important;
    border-top-width: 1px !important;
}
.x-panel-roweditor-buttons-outer-border-trbl {
    border-color: #e2e2e2 !important;
    border-color: var(--divider-color) !important;
    border-width: 1px !important;
}
.x-roweditor {
    background-color: #f5f5f5;
    background-color: var(--header-background-color);
    border-color: #e2e2e2;
    border-color: var(--divider-color);
    border-style: solid;
    border-width: 1px 0;
    margin-bottom: 0;
    transition: top 0.3s;
}
.x-roweditor + .x-scrolldock-end {
    margin-top: 1px;
}
.x-roweditor:first-child {
    border-top-color: #f5f5f5;
    border-top-color: var(--header-background-color);
}
.x-roweditor.x-roweditor-button-ct-above .x-roweditor-button-ct {
    box-shadow: 0 -6px 6px -4px rgba(0, 0, 0, 0.2);
}
.x-roweditor.x-roweditor-button-ct-below .x-roweditor-button-ct {
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.2);
}
.x-roweditor.x-roweditor-button-ct-above {
    box-shadow: 0 -6px 6px -4px rgba(0, 0, 0, 0.2);
}
.x-roweditor.x-roweditor-button-ct-below {
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.2);
}
.x-roweditor .x-roweditor-inner-el {
    padding: 0;
}
.x-roweditor .x-roweditor-button-ct .x-button {
    margin-left: 4px;
}
.x-layout-form {
    border-spacing: 8px;
}
.x-big .x-layout-form {
    border-spacing: 20px;
}
.x-panelresizer.x-north.x-handle,
.x-panelresizer.x-northeast.x-handle,
.x-panelresizer.x-northwest.x-handle,
.x-panelresizer.x-south.x-handle,
.x-panelresizer.x-southeast.x-handle,
.x-panelresizer.x-southwest.x-handle {
    height: 10px;
}
.x-big .x-panelresizer.x-north.x-handle,
.x-big .x-panelresizer.x-northeast.x-handle,
.x-big .x-panelresizer.x-northwest.x-handle,
.x-big .x-panelresizer.x-south.x-handle,
.x-big .x-panelresizer.x-southeast.x-handle,
.x-big .x-panelresizer.x-southwest.x-handle {
    height: 15px;
}
.x-panelresizer.x-north.x-splitter,
.x-panelresizer.x-northeast.x-splitter,
.x-panelresizer.x-northwest.x-splitter,
.x-panelresizer.x-south.x-splitter,
.x-panelresizer.x-southeast.x-splitter,
.x-panelresizer.x-southwest.x-splitter {
    height: 10px;
}
.x-big .x-panelresizer.x-north.x-splitter,
.x-big .x-panelresizer.x-northeast.x-splitter,
.x-big .x-panelresizer.x-northwest.x-splitter,
.x-big .x-panelresizer.x-south.x-splitter,
.x-big .x-panelresizer.x-southeast.x-splitter,
.x-big .x-panelresizer.x-southwest.x-splitter {
    height: 15px;
}
.x-panelresizer.x-east.x-handle,
.x-panelresizer.x-northeast.x-handle,
.x-panelresizer.x-northwest.x-handle,
.x-panelresizer.x-southeast.x-handle,
.x-panelresizer.x-southwest.x-handle,
.x-panelresizer.x-west.x-handle {
    width: 10px;
}
.x-big .x-panelresizer.x-east.x-handle,
.x-big .x-panelresizer.x-northeast.x-handle,
.x-big .x-panelresizer.x-northwest.x-handle,
.x-big .x-panelresizer.x-southeast.x-handle,
.x-big .x-panelresizer.x-southwest.x-handle,
.x-big .x-panelresizer.x-west.x-handle {
    width: 15px;
}
.x-panelresizer.x-east.x-splitter,
.x-panelresizer.x-northeast.x-splitter,
.x-panelresizer.x-northwest.x-splitter,
.x-panelresizer.x-southeast.x-splitter,
.x-panelresizer.x-southwest.x-splitter,
.x-panelresizer.x-west.x-splitter {
    width: 10px;
}
.x-big .x-panelresizer.x-east.x-splitter,
.x-big .x-panelresizer.x-northeast.x-splitter,
.x-big .x-panelresizer.x-northwest.x-splitter,
.x-big .x-panelresizer.x-southeast.x-splitter,
.x-big .x-panelresizer.x-southwest.x-splitter,
.x-big .x-panelresizer.x-west.x-splitter {
    width: 15px;
}
.x-panelresizer.x-handle {
    background-color: transparent;
}
.x-panelresizer.x-splitter {
    background-color: #e1e1e1;
    background-color: var(--faded-color);
}
.x-panelresizer-proxy.x-handle {
    border: 1px dashed #0a6ebd;
}
.x-panelresizer-proxy.x-splitter {
    background-color: #b0b0b0;
}
.x-panelresizer-proxy.x-splitter.x-horizontal {
    width: 10px;
}
.x-panelresizer-proxy.x-splitter.x-vertical {
    height: 10px;
}
.x-panel.x-split-north {
    padding-top: 10px;
}
.x-big .x-panel.x-split-north {
    padding-top: 15px;
}
.x-panel.x-split-east {
    padding-right: 10px;
}
.x-big .x-panel.x-split-east {
    padding-right: 15px;
}
.x-panel.x-split-south {
    padding-bottom: 10px;
}
.x-big .x-panel.x-split-south {
    padding-bottom: 15px;
}
.x-panel.x-split-west {
    padding-left: 10px;
}
.x-big .x-panel.x-split-west {
    padding-left: 15px;
}
.x-scrollbar-corner {
    background-color: #f1f1f1;
}
.x-scrolloverlay {
    background-color: #000;
    border-radius: 9px;
    margin: 2px;
    opacity: 0.5;
}
.x-scrolloverlay.x-vertical {
    min-height: 24px;
    width: 6px;
}
.x-scrolloverlay.x-horizontal {
    height: 6px;
    min-width: 24px;
}
.x-scrolloverlay-ios {
    background-color: #606060;
}
.x-scrolloverlay-ios.x-vertical {
    min-height: 36px;
    width: 3px;
}
.x-scrolloverlay-ios.x-horizontal {
    height: 3px;
    min-width: 36px;
}
.x-scrolloverlay-android {
    background-color: grey;
    border-radius: 0;
    margin: 0;
}
.x-scrolloverlay-android.x-vertical {
    min-height: 8px;
    width: 4px;
}
.x-scrolloverlay-android.x-horizontal {
    height: 4px;
    min-width: 8px;
}
.x-tab {
    border-radius: 0;
    color: hsla(0, 0%, 100%, 0.7);
    font:
        600 14px/16px Roboto,
        sans-serif;
}
.x-big .x-tab {
    border-radius: 0;
    font-size: 14px;
    line-height: 24px;
}
.x-tab .x-inner-el {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
    border-radius: 0;
    border-width: 0;
    padding: 16px 6px;
}
.x-big .x-tab .x-inner-el {
    border-radius: 0;
    padding: 20px 4px;
}
.x-tab.x-has-text .x-inner-el {
    padding: 16px 6px;
}
.x-big .x-tab.x-has-text .x-inner-el {
    padding: 20px 4px;
}
.x-tab .x-icon-el {
    color: hsla(0, 0%, 100%, 0.7);
    height: 16px;
    width: 16px;
}
.x-big .x-tab .x-icon-el {
    height: 24px;
    width: 24px;
}
.x-tab .x-icon-el:before {
    font-size: 16px;
}
.x-big .x-tab .x-icon-el:before {
    font-size: 24px;
}
.x-big .x-tab.x-has-text.x-icon-align-left .x-icon-el,
.x-tab.x-has-text.x-icon-align-left .x-icon-el {
    margin-right: 4px;
}
.x-big .x-tab.x-has-text.x-icon-align-right .x-icon-el,
.x-tab.x-has-text.x-icon-align-right .x-icon-el {
    margin-left: 4px;
}
.x-tab.x-has-text.x-icon-align-top .x-icon-el {
    margin-bottom: 6px;
}
.x-big .x-tab.x-has-text.x-icon-align-top .x-icon-el {
    margin-bottom: 8px;
}
.x-tab.x-has-text.x-icon-align-bottom .x-icon-el {
    margin-top: 6px;
}
.x-big .x-tab.x-has-text.x-icon-align-bottom .x-icon-el {
    margin-top: 8px;
}
.x-tab .x-arrow-el {
    color: hsla(0, 0%, 100%, 0.7);
    height: 16px;
    width: 16px;
}
.x-big .x-tab .x-arrow-el {
    height: 24px;
    width: 24px;
}
.x-tab .x-arrow-el:before {
    font-size: 16px;
}
.x-big .x-tab .x-arrow-el:before {
    font-size: 24px;
}
.x-tab.x-arrow-align-right .x-arrow-el {
    margin-left: 5px;
}
.x-big .x-tab.x-arrow-align-right .x-arrow-el {
    margin-left: 8px;
}
.x-tab .x-text-el {
    min-height: 16px;
}
.x-big .x-tab .x-text-el {
    min-height: 24px;
}
.x-tab .x-badge-el {
    background-color: #ff9800;
    background-color: var(--accent-color);
    background-image: none;
    border-color: transparent;
    border-radius: 32px;
    color: #222;
    color: var(--accent-foreground-color);
    font:
        400 12px/16px Roboto,
        sans-serif;
    max-width: 75%;
    min-width: 24px;
    padding: 4px;
    right: 4px;
    top: 2px;
}
.x-big .x-tab .x-badge-el {
    font-size: 13px;
    line-height: 16px;
}
.x-tab.x-hovered {
    color: hsla(0, 0%, 100%, 0.7);
}
.x-tab.x-hovered .x-inner-el {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
}
.x-tab.x-hovered .x-arrow-el,
.x-tab.x-hovered .x-icon-el {
    color: hsla(0, 0%, 100%, 0.7);
}
.x-tab:before {
    border-radius: 0;
}
.x-tab.x-pressed,
.x-tab.x-pressing {
    color: hsla(0, 0%, 100%, 0.7);
}
.x-keyboard-mode .x-tab.x-pressed .x-inner-el,
.x-keyboard-mode .x-tab.x-pressing .x-inner-el,
.x-tab.x-pressed .x-inner-el,
.x-tab.x-pressing .x-inner-el {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
}
.x-keyboard-mode .x-tab.x-focused,
.x-tab.x-pressed .x-arrow-el,
.x-tab.x-pressed .x-icon-el,
.x-tab.x-pressing .x-arrow-el,
.x-tab.x-pressing .x-icon-el {
    color: hsla(0, 0%, 100%, 0.7);
}
.x-keyboard-mode .x-tab.x-focused .x-inner-el {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
}
.x-keyboard-mode .x-tab.x-focused .x-arrow-el,
.x-keyboard-mode .x-tab.x-focused .x-icon-el {
    color: hsla(0, 0%, 100%, 0.7);
}
.x-big .x-keyboard-mode .x-tab.x-focused:after,
.x-keyboard-mode .x-tab.x-focused:after {
    border-radius: 0;
}
.x-tab.x-disabled {
    opacity: 1;
}
.x-tab .x-close-icon-el,
.x-tab.x-disabled,
.x-tab.x-disabled .x-arrow-el,
.x-tab.x-disabled .x-icon-el {
    color: hsla(0, 0%, 100%, 0.7);
}
.x-tab .x-close-icon-el {
    border-radius: 3px;
    height: 12px;
    margin: 7px;
    width: 12px;
}
.x-big .x-tab .x-close-icon-el {
    height: 18px;
    width: 18px;
}
.x-tab .x-close-icon-el:before {
    content: "clear";
    font-size: 18px;
}
.x-big .x-tab .x-close-icon-el:before {
    font-size: 18px;
}
.x-tab .x-close-icon-el:hover {
    color: #fff;
    color: var(--base-foreground-color);
}
.x-tab.x-active {
    color: #fff;
}
.x-tab.x-active .x-inner-el {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
}
.x-tab.x-active .x-arrow-el,
.x-tab.x-active .x-icon-el {
    color: #fff;
}
.x-tab.x-active .x-active-indicator-el {
    background-color: #ffe0b2;
    background-color: var(--accent-light-color);
    height: 4px;
}
.x-tab.x-active.x-focused,
.x-tab.x-active.x-focused .x-arrow-el,
.x-tab.x-active.x-focused .x-icon-el {
    color: #fff;
}
.x-keyboard-mode .x-tab.x-active.x-focused:after {
    border-color: #d3eafd;
}
.x-tab.x-tab-rotate-left .x-text-el {
    margin-right: 4px;
}
.x-tab.x-tab-position-left.x-active .x-active-indicator-el,
.x-tab.x-tab-position-right.x-active .x-active-indicator-el {
    width: 4px;
}
.x-tab.x-has-text.x-tab-rotate-left .x-inner-el,
.x-tab.x-has-text.x-tab-rotate-right .x-inner-el {
    padding: 8px 16px;
}
.x-tab.x-has-text.x-tab-rotate-left .x-text-el,
.x-tab.x-has-text.x-tab-rotate-right .x-text-el {
    min-width: 16px;
}
.x-tabbar {
    background-color: #2196f3;
    background-color: var(--base-color);
    background-image: none;
    border-color: #e1e1e1;
    border-color: var(--faded-color);
}
.x-tabbar .x-title {
    color: #fff;
}
.x-tabbar-body-el {
    min-height: 0;
    padding: 0;
}
.x-big .x-tabbar-body-el {
    min-height: 0;
}
.x-strip-el {
    background-color: #2196f3;
    background-color: var(--base-color);
}
:root {
    --dark-mode: false;
    --base-color: #2196f3;
    --base-highlight-color: #64b5f6;
    --base-light-color: #bbdefb;
    --base-dark-color: #1976d2;
    --base-pressed-color: #6ab8f7;
    --base-focused-color: #42a5f5;
    --base-invisible-color: rgba(33, 150, 243, 0);
    --base-foreground-color: #fff;
    --accent-color: #ff9800;
    --accent-light-color: #ffe0b2;
    --accent-dark-color: #f57c00;
    --accent-pressed-color: #ffb74d;
    --accent-invisible-color: rgba(255, 152, 0, 0);
    --accent-foreground-color: #222;
    --confirm-color: #7cb342;
    --confirm-pressed-color: #a2cc75;
    --alert-color: #c62828;
    --alert-pressed-color: #de5c5c;
    --color: #111;
    --reverse-color: #fff;
    --highlight-color: hsla(0, 0%, 7%, 0.54);
    --disabled-color: hsla(0, 0%, 7%, 0.38);
    --reverse-disabled-color: hsla(0, 0%, 100%, 0.38);
    --divider-color: #e2e2e2;
    --selected-background-color: #e0e0e0;
    --hovered-background-color: #eee;
    --header-background-color: #f5f5f5;
    --faded-color: #e1e1e1;
    --background-color: #fafafa;
    --alt-background-color: #f5f5f5;
    --reverse-background-color: #303030;
    --reverse-alt-background-color: #3a3a3a;
    --overlay-color: rgba(0, 0, 0, 0.03);
    --content-padding: 16px;
    --listitem-selected-background-color: #e0e0e0;
    --reverse-border-color: #e0e0e0;
    --reverse-alt-border-color: #e0e0e0;
}
.md-icon-3d-rotation:before {
    content: "3d_rotation";
}
.md-icon-accessibility:before {
    content: "accessibility";
}
.md-icon-accessible:before {
    content: "accessible";
}
.md-icon-account-balance:before {
    content: "account_balance";
}
.md-icon-account-balance-wallet:before {
    content: "account_balance_wallet";
}
.md-icon-account-box:before {
    content: "account_box";
}
.md-icon-account-circle:before {
    content: "account_circle";
}
.md-icon-add-shopping-cart:before {
    content: "add_shopping_cart";
}
.md-icon-alarm:before {
    content: "alarm";
}
.md-icon-alarm-add:before {
    content: "alarm_add";
}
.md-icon-alarm-off:before {
    content: "alarm_off";
}
.md-icon-alarm-on:before {
    content: "alarm_on";
}
.md-icon-all-out:before {
    content: "all_out";
}
.md-icon-android:before {
    content: "android";
}
.md-icon-announcement:before {
    content: "announcement";
}
.md-icon-aspect-ratio:before {
    content: "aspect_ratio";
}
.md-icon-assessment:before {
    content: "assessment";
}
.md-icon-assignment:before {
    content: "assignment";
}
.md-icon-assignment-ind:before {
    content: "assignment_ind";
}
.md-icon-assignment-late:before {
    content: "assignment_late";
}
.md-icon-assignment-return:before {
    content: "assignment_return";
}
.md-icon-assignment-returned:before {
    content: "assignment_returned";
}
.md-icon-assignment-turned-in:before {
    content: "assignment_turned_in";
}
.md-icon-autorenew:before {
    content: "autorenew";
}
.md-icon-backup:before {
    content: "backup";
}
.md-icon-book:before {
    content: "book";
}
.md-icon-bookmark:before {
    content: "bookmark";
}
.md-icon-bookmark-border:before {
    content: "bookmark_border";
}
.md-icon-bug-report:before {
    content: "bug_report";
}
.md-icon-build:before {
    content: "build";
}
.md-icon-cached:before {
    content: "cached";
}
.md-icon-camera-enhance:before {
    content: "camera_enhance";
}
.md-icon-card-giftcard:before {
    content: "card_giftcard";
}
.md-icon-card-membership:before {
    content: "card_membership";
}
.md-icon-card-travel:before {
    content: "card_travel";
}
.md-icon-change-history:before {
    content: "change_history";
}
.md-icon-check-circle:before {
    content: "check_circle";
}
.md-icon-chrome-reader-mode:before {
    content: "chrome_reader_mode";
}
.md-icon-class:before {
    content: "class";
}
.md-icon-code:before {
    content: "code";
}
.md-icon-compare-arrows:before {
    content: "compare_arrows";
}
.md-icon-copyright:before {
    content: "copyright";
}
.md-icon-credit-card:before {
    content: "credit_card";
}
.md-icon-dashboard:before {
    content: "dashboard";
}
.md-icon-date-range:before {
    content: "date_range";
}
.md-icon-delete:before {
    content: "delete";
}
.md-icon-delete-forever:before {
    content: "delete_forever";
}
.md-icon-description:before {
    content: "description";
}
.md-icon-dns:before {
    content: "dns";
}
.md-icon-done:before {
    content: "done";
}
.md-icon-done-all:before {
    content: "done_all";
}