:root {
    --font-awesome-arrow-right: '\f105';
}

/*
    Extension of Bootstrap grid system
*/

.col-0 {
    display: none;
}


@media (min-width: 992px) {
    .col-lg-4 {
        display: block;
    }
}

/**
    Fix browser autofill background being blue
 */
input:-webkit-autofill, input:focus:-webkit-autofill:-webkit-autofill {
    box-shadow: inset 0 0 0 40px white !important;
    -webkit-text-fill-color: black;
}

/**
    Styling for password show/hide toggle
 */

.field-unit > .field-unit--password {
    position: absolute;
    top: 26px;
    right: 0;
    cursor: pointer;
    min-width: 45px;
    text-align: center;
    line-height: calc(0.66 * var(--spacing) * var(--spn) / var(--spn) + var(--base-height));
    opacity: 0.7;
}

.field-unit > .field-unit--password:hover {
    opacity: 1;
}

.field-unit {
    position: relative;
}

input[type="password"][disabled] ~ .field-unit--password {
    pointer-events: none;
}

/**
    Hide MS Edge default password toggle
 */
::-ms-reveal {
    display: none;
}

/**
    Disclaimer popover
 */
.popover__wrapper {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.popover__wrapper[active=true] {
    display: flex;
}

.disclaimer {
    display: block;
    position: static;
    width: 90% !important;
    max-width: 1280px;
}

.popover__checkbox {
    margin-bottom: 0;
}

#popover__checkbox {
    margin-right: 10px;
}

.popover__header, .popover__content, .popover__footer {
    padding: var(--spacing) calc(2*var(--spacing)) !important;
}


@media only screen and (min-width: 576px) {
    .disclaimer {
        width: 85% !important;
    }
}

@media only screen and (min-width: 993px) {
    .disclaimer {
        width: 70% !important;
    }
}

@media only screen and (max-width: 768px) {
    .field-unit{
        flex-flow: row wrap;
    }
}

/**
    Semantic variations
    Available since Fondue UI commit: 33131b8b69b7bf628ff1f60080d36bb2ef0f5ad8
*/
.button:is([role=primary], .button--primary) {
    background-color: var(--color-palette-theme);
    color: var(--color-palette-theme-contrast);
}

.button:is([role=primary], .button--primary):hover,
.button:is([role=primary], .button--primary):focus,
.button:is([role=primary], .button--primary):focus-visible {
    background-color: var(--color-palette-theme-blush);
}

.button:is([role=primary], .button--primary):is([disabled], .disabled) {
    background-color: var(--color-palette-theme);
    color: var(--color-palette-theme-contrast);
}

.button:is([role=primary], .button--primary):is([disabled], .disabled):hover,
.button:is([role=primary], .button--primary):is([disabled], .disabled):focus,
.button:is([role=primary], .button--primary):is([disabled], .disabled):focus-visible {
    background-color: var(--color-palette-theme);
    color: var(--color-palette-theme-contrast);
}

.button:is([role=destructive], .button--destructive) {
    color: var(--color-semantic-destructive);
}

.button:is([role=destructive], .button--destructive):hover,
.button:is([role=destructive], .button--destructive):focus,
.button:is([role=destructive], .button--destructive):focus-visible {
    background-color: var(--color-semantic-destructive-blush);
    color: var(--color-semantic-destructive-contrast);
}

.button:is([role=destructive], .button--destructive):is([disabled], .disabled) {
    background-color: var(--color-tint);
    color: var(--color-semantic-destructive);
}

.button:is([role=destructive], .button--destructive):is([disabled], .disabled):hover,
.button:is([role=destructive], .button--destructive):is([disabled], .disabled):focus,
.button:is([role=destructive], .button--destructive):is([disabled], .disabled):focus-visible {
    background-color: var(--color-tint);
    color: var(--color-semantic-destructive);
}

/**
    Ghost and Naked Buttons
    Available since Fondue UI commit: 33131b8b69b7bf628ff1f60080d36bb2ef0f5ad8
*/

.button__label, .button .icon {
    position: relative;
}

.button:is([family=ghost], .button--ghost) {
    background-color: transparent;
    color: var(--color-contrast);
    box-shadow: inset 0 0 0 calc(0.125 * var(--spacing) * var(--spn) / var(--spn)) var(--color-contrast);
}

.button:is([family=ghost], .button--ghost):hover,
.button:is([family=ghost], .button--ghost):focus,
.button:is([family=ghost], .button--ghost):focus-visible {
    background-color: transparent;
    color: var(--color-palette-theme);
    box-shadow: inset 0 0 0 calc(0.125 * var(--spacing) * var(--spn) / var(--spn)) var(--color-palette-theme);
}

.button:is([family=ghost], .button--ghost):is([disabled], .disabled) {
    color: var(--color-contrast);
    box-shadow: inset 0 0 0 calc(0.125 * var(--spacing) * var(--spn) / var(--spn)) var(--color-contrast);
}

.button:is([family=ghost], .button--ghost):is([disabled], .disabled):hover,
.button:is([family=ghost], .button--ghost):is([disabled], .disabled):focus,
.button:is([family=ghost], .button--ghost):is([disabled], .disabled):focus-visible {
    color: var(--color-contrast);
    box-shadow: inset 0 0 0 calc(0.125 * var(--spacing) * var(--spn) / var(--spn)) var(--color-contrast);
}

.button:is([family=ghost], .button--ghost):is([role=primary], .button--primary) {
    color: var(--color-palette-theme);
    box-shadow: inset 0 0 0 calc(0.125 * var(--spacing) * var(--spn) / var(--spn)) var(--color-palette-theme);
}

.button:is([family=ghost], .button--ghost):is([role=primary], .button--primary):hover,
.button:is([family=ghost], .button--ghost):is([role=primary], .button--primary):focus,
.button:is([family=ghost], .button--ghost):is([role=primary], .button--primary):focus-visible {
    background-color: var(--color-palette-theme);
    color: var(--color-palette-theme-contrast);
}

.button:is([family=ghost], .button--ghost):is([role=primary], .button--primary):is([disabled], .disabled) {
    background: transparent;
    color: var(--color-palette-theme);
    box-shadow: inset 0 0 0 calc(0.125 * var(--spacing) * var(--spn) / var(--spn)) var(--color-palette-theme);
}

.button:is([family=ghost], .button--ghost):is([role=primary], .button--primary):is([disabled], .disabled):hover,
.button:is([family=ghost], .button--ghost):is([role=primary], .button--primary):is([disabled], .disabled):focus,
.button:is([family=ghost], .button--ghost):is([role=primary], .button--primary):is([disabled], .disabled):focus-visible {
    background: transparent;
    color: var(--color-palette-theme);
    box-shadow: inset 0 0 0 calc(0.125 * var(--spacing) * var(--spn) / var(--spn)) var(--color-palette-theme);
}

.button:is([family=ghost], .button--ghost):is([role=destructive], .button--destructive) {
    color: var(--color-semantic-destructive);
    box-shadow: inset 0 0 0 calc(0.125 * var(--spacing) * var(--spn) / var(--spn)) var(--color-semantic-destructive);
}

.button:is([family=ghost], .button--ghost):is([role=destructive], .button--destructive):hover,
.button:is([family=ghost], .button--ghost):is([role=destructive], .button--destructive):focus,
.button:is([family=ghost], .button--ghost):is([role=destructive], .button--destructive):focus-visible {
    background-color: var(--color-semantic-destructive);
    color: var(--color-semantic-destructive-contrast);
}

.button:is([family=ghost], .button--ghost):is([role=destructive], .button--destructive):is([disabled], .disabled) {
    background-color: transparent;
    color: var(--color-semantic-destructive);
    box-shadow: inset 0 0 0 calc(0.125 * var(--spacing) * var(--spn) / var(--spn)) var(--color-semantic-destructive);
}

.button:is([family=ghost], .button--ghost):is([role=destructive], .button--destructive):is([disabled], .disabled):hover,
.button:is([family=ghost], .button--ghost):is([role=destructive], .button--destructive):is([disabled], .disabled):focus,
.button:is([family=ghost], .button--ghost):is([role=destructive], .button--destructive):is([disabled], .disabled):focus-visible {
    background-color: transparent;
    color: var(--color-semantic-destructive);
    box-shadow: inset 0 0 0 calc(0.125 * var(--spacing) * var(--spn) / var(--spn)) var(--color-semantic-destructive);
}

.button:is([family=naked], .button--naked) {
    background-color: transparent;
    color: var(--color-contrast);
    box-shadow: none;
}

.button:is([family=naked], .button--naked) .button__label::after {
    content: "";
    display: block;
    position: absolute;
    height: calc(0.0625 * var(--spacing) * var(--spn) / var(--spn));
    width: 100%;
    margin-top: calc(0.125 * var(--spacing) * var(--spn) / var(--spn));
    background-color: transparent;
    transition: background-color var(--animation-duration) var(--animation-timing-function);
}

.button:is([family=naked], .button--naked):hover,
.button:is([family=naked], .button--naked):focus,
.button:is([family=naked], .button--naked):focus-visible {
    background-color: transparent;
    color: var(--color-soft);
}

.button:is([family=naked], .button--naked):hover .button__label::after,
.button:is([family=naked], .button--naked):focus .button__label::after,
.button:is([family=naked], .button--naked):focus-visible .button__label::after {
    background-color: var(--color-soft);
}

.button:is([family=naked], .button--naked):is([disabled], .disabled) {
    background-color: transparent;
    color: var(--color-contrast);
    box-shadow: none;
}

.button:is([family=naked], .button--naked):is([disabled], .disabled) .button__label::after {
    background-color: transparent;
}

.button:is([family=naked], .button--naked):is([disabled], .disabled):hover,
.button:is([family=naked], .button--naked):is([disabled], .disabled):focus,
.button:is([family=naked], .button--naked):is([disabled], .disabled):focus-visible {
    background-color: transparent;
    color: var(--color-contrast);
    box-shadow: none;
}

.button:is([family=naked], .button--naked):is([disabled], .disabled):hover .button__label::after,
.button:is([family=naked], .button--naked):is([disabled], .disabled):focus .button__label::after,
.button:is([family=naked], .button--naked):is([disabled], .disabled):focus-visible .button__label::after {
    background-color: transparent;
}

.button:is([family=naked], .button--naked):is([role=primary], .button--primary) {
    color: var(--color-palette-theme);
}

.button:is([family=naked], .button--naked):is([role=primary], .button--primary):hover,
.button:is([family=naked], .button--naked):is([role=primary], .button--primary):focus,
.button:is([family=naked], .button--naked):is([role=primary], .button--primary):focus-visible {
    color: var(--color-palette-theme-blush);
}

.button:is([family=naked], .button--naked):is([role=primary], .button--primary):hover .button__label::after,
.button:is([family=naked], .button--naked):is([role=primary], .button--primary):focus .button__label::after,
.button:is([family=naked], .button--naked):is([role=primary], .button--primary):focus-visible .button__label::after {
    background-color: var(--color-palette-theme-blush);
}

.button:is([family=naked], .button--naked):is([role=primary], .button--primary):is([disabled], .disabled) {
    color: var(--color-palette-theme);
}

.button:is([family=naked], .button--naked):is([role=primary], .button--primary):is([disabled], .disabled) .button__label::after {
    background-color: transparent;
}

.button:is([family=naked], .button--naked):is([role=primary], .button--primary):is([disabled], .disabled):hover,
.button:is([family=naked], .button--naked):is([role=primary], .button--primary):is([disabled], .disabled):focus,
.button:is([family=naked], .button--naked):is([role=primary], .button--primary):is([disabled], .disabled):focus-visible {
    color: var(--color-palette-theme);
}

.button:is([family=naked], .button--naked):is([role=primary], .button--primary):is([disabled], .disabled):hover .button__label::after,
.button:is([family=naked], .button--naked):is([role=primary], .button--primary):is([disabled], .disabled):focus .button__label::after,
.button:is([family=naked], .button--naked):is([role=primary], .button--primary):is([disabled], .disabled):focus-visible .button__label::after {
    background-color: transparent;
}

.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive) {
    color: var(--color-semantic-destructive);
}

.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):hover,
.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):focus,
.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):focus-visible {
    color: var(--color-semantic-destructive-blush);
}

.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):hover .button__label::after,
.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):focus .button__label::after,
.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):focus-visible .button__label::after {
    background-color: var(--color-semantic-destructive-blush);
}

.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):is([disabled], .disabled) {
    color: var(--color-semantic-destructive);
}

.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):is([disabled], .disabled) .button__label::after {
    background-color: transparent;
}

.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):is([disabled], .disabled):hover,
.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):is([disabled], .disabled):focus,
.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):is([disabled], .disabled):focus-visible {
    color: var(--color-semantic-destructive);
}

.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):is([disabled], .disabled):hover .button__label::after,
.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):is([disabled], .disabled):focus .button__label::after,
.button:is([family=naked], .button--naked):is([role=destructive], .button--destructive):is([disabled], .disabled):focus-visible .button__label::after {
    background-color: transparent;
}

.card__container--small .card--grid {
    width: calc(100% - (2 * calc(0.5 * var(--spacing) * var(--spn) / var(--spn))));
}

/**
    Generic collapsibles
    Currently not implemented in Fondue UI
*/

.has-collapsible.is-opened .icon--expand {
    transform: rotate(180deg);
}

.collapsible.is-closed {
    display: none;
}

.collapsible.is-opened {
    display: flex;
}

/**
    Twemoji
*/

.twemoji--shield::after {
    background-image: url(../emoji/twemoji/svg/shield.svg);
}

/**
    Fix checkbox and radio label padding
*/
.field-unit--checkboxes .field-unit__options label, .field-unit--radio .field-unit__options label {
    padding: calc(0.5 * var(--spacing));
    padding-left: calc(var(--base-height) + var(--spacing));
}

.secondary {
    color: var(--color-palette-secondary);
}