:root{--newictea-occasions-padding:1rem;--newictea-occasions-flex-gap:1rem;--newictea-occasions-border-radius:.3rem;--newictea-occasions-border-colour:#e1e1e1;--newictea-occasions-colours-primary:#118cc1;--newictea-occasions-colours-primary-text:white;--newictea-occasions-colours-primary-hover:#186b8f;--newictea-occasions-colours-primary-hover-text:white;--newictea-occasions-colours-secondary:#2d6178;--newictea-occasions-colours-secondary-text:white;--newictea-occasions-colours-secondary-hover:#1c404f;--newictea-occasions-colours-secondary-hover-text:white;--newictea-occasions-colours-danger:#b90000;--newictea-occasions-colours-danger-text:white;--newictea-occasions-colours-danger-hover:#940000;--newictea-occasions-colours-danger-hover-text:white;--newictea-occasions-colours-gradient:linear-gradient(45deg,var(--newictea-occasions-colours-primary),var(--newictea-occasions-colours-secondary))}*[data-loading]{opacity:.5}form#newictea-occasions{position:relative;margin:0;padding:0;font-size:small;.hidden{display:none !important}*{transition:all ease-in-out .2s}section{padding:0;header{padding:1rem 0;p{font-weight:bold;margin:0;padding:0 1rem;position:relative;cursor:pointer;font-size:medium;&::after{content:"\F0140";font:normal normal normal 24px/1 "Material Design Icons";position:absolute;top:50%;right:1rem;transform:translateY(-50%);font-size:130%;font-weight:bold;transition:all ease-in-out .2s}}}content{display:block;height:0;visibility:hidden;overflow:hidden;opacity:0;position:relative;input[type='text']{width:calc(100% - 2rem);margin:.5rem 1rem;display:block;padding:.7rem;box-sizing:border-box;border-radius:var(--newictea-occasions-border-radius);border:1px solid var(--newictea-occasions-border-colour)}ul.options{list-style-type:none;margin:0;padding:0 1rem;box-sizing:border-box;display:flex;flex-wrap:wrap;width:100%;li{flex:100% 0 0;order:1;display:block;&[data-selected='true']{display:block !important}&.group-header{padding:.5rem;box-sizing:border-box}label{width:100%;display:flex;gap:.5rem;input{width:1.5rem;height:1.5rem;margin:0;padding:0;float:unset;flex:auto 0 1;border:1px solid var(--newictea-occasions-border-colour);border-radius:var(--newictea-occasions-border-radius);-moz-appearance:none;-webkit-appearance:none;-o-appearance:none;&[type="checkbox"]:checked{position:relative;background:var(--newictea-occasions-colours-primary);&::after{content:"\F012C";color:var(--newictea-occasions-colours-primary-text);font:normal normal normal 24px/1 "Material Design Icons";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:small}}}span{flex:80% 1 0;position:relative;align-content:center;&::after{content:attr(data-count);position:absolute;right:0;top:50%;transform:translateY(-50%);padding:.2rem .3rem;border-radius:var(--newictea-occasions-border-radius)}}}&[data-disabled]{opacity:.5}&:nth-child(n+6){display:none}}&.open{li:nth-child(n+6){display:block}}&.open+show-more{position:sticky;bottom:4rem;&::before{content:"Toon minder"}&::after{content:"\F0374"}}}range-select{display:flex;gap:1rem;margin:0 1rem;select{flex:auto 1 0;border-radius:var(--newictea-occasions-border-radius);padding:.7rem 0;box-sizing:border-box;text-align:center}}select-list{display:block;width:100%;cursor:pointer;*{transition:all ease-in-out .2s}chosen{width:100%;display:block;border:1px solid var(--newictea-occasions-border-colour);padding:1rem;box-sizing:border-box;border-radius:.5rem;background-color:white;position:relative;svg{padding:.2rem;box-sizing:border-box;width:auto;height:75%;position:absolute;top:50%;right:.5rem;transform:translateY(-50%);fill:#e4e4e4}}&.open{options{display:block}chosen{svg{transform:translateY(-50%) rotate(180deg)}}}&.clicked{options{display:none !important}}options{display:none;flex-wrap:wrap;width:100%;max-height:50vh;overflow-y:auto;scrollbar-color:#6e6e6e #f7f7f7;scrollbar-width:thin;margin-top:.5rem;border-radius:.5rem;border:1px solid #e4e4e4;list-option{width:100%;padding:1rem;background-color:#ffffff;box-sizing:border-box;cursor:pointer;display:block;&:hover{filter:brightness(0.95)}}}}show-more{display:block;margin:.5rem 1rem;padding:.5rem 1rem;border-radius:var(--newictea-occasions-border-radius);box-sizing:border-box;position:relative;cursor:pointer;&::before{content:"Toon meer"}&::after{font:normal normal normal 24px/1 "Material Design Icons";content:"\F0415";position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font-size:1rem;font-weight:bold}}}&.open{header{p::after{transform:translateY(-50%) rotate(180deg)}}content{height:auto;visibility:visible;overflow:initial;opacity:1;margin:0 0 1rem 0;display:inline-block;width:100%}}}button#submit{padding:.7rem 1rem;margin:1rem;box-sizing:border-box;width:calc(100% - 2rem);cursor:pointer;position:sticky;bottom:1rem;border-radius:var(--newictea-occasions-border-radius)}&[data-autosubmit='true']{section{content{ul.options.open+show-more{bottom:1rem}}}button#submit{display:none}}&[data-autosubmit='false']{button#submit{display:block}}&[data-theme="coloured"]{section{border-bottom:1px solid var(--newictea-occasions-colours-primary);header{p{color:var(--newictea-occasions-colour-primary);&::after{color:var(--newictea-occasions-colours-primary)}}}content{ul.options{li{&.group-header{background-color:var(--newictea-occasions-colours-secondary);color:var(--newictea-occasions-colours-secondary-text)}label{span{&::after{background-color:var(--newictea-occasions-colours-secondary);color:var(--newictea-occasions-colours-secondary-text)}}}}&.open+show-more{background-color:var(--newictea-occasions-colours-primary-hover);color:var(--newictea-occasions-colours-primary-hover-text)}}show-more{background-color:var(--newictea-occasions-colours-primary);color:var(--newictea-occasions-colours-primary-text);&:hover{background-color:var(--newictea-occasions-colours-primary-hover);color:var(--newictea-occasions-colours-primary-hover-text)}}}}button#submit{background-color:var(--newictea-occasions-colours-primary);color:var(--newictea-occasions-colours-primary-text);border:1px solid var(--newictea-occasions-colours-primary)}}&[data-theme="minimal"]{section{border-bottom:1px solid var(--newictea-occasions-border-colour);header{padding:1rem 0;p{color:var(--newictea-occasions-colours-primary)}}content{ul.options{li{&.group-header{border-bottom:2px solid var(--newictea-occasions-border-colour);margin:0 0 .5rem 0}label{span[data-count]::after{filter:opacity(0.4)}}}}show-more{background-color:white;border:1px solid var(--newictea-occasions-border-colour);&:hover{background-color:var(--newictea-occasions-border-colour)}&::after{filter:opacity(0.4)}}}}button#submit{background-color:var(--newictea-occasions-colours-primary);color:var(--newictea-occasions-colours-primary-text);border:1px solid var(--newictea-occasions-colours-primary)}}}selection-tags{display:flex;flex-wrap:wrap;width:100%;gap:var(--newictea-occasions-flex-gap);margin:.5rem 0;*{transition:all ease-in-out .2s}tag{flex:auto 0 0;border:2px solid var(--newictea-occasions-colours-primary);border-radius:var(--newictea-occasions-border-radius);padding:.5rem 2rem .5rem 1rem;box-sizing:border-box;position:relative;cursor:pointer;&:hover{background:linear-gradient(45deg,var(--newictea-occasions-colours-primary),var(--newictea-occasions-colours-primary-hover));color:var(--newictea-occasions-colours-primary-hover-text)}&::after{font:normal normal normal 24px/1 "Material Design Icons";content:"\F0156";position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font-size:1rem;font-weight:bold}}reset{flex:auto 0 0;order:99;background-color:var(--newictea-occasions-colours-danger);color:var(--newictea-occasions-colours-danger-text);padding:.5rem 2rem .5rem 1rem;border-radius:var(--newictea-occasions-border-radius);box-sizing:border-box;position:relative;cursor:pointer;&:hover{background:linear-gradient(45deg,var(--newictea-occasions-colours-danger),var(--newictea-occasions-colours-danger-hover));color:var(--newictea-occasions-colours-danger-hover-text)}&::after{font:normal normal normal 24px/1 "Material Design Icons";content:"\F0A79";position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font-size:1rem}}}