/*** Siteclick General Styles **/

/* Design-tokens (kleuren, breakpoints, scrollbars) staan in tokens.css zodat
   iframe-panelen die shared.css NIET laden dezelfde bron kunnen linken. Bump
   de ?v= bij elke wijziging in tokens.css. */
@import url("tokens.css?v=3");

html, body {
    overscroll-behavior-x: none;
}


/*
 * Dark mode contrast fixes
 * Keep light mode as default. Dark mode is activated with data-siteclick-theme="dark".
 */
html[data-siteclick-theme="dark"],
body[data-siteclick-theme="dark"] {
    background: #202123 !important;
}

.siteclick-container[data-siteclick-theme="dark"],
body.siteclick-container[data-siteclick-theme="dark"],
html[data-siteclick-theme="dark"] .siteclick-container,
body[data-siteclick-theme="dark"] .siteclick-container {
    background: var(--sc-color-bg) !important;
    color: var(--sc-color-text) !important;
}

.siteclick-container[data-siteclick-theme="dark"] h1,
.siteclick-container[data-siteclick-theme="dark"] h2,
.siteclick-container[data-siteclick-theme="dark"] h3,
.siteclick-container[data-siteclick-theme="dark"] h4,
.siteclick-container[data-siteclick-theme="dark"] h5,
.siteclick-container[data-siteclick-theme="dark"] h6,
body.siteclick-container[data-siteclick-theme="dark"] h1,
body.siteclick-container[data-siteclick-theme="dark"] h2,
body.siteclick-container[data-siteclick-theme="dark"] h3,
body.siteclick-container[data-siteclick-theme="dark"] h4,
body.siteclick-container[data-siteclick-theme="dark"] h5,
body.siteclick-container[data-siteclick-theme="dark"] h6,
html[data-siteclick-theme="dark"] .siteclick-container h1,
html[data-siteclick-theme="dark"] .siteclick-container h2,
html[data-siteclick-theme="dark"] .siteclick-container h3,
html[data-siteclick-theme="dark"] .siteclick-container h4,
html[data-siteclick-theme="dark"] .siteclick-container h5,
html[data-siteclick-theme="dark"] .siteclick-container h6,
body[data-siteclick-theme="dark"] .siteclick-container h1,
body[data-siteclick-theme="dark"] .siteclick-container h2,
body[data-siteclick-theme="dark"] .siteclick-container h3,
body[data-siteclick-theme="dark"] .siteclick-container h4,
body[data-siteclick-theme="dark"] .siteclick-container h5,
body[data-siteclick-theme="dark"] .siteclick-container h6,
.siteclick-container[data-siteclick-theme="dark"] .siteclick-title,
body.siteclick-container[data-siteclick-theme="dark"] .siteclick-title,
html[data-siteclick-theme="dark"] .siteclick-container .siteclick-title,
body[data-siteclick-theme="dark"] .siteclick-container .siteclick-title,
.siteclick-container[data-siteclick-theme="dark"] .magic-title,
body.siteclick-container[data-siteclick-theme="dark"] .magic-title,
html[data-siteclick-theme="dark"] .siteclick-container .magic-title,
body[data-siteclick-theme="dark"] .siteclick-container .magic-title,
.siteclick-container[data-siteclick-theme="dark"] .siteclick-filter-qty,
body.siteclick-container[data-siteclick-theme="dark"] .siteclick-filter-qty,
html[data-siteclick-theme="dark"] .siteclick-container .siteclick-filter-qty,
body[data-siteclick-theme="dark"] .siteclick-container .siteclick-filter-qty {
    color: var(--sc-color-text) !important;
}

.siteclick-container[data-siteclick-theme="dark"] .siteclick-bg-light,
.siteclick-container[data-siteclick-theme="dark"] .bg-white-1,
.siteclick-container[data-siteclick-theme="dark"] .bg-white-1.active,
body.siteclick-container[data-siteclick-theme="dark"] .siteclick-bg-light,
body.siteclick-container[data-siteclick-theme="dark"] .bg-white-1,
body.siteclick-container[data-siteclick-theme="dark"] .bg-white-1.active,
html[data-siteclick-theme="dark"] .siteclick-container .siteclick-bg-light,
html[data-siteclick-theme="dark"] .siteclick-container .bg-white-1,
html[data-siteclick-theme="dark"] .siteclick-container .bg-white-1.active,
body[data-siteclick-theme="dark"] .siteclick-container .siteclick-bg-light,
body[data-siteclick-theme="dark"] .siteclick-container .bg-white-1,
body[data-siteclick-theme="dark"] .siteclick-container .bg-white-1.active {
    background-color: var(--sc-color-panel-bg) !important;
}

.siteclick-container[data-siteclick-theme="dark"] .button.button-grey,
body.siteclick-container[data-siteclick-theme="dark"] .button.button-grey,
html[data-siteclick-theme="dark"] .siteclick-container .button.button-grey,
body[data-siteclick-theme="dark"] .siteclick-container .button.button-grey {
    background: var(--sc-color-surface-alt) !important;
    color: var(--sc-color-text-soft) !important;
}

.siteclick-container[data-siteclick-theme="dark"] .siteclick-card-image-in,
.siteclick-container[data-siteclick-theme="dark"] .siteclick-card-image-screen,
body.siteclick-container[data-siteclick-theme="dark"] .siteclick-card-image-in,
body.siteclick-container[data-siteclick-theme="dark"] .siteclick-card-image-screen,
html[data-siteclick-theme="dark"] .siteclick-container .siteclick-card-image-in,
html[data-siteclick-theme="dark"] .siteclick-container .siteclick-card-image-screen,
body[data-siteclick-theme="dark"] .siteclick-container .siteclick-card-image-in,
body[data-siteclick-theme="dark"] .siteclick-container .siteclick-card-image-screen {
    background-color: var(--sc-color-surface-alt) !important;
}

body,html{
    height: auto !important;
    min-height: 100%;
    background: var(--sc-color-bg);
}

/** COMMON **/
body,
html,
body.siteclick-container,
div.siteclick-container{
    font-family: 'Rubik', sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    background: var(--sc-color-bg) !important;
    color: var(--sc-color-text) !important;
    line-height: 1.8em !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#wpwrap {
    -webkit-font-smoothing: antialiased !important;
}


.siteclick-container div,
.siteclick-container input,
.siteclick-container textarea,
.siteclick-container button,
.siteclick-container a,
.siteclick-container .wp-editor-area{
    box-sizing: border-box;
}

.siteclick-container a {
    color: var(--sc-color-text);
}
.siteclick-container a:hover {
}


/* Display */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

/* Flex alignment */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Flex direction */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

/* Gap */
.gap-0 { gap: 0; }
.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }

/* Padding */
.p-0 { padding: 0; }
.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }

/* Margin */
.m-0 { margin: 0; }
.m-5 { margin: 5px; }
.m-10 { margin: 10px; }
.m-15 { margin: 15px; }
.m-20 { margin: 20px; }

/* Width */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Height */
.h-full { height: 100%; }
.h-auto { height: auto; }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Font weight */
.font-normal { font-weight: 400; }
.font-bold { font-weight: 700; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* Border radius */
.rounded { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }
.rounded-full { border-radius: 9999px; }
.rounded-circle {border-radius: 50% !important;}


/** SCROLLBARS **/
body.siteclick-container::-webkit-scrollbar,
.siteclick-container .siteclick-panel-content::-webkit-scrollbar{
    width: var(--sb-size-body);
    visibility:visible;
    overscroll-behavior-x: none;
}
.siteclick-container #adminmenuwrap::-webkit-scrollbar,
.siteclick-container .siteclick-sidebar-content::-webkit-scrollbar,
.siteclick-container .siteclick-panel-content::-webkit-scrollbar {
    width: var(--sb-size);
    visibility:hidden;
    overscroll-behavior-x: none;
}
.siteclick-container .siteclick-table-horizontal .siteclick-table-wrapper::-webkit-scrollbar,
.siteclick-container .siteclick-subheader-in-content-webkit-scrollbar{
    height: 3px;
    visibility:hidden;
}

body.siteclick-container::-webkit-scrollbar-track {
    background: var(--sc-color-border);
    border-radius: 5px;
}
.siteclick-container #adminmenuwrap::-webkit-scrollbar-track,
.siteclick-container .siteclick-sidebar-content::-webkit-scrollbar-track,
.siteclick-container .siteclick-table-horizontal .siteclick-table-wrapper::-webkit-scrollbar-track,
.siteclick-container .siteclick-panel-content::-webkit-scrollbar-track{
    background: var(--sb-track-color);
    border-radius: 5px;
}

body.siteclick-container ::-webkit-scrollbar-thumb {
    background: var(--sc-color-black);
    border-radius: 5px;
}
.siteclick-container #adminmenuwrap::-webkit-scrollbar-thumb,
.siteclick-container .siteclick-sidebar-content::-webkit-scrollbar-thumb,
.siteclick-container .siteclick-table-horizontal .siteclick-table-wrapper::-webkit-scrollbar-thumb,
.siteclick-container .siteclick-panel-content::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 5px;
}

@supports not selector(::-webkit-scrollbar) {
    body.siteclick-container ,
    .siteclick-container #adminmenuwrap,
    .siteclick-container .siteclick-sidebar-content,
    .siteclick-container .siteclick-table-horizontal .siteclick-table-wrapper::-webkit-scrollbar-thumb,
    .siteclick-container .siteclick-panel-content{
        scrollbar-color: var(--sb-thumb-color)
        var(--sb-track-color);
    }
}

.siteclick-container .fw-100 {font-weight: 100 !important;}
.siteclick-container .fw-200 {font-weight: 200 !important;}
.siteclick-container .fw-300 {font-weight: 300 !important;}
.siteclick-container .fw-400 {font-weight: 400 !important;}
.siteclick-container .fw-500 {font-weight: 500 !important;}
.siteclick-container .fw-600 {font-weight: 600 !important;}
.siteclick-container .fw-700 {font-weight: 700 !important;}
.siteclick-container .fw-800 {font-weight: 800 !important;}
.siteclick-container .fw-900 {font-weight: 900 !important;}
.siteclick-container .fs-italic {font-style:italic !important;}
.siteclick-container .tt-uppercase {text-transform:uppercase !important;}

.siteclick-container .op-0 {opacity:0}
.siteclick-container .op-5 {opacity:0.05}
.siteclick-container .op-10 {opacity:0.10}
.siteclick-container .op-15 {opacity:0.15}
.siteclick-container .op-20 {opacity:0.20}
.siteclick-container .op-25 {opacity:0.25}
.siteclick-container .op-30 {opacity:0.30}
.siteclick-container .op-35 {opacity:0.35}
.siteclick-container .op-40 {opacity:0.40}
.siteclick-container .op-45 {opacity:0.45}
.siteclick-container .op-50 {opacity:0.50}
.siteclick-container .op-55 {opacity:0.55}
.siteclick-container .op-60 {opacity:0.60}
.siteclick-container .op-65 {opacity:0.65}
.siteclick-container .op-70 {opacity:0.70}
.siteclick-container .op-75 {opacity:0.75}
.siteclick-container .op-80 {opacity:0.80}
.siteclick-container .op-85 {opacity:0.85}
.siteclick-container .op-90 {opacity:0.90}
.siteclick-container .op-95 {opacity:0.95}
.siteclick-container .op-100 {opacity:1}


/** BOXES **/
.siteclick-container .box-1 {padding: 50px;}
.siteclick-container .box-2 {padding: 1rem;}

@media screen and (max-width: 1224px) {
    .siteclick-container .box-1 { padding: 50px; }
}

@media screen and (max-width: 1024px) {
    .siteclick-container .box-1 { padding: 40px; }
}

@media screen and (max-width: 768px) {
    .siteclick-container .box-1 { padding: 30px; }
}
@media screen and (max-width: 480px) {
    .siteclick-container .box-1 { padding: 20px; }
}

.siteclick-container .va-top {
    vertical-align:top !important;
}
.siteclick-container .va-middle {
    vertical-align:middle !important;
}
.siteclick-container .va-bottom {
    vertical-align:bottom !important;
}

/** COLORS **/
.siteclick-container .clr-black-1 { color: var(--sc-color-text) !important}
.siteclick-container .bg-black-1, .siteclick-container .bg-black-1.active { background-color: var(--sc-color-text) !important}

.siteclick-container .clr-white-1 { color: var(--sc-color-white) !important}
.siteclick-bg-light, .siteclick-container .bg-white-1, .siteclick-container .bg-white-1.active { background-color: var(--sc-color-white) !important}

.siteclick-container .clr-blue-1 { color: var(--sc-color-blue) !important}
.siteclick-container .bg-blue-1, .siteclick-container .bg-blue-1.active {background-color: var(--sc-color-blue) !important;}

.siteclick-container .clr-blue-2 { color: var(--sc-color-blue-soft) !important}
.siteclick-container .bg-blue-2, .siteclick-container .bg-blue-2.active { background-color: var(--sc-color-blue-soft) !important}


.siteclick-container .clr-blue-3 { color: var(--sc-color-black) !important}
.siteclick-bg-dark, .siteclick-container.bg-blue-3, .siteclick-container .bg-blue-3, .siteclick-container .bg-blue-3.active { background-color: var(--sc-color-black) !important}


.siteclick-container .clr-blue-4 { color: var(--sc-color-text-soft) !important}
.siteclick-container .bg-blue-4, .siteclick-container .bg-blue-4.active { background-color: var(--sc-color-text-soft-bg) !important}

.siteclick-container .clr-grey-1 { color: var(--sc-color-text-subtle) !important}
.siteclick-container .bg-grey-1, .siteclick-container .bg-grey-1.active { background-color: var(--sc-color-text-subtle) !important}

.siteclick-container .clr-grey-2 { color: var(--sc-color-surface) !important}
.siteclick-container .bg-grey-2, .siteclick-container .bg-grey-2.active { background-color: var(--sc-color-surface) !important}

.siteclick-container .clr-grey-3 { color: var(--sc-color-text-subtle) !important}
.siteclick-container .bg-grey-3, .siteclick-container .bg-grey-3.active { background-color: var(--sc-color-text-subtle) !important}

.siteclick-container .clr-yellow-1 { color: var(--sc-color-yellow) !important}
.siteclick-container .bg-yellow-1, .siteclick-container .bg-yellow-1.active { background-color: var(--sc-color-yellow) !important}

.siteclick-container .clr-yellow-2 { color: var(--sc-color-yellow-soft) !important}
.siteclick-container .bg-yellow-2, .siteclick-container .bg-yellow-2.active { background-color: var(--sc-color-yellow-soft) !important}

.siteclick-container .clr-green-1 { color: var(--sc-color-green) !important}
.siteclick-container .bg-green-1, .siteclick-container .bg-green-1.active { background-color: var(--sc-color-green) !important}

.siteclick-container .clr-green-2 { color: var(--sc-color-green-soft) !important}
.siteclick-container .bg-green-2, .siteclick-container .bg-green-2.active { background-color: var(--sc-color-green-soft) !important}

.siteclick-container .clr-red-1 { color: var(--sc-color-red) !important}
.siteclick-container .bg-red-1, .siteclick-container .bg-red-1.active { background-color: var(--sc-color-red) !important}

.siteclick-container .clr-orange-1 { color: var(--sc-color-orange) !important}
.siteclick-container .bg-orange-1, .siteclick-container .bg-orange-1.active { background-color: var(--sc-color-orange) !important}

.siteclick-container .clr-purple-1 { color: var(--sc-color-purple) !important}
.siteclick-container .bg-purple-1, .siteclick-container .bg-purple-1.active { background-color: var(--sc-color-purple) !important}



/** BUTTONS **/
.siteclick-container .button {
    border: 0px;
    background: var(--sc-button-neutral-bg);
    color: var(--sc-button-neutral-text);
    box-shadow: none !important;
    font-size: 1rem !important;
    border-radius: 3px;
    display:inline-block;
    line-height: 2.15384615;
    min-height: auto;
    margin: 0;
    padding: 0 10px;
    cursor:pointer;
    vertical-align: top;
    font-weight: 500;
}

.siteclick-container .button.button-small {
    font-size: 10px !important;
    line-height: 18px !important;
    height: 18px !important;
    padding: 0px 0.5rem  !important;
    min-height: 0px !important;
    vertical-align: middle;
}

.siteclick-container .button.button-small i {
    font-size: 10px !important;
}


.siteclick-container .button.button-medium {
    font-size: 12px !important;
    line-height: 25px !important;
    height: 25px !important;
    padding: 0px 0.5rem  !important;
    min-height: 0px !important;
    vertical-align: middle;
}

.siteclick-container .button.button-medium i {
    font-size: 10px !important;
    margin-right: 0.2rem !important;
}

.siteclick-container .button.button-large {
    font-size: 14px !important;
    line-height: 30px !important;
    height: 30px !important;
    padding: 0px 0.75rem  !important;
    min-height: 0px !important;
    vertical-align: middle;
}

.siteclick-container .button.button-large i {
    font-size: 12px !important;
    margin-right: 0.4rem !important;
}

.siteclick-container .button.button-extralarge {
    font-size: 15px !important;
    line-height: 36px !important;
    height: 36px !important;
    padding: 0px 0.75rem  !important;
    min-height: 0px !important;
    vertical-align: middle;
}

.siteclick-container .button.button-extralarge i {
    font-size: 14px !important;
    margin-right: 0.4rem !important;
}

.siteclick-container .siteclick-buttons-inline .button {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    vertical-align: top;
}
.siteclick-container .siteclick-buttons-justified {
    display:block;
    width: 100%;
}
.siteclick-container .siteclick-buttons-justified:first-child {
    margin-bottom: 0.5rem;
}
.siteclick-container .siteclick-buttons-justified .button,
.siteclick-container .siteclick-buttons-justified .button-placeholder
{
    display:block;
    margin-right: 0px;
    text-align: center;
    width: 100%;
}
.siteclick-buttons .button:last-child,
.siteclick-buttons.siteclick-buttons-justified .button:last-child{
    margin-right: 0px !important;
    margin-bottom: 0px !important;
}
.siteclick-buttons.siteclick-buttons-justified .button,
.siteclick-buttons.siteclick-buttons-justified .button-placeholder{
    margin-bottom: 0.5rem !important;
}
.siteclick-buttons.siteclick-buttons-inline-justified,
.siteclick-components.siteclick-components-inline-justified{
    display: flex;
    justify-content: space-around;
    margin: 0px -5px;
}
.siteclick-container .two-factor-inputs input[type=text] {
    height: 50px !important;
    line-height: 50px !important;
    font-size: 18px !important;
}

.siteclick-buttons.siteclick-buttons-inline-justified .button,
.siteclick-buttons.siteclick-buttons-inline-justified .button-placeholder,
.siteclick-components.siteclick-components-inline-justified > .siteclick-component-placeholder{
    width: 100%;
    margin: 0px 5px !important;
    text-align: center;
}

.siteclick-components-placeholder {
    width: 100%;
    padding: 0px 5px;
}

.siteclick-components-placeholder input {
    width: 100% !important;
}

.siteclick-container .button.button-transparent,
.siteclick-container .button.button-red.button-transparent,
.siteclick-container .button.button-danger.button-transparent,
.siteclick-container .button.button-green.button-transparent,
.siteclick-container .button.button-success.button-transparent,
.siteclick-container .button.button-blue.button-transparent,
.siteclick-container .button.button-primary.button-transparent,
.siteclick-container .button.button-purple.button-transparent,
.siteclick-container .button.button-magic.button-transparent,
.siteclick-container .button.button-grey.button-transparent,
.siteclick-container .button.button-secondary.button-transparent{
    background: var(--sc-color-transparent) !important;
    color: var(--sc-color-text-subtle) !important;
}
.siteclick-container .siteclick-buttons .button.button-transparent:hover,
.siteclick-container .siteclick-buttons .button.button-transparent.active,
.siteclick-container .button.button-transparent.active,
.siteclick-container .button.button-transparent.button-small.active,
.siteclick-container .button.button-transparent.button-medium.active{
    background: var(--sc-color-transparent) !important;
    color: var(--sc-color-white) !important;
}

.siteclick-container .siteclick-buttons .button:hover,
.siteclick-container .siteclick-buttons .button.active,
.siteclick-container .button.active,
.siteclick-container .button.button-small.active,
.siteclick-container .button.button-medium.active{
    background: var(--sc-button-neutral-bg-hover) !important;
    color: var(--sc-button-neutral-text-hover) !important;
}

/* Uitgeschakelde knop: gedempt en niet-klikbaar. Zonder deze regel zag een
   .disabled-knop (o.a. de eerste/laatste-knoppen van parts/pagination) er
   precies zo uit als een werkende. pointer-events alleen op een <a>: een
   uitgeschakelde <div>/<button> houdt zo z'n title-uitleg bij hover. */
.siteclick-container .button.disabled,
.siteclick-container .button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.siteclick-container a.button.disabled {
    pointer-events: none;
}



.siteclick-container .button.button-green,
.siteclick-container .button.button-success {
    background: var(--sc-button-success-bg) !important;
    color: var(--sc-button-success-text) !important;
}
.siteclick-container .siteclick-buttons .button.button-green:hover,
.siteclick-container .siteclick-buttons .button.button-green.active,
.siteclick-container .siteclick-buttons .button.button-success:hover,
.siteclick-container .siteclick-buttons .button.button-success.active,
.siteclick-container .button.button-success:hover,
.siteclick-container .button.button-green.active,
.siteclick-container .button.button-success.active,
.siteclick-container .button.button-green.button-small.active,
.siteclick-container .button.button-green.button-medium.active,
.siteclick-container .button.button-success.button-small.active,
.siteclick-container .button.button-success.button-medium.active{
    background: var(--sc-button-success-bg-hover) !important;
    color: var(--sc-button-success-text) !important;
}


.siteclick-container .button.button-purple,
.siteclick-container .button.button-magic {
    background: var(--sc-button-magic-bg) !important;
    color: var(--sc-button-magic-text) !important;
}
.siteclick-container .siteclick-buttons .button.button-purple:hover,
.siteclick-container .siteclick-buttons .button.button-purple.active,
.siteclick-container .siteclick-buttons .button.button-magic:hover,
.siteclick-container .siteclick-buttons .button.button-magic.active,
.siteclick-container .button.button-magic:hover,
.siteclick-container .button.button-purple.active,
.siteclick-container .button.button-magic.active,
.siteclick-container .button.button-purple.button-small.active,
.siteclick-container .button.button-purple.button-medium.active,
.siteclick-container .button.button-magic.button-small.active,
.siteclick-container .button.button-magic.button-medium.active{
    background: var(--sc-button-magic-bg-hover) !important;
    color: var(--sc-button-magic-text) !important;
}

.siteclick-container .button.button-red,
.siteclick-container .button.button-danger {
    background: var(--sc-button-danger-bg) !important;
    color: var(--sc-button-danger-text) !important;
}
.siteclick-container .siteclick-buttons .button.button-red:hover,
.siteclick-container .siteclick-buttons .button.button-red.active,
.siteclick-container .siteclick-buttons .button.button-danger:hover,
.siteclick-container .siteclick-buttons .button.button-danger.active,
.siteclick-container .button.button-danger:hover,
.siteclick-container .button.button-red.active,
.siteclick-container .button.button-danger.active,
.siteclick-container .button.button-red.button-small.active,
.siteclick-container .button.button-red.button-medium.active,
.siteclick-container .button.button-danger.button-small.active,
.siteclick-container .button.button-danger.button-medium.active{
    background: var(--sc-button-danger-bg-hover) !important;
    color: var(--sc-button-danger-text) !important;
}


.siteclick-container .button.button-text {
    padding-left: 0px !important;
    padding-right: 0px !important;
    background: var(--sc-color-transparent) !important;
    border-radius: 0px !Important;
    margin-right: 0.25rem;
}
.siteclick-container .button.button-text:hover {
    text-decoration: underline !important;

}

.siteclick-container .button.button-grey,
.siteclick-container .button.button-secondary,
.siteclick-container .button.button-icon {
    background: var(--sc-button-neutral-bg) !important;
    color: var(--sc-button-neutral-text) !important;
}

.siteclick-container .siteclick-buttons .button.button-grey:hover,
.siteclick-container .siteclick-buttons .button.button-secondary:hover,
.siteclick-container .siteclick-buttons .button.button-icon:hover,
.siteclick-container .button.button-secondary:hover,
.siteclick-container .button.button-icon:hover{
    background: var(--sc-button-neutral-bg-hover) !important;
    color: var(--sc-button-neutral-text-hover) !important;
}

.siteclick-container .button.button-blue,
.siteclick-container .button.button-primary {
    background: var(--sc-button-primary-bg) !important;
    color: var(--sc-button-primary-text) !important;
}

.siteclick-container .button.button-dark {
    background: var(--sc-color-black) !important;
    color:var(--sc-color-text-subtle) !important;
}
.siteclick-container .button.button-dark:hover,
.siteclick-container .button.button-dark.active{
    color: var(--sc-color-surface) !important;
    background: var(--sc-color-black) !important;
}


.siteclick-container .siteclick-buttons .button.button-blue:hover,
.siteclick-container .siteclick-buttons .button.button-blue.active,
.siteclick-container .siteclick-buttons .button.button-primary:hover,
.siteclick-container .siteclick-buttons .button.button-primary.active,
.siteclick-container .button.button-blue.active,
.siteclick-container .button.button-primary.active,
.siteclick-container .button.button-blue.button-small.active,
.siteclick-container .button.button-blue.button-medium.active,
.siteclick-container .button.button-primary.button-small.active,
.siteclick-container .button.button-primary.button-medium.active,
.siteclick-container .siteclick-buttons .button.button-grey.active,
.siteclick-container .siteclick-buttons .button.button-secondary.active,
.siteclick-container .siteclick-buttons .button.button-icon.active,
.siteclick-container .button.button-grey.active,
.siteclick-container .button.button-secondary.active,
.siteclick-container .button.button-icon.active,
.siteclick-container .button.button-grey.button-small.active,
.siteclick-container .button.button-grey.button-medium.active,
.siteclick-container .button.button-secondary.button-small.active,
.siteclick-container .button.button-secondary.button-medium.active,
.siteclick-container .button.button-icon.button-small.active,
.siteclick-container .button.button-icon.button-medium.active,
.siteclick-container .siteclick-form-radiobuttons input:checked + label.button.button-grey,
.siteclick-container .siteclick-form-checkboxes input:checked + label.button.button-grey {
    background: var(--sc-button-primary-bg-hover) !important;
    color: var(--sc-button-primary-text) !important;
}



/* Semantic button aliases */
.siteclick-container .button.button-secondary.active,
.siteclick-container .button.button-icon.active,
.siteclick-container .button.button-secondary.button-small.active,
.siteclick-container .button.button-secondary.button-medium.active,
.siteclick-container .button.button-icon.button-small.active,
.siteclick-container .button.button-icon.button-medium.active {
    background: var(--sc-button-neutral-bg-hover) !important;
    color: var(--sc-button-neutral-text-hover) !important;
}

.siteclick-container .button i {
    font-size: 0.8em;
    display: inline-flex;
    align-items: center;
    position:relative;
    left: 0px;
}
.siteclick-container .button:hover i {
    left: 2px;
}
.siteclick-container .button-icon-text i {
    margin-right: 0.4rem !important;
}
.siteclick-container .button-icon-text.button-small i {
}

.siteclick-container .button-table {
    display: table;
    vertical-align: top;
}

.siteclick-container  .button-table-column {
    display: table-cell;
    padding: 0px 0.25rem;
    vertical-align: middle;
}

.siteclick-container  .button-table-column img{
    max-height: 20px;
}

.siteclick-container  .button-table-column:first-child {
    padding-left: 0px;
}

.siteclick-container .button-table-column:last-child {
    padding-right: 0px;
}



.siteclick-container .list-archive-item.bg-green-light-1,
.siteclick-container .card.bg-green-light-1,
.siteclick-container .bg-green-light-1{background: var(--sc-color-green-soft) !important;}
.siteclick-container .list-archive-item.bg-green-light-1,
.siteclick-container .card.bg-green-light-1 {border-color: var(--sc-color-green-soft) !important;}
.siteclick-container .list-archive-item.bg-red-light-1,
.siteclick-container .card.bg-red-light-1,
.siteclick-container .bg-red-light-1{background: var(--sc-color-red-soft) !important;}
.siteclick-container .list-archive-item.bg-red-light-1,
.siteclick-container .card.bg-red-light-1,
.siteclick-container .bg-red-light-1 {border-color: var(--sc-color-red-soft) !important;}

/** TITLES & TEXTS **/
.siteclick-container .siteclick-title-1 {font-size: 2rem;line-height: 1.1em;font-weight: 500;}
.siteclick-container .siteclick-title-2 {font-size: 1.5rem;line-height: 1.1em;font-weight: 500;}
.siteclick-container .siteclick-title-3 {font-size: 1.25rem;line-height: 1.1em;font-weight: 500;}
.siteclick-container .siteclick-title-4 {font-size: 1.15rem;line-height: 1.1em;font-weight: 500;}
.siteclick-container .siteclick-title-5 {font-size: 1rem;line-height: 1.1em;font-weight: 500;}
.siteclick-container .siteclick-title-6 {font-size: 0.9rem;line-height: 1.1em;font-weight: 500;}
.siteclick-container .siteclick-text-1 {font-size: 1.4rem;line-height: 1.5em;font-weight: 400;}
.siteclick-container .siteclick-text-2 {font-size: 1.3rem;line-height: 1.5em;font-weight: 400;}
.siteclick-container .siteclick-text-3 {font-size: 1.2rem;line-height: 1.5em;font-weight: 400;}
.siteclick-container .siteclick-text-4 {font-size: 1.1rem;line-height: 1.5em;font-weight: 400;}
.siteclick-container .siteclick-text-5 {font-size: 1rem;line-height: 1.5em;font-weight: 400;}
.siteclick-container .siteclick-text-6 {font-size: 0.9rem;line-height: 1.5em;font-weight: 400;}
.siteclick-container .siteclick-text-7 {font-size: 0.8rem;line-height: 1.25em;font-weight: 400;}


.siteclick-title small {
    font-size: 0.6em;
}

.text-left {text-align: left !important;}
.text-center {text-align: center;}
.text-right {text-align: right;}




.siteclick-label {
    color: var(--sc-color-text);
    font-weight: 500 !important;
}
.siteclick-description {
    color: var(--sc-color-text-subtle) !important;
    font-size: 11px;
}

/** INPUTS **/
.siteclick-container input[type=color],
.siteclick-container input[type=date],
.siteclick-container input[type=datetime-local],
.siteclick-container input[type=datetime],
.siteclick-container input[type=email],
.siteclick-container input[type=month],
.siteclick-container input[type=number],
.siteclick-container input[type=password],
.siteclick-container input[type=search],
.siteclick-container input[type=tel],
.siteclick-container input[type=text],
.siteclick-container input[type=time],
.siteclick-container input[type=url],
.siteclick-container input[type=week],
.siteclick-container textarea,
.siteclick-container select,
.siteclick-container .wp-editor-area {
    box-shadow: none;
    background: var(--sc-color-panel-bg);
    border: 1px solid var(--sc-color-surface-alt);
    border-radius: 5px;
    padding: 0 0.6rem;
    font-size: 1rem !important;
    outline: none;
    font-weight: 500;
    color: var(--sc-color-text) !important;
    font-family: 'Rubik', sans-serif;
    -webkit-appearance: none;
    margin: 0px !important;
    height: 32px;
    vertical-align: top;
    min-height: auto !important;
    line-height: 1em !important;
}
.siteclick-container .siteclick-form-component-variant-dark input[type=text],
.siteclick-container .siteclick-form-component-variant-dark input[type=password],
.siteclick-container .siteclick-form-component-variant-dark textarea{
    color: var(--sc-color-white) !important;
    background: var(--sc-color-text);
    border: 1px solid var(--sc-color-text-soft);
}
.siteclick-container .wp-editor-area,
.siteclick-container textarea {
    font-weight: 400;
    line-height: 1.5em !important;
}
.siteclick-container input.siteclick-page-slug::placeholder {
    color: var(--sc-color-primary);
}


::-webkit-datetime-edit {
    line-height: 1.85714286
}

input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus {
    border-color: var(--sc-color-primary);
}

input[type=email],input[type=url] {
    direction: ltr
}

.siteclick-container input::placeholder,
.siteclick-container textarea::placeholder,
.siteclick-container select::placeholder {
    color: var(--sc-color-text-muted) !Important;
}

/** SMALL **/
.siteclick-container .siteclick-form-component-small input[type=color],
.siteclick-container .siteclick-form-component-small input[type=date],
.siteclick-container .siteclick-form-component-small input[type=datetime-local],
.siteclick-container .siteclick-form-component-small input[type=datetime],
.siteclick-container .siteclick-form-component-small input[type=email],
.siteclick-container .siteclick-form-component-small input[type=month],
.siteclick-container .siteclick-form-component-small input[type=number],
.siteclick-container .siteclick-form-component-small input[type=password],
.siteclick-container .siteclick-form-component-small input[type=search],
.siteclick-container .siteclick-form-component-small input[type=tel],
.siteclick-container .siteclick-form-component-small input[type=text],
.siteclick-container .siteclick-form-component-small input[type=time],
.siteclick-container .siteclick-form-component-small input[type=url],
.siteclick-container .siteclick-form-component-small input[type=week],
.siteclick-container .siteclick-form-component-small textarea,
.siteclick-container .siteclick-form-component-small select,
.siteclick-container .siteclick-form-component-small .wp-editor-area{
    border: 2px solid var(--sc-color-border);
    background-color: var(--sc-color-border);
    font-size: 0.85rem !important;
    padding: 0 0.4rem !important;
    line-height: 1em !important;
    height: 2rem;
}
.siteclick-container .siteclick-form-component-small textarea,
.siteclick-container .siteclick-form-component-small .wp-editor-area{
    line-height: 1.3em !important;
}
.siteclick-container .siteclick-form-component-small input::placeholder,
.siteclick-container .siteclick-form-component-small textarea::placeholder,
.siteclick-container .siteclick-form-component-small select::placeholder {
    color: var(--sc-color-text-muted) !Important;
}
.siteclick-container .siteclick-form-component-small textarea:not(.autogrow) {
    height: 3rem !important;
}

.siteclick-container .siteclick-form-component-small input.siteclick-page-slug {
    font-size: 8px !important;
}

.siteclick-container .siteclick-form-component-small textarea,
.siteclick-container .siteclick-form-component-small .wp-editor-area{
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    height: 2rem;
}

/** SMALL **/
.siteclick-container .siteclick-form-component-large input[type=color],
.siteclick-container .siteclick-form-component-large input[type=date],
.siteclick-container .siteclick-form-component-large input[type=datetime-local],
.siteclick-container .siteclick-form-component-large input[type=datetime],
.siteclick-container .siteclick-form-component-large input[type=email],
.siteclick-container .siteclick-form-component-large input[type=month],
.siteclick-container .siteclick-form-component-large input[type=number],
.siteclick-container .siteclick-form-component-large input[type=password],
.siteclick-container .siteclick-form-component-large input[type=search],
.siteclick-container .siteclick-form-component-large input[type=tel],
.siteclick-container .siteclick-form-component-large input[type=text],
.siteclick-container .siteclick-form-component-large input[type=time],
.siteclick-container .siteclick-form-component-large input[type=url],
.siteclick-container .siteclick-form-component-large input[type=week],
.siteclick-container .siteclick-form-component-large textarea,
.siteclick-container .siteclick-form-component-large select,
.siteclick-container .siteclick-form-component-large .wp-editor-area{
    font-size: 15px !important;
    padding: 0 1rem !important;
    line-height: 1em !important;
    height: 36px !important;
}
.siteclick-container .siteclick-form-component-large textarea,
.siteclick-container .siteclick-form-component-large .wp-editor-area{
    line-height: 1.3em !important;
}
.siteclick-container .siteclick-form-component-large textarea:not(.autogrow) {
    height: 3rem !important;
}

.siteclick-container .siteclick-form-component-large input.siteclick-page-slug {
    font-size: 8px !important;
}

.siteclick-container .siteclick-form-component-large textarea,
.siteclick-container .siteclick-form-component-large .wp-editor-area{
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    height: 2rem;
}

.siteclick-container .siteclick-form-radiobuttons input,
.siteclick-container .siteclick-form-checkboxes input{
    display: none;
}
.siteclick-container .siteclick-form-radiobuttons .button,
.siteclick-container .siteclick-form-checkboxes .button{
    font-weight: 400;
}

.siteclick-form-select-radiobuttons {
    position: relative;
}

.siteclick-form-select-radiobuttons-trigger {
    width: 100%;
    border: 0;
    background: var(--sc-color-transparent);
    padding: 0;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.siteclick-form-select-radiobuttons-trigger-content {
    flex: 1;
    min-width: 0;
}

.siteclick-form-select-radiobuttons-dropdown {
    display: none;
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    top: calc(100% + 0px);
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
    background: var(--sc-color-surface-alt);
    border-radius: 5px;
    min-width: 300px;
}

.siteclick-form-select-radiobuttons.is-open .siteclick-form-select-radiobuttons-dropdown {
    display: block;
}

.siteclick-form-select-radiobuttons-option {
    display: block;
    cursor: pointer;
}

.siteclick-form-select-radiobuttons-option input[type="radio"],
.siteclick-form-select-radiobuttons-trigger input[type="radio"] {
    display: none !important;
}

.siteclick-form-select-radiobuttons-option.is-selected {
    border-radius: 8px;
    background: var(--sc-overlay-subtle);
}

.siteclick-form-select-radiobuttons-option + .siteclick-form-select-radiobuttons-option {
    margin-top: 4px;
}

button.siteclick-form-select-radiobuttons-trigger {
    background: var(--sc-color-surface);
    border-radius: 5px;
}

.siteclick-form-select-radiobuttons.siteclick-form-component-variant-dark button.siteclick-form-select-radiobuttons-trigger {
    background: var(--sc-color-black) !important;
    color: var(--sc-color-text-subtle) !important;
}



.siteclick-container select {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij4KICAgIDxwYXRoIHN0eWxlPSJzdHJva2U6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztmaWxsOiMwMDA7ZmlsbC1vcGFjaXR5OjEiIGQ9Ik03NC42NjggMTA2LjY2OCAxMjggMTYwbDUzLjMzMi01My4zMzJabTAgMCIvPgo8L3N2Zz4K);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
    display:block;
}


input[type=checkbox],input[type=radio] {
    border: 2px solid var(--sc-color-border);
    border-radius: 5px;
    background: var(--sc-color-panel-bg);
    color: var(--sc-color-text-muted);
    clear: none;
    cursor: pointer;
    display: inline-block;
    line-height: 0;
    height: 16px;
    margin: -.25rem .25rem 0 0;
    outline: 0;
    padding: 0!important;
    text-align: center;
    vertical-align: middle;
    width: 16px;
    min-width: 1rem;
    -webkit-appearance: none;
    box-shadow: none;
    transition: none;
}

input[type=radio]:checked+label:before {
    color: var(--sc-color-text-muted)
}


input[type=checkbox]:checked::before {
    font-family: "siteclick" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\e106';
    font-size: 8px;
    height: 12px;
    width: 12px;
    background: var(--sc-color-panel-bg);
    border-radius: 5px;
    color: var(--sc-color-primary);
    margin: -2px;
    border: 2px solid var(--sc-color-primary);
    line-height: 12px;
}
.siteclick-input-with-button {
    position:relative;
}
.siteclick-form-component-variant-dark .button.toggle-password {
    background: var(--sc-color-dark-soft) !important;
    color: var(--sc-color-white);
}
.siteclick-input-with-button .button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.siteclick-input-with-button.siteclick-filter-search .button {
}

.siteclick-input-with-button .submit {
    position:absolute;
    right: 0px;
    top: 0px;
    height: 20px;
    line-height: 100%;
    margin: 0px !important;
    padding: 0px !important;
    width: 20px;
    background: var(--sc-color-surface-alt);
    margin: 6px !important;
    border-radius: 5px;
    font-size: 9px;
    color: var(--sc-color-text-muted);
    cursor:pointer;
    transform: none !important;
}
.siteclick-input-with-button .submit:hover i {
    left: 0px !important;
}

.siteclick-form-component label,
.siteclick-form-component .form-label{
    display: block;
    margin-bottom: 0px;
    font-size: 0.9rem;
    font-weight: 500;
}
.siteclick-form-component label span.required,
.siteclick-form-component .form-label span.required {
    opacity: 0.5;
}

.siteclick-form-component .siteclick-form-image-in {
    display: table;
    width: 100%;
    table-layout: fixed;
    vertical-align: middle;
}

.siteclick-form-component .siteclick-form-image-visual,
.siteclick-form-component .siteclick-form-image-title {
    display: table-cell;
    vertical-align: middle;
}

.siteclick-form-component .siteclick-form-image-visual {
    width: 60px;
}

.siteclick-form-component .siteclick-form-image-visual-in {
    height: 50px;
    width: 50px;
    background-size: cover;
    background-color: var(--sc-color-border);
    border-radius: 5px;
}



.siteclick-form-component input,
.siteclick-form-component select,
.siteclick-form-component textarea,
.siteclick-form-component .wp-editor-area{
    width: 100% !important;
    min-width: 100% !Important;
}
.siteclick-form-component.siteclick-form-component-small .acf-button-group label {
    font-size: 9px;
    line-height: 10px;
    padding: 0.25rem 0.5rem;
    vertical-align: top;
    margin: 0px !important;
    top: 0px !important;
    margin-top: 0px !important;
    border-color: var(--sc-color-transparent) !important;
    margin-right: 2px !important;
}

.siteclick-form-component.siteclick-form-component-small .acf-button-group {
    vertical-align: top;
}
.acf-button i {
    display: none !important;
}






.siteclick-container textarea,
.siteclick-form-component .wp-editor-area {
    width: 100%;
    padding: 0.5rem 0.5rem 0.5rem;
    height: 4.4rem;
    resize: vertical;
    line-height: 1.2em !important;
    height: auto;
}

.siteclick-container textarea.autogrow,
.siteclick-form-component .wp-editor-area.autogrow{
    min-height: auto;
    height: auto;
    overflow: hidden;
    resize: none;
}


.siteclick-container .transparent-input {
    border: 0px !important;
    background: var(--sc-color-transparent) !important;
    font-size: inherit !important;
    line-height: inherit !important;
    padding: 0px !important;
    margin: 0px !important;
    border-radius: 0px !important;
}

.siteclick-container .siteclick-form-component-small input[type=checkbox]:focus,
.siteclick-container .siteclick-form-component-small input[type=color]:focus,
.siteclick-container .siteclick-form-component-small input[type=date]:focus,
.siteclick-container .siteclick-form-component-small input[type=datetime-local]:focus,
.siteclick-container .siteclick-form-component-small input[type=datetime]:focus,
.siteclick-container .siteclick-form-component-small input[type=email]:focus,
.siteclick-container .siteclick-form-component-small input[type=month]:focus,
.siteclick-container .siteclick-form-component-small input[type=number]:focus,
.siteclick-container .siteclick-form-component-small input[type=password]:focus,
.siteclick-container .siteclick-form-component-small input[type=radio]:focus,
.siteclick-container .siteclick-form-component-small input[type=search]:focus,
.siteclick-container .siteclick-form-component-small input[type=tel]:focus,
.siteclick-container .siteclick-form-component-small input[type=text]:focus,
.siteclick-container .siteclick-form-component-small input[type=time]:focus,
.siteclick-container .siteclick-form-component-small input[type=url]:focus,
.siteclick-container .siteclick-form-component-small input[type=week]:focus,
.siteclick-container .siteclick-form-component-small select:focus,
.siteclick-container .siteclick-form-component-small textarea:focus,
.siteclick-container .siteclick-form-component-small input.active,
.siteclick-container .siteclick-form-component-small textarea.active,
.siteclick-container .siteclick-form-component-small .wp-editor-area.mce-edit-focus{
    border-color: var(--sc-color-surface-alt) !important;
    background: var(--sc-color-surface-alt) !important;
}
.siteclick-container input.siteclick-page-slug,
.siteclick-container input.siteclick-page-slug:focus,
.siteclick-container input.siteclick-page-slug:active {
    text-decoration: none;
    font-weight: 500;
    color: var(--sc-color-primary);
    line-height: 22px !important;
    height: 18px !important;
    margin: 0px !important;
    padding: 0px !important;
    min-height: 22px;
    vertical-align: top !important;
    font-family: monospace !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    padding: 5px !important;
    background: var(--sc-color-primary-soft) !important;
    border-color: var(--sc-color-primary-soft) !important;
    color: var(--sc-color-primary) !important;
    font-weight: 600 !important;
}
.siteclick-container input.siteclick-page-slug::placeholder {
    font-weight: 400 !important;
    color: var(--sc-color-primary) !important;
}

.siteclick-container .siteclick-form-component input:-webkit-autofill,
.siteclick-container .siteclick-form-component input:-webkit-autofill:hover,
.siteclick-container .siteclick-form-component input:-webkit-autofill:focus,
.siteclick-container .siteclick-form-component input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--sc-color-panel-bg) inset !important;
    -webkit-text-fill-color: var(--sc-color-text) !important;
}

.siteclick-container .siteclick-form-component.siteclick-form-component-variant-dark input:-webkit-autofill,
.siteclick-container .siteclick-form-component.siteclick-form-component-variant-dark input:-webkit-autofill:hover,
.siteclick-container .siteclick-form-component.siteclick-form-component-variant-dark input:-webkit-autofill:focus,
.siteclick-container .siteclick-form-component.siteclick-form-component-variant-dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--sc-color-dark-soft) inset !important;
    -webkit-text-fill-color: var(--sc-color-white) !important;
}




/*** COMPONENTS ***/
.siteclick-component {

}
.siteclick-component-slug div {
    display:inline-block;
    max-width: 100%;
    text-decoration: none;
    line-height: 18px !important;
    height: 18px !important;
    margin: 0px !important;
    min-height: 18px;
    vertical-align: middle !important;
    font-family: monospace !important;
    font-size: 8px !important;
    background: var(--sc-color-primary-soft) !important;
    border-color: var(--sc-color-primary-soft) !important;
    color: var(--sc-color-primary) !important;
    font-weight: 600 !important;
    border-radius: 5px;
    padding: 0px 5px !important;
}
.siteclick-component-slug span {
    margin: 0px !important;
    padding: 0px !important;
    max-width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}
.siteclick-component-date .date-item {
    display: inline-block;
    vertical-align: top;
}

.siteclick-component-date .date-item-in {
    color: var(--sc-color-text-subtle);
    font-weight: 500;
    border-radius: 5px;
    padding: 4px 7px;
    font-size: 9px;
    line-height: 10px;
    display: inline-block;
    background: var(--sc-color-surface-alt);
}
.siteclick-component-date .date-item-in i {
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    margin-top: -1px;
}

.siteclick-component-category .category-item {
    display: inline-block;
    vertical-align: top;
}

.siteclick-component-category .category-item-in {
    color: var(--sc-color-text-subtle);
    font-weight: 500;
    border-radius: 5px;
    padding: 4px 7px;
    font-size: 9px;
    line-height: 10px;
    display: inline-block;
    background: var(--sc-color-surface-alt);
    margin: 0px 0.2rem 0.2rem 0;
}
.siteclick-component-category .category-item-in i {
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    margin-top: -1px;
}

.siteclick-component-child-qty .child-qty-item {
    display: inline-block;
    vertical-align: top;
}

.siteclick-component-child-qty .child-qty-item-in {
    color: var(--sc-color-white);
    font-weight: 500;
    border-radius: 5px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    line-height: 10px;
    display: inline-block;
    background: var(--sc-color-primary);
}
.siteclick-component-child-qty .child-qty-item-empty .child-qty-item-in {
    background: var(--sc-color-surface-alt) !important;
    color: var(--sc-color-text-subtle);
}
.siteclick-component-child-qty .child-qty-item-in i {
    margin-right: 0.25rem;
    display: inline-flex;
    align-items: center;
    margin-top: -1px;
}


.siteclick-component-layout .layout-item .layout-item-visual {
    position: absolute;
    top: 2px;
    left: 3px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
    height: 100%;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background-color: var(--sc-color-surface-alt);
}

.siteclick-component-layout .layout-item {height: 20px;line-height: 20px;position: relative;border-radius: 5px;text-align: left;font-size: 0.8rem;font-weight: 400;color: var(--sc-color-text-muted);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;background: var(--sc-color-surface);padding-left: 26px;max-width: 100%;display: inline-block;padding-right: 0.5rem;vertical-align: middle;}

.var-label {
    display:block;
    vertical-align: top;
    height: 14px;
}
.var-label span {
    font-family: monospace;
    font-weight: 700 !important;
    background: var(--sc-color-primary-soft-strong) !important;
    color: var(--sc-color-primary) !important;
    border-color: var(--sc-color-primary-soft) !important;
    display: inline-block;
    padding: 3px 5px;
    border-radius: 5px !important;
    line-height: 1em !important;
    font-size: 8px !important;
    vertical-align: top;
}

.user-item {
    position: relative;
    line-height: 18px;
    height: 18px;
}

.user-item-visual, .user-item-name {
}

.user-item-visual {
    width: 18px;
    aspect-ratio: 1/1;
    overflow: hidden;
    position: absolute;
    left: 0;
    border-radius: 50%;
}

.user-item-visual-in {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.user-item-name {
    padding-left: 2rem;
    font-size: 0.9rem;
    color: var(--sc-color-primary);
    font-weight: 500;
}

.user-item-name span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.address-in {
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5em;
    font-size: 0.9rem;
    color: var(--sc-color-text-muted);
    border-radius: 5px;
}
.address-in i {
    position: absolute;
    color: var(--sc-color-primary);
    left: 0px;
    top: 2px;
}

.list-in .list-item,
.siteclick-component-type .type{
    position: relative;
    line-height: 1.5em;
    font-size: 0.9rem;
    color: var(--sc-color-text-muted);
    border-radius: 5px;
    display: table;
    width: 100%;
}
.list-in .list-item-icon,
.list-in .list-item-text,
.siteclick-component-type .type-icon-text .type-icon-text-icon,
.siteclick-component-type .type-icon-text .type-icon-text-text{
    display: table-cell;
    vertical-align: top;
}
.list-item-icon,
.siteclick-component-type .type-icon-text .type-icon-text-icon{
    width: 1.25rem;
    padding-right: 4px;
    line-height: 1.5em;
    font-size: 0.9rem;
    color: var(--sc-color-primary);
}
.list-item .list-item-icon img,
.siteclick-component-type .type-icon-text .type-icon-text-icon img{
    max-width: 100%;
}

.siteclick-component-type .type.type-image img {
    max-height: 1rem;
    max-width: 100%;
}

.siteclick-component-type .type {
    font-weight: 500;
    color: var(--sc-color-primary) !important;
}


.score-stars-bg i,
.score-stars-score i{
    vertical-align: middle;
    width: 13px;
    font-size: 1rem;
    color: var(--sc-color-surface-alt);
    margin-right: -3px;
    position: relative;
    top: -2px;
}

.score-stars-bg,
.score-stars-score{
    white-space: nowrap;
    display: block;
    height: 18px;
}

.score-stars-score {
    position: absolute;
    left: 0;
    overflow: hidden;
    top: 0px;
    line-height: 18px;
}

.score-stars {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    padding-right: 0.5rem;
}

.score-stars-score i {
    color: var(--sc-color-primary);
}

.score-text {
    display: inline-block;
    vertical-align: middle;
    line-height: 13px;
    font-size: 10px;
    color: var(--sc-color-text-subtle);
}

.score-in {
    line-height: 18px;
    vertical-align: middle;
}

.logo-item {
    height: 30px;
    display: inline-block;
}

.logo-item img {
    max-height: 100%;
}

.siteclick-message {
    font-weight: 500;
    padding: 0.5rem;
    text-align: center;
    background: var(--sc-color-surface);
    color: var(--sc-color-text-muted);
    font-size: 0.9rem;
}
.siteclick-message-empty {
    display:none;
}

/** TOOLKIT **/
.siteclick-toolkit-title {
    margin-top: 1rem;
    background: var(--sc-color-surface);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-weight: 500;
    margin: 2rem 0px;
}

/*** COUNT ***/
.siteclick-container span.count {
    border-radius: 10px;
    height: 15px;
    width: 15px;
    text-align: center;
    color: var(--sc-color-white);
    background: var(--sc-color-dark);
    vertical-align: middle;
    line-height: 16px;
    font-size: 7.75px;
    font-weight: 700;
    display: inline-block;
}
.siteclick-container span.count.count-yellow {
    background: var(--sc-color-yellow) !important;
    margin-left: 0.5rem;
    color: var(--sc-color-text);
}
.siteclick-container span.count-large {
    width: 22px;
    height: 22px;
    font-size: 11px;
    line-height: 22px;
    border-radius: 100%;
}

.siteclick-container .admin-sidebar-row.admin-sidebar-row-magic span.count {
    background: var(--sc-color-purple);}

/** SiteClick Bar **/
.shared-placeholder.shared-placeholder-header {
    height: 40px;
    background: var(--sc-color-black);
}
.siteclick-container .siteclick-bar-header{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 10000000003;
    height: 40px;
    line-height: 40px;
}
.siteclick-container .siteclick-bar-row-in {
    display: table;
    table-layout: auto;
    width: 100%;
}

/* Vol zwart (feedback Jeroen): --sc-color-dark is in het lichte thema #202123
   en gaf een grijze balk die na de zwarte head-placeholder zichtbaar omsloeg.
   De topbar is in beide thema's zwart, dus de black-token — niet de
   thema-afhankelijke dark-token. */
.siteclick-container .siteclick-bar-header {
    background: var(--sc-color-black);
    color: var(--sc-color-primary-soft);
}

.siteclick-container .siteclick-bar-nav a,
.siteclick-container .siteclick-bar-nav-group-toggle{
    color: var(--sc-color-text-subtle);
    font-weight: 400;
    text-decoration: none;
    margin: 0px;
    display: inline-block;
    line-height: 30px;
    padding: 0px 7px;
    vertical-align: top;
    font-size: 11px;
    height: 40px;
    background: var(--sc-color-transparent);
}
.siteclick-container .siteclick-bar-nav-group-dropdown .siteclick-bar-nav-group-toggle {
    height: 40px;
    line-height: 40px;
}

.siteclick-container .siteclick-bar-nav-group-responsive .siteclick-bar-nav-group-toggle {
    font-size: 18px !important;
    cursor: pointer;
}

.siteclick-container .siteclick-bar-nav-group-dropdown .siteclick-bar-nav-group-toggle {
    cursor: pointer;
}
.siteclick-container .siteclick-bar-column {
    display: table-cell;
    vertical-align: middle;
}
.siteclick-container .siteclick-bar-header .column-2 {
    text-align: right;
}
.siteclick-container .siteclick-bar-main-logo img {
    max-width: 100px;
    max-height: 18px;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.75;
}
.siteclick-container .siteclick-bar-header .siteclick-bar-column.column-1 a:hover img {
    opacity: 1;
}

.siteclick-container .siteclick-bar-header .column-2 a img{
    max-height: 10px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
}
.siteclick-container .siteclick-bar-header .column-1 a .toggle,
.siteclick-container .siteclick-bar-header .column-2 a .toggle{
    display:inline-block;
}
.siteclick-container .siteclick-bar-nav {
    padding: 0px 5px;
    display: inline-block;
    vertical-align: top;
}
.siteclick-container .siteclick-bar-nav a:hover,
.siteclick-container .siteclick-bar-nav a.active,
.siteclick-container .siteclick-bar-nav-group-toggle:hover,
.siteclick-container .active .siteclick-bar-nav-group-toggle {
    color: var(--sc-color-white);
    opacity: 1;
}

.siteclick-container .siteclick-bar-main-logo,
.siteclick-container .siteclick-bar-main-toggles,
.siteclick-container .siteclick-bar-main-nav {
    display: inline-block;
    vertical-align: top;
}

.siteclick-container .siteclick-bar-main-toggle {
    display: inline-block;
    vertical-align: top;
    height: 30px;
    width: auto;
    background: var(--sc-color-transparent);
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    position: relative;
    color: var(--sc-color-text-muted);
    font-size: 11px;
    padding: 0px 7px;
    border: 0px;
    overflow: hidden;
}

.siteclick-bar-main-toggle-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: -1;
    background-position: center;
}

.siteclick-container .siteclick-bar-main-toggle.no-link {
    cursor: not-allowed !important;
}
.siteclick-container .siteclick-bar-main-toggle.no-link:hover,
.siteclick-container .siteclick-bar-main-toggle.no-link:hover *{
    color: var(--sc-color-text-muted) !important;
    opacity: inherit !important;
}

.siteclick-container .siteclick-bar-main-nav .siteclick-bar-nav {padding: 0px;}

body.siteclick-bar-main-nav-open .siteclick-bar-main-nav .siteclick-bar-nav {
    top: 0px;
}

.siteclick-bar-nav-seperator {
    display: inline-block;
    width: 1px;
    height: 30px;
    background: var(--sc-color-black);
    vertical-align: middle;
    margin-top: 0px;
    margin: 0px 5px;
}

.siteclick-container .siteclick-bar .count {vertical-align: middle;top: -1px;position: relative;}

.siteclick-container .siteclick-bar-main-toggle:hover {
    background: var(--sc-color-dark);
    color: var(--sc-color-white);
    opacity: 1;
}
.siteclick-container .siteclick-bar-main-logo a {
    height: 40px;
    display: inline-block;
    padding: 0px 10px;
    padding-right: 0px;
    padding-left: 14px;
}

.siteclick-container .siteclick-bar-main-image {
    border-radius: 2px;
    margin: 0;
    width: 20px;
    height: 20px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-color: var(--sc-color-panel-bg);
}

.siteclick-container [data-siteclick-bar-nav-toggle="user"] .siteclick-bar-main-image {
    border-radius: 50%;
}

.siteclick-container [data-siteclick-bar-nav-main-active="website"] .siteclick-bar-nav-framework,
.siteclick-container [data-siteclick-bar-nav-main-active="template"] .siteclick-bar-nav-framework {
    top: 0px;
}

.siteclick-container [data-siteclick-bar-nav-main-active="website"] [data-siteclick-bar-nav-toggle]:not([data-siteclick-bar-nav-toggle="website"]) .siteclick-bar-main-toggle-text .count,
.siteclick-container [data-siteclick-bar-nav-main-active="template"] [data-siteclick-bar-nav-toggle]:not([data-siteclick-bar-nav-toggle="template"]) .siteclick-bar-main-toggle-text .count,
.siteclick-container [data-siteclick-bar-nav-main-active="reseller"] [data-siteclick-bar-nav-toggle]:not([data-siteclick-bar-nav-toggle="reseller"]) .siteclick-bar-main-toggle-text .count,
.siteclick-container [data-siteclick-bar-nav-main-active="admin"] [data-siteclick-bar-nav-toggle]:not([data-siteclick-bar-nav-toggle="admin"]) .siteclick-bar-main-toggle-text .count,
.siteclick-container [data-siteclick-bar-nav-main-active="user"] [data-siteclick-bar-nav-toggle]:not([data-siteclick-bar-nav-toggle="user"]) .siteclick-bar-main-toggle-text .count{
    transform: scale(1);
}
.siteclick-container [data-siteclick-bar-nav-main-active="website"] [data-siteclick-bar-nav-toggle="website"] .siteclick-bar-main-toggle-text .siteclick-bar-main-count,
.siteclick-container [data-siteclick-bar-nav-main-active="template"] [data-siteclick-bar-nav-toggle="template"] .siteclick-bar-main-toggle-text .siteclick-bar-main-count,
.siteclick-container [data-siteclick-bar-nav-main-active="reseller"] [data-siteclick-bar-nav-toggle="reseller"] .siteclick-bar-main-toggle-text  .siteclick-bar-main-count,
.siteclick-container [data-siteclick-bar-nav-main-active="admin"] [data-siteclick-bar-nav-toggle="admin"] .siteclick-bar-main-toggle-text .siteclick-bar-main-count,
.siteclick-container [data-siteclick-bar-nav-main-active="user"] [data-siteclick-bar-nav-toggle="user"] .siteclick-bar-main-toggle-text  .siteclick-bar-main-count{
    width: 0px;
}
.siteclick-container [data-siteclick-bar-nav-main-active="website"] [data-siteclick-bar-nav-toggle="website"] .siteclick-bar-main-toggle-text .count,
.siteclick-container [data-siteclick-bar-nav-main-active="template"] [data-siteclick-bar-nav-toggle="template"] .siteclick-bar-main-toggle-text .count,
.siteclick-container [data-siteclick-bar-nav-main-active="organization"] [data-siteclick-bar-nav-toggle="organization"] .siteclick-bar-main-toggle-text  .count,
.siteclick-container [data-siteclick-bar-nav-main-active="admin"] [data-siteclick-bar-nav-toggle="admin"] .siteclick-bar-main-toggle-text .count,
.siteclick-container [data-siteclick-bar-nav-main-active="user"] [data-siteclick-bar-nav-toggle="user"] .siteclick-bar-main-toggle-text  .count{
    transform: scale(0);
}
.siteclick-container [data-siteclick-bar-nav-main-active="website"] [data-siteclick-bar-nav-toggle="website"],
.siteclick-container [data-siteclick-bar-nav-main-active="template"] [data-siteclick-bar-nav-toggle="template"],
.siteclick-container [data-siteclick-bar-nav-main-active="organization"] [data-siteclick-bar-nav-toggle="organization"],
.siteclick-container [data-siteclick-bar-nav-main-active="admin"] [data-siteclick-bar-nav-toggle="admin"],
.siteclick-container [data-siteclick-bar-nav-main-active="user"] [data-siteclick-bar-nav-toggle="user"],
.siteclick-container .siteclick-bar-column .siteclick-bar-main-toggle{
    color: var(--sc-color-white);
    background: var(--sc-color-text-soft-bg);
    opacity: 1;
}

.siteclick-container [data-siteclick-bar-nav-main-active="website"]  [data-siteclick-bar-nav-toggle]:not([data-siteclick-bar-nav-toggle="website"]) .siteclick-bar-main-toggle-navs,
.siteclick-container [data-siteclick-bar-nav-main-active="template"]  [data-siteclick-bar-nav-toggle]:not([data-siteclick-bar-nav-toggle="template"]) .siteclick-bar-main-toggle-navs,
.siteclick-container [data-siteclick-bar-nav-main-active="organization"]  [data-siteclick-bar-nav-toggle]:not([data-siteclick-bar-nav-toggle="organization"]) .siteclick-bar-main-toggle-navs,
.siteclick-container [data-siteclick-bar-nav-main-active="admin"]  [data-siteclick-bar-nav-toggle]:not([data-siteclick-bar-nav-toggle="admin"]) .siteclick-bar-main-toggle-navs,
.siteclick-container [data-siteclick-bar-nav-main-active="user"]  [data-siteclick-bar-nav-toggle]:not([data-siteclick-bar-nav-toggle="user"]) .siteclick-bar-main-toggle-navs{
    width:0px;
}

.siteclick-container .siteclick-bar-main-toggle-text,
.siteclick-container .siteclick-bar-main-toggle-navs {
    display: block;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 400;
    line-height: 30px;
    float: left;
    height: 30px;
    color: inherit;
    text-decoration:none;
}

.siteclick-container .siteclick-bar-main-toggle .siteclick-bar-nav a {
    margin-bottom: 0px;
    margin-top: 1px;
}

.siteclick-container .siteclick-bar-main-toggle .siteclick-bar-nav a:hover,
.siteclick-container .siteclick-bar-main-toggle .siteclick-bar-nav a.active {
    color: var(--sc-color-white);
    opacity: 1;
}
.siteclick-container .siteclick-bar-main-image,
.siteclick-container .siteclick-bar-main-text,
.siteclick-container .siteclick-bar-main-count {
    display: inline-block;
    vertical-align: middle;
}
.siteclick-container .siteclick-bar-main-count {
    width: 20px;
    padding-left: 2px;
}
.siteclick-container .siteclick-bar-main-toggle img {
    width: 100%;
    height: auto;
    display: block;
}
.siteclick-container .siteclick-bar-main-text span.siteclick-bar-role,
.siteclick-container .siteclick-bar-main-text span.siteclick-bar-url {
    font-size: 8px;
    display: block;
    opacity: 1;
    font-family: monospace;
    margin-top: 2px;
    line-height: 1em;
    color: var(--sc-color-text-muted);
    font-weight: 700;
}

.siteclick-container .siteclick-bar-main-text span.siteclick-bar-role {
    font-family: inherit;
    color: var(--sc-color-text-subtle);
    opacity: 1;
}

.siteclick-container [data-siteclick-bar-nav-main-active="user"] .siteclick-bar-main-text span.siteclick-bar-role{
    opacity: 1;
}

.siteclick-container .siteclick-bar-main-text {
    line-height: 10px;
    text-align: left;
    padding-top: 1px;
    font-weight: 500;
    color: var(--sc-color-white);
}

/* De domeinregel in de topbar hergebruikt het generieke .siteclick-label-url
   (16px badge, 1rem regelhoogte) — veel te groot in een 40px balk met
   line-height 10px. Header-scoped terugbrengen naar het formaat van de
   'Concept'-rol ernaast; de badge blijft een rond bolletje. */
.siteclick-container .siteclick-bar-main-text .siteclick-label-url {
    margin-top: 3px;
    line-height: 12px;
    font-size: 9px;
}
.siteclick-container .siteclick-bar-main-text .siteclick-label-url span {
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 6px;
    top: 0;
}
.siteclick-container .siteclick-bar-main-text .siteclick-label-url-in {
    padding-left: 16px;
    max-width: 180px;
    font-family: monospace;
    font-weight: 700;
    color: var(--sc-color-text-muted);
}

.siteclick-container .siteclick-bar-main-image img {
}

.siteclick-container .siteclick-bar-main-image {
    margin-right: 4px;
}

.siteclick-container .siteclick-bar-nav .count {
    margin-left: 2px;
}

.siteclick-container .siteclick-bar-main-toggle-navs {overflow-x: scroll;overflow-y: hidden;height: 30px;-webkit-overflow-scrolling: touch;border-left: 1px solid var(--sc-color-dark);margin-left: 1rem;padding-left: 0.5rem;}

.siteclick-container .siteclick-bar-main-toggle-navs::-webkit-scrollbar{
    width: 2px;
    height: 2px;
    visibility:hidden;
}

.siteclick-container .siteclick-bar-main-toggle-navs::-webkit-scrollbar-track{
    background: var(--sc-color-text-soft-bg);
    border-radius: 1px;
}

.siteclick-container .siteclick-bar-main-toggle-navs::-webkit-scrollbar-thumb {
    background: var(--sc-color-text-soft-bg);
    border-radius: 1px;
}

@supports not selector(::-webkit-scrollbar) {
    .siteclick-container .siteclick-bar-main-toggle-navs{
        scrollbar-color: var(--sc-color-text-soft-bg)
        var(--sc-color-text-soft-bg);
    }
}


@media screen and (max-width: 1224px) {
    .siteclick-container .siteclick-bar-main-text {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .siteclick-container .siteclick-bar-main-text {
        display:none;
    }
    .siteclick-container .siteclick-bar-main-count {
        padding-left: 0px;
    }
}

.siteclick-bar-nav-group,
.siteclick-bar-nav-group-toggle,
.siteclick-bar-nav-group-items {
    display: inline-block;
    vertical-align: top;
}

.siteclick-bar-nav-group-toggle {
    color: var(--sc-color-text-subtle);
    font-weight: 400;
    text-decoration: none;
    margin: 8px 0px;
    border-radius: 5px;
    line-height: 26px;
    padding: 0 7px;
    vertical-align: top;
    font-size: 16px;
    height: 24px;
}


.siteclick-container .siteclick-bar-nav-group-responsive .siteclick-bar-nav-group-toggle {
    display: none;
}
.siteclick-container .siteclick-bar-nav-group-dropdown .siteclick-bar-nav-group-toggle {
    display: inline-block !important;
}

.siteclick-container .siteclick-bar-nav-group-dropdown .siteclick-bar-nav-group-items {
    display:none;
}

.siteclick-bar-nav-group-toggle img {
    max-width: 17px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 100%;
    margin-right: 0.25rem;
    position: relative;
    top: -1px;
}

.siteclick-container .siteclick-bar-nav-group.siteclick-bar-nav-group-dropdown.active .siteclick-bar-nav-group-items {
    position: absolute;
    top: 32px;
    background: var(--sc-color-dark);
    right: 0px;
    border-radius: 5px 0px 5px 5px;
    min-width: 150px;
    padding: 10px 0px;
}
.siteclick-container .siteclick-bar-nav-group.siteclick-bar-nav-group-dropdown.active .siteclick-bar-nav-group-toggle {
    border-radius: 5px 5px 0px 0px;
}

.siteclick-container .siteclick-bar-nav-group.siteclick-bar-nav-group-dropdown.active .siteclick-bar-nav-group-items a {
    display: block !important;
    line-height: 20px !important;
    height: 20px !important;
    margin: 0px !important;
    text-align: right;
}

.siteclick-container .siteclick-bar-nav-group.siteclick-bar-nav-group-dropdown.active {
    position: relative;
}

@media screen and (min-width: 1024px) {
    .siteclick-container .siteclick-bar-nav-group-responsive .siteclick-bar-nav-group-items {
        display:inline-block !Important;
    }

}
@media screen and (max-width: 1024px) {
    .siteclick-container .siteclick-bar-nav-group-responsive .siteclick-bar-nav-group-items {
        display:none;
    }
    .siteclick-container .siteclick-bar-nav-group-responsive .siteclick-bar-nav-group-toggle {
        display: inline-block;
        padding: 5px 10px;
    }

    .siteclick-container .siteclick-bar-nav-group.siteclick-bar-nav-group-responsive.active .siteclick-bar-nav-group-items {
        position: absolute;
        top: 32px;
        background: var(--sc-color-dark);
        right: 0px;
        border-radius: 5px 0px 5px 5px;
        min-width: 150px;
        padding: 10px 0px;
    }
    .siteclick-container .siteclick-bar-nav-group.siteclick-bar-nav-group-responsive.active .siteclick-bar-nav-group-toggle {
        border-radius: 5px 5px 0px 0px;
    }

    .siteclick-container .siteclick-bar-nav-group.siteclick-bar-nav-group-responsive.active .siteclick-bar-nav-group-items a {
        display: block !important;
        line-height: 20px !important;
        height: 20px !important;
        margin: 0px !important;
        text-align: right;
    }

    .siteclick-container .siteclick-bar-nav-group.siteclick-bar-nav-group-responsive.active {
        position: relative;
    }
}


/** SITECLICK Content **/
.siteclick-container .siteclick-content {
    height: auto !important;
    padding: 0px !important;
    margin: 0px !important;
    overflow:hidden;
}
.siteclick-container .siteclick-header,
.siteclick-container .siteclick-subheader,
.siteclick-container .siteclick-footer {
    position: fixed;
    left: 200px;
    right: 160px;
    z-index: 99999;
}

.siteclick-container .siteclick-header-in, .siteclick-container .siteclick-subheader-in, .siteclick-container .siteclick-wrapper, .siteclick-container .siteclick-footer-in {
    max-width: 1080px;
    margin: 0 auto;
}

.siteclick-container .siteclick-body-small .siteclick-header-in,
.siteclick-container .siteclick-body-small .siteclick-subheader-in,
.siteclick-container .siteclick-body-small .siteclick-content-in-body,
.siteclick-container .siteclick-body-small .siteclick-footer-in {
    max-width: 700px;
}

.siteclick-container .siteclick-header {
    font-weight: 500;
    color: var(--sc-color-text-muted);
    background: var(--sc-color-panel-bg);
    border-bottom: 2px solid var(--sc-color-border);
    top: 40px;
    height: 110px;
    padding-top: 0px;
    display: flex;
    align-items: flex-end;
}

.siteclick-header-in {
    padding: 1.75rem 0px 1rem;
}

.siteclick-container .siteclick-subheader {
    top: 150px;
    color: var(--sc-color-text-muted);
    text-decoration: none;
    background: var(--sc-color-panel-bg);
    height: 28px;
    margin-top: -2px;
}
.siteclick-container .siteclick-subheader:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 2px;
    background:  var(--sc-color-border);
    z-index: -1;
}
.siteclick-container .siteclick-content-in {
    padding-top: 176px;
    padding-bottom: 50px;
    padding-left: 200px;
    padding-right: 160px;
    position:relative;
    overflow: hidden;
}
.siteclick-container .siteclick-content-in-body {
    padding: 40px 0px;
}
.siteclick-container .siteclick-wrapper, .siteclick-header-in, .siteclick-subheader-in, .siteclick-footer-in {
    padding-left: 60px;
    padding-right: 60px;
}

.siteclick-content-small {
    max-width: 700px;
    margin: 0 auto;
}

.siteclick-container .siteclick-footer {
    background: var(--sc-color-panel-bg);
    top: auto;
    bottom: 0;
    height: 50px;
    border-top: 2px solid var(--sc-color-border);
}
.siteclick-footer-nonsticky {
    position: relative !important;
}
.siteclick-container [data-siteclick-subheader="false"] .siteclick-content-in {
    padding-top: 150px;
}
.siteclick-container [data-siteclick-header="false"] .siteclick-content-in-body {
    padding-top: 100px;
}
.siteclick-container [data-siteclick-subheader="false"] .siteclick-subheader {
    display:none;
}
.siteclick-container [data-siteclick-header-full="true"] .siteclick-header {
    height: 130px;
}
.siteclick-container [data-siteclick-header-full="true"] .siteclick-subheader {
    top: 170px;
}
.siteclick-container [data-siteclick-header-full="true"] .siteclick-content-in {
    padding-top: 170px;
}

.siteclick-container [data-siteclick-preview-open="true"] .siteclick-content-in,
.siteclick-container [data-siteclick-preview-open="true"] .siteclick-header,
.siteclick-container [data-siteclick-preview-open="true"] .siteclick-subheader,
.siteclick-container [data-siteclick-preview-open="true"] .siteclick-footer {
    padding-right: 70vw;
}

.siteclick-container [data-siteclick-header="false"][data-siteclick-subheader="false"] .siteclick-content-in {
    padding-top: 40px;
}


@media screen and (min-width: 1224px) {
    .admin-sidebar-right-desktop-closed .siteclick-header,
    .admin-sidebar-right-desktop-closed .siteclick-subheader,
    .admin-sidebar-right-desktop-closed .siteclick-footer,
    .admin-sidebar-right-desktop-closed .admin-sidebar.active {
        right: 0px;
    }
    .admin-sidebar-left-desktop-closed .siteclick-header,
    .admin-sidebar-left-desktop-closed .siteclick-subheader,
    .admin-sidebar-left-desktop-closed .siteclick-footer{
        left: 0px;
    }
    .admin-sidebar-right-desktop-closed .siteclick-content-in {
        padding-right: 0px;
    }
    .admin-sidebar-left-desktop-closed .siteclick-content-in{
        padding-left: 0px;
    }
}

@media screen and (max-width: 1224px) {
    .siteclick-container .siteclick-header,
    .siteclick-container .siteclick-subheader,
    .siteclick-container .siteclick-footer {
        right: 0px !important;
        left: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .siteclick-container .siteclick-content-in {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    /* R2: alle vijf selectors horen binnen de container-schil te blijven —
       ongescoped zetten ze de rail-padding ook op wizard/checkout/creating. */
    .siteclick-container .siteclick-wrapper,
    .siteclick-container .siteclick-header-in,
    .siteclick-container .siteclick-subheader-in,
    .siteclick-container .siteclick-footer-in,
    .siteclick-container .siteclick-wizard-footer-in {
        padding-left: 60px;
        padding-right: 20px;
    }

}


/** SiteClick Toggles **/
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle {
    position: fixed;
    left: 200px;
    text-align: center;
    width: 40px;
    height: auto;
    cursor: pointer;
    line-height: 40px;
    color: var(--sc-color-white);
    z-index: 1000000;
    top: 40px;
    bottom: 0px;
    background: var(--sc-color-surface);
    padding-top: 10px;
}

.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-right {
    left: auto;
    right: 160px;
}

.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle-item {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: var(--sc-color-transparent);
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    border-radius: 5px 0px 0px 5px;
    font-weight: 700;
    overflow: hidden;
    /* box-shadow: 2px 4px 5px 1px var(--sc-shadow-subtle); */
    color: var(--sc-color-text-subtle);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
    padding: 0px;
    line-height: 1em;
}
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle-item.inactive {

}
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-right .toggle-item{
    float: right;
}
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle-item svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    fill: var(--sc-color-white) !important;
    color: var(--sc-color-white) !important;
    display: block;
    margin: 5px auto 2px;
}
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle-item span {
    margin-top: 3px;
    display: block;
    line-height: 1em;
    font-size: 9px;
    font-weight: 700;
}
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle-left .toggle-item:hover,
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle-right .toggle-item:hover,
.siteclick-container [data-siteclick-sidebar-left-content="organizations"] .siteclick-sidebars .siteclick-toggles [data-toggle-left="organizations"],
.siteclick-container [data-siteclick-sidebar-left-content="templates"] .siteclick-sidebars .siteclick-toggles [data-toggle-left="templates"],
.siteclick-container [data-siteclick-sidebar-left-content="websites"] .siteclick-sidebars .siteclick-toggles [data-toggle-left="websites"],
.siteclick-container [data-siteclick-sidebar-left-content="editor"] .siteclick-sidebars .siteclick-toggles [data-toggle-left="editor"],
.siteclick-container [data-siteclick-sidebar-right-content="wiki"] .siteclick-sidebars .siteclick-toggles [data-toggle-right="wiki"],
.siteclick-container [data-siteclick-sidebar-right-content="magic"] .siteclick-sidebars .siteclick-toggles [data-toggle-right="magic"],
.siteclick-container [data-siteclick-sidebar-right-content="settings"] .siteclick-sidebars .siteclick-toggles [data-toggle-right="settings"],
.siteclick-container [data-siteclick-sidebar-right-content="log"] .siteclick-sidebars .siteclick-toggles [data-toggle-right="log"],
.siteclick-container [data-siteclick-sidebar-right-content="inbox"] .siteclick-sidebars .siteclick-toggles [data-toggle-right="inbox"]{
    color: var(--sc-color-dark);
}

.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle-left .toggle-item {
    border-radius: 0px 5px 5px 0px;
}
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle-item i {
    font-size: 16px !important;
    display: inline-flex;
    align-content: center;
    flex-direction: column;
}

.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-left .icon-sidebar-left-closed,
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-right .icon-sidebar-right-closed,
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-right .icon-sidebar-left-open,
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-right .icon-sidebar-left-closed {
    display:none;
}
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-left .icon-sidebar-left-open,
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-right .icon-sidebar-right-open {
    display:block;
}


@media screen and (min-width: 1224px) {
    body.admin-sidebar-left-desktop-closed .siteclick-sidebars .siteclick-toggles .toggle.toggle-left {
        left: 0px;
    }
    body.admin-sidebar-left-desktop-closed .siteclick-sidebars .siteclick-toggles .toggle.toggle-left .icon-sidebar-left-closed,
    body.admin-sidebar-right-desktop-closed .siteclick-sidebars .siteclick-toggles .toggle.toggle-right .icon-sidebar-right-closed{
        display:block;
    }
    body.admin-sidebar-left-desktop-closed .siteclick-sidebars .siteclick-toggles .toggle.toggle-left .icon-sidebar-left-open,
    body.admin-sidebar-right-desktop-closed .siteclick-sidebars .siteclick-toggles .toggle.toggle-right .icon-sidebar-right-open {
        display:none;
    }

    body.admin-sidebar-right-desktop-closed .siteclick-sidebars .siteclick-toggles .toggle.toggle-right {
        right: 0px;
    }

}

@media screen and (max-width: 1224px) {
    /* R3: beide rails staan hier links (ook de RECHTER sidebar schuift onder
       1224px vanaf links naar binnen — zie .siteclick-sidebar-right verderop).
       De linker rail liep met bottom:0 door tot onderaan en lag daardoor onder
       de onderaan verankerde rechter rail: dezelfde z-index, later in de DOM
       wint, dus de linkeronderhoek WAS de rechter toggle. bottom:auto laat de
       linker rail op zijn eigen inhoud eindigen en houdt de onderkant vrij. */
    .siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-left {
        left: 0px;
        width: 40px !important;
        bottom: auto;
    }
    .siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-right {
        right: auto;
        top: auto;
        bottom: 0px;
        left: 0px;
        margin-top: 0.5rem;
    }
    body.admin-sidebar-right-mobile-open .siteclick-sidebars .siteclick-toggles .toggle.toggle-right,
    body.admin-sidebar-left-mobile-open .siteclick-sidebars .siteclick-toggles .toggle.toggle-left,
    body.admin-sidebar-left-mobile-open .siteclick-sidebars .siteclick-toggles .toggle.toggle-right,
    body.admin-sidebar-right-mobile-open .siteclick-sidebars .siteclick-toggles .toggle.toggle-left {
        left: 200px;
    }

    .siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-right .icon-sidebar-left-closed,
    body.admin-sidebar-right-mobile-open .siteclick-sidebars .siteclick-toggles .toggle.toggle-right .icon-sidebar-left-open,
    .siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-left .icon-sidebar-left-closed,
    body.admin-sidebar-left-mobile-open .siteclick-sidebars .siteclick-toggles .toggle.toggle-left .icon-sidebar-left-open  {
        display:block !important;
    }

    .siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-right .icon-sidebar-right-open,
    .siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-right .icon-sidebar-right-closed,
    .siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-left .icon-sidebar-left-open,
    body.admin-sidebar-left-mobile-open.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-left .icon-sidebar-left-closed,
    body.admin-sidebar-right-mobile-open.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-right .icon-sidebar-left-closed {
        display:none !important;
    }



    .siteclick-container .toggle-item {
        border-radius: 0px 5px 5px 0px !important;
    }

    .siteclick-container .toggle-item i,
    .siteclick-container .toggle-item.toggle-item-magic i,
    .siteclick-container .toggle-item.toggle-item-wiki i {
        font-size: 12px !important;
    }

    .siteclick-container .siteclick-toggles .toggle-item.toggle-item-wiki i {
        font-size: 8px !important;
    }

    .siteclick-container .toggle-item span {
        font-size: 10px !important;
    }
}


/** SiteClick Sidebars **/
.siteclick-container .siteclick-sidebars .siteclick-sidebar-left,
.siteclick-container .siteclick-sidebars .siteclick-sidebar-right {
    position: fixed;
    top: 40px;
    bottom: 0px;
    background: var(--sc-color-surface);
    -webkit-user-select: none;
    user-select: none;
}
.siteclick-container .siteclick-sidebars .siteclick-sidebar-left {
    left: 0;
    overflow: hidden;
    width: 200px !important;
    border-right: 2px solid var(--sc-color-border-strong);
}

.siteclick-container .sidebar-left i.icon.icon-layout {
    font-size: 1.1em;
}
.siteclick-container .siteclick-sidebars .siteclick-sidebar-right {
    right: 0px;
    width: 160px;
    border-left: 2px solid var(--sc-color-border-strong);
}

@media screen and (min-width: 1224px) {
    body.admin-sidebar-left-desktop-closed .siteclick-sidebars .siteclick-sidebar-left {
        left: -202px;
    }

    body.admin-sidebar-right-desktop-closed .siteclick-sidebars .siteclick-sidebar-right {
        right: -162px;
    }


    .siteclick-container [data-siteclick-sidebar-left-content="organizations"] .siteclick-sidebars .siteclick-toggles [data-toggle-left="organizations"],
    .siteclick-container [data-siteclick-sidebar-left-content="templates"] .siteclick-sidebars .siteclick-toggles [data-toggle-left="templates"],
    .siteclick-container [data-siteclick-sidebar-left-content="websites"] .siteclick-sidebars .siteclick-toggles [data-toggle-left="websites"],
    .siteclick-container [data-siteclick-sidebar-left-content="editor"] .siteclick-sidebars .siteclick-toggles [data-toggle-left="editor"],
    .siteclick-container [data-siteclick-sidebar-right-content="wiki"] .siteclick-sidebars .siteclick-toggles [data-toggle-right="wiki"],
    .siteclick-container [data-siteclick-sidebar-right-content="magic"] .siteclick-sidebars .siteclick-toggles [data-toggle-right="magic"],
    .siteclick-container [data-siteclick-sidebar-right-content="settings"] .siteclick-sidebars .siteclick-toggles [data-toggle-right="settings"],
    .siteclick-container [data-siteclick-sidebar-right-content="log"] .siteclick-sidebars .siteclick-toggles [data-toggle-right="log"],
    .siteclick-container [data-siteclick-sidebar-right-content="inbox"] .siteclick-sidebars .siteclick-toggles [data-toggle-right="inbox"]{
        /* width: 50px; */
    }
}
@media screen and (max-width: 1224px) {
    .siteclick-container .siteclick-sidebars .siteclick-sidebar-left {
        left: -202px;
        position: fixed !important;
    }
    .siteclick-container .siteclick-sidebars .siteclick-sidebar-left,
    .siteclick-container .siteclick-sidebars .siteclick-sidebar-right {
        border-left: 0px !important;
        border-right: 2px solid var(--sc-color-border) !important;
    }
    .siteclick-container .siteclick-sidebars .siteclick-sidebar-right{
        right: auto !important;
        left: -200px;
        width: 200px;
    }

    body.admin-sidebar-right-mobile-open .siteclick-sidebars .siteclick-sidebar-right{
        left: 0px;
    }

    body.admin-sidebar-left-mobile-open .siteclick-sidebars .siteclick-sidebar-left {
        left: 0px;
    }
    .siteclick-container .siteclick-sidebars .siteclick-toggles .toggle.toggle-right .toggle-item {
        float: left;
    }
}


.data-sidebar-inner-content {display:none;}
.admin-sidebar .data-sidebar-inner-content, .siteclick-sidebar-rest .data-sidebar-inner-content {display:block !important;}

/*** SiteClick Panel Content: Voor in modals en sidebars ***/
.siteclick-panel-title, .siteclick-panel-footer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: var(--sc-color-panel-bg);
    z-index: 2;
}

.siteclick-panel-footer {
    bottom: 0px;
    top: auto;
    border-top: 2px solid var(--sc-color-border);
    padding: 1rem;
    height:60px;
}

.siteclick-panel-content {top: 40px;max-height: 100%;overflow-y: scroll;width: 100%;display: block;position: absolute;padding-top: 0px;padding-bottom: 60px;bottom: 0px;}
.siteclick-modal-body .siteclick-panel-content {
    position: relative;
    top: 0px;
    overflow: hidden;
    padding-top: 40px !important;
}
.siteclick-panel-content-in {
    padding: 1rem;
    margin-bottom: 0px !important;
    overflow: hidden;
}

.siteclick-container .siteclick-panel-title-in {
    position: relative;
    line-height: 40px;
    padding: 0 40px;
    text-align: center;
    background: var(--sc-color-primary-soft);
}

.siteclick-container .siteclick-panel-close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    line-height: 20px;
    margin: 10px;
    z-index: 3;
}

.siteclick-container .siteclick-panel-close i{
    position: relative;
    top: 1px;
}

.siteclick-container .siteclick-panel-close:hover {
    background: var(--sc-color-primary-hover);
    color: var(--sc-color-white);
}
.siteclick-container .siteclick-panel-title-title {
    font-weight: 500;
    color: var(--sc-color-primary);
}

/** SiteClick Modal **/
.siteclick-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000000000000;
    display:none;
}
.siteclick-modal.active {
    display:block;
}

.siteclick-modal-body {
    position: fixed;
    width: 300px;
    background: var(--sc-color-primary);
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%;
    height: auto;
}

.siteclick-modal-body {
    border: 2px solid var(--sc-color-border);
    background: var(--sc-color-panel-bg);
}

/** SiteClick Header */
.siteclick-container .siteclick-header .siteclick-admin-title-edit {
    display: none;
}

.siteclick-container .siteclick-header .siteclick-admin-title-slug {
    background: var(--sc-color-primary-soft);
    display: inline-block;
    color: var(--sc-color-primary);
    font-size: 9px;
    text-decoration: none;
    height: 18px !important;
    padding: 0px 5px;
    border-radius: 5px;
    position: relative;
}
.siteclick-container .siteclick-header .siteclick-admin-title-slug * {
    text-decoration: none;
    font-weight: 500;
    color: var(--sc-color-primary);
    line-height: 18px;
    height: 18px !important;
    margin: 0px !important;
    padding: 0px !important;
    min-height: 18px !important;
    vertical-align: top !important;
}
.siteclick-container .siteclick-header span.siteclick-admin-title-edit-toggle {
    font-size: 10px;
    display: inline-block;
    vertical-align: top;
    height: 10px;
    width: 10px;
    cursor: pointer;
    margin-left: 5px;
    color: var(--sc-color-text-muted);
}
.siteclick-container .siteclick-header .siteclick-admin-title-content.siteclick-admin-title-content-edit .siteclick-admin-title-title {
    display: none;
}
.siteclick-container .siteclick-header .siteclick-admin-title-content.siteclick-admin-title-content-edit .siteclick-admin-title-edit {
    display: block;
}

.siteclick-container .siteclick-header .siteclick-admin-title-slug .button.button-small {
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
    height: 18px !important;
    padding: 0px 10px !important;
    line-height: 18px !important;
    font-size: 10PX !important;
    margin-right: 0.5rem !important;
}

.siteclick-container .siteclick-header .siteclick-admin-title-slug #editable-post-name input {
    height: 12px !important;
    font-size: 9px !important;
    font-weight: 500;
    line-height: 12px !important;
    padding: 0px 5px !important;
    width: auto !important;
    display: inline-block;
    background: var(--sc-color-primary-soft-strong) !important;
    color: var(--sc-color-primary) !important;
    border: 0px !important;
    min-height: auto !important;
    display: inline-block;
    vertical-align: top;
    margin-top: 3px !important;
    font-family: monospace;
}
.siteclick-container .siteclick-header .siteclick-admin-title-slug #edit-slug-buttons .button{
    background: var(--sc-color-transparent) !important;
    margin: 0px !important;
    position: absolute;
    left: 100%;
}
.siteclick-container .siteclick-header .siteclick-admin-title-image-in {
    width: 65px;
    height: 65px;
    overflow: hidden;
    margin-top: -5px;
    border: 1px solid var(--sc-color-border);
}

.siteclick-container .siteclick-header .siteclick-admin-title-title {
    color: var(--sc-color-text);
    font-size: 1.1rem;
    line-height: 1.1rem;
    /* display: flex; */
    /* align-items: flex-end; */
    /* justify-content: flex-start; */
}
.siteclick-container .siteclick-header .siteclick-admin-title-title a:hover {
    background: var(--sc-color-primary-soft);
    color: var(--sc-color-primary) !important;
}
.siteclick-container .siteclick-header .siteclick-admin-title-image {
    width: 85px;
    display: table-cell;
    vertical-align: middle;
}
.siteclick-container .siteclick-header .siteclick-admin-title-image img {
    max-width: 100%;
    height: auto !important;
    display: block;
    margin: 0;
}
.siteclick-container .siteclick-header .siteclick-admin-title-content {
    display: table-cell;
    vertical-align: middle;
}

.siteclick-container .siteclick-header .siteclick-admin-title-title a,
.siteclick-container .siteclick-header .siteclick-admin-title-title div {display: inline-block;color: var(--sc-color-text);font-weight: 500;text-decoration: none;padding: 5px 3px 3px;margin-left: -3px;border-radius: 5px;vertical-align: bottom;}
.siteclick-container .siteclick-header .siteclick-admin-title-title a:not(.active),
.siteclick-container .siteclick-header .siteclick-admin-title-title div:not(.active) {
    font-size: 1rem !important;
    top: 1px;
    position: relative;
}
.siteclick-container .siteclick-header span.siteclick-admin-title-arrow {
    font-size: 8px !important;
    margin: 0px 2px !important;
    color: var(--sc-color-text-muted);
    padding: 3px;
    display: inline-block;
    margin-right: 7px !important;
}

.siteclick-container .siteclick-header span.siteclick-admin-title-arrow i {
    position: relative;
    top: 1px;
}

.siteclick-container .siteclick-header .siteclick-admin-title-title .active {
    /* font-weight: 500; */
    /* color: var(--sc-color-text); */
}

.siteclick-container .siteclick-header .siteclick-admin-title-items {
    display: table;
    width: 100%;
    table-layout: fixed;
    height: auto;
}

.siteclick-container .siteclick-header .siteclick-admin-title-edit,
.siteclick-header .siteclick-admin-title-edit input {
    width: 100%;
}

.siteclick-container .siteclick-header .siteclick-admin-title-edit input {
    font-size: 1em;
}

.siteclick-container .siteclick-header .siteclick-admin-title-slug #edit-slug-buttons .button.save {
    position: relative;
    background: var(--sc-color-primary) !important;
    left: 0px !important;
    min-height: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    margin: 2px 0.5rem 2px 0.25rem !important;
    color: #fff !important;
    font-size: 10px !important;
    padding: 0px 5px !important;
}

.siteclick-container .siteclick-header .siteclick-admin-title-title span {
    font-weight: 400;
    font-size: 0.8em;
    margin: 0px;
    margin-left: 3px;
}

/**** SITECLICK SUBHEADER **/
.siteclick-container .siteclick-subheader .siteclick-admin-title-tab.active {
    font-weight: 500;
    color: var(--sc-color-text);
    border-color: var(--sc-color-border);
    border-bottom-color: var(--sc-color-panel-bg) !important;
    background: var(--sc-color-panel-bg);
}
.siteclick-container .siteclick-subheader .siteclick-admin-title-tab:not(.active):hover {
    color: var(--sc-color-text);
}

.siteclick-container .siteclick-subheader .siteclick-admin-title-tab {
    display: inline-block !important;
    text-decoration: none;
    color: var(--sc-color-text-subtle);
    font-weight: 400;
    padding: 0px 1rem;
    border: 2px solid transparent;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    border-radius: 5px 5px 0px 0px;
    line-height: 26px;
    margin-right: 3px;
    background: var(--sc-color-surface);
    color: --sc-color-text-subtle;
    font-weight: 500;
    font-size: 0.9rem;
}

.siteclick-admin-title-thumb {
    width: 15px;
    height: 12px;
    display: inline-block !important;
    position: relative !important;
    margin-right: 0.25rem !important;
    top: -1px !important;
    left: 0px;
    vertical-align: middle !important;
    margin-left: 0px !important;
    padding: 0px !important;
}

span.siteclick-admin-title-thumb-in {
    width: 16px !important;
    height: 16px !important;
    border-radius: 2px !important;
    position: absolute !important;
    top: -3px !important;
    left: 0px !important;
    margin-left: 0px !important;
    text-align: center;
    background-size: cover !important;
    background-color: var(--sc-color-border);
}

.siteclick-container [data-tab-page] {cursor:pointer;}
.siteclick-container [data-tab-page-content] {display:none;}
.siteclick-container [data-tab-page-content].active {display:block;}


/*** SITECLICK NOTIFICATIONS ***/
.siteclick-container .notice:not(.inline),
.siteclick-container .notice.update-nag {display:none !important;}
.siteclick-container .siteclick-notifications {
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 1000000000000;
    padding-right: 0.5rem;
    width: 100%;
    max-width: 250px;
}
.siteclick-container .siteclick-notifications .notification {
    padding: 1rem;
    color: var(--sc-color-white);
    background: var(--sc-color-primary);
    font-size: 0.9rem;
    line-height: 1.4em;
    font-weight: 400;
    border-radius: 5px;
    margin-top: 0.5rem;
    position:relative;
    width: 100%;
}
.siteclick-container .siteclick-notifications .notification .button {
    background: var(--sc-overlay-dark);
    display: inline-block;
    padding: 0px 1rem;
    margin: 0 !important;
    display: block;
    width: 100%;
    margin-top: 0.5rem !important;
}
.siteclick-container .siteclick-notifications .notification pre {
    max-height: 100px;
    overflow-y: scroll;
}
.siteclick-container .siteclick-notifications .notification-success {
    background:var(--sc-color-primary) !important;
}
.siteclick-container .siteclick-notifications .notification-error {
    background:var(--sc-color-dark-soft) !important;
}
.siteclick-container .siteclick-notifications .notification * {
    color: var(--sc-color-white) !important;
    margin: 0px;
    padding: 0px;
    font-size: inherit !important;
    line-height: inherit !important;
}
.siteclick-container .siteclick-notifications .notification img {
    display:none;
}
.siteclick-container .siteclick-notifications .notification strong {
    display: block;
}

.siteclick-container .siteclick-notifications .notification .notice-dismiss {
    display: none;
}

.siteclick-container .siteclick-notifications .notification-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px !important;
    z-index: 1;
    cursor: pointer;
    border-radius: 0px 5px;
    width: 16px;
    text-align: center;
}

.siteclick-container .siteclick-notifications .notification-close:hover {
    background: var(--sc-color-text);
}

/*** SITECLICK LOADER ***/
.siteclick-container .siteclick-loader-template.siteclick-loader-inline {
    color: var(--sc-color-text-muted);
}
.siteclick-container .siteclick-loader-template.siteclick-loader-dark {
    background: var(--sc-overlay-dark) !important;
}
.siteclick-container .siteclick-loader-template.siteclick-loader-inline-absolute {
    background: var(--sc-overlay-white-soft);
    color: var(--sc-color-text-muted);
    height: 100%;
    max-height: 100%;
    width: 100%;
    text-align: center;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position:absolute;
    z-index: 1;
    left: 0;
    top: 0;
}
.siteclick-container .siteclick-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
}
body.loading.siteclick-container .siteclick-loader {
    display:block !Important;
}

.siteclick-container .siteclick-loader-template.siteclick-loader-inline .siteclick-loader-inline-in div {
    height: 8px;
    aspect-ratio: 5;
    --_g:no-repeat radial-gradient(farthest-side,var(--sc-color-primary) 94%,var(--sc-color-transparent));
    background: var(--_g),var(--_g),var(--_g),var(--_g);
    background-size: 20% 100%;
    animation:
            l40-1 300ms infinite alternate,
            l40-2 600ms infinite alternate;
}
.siteclick-container .siteclick-loader-template.siteclick-loader-inline.siteclick-loader-inline-absolute .siteclick-loader-inline-in div {
    margin: 0 auto;
}
@keyframes l40-1 {
    0%,
    10% {background-position: 0 0,0 0,0 0,0 0}
    33% {background-position: 0 0,calc(100%/3) 0,calc(100%/3) 0,calc(100%/3) 0}
    66% {background-position: 0 0,calc(100%/3) 0,calc(2*100%/3) 0,calc(2*100%/3) 0}
    90%,
    100% {background-position: 0 0,calc(100%/3) 0,calc(2*100%/3) 0,100% 0}
}
@keyframes l40-2 {
    0%,49.999999% {transform: scale( 1)}
    50%,100%  {transform: scale(-1)}
}

.siteclick-container .siteclick-loader-template .siteclick-loader-inline-title {
    color: var(--sc-color-primary);
    font-weight: 500;
    font-size: 14px;
}
.siteclick-container .siteclick-loader-template.siteclick-loader-inline .siteclick-loader-inline-countdown {
    font-size: 11px;
    line-height: 11px;
}
.siteclick-container .siteclick-loader-template:not(.siteclick-loader-inline-absolute) .siteclick-loader-inline-countdown > div {
    display: inline-block;
    vertical-align: bottom;
    line-height: 12px;
    font-size: 12px !important;
}
.siteclick-container .siteclick-loader-template.siteclick-loader-inline .siteclick-loader-inline-countdown-number {
    font-size: 20px;
    line-height: 1em;
    margin-top: 4px;
    font-weight: 500;
}
.siteclick-container .siteclick-loader-template.siteclick-loader-inline.siteclick-loader-inline-absolute .siteclick-loader-inline-absolute {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
}
.siteclick-loader-inline-absolute.siteclick-loader-inline-toggle {
    display:none !important;
}

.siteclick-loader-inline-visible .siteclick-loader-inline-absolute.siteclick-loader-inline-toggle {
    display:flex !important;
}

.siteclick-loader-inline-container {
    position: relative;
}


.siteclick-container .siteclick-loader-template.siteclick-loader-template-absolute {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: var(--sc-color-panel-bg);
}

/** SITECLICK FOOTER **/
.siteclick-container .siteclick-footer .post-update-row-in {
    display: table;
    table-layout: auto;
    width: 100%;
    height: 50px;
}

.siteclick-container .siteclick-footer .post-update-row-left,
.siteclick-container .siteclick-footer .post-update-row-right {
    display: table-cell;
    vertical-align: top;
    padding-top: 8px;
}
.siteclick-container .siteclick-footer .post-update-row-right {
    text-align: right;
}
.siteclick-container .siteclick-footer .post-update-row-right .button-primary,
.siteclick-container .siteclick-footer .post-update-row-right .page-title-action{
    background: var(--sc-button-primary-bg) !important;
    color: var(--sc-button-primary-text) !important;
}

.siteclick-container .siteclick-footer .post-update-row-right .button-primary:hover,
.siteclick-container .siteclick-footer .post-update-row-right .page-title-action:hover{
    background: var(--sc-button-primary-bg-hover) !important;
}
.siteclick-container .siteclick-footer .post-update-row-right-buttons,
.siteclick-container .siteclick-footer .post-update-row-right-actions{
    display:inline-block;
    vertical-align: top;
}

.siteclick-container .siteclick-footer .post-update-row-right-buttons {
    text-align: right;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

/*** SIDEBAR LOGIC ***/
[data-sidebar-element-content] {
    display:none;
}
/* Sidebars schuiven op TRANSFORM, niet op right/left (testronde-7, Dave 3/10:
   "inschuiven voelt niet soepel"). Een fixed paneel met een iframe erin liet
   bij een right-animatie elke frame layout+paint van die hele subtree doen;
   translateX draait op de compositor. De rustpositie is dus altijd right:0 en
   de dichte stand is een verschuiving over de eigen breedte — de maat-classes
   hoeven daardoor alleen nog een max-width te zetten. */
.siteclick-container .siteclick-sidebar-rest {
    position: fixed;
    right: 0;
    top: 40px;
    background: var(--sc-color-panel-bg);
    z-index: 1000;
    width: 100%;
    border-left: 2px solid var(--sc-color-border);
    bottom: 0px;
    transform: translateX(100%);
    /* Bewust GEEN will-change: dat houdt permanent een stacking/containing
       block in stand, ook in de open stand (transform:none) — een
       position:fixed kind zou zich dan naar de sidebar richten i.p.v. naar de
       viewport. Zo is alleen tijdens het schuiven een transform actief. */
}
.siteclick-container .siteclick-sidebar-rest.active {
    right: 0px !important;
    transform: none;
}
.siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-small {
    max-width: 480px;
}
.siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-medium {
    max-width: 768px;
}
.siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-large {
    max-width: 1024px;
}
.siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-extralarge {
    max-width: 1224px;
}
.siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-full {
    max-width: 100%;
    border-left: 0;
}
.siteclick-container .siteclick-sidebar-rest .siteclick-sidebar-rest-in {
    position: relative;
    height: 100%;
}

.siteclick-container .siteclick-sidebar-rest .siteclick-sidebar-rest-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    font-size: 1rem !important;
}


.siteclick-container .siteclick-sidebar-rest .siteclick-sidebar-rest-nav {
    overflow-x: hidden;
    overflow-y: auto;
}
.siteclick-container .siteclick-sidebar-rest .siteclick-sidebar-rest-content {
    height: 100%;
    padding-top: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    top: 40px;
    bottom: 0;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0px !important;
    height: auto !important;
}
.siteclick-container .siteclick-sidebar-rest .siteclick-sidebar-rest-content-in {
    padding: 40px;
}
.siteclick-container .siteclick-modal-overlay,
.siteclick-container .siteclick-sidebar-overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--sc-overlay-soft);
    z-index: 100000000;
    display:none;
    backdrop-filter: blur(3px);
}
.siteclick-container .siteclick-modal-overlay {
    z-index: 10000000000 !important;
}

@media screen and (max-width: 1224px) {
    .siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-extralarge {
        max-width: 100%;
    }
}

@media screen and (max-width: 1024px) {
    .siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-large {
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-medium {
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-small {
        max-width: 100%;
    }
}


/* ── DONKERE SIDEBARS ─────────────────────────────────────────────────────
   Twee schrijfwijzen, één mechanisme:
     .siteclick-sidebar-rest-dark  — library-/pickersidebars (secties,
                                     componenten, media, iconen, fonts)
     .sc-dark                      — elke andere sidebar/element die donker
                                     moet worden; de shell zet hem op de
                                     wrappers .siteclick-editor-sidebars(-sub)
                                     zodat ALLE sidebars die vanuit een live
                                     editor openen donker zijn.
   tokens.css definieert de donkere --sc-*-waarden voor beide selectors, dus
   alles wat met tokens is geschreven (inputs, knoppen, tabs, kaarten, stalen,
   switches, notices) volgt automatisch — en zonder de class is exact dezelfde
   markup weer licht. Hieronder alleen wat de tokens niet dekken: het
   paneelvlak zelf. */
.siteclick-sidebar-rest.siteclick-sidebar-rest-dark,
.siteclick-container .sc-dark .siteclick-sidebar-rest {
    background: var(--sc-color-dark);
    border-color: var(--sc-color-dark);
}

.siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-dark .siteclick-panel-title-in,
.siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-dark .siteclick-panel-content,
.siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-dark .siteclick-panel-body-in,
.siteclick-container .sc-dark .siteclick-sidebar-rest .siteclick-panel-title-in,
.siteclick-container .sc-dark .siteclick-sidebar-rest .siteclick-panel-content,
.siteclick-container .sc-dark .siteclick-sidebar-rest .siteclick-panel-body-in {
    background: var(--sc-color-dark);
}

.siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-dark .siteclick-panel-footer,
.siteclick-container .sc-dark .siteclick-sidebar-rest .siteclick-panel-footer {
    border-color: var(--sc-color-dark-muted);
    background: var(--sc-color-dark);
}

/* Een heel document dat donker is (style-editor-host in de opmaak-sidebar):
   het vlak onder korte inhoud mag niet wit blijven. */
body.sc-dark {
    background: var(--sc-color-bg);
    color: var(--sc-color-text);
    min-height: 100vh;
}

/* Het paneel-iframe (node-panel/style-editor-host) heeft z'n eigen donkere
   <body class="sc-dark"> — de omhullende sidebar mag er niet wit doorheen
   schijnen tijdens het laden. */
.siteclick-container .sc-dark .siteclick-ve-sidebar-iframe,
.siteclick-container .sc-dark .siteclick-ve-styleeditor-iframe {
    background: var(--sc-color-dark);
}



/*** SITECLICK BUILDER **/
.siteclick-container .siteclick-builder-bar {
    height: 40px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    line-height: 38px;
}

.siteclick-container .siteclick-builder-bar-in {
    display: table;
    table-layout: auto;
    color: var(--sc-color-white);
    width: 100%;
    padding: 0px 10px 0px 40px;
}

.siteclick-container .siteclick-builder-bar-left,
.siteclick-container .siteclick-builder-bar-right {
    display: table-cell;
    vertical-align: top;
    text-align: left;
}
.siteclick-container .siteclick-builder-bar-right {
    text-align: right;
}

.siteclick-builder-bar-right .siteclick-buttons {
    display: inline-block;
    vertical-align: top;
    height: auto;
}

.siteclick-container .siteclick-builder-url {
    line-height: 20px;
    /* background: var(--sc-color-primary-soft); */
    display: inline-block;
    /* color: var(--sc-color-primary); */
    font-size: 10px;
    text-decoration: none;
    padding: 0px 5px;
    border-radius: 5px;
    position: relative;
    font-family: monospace;
}
[data-siteclick-builder-button]{
    display:none;
}
.siteclick-container .siteclick-sidebar-rest.siteclick-sidebar-rest-full {
    z-index: 100000000 !important;
}
.siteclick-sidebars .siteclick-sidebar-left{
    z-index: 1000000 !important;
}
.siteclick-sidebars .siteclick-toggles .toggle.toggle-right{
    z-index: 1000000000 !important;
}
.siteclick-sidebars .siteclick-sidebar-right{
    z-index: 1000000002 !important;
}
.siteclick-container .siteclick-sidebar-rest {
    z-index: 1000000003 !important;
}
.siteclick-container .siteclick-bar-header{
    z-index: 1000000000000004 !important;
}
/*** TOUR **/
.driver-active.siteclick-container .siteclick-bar-header {
    z-index: 1000000000 !important;
}
.driver-active .siteclick-sidebars .siteclick-sidebar-right {
    z-index: 1000000000 !important;
}

/*** Component Image chooser ***/
.siteclick-images {
    display: flex;
    flex-wrap: wrap;
    margin: 0px -0.5rem;
}
.siteclick-manager-row-column-content .siteclick-images {
    margin: 0px 0.4rem;
}
.siteclick-image {width: 120px;text-decoration: none;overflow: hidden;}

.siteclick-image.active .siteclick-image-in { background: var(--sc-color-primary); }
.siteclick-image.active .siteclick-image-title { color: var(--sc-color-white); }

.siteclick-image-in {
    background: var(--sc-color-surface);
    border-radius: 5px;
    margin: 0.5rem;
    cursor:pointer;
    text-decoration:none;
    overflow: hidden;
    padding: 0.25rem;
}
.siteclick-manager-row-column-content .siteclick-image-in {
    background: var(--sc-color-surface-alt);
}
.siteclick-image-in:hover {
    border-color: var(--sc-color-primary);
}

.siteclick-image-visual {
    aspect-ratio: 1/1;
    background-size: 100% auto;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-color: var(--sc-color-panel-bg);
}

.siteclick-image-title {
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    color: var(--sc-color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0px 0.5rem;
}

.siteclick-image-small {
    background: var(--sc-color-surface);
    border-radius: 5px;
    display: block;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
    padding: 0.25rem;
}

.siteclick-image-small-visual {
    width: 25px;
    height: 25px;
    display: table-cell;
    vertical-align: middle;
    background-size: 100% auto;
    background-repeat: unset;
    background-color: var(--sc-color-panel-bg);
    border-radius: 5px;
}

.siteclick-image-small-title {
    display: table-cell;
    padding-left: 1rem;
    vertical-align: middle;
}

.siteclick-image-small {
    margin-bottom: 0.5rem;
    background: var(--sc-color-surface);
}

.siteclick-image-small:hover {
    background: var(--sc-color-primary);
}
.siteclick-image-small-in {
    padding: 0.25rem;
}

.siteclick-image-small-in {
    display: table;
    width: 100%;
}

.siteclick-image-small-title {
    text-align: left;
    font-size: 10px;
    font-weight: 500;
    color: var(--sc-color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.siteclick-manager .siteclick-images-small {
    margin: 0px 0.5rem;
}

.siteclick-image-in:hover, .siteclick-image-small:hover {
    background: var(--sc-color-primary);
}
.siteclick-image-in:hover .siteclick-image-title, .siteclick-image-small:hover .siteclick-image-small-title{
    color: var(--sc-color-white);
}

.siteclick-image-small .siteclick-image-icon {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    text-align: center;
    line-height: 25px;
    background: var(--sc-color-border);
    color: var(--sc-color-text-muted);
}

.siteclick-image-icon i {
    position: relative;
    top: 2px;
}

.siteclick-image .siteclick-image-icon {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    text-align: center;
    background: var(--sc-color-border);
    color: var(--sc-color-text-muted);
    position: relative;
    font-size: 2.2rem;
}

.siteclick-image .siteclick-image-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*** COMPONENT: TILES **/
.siteclick-container .siteclick-tile {
    display: block;
    padding: 1.5rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    margin-bottom: 1rem;
    border: 2px solid var(--sc-color-surface);
    background: var(--sc-color-panel-bg);
}

.siteclick-container .siteclick-tile.siteclick-tile-borderless {
    border: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.siteclick-container .siteclick-tile.siteclick-tile-info {

}

a.siteclick-tile,
.siteclick-tile[data-sidebar-toggle]{
    cursor:pointer;
}
.siteclick-container .siteclick-tiles-main-titles {
    text-align: center;
    margin-bottom: 2rem;
}

.siteclick-container .siteclick-tile-main-title {
    color: var(--sc-color-primary);
}

.siteclick-container .siteclick-tile-main-subtitle {
    color: var(--sc-color-text-muted);
    font-weight: 400 !important;
}

.siteclick-container .siteclick-tiles-columns {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.siteclick-container .siteclick-tile-column {
    display: table-cell;
    vertical-align: top;
    padding: 0px 0.5rem;
    line-height: 18px;
}
.siteclick-container .siteclick-tile-borderless .siteclick-tile-column:first-child {
    padding-left: 0px;
}
.siteclick-container .siteclick-tile-borderless .siteclick-tile-column:last-child {
    padding-right: 0px;
}
.siteclick-container .siteclick-tile-table .siteclick-tile-column{
    vertical-align: top;
}
.siteclick-container .siteclick-tile-table.va-middle .siteclick-tile-column {
    vertical-align: middle;
}
.siteclick-tile-column-subs {
    vertical-align: top;
}
.siteclick-tile-column-count {
    text-align:right;
}

.siteclick-container .siteclick-tile-row {
    display: table-cell;
    vertical-align: top;
}

.siteclick-container .siteclick-tile-row-in {
    display: table;
    width: 100%;
    table-layout: fixed;
    vertical-align: top;
}
.siteclick-container .siteclick-tile-row-small {
    width: 25%;
}
.siteclick-container .siteclick-tile-row-medium{
    width: 50%;
}
.siteclick-container .siteclick-tile-row-large {
    width: 75%;
}

.siteclick-tile-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    margin-right: -1rem;
    /* de groep draagt de buitenmarge; tiles erin spacen via gap (margin-bottom 0) */
    margin-bottom: 1rem;
}
.siteclick-tile-group .siteclick-tile.siteclick-tile-large {
    width: 100% !important;
    flex: 0 0 calc(100% - 1rem);
}
.siteclick-tile-group .siteclick-tile {
    width: 50% !important;
    flex: 0 0 calc(50% - 1rem);
    margin-bottom: 0px;
}

.siteclick-tile-component {
    line-height: 1em;
}
.siteclick-tile-list-item {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.siteclick-tile-list-item-column {
    display: table-cell;
    vertical-align: top;
}


.siteclick-container .siteclick-tile-visual {
    left: 0px;
    position:relative;
}
.siteclick-container .siteclick-tile-visual i {
    font-size: 2rem;
    color: var(--sc-color-text-muted);
    vertical-align: middle;
}
.siteclick-container .siteclick-tile-table .siteclick-tile-visual {
    background: var(--sc-color-surface-alt);
}
.siteclick-container a.siteclick-tile:hover {
    border-color: var(--sc-color-border);
    color: var(--sc-color-primary);
}

.siteclick-tile-visual-in-small {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 3px;
    bottom: 3px;
    border-radius: 2px;
    background-size: cover;
}

.siteclick-tile:hover .siteclick-tile-component.siteclick-tile-hierarchy,
.siteclick-tile:hover .siteclick-tile-component.siteclick-tile-hierarchy .active{
    color: var(--sc-color-primary);
}
.siteclick-container .siteclick-tile:hover .siteclick-tile-text {
    color: var(--sc-color-primary) !important;
}

.siteclick-container .siteclick-tile:hover .siteclick-tile-visual {
    left: 5px;
}

.siteclick-container .siteclick-tile-text {
    margin-top: 0.5rem;
    color: var(--sc-color-text-muted);
}
.siteclick-container .siteclick-tile-table.siteclick-tile-small .siteclick-tile-text{
    margin-top: 0.25rem;
    font-size: 0.9rem;
    line-height: 1.5rem;
    font-family: 'Rubik';
}
.siteclick-container .siteclick-tile-subtitle {
    font-weight: 400 !important;
    color: var(--sc-color-text-subtle);
}

.siteclick-container .siteclick-tile-seperator {
    height: 2px;
    margin: 1rem 0px;
    background: var(--sc-color-surface);
}
.siteclick-container .siteclick-tile-seperator.siteclick-tile-seperator-transparent {
    background: var(--sc-color-transparent) !important;
    margin-bottom: 0px;
}

.siteclick-tiles-top-in {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.siteclick-tiles-top-column {
    display: table-cell;
    vertical-align: top;
    padding: 0px 0.5rem;
    color: var(--sc-color-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.siteclick-tiles-top {
    padding: 0.5rem 1rem;
}
.siteclick-tile-column-subs {
    margin: 0px -0.5rem;
}
.siteclick-tile-component.siteclick-tile-hierarchy {
    font-size: 0.9rem;
    color: var(--sc-color-text-muted);
    height: auto;
    vertical-align: top;
    padding-top: 3px;
    margin-bottom: 0px !important;
    line-height: 15px;
}

.siteclick-tile-component.siteclick-tile-hierarchy div, .siteclick-tile-component.siteclick-tile-hierarchy span {
    display: inline-block;
    vertical-align: top;
}

.siteclick-tile-component.siteclick-tile-hierarchy span:not(.highlight) {
    font-size: 8px !important;
    margin: 0px !important;
    color: var(--sc-color-text-muted);
    padding: 0px 3px;
    display: inline-block;
    vertical-align: middle;
}

.siteclick-tile-component.siteclick-tile-hierarchy div.active {font-size: 0.9rem !important; font-weight: 500;top: 0px;position: relative;color: var(--sc-color-text);line-height: inherit;}
.siteclick-tile-component.siteclick-tile-hierarchy div.empty {
    color: var(--sc-color-text-muted);
    font-weight: 400;
}
.siteclick-tile-hierarchy-label {
    position: relative;
    margin-left: 0.1rem;
}
.siteclick-tile-hierarchy-label span{
    display: block;
    background: var(--sc-color-primary);
    color: var(--sc-color-white) !important;
    border-radius: 3px;
    font-weight: 400;
    margin-top: 9px;
}
.siteclick-container .siteclick-tile-table .siteclick-tile-column:first-child {
    border-left: 0px !important;
}

.siteclick-tile.siteclick-tile-small {
    padding: 1rem;
}

.siteclick-tile.siteclick-tile-small .siteclick-tile-column.siteclick-tile-column-visual {
    width: 4rem !important;
}

.siteclick-tile.siteclick-tile-small .siteclick-tile-column.siteclick-tile-column-visual i {
    font-size: 2rem;
}


.siteclick-tile.siteclick-tile-table.siteclick-tile-small {
    background: var(--sc-color-surface)!important;
    border-radius: 5px !important;
    border-color: var(--sc-color-transparent) !important;
    margin-top: 0.5rem !important;
}

.siteclick-tile.siteclick-tile-table.siteclick-tile-small * {
    border-color: var(--sc-color-transparent) !important;
}

.siteclick-tile.siteclick-tile-table.siteclick-tile-small:hover {
    background: var(--sc-color-primary-soft) !important;
}

/* Compacte lijstrij (lijstprincipe, ronde 7): één item = één regel. */
.siteclick-container .siteclick-tile-table-small .siteclick-tile-row-in { min-height: 44px; }
.siteclick-container .siteclick-tile-table-small .siteclick-tile-column { padding-top: 6px; padding-bottom: 6px; }
.siteclick-container .siteclick-tile-table-small .siteclick-tile-component { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.siteclick-tiles-top.siteclick-tiles-top-table.siteclick-tiles-top-small .siteclick-tiles-top-in {
    background: var(--sc-color-panel-bg) !important;
    border-color: var(--sc-color-transparent) !important;
    background: var(--sc-color-panel-bg);
}

.siteclick-tiles-top.siteclick-tiles-top-table.siteclick-tiles-top-small  .siteclick-tiles-top-column {
    background: var(--sc-color-transparent) !important;
}

.siteclick-tile-titles-in {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.siteclick-tile-titles-in-left, .siteclick-tile-titles-in-right {
    display: table-cell;
    vertical-align: top;
}

.siteclick-tile-titles-in-right {
    width: 100px;
    text-align: right;
}

.siteclick-tile-title {
    margin-bottom: 0.25rem;
}



/** COMPONENT SWITCH — DE ja/nee-control van Siteclick **/
/*
   CANONIEKE MARKUP (JS-loos; de checkbox draagt de waarde, de label schakelt):

       <input type="hidden" name="x" value="0">
       <label class="sc-switch">
           <input type="checkbox" name="x" value="1" checked>
           <div><div class="siteclick-switch"><div class="siteclick-switch-in"></div></div></div>
       </label>

   Gebruik hem via @include('parts.switch', ['name' => 'x', 'on' => $bool]) —
   die partial rendert exact bovenstaande markup incl. de hidden 0 (zodat 'uit'
   expliciet gepost wordt) en een optioneel bijschrift.

   Maatvoering: 36×20px, radius 5px, dezelfde rand-/vlakkleuren als
   input/select, marge 0. Die maat sluit aan op .button-small (18px) en
   .sc-checklist-box (22px) en staat 1:1 gelijk aan .sc-np-switch in
   np-fields.css — wijzig ze ALTIJD samen, anders springt de switch in het
   live-editor-paneel uit de rij t.o.v. de rest van Siteclick.

   In het live-editor-PANEEL (eigen iframe zonder shared.css) heet dezelfde
   control .sc-np-switch (np-fields.css, markup: <x-np.switch>) — zelfde maat
   en kleuren, andere selectors. Buiten dat iframe: altijd parts.switch.

   Twee legacy-aanstuurvormen blijven werken en horen NIET nagebouwd te worden
   in nieuwe schermen:
   - .siteclick-switch.active  → stand via JS (voor rijen die geen checkbox
     posten maar een knop).
   - input:checked + …         → elke wrapper-vorm (label direct om de switch,
     of één div ertussen) schakelt mee; dekt ook de oude radio-variant.
*/
.siteclick-container .siteclick-switch {
    width: 36px;
    height: 20px;
    padding: 3px;
    margin: 0;
    background: var(--sc-color-surface);
    border: 1px solid var(--sc-color-surface-alt);
    border-radius: 5px;
    cursor: pointer;
}
.siteclick-container .siteclick-switch-in {
    position: relative;
    left: 0;
    width: 50%;
    height: 100%;
    background: var(--sc-color-panel-bg);
    border-radius: 3px;
    transition: left 0.15s ease;
}
.siteclick-container .siteclick-switch.active,
.siteclick-container input:checked + .siteclick-switch,
.siteclick-container input:checked + div .siteclick-switch {
    background: var(--sc-color-primary) !important;
    border-color: var(--sc-color-primary);
}
.siteclick-container .siteclick-switch.active .siteclick-switch-in,
.siteclick-container input:checked + .siteclick-switch .siteclick-switch-in,
.siteclick-container input:checked + div .siteclick-switch-in {
    left: 50%;
}

/* Wrapper van de canonieke markup: de checkbox zelf is onzichtbaar. */
.sc-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.sc-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
/* De checkbox zelf is onzichtbaar; toetsenbordfocus moet op de switch te zien
   zijn. */
.sc-switch input[type="checkbox"]:focus-visible + .siteclick-switch,
.sc-switch input[type="checkbox"]:focus-visible + div .siteclick-switch {
    outline: 2px solid var(--sc-color-primary);
    outline-offset: 2px;
}

/* Switch met bijschrift op één regel. */
.siteclick-switch-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.siteclick-switch-label {
    font-size: 0.85rem;
    color: var(--sc-color-text-muted);
}

.siteclick-container .siteclick-status-items {
    margin: 0px -0.25rem;
}
.siteclick-container .siteclick-status {
    vertical-align: middle;
    padding: 0px 5px;
    line-height: 20px;
    background: var(--sc-color-black);
    border-radius: 5px;
    color: var(--sc-color-white);
    font-weight: 500;
    display: inline-block;
    font-size: 9px !important;
    margin: 0px 0.25rem 0.25rem 0;
}

.siteclick-container .siteclick-status-small span {
    display: none;
}

.siteclick-status.siteclick-status-small {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50%;
    max-width: 8px;
    max-height: 8px;
    margin: 0px;
    padding: 0px !important;
    vertical-align: top;
    line-height: 8px;
    top: 6px !important;
    position: relative;
}


.siteclick-container .siteclick-tile-column .siteclick-status {
    margin: 0px !important;
}

.siteclick-container .siteclick-tile-visual {
    max-width: 100%;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    text-align: center;
    aspect-ratio: 1/1;
    width: 100%;
}
.siteclick-tile-group .siteclick-tile-visual {
    aspect-ratio: 1.5 / 1;
}
.siteclick-container .siteclick-tile-visual-in {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.siteclick-table .siteclick-container .siteclick-tile-visual-in {
    background-color: var(--sc-color-surface-alt);
}
.siteclick-table-simple {
    width: 100%;
    table-layout: fixed;
}
.siteclick-container .siteclick-tile-visual-small {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background-size: cover;
    border-radius: 5px;
}

.siteclick-container .siteclick-tile-qty {
    display: inline-block;
    background: var(--sc-color-primary);
    padding: 0px 5px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 500;
    color: var(--sc-color-white);
    vertical-align: middle;
    top: -2px;
    position: relative;
    margin-left: 0.5rem;
    left: 0px;
    font-family: 'Rubik' !important;
    line-height: 1.7em;
}
.siteclick-container .siteclick-inline-notice{
    display: block;
    background: var(--sc-color-primary);
    padding: 0px 5px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 500;
    color: var(--sc-color-white);
    vertical-align: middle;
    top: -2px;
    position: relative;
    margin-left: 0rem;
    left: 0px;
    font-family: 'Rubik' !important;
    line-height: 1.7em;
    padding-left: 17px !important;
    position: relative;
}

.siteclick-container .siteclick-tile-title .siteclick-inline-notice{
    margin-left: 0.5rem;
    display:inline-block;
}

.siteclick-inline-notice a {
    cursor: pointer;
    text-decoration: underline;
    color: inherit;
}

.siteclick-inline-notice a:hover {
    text-decoration: underline;
}

.siteclick-inline-notice {
    padding: 0px !important;
    background: var(--sc-color-transparent) !important;
    color: var(--sc-color-text-muted) !important;
    font-weight: 400 !important;
}

.siteclick-inline-notice span {
    width: 10px !important;
    height: 10px !important;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 5px;
    position: absolute;
    top: 3px;
    left: 0px;
}

.siteclick-card-notices span.siteclick-inline-notice {
    margin-left: 0px;
    clear: both;
    /* Voorkom tekstafbreking */
    /* Verberg overlopende tekst */
    line-height: 1.2em;
    padding-left: 1rem !important;
    display: block;
}

.siteclick-card-notices .siteclick-inline-notice span {
    position: absolute;
    left: 0;
    top: 1px;
}


.sitelick-inline-notice-animated span {
    animation: siteclickDotGlow 5s infinite;
}

@keyframes siteclickDotGlow {
    0%,
    51%,
    100% {
        background: #4D7EEA;
        box-shadow: none;
        transform: scale(1);
    }

    10% {
        background: #FFD84D;
        box-shadow:
                0 0 0 12px rgba(255, 216, 77, 0.18),
                0 0 25px rgba(255, 216, 77, 0.55);
        transform: scale(1.05);
    }

    50% {
        background: #FFD84D;
        box-shadow:
                0 0 0 12px rgba(255, 216, 77, 0),
                0 0 26px rgba(255, 216, 77, 0);
        transform: scale(1);
    }
}

.siteclick-card-notices {
    margin-top: 0.5rem;
}

.siteclick-container .siteclick-tile:hover .siteclick-tile-qty {
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
}

.siteclick-tile-component {
    margin-bottom: 0.5rem !important;
}

.siteclick-tile-component:last-child {
    margin-bottom: 0px !important;
}

.siteclick-tile-component.siteclick-tile-component-image img {
    max-width: 100%;
}
.siteclick-tile.siteclick-tile-table{
    border-radius: 0px !important;
    margin-bottom: 0px !important;
    margin-bottom: -1px;
    padding: 0px !important;
    border-collapse: collapse;
    background: var(--sc-color-panel-bg) !important;
    border: 2px solid var(--sc-color-border);
    border-top: 0px !important;
}

.siteclick-container .siteclick-tile-table .siteclick-tile-column:not(.siteclick-tile-column-has-childs){
    border: 2px solid var(--sc-color-surface);
    padding: 0.5rem 0.75rem;
    border-bottom: 0px !important;
    border-right: 0px !important;
    border-top: 0px !important;
}

.siteclick-tiles-top.siteclick-tiles-top-table {
    padding: 0px !important;
}

.siteclick-tiles-top.siteclick-tiles-top-table .siteclick-tiles-top-in {
    border: 2px solid var(--sc-color-surface);
    border-radius: 5px;
}

.siteclick-tiles-top-table .siteclick-tiles-top-column {
    padding: 0.2rem 0.75rem;
    background: var(--sc-color-surface);
}

/*** COMPONENT: STATUSDOT — gekleurd statusbolletje (tegeltitel, statusregel) **/
/* display/vertical-align staan er expliciet op: het bolletje wordt ook buiten
   een flex-container gebruikt (in een tegeltitel), en daar zou een inline span
   width/height negeren. */
.siteclick-statusbar-dot {
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--sc-color-text-subtle);
}

/*** COMPONENT: CHART-BARS — compacte trendbalkjes zonder library **/
.siteclick-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 44px;
}
.siteclick-chart-bar {
    flex: 1 1 0;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--sc-color-primary-soft-strong);
}
.siteclick-chart-bar.is-active {
    background: var(--sc-color-primary);
}
/* Basislijn voor de compacte variant (de grote heeft er al een): zonder deze
   lijn leest een grafiek met 0 gegevens niet meer als grafiek. */
.siteclick-chart-bars-axis {
    border-bottom: 1px solid var(--sc-color-surface-alt);
}
.siteclick-chart-caption {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--sc-color-text-subtle);
}

/** SITECLICK TABLES **/
.siteclick-table.siteclick-table-vertical {
    border: 2px solid var(--sc-color-surface);
    border-radius: 5px;
}
.siteclick-table.siteclick-table-vertical table {
    width: 100%;
    table-layout: fixed;
}

.siteclick-table.siteclick-table-vertical table td {
    vertical-align: middle;
    padding: 1rem;
}


.siteclick-table.siteclick-table-vertical table tr:first-child {
}

.siteclick-table.siteclick-table-vertical table tr {}

.siteclick-table.siteclick-table-vertical table tr.siteclick-table-title td{
    padding-top: 0.25rem !important;
    text-align: left;
    background: var(--sc-color-surface);
    color: var(--sc-color-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    padding-bottom: 0.25rem !important;
}

.siteclick-table-horizontal .siteclick-table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    opacity: 0;
}
/* Een schermvullende tabel die DIRECT onder de subheader staat (geen
   .siteclick-content-in-body/-wrapper ervoor, zie collecties-items) krijgt
   dezelfde ademruimte als een tabel in een wrapper; anders schuift de kop
   tegen de vaste subheader aan. */
.siteclick-container .siteclick-content-in > .siteclick-table-horizontal:first-child {
    margin-top: 30px;
}

.siteclick-table-horizontal .siteclick-table-wrapper table {
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 100%;
}

.siteclick-table-horizontal .siteclick-table-wrapper table thead tr {
    background: var(--sc-color-surface);
    font-weight: 500;
}
.siteclick-table-horizontal .siteclick-table-wrapper table thead tr.siteclick-thead-top {
    background: var(--sc-color-transparent) !Important;
}

.siteclick-table-horizontal .siteclick-table-wrapper table thead tr.siteclick-thead-top td{
    border-color: var(--sc-color-transparent) !Important;
}
.siteclick-table-horizontal .siteclick-table-wrapper table thead tr.siteclick-thead-top .siteclick-thead-top-item{
    background: var(--sc-color-panel-bg);
    border-radius: 0px !important;
    color: var(--sc-color-text-muted);
}

.siteclick-table-horizontal .siteclick-table-wrapper th,
.siteclick-table-horizontal .siteclick-table-wrapper td {
    white-space: nowrap;
    border: 2px solid var(--sc-color-border);
    padding: 0.5rem !important;
    white-space: normal;
    width: 175px;
    min-width: 175px;
    border-collapse: collapse;
    vertical-align:middle;
}
.siteclick-table-horizontal .siteclick-table-wrapper tbody td {
    vertical-align: top;
}

.siteclick-table-horizontal .siteclick-table-wrapper td .acf-field{
    margin: 0px !important;
}
.siteclick-table-horizontal .siteclick-table-wrapper thead td {
    padding: 0.2rem 0.5rem !important;
}
.siteclick-width-xxxxxxs {width: 25px !important; min-width: 25px !important;}
.siteclick-width-xxxxxs {width: 45px !important; min-width: 45px !important;}
.siteclick-width-xxxxs {width: 55px !important; min-width: 55px !important;}
.siteclick-width-xxxs {width: 65px !important; min-width: 65px !important;}
.siteclick-width-xxs {width: 75px !important; min-width: 75px !important;}
.siteclick-width-xs {width: 95px !important; min-width: 95px !important;}
.siteclick-width-s {width: 110px !important; min-width: 110px !important;}
.siteclick-width-sm {width: 125px !important; min-width: 125px !important;}
.siteclick-width-m {width: 140px !important; min-width: 140px !important;}
.siteclick-width-l {width: 200px !important; min-width: 200px !important;}
.siteclick-width-xl {width: 250px !important; min-width: 250px !important;}
.siteclick-width-xxl {width: 400px !important; min-width: 400px !important;}
.siteclick-width-xxxl {width: 500px !important; min-width: 500px !important;}
.siteclick-width-auto {width: auto !important; min-width: auto !important;}
.siteclick-table-horizontal .siteclick-table-wrapper td.siteclick-sticky {padding-right: 50px !important;}

.siteclick-table-horizontal .siteclick-table-wrapper table th.siteclick-sticky.siteclick-sticky-right,
.siteclick-table-horizontal .siteclick-table-wrapper table td.siteclick-sticky.siteclick-sticky-right,
.siteclick-table-horizontal .siteclick-table-wrapper table th.siteclick-sticky.siteclick-sticky-left,
.siteclick-table-horizontal .siteclick-table-wrapper table td.siteclick-sticky.siteclick-sticky-left{
    position: sticky;
    background: var(--sc-overlay-white-strong);
    z-index: 2;
    backdrop-filter: blur(3px);
}
.siteclick-table-horizontal .siteclick-table-wrapper table th.siteclick-sticky.siteclick-sticky-right,
.siteclick-table-horizontal .siteclick-table-wrapper table td.siteclick-sticky.siteclick-sticky-right {
    right: -1px;
}
.siteclick-table-horizontal .siteclick-table-wrapper table th.siteclick-sticky.siteclick-sticky-left,
.siteclick-table-horizontal .siteclick-table-wrapper table td.siteclick-sticky.siteclick-sticky-left {
    left: -1px;
    padding-right: 0.5rem !important;
}
.siteclick-table-horizontal .siteclick-table-wrapper table th.siteclick-sticky.siteclick-sticky-right:before,
.siteclick-table-horizontal .siteclick-table-wrapper table td.siteclick-sticky.siteclick-sticky-right:before,
.siteclick-table-horizontal .siteclick-table-wrapper table th.siteclick-sticky.siteclick-sticky-left:before,
.siteclick-table-horizontal .siteclick-table-wrapper table td.siteclick-sticky.siteclick-sticky-left:before{
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 2px;
    background: var(--sc-color-surface-alt);
}
.siteclick-table-horizontal .siteclick-table-wrapper table th.siteclick-sticky.siteclick-sticky-right:before,
.siteclick-table-horizontal .siteclick-table-wrapper table td.siteclick-sticky.siteclick-sticky-right:before {
    left: -1px;
}
.siteclick-table-horizontal .siteclick-table-wrapper table th.siteclick-sticky.siteclick-sticky-left:before,
.siteclick-table-horizontal .siteclick-table-wrapper table td.siteclick-sticky.siteclick-sticky-left:before {
    right: -1px;
}

.siteclick-table.siteclick-table-horizontal {
    margin: 0px 40px;
}


.siteclick-table-horizontal span.displaying-num {
    display: block;
    font-size: 10px;
    color: var(--sc-color-text-muted);
}
.siteclick-table-wrapper tr td:not(.siteclick-sticky) {
    filter: none;
    opacity: 1;
}
.siteclick-table-wrapper tr.is-saving td:not(.siteclick-sticky),
.siteclick-table-wrapper tr.is-deleting td:not(.siteclick-sticky){
    filter: blur(1px);
    opacity: 0.5;
}
.siteclick-table .acf-field-image img {
    max-height: 50px !important;
}
.siteclick-table .acf-field-image .acf-label {
    display:none !important;
}


.siteclick-container .siteclick-admin-title-image-in {
    position: relative;
}

.siteclick-table-horizontal .siteclick-table-wrapper td.siteclick-placeholder {
    padding: 0px !important;
    border-top: 0px !important;
    background: var(--sc-color-panel-bg) !Important;
    border-bottom: 0px !important;
}

.siteclick-table-horizontal .siteclick-table-wrapper td.siteclick-placeholder.siteclick-placeholder-left {
    border-left: 0px !important;
}

.siteclick-table-horizontal .siteclick-table-wrapper td.siteclick-placeholder.siteclick-placeholder-right {
    border-right: 0px !important;
}

.siteclick-table-horizontal .siteclick-table-wrapper td.siteclick-placeholder {
    min-width: auto;
    width: auto;
}
.button-update-table {
    opacity: 0;
}

.siteclick-container .siteclick-table-horizontal .siteclick-table-wrapper .siteclick-placeholder-empty {
    padding: 0px !important;
    margin: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
}
.siteclick-container .siteclick-table-horizontal .siteclick-table-wrapper .siteclick-placeholder-empty.hidden {
    display: none;
}

.siteclick-container .siteclick-table-horizontal .siteclick-table-wrapper tbody .siteclick-placeholder-empty {
    border-bottom: 2px solid var(--sc-color-border) !important;
}

.siteclick-container .siteclick-table-horizontal .siteclick-table-wrapper thead tr:not(.siteclick-thead-top) .siteclick-placeholder-empty {
    background: var(--sc-color-surface) !important;
    border-bottom: 2px solid var(--sc-color-border) !important;
}

@media screen and (max-width: 1224px) {
    .siteclick-table-horizontal .siteclick-table-wrapper table th.siteclick-sticky.siteclick-sticky-right,
    .siteclick-table-horizontal .siteclick-table-wrapper table td.siteclick-sticky.siteclick-sticky-right,
    .siteclick-table-horizontal .siteclick-table-wrapper table th.siteclick-sticky.siteclick-sticky-left,
    .siteclick-table-horizontal .siteclick-table-wrapper table td.siteclick-sticky.siteclick-sticky-left {
        position: relative !important;
        background: var(--sc-color-transparent) !Important;
        backdrop-filter: none !important;
    }
    .siteclick-table-horizontal .siteclick-table-wrapper table td.siteclick-sticky.siteclick-sticky-right:before,
    .siteclick-table-horizontal .siteclick-table-wrapper table th.siteclick-sticky.siteclick-sticky-left:before {
        display:none !Important;
    }
}

@media screen and (max-width: 1024px) {
    .siteclick-table-vertical,
    .siteclick-table-vertical table,
    .siteclick-table-vertical table tbody,
    .siteclick-table-vertical table tr,
    .siteclick-table-vertical table tr td {
        display:block !Important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .siteclick-table-vertical table thead {
        display: none;
    }
    /* R1: de toolkit zet de koprij niet in <thead> maar als
       tr.siteclick-table-title in <tbody>. Zonder deze regel verschijnt die
       kop onder 1024px als een los, betekenisloos blok boven elke tabel. */
    .siteclick-table-vertical table tr.siteclick-table-title {
        display: none !important;
    }

    .siteclick-table.siteclick-table-vertical table td {
        padding: 0px 1rem !important;
    }
    .siteclick-table.siteclick-table-vertical table td:first-child {
        padding-top: 1rem !important;
    }
    .siteclick-table.siteclick-table-vertical table td:last-child {
        padding-bottom: 1rem !important;
    }
}
@media screen and (max-width: 768px) {
    .siteclick-container .siteclick-tile-column-break {
        display: block;
    }
    .siteclick-tile-column.siteclick-tile-column-usage {
        width: 100% !important;
        padding: 0.5rem !important;
        border: 0px !important;
    }
}



.siteclick-buttons-table-update {
    display:none !important;
}

.is-unsaved-row-change .siteclick-buttons-table-update {
    display:block !important;
}



/** SiteClick Manager **/


.siteclick-hidden-repeater{display:none !important;}

.siteclick-template-preview-image {
    position: absolute;
    left: 0x;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 2px solid var(--sc-color-border);
    background: var(--sc-color-panel-bg);
}
.siteclick-template-preview-image img {
    width: 100%;
    height: auto;
}
.acf-postbox.seamless>.inside>.acf-field {
    padding-top: 0px !important;
}




.siteclick-manager {
    margin: 0px 0px;
    display: block;
}
.siteclick-manager-row {
    margin: 0px -0.5rem;
}
.siteclick-manager-row-in {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-collapse: collapse;
}

.siteclick-manager-row-columns {
    display: flex;
    flex: 1;
    margin-bottom: 1rem;
}

.siteclick-manager-row-column {
    flex: 1;                    /* verdeelt kolommen gelijk */
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    background: var(--sc-color-surface);
    border-collapse: collapse;
    border-radius: 5px;
    margin: 0px 0.5rem;
    overflow-y: hidden;
    min-width: 300px !important;
    width: 300px !important;
}
.siteclick-manager-row-column-row {
    margin-top: 2rem;
}

.siteclick-manager-row-column-row:first-child {
    margin-top: 0px;
}
.siteclick-manager-in {position: relative;display: block;}

span.siteclick-wiki-toggle {
    font-size: 10px;
    padding: 2px;
    cursor: pointer;
    color: var(--sc-color-primary);
}


.siteclick-manager-row-column-title-in {
    display: table;
    width: 100%;
}

.siteclick-manager-row-column-title-in-left, .siteclick-manager-row-column-title-in-right {
    display: table-cell;
    vertical-align: middle;
    padding: 0.5rem 1rem;
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text);
    border-bottom: 0;
    font-weight: 500;
    text-decoration: none;
}

.siteclick-manager-row-column-title-in-right {
    text-align: right;
}


.siteclick-manager-row-column-content {
    padding: 0px;
}

.siteclick-manager-filter-top {
    padding: 0px 1rem;
    color: var(--sc-color-text-muted);
    text-decoration: none;
    background: var(--sc-color-surface);
    border-bottom: 0;
}

.siteclick-manager-filter-top div {
    display: inline-block;
    margin-right: 0.5rem;
    cursor: pointer;
    font-size: 11px;
}

.siteclick-manager-filter-top div.active {
    font-weight: 500;
    color: var(--sc-color-primary);
}

.siteclick-manager-filter-top div:hover {
    color: var(--sc-color-primary);
}

.siteclick-manager-row-column-subtitle-in {
    background: var(--sc-color-surface);
    display: table;
    width: 100%;
    table-layout: fixed;
}

.siteclick-manager-row-column-subtitle-in-left, .siteclick-manager-row-column-subtitle-in-right {
    display: table-cell;
    vertical-align: middle;
}

.siteclick-manager-row-column-subtitle-in-right {
    text-align: right;
}

.siteclick-manager-row-column-subtitle-in-right .button {
    background: var(--sc-color-transparent) !important;
    color: var(--sc-color-primary) !important;
}

.siteclick-manager-row-column-subtitle-in-left {
    padding: 1rem 1rem 0.5rem;
    color: var(--sc-color-text);
    text-decoration: none;
    font-size: 11px;
    border-bottom: 0;
    font-weight: 500;
    line-height: 1em !important;
}

[data-manager-loop-items="1"] .siteclick-image{width: 100%;}
[data-manager-loop-items="2"] .siteclick-image{width: 100%;}
[data-manager-loop-items="3"] .siteclick-image{width: 50%;}
[data-manager-loop-items="4"] .siteclick-image{width: 50%;}
[data-manager-loop-items="5"] .siteclick-image{width: 50%;}
[data-manager-loop-items="6"] .siteclick-image{width: 50%;}

.siteclick-images.siteclick-images-header[data-manager-loop-items="1"] .siteclick-image {width: 100%;}
.siteclick-images.siteclick-images-header[data-manager-loop-items="2"] .siteclick-image {width: 50%;}
.siteclick-images.siteclick-images-header[data-manager-loop-items="3"] .siteclick-image {width: 50%;}
.siteclick-images.siteclick-images-header[data-manager-loop-items="4"] .siteclick-image {width: 50%;}

.siteclick-images.siteclick-images-footer[data-manager-loop-items="1"] .siteclick-image {width: 100%;}
.siteclick-images.siteclick-images-footer[data-manager-loop-items="2"] .siteclick-image {width: 50%;}
.siteclick-images.siteclick-images-footer[data-manager-loop-items="3"] .siteclick-image {width: 50%;}
.siteclick-images.siteclick-images-footer[data-manager-loop-items="4"] .siteclick-image {width: 50%;}

.siteclick-images.siteclick-images-header .siteclick-image-visual {aspect-ratio: 6/1;max-width: 100%;}
.siteclick-images.siteclick-images-footer .siteclick-image-visual { aspect-ratio: 3/1; }
.siteclick-images.siteclick-images-layouts .siteclick-image-visual {aspect-ratio: 6/9;}
.siteclick-images.siteclick-images-bricks .siteclick-image-visual {aspect-ratio: 2/1;}
.siteclick-images.siteclick-images-loop-products .siteclick-image-visual {aspect-ratio: 2/1;}
.siteclick-images.siteclick-images-loop-productcats .siteclick-image-visual {aspect-ratio: 2/1;}
.siteclick-images.siteclick-images-components .siteclick-image-visual { aspect-ratio: 3/1; }

.siteclick-images.siteclick-images-footer .siteclick-image-visual {
    background-position-y: bottom;
}

[data-filter-content] {
    display: none;
}

[data-filter-content].active {
    display: block;
}

.siteclick-manager-filter-top div span {
    width: 15px;
    height: 15px;
    font-size: 10px;
    background: var(--sc-color-surface-alt);
    font-weight: 700;
    color: var(--sc-color-text-muted);
    vertical-align: middle;
    line-height: 15px;
    font-size: 8px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
}

.siteclick-manager-filter-top div.active span {
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
}

.siteclick-manager-subtitle {margin-top: 0.5rem;}

.siteclick-manager-row-column-title-in-right {
    vertical-align: middle;
}

.siteclick-manager-filter-actions {
    top: 3px;
    position: relative;
}

/*** SITECLICK FILTERS ***/
.siteclick-filter {
    margin-bottom: 1rem;
}
.siteclick-filter-in {
    overflow-x: scroll;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;

}

.siteclick-filter-in::-webkit-scrollbar {
    width: 0px;        /* Breedte 0 pixels */
    height: 0px;       /* Hoogte 0 pixels voor horizontale scrollbars */
    background: transparent; /* Maak de achtergrond transparant */
}

/* Voor Firefox */
.siteclick-filter-in {
    scrollbar-width: none; /* Verberg de scrollbar */
    scrollbar-color: transparent transparent; /* Maak thumb en track transparant */
}

.siteclick-filter-item {
    height: 32px;
    line-height: 32px;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    margin-right: 0.5rem;
    width: 150px;
}
.siteclick-filter-item:last-child {
    margin-right: 0px;
}
.siteclick-filter-item input {
    width: 100%;
}
/* Een filterveld mag ook een keuzelijst zijn (.siteclick-filter-select is de
   wrapper uit de toolkit); die vult z'n filter-item net als een invoerveld. */
.siteclick-filter-select {
    display: block;
}
.siteclick-filter-item select {
    width: 100%;
}

.siteclick-filter-filter .siteclick-filter-in {
    display: block;
    height: 0px;
    visibility:hidden;
}
.siteclick-filter-filter.active .siteclick-filter-in {
    height: 35px !important;
    visibility:visible;
}
.siteclick-filter-modus {
    height: 0px;
    overflow:hidden;
}
.siteclick-filter-modus.active {
    height: 35px !important;
}

.siteclick-filter-items, .siteclick-admin-title-tabs {
    display: inline-block;
    vertical-align: top;
}

.siteclick-filter-top-in {
    display: table;
    width: 100%;
    margin-bottom: 0.5rem;
}

.siteclick-filter-top-left, .siteclick-filter-top-right {
    display: table-cell;
    vertical-align: middle;
}
.siteclick-filter-top-left .siteclick-buttons {
    display: inline-block;
    vertical-align: middle;
}
.siteclick-filter-top-left .siteclick-buttons .button {
    margin-bottom: 0px !important;
}

.siteclick-filter-top-right {
    text-align: right;
}

.siteclick-filter-qty {
    display: inline-block;
    color: var(--sc-color-black);
    font-weight: 400;
    margin-right: 1rem;
    vertical-align: middle;
}
.siteclick-filter-qty span {
    font-weight: 500;
}

.siteclick-filter-toggle {
    display: inline-block;
}

.siteclick-filter-toggle.button {
    vertical-align: middle;
}

.siteclick-steps-in {
    display: table;
    width: 100%;
    height: 24px;
    background: var(--sc-color-text-muted);
    border-radius: 5px;
    color: var(--sc-color-white);
    overflow:hidden;
    margin-top: 4px;
}

.siteclick-steps-in .siteclick-step img {
    max-height: 10px;
    max-width: 10px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
    position: relative;
    top: -1px;
}

.siteclick-steps-in .siteclick-step {
    display: table-cell;
    vertical-align: middle;
    height: 24px;
    text-align: center;
    display: table-cell;
    text-align: center;
    color: var(--sc-color-surface);
    vertical-align: middle;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    line-height: 24px;
    padding: 0px 1rem;
}

.siteclick-steps-in .siteclick-step:not(.active) {
    background: var(--sc-color-text-muted) !important;
}

.siteclick-step.active.active-prio-1 {
    background: var(--sc-color-red) !important;
}
.siteclick-step.active.active-prio-2 {
    background: var(--sc-color-orange) !important;
}
.siteclick-step.active.active-prio-3 {
    background: var(--sc-color-green) !important;
}
.siteclick-step.active.active-prio-4 {
    background: var(--sc-color-blue) !important;
}
.siteclick-step.active.active-prio-5 {
    background: var(--sc-color-purple) !important;
}

.siteclick-steps-in .siteclick-step.active {
    background: var(--sc-color-primary-hover);
}

[data-filter-item],
.siteclick-filter-part .siteclick-tile{
    display:none !important;
}
[data-filter-item].active,
.siteclick-filter-part .siteclick-tile.active{
    display:block !important;
    width: 100%;
}
[data-filter-item].active.not-visible,
.siteclick-filter-part .siteclick-tile.active.not-visible{
    display:none !important;
}


.siteclick-length-one,
.siteclick-length-multiple {
    display:none;
}

/*** PAGINATION ***/
.siteclick-pagination-in {
    width: auto;
    height: 28px;
    line-height: 28px;
    font-size: 10px;
}

.siteclick-pagination-in > div,
.siteclick-pagination-in > a{
    display: inline-block !important;
    margin: 0px 0.1rem  !important;
    text-decoration:none !Important;
}

.siteclick-pagination {
    text-align: right;
}

.siteclick-pagination {
    display: inline-block;
}

.siteclick-pagination-in > div:last-child,
.siteclick-pagination-in > a:last-child{
    margin-right: 0px !important;
}

.siteclick-pagination-in > div.siteclick-form-component {
    width: 3rem !important;
}

.siteclick-pagination-in > div.siteclick-form-component input {
    text-align: center;
    height: 28px !important;
}

.siteclick-pagination .pagination-text {
    padding: 0px 0.25rem  !important;
}








.pagination-links * {
    display: inline-block;
    vertical-align: middle;
}

.pagination-links input {
    height: 29px !important;
    padding: 0px !important;
    margin: 0px !important;
    line-height: 29px !important;
    min-width: 29px !important;
    text-align: center;
}

span.tablenav-paging-text {position: relative;top: 3px;margin: 0px 0.5rem;font-size: 10px;color: var(--sc-color-text-muted);}

.siteclick-sort-item {
    display: inline-block;
    padding: 0;
    margin: 0px -0.25rem;
    border-radius: 5px 0px 0px 5px;
    font-weight: 500;
    font-size: 0.9rem !important;
    cursor: pointer;
    color: var(--sc-color-text-subtle);
    height: 25px;
    position:relative;
    z-index: 0;
    margin-right: 0.25rem;
    margin-left: -0.25rem !important;
}

.siteclick-sort-item:not(.active):hover{
    z-index: 10;
}
.siteclick-sort-item:not(.active):hover {
    background: var(--sc-color-border);
    color: var(--sc-color-text);
}
.siteclick-sort-item .siteclick-sort-item-arrows{
    display:inline-block;
    opacity: 0;
    background: var(--sc-color-border);
    position: absolute;
    border-radius: 0px 5px 5px 0px;
    top: 0px;
    width: 46px;
    height: 100%;
    padding: 1px 0px;
    vertical-align: top;
}
.siteclick-sort-item.active .siteclick-sort-item-arrows,
.siteclick-sort-item:hover .siteclick-sort-item-arrows{
    opacity: 1;
}
.siteclick-sort-item.active .siteclick-sort-item-arrows {
    position: relative;
    background: var(--sc-color-transparent) !important;
}

.siteclick-sort-item .siteclick-sort-item-arrows a {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    top: 2px;
    position: relative;
    border-radius: 5px;
    text-align: center;
    margin-right: 3px;
    float: left;
}
.siteclick-sort-item .siteclick-sort-item-arrows a.active {
    background: var(--sc-color-primary);
}


.siteclick-sort-item .siteclick-sort-item-arrows a:hover {
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
}

.siteclick-sort-item a {
    color: inherit;
    text-decoration: none;
}

.siteclick-table-horizontal .siteclick-table-wrapper thead th, .siteclick-table-horizontal .siteclick-table-wrapper thead td {
    color: var(--sc-color-text-muted);
    font-size: 0.8rem;
}

.siteclick-sort-item > a {
    height: 25px;
    display: inline-block;
    padding: 0px 0.25rem 0 0.25rem;
    padding-top: 1px;
    font-size: 0.8rem;
}
.siteclick-sort-item.active > a {}

.siteclick-sort-item {
    position: relative;
    margin-right: 0.25rem;
}

.siteclick-sort-item.active {
    border-radius: 5px !important;
    margin-right: 0.5rem;
}

.siteclick-sort-item:hover .siteclick-sort-item-arrow {
    background: var(--sc-color-border);
}

.siteclick-sort-item .siteclick-sort-item-arrows a.active {
    background: var(--sc-color-border);
    color: var(--sc-color-text-subtle);
}
.siteclick-filter-active-item {
    display: inline-block;
    background: var(--sc-color-text-muted);
    color: var(--sc-color-white);
    font-size: 10px;
    line-height: 18px;
    padding-left: 0.5rem;
    border-radius: 5px;
}

.siteclick-filter-active-item a {
    width: 14px;
    height: 14px;
    background: var(--sc-color-black);
    text-align: center;
    display: inline-block;
    margin: 2px;
    border-radius: 5px;
    vertical-align: top;
    line-height: 14px;
    color: var(--sc-color-white);
}

.siteclick-filter-active-item a:hover {
    background: var(--sc-color-black);
    color: var(--sc-color-white);
}


/** PAGE LINK **/
.siteclick-page-link {
    font-size: 0.9rem !important;
    font-weight: 500;
    top: 0px;
    position: relative;
    color: var(--sc-color-text);
    text-decoration:none;
    width: 100%;
    white-space: normal;
    max-width: 100px;
    line-height: 1.1rem;
    display: block;
    padding-top: 0.4rem;
}

.siteclick-page-link:hover {
    color:var(--sc-color-primary);
}







































/** TODO ONDERDERVERDELEN **/
/** SiteClick Nav items **/
.admin-sidebar-row {
    position: absolute;
    top: 0;
    height: 100%;
    overflow-y: scroll;
    left: 0;
    right: 0;
}
.admin-sidebar-row-actions {
    height: 20%;
}
.admin-sidebar-row.admin-sidebar-row-magic {
    top: 0;
    border-top: 2px solid var(--sc-color-border);
}
.admin-sidebar-row.admin-sidebar-row-wiki {
    top: 50%;
    border-top: 2px solid var(--sc-color-border);
}

.admin-sidebar-row.admin-sidebar-row-tools {
    height: 100%;
}
.admin-sidebar-right-title {
    padding: 10px;
    font-weight: 500;
    color: var(--sc-color-text-muted);
    position: absolute;
    top: 0;
    display: block;
    left: 0;
    right: 0;
    font-size: 0.9rem;
}

.admin-sidebar-right-title-columns {
    display: table;
    width: 100%;
}

.admin-sidebar-right-title-column {
    display: table-cell;
    vertical-align: top;
}

.admin-sidebar-right-title-column.admin-sidebar-right-title-column-right {text-align: right;}


.admin-sidebar-right-title.admin-sidebar-right-group-title {
    position: relative;
    padding: 0px;
    margin-bottom: 0.25rem;
}
.admin-sidebar-row.admin-sidebar-row-magic .admin-sidebar-right-title {
    color: var(--sc-color-purple) !important;
}

.admin-sidebar-row .admin-sidebar-right-title span {
    background: var(--sc-color-primary) !Important;
    color: var(--sc-color-white);
    display:inline-block;
    vertical-align:middle;
    font-size: 8px;
    line-height: 10px;
    padding: 2px 3px 1px;
    border-radius: 3px;
    position: relative;
    top: -1px;
    margin-left: 1px;
}
.admin-sidebar-row.admin-sidebar-row-magic .admin-sidebar-right-title span {
    background: var(--sc-color-purple) !important;
}
.admin-sidebar-row.admin-sidebar-row-wiki .admin-sidebar-right-title {
    color: var(--sc-color-primary) !Important;
}
.admin-sidebar-right-title svg {
    width: 25px;
    height: 25px;
    vertical-align: middle;
    fill: var(--sc-color-primary) !important;
    color: var(--sc-color-primary) !important;
}

.admins-sidebar-right-group {
    margin-bottom: 1.5rem;
}

.admin-sidebar-right-content {
    padding: 10px;
    padding-top: 35px;
    font-size: 0.9rem;
    line-height: 1.2rem;
}
.admin-sidebar-right-content-with-footer {
    padding: 10px;
    padding-bottom: 35px;
    font-size: 0.85rem;
    line-height: 1.2rem;
}
.admin-sidebar-right-version {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    padding: 0px 10px;
    line-height: 30px;
    height: 30px;
    color: var(--sc-color-text-muted);
    background: var(--sc-color-surface);
    font-weight: 500;
    text-align: center;
    font-size: 10px;
}

.admin-sidebar-right-no, .admin-sidebar-right-tour {
    color: var(--sc-color-text-muted);
    font-size: 0.9rem;
}
.admin-sidebar-right-tour-single,
.admin-sidebar-right-tour-multiple {
    display:none;
}

.admin-sidebar-right-tour {
    border-bottom: 1px solid var(--sc-color-border);
    margin: 0px -10px;
    padding: 0px 10px;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    display: none;
}
.admin-sidebar-right-tour-button {
    margin-top: 0.5rem;
}
@media screen and (max-width: 1224px) {
    .admin-sidebar-right-tour {
        display: none !important;
    }
}

.admin-sidebar-right-button {
    background: var(--sc-color-primary-soft);
    margin-top: 0.5rem;
    border-radius: 5px;
    padding: 5px 8px;
    line-height: 1em;
    color: var(--sc-color-primary);
    font-weight: 400;
    cursor: pointer;
    font-size: 0.85rem;
}
.admin-sidebar-right-button.magic-button {
    background: var(--sc-color-purple-soft);
    color: var(--sc-color-purple);
}

.admin-sidebar-right-button:hover {
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
}

.admin-sidebar-right-button.magic-button:hover {
    background: var(--sc-color-purple);
    color: var(--sc-color-white);
}

[data-sidebar-content] {display:none;}
[data-siteclick-sidebar-left-content="websites"] [data-sidebar-content="websites"] {display:block;}
[data-siteclick-sidebar-left-content="organizations"] [data-sidebar-content="organizations"] {display:block;}
[data-siteclick-sidebar-left-content="templates"] [data-sidebar-content="templates"] {display:block;}
[data-siteclick-sidebar-left-content="editor"] [data-sidebar-content="editor"] {display:block;}
[data-siteclick-sidebar-right-content="wiki"] [data-sidebar-content="wiki"] {display:block;}
[data-siteclick-sidebar-right-content="settings"] [data-sidebar-content="settings"] {display:block;}
[data-siteclick-sidebar-right-content="magic"] [data-sidebar-content="magic"] {display:block;}
[data-siteclick-sidebar-right-content="log"] [data-sidebar-content="log"] {display:block;}
[data-siteclick-sidebar-right-content="inbox"] [data-sidebar-content="inbox"] {display:block;}


.admin-sidebar-right-buttons .button {
    display: block;
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem !important;
}



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







    .notifications-ticker {
        right: 0px !important;
    }



    .admin-switch-frame .admin-switch-frame-in {
        right: 50px !important;
        left: 0 !important;
        border-right: 2px solid var(--sc-color-border);
        border-left: 0px !important;
    }

    .admin-switch-frame .toggle.toggle-right.toggle-frame-left {
        left: auto;
        right: 10px;
        top: 0px;
    }

}

#siteclick-nav-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
#siteclick-nav-search {
    appearance: none;
}

.siteclick-nav-item-in {
    display: table;
    width: 100%;
    table-layout: fixed;
    padding: 0px;
}

.siteclick-nav-item-in-icon {
    width: 21px;
    height: 21px;
    text-align: right;
    padding-right: 6px;
    position:relative;
}
.siteclick-nav-group-link .siteclick-nav-item-in-icon {
}

.siteclick-nav-group-link .siteclick-nav-item-in-icon.siteclick-nav-item-in-visual {
    height: 23px;
    width: 30px !important;
}
.siteclick-nav-group.siteclick-nav-group-link {
    margin: 5px;
}
.siteclick-nav-item-in-icon-visual {
    width: 17px;
    height: 17px;
    border-radius: 2px;
    background-size: cover;
    background-color: transparent;
    display: block;
    text-align: center;
}
.siteclick-nav-item-in-icon.siteclick-nav-item-in-visual .siteclick-nav-item-in-icon-visual {
    width: 23px;
    height: 23px;
}

.siteclick-nav-item-in-icon-visual.siteclick-nav-item-in-icon-visual-small {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 11px !important;
    height: 11px !important;
    border-radius: 2px;
}

.siteclick-nav-item-in-text span.url {
    display: block;
    margin: 0px;
    font-family: monospace;
    font-size: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sc-color-text-subtle);
    font-weight: 700;
}

.siteclick-nav-item-in-text {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--sc-color-text-subtle);
    padding-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.siteclick-form-select-radiobuttons.siteclick-form-component-variant-dark .siteclick-nav-item-in-text {
    color: var(--sc-color-text-subtle);
}

.siteclick-nav-item {
    text-decoration: none;
    display: block;
    padding: 3px;
    outline:none !important;
    padding-right: 10px;
    padding-left: 5px;
    color: inherit !important;
}
.siteclick-nav-item-in-toggle span {
    border-radius: 10px;
    height: 15px;
    width: 15px;
    text-align: center;
    color: var(--sc-color-white);
    background: var(--sc-color-primary);
    vertical-align: middle;
    line-height: 15px;
    font-size: 8px;
    font-weight: 700;
    display: inline-block;
}

.siteclick-nav-item-in-count {
    width: 20px;
    height: 15px;
    text-align: right;
    padding-left: 5px;
}

.siteclick-nav-item-in-toggle {
    width: 20px;
    height: 15px;
    text-align: right;
}

.siteclick-nav-item-in-icon, .siteclick-nav-item-in-text, .siteclick-nav-item-in-count, .siteclick-nav-item-in-toggle {
    display: table-cell;
    vertical-align: middle;
    line-height: 1.1em;
}
.siteclick-nav-group-link .siteclick-nav-item-in-icon,
.siteclick-nav-group-link .siteclick-nav-item-in-text,
.siteclick-nav-group-link .siteclick-nav-item-in-count,
.siteclick-nav-group-link .siteclick-nav-item-in-toggle{
    vertical-align: middle !important;
}
.siteclick-nav-item.siteclick-nav-item-sub {
    margin: 0px;
    padding: 1px;
    position: relative;
    padding-right: 5px;
    padding-left: 8px;
}

.siteclick-nav-item.siteclick-nav-item-sub .siteclick-nav-item-in-text {
    font-size: 0.85rem;
    font-weight: 400;
    padding-left: 13px;
    color: var(--sc-color-text-muted);
    padding-top: 1px;
    line-height: 16px;
}

.siteclick-nav-group {
    margin-bottom: 0px !important;
}
.siteclick-nav-group-sub {
    border-radius: 5px;
}
.siteclick-nav-group-sub:focus,
.siteclick-nav-group-sub:active,
.siteclick-nav-group-sub:hover,
.siteclick-nav-group-sub.active,
.siteclick-nav-group-sub.open {
    background: var(--sc-overlay-primary-soft);
}

.siteclick-nav-item-sub.siteclick-nav-item.active .siteclick-nav-item-in-text {
    color: var(--sc-color-primary);
    font-weight: 500;
}


.siteclick-nav-item-in-icon i, .siteclick-nav-item-in-toggle i {
    font-size: 0.75rem;
    line-height: 16px;
    display: inline-block;
    vertical-align: middle;
    color: var(--sc-color-text-muted);
    position: relative;
    top: 0px;
}

.siteclick-nav-item-in-toggle i {
    font-size: 8px;
    color: var(--sc-color-text-muted);
}

.siteclick-nav-group.open,
.siteclick-nav-group.active,
.siteclick-nav-group:hover {
    background: var(--sc-color-nav-group-active-bg);
}

.siteclick-nav-group-sub-subs,
.siteclick-nav-group-sub-sub-subs,
.siteclick-nav-group-sub-sub-sub-subs{
    padding-left: 8px;
}

.siteclick-nav-group {
    margin: 10px;
    background: var(--sc-color-surface);
    border-radius: 5px;
}

.siteclick-nav-group-sub {
    margin: 0px 5px;
    border-radius: 5px;
}
.siteclick-nav-group-subs,
.siteclick-nav-group-sub-subs,
.siteclick-nav-group-sub-sub-subs,
.siteclick-nav-group-sub-sub-sub-subs{
    display:none;
}
.siteclick-nav-group.active .siteclick-nav-group-subs,
.siteclick-nav-group-sub.active > .siteclick-nav-group-sub-subs,
.siteclick-nav-group-sub.active .siteclick-nav-group-sub-sub.active .siteclick-nav-group-sub-sub-subs,
.siteclick-nav-group-sub.active > .siteclick-nav-group-sub-sub-subs,
.siteclick-nav-group-sub.active .siteclick-nav-group-sub-sub-sub.active .siteclick-nav-group-sub-sub-sub-subs{
    display:block;
}

.siteclick-nav-item-in-toggle span {
    border-radius: 5px;
    color: var(--sc-color-text-muted);
    background: var(--sc-color-surface-alt);
    cursor: pointer;
    line-height: 15px;
}
.siteclick-nav-item-in-toggle span:hover {
    background: var(--sc-color-surface-alt) !important;
    color: var(--sc-color-text-muted) !important;
}

.siteclick-nav-group.open .siteclick-nav-item-in-toggle span:hover,
.siteclick-nav-group:hover .siteclick-nav-item-in-toggle span:hover,
.siteclick-nav-group:hover .siteclick-nav-item-in-toggle span:hover {
    color: var(--sc-color-surface-alt) !important;
    background: var(--sc-color-primary-hover) !important;
}
.siteclick-nav-group:hover .siteclick-nav-item-main .siteclick-nav-item-in-text,
.siteclick-nav-group.open .siteclick-nav-item-main .siteclick-nav-item-in-text{
    color: var(--sc-color-dark);
}
.siteclick-nav-group.open .siteclick-nav-group-sub .siteclick-nav-item-in-toggle span{
    background: var(--sc-color-surface-dark);
}

.siteclick-nav-group.open .siteclick-nav-group-sub .siteclick-nav-item-in-toggle span i {
    color: var(--sc-color-text-muted);
}

.siteclick-nav-group.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span,
.siteclick-nav-group:hover > .siteclick-nav-item .siteclick-nav-item-in-toggle span,
.siteclick-nav-group-sub.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span,
.siteclick-nav-group-sub > .siteclick-nav-item:hover .siteclick-nav-item-in-toggle span,
.siteclick-nav-group-sub-sub.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span,
.siteclick-nav-group-sub-sub > .siteclick-nav-item:hover .siteclick-nav-item-in-toggle span,
.siteclick-nav-group-sub-sub-sub.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span,
.siteclick-nav-group-sub-sub-sub > .siteclick-nav-item:hover .siteclick-nav-item-in-toggle span{
    background: var(--sc-color-primary);
}



.siteclick-nav-group.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span i,
.siteclick-nav-group:hover > .siteclick-nav-item .siteclick-nav-item-in-toggle span i,
.siteclick-nav-group-sub.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span i,
.siteclick-nav-group-sub > .siteclick-nav-item:hover .siteclick-nav-item-in-toggle span i,
.siteclick-nav-group-sub-sub.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span i,
.siteclick-nav-group-sub-sub > .siteclick-nav-item:hover .siteclick-nav-item-in-toggle span i,
.siteclick-nav-group-sub-sub-sub.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span i,
.siteclick-nav-group-sub-sub-sub > .siteclick-nav-item:hover .siteclick-nav-item-in-toggle span i {color: var(--sc-color-white);}

.siteclick-nav-item-in-icon i {
    font-size: 13px;
    position: relative;
    line-height: 1em;
    line-height: 15px;
    /* top: -2px; */
}

.siteclick-nav-item.open .siteclick-nav-item-in-text,
.siteclick-nav-group.open .siteclick-nav-item-main .siteclick-nav-item-in-text,
.siteclick-nav-group.open .siteclick-nav-item-main .siteclick-nav-item-in-icon i,
.siteclick-nav-group:hover .siteclick-nav-item-main .siteclick-nav-item-in-icon i{
    color: var(--sc-color-dark) !important;
}
.siteclick-nav-item-sub:hover .siteclick-nav-item-in-text{color: var(--sc-color-primary) !important;}
.siteclick-nav-item.siteclick-nav-item-sub:hover {
    color: var(--sc-color-primary);
}


.siteclick-nav-item.siteclick-nav-item-sub:hover {
    color: var(--sc-color-primary) !important;
}

.siteclick-nav-group-subs {
    padding-bottom: 5px;
}
.siteclick-nav-group .siteclick-nav-item-in-toggle span i.icon-minus,
.siteclick-nav-group.open .siteclick-nav-item-main .siteclick-nav-item-in-toggle span i.icon-plus,
.siteclick-nav-group-sub.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span i.icon-plus,
.siteclick-nav-group-sub-sub.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span i.icon-plus,
.siteclick-nav-group-sub-sub-sub.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span i.icon-plus {
    display:none;
}
.siteclick-nav-group.open .siteclick-nav-item-main .siteclick-nav-item-in-toggle span i.icon-minus,
.siteclick-nav-group-sub.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span i.icon-minus,
.siteclick-nav-group-sub-sub.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span i.icon-minus,
.siteclick-nav-group-sub-sub-sub.open > .siteclick-nav-item .siteclick-nav-item-in-toggle span i.icon-minus  {
    display:block;
}

.siteclick-nav-item-in-text span {
    font-weight: 400;
    font-size: 0.8em;
    display:inline-block;
    margin-left: 3px;
}

.siteclick-nav-item-in-text .siteclick-nav-tags {
    display: none; /* JS maakt deze 'block' bij match */
}

.siteclick-nav-tag {
    margin-right: 4px;
}

.siteclick-nav-item-in-text mark,
.siteclick-nav-tag mark,
.highlight{
    background: var(--sc-color-primary-soft-strong) !important;
    color: var(--sc-color-text-strong) !important;
    font-size: inherit !important;
}

.siteclick-nav-group-seperator {
    height: 1px;
    background: var(--sc-color-primary-soft-strong);
    margin: 0.5rem 0px;
    margin-left: 2rem;
    margin-right: 10px;
}

.siteclick-nav > .siteclick-nav-group-seperator {
    display: none;
}

.siteclick-nav-group-sub-subs .siteclick-nav-group-seperator {
    margin-top: 2px;
    background: var(--sc-color-surface-dark);
    margin-left: 21px;
    margin-bottom: 2px;
}

.siteclick-nav-group-sub .siteclick-nav-item-in-toggle span {
    vertical-align: middle;
}

.siteclick-sidebar-footer {
    height: 40px;
    background: var(--sc-color-primary);
}

.siteclick-sidebar-footer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    border-bottom: 2px solid var(--sc-color-border);
    padding: 0px;
    background: var(--sc-color-panel-bg);
    z-index: 1;
    width: 100%;
}

.siteclick-sidebar-footer {
    top: 0;
    bottom: 0;
    border-top: 0;
    border-bottom: 2px solid var(--sc-color-border);
}

.siteclick-sidebar-footer-in-with-button {
    display: table;
    width: 100%;
}

.siteclick-sidebar-footer-in-with-button-left, .siteclick-sidebar-footer-in-with-button-right {
    display: table-cell;
    vertical-align: top;
}

.siteclick-sidebar-footer-in-with-button-right {
    width: auto;
    text-align: right;
    padding-right: 10px;
    white-space: nowrap;
}

.siteclick-sidebar-footer-in-with-button-right .siteclick-buttons {
    margin-top: 2px;
}

.siteclick-sidebar-content {
    margin: 25px 0px 0px;
    left: 0;
    width: 200px;
    position: absolute;
    float: left;
    z-index: 100000000;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    background: var(--sc-color-surface)!important;
    width: 200px !important;
    border-right: 2px solid var(--sc-color-surface-alt);
}

.siteclick-container .siteclick-sidebar-footer-in input {border: 0px;border-radius: 0px;width: 100%;padding: 0px 10px !important;font-size: 10px !important;font-weight: 500;line-height: 28px !important;min-height: auto;background: var(--sc-color-transparent);height: 28px;}
.siteclick-sidebar-footer-in input::placeholder {
    color: var(--sc-color-text-muted);
    font-weight: 400;
}






/*** SIDEBARS REST **/



.form-flow-top {
    background: var(--sc-color-primary-soft);
    border-radius: 5px;
    overflow: hidden;
}

.form-flow-top-in {
    display: table;
    width: 100%;
}

.form-flow-top-column {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: var(--sc-color-primary);
    padding: 5px;
}

.form-flow-top-column.active {
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
}

.magic-title {
    font-size: 1.2rem;
    line-height: 1em;
    color: var(--sc-color-text-strong);
    text-align: center;
    font-weight: 500;
    margin-bottom: 1em;
}



[data-sidebar="sidebar-magic"] .sidebar-top-in {
    background: var(--sc-color-purple-soft) !important;
    color: var(--sc-color-purple);
}

[data-sidebar="sidebar-magic"] .sidebar-close.admin-sidebar-close {
    background: var(--sc-color-purple);
}

[data-sidebar="sidebar-magic"] .sidebar-close.admin-sidebar-close:hover {
    background: var(--sc-color-purple-soft) !important;
    color: var(--sc-color-purple) !important;
}

.form-flow-footer {
    background: var(--sc-color-panel-bg);
    position: absolute;
    bottom: 0;
    left: 0px;
    right: 0px;
    height: 30px;
    border-top: 2px solid var(--sc-color-border);
    z-index: 10000;
    padding: 5px 20px;
}

.form-flow-footer-in {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.form-flow-footer-in-left, .form-flow-footer-in-right {
    display: table-cell;
    vertical-align: top;
}

.form-flow-footer-in-right {
    text-align: right;
}

.form-flow-item {
    margin: 0.5rem 0px;
    margin-bottom: 1rem;
}

.form-flow-item label {
    font-weight: 500;
}

.magic-prompt {
    border-radius: 5px;
    padding: 0.5rem;
    background: var(--sc-color-primary-soft-strong);
    color: var(--sc-color-primary);
    font-weight: 400;
}




/*** SiteClick Admin header **/
.siteclick-admin-header {
    padding-top: 82px;
}
.siteclick-admin-header[data-tabs="true"] {
    padding-top: 140px;
}
.siteclick-admin-header[data-tabs="false"] {
    padding-top: 82px;
}
body.wp-admin #wpbody-content>div.siteclick-admin-header {display:block !important;}




/*** TRANSITIONS **/
.siteclick-nav-item-in-text,
.siteclick-nav-item-in-icon i,
.siteclick-container .siteclick-bar-main-text,
.siteclick-image-title,
.siteclick-image-small-title,
.siteclick-page-link,
.siteclick-terms-toggle-label span{
    transition: color 250ms linear !important;
}

.siteclick-nav-group-sub{
    transition: background-color 250ms linear !important;
}
.siteclick-image-in,
.siteclick-image-small {
    transition: background 250ms linear !important;
}
.siteclick-nav-item-in-toggle span,
.siteclick-header a,
.siteclick-panel-close,
.siteclick-container .siteclick-bar-nav-group-toggle,
.siteclick-tile-text,
.siteclick-tile-title,
.siteclick-tile-subtitle,
.siteclick-tile-qty,
.siteclick-tile-hierarchy,
.siteclick-tile-hierarchy .active,
.siteclick-payment-method-in {
    transition: background-color 250ms linear,color 250ms linear !important;
}
.siteclick-tile {
    transition: background-color 250ms linear,color 250ms linear,border-color 250ms linear !important;
}
.siteclick-container .button,
.siteclick-sort-item,
.siteclick-sort-item .siteclick-sort-item-arrows a,
.siteclick-container .siteclick-subheader .siteclick-admin-title-tab{
    transition: background-color 150ms linear,color 150ms linear !important;
}

.siteclick-bar-main-toggle{
    transition: color 250ms, background-color 250ms, opacity 250ms, border-color 250ms linear;
}

.siteclick-sidebar-left,
.toggle-left{
    transition: left 250ms cubic-bezier(0.87, 0, 0.13, 1) !important;
}
.siteclick-tile-visual{
    transition: left 150ms linear;
}

.siteclick-container .button i {
    transition: left 250ms cubic-bezier(0.87, 0, 0.13, 1) !important;
}

.siteclick-subheader,
.siteclick-header,
.siteclick-footer{
    transition: left 250ms cubic-bezier(0.87, 0, 0.13, 1), right 250ms cubic-bezier(0.87, 0, 0.13, 1);
}
.siteclick-content-in,
.siteclick-header,
.siteclick-subheader,
.siteclick-footer{
    transition: left 250ms cubic-bezier(0.87, 0, 0.13, 1), right 250ms cubic-bezier(0.87, 0, 0.13, 1), padding-left 250ms cubic-bezier(0.87, 0, 0.13, 1), padding-right 250ms cubic-bezier(0.87, 0, 0.13, 1);
}
.siteclick-card-actions {
    transition: bottom 250ms cubic-bezier(0.87, 0, 0.13, 1), opacity 250ms cubic-bezier(0.87, 0, 0.13, 1);
}


.siteclick-sidebars .siteclick-toggles .toggle-item {
    transition: width 250ms cubic-bezier(0.87, 0, 0.13, 1), padding-left 250ms cubic-bezier(0.87, 0, 0.13, 1), padding-right 250ms cubic-bezier(0.87, 0, 0.13, 1), color 250ms linear, background-color 250ms linear;
}

.siteclick-sidebar-right,
.toggle-right,
.siteclick-notifications,
.siteclick-website-preview{
    transition: right 250ms cubic-bezier(0.87, 0, 0.13, 1) !important;
}
/* Alle sidebars schuiven op transform (zie het EDITOR-blok verderop): één
   transitie voor links én rechts, met een zachte ease-out i.p.v. de steile
   cubic-bezier(0.87,0,0.13,1) die halverwege een sprong maakte. */
.siteclick-sidebar-rest,
.siteclick-sidebar-rest-left,
.siteclick-editor-sidebar,
.siteclick-editor-sidebar-sub{
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* Tijdens het slepen van de viewerbreedte mag de linkerrand niet na-ijlen
   (zelfde guard als visual-editor.css voor .siteclick-sidebar-rest-left). */
body.sc-ve-resizing .siteclick-editor-sidebar,
body.sc-ve-resizing .siteclick-editor-sidebar-sub{
    transition: none !important;
}
.siteclick-filter-in,
.siteclick-filter-modus{
    transition: height 500ms cubic-bezier(0.87, 0, 0.13, 1) !important;
}

.siteclick-bar-main-count {
    transition: width 500ms cubic-bezier(0.87, 0, 0.13, 1) !important;
}
.siteclick-placeholder {
    transition: width 500ms cubic-bezier(0.87, 0, 0.13, 1),min-width 500ms cubic-bezier(0.87, 0, 0.13, 1) !important;
}

.siteclick-bar-main-toggle-text .count{
    transition: transform 250ms cubic-bezier(0.87, 0, 0.13, 1) !important;
}

a.siteclick-card .siteclick-card-image{
    transition: transform 250ms linear !important;
}

.siteclick-bar-main-logo img,
.siteclick-container .siteclick-bar-main-text span{
    transition: opacity 250ms cubic-bezier(0.87, 0, 0.13, 1) !important;
}
.siteclick-sort-item .siteclick-sort-item-arrows,
.siteclick-table-wrapper{
    transition: opacity 125ms linear !important;
}
.siteclick-bar-nav a{
    transition: opacity,background-color,color 250ms cubic-bezier(0.87, 0, 0.13, 1) !important;
}

.siteclick-table-wrapper tr td:not(.siteclick-sticky) {
    transition: filter 1000ms linear, opacity 1000ms linear, background-color 250ms linear, border-color 250ms linear;
}

td.is-unsaved-change {
    background-color: var(--sc-overlay-primary-soft);
}

@media screen and (max-width: 1224px) {
    .siteclick-sidebar-right,
    .toggle-right {
        transition: left 250ms cubic-bezier(0.87, 0, 0.13, 1) !important;
    }
}



.siteclick-subheader-in-content {
    white-space: nowrap;
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
}

.acf-icon {
    width: 30px;
    height: 30px;
    font-size: 9px !important;
    border-radius: 3px;
    background: var(--sc-color-surface) !important;
    color: var(--sc-color-text-strong) !important;
    border: 0px !important;
    line-height: 18px !important;
}

.acf-icon:before {
    font-size: 1em !important;
    position:relative;
    top: -1px;
}


.current-file-info {display: table;}

.current-file-info-left, .current-file-info-right {
    display: table-cell;
    vertical-align: middle;
    padding: 0.5rem;
}
.current-file-info-right {
    color: var(--sc-color-text-muted);
    font-size: 0.8rem;
}
.current-file-info {
    background: var(--sc-color-surface);
    border-radius: 5px;
}

.current-file-info-left img {
    max-width: 60px;
    max-height: 60px;
    border-radius: 5px;
}

.form-steps.form-steps-dark {
    color: var(--sc-color-text-muted);
}
.form-step {
    border-top: 2px solid var(--sc-color-panel-bg);
    padding: 2rem 0;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.form-step.active, .form-step.completed {
    opacity: 1;
}
.form-step:first-child {
    border-top: 0px !important;
}
.form-steps.form-steps-dark .form-step {
    border-color: var(--sc-color-surface);
}
.form-steps.form-steps-dark .form-step.active,
.form-steps.form-steps-dark .form-step.active .form-step-title-value {
}
.form-step-title {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.form-step-title-left, .form-step-title-right {
    display: table-cell;
    vertical-align: top;
}

.form-step-title-left {
    width: 50px;
}

.form-step-title-value {
    font-size: 1.2rem;
    margin-top: 0.5rem;
}
.form-steps.form-steps-dark .form-step-title-value {
    color: var(--sc-color-primary);
}

.form-step-title-left span,
.siteclick-task-list-item-number span{
    display: block;
    height: 2rem;
    width: 2rem;
    background: var(--sc-color-border) !important;
    text-align: center;
    line-height: 2rem;
    color: var(--sc-color-white);
    border-radius: 50%;
    font-weight: 500;
}

.form-step.active .form-step-title-left span,
.siteclick-task-list-item-number span {
    background: var(--sc-color-primary) !important;
}

.form-step.completed .form-step-title-left span {
    background: var(--sc-color-primary) !important;
}

.form-step-content {
    padding-left: 50px;
}

.form-step-title-right {
    font-weight: 500;
    font-size: 1em;
    line-height: 1.25rem;
    padding-top: 0.4rem;
    padding-bottom: 1rem;
}



.steps-in {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 28px;
    border-radius: inherit;
    overflow: hidden;
    font-size: 0.9rem;
    border-radius: 4px;
    line-height: 12px;
}
.filter-part .steps-filter:not(.tab-variant) .steps-in {
    font-size: 11px !important;
    line-height: 1em !important;
    height: 24px;
}
.steps-in .step {
    display: table-cell;
    text-align: center;
    color: var(--sc-color-text-subtle);
    border-left: 1px solid;
    vertical-align: middle;
}

.steps-in .step:first-child {
    border-left: 0px;
}

.steps-filter .step {
    cursor:pointer;
    border-color: var(--sc-color-transparent) !important;
    background: var(--sc-color-border) !important;
}
.steps-filter .step.active {
    opacity: 1;
    color: var(--sc-color-white);
}

.siteclick-progress-bar {
    display: block;
    height: 1rem;
    background: var(--sc-color-surface);
    line-height: 1rem;
    font-size: 0.75rem;
    border-radius: 2px;
    overflow: hidden;
}

.siteclick-progress-bar-width {
    background: var(--sc-color-primary);
    height: 1rem;
    text-align: center;
    color: var(--sc-color-white);
    font-weight: 500;
    min-width: 2rem;
}

.siteclick-progress-dark .siteclick-progress-bar {
    background: var(--sc-color-surface);
}



.blurred {
    filter: blur(5px);
    pointer-events: none !important;
    opacity: 0.5;
    cursor: not-allowed !important;
    display:none !important;
}



.siteclick-flow {margin: 80px 0px 40px;}

.siteclick-flow-in {
    margin: 0 auto;
    max-width: 800px;
    padding: 0px 50px;
    background: var(--sc-color-panel-bg) !important;
    border-radius: 5px;
    border: 2px solid var(--sc-color-surface);
}

.siteclick-flow-header {
    background: var(--sc-color-dark);
    display: table;
    width: 100%;
    height: 40px;
    line-height: 40px;
    position: fixed;
    left: 0;
    top: 0;
}

.siteclick-flow-header-image, .siteclick-flow-header-title {
    display: table-cell;
}

.siteclick-flow-header-title {
    text-align: right;
    padding-right: 1rem;
}

.siteclick-flow-footer {
    height: auto;
    line-height: 40px;
    padding: 0px 1rem;
    margin-top: 1rem;
}

.siteclick-flow-footer-in {
    display: table;
    width: 100%;
    table-layout: fixed;
    max-width: 800px;
    padding: 0px;
    margin: 0 auto;
}

.siteclick-flow-footer-left, .siteclick-flow-footer-right {
    display: table-cell;
    vertical-align: middle;
}

.siteclick-flow-footer-right {
    text-align: right;
}

.siteclick-flow-progress {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.siteclick-flow-header-title {
    font-size: 0.9rem;
    color: var(--sc-color-white);
    font-weight: 400;
}

.check input:checked ~ .value a, .radio input:checked ~ .value a {
    text-decoration: underline !important;
}

.siteclick-bg-dark .check, .siteclick-bg-dark .radio,
.siteclick-bg-dark .check a, .siteclick-bg-dark .radio a{
    color: var(--sc-color-white);
}

.siteclick-inline-message {
    background: var(--sc-color-primary-soft-strong) !important;
    color: var(--sc-color-dark) !important;
    line-height: 1em;
    font-size: 0.8rem;
    padding: 0.5rem;
    text-align: center;
    font-weight: 400;
}

.siteclick-tile-component.siteclick-tile-text.siteclick-tile-component.siteclick-tile-text-url {
    color: var(--sc-color-text-muted);
    font-family: monospace;
    font-weight: 700;
    font-size: 10px;
}


.siteclick-usage {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.siteclick-usage-item {
    display: table;
    width: 100%;
}

.siteclick-usage-item-label,
.siteclick-usage-item-usage,
.siteclick-usage-item-qty,
.siteclick-usage-item-number{
    display: table-cell;
    vertical-align: middle;
}

.siteclick-usage-item-usage-out {
    height: 6px;
    background: var(--sc-color-surface-alt);
    width: 100%;
    display: block;
    border-radius: 5px;
}
.siteclick-usage-item-usage-in {
    height: 6px;
    background: var(--sc-color-primary);
    width: 100%;
    display: block;
    position: relative;
    border-radius: 4px;
}

.siteclick-usage-item-qty {
    width: 4rem;
    text-align: right;
}

.siteclick-usage-item {
    font-size: 1rem;
    color: var(--sc-color-text-muted);
    margin-bottom: 0.75rem;
}

.siteclick-usage-item-label {width: 120px;}

.siteclick-pricing-table {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.siteclick-pricing-table-item {
    display: table-cell;
    /* text-align: center; */
    /* background: var(--sc-color-surface); */
    /* padding: 0.5rem; */
}


.siteclick-pricing-table-item span {
    display: block;
    font-weight: 400;
    font-size: 0.75rem;
}

.siteclick-pricing-table-item ul {
    display: inline;
    text-decoration: line-through;
    font-size: 0.8em;
}

.siteclick-pricing-table {
    font-size: 0.9rem;
    color: var(--sc-color-text-subtle);
    line-height: 1rem;
    font-weight: 700;
}

.siteclick-pricing-table-item-progress {
    height: 6px;
    background: var(--sc-color-border);
    border-right: 3px solid var(--sc-color-surface);
    margin-bottom: 1rem;
    margin-top: 6px;
}

.siteclick-pricing-table-item-progress-in {
    height: 6px;
    background: var(--sc-color-green) !important;
}

.siteclick-pricing-table-item.active {
    color: var(--sc-color-green) !important;
}

.siteclick-pricing-table-item-progress-in span,
.siteclick-usage-item-usage-in span{
    position: absolute;
    width: 16px;
    height: 16px;
    display: inline-block;
    background: var(--sc-color-dark);
    border-radius: 2px;
    color: var(--sc-color-white) !important;
    text-align: center;
    font-size: 9px;
    left: 100%;
    margin-left: -7px;
    margin-top: -7px;
    line-height: 16px;
    font-weight: 600;
    border-radius: 50%;
    border: 2px solid white;
}

.siteclick-pricing-table-item-progress-in {
    position: relative;
}


.siteclick-container .siteclick-tile-subtitle .siteclick-tile-qty {
    top: -1px;
}

.siteclick-pricing-table-item:first-child .siteclick-pricing-table-item-progress, .siteclick-pricing-table-item:first-child .siteclick-pricing-table-item-progress-in {
    border-radius: 3px 0px 0px 3px;
}

.siteclick-pricing-table-item:last-child .siteclick-pricing-table-item-progress, .siteclick-pricing-table-item:last-child .siteclick-pricing-table-item-progress-in {
    border-radius: 0px 3px 3px 0px;
    border-right: 0px;
}

.siteclick-pricingtable {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.siteclick-pricingtable-row {
    display: flex;
    width: 100%;
}

.siteclick-pricingtable-row:last-child {
    border-bottom: 0;
}

.siteclick-pricingtable-label {
    flex: 0 0 200px;
    min-width: 0;
    padding: 1rem;
    display: flex;
    align-items: center;
    font-weight: 600;
    box-sizing: border-box;
    background: var(--sc-color-surface);
}
.siteclick-pricingtable-label.no-bg {
    background: var(--sc-color-panel-bg) !important;
}

.siteclick-pricingtable-plan {
    flex: 1 1 0;
    min-width: 0;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    border-left: 0;
    background: var(--sc-color-panel-bg);
}

.siteclick-pricingtable-row {
    border-bottom: 2px solid var(--sc-color-border);
}

.siteclick-pricingtable-row.siteclick-pricingtable-footer {
}

.siteclick-pricingtable-head .siteclick-pricingtable-plan {
}

.siteclick-pricingtable-plan-title {
}

.siteclick-pricingtable-footer .siteclick-pricingtable-plan {
    flex-direction: column;
    gap: 10px;
    justify-content: start;
}
.siteclick-pricingtable-plan .siteclick-title {
    margin-bottom: 0px !important;
}

.siteclick-tile-component.siteclick-tile-thumb {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    line-height: 1.5rem;
    font-family: 'Rubik';
    white-space: nowrap;
    clear: both;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--sc-color-text);
    font-weight: 500;
}

.siteclick-title-thumb-in {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
    border-radius: 2px;
    margin-right: 0.5rem !important;
    position: relative;
    overflow: hidden;
}

span.siteclick-tile-thumb-image {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}


@media (max-width: 767px) {
    .siteclick-pricingtable {
        overflow-x: auto;
    }

    .siteclick-pricingtable-row {
        min-width: 720px;
    }
}


.siteclick-tile-thumbs {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    flex-wrap: nowrap;
    align-items: flex-start;
    overflow: hidden;
    height: 75px;
    padding-right: 50px;
    gap: 1rem;
}

.siteclick-tile-thumbs .siteclick-tile-thumb {
    position: relative;
    flex: 0 0 75px;
    width: 75px;
    height: 75px;
}
.siteclick-tile-thumbs.siteclick-tile-thumbs-extrasmall{
    height: 65px;
}

.siteclick-tile-thumbs.siteclick-tile-thumbs-extrasmall .siteclick-tile-thumb {
    flex: 0 0 65px;
    width: 65px;
    height: 65px;
}

.siteclick-tile-thumbs.siteclick-tile-thumbs-extrasmall-with-title{
    height: 65px;
}

.siteclick-tile-thumbs.siteclick-tile-thumbs-extrasmall-with-title .siteclick-tile-thumb {
    flex: 0 0 50px;
    width: 50px;
    height: 65px;
}
.siteclick-card [class^="siteclick-text-"], .siteclick-card [class*=" siteclick-text-"], .siteclick-card [class^="siteclick-title-"], .siteclick-card [class*=" siteclick-title-"] {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.siteclick-card-title-small {
    text-align: center;
    font-size: 8px;
    line-height: 10px;
    white-space: nowrap;       /* Voorkom tekstafbreking */
    overflow: hidden;          /* Verberg overlopende tekst */
    text-overflow: ellipsis;
    margin-top: 5px;
}

.siteclick-card-image.siteclick-tile-thumb.siteclick-tile-thumb-circle .siteclick-card-image-in {
    border-radius: 50%;
}

.siteclick-tile-thumbs .siteclick-tile-thumb:first-child {
    margin-right: 0;
}

.siteclick-tile-thumbs .siteclick-tile-thumb-in {
    width: 80px;
    height: 80px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box;

    /* subtiele scheiding */
    border: 2px solid var(--sc-color-panel-bg);
    border-radius: 3px;
    overflow:hidden;
    border-radius: 10px;
    overflow: hidden;
}




/* gradient rechts */
.siteclick-tile-thumbs::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, var(--sc-color-transparent) 0%, var(--sc-color-panel-bg) 100%);
}


.siteclick-image-text {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.siteclick-image-text-image, .siteclick-image-text-text {
    display: table-cell;
    vertical-align: middle;
}

.siteclick-image-text-image {
    width: 4rem;
}

.siteclick-image-text-image-in {
    width: 3rem;
    height: 3rem;
    background: var(--sc-color-black);
    border-radius: 5px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.button-in-button button {
    color: inherit !important;
    background: inherit !important;
    appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
}
.siteclick-buttons.siteclick-buttons-justified .button-in-button {
    padding: 0px !important;
}

.siteclick-terms-toggle-toggle.active {
    max-height: 500px;
    height: 500px;
    width: 100%;
    font-size: 9px;
    overflow: scroll;
    border: 1px solid var(--sc-color-dark);
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 5px;
    line-height: 1.5em;
}

.siteclick-terms-toggle-toggle {
    height: 0px;
    overflow: hidden;
}

.siteclick-terms-toggle.siteclick-terms-toggle-dark .siteclick-terms-toggle-toggle {
    color: var(--sc-color-white);
}
.siteclick-terms-toggle-label span {text-decoration: underline;cursor:pointer;}

.siteclick-terms-toggle-label span:hover {
    color: var(--sc-color-white);
}

.siteclick-terms-toggle-label {
    max-width: 75%;
    margin: 0 auto;
}
.siteclick-user-thumb-large {
    text-align: center;
}

.siteclick-user-thumb-large img {
    margin: 0 auto;
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sc-color-text-muted);
}


.siteclick-task-list-item-in {
    display: table;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 1rem;
    background: var(--sc-color-surface);
    color: var(--sc-color-text-subtle);
}

.siteclick-task-list-item-status,
.siteclick-task-list-item-icon,
.siteclick-task-list-item-text,
.siteclick-task-list-item-button,
.siteclick-task-list-item-number {
    display: table-cell;
    vertical-align: top;
    padding: 1rem;
}

.siteclick-task-list-item-number {
    width: 40px;
}
.siteclick-task-list-item-button {
    width: 50px;
    text-align: right;
}

.siteclick-task-list-item-status {
    width: 80px;
}

.siteclick-task-list-item-icon {
    width: 40px;
    text-align: center;
    font-size: 1.5rem;
    color: var(--sc-color-text-subtle);
}

.siteclick-task-list-item-in.siteclick-task-todo, .siteclick-task-list-item-in.siteclick-task-todo i {
    color: var(--sc-color-primary);
}

.siteclick-task-list-item-in.siteclick-task-done, .siteclick-task-list-item-in.siteclick-task-done i {
    color: var(--sc-color-green);
}

.siteclick-task-list-item-in.siteclick-task-todo {
    background: var(--sc-color-primary-soft-strong);
}

.siteclick-task-list-item-in.siteclick-task-done {
    background: var(--sc-color-green-soft);
}


.siteclick-task-list-item-number span {
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.8rem;
    background: var(--sc-color-text-subtle) !important;
}

.siteclick-task-list-item-in.siteclick-task-done .siteclick-task-list-item-number span{
    background: var(--sc-color-green) !important;
}
.siteclick-task-list-item-in.siteclick-task-todo .siteclick-task-list-item-number span{
    background: var(--sc-color-primary) !important;
}

.siteclick-content-in-body {
    container-type: inline-size;
}

.siteclick-cards {
    gap: 2rem;
    display: grid;
    container-type: inline-size;
}

.siteclick-cards[data-card-items="1"] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.siteclick-cards[data-card-items="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.siteclick-cards[data-card-items="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.siteclick-cards[data-card-items="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.siteclick-cards[data-card-items="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.siteclick-cards[data-card-items="6"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.siteclick-cards[data-card-items="7"] {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.siteclick-cards[data-card-items="8"] {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.siteclick-cards[data-card-items="9"] {
    grid-template-columns: repeat(9, minmax(0, 1fr));
}

@container (max-width: 1224px) {
    .siteclick-cards[data-card-items="6"],
    .siteclick-cards[data-card-items="7"],
    .siteclick-cards[data-card-items="8"],
    .siteclick-cards[data-card-items="9"] {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@container (max-width: 1024px) {
    .siteclick-cards[data-card-items="5"],
    .siteclick-cards[data-card-items="6"],
    .siteclick-cards[data-card-items="7"],
    .siteclick-cards[data-card-items="8"],
    .siteclick-cards[data-card-items="9"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container (max-width: 768px) {
    .siteclick-cards[data-card-items="4"],
    .siteclick-cards[data-card-items="5"],
    .siteclick-cards[data-card-items="6"],
    .siteclick-cards[data-card-items="7"],
    .siteclick-cards[data-card-items="8"],
    .siteclick-cards[data-card-items="9"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .siteclick-cards[data-card-items="3"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 480px) {
    .siteclick-cards[data-card-items="3"],
    .siteclick-cards[data-card-items="4"],
    .siteclick-cards[data-card-items="5"],
    .siteclick-cards[data-card-items="6"],
    .siteclick-cards[data-card-items="7"],
    .siteclick-cards[data-card-items="8"],
    .siteclick-cards[data-card-items="9"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.siteclick-card-image {
    aspect-ratio: 1/1;
    margin-bottom: 1rem;
    border-radius: 5px;
    overflow:hidden;
    transform: translateY(0px);
}
a.siteclick-card:not(.siteclick-card--installing):hover .siteclick-card-image {
    transform: translateY(-5px);
}

.siteclick-card-image-in {
    background-size: cover !important;
    aspect-ratio: 1/1;
    background: var(--sc-color-surface);
    z-index: 0;
}

.siteclick-card-labels {
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 1;
}

.siteclick-card.siteclick-tile {
    padding: 0px !important;
    background: var(--sc-color-transparent) !important;
    border: 0px !important;
}


.siteclick-card-image {
    perspective: 800px;
}

.siteclick-card-image-screen {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
}

.siteclick-card-image-screen {
    position: absolute;
    left: 15%;
    top: 15%;
    right: 15%;
    bottom: 15%;
    border-radius: 5px;
    overflow:hidden;
    z-index: 0;
    background-size: cover;
    background-position: top;
    background-color: var(--sc-color-surface-alt);
}

.siteclick-card-image-screen.siteclick-card-image-screen-small {
    left: 35%;
    right: 35%;
    top: 35%;
    bottom: 35%;
    background: var(--sc-color-panel-bg);
    background-size: cover;
    background-position: center;
}

.siteclick-card.siteclick-card-horizontal {
    display: table !important;
    width: 100%;
}

.siteclick-card.siteclick-card-horizontal .siteclick-card-image,
.siteclick-card.siteclick-card-horizontal .siteclick-card-content {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
}

.siteclick-card.siteclick-card-horizontal .siteclick-card-image {
    width: 50px;
}

.siteclick-card.siteclick-card-horizontal .siteclick-card-content {
    padding-left: 1rem;
}

.siteclick-label-url {
    line-height: 1rem;
    position: relative;
}

.siteclick-label-url span {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    font-size: 9px;
    text-align: center;
    color: var(--sc-color-white);
    position: absolute;
    left: 0;
    top: 0;
}

.siteclick-label-url-in {
    padding-left: 1.25rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--sc-color-text-subtle);
}

span.siteclick-admin-title-thumb-large-in {
    display: inline-block;
    height: 3rem;
    width: 3rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    border-radius: 5px;
    margin-bottom: 0.25rem;
    background-color: var(--sc-color-panel-bg);
}

.siteclick-admin-title-thumb-large {
    text-align: center;
}

.siteclick-tile-thumbs.siteclick-tile-thumbs-small .siteclick-tile-thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
}

.siteclick-tile-thumbs.siteclick-tile-thumbs-small {
    gap: 0.5rem;
    height: 60px;
}

.siteclick-header-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: var(--sc-color-panel-bg);
}



/** PREVIEW **/
.siteclick-website-preview {
    top: 40px;
    bottom: 0;
    background: var(--sc-color-panel-bg);
    z-index: 100000;
    position: fixed;
    border-left: 2px solid var(--sc-color-border);
    width: 70vw;
    right: -70vw;
    padding-right: 40px;
}
@media screen and (max-width: 1024px) {
    /* Gesloten stand ECHT buiten beeld: left:40px + right:100% gaf een box
       met negatieve breedte, maar padding-right(40)+border(2) bleven als
       witte strook op x=40-82 over de content staan. */
    .siteclick-website-preview {
        width: calc(100vw - 40px);
        left: auto;
        right: -100vw;
        padding-right: 0;
    }
}
[data-siteclick-preview-open="true"] .siteclick-website-preview {
    right: 0px;
}

/* ==================================================================
   Visual Editor — overlay-geometrie. Staat hier (head-geladen) i.p.v. in
   visual-editor.css, omdat die stylesheet pas via de <link> IN het AJAX-
   fragment laadt: de overlay paintte dan één frame op de 70vw-basis
   hierboven en sprong daarna naar de opgeslagen breedte (zichtbare flits).
   Alles is gegate op .siteclick-website-preview.sc-ve-host / het open-
   attribuut, dus inert zolang er geen editor open is.

   Ronde 9: de gate was :has(#siteclick-visual-editor) — dat element bestaat
   pas ná de fragment-injectie, dus de overlay stond tot dan op de 70vw-basis
   en de hele linker content animeerde bij aankomst een TWEEDE keer naar de
   opgeslagen breedte. openVisualEditor zet .sc-ve-host nu synchroon bij de
   klik (closePreview haalt hem na de slide-out weg): pre- en post-fragment-
   geometrie zijn identiek, dus er valt niets meer te verspringen.

   Desktop (>1224px): het paneel eindigt op 40px van rechts, naast de
   vaste .toggle.toggle-right-rail — er valt dus nooit meer iets (zoals
   de sluitknop) achter de rail. De breedte komt uit --sc-ve-width
   (resizer, opgeslagen in localStorage) en de content-padding volgt
   dezelfde variabele, dus content en viewer overlappen nooit.

   ≤1224px: shared.css zet de content-padding op 0 en verplaatst de
   toggles naar links — de viewer wordt dan een full-width overlay met
   40px ruimte aan de LINKERkant voor de toggle-rail.
   ================================================================== */
.siteclick-container .siteclick-website-preview.sc-ve-host {
    width: var(--sc-ve-width);
    /* 8.1 containment: a stale/oversized --sc-ve-width (old localStorage,
       viewport shrink) may never push the viewer past the toggle-rail. */
    max-width: calc(100vw - 40px);
    right: calc(-1 * var(--sc-ve-width) - 40px);
    padding-right: 0;
}

.siteclick-container [data-siteclick-preview-open="true"] .siteclick-website-preview.sc-ve-host {
    right: 40px;
}

/* Content naast de viewer: padding = viewer-breedte + de 40px rail. */
.siteclick-container [data-siteclick-preview-open="true"]:has(.siteclick-website-preview.sc-ve-host) .siteclick-content-in,
.siteclick-container [data-siteclick-preview-open="true"]:has(.siteclick-website-preview.sc-ve-host) .siteclick-header,
.siteclick-container [data-siteclick-preview-open="true"]:has(.siteclick-website-preview.sc-ve-host) .siteclick-subheader,
.siteclick-container [data-siteclick-preview-open="true"]:has(.siteclick-website-preview.sc-ve-host) .siteclick-footer {
    padding-right: calc(var(--sc-ve-width) + 40px);
}

/* Ronde 11 (Jeroen 1, flits): de VE-dock-geometrie van de editor-sidebars
   stond in visual-editor.css (laadt pas mét het AJAX-fragment) — de geparkeerde
   sub-sidebar sprong daardoor bij elke klik-open een frame van de shared.css-
   parkeerstand naar de dock-stand. Head-loaded = identieke parkeerstand vóór,
   tijdens en na het fragment. Zelfde precedent als het sc-ve-host-blok
   hierboven; visual-editor.css bevat deze regels niet meer. */
@media screen and (min-width: 1225px) {
    .siteclick-container .siteclick-editor-sidebar {
        width: calc(100vw - var(--sc-ve-width) - 40px) !important;
        left: 0 !important;
    }

    .siteclick-container .siteclick-editor-sidebar.active {
        width: calc(100vw - var(--sc-ve-width) - 40px) !important;
        left: 0 !important;
    }

    .siteclick-container .siteclick-editor-sidebar-sub,
    .siteclick-container .siteclick-editor-sidebar-sub.active {
        left: calc(100vw - var(--sc-ve-width) - 40px) !important;
    }

    .siteclick-container .siteclick-editor-sidebar-sub {
        transform: translateX(calc(-100% - (100vw - var(--sc-ve-width) - 40px))) !important;
    }

    .siteclick-container .siteclick-editor-sidebar-sub.active {
        transform: none !important;
    }
}

@media screen and (max-width: 1224px) {
    /* Overlay-modus: full-width over de content; toggles staan hier links.
       Fixed width (not auto + left/right insets): with width:auto the box
       widens WHILE the right-inset transition runs, so a resizePreview()
       fired at open measured a mid-transition width and scaled the iframe
       past the available space. A constant width makes the measurement
       correct at any moment — no waiting for transition-end. */
    .siteclick-container .siteclick-website-preview.sc-ve-host {
        width: calc(100vw - 40px);
        left: auto;
        right: -100vw;
    }

    .siteclick-container [data-siteclick-preview-open="true"] .siteclick-website-preview.sc-ve-host {
        right: 0;
    }

    .siteclick-ve-resizer {
        display: none;
    }
}




[data-siteclick-bar-nav-toggle="website"],
[data-siteclick-bar-nav-toggle="template"]{
    position: fixed !important;
    left: 50%;
    transform: translateX(-50%);
}

.siteclick-bar-nav-actions {
    display: inline-block;
}


.siteclick-website-preview-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    right: 0px;
    z-index: 100000;
    opacity: 1;
    background: var(--sc-color-dark);
    color: var(--sc-color-white);
}

.siteclick-website-preview-frame {
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 0;
    right: 0;
    z-index: -1;
    overflow: hidden;
    background: var(--sc-color-dark);
}

.siteclick-website-preview-frame iframe {
    position: absolute;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    background: var(--sc-color-panel-bg);
}

.siteclick-website-preview-frame-in {
    position: absolute;
    left: 2rem;
    top: 2rem;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.siteclick-website-preview-bg {
    opacity: 1;
    position: absolute;

    /* bewust buiten de container trekken */
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;
    background-size: cover;
    background-position: center;
    filter: blur(20px);
}

.siteclick-website-preview-toolbar.siteclick-website-preview-toolbar-bottom {
    top: auto;
    bottom: 0px;
}



.siteclick-actions-small-group {
    color: var(--sc-color-text-subtle);
    border-radius: 5px;
    /* iets lichter dan de bar (beide waren --sc-color-dark): de groep leest
       als pill, zoals in de VE-topbar */
    background: rgba(255, 255, 255, 0.07);
    /* inline-flex: inline-block liet whitespace-gaten tussen de actions,
       waardoor het hover/actief-vlak niet aansloot op de scheidingslijn */
    display: inline-flex;
    vertical-align: top;
    overflow: hidden;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.9rem;
    margin-right: 0.5rem;
}
.siteclick-actions-small-group:last-child {
    margin-right: 0px;
}
.siteclick-action-small {
    display: inline-block;
    vertical-align: top;
    padding-right: 0.5rem;
    /* scheidingslijn was --sc-color-dark op --sc-color-dark (onzichtbaar) */
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    transition: color 0.12s ease, background-color 0.12s ease;
}
.siteclick-action-small:last-child {
    border-right: 0;
}

.siteclick-action-small.siteclick-action-clickable {
    cursor: pointer;
}
.siteclick-action-small.siteclick-action-clickable:hover,
.siteclick-action-small.active {
    color: var(--sc-color-white) !important;
}
/* zelfde hover/actief-accenten als de VE-topbar (visual-editor.css) */
.siteclick-action-small.siteclick-action-clickable:hover {
    background: rgba(255, 255, 255, 0.08);
}
.siteclick-action-small.active {
    background: rgba(255, 255, 255, 0.16);
}

.siteclick-action-small i,
.siteclick-action-small span,
.siteclick-action-small input {
    margin-left: 0.5rem;
}
.siteclick-action-small i {
    vertical-align: middle;
}
.siteclick-action-small i + span {
    margin-left: 0.35rem;
}

/* Smal venster: labels naast iconen weg, iconen blijven bedienbaar. */
@media screen and (max-width: 1224px) {
    .siteclick-website-preview-toolbar .siteclick-action-small i + span {
        display: none;
    }
}

.siteclick-website-preview-controls {
    padding: 0.5rem;
}

.siteclick-preview-range-input {
    -webkit-appearance: none;
    width: 100px;
    height: 2px;
    background: var(--sc-color-transparent);
    cursor: pointer;
    position:relative;
    top: -2px;
}

/* track */
.siteclick-preview-range-input::-webkit-slider-runnable-track {
    height: 2px;
    background: var(--sc-color-text-subtle);
    border-radius: 2px;
    margin-top: -1px;
}

.siteclick-preview-range-input::-moz-range-track {
    height: 2px;
    background: var(--sc-color-text-subtle);
    border-radius: 2px;
    margin-top: -1px;
}

/* thumb */
.siteclick-preview-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: var(--sc-color-panel-bg);
    border-radius: 50%;
    margin-top: -5px;
}

.siteclick-preview-range-input::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--sc-color-panel-bg);
    border-radius: 50%;
    border: none;
    margin-top: -5px;
}
.siteclick-bar-nav-action {
    vertical-align: middle !important;
    margin: 0px !important;
    display: inline-block !important;
}


.siteclick-autocomplete-wrap {
    position: relative;
}

.siteclick-autocomplete-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 9999;
    display: none;
    background: var(--sc-color-panel-bg);
    border: 1px solid var(--sc-color-border);
    border-radius: 8px;
    box-shadow: 0 6px 18px var(--sc-shadow-subtle);
    overflow: hidden;
}

.siteclick-autocomplete-results.is-open {
    display: block;
}

.siteclick-autocomplete-item {
    padding: 10px 14px;
    background: var(--sc-color-panel-bg);
    cursor: pointer;
    border-bottom: 1px solid var(--sc-color-border);
}

.siteclick-autocomplete-item:last-child {
    border-bottom: 0;
}

.siteclick-autocomplete-item:hover,
.siteclick-autocomplete-item.is-active {
    background: var(--sc-color-surface);
}

.siteclick-autocomplete-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--sc-color-text-strong);
}

.siteclick-autocomplete-subtitle {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--sc-color-text-muted);
}


.siteclick-form-component-columns {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1rem;
}

.siteclick-form-component-columns > * {width: 100%;}

.siteclick-form-component-columns > label {
    width: 200px;
}

.siteclick-form-component-columns > input,
.siteclick-form-component-columns > select{
    min-width: 0px !important;
}

.siteclick-prompt-form {
    max-width: 600px;
    margin: 0 auto;
}
.siteclick-prompt-form {
    border-radius: 5px;
    background: var(--sc-color-dark);
}

.siteclick-prompt-row {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.siteclick-prompt-column {
    display: table-cell;
    vertical-align: top;
    border-right: 1px solid var(--sc-color-dark-muted);
    padding: 0.5rem 1rem;
}
.siteclick-prompt-column:not(.no-hover):hover {
    cursor: pointer;
}

.siteclick-prompt-row {
    border-bottom: 1px solid var(--sc-color-dark-muted);
}

.siteclick-prompt-row:last-child {
    border-bottom: 0px !important;
}

.siteclick-prompt-column:last-child {
    border-right: 0px !important;
}

.siteclick-prompt-title {
    font-size: 9px;
    font-weight: 700;
    color: var(--sc-color-text-subtle);
    display:table;
    width: 100%;
}

.siteclick-prompt-title-content, .siteclick-prompt-title-action {
    display: table-cell;
    vertical-align: top;
}

.siteclick-prompt-title-action {
    text-align: right;
}


span.siteclick-admin {
    background: var(--sc-color-text-subtle);
    font-size: 7px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1em !important;
    padding: 2px;
    border-radius: 3px;
    color: var(--sc-color-white);
    margin-left: 0.25rem;
    position: relative;
    top: -1px;
}


.siteclick-payment-method-in {
    background: var(--sc-color-surface);
    padding: 1rem;
    cursor: pointer;
    border-radius: 5px;
    /* vult volledige hoogte */
    /* handig voor content */
}

.siteclick-payment-method-title {
    display: table;
    width: 100%;
    margin-bottom: 1rem;
}

.siteclick-payment-method-icon,
.siteclick-payment-method-name {
    display: table-cell;
    vertical-align: top;
}

.siteclick-payment-method-icon {
    width: 40px;
}

.siteclick-payment-method-icon img {
    width: 25px;
}

.siteclick-payment-method-name {
    font-family: monospace;
    font-size: 10px;
    text-align: right;
    font-weight: 700;
}

.siteclick-payment-methods {
    gap: 1rem;
    display: grid;
    align-items: stretch;
    height: 100%; /* of een vaste/min-height */
    grid-auto-rows: 1fr;
}


.siteclick-payment-method input {
    display:none;
}

.siteclick-container .siteclick-payment-method input:checked + label .siteclick-payment-method-in,
.siteclick-container .siteclick-payment-method input:checked + label .siteclick-payment-method-in{
    background: var(--sc-color-primary-soft-strong);
    color: var(--sc-color-primary);
}

.siteclick-payment-method {
    display: flex;
}

.siteclick-payment-method label, .siteclick-payment-method-in {
    flex: 1; /* vult volledige hoogte */
    display: flex;
    flex-direction: column; /* handig voor content */
}

.siteclick-payment-method-labels {
    margin-top: 1rem;
}

.siteclick-payment-method-content-active {
    display:none !important;
}
.siteclick-container .siteclick-payment-method input:checked + label .siteclick-payment-method-in .siteclick-payment-method-content-active,
.siteclick-container .siteclick-payment-method input:checked + label .siteclick-payment-method-in .siteclick-payment-method-content-active {
    display:inline-block !important;
}

.siteclick-payment-method-in.siteclick-payment-method-add {
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
    color: var(--sc-color-text-subtle);
}

.siteclick-payment-method-in.siteclick-payment-method-add i {
    font-size: 1.5rem;
}

.siteclick-payment-method-add-in {max-width: 200px;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .siteclick-container .siteclick-payment-method-name span {
        display: none;
    }
}

.siteclick-sidebars .siteclick-filter-actives {
    position: absolute;
    top: 30px;
    background: var(--sc-color-text-subtle);
    left: 0;
    right: 0;
    padding: 4px 10px;
}

.siteclick-sidebar-content.siteclick-sidebar-content-filter {
    margin-top: 60px;
}

.siteclick-payment-method-labels .siteclick-status {
    margin-bottom: 0px;
}
.siteclick-notice {
    margin-bottom: 0.5rem;
    display:block;
    color: inherit;
    text-decoration: none;
}
.siteclick-notice:last-child {
    margin-bottom: 0px;
}
.siteclick-notice-in {
    background: var(--sc-color-surface);
    padding: 0.75rem !important;
    font-size: 0.9rem;
    line-height: 1.5rem;
    border-radius: 5px;
    display: flex;
    width: 100%;
    color: var(--sc-color-text-muted);
}
.siteclick-notice.siteclick-notice-small .siteclick-notice-in{
    padding: 0.5rem !important;
    font-size: 0.8rem !important;
    line-height: 1.2em !important;
}

.siteclick-notice-icon, .siteclick-notice-text {
    display: table-cell;
    vertical-align: top;
}

.siteclick-notice-icon {
    width: 2rem;
    text-align: center;
    padding-right: 0.5rem;
}

.siteclick-notice-text span {
    font-weight: 500;
    display: block;
}

.siteclick-notice-in.bg-green-1,
.siteclick-notice-in.bg-red-1,
.siteclick-notice-in.bg-blue-1{
    color: var(--sc-color-white);
}
/* Gele notice: altijd donkere tekst op het gele vlak — ook binnen de donkere
   scope (daar is --sc-color-text-muted licht en verdween de tekst). */
.siteclick-notice-in.bg-yellow-1,
.sc-dark .siteclick-notice-in.bg-yellow-1,
.siteclick-sidebar-rest-dark .siteclick-notice-in.bg-yellow-1 {
    color: #202123;
}

.siteclick-tile-column.siteclick-tile-column-usage {
    width: 50%;
    border-left: 1px solid var(--sc-color-border);
    padding: 0.5rem 1rem;
}

.siteclick-amount > span {
    font-weight: 700 !important;
    background: var(--sc-color-transparent) !important;
    color: var(--sc-color-green) !important;
    border-radius: 20px!important;
    display: inline-block;
    padding: 0px 9px;
    font-size: 0.9rem;
    vertical-align: top;
    position: relative;
    margin-left: 0px;
    left: 0px;
    font-family: 'Rubik' !important;
    line-height: 2rem;
    border: 2px solid var(--sc-color-surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 2rem;
}
.siteclick-amount span.siteclick-amount-currency {
    font-size: 0.9em;
    font-weight: 500;
    margin-right: 2px;
}

.siteclick-amount span.siteclick-amount-per {
    font-size: 0.8em;
    font-weight: 500;
    margin-left: 2px;
    color: var(--sc-color-text-muted) !important;
}

span.siteclick-amount-title {
    color: var(--sc-color-text-subtle);
    margin-right: 0.5rem;
    display: inline-block;
    background: var(--sc-color-surface);
    padding: 0px 0.75rem;
    margin-left: -10px;
    line-height: 2rem;
    height: 2rem;
    padding-left: 1rem;
    font-weight: 400;
    font-size: 0.8rem;
}

.siteclick-amounts.siteclick-amounts-inline .siteclick-amount {
    display: inline-block;
    vertical-align: top;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

span.siteclick-amount-currency, span.siteclick-amount-amount, span.siteclick-amount-per {
    line-height: 1em;
    display: inline-block;
}

/** THEME APPLICATION HELPERS **/
body.siteclick-container[data-siteclick-theme="dark"],
html[data-siteclick-theme="dark"] body.siteclick-container,
body[data-siteclick-theme="dark"].siteclick-container {
    background: var(--sc-color-bg) !important;
    color: var(--sc-color-text) !important;
}

.siteclick-container[data-siteclick-theme="dark"] input,
.siteclick-container[data-siteclick-theme="dark"] textarea,
.siteclick-container[data-siteclick-theme="dark"] select,
html[data-siteclick-theme="dark"] .siteclick-container input,
html[data-siteclick-theme="dark"] .siteclick-container textarea,
html[data-siteclick-theme="dark"] .siteclick-container select,
body[data-siteclick-theme="dark"] .siteclick-container input,
body[data-siteclick-theme="dark"] .siteclick-container textarea,
body[data-siteclick-theme="dark"] .siteclick-container select {
    color-scheme: dark;
}

/*
 * Dark mode contrast fixes
 * Keep light mode as default. Dark mode is activated with data-siteclick-theme="dark".
 */
html[data-siteclick-theme="dark"],
body[data-siteclick-theme="dark"] {
    background: #202123 !important;
}

.siteclick-container[data-siteclick-theme="dark"],
body.siteclick-container[data-siteclick-theme="dark"],
html[data-siteclick-theme="dark"] .siteclick-container,
body[data-siteclick-theme="dark"] .siteclick-container {
    background: var(--sc-color-bg) !important;
    color: var(--sc-color-text) !important;
}

.siteclick-container[data-siteclick-theme="dark"] h1,
.siteclick-container[data-siteclick-theme="dark"] h2,
.siteclick-container[data-siteclick-theme="dark"] h3,
.siteclick-container[data-siteclick-theme="dark"] h4,
.siteclick-container[data-siteclick-theme="dark"] h5,
.siteclick-container[data-siteclick-theme="dark"] h6,
body.siteclick-container[data-siteclick-theme="dark"] h1,
body.siteclick-container[data-siteclick-theme="dark"] h2,
body.siteclick-container[data-siteclick-theme="dark"] h3,
body.siteclick-container[data-siteclick-theme="dark"] h4,
body.siteclick-container[data-siteclick-theme="dark"] h5,
body.siteclick-container[data-siteclick-theme="dark"] h6,
html[data-siteclick-theme="dark"] .siteclick-container h1,
html[data-siteclick-theme="dark"] .siteclick-container h2,
html[data-siteclick-theme="dark"] .siteclick-container h3,
html[data-siteclick-theme="dark"] .siteclick-container h4,
html[data-siteclick-theme="dark"] .siteclick-container h5,
html[data-siteclick-theme="dark"] .siteclick-container h6,
body[data-siteclick-theme="dark"] .siteclick-container h1,
body[data-siteclick-theme="dark"] .siteclick-container h2,
body[data-siteclick-theme="dark"] .siteclick-container h3,
body[data-siteclick-theme="dark"] .siteclick-container h4,
body[data-siteclick-theme="dark"] .siteclick-container h5,
body[data-siteclick-theme="dark"] .siteclick-container h6,
.siteclick-container[data-siteclick-theme="dark"] .siteclick-title,
body.siteclick-container[data-siteclick-theme="dark"] .siteclick-title,
html[data-siteclick-theme="dark"] .siteclick-container .siteclick-title,
body[data-siteclick-theme="dark"] .siteclick-container .siteclick-title,
.siteclick-container[data-siteclick-theme="dark"] .magic-title,
body.siteclick-container[data-siteclick-theme="dark"] .magic-title,
html[data-siteclick-theme="dark"] .siteclick-container .magic-title,
body[data-siteclick-theme="dark"] .siteclick-container .magic-title,
.siteclick-container[data-siteclick-theme="dark"] .siteclick-filter-qty,
body.siteclick-container[data-siteclick-theme="dark"] .siteclick-filter-qty,
html[data-siteclick-theme="dark"] .siteclick-container .siteclick-filter-qty,
body[data-siteclick-theme="dark"] .siteclick-container .siteclick-filter-qty {
    color: var(--sc-color-text) !important;
}

.siteclick-container[data-siteclick-theme="dark"] .siteclick-bg-light,
.siteclick-container[data-siteclick-theme="dark"] .bg-white-1,
.siteclick-container[data-siteclick-theme="dark"] .bg-white-1.active,
body.siteclick-container[data-siteclick-theme="dark"] .siteclick-bg-light,
body.siteclick-container[data-siteclick-theme="dark"] .bg-white-1,
body.siteclick-container[data-siteclick-theme="dark"] .bg-white-1.active,
html[data-siteclick-theme="dark"] .siteclick-container .siteclick-bg-light,
html[data-siteclick-theme="dark"] .siteclick-container .bg-white-1,
html[data-siteclick-theme="dark"] .siteclick-container .bg-white-1.active,
body[data-siteclick-theme="dark"] .siteclick-container .siteclick-bg-light,
body[data-siteclick-theme="dark"] .siteclick-container .bg-white-1,
body[data-siteclick-theme="dark"] .siteclick-container .bg-white-1.active {
    background-color: var(--sc-color-panel-bg) !important;
}

.siteclick-container[data-siteclick-theme="dark"] .button.button-grey,
body.siteclick-container[data-siteclick-theme="dark"] .button.button-grey,
html[data-siteclick-theme="dark"] .siteclick-container .button.button-grey,
body[data-siteclick-theme="dark"] .siteclick-container .button.button-grey {
    background: var(--sc-color-surface-alt) !important;
    color: var(--sc-color-text-soft) !important;
}

.siteclick-container[data-siteclick-theme="dark"] .siteclick-card-image-in,
.siteclick-container[data-siteclick-theme="dark"] .siteclick-card-image-screen,
body.siteclick-container[data-siteclick-theme="dark"] .siteclick-card-image-in,
body.siteclick-container[data-siteclick-theme="dark"] .siteclick-card-image-screen,
html[data-siteclick-theme="dark"] .siteclick-container .siteclick-card-image-in,
html[data-siteclick-theme="dark"] .siteclick-container .siteclick-card-image-screen,
body[data-siteclick-theme="dark"] .siteclick-container .siteclick-card-image-in,
body[data-siteclick-theme="dark"] .siteclick-container .siteclick-card-image-screen {
    background-color: var(--sc-color-surface-alt) !important;
}

/* ===========================================================================
   Website Wizard - AI-gestuurde wizard flow
   =========================================================================== */

/* Layout */
.siteclick-wizard {
}

.siteclick-wizard-layout {}

/* Main content area */
.siteclick-wizard-main {
    flex: 1;
}

/* Chat area */
.siteclick-wizard-chat {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

.siteclick-wizard-chat-message {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    animation: wizardFadeIn 0.3s ease;
}

@keyframes wizardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.siteclick-wizard-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.siteclick-wizard-chat-avatar.ai-avatar {
    background: var(--sc-color-dark);
    color: var(--sc-color-primary);
    background-image: url(https://app.siteclick.dev/images/logo-siteclick-small-clean.png);
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
}

.siteclick-wizard-chat-avatar.user-avatar {
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text-muted);
}

.siteclick-wizard-chat-avatar i {
    font-size: 18px;
}

.siteclick-wizard-chat-bubble {
    background: var(--sc-color-surface);
    border-radius: 12px;
    padding: 14px 18px;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sc-color-text-soft);
}

.siteclick-wizard-chat-bubble.ai-bubble {
    background: var(--sc-color-surface);
}

.siteclick-wizard-chat-bubble.user-bubble {
    background: var(--sc-color-green-soft);
    color: var(--sc-color-text-soft);
}

/* Typing indicator */
.siteclick-wizard-typing {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.siteclick-wizard-typing span {
    width: 8px;
    height: 8px;
    background: var(--sc-color-text-subtle);
    border-radius: 50%;
    animation: wizardTyping 1.4s infinite;
}

.siteclick-wizard-typing span:nth-child(2) { animation-delay: 0.2s; }
.siteclick-wizard-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes wizardTyping {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* Kleine versie van de bestaande siteclick-loader in de chat bubble */
.siteclick-wizard-chat-bubble-loading {
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
}

.siteclick-wizard-loader-small .siteclick-loader-inline-in {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.siteclick-container .siteclick-loader-template.siteclick-loader-inline.siteclick-wizard-loader-small .siteclick-loader-inline-in > div {
    height: 5px;
    background-size: 20% 100%;
}

/* Voorstel blok - stap 2, in footer */
.siteclick-wizard-proposal {
    width: 100%;
}

.siteclick-wizard-proposal-textarea {
    width: 100%;
    border: 1px solid var(--sc-color-border-strong);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.7;
    font-family: inherit;
    color: var(--sc-color-text-soft);
    background: var(--sc-color-surface);
    resize: vertical;
    min-height: 80px;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
    box-sizing: border-box;
}

.siteclick-wizard-proposal-textarea:disabled {
    background: var(--sc-color-surface);
    color: var(--sc-color-text-subtle);
    cursor: not-allowed;
}

.siteclick-wizard-proposal-textarea:not(:disabled) {
    background: var(--sc-color-panel-bg);
    color: var(--sc-color-text-soft);
}

.siteclick-wizard-proposal-textarea:not(:disabled):focus {
    border-color: var(--sc-color-primary);
}

.siteclick-wizard-proposal-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--sc-color-text-soft);
}

.siteclick-wizard-proposal-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--sc-color-text-muted);
}

/* Tekst invoer voor aanpassen */
.siteclick-wizard-text-input {
    margin: 16px 0 0 52px;
    max-width: 600px;
}

.siteclick-wizard-text-input textarea {
    width: 100%;
    border: 1px solid var(--sc-color-border-strong);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    color: var(--sc-color-text-soft);
    background: var(--sc-color-panel-bg);
}

.siteclick-wizard-text-input textarea:focus {
    border-color: var(--sc-color-primary);
}

.siteclick-wizard-text-input-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* Right sidebar */
.siteclick-wizard-sidebar {
    width: 100%;
}

.siteclick-wizard-sidebar-in {
    padding: 30px 24px;
}

.siteclick-wizard-sidebar-organization {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--sc-color-border);
}

.siteclick-wizard-sidebar-organization.siteclick-wizard-sidebar-organization-bottom {
    padding-bottom: 0;
    margin-bottom: 0;
    padding-top: 16px;
    margin-top: 20px;
    border-bottom: none;
    border-top: 1px solid var(--sc-color-border);
}

.siteclick-wizard-sidebar-organization-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--sc-color-primary-soft);
    flex-shrink: 0;
}

.siteclick-wizard-sidebar-organization-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-color-primary);
}

.siteclick-wizard-sidebar-organization-thumb-fallback i {
    font-size: 16px;
}

.siteclick-wizard-sidebar-organization-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-color-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.siteclick-wizard-sidebar-finish {
    display: flex;
    justify-content: stretch;
}

.siteclick-wizard-sidebar-finish .button {
    width: 100%;
    justify-content: center;
}

.siteclick-wizard-sidebar-item {
    margin-bottom: 4px;
}

.siteclick-wizard-sidebar-item.clickable {
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}

.siteclick-wizard-sidebar-item.clickable:hover {
    background: var(--sc-overlay-subtle);
}

.siteclick-wizard-sidebar-step {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.siteclick-wizard-sidebar-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.siteclick-wizard-sidebar-step-number.active {
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
}

.siteclick-wizard-sidebar-step-number.completed {
    background: var(--sc-color-green);
    color: var(--sc-color-white);
}

.siteclick-wizard-sidebar-step-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-color-text-soft);
}

.siteclick-wizard-sidebar-content {
    margin-left: 38px;
    margin-bottom: 8px;
}

.siteclick-wizard-sidebar-placeholder {
    background: var(--sc-color-surface-alt);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--sc-color-text-subtle);
    display: flex;
    align-items: center;
    gap: 8px;
}

.siteclick-wizard-sidebar-placeholder i {
    font-size: 16px;
}

.siteclick-wizard-sidebar-filled {
    background: var(--sc-color-panel-bg);
    border: 1px solid var(--sc-color-border);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--sc-color-text-soft);
}

.siteclick-wizard-sidebar-filled-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.siteclick-wizard-sidebar-filled-row:last-child {
    margin-bottom: 0;
}

.siteclick-wizard-sidebar-filled-label {
    font-weight: 600;
    font-size: 12px;
    color: var(--sc-color-text-soft);
}

.siteclick-wizard-sidebar-filled-value {
    color: var(--sc-color-text-muted);
    font-size: 13px;
}

.siteclick-wizard-sidebar-divider {
    height: 1px;
    background: var(--sc-color-border);
    margin: 12px 0;
}

/* Footer */
.siteclick-wizard-footer {
    border-top: 2px solid var(--sc-color-border);
    position: fixed;
    bottom: 0px;
    width: 100%;
    background: var(--sc-color-panel-bg);
}

.siteclick-wizard-layout-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: var(--sc-color-panel-bg);
}

.siteclick-wizard-footer-left {
    flex: 1;
    min-width: 0;
}

.siteclick-wizard-footer-left:has(.siteclick-wizard-proposal) {
    flex-direction: column;
    align-items: stretch;
}

.siteclick-wizard-footer-right {
    text-align: right;
    flex: 0 0 auto;
}

/* Footer action buttons */
.siteclick-wizard-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border: 2px solid var(--sc-color-border-strong);
    border-radius: 8px;
    background: var(--sc-color-panel-bg);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--sc-color-text-soft);
    transition: all 0.2s;
    font-family: inherit;
}

.siteclick-wizard-action-btn:hover {
    border-color: var(--sc-color-text-subtle);
    background: var(--sc-color-surface);
}

.siteclick-wizard-action-btn.active,
.siteclick-wizard-action-btn.selected {
    border-color: var(--sc-color-text-soft);
    background: var(--sc-color-text-soft-bg);
    color: var(--sc-color-white);
}

.siteclick-wizard-action-btn i {
    font-size: 20px;
}

.siteclick-wizard-action-btn.confirm-btn {
    background: var(--sc-color-text-soft-bg);
    color: var(--sc-color-white);
    border-color: var(--sc-color-text-soft-bg);
}

.siteclick-wizard-action-btn.confirm-btn:hover {
    background: var(--sc-color-text);
}

/* Google Places zoekbalk in footer */
.siteclick-wizard-search-container {
    flex: 1;
    max-width: 500px;
}

.siteclick-wizard-search-container label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-color-text-soft);
    margin-bottom: 6px;
}

.siteclick-wizard-search-input-wrap {
    position: relative;
}

.siteclick-wizard-search-input-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sc-color-text-subtle);
    font-size: 16px;
    pointer-events: none;
}

.siteclick-wizard-search-input {
    width: 100%;
    border: 1px solid var(--sc-color-border-strong);
    border-radius: 8px;
    padding: 12px 16px 12px 40px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
    color: var(--sc-color-text-soft);
    background: var(--sc-color-panel-bg);
}

.siteclick-wizard-search-input:focus {
    border-color: var(--sc-color-primary);
}

/* Google Places dropdown */
.siteclick-wizard-places-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sc-color-panel-bg);
    border: 1px solid var(--sc-color-border-strong);
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px var(--sc-shadow-subtle);
}

.siteclick-wizard-places-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--sc-color-text-soft);
    transition: background 0.1s;
}

.siteclick-wizard-places-item:hover {
    background: var(--sc-color-surface);
}

.siteclick-wizard-places-item i {
    color: var(--sc-color-text-subtle);
    font-size: 16px;
}

.siteclick-wizard-manual-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--sc-color-text-soft);
    text-decoration: underline;
    cursor: pointer;
}

.siteclick-wizard-template-section {
    margin-bottom: 30px;
}

.siteclick-wizard-template-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.siteclick-wizard-template-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.siteclick-wizard-template-card {
    border: 2px solid var(--sc-color-border-strong);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--sc-color-panel-bg);
}

.siteclick-wizard-template-card:hover {
    border-color: var(--sc-color-text-subtle);
    box-shadow: 0 2px 8px var(--sc-shadow-subtle);
}

.siteclick-wizard-template-card.selected {
    border-color: var(--sc-color-text-soft);
    box-shadow: 0 0 0 1px var(--sc-color-text-soft);
}

.siteclick-wizard-template-card.recommended {
    position: relative;
}

.siteclick-wizard-template-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--sc-color-text-muted);
    color: var(--sc-color-white);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    z-index: 2;
}

.siteclick-wizard-template-card-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: var(--sc-color-text-soft-bg);
    color: var(--sc-color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 2;
}

.siteclick-wizard-template-card-image {
    height: 160px;
    background: var(--sc-color-surface);
    overflow: hidden;
}

.siteclick-wizard-template-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.siteclick-wizard-template-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-color-border-strong);
    font-size: 32px;
}

.siteclick-wizard-template-card-info {
    padding: 12px 14px;
}

.siteclick-wizard-template-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-color-text-soft);
}

.siteclick-wizard-template-card-meta {
    font-size: 12px;
    color: var(--sc-color-text-subtle);
    margin-top: 2px;
}

.siteclick-wizard-template-card-desc {
    font-size: 12px;
    color: var(--sc-color-text-muted);
    margin-top: 4px;
    line-height: 1.4;
}

/* Aanbevolen templates - AI */
.siteclick-wizard-recommended-templates {
    padding: 10px 0;
}

.siteclick-wizard-recommended-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.siteclick-wizard-recommended-card {
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.siteclick-wizard-recommended-card:hover {
    box-shadow: 0 2px 8px var(--sc-shadow-subtle);
}

.siteclick-wizard-recommended-card.selected {
    border-color: var(--sc-color-text-soft);
    box-shadow: 0 2px 12px var(--sc-shadow-subtle);
}

.siteclick-wizard-recommended-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--sc-color-text-soft-bg);
    color: var(--sc-color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 2;
}

.siteclick-wizard-browse-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--sc-color-surface);
    border: 1px solid var(--sc-color-border-strong);
    border-radius: 8px;
    font-size: 14px;
    color: var(--sc-color-text-muted);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.siteclick-wizard-browse-all-btn:hover {
    background: var(--sc-color-surface-alt);
    border-color: var(--sc-color-text-subtle);
    color: var(--sc-color-text-soft);
}

.siteclick-wizard-browse-all-btn i {
    font-size: 16px;
}

@media (max-width: 768px) {
    .siteclick-wizard-recommended-grid {
        grid-template-columns: 1fr;
    }
}

/* Footer input / textarea - template-wizard stap 1 en 2 */
.siteclick-wizard-footer-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.siteclick-wizard-footer-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--sc-color-border-strong);
    border-radius: 8px;
    background: var(--sc-color-panel-bg);
    color: var(--sc-color-text-soft);
    font-size: 14px;
    resize: vertical;
}

.siteclick-wizard-footer-input:focus {
    outline: none;
    border-color: var(--sc-color-primary);
    box-shadow: 0 0 0 3px var(--sc-overlay-primary-soft);
}

textarea.siteclick-wizard-footer-input {
    min-height: 60px;
}

/* Vinkje op selecteerbare source-cards */
.siteclick-wizard-source-card,
.siteclick-wizard-recommended-card {
    position: relative;
}

.siteclick-wizard-source-card::before,
.siteclick-wizard-recommended-card::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--sc-color-border-strong);
    background: var(--sc-color-panel-bg);
    z-index: 3;
    transition: background 0.15s, border-color 0.15s;
}

.siteclick-wizard-source-card.selected::before,
.siteclick-wizard-recommended-card.selected::before {
    background: var(--sc-color-green);
    border-color: var(--sc-color-green);
}

.siteclick-wizard-source-card.selected::after,
.siteclick-wizard-recommended-card.selected::after {
    content: '\2713';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-color-white);
    font-size: 13px;
    font-weight: 700;
    z-index: 4;
    line-height: 1;
}

/* Source chooser - template of website als basis */
.siteclick-wizard-source-chooser {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.siteclick-wizard-source-group {
    display: flex;
    flex-direction: column;
}

.siteclick-wizard-source-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

@media (max-width: 1100px) {
    .siteclick-wizard-source-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 800px) {
    .siteclick-wizard-source-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
    .siteclick-wizard-source-grid { grid-template-columns: repeat(2, 1fr); }
}

.siteclick-wizard-source-card {
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.siteclick-wizard-source-card:hover {
    box-shadow: 0 2px 8px var(--sc-shadow-subtle);
}

.siteclick-wizard-source-card.selected {
    border-color: var(--sc-color-text-soft);
    box-shadow: 0 2px 12px var(--sc-shadow-subtle);
}

/* Confirmation-overzicht op laatste stap */
.siteclick-wizard-confirm-overview {
    max-width: 560px;
    margin: 20px auto;
    background: var(--sc-color-panel-bg);
    border: 1px solid var(--sc-color-border);
    border-radius: 12px;
    padding: 24px 28px;
}

.siteclick-wizard-confirm-block {
    padding: 12px 0;
    border-top: 1px solid var(--sc-color-border);
}

.siteclick-wizard-confirm-block:first-of-type {
    border-top: none;
    padding-top: 0;
}

.siteclick-wizard-confirm-block-title {
    font-weight: 600;
    color: var(--sc-color-text-strong);
    margin-bottom: 6px;
}

.siteclick-wizard-confirm-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    color: var(--sc-color-text-muted);
}

.siteclick-wizard-confirm-row-label {
    color: var(--sc-color-text-subtle);
}

.siteclick-wizard-confirm-row-value {
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.siteclick-wizard-confirm-preview {
    border-radius: 8px;
    overflow: hidden;
    background: var(--sc-color-surface);
    border: 1px solid var(--sc-color-border);
}

.siteclick-wizard-confirm-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.siteclick-wizard-confirm-prompt label {
    display: block;
    font-weight: 600;
}

.siteclick-wizard-confirm-cta .button {
    min-width: 220px;
}

/* Template zoekbalk */
.siteclick-wizard-template-search {
    position: relative;
    width: 220px;
}

.siteclick-wizard-template-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sc-color-text-subtle);
    font-size: 14px;
}

.siteclick-wizard-template-search input {
    width: 100%;
    border: 1px solid var(--sc-color-border-strong);
    border-radius: 6px;
    padding: 8px 12px 8px 32px;
    font-size: 13px;
    outline: none;
    color: var(--sc-color-text-soft);
    background: var(--sc-color-panel-bg);
}

.siteclick-wizard-template-search input:focus {
    border-color: var(--sc-color-primary);
}

.siteclick-wizard-template-filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Footer template geselecteerd state */
.siteclick-wizard-footer-template-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}

.siteclick-wizard-footer-template-preview-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--sc-color-surface-alt);
    overflow: hidden;
    flex-shrink: 0;
}

.siteclick-wizard-footer-template-preview-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.siteclick-wizard-footer-template-info {
    display: flex;
    flex-direction: column;
}

.siteclick-wizard-footer-template-label {
    font-size: 12px;
    color: var(--sc-color-text-subtle);
}

.siteclick-wizard-footer-template-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-color-text-soft);
}

/* User message alignment - rechts */
.siteclick-wizard-chat-message.user-message {
    flex-direction: row;
    justify-content: flex-end;
}

/* Chat input balk */
.siteclick-wizard-chat-input {
    flex-shrink: 0;
    padding: 12px 0;
    border-top: 1px solid var(--sc-color-border);
}

.siteclick-wizard-chat-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sc-color-panel-bg);
    border: 1px solid var(--sc-color-border-strong);
    border-radius: 24px;
    padding: 6px 6px 6px 20px;
    transition: border-color 0.2s;
}

.siteclick-wizard-chat-input-wrap:focus-within {
    border-color: var(--sc-color-primary);
}

.siteclick-wizard-chat-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    padding: 8px 0;
    background: transparent;
    color: var(--sc-color-text-soft);
    font-family: inherit;
}

.siteclick-wizard-chat-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.siteclick-wizard-chat-send:hover {
    background: var(--sc-color-primary-hover);
}

.siteclick-wizard-chat-send i {
    font-size: 16px;
}

/* Debug panel */
.siteclick-wizard-debug {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 1000;
    font-family: inherit;
}

.siteclick-wizard-debug-toggle {
    background: var(--sc-color-text-soft-bg);
    color: var(--sc-color-white);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    float: right;
    transition: background 0.2s;
}

.siteclick-wizard-debug-toggle:hover,
.siteclick-wizard-debug-toggle.active {
    background: var(--sc-color-primary);
}

.siteclick-wizard-debug-content {
    background: #1E1E2E;
    border-radius: 12px;
    width: 520px;
    max-height: 400px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px var(--sc-shadow-subtle);
    clear: both;
}

.siteclick-wizard-debug-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #2D2D3F;
    flex-shrink: 0;
}

.siteclick-wizard-debug-header .siteclick-title-5 {
    color: var(--sc-color-white);
    font-size: 13px;
}

.siteclick-wizard-debug-clear {
    background: transparent;
    border: 1px solid #44444B;
    color: #A1A1AA;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
}

.siteclick-wizard-debug-clear:hover {
    border-color: var(--sc-color-red);
    color: var(--sc-color-red);
}

.siteclick-wizard-debug-log {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.siteclick-wizard-debug-empty {
    color: #6B7280;
    font-size: 12px;
    text-align: center;
    padding: 20px;
}

.siteclick-wizard-debug-entry {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #2D2D3F;
}

.siteclick-wizard-debug-entry:last-child {
    border-bottom: none;
}

.siteclick-wizard-debug-entry-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.siteclick-wizard-debug-time {
    color: #6B7280;
    font-size: 11px;
    font-family: monospace;
}

.siteclick-wizard-debug-badge {
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.siteclick-wizard-debug-model {
    color: #4ECDC4;
    font-size: 11px;
    font-family: monospace;
}

.siteclick-wizard-debug-section {
    margin-top: 6px;
}

.siteclick-wizard-debug-label {
    color: #A1A1AA;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.siteclick-wizard-debug-pre {
    background: #16162A;
    color: #DADAE0;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 150px;
    overflow-y: auto;
}

/* ===========================================================================
   Publicatie pricing card
   =========================================================================== */

.siteclick-wizard-pricing-card {
    margin: -14px -18px;
    overflow: hidden;
    font-size: 14px;
}

.siteclick-wizard-pricing-amount {
    background: var(--sc-color-primary-soft);
    border-bottom: 1px solid var(--sc-color-primary-soft-strong);
    padding: 18px 20px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.siteclick-wizard-pricing-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--sc-color-text-soft);
    line-height: 1;
}

.siteclick-wizard-pricing-period {
    font-size: 13px;
    color: var(--sc-color-text-subtle);
}

.siteclick-wizard-pricing-details {
    padding: 14px 20px;
    border-bottom: 1px solid var(--sc-color-border-strong);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--sc-color-panel-bg);
}

.siteclick-wizard-pricing-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--sc-color-text-muted);
    line-height: 1.5;
}

.siteclick-wizard-pricing-row i {
    font-size: 15px;
    margin-top: 1px;
    flex-shrink: 0;
    color: var(--sc-color-primary);
}

.siteclick-wizard-pricing-status {
    padding: 14px 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.siteclick-wizard-pricing-status i {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.siteclick-wizard-pricing-status.ok {
    background: var(--sc-color-green-soft);
    color: var(--sc-color-green);
}

.siteclick-wizard-pricing-status.ok i {
    color: var(--sc-color-green);
}

.siteclick-wizard-pricing-status.warning {
    background: var(--sc-color-orange-soft);
    color: var(--sc-color-orange);
}

.siteclick-wizard-pricing-status.warning i {
    color: var(--sc-color-orange);
}

.siteclick-wizard-pricing-invoice {
    padding: 14px 20px;
    border-top: 1px solid var(--sc-color-border-strong);
    border-bottom: 1px solid var(--sc-color-border-strong);
    background: var(--sc-color-panel-bg);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.siteclick-wizard-pricing-invoice-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.siteclick-wizard-pricing-invoice-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--sc-color-text-muted);
}

.siteclick-wizard-pricing-invoice-row.muted {
    color: var(--sc-color-text-subtle);
    font-size: 12px;
}

.siteclick-wizard-pricing-invoice-row.total {
    border-top: 1px solid var(--sc-color-border-strong);
    padding-top: 6px;
    margin-top: 2px;
    font-weight: 700;
    font-size: 14px;
    color: var(--sc-color-text);
}

/* ===========================================================================
   Formulier in chat
   =========================================================================== */

.siteclick-wizard-form {
    background: var(--sc-color-panel-bg);
    border: 2px solid var(--sc-color-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    animation: wizardFadeIn 0.3s ease;
    margin-left: 50px;
}

.siteclick-wizard-form-field {
    margin-bottom: 20px;
}

.siteclick-wizard-form-field:last-child {
    margin-bottom: 0;
}

.siteclick-wizard-form-field-hidden {
    display: none;
}

.siteclick-wizard-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-color-text-soft);
    margin-bottom: 8px;
}

.siteclick-wizard-form-choices {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.siteclick-wizard-form-choice-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px solid var(--sc-color-border-strong);
    border-radius: 8px;
    background: var(--sc-color-panel-bg);
    color: var(--sc-color-text-soft);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.siteclick-wizard-form-choice-btn:hover {
    border-color: var(--sc-color-primary);
    background: var(--sc-color-primary-soft);
}

.siteclick-wizard-form-choice-btn.selected {
    border-color: var(--sc-color-primary);
    background: var(--sc-color-primary-soft);
    color: var(--sc-color-primary);
}

.siteclick-wizard-form-choice-btn i {
    font-size: 16px;
}

.siteclick-wizard-form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--sc-color-border-strong);
    border-radius: 8px;
    font-size: 14px;
    color: var(--sc-color-text-soft);
    background: var(--sc-color-panel-bg);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.siteclick-wizard-form-input:focus {
    outline: none;
    border-color: var(--sc-color-primary);
    box-shadow: 0 0 0 3px var(--sc-overlay-primary-soft);
}

.siteclick-wizard-form-input::placeholder {
    color: var(--sc-color-text-subtle);
}

.siteclick-wizard-form-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--sc-color-border-strong);
    border-radius: 8px;
    font-size: 14px;
    color: var(--sc-color-text-soft);
    background-color: var(--sc-color-panel-bg);
    cursor: pointer;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.siteclick-wizard-form-select:focus {
    outline: none;
    border-color: var(--sc-color-primary);
    box-shadow: 0 0 0 3px var(--sc-overlay-primary-soft);
}

/* Google Places autocomplete in formulier */
.siteclick-wizard-form-google-places {
    position: relative;
}

.siteclick-wizard-form-google-places gmp-place-autocomplete {
    display: block;
    width: 100%;
}

.siteclick-wizard-form-google-places gmp-place-autocomplete.siteclick-text-input {
    width: 100%;
}

.siteclick-wizard-layout-sidebar {
    position: fixed;
    top: 40px;
    bottom: 0px;
    padding-bottom: 100px;
    right: 0px;
    width: 320px;
    border-left: 2px solid var(--sc-color-border);
    overflow-y: scroll;
    z-index: 99999;
    background: var(--sc-color-panel-bg);
    transition: right 250ms cubic-bezier(0.87, 0, 0.13, 1) !important;
}

[data-wizard-sidebar-visible="false"] .siteclick-wizard-layout-sidebar {
    right: -320px;
}

.siteclick-wizard-layout-chat {
    padding-right: 320px;
}

.siteclick-wizard-footer-in {
    max-width: 1140px;
    margin: 0 auto;
    padding: 10px 100px;
    padding-right: 370px;
    height: auto !important;
    padding-bottom: 2rem;
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

/* Responsive */
@media (max-width: 1024px) {
    .siteclick-wizard-layout-chat {
        padding-right: 0;
    }

    .siteclick-wizard-footer-in {
        padding-right: 50px;
    }
}

@media (max-width: 768px) {
    .siteclick-wizard-template-grid,
    .siteclick-wizard-recommended-grid {
        grid-template-columns: 1fr;
    }

    .siteclick-wizard-text-input {
        margin-left: 0;
    }

}


.siteclick-wizard-footer-left, .siteclick-wizard-footer-right {
}

siteclick-wizard-footer-right {
    text-align: right;
}

.siteclick-prompt {
    padding: 5rem 0px;
    color: var(--sc-color-white);
}


.siteclick-content-in-body {
    container-type: inline-size;
    container-name: siteclick-content-in-body;
}



@container siteclick-content-in-body (max-width: 768px) {
    .siteclick-container .siteclick-tiles-columns,
    .siteclick-container .siteclick-tiles-column,
    .siteclick-container .siteclick-tile-row, .siteclick-container .siteclick-tile-row-in .siteclick-tile-row-in, .siteclick-container .siteclick-tile-row-in .siteclick-tile-row-in .siteclick-tile-column{
        display: block !important;
        width: 100%;
    }
    .siteclick-container .siteclick-tile-row-in .siteclick-tile-row-in .siteclick-tile-column {
        width: 100% !important;
    }
    .siteclick-tiles-top {
        display:none;
    }
    .siteclick-container .siteclick-tile {
        padding-bottom: 1rem;
    }
    .siteclick-container .siteclick-tile-column {
        padding-bottom: 0.5rem !important;
    }
    .siteclick-tile-group,
    .siteclick-tile-group .siteclick-tile {
        display:block;
        margin: 0px !important;
        width: 100% !Important;
    }
    .siteclick-tile-group .siteclick-tile {
        margin-bottom: 1rem !important;
    }
    .siteclick-container .siteclick-tile-table .siteclick-tile-column{
        padding-bottom: 0px !important;
        padding: 0.5rem !important;
    }
    .siteclick-container .siteclick-tile-table .siteclick-tile-column .siteclick-tile-column{
        padding: 0px !Important;
        border: 0px !important;
        padding-bottom: 0.5rem !important;
    }
    .siteclick-container .siteclick-tile-table .siteclick-tile-column .siteclick-tile-column:last-child{
        padding-bottom: 0px !important;
    }

    .siteclick-container .siteclick-tile-table .siteclick-tile-column-subs{
        margin: 0px !important;
    }
    .siteclick-container .siteclick-tile.siteclick-tile-table{
        border: 2px solid var(--sc-color-border) !important;
        border-top: 0px !important;
    }
    .siteclick-tiles-tiles .siteclick-tile.siteclick-tile-table:first-child{
        border-top: 2px solid var(--sc-color-border) !important;
    }
}

.siteclick-prompt .siteclick-form-select-radiobuttons.siteclick-form-component-variant-dark button.siteclick-form-select-radiobuttons-trigger {
    background: transparent !important;
    padding: 0px !important;
}

.siteclick-prompt .siteclick-form-select-radiobuttons.siteclick-form-component-variant-dark button.siteclick-form-select-radiobuttons-trigger .siteclick-nav-item {
    padding-left: 0px !important;
}

.siteclick-thinking-text {
    display: inline-block;
    padding: 0.08em 0.12em;
    margin: -0.08em -0.12em;
    line-height: 1.25;
    font-weight: 600;
    color: transparent;
    background: linear-gradient(
            90deg,
            var(--sc-color-text-strong) 0%,
            var(--sc-color-text-strong) 40%,
            var(--sc-color-text-muted) 47%,
            var(--sc-color-text-subtle) 50%,
            var(--sc-color-text-muted) 53%,
            var(--sc-color-text-strong) 60%,
            var(--sc-color-text-strong) 100%
    );
    background-size: 300% 100%;
    background-position: 100% center;
    background-clip: text;
    -webkit-background-clip: text;
    animation: siteclickThinkingText 4.2s linear infinite;
}

@keyframes siteclickThinkingText {
    0% {
        background-position: 150% center;
    }

    100% {
        background-position: -50% center;
    }
}


.siteclick-bg-gradient {background: linear-gradient(
        -45deg,
        var(--sc-color-surface),
        var(--sc-color-surface-dark)
);
    background-size: 300% 300%;
    animation: gradient 10s infinite;
}

.siteclick-card-installing {
    animation: gradient 10s infinite;
    background-size: 300% 300% !important;
}



@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.siteclick-card-status {
    position: absolute;
    right: -5px;
    top: 5px;

}

.siteclick-card-actions {
    position: absolute;
    right: 5px;
    bottom: 0px;
    text-align: right;
    opacity: 0;

}
.siteclick-card:hover .siteclick-card-actions {
    opacity: 1;
    bottom: 5px;
}
.siteclick-card-status .siteclick-status {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    padding-right: 10px;
}

.siteclick-card-image-screen.auto {
    animation: siteclick-auto-tilt 11s linear infinite;
    transform-origin: center center;
    will-change: transform, box-shadow;
}

.siteclick-card-image-screen.auto:hover {
    animation: none;
}

@keyframes siteclick-auto-tilt {
    0% {
        transform: perspective(900px) rotateX(10deg) rotateY(-10deg) scale(1.08);
        box-shadow: 10px -10px 50px rgba(0,0,0,0.28);
    }

    12.5% {
        transform: perspective(900px) rotateX(4deg) rotateY(-13deg) scale(1.08);
        box-shadow: 13px -4px 50px rgba(0,0,0,0.30);
    }

    25% {
        transform: perspective(900px) rotateX(-10deg) rotateY(-10deg) scale(1.08);
        box-shadow: 10px 10px 50px rgba(0,0,0,0.28);
    }

    37.5% {
        transform: perspective(900px) rotateX(-13deg) rotateY(-4deg) scale(1.08);
        box-shadow: 4px 13px 50px rgba(0,0,0,0.30);
    }

    50% {
        transform: perspective(900px) rotateX(-10deg) rotateY(10deg) scale(1.08);
        box-shadow: -10px 10px 50px rgba(0,0,0,0.28);
    }

    62.5% {
        transform: perspective(900px) rotateX(-4deg) rotateY(13deg) scale(1.08);
        box-shadow: -13px 4px 50px rgba(0,0,0,0.30);
    }

    75% {
        transform: perspective(900px) rotateX(10deg) rotateY(10deg) scale(1.08);
        box-shadow: -10px -10px 50px rgba(0,0,0,0.28);
    }

    87.5% {
        transform: perspective(900px) rotateX(13deg) rotateY(4deg) scale(1.08);
        box-shadow: -4px -13px 50px rgba(0,0,0,0.30);
    }

    100% {
        transform: perspective(900px) rotateX(10deg) rotateY(-10deg) scale(1.08);
        box-shadow: 10px -10px 50px rgba(0,0,0,0.28);
    }
}

pre.example,
code.example {
    background: #f8f8f8;
    padding: 5px !important;
    color: #8d8d97;
    border-radius: 5px;
}

[data-prompt-template-empty] .button-small {
    position: absolute;
    right: 0;
    top: 0;
}

[data-prompt-template-empty] {
    position: relative;
    padding-right: 100px;
}



/* =========================================================
   Siteclick Columns
   ========================================================= */

.siteclick-columns {
    container-type: inline-size;
    container-name: siteclick-columns;

    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    width: 100%;

    --siteclick-columns-gap: 1rem;
}

/* =========================================================
   Default column
   ========================================================= */

.siteclick-columns > .siteclick-column {
    box-sizing: border-box;

    --siteclick-columns-count: 1;

    flex-grow: 1;
    flex-shrink: 1;

    flex-basis: calc(
            (100% - ((var(--siteclick-columns-count) - 1) * var(--siteclick-columns-gap)))
            / var(--siteclick-columns-count)
    );

    min-width: calc(
            (100% - ((var(--siteclick-columns-count) - 1) * var(--siteclick-columns-gap)))
            / var(--siteclick-columns-count)
    );

    padding: 0;
}

/* =========================================================
   Columns count
   ========================================================= */

.siteclick-columns[data-columns="1"] > .siteclick-column {
    --siteclick-columns-count: 1;
}

.siteclick-columns[data-columns="2"] > .siteclick-column {
    --siteclick-columns-count: 2;
}

.siteclick-columns[data-columns="3"] > .siteclick-column {
    --siteclick-columns-count: 3;
}

.siteclick-columns[data-columns="4"] > .siteclick-column {
    --siteclick-columns-count: 4;
}

.siteclick-columns[data-columns="5"] > .siteclick-column {
    --siteclick-columns-count: 5;
}

.siteclick-columns[data-columns="6"] > .siteclick-column {
    --siteclick-columns-count: 6;
}

.siteclick-columns[data-columns="7"] > .siteclick-column {
    --siteclick-columns-count: 7;
}

.siteclick-columns[data-columns="8"] > .siteclick-column {
    --siteclick-columns-count: 8;
}

.siteclick-columns[data-columns="9"] > .siteclick-column {
    --siteclick-columns-count: 9;
}

/* =========================================================
   Fixed width columns
   Werkt met bestaande .siteclick-width-* classes
   ========================================================= */

.siteclick-columns > .siteclick-column[class*="siteclick-width-"] {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;

    max-width: 100%;
}

/* =========================================================
   Visual column variants
   Geen bg/border = geen padding
   Met bg/border/box = wel padding
   ========================================================= */
/* Ruimte tussen meerdere .siteclick-columns blokken */
.siteclick-columns + .siteclick-columns {
    margin-top: 1rem;
}

/* Kolom met bg-* class */
.siteclick-columns > .siteclick-column[class*=" bg-"],
.siteclick-columns > .siteclick-column[class^="bg-"] {
    padding: 1rem;
    border: 2px solid transparent;
    border-radius: 5px;
}

/* Kolom met border* class */
.siteclick-columns > .siteclick-column[class*=" border"],
.siteclick-columns > .siteclick-column[class^="border"] {
    padding: 1rem;
    border: 2px solid var(--sc-color-surface);
    border-radius: 5px;
}

/* Als een kolom zowel bg-* als border* heeft, wint de echte border */
.siteclick-columns > .siteclick-column[class*=" bg-"][class*=" border"],
.siteclick-columns > .siteclick-column[class^="bg-"][class*=" border"],
.siteclick-columns > .siteclick-column[class*=" bg-"][class^="border"],
.siteclick-columns > .siteclick-column[class^="bg-"][class^="border"] {
    border-color: var(--sc-color-surface);
}
/* =========================================================
   Container queries
   Let op: deze reageren op de breedte van .siteclick-columns,
   niet op de viewport.
   ========================================================= */

/* Max 6 kolommen */
@container siteclick-columns (max-width: 1224px) {
    .siteclick-columns[data-columns="7"] > .siteclick-column,
    .siteclick-columns[data-columns="8"] > .siteclick-column,
    .siteclick-columns[data-columns="9"] > .siteclick-column {
        --siteclick-columns-count: 6;
    }
}

/* Max 5 kolommen */
@container siteclick-columns (max-width: 1224px) {
    .siteclick-columns[data-columns="6"] > .siteclick-column,
    .siteclick-columns[data-columns="7"] > .siteclick-column,
    .siteclick-columns[data-columns="8"] > .siteclick-column,
    .siteclick-columns[data-columns="9"] > .siteclick-column {
        --siteclick-columns-count: 5;
    }
}

/* Max 4 kolommen */
@container siteclick-columns (max-width: 1024px) {
    .siteclick-columns[data-columns="5"] > .siteclick-column,
    .siteclick-columns[data-columns="6"] > .siteclick-column,
    .siteclick-columns[data-columns="7"] > .siteclick-column,
    .siteclick-columns[data-columns="8"] > .siteclick-column,
    .siteclick-columns[data-columns="9"] > .siteclick-column {
        --siteclick-columns-count: 4;
    }

}

/* Max 3 kolommen. Vier kolommen zitten hier bewust NIET bij: 4 → 3 laat altijd
   een 3+1-rij achter. Die stappen in het blok hieronder ineens naar 2x2. */
@container siteclick-columns (max-width: 768px) {
    .siteclick-columns[data-columns="5"] > .siteclick-column,
    .siteclick-columns[data-columns="6"] > .siteclick-column,
    .siteclick-columns[data-columns="7"] > .siteclick-column,
    .siteclick-columns[data-columns="8"] > .siteclick-column,
    .siteclick-columns[data-columns="9"] > .siteclick-column {
        --siteclick-columns-count: 3;
    }
}

/* Vier kolommen: van 4 naar 2x2, nooit 3+1 */
@container siteclick-columns (max-width: 768px) {
    .siteclick-columns[data-columns="4"] > .siteclick-column {
        --siteclick-columns-count: 2;
    }
}

/* Max 2 kolommen */
@container siteclick-columns (max-width: 640px) {
    .siteclick-columns[data-columns="3"] > .siteclick-column,
    .siteclick-columns[data-columns="4"] > .siteclick-column,
    .siteclick-columns[data-columns="5"] > .siteclick-column,
    .siteclick-columns[data-columns="6"] > .siteclick-column,
    .siteclick-columns[data-columns="7"] > .siteclick-column,
    .siteclick-columns[data-columns="8"] > .siteclick-column,
    .siteclick-columns[data-columns="9"] > .siteclick-column {
        --siteclick-columns-count: 2;
    }
}

/* Alles onder elkaar */
@container siteclick-columns (max-width: 560px) {
    .siteclick-columns > .siteclick-column {
        --siteclick-columns-count: 1;
    }

    .siteclick-columns > .siteclick-column[class*="siteclick-width-"] {
        width: 100% !important;
        min-width: 100% !important;
    }
}


/*** EDITOR ***/
/* Links dockende sidebars: zelfde transform-principe als de rechter (zie
   .siteclick-sidebar-rest hierboven), alleen de andere kant op. */
/* !important op transform: de basisregel `.siteclick-container
   .siteclick-sidebar-rest` (0,2,0) is specifieker dan deze enkele class en zou
   anders de RECHTER parkeerstand opleggen. Zelfde reden als bij left/right
   hieronder. */
.siteclick-sidebar-rest-left {
    right: auto !important;
    left: 0;
    transform: translateX(-100%) !important;
}
.siteclick-sidebar-rest-left.active {
    right: auto !important;
    left: 0px;
    transform: none !important;
}

.siteclick-editor-sidebar {
    width: 30vw !important;
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
    z-index: 1000000004 !important;
}

.siteclick-editor-sidebar.active {
    width: 30vw !important;
    left: 0px !important;
    transform: none !important;
    z-index: 1000000005 !important;
    right: auto !important;
}

/* Mediabrowser opent vanuit de node-sidebars (actief op 1000000005) en moet
   daar bovenop liggen; blijft onder notificaties/modals (1e12) en de topbar. */
.siteclick-sidebar-rest[data-sidebar="sidebar-media"] {
    z-index: 1000000006 !important;
}


/* De sub dockt tegen de rechterrand van de main (left:30vw) en parkeert een
   volle main-breedte verder naar links — vandaar -200% (2 × 30vw). */
.siteclick-editor-sidebar-sub {
    width: 30vw !important;
    left: 30vw !important;
    right: auto !important;
    transform: translateX(-200%) !important;
}

.siteclick-editor-sidebar-sub.active {
    width: 30vw !important;
    left: 30vw !important;
    transform: none !important;
}


@media screen and (max-width: 1024px) {
    .siteclick-editor-sidebar,
    .siteclick-editor-sidebar-sub{
        width: 75vw !important;
        left: -75vw !Important;
    }

    .siteclick-editor-sidebar.active,
    .siteclick-editor-sidebar-sub.active{
        left: 0px !important;
        z-index: 1000000003 !important;
    }
}


/* ============================================================================
   Editor-UI-fundamenten (WP-E) — drie herbruikbare componenten die op ELK
   Siteclick-scherm werken. Ze staan hier (shared.css laadt in elke layout)
   zodat een nieuw scherm ze gebruikt in plaats van na te bouwen (A-8: geen
   dubbele systemen).

   1. .sc-more        — secundaire acties achter één ⋯-knop (§4.5)
   2. .sc-group       — inklapbare instellingengroep met samenvatting (§9.2-d/§12.6)
   3. .sc-slider      — getal + slider die live meebeweegt tijdens slepen (§12.7/§17)
   ========================================================================= */

/* ── 1. Meer-actiesmenu (gedrag: shared.js) ───────────────────────────────
   Standaard klapt het menu RECHTSBOVEN uit (veilig in een kaart onderaan een
   lijst); .sc-more-menu-below klapt eronder (kopbalken/toolbars). */
.sc-more { position: relative; display: inline-block; }
.sc-more-menu {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    min-width: 170px;
    background: var(--sc-color-panel-bg, #fff);
    border: 1px solid var(--sc-color-border, #e3e3e3);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    padding: 4px;
    z-index: 40;
}
.sc-more-menu-below { top: calc(100% + 4px); bottom: auto; }
.sc-more.open .sc-more-menu { display: block; }
.sc-more-item {
    display: block;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    cursor: pointer;
}
.sc-more-item:hover { background: var(--sc-overlay-subtle); }
.sc-more-item-danger { color: var(--sc-color-red); }
/* In een sidebar-footer staat het ⋯-menu tussen de knoppen: zelfde ritme. */
.siteclick-panel-footer .sc-more { margin-right: 0.25rem; vertical-align: top; }
.sc-more-item-disabled { opacity: .45; pointer-events: none; }
/* Sub-regel in een item (bv. "Laatst vernieuwd: 3 min geleden"). */
.sc-more-item-sub { display: block; margin-top: 2px; font-size: 11px; }
/* Een open menu mag nooit door de clip van z'n kaart afgesneden worden. De
   middelste selector dekt de kaartREGEL (.siteclick-text-* / .siteclick-title-*)
   die door de ellipsis-regel overflow:hidden krijgt en het menu volledig
   wegclipt; alleen actief zolang het menu open is, dus de truncatie blijft. */
.siteclick-card:has(.sc-more.open),
.siteclick-card :has(.sc-more.open),
.ds-card:has(.sc-more.open) { overflow: visible; }

/* ── 2. Inklapbare instellingengroep ──────────────────────────────────────
   <details>/<summary>: open/dicht werkt zonder JS, de samenvatting toont de
   actieve waarden zodat een dichtgeklapte groep leesbaar blijft. */
.sc-group {
    border: 1px solid var(--sc-color-border, #e3e3e3);
    border-radius: 6px;
    margin-bottom: 10px;
    background: var(--sc-color-panel-bg, #fff);
}
.sc-group > .sc-group-summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.sc-group > .sc-group-summary::-webkit-details-marker { display: none; }
.sc-group > .sc-group-summary::after {
    content: '';
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: .5;
    flex: none;
    transition: transform .15s ease;
}
.sc-group[open] > .sc-group-summary::after { transform: rotate(-135deg) translateY(-2px); }
.sc-group-title { font-size: 13px; font-weight: 600; }
.sc-group-values {
    font-size: 11px;
    color: var(--sc-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.sc-group[open] > .sc-group-summary .sc-group-values { display: none; }
.sc-group-body { padding: 0 12px 8px; }
/* Kleurstip in een samenvatting (kleur-/achtergrondinstellingen). */
.sc-group-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
    vertical-align: -1px;
    margin-right: 3px;
}

/* ── 3. Getal + slider ────────────────────────────────────────────────────
   Het NUMMER-veld draagt de naam (dat is de opgeslagen waarde); de slider is
   een synchrone bediening. Gedrag (live meebewegen, throttling) staat in
   shared.js. */
.sc-slider { display: flex; align-items: center; gap: 10px; }
.sc-slider input[type="range"] { flex: 1; min-width: 60px; }
.sc-slider input[type="number"] { width: 78px; flex: none; }
.sc-slider-unit { font-size: 11px; color: var(--sc-color-text-muted); }

/* ── Loop-visual (sc-visual, F.5) ─────────────────────────────────────────
   Eén visual voor élke kaart/tegel met een screenshot, logo of preview. Drie
   lagen met vaste rollen, zodat effecten elkaar niet kunnen slopen:

     .sc-visual         pattern-vlak — ALTIJD 1:1 vierkant
     └ .sc-visual-screen  het zwevende scherm: 3D-tilt (transform)
       └ .sc-visual-shot  de afbeelding: hover-scroll (background-position)

   Tilt en scroll zitten op verschillende lagen én verschillende properties;
   sc-screenshot.js schrijft daarom nooit meer een transition-shorthand. */
.sc-visual {
    position: relative;
    /* Het PATTERN is altijd vierkant, wat de bron ook is. */
    aspect-ratio: 1 / 1;
    display: grid;
    /* Het scherm zweeft binnen deze inset; per variant te sturen. De GAP komt
       daar bovenop: een paar vaste pixels rust-ruimte zodat het scherm ook op
       hover (tilt + lift) nooit tegen de kaartrand komt (Jeroen r9, "Loops met
       screenshots"). De lift zelf is daarom óók kleiner — zie SC_LIFT in
       public/js/parts/sc-screenshot.js. De clamp houdt het op grote kaarten
       bij een paar pixels en laat kleine tegels (sitemap-nodes) niet leeglopen. */
    --sc-visual-gap: clamp(3px, 3%, 8px);
    padding: calc(var(--sc-visual-inset, 8%) + var(--sc-visual-gap));
    border-radius: 6px;
    overflow: hidden;
    background: var(--sc-color-panel-bg, #f4f4f4);
    background-size: cover;
    background-position: center;
    perspective: 800px;
}
.sc-visual-screen {
    position: relative;
    align-self: stretch;
    min-height: 0;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
    background: var(--sc-color-surface-alt);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* UITSLUITEND transform/box-shadow: de scroll-laag heeft z'n eigen
       transition op background-position. */
    transition: transform .15s ease-out, box-shadow .15s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
}
/* Bron LAGER dan breed: het venster krijgt de bronverhouding en staat
   verticaal gecentreerd in het vierkante pattern — niets af te snijden, dus
   ook niets te scrollen. Bron hoger dan breed: venster blijft 1:1. */
.sc-visual--wide .sc-visual-screen {
    align-self: center;
    height: auto;
    aspect-ratio: var(--sc-visual-ar);
}
.sc-visual-shot {
    position: absolute;
    inset: 0;
    /* Jeroen r9: de BREEDTE is altijd exact 100% van het venster — `cover`
       schaalde een bron die BREDER dan hoog is op de hoogte en sneed er dan
       links/rechts vanaf (zichtbaar in de sites-loop zodra de capture-
       afmetingen ontbreken en het venster dus 1:1 blijft). Met `100% auto`
       past de breedte altijd; hoger dan het venster = hover-scroll, lager =
       gewoon minder hoog. no-repeat is daarbij verplicht: anders tegelt een
       lagere bron zichzelf verticaal. */
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    /* Hover-scroll: sc-screenshot.js zet alleen background-position en de duur
       (--sc-visual-scroll). Zonder JS blijft de bovenkant staan. */
    transition: background-position var(--sc-visual-scroll, 0ms) linear;
}
.sc-visual-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px;
    text-align: center;
    background: var(--sc-color-panel-bg, #f4f4f4);
}
.sc-visual-label {
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.sc-visual-note { font-size: 10px; color: var(--sc-color-text-muted); }
.sc-visual-note--badge {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .85);
}
.sc-visual[data-sc-shot-status="pending"] .sc-visual-note::after {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 5px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: sc-shot-spin .8s linear infinite;
}
@keyframes sc-shot-spin { to { transform: rotate(360deg); } }
/* Vernieuwen met een bestaande afbeelding: glans over het scherm i.p.v. een
   chip die de tegel bedekt (die verstopte de 48px-regels in de pagina-lijst). */
.sc-visual[data-sc-shot-status="pending"] .sc-visual-shot::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);
    background-size: 300% 100%;
    animation: sc-visual-shimmer 1.6s linear infinite;
}
@keyframes sc-visual-shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}
/* Verse capture ingeswapt: ÉÉN glinster over het nieuwe scherm — zelfde sweep
   als de pending-glans hierboven, maar eenmalig. Generiek: elke preview-
   verversing zet de class via window.scVisualFlash() (sc-screenshot.js). */
.sc-visual-screen.sc-visual-flash::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 70%);
    background-size: 300% 100%;
    animation: sc-visual-shimmer 1.1s linear 1;
}

/* Legacy-hosts (loops die nog niet op de component staan) doen mee met de
   hover-scroll: daar is het scherm tegelijk de afbeeldingslaag, dus de
   background-position-transitie moet naast transform/box-shadow staan. */
.siteclick-card-image-screen {
    transition: transform .15s ease-out, box-shadow .15s ease-out,
                background-position var(--sc-visual-scroll, 0ms) linear;
}

/* ── Varianten ─────────────────────────────────────────────────────────── */
/* Lijstregel (pagina-lijst, 48px): het venster vult de tegel — geen pattern,
   geen zweef, geen scroll, geen notities. */
.sc-visual--sm {
    --sc-visual-inset: 0;
    /* Geen rust-ruimte: 48px hoog en zonder zweef, dus niets om vrij te houden. */
    --sc-visual-gap: 0px;
    border-radius: 4px;
    perspective: none;
}
.sc-visual--sm .sc-visual-screen {
    box-shadow: none;
    border-radius: inherit;
    transition: none;
}
.sc-visual--sm .sc-visual-label { font-size: 9px; }
/* Site die nog geïnstalleerd wordt: het scherm kantelt vanzelf (zelfde
   keyframes als de legacy .siteclick-card-image-screen.auto). */
.sc-visual--auto .sc-visual-screen {
    animation: siteclick-auto-tilt 11s linear infinite;
    transform-origin: center center;
}
.sc-visual--auto:hover .sc-visual-screen { animation: none; }
/* Logo/thumb (organisatiekaart): klein, gecentreerd en niet bijgesneden. */
.sc-visual--logo { --sc-visual-inset: 32%; }
.sc-visual--logo .sc-visual-screen { background: var(--sc-color-panel-bg); }
.sc-visual--logo .sc-visual-shot {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
/* Volle-breedte strook (header/footer-regiokaart): het pattern is daar geen
   vierkant maar de kaarthoogte, en het scherm hangt onderaan vast. */
.sc-visual--strip {
    aspect-ratio: auto;
    height: 100%;
    padding: calc(20px + var(--sc-visual-gap, 8px)) calc(var(--sc-visual-inset, 4%) + var(--sc-visual-gap, 8px)) 0;
    align-items: end;
}
.sc-visual--strip .sc-visual-screen {
    align-self: stretch;
    aspect-ratio: auto;
    border-radius: 5px 5px 0 0;
}
/* Uitzondering op de 100%-breedte-regel: de strook heeft een VASTE kaarthoogte
   zonder bronverhouding, dus een bron die lager uitkomt zou onderin een lege
   strook laten zien. Hier blijft `cover` het juiste gedrag. */
.sc-visual--strip .sc-visual-shot { background-size: cover; }

/* Geen open-animaties bij page-load: html.sc-no-transitions staat er vanaf de head
   tot ná window.load — of, bij een auto-open van de live-editor, tot de open-flow
   klaar is (app.blade.php + releaseNoTransitions in shared.js, testronde-3 #24).
   Class drie keer = (0,3,1): wint van elke !important-transitie hierboven, ook de
   drie-class-selectors zoals `.siteclick-container .siteclick-subheader
   .siteclick-admin-title-tab`. */
html.sc-no-transitions.sc-no-transitions.sc-no-transitions *,
html.sc-no-transitions.sc-no-transitions.sc-no-transitions *::before,
html.sc-no-transitions.sc-no-transitions.sc-no-transitions *::after {
    transition: none !important;
}

/* ── Help-icoon (K1) ──
   Hover-tooltips zijn vervangen door de rechter help-sidebar: een tooltip die
   soms boven en soms onder een element uitklapte was niet werkbaar en viel
   achter de sticky header. Dit is puur de toggle: klein, afgekaderd, subtiel,
   altijd inline op dezelfde regel als het label. shared.js vangt de klik op
   [data-help] en opent admin-sidebar-right-content "help". */
.siteclick-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 5px;
    border: 1px solid var(--sc-color-border-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--sc-color-text-subtle);
    line-height: 1;
    cursor: pointer;
    /* r9 (Jeroen): met `middle` hing de 18px-knop te hoog naast grote titels
       en te laag naast kleine labels; -0.15em lijnt optisch met de baseline. */
    vertical-align: -0.15em;
    white-space: nowrap;
}
/* Testronde-8 (Jeroen "Help", Dave 9): de hover zette border+kleur op
   var(--sc-color-dark) — binnen .sc-dark is dat #202123, precies de
   paneelachtergrond, dus in elke donkere sidebar VERDWEEN de knop bij hover.
   --sc-color-text draait wél mee met het thema en werkt in beide varianten.
   Spiegel van deze regel staat in native-editor/np-fields.css. */
.siteclick-help:hover,
.siteclick-help:focus-visible {
    border-color: var(--sc-color-text);
    color: var(--sc-color-text);
    background: var(--sc-overlay-subtle);
    outline: none;
}
.siteclick-help .icon { font-size: 11px; line-height: 1; }

/* Help-inhoud in de rechter sidebar: alinea's uit data-help-text. */
.siteclick-help-body { font-size: 0.9rem; line-height: 1.5; color: var(--sc-color-text); }
.siteclick-help-body p { margin: 0 0 0.75rem; }
.siteclick-help-body p:last-child { margin-bottom: 0; }

/* ── Help — paneel in de rechter admin-sidebar ──
   Ronde 9 (Jeroen 11): help is een KLEINE rechter-content-sidebar zoals elk
   ander paneel daar (instellingen, magic, logs) — geen eigen brede sidebar
   meer. Alleen de stapelvolgorde blijft bijzonder: help moet BOVEN elke
   openstaande bewerksidebar (1000000003-1000000005) en de mediabrowser
   (1000000006) staan, anders is hij in de editor onbereikbaar. De toggle-rail
   schuift mee omhoog, anders valt de sluitknop erachter. */
[data-siteclick-sidebar-right-content="help"] [data-sidebar-content="help"] { display: block; }

.siteclick-container [data-siteclick-sidebar-right-content="help"] .siteclick-sidebars .siteclick-sidebar-right {
    z-index: 1000000007 !important;
}
.siteclick-container [data-siteclick-sidebar-right-content="help"] .siteclick-sidebars .siteclick-toggles .toggle.toggle-right {
    z-index: 1000000008 !important;
}
.siteclick-container [data-siteclick-sidebar-right-content="help"] .siteclick-sidebars .siteclick-toggles [data-toggle-right="help"] {
    color: var(--sc-color-dark);
}

/* Strakke opmaak binnen die smalle kolom: compacte kop, rustige regelval,
   zoekresultaten als lijst zonder kaders. */
.sc-help-pane .admin-sidebar-right-title { margin-bottom: 0.6rem; }
.sc-help-pane .siteclick-help-body { font-size: 0.82rem; line-height: 1.5; }
.sc-help-pane .sc-help-topic-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.4rem; }
.sc-help-pane .sc-help-back { margin-bottom: 0.5rem; }

/* Weergaven: 'search' (toggle) en 'topic' (ⓘ of zoekresultaat). */
.sc-help-pane .sc-help-view { display: none; }
.sc-help-pane[data-help-active-view="search"] [data-help-view="search"] { display: block; }
.sc-help-pane[data-help-active-view="topic"] [data-help-view="topic"] { display: block; }

.sc-help-search { position: relative; margin-bottom: 0.75rem; }
.sc-help-search .icon {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--sc-color-text-subtle);
    pointer-events: none;
}
.sc-help-search-input {
    width: 100%;
    padding: 7px 9px 7px 27px;
    border: 1px solid var(--sc-color-border-strong);
    border-radius: 5px;
    background: var(--sc-color-panel-bg);
    color: var(--sc-color-text);
    font-size: 0.85rem;
    line-height: 1.2rem;
}
.sc-help-search-input:focus {
    border-color: var(--sc-color-primary);
    outline: none;
}

.sc-help-result {
    display: block;
    width: 100%;
    margin-bottom: 0.4rem;
    padding: 8px 10px;
    border: 1px solid var(--sc-color-border-strong);
    border-radius: 5px;
    background: var(--sc-color-panel-bg);
    color: var(--sc-color-text);
    text-align: left;
    cursor: pointer;
}
.sc-help-result:hover { border-color: var(--sc-color-primary); }
.sc-help-result-group {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sc-color-text-subtle);
}
.sc-help-result-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2rem;
    color: var(--sc-color-text);
}
.sc-help-result-lead {
    display: -webkit-box;
    margin-top: 2px;
    font-size: 0.78rem;
    line-height: 1.1rem;
    color: var(--sc-color-text-muted);
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sc-help-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sc-color-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
}
.sc-help-back:hover { color: var(--sc-color-text); }
.sc-help-topic-title {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3rem;
    color: var(--sc-color-text);
    overflow-wrap: anywhere;
}

/* ── Tegel-waarden (gedeelde site-tegels: dashboard + instellingen) ── */
.siteclick-tile-value { font-weight: 600; font-size: 1.05em; }
.siteclick-tile-pending { font-size: 0.85em; color: var(--sc-color-orange); }

/* =========================================================
   Uitbreiding op het CHART-BARS-component hierboven: gestapelde dagbalken
   met legenda en tijdas. De compacte variant blijft ongewijzigd.
   Bars staan in een column-reverse flexbox: het eerste DOM-segment ligt
   onderaan, :last-child is dus de bovenste.
   ========================================================= */
.siteclick-chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}
.siteclick-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    font-size: 0.8rem;
    color: var(--sc-color-text-muted);
}
.siteclick-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.siteclick-chart-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.siteclick-chart-plot {
    position: relative;
}
.siteclick-chart-scale {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 0.7rem;
    color: var(--sc-color-text-subtle);
}
.siteclick-chart-bars.siteclick-chart-bars-large {
    height: 120px;
    gap: 2px;
    border-bottom: 1px solid var(--sc-color-surface-alt);
}
.siteclick-chart-bar.siteclick-chart-bar-stacked {
    height: 100%;
    min-height: 0;
    min-width: 0;
    border-radius: 0;
    background: var(--sc-color-transparent);
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
}
.siteclick-chart-bar-segment {
    display: block;
    width: 100%;
    min-height: 2px;
}
.siteclick-chart-bar-segment:last-child {
    border-radius: 2px 2px 0 0;
}
.siteclick-chart-caption.siteclick-chart-caption-axis {
    display: flex;
    justify-content: space-between;
}

/* parts/pagination rendert het paginanummer als GET-form: het <form> IS de
   .siteclick-pagination-in, dus de toolkit-regels hierboven (> div.siteclick-
   form-component) raken het veld gewoon. De oude .siteclick-pagination-form-
   regels hadden geen consument meer en zijn verwijderd. */

/* ── Label met aanbieder-/organisatielogo (i.p.v. een icoon) ── */
.siteclick-label-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1rem;
}
.siteclick-label-logo-visual {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--sc-color-surface);
}

/* Zonder pattern (kale visual): geen los kaartvlak achter het scherm — de
   inset zou dan een grijze rand tekenen i.p.v. een zwevend scherm. */
.sc-visual:not(.sc-visual--pattern):not(.sc-visual--sm):not(.sc-visual--logo) {
    --sc-visual-inset: 0;
}

/* ── Paneelkop met een titel over meerdere regels ───────────────────────────
   .siteclick-panel-title-in centreerde met line-height:40px — elke tweede
   regel viel daardoor buiten de 40px hoge kop waar .siteclick-panel-content op
   rekent. Flex-centreren lijnt 1 én 2 regels uit binnen diezelfde 40px. */
.siteclick-container .siteclick-panel-title-in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    line-height: 1.25;
    padding: 0 40px;
}
/* Max. 2 regels (2 × line-height 1.25) — precies afgekapt, geen halve derde
   regel. Geen -webkit-line-clamp: het niveau-bolletje van de VE-panelen staat
   ín deze div en zou als eigen box-regel onder de titel belanden. */
.siteclick-container .siteclick-panel-title-title {
    max-height: 2.5em;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* ── Bewerk-sidebars op smalle vensters ─────────────────────────────────────
   Vanaf 1024px is er geen ruimte meer om een sidebar naast de inhoud (of naast
   een tweede sidebar) te zetten: alle sidebars vullen het scherm en stapelen
   op relevantie — sub (opent vanuit de main) boven main, mediabrowser
   (1000000006) en style-editor blijven daar weer boven. */
@media screen and (max-width: 1024px) {
    .siteclick-container .siteclick-sidebar-rest,
    .siteclick-editor-sidebar,
    .siteclick-editor-sidebar-sub {
        width: 100% !important;
        max-width: 100% !important;
        right: 0 !important;
    }

    .siteclick-editor-sidebar,
    .siteclick-editor-sidebar-sub {
        right: auto !important;
        left: 0 !important;
        /* Volle breedte: één eigen breedte naar links is precies uit beeld. */
        transform: translateX(-100%) !important;
    }

    .siteclick-editor-sidebar.active {
        left: 0 !important;
        transform: none !important;
        z-index: 1000000004 !important;
    }

    .siteclick-editor-sidebar-sub.active {
        left: 0 !important;
        transform: none !important;
        z-index: 1000000005 !important;
    }
}

/* =========================================================================
   RONDE 8 — cluster B2: editor-consistentie (donkere sidebars + preview-
   toolbars). Staat achteraan: elke regel hieronder corrigeert een eerdere
   regel in dit bestand.
   ========================================================================= */

/* ── Preview-onderbalk: strakker + horizontaal scrollbaar (Jeroen 119) ──
   Bij te weinig breedte verborg de balk labels (en de VE zelfs hele groepen)
   i.p.v. te scrollen. Nu schuift de rij horizontaal met een dunne scrollbar,
   zodat álle knoppen bereikbaar blijven. Geldt overal waar deze balk staat:
   gewone sitepreview én live editor. */
.siteclick-container .siteclick-website-preview-toolbar {
    background: var(--sc-color-black);
}
.siteclick-container .siteclick-website-preview-toolbar.siteclick-website-preview-toolbar-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.siteclick-container .siteclick-website-preview-toolbar:not(.siteclick-website-preview-toolbar-bottom) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.siteclick-container .siteclick-website-preview-toolbar .siteclick-website-preview-controls {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
}
.siteclick-container .siteclick-website-preview-controls::-webkit-scrollbar { height: 3px; }
.siteclick-container .siteclick-website-preview-controls::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}
.siteclick-container .siteclick-website-preview-toolbar .siteclick-actions-small-group {
    flex: 0 0 auto;
    margin-right: 0;
}
/* De labels mogen blijven staan: de scrollbar vangt krapte op. */
@media screen and (max-width: 1224px) {
    .siteclick-container .siteclick-website-preview-toolbar .siteclick-action-small i + span { display: inline; }
}

/* ── Footer-contract voor ELKE bewerksidebar (S5-15) ────────────────────
   Eén footer, alleen echte acties erin, en geen Annuleren/Sluiten meer (het
   kruisje sluit). Een footer zonder zichtbare knop neemt dus ook geen ruimte
   meer in — en dan mag de content dóórlopen tot onderaan i.p.v. achter 60px
   dode ruimte te stoppen. */
.siteclick-container .siteclick-panel-footer:not(:has(.button:not([hidden]), button:not([hidden]), input, select)) {
    display: none;
}
.siteclick-container .siteclick-panel-body-in:not(:has(> .siteclick-panel-footer .button:not([hidden]), > .siteclick-panel-footer button:not([hidden]))) > .siteclick-panel-content {
    padding-bottom: 0;
}
/* Uniforme knopmaat in de footer: de blades gebruiken full-size knoppen, de
   dynamisch gerenderde paneelacties button-small — nu overal gelijk. */
.siteclick-container .siteclick-panel-footer .siteclick-buttons-inline-justified > .button,
.siteclick-container .siteclick-panel-footer .siteclick-buttons-inline > .button,
.siteclick-container .siteclick-panel-footer .siteclick-buttons-inline-justified > button,
.siteclick-container .siteclick-panel-footer .siteclick-buttons-inline > button {
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    font-size: 0.85rem;
}