/*
 * ADOBE CONFIDENTIAL
 *
 * Copyright 2013 Adobe Systems Incorporated
 * All Rights Reserved.
 *
 * NOTICE:  All information contained herein is, and remains
 * the property of Adobe Systems Incorporated and its suppliers,
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to Adobe Systems Incorporated and its
 * suppliers and may be covered by U.S. and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from Adobe Systems Incorporated.
 */
/**************************************
* SidePanel for Mobile
**************************************/
@media screen and (max-width: 1024px) {
    .sidepanel-content .editor-ComponentBrowser {
        display: block;
    }

    .sidepanel #components-filter {
        max-width: 100%;
    }
}

/**************************************
* SidePanel for Desktop
**************************************/
@media screen and (min-width: 1025px) {
    .sidepanel .componentfilter {
        width: 100%;
    }

    .sidepanel #components-filter {
        border-bottom: .0625rem solid #e9e9e9;
    }

    .sidepanel .sidepanel-tab-components .editor-SidePanel-resultsPanel {
        padding-top: 0;
    }
}


/* list */

.sidepanel .editor-ComponentBrowser-components coral-list-item, .InsertComponentDialog .editor-ComponentBrowser-components coral-list-item {
    padding: 0;
    border: none;
}

.sidepanel .editor-ComponentBrowser-component, .InsertComponentDialog .editor-ComponentBrowser-component {
    display: block;
    position: relative;
    line-height: 3rem;
    height: 3rem;
    color: #323232;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    background-color:#f5f5f5;
}

.sidepanel .editor-ComponentBrowser-component:hover, .InsertComponentDialog .editor-ComponentBrowser-component:hover {
    background-color:#eeeeee;
}

.sidepanel .editor-ComponentBrowser-component-icon, .InsertComponentDialog .editor-ComponentBrowser-component-icon {
    display: block;
    position: relative;
    float: left;
    width: 3rem;
    height: 3rem;
    text-align: center;
    margin-right: .9375rem;
    line-height: 3rem !important;
}

.sidepanel .editor-ComponentBrowser-component-icon > coral-icon, .InsertComponentDialog .editor-ComponentBrowser-component-icon > coral-icon {
    color: #707070;
}

.sidepanel .editor-ComponentBrowser-component-icon > img, .InsertComponentDialog .editor-ComponentBrowser-component-icon > img {
    width: auto;
    height: auto;
    max-width: 20px;
    max-height: 20px;
}

.sidepanel .editor-ComponentBrowser-component:hover .editor-ComponentBrowser-component-icon > img {
    opacity: 1;
}

.sidepanel .editor-ComponentBrowser-component-title, .InsertComponentDialog .editor-ComponentBrowser-component-title {
    display: block;
    padding-top: .5rem;
    padding-right: .9375rem;
    height: 2rem;
    line-height: 2rem;
    white-space: nowrap;
    overflow: visible;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.sidepanel .editor-ComponentBrowser-component coral-tag, .InsertComponentDialog .editor-ComponentBrowser-component coral-tag {
    margin-top: 10px;
    padding: .35rem 0;
    width: 1.75rem;
    text-align: center;
}

.sidepanel .editor-ComponentBrowser-component-title .foundation-collection-item-title,
.sidepanel .editor-ComponentBrowser-component-title .foundation-layout-util-subtletext {
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* description button */
.sidepanel .editor-ComponentBrowser-component button {
    margin-top: 4px;
}



/* cards */
.sidepanel coral-card.editor-Card {
    min-height: auto;
    max-width: 100%;
    min-width: 140px;
}

.sidepanel coral-card.editor-Card[data-group^="."]{
    display: none;
}

.sidepanel coral-card.editor-Card coral-card-asset {
    color: #606060;
    font-size: 1.5rem;
    min-height: 4rem;
}

.sidepanel coral-card.editor-Card coral-card-asset coral-icon {
    width: auto;
}

.sidepanel coral-card.editor-Card coral-card-asset img {
    max-height: 4rem;
    object-fit: scale-down;
}

/* deprecated grid and cards */
.sidepanel .components.grid .card-component {
    margin: 0 0 0;
    max-width: 100%;
    min-width: 30%;
    padding-right: 0.875rem;
    background: transparent;
}

.sidepanel .components.grid .card-component[data-group^="."]{
    display: none;
}

.sidepanel .components.grid .card-component > a {
    height: 100%;
    padding-top: 3rem;
    /*
        due to a bug in iOS 8.0+ where the callout appear on <a>
        https://bugs.webkit.org/show_bug.cgi?id=136685
        https://jira.corp.adobe.com/browse/CQ-37120
    */
    pointer-events: none;
}

.sidepanel .components.grid .card-component > a > div.label {
    background: #fff;
    margin-bottom: 0;
    position: relative;
    padding: 0.5rem 0;
    font-weight: lighter;
}

.sidepanel .components.grid .card-component > a > div.label em {
    font-style: normal;
    font-size: 0.625rem;
    padding: 0 0.375rem;
    text-transform: uppercase;
}

.sidepanel .components.grid .card-component > a > div.label h4 {
    display: table-cell;
    vertical-align: bottom;
    white-space: normal;
    padding: 0 0.375rem;
    font-size: 1.2rem;
    line-height: 1.5rem; /* 0.3rem extra because the AdobeClean baseline is not aligned */
    font-weight: normal;
    color: #777777;
}

/* green */
.sidepanel .components.grid > div .card-component > a.card-green {
    background: #649137; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-green {
    background: #7daf4b; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-green {
    background: #8cc350; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-green {
    background: #a5d273; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-green {
    background: #c8e1aa; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-green {
    background: #dcebcd; /* 3 shades lighter */
}

/* lavender */
.sidepanel .components.grid > div .card-component > a.card-lavender {
    background: #3c466e; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-lavender {
    background: #465a87; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-lavender {
    background: #5a6eaa; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-lavender {
    background: #7d8cbe; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-lavender {
    background: #afb9d7; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-lavender {
    background: #c8d2e6; /* 3 shades lighter */
}

/* purple */
.sidepanel .components.grid > div .card-component > a.card-purple {
    background: #961e73; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-purple {
    background: #b93282; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-purple {
    background: #d755a5; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-purple {
    background: #e173b9; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-purple {
    background: #ebaad2; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-purple {
    background: #f5cde6; /* 3 shades lighter */
}

/* cyan */
.sidepanel .components.grid > div .card-component > a.card-cyan {
    background: #00829b; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-cyan {
    background: #00a0be; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-cyan {
    background: #1ebed7; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-cyan {
    background: #78d7e6; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-cyan {
    background: #aae6f0; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-cyan {
    background: #beebf5; /* 3 shades lighter */
}

/* ocher */
.sidepanel .components.grid > div .card-component > a.card-ocher {
    background: #c37300; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-ocher {
    background: #e18c00; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-ocher {
    background: #f0a01e; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-ocher {
    background: #f5b95a; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-ocher {
    background: #fad296; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-ocher {
    background: #fae6be; /* 3 shades lighter */
}

/* violet */
.sidepanel .components.grid > div .card-component > a.card-violet {
    background: #644ba0; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-violet {
    background: #826ee1; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-violet {
    background: #9b8ce6; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-violet {
    background: #b4aaeb; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-violet {
    background: #d2c8f5; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-violet {
    background: #e1dcfa; /* 3 shades lighter */
}

/* mint */
.sidepanel .components.grid > div .card-component > a.card-mint {
    background: #28826e; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-mint {
    background: #32a08c; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-mint {
    background: #3cb5a0; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-mint {
    background: #78c8be; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-mint {
    background: #aadcd7; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-mint {
    background: #cdebe6; /* 3 shades lighter */
}

/* aqua */
.sidepanel .components.grid > div .card-component > a.card-aqua {
    background: #1e5a8c; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-aqua {
    background: #286eaf; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-aqua {
    background: #3287d2; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-aqua {
    background: #7dafe6; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-aqua {
    background: #aacdf0; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-aqua {
    background: #d2e6f5; /* 3 shades lighter */
}

/* magenta */
.sidepanel .components.grid > div .card-component > a.card-magenta {
    background: #c81950; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-magenta {
    background: #dc3c69; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-magenta {
    background: #f0557d; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-magenta {
    background: #f5789b; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-magenta {
    background: #faafc3; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-magenta {
    background: #facddc; /* 3 shades lighter */
}

/* frog */
.sidepanel .components.grid > div .card-component > a.card-frog {
    background: #28826e; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-frog {
    background: #32a08c; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-frog {
    background: #3cb5a0; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-frog {
    background: #78c8be; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-frog {
    background: #aadcd7; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-frog {
    background: #cdebe6; /* 3 shades lighter */
}

/* orange */
.sidepanel .components.grid > div .card-component > a.card-orange {
    background: #be4b00; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-orange {
    background: #dc5f00; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-orange {
    background: #eb782d; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-orange {
    background: #f0965a; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-orange {
    background: #fabe9b; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-orange {
    background: #fad7be; /* 3 shades lighter */
}

/* blue */
.sidepanel .components.grid > div .card-component > a.card-blue {
    background: #0a78c8; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-blue {
    background: #4196e6; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-blue {
    background: #78b4f5; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-blue {
    background: #afd2fa; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-blue {
    background: #bedcfa; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-blue {
    background: #d7ebfa; /* 3 shades lighter */
}

/* darkgreen */
.sidepanel .components.grid > div .card-component > a.card-darkgreen {
    background: #467d55; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-darkgreen {
    background: #50965a; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-darkgreen {
    background: #5faf69; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-darkgreen {
    background: #82c387; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-darkgreen {
    background: #b4dcb9; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-darkgreen {
    background: #d2ebd2; /* 3 shades lighter */
}

/* fuchsia */
.sidepanel .components.grid > div .card-component > a.card-fuchsia {
    background: #822d87; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-fuchsia {
    background: #964196; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-fuchsia {
    background: #aa5faf; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-fuchsia {
    background: #c387be; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-fuchsia {
    background: #d7b4d2; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-fuchsia {
    background: #e6d2e6; /* 3 shades lighter */
}

/* coral */
.sidepanel .components.grid > div .card-component > a.card-coral {
    background: #d22d1e; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-coral {
    background: #f04641; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-coral {
    background: #fa5a50; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-coral {
    background: #fa7873; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-coral {
    background: #faaaaa; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-coral {
    background: #facdcd; /* 3 shades lighter */
}

/* yellow */
.sidepanel .components.grid > div .card-component > a.card-yellow {
    background: #d29600; /* 2 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n) .card-component:nth-child(3n-1) > a.card-yellow {
    background: #e6b43c; /* 1 shades darker */
}
.sidepanel .components.grid > div:nth-child(3n-3) .card-component:nth-child(2n-3) > a.card-yellow {
    background: #f5c841; /* core color */
}
.sidepanel .components.grid > div:nth-child(2n-3) .card-component:nth-child(2n-6) > a.card-yellow {
    background: #fad269; /* 1 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-1) .card-component:nth-of-type(odd) > a.card-yellow {
    background: #fae6a5; /* 2 shades lighter */
}
.sidepanel .components.grid > div:nth-child(3n-2) .card-component:nth-child(7n-4) > a.card-yellow {
    background: #faf0c8; /* 3 shades lighter */
}