.Spacings-spacing,
.Grid {
    --spacing-grid: 10px;
    --spacing-xxs: 15px;
    --spacing-xs: 20px;
    --spacing-sm: 20px;
    --spacing-md: 40px;
    --spacing-l: 50px;
}
@media screen and (min-width: 640px) {
    .Spacings-spacing,
    .Grid {
        --spacing-grid: 20px;
        --spacing-xxs: 15px;
        --spacing-xs: 20px;
        --spacing-sm: 20px;
        --spacing-md: 40px;
        --spacing-l: 50px;
    }
}
@media screen and (min-width: 768px) {
    .Spacings-spacing,
    .Grid {
        --spacing-grid: 20px;
        --spacing-xxs: 20px;
        --spacing-xs: 30px;
        --spacing-sm: 30px;
        --spacing-md: 50px;
        --spacing-l: 60px;
    }
}
@media screen and (min-width: 1024px) {
    .Spacings-spacing,
    .Grid {
        --spacing-grid: 40px;
        --spacing-xxs: 20px;
        --spacing-xs: 30px;
        --spacing-sm: 30px;
        --spacing-md: 50px;
        --spacing-l: 60px;
    }
}
@media screen and (min-width: 1366px) {
    .Spacings-spacing,
    .Grid {
        --spacing-grid: 40px;
        --spacing-xxs: 20px;
        --spacing-xs: 30px;
        --spacing-sm: 40px;
        --spacing-md: 50px;
        --spacing-l: 60px;
    }
}

: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: #888888;
}

.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: #ffffff;
    /* Add a border to offset the white color from the white background */
    border: 1px solid #ebebeb;
}

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

.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-blue-01 {
    background-color: #3489cb;
}

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

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

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

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

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

.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-brown-01 {
    background-color: #a13710;
}

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

.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);
}

.Spacings-spacing,
.Grid {
    --spacing-grid: 10px;
    --spacing-xxs: 15px;
    --spacing-xs: 20px;
    --spacing-sm: 20px;
    --spacing-md: 40px;
    --spacing-l: 50px;
}
@media screen and (min-width: 640px) {
    .Spacings-spacing,
    .Grid {
        --spacing-grid: 20px;
        --spacing-xxs: 15px;
        --spacing-xs: 20px;
        --spacing-sm: 20px;
        --spacing-md: 40px;
        --spacing-l: 50px;
    }
}
@media screen and (min-width: 768px) {
    .Spacings-spacing,
    .Grid {
        --spacing-grid: 20px;
        --spacing-xxs: 20px;
        --spacing-xs: 30px;
        --spacing-sm: 30px;
        --spacing-md: 50px;
        --spacing-l: 60px;
    }
}
@media screen and (min-width: 1024px) {
    .Spacings-spacing,
    .Grid {
        --spacing-grid: 40px;
        --spacing-xxs: 20px;
        --spacing-xs: 30px;
        --spacing-sm: 30px;
        --spacing-md: 50px;
        --spacing-l: 60px;
    }
}
@media screen and (min-width: 1366px) {
    .Spacings-spacing,
    .Grid {
        --spacing-grid: 40px;
        --spacing-xxs: 20px;
        --spacing-xs: 30px;
        --spacing-sm: 40px;
        --spacing-md: 50px;
        --spacing-l: 60px;
    }
}

: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 0;
}
@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: #000000;
}
.icons-icon-preview i::before {
    display: block;
}

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

.Grid {
    --layout-content-maxWidth: 1339px;
    --layout-content-padding: 15px;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--layout-content-maxWidth) + 2 * var(--layout-content-padding));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--layout-content-padding);
    padding-right: var(--layout-content-padding);
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--spacing-grid);
    row-gap: var(--spacing-grid);
    background-color: #e7fee6;
}
@media screen and (min-width: 640px) {
    .Grid {
        --layout-content-padding: 24px;
    }
}
@media screen and (min-width: 768px) {
    .Grid {
        --layout-content-padding: 22px;
    }
}
@media screen and (min-width: 1024px) {
    .Grid {
        --layout-content-padding: 52px;
    }
}
@media screen and (min-width: 1366px) {
    .Grid {
        --layout-content-padding: 103px;
    }
}

.Grid-column {
    grid-column-end: span 1;
    grid-column-start: auto;
    height: 100vh;
    background-color: #fac3f0;
}

.Spacings {
    --layout-content-maxWidth: 1339px;
    --layout-content-padding: 15px;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--layout-content-maxWidth) + 2 * var(--layout-content-padding));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--layout-content-padding);
    padding-right: var(--layout-content-padding);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
@media screen and (min-width: 640px) {
    .Spacings {
        --layout-content-padding: 24px;
    }
}
@media screen and (min-width: 768px) {
    .Spacings {
        --layout-content-padding: 22px;
    }
}
@media screen and (min-width: 1024px) {
    .Spacings {
        --layout-content-padding: 52px;
    }
}
@media screen and (min-width: 1366px) {
    .Spacings {
        --layout-content-padding: 103px;
    }
}

.Spacings-item {
    position: relative;
    flex: 1;
    margin: 15px;
}

.Spacings-label {
    position: absolute;
    top: -1.2em;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 700;
}

.Spacings-spacing {
    background-color: #fac3f0;
}

.Spacings-spacing--xxs {
    height: var(--spacing-xxs);
}

.Spacings-spacing--xs {
    height: var(--spacing-xs);
}

.Spacings-spacing--sm {
    height: var(--spacing-sm);
}

.Spacings-spacing--md {
    height: var(--spacing-md);
}

.Spacings-spacing--l {
    height: var(--spacing-l);
}

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