.ProductModal {
    // copied from react-bootstrap
    // suite-components exposes the alert
    // component without css.

    .alert-danger {
        color: #842029;
        background-color: #f8d7da;
        border-color: #f5c2c7;
    }

    .alert {
        position: relative;
        padding: 1rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
    }

    .fragment {
        &-box {
            box-shadow: 0 0 0.357rem rgb(0 15 23 / 20%);
            margin-bottom: 1.429rem;
            padding: 1.429rem;
            border-radius: 0.214rem;
            overflow-x: hidden;
        }

        &-title {
            font-size: 1.286rem;
            font-weight: 400;
            margin-bottom: 1.5rem;
        }

        &-heading {
            font-size: 1.286rem;
            font-weight: 400;
            margin-bottom: 1rem;
        }
    }

    .label {
        font-style: normal;
        font-weight: 500;
        font-size: 0.857rem;
        line-height: 0.857rem;
        letter-spacing: 0.071rem;
        text-transform: uppercase;
        color: var(--text-secondary);
        margin-bottom: 0.357rem;
    }

    .fieldLabel {
        font-weight: 500;
        font-size: 14px;
        line-height: 14px;
        color: var(--text-secondary);
    }

    .bgEclipse {
        background-color: $gray-200;
        border-radius: 0.214rem;
    }

    .ReactModal-body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .Page {
        margin: auto;
        width: 100%;

        &Header {
            margin: -2rem -2.4rem 0;
        }
    }

    .page-container {
        @media screen and (min-width: map-get($grid-breakpoints, 'xxl')) {
            margin-left: 0.3rem;
            margin-right: 0.3rem;
        }
    }

    .lockedStateError {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: var(--padding-medium-small);
        width: 400px;
        margin: 0 auto;

        .ErrorMessage {
            &-title,
            &-description {
                white-space: pre-line;
                text-align: center;
                width: 100%;
            }
        }
    }
}

.PopoverContent {
    overflow-y: unset;
}

.fingerprinting-restrictions-table {
    border: 1px solid var(--dividers-light-stroke);
    padding: 5px;
}