@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeOutAnimation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.fade-out {
    animation: fadeOutAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.filter {
    display: flex; 
    column-gap: 0.5rem; 
    align-items: center;
}

.controls {
    display: flex;
    justify-content: space-between;
}

.addRemoveControls {
    display: flex;
    column-gap: var(--pico-spacing);
}

/* Pico Overrides */
:root {
    /* --pico-border-radius: 0.5rem; */
    --pico-form-element-spacing-vertical: 0.3rem;
    --pico-form-element-spacing-horizontal: 0.5rem;
    --pico-spacing: 0.5rem;
    --pico-border-width: 1px;
    --pico-outline-width: 1px;
    /* font-family: "Quicksand", sans-serif; */
}

img.emoji {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em; /* tweak for better baseline alignment */
    margin: 0 .05em 0 .1em;  /* optional, for spacing */
}