:root {
    --chatbox-image-light: url('./svgs/chatbox-light.svg');
    --chatbox-image-light-hover: url('./svgs/chatbox-light-hover.svg');

    --chatbox-image-dark: url('./svgs/chatbox-dark.svg');
    --chatbox-image-dark-hover: url('./svgs/chatbox-dark-hover.svg');
}

#groupfi_box {
    z-index: 100;
}

#groupfi_btn {
    z-index: 100;
}

.image {
    z-index: 100;
    background-size: cover;
}

.image:hover {
    opacity: 100% !important;
}

.image.light {
    background-image: var(--chatbox-image-light);
}

.image.light:hover {
    background-image: var(--chatbox-image-light-hover);
}

.image.dark {
    background-image: var(--chatbox-image-dark);
}

.image.dark:hover {
    background-image: var(--chatbox-image-dark-hover);
}

@keyframes fadeOut {
    to {
        opacity: 60%;
    }
}

@-webkit-keyframes fadeOut {
    to {
        opacity: 60%;
    }
}

.animate__fadeOut {
    animation-name: fadeOut;
    animation-duration: 1s;
    animation-delay: 2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}