/**
 * Unfortunately, pseudo-elements on the slotted element in the shadow DOM do not work.
 * https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668
*/
:root {
    --warema-side-menu-width: 200px;
}

:root {
    --warema-ui-font: 'nimbus-sans', 'Helvetica Neue', 'Arial', sans-serif;
}

html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
}

.pl-js-pattern-example {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

#media-image .pl-js-pattern-example {
    max-width: 800px;
}

#dialog-snackbar-host .pl-js-pattern-example {
    height: 50vh;
}

[id*='app-frame'] > div.pl-js-pattern-example {
    position: relative;
    min-height: 400px;
}

#app-frame-content > div.pl-js-pattern-example {
    min-height: 400px;
}

[id*='app-frame'] warema-header,
[id*='app-frame'] warema-side-menu {
    position: absolute;
}

#app-frame-header warema-header,
[id*='app-frame-side-menu'] warema-side-menu {
    position: relative;
    top: 0;
}

#navigation-anchor-flags warema-anchor-flags {
    position: static;
}

[id*='buttons-button-primary-inverted'] > div.pl-js-pattern-example {
    background-color: #c3c3c3;
    padding: 10px;
}

.pl-c-category__title-link.patternLink {
    color: #222;
}

/*
 * ~CI COLORS~
 */
.color-group {
    padding: 30px;
}

.color-group + .color-group {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid rgba(211, 211, 211, 0.5);
}

.color-group-headline {
    margin-bottom: 10px;
}

.color-group-colors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 50px 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.color-group-color {
    height: 160px;
}

.color-group-info {
    margin-top: 15px;
}

.color-group-color-name {
    display: block;
    margin-top: 8px;
}

.color-group-color-hex {
    color: #a5a5a5;
    margin-bottom: 10px;
}

/* ================================ ADD NEW COLORS HERE ================================ */
.color-group-color-warema-red {
    background-color: #d4001a;
}

.color-group-color-warema-red-2 {
    background-color: #bc0017;
}

.color-group-color-warema-grey-01 {
    background-color: #1e1e1e;
}

.color-group-color-warema-grey-02 {
    background-color: #414141;
}

.color-group-color-warema-grey-03 {
    background-color: #5d5d5d;
}

.color-group-color-warema-grey-04 {
    background-color: #888;
}

.color-group-color-warema-grey-05 {
    background-color: #a5a5a5;
}

.color-group-color-warema-grey-06 {
    background-color: #c3c3c3;
}

.color-group-color-warema-grey-07 {
    background-color: #d7d7d7;
}

.color-group-color-warema-grey-08 {
    background-color: #ebebeb;
}

.color-group-color-warema-grey-09 {
    background-color: #f5f5f5;
}

.color-group-color-warema-grey-10 {
    background-color: #fafafa;
}

.color-group-color-white {
    background-color: #fff;
    /* Add a border to offset the white color from the white background */
    border: 1px solid #ebebeb;
}

.color-group-color-black {
    background-color: #000;
}

.color-group-color-prime-platin {
    background-color: #8b8d8e;
}

.color-group-color-prime-platin-light {
    background-color: #aeafb0;
}

.color-group-color-prime-gold {
    background-color: #988642;
}

.color-group-color-prime-gold-light {
    background-color: #b7aa7b;
}

.color-group-color-warema-purple-01 {
    background-color: #7c3ba8;
}

.color-group-color-warema-purple-02 {
    background-color: #c6a4db;
}

.color-group-color-warema-purple-03 {
    background-color: #eee3f4;
}

.color-group-color-warema-blue-01 {
    background-color: #3489cb;
}

.color-group-color-warema-blue-02 {
    background-color: #a1cced;
}

.color-group-color-warema-blue-03 {
    background-color: #e3f0fa;
}

.color-group-color-warema-dark-blue-01 {
    background-color: #53419c;
}

.color-group-color-warema-dark-blue-02 {
    background-color: #a7a7eb;
}

.color-group-color-warema-dark-blue-03 {
    background-color: #e4e4f9;
}

.color-group-color-warema-green-01 {
    background-color: #06944e;
}

.color-group-color-warema-dark-green-01 {
    background-color: #025951;
}

.color-group-color-warema-green-02 {
    background-color: #8ed4a7;
}

.color-group-color-warema-dark-green-02 {
    background-color: #74b0a4;
}

.color-group-color-warema-yellow-01 {
    background-color: #f6c845;
}

.color-group-color-warema-yellow-02 {
    background-color: #fae9a0;
}

.color-group-color-warema-orange-01 {
    background-color: #f98f25;
}

.color-group-color-warema-orange-02 {
    background-color: #ffc787;
}

.color-group-color-warema-orange-03 {
    background-color: #ffeedb;
}

.color-group-color-warema-turquoise-01 {
    background-color: #2db3a3;
}

.color-group-color-warema-turquoise-02 {
    background-color: #9de0d9;
}

.color-group-color-warema-turquoise-03 {
    background-color: #e1f6f4;
}

.color-group-color-warema-brown-01 {
    background-color: #a13710;
}

.color-group-color-warema-brown-02 {
    background-color: #e09d84;
}

.color-group-color-warema-brown-03 {
    background-color: #f6e1da;
}

.color-group-color-warema-dark-green-03 {
    background-color: #d5e7e3;
}

.color-group-color-warema-green-03 {
    background-color: #ddf2e4;
}

.color-group-color-warema-yellow-03 {
    background-color: #fef8e2;
}

.color-group-color-prime-gold-gradient {
    background-image: linear-gradient(90deg, #988642, #b7aa7b);
}

.color-group-color-prime-platin-gradient {
    background-image: linear-gradient(90deg, #8b8d8e, #aeafb0);
}

.color-group-color-warema-red-hover-01 {
    background-color: #ba0016;
}

.color-group-color-warema-red-hover-02 {
    background-color: #810011;
}

/**
 * Unfortunately, pseudo-elements on the slotted element in the shadow DOM do not work.
 * https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668
*/
:root {
    --warema-side-menu-width: 200px;
}

:root {
    --warema-ui-font: 'nimbus-sans', 'Helvetica Neue', 'Arial', sans-serif;
}

.release-notes {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
}
.release-notes h2 {
    font-weight: 300;
    font-size: 26px;
    line-height: 35px;
    color: #d4001a;
}
@media (min-width: 768px) {
    .release-notes h2 {
        font-size: 28px;
        line-height: 38px;
    }
}
@media (min-width: 1366px) {
    .release-notes h2 {
        font-size: 30px;
        line-height: 41px;
    }
}
.release-notes h3 {
    font-weight: 300;
    font-size: 22px;
    line-height: 32px;
    color: #a5a5a5;
    border-bottom: 1px solid #a5a5a5;
    padding: 0 0 5px;
}
@media (min-width: 768px) {
    .release-notes h3 {
        font-size: 23px;
        line-height: 34px;
    }
}
@media (min-width: 1366px) {
    .release-notes h3 {
        font-size: 25px;
        line-height: 36px;
    }
}
.release-notes .release {
    padding: 0 20px;
}

/*
 * ~CI FONTS~
 */
.ci-fonts > * {
    margin-top: 4rem;
}
.ci-fonts > *:first-child {
    margin-top: 0;
}
.ci-fonts > * > * {
    margin-top: 2rem;
}
.ci-fonts > * > *:first-child {
    margin-top: 0;
}
.ci-fonts > .headlines > .fontsize-5xl {
    font-weight: 300;
    font-size: 56px;
    line-height: 65px;
    letter-spacing: -0.22px;
}
@media (min-width: 768px) {
    .ci-fonts > .headlines > .fontsize-5xl {
        font-size: 60px;
        line-height: 71px;
        letter-spacing: -0.24px;
    }
}
@media (min-width: 1366px) {
    .ci-fonts > .headlines > .fontsize-5xl {
        font-size: 63px;
        line-height: 76px;
        letter-spacing: -0.38px;
    }
}
.ci-fonts > .headlines > .fontsize-4xl {
    font-weight: 300;
    font-size: 40px;
    line-height: 50px;
    letter-spacing: -0.12px;
}
@media (min-width: 768px) {
    .ci-fonts > .headlines > .fontsize-4xl {
        font-size: 42px;
        line-height: 53px;
        letter-spacing: -0.08px;
    }
}
@media (min-width: 1366px) {
    .ci-fonts > .headlines > .fontsize-4xl {
        font-size: 45px;
        line-height: 56px;
        letter-spacing: -0.14px;
    }
}
.ci-fonts > .headlines > .fontsize-3xl {
    font-weight: 300;
    font-size: 32px;
    line-height: 40px;
}
@media (min-width: 768px) {
    .ci-fonts > .headlines > .fontsize-3xl {
        font-size: 34px;
        line-height: 43px;
    }
}
@media (min-width: 1366px) {
    .ci-fonts > .headlines > .fontsize-3xl {
        font-size: 36px;
        line-height: 45px;
    }
}
.ci-fonts > .headlines > .fontsize-2xl {
    font-weight: 300;
    font-size: 26px;
    line-height: 35px;
}
@media (min-width: 768px) {
    .ci-fonts > .headlines > .fontsize-2xl {
        font-size: 28px;
        line-height: 38px;
    }
}
@media (min-width: 1366px) {
    .ci-fonts > .headlines > .fontsize-2xl {
        font-size: 30px;
        line-height: 41px;
    }
}
.ci-fonts > .headlines > .fontsize-xl {
    font-weight: 300;
    font-size: 22px;
    line-height: 32px;
}
@media (min-width: 768px) {
    .ci-fonts > .headlines > .fontsize-xl {
        font-size: 23px;
        line-height: 34px;
    }
}
@media (min-width: 1366px) {
    .ci-fonts > .headlines > .fontsize-xl {
        font-size: 25px;
        line-height: 36px;
    }
}
.ci-fonts > .headlines > .fontsize-l {
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0.05;
}
@media (min-width: 768px) {
    .ci-fonts > .headlines > .fontsize-l {
        font-size: 19px;
        line-height: 27px;
    }
}
@media (min-width: 1366px) {
    .ci-fonts > .headlines > .fontsize-l {
        font-size: 20px;
        line-height: 29px;
    }
}
.ci-fonts > .headlines > .fontsize-m {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0.05px;
}
@media (min-width: 768px) {
    .ci-fonts > .headlines > .fontsize-m {
        font-size: 17px;
        line-height: 25px;
        letter-spacing: 0.05px;
    }
}
@media (min-width: 1366px) {
    .ci-fonts > .headlines > .fontsize-m {
        font-size: 18px;
        line-height: 26px;
        letter-spacing: 0.05px;
    }
}
.ci-fonts > .headlines > .fontsize-s {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.04px;
}
@media (min-width: 768px) {
    .ci-fonts > .headlines > .fontsize-s {
        font-size: 15px;
        line-height: 22px;
        letter-spacing: 0.05px;
    }
}
@media (min-width: 1366px) {
    .ci-fonts > .headlines > .fontsize-s {
        font-size: 16px;
        line-height: 23px;
        letter-spacing: 0.1px;
    }
}
.ci-fonts > .headlines > .fontsize-xs {
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0.07px;
}
@media (min-width: 768px) {
    .ci-fonts > .headlines > .fontsize-xs {
        font-size: 13px;
        line-height: 17px;
        letter-spacing: 0.08px;
    }
}
@media (min-width: 1366px) {
    .ci-fonts > .headlines > .fontsize-xs {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.08px;
    }
}
.ci-fonts > .headlines > .fontsize-2xs {
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.06px;
}
@media (min-width: 768px) {
    .ci-fonts > .headlines > .fontsize-2xs {
        font-size: 10px;
        line-height: 14px;
        letter-spacing: 0.06px;
    }
}
@media (min-width: 1366px) {
    .ci-fonts > .headlines > .fontsize-2xs {
        font-size: 10px;
        line-height: 14px;
        letter-spacing: 0.06px;
    }
}

.icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 50px 30px;
    padding: 30px;
    margin: 0;
    list-style: none;
}

.icons-icon-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    margin-bottom: 15px;
    font-size: 60px;
    background: #f5f5f5;
    color: #000;
}
.icons-icon-preview i::before {
    display: block;
}

.icons-icon-label {
    color: #000;
}

/*# sourceMappingURL=patternlab-specific.css.map */