/* Styles specific for UI Templates */
.configViewboxesContainer.parentContainer {
    display: block;
    white-space: nowrap;
}
.configViewboxesContainer.use-rows {
    margin-top: 3px;
}
.configViewboxesContainer.use-rows:last-child {
    margin-bottom: 3px;
}

.configViewboxesContainer.use-rows .configViewbox:first-child {
    margin-left: 3px;
}

.configViewboxesContainer.use-rows .configViewbox:last-child {
    margin-right: 3px;
}

.configViewboxesContainer.fixed {
    display: block;
    overflow: auto;
}

.configViewboxesContainer.parentContainer.use-columns {
    height: 100%;
}

.configViewboxesContainer.parentContainer.use-columns[style*="%"] {
    width: 100% !important;
}

#uipanesContainer .configViewboxesContainer.parentContainer
.configViewboxColumn {
    display: inline-block;
    vertical-align: top;
    height: 100%;
}

/* Overwrite width given to this element when it has percentage value */
.configViewboxColumn[data-width-percentage="1"]   { width:   1% !important; }
.configViewboxColumn[data-width-percentage="2"]   { width:   2% !important; }
.configViewboxColumn[data-width-percentage="3"]   { width:   3% !important; }
.configViewboxColumn[data-width-percentage="4"]   { width:   4% !important; }
.configViewboxColumn[data-width-percentage="5"]   { width:   5% !important; }
.configViewboxColumn[data-width-percentage="6"]   { width:   6% !important; }
.configViewboxColumn[data-width-percentage="7"]   { width:   7% !important; }
.configViewboxColumn[data-width-percentage="8"]   { width:   8% !important; }
.configViewboxColumn[data-width-percentage="9"]   { width:   9% !important; }
.configViewboxColumn[data-width-percentage="10"]  { width:  10% !important; }
.configViewboxColumn[data-width-percentage="11"]  { width:  11% !important; }
.configViewboxColumn[data-width-percentage="12"]  { width:  12% !important; }
.configViewboxColumn[data-width-percentage="13"]  { width:  13% !important; }
.configViewboxColumn[data-width-percentage="14"]  { width:  14% !important; }
.configViewboxColumn[data-width-percentage="15"]  { width:  15% !important; }
.configViewboxColumn[data-width-percentage="16"]  { width:  16% !important; }
.configViewboxColumn[data-width-percentage="17"]  { width:  17% !important; }
.configViewboxColumn[data-width-percentage="18"]  { width:  18% !important; }
.configViewboxColumn[data-width-percentage="19"]  { width:  19% !important; }
.configViewboxColumn[data-width-percentage="20"]  { width:  20% !important; }
.configViewboxColumn[data-width-percentage="21"]  { width:  21% !important; }
.configViewboxColumn[data-width-percentage="22"]  { width:  22% !important; }
.configViewboxColumn[data-width-percentage="23"]  { width:  23% !important; }
.configViewboxColumn[data-width-percentage="24"]  { width:  24% !important; }
.configViewboxColumn[data-width-percentage="25"]  { width:  25% !important; }
.configViewboxColumn[data-width-percentage="26"]  { width:  26% !important; }
.configViewboxColumn[data-width-percentage="27"]  { width:  27% !important; }
.configViewboxColumn[data-width-percentage="28"]  { width:  28% !important; }
.configViewboxColumn[data-width-percentage="29"]  { width:  29% !important; }
.configViewboxColumn[data-width-percentage="30"]  { width:  30% !important; }
.configViewboxColumn[data-width-percentage="31"]  { width:  31% !important; }
.configViewboxColumn[data-width-percentage="32"]  { width:  32% !important; }
.configViewboxColumn[data-width-percentage="33"]  { width:  33% !important; }
.configViewboxColumn[data-width-percentage="34"]  { width:  34% !important; }
.configViewboxColumn[data-width-percentage="35"]  { width:  35% !important; }
.configViewboxColumn[data-width-percentage="36"]  { width:  36% !important; }
.configViewboxColumn[data-width-percentage="37"]  { width:  37% !important; }
.configViewboxColumn[data-width-percentage="38"]  { width:  38% !important; }
.configViewboxColumn[data-width-percentage="39"]  { width:  39% !important; }
.configViewboxColumn[data-width-percentage="40"]  { width:  40% !important; }
.configViewboxColumn[data-width-percentage="41"]  { width:  41% !important; }
.configViewboxColumn[data-width-percentage="42"]  { width:  42% !important; }
.configViewboxColumn[data-width-percentage="43"]  { width:  43% !important; }
.configViewboxColumn[data-width-percentage="44"]  { width:  44% !important; }
.configViewboxColumn[data-width-percentage="45"]  { width:  45% !important; }
.configViewboxColumn[data-width-percentage="46"]  { width:  46% !important; }
.configViewboxColumn[data-width-percentage="47"]  { width:  47% !important; }
.configViewboxColumn[data-width-percentage="48"]  { width:  48% !important; }
.configViewboxColumn[data-width-percentage="49"]  { width:  49% !important; }
.configViewboxColumn[data-width-percentage="50"]  { width:  50% !important; }
.configViewboxColumn[data-width-percentage="51"]  { width:  51% !important; }
.configViewboxColumn[data-width-percentage="52"]  { width:  52% !important; }
.configViewboxColumn[data-width-percentage="53"]  { width:  53% !important; }
.configViewboxColumn[data-width-percentage="54"]  { width:  54% !important; }
.configViewboxColumn[data-width-percentage="55"]  { width:  55% !important; }
.configViewboxColumn[data-width-percentage="56"]  { width:  56% !important; }
.configViewboxColumn[data-width-percentage="57"]  { width:  57% !important; }
.configViewboxColumn[data-width-percentage="58"]  { width:  58% !important; }
.configViewboxColumn[data-width-percentage="59"]  { width:  59% !important; }
.configViewboxColumn[data-width-percentage="60"]  { width:  60% !important; }
.configViewboxColumn[data-width-percentage="61"]  { width:  61% !important; }
.configViewboxColumn[data-width-percentage="62"]  { width:  62% !important; }
.configViewboxColumn[data-width-percentage="63"]  { width:  63% !important; }
.configViewboxColumn[data-width-percentage="64"]  { width:  64% !important; }
.configViewboxColumn[data-width-percentage="65"]  { width:  65% !important; }
.configViewboxColumn[data-width-percentage="66"]  { width:  66% !important; }
.configViewboxColumn[data-width-percentage="67"]  { width:  67% !important; }
.configViewboxColumn[data-width-percentage="68"]  { width:  68% !important; }
.configViewboxColumn[data-width-percentage="69"]  { width:  69% !important; }
.configViewboxColumn[data-width-percentage="70"]  { width:  70% !important; }
.configViewboxColumn[data-width-percentage="71"]  { width:  71% !important; }
.configViewboxColumn[data-width-percentage="72"]  { width:  72% !important; }
.configViewboxColumn[data-width-percentage="73"]  { width:  73% !important; }
.configViewboxColumn[data-width-percentage="74"]  { width:  74% !important; }
.configViewboxColumn[data-width-percentage="75"]  { width:  75% !important; }
.configViewboxColumn[data-width-percentage="76"]  { width:  76% !important; }
.configViewboxColumn[data-width-percentage="77"]  { width:  77% !important; }
.configViewboxColumn[data-width-percentage="78"]  { width:  78% !important; }
.configViewboxColumn[data-width-percentage="79"]  { width:  79% !important; }
.configViewboxColumn[data-width-percentage="80"]  { width:  80% !important; }
.configViewboxColumn[data-width-percentage="81"]  { width:  81% !important; }
.configViewboxColumn[data-width-percentage="82"]  { width:  82% !important; }
.configViewboxColumn[data-width-percentage="83"]  { width:  83% !important; }
.configViewboxColumn[data-width-percentage="84"]  { width:  84% !important; }
.configViewboxColumn[data-width-percentage="85"]  { width:  85% !important; }
.configViewboxColumn[data-width-percentage="86"]  { width:  86% !important; }
.configViewboxColumn[data-width-percentage="87"]  { width:  87% !important; }
.configViewboxColumn[data-width-percentage="88"]  { width:  88% !important; }
.configViewboxColumn[data-width-percentage="89"]  { width:  89% !important; }
.configViewboxColumn[data-width-percentage="90"]  { width:  90% !important; }
.configViewboxColumn[data-width-percentage="91"]  { width:  91% !important; }
.configViewboxColumn[data-width-percentage="92"]  { width:  92% !important; }
.configViewboxColumn[data-width-percentage="93"]  { width:  93% !important; }
.configViewboxColumn[data-width-percentage="94"]  { width:  94% !important; }
.configViewboxColumn[data-width-percentage="95"]  { width:  95% !important; }
.configViewboxColumn[data-width-percentage="96"]  { width:  96% !important; }
.configViewboxColumn[data-width-percentage="97"]  { width:  97% !important; }
.configViewboxColumn[data-width-percentage="98"]  { width:  98% !important; }
.configViewboxColumn[data-width-percentage="99"]  { width:  99% !important; }
.configViewboxColumn[data-width-percentage="100"] { width: 100% !important; }

.configViewboxColumn .configViewboxesContainer.use-columns {
    margin-top: 3px;
}

.configViewboxColumn .configViewboxesContainer.use-columns:last-child {
    margin-bottom: 3px;
}

.configViewboxesContainer.use-columns {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.configViewboxColumn .configViewboxesContainer.use-columns {
    width: 100%;
}
.use-columns .configViewbox {
    width: 100%;
}


.configViewboxesContainer .configViewbox {
    display: inline-block;
    box-sizing: border-box;
    padding: 0px;
}
.configViewboxesContainer .title-bar:not(.hidden) ~ .tabsContainer, .configViewboxesContainer .title-bar:not(.hidden) ~ div.pane-scrollbar .tabsContainer {
    border-top: 0px;
}
.configViewbox {
    padding: 10px;
    overflow: auto;
	white-space: normal; /* Don't inherit from .configViewboxesContainer */
}

.configViewboxesContainer .eConTabs {
    padding: 0px;
}
#oConfigContainer > .configViewbox.ui-widget.ui-widget-content.ui-corner-all {
    margin: 2px 4px;
}

.configViewbox.uipane-Text div.text-container {
    padding: 10px;
}

/* Close pane button + title bar */
.closePaneButton.ui-button, .pinPaneButton.ui-button {
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0px;
    width: 10px;
    height: 10px;
    text-align: center;
    z-index: 1;
}
.floating-pane .closePaneButton,
.floating-pane .pinPaneButton {
    z-index: 5;
}

.closePaneButton.pinPaneButton {
    top: 0px;
}

.closePaneButton ~ .title-bar {
    padding-right: 15px;
}

.title-bar.ui-widget-header {
    text-align: center;
    border: 0px;
    padding: 1px 5px 3px 5px;
}

.title-bar span.ui-state-default {
    background: none;
    border: 0px;
}

.restorePaneButton, .slideInPaneButton {
    margin: 0px 2px;
}

.restorePaneButton {
    margin-left: 3px;
    margin-bottom: 3px;
}

#slideInPaneButtonsRight {
    -webkit-transform: rotate(90deg) translate(100%, 0%);
    -webkit-transform-origin: 100% 0%;
    -ms-transform: rotate(90deg) translate(100%, 0%);
    -ms-transform-origin: 100% 0%;
    transform: rotate(90deg) translate(100%, 0%);
    transform-origin: 100% 0%;

    position: fixed;
    right: 0px;
    top: 93px;
}
.is-child #slideInPaneButtonsRight {
	top: 0px;
}

.floating-pane {
    position: fixed;
    z-index: 2;
    padding: 0px;
}
.floating-pane.floating {
    z-index: 3; /* must be on top of pinned panes */
}

.floating-pane.location-Right {
    right: 0px;
    top: 87px;
    bottom: 0px;

    /*height: 100%;*/ /* Not necessary, already set top&bottom */
    width: 300px; /* default width, to be overriden in the pane */
}
.is-child .floating-pane.location-Right {
	top: 0px;
}
.floating-pane.location-Bottom {
    bottom: 0px;
    left: 0px;
    right: 0px;

    /*width: 100%;*/ /* Not necessary, already set left&right */
    height: 300px; /* default height, to be overriden in the pane */
}

.floating-pane .title-bar {
    text-align: center;
    border: 0px;
    margin: 0px;
    padding: 1px 5px 0px 5px;
}

.configViewbox.uipane-Url {
    overflow-y: hidden !important;
}
.configViewbox.uipane-Url iframe {
    height: 100%;
    width: 100%;
    border: 0px;
}
.configViewbox.uipane-Url .pane-scrollbar {
    height: 100%;
}
.configViewbox.uipane-Url .loading {
    background-color: white;
}
button.slideInPaneButton {
    transition: .5s;
}

.minimized { /* Don't hide for imageholder pane -> must be visible to feed the ImageOverlay */
    position: absolute;
    top: -999999px;
    left: -999999px;
}
.minimized:not(.hiding):not(.showing) {
    display: none; /* Hide, so user cannot focus on elements inside */
}

.hiding {
    animation: hidepane .5s;
}
.showing {
    animation: showpane .5s;
}

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

    70% {
        transform: scale(0.7);
    }

    100% {
        transform: scale(0.1) translate(0,4000px);
    }
}


@keyframes showpane {
    1% { /* 1% to prevent page to have a huge scrollbar */
        transform: scale(0.3) translate(0,4000px);
    }

    40% {
        transform: scale(0.8);
    }

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

.hide-floating-pane.location-Bottom {
    animation: hide-pane-bottom .5s;
}
.show-floating-pane.location-Bottom {
    animation: show-pane-bottom .5s;
}

.hide-floating-pane.location-Right {
    animation: hide-pane-right .5s;
}
.show-floating-pane.location-Right {
    animation: show-pane-right .5s;
}

@keyframes hide-pane-bottom {
    to {
        bottom: -1000px;
    }
}
@keyframes show-pane-bottom {
    from {
        bottom: -1000px;
    }
}

@keyframes hide-pane-right {
    to {
        right: -1000px;
    }
}
@keyframes show-pane-right {
    from {
        right: -1000px;
    }
}


/* Responsive
@media only screen and (max-width: 750px) {
    .configViewboxesContainer.use-rows {
        display: inline;
        white-space: wrap;
    }
}
 */