/*!
* Data Aquarium Framework - Touch UI Core
* Copyright 2021 Code On Time LLC; Licensed MIT; http://codeontime.com/license
* Copyright 2010-2014 jQuery Foundation, Inc. and othercontributors
* Released under the MIT license; http://jquery.org/license
*/

/* Globals */

legend,
.ui-input-text input,
.ui-input-search input {
    color: inherit;
}

/* Corner rounding
-----------------------------------------------------------------------------------------------------------*/
/* Class ui-btn-corner-all deprecated in 1.4 */
.ui-corner-all {
    border-radius: .3125em /*{global-radii-blocks}*/;
}
/* Buttons */
.ui-btn {
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
}

    .ui-btn-corner-all,
    .ui-btn.ui-corner-all,
    /* Slider track */
    .ui-slider-track.ui-corner-all,
    /* Count bubble */
    .ui-li-count {
        border-radius: .3125em /*{global-radii-buttons}*/;
    }
/* Icon-only buttons */
.ui-btn-icon-notext.ui-btn-corner-all,
.ui-btn-icon-notext.ui-corner-all {
    border-radius: 1em;
}
/* Radius clip workaround for cleaning up corner trapping */
.ui-btn-corner-all,
.ui-corner-all {
    background-clip: padding-box;
}
/* Popup arrow */
.ui-popup.ui-corner-all > .ui-popup-arrow-guide {
    left: .5em /*{global-radii-blocks}*/;
    right: .5em /*{global-radii-blocks}*/;
    top: .5em /*{global-radii-blocks}*/;
    bottom: .5em /*{global-radii-blocks}*/;
}
/* Shadow
-----------------------------------------------------------------------------------------------------------*/
.ui-shadow {
    box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.15) /*{global-box-shadow-color}*/;
}

.ui-shadow-inset {
    box-shadow: inset 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
}

.ui-overlay-shadow {
    box-shadow: 0 0 12px rgba(0,0,0,.6);
}
/* Icons
-----------------------------------------------------------------------------------------------------------*/
.ui-btn-icon-left:after,
.ui-btn-icon-right:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after,
.ui-btn-icon-notext:after {
    background-color: #666 /*{global-icon-color}*/;
    background-color: rgba(0,0,0,.3) /*{global-icon-disc}*/;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 1em;
}

/ /* Swatches */
/* A
-----------------------------------------------------------------------------------------------------------*/
/* Bar: Toolbars, dividers, slider track */
.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*/ {
    background-color: #e9e9e9 /*{a-bar-background-color}*/;
    border-color: #ddd /*{a-bar-border}*/;
    color: #333 /*{a-bar-color}*/;
    font-weight: bold;
}

.ui-bar-a {
    border-width: 1px;
    border-style: solid;
}
/* Page and overlay */
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
    background-color: #f9f9f9 /*{a-page-background-color}*/;
    border-color: #bbb /*{a-page-border}*/;
    color: #333 /*{a-page-color}*/;
}
    /* Body: Read-only lists, text inputs, collapsible content */
    /*.ui-body-a,*/
    .ui-page-theme-a .ui-body-inherit,
    html .ui-bar-a .ui-body-inherit
    /*html .ui-body-a .ui-body-inherit,*/
    /*html body .ui-group-theme-a .ui-body-inherit,*/
    /*html .ui-panel-page-container-a*/ {
        background-color: #fff /*{a-body-background-color}*/;
        border-color: #ddd /*{a-body-border}*/;
        color: #333 /*{a-body-color}*/;
    }

    /*.ui-body-a {
    border-width: 1px;
    border-style: solid;
}*/
    /* Links */
    .ui-page-theme-a a,
    html .ui-bar-a a
    /*html .ui-body-a a,*/
    /*html body .ui-group-theme-a a*/ {
        color: #3388cc /*{a-link-color}*/;
        font-weight: bold;
    }

        .ui-page-theme-a a:visited,
        html .ui-bar-a a:visited
        /*html .ui-body-a a:visited,*/
        /*html body .ui-group-theme-a a:visited*/ {
            color: #3388cc /*{a-link-visited}*/;
        }

    /*.ui-page-theme-a a:hover,
    html .ui-bar-a a:hover,
    html .ui-body-a a:hover,
    html body .ui-group-theme-a a:hover {
        color: #005599 {a-link-hover};
    }*/

    /*.ui-page-theme-a a:active,
    html .ui-bar-a a:active,
    html .ui-body-a a:active,
    html body .ui-group-theme-a a:active {
        color: #005599 {a-link-active};
    }*/
    /* Button up */
    .ui-page-theme-a .ui-btn,
    html .ui-bar-a .ui-btn,
    /*html .ui-body-a .ui-btn,*/
    /*html body .ui-group-theme-a .ui-btn,*/
    html head + body .ui-btn.ui-btn-a,
    /* Button visited */
    .ui-page-theme-a .ui-btn:visited,
    html .ui-bar-a .ui-btn:visited,
    /*html .ui-body-a .ui-btn:visited,*/
    /*html body .ui-group-theme-a .ui-btn:visited,*/
    html head + body .ui-btn.ui-btn-a:visited {
        /*background-color: #f6f6f6 {a-bup-background-color};*/
        border-color: #ddd /*{a-bup-border}*/;
        color: #333 /*{a-bup-color}*/;
    }
/* Button hover */
/*.ui-page-theme-a .ui-btn:hover,
    html .ui-bar-a .ui-btn:hover,
    html .ui-body-a .ui-btn:hover,
    html body .ui-group-theme-a .ui-btn:hover,
    html head + body .ui-btn.ui-btn-a:hover {
        background-color: #ededed {a-bhover-background-color};
        border-color: #ddd {a-bhover-border};
        color: #333 {a-bhover-color};
    }*/
/* Button down */
/*.ui-page-theme-a .ui-btn:active,
    html .ui-bar-a .ui-btn:active,
    html .ui-body-a .ui-btn:active,
    html body .ui-group-theme-a .ui-btn:active,
    html head + body .ui-btn.ui-btn-a:active {
        background-color: #e8e8e8{a-bdown-background-color};
        border-color: #ddd /*{a-bdown-border};
        color: #333 /*{a-bdown-color};
    }*/
/* Active button */
/*.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 {
        background-color: #3388cc /*{a-active-background-color}* /;
        border-color: #3388cc /*{a-active-border}* /;
        color: #fff /*{a-active-color}* /;
    }*/

/* Structure */
/* Disabled
-----------------------------------------------------------------------------------------------------------*/
/* Class ui-disabled deprecated in 1.4. :disabled not supported by IE8 so we use [disabled] */
.ui-disabled,
.ui-state-disabled,
button[disabled],
.ui-select .ui-btn.ui-state-disabled {
    filter: Alpha(Opacity=30);
    opacity: .3;
    cursor: default !important;
    pointer-events: none;
}
/* Focus state outline
-----------------------------------------------------------------------------------------------------------*/
.ui-btn:focus,
.ui-btn.ui-focus {
    outline: 0;
}
/* Some unsets */
.ui-mobile,
.ui-mobile body {
    height: 100%;
}

    .ui-mobile fieldset,
    .ui-page {
        padding: 0;
        margin: 0;
    }

    .ui-mobile a img,
    .ui-mobile fieldset {
        border-width: 0;
    }
    /* Fixes for fieldset issues on IE10 and FF (see #6077) */
    .ui-mobile fieldset {
        min-width: 0;
    }

/* Viewport */
.ui-mobile-viewport {
    margin: 0;
    overflow-x: visible;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Issue #2066 */
body.ui-mobile-viewport,
div.ui-mobile-viewport {
    overflow-x: hidden;
}
/* "page" containers - full-screen views, one should always be in view post-pageload */
.ui-mobile [data-role=page],
.ui-page {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    position: absolute;
    display: none;
    border: 0;
}
/* On ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */
.ui-page {
    outline: none;
}

.ui-mobile .ui-page-active {
    display: block;
    overflow: visible;
    overflow-x: hidden;
}

/*@media screen and (orientation: portrait) {
    .ui-mobile .ui-page {
        min-height: 420px;
    }
}

@media screen and (orientation: landscape) {
    .ui-mobile .ui-page {
        min-height: 300px;
    }
}*/
/* Fouc */
/*.ui-mobile-rendering > * {
    visibility: hidden;
}*/
/* Non-js content hiding */
/*.ui-nojs {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
}*/

/* Headers, content panels */
.ui-bar,
.ui-body {
    position: relative;
    padding: .4em 1em;
    overflow: hidden;
    display: block;
    clear: both;
}

    .ui-bar h1,
    .ui-bar h2,
    .ui-bar h3,
    .ui-bar h4,
    .ui-bar h5,
    .ui-bar h6 {
        margin: 0;
        padding: 0;
        font-size: 1em;
        display: inline-block;
    }

.ui-header,
.ui-footer {
    border-width: 1px 0;
    border-style: solid;
    position: relative;
}

    .ui-header:empty,
    .ui-footer:empty {
        min-height: 2.6875em;
    }

    .ui-header .ui-title,
    .ui-footer .ui-title {
        font-size: 1em;
        min-height: 1.1em;
        text-align: center;
        display: block;
        margin: 0 30%;
        padding: .7em 0;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        outline: 0 !important;
    }

    .ui-footer .ui-title {
        margin: 0 1em;
    }

.ui-content {
    border-width: 0;
    overflow: visible;
    overflow-x: hidden;
    padding: 1em;
}
/* Corner styling for dialogs and popups */
.ui-corner-all > .ui-header:first-child,
.ui-corner-all > .ui-content:first-child,
.ui-corner-all > .ui-footer:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.ui-corner-all > .ui-header:last-child,
.ui-corner-all > .ui-content:last-child,
.ui-corner-all > .ui-footer:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
/* Buttons and icons */
.ui-btn {
    font-size: 16px;
    margin: .5em 0;
    padding: .7em 1em;
    display: block;
    position: relative;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.ui-btn-icon-notext,
.ui-header button.ui-btn.ui-btn-icon-notext,
.ui-footer button.ui-btn.ui-btn-icon-notext {
    padding: 0;
    width: 1.75em;
    height: 1.75em;
    text-indent: -9999px;
    white-space: nowrap !important;
}

/* Make buttons in toolbars default to mini and inline. */
.ui-header .ui-btn,
.ui-footer .ui-btn {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
}

/* To ensure same top and left/right position when ui-btn-left/right are added to something other than buttons. */
.ui-header .ui-btn-icon-notext,
.ui-footer .ui-btn-icon-notext {
    font-size: 16px;
    padding: 0;
}

.ui-btn-inline {
    display: inline-block;
    vertical-align: middle;
    margin-right: .625em;
}

.ui-btn-icon-left {
    padding-left: 2.5em;
}

.ui-btn-icon-right {
    padding-right: 2.5em;
}

.ui-btn-icon-top {
    padding-top: 2.5em;
}

.ui-btn-icon-bottom {
    padding-bottom: 2.5em;
}

.ui-header .ui-btn-icon-top,
.ui-footer .ui-btn-icon-top,
.ui-header .ui-btn-icon-bottom,
.ui-footer .ui-btn-icon-bottom {
    padding-left: .3125em;
    padding-right: .3125em;
}

.ui-btn-icon-left:after,
.ui-btn-icon-right:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after,
.ui-btn-icon-notext:after {
    content: "";
    position: absolute;
    display: block;
    width: 22px;
    height: 22px;
}

.ui-btn-icon-notext:after,
.ui-btn-icon-left:after,
.ui-btn-icon-right:after {
    top: 50%;
    margin-top: -11px;
}

.ui-btn-icon-left:after {
    left: .5625em;
}

.ui-btn-icon-right:after {
    right: .5625em;
}

.ui-header .ui-btn-icon-left:after,
.ui-footer .ui-btn-icon-left:after {
    left: .37em;
}

.ui-header .ui-btn-icon-right:after,
.ui-footer .ui-btn-icon-right:after {
    right: .37em;
}

.ui-btn-icon-notext:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after {
    left: 50%;
    margin-left: -11px;
}

.ui-btn-icon-top:after {
    top: .5625em;
}

.ui-btn-icon-bottom:after {
    top: auto;
    bottom: .5625em;
}
/* Buttons in header position classes */
.ui-btn-left,
.ui-btn-right {
    position: absolute;
    top: .24em;
}

.ui-btn-left {
    left: .4em;
}

.ui-btn-right {
    right: .4em;
}

.ui-btn-icon-notext.ui-btn-left {
    top: .3125em;
    left: .3125em;
}

.ui-btn-icon-notext.ui-btn-right {
    top: .3125em;
    right: .3125em;
}

/* Form labels */

/* Used for hiding elements by the filterable widget. You can also use this class to hide list items or buttons in controlgroups; this ensures correct corner styling. */
.ui-screen-hidden {
    display: none !important;
}
/* Transitions originally inspired by those from jQtouch, nice work, folks */
/*.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}*/

.ui-page-pre-in {
    opacity: 0;
}

.in {
    animation-timing-function: ease-out;
    animation-duration: 350ms;
}

.out {
    animation-timing-function: ease-in;
    animation-duration: 225ms;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fade.out {
    opacity: 0;
    animation-duration: 125ms;
    animation-name: fadeout;
}

.fade.in {
    opacity: 1;
    animation-duration: 225ms;
    animation-name: fadein;
}
/*
.pop {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

    .pop.in {
        -webkit-transform: scale(1);
        -webkit-animation-name: popin;
        -webkit-animation-duration: 350ms;
        -moz-transform: scale(1);
        -moz-animation-name: popin;
        -moz-animation-duration: 350ms;
        transform: scale(1);
        animation-name: popin;
        animation-duration: 350ms;
        opacity: 1;
    }

    .pop.out {
        -webkit-animation-name: fadeout;
        -webkit-animation-duration: 100ms;
        -moz-animation-name: fadeout;
        -moz-animation-duration: 100ms;
        animation-name: fadeout;
        animation-duration: 100ms;
        opacity: 0;
    }

    .pop.in.reverse {
        -webkit-animation-name: fadein;
        -moz-animation-name: fadein;
        animation-name: fadein;
    }

    .pop.out.reverse {
        -webkit-transform: scale(.8);
        -webkit-animation-name: popout;
        -moz-transform: scale(.8);
        -moz-animation-name: popout;
        transform: scale(.8);
        animation-name: popout;
    }

@-webkit-keyframes popin {
    from {
        -webkit-transform: scale(.8);
        opacity: 0;
    }

    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@-moz-keyframes popin {
    from {
        -moz-transform: scale(.8);
        opacity: 0;
    }

    to {
        -moz-transform: scale(1);
        opacity: 1;
    }
}

@keyframes popin {
    from {
        transform: scale(.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes popout {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(.8);
        opacity: 0;
    }
}

@-moz-keyframes popout {
    from {
        -moz-transform: scale(1);
        opacity: 1;
    }

    to {
        -moz-transform: scale(.8);
        opacity: 0;
    }
}

@keyframes popout {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(.8);
        opacity: 0;
    }
}*/
/* keyframes for slidein from sides */
/*@-webkit-keyframes slideinfromright {
    from {
        -webkit-transform: translate3d(100%,0,0);
    }

    to {
        -webkit-transform: translate3d(0,0,0);
    }
}

@-moz-keyframes slideinfromright {
    from {
        -moz-transform: translateX(100%);
    }

    to {
        -moz-transform: translateX(0);
    }
}

@keyframes slideinfromright {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@-webkit-keyframes slideinfromleft {
    from {
        -webkit-transform: translate3d(-100%,0,0);
    }

    to {
        -webkit-transform: translate3d(0,0,0);
    }
}

@-moz-keyframes slideinfromleft {
    from {
        -moz-transform: translateX(-100%);
    }

    to {
        -moz-transform: translateX(0);
    }
}

@keyframes slideinfromleft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}*/
/* keyframes for slideout to sides */
/*@-webkit-keyframes slideouttoleft {
    from {
        -webkit-transform: translate3d(0,0,0);
    }

    to {
        -webkit-transform: translate3d(-100%,0,0);
    }
}

@-moz-keyframes slideouttoleft {
    from {
        -moz-transform: translateX(0);
    }

    to {
        -moz-transform: translateX(-100%);
    }
}

@keyframes slideouttoleft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@-webkit-keyframes slideouttoright {
    from {
        -webkit-transform: translate3d(0,0,0);
    }

    to {
        -webkit-transform: translate3d(100%,0,0);
    }
}

@-moz-keyframes slideouttoright {
    from {
        -moz-transform: translateX(0);
    }

    to {
        -moz-transform: translateX(100%);
    }
}

@keyframes slideouttoright {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}*/

/*.slide.out, .slide.in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 350ms;
    animation-timing-function: ease-out;
    animation-duration: 350ms;
}

.slide.out {
    -webkit-transform: translate3d(-100%,0,0);
    -webkit-animation-name: slideouttoleft;
    -moz-transform: translateX(-100%);
    -moz-animation-name: slideouttoleft;
    transform: translateX(-100%);
    animation-name: slideouttoleft;
}

.slide.in {
    -webkit-transform: translate3d(0,0,0);
    -webkit-animation-name: slideinfromright;
    -moz-transform: translateX(0);
    -moz-animation-name: slideinfromright;
    transform: translateX(0);
    animation-name: slideinfromright;
}

.slide.out.reverse {
    -webkit-transform: translate3d(100%,0,0);
    -webkit-animation-name: slideouttoright;
    -moz-transform: translateX(100%);
    -moz-animation-name: slideouttoright;
    transform: translateX(100%);
    animation-name: slideouttoright;
}

.slide.in.reverse {
    -webkit-transform: translate3d(0,0,0);
    -webkit-animation-name: slideinfromleft;
    -moz-transform: translateX(0);
    -moz-animation-name: slideinfromleft;
    transform: translateX(0);
    animation-name: slideinfromleft;
}

.slidefade.out {
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
    -webkit-animation-duration: 225ms;
    -moz-transform: translateX(-100%);
    -moz-animation-name: slideouttoleft;
    -moz-animation-duration: 225ms;
    transform: translateX(-100%);
    animation-name: slideouttoleft;
    animation-duration: 225ms;
}

.slidefade.in {
    -webkit-transform: translateX(0);
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 200ms;
    -moz-transform: translateX(0);
    -moz-animation-name: fadein;
    -moz-animation-duration: 200ms;
    transform: translateX(0);
    animation-name: fadein;
    animation-duration: 200ms;
}

.slidefade.out.reverse {
    -webkit-transform: translateX(100%);
    -webkit-animation-name: slideouttoright;
    -webkit-animation-duration: 200ms;
    -moz-transform: translateX(100%);
    -moz-animation-name: slideouttoright;
    -moz-animation-duration: 200ms;
    transform: translateX(100%);
    animation-name: slideouttoright;
    animation-duration: 200ms;
}

.slidefade.in.reverse {
    -webkit-transform: translateX(0);
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 200ms;
    -moz-transform: translateX(0);
    -moz-animation-name: fadein;
    -moz-animation-duration: 200ms;
    transform: translateX(0);
    animation-name: fadein;
    animation-duration: 200ms;
}*/
/* slide down */
/*.slidedown.out {
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 100ms;
    -moz-animation-name: fadeout;
    -moz-animation-duration: 100ms;
    animation-name: fadeout;
    animation-duration: 100ms;
}

.slidedown.in {
    -webkit-transform: translateY(0);
    -webkit-animation-name: slideinfromtop;
    -webkit-animation-duration: 250ms;
    -moz-transform: translateY(0);
    -moz-animation-name: slideinfromtop;
    -moz-animation-duration: 250ms;
    transform: translateY(0);
    animation-name: slideinfromtop;
    animation-duration: 250ms;
}

    .slidedown.in.reverse {
        -webkit-animation-name: fadein;
        -webkit-animation-duration: 150ms;
        -moz-animation-name: fadein;
        -moz-animation-duration: 150ms;
        animation-name: fadein;
        animation-duration: 150ms;
    }

.slidedown.out.reverse {
    -webkit-transform: translateY(-100%);
    -webkit-animation-name: slideouttotop;
    -webkit-animation-duration: 200ms;
    -moz-transform: translateY(-100%);
    -moz-animation-name: slideouttotop;
    -moz-animation-duration: 200ms;
    transform: translateY(-100%);
    animation-name: slideouttotop;
    animation-duration: 200ms;
}

@-webkit-keyframes slideinfromtop {
    from {
        -webkit-transform: translateY(-100%);
    }

    to {
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes slideinfromtop {
    from {
        -moz-transform: translateY(-100%);
    }

    to {
        -moz-transform: translateY(0);
    }
}

@keyframes slideinfromtop {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes slideouttotop {
    from {
        -webkit-transform: translateY(0);
    }

    to {
        -webkit-transform: translateY(-100%);
    }
}

@-moz-keyframes slideouttotop {
    from {
        -moz-transform: translateY(0);
    }

    to {
        -moz-transform: translateY(-100%);
    }
}

@keyframes slideouttotop {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}*/
/* slide up */
/*.slideup.out {
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 100ms;
    -moz-animation-name: fadeout;
    -moz-animation-duration: 100ms;
    animation-name: fadeout;
    animation-duration: 100ms;
}

.slideup.in {
    -webkit-transform: translateY(0);
    -webkit-animation-name: slideinfrombottom;
    -webkit-animation-duration: 250ms;
    -moz-transform: translateY(0);
    -moz-animation-name: slideinfrombottom;
    -moz-animation-duration: 250ms;
    transform: translateY(0);
    animation-name: slideinfrombottom;
    animation-duration: 250ms;
}

    .slideup.in.reverse {
        -webkit-animation-name: fadein;
        -webkit-animation-duration: 150ms;
        -moz-animation-name: fadein;
        -moz-animation-duration: 150ms;
        animation-name: fadein;
        animation-duration: 150ms;
    }

.slideup.out.reverse {
    -webkit-transform: translateY(100%);
    -webkit-animation-name: slideouttobottom;
    -webkit-animation-duration: 200ms;
    -moz-transform: translateY(100%);
    -moz-animation-name: slideouttobottom;
    -moz-animation-duration: 200ms;
    transform: translateY(100%);
    animation-name: slideouttobottom;
    animation-duration: 200ms;
}

@-webkit-keyframes slideinfrombottom {
    from {
        -webkit-transform: translateY(100%);
    }

    to {
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes slideinfrombottom {
    from {
        -moz-transform: translateY(100%);
    }

    to {
        -moz-transform: translateY(0);
    }
}

@keyframes slideinfrombottom {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes slideouttobottom {
    from {
        -webkit-transform: translateY(0);
    }

    to {
        -webkit-transform: translateY(100%);
    }
}

@-moz-keyframes slideouttobottom {
    from {
        -moz-transform: translateY(0);
    }

    to {
        -moz-transform: translateY(100%);
    }
}

@keyframes slideouttobottom {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}*/
/* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
/*.viewport-flip {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
    position: absolute;
}

.flip {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0);*/ /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
/*-moz-backface-visibility: hidden;
    -moz-transform: translateX(0);
    backface-visibility: hidden;
    transform: translateX(0);
}

    .flip.out {
        -webkit-transform: rotateY(-90deg) scale(.9);
        -webkit-animation-name: flipouttoleft;
        -webkit-animation-duration: 175ms;
        -moz-transform: rotateY(-90deg) scale(.9);
        -moz-animation-name: flipouttoleft;
        -moz-animation-duration: 175ms;
        transform: rotateY(-90deg) scale(.9);
        animation-name: flipouttoleft;
        animation-duration: 175ms;
    }

    .flip.in {
        -webkit-animation-name: flipintoright;
        -webkit-animation-duration: 225ms;
        -moz-animation-name: flipintoright;
        -moz-animation-duration: 225ms;
        animation-name: flipintoright;
        animation-duration: 225ms;
    }

    .flip.out.reverse {
        -webkit-transform: rotateY(90deg) scale(.9);
        -webkit-animation-name: flipouttoright;
        -moz-transform: rotateY(90deg) scale(.9);
        -moz-animation-name: flipouttoright;
        transform: rotateY(90deg) scale(.9);
        animation-name: flipouttoright;
    }

    .flip.in.reverse {
        -webkit-animation-name: flipintoleft;
        -moz-animation-name: flipintoleft;
        animation-name: flipintoleft;
    }

@-webkit-keyframes flipouttoleft {
    from {
        -webkit-transform: rotateY(0);
    }

    to {
        -webkit-transform: rotateY(-90deg) scale(.9);
    }
}

@-moz-keyframes flipouttoleft {
    from {
        -moz-transform: rotateY(0);
    }

    to {
        -moz-transform: rotateY(-90deg) scale(.9);
    }
}

@keyframes flipouttoleft {
    from {
        transform: rotateY(0);
    }

    to {
        transform: rotateY(-90deg) scale(.9);
    }
}

@-webkit-keyframes flipouttoright {
    from {
        -webkit-transform: rotateY(0);
    }

    to {
        -webkit-transform: rotateY(90deg) scale(.9);
    }
}

@-moz-keyframes flipouttoright {
    from {
        -moz-transform: rotateY(0);
    }

    to {
        -moz-transform: rotateY(90deg) scale(.9);
    }
}

@keyframes flipouttoright {
    from {
        transform: rotateY(0);
    }

    to {
        transform: rotateY(90deg) scale(.9);
    }
}

@-webkit-keyframes flipintoleft {
    from {
        -webkit-transform: rotateY(-90deg) scale(.9);
    }

    to {
        -webkit-transform: rotateY(0);
    }
}

@-moz-keyframes flipintoleft {
    from {
        -moz-transform: rotateY(-90deg) scale(.9);
    }

    to {
        -moz-transform: rotateY(0);
    }
}

@keyframes flipintoleft {
    from {
        transform: rotateY(-90deg) scale(.9);
    }

    to {
        transform: rotateY(0);
    }
}

@-webkit-keyframes flipintoright {
    from {
        -webkit-transform: rotateY(90deg) scale(.9);
    }

    to {
        -webkit-transform: rotateY(0);
    }
}

@-moz-keyframes flipintoright {
    from {
        -moz-transform: rotateY(90deg) scale(.9);
    }

    to {
        -moz-transform: rotateY(0);
    }
}

@keyframes flipintoright {
    from {
        transform: rotateY(90deg) scale(.9);
    }

    to {
        transform: rotateY(0);
    }
}*/
/* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
/*.viewport-turn {
    -webkit-perspective: 200px;
    -moz-perspective: 200px;
    -ms-perspective: 200px;
    perspective: 200px;
    position: absolute;
}

.turn {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0);*/ /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
/*-webkit-transform-origin: 0;
    -moz-backface-visibility: hidden;
    -moz-transform: translateX(0);
    -moz-transform-origin: 0;
    backface-visibility: hidden;
    transform: translateX(0);
    transform-origin: 0;
}

    .turn.out {
        -webkit-transform: rotateY(-90deg) scale(.9);
        -webkit-animation-name: flipouttoleft;
        -webkit-animation-duration: 125ms;
        -moz-transform: rotateY(-90deg) scale(.9);
        -moz-animation-name: flipouttoleft;
        -moz-animation-duration: 125ms;
        transform: rotateY(-90deg) scale(.9);
        animation-name: flipouttoleft;
        animation-duration: 125ms;
    }

    .turn.in {
        -webkit-animation-name: flipintoright;
        -webkit-animation-duration: 250ms;
        -moz-animation-name: flipintoright;
        -moz-animation-duration: 250ms;
        animation-name: flipintoright;
        animation-duration: 250ms;
    }

    .turn.out.reverse {
        -webkit-transform: rotateY(90deg) scale(.9);
        -webkit-animation-name: flipouttoright;
        -moz-transform: rotateY(90deg) scale(.9);
        -moz-animation-name: flipouttoright;
        transform: rotateY(90deg) scale(.9);
        animation-name: flipouttoright;
    }

    .turn.in.reverse {
        -webkit-animation-name: flipintoleft;
        -moz-animation-name: flipintoleft;
        animation-name: flipintoleft;
    }

@-webkit-keyframes flipouttoleft {
    from {
        -webkit-transform: rotateY(0);
    }

    to {
        -webkit-transform: rotateY(-90deg) scale(.9);
    }
}

@-moz-keyframes flipouttoleft {
    from {
        -moz-transform: rotateY(0);
    }

    to {
        -moz-transform: rotateY(-90deg) scale(.9);
    }
}

@keyframes flipouttoleft {
    from {
        transform: rotateY(0);
    }

    to {
        transform: rotateY(-90deg) scale(.9);
    }
}

@-webkit-keyframes flipouttoright {
    from {
        -webkit-transform: rotateY(0);
    }

    to {
        -webkit-transform: rotateY(90deg) scale(.9);
    }
}

@-moz-keyframes flipouttoright {
    from {
        -moz-transform: rotateY(0);
    }

    to {
        -moz-transform: rotateY(90deg) scale(.9);
    }
}

@keyframes flipouttoright {
    from {
        transform: rotateY(0);
    }

    to {
        transform: rotateY(90deg) scale(.9);
    }
}

@-webkit-keyframes flipintoleft {
    from {
        -webkit-transform: rotateY(-90deg) scale(.9);
    }

    to {
        -webkit-transform: rotateY(0);
    }
}

@-moz-keyframes flipintoleft {
    from {
        -moz-transform: rotateY(-90deg) scale(.9);
    }

    to {
        -moz-transform: rotateY(0);
    }
}

@keyframes flipintoleft {
    from {
        transform: rotateY(-90deg) scale(.9);
    }

    to {
        transform: rotateY(0);
    }
}

@-webkit-keyframes flipintoright {
    from {
        -webkit-transform: rotateY(90deg) scale(.9);
    }

    to {
        -webkit-transform: rotateY(0);
    }
}

@-moz-keyframes flipintoright {
    from {
        -moz-transform: rotateY(90deg) scale(.9);
    }

    to {
        -moz-transform: rotateY(0);
    }
}

@keyframes flipintoright {
    from {
        transform: rotateY(90deg) scale(.9);
    }

    to {
        transform: rotateY(0);
    }
}*/
/* flow transition */
/*.flow {
    -webkit-transform-origin: 50% 30%;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
    -moz-transform-origin: 50% 30%;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
    transform-origin: 50% 30%;
    box-shadow: 0 0 20px rgba(0,0,0,.4);
}

    .flow.out {
        -webkit-transform: translateX(-100%) scale(.7);
        -webkit-animation-name: flowouttoleft;
        -webkit-animation-timing-function: ease;
        -webkit-animation-duration: 350ms;
        -moz-transform: translateX(-100%) scale(.7);
        -moz-animation-name: flowouttoleft;
        -moz-animation-timing-function: ease;
        -moz-animation-duration: 350ms;
        transform: translateX(-100%) scale(.7);
        animation-name: flowouttoleft;
        animation-timing-function: ease;
        animation-duration: 350ms;
    }

    .flow.in {
        -webkit-transform: translateX(0) scale(1);
        -webkit-animation-name: flowinfromright;
        -webkit-animation-timing-function: ease;
        -webkit-animation-duration: 350ms;
        -moz-transform: translateX(0) scale(1);
        -moz-animation-name: flowinfromright;
        -moz-animation-timing-function: ease;
        -moz-animation-duration: 350ms;
        transform: translateX(0) scale(1);
        animation-name: flowinfromright;
        animation-timing-function: ease;
        animation-duration: 350ms;
    }

    .flow.out.reverse {
        -webkit-transform: translateX(100%);
        -webkit-animation-name: flowouttoright;
        -moz-transform: translateX(100%);
        -moz-animation-name: flowouttoright;
        transform: translateX(100%);
        animation-name: flowouttoright;
    }

    .flow.in.reverse {
        -webkit-animation-name: flowinfromleft;
        -moz-animation-name: flowinfromleft;
        animation-name: flowinfromleft;
    }

@-webkit-keyframes flowouttoleft {
    0% {
        -webkit-transform: translateX(0) scale(1);
    }

    60%, 70% {
        -webkit-transform: translateX(0) scale(.7);
    }

    100% {
        -webkit-transform: translateX(-100%) scale(.7);
    }
}

@-moz-keyframes flowouttoleft {
    0% {
        -moz-transform: translateX(0) scale(1);
    }

    60%, 70% {
        -moz-transform: translateX(0) scale(.7);
    }

    100% {
        -moz-transform: translateX(-100%) scale(.7);
    }
}

@keyframes flowouttoleft {
    0% {
        transform: translateX(0) scale(1);
    }

    60%, 70% {
        transform: translateX(0) scale(.7);
    }

    100% {
        transform: translateX(-100%) scale(.7);
    }
}

@-webkit-keyframes flowouttoright {
    0% {
        -webkit-transform: translateX(0) scale(1);
    }

    60%, 70% {
        -webkit-transform: translateX(0) scale(.7);
    }

    100% {
        -webkit-transform: translateX(100%) scale(.7);
    }
}

@-moz-keyframes flowouttoright {
    0% {
        -moz-transform: translateX(0) scale(1);
    }

    60%, 70% {
        -moz-transform: translateX(0) scale(.7);
    }

    100% {
        -moz-transform: translateX(100%) scale(.7);
    }
}

@keyframes flowouttoright {
    0% {
        transform: translateX(0) scale(1);
    }

    60%, 70% {
        transform: translateX(0) scale(.7);
    }

    100% {
        transform: translateX(100%) scale(.7);
    }
}

@-webkit-keyframes flowinfromleft {
    0% {
        -webkit-transform: translateX(-100%) scale(.7);
    }

    30%, 40% {
        -webkit-transform: translateX(0) scale(.7);
    }

    100% {
        -webkit-transform: translateX(0) scale(1);
    }
}

@-moz-keyframes flowinfromleft {
    0% {
        -moz-transform: translateX(-100%) scale(.7);
    }

    30%, 40% {
        -moz-transform: translateX(0) scale(.7);
    }

    100% {
        -moz-transform: translateX(0) scale(1);
    }
}

@keyframes flowinfromleft {
    0% {
        transform: translateX(-100%) scale(.7);
    }

    30%, 40% {
        transform: translateX(0) scale(.7);
    }

    100% {
        transform: translateX(0) scale(1);
    }
}

@-webkit-keyframes flowinfromright {
    0% {
        -webkit-transform: translateX(100%) scale(.7);
    }

    30%, 40% {
        -webkit-transform: translateX(0) scale(.7);
    }

    100% {
        -webkit-transform: translateX(0) scale(1);
    }
}

@-moz-keyframes flowinfromright {
    0% {
        -moz-transform: translateX(100%) scale(.7);
    }

    30%, 40% {
        -moz-transform: translateX(0) scale(.7);
    }

    100% {
        -moz-transform: translateX(0) scale(1);
    }
}

@keyframes flowinfromright {
    0% {
        transform: translateX(100%) scale(.7);
    }

    30%, 40% {
        transform: translateX(0) scale(.7);
    }

    100% {
        transform: translateX(0) scale(1);
    }
}*/

/* fixed page header & footer configuration */
.ui-header-fixed,
.ui-footer-fixed {
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}

    /*.ui-header-fixed {
    top: -1px;
    padding-top: 1px;
}

    .ui-header-fixed.ui-fixed-hidden {
        top: 0;
        padding-top: 0;
    }

    .ui-header-fixed .ui-btn-left,
    .ui-header-fixed .ui-btn-right {
        margin-top: 1px;
    }

    .ui-header-fixed.ui-fixed-hidden .ui-btn-left,
    .ui-header-fixed.ui-fixed-hidden .ui-btn-right {
        margin-top: 0;
    }

.ui-footer-fixed {
    bottom: -1px;
    padding-bottom: 1px;
}

    .ui-footer-fixed.ui-fixed-hidden {
        bottom: 0;
        padding-bottom: 0;
    }

*/
    /* updatePagePadding() will update the padding to actual height of header and footer. */
    /*.ui-page-header-fixed {
    padding-top: 2.8125em;
}

.ui-page-footer-fixed {
    padding-bottom: 2.8125em;
}*/

    /*.ui-page-header-fullscreen > .ui-content,
.ui-page-footer-fullscreen > .ui-content {
    padding: 0;
}

.ui-fixed-hidden {
    position: absolute;
}*/
    /* Tap toggle: hide external fixed footer. See issue #6604 */
    /*.ui-footer-fixed.ui-fixed-hidden {
    display: none;
}

.ui-page .ui-footer-fixed.ui-fixed-hidden {
    display: block
}

.ui-page-header-fullscreen .ui-fixed-hidden,
.ui-page-footer-fullscreen .ui-fixed-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
}*/

    .ui-header-fixed .ui-btn,
    .ui-footer-fixed .ui-btn {
        z-index: 10;
    }
/* workarounds for other widgets */
/*.ui-android-2x-fixed .ui-li-has-thumb {
    -webkit-transform: translate3d(0,0,0);
}*/

/*.ui-navbar {
    max-width: 100%;
}

    .ui-navbar ul:before,
    .ui-navbar ul:after {
        content: "";
        display: table;
    }

    .ui-navbar ul:after {
        clear: both;
    }

    .ui-navbar ul {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
        display: block;
        border: 0;
        max-width: 100%;
        overflow: visible;
    }

    .ui-navbar li .ui-btn {
        font-size: 12.5px;
        display: block;
        margin: 0;
        border-right-width: 0;
    }

.ui-header .ui-navbar li button.ui-btn,
.ui-footer .ui-navbar li button.ui-btn {
    margin: 0;
    width: 100%;
}

.ui-navbar .ui-btn:focus {
    z-index: 1;
}
/* fixes gaps caused by subpixel problem */
.ui-navbar li:last-child .ui-btn {
    margin-right: -4px;
}

    .ui-navbar li:last-child .ui-btn:after {
        margin-right: 4px;
    }

.ui-content .ui-navbar li:last-child .ui-btn {
    border-right-width: 1px;
    margin-right: 0;
}

    .ui-content .ui-navbar li:last-child .ui-btn:after {
        margin-right: 0;
    }

.ui-header .ui-navbar .ui-btn,
.ui-footer .ui-navbar .ui-btn {
    border-top-width: 0;
    border-bottom-width: 0;
}

.ui-header .ui-title ~ .ui-navbar .ui-btn,
.ui-footer .ui-title ~ .ui-navbar .ui-btn {
    border-top-width: 1px;
}

*/
/* Hide the native input element */
.ui-input-btn input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: inherit;
    cursor: pointer;
    background: #fff;
    background: rgba(255,255,255,0);
    filter: Alpha(Opacity=0);
    opacity: .1;
    font-size: 1px;
    text-indent: -9999px;
    z-index: 2;
}
/* Fixes IE/WP filter alpha opacity bugs */
.ui-input-btn.ui-state-disabled input {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
}

/*.ui-popup-open .ui-header-fixed,
.ui-popup-open .ui-footer-fixed {
    position: absolute !important;*/ /* See issues #4816, #4844 and #4874 and popup.js */
/*}*/

.ui-popup-screen {
    background-image: url("data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); /* Necessary to set some form of background to ensure element is clickable in IE6/7. While legacy IE won't understand the data-URI'd image, it ensures no additional requests occur in all other browsers with little overhead. */
    top: 0;
    left: 0;
    right: 0;
    bottom: 1px;
    position: absolute;
    filter: Alpha(Opacity=0);
    opacity: 0;
    z-index: 1099;
}

    .ui-popup-screen.in {
        opacity: 0.5;
        filter: Alpha(Opacity=50);
    }

    .ui-popup-screen.out {
        opacity: 0;
        filter: Alpha(Opacity=0);
    }

.ui-popup-container {
    z-index: 1100;
    display: inline-block;
    position: absolute;
    padding: 0;
    outline: 0;
}

.ui-popup {
    position: relative;
}

    .ui-popup.ui-body-inherit {
        border-width: 1px;
        border-style: solid;
    }

.ui-popup-hidden {
    left: 0;
    top: 0;
    position: absolute !important;
    visibility: hidden;
}

.ui-popup-truncate {
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
}

.ui-popup.ui-content,
.ui-popup .ui-content {
    overflow: visible;
}

.ui-popup > .ui-header {
    border-top-width: 0;
}

.ui-popup > .ui-footer {
    border-bottom-width: 0;
}

.ui-popup > p,
.ui-popup > h1,
.ui-popup > h2,
.ui-popup > h3,
.ui-popup > h4,
.ui-popup > h5,
.ui-popup > h6 {
    margin: .5em .4375em;
}

.ui-popup > span {
    display: block;
    margin: .5em .4375em;
}

.ui-popup-container .ui-content > p,
.ui-popup-container .ui-content > h1,
.ui-popup-container .ui-content > h2,
.ui-popup-container .ui-content > h3,
.ui-popup-container .ui-content > h4,
.ui-popup-container .ui-content > h5,
.ui-popup-container .ui-content > h6 {
    margin: .5em 0;
}

.ui-popup-container .ui-content > span {
    margin: 0;
}

.ui-popup-container .ui-content > p:first-child,
.ui-popup-container .ui-content > h1:first-child,
.ui-popup-container .ui-content > h2:first-child,
.ui-popup-container .ui-content > h3:first-child,
.ui-popup-container .ui-content > h4:first-child,
.ui-popup-container .ui-content > h5:first-child,
.ui-popup-container .ui-content > h6:first-child {
    margin-top: 0;
}

.ui-popup-container .ui-content > p:last-child,
.ui-popup-container .ui-content > h1:last-child,
.ui-popup-container .ui-content > h2:last-child,
.ui-popup-container .ui-content > h3:last-child,
.ui-popup-container .ui-content > h4:last-child,
.ui-popup-container .ui-content > h5:last-child,
.ui-popup-container .ui-content > h6:last-child {
    margin-bottom: 0;
}

.ui-popup > img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.ui-popup:not(.ui-content) > img:only-child,
.ui-popup:not(.ui-content) > .ui-btn-left:first-child + img:last-child,
.ui-popup:not(.ui-content) > .ui-btn-right:first-child + img:last-child {
    border-radius: inherit;
}

.ui-popup iframe {
    vertical-align: middle;
}

.ui-popup > .ui-btn-left,
.ui-popup > .ui-btn-right {
    position: absolute;
    top: -11px;
    margin: 0;
    z-index: 1101;
}

.ui-popup > .ui-btn-left {
    left: -11px;
}

.ui-popup > .ui-btn-right {
    right: -11px;
}
/* Dimensions related to the popup arrow
-----------------------------------------------------------------------------------------------------------*/
/* desired triangle height: 10px */
/**
 * guide for the arrow - its width, height, and offset are theme-dependent and
 * should be expessed as left, right, top, bottom, so that the element bearing
 * such a class becomes stretched inside its parent position: relative element.
 * The left/top/right/bottom specified below should reflect the corresponding
 * border radii and so it leaves room for the shadow:
 *     ..--------------------..
 *   ."        ^ top           ".
 *  /          v                 \
 * |     +------------------+     |
 * |     |                  |     |
 * | left|                  |right|
 * |<--->|                  |<--->|
 * |     +------------------+     |
 *  \          ^                 /
 *   `.        v bottom        .'
 *     ""--------------------""
 * The idea is that the top/left of the arrow container box does not move to a
 * coordinate smaller than the top/left of the guide and the right/bottom of
 * the arrow container box does not move to a coordinate larger than the
 * bottom/right of the guide. This will help us avoid the following situation:
 *        ..--------------------..
 *      ."        ^ top           ".
 *   /|/          v                 \
 *  / |     +------------------+     |
 *  \ |     |                  |     |
 *   \| left|                  |right|
 *    |<--->|                  |<--->|
 *    |     +------------------+     |
 *     \          ^                 /
 *      `.        v bottom        .'
 *        ""--------------------""
 * The arrow should not receive a top/left coordinate such that it is too close
 * to one of the corners, because then at first the shadow of the arrow and,
 * given a coordinate even closer to the corner, even the body of the arrow will
 * "stick out" of the corner of the popup. The guide provides a hint to the
 * arrow positioning code as to which range of values is acceptable for the
 * arrow container's top/left coordinate.
 **/
.ui-popup-arrow-container {
    width: 20px;
    height: 20px;
}
    /* aside from the "infinities" (-1000,2000), triangle height is used */
    .ui-popup-arrow-container.ui-popup-arrow-l {
        left: -10px;
        clip: rect(-1000px,10px,2000px,-1000px);
    }

    .ui-popup-arrow-container.ui-popup-arrow-t {
        top: -9.25px;
        clip: rect(-1000px,2000px,10px,-1000px);
    }

    .ui-popup-arrow-container.ui-popup-arrow-r {
        right: -10px;
        clip: rect(-1000px,2000px,2000px,10px);
    }

    .ui-popup-arrow-container.ui-popup-arrow-b {
        bottom: -9.25px;
        clip: rect(10px,2000px,1000px,-1000px);
    }
    /**
 * For each side, the arrow is twice the desired size and its corner is aligned
 * with the edge of the container:
 *                                           
 *           /\         /\                +----+       /\
 *          /  \       /  \               | /\ |top   /  \
 *      +----+  \     /  +----+       +-->|/  \|     /    \
 *  left| /  |   \   /   |  \ |right  |   |    |    /      \
 *      |/   |    \ /    |   \|       |  /|    |\  /        \
 *      |\   |    / \    |   /|       | / +----+ \ \ +----+ /
 *      | \  |   /   \   |  / |       | \        /  \|    |/
 *      +----+  /     \  +----+       |  \      /    |    |
 *       ^  \  /       \  /  ^        |   \    /  +->|\  /|
 *       |   \/         \/   |        |    \  /   |  | \/ |bottom
 *       |                   |        |     \/    |  +----+
 *       +-------------------+--------+-----------+
 *                           |
 *                    arrow container
 *                     (clips arrow)
 **/
    .ui-popup-arrow-container .ui-popup-arrow {
        /* (4*desired triangle height)/sqrt(2) - does not account for border - centred within the outer rectangle */
        width: 28.284271247px;
        height: 28.284271247px;
        border-width: 1px;
        border-style: solid;
    }

    .ui-popup-arrow-container.ui-popup-arrow-t .ui-popup-arrow {
        left: -4.142135623px;
        top: 5.857864376px;
    }

    .ui-popup-arrow-container.ui-popup-arrow-b .ui-popup-arrow {
        left: -4.142135623px;
        top: -14.142135623px;
    }

    .ui-popup-arrow-container.ui-popup-arrow-l .ui-popup-arrow {
        left: 5.857864376px;
        top: -4.142135623px;
    }

    .ui-popup-arrow-container.ui-popup-arrow-r .ui-popup-arrow {
        left: -14.142135623px;
        top: -4.142135623px;
    }

/* structure */
.ui-popup > .ui-popup-arrow-guide {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

.ui-popup-arrow-container {
    position: absolute;
}

.ui-popup-arrow {
    transform: rotate(45deg);
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
    border: solid 1px;
}

.ui-listview,
.ui-listview > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-content .ui-listview,
.ui-panel-inner > .ui-listview {
    margin: -1em;
}

.ui-content .ui-listview-inset,
.ui-panel-inner > .ui-listview-inset {
    margin: 1em 0;
}

.ui-collapsible-content > .ui-listview {
    margin: -.5em -1em;
}

.ui-collapsible-content > .ui-listview-inset {
    margin: .5em 0;
}

.ui-listview > li {
    display: block;
    position: relative;
    overflow: visible;
}

    .ui-listview > .ui-li-static,
    .ui-listview > .ui-li-divider,
    .ui-listview > li > a.ui-btn {
        margin: 0;
        display: block;
        position: relative;
        text-align: left;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .ui-listview > li > .ui-btn:focus {
        z-index: 1;
    }

    .ui-listview > .ui-li-static,
    .ui-listview > .ui-li-divider,
    .ui-listview > li > a.ui-btn {
        border-width: 1px 0 0 0;
        border-style: solid;
    }

.ui-listview-inset > .ui-li-static,
.ui-listview-inset > .ui-li-divider,
.ui-listview-inset > li > a.ui-btn {
    border-right-width: 1px;
    border-left-width: 1px;
}

.ui-listview > .ui-li-static.ui-last-child,
.ui-listview > .ui-li-divider.ui-last-child,
.ui-listview > li.ui-last-child > a.ui-btn {
    border-bottom-width: 1px;
}

.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > li.ui-first-child,
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > li.ui-first-child > a.ui-btn {
    border-top-width: 0;
}

.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child,
.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child > a.ui-btn {
    border-bottom-width: 0;
}

.ui-listview > li.ui-first-child,
.ui-listview > li.ui-first-child > a.ui-btn {
    border-top-right-radius: inherit;
    border-top-left-radius: inherit;
}

.ui-listview > li.ui-last-child,
.ui-listview > li.ui-last-child > a.ui-btn {
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
}

.ui-listview > li.ui-li-has-alt > a.ui-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ui-listview > li.ui-first-child > a.ui-btn + a.ui-btn {
    border-top-left-radius: 0;
    border-top-right-radius: inherit;
}

.ui-listview > li.ui-last-child > a.ui-btn + a.ui-btn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: inherit;
}

.ui-listview > li.ui-first-child img:first-child:not(.ui-li-icon) {
    border-top-left-radius: inherit;
}

.ui-listview > li.ui-last-child img:first-child:not(.ui-li-icon) {
    border-bottom-left-radius: inherit;
}

.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) {
    border-radius: inherit;
}

.ui-listview > .ui-li-static {
    padding: .7em 1em;
}

.ui-listview > .ui-li-divider {
    padding: .5em 1.143em;
    font-size: 14px;
    font-weight: bold;
    cursor: default;
    outline: 0; /* Dividers in custom selectmenus have tabindex */
}

    .ui-listview > .ui-li-has-count > .ui-btn,
    .ui-listview > .ui-li-static.ui-li-has-count,
    .ui-listview > .ui-li-divider.ui-li-has-count {
        padding-right: 2.8125em;
    }

.ui-listview > .ui-li-has-count > .ui-btn-icon-right {
    padding-right: 4.6875em;
}

.ui-listview > .ui-li-has-thumb > .ui-btn,
.ui-listview > .ui-li-static.ui-li-has-thumb {
    min-height: 3.625em;
    padding-left: 6.25em;
}
/* ui-li-has-icon deprecated in 1.4. TODO: remove in 1.5 */
.ui-listview > .ui-li-has-icon > .ui-btn,
.ui-listview > .ui-li-static.ui-li-has-icon {
    min-height: 1.25em;
    padding-left: 2.5em;
}
/* Used by both listview and custom multiple select button */
.ui-li-count {
    position: absolute;
    font-size: 12.5px;
    font-weight: bold;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    padding: 0 .48em;
    line-height: 1.6em;
    min-height: 1.6em;
    min-width: .64em;
    right: .8em;
    top: 50%;
    margin-top: -.88em;
}

.ui-listview .ui-btn-icon-right .ui-li-count {
    right: 3.2em;
}

.ui-listview .ui-li-has-thumb > img:first-child,
.ui-listview .ui-li-has-thumb > .ui-btn > img:first-child,
.ui-listview .ui-li-has-thumb .ui-li-thumb {
    position: absolute;
    left: 0;
    top: 0;
    max-height: 5em;
    max-width: 5em;
}
/* ui-li-has-icon deprecated in 1.4. TODO: remove in 1.5 */
.ui-listview > .ui-li-has-icon > img:first-child,
.ui-listview > .ui-li-has-icon > .ui-btn > img:first-child {
    position: absolute;
    left: .625em;
    top: .9em;
    max-height: 1em;
    max-width: 1em;
}
/* rules for h1-h6 are breaking rendering of RTF content in list */

/*.ui-listview > li h1,
.ui-listview > li h2,
.ui-listview > li h3,
.ui-listview > li h4,
.ui-listview > li h5,
.ui-listview > li h6 {
    font-size: 1em;
    font-weight: bold;
    display: block;
    margin: .45em 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}*/
.ui-listview > li p {
    font-size: 12px;
    font-weight: normal;
    display: block;
    margin: .6em 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.ui-listview .ui-li-aside {
    position: absolute;
    top: 1em;
    right: 3.333em;
    margin: 0;
    text-align: right;
}

.ui-listview > li.ui-li-has-alt > .ui-btn {
    margin-right: 2.5em;
    border-right-width: 0;
}

    .ui-listview > li.ui-li-has-alt > .ui-btn + .ui-btn {
        position: absolute;
        width: 2.5em;
        height: 100%;
        min-height: auto;
        box-sizing: border-box;
        border-left-width: 1px;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        z-index: 2;
    }

.ui-listview-inset > li.ui-li-has-alt > .ui-btn + .ui-btn {
    border-right-width: 1px;
}

.ui-listview > li.ui-li-has-alt > .ui-btn + .ui-btn:focus {
    z-index: 3;
}

ol.ui-listview,
ol.ui-listview > .ui-li-divider {
    counter-reset: listnumbering;
}

    ol.ui-listview > li > .ui-btn,
    ol.ui-listview > li.ui-li-static {
        vertical-align: middle;
    }

        ol.ui-listview > li > .ui-btn:first-child:before,
        ol.ui-listview > li.ui-li-static:before {
            display: inline-block;
            font-size: .9em;
            font-weight: normal;
            padding-right: .3em;
            min-width: 1.4em;
            line-height: 1.5;
            vertical-align: middle;
            counter-increment: listnumbering;
            content: counter(listnumbering) ".";
        }

    ol.ui-listview > li h1:first-child,
    ol.ui-listview > li h2:first-child,
    ol.ui-listview > li h3:first-child,
    ol.ui-listview > li h4:first-child,
    ol.ui-listview > li h5:first-child,
    ol.ui-listview > li h6:first-child,
    ol.ui-listview > li p:first-child,
    ol.ui-listview > li img:first-child + * {
        display: inline-block;
        vertical-align: middle;
    }

        ol.ui-listview > li h1:first-child ~ *,
        ol.ui-listview > li h2:first-child ~ *,
        ol.ui-listview > li h3:first-child ~ *,
        ol.ui-listview > li h4:first-child ~ *,
        ol.ui-listview > li h5:first-child ~ *,
        ol.ui-listview > li h6:first-child ~ *,
        ol.ui-listview > li p:first-child ~ *,
        ol.ui-listview > li img:first-child + * ~ * {
            margin-top: 0;
            text-indent: 2.04em; /* (1.4em + .3em) * .9em / .75em */
        }

html .ui-filterable + .ui-listview,
html .ui-filterable.ui-listview {
    margin-top: .5em;
}

.ui-input-text,
.ui-input-search {
    margin: .5em 0;
    border-width: 1px;
    border-style: solid;
}

    .ui-input-text input,
    .ui-input-search input {
        padding: .4em;
        line-height: 1.4em;
        display: block;
        width: 100%;
        box-sizing: border-box;
        outline: 0;
    }

    .ui-input-text input,
    .ui-input-search input {
        margin: 0;
        min-height: 2.2em;
        text-align: left; /* Opera aligns type="date" right by default */
        border: 0;
        background: transparent none;
        border-radius: inherit;
    }


/* Same margin for mini textareas as other mini sized widgets (12.5/14 * 0.5em) */
.ui-input-search {
    position: relative;
}

    /* Search icon */
    .ui-input-search input {
        padding-left: 1.75em;
    }

    .ui-input-search:after {
        position: absolute;
        left: .3125em;
        top: 50%;
        margin-top: -7px;
        content: "";
        background-position: center center;
        background-repeat: no-repeat;
        width: 14px;
        height: 14px;
        opacity: .5;
    }

    .ui-input-search .ui-input-clear-hidden,
    .ui-input-text .ui-input-clear-hidden {
        display: none;
    }

/* Panel */
.ui-panel {
    width: 17em;
    min-height: 100%;
    max-height: none;
    border-width: 0;
    position: absolute;
    top: 0;
    display: block;
}

.ui-panel-closed {
    width: 0;
    max-height: 100%;
    overflow: hidden;
    visibility: hidden;
    left: 0;
}

.ui-panel-fixed {
    position: fixed;
    bottom: -1px; /* Fixes gap on Chrome for Android */
    padding-bottom: 1px;
}

.ui-panel-display-reveal {
    z-index: 1;
}

.ui-panel-display-push {
    z-index: 999;
}

.ui-panel-display-overlay {
    z-index: 1001; /* Fixed toolbars have z-index 1000 */
}

.ui-panel-inner {
    padding: 1em;
}
/* Dismiss */
.ui-panel-dismiss {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 1002;
    display: none;
}

.ui-panel-dismiss-open {
    display: block;
}
/* Animate class is added to panel, wrapper and fixed toolbars */
.ui-panel-animate {
    transition: transform 275ms ease;
}
/* Fix for Windows Phone issue #6349: unset the transition for transforms in case of fixed toolbars. */
/*@media screen and ( max-device-width: 768px ) {
    .ui-page-header-fixed .ui-panel-animate.ui-panel-wrapper,
    .ui-page-footer-fixed .ui-panel-animate.ui-panel-wrapper,
    .ui-panel-animate.ui-panel-fixed-toolbar {
        -ms-transition: none;
    }*/
/* We need a transitionend event ... */
/*.ui-panel-animate.ui-panel-fixed-toolbar {
        -ms-transition: -ms-transform 1ms;
        -ms-transform: rotate(0deg);
    }
}*/
/* Hardware acceleration for smoother transitions on WebKit browsers */
/*    .ui-panel-animate.ui-panel:not(.ui-panel-display-reveal) {
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0,0,0);
    }
*/ /* Panel positioning (for overlay and push) */
/* Panel left closed */
.ui-panel-position-left {
    left: -17em;
}
/* Panel left closed animated */
.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
    left: 0;
    transform: translate3d(-17em,0,0);
}
/* Panel left open */
.ui-panel-position-left.ui-panel-display-reveal, /* Unset "panel left closed" for reveal */
.ui-panel-open.ui-panel-position-left {
    left: 0;
}
/* Panel left open animated */
.ui-panel-animate.ui-panel-open.ui-panel-position-left.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-open.ui-panel-position-left.ui-panel-display-push {
    transform: translate3d(0,0,0);
}
/* Panel right closed */
.ui-panel-position-right {
    right: -17em;
}
/* Panel right closed animated */
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
    right: 0;
    transform: translate3d(17em,0,0);
}
/* Panel right open */
.ui-panel-position-right.ui-panel-open {
    right: 0;
}
/* Panel right open animated */
.ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-push {
    transform: translate3d(0,0,0);
}

.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,
a.ui-btn.app-has-children::after,
.app-echo-toolbar h3::after,
.app-bar-actions > h3::after,
.app-btn-options::after,
[data-input] .app-control-helper ul li.app-focus::after,
[data-input] .app-control-toolbar .app-has-droparrow::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;
}

.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 > a.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;
    -webkit-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 {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    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: scroll;
    overflow-x: hidden;
    /*border:solid 1px red;*/
}

    .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;
    -webkit-user-select: none;
    -ms-user-select: none;
}


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

.app-page-modal .app-vscrollbar {
    z-index: 1003;
}

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

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

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

        .app-desktop .app-vscrollbar.app-scrollbar-wide .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;
    transition-delay: 0;
}

.app-desktop .app-vscrollbar-handle:hover {
    background-color: #999;
}

/*.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;
}

    .ui-panel-inner::-webkit-scrollbar {
        display: none;
        -webkit-appearance: none;
        width: 0;
    }


/*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 {
    padding-right: .25em;
    color: #999;
}

    .app-field-label: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 a.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: -1em;
}

    .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;
}

.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: 6px;
}

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

.app-listview:not(.app-listview-static) li.ui-li-divider {
    float: none !important;
    margin: 0 !important;
    -webkit-border-radius: 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 a.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;
}

/*@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 672px !important;
    }
}*/


@media screen {
    @-ms-viewport {
        width: device-width;
    }
}

.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,
.ui-checkbox label {
    border-width: 0;
    border-bottom-width: 1px;
    border-radius: 0;
    /*border-color: transparent;*/
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.ui-checkbox label,
.ui-radio label {
    border-width: 0;
    border-bottom-width: 0;
}

.ui-checkbox .ui-corner-all {
    border-radius: 0;
}

.ui-checkbox label, .ui-radio label {
    height: 22px;
}

.app-density-compact .ui-checkbox label, .app-density-compact .ui-radio label {
    height: 19px;
}


.app-density-condensed .ui-checkbox label, .app-density-condensed .ui-radio label {
    height: 17px;
}

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

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

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

.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;
}

/* 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: -6px !important;
    padding-right: 6px !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-listview.ui-listview:not(.app-listitem-tn):not(.app-listitem-xxs) li h3 .app-field-label {
    font-weight: normal;
    min-width: 13.2%;
    max-width: 13.2%;
    padding: 0 .5em 0 0;
    display: inline-block;
    text-align: right;
}*/

/*.app-onecolumnview.ui-listview li h3:first-of-type,
.app-onecolumnview.ui-listview li p:first-of-type {
    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 > a.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 > a.ui-btn-icon-notext,
        .app-bar-actions > .app-bar-controls > a.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: 6px 16px 6px 6px;
    font-size: 14px;
    cursor: pointer;
    color: #777;
    top: 50%;
}

    .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;
    }

.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;
    padding: 0 0 .5em 0;
}

.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 a {
            border-top-width: 0;
            border-bottom-width: 1px;
        }

        .app-echo .app-echo-inner ul.app-grid li a {
            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;
    -ms-user-select: none;
    -moz-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 {
    width: 100% !important;
    margin-bottom: 0;
}

.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;
    margin-top: -2px;
}

.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 1em 0 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-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 a.ui-btn.app-has-children {
    padding-right: 20px;
}

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

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

/* grey #777777 drop arrow*/
a.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 a.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 {
    font-size: 12px;
    position: absolute;
    top: 1em;
    white-space: pre-wrap;
    left: 1em;
}

    .app-action-column .app-action-column-button {
        border-radius: .3125em;
        text-transform: uppercase;
        display: inline-block;
        /*border: solid 1px #38c;*/
        border: solid 1px;
        font-weight: 600;
        padding: 5px 9px;
        margin-bottom: 9px;
        margin-right: 9px;
        /*color: #38c;*/
        height: 16px;
        line-height: 18px;
        white-space: nowrap;
        user-select: none;
    }

        .app-bar-buttons .ui-btn,
        .app-action-column .app-action-column-button.ui-btn-active,
        .app-desktop .app-action-column .app-action-column-button: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;
        }


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

.app-desktop [data-input="listbox"] .app-data-list.app-data-list-actions li:not(.app-selected):hover {
    border-width: 2px;
    padding: 5px 8px;
}


.app-action-column .app-action-column-button.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;
    }

body.app-desktop .ui-select .ui-btn:not(:hover),
body:not(.app-desktop) .ui-select .ui-btn {
    background-color: transparent !important;
}

.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: 14px !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;
    /*margin-right: -13px;*/
}

.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: 12px !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-checkbox .ui-btn, .ui-radio .ui-btn {
    font-weight: normal;
}

.app-container-scrollable {
    overflow-y: hidden;
    overflow-x: auto;
}

.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 a.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.75em;
    display: inline-block;
}

.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;
}

/*.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.app-bar-system {
    box-shadow: none !important;
}

.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;
}

/************************/
/* 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-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"] {
    margin-top: 1em;
}

[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-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-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-state="write"] [data-control].app-null,
[data-state="write"] [data-control].app-has-helper,
[data-state="write"] [data-control] .app-data-input-placeholder {
    color: #808080;
    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"] .app-control-inner::after {
        content: ' *';
        font-family: 'Times New Roman';
        /*        position: absolute;
        right: -4px;*/
    }

[data-state="write"] [data-container="collapsible"]:not([data-wrap="true"]) [data-container="row"] [data-control="label"][data-required="true"] .app-control-inner::before {
    content: '* ';
    font-family: 'Times New Roman';
}

[data-state="write"] [data-container="collapsible"]:not([data-wrap="true"]) [data-container="row"] [data-control="label"][data-required="true"] .app-control-inner::after {
    content: '';
    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="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: 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: relative !important;
    user-select: none;
    margin-left: 7px;
    z-index: 1;
}

.app-data-input-button + .app-icon.app-text-action {
    margin-left: 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;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

.app-data-input {
    -webkit-user-select: text;
    user-select: text;
    -ms-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;
}

.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;
}

    .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 #ccc;
    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 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-line;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.app-data-input-container textarea.app-data-input {
    max-width: 768px;
    height: 100%;
    box-sizing: border-box;
    white-space: pre-line;
    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="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-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: -12px;
        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;
    -webkit-user-select: none;
    -ms-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: 6px;
    margin-top: -6px;
}

    .app-desktop .app-hscrollbar2 .app-hscrollbar-handle {
        height: 6px;
    }

    .app-desktop .app-hscrollbar2.app-scrollbar-wide,
    .app-desktop .app-scrollbar-wide .app-hscrollbar2 {
        height: 9px;
    }

        .app-desktop .app-hscrollbar2.app-scrollbar-wide .app-hscrollbar-handle,
        .app-desktop .app-scrollbar-wide .app-hscrollbar2 .app-hscrollbar-handle {
            height: 9px;
        }

.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: 1em;
        cursor: pointer;
        position: relative;
    }

        [data-input] .app-control-helper ul li:first-child {
            margin-left: 0;
        }

        [data-input] .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-control-inner .app-field-object-ref,
.app-collapsible-toggle-button {
    padding: 0;
    margin: 0;
    width: 24px;
    content: ' ';
    cursor: pointer;
    position: relative;
    display: inline;
    line-height: normal;
    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-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;
}

.ui-page .app-bar-actions {
    left: 0 !important;
}

/*[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-page-modal .app-vscrollbar {
        border-right: solid 1px #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;
    -ms-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;
    -ms-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 !important;
}

.app-sidebar .ui-listview > .ui-li-static {
    padding-left: 16px;
}

.app-sidebar .app-icon {
    left: 16px !important;
}

.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-has-icon.ui-btn-icon-notext.ui-btn-active .app-icon,
.app-has-icon.ui-btn-icon-notext.ui-btn-active .app-icon::before {
    color: #000;
}*/
.app-grid-header .app-grid-header-text {
    font-weight: normal;
    display: inline;
}

.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;
}

/*.app-grid-header .ui-btn-active .app-icon,
.ui-btn-active .app-field-type-bool .app-icon {
    color: #fff;
}*/

[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: 9px;
}

.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;
    width: 100%;
    height: 99.9%;
    top: 0;
    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 {
    width: 32px;
    height: 32px;
    margin-right: -5px;
    margin-top: -14px;
}

.app-avatar {
    border-width: 0;
}

    .app-avatar::after {
        content: none;
    }

    .app-avatar .app-icon-avatar {
        margin-left: -3px;
        margin-top: -3px;
        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;
    }

    .app-avatar.app-keep-open {
        font-weight: 600;
    }

/*.app-desktop .app-bar-toolbar .app-avatar:hover .app-icon-avatar,
.app-bar-toolbar .app-avatar.app-selected .app-icon-avatar {
    border-width: 2px;
    margin-left: -4px;
    margin-top: -4px;
}*/

.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;
}

/*.app-bar-toolbar .app-has-avatar-with-picture:not(.ui-btn-active) .app-icon-avatar {
    border-color: transparent !important;
}*/


.ui-listview .app-avatar {
    padding-top: 1em !important;
    /*padding-bottom: !important;*/
}

    .ui-listview .app-avatar .app-icon-avatar {
        position: absolute;
        left: 14px;
        text-align: center;
        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 !important;
    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-menu-strip-has-title .app-menu-strip-title {
    padding-left: 16px;
}
/*.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 a.ui-btn:hover:not(.ui-btn-active) {
    background-color: transparent !important;
    color: #000;
}

.app-hosted.app-desktop .app-menu-strip ul li a.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 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;
    font-size: 30px;
    text-transform: uppercase;
    background-size: auto 100%;
    background-position: left center;
    background-repeat: no-repeat;
}

.app-acc-man .app-acc-close {
    height: 40px;
    width: 40px;
    position: absolute;
    top: 16px !important;
    right: 24px !important;
    cursor: pointer;
    display: inline-block;
    display: none;
}

    .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;
    width: 85%;
    padding: 1em 1em 1em 2em;
}

.app-min-sm .app-acc-inner {
    width: 457px;
}

.app-acc-list {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 140px;
    overflow-y: auto;
    padding-top: 20px;
    -ms-overflow-style: auto;
}

.app-acc-footer {
    position: absolute;
    left: 0;
    right: 0;
    vertical-align: bottom;
    padding: 8px 16px 16px 32px;
    bottom: 0;
    white-space: normal;
}

@media (max-height: 600px) {
    .app-acc-list {
        padding-top: 0;
    }
}

.app-acc-man ul {
    padding-left: 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;
    }

        .app-acc-man li a.app-link-disabled {
            cursor: default;
        }
/*.app-acc-man.app-acc-man-splash li a {
    padding-left: 8px;
}*/
.app-acc-man ul a i {
    width: 32px;
    height: 32px;
    line-height: 32px;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -16px !important;
    text-align: center;
}

    .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 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: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 24px;
}

@media (max-width: 578px) {

    .app-acc-inner {
        /*width: 100%;*/
        width: auto;
        left: 0;
        padding-left: 8px;
        padding-right: 8px;
    }

    .app-acc-list {
        left: 8px;
        right: 8px;
    }

    .app-acc-man .app-acc-close {
        right: 8px !important;
    }

    .app-acc-man .app-user-name {
        font-size: 16px;
    }

    .app-acc-footer {
        padding-left: 8px;
        padding-right: 8px;
    }

    .app-acc-space {
        width: 100%;
    }

    .app-acc-list {
        padding-top: 0;
    }

    .app-acc-footer {
        font-size: 12px;
    }
}

@media (min-width: 1024px) {
    .app-acc-man .app-user-name {
        font-size: 20px;
    }

    .app-acc-inner {
        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: 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';
    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;
}

a.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';
}

.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: "view_comfy";
}

.ui-icon-bullets:after {
    content: "view_list";
}

.ui-icon-cards:after {
    content: "view_module";
}

.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;
}

.app-virtual-screen, .app-virtual-screen-bar {
    background-color: #fafafa;
}

[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: 20px;
}

[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: 50%;
    width: 500px;
    margin-left: -257px;
    text-align: center;
}

.app-progress-estimate {
    font-size: 14px;
    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;
    background-color: #777;
    overflow: hidden;
}

.app-progress-indicator {
    background-color: #38c;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
}

    .app-progress-indicator.app-progress-marquee {
        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;
    -webkit-user-select: none;
    -ms-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;
    -webkit-user-select: none;
    -ms-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-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;
    -ms-user-select: none;
    -moz-user-select: none; /* required for FireFox to allow dbl-click without causing HTML selection */
}
/*.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-bar-footer.app-bar-footer-flat .app-bar-hscrollbar.app-scrollbar-wide {
                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-bar-footer.app-bar-footer-flat .app-bar-hscrollbar.app-scrollbar-wide::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-container="collapsible"] + [data-container="collapsible"][data-header-text="none"] {
    margin-top: -1px;
}

[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-root.ui-page {
    display: block !important;
}

.app-virtual-screen-bar.app-left {
    border-right: 1px solid #e3e3e4;
}

.app-virtual-screen-bar.app-top {
    border-bottom: 1px solid #e3e3e4;
}

.app-virtual-screen-bar.app-right {
    border-left: 1px solid #e3e3e4;
}

.app-virtual-screen-bar.app-bottom {
    border-top: 1px solid #e3e3e4;
}

.app-native .ui-panel-inner {
    border-top: 1px solid;
}

.app-native .ui-popup .ui-panel-inner {
    border: 0;
}

#app-banner {
    position: absolute;
    overflow: hidden;
    z-index: 20001;
    padding: 0;
    box-sizing: border-box;
}
/************************************************************
    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: 39px;
    top: 14px;
    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: 4px;
}

.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-top: -.15em;
*/
        top: -.075em !important;
        margin-top: -.4em !important;
        margin-bottom: -.4em !important;
        margin-right: .0625em;
    }

.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.app-scrollbar-modern:not(.app-scrollbar-hover):not(.app-scrollbar-contracting) {
    background-color: transparent !important;
    border-color: transparent !important;
}

    .app-desktop .app-vscrollbar.app-scrollbar-modern:not(.app-scrollbar-hover):not(.app-scrollbar-contracting) .app-vscrollbar-handle {
        width: 3px !important;
        right: 2px !important;
        left: auto;
        background-color: #777;
    }

.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 -1px 0 0;
    border-left: solid 1px;
    color: transparent;
    animation: 1s blink-cursor step-end infinite;
    width: 0px;
    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;
}

.app-chart-list {
    /*margin:0.5em;*/
}

    .app-chart-list .app-promo-filler {
        height: 89px;
    }

    .app-chart-list .ui-listview {
        margin: 0;
        margin-top: -1px;
    }

.app-chart {
    float: left;
    width: 100%;
    position: relative;
    display: inline-block;
}

    .app-chart .app-chart-inner {
        display: block;
        border: solid 1px #ccc;
        padding: 0;
        padding-left: 3px;
        background-color: #fff;
        margin-top: -1px;
        margin-left: -1px;
    }

    .app-chart.app-chart-has-data .app-chart-inner {
        padding-left: 0;
    }


.app-min-sm .app-chart {
    width: 50%;
}

    .app-min-sm .app-chart.app-chart-medium,
    .app-min-sm .app-chart.app-chart-large {
        width: 100%;
    }


.app-min-md .app-chart {
    width: 50%;
}

    .app-min-md .app-chart.app-chart-medium,
    .app-min-md .app-chart.app-chart-large {
        width: 100%;
    }

.app-min-lg .app-chart {
    width: 33.333%;
}

    .app-min-lg .app-chart.app-chart-medium {
        width: 66.666%;
    }

    .app-min-lg .app-chart.app-chart-large {
        width: 100%;
    }

.app-chart .ui-btn {
    border-width: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: auto;
    left: auto;
    right: 1px;
    width: 30px;
    height: 30px;
}

.app-desktop .app-chart-list {
    padding-right: 6px;
}

.app-chart .ui-btn:not(.ui-btn-active):not(:hover) {
    background-color: transparent !important;
}

.app-chart .app-btn-more {
    width: 30px;
    height: 30px;
    top: 0;
    left: 0;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    cursor: pointer;
}

.app-chart .app-chart-mini {
    height: 40px;
    width: 60px;
    margin-top: 12px;
    margin-left: 12px;
    float: left;
    cursor: pointer;
}

.app-chart .app-chart-headerbar {
    color: #000;
    height: 52px;
    padding-bottom: 0.25em;
    width: 100%;
}

.app-chart.app-chart-has-data .app-chart-header {
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    margin-left: 1em;
    margin-right: 2.5em;
    top: 1em;
}

.app-echo .app-echo-inner .app-chart-header {
    white-space: normal;
}

.app-chart-medium.app-chart-has-data .app-chart-header {
    font-size: 14px;
}

.app-chart-large.app-chart-has-data .app-chart-header {
    font-size: 16px;
}

.app-chart .app-chart-data {
    position: absolute;
    overflow: auto;
    height: 80%;
    width: 100%;
    background-color: #fff;
}

    .app-chart .app-chart-data table {
        border-collapse: collapse;
        padding: 1em;
        padding-top: 0;
        margin: 1em;
        margin-top: 0;
    }

        .app-chart .app-chart-data table th,
        .app-chart .app-chart-data table td {
            color: #333;
            border: solid 1px #ccc;
            padding: 6px;
            font-size: 14px;
        }


            .app-chart .app-chart-data table th,
            .app-chart .app-chart-data table td:not(:first-child) {
                text-align: center;
            }

.app-density-compact .app-chart .app-chart-data table th,
.app-density-compact .app-chart .app-chart-data table td {
    font-size: 12px;
}

/*.app-density-condensed .app-chart.app-chart-has-data .app-chart-header {
    font-size: 12px;
}*/
.app-density-condensed .app-chart .app-chart-data table th,
.app-density-condensed .app-chart .app-chart-data table td {
    font-size: 10px;
}
/*.app-density-condensed .app-chart.app-chart-has-data .app-chart-header {
    font-size: 12px;
}*/

.app-chart .app-chart-data table th:first-of-type {
    white-space: nowrap;
}

.app-chart .app-chart-data table td {
    padding: 3px;
}

/*******************/
/*Calendar Styling */
/*******************/

.app-presenter[data-presenter="calendar"] {
    position: relative;
}

.app-calendar {
    line-height: normal;
    /*margin-bottom: -.5em;*/
}

.app-echo .app-calendar {
    background-color: transparent !important;
}

.app-calendar-dayview .app-event,
.app-calendar-weekview .app-event,
.app-calendar-month .app-event {
    touch-action: none;
}

.app-calendar-dayview,
.app-calendar-weekview {
    transition: margin-left 0 linear;
}

/* Year Styling */
.app-calendar-year-header {
    width: 100%;
}

.app-calendar-year h1 {
    border-bottom: 1px solid #ccc;
    font-weight: 200;
    font-size: 45px;
    margin: 0 0 24px 0;
    padding: 0 0 8px 0;
    transition: color ease 0.3s;
    text-align: center;
}

body .app-presenter[data-presenter="calendar"] .app-calendar-yearview .app-calendar-year h1.app-in-header {
    color: transparent !important;
}

.app-calendar-year:not(.data-loaded) h1 {
    color: #ccc;
}

.app-calendar-yearview .app-calendar-month {
    display: block;
    float: left;
    box-sizing: border-box;
    width: 33.33%;
    padding: 0 0.5em 2em 0;
}

.app-calendar-yearview .app-calendar-month-header {
    /*width: 10em;*/
    border: none;
    padding: 0 5px;
    margin: 0 auto;
    font-weight: 300;
    font-size: 24px;
    text-align: left;
    overflow: hidden;
}

    .app-calendar-yearview .app-calendar-month-header:not(.ui-btn-active) {
        background-color: transparent !important;
        /*color: #38c;*/
    }

/*.app-density-compact .app-calendar-yearview .app-calendar-month-header {
    width: 200px;
}
*/
.app-density-condensed .app-calendar-yearview .app-calendar-month-header {
    width: 170px;
}

.app-calendar .app-calendar-yearview .app-calendar-month .app-calendar-month-title,
.app-calendar .app-calendar-yearview .app-calendar-month table {
    box-sizing: content-box;
    width: 15em;
    margin-left: auto;
    margin-right: auto;
}


.app-calendar-yearview .app-calendar-month th {
    font-weight: normal;
}

.app-calendar-yearview .app-calendar-month td {
    min-height: 1px;
    text-align: center;
    vertical-align: middle;
    width: 1.5em;
    height: 2em;
    padding: 0;
    cursor: pointer;
}

    .app-calendar-yearview .app-calendar-month td.app-has-data:not(.app-current-day):not(.ui-btn-active) {
        /*        background-color: #e9e9e9;*/
        transition: background-color ease 0.3s;
    }

    .app-calendar-yearview .app-calendar-month td.ui-btn-active {
        background-color: #38c;
        border-radius: 0;
        color: #fff;
    }

.app-day-header .app-current-day {
    font-weight: 600;
}

.app-day-header .ui-btn:not(.ui-btn-active) .app-current-day {
    color: #38c;
}

.app-calendar-plugin span.app-current-day,
.app-calendar-monthview .app-current-day,
.app-calendar-yearview .app-current-day,
.app-week-header .app-current-day,
.app-day-header .app-current-day.visible-day {
    background-color: #38c;
    border-radius: 50%;
    color: #fff !important;
    font-weight: 600;
}

.visible-day {
    background-color: #000;
    border-radius: 50%;
    color: #fff !important;
    font-weight: 600;
}

.app-week-header li > a > div,
.app-day-header li > a > div {
    display: inline;
    margin-left: -2px;
    height: 1.5em;
    line-height: 1.5em;
    vertical-align: middle;
    width: 1.5em;
    display: inline-block;
    padding: 2px;
}

.app-calendar-monthview .app-calendar-month {
    height: 100%;
}

.app-calendar-monthview .app-calendar-month-header {
    margin: 0.25em 0.5em;
    text-transform: uppercase;
    font-weight: 300;
}

.app-calendar .app-calendar-month-header {
    font-size: 24px;
    /*color: #38c;*/
    transition: color ease 0.2s;
}

.app-calendar-agenda-list .app-calendar-month-header h1 {
    font-size: 24px;
    padding: 4px;
}

.app-density-compact .app-wrapper .app-calendar .app-calendar-month-header,
.app-density-compact .app-wrapper .app-calendar-agenda-list .app-calendar-month-header h1 {
    font-size: 22px;
}

.app-density-condensed .app-wrapper .app-calendar .app-calendar-month-header,
.app-density-condensed .app-wrapper .app-calendar-agenda-list .app-calendar-month-header h1 {
    font-size: 20px;
}

.app-calendar-monthview .app-calendar-month:not(.data-loaded) .app-calendar-month-header {
    color: #ccc;
}

.app-calendar-monthview .app-calendar-month-header.app-in-header {
    color: transparent !important;
}

.app-calendar-monthview .app-calendar-month table {
    width: 100%;
    border-spacing: 0;
    background-color: #fff;
    table-layout: fixed;
}

    .app-calendar-monthview .app-calendar-month table td {
        border: solid 1px #e5e5e5;
        border-top-width: 0;
        border-left-width: 0;
        position: relative;
        width: 14.2%;
        /*overflow: hidden;*/
        vertical-align: top;
    }

        .app-calendar-monthview .app-calendar-month table td ul {
            margin: 0;
            padding: .5em 0 0 0;
            list-style: none;
            font-size: 8.5px;
        }

.app-calendar-dayview .app-event {
    font-size: 10px;
}

.app-calendar-weekview .app-event {
    font-size: 8.5px;
}

.app-event .app-event-time-long {
    font-weight: normal;
}

.app-event .app-event-handle {
    position: absolute;
    height: 5px;
    bottom: 0;
    right: 0;
    left: 0;
    transition: opacity ease 0.2s;
    opacity: 0;
    cursor: row-resize;
}

body:not(.app-show-system-buttons-on-hover) .app-event .app-event-handle {
    opacity: 1;
}

body:not(.app-desktop) .app-event .app-event-handle {
    padding-top: 12px;
    padding-bottom: 12px;
    bottom: -12px;
}

.app-event:hover .app-event-handle,
.app-event-preview .app-event-handle {
    transition: opacity ease 0.2s;
    opacity: 1;
}

.app-event .app-event-handle::after {
    content: ' ';
    display: block;
    width: 20px;
    height: 5px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center center;
    margin: -2px auto 0;
}



.app-calendar-monthview .app-calendar-month table td li.app-calendar-month-more:not(.ui-btn-active) {
    color: #a2a2a2;
}

.app-calendar-monthview .app-calendar-month table td.app-calendar-weekend {
    background-color: #fcfcfc;
}

    .app-calendar-monthview .app-calendar-month table td.app-calendar-weekend > a:not(.ui-btn-active) {
        color: #a2a2a2;
    }

.app-calendar-monthview .app-calendar-month table td > a {
    position: absolute;
    right: 0;
    top: 0;
    padding: 4px 4px 0 4px !important;
    margin: 0;
    font-weight: normal;
    line-height: 1;
    border-color: transparent !important;
}

    .app-calendar-monthview .app-calendar-month table td > a.ui-btn-active {
        padding-bottom: 4px !important;
    }

.app-calendar-yearview .app-calendar-month table td > a {
    display: inline-block;
    padding: 0;
    margin: 0;
    font-weight: normal;
    line-height: 1;
    border-width: 0 !important;
}

    .app-calendar-yearview .app-calendar-month table td > a:not(.ui-btn-active),
    .app-calendar-monthview .app-calendar-month table td > a:not(.ui-btn-active) {
        background-color: transparent !important;
    }

    .app-calendar-yearview .app-calendar-month table td > a > span {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        line-height: 1.5em;
    }

.app-calendar-monthview .app-calendar-month table td > a > span {
    display: inline-block;
    width: 1.5em;
    text-align: center;
    vertical-align: middle;
    height: 1.5em;
    line-height: 1.5em;
}

.app-calendar-monthview .app-calendar-month table {
    border-top: solid 1px #e5e5e5;
}

.app-calendar-weekview,
.app-calendar-dayview {
    height: 1060px;
    overflow: hidden;
}

.app-calendar-time {
    background-color: #fff;
    left: 0;
    width: 60px;
    font-size: 12px;
    padding-right: 0.5em;
    height: 100%;
    position: relative;
    z-index: 2000;
    margin-top: -2px;
}

.app-theme-light .app-calendar-time,
.app-theme-modern .app-calendar-time {
    background-color: #f9f9f9;
}

.app-calendar-weekview .app-calendar-time {
    position: absolute;
}

.app-calendar-dayview .app-calendar-time {
    float: left;
}

.app-calendar-time ul {
    list-style: none;
    padding-left: 0;
    height: 100%;
    margin-top: 16px;
}

    .app-calendar-time ul li {
        display: block;
        height: 4%;
    }

        .app-calendar-time ul li span {
            padding-left: 1em;
            float: right;
        }


.app-calendar-time .app-current-time {
    position: absolute;
    top: 0;
    margin-top: 16px;
    left: 0;
    width: 60px;
    text-align: right;
    color: transparent;
}

.app-has-time-prompt .app-current-time {
    color: #000;
}

.app-has-current-day .app-calendar-time li .time-hidden,
.app-has-time-prompt .app-calendar-time li .time-hidden {
    color: transparent;
}

.app-calendar-week-grid {
    padding-left: 66px;
    height: 100%;
}

.app-calendar-day-grid {
    min-width: 30000px;
    height: 100%;
    overflow: hidden;
}

    .app-calendar-day,
    .app-calendar-day-grid .app-calendar-load-at-top {
        display: inline-block;
        float: left;
        height: 100%;
    }

    .app-calendar-day-grid .app-calendar-load-at-top {
        /*position:relative;*/
    }

    .app-calendar-day-grid .dv-load-at-top {
        position: fixed;
        top: 50%;
    }

.current-time-line {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    margin-top: 22px;
    margin-bottom: -23px;
    right: 0;
}

.app-has-current-day .current-time-line,
.app-calendar-agenda-list .current-time-line {
    border-top: solid 1px;
}

.app-calendar-agendaview .current-time-line {
    right: 12px;
}

.app-time-line-container {
    display: block;
    vertical-align: middle;
    height: 3em;
    line-height: 2em;
    padding-top: 1em;
}

.app-density-condensed .app-time-line-container {
    padding-top: 1.6em;
}

.app-density-compact .app-time-line-container {
    padding-top: 1.3em;
}


.app-calendar-agenda-list li.app-time-line-container > .app-event-time {
    color: #38c;
    padding: 0;
    margin: 0;
    position: static;
    display: inline-block;
    vertical-align: baseline;
    line-height: 2em;
}

.app-calendar-agenda-list li.app-time-line-container > .app-time-line-container:first-child {
    margin-top: 1em;
    height: 2em;
}

.app-calendar-agenda-list .app-event {
    font-weight: 600;
}

    .app-calendar-agenda-list .app-event .app-event-time {
        font-weight: normal;
    }


.app-calendar-agenda-list .current-time-line {
    border-radius: 0 !important;
    top: 2em;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 1px;
    margin-top: 0 !important;
}

.app-density-condensed .app-calendar-agenda-list .app-has-current-day .current-time-line {
    top: 2.5em;
}

.app-density-compact .app-calendar-agenda-list .app-has-current-day .current-time-line {
    top: 2.1em;
}

.app-calendar-weekview .app-calendar-time .current-time-line {
    margin-top: 24px !important;
}


.app-has-time-prompt .current-time-line {
    border-top: solid 1px #000;
}


.app-calendar-weekview .current-time-line {
    position: absolute;
    width: 100%;
}

.current-time-line .dot {
    position: absolute;
    content: "";
    margin-left: 70px;
    margin-top: -0.25em;
    border-radius: 0.5em;
    height: 0.5em;
    width: 0.5em !important;
}

.app-has-time-prompt .current-time-line .dot {
    background-color: #000;
}

.app-calendar-day {
    position: relative;
}

    .app-calendar-day > div:not(.app-clear-fix):not(.app-calendar-time) {
        height: 4%;
        overflow-x: visible;
        white-space: nowrap;
        /*margin-left: -0.5em;*/
    }

.app-calendar-weekview .app-calendar-day > div:nth-of-type(1),
.app-calendar-dayview .app-calendar-day > div:nth-of-type(2) {
    height: 22px;
    margin-top: -1px;
}

.app-calendar-day > div:not(.app-calendar-time) {
    border-bottom: 1px solid #ccc;
    margin-bottom: -1px;
}


.app-calendar-week-grid .app-calendar-day > div {
    border-right: solid 1px #ccc;
    padding-right: 1px;
}

.app-calendar-week-grid .app-calendar-day.endofweek > div {
    border-right-width: 2px;
    padding-right: 0;
}

.app-calendar-day > div:last-of-type > div {
    border-bottom-width: 0;
}

.app-calendar-day ul.app-calendar-eventlist {
    padding: 0;
    margin: 0;
}

ul.app-calendar-eventlist li {
    box-sizing: border-box;
    position: absolute;
    list-style: none;
    padding: 0.5em;
    border-radius: 2px;
    top: 22px;
    left: 0;
    width: 90%;
}

.app-calendar-dayview ul.app-calendar-eventlist li.app-event {
    left: 70px;
}

.app-calendar-weekview ul.app-calendar-eventlist li.app-event {
    left: 4px;
}

.app-calendar-dayview ul.app-calendar-eventlist li.app-event,
.app-calendar-weekview ul.app-calendar-eventlist li.app-event {
    box-shadow: 0 0 3px #fff;
}

    .app-calendar-dayview ul.app-calendar-eventlist li.app-event.app-calendar-selected {
        outline-offset: -3px;
    }

.app-calendar-load-at-top,
.app-calendar-load-at-bottom {
    padding-top: 1em;
    padding-bottom: 1em;
}

    .app-calendar-load-at-top a,
    .app-calendar-load-at-bottom a {
        margin-left: auto;
        margin-right: auto;
        background-color: transparent !important;
        border-width: 0;
        font-weight: normal;
        padding-top: 8px;
        padding-bottom: 8px;
    }

.app-bar-header .app-bar-calendar {
    overflow: hidden;
}

    .app-bar-header .app-bar-calendar .app-tabs {
        display: inline-block;
        padding: 0;
        margin-left: 15%;
        margin-right: 15%;
        min-width: 70%;
        width: 70%;
    }

        .app-bar-header .app-bar-calendar .app-tabs .ui-btn {
            margin-top: 0;
            margin-bottom: 0;
        }

.app-calendar-badge {
    cursor: default;
    display: inline-block;
    left: 12px;
    position: absolute;
    font-weight: normal;
    text-transform: uppercase;
    /*font-size: 18px !important;*/
    font-size: 14px !important;
    line-height: 1;
    margin: 0;
    border-width: 0 !important;
    padding: 8px 4px !important;
    /*box-shadow: none !important;*/
}

    .app-calendar-badge.app-has-droparrow {
        padding-right: 24px !important;
    }

.app-density-condensed .app-calendar-badge {
    font-size: 12px !important;
}

.app-calendar-badge.app-has-droparrow {
    cursor: pointer;
}

.app-calendar-badge b {
    font-weight: 600;
}

.app-density-compact .app-calendar-badge {
    /*margin-top: 12px;*/
}

.app-density-condensed .app-calendar-badge {
    /*margin-top: 9px;*/
}

.app-bar-calendar .app-calendar-badge::after {
    position: absolute;
    top: 50%;
    margin-top: -12px;
}

.app-calendar-today,
.app-calendar-next,
.app-calendar-prev {
    position: absolute;
    right: 98px;
    font-weight: normal !important;
}

.app-bar-calendar .app-calendar-controls {
    position: relative;
    height: 46px;
    line-height: 46px;
    vertical-align: middle;
    /*background-color: yellow;*/
    font-size: 0;
}

    .app-bar-calendar .app-calendar-controls > .ui-btn,
    .app-bar-calendar .app-calendar-badge {
        top: 50% !important;
        margin-top: -1em !important;
        margin-bottom: 0 !important;
    }


.app-calendar-next {
    right: 0.56em;
}

.app-calendar-prev {
    right: 53px;
}



.app-bar-calendar .app-month-header,
.app-bar-calendar .app-week-header,
.app-bar-calendar .app-day-header {
    clear: right;
    margin: 0;
    padding: 4px 0;
}

    .app-bar-calendar .app-month-header ul,
    .app-bar-calendar .app-week-header ul,
    .app-bar-calendar .app-day-header ul {
        padding-left: 0;
        margin-top: 0.25em;
    }

    .app-bar-calendar .app-week-header ul,
    .app-bar-calendar .app-day-header ul {
        white-space: nowrap;
        width: 30000px;
    }


.app-desktop .app-bar-calendar .app-month-header ul {
    margin-right: 16px;
}


.app-bar-calendar .app-month-header li,
.app-bar-calendar .app-week-header li,
.app-bar-calendar .app-day-header li {
    list-style: none;
    font-weight: normal;
    float: left;
}

.app-bar-calendar .app-month-header li {
    text-align: right;
    width: 14.28%;
    padding-bottom: .2em;
}

.app-bar-calendar .app-week-header li,
.app-bar-calendar .app-day-header li {
    display: inline;
    text-align: center;
    width: 200px;
    padding: 0 2px 0.2em 0;
    border-right: none;
}

    .app-bar-calendar .app-week-header li a,
    .app-bar-calendar .app-day-header li a {
        border: none;
        padding: 4px 0;
        margin: -4px 0;
        font-weight: normal;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

.app-density-condensed .app-bar-calendar .app-calendar-header li,
.app-density-condensed .app-bar-calendar .app-calendar-header li a {
    font-size: 8.5pt !important;
}


.app-density-compact .app-bar-calendar .app-calendar-header li,
.app-density-comfortable .app-bar-calendar .app-calendar-header li,
.app-density-compact .app-bar-calendar .app-calendar-header li a,
.app-density-comfortable .app-bar-calendar .app-calendar-header li a {
    font-size: 14px !important;
}

body.app-theme-light:not(.app-desktop) .app-week-header li a.ui-btn:hover:not(.ui-btn-active),
body.app-theme-light:not(.app-desktop) .app-day-header li a.ui-btn:hover:not(.ui-btn-active),
.app-bar-calendar .app-week-header li a:not(.ui-btn-active),
.app-bar-calendar .app-day-header li a:not(.ui-btn-active) {
    background-color: transparent !important;
}

.app-bar-calendar .app-week-header ul {
    padding-left: 65px;
}

.app-bar-calendar .app-week-header li.last-day-of-week {
    padding-right: 0;
    border-right: 1px solid #ccc;
}

.app-week-header li.first-day-of-week a:not(.ui-btn-active),
.app-week-header li.last-day-of-week a:not(.ui-btn-active),
.app-day-header li.first-day-of-week a:not(.ui-btn-active),
.app-day-header li.last-day-of-week a:not(.ui-btn-active) {
    color: #777;
}

.app-week-header .ui-btn span,
.app-day-header .ui-btn span {
    vertical-align: middle;
}


.app-week-header .ui-btn div,
.app-day-header .ui-btn div {
    display: inline-block;
}

.letter-day,
.abbr-day,
.full-day {
    display: none;
}

.ui-page:not(.app-min-xs) .letter-day,
.ui-page.app-min-xs:not(.app-min-lg) .abbr-day,
.ui-page.app-min-lg .full-day {
    display: inline;
}

.app-bar-calendar .app-month-header li span {
    margin-right: 0.5em;
}

.app-bar-calendar .app-month-header li.app-calendar-weekend {
    color: #a2a2a2;
}

.app-bar-footer .app-bar-calendar-footer {
    padding: 0 1em;
    font-size: 12px;
    font-weight: normal;
}

.app-calendar-weekview .app-calendar-week-grid > div:not(.app-calendar-time) > div,
.app-bar-calendar .app-week-header li,
.app-bar-calendar .app-day-header li {
    width: 300px;
}


.app-bar-calendar-footer .app-scroll-outer {
    overflow-x: auto;
    -ms-overflow-style: scrollbar;
    margin-left: -1em;
    margin-right: -1em;
}

.app-bar-calendar-footer .app-scroll-inner {
    height: 1px;
}

/* Agenda styling*/
.app-calendar-agenda-list {
    list-style: none;
    margin-left: 0;
    padding: 0;
    width: 100% !important;
}

    .app-calendar-agenda-list > li {
        clear: both;
        padding-bottom: 1em;
    }

        .app-calendar-agenda-list > li:last-of-type {
            border-bottom-width: 0;
        }

        .app-calendar-agenda-list > li.app-has-current-day h2:not(.ui-btn-active) > span {
            color: #38c;
        }

        .app-calendar-agenda-list > li.app-has-current-day .current-time-line {
            width: auto;
            margin-bottom: 0;
            margin-right: 0;
            padding: 1em 0;
        }

    .app-calendar-agenda-list .current-time-line .dot {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 0;
    }

    .app-calendar-agenda-list h2 {
        position: absolute;
        font-size: 18px !important;
        font-weight: 600;
        vertical-align: top;
        padding: 12px 12px 12px 16px;
        margin: 11px 0 0;
        box-sizing: border-box;
        z-index: 1;
        border: none;
    }

.app-echo .app-calendar-agenda-list h2 {
    padding-left: 0;
}

.app-echo .app-calendar-agenda-list h2 {
    cursor: default;
}

.app-echo .dv-action-see-all {
    line-height: normal;
}

.app-density-compact .app-calendar-agenda-list h2 {
    margin-top: 10px;
}

.app-density-condensed .app-calendar-agenda-list h2 {
    margin-top: 9px;
}

.app-calendar-agenda-list h2:not(.ui-btn-active) {
    background-color: transparent !important;
}

.app-calendar-agenda-list .app-calendar-month-header {
    font-size: 1em !important;
    margin-left: 17em;
    border: none;
    padding: 0;
    margin-top: 2em;
    text-align: left;
}

    .app-calendar-agenda-list .app-calendar-month-header:not(.ui-btn-active) {
        background-color: transparent !important;
        /*color: #38c;*/
    }

    .app-calendar-agenda-list .app-calendar-month-header h1 {
        text-transform: uppercase;
        font-weight: 300;
        margin: 0;
    }

.app-echo .app-calendar-agenda-list .app-calendar-month-header {
    margin-top: 0;
}

.app-calendar-agenda-list h2 .app-calendar-daynumbig {
    display: none;
}

.app-calendar-agenda-list .app-calendar-day {
    padding-left: 11em;
    width: 100%;
    box-sizing: border-box;
}

    .app-calendar-agenda-list .app-calendar-day ul {
        list-style: none;
        padding: 0;
        width: 100% !important;
        min-height: 3em;
    }

    .app-calendar-agenda-list .app-calendar-day li {
        position: relative;
    }

        .app-calendar-agenda-list .app-calendar-day li > div {
            margin: 12px;
            margin-left: 6em;
            padding: 12px;
            border-radius: 2px;
            white-space: normal !important;
        }

.app-calendar .app-event:not(.app-event-has-end-time) {
    white-space: nowrap;
}


.app-calendar-dayview .app-event:not(.app-event-has-end-time) .app-event-time-long,
.app-calendar-weekview .app-event:not(.app-event-has-end-time) .app-event-time-long,
.app-calendar-dayview .app-event.app-event-has-end-time .app-event-time,
.app-calendar-weekview .app-event.app-event-has-end-time .app-event-time {
    display: none;
}

.app-calendar .app-event.app-event-preview,
.app-calendar .app-event.app-event-new {
    opacity: 0.8;
    z-index: 1000 !important;
    color: #000;
    cursor: move;
}

.app-calendar-agenda-list li > .app-event-time {
    margin-top: 12px;
    position: absolute;
    vertical-align: middle;
}

.app-calendar-agenda-list .app-calendar-day li > div .app-event-time {
    display: none;
}

.app-calendar-has-end-time .app-calendar-agenda-list .app-calendar-day li > div {
    margin-left: 10em;
}

.app-calendar-has-end-time .app-calendar-agenda-list .app-calendar-month-header {
    margin-left: 21em;
}


.app-blink {
    background-color: #38c !important;
    color: #fff !important;
}


.app-calendar .app-calendar-time,
.app-calendar .app-event,
.app-calendar .app-calendar-month-more {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.app-calendar .app-event,
.app-calendar .app-calendar-month-more {
    cursor: pointer;
    overflow: hidden;
    color: #fff;
    padding: .25em;
}


    .app-calendar .app-event.app-event-color-4,
    .app-calendar .app-event.app-event-color-5,
    .app-calendar .app-event.app-event-color-7,
    .app-calendar .app-event.app-event-color-10,
    .app-calendar .app-event.app-event-color-11,
    .app-calendar .app-event.app-event-color-14,
    .app-calendar .app-event.app-event-color-15,
    .app-calendar .app-event.app-event-color-17,
    .app-calendar .app-event.app-event-color-19,
    .app-calendar .app-event.app-event-color-22,
    .app-calendar .app-event.app-event-color-23 {
        color: #000;
    }

    .app-calendar .app-event .app-event-time {
        font-weight: normal;
        text-transform: lowercase;
        margin-right: -1px;
    }

.app-calendar-dayview .app-event .app-event-data,
.app-calendar-weekview .app-event .app-event-data {
    overflow: hidden;
    height: 100%;
}

.app-calendar-dayview .app-event,
.app-calendar-weekview .app-event {
    overflow: visible;
}


.app-calendar-dayview .app-event,
.app-calendar-weekview .app-event {
    /*margin-top: 22px;*/
    /*margin-left: 3px;*/
    padding: .5em;
}

.app-selected.ui-btn .app-event,
.app-calendar-selected {
    outline: 3px solid #000;
    border-radius: 0 !important;
    z-index: 1000 !important;
}


.app-event.ui-btn-active,
.app-calendar-month-more.ui-btn-active {
    background-color: #38c;
    color: #fff;
}

.app-event {
    opacity: 1;
    transition: opacity ease 0.5s;
}

.app-event-filter .app-event {
    opacity: 0.2;
    transition: opacity ease 0.5s;
}

.app-event-more {
    font-size: 0.8em !important;
    text-overflow: clip !important;
}

.app-event-more,
.app-event-new {
    background-color: #e9e9e9;
}

    .app-event-more.app-selected {
        z-index: 1000 !important;
    }

.app-event-color-0 {
    background-color: #4986e7;
}

.app-event-filter-color-0 .app-event-color-0 {
    opacity: 1;
}

.app-event-color-1 {
    background-color: #f83a22;
}

.app-event-filter-color-1 .app-event-color-1 {
    opacity: 1;
}

.app-event-color-2 {
    background-color: #16a765;
}

.app-event-filter-color-2 .app-event-color-2 {
    opacity: 1;
}

.app-event-color-3 {
    background-color: #a47ae2;
}

.app-event-filter-color-3 .app-event-color-3 {
    opacity: 1;
}

.app-event-color-4 {
    background-color: #ffad46;
}

.app-event-filter-color-4 .app-event-color-4 {
    opacity: 1;
}

.app-event-color-5 {
    background-color: #9fc6e7;
}

.app-event-filter-color-5 .app-event-color-5 {
    opacity: 1;
}

.app-event-color-6 {
    background-color: #ac725e;
}

.app-event-filter-color-6 .app-event-color-6 {
    opacity: 1;
}

.app-event-color-7 {
    background-color: #42d692;
}

.app-event-filter-color-7 .app-event-color-7 {
    opacity: 1;
}

.app-event-color-8 {
    background-color: #cd74e6;
}

.app-event-filter-color-8 .app-event-color-8 {
    opacity: 1;
}

.app-event-color-9 {
    background-color: #ff7537;
}

.app-event-filter-color-9 .app-event-color-9 {
    opacity: 1;
}

.app-event-color-10 {
    background-color: #9fe1e7;
}

.app-event-filter-color-10 .app-event-color-10 {
    opacity: 1;
}

.app-event-color-11 {
    background-color: #f691b2;
}

.app-event-filter-color-11 .app-event-color-11 {
    opacity: 1;
}

.app-event-color-12 {
    background-color: #7bd148;
}

.app-event-filter-color-12 .app-event-color-12 {
    opacity: 1;
}

.app-event-color-13 {
    background-color: #9a9cff;
}

.app-event-filter-color-13 .app-event-color-13 {
    opacity: 1;
}

.app-event-color-14 {
    background-color: #c2c2c2;
}

.app-event-filter-color-14 .app-event-color-14 {
    opacity: 1;
}

.app-event-color-15 {
    background-color: #92e1c0;
}

.app-event-filter-color-15 .app-event-color-15 {
    opacity: 1;
}

.app-event-color-16 {
    background-color: #d06b64;
}

.app-event-filter-color-16 .app-event-color-16 {
    opacity: 1;
}

.app-event-color-17 {
    background-color: #b3dc6c;
}

.app-event-filter-color-17 .app-event-color-17 {
    opacity: 1;
}

.app-event-color-18 {
    background-color: #b99aff;
}

.app-event-filter-color-18 .app-event-color-18 {
    opacity: 1;
}

.app-event-color-19 {
    background-color: #fbe983;
}

.app-event-filter-color-19 .app-event-color-19 {
    opacity: 1;
}

.app-event-color-20 {
    background-color: #cca6ac;
}

.app-event-filter-color-20 .app-event-color-20 {
    opacity: 1;
}

.app-event-color-21 {
    background-color: #fa573c;
}

.app-event-filter-color-21 .app-event-color-21 {
    opacity: 1;
}

.app-event-color-22 {
    background-color: #cabdbf;
}

.app-event-filter-color-22 .app-event-color-22 {
    opacity: 1;
}

.app-event-color-23 {
    background-color: #fad165;
}

.app-event-filter-color-23 .app-event-color-23 {
    opacity: 1;
}

.app-scale {
    transition: opacity 200ms ease, transform 200ms ease;
    transform-origin: 50% 50%;
}

/* Calendar Sidebar Plugin */

.app-calendar-plugin {
    margin: -1em -1em 1em -1em;
    padding: 0.5em 0;
    border-bottom: solid 1px #ddd;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    overflow: hidden;
}

    .app-calendar-plugin h1 {
        margin: 0;
        font-size: 1em;
    }

    .app-calendar-plugin table {
        width: 100%;
        border-collapse: collapse;
    }

        .app-calendar-plugin table th {
            font-weight: normal;
            text-transform: none;
            font-size: 14px;
        }

        .app-calendar-plugin table td {
            width: 14.2%;
            height: 1.7em;
            line-height: 1.7em;
            cursor: pointer;
            text-align: center;
        }

            .app-calendar-plugin table td.app-has-data {
                font-weight: 600;
            }

        .app-calendar-plugin table tr:not(.app-week-hidden) td.app-day-hidden {
            font-size: 0 !important;
        }

        .app-calendar-plugin table tr.app-week-hidden td {
            visibility: hidden;
        }

        .app-calendar-plugin table tr.app-selected,
        .app-calendar-plugin table td.app-selected {
            background-color: rgba(168,233,254,0.4);
        }


        .app-calendar-plugin table tr.ui-btn-active,
        .app-calendar-plugin table tr.ui-btn-active td,
        .app-calendar-plugin table td.ui-btn-active {
            background-color: #38c;
        }

            .app-calendar-plugin table tr.ui-btn-active td,
            .app-calendar-plugin table td.ui-btn-active,
            .app-calendar-plugin table td.ui-btn-active.app-selected {
                color: #fff !important;
            }

.app-density-condensed .app-calendar-plugin table th,
.app-density-condensed .app-calendar-plugin table td,
.app-density-condensed .app-calendar-plugin ol li {
    font-size: 12px;
}


.app-font-tiny.app-density-condensed .app-calendar-plugin table th,
.app-font-tiny.app-density-condensed .app-calendar-plugin table td,
.app-font-tiny.app-density-condensed .app-calendar-plugin ol li {
    font-size: 8.5pt;
}

.app-calendar-plugin .ui-btn {
    font-weight: normal;
}

    .app-calendar-plugin .ui-btn.ui-btn-icon-notext {
        margin: -11px 0 0;
        padding: 0;
        display: inline-block;
        position: absolute;
        top: 50%;
        margin-top: -11px;
        height: 22px;
        left: 0.25em;
        border-width: 0 !important;
    }

        .app-calendar-plugin .ui-btn.ui-btn-icon-notext::after {
            /*font-size: 12px !important;*/
            top: 50%;
            margin-top: -0.5em;
            height: 1em;
            line-height: 1;
        }

        .app-calendar-plugin .ui-btn.ui-btn-icon-notext:not(.ui-btn-active) {
            background-color: transparent !important;
        }

        .app-calendar-plugin .ui-btn.ui-btn-icon-notext.app-calendar-plugin-loadright {
            left: auto;
            right: 0.25em;
        }

.app-calendar-plugin-container .app-calendar-plugin .ui-btn.app-calendar-plugin-loadleft {
    left: 9px;
}

.app-calendar-plugin-container .app-calendar-plugin .ui-btn.app-calendar-plugin-loadright {
    right: 9px;
}

.app-calendar-plugin .app-calendar-plugin-header {
    margin-bottom: 2px;
    position: relative;
}

.app-density-condensed .app-calendar-plugin .app-calendar-plugin-header {
    margin-top: 4px;
}

.app-calendar-plugin .app-calendar-plugin-header div .ui-btn {
    display: inline-block;
    position: relative;
    margin: 0 !important;
}

    .app-calendar-plugin .app-calendar-plugin-header div .ui-btn.app-year-range {
        cursor: default;
    }

.app-calendar-plugin .app-calendar-plugin-header div {
    text-align: center;
    height: 100%;
    line-height: 1;
    white-space: nowrap;
    margin-left: 30px;
    margin-right: 30px;
    padding: 0;
    text-transform: uppercase;
    font-size: 12px;
    vertical-align: middle;
}

    .app-calendar-plugin .app-calendar-plugin-header div a {
        cursor: pointer;
    }

.app-calendar-plugin .app-calendar-plugin-header :not(.ui-btn-icon-notext).ui-btn {
    padding: 4px 3px !important;
}

.app-calendar-plugin .app-month-container,
.app-calendar-plugin .app-date-selector-container {
    width: 100%;
}

.app-calendar-plugin .app-scroll-inner {
    width: 300%;
    margin-left: -100%;
}

.app-calendar-plugin .app-scroll-column {
    float: left;
    width: 33.3%;
}

.app-calendar-plugin .app-month-container .app-scroll-column > div {
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    padding: 0 0.5em;
}

.app-density-condensed .app-calendar-plugin-header div a,
.app-density-condensed .app-calendar-plugin .app-month-container .app-scroll-inner > div,
.app-density-condensed .app-calendar-color-legend {
    font-size: 12px;
}

.app-density-compact .app-calendar-plugin-header div a,
.app-density-compact .app-calendar-plugin .app-month-container .app-scroll-inner > div,
.app-calendar-color-legend {
    font-size: 14px !important;
}

.app-calendar-plugin .ui-btn:not(.ui-btn-icon-notext) {
    margin: 0;
    padding: 0.5em 0.25em !important;
    border-width: 0 !important;
    box-shadow: none !important;
}

.app-calendar-plugin .ui-btn.app-calendar-plugin-fieldselector:not(.ui-btn-icon-notext) {
    display: table;
    margin: 0.25em auto 0 auto;
    border-width: 0 !important;
    padding: 3px 1.5em 3px 0 !important;
}

.app-calendar-plugin .app-calendar-plugin-fieldselector .text {
    padding-left: 4px;
    vertical-align: middle;
}

.app-calendar-plugin .app-calendar-plugin-fieldselector .app-icon {
    transition: opacity ease 200ms;
    margin: -6px 0;
    vertical-align: middle;
    position: relative !important;
    left: 2px !important;
}

.app-calendar-plugin .ui-btn:not(.ui-btn-icon-notext):not(.ui-btn-active):not(.app-selected):not(:hover),
body:not(.app-desktop) .app-calendar-plugin .ui-btn:not(.ui-btn-icon-notext):not(.ui-btn-active):not(.app-selected):hover {
    background-color: transparent !important;
}

.app-calendar-plugin .app-calendar-plugin-fieldselector.app-selected,
.app-calendar-plugin .app-calendar-plugin-fieldselector.app-selected:hover,
.app-calendar-plugin .app-calendar-plugin-header .app-selected,
.app-calendar-plugin .app-calendar-plugin-header .app-selected:hover,
.app-calendar .app-bar-calendar .app-calendar-badge.app-selected,
.app-calendar .app-bar-calendar .app-calendar-badge.app-selected:hover {
    background-color: rgba(0,0,0, 0.05);
    color: #000;
}

.app-calendar-plugin .app-calendar-color-legend a.app-hidden {
    display: none !important;
}

.app-calendar-plugin .app-has-droparrow:after {
    right: 6px;
}

.app-calendar-plugin .app-calendar-color-legend {
    border-top: 1px solid #ddd;
    padding-left: 1em;
    margin-top: 0.5em;
}

    .app-calendar-plugin .app-calendar-color-legend.app-hidden {
        display: none !important;
    }

    .app-calendar-plugin .app-calendar-color-legend ol {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
        margin-top: 0.25em;
    }

.app-labelsinlist-displayedabove .app-calendar-plugin .app-calendar-color-legend ol {
    margin-top: 0.25em;
}

.app-calendar-plugin .app-calendar-color-legend li {
    position: relative;
    padding-left: 1.5em;
    cursor: pointer;
}

.app-calendar-plugin .app-calendar-color-legend:not(.app-see-all) li.app-hidden {
    display: none;
}
/*.app-calendar-plugin .app-calendar-color-legend .app-item-desc {
    margin-left: 21px!important;
}
.app-calendar-condensed .app-calendar-plugin .app-calendar-color-legend .app-item-desc {
    margin-left: 18px!important;
}*/

.app-calendar-plugin .app-calendar-color-legend .app-item-desc-before {
    margin-top: 0.5em !important;
}

.app-calendar-plugin .app-calendar-color-legend .app-legend-toggle {
    margin-left: 1.5em;
    padding-right: 1.5em !important;
    text-align: left;
    width: auto;
    display: inline-block;
}

.app-calendar-plugin .app-calendar-color-legend.app-see-all .app-legend-toggle:after {
    transform: rotate(180deg);
}

.app-calendar-plugin .app-calendar-color-legend.app-see-all a.app-legend-toggle span.app-see-more {
    display: none;
}

.app-calendar-plugin .app-calendar-color-legend:not(.app-see-all) a.app-legend-toggle span.app-see-less {
    display: none;
}

.app-calendar-plugin .app-calendar-color-legend li span {
    position: absolute;
    display: block;
    top: 50%;
    margin-top: -0.5em;
    left: 0;
    width: 1em;
    height: 1em;
}

.app-calendar-plugin .app-calendar-color-legend .app-item-desc {
    font-size: 0.75em;
}

.app-density-condensed .app-calendar-plugin .app-calendar-color-legend .app-item-desc {
    font-size: 11px;
}

.app-density-condensed .app-calendar-plugin .app-calendar-color-legend .app-item-desc {
    font-size: 10px;
}

.app-calendar-plugin .app-date-selector-container {
    /*margin: 10px 6px;*/
}

    .app-calendar-plugin .app-date-selector-container .app-select-month,
    .app-calendar-plugin .app-date-selector-container .app-select-year {
        width: 25%;
        margin: 5px 0;
        padding: 0 !important;
        float: left;
        text-align: center !important;
        font-size: 0.8em;
        cursor: pointer;
        height: 20px;
        line-height: 20px;
    }

    .app-calendar-plugin .app-date-selector-container .app-selected:not(.ui-btn-active) {
        font-weight: 600 !important;
    }



.app-calendar-plugin span.app-current-day {
    display: inline-block;
    width: 1.7em;
}

.app-calendar-plugin td:not(.app-has-data) span.app-current-day {
    font-weight: normal;
}

.app-calendar-plugin-container {
    position: absolute;
    width: 192px;
    z-index: 1003;
    box-shadow: 0 0 16px rgba(0,0,0,0.4);
    overflow: hidden;
    background-color: #fff;
    color: #000;
}

    .app-calendar-plugin-container > .app-calendar-plugin {
        border-width: 0;
        margin: 0;
        padding: 0.5em 0;
        display: inline-block;
        position: relative;
        width: 100%;
        background-color: #fff;
    }

    .app-calendar-plugin-container .ui-btn.app-calendar-btn-close {
        border-width: 0;
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        height: 24px;
        z-index: 1000;
        margin: 4px;
        padding: 0;
        display: none;
    }


        .app-calendar-plugin-container .ui-btn.app-calendar-btn-close::after {
            content: 'close';
        }


    .app-calendar-plugin-container.app-calendar-wide.app-calendar-show-time:not(.app-calendar-show-bar) .ui-btn.app-calendar-btn-close {
        display: block;
    }

.app-time-container {
    width: 100%;
    height: 100%;
    display: none;
    vertical-align: top;
    position: relative;
    font-size: 14px;
    line-height: 18px;
}

.app-calendar-plugin-container.app-calendar-wide.app-calendar-show-time:not(.app-calendar-hide-date) > .app-calendar-plugin {
    width: 52%;
}

.app-calendar-plugin-container.app-calendar-wide.app-calendar-show-time:not(.app-calendar-hide-date) {
    width: 350px;
}

.app-calendar-plugin-container.app-calendar-comfortable:not(.app-calendar-show-date) {
    width: 250px;
}

.app-calendar-plugin-container.app-calendar-wide.app-calendar-comfortable.app-calendar-show-time:not(.app-calendar-hide-date) {
    width: 450px;
}

.app-calendar-plugin-container.app-calendar-wide:not(.app-calendar-hide-date) .app-time-container {
    width: 45%;
    padding-top: 10px;
}

.app-calendar-plugin-container.app-calendar-hide-date .app-calendar-plugin {
    display: none;
}

.app-calendar-plugin-container.app-calendar-show-time .app-time-container {
    display: inline-block;
}

.app-time-container .app-time-header {
    margin-top: 4px;
    text-align: center;
    font-size: 28px;
}

.app-time-container .app-time-hour, .app-time-container .app-time-minute, .app-time-container .app-time-second, .app-time-container .app-time-ampm {
    cursor: pointer;
    transition: color 200ms;
}

.app-time-container .app-selected {
    color: #38c;
    background-color: transparent !important;
}

.app-time-container .app-time-ampm {
    font-size: 10px;
    line-height: 1.3;
    display: inline-block;
    font-weight: 700;
    padding-right: 24px;
    margin-right: -24px;
}

    .app-time-container .app-time-ampm span {
        transition: color 200ms;
    }

.app-time-container .app-time-selector {
    background-color: #e5e5e5;
    border-radius: 50%;
    width: 144px;
    height: 144px;
    margin: 4px auto;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

.app-time-selector .app-hour-selector, .app-time-selector .app-minute-selector {
}

.app-time-selector .app-hour-list, .app-time-selector .app-minute-list {
    margin: 0;
}

.app-time-selector li {
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10200;
    width: 24px;
    margin-left: -12px;
    margin-top: -7px;
    text-align: center;
    transition: color 300ms ease-in;
    line-height: 1;
}

    .app-time-selector li.app-cal-selected {
        color: #fff;
    }

.app-time-header .app-cal-selected {
    color: #38c;
}

.app-time-selector .app-time-hand {
    position: absolute;
    width: 2px;
    background-color: #38c;
    height: 65px;
    top: 7px;
    left: 72px;
    margin-left: -1px;
    transform-origin: 50% 100%;
}

    .app-time-selector .app-time-hand.app-transition {
        transition: 300ms ease-out;
    }

    .app-time-selector .app-time-hand.app-inner-ring {
        height: 32%;
        margin-top: 13%;
    }

    .app-time-selector .app-time-hand.app-dot span::after {
        content: " ";
        background-color: #fff;
        width: 3px;
        height: 3px;
        position: absolute;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        margin-left: -1.5px;
        margin-top: -1.5px;
        z-index: 10250;
    }

    .app-time-selector .app-time-hand > span {
        width: 24px;
        height: 24px;
        top: -6px;
        left: -11px;
        background-color: #38c;
        z-index: 10175;
        border-radius: 50%;
        position: absolute;
    }

.app-calendar-action-bar {
    text-align: right;
    display: none;
    white-space: nowrap;
    padding-right: 8px;
}

.app-calendar-show-bar .app-calendar-action-bar {
    display: block;
}

.app-calendar-action-bar .ui-btn {
    border-width: 0 !important;
    text-transform: uppercase;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    font-size: 14px;
}

    .app-calendar-action-bar .ui-btn + .ui-btn {
        margin-left: .25em;
    }

.app-calendar-cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
}

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

.app-calendar-plugin-container:not(.app-calendar-wide) {
    width: 250px !important;
}

    .app-calendar-plugin-container:not(.app-calendar-wide) .app-calendar-plugin, .app-calendar-plugin-container:not(.app-calendar-wide) .app-time-container {
        width: 100%;
    }

[data-presenter="calendar"] {
    overflow: hidden;
}

.app-calendar-plugin-container.app-data-input-helper {
    border: solid 1px;
}

.app-calendar-month-header.ui-btn {
    display: inline-block;
}

.app-calendar-monthview .app-calendar-month table li {
    margin: 2px;
    border-radius: 2px;
    white-space: nowrap;
}
/*******************************************************************
   Calendar view style breakpoints
/*******************************************************************/
/* Agenda mode */
.ui-page:not(.app-min-sm) .app-calendar-agenda-list .app-calendar-day {
    padding-left: 5em !important;
}

.ui-page:not(.app-min-sm) .app-calendar-agenda-list li > .app-event-time {
    display: none !important;
}

.ui-page:not(.app-min-sm) .app-calendar-agenda-list .app-calendar-day li > div .app-event-time {
    display: block !important;
}

.ui-page:not(.app-min-sm) .app-calendar-agenda-list li.app-time-line-container > .app-event-time {
    display: block !important;
    padding-top: 1em !important;
}

.ui-page:not(.app-min-sm) .app-calendar-agenda-list .app-calendar-day li.app-time-line-container {
    height: 40px !important;
}

.ui-page:not(.app-min-sm) .app-calendar-agenda-list .app-calendar-day li > div {
    margin-left: 0 !important;
}

.ui-page:not(.app-min-sm) .app-calendar-agenda-list .app-calendar-month-header {
    margin-left: 5em !important;
}

.ui-page:not(.app-min-sm) .app-calendar-agenda-list h2 .app-calendar-monthname, .ui-page:not(.app-min-sm) .app-calendar-agenda-list h2 .app-calendar-daynum {
    display: none !important;
}

.ui-page:not(.app-min-sm) .app-calendar-agenda-list h2 .app-calendar-daynumbig {
    display: block !important;
    margin-bottom: -0.5em !important;
}

.ui-page:not(.app-min-sm) .app-calendar-agenda-list h2 .app-calendar-dayname {
    font-size: 0.75em !important;
}
/*.app-density-compact .app-min-xs:not(.app-min-lg) .app-calendar-agenda-list h2,
.app-density-condensed .app-min-xs:not(.app-min-lg) .app-calendar-agenda-list h2 {
    font-size: 16px !important;
}*/
.app-min-md .app-calendar-agenda-list {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 800px !important;
}
/* Year mode*/
.app-calendar-year {
    max-width: 992px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.ui-page:not(.app-min-xs) .app-calendar-year {
    font-size: 10px !important;
}

.ui-page.app-min-xs .app-calendar-year {
    font-size: 14px !important;
}

.ui-page:not(.app-min-md) .app-calendar-yearview .app-calendar-month {
    width: 50%;
}

.ui-page.app-min-lg .app-calendar-yearview .app-calendar-month {
    width: 25%;
}
/* Month/Day/Wek modes */
.app-min-sm .app-calendar-monthview .app-calendar-month table td ul, .app-min-sm .app-calendar-dayview .app-event, .app-min-sm .app-calendar-weekview .app-event {
    font-size: 12px;
}

.app-font-tiny .app-min-sm .app-calendar-monthview .app-calendar-month table td ul, .app-font-tiny .app-min-sm .app-calendar-dayview .app-event, .app-font-tiny .app-min-sm .app-calendar-weekview .app-event {
    font-size: 8.5pt;
}

.app-min-sm .app-event .app-event-time {
    font-size: .85em;
}

.app-min-lg .app-calendar-monthview .app-calendar-month table td ul, .app-min-lg .app-calendar-weekview .app-event {
    font-size: 12px;
}

.app-font-tiny .app-min-lg .app-calendar-monthview .app-calendar-month table td ul, .app-font-tiny .app-min-lg .app-calendar-weekview .app-event {
    font-size: 8.5pt;
}

.ui-page:not(.app-min-md) .app-calendar-month table ul li.app-calendar-month-more span {
    display: none;
}

.ui-page:not(.app-min-md) .app-calendar-weekview .app-event-more {
    color: transparent;
}

.ui-page:not(.app-min-md) .app-calendar-monthview .app-event .app-event-time {
    display: none;
}

/*!
* Data Aquarium Framework - Touch UI Theme Engine
* Copyright 2008-2021 Code On Time LLC; Licensed MIT; http://codeontime.com/license
*/

/* @import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp'); */

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/MaterialIcons-Regular.woff2') format('woff2'), url('/fonts/MaterialIcons-Regular.ttf') format('truetype'); /* Legacy */
}

/* general body*/

body,
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper,
.app-kiosk {
    background-color:  /*@theme.background.1*/  #fff;
    border-color:  /*@theme.border.1*/  #bbb;
    color:  /*@theme.text.default*/  #333;
}

    .ui-body-a,
    .ui-page-theme-a .ui-body-inherit,
    html .ui-bar-a .ui-body-inherit,
    html .ui-body-a .ui-body-inherit,
    /*html body .ui-group-theme-a .ui-body-inherit,*/
    /*html .ui-panel-page-container-a,*/
    .app-stub,
    .app-stub-keyboard,
    .app-presenter,
    .app-chart .app-chart-inner,
    .app-chart .app-chart-data table th,
    .app-chart .app-chart-data table td,
    .app-calendar-time,
    [data-layout="form"],
    .app-page-content,
    .app-page-header,
    .app-calendar-plugin-container,
    .app-grid-header .app-frozen-spacer,
    .app-frozen-spacer,
    .app-wrapper .app-bar-buttons,
    .app-bar-aggregates {
        background-color:  /*@theme.background.1*/  #fff;
        border-color:  /*@theme.border.1*/  #ddd;
        color:  /*@theme.text.default*/  #333;
    }

        .app-calendar-plugin-container,
        .app-calendar-plugin-container > .app-calendar-plugin {
            background-color:  /*@theme.background.4*/  #fff;
            border-color:  /*@theme.border.1*/  #ddd;
            color:  /*@theme.text.default*/  #333;
        }

.app-acc-man,
.app-acc-inner,
.app-acc-footer {
    background-color:  /*@theme.background.1*/  #fff;
    color:  /*@theme.text.active*/  #000;
}

.app-acc-footer,
.app-container > .app-header .app-text:not(.app-selected) {
    color:  /*@theme.text.muted*/  #777;
}

.app-keyboard .app-key .app-text,
.app-acc-man li a {
    color:  /*@theme.text.default*/  #333;
}

    .app-acc-man li a:hover:not(.app-link-disabled),
    .app-display-flow .app-item.app-selected:before,
    .app-desktop .app-display-flow .app-item.app-selected:hover:before,
    .app-display-flow .app-item.app-selected.ui-btn-active:before,
    .app-display-flow .app-item.ui-btn-active:before,
    .app-desktop .app-display-flow .app-item:hover:before,
    .app-desktop .app-has-depth.app-collapsible .app-btn:hover {
        background-color:  /*@theme.background.hover*/  rgba(0,0,0,0.05);
    }

    .app-acc-man li a.ui-btn-active:not(.app-link-disabled),
    .app-display-flow .app-item.app-selected:before {
        color:  /*@theme.text.active*/  #000;
        background-color:  /*@theme.background.active*/  rgba(0,0,0,0.1);
    }

.app-acc-man a .app-user-signed-out, .app-popup-listview .app-status,
.app-grid .ui-btn .app-null,
.app-grid .app-group .app-null {
    color:  /*@theme.text.muted*/  #aaa;
}


.app-kiosk .app-logo,
.app-page-title .app-text {
    color:  /*@theme.text.active*/  #333;
}

html .ui-bar-a .ui-bar-inherit,
html .ui-body-a .ui-bar-inherit /*,
html body .ui-group-theme-a .ui-bar-inherit*/ {
    background-color:  /*@theme.background.5*/  #fff;
    border-color:  /*@theme.border.5*/  #ddd;
    color:  /*@theme.text.default*/  #333;
}

.app-popup-listview .ui-popup-arrow,
.app-popup-listview .ui-bar-a,
.app-popup-listview,
.app-popup-message .ui-popup-arrow,
.app-popup-message .ui-bar-a,
.app-popup-message {
    color:  /*@theme.text.muted*/  #777;
    background-color:  /*@theme.background.4*/  #fff;
}

    .app-popup-listview .ui-panel-inner li {
        color:  /*@theme.text.default*/  #333;
        background-color:  /*@theme.background.4*/  #fff;
    }

    .app-popup-listview .ui-popup-arrow {
        border-color:  /*@theme.border.0*/  #aaa;
    }

.ui-page-theme-a .ui-bar-inherit,
.ui-bar-a,
.app-status-bar {
    background-color:  /*@theme.background.5*/  #fff;
    border-color:  /*@theme.border.1*/  #ddd;
    color:  /*@theme.text.default*/  #333;
}


    .ui-page-theme-a .ui-bar-inherit.app-tabs,
    .app-listview,
    .app-cardview .dv-item,
    .app-echo {
        background-color:  /*@theme.background.1*/  #fff;
    }

.app-page-modal,
.app-toolbox-form.app-toolbox-visible.app-toolbox-panel {
    box-shadow:  /*@theme.boxShadow.modal*/  0 0 5px 5px rgba(0,0,0,.1);
}

    .app-page-modal.app-modal-keyboard .app-wrapper {
        background-color:  /*@theme.keyboard.background*/  #f1f1f1;
    }


.app-calendar-plugin-container {
    box-shadow:  /*@theme.boxShadow.modalActive*/  0 0 10px 5px rgba(0,0,0,.1);
}

.ui-panel-display-overlay {
    box-shadow:  /*@theme.boxShadow.left*/  5px 0 5px rgba(0,0,0,.15);
}

.app-popup-panel.ui-overlay-shadow {
    box-shadow:  /*@theme.boxShadow.top*/  0 -5px 5px rgba(0,0,0,.15);
}

.ui-panel-position-right.ui-panel-display-overlay {
    box-shadow:  /*@theme.boxShadow.right*/  -5px 0 5px rgba(0,0,0,.15);
}

.app-bar-toolbar.app-page-scrolled,
.app-bar-heading {
    box-shadow:  /*@theme.boxShadow.heading*/  0 3px 6px 0 rgba(0,0,0,.25);
}

    .app-bar-heading,
    .app-bar-heading .app-bar-text .app-group {
        background-color:  /*@theme.background.2*/  #fff;
        border-color:  /*@theme.border.2*/  #ddd;
    }

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


.ui-btn.app-checked:not(.ui-btn-active) .app-frozen-spacer,
.ui-btn.app-checked:not(.ui-btn-active):hover .app-frozen-spacer,
.ui-btn.app-selected:not(.ui-btn-active) .app-frozen-spacer,
.ui-btn.app-selected:not(.ui-btn-active):hover .app-frozen-spacer,
.app-desktop .ui-listview .ui-btn.app-selected:not(.ui-btn-active):hover .app-frozen-spacer,
.app-desktop .ui-listview .ui-btn.app-checked:not(.ui-btn-active):hover .app-frozen-spacer,
.ui-btn.ui-btn-active .app-frozen-spacer {
    background-color:  /*@theme.background.activeOpaque*/  #ebebeb;
}

.app-desktop .ui-btn:not(.app-checked):not(.ui-btn-active):not(.app-selected):not(.app-calculated):hover .app-frozen-spacer {
    background-color:  /*@theme.background.hoverOpaque*/  #ededed;
}

.ui-page-theme-a .ui-btn,
html .ui-bar-a .ui-btn,
html .ui-body-a .ui-btn,
/*html body .ui-group-theme-a .ui-btn,*/
html head + body .ui-btn.ui-btn-a,
.ui-page-theme-a .ui-btn:active,
html .ui-bar-a .ui-btn:active,
html .ui-body-a .ui-btn:active,
/*html body .ui-group-theme-a .ui-btn:active,*/
html head + body .ui-btn.ui-btn-a:active,
.ui-page-theme-a .ui-btn:visited,
html .ui-bar-a .ui-btn:visited,
html .ui-body-a .ui-btn:visited,
/*html body .ui-group-theme-a .ui-btn:visited,*/
html head + body .ui-btn.ui-btn-a:visited,
.app-display-flow .app-item,
.app-display-flow .app-item::before {
    border-color:  /*@theme.border.1*/  #ddd;
    color:  /*@theme.text.default*/  #333;
}

    .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,
    .app-calendar-plugin-container .ui-btn.ui-btn-active {
        color:  /*@theme.text.active*/  #333;
        background-color:  /*@theme.background.active*/  rgba(0,0,0,0.08);
    }

.ui-page-theme-a .app-grid .app-list-instruction + .dv-item .ui-btn {
    border-color:  /*@theme.border.2*/  #ddd;
}

.ui-page-theme-a.app-reading-pane-detail .app-bar-buttons .ui-btn.ui-btn-active {
    background-color:  /*@theme.readingPane.detail.toolbar.buttons.background.active*/  rgba(0,0,0,0.08);
}

[data-container],
[data-container],
.app-display-flow hr,
.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,
.app-echo .app-echo-inner ul.app-grid li:not(.ui-last-child):not(.ui-first-child),
.ui-page-theme-a .ui-listview .ui-btn.ui-btn-active,
.app-echo-inner > .app-onecolumnview,
.app-echo-inner > .app-cardcolumn,
.app-calendar-plugin-container.app-data-input-helper,
.app-modal-keyboard:not(.app-modal-keyboard-bottom),
.app-echo .app-grid,
.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-color:  /*@theme.border.1*/  #ddd;
}

.app-modal-keyboard:not(.app-modal-keyboard-bottom) {
    box-shadow:  /*@theme.keyboard.boxShadow*/  0 0 10px 5px rgba(0,0,0,.1);
}

.app-display-flow.app-page-content .app-gap.app-gap-bkg:not(.app-accent),
.ui-panel-inner .ui-li-divider:not(.app-list-instruction),
.app-grid .app-cell-separator,
.app-echo .app-btn-separator {
    background-color:  /*@theme.border.1*/  #ddd;
}


#app-banner,
[data-container="collapsible"] [data-container="toggle"],
[data-container="collapsible"] [data-container="row"].app-has-description {
    background-color:  /*@theme.background.2*/  #f1f1f1;
}

.ui-panel:not(.app-sidebar) li:not(.ui-li-static):not(.app-list-instruction):not(.ui-li-divider) {
    background-color:  /*@theme.background.4*/  #fff;
}

.app-desktop [data-container="collapsible"] [data-container="toggle"]:hover:not(.ui-btn-active):after {
    background-color:  /*@theme.background.hover*/  rgba(0,0,0,0.05);
}

[data-container="collapsible"] [data-container="toggle"].ui-btn-active {
    background-color:  /*@theme.background.active*/  rgba(0,0,0,0.08);
    color:  /*@theme.text.default*/  #000;
}

.app-grid-header span.app-selected:not(.ui-btn-active),
.app-desktop .app-grid-header span:hover:not(.ui-btn-active):not(.app-icon):not(.app-frozen-spacer),
.app-desktop .app-bar-tabs ul li:hover {
    background-color:  /*@theme.background.hover*/  rgba(0,0,0,0.05);
    color:  /*@actionBar.text.hover,@theme.text.hover*/  #808080;
}

.ui-btn.app-checked:not(.ui-btn-active),
.ui-btn.app-checked:not(.ui-btn-active):hover,
.ui-btn.app-selected:not(.ui-btn-active),
.ui-btn.app-selected:not(.ui-btn-active):hover,
.app-desktop .ui-listview .ui-btn.app-selected:not(.ui-btn-active):hover,
.app-desktop .ui-listview .ui-btn.app-checked:not(.ui-btn-active):hover {
    background-color:  /*@theme.background.hover*/  rgba(0,0,0,0.08);
    color:  /*@theme.text.active*/  #000;
}

.app-listview .ui-btn.app-selected,
.app-listview .ui-btn.app-checked {
    background-color:  /*@theme.background.active*/  rgba(0,0,0,0.08);
    color:  /*@theme.text.active*/  #000;
}


.app-bar-actions .h3.app-selected,
.app-bar-controls .ui-btn.app-selected:not(.ui-btn-active),
.app-bar-controls .ui-btn.app-selected:not(.ui-btn-active):hover {
    background-color:  /*@theme.background.hover*/  rgba(0,0,0,0.08);
    color:  /*@theme.text.active*/  #000;
}

.app-grid-header span.ui-btn-active {
    background-color:  /*@theme.background.active*/  rgba(0,0,0,0.08);
    color:  /*@theme.text.light*/  #808080;
}


.app-page-header-divider,
.app-grid-header .app-field-separator:after,
.app-calculated .app-field-separator:after {
    background-color:  /*@theme.border.2*/  #ddd;
}

.app-bar-aggregates .app-listview,
.app-bar-footer .app-bar-tabs {
    background-color:  /*@theme.background.4*/  #f6f6f6;
    border-color:  /*@theme.border.4*/  #ddd;
}

.ui-btn.app-calculated .app-frozen-spacer {
    background-color:  /*@theme.background.1*/  #fff;
}

.app-toolbox-form,
.ui-footer.app-bar-footer.ui-footer-fixed,
.ui-footer.app-bar-footer .ui-btn.app-calculated .app-frozen-spacer {
    background-color:  /*@theme.background.4*/  #f1f1f1;
    border-color:  /*@theme.border.4*/  #ccc;
}

.app-bar-footer.app-bar-footer-flat .app-bar-hscrollbar {
    border-color:  /*@theme.border.4*/  #ccc;
}

.app-grid-header {
    border-top-color:  /*@theme.border.4*/  #ddd;
}

[data-control="field"],
[data-state="write"] [data-control="label"],
[data-state="write"] [data-input="none"],
.app-display-flow .app-item [data-type="field"] .app-label {
    color:  /*@theme.text.light*/  #808080;
}

[data-state="write"] [data-control="field"] {
    color:  /*@theme.text.active*/  #808080;
}

.app-echo,
.app-btn-check {
    border-color:  /*@theme.border.3*/  #ccc;
}

.app-display-flow-designer .app-container.app-container-selected,
.app-display-flow-designer .app-container.app-container-cut,
.app-desktop .app-display-flow-designer .app-container:not([data-read-only="true"]):not(.app-container-selected):hover {
    outline-color:  /*@theme.displayFlow.toolbar.background*/  #000;
}

.app-display-flow-toolbar {
    background-color:  /*@theme.displayFlow.toolbar.background*/  #000;
}

    .app-display-flow-toolbar .app-btn.ui-btn-active .app-icon,
    .app-desktop .app-display-flow-toolbar .app-btn:hover .app-icon {
        color:  /*@theme.displayFlow.toolbar.iconActive*/  #fff;
    }

.app-display-flow-designer .app-container.app-container-cut::before {
    background:  /*@theme.background.stripe45deg10*/  repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.3) 20px);
}


[data-state="write"] [data-control="field"],
.app-data-input,
[data-input].app-has-helper .app-control-helper,
.app-caret,
.app-clear-all-text,
[data-state="write"] [data-control="field"][data-text-action] {
    color:  /*@theme.text.default*/  #000;
}

[data-control="label"].app-has-icon .app-icon,
.app-desktop [data-control="label"].app-has-icon .app-icon:not(.ui-btn-active):hover {
    color:  /*@theme.text.default*/  rgba(51,51,51,.75);
}

[data-state="write"] [data-control="label"].app-has-icon .app-icon,
.app-desktop [data-state="write"] [data-control="label"].app-has-icon .app-icon:not(.ui-btn-active):hover {
    color:  /*@theme.text.light*/  rgba(128,128,128,.75);
}

[data-state="write"] [data-control="label"],
[data-state="write"] [data-input="none"] {
    color:  /*@theme.text.light*/  #808080;
}

.app-data-input-popup {
    background-color:  /*@theme.background.1*/  #fff;
    border-color:  /*@theme.border.1*/  #ccc;
    box-shadow:  /*@theme.inputShadow*/  0 2px 10px rgba(0,0,0,.5);
}

    .app-data-input-popup ul li.app-instruction.app-separator {
        background-color:  /*@theme.border.1*/  #ccc;
    }

    .app-data-input-popup ul li,
    [data-state="write"] [data-input="none"].app-text-default {
        color:  /*@theme.text.default*/  #333;
    }

        .app-data-input-popup ul li[data-command]:not(.app-selected) {
            color:  /*@theme.text.active*/  #000;
        }

        .app-data-input-popup ul li.app-selected,
        .app-bar-search + .app-bar-history li.app-selected,
        [data-input] .app-control-helper ul li.ui-btn-active,
        [data-input].app-has-focus .app-control-helper ul li.app-focus {
            background-color:  /*@theme.background.active*/  rgba(0,0,0,0.08);
        }

            .app-data-input-popup ul li.app-selected::before,
            .ui-panel-inner .app-focus::before,
            .app-bar-search + .app-bar-history li.app-selected::before,
            .app-display-flow [data-type="button"] .app-button,
            .app-display-flow .app-item.app-selected:after,
            .app-display-flow .app-gap.app-accent {
                background-color:  /*@system.select.bar,@buttons.menu.background,@header.background*/ #561C0F;
            }

.app-desktop .app-data-input-popup ul li:not(.app-selected):not(.app-instruction):hover,
.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:  /*@theme.background.hover*/  #ededed;
}


.app-desktop .app-vscrollbar,
.app-desktop .app-hscrollbar2,
.app-desktop .app-bar-footer.app-bar-footer-flat .app-bar-hscrollbar::after {
    background-color:  /*@theme.scrollbar.background*/  #e9e9e9;
}

.app-page-modal .app-vscrollbar {
    border-right-color:  /*@theme.scrollbar.background*/  #e9e9e9;
}

.app-vscrollbar .app-vscrollbar-handle,
.app-hscrollbar2 .app-hscrollbar-handle {
    background-color:  /*@theme.scrollbar.handle.default*/  #c4c4c4;
}

.app-desktop .app-vscrollbar-handle:hover,
.app-desktop .app-hscrollbar-handle:hover {
    background-color:  /*@theme.scrollbar.handle.hover*/  #999;
}

.app-vscrollbar.app-scrollbar-dragging .app-vscrollbar-handle,
.app-hscrollbar2.app-scrollbar-dragging .app-hscrollbar-handle {
    background-color:  /*@theme.scrollbar.handle.active*/  #666;
}


.app-tooltip {
    background-color:  /*@theme.background.6*/  #282828;
    color:  /*@theme.text.invert*/  #fff;
}


.app-bar-notify {
    background-color:  /*@theme.background.6*/  #323232;
    color:  /*@theme.text.invert*/  #fff;
}


.app-has-icon.ui-btn-icon-notext.ui-btn-active .app-icon,
.app-has-icon.ui-btn-icon-notext.ui-btn-active .app-icon::before {
    color:  /*@theme.icon.default*/  #000;
}

.app-icon,
.app-icon:after,
.ui-btn::after,
.ui-btn .glyphicon::before,
.app-bar-tabs ul li span,
[data-layout="form"] .ui-btn .app-icon {
    color:  /*@theme.icon.default*/  #777;
}

.app-desktop .ui-btn:hover:not(.ui-btn-active)::after,
.app-desktop .ui-btn:hover:not(.ui-btn-active) .glyphicon::before {
    color:  /*@theme.icon.hover*/  #000;
}

.ui-btn.ui-btn-active::after,
.app-btn-more.ui-btn-active::after,
.app-control-inner .app-field-object-ref.ui-btn-active::before {
    color:  /*@theme.icon.active*/  #000;
}

.ui-btn.ui-btn-active.ui-btn-icon-left::after,
.ui-btn.ui-btn-active.ui-btn-icon-right::after,
.ui-btn-active .app-btn-more::after,
.ui-btn-active .glyphicon:before {
    color:  /*@theme.icon.active*/  #000;
}

.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,
.app-desktop .app-grid-header .app-btn-sort:hover {
    color:  /*@theme.text.hover*/  #000;
}

.app-inner-shadow-left-right {
    box-shadow:  /*@theme.boxShadow.scroll.both*/  inset 10px 0px 10px -10px rgba(0,0,0,0.4), inset -10px 0px 10px -10px rgba(0,0,0,0.4);
    border-right-color:  /*@theme.boxShadow.scroll.border*/  #ccc;
}

.app-inner-shadow-right {
    box-shadow:  /*@theme.boxShadow.scroll.right*/  inset -10px 0px 10px -10px rgba(0,0,0,0.4);
    border-right-color:  /*@theme.boxShadow.scroll.border*/  #ccc;
}

.app-inner-shadow-left {
    box-shadow:  /*@theme.boxShadow.scroll.left*/  inset 10px 0px 10px -10px rgba(0,0,0,0.4);
}

.app-chart .app-chart-data,
.app-chart .app-chart-headerbar {
    background-color:  /*@theme.background.1*/  #fff;
    color:  /*@theme.text.active*/  #000;
}

.app-calendar-day > div:not(.app-calendar-time),
.app-calendar-week-grid .app-calendar-day > div,
.app-calendar-year h1 {
    border-color:  /*@theme.border.1*/  #ccc;
}

.app-calendar-monthview .app-calendar-month table td,
.app-calendar-monthview .app-calendar-month table {
    background-color:  /*@theme.background.1*/  #fff;
    border-color:  /*@theme.border.1*/  #e5e5e5;
}

    .app-calendar-monthview .app-calendar-month table td.app-calendar-weekend {
        background-color:  /*@theme.background.4*/  #fcfcfc;
        border-color:  /*@theme.border.2*/  #e5e5e5;
    }

.app-time-container .app-time-selector {
    background-color:  /*@theme.background.2*/  #e5e5e5;
    border-color:  /*@theme.border.2*/  #e5e5e5;
}

.app-selected.ui-btn .app-event,
.app-calendar-selected {
    outline-color:  /*@theme.border.6*/  #000;
}

.app-calendar-plugin table tr:not(.ui-btn-active) td.app-prev-month,
.app-calendar-plugin table tr:not(.ui-btn-active) td.app-next-month,
.app-calendar-plugin table tr:not(.ui-btn-active) td.app-day-unselectable {
    color:  /*@theme.text.light*/  #bbb;
}

/*headers*/
body:not(.app-has-sidebar-left):not(.app-has-reading-pane-bottom) .ui-page:not(.app-page-modal) .app-page-header,
.ui-panel-inner .app-list-instruction.app-logo,
.ui-panel-inner .ui-listview > .ui-li-divider.app-list-instruction.app-logo {
    background-color:  /*@header.background,@theme.background.3*/  #FF3E01;
}

body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions,
body:not(.app-hosted) .ui-page > .ui-content::before,
.app-page-modal > .ui-content:before {
    background-color:  /*@header.background,@theme.background.3*/  #FF3E01;
}

body:not(.app-hosted).app-has-reading-pane .ui-page.app-reading-pane-master > .ui-content::before {
    background-color:  /*@theme.readingPane.master.toolbar.border*/  #e9e9e9;
}

body:not(.app-hosted) .app-reading-pane-detail.ui-page > .ui-content::before {
    background-color:  /*@theme.readingPane.detail.toolbar.background,@readingPane.detail.toolbar.background,@header.background,@theme.background.3*/  #FF3E01;
}

body:not(.app-has-sidebar-left):not(.app-has-reading-pane-bottom) .app-page-header,
.app-page-modal .app-page-header,
.app-page-modal .app-bar-actions,
.app-page-modal .app-page-modal-title .app-text,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane-bottom) .app-page-header .app-icon,
.app-page-modal .app-page-header .app-icon,
.app-page-modal.app-has-fixed-bar .app-bar-actions .ui-btn:not(:hover):not(.ui-btn-active),
.app-bar-heading.app-bar-heading-modal .app-bar-label {
    color:  /*@header.text.default,@theme.text.default*/ #f5f5f5;
}

    .app-page-modal.app-has-fixed-bar .app-bar-actions .ui-btn:not(:hover):not(.ui-btn-active)::after {
        border-top-color:  /*@header.text.default,@theme.text.default*/ #f5f5f5;
    }

    body:not(.app-has-sidebar-left):not(.app-has-reading-pane-bottom) .app-page-header .app-icon.app-icon-background,
    .app-page-modal .app-page-header .app-icon.app-icon-background {
        opacity:  /*@header.icon.backgroundOpacity*/ 0.2;
    }

/*buttons.promo*/
.app-btn-promo.ui-btn.app-has-icon,
.app-btn-promo.ui-btn.app-has-icon:not(.ui-btn-active):not(.app-selected):not(.app-calculated):hover,
.app-btn-promo.ui-btn.app-has-icon.ui-btn-active {
    background-color:  /*@buttons.promo.background*/  #FF3E01;
}

.app-has-icon.ui-btn-icon-notext.app-btn-promo:hover .app-icon,
.app-has-icon.ui-btn-icon-notext.app-btn-promo .app-icon,
.app-has-icon.ui-btn-icon-notext.app-btn-promo .app-icon::after,
.app-has-icon.ui-btn-icon-notext.app-btn-promo .app-icon::before {
    color:  /*@buttons.promo.icon.default*/  #fff;
}

/*buttons.menu*/
.app-has-sidebar-left .app-bar-toolbar:not(.app-has-back) .app-btn-menu-background {
    background-color:  /*@buttons.menu.background,@sidebar.full.background, @theme.background.4*/ #561C0F;
    border-right-color:  /*@header.divider,@buttons.menu.border,@sidebar.full.border,@header.border, @theme.border.4*/ #561C0F;
    border-bottom-color:  /*@buttons.menu.border,@sidebar.full.border, @theme.border.4*/ #561C0F;
}

    .app-has-sidebar-left .app-bar-toolbar:not(.app-has-back) .app-btn-menu-background::after {
        background-color:  /*@buttons.menu.border,@header.divider,@sidebar.full.border,@header.border, @theme.border.4*/ #561C0F;
    }

.app-has-sidebar-left.app-has-reading-pane .app-bar-toolbar:not(.app-has-back) .app-btn-menu-background {
    border-right-color:  /*@readingPane.master.toolbar.altBorder,@readingPane.master.toolbar.menuButton.border,@theme.readingPane.master.toolbar.border*/ #561C0F;
}

    .app-has-sidebar-left.app-has-reading-pane .app-bar-toolbar:not(.app-has-back) .app-btn-menu-background::after {
        background-color:  /*@readingPane.master.toolbar.altBorder,@readingPane.master.toolbar.menuButton.border,@theme.readingPane.master.toolbar.border*/ #561C0F;
    }

.app-native.app-has-sidebar-left .app-bar-toolbar:not(.app-has-back) .app-btn-menu-background {
    background-color:  /*@header.background,@theme.background.5*/  #FF3E01;
    border-right-color:  /*@header.background,@theme.background.5*/  #FF3E01;
    border-bottom-color:  /*@header.border,@theme.border.5*/  #FF3E01;
}

.app-has-sidebar-left .app-btn-menu-background::before {
    background-color:  /*@buttons.menu.pixel*/  transparent;
}

.app-native.app-has-sidebar-left .app-btn-menu-background::before {
    background-color:  /*@header.border,@theme.border.5*/  #FF3E01!important;
}


body.app-has-sidebar-left #app-btn-menu.ui-icon-bars::after {
    color:  /*@buttons.menu.icon.default,@sidebar.full.icon.default,@theme.icon.default*/ #fff;
}

.app-desktop.app-has-sidebar-left #app-btn-menu.ui-icon-bars:hover:not(.ui-btn-active)::after {
    color:  /*@buttons.menu.icon.hover,@sidebar.full.icon.hover,@theme.icon.hover*/ #eee;
}

body.app-has-sidebar-left #app-btn-menu.ui-icon-bars.ui-btn-active::after {
    color:  /*@buttons.menu.icon.active,@sidebar.full.icon.active,@theme.icon.active*/ #f5f5f5;
}

.app-has-minisidebar-left .app-bar-toolbar:not(.app-has-back) .app-btn-menu-background {
    background-color:  /*@buttons.menu.background,@sidebar.mini.background,@sidebar.full.background,@theme.background.4*/ #561C0F;
    border-right-color:  /*@header.divider,@buttons.menu.border,@sidebar.mini.border,@sidebar.full.border,@header.border, @theme.border.4*/ #561C0F;
    border-bottom-color:  /*@buttons.menu.border,@sidebar.mini.border,@sidebar.full.border,@theme.border.4*/ #561C0F;
}

    .app-has-minisidebar-left .app-bar-toolbar:not(.app-has-back) .app-btn-menu-background::after {
        background-color:  /*@sidebar.mini.pixel,@sidebar.mini.border*/ #561C0F;
    }

.app-has-minisidebar-left.app-has-reading-pane .app-bar-toolbar:not(.app-has-back) .app-btn-menu-background::after {
    background-color:  /*@readingPane.master.toolbar.menuButton.border,@theme.readingPane.master.toolbar.border*/ #561C0F;
}

.app-has-minisidebar-left.app-has-reading-pane .app-bar-toolbar:not(.app-has-back) .app-btn-menu-background {
    border-right-color:  /*@readingPane.master.toolbar.menuButton.border,@theme.readingPane.master.toolbar.border*/ #561C0F;
}

.app-has-minisidebar-left .app-bar-toolbar:not(.app-has-back) .app-btn-menu-background {
    background-color:  /*@buttons.menu.background,@sidebar.mini.background,@sidebar.full.background,@theme.background.4*/ #561C0F;
    border-right-color:  /*@header.divider,@buttons.menu.border,@sidebar.mini.border,@sidebar.full.border,@header.border, @theme.border.4*/ #561C0F;
    border-bottom-color:  /*@buttons.menu.border,@sidebar.mini.border,@sidebar.full.border,@theme.border.4*/ #561C0F;
}

.app-has-reading-pane .app-bar-toolbar::after {
    background-color:  /*@theme.border.4*/  #ccc;
    content: ' ';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
}

body.app-has-minisidebar-left #app-btn-menu.ui-icon-bars::after {
    color:  /*@buttons.menu.icon.default,@sidebar.mini.icon.default,@sidebar.full.icon.default,@theme.icon.default*/ #fff;
}

.app-desktop.app-has-minisidebar-left #app-btn-menu.ui-icon-bars:hover:not(.ui-btn-active)::after {
    color:  /*@buttons.menu.icon.hover,@sidebar.mini.icon.hover,@sidebar.full.icon.hover,@theme.icon.hover*/ #eee;
}

body.app-has-minisidebar-left #app-btn-menu.ui-icon-bars.ui-btn-active::after {
    color:  /*@buttons.menu.icon.active,@sidebar.mini.icon.active,@sidebar.full.icon.active,@buttons.menu.icon.hover,@sidebar.mini.icon.hover,@sidebar.full.icon.hover,@theme.icon.active*/ #f5f5f5;
}

.app-has-sidebar-left .app-bar-toolbar .app-logo {
    color:  /*@buttons.menu.text.default,@sidebar.full.text.default,@theme.text.active*/ #fff;
}

.app-has-minisidebar-left .app-bar-toolbar .app-logo {
    color:  /*@buttons.menu.text.default,@header.text.logo,@theme.text.active*/ #fff;
}

.app-native.app-has-sidebar-left .app-bar-toolbar .app-logo {
    color:  /*@header.text.logo*/ #fff;
}


.ui-panel-inner .ui-listview > .ui-li-divider.app-list-instruction.app-logo {
    background-color:  /*@buttons.menu.background,@sidebar.full.background,@theme.background.4*/ #561C0F;
    border-top-color:  /*@buttons.menu.background,@sidebar.full.background,@theme.background.4*/ #561C0F;
    border-bottom-color:  /*@buttons.menu.background,@sidebar.full.background,@theme.background.2*/ #561C0F;
    color:  /*@buttons.menu.text.default,@sidebar.full.text.default,@theme.text.active*/ #fff;
}

/*toolbar*/
.app-bar-toolbar {
    background-color:  /*@header.background,@theme.background.5*/  #FF3E01;
    border-color:  /*@header.border,@theme.border.5*/  #FF3E01;
}

.app-has-reading-pane .app-bar-toolbar {
    background-color:  /*@theme.readingPane.master.toolbar.background*/  #f1f1f1;
    border-color:  /*@theme.readingPane.master.toolbar.border*/  #ccc;
}


body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .ui-page[data-page-header='false'] .app-bar-actions,
.app-page-modal[data-page-header='false'] .app-bar-actions {
    border-bottom-color:  /*@header.border,@theme.border.1*/  #FF3E01;
}

body:not(.app-has-sidebar-left):not(.app-has-reading-pane-bottom):not(.app-hosted) .ui-page:not([data-page-header='false']).app-has-fixed-bar .app-bar-heading,
.app-page-modal:not([data-page-header='false']):not(.app-has-header-bar) .app-bar-heading,
.ui-page:not([data-page-header='false']) .app-wrapper > .app-listview:not(.app-listview-static) .app-list-instruction {
    border-top-color:  /*@header.border,@theme.border.1*/  #FF3E01;
}

body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-toolbar,
body:not(.app-has-minisidebar-left) .ui-header-fixed .ui-title {
    border-color:  /*@form.header.background*/ transparent;
    background-color:  /*@form.header.border*/ transparent;
}

body:not(.app-has-sidebar-left):not(.app-has-reading-pane-bottom) div[data-layout="form"] > div[data-container="collapsible"]:first-of-type,
.app-page-modal div[data-layout="form"] > div[data-container="collapsible"]:first-of-type,
.app-page-modal div[data-layout="form"] > div[data-container="collapsible"][data-header-text="none"]:first-of-type > div:first-of-type {
    border-top-color:  /*@form.header.divider,@theme.border.2*/  #ddd;
}

body:not(.app-has-sidebar-left):not(.app-has-reading-pane-bottom) .app-page-header + .app-page-header-divider,
.app-page-modal .app-page-header + .app-page-header-divider {
    background-color:  /*@form.header.divider,@theme.border.2*/  #ddd;
}

.app-page-modal-title .app-btn,
.app-page-modal-title .app-icon,
body:not(.app-hosted) .app-bar-toolbar .ui-btn:before,
body:not(.app-hosted) .app-bar-toolbar .ui-btn:after,
body:not(.app-hosted) .app-bar-toolbar .ui-btn,
body:not(.app-hosted) .app-bar-toolbar .ui-btn .app-icon,
body:not(.app-hosted) .app-bar-toolbar .ui-btn .app-icon:before,
body:not(.app-hosted) .app-bar-toolbar .ui-btn .app-icon:after,
body:not(.app-hosted) .app-back-text {
    color:  /*@header.icon.default,@theme.icon.light*/ #eee;
}

body:not(.app-hosted).app-has-reading-pane .app-bar-toolbar .ui-btn .app-icon,
body:not(.app-hosted).app-has-reading-pane .app-bar-toolbar .ui-btn.ui-btn-active .app-icon,
body:not(.app-hosted).app-has-reading-pane .app-bar-toolbar .ui-btn:after,
.app-keyboard .app-key.app-accent {
    color:  /*@panel.icon.default*/  #FF3E01;
}

.app-native.app-has-sidebar-left #app-btn-menu.ui-icon-bars::after {
    color:  /*@header.icon.default,@theme.icon.light*/ #eee!important;
}

.app-bar-toolbar .app-avatar .app-icon-avatar {
    border-color:  /*@header.icon.default,@theme.icon.light*/ #eee;
}

.app-has-reading-pane .app-bar-toolbar .app-avatar .app-icon-avatar {
    border-color:  /*@panel.icon.default*/  #FF3E01;
}

.app-desktop .app-page-modal-title .app-btn:hover:not(.ui-btn-active),
.app-desktop:not(.app-hosted) .app-bar-toolbar .ui-btn:hover:not(.ui-btn-active):before,
.app-desktop:not(.app-hosted) .app-bar-toolbar .ui-btn:hover:not(.ui-btn-active):after,
.app-desktop:not(.app-hosted) .app-bar-toolbar .ui-btn:hover:not(.ui-btn-active),
.app-desktop:not(.app-hosted) .app-bar-toolbar .ui-btn:hover:not(.ui-btn-active) .app-icon,
.app-desktop:not(.app-hosted) .app-bar-toolbar .ui-btn:hover:not(.ui-btn-active) .app-icon:before,
.app-desktop:not(.app-hosted) .app-bar-toolbar .ui-btn:hover:not(.ui-btn-active) .app-icon:after,
.app-desktop:not(.app-hosted) .app-bar-toolbar .app-back-text:hover:not(.ui-btn-active),
.app-menu-strip-title,
.app-bar-buttons .app-has-icon.app-btn-close:hover {
    color:  /*@header.icon.hover,@theme.icon.hover*/ rgba(255,255,255,.75);
}

.app-desktop:not(.app-hosted).app-has-reading-pane .app-bar-toolbar .ui-btn:hover:not(.ui-btn-active) .app-icon,
.app-desktop:not(.app-hosted).app-has-reading-pane .app-bar-toolbar .ui-btn:hover:not(.ui-btn-active):after {
    color:  /*@panel.icon.active,@theme.readingPane.master.toolbar.hover*/  #333;
}

.app-desktop .app-bar-toolbar .app-avatar:hover:not(.ui-btn-active) .app-icon-avatar {
    border-color:  /*@header.icon.hover,@theme.icon.hover*/ rgba(255,255,255,.75);
}

.app-desktop.app-has-reading-pane .app-bar-toolbar .app-avatar:hover:not(.ui-btn-active) .app-icon-avatar {
    border-color:  /*@panel.icon.active*/  #000;
}

.app-page-modal-title .app-btn.ui-btn-active,
body:not(.app-hosted):not(.app-has-reading-pane) .app-bar-toolbar .ui-btn.ui-btn-active:before,
body:not(.app-hosted):not(.app-has-reading-pane) .app-bar-toolbar .ui-btn.ui-btn-active:after,
body:not(.app-hosted):not(.app-has-reading-pane) .app-bar-toolbar .ui-btn.ui-btn-active .app-icon,
body:not(.app-hosted):not(.app-has-reading-pane) .app-bar-toolbar .ui-btn.ui-btn-active .app-icon:before,
body:not(.app-hosted):not(.app-has-reading-pane) .app-bar-toolbar .ui-btn.ui-btn-active .app-icon:after,
body:not(.app-hosted):not(.app-has-reading-pane) .app-bar-toolbar .app-back-text.ui-btn-active {
    color:  /*@header.icon.active, @header.icon.hover,@theme.icon.active*/ rgba(255,255,255,.75);
}

.app-bar-toolbar .app-avatar.ui-btn-active .app-icon-avatar {
    border-color:  /*@header.icon.active,@theme.icon.active*/  #000;
}

body:not(.app-hosted) .app-bar-toolbar .app-menu-strip .ui-btn:not(.ui-btn-active),
body:not(.app-hosted) .app-bar-toolbar a.ui-btn.app-has-children:not(.ui-btn-active)::after {
    color:  /*@header.text.default,@theme.text.light*/ #f5f5f5;
}

body:not(.app-hosted).app-has-reading-pane .app-bar-toolbar .app-menu-strip .ui-btn:not(.ui-btn-active),
body:not(.app-hosted).app-has-reading-pane .app-bar-toolbar a.ui-btn.app-has-children:not(.ui-btn-active)::after {
    color:  /*@theme.readingPane.master.toolbar.default*/  #333;
}

.app-desktop:not(.app-hosted) .app-bar-toolbar .app-menu-strip .ui-btn:hover:not(.ui-btn-active),
.app-desktop .app-bar-toolbar a.ui-btn.app-has-children:hover:not(.ui-btn-active)::after {
    color:  /*@header.text.hover,@theme.text.hover*/ #fff;
}

.app-desktop:not(.app-hosted).app-has-reading-pane .app-bar-toolbar .app-menu-strip .ui-btn:hover:not(.ui-btn-active),
.app-desktop.app-has-reading-pane .app-bar-toolbar a.ui-btn.app-has-children:hover:not(.ui-btn-active)::after {
    color:  /*@theme.readingPane.master.toolbar.hover*/  #000;
}


.app-desktop:not(.app-has-popup-open) .app-menu-strip ul li a.ui-btn:hover:not(.ui-btn-active) {
    background-color:  /*@header.text.hoverBackground*/ rgba(0,0,0,0.05);
}

.app-menu-strip ul li a.ui-btn.app-selected:not(.ui-btn-active),
body.app-has-popup-open .app-menu-strip ul li a.ui-btn.app-selected:hover:not(.ui-btn-active) {
    background-color:  /*@header.text.selectedBackground*/ rgba(0,0,0,0.1);
}


.app-desktop.app-has-reading-pane :not(.app-has-popup-open) .app-menu-strip ul li a.ui-btn:hover:not(.ui-btn-active) {
    background-color:  /*@theme.readingPane.master.toolbar.hoverBackground,@header.text.hoverBackground*/ rgba(0,0,0,0.05);
}

.app-has-reading-pane .app-menu-strip ul li a.ui-btn.app-selected:not(.ui-btn-active),
body.app-has-reading-pane.app-has-popup-open .app-menu-strip ul li a.ui-btn.app-selected:hover:not(.ui-btn-active) {
    background-color:  /*@theme.readingPane.master.toolbar.selectedBackground,@header.text.selectedBackground*/ rgba(0,0,0,0.1);
}


.app-bar-toolbar .app-menu-strip .ui-btn.ui-btn-active,
.app-bar-toolbar a.ui-btn.app-has-children.ui-btn-active::after {
    color:  /*@header.text.active,@header.text.default,@theme.text.active*/ #f5f5f5;
}

.app-has-reading-pane .app-bar-toolbar .app-menu-strip .ui-btn.ui-btn-active,
.app-has-reading-pane .app-bar-toolbar a.ui-btn.app-has-children.ui-btn-active::after {
    color:  /*@theme.readingPane.master.toolbar.active*/  #000;
}

body:not(.app-hosted) .ui-bar-a .app-menu-strip .ui-btn:hover:not(.ui-btn-active),
body:not(.app-hosted) .ui-bar-a .app-menu-strip .ui-btn.app-selected:not(.ui-btn-active) {
    color:  /*@header.text.hover,@theme.text.hover*/ #fff;
}

body:not(.app-hosted).app-has-reading-pane .ui-bar-a .app-menu-strip .ui-btn:hover:not(.ui-btn-active),
body:not(.app-hosted).app-has-reading-pane .ui-bar-a .app-menu-strip .ui-btn.app-selected:not(.ui-btn-active) {
    color:  /*@theme.readingPane.master.toolbar.hover*/  #000;
}


body:not(.app-has-sidebar-left):not(.app-hosted) .app-bar-toolbar .app-logo,
.app-has-minisidebar-left .app-bar-toolbar .app-logo {
    color:  /*@header.text.logo*/ #fff;
}

body.app-has-reading-pane:not(.app-has-sidebar-left):not(.app-hosted) .app-bar-toolbar .app-logo,
.app-has-reading-pane-right.app-has-minisidebar-left .app-bar-toolbar .app-logo,
.app-has-reading-pane-right .app-bar-toolbar .app-menu-strip-title {
    color:  /*@theme.readingPane.master.toolbar.logo*/  #000;
}

/*actionbar*/
.app-bar-actions.ui-header,
.ui-listview > .ui-li-divider.app-list-instruction,
.app-presenter-instruction,
.app-grid-header .app-frozen-spacer,
.app-bar-header.ui-header {
    background-color:  /*@actionBar.background, @theme.background.3*/  #f1f1f1;
    border-color:  /*@theme.border.3*/  #ddd;
    color:  /*@actionBar.text.default,@theme.text.light*/  #808080;
}

.app-echo .app-grid-header,
.app-echo .ui-listview > .ui-li-divider.app-list-instruction {
    border-color:  /*@theme.border.2*/  #ddd;
}

.app-grid-header,
.app-display-flow .app-row-header,
.app-display-flow .app-row-header .app-column-header:after {
    background-color:  /*@actionBar.background, @theme.background.2*/  #f1f1f1;
    border-color:  /*@theme.border.2*/  #ddd;
}

.app-bar-actions .ui-btn,
.app-bar-actions h3 {
    color:  /*@actionBar.text.default,@theme.text.default*/  #333;
}

.app-page-header .app-icon,
.app-echo-toolbar h3,
.app-echo-see-all,
.app-echo .app-echo-toolbar > .app-echo-see-all,
.app-echo .app-echo-footer {
    color:  /*@theme.text.default*/  #333;
}

.app-desktop.app-bar-actions .ui-btn:hover:not(.ui-btn-active) {
    color:  /*@actionBar.text.hover,@actionBar.text.default,@theme.text.hover*/  #000;
}

.app-bar-actions .ui-btn.ui-btn-active {
    color:  /*@actionBar.text.active,@actionBar.text.default,@theme.text.active*/  #000;
}

.app-bar-actions .ui-btn:before,
.app-bar-actions .ui-btn:after,
.app-bar-actions .ui-btn .app-icon,
.app-bar-actions .ui-btn .app-icon:before,
.app-bar-actions .ui-btn .app-icon:after,
.app-bar-actions h3::after,
.app-desktop .app-grid .ui-btn:not(.ui-btn-active):hover .app-field-type-bool .app-icon {
    color:  /*@theme.actionBar.buttons.icon.default,@actionBar.icon.default,@theme.icon.light*/  #777;
}

.app-display-flow .app-gap.app-gap-bkg:not(.app-accent) {
    background-color:  /*@sidebar.full.background,@theme.background.4*/  #f6f6f6;
}

.app-control-toolbar,
.app-control-toolbar .app-shim-more {
    background-color:  /*@theme.background.4*/  #f6f6f6;
}


.app-echo .app-echo-toolbar h3::after {
    color:  /*@theme.icon.light*/  #777;
}

[data-layout="form"] .app-control-toolbar i,
[data-layout="form"] .app-control-toolbar .app-has-droparrow {
    color:  /*@panel.icon.default*/  #FF3E01;
}

.app-desktop .app-bar-actions .ui-btn:hover:not(.ui-btn-active):before,
.app-desktop .app-bar-actions .ui-btn:hover:not(.ui-btn-active):after,
.app-desktop .app-bar-actions .ui-btn:hover:not(.ui-btn-active) .app-icon,
.app-desktop .app-bar-actions .ui-btn:hover:not(.ui-btn-active) .app-icon:before,
.app-desktop .app-bar-actions .ui-btn:hover:not(.ui-btn-active) .app-icon:after,
.app-desktop [data-layout="form"] .app-control-toolbar i:hover:not(.app-active),
.app-desktop [data-layout="form"] .app-control-toolbar .app-has-droparrow:hover {
    color:  /*@actionBar.icon.hover,@theme.icon.hover*/  #000;
}

.app-bar-actions .ui-btn.ui-btn-active:before,
.app-bar-actions .ui-btn.ui-btn-active:after,
.app-bar-actions .ui-btn.ui-btn-active .app-icon,
.app-bar-actions .ui-btn.ui-btn-active .app-icon:before,
.app-bar-actions .ui-btn.ui-btn-active .app-icon:after {
    color:  /*@actionBar.text.active,@theme.text.active*/  #000;
}

.app-bar-actions .ui-btn-icon-notext.ui-btn-active:before,
.app-bar-actions .ui-btn-icon-notext.ui-btn-active:after,
.app-bar-actions .ui-btn-icon-notext.ui-btn-active .app-icon,
.app-bar-actions .ui-btn-icon-notext.ui-btn-active .app-icon:before,
.app-bar-actions .ui-btn-icon-notext.ui-btn-active .app-icon:after,
[data-layout="form"] .app-control-toolbar i.app-active,
.app-desktop [data-layout="form"] .app-control-toolbar i.app-active:hover {
    color:  /*@actionBar.icon.active,@theme.icon.active*/  #000;
}

[data-layout="form"] .app-control-toolbar .app-selected {
    color:  /*@panel.icon.hover*/ #FF3E01;
    background-color:  /*@actionBar.icon.selectedBackground*/  rgba(0,0,0,.1);
}

[data-layout="form"] .app-control-toolbar .app-disabled,
.app-desktop [data-layout="form"] .app-control-toolbar .app-disabled:hover,
.app-bar-buttons .app-has-icon.app-disabled,
.app-desktop .app-bar-buttons .ui-btn.app-disabled:hover:not(.ui-btn-active),
.app-desktop .app-bar-buttons .ui-btn.app-disabled:hover:not(.ui-btn-active) .app-icon {
    color:  /*@theme.actionBar.icon.disabled*/  #aaa;
}

/*modalActionBar or no sidebar action bar*/
.app-page-modal .app-bar-actions h3,
.ui-page.app-page-modal .app-bar-actions .ui-btn,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions h3,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-controls .ui-btn.app-selected,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-controls .ui-btn.app-selected:hover,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .ui-page.app-has-fixed-bar .app-page-header {
    color:  /*@theme.actionBar.buttons.text.default,@header.text.default,@theme.icon.default*/ #f5f5f5;
}

    .app-page-modal .app-bar-actions h3:after,
    .ui-page.app-page-modal .app-bar-actions .ui-btn::after,
    body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn:after,
    body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn.app-selected:after,
    body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions h3:after {
        color:  /*@theme.actionBar.buttons.icon.default,@header.text.default,@theme.icon.default*/ #f5f5f5;
    }

.app-desktop .app-page-modal .app-bar-actions h3:hover:not(.ui-btn-active),
.app-desktop .ui-page.app-page-modal .app-bar-actions .ui-btn:hover:not(.ui-btn-active),
body.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn:hover:not(.ui-btn-active),
body.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions h3:hover:not(.ui-btn-active) {
    color:  /*@header.text.hover,@header.text.default,@theme.text.hover*/ #fff;
}

    .app-desktop .app-page-modal .app-bar-actions h3:hover:not(.ui-btn-active):after,
    .app-desktop .ui-page.app-page-modal .app-bar-actions .ui-btn:hover:not(.ui-btn-active)::after,
    body.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn:hover:not(.ui-btn-active):after,
    body.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions h3:hover:not(.ui-btn-active):after {
        color:  /*@header.text.hover,@header.text.default,@theme.text.hover*/ #fff;
    }

.app-page-modal .app-bar-actions h3.ui-btn-active,
.ui-page.app-page-modal .app-bar-actions .ui-btn.ui-btn-active,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn.ui-btn-active,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions h3.ui-btn-active {
    color:  /*@header.text.active,@header.text.default,@theme.text.active*/ #f5f5f5;
}

    .app-page-modal .app-bar-actions h3.ui-btn-active:after,
    .ui-page.app-page-modal .app-bar-actions .ui-btn.ui-btn-active::after,
    body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn.ui-btn-active:after,
    body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions h3.ui-btn-active:after {
        color:  /*@header.text.active,@header.text.default,@theme.text.active*/ #f5f5f5;
    }

body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn:before,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn:not(.app-has-children):after,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn .app-icon,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn .app-icon:before,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn .app-icon:after,
.ui-page.app-page-modal .app-bar-actions .ui-btn:before,
.ui-page.app-page-modal .app-bar-actions .ui-btn:not(.app-has-children):after,
.ui-page.app-page-modal .app-bar-actions .ui-btn .app-icon,
.ui-page.app-page-modal .app-bar-actions .ui-btn .app-icon:before,
.ui-page.app-page-modal .app-bar-actions .ui-btn .app-icon:after {
    color:  /*@theme.actionBar.buttons.icon.default,@header.icon.default,@theme.icon.light*/ #eee;
}

.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn:hover:not(.ui-btn-active):before,
.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn:hover:not(.ui-btn-active):after,
.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn:hover:not(.ui-btn-active) .app-icon,
.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn:hover:not(.ui-btn-active) .app-icon:before,
.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane-) .app-bar-actions .ui-btn:hover:not(.ui-btn-active) .app-icon:after,
.app-desktop .app-page-modal .app-bar-actions .ui-btn:hover:not(.ui-btn-active):before,
.app-desktop .app-page-modal .app-bar-actions .ui-btn:hover:not(.ui-btn-active):after,
.app-desktop .app-page-modal .app-bar-actions .ui-btn:hover:not(.ui-btn-active) .app-icon,
.app-desktop .app-page-modal .app-bar-actions .ui-btn:hover:not(.ui-btn-active) .app-icon:before,
.app-desktop .app-page-modal .app-bar-actions .ui-btn:hover:not(.ui-btn-active) .app-icon:after {
    color:  /*@theme.actionBar.buttons.icon.default,@header.icon.default*/ #eee;
}

body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn.ui-btn-active:before,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn.ui-btn-active:after,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn.ui-btn-active .app-icon,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn.ui-btn-active .app-icon:before,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn.ui-btn-active .app-icon:after,
.ui-page.app-page-modal .app-bar-actions .ui-btn.ui-btn-active:before,
.ui-page.app-page-modal .app-bar-actions .ui-btn.ui-btn-active:after,
.ui-page.app-page-modal .app-bar-actions .ui-btn.ui-btn-active .app-icon,
.ui-page.app-page-modal .app-bar-actions .ui-btn.ui-btn-active .app-icon:before,
.ui-page.app-page-modal .app-bar-actions .ui-btn.ui-btn-active .app-icon:after {
    color:  /*@header.icon.default,@theme.icon.light*/ #eee;
}


.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn-icon-notext:hover:not(.ui-btn-active):before,
.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn-icon-notext:hover:not(.ui-btn-active):after,
.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn-icon-notext:hover:not(.ui-btn-active) .app-icon,
.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn-icon-notext:hover:not(.ui-btn-active) .app-icon:before,
.app-desktop:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn-icon-notext:hover:not(.ui-btn-active) .app-icon:after {
    color:  /*@header.icon.hover,@theme.icon.hover*/ rgba(255,255,255,.75);
}


body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn-icon-notext.ui-btn-active:before,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn-icon-notext.ui-btn-active:after,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn-icon-notext.ui-btn-active .app-icon,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn-icon-notext.ui-btn-active .app-icon:before,
body:not(.app-has-sidebar-left):not(.app-has-reading-pane) .app-bar-actions .ui-btn-icon-notext.ui-btn-active .app-icon:after {
    color:  /*@header.icon.active,@theme.icon.active*/  #000;
}


/*sidebar.full*/

.app-sidebar {
    background-color:  /*@sidebar.full.background,@theme.background.4*/  #f6f6f6;
    border-color:  /*@sidebar.full.border,@theme.border.4*/  #ccc;
}

    .app-sidebar .ui-li-static,
    .app-calendar-plugin,
    .app-calendar-plugin .app-calendar-color-legend {
        background-color:  /*@sidebar.full.contentBackground,@sidebar.full.background,@theme.background.1*/  #fff;
        border-color:  /*@sidebar.full.border,@theme.border.1*/  #ddd;
    }

    .app-sidebar .ui-listview > li.ui-last-child > a.ui-btn {
        border-color:  /*@sidebar.full.border,@theme.border.1*/  #ddd;
    }

    .app-sidebar .ui-li-divider:not(.app-list-instruction) {
        background-color:  /*@sidebar.full.border,@theme.border.4*/  #ccc;
    }



    .app-sidebar .ui-panel-inner .ui-btn:before,
    .app-sidebar .ui-panel-inner .ui-btn:after,
    .app-sidebar .ui-panel-inner .ui-btn .app-icon,
    .app-sidebar .ui-panel-inner .ui-btn .app-icon:before,
    .app-sidebar .ui-panel-inner .ui-btn .app-icon:after {
        color:  /*@sidebar.full.icon.default,@theme.icon.light*/  #777;
    }

.app-reading-pane-splitter::after {
    background-color:  /*@theme.border.4*/  #ccc;
}

.app-desktop .app-sidebar .ui-panel-inner .ui-btn:hover:not(.ui-btn-active):before,
.app-desktop .app-sidebar .ui-panel-inner .ui-btn:hover:not(.ui-btn-active):after,
.app-desktop .app-sidebar .ui-panel-inner .ui-btn:hover:not(.ui-btn-active) .app-icon,
.app-desktop .app-sidebar .ui-panel-inner .ui-btn:hover:not(.ui-btn-active) .app-icon:before,
.app-desktop .app-sidebar .ui-panel-inner .ui-btn:hover:not(.ui-btn-active) .app-icon:after {
    color:  /*@sidebar.full.icon.hover,@theme.icon.hover*/  #000;
}

.app-sidebar .ui-panel-inner .ui-btn.ui-btn-active:before,
.app-sidebar .ui-panel-inner .ui-btn.ui-btn-active:after,
.app-sidebar .ui-panel-inner .ui-btn.ui-btn-active .app-icon,
.app-sidebar .ui-panel-inner .ui-btn.ui-btn-active .app-icon:before,
.app-sidebar .ui-panel-inner .ui-btn.ui-btn-active .app-icon:after {
    color:  /*@sidebar.full.icon.active,@theme.icon.active*/  #000;
}


.app-has-sidebar-left .app-bar-toolbar-bottom {
    border-color:  /*@sidebar.full.border,@theme.border.4*/  #ccc;
    background-color:  /*@sidebar.full.background, @theme.background.4*/  #f6f6f6;
}

    .app-has-sidebar-left .app-bar-toolbar-bottom.app-has-icons {
        border-color:  /*@sidebar.full.toolbar.border, @sidebar.full.border,@theme.border.5*/ #561C0F;
        background-color:  /*@sidebar.full.toolbar.background, @sidebar.full.background,@theme.background.5*/ #561C0F;
    }

.app-sidebar .app-bar-toolbar-bottom .ui-btn.app-selected:not(.ui-btn-active)::before {
    background-color:  /*@sidebar.full.toolbar.selectedColor, @sidebar.full.selectedColor,@header.background*/ #fff;
}

.app-sidebar .app-option-selected:before,
.app-bar-buttons .app-tools .app-tool.app-selected::before {
    background-color:  /*@sidebar.full.selectedColor,@buttons.menu.background, @header.background*/ #561C0F;
}

.app-sidebar .ui-panel-inner .ui-btn,
.app-sidebar .ui-panel-inner .app-calendar-plugin table,
.app-sidebar .ui-panel-inner .ui-li-static,
.app-sidebar .ui-panel-inner .app-calendar-color-legend li {
    color:  /*@sidebar.full.text.default,@theme.text.default*/  #333;
}

.app-bar-toolbar-bottom .ui-btn.app-btn-settings,
.app-bar-toolbar-bottom .ui-btn.app-btn-settings .app-text {
    color:  /*@sidebar.full.toolbar.text,@sidebar.full.text.default,@theme.text.default*/ #fff;
}

.app-sidebar .app-has-droparrow::after {
    border-top-color:  /*@sidebar.full.text.default,@theme.text.default*/  #333;
}

.app-desktop .app-sidebar .ui-panel-inner .ui-btn:hover:not(.ui-btn-active) {
    color:  /*@sidebar.full.text.hover,@theme.text.hover*/  #000;
}

.app-desktop .app-sidebar .app-has-droparrow:hover:not(.ui-btn-active)::after {
    border-top-color:  /*@sidebar.full.text.hover,@theme.text.hover*/  #000;
}

.app-sidebar .ui-panel-inner .ui-btn.ui-btn-active {
    color:  /*@sidebar.full.text.active,@theme.text.active*/  #000;
}

.app-sidebar .app-has-droparrow.ui-btn-active::after {
    border-top-color:  /*@sidebar.full.text.active,@theme.text.active*/  #000;
}

.app-sidebar .app-item-desc,
.app-sidebar .ui-panel-inner .ui-li-static.app-wrap,
.app-sidebar .app-calendar-plugin table tr:not(.ui-btn-active) td.app-prev-month,
.app-sidebar .app-calendar-plugin table tr:not(.ui-btn-active) td.app-next-month,
.app-sidebar .app-calendar-plugin table tr:not(.ui-btn-active) td.app-day-unselectable {
    color:  /*@sidebar.full.text.static*/  #999;
}

.app-sidebar .ui-btn:not(.ui-btn-active) .app-icon.material-icon.material-icon-chevron-right {
    color:  /*@sidebar.full.text.static*/  #acacac !important;
}

.app-bar-toolbar-bottom .ui-btn:before,
.app-bar-toolbar-bottom .ui-btn:after,
.app-bar-toolbar-bottom .ui-btn .app-icon,
.app-bar-toolbar-bottom .ui-btn .app-icon:before,
.app-bar-toolbar-bottom .ui-btn .app-icon:after {
    color:  /*@sidebar.full.icon.default,@theme.icon.light*/  #777;
}

.app-desktop .app-bar-toolbar-bottom .ui-btn.app-btn-settings:hover:not(.ui-btn-active),
.app-desktop .app-bar-toolbar-bottom .ui-btn:hover:not(.ui-btn-active):before,
.app-desktop .app-bar-toolbar-bottom .ui-btn:hover:not(.ui-btn-active):after,
.app-desktop .app-bar-toolbar-bottom .ui-btn:hover:not(.ui-btn-active) .app-icon,
.app-desktop .app-bar-toolbar-bottom .ui-btn:hover:not(.ui-btn-active) .app-icon:before,
.app-desktop .app-bar-toolbar-bottom .ui-btn:hover:not(.ui-btn-active) .app-icon:after {
    color:  /*@sidebar.full.toolbar.icon.hover,@sidebar.full.icon.hover,@theme.icon.hover*/ #fff!important;
}

.app-bar-toolbar-bottom .ui-btn.app-btn-settings.ui-btn-active,
.app-bar-toolbar-bottom .ui-btn.ui-btn-active:before,
.app-bar-toolbar-bottom .ui-btn.ui-btn-active:after,
.app-bar-toolbar-bottom .ui-btn.ui-btn-active .app-icon,
.app-bar-toolbar-bottom .ui-btn.ui-btn-active .app-icon:before,
.app-bar-toolbar-bottom .ui-btn.ui-btn-active .app-icon:after {
    color:  /*@sidebar.full.toolbar.icon.active,@sidebar.full.icon.active,@theme.icon.active*/ #fff;
}

.app-bar-toolbar-bottom.app-has-icons .ui-btn.app-btn-settings,
.app-bar-toolbar-bottom.app-has-icons .ui-btn:before,
.app-bar-toolbar-bottom.app-has-icons .ui-btn:after,
.app-bar-toolbar-bottom.app-has-icons .ui-btn .app-icon,
.app-bar-toolbar-bottom.app-has-icons .ui-btn .app-icon:before,
.app-bar-toolbar-bottom.app-has-icons .ui-btn .app-icon:after {
    color:  /*@sidebar.full.toolbar.icon.default, @sidebar.full.icon.default,@theme.icon.default*/ #fff;
}

.app-desktop .app-bar-toolbar-bottom.app-has-icons .ui-btn.app-btn-settings:hover:not(.ui-btn-active),
.app-desktop .app-bar-toolbar-bottom.app-has-icons .ui-btn:hover:not(.ui-btn-active):before,
.app-desktop .app-bar-toolbar-bottom.app-has-icons .ui-btn:hover:not(.ui-btn-active):after,
.app-desktop .app-bar-toolbar-bottom.app-has-icons .ui-btn:hover:not(.ui-btn-active) .app-icon,
.app-desktop .app-bar-toolbar-bottom.app-has-icons .ui-btn:hover:not(.ui-btn-active) .app-icon:before,
.app-desktop .app-bar-toolbar-bottom.app-has-icons .ui-btn:hover:not(.ui-btn-active) .app-icon:after {
    color:  /*@sidebar.full.toolbar.icon.hover, @sidebar.full.icon.hover,@theme.icon.hover*/ #fff;
}

.app-bar-toolbar-bottom.app-has-icons .ui-btn.app-btn-settings.ui-btn-active,
.app-bar-toolbar-bottom.app-has-icons .ui-btn.ui-btn-active:before,
.app-bar-toolbar-bottom.app-has-icons .ui-btn.ui-btn-active:after,
.app-bar-toolbar-bottom.app-has-icons .ui-btn.ui-btn-active .app-icon,
.app-bar-toolbar-bottom.app-has-icons .ui-btn.ui-btn-active .app-icon:before,
.app-bar-toolbar-bottom.app-has-icons .ui-btn.ui-btn-active .app-icon:after {
    color:  /*@sidebar.full.toolbar.icon.active, @sidebar.full.icon.active,@theme.icon.active*/ #fff;
}

/*sidebar.mini*/
.app-has-minisidebar-left .app-sidebar {
    background-color:  /*@sidebar.mini.background,@sidebar.full.background,@theme.background.4*/  #FF3E01;
    border-color:  /*@sidebar.mini.border,@sidebar.full.border,@theme.border.4*/  #FF3E01;
}

    .app-has-minisidebar-left .app-sidebar .ui-li-static {
        background-color:  /*@sidebar.mini.contentBackground,@sidebar.mini.background,@sidebar.full.contentBackground,@sidebar.full.background,@theme.background.1*/  #FF3E01;
        border-color:  /*@sidebar.mini.border,@sidebar.full.border,@theme.border.1*/  #FF3E01;
    }

    .app-has-minisidebar-left .app-sidebar .ui-li-divider:not(.app-list-instruction) {
        background-color:  /*@sidebar.mini.border,@sidebar.full.border,@theme.border.4*/  #FF3E01;
    }

    .app-has-minisidebar-left .app-sidebar .ui-btn,
    .app-has-minisidebar-left .app-sidebar .ui-btn:before,
    .app-has-minisidebar-left .app-sidebar .ui-btn:after,
    .app-has-minisidebar-left .app-sidebar .ui-btn .app-icon,
    .app-has-minisidebar-left .app-sidebar .ui-btn .app-icon:before,
    .app-has-minisidebar-left .app-sidebar .ui-btn .app-icon:after {
        color:  /*@sidebar.mini.icon.default,@sidebar.full.icon.default,@theme.icon.light*/ #fff;
    }

.app-desktop.app-has-minisidebar-left .app-sidebar .ui-btn:hover:not(.ui-btn-active),
.app-desktop.app-has-minisidebar-left .app-sidebar .ui-btn:hover:not(.ui-btn-active):before,
.app-desktop.app-has-minisidebar-left .app-sidebar .ui-btn:hover:not(.ui-btn-active):after,
.app-desktop.app-has-minisidebar-left .app-sidebar .ui-btn:hover:not(.ui-btn-active) .app-icon,
.app-desktop.app-has-minisidebar-left .app-sidebar .ui-btn:hover:not(.ui-btn-active) .app-icon:before,
.app-desktop.app-has-minisidebar-left .app-sidebar .ui-btn:hover:not(.ui-btn-active) .app-icon:after {
    color:  /*@sidebar.mini.icon.hover,@sidebar.full.icon.hover,@theme.icon.hover*/ #e5e5e5;
}

.app-has-minisidebar-left .app-sidebar .ui-btn.ui-btn-active,
.app-has-minisidebar-left .app-sidebar .ui-btn.ui-btn-active:before,
.app-has-minisidebar-left .app-sidebar .ui-btn.ui-btn-active:after,
.app-has-minisidebar-left .app-sidebar .ui-btn.ui-btn-active .app-icon,
.app-has-minisidebar-left .app-sidebar .ui-btn.ui-btn-active .app-icon:before,
.app-has-minisidebar-left .app-sidebar .ui-btn.ui-btn-active .app-icon:after {
    color:  /*@sidebar.mini.icon.active,@sidebar.full.icon.active,@theme.icon.active*/ #eee;
}

.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn:not(.ui-btn-active):before,
.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn:not(.ui-btn-active):after,
.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn:not(.ui-btn-active) .app-icon,
.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn:not(.ui-btn-active) .app-icon:before,
.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn:not(.ui-btn-active) .app-icon:after {
    color:  /*@sidebar.mini.toolbar.icon.default, @sidebar.mini.icon.default,@sidebar.full.toolbar.icon.default, @sidebar.full.icon.default,@theme.icon.default*/ #fff;
}

.app-desktop.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn:hover:not(.ui-btn-active):before,
.app-desktop.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn:hover:not(.ui-btn-active):after,
.app-desktop.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn:hover:not(.ui-btn-active) .app-icon,
.app-desktop.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn:hover:not(.ui-btn-active) .app-icon:before,
.app-desktop.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn:hover:not(.ui-btn-active) .app-icon:after {
    color:  /*@sidebar.mini.toolbar.icon.hover, @sidebar.mini.icon.hover,@sidebar.full.toolbar.icon.hover, @sidebar.full.icon.hover,@theme.icon.hover*/ #fff;
}

.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn.ui-btn-active:before,
.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn.ui-btn-active:after,
.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn.ui-btn-active .app-icon,
.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn.ui-btn-active .app-icon:before,
.app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons .ui-btn.ui-btn-active .app-icon:after {
    color:  /*@sidebar.mini.toolbar.icon.active, @sidebar.mini.icon.active,@sidebar.full.toolbar.icon.active, @sidebar.full.icon.active,@theme.icon.active*/ #fff;
}

.app-desktop .app-has-minisidebar-left .ui-btn:not(.ui-btn-active):not(.app-selected):hover,
.app-desktop .app-has-minisidebar-left .app-calendar-plugin table tr:not(.ui-btn-active) td:hover:not(.ui-btn-active):not(.app-day-unselectable) {
    background-color:  /*@sidebar.mini.hoverBackground,@sidebar.full.hoverBackground,@theme.background.hover*/  rgba(0,0,0,0.05);
}

.app-has-minisidebar-left .app-bar-toolbar-bottom {
    border-color:  /*@sidebar.mini.border,@sidebar.full.border, @theme.border.5*/  #FF3E01;
    background-color:  /*@sidebar.mini.background,@sidebar.full.background,@theme.background.5*/  #FF3E01;
}

    .app-has-minisidebar-left .app-bar-toolbar-bottom.app-has-icons {
        border-color:  /*@sidebar.mini.toolbar.border, @sidebar.mini.border,@sidebar.full.toolbar.border, @sidebar.full.border, @theme.border.5*/  #FF3E01;
        background-color:  /*@sidebar.mini.toolbar.background, @sidebar.mini.background,@sidebar.full.toolbar.background, @sidebar.full.background, @theme.background.5*/  #FF3E01;
    }

    .app-has-minisidebar-left .app-bar-toolbar-bottom .ui-btn.app-selected:not(.ui-btn-active)::before {
        background-color:  /*@sidebar.mini.toolbar.selectedColor, @sidebar.mini.selectedColor,@sidebar.full.toolbar.selectedColor, @sidebar.full.selectedColor,@header.background*/ #fff;
    }

.app-has-minisidebar-left .app-sidebar .app-option-selected:before {
    background-color:  /*@sidebar.mini.selectedColor,@sidebar.full.selectedColor,@header.background*/ #fff;
}

/*panels/popups*/
div[data-role="panel"] .ui-btn:before,
div[data-role="panel"] .ui-btn:after,
div[data-role="panel"] .ui-btn .app-icon,
div[data-role="panel"] .ui-btn .app-icon:before,
div[data-role="panel"] .ui-btn .app-icon:after,
.ui-popup .ui-btn:before,
.ui-popup .ui-btn:after,
.ui-popup .ui-btn .app-icon,
.ui-popup .ui-btn .app-icon:before,
.ui-popup .ui-btn .app-icon:after,
.app-bar-notify .ui-btn,
.app-item-state.material-icon,
.app-kiosk > .ui-btn:after,
.app-kiosk > .app-btn i {
    color:  /*@panel.icon.default,@theme.icon.light*/  #FF3E01;
}

.ui-listview .app-avatar .app-icon-avatar {
    border-color:  /*@panel.icon.default*/  #FF3E01;
}


.app-desktop div[data-role="panel"] .ui-btn:hover:not(.ui-btn-active):before,
.app-desktop div[data-role="panel"] .ui-btn:hover:not(.ui-btn-active):after,
.app-desktop div[data-role="panel"] .ui-btn:hover:not(.ui-btn-active) .app-icon,
.app-desktop div[data-role="panel"] .ui-btn:hover:not(.ui-btn-active) .app-icon:before,
.app-desktop div[data-role="panel"] .ui-btn:hover:not(.ui-btn-active) .app-icon:after,
.app-desktop .ui-popup .ui-btn:hover:not(.ui-btn-active):before,
.app-desktop .ui-popup .ui-btn:hover:not(.ui-btn-active):after,
.app-desktop .ui-popup .ui-btn:hover:not(.ui-btn-active) .app-icon,
.app-desktop .ui-popup .ui-btn:hover:not(.ui-btn-active) .app-icon:before,
.app-desktop .ui-popup .ui-btn:hover:not(.ui-btn-active) .app-icon:after {
    color:  /*@panel.icon.hover,@theme.icon.hover*/ #FF3E01;
}

/* tabbar (bottom tabs) */

.app-bar-tabs ul li.app-selected span,
.app-bar-tabs ul li.app-selected .app-icon {
    color:  /*@buttons.tabbar.icon.default,@panel.icon.default,@theme.icon.default*/  #FF3E01;
}


.ui-listview .app-avatar:hover:not(.ui-btn-active) .app-icon-avatar {
    border-color:  /*@panel.icon.hover,@theme.icon.hover*/ #FF3E01;
}

div[data-role="panel"] .ui-btn.ui-btn-active:before,
div[data-role="panel"] .ui-btn.ui-btn-active:after,
div[data-role="panel"] .ui-btn.ui-btn-active .app-icon,
div[data-role="panel"] .ui-btn.ui-btn-active .app-icon:before,
div[data-role="panel"] .ui-btn.ui-btn-active .app-icon:after,
.ui-popup .ui-btn.ui-btn-active:before,
.ui-popup .ui-btn.ui-btn-active:after,
.ui-popup .ui-btn.ui-btn-active .app-icon,
.ui-popup .ui-btn.ui-btn-active .app-icon:before,
.ui-popup .ui-btn.ui-btn-active .app-icon:after {
    color:  /*@panel.icon.hover,@theme.icon.hover*/ #FF3E01;
}


.ui-listview .app-avatar.ui-btn-active .app-icon-avatar {
    border-color:  /*@panel.icon.active,@theme.icon.active*/  #fff;
}

.ui-popup .ui-btn-icon-notext.ui-btn-active:before,
.ui-popup .ui-btn-icon-notext.ui-btn-active:after,
.ui-popup .ui-btn-icon-notext.ui-btn-active .app-icon,
.ui-popup .ui-btn-icon-notext.ui-btn-active .app-icon:before,
.ui-popup .ui-btn-icon-notext.ui-btn-active .app-icon:after {
    color:  /*@panel.icon.active,@theme.icon.active*/  #000;
}

div[data-role="panel"] .app-item-tile .ui-btn.app-item-selected:not(.ui-btn-active),
div[data-role="panel"] .app-item-tile .ui-btn.app-item-selected:not(.ui-btn-active) .app-icon::after,
div[data-role="panel"] .app-item-tile .ui-btn.app-item-selected:not(.ui-btn-active) .app-icon::before,
div[data-role="panel"] .app-item-tile .ui-btn.app-item-selected:not(.ui-btn-active) .app-icon {
    color:  /*@panel.tile.selected,@theme.icon.active*/  #000;
}

/*buttons.form*/
.app-bar-buttons .ui-btn {
    color:  /*@buttons.form.text.default,@theme.icon.default,@theme.text.default*/  #333;
}

.app-reading-pane-detail.app-page-modal /*.ui-page-active*/ .ui-header.ui-header-fixed.app-bar-header .app-bar-buttons .ui-btn,
.app-bar-buttons .app-has-icon.app-btn-close {
    color:  /*@readingPane.detail.toolbar.buttons.default,@theme.readingPane.detail.toolbar.buttons.default*/  #fff;
}

.app-desktop .app-bar-buttons .ui-btn:hover:not(.ui-btn-active) {
    color:  /*@buttons.form.text.hover,@theme.text.hover*/  #333;
}

/*.app-bar-buttons .ui-btn.ui-btn-active {
    color:*/ /*@buttons.form.text.active,@theme.text.active*/ /*#333;
}*/

[data-layout="form"] .app-icon {
    color:  /*@buttons.form.icon.default,@buttons.form.text.default*/  #555;
}

.app-desktop .ui-btn:not(.ui-btn-active):not(.app-btn-float):hover .app-icon,
.app-desktop .app-filter-clear:hover,
.app-desktop .app-bar-calendar .ui-btn:hover:not(.ui-btn-active)::after {
    color:  /*@panel.icon.hover,@buttons.form.icon.hover,@buttons.form.text.hover,@theme.icon.hover*/ #FF3E01;
}

.app-desktop [data-layout="form"] .app-icon:hover:not(.ui-btn-active),
.app-desktop .app-control-inner .app-field-object-ref:not(.ui-btn-active):hover,
.app-desktop .ui-btn:hover:not(.ui-btn-active)::after,
.app-desktop .ui-btn:hover:not(.ui-btn-active) .glyphicon::before,
.app-desktop .app-bar-actions h3:hover::after,
.app-desktop .app-echo .app-echo-toolbar h3:hover::after,
.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:  /*@buttons.form.icon.hover,@buttons.form.text.hover,@theme.icon.hover*/  #000;
}

[data-layout="form"] .app-icon.ui-btn-active {
    color:  /*@buttons.form.icon.active,@buttons.form.text.active,@theme.icon.active*/  #38c;
}

[data-input="radiobuttonlist"] .app-data-list li.app-selected::after,
[data-input] .app-data-list li.app-selected,
[data-input="checkboxlist"] .app-data-list li.app-selected::after,
.app-toolbox-form .app-color.app-selected:after,
.app-action-column .app-action-column-button,
[data-input="listbox"] .app-data-list.app-data-list-actions li,
[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:hover {
    border-color:  /*@buttons.form.icon.active,@form.tabColor,@header.background*/  #FF3E01;
}

    .app-input-slider .app-input-slider-track,
    .app-input-slider .app-input-slider-track-value,
    .app-input-slider .app-input-slider-value,
    .app-input-slider .app-input-slider-halo,
    [data-input="radiobuttonlist"] .app-data-list li::before,
    [data-input="checkboxlist"] .app-data-list li.app-selected::after,
    .app-action-column .app-action-column-button.ui-btn-active,
    [data-control="action"] .app-action-column-button.ui-btn-active,
    .app-desktop .app-action-column .app-action-column-button: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:hover*/ {
        background-color:  /*@buttons.form.icon.active,@form.tabColor,@header.background*/  #FF3E01;
    }

/*modal*/
.app-has-popup-open.app-has-panel-open .in.ui-popup-screen,
.app-page-modal-background {
    background-color:  /*@modal.background,@theme.background.transparent2*/  rgba(0,0,0,.3);
}

.app-has-modal-glass-pane-partial .app-page-modal-background,
.app-has-modal-glass-pane-transparent .app-page-modal-background {
    background-color:  /*@modal.background,@theme.background.transparent*/  rgba(0,0,0,.515);
}

.app-has-popup-open.app-has-panel-open .in.ui-popup-screen,
.app-page-modal-glass-pane {
    background-color:  /*@modal.background,@theme.background.transparent3,@theme.background.transparent2*/  rgba(0,0,0,.3);
}

.app-page-modal-title,
.ui-page.app-page-modal .app-page-header {
    background-color:  /*@modal.header.background, @header.background*/  #FF3E01;
}

/*system*/
.app-has-depth .ui-btn.app-item-selected,
.app-has-depth .ui-btn.app-item-selected:hover:not(.ui-btn-active),
.ui-popup .app-has-depth .app-item-selected:not(:hover):not(.ui-btn-active):not(.app-checked),
.ui-popup .app-has-depth .app-item-selected:hover:not(.ui-btn-active) {
    background-color:  /*@system.selectedBackground,@theme.background.hover*/  rgba(0,0,0,.075);
}

.app-bar-toolbar .app-back-text {
    max-width:  /*@system.backTextMaxWidth*/  75%;
}

.app-desktop .ui-btn:not(.ui-btn-active):not(.app-selected):not(.app-calculated):hover,
.app-desktop .app-calendar-plugin table td:hover:not(.ui-btn-active):not(.app-day-unselectable):not(.app-selected),
.app-desktop [data-layout="form"] .app-control-toolbar > i:hover:not(.app-active):not(.app-disabled),
.app-desktop [data-layout="form"] .app-control-toolbar > .app-has-droparrow:hover,
.app-desktop .app-bar-actions h3:hover,
.app-desktop .app-echo .app-echo-toolbar h3:hover,
.dv-action-see-all .app-btn-prev.ui-btn-active,
.dv-action-see-all .app-btn-next.ui-btn-active,
.app-group .app-group-path.ui-btn-active,
.app-group .app-group-title.ui-btn-active,
.app-desktop .dv-action-see-all .app-btn-prev:not(.app-btn-disabled):hover,
.app-desktop .dv-action-see-all .app-btn-next:not(.app-btn-disabled):hover,
.app-desktop .dv-action-see-all .app-info:hover {
    background-color:  /*@system.hoverBackground,@theme.background.hover*/  rgba(0,0,0,0.05);
}

.app-desktop .app-btn-promo:not(.ui-btn-active):not(.app-selected):hover:after {
    background-color:  /*@background.hoverPromo,@theme.background.hoverPromo*/  rgba(0,0,0,0.2);
}

.app-desktop .ui-btn.app-disabled:hover {
    background-color: inherit !important;
}

.app-desktop .app-reading-pane-detail .app-bar-buttons .ui-btn:not(.ui-btn-active):not(.app-selected):not(.app-calculated):hover /*,
.app-desktop .app-reading-pane-detail.ui-page-theme-a .app-bar-buttons .ui-btn.ui-btn-active */ {
    background-color:  /*@readingPane.detail.toolbar.hoverBackground*/  rgba(0,0,0,0.05);
}

.app-desktop .app-sidebar .ui-btn:not(.ui-btn-active):not(.app-selected):hover,
.app-desktop .app-sidebar .app-calendar-plugin table tr:not(.ui-btn-active) td:hover:not(.ui-btn-active):not(.app-day-unselectable) {
    background-color:  /*@sidebar.full.hoverBackground,@theme.background.hover*/  rgba(0,0,0,0.05);
}

.app-calendar-yearview .app-calendar-month td.app-has-data:not(.app-current-day):not(.ui-btn-active) {
    background-color:  /*@theme.background.2*/  #e9e9e9;
}

.app-calendar .app-calendar-month-header,
.app-calendar-yearview .app-calendar-month-header:not(.ui-btn-active),
.app-calendar-agenda-list .app-calendar-month-header:not(.ui-btn-active) {
    color:  /*@panel.icon.default*/  #FF3E01;
}

.dataview-busy-indicator {
    background-color:  /*@system.busyIndicator*/ #9b870c;
}

.app-option-selected::before,
.app-item-selected::before,
.app-listview .app-selected.ui-btn::before {
    background-color:  /*@system.select.bar,@buttons.menu.background,@header.background*/ #561C0F;
}

.app-has-depth .app-btn.app-show-selected {
    color:  /*@system.select.bar,@buttons.menu.background,@header.background*/ #561C0F;
}

/* focused input effects - underlined and outlined */
.app-input-focus-underline [data-control="field"].app-has-focus::before {
    background-color:  /*@panel.icon.default,@theme.icon.light*/  #FF3E01;
}

.app-input-focus-outline [data-control="field"].app-has-focus {
    border-color:  /*@panel.icon.default,@theme.icon.light*/  #FF3E01;
}

.app-input-focus-label [data-control="label"].app-has-focus {
    color:  /*@panel.icon.default,@theme.icon.light*/  #FF3E01;
}

/* tabs */
.app-desktop .app-tabs .ui-btn:not(.ui-btn-active):not(.app-selected):hover {
    background-color: transparent;
}

.app-tabs .ui-btn.app-tab-active,
.app-tabs .ui-btn.ui-btn-active {
    color:  /*@theme.form.activeTabText,@form.activeTabText*/  #fff;
    background-color:  /*@form.tabColor,@header.background*/  #FF3E01;
}

.app-tabs .ui-btn,
.app-tabs .ui-btn.app-tab-active,
.app-tabs .ui-btn.ui-btn-active,
body:not(.app-desktop) .app-tabs .ui-btn,
.app-desktop .app-tabs .ui-btn:not(.ui-btn-active):not(.app-selected):hover {
    border-color:  /*@form.tabColor, @header.background*/  #FF3E01;
}

    [data-input="listbox"] .app-data-list.app-data-list-actions li,
    .app-action-column .app-action-column-button:not(.ui-btn-active),
    .app-tabs .ui-btn:not(.ui-btn-active) {
        color:  /*@form.tabText,@form.tabColor, @header.background*/  #FF3E01;
        background-color:  /*@theme.background.1*/  #fff;
    }


.ui-overlay-shadow {
    box-shadow:  /*@theme.boxShadow.popup*/  0 0 20px rgba(0,0,0,.8);
}


/* status bar */

.app-status-bar li.Segment,
.app-status-bar li.Segment.First,
.app-status-bar .Segment.PastToCurrent span.Inner,
.app-status-bar .Segment span.Inner,
.app-status-bar .Segment span.Inner::after {
    border-color:  /*@theme.border.4*/  #ccc;
    background-color:  /*@theme.background.2*/  #e5e5e5;
    color:  /*@theme.text.default*/  #333;
}

.app-status-bar .Segment.Future,
.app-status-bar .Segment.Future span.Self,
.app-status-bar .Segment.Future span.Inner::after {
    background-color:  /*@theme.background.1*/  #fff;
    border-color:  /*@theme.border.4*/  #ccc;
    color:  /*@theme.text.default*/  #333;
}

.app-status-bar .Segment.Current,
.app-status-bar .Segment.Current span.Inner::after,
.app-status-bar .Segment.Current span.Self {
    border-color:  /*@buttons.wizard.border,@header.border*/  #FF3E01;
    background-color:  /*@buttons.wizard.background,@header.background*/  #FF3E01;
    color:  /*@buttons.wizard.text.default,@header.text.default*/ #f5f5f5;
}

.app-status-bar .Segment.First.Current,
.app-status-bar .Segment.PastToCurrent span.Inner::after {
    border-color:  /*@buttons.wizard.border,@header.border*/  #FF3E01;
}

.app-page-modal-centered {
    box-shadow:  /*@theme.boxShadow.modalActive*/  0px 0px 10px 5px rgba(0,0,0,0.4);
}

body:not(.app-has-sidebar-left):not(.app-has-reading-pane-bottom) .ui-page:not([data-page-header='false']) .app-bar-heading,
.app-page-modal:not([data-page-header='false']) .app-bar-heading {
    border-top-color:  /*@theme.background.3*/  #ddd;
}

.app-desktop .app-bar-search + .app-bar-history li[data-text]:hover {
    background-color:  /*@theme.background.3*/  #f1f1f1;
}

.app-echo .dv-action-see-all .app-btn-see-all:after,
.app-echo .dv-action-see-all .app-btn-next::after {
    background-color:  /*@theme.background.3*/  #ddd;
}

.app-drop-box,
[data-input="checkbox"] .app-checkbox-button {
    background-color:  /*@theme.background.1*/  #fff;
    border-color:  /*@theme.text.light*/  #c0c0c0;
}

[data-input="checkbox"] .app-checkbox-container,
[data-input="checkbox"] .app-checkbox-container.app-checkbox-on .app-checkbox-button {
    border-color:  /*@theme.text.light*/  #c0c0c0;
}

.app-desktop .app-drop-box:focus,
.app-desktop .app-checkbox-container:focus .app-checkbox-button {
    background-color:  /*@theme.background.3*/  #f0f0f0;
}

.app-bar-notify.app-bar-notify-transparent.app-bar-notify-left,
.app-bar-notify.app-bar-notify-transparent.app-bar-notify-center {
    opacity:  /*@theme.background.opacity*/  0.75;
}

.app-data-list li.app-focus {
    outline-color:  /*@theme.border.6*/  #000;
}

[data-input="radiobuttonlist"] .app-data-list li::after,
[data-input="checkboxlist"] .app-data-list li::after {
    border-color:  /*@theme.input.button.border*/  rgba(0,0,0,.3);
}


[data-input] .app-control-helper ul li {
    border-color:  /*@theme.background.3*/  #ddd;
}

/* display flow */

.app-display-flow .app-has-background {
    background-color:  /*@theme.background.4*/  #f1f1f1;
    color:  /*@theme.text.default*/  #333;
}

/* bootstrap */

.app-bootstrap.app-page-content {
    background-color:  /*@theme.background.1*/  #fff;
    border-color:  /*@theme.border.1*/  #bbb;
    color:  /*@theme.text.default*/  #333;
}

.app-bootstrap .jumbotron {
    background-color:  /*@theme.background.4*/  #f1f1f1;
}

.app-bootstrap.app-page-content .panel {
    background-color:  /*@theme.background.1*/  #fff;
    color:  /*@theme.text.default*/  #333;
}

.panel:not(.panel-success):not(.panel-warning):not(.panel-default):not(.panel-danger):not(.panel-info) {
    border-color:  /*@theme.border.1*/  transparent;
}

.app-bootstrap.app-page-content hr,
.app-bootstrap.app-page-content .page-header {
    border-color:  /*@theme.border.1*/  #eee;
}


.app-bootstrap .navbar-default {
    background-color:  /*@theme.background.3*/  #f8f8f8;
    border-color:  /*@theme.border.3*/  #e7e7e7;
}

    .app-bootstrap .navbar-default .navbar-collapse,
    .app-bootstrap .navbar-default .navbar-form {
        border-color:  /*@theme.border.1*/  #e7e7e7;
    }

    .app-bootstrap .navbar-default .navbar-brand,
    .app-bootstrap:not(.app-desktop) .navbar-default .navbar-brand:hover,
    .app-bootstrap .navbar-default .navbar-text {
        color:  /*@theme.text.default*/  #777;
    }

        .app-desktop .app-bootstrap .navbar-default .navbar-brand:hover,
        .app-bootstrap .navbar-default .navbar-brand:focus {
            color:  /*@theme.text.active*/  #5e5e5e;
        }

.app-bootstrap .navbar-inverse {
    background-color:  /*@theme.background.6*/  #222;
    border-color:  /*@theme.border.6*/  #080808;
}

    .app-bootstrap .navbar-inverse .navbar-collapse,
    .app-bootstrap .navbar-inverse .navbar-form {
        border-color:  /*@theme.border.6*/  #e7e7e7;
    }

    .app-bootstrap .navbar-inverse .navbar-brand,
    .app-bootstrap:not(.app-desktop) .navbar-inverse .navbar-brand:hover,
    .app-bootstrap .navbar-inverse .navbar-text {
        color:  /*@theme.text.invert*/  #777;
    }

        .app-desktop .app-bootstrap .navbar-inverse .navbar-brand:hover,
        .app-bootstrap .navbar-inverse .navbar-brand:focus {
            color:  /*@theme.text.invert*/  #5e5e5e;
        }

.app-bootstrap .well {
    background-color:  /*@theme.background.3*/  #f5f5f5;
    border-color:  /*@theme.border.3*/  #e3e3e3;
}

.app-bootstrap .table,
.app-bootstrap .table > thead > tr > th,
.app-bootstrap .table > tbody > tr > th,
.app-bootstrap .table > tfoot > tr > th,
.app-bootstrap .table > thead > tr > td,
.app-bootstrap .table > tbody > tr > td,
.app-bootstrap .table > tfoot > tr > td,
.app-bootstrap .list-group-item:not(.active) {
    border-color:  /*@theme.border.2*/  #ddd;
}

.app-bootstrap .table-striped > tbody > tr:nth-child(odd) > td,
.app-bootstrap .table-striped > tbody > tr:nth-child(odd) > th {
    background-color:  /*@theme.background.4*/  #f9f9f9;
}

.app-bootstrap .table > thead > tr > th,
.app-bootstrap .table > tbody > tr > th,
.app-bootstrap .table > tfoot > tr > th {
    color:  /*@theme.text.active*/  #000;
}

.app-bootstrap .page-header,
.app-bootstrap .nav-tabs {
    border-color:  /*@theme.border.1*/  #ddd;
}

    .app-bootstrap .nav-tabs > li.active > a,
    .app-bootstrap .nav-tabs > li.active > a:hover {
        background-color:  /*@theme.border.1*/  #ddd;
        border-color:  /*@theme.border.1*/  #ddd;
        color:  /*@theme.text.default*/  #555;
    }

.app-bootstrap .progress {
    background-color:  /*@theme.background.2*/  #f5f5f5;
}

.app-bootstrap .list-group-item:not(.active) {
    background-color:  /*@theme.background.1*/  #fff;
    color:  /*@theme.text.light*/  #555;
}

.app-bootstrap a.list-group-item:not(.active):hover {
    background-color:  /*@theme.background.2*/  #f5f5f5;
    color:  /*@theme.text.light*/  #555;
}

.app-bootstrap a.list-group-item .list-group-item-heading {
    color:  /*@theme.text.default*/  #333;
}

.app-bootstrap .btn-default,
.app-bootstrap .btn-default:visited,
body:not(.app-desktop) .app-bootstrap .btn-default:hover,
.app-bootstrap .panel-default > .panel-heading {
    background-color:  /*@theme.content.button.background*/  #fff;
    border-color:  /*@theme.content.button.border*/  #ccc;
    color:  /*@theme.content.button.color*/  #333;
}

    .app-desktop .app-bootstrap .btn-default:hover,
    .app-bootstrap .btn-default:focus,
    .app-bootstrap .btn-default:active,
    .app-bootstrap .btn-default.active,
    .app-bootstrap .open > .dropdown-toggle.btn-default {
        background-color:  /*@theme.content.button.hover*/  #e6e6e6;
        border-color:  /*@theme.content.button.border*/  #ccc;
        color:  /*@theme.content.button.color*/  #333;
    }

.app-bootstrap .form-control {
    color:  /*@theme.text.default*/  #555;
    background-color:  /*@theme.background.1*/  #fff;
    border-color:  /*@theme.border.2*/  #ccc;
}

.app-bootstrap .panel-default,
.app-bootstrap .panel-default > .panel-heading {
    border-color:  /*@theme.content.button.border*/  #ddd;
}

    .app-bootstrap .panel-default > .panel-heading + .panel-collapse > .panel-body {
        border-top-color:  /*@theme.content.button.border*/  #ddd;
    }

    .app-bootstrap .panel-default > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color:  /*@theme.content.button.border*/  #ddd;
    }


/* end of bootstrap */

.app-echo .app-echo-toolbar > .app-echo-see-all.ui-btn-active,
.app-desktop .app-echo .app-echo-toolbar > .app-echo-see-all:hover,
/*.app-desktop .app-keyboard .app-row .app-key:hover::before,*/
.app-keyboard .app-row .app-key.app-dragging::before {
    background-color:  /*@theme.background.hover*/  rgba(0,0,0,0.05);
}

.app-echo .app-echo-toolbar > .app-echo-see-all.ui-btn-active {
    color:  /*@theme.text.default*/  #000;
}

.app-group .app-group-title.ui-btn-active, .app-group .app-group-path.ui-btn-active,
.app-bar-heading .app-bar-text .app-group {
    color:  /*@theme.text.default*/  #000;
}

.ui-listview .app-group {
    background-color:  /*@theme.background.0*/  #e9e9e9;
}

.app-filter,
.app-desktop .app-listview .app-field span[data-href]:hover,
.app-desktop .app-listview .app-field[data-href]:hover,
.app-desktop [data-state="read"] .app-control-inner[data-href]:hover,
li .app-text-normal,
.app-bar-search + .app-bar-history li b,
.app-desktop .app-bar-search + .app-bar-history li b {
    color:  /*@filter.text,@theme.filter.text,@header.background*/  #FF3E01;
}

body:not(.app-ui-automation) .app-page-modal:not(.ui-page-active) .app-page-modal-title .app-btn::after,
.app-has-keyboard .app-page-modal .app-page-modal-title .app-btn::after {
    color:  /*@header.icon.disabled*/  rgba(255,255,255,.3);
}

body:not(.app-ui-automation) .app-page-modal:not(.ui-page-active) .app-bar-buttons .ui-btn,
.app-has-keyboard .app-page-modal .app-bar-buttons .ui-btn {
    color:  /*@theme.input.button.disabled*/  rgba(0,0,0,.4);
}

[data-input="checkbox"] .app-checkbox-container.app-checkbox-on {
    background-color:  /*@system.select.bar,@buttons.menu.background,@header.background*/ #561C0F;
    border-color:  /*@system.select.bar,@buttons.menu.background,@header.background*/ #561C0F;
}

.app-focus-frame,
.app-custom-density-disabled.app-page-inlineeditor {
    outline-color:  /*@panel.icon.default,@theme.icon.light*/  #FF3E01;
}

.app-field-is-selected2::after {
    background-color:  /*@system.select.bar,@buttons.menu.background,@header.background,@panel.icon.default,@theme.icon.light*/ #561C0F;
}


[data-control][data-field].app-focus::before {
    border-color:  /*@text.light*/  #555;
}

.app-native .ui-panel-inner {
    border-top-color:  /*@theme.border.1*/  #ddd;
}


.app-field-is-selected,
.app-display-flow [data-type="field"] .app-label.app-accent,
.app-display-flow [data-type="field"]:not(.app-null) .app-value.app-accent,
.app-display-flow [data-type="field"]:not(.app-null) .app-value.app-accent .app-icon,
.app-display-flow .app-letters .app-selected {
    color:  /*@system.select.text,@system.select.bar,@buttons.menu.background,@header.background,@panel.icon.default,@theme.icon.light*/ #561C0F;
}

.app-row-status-error::after {
    color:  /*@system.select.bar,@buttons.menu.background,@header.background,@panel.icon.default,@theme.icon.light*/ #561C0F;
}

.app-data-input-button {
    background-color:  /*@theme.background.1*/  #fff;
}

.app-page-inlineeditor-overlay [data-layout="form"],
.app-page-inlineeditor-overlay .app-data-input-button,
.app-page-inlineeditor-overlay .app-wrapper {
    background-color:  /*@theme.background.0*/  #fff;
}

.app-progress-screen {
    background-color:  /*@theme.background.1*/  #fff;
}

.app-drawing {
    background-color:  /*@theme.draw.background*/  #777;
}

.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 {
    background-color:  /*@theme.kiosk.numpad.buttons.color*/  #ccc;
}

.app-display-flow .app-numpad .app-accent:before {
    background-color:  /*@system.select.bar,@buttons.menu.background,@header.background*/ #561C0F;
}

.app-display-flow .app-numpad .app-btn.app-dark:after {
    background-color:  /*@theme.kiosk.numpad.buttons.color2*/  rgba(255,255,255,.5);
}

.app-display-flow .app-numpad .app-btn.ui-btn-active:after,
.app-desktop .app-display-flow .app-numpad .app-btn:hover:after {
    background-color:  /*@theme.kiosk.numpad.buttons.hover*/  rgba(0,0,0,.1);
}


.app-display-flow .app-numpad i {
    color:  /*@kiosk.numpad.buttons.icon.color,@theme.kiosk.numpad.buttons.icon.color*/  #333;
}

.app-display-flow .app-numpad .app-accent i {
    color:  /*@kiosk.numpad.buttons.icon.accent,@theme.kiosk.numpad.buttons.icon.accent*/  #eee;
}


.app-display-flow .app-numpad .app-text {
    border-bottom-color:  /*@theme.kiosk.numpad.divider*/  #ddd;
}

.app-display-flow [data-type="button"] .app-button {
    color:  /*@kiosk.buttons.color.text*/  #fff;
}

    .app-display-flow [data-type="button"] .app-button i {
        color:  /*@kiosk.buttons.color.icon*/  #fff;
    }

.app-display-flow .app-background-accent,
.app-display-flow .app-has-background.app-background-accent {
    background-color:  /*@content.background.color,@header.background,@theme.background.5*/  #FF3E01;
    color:  /*@content.color,@header.text.hover,@theme.text.hover*/ #fff;
}


    .app-display-flow .app-has-background.app-background-accent + .app-hero {
        color:  /*@content.color,@header.text.hover,@theme.text.hover*/ #fff;
    }

.app-reading-pane-splitter:hover,
.app-reading-pane-splitter.app-dragging {
    background-color:  /*@theme.readingPane.splitter.background*/  rgba(0,0,0,.5);
}

.app-has-current-day .app-current-time {
    color:  /*@panel.icon.default*/  #FF3E01;
}

.app-theme-dark .app-has-time-prompt .app-current-time {
    color: #999;
}

.app-has-current-day .current-time-line,
.app-calendar-agenda-list .current-time-line {
    border-color:  /*@panel.icon.default*/  #FF3E01;
}

.app-theme-dark .app-has-time-prompt .current-time-line {
    border-color: #999;
}

.app-has-current-day .current-time-line .dot {
    background-color:  /*@panel.icon.default*/  #FF3E01;
}

.app-theme-dark .app-has-time-prompt .current-time-line .dot {
    background-color: #999;
}

@keyframes blink-cursor {
    from, to {
        border-color:  /*@theme.text.default*/  #000;
    }

    50% {
        border-color: transparent;
    }
}

/*gray*/
.route-logistics-calendar-color--1 {
    background-color: #808080;
}

/*royalblue*/
.route-logistics-calendar-color-0 {
    background-color: #4986e7;
}

/*orangered*/
.route-logistics-calendar-color-1 {
    background-color: #f83a22;
}

/*seagreen*/
.route-logistics-calendar-color-2 {
    background-color: #16a765;
}

/*rosybrown*/
.route-logistics-calendar-color-3 {
    background-color: #a47ae2;
}

/*sandybrown*/
.route-logistics-calendar-color-4 {
    background-color: #ffad46;
}

/*lightsteelblue*/
.route-logistics-calendar-color-5 {
    background-color: #9fc6e7;
}

/*indianred*/
.route-logistics-calendar-color-6 {
    background-color: #ac725e;
}

/*mediumquamarine*/
.route-logistics-calendar-color-7 {
    background-color: #42d692;
}

/*orchid*/
.route-logistics-calendar-color-8 {
    background-color: #cd74e6;
}

/*tomato*/
.route-logistics-calendar-color-9 {
    background-color: #ff7537;
}

/*lightblue*/
.route-logistics-calendar-color-10 {
    background-color: #9fe1e7;
}

/*lightpink*/
.route-logistics-calendar-color-11 {
    background-color: #f691b2;
}

/*yellowgreen*/
.route-logistics-calendar-color-12 {
    background-color: #7bd148;
}

/*lightskyblue*/
.route-logistics-calendar-color-13 {
    background-color: #9a9cff;
}

/*silver*/
.route-logistics-calendar-color-14 {
    background-color: #c2c2c2;
}

/*aquamarine*/
.route-logistics-calendar-color-15 {
    background-color: #92e1c0;
}

/*indianred*/
.route-logistics-calendar-color-16 {
    background-color: #d06b64;
}

/*darkkhaki*/
.route-logistics-calendar-color-17 {
    background-color: #b3dc6c;
}

/*plum*/
.route-logistics-calendar-color-18 {
    background-color: #b99aff;
}

/*khaki*/
.route-logistics-calendar-color-19 {
    background-color: #fbe983;
}

/*silver*/
.route-logistics-calendar-color-20 {
    background-color: #cca6ac;
}

/*tomato*/
.route-logistics-calendar-color-21 {
    background-color: #fa573c;
}

/*silver*/
.route-logistics-calendar-color-22 {
    background-color: #cabdbf;
}

/*khaki*/
.route-logistics-calendar-color-23 {
    background-color: #fad165;
}

/*AppointmentStatus: Rescheduled*/
.route-logistics-calendar-color-101 {
    background-color: #fe3183;
}
/*AppointmentStatus: Scheduled*/
.route-logistics-calendar-color-102 {
    background-color: #fe31ea;
}
/*AppointmentStatus: Skipped*/
.route-logistics-calendar-color-103 {
    background-color: #4531fe;
}
/*AppointmentStatus: In-Route*/
.route-logistics-calendar-color-104 {
    background-color: #feac31;
}
/*AppointmentStatus: Arrived*/
.route-logistics-calendar-color-105 {
    background-color: #31e9fe;
}
/*AppointmentStatus: Exception*/
.route-logistics-calendar-color-106 {
    background-color: #FFEB3B;
}
/*AppointmentStatus: Working*/
.route-logistics-calendar-color-107 {
    background-color: #3183fe;
}
/*AppointmentStatus: Paused*/
.route-logistics-calendar-color-108 {
    background-color: #a0a0a0;
}
/*AppointmentStatus: Completed*/
.route-logistics-calendar-color-109 {
    background-color: #27ca37;
}
/*AppointmentStatus: Cancelled*/
.route-logistics-calendar-color-110 {
    background-color: #e53f2c;
}

.myapp-bundle-header-hidden .app-field-Rate, .myapp-bundle-header-hidden .app-field-Amount, .myapp-bundle-header-hidden .app-field-Taxable, .myapp-bundle-header-hidden .app-field-TaxAmount, .myapp-bundle-header-hidden .app-field-Amount, .myapp-bundle-header-hidden .app-field-Total, .myapp-bundle-header-hidden .app-field-UnitCost, .myapp-bundle-header-hidden .app-field-TotalCost, .myapp-bundle-header-hidden .app-field-Profitability {
    visibility: collapse;
}

.myapp-bundle-subitem-hidden .app-field-BundleTotal {
    visibility: collapse;
}

.myapp-bundle-header-0 .ui-btn::after, .myapp-bundle-header-0 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #003652 !important;
}

.myapp-bundle-subitem-0 .ui-btn::after, .myapp-bundle-subitem-0 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #0072c6 !important;
}

.myapp-calendar-grid-color-0 .ui-btn::after, 
.myapp-calendar-grid-color-0 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #4986e7 !important;
}

.myapp-calendar-workorder-field-color-0 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-0 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-0 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-0 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-0 .app-field-EmployeeID, .myapp-calendar-field-color-0 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #4986e7 !important;
}

    .myapp-dispatch-board-color-0 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #4986e7 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-1 .ui-btn::after, 
.myapp-calendar-grid-color-1 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #f83a22 !important;
}

.myapp-calendar-workorder-field-color-1 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-1 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-1 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-1 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-1 .app-field-EmployeeID, .myapp-calendar-field-color-1 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #f83a22 !important;
}

.myapp-dispatch-board-color-1 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #f83a22 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-2 .ui-btn::after, 
.myapp-calendar-grid-color-2 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #16a765 !important;
}

.myapp-calendar-workorder-field-color-2 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-2 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-2 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-2 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-2 .app-field-EmployeeID, .myapp-calendar-field-color-2 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #16a765 !important;
}

.myapp-dispatch-board-color-2 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #16a765 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-3 .ui-btn::after,
.myapp-calendar-grid-color-3 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #a47ae2 !important;
}

.myapp-calendar-workorder-field-color-3 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-3 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-3 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-3 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-3 .app-field-EmployeeID, .myapp-calendar-field-color-3 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #a47ae2 !important;
}

.myapp-dispatch-board-color-3 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #a47ae2 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-4 .ui-btn::after,
.myapp-calendar-grid-color-4 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #ffad46 !important;
}

.myapp-calendar-workorder-field-color-4 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-4 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-4 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-4 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-4 .app-field-EmployeeID, .myapp-calendar-field-color-4 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #ffad46 !important;
}

.myapp-dispatch-board-color-4 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #ffad46 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-5 .ui-btn::after,
.myapp-calendar-grid-color-5 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #9fc6e7 !important;
}

.myapp-calendar-workorder-field-color-5 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-5 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-5 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-5 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-5 .app-field-EmployeeID, .myapp-calendar-field-color-5 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #9fc6e7 !important;
}

.myapp-dispatch-board-color-5 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #9fc6e7 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-6 .ui-btn::after,
.myapp-calendar-grid-color-6 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #ac725e !important;
}

.myapp-calendar-workorder-field-color-6 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-6 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-6 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-6 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-6 .app-field-EmployeeID, .myapp-calendar-field-color-6 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #ac725e !important;
}

.myapp-dispatch-board-color-6 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #ac725e !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-7 .ui-btn::after,
.myapp-calendar-grid-color-7 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #42d692 !important;
}

.myapp-calendar-workorder-field-color-7 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-7 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-7 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-7 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-7 .app-field-EmployeeID, .myapp-calendar-field-color-7 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #42d692 !important;
}

.myapp-dispatch-board-color-7 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #42d692 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-8 .ui-btn::after,
.myapp-calendar-grid-color-8 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #cd74e6 !important;
}

.myapp-calendar-workorder-field-color-8 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-8 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-8 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-8 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-8 .app-field-EmployeeID, .myapp-calendar-field-color-8 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #cd74e6 !important;
}

.myapp-dispatch-board-color-8 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #cd74e6 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-9 .ui-btn::after,
.myapp-calendar-grid-color-9 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #ff7537 !important;
}

.myapp-calendar-workorder-field-color-9 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-9 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-9 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-9 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-9 .app-field-EmployeeID, .myapp-calendar-field-color-9 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #ff7537 !important;
}

.myapp-dispatch-board-color-9 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #ff7537 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-10 .ui-btn::after,
.myapp-calendar-grid-color-10 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #9fe1e7 !important;
}

.myapp-calendar-workorder-field-color-10 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-10 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-10 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-10 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-10 .app-field-EmployeeID, .myapp-calendar-field-color-10 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #9fe1e7 !important;
}

.myapp-dispatch-board-color-10 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #9fe1e7 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-11 .ui-btn::after,
.myapp-calendar-grid-color-11 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #f691b2 !important;
}

.myapp-calendar-workorder-field-color-11 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-11 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-11 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-11 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-11 .app-field-EmployeeID, .myapp-calendar-field-color-11 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #f691b2 !important;
}

.myapp-dispatch-board-color-11 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #f691b2 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-12 .ui-btn::after,
.myapp-calendar-grid-color-12 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #7bd148 !important;
}

.myapp-calendar-workorder-field-color-12 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-12 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-12 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-12 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-12 .app-field-EmployeeID, .myapp-calendar-field-color-12 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #7bd148 !important;
}

.myapp-dispatch-board-color-12 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #7bd148 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-13 .ui-btn::after,
.myapp-calendar-grid-color-13 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #9a9cff !important;
}

.myapp-calendar-workorder-field-color-13 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-13 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-13 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-13 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-13 .app-field-EmployeeID, .myapp-calendar-field-color-13 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #9a9cff !important;
}

.myapp-dispatch-board-color-13 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #9a9cff !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-14 .ui-btn::after,
.myapp-calendar-grid-color-14 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #c2c2c2 !important;
}

.myapp-calendar-workorder-field-color-14 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-14 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-14 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-14 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-14 .app-field-EmployeeID, .myapp-calendar-field-color-14 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #c2c2c2 !important;
}

.myapp-dispatch-board-color-14 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #c2c2c2 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-15 .ui-btn::after,
.myapp-calendar-grid-color-15 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #92e1c0 !important;
}

.myapp-calendar-workorder-field-color-15 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-15 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-15 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-15 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-15 .app-field-EmployeeID, .myapp-calendar-field-color-15 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #92e1c0 !important;
}

.myapp-dispatch-board-color-15 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #92e1c0 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-16 .ui-btn::after,
.myapp-calendar-grid-color-16 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #d06b64 !important;
}

.myapp-calendar-workorder-field-color-16 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-16 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-16 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-16 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-16 .app-field-EmployeeID, .myapp-calendar-field-color-16 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #d06b64 !important;
}

.myapp-dispatch-board-color-16 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #d06b64 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-17 .ui-btn::after,
.myapp-calendar-grid-color-17 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #b3dc6c !important;
}

.myapp-calendar-workorder-field-color-17 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-17 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-17 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-17 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-17 .app-field-EmployeeID, .myapp-calendar-field-color-17 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #b3dc6c !important;
}

.myapp-dispatch-board-color-17 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #b3dc6c !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-18 .ui-btn::after,
.myapp-calendar-grid-color-18 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #b99aff !important;
}

.myapp-calendar-workorder-field-color-18 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-18 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-18 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-18 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-18 .app-field-EmployeeID, .myapp-calendar-field-color-18 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #b99aff !important;
}

.myapp-dispatch-board-color-18 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #b99aff !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-19 .ui-btn::after,
.myapp-calendar-grid-color-19 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #fbe983 !important;
}

.myapp-calendar-workorder-field-color-19 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-19 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-19 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-19 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-19 .app-field-EmployeeID, .myapp-calendar-field-color-19 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #fbe983 !important;
}

.myapp-dispatch-board-color-19 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #fbe983 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-20 .ui-btn::after,
.myapp-calendar-grid-color-20 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #cca6ac !important;
}

.myapp-calendar-workorder-field-color-20 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-20 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-20 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-20 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-20 .app-field-EmployeeID, .myapp-calendar-field-color-20 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #cca6ac !important;
}

.myapp-dispatch-board-color-20 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #cca6ac !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-21 .ui-btn::after,
.myapp-calendar-grid-color-21 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #fa573c !important;
}

.myapp-calendar-workorder-field-color-21 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-21 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-21 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-21 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-21 .app-field-EmployeeID, .myapp-calendar-field-color-21 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #fa573c !important;
}

.myapp-dispatch-board-color-21 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #fa573c !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-22 .ui-btn::after,
.myapp-calendar-grid-color-22 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #cabdbf !important;
}

.myapp-calendar-workorder-field-color-22 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-22 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-22 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-22 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color22 .app-field-EmployeeID, .myapp-calendar-field-color-22 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #cabdbf !important;
}

.myapp-dispatch-board-color-22 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #cabdbf !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-calendar-grid-color-23 .ui-btn::after,
.myapp-calendar-grid-color-23 .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background-color: #fad165 !important;
}

.myapp-calendar-workorder-field-color-23 .app-field-AppointmentEmployeeFullName, .myapp-calendar-workorder-field-color-23 .app-field-NewAppointmentEmployeeID, .myapp-calendar-quote-field-color-23 .app-field-EmployeeFullName, .myapp-calendar-quote-field-color-23 .app-field-NewAppointmentEmployeeID, .myapp-calendar-field-color-23 .app-field-EmployeeID, .myapp-calendar-field-color-23 .app-field-CalendarColor {
    border-left-style: solid;
    border-left-width: 6px;
    border-left-color: #fad165 !important;
}

.myapp-dispatch-board-color-23 .b-resource-info {
    border-left-style: solid;
    border-left-width: 8px;
    border-left-color: #fad165 !important;
    padding-left: 6px;
    margin-left: -6px !important;
}

.myapp-testmessaging-sent .app-field-Message {
    padding-left: 15px !important;
    margin-right: -15px;
}

.myapp-testmessaging-received .app-field-Message {
    padding-left: 15px !important;
    margin-right: -15px;
}

.myapp-testmessaging-attachment .app-field-Message {
    padding-left: 15px !important;
    margin-right: -15px;
}

.myapp-testmessaging-received .app-field-Message:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 8px solid #545050;
    border-bottom: 8px solid transparent;
    margin: 1px 0 0 -15px;
}

.myapp-testmessaging-attachment .app-field-Message:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 8px solid #F4CE00;
    border-bottom: 8px solid transparent;
    margin: 1px 0 0 -15px;
}

.myapp-testmessaging-sent .app-field-Message:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid #545050;
    border-bottom: 8px solid transparent;
    margin: 1px 0 0 -15px;
}

.myapp-testmessaging-claimed .ui-btn {
    background-color: #0089CE !important;
}

.myapp-testmessaging-resolved .ui-btn {
    background-color: #5C995C !important;
}

.myapp-testmessaging-whisper .ui-btn {
    background-color: #F0712B !important;
}

.myapp-testmessaging-autoresponse .ui-btn {
    background-color: #D1C484 !important;
}