@media screen {
    #cookie-jar { font-size: 14px; display: none; }
    a#cookie-jar-trigger { width: 1.5em; height: 1.5em; position: fixed; z-index: 10005; left: .5em; bottom: .5em; border-radius: 50%; background:rgba(255,255,255,.2); }
    a#cookie-jar-trigger:hover { background: #fff; }
    body.with-cookie-jar { overflow:hidden; }
    body.with-cookie-jar #cookie-jar { display: block; }
    body.with-cookie-jar #cookie-jar-trigger { display: none; background: #d8ba84; }
    #cookie-jar::before { content: ''; position: fixed; z-index: 10000; left: 0; width: 100vw; top: 0; height: 100vh; background: rgba(0,0,0,.5); }
    #cookie-jar .cookie-jar-content { margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-content: flex-start; background: #fff; border-radius: 4px; position: fixed; z-index: 10005; width: 90%; left: 5%; top: 1em; max-height:calc(100vh - 2em); overflow-x:auto; }
    #cookie-jar .cookie-jar-text { padding: 1.25em; flex: 100%; box-sizing: border-box; }
    #cookie-jar h2 { margin: 0 0 .5em; font-size:2.5em; }
    #cookie-jar p { margin: 0 0 .85em; }
    #cookie-jar label { cursor: pointer; position: relative; line-height: 1em; display: inline-block; }
    #cookie-jar label span { position: relative; top: .25rem; }
    #cookie-jar ul, #cookie-jar li { list-style: none; margin: 0; padding: 0; }
    #cookie-jar .cookie-jar-form { padding: 0 1.25em; flex: 100%; box-sizing: border-box; }
    #cookie-jar li { padding: .5em 1em .5em 0; border-bottom: solid 1px #ddd; }
    #cookie-jar li:last-child { border-bottom: none; }
    #cookie-jar input[type="checkbox"] { position: absolute; left: -100vw; }
    #cookie-jar input[type="checkbox"] + label.toggler::before { content: ''; display: inline-block; margin-right: 1em; vertical-align: top; width: 3em; height: 1.5em; background-color: #000; cursor: pointer; opacity: .7; border-radius: 25px; transition: all .2s ease-in-out; }
    #cookie-jar input[type="checkbox"] + label.toggler::after { content: ''; display: inline-block; position: absolute; left: .2em; top: .2em; height: 1.1em; width: 1.1em; background: #fff; border-radius: 50%; }
    #cookie-jar input[type="checkbox"]:checked + label.toggler::before { background-color: #85A794; opacity: 1; }
    #cookie-jar input[type="checkbox"]:checked + label.toggler::after { left: 1.7em; }
    #cookie-jar input[type="checkbox"].locked + label.toggler { cursor: not-allowed; }
    #cookie-jar input[type="checkbox"].locked + label.toggler::before { opacity: .5; cursor: not-allowed; }
    #cookie-jar a.cookie-jar-consent-elaboration-toggler { display: inline-block; float: right; font-size: .7em; color: #fff; background: #757575; text-decoration: none; margin-left: .5rem; margin-top: .2rem; width: 1.25rem; height: 1.25rem; line-height: 1.25rem; text-align: center; border-radius: 50%; transition: all .2s ease-in; }
    #cookie-jar a.cookie-jar-consent-elaboration-toggler::before { content: "?"; font-family:Arial, Helvetica, sans-serif; }
    #cookie-jar a.cookie-jar-consent-elaboration-toggler.active { background: #a51818; }
    #cookie-jar a.cookie-jar-consent-elaboration-toggler.active::before { content: "×"; }
    #cookie-jar .cookie-jar-consent-elaboration { max-height: 0; overflow: hidden; opacity: 0; box-sizing: border-box; transition: all .2s ease-in-out; font-size: smaller; }
    #cookie-jar a.cookie-jar-consent-elaboration-toggler.active + .cookie-jar-consent-elaboration { max-height: 50em; padding: 1em 0 .25em; opacity: 1; }
    #cookie-jar .cookie-jar-buttons { padding: 1.5em 0; display: flex; flex-direction: column; }
    #cookie-jar button { font-size: 1em; border: none; background: #fff; color: #111; border: solid 1px #b5b5b5; border-radius: 3px; padding: .75em 2em; cursor: pointer; margin: 1em 5% .25em; width: 90%; }
    #cookie-jar:not(.with-selection) button#cookie-jar-accept-allx,
    #cookie-jar.with-selection button#cookie-jar-save { background: #85A794; color: #fff; border: none; }
}

@media screen and (min-width:768px) {
    #cookie-jar .cookie-jar-content { width: 80%; left: 10%; top: auto; bottom: 2em; }
    #cookie-jar .cookie-jar-text { padding: 2em 2em 1em; }
    #cookie-jar .cookie-jar-form { padding: 0 2em; }
    #cookie-jar .cookie-jar-buttons { flex-direction: row; justify-content: space-between; }
    #cookie-jar button { margin: 1em 1em 0; width: auto; min-width: 10em; }
}

@media screen and (min-width:1024px) {
    body.with-cookie-jar #cookie-jar-trigger { display: inline; background: #d8ba84; }
    #cookie-jar .cookie-jar-content { width: 90%; left: 5%; }
    #cookie-jar .cookie-jar-text { padding: 2em; flex: 40%; }
    #cookie-jar .cookie-jar-form { padding: 2em; flex: 60%; }
    #cookie-jar .cookie-jar-buttons { padding: 1.5em 0 0; }
    #cookie-jar button { margin: 1em 1.25em 0 0; min-width: 9em; }
    #cookie-jar button:first-child { margin-right: 0; }
}

@media screen and (min-width:1260px) {
    #cookie-jar .cookie-jar-content { width: 80%; left: 10%; }
    #cookie-jar .cookie-jar-text { flex: 45%; }
    #cookie-jar .cookie-jar-form { flex: 55%; }
    #cookie-jar a.cookie-jar-consent-elaboration-toggler { width: 1rem; height: 1rem; line-height: 1rem; }
}

@media screen and (min-width:1366px) {
    #cookie-jar .cookie-jar-content { width: 75%; left: 12.5%; }
}

@media screen and (min-width:1920px) {
    #cookie-jar { font-size:15px; }
    #cookie-jar .cookie-jar-content { width: 60%; left: 20%; }
    #cookie-jar .cookie-jar-text { flex: 50%; }
    #cookie-jar .cookie-jar-form { flex: 50%; }
}