.app-bar-buttons .app-btn-more::before,
.app-collapsible-toggle-button::before,
.dv-action-see-all .app-btn-prev::before,
.dv-action-see-all .app-btn-next::before,
[data-action-path="wizard-prev"]::before,
[data-action-path="wizard-next"]::before,
.app-caret::before,
.app-field-object-ref::before,
.ui-btn.app-has-children::after,
.app-echo-toolbar h3::after,
.app-bar-actions > h3::after,
.app-btn-options::after,
[data-input].app-has-focus .app-control-helper ul li.app-focus::after,
[data-input] .app-control-toolbar .app-has-droparrow::after,
[data-draggable="grid-header-field"] i.app-field-menu::after {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 24px;
    vertical-align: middle;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
    position: absolute !important;
    left: 0;
    top: 50%;
    margin-top: -12px;
    width: 18px;
    display: inline-block !important;
    content: 'chevron_right';
    text-indent: -3px;
}


.material-symbol:after,
.material-symbol .symbol {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 20px;
    vertical-align: middle;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
    position: absolute !important;
    left: 50%;
    top: 50%;
    margin-top: -10px;
    margin-left: -10px;
    width: 20px;
    display: inline-block !important;
    text-indent: 0;
    color: #535353;
}

.app-theme-dark .material-symbol .symbol {
    color: #bbb;
}

.app-page-loading {
    padding: 5px 1em 5px 16px;
    /*font-style: italic;*/
    font-weight: normal;
    font-size: 16px;
    line-height: 36px;
    height: 36px;
    vertical-align: central;
    text-transform: lowercase;
}

.ui-listview > .ui-li-divider,
.ui-listview .ui-btn {
    padding-left: 16px;
}

strong, b {
    font-weight: 600;
}

.app-screen-generic,
.app-glass-pane {
    position: absolute;
    touch-action: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    opacity: 0;
    background-color: #000;
}

.app-screen-generic {
    background-color: transparent;
    opacity: 1;
    cursor: no-drop;
    z-index: 9998;
}

    .app-screen-generic .app-focus-frame {
        cursor: copy;
    }

.app-glass-pane-reject {
    opacity: .3;
}

.ui-li-count {
    font-weight: normal;
}

.ui-btn, label.ui-btn,
.ui-bar-a,
.ui-page-theme-a .ui-bar-inherit,
html .ui-bar-a .ui-bar-inherit,
html .ui-body-a .ui-bar-inherit,
/*html body .ui-group-theme-a .ui-bar-inherit,*/
.ui-page-theme-a a,
html .ui-bar-a a,
html .ui-body-a a,
/*html body .ui-group-theme-a a,*/
.ui-listview > .ui-li-divider,
.ui-popup h1 {
    font-weight: 600;
}

.app-font-tiny .ui-btn, label.ui-btn,
.app-font-tiny .ui-bar-a,
.app-font-tiny .ui-page-theme-a .ui-bar-inherit,
html .app-font-tiny .ui-bar-a .ui-bar-inherit,
html .app-font-tiny .ui-body-a .ui-bar-inherit,
/*html body.app-font-tiny .ui-group-theme-a .ui-bar-inherit,*/
.app-font-tiny .ui-page-theme-a a,
html .app-font-tiny .ui-bar-a a,
html .app-font-tiny .ui-body-a a,
/*html body.app-font-tiny .ui-group-theme-a a,*/
.app-font-tiny .ui-listview > .ui-li-divider,
.app-font-tiny .ui-li-count,
.app-font-tiny .ui-popup h1 {
    font-weight: 500;
}

.ui-panel .ui-listview > .ui-li-static,
.ui-panel .ui-listview > .ui-li-divider,
.ui-panel .ui-listview > li > .ui-btn {
    border-top-width: 0;
}

    .ui-panel .ui-listview > .ui-li-divider.ui-last-child {
        border-bottom-width: 0;
    }

.ui-page .ui-content:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 57px;
}

.app-android:not(.app-has-sidebar-left) .ui-content::before {
    height: 58px;
}

.app-content-stub-hidden .ui-content:before {
    display: none;
}

.app-clear-fix {
    height: 0;
    clear: both;
}

.app-scrollbar-info {
    width: 100px;
    height: 100px;
    overflow: auto;
    position: absolute;
    top: -200px;
    left: -200px;
    -ms-overflow-style: none;
    z-index: 4000;
}

    .app-scrollbar-info::-webkit-scrollbar {
        display: none;
    }

    .app-scrollbar-info div {
        width: 200px;
        height: 200px;
    }

.ui-header.ui-header-fixed.app-bar-toolbar .ui-title {
    margin-left: 50%;
    width: 0;
    min-width: 0;
    max-width: 0;
    margin-right: 50%;
    text-align: center;
    vertical-align: middle;
    line-height: 56px;
}


.app-logo {
    background-size: 65px auto;
    background-position: 0 7px;
    background-repeat: no-repeat;
    user-select: none;
}

.app-bar-toolbar .app-logo,
.app-kiosk .app-logo {
    display: inline-block;
    position: absolute;
    left: 56px;
    font-weight: normal;
    height: 56px;
    line-height: 56px;
    font-size: 14px;
    text-transform: uppercase;
    color: #000;
    font-weight: 600;
    padding: 0 8px 0 0;
    cursor: default;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-bar-toolbar .app-logo {
    padding-right: 0;
}

.ui-panel-inner .ui-listview > .ui-li-divider.app-list-instruction.app-logo {
    font-size: 14px;
    color: #333;
    padding-top: 0;
    padding-bottom: 0;
    text-transform: uppercase;
    font-weight: 600;
    background-size: 65px auto;
    background-position: 16px center;
    background-repeat: no-repeat;
    height: 56px;
    line-height: 56px;
}

.ui-panel-inner .ui-listview > .ui-li-divider.app-list-instruction.app-logo,
.app-density-condensed .app-bar-toolbar .app-logo {
    font-size: 12px;
}

.app-has-back.app-bar-toolbar .app-logo {
    display: none;
}

.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-bar-toolbar .app-logo {
    max-width: 200px;
}

.app-has-minisidebar-left .app-bar-toolbar .app-logo {
    left: 73px;
}

.ui-corner-all {
    background-clip: border-box;
}

/*a {
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

* {
    text-shadow: none !important;
}*/

/*.ui-panel-animate {
    transition: transform 200ms ease-out;
}
*/
.ui-li-thumb {
    left: 16px !important;
    top: 50% !important;
    margin-top: -40px;
}

.ui-panel-inner .ui-listview {
    overflow: hidden;
}

.ui-listview > .ui-li-has-thumb > .ui-btn,
.ui-listview > .ui-li-static.ui-li-has-thumb {
    padding-left: 104px;
}

.app-density-compact .ui-listview > .ui-li-has-thumb > .ui-btn,
.app-density-compact .ui-listview > .ui-li-static.ui-li-has-thumb {
    padding-left: 96px;
}


.app-density-condensed .ui-listview > .ui-li-has-thumb > .ui-btn,
.app-density-condensed .ui-listview > .ui-li-static.ui-li-has-thumb {
    padding-left: 84px;
}

.app-thumb-person .ui-li-thumb {
    border-radius: 2.5em;
}

body,
input,
select,
textarea,
button,
.ui-btn {
    font-family: -apple-system, "Segoe UI", sans-serif, "Segoe MDL2 Assets";
    font-size: 1em;
}

.app-android,
.app-android input,
.app-android select,
.app-android textarea,
.app-android button,
.app-android .ui-btn {
    font-family: "Google Sans", Roboto, "Segoe UI", sans-serif, "Segoe MDL2 Assets";
}

.ui-btn.ui-btn-icon-notext {
    overflow: visible;
}

.ui-btn .app-event {
    margin: -1px .25em -1px -.25em;
    font-size: 18px;
    vertical-align: text-bottom;
    height: 16px;
    width: 16px;
}

.ui-listview .ui-btn .app-event {
    position: absolute;
    right: 6px;
    top: 50%;
    margin-top: -8px;
}

.app-popup-icon-left .ui-listview .ui-btn .app-event {
    left: 10px;
    right: auto;
}

textarea {
    -webkit-appearance: none;
}

.ui-shadow-inset,
.app-wrapper .ui-btn:focus,
.app-wrapper .ui-focus {
    box-shadow: none;
}

.ui-listview > .ui-li-divider {
    padding-top: 5px;
    padding-bottom: 7px;
}

.app-wrapper .ui-listview > li p {
    font-size: .9em;
    margin-top: .3em;
    margin-bottom: .3em;
    line-height: normal;
}

.app-listview {
    background-color: #fff;
}

.app-listview-stub {
    display: block !important;
    background-color: transparent !important;
}

/* checkbox space in lists/cards */
.app-listview.app-onecolumnview.app-listview-multiselect .ui-btn,
.app-listview.app-cardcolumn.app-listview-multiselect .ui-btn,
.app-listview.app-cardview.app-listview-multiselect .ui-btn {
    padding-left: 48px;
}

.app-listview.app-onecolumnview.app-listview-multiselect > .ui-li-has-thumb > .ui-btn,
.app-listview.app-cardcolumn.app-listview-multiselect > .ui-li-has-thumb > .ui-btn,
.app-listview.app-cardview.app-listview-multiselect > .ui-li-has-thumb > .ui-btn {
    padding-left: 140px;
}

.app-density-compact .app-listview.app-onecolumnview.app-listview-multiselect > .ui-li-has-thumb > .ui-btn,
.app-density-compact .app-listview.app-cardcolumn.app-listview-multiselect > .ui-li-has-thumb > .ui-btn,
.app-density-compact .app-listview.app-cardview.app-listview-multiselect > .ui-li-has-thumb > .ui-btn {
    padding-left: 129px;
}

.app-density-condensed .app-listview.app-onecolumnview.app-listview-multiselect > .ui-li-has-thumb > .ui-btn,
.app-density-condensed .app-listview.app-cardcolumn.app-listview-multiselect > .ui-li-has-thumb > .ui-btn,
.app-density-condensed .app-listview.app-cardview.app-listview-multiselect > .ui-li-has-thumb > .ui-btn {
    padding-left: 118px;
}

.app-listview.app-onecolumnview.app-listview-multiselect .ui-li-thumb,
.app-listview.app-cardcolumn.app-listview-multiselect .ui-li-thumb,
.app-listview.app-cardview.app-listview-multiselect .ui-li-thumb {
    left: 48px !important;
}

/* status space for lists/cards*/
.app-listview.app-onecolumnview.app-listview-inlineediting .ui-btn,
.app-listview.app-cardcolumn.app-listview-inlineediting .ui-btn,
.app-listview.app-cardview.app-listview-inlineediting .ui-btn {
    padding-left: 48px;
}

.app-listview.app-onecolumnview.app-listview-inlineediting > .ui-li-has-thumb > .ui-btn,
.app-listview.app-cardcolumn.app-listview-inlineediting > .ui-li-has-thumb > .ui-btn,
.app-listview.app-cardview.app-listview-inlineediting > .ui-li-has-thumb > .ui-btn {
    padding-left: 140px;
}

.app-density-compact .app-listview.app-onecolumnview.app-listview-inlineediting > .ui-li-has-thumb > .ui-btn,
.app-density-compact .app-listview.app-cardcolumn.app-listview-inlineediting > .ui-li-has-thumb > .ui-btn,
.app-density-compact .app-listview.app-cardview.app-listview-inlineediting > .ui-li-has-thumb > .ui-btn {
    padding-left: 129px;
}

.app-density-condensed .app-listview.app-onecolumnview.app-listview-inlineediting > .ui-li-has-thumb > .ui-btn,
.app-density-condensed .app-listview.app-cardcolumn.app-listview-inlineediting > .ui-li-has-thumb > .ui-btn,
.app-density-condensed .app-listview.app-cardview.app-listview-inlineediting > .ui-li-has-thumb > .ui-btn {
    padding-left: 118px;
}

.app-listview.app-onecolumnview.app-listview-inlineediting .ui-li-thumb,
.app-listview.app-cardcolumn.app-listview-inlineediting .ui-li-thumb,
.app-listview.app-cardview.app-listview-inlineediting .ui-li-thumb {
    left: 48px !important;
}

/* checkbox+status space for lists/cards*/
.app-listview.app-onecolumnview.app-listview-inlineediting.app-listview-multiselect .ui-btn,
.app-listview.app-cardcolumn.app-listview-inlineediting.app-listview-multiselect .ui-btn,
.app-listview.app-cardview.app-listview-inlineediting.app-listview-multiselect .ui-btn {
    padding-left: 72px;
}

.app-listview.app-onecolumnview.app-listview-inlineediting.app-listview-multiselect > .ui-li-has-thumb > .ui-btn,
.app-listview.app-cardcolumn.app-listview-inlineediting > .ui-li-has-thumb > .ui-btn,
.app-listview.app-cardview.app-listview-inlineediting.app-listview-multiselect > .ui-li-has-thumb > .ui-btn {
    padding-left: 164px;
}

.app-density-compact .app-listview.app-onecolumnview.app-listview-inlineediting.app-listview-multiselect > .ui-li-has-thumb > .ui-btn,
.app-density-compact .app-listview.app-cardcolumn.app-listview-inlineediting.app-listview-multiselect > .ui-li-has-thumb > .ui-btn,
.app-density-compact .app-listview.app-cardview.app-listview-inlineediting.app-listview-multiselect > .ui-li-has-thumb > .ui-btn {
    padding-left: 153px;
}

.app-density-condensed .app-listview.app-onecolumnview.app-listview-inlineediting.app-listview-multiselect > .ui-li-has-thumb > .ui-btn,
.app-density-condensed .app-listview.app-cardcolumn.app-listview-inlineediting.app-listview-multiselect > .ui-li-has-thumb > .ui-btn,
.app-density-condensed .app-listview.app-cardview.app-listview-inlineediting.app-listview-multiselect > .ui-li-has-thumb > .ui-btn {
    padding-left: 142px;
}

.app-listview.app-onecolumnview.app-listview-inlineediting.app-listview-multiselect .ui-li-thumb,
.app-listview.app-cardcolumn.app-listview-inlineediting.app-listview-multiselect .ui-li-thumb,
.app-listview.app-cardview.app-listview-inlineediting.app-listview-multiselect .ui-li-thumb {
    left: 72px !important;
}


.app-listview li .ui-btn:not(.ui-btn-icon-notext):not(.ui-mini) {
    line-height: normal;
    padding-top: 11px;
    padding-bottom: 11px;
}

html {
    touch-action: none;
    -ms-overflow-style: none;
}

.app-wrapper, .app-echo-inner, .ui-panel-inner {
    outline: none;
}

.app-wrapper, .ui-panel-inner {
    touch-action: pan-y;
}



body:not(.app-desktop) {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
}

/*.app-grid {
    transform: translate3d(0,0,0);
}*/

body {
    overflow: hidden !important;
}

.app-wrapper {
    position: absolute;
    z-index: 1;
    top: 57px;
    bottom: 0;
    left: 0;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    overflow-y: auto;
    overflow-x: hidden;
    /*border:solid 1px red;*/
    scrollbar-width: none;
}

    .app-wrapper::-webkit-scrollbar,
    .app-page-modal-glass-pane .app-inner::-webkit-scrollbar {
        display: none;
        -webkit-appearance: none;
        width: 0;
    }

.app-vscrollbar {
    position: absolute;
    top: 0;
    height: 1px;
    padding: 0;
    margin: 0;
    margin-right: 2px;
    z-index: 3;
    background-color: transparent;
    opacity: 0;
    width: 3px;
    transition: opacity 750ms ease-in;
    overflow: hidden;
    /*border-left: solid 1px transparent;*/
    cursor: default;
    user-select: none;
}


    .app-vscrollbar .app-vscrollbar-handle {
        position: absolute;
        padding: 0;
        margin: 0;
        left: 0;
        top: 0;
        width: 3px;
        height: 1px;
        transition: top 0 linear;
    }

.app-desktop .app-vscrollbar {
    width: 7px;
    background-color: #e9e9e9;
    margin-right: 0;
}

    .app-desktop .app-vscrollbar .app-vscrollbar-handle {
        width: 7px;
    }

.app-desktop.app-scrollbars-wide .app-vscrollbar {
    width: 9px;
}

    .app-desktop.app-scrollbars-wide .app-vscrollbar .app-vscrollbar-handle {
        width: 9px;
    }

.app-desktop .app-vscrollbar {
    transition: none;
    /* enabling of transitions on the scrollbar will affect negatively the page transitions */
    /*transition: opacity 500ms ease;
    transition-delay: 250ms;*/
}

.app-desktop .ui-page .app-wrapper + .app-vscrollbar {
    opacity: 1;
}

.app-desktop .app-vscrollbar-handle:hover,
.app-desktop .app-hscrollbar-handle:hover,
.app-desktop .app-vscrollbar:hover .app-vscrollbar-handle,
.app-desktop .app-hscrollbar2:hover .app-hscrollbar-handle {
    -webkit-box-shadow: inset 1px 1px 0px rgba(0,0,0,.10), inset 1px 1px 0px rgba(0,0,0,.10);
}

/*.app-scroller {
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    width: 100%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}*/

.app-wrapper > * {
    margin: 0 !important;
}

.app-page-content {
    padding: 1em 1em 1em 16px;
    background-color: #fff;
}

    .app-page-content.app-display-flow {
        padding: 0 0 1rem 0;
    }


.ui-panel-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 0;
    /*-webkit-overflow-scrolling: touch;*/
    -ms-overflow-style: none;
    overflow-x: hidden;
}

/*body:not(.app-ms-tablet) .app-wrapper, body:not(.app-ms-tablet) .ui-panel-inner, body:not(.app-ms-tablet) .app-echo-inner {
    -ms-overflow-style: none;
}*/


/*.app-ms-tablet .ui-panel-inner .ui-btn-icon-right::after
{
    right:32px;
}*/
/*.ui-panel-inner .app-scroller {
        margin: -1em;
    }*/

li.app-info, li.app-copy {
    padding-top: .75em !important;
    padding-bottom: .75em !important;
    text-shadow: none;
}

    li.app-info .appname {
        color: #38c;
        display: inline-block;
        white-space: nowrap;
        font-size: 1em;
        text-transform: uppercase;
    }

    li.app-info p {
        white-space: normal;
        font-size: 1em;
        margin-bottom: 0 !important;
    }

li.app-copy {
    border-bottom-width: 0 !important;
    border-top-width: 1px !important;
    background-color: transparent !important;
}

li.app-depth1 > * {
    padding-left: 16px !important;
}

li.app-depth2 > * {
    padding-left: 2.5em !important;
}

li.app-depth3 > * {
    padding-left: 5em !important;
}

li.app-depth4 > * {
    padding-left: 7.5em !important;
}

li.app-depth5 > * {
    padding-left: 10em !important;
}

.level1 .menu-item .ui-btn, .level2 .menu-item .ui-btn, .level3 .menu-item .ui-btn, .menu-item .level4 .ui-btn, .menu-item .level5 .ui-btn {
    padding-left: 2em;
}

.app-text-collapsible {
    max-height: 240px;
    overflow: hidden;
    margin-bottom: 0;
    padding: 0 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis;
}

    .app-text-collapsible + .app-btn-toggle {
        min-height: 0 !important;
        font-weight: normal;
    }

.app-listview.app-grid .dv-item .ui-btn .app-text-collapsible + .app-btn-toggle {
    padding: 0 !important;
}

.ui-btn-active .app-text-collapsible + .app-btn-toggle {
    background-color: transparent;
    border-color: transparent;
}

.app-text-collapsible.app-text-expanded {
    max-height: none;
}

.app-null {
    text-transform: lowercase;
}

.app-grid .ui-btn .app-null,
.app-grid .app-group .app-null {
    visibility: hidden;
}

.app-grid.app-grid-vert-lines-none .ui-btn .app-null,
.app-grid.app-grid-vert-lines-none .app-group .app-null,
.app-grid.app-grid-horiz-lines-none .ui-btn .app-null,
.app-grid.app-grid-horiz-lines-none .app-group .app-null {
    visibility: visible;
}


.ui-btn .app-null, .app-group .app-null {
    color: #808080;
}

.app-item-desc {
    line-height: normal;
    font-weight: normal;
}

    .app-item-desc.app-item-desc-before {
        display: none;
    }

.app-labelsinlist-displayedabove .app-item-desc.app-item-desc-before {
    display: block;
}

.app-labelsinlist-displayedabove .app-item-desc.app-item-desc-after {
    display: none;
}

.app-listview.ui-listview li .app-item-desc {
    margin: 0;
    display: inline-block;
    padding: 0 1em 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ui-listview-inset {
    margin: 1em !important;
}

.app-listview.ui-listview.app-listview-static li .app-item-desc {
    display: block;
}

.app-field-label-before, .app-field-label-after {
    display: none;
    font-size: 12px;
    color: #999;
    margin-top: 0;
    max-width: 15em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-field-label-after {
    display: block;
    margin-top: 0;
}

.app-field-label-before {
    margin-bottom: 0;
}

body.app-labelsinlist-displayedabove .app-field-label-before {
    display: block;
}

body.app-labelsinlist-displayedabove .app-field-label-after {
    display: none;
}



.app-field-label-other {
    padding-right: .25em;
    color: #999;
}

    .app-field-label-other:after {
        content: ":";
    }

.app-popup .app-item-desc,
.ui-panel-position-left .app-item-desc,
.ui-panel-position-right .app-item-desc,
.app-sidebar .app-item-desc,
.app-listview-static .ui-btn .app-item-desc {
    color: #999;
    margin: 0;
}

.app-presenter {
    background-color: #fff;
}

.app-presenter-instruction {
    padding: 1em 1.14em .4em 1.14em;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
}



.ui-listview > .ui-li-divider.app-list-instruction, .app-presenter-instruction {
    background-color: #f1f1f1;
    color: #808080;
    font-weight: normal;
    white-space: normal;
    border-top-width: 0;
    padding-top: 1em;
    text-shadow: none !important;
    cursor: auto;
    width: auto !important;
}


.ui-panel-inner .ui-listview > .ui-li-divider.app-list-instruction:not(.ui-first-child),
.ui-listview.app-listview-static > .ui-li-divider.app-list-instruction:not(.ui-first-child) {
    border-top-width: 1px;
}

.app-image-thumb {
    border: 1px solid #c0c0c0;
    border-width: 1px !important;
    background-color: #fff;
}

.app-btn-float {
    width: 56px;
    height: 56px;
    border-radius: 28px;
    position: fixed;
    z-index: 1003;
    border-width: 0;
    box-shadow: 1px 1px 6px rgba(0,0,0,.30) !important;
}

    .app-btn-float.ui-btn.ui-btn-icon-notext::after {
        /*background-size: 20px;*/
        border-radius: 28px;
        width: 56px;
        height: 56px;
        line-height: 56px;
        vertical-align: middle;
        margin-left: -28px;
        margin-top: -28px;
        border-color: transparent !important;
        color: #fff;
    }

    .app-btn-float.ui-btn.ui-btn-icon-notext.ui-btn-active::after {
        background-color: rgba(0,0,0,0.1) !important;
    }


.app-btn-promo {
    right: 18px;
    bottom: 9px;
}

    .app-btn-promo:after {
        background-color: transparent;
    }

/*.app-has-sidebar-left .app-btn-promo {
    bottom: 57px;
}*/


/*.app-desktop .app-btn-promo {
    right: 27px;
}*/

.app-btn-promo-cancel {
    z-index: 1100;
}

.app-bar-toolbar {
    border-top-width: 0;
    border-bottom-color: #ccc;
    height: 56px;
    top: 0;
    padding: 0;
    position: absolute;
}

    .app-bar-toolbar .ui-title {
        text-shadow: none;
        /*height: 21px;*/
        font-weight: normal;
        line-height: normal;
        /*text-transform: uppercase;*/
        vertical-align: middle;
        font-weight: 600;
    }

    .app-bar-toolbar .ui-btn-icon-notext {
        top: 50%;
        margin-top: -12px;
    }

    .app-bar-toolbar .app-btn, .app-bar-toolbar .app-btn-context {
        border: 0;
        width: 24px;
        height: 24px;
    }

.app-bar-buttons .app-btn-more {
    border-radius: 0;
}

.app-bar {
    border-top: solid 1px #ddd;
    margin: 0;
}

    .app-bar .ui-btn {
        background-color: rgb(241, 241, 241);
        margin: 0 0%;
        text-align: left;
        border-width: 0;
        font-weight: normal;
        padding-left: 3em;
        color: #808080;
        display: block;
    }

    .app-bar .ui-btn-icon-left:after {
        left: 0.75em;
    }

.app-btn-cluster-right .app-btn {
    display: none;
}

.app-bar-heading {
    left: 0;
    top: 0;
    right: 0;
    position: fixed;
    font-size: 14px;
    color: #808080;
    padding: 4px 0.25em 4px 16px;
    font-weight: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-color: #fff;
    z-index: 2;
    /*padding-top: .25em;*/
    /*box-shadow: 0 5px 12px -5px rgba(0,0,0,.6);*/
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.25);
}

body:not(.app-has-sidebar-left) .ui-page:not([data-page-header='false']) .app-bar-heading,
.app-page-modal:not([data-page-header='false']) .app-bar-heading {
    border-top: solid 1px #ddd;
}

.app-bar-heading.app-bar-heading-modal {
    z-index: 1002;
}

.ui-page .app-bar-heading {
    position: absolute;
}

.app-bar-heading .app-bar-label {
    margin: 0;
    font-weight: 600;
    font-size: .75em;
    color: #000;
    max-width: 40%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.app-bar-toolbar .app-btn.app-btn-text {
    width: auto;
    padding-left: 32px;
    text-transform: uppercase;
    line-height: 40px;
    height: 40px;
    margin-top: -20px;
    max-width: 40%;
    overflow: hidden;
    border-radius: 0;
    padding-right: .5em;
    margin-right: -.5em;
}

    .app-bar-toolbar .app-btn.app-btn-text .app-icon {
        left: 4px;
        margin-left: 0;
    }

    .app-bar-toolbar .app-btn.app-btn-text.ui-btn-active {
        background-color: rgba(0,0,0,.05) !important;
    }

/*.dv-load-at-bottom:after, .dv-load-at-top:after, */
.dv-load-at-bottom, .dv-load-at-top {
    text-align: center !important;
    vertical-align: middle;
    padding: 0 !important;
    height: 3em !important;
}

.dv-load-at-top {
    border-top-width: 0 !important;
}

.dv-load-at-bottom {
    border-bottom-width: 0 !important;
}

.app-static-text {
    border-color: transparent !important;
}

.app-static-label {
    text-overflow: ellipsis;
    overflow: hidden;
}

.app-static-text div {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.45em 0.4em;
    color: #808080;
    max-width: 800px;
}

.app-form-page .ui-content {
    padding-top: 0;
}

    /*.app-form-page .ui-content .ui-collapsible-set {
        margin-top: 0;
        margin-bottom: -1px !important;
    }

    .app-form-page .ui-content .ui-collapsible-inset {
        margin-top: 0.5em;
    }

        .app-form-page .ui-content .ui-collapsible-inset .ui-collapsible-heading .ui-btn svg {
            right: 1.25em;
        }*/

    .app-form-page .ui-content .ui-listview-inset {
        margin-top: 1em !important;
        margin-left: 0.75em !important;
        margin-right: 0.75em !important;
    }

.app-popup {
    /*min-width: 280px;*/
    max-width: 500px;
}

    .app-popup .app-popup-text {
        padding: 0 0 .5em 0;
        overflow: auto;
    }

    .app-popup:focus {
        outline: none;
    }

.app-popup-panel {
    border-radius: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}


    .app-popup-panel.app-popup-listview .ui-content {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .app-popup-panel .ui-listview > li > .ui-btn {
        border-top-width: 0;
    }


.app-popup-message {
    background-color: #fff;
    border: 1px solid #CCCCCC;
    z-index: 1002;
}

.app-popup-buttons {
    text-align: right;
    margin-bottom: -.5em;
}

    .app-popup-buttons .ui-btn {
        line-height: normal;
        min-width: 6em;
        display: inline-block;
        text-transform: uppercase;
        margin-left: .62em;
        margin-right: 0;
        overflow: initial;
    }

/*.app-popup-listview {
    min-width: 12em;
}*/

.app-popup .ui-title {
    margin: 0;
    padding-left: 1em;
    padding-right: 1em;
}

.app-popup-listview .ui-panel-inner {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: -14px;
}

    .app-popup-listview .ui-panel-inner li {
        line-height: normal !important;
    }

    .app-popup-listview .ui-panel-inner .ui-listview > .ui-li-divider.app-list-instruction {
        padding-top: .5em !important;
        padding-bottom: .5em !important;
        text-transform: uppercase;
    }

        .app-popup-listview .ui-panel-inner .ui-listview > .ui-li-divider.app-list-instruction:first-child {
            border-top-width: 0;
        }

.app-popup-listview .ui-content {
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 14px;
}

.app-popup-listview .ui-header {
    margin-bottom: -4px;
}

    .app-popup-listview .ui-header .ui-title {
        font-weight: normal;
    }

.app-popup-listview .app-status {
    font-style: italic;
    display: block;
}

.app-popup-listview .app-listview li .ui-btn:not(.ui-btn-icon-notext):not(.ui-mini) {
    padding: 11px 3em 11px 1em;
}

/*.app-popup-listview.app-popup-menu .app-listview li .ui-btn:not(.ui-btn-icon-notext):not(.ui-mini) {
    font-weight: normal;
}*/

/*.app-popup-listview .app-listview .ui-li-divider {
    background-color: transparent !important;
}*/

.app-popup-icon-left .ui-listview li .ui-btn:not(.ui-btn-icon-notext):not(.ui-mini) {
    padding: 12px 36px 12px 56px;
}

.ui-panel .ui-listview > li p,
.app-listview.ui-listview li .app-item-desc {
    white-space: normal;
}

.app-listview.ui-listview.app-cardview li .app-item-desc,
.app-listview.ui-listview.app-cardcolumn li .app-item-desc {
    white-space: nowrap;
}

.app-popup-icon-left.ui-panel .ui-listview li.ui-li-static,
.app-popup-icon-left.ui-panel .ui-listview li.ui-li-divider {
    padding-left: 56px;
    padding-right: 1em;
}

.app-popup-icon-left .ui-btn-icon-right::after {
    left: 6px;
}

.app-popup-listview .ui-last-child .ui-btn {
    border-bottom-width: 0 !important;
}

#app-btn-menu {
    width: 24px;
    height: 24px;
    border-width: 0;
    margin-top: -12px;
    border-radius: 0;
}

#app-btn-menu, .ui-btn-left.app-btn-search-cancel {
    left: 16px;
}

.app-btn-menu-background {
    left: 0;
    width: 34px;
    top: 0;
    bottom: -1px;
    border-bottom: solid 1px #ccc;
    border-right: solid 1px #ccc;
    background-color: #e9e9e9;
    z-index: 9;
    display: inline-block;
    position: absolute;
}

.app-has-minisidebar-left .app-btn-menu-background,
.app-has-back .app-btn-menu-background {
    width: 56px;
}

.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-btn-menu-background {
    width: 259px;
    z-index: 0;
}

.app-has-sidebar-left .app-bar-toolbar:not(.app-has-back) .app-btn-menu-background::after {
    content: ' ';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 1px;
    height: 1px;
}

body:not(.app-has-sidebar-left) .app-btn-menu-background {
    width: 0;
}

body:not(.app-has-sidebar-left) .app-btn-menu-background,
.app-has-minisidebar-left .app-btn-menu-background,
.app-has-back .app-btn-menu-background {
    border-color: transparent;
    background-color: transparent;
}

.app-status-bar {
    background-color: #fff;
    padding: .75em .5em .75em .75em;
    white-space: nowrap;
    margin: 0 -1em 0 -1em;
    overflow-x: hidden;
    border-bottom: solid 1px #ddd;
    line-height: 16px;
}

    .app-status-bar ul {
        margin: 0;
        padding: 0;
        z-index: 15;
    }

    .app-status-bar li span {
        display: inline-block;
        text-shadow: none;
    }

    .app-status-bar li.Segment {
        text-overflow: ellipsis;
        display: inline-block;
        list-style-type: none;
        font-size: 12px;
        border: solid 1px #ccc;
        background-color: #e5e5e5;
        border-left-color: transparent;
        border-right-width: 0;
        position: relative;
        z-index: 5;
        cursor: pointer;
        user-select: none;
    }

    .app-status-bar .Segment.First {
        padding-left: 0;
        margin-left: 0;
        border-left-width: 1px;
        border-color: #ccc;
    }

    .app-status-bar .Segment span.Outer {
        padding-left: 16px;
    }

    .app-status-bar .Segment.First span.Outer {
        padding-left: 0;
    }

    .app-status-bar .Segment span.Inner {
        position: relative;
        background-color: #e5e5e5;
    }

    .app-status-bar .Segment.PastToCurrent span.Inner {
        border-top: solid 1px #ccc;
        border-bottom: solid 1px #ccc;
        margin: -1px 0;
    }

    .app-status-bar .Segment span.Inner::after {
        content: ' ';
        position: absolute;
        right: 0;
        top: -1px;
        display: block;
        border: solid 1px #ccc;
        border-radius: 2px;
        background-color: #e5e5e5;
        transform: rotate(-45deg);
        transform-origin: top right;
        height: 20px;
        width: 20px;
        z-index: -1;
    }

    .app-status-bar .Segment span.Self {
        height: 18px;
        padding: 6px 4px 5px 4px;
    }

    .app-status-bar .Segment.First span.Self {
        padding-left: 10px;
    }

    /* white nodes*/
    .app-status-bar .Segment.Future,
    .app-status-bar .Segment.Future span.Self,
    .app-status-bar .Segment.Future span.Inner::after {
        background-color: #fff;
    }

div.app-menu-footer {
    height: 3em;
    margin: 1em -1em 0 -1em;
}

.app-stub {
    min-height: 3em;
    margin: 0 !important;
    background-color: transparent;
}

.app-content-stub-hidden .app-stub {
    height: 1px;
    min-height: 1px;
    position: relative;
    margin-top: -1px !important;
}

.app-stub.app-hidden {
    height: 1px !important;
    min-height: 0;
    margin-top: -1px !important;
}

.app-stub-main {
    height: 0;
    margin: 0 !important;
}

.app-sidebar {
    display: none;
    top: 0;
    width: 259px;
    background-color: #e9e9e9;
}

    .app-sidebar .ui-panel-inner {
        top: 57px;
    }

.app-has-minisidebar-left .app-sidebar {
    width: 56px;
}

.ui-btn-right.app-btn-context {
    right: 10px;
}

.ui-listview textarea {
    white-space: normal;
}

.app-listview:not(.app-listview-static) li.ui-li-divider {
    float: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.app-bar-buttons {
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
}

    .app-bar-buttons .app-has-icon.app-btn-close {
        position: absolute !important;
        left: 8px;
        width: 40px;
        height: 40px;
        top: 50%;
        margin-top: -20px;
        cursor: pointer;
        padding: 0 !important;
    }

        .app-bar-buttons .app-has-icon.app-btn-close .app-icon {
            left: 50% !important;
            margin-left: -12px !important;
        }

    .app-bar-buttons .ui-btn, .app-tabs .ui-btn, .app-bar-notify .ui-btn {
        line-height: normal !important;
    }

    .app-bar-buttons .ui-btn, .app-bar-notify .ui-btn {
        text-transform: uppercase;
        display: inline-block;
        min-width: 10em;
    }

        .app-bar-buttons .ui-btn.app-btn-more {
            min-width: 0;
            width: 22px;
            /*background-position: center center !important;
            background-repeat: no-repeat !important;*/
            padding-left: 0;
            padding-right: 0;
        }

    .app-bar-buttons .ui-btn,
    .app-popup-buttons .ui-btn,
    .app-bar-notify .ui-btn {
        min-width: 2em !important;
        border-width: 0 !important;
        margin: 0;
    }

        .app-desktop .app-bar-buttons .ui-btn:not(:hover):not(.ui-btn-active),
        body:not(.app-desktop) .app-bar-buttons .ui-btn:not(.ui-btn-active),
        .app-popup-buttons .ui-btn:not(:hover):not(.ui-btn-active) {
            background-color: transparent !important;
            border-color: transparent !important;
        }

.app-bar-buttons {
    padding: 0 8px;
    white-space: nowrap;
}

    .app-bar-buttons.app-bar-buttons-hidden {
        height: 2em;
        padding: 0;
    }

        .app-bar-buttons.app-bar-buttons-hidden > .ui-btn {
            display: none;
        }

.app-reading-pane-detail .app-bar-buttons {
    padding-left: 48px;
}

.app-reading-pane-detail.app-reading-pane-detail-vertical .app-bar-buttons {
    padding-right: 1px;
}

.ui-header.app-tabs {
    width: auto;
    left: 0;
    padding: 0 1em;
    background-color: #fff;
    border-top-width: 0;
}

.ui-header.app-bar-actions {
    width: auto;
    left: 0;
    border-top-width: 0;
    font-weight: normal;
    padding: 0 0 0 16px;
    line-height: normal;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
}

    .ui-header.app-bar-actions h3 + .ui-btn {
        width: 1px;
        margin-right: -2px;
        visibility: hidden;
    }

.ui-header.app-bar-actions, .app-echo-toolbar {
    padding-top: 3px;
    padding-bottom: 3px;
    white-space: nowrap;
}


body:not(.app-has-sidebar-left) .ui-page:not([data-page-header='false']) .app-bar-actions {
    border-color: transparent;
}

.ui-content:not(.app-content-main) .ui-header.app-tabs:not(.ui-header-fixed):not(.app-tabs-layout) {
    border-top-width: 1px;
    margin-top: -1px !important;
    margin-bottom: -1px !important;
}

.ui-header.app-tabs:not(.ui-header-fixed).app-tabs-layout {
    border-top-width: 1px;
}

.ui-content:not(.app-content-main) .ui-header.app-tabs:not(.ui-header-fixed).app-tabs-layout {
    margin-bottom: 0 !important;
}

.ui-header.ui-header-fixed.app-tabs,
.ui-header.ui-header-fixed.app-bar-actions,
.ui-header.ui-header-fixed.app-bar-header {
    top: 57px;
}

.app-page-scrollable .app-wrapper .ui-header.app-tabs,
.app-page-scrollable .app-wrapper .ui-header.app-bar-actions {
    margin: -1px 0 !important;
    font-size: 16px;
    border-top-width: 1px;
}

.ui-header.app-bar-header.ui-header-fixed {
    padding: 0 !important;
    border-top-width: 0;
    line-height: normal;
    font-weight: normal;
    position: absolute;
    left: 0 !important;
}

.ui-footer.app-bar-footer.ui-footer-fixed {
    padding: 0 !important;
    line-height: normal;
    font-weight: normal;
    /*margin-left: 1px;*/
    position: absolute;
    left: 0 !important;
    bottom: 0;
    border-bottom-width: 0;
    background-color: #f1f1f1;
}

.app-ios .app-page-modal-gap-none.app-page-modal-fullscreen .app-bar-buttons,
.app-ios .app-page-modal-gap-none.app-page-modal-fullscreen .app-bar-buttons .app-tools,
.app-ios .ui-page:not(.app-reading-pane-master) .app-bar-footer .app-bar-tabs {
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.app-tabs {
    padding: 0 1em;
    overflow: hidden;
    text-align: center;
}

    .app-tabs ul {
        margin: 0;
        padding: 0;
        display: inline-block;
        white-space: nowrap;
    }

    .app-tabs li {
        display: inline-block;
    }

    .app-tabs ul li.app-first-child .ui-btn {
        border-top-left-radius: 0.3125em;
        border-bottom-left-radius: 0.3125em;
    }

    .app-tabs ul li.app-last-child .ui-btn, .app-tabs ul li .ui-btn.ui-last-child {
        border-top-right-radius: 0.3125em;
        border-bottom-right-radius: 0.3125em;
    }

    .app-tabs .ui-btn,
    .app-tabs .ui-btn.app-selected {
        display: inline-block;
        min-width: 10em;
        font-weight: normal;
        font-size: 14px;
        padding: 6px 2em;
        border-width: 1px 1px 1px 0;
    }


    .app-tabs ul li.app-first-child .ui-btn {
        border-left-width: 1px;
    }

    .app-tabs ul li.app-last-child .ui-btn.app-tab-active,
    .app-tabs ul li.app-last-child .ui-btn.app-tab-more {
        margin-left: -1px;
        border-left-width: 1px;
    }

.app-sidebar {
    z-index: 999;
    border-right: solid 1px #ccc;
}

    .app-sidebar .ui-btn {
        font-size: 14px;
        font-weight: normal;
        line-height: normal;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .app-sidebar .ui-li-static {
        font-size: 14px;
        font-weight: normal;
        padding-top: 0.4em;
        padding-bottom: 0.4em;
    }

        .app-sidebar .ui-li-static.ui-first-child {
            border-top-width: 0;
        }

    .app-sidebar .ui-btn.ui-icon-eye {
        /*white-space: normal;*/
        border-bottom-width: 1px;
    }

    .app-sidebar .ui-btn {
        border-top-width: 0 !important;
    }

    .app-sidebar .ui-li-divider {
        /*border-bottom-width: 1px;*/
    }

app-popup .ui-header .ui-title {
    padding: 1em;
}

.app-popup .ui-li-count.app-hidden {
    visibility: hidden;
}

.app-popup .ui-li-count:not(.app-hidden) {
    right: 1em;
    position: absolute;
}

.ui-header-fixed .ui-title {
    height: 56px;
    line-height: 56px;
    display: inline-block;
    padding: 0;
}


.app-popup-icon-left .ui-header .ui-title {
    text-align: left;
    padding-left: 56px;
    padding-right: 36px;
}

.app-popup-panel .ui-header .ui-title {
    padding-left: 56px;
}

.app-popup-panel .ui-header {
    margin-bottom: -1em;
}

/*.app-has-sidebar-left .app-btn-promo {
    right: auto;
    left: 164px;
}*/

/*.app-has-sidebar-left .app-wrapper {
    left: 193px;
}*/

@media (min-width: 415px) {
    .ui-header.ui-header-fixed.app-bar-toolbar .ui-title {
        /*margin-left: 157px;*/
        text-align: left;
    }
}

.ui-header-fixed .ui-title {
    text-align: left;
    border-left: solid 0 #ccc;
    margin-right: auto;
    display: inline-block;
}

.app-has-sidebar-left .ui-header-fixed .ui-title.app-hidden {
    border-left-width: 1px;
}

/*body.app-promo-position-right .app-btn-promo {
    left: auto;
    right: 18px;
    margin-right: 8px;
}

.app-promo-position-left .app-btn-promo {
    left: 18px;
    right: auto;
    margin-left: 8px;
}*/

/*@media (min-width: 40em) {
}*/

.app-min-sm .app-listview.app-cardview li.dv-load-at-top-parent {
    float: none !important;
}

.app-min-sm .app-listview.app-cardview li.dv-load-at-top-parent, .app-listview.app-cardview li.dv-load-at-bottom-parent {
    width: 100% !important;
}


/*@media (min-width: 40em) {
}*/
.app-min-sm .app-listview li.ui-li-divider {
    border-bottom-width: 0;
}

.app-min-sm .app-listview.app-cardview li.ui-li-divider {
    border-bottom-width: 1px;
}



/*.app-wrapper .app-listview {
        
        -webkit-border-radius: .5em;
        border-radius: .5em;
            
    }*/

.app-min-sm .app-wrapper .app-listview.app-cardview li,
.app-min-sm .app-wrapper .app-listview.app-cardview li.ui-first-child,
.app-min-sm .app-wrapper .app-listview.app-cardview li.ui-last-child {
    float: left;
    width: 50%;
    /*
            margin: 0.5em;
            -webkit-border-radius: inherit;
            border-radius: inherit;*/
}

    .app-min-sm .app-wrapper .app-listview.app-cardview li .ui-btn {
        /*
                -webkit-border-radius: inherit;
                border-radius: inherit;
                border-width: 1px !important;
                    */
        border-left-width: 0 !important;
        border-top-width: 0 !important;
        border-right-width: 1px !important;
        border-bottom-width: 1px !important;
    }

    .app-min-sm .app-wrapper .app-listview.app-cardview li.dv-load-at-bottom-parent .ui-btn {
        border-bottom-width: 0 !important;
    }


/*@media (min-width: 76em) {
}*/

.app-min-lg .app-wrapper .app-listview.app-cardview li,
.app-min-lg .app-wrapper .app-listview.app-cardview li.ui-first-child,
.app-min-lg .app-wrapper .app-listview.app-cardview li.ui-last-child {
    width: 33.333%;
}

.app-sidebar.app-inactive {
    border-color: #ccc !important;
}

/* click */
.ui-page-theme-a .ui-btn.ui-btn-active,
html .ui-bar-a .ui-btn.ui-btn-active,
html .ui-body-a .ui-btn.ui-btn-active,
/*html body .ui-group-theme-a .ui-btn.ui-btn-active,*/
html head + body .ui-btn.ui-btn-a.ui-btn-active {
    border-color: transparent;
    background-color: rgba(0,0,0,0.08);
    color: #333;
}

.ui-page-theme-a .ui-listview .ui-btn.ui-btn-active {
    border-color: #ddd;
}

/*.ui-listview.app-listview .ui-btn-active {
    color: #333;
}*/

/*.ui-listview.app-listview .ui-btn-active .app-btn-more:after {
    color: #333;
}*/

/* selected */


.dataview-busy-indicator {
    height: 3px;
    position: absolute;
    z-index: 10001;
    /*width: 100%;*/
    /*left: -100%;*/
    visibility: hidden;
}

    .dataview-busy-indicator.dataview-busy-indicator-done {
        /*left: 0;*/
        opacity: 0;
        transition: opacity 750ms linear;
        transition-delay: 750ms;
        visibility: visible;
    }

    .dataview-busy-indicator.dataview-busy-indicator-animate {
        opacity: 1;
        transition-delay: 0;
        visibility: visible;
        animation-delay: 1000ms;
        animation-name: busy-indicator;
        animation-duration: 3000ms;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

@keyframes busy-indicator {
    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(200%,0,0);
    }
}

.app-transparent, .app-btn-icon-transparent::after {
    background-color: transparent !important;
}

.app-listview.ui-listview > li p {
    margin: 4px 0 1px 0;
    font-size: 14px;
}

.app-listview.ui-listview > li h1.app-field, .app-listview.ui-listview > li h2.app-field, .app-listview.ui-listview > li h3.app-field, .app-listview.ui-listview > li h4.app-field, .app-listview.ui-listview > li h5.app-field, .app-listview.ui-listview > li h6.app-field {
    margin: 0;
    text-shadow: none;
}

.app-listview.ui-listview > li p.ui-li-aside {
    color: #999;
    max-width: 35%;
    margin: 1px 0 0 0;
    right: 1.33em;
}

.app-listview.ui-listview.app-listview-static > li p.ui-li-aside {
    right: 1em;
}

.app-listview.ui-listview > li.ui-li-has-count p.ui-li-aside {
    margin-top: -0.8em;
    max-width: none;
}

.ui-popup-arrow {
    background-color: #fff;
    z-index: 1001;
}

.app-listview.ui-listview > li.app-li-has-aside:not(.ui-li-has-count) h1,
.app-listview.ui-listview > li.app-li-has-aside:not(.ui-li-has-count) h2,
.app-listview.ui-listview > li.app-li-has-aside:not(.ui-li-has-count) h3,
.app-listview.ui-listview > li.app-li-has-aside:not(.ui-li-has-count) h4,
.app-listview.ui-listview > li.app-li-has-aside:not(.ui-li-has-count) h5,
.app-listview.ui-listview > li.app-li-has-aside:not(.ui-li-has-count) h6 {
    max-width: 65%;
}


.app-listview:not(.app-listview-static) .ui-li-divider,
.app-listview:not(.app-listview-static) .ui-first-child .ui-btn {
    border-top-width: 0;
}

.ui-page.app-page-tasks .ui-content {
    padding-top: 0;
}

    .ui-page.app-page-tasks .ui-content .app-listview {
        margin-bottom: 3em;
    }


.ui-listview.app-page-menu {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}

.app-listview li .app-li-corner {
    right: 0;
    top: 0;
    padding: 2px .5em;
    background-color: #38c;
    color: #fff;
    position: absolute;
    text-shadow: none;
    max-width: 65%;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 12px;
    line-height: normal;
    overflow: hidden;
    text-transform: uppercase;
}

.app-listview li.app-li-has-corner .ui-li-aside {
    top: 2px;
    left: 1.2em;
    right: auto;
    text-align: left;
}

.app-listview li.app-li-has-corner.ui-li-has-thumb .ui-li-aside {
    left: 7.25em;
}

.app-listview li.app-li-has-corner .ui-li-count {
    top: auto !important;
    bottom: .5em;
}

.app-listview.ui-listview > li.app-li-has-aside:not(.ui-li-has-count).app-li-has-corner h1, .app-listview.ui-listview > li.app-li-has-aside:not(.ui-li-has-count).app-li-has-corner h2, .app-listview.ui-listview > li.app-li-has-aside:not(.ui-li-has-count).app-li-has-corner h3, .app-listview.ui-listview > li.app-li-has-aside:not(.ui-li-has-count).app-li-has-corner h4, .app-listview.ui-listview > li.app-li-has-aside:not(.ui-li-has-count).app-li-has-corner h5, .app-listview.ui-listview > li.app-li-has-aside:not(.ui-li-has-count).app-li-has-corner h6 {
    max-width: 100%;
}

.app-listview li.app-li-has-corner.app-li-has-aside {
    padding-top: 1em;
}

.app-listview.app-listview-static.ui-listview > li p {
    font-size: 0.75em;
}

.app-wrap {
    white-space: normal !important;
    border-top-width: 0 !important;
}

.app-sidebar .app-wrap, .ui-panel-inner .app-wrap {
    font-size: 14px;
    font-weight: normal;
}

    .app-sidebar .app-wrap a, .ui-panel-inner .app-wrap a {
        font-weight: normal;
    }

.app-wrap-text .ui-btn {
    white-space: normal !important;
}

.app-panel-info-view .ui-listview .ui-li-static {
    font-size: 14px;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    white-space: normal;
}

.ui-panel .app-list-instruction {
    border-bottom-width: 1px;
}

.app-panel-info-view .app-list-instruction {
    text-transform: uppercase;
}

.app-echo-toolbar h3, .app-bar-actions h3 {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 14px;
    line-height: normal;
}

.app-divider {
    border-top: solid 1px #ddd;
}

.ui-input-text,
.ui-input-search {
    border-width: 0;
    border-bottom-width: 1px;
    border-radius: 0;
    /*border-color: transparent;*/
    box-shadow: none !important;
}

    .ui-input-text.ui-focus,
    .ui-input-search.ui-focus,
    .app-lookup.ui-btn.ui-focus {
        border-color: #3388cc !important;
    }

.dv-item h3,
.app-popup-message h3 {
    font-weight: 600;
}

.dv-item .ui-btn {
    font-weight: normal;
}

.app-listview.app-grid .dv-item .ui-btn {
    padding: 0 !important;
    font-weight: normal;
    text-overflow: clip;
}

.app-listview.app-grid .app-grid-header,
.app-bar-heading .app-grid-header {
    position: relative;
}

.app-listview.app-grid .dv-item,
.app-listview.app-grid .dv-item .ui-btn,
.app-listview.app-grid .app-grid-header,
.app-bar-heading .app-grid-header {
    font-size: 0 !important;
}

    .app-listview.app-grid .dv-item .ui-btn span {
        font-size: 16px;
    }

    .app-listview .app-btn-more,
    .app-bar-heading .app-grid-header .app-btn-more {
        display: inline-block;
        margin: 0 !important;
        width: 22px;
        background-color: transparent;
        min-height: 1em;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .app-listview .app-btn-check,
    .app-bar-heading .app-grid-header .app-btn-check {
        display: inline-block;
        margin: 0 !important;
        width: 20px;
        height: 20px;
        padding: 0 !important;
        background-color: transparent;
        min-height: 20px;
        min-width: 20px;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        z-index: 2;
    }

.app-grid .app-cell-separator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    margin: 0 0 0 7px !important;
    padding: 0 !important;
    font-size: 0;
}

    .app-grid .app-cell-separator:last-of-type {
        margin-left: 15px !important;
    }

.app-grid .app-frozen + .app-cell-separator {
    z-index: 1;
}

.app-echo .app-grid .ui-last-child .ui-btn {
    border-bottom-width: 0;
}

.app-echo .app-grid {
    border-bottom: solid 1px;
}

.app-bar-heading .app-field-separator:last-of-type,
.app-grid .app-field-separator:last-of-type {
    margin-left: 13px !important;
}

.app-density-compact .app-grid .app-cell-separator:last-of-type {
    margin-left: 13px !important;
}

.app-density-compact .app-bar-heading .app-field-separator:last-of-type,
.app-density-compact .app-grid .app-field-separator:last-of-type {
    margin-left: 11px !important;
}

.app-density-condensed .app-grid .app-cell-separator:last-of-type {
    margin-left: 11px !important;
}

.app-density-condensed .app-bar-heading .app-field-separator:last-of-type,
.app-density-condensed .app-grid .app-field-separator:last-of-type {
    margin-left: 9px !important;
}



.app-grid.app-grid-vert-lines-none .ui-btn:not(.app-calculated) .app-cell-separator,
.app-grid.app-grid-vert-lines-none.app-grid.app-grid-horiz-lines-none .ui-btn.app-calculated .app-cell-separator {
    visibility: hidden;
    display: none !important;
}

.app-grid.app-grid-horiz-lines-none .dv-item + .dv-item .ui-btn {
    border-top-width: 0;
}

.app-echo .app-grid.app-grid-horiz-lines-none .dv-item {
    border-bottom-width: 0 !important;
}



.app-grid .dv-item .ui-btn {
    display: inline-block;
}

.app-grid.app-grid-vert-lines-none .dv-item .ui-btn {
    display: block;
}

/*.app-grid.app-listview.ui-listview.app-listview-inlineediting .dv-item .ui-btn span:not(.app-icon) {
        margin-left: 40px;
    }*/
.app-listview .app-field span[data-href],
.app-listview .app-field span[data-href] .app-field-data,
.app-listview .app-field[data-href],
[data-state="read"] .app-control-inner[data-href] {
    text-decoration: underline;
    cursor: pointer;
}


.app-listview.app-grid .app-field span[data-href] {
    padding: 0 !important;
}


/* conditionally show checkbox/more button on desktop */

.app-desktop.app-show-system-buttons-on-hover .app-listview .ui-btn:not(:hover) .app-btn-check:not(.app-btn-check-selected) {
    border-color: transparent;
}

.app-desktop.app-show-system-buttons-on-hover .app-listview .ui-btn:not(.app-selected):not(:hover) .app-btn-more {
    visibility: hidden;
}

.app-desktop.app-show-system-buttons-on-hover .app-can-drag .ui-btn:not(.app-selected):not(:hover) .app-btn-more {
    visibility: visible;
}

.app-btn-check {
    border-radius: 11px;
    position: relative;
    border: solid 1px #ccc;
    /*background-color: #fff !important;*/
}

    .app-btn-check::after {
        font-family: 'Material Icons';
        content: " ";
        color: #ccc;
        font-size: 24px;
        height: 24px;
        width: 24px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -12px;
        margin-top: -12px;
    }

    .app-btn-check.app-btn-check-selected {
        border-color: transparent;
    }

        .app-btn-check.app-btn-check-selected::after {
            content: 'check_circle';
            height: 25px !important;
            color: #777;
        }


.ui-btn-active .app-btn-check:not(.app-btn-check-selected) {
    border-color: #fff;
}

/*.app-grid-header .app-btn-check,
.app-bar-heading .app-grid-header .app-btn-check {
    margin-top: 2px !important;
}*/

.app-listview.app-grid .app-btn-check,
.app-bar-heading .app-grid-header .app-btn-check {
    margin-left: 16px !important;
}

.app-bar-heading .app-grid-header .app-btn-check {
    margin-left: 15px !important;
    margin-right: 1px !important;
}

.ui-btn-active .app-btn-check:not(.app-btn-check-selected),
.ui-btn.app-selected.ui-btn-active .app-btn-check:not(.app-btn-check-selected) {
    border-color: transparent !important;
    background-color: transparent !important;
}

.app-calculated .app-btn-check {
    visibility: hidden;
}

.app-listview.app-onecolumnview .app-btn-check,
.app-listview.app-cardcolumn .app-btn-check,
.app-listview.app-cardview .app-btn-check {
    position: absolute;
    left: 14px;
    top: 50%;
    margin-top: -10px !important;
}

.app-grid-header .app-btn-more:hover {
    background-color: transparent !important;
}

.app-grid .app-divider .app-btn-more {
    visibility: hidden;
}

/*.app-grid .app-divider.app-calculated {
    border-bottom-style: dashed;
    border-top-style: dashed;
}*/

.app-calculated .app-static-text {
    font-size: 12px;
    color: #808080;
}


.app-listview.app-onecolumnview .app-btn-more,
.app-listview.app-cardview .app-btn-more,
.app-listview.app-cardcolumn .app-btn-more {
    height: 30px;
    width: 30px;
    position: absolute;
    top: 0;
    right: 6px;
}

/*.app-desktop .app-listview:not(.app-grid) .app-btn-more {
    right: 6px;
}*/

/* default */
.app-listview.app-onecolumnview li.app-li-has-aside .app-btn-more,
.app-listview.app-onecolumnview li.ui-li-has-count .app-btn-more,
.app-listview.app-cardview li.app-li-has-aside .app-btn-more,
.app-listview.app-cardview li.ui-li-has-count .app-btn-more,
.app-listview.app-cardcolumn li.app-li-has-aside .app-btn-more,
.app-listview.app-cardcolumn li.ui-li-has-count .app-btn-more {
    top: auto;
    bottom: 0;
}

.app-listview .app-btn-more.app-middle {
    top: 50%;
    margin-top: -15px !important;
}

.app-listview .app-btn-more.app-bottom {
    top: auto;
    bottom: 0;
}


/* has-count */
.app-listview.app-onecolumnview li.ui-li-has-count .ui-li-count,
.app-listview.app-cardview li.ui-li-has-count .ui-li-count {
    top: 30%;
}

.app-listview.app-onecolumnview li.ui-li-has-count .ui-btn,
.app-listview.app-onecolumnview li.app-li-has-aside .ui-btn,
.app-listview.app-cardview li.ui-li-has-count .ui-btn,
.app-listview.app-cardview li.app-li-has-aside .ui-btn {
    min-height: 3em;
}

.app-grid-header .app-btn-more {
    cursor: auto !important;
}

.app-group .app-group-title.ui-btn-active, .app-group .app-group-path.ui-btn-active {
    padding: 4px;
    margin: -4px;
}

.app-desktop .dv-action-see-all .app-btn-prev:hover,
.app-desktop .dv-action-see-all .app-btn-next:hover,
.dv-action-see-all .app-btn-prev.ui-btn-active,
.dv-action-see-all .app-btn-next.ui-btn-active {
    padding-top: 6px;
    padding-bottom: 6px;
    margin-top: -6px;
    margin-bottom: -6px;
}

    /* This is the fix for iOS/OSX. The slight change to the top property of next/prev button will cause the "chevron" icon to redraw. Otherwise it renders incorrectly when the button is touched. */
    .dv-action-see-all .app-btn-prev.ui-btn-active::before,
    .dv-action-see-all .app-btn-next.ui-btn-active::before,
    .app-desktop .dv-action-see-all .app-btn-next:hover::before,
    .app-desktop .dv-action-see-all .app-btn-prev:hover::before {
        top: 50.1% !important;
    }

.app-grid-header > span {
    cursor: pointer;
    position: relative;
}

.app-desktop .app-grid-header span:hover:not(.ui-btn-active):not(.app-icon):not(.app-frozen-spacer) {
    background-color: #eaeaea;
}

.app-list-instruction .app-grid-desc {
    display: inline-block;
    overflow: hidden;
    max-height: 4em;
}

.app-listview .ui-btn .app-field-type-bool {
    padding: 0 !important;
}


.app-grid-header .app-field-type-bool,
.app-grid .app-field-type-bool {
    text-align: center;
}

.app-grid-header .app-field-type-numeric,
.app-grid .app-field-type-numeric {
    text-align: right;
}

.app-grid .app-field:first-child,
.app-grid-header [data-field-name]:first-child {
    text-align: left;
}



.app-grid-header .ui-btn-active:not(.app-scroll),
.app-grid-header .app-selected:not(.app-scroll) {
    margin-left: 10px !important;
    padding-left: 6px !important;
    margin-right: -7px !important;
    padding-right: 7px !important;
}

.app-listview.app-grid .dv-item .ui-btn > span:not(.app-icon),
.app-listview.app-grid .app-list-instruction .app-grid-header span:not(.app-icon),
.app-bar-heading .app-grid-header span:not(.app-icon) {
    padding: 8px 0 8px 0;
    margin-left: 16px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    vertical-align: middle;
}

.app-listview.app-grid .dv-item .ui-btn,
.app-listview.app-grid .app-list-instruction .app-grid-header {
    padding-right: 16px !important;
}

.ui-listview .app-grid-header {
    overflow: hidden;
    white-space: nowrap;
    margin: 4px -17px 0 -16px;
}

.app-echo .ui-listview .app-grid-header {
    margin-top: 0;
}

.app-bar-heading .app-grid-header {
    overflow: hidden;
    white-space: nowrap;
    margin: 4px -3px -5px -16px;
    padding-right: 16px;
}

    .app-listview.app-grid .app-list-instruction .app-grid-header span:not(.app-icon),
    .app-bar-heading .app-grid-header span:not(.app-icon) {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 12px;
        line-height: normal;
    }

.ui-listview > li p.app-para {
    text-overflow: clip;
}


.ui-listview:not(.app-listitem-tn) > li .app-column {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    margin-top: -.5em !important;
}

/*.app-listview:not(.app-listitem-tn) > li .app-column.app-column-first {
    margin-left: 3%;
}*/


.app-listview.ui-listview:not(.app-listitem-tn) li .app-column .app-item-desc {
    display: block;
    margin-top: .5em;
}

.app-listview.ui-listview:not(.app-listitem-tn):not(.app-listitem-xxs):not(.app-listitem-xs) li.app-has-column .app-item-desc .app-field-label-before {
    font-size: 1em;
    display: block;
}

.app-onecolumnview.ui-listview.app-listitem-tn li .app-item-heading {
    display: none;
}

.app-onecolumnview:not(.app-listitem-tn).ui-listview li.dv-item h3:first-of-type,
.app-onecolumnview:not(.app-listitem-tn).ui-listview li.dv-item p:first-of-type {
    display: none;
}

/*.app-onecolumnview:not(.app-listitem-tn).ui-listview li .app-item-heading {
    display: block;
}*/

.app-listview.ui-listview:not(.app-listitem-tn):not(.app-listitem-xxs):not(.app-listitem-xs) li .app-column .app-item-desc .app-field-label-before {
    float: left;
    min-width: 40%;
    max-width: 40%;
    text-align: right;
    margin: 0;
    padding: 0 .5em 0 0;
    display: inline-block;
}

.app-onecolumnview.ui-listview li .app-item-desc .app-field-data {
    max-width: 800px;
    display: inline-block;
}

.app-onecolumnview.ui-listview li .app-item-heading .app-field-data {
    font-weight: 600;
}

.app-listview.ui-listview:not(.app-listitem-tn):not(.app-listitem-xxs):not(.app-listitem-xs) li .app-column .app-item-desc .app-field-data {
    min-width: 55%;
    max-width: 55%;
    display: inline-block;
}

.app-listview.ui-listview:not(.app-listitem-tn):not(.app-listitem-xxs):not(.app-listitem-xs) li.app-has-column .app-item-desc .app-field-label-after {
    display: none;
}



.app-cardview.ui-listview > li .app-column {
    display: list-item;
    overflow: hidden;
    float: left;
}


.app-cardview.app-listview.ui-listview li .app-column .app-item-desc {
    display: block;
    margin-top: .75em;
}


.app-item-number {
    font-weight: normal;
}

.app-onecolumnview:not(.app-listitem-tn) .app-field-data .app-item-number {
    font-weight: 600;
    color: inherit;
}

.ui-btn:not(.ui-btn-active) .app-item-number {
    color: #999;
}

.app-grid .app-item-number {
    padding: 0 !important;
    padding-right: 4px !important;
    margin: 0 !important;
    margin-top: -4px !important;
}

.app-page-header {
    background-color: #fff;
    /*border-bottom: solid 1px #ddd;*/
    padding: 1em 1em 1em 16px;
    color: #333;
    text-shadow: none;
    white-space: nowrap;
    line-height: normal;
}

    .app-page-header h1 {
        margin: 0;
        font-size: 1.6em;
        font-weight: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-page-header h2 {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        font-weight: normal;
        text-transform: uppercase;
    }

    .app-page-header.app-has-action-bar h2 {
        display: none;
    }

body:not(.app-has-sidebar-left):not(.app-hosted) .app-page-header,
.app-page-modal:not(.app-has-header-bar) .app-page-header.app-has-action-bar {
    padding-top: 0;
}


    body:not(.app-has-sidebar-left):not(.app-hosted) .app-page-header .app-icon:first-of-type,
    .app-page-modal:not(.app-has-header-bar) .app-page-header.app-has-action-bar .app-icon:first-of-type,
    .app-page-modal .app-page-header:not(.app-has-action-bar) .app-icon:first-of-type {
        top: 0 !important;
    }



.app-has-header-bar .app-page-header {
    background-color: #fff !important;
    color: #000 !important;
    padding-top: .5em;
}

.app-page-header-divider {
    height: 1px;
    margin: 0;
    padding: 0;
}


/*@media (min-width:30em) {
    .app-page-header h1 {
        font-size: 2em;
    }
}
*/

.ui-panel .ui-li-has-thumb, .app-panel-info-view .ui-li-has-thumb {
    min-height: 6em !important;
}

.ui-panel .ui-li-thumb {
    margin-top: -57px;
}

.app-sidebar .ui-li-thumb, .app-panel-info-view .ui-li-thumb {
    left: 16px !important;
    top: .25em !important;
    margin-top: 0;
}

.ui-panel .ui-li-has-thumb .app-item-desc, .app-panel-info-view .ui-li-has-thumb .app-item-desc {
    left: 16px;
    position: absolute;
    bottom: .6em;
    line-height: normal;
}

.ui-panel:not(.app-sidebar) .ui-li-thumb,
.ui-panel:not(.app-sidebar) .app-item-desc {
    left: auto !important;
}

.app-labelsinlist-displayedabove .app-sidebar .ui-li-thumb, .app-labelsinlist-displayedabove .app-panel-info-view .ui-li-thumb {
    top: 1.75em !important;
}

.app-labelsinlist-displayedabove .app-sidebar .ui-li-has-thumb .app-item-desc, .app-labelsinlist-displayedabove .app-panel-info-view .ui-li-has-thumb .app-item-desc {
    top: auto !important;
    bottom: auto;
}

.app-labelsinlist-displayedabove .app-sidebar .ui-li-has-thumb, .app-labelsinlist-displayedabove .app-panel-info-view .ui-li-has-thumb {
    min-height: 6.5em !important;
}

.app-sidebar .ui-li-count {
    font-weight: normal;
}

.app-onecolumnview.ui-listview > li.dv-item > .ui-btn,
.app-onecolumnview.ui-listview > li.dv-item p,
.app-onecolumnview.ui-listview > li.dv-item .app-item-desc,
.app-onecolumnview.ui-listview > li.dv-item h1,
.app-onecolumnview.ui-listview > li.dv-item h2,
.app-onecolumnview.ui-listview > li.dv-item h3,
.app-onecolumnview.ui-listview > li.dv-item h4,
.app-onecolumnview.ui-listview > li.dv-item h5,
.app-onecolumnview.ui-listview > li.dv-item h6 {
    white-space: normal;
}

    .app-onecolumnview.ui-listview > li.dv-item .app-item-desc .app-field-label-after,
    .app-onecolumnview.ui-listview > li.dv-item .app-item-desc .app-field-label-before {
        max-width: none;
    }

.ui-listview > li.dv-item.app-para-multi .ui-li-thumb {
    top: 0 !important;
    margin-top: 1em;
}

.app-listview-multiselect > li.dv-item.app-para-multi.ui-li-has-thumb .app-btn-check {
    top: 3.5em;
}

.ui-listview > li .app-para {
    margin-top: .75em !important;
}


/* echo rules */

.app-page-header-divider + .app-echo {
    margin-top: -1px !important;
}


.app-echo {
    border-top: solid 1px;
    padding: 1em 1em 1em 16px;
    background-color: #fff;
}

    .app-echo /*:not(.app-echo-embedded)*/ .app-listview {
        box-shadow: 1px 1px 5px 0 rgba(0,0,0,.1);
    }

    .app-echo.app-echo-hidden {
        visibility: hidden !important;
        left: -20000px !important;
        top: 0 !important;
    }

    .app-echo .app-echo-toolbar {
        /*margin-top: -1em !important;*/
        padding-left: .95em;
        line-height: normal;
        margin: -1em -1em 0 -1em;
        position: relative;
    }

        .app-echo .app-echo-toolbar .app-btn-more {
            margin: 7px 5px;
        }

        .app-echo .app-echo-toolbar h3, .app-bar-actions h3 {
            display: inline-block;
            overflow: hidden;
            max-width: 50%;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: normal;
            text-transform: uppercase;
            vertical-align: middle;
            position: relative;
            cursor: pointer;
            margin: 0 2px 0 -4px;
            padding: 6px 16px 6px 4px;
        }

            .app-echo .app-echo-toolbar h3::after, .app-bar-actions h3::after {
                width: 7px;
                height: 24px;
                position: absolute;
                margin-top: -12px;
                top: 50%;
                color: #777;
            }

            .app-echo .app-echo-toolbar h3::after {
                right: 9px;
            }

.app-desktop .app-bar-actions h3:hover,
.app-desktop .app-echo .app-echo-toolbar h3:hover {
    background-color: rgba(0,0,0,.05)
}

    .app-desktop .app-bar-actions h3:hover::after,
    .app-desktop .app-echo .app-echo-toolbar h3:hover::after {
        color: #000;
    }

.app-echo .app-echo-toolbar h3.app-hidden, .app-bar-actions h3.app-hidden {
    display: none;
}

    .app-echo .app-echo-toolbar h3.app-hidden + .ui-btn {
        margin-left: 0 !important;
    }

    .app-bar-actions h3.app-hidden + .ui-btn {
        margin-left: -16px !important;
    }

.app-density-condensed .app-bar-actions h3.app-hidden + .ui-btn {
    margin-left: -14px !important;
}

.app-font-tiny .app-bar-actions h3.app-hidden + .ui-btn {
    margin-left: -12px !important;
}


.app-bar-header .app-bar-strip, .app-bar-footer .app-bar-strip {
    vertical-align: middle;
    white-space: nowrap;
    padding: 0.5em .25em;
    margin: 0;
    overflow: hidden;
    height: 34px;
    min-height: 34px;
}

.app-bar-actions > .app-btn-more,
.app-echo-toolbar > .app-btn-more {
    height: 24px;
}

.app-echo .app-echo-toolbar > .app-echo-controls,
.app-echo .app-echo-toolbar > .app-echo-see-all,
.app-bar-actions > .app-bar-controls {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

    .app-echo .app-echo-toolbar > .app-echo-controls > a,
    .app-bar-actions > .app-bar-controls > a,
    .app-bar-header > .app-bar-strip > a,
    .app-bar-footer > .app-bar-strip > a {
        display: inline-block;
        vertical-align: middle;
        margin: 0 .5em;
        font-weight: normal;
        border-width: 0;
    }

    .app-echo .app-echo-toolbar > .app-echo-controls > .ui-btn-icon-notext,
    .app-bar-actions > .app-bar-controls > .ui-btn-icon-notext {
        margin-top: 3px;
        margin-bottom: 3px;
    }

    .app-echo .app-echo-toolbar > .app-echo-controls > a.app-has-children,
    .app-bar-actions > .app-bar-controls > a.app-has-children,
    .app-bar-header > .app-bar-strip > a.app-has-children,
    .app-bar-footer > .app-bar-strip > a.app-has-children {
        font-weight: normal;
    }

    .app-echo .app-echo-toolbar > .app-echo-controls > .ui-mini,
    .app-bar-actions > .app-bar-controls > .ui-mini,
    .app-bar-header > .app-bar-strip > .ui-mini,
    .app-bar-footer > .app-bar-strip > .ui-mini {
        padding-top: 8px;
        padding-bottom: 8px;
        line-height: normal;
        font-size: 14px;
    }

.app-echo .app-echo-toolbar > .app-echo-see-all {
    position: absolute;
    display: inline-block;
    right: 1em;
    padding-right: 16px;
    padding: 0 16px 0 6px;
    font-size: 14px;
    cursor: pointer;
    color: #777;
    line-height: 34px;
    margin: 3px 0;
}

    .app-echo .app-echo-toolbar > .app-echo-see-all.app-hidden {
        visibility: hidden !important;
    }

    .app-echo .app-echo-toolbar > .app-echo-see-all .app-icon {
        right: -4px;
        color: #777;
        user-select: none;
    }

.app-desktop .app-echo .app-echo-toolbar > .app-echo-see-all:hover,
.app-desktop .app-echo .app-echo-toolbar > .app-echo-see-all:hover .app-icon {
    color: #333;
}

/*.app-echo .app-echo-toolbar > .app-echo-see-all.ui-btn-active,
.app-echo .app-echo-toolbar > .app-echo-see-all.ui-btn-active .app-icon {
    color: #000;
}*/

/*.app-echo.app-echo-embedded .app-echo-toolbar > .app-echo-see-all {
    right: 0;
}

*/
.app-echo .app-echo-instruction {
    color: #808080;
    font-size: 14px;
    line-height: 1.25em;
    display: inline-block;
    padding: 0 28px 0 0;
    position: relative;
    margin-bottom: .5em;
}

.app-echo .app-echo-inner {
    width: 100%;
    white-space: nowrap;
    vertical-align: top;
    /*overflow-x: auto;*/
    /*-webkit-overflow-scrolling: touch;*/
    /*-ms-overflow-style: -ms-autohiding-scrollbar;*/
    /*touch-action: auto;*/
    overflow: hidden;
}

    .app-echo .app-echo-inner ul {
        /*width: 80%;*/
        display: inline-block;
        margin-top: 0;
        margin-right: 1em;
        margin-left: 0;
    }

        .app-echo .app-echo-inner ul li .ui-btn {
            border-top-width: 0;
            border-bottom-width: 1px;
        }

        .app-echo .app-echo-inner ul.app-grid li .ui-btn {
            border-top-width: 0;
            border-bottom-width: 0;
        }

        .app-echo .app-echo-inner ul.app-grid li:not(.ui-last-child):not(.ui-first-child) {
            border-bottom: solid 1px;
        }

    .app-echo .app-echo-inner .app-echo-empty {
        padding: .25em 0 5em 0;
        /*font-style: italic;*/
        text-transform: lowercase;
    }

/*.app-echo .app-echo-inner.app-no-scrolling ul:last-child {
    margin-right: 0;
}*/

.app-echo .dv-action-see-all {
    font-weight: normal;
    white-space: nowrap !important;
    padding: .75em 0 .5em 0;
    position: relative;
}

    .app-echo .dv-action-see-all::after {
        background: none;
    }

/*.app-echo .dv-action-see-all .app-btn-see-all:after,*/
/*.app-echo .dv-action-see-all .app-btn-prev::after,*/
/*.app-echo .dv-action-see-all .app-btn-next:not(:hover):after {
        content: ' ';
        display: inline-block;
        width: 1px;
        background-color: #ddd;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
    }*/

.app-echo .app-btn-separator {
    width: 1px;
    position: absolute;
    top: 25%;
    bottom: 15%;
}

.app-echo .dv-action-see-all .app-btn-see-all,
.app-echo .dv-action-see-all .app-btn-prev,
.app-echo .dv-action-see-all .app-btn-next {
    /*border-left-style: solid;
        border-left-width: 1px;*/
    padding-left: .5em;
    padding-right: .5em;
    cursor: pointer;
    user-select: none;
    line-height: 1em;
}

.app-echo .dv-action-see-all .app-btn-next {
    margin-right: .5em;
}

.app-echo .ui-btn-active.dv-action-see-all span {
    border-color: transparent !important;
}

    .app-echo .ui-btn-active.dv-action-see-all span:not(.ui-btn-active):not(.app-info) {
        color: transparent;
    }

.app-echo .dv-action-see-all .app-btn-see-all {
    border-left-width: 0;
    margin-left: -.5em;
}

.app-echo .app-echo-footer .dv-action-see-all .app-btn-see-all {
    margin-left: 0;
}

.dv-action-see-all .app-info {
    cursor: pointer;
}

    .dv-action-see-all .app-info:before {
        display: inline-block;
        content: 'x';
        width: 18px;
        visibility: hidden;
        float: right;
    }


    .dv-action-see-all .app-info .app-icon {
        right: 0;
    }

.app-desktop .dv-action-see-all .app-info:hover {
    padding: 6px 0 6px 6px;
    margin: -6px 0 -6px -6px;
}

.app-echo .app-echo-footer {
    white-space: nowrap;
}

    .app-echo .app-echo-footer .app-echo-container-see-all .dv-action-see-all {
        margin-top: .5em;
        margin-bottom: .5em;
        font-weight: normal;
        text-align: left;
        /*border-left-width: 0;
        border-right-width: 0;*/
    }

.app-bar-aggregate-list {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
}

    .app-bar-aggregate-list .ui-btn.app-calculated {
        display: inline-block;
        margin-right: 1em;
        margin-top: .5em;
        margin-bottom: .5em;
        font-weight: normal;
        border-width: 0;
    }

    .app-bar-aggregate-list .app-calculated .app-static-text {
        display: inline-block;
        padding-right: .5em;
    }

    .app-bar-aggregate-list .app-calculated .app-calculated-label {
        text-transform: uppercase;
    }

    .app-bar-aggregate-list .app-calculated .app-calculated-value {
        display: block;
    }

.ui-btn.app-calculated {
    cursor: auto;
}

/*.app-echo .app-echo-inner.app-no-scrolling {
    overflow: visible;
}*/

/*.app-echo .app-echo-inner.app-no-scrolling ul.app-grid, */ .app-echo ul.app-grid {
    width: 100%;
}

.app-echo .app-grid .app-list-instruction {
    padding-top: 0;
}

.app-echo .app-grid {
    margin-bottom: 0;
}

.app-echo .app-echo-inner ul.app-onecolumnview {
    margin-bottom: 4px;
    display: block;
    margin-right: 4px;
}

.app-wrapper .app-map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.app-filter {
    font-weight: 600;
    color: #38c;
    max-height: 30px;
}

.app-desktop .app-filter {
    cursor: pointer;
}

    .app-desktop .app-filter:hover {
        text-decoration: underline;
    }

.app-filter-clear {
    cursor: pointer;
    display: inline-block;
    position: absolute;
    margin-top: -12px;
    top: 50%;
    right: 4px;
}

.app-map-info {
    padding-bottom: .5em;
}

    .app-map-info .app-listview {
        margin-bottom: 0;
        -webkit-border-top-left-radius: .31em;
        -webkit-border-top-right-radius: .31em;
        border-top-left-radius: .31em;
        border-top-right-radius: .31em;
    }

        .app-map-info .app-listview li {
            border-width: 0 !important;
        }

    .app-map-info .app-map-info-toolbar .ui-btn {
        margin-bottom: 0;
        margin-top: .25em;
    }

    .app-map-info .app-btn-more {
        display: none;
    }

.dv-action-see-all .app-info {
    position: absolute;
    right: 0;
    display: inline-block;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-left-width: 0;
}

@media (min-width: 20em) {

    .app-map-info .app-listview {
        min-width: 15em !important;
    }
}

@media (min-width: 28em) {

    .app-map-info .app-listview {
        max-width: 25em !important;
    }

    .app-map-info.app-popup-panel .app-listview {
        max-width: none !important;
    }
}

@media (min-width: 35em) {

    .app-map-info .app-listview {
        max-width: 30em !important;
    }
}

@media (min-width: 40em) {

    .app-map-info .app-listview {
        max-width: 35em !important;
    }
}

@media (min-width: 50em) {
    .app-map-info .app-listview {
        max-width: 45em !important;
    }
}

@media (min-width: 60em) {
    .app-map-info .app-listview {
        max-width: 40em !important;
    }
}

.in.ui-popup-screen {
    /*opacity: .25;*/
    opacity: 0;
}

.app-menu-strip {
    position: absolute;
    top: 0;
    height: 56px;
    z-index: 1;
    overflow: visible;
    white-space: nowrap;
    font-size: 16px;
    text-transform: uppercase;
}

    .app-menu-strip ul {
        padding: 0;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
    }

        .app-menu-strip ul li {
            list-style-type: none;
            display: inline-block;
        }

            .app-menu-strip ul li .ui-btn {
                padding: 0;
                margin: 0;
                font-size: 14px;
                border-width: 0;
                padding: 0 1em;
            }

.app-menu-strip-hidden {
    display: none !important;
}

.app-desktop .app-menu-strip ul li .ui-btn.app-is-link:hover,
.app-desktop .app-popup-menu-main .ui-btn.app-is-link:hover {
    text-decoration: underline;
}

.app-has-sidebar-left .app-menu-strip ul li:first-of-type .ui-btn {
    padding-left: 16px;
}

.app-menu-strip ul li .ui-btn:not(:hover):not(.ui-btn-active),
body:not(.app-desktop) .app-menu-strip ul li .ui-btn:not(.ui-btn-active) {
    background-color: transparent;
}

.app-menu-strip ul,
.app-menu-strip ul li {
    height: 56px;
}

    .app-menu-strip ul li a {
        display: inline-block;
        font-weight: normal;
        cursor: pointer;
        height: 56px;
        line-height: 56px;
    }

.app-bar-toolbar .ui-title.app-hidden {
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.app-echo .app-echo-toolbar > .app-echo-controls > a.app-has-children,
.app-bar-actions > .app-bar-controls > .app-has-children,
.app-bar-header > .app-bar-strip > .app-has-children,
.app-bar-footer > .app-bar-strip > .app-has-children {
    padding-right: 18px;
}

.app-menu-strip ul li .ui-btn.app-has-children {
    padding-right: 20px;
}

    .app-menu-strip ul li .ui-btn.app-has-children::after {
        right: 2px;
    }

.app-bar-footer .ui-btn.app-has-children::after {
    transform: rotate(180deg);
}

/* grey #777777 drop arrow*/
.ui-btn.app-has-children::after, .app-echo-toolbar h3::after, .app-bar-actions > h3::after, .app-btn-options::after,
[data-input] .app-control-toolbar .app-has-droparrow::after {
    content: 'arrow_drop_down';
    left: auto;
}

.app-btn-options::after {
    right: 0;
}

.app-bar-actions > h3::after {
    right: 3px;
}

.app-menu-strip ul li .ui-btn.app-has-children.ui-btn-active::after,
.app-echo .app-echo-toolbar > .app-echo-controls > a.app-has-children::after,
.app-bar-actions > .app-bar-controls > .app-has-children::after,
.app-bar-header > .app-bar-strip > .app-has-children::after,
.app-bar-footer > .app-bar-strip > .app-has-children::after {
    background-color: transparent !important;
}

/* black drop arrow*/
.ui-btn.app-has-children.app-selected:not(.ui-btn-active)::after,
.app-desktop .ui-btn.app-has-children:hover:not(.ui-btn-active)::after,
.app-echo-toolbar .ui-btn.app-has-children::after,
.app-echo-toolbar h3::after,
.app-bar-actions .ui-btn.app-has-children::after,
.app-bar-actions h3::after,
.app-has-droparrow::after {
    content: 'arrow_drop_down'
}

.ui-bar-a .app-menu-strip .ui-btn:hover:not(.ui-btn-active),
.ui-bar-a .app-menu-strip .ui-btn.app-selected:not(.ui-btn-active) {
    color: #333333;
}

.app-wrapper > .app-listview > li.ui-last-child {
    margin-bottom: 1em;
}

    .app-wrapper > .app-listview > li.ui-last-child.app-has-promo {
        margin-bottom: 88px;
    }

.app-echo-toolbar .app-selected:not(.ui-btn-active),
.app-echo-toolbar .app-selected:not(.ui-btn-active):hover,
.app-bar-actions .app-selected:not(.ui-btn-active),
.app-bar-actions .app-selected:not(.ui-btn-active):hover {
    /*background-image: none;*/
    background-color: rgba(0,0,0,.05);
}

.app-popup-listview .ui-popup-arrow,
.app-popup-listview {
    background-color: #e9e9e9;
}

.ui-li-divider[role="heading"]:not(.ui-bar-b) {
    line-height: normal;
}

.app-bar-buttons [data-action-path].ui-btn.ui-btn-active {
    color: rgba(0,0,0,.6);
    /*transition: none;*/
}

.app-action-column {
    position: absolute;
    left: 1em;
    top: 1em;
}

.dv-item [data-control="action"][data-action-path] {
    margin-bottom: 4px;
}

.app-action-column,
.dv-item [data-control="action"][data-action-path] {
    font-size: 12px;
    white-space: pre-wrap;
}


    .app-action-column .app-action-column-button {
        margin-bottom: 9px;
        margin-right: 9px;
    }

    .app-action-column .app-action-column-button,
    .dv-item [data-control="action"][data-action-path] {
        border-radius: .3125em;
        text-transform: uppercase;
        display: inline-block;
        /*border: solid 1px #38c;*/
        border: solid 1px;
        font-weight: 600;
        padding: 5px 9px;
        /*color: #38c;*/
        height: 14px;
        line-height: 14px;
        white-space: nowrap;
        user-select: none;
    }

        .app-bar-buttons .ui-btn,
        .app-action-column .app-action-column-button.ui-btn-active,
        .dv-item [data-control="action"][data-action-path].ui-btn-active,
        .app-desktop .app-action-column .app-action-column-button:not(.ui-btn-active):hover,
        .dv-item [data-control="action"][data-action-path]:not(.ui-btn-active):hover,
        [data-input="listbox"] .app-data-list.app-data-list-actions li.app-selected /*, 
        .app-desktop [data-input="listbox"] .app-data-list.app-data-list-actions li:not(.app-selected):hover*/ {
            color: #fff;
        }

.dv-item .app-icon[data-action-path] {
    position: static !important;
    margin-top: 0 !important;
}

.dv-item a {
    font-weight: normal;
}

    .app-desktop .dv-item a:hover,
    .dv-item a.btn-ui-active {
        text-decoration: underline;
    }


.app-theme-dark [data-input="listbox"] .app-data-list.app-data-list-actions li.app-selected {
    color: #000;
}


.app-action-column .app-action-column-button.ui-btn-active,
.dv-item [data-control="action"][data-action-path].ui-btn-active,
/*[data-input="listbox"] .app-data-list.app-data-list-actions li.app-selected,*/
.app-theme-dark .app-bar-buttons [data-action-path].ui-btn.ui-btn-active {
    color: rgba(255,255,255,.6);
    /*transition: none;*/
}


[data-layout] .app-action-column {
    font-size: 14px;
}

/*.app-desktop .app-action-column .app-action-column-button.ui-btn-active {
    color: #38c;
    background-color: #fff;
}
*/
/*.ui-btn.ui-btn-active .app-action-column .app-action-column-button {
    color: #fff;
    border-color: #fff;
}*/

/*.app-bar-actions .app-group-item:not(.app-group-first),
.app-echo-controls .app-group-item:not(.app-group-first) {
    margin-left: -1px !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.app-bar-actions .app-group-item:not(.app-group-last),
.app-echo-controls .app-group-item:not(.app-group-last) {
    margin-right: 0 !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}*/

.app-listview .ui-btn.app-selected::before {
    display: inline-block;
    content: " ";
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    z-index: 2;
}

.app-site-map .ui-listview {
    margin-left: -16px;
}

    .app-site-map .ui-listview > .ui-li-static {
        padding-left: 0;
    }

.app-listview.ui-listview > li h1.app-field,
.app-listview.ui-listview > li h2.app-field,
.app-listview.ui-listview > li h3.app-field,
.app-listview.ui-listview > li h4.app-field,
.app-listview.ui-listview > li h5.app-field,
.app-listview.ui-listview > li h6.app-field {
    font-size: 1em;
}
/*********************************/
/* DISPLAY DENSITY: COMPACT      */
/*********************************/
.app-density-compact .app-wrapper > *,
.app-density-compact .app-wrapper label,
.app-density-compact .app-listview.app-grid .dv-item .ui-btn,
.app-density-compact .ui-btn:not(.ui-mini):not(.ui-btn-icon-notext),
.app-density-compact .ui-popup,
.app-density-compact .ui-popup label,
.app-density-compact .ui-panel .ui-listview .ui-li-static,
.app-density-compact .app-echo-toolbar h3,
.app-density-compact .app-bar-actions h3,
.app-density-compact .app-echo-toolbar .app-echo-see-all,
.app-density-compact .app-echo-inner .app-echo-empty,
.app-density-compact .app-listview.app-grid .dv-item .ui-btn span,
.app-density-compact .app-menu-strip,
.app-density-compact .app-loading,
.app-density-compact .app-bar-toolbar .ui-title,
.app-density-compact .app-bar-toolbar .app-back-text,
.app-density-compact .ui-footer .ui-btn.ui-mini,
.app-density-compact .app-page-header-fixed,
.app-density-compact [data-input="listbox"] .app-data-list.app-data-list-actions li,
.app-density-compact .ui-header .ui-btn,
.app-density-compact .app-bar-buttons .ui-btn {
    font-size: 14px;
}

.app-density-compact .ui-listview > .ui-li-divider, .app-density-compact .app-echo .ui-listview > .ui-li-divider.app-list-instruction {
    padding-top: 4px;
    padding-bottom: 6px;
}

.app-density-compact .app-echo .ui-listview > .ui-li-divider.app-list-instruction {
    padding-top: 0;
}

.app-density-compact .ui-listview > .ui-li-divider.app-list-instruction, .app-density-compact .app-presenter-instruction {
    padding-top: 14px;
}

.app-density-compact.app-echo .ui-listview > .ui-li-divider.app-list-instruction {
    padding-top: 4px;
}

.app-density-compact .app-listview.ui-listview > li .ui-li-aside,
.app-density-compact .app-listview.ui-listview > li .ui-li-count {
    font-size: 13px;
}

.app-density-compact .app-sidebar .app-wrap, .app-density-compact .ui-panel-inner .app-wrap,
.app-density-compact .ui-listview.app-listview .ui-li-divider:not(.app-list-instruction) {
    font-size: 12.5px;
}

.app-density-compact .app-sidebar .ui-btn:not(.ui-mini):not(.ui-btn-icon-notext),
.app-density-compact .app-sidebar .ui-listview > .app-context-field {
    font-size: 12.5px;
}

.app-density-compact .app-page-header h1 {
    font-size: 28px;
}

.app-density-compact .app-listview.app-grid .dv-item .ui-btn > span:not(.app-icon),
.app-density-compact .app-listview.app-grid .app-list-instruction .app-grid-header span:not(.app-icon),
.app-density-compact .app-bar-heading .app-grid-header span:not(.app-icon) {
    padding: 7px 0 7px 0;
    margin-left: 16px;
}

.app-density-compact .app-listview.app-grid .dv-item .ui-btn,
.app-density-compact .app-listview.app-grid .app-list-instruction .app-grid-header,
.app-density-compact .app-bar-heading .app-grid-header {
    padding-right: 8px !important;
}

.app-density-compact .app-bar-heading .app-grid-header {
    margin-bottom: -5px !important;
}

.app-density-compact .ui-mini.ui-btn:not(.ui-btn-icon-top) {
    padding-top: .5em;
    padding-bottom: .5em;
}

.app-density-compact .ui-mini.ui-btn.ui-btn-icon-top {
    padding-top: 2.2em;
    padding-bottom: .5em;
}

.app-density-compact .ui-btn-icon-top:after {
    top: .3625em;
}

.app-density-compact .app-tabs .ui-btn {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12.5px;
}

.app-density-compact .app-listview.ui-listview > li p {
    margin: 2px 0 1px 0;
}

.app-density-compact .app-field-label-after {
    margin-top: 0;
}

.app-density-compact .app-field-label-before {
    margin-bottom: 0;
}

.app-density-compact .ui-li-thumb {
    margin-top: -35px;
}

.app-density-compact .ui-panel .ui-li-thumb {
    margin-top: -45px;
}


.app-density-compact .app-sidebar .ui-li-thumb, .app-density-compact .app-panel-info-view .ui-li-thumb {
    margin-top: 0;
}

/*.app-density-compact .app-echo .app-echo-toolbar > .app-echo-controls,
.app-density-compact .app-bar-actions > .app-bar-controls,
.app-density-compact .app-bar-header > .app-bar-strip,
.app-density-compact .app-bar-footer > .app-bar-strip {
    height: 30px;
}
*/
.app-density-compact .app-lookup.ui-btn {
    margin-top: -35px;
}

.app-density-compact .app-grid .app-divider.app-calculated .app-static-text {
    font-size: 11px;
}

.app-density-compact .app-echo .app-echo-toolbar > .app-echo-controls > .ui-mini,
.app-density-compact .app-bar-actions > .app-bar-controls > .ui-mini,
.app-density-compact .app-bar-header > .app-bar-strip > .ui-mini,
.app-density-compact .app-bar-footer > .app-bar-strip > .ui-mini {
    padding-top: 6px;
    padding-bottom: 6px;
}

.app-density-compact .app-bar-header .app-bar-strip,
.app-density-compact .app-bar-footer .app-bar-strip {
    height: 30px;
    min-height: 30px;
}


/*********************************/
/* DISPLAY DENSITY: CONDENSED    */
/*********************************/

.app-density-condensed .app-wrapper > *,
.app-density-condensed .app-wrapper label,
.app-density-condensed .app-listview.app-grid .dv-item .ui-btn,
.app-density-condensed .ui-btn:not(.ui-mini):not(.ui-btn-icon-notext),
.app-density-condensed .app-listview.ui-listview > li .ui-li-aside,
.app-density-condensed .ui-li-count,
.app-density-condensed .app-listview.ui-listview > li p,
.app-density-condensed .app-sidebar .app-wrap,
.app-density-condensed .ui-panel-inner .app-wrap,
.app-density-condensed .app-sidebar .ui-li-static,
.app-density-condensed .app-panel-info-view .ui-listview .ui-li-static,
.app-density-condensed .ui-panel .ui-listview .ui-li-static,
.app-density-condensed .ui-popup,
.app-density-condensed .ui-popup label,
.app-density-condensed .app-echo-toolbar h3,
.app-density-condensed .app-bar-actions h3,
.app-density-condensed .app-echo-toolbar .app-echo-see-all,
.app-density-condensed .app-echo-inner .app-echo-empty,
.app-density-condensed .app-listview.app-grid .dv-item .ui-btn span,
.app-density-condensed .app-menu-strip,
.app-density-condensed .app-wrapper .app-page-content .ui-listview > li p,
.app-density-condensed .app-loading,
.app-density-condensed .app-bar-toolbar .ui-title,
.app-density-condensed .app-page-header-fixed,
.app-density-condensed .app-bar-toolbar .app-back-text,
.app-density-condensed .app-action-column,
.app-density-condensed [data-input="listbox"] .app-data-list.app-data-list-actions li,
.app-density-condensed .app-bar-buttons .ui-btn {
    font-size: 12px;
}

.app-density-condensed .ui-listview > .ui-li-divider, .app-density-condensed .app-echo .ui-listview > .ui-li-divider.app-list-instruction {
    padding-top: 3px;
    padding-bottom: 6px;
}

    .app-density-condensed .ui-listview > .ui-li-divider.app-list-instruction, .app-density-condensed .app-presenter-instruction {
        padding-top: 12px;
    }

.app-grid .app-list-instruction:not(.app-no-records) {
    padding-bottom: 0 !important;
}

.app-density-condensed.app-echo .ui-listview > .ui-li-divider.app-list-instruction {
    padding-top: 3px;
}

.app-density-condensed .app-echo .app-grid.ui-listview > .ui-li-divider.app-list-instruction {
    padding-top: 0;
}


.app-density-condensed .app-sidebar .ui-btn:not(.ui-mini):not(.ui-btn-icon-notext) {
    font-size: 12px;
}

.app-sidebar .ui-btn:not(.ui-mini):not(.ui-btn-icon-notext) {
    padding-left: 56px;
}

.app-density-condensed .app-bar-heading {
    line-height: normal;
}

    .app-density-condensed .ui-listview .ui-li-divider,
    .app-density-condensed .app-bar-heading .app-grid-desc,
    .app-density-condensed .app-bar-heading .app-bar-text,
    .app-density-condensed .app-presenter-instruction,
    .app-density-condensed .app-echo-instruction {
        font-size: 11px;
    }

/*    .app-density-condensed .app-bar-heading .app-bar-label,
    .app-density-condensed .ui-listview > li p.app-item-desc,
    .app-density-condensed .app-field-label-after,
    .app-density-condensed .app-field-label-before {
        font-size: 10px;
    }
*/
.app-density-condensed .app-listview li.app-li-has-corner.app-li-has-aside h3 {
    margin-top: 8px;
}

.app-density-condensed .app-list-instruction .app-grid-desc {
    padding-left: 4px;
}

.app-density-condensed .app-page-header h1 {
    font-size: 24px;
}

.app-density-condensed .app-page-header h2,
.app-density-condensed [data-container="collapsible"] [data-container="toggle"] .app-collapsible-toggle-text {
    font-size: 12px;
}

.app-density-condensed .ui-listview .app-grid-header {
    margin-left: -16px;
}

.app-density-condensed .app-grid-header {
    margin-top: 4px;
    margin-bottom: 0;
}

.app-density-condensed .app-echo .app-grid-header {
    margin-top: 0;
}

.app-density-condensed .app-bar-heading .app-grid-header {
    /*margin-left: -15px !important;*/
    margin-top: 4px !important;
}

    .app-density-condensed .app-listview.app-grid .dv-item .ui-btn > span:not(.app-icon),
    .app-density-condensed .app-listview.app-grid .app-list-instruction .app-grid-header span:not(.app-icon),
    .app-density-condensed .app-bar-heading .app-grid-header span:not(.app-icon) {
        padding: 5px 0 5px 0px;
        margin-left: 16px;
    }

.app-density-condensed .app-bar-heading .app-grid-header {
    margin-bottom: -7px !important;
}

.app-density-condensed .app-listview.app-grid .dv-item .ui-btn,
.app-density-condensed .app-listview.app-grid .app-list-instruction .app-grid-header,
.app-density-condensed .app-bar-heading .app-grid-header {
    padding-right: 9px !important;
}

.app-density-condensed .ui-mini.ui-btn {
    font-size: 12px;
}

    .app-density-condensed .ui-mini.ui-btn:not(.ui-btn-icon-top) {
        padding-top: .5em;
        padding-bottom: .5em;
    }

    .app-density-condensed .ui-mini.ui-btn.ui-btn-icon-top {
        padding-top: 2.3em;
        padding-bottom: .5em;
    }

.app-density-condensed .ui-btn-icon-top:after {
    top: .2625em;
}


.app-density-condensed .app-tabs .ui-btn {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px !important;
}

.app-density-condensed .app-listview.ui-listview > li p {
    margin: 2px 0 1px 0;
}

/*.app-density-condensed .app-field-label-after {
    margin-top: -2px;
    font-size: 10px;
}

.app-density-condensed .app-field-label-before {
    margin-bottom: -1px;
}
*/
.app-density-condensed li.app-info .appname {
    font-size: 14px;
}


.app-density-condensed .app-listview li.app-li-has-corner.ui-li-has-thumb .ui-li-aside {
    left: 6.35em;
}

.app-density-condensed .ui-li-thumb {
    margin-top: -30px;
}

.app-density-condensed .ui-panel .ui-li-thumb {
    margin-top: -40px;
}


.app-density-condensed .app-sidebar .ui-li-thumb, .app-density-condensed .app-panel-info-view .ui-li-thumb {
    margin-top: 0;
}

/*.app-density-condensed .app-echo .app-echo-toolbar > .app-echo-controls,
.app-density-condensed .app-bar-actions > .app-bar-controls,
.app-density-condensed .app-bar-header > .app-bar-strip,
.app-density-condensed .app-bar-footer > .app-bar-strip {
    height: 30px;
}
*/
/*.app-density-condensed .app-lookup-input {
    height: 30px;
}

.app-density-condensed .app-lookup.ui-btn {
    margin-top: -30px;
}*/

.app-density-condensed .app-grid .app-divider.app-calculated .app-static-text {
    font-size: 10px;
}


/*.app-density-condensed .app-grid-header .app-btn-check,
.app-density-condensed .app-bar-heading .app-grid-header .app-btn-check {
    margin-top: 1px !important;
}*/

/* default webkit scrollbars on desktop */


.app-density-condensed .app-echo .app-echo-toolbar > .app-echo-controls > .ui-mini,
.app-density-condensed .app-bar-actions > .app-bar-controls > .ui-mini,
.app-density-condensed .app-bar-header > .app-bar-strip > .ui-mini,
.app-density-condensed .app-bar-footer > .app-bar-strip > .ui-mini {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    line-height: normal;
}

.app-density-condensed .app-bar-header .app-bar-strip,
.app-density-condensed .app-bar-footer .app-bar-strip {
    height: 30px;
    min-height: 30px;
}


.app-density-condensed .app-grid-header .app-btn-check {
    margin-left: 15px !important;
}

.app-density-condensed .app-bar-heading .app-grid-header .app-btn-check {
    margin-left: 14px !important;
    margin-right: 2px !important;
}

.app-density-condensed .app-action-column {
    font-size: 11px;
}

.ui-shadow, .ui-focus {
    box-shadow: none !important;
}

iframe {
    background-color: #fff;
}

.ui-btn.app-keep-open {
    font-weight: normal;
}

/* drop box */

img[data-href] {
    cursor: pointer;
}

.app-drop-box-input {
    padding: .5em;
}

.app-has-image + .app-drop-box {
    margin-top: .5em;
}

.app-drop-box {
    border: 3px dashed #ccc;
    padding: 0;
    background-color: transparent;
    cursor: pointer;
    margin-right: 1em;
    max-width: 768px;
    position: relative;
    padding-bottom: 32px;
}

    .app-drop-box.app-empty {
        padding: 0;
        text-align: center;
        font-size: 16px;
        color: #ccc;
        text-align: center;
    }

    .app-drop-box.app-had-blob {
        min-height: 80px;
    }

    .app-drop-box.app-dragging {
        border-color: #38c;
    }

    .app-drop-box img {
        max-width: 100%;
    }

    .app-drop-box div {
        padding: .5em;
    }

    .app-drop-box progress {
        margin-top: -4px;
        width: 100%;
        height: 4px;
        display: block;
    }

    .app-drop-box .ui-btn {
        position: absolute;
        width: 38px;
        height: 32px;
        bottom: 0;
        margin: 0;
    }


    .app-drop-box .app-draw {
        left: 36px;
    }

    .app-drop-box .ui-btn .material-icon {
        left: 50%;
        margin-left: -12px;
    }


    .app-drop-box.app-signature {
        line-height: normal;
        min-height: 0;
        padding: 0;
        margin: 0 !important;
    }


        .app-drop-box.app-signature canvas {
            display: block;
        }

        .app-drop-box.app-signature + .app-clear {
            position: absolute;
            bottom: .5em;
            left: .5em;
            top: auto !important;
            margin: 0 !important;
            cursor: pointer;
        }

        .app-drop-box.app-signature.app-empty + .app-clear {
            display: none;
        }

    .app-drop-box .app-drop-text {
        margin: 1em 0;
        display: inline-block;
    }

.app-has-image + .app-signature {
    margin-top: 8px !important;
}

.app-desktop .app-drop-box:focus {
    outline: none;
    background-color: #f0f0f0;
}

.app-min-xs .app-drop-box.app-empty {
    font-size: 16pt;
}

.app-min-sm .app-drop-box.app-empty {
    font-size: 20pt;
}


/* advanced search */

.app-promo-filler {
    height: 65px;
    margin: 0;
    padding: 0;
    clear: both;
}

body:not(.app-desktop) li .ui-btn.ui-btn-icon-notext.app-btn-more:hover:not(.ui-btn-active) {
    background: none !important;
}

/* panel breakpoints */

.ui-panel:not(.app-sidebar) {
    width: 16em;
}

.ui-panel-dismiss-open.ui-panel-dismiss-position-left {
    left: 16em;
}

.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
    right: 16em;
}

.ui-panel-dismiss {
    z-index: 1003;
}

@media (min-width: 360px) {
    .ui-panel:not(.app-sidebar) {
        width: 20em;
    }

    .ui-panel-position-left {
        left: -20em;
    }

    .ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
    .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
        transform: translate3d(-20em,0,0);
    }

    .ui-panel-position-right {
        right: -20em;
    }

    .ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
    .ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
        transform: translate3d(20em,0,0);
    }

    .ui-panel-page-content-position-left {
        left: 20em;
        right: -20em;
    }

    .ui-panel-animate.ui-panel-page-content-position-left {
        transform: translate3d(20em,0,0);
    }

    .ui-panel-page-content-position-right {
        left: -20em;
        right: 20em;
    }

    .ui-panel-animate.ui-panel-page-content-position-right {
        transform: translate3d(-20em,0,0);
    }
}

.ui-panel-dismiss-open.ui-panel-dismiss-position-left {
    left: 0;
}

.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
    right: 0;
}


.app-bootstrap.app-page-content.app-editor-active {
    margin-left: 3px !important;
    margin-right: 3px !important;
    margin-top: 3px !important;
}

/**[data-editable][contenteditable]:focus,
.app-editor-focus {
    outline: dashed !important;
}*/

/* group by */

.app-bar-heading .app-bar-text .app-group {
    padding-top: .25em;
    font-weight: 600;
}

.app-bar-heading .app-group-title, .app-bar-heading .app-group-path, .app-bar-heading .app-group-info-value, .app-bar-heading .app-group-info-value-muted {
    cursor: pointer;
}

.ui-listview .app-group {
    font-weight: 600;
    white-space: normal;
    cursor: pointer;
    padding-right: 3em;
    padding-left: 16px;
}

    .ui-listview .app-group .app-group-path .app-group-path-value:after,
    .app-bar-heading .app-bar-text .app-group .app-group-path .app-group-path-value:after {
        content: '; ';
        margin-right: .5em;
    }

    .ui-listview .app-group .app-icon-carat-d, .ui-listview .app-group .app-icon-carat-u {
        right: 1em;
        position: absolute;
    }

.app-group .app-group-count {
    font-weight: normal;
}

    .app-group .app-group-count:before {
        content: ' (';
    }

    .app-group .app-group-count:after {
        content: ')';
    }

.app-group .app-group-info {
    display: block;
    font-size: 18px;
    font-weight: 600;
}


    .app-group .app-group-info .app-group-info-value-muted {
        font-weight: normal;
    }

        .app-group .app-group-info .app-group-info-value-muted:before {
            content: ' ';
        }

.ui-listview .app-group .app-group-info.app-group-info-duplicate {
    display: none;
}

@media (min-width: 40em) {


    .ui-listview.app-cardview .app-group {
        border-top-width: 1px;
        border-bottom-width: 1px;
        clear: both;
        float: none !important;
        width: auto !important;
        top: -1px !important;
        margin-bottom: -1px;
    }
}

.app-bar-heading .app-group {
    font-size: 16px;
}

.app-view-instruction {
    line-height: 1.25em;
    display: inline-block;
    padding: .5em 28px .5em 0;
    position: relative;
}

.app-bar-heading .app-grid-header + .app-group,
.app-bar-heading .app-view-instruction:not(.app-hidden) + .app-group {
    border-top: solid 1px #ddd;
    margin-top: 6px;
    margin-left: -1.5em;
    padding-left: 1.5em;
    margin-right: -.25em;
    padding-right: .25em;
}

.app-density-compact .app-bar-heading .app-group {
    font-size: 14px;
}

.app-density-condensed .app-bar-heading .app-group {
    font-size: 12px;
    margin-top: 8px;
}

.app-echo-grid-hscrollbar {
    border-top-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom-width: 1px !important;
    padding-bottom: 1px !important;
}

/* fixed columns in grid */

.app-frozen-spacer {
    position: absolute !important;
    left: -16px;
    top: 0;
    bottom: 0;
    width: 200px;
    height: 100%;
    display: inline-block !important;
}

.app-density-compact .app-frozen-spacer {
    left: -17px;
}

.app-density-comfortable .app-frozen-spacer {
    left: -17px;
}

.app-grid-header .app-frozen-spacer {
    left: -17px;
}

.app-bar-heading .app-grid-header .app-frozen-spacer {
    left: -18px;
}

.app-density-compact .app-bar-heading .app-grid-header .app-frozen-spacer {
    left: -16px;
}

.app-density-comfortable .app-bar-heading .app-grid-header .app-frozen-spacer {
    left: -16px;
}

.app-grid-header {
    position: relative;
    background-color: #f1f1f1;
}

    .app-grid-header .app-frozen-spacer,
    .app-frozen-spacer {
        border-right: solid 1px #c0c0c0;
        box-shadow: 0 0 12px rgba(0,0,0,0.2);
        background-color: #fff;
        z-index: 1;
    }

.ui-page .app-bar-heading .app-grid-header,
.ui-page .app-bar-heading .app-frozen-spacer {
    background-color: #fff;
}

.app-frozen {
    position: relative;
    z-index: 1;
}

.app-sidebar .ui-btn:not(.ui-btn-active):not(.app-selected) {
    background-color: transparent;
}

.app-sidebar .app-context-field .ui-btn:not(.ui-mini):not(.ui-btn-icon-notext) {
    padding-left: 16px;
    padding-right: 2.5em;
}

/*body:not(.app-has-minisidebar-left) .app-sidebar .ui-btn:not(.ui-mini):not(.ui-btn-icon-notext).app-group-actions {
    padding-left: 16px !important;
}*/


.app-has-minisidebar-left .app-sidebar .app-context-field .ui-btn:not(.ui-mini):not(.ui-btn-icon-notext),
.app-has-minisidebar-left .app-sidebar .ui-btn:not(.ui-mini):not(.ui-btn-icon-notext) {
    width: 56px;
    padding-left: 0;
    padding-right: 0;
}

.app-has-minisidebar-left .app-sidebar .app-group-actions span {
    font-size: 16px !important;
    line-height: 16px;
    position: absolute;
    text-align: center;
    width: 56px;
    left: 0;
    font-weight: 600;
    top: 50%;
    margin-top: -8.5px;
}

.app-has-minisidebar-left .app-sidebar .app-group-actions i {
    left: auto !important;
    margin-left: auto;
    right: 2px !important;
    font-size: 18px;
    line-height: 24px;
}

/*.app-has-minisidebar-left .app-sidebar .app-group-actions:not(.ui-btn-active):not(:hover) span {
    color: #777;
}*/

.app-context-field .ui-btn-icon-left:after {
    left: auto;
    right: 8px !important;
    content: 'chevron_right';
}

.app-sidebar .app-context-field.ui-li-static {
    padding-bottom: 5px;
    padding-top: 5px;
}

.app-bar-aggregates {
    margin: 0;
    padding: 0;
    position: relative;
    border-bottom: solid 1px;
}

    .app-bar-aggregates .app-listview {
        margin: 0;
    }

    .app-bar-aggregates .app-calculated {
        border-top-width: 0 !important;
    }

    .app-bar-aggregates .app-bar-aggregate-list {
        padding: 0 .5em;
    }

.app-bar-footer.ui-bar-inherit {
    /*box-shadow: 3px 0 6px 0 rgba(0,0,0,.6);*/
    border-color: #ccc;
    /* box-shadow: 12px 0 6px 0 rgba(0,0,0,0.2);;*/
    box-shadow: 4px 0 6px 0 rgba(0,0,0,0.3);
    z-index: 998;
}

.app-calculated .app-field-separator {
    display: inline-block;
    width: 1px;
    background-color: transparent !important;
    margin-left: 5px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    margin-right: -10px;
    position: relative;
    height: 20px !important;
}

.app-density-condensed .app-calculated .app-field-separator {
    height: 16px !important;
    /*height: 30px !important;*/
}

.app-calculated .app-static-text {
    display: none;
}

.app-grid .app-calculated .app-static-text {
    display: block;
}

.app-grid-header .app-field-separator {
    display: inline-block;
    width: 1px;
    margin-left: 5px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    margin-right: -10px;
    cursor: col-resize;
    position: relative;
    background-color: transparent !important;
    touch-action: none;
}

    .app-grid-header .app-field-separator:after,
    .app-calculated .app-field-separator:after {
        content: ' ';
        display: inline-block;
        position: absolute;
        top: 0;
        left: 2px;
        width: 1px;
        bottom: 0;
        background-color: #ddd;
    }

.app-calculated .app-field-separator:after {
    top: 0;
    bottom: 0;
}

.app-grid-header {
    border-top: solid 1px #ddd;
}

.app-echo .app-grid-header {
    border-bottom: solid 1px;
    margin-bottom: 0;
}

.app-density-compact .app-echo .app-grid-header {
    margin-bottom: 0;
}


.app-density-condensed .app-echo .app-grid-header {
    margin-bottom: 0;
}

.app-bar-text-instruction-hidden .app-view-instruction,
.app-bar-text-instruction-hidden .app-group:not(.app-group-fixed) {
    display: none;
}

.app-bar-heading .app-bar-text-instruction-hidden .app-grid-header {
    border-top-width: 0 !important;
    margin-top: -4px !important;
}

.app-grid-header-no-description {
    margin-top: -15px !important;
}

.app-bar-heading .app-grid-header.app-grid-header-no-description {
    margin-top: -5px !important;
}

.app-density-condensed .app-grid-header-no-description {
    margin-top: -13px !important;
}

/* "tiny" font option */

body.app-font-tiny,
.app-font-tiny input,
.app-font-tiny select,
.app-font-tiny textarea,
.app-font-tiny button,
.app-font-tiny .ui-btn {
    font-family: -apple-system, Tahoma, sans-serif;
}

.app-font-tiny.app-android,
.app-font-tiny.app-android input,
.app-font-tiny.app-android select,
.app-font-tiny.app-android textarea,
.app-font-tiny.app-android button,
.app-font-tiny.app-android .ui-btn {
    font-family: "Google Sans", Roboto, "Segoe UI", sans-serif;
}

.app-font-tiny .app-wrapper > *,
.app-font-tiny .app-wrapper label,
.app-font-tiny .app-listview.app-grid .dv-item .ui-btn,
.app-font-tiny .ui-btn:not(.ui-mini):not(.ui-btn-icon-notext),
.app-font-tiny .app-listview.ui-listview > li .ui-li-aside,
.app-font-tiny .ui-li-count,
.app-font-tiny .app-listview.ui-listview > li p,
.app-font-tiny .app-sidebar .app-wrap,
.app-font-tiny .ui-panel-inner .app-wrap,
.app-font-tiny .app-sidebar .ui-li-static,
.app-font-tiny .app-panel-info-view .ui-listview .ui-li-static,
.app-font-tiny .ui-panel .ui-listview .ui-li-static,
.app-font-tiny .ui-popup,
.app-font-tiny .ui-popup label,
.app-font-tiny .app-echo-toolbar h3,
.app-font-tiny .app-bar-actions h3,
.app-font-tiny .app-echo-toolbar .app-echo-see-all,
.app-font-tiny .app-echo-inner .app-echo-empty,
.app-font-tiny .app-listview.app-grid .dv-item .ui-btn span,
.app-font-tiny .app-menu-strip,
.app-font-tiny .app-wrapper .app-page-content .ui-listview > li p,
/* grid headers */
.app-font-tiny .app-listview.app-grid .app-list-instruction .app-grid-header span:not(.app-icon),
.app-font-tiny .app-bar-heading .app-grid-header span:not(.app-icon),
/* sidebar */
.app-font-tiny .app-sidebar .ui-btn:not(.ui-mini):not(.ui-btn-icon-notext),
/* action bar buttons */
.app-font-tiny .app-echo .app-echo-toolbar > .app-echo-controls > .ui-mini,
.app-font-tiny .app-bar-actions > .app-bar-controls > .ui-mini,
.app-font-tiny .app-bar-header > .app-bar-strip > .ui-mini,
.app-font-tiny .app-bar-footer > .app-bar-strip > .ui-mini,
/* toolbar title */
.app-font-tiny .ui-header .ui-title span,
/* group heading bar */
.app-font-tiny .app-bar-heading .app-group,
/* tabs */
.app-font-tiny .app-tabs .ui-btn,
/* tabs */
.app-font-tiny .app-tooltip,
/* user name on the toolbar */
.app-font-tiny .app-back-text,
.app-font-tiny .app-view-description {
    font-size: 8.5pt !important;
}

/* allow to override the font size */
.app-font-tiny .app-data-input-popup {
    font-size: 8.5pt;
}

.app-tooltip.app-large {
    font-size: 14px !important;
}

/* "tiny font */

.app-font-tiny.app-density-condensed .app-grid-header .app-btn-check {
    margin-left: 16px !important;
}

/*.app-font-tiny .app-listview.app-grid .app-btn-check,
.app-font-tiny  .app-grid-header .app-btn-check {
    margin-right: 2px !important;
}*/

.app-font-tiny .app-listview .app-btn-check,
.app-font-tiny .app-bar-heading .app-grid-header .app-btn-check {
    width: 18px;
    height: 18px;
    min-height: 18px;
    min-width: 18px;
}

.app-font-tiny .app-action-column .app-action-column-button {
    padding: 3px 7px;
    margin-bottom: 7px;
    margin-right: 7px;
}


.app-drag-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #38c;
    transition: transform 0 linear;
    z-index: 1002; /* display under Promo button */
    transition: left 0 linear;
    cursor: ew-resize;
}

.app-drag-header-field {
    position: absolute;
    display: inline-block;
    transition: left 0 linear,top 0 linear;
    background-color: #38c;
    color: #fff;
    z-index: 9999; /* display above everything else */
    cursor: move;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-popup .ui-listview > li p .app-item-desc {
    font-size: 12px;
    max-width: 320px;
}

/* embedded echos */

.app-wrapper > .app-echo-embedded {
    margin-top: .5em !important;
    margin-bottom: 0 !important;
}

.app-echo-embedded {
    padding: 0;
    position: absolute;
    border-top-width: 0;
    /*border: solid 1px red;*/
}

.app-echo .app-list-instruction,
.app-echo .dv-item:not(.app-hidden),
.app-echo .app-echo-grid-hscrollbar,
.app-echo .app-grid .ui-last-child {
    border-left: solid 1px #ddd;
    border-right: solid 1px #ddd;
}

.app-echo-inner > .app-onecolumnview,
.app-echo-inner > .app-cardcolumn {
    border-top: solid 1px #ddd;
}

.app-echo-inner > .app-cardcolumn {
    margin-bottom: 0;
    vertical-align: top;
    margin-bottom: 4px;
}

/************************/
/* Forms Layout Engine  */
/************************/
[data-layout] {
    padding: 0;
    position: relative;
    /*overflow: hidden;*/
    /*border-bottom: solid 1px #ddd;*/
    /*background-color: #fff;*/
}

[data-layout="form"] {
    background-color: #fff;
    margin-left: auto !important;
    margin-right: auto !important;
    border-bottom: solid 0 #ddd;
}

[data-layout] [data-container="simple"] {
    padding: 0;
    margin: 0;
    border-style: solid;
    border-width: 0;
}


[data-layout] .app-container-collapsed > [data-container="simple"] {
    display: none;
}

[data-layout] [data-container="row"] {
    padding: 4px 8px;
}

.app-density-compact [data-layout] [data-container="row"] {
    padding-left: 9px;
    padding-right: 9px;
}

.app-density-condensed [data-layout] [data-container="row"] {
    padding-left: 10px;
    padding-right: 10px;
}


[data-layout] [data-container="tab"] {
    /*margin-top: .5em;*/
    padding: 1em 16px;
    /*border: solid 1px #ddd;
    border-radius: .31em;*/
    /*border-bottom: solid #ddd 1px;*/
    display: none;
}

.app-tab-content:not(.app-tab-active) {
    display: none;
}

[data-layout] [data-container="tabset"] > [data-container="tab"].app-tab-active {
    display: block;
}

.app-control-footer {
    display: block !important;
    color: #808080;
    font-style: italic;
    visibility: visible !important;
    padding-left: .5em;
    padding-top: .25em;
    text-transform: none;
}

[data-text-action] .app-control-footer {
    max-width: 90%;
}

[data-container="row"] {
    border-top: solid 1px #ddd;
}

    [data-container="row"] [data-control="label"] {
        min-width: 34%;
        max-width: 34%;
        display: inline-block;
        vertical-align: top;
    }

    [data-container="row"][data-columns="2"] [data-control="label"] {
        min-width: 22%;
        max-width: 22%;
    }

    [data-container="row"][data-columns="3"] [data-control="label"] {
        min-width: 14%;
        max-width: 14%;
    }

    [data-container="row"][data-merge="true"] {
        border-top-width: 0;
        padding-top: 0;
    }

    [data-container="row"] + [data-container="row"][data-merge="true"] {
        margin-top: -2px;
    }

[data-container="tab"] [data-container="collapsible"],
[data-layout] [data-container="column"] > [data-container="collapsible"] {
    border-width: 1px;
    box-shadow: 1px 1px 5px 0 rgba(0,0,0,.1);
}

    [data-layout] [data-container="column"] > [data-container="collapsible"][data-header-text="none"] {
        border-top-width: 0;
    }

[data-container="collapsible"][data-header-text="none"] [data-container="row"]:first-of-type {
    padding-top: 8px;
}

[data-container="collapsible"] {
    display: block;
    padding: 0;
    margin: 0;
    border-width: 1px 0;
    border-style: solid;
    position: relative;
    overflow: hidden;
}

    [data-container="collapsible"] [data-container="toggle"] {
        padding: 11px 48px 11px 16px;
        display: block;
        font-size: 0;
        position: relative;
        cursor: pointer;
        overflow: hidden;
        user-select: none;
    }

        [data-container="collapsible"] [data-container="toggle"].ui-btn-active {
            color: #000;
        }

        [data-container="collapsible"] [data-container="toggle"] .app-collapsible-toggle-text {
            text-transform: uppercase;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 80%;
            display: inline-block;
            overflow: hidden;
            line-height: 1em;
            height: 1em;
            font-size: 14px;
        }

/*.app-desktop [data-container="collapsible"] [data-container="toggle"]::after {
    transition: background-color ease-in 120ms;
    background-color: transparent;
    content: ' ';
}
*/
.app-input-focus-outline [data-container="collapsible"]:not(.app-container-collapsed),
.app-input-focus-underline [data-container="collapsible"]:not(.app-container-collapsed) {
    padding-bottom: 1px;
}

.app-desktop [data-container="collapsible"] [data-container="toggle"]:hover:not(.ui-btn-active):after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


/*[data-container="collapsible"].app-container-collapsed > [data-container="toggle"] .app-icon-carat {
    transform: none;
}*/



/*[data-container="collapsible"] [data-container="toggle"]:not(.ui-btn-active) .app-collapsible-toggle-button {
    color: #808080;
}*/

[data-container="collapsible"][data-header-text="none"] {
    border-top-width: 0;
}

[data-container] [data-control="description"] {
    color: #808080 !important;
    font-size: 11px;
}

[data-container="row"] [data-control="description"] {
    padding: .75em 0 0 0;
}

.app-density-comfortable [data-container] [data-control="description"] {
    font-size: 12px;
}

[data-container="row"] [data-control="label"] {
    text-align: right;
}

.app-display-tablet [data-container] [data-control="description"] {
    max-width: 992px;
}


[data-container="column"] {
    display: inline-block;
    padding: 0;
    margin: 0 -2px 1px -1px;
    max-width: 992px;
    vertical-align: top;
}

    [data-container="column"][data-centered="true"] {
        margin-left: auto;
        margin-right: auto;
    }

    [data-container="column"] [data-container="collapsible"] {
        margin: 1em 0 1em 1em;
    }

    [data-container="column"]:last-of-type [data-container="collapsible"] {
        margin-right: 1em;
    }

[data-container="collapsible"] + [data-container="collapsible"],
[data-container="collapsible"] + [data-container="simple"],
[data-container="simple"] + [data-container="collapsible"],
[data-container="simple"] + [data-container="simple"] {
    margin-top: 1em;
}

[data-layout] > [data-container="collapsible"] + [data-container="collapsible"][data-header-text="none"],
[data-layout] > [data-container="collapsible"] + [data-container="simple"][data-header-text="none"],
[data-layout] > [data-container="simple"] + [data-container="collapsible"][data-header-text="none"],
[data-layout] > [data-container="simple"] + [data-container="simple"][data-header-text="none"] {
    margin-top: -1px;
}

[data-container="row"] [data-control="field"] {
    display: inline-block;
    min-width: 59%;
    max-width: 59%;
    vertical-align: top;
}

[data-container="row"][data-columns="2"] [data-control="field"] {
    min-width: 22%;
    max-width: 22%;
}

[data-container="row"][data-columns="3"] [data-control="field"] {
    min-width: 14%;
    max-width: 14%;
}

[data-wrap="true"] [data-hide-when="wrap"] {
    display: none !important;
}

[data-wrap="true"] [data-container="row"] [data-control="label"],
[data-wrap="true"] [data-container="row"] [data-control="field"] {
    min-width: 100%;
    max-width: 100%;
    display: block;
    padding-right: 0;
    text-align: left;
    box-sizing: border-box;
}

[data-wrap="true"] [data-container="row"] [data-control="label"] {
    font-size: 12px;
    text-align: left;
}

.app-density-condensed [data-wrap="true"] [data-container="row"] [data-control="label"] .app-control-inner {
    padding-left: 6px;
    padding-right: 6px;
}

.app-density-compact [data-wrap="true"] [data-container="row"] [data-control="label"] .app-control-inner {
    padding-left: 7px;
    padding-right: 7px;
}

[data-wrap="true"] [data-container="row"] [data-control="label"] .app-control-inner {
    padding-left: 8px;
    padding-right: 8px;
}

/*.app-density-comfortable [data-wrap="true"] [data-container="row"] [data-control="label"] {
    font-size: 14px;
}
*/
[data-wrap="true"] [data-container="row"] .app-field-group {
    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: left;
    vertical-align: top;
}

[data-wrap="true"] [data-container="row"][data-columns="2"] .app-field-group {
    min-width: 49%;
    max-width: 49%;
}

[data-wrap="true"] [data-container="row"][data-columns="3"] .app-field-group {
    min-width: 32%;
    max-width: 32%;
}

[data-wrap="true"] [data-container="row"][data-columns="4"] .app-field-group {
    min-width: 24%;
    max-width: 24%;
}

[data-control] {
    position: relative;
}

[data-control="label"] {
    cursor: default;
}

    [data-control="label"] .app-control-inner {
        position: relative;
    }

    [data-control="label"].app-has-icon .app-icon,
    .app-desktop [data-control="label"].app-has-icon .app-icon:not(.ui-btn-active):hover {
        right: 21px;
        user-select: none;
        /*opacity: .75;*/
    }

.app-has-icon-label [data-wrap="true"] [data-container="row"]:not(.app-has-description) {
    padding-left: 48px !important;
}

.app-has-icon-label [data-wrap="true"] [data-container] [data-control="label"].app-has-icon {
    position: absolute;
    left: 0;
    font-size: 1em;
}


    .app-has-icon-label [data-wrap="true"] [data-container] [data-control="label"].app-has-icon .app-icon {
        left: 16px;
        right: auto;
    }

.material-icon-none {
    visibility: hidden;
}

[data-form-max] [data-layout="form"] {
    padding-top: 1em;
}

[data-form-max] .app-page-header.app-has-icon {
    padding-left: 1em;
}

[data-form-max="xs"]:not(.app-min-sm) .app-page-header i:first-of-type,
[data-form-max="sm"]:not(.app-min-md) .app-page-header i:first-of-type,
[data-form-max="md"]:not(.app-min-lg) .app-page-header i:first-of-type,
[data-form-max="lg"]:not(.app-min-xl) .app-page-header i:first-of-type {
    visibility: hidden;
}

[data-form-max="xs"]:not(.app-page-modal2) .app-page-header h1,
[data-form-max="xs"]:not(.app-page-modal2) .app-page-header h2,
.ui-page[data-form-max="xs"]:not(.app-page-modal2) .app-page-header .app-view-description,
[data-form-max="xs"] [data-container="collapsible"] {
    max-width: 480px;
    margin: 0 auto;
}


[data-form-max="sm"]:not(.app-page-modal2) .app-page-header h1,
[data-form-max="sm"]:not(.app-page-modal2) .app-page-header h2,
.ui-page[data-form-max="sm"]:not(.app-page-modal2) .app-page-header .app-view-description,
[data-form-max="sm"] [data-container="collapsible"] {
    max-width: 576px;
    margin: 0 auto;
}

[data-form-max="md"]:not(.app-page-modal2) .app-page-header h1,
[data-form-max="md"]:not(.app-page-modal2) .app-page-header h2,
.ui-page[data-form-max="md"]:not(.app-page-modal2) .app-page-header .app-view-description,
[data-form-max="md"] [data-container="collapsible"] {
    max-width: 768px;
    margin: 0 auto;
}

[data-form-max="lg"]:not(.app-page-modal2) .app-page-header h1,
[data-form-max="lg"]:not(.app-page-modal2) .app-page-header h2,
.ui-page[data-form-max="lg"]:not(.app-page-modal2) .app-page-header .app-view-description,
[data-form-max="lg"] [data-container="collapsible"] {
    max-width: 992px;
    margin: 0 auto;
}


[data-control="field"] hr {
    height: 1px;
    border-width: 0;
}

[data-container="row"] [data-control] .app-control-inner {
    padding: 3px 0.5em;
    display: inline-block;
}

[data-container="row"] [data-control="text"] .app-control-inner {
    color: #808080;
    padding-left: 0;
    padding-right: 0;
}
/*.app-font-tiny [data-container="row"] [data-control] .app-control-inner {
    padding-top: 3px;
    padding-bottom: 3px;
}*/
[data-state="write"] [data-control="field"] {
    color: #000;
}

[data-control].app-has-changed,
[data-control].app-has-changed .app-data-input {
    font-weight: 600;
}

[data-state="write"] [data-control].app-null,
[data-state="write"] [data-control].app-has-helper,
[data-state="write"] [data-control] .app-data-input-placeholder,
input::placeholder {
    color: #808080;
    opacity: 1;
    text-transform: none;
    font-style: italic;
}

[data-state="write"] [data-control="label"],
[data-state="write"] [data-input="none"] {
    color: #808080;
}

    [data-state="write"] [data-control="label"][data-required="true"]:not(.app-has-icon) .app-control-inner::after {
        content: 'asterisk';
        font-family: 'Material Icons' !important;
        font-weight: normal;
        font-style: normal;
        font-size: .8em;
        line-height: 1em;
        letter-spacing: normal;
        text-transform: none;
        display: inline;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
        text-indent: 0;
        position: relative;
        padding-left: .25em;
    }

[data-state="write"] [data-container="collapsible"]:not([data-wrap="true"]) [data-container="row"] [data-control="label"][data-required="true"]:not(.app-has-icon) .app-control-inner::before {
    content: 'asterisk';
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    font-size: .8em;
    line-height: 1em;
    letter-spacing: normal;
    text-transform: none;
    display: inline;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    text-indent: 0;
    position: relative;
    padding-right: .25em;
}

[data-state="write"] [data-container="collapsible"]:not([data-wrap="true"]) [data-container="row"] [data-control="label"][data-required="true"] .app-control-inner::after {
    content: '';
    padding: 0;
    /* font-family: 'Times New Roman';*/
}


[data-control] .app-has-image {
    border: 1px solid #c0c0c0;
    border-width: 1px !important;
    background-color: #fff;
    display: inline-block;
    height: 80px;
}

    [data-control] .app-has-image img {
        width: 80px;
        height: 80px;
    }

[data-control] .app-link-blob {
    text-decoration: none;
    text-transform: uppercase;
}


[data-input="blob"] .app-control-inner {
    min-width: 100%;
    max-width: 100%;
}

.app-control-inner.app-has-map {
    min-width: 100%;
}

[data-container][data-wrap="true"] .app-control-inner.app-has-map {
    min-width: 95%;
}

[data-control].app-has-value-icon .app-control-inner {
    padding-left: 30px;
}

[data-control].app-has-value-icon .app-value-icon {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    position: absolute;
    left: 4px;
    width: 24px;
    height: 24px;
    top: 50%;
    margin-top: -12px;
    opacity: .8;
    overflow: hidden;
}

[data-control="dataview"] {
    display: block;
    width: auto;
    min-height: 0;
    outline: 0;
}

[data-container="row"] [data-control="dataview"] {
    margin: .25em .5em .5em .5em;
}

.app-desktop [data-container="row"] [data-control="dataview"] {
    margin-right: 1em;
}

/*[data-container="row"] [data-control="dataview"] {
    padding-top: 1em;
    padding-bottom: 0;
}*/

.app-echo-embedded {
    padding-top: 0;
    padding-bottom: .25em;
}


[data-container="panel"] {
    padding: 1em;
}

[data-designer] [data-container] [data-control="label"] {
    font-weight: 600;
    text-align: right;
}


[data-control="label"] {
    padding: 0 1em 0 0;
}

[data-control="action"] {
    white-space: nowrap;
    display: inline-block;
    text-transform: uppercase;
}

    [data-control="action"] .app-action-column {
        position: static;
        left: auto;
        top: auto;
    }

        [data-control="action"] .app-action-column .app-action-column-button {
            cursor: pointer;
            margin: 0;
            white-space: normal;
        }

body:not(.app-desktop) [data-control="action"] .app-action-column .app-action-column-button.ui-btn-active {
    color: #fff;
    background-color: #38c;
}


[data-control="action"].app-disabled .app-action-column .app-action-column-button,
.app-desktop [data-control="action"].app-disabled .app-action-column .app-action-column-button:hover {
    color: #808080;
    border-color: #808080;
    background-color: #fff !important;
    cursor: default;
}


[data-designer] [data-container],
[data-designer] [data-container] [data-control] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    line-height: normal;
    padding: 0;
}

    [data-designer] [data-container] [data-control] {
        height: 2em;
        display: inline-block;
    }

        [data-designer] [data-container] [data-control] .app-control-inner {
            padding: 0.25em 0.5em;
            display: inline-block;
        }

/***************/
/* tooltip     */
/***************/

.app-tooltip {
    font-size: 12px;
    background-color: #282828;
    color: #fff;
    padding: 10px 12px;
    position: absolute;
    z-index: 200000 /*9999*/;
    max-width: 400px;
    display: inline-block;
    border-radius: 3px;
    box-shadow: 0 0 5px #808080;
    cursor: default;
    overflow: hidden;
}

    .app-tooltip table {
        border-spacing: 0;
    }

        .app-tooltip table tr td {
            vertical-align: top;
        }

    .app-tooltip b {
        color: #38c /* #337ab7 #2aabd2  #5cb85c */;
    }

    .app-tooltip table tr td:nth-child(1) {
        color: #aaa;
        padding-right: 8px;
    }
/*******************/
/* Universal Input */
/*******************/

::-ms-clear {
    display: none;
}

.app-icon.app-text-action {
    cursor: pointer;
    position: absolute;
    user-select: none;
    margin-left: 7px;
    z-index: 1;
}

[data-text-action="copy"] {
    padding-right: 32px !important;
}

.app-data-input-button + .app-icon.app-text-action {
    margin-left: 24px;
}


[data-input-enhancement] .app-data-input-button {
    right: 0;
}

    [data-input-enhancement] .app-data-input-button .app-caret::before {
        content: 'more_horiz';
        font-size: 20px;
    }

.app-android [data-input-enhancement] .app-data-input-button .app-caret::before {
    content: 'more_vert';
}

[data-input-enhancement].app-has-input-button .app-control-inner {
    padding-right: 24px;
}



.app-input-slider {
    display: inline-block;
    height: 40px;
    position: relative;
    width: 100%;
}

    .app-input-slider .app-input-slider-track {
        height: 2px;
        position: absolute;
        top: 50%;
        margin-top: -1px;
        opacity: .38;
        border-radius: 1px;
        width: 100%;
        cursor: pointer;
    }

    .app-input-slider .app-input-slider-track-value {
        height: 4px;
        position: absolute;
        top: 50%;
        margin-top: -2px;
        border-radius: 2px;
        cursor: pointer;
    }

    .app-input-slider .app-input-slider-halo {
        display: inline-block;
        position: absolute;
        width: 34px;
        height: 34px;
        border-radius: 17px;
        margin-left: -17px;
        top: 50%;
        margin-top: -17px;
        opacity: 0;
        transition: opacity ease-out 200ms;
        z-index: -1;
    }

.app-desktop .app-input-slider-value:hover + .app-input-slider-halo {
    opacity: .1;
    z-index: 0;
}

.app-has-focus .app-input-slider-value + .app-input-slider-halo {
    z-index: 0;
    opacity: .19;
}

.app-input-slider-value.app-dragging + .app-input-slider-halo {
    z-index: 0;
    opacity: .38;
}

.app-input-slider .app-input-slider-value {
    display: inline-block;
    position: absolute;
    width: 14px;
    height: 14px;
    top: 50%;
    margin-left: -7px;
    margin-top: -7px;
    border-radius: 7px;
    cursor: pointer;
    z-index: 1;
}

.app-input-slider .app-input-slider-min,
.app-input-slider .app-input-slider-max {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -.5em;
    line-height: 1em;
}

.app-input-slider .app-input-slider-max {
    left: auto;
    right: 0;
}



.app-data-input-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 .5em;
    background-color: transparent;
    cursor: default;
    white-space: nowrap;
}


    .app-data-input-container .app-data-input {
        width: 100%;
        /*height: 100%;*/
        border-width: 0;
        margin: 0;
        padding: 3px 0;
        background-color: transparent;
        resize: none;
    }

        .app-data-input-container .app-data-input:focus {
            outline: 0;
        }

    .app-data-input-container .app-data-input-placeholder {
        position: absolute;
        left: 0;
        top: 3px;
        background-color: transparent;
        padding: 0 .5em;
        margin: 0;
        text-overflow: ellipsis;
        user-select: none;
        white-space: normal;
    }

.app-data-input {
    user-select: text;
}

/*.app-data-input-container.app-has-textarea .app-data-input-placeholder {
        top: 3px;
    }*/


[data-container="panel"] [data-input="text"]:after,
[data-container="panel"] [data-input="lookup"]:after {
    position: absolute;
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0px;
    background-color: #c0c0c0;
    content: ' ';
}

[data-container="row"] [data-input="text"]:after,
[data-container="row"] [data-input="lookup"]:after {
    display: none;
}

/* checkbox input */

[data-input="checkbox"] .app-checkbox-container {
    border: solid 1px #c0c0c0;
    max-width: 34px;
    width: 100%;
    height: 20px;
    border-radius: 24px;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: .175em;
    vertical-align: middle;
    margin-right: -6px;
}

.app-font-tiny [data-input="checkbox"] .app-checkbox-container {
    top: -.175em;
}

[data-control].app-has-checkbox .app-control-inner .app-icon {
    margin-left: -3px;
}

.app-control-inner.app-has-material-icon .app-data-input-container + .app-control-footer {
    padding-top: 8px;
}

.app-checkbox-container:focus {
    outline: none;
}

[data-container="row"] [data-input="checkbox"] .app-checkbox-container {
    margin-left: 0;
    margin-right: 0;
}

[data-input="checkbox"] .app-checkbox-button {
    width: 16px;
    height: 16px;
    border: solid 1px #c0c0c0;
    background-color: #fff;
    border-radius: 16px;
    display: inline-block;
    margin: 1px;
    position: absolute;
    box-shadow: 1px 1px 1px #ddd !important;
}


/*[data-input="checkbox"] .app-checkbox-container.app-checkbox-on {
    background-color: #38c;
    border-color: #38c;
}*/

[data-input="checkbox"] .app-checkbox-container.app-checkbox-on .app-checkbox-button {
    border-color: #fff;
    box-shadow: none !important;
    right: 0;
}

[data-input="checkbox"] .app-checkbox-container.app-animation .app-checkbox-button {
    transition: transform 160ms ease-in-out;
}

[data-input="checkbox"] .app-checkbox-container.app-checkbox-on.app-animate-on .app-checkbox-button {
    transform: translate3d(14px,0,0);
    right: auto;
}

[data-input="checkbox"] .app-checkbox-container.app-checkbox-on.app-animate-off .app-checkbox-button {
    transform: translate3d(-14px,0,0);
}

[data-checkbox-style="circle"] .app-checkbox-container,
[data-checkbox-style="square"] .app-checkbox-container {
    width: 20px;
    height: 20px;
    border-radius: 22px;
    background-color: #fff;
}

[data-checkbox-style="square"] .app-checkbox-container {
    border-radius: 3px;
}

[data-checkbox-style="circle"] .app-checkbox-button,
[data-checkbox-style="square"] .app-checkbox-button {
    margin: 0;
    border-width: 0;
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    box-shadow: none !important;
    overflow: hidden;
}

[data-checkbox-style="circle"] .app-checkbox-container.app-checkbox-on .app-checkbox-button,
[data-checkbox-style="square"] .app-checkbox-container.app-checkbox-on .app-checkbox-button {
    background-color: #38c;
}
/*
.ui-btn.ui-btn-icon-notext:not(.ui-btn-active):not(.app-btn-promo),
.ui-btn.ui-btn-icon-notext:not(.ui-btn-active)::after {
    box-shadow: none !important;
}
*/
.ui-popup {
    border-radius: 0;
}

.app-popup-panel,
.app-popup-panel .ui-btn:not(.ui-mini):not(.ui-btn-icon-notext),
.app-popup-panel .app-listview.ui-listview > li h1.app-field,
.app-popup-panel .app-listview.ui-listview > li h2.app-field,
.app-popup-panel .app-listview.ui-listview > li h3.app-field,
.app-popup-panel .app-listview.ui-listview > li h4.app-field,
.app-popup-panel .app-listview.ui-listview > li h5.app-field,
.app-popup-panel .app-listview.ui-listview > li h6.app-field,
.app-popup-panel .app-listview.ui-listview > li .ui-li-aside,
.app-popup-panel .ui-li-count,
.app-popup-panel .app-listview.ui-listview > li p,
.app-popup-panel .ui-panel-inner .app-wrap,
.app-popup-panel .ui-panel .ui-listview .ui-li-static,
.app-popup-panel .ui-popup,
.app-popup-panel .ui-popup label {
    font-size: 16px !important;
}

.ui-panel-inner .ui-li-divider:not(.app-list-instruction) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 1px;
    background-color: #ddd;
}

.ui-panel-inner .ui-li-divider.ui-first-child.ui-last-child {
    height: 0;
}

.app-popup-listview .ui-panel-inner .ui-li-divider:not(.app-list-instruction):not(.ui-first-child):not(.app-copy) {
    height: 1px;
}

.app-list-container {
    transition: transform 350ms ease-out;
    margin: -1em;
}

.app-list-container-reverse {
    transition: transform 200ms ease-out;
}

.app-multi-list {
    vertical-align: top;
    white-space: nowrap;
}

    .app-multi-list .ui-listview {
        display: inline-block;
        vertical-align: top;
    }

.app-icon-carat-right {
    transform: rotate(-90deg);
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 1em;
}

.app-icon-carat-left {
    transform: rotate(90deg);
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 1em;
}


.app-icon-carat-up {
    transform: rotate(-180deg);
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 1em;
}

.app-icon-carat-down {
    transform: none;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 1em;
}


.ui-li-has-count .app-has-icon-carat {
    padding-right: 6em !important;
}

.app-has-icon-carat .ui-li-count,
.app-has-transition-icon .ui-li-count {
    right: 36px;
}

/*.app-menu-strip .ui-btn.app-selected:before {
    content: ' ';
    display: inline-block;
    position: absolute;
    background-color: #38c;
    left: 0;
    bottom: 0;
    right: 0;
    height: 3px;
}*/

.ui-popup-container.fade {
    transition: none;
}

.app-data-input-button {
    width: 22px;
    height: 24px;
    line-height: normal;
    position: absolute;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    z-index: 1;
    margin-top: .5px;
}

.app-has-helper .app-data-input-button {
    padding-top: .25em;
}

.app-has-helper.app-null .app-data-input-button {
    padding-top: 1px;
}

.app-caret {
    margin-left: -11px;
    margin-top: -12px;
    top: 50%;
    left: 50%;
    border: none !important;
    width: 22px !important;
    height: 24px !important;
    color: #000;
    user-select: none;
    position: absolute;
}

    .app-caret::before {
        content: 'arrow_drop_down';
    }

[data-input="lookup"] .app-caret::before {
    content: 'expand_more';
    left: -4px;
}

.app-caret-r .app-caret::before {
    /*transform: rotate(-90deg)*/
    content: 'chevron_right';
    left: -5px;
}

.app-density-condensed.app-font-tiny .app-caret-r .app-caret::before {
    left: -2.5px;
}

.app-density-condensed .app-caret-r .app-caret::before {
    left: -3px;
}

.app-density-compact .app-caret-r .app-caret::before {
    left: -4px;
}

[data-command="New"] .app-caret-r .app-caret::before {
    content: 'add';
}

.app-caret-u .app-caret::before {
    content: 'arrow_drop_up';
}

[data-input="lookup"] .app-caret-u .app-caret::before {
    content: 'expand_less';
}

.app-desktop .app-data-input-button:hover:not(.ui-btn-active) .app-caret,
.app-desktop .app-data-input-button:hover:not(.ui-btn-active) .app-caret2,
.app-desktop .app-data-input-button.app-caret-r:hover:not(.ui-btn-active) .app-caret,
.app-desktop .app-data-input-button.app-caret-u:hover:not(.ui-btn-active) .app-caret,
.app-desktop .app-form-clear-all:hover {
    color: #777;
}

.app-data-input-button.ui-btn-active .app-caret,
.app-data-input-button.app-caret-r.ui-btn-active .app-caret,
.app-data-input-button.app-caret-u.ui-btn-active .app-caret {
    color: #333;
}


.app-data-input-popup {
    position: absolute;
    z-index: 1100;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    border: solid 1px;
    border-top-width: 1px !important;
    font-size: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
}

    /*    .app-data-input-popup::-webkit-scrollbar {
        display: none;
        -webkit-appearance: none;
        width: 0;
    }
*/
    .app-data-input-popup ul {
        margin: 0;
        padding: 0;
    }

        .app-data-input-popup ul li {
            padding: .5em .75em;
            list-style: none;
            margin: 0;
            white-space: nowrap;
            cursor: default;
            line-height: normal;
        }

            .app-data-input-popup ul li .app-muted {
                margin-left: .25em;
            }

                .app-data-input-popup ul li .app-muted:before {
                    content: "(";
                }

                .app-data-input-popup ul li .app-muted:after {
                    content: ")";
                }

            .app-data-input-popup ul li:not(.app-selected) .app-muted {
                color: #777;
            }

        /*.app-density-condensed .app-data-input-popup ul li {
    padding: .4em .75em;
}*/


        .app-data-input-popup /*.app-wrap*/ ul li {
            white-space: normal;
            position: relative;
        }

            .app-data-input-popup ul li.app-instruction {
                font-style: italic;
                color: #808080;
            }

                .app-data-input-popup ul li.app-instruction.app-separator {
                    height: 1px;
                    background-color: #ccc;
                    margin-top: 2px;
                    margin-bottom: 2px;
                    padding: 0;
                }

            .app-data-input-popup ul li[data-command] {
                font-weight: 600;
                padding-right: 3em;
            }

            .app-data-input-popup ul li[data-command="None"] {
                font-weight: normal;
            }

            /*.app-data-input-popup ul li.app-selected {
        position: relative;
    }*/

            .app-data-input-popup ul li[data-command] .app-icon {
                right: 22px;
                /*top: auto !important;*/
                height: 24px;
                margin-top: -12px !important;
            }

            /*.app-data-input-popup .app-selected .app-caret-r .app-caret {
    color: #fff;
}*/

            .app-data-input-popup ul li b {
                background-color: #000;
                color: #fff;
                /*border-radius: 3px;*/
                /*padding-left: 2px;
        padding-right: 2px;*/
                font-weight: normal;
            }

            .app-data-input-popup ul li i:before {
                content: ' (';
            }

            .app-data-input-popup ul li i:after {
                content: ')';
            }

            .app-data-input-popup ul li .app-color {
                position: absolute;
                top: 50%;
                left: 10px;
                margin-top: -8px;
                width: 16px;
                height: 16px;
            }

            .app-data-input-popup ul li .app-icon-svg {
                font-size: 20px;
                line-height: 20px;
                position: absolute !important;
                left: 8px;
                top: 50%;
                margin-top: -10px !important;
                width: 20px;
                height: 20px;
                display: inline-block !important;
                text-indent: 0;
            }

    .app-data-input-popup.app-has-icons ul li {
        padding-left: 36px;
    }

/*.app-data-input-popup ul li span.app-text-bold {
            font-weight: bold;
        }

li:not(.app-selected) .app-text-normal {
    color: #666;
}*/
/*li:not(.app-selected) .app-text-normal {
    color: #3399FF;
}*/
.app-density-compact .app-data-input-popup {
    font-size: 14px;
}

.app-density-condensed .app-data-input-popup {
    font-size: 12px;
}

.app-page-header-divider + [data-layout],
.app-list-instruction + [data-layout],
.app-page-header-divider + .app-page-header-placeholder + [data-layout],
.app-list-instruction + .app-page-header-placeholder + [data-layout] {
    margin-top: -1px !important;
}

.app-control-inner.app-text-multiline {
    white-space: pre-wrap;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: top;
}

.app-data-input-container textarea.app-data-input {
    max-width: 768px;
    height: 100%;
    box-sizing: border-box;
    white-space: pre-wrap;
    text-rendering: optimizeLegibility;
}

.app-data-input-container div.app-data-input {
    max-width: 768px;
    word-wrap: break-word;
    text-rendering: optimizeLegibility;
    -webkit-line-break: after-white-space;
    -webkit-user-modify: read-write;
    white-space: normal;
    box-sizing: border-box;
    font-style: normal !important;
    font-weight: normal !important;
    color: #000 !important;
}

app-onecolumnview .app-field-data-rtf {
    display: block !important;
}

.app-field-data-rtf {
    white-space: pre-line !important;
}

    .app-field-data-rtf p,
    .app-text-multiline p {
        margin: 1em 0 0 0 !important;
        display: block !important;
    }

        .app-field-data-rtf h1:first-child,
        .app-field-data-rtf h2:first-child,
        .app-field-data-rtf h3:first-child,
        .app-field-data-rtf h4:first-child,
        .app-field-data-rtf h5:first-child,
        .app-field-data-rtf h6:first-child,
        .app-field-data-rtf p:first-child,
        .app-text-multiline p:first-child {
            margin-top: 0 !important;
        }

.app-has-rtf {
    overflow-y: auto;
    overflow-x: hidden;
}

[data-input="none"] .app-field-data {
    overflow: hidden;
    vertical-align: top; /* needed to compensate for the bottom margin due to the 'hidden' overflow */
    max-width: 100%;
    text-overflow: ellipsis;
}

[data-input="none"][data-text-action] .app-field-data {
    max-width: 90%;
}


[data-input="listbox"] .app-control-inner,
[data-input="radiobuttonlist"] .app-control-inner,
[data-input="checkboxlist"] .app-control-inner {
    max-width: 100%;
    box-sizing: border-box;
}

/*[data-input="listbox"] .app-control-inner {
    margin-left: -.6em;
}*/

/*.app-density-compact [data-input="listbox"] .app-control-inner {
    margin-left: -.7em;
}

.app-density-condensed [data-input="listbox"] .app-control-inner {
    margin-left: -.65em;
}*/



.app-data-list-outer {
    overflow: hidden;
    padding: 0;
    margin: 0;
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

.app-data-list {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 4px 1px;
    margin: 0;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    width: 100%;
}

    .app-data-list:focus {
        outline: none;
    }

.app-has-focus .app-data-list li.app-focus {
    outline: dotted 1px;
}

.app-data-list ul.app-hidden {
    opacity: 0;
    /*transition: opacity 200ms;*/
}

    .app-data-list ul.app-hidden li {
        cursor: default;
    }

.app-data-list li .app-muted {
    margin-left: .25em;
    color: #777;
}

    .app-data-list li .app-muted:before {
        content: '(';
    }

    .app-data-list li .app-muted:after {
        content: ')';
    }

/*.app-data-list li.app-null {
        color:#777;
    }*/

/*.app-data-list::-webkit-scrollbar {
    display: none;
    -webkit-appearance: none;
    height: 0;
}*/

.app-data-list ul {
    display: inline-block;
    vertical-align: top;
    margin: 0 1em 0 0;
    padding: 0;
}

.app-data-list li {
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    margin: .25em 0;
    padding: .25em .5em;
    border: solid 2px transparent;
    border-radius: 3px;
    max-width: 480px;
    white-space: normal;
    cursor: pointer;
    text-align: left;
}

[data-container]:not([data-wrap="true"]) > [data-container="row"] > [data-input="listbox"][data-auto-focus="false"]:first-child {
    max-width: 100%;
    min-width: 100%;
    text-align: right;
}

.app-font-tiny .app-data-list li {
    padding: .4em .5em;
}

.app-desktop .app-data-list li:not(.app-selected):hover {
    border-color: #777;
}

[data-input] .app-data-list li.app-selected {
    border-color: #38c;
    background-color: transparent;
}

[data-input="listbox"] .app-data-list.app-data-list-actions {
    text-transform: uppercase;
    padding-bottom: 0;
    display: flex;
    /*margin-bottom: -6px;*/
}

    [data-input="listbox"] .app-data-list.app-data-list-actions li {
        border-width: 1px;
        background-color: transparent;
        padding: 6px 9px;
        font-size: 14px;
        line-height: 18px;
        font-weight: 600;
    }

        [data-input="listbox"] .app-data-list.app-data-list-actions li.app-has-icon {
            padding-left: 40px;
            position: relative;
        }


        [data-input="listbox"] .app-data-list.app-data-list-actions li .app-icon,
        .app-desktop [data-input="listbox"] .app-data-list.app-data-list-actions li .app-icon:hover {
            color: inherit;
            left: 8px;
        }

.app-desktop [data-input="listbox"] .app-data-list.app-data-list-actions li:not(.app-selected):hover {
    border-width: 2px;
    padding: 5px 8px;
}

.app-desktop [data-input="listbox"] .app-data-list.app-data-list-actions li.app-has-icon:not(.app-selected):hover {
    padding: 5px 8px 5px 39px;
}

    .app-desktop [data-input="listbox"] .app-data-list.app-data-list-actions li.app-has-icon:not(.app-selected):hover .app-icon {
        left: 7px;
    }

.app-data-list.app-data-list-actions li {
    user-select: none;
}

.app-has-singleton-data-list .app-control-inner,
.app-has-singleton-data-list .app-control-inner .app-data-list {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

    .app-has-singleton-data-list .app-control-inner .app-data-list:not(.app-data-list-actions) {
        margin-top: -0.25em !important;
        margin-bottom: -0.25em !important;
    }

    .app-has-singleton-data-list .app-control-inner .app-hscrollbar2 {
        display: none !important;
    }


/* radio button traditional */
[data-input="radiobuttonlist"] .app-data-list li {
    padding-left: 32px;
    position: relative;
    border-width: 0;
}

    [data-input="radiobuttonlist"] .app-data-list li::after {
        position: absolute;
        height: 18px;
        width: 18px;
        top: 50%;
        left: 1px;
        margin-top: -11px;
        content: ' ';
        border: solid 2px rgba(0,0,0,.3);
        border-radius: 12px;
        transition: background-color 250ms linear, border-color 250ms linear;
    }

    [data-input="radiobuttonlist"] .app-data-list li::before {
        position: absolute;
        width: 14px;
        height: 14px;
        content: ' ';
        border-radius: 100%;
        display: inline-block;
        top: 50%;
        margin-top: -7px;
        left: 5px;
        transition: transform 100ms linear;
        transform: scale(0);
    }

    [data-input="radiobuttonlist"] .app-data-list li.app-selected::before {
        transform: scale(1);
    }

[data-input="checkboxlist"] .app-data-list li {
    padding-left: 32px;
    position: relative;
    border-width: 0;
}

    [data-input="checkboxlist"] .app-data-list li::after {
        position: absolute;
        height: 18px;
        width: 18px;
        content: '';
        border: solid 2px rgba(0,0,0,.3);
        border-radius: 5px;
        left: 1px;
        transition: background-color 120ms linear;
        top: 50%;
        margin-top: -11px;
    }


    [data-input="checkboxlist"] .app-data-list li::before {
        position: absolute;
        content: 'check';
        color: #fff;
        z-index: 10;
        border: none;
        height: 24px;
        width: 24px;
        top: 50%;
        margin-top: -10px;
        left: 0;
        transform: scale(0);
        transition: transform 100ms linear;
        font-size: 20px;
        margin-left: 2px;
    }

    [data-input="checkboxlist"] .app-data-list li.app-selected::before {
        transform: scale(1);
    }



.app-hscrollbar2 {
    display: block;
    padding: 0;
    margin: 0;
    z-index: 3;
    background-color: transparent;
    opacity: 0;
    height: 4px;
    transition: opacity 750ms ease;
    overflow: hidden;
    /*border-left: solid 1px transparent;*/
    cursor: default;
    position: relative;
    margin-top: -4px;
    user-select: none;
}

    .app-hscrollbar2 .app-hscrollbar-handle {
        display: block;
        position: absolute;
        padding: 0;
        margin: 0;
        left: 0;
        top: 0;
        height: 4px;
        width: 1px;
        transition: left 0 linear;
    }

.app-desktop .app-hscrollbar2 {
    transition: none;
    height: 7px;
    margin-top: -7px;
}

    .app-desktop .app-hscrollbar2 .app-hscrollbar-handle {
        height: 7px;
    }

.app-desktop.app-scrollbars-wide .app-hscrollbar2,
.app-desktop.app-scrollbars-wide .app-hscrollbar2 {
    height: 9px;
}

    .app-desktop.app-scrollbars-wide .app-hscrollbar2 .app-hscrollbar-handle,
    .app-desktop.app-scrollbars-wide .app-hscrollbar2 .app-hscrollbar-handle {
        height: 9px;
    }

.app-desktop [data-control] .app-hscrollbar2 {
    margin-bottom: -7px;
}

.app-desktop .app-data-list-outer + .app-hscrollbar2,
.app-desktop .app-data-list + .app-hscrollbar2,
.app-desktop .app-hscrollbar2 {
    opacity: 1;
}

.app-hscrollbar2.app-scrollbar-dragging,
.app-vhscrollbar.app-scrollbar-dragging {
    opacity: 1;
}

.app-inner-shadow-left-right {
    border-right: solid 1px;
}

.app-inner-shadow-right {
    border-right: solid 1px;
}

    .app-inner-shadow-left-right + .app-hscrollbar2,
    .app-inner-shadow-right + .app-hscrollbar2 {
        margin-right: -2px; /* compensate for the left and right "inner shadow" borders */
    }

.app-inner-shadow-left {
    border-right: solid 1px transparent;
}

.app-scrollbar-reveal {
    opacity: 1;
}

[data-input] .app-data-list li[data-index="new"],
[data-input] .app-data-list li[data-index="more"] {
    font-style: italic;
    text-transform: lowercase;
    color: #808080;
}

    [data-input] .app-data-list li[data-index="new"]::before,
    [data-input] .app-data-list li[data-index="new"]::after,
    [data-input] .app-data-list li[data-index="more"]::before,
    [data-input] .app-data-list li[data-index="more"]::after {
        opacity: .25;
    }


[data-input] .app-collapsed .app-data-list,
[data-input] .app-collapsed .app-hscrollbar2 {
    display: none !important;
}

.app-null .app-text-action,
[data-input] .app-collapsible .app-list-value,
[data-input] .app-collapsible i {
    display: none;
}

[data-input] .app-collapsed {
    cursor: pointer;
}

    [data-input] .app-collapsed .app-list-value,
    [data-input] .app-collapsed i {
        display: inline-block;
    }

    [data-input] .app-collapsed i {
        margin-left: 4px;
    }

/* collapsible value will cuase the hidden list to collapse */
[data-input] .app-has-list-value .app-hidden {
    display: none !important;
}

.app-caret-u-d .app-caret:first-of-type::before {
    /*margin-top: 1px;*/
    margin-top: -9px !important;
    content: 'arrow_drop_down';
}

.app-caret-u-d .app-caret:last-of-type::before {
    content: 'arrow_drop_up';
    margin-top: -15px !important;
}

[data-input].app-has-helper:not(.app-null) {
    margin-bottom: -.5em;
}

    [data-input].app-has-helper:not(.app-null) .app-control-inner {
        margin-bottom: .5em;
    }

[data-input].app-has-helper .app-control-helper {
    padding: .25em .5em 0 .5em;
    font-style: normal;
    color: #000;
    outline: none;
    display: inline;
}

    [data-input].app-has-helper .app-control-helper ul {
        display: inline;
    }

[data-input].app-has-helper.app-null .app-control-helper {
    display: none;
}


[data-input] .app-control-helper ul {
    margin: 0 0 -.25em 0;
    padding: 0;
}

    [data-input] .app-control-helper ul li {
        list-style: none;
        list-style-position: inside;
        display: inline-block;
        margin: 0 0 .5em .5em;
        border: solid 1px #ddd;
        padding: .25em 16px .25em 1em;
        border-radius: 8px;
        cursor: pointer;
        position: relative;
    }

        [data-input] .app-control-helper ul li:first-child {
            margin-left: 0;
        }

[data-input].app-has-focus .app-control-helper ul li.app-focus::after {
    left: auto;
    content: 'arrow_drop_down';
    right: 1px;
}


[data-input] .app-control-helper ul li .app-muted {
    margin-left: .25em;
}

    [data-input] .app-control-helper ul li .app-muted:before {
        content: "(";
    }

    [data-input] .app-control-helper ul li .app-muted:after {
        content: ")";
    }



[data-input] .app-control-helper ul li:not(.app-focus) .app-muted {
    color: #777;
}





.app-desktop [data-input] .app-control-helper ul li:not(.ui-btn-active):not(.app-focus):hover,
.app-desktop [data-input] .app-data-list ul li:not(.app-selected):hover::after {
    background-color: #ededed;
}

.app-listview .ui-btn.ui-btn-active:not(.app-selected):not(.app-checked) .app-btn-check {
    visibility: hidden;
}

.app-bar-footer-no-scrolling {
    box-shadow: none !important;
}

.app-bar-buttons-md {
    text-align: center;
}

[data-layout="form"] + .app-echo {
    border-top-width: 0;
}

/*.app-control-inner .app-context-field {
    border-style: none;
    display: inline-block;
    background-color: transparent !important;
    position: absolute;
    margin-left: 16px;
    width: 30px;
    height: 16px;
    padding: 0;
    margin: 0;
}*/

.app-collapsible-toggle-button {
    padding: 0;
    margin: -12px 0 0 0;
    top: 50%;
    width: 24px;
    height: 24px;
    line-height: 24px;
    content: ' ';
    cursor: pointer;
    position: absolute;
    display: inline-block;
    line-height: normal;
    z-index: 1;
}

.app-control-inner .app-field-object-ref {
    padding: 0;
    width: 24px;
    height: 10px;
    line-height: 24px;
    content: ' ';
    cursor: pointer;
    position: relative;
    display: inline-block;
    line-height: 19px;
    z-index: 1;
}

    .app-control-inner .app-field-object-ref::before {
        width: 24px;
        text-indent: 0 !important;
    }

    .app-control-inner .app-field-object-ref.ui-btn-active::before {
        color: #000;
    }

.app-desktop .app-control-inner .app-field-object-ref:not(.ui-btn-active):hover {
    color: #222;
}

.ui-page > .ui-content {
    /*transition: transform 450ms ease-in-out;*/
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
}

.app-toolbar-stub {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: transparent;
}

[data-container="wizard"] {
    padding: 0;
    margin: 0;
    display: none;
}

    [data-container="wizard"].app-wizard-active {
        display: block;
    }

/*.dv-action-see-all .app-btn-next::after,
.dv-action-see-all .app-btn-prev::before,
[data-action-path='wizard-prev']::before,
[data-action-path='wizard-next']::after,
.app-collapsible-toggle-button::before,
.app-field-object-ref::before {
    content: "navigate_next";
    display: inline-block;
    position: relative;
    display: inline-block;
    margin: -12px -4px;
}*/

.ui-input-search input {
    padding-left: 2.5em;
}

.ui-input-search::after {
    background: none;
    margin-top: -12px;
    width: 24px;
    height: 24px;
    left: 2px;
}

.ui-btn-icon-notext::after {
    margin-left: -12px;
    margin-top: -12px;
    text-indent: 0;
    width: 24px;
    height: 24px;
}

.ui-btn.ui-btn-icon-left::after,
.ui-btn.ui-btn-icon-right::after,
.ui-btn.ui-btn-icon-notext:not(.app-btn-promo),
.ui-btn.ui-btn-icon-notext:not(.app-btn-promo):after {
    background: none !important;
    border-color: transparent !important;
}

.ui-btn.app-btn-float::after {
    background-image: none !important;
    color: #fff !important;
}

/*.app-btn-context:after,
.app-btn-more::after,
.app-bar-toolbar .app-btn-context.ui-icon-dots::after,
.app-map-info-toolbar .ui-btn.ui-icon-dots::after,
.app-bar-buttons .ui-btn.app-btn-more::after {
    content: 'more_horiz';
    font-size: 24px;
}*/

.app-grid .app-btn-more::after {
    width: 22px;
    margin-left: 0;
    left: 0;
}

.app-bar-buttons .ui-btn.app-btn-more::after {
    margin-left: -6px;
}

.app-bar-toolbar .ui-btn.ui-icon-back::after,
.app-bar-toolbar .app-btn-search-cancel.ui-btn-icon-notext::after {
    content: 'arrow_back';
}

.app-bar-toolbar .app-btn-search-more.ui-btn-icon-notext::after,
.app-bar-toolbar .app-btn-context.ui-icon-carat-d::after {
    content: 'expand_more';
}

.app-bar-toolbar .app-btn-context.ui-icon-carat-u::after {
    content: 'expand_less';
}

.app-kiosk .app-btn-scan::after {
    content: 'barcode_reader';
}
/*.app-bar-toolbar .ui-btn.ui-icon-refresh::after {
    content: "\e031";
    line-height: 22px;
    font-size: 18px !important;
    font-weight: normal;
}
*/
/* spin animation */
.app-animation-spin::after {
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    width: 24px;
    height: 24px;
    margin-left: -12px !important;
}

.ui-btn-icon-left.app-animation-spin::after {
    left: 18px;
}



@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.app-btn-more::after {
    position: absolute;
    top: 50%;
    margin-top: -12px;
    margin-left: -12px;
    text-align: center;
    left: 50%;
}

.app-grid.app-listview-inlineediting .app-btn-more {
    left: 6px;
}

.app-grid-header .app-btn-more,
.app-bar-heading .app-btn-more {
    visibility: hidden;
}

.ui-btn-icon-right.ui-icon-carat-r:not(.ui-btn-active)::after {
    color: #acacac !important;
}

.app-feedback:not(.ui-btn-active) .app-collapsible-toggle-button::before {
    color: #acacac;
}


.app-echo-toolbar h3.ui-btn-active::after {
    border-top-color: #38c;
}

.app-echo-toolbar .app-btn-more.ui-icon-dots::after {
    margin-left: -11px;
}

.app-page-menu .ui-btn,
.app-site-map .ui-btn {
    font-weight: normal;
}

    .app-page-menu .ui-btn.ui-icon-carat-r::after,
    .app-site-map .ui-btn.ui-icon-carat-r::after {
        background: none !important;
    }

    .app-page-menu .ui-btn.ui-icon-carat-r::after,
    .app-site-map .ui-btn.ui-icon-carat-r::after,
    .app-desktop .app-page-menu .ui-btn.ui-icon-carat-r:hover:not(.ui-btn-active)::after,
    .app-desktop .app-site-map .ui-btn.ui-icon-carat-r:hover:not(.ui-btn-active)::after {
        content: 'chevron_right';
        line-height: 24px;
        font-size: 24px;
        font-weight: normal;
        color: #808080;
    }

    .app-page-menu .ui-btn.ui-btn-active,
    .app-site-map .ui-btn.ui-btn-active {
        color: #333;
    }

        .app-page-menu .ui-btn.ui-btn-active.ui-icon-carat-r::after,
        .app-site-map .ui-btn.ui-btn-active.ui-icon-carat-r::after {
            color: #acacac;
        }

.app-calendar-plugin-header .ui-btn.ui-icon-carat-r::after,
.app-bar-calendar .ui-btn.ui-icon-carat-r::after {
    content: 'chevron_right';
}

.app-bar-calendar .ui-btn.ui-icon-carat-l::after,
.app-calendar-plugin-header .ui-btn.ui-icon-carat-l::after {
    content: 'chevron_left';
}


.app-btn-disabled,
.app-btn-disabled:before,
.app-btn-disabled:after,
.ui-btn.app-btn-disabled {
    color: #999 !important;
}

[data-control="description"] [data-control] {
    display: inline-block !important;
    min-width: 0 !important;
    max-height: none !important;
    vertical-align: auto !important;
    font-weight: bold;
}

    [data-control="description"] [data-control][data-read-only="true"] .app-control-inner {
        padding: 0;
        margin: 0;
        cursor: pointer;
    }

[data-container="row"] [data-control="description"] .app-control-inner {
    display: block;
}

[data-control="content"] {
    padding: 1em;
}

[data-container="stickyheader"], .app-page-header-placeholder {
    height: 1px;
    margin-top: -1px;
    visibility: hidden;
}

.app-transition-icon {
    right: 6px !important;
    left: auto !important;
    font-size: 14px !important;
    top: 50% !important;
    margin-top: -12px !important;
}

.app-status-bar + [data-layout="form"] {
    margin-top: -1px !important;
}

.app-android .app-bar-toolbar .app-btn-context.ui-icon-dots::after,
.app-android .app-btn-more::after,
.app-android .material-icon-more-horiz {
    /*transform: rotate(90deg);*/
    content: 'more_vert';
}

.app-popup-image {
    outline: none;
}

.ui-input-clear {
    display: none;
}

.app-listview .ui-btn.ui-btn-icon-left:not(.dv-action-see-all) {
    padding-left: 56px;
}

.app-listview-multiselect .ui-btn.dv-action-refresh:not(.ui-btn-icon-notext),
.app-listview-multiselect .ui-btn.dv-action-filter-clear:not(.ui-btn-icon-notext) {
    padding-left: 92px;
}

.app-listview-multiselect .dv-action-refresh.ui-btn-icon-left::after,
.app-listview-multiselect .dv-action-filter-clear.ui-btn-icon-left::after {
    left: 54px;
}

.app-sidebar {
    display: none;
    left: 0;
}

.app-has-sidebar-left .app-sidebar-left {
    display: inline-block;
}

.app-has-sidebar-right .app-sidebar-right {
    display: inline-block;
}


.app-sidebar-right {
    right: 0;
    left: auto;
    border-left: solid 1px #ccc;
    border-right-width: 0;
    z-index: 999;
    /*width: 20em !important;*/
    width: 10em !important;
}

    .app-sidebar-right .ui-panel-inner {
        top: 0;
    }

/*.ui-page {
    width: auto !important;
}*/

/*.ui-page .app-wrapper {
    left: 0 !important;
}
*/
/*.app-has-sidebar-left .ui-page .app-bar-actions {
    left: 1px;
}
*/
/*.app-has-sidebar-left:not(.app-has-minisidebar-left) .ui-page .app-bar-actions {
    left: 1px;
}
*/

/*[data-control="label"].app-has-focus {
    color: #38c;
    font-weight: normal;
    transition: color;
    transition-duration: 200ms;
}

.app-data-input-focus {
    position: absolute;
    display: inline-block;
    left: .5em;
    bottom: -1px;
    height: 2px;
    opacity: 0;
    background-color: #38c;
    transform: scaleX(.25);
    transform-origin: top left;
}

    .app-data-input-focus.app-animation {
        opacity: 1;
        width: auto !important;
        right: .5em;
        transform: none;
        transition: transform opacity;
    }

[data-control].app-null .app-data-input-focus.app-animation {
    width: auto !important;
    right: .5em;
    opacity: 1;
    transition-duration: 200ms;
}*/
.ui-panel {
    overflow: hidden;
}

.ui-page {
    padding-top: 57px;
    overflow: visible;
    overflow-x: hidden;
    background-color: #fff;
}

.ui-page-active {
    padding-top: 57px;
}


.app-page-modal {
    box-shadow: 0 0 5px 5px rgba(0,0,0, .1);
    z-index: 1001;
    overflow: hidden !important;
}

.app-desktop .app-page-modal .app-vscrollbar {
    border-right: solid 1px transparent;
    /*z-index: 1003;*/
}

/*    .app-desktop .app-page-modal .app-vscrollbar:hover {
        border-right-color: #fff;
    }
*/
.app-page-modal.ui-page .ui-content:before {
    height: 88px;
}

.app-page-modal-background {
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*opacity: .5;*/
    z-index: 1000;
}

.app-tabs.ui-header-fixed {
    position: absolute;
    left: 0;
    right: 0;
}

.app-page-modal .ui-header.ui-header-fixed.app-tabs {
    top: 40px;
}

.app-page-modal .ui-header.ui-header-fixed.app-bar-actions {
    top: 40px;
    background-color: transparent;
}

.app-page-modal .ui-header.ui-header-fixed.app-bar-header {
    top: 70px;
    background-color: transparent;
}

.ui-panel-display-overlay {
    z-index: 1004;
}

.app-page-modal .app-page-header:not(.app-has-action-bar) {
    padding-top: 0;
}

.app-page-modal-title {
    height: 40px;
    /*border-bottom: solid 1px transparent;*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    cursor: default;
    user-select: none;
    background-color: transparent;
    /*z-index: 2;
    background-color: rgba(255,255,255,.8);*/
}

    .app-page-modal-title .app-text {
        line-height: 40px;
        vertical-align: middle;
        margin-left: 16px;
        max-width: 50%;
        text-overflow: ellipsis;
        text-transform: uppercase;
        font-size: 14px;
        display: none;
        white-space: nowrap;
        font-weight: 600;
        overflow: hidden;
    }

    .app-page-modal-title.app-has-icon .app-text {
        margin-left: 44px;
    }

    .app-page-modal-title.app-has-icon.app-has-fa .app-text {
        margin-left: 48px;
    }

    .app-page-modal-title .app-icon {
        display: none;
        color: #333;
        left: 16px;
    }

.app-min-sm .app-page-modal-title .app-text {
    max-width: 70%;
}

.app-wrapper > .app-page-header-placeholder {
    margin-top: -1px !important;
}

.app-page-title .app-text {
    padding-top: 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 0;
    color: #333;
}


    .app-page-modal-title .app-text span,
    .app-page-title .app-text span {
        font-weight: normal;
    }

        .app-page-modal-title .app-text span::before,
        .app-page-title .app-text span::before {
            content: ' - ';
        }

.app-density-condensed .app-page-title .app-text {
    font-size: 12px;
    /*margin-left: -.35em;*/
}

.app-density-condensed .app-page-modal-title .app-text {
    font-size: 12px;
}

.app-page-modal-title .app-btn {
    position: absolute;
    left: auto;
    top: 50%;
    margin-top: -12px;
    margin-bottom: 0;
    height: 24px;
    width: 24px;
    cursor: pointer;
    right: 12px;
    color: #555;
    /*background-color:yellow;*/
}

    .app-page-modal-title .app-btn:after {
        background-color: transparent;
        left: 50%;
        margin-left: -12px;
        position: absolute;
        top: 50%;
        margin-top: -12px;
        line-height: 24px;
        height: 24px;
        width: 24px;
    }

.app-desktop .app-page-modal-title .app-btn:not(.ui-btn-active):hover {
    color: #000;
}

.app-page-modal-title .app-btn.ui-btn-active {
    color: #38c;
}

.app-page-modal-title .app-btn.app-btn1 {
    right: auto;
    left: 15px;
    z-index: 1;
}

.ui-page-active .app-page-modal-title.app-has-btn1 .app-btn.app-btn1 {
    display: block !important;
}

.ui-page-active .app-page-modal-title.app-has-btn1 .app-icon {
    display: none !important;
}

.app-page-modal-title .app-btn.app-btn2 {
    right: 76px;
}

.app-page-modal-title .app-btn.app-btn3 {
    right: 44px;
}

.app-page-modal-title .app-btn.app-btn4 {
    right: 12px;
}


/*.app-page-modal.app-page-scrolled .app-page-modal-title {
    border-bottom-color: #ddd;
}*/

.app-page-modal.app-page-modal-title-minimal .app-page-modal-title .app-text,
.app-page-modal.app-page-modal-title-minimal .app-page-modal-title .app-icon,
.app-page-modal.app-page-scrolled .app-page-modal-title .app-text,
.app-page-modal.app-page-scrolled .app-page-modal-title .app-icon {
    display: inline-block;
}

.app-page-modal-title-minimal .app-page-header {
    display: none !important;
}

.app-page-modal .app-page-modal-title + .app-bar-actions .app-bar-controls {
    padding-top: 0;
}

.app-page-modal .app-bar-actions {
    padding: 0 0 0 .65em;
    border-bottom: solid 1px transparent !important;
    border-top-width: 0;
}

    .app-page-modal .app-bar-actions > .app-btn-more {
        margin: 0;
    }

.app-page-modal.app-page-scrolled .app-bar-actions {
    border-bottom: solid 1px #ddd;
}


.app-page-modal .app-bar-actions h3 {
    margin-left: 0;
}

.app-density-condensed .app-page-modal .app-bar-actions {
    height: 38px;
    padding-left: 12px;
    margin-top: -2px;
}

.app-popup .ui-btn {
    border-top-width: 0 !important;
}

/*.ui-page.app-has-fixed-bar .app-page-header {
    background-color: #fff;
    color: #333;
}*/


.app-menu-strip .ui-btn {
    /*font-size: .9em !important;*/
    text-transform: none;
}

.app-bar-actions .ui-btn,
.app-echo-controls .ui-btn {
    text-transform: uppercase;
}

    /*.app-bar-actions .ui-btn:after,
    .app-echo-controls .ui-btn::after {
        background-color:#666;
    }*/


    .app-bar-actions .ui-btn:not(.ui-icon-notext):not(.ui-btn-active),
    .app-echo-controls .ui-btn:not(.ui-icon-notext):not(.ui-btn-active) {
        border-color: transparent;
        background-color: transparent;
    }

    .app-bar-actions .ui-btn:not(.ui-btn-icon-left):not(.ui-btn-icon-notext),
    .app-echo-controls .ui-btn:not(.ui-btn-icon-left):not(.ui-btn-icon-notext) {
        padding-left: .5em;
    }

    .app-bar-actions .ui-btn:not(.app-has-children):not(.ui-btn-icon-notext),
    .app-echo-controls .ui-btn:not(.app-has-children):not(.ui-btn-icon-notext) {
        padding-right: .5em;
    }

.app-menu-strip .app-selected:not(.app-has-children) {
    /*font-weight: 600;*/
    font-weight: normal;
}

.app-bar-footer .app-bar-buttons .ui-btn {
    margin-top: .5em;
    margin-bottom: .5em;
}

.app-bar-toolbar.app-has-back .app-menu-strip {
    visibility: hidden;
}

.app-bar-toolbar.app-has-back {
    background-image: none !important;
}

    .app-bar-toolbar.app-has-back .ui-title {
        border-left-color: transparent;
    }

.app-bar-toolbar .app-back-text {
    position: absolute;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: normal;
    cursor: pointer;
    line-height: 56px;
    /*vertical-align: middle;*/
    left: 44px;
    z-index: 9;
}

.app-bar-toolbar:not(.app-has-back) .app-back-text {
    left: 56px;
}

/*.app-bar-toolbar .app-back-text::before {
        display: inline-block;
        width: 34px;
        content: ' ';
    }*/

.app-bar-toolbar .app-back-text.ui-btn-active {
    color: #38c;
}

.app-bar-buttons .ui-btn {
    padding: 0.5em;
}

.app-icon {
    position: absolute !important;
    color: #777;
    top: 50% !important;
    margin-top: -12px !important;
}

/*    .app-icon.glyphicon,
    .app-icon.glyphicons,
    .app-icon.fa,
    .app-icon.fa::before,
    .app-icon.ion,
    .app-icon.ion::before {
        width: 24px;
        height: 24px;
        font-size: 24px;
        line-height: 24px;
        text-align: center;
    }

*/
/*.app-icon.ion::before {
            vertical-align: middle;
        }*/

.app-icon-rotate270 i:first-of-type {
    transform: rotate(270deg);
}

.app-page-header .app-icon {
    cursor: default;
    user-select: none;
}

/*    .app-page-header .app-icon.glyphicon,
    .app-page-header .app-icon.glyphicons,
    .app-page-header .app-icon.ion,
    .app-page-header .app-icon.ion::before {
        width: 48px;
        height: 48px;
        font-size: 48px;
        line-height: 48px;
    }

        .app-page-header .app-icon.ion::before {
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -24px;
        }

    .app-page-header .app-icon.fa,
    .app-page-header .app-icon.fa::before {
        width: 40px;
        height: 40px;
        font-size: 40px;
        line-height: 40px;
    }
*/
.app-desktop .ui-btn:not(.ui-btn-active):hover .app-icon {
    color: #000;
}

/*.ui-btn-active .app-icon {
    color: #fff;
}*/

.app-sidebar .ui-btn-active .material-icon-check /*,
.app-popup-menu .ui-btn-active .material-icon-check*/ {
    color: #fff;
}

.ui-panel .app-icon,
.app-popup .app-icon {
    left: 16px;
}

.app-sidebar .ui-listview > .ui-li-static {
    padding-left: 16px;
}

.app-sidebar .app-icon {
    left: 16px;
}

.ui-panel-inner .ui-btn:not(.ui-btn-active) .app-icon.material-icon-check-box-outline-blank {
    color: #777 !important;
}

.ui-panel-inner .material-icon-chevron-right,
.app-desktop .ui-panel-inner .ui-btn:not(.ui-btn-active):hover .material-icon-chevron-right {
    right: 8px !important;
    left: auto !important;
    color: #acacac !important;
}

.app-has-material-icon.ui-li-has-count .ui-li-count,
.ui-li-has-count.ui-icon-carat-r .ui-li-count,
[data-icon="false"] .ui-li-has-count .ui-li-count {
    right: 32px;
}

.app-bar-buttons .app-has-icon,
.app-bar-actions .app-has-icon,
.app-echo-controls .app-has-icon {
    padding-left: 34px !important;
}

    .app-bar-buttons .ui-btn.app-has-icon .app-icon,
    .app-bar-actions .app-has-icon .app-icon,
    .app-echo-controls .app-has-icon .app-icon {
        position: absolute;
        left: 6px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .app-bar-actions .app-has-icon.ui-btn-icon-notext,
    .app-echo-controls .app-has-icon.ui-btn-icon-notext {
        padding-left: 0 !important;
        border-radius: .5em !important;
        width: 24px;
        height: 24px;
    }

        .app-bar-actions .app-has-icon.ui-btn-icon-notext .app-icon,
        .app-echo-controls .app-has-icon.ui-btn-icon-notext .app-icon {
            text-indent: 0;
            left: 0 !important;
            margin-left: 0;
            margin-right: 0;
        }

    .app-bar-buttons .app-has-icon .app-icon {
        color: inherit;
    }

.app-reading-pane-detail .app-bar-buttons .app-has-icon .app-icon {
    color: inherit !important;
}

.app-grid-header .app-grid-header-text {
    font-weight: normal;
    display: inline;
}

.app-grid-header u {
    text-decoration: none;
}

.app-desktop .app-grid-header u:hover {
    text-decoration: underline;
}

/*.app-desktop .app-grid-header [data-draggable="grid-header-field"]:hover u,
.app-desktop .app-grid-header u:hover,
.app-grid-header [data-draggable="grid-header-field"]:not(.ui-btn-active).app-selected {
    color: #333;
}
*/
[data-draggable="grid-header-field"] i.app-field-menu {
    visibility: hidden;
    position: absolute;
    width: 20px;
    top: 0;
    right: 0;
    bottom: 1px;
    color: #777;
}

    [data-draggable="grid-header-field"] i.app-field-menu:after {
        content: 'arrow_drop_down';
        text-indent: -2px;
    }

    [data-draggable="grid-header-field"] i.app-field-menu:before {
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        /*background-color: rgba(0,0,0,0.05);*/
        border-left: solid 1px /* #d3d3d3*/;
    }

.app-desktop [data-draggable="grid-header-field"]:hover,
[data-draggable="grid-header-field"].app-selected {
    margin-right: -7px !important;
    padding-right: 7px !important;
}

.app-desktop [data-draggable="grid-header-field"]:not(.app-scroll):hover,
[data-draggable="grid-header-field"]:not(.app-scroll).app-selected {
    margin-left: 7px !important;
    padding-left: 9px !important;
}


[data-draggable="grid-header-field"].app-selected i.app-field-menu,
.app-desktop [data-draggable="grid-header-field"]:hover i.app-field-menu {
    visibility: visible;
    /*background-color: #f1f1f1;*/
}

/*    
    .app-desktop [data-draggable="grid-header-field"] i.app-field-menu:hover,
    .app-desktop [data-draggable="grid-header-field"].app-selected i.app-field-menu:after {
        color: #333;
    }
*/


[data-draggable="grid-header-field"].app-selected i.app-field-menu,
.app-desktop [data-draggable="grid-header-field"]:hover i.app-field-menu {
    background-color: #f1f1f1;
}

.app-theme-dark [data-draggable="grid-header-field"].app-selected i.app-field-menu,
.app-desktop.app-theme-dark [data-draggable="grid-header-field"]:hover i.app-field-menu {
    background-color: #333;
}

/*
.app-bar-heading [data-draggable="grid-header-field"].app-selected i.app-field-menu,
.app-desktop .app-bar-heading [data-draggable="grid-header-field"]:hover i.app-field-menu {
    background-color: #fff;
}*/

.app-desktop [data-draggable="grid-header-field"].app-frozen:nth-child(2),
[data-draggable="grid-header-field"].app-frozen:nth-child(2).app-selected {
    margin-left: 0 !important;
    padding-left: 16px !important;
    padding-right: 29px !important;
    margin-right: -29px !important;
}

.app-bar-heading span:not(.app-icon).app-field-separator:last-of-type,
.app-grid span:not(.app-icon).app-field-separator:last-of-type {
    margin-left: 5px !important;
}

.app-grid span:not(.app-icon).app-cell-separator:last-of-type {
    margin-left: 7px !important;
}

.app-grid-header .app-icon {
    display: inline !important;
    top: auto !important;
    margin-top: auto !important;
    position: static !important;
}

.app-grid-header .app-icon,
.app-desktop .ui-btn:not(.ui-btn-active):hover .app-grid-header .app-field-type-bool .app-icon {
    color: #aeaeae;
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    user-select: none;
}

[data-control] .app-control-inner.app-has-material-icon {
    min-width: 24px;
    min-height: 1em;
}

.app-btn-promo .app-icon {
    left: 50%;
    margin-left: -12px;
    text-indent: 0;
    color: #fff;
    z-index: 1;
}

.app-bar-buttons .ui-btn {
    margin-left: 5px;
    margin-right: 5px;
}

.dv-action-see-all .app-btn-prev,
.dv-action-see-all .app-btn-next {
    position: relative;
}

[data-action-path='wizard-prev'],
.dv-action-see-all .app-btn-prev {
    padding-left: 16px !important;
}


[data-action-path='wizard-next'],
.dv-action-see-all .app-btn-next {
    padding-right: 16px !important;
}

    .dv-action-see-all .app-btn-next::before {
        left: auto;
        right: 0;
    }

    [data-action-path="wizard-next"]::before {
        left: auto;
        right: 4px;
    }

[data-action-path="wizard-prev"]::before {
    left: -2px;
}

.dv-action-see-all .app-btn-prev::before,
[data-action-path="wizard-prev"]::before {
    content: 'chevron_left';
}


.app-bar-buttons [data-action-path="wizard-next"].ui-btn-active.app-btn-icon-notext,
.app-bar-buttons [data-action-path="wizard-prev"].ui-btn-active.app-btn-icon-notext,
.app-bar-buttons .app-btn-more.ui-btn-active {
    background-color: transparent;
    color: #38c;
}

.app-bar-buttons .app-btn-more::before {
    content: 'more_horiz';
}

.app-bar-buttons .ui-btn.app-btn-icon-notext {
    text-indent: -9999px;
    min-width: 24px !important;
    width: 24px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    left: auto !important;
    right: auto !important;
}

    .app-bar-buttons .ui-btn.app-btn-icon-notext::before {
        margin-left: -9px;
        left: 50%;
        right: auto;
    }

.app-sidebar .ui-panel-inner .ui-btn {
    padding-left: 36px;
}

.app-collapsible-toggle-button::before {
    content: 'expand_less';
}

.app-collapsible-toggle-button {
    right: 6px;
    position: absolute;
    height: 24px;
    top: 50%;
    margin-top: -12px;
}

.app-container-collapsed .app-collapsible-toggle-button::before {
    content: 'expand_more';
}

.app-page-modal [data-layout] [data-container="collapsible"] [data-container="toggle"] .app-collapsible-toggle-button,
.app-page-modal [data-layout] [data-container="tab"] [data-container="collapsible"] [data-container="toggle"] .app-collapsible-toggle-button {
    right: 10px;
}

.app-page-modal-root {
    display: inline-block !important;
}

.app-page-revealed,
.app-page-modal-revealed {
    display: block !important;
}

.app-page-modal-centered {
    box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.25);
}

    .app-page-modal-centered.ui-page-active {
        box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.4);
    }

.app-page-modal-obscured {
    box-shadow: none;
}

.app-page-modal-partial {
    display: block !important;
    left: auto !important;
}

.app-page-modal-glass-pane {
    z-index: 1001;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
}

.app-page-modal-glass-pane-partial {
    cursor: pointer;
}

.app-transition-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.app-bar-toolbar.ui-header .ui-btn.ui-btn-icon-notext {
    text-indent: 0px;
}

.app-bar-toolbar .material-icon-account-circle {
    content: "account_circle";
    font-size: 32px !important;
    width: 28px;
    height: 28px;
    margin-left: -3px;
}

.app-bar-toolbar .ui-btn-icon-notext .app-icon {
    left: 50%;
    margin-left: -12px;
}

.ui-panel-inner .ui-btn {
    font-weight: normal;
}

.app-bar-toolbar .app-avatar .app-icon-avatar {
    margin-left: -3px;
    margin-top: -5px;
}

.app-avatar .app-icon-avatar {
    text-transform: uppercase;
    font-style: normal;
    background-color: #fff;
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    color: #777;
    border-radius: 32px;
    padding: 0;
    border: solid 1px #aaa;
    background-size: 34px auto;
    background-position: center center;
    font-weight: normal;
    background-repeat: no-repeat;
    text-align: center;
    overflow: hidden;
}

.app-avatar.app-keep-open {
    font-weight: 600;
}

.app-avatar.app-avatar-valign {
    position: relative;
    width: 34px;
    height: 24px;
    line-height: 24px;
}

    .app-avatar.app-avatar-valign .app-icon-avatar {
        left: 50%;
        top: 50%;
        margin-left: -17px;
        margin-top: -17px;
        position: absolute;
    }

.app-font-tiny .app-avatar .app-icon-avatar {
    margin-left: -2px;
    margin-top: -2px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 30px;
    background-size: 32px auto;
}

.app-font-tiny .app-avatar .app-icon-avatar {
    margin-left: -2px;
    margin-top: -2px;
    width: 30px;
}


.app-has-avatar-with-picture .app-icon-avatar {
    text-indent: -9999px;
}

.ui-listview .app-avatar {
    padding-top: 1em !important;
}

    .ui-listview .app-avatar .app-icon-avatar {
        position: absolute;
        left: 14px;
        margin-left: -2px;
        top: 50%;
        margin-top: -16px;
        font-size: 16px;
    }

.app-field-type-bool .app-icon {
    position: static !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-top: 0 !important;
}

.app-wrapper .app-page-header {
    visibility: hidden;
}

.app-page-header-fixed {
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
}

.app-page-header .app-view-description {
    white-space: normal;
    max-width: 992px;
    font-size: 14px;
}

.ui-page.app-has-icon .app-page-header .app-view-description {
    max-width: 930px;
}

.app-density-condensed .app-page-header .app-view-description {
    font-size: 12px;
}

.app-page-header .app-icon {
    font-size: 48px;
    left: 12px !important;
    width: 48px;
    height: 48px;
    line-height: 48px;
    color: #333;
    top: 16px !important;
    margin-top: 0 !important;
}

.app-density-compact .app-page-header .app-icon {
    top: 14px !important;
}

.app-density-condensed .app-page-header .app-icon {
    top: 12px !important;
}

.app-page-header.app-has-icon {
    padding-left: 66px;
    vertical-align: middle;
}

[data-container="collapsible"] [data-container="row"].app-has-description {
    background-color: #f1f1f1;
}

[data-container="collapsible"]:not([data-header-text="none"]) [data-container="row"].app-has-description {
    border-top-width: 0;
    padding-top: 0;
}

    [data-container="collapsible"]:not([data-header-text="none"]) [data-container="row"].app-has-description [data-control="description"] {
        padding-top: 0;
    }

    [data-container="collapsible"]:not([data-header-text="none"]) [data-container="row"].app-has-description .app-control-inner {
        padding-top: 0;
    }

[data-container="collapsible"] [data-container="row"] + [data-container="row"].app-has-description {
    border-width: 1px;
    padding-top: .25em;
}

.app-desktop .app-echo:not(.app-echo-embedded) {
    padding-right: 1.5em;
}

    .app-desktop .app-echo:not(.app-echo-embedded) .app-echo-toolbar > .app-echo-see-all {
        right: 1.5em;
    }

.app-page-header .app-icon.app-icon-background {
    font-size: 240px;
    line-height: 240px;
    width: 240px;
    height: 240px;
    margin-left: -120px !important;
    margin-top: -120px !important;
    opacity: .075;
    left: 0 !important;
    overflow: hidden;
    top: 50% !important;
}


    .app-page-header .app-icon.app-icon-background::before {
        font-size: 240px;
        line-height: 240px;
        width: 240px;
        height: 240px;
        position: absolute;
        top: 50% !important;
        left: 50% !important;
        margin-left: -120px !important;
        margin-top: -120px !important;
    }

.app-page-modal.app-page-scrolled:not(.app-reading-pane-detail) .app-page-header .app-icon-background,
.app-page-header:not(.app-page-header-fixed) .app-icon-background {
    display: none;
}

.app-page-header:not(.app-page-header-fixed) {
    overflow: hidden;
}

.ui-content {
    overflow-y: hidden;
}

.app-option-selected::before,
.app-item-selected::before {
    content: ' ';
    display: inline-block;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #38c;
    position: absolute;
}

.app-page-header-image {
    height: 60px;
    left: 0;
    top: 57px;
    right: 0;
    position: absolute;
    background-position: center center;
    background-size: 2500px;
}

.app-page-header.app-has-image {
    margin-top: 60px !important;
    background-color: rgba(0,0,0,.6) !important;
}

    .app-page-header.app-has-image h1,
    .app-page-header.app-has-image h2,
    .app-page-header.app-has-image .app-icon,
    .app-page-header.app-has-image .app-view-description {
        color: #fff !important;
    }

.app-page-header.app-has-image {
    padding-top: 1em !important;
}


    .app-page-header.app-has-image .app-icon:not(.app-icon-background) {
        top: 12px !important;
    }

.app-page-header-image-original {
    background-size: 100%;
}

.app-page-modal .app-page-header-image {
    top: 0;
}

.app-icon.app-caret-r, .app-icon.app-caret-u, .app-icon.app-caret-u-d {
    margin-top: auto !important;
}

.app-animated .app-icon {
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

[data-input-container="_system_confirm"] [data-container="collapsible"] {
    border-bottom: 0;
}

.app-sidebar .app-bar-toolbar-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    line-height: normal;
    height: 56px;
    z-index: 2;
}

.app-sidebar .ui-panel-inner {
    bottom: 57px;
}

.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-sidebar-menu.app-settings-disabled .app-bar-toolbar-bottom {
    display: none;
}

.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-sidebar-menu.app-settings-disabled .ui-panel-inner {
    bottom: 0;
}

.app-has-minisidebar-left .app-sidebar .ui-panel-inner {
    bottom: 200px;
}

.app-sidebar .app-bar-toolbar-bottom {
    border-top: solid 1px #ccc;
    padding: 0 0 0 4px;
    white-space: nowrap;
    background-color: #e9e9e9;
    /*box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);*/
}

    .app-sidebar .app-bar-toolbar-bottom .ui-btn {
        display: inline-block;
        margin: 0;
        border-width: 0;
        padding: 16px 9px !important;
        width: 30px;
        height: 24px;
        text-indent: -9999px;
    }

        .app-sidebar .app-bar-toolbar-bottom .ui-btn .app-icon {
            left: 50% !important;
            margin-left: -12px;
            text-indent: 0;
        }

        .app-sidebar .app-bar-toolbar-bottom .ui-btn.app-btn-settings {
            position: absolute;
        }

    .app-sidebar .app-bar-toolbar-bottom.app-has-icons .ui-btn.app-btn-settings {
        right: 0;
    }

.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-sidebar .app-bar-toolbar-bottom.app-has-optional-apps .app-btn-apps {
    display: none;
}

.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-sidebar .app-bar-toolbar-bottom.app-has-optional-apps:not(.app-has-icons) .app-btn-settings,
.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-sidebar-menu .app-bar-toolbar-bottom.app-has-optional-apps .app-btn-settings {
    left: 0;
    padding: 10px 1em 10px 56px !important;
    right: 0;
    width: auto;
    text-align: left;
    line-height: 30px;
    height: 30px;
    text-indent: 0;
}

    .app-has-sidebar-left:not(.app-has-minisidebar-left) .app-sidebar .app-bar-toolbar-bottom.app-has-optional-apps:not(.app-has-icons) .app-btn-settings .app-icon, .app-has-sidebar-left:not(.app-has-minisidebar-left) .app-sidebar-menu .app-bar-toolbar-bottom.app-has-optional-apps .app-btn-settings .app-icon {
        left: 16px !important;
        margin-left: 0 !important;
    }

.app-has-minisidebar-left .app-sidebar .app-bar-toolbar-bottom {
    height: auto;
    padding: 0;
}

    .app-has-minisidebar-left .app-sidebar .app-bar-toolbar-bottom .ui-btn {
        display: block;
        padding: 9px 0 !important;
        width: 56px;
    }

        .app-has-minisidebar-left .app-sidebar .app-bar-toolbar-bottom .ui-btn.app-btn-settings {
            position: relative;
            right: auto;
        }

        .app-has-minisidebar-left .app-sidebar .app-bar-toolbar-bottom .ui-btn:last-of-type {
            padding-bottom: 13px !important;
        }

    .app-has-minisidebar-left .app-sidebar .app-bar-toolbar-bottom:not(.app-has-optional-apps) .ui-btn:last-of-type .app-icon, .app-has-minisidebar-left .app-sidebar .app-bar-toolbar-bottom:not(.app-has-optional-apps) .ui-btn:last-of-type .app-icon:after, .app-has-minisidebar-left .app-sidebar .app-bar-toolbar-bottom:not(.app-has-optional-apps) .ui-btn:last-of-type .app-icon:before {
        top: 21px !important;
    }

    .app-has-minisidebar-left .app-sidebar .app-bar-toolbar-bottom.app-has-optional-apps .ui-btn:last-of-type {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }

.app-sidebar .app-bar-toolbar-bottom .ui-btn:not(.ui-btn-active):not(:hover) {
    background-color: transparent;
}

.app-sidebar .app-bar-toolbar-bottom .ui-btn:not(.ui-btn-active):hover {
    background-color: rgba(0,0,0,.05);
}

.app-sidebar .app-bar-toolbar-bottom .ui-btn.app-selected:not(.ui-btn-active)::before {
    content: ' ';
    position: absolute;
    background-color: #38c;
    left: 0;
    bottom: 1px;
    right: 0;
    height: 4px;
}

.app-has-minisidebar-left .app-sidebar .app-bar-toolbar-bottom .ui-btn.app-selected:not(.ui-btn-active)::before {
    width: 4px;
    top: 0;
    left: 0;
    right: auto;
    height: auto;
}

.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-sidebar-menu .app-btn-page {
    display: none;
}

.ui-panel .ui-listview .app-has-depth + .app-has-depth .ui-btn {
    border-top-width: 0;
}

.ui-panel-inner .app-depth2 .app-icon {
    left: 54px !important;
}

.ui-panel-inner .app-depth2 {
    padding-left: 86px !important;
}

.ui-panel-inner .app-depth3 .app-icon {
    left: 82px !important;
}

.ui-panel-inner .app-depth3 {
    padding-left: 114px !important;
}

.ui-panel-inner .app-depth4 .app-icon {
    left: 110px !important;
}

.ui-panel-inner .app-depth4 {
    padding-left: 142px !important;
}

.ui-panel-inner .app-depth5 .app-icon {
    left: 138px !important;
}

.ui-panel-inner .app-depth5 {
    padding-left: 170px !important;
}

.ui-panel-inner .app-has-depth .ui-btn {
    white-space: normal !important;
}

.app-no-icons.app-popup-icon-left .ui-listview li .ui-btn:not(.ui-btn-icon-notext):not(.ui-mini) {
    padding-left: 26px;
}

.app-no-icons .ui-panel-inner .app-depth2 {
    padding-left: 56px !important;
}

.app-no-icons .ui-panel-inner .app-depth3 {
    padding-left: 84px !important;
}

.app-no-icons .ui-panel-inner .app-depth4 {
    padding-left: 112px !important;
}

.app-no-icons .ui-panel-inner .app-depth5 {
    padding-left: 140px !important;
}

.app-sidebar .ui-panel-inner .app-depth1 {
    padding-left: 56px !important;
}

.app-sidebar .ui-panel-inner .app-depth2:not(.app-has-icon) {
    padding-left: 84px !important;
}

.app-sidebar .ui-panel-inner .app-depth3:not(.app-has-icon) {
    padding-left: 112px !important;
}

.app-sidebar .ui-panel-inner .app-depth4:not(.app-has-icon) {
    padding-left: 130px !important;
}

.app-sidebar .ui-panel-inner .app-depth5:not(.app-has-icon) {
    padding-left: 158px !important;
}

.app-sidebar .ui-panel-inner .app-has-icon.app-depth1 {
    padding-left: 56px !important;
}
/*.app-sidebar .ui-panel-inner .app-has-icon.app-depth2 {
    padding-left: 0px !important;
}

.app-sidebar .ui-panel-inner .app-has-icon.app-depth3 {
    padding-left: 88px!important;
}

.app-sidebar .ui-panel-inner .app-has-icon.app-depth4 {
    padding-left: 104px !important;
}

.app-sidebar .ui-panel-inner .app-depth5 {
    padding-left: 120px !important;
}*/
.app-has-depth .app-item-selected {
    font-weight: 600;
}

.app-has-depth .ui-btn {
    white-space: normal;
}

.app-menu-strip-has-title {
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: default;
}

    .app-menu-strip-has-title .app-menu-strip-title {
        height: 56px;
        line-height: 56px;
        padding: 0;
        font-weight: normal;
    }

.app-density-comfortable .app-menu-strip-has-title .app-menu-strip-title {
    font-size: 14px;
}

/*.app-has-sidebar-left.app-has-minisidebar-left .app-menu-strip-has-title .app-menu-strip-title {
    padding-left: 0;
}
*/
.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-menu-strip-has-title .app-menu-strip-title {
    padding-left: 19px;
}

/*.app-density-comfortable .ui-panel-inner .app-has-depth .ui-btn {
    font-size:14px;
}*/
/* "Hosted" user interface alterations */
/*.app-hosted .app-page-modal {
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.35);
}
*/
.app-hosted .app-page-modal-centered.ui-page-active {
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5);
}

.app-hosted .app-page-modal-background {
    background-color: transparent;
}

.app-hosted .app-bar-toolbar {
    background-color: transparent;
    border-color: transparent;
    background-image: none !important;
}

.app-hosted.app-hosted-show-navigation .app-bar-toolbar #app-btn-menu.ui-icon-bars {
    display: none !important;
}

.app-hosted .app-bar-toolbar .app-btn-menu-background {
    display: none;
}

.app-hosted.app-hosted-show-navigation .app-bar-toolbar .ui-title {
    margin-left: 0 !important;
    display: none !important;
}

.app-hosted .app-menu-strip {
    margin-left: -8px !important;
}

.app-hosted:not(.app-hosted-show-navigation) .app-menu-strip {
    visibility: hidden !important;
}

.app-hosted .ui-panel-position-right .ui-panel-inner {
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    border-right: solid 1px #ddd;
    bottom: 1px;
}

.app-hosted .ui-panel-position-left .ui-panel-inner {
    border-top: solid 1px #ddd;
    border-left: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    bottom: 1px;
}

.app-hosted .app-bar-toolbar .app-logo {
    display: none;
    width: 0 !important;
    left: 0;
}

.app-hosted.app-desktop .app-menu-strip ul li .ui-btn:hover:not(.ui-btn-active) {
    background-color: transparent !important;
    color: #000;
}

.app-hosted.app-desktop .app-menu-strip ul li .ui-btn.app-selected:hover:not(.ui-btn-active) {
    background-color: #f6f6f6 !important;
    color: #000;
}

.app-hosted .ui-panel .app-list-instruction.ui-li-divider.ui-first-child {
    border-top-width: 0 !important;
}

.app-hosted .app-menu-strip .app-selected:not(.app-has-children) {
    font-weight: 600;
}
/* new transition framework */
.app-transition-slide-peel-in {
    transition: transform 250ms ease-out;
    z-index: 2;
}

.app-transition-slide-peel-out {
    transition: transform 250ms ease-out, opacity 250ms ease-out;
    z-index: 2;
}

.app-transition-slide-background .ui-header-fixed, .app-transition-slide-background .ui-footer-fixed {
    z-index: 2;
}

.app-transition-slide {
    transition: transform 350ms ease-in-out;
}

.app-transition-slide2 {
    transition: transform 340ms ease-in-out;
}

.app-transition-slide-and-reveal {
    transition: transform 200ms ease-in-out, opacity 200ms linear;
}

.app-transition-fade-in {
    transition: opacity 200ms ease-in-out;
}

.app-transition-fade-out {
    transition: opacity 150ms ease-in-out;
}

.app-echo .app-listview .app-list-instruction {
    padding-bottom: 0 !important;
}

/***************************************/
/* account manager screen              */
/***************************************/

.app-has-acc-man .app-btn-promo {
    visibility: hidden;
}

.app-acc-man {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1090;
    line-height: normal;
}

.app-acc-man-inactive {
    z-index: 1000;
}

.app-acc-space {
    position: absolute;
    left: 0;
    right: 457px;
    top: 0;
    bottom: 0;
    background-position: left top;
    background-size: auto 100%;
    background-repeat: repeat-x;
}

.app-acc-man .app-logo {
    padding: 57px 0 12px 8px;
    font-size: 30px;
    text-transform: uppercase;
    background-size: auto 100%;
    background-position: left center;
    background-repeat: no-repeat;
}

.app-acc-man .app-acc-msg {
    padding: 8px 40px 0 8px;
}

.app-acc-man .app-acc-close {
    height: 40px;
    width: 40px;
    position: absolute;
    top: 16px !important;
    cursor: pointer;
    display: inline-block;
    display: none;
    right: 8px;
}

    .app-acc-man .app-acc-close i {
        top: 50%;
        left: 50%;
        margin-left: -12px;
        margin-top: -12px;
        position: absolute;
    }

    .app-acc-man .app-acc-close.ui-btn-active i {
        color: #38c;
    }

.app-acc-man.app-acc-man-switch .app-acc-close {
    display: inline-block;
}

.app-acc-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1em 8px 1em 8px;
}

.app-acc-list {
    position: absolute;
    right: 24px;
    left: 8px;
    right: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0;
    -ms-overflow-style: auto;
}

.app-acc-footer {
    position: absolute;
    left: 0;
    right: 0;
    vertical-align: bottom;
    padding: 8px 8px 16px 16px;
    bottom: 0;
    white-space: normal;
    font-size: 12px;
}

.app-acc-man ul {
    padding-left: 0;
    margin: 0;
}

.app-acc-man li {
    list-style: none;
    padding: 5px 0;
}

    .app-acc-man li a:hover:not(.app-link-disabled) {
        cursor: pointer;
    }

    .app-acc-man li a {
        display: block;
        position: relative;
        text-decoration: none;
        padding: 10px 15px 10px 60px;
        width: auto;
        height: auto;
    }

        .app-acc-man li a.app-link-disabled {
            cursor: default;
        }

.app-acc-man ul a i {
    width: 32px;
    height: 32px;
    line-height: 32px;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -16px !important;
}

    .app-acc-man ul a i.app-icon-avatar {
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        margin-top: -20px !important;
        background-size: 42px auto !important;
    }

    .app-acc-man ul a i.material-icon {
        left: 20px;
    }

.app-acc-man a .app-btn-more {
    right: 0;
    left: auto;
    top: 0px !important;
    right: 0px;
    margin: 0 !important;
    display: inline-block;
    height: 40px;
    width: 40px;
}

.app-acc-man .app-user-name {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 24px;
}

.app-is-sm .app-acc-man .app-acc-close {
    right: 24px !important;
}

.app-is-sm .app-acc-man .app-user-name {
    font-size: 18px;
}

.app-is-md .app-acc-footer {
    padding: 8px 16px 16px 32px;
    font-size: 1em;
}

.app-is-sm .app-acc-space {
    width: 100%;
}

.app-is-md .app-acc-list {
    left: 24px;
    top: 140px;
    left: 20px;
}

.app-is-md .app-logo {
    padding-left: 0;
}

.app-is-md.app-acc-man .app-acc-msg {
    padding-left: 0;
}

.app-is-md .app-acc-inner {
    width: 640px;
    left: auto;
    padding: 1em 1em 1em 2em;
}

.app-is-xl .app-acc-inner {
    width: 50%;
}

.app-acc-man.app-is-lg .app-user-name {
    font-size: 20px;
}

.app-acc-inner.app-is-lg {
    width: 640px;
}

.app-acc-man .app-selected .app-user-name {
    font-weight: 600;
}

.app-acc-man .app-user-email {
    font-size: 14px;
    display: block;
}

.app-acc-man .app-user-signed-out {
    font-size: 14px;
    font-style: italic;
    display: block;
}


/* Material Design Icons */
.material-icon, .ui-btn::before, .ui-btn::after, .app-btn-more::after, .app-btn::after,
/*.app-btn-prev::before,
.app-btn-next::after,*/
.ui-input-search:after, .app-btn-check:after, .app-data-list li:before,
/*[data-action-path="wizard-prev"]:before,
[data-action-path="wizard-next"]:after,
.app-collapsible-toggle-button::before,
.app-field-object-ref::before,*/
.ui-input-search:after, .app-row-status::after {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    text-indent: 0;
}

[data-content-framework="bootstrap"] .material-icon {
    position: relative;
}

.ui-btn:after {
    display: none;
}

.ui-btn-icon-notext:after, .ui-btn-icon-left:after, .ui-btn-icon-right:after, .app-has-droparrow:after, .app-btn-has-glyph:after {
    display: inline-block;
}

.ui-btn-icon-notext:after, .ui-btn-icon-left:after, .ui-btn-icon-right:after {
    margin-top: -12px;
}

.ui-btn-icon-left:after, .ui-header .ui-btn-icon-left:after, .ui-footer .ui-btn-icon-left:after {
    left: 16px;
}

.app-page-scrollable .ui-btn-icon-left:after {
    left: 6px;
}

.app-sidebar .ui-btn-icon-left:after {
    left: 16px;
}

.ui-mini.ui-btn-icon-left:after {
    left: 3px;
}

.ui-btn-icon-right:after, .app-echo-toolbar h3::after, .app-bar-actions > h3::after, .app-btn-options::after {
    right: 12px;
}

.ui-btn.app-has-children::after {
    right: 0;
}

.app-bar-actions > h3::after {
    right: 10px;
    top: 50%;
    margin-top: -12px;
}

.ui-icon-bars::after {
    content: "menu";
}

.ui-icon-edit:after {
    content: "edit";
}

.ui-input-search:after, .ui-icon-search:after, .app-btn-search:after {
    content: "search";
}

.app-page-modal-title .app-btn-fullscreen::after {
    content: 'fullscreen';
    font-size: 20px;
}

.app-page-modal-title .app-btn-fullscreen-exit::after {
    content: 'fullscreen_exit';
}

.app-page-modal-title .app-btn-close::after {
    content: 'close';
}

.ui-icon-trash:after {
    content: "delete";
}

.ui-btn.ui-icon-carat-l:after {
    content: "chevron_left";
}

.ui-btn.ui-icon-carat-r:after {
    content: "chevron_right";
}

.ui-icon-back:after {
    content: "undo";
}

.ui-icon-grid:after {
    content: "grid_on";
}

.ui-icon-bullets:after {
    content: "view_list";
}

.ui-icon-cards:after {
    content: "grid_view";
}

.ui-icon-chart:after {
    content: "insert_chart";
}

.ui-icon-calendar:after {
    content: "event";
}

.ui-icon-duplicate:after {
    content: "content_copy";
}

.ui-icon-sort:after {
    content: "sort";
}

.ui-icon-filter:after {
    content: "filter_list";
}

.ui-icon-group:after {
    content: "group_work";
}

.ui-icon-plus:after {
    content: "add";
}

.ui-icon-gear:after {
    content: "settings";
}

.ui-icon-info:after {
    content: "info";
}

.ui-icon-file-pdf:after {
    content: "picture_as_pdf";
}

.ui-icon-delete:after {
    content: "clear";
}

.ui-icon-location:after {
    content: "location_on";
}

.ui-icon-zoomin:after {
    content: "zoom_in";
}

.ui-icon-zoomout:after {
    content: "zoom_out";
}

.ui-icon-navigation:after {
    content: "navigation";
}

.ui-icon-arrow-l:after {
    content: "arrow_back";
}

.ui-icon-arrow-r:after {
    content: "arrow_forward";
}

.ui-icon-download:after {
    content: "file_download";
}

.ui-icon-rss:after {
    content: "rss_feed";
}

.ui-icon-cloud-download:after {
    content: "cloud_download";
}

.ui-icon-clear:after {
    content: "clear";
}

.app-checked svg {
    display: none;
}

.ui-icon-phone:after {
    content: "call";
}

.ui-icon-refresh:after {
    content: "refresh";
}

.ui-icon-file-upload:after {
    content: 'file_upload';
}

.ui-icon-grid-on:after {
    content: 'grid_on';
}

.ui-icon-dots:after, .app-btn-more:after, .app-btn-context:after {
    content: 'more_horiz';
}

.app-can-drag.app-listview .app-btn-more,
.app-can-drag .app-listview .app-btn-more {
    touch-action: none;
    cursor: grab;
}

    .app-can-drag.app-listview .app-btn-more:after,
    .app-can-drag .app-listview .app-btn-more:after {
        content: 'drag_indicator';
    }

.app-android .ui-icon-dots:after, .app-android .app-btn-more:after, .app-android .app-btn-context:after {
    content: 'more_vert';
}

.ui-icon-rss-feed:after {
    content: 'rss_feed';
}

.ui-icon-picture-as-pdf:after {
    content: 'picture_as_pdf';
}

.ui-icon-collections:after {
    content: 'collections';
}

.ui-icon-library-books:after {
    content: 'library_books';
}

.ui-icon-filter-none:after {
    content: 'grid_on';
}

.ui-icon-wrench:after {
    content: 'build';
}

.ui-icon-power:after {
    content: 'power_settings_new';
}

.ui-icon-account:after {
    content: 'perm_identity';
}

.ui-icon-close-circle:after {
    content: 'cancel';
}

.ui-icon-unchecked:after {
    content: 'check_box_outline_blank';
}

.ui-icon-lock:after {
    content: 'lock_open';
}

.ui-btn .material-icon {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    margin-top: -12px;
}

.app-bar-actions .app-group-item + .app-group-item {
    margin-left: -.31em !important;
}

.app-color-block {
    position: absolute;
    display: inline-block;
    right: 16px;
    width: 16px;
    height: 16px;
    border: solid 1px #ddd;
}

.app-item-tile {
    display: inline-block;
    width: 33.33%;
    float: left;
}

    .app-item-tile .ui-btn {
        height: 30px;
        max-height: 30px;
        padding-top: 60px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 8px !important;
        text-align: center !important;
        font-size: 12px !important;
        white-space: normal !important;
        border-width: 0 !important;
    }

        .app-item-tile .ui-btn .app-icon, .app-item-tile .ui-btn .app-icon::after, .app-item-tile .ui-btn .app-icon::before {
            font-size: 42px;
            width: 42px;
            height: 42px;
            line-height: 42px;
        }

        .app-item-tile .ui-btn .app-icon {
            left: 50% !important;
            top: 26px !important;
            margin-left: -21px;
            margin-top: 0;
        }

        .app-item-tile .ui-btn.app-item-selected::before {
            content: none;
        }

        .app-item-tile .ui-btn.app-item-selected:not(.ui-btn-active), .app-item-tile .ui-btn.app-item-selected:not(.ui-btn-active) .app-icon::after, .app-item-tile .ui-btn.app-item-selected:not(.ui-btn-active) .app-icon::before, .app-item-tile .ui-btn.app-item-selected:not(.ui-btn-active) .app-icon {
            color: #000;
        }

        .app-item-tile .ui-btn:not(.ui-btn-active):not(:hover) {
            background-color: transparent !important;
        }

    .app-item-tile.app-item-tile-stub .ui-btn {
        visibility: hidden;
    }

body:not(.app-has-minisidebar-left) .app-sidebar .app-view-selector .ui-btn {
    white-space: normal;
}

.app-acc-space, .app-reading-pane-bkg {
    background-image: url("../../images/acc-man-bkg.jpg");
}

.app-acc-space {
    background-position: left center;
    background-size: auto 100%;
}

.ui-page:not(.app-custom-density-disabled) [data-density="relaxed"] {
    font-size: 18px;
}

.ui-page:not(.app-custom-density-disabled) [data-density="comfortable"] {
    font-size: 16px;
}

.ui-page:not(.app-custom-density-disabled) [data-density="compact"] {
    font-size: 14px;
}

.ui-page:not(.app-custom-density-disabled) [data-density="condensed"] {
    font-size: 12px;
}

.app-bar-search {
    padding: .75em 78px .75em 40px !important;
    margin: 0 !important;
    position: relative;
}

    .app-bar-search [data-input] {
        overflow: hidden;
        white-space: nowrap;
    }

    .app-bar-search[data-container="row"] {
        border-width: 0;
    }

    .app-bar-search .material-icon {
        cursor: pointer;
        width: 36px;
        text-align: center;
    }

        .app-bar-search .material-icon.ui-btn-active {
            color: #38c;
        }

        .app-bar-search .material-icon::before {
            left: 50%;
            margin-left: -20px;
        }

    .app-bar-search .material-icon-search {
        left: 8px;
    }

    .app-bar-search .material-icon-more {
        right: 12px;
        left: auto;
        height: 24px;
    }

    .app-bar-search .material-icon-cancel {
        left: auto;
        right: 48px;
    }

    .app-bar-search.app-null .material-icon-cancel {
        display: none;
    }

    .app-bar-search + .app-bar-history {
        padding: .5em 0 .5em 0 !important;
        margin: 0 !important;
        position: relative;
    }

        .app-bar-search + .app-bar-history ul {
            padding: 0;
            margin: 0;
        }

        .app-bar-search + .app-bar-history li {
            list-style-type: none;
            padding: 1em .5em 1em 50px;
            margin: 0;
            position: relative;
            cursor: pointer;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color: #777;
        }

        .app-bar-search + .app-bar-history .app-hint {
            padding-top: 0;
            padding-bottom: .5em;
            font-style: italic;
            font-size: 12px;
            cursor: default;
            white-space: normal;
            color: #38c;
        }

.app-desktop .app-bar-search + .app-bar-history li[data-text]:hover {
    background-color: #f1f1f1;
}

.app-desktop .app-bar-search + .app-bar-history li b {
    color: #000;
}

.app-bar-search + .app-bar-history li .material-icon {
    color: #999 !important;
    left: 8px;
    margin-left: 0 !important;
    width: 36px;
    text-align: center;
}
/*.app-bar-search + .app-bar-history li.app-selected,
.app-bar-search + .app-bar-history li.app-selected .material-icon,
.app-bar-search + .app-bar-history li.app-selected b {
    background-color: #38c !important;
    color: #fff !important;
}*/
[data-container="collapsible"] + [data-container="tabset"] {
    margin-top: -1px;
}
/**** PROTOTYPE of shadows in scrollable panels ****/
/*span.app-scroll-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 1;
    opacity: 0;
    padding: 0;
    margin: 0;
    display: inline-block;
    transition: opacity 200ms;
}

span.app-scroll-indicator-up {
    top: -1px;
    box-shadow: 0 0 10px 5px rgba(0,0,0,.2);
}

span.app-scroll-indicator-down {
    bottom: -1px;
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);
}


.app-can-scroll-up .app-scroll-indicator-up {
    opacity: 1;
}

.app-can-scroll-down .app-scroll-indicator-down {
    opacity: 1;
}

.app-can-scroll-up,
.app-can-scroll-down {
    overflow: hidden;
}

.app-sidebar .app-scroll-indicator-up {
    top: 56px;
}

.app-has-toolbar-bottom .app-scroll-indicator-down {
    bottom: 56px;
}*/
.app-virtual-screen-bar {
    position: absolute;
    z-index: 20000;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 0;
    border-style: solid;
    background-color: #fafafa;
    border-color: #e3e3e4;
}

    .app-virtual-screen-bar.app-left {
        border-right-width: 1px;
    }

    .app-virtual-screen-bar.app-top {
        border-bottom-width: 1px;
    }

    .app-virtual-screen-bar.app-right {
        border-left-width: 1px;
    }

    .app-virtual-screen-bar.app-bottom {
        border-top-width: 1px;
    }

#app-banner {
    position: absolute;
    overflow: hidden;
    z-index: 20001;
    padding: 0;
    box-sizing: border-box;
}

.app-theme-dark .app-virtual-screen-bar {
    background-color: #111;
    border-color: #333;
}

[data-control][data-size] {
    min-width: 0;
    max-width: none;
    padding-right: 0;
    text-align: left !important;
}

[data-input="dropdownlist"][data-size], [data-input="autocomplete"][data-size], [data-input="lookup"][data-size] {
    padding-right: 22px;
}

[data-input="listbox"][data-size="auto"], [data-input="checkboxlist"][data-size="auto"], [data-input="radiobuttonlist"][data-size="auto"], [data-control][data-size="fit"] {
    display: block;
    min-width: 0;
    max-width: none;
}
/*[data-control][data-text-transform="lowercase"],
[data-control][data-text-transform="lowercase"] .app-data-input {
    text-transform: lowercase;
}

[data-control][data-font-weight="bold"],
[data-control][data-font-weight="bold"] .app-data-input {
    font-weight: bold;
}*/
/* Input Focus Rules */
/*
[data-control].app-has-focus {
    background-color: #ddd;
}

    [data-control].app-has-focus .app-control-helper li {
        border-color: #777;
        color: #000;
    }

[data-control].app-has-focus {
    background-color: #e8f5ff;
}

    [data-control].app-has-focus .app-control-helper li {
        border-color: #777;
    }

*/
/* Makes all text inputs colorful */
/*[data-layout][data-state="write"] [data-control="field"]:not([data-read-only="true"]):not([data-input="radiobuttonlist"]):not([data-input="listbox"]):not([data-input="checkboxlist"]) {
    background-color: #e8f5ff;
}*/


[data-control] .app-control-after {
    display: flex;
    visibility: visible !important;
    padding: 3px 0.5em;
}

[data-control][data-type="datetime"] .app-control-inner:not(.app-control-inner-trailer) {
    padding-right: .7em !important;
}

.app-control-inner-trailer {
    padding-right: 2.25em !important;
}

.app-progress-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10002;
    line-height: normal;
}


.app-progress-text {
    font-size: 14px;
    position: absolute;
    bottom: 50%;
    margin-bottom: 12px;
    left: 17%;
    width: 66%;
    text-align: center;
}

.app-progress-estimate {
    font-size: 12px;
    color: #777;
    position: absolute;
    top: 50%;
    margin-top: 12px;
    left: 50%;
    width: 500px;
    margin-left: -257px;
    text-align: center;
}

.app-progress-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    height: 4px;
    overflow: hidden;
}

.app-progress-indicator {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    transition: width linear 250ms;
}

    .app-progress-indicator.app-progress-marquee {
        width: 100%;
        animation-delay: 1000ms;
        animation-name: busy-indicator;
        animation-duration: 3000ms;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

[data-layout="form"] .app-icon.app-icon-checkbox, .app-desktop [data-layout="form"] .app-icon.app-icon-checkbox:hover {
    color: #777 !important;
}

.app-control-toolbar {
    padding: 8px 4px 8px 8px;
    background-color: #f1f1f1;
    color: #333;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    height: 24px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    /*border-bottom: solid 1px #ddd;*/
    transition: opacity 250ms ease;
    user-select: none;
}

    .app-control-toolbar.app-control-toolbar-noframe {
        box-shadow: 0px 0px 16px rgba(0,0,0,0.4);
    }

    .app-control-toolbar .app-has-droparrow {
        height: 24px;
        line-height: 24px;
        vertical-align: top;
        padding: 0 24px 0 4px;
        display: inline-block;
        cursor: pointer;
        position: relative;
        font-size: 14px;
        font-style: normal;
    }

        .app-control-toolbar .app-has-droparrow::after {
            right: 6px;
        }

.app-density-condensed .app-control-toolbar .app-has-droparrow {
    font-size: 12px
}

.app-control-toolbar i {
    margin-right: 8px;
    cursor: pointer;
    position: static !important;
    /*top: auto !important;*/
    height: 24px;
    width: 24px;
    vertical-align: baseline !important;
}

.app-control-toolbar .app-divider {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 12px;
    height: 24px;
    border-width: 0;
}

.app-control-toolbar .app-has-droparrow + .app-divider {
    width: 6px;
}

.app-control-toolbar .app-shim-more {
    position: absolute;
    z-index: 1;
    background-color: #f1f1f1;
    width: 50px;
    right: 0;
    top: 0;
    bottom: 0;
}

.app-control-toolbar .app-control-toolbar-more {
    position: absolute !important;
    right: 8px;
    z-index: 1;
}

.app-control-toolbar .app-hidden {
    display: none;
}

.app-desktop .app-control-toolbar .app-control-toolbar-more:hover {
    background-color: transparent !important;
}

.app-desktop .app-control-toolbar i:not(.app-selected):not(.app-active):not(.app-control-toolbar-more):not(.app-disabled):hover, .app-control-toolbar i:not(.app-active).app-selected {
    padding: 8px 4px;
    margin: -4px 4px -4px -4px;
}

.app-desktop .app-control-toolbar .app-has-droparrow:not(.app-disabled):hover, .app-control-toolbar .app-has-droparrow.app-selected:not(.app-disabled) {
    margin-top: -8px;
    margin-bottom: -8px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.app-control-toolbar i:not(.app-active).app-disabled {
    cursor: default;
}

.app-control-frame {
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0px 16px rgba(0,0,0,0.4);
    transition: opacity 250ms ease;
    user-select: none;
}

    .app-control-toolbar.app-hidden, .app-control-frame.app-hidden {
        opacity: 0;
        box-shadow: none;
    }

.app-data-input-container.app-has-rtf {
    overflow: hidden;
    margin-bottom: -4em;
}

iframe.app-data-input {
    height: 100%;
}

.app-control-inner .app-rtf-gutter {
    display: block;
    padding: 0;
    margin: 0;
    height: 1.5em;
    transition: height 100ms linear;
}

    .app-control-inner .app-rtf-gutter.app-animation {
        height: 0;
    }

.app-rtf-cursor {
    position: absolute;
    width: 1px;
    height: 1em;
    background-color: #000;
    z-index: 1002;
}

.app-rtf-editor [data-container="row"] {
    border-width: 0;
}

    .app-rtf-editor [data-container="row"]:first-child {
        padding-top: 40px;
        border-width: 1px;
        padding-bottom: 400px;
    }

    .app-rtf-editor [data-container="row"] .app-control-toolbar {
        margin-left: -1em;
        padding-left: 1.25em;
        margin-right: -1em;
        padding-right: 1.25em;
    }

    .app-rtf-editor [data-container="row"] .app-control-inner.app-text-multiline {
        max-width: none;
    }

.app-blob-placeholder {
    display: none;
    margin-bottom: .25em;
}

.app-null .app-blob-placeholder {
    display: block;
}

.app-bar-notify {
    font-size: 16px;
    background-color: #323232;
    color: #fff;
    display: block;
    position: absolute;
    padding: 14px 24px;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: default;
    z-index: 9998;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
}

    .app-bar-notify.app-bar-notify-center {
        right: auto;
        max-width: 520px;
        min-width: 240px;
        border-radius: 3px;
    }

    .app-bar-notify.app-bar-notify-left {
        right: auto;
        max-width: 520px;
        min-width: 240px;
        border-radius: 3px;
        box-shadow: 0 0 5px #808080;
    }
    /*.app-bar-notify.app-bar-notify-transparent.app-bar-notify-left,
    .app-bar-notify.app-bar-notify-transparent.app-bar-notify-center {
        opacity: 0.75;
    }*/
    .app-bar-notify.app-hidden {
        display: none;
    }

    .app-bar-notify .ui-btn {
        float: right;
    }

.app-has-progress-screen .app-bar-notify {
    z-index: 10002;
}


.app-density-compact .app-bar-notify {
    font-size: 14px;
}

.app-density-condensed .app-bar-notify {
    font-size: 12px;
}

.app-bar-tabs {
    padding: 0;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
    background-color: #f6f6f6;
}

    .app-bar-tabs ul {
        display: block;
        padding: 0;
        margin: 0;
    }

        .app-bar-tabs ul li {
            list-style-type: none;
            display: inline-block;
            cursor: pointer;
            padding: 7px 0;
            max-width: 160px;
            min-width: 60px;
            white-space: normal;
            vertical-align: top;
        }

            .app-bar-tabs ul li .app-icon {
                position: static !important;
                display: block;
                width: 100%;
                margin-top: 0 !important;
            }

            .app-bar-tabs ul li span {
                display: block;
                padding: 0px 2px 0px 2px;
                min-height: 17px;
                line-height: 17px;
                vertical-align: bottom;
                text-overflow: ellipsis;
                overflow: hidden;
            }

.app-desktop .app-bar-tabs ul li:not(.app-selected):hover span, .app-desktop .app-bar-tabs ul li:not(.app-selected):hover .app-icon {
    color: #000;
}

.app-bar-aggregates + .app-bar-tabs {
    border-top: solid 1px #ddd;
}

.app-bar-toolbar-bottom.app-has-tabbar {
    min-height: 56px;
}

.app-bar-tabs .material-icon-more::before {
    content: 'more_horiz';
}

.app-android .app-bar-tabs .material-icon-more::before, .app-android .app-bar-buttons .app-btn-more::before {
    content: 'more_vert';
}

.app-popup .ui-li-count {
    right: auto;
    position: static;
    margin-left: .5em;
}

.app-has-complete-toolbar-in-sidebar .app-menu-strip, .app-has-complete-tabbar .app-menu-strip {
    visibility: hidden;
}
/*.app-echo .app-echo-toolbar > .app-echo-see-all.ui-btn-active,
.app-desktop .app-echo .app-echo-toolbar > .app-echo-see-all:hover {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 6px;
    margin-left: -6px;
    margin-top: 5px;
    margin-bottom: 5px;
}
*/
.ui-panel-inner .app-focus::before, .app-bar-search + .app-bar-history li.app-selected::before, .app-data-input-popup ul li.app-selected::before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.app-focus-frame {
    position: absolute;
    background-color: transparent;
    outline: 3px solid;
    z-index: 3;
    user-select: none;
}
/*.app-page-modal-background.app-page-modal-background-transparent {
    background: none !important;
}*/
.app-page-modal-glass-pane.app-page-modal-glass-pane-partial {
    background-color: transparent;
}

.app-has-modal-background-transparent .app-page-modal-background, .app-has-modal-background-transparent .app-page-modal-glass-pane {
    background-color: transparent;
}

.app-has-modal-glass-pane-transparent.app-has-modal-background-clear .app-page-modal-background {
    background-color: transparent;
}

.app-grid .app-btn-more {
    position: relative;
}

.app-image-preview-box, .app-image-preview, a[data-href] {
    cursor: pointer;
}
/* Inline Editor Form */
.app-form-inlineeditor .app-control-inner.app-text-multiline {
    max-width: none;
}

.app-form-inlineeditor [data-container="simple"] {
    padding: .25em 40px;
    border: solid 1px #444;
    margin-top: 1px;
}

    .app-form-inlineeditor [data-container="simple"] > [data-container="row"] {
        border-top-width: 0;
        padding-left: 0;
        padding-right: 0;
    }

.app-form-inlineeditor .app-form-inlineeditor-label {
    padding: 0 .5em 0 .2em;
    margin-top: -.25em;
}

    .app-form-inlineeditor .app-form-inlineeditor-label [data-control="label"] {
        font-size: 10px;
    }

        .app-form-inlineeditor .app-form-inlineeditor-label [data-control="label"] .app-control-inner {
            padding: 0;
        }

.app-density-comfortable .app-form-inlineeditor .app-form-inlineeditor-label {
    padding-left: .5em;
}

.app-page-inlineeditor-overlay .app-form-inlineeditor-label, .app-page-inlineeditor-overlay .app-vscrollbar, .app-page-inlineeditor-overlay .app-stub {
    display: none !important;
}

.app-form-inlineeditor [data-container="simple"] > .material-icon {
    left: 6px;
    cursor: pointer;
    width: 40px;
    text-align: center;
    top: 30px !important;
}

.app-density-condensed.app-font-tiny .app-custom-density-disabled .app-form-inlineeditor [data-container="simple"] > .material-icon {
    top: 22px !important;
}

.app-density-condensed .app-custom-density-disabled .app-form-inlineeditor [data-container="simple"] > .material-icon {
    top: 24px !important;
}

.app-density-compact .app-custom-density-disabled .app-form-inlineeditor [data-container="simple"] > .material-icon {
    top: 26px !important;
}

.app-density-comfortable .app-custom-density-disabled .app-form-inlineeditor [data-container="simple"] > .material-icon {
    top: 28px !important;
}

.app-page-inlineeditor.app-page-inlineeditor-overlay {
    outline-width: 3px;
    outline-style: solid;
    box-shadow: none;
}

    .app-page-inlineeditor.app-page-inlineeditor-overlay.app-page-inlineeditor-inactive {
        visibility: hidden;
    }

    .app-page-inlineeditor.app-page-inlineeditor-overlay .app-wrapper {
        overflow-y: hidden !important;
    }

.app-page-inlineeditor-overlay .app-form-inlineeditor {
    margin-top: 0 !important;
}

    .app-page-inlineeditor-overlay .app-form-inlineeditor [data-container="simple"] {
        padding: 0;
        border-width: 0;
        margin-top: 0;
    }

        .app-page-inlineeditor-overlay .app-form-inlineeditor [data-container="simple"] > .material-icon {
            display: none;
        }

    .app-page-inlineeditor-overlay .app-form-inlineeditor .app-form-inlineeditor-label {
        margin-top: 0;
    }

    .app-page-inlineeditor-overlay .app-form-inlineeditor [data-container="row"] {
        padding: 0;
        border-width: 0;
    }

.app-page-inlineeditor-overlay .app-data-input-button {
    right: 0;
}

.app-page-inlineeditor-overlay.app-page-inlineeditor-textalignright [data-control="field"], .app-page-inlineeditor-overlay.app-page-inlineeditor-textalignright [data-control="field"] .app-data-input {
    text-align: right;
}

    .app-page-inlineeditor-overlay.app-page-inlineeditor-textalignright [data-control="field"] .app-data-input-placeholder {
        left: auto;
        right: 0;
    }

.app-page-inlineeditor.app-page-inlineeditor-overlay .app-data-input-container {
    padding: 0;
}

    .app-page-inlineeditor.app-page-inlineeditor-overlay .app-data-input-container .app-data-input, .app-page-inlineeditor.app-page-inlineeditor-overlay .app-control-inner, .app-page-inlineeditor.app-page-inlineeditor-overlay .app-data-input-placeholder {
        padding: 0;
    }

.app-page-inlineeditor-overlay .app-data-input-placeholder {
    top: 0;
}

.app-page-inlineeditor.app-page-inlineeditor-overlay [data-input="lookup"] .app-data-input-container, .app-page-inlineeditor.app-page-inlineeditor-overlay [data-input="autocomplete"] .app-data-input-container, .app-page-inlineeditor.app-page-inlineeditor-overlay [data-input="dropdownlist"] .app-data-input-container {
    margin-right: 22px;
}

.app-page-inlineeditor-overlay.app-page-inlineeditor-gridstyle .app-data-input-placeholder {
    left: 0;
    top: 8px;
}

.app-page-inlineeditor-overlay.app-page-inlineeditor-gridstyle .app-control-inner, .app-page-inlineeditor-overlay.app-page-inlineeditor-gridstyle .app-data-input {
    padding: 8px 1px !important;
}

.app-density-compact .app-page-inlineeditor-overlay.app-page-inlineeditor-gridstyle .app-data-input-placeholder {
    top: 7px;
}

.app-page-inlineeditor-overlay.app-page-inlineeditor-gridstyle .app-data-input-container {
    padding: 0;
}

.app-density-compact .app-page-inlineeditor-overlay.app-page-inlineeditor-gridstyle .app-control-inner, .app-density-compact .app-page-inlineeditor-overlay.app-page-inlineeditor-gridstyle .app-data-input {
    padding: 7px 1px !important;
}

.app-density-condensed .app-page-inlineeditor-overlay.app-page-inlineeditor-gridstyle .app-data-input-placeholder {
    top: 5px;
}

.app-density-condensed .app-page-inlineeditor-overlay.app-page-inlineeditor-gridstyle .app-control-inner, .app-density-condensed .app-page-inlineeditor-overlay.app-page-inlineeditor-gridstyle .app-data-input {
    padding: 5px 1px !important;
}

.app-page-inlineeditor-overlay .app-caret-r .app-caret::before {
    left: 0;
}

.app-page-inlineeditor-overlay .app-vscrollbar {
    visibility: hidden;
}

.app-form-inlineeditor [data-container="simple"] > .app-btn-more {
    cursor: pointer;
    height: 24px;
    right: 6px;
    left: auto;
}

[data-control="dataview"][data-field].app-focus::before {
    content: ' ';
    position: absolute;
    left: -8px;
    top: 0;
    bottom: -1px;
    right: -8px;
    outline: 1px dotted #7f7f7f;
    /*left: -8px;
    top: 0;
    bottom: 0;
    width: 2px;
    opacity: .5;*/
    /*left: -8px;
    top: 0;
    bottom: -1px;
    width: 0;
    border-left: 1px dotted #555;
    opacity: .75;*/
}

.app-row-status {
    z-index: 2;
    height: 24px !important;
    width: 24px;
    padding: 0 !important;
    margin: 0;
    color: #777;
    position: relative;
    text-overflow: clip !important;
}

    .app-row-status, .app-row-status:hover {
        background-color: transparent !important;
    }

        .app-row-status::after {
            height: 24px;
            width: 24px;
        }

.app-listview.app-onecolumnview .app-row-status, .app-listview.app-cardcolumn .app-row-status, .app-listview.app-cardview .app-row-status {
    position: absolute;
    top: 50%;
    margin-top: -12px;
    left: 12px;
}

.app-listview.app-onecolumnview.app-listview-multiselect .app-row-status, .app-listview.app-cardcolumn.app-listview-multiselect .app-row-status, .app-listview.app-cardview.app-listview-multiselect .app-row-status {
    left: 40px;
}

.app-calculated .app-row-status {
    height: 1px !important;
}

.app-grid-header .app-row-status::after {
    content: 'label_outline';
    color: #aeaeae !important;
}

.app-row-status-new::after {
    /*content: '\002731';
        font-family:Arial!important;*/
    content: 'add';
}

.app-row-status-modified::after {
    content: 'label-outline';
}

.app-row-status-edit::after {
    content: 'edit';
}

.app-row-status-pending::after {
    content: 'label';
    visibility: visible;
}

.app-row-status-deleted::after {
    content: 'delete';
}

.app-row-status-error::after {
    content: 'info';
}

.app-field-is-selected2::after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 4px;
}

.app-cardview .app-field-data {
    min-width: 50px;
    display: inline-block;
}

.app-btn-menu-background::before {
    content: ' ';
    width: 1px;
    height: 1px;
    position: absolute;
    z-index: 1;
    bottom: -1px;
    right: -1px;
}

.dv-item-new .app-btn-check {
    visibility: hidden;
}

.app-grid-header-bold [data-field-name], .app-grid-header-bold [data-field-name] b {
    font-weight: 600;
}

.app-echo .app-hscrollbar2 {
    margin-top: -4px;
    /*z-index: 3;*/
}

.app-density-condensed .app-echo .app-hscrollbar2 {
    margin-top: -3px;
}

.app-bar-footer {
    bottom: 0px;
}

    .app-bar-footer .app-hscrollbar2 {
        margin-top: 0;
    }
    /*.app-bar-footer .app-bar-hscrollbar {
    }*/
    /*.app-bar-footer .app-hscrollbar2 .app-hscrollbar-handle {
    }*/
    .app-bar-footer.app-bar-footer-flat {
        box-shadow: none;
    }

        .app-bar-footer.app-bar-footer-flat .app-bar-hscrollbar {
            margin-right: 6px;
            margin-top: -1px;
        }

.app-desktop.app-scrollbars-wide .app-bar-footer.app-bar-footer-flat .app-bar-hscrollbar {
    margin-right: 9px;
}

.app-desktop .app-bar-footer.app-bar-footer-flat .app-bar-hscrollbar::after {
    content: ' ';
    right: 0;
    background-color: #e9e9e9;
    height: 6px;
    top: -1px;
    width: 6px;
    position: absolute;
}

.app-desktop.app-scrollbars-wide .app-bar-footer.app-bar-footer-flat .app-bar-hscrollbar::after {
    width: 9px;
    height: 9px;
}

.app-list-instruction + .dv-item-new {
    margin-top: -1px;
}

.app-page-inlineeditor .app-has-helper {
    margin-top: .25em;
}

.app-has-footer .app-icon-checkbox {
    margin-top: 0px !important;
    top: -1px !important;
}

[data-layout="form"] [data-container].app-has-clear-all [data-container="row"] {
    position: relative;
    padding-right: 50px;
}

    [data-layout="form"] [data-container].app-has-clear-all [data-container="row"][data-columns] {
        position: relative;
        padding-right: 28px;
    }

[data-layout="form"] [data-container].app-has-clear-all .app-form-clear-all {
    width: 28px;
    right: 6px;
    display: inline-block;
    position: absolute;
    cursor: pointer;
    top: 4px;
}

[data-layout="form"] [data-container][data-wrap="true"].app-has-clear-all .app-form-clear-all {
    top: 1em;
}

.app-has-clear-all:not(.app-form-clear-all-visible) .app-form-clear-all {
    visibility: hidden;
}

.app-map-placeholder {
    max-width: 800px;
    background-repeat: no-repeat;
    background-position: left center;
}

.app-has-map .app-map-placeholder {
    height: 200px;
    background-color: #f1f1f1;
    cursor: pointer;
}

    .app-has-map .app-map-placeholder .app-data-input-placeholder {
        display: none;
    }

.app-ensure-font .material-icon, .app-ensure-font .ui-btn::before, .app-ensure-font .ui-btn::after, .app-ensure-font .app-btn-more::after, .app-ensure-font .app-btn::after {
    color: transparent !important;
}
/*.app-compact-forms [data-container="row"] {
    padding-right: 24px;
}

    .app-compact-forms [data-container="row"] [data-control="label"] {
        text-align: left;
    }

    .app-compact-forms [data-container="row"] [data-control="field"] {
        text-align: right;
    }

.app-compact-forms .app-data-input {
    text-align: right;
}*/
.app-calendar-plugin-container.app-visible {
    display: block !important;
}

.app-calendar-plugin-container.app-hidden {
    visibility: hidden;
}

.app-ui-automation.ui-page, .app-ui-automation .app-data-input-popup {
    visibility: hidden !important;
}

    .app-ui-automation.ui-page.app-ui-automation-debugging {
        visibility: visible !important;
    }

.app-ui-automation-root.ui-page {
    display: block !important;
}

/************************************************************
    Kiosk UI 2020
************************************************************/
.app-kiosk {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.6);
    background-color: #fff;
    z-index: 1001;
    outline: none;
    overflow: hidden;
}
/*.app-kiosk-has-tabs .app-kiosk {
    height: auto;
    bottom: 54px;
}

.app-kiosk.app-has-tabs .app-copyright {
    display: none;
}*/
.app-is-kiosk .app-bar-notify {
    font-size: 18px;
}

.app-is-kiosk:not(.app-has-modal-page-above-kiosk) .app-tooltip-message {
    z-index: 1001 !important;
}

.app-kiosk .app-avatar {
    width: 32px;
    height: 32px;
    right: 43px;
    top: 12px;
    left: auto;
    position: absolute;
    cursor: pointer;
    text-align: center;
}

.app-kiosk .app-logo .app-page-title {
    padding-left: 8px;
    position: relative;
    font-weight: normal;
    opacity: .75;
}

/*    .app-kiosk .app-logo .app-page-title i {
        left: 0;
        margin-left: 0;
    }
*/
.app-kiosk .app-btn-menu {
    left: 13px;
}

.app-kiosk .app-btn-context {
    left: auto;
    right: 8px;
}


.app-kiosk .app-btn-scan {
    left: auto;
    right: 86px;
}

.app-kiosk .app-acc-footer {
    padding-left: 20px;
    background: none;
}

.app-kiosk .app-login {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -48px 0 0 -48px;
    display: inline-block;
    z-index: 1;
    cursor: pointer;
    width: 96px;
    height: 96px;
    border: 0;
    cursor: pointer;
    padding: 0;
}

    .app-kiosk .app-login.ui-btn::after {
        content: 'lock';
        display: inline-block;
        font-size: 96px;
        width: 96px;
        height: 96px;
        top: 0 !important;
        margin-top: 0 !important;
        line-height: 96px;
        /*color:#38c;*/
    }

.app-desktop .app-kiosk .app-login.ui-btn:hover {
    background-color: transparent !important;
}
/*.app-kiosk .app-login i.app-icon:hover {
        color: #333;
    }*/
.app-kiosk .app-display {
    top: 56px;
    left: 0;
    width: 100%;
    bottom: 0;
    position: absolute;
    overflow: hidden;
    padding-right: 8px;
}

.app-kiosk .app-display-content {
    overflow-y: scroll;
    overflow-x: scroll;
    width: 100%;
    height: 100%;
    padding-right: 8px; /* provides a gap for "overlay" scrollbar */
    outline: none;
}

.app-kiosk.app-has-copyright .app-display {
    bottom: 46px;
}

.app-kiosk .app-display .app-content.app-text {
    text-align: center;
    top: 50%;
    position: relative;
    margin-top: -.5em;
    padding: 0 2em;
}

.app-kiosk.app-density-compact .app-is-kiosk .app-bar-notify {
    font-size: 16px;
}

.app-kiosk.app-fullscreen .app-display {
    top: 0;
    bottom: 0;
}

.app-kiosk.app-fullscreen .app-logo, .app-kiosk.app-fullscreen .app-avatar, .app-kiosk.app-fullscreen .app-copyright, .app-kiosk.app-fullscreen > .ui-btn {
    visibility: hidden;
}

.app-kiosk > .app-btn {
    text-indent: 0;
    left: auto;
}

    .app-kiosk > .app-btn i {
        margin-left: -12px;
    }

.app-kiosk .app-logo {
    max-width: none;
}


.app-is-kiosk .app-btn-promo,
.app-is-kiosk .app-focus-frame,
.app-is-kiosk .app-bar-toolbar,
.app-is-kiosk .ui-page:not(.app-page-modal-above-kiosk),
.app-is-kiosk .app-page-modal-glass-pane:not(.app-page-modal-above-kiosk),
.app-is-kiosk .app-page-modal-background {
    visibility: hidden !important;
}

/************************************************************
    Display Flow 2021
************************************************************/

.app-display-flow .app-container {
    position: relative;
    font-size: 0;
    overflow: hidden;
}

.app-display-flow [data-type="field"] {
    padding: 8px;
    font-size: 16px;
    position: relative;
}

    .app-display-flow [data-type="field"].app-align-right {
        text-align: right;
    }

    .app-display-flow [data-type="field"].app-align-center {
        text-align: center;
    }

    .app-display-flow [data-type="field"].app-large {
        line-height: 2em;
    }

    .app-display-flow [data-type="field"].app-medium {
        line-height: 1.5em;
    }

    .app-display-flow [data-type="field"].app-density-compact {
        padding: 4px 8px;
    }

    .app-display-flow [data-type="field"].app-density-condensed {
        padding: 0 8px;
    }

    .app-display-flow [data-type="field"] .app-label {
        display: inline-block;
        text-transform: uppercase;
    }

        .app-display-flow [data-type="field"] .app-label.app-large {
            font-size: 2em;
        }

        .app-display-flow [data-type="field"] .app-label.app-medium {
            font-size: 1.5em;
        }
    /* this rule is defined in the theme */
    /*.app-kiosk .app-display [data-type="field"] .app-label.app-accent {
            color: #38c;
        }*/
    .app-display-flow [data-type="field"] .app-value {
        display: inline-block;
        position: absolute;
        right: 8px;
        left: auto;
    }

        .app-display-flow [data-type="field"] .app-value.app-large {
            font-size: 2em;
        }

        .app-display-flow [data-type="field"] .app-value.app-medium {
            font-size: 1.5em;
        }

        .app-display-flow [data-type="field"] .app-value.app-nowrap {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right: 0;
            width: 100%;
        }
    /* this rule is defined in the theme */
    /*.app-kiosk .app-display [data-type="field"] .app-value.app-accent {
            color: #38c;
        }*/
    .app-display-flow [data-type="field"].app-null .app-value, .app-kiosk .app-btn.app-disabled .app-icon {
        color: #777;
    }

    .app-display-flow [data-type="field"].app-label-hidden .app-label {
        display: none;
    }

    .app-display-flow [data-type="field"].app-label-hidden .app-value {
        position: static;
    }

.app-display-flow .app-row {
    padding: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
}

.app-display-flow .app-row-container {
    box-sizing: border-box;
}

.app-display-flow .app-column {
    padding: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.app-display-flow .app-row-header {
    display: flex;
    flex-direction: row;
    border: solid 1px;
    /*color: #777;*/
    overflow: hidden;
    /*margin: 0 8px;*/
}

    .app-display-flow .app-row-header .app-column-header {
        position: relative;
    }

        .app-display-flow .app-row-header .app-column-header .app-text {
            margin-left: -1px;
            display: inline-block;
            padding: 8px 12px;
            /*font-size: 16px;*/
            text-transform: uppercase;
        }

        .app-display-flow .app-row-header .app-column-header::after {
            content: ' ';
            width: 1px;
            left: auto;
            right: 0;
            top: 0;
            height: 100%;
            position: absolute;
            border-right: solid 1px;
        }

        .app-display-flow .app-row-header .app-column-header:last-of-type::after {
            border-right-width: 0;
        }

.app-display-flow .app-item {
    display: flex;
    flex-wrap: wrap;
    border-bottom: solid 1px /* #111*/;
    position: relative;
    cursor: pointer;
    /*margin: 0 4px;*/
}

    .app-display-flow .app-item::before {
        content: ' ';
        left: 0;
        top: 0;
        right: 1px;
        height: 100%;
        position: absolute;
        z-index: -1;
        /*** remove to enable item borders ***/
        /*border-left: solid 1px;
        border-right: solid 1px;*/
    }
    /*.app-kiosk .app-display .app-item.app-selected:before,
    .app-kiosk .app-display .app-item.ui-btn-active:before,
    .app-desktop .app-kiosk .app-display .app-item:hover:before {
        background-color: rgba(255,255,255,.05);
    }*/
    /*.app-kiosk .app-display .app-item.app-selected:before {
        background-color: rgba(255,255,255,.1);
    }*/
    .app-display-flow .app-item.app-selected:after {
        content: ' ';
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        position: absolute;
        /*background-color: #38c;*/
    }

    .app-display-flow .app-item [data-type] {
        display: inline-block;
        padding: 0;
    }

    .app-display-flow .app-item [data-type="field"] .app-label, .app-display-flow .app-item [data-type="field"] .app-value {
        display: block;
        padding: 8px 12px;
        position: static;
    }
        /*.app-kiosk .app-display .app-item [data-type="field"] .app-label {
        color: #777;
        }*/
        .app-display-flow .app-item [data-type="field"] .app-label + .app-value {
            margin-top: -12px;
        }

    .app-display-flow .app-item [data-type="field"].app-density-condensed .app-label, .app-display-flow .app-item [data-type="field"].app-density-condensed .app-value {
        padding: 0 12px;
    }

        .app-display-flow .app-item [data-type="field"].app-density-condensed .app-label + .app-value {
            margin-top: 0;
        }

    .app-display-flow .app-item [data-type="field"].app-density-compact .app-label, .app-display-flow .app-item [data-type="field"].app-density-compact .app-value {
        padding: 4px 12px;
    }

        .app-display-flow .app-item [data-type="field"].app-density-compact .app-label + .app-value {
            margin-top: -9px;
        }

    .app-display-flow .app-item [data-type="field"].app-density-condensed:last-of-type, .app-display-flow .app-item [data-type="field"].app-density-compact:last-of-type {
        padding-bottom: 8px;
    }

    .app-display-flow .app-item [data-type="field"].app-density-condensed:first-of-type, .app-display-flow .app-item [data-type="field"].app-density-compact:first-of-type {
        padding-top: 8px;
    }

.app-kiosk .app-item.app-collapsed .app-row.app-collapsed {
    display: none;
}

.app-display-flow [data-type="field"].app-null.app-label-hidden {
    display: none;
}

.app-display-flow [data-type="button"] {
    padding: 0;
    display: inline-block;
}

    .app-display-flow [data-type="button"] .app-button {
        position: relative;
        display: inline-block;
        cursor: pointer;
        width: 150px;
        height: 150px;
        margin: 0 0 8px 8px;
        font-size: 14px;
        user-select: none;
    }

        .app-display-flow [data-type="button"] .app-button:before {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            content: ' ';
            z-index: -1;
            background-color: #000;
        }

        .app-desktop .app-display-flow [data-type="button"] .app-button:hover:after, .app-display-flow [data-type="button"] .app-button.ui-btn-active:after {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            content: ' ';
            background-color: rgba(0,0,0,.2);
        }

        .app-display-flow [data-type="button"] .app-button .app-text {
            display: inline-block;
            position: absolute;
            left: .5em;
            bottom: .5em;
            right: .5em;
            z-index: 1;
        }

        .app-display-flow [data-type="button"] .app-button .app-icon {
            z-index: 1;
            font-size: 36px;
            line-height: 36px;
            margin-top: -18px !important;
            margin-left: -18px !important;
            left: 50% !important;
            top: 50% !important;
        }
        /*.app-display-flow [data-type="button"] .app-button.ui-btn-active {
            color: #111
        }*/
        .app-display-flow [data-type="button"] .app-button.app-wide {
            width: 308px;
        }

        .app-display-flow [data-type="button"] .app-button.app-no-text {
            width: 71px;
        }

            .app-display-flow [data-type="button"] .app-button.app-no-text.app-wide {
                width: 150px;
            }

            .app-display-flow [data-type="button"] .app-button.app-no-text .app-text {
                display: none;
            }

        .app-display-flow [data-type="button"] .app-button.app-no-text, .app-display-flow [data-type="button"] .app-button.app-no-icon {
            height: 71px;
        }

            .app-display-flow [data-type="button"] .app-button.app-no-icon .app-icon:not(.app-checked) {
                display: none;
            }

.app-display-flow .app-field-type-numeric {
    text-align: right;
}

.app-display-flow .app-container-content {
    overflow-x: hidden;
    overflow-y: scroll;
    outline: none;
    position: relative;
}

.app-display-flow .app-container > .app-header {
    padding: 0 0 8px 0;
}

    .app-display-flow .app-container > .app-header .app-text {
        font-size: 1.5em;
        display: inline-block;
        /*position: relative;*/
        padding: 0 8px;
        user-select: none;
    }

        .app-display-flow .app-container > .app-header .app-text + .app-text {
            margin-left: 8px;
        }
    /*.app-container > .app-header .app-text:not(.app-selected) {
            color: #777;
        }*/
    .app-display-flow .app-container > .app-header.app-tabset .app-text {
        cursor: pointer;
    }

.app-display-flow .app-container .app-row-header + .app-container-content {
    margin-bottom: 8px;
}
/*.app-kiosk .app-container .app-row-header + .app-container-content .app-item:last-of-type {
        border-bottom-width: 0;
    }*/
.app-display-flow .app-hidden {
    display: none !important;
}

.app-display-flow .app-gap .app-html {
    padding: 8px 8px;
}

    .app-display-flow .app-gap .app-html.app-density-compact {
        padding: 4px 8px;
    }

    .app-display-flow .app-gap .app-html.app-density-condensed {
        padding: 0 8px;
    }

.app-display-flow .app-row-pager {
    height: 40px;
    position: relative;
}

    .app-display-flow .app-row-pager .app-info {
        right: 110px;
        position: absolute;
        display: inline-block;
        line-height: 40px;
    }

    .app-display-flow .app-row-pager .app-btn {
        display: inline-block;
        width: 40px;
        height: 40px;
        position: relative;
        cursor: pointer;
        user-select: none;
        position: absolute;
        right: 0;
    }

        .app-display-flow .app-row-pager .app-btn.app-prev {
            right: 48px;
        }

        .app-display-flow .app-row-pager .app-btn .app-icon {
            left: 50%;
            margin-left: -12px;
        }

.app-density-condensed .app-display-flow .app-container > .app-header, .app-density-condensed .app-display-flow [data-type="field"], .app-density-condensed .app-display-flow .app-button, .app-density-condensed .app-display-flow .app-row-header .app-column-header .app-text, .app-density-condensed .app-display-flow .app-gap .app-html, .app-density-condensed .app-display-flow .app-row-pager {
    font-size: 12px;
}

.app-density-compact .app-display-flow .app-container > .app-header, .app-density-compact .app-display-flow [data-type="field"], .app-density-compact .app-display-flow .app-button, .app-density-compact .app-display-flow .app-row-header .app-column-header .app-text, .app-density-compact .app-display-flow .app-gap .app-html, .app-density-compact .app-display-flow .app-row-pager {
    font-size: 14px;
}

.app-density-comfortable .app-display-flow .app-button {
    font-size: 14px;
}

.app-density-comfortable .app-display-flow .app-container > .app-header, .app-density-comfortable .app-display-flow [data-type="field"], .app-density-comfortable .app-display-flow .app-row-header .app-column-header .app-text, .app-density-comfortable .app-display-flow .app-gap .app-html, .app-density-comfortable .app-display-flow .app-row-pager {
    font-size: 16px;
}

.app-display-flow .app-numpad {
    font-size: 20px;
    padding: 4px;
}

    .app-display-flow .app-numpad .app-btn {
        font-size: 30px;
        height: 60px;
        /*margin: 4px;*/
        line-height: 60px;
        text-align: center;
        user-select: none;
        cursor: pointer;
        overflow: hidden;
        position: relative;
    }

        .app-display-flow .app-numpad .app-btn:before, .app-desktop .app-display-flow .app-numpad .app-btn:hover:after, .app-display-flow .app-numpad .app-btn.app-dark:after {
            content: ' ';
            position: absolute;
            left: 2px;
            top: 2px;
            right: 2px;
            z-index: -2;
            bottom: 2px;
        }

        .app-display-flow .app-numpad .app-btn.ui-btn-active:after, .app-desktop .app-display-flow .app-numpad .app-btn:hover:after {
            z-index: -1;
        }

        .app-display-flow .app-numpad .app-btn i {
            margin-left: -12px;
        }

        .app-display-flow .app-numpad .app-btn.app-tall {
            height: 120px;
            line-height: 124px;
            z-index: 1;
        }

    .app-display-flow .app-numpad .app-row.app-tall + .app-row {
        margin-top: -60px;
    }

    .app-display-flow .app-numpad .app-label {
        font-size: 14px;
    }

    .app-display-flow .app-numpad .app-text {
        height: 46px;
        border-bottom: solid 1px;
        line-height: 46px;
        margin-bottom: 4px;
        font-size: 30px;
        text-align: right;
        position: relative;
        white-space: nowrap;
    }

        .app-display-flow .app-numpad .app-text .app-value {
            right: 30px;
            position: absolute;
        }

        .app-display-flow .app-numpad .app-text i {
            right: 3px;
            cursor: pointer;
            user-select: none;
        }

        .app-display-flow .app-numpad .app-text.app-null i {
            display: none;
        }

.app-display-flow .app-row-header .app-column-header[data-name=">"]:after {
    border-color: transparent;
}

.app-display-flow .app-item [data-type="field"][data-name=">"] .app-value {
    position: relative;
    left: 0;
    right: 0;
    user-select: none;
}

.app-display-flow [data-name=">"] i {
    margin-left: -12px;
    left: 50%;
}

.app-display-flow [data-type="button"] .app-button .app-icon.app-checked {
    right: 2px;
    left: auto !important;
    top: 2px !important;
    margin: 0 !important;
    font-size: 24px;
    height: 24px;
    width: 24px;
    line-height: 24px;
    z-index: 1;
}

.app-display-flow .app-item .app-cell.app-nowrap .app-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*.app-kiosk .app-container-autosize .app-row-header + .app-container-content {
    border-bottom: solid 1px #ddd;

}*/
/*.app-numpad [data-key="Enter"]:before {
    background-color: forestgreen !important;
}*/
.app-display-flow .app-has-letters .app-row-header {
    margin-right: 30px;
}

.app-display-flow .app-has-letters .app-container-content {
    padding-right: 30px;
}

.app-display-flow .app-letters {
    width: 30px;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background-color: #111;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 12px;
    user-select: none;
}

    .app-display-flow .app-letters span {
        padding: 4px 0;
        cursor: pointer;
    }

.app-display-flow.app-page-content .app-container {
    padding: .75rem 15px 0 15px;
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
}

    .app-display-flow.app-page-content .app-container.app-gap {
        padding: 0;
    }

.app-display-flow.app-page-content p {
    margin: 0 0 1rem 0;
}

.app-display-flow h1 {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 .5rem 0;
}

    .app-display-flow h1 .material-icon, .app-display-flow h2 .material-icon, .app-display-flow h3 .material-icon, .app-display-flow h4 .material-icon, .app-display-flow h5 .material-icon, .app-display-flow h6 .material-icon {
        width: 1em;
        height: 1.4em;
        line-height: 1.4em;
        font-size: 1.4em;
        position: relative;
        margin-right: .0625em;
        top: .175em;
    }

.app-display-flow h2 {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.2;
    font-weight: 400;
    margin: 0 0 .5rem 0;
}

.app-display-flow h3 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    font-weight: 400;
    margin: 0 0 .5rem 0;
}

.app-display-flow h4 {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.2;
    font-weight: 400;
    margin: 0 0 .5rem 0;
}

.app-display-flow h5 {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.2;
    font-weight: 400;
    margin: 0 0 .5rem 0;
}

.app-display-flow h6 {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 .5rem 0;
}

.app-display-flow .app-jumbo h1, .app-display-flow .app-jumbo h2, .app-display-flow .app-jumbo h3, .app-display-flow .app-jumbo h4, .app-display-flow .app-jumbo h5, .app-display-flow .app-jumbo h6 {
    font-weight: 300;
}

.app-display-flow .app-jumbo {
    padding: 3rem 0;
    margin: 0 0 2rem 0;
}

    .app-display-flow .app-jumbo.app-row {
        margin: 0 0 2rem 0;
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: .3125rem;
    }

.app-display-flow.app-page-content .app-jumbo.app-row:first-child {
    margin-top: 2rem;
}

.app-min-lg .app-display-flow h1 {
    font-size: 2.25rem;
}

.app-min-lg .app-display-flow h2 {
    font-size: 2rem;
}

.app-min-lg .app-display-flow h3 {
    font-size: 1.75rem;
}

.app-min-lg .app-display-flow h4 {
    font-size: 1.5rem;
}

.app-min-lg .app-display-flow h5 {
    font-size: 1.3rem;
}

.app-min-lg .app-display-flow h6 {
    font-size: 1.2rem;
}

.app-display-flow .app-jumbo h1 {
    font-size: 2.5rem;
}

.app-display-flow .app-jumbo h2 {
    font-size: 2.25rem;
}

.app-display-flow .app-jumbo h3 {
    font-size: 2rem;
}

.app-display-flow .app-jumbo h4 {
    font-size: 1.75rem;
}

.app-display-flow .app-jumbo h5 {
    font-size: 1.5rem;
}

.app-display-flow .app-jumbo h6 {
    font-size: 1.25rem;
}

.app-min-lg .app-display-flow .app-jumbo h1 {
    font-size: 3.5rem;
}

.app-min-lg .app-display-flow .app-jumbo h2 {
    font-size: 3rem;
}

.app-min-lg .app-display-flow .app-jumbo h3 {
    font-size: 2.5rem;
}

.app-min-lg .app-display-flow .app-jumbo h4 {
    font-size: 2.25rem;
}

.app-min-lg .app-display-flow .app-jumbo h4 {
    font-size: 2rem;
}

.app-min-lg .app-display-flow .app-jumbo h4 {
    font-size: 1.75rem;
}

.app-display-flow.app-page-content .material-icon {
    display: inline-block;
    user-select: none;
}

.app-display-flow .app-hero {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow: hidden;
    margin: 0 0 2rem 0;
    position: relative;
}

    .app-display-flow .app-hero .app-hero-content {
        margin: 2rem auto;
    }

    .app-display-flow .app-hero .app-row:first-child {
        margin-top: 0 !important;
    }

    .app-display-flow .app-hero .app-row:last-child {
        margin-bottom: 0 !important;
    }

    .app-display-flow .app-hero .app-hero-content .app-jumbo {
        margin-bottom: 0;
    }

    .app-display-flow .app-hero .app-hero-content .app-container {
        font-size: 1.25rem;
    }

.app-hero > i {
    opacity: .05;
    position: absolute;
    top: 50%;
}

.app-hero.app-background-accent > i {
    opacity: .1;
    color: #000;
}

.app-sticky-hero-container .app-hero > i {
    top: auto;
}

.app-display-flow .app-hero-sticky {
    top: 0;
    position: sticky;
}

.app-hero-sticky-container {
}

.app-display-flow .app-align-center {
    align-items: center;
}

.app-display-flow .app-align-top {
    align-items: flex-start;
}

.app-display-flow .app-align-bottom {
    align-items: flex-end;
}

.app-display-flow address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
}

.app-display-flow ol, .app-display-flow ul, .app-display-flow dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

    .app-display-flow ol ol, .app-display-flow ul ul, .app-display-flow ol ul, .app-display-flow ul ol {
        margin-bottom: 0;
    }

.app-display-flow hr {
    margin: 1.5rem 0 0 0;
    padding: 0 0 1.5rem 0;
    height: 0;
    border: 0;
    border-top: solid 1px;
}

.app-display-flow.app-page-content .app-container.app-render-as-code {
    padding: 0 15px;
    margin-bottom: 2rem;
}

.app-display-flow .app-render-as-code > pre, .app-display-flow .app-render-as-code > div {
    border: solid 1px #ddd;
}

    .app-display-flow .app-render-as-code > div .CodeMirror {
        height: 100%;
    }
/*.app-display-flow .app-render-as-code .CodeMirror .CodeMirror-vscrollbar,
.app-display-flow .app-render-as-code .CodeMirror .CodeMirror-hscrollbar {
    visibility: hidden;
}

*/
.app-display-flow.app-page-content .app-container.app-render-as-code > pre {
    margin: 0;
    font-size: 0;
    overflow: hidden;
}

.app-display-flow.app-page-content .app-container.app-render-as-code > .app-caption {
    border-width: 0;
    padding: 0 0 .25rem .5rem;
}

    .app-display-flow.app-page-content .app-container.app-render-as-code > .app-caption .app-type {
        font-style: italic;
    }

    .app-display-flow.app-page-content .app-container.app-render-as-code > .app-caption .app-text {
        margin-left: .5rem;
    }

.app-display-flow.app-page-content .app-container.app-render-as-code code {
    line-height: 1.5;
    margin: 0;
    display: flex;
    padding: 4px 0;
    position: relative;
}

.app-display-flow.app-page-content .app-container.app-render-as-code .app-gutter {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    padding: 4px 3px 4px 5px;
    bottom: 0;
    background-color: #f7f7f7;
    border-right: solid 1px #ddd;
    display: flex;
    flex-direction: column;
    text-align: right;
    color: #999;
    min-width: 20px;
    white-space: nowrap;
}

.app-display-flow .app-render-as-code code, .app-display-flow .app-render-as-code .CodeMirror-line, .app-display-flow .app-render-as-code .CodeMirror-linenumber {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: .875rem;
    /*font-size: .75rem;*/
}

.app-display-flow .app-render-as-code .CodeMirror-linenumber {
    user-select: none;
}

.app-display-flow .app-render-as-code div.CodeMirror span.CodeMirror-matchingbracket {
    color: #111 !important;
    background-color: #e2e6d6 !important;
}

.app-display-flow .app-render-as-code span.CodeMirror-matchingbracket {
}

.app-display-flow .app-render-as-code .cm-s-default .cm-keyword {
    color: #0101fd !important;
}

.app-display-flow .app-render-as-code .cm-s-default .cm-def {
    color: #007d9a;
}

.app-display-flow .app-render-as-code .cm-s-default .cm-string {
    color: #a31515;
}

.app-display-flow .app-render-as-code .cm-s-default .cm-comment {
    color: #008000;
}

.app-display-flow .app-render-as-code .cm-s-default .cm-tag {
    color: #0101fd;
}

.app-display-flow .app-render-as-code .cm-s-default .cm-qualifier {
    color: #007d9a;
}

.app-display-flow .app-render-as-code .cm-s-default .cm-attribute {
    color: #0451a5;
}

.app-display-flow .app-spacing-none {
    margin-bottom: 0 !important;
}

.app-display-flow .ql-container p {
    margin-bottom: 0;
    line-height: 1.5;
}
/*.cm-s-default .cm-keyword {
    color: #708;
}

.cm-s-default .cm-atom {
    color: #219;
}

.cm-s-default .cm-number {
    color: #164;
}

.cm-s-default .cm-def {
    color: #00f;
}

.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {
}

.cm-s-default .cm-variable-2 {
    color: #05a;
}

.cm-s-default .cm-variable-3, .cm-s-default .cm-type {
    color: #085;
}

.cm-s-default .cm-string {
    color: #a11;
}

.cm-s-default .cm-string-2 {
    color: #f50;
}

.cm-s-default .cm-meta {
    color: #555;
}

.cm-s-default .cm-qualifier {
    color: #555;
}

.cm-s-default .cm-builtin {
    color: #30a;
}

.cm-s-default .cm-bracket {
    color: #997;
}

.cm-s-default .cm-tag {
    color: #170;
}

.cm-s-default .cm-attribute {
    color: #00c;
}

.cm-s-default .cm-hr {
    color: #999;
}

.cm-s-default .cm-link {
    color: #00c;
}
*/
/**************************************************************
    Reading Pane
***************************************************************/
.app-reading-pane-splitter {
    position: absolute;
    left: 0;
    top: 0;
    width: 9px;
    bottom: 0;
    cursor: ew-resize;
    z-index: 1;
}

    .app-reading-pane-splitter::after {
        content: ' ';
        position: absolute;
        width: 1px;
        left: 0;
        top: 57px;
        bottom: 0;
        /*background-color: #ddd;*/
    }

    .app-reading-pane-splitter:hover, .app-reading-pane-splitter.app-dragging {
        /*background-color: rgba(0,0,0,.5);*/
        transition: background-color 350ms ease-in;
        z-index: 10000;
    }

        .app-reading-pane-splitter:hover::after {
            top: 0;
        }

        .app-reading-pane-splitter.app-dragging::after {
            opacity: 0;
        }

    .app-reading-pane-splitter.app-bottom {
        bottom: auto;
        height: 9px;
        width: 100%;
        cursor: ns-resize;
        /*border-left: none;
        border-top: solid 1px #ddd;*/
    }

        .app-reading-pane-splitter.app-bottom::after {
            top: 0;
            height: 1px;
            width: 100%;
        }

.app-page-modal.app-reading-pane-detail {
    box-shadow: none;
    display: block;
    z-index: 0;
}

    .app-page-modal.app-reading-pane-detail.app-hidden {
        display: none;
    }

.app-reading-pane-detail.app-page-modal .ui-header.ui-header-fixed.app-bar-header {
    top: 0;
    border-bottom-color: transparent;
    border-bottom-width: 1px;
    height: 56px;
    line-height: 56px;
    font-size: 0;
}

.app-reading-pane-detail .app-bar-buttons-md {
    text-align: right;
}

.app-reading-pane-bkg {
    position: absolute;
    background-size: auto 100%;
}
/* debugging */
/*.app-reading-pane-detail.app-page-modal .ui-header.ui-header-fixed.app-bar-header .app-bar-buttons .ui-btn {
    background-color: yellow !important;
    color: #333 !important;
}

.app-reading-pane-detail .app-page-header {
    background-color: green !important;
}
*/
#Main .app-wrapper .app-echo:last-child {
    margin-bottom: 16px !important;
}
/***** modern scrollbar style *****/
.app-desktop .app-vscrollbar {
    background-color: transparent;
    border-color: transparent;
}

    .app-desktop .app-vscrollbar .app-vscrollbar-handle {
        width: inherit;
        right: 0 !important;
        left: auto;
    }

.app-vscrollbar.app-scrollbar-hover, .app-vscrollbar.app-scrollbar-hover .app-vscrollbar-handle {
    width: 12px !important;
    transition: width ease-in 200ms;
}

.app-vscrollbar.app-scrollbar-contracting, .app-vscrollbar.app-scrollbar-contracting .app-vscrollbar-handle {
    width: 6px !important;
    transition: width ease-in 96ms;
}

body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-reading-pane-splitter::after {
    background-color: transparent;
}
/* virtual keyboard */
/*.ui-page.app-modal-keyboard {
    top: auto;
}*/
.app-modal-keyboard .app-wrapper {
    overflow: hidden !important;
}

.app-keyboard {
    font-size: 0;
    padding: 8px;
}

    .app-keyboard .app-row {
        flex-direction: row;
        display: flex;
        font-size: 0;
    }

        .app-keyboard .app-row.app-row-controls {
            display: none;
        }

        .app-keyboard .app-row .app-key {
            line-height: 54px;
            height: 54px;
            cursor: default;
            display: inline-block;
            text-align: center;
            position: relative;
            /*vertical-align: middle;*/
            touch-action: none;
            user-select: none;
            font-size: 0;
            flex-direction: row;
        }

            .app-keyboard .app-row .app-key .material-icon {
                position: absolute;
                top: 50%;
                margin-top: -12px;
                left: 50%;
                margin-left: -12px;
            }

            .app-desktop .app-keyboard .app-row .app-key:hover::before, .app-keyboard .app-row .app-key.app-dragging::before {
                content: ' ';
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: 0;
                overflow: hidden;
            }

            .app-keyboard .app-row .app-key .app-text {
                font-size: 28px;
                display: inline-block;
                vertical-align: middle;
                letter-spacing: 8px;
            }

                .app-keyboard .app-row .app-key .app-text.app-text-small {
                    font-size: 22px;
                }

            .app-keyboard .app-row .app-key.app-simple .app-text {
                letter-spacing: 0;
            }

            .app-keyboard .app-row .app-key .app-hint {
                font-size: 12px;
                letter-spacing: 0;
                text-transform: uppercase;
                color: #777;
                display: inline-block;
                vertical-align: middle;
                text-align: center;
            }

            .app-keyboard .app-row .app-key.app-has-hint {
                text-align: left;
                /*display: flex;*/
                /*overflow: hidden;*/
            }
/*   .app-keyboard .app-row .app-key.app-has-hint .app-text {
                }

                .app-keyboard .app-row .app-key.app-has-hint .app-hint {
                }*/
.app-control-inner .app-cursor {
    padding: 0;
    margin: 0 0 0 1px;
    border-left: solid 1px;
    color: transparent;
    animation: 1s blink-cursor step-end infinite;
    width: 0;
    /*display: inline-block;*/
}

.app-modal-keyboard.app-modal-keyboard-bottom {
    box-shadow: none;
}

    .app-modal-keyboard.app-modal-keyboard-bottom .app-keyboard {
        padding: 8px 0;
    }

.app-page-modal.app-modal-keyboard [data-layout], .app-page-modal.app-modal-keyboard .app-stub {
    background-color: transparent;
}

.app-modal-keyboard.app-modal-keyboard-bottom .app-keyboard .app-row.app-row-controls {
    display: flex;
}

    .app-modal-keyboard.app-modal-keyboard-bottom .app-keyboard .app-row.app-row-controls .app-key {
        height: 40px;
    }

.app-modal-keyboard:not(.app-modal-keyboard-bottom) {
    border: solid 1px;
}

.app-has-keyboard .ui-page.app-modal-keyboard {
    display: block !important;
}

.app-stub-keyboard {
    padding: 0;
    margin: 0;
    font-size: 0;
}

.app-page-modal-glass-pane .app-inner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    background-color: transparent;
    touch-action: pan-y;
    font-size: 0;
}

.app-input-focus-underline [data-control="field"].app-has-focus::before {
    content: ' ';
    position: absolute;
    bottom: -5px;
    left: 8px;
    right: 8px;
    height: 2px;
}

.app-input-focus-underline .app-form-lines-input [data-control="field"].app-has-focus::before {
    bottom: -2px;
}

.app-input-focus-underline.app-density-condensed [data-control="field"].app-has-focus::before {
    bottom: -4px;
    left: 5px;
    right: 5px;
}

.app-input-focus-underline.app-density-compact [data-control="field"].app-has-focus::before {
    left: 7px;
    right: 7px;
}

.app-input-focus-underline .app-form-lines-input [data-control="field"].app-has-focus::before {
    left: -1px !important;
    right: -1px !important;
}

.app-input-focus-outline [data-control="field"].app-has-focus {
    border: solid 2px;
    margin: -2px;
    /*border-radius: 4px;*/
}

.app-input-focus-underline [data-control="field"][data-input="checkboxlist"].app-has-focus::before, .app-input-focus-underline [data-control="field"][data-input="radiobuttonlist"].app-has-focus::before, .app-input-focus-underline [data-control="field"][data-input="listbox"].app-has-focus::before, .app-input-focus-underline [data-control="field"][data-input="checkbox"].app-has-focus::before, .app-input-focus-underline [data-control="field"][data-input="blob"].app-has-focus::before, .app-form-inlineeditor [data-control="field"].app-has-focus::before {
    visibility: hidden !important;
}

.app-input-focus-outline [data-control="field"][data-input="checkboxlist"].app-has-focus, .app-input-focus-outline [data-control="field"][data-input="radiobuttonlist"].app-has-focus, .app-input-focus-outline [data-control="field"][data-input="listbox"].app-has-focus, .app-input-focus-outline [data-control="field"][data-input="checkbox"].app-has-focus, .app-input-focus-outline [data-control="field"][data-input="blob"].app-has-focus, .app-form-inlineeditor [data-control="field"].app-has-focus {
    border-color: transparent !important;
}

.app-form-inlineeditor [data-container="simple"] {
    border-width: 0;
}

.app-wrapper .app-bar-buttons {
    padding: 8px;
}

.app-wrapper > .app-grid > .app-list-instruction + .dv-item {
    margin-top: -1px;
}

.app-form-lines-horiz-none [data-container="row"] + [data-container="row"] {
    border-top-width: 0 !important;
    margin-top: 2px;
}

.app-form-lines-horiz-none [data-wrap="true"] [data-container="row"] + [data-container="row"] {
    margin-top: 4px;
}

.app-form-lines-horiz-none [data-container="collapsible"] {
    border-bottom-width: 0;
}

.app-form-lines-input [data-input="text"], .app-form-lines-input [data-input="lookup"], .app-form-lines-input [data-input="autocomplete"], .app-form-lines-input [data-input="dropdownlist"] {
    border: solid 1px;
    margin: -1px;
}

.app-form-lines-input [data-input="checkboxlist"] .app-control-inner, .app-form-lines-input [data-input="radiobuttonlist"] .app-control-inner, .app-form-lines-input [data-input="listbox"] .app-control-inner {
    padding-left: 0;
    padding-right: 0;
}

[data-field="QuickFind"][data-input] {
    border-width: 0 !important;
    margin: 0 !important;
}

.app-form-lines-input [data-container="simple"] [data-container="row"]:last-of-type {
    margin-bottom: 8px;
}

.app-form-lines-input [data-container="simple"] [data-container="row"]:first-child {
    padding-top: 12px;
}

.app-form-lines-input [data-container="simple"] [data-container="row"].app-has-description {
    padding-top: 0;
    margin-bottom: 8px;
}

.app-has-depth .app-btn {
    right: 0;
    left: auto !important;
    position: absolute;
    cursor: pointer;
    width: 40px;
    height: 32px;
    line-height: 32px;
    margin-top: -16px !important;
    text-align: center;
    user-select: none;
}

.app-has-depth.app-collapsed {
    display: none;
}

.app-has-depth.app-collapsible .ui-btn {
    padding-right: 36px;
}

/* blob image drawing */

.app-drawing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    touch-action: none;
}

.app-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
}

    .app-canvas canvas {
        position: absolute;
        cursor: pointer;
        touch-action: none;
    }

.app-bar-buttons .app-tools {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 0 16px;
    text-align: center;
}

    .app-bar-buttons .app-tools.app-fullwidth {
        display: block;
        height: 40px;
        position: static;
    }

    .app-bar-buttons .app-tools .app-tool {
        cursor: pointer;
        width: 40px;
        height: 100%;
        display: inline-block;
        position: relative;
        padding: 0 !important;
        margin: 0;
        user-select: none;
        vertical-align: top;
    }

        .app-bar-buttons .app-tools .app-tool .app-icon {
            left: 50% !important;
            margin-left: -12px !important;
        }

        .app-bar-buttons .app-tools .app-tool + .app-tool {
            margin-left: 8px !important;
        }

        .app-bar-buttons .app-tools .app-tool.app-selected::before {
            content: ' ';
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 4px;
        }

        .app-bar-buttons .app-tools .app-tool .app-indicator {
            position: absolute;
            width: 10px;
            height: 10px;
            top: 5px;
            left: 5px;
            border-radius: 6px;
            border: solid 1px #777;
        }

.app-toolbox-form {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 997;
    padding: 1em;
    transform: translate3d(0,100%,0);
    transition: transform 100ms ease-out;
    border: solid 0;
    border-top-width: 1px;
}

.app-toolbox-visible {
    transform: none;
}

.app-toolbox-form.app-toolbox-panel {
    right: auto;
    border-right-width: 1px;
    border-left-width: 1px;
}

.app-toolbox-blobdraw {
    max-width: 360px;
}

.app-toolbox-form .app-color-palette {
    font-size: 0;
    display: inline-block;
}


.app-toolbox-form .app-width {
    margin: 0 8px;
}

.app-toolbox-form .app-color {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 6px;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
}

    .app-toolbox-form .app-color.app-selected:after {
        content: ' ';
        width: 28px;
        height: 28px;
        border-radius: 16px;
        border: solid 2px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -16px;
        margin-top: -16px;
    }

.app-toolbox-screen {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /*background-color: rgba(0,0,0,.15);*/
    z-index: 997;
}
/* Display Flow Designer */
.app-desktop .app-display-flow .app-container {
    outline: 1px dashed transparent;
    transition: outline-color 300ms ease-in;
}

.app-desktop .app-display-flow-designer .app-container:not([data-read-only="true"]):not(.app-container-selected):hover {
    /*outline-color: #000;*/
    z-index: 5;
}

.app-display-flow-designer .app-container.app-container-selected {
    /*outline-color: #000;*/
    outline: 2px dashed;
    z-index: 6;
}
/*.app-display-flow-designer .app-container.app-container-cut {
    opacity: .25;
}
*/

.dv-item.app-clipboard-cut .ui-btn {
    opacity: .5;
}

    .dv-item.app-clipboard-cut .ui-btn::after,
    .app-display-flow-designer .app-container.app-container-cut::before {
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        display: block;
        cursor: default;
    }

.app-display-flow-toolbar {
    position: absolute;
    margin: 0;
    height: 32px;
    line-height: 32px;
    z-index: 7;
    /*backdrop-filter: blur(4px);*/
    overflow: hidden;
}

    .app-display-flow-toolbar .app-btn-separator, .app-display-flow-toolbar .app-btn {
        width: 8px;
        height: 32px;
        display: inline-block;
        /*backdrop-filter: blur(4px);*/
        padding: 0;
        margin: 0;
    }

    .app-display-flow-toolbar .app-btn {
        position: relative;
        width: 24px;
        cursor: pointer;
        user-select: none;
        /*backdrop-filter: blur(4px);*/
    }

        .app-display-flow-toolbar .app-btn .app-icon {
            color: rgba(255,255,255,.75);
            left: 50%;
            margin-left: -12px !important;
            /* small toolbar icons */
            font-size: 16px !important;
            line-height: 16px !important;
            height: 16px !important;
            margin-top: -8px !important;
            margin-left: -8px !important;
        }

        .app-display-flow-toolbar .app-btn.app-hidden, .app-display-flow-toolbar .app-btn.app-hidden + .app-btn-separator {
            display: none;
        }

    .app-display-flow-toolbar.app-display-flow-toolbar-top {
        border-top-right-radius: 5px;
        border-top-left-radius: 8px;
    }

    .app-display-flow-toolbar.app-display-flow-toolbar-bottom {
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
    }

.app-desktop .ui-btn.app-btn-disabled:hover {
    background-color: transparent !important;
}

.ui-disabled > * {
    opacity: .3;
    cursor: default;
}

[data-text-style="large"] {
    font-size: 2em;
}

[data-text-style="medium"] {
    font-size: 1.5em;
}

[data-text-style="important"] {
    font-weight: 600;
}

.app-screen-header {
    font-size: 28pt;
    position: absolute;
    top: 0;
    padding: 1em 0;
    width: 100%;
    text-align: center
}

    .app-screen-header .app-name {
        position: absolute;
        top: 20px;
        font-size: 14px;
        text-transform: uppercase;
    }

/* enhancements to the panels in the light theme */

.app-theme-light .ui-panel-position-left {
    border-right: solid 1px #bbb !important;
}

.app-theme-light .ui-panel-position-right {
    border-left: solid 1px #bbb !important;
}

/* system scrollbars */

.app-has-scrollbars {
    scrollbar-width: thin;
}

.app-desktop .app-has-scrollbars::-webkit-scrollbar {
    display: block;
    width: 7px;
    height: 6px;
    background-color: transparent;
}

.app-desktop.app-scrollbars-wide .app-has-scrollbars::-webkit-scrollbar {
    width: 10px;
    height: 9px;
}


.app-desktop .app-has-scrollbars::-webkit-scrollbar-corner {
    background-color: transparent;
}

.app-desktop .app-has-scrollbars::-webkit-scrollbar-thumb {
    border-right: solid 1px #fff;
}

.app-desktop.app-theme-dark .app-has-scrollbars::-webkit-scrollbar-thumb {
    border-right: solid 1px #111;
}


.app-desktop .app-has-scrollbars::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 1px 1px 0px rgba(0,0,0,.10), inset 1px 1px 0px rgba(0,0,0,.10);
}

.ui-listview-hidden {
    max-height: 1px;
}