/* jp-frame with flex. Base layout */
.jp-frame.jp-flex .jp-target {
    flex: 1;
    padding-bottom: 0 !important;
}

.jp-frame.jp-flex .jp-footer {
    position: relative;
}

.jp-grid-flex {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.jp-grid-flex-cover {
    height: 100%;
}

[class*="jp-width"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.jp-width-auto {
    width: auto;
}

.jp-width-expand {
    flex: 1;
    min-width: 1px;
}

.jp-width-0 {
    width: 0;
}



.jp-wfl-io-block-message-text-vertical {
    transform: rotate(-90deg) !important;
    overflow: visible;
}

.jp-wfl-io-block-message-inline span {
    display: inline;
}

.jp-desc-wrap {
    z-index: 1;
}

/* Panel 1. Navigation */

.jp-panel-navigation {
    position: relative;
    z-index: 10;
    flex: 0.0000001 1 200px;
    -moz-transition: flex 600ms ease;
    -webkit-transition: flex 600ms ease;
    transition: flex 600ms ease;
}

.jp-panel-collapsed.jp-panel-navigation {
    flex: 0.0000001 1 42px;
}

/* Panel 2. List */
.jp-panel-list {
    position: relative;
    left: 0;
    -moz-transition: all 600ms ease;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    flex: 1;
    min-width: 1px;
}

/* Panel 3. Details */
.jp-panel-details {
    position: relative;
    -moz-transition: all 600ms ease;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
}

/* Panel 4. Info */
.jp-panel-info {
    position: relative;
    -moz-transition: all 600ms ease;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    flex: 0.0000001 0 0;
}

.jp-panel-info-open .jp-panel-info {
    flex: 0.0000001 0 200px;
}

/* Control column for resize width column */
.jp-panel-control-resize {
    position: relative;
    z-index: 10;
    flex: 0.0000001 1 4px;
    -moz-transition: flex 600ms ease;
    -webkit-transition: flex 600ms ease;
    transition: flex 600ms ease;
    background-color: #202020;
}

.jp-panel-control-resize {
    cursor: col-resize;
}

.jp-panel-details + .jp-panel-control-resize {
    display: none;
}

.jp-panel-info-open .jp-panel-details + .jp-panel-control-resize {
    display: block;
}


/* Panel-widget */

.jp-panel-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.jp-panel-widget {
    position: relative;
    z-index: 0;
    flex-direction: column;
    display: flex;
    width: 100%;
    height: 100%;
}

.jp-panel-dock {
    position: relative;
    flex: 0.0000002 0 auto;
    /*min-height: 40px;*/
}

.jp-panel-deck {
    position: relative;
    flex: 1;
}

.jp-panel-footer {
    position: relative;
    flex: 0.0000002 0 auto;
}

.jp-panel-dock .jp-nav-dock-pull-left {
    width: 100%;
}

.jp-panel-widget .jp-panel-dock .jp-nav:only-child {
    width: 100%;
}

.jp-panel-widget .jp-panel-dock .jp-nav {
    display: flex;
    align-items: center;
    background: transparent;
}

.jp-panel-dock-description,
.jp-panel-details-active .jp-panel-width-collapse .jp-panel-dock-description,
.jp-panel-details-open .jp-panel-width-collapse .jp-panel-dock-description {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 2.5em;
}

.jp-panel-dock-description > span.jp-view-clip:first-child {
    padding: 0 .5em;
}

.jp-panel-dock-control,
.jp-panel-details-active .jp-panel-width-collapse .jp-panel-dock-control,
.jp-panel-details-open .jp-panel-width-collapse .jp-panel-dock-control {
    flex: 0.0000002 0 auto;
    display: flex;
    align-items: center;
}

/* Control button expand (opened) / collapsed panel */

.jp-panel-dock-bu-closed,
.jp-panel-dock-bu-opened,
.jp-panel-dock-bu-expanded {
    display: none;
}

.jp-panel-width-collapse .jp-panel-dock-bu-closed {
    display: none;
}
.jp-panel-width-collapse .jp-panel-dock-bu-opened,
.jp-panel-width-collapse .jp-panel-dock-bu-expanded {
    display: block;
}

.jp-panel-details-open .jp-panel-dock-bu-closed,
.jp-panel-details-active .jp-panel-dock-bu-closed,
.jp-panel-details-open .jp-panel-width-collapse .jp-panel-dock-bu-closed {
    display: block;
}

.jp-panel-details-open .jp-panel-dock-bu-opened,
.jp-panel-details-open .jp-panel-width-collapse .jp-panel-dock-bu-opened,
.jp-panel-details-open .jp-panel-dock-bu-expanded,
.jp-panel-details-open .jp-panel-width-collapse .jp-panel-dock-bu-expanded {
    display: none;
}

.jp-panel-info-open .jp-panel-info .jp-panel-dock-bu-closed {
    display: block;
}

.jp-panel-width-collapse .jp-panel-deck-body-content {
    display: none;
}

.jp-panel-details-active .jp-panel-width-collapse .jp-panel-deck-body-content,
.jp-panel-details-open .jp-panel-width-collapse .jp-panel-deck-body-content {
    display: block;
}


.jp-panel-deck-wrap {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.jp-panel-deck-body {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.jp-panel-deck-footer {
    position: relative;
    flex: 0.0000001 0 auto;
    overflow: hidden;
}

.jp-panel-deck-footer-nav {
    text-align: right;
}




/* Hooks */
[data-viewport="h,auto"] {
    min-height: auto !important;
}

[data-viewport="350"] {
    width: 350px;
}

[data-viewport="200"] {
    width: 200px;
}

[data-viewport="200:f"] {
    width: 200px;
    height: 100%;
}

[data-viewport="42"] {
    width: 42px;
}

[data-viewport="42:f"] {
    width: 42px;
    height: 100%;
}

/* Responsible viewport */

@media (max-width: 1199px) {

    .jp-panel-details-active .jp-panel-details,
    .jp-panel-details-open .jp-panel-details {
        flex: 1;
    }

    .jp-panel-details-active .jp-panel-list,
    .jp-panel-details-open .jp-panel-list {
        z-index: 0;
        left: -100%;
        flex: 0;
    }

    .jp-panel-info-active .jp-panel-info,
    .jp-panel-info-open .jp-panel-info {
        flex: 1;
    }

    .jp-panel-info-active .jp-panel-list,
    .jp-panel-info-open .jp-panel-list {
        z-index: 0;
        left: -200%;
        flex: 0;
    }

    .jp-panel-info-active .jp-panel-details,
    .jp-panel-info-open .jp-panel-details,
    .jp-panel-info-active .jp-panel-width-collapse.jp-panel-details,
    .jp-panel-info-open .jp-panel-width-collapse.jp-panel-details,
    .jp-panel-info-active.jp-panel-details-open .jp-panel-details,
    .jp-panel-info-open.jp-panel-details-open .jp-panel-details {
        z-index: 0;
        left: -100%;
        flex: 0;
    }

    /* close column resize */
    .jp-panel-details-active .jp-panel-control-resize,
    .jp-panel-details-open .jp-panel-control-resize,
    .jp-panel-info-active .jp-panel-control-resize,
    .jp-panel-info-open .jp-panel-control-resize,
    .jp-panel-info-open .jp-panel-details + .jp-panel-control-resize {
        display: none;
    }
}

@media (min-width: 750px) and (max-width: 1199px) {
    .jp-panel-details-active .jp-panel-width-collapse.jp-panel-details,
    .jp-panel-details-open .jp-panel-width-collapse.jp-panel-details {
        width: 99.6%;
    }

    .jp-panel-width-collapse.jp-panel-details {
        width: 42px;
    }
    .jp-panel-ifo-open .jp-panel-info {
        /*flex: 0.0000001 1 99.6%;*/
        flex: 1;
    }

}

@media (max-width: 749px) {

    .jp-panel-navigation.jp-panel-open + .jp-panel-control-resize + .jp-width-expand .jp-panel-container:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 100000000;
    }

    .jp-panel-details-open .jp-panel-details,
    .jp-panel-details-active .jp-panel-details{
        /*flex: 0.0000001 1 99.4%;*/
        flex: 1;
    }

    .jp-panel-info-active .jp-panel-info,
    .jp-panel-info-open .jp-panel-info {
        /*flex: 0.0000001 1 99.4%;*/
        flex: 1%;
    }

    .jp-panel-width-collapse .jp-panel-dock-description,
    .jp-panel-width-collapse .jp-panel-dock-control {
        display: block;
    }

    .jp-panel-list + .jp-panel-control-resize,
    .jp-panel-details + .jp-panel-control-resize {
        display: none;
    }
}