#cookieprefs { right: 0; bottom: 0; width: 650px; box-sizing: border-box; font-size: .9em; text-align: left; background-color: var(--background); box-shadow: 0px 0px 30px rgb(from var(--main) r g b / 0.2); -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: opacity 300ms ease-in-out; opacity: 0; scrollbar-width: thin; height: fit-content; }
#cookieprefs.not-static { position: fixed; }
#cookieprefs.appear { opacity: 1; }

#cookieprefs .cookietitle { font-size: 1.4em; font-weight: 600; }
#cookieprefs .cookieintro { margin-bottom: 1.2em; position: relative; }
#cookieprefs .cookieopt { display: flex; justify-content: space-between; align-items: flex-start; column-gap: 1em; margin-bottom: 1em; }

#cookieprefs .cookieopt details { flex-grow: 1; text-align: left; }
#cookieprefs .cookieopt details summary { position: relative; left: 1px; cursor: pointer; font-weight: 600; }
#cookieprefs .cookieopt details p { margin-top: 20px; width: calc(100% + 60px); }

#cookieprefs .cookieopt label.cookieopt-toggle { position: relative; display: inline-block; right: 2px; width: 60px; min-width: 60px; height: 30px; }
#cookieprefs .cookieopt label.cookieopt-toggle .toggle-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 30px; background-color: #333; transition: background-color 300ms ease-in-out; }
#cookieprefs .cookieopt label.cookieopt-toggle .toggle-background:after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background-color: var(--background); transition: transform 300ms ease-in-out; }
#cookieprefs .cookieopt label.cookieopt-toggle input[type="checkbox"] { opacity: 0; width: 0; height: 0; }
#cookieprefs .cookieopt label.cookieopt-toggle input[type="checkbox"]:not(:disabled) + .toggle-background { cursor: pointer; }
#cookieprefs .cookieopt label.cookieopt-toggle input[type="checkbox"]:checked + .toggle-background { background-color: var(--color); }
#cookieprefs .cookieopt label.cookieopt-toggle input[type="checkbox"]:disabled + .toggle-background { background-color: #aaa; }
#cookieprefs .cookieopt label.cookieopt-toggle input[type="checkbox"]:checked + .toggle-background:after { transform: translateX(30px); }

#cookieprefs p a { color: var(--color); }

#cookieprefs .button-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px; margin-top: 45px; position: sticky; bottom: 0; background-color: var(--background); box-shadow: 0px 30px 30px 50px #fff; }
#cookieprefs .button-row .btn { margin: 0; padding: 13px 25px 15px 25px; font-size: 16px; background-color: var(--color); }
#cookieprefs .button-row .btn#cookies-deny-all { background-color: #aaa; }
#cookieprefs .button-row .btn#cookies-save-preferences { background-color: #aaa; }
#cookieprefs .button-row .btn#cookies-accept-all { }
#cookieprefs .button-row .btn:hover { filter: brightness(1.1); }

@media screen and (max-width: 1100px) {

    #cookieprefs { font-size: .8em; line-height: 1.5; height: 400px; }
    #cookieprefs .button-row { flex-direction: column; gap: 10px; }
    #cookieprefs .button-row .btn { padding: 12px 15px; width: 100%; font-size: 15px; }

}