@property --header-background-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #ddcdbc;
}
@property --footer-background-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #ddcdbc;
}

@property --button-background-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #854621;
}

@property --button-content-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #fff;
}

@property --button-border-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #854621;
}

#bxcr-configurator-header {
    height: 85px;
    background-color: var(--header-background-color);
}

#bxcr-configurator-footer {
    height: 85px;
    background-color: var(--footer-background-color);
}

#bxcr-configurator-header .bxcr-component,
#bxcr-configurator-footer .bxcr-component {
    margin: 20px;
}

.bxcr-component button {
    padding: 11px 20px;
    background-color: var(--button-background-color);
    color: var(--button-content-color);
    border: 1px solid var(--button-border-color);
    border-radius: 9999px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
}

.bxcr-component button:not(:disabled) {
    cursor: pointer;
}