/* klaro cookie */

#klaro {
    font-family: Arial, sans-serif;
    letter-spacing: 0.1rem !important;
}

#klaro p {
    font-family: Arial, sans-serif;
    line-height:1.5 !important;
}

#klaro a {
    font-family: Arial, sans-serif;
    line-height:1.5 !important;
}

#klaro .klaro .cookie-modal .cm-modal .hide {
    display:block !important;
}

#klaro .cookie-notice {
    background-color:#EDEDED !important;
    border:1px solid #32333B !important;
}

@media screen and (min-width:801px) {
    #klaro .klaro .cookie-modal p {
        font-size:0.9rem !important;
    }
}

@media screen and (max-width:800px) {
    #klaro .klaro .cookie-modal p {
        font-size:0.8rem !important;
    }
}

#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    margin-top:5px !important;
}

@media screen and (min-width:1001px) {
    #klaro .cookie-notice {
        position:fixed !important;
        max-width: 500px !important;
        max-height:300px !important;
        top:30vh !important;
    }
    #klaro .cookieHeadline {
        font-size:0.9rem !important;
    }
    #klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
        font-size:0.9rem !important;
    }
    #klaro .cookie-notice p {
        overflow:scroll !important;
        max-height:100px !important;
    }
    #klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
        padding:2em !important;
    }
    #klaro .klaro .cookie-notice:not(.cookie-modal-notice) {
        right:2.5% !important;
        bottom:2.5% !important;
        top:unset !important;
        left:unset !important;
    }
}

@media screen and (max-width:1000px) {
    #klaro .cookie-notice {
        position:fixed !important;
        max-height:75vh !important;
        bottom:0 !important;
    }
    #klaro .cookieHeadline {
        font-size:0.9rem !important;
    }
    #klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
        font-size:0.9rem !important;
    }
    #klaro .cookie-notice p {
        overflow:scroll !important;
        max-height:14vh !important;
    }
    #klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
        margin-top:5px !important;
    }
}

@media screen and (max-width:850px) and (max-height:500px) {
    #klaro .cookie-notice {
        max-height:100% !important;
    }
    #klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok,
    #klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn.cm-btn-success,
    #klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a {
        margin-top:10px !important;
    }
    #klaro .cookie-notice p {
        overflow:scroll !important;
        max-height:23vh !important;
    }
}

#klaro .cookieHeadline,
#klaro .klaro .cookie-modal a, .klaro .context-notice a, .klaro .cookie-notice a {
    color:#6DA3A8 !important;
    font-weight:100 !important;
}


#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    display:block !important;
}

#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
    width:100% !important;
    font-size:1.0rem !important;
}

#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a, .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div {
    display:block !important;
}

#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a {
    font-size:1.0rem !important;
    background-color:#32333B !important;
    color:white !important;
    border-radius:4px !important;
    margin-right:0 !important;
    padding:0.4em !important;
    cursor:pointer !important;
    border-style: none !important;
    text-align:center !important;
}

#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn.cn-decline {
    background-color:#32333B !important;
    padding:0.6em !important;
    letter-spacing: 0.05rem !important;
}

#klaro .cn-learn-more {
    letter-spacing: 0.05rem !important;
}

#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn.cm-btn-success,
#klaro .klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-accept-all {
    background-color:#6DA3A8 !important;
    padding:0.6em !important;
    letter-spacing: 0.05rem !important;
    margin-top:8px;
}

#klaro .klaro .cookie-modal .cm-modal .cm-footer-buttons {
    display:block !important;
}

#klaro .klaro .cookie-modal .cm-btn {
    width:100% !important;
}

#klaro .klaro .cookie-modal .cm-btn {
    margin-top:10px !important;
}

#klaro .cm-modal.cm-klaro .cm-body {
    font-size:1.0rem !important;
}

#klaro .klaro .cookie-modal .cm-btn, .klaro .context-notice .cm-btn, .klaro .cookie-notice .cm-btn {
    font-size:1.0rem !important;
    background-color:#32333B !important;
    color:white !important;
    border-radius:4px !important;
    margin-right:0 !important;
    padding:0.6em !important;
    cursor:pointer !important;
    border-style: none !important;
    text-align:center !important;
    letter-spacing: 0.1rem !important;
}

#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a, .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div {
    margin-top:0 !important;
}

#klaro ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
    color:#32333B !important;
}

#klaro ::-webkit-scrollbar-thumb {
    border:0 solid black !important;
    border-radius: 5px;
    background-color: #32333B;
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

#klaro *::-webkit-scrollbar-track {
    background: #EDEDED !important;
}