@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

#cookieConsent{
    display: fixed;
    bottom: 3vh;    
    left: 1vw;
}

.cookie-consent {
    display: none;
    position: fixed; 
    bottom: 32px; 
    left: 5px; 
    background-color: #ffffff;
    color: #404040;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.208);
    font-size: 14px;
    z-index: 1000; 
    width: 25%;
    height: auto;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeIn 0.5s ease-out forwards;
}

.cookie-consent.show {
    display: block;
    animation: fadeIn 0.5s ease-out forwards; 
}

.cookie-consent.hide {
    animation: fadeOut 0.5s ease-in forwards;
}

.cookie-consent h4 {
    color: #175394;
}

.cookie-consent p {
    margin: 10px 0px;
    padding: 0;
    color: #686868;
}

.cookie-consent a {
    color: #0a70d5;
    text-decoration: underline;
    transition: all 0.3s ease;
}

.cookie-consent a:hover {
    color: #003169; 
}

.cookie-buttons {
    display: flex; /* Align buttons adjacent */
    justify-content: flex-start; /* Align to the left */
    gap: 10px; /* Space between buttons */
}

.cookie-consent button {
    background-color: #0056b3; 
    border: none;
    color: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cookie-consent button:hover {
    background-color: #003169; 
}

@media (max-width: 1400px) {
    .cookie-consent {
        position: fixed; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        height: auto; 
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
        border-radius: 0;
    }
}