/*
 * WARNING: This file is NOT a CSS file but a file interpreted by JS scripts ! Do not cache it using Cache plugins !
 */

/*
 * Tray Responsive Changes
 * -----------------------
 * Hide the tray completely if #cuar-js-content-container is <600 px
 * JS will take care about moving the sidebar out of the tray.
 */
@element 'body.tray-rescale #cuar-js-content-container' and (max-width: 551px){
    body.customer-area-active.tray-rescale #cuar-js-content-container .tray-left,
    body.customer-area-active.tray-rescale #cuar-js-content-container .tray-right,
    body.customer-area-active.tray-rescale #cuar-js-content-container .scroller-bar{
        display: none!important;
    }
    body.customer-area-active.tray-rescale #cuar-js-content-container .tray-center,
    body.customer-area-active.disable-tray-rescale #cuar-js-content-container .tray-center
    {
        padding-right: 13px !important;
        height: auto!important;
    }
    body.customer-area-active.tray-rescale #cuar-js-content-container .tray-scroller,
    body.customer-area-active.tray-rescale #cuar-js-content-container .scroller-content{
        overflow: auto;
        overflow-x: auto;
        overflow-y: auto;
        height: auto!important;
    }
}
@element 'body.disable-tray-rescale #cuar-js-content-container' and (max-width: 551px){
    body.customer-area-active.disable-tray-rescale #cuar-js-content-container .tray-center
    {
        padding-right: 13px !important;
        height: auto!important;
    }
}

/*
 * Collection Responsive Changes
 * -----------------------------
 * Adapt collection thumb sizes depending on wrapper width
 */

/* Grid view */
@element 'body.customer-area-active #cuar-js-collection-gallery' and (max-width: 1350px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .gap {
        width: 23.5%;
    }
}
@element 'body.customer-area-active #cuar-js-collection-gallery' and (max-width: 1050px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .gap {
        width: 32%;
    }
}
@element 'body.customer-area-active #cuar-js-collection-gallery' and (max-width: 650px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .gap {
        width: 49%;
    }
}
@element 'body.customer-area-active #cuar-js-collection-gallery' and (max-width: 450px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content:not(.list) .gap {
        width: 100%;
    }
    body.customer-area-active #cuar-js-content-container .collection .collection-content .gap {
        display: none;
    }
}

/* List view */
@element 'body.customer-area-active #cuar-js-collection-gallery' and (min-width: 1051px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .gap {
        width: 49%;
    }
}
@element 'body.customer-area-active #cuar-js-collection-gallery' and (max-width: 1050px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .gap {
        width: 100%;
    }
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks .collection-list-left {
        width: 40%;
    }
}
@element 'body.customer-area-active #cuar-js-collection-gallery' and (max-width: 450px){
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .mix,
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .gap {
        width: 100%;
    }
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks .collection-list-left,
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks .collection-list-right,
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks{
        width: 100%;
        display: block;
        border-left: 0;
    }
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks .collection-list-left > div,
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks .collection-list-right > div {
        padding: 5px!important;
    }
    body.customer-area-active #cuar-js-content-container .collection .collection-content.list .collection-item .collection-list-blocks .collection-footer-meta-owner {
        padding: 0px!important;
    }
}

/*
 * Customer account Responsive Changes
 * -----------------------------------
 * Adapt fields sizes depending on wrapper width
 * From framework/theme_wpca/assets/skin/wpca/tweaks/fields.less
 */
 body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields {
     margin-left: -11px;
     margin-right: -11px;
     border-top: 1px solid #171818;
     padding: 15px 0
 }
 
 body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field:before,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields:before,body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field:after,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields:after {
     content: " ";
     display: table
 }
 
 body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field:after,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields:after {
     clear: both
 }
 
 body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field:before,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields:before,body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field:after,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields:after {
     content: " ";
     display: table
 }
 
 body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field:after,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields:after {
     clear: both
 }
 body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field .cuar-field-label,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields .cuar-field-label {
     float: left;
     width: 100%;
     position: relative;
     min-height: 1px;
     padding-left: 11px;
     padding-right: 11px;
     font-weight: bold
 }
@element 'body.customer-area-active #cuar-js-content-container' and (min-width: 451px) {
    body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field .cuar-field-label,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields .cuar-field-label {
        float:left;
        width: 33.33333333%
    }
}

@element 'body.customer-area-active #cuar-js-content-container' and (min-width: 651px) {
    body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field .cuar-field-label,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields .cuar-field-label {
        float:left;
        width: 25%
    }
}

@element 'body.customer-area-active #cuar-js-content-container' and (min-width: 1051px) {
    body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field .cuar-field-label,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields .cuar-field-label {
        float:left;
        width: 16.66666667%
    }
}
body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field .cuar-field-value,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields .cuar-field-value {
    float: left;
    width: 100%;
    position: relative;
    min-height: 1px;
    padding-left: 11px;
    padding-right: 11px
}

@element 'body.customer-area-active #cuar-js-content-container' and (min-width: 451px) {
    body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field .cuar-field-value,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields .cuar-field-value {
        float:left;
        width: 66.66666667%
    }
}

@element 'body.customer-area-active #cuar-js-content-container' and (min-width: 651px) {
    body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field .cuar-field-value,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields .cuar-field-value {
        float:left;
        width: 75%
    }
}

@element 'body.customer-area-active #cuar-js-content-container' and (min-width: 1051px) {
    body.customer-area-active #cuar-js-content-container .customer-account .cuar-field.cuar-readonly-field .cuar-field-value,body.customer-area-active #cuar-js-content-container .customer-account .cuar-profile-fields .cuar-field-value {
        float:left;
        width: 83.33333333%
    }
}