/**
 * This file is not intended to be used in production
 * The CSS generated here is used to demonstrate examples only
 */
.primer-typography {
    padding-bottom: 16rem;
}

.primer-typography table, .primer-table table {
    margin-bottom: 1rem;
}

.primer-typography td, .primer-typography th, .primer-table td, .primer-table th {
    padding: 15px;

    border: 1px solid #dee2e6;
}

.primer-typography h2 {
    margin-top: 4rem;

    font-weight: 400;
    font-size: 32px;
}

.primer-typography h3 {
    margin-top: 4rem;

    font-weight: 400;
    font-size: 28px;
}

.primer-grid-col {
    background-color: #d8eBff;
    border: 1px solid #add3ff;
    padding: 1.33em;
}

.primer-grid-col .primer-grid-col {
    background-color: #C4DDF8;
    border: 1px solid #add3ff;
    padding: 1.33em;
}

.primer-grid-row {
    margin-right: -1.33em;
    margin-left: -1.33em;
}

.primer-grid-col > *:first-child {
    margin-top: 0;
}

.primer-grid-col > *:last-child {
    margin-bottom: 0;
}

.primer-font-weight-normal {
    font-weight: 400 !important;
}

/**
* Code Demo
*/
.primer-code-demo {
    overflow: hidden;
}

.primer-code-demo__preview {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    padding: 16px;

    
    border-top: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
    border-radius: 8px;
}

.primer-bg-yellow {
    color: rgb(74, 85, 104);

    background-color: #FEFDBC;
}

.primer-bg-grey {
    background-color: rgb(237, 242, 247);
}

.primer-bg-grey-dark {
    background-color: rgb(203, 213, 224);
}

.primer-code-demo__class {
    margin-bottom: 4px;

    color: rgb(113, 128, 150);
    font-size: 14px;
    text-align: center;
}

.primer-code-demo--margin .primer-bg-grey-dark {
    display: flex;
}

.primer-code-demo--space-between-x .primer-bg-grey {
    display: flex;
    width: 100%;
}

.primer-code-demo--space-between-y .primer-bg-grey {
    width: 100%;

    text-align: center;
}

.primer-class-table {
    max-height: 480px;
    overflow-y: auto;

    border-bottom: 1px solid #e2e8f0;
}

.primer-class-table table {
    width: 100%;
}

.primer-class-table table th, .primer-class-table table td {
    padding: 8px;
}

.primer-class-table table th {
    font-size: 14px;
    font-weight: 500;

    background-color: rgb(247, 250, 252);
}

.primer-class-table table td {
    font-size: 12px;
}

.primer-class-table td code span {
    opacity: 0.35;
}

.primer-layouts > .eib-section + .eib-section {
    padding-top: 3.333em;

    border-top: 1px solid rgb(203, 213, 224);
}