@font-face {
    font-family: Poppins;
    src: url("/static/fonts/Poppins-roman-VF.4098f3631008.otf") format('opentype');
    font-style: normal;
}

* {
    font-family: 'Poppins', sans-serif;
}

/* START Width */
.w_100 {
    width: 100%;
}

.w_0 {
    width: 0px;
}
/* END Width */

/* START Grid */
.grid { display: grid; gap: 1rem; }

/* Flex */
.flex_auto { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; }
.flex_nowrap { flex-wrap: nowrap; }

/* Gaps */
.gap_0 { gap: 0; }
.gap_xs { gap: 0.25rem; }
.gap_sm { gap: 0.5rem; }
.gap_md { gap: 1rem; }
.gap_lg { gap: 1.5rem; }
.gap_xl { gap: 2rem; }
.gap_2xl { gap: 3rem; }

/* Columns */
.grid_cols_1 { grid-template-columns: repeat(1, 1fr); }
.grid_cols_2 { grid-template-columns: repeat(2, 1fr); }
.grid_cols_3 { grid-template-columns: repeat(3, 1fr); }
.grid_cols_4 { grid-template-columns: repeat(4, 1fr); }
.grid_cols_5 { grid-template-columns: repeat(5, 1fr); }
.grid_cols_2_3 { grid-template-columns: 2fr 3fr; }
.grid_cols_6 { grid-template-columns: repeat(6, 1fr); }
.grid_cols_7 { grid-template-columns: repeat(7, 1fr); }
.grid_cols_8 { grid-template-columns: repeat(8, 1fr); }
.grid_cols_9 { grid-template-columns: repeat(9, 1fr); }
.grid_cols_10 { grid-template-columns: repeat(10, 1fr); }
.grid_cols_11 { grid-template-columns: repeat(11, 1fr); }
.grid_cols_12 { grid-template-columns: repeat(12, 1fr); }

/* Column span */
.col_span_1 { grid-column: span 1; }
.col_span_2 { grid-column: span 2; }
.col_span_3 { grid-column: span 3; }
.col_span_4 { grid-column: span 4; }
.col_span_5 { grid-column: span 5; }
.col_span_6 { grid-column: span 6; }
.col_span_7 { grid-column: span 7; }
.col_span_8 { grid-column: span 8; }
.col_span_9 { grid-column: span 9; }
.col_span_10 { grid-column: span 10; }
.col_span_11 { grid-column: span 11; }
.col_span_12 { grid-column: span 12; }
.col_span_full { grid-column: 1 / -1; }

/* Fill */
.grid_fill_250 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* Alignment items - Horizontally */
.justify_items_start { justify-items: start; }
.justify_items_end { justify-items: end; }
.justify_items_center { justify-items: center; }
.justify_items_stretch { justify-items: stretch; }

/* Alignment items - Vertically */
.align_items_start { align-items: start;}
.align_items_end { align-items: end; }
.align_items_center { align-items: center; }
.align_items_stretch { align-items: stretch; }
.align_items_baseline { align-items: baseline; }

/* Alignment items - Place items (short form for justify-items + align-items) */
.place_items_start { place-items: start; }
.place_items_end { place-items: end; }
.place_items_center { place-items: center; }
.place_items_stretch { place-items: stretch; }

/* Justify content - Horizontally */
.justify_content_start { justify-content: start; }
.justify_content_end { justify-content: end; }
.justify_content_center { justify-content: center; }
.justify_content_between { justify-content: space-between; }
.justify_content_around { justify-content: space-around; }
.justify_content_evenly { justify-content: space-evenly; }
/* END Grid */

/* START Progress */
.progress {
    display: flex;
    overflow: hidden;
    background-color: var(--progress-bg);
    border-radius: 4px;
    height: var(--height, 32px);
    font-size: var(--font-size, 20px);
    font-weight: 700;
    width: var(--width, 100%);

    &.progress_small {
        height: var(--height, 20px);
        font-size: var(--font-size, 11px);
        font-weight: 700;
    }

    &.progress_smaller {
        height: var(--height, 8px);
        font-size: var(--font-size, 8px);
        font-weight: 700;
    }

    &.progress_tiny {
        height: var(--height, 4px);
        font-size: 0;
        font-weight: 700;
    }
}

.progress_bar {
    display: block;
    align-content: center;
    color: var(--text-color, var(--primary-contrast-color));
    text-align: center;
    white-space: nowrap;
    background-color: var(--bg, var(--primary-color));
    transition: width 0.6s ease;
    border-radius: 4px;
    padding: 0;
    text-shadow:
        0 0 3px rgba(0, 0, 0, 0.6),
        0 0 8px rgba(0, 0, 0, 0.3);

    &.progress_bar_success {
        color: var(--text-color, var(--success-contrast-color));
        background-color: var(--bg, var(--success-color));
    }

    &:before,
    &:after {
        content: "";
        display: inline;
        padding: 0 2.5px;
    }
}
/* END Progress */

/* START Collapsible */
.sub_row_collapsible_details {
    display: none;
}

.sub_row_collapsible_details ul {
    list-style: none;
    padding-left: 0;
}

.title_row_collapsible {
    background-image: none !important;
    border: none !important;
    cursor: pointer;

    &.opened td {
        font-weight: 700;

        .action_menu_dropdown {
            font-weight: 400;
        }
    }
}

.dashed_border tbody .title_row_collapsible ~ .title_row_collapsible > td {
    padding-top: 6px;
}

.dashed_border tbody .title_row_collapsible:has(~ .title_row_collapsible) > td {
    padding-bottom: 6px;
}

.sub_row_collapsible {
    &:not(.opened) {
        td {
            padding-top: 1px;
            padding-bottom: 0;
            border: none;
            background: none;
            transition: padding .2s ease;
        }
    }
}

.sub_row_collapsible_icon {
    transition: transform .3s ease;
    vertical-align: middle;
    flex-shrink: 0;
}

.sub_row_collapsible_icon.rotate,
.opened > * .sub_row_collapsible_icon,
.opened > .sub_row_collapsible_icon {
    transform: rotate(180deg);
}
/* END Collapsible */

.small_number {
    width: 80px;
}

.large_number {
    width: 120px;
}

/* Where a material came from, under the name it came for. Here rather than in one
   of the two index.css files because the row is drawn by OfferAndInsight, which both
   the customer's offer and the internal page use.

   Its own line, not a margin: there is not always an article number between the name
   and this, and an inline span ran straight into the name -- a material called "asd"
   read as "asdVal: asdasd". */
.material_provenance {
    display: block;
    color: var(--muted-color);
}

/* One customer choice, over the articles that answer it. Quiet, because it is a
   heading for rows rather than a row of its own -- the space above it is what tells
   the group apart from whatever the work spec listed before it.

   Space rather than a rule: these tables already carry row separators, of two
   different kinds on the two sides, and a third line in a third colour is noise.
   No shared border token exists here either, and the customer's stylesheet has no
   color-mix in it to make one from. */
.material_choice_heading > td {
    padding-top: 12px;
    color: var(--muted-color);
    font-size: 92%;
}

/* Except at the top of a table, where there is nothing to be told apart from. */
tbody > .material_choice_heading:first-child > td {
    padding-top: 0;
}