/* add styles for project controls here */
@import url('./signature-fonts.css');

:root {
    --brand-purple: #2b3b82;
    --brand-orange: #e48839;
    --brand-orange-dark: #d87c2d;

    --client-header-background-color: var(--brand-purple);
    --client-header-text-color: var(--gray-100);
    --client-header-menu-item-active-text-color: var(--gray-200);
    --client-header-menu-item-active-background-color: var(--brand-orange);
    --client-header-menu-item-hover-text-color: white;
    --client-header-menu-item-hover-background-color: var(--brand-orange);

    --client-header-submenu-background-color: var(--gray-300);
    --client-header-submenu-text-color: var(--brand-purple);
    --client-header-submenu-item-active-text-color: var(--brand-orange-dark);
    --client-header-submenu-item-active-background-color: none;
    --client-header-submenu-item-hover-text-color: var(--brand-orange);
    --client-header-submenu-item-hover-background-color: none;

    --screen-header-primary-button-text-color: var(--gray-200);
    --screen-header-primary-button-background-color: var(--brand-orange);
    --screen-header-primary-button-border-color: var(--brand-orange-dark);
    --screen-header-primary-button-hover-background-color: var(--brand-orange-dark);

    --button-primary-background-color: var(--brand-orange);
    --button-primary-border-color: var(--brand-orange-dark);
    --button-primary-text-color: var(--gray-200);
}

.select-signature-display-container input:focus ~ .field-input {
    outline: medium auto currentColor;
    outline: medium auto invert;
    outline: 5px auto -webkit-focus-ring-color;
}
.select-signature-option-container {
    margin-top: 4px;
}
.select-signature-option {
    padding: 8px;
    cursor: pointer;
    font-size: 24px;
}
.select-signature-option-active {
    padding: 8px;
    cursor: pointer;
    background-color: var(--field-option-active);
}
.select-signature-no-results {
    padding: 8px;
    font-style: italic;
}