.ho-cookies {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    border-radius: 10px;
    z-index: 997;
    background-color: #013f09;
    color: white;
    max-height: calc(100vh - 100px - 1rem - 1rem);
    overflow-y: auto;
    transform: translateY(calc(100% + 1rem));
    animation: showCookieBar 250ms forwards;
    /* animation-delay: 600ms; */
    box-shadow: 0 0 8px rgba(0,0,0,.6);
    max-width: 600px;
    margin-left: auto;

    button {
        flex: 1;
    }
}

.admin-bar .ho-cookies {
    bottom: calc(1rem + 46px);
}
@media screen and (min-width: 783px) {
    .admin-bar .ho-cookies {
        bottom: calc(1rem + 32px);
    }
}

.ho-cookies--hidden {
    display: none;
}

.ho-cookies__close {
    color: white;
    background-color: transparent;
    position: absolute;
    top: .1rem;
    right: .6rem;
    border: none;
    padding: .25rem;
    z-index: 2;
}

.ho-cookies__close path {
    fill: white;
}

.ho-cookies > div {
    overflow: hidden;
}

.ho-cookies > div::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .3);
    height: 38px;
    z-index: 1;
}

.ho-mode-scrolling .ho-cookies {
    max-height: calc(100vh - 60px - 1rem - 1rem);
}

.ho-cookies-btn-cookies-bar {
    position: absolute;
    bottom: 120px;
    right: 0;
    z-index: 997;
    background-color: #013f09;
    color: white;
    border: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: .25rem .5rem;
    font-size: .8rem;
    box-shadow: 0 0 8px rgba(0,0,0,.6);
}

.ho-cookies-btn-cookies-bar--hidden {
    display: none;
}

@keyframes showCookieBar {
    to {
        transform: translateY(0);
    }
}