/* Logo animation for welcome */
.wave-container {
    width: 160px;
    height: 160px;
    min-width: 160px;
    min-height: 160px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

    .wave-container:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        z-index: 3;
    }

.wave-animation {
    position: absolute;
    top: 50%;
    left: 0;
    width: 200%;
    height: 200%;
    transform: translate(-25%, 0%);
    background: #1fc2de;
    animation: fill-up 3000ms linear infinite;
}

@keyframes fill-up {
    to {
        top: -120%;
    }
}

.wave-animation:after {
    content: '';
    position: absolute;
    width: 110%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, -75%);
}

.wave-animation:after {
    border-radius: 40%;
    background: white;
    animation: logo-wave 3000ms linear infinite;
}

@keyframes logo-wave {
    0% {
        transform: translate(-50%, -75%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -75%) rotate(360deg);
    }
}

/* Logo display changes - fade/hidden */
.fade-in-logo {
    animation: fade-logo-in 1s linear forwards;
}

.fade-out-logo {
    animation: fade-logo-out 1s linear forwards;
}

.hidden-animation {
    display: none;
}

@keyframes fade-logo-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-logo-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.scale-up-small {
    transition: transform 0.1s ease;
}

    .scale-up-small:hover {
        transform: scale(1.05);
    }

.open_tab {
    transform: rotate(0deg);
}

.closed_tab {
    transform: rotate(180deg);
}

.tab_rotate_open {
    animation: spinOpen 300ms ease-in forwards;
}

@keyframes spinOpen {
    100% {
        transform: rotate(0deg);
    }
}

.tab_rotate_closed {
    animation: spinClosed 300ms ease-in forwards;
}

@keyframes spinClosed {
    100% {
        transform: rotate(180deg);
    }
}


#feedback_form {
    opacity: 50%;
    transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}

#feedback_form:hover {
    opacity: 100%;
    transform: scale(125%)
}