@keyframes twz-spinner{to{rotate:360deg}}.twz-mengkleur-picker{--mengkleur-chip-size: 4rem;--mengkleur-gap: 1rem;display:flex;flex-direction:column;block-size:100%;border-radius:8px;overflow:clip;container-type:inline-size;container-name:twz_mengkleur_picker}.twz-mengkleur-picker__head{position:relative;z-index:3;flex:0 0 auto;background-color:var(--green-900);color:var(--white)}.twz-mengkleur-picker__title-wrap{display:flex;align-items:center;flex-wrap:nowrap;gap:2.7rem;padding:1.5rem 2rem}@container twz_mengkleur_picker (width <= 700px){.twz-mengkleur-picker__title-wrap{flex-wrap:wrap;gap:1rem;padding:1rem}}.twz-mengkleur-picker__title{margin:0;flex:0 1 auto;white-space:nowrap;color:var(--white);font-size:var(--fs-xl, 3.2rem);line-height:1.3}.twz-mengkleur-picker__close{flex:0 0 auto;margin-inline-start:auto;background:rgba(0,0,0,0);border:0;color:var(--white);cursor:pointer;padding:0;inline-size:2.4rem;aspect-ratio:1}.twz-mengkleur-picker__close svg{inline-size:100%;block-size:100%}.twz-mengkleur-picker__close svg path{stroke:var(--white)}.twz-mengkleur-picker__close:hover{background:rgba(0,0,0,0);rotate:180deg}.twz-mengkleur-picker__filters{display:flex;flex-direction:row;align-items:center;gap:2rem;flex:1 1 auto;min-inline-size:0}@container twz_mengkleur_picker (width <= 700px){.twz-mengkleur-picker__filters{flex:1 1 100%;order:3}}.twz-mengkleur-picker__filter{flex:1 1 auto;min-inline-size:0}.twz-mengkleur-picker__filter label{position:absolute;inline-size:1px;block-size:1px;overflow:clip;clip-path:inset(50%)}.twz-mengkleur-picker__filter :where(input){inline-size:100%;block-size:4.8rem;padding:1.2rem 1.5rem;margin:0;border:.1rem solid var(--primary-color);border-radius:0;background-color:var(--white);color:var(--text-color)}.twz-mengkleur-picker__body{flex:1 1 auto;min-block-size:0;overflow:auto;padding:1.5rem 2rem 2rem;background:var(--grey-200);position:relative}@container twz_mengkleur_picker (width <= 700px){.twz-mengkleur-picker__body{padding:1rem}}.twz-mengkleur-picker__body.is-loading .twz-mengkleur-picker__grid{filter:blur(0.2rem);pointer-events:none}.twz-mengkleur-picker__loader{position:sticky;top:0;z-index:2;block-size:100%;margin-block-end:-100%;pointer-events:none}.twz-mengkleur-picker__loader::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;inline-size:4.8rem;block-size:4.8rem;border:.4rem solid var(--primary-color, #18222c);border-inline-end-color:rgba(0,0,0,0);border-radius:50%;background:none;background-image:none;animation:twz-spinner .8s linear infinite}@media(prefers-reduced-motion: reduce){.twz-mengkleur-picker__loader::after{animation:none}}.twz-mengkleur-picker__loader[hidden]{display:none}.twz-mengkleur-picker__message{margin-block:0 1rem;font-size:1.3rem}.twz-mengkleur-picker__message.is-error{color:var(--error-color, var(--red))}.twz-mengkleur-picker__grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--mengkleur-gap)}@container twz_mengkleur_picker (width <= 1000px){.twz-mengkleur-picker__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}@container twz_mengkleur_picker (width <= 700px){.twz-mengkleur-picker__grid{grid-template-columns:minmax(0, 1fr)}}.twz-mengkleur-picker__color{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.2rem;min-inline-size:0;min-block-size:var(--mengkleur-chip-size);padding:.6rem 1.5rem;color:var(--text-color);border:.1rem solid #c6c0c0;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer;text-align:start;overflow:clip}.twz-mengkleur-picker__color:hover,.twz-mengkleur-picker__color:focus-visible{border-color:var(--black);outline:none}.twz-mengkleur-picker__name{font-weight:700;font-size:1.4rem;line-height:1.3;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%}.twz-mengkleur-picker__cat{font-size:1.2rem;font-weight:400;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%}.twz-mengkleur-picker__more{margin-block-start:1.5rem;text-align:center}.twz-mengkleur-picker__more .btn{position:relative}.twz-mengkleur-picker__more .btn.is-loading{color:rgba(0,0,0,0);pointer-events:none}.twz-mengkleur-picker__more .btn.is-loading::after{content:"";position:absolute;inset:0;margin:auto;inline-size:2.4rem;block-size:2.4rem;border:.2rem solid var(--primary-color, #18222c);border-inline-end-color:rgba(0,0,0,0);border-radius:50%;background:none;background-image:none;animation:twz-spinner .8s linear infinite}@media(prefers-reduced-motion: reduce){.twz-mengkleur-picker__more .btn.is-loading::after{animation:none}}body.mengkleur-picker--open{overflow:hidden}dialog.twz-sidebar-dialog.twz-popup.twz-popup--mengkleur,.twz-sidebar-dialog.twz-popup.twz-popup--mengkleur{width:min(100% - 6rem,136.8rem);height:min(100dvh - 6rem,94.9rem);max-width:unset;padding:0;inset:3rem;margin:auto;display:flex;flex-direction:column;overflow:clip;z-index:20000;content-visibility:visible}dialog.twz-sidebar-dialog.twz-popup.twz-popup--mengkleur::backdrop,.twz-sidebar-dialog.twz-popup.twz-popup--mengkleur::backdrop{background:rgba(0,0,0,.5)}dialog.twz-sidebar-dialog.twz-popup.twz-popup--mengkleur .twz-mengkleur-picker,.twz-sidebar-dialog.twz-popup.twz-popup--mengkleur .twz-mengkleur-picker{flex:1 1 auto;min-block-size:0;inline-size:100%;overflow:hidden}@media(max-width: 767px){dialog.twz-sidebar-dialog.twz-popup.twz-popup--mengkleur,.twz-sidebar-dialog.twz-popup.twz-popup--mengkleur{inset:auto 0 0;width:100%;height:95dvh;margin:0;border-end-start-radius:0;border-end-end-radius:0}}