:root { --cookieNoticeProLight: #ffffff; --cookieNoticeProDark: #333; } #cookieNoticePro * { margin: 0; padding: 0; text-decoration: none; list-style: none;} #cookieNoticePro h4 { font-size: 1.2rem;} #cookieNoticePro p { font-size: 1rem;} #cookieNoticePro button, #cookieNoticePro a { font-size: 1rem; cursor: pointer; color: inherit;} #cookieNoticePro button{ outline: none; border: none; appearance: none; font-weight: 400; font-size: .85rem; } #cookieNoticePro strong, #cookieNoticePro em { font-weight: 400; } #cookieNoticePro a:hover { text-decoration: none; cursor: pointer; } #cookieNoticePro a:focus, #cookieNoticePro input:focus { outline: none; list-style: none; } #cookieNoticePro.light { background-color: #ffffff; background-color: var(--cookieNoticeProLight); color: #333; color: var(--cookieNoticeProDark); } #cookieNoticePro.light p, #cookieNoticePro.light ul { color: #333; color: var(--cookieNoticeProDark); } #cookieNoticePro { box-sizing: border-box; position: fixed; padding: 2rem; border-radius: 2rem; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15); z-index: 999997; } #cookieNoticePro #closeIcon { width: 20px; height: 20px; cursor: pointer; color: #bfb9b9; overflow: hidden; opacity: 0.85; z-index: 999999; position: absolute; top: 4px; right: 4px; } #cookieNoticePro svg{ display: block; } #cookieNoticePro.display-left { left: 30px; bottom: 30px; max-width: 395px; } #cookieNoticePro.display-right { right: 2rem; bottom: 2rem; max-width: 35rem; } #cookieNoticePro.display-top { top: 30px; width: 800px; left: 50%; margin-left: -400px; } #cookieNoticePro.display-bottom { bottom: 30px; width: 800px; left: 50%; margin-left: -400px; } #cookieNoticePro.display-top .content-wrap, #cookieNoticePro.display-bottom .content-wrap { display: flex; justify-content: space-between; align-items: center; } #cookieNoticePro.display-top .msg-wrap, #cookieNoticePro.display-bottom .msg-wrap { max-width: 65%; width: 100%; } #cookieNoticePro.display-top .msg-wrap, #cookieNoticePro.display-bottom .msg-wrap { margin-bottom: 0; } #cookieNoticePro.display-top #cookieSettings, #cookieNoticePro.display-bottom #cookieSettings { margin-bottom: 0; } #cookieNoticePro.display-top #cookieTypes, #cookieNoticePro.display-bottom #cookieTypes { margin-top: 20px; } #cookieNoticePro .btn-wrap { display: flex; flex-direction: row; font-weight: 400; justify-content: center; margin: 2rem -5px 0 -5px; flex-wrap: wrap; } #cookieNoticePro .btn-wrap button { cursor: pointer; white-space: nowrap; width: calc( 33.3% - (5px * 2) ); text-transform: uppercase; line-height: 36px; border: none; transition: all .5s ease; padding: 0 7px; margin: 0 5px 10px 5px; border-radius: 20px;} #cookieNoticePro .btn-wrap button:hover { color: #fff !important; background-color: #0085CA !important; } #cookieNoticePro h4 { color: #0085CA; font-weight: 400;} #cookieNoticePro .title-wrap { display: flex; align-items: center; margin-bottom: 10px; } #cookieNoticePro .title-wrap svg { margin-right: 10px; } #cookieNoticePro h5 { font-weight: 400; font-size: 1rem; margin-bottom: 1rem; } #cookieNoticePro p, #cookieNoticePro ul { margin-bottom: 20px; } #cookieNoticePro p { text-align: left; } #cookieNoticePro p:last-child { margin-bottom: 0;} #cookieNoticePro li { width: 33.3%; display: inline-block;} #cookieNoticePro a { text-decoration: underline;} #cookieNoticePro a:hover { text-decoration: none;} #cookieTypes { width: 100% !important; text-align: left; background: #fafafa; border-radius: 1rem; margin-top: 1rem; padding: 1rem 1.5rem !important;} #cookieTypes ul { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 0;} #cookieTypes ul li { width: auto; position: relative; } #cookieTypes ul li button#cookieAcceptSel { width: auto; color: #fff !important; background-color: #0085CA !important; padding: 0 1rem; margin-top: 0;} #cookieTypes ul li button#cookieAcceptSel:hover { background-color: #fff !important; color: #0085CA !important; } #cookieTypes label { font-size: 1rem !important; cursor: pointer; font-weight: 300; padding-left: 1.75rem;} #cookieNoticePro button:disabled { opacity: 0.3;} #cookieNoticePro input[type="checkbox"] { opacity: 0; width: 1px; height: 1px;} #cookieNoticePro input[type="checkbox"] + label:before, #cookieNoticePro input[type="checkbox"] + label:after { content: ""; position: absolute; top: 0; left: 0; width: 1.25rem; height: 1.25rem;} #cookieNoticePro input[type="checkbox"] + label:after { content: "✕"; color: #0085CA; text-align: center; margin-left: .05rem; opacity: 0; transition: opacity .5s ease;} #cookieNoticePro input[type="checkbox"]:checked + label:after { opacity: 1;} #cookieNoticePro input[type="checkbox"] + label:before { background: #fff; border: 1px solid #3182a4;} #cookieNoticePro.display-top.full-width-true, #cookieNoticePro.display-bottom.full-width-true { width: 100%; max-width: 100%; left: auto; right: auto; bottom: auto; top: 0; border-radius: 0; margin: auto;} #cookieNoticePro.display-bottom.full-width-true { bottom: 0; top: auto; box-shadow: 0 -3px 3px rgb(0 0 0 / 25%);} #cookieNoticePro.display-top.full-width-true .title-wrap, #cookieNoticePro.display-bottom.full-width-true .title-wrap { display: none;} #cookieNoticePro.display-top.full-width-true .btn-wrap button, #cookieNoticePro.display-bottom.full-width-true .btn-wrap button { margin-bottom: 10px;} @media only screen and (max-width: 800px) { #cookieNoticePro.display-top, #cookieNoticePro.display-bottom { width: 100%; max-width: 100%; left: auto; right: auto; bottom: auto; top: 0; border-radius: 0; margin: auto; } #cookieNoticePro.display-bottom { bottom: 0; top: auto; box-shadow: 0 -3px 3px rgb(0 0 0 / 25%); } #cookieNoticePro.display-top .btn-wrap button, #cookieNoticePro.display-bottom .btn-wrap button { margin-bottom: 10px; } #cookieNoticePro.display-top .msg-wrap, #cookieNoticePro.display-bottom .msg-wrap { margin-right: 20px; } } @media only screen and (max-width: 600px) { #cookieNoticePro.display-left , #cookieNoticePro.display-right { width: 100%; max-width: 100%; left: auto; right: auto; bottom: 0; border-radius: 0; box-shadow: 0 -3px 3px rgb(0 0 0 / 25%); } #cookieNoticePro.display-top .content-wrap, #cookieNoticePro.display-bottom .content-wrap { display: block; } #cookieNoticePro.display-top .msg-wrap, #cookieNoticePro.display-bottom .msg-wrap { max-width: 100%; } #cookieNoticePro.display-top #cookieSettings, #cookieNoticePro.display-bottom #cookieSettings { margin-bottom: 20px; } #cookieNoticePro .btn-wrap button { width: 100%;} }