html, body {
    position: relative;
    width: 100%;
    height: 100%;
}

.x-fullscreen {
    position: absolute !important;
}

@-webkit-keyframes x-paint-monitor-helper {
    from { zoom: 1 }
    to { zoom: 1 }
}

@keyframes x-paint-monitor-helper {
    from { zoom: 1 }
    to { zoom: 1 }
}

.x-paint-monitored {
    position: relative;
}

.x-paint-monitor {
    width: 0 !important;
    height: 0 !important;
    visibility: hidden;
    &.cssanimation {
        -webkit-animation-duration: 0.0001ms;
        -webkit-animation-name: x-paint-monitor-helper;
        animation-duration: 0.0001ms;
        animation-name: x-paint-monitor-helper;
    }
    &.overflowchange {
        overflow: hidden;
        &::after {
            content: "";
            display: block;
            width: 1px !important;
            height: 1px !important;
        }
    }
}

.x-size-monitored {
    position:relative;
}

.x-size-monitors {
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: -9999;
    overflow: hidden;
    > * {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    &.scroll > * {
        &.shrink::after {
            content: "";
            display: block;
            width: 200%;
            height: 200%;
            min-width: 1px;
            min-height: 1px;
        }
        &.expand::after {
            content: "";
            display: block;
            width: 100000px;
            height: 100000px;
        }
    }
    &.overflowchanged > * {
        &.shrink {
            > * {
                width: 100%;
                height: 100%;
            }
        }
        &.expand {
            > * {
                width: 200%;
                height: 200%;
            }
        }
    }
}

.x-body {
    position: relative;
    z-index: 0;
}

.x-inner, .x-body {
    width: 100%;
    height: 100%;
}

.x-dock, .x-dock-body {
    height: 100%;
}

.x-ie .x-dock,
.x-ie .x-dock-body {
    height: auto;
}

.x-sized {
    position: relative;
}

.x-stretched.x-container {
    @include st-box();
    @include st-box-orient(vertical);
    > .x-inner, > .x-body, > .x-body > .x-inner {
        @include st-box();
        @include st-box-flex(1);
        @include st-box-orient(vertical);
    }
}

.x-innerhtml {
    width: 100%;
}

.x-layout-card {
    position: relative;
    overflow: hidden;
}

.x-layout-card-item-container {
    @include absolute-fit();
}

.x-layout-card-item {
    @include absolute-position();
    position: absolute !important;
}

.x-layout-fit.x-stretched > .x-layout-fit-item {
    @include st-box();
    @include st-box-flex(1);
}

.x-layout-fit {
    position: relative;
}

.x-layout-fit-item {
    &.x-sized {
        @include absolute-position();
    }
    &.x-unsized {
        width: 100%;
        height: 100%;
    }
}

.x-center, .x-centered {
    @include absolute-position();
    @include st-box();
    @include st-box-align(center);
    @include st-box-pack(center);
    > * {
        position: relative;
    }
    > .x-floating {
        position: relative !important;
    }
}

.x-floating {
    position: absolute !important;
}

.x-dock {
    @include st-box();
    &.x-sized, &.x-sized > .x-dock-body > *,
    &.x-sized > .x-dock-body > .x-body > .x-inner {
        @include absolute-fit();
    }
    .x-dock-body {
        @include st-box();
        @include st-box-flex(1);
    }
    &.x-sized > .x-dock-body {
        position: relative;
    }
    &.x-unsized, &.x-stretched {
        > .x-dock-body {
            @include st-box-orient(vertical);
            > * {
                @include st-box-flex(1);
            }
        }
    }
    &.x-dock-vertical {
        @include st-box-orient(vertical);
    }
    &.x-dock-horizontal {
        @include st-box-orient(horizontal);
        > .x-dock-item {
            @include st-box();
            &.x-sized {
                > .x-inner, > .x-body {
                    @include absolute-fit();
                }
            }
            &.x-unsized {
                @include st-box-orient(vertical);
                > * {
                    @include st-box-flex(1);
                }
            }
        }
    }
}

.x-ie .x-container {
    .x-dock-horizontal.x-unsized {
        .x-dock-body {
            @include st-box-flex(1, 0px);
        }
    }
}

.x-layout-box {
    @include st-box();
    &.x-horizontal {
        @include st-box-orient(horizontal, important);
        > .x-layout-box-item.x-flexed {
            width: 0 !important;
        }
    }
    &.x-vertical {
        @include st-box-orient(vertical);
        > .x-layout-box-item.x-flexed {
            height: 0 !important;
        }
    }
    > .x-layout-box-item {
        @include st-box(important);
    }
    &.x-align-start {
        @include st-box-align(start);
    }
    &.x-align-center {
        @include st-box-align(center);
    }
    &.x-align-end {
        @include st-box-align(end);
    }
    &.x-align-stretch {
        @include st-box-align(stretch);
    }
    &.x-pack-start {
        @include st-box-pack(start);
    }
    &.x-pack-center {
        @include st-box-pack(center);
    }
    &.x-pack-end {
        @include st-box-pack(end);
    }
    &.x-pack-justify {
        @include st-box-pack(justify);
    }
}

.x-layout-box-item.x-sized {
    > .x-inner, > .x-body, > .x-dock-outer {
        @include absolute-fit();
    }
}

.x-layout-float {
    overflow: hidden;
    > .x-layout-float-item {
        float: left;
    }
    &.x-direction-right {
        > .x-layout-float-item {
            float: right;
        }
    }
}

.x-table-inner {
    display: table !important;
    width: 100% !important;
    height: 100% !important;

    &.x-fixed-layout {
        table-layout: fixed !important;
    }
}

.x-table-row {
    display: table-row !important;
}

.x-table-cell {
    display: table-cell !important;
    vertical-align: middle;
}

.x-translatable {
    position: absolute;
    top: 100% !important;
    left: 100% !important;
    overflow: visible !important;
    z-index: 1;
    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 100%;
        left: 100%;
        width: 100%;
        height: 100%;
        visibility: hidden;
    }
}

.x-translatable-container {
    overflow: hidden;
    @include absolute-fit();
    &::before {
        content: "";
        display: block;
        width: 300%;
        height: 300%;
        visibility: hidden;
    }
}

.x-size-change-detector {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.x-size-change-detector > * {
    visibility: hidden;
}

.x-size-change-detector-shrink > * {
    width: 200%;
    height: 200%;
}

.x-size-change-detector-expand > * {
    width: 100000px;
    height: 100000px;
}

.x-scroll-view {
    position: relative;
    display: block;
    overflow: hidden;
}

.x-scroll-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.x-ie .x-scroll-container .x-layout-box {
    width: 100% !important;
}

.x-scroll-scroller {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto !important;
    height: auto !important;
}

.x-ios .x-scroll-scroller {
    -webkit-transform: translate3d(0, 0, 0);
}

.x-scroll-stretcher {
    position: absolute;
    visibility: hidden;
}

.x-scroll-bar-grid-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
}

.x-scroll-bar-grid {
    display: table;
    width: 100%;
    height: 100%;

    > * {
        display: table-row;
    }

    > * > * {
        display: table-cell;
    }

    > :first-child > :first-child {
        width: 100%;
        height: 100%;
    }

    > :first-child > :nth-child(2) {
        padding: 3px 3px 0 0;
    }

    > :nth-child(2) > :first-child {
        padding: 0 0 3px 3px;
    }
}

.x-scroll-bar {
    position: relative;
    overflow: hidden;
}

.x-scroll-bar-stretcher {
    position: absolute;
    visibility: hidden;
    width: 100%;
    height: 100%;
}

.x-scroll-bar-x {
    width: 100%;

    > .x-scroll-bar-stretcher {
        width: 300%;
    }

    &.active {
        height: 6px;
    }
}

.x-scroll-bar-y {
    height: 100%;

    > .x-scroll-bar-stretcher {
        height: 300%;
    }

    &.active {
        width: 6px;
    }
}

.x-ie .x-scroll-bar-y {
    position: absolute;
    margin-left: -5px;
}

.x-scroll-indicator {
    background: #333;
    position: absolute;
    z-index: 3;
}

.x-list-light,
.x-dataview-light {
    .x-scroll-indicator {
        background: #fff;
    }
}

.x-scroll-indicator-x {
    height: 100%;
}

.x-scroll-indicator-y {
    width: 100%;
}

.x-scroll-indicator.csstransform {
    background: none;

    > * {
        position: absolute;
        background-color: #333;
    }

    > :nth-child(2) {
        -webkit-transform-origin: 0% 0%;
        background: none;
        content: url(data:image/bmp;base64,Qk08AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABAAAAAAAAYAAAASCwAAEgsAAAAAAAAAAAAAxhgAAAAA);
    }

    &.x-scroll-indicator-light {
        > * {
            background-color: #eee;
        }

        > :nth-child(2) {
            content: url(data:image/bmp;base64,Qk08AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABAAAAAAAAYAAAASCwAAEgsAAAAAAAAAAAAAvXcAAAAA);
        }
    }

    &.x-scroll-indicator-y {
        > * {
            width: 100%;
        }

        > :first-child {
            height: 3px;
            @include border-top-radius(3px);
        }

        > :nth-child(2) {
            height: 1px;
        }

        > :last-child {
            height: 3px;
            @include border-bottom-radius(3px);
        }
    }

    &.x-scroll-indicator-x {
        > * {
            height: 100%;
        }

        > :first-child {
            width: 3px;
            @include border-left-radius(3px);
        }

        > :nth-child(2) {
            width: 1px;
        }
        > :last-child {
            width: 3px;
            @include border-right-radius(3px);
        }
    }
}