/* The CSS in this page is made so that it won't interfere with your main css or other styling by using ID's, 
Remember that other top level element names like "Button" in your main style can interfere with this css. */
@import 'colors.css';
#cookie-dialog {
    /* style:*/
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
    background-color: var(--bitoreq-green-dark) !important;
    font-size: 1.3vmax;
    position: fixed;
    margin-bottom: 0;
    border: none;
    overflow: hidden;
    z-index: 1000;
}

@media only screen and (min-width: 769px) {
    #cookie-dialog {
        /* dimensions desktop: */
        top: 75%;
        left: 0;
        right: 0;
        margin-left: 0px;
        margin-right: 0px;
        padding-top: 1.8em;
        padding-bottom: 5em;
        min-height: 8em;
        height: 15vmax;
        min-width: 100vw;
        width: 100%;
    }

    #cookie-dialog-content {
        padding-left: 2vmax;
        padding-right: 2vmax;
    }
}

@media only screen and (max-width: 768px) {
    #cookie-dialog {
        /* dimensions mobile: */
        top: 75%;
        left: 0;
        right: 0;
        margin-left: 0px;
        margin-right: 0px;
        padding-top: 1.8em;
        padding-bottom: 7em;
        min-height: 8em;
        height: 20vmax;
        min-width: 100vw;
        width: 100%;
    }

    #cookie-dialog-content {
        padding-left: 2vmax;
        padding-right: 2vmax;
    }
}

#cookie-accept {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background: #eee;
    border: 0.2vmin solid #ccc;
    padding: 0.5vmax 1vmax;
    font-size: 1.4vmax;
    cursor: pointer;
    border-radius: 0.5em;
}

    #cookie-accept:hover {
        box-shadow: 0 5px 8px 0 rgba(0,0,0,0.24), 0 12px 25px 0 rgba(0,0,0,0.19);
    }

    #cookie-accept:active {
        background: #bbb;
    }

    #cookie-accept:focus {
        box-shadow: 0 5px 8px 0 rgba(0,0,0,0.24), 0 12px 25px 0 rgba(0,0,0,0.19);
        border: none;
        outline: 2px rgba(0,0,0,0.40) solid;
    }

.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

#cookie-more-info {
    font-size: 1em;
    margin-left: 0.5em;
    color: white;
}

    #cookie-more-info:hover {
        color: #ccc;
        text-decoration: 2px underline #ccc;
    }

    #cookie-more-info:focus {   
        text-decoration: 2px underline #fff;
        outline: none; /* remove outline on focus */
    }


#cookie-dialog-arrow {
    margin-left: 0.4em;
    margin-right: 0;
}