@charset"UTF-8";

/*------------------------------------------------------------------
[Responsive]

@license Copyright 2012-15 (c) RISE Ges.m.b.H.
 ____   ___  ____   _____
|  _ \  | | / ___| | ____|
| |_) | | | \___ \ |  _|
|  _ <  | |  ___) || |___
|_| \_\ |_| |____/ |_____|

RSL VNr.:       0.5.2.

Primary use:	Responsive Layout and Style Adaptations

Note:           FOR UPDATE AND FUTURE COMPATIBILITY:
				DO NOT EXCESSIVELY EDIT THIS FILE IN PROJECTS.
				FOR BRANDING AND LAYOUT CHANGES THERE EXIST SEPARATE
				FILES: "branding.css" and "customlayout.css"
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

1.      Header / #header
2.      Navigation / .nav
2.1.    Navigation / .nav.ellipsis
3.      Responsive column layout
4.      Forms
5.      Global Messages / .global-messages
6.      Pricing-Table / .pricing-table
7.      Wizard / .wizard
8.      Footer / #footer
9.      Box-Table / .btable
-------------------------------------------------------------------*/

/* [1. Header / #header ]
-------------------------------------------------------------------*/
/* =Note: For screens <= 700px */
@media all and (max-width: 700px) {
    #header {
        height: auto;
        margin-left: 15px;
    }

    #header .branding .logo {
        position: relative;
        margin-left: 0px;
    }
}

/* [2. Navigation / .nav ]
-------------------------------------------------------------------*/
/* =Note: For screens <= 600px */
@media all and (max-width: 600px) {
    /* =Note: Remove branding completely for small devices */
    .nav .branding.substitutable {
        display: none;
    }

    /* =Note: Restrict width of labels */
    .nav:not(#nav-primary) > .nav-list > .nav-item > .nav-label {
        max-width: 80px;
        text-overflow: ellipsis;
        overflow: hidden;
        padding-left: 10px;
        padding-right: 10px;
    }

    .nav:not(#nav-primary) > .nav-list > .nav-item > .nav-label .badge,
    .nav:not(#nav-primary) > .nav-list > .nav-item > .nav-label .label {
        left: 22px;
        top: 10px;
        padding: 0px 4px;
    }
}

/* =Note: For screens <= 950px */
@media all and (max-width: 950px) {

    /* =Note: Remove spacing for branding */
    .nav .branding {
        width: auto;
        border-right: 0px;
    }

    .nav .toggle-nav-primary {
        display: none;
    }

    /* =Note: Remove padding for side navigation */
    .nav-left-split > div:not(.nav),
    .nav-right-split > div:not(.nav){
        width: 100% !important;
    }

    /* =Note: Remove full-height navigation background */
    .nav-full-height:before {
        display: none;
    }

    /* =Note: Remove container padding for fixed navigation */
    .nav-fixed #container {
        padding-top: 0px !important;
    }

    .nav,
    .nav.nav-fixed,
    .nav.side {
        display: block;
        position: fixed !important;
        width: 100% !important;
        top: auto !important;
        height: auto;
    }

    .nav:not(#nav-primary):after {
        display: block;
        content: "";
        clear: both;
        visibility: hidden;
    }

    /* =Note: Search style */
    .nav .search {
        float: none;
        position: static;
        display: inline-block;
    }

    #nav-primary.m-open.nav .search ~ .nav-list {
        top: 0px;
    }

    .search .search-input-wrapper {
        position: relative;;
    }

    .search .search-input-wrapper a {
        top: 0px;
        right: 1px;
    }

    .nav .search .search-results-wrapper {
        left: 0px;
        right: 0px;
        top: auto;
        z-index: 3;
        margin-top: 10px;
    }

    .search-results-header .cell:last-child,
    .search-results-item .cell:last-child {
        width: 100%;
    }

    #nav-primary.nav {
        min-height: 45px;
    }

    /* =Note: Navigation toggle control */
    #nav-primary.nav .mobile-nav-control {
        display: block;
    }

    #nav-primary.nav .mobile-nav-control a{
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        top: 5px;
        right: 7px;
        font-size: 27px;
        border: none;
        /*color: #ffffff;*/
    }

    #nav-primary.nav .nav-item,
    #nav-primary.nav .nav-item.current {
        float: none;
        /*border: none;*/
        min-width: inherit;
        display: block;
        padding-top: 0px;
    }

    #nav-primary.nav > .nav-list {
        display: none;
        padding-bottom: 10px;
        float: none;
    }

    #nav-primary.m-open.nav > .nav-list {
        display: block;
        top: 45px;
        margin-bottom: 45px;
        position: relative;
    }

    #nav-primary.nav > .nav-list .nav-list {
        display: block;
        right: auto !important;
        top: auto !important;
        left: auto !important;
        visibility: visible;
        opacity: 1;
        position: relative;
        box-shadow: none;
        border: none;
        padding: 0;
        margin: 0px;
        min-width: inherit;
        height: auto !important;
    }

    #nav-primary.nav .nav-label {
        border: none;
        float: none;
        margin: 2px 0;
        padding: 0 0 0 10px;
        padding-top: 1rem;
        padding-bottom: 1rem;
        height: auto;
        line-height: 30px;
    }

    #nav-primary.nav .nav-list .nav-list .nav-label {
       padding-left: 55px;
    }

    #nav-primary.nav .nav-list .nav-list .nav-list .nav-label {
        padding-left: 110px;
    }

    #nav-primary.nav .nav-item.current > .nav-label {
        /*background: rgba(0,0,0,0.2);*/
        color: #EE3D6B;
        text-shadow: none;
        border-bottom: none;
    }

    #nav-primary.nav .nav-label:before,
    #nav-primary.nav .nav-label:after {
        display: none;
    }
}

/* [2.1. Navigation / .nav.ellipsis ]
-------------------------------------------------------------------*/
/* =Note: For screens >= 700px and <= 1100px */
@media all and (max-width: 1100px) and (min-width: 700px) {
    .nav.ellipsis > .nav-list > .nav-item > .nav-label {
        padding-left: 10px;
        font-size: 12px;
    }

    .nav.ellipsis > .nav-list > .nav-item > .nav-label .badge,
    .nav.ellipsis > .nav-list > .nav-item > .nav-label .label {
        position: absolute;
        left: 18px;
        top: 6px;
        padding: 0px 4px;
    }

    .nav.ellipsis .search {
        width: 150px;
    }
}

/* =Note: For screens >= 700px and <= 900px */
@media all and (max-width: 900px) and (min-width: 700px) {
    .nav.ellipsis > .nav-list > .nav-item > .nav-label {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 5px;
        padding-left: 5px;
    }

    .nav.ellipsis > .nav-list > .nav-item > .nav-label .badge,
    .nav.ellipsis > .nav-list > .nav-item > .nav-label .label {
        left: 13px;
    }

    .nav.ellipsis > .nav-list > .nav-item > .nav-label:before {
        display: none;
    }
}


/* [3. Responsive column layout ]
-------------------------------------------------------------------*/
/* =Note: 1000px - 700px shrink to two columns */
@media all and (max-width: 1000px) and (min-width: 700px) {

    .columns-3 > .column,
    .columns-4 > .column{
        width: 49%;
    }

    /* =Note: If a column-2 or column-3 item occurs, make it 100% wide */
    .columns-3 > .columns-2,
    .columns-3 > .column:last-child,
    .columns-4 > .columns-2,
    .columns-4 > .columns-3 {
        width: 100%;
        margin-right: 0%;
    }

    .columns-3 > [class*="column"]:nth-child(2n+0),
    .columns-4 > [class*="column"]:nth-child(2n+0) {
        margin-right: 0%;
    }
}

/* =Note: For screens <= 700px */
@media all and (max-width: 700px) {
    .column,
    .columns-3 > .columns-2,
    .columns-4 > .columns-2,
    .columns-4 > .columns-3 {
        width: 100% !important;
        margin-right: 0% !important;
    }
}

/* [4. Forms ]
-------------------------------------------------------------------*/
/* =Note: For screens <= 1000px */
@media all and (max-width: 1000px) {
    .whiteboard,
    fieldset > ul.fieldset-content{
        padding: 10px 20px 10px 20px;
    }

    .whiteboard fieldset > ul.fieldset-content,
    .ui-tabs.contained .ui-tabs-panel .whiteboard,
    .ui-tabs.contained .ui-tabs-panel fieldset > ul,
    .portlet fieldset .fieldset-content {
        padding-left: 0px;
    }

    fieldset ul.fieldset-content li.fieldset-item > label:first-child {
        margin-left: 0px;
        padding-left: 0px;
        width: auto;
        padding-right: 0px;
        padding-bottom: 5px;
        display: block;
        vertical-align: top;
    }

    .xx-large-input,
    .x-large-input {
        width: 90%;
    }

    .command-box,
    .portlet .command-box {
        padding-left: 10px;
    }
}

/* =Note: For screens <= 700px */
@media all and (max-width: 700px) {
    .command-box.top {
        height: auto;
        top: 0px;
    }
}

/* [5. Global Messages / .global-messages ]
-------------------------------------------------------------------*/
/* =Note: For screens <= 700px */
@media all and (max-width: 700px) {
    .global-messages {
        top: 0px;
        left: 0px;
        right: 0px;
        -webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.15), 1px 0 5px 0 rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.15), 1px 0 5px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.15), 1px 0 5px 0 rgba(0, 0, 0, 0.2);
    }

    .global-messages .messages-item {
        margin: 0px;
        border-radius: 0px;
        border-width: 0 0 1px 0;
        opacity: 1;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .global-messages .messages-item .msg-icon {
        top: 7px;
    }

    .messages-item {
        width: 100%;
        margin: 5px 0px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .global-messages .messages-item .msg-body {
        margin: 0px;
        padding: 5px;
    }

    .messages-item .msg-hide {
        right: 7px;
        top: 10px;
        font-size: 20px;
        opacity: 0.2;
    }
}

/* [6. Pricing-Table / .pricing-table ]
-------------------------------------------------------------------*/
/* =Note: For screens <= 700px */
@media all and (max-width: 700px) {
    .pricing-table {
        padding: 15px 0;
    }

    .pricing-items {
        display: block;
        width: auto;
    }

    .pricing-item {
        display: block;
        margin-bottom: 30px;
    }

    .pricing-item.featured {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        box-shadow: none;
    }

    .pricing-table .pricing-items .pricing-item .header, {
        border: 1px solid rgb(160,160,160);
    }

    .pricing-table .pricing-items .pricing-item .body {
        border: 1px solid rgb(200, 200, 200);
        border-top: none;
        border-bottom-color: rgb(225,225,225);
    }

    .pricing-table .pricing-items .pricing-item .footer {
        border: 1px solid rgb(200, 200, 200);
        border-top: none;
    }

    .pricing-table .pricing-items .pricing-item .body li {
        padding: 12px 0;
        text-align: center;
    }
}

/* [7. Wizard / .wizard ]
-------------------------------------------------------------------*/
@media all and (max-width: 1500px) {
    /* =Note: hide every past step except the immediate predecessor */
    .overflow-wizard .step.past:not(.previous-step) {
        display: none !important;
    }

    .overflow-wizard .previous-step {
        padding-left: 21px !important;
    }
}

/* =Note: For screens <= 1100px */
@media all and (max-width: 1100px) {

    .wizard.simple-wizard {
        border: none;
        background: none;
    }

    /* =Note: Move action buttons to next line */
    .wizard.simple-wizard .actions {
        background: transparent;
        border: none;
        box-shadow: none;
        display: block;
        float: right;
        padding-top: 10px;
        position: relative;
        text-align: right;
        width: 100%;
    }

    .simple-wizard .step {
        padding-right: 0px;
        padding-left: 35px;
        border: 1px solid rgb(202,202,202);
        font-size: 14px;
    }

    .wizard.simple-wizard .step.past:after {
        border-color: rgb(202,202,202);
    }

    .wizard.simple-wizard .step:after {
        top: 6px;
    }

    .wizard.simple-wizard .step:first-child {
        padding-left: 15px;
    }

}

/* =Note: For screens <= 700px */
@media all and (max-width: 700px) {

    .wizard {
        overflow: visible;
    }

    .wizard.simple-wizard .steps {
        display: table;
        width: 100%;
    }

    .wizard.simple-wizard .step {
        font-size: 14px;
        padding: 10px;
        float: none;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }

    .wizard .step:not(:first-child) {
        border-left: none;
    }

    .wizard .step:after {
        display: none;
    }

    .overflow-wizard .actions {
        top: -50px;
        background: rgba(0,0,0,0);
        border-color: rgba(0,0,0,0) !important;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .overflow-wizard.wizard .actions .button:last-child {
        margin-right: 0;
    }

    .overflow-wizard.wizard .steps {
        width: 100%;
        padding-right: 0;
    }

    .overflow-wizard .step {
        padding: 10px;
    }

    .overflow-wizard .steps:after {
        position: absolute;
        content:"";
        width: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        -webkit-box-shadow: 5px 0 8px -4px rgba(0,0,0,0.3) inset, -5px 0 8px -4px rgba(0,0,0,0.3) inset;
        box-shadow: 5px 0 8px -4px rgba(0,0,0,0.3) inset, -5px 0 8px -4px rgba(0,0,0,0.3) inset;
    }
}

/* =Note: For screens <= 900px */
@media all and (max-width: 900px) {
    .narrow-wizard .steps {
        overflow: hidden;
        display: flex !important;
    }

    .narrow-wizard .step {
        width: 100%;
        display: inline-block !important;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        flex: 0 0 auto;
    }

    .narrow-wizard .step:after,
    .narrow-wizard .step.past {
        display: none !important;
    }

    .narrow-wizard .step.current a,
    .narrow-wizard .step.current {
        background: #fff;
        color: #505050;
    }

    .narrow-wizard.buttons-sides .actions {
        width: 100%;
        background: none;
    }

    .narrow-wizard.buttons-sides .actions .button:last-child {
        float: right;
    }

    .narrow-wizard.buttons-sides .step.current {
        text-align: center;
        padding: 10px;
    }

}

@media all and (max-width: 400px) {

    /* =Note: now hide the previous step as well*/
    .overflow-wizard .previous-step {
        display: none;
    }
}


/* [8. Footer / #footer ]
-------------------------------------------------------------------*/
/* =Note: For screens <= 700px */
@media all and (max-width: 700px) {
    .nav-full-height.nav-left-split #footer ul,
    .nav-full-height.nav-right-split #footer ul {
        padding: 0px;
    }
}

/* [1. Header / #header ]
-------------------------------------------------------------------*/
/* =Note: For screens <= 700px */
@media all and (max-width: 700px) {
    
    .btable,
    .btable-content,
    .btable-row,
    .btable-cell,
    .mobile-labels .btable-label {
        display: block !important;
    }

    .btable-wrapper {
        /*border: 1px solid rgb(210,210,210);*/
        border-top-color: rgba(0, 0, 0, 0.2) !important;
        border-radius: 0;
    }

    .loading-table .btable-header,
    .btable-header {
        display: none; /* TODO: replace with accessible style*/
    }

    .btable-cell {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .btable-row {
        padding: 10px 0;
        border-bottom: 1px solid rgb(210,210,210) !important;
    }

    .btable-row:last-child {
        border-bottom: none !important;
    }

    .btable-label {
        position: relative;
    }

    .mobile-labels-offset .btable-label {
        display: inline-block;
        width: 120px;
    }

    .btable-cell {
        border: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    .btable .btable-row:nth-child(odd),
    .btable .btable-row:nth-child(even) {
        background: rgb(255,255,255);
    }

    .btable-cell.mobile-highlighted-cell {
        font-weight: bold;
    }

    .btable .loading {
        border-width: 0px !important;
    }
    
    .btable-paginate {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

    .paginate-item {
        -webkit-box-flex: 1 0 auto;
        -moz-box-flex:  1 0 auto;
        -webkit-flex:  1 0 auto;
        -ms-flex:  1 0 auto;
        flex:  1 0 auto;
        text-align: center;
    }

    .paginate-item.current-item,
    .paginate-item a {
        padding-top: 7px;
    }



}