.modal-dialog {
    width: 45rem;

    .custom-button {
        background-color: var(--color-signal3);

        &:hover {
            background-color: var(--color-signal380);
            color: var(--color-backgrounddarker);

            .icon {
                fill: var(--color-backgrounddarker);
            }
        }

        .icon {
            fill: var(--color-surfacelighter);
            width: 1rem;
            height: 1rem;
            margin-right: 0.5rem;
        }
    }

    // This is only for the content. Not relevant for the demo
    .content-container {
        display: flex;
        flex-direction: row;
        margin: 0 -0.5rem;

        .content-column {
            flex: 1 0 0;
            padding: 0 0.5rem;

            p {
                text-align: justify;
            }
        }
    }
}

// This is only for the buttons that show the modals. Not relevant for the demo
.show-modal-button {
    display: inline-block;
    background-color: var(--color-signal4);
    width: 15rem;
    text-align: center;
    padding: 1rem;
    margin: .5rem;
}