.ai {
    padding-top: 1em;
    --primary-color: #302DD1;
    --primary-color-font: #fff;
    --primary-color-darker: #302DD1;
    --primary-color-lighter: #eff8e1;
    --font-color: #000;
}
/** General component styles */
.ai .hidden {
    display: none !important;
}
.ai .button {
    background: var(--primary-color-lighter);
    border-color: var(--primary-color-darker);
    color: var(--primary-color-darker);
    transition: all .3s;
    border-radius: 50px;
    padding: 5px 18px 5px 18px;
}
.ai .button.button:hover, .ai .button:focus {
    background: var(--primary-color);
    border-color: var(--primary-color-darker);
    color: var(--primary-color-font);
}
.ai .button-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-font);
    padding: 15px 45px 15px 45px;
}
.ai .button-primary:hover, .ai .button-primary:focus {
    background: var(--primary-color-darker);
    border-color: var(--primary-color-darker);
    color: var(--primary-color-font);
}
.ai .button-primary:hover {
    transform: scale(1.13);
}
.ai.button-large {
    padding: 5px 20px !important;
}

.ai-error {
    border: 1px solid red;
    border-radius: 4px;
    color: red;
    padding: 0.6rem;
    box-shadow: 0px 0px 5px #c7c7c7;
}