/*
We declare all variables here as default so that they are easy to override...
*/
/* Border, shadows, ... */
/*
Variables that begin with $var- should NEVER be used directly in CSS rules.
they should only be included via the "@include var(property, var-name)"
mechanism.
*/
/* Border styles */
/* Cookie notice positioning */
/* Text colors */
/* Font Families */
/* White */
/* Differently shaded colors */
/*
Use @include var(property, varname) to include a variable, e.g.

    @include var(background-color, white1);

to create a white background.
*/
/* Spacing */
/* Breakpoints */
.klaro {
    --button-text-color: #fff;
}

.klaro .cookie-modal h1,
.klaro .context-notice h1,
.klaro .cookie-notice h1 {
    font-size: 2em;
}

.klaro .cookie-modal h2,
.klaro .context-notice h2,
.klaro .cookie-notice h2 {
    font-size: 1.5em;
}

.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
    padding: 0.4em 0.8em;
}

.klaro .cookie-modal .cm-btn:last-child,
.klaro .context-notice .cm-btn:last-child,
.klaro .cookie-notice .cm-btn:last-child {
    margin-right: 0;
}

.klaro .cookie-modal .cm-modal .cm-body .cm-list-description p,
.klaro .cookie-modal .cm-modal .cm-body .cm-list-description strong,
.klaro .cookie-modal .cm-modal .cm-body .cm-list-description h1,
.klaro .cookie-modal .cm-modal .cm-body .cm-list-description h2,
.klaro .cookie-modal .cm-modal .cm-body .cm-list-description ul,
.klaro .cookie-modal .cm-modal .cm-body .cm-list-description li,
.klaro .cookie-modal .cm-modal .cm-body .cm-list-description .table {
    color: #bbb;
    color: var(--dark3, #bbb);
}

.klaro .cookie-modal .cm-modal .cm-body .cm-list-description .table {
    display: table;
    width: 100%;
    border-style: solid;
    border-style: var(--border-style, solid);
    border-color: #bbb;
    border-color: var(--dark3, #bbb);
    border-width: 1px;
    border-width: var(--border-width, 1px);
}

.klaro .cookie-modal .cm-modal .cm-body .cm-list-description .table > .tr {
    display: table-row;
}

.klaro .cookie-modal .cm-modal .cm-body .cm-list-description .table > .tr > .th {
    white-space: nowrap;
    font-weight: bold;
}

.klaro .cookie-modal .cm-modal .cm-body .cm-list-description .table > .tr > .th,
.klaro .cookie-modal .cm-modal .cm-body .cm-list-description .table > .tr > .td {
    padding: 0.25rem 0.5rem;
    display: table-cell;
    border-bottom-style: solid;
    border-bottom-style: var(--border-style, solid);
    border-bottom-color: #bbb;
    border-bottom-color: var(--dark3, #bbb);
    border-bottom-width: 1px;
    border-bottom-width: var(--border-width, 1px);
    border-left-style: solid;
    border-left-style: var(--border-style, solid);
    border-left-color: #bbb;
    border-left-color: var(--dark3, #bbb);
    border-left-width: 1px;
    border-left-width: var(--border-width, 1px);
}

.klaro .cookie-modal .cm-modal .cm-body .cm-list-description .table > .tr:last-child > .th,
.klaro .cookie-modal .cm-modal .cm-body .cm-list-description .table > .tr:last-child > .td {
    border-bottom: none;
}

.klaro .cookie-modal .cm-modal .cm-body .cm-list-description .table > .tr > .th:first-child,
.klaro .cookie-modal .cm-modal .cm-body .cm-list-description .table > .tr > .td:first-child {
    border-left: none;
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by.d-flex {
    display: flex;
    justify-content: space-between;
}

.klaro .cookie-modal .cm-modal .cm-footer > span:last-child {
    display: block;
    font-size: 0.8em;
    padding-top: 4px;
    text-align: right;
    padding-right: 8px;
    color: #888;
    color: var(--dark2, #888);
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
    font-size: inherit;
    padding-top: 0;
    padding-right: 0;
}