.ui-popup.ui-body-a {
    background: #f4f4f4;
}
.ui-popup.ui-body-b {
    background: #222;
}
.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 {
    -webkit-border-radius: inherit;
    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;
}


@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-moz-keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

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

.fade.in {
    opacity: 1;
    -webkit-animation-duration: 225ms;
    -webkit-animation-name: fadein;
    -moz-animation-duration: 225ms;
    -moz-animation-name: fadein;
    animation-duration: 225ms;
    animation-name: fadein;
}


/* 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: -10px;
        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: -10px;
        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;
    }

    /* Fix rotation center for oldIE - see http://www.useragentman.com/IETransformsTranslator/ */
    .ui-popup-arrow-container.ui-popup-arrow-t.ie .ui-popup-arrow {
        margin-left: -5.857864376269049px;
        margin-top: -7.0710678118654755px;
    }

    .ui-popup-arrow-container.ui-popup-arrow-b.ie .ui-popup-arrow {
        margin-left: -5.857864376269049px;
        margin-top: -4.142135623730951px;
    }

    .ui-popup-arrow-container.ui-popup-arrow-l.ie .ui-popup-arrow {
        margin-left: -7.0710678118654755px;
        margin-top: -5.857864376269049px;
    }

    .ui-popup-arrow-container.ui-popup-arrow-r.ie .ui-popup-arrow {
        margin-left: -4.142135623730951px;
        margin-top: -5.857864376269049px;
    }

/* 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 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
}

.ui-popup-arrow-container.ie .ui-popup-arrow {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand');
}



/* Corner styling for dialogs and popups */
.ui-corner-all > .ui-content:first-child {
	-webkit-border-top-left-radius: inherit;
	border-top-left-radius: inherit;
	-webkit-border-top-right-radius: inherit;
	border-top-right-radius: inherit;
}
.ui-corner-all > .ui-content:last-child {
	-webkit-border-bottom-left-radius: inherit;
	border-bottom-left-radius: inherit;
	-webkit-border-bottom-right-radius: inherit;
	border-bottom-right-radius: inherit;
}


/* Popup arrow */
.ui-popup.ui-corner-all > .ui-popup-arrow-guide {
    left: .6em /*{global-radii-blocks}*/;
    right: .6em /*{global-radii-blocks}*/;
    top: .6em /*{global-radii-blocks}*/;
    bottom: .6em /*{global-radii-blocks}*/;
}


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