/*!
* Data Aquarium Framework - Touch UI Core
* Copyright 2021-2024 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 {
    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 {
    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 > .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 > .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 > .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 > .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 > .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 > .ui-btn {
    border-bottom-width: 0;
}

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

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

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

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

.ui-listview > li.ui-last-child > .ui-btn + .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);
}