:root {
    --primary-color: #e99972 !important;
    --primary-color-transparent: rgba(233, 153, 114, 0.15);
    --secondary-color: #af5125;
    --secondary-color-transparent: rgba(175, 81, 37, 0.15);
    --accent-color: #af5125;
    --box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
    --border-radius: 4px;
    --muted-text: #667784;
    --border-color: #D9E2E7FF;
}

#wpcontent {
    padding-right: 20px;
}

div#wpbody {
    padding: 0 56px;
}

#local-storage-notice {
    display: none !important;
}

li#collapse-menu {
    display: none;
}

.wp-admin.wp-core-ui .notice, DIT IS EVEN TIJDELIJK JORDI TODO HIERDOOR WORDT DE #LOGIN_ERROR OOK NIET WEERGEGEVEN {
    display: none !important;
}

@media only screen and (min-width: 783px) {
    div#wpbody-content {
        margin-top: 14px;
    }
}

#major-publishing-actions {
    flex-direction: row;
    align-items: start;
}

a.submitdelete.deletion {
    text-decoration: none;
}

#minor-publishing-actions {
    display: flex;
}

p.post-attributes-help-text {
    display: none;
}

.postbox-header {
    /*background: linear-gradient(135deg, var(--primary-color), var(--accent-color));*/
    /*color: white;*/
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.postbox-header label {
    color: #1D2327;
}

.inside {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

#adminmenu .wp-has-current-submenu .wp-submenu a:focus, #adminmenu .wp-has-current-submenu .wp-submenu a:hover, #adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, #adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover, #adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, #adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus, #adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover,
body a,
.wp-core-ui .button-link, .wp-core-ui .button.button-link {
    color: var(--primary-color);
}

#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, #adminmenu a:hover, #adminmenu li.menu-top>a:focus,
#adminmenu li.menu-top:hover, #adminmenu li.opensub>a.menu-top, #adminmenu li>a.menu-top:focus,
#adminmenu li a:focus div.wp-menu-image:before, #adminmenu li.opensub div.wp-menu-image:before, #adminmenu li:hover div.wp-menu-image:before {
    color: white;
}

body a:hover,
.wp-core-ui .button-link:hover,
.wp-core-ui .button.button-link:hover {
    color: var(--accent-color);
}

a:focus,
a:active,
button:focus,
button:active,
.login .button.wp-hide-pw:focus {
    outline: none;
    box-shadow: none;
}

div#wpfooter {
    display: none;
}

button#collapse-button, button#collapse-button:active,
button#collapse-button:focus,
button#collapse-button:hover,
h2.postbox-header {
    color: white;
}

.wrap:not(.postbox-container .wrap) {
    margin: 24px 20px 0 2px !important;
}

.wrap h1 {
    padding: 0;
}

h3 {
    margin: 0 0 .65em;
}

.box {
    border: 1px solid var(--border-color);
    border-bottom: 3px solid var(--primary-color);
    border-radius: var(--border-radius);
    background: white;
    padding: 16px;
    box-shadow: var(--box-shadow);
}

#adminmenu a.menu-top {
    padding: 0;
}

a.screen-reader-shortcut {
    display: none;
}

#edit-slug-box {
    padding: 0;
}

#postexcerpt p {
    display: none;
}

div#minor-publishing-actions {
    display: none;
}

/* || Toast notifications */
#toast {
    position: fixed;
    top: 76px;
    right: -420px;
    z-index: 9999999;

    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 36px;
    align-items: stretch;

    width: min(420px, calc(100vw - 32px));
    min-height: 64px;

    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 18px 45px rgba(31, 58, 74, 0.16);
    overflow: hidden;

    opacity: 0;
    transform: translateX(12px);
}

#toast::after {
    content: "";
    position: absolute;
    left: 48px;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--primary-color);
    animation: toastProgress 5s linear forwards;
}

#toast .icon {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    color: white;
    font-size: 18px;
    border-radius: 0;
}

#toast .icon.warning {
    background: linear-gradient(135deg, var(--secondary-color), #ff765f);
}

#toast .icon.success {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
}

#toast .content {
    display: flex;
    align-items: center;

    padding: 16px 18px;
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

#toast .close {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    color: var(--muted-text);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

#toast.show {
    animation: toastIn 0.45s cubic-bezier(.21, 1.02, .73, 1) forwards,
    toastOut 0.35s ease 5s forwards;
}

@keyframes toastIn {
    from {
        right: -420px;
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        right: 20px;
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOut {
    from {
        right: 20px;
        opacity: 1;
        transform: translateX(0);
    }
    to {
        right: -420px;
        opacity: 0;
        transform: translateX(12px);
    }
}

@keyframes toastProgress {
    from {
        transform: scaleX(1);
        transform-origin: left;
    }
    to {
        transform: scaleX(0);
        transform-origin: left;
    }
}

/* || Toast notifications */
/** || Adminbar */
div#wpadminbar {
    min-height: 48px;
    background: #ffffff;
    left: initial;
    margin-left: -20px;
    width: calc(100% - 160px);
    border-bottom: 1px solid #c3c4c7;
}

@media only screen and (max-width: 782px) {
    div#wpadminbar {
        margin-left: -10px;
        width: 100%;
    }
}

@media only screen and (min-width: 783px) and  (max-width: 960px) {
    div#wpadminbar {
        width: calc(100% - 36px);
    }
}

#wpadminbar i {
    font-family: "Font Awesome 6 Pro";
}

#wpadminbar .quicklinks .ab-empty-item {
    padding: 0;
}

#wp-toolbar {
    min-height: 48px;
}

#wpadminbar ul#wp-admin-bar-top-secondary a.ab-item i {
    font-size: 18px;
    color: #555555;
}

#wpadminbar ul#wp-admin-bar-top-secondary a.ab-item {
    margin-right: 6px;
}

#wpadminbar img.avatar {
    margin-top: 10px;
    border: 1px solid var(--primary-color);
    border-radius: 24px;
}

#wpadminbar a img.avatar:hover {
    border: 1px solid var(--primary-color);
}

#wpadminbar ul#wp-admin-bar-top-secondary a.ab-item i:hover {
    color: black;
}

#wpadminbar .ab-top-menu > li.hover > .ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus {
    background: inherit;
}

/** || Adminbar */
/** || Adminmenu */
#wpwrap #adminmenuback {
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 60%, var(--accent-color) 100%);
}

#adminmenu {
    margin-top: -12px;
}

#adminmenu li.wp-first-item.menu-top-first:hover,
#adminmenu li.wp-first-item.menu-top-first:active {
    background-color: inherit;
}

#adminmenu li.wp-first-item.menu-top-first a:hover,
#adminmenu li.wp-first-item.menu-top-first a:focus {
    cursor: initial;
    box-shadow: none;
    background-color: inherit;
}

/** || SYS Logo */
#adminmenu li.wp-first-item.menu-top-first {
    left: 40px;
    top: -20px;
    width: 100%;
    margin: 0 0 -8px 0;
}

#adminmenu li.wp-first-item.menu-top-first .wp-menu-image img {
    opacity: 1;
    padding: 0;
    height: 42px;
}

/** || SYS Logo */

#wpwrap #adminmenu, #wpwrap #adminmenuwrap {
    background: none;
}

#adminmenu .wp-submenu-head, #adminmenu a.menu-top {
    padding: .4em 0;
}

#adminmenu div.wp-menu-image {
    margin-right: 4px;
}

#adminmenu li.menu-top {
    margin: 8px 0;
}

#adminmenu li.wp-menu-separator {
    border-bottom: 4px solid #f0f0f1;
    height: 0;
    margin: 4px 0;
}

#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu a:hover, #adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
    background: var(--accent-color);
    box-shadow: none;
    transition: background .1s linear;
}

/** Dont show "content" in the submenu */
li#toplevel_page_content .wp-first-item {
    display: none;
}

#adminmenu .wp-not-current-submenu .wp-submenu {
    min-width: 150px;
}

#wpadminbar .ab-submenu {
    padding: 0;
}

#wpadminbar li#wp-admin-bar-recent-posts,
#wpadminbar li#wp-admin-bar-create-content,
#wpadminbar li#wp-admin-bar-maintenance-mode,
#wpadminbar li#wp-admin-bar-test-mode,
#wpadminbar li#wp-admin-bar-clear-cache {
    margin: 6px 0 6px 12px;
}

#wpadminbar li#wp-admin-bar-recent-posts > a:first-of-type,
#wpadminbar li#wp-admin-bar-recent-posts > a.ab-item .ab-icon::before,
#wpadminbar li#wp-admin-bar-create-content > a:first-of-type,
#wpadminbar li#wp-admin-bar-create-content > a.ab-item .ab-icon::before,
#wpadminbar li#wp-admin-bar-clear-cache > a:first-of-type {
    color: #555555;
    background-color: #fff;
}

#wpadminbar li#wp-admin-bar-maintenance-mode div {
    font-weight: 600;
    color: #e30202;
    letter-spacing: 1px;
}

#wpadminbar li#wp-admin-bar-test-mode div {
    font-weight: 600;
    color: #fbaf08;
    letter-spacing: 1px;
}

#wpadminbar li#wp-admin-bar-recent-posts .ab-sub-wrapper,
#wpadminbar li#wp-admin-bar-create-content .ab-sub-wrapper,
#wpadminbar .admin-search-results {
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

#wpadminbar li#wp-admin-bar-recent-posts .ab-sub-wrapper,
#wpadminbar li#wp-admin-bar-create-content .ab-sub-wrapper {
    top: 40px;
}

#wpadminbar li#wp-admin-bar-recent-posts .ab-submenu,
#wpadminbar li#wp-admin-bar-create-content .ab-submenu {
    padding: 0;
}

#wpadminbar li#wp-admin-bar-recent-posts .ab-sub-wrapper,
#wpadminbar .admin-search-results {
    width: 520px;
}

#wpadminbar li#wp-admin-bar-create-content .ab-sub-wrapper {
    width: 220px;
}

#wpadminbar li#wp-admin-bar-recent-posts .ab-sub-wrapper a.ab-item {
    height: auto;
    min-height: 0;
    padding: 0;
    color: #333;
    line-height: normal;
}

#wpadminbar li#wp-admin-bar-recent-posts .ab-sub-wrapper a.ab-item:hover {
    background: transparent;
    color: #333;
}

#wpadminbar li#wp-admin-bar-create-content .ab-sub-wrapper a.ab-item {
    display: block;
    height: auto;
    min-height: 0;
    padding: 8px 12px;
    box-sizing: border-box;
    color: #333;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    border-bottom: 1px solid rgb(238, 238, 238);
}

#wpadminbar li#wp-admin-bar-create-content .ab-sub-wrapper a.ab-item:hover {
    background: var(--primary-color-transparent);
    color: #333;
}

#wpadminbar li#wp-admin-bar-create-content .ab-submenu li:last-child a.ab-item {
    border-bottom: none;
}

#wpadminbar li#wp-admin-bar-recent-posts .post,
#wpadminbar .admin-search-results .post {
    display: flex;
    align-items: center;
    gap: .35em;
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 6px 12px;
    box-sizing: border-box;
    color: #333;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    border-bottom: 1px solid rgb(238, 238, 238);
}

#wpadminbar .admin-search-results .post.no-results {
    padding: 10px 12px;
}

#wpadminbar li#wp-admin-bar-recent-posts li:last-child .post,
#wpadminbar .admin-search-results .post:last-child {
    border-bottom: none;
}

#wpadminbar li#wp-admin-bar-recent-posts .post:hover,
#wpadminbar .admin-search-results .post:hover {
    background: var(--primary-color-transparent);
}

#wpadminbar li#wp-admin-bar-recent-posts .post .post-title,
#wpadminbar .admin-search-results .post .title {
    display: block;
    margin-right: auto;
    max-width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #333;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

#wpadminbar li#wp-admin-bar-recent-posts .post .post-type,
#wpadminbar .admin-search-results .post label {
    min-width: 48px;
    margin: 0;
    padding: 4px 6px;
    text-align: center;
    background-color: var(--primary-color-transparent);
    border-radius: var(--border-radius);
    color: var(--muted-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

#wpadminbar li#wp-admin-bar-recent-posts .post .post-date,
#wpadminbar .admin-search-results .post .meta {
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--muted-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

/** || Adminbar search */
#wpadminbar form.admin-search-form {
    padding: 10px 0 0 20px;
}

#wpadminbar .admin-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

#wpadminbar .admin-search-wrapper i {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    margin: auto 0;
    color: #847399;
    pointer-events: none;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
}

#wpadminbar .admin-search-wrapper .admin-search-spinner {
    display: none;
}

#wpadminbar .admin-search-wrapper input.admin-search {
    width: 320px;
    min-height: 0;
    height: 28px;
    padding: 0 .5em 0 2.5em;
    border: none;
    border-radius: 4px;
    background-color: #f5f5f5;
    color: #847399;
    line-height: 28px;
}

#wpadminbar .admin-search-results {
    display: none;
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 99999;
}

/** || Adminbar search */

/** || Adminmenu */
/** || Tables */
table.wp-list-table thead, table.widefat thead,
table.wp-list-table tfoot, table.widefat tfoot {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
}

.widefat tfoot tr td, .widefat tfoot tr th, .widefat thead tr td, .widefat thead tr th,
thead tr th a, tfoot tr th a,
th .comment-grey-bubble:before,
thead tr th a:hover, tfoot tr th a:hover {
    color: white;
}

.table-wrapper {
    overflow-x: auto;
}

#menu-management .menu-edit, #menu-settings-column .accordion-container,
.comment-ays, .feature-filter, .manage-menus, .menu-item-handle,
.popular-tags, .stuffbox, .widget-inside, .widget-top, .widgets-holder-wrap,
.wp-editor-container, p.popular-tags, table.widefat {
    border: none;
}

.widefat thead tr th,
.widefat thead tr td,
.widefat tfoot tr th,
.widefat tfoot tr td {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

table.wp-list-table, table.widefat {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
}

table.wp-list-table td {
    font-weight: normal;
    padding: 1em;
    text-align: start;
    vertical-align: middle;
    /*white-space: nowrap;*/
}

table.wp-list-table th {
    text-align: start;
}

table.wp-list-table tr:nth-child(2n) {
    background-color: var(--primary-color-transparent);
}

table.wp-list-table .sortable th[data-order] {
    cursor: pointer;
}

table.wp-list-table .sortable th[data-order="none"] .dashicons:after {
    content: "\f156";
}

table.wp-list-table .sortable th[data-order="asc"] .dashicons:after {
    content: "\f142";
}

table.wp-list-table .sortable th[data-order="desc"] .dashicons:after {
    content: "\f140";
}

table.wp-list-table .sortable .dashicons {
    color: black;
}

.widefat th.sortable, .widefat th.sorted {
    padding: .75em 1em;
}

body:has(.table-head) .wp-list-table {
    margin-top: 1em;
}

th.sortable a, th.sorted a {
    padding: 0;
}

th.checkbox {
    width: 70px;
}

.table-wrapper td > input[type=checkbox] {
    margin: -.25rem .25rem 0 0;
}

.table-wrapper td > input[type=date] {
    min-height: 0;
    max-width: 100px;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 13px;
    color: #50575E;
}

.table-wrapper td > input[type=date]:hover {
    cursor: pointer;
}

/** || Tables */
/** || Dashboard page */
h1.dashboard-title {
    margin: 24px 0 16px;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.25;
}
/** || Dashboard page */
/** || Buttons */
.wrap .add-new-h2, .wrap .add-new-h2:active, .wrap .page-title-action, .wrap .page-title-action:active,
#wpcontent #e-admin-top-bar-root .page-title-action,
div#elementor-editor-button, a.e-button.e-button.e-button--cta,
.wp-core-ui .button.button-primary,
a#elementor-template-library-add-new,
.sys-button.primary,
a.e-button.e-button.e-button--cta.e-button--outline,
.wp-core-ui .button.button-secondary,
.wp-core-ui .button,
.sys-button.secondary,
.components-button.is-primary,
.wrap .add-new-h2, .wrap .add-new-h2:active, .wrap .page-title-action, .wrap .page-title-action:active, #wpcontent #e-admin-top-bar-root .page-title-action, div#elementor-editor-button, a.e-button.e-button.e-button--cta, .wp-core-ui .button.button-primary, a#elementor-template-library-add-new, .onepager-button.primary, a.e-button.e-button.e-button--cta.e-button--outline, .wp-core-ui .button.button-secondary, .wp-core-ui .button, .onepager-button.secondary, .components-button.is-primary,
a.global-new-entity-button,
body .am-button-action__priority__primary.am-button-action__type__fill,
body.wp-admin .ui-dialog .ui-dialog-buttonpane button.ui-button,
.wp-core-ui .button-primary {
    text-transform: none;
    text-align: center;
    text-decoration: none;
    background-color: var(--primary-color);
    color: white;
    padding: 2px 10px;
    border: 1px solid var(--primary-color);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 13px;
    line-height: 2.15384615;
    min-height: 30px;
    border-radius: var(--border-radius);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.sys-button.big {
    padding: 8px 16px;
}

.components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:active:enabled, .components-button.is-primary[aria-disabled=true]:enabled {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.wrap .add-new-h2:hover, .wrap .add-new-h2:hover, .wrap .page-title-action:hover,
a#elementor-template-library-add-new:hover,
.wp-core-ui .button.button-primary:hover,
.sys-button.primary:hover,
.a.global-new-entity-button:hover,
body.wp-admin .ui-dialog .ui-dialog-buttonpane .button-primary.ui-button:hover,
.components-button.is-primary:hover:not(:disabled),
.wp-core-ui .button-primary:hover:not(:disabled) {
    border: 1px solid var(--accent-color);
    background: var(--accent-color);
    color: white;
}

a.e-button.e-button.e-button--cta.e-button--outline,
.wp-core-ui .button.button-secondary,
.wp-core-ui .button,
.sys-button.secondary,
body button.am-button-action.am-button-action__priority__secondary.am-button-action__type__fill.am-button-action__size__d.am-ml-auto,
body.wp-admin .ui-dialog .ui-dialog-buttonpane .button-secondary.ui-button {
    background: transparent;
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.wp-core-ui .button.button-secondary:hover,
a.e-button.e-button.e-button--cta.e-button--outline:hover,
.sys-button.secondary:hover,
.wp-core-ui .button:not(.ld-tab-buttons .button):hover,
body.wp-admin .ui-dialog .ui-dialog-buttonpane .button-secondary.ui-button:hover {
    border: 1px solid var(--secondary-color);
    background: var(--secondary-color);
    color: white;
}

.sys-button.primary.transparent {
    background: transparent;
    color: var(--primary-color);
    border: none;
}

.sys-button.fullwidth {
    width: 100%;
    box-sizing: border-box;
}

.sys-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
}

.sys-button.disabled {
    background-color: #e5e5e5;
    color: #8e8e8e;
    border-color: #8e8e8e;
}

.sys-button.disabled:hover {
    cursor: default;
    background-color: #e5e5e5;
    color: #8e8e8e;
}

.wp-core-ui.login .button.button-secondary {
    border: none;
    background: none;
    color: var(--secondary-color);
}

.sys-button i {
    margin-right: .25em;
}

.sys-button:disabled,
.sys-button:disabled:hover {
    background: 0 0;
    border-color: #ddd;
    color: #949494;
    cursor: default;
}

/** Container for multiple buttons */
.buttons-container {
    display: flex;
    gap: 1em;
    justify-content: right;
}

.buttons-container .sys-button {
    min-width: 240px;
}

/** || Buttons */
/** || Elementor topbar */
#wpcontent #e-admin-top-bar-root {
    box-shadow: none;
    background-color: transparent;
    top: 14px;
}

#wpcontent #e-admin-top-bar-root .e-admin-top-bar__secondary-area {
    display: none;
}

#wpcontent #e-admin-top-bar-root.e-admin-top-bar--active ~ #wpbody #wpbody-content {
    margin-block-start: 12px;
}

/** || Elementor topbar */
/** || Stupid elementor notifications */
.notice.e-notice.e-notice--extended {
    display: none;
}
/** || Stupid elementor notifications */
/** || Stupid Woocommerce whitelabel */
div#woocommerce-embedded-root, .woocommerce-layout__header {
    display: none;
}

body.woocommerce-admin-page #wpbody {
    margin-top: 0 !important;
}

body.woocommerce_page_wc-settings #mainform {
    margin: 0;
}

body.woocommerce-admin-page div#wpadminbar {
    margin-left: 0;
}

body.woocommerce-admin-page nav.nav-tab-wrapper.woo-nav-tab-wrapper {
    background-color: transparent;
}

/** Removes WooCommerce's shameless advertising */
.woocommerce-products-stack:nth-of-type(2),
span.components-truncate.components-text.woocommerce-products-marketplace-link.css-ouin5l.e19lxcc00,
div#order-attribution-install-banner-slotfill {
    display: none;
}

/** Hides woocommerce tabs for settings page */
body.woocommerce_page_wc-settings nav.nav-tab-wrapper.woo-nav-tab-wrapper {
    /*display: none;*/
}
/** || Stupid Woocommerce whitelabel */

/** || PDF Invoices whitelabel */
a.nav-tab.nav-tab-debug, a.nav-tab.nav-tab-upgrade, .wcpdf_document_settings_sections p, .packing-slip div#general table.form-table tr:nth-child(2) {
    display: none;
}

/** || PDF Invoices whitelabel */
/** || Site kit dashboard */
section#audience_segmentation_setup_cta-notification, section#zero-data-notification, .mdc-layout-grid.googlesitekit-widget-area.googlesitekit-widget-area--mainDashboardKeyMetricsPrimary.googlesitekit-widget-area--boxes, div#monetization, .mdc-chip.mdc-ripple-upgraded[data-context-id="monetization"] {
    display: none;
}

.googlesitekit-page {
    margin-right: -20px;
}

/** || Site kit dashboard */
/** || Pagination */
.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.25em;
}

ul.pagination {
    margin: 0;
    padding: 0;
}

ul.pagination li {
    border-radius: var(--border-radius);
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    margin-bottom: 0;
}

ul.pagination a {
    text-decoration: none;
    color: black;
}

ul.pagination li.active {
    background-color: var(--primary-color);
    color: white;
}

ul.pagination li:hover:not(.active) {
    background-color: var(--primary-color-transparent);
    transition: background-color .3s;
}

/** || Pagination */
/** || Animated loader */
.sys-loader {
    width: 80px;
    height: 80px;
    border: 10px solid var(--primary-color-transparent);
    border-top: 10px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 40px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/** || Animated loader */
/** || Users page */
table.wp-list-table.users-table {
    table-layout: auto;
    min-width: 1180px;
}

.users-table th,
.users-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.users-table .column-username {
    width: 200px;
    max-width: 200px;
}

.username-with-gravatar {
    display: flex;
    align-items: center;
    gap: 1em;
    min-width: 0;
    max-width: 100%;
}

.username-with-gravatar .avatar {
    flex: 0 0 auto;
}

.username-with-gravatar .username-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-table .column-display-name {
    min-width: 150px;
}

.users-table .column-role,
.users-table .column-courses,
.users-table .column-actions {
    width: 1%;
}

.users-table .column-email {
    min-width: 260px;
}

.users-table .column-registered {
    width: 140px;
}

.users-table .column-last-login {
    width: 175px;
}

.users-table .column-actions {
    text-align: center;
    padding-left: .75em;
    padding-right: .75em;
}

.username-with-gravatar {
    display: flex;
    align-items: center;
    gap: 1em;
}

img.avatar {
    border: 2px solid var(--primary-color);
    border-radius: 100%;
}

.table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-buttons {
    display: flex;
}

.table-buttons .sys-button.secondary {
    margin-left: 5px;
}

.table-search {
    display: flex;
    gap: 1em;
    margin: 0;
}

/** || Users page */
/** || User page */
.user-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5em;
    margin: 24px 0 16px;
}

.user-header h1 {
    margin: 0;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.25;
}

.user-header .user-meta-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.user-header .user-meta {
    color: white;
    border-radius: 28px;
    box-shadow: var(--box-shadow);
    border: 1px solid white;
    background: var(--primary-color);
    font-size: 11px;
    padding: 6px 14px;
    font-weight: 600;
}

.user-header .user-meta i {
    margin-right: 4px;
}

.user-header .user-actions {
    margin-left: auto;
    align-items: center;
    text-align: right;
    display: flex;
    gap: .75em;
}

.user-header .user-actions .divider {
    border-right: 1px solid var(--primary-color);
    height: 20px;
}

.user-action {
    text-decoration: none;
    font-weight: 600;
}

.user-action .dashicons {
    margin-right: 4px;
}

.user-action + .user-action {
    margin-left: 12px;
}

.red {
    color: red;
}

.userpage-container {
    margin-top: 1em;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2em;
    align-items: start;
}

.settingspage-container {
    margin-top: 3em;
}

.tabmenu {
    min-width: 250px;
    padding: 0.5em;
    align-self: start;
}

.tabcontent {
    padding: 0;
}

.tabcontent-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.tabcontent-header h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 400;
}

.tabcontent-header p {
    color: var(--muted-text);
    margin: 0;
}

.tabcontent-body {
    padding: 24px 24px 8px 24px;
}

.tabmenu a {
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 1.3em;
    text-decoration: none;
    border-radius: var(--border-radius);
}

.tabmenu a .count {
    margin-left: auto;
    border-radius: 100%;
    background-color: var(--primary-color-transparent);
    min-width: 22px;
    height: 22px;
    /*font-size: 12px;*/
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tabmenu a.active .count {
    background: white;
    color: var(--primary-color);
}

.tabmenu a .dashicons {
    margin-right: 12px;
}

.tabmenu a:not(:first-child) {
    margin-top: .25em;
}

.tabmenu a:hover {
    background: var(--primary-color-transparent);
}

.tabmenu a.active {
    color: white;
    background: var(--primary-color);
}

.tabcontent .sys-button {
    min-width: 240px;
}

.sys-button.submit {
    margin-left: auto;
}

/** || User page */
/** || Collapsible */
.collapsible-content {
    display: none;
    margin-top: 16px;
    animation: fadeIn 0.2s ease-in-out;
}

.collapsible-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/** || Collapsible */
/** || Inputs */
.input-row {
    display: flex;
    gap: 18px;
    margin-bottom: 3em;
}

.input-wrapper {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    max-width: calc((100% - 56px) / 3);
}

.input-wrapper.medium {
    max-width: calc((100% - 36px) / 2);
}

.input-wrapper.big {
    max-width: 100%;
}

.input-wrapper input:not([type=color]):not(.quicktags-toolbar input),
.input-wrapper select,
.input-wrapper textarea {
    width: 100%;
    min-width: 100%;
    padding: 22px 0 8px;
    border: 0;
    border-bottom: 1px solid var(--primary-color);
    border-radius: 0;
    background: transparent;
    font-size: 0.95rem;
    color: #111827;
    outline: none;
    transition: border-color 0.2s ease;
    line-height: 1;
}

/* Match date controls to the existing 49px SYS single-line inputs. */
.input-wrapper input[type="date"] {
    height: 49px;
}

.input-wrapper input[type="date"]::-webkit-datetime-edit {
    padding: 0;
    line-height: 1;
}

/** || Color picker coloris */
.input-wrapper:has(.clr-field input:focus) label,
.input-wrapper:has(.clr-field input:not(:placeholder-shown)) label {
    top: 0;
    font-size: 0.72rem;
    color: var(--primary-color);
    font-weight: 500;
}

.input-wrapper .clr-field {
    width: 100%;
}

.input-wrapper .clr-field input {
    width: 100%;
    min-width: 100%;
}

/** || Color picker coloris */
.input-wrapper textarea {
    resize: vertical;
    min-height: 86px;
}

.input-wrapper label {
    position: absolute;
    top: 22px;
    left: 0;
    font-size: 0.95rem;
    font-weight: 400;
    color: #6b7280;
    pointer-events: none;
    transition: all 0.18s ease;
}

.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
    border-bottom-color: var(--primary-color);
    box-shadow: none;
}

.input-wrapper input:focus + label,
.input-wrapper textarea:focus + label,
.input-wrapper input:not(:placeholder-shown) + label,
.input-wrapper textarea:not(:placeholder-shown) + label,
.input-wrapper select + label {
    top: 0;
    font-size: 0.72rem;
    color: var(--primary-color);
    font-weight: 500;
    background-color: white;
    width: calc(100% - 24px - 22px);
}

.input-wrapper.has-icon i {
    position: absolute;
    left: 0;
    top: 2.4em;
    color: #9ca3af;
    font-size: 0.9em;
    pointer-events: none;
}

.input-wrapper.has-icon input,
.input-wrapper.has-icon textarea,
.input-wrapper.has-icon select:not([multiple]) {
    padding-left: 22px !important;
}

.input-wrapper.has-icon label,
.input-wrapper.has-icon input:focus + label,
.input-wrapper.has-icon textarea:focus + label,
.input-wrapper.has-icon input:not(:placeholder-shown) + label,
.input-wrapper.has-icon textarea:not(:placeholder-shown) + label,
.input-wrapper.has-icon select + label {
    left: 22px;
}

.input-wrapper:focus-within i {
    color: var(--primary-color);
}

.input-row p.description {
    margin: 0;
    font-style: italic;
    color: #6b7280;
    font-size: 0.72rem;
    overflow: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.18s ease;
}

.input-wrapper p.description {
    transform: translateY(-4px);
    opacity: 0;
    max-height: 0;
}

.input-wrapper:focus-within p.description {
    margin: 8px 0 0 0;
    opacity: 1;
    transform: translateY(0);
    max-height: 80px;
}

.wp-core-ui select {
    padding-right: 24px;
}

.wp-filter .search-form input[type=search] {
    padding: 2px 8px;
}

.input-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding-top: 22px;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--primary-color) 50%),
    linear-gradient(135deg, var(--primary-color) 50%, transparent 50%);
    background-position: calc(100% - 14px) 28px,
    calc(100% - 9px) 28px;
    background-size: 5px 5px,
    5px 5px;
    background-repeat: no-repeat;
    line-height: inherit;
}

.input-wrapper select:disabled {
    color: inherit;
    background-color: inherit;
}

input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

input[type="checkbox"]:focus {
    border-color: var(--primary-color);
    box-shadow: none;
    outline: none;
}

/** || Inputs */
/** || Multiple select */
.input-wrapper.multiple-select-wrapper {
    gap: 8px;
}

.input-wrapper.multiple-select-wrapper label {
    position: static;
    order: 1;
    margin-left: 22px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--primary-color);
}

.input-wrapper.multiple-select-wrapper i {
    top: 2px;
}

.input-wrapper.multiple-select-wrapper select[multiple] {
    order: 2;
    width: 100%;
    min-width: 100%;
    min-height: 240px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: white;
    background-image: none;
    color: #111827;
    cursor: default;
    overflow-y: auto;
}

.input-wrapper.multiple-select-wrapper select[multiple]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-transparent);
}

.input-wrapper.multiple-select-wrapper select[multiple] option {
    padding: 6px 12px;
    margin-bottom: 4px;
    border-radius: var(--border-radius);
    color: var(--accent-color);
    cursor: pointer;
}

.input-wrapper.multiple-select-wrapper select[multiple] option:hover {
    background: var(--primary-color-transparent);
}

.input-wrapper.multiple-select-wrapper select[multiple] option:checked {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
}

.input-wrapper.multiple-select-wrapper small {
    order: 3;
    margin-left: 8px;
    color: var(--muted-text);
}
/** || Multiple select */
/** || Media input */
.media-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.media-wrapper label {
    font-size: 0.72rem;
    color: var(--primary-color);
    font-weight: 500;
}

.media-preview {
    width: 540px;
    min-height: 120px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.media-preview.is-empty::before {
    content: attr(data-placeholder);
    color: var(--muted-text);
    font-weight: 500;
    font-size: 13px;
}

.media-preview img {
    display: block;
    max-width: 100%;
    height: 110px;
    object-fit: contain;
}

.media-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.media-select:hover {
    cursor: pointer;
}

/** || Media input */
/** || Checkbox */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.checkbox-title {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: 0.72rem;
    color: var(--primary-color);
    font-weight: 500;
}

.checkbox-wrapper input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-wrapper label {
    font-weight: 400;
    cursor: pointer;
}

/** || Checkbox */
/** || Checkbox pill */
.checkbox-wrapper.checkbox-pill-wrapper {
    position: relative;
    gap: 0;
    padding: 0;
}

.checkbox-wrapper.checkbox-pill-wrapper input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox-wrapper.checkbox-pill-wrapper label {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--muted-text);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    transition: background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.checkbox-wrapper.checkbox-pill-wrapper label:hover {
    border-color: var(--primary-color);
    background: var(--primary-color-transparent);
    color: var(--accent-color);
}

.checkbox-wrapper.checkbox-pill-wrapper input[type="checkbox"]:checked + label {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
}

.checkbox-wrapper.checkbox-pill-wrapper input[type="checkbox"]:focus-visible + label {
    box-shadow: 0 0 0 3px var(--primary-color-transparent);
}

/** || Checkbox pill */
/** || File uploads */
.upload-wrapper input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.upload-label {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;

    width: 100%;
    box-sizing: border-box;
    padding: 16px;

    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    background: var(--primary-color-transparent);

    color: var(--accent-color);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.upload-label:hover {
    border-color: var(--primary-color);
    background: var(--primary-color-transparent);
    box-shadow: 0 8px 24px rgba(31, 58, 74, 0.08);
}

.upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius);
    background: white;
    color: var(--primary-color);
    font-size: 18px;
}

.upload-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.upload-content small {
    color: var(--muted-text);
}

/** || File uploads */
/** || Tooltip */
.ui-tooltip {
    border-radius: 15px;
    border: none !important;
    padding: 8px;
    color: black;
    background-color: var(--primary-color-transparent);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
    line-height: 18px;
    font-family: Segoe UI, serif;
    text-align: center;
    font-size: 12px;
}

.tooltip:not(.dashicons) {
    border-radius: 15px;
    padding: 0 6px;
    background-color: var(--primary-color-transparent);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
    font-size: 13px;
    line-height: 18px;
    cursor: help;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: var(--primary-color-transparent);
    font-family: Segoe UI, serif;
    text-align: center;
    font-size: 12px;
    color: black;
    padding: 8px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.10);
    border-radius: 25px;
    font-weight: 300;
    position: absolute;
    z-index: 1;
    max-width: 300px;
    white-space: normal;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    color: black;
}

/** || Tooltip */
/** || Notification */
.sys-notification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--primary-color-transparent);
    color: var(--primary-color);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    font-family: sans-serif;
    box-shadow: var(--box-shadow);
    gap: 1rem;
    flex-wrap: wrap;
}

.sys-notification i {
    font-size: 1.25rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.sys-notification-content {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.75rem;
}

.sys-notification .message {
    flex: 1;
}

.sys-notification .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 600px) {
    .sys-notification {
        flex-direction: column;
        align-items: stretch;
    }

    .sys-notification-content {
        width: 100%;
    }

    .sys-notification .actions {
        justify-content: flex-end;
        margin-top: 0.5rem;
    }
}

/** || Notification */
/** || Progress bar */
.progress-bar {
    position: relative;
    background-color: #808080;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    height: 15px;
    max-width: 100%;
}

.progress {
    position: relative;
    background: var(--secondary-color);
    border-radius: var(--border-radius);
    height: 15px;
    width: 0;
    transition: width 0.5s ease-in;
}

.progress-text {
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 1em;
}

/** || Progress bar */
/** || Dashboard */
.dashboard {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(320px, 0.92fr);
    gap: 24px;
    align-items: start;
}

.dashboard-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dashboard-graphs {
    display: flex;
    gap: 24px;
}

.dashboard-graphs .box {
    flex: 1;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.primary-stats {
    grid-template-columns: repeat(4, 1fr);
    display: grid;
    gap: 18px;
}

.secondary-stats {
    grid-template-columns: repeat(5, 1fr);
    display: grid;
    gap: 18px;
}

.stat {
    background-repeat: no-repeat;
    background-position: right 10px bottom 10px;
    background-size: 50px;
    display: flex;
    flex-direction: column;
}

.stat.primary {
    min-height: 84px;
}

.stat.secondary {
    min-height: 64px;
}

.stat.graph {
    background-image: url('https://sysplatform.nl/icon-stats.svg');
}

.stat.users {
    background-image: url('https://sysplatform.nl/icon-users.svg');
}

.stat.revenue {
    background-image: url('https://sysplatform.nl/icon-sales.svg');
}

.stat.contact {
    background-image: url('https://sysplatform.nl/icon-contact.svg');
}

.stat .stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.stat .stat-badge {
    display: inline-block;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    background: #eef2f4;
    color: var(--muted-text);
    white-space: nowrap;
}

.stat .stat-badge.positive {
    background: rgba(31, 157, 85, 0.12);
    color: #1f9d55;
}

.stat .stat-title {
    font-weight: 600;
    color: var(--muted-text);
    line-height: 2em;
    display: flex;
    align-items: center;
    gap: .5em;
}

.stat.primary .stat-title {
    font-size: 14px;
}

.stat.secondary .stat-title {
    font-size: 12px;
}

.stat .stat-value {
    font-weight: 600;
    line-height: 1.1;
    color: var(--accent-color);
    margin-bottom: 12px;
}

.stat.primary .stat-value {
    font-size: 31px;
}

.stat.secondary .stat-value {
    font-size: 24px;
}

.stat-value.revenue {
    display: inline-block;
}

.stat-value.revenue::before {
    content: "€";
    margin-right: 4px;
}

.stat .stat-value small {
    font-size: 11px;
    color: var(--muted-text);

}

.stat a.stat-description {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: inherit;
    text-decoration: none;
}

.stat-locked {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-text);
}

.stat-locked:hover {
    color: var(--primary-color);
}

.stat-locked i {
    font-size: 19px;
    padding: 6px 0;
}

.google-stats {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 18px;
}

.sessions {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.session {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #fefefe;
    color: var(--muted-text);
    text-align: center;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.session.active {
    background-color: var(--primary-color);
    color: white;
}

.session:hover {
    transform: translateY(-3px);
}

.session-day {
    font-size: 2.5em;
    font-weight: 700;
}

.session-month {
    margin-top: .75em;
    font-size: .85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.session-time {
    margin-top: .5em;
    padding-top: .45em;
    width: 100%;
    border-top: 1px solid currentColor;
    font-size: .85em;
    font-weight: 600;
    opacity: .7;
}

.article-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.article-card {
    display: block;
    text-decoration: none;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);

}

.article-card-image {
    position: relative;
    min-height: 160px;
    background-size: cover;
    background-position: center;
}

.article-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 16px;
    background: linear-gradient(
            180deg,
            rgba(31, 58, 74, 0.05) 0%,
            rgba(31, 58, 74, 0.85) 100%
    );
}

.article-card-overlay h3 {
    margin: 0;
    color: white;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
}

.page-views {
    list-style: none;
    counter-reset: pageViewsCounter;
    padding-left: 0;
    margin: 13px 0 0 0;
}

.page-views li {
    counter-increment: pageViewsCounter;
    position: relative;
    margin-bottom: 8px;
    padding-left: 36px;
    border-bottom: 1px solid var(--primary-color-transparent);
}

.page-views li::before {
    content: counter(pageViewsCounter);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    min-width: 24px;
    height: 24px;
    padding: 0 .25em;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
    background-color: var(--primary-color-transparent);
    color: var(--primary-color);
    border-radius: var(--border-radius);
    line-height: 1;
    font-size: 12px;
    box-sizing: border-box;
}

.page-views a {
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 8px 10px;
}

.page-views .url {
    font-size: 14px;
    word-break: break-word;
}

.page-views .views {
    font-weight: 600;
    flex-shrink: 0;
}

.sys-version {
    color: var(--muted-text);
    font-weight: 600;
    font-size: 11px;
    text-align: right;
}

/* || Dashboard */
/* || Simple dropdown menu */

.dropdown-nav {
    display: inline-block;
}

.dropdown-nav:hover {
    cursor: pointer;
}

.dropdown-toggle {
    position: relative;
}

ul.dropdown {
    text-align: left;
    display: none;
    position: absolute;
    z-index: 10;
    padding: 12px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 3px 15px rgb(0 0 0 / 5%);
    transition: 0.3s;
}

ul.dropdown li {
    list-style-type: none;
    margin-bottom: 12px;
}

ul.dropdown li:last-child {
    margin-bottom: 0;
}

ul.dropdown li a {
    text-decoration: none;
    display: block;
}

/* || Simple dropdown menu */
/* || LearnDash */
div#sfwd-header {
    background-color: transparent;
    box-shadow: none;
}

.ld-tab-buttons {
    border-top: none !important;
}

#sfwd-header {
    position: unset !important;
}

div#sfwd-header .ld-global-header a.button.is-primary, div#sfwd-header .ld-global-header button.button.is-primary {
    box-shadow: inset 0 4px 0 0 rgba(255, 255, 255, 0), 0 4px 0 0 var(--primary-color) !important;
    color: var(--muted-text);
}

div#sfwd-header .ld-global-header a.button, div#sfwd-header .ld-global-header button.button {
    color: var(--primary-color);
}

button#tab-learndash_sfwd-courses_dashboard,
a.ld-back-link,
body.post-type-sfwd-lessons[data-active-tab="edit-sfwd-lessons"] .ld-tab-buttons,
body.post-type-sfwd-topic[data-active-tab="edit-sfwd-topic"] .ld-tab-buttons,
body.post-type-sfwd-quiz[data-active-tab="edit-sfwd-quiz"] .ld-tab-buttons,
body.post-type-groups[data-active-tab="edit-groups"] .ld-tab-buttons,
body.post-type-sfwd-question[data-active-tab="edit-sfwd-question"] .ld-tab-buttons,
body.post-type-sfwd-certificates[data-active-tab="edit-sfwd-certificates"] .ld-tab-buttons,
body.post-type-sfwd-assignment[data-active-tab="edit-sfwd-assignment"] .ld-tab-buttons,
body.post-type-sfwd-quiz a.global-new-entity-button:first-of-type,
.ld-global-header .edit-post-header__settings,
.ld-onboarding-more-help {
    display: none;
}

.ld-global-header-title-area {
    padding-left: .5em;
}

.ld-global-header.edit-post-header {
    margin-bottom: -24px;
}

body .ld-global-header {
    justify-content: unset;
}

body .ld-global-header-title-area h1 {
    font-size: 23px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 5px 0 0;
}

/** || LearnDash */
/** || Ameliabooking v9.0+ */
body .am-logo.logoOnly.amd-header__logo,
body .amd-header__actions .amd-header__actions--tablet-and-up__center,
body .amd-header__actions .amd-header__actions--tablet-and-up__right,
.amd-mp-layout__main__container__aside__tips-desktop,
.am-popover.amd-mp-layout__main__container__aside__tips-tablet,
.amd-header__actions--tablet-and-up,
body.amelia_page_wpamelia-notifications .el-tabs__header.is-top,
.amd-ivy-forms-banner {
    display: none !important;
}

body .amd-header__title--tablet-and-up.am-flex.am-align-items-center.medium-24 {
    padding: 0;
    position: unset;
}

body.amelia_page_wpamelia-events div#wpadminbar,
body.amelia_page_wpamelia-calendar div#wpadminbar,
body.amelia_page_wpamelia-bookings div#wpadminbar,
body.amelia_page_wpamelia-employees div#wpadminbar,
body.amelia_page_wpamelia-settings div#wpadminbar,
body.amelia_page_wpamelia-customfields div#wpadminbar,
body.amelia_page_wpamelia-customize div#wpadminbar,
body.amelia_page_wpamelia-notifications div#wpadminbar,
body.amelia_page_wpamelia-dashboard div#wpadminbar,
body.amelia_page_wpamelia-features-integrations div#wpadminbar,
body.amelia_page_wpamelia-catalog div#wpadminbar {
    margin-left: 0;
}

.amd-header__title span {
    font-weight: normal !important;
}

/* || Amelia SYS theme overrides */
:root {
    /* Amelia branding */
    --theme-logo: var(--accent-color) !important;

    /* Main brand: SYS turquoise */
    --theme-main-brand-4: #173f41 !important;
    --theme-main-brand-3: #225f61 !important;
    --theme-main-brand-2: #2d7d80 !important;
    --theme-main-brand-1: #389497 !important;
    --theme-main-brand-0: #44a3a6 !important;
    --theme-main-brand--1: #69b6b8 !important;
    --theme-main-brand--2: #91cbcd !important;
    --theme-main-brand--3: #b9dfe0 !important;
    --theme-main-brand--4: #e9f5f5 !important;

    --theme-main-brand-o90: rgba(68, 163, 166, .90) !important;
    --theme-main-brand-o80: rgba(68, 163, 166, .80) !important;
    --theme-main-brand-o70: rgba(68, 163, 166, .70) !important;
    --theme-main-brand-o60: rgba(68, 163, 166, .60) !important;
    --theme-main-brand-o50: rgba(68, 163, 166, .50) !important;
    --theme-main-brand-o40: rgba(68, 163, 166, .40) !important;
    --theme-main-brand-o30: rgba(68, 163, 166, .30) !important;
    --theme-main-brand-o20: rgba(68, 163, 166, .20) !important;
    --theme-main-brand-o10: rgba(68, 163, 166, .10) !important;
    --theme-main-brand-o5: rgba(68, 163, 166, .05) !important;

    /* Neutral blue-grey */
    --theme-main-danube-5: #172c38 !important;
    --theme-main-danube-4: #1f3a4a !important;
    --theme-main-danube-3: #36515f !important;
    --theme-main-danube-2: #506875 !important;
    --theme-main-danube-1: #667784 !important;
    --theme-main-danube-0: #81909a !important;
    --theme-main-danube--1: #a2adb4 !important;
    --theme-main-danube--2: #c5cdd2 !important;
    --theme-main-danube--3: #e4e9ec !important;
    --theme-main-danube--4: #f4f7f8 !important;

    --theme-main-danube-o90: rgba(102, 119, 132, .90) !important;
    --theme-main-danube-o80: rgba(102, 119, 132, .80) !important;
    --theme-main-danube-o70: rgba(102, 119, 132, .70) !important;
    --theme-main-danube-o60: rgba(102, 119, 132, .60) !important;
    --theme-main-danube-o50: rgba(102, 119, 132, .50) !important;
    --theme-main-danube-o40: rgba(102, 119, 132, .40) !important;
    --theme-main-danube-o30: rgba(102, 119, 132, .30) !important;
    --theme-main-danube-o20: rgba(102, 119, 132, .20) !important;
    --theme-main-danube-o10: rgba(102, 119, 132, .10) !important;
    --theme-main-danube-o5: rgba(102, 119, 132, .05) !important;
    --theme-main-danube-o5-solid: #f7f9fa !important;
    --theme-main-danube-o50-solid: #b2bbc1 !important;

    /* Text colours */
    --theme-main-yankees-4: #13252f !important;
    --theme-main-yankees-3: #172e3b !important;
    --theme-main-yankees-2: #1f3a4a !important;
    --theme-main-yankees-1: #314c5a !important;
    --theme-main-yankees-0: #425d6b !important;
    --theme-main-yankees--1: #667784 !important;
    --theme-main-yankees--2: #91a0aa !important;
    --theme-main-yankees--3: #c1cbd1 !important;
    --theme-main-yankees--4: #f4f7f8 !important;

    --theme-main-text-0: #1f3a4a !important;
    --theme-main-text--1: #667784 !important;
    --theme-main-text--2: #91a0aa !important;

    /* Secondary Amelia accent: SYS orange */
    --theme-accent-raspberry-4: #8f210d !important;
    --theme-accent-raspberry-3: #ad2912 !important;
    --theme-accent-raspberry-2: #c93218 !important;
    --theme-accent-raspberry-1: #df391c !important;
    --theme-accent-raspberry-0: #f4401f !important;
    --theme-accent-raspberry--1: #f7684d !important;
    --theme-accent-raspberry--2: #fa9987 !important;
    --theme-accent-raspberry--3: #fdc9bf !important;
    --theme-accent-raspberry--4: #fff0ed !important;

    --theme-accent-raspberry-o90: rgba(244, 64, 31, .90) !important;
    --theme-accent-raspberry-o80: rgba(244, 64, 31, .80) !important;
    --theme-accent-raspberry-o70: rgba(244, 64, 31, .70) !important;
    --theme-accent-raspberry-o60: rgba(244, 64, 31, .60) !important;
    --theme-accent-raspberry-o50: rgba(244, 64, 31, .50) !important;
    --theme-accent-raspberry-o40: rgba(244, 64, 31, .40) !important;
    --theme-accent-raspberry-o30: rgba(244, 64, 31, .30) !important;
    --theme-accent-raspberry-o20: rgba(244, 64, 31, .20) !important;
    --theme-accent-raspberry-o10: rgba(244, 64, 31, .10) !important;
    --theme-accent-raspberry-o5: rgba(244, 64, 31, .05) !important;

    /* Informational blue */
    --theme-accent-blue-4: #174264 !important;
    --theme-accent-blue-3: #1d567e !important;
    --theme-accent-blue-2: #256b99 !important;
    --theme-accent-blue-1: #2e82b7 !important;
    --theme-accent-blue-0: #3998d0 !important;
    --theme-accent-blue--1: #62add8 !important;
    --theme-accent-blue--2: #91c7e5 !important;
    --theme-accent-blue--3: #c5e2f2 !important;
    --theme-accent-blue--4: #edf7fc !important;

    --theme-accent-blue-o90: rgba(57, 152, 208, .90) !important;
    --theme-accent-blue-o80: rgba(57, 152, 208, .80) !important;
    --theme-accent-blue-o70: rgba(57, 152, 208, .70) !important;
    --theme-accent-blue-o60: rgba(57, 152, 208, .60) !important;
    --theme-accent-blue-o50: rgba(57, 152, 208, .50) !important;
    --theme-accent-blue-o40: rgba(57, 152, 208, .40) !important;
    --theme-accent-blue-o30: rgba(57, 152, 208, .30) !important;
    --theme-accent-blue-o20: rgba(57, 152, 208, .20) !important;
    --theme-accent-blue-o10: rgba(57, 152, 208, .10) !important;
    --theme-accent-blue-o5: rgba(57, 152, 208, .05) !important;

    /* Alternative accents follow the SYS palette */
    --theme-accent-sky-blue-4: #173f41 !important;
    --theme-accent-sky-blue-3: #225f61 !important;
    --theme-accent-sky-blue-2: #2d7d80 !important;
    --theme-accent-sky-blue-1: #389497 !important;
    --theme-accent-sky-blue-0: #44a3a6 !important;
    --theme-accent-sky-blue--1: #69b6b8 !important;
    --theme-accent-sky-blue--2: #91cbcd !important;
    --theme-accent-sky-blue--3: #b9dfe0 !important;
    --theme-accent-sky-blue--4: #e9f5f5 !important;

    --theme-accent-sky-blue-o90: rgba(68, 163, 166, .90) !important;
    --theme-accent-sky-blue-o80: rgba(68, 163, 166, .80) !important;
    --theme-accent-sky-blue-o70: rgba(68, 163, 166, .70) !important;
    --theme-accent-sky-blue-o60: rgba(68, 163, 166, .60) !important;
    --theme-accent-sky-blue-o50: rgba(68, 163, 166, .50) !important;
    --theme-accent-sky-blue-o40: rgba(68, 163, 166, .40) !important;
    --theme-accent-sky-blue-o30: rgba(68, 163, 166, .30) !important;
    --theme-accent-sky-blue-o20: rgba(68, 163, 166, .20) !important;
    --theme-accent-sky-blue-o10: rgba(68, 163, 166, .10) !important;
    --theme-accent-sky-blue-o5: rgba(68, 163, 166, .05) !important;

    /* Amelia purple replaced with muted SYS blue */
    --theme-accent-purple-4: #173f52 !important;
    --theme-accent-purple-3: #1e5269 !important;
    --theme-accent-purple-2: #276b88 !important;
    --theme-accent-purple-1: #3284a6 !important;
    --theme-accent-purple-0: #429aba !important;
    --theme-accent-purple--1: #6bb0c9 !important;
    --theme-accent-purple--2: #99ccdc !important;
    --theme-accent-purple--3: #c9e5ed !important;
    --theme-accent-purple--4: #eef8fa !important;

    /* Ocean becomes a darker SYS turquoise */
    --theme-accent-ocean-4: #133e3f !important;
    --theme-accent-ocean-3: #195758 !important;
    --theme-accent-ocean-2: #227273 !important;
    --theme-accent-ocean-1: #2f8b8e !important;
    --theme-accent-ocean-0: #44a3a6 !important;
    --theme-accent-ocean--1: #69b6b8 !important;
    --theme-accent-ocean--2: #91cbcd !important;
    --theme-accent-ocean--3: #b9dfe0 !important;
    --theme-accent-ocean--4: #e9f5f5 !important;

    /* Surfaces and interface states */
    --theme-divider: rgba(217, 226, 231, .90) !important;
    --theme-divider-calendar: rgba(217, 226, 231, .90) !important;
    --theme-hover: rgba(68, 163, 166, .08) !important;
    --theme-hover-3: rgba(68, 163, 166, .18) !important;
    --theme-tint: rgba(31, 58, 74, .20) !important;
    --theme-skeleton: rgba(68, 163, 166, .08) !important;
    --theme-skeleton-to: rgba(68, 163, 166, .15) !important;
    --theme-bottom-sheet: #f4f7f8 !important;
    --theme-ground-level-3: #ffffff !important;
    --theme-ground-level-2-foreground: #ffffff !important;
    --theme-ground-level-2-background: #f4f7f8 !important;
    --theme-ground-level-1-foreground: #ffffff !important;
    --theme-ground-level-1-background: #f4f7f8 !important;

    /* Element Plus variables used inside Amelia */
    --el-color-primary: #44a3a6 !important;
    --el-color-primary-light-3: #7cbec0 !important;
    --el-color-primary-light-5: #a1d1d2 !important;
    --el-color-primary-light-7: #c7e5e6 !important;
    --el-color-primary-light-8: #d9eeee !important;
    --el-color-primary-light-9: #ecf7f7 !important;
    --el-color-primary-dark-2: #368285 !important;

    --el-color-danger: #f4401f !important;
    --el-color-danger-light-9: #fff0ed !important;

    --el-color-warning: #e78924 !important;
    --el-color-warning-light-9: #fdf4e8 !important;

    --el-color-success: #39966f !important;
    --el-color-success-light-9: #edf8f3 !important;

    --el-color-info: #3998d0 !important;
    --el-color-info-light-9: #edf7fc !important;

    --el-text-color-primary: #1f3a4a !important;
    --el-text-color-regular: #425d6b !important;
    --el-text-color-secondary: #667784 !important;
    --el-text-color-placeholder: #91a0aa !important;

    --el-border-color: #d9e2e7 !important;
    --el-border-color-light: #e4eaed !important;
    --el-border-color-lighter: #edf1f3 !important;
    --el-fill-color-blank: #ffffff !important;
    --el-fill-color-light: #f4f7f8 !important;
}

/* Optional: make Amelia's rounding consistent with the dashboard */
#amelia-app,
.amelia-app,
.amelia-v2-booking {
    --el-border-radius-base: var(--border-radius) !important;
    --el-border-radius-small: var(--border-radius) !important;
}

/* || Amelia v9.0+ */
/* || Elementor */
#wpcontent #e-admin-top-bar-root .e-admin-top-bar {
    padding: 0 72px;
}

.e-admin-top-bar__heading .e-logo-wrapper {
    display: none;
}

#wpcontent span.e-admin-top-bar__heading-title {
    font-size: 23px;
    font-weight: 400;
    line-height: 1.3;
    color: #1D2327;
}

#wpcontent #e-admin-top-bar-root .e-admin-top-bar__heading {
    margin-inline-end: 0;
}

div#elementor-editor-button, button#elementor-switch-mode-button {
    padding: 0 36px;
    line-height: 3;
    font-weight: 600;
}

div#elementor-switch-mode {
    position: absolute;
    top: -16px;
    right: 0;
}

button#elementor-switch-mode-button {
    display: none;
}

body.elementor-editor-inactive #titlediv {
    width: calc(100% - 225px);
}

body.elementor-editor-active #titlediv {
    width: calc(100% - 300px);
}

/** Never display ugly elementor icon */
i.eicon-elementor-square {
    display: none;
}

/* || Elementor */
/* || CleanTalk */
body.edit-comments-php a[href*="page=ct_check_spam"] {
    display: none !important;
}
/* || CleanTalk */
/* || Login page */
.login-container img {
    margin-bottom: 1.5em;
    width: 250px;
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.login-container .box {
    padding: 24px;
}

.login #login {
    padding: 0;
}

body.login form {
    margin: 0;
    border: none;
    box-shadow: none;
    padding: 0;
}

.login p#nav {
    text-align: center;
}

.login .privacy-policy-page-link, p#backtoblog, body.login h1 a, .language-switcher {
    display: none;
}

body.login {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) no-repeat, repeat-x center, center bottom;
}

/* || Login page inputs - styled the same as normal inputs but different CSS because we cannot modify the HTML */
body.login #loginform > p:first-of-type,
body.login #loginform .user-pass-wrap,
body.login #lostpasswordform > p:first-of-type {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 28px;
}

/* Username/password/lost password fields */
body.login #loginform #user_login,
body.login #loginform #user_pass,
body.login #lostpasswordform #user_login {
    width: 100%;
    min-width: 100%;
    padding: 18px 0 8px;
    border: 0;
    border-bottom: 1px solid #d1d5db;
    border-radius: 0;
    background: transparent;
    font-size: 0.95rem;
    color: #111827;
    outline: none;
    transition: border-color 0.2s ease;
    box-shadow: none;
    margin-bottom: 0;
}

body.login #loginform > p:first-of-type > label,
body.login #loginform .user-pass-wrap > label,
body.login #lostpasswordform > p:first-of-type > label {
    position: absolute;
    top: 18px;
    left: 0;
    z-index: 2;
    font-size: 0.95rem;
    font-weight: 400;
    color: #6b7280;
    pointer-events: none;
    transition: all 0.18s ease;
}

/* Focus state */
body.login #loginform > p:first-of-type:focus-within #user_login,
body.login #loginform .user-pass-wrap:focus-within #user_pass,
body.login #lostpasswordform > p:first-of-type:focus-within #user_login {
    border-bottom-color: var(--primary-color);
    box-shadow: none;
}

body.login #loginform > p:first-of-type:focus-within > label,
body.login #loginform .user-pass-wrap:focus-within > label,
body.login #lostpasswordform > p:first-of-type:focus-within > label {
    top: 0;
    font-size: 0.72rem;
    color: var(--primary-color);
    font-weight: 500;
}

body.login #loginform > p:first-of-type:has(#user_login:valid) > label,
body.login #loginform .user-pass-wrap:has(#user_pass:valid) > label,
body.login #lostpasswordform > p:first-of-type:has(#user_login:valid) > label,
body.login #loginform > p:first-of-type:has(#user_login:-webkit-autofill) > label,
body.login #loginform .user-pass-wrap:has(#user_pass:-webkit-autofill) > label,
body.login #lostpasswordform > p:first-of-type:has(#user_login:-webkit-autofill) > label {
    top: 0;
    font-size: 0.72rem;
    color: var(--primary-color);
    font-weight: 500;
}

body.login #loginform .wp-pwd {
    position: relative;
    display: block;
}

body.login #loginform #user_pass {
    padding-right: 42px;
}

body.login #loginform .forgetmenot {
    margin-bottom: 18px;
}

body.login #loginform #wp-submit,
body.login #lostpasswordform #wp-submit {
    width: 100%;
}

/* || Login page */
/* || jQuery UI Dialog / Pop-ups */
body.wp-admin .ui-widget-overlay {
    z-index: 100000 !important;
}

body.wp-admin .ui-dialog.ui-widget.ui-widget-content {
    padding: 0 !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

body.wp-admin .ui-dialog .ui-dialog-titlebar.ui-widget-header {
    display: flex !important;
    align-items: center !important;
    min-height: 56px !important;
    border: 0 !important;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important;
    color: white !important;
}

body.wp-admin .ui-dialog .ui-dialog-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    color: white !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 500;
}

body.wp-admin .ui-dialog .ui-dialog-titlebar-close {
    right: 1em !important;
}

body.wp-admin .ui-dialog .ui-dialog-title .dashicons {
    color: white !important;
    font-size: 20px !important;
}

body.wp-admin .ui-dialog .ui-dialog-titlebar-close .ui-icon {
    color: white !important;
}

body.wp-admin .ui-dialog .ui-dialog-content.ui-widget-content {
    width: auto !important;
    min-height: 0 !important;
    padding: 18px 18px 12px 18px !important;
    border: 0 !important;
    background: white !important;
    color: var(--accent-color) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

body.wp-admin .ui-dialog .ui-dialog-content p {
    margin: 0 !important;
}

body.wp-admin .ui-dialog .ui-dialog-buttonpane.ui-widget-content {
    margin: 0 !important;
    padding: 12px !important;
    border: 0 !important;
    background: white !important;
    border-radius: var(--border-radius) !important;
}

body.wp-admin .ui-dialog .ui-dialog-buttonset {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    float: none !important;
}
/* || jQuery UI Dialog / Pop-ups */
/* || Generate SEO button */
.seo-generator-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.seo-generator-container .spinner {
    margin: 0;
}
/* || Generate SEO button */