/* 
Color varibles from customizer 
    --base-3: #ffffff;
    --buttons-green: #4b8514;
    --buttons-dark-green: #3A6610;
*/

:root {
    --base-size: 8px;
    --border-radius: 10px;
    --color-error: #e51520;
    --border-base-color: #0000001a;
    --border-focus-color: #00000040;
    --transition-time: 0.3s;
}

.hs-form-required {
    color: var(--color-error);
}

.hs-input {
    border-color: var(--border-base-color) !important;
    border-radius: var(--border-radius) !important;
    width: 100% !important;
    background-color: var(--base-3) !important;
    transition: border-color var(--transition-time) ease-in-out;
}

.hs-input:focus{
    border-color: var(--border-focus-color) !important;
}

.hs-error-msgs {
    list-style-type: none;
    text-decoration: none;
    margin-left: 0;
    margin-bottom: 0;
}
.hs-error-msg{
    font-size: .667em;
    color: var(--color-error);
}

.hs-button {
    border-radius: var(--base-size);
    background-color: var(--base-3) !important;
    border: calc(var(--base-size) / 4) solid var(--buttons-dark-green) !important;
    color: var(--buttons-dark-green) !important;
    transition: background-color var(--transition-time) ease-in-out, 
        color var(--transition-time) ease-in-out,
        border-color var(--transition-time) ease-in-out;
}

.hs-button:hover,
.hs-button:active {
    background-color: var(--buttons-green) !important; 
    color: var(--base-3) !important;
    border-color: var(--buttons-green) !important;
}