/** Commons **/

.light-bg {
    --bg-color: var(--alternate-bg);
    background-color: var(--bg-color);

    --txt-color: var(--primary-color);
    color: var(--txt-color);
}

.medium-bg {
    --bg-color: var(--third-bg);
    background-color: var(--bg-color);

    --txt-color: var(--primary-color);
    color: var(--txt-color);
}

.dark-bg {
    --bg-color: var(--primary-bg);
    background-color: var(--bg-color);

    --txt-color: var(--dark-bg-text-color);
    color: var(--txt-color);

    --optional-text-color: #7E7E7E;
}

.padded {
    padding: var(--default-h-margin);
}


/** Workflow Panel **/

.cardPanel .workFlowPanel, .cardPanel .workFlowPanel-noOffsetDescendant {
    margin-left: calc(var(--default-h-margin) * -1); /* align WorkflowPanel's content with its container and have the background start at the border */
}

.workFlowPanel > * {
    position: relative;
    padding: 36px var(--default-h-margin) 20px;
}

.workFlowPanel > :first-child {
    padding-top: 20px;
}

.workFlowPanel > :not(:last-child)::before {
    content: ' ';
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid var(--bg-color);

    position: absolute;
    left: calc(50% - 10px);
    bottom: -20px;

    z-index: 1;
}


/** Card panels **/

.cardPanel-border {
    border-radius: 5px;
    background-color: var(--primary-color);
}

/**FormPanel**/
.formPanel > :not(:last-child) {
    margin-bottom: 5px;
}

.formPanel-input:not(:last-child) {
    margin-right: 40px;
}

.formPanel-line {
    display: flex;
    align-items: center;

    height: 40px;
}

/**StudioGridLayoutPanel**/
.studioGrid-cell-overflow {
    overflow: auto;
    max-height: 70vh;
    --banner-height: 0px;
}