:root {

    --flex-gap: 10px;
}

.step-component {
    display: flex;
    flex-direction: column;
}

    .step-component .step-header-container {
        display: flex;
        flex-direction: row;
        margin-bottom: 1em;
    }

        .step-component .step-header-container .step-index {
            display: flex;
            justify-content: center;
            align-items: center;
            border: solid 1px #D6D5D5;
            border-radius: .25em;
            width: 3em;
            aspect-ratio: 1 / 1;
            margin-right: 1em;
        }

        .step-component .step-header-container .step-title-container p {
            margin-bottom: 0;
        }

        .step-component .step-header-container .step-title-container .step-title {
            font-weight: bold;
        }

    .step-component .step-editors-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--flex-gap);
    }

    .step-component.disabled {
        color: #DEDEDE;
        cursor: not-allowed;
    }

.configuration-editor-component {
    flex: 1 1 calc(50% - var(--flex-gap));
    border: solid 1px #D6D5D5;
    border-radius: .25em;
    width: 100%;
}

    .configuration-editor-component .editor-container {
        padding: .75em;
    }

    .configuration-editor-component .header-container {
        padding: .75em;
        background: #D6D5D5;
    }

        .configuration-editor-component .header-container.none {
            background: #d1e3ff;
            color: black;
        }

        .configuration-editor-component .header-container.twilio {
            background: #ED2F46;
            color: white;
        }

        .configuration-editor-component .header-container.vonage {
            background: #F69423;
        }

    .configuration-editor-component.disabled .header-container {
        background: white;
        color: #DEDEDE;
        cursor: not-allowed;
        border-radius: .25em;
        background: #FAFAFA;
    }

    .configuration-editor-component:not(.disabled) .header-container:hover {
        filter: brightness(110%);
    }