/* THEME COLOURS

   Every colour the two dashboard themes disagree on lives here and ONLY here - these declarations were pulled
   out of style.bundle.css and custom.css so a theme is re-coloured in one place instead of hunting the same hex
   through two stylesheets.

   Each themed selector gets a matched pair: the orange-blue rule reproduces exactly what was taken out of the
   base stylesheets, the green-blue rule replaces it. Which one is live is decided by the class the layouts put
   on <body> from the profile, so one of the two is always inert.

   WHY :where() AND NOT A PLAIN body.theme-x PREFIX: :where() adds no specificity, so each rule below weighs
   exactly what it weighed while it sat in the base stylesheet, and this file loads exactly where custom.css
   left off. Nothing in the cascade moves - dash_candidates.css still overrides the same rules it always did.
   A plain body.theme-x prefix would out-weigh those overrides and repaint the candidate dashboard.

   A few green-blue rules have no orange-blue partner: they colour something the base stylesheets never
   coloured, so orange-blue is correct with no rule at all.

   ADDING A COLOUR: add it here as a pair, never back in custom.css - a themed colour left in a base stylesheet
   is invisible to the other theme and bleeds through it.

   THE SECOND AXIS: the bottom of this file carries the MENU BAR THEMES, which are not colours at all - they
   are the shape of the header's section tabs, chosen independently of the palette by menu_theme() and stamped
   on <body> next to the colour class. Either treatment has to work in either palette, which is why they are
   two classes and not four.
*/

:where(body.theme-orange-blue) .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs > .m-menu__link {
    background: #f99d3d;
}

:where(body.theme-green-blue) .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs > .m-menu__link {
    background: #0da728;
}


:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__section .m-menu__section-text {
    color: #f99d3d!important;
}

:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__section .m-menu__section-text {
    color: #32733d !important;
}


:where(body.theme-orange-blue) .agency_icon {
    background: #ff8f00;
}

:where(body.theme-green-blue) .agency_icon {
    background: #32733d;
}


:where(body.theme-orange-blue) .m-loader.m-loader--brand:before {
    border-top-color: #ff8000;
}

:where(body.theme-green-blue) .m-loader.m-loader--brand:before {
    border-top-color: #32733d!important;
}


:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__heading .m-menu__link-text,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link .m-menu__link-text {
    color: #f8720c;
}

:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__heading .m-menu__link-text,
:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link .m-menu__link-text {
    color: #32733d;
}


:where(body.theme-orange-blue) .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger {
    background: #ff8300;
    background: -webkit-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: -o-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: -moz-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
}

:where(body.theme-green-blue) .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger {
    background: linear-gradient(193deg, #32733d 30%, #18af24 100%);
}


:where(body.theme-orange-blue) .btn-outline-warning.m-btn--air,
:where(body.theme-orange-blue) .btn-warning.m-btn--air,
:where(body.theme-orange-blue) .m-btn--gradient-from-warning.m-btn--air {
    box-shadow: 0px 5px 10px 2px rgba(255, 123, 0, 0.24) !important;
}

:where(body.theme-green-blue) .btn-outline-warning.m-btn--air,
:where(body.theme-green-blue) .btn-warning.m-btn--air,
:where(body.theme-green-blue) .m-btn--gradient-from-warning.m-btn--air {
    box-shadow: #32733d4d 0px 5px 10px 2px !important;
}


:where(body.theme-orange-blue) .m-switch input:checked ~ span:after {
    background-color: #ff8f00;
}

:where(body.theme-green-blue) .m-switch input:checked ~ span:after {
    background: linear-gradient(193deg, #32733d 30%, #18af24 100%);
    background-color: none;
}


:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__heading .m-menu__link-text,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link .m-menu__link-text:not(.no-hover) {
    color: #ff8f00!important;
}

:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__heading .m-menu__link-text,
:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link .m-menu__link-text:not(.no-hover) {
    color: #32733d !important;
}


:where(body.theme-orange-blue) .btn-brand:hover {
    border: #ff8300;
    background: #ff8300;
    background: -webkit-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: -o-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: -moz-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
}

:where(body.theme-green-blue) .btn-brand:hover {
    border: #32733d;
    background: #32733d;
    background: linear-gradient(193deg, #32733d 30%, #18af24 100%);
    background: -o-linear-gradient(193deg, #32733d 30%, #18af24 100%);
    background: -moz-linear-linear-gradient(193deg, #32733d 30%, #18af24 100%);
    background: linear-gradient(193deg, #32733d 30%, #18af24 100%);
}


:where(body.theme-orange-blue) .btn-brand:not(:disabled):not(.disabled):active,
:where(body.theme-orange-blue) .btn-brand:not(:disabled):not(.disabled).active,
:where(body.theme-orange-blue) .show > .btn-brand.dropdown-toggle {
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%) !important;
}

:where(body.theme-green-blue) .btn-brand:not(:disabled):not(.disabled):active,
:where(body.theme-green-blue) .btn-brand:not(:disabled):not(.disabled).active,
:where(body.theme-green-blue) .show > .btn-brand.dropdown-toggle {
    background: linear-gradient(193deg, #32733d 30%, #18af24 100%)!important;
}


:where(body.theme-orange-blue) .bootstrap-select.btn-group.show > .dropdown-toggle.btn-default,
:where(body.theme-orange-blue) .bootstrap-select.btn-group.show > .dropdown-toggle.btn-secondary {
    border-color: #f99d3d !important;
}

:where(body.theme-green-blue) .bootstrap-select.btn-group.show > .dropdown-toggle.btn-default,
:where(body.theme-green-blue) .bootstrap-select.btn-group.show > .dropdown-toggle.btn-secondary {
    border-color: #cfff45 !important;
}


:where(body.theme-orange-blue) .m-scroll-top > i {
    color: #ff8300;
}

:where(body.theme-green-blue) .m-scroll-top > i {
    color: #32733d;
}


:where(body.theme-orange-blue) .form-control.focus,
:where(body.theme-orange-blue) .form-control:focus {
    box-shadow: 0px 1px 15px 1px rgba(255, 133, 0, 0.66)!important;
    border: 1px solid #ff8f00;
}

:where(body.theme-green-blue) .form-control.focus,
:where(body.theme-green-blue) .form-control:focus {
    box-shadow: 0px 1px 15px 1px rgb(207 255 69 / 50%) !important;
    border: 1px solid #cfff45;
}


:where(body.theme-orange-blue) .m-btn--warning-noactive:active {
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%) !important;
}

:where(body.theme-green-blue) .m-btn--warning-noactive:active {
    background: linear-gradient(193deg, #32733d 30%, #18af24 100%)!important;
}


:where(body.theme-orange-blue) .m-accordion--funnel-border > div > .m-accordion__item > .m-accordion__item-head .accordion_before {
    background: #36a3f7;
}

:where(body.theme-green-blue) .m-accordion--funnel-border > div > .m-accordion__item > .m-accordion__item-head .accordion_before {
    background: #336c9f;
}


:where(body.theme-orange-blue) .slider-cont .noUi-target .noUi-connect,
:where(body.theme-orange-blue) .range-slider-cont .noUi-target .noUi-connect {
    background: #ff8300;
    background: -webkit-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: -o-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: -moz-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
}

:where(body.theme-green-blue) .slider-cont .noUi-target .noUi-connect,
:where(body.theme-green-blue) .range-slider-cont .noUi-target .noUi-connect {
    background: #32733d;
    background: -webkit-linear-gradient(193deg, #32733d 30%, #18af24 100%);
    background: -o-linear-gradient(193deg, #32733d 30%, #18af24 100%);
    background: -moz-linear-gradient(193deg, #32733d 30%, #18af24 100%);
    background: linear-gradient(193deg, #32733d 30%, #18af24 100%);
}


:where(body.theme-orange-blue) .policy_tag-wrap .link_copy:hover {
    background-color: #ff8f00;
}

:where(body.theme-green-blue) .policy_tag-wrap .link_copy:hover {
    background-color: #32733d;
}


:where(body.theme-orange-blue) .datepicker tbody tr > td.day.selected,
:where(body.theme-orange-blue) .datepicker tbody tr > td.day.selected:hover,
:where(body.theme-orange-blue) .datepicker tbody tr > td.day.active,
:where(body.theme-orange-blue) .datepicker tbody tr > td.day.active:hover,
:where(body.theme-orange-blue) .datepicker tbody tr > td span.month.active:hover,
:where(body.theme-orange-blue) .datepicker tbody tr > td span.month.active,
:where(body.theme-orange-blue) .datepicker table tr td span.active.active,
:where(body.theme-orange-blue) .datepicker table tr td span.active.disabled.active,
:where(body.theme-orange-blue) .datepicker table tr td span.active.disabled:active,
:where(body.theme-orange-blue) .datepicker table tr td span.active.disabled:hover.active,
:where(body.theme-orange-blue) .datepicker table tr td span.active.disabled:hover:active,
:where(body.theme-orange-blue) .datepicker table tr td span.active:active,
:where(body.theme-orange-blue) .datepicker table tr td span.active:hover.active,
:where(body.theme-orange-blue) .datepicker table tr td span.active:hover:active {
    background-color: #ff8f00;
}

:where(body.theme-green-blue) .datepicker tbody tr > td.day.selected,
:where(body.theme-green-blue) .datepicker tbody tr > td.day.selected:hover,
:where(body.theme-green-blue) .datepicker tbody tr > td.day.active,
:where(body.theme-green-blue) .datepicker tbody tr > td.day.active:hover,
:where(body.theme-green-blue) .datepicker tbody tr > td span.month.active:hover,
:where(body.theme-green-blue) .datepicker tbody tr > td span.month.active,
:where(body.theme-green-blue) .datepicker table tr td span.active.active,
:where(body.theme-green-blue) .datepicker table tr td span.active.disabled.active,
:where(body.theme-green-blue) .datepicker table tr td span.active.disabled:active,
:where(body.theme-green-blue) .datepicker table tr td span.active.disabled:hover.active,
:where(body.theme-green-blue) .datepicker table tr td span.active.disabled:hover:active,
:where(body.theme-green-blue) .datepicker table tr td span.active:active,
:where(body.theme-green-blue) .datepicker table tr td span.active:hover.active,
:where(body.theme-green-blue) .datepicker table tr td span.active:hover:active {
    background-color: #32733d;
}


:where(body.theme-orange-blue) .datepicker tbody tr > td.day.today {
    background: #097cc1 !important;
}

/* the same blue the range picker gives today in this theme, so every calendar marks today alike */
:where(body.theme-green-blue) .datepicker tbody tr > td.day.today {
    background: #5e9ad1 !important;
}


:where(body.theme-orange-blue) .agency_span {
    background: #ff8f00;
}

:where(body.theme-green-blue) .agency_span {
    background: #336c9f;
}


:where(body.theme-orange-blue) .trigger-icon,
:where(body.theme-orange-blue) .recipient_type i {
    color: #f88226 !important;
}

/* a trigger or recipient glyph NAMES a thing, so it takes the platform's glyph blue - it sits on white
   (the Trigger menu, its closed field, the Recipient Type row, a log head). The blue accordion heads that
   carry one ask for white themselves with .trigger-icon-white. */
:where(body.theme-green-blue) .trigger-icon,
:where(body.theme-green-blue) .recipient_type i {
    color: #336c9f !important;
}


/* no orange-blue counterpart - the base stylesheets carry no rule here */

:where(body.theme-green-blue) .dropdown-header {
    color: #174772;
}


:where(body.theme-orange-blue) .tox .tox-dialog__footer .tox-button {
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%) !important;
    box-shadow: 0px 5px 10px 2px rgba(255, 123, 0, 0.24) !important;
}

:where(body.theme-green-blue) .tox .tox-dialog__footer .tox-button {
    background: linear-gradient(193deg, #32733d 30%, #18af24 100%) !important;
    box-shadow: 0px 5px 10px 2px rgb(34 151 45 / 27%) !important;
}


:where(body.theme-orange-blue) .btn.m-btn--hover-accent:hover,
:where(body.theme-orange-blue) .btn.m-btn--hover-accent.active,
:where(body.theme-orange-blue) .btn.m-btn--hover-accent:active,
:where(body.theme-orange-blue) .btn.m-btn--hover-accent:focus,
:where(body.theme-orange-blue) .show > .btn.m-btn--hover-accent.dropdown-toggle {
    color: #ffffff !important;
    background: #ff8300 !important;
    background: -webkit-linear-gradient(135deg, #f99d3d 30%, #f76700 100%) !important;
    background: -o-linear-gradient(135deg, #f99d3d 30%, #f76700 100%) !important;
    background: -moz-linear-gradient(135deg, #f99d3d 30%, #f76700 100%) !important;
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%) !important;
}

:where(body.theme-green-blue) .btn.m-btn--hover-accent:hover,
:where(body.theme-green-blue) .btn.m-btn--hover-accent.active,
:where(body.theme-green-blue) .btn.m-btn--hover-accent:active,
:where(body.theme-green-blue) .btn.m-btn--hover-accent:focus,
:where(body.theme-green-blue) .show > .btn.m-btn--hover-accent.dropdown-toggle {
    color: #ffffff !important;
    background: #32733d !important;
    background: -webkit-linear-gradient(193deg, #32733d 30%, #18af24 100%) !important;
    background: -o-linear-gradient(193deg, #32733d 30%, #18af24 100%) !important;
    background: -moz-linear-gradient(193deg, #32733d 30%, #18af24 100%) !important;
    background: linear-gradient(193deg, #32733d 30%, #18af24 100%) !important;
}


:where(body.theme-orange-blue) .m-switch input:checked:disabled ~ span::after {
    background: #f9c185;
}

:where(body.theme-green-blue) .m-switch input:checked:disabled ~ span::after {
    background: #13731b85;
}


:where(body.theme-orange-blue) .select2-selection--single,
:where(body.theme-orange-blue) .select2-custom.select2-container--default.select2-container--open .select2-selection--single,
:where(body.theme-orange-blue) .select2-add-border.filter-border .select2-custom .select2-selection {
    border: 1px solid #f99d3d;
}

:where(body.theme-green-blue) .select2-selection--single,
:where(body.theme-green-blue) .select2-custom.select2-container--default.select2-container--open .select2-selection--single,
:where(body.theme-green-blue) .select2-add-border.filter-border .select2-custom .select2-selection {
    border: 1px solid #cfff45;
}


:where(body.theme-orange-blue) .orange {
    background-color: #ff8f00;
}

:where(body.theme-green-blue) .orange {
    background-color: #32733d;
}


:where(body.theme-orange-blue) .fa.cred_key {
    color: #f88226 !important;
}

:where(body.theme-green-blue) .fa.cred_key {
    color: #32733d !important;
}


:where(body.theme-orange-blue) .m-checkbox > input:checked ~ span {
    border: 1px solid #ff8f00!important;
    background-color: #ff8f00!important;
}

:where(body.theme-green-blue) .m-checkbox > input:checked ~ span {
    border: 1px solid #32733d !important;
    background-color: #32733d !important;
}


:where(body.theme-orange-blue) .CodeMirror-focused {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    box-shadow: 0px 1px 15px 1px rgba(255, 133, 0, 0.66) !important;
    border: 1px solid #ff8f00;
}

:where(body.theme-green-blue) .CodeMirror-focused {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    box-shadow: 0px 1px 15px 1px #cfff45 !important;
    border: 1px solid #cfff45;
}


:where(body.theme-orange-blue) .display-format-radio > span:after {
    border: solid #f77611!important;
    background: #f77611!important;
}

:where(body.theme-green-blue) .display-format-radio > span:after {
    border: solid #32733d !important;
    background: #32733d !important;
}


:where(body.theme-orange-blue) .margin_slider .noUi-handle {
    background: #ff8300;
    background: -webkit-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: -o-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: -moz-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
}

:where(body.theme-green-blue) .margin_slider .noUi-handle {
    background: #32733d;
    background: -webkit-linear-gradient(193deg, #32733d 30%, #18af24 100%);
    background: -moz-linear-gradient(193deg, #32733d 30%, #18af24 100%);
    background: linear-gradient(193deg, #32733d 30%, #18af24 100%);
}


:where(body.theme-orange-blue) .bootstrap-select.btn-group.filter-border > .dropdown-toggle.btn-default,
:where(body.theme-orange-blue) .bootstrap-select.btn-group.filter-border > .dropdown-toggle.btn-secondary {
    border: 1px solid #ff8300;
}

:where(body.theme-green-blue) .bootstrap-select.btn-group.filter-border > .dropdown-toggle.btn-default,
:where(body.theme-green-blue) .bootstrap-select.btn-group.filter-border > .dropdown-toggle.btn-secondary {
    border: 1px solid #cfff45;
}


:where(body.theme-orange-blue) .search-border,
:where(body.theme-orange-blue) .filter-border-always > .dropdown-toggle.btn-default {
    border: 1px solid #ff8300 !important;
}

:where(body.theme-green-blue) .search-border,
:where(body.theme-green-blue) .filter-border-always > .dropdown-toggle.btn-default {
    border: 1px solid #cfff45 !important;
}


:where(body.theme-orange-blue) .input_icon_rss .input_icon_label {
    background: #f99d3d;
}

:where(body.theme-green-blue) .input_icon_rss .input_icon_label {
    background: #174772;
}


:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--accent.nav.nav-tabs .nav-link:hover,
:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--accent a.m-tabs__link:hover {
    border-bottom: 1px solid #00c5dc;
}

:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--accent.nav.nav-tabs .nav-link:hover,
:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--accent.nav.nav-tabs .nav-link.active,
:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--accent a.m-tabs__link:hover,
:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--accent a.m-tabs__link.active {
    color: #f77611;
    border-bottom: 1px solid #f77611;
}

:where(body.theme-green-blue) .m-tabs-line.m-tabs-line--accent.nav.nav-tabs .nav-link:hover,
:where(body.theme-green-blue) .m-tabs-line.m-tabs-line--accent.nav.nav-tabs .nav-link.active,
:where(body.theme-green-blue) .m-tabs-line.m-tabs-line--accent a.m-tabs__link:hover,
:where(body.theme-green-blue) .m-tabs-line.m-tabs-line--accent a.m-tabs__link.active {
    color: #174772;
    border-bottom: 1px solid #174772;
}


:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--accent.nav.nav-tabs .nav-link:hover > i,
:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--accent.nav.nav-tabs .nav-link.active > i,
:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--accent a.m-tabs__link:hover > i,
:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--accent a.m-tabs__link.active > i {
    color: #f77611;
}

:where(body.theme-green-blue) .m-tabs-line.m-tabs-line--accent.nav.nav-tabs .nav-link:hover > i,
:where(body.theme-green-blue) .m-tabs-line.m-tabs-line--accent.nav.nav-tabs .nav-link.active > i,
:where(body.theme-green-blue) .m-tabs-line.m-tabs-line--accent a.m-tabs__link:hover > i,
:where(body.theme-green-blue) .m-tabs-line.m-tabs-line--accent a.m-tabs__link.active > i {
    color: #174772;
}


/* no orange-blue counterpart - the base stylesheets carry no rule here */

:where(body.theme-green-blue) a:hover {
    color: #174772;
}


:where(body.theme-orange-blue) .m-subheader .m-subheader__breadcrumbs.m-nav > .m-nav__item > .m-nav__link:hover > .m-nav__link-text {
    color: #f77510;
}

:where(body.theme-green-blue) .m-subheader .m-subheader__breadcrumbs.m-nav > .m-nav__item > .m-nav__link:hover > .m-nav__link-text {
    color: #174772;
}


:where(body.theme-orange-blue) .orange_icon {
    color: #f88226 !important;
}

:where(body.theme-green-blue) .orange_icon {
    color: #32733d !important;
}


:where(body.theme-orange-blue) .datetimepicker tbody tr > td span.hour.active:hover,
:where(body.theme-orange-blue) .datetimepicker tbody tr > td span.hour.active,
:where(body.theme-orange-blue) .datetimepicker tbody tr > td span.minute.active:hover,
:where(body.theme-orange-blue) .datetimepicker tbody tr > td span.minute.active,
:where(body.theme-orange-blue) .datetimepicker tbody tr > td span.month.active:hover,
:where(body.theme-orange-blue) .datetimepicker tbody tr > td span.month.active {
    background: #5867dd;
    color: #ffffff;
}

:where(body.theme-green-blue) .datetimepicker tbody tr > td span.hour.active:hover,
:where(body.theme-green-blue) .datetimepicker tbody tr > td span.hour.active,
:where(body.theme-green-blue) .datetimepicker tbody tr > td span.minute.active:hover,
:where(body.theme-green-blue) .datetimepicker tbody tr > td span.minute.active,
:where(body.theme-green-blue) .datetimepicker tbody tr > td span.month.active:hover,
:where(body.theme-green-blue) .datetimepicker tbody tr > td span.month.active {
    background: #32733d;
    color: #ffffff;
}


/* no orange-blue counterpart - the base stylesheets carry no rule here */

:where(body.theme-green-blue) .datetimepicker table tr td span.active:active,
:where(body.theme-green-blue) .datetimepicker table tr td span.active:hover:active,
:where(body.theme-green-blue) .datetimepicker table tr td span.active.disabled:active,
:where(body.theme-green-blue) .datetimepicker table tr td span.active.disabled:hover:active,
:where(body.theme-green-blue) .datetimepicker table tr td span.active.active,
:where(body.theme-green-blue) .datetimepicker table tr td span.active:hover.active,
:where(body.theme-green-blue) .datetimepicker table tr td span.active.disabled.active,
:where(body.theme-green-blue) .datetimepicker table tr td span.active.disabled:hover.active {
    background-color: #32733d;
}


:where(body.theme-orange-blue) .datetimepicker tbody tr > td.day.today {
    background: #828ee6;
}

:where(body.theme-green-blue) .datetimepicker tbody tr > td.day.today {
    background: #32733d;
}


:where(body.theme-orange-blue) .datetimepicker tbody tr > td.day.selected,
:where(body.theme-orange-blue) .datetimepicker tbody tr > td.day.active {
    background: #5867dd;
}

:where(body.theme-green-blue) .datetimepicker tbody tr > td.day.selected,
:where(body.theme-green-blue) .datetimepicker tbody tr > td.day.active {
    background: #32733d;
}


:where(body.theme-orange-blue) .admin-badge {
    background: #ff8300;
    background: -webkit-linear-gradient( 135deg , #f99d3d 30%, #f76700 100%);
    background: -o-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: -moz-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: linear-gradient( 135deg , #f99d3d 30%, #f76700 100%);
}

:where(body.theme-green-blue) .admin-badge {
    background: #32733d;
}


:where(body.theme-orange-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-nav > li > .m-datatable__pager-link.m-datatable__pager-link--active {
    background: #ff8300;
}

:where(body.theme-green-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-nav > li > .m-datatable__pager-link.m-datatable__pager-link--active {
    background: #174772;
}


:where(body.theme-orange-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-nav > li > .m-datatable__pager-link:hover {
    background: #ff8300;
}

:where(body.theme-green-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-nav > li > .m-datatable__pager-link:hover {
    background: #174772;
}


:where(body.theme-orange-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-nav > li > .m-datatable__pager-link.m-datatable__pager-link--first:hover,
:where(body.theme-orange-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-nav > li > .m-datatable__pager-link.m-datatable__pager-link--prev:hover,
:where(body.theme-orange-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-nav > li > .m-datatable__pager-link.m-datatable__pager-link--next:hover,
:where(body.theme-orange-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-nav > li > .m-datatable__pager-link.m-datatable__pager-link--last:hover {
    background: #ff8300;
}

:where(body.theme-green-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-nav > li > .m-datatable__pager-link.m-datatable__pager-link--first:hover,
:where(body.theme-green-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-nav > li > .m-datatable__pager-link.m-datatable__pager-link--prev:hover,
:where(body.theme-green-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-nav > li > .m-datatable__pager-link.m-datatable__pager-link--next:hover,
:where(body.theme-green-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-nav > li > .m-datatable__pager-link.m-datatable__pager-link--last:hover {
    background: #174772;
}


:where(body.theme-orange-blue) #ai_suggestion ul#countdown {
    color: #ff8f00;
}

:where(body.theme-green-blue) #ai_suggestion ul#countdown {
    color: #174772;
}


:where(body.theme-orange-blue) .cool-dropdown-container .dropdown a:hover {
    color: #f76700;
}

:where(body.theme-green-blue) .cool-dropdown-container .dropdown a:hover {
    color: #32733d;
}


:where(body.theme-orange-blue) .log-column-badge {
    background-color: #36a3f7;
}

:where(body.theme-green-blue) .log-column-badge {
    background-color: #336c9f;
}


:where(body.theme-orange-blue) .edit-solution-section {
    color: #3890d4;
}

:where(body.theme-green-blue) .edit-solution-section {
    color: #336c9f;
}


:where(body.theme-orange-blue) .blue-check2 {
    color: #36a3f7;
}

:where(body.theme-green-blue) .blue-check2 {
    color: #336c9f;
}


:where(body.theme-orange-blue) .white_accordion .acc_icon {
    color: #36a3f7;
}

:where(body.theme-green-blue) .white_accordion .acc_icon {
    color: #336c9f;
}


:where(body.theme-orange-blue) .btn-brand {
    background-color: #097cc1;
}

:where(body.theme-green-blue) .btn-brand {
    background-color: #336c9f;
}


:where(body.theme-orange-blue) .variables-list {
    background-color: #2d8ad2;
}

:where(body.theme-green-blue) .variables-list {
    background-color: #336c9f;
}


:where(body.theme-orange-blue) .instructions-container {
    background-color: #2d8ad2;
}

:where(body.theme-green-blue) .instructions-container {
    background-color: #336c9f;
}


:where(body.theme-orange-blue) .m-accordion.m-accordion--default .sub-accordion > div > .m-accordion__item > .m-accordion__item-head,
:where(body.theme-orange-blue) .m-accordion.m-accordion--default.sub-accordion > div > .m-accordion__item > .m-accordion__item-head {
    background-color: #36a3f7;
}

:where(body.theme-green-blue) .m-accordion.m-accordion--default .sub-accordion > div > .m-accordion__item > .m-accordion__item-head,
:where(body.theme-green-blue) .m-accordion.m-accordion--default.sub-accordion > div > .m-accordion__item > .m-accordion__item-head {
    background-color: #336c9f;
}


:where(body.theme-orange-blue) .sub-accordion.m-accordion--funnel-border > div > .m-accordion__item > .m-accordion__item-head .accordion_before > span {
    color: #36a3f7;
}

:where(body.theme-green-blue) .sub-accordion.m-accordion--funnel-border > div > .m-accordion__item > .m-accordion__item-head .accordion_before > span {
    color: #336c9f;
}


:where(body.theme-orange-blue) .instructions-container-slim {
    background-color: #2d8ad2;
}

:where(body.theme-green-blue) .instructions-container-slim {
    background-color: #336c9f;
}


:where(body.theme-orange-blue) .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs:not(.m-menu__item--active) > .m-menu__link:hover {
    background: #ff8d37;
}

:where(body.theme-green-blue) .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs:not(.m-menu__item--active) > .m-menu__link:hover {
    background: #174772;
}


:where(body.theme-orange-blue) .log-column-badge2 {
    background-color: #36a3f7;
    color: #ffffff;
}

:where(body.theme-green-blue) .log-column-badge2 {
    background-color: #bdff00;
    color: #336c9f;
}


:where(body.theme-orange-blue) .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger:hover,
:where(body.theme-orange-blue) .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger.active,
:where(body.theme-orange-blue) .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger:active,
:where(body.theme-orange-blue) .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger:focus,
:where(body.theme-orange-blue) .show > .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger.dropdown-toggle {
    background: #36a3f7;
    background: -webkit-linear-gradient(135deg, #36a3f7 30%, #097cc1 100%);
    background: -o-linear-gradient(135deg, #36a3f7 30%, #097cc1 100%);
    background: -moz-linear-gradient(135deg, #36a3f7 30%, #097cc1 100%);
    background: linear-gradient(135deg, #36a3f7 30%, #097cc1 100%);
}

:where(body.theme-green-blue) .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger:hover,
:where(body.theme-green-blue) .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger.active,
:where(body.theme-green-blue) .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger:active,
:where(body.theme-green-blue) .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger:focus,
:where(body.theme-green-blue) .show > .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger.dropdown-toggle {
    background: #336c9f;
    background: -webkit-linear-gradient(135deg, #336c9f 30%, #2998db 100%);
    background: -o-linear-gradient(135deg, #336c9f 30%, #2998db 100%);
    background: -moz-linear-gradient(135deg, #336c9f 30%, #2998db 100%);
    background: linear-gradient(135deg, #336c9f 30%, #2998db 100%);
}


:where(body.theme-orange-blue) .accordion-disabled > .accordion_border > .accordion_before {
    background-color: #95d1ff !important;
}

:where(body.theme-green-blue) .accordion-disabled > .accordion_border > .accordion_before {
    background-color: #86abcd !important;
}


:where(body.theme-orange-blue) .accordion-disabled .m-accordion__item-head .log-column-badge {
    background-color: #95d1ff;
}

:where(body.theme-green-blue) .accordion-disabled .m-accordion__item-head .log-column-badge {
    background-color: #86abcd;
}


:where(body.theme-orange-blue) .m-accordion--funnel .m-accordion__item-head > .accordion_before {
    background: #36a3f7;
}

:where(body.theme-green-blue) .m-accordion--funnel .m-accordion__item-head > .accordion_before {
    background: #336c9f;
}


:where(body.theme-orange-blue) .m-radio > input:checked ~ div.col-form-label {
    color: #f77611;
}

:where(body.theme-green-blue) .m-radio > input:checked ~ div.col-form-label {
    color: #1d8f31;
}


:where(body.theme-orange-blue) .url-strings-list {
    background-color: #2d8ad2;
}

:where(body.theme-green-blue) .url-strings-list {
    background-color: #336c9f;
}


:where(body.theme-orange-blue) .title_badge {
    background: #2d8ad2;
}

:where(body.theme-green-blue) .title_badge {
    background: #336c9f;
}


:where(body.theme-orange-blue) .display_categories_wrap span.svg_icon svg path {
    fill: #f88226 !important;
}

:where(body.theme-green-blue) .display_categories_wrap span.svg_icon svg path {
    fill: #32733d !important;
}


:where(body.theme-orange-blue) .terms-link:hover {
    color: #f77813;
}

:where(body.theme-green-blue) .terms-link:hover {
    color: #174772;
}


/* THE HOVER FILL IS PAINTED ONTO THE TILE'S OVERLAY, not onto the tile. A gradient cannot be transitioned -
   background-image does not interpolate in any engine - so the fill sits on a pseudo-element that is always
   there and is faded in by opacity instead. The colours stay here, where the theme's colours belong - green-blue's
   is the profile's own background - and only the box they are painted on has moved. See .quick_links in custom.css
   for the overlay itself. */
:where(body.theme-orange-blue) .quick_links .item > span.text::before {
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
}

:where(body.theme-green-blue) .quick_links .item > span.text::before {
    background: var(--profile-background);
}


:where(body.theme-orange-blue) .m--font-brand {
    color: #ff8300 !important;
}

:where(body.theme-green-blue) .m--font-brand {
    color: #087bc1 !important;
}


:where(body.theme-orange-blue) .btn.btn-default,
:where(body.theme-orange-blue) .btn.btn-secondary {
    background: #ff8300;
    border-color: #ff8300;
}

:where(body.theme-green-blue) .btn.btn-default,
:where(body.theme-green-blue) .btn.btn-secondary {
    background: #174772;
    border-color: #174772;
}


:where(body.theme-orange-blue) .m-widget19 .m-widget19__content .m-widget19__time {
    color: #7b7e8a;
}

:where(body.theme-orange-blue) .m-widget19 .m-widget19__content .m-widget19__time {
    color: #fe8e01!important;
}

:where(body.theme-green-blue) .m-widget19 .m-widget19__content .m-widget19__time {
    color: #087bc1 !important;
}



:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
    background-color: #716aca;
}

:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
    background-color: #716aca;
}

:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
    background-color: #716aca;
}

:where(body.theme-orange-blue) .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
:where(body.theme-orange-blue) .nav-pills .nav-link.active,
:where(body.theme-orange-blue) .nav-pills .show > .nav-link,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
    background-color: #087bc1!important;
}

:where(body.theme-green-blue) .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
:where(body.theme-green-blue) .nav-pills .nav-link.active,
:where(body.theme-green-blue) .nav-pills .show > .nav-link,
:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
    background-color: #336c9f !important;
}


:where(body.theme-orange-blue) .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger {
    background: #ff8300;
    background: -webkit-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: -o-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: -moz-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
}

:where(body.theme-orange-blue) .applyBtn {
    background: #ff8300!important;
    background: -webkit-linear-gradient(135deg, #f99d3d 30%, #f76700 100%)!important;
    background: -o-linear-gradient(135deg, #f99d3d 30%, #f76700 100%)!important;
    background: -moz-linear-gradient(135deg, #f99d3d 30%, #f76700 100%)!important;
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%)!important;
    box-shadow: 0px 5px 10px 2px rgba(132, 132, 132, 0.24) !important;
}

:where(body.theme-orange-blue) .progress-gs .progress-bar.sidebar {
    background: -webkit-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: -o-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: -moz-linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
}

:where(body.theme-green-blue) .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger,
:where(body.theme-green-blue) .applyBtn,
:where(body.theme-green-blue) .progress-gs .progress-bar.sidebar {
    background: #32733d;
    background: -webkit-linear-gradient(193deg, #32733d 30%, #18af24 100%)!important;
    background: -o-linear-gradient(193deg, #32733d 30%, #18af24 100%)!important;
    background: -moz-linear-gradient(193deg, #32733d 30%, #18af24 100%)!important;
    background: linear-gradient(193deg, #32733d 30%, #18af24 100%)!important;
    box-shadow: #32733d4d 0px 5px 10px 2px !important;
}


:where(body.theme-orange-blue) .applyBtn:hover {
    background: #36a3f7!important;
    background: -webkit-linear-gradient(135deg, #36a3f7 30%, #097cc1 100%)!important;
    background: -o-linear-gradient(135deg, #36a3f7 30%, #097cc1 100%)!important;
    background: -moz-linear-gradient(135deg, #36a3f7 30%, #097cc1 100%)!important;
    background: linear-gradient(135deg, #36a3f7 30%, #097cc1 100%)!important;
    -webkit-box-shadow: 0px 5px 10px 2px rgba(132, 132, 132, 0.44) !important;
    -moz-box-shadow: 0px 5px 10px 2px rgba(132, 132, 132, 0.44) !important;
    box-shadow: 0px 5px 10px 2px rgba(132, 132, 132, 0.44) !important;
}

:where(body.theme-green-blue) .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger:hover,
:where(body.theme-green-blue) .applyBtn:hover {
    background: #336c9f;
    background: -webkit-linear-gradient(135deg, #336c9f 30%, #2998db 100%)!important;
    background: -o-linear-gradient(135deg, #336c9f 30%, #2998db 100%)!important;
    background: -moz-linear-gradient(135deg, #336c9f 30%, #2998db 100%)!important;
    background: linear-gradient(135deg, #336c9f 30%, #2998db 100%)!important;
    -webkit-box-shadow: 0px 5px 10px 2px rgba(0, 143, 239, 0.36) !important;
    -moz-box-shadow: 0px 5px 10px 2px rgba(0, 143, 239, 0.36) !important;
    box-shadow: 0px 5px 10px 2px rgba(0, 143, 239, 0.36) !important;
}


/* THE FILL OF A LONG RUN'S PROGRESS BAR - every ATS tool and the Conversations import - in the theme's own
   primary gradient. Both sit on the vendor's .m--bg-brand, whose purple is an important background-COLOUR:
   the gradient is an image and paints over it, which is why neither rule needs to be important. */
:where(body.theme-orange-blue) .ats-sync__bar,
:where(body.theme-orange-blue) .calls-import__bar {
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%);
}

:where(body.theme-green-blue) .ats-sync__bar,
:where(body.theme-green-blue) .calls-import__bar {
    background: linear-gradient(193deg, #32733d 30%, #18af24 100%);
}


/* no orange-blue counterpart - the base stylesheets carry no rule here */

:where(body.theme-green-blue) .m-widget17__visual.m--bg-danger {
    background-color: #336c9f !important;
}


:where(body.theme-orange-blue) .sol_edit_icon:hover {
    background: linear-gradient(135deg, #f99d3d 30%, #f76700 100%) !important;
}

:where(body.theme-green-blue) .sol_edit_icon:hover {
    background: #097cc1!important;
}


/* THE TWO CATEGORIES THAT ARE THE THEME'S. Both are handed over as `--c`, not as a background: that is the
   token every drawing of a category reads - the solid badge paints itself from it (custom.css, UPDATES
   SECTION - CATEGORY COLOURS) and a Latest Updates row mixes its washed chip out of it. */

:where(body.theme-orange-blue) .category-feature {
    --c: #ff8300;
}

:where(body.theme-green-blue) .category-feature {
    --c: #336c9f;
}


:where(body.theme-orange-blue) .category-optimize {
    --c: #8e00ff;
}

:where(body.theme-green-blue) .category-optimize {
    --c: #1da229;
}


/* no orange-blue counterpart - the base stylesheets carry no rule here */

:where(body.theme-green-blue) .btn.btn-default.active,
:where(body.theme-green-blue) .btn.btn-default:active,
:where(body.theme-green-blue) .btn.btn-default:focus,
:where(body.theme-green-blue) .show > .btn.btn-default.dropdown-toggle,
:where(body.theme-green-blue) .btn.btn-secondary:hover:not(:disabled),
:where(body.theme-green-blue) .btn.btn-secondary.active,
:where(body.theme-green-blue) .btn.btn-secondary:active,
:where(body.theme-green-blue) .btn.btn-secondary:focus,
:where(body.theme-green-blue) .show > .btn.btn-secondary.dropdown-toggle {
    border-color: #269d33;
    background-color: #3f9348;
}


:where(body.theme-orange-blue) .m--font-conversions {
    color: #00d936!important;
}

:where(body.theme-green-blue) .m--font-conversions {
    color: #1d8f31 !important;
}


:where(body.theme-orange-blue) .btn-primary {
    border-color: #e57600;
}

:where(body.theme-green-blue) .btn-primary {
    border-color: #32733d;
    background: linear-gradient(193deg, #32733d 30%, #18af24 100%);
}


/* no orange-blue counterpart - the base stylesheets carry no rule here */

:where(body.theme-green-blue) .solution-chart canvas {
    filter: hue-rotate(120deg);
}


:where(body.theme-orange-blue) i.refresh_icon:hover {
    color: #f76e08;
}

:where(body.theme-green-blue) i.refresh_icon:hover {
    color: #1d8f31;
}


:where(body.theme-orange-blue) .m-nav__item:hover {
    color: #ff8300!important;
}

:where(body.theme-green-blue) .m-nav__item:hover {
    color: #1d8f31 !important;
}


:where(body.theme-orange-blue) .filter_add_item:hover a > span,
:where(body.theme-orange-blue) .filter_add_item:hover a > i {
    color: #ff8300 !important;
}

:where(body.theme-green-blue) .filter_add_item:hover a > span,
:where(body.theme-green-blue) .filter_add_item:hover a > i {
    color: #1d8f31 !important;
}


:where(body.theme-orange-blue) .daterangepicker .daterangepicker_input .input-mini.active,
:where(body.theme-orange-blue) .daterangepicker .daterangepicker_input .input-mini:focus {
    border: 1px solid #ff8300!important;
}

:where(body.theme-green-blue) .daterangepicker .daterangepicker_input .input-mini.active,
:where(body.theme-green-blue) .daterangepicker .daterangepicker_input .input-mini:focus {
    border: 2px solid #bdff00 !important;
}


:where(body.theme-orange-blue) .daterangepicker tbody td.in-range,
:where(body.theme-orange-blue) .daterangepicker tbody td.active {
    background: #f99d3d!important;
}

:where(body.theme-green-blue) .daterangepicker tbody td.in-range,
:where(body.theme-green-blue) .daterangepicker tbody td.active {
    background: #356a9b !important;
}


:where(body.theme-orange-blue) .daterangepicker tbody td.today {
    background: #ffb669!important;
}

:where(body.theme-green-blue) .daterangepicker tbody td.today {
    background: #5e9ad1 !important;
}


:where(body.theme-orange-blue) .daterangepicker tbody td.in-range:hover,
:where(body.theme-orange-blue) .daterangepicker tbody td.active:hover {
    background: #0a7dc1 !important;
}

:where(body.theme-green-blue) .daterangepicker tbody td.in-range:hover,
:where(body.theme-green-blue) .daterangepicker tbody td.active:hover {
    background: #174772 !important;
}


:where(body.theme-orange-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-info .m-datatable__pager-size .btn.dropdown-toggle:focus,
:where(body.theme-orange-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-info .m-datatable__pager-size .btn.dropdown-toggle:hover,
:where(body.theme-orange-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-info .m-datatable__pager-size.show > .btn.dropdown-toggle {
    background: #ff8300;
}

:where(body.theme-green-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-info .m-datatable__pager-size .btn.dropdown-toggle:focus,
:where(body.theme-green-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-info .m-datatable__pager-size .btn.dropdown-toggle:hover,
:where(body.theme-green-blue) .m-datatable > .m-datatable__pager > .m-datatable__pager-info .m-datatable__pager-size.show > .btn.dropdown-toggle {
    background: #1d8f31;
}


:where(body.theme-orange-blue) .json-formatter-row .json-formatter-string,
:where(body.theme-orange-blue) .json-formatter-row .json-formatter-stringifiable {
    color: #d06b00!important;
}

:where(body.theme-green-blue) .json-formatter-row .json-formatter-string,
:where(body.theme-green-blue) .json-formatter-row .json-formatter-stringifiable {
    color: #239135 !important;
}


:where(body.theme-orange-blue) .json-object {
    color: #f99c3c;
}

:where(body.theme-green-blue) .json-object {
    color: #336c9f;
}


:where(body.theme-orange-blue) .log-column-badge .log-column-badge2,
:where(body.theme-orange-blue) .log-column-white,
:where(body.theme-orange-blue) .white-badge {
    background: #fff;
    color: #36a3f7;
}

:where(body.theme-green-blue) .log-column-badge .log-column-badge2,
:where(body.theme-green-blue) .log-column-white,
:where(body.theme-green-blue) .white-badge {
    background: #cfff45 !important;
    color: #336c9f;
}


:where(body.theme-orange-blue) .log-column-white i {
    color: #36a3f7;
}

:where(body.theme-green-blue) .log-column-white i {
    color: #336c9f;
}


/* UNDER THE POINTER THE CHIP TURNS WHITE. Orange-blue's already is, so its ink becomes its fill instead. Every one
   of these chips (the Export on a result bar) sits on a blue bar, where green-blue's old navy inversion all but
   disappeared - so its lime goes to white and the ink stays. The lime is important at rest, so the hover is too. */
:where(body.theme-orange-blue) .log-column-white:hover {
    background: #36a3f7;
    color: #fff;
}

:where(body.theme-orange-blue) .log-column-white:hover i {
    color: #fff;
}

:where(body.theme-green-blue) .log-column-white:hover {
    background: #ffffff !important;
    color: #336c9f;
}

:where(body.theme-green-blue) .log-column-white:hover i {
    color: #336c9f;
}


:where(body.theme-orange-blue) .json-formatter-row .json-formatter-number {
    color: #880be1!important;
}

:where(body.theme-green-blue) .json-formatter-row .json-formatter-number {
    color: #2fb2d1 !important;
}


:where(body.theme-orange-blue) .log-column-count {
    background-color: #36a3f7;
}

:where(body.theme-green-blue) .log-column-count,
:where(body.theme-green-blue) .m-table.m-table--head-bg-blue thead th {
    background-color: #336c9f;
}


:where(body.theme-orange-blue) .lead_type_icon > .m-accordion__item-head {
    border-left: 50px solid #36a3f7;
}

:where(body.theme-green-blue) .lead_type_icon > .m-accordion__item-head {
    border-left: 50px solid #336c9f;
}


:where(body.theme-orange-blue) .data-user-timezone {
    background-color: #f99d3c!important;
}

:where(body.theme-green-blue) .data-user-timezone {
    background-color: #1d8f31 !important;
}


:where(body.theme-orange-blue) .profile-item:hover .m-nav__link-text {
    color: #ff8300!important;
}

:where(body.theme-orange-blue) .profile-item:hover .m-nav__link-icon {
    color: #ff8300!important;
}

:where(body.theme-green-blue) .profile-item:hover .m-nav__link-icon,
:where(body.theme-green-blue) .profile-item:hover .m-nav__link-text {
    color: #336c9f !important;
}


:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link:hover,
:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--primary a.m-tabs__link:hover {
    border-bottom: 1px solid #5867dd;
}

:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link:hover,
:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link.active,
:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--primary a.m-tabs__link:hover,
:where(body.theme-orange-blue) .m-tabs-line.m-tabs-line--primary a.m-tabs__link.active {
    color: #ff8300;
    border-bottom: 2px solid #ff8300;
}

:where(body.theme-green-blue) .m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link:hover,
:where(body.theme-green-blue) .m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link.active,
:where(body.theme-green-blue) .m-tabs-line.m-tabs-line--primary a.m-tabs__link:hover,
:where(body.theme-green-blue) .m-tabs-line.m-tabs-line--primary a.m-tabs__link.active {
    color: #336c9f;
    border-bottom: 2px solid #336c9f;
}


:where(body.theme-orange-blue) .gs-info {
    color: #ff8300;
}

:where(body.theme-green-blue) .gs-info {
    color: #1d8f31;
}


/* no orange-blue counterpart - the base stylesheets carry no rule here */

:where(body.theme-green-blue) .scheduler_item.accordion-disabled .m-accordion__item-head .log-column-badge {
    background-color: #fff !important;
}


/* no orange-blue counterpart - the base stylesheets carry no rule here */

:where(body.theme-green-blue) .scheduler_item.accordion-disabled .m-accordion__item-head .log-column-badge timezone-badge {
    background-color: #cfff45;
}


:where(body.theme-orange-blue) span.log-column-badge span.log-column-badge.blue-badge {
    background-color: #36a3f7;
    color: #ffffff;
}

:where(body.theme-green-blue) .scheduler_item.accordion-disabled .m-accordion__item-head .log-column-badge.blue-badge,
:where(body.theme-green-blue) span.log-column-badge span.log-column-badge.blue-badge {
    background-color: #cfff45 !important;
    color: #336c9f;
}


/* no orange-blue counterpart - the base stylesheets carry no rule here */

:where(body.theme-green-blue) .testimonials-accordion-group .accordion-disabled .m-accordion__item-head .log-column-badge {
    background-color: #fff;
    color: #36a3f7;
}


/* no orange-blue counterpart - the base stylesheets carry no rule here */

:where(body.theme-green-blue) .testimonials-accordion-group .m-accordion__item-head .log-column-badge i {
    color: #1d8f31 !important;
}


:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
    color: #087bc1!important;
}

:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
    color: #336c9f !important;
}


:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__heading .m-menu__link-text,
:where(body.theme-orange-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__link .m-menu__link-text {
    color: #087bc1!important;
}

:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__heading .m-menu__link-text,
:where(body.theme-green-blue) .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__link .m-menu__link-text {
    color: #336c9f !important;
}


/* no orange-blue counterpart - the base stylesheets carry no rule here */

:where(body.theme-green-blue) .log-column-badge2 i {
    color: #336c9f;
}


:where(body.theme-orange-blue) .accordion-disabled .white-check2 {
    background-color: #95d1ff;
}

:where(body.theme-green-blue) .accordion-disabled .white-check2 {
    background-color: #dddddd;
}


:where(body.theme-orange-blue) .m-list-timeline .m-list-timeline__items .m-list-timeline__item .m-list-timeline__badge.m-list-timeline__badge--success:before {
    background-color: #ff8300;
}

:where(body.theme-green-blue) .m-list-timeline .m-list-timeline__items .m-list-timeline__item .m-list-timeline__badge.m-list-timeline__badge--success:before {
    background-color: #0da728;
}


:where(body.theme-orange-blue) .log-column-badge2.email-block {
    background-color: #36a3f7;
}

:where(body.theme-green-blue) .log-column-badge2.email-block {
    background-color: #336c9f;
}


:where(body.theme-orange-blue) .freq_day_col.active {
    background: #eef6fb;
    border-color: #097cc1;
}

:where(body.theme-orange-blue) .freq_day_col.active .freq_day {
    background: #097cc1;
    border-color: #097cc1;
}

/* the brand, on the wash the platform's chosen dropdown row already sits on */
:where(body.theme-green-blue) .freq_day_col.active {
    background: #e6eef7;
    border-color: #336c9f;
}

:where(body.theme-green-blue) .freq_day_col.active .freq_day {
    background: #336c9f;
    border-color: #336c9f;
}


/* ====================================================================================================
   MENU BAR THEMES

   The second theme axis: which SHAPE the header's section tabs take. Set by menu_theme() and stamped on
   <body> as menu-theme-<name> beside the colour class, independently of it.

     tabs       the filled block tabs the platform launched with - no rules, it is the base stylesheets
     underline  no fill at all: dimmed white type on the header gradient, with an accent rule under the
                open section

   WHY THESE ARE NOT :where() LIKE EVERYTHING ABOVE. The paired colours are re-colourings of rules that were
   lifted out of the base stylesheets, so they have to keep exactly the weight they left with. These do the
   opposite job - they have to BEAT a rule that is still live, including the profile's own body-prefixed
   header override, which lands at (0,5,1). Carrying the theme class on body puts every rule below at (0,6,1)
   or higher, which is the whole mechanism: drop the class and not one of them matches, so the header falls
   back to the tabs it has always had rather than to nothing.
   ==================================================================================================== */

/* The one colour the two palettes disagree on here: what the rule under the open section is drawn in. */
:where(body.theme-orange-blue) {
	--menu-accent: #ffc94a;
}

:where(body.theme-green-blue) {
	--menu-accent: #cfff45;
}

/* ---- UNDERLINE ------------------------------------------------------------------------------------- */

/* The fill goes, on the section tabs and on the icon-only tool group alike - both carry .m-header-menu. The
   rule is drawn as an inset shadow rather than a border because a border is layout: adding one would move
   every tab's height the moment a section became the open one. */
body.menu-theme-underline .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs > .m-menu__link {
	background: none;
	border-radius: 0;
	box-shadow: inset 0 -3px 0 transparent;
	transition: box-shadow 0.2s ease;
}

/* The icon sits inside the label span, so colouring the span colours both and they can never drift apart. */
body.menu-theme-underline .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs > .m-menu__link .m-menu__link-text {
	color: rgba(255, 255, 255, 0.74);
	transition: color 0.2s ease;
}

/* THE OPEN SECTION. Both classes are named because the header menu sets them together. */
body.menu-theme-underline .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs.m-menu__item--active > .m-menu__link,
body.menu-theme-underline .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs.m-menu__item--active-tab > .m-menu__link {
	background: none;
	box-shadow: inset 0 -3px 0 var(--menu-accent, #cfff45);
}

body.menu-theme-underline .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs.m-menu__item--active > .m-menu__link .m-menu__link-text,
body.menu-theme-underline .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs.m-menu__item--active-tab > .m-menu__link .m-menu__link-text {
	color: #ffffff;
	font-weight: 500;
}

/* HOVER on a section that is not the open one: it comes up to full white over a dimmed rule, so hovering is
   never mistaken for having arrived. .m-menu__item--hover is the class the menu adds on its own hover, and it
   is answered here so it stops inheriting the open section's look from the base stylesheet. */
body.menu-theme-underline .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs:not(.m-menu__item--active) > .m-menu__link:hover,
body.menu-theme-underline .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs.m-menu__item--hover:not(.m-menu__item--active) > .m-menu__link {
	background: none;
	box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.4);
}

body.menu-theme-underline .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs:not(.m-menu__item--active) > .m-menu__link:hover .m-menu__link-text,
body.menu-theme-underline .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs.m-menu__item--hover:not(.m-menu__item--active) > .m-menu__link .m-menu__link-text {
	color: #ffffff;
	font-weight: 500;
}

/* THE HEADER CLOSES UP. The vendor holds the tab row 30px clear of the fixed brand row above it, which is
   room the filled tabs needed and these do not - with no block to sit in, the labels only need enough air to
   read as their own row.

   .m-header--fixed is a class on BODY, not on a wrapper inside it, so it is compounded onto the theme class
   rather than written as a descendant of it - spaced apart the selector would match nothing at all. That also
   keeps the vendor's own condition intact: no fixed header (the iframe embed drops the class), no 30px to
   override and nothing here to override it with. */
body.menu-theme-underline.m-header--fixed .m-header .m-header__bottom {
	margin-top: 10px;
}

/* THE PAGE BECOMES A CARD. With no filled tab there is nothing joining the page to the header any more, so
   rather than leave it butted against a row it no longer connects to, it steps down off the header and takes
   a radius on all four corners instead of the vendor's bottom-two.

   The vendor sets that radius inside @media (min-width: 2px), but a media query carries no specificity of its
   own - the theme class on body already puts this at (0,6,1) against the vendor's (0,5,0), so it wins from
   outside the query and does not need to be wrapped in one to reach it. */
body.menu-theme-underline .m-grid.m-grid--ver-desktop.m-grid--desktop > .m-grid__item.m-grid__item--fluid {
	margin-top: 20px;
	border-radius: 30px;
}

/* SECTIONS WITH A LEFT SIDEBAR - solution settings, the admin section, anything that does not blank out
   @section('sidebar'). The rule above lands on the CONTENT panel, which is the sidebar's SIBLING rather than
   its parent, so on its own it rounds and steps down the content while the sidebar stays square and sits 20px
   proud of it. The card is split between the two instead: the sidebar takes the left corners, the content
   keeps the right, and both step down together so they read as one sheet.

   The sibling combinator is what makes this exact - a section with no sidebar blanks the yield out entirely,
   so .m-aside-left is not in its DOM and the content keeps all four corners with nothing to opt out of. */
body.menu-theme-underline .m-aside-left {
	margin-top: 20px;
	border-radius: 30px 0 0 30px;
}

body.menu-theme-underline .m-grid.m-grid--ver-desktop.m-grid--desktop > .m-aside-left ~ .m-grid__item.m-grid__item--fluid {
	border-radius: 0 30px 30px 0;
}


/* ====================================================================================================
   BUTTON THEMES

   The third axis: which treatment the platform's BUTTONS take. Set by button_theme() and stamped on <body>
   as button-theme-<name> beside the colour and menu classes, independently of both.

     pill   the gradient pills the platform launched with - no rules, it is the base stylesheets
     neon   design concept "Platform: New Button Themes" 4e, Tinted - Full Neon. No borders anywhere: every
            role is a soft wash of its own hue with its type in the deep end of that hue, and under the
            pointer the whole control becomes the theme's accent, lifts 2px and throws a glow of the same
            colour. Two heights, 8px corners, sentence case.

   IT REPAINTS THE CLASSES THE MARKUP ALREADY CARRIES. A primary is still `m-btn--gradient-from-warning
   m-btn--gradient-to-danger`, a secondary is still `cancel-button`, a row action is still
   `m-btn--hover-accent`, so nothing in a blade or a script had to change to put the dashboard on it.

   WHY MOST PAINTED DECLARATIONS ARE !important. The rules being replaced are important in four places at
   once - the vendor's `.btn { box-shadow: none !important }`, its air shadows, the gradient pairs higher up
   this file, and the profile's own body-prefixed copy of those, which prints after this file at (0,3,1).
   Carrying the theme class on body puts every painting rule below at (0,4,1) or higher, so an important
   declaration here wins wherever it has to - and, the same as the menu themes, a body without the class
   matches none of it and keeps the base buttons exactly as they were.

   WHAT IS A BUTTON HERE is what the concept's own audit lists: the three action roles, the row icons, the
   pager and the head tabs that act. The toolbar's filled board, date and stepper controls are dropdown
   FIELDS drawn in the Top Bar concept's language and are deliberately left alone - named by `form-select`
   as well as by `dropdown-toggle`, because the board label a locked role sees is the same field with no
   toggle. The info marks borrow the icon-button classes to draw a tooltip trigger, so they are kept off the
   button lists too; they are painted with the rest of the non-button kit, in THE REST OF THE KIT at the end.
   ==================================================================================================== */

/* The one colour the two palettes disagree on: what a control turns under the pointer, and the glow it
   throws. The amber is the menu underline's own orange-blue accent. */
:where(body.theme-green-blue) {
	--btn-accent: #cfff45;
	--btn-glow: rgba(148, 190, 30, 0.5);
}

:where(body.theme-orange-blue) {
	--btn-accent: #ffc94a;
	--btn-glow: rgba(214, 150, 20, 0.45);
}

/* ---- THE TOKENS ------------------------------------------------------------------------------------
   The concept's kit, named once. The whole family is re-coloured and re-sized here and nowhere else.
   ---------------------------------------------------------------------------------------------------- */
body.button-theme-neon {
	--btn-r: 8px;
	--btn-h: 40px;
	--btn-hs: 32px;
	--btn-hxs: 24px;
	--btn-px: 20px;
	--btn-pxs: 14px;
	--btn-pxxs: 10px;
	--btn-fs: 16px;
	--btn-fss: 15px;
	--btn-fsxs: 13px;
	--btn-ico-size: 34px;
	--btn-lift: -2px;

	--btn-pri: #cfe4f7;
	--btn-pri-ink: #1c5183;
	--btn-sec: #eceff3;
	--btn-sec-ink: #4f6f8d;
	--btn-del: #fbe0e4;
	--btn-del-ink: #b81f33;
	--btn-ico: #eef2f7;
	--btn-ico-ink: #336c9f;
	--btn-off: #dfe5ee;
	--btn-off-ink: #9aa8bb;
	--btn-brand: #336c9f;
	--btn-hover-ink: #24527c;
	--btn-hover-sh: 0 6px 16px var(--btn-glow);

	/* THE TWO TRANSITIONS. The resting state carries the curve for LEAVING a state and a state carries the
	   curve for arriving in it, so a hover answers the pointer at once and lets go gently. */
	--btn-ease-in: background-color 0.3s ease-in, color 0.3s ease-in, box-shadow 0.3s ease-in, transform 0.3s ease-in;
	--btn-ease-out: background-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out, transform 0.3s ease-out;

	/* WHAT A CONTROL IS PAINTED FROM, at rest. Every themed control paints itself from --btn-bg and --btn-fg,
	   which its ROLE sets, and from the three below, which a STATE sets - which is what keeps the lists of
	   classes that ARE buttons down to the few rules that paint: the state rules name no button at all, and a
	   `.btn` that is on no list is handed properties it never reads. */
	--btn-fg-hover: var(--btn-hover-ink);
	--btn-sh: none;
	--btn-tf: none;
	--btn-ease: var(--btn-ease-in);
}


/* ---- WHAT GETS PAINTED ------------------------------------------------------------------------------
   A BUTTON JOINS THE FAMILY IN THESE RULES AND IN ITS ROLE, and nowhere else. The action roles are named in
   the first four rules of this section - add a class to all four, then give it a role below.

   ...AND SOMETHING SHAPED LIKE A BUTTON IS NOT ALWAYS ONE. `.btn-light.btn-upload` was in this roster and is
   not any more: it is the avatar picker's 120px round DROP TARGET, standing between two pictures of exactly
   that size, and a secondary's `min-height`, side padding and 8px corner turned it into a short rounded
   square that matched neither of them (custom.css, AVATAR UPLOAD - which sizes and shapes it, and which this
   was overriding by loading later). Ask what a control IS before adding it here, not what classes it carries.
   ---------------------------------------------------------------------------------------------------- */

/* THE LAYOUT IS SET AT THE WEIGHT OF A BARE `.btn`. :where() leaves one class, which is enough to beat
   bootstrap's inline-block by coming later, and light enough that any rule anywhere that hides a button or
   lays one out on purpose still wins. The flex row is what puts a glyph on its label's centre line. */
:where(body.button-theme-neon) .btn:where(
	.m-btn--gradient-from-warning.m-btn--gradient-to-danger,
	.btn-primary,
	.btn-success,
	.btn-brand:not(.dropdown-toggle, .m-btn--icon-only, .form-select),
	.m-btn--gradient-from-info,
	.m-btn--gradient-from-brand,
	.cancel-button,
	.m-btn--gradient-from-metal,
	.btn-secondary:not(.bootstrap-select > .btn),
	.btn-outline-secondary,
	.discard-button,
	.btn-outline-danger,
	.m-btn--gradient-from-danger,
	.btn-danger:not(.m-btn--icon-only),
	.sched-add-btn,
	.sched-travel-submit,
	.sched-badge-new,
	.freq_cancel,
	.cancelBtn
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

body.button-theme-neon :is(
	.btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger,
	.btn.btn-primary,
	.btn.btn-success,
	.btn.btn-brand:not(.dropdown-toggle, .m-btn--icon-only, .form-select),
	.btn.m-btn--gradient-from-info,
	.btn.m-btn--gradient-from-brand,
	.btn.cancel-button,
	.btn.m-btn--gradient-from-metal,
	.btn.btn-secondary:not(.bootstrap-select > .btn),
	.btn.btn-outline-secondary,
	.btn.discard-button,
	.btn.btn-outline-danger,
	.btn.m-btn--gradient-from-danger,
	.btn.btn-danger:not(.m-btn--icon-only),
	.btn.sched-add-btn,
	.btn.sched-travel-submit,
	.btn.sched-badge-new,
	.btn.freq_cancel,
	.btn.cancelBtn
) {
	height: auto;
	min-height: var(--btn-h);
	padding: 0 var(--btn-px);
	border: 0 !important;
	border-radius: var(--btn-r) !important;
	background: var(--btn-bg) !important;
	box-shadow: var(--btn-sh) !important;
	color: var(--btn-fg) !important;
	font-size: var(--btn-fs);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
	text-transform: none;
	/* NONE AT REST, and that is load-bearing: any transform at all makes the control a stacking context, which
	   traps a menu hung inside it under whatever comes later on the page. The lift exists only in a state. */
	transform: var(--btn-tf);
	transition: var(--btn-ease);
}

/* OFF. The wash stays, faded and greyed, so a control that cannot be used still says which role it has. No
   pointer-events here: `disabled-style-only` and `events-all` hand the pointer back on purpose, so the reason
   can be read. `.gray` ON ITS OWN IS NOT OFF - the inline editor's Cancel is a live `.gray` - so it fades only
   when `.disabled` comes with it; alone it is a secondary (see the roles). */
body.button-theme-neon :is(
	.btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger,
	.btn.btn-primary,
	.btn.btn-success,
	.btn.btn-brand:not(.dropdown-toggle, .m-btn--icon-only, .form-select),
	.btn.m-btn--gradient-from-info,
	.btn.m-btn--gradient-from-brand,
	.btn.cancel-button,
	.btn.m-btn--gradient-from-metal,
	.btn.btn-secondary:not(.bootstrap-select > .btn),
	.btn.btn-outline-secondary,
	.btn.discard-button,
	.btn.btn-outline-danger,
	.btn.m-btn--gradient-from-danger,
	.btn.btn-danger:not(.m-btn--icon-only),
	.btn.sched-add-btn,
	.btn.sched-travel-submit,
	.btn.sched-badge-new,
	.btn.freq_cancel,
	.btn.cancelBtn
):is(.disabled, :disabled) {
	opacity: 0.5;
	filter: grayscale(0.7);
}

/* custom.css draws a `.gray` button's glyph white - important once it is disabled too - which on a light wash
   is no glyph at all. */
body.button-theme-neon :is(
	.btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger,
	.btn.btn-primary,
	.btn.btn-success,
	.btn.btn-brand:not(.dropdown-toggle, .m-btn--icon-only, .form-select),
	.btn.m-btn--gradient-from-info,
	.btn.m-btn--gradient-from-brand,
	.btn.cancel-button,
	.btn.m-btn--gradient-from-metal,
	.btn.btn-secondary:not(.bootstrap-select > .btn),
	.btn.btn-outline-secondary,
	.btn.discard-button,
	.btn.btn-outline-danger,
	.btn.m-btn--gradient-from-danger,
	.btn.btn-danger:not(.m-btn--icon-only),
	.btn.sched-add-btn,
	.btn.sched-travel-submit,
	.btn.sched-badge-new,
	.btn.freq_cancel,
	.btn.cancelBtn
):is(.disabled, .gray) i {
	color: inherit !important;
	opacity: 1 !important;
}

/* ICON ONLY - named by the two hover modifiers rather than by m-btn--icon-only, because the info mark on
   every form row, the fraud circle and the premium toggles all carry icon-only too, and none is a button. */
body.button-theme-neon .btn.m-btn--icon-only:is(.m-btn--hover-accent, .m-btn--hover-danger),
body.button-theme-neon .btn.btn-icon {
	width: var(--btn-ico-size);
	height: var(--btn-ico-size);
	border: 0 !important;
	border-radius: var(--btn-r) !important;
	background: var(--btn-bg) !important;
	box-shadow: var(--btn-sh) !important;
	color: var(--btn-fg) !important;
	font-size: 17px;
	transform: var(--btn-tf);
	transition: var(--btn-ease);
}

body.button-theme-neon .btn.m-btn--icon-only:is(.m-btn--hover-accent, .m-btn--hover-danger) i:not(.icon2-pdf),
body.button-theme-neon .btn.btn-icon i {
	color: inherit !important;
}

/* A FILE'S OWN COLOUR IS THE ONE GLYPH THAT KEEPS IT - the red PDF mark in a download column says what kind of
   file it is, which the button's ink cannot. Important because the vendor whitens every glyph on hover. */
body.button-theme-neon .btn.m-btn--icon-only.m-btn--hover-accent i.icon2-pdf {
	color: #f40f02 !important;
}

body.button-theme-neon .btn.m-btn--icon-only:is(.m-btn--hover-accent, .m-btn--hover-danger):is(.disabled, :disabled) {
	opacity: 0.5;
	filter: grayscale(0.7);
}

/* THE PAGER. `.m-datatable.m-datatable` is the same element named twice: the colours being replaced sit at
   six and seven classes in custom.css. */
body.button-theme-neon .m-datatable.m-datatable > .m-datatable__pager > .m-datatable__pager-nav > li > .m-datatable__pager-link {
	min-width: var(--btn-ico-size);
	height: var(--btn-ico-size);
	padding: 0 8px;
	border-radius: var(--btn-r);
	background: var(--btn-bg) !important;
	box-shadow: var(--btn-sh) !important;
	color: var(--btn-fg) !important;
	font-size: var(--btn-fss);
	font-weight: 600;
	opacity: 1;
	filter: none;
	transform: var(--btn-tf);
	transition: var(--btn-ease);
}

/* THE ONE SELECT DRAWN AS A BUTTON that the concept themes - the page size at the other end of that row.
   The right padding is the room the plugin's chevron is drawn into. */
body.button-theme-neon .m-datatable.m-datatable > .m-datatable__pager > .m-datatable__pager-info .m-datatable__pager-size > .btn.dropdown-toggle {
	height: var(--btn-hs);
	padding: 0 32px 0 var(--btn-pxs);
	border-radius: var(--btn-r) !important;
	background: var(--btn-bg) !important;
	box-shadow: var(--btn-sh) !important;
	color: var(--btn-fg) !important;
	font-size: var(--btn-fss);
	font-weight: 600;
	transform: var(--btn-tf);
	transition: var(--btn-ease);
}

/* THE HEAD TABS THAT ACT - Add Filter, Clear All, Request Report. The height and the top-corner radius that
   join a tab to its bar are structure, not theme, so only the paint is taken. The tab that NAMES a bar is a
   label and is not one of these; nor is the Show All check, which is a switch. */
body.button-theme-neon .filter-head-tab:not(.breakdown-head-check) {
	background-color: var(--btn-bg);
	color: var(--btn-fg);
	transition: var(--btn-ease);
}

/* the tab's glyphs are pinned to brand blue important in custom.css; here they follow the words */
body.button-theme-neon .filter-head-tab :is(.icon2-erase, .icon2-plus, .leads-dropdown-title-icon) {
	color: inherit !important;
}


/* ---- THE ROLES -------------------------------------------------------------------------------------
   Plain selector lists, never :is(), and no exclusions - an :is() or a :not() takes the weight of its
   HEAVIEST argument, which would lift a role over the states that have to beat it. A role only sets
   properties, so naming a class the paint rules leave out (a select's toggle) costs nothing: it is handed
   values it never reads.
   ---------------------------------------------------------------------------------------------------- */

body.button-theme-neon .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger,
body.button-theme-neon .btn.btn-primary,
body.button-theme-neon .btn.btn-success,
body.button-theme-neon .btn.btn-brand,
body.button-theme-neon .btn.m-btn--gradient-from-info,
body.button-theme-neon .btn.m-btn--gradient-from-brand {
	--btn-bg: var(--btn-pri);
	--btn-fg: var(--btn-pri-ink);
}

/* `.gray` ON A PRIMARY IS THE PLATFORM'S GREY BUTTON, and it is live - the inline editor's Cancel is one - so it
   is a secondary. With `.disabled` beside it, the off rule above fades it as well. */
body.button-theme-neon .btn.m-btn--gradient-from-warning.m-btn--gradient-to-danger.gray {
	--btn-bg: var(--btn-sec);
	--btn-fg: var(--btn-sec-ink);
}

body.button-theme-neon .btn.cancel-button,
body.button-theme-neon .btn.m-btn--gradient-from-metal,
body.button-theme-neon .btn.btn-secondary,
body.button-theme-neon .btn.btn-outline-secondary,
body.button-theme-neon .btn.sched-add-btn,
body.button-theme-neon .btn.sched-travel-submit,
body.button-theme-neon .btn.sched-badge-new,
body.button-theme-neon .btn.freq_cancel,
body.button-theme-neon .btn.cancelBtn,
body.button-theme-neon .m-datatable__pager-link,
body.button-theme-neon .m-datatable__pager-size > .btn.dropdown-toggle,
body.button-theme-neon .filter-head-tab {
	--btn-bg: var(--btn-sec);
	--btn-fg: var(--btn-sec-ink);
}

/* Destructive keeps a red INK under the pointer, deepened, so the neon never makes a delete read as a save. */
body.button-theme-neon .btn.discard-button,
body.button-theme-neon .btn.btn-outline-danger,
body.button-theme-neon .btn.m-btn--gradient-from-danger,
body.button-theme-neon .btn.btn-danger {
	--btn-bg: var(--btn-del);
	--btn-fg: var(--btn-del-ink);
	--btn-fg-hover: #8e1526;
}

body.button-theme-neon .btn.m-btn--icon-only:is(.m-btn--hover-accent, .m-btn--hover-danger),
body.button-theme-neon .btn.btn-icon {
	--btn-bg: var(--btn-ico);
	--btn-fg: var(--btn-ico-ink);
}

/* The page you are on is the primary wash; a stepper with nowhere to go is the shipped grey, at full
   opacity so a row of four still reads as four. */
body.button-theme-neon .m-datatable__pager-link.m-datatable__pager-link--active {
	--btn-bg: var(--btn-pri);
	--btn-fg: var(--btn-pri-ink);
}

body.button-theme-neon .m-datatable__pager-link.m-datatable__pager-link--disabled {
	--btn-bg: var(--btn-off);
	--btn-fg: var(--btn-off-ink);
}

/* THE SECOND SIZE - a control in a table row, a panel foot or a title tray. Set as properties rather than as
   sizes, so everything inside a tray inherits it with no list of its own. */
body.button-theme-neon :is(.btn_small, .btn_modal, .btn-sm, .section-head-tray) {
	--btn-h: var(--btn-hs);
	--btn-px: var(--btn-pxs);
	--btn-fs: var(--btn-fss);
}

/* THE THIRD SIZE, `btn_xsmall` - a button that sits INSIDE something small rather than beside it: a calendar
   tile, a status strip one line tall. There is no fourth. */
body.button-theme-neon .btn_xsmall {
	--btn-h: var(--btn-hxs);
	--btn-px: var(--btn-pxxs);
	--btn-fs: var(--btn-fsxs);
}


/* ---- THE STATES ------------------------------------------------------------------------------------
   Written AFTER the roles and at least at their weight, so a state wins a tie on order alone. The first line
   names `.btn` twice to reach the heaviest action role - the primary's `.gray`, five classes.

   UNDER THE POINTER, and wherever the pointer's answer should hold: keyboard focus, the press, a toggled
   `.active`, a dropdown that is open. :focus-visible rather than :focus, or a clicked button keeps its neon
   until something else is clicked. A disabled control does not answer at all, and the page you are already on
   does nothing when clicked, so it does not answer either.
   ---------------------------------------------------------------------------------------------------- */
body.button-theme-neon .btn.btn:is(:hover, :focus-visible, :active, .active):not(.disabled, :disabled),
body.button-theme-neon .show > .btn.dropdown-toggle,
body.button-theme-neon .m-datatable__pager-link:hover:not(.m-datatable__pager-link--disabled, .m-datatable__pager-link--active),
body.button-theme-neon .filter-head-tab:is(:hover, :has(.m-dropdown--open)) {
	--btn-bg: var(--btn-accent);
	--btn-fg: var(--btn-fg-hover);
	--btn-sh: var(--btn-hover-sh);
	--btn-tf: translateY(var(--btn-lift));
	--btn-ease: var(--btn-ease-out);
}

/* m-btn--hover-danger: an ordinary icon button that turns destructive under the pointer, so the red is never
   sitting in a row of five waiting to be hit by accident. The same weight as the state above, and after it. */
body.button-theme-neon .btn.m-btn--hover-danger:is(:hover, :focus-visible, :active):not(.disabled, :disabled) {
	--btn-bg: var(--btn-del);
	--btn-fg: var(--btn-del-ink);
}


/* ---- HOME ------------------------------------------------------------------------------------------
   A Quick Link is a white card at rest and a button under the pointer - the family's accent, its ink, its glow
   and its lift, on the family's two curves. The card keeps its overlay (custom.css): the fill is still faded
   in by opacity, it is only a flat accent now instead of the theme's gradient. The Manage Images tile holds
   the lit state while its menu is open, the way a button's dropdown does. */
body.button-theme-neon .quick_links {
	--ql-ease: 0.3s ease-in;
}

body.button-theme-neon .quick_links :is(.item:hover, .manage-blog-dropdown.show > .item) {
	--ql-ease: 0.3s ease-out;
}

body.button-theme-neon .quick_links .item > span.text::before {
	background: var(--btn-accent);
}

body.button-theme-neon .quick_links .item > span.text {
	transition: color var(--ql-ease), box-shadow var(--ql-ease), transform var(--ql-ease);
}

body.button-theme-neon .quick_links :is(.item:hover, .manage-blog-dropdown.show > .item) > span.text::before {
	opacity: 1;
}

body.button-theme-neon .quick_links :is(.item:hover, .manage-blog-dropdown.show > .item) > span.text {
	color: var(--btn-hover-ink) !important;
	box-shadow: var(--btn-hover-sh);
	transform: translateY(var(--btn-lift));
}

body.button-theme-neon .quick_links :is(.item:hover, .manage-blog-dropdown.show > .item) > .text i {
	color: var(--btn-hover-ink) !important;
}


/* ---- EVERY PAGE ------------------------------------------------------------------------------------
   The scroll-to-top control floating in the corner is the family's button at the large size, holding only its
   glyph - in the primary wash, because a grey icon wash would vanish into the page ground it floats over. Its
   `display` is left alone: the vendor shows it past the scroll offset, and SchedulingIQ hides it while its
   sidebar covers that corner. */
body.button-theme-neon .m-scroll-top {
	--btn-bg: var(--btn-pri);
	--btn-fg: var(--btn-pri-ink);

	width: var(--btn-h);
	height: var(--btn-h);
	padding-top: 0;
	border-radius: var(--btn-r);
	background: var(--btn-bg);
	box-shadow: var(--btn-sh);
	color: var(--btn-fg);
	transform: var(--btn-tf);
	transition: var(--btn-ease);
}

/* The glyph is a block the button's full height, which centres it on the button by its own line box - it
   was an inline-block on the text baseline, riding 2px high. The theme and custom.css both colour it, the
   second important under the pointer, so it is told to follow the button's ink. */
body.button-theme-neon .m-scroll-top > i {
	display: block;
	line-height: var(--btn-h);
	color: inherit !important;
}

body.button-theme-neon .m-scroll-top:hover {
	--btn-bg: var(--btn-accent);
	--btn-fg: var(--btn-fg-hover);
	--btn-sh: var(--btn-hover-sh);
	--btn-tf: translateY(var(--btn-lift));
	--btn-ease: var(--btn-ease-out);
}


/* ---- SCHEDULINGIQ -----------------------------------------------------------------------------------
   Add Shift, the itinerary's Submit and the badge menu's Add Tag are `.btn`s and join the action lists
   above as secondaries. What is below is the section's own controls that are NOT `.btn`s: each keeps the
   size the calendar and the panel were measured around, and takes the family's paint through the same
   properties, so a hover here is the same hover as everywhere else.
   Every state in this block is one class heavier than the role it answers, so the order of the two cannot
   decide anything.
   ---------------------------------------------------------------------------------------------------- */

/* THE TITLE TRAY'S RELOAD, the bare icon - painted on the glyph because the glyph is what the click is bound
   to. The reload over each Recurring Tasks log table is the same object and joins these rules. */
body.button-theme-neon .section-head-tray .leads-refresh > .refresh_icon,
body.button-theme-neon .tbl_bhorn_refresh > .refresh_icon {
	border: 0;
	border-radius: var(--btn-r);
	background: var(--btn-bg);
	box-shadow: var(--btn-sh);
	color: var(--btn-fg);
	transform: var(--btn-tf);
	transition: var(--btn-ease);
}

/* STYLE IS PAINTED ON ITS TOGGLE, NOT ON THE PILL AROUND IT. The pill holds the menu it opens, and a painted
   pill that lifts is a stacking context - the menu came up underneath the toolbar. The pill is plain layout. */
body.button-theme-neon .section-head-tray .sched-style-pill {
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* AND THE TOGGLE IS THE TRAY'S WHITE PILL (user, 2026-09-23 - "styled white like the ... Previews dropdown"): the
   head-tray pill select's own paint (custom.css, THE HEAD-TRAY PILL SELECT) - white, the #dfe3e9 hairline, fully
   round, the tray's soft shadow, the section's blue at 13px, 36px tall - where it used to be the concept's ghost.
   THE SIDEBAR'S EDIT IS THE SAME TOGGLE and takes the same pill in the panel's head, so the two dropdowns the
   section offers stay one control.
   AND THE PANEL'S CLOSE BESIDE IT TAKES THE SAME WHITE (user, 2026-09-23 - "make X bg white, to match dropdown"): the
   ground, the hairline, the shadow and the blue, at the same 36px so the head's two controls share their top and
   bottom edges - and it answers the pointer the way the Edit beside it does. Its shape is its own, below. */
body.button-theme-neon .section-head-tray .sched-style-toggle,
body.button-theme-neon .sched-sidebar__head .sched-style-toggle,
body.button-theme-neon .sched-sidebar__head .sched-sidebar__close {
	gap: 8px;
	height: 36px;
	padding: 0 16px 0 14px;
	border: 1px solid #dfe3e9;
	border-radius: 50px;
	background: #ffffff78;
	box-shadow: 0 1px 4px rgba(36, 60, 90, 0.1);
	color: #336c9f;
	font-size: 13px;
	transition: border-color 0.3s ease-in;
}

/* the glyph at the size Previews' eye is drawn at */
body.button-theme-neon .section-head-tray .sched-style-toggle > i:first-child,
body.button-theme-neon .sched-sidebar__head .sched-style-toggle > i:first-child {
	font-size: 15px;
}

/* THE HEAD'S THREE CONTROLS ARE CIRCLES OF THAT HEIGHT HOLDING ONLY THEIR GLYPHS (user, 2026-09-24 - "make X inside round
   circle. and get rid of word Edit in edit dropdown, just keep icon. to left of X circle, add a circle with ... inside
   it"): the Edit's pencil, the panel's options and the close - rather than pills with nothing to pad for. After the rule
   above, which they match in weight. */
body.button-theme-neon .sched-sidebar__head :is(.sched-sidebar__edit, .sched-sidebar__more, .sched-sidebar__close) {
	justify-content: center;
	width: 36px;
	padding: 0;
	border-radius: 10px;
	font-size: 14px;
}

/* POINTED AT OR OPEN, IT STAYS WHITE AND ITS EDGE TAKES THE ACCENT - the edge Previews takes while its menu is
   open. No lift: a lifted control is a stacking context too. */
body.button-theme-neon .section-head-tray :is(.sched-style-toggle:is(:hover, :focus-visible), .sched-style-pill.show > .sched-style-toggle) {
	border-color: var(--btn-accent);
	transition: border-color 0.3s ease-out;
}

/* THE SIDEBAR HEAD'S THREE SQUARES ANSWER THE POINTER THE WAY A BUTTON DOES (user, 2026-09-24 - "hovering over 3
   squares in sidebar should change them to the neon green hover state like buttons"): the family's accent ground, its
   hover ink, its glow and its lift - under the pointer, and on the Edit or the "..." for as long as its menu is open.
   Each menu hangs BESIDE its button inside the pick, never inside the button, so the lift traps nothing. */
body.button-theme-neon .sched-sidebar__head :is(.sched-style-toggle, .sched-sidebar__close) {
	transition: border-color 0.3s ease-in, background-color 0.3s ease-in, color 0.3s ease-in, box-shadow 0.3s ease-in,
		transform 0.3s ease-in;
}

body.button-theme-neon .sched-sidebar__head :is(.sched-style-toggle:is(:hover, :focus-visible), .sched-edit-pick.is-open > .sched-style-toggle, .sched-sidebar__close:is(:hover, :focus-visible)) {
	border-color: var(--btn-accent);
	background: var(--btn-accent);
	box-shadow: var(--btn-hover-sh);
	color: var(--btn-fg-hover);
	transform: translateY(var(--btn-lift));
	transition: border-color 0.3s ease-out, background-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out,
		transform 0.3s ease-out;
}

body.button-theme-neon .section-head-tray .leads-refresh > .refresh_icon,
body.button-theme-neon .tbl_bhorn_refresh > .refresh_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--btn-ico-size);
	height: var(--btn-ico-size);
	font-size: 17px;
}

/* Features Overview's rocket keeps its own animation; its margin goes, because the row's gap spaces it now. */
body.button-theme-neon .sched-features-btn > i {
	margin-right: 0;
}

body.button-theme-neon .section-head-tray .refresh_icon,
body.button-theme-neon .tbl_bhorn_refresh > .refresh_icon {
	--btn-bg: transparent;
	--btn-fg: var(--btn-ico-ink);
}

/* THE CALENDAR, THE SERIES LINE AND THE PANEL. The small ones keep their small sizes - a day head, a 22px
   series chip and a 34px day toggle are what those rows were built around - and take the family's paint
   and the tighter corner a small control needs. The Recurring Tasks schedule editor's weekday heads are the
   same toggle as the Shift Editor's days (design concept "Platform: Extra Elements", toggle chips), so they
   are named beside it at every step, keeping the height their columns were built around - and named through
   their column here, to outweigh the theme's own fill for a day that is on, which is three classes. */
body.button-theme-neon .sched-series-btn,
body.button-theme-neon .sched-edit-btn,
body.button-theme-neon .sched-day-btn,
body.button-theme-neon .freq_day_col .freq_day,
body.button-theme-neon .sched-preview-del,
body.button-theme-neon .sched-preview-edit,
body.button-theme-neon .sched-notify-row__preview {
	border: 0;
	border-radius: 6px;
	background: var(--btn-bg);
	box-shadow: var(--btn-sh);
	color: var(--btn-fg);
	transform: var(--btn-tf);
	transition: var(--btn-ease);
}

/* THE DAY'S ADD BUTTON FADES IN WITH THE DAY, so it has two transitions of its own to keep - the reveal on
   the way in and the delayed `visibility` on the way out - on top of the family's. It is the platform's small
   primary (UI reference 4.13) and the family paints it, so this is written at that paint's weight and after it -
   five classes, six with the day's hover - or the family's own `transition` would take the reveal away. */
body.button-theme-neon .sched-day .sched-day-head > .btn.sched-day-add {
	transition: opacity 0.3s ease-in, visibility 0s 0.3s, var(--btn-ease);
}

body.button-theme-neon .sched-day:hover .sched-day-head > .btn.sched-day-add {
	transition: opacity 0.3s ease-out, visibility 0s, var(--btn-ease);
}

body.button-theme-neon .sched-edit-btn,
body.button-theme-neon .sched-day-btn,
body.button-theme-neon .freq_day,
body.button-theme-neon .sched-notify-row__preview {
	--btn-bg: var(--btn-sec);
	--btn-fg: var(--btn-sec-ink);
}

/* THE SERIES LINE'S TWO BUTTONS ARE ICON WASH SQUARES, the look a filter tile's X has on this theme. (The panel's close
   was one too, until it took the Edit dropdown's white beside it - SCHEDULINGIQ, above.) */
body.button-theme-neon .sched-series-btn {
	--btn-bg: var(--btn-ico);
	--btn-fg: var(--btn-ico-ink);
}

/* AND THE SERIES' NUMBER BESIDE THEM WEARS THEIR GROUND (user, 2026-09-24 - "the series ID badge should have dark blue
   icon+text, our standard icon color. and bg same color as the 2 squares to the right of it"): the kit's icon wash and
   icon ink, so the number and its two actions read as one group. The two exception marks after it keep their own amber
   and violet - they say something about the DATE, not about the series. */
body.button-theme-neon .sched-series-badge:not(.sched-series-badge--custom, .sched-series-badge--mod) {
	background: var(--btn-ico);
	color: var(--btn-ico-ink);
}

/* A ROW'S DELETE IS BARE - it sits in a gutter every row reserves, and a ground on it at rest would be one more
   box in a list full of them. */
body.button-theme-neon .sched-preview-del {
	--btn-bg: transparent;
	--btn-fg: var(--btn-sec-ink);
}

/* SO IS A ROW'S EDIT, in the kit's icon ink - and it is only there while its row is pointed at (custom.css), so that fade
   rides in front of the family's own easing, which has no opacity in it */
body.button-theme-neon .sched-preview-edit {
	--btn-bg: transparent;
	--btn-fg: var(--btn-ico-ink);

	transition: opacity 0.3s ease-in-out, var(--btn-ease);
}

/* A DAY THAT IS ON IS THE PRIMARY WASH - the concept's segmented group, where the chosen segment is. A
   Recurring Tasks day is on through its COLUMN, which is where the editor keeps the state. */
body.button-theme-neon .sched-day-btn.is-on,
body.button-theme-neon .freq_day_col.active .freq_day {
	--btn-bg: var(--btn-pri);
	--btn-fg: var(--btn-pri-ink);
}

body.button-theme-neon .section-head-tray .leads-refresh > .refresh_icon:hover,
body.button-theme-neon .tbl_bhorn_refresh > .refresh_icon:hover,
body.button-theme-neon .sched-series-btn:is(:hover, :focus-visible),
body.button-theme-neon .sched-sidebar:has(.sched-series-view) .sched-series-preview,
body.button-theme-neon :is(.sched-edit-btn:is(:hover, :focus-visible), .sched-edit-pick.is-open .sched-edit-btn),
body.button-theme-neon .sched-day-btn:is(:hover, :focus-visible):not(:disabled),
body.button-theme-neon .freq_day_col .freq_day:is(:hover, :focus-visible),
body.button-theme-neon .sched-custom-pick.is-open .btn.sched-custom-add,
body.button-theme-neon :is(.sched-preview-edit:is(:hover, :focus-visible), .sched-row-pick.is-open > .sched-preview-edit),
body.button-theme-neon .sched-notify-row__preview:is(:hover, :focus-visible) {
	--btn-bg: var(--btn-accent);
	--btn-fg: var(--btn-fg-hover);
	--btn-sh: var(--btn-hover-sh);
	--btn-tf: translateY(var(--btn-lift));
	--btn-ease: var(--btn-ease-out);
}

body.button-theme-neon .sched-preview-del:is(:hover, :focus-visible) {
	--btn-bg: var(--btn-del);
	--btn-fg: var(--btn-del-ink);
	--btn-sh: var(--btn-hover-sh);
	--btn-tf: translateY(var(--btn-lift));
	--btn-ease: var(--btn-ease-out);
}

/* A TICK ON THE UNASSIGN LIST TAKES SOMEBODY OFF THE SHIFT, so its box is the platform's destructive red rather than
   the brand - a brand tick reads as "on". Only the checkbox kit's own property is set (THE REST OF THE KIT), one class
   heavier than its ticked state; its pointer state weighs the same and comes later, so the hover's preview still wins.
   THE DELETE LIST'S TICK IS THE SAME ANSWER - a ticked date is one going away (scheduling/_shift_menu). */
body.button-theme-neon :is(.sched-unassign-block, .sched-delete-block) .m-checkbox > input:checked ~ span {
	--cb-bg: #f4516c;
}

/* THE SHIFT'S OWN MENU ON A TILE (".."): the half see-through square at rest (custom.css), and the family's accent under
   the pointer or while its menu is open - the same answer the series line's eye and funnel give. */
body.button-theme-neon .sched-shift-more:is(:hover, :focus-visible),
body.button-theme-neon .sched-more-pick.is-open > .sched-shift-more {
	background: var(--btn-accent);
	box-shadow: var(--btn-hover-sh);
	color: var(--btn-fg-hover);
	transition: width 0.3s ease-in-out, height 0.3s ease-in-out, font-size 0.3s ease-in-out,
	            background-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* THE (i) INSIDE ADD CUSTOM SHIFT STANDS ON WHITE. The kit's icon wash is a pale tint much like the button's own
   primary wash, which left a bare "i" floating in the label rather than the mark every other hint on the panel is.
   Its hover is still the kit's accent: that rule weighs the same and comes after this one, at the end of the file. */
body.button-theme-neon .sched-custom-pick .sched-custom-add > .sched-label-info {
	--im-bg: #ffffff;
}

/* COMPACT TAKES THE TILE'S ASSIGN DOWN WITH THE REST OF THE TILE, the same step its type takes. Only on the
   tile itself: the panel a tile opens into keeps its own scale, and so do the buttons in it. */
body.button-theme-neon .sched-calendar--compact .sched-shift-toggle .btn_xsmall {
	--btn-h: 20px;
	--btn-px: 8px;
	--btn-fs: 11px;
}

/* AND IT EASES DOWN WITH THEM rather than snapping while the tile around it eases (custom.css, "A STYLE SWITCH
   EASES WHAT IT RESHAPES"). The family's own curves stay first in the list, so a hover is unchanged. Five
   classes and after the paint, which reaches four through the heaviest entry in its :is(). */
body.button-theme-neon .sched-shift .sched-shift-toggle .btn.sched-assign,
body.button-theme-neon .sched-shift .sched-shift-toggle .btn.sched-review {
	/* never narrower than it is tall - which is what leaves the glyph a square once its word has folded away (below);
	   with the word on, the button is well past it and this changes nothing */
	min-width: var(--btn-h);
	transition: var(--btn-ease), min-height 0.3s ease-in-out, min-width 0.3s ease-in-out, padding 0.3s ease-in-out,
		gap 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

/* THE STYLE PANEL'S "Action Button Text" OFF leaves the tile's Assign as its glyph alone, so it is drawn as a
   square of the button's own height rather than a pill still padded for a word - at either tile size. After
   the Compact rule, which it has to beat on the padding.
   IT CLOSES UP ROUND THE GLYPH RATHER THAN BEING SET TO A WIDTH: the padding and the gap the word stood in ease to
   nothing while the word folds (custom.css), and the minimum width above is what the button comes to rest on - a
   fixed width is a value the button cannot ease towards from a width its content gave it. */
body.button-theme-neon .sched-calendar--nobtntext .sched-shift-toggle .btn_xsmall {
	--btn-px: 0px;
	gap: 0;
}


/* ---- JOBS ------------------------------------------------------------------------------------------
   Generate Social Preview is dimmed to say the image does not exist yet - but it is also the way to make
   one, so unlike every other control that is off it answers the pointer, and the fade lifts while it does.
   `.btn` twice and both states named, to clear the off rule's weight; not while the image is being made. */
body.button-theme-neon .btn.btn.job_preview_generate.disabled {
	transition: var(--btn-ease), opacity 0.3s ease-in, filter 0.3s ease-in;
}

body.button-theme-neon .btn.btn.job_preview_generate.disabled:not(.generating):hover {
	--btn-bg: var(--btn-accent);
	--btn-fg: var(--btn-fg-hover);
	--btn-sh: var(--btn-hover-sh);
	--btn-tf: translateY(var(--btn-lift));
	--btn-ease: var(--btn-ease-out);
	opacity: 1;
	filter: none;
	transition: var(--btn-ease), opacity 0.3s ease-out, filter 0.3s ease-out;
}


/* ---- CONVERSATIONS ---------------------------------------------------------------------------------
   Import and Tooltip Debug are primaries and the reload is the tray's bare icon, all from the rules above.
   ⚠ THE PREVIEWS PILL IS NOT REPAINTED HERE (user, 2026-09-21 - "previews dropdowns style should be like our white
   admin dropdowns"). It used to follow SchedulingIQ's Style pill into the ghost - no ground, slate type - while
   the SuperTables engine and Records/Request pills beside it in the same row stayed white, so one row carried two
   kinds of tray control. All three are custom.css THE HEAD-TRAY PILL SELECT, and the selectpicker repaint above
   already stands down for anything in a `.section-head-tray`, so the white pill is what it is again. SchedulingIQ's
   Style pill followed it into the white on 2026-09-23 (SCHEDULINGIQ, above). */


/* ---- EDIT SOLUTIONS ---------------------------------------------------------------------------------
   The repeater row's delete X and the Copy / Open pills beside a value are icon buttons at the size their rows
   were measured around - a 20px disc and a badge - so they keep that size and take the icon role's paint. The
   X is the concept's hover-danger: neutral at rest, destructive only under the pointer, where a row of red
   discs used to sit waiting to be hit by accident. */
body.button-theme-neon .btn.btn-danger.m-btn--icon-only,
body.button-theme-neon .m-badge.link_action {
	border: 0 !important;
	border-radius: 6px !important;
	background: var(--btn-bg) !important;
	box-shadow: var(--btn-sh) !important;
	color: var(--btn-fg) !important;
	transform: var(--btn-tf);
	transition: var(--btn-ease);
}

body.button-theme-neon .btn.btn-danger.m-btn--icon-only i,
body.button-theme-neon .m-badge.link_action i {
	color: inherit !important;
}

body.button-theme-neon .btn.btn-danger.m-btn--icon-only,
body.button-theme-neon .m-badge.link_action {
	--btn-bg: var(--btn-ico);
	--btn-fg: var(--btn-ico-ink);
}

body.button-theme-neon .m-badge.link_action:is(:hover, :focus-visible):not(.disabled) {
	--btn-bg: var(--btn-accent);
	--btn-fg: var(--btn-fg-hover);
	--btn-sh: var(--btn-hover-sh);
	--btn-tf: translateY(var(--btn-lift));
	--btn-ease: var(--btn-ease-out);
}

/* `.btn` twice, to clear the platform's own `.btn` hover state above - this one has to say destructive */
body.button-theme-neon .btn.btn.btn-danger.m-btn--icon-only:is(:hover, :focus-visible):not(.disabled, :disabled) {
	--btn-bg: var(--btn-del);
	--btn-fg: var(--btn-del-ink);
	--btn-sh: var(--btn-hover-sh);
	--btn-tf: translateY(var(--btn-lift));
	--btn-ease: var(--btn-ease-out);
}

body.button-theme-neon .m-badge.link_action.disabled {
	opacity: 0.5;
	filter: grayscale(0.7);
}

/* THE IMAGE FIELD (shared/uploadcare_image_widget - every image field on the platform). Upload and Change are
   laid over the field at the small size, which is 32px tall and wider than the pill they replaced: each is
   centred on that height, the remove mark steps 8px clear of Change - and the field's text stops short of both
   - and the info mark beside an empty field's Upload steps 8px clear of it. */
body.button-theme-neon .uploadcare_image_uploader.no-image .upload-btn,
body.button-theme-neon .uploadcare_image_uploader .change_image {
	top: calc(50% - var(--btn-hs) / 2);
}

body.button-theme-neon .uploadcare_image_uploader .remove_image {
	right: 156px;
}

body.button-theme-neon .uploadcare_image_uploader .input-wrap .m-input {
	padding-right: 178px !important;
}

body.button-theme-neon .uploadcare_image_uploader.no-image .info-icon {
	left: 108px;
}

/* THE THEMES SECTION hangs a PSD download beside Change on each of its image rows, placed from the form row rather
   than from the field. It steps 8px clear of Change, the remove mark steps 8px clear of it - the mark used to sit
   underneath it - and the field's text stops short of all three. Only on a row that carries one. */
body.button-theme-neon .section_themes .psd_image {
	right: 201px;
}

body.button-theme-neon .section_themes .form-group:has(> .psd_image) .uploadcare_image_uploader .remove_image {
	right: 188px;
}

body.button-theme-neon .section_themes .form-group:has(> .psd_image) .uploadcare_image_uploader .input-wrap .m-input {
	padding-right: 210px !important;
}


/* ---- ADMIN ------------------------------------------------------------------------------------------
   The user, role, permission and session tables carry bare `btn btn-icon` actions, which no stylesheet sizes -
   they were full-padding transparent buttons with a glyph in them. They take the icon role above; what they
   do not have is m-btn--icon-only's absolute centring of the glyph, so they lay themselves out instead. The
   one holding a trash can is the delete, and turns destructive under the pointer the way m-btn--hover-danger
   does. */
:where(body.button-theme-neon) .btn:where(.btn-icon) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

body.button-theme-neon .btn.btn.btn-icon:has(> .fa-trash):is(:hover, :focus-visible):not(.disabled, :disabled) {
	--btn-bg: var(--btn-del);
	--btn-fg: var(--btn-del-ink);
}

/* THE CHANGELOG'S MENU is an icon-only button with neither hover modifier, so it is named by the dropdown it
   opens. It is the concept's bare icon - no ground until it is pointed at or its menu is open - because it sits
   in the entry's subheader beside its badges, where a filled square would read as one more badge. */
body.button-theme-neon .changelog_dropdown > .btn.m-btn--icon-only {
	width: var(--btn-ico-size);
	height: var(--btn-ico-size);
	border: 0 !important;
	border-radius: var(--btn-r) !important;
	background: var(--btn-bg) !important;
	box-shadow: var(--btn-sh) !important;
	color: var(--btn-fg) !important;
	font-size: 17px;
	transform: var(--btn-tf);
	transition: var(--btn-ease);
}

body.button-theme-neon .changelog_dropdown > .btn {
	--btn-bg: transparent;
	--btn-fg: var(--btn-ico-ink);
}

/* THE GLYPH TAKES THE BUTTON'S INK. The rule above paints the BUTTON, and Metronic paints the `<i>` inside an
   icon-only one grey - so the menu was a grey "..." on every ground it stood on, which is what made it the one
   mark on an update that had not joined the rest. Every other button in this family says the same line; this
   one needed its own because it is named by its dropdown rather than by a hover modifier. */
body.button-theme-neon .changelog_dropdown > .btn.m-btn--icon-only i {
	color: inherit !important;
}

/* ON A LIT ROW IT FROSTS rather than taking the accent: the row already HAS the accent, and an accent chip on
   an accent ground is a chip nobody can see. The same answer the (i) on an Account Overview tile gives, and
   the settings gear on a Top Performing row (custom.css). At rest on that row it stays bare and only its ink
   turns, so a list of open rows is not a list of chips. */
body.button-theme-neon .upd-it:hover .changelog_dropdown > .btn.m-btn--icon-only {
	--btn-fg: var(--btn-hover-ink);
}

body.button-theme-neon .upd-it:hover .changelog_dropdown > .btn.m-btn--icon-only:is(:hover, :focus-visible),
body.button-theme-neon .upd-it:hover .changelog_dropdown.show > .btn.m-btn--icon-only {
	--btn-bg: rgba(255, 255, 255, 0.6);
	--btn-fg: var(--btn-hover-ink);
	--btn-sh: none;
	--btn-tf: none;
}

body.button-theme-neon .changelog_dropdown.show > .btn.m-btn--icon-only {
	--btn-bg: var(--btn-accent);
	--btn-fg: var(--btn-fg-hover);
	--btn-sh: var(--btn-hover-sh);
	--btn-tf: translateY(var(--btn-lift));
	--btn-ease: var(--btn-ease-out);
}

/* RECURRING TASKS' RUN AND DEBUG are primaries holding nothing but a glyph, parked 40px apart at the end of the
   row. The small size's side padding would make each one 43px wide and lay the two over each other, so they are
   squares of the small height instead. `.btn` twice, to clear the action paint rule's weight. */
body.button-theme-neon .btn.btn.btn-sm.run_task {
	width: var(--btn-hs);
	padding: 0;
}

/* The reload's band is a 50px line box that centred the old glyph; the icon is a 34px box now, so the band
   centres the box instead - on the filter row's centre line (a task's filters sit on their own row above its
   log), which the band's middle sits a pixel under.
   ITS SQUARE ENDS WHERE THE TABLE ENDS - the square the pointer lights, not the glyph inside it. It is placed from
   the task body's edge, and the table is inset from that edge by the body's 50px padding plus the form's own -
   30px on a screen wider than 1900px, none below (custom.css `.lead-details`). */
body.button-theme-neon .tbl_bhorn_refresh {
	display: flex;
	align-items: center;
	top: 14px;
	right: 80px;
}

@media (max-width: 1900px) {
	body.button-theme-neon .tbl_bhorn_refresh {
		right: 50px;
	}
}

/* A task's date is a row of its own above its log, centred in a button's height. (Its Action filter, where it has
   one, is on the task's own filter bar under it - the platform's.) */
body.button-theme-neon .scheduler_item .scheduler_filter {
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--btn-hs);
	margin-top: 0;
}

/* THE DATE FILTER is the same pill: it opens a calendar when clicked, so it reads as the
   button it behaves like. The PILL is the wrapper, holding the glyph and the input side by side, so the two
   lift and take the ink together - the glyph used to hang outside the field on a nudge. While the calendar is
   open the input keeps focus, which is what holds the lit state (:focus-within). */
body.button-theme-neon .scheduler_item .datetime_wrap {
	--btn-bg: var(--btn-sec);
	--btn-fg: var(--btn-sec-ink);

	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: var(--btn-hs);
	padding: 0 var(--btn-pxs);
	border-radius: var(--btn-r);
	background: var(--btn-bg);
	box-shadow: var(--btn-sh);
	color: var(--btn-fg);
	vertical-align: middle;
	transform: var(--btn-tf);
	transition: var(--btn-ease);
}

body.button-theme-neon .scheduler_item .datetime_wrap:is(:hover, :focus-within) {
	--btn-bg: var(--btn-accent);
	--btn-fg: var(--btn-fg-hover);
	--btn-sh: var(--btn-hover-sh);
	--btn-tf: translateY(var(--btn-lift));
	--btn-ease: var(--btn-ease-out);
}

body.button-theme-neon .scheduler_item .datetime_wrap .datetime-icon {
	position: static;
	color: inherit !important;
	font-size: 17px !important;
}

/* The field is only the words now. Its type is important: the task body is a `.lead-details`, whose form-text
   rule sets every field in it to 300 at 14px, important.
   It has no focus ring of its own: the pill it is written in holds the lit state for as long as it has focus. */
body.button-theme-neon .scheduler_item .datetime_wrap .datetime {
	width: 100px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
	color: inherit !important;
	font-size: var(--btn-fss) !important;
	font-weight: 600 !important;
	cursor: pointer;
}

/* Until a date is picked the words are the placeholder, which the platform greys, thins and shrinks for every
   field, important - here they are the button's label, so they take the field's own type. */
body.button-theme-neon .scheduler_item .datetime_wrap .datetime::placeholder {
	color: inherit !important;
	font-size: inherit;
	font-weight: inherit;
	opacity: 1;
}


/* ====================================================================================================
   THE REST OF THE KIT

   Everything on the dashboard that is not a button, in the style picked for it from design concept
   "Platform: Extra Elements" - that page draws all five styles of each beside the list of places it
   lives, and the letter named on each sub-block below is the one shipped. Built from the same tokens as
   the buttons, so a control beside a button is visibly the same family, and carried by the same body
   class, so the candidate dashboard and the unified sites keep the base look.

   A STATE ONLY SETS PROPERTIES, the same as the button roles above: each element paints itself once from
   its own custom properties, and its checked, hover and off rules only change those. That is also what
   lets a checkbox's or a switch's paint reach its pseudo-elements - the state lives on the INPUT, a
   sibling of the box that draws it, so the properties are set on the box and inherited by what it draws.
   ==================================================================================================== */

/* ---- SWITCH - E, BUTTON SHAPE -----------------------------------------------------------------------
   The buttons' 8px corner on the track and a squared knob. Off is the secondary wash with a white knob,
   on is the primary wash with a knob in its deep ink, and under the pointer the track becomes the accent,
   glows and lifts like any button. The admin STOP switch (`m-switch-red`) is on in the destructive pair.
   Every size keeps the geometry its rows were measured around - only the corners and the paint change -
   and the knob's glyph goes, because in this shape the knob's position and ink already say which way it
   is. The paint is important where the bundle, the theme pairs and m-switch-red are. */
body.button-theme-neon .m-switch input:empty ~ span {
	--sw-bg: var(--btn-sec);
	--sw-knob: #ffffff;
	--sw-sh: none;
	--sw-tf: none;
	--sw-ease: var(--btn-ease-in), margin-left 0.3s ease-in;

	transform: var(--sw-tf);
	transition: var(--sw-ease);
}

body.button-theme-neon .m-switch input:checked ~ span {
	--sw-bg: var(--btn-pri);
	--sw-knob: var(--btn-pri-ink);
}

body.button-theme-neon .m-switch.m-switch-red input:checked ~ span {
	--sw-bg: var(--btn-del);
	--sw-knob: var(--btn-del-ink);
}

body.button-theme-neon .m-switch input:not([disabled]) ~ span:hover,
body.button-theme-neon .m-switch input:not([disabled]):focus-visible ~ span {
	--sw-bg: var(--btn-accent);
	--sw-knob: var(--btn-hover-ink);
	--sw-sh: var(--btn-hover-sh);
	--sw-tf: translateY(var(--btn-lift));
	--sw-ease: var(--btn-ease-out), margin-left 0.3s ease-out;
}

body.button-theme-neon .m-switch input:empty ~ span::before {
	border-radius: var(--btn-r) !important;
	background: var(--sw-bg) !important;
	box-shadow: var(--sw-sh) !important;
	opacity: 1;
	transition: var(--sw-ease);
}

body.button-theme-neon .m-switch input:empty ~ span::after {
	border-radius: 6px !important;
	background: var(--sw-knob) !important;
	box-shadow: 0 1px 3px rgba(36, 60, 90, 0.28) !important;
	color: transparent !important;
	opacity: 1;
	transition: var(--sw-ease);
}

/* OFF. The switch keeps its paint, faded and greyed, so a locked one still says which way it is set. */
body.button-theme-neon .m-switch input[disabled] ~ span {
	opacity: 0.5;
	filter: grayscale(0.7);
}

/* ---- CHECKBOX - C, BRAND, WITH A'S HOVER -----------------------------------------------------------
   Unticked is the secondary wash with no edge; ticked is a solid brand box with a white tick, the strongest
   "this is on". Under the pointer (the whole label, which is what a click on the words toggles) it is style
   A's: the box becomes the accent, glows and lifts, and the tick shows in the accent's ink whether it is
   ticked or not - a preview of the click. The vendor's tick is kept (its bordered L, always drawn now, in
   an ink that is transparent until a state names one), and so is every box's size: the Shift Editor's
   rows, the breakdown tab and the Getting Started checklist were each measured around theirs. The class is
   named twice where the solid skin's transparent edge is important at three classes. */
body.button-theme-neon .m-checkbox.m-checkbox > input ~ span {
	--cb-bg: var(--btn-sec);
	--cb-tick: transparent;
	--cb-sh: none;
	--cb-tf: none;
	--cb-ease: var(--btn-ease-in), border-color 0.3s ease-in;

	border: 0 !important;
	border-radius: 5px;
	background: var(--cb-bg) !important;
	box-shadow: var(--cb-sh);
	opacity: 1;
	transform: var(--cb-tf);
	transition: var(--cb-ease);
}

body.button-theme-neon .m-checkbox > input:checked ~ span {
	--cb-bg: var(--btn-brand);
	--cb-tick: #ffffff;
}

/* ON A DARK GROUND (`m-checkbox--on-dark`: the login card's glass) the box is white, ticked or not, and the tick is
   the brand's dark blue - a brand box on navy is no box at all. The pointer's look is every other box's, so these sit
   between the checked state and the pointer, which outweighs them. */
body.button-theme-neon .m-checkbox.m-checkbox--on-dark > input ~ span {
	--cb-bg: #ffffff;
}

body.button-theme-neon .m-checkbox.m-checkbox--on-dark > input:checked ~ span {
	--cb-tick: var(--btn-brand);
}

body.button-theme-neon .m-checkbox:hover > input:not([disabled]) ~ span,
body.button-theme-neon .m-checkbox > input:not([disabled]):focus-visible ~ span {
	--cb-bg: var(--btn-accent);
	--cb-tick: var(--btn-hover-ink);
	--cb-sh: var(--btn-hover-sh);
	--cb-tf: translateY(var(--btn-lift));
	--cb-ease: var(--btn-ease-out), border-color 0.3s ease-out;
}

body.button-theme-neon .m-checkbox > input ~ span::after {
	display: block;
	border-color: var(--cb-tick) !important;
	transition: var(--cb-ease);
}

body.button-theme-neon .m-checkbox > input:disabled ~ span {
	opacity: 0.5;
	filter: grayscale(0.7);
}

/* ---- RADIO - C, BRAND RING --------------------------------------------------------------------------
   The classic radio in the brand: an unchosen option is the secondary wash, and the chosen one a thick brand
   ring round a white centre, drawn as an inset shadow so the circle never changes size. The vendor's dot is
   what the ring replaces, so it is left transparent. Under the pointer the circle takes the accent and lifts
   like the checkbox beside it; a chosen one keeps its ring there. */
body.button-theme-neon .m-radio > input ~ span {
	--rd-bg: var(--btn-sec);
	--rd-ring: 0 0 0 0 transparent;
	--rd-sh: 0 0 0 0 transparent;
	--rd-tf: none;
	--rd-ease: var(--btn-ease-in);

	border: 0 !important;
	background: var(--rd-bg) !important;
	box-shadow: var(--rd-ring), var(--rd-sh);
	opacity: 1;
	transform: var(--rd-tf);
	transition: var(--rd-ease);
}

body.button-theme-neon .m-radio > input:checked ~ span {
	--rd-bg: #ffffff;
	--rd-ring: inset 0 0 0 6px var(--btn-brand);
}

body.button-theme-neon .m-radio:hover > input:not([disabled]) ~ span,
body.button-theme-neon .m-radio > input:not([disabled]):focus-visible ~ span {
	--rd-bg: var(--btn-accent);
	--rd-sh: var(--btn-hover-sh);
	--rd-tf: translateY(var(--btn-lift));
	--rd-ease: var(--btn-ease-out);
}

body.button-theme-neon .m-radio > input ~ span::after {
	border-color: transparent !important;
	background: transparent !important;
}

body.button-theme-neon .m-radio > input:disabled ~ span {
	opacity: 0.5;
	filter: grayscale(0.7);
}

/* ---- RANGE SLIDER - A, TINTED, WITH BRAND HANDLES ---------------------------------------------------
   A slim grey track and a brand band, with the handles in the band's own brand blue rather than A's white,
   so the chosen range reads as one object from end to end. Each value rides above its handle on the primary
   wash. The handle under the pointer - or held in a drag - takes the accent, glows and lifts, and its value
   turns with it: the value is inside the handle, so it reads the handle's properties. The band was the
   theme's gradient inside the two slider containers and the vendor's purple outside them (the pay margin),
   so it is named without a container. A disabled slider fades and greys like every other control. */
body.button-theme-neon .noUi-target.noUi-horizontal {
	height: 8px;
	border: 0;
	border-radius: 4px;
	background: #e3e9f0;
	box-shadow: none;
}

body.button-theme-neon .noUi-target .noUi-connects {
	border-radius: 4px;
}

body.button-theme-neon .noUi-target .noUi-connect {
	background: var(--btn-brand);
}

body.button-theme-neon .noUi-target.noUi-horizontal .noUi-handle {
	--sl-bg: var(--btn-brand);
	--sl-sh: 0 1px 4px rgba(36, 60, 90, 0.35);
	--sl-val: var(--btn-pri);
	--sl-val-ink: var(--btn-pri-ink);
	--sl-tf: none;
	--sl-ease: var(--btn-ease-in);

	top: -7px;
	right: -11px;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: var(--sl-bg);
	box-shadow: var(--sl-sh);
	cursor: grab;
	transform: var(--sl-tf);
	transition: var(--sl-ease);
}

body.button-theme-neon .noUi-target:not([disabled]) .noUi-handle:hover,
body.button-theme-neon .noUi-target .noUi-handle.noUi-active {
	--sl-bg: var(--btn-accent);
	--sl-sh: var(--btn-hover-sh);
	--sl-val: var(--btn-accent);
	--sl-val-ink: var(--btn-hover-ink);
	--sl-tf: translateY(var(--btn-lift));
	--sl-ease: var(--btn-ease-out);
}

body.button-theme-neon .noUi-target .noUi-handle .noUi-tooltip {
	padding: 3px 9px;
	border: 0;
	border-radius: 6px;
	background: var(--sl-val);
	color: var(--sl-val-ink);
	font-size: var(--btn-fss);
	font-weight: 600;
	line-height: 1.4;
	transition: var(--sl-ease);
}

body.button-theme-neon .noUi-target[disabled] {
	opacity: 0.5;
	filter: grayscale(0.7);
}

body.button-theme-neon .noUi-target[disabled] .noUi-handle {
	cursor: not-allowed;
}

/* ---- TEXT INPUT - D, AIR -----------------------------------------------------------------------------
   Every typed field - the Edit Solutions forms, the modals, the Shift Editor and the itinerary, a datatable
   cell being edited, the date range picker's two dates - is a white field on the tile shadow with the
   buttons' corner and no edge. Under the pointer the shadow deepens; with focus a primary-wash ring stands
   outside it; with an error the ring is the destructive wash and so is the ink. The value is written in
   #3f4047, over the platform's blue-and-semibold for every input and the forms' black: the forms and the
   search box name their fields through an id, so they are answered through one as well.
   The edge is made transparent and the ground painted under it rather than removed, so no field changes
   size. The search box inside a dropdown's menu is part of that menu and is left to it. A disabled field
   fades and greys - except a DISPLAY-ONLY one (below), which is disabled only so it can be read and copied. */
body.button-theme-neon :is(input, textarea).form-control {
	--in-bg: #ffffff;
	--in-edge: transparent;
	--in-r: var(--btn-r);
	--in-ink: #3f4047;
	--in-sh: 0 1px 4px rgba(36, 60, 90, 0.14);
	--in-ease: var(--btn-ease-in);
}

body.button-theme-neon :is(input, textarea).form-control:enabled:hover {
	--in-sh: 0 4px 12px rgba(36, 60, 90, 0.16);
	--in-ease: var(--btn-ease-out);
}

body.button-theme-neon :is(input, textarea).form-control:enabled:focus {
	--in-sh: 0 0 0 3px var(--btn-pri), 0 1px 4px rgba(36, 60, 90, 0.14);
	--in-ease: var(--btn-ease-out);
}

body.button-theme-neon :is(input, textarea).form-control.has-error:enabled {
	--in-ink: var(--btn-del-ink);
	--in-sh: 0 0 0 3px var(--btn-del);
}

/* DISPLAY ONLY - a value shown to be read and copied, never typed into: a `blue_background` field (the URLs a
   board is reached on, a city's housing link) and an image field's file name. Neither is locked, so neither
   fades: each takes the closed dropdown's field look - the filter tile's fill, hairline and corner - with its
   value at full strength, no shadow and an ordinary pointer. */
body.button-theme-neon :is(input, textarea).form-control:disabled:is(.blue_background, .image_preview_visible) {
	--in-bg: #f7f9fc;
	--in-edge: #e3e9f0;
	--in-r: 6px;
	--in-sh: none;

	cursor: default;
}

body.button-theme-neon :is(input, textarea).form-control:not(.bs-searchbox *) {
	border-color: var(--in-edge) !important;
	border-radius: var(--in-r);
	background-color: var(--in-bg) !important;
	background-clip: border-box;
	box-shadow: var(--in-sh) !important;
	color: var(--in-ink) !important;
	transition: var(--in-ease);
}

body.button-theme-neon :is(#form_data, #details) :is(input, textarea).form-control,
body.button-theme-neon .leads_general_search #generalSearch {
	color: var(--in-ink) !important;
}

/* THE TOOLBAR SEARCH WHILE IT IS SEARCHING (`search-border`, set while it holds a term) lights the rail a filter
   tile lights while it filters - 4px of the accent down its left edge, drawn inside the field so nothing moves -
   and still answers the pointer and focus beside it. In a toolbar tray the field is a tile whose shadow is set
   through the id, important, so there the rail is painted over that shadow instead. */
body.button-theme-neon .leads_general_search #generalSearch.search-border {
	--in-sh: inset 4px 0 0 var(--btn-accent), 0 1px 4px rgba(36, 60, 90, 0.14);
}

body.button-theme-neon .leads_general_search #generalSearch.search-border:enabled:hover {
	--in-sh: inset 4px 0 0 var(--btn-accent), 0 4px 12px rgba(36, 60, 90, 0.16);
}

body.button-theme-neon .leads_general_search #generalSearch.search-border:enabled:focus {
	--in-sh: inset 4px 0 0 var(--btn-accent), 0 0 0 3px var(--btn-pri), 0 1px 4px rgba(36, 60, 90, 0.14);
}

body.button-theme-neon .toolbar-tray .leads_general_search #generalSearch.search-border {
	box-shadow: inset 4px 0 0 var(--btn-accent), 0 1px 4px rgba(36, 60, 90, 0.1) !important;
}

body.button-theme-neon :is(input, textarea).form-control::placeholder {
	color: var(--btn-off-ink) !important;
}

body.button-theme-neon :is(input, textarea).form-control:disabled:not(.blue_background, .image_preview_visible) {
	opacity: 0.55;
	filter: grayscale(0.7);
	cursor: not-allowed;
}

/* ---- SELECT TOGGLE - THE FILTER TILE'S FIELD ----------------------------------------------------------
   Every closed dropdown that holds a VALUE is drawn the way a filter tile draws its own: the quiet #f7f9fc
   fill, a #e3e9f0 hairline and a 6px corner, with no shadow - a field, where a button is a wash. That is the
   standard selectpicker wherever it stands (section forms, modals, table cells, the filter bars that are not
   tiles yet), select2, and the four closed controls that are not selectpickers: SchedulingIQ's Details Panel
   pickers, the Recurring Tasks schedule picker, Shift Checker's browser dropdown and the Landing Page theme
   picker. Each keeps its own height and type; only the fill, the edge and the corner change.
   THE EDGE STILL SAYS WHAT IT SAID, the way it does on the filter tiles themselves: an open menu keeps the
   theme's own edge, so does a filter that is filtering on a bar with no rail to say so, and a field Save
   refused keeps its red - that one as properties, since it would otherwise lose to the paint.
   LEFT AS THEY WERE PICKED: the rows-per-page selects (the pager's secondary button), the toolbar's search
   selects (tiles of the toolbar tray), a title tray's select (the Previews pill), SchedulingIQ's tag "+", and
   the status badge dropdowns, which are not selectpickers at all.
   The paint is important where the plugin's `.show >` fill, the theme's `.btn-default` / `.btn-brand` states and
   the form rows' air shadow are. */
body.button-theme-neon .bootstrap-select > .dropdown-toggle,
body.button-theme-neon .select2-selection,
body.button-theme-neon .sched-panel-select__btn,
body.button-theme-neon .freq_schedule_btn,
body.button-theme-neon .themes-dropdown > .btn.form-select,
body.button-theme-neon select.sc-addtest__cancel {
	--sel-bg: #f7f9fc;
	--sel-edge: #e3e9f0;
}

body.button-theme-neon .bootstrap-select:is(.sched-travel-missing, .sched-editor-missing) > .btn {
	--sel-bg: #fff8f8;
	--sel-edge: #f4a6a6;
}

body.button-theme-neon .bootstrap-select.btn-group:not(.m-datatable__pager-size, .super-pager__size *, .sched-badge-picker, .toolbar-tray .leads_general_search *, .section-head-tray *) > .dropdown-toggle,
body.button-theme-neon .select2-container--default .select2-selection,
body.button-theme-neon .sched-panel-select__btn,
body.button-theme-neon .freq_schedule_btn,
body.button-theme-neon .themes-dropdown > .btn.form-select,
body.button-theme-neon select.sc-addtest__cancel {
	border-radius: 6px !important;
	background: var(--sel-bg) !important;
	box-shadow: none !important;
}

body.button-theme-neon .bootstrap-select.btn-group:not(.show, .filter-border, .m-datatable__pager-size, .super-pager__size *, .sched-badge-picker, .toolbar-tray .leads_general_search *, .section-head-tray *) > .dropdown-toggle,
body.button-theme-neon .select2-container--default:not(.select2-container--open, .select2-add-border.filter-border *) .select2-selection,
body.button-theme-neon .sched-panel-select__btn,
body.button-theme-neon .freq_schedule_btn,
body.button-theme-neon .themes-dropdown > .btn.form-select,
body.button-theme-neon select.sc-addtest__cancel {
	border-color: var(--sel-edge) !important;
}

/* the theme picker was a navy button, so its words and chevron were white */
body.button-theme-neon .themes-dropdown > .btn.form-select {
	color: #3f4047 !important;
}

/* ---- DATE PICKERS - E, TILE DAYS ---------------------------------------------------------------------
   The calendars, and only the calendars: the date range menu's list of ranges beside them keeps the
   platform's chosen-row treatment, the one every dropdown list wears. Every day is a washed tile with air
   round it, a range is primary-wash tiles, its two ends are brand, today is the accent, and the tile under
   the pointer takes the accent, glows and lifts. The month's own days are a shade darker than the days from
   the month either side, which keep the month's own ink on the lighter tile, and stay that way inside a range,
   as the plugin intends - it is the same date the other calendar shows. A day that cannot be picked is the
   lighter tile in light ink.
   The three plugins on the dashboard are one object here: the date range menu (daterangepicker), the
   Shift Editor's, Brand Policies' and Recurring Tasks' fields (bootstrap-datepicker) and the Articles fields
   (datetimepicker), each named in every rule. The air is a transparent edge with the tile painted inside
   it, so no calendar changes size - the range menu's Apply and Cancel are positioned against its height. */
body.button-theme-neon :is(.daterangepicker .calendar-table td, .datepicker table td.day, .datetimepicker table td.day, .daterangepicker .calendar-table th.prev, .daterangepicker .calendar-table th.next, .datepicker table th.prev, .datepicker table th.next, .datetimepicker table th.prev, .datetimepicker table th.next) {
	--dp-bg: #e9edf2;
	--dp-ink: #23384b;
	--dp-sh: none;
	--dp-tf: none;
	--dp-ease: var(--btn-ease-in);

	border: 2px solid transparent !important;
	border-radius: var(--btn-r) !important;
	background: var(--dp-bg) !important;
	background-clip: padding-box !important;
	box-shadow: var(--dp-sh);
	color: var(--dp-ink) !important;
	text-shadow: none;
	transform: var(--dp-tf);
	transition: var(--dp-ease);
}

/* the month's arrows are icon buttons */
body.button-theme-neon :is(.daterangepicker .calendar-table th.prev, .daterangepicker .calendar-table th.next, .datepicker table th.prev, .datepicker table th.next, .datetimepicker table th.prev, .datetimepicker table th.next) {
	--dp-bg: var(--btn-ico);
	--dp-ink: var(--btn-ico-ink);
}

body.button-theme-neon :is(.daterangepicker .calendar-table td.in-range, .datepicker table td.day.range, .datetimepicker table td.day.range) {
	--dp-bg: var(--btn-pri);
	--dp-ink: var(--btn-pri-ink);
}

body.button-theme-neon :is(.daterangepicker .calendar-table td.active, .datepicker table td.day.active, .datepicker table td.day.selected, .datetimepicker table td.day.active) {
	--dp-bg: var(--btn-brand);
	--dp-ink: #ffffff;

	font-weight: 600;
}

/* a day from either side of the month: the month's own ink and weight, on a tile a shade lighter */
body.button-theme-neon :is(.daterangepicker .calendar-table td.off, .datepicker table td.day.old, .datepicker table td.day.new, .datetimepicker table td.day.old, .datetimepicker table td.day.new) {
	--dp-bg: #f4f6f9;
	--dp-ink: #23384b;

	font-weight: inherit;
}

/* a day that cannot be picked - after the rule above, so it wins on a day that is both */
body.button-theme-neon :is(.daterangepicker .calendar-table td.disabled, .datepicker table td.day.disabled, .datetimepicker table td.day.disabled) {
	--dp-bg: #f4f6f9;
	--dp-ink: #c3cdd8;

	font-weight: 400;
}

body.button-theme-neon :is(.daterangepicker .calendar-table td.today, .datepicker table td.day.today, .datetimepicker table td.day.today):not(.active, .selected) {
	--dp-bg: var(--btn-accent);
	--dp-ink: var(--btn-hover-ink);
}

body.button-theme-neon :is(.daterangepicker .calendar-table td.available, .datepicker table td.day:not(.disabled), .datetimepicker table td.day:not(.disabled), .daterangepicker .calendar-table th.prev, .daterangepicker .calendar-table th.next, .datepicker table th.prev, .datepicker table th.next, .datetimepicker table th.prev, .datetimepicker table th.next):hover {
	--dp-bg: var(--btn-accent);
	--dp-ink: var(--btn-hover-ink);
	--dp-sh: var(--btn-hover-sh);
	--dp-tf: translateY(var(--btn-lift));
	--dp-ease: var(--btn-ease-out);
}

/* today's corner triangle - the accent tile says it */
body.button-theme-neon :is(.daterangepicker .calendar-table td.today, .datepicker table td.day.today, .datetimepicker table td.day.today)::before {
	display: none;
}

/* THE RANGE MENU'S TWO DATE FIELDS are text inputs (above), and the one being edited holds the focus look
   whether or not it has the caret - the theme draws it a 2px lime edge at four classes, important. */
body.button-theme-neon .daterangepicker .daterangepicker_input .input-mini:is(.active, :focus) {
	--in-sh: 0 0 0 3px var(--btn-pri), 0 1px 4px rgba(36, 60, 90, 0.14);

	border: 1px solid transparent !important;
}

/* ---- BADGE DROPDOWN - A, TINTED STATUS ----------------------------------------------------------------
   A status is drawn the way the buttons draw a role: a wash of its own colour with its type in the deep end of
   it, the buttons' corner, and the accent, glow and lift under the pointer; an open one is ringed in a stronger
   wash of the same colour. The colour is data - whatever the field's whitelist line says - so the wash and the
   ink are mixed from it (`--mbd-c`, handed over by the widget) rather than picked. The menu it opens is a white
   card of plain rows, each carrying its status as a dot, the chosen one on the primary wash.
   The widget's size is kept: it fills its table cell, and the rows were measured around it. The ink is important
   where the platform's white is (custom.css for the icons, ATS Tools' deleted user rows). */
body.button-theme-neon .mbd-toggle {
	--mbd-bg: color-mix(in srgb, var(--mbd-c) 20%, #ffffff);
	--mbd-ink: color-mix(in srgb, var(--mbd-c) 62%, #10202e);
	--mbd-sh: none;
	--mbd-tf: none;
	--mbd-ease: var(--btn-ease-in);

	border-radius: var(--btn-r);
	background: var(--mbd-bg);
	box-shadow: var(--mbd-sh);
	color: var(--mbd-ink) !important;
	font-weight: 600;
	transform: var(--mbd-tf);
	transition: var(--mbd-ease);
}

body.button-theme-neon .mbd-toggle.mbd-open {
	--mbd-sh: 0 0 0 3px color-mix(in srgb, var(--mbd-c) 30%, #ffffff);
}

body.button-theme-neon .mbd-toggle:is(:hover, :focus-visible) {
	--mbd-bg: var(--btn-accent);
	--mbd-ink: var(--btn-hover-ink);
	--mbd-sh: var(--btn-hover-sh);
	--mbd-tf: translateY(var(--btn-lift));
	--mbd-ease: var(--btn-ease-out);
}

body.button-theme-neon :is(.mbd-toggle, .mbd-item, span.m-badge-dropdown) :is(*, .dropdown-selector-icon i.fa),
body.button-theme-neon .mbd-check i::before {
	color: inherit !important;
}

/* ⚠⚠ AND THE STATIC ONE IS A DIFFERENT ELEMENT ENTIRELY (user, 2026-09-19 - "Placement Statuses badges ... how
   did you apply it?? don't see anything"). A `dropdown_selector = 2` column - Candidates' Placement Status -
   renders a plain SPAN, not the widget, so every rule written for `.mbd-toggle` above walked straight past it
   and that column kept the solid fill the platform launched with while Jobs' Deleted and Featured next to it
   were already tinted. Same two mixes, so the three read as one family. */
body.button-theme-neon span.m-badge-dropdown {
	border-radius: var(--btn-r);
	background: color-mix(in srgb, var(--mbd-c) 20%, #ffffff);
	color: color-mix(in srgb, var(--mbd-c) 62%, #10202e);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

/* the value's own box states a weight of its own (custom.css), so it takes the badge's */
body.button-theme-neon span.m-badge-dropdown .text {
	font-weight: 600;
}

body.button-theme-neon .mbd-toggle-caret {
	opacity: 0.75;
}

body.button-theme-neon .mbd-menu {
	padding: 6px;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(36, 60, 90, 0.16);
}

body.button-theme-neon .mbd-item {
	--mbd-row: transparent;
	--mbd-row-ink: #23384b;
	--mbd-ease: var(--btn-ease-in);

	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 36px;
	margin-bottom: 2px;
	padding: 0 34px 0 10px;
	border-radius: 7px;
	background: var(--mbd-row);
	color: var(--mbd-row-ink) !important;
	font-weight: 500;
	letter-spacing: 0;
	opacity: 1;
	transition: var(--mbd-ease);
}

body.button-theme-neon .mbd-item::before {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mbd-c);
}

body.button-theme-neon .mbd-item.mbd-item-selected {
	--mbd-row: var(--btn-pri);
	--mbd-row-ink: var(--btn-pri-ink);

	font-weight: 600;
}

body.button-theme-neon .mbd-item:hover {
	--mbd-row: var(--btn-accent);
	--mbd-row-ink: var(--btn-hover-ink);
	--mbd-ease: var(--btn-ease-out);

	opacity: 1;
}

/* the words sat 7px up to clear the old row's lopsided padding; the row centres them now */
body.button-theme-neon .mbd-item-content {
	top: 0;
}

/* ---- BADGE - PLACEMENT STATUS -------------------------------------------------------------------------
   THE SAME STATUS, DRAWN THE SAME WAY (user, 2026-09-19 - "Placement Statuses badges, create new style for em
   to match our new theme, similar to Delete/Featured badges/dropdowns"). Candidates draws its placement status
   as a badge DROPDOWN and so gets the tinted treatment above; Conversations draws the same field as a plain
   badge, which was left behind on the old solid-colour-and-white-caps pill - so one section's "Assignment
   Ended" was a lilac block of capitals and the other's was a quiet wash, on the same page of the same product.

   Mixed from exactly the numbers the dropdown uses - a 20% wash of the status's own colour, its type at 62% of
   it over the deep ink - so if that recipe is ever re-cut the two move together. The colour is DATA (the
   client's `statuses` rows), handed over as `--csb-c`, so no status is named here.

   It is not a control: no lift, no glow, no accent under the pointer. What it drops is the shouting - the
   capitals and the 0.3px tracking were doing the work the wash now does, and a column of forty of them reads
   as words rather than as forty coloured blocks. The icon takes the badge's own ink, which is `inherit` and
   important because custom.css paints these white.

   ⚠ CONVERSATIONS' OTHER TWO BADGES ARE THE SAME OBJECT (user, 2026-09-21 - "Call Depth and Division badges
   should match our new placement status badges", then "update the call depth badges in breakdown tab too"). The
   Call Depth column (`.calldepth-badge`, from the field's replace_value), the Call Depth report's parent rows
   (`.depth-badge`, calls.js) and the Division column (`.division-badge`) were three pastel pills in three shapes -
   a bordered one in capitals, a shorter one in capitals, a tracked one - beside a status badge that no longer
   shouted. One box and one recipe now; each kind hands its colour over as `--csb-c` (custom.css), so both depth
   families draw a kind in the SAME colour, which their old palettes did not (Short was green in the column and
   blue in the report). */
body.button-theme-neon :is(.calls-status-badge, .calldepth-badge, .depth-badge, .division-badge) {
	padding: 3px 10px;
	border: 0;
	border-radius: var(--btn-r);
	background: color-mix(in srgb, var(--csb-c) 20%, #ffffff);
	color: color-mix(in srgb, var(--csb-c) 62%, #10202e);
	font-weight: 600;
	line-height: 22px;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
}

body.button-theme-neon .calls-status-badge .calls-status-icon {
	color: inherit !important;
}

/* ...AND SO ARE SCHEDULINGIQ'S PROVIDER BADGES (user, 2026-09-24 - "candidate badges should match our badge format in
   candidates>>placement status column. including how we modify colors so it's not just a flat color"). A badge's colour
   is DATA, handed over as `--tag` (sched_badge_tag), and it was painted as a flat pill of it under white type; it is
   mixed by the same two numbers now, in the Candidate pane and in a tile's hover alike (the hover's own white type,
   custom.css, is one element lighter than this). */
body.button-theme-neon .sched-tag {
	border-radius: var(--btn-r);
	background: color-mix(in srgb, var(--tag, #8898aa) 20%, #ffffff);
	color: color-mix(in srgb, var(--tag, #8898aa) 62%, #10202e);
	font-weight: 600;
}

/* A STATUS WITH NO HUE OF ITS OWN TAKES THE THEME'S NEUTRAL (user, 2026-09-21 - "you forgot to style Not Started
   status badges"). Every recipe above is a wash of the status's own colour, and a wash of a grey - Not Started is
   #989898 - comes out as the flat #eaeaea block with grey type the plain, un-themed badge always was, so it read as
   the one status nobody had styled. The badge says it has no hue (`status-neutral`, set wherever the colour is
   handed over) and the colour it is mixed FROM becomes the theme's own slate: the same wash and the same ink depth,
   in the blue-grey the pager and the secondary buttons are cut from. `!important` because the status colour arrives
   inline, and an inline declaration outweighs every stylesheet rule that is not. */
body.button-theme-neon .status-neutral {
	--mbd-c: var(--btn-sec-ink) !important;
	--csb-c: var(--btn-sec-ink) !important;
}

/* ---- BADGE - APPLICATION PROGRESS & FRAUD SCORE ----------------------------------------------------------
   THE PLACEMENT STATUS RECIPE, ON THE TWO BADGES BESIDE IT (user, 2026-09-21 - "Application Progress and Fraud
   score badge also style with our new style. keep the extra elements and functionality though, like progressbar in
   progress"). Each state hands its own colour over as `--mbd-c` (custom.css) - the property the status badge in the
   same table is mixed from - so all three are one wash, one ink depth and one weight.
   Named by COLUMN, never by class: `m-badge--status` is also the Placement Status span itself, Jobs Tools' status
   and the ATS user manager's, and `m-badge--fraud` is also the POST Lead IDs badge.
   EVERYTHING EACH BADGE CARRIED STAYS, redrawn in the badge's own ink: the progress bar (now along the badge's foot,
   inside it, on a stronger wash of the same colour), the percentage chip, the tick on a complete application, and
   the fraud status mark, score disc and chevron. The disc and the chip stay white - they are the figure, and the
   figure is what is read. */
body.button-theme-neon [data-field="application_progress"] .m-badge--status,
body.button-theme-neon [data-field="fraud_score"] .m-badge--fraud {
	background: color-mix(in srgb, var(--mbd-c) 20%, #ffffff);
	color: color-mix(in srgb, var(--mbd-c) 62%, #10202e);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

/* the bar is clipped to the badge's own corners, which is what keeps it inside them */
body.button-theme-neon [data-field="application_progress"] .m-badge--incomplete {
	overflow: hidden;
}

body.button-theme-neon [data-field="application_progress"] .cpl-progress {
	top: auto;
	bottom: 0;
	height: 3px;
	border-radius: 0;
	background: color-mix(in srgb, var(--mbd-c) 45%, #ffffff);
}

body.button-theme-neon [data-field="application_progress"] .cpl-progress > span {
	height: 3px;
	border-radius: 0;
}

body.button-theme-neon [data-field="application_progress"] .cpl-progress-steps {
	top: 50%;
	height: 19px;
	padding: 0 6px;
	border-radius: 6px;
	color: inherit;
	font-weight: 600;
	line-height: 19px;
	transform: translateY(-50%);
}

body.button-theme-neon [data-field="fraud_score"] :is(.fraud-status-icon, .fraud-circle, .fraud-info-icon i) {
	color: inherit;
}


/* ---- CLICKABLE BADGES & EXPORT CHIPS - D, DUOTONE -----------------------------------------------------
   The badges that DO something: Export on the list bars and the ATS count bars, the Recurring Tasks FREQ badge
   that opens its editor, Lead Journey's View Activity and View, and a Merge Fields row's Copy Tag and Add to
   Favorites. Each is a chip on the icon wash with its glyph in a brand block at its start, so the kind of action
   reads before the words; under the pointer the chip takes the accent, glows and lifts, and the block deepens
   with the glyph in the accent. A chip with no glyph is the wash and its words; one that is only a glyph is all
   block. A favourite keeps its amber - it is a state, not decoration.
   THE BLOCK SITS 2px INSIDE THE CHIP. Most of these chips sit on a brand-blue ground - the count bars, a blue
   accordion head, the Merge Fields list - where a block flush with the chip's edge is the same blue as the bar
   and the chip reads as cut in half; the wash round it is what keeps the block a part of the chip.
   THE LIFT IS `translate`, NOT `transform`: three of the Exports are centred on their bars by a transform of
   their own (ats-tools.css), and the two properties compose where a second transform would replace it. The
   paint is important where the old pills', the theme's lime and the count bars' white were. */
body.button-theme-neon :is(.m-badge.export_btn, .m-badge.freq_editor_toggle, .m-badge.lj-activity-btn, .m-badge.lj-view, .variables-badge.copy_text, .variables-badge.add_favorite) {
	--kc-bg: var(--btn-ico);
	--kc-ink: var(--btn-ico-ink);
	--kc-glyph: var(--btn-brand);
	--kc-glyph-ink: #ffffff;
	--kc-sh: none;
	--kc-lift: 0px;
	--kc-ease: var(--btn-ease-in), translate 0.3s ease-in;

	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 32px;
	padding: 0 12px 0 0 !important;
	border-radius: var(--btn-r) !important;
	background: var(--kc-bg) !important;
	box-shadow: var(--kc-sh) !important;
	color: var(--kc-ink) !important;
	font-size: var(--btn-fss);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
	overflow: hidden;
	translate: 0 var(--kc-lift);
	transition: var(--kc-ease);
}

body.button-theme-neon :is(.m-badge.export_btn, .m-badge.freq_editor_toggle, .m-badge.lj-activity-btn, .m-badge.lj-view, .variables-badge.copy_text, .variables-badge.add_favorite):is(:hover, :focus-visible):not(.disabled) {
	--kc-bg: var(--btn-accent);
	--kc-ink: var(--btn-hover-ink);
	--kc-glyph: var(--btn-hover-ink);
	--kc-glyph-ink: var(--btn-accent);
	--kc-sh: var(--btn-hover-sh);
	--kc-lift: var(--btn-lift);
	--kc-ease: var(--btn-ease-out), translate 0.3s ease-out;
}

body.button-theme-neon :is(.m-badge.export_btn, .m-badge.freq_editor_toggle, .m-badge.lj-activity-btn, .m-badge.lj-view, .variables-badge.copy_text, .variables-badge.add_favorite) > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	align-self: stretch;
	width: 28px;
	margin: 2px 0 2px 2px;
	border-radius: 6px;
	background: var(--kc-glyph);
	color: var(--kc-glyph-ink) !important;
	font-size: 15px;
	transition: var(--kc-ease);
}

body.button-theme-neon :is(.m-badge.export_btn, .m-badge.freq_editor_toggle, .m-badge.lj-activity-btn, .m-badge.lj-view):not(:has(> i)) {
	padding-left: 12px !important;
}

body.button-theme-neon .variables-badge:is(.copy_text, .add_favorite) {
	width: 32px;
	padding: 0 !important;
}

body.button-theme-neon .variables-badge:is(.copy_text, .add_favorite) > i {
	flex: 1;
	margin: 2px;
}

body.button-theme-neon .variables-badge.add_favorite.active {
	--kc-glyph: #ffba05;
}

body.button-theme-neon :is(.m-badge.export_btn, .m-badge.freq_editor_toggle, .m-badge.lj-activity-btn, .m-badge.lj-view, .variables-badge.copy_text, .variables-badge.add_favorite).disabled {
	opacity: 0.5;
	filter: grayscale(0.7);
}

/* ---- COUNT CHIPS - A, THE ACCENT -----------------------------------------------------------------------
   The figures hung on other things - a multi-select's "+N", the Filters tab's count, the Placement Status menu
   counts, the Shift Editor's and the panel tabs' counts, a log button's corner counter, the Logs count disc and
   Conversations' Specialties "+N" - are one chip: the theme's accent with the brand ink on the buttons' small
   corner. The accent is the THEME's, so an orange-blue profile counts in its own amber, and each chip keeps the
   size its row was built around. The corner counter is ringed in white, since it sits over the edge of the
   button it counts; a count of nothing is the off wash, so a column of zeroes reads as measured and empty.
   The Logs disc is named twice to clear the datatable badge's important corner. */
body.button-theme-neon :is(.ms-more, .filter-count, .ps-count-badge, .sched-editor-count, .logs-counter, .spec-more-pill),
body.button-theme-neon .sched-detail-tab .sched-detail-tab__count,
body.button-theme-neon .m-badge.m-badge.log-column-count {
	border-radius: 6px !important;
	background: var(--btn-accent) !important;
	box-shadow: none !important;
	color: var(--btn-brand) !important;
}

body.button-theme-neon .logs-counter {
	box-shadow: 0 0 0 2px #ffffff !important;
}

body.button-theme-neon .m-badge.m-badge.log-column-count.zero_results {
	background: var(--btn-off) !important;
	color: var(--btn-off-ink) !important;
}

/* A COUNT ON A MENU ROW UNDER THE POINTER OR THE KEYBOARD turns round, since the row itself has become the accent:
   the pointer's ink behind the figure in the accent - the pair a sidebar count takes on its lit row. Any count chip,
   on any selectpicker row, easing with the row. */
.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li > a :is(.ms-more, .filter-count, .ps-count-badge, .sched-editor-count, .logs-counter, .spec-more-pill) {
	transition: var(--dd-ease);
}

.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li:not(.disabled) > a:is(:hover, :focus-visible) :is(.ms-more, .filter-count, .ps-count-badge, .sched-editor-count, .logs-counter, .spec-more-pill),
.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li.active:not(.disabled, .selected) > a :is(.ms-more, .filter-count, .ps-count-badge, .sched-editor-count, .logs-counter, .spec-more-pill) {
	background: var(--btn-hover-ink) !important;
	color: var(--btn-accent) !important;
}

/* ---- INFO MARKS & STATUS DISCS - D, SQUARE --------------------------------------------------------------
   The tooltip trigger beside a field or a label is the buttons' corner at mark size - the icon wash with the
   letter i in its ink, a trigger shaped like the icon buttons beside it - and it takes the accent and glows
   under the pointer. A mark opens nothing, so it does not lift. Every mark is one object: the form-row mark
   (drawn by the row, see the glyph notes at the top of custom.css), the title and tray mark, the ATS help mark,
   the datatable cell mark, SchedulingIQ's label mark and the BETA mark.
   THE i IS A LETTER, NOT AN ICON. Both info glyphs in the font are filled discs, and a disc inside a square is
   two frames; the letter needs no codepoint to be looked up and cannot draw the wrong picture. Each mark keeps
   the size its row placed it at - the form rows position theirs by pixel - so the letter is sized from the mark.
   The fraud score disc keeps its colours, which ARE the score, and only takes the corner.
   The form rows paint their mark through #form_data, important, so the selector names it too. */
body.button-theme-neon :is(#form_data, .m-form__group.row) .notify-icon,
body.button-theme-neon :is(.notify-icon-new, .info-icon-normal, .info_icon, .trigger-info.icon2-info3) {
	--im-bg: var(--btn-ico);
	--im-ink: var(--btn-ico-ink);
	--im-sh: none;
	--im-ease: var(--btn-ease-in);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px !important;
	background: var(--im-bg) !important;
	box-shadow: var(--im-sh) !important;
	color: var(--im-ink) !important;
	transition: var(--im-ease);
}

body.button-theme-neon :is(#form_data, .m-form__group.row) .notify-icon:hover,
body.button-theme-neon :is(.notify-icon-new, .info-icon-normal, .info_icon, .trigger-info.icon2-info3):hover {
	--im-bg: var(--btn-accent);
	--im-ink: var(--btn-hover-ink);
	--im-sh: var(--btn-hover-sh);
	--im-ease: var(--btn-ease-out);
}

/* A REPEATER'S ADD BUTTON CARRIES A MARK THAT ONLY SPEAKS ONCE THE REPEATER IS LOCKED - full, or not offered
   here - so it stays hidden until its `.repeater-create` is `.disabled`, as custom.css has it. The display above
   is one id heavier than that pair, which is how every one of them came to be shown. */
body.button-theme-neon :is(#form_data, .m-form__group.row) .repeater-create:not(.disabled) .notify-icon {
	display: none;
}

/* A SECTION TITLE'S MARK SITS ON THE TITLE'S LINE. Its 5px lift was made for the old glyph, which painted below
   its own box; the letter here is centred in the square, so the same lift stood the square above the words. */
body.button-theme-neon .section_info_icon {
	top: 0px;
	vertical-align: middle;
}

/* A FILTER TILE'S MARK SITS ON ITS LABEL'S LINE TOO. The label is set in capitals, and `vertical-align: middle`
   centres the square on the lower-case middle, which stands just over a pixel under the capitals' middle - and
   Placement Reporting's marks also kept ats-tools.css's 2px drop, made for the old glyph. Both are replaced by
   the one lift that centres the square on the words, which with the label's own 3.5px lift lands it on a whole
   pixel. Lead Journey's filters carry the same mark. */
body.button-theme-neon .filter-tiles .m-form__label .info_icon {
	position: relative;
	top: -1.5px;
}

/* the glyph marks are only as big as their glyph, so the square is sized from it */
body.button-theme-neon :is(.info_icon, .trigger-info.icon2-info3) {
	width: 1.3em;
	height: 1.3em;
	vertical-align: middle;
}

body.button-theme-neon :is(#form_data, .m-form__group.row) .notify-icon::before,
body.button-theme-neon :is(.notify-icon-new, .info-icon-normal, .info_icon, .trigger-info.icon2-info3)::before {
	content: "i";
	font-family: Poppins, sans-serif;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1;
	/* the form-row and title marks are `.btn`s, which set their words in capitals */
	text-transform: none;
}

body.button-theme-neon .fraud-circle.m-btn.m-btn--pill {
	border-radius: 6px !important;
}

/* ---- INLINE GLYPH ACTIONS - B, ICON WASH SQUARES ---------------------------------------------------------
   Glyphs that act without being buttons stand on the icon wash, the same object as a row's icon buttons: a
   datatable cell's edit pencil and its save, the search bar's reset, reload and custom-search toggle (the
   toggle, while on, on the primary wash), the Recurring Tasks rename pencil, the pencil on a SchedulingIQ
   tag with the "+" that opens the tag picker, a filter tile's X and eraser, and the login screen's password eye
   (on the primary wash while the password is showing). Under the pointer each takes the accent, glows and lifts.
   Only the paint changes: each still appears when it did - the cell pencil while its cell is pointed at, the
   save while the cell is being edited, the tag pencil while its row is - and each keeps the place its row
   gave it. The lift is `translate`, so nothing it is positioned with is replaced. The ink is important where
   the search icons' blue and the eye's grey and red are. */
body.button-theme-neon :is(.field-input-click .fa.top, .field-input-click .fa.save_icon, .toolbar-tray .leads_general_search .leads-search-icon, .freq_schedule_rename, .sched-badge-edit, .filter-tiles .filter_block .remove_filter, .filter-tiles .filter_block .reset_filter, .login-card .password_show) {
	--ga-bg: var(--btn-ico);
	--ga-ink: var(--btn-ico-ink);
	--ga-sh: none;
	--ga-lift: 0px;
	--ga-ease: var(--btn-ease-in), translate 0.3s ease-in;

	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: var(--ga-bg);
	box-shadow: var(--ga-sh);
	color: var(--ga-ink) !important;
	translate: 0 var(--ga-lift);
	transition: var(--ga-ease), opacity 0.3s ease-in-out;
}

body.button-theme-neon .toolbar-tray .leads_general_search .leads-search-custom-icon.selected,
body.button-theme-neon .login-card .password_show.active {
	--ga-bg: var(--btn-pri);
	--ga-ink: var(--btn-pri-ink);
}

body.button-theme-neon :is(.field-input-click .fa.top, .field-input-click .fa.save_icon, .toolbar-tray .leads_general_search .leads-search-icon, .freq_schedule_rename, .sched-badge-edit, .filter-tiles .filter_block .remove_filter, .filter-tiles .filter_block .reset_filter, .login-card .password_show):hover {
	--ga-bg: var(--btn-accent);
	--ga-ink: var(--btn-hover-ink);
	--ga-sh: var(--btn-hover-sh);
	--ga-lift: var(--btn-lift);
	--ga-ease: var(--btn-ease-out), translate 0.3s ease-out;
}

/* A FILTER TILE'S TWO - its X and its eraser - are 24px squares on the label's centre line: the X on the control's
   right edge, the eraser 6px to its left, or in the X's place on the one filter that cannot be removed. Each still
   appears only when it did (the tile under the pointer; the eraser only while the filter holds a value), but fades
   rather than snaps, so opacity takes over from the base display. The wrapper is named in full to outweigh the
   bar's own placement and its transition (custom.css, THE FILTER BAR - STAT TILES). */
body.button-theme-neon .filter_wrapper.dynamic_filters.filter-tiles .row > div :is(.remove_filter, .reset_filter) {
	top: 10px;
	right: 12px;
	display: inline-flex;
	width: 24px;
	height: 24px;
	line-height: 1;
	opacity: 0;
	pointer-events: none;
	transition: var(--ga-ease), opacity 0.3s ease-in-out;
}

body.button-theme-neon .filter_wrapper.dynamic_filters.filter-tiles .row > div .remove_filter + .reset_filter {
	right: 42px;
}

body.button-theme-neon .filter_wrapper.dynamic_filters.filter-tiles .row > div.filter_block:hover .remove_filter,
body.button-theme-neon .filter_wrapper.dynamic_filters.filter-tiles .row > div.filter_block:has(.filter-border):hover .reset_filter {
	opacity: 1;
	pointer-events: auto;
}

/* ...AND SO DOES ITS INFO MARK, wherever a filter carries one (user, 2026-09-22 - "Filters GLOBALLY, if it has an info
   icon, the info icon should only be visible on HOVER"). A bar of tiles each wearing a square beside its name is the
   same square repeated along the bar; one at a time it is a thing the tile under the pointer offers, the way the
   Breakdown Reports rail shows its marks. Faded rather than removed, so the label beside it never moves, and the
   mark's own colour ease is the kit's (`--im-ease`), kept beside the fade. */
body.button-theme-neon .filter_wrapper.dynamic_filters.filter-tiles .row > div :is(.info_icon, .notify-icon, .info-icon-normal) {
	opacity: 0;
	transition: var(--im-ease), opacity 0.3s ease-out;
}

body.button-theme-neon .filter_wrapper.dynamic_filters.filter-tiles .row > div:hover :is(.info_icon, .notify-icon, .info-icon-normal) {
	opacity: 1;
	transition: var(--im-ease), opacity 0.3s ease-in;
}

/* THE CELL'S TWO, a 26px square centred on the value line they used to sit on at glyph size */
body.button-theme-neon .field-input-click .fa:is(.top, .save_icon) {
	width: 26px;
	height: 26px;
	margin-top: -13px;
	font-size: 13px !important;
}

body.button-theme-neon .field-input-click .fa.top {
	top: 10px;
}

body.button-theme-neon .field-input-click .fa.save_icon {
	top: 50%;
}

body.button-theme-neon :is(.field-input-click:hover .fa.top, .field-input-click .fa.save_icon) {
	display: inline-flex;
}

/* THE SEARCH BAR'S THREE, the icon buttons' 34px square inside the bar's 44px row */
body.button-theme-neon .toolbar-tray .leads_general_search .leads-search-icon {
	width: 34px;
	height: 34px;
	font-size: 17px;
}

body.button-theme-neon .freq_schedule_rename {
	display: inline-flex;
	width: 28px;
	height: 28px;
	font-size: 15px;
}

body.button-theme-neon .sched-badge-edit {
	border-radius: 6px;
}

/* THE BADGE ROW'S TWO MARKS ARE ONE PAIR. The pencil is an icon-wash square (it is named in the list above);
   the clear it sits beside is the multi-select's own `::after`, which this theme draws as a translucent navy
   DISC - so the pair read as two unrelated controls that happened to land on the same row, one square on the
   wash and one circle on a wash of its own. The clear is brought onto the pencil's object instead of the
   other way round: the wash square is what every other glyph-that-acts in the dashboard wears, and a mark
   drawn on the row's own neon ground was taking its colour from whatever that row was doing.
   Only the PAINT and the corner are restated here - the placement, the size and the centre line are the
   pair's already (both are 20px boxes on `top: 50%` with a -10px margin), which is what puts them on one
   line without either being moved. */
body.button-theme-neon .bootstrap-select.show-tick.btn-group > .dropdown-menu.sched-badge-menu > .dropdown-menu.inner > li.selected:hover > a::after {
	border-radius: 6px;
	background: var(--btn-ico);
	color: var(--btn-ico-ink);
}

/* SchedulingIQ's tag picker "+" is the same object: an icon button, so it is the icon wash the pencil in its
   own menu and the series line's eye and funnel wear - the brand glyph on the wash at rest, and the accent,
   the hover ink, the glow and the lift under the pointer and for as long as its menu is open. Its own rules
   rather than a place in the list above, because that list is an :is() and this toggle is heavier than
   everything in it. The corner and the glow are important because the vendor's toggle corner and its
   `.btn` shadow are. */
body.button-theme-neon .sched-badge-picker.bootstrap-select.btn-group > .dropdown-toggle {
	border-radius: 6px !important;
	background: var(--btn-ico);
	translate: 0 0;
	transition: var(--btn-ease-in), translate 0.3s ease-in;
}

body.button-theme-neon .sched-badge-picker.bootstrap-select.btn-group:is(.show, .open) > .dropdown-toggle,
body.button-theme-neon .sched-badge-picker.bootstrap-select.btn-group > .dropdown-toggle:is(:hover, :focus-visible) {
	background: var(--btn-accent);
	box-shadow: var(--btn-hover-sh) !important;
	translate: 0 var(--btn-lift);
	transition: var(--btn-ease-out), translate 0.3s ease-out;
}

/* the glyph's colour is stated, not inherited - a form's own text colour reaches the toggle it sits on */
body.button-theme-neon .sched-badge-picker.bootstrap-select.btn-group > .dropdown-toggle > i {
	color: var(--btn-ico-ink);
	transition: color 0.3s ease-in;
}

body.button-theme-neon .sched-badge-picker.bootstrap-select.btn-group:is(.show, .open) > .dropdown-toggle > i,
body.button-theme-neon .sched-badge-picker.bootstrap-select.btn-group > .dropdown-toggle:is(:hover, :focus-visible) > i {
	color: var(--btn-hover-ink);
	transition: color 0.3s ease-out;
}

/* ---- ACCORDIONS - THE SWITCH'S CORNERS ----------------------------------------------------------------
   Every accordion row takes the corner of the switch in its own head - the buttons' 8px - and so does each
   value badge written into that head; a badge set inside a badge takes the knob's 6px, so the pair stays
   concentric. The rows are the Edit Solutions repeaters, white and blue, the Recurring Tasks rows, the Getting
   Started checklist, the changelog and the ATS step traces. The filter and QuickStats bars are drawn with the
   same markup, but they are trays rather than rows and keep their own corner.
   NOTHING IS CLIPPED TO THE CORNER. Most rows keep `overflow: visible` so a menu inside one can open past its
   edge, so each piece that paints a ground takes its corner itself: the head all four while its row is shut and
   the top two while a body under it is open or moving, and the number rail down its left the head's own left
   pair, inherited, so it follows the head through both. */
body.button-theme-neon .m-accordion__item:not(.filter_wrapper *, .stats_cont_styles *),
body.button-theme-neon .m-accordion__item:not(.filter_wrapper *, .stats_cont_styles *) > .m-accordion__item-head {
	border-radius: var(--btn-r);
}

body.button-theme-neon .m-accordion__item:not(.filter_wrapper *, .stats_cont_styles *):has(.m-accordion__item-body:is(.show, .collapsing)) > .m-accordion__item-head {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

body.button-theme-neon .m-accordion__item-head > .accordion_before {
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
}

body.button-theme-neon .m-accordion__item-head .m-badge:is(.log-column-badge, .log-column-badge2) {
	border-radius: var(--btn-r);
}

body.button-theme-neon .m-accordion__item-head .m-badge .m-badge {
	border-radius: 6px;
}

/* ---- EXPANDED DROPDOWNS - #1, WASH ROWS --------------------------------------------------------------------
   What a dropdown opens into, from design concept "Platform: Expanded Dropdowns" #1: a white card of rounded rows
   on the platform menu's hairlines. The words are near-black at 300 beside their own glyphs; the row under the
   pointer or the keyboard takes the accent; a chosen row takes a pale wash and a tick and keeps its words exactly
   as they were, and on a multi-select the pointer turns that tick into its clear. The count chip wears the chosen
   rows' wash, and a focused search box lights the filter tile's accent rail rather than a glow.
   WHICH MENUS: every selectpicker - the filters, section forms and modals, the search bar's pickers, the page size,
   SchedulingIQ's pickers and tag picker - the Details Panel's hand-built picker, select2's results, the filter
   bar's Add Filter list and the date range menu's quick ranges. The board and team selectors, the row-action
   menus, the profile panel and the status badge menus keep their own.
   A ROW PAINTS ONCE from --dd-* properties, and its states only set those. The keyboard's row is the pointer's
   look, except on a chosen row: the plugin marks a single select's chosen row as its keyboard row every time a
   search list opens, and that row stays chosen. A glyph keeps its own colour throughout - several say something
   with it - while a key written in words (a status, a series' number and site, an airport code) takes the ink.
   EVERY LINE IN A MENU STANDS IN 2px OF AIR - the rule between two rows, the pinned block's, the count's - so a
   row between two lines sits evenly. Where a row has an item round it the rule is the item's edge; where the row
   IS the item (select2, the ranges) it is a line hung above the lower row.
   THE SELECTPICKER RULES WEIGH EXACTLY WHAT THE CONCEPT'S KIT WEIGHS, which is why they name the menu as a chain of
   classes rather than through the body: that outranks the platform's older menu rules (custom.css) and ties with
   the kit, which loads after this file - so the concept goes on drawing its ten designs over them. */

/* THE PANEL. No edge: a shadow lifts it. SchedulingIQ's Edit menu is the Style panel's own little menu opening
   downward, so it is named beside it at every step. */
.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu,
.button-theme-neon .sched-panel-select > .sched-panel-select__menu,
.button-theme-neon .sched-edit-pick > .sched-edit-menu {
	padding: 6px;
	border: 0;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 10px 30px rgba(36, 60, 90, 0.18);
}

/* the tag picker's foot runs to the panel's bottom edge */
.button-theme-neon .sched-badge-picker.bootstrap-select.btn-group > .dropdown-menu.sched-badge-menu {
	padding-bottom: 0;
}

/* the list is a `.dropdown-menu` too and brings a ground of its own - the panel is painted once, outside it */
.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner {
	border-radius: 6px;
	background: transparent;
}

/* A ROW. The padding is important over the platform's own important row padding; the right side is the room the
   chosen row's mark sits in. */
.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li > a,
.button-theme-neon .sched-panel-select > .sched-panel-select__menu > li > a,
.button-theme-neon .sched-edit-pick > .sched-edit-menu > li > a {
	--dd-bg: transparent;
	--dd-ink: #3f4047;
	--dd-ease: var(--btn-ease-in);

	position: relative;
	margin: 2px 0;
	padding: 9px 34px 9px 12px !important;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 6px;
	background: var(--dd-bg);
	box-shadow: none;
	color: var(--dd-ink);
	font-size: 14px;
	font-weight: 300;
	line-height: 22px;
	transition: var(--dd-ease);
}

/* THE RULE BETWEEN TWO ROWS, on the row's item - only under a row with a visible row after it: the live search
   hides rows rather than removing them, and a group's heading or the pinned block's line is already the break */
.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li:not(.dropdown-header, .divider, .hidden):has(~ li:not(.hidden)):not(:has(+ li.dropdown-header, + li.divider)),
.button-theme-neon .sched-panel-select > .sched-panel-select__menu > li:not(:last-child),
.button-theme-neon .sched-edit-pick > .sched-edit-menu > li:not(:last-child, .sched-more-divider, :has(+ li.sched-more-divider)) {
	border-bottom: 1px solid #ededed;
}

/* SchedulingIQ's shift menu (scheduling/_shift_menu): a FOLDED second-level row draws no rule - a folded group would
   leave a stack of hairlines where its rows are - and an open one stands in under the row that opened it */
.button-theme-neon .sched-edit-pick > .sched-edit-menu > li.sched-more-sub:not(.is-on) {
	border-bottom-width: 0;
}

.button-theme-neon .sched-edit-pick > .sched-edit-menu > li.sched-more-sub > a {
	padding-left: 32px !important;
}

/* CHOSEN */
.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li.selected > a,
.button-theme-neon .sched-panel-select > .sched-panel-select__menu > li > a.is-on {
	--dd-bg: #e7f4ff;
}

/* UNDER THE POINTER OR THE KEYBOARD - after chosen, so a chosen row still answers the pointer */
.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li:not(.disabled) > a:is(:hover, :focus-visible),
.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li.active:not(.disabled, .selected) > a,
.button-theme-neon .sched-panel-select > .sched-panel-select__menu > li > a:hover,
.button-theme-neon .sched-edit-pick > .sched-edit-menu > li > a:not(.is-disabled):hover {
	--dd-bg: var(--btn-accent);
	--dd-ink: var(--btn-hover-ink);
	--dd-ease: var(--btn-ease-out);
}

/* THE CHOSEN ROW'S MARK - a tick drawn with two edges, so no glyph codepoint is involved */
.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li.selected > a::after,
.button-theme-neon .sched-panel-select > .sched-panel-select__menu > li > a.is-on::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 6px;
	height: 11px;
	margin-top: -7px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	border-radius: 0;
	background: none;
	color: var(--btn-pri-ink);
	opacity: 1;
	transform: rotate(45deg);
	transition: color 0.3s ease-in;
}

/* ON A MULTI-SELECT THE POINTER TURNS THE TICK INTO ITS CLEAR - "a click takes this off" */
.button-theme-neon .bootstrap-select.show-tick.btn-group > .dropdown-menu > .dropdown-menu.inner > li.selected:hover > a::after {
	content: "\00d7";
	right: 10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border: 0;
	border-radius: 50%;
	background: rgba(36, 60, 90, 0.1);
	color: inherit;
	font-size: 17px;
	font-weight: 400;
	line-height: 20px;
	text-align: center;
	transform: none;
	transition: color 0.3s ease-out;
}

/* WHAT A ROW HOLDS. The words take the row's ink; a key written in words keeps its own colour until the row is
   pointed at, and a status's glyph keeps the status's colour even then. */
.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li > a :is(.text, .rec-filter-name, .filter-progress-name, .sched-badge-name) {
	color: inherit;
}

.button-theme-neon .dropdown-menu.inner :is(.sched-status-opt, .sched-series-opt b, .sched-series-opt em, .sched-travel-apt) {
	transition: color 0.3s ease-in;
}

.button-theme-neon .dropdown-menu.inner > li:not(.disabled) > a:is(:hover, :focus-visible) :is(.sched-status-opt, .sched-series-opt b, .sched-series-opt em, .sched-travel-apt),
.button-theme-neon .dropdown-menu.inner > li.active:not(.disabled, .selected) > a :is(.sched-status-opt, .sched-series-opt b, .sched-series-opt em, .sched-travel-apt) {
	color: var(--btn-hover-ink);
	transition: color 0.3s ease-out;
}

.button-theme-neon .dropdown-menu.inner .sched-status-opt i {
	color: var(--sched-status);
}

.button-theme-neon .dropdown-menu.inner .sched-series-opt em {
	font-size: 13px;
}

/* GROUP HEADINGS, and the rule between two groups */
.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li.dropdown-header {
	padding: 12px 12px 4px;
	color: #95a7b9;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li.dropdown-header .text {
	color: inherit;
}

.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li.divider:not(.ms-divider) {
	height: 1px;
	margin: 6px 12px;
	border: 0;
	background: #e3e9f0;
}

/* THE LINE UNDER THE PINNED BLOCK */
.button-theme-neon .ms-select.bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li.ms-divider {
	margin: 2px 12px;
	border-top: 1px solid #e3e9f0;
	background: none;
}

/* NOTHING MATCHED */
.button-theme-neon .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li.no-results {
	margin: 4px 0;
	padding: 14px 12px;
	border-radius: 6px;
	background: #f7f9fc;
	color: #4f6f8d;
	font-size: 15px;
	white-space: normal;
}

/* THE SEARCH ROW AND ITS FIELD. The field is the input kit's white on the tile shadow; focused, it lights the
   rail instead of the theme's glow, which is important and is answered the same way. */
.button-theme-neon .bootstrap-select > .dropdown-menu > .bs-searchbox {
	padding: 4px 2px 10px;
}

.button-theme-neon .bootstrap-select > .dropdown-menu > .bs-searchbox > .form-control {
	height: 42px;
	border: 0;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(36, 60, 90, 0.14);
	color: #3f4047 !important;
	font-size: 15px;
	font-weight: 400 !important;
	transition: background-color 0.3s ease-in, box-shadow 0.3s ease-in;
}

.button-theme-neon .bootstrap-select > .dropdown-menu > .bs-searchbox > .form-control:focus {
	box-shadow: inset 4px 0 0 var(--btn-accent), 0 1px 4px rgba(36, 60, 90, 0.14) !important;
	transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

.button-theme-neon .bootstrap-select > .dropdown-menu > .bs-searchbox > .form-control::placeholder {
	color: #b6bfcc !important;
	font-size: 15px;
}

/* THE COUNT AND ITS CLEAR - the count starts on the rows' own left edge */
.button-theme-neon .dropdown-menu > .ms-chiprow {
	margin: 0;
	padding: 4px 0 8px;
	border-bottom: 1px solid #e3e9f0;
}

.button-theme-neon .ms-chiprow > .ms-chip {
	border-radius: 6px;
	background: #e7f4ff;
	color: var(--btn-pri-ink);
	font-size: 13px;
}

.button-theme-neon .ms-chip > .ms-chip__x {
	border-radius: 4px;
	background: rgba(28, 81, 131, 0.14);
	transition: background-color 0.3s ease-in;
}

.button-theme-neon .ms-chip > .ms-chip__x:hover {
	background: rgba(28, 81, 131, 0.26);
	transition: background-color 0.3s ease-out;
}

/* A MENU'S FOOT - the way out of a list that does not hold what was wanted: the tag picker's New Badge and every Add
   Filter list's Request a Filter. A band of its own ground run to the card's bottom corners, holding one full-width
   secondary button. The tag picker's rows keep its drag gutter and its pencil's room (below). */
.button-theme-neon .sched-badge-menu > .sched-badge-foot,
.button-theme-neon .add_filter .filter-request-foot {
	margin: 6px -6px 0;
	border-top: 0;
	border-radius: 0 0 10px 10px;
	background: #f7f9fc;
}

/* the Add Filter card keeps its 6px of padding under the list, which the foot runs over; a list with nothing left
   to add (or a bar with no filters to add at all) leaves the foot as the whole card */
.button-theme-neon .add_filter .filter-request-foot {
	display: flex;
	margin-bottom: -6px;
	padding: 9px 12px;
}

.button-theme-neon .add_filter .m-nav:not(:has(> .filter_add_item.visible)) + .filter-request-foot {
	margin-top: -6px;
	border-radius: 10px;
}

/* A Cancel button carries a 10px lead for the button it follows in a form's pair - here it stands alone. It also
   hangs inside the head tab, whose open state sets the pointer's lift and glow as properties, and properties are
   inherited - so the button's own rest is restated, and its own pointer still outweighs it. */
.button-theme-neon .add_filter .filter-request-foot > .btn {
	--btn-sh: none;
	--btn-tf: none;
	--btn-ease: var(--btn-ease-in);

	flex: 1;
	margin: 0;
}

.button-theme-neon .ms-reorder.bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li > a {
	padding-left: 36px !important;
}

.button-theme-neon .sched-badge-picker > .sched-badge-menu.dropdown-menu > ul.dropdown-menu.inner > li > a {
	padding-right: 66px !important;
}

/* THE PERMISSIONS GRID'S MENUS are held to their 50px column and show only an icon, so a row has no room for the
   mark: the icon is centred in the row and the wash alone says which one is chosen */
.button-theme-neon .permissions_content #users-table-wrapper .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li > a {
	padding-right: 6px !important;
	padding-left: 6px !important;
	text-align: center;
}

.button-theme-neon .permissions_content #users-table-wrapper .bootstrap-select.btn-group > .dropdown-menu > .dropdown-menu.inner > li.selected > a::after {
	content: none;
}

/* SELECT2 - its result list is the same object, drawn from its own classes. A row is the list's own item, so the
   rule between two rows hangs above the lower one. A chosen row stays chosen while select2 highlights it, which
   it does to the current value every time the list opens. */
body.button-theme-neon .select2-container--default .select2-dropdown {
	padding: 6px;
	border: 0;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 10px 30px rgba(36, 60, 90, 0.18);
}

body.button-theme-neon .select2-container--default .select2-search--dropdown {
	padding: 4px 2px 10px;
}

body.button-theme-neon .select2-container--default .select2-search--dropdown .select2-search__field {
	height: 42px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	outline: 0;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(36, 60, 90, 0.14);
	color: #3f4047 !important;
	font-size: 15px;
	font-weight: 400 !important;
	transition: background-color 0.3s ease-in, box-shadow 0.3s ease-in;
}

body.button-theme-neon .select2-container--default .select2-search--dropdown .select2-search__field:focus {
	box-shadow: inset 4px 0 0 var(--btn-accent), 0 1px 4px rgba(36, 60, 90, 0.14);
	transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

body.button-theme-neon .select2-container--default .select2-results__option:not([role=group]) {
	--dd-bg: transparent;
	--dd-ink: #3f4047;
	--dd-ease: var(--btn-ease-in);

	position: relative;
	margin: 2px 0;
	padding: 9px 34px 9px 12px;
	border: 0;
	border-radius: 6px;
	background: var(--dd-bg);
	box-shadow: none;
	color: var(--dd-ink);
	font-size: 14px;
	font-weight: 300;
	line-height: 22px;
	transition: var(--dd-ease);
}

body.button-theme-neon .select2-container--default .select2-results__option:not([role=group]) + .select2-results__option:not([role=group]) {
	margin-top: 5px;
}

body.button-theme-neon .select2-container--default .select2-results__option:not([role=group]) + .select2-results__option:not([role=group])::before {
	content: "";
	position: absolute;
	top: -3px;
	right: 0;
	left: 0;
	height: 1px;
	background: #ededed;
	pointer-events: none;
}

body.button-theme-neon .select2-container--default .select2-results__option:not([role=group])[aria-selected="true"] {
	--dd-bg: #e7f4ff;
}

body.button-theme-neon .select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected="false"] {
	--dd-bg: var(--btn-accent);
	--dd-ink: var(--btn-hover-ink);
	--dd-ease: var(--btn-ease-out);
}

body.button-theme-neon .select2-container--default .select2-results__option:not([role=group])[aria-disabled="true"] {
	--dd-ink: #a8a8b7;
}

body.button-theme-neon .select2-container--default .select2-results__option.select2-results__message {
	--dd-bg: #f7f9fc;
	--dd-ink: #4f6f8d;

	padding: 14px 12px;
	font-size: 15px;
}

body.button-theme-neon .select2-container--default .select2-results__option[aria-selected="true"]::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 6px;
	height: 11px;
	margin-top: -7px;
	border: solid var(--btn-pri-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

body.button-theme-neon .select2-container--default .select2-results__group {
	padding: 12px 12px 4px;
	color: #95a7b9;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/* THE ADD FILTER LIST - Metronic's own menu, drawn as the same card. Its rows are links in list items, a filter
   already on the bar is a hidden item (the others carry `visible`), and Request a Filter is the card's foot (A MENU'S
   FOOT, above). The ink and glyph are important where the theme's green hover and the list's blue are. */
body.button-theme-neon .add_filter .m-dropdown__wrapper .m-dropdown__inner {
	box-shadow: 0 10px 30px rgba(36, 60, 90, 0.18);
}

body.button-theme-neon .add_filter .m-dropdown__wrapper .m-dropdown__body {
	padding: 6px;
}

body.button-theme-neon .add_filter .m-dropdown__inner .m-nav > .m-nav__item > .m-nav__link {
	--dd-bg: transparent;
	--dd-ink: #3f4047;
	--dd-glyph: var(--btn-brand);
	--dd-ease: var(--btn-ease-in);

	margin: 2px 0;
	padding: 9px 34px 9px 12px;
	border: 0;
	border-radius: 6px;
	background: var(--dd-bg);
	transition: var(--dd-ease);
}

body.button-theme-neon .add_filter .m-dropdown__inner .m-nav > .m-nav__item:hover > .m-nav__link {
	--dd-bg: var(--btn-accent);
	--dd-ink: var(--btn-hover-ink);
	--dd-glyph: var(--btn-hover-ink);
	--dd-ease: var(--btn-ease-out);
}

body.button-theme-neon .add_filter .m-dropdown__inner .m-nav > .m-nav__item > .m-nav__link > .m-nav__link-text {
	color: var(--dd-ink) !important;
	font-size: 14px;
	font-weight: 300;
	line-height: 22px;
	transition: var(--dd-ease);
}

body.button-theme-neon .add_filter .m-dropdown__inner .m-nav > .m-nav__item > .m-nav__link > .m-nav__link-icon {
	color: var(--dd-glyph) !important;
	transition: var(--dd-ease);
}

body.button-theme-neon .add_filter .m-dropdown__inner .m-nav > .m-nav__item.filter_add_item.visible:has(~ .m-nav__item.filter_add_item.visible) {
	border-bottom: 1px solid #ededed;
}

/* THE DATE RANGE MENU'S QUICK RANGES - the list beside the calendars is the same card of rows, and the chosen range
   (`active`) is the chosen row. A row is the list's own item, so the rule between two hangs above the lower one.
   `.daterangepicker` is named twice to clear the platform's own row states, a class heavier than one name. */
body.button-theme-neon .daterangepicker.daterangepicker {
	box-shadow: 0 10px 30px rgba(36, 60, 90, 0.18);
}

body.button-theme-neon .daterangepicker.daterangepicker .ranges {
	margin-top: 0;
	margin-bottom: 0;
	padding: 6px;
}

/* Apply and Cancel still end on the last range's bottom edge: the picker's own 10px padding, the list's 6px and
   the last row's 2px margin under it */
body.button-theme-neon .leads-datetime .show-calendar .range_inputs {
	bottom: 18px;
}

/* one line a range - the list is only as wide as the date control, and "Custom Range" broke in two against the
   mark's room at the end of the row */
body.button-theme-neon .daterangepicker.daterangepicker .ranges li {
	--dd-bg: transparent;
	--dd-ink: #3f4047;
	--dd-ease: var(--btn-ease-in);

	position: relative;
	margin: 2px 0;
	padding: 9px 34px 9px 12px;
	border: 0;
	border-radius: 6px;
	background: var(--dd-bg);
	box-shadow: none;
	color: var(--dd-ink);
	font-size: 14px;
	font-weight: 300;
	line-height: 22px;
	white-space: nowrap;
	transition: var(--dd-ease);
}

body.button-theme-neon .daterangepicker.daterangepicker .ranges li + li {
	margin-top: 5px;
}

body.button-theme-neon .daterangepicker.daterangepicker .ranges li + li::before {
	content: "";
	position: absolute;
	top: -3px;
	right: 0;
	left: 0;
	height: 1px;
	background: #ededed;
	pointer-events: none;
}

body.button-theme-neon .daterangepicker.daterangepicker .ranges li.active {
	--dd-bg: #e7f4ff;
}

body.button-theme-neon .daterangepicker.daterangepicker .ranges li:hover {
	--dd-bg: var(--btn-accent);
	--dd-ink: var(--btn-hover-ink);
	--dd-ease: var(--btn-ease-out);
}

body.button-theme-neon .daterangepicker.daterangepicker .ranges li.active::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 6px;
	height: 11px;
	margin-top: -7px;
	border: solid var(--btn-pri-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}


/* ====================================================================================================
   THE LEFT MENU

   Design concept "Platform: Sidebar" #3, Neon Rail, on the four sidebars that carry it: Job Board Settings,
   Admin, Knowledge Base and Getting Started. No panel: the menu is set straight on the page gradient in the
   header's own language - dimmed white type that comes up to full white, and the lime rule that marks the open
   section, turned to run down the left of the open page and slide to the next one. The page the menu opens is
   a card of its own beside it.

   THE ROWS ARE STILL METRONIC'S m-menu LIST, which the pages' own scripts read and write (the open page, the
   Flows counts and warnings, the ATS Tools pins), so every rule here is weighed through #m_aside_left: an id
   outranks the vendor's long class chains and the theme colours above, and !important is only added where the
   rule being beaten carries it. The behaviour - a list easing open, the lime rule, the group tiles, the Find box -
   is sidenav_init() in custom.js; the head's markup is partials/sidenav_head.

   Dashboard only, like the rest of the kit: the candidate dashboard keeps the vendor menu.
   ==================================================================================================== */

/* ---- THE TOKENS - the concept's #3 palette, and the room the menu takes ---------------------------------- */
body.button-theme-neon {
	--sn-w: 310px;
	--sn-gap: 10px;
}

body.button-theme-neon #m_aside_left {
	--sn-pad: 14px;
	--sn-ink: rgba(255, 255, 255, 0.84);
	--sn-ink-sub: rgba(255, 255, 255, 0.76);
	--sn-ink-off: rgba(255, 255, 255, 0.45);
	--sn-ico: rgba(255, 255, 255, 0.74);
	--sn-label: rgba(255, 255, 255, 0.56);
	--sn-chev: rgba(255, 255, 255, 0.5);
	--sn-line: rgba(255, 255, 255, 0.22);
	--sn-rule: rgba(255, 255, 255, 0.14);
	--sn-hover-bg: rgba(255, 255, 255, 0.1);
	--sn-hover-edge: rgba(255, 255, 255, 0.4);
	--sn-open-bg: rgba(255, 255, 255, 0.14);
	--sn-field: rgba(255, 255, 255, 0.12);
	--sn-field-edge: rgba(255, 255, 255, 0.16);
	--sn-field-edge-on: rgba(255, 255, 255, 0.55);

	/* a row a search or a group change takes away eases its height between auto and 0 */
	interpolate-size: allow-keywords;
}

/* ---- THE PAGE - the menu leaves the white sheet ---------------------------------------------------------
   MENU BAR THEMES splits the page card between the sidebar (its left corners) and the content (its right). With
   the menu on the gradient, the content takes all four corners back and stands the gap clear of it. */
body.button-theme-neon.menu-theme-underline .m-grid.m-grid--ver-desktop.m-grid--desktop > #m_aside_left {
	border-radius: 0;
	background: transparent;
}

body.button-theme-neon.menu-theme-underline .m-grid.m-grid--ver-desktop.m-grid--desktop > #m_aside_left ~ .m-grid__item.m-grid__item--fluid {
	margin-left: var(--sn-gap);
	border-radius: 30px;
}

/* The rule's measuring box. The head above the list is what clears the header now, so the room the Knowledge Base
   menu used to take under a minimised header goes. */
body.button-theme-neon #m_aside_left #m_ver_menu {
	position: relative;
	padding-top: 0;
	padding-bottom: 12px;
}

/* a menu with no head over it (Knowledge Base) sets its first heading's words on the line a head's label sits on -
   the heading is a 34px row with its words centred, so 7px less than the head's own 18px */
body.button-theme-neon #m_aside_left #m_ver_menu:first-child {
	padding-top: 11px;
}

/* ---- THE HEAD - what the menu belongs to ----------------------------------------------------------------- */
body.button-theme-neon #m_aside_left .sidenav-head {
	display: grid;
	gap: 6px;
	padding: 18px var(--sn-pad) 12px;
}

body.button-theme-neon #m_aside_left .sidenav-head__label {
	padding-left: 4px;
	color: var(--sn-label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
}

body.button-theme-neon #m_aside_left .sidenav-select {
	margin: 0;
	padding: 0;
}

/* THE BOARD FIELD - the filter tile's closed field, on the gradient; a fixed tile names a section instead */
body.button-theme-neon #m_aside_left .sidenav-board {
	--bd-edge: var(--sn-field-edge);
	--bd-ease: ease-in;

	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 44px;
	padding: 0 12px 0 7px;
	border: 0;
	border-radius: 6px;
	outline: 0;
	background: var(--sn-field);
	box-shadow: inset 0 0 0 1px var(--bd-edge);
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	transition: box-shadow 0.3s var(--bd-ease), background-color 0.3s var(--bd-ease);
}

body.button-theme-neon #m_aside_left .sidenav-board--fixed {
	cursor: default;
}

body.button-theme-neon #m_aside_left button.sidenav-board:is(:hover, :focus-visible),
body.button-theme-neon #m_aside_left .sidenav-select.show > .sidenav-board {
	--bd-edge: var(--sn-field-edge-on);
	--bd-ease: ease-out;
}

/* the board's tile in the ALPHA pill's pairing - the header's own lime object */
body.button-theme-neon #m_aside_left .sidenav-board__logo {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	background: var(--btn-accent);
	color: var(--btn-brand);
	font-size: 16px;
}

/* a board's logo is drawn in its own colours for a white page, so the board's tile is white; a section's glyph
   keeps the lime */
body.button-theme-neon #m_aside_left button.sidenav-board .sidenav-board__logo {
	background: #ffffff;
}

body.button-theme-neon #m_aside_left .sidenav-board__logo :is(svg, img) {
	width: 20px;
	max-width: 20px;
	height: 20px;
}

body.button-theme-neon #m_aside_left .sidenav-board__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.button-theme-neon #m_aside_left .sidenav-board__chevron {
	color: var(--sn-chev);
	font-size: 13px;
	transition: rotate 0.3s ease-in, color 0.3s ease-in;
}

body.button-theme-neon #m_aside_left .sidenav-select.show .sidenav-board__chevron {
	rotate: 180deg;
	color: #ffffff;
	transition: rotate 0.3s ease-out, color 0.3s ease-out;
}

/* ---- THE GROUP TILES (Job Board Settings) - design concept #6's dock, laid across the head ------------------
   Filters, not tabs: a tile rests as a field on the gradient, the one narrowing the menu to its group carries the
   neon rail a filter tile lights while it filters, and a tile under the pointer is the family's neon - the picked
   one keeping its rail there in the pointer's ink. The row steps back while a search shows every group. */
body.button-theme-neon #m_aside_left .sidenav-tiles {
	display: flex;
	gap: 6px;
	margin: 0 var(--sn-pad) 10px;
	transition: opacity 0.3s ease-out;
}

body.button-theme-neon #m_aside_left.is-searching .sidenav-tiles {
	opacity: 0.5;
	transition: opacity 0.3s ease-in;
}

body.button-theme-neon #m_aside_left .sidenav-tile {
	--tl-bg: var(--sn-field);
	--tl-ink: var(--sn-ico);
	--tl-sh: inset 0 0 0 1px var(--sn-field-edge);
	--tl-tf: none;
	--tl-ease: ease-in;

	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--btn-r);
	outline: 0;
	background: var(--tl-bg);
	box-shadow: var(--tl-sh);
	color: var(--tl-ink);
	font-size: 18px;
	cursor: pointer;
	transform: var(--tl-tf);
	transition: background-color 0.3s var(--tl-ease), color 0.3s var(--tl-ease), box-shadow 0.3s var(--tl-ease), transform 0.3s var(--tl-ease);
}

body.button-theme-neon #m_aside_left .sidenav-tile.is-cur {
	--tl-bg: rgba(255, 255, 255, 0.2);
	--tl-ink: #ffffff;
	--tl-sh: inset 4px 0 0 var(--btn-accent), inset 0 0 0 1px var(--sn-field-edge);
	--tl-ease: ease-out;
}

body.button-theme-neon #m_aside_left .sidenav-tile:is(:hover, :focus-visible) {
	--tl-bg: var(--btn-accent);
	--tl-ink: var(--btn-hover-ink);
	--tl-sh: var(--btn-hover-sh);
	--tl-tf: translateY(var(--btn-lift));
	--tl-ease: ease-out;
}

body.button-theme-neon #m_aside_left .sidenav-tile.is-cur:is(:hover, :focus-visible) {
	--tl-sh: inset 4px 0 0 var(--btn-hover-ink), var(--btn-hover-sh);
}

/* ---- THE FIND BOX (Job Board Settings, Admin) - the field on the gradient; focused, the accent rail --------- */
body.button-theme-neon #m_aside_left .sidenav-find {
	--fd-sh: inset 0 0 0 1px var(--sn-field-edge);
	--fd-ease: ease-in;

	position: relative;
	display: flex;
	align-items: center;
	height: 40px;
	margin: 0 var(--sn-pad) 10px;
	border-radius: var(--btn-r);
	background: var(--sn-field);
	box-shadow: var(--fd-sh);
	cursor: text;
	transition: box-shadow 0.3s var(--fd-ease), background-color 0.3s var(--fd-ease);
}

body.button-theme-neon #m_aside_left .sidenav-find:hover {
	--fd-sh: inset 0 0 0 1px var(--sn-field-edge-on);
	--fd-ease: ease-out;
}

body.button-theme-neon #m_aside_left .sidenav-find:focus-within {
	--fd-sh: inset 4px 0 0 var(--btn-accent), inset 0 0 0 1px var(--sn-field-edge-on);
	--fd-ease: ease-out;
}

body.button-theme-neon #m_aside_left .sidenav-find__icon {
	position: absolute;
	left: 16px;
	width: 16px;
	color: var(--sn-ico);
	font-size: 15px;
	text-align: center;
	pointer-events: none;
}

/* Every input on the platform is blue and semi-bold, and every placeholder grey, thin and 13px, through important
   rules in custom.css - so the field restates its own ink, weight and placeholder, important. */
body.button-theme-neon #m_aside_left .sidenav-find__input {
	width: 100%;
	height: 100%;
	padding: 0 38px 0 44px;
	border: 0;
	outline: 0;
	background: transparent;
	color: #ffffff !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500 !important;
}

body.button-theme-neon #m_aside_left .sidenav-find__input::placeholder {
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
}

/* THE CLEAR - the Solution Settings repeater's X (EDIT SOLUTIONS above paints it), shown while the box holds a
   word. Its 9px top comes from custom.css, important, for the rows that X was sized for. */
body.button-theme-neon #m_aside_left .sidenav-find__clear {
	position: absolute;
	top: 10px !important;
	right: 10px;
	opacity: 1;
	transition: var(--btn-ease), opacity 0.3s ease-out;
}

/* ...BUT IT STANDS ON THE FIELD, NOT ON THE PAGE. The X takes the icon role's own wash, which is a pale grey
   made for a white form - on the menu's gradient that reads as a white chip dropped into the field. Here it
   is the sidebar's own semi-transparent tint (the tokens at the top of this block, the same ones the field,
   the tiles and every hover in this menu are painted from), so the square sits IN the field rather than on
   top of it. `:not(:hover)` because this selector carries an id and would otherwise outweigh the destructive
   red the X takes under the pointer, which is the one thing about it that must not change. */
body.button-theme-neon #m_aside_left .sidenav-find__clear:not(:hover, :focus-visible) {
	--btn-bg: var(--sn-open-bg);
	--btn-fg: var(--sn-ico);
	--btn-sh: none;
}

body.button-theme-neon #m_aside_left .sidenav-find__input:placeholder-shown + .sidenav-find__clear {
	opacity: 0;
	pointer-events: none;
	transition: var(--btn-ease), opacity 0.3s ease-in;
}

/* a search that leaves nothing on show */
body.button-theme-neon #m_aside_left .sidenav-empty {
	height: 0;
	margin: 0 var(--sn-pad);
	padding: 0 14px;
	overflow: clip;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	opacity: 0;
	transition: height 0.3s ease-in, margin 0.3s ease-in, opacity 0.3s ease-in;
}

body.button-theme-neon #m_aside_left .sidenav-empty.is-on {
	height: auto;
	margin-bottom: 10px;
	opacity: 1;
	transition: height 0.3s ease-out, margin 0.3s ease-out, opacity 0.3s ease-out;
}

/* ---- THE LIST -------------------------------------------------------------------------------------------- */
body.button-theme-neon #m_aside_left .m-menu__nav {
	margin: 0;
	padding: 0 var(--sn-pad);
}

/* AN ITEM holds the values that differ by level - height, indent, type - so its row inherits them and a sub-row's
   own values can never outweigh a state. flow-root keeps the row's margins inside the item, so an item folded
   to no height takes them with it. The platform's own indents on the items are important, hence this one. */
body.button-theme-neon #m_aside_left .m-menu__nav .m-menu__item {
	--it-h: 42px;
	--it-pl: 14px;
	--it-fs: 15px;
	--it-fw: 500;
	--it-ink: var(--sn-ink);
	--it-ico: 18px;

	position: relative;
	display: flow-root;
	height: auto;
	margin: 0;
	padding: 0 !important;
	transition: height 0.3s ease-out, opacity 0.3s ease-out, translate 0.3s ease-out;
}

/* white on the gradient reads lighter than ink on white, so the sub-pages are set a step heavier than on a card */
body.button-theme-neon #m_aside_left .m-menu__subnav .m-menu__item {
	--it-h: 38px;
	--it-pl: 36px;
	--it-fs: 14px;
	--it-ink: var(--sn-ink-sub);
	--it-ico: 16px;
}

/* A ROW PAINTS ITSELF FROM PROPERTIES and its states only change them: the row at rest carries the curve for
   leaving a state and each state the curve for arriving. Its left corners stay square - the lime rule runs there. */
body.button-theme-neon #m_aside_left .m-menu__nav .m-menu__item > .m-menu__link {
	--r-bg: transparent;
	--r-ink: var(--it-ink);
	--r-ico: var(--sn-ico);
	--r-sh: none;
	--r-fw: var(--it-fw);
	--r-ease: ease-in;

	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: var(--it-h);
	margin: 1px 0;
	padding: 0 12px 0 var(--it-pl) !important;
	border-radius: 0 8px 8px 0;
	background: var(--r-bg);
	box-shadow: var(--r-sh);
	color: var(--r-ink);
	text-decoration: none;
	transition: background-color 0.3s var(--r-ease), box-shadow 0.3s var(--r-ease), color 0.3s var(--r-ease);
}

/* THE WORDS stay one line of inline text - a search marks a piece of a word, and as flex items the pieces would
   be spaced apart and lose the spaces between them - with the agency mark and a count floated to its end. */
body.button-theme-neon #m_aside_left .m-menu__nav .m-menu__link .m-menu__link-text {
	display: flow-root;
	flex: 1;
	min-width: 0;
	height: auto;
	padding: 0;
	color: inherit !important;
	font-size: var(--it-fs);
	font-weight: var(--r-fw) !important;
	line-height: 22px;
	white-space: nowrap;
}

body.button-theme-neon #m_aside_left .m-menu__link-text > mark.sidenav-hit {
	padding: 0 1px;
	border-radius: 3px;
	background: var(--btn-accent);
	color: var(--btn-hover-ink);
}

/* the admin menu's links carry a stray empty span beside the icon */
body.button-theme-neon #m_aside_left .m-menu__link > span:empty {
	display: none;
}

/* THE ICON - every icon class the menus use, on one 20px box on the row's centre line */
body.button-theme-neon #m_aside_left .m-menu__link > :is(.edit-solution-sidebar-icon, .edit-solution-sidebar-sub-icon, .sidebar-icon, .m-menu__link-bullet) {
	position: static;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: 0 !important;
	padding: 0;
	color: var(--r-ico);
	font-size: var(--it-ico);
	line-height: 1;
	transition: color 0.3s var(--r-ease);
}

body.button-theme-neon #m_aside_left .m-menu__link .icon-sidebar-img img {
	width: 16px;
}

/* a sub-page with no icon of its own (the admin menu's) keeps the platform's bullet dot */
body.button-theme-neon #m_aside_left .m-menu__link-bullet > span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: currentColor !important;
	opacity: 0.55;
}

/* THE CHEVRON turns on its own box - the vendor's turn on the glyph is taken off */
body.button-theme-neon #m_aside_left .m-menu__link > .m-menu__ver-arrow {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	color: var(--sn-chev);
	font-size: 12px;
	transition: rotate 0.3s ease-in, color 0.3s var(--r-ease);
}

body.button-theme-neon #m_aside_left .m-menu__link > .m-menu__ver-arrow::before {
	transform: none;
	transition: none;
}

body.button-theme-neon #m_aside_left .m-menu__item.m-menu__item--open > .m-menu__link > .m-menu__ver-arrow {
	rotate: 90deg;
	transition: rotate 0.3s ease-out, color 0.3s var(--r-ease);
}

/* ---- THE ROW'S STATES - the open parent, then the pointer, then the open page, each at one weight so order
   decides: the page that is open does not answer the pointer. */
body.button-theme-neon #m_aside_left .m-menu__nav .m-menu__item:is(.m-menu__item--open, :has(.m-menu__item--active)) > .m-menu__link {
	--r-ink: #ffffff;
	--r-fw: 600;
}

body.button-theme-neon #m_aside_left .m-menu__nav .m-menu__item > .m-menu__link:is(:hover, :focus-visible) {
	--r-bg: var(--sn-hover-bg);
	--r-ink: #ffffff;
	--r-ico: #ffffff;
	--r-sh: inset 3px 0 0 var(--sn-hover-edge);
	--r-ease: ease-out;
}

body.button-theme-neon #m_aside_left .m-menu__nav .m-menu__item.m-menu__item--active > .m-menu__link {
	--r-bg: var(--sn-open-bg);
	--r-ink: #ffffff;
	--r-ico: var(--btn-accent);
	--r-sh: none;
	--r-fw: 600;
	--r-ease: ease-out;
}

body.button-theme-neon #m_aside_left .m-menu__link:is(:hover, :focus-visible) > .m-menu__ver-arrow {
	color: currentColor;
}

/* a Flow that is switched off, and one still to come */
body.button-theme-neon #m_aside_left .m-menu__nav .m-menu__item > .m-menu__link.disabled {
	--r-ink: var(--sn-ink-off);
}

body.button-theme-neon #m_aside_left .m-menu__link .coming-soon {
	color: var(--sn-ink-off) !important;
}

body.button-theme-neon #m_aside_left .m-menu__link .m-badge--uplink {
	background: var(--btn-accent);
	color: var(--btn-brand);
}

/* the linkout's small redirect mark follows its words */
body.button-theme-neon #m_aside_left .m-menu__link .icon-linkout-small {
	color: inherit !important;
	font-size: 12px !important;
}

/* ---- A SUB-MENU ------------------------------------------------------------------------------------------------
   The list eases between a 0fr and a 1fr grid row, so its height animates with nothing measured. It clips its
   rows while it moves and stops once it has settled open, so a row's own menu (a Flow's kebab) can open past the
   list's edge. Its rows cascade in one after another on the way in and leave together on the way out. */
body.button-theme-neon #m_aside_left .m-menu__item > .m-menu__submenu {
	display: grid;
	grid-template-rows: 0fr;
	margin: 0;
	padding: 0;
	transition: grid-template-rows 0.3s ease-in;
}

body.button-theme-neon #m_aside_left .m-menu__item.m-menu__item--open > .m-menu__submenu {
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.3s ease-out;
}

/* the vendor's own copy of the parent's name, which heads a list only in its flyout menus */
body.button-theme-neon #m_aside_left .m-menu__submenu > .m-menu__arrow,
body.button-theme-neon #m_aside_left .m-menu__subnav > .m-menu__item.m-menu__item--parent {
	display: none;
}

body.button-theme-neon #m_aside_left .m-menu__submenu > .m-menu__subnav {
	position: relative;
	min-height: 0;
	overflow: hidden;
}

body.button-theme-neon #m_aside_left .m-menu__item.m-menu__item--open.is-settled > .m-menu__submenu > .m-menu__subnav {
	overflow: visible;
}

/* a faint guide down the open list, on the parent icon's centre line */
body.button-theme-neon #m_aside_left .m-menu__submenu > .m-menu__subnav::before {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 8px;
	left: 24px;
	width: 1px;
	background: var(--sn-line);
	pointer-events: none;
}

body.button-theme-neon #m_aside_left .m-menu__subnav > .m-menu__item {
	opacity: 0;
	translate: -10px 0;
	transition: opacity 0.3s ease-in, translate 0.3s ease-in, height 0.3s ease-in;
}

body.button-theme-neon #m_aside_left .m-menu__item.m-menu__item--open > .m-menu__submenu > .m-menu__subnav > .m-menu__item {
	opacity: 1;
	translate: none;
	transition: opacity 0.3s ease-out calc(var(--i, 0) * 30ms), translate 0.3s ease-out calc(var(--i, 0) * 30ms), height 0.3s ease-out;
}

/* ---- THE GROUP HEADINGS -------------------------------------------------------------------------------------- */
body.button-theme-neon #m_aside_left .m-menu__nav > .m-menu__section {
	display: flex;
	align-items: center;
	height: auto;
	min-height: 34px;
	margin: 10px 0 0;
	padding: 0 14px;
	overflow: hidden;
	transition: height 0.3s ease-out, margin 0.3s ease-out, opacity 0.3s ease-out, translate 0.3s ease-out;
}

body.button-theme-neon #m_aside_left .m-menu__nav > .m-menu__section:first-child {
	margin-top: 0;
}

/* a tile narrowing the menu to one group: that group starts the list */
body.button-theme-neon #m_aside_left.is-grouped:not(.is-searching) .m-menu__nav > .m-menu__section {
	margin-top: 0;
}

/* the heading's words are important in three places (the theme's colour, Getting Started's spacing) */
body.button-theme-neon #m_aside_left .m-menu__section > .m-menu__section-text {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--sn-label) !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
}

body.button-theme-neon #m_aside_left .m-menu__section > .m-menu__section-icon,
body.button-theme-neon #m_aside_left .m-menu__nav > .m-menu__section:not(:has(.m-menu__section-text)) {
	display: none;
}

/* ---- AN ITEM A SEARCH OR A GROUP CHANGE TAKES AWAY folds to no height and fades; it clips only while it does -- */
body.button-theme-neon #m_aside_left .m-menu__nav li:is(.is-hidden, .is-unhiding) {
	overflow: clip;
}

body.button-theme-neon #m_aside_left .m-menu__nav li.is-hidden,
body.button-theme-neon #m_aside_left .m-menu__item.m-menu__item--open > .m-menu__submenu > .m-menu__subnav > .m-menu__item.is-hidden {
	height: 0;
	min-height: 0;
	margin-top: 0;
	margin-bottom: 0;
	opacity: 0;
	pointer-events: none;
	transition: height 0.3s ease-in, margin 0.3s ease-in, opacity 0.3s ease-in, translate 0.3s ease-in;
}

/* a group put away by a tile steps aside toward its own side of the tile row (design concept #6), and comes back
   from there when its tile is picked */
body.button-theme-neon #m_aside_left .m-menu__nav > li.is-hidden.is-before {
	translate: -16px 0;
}

body.button-theme-neon #m_aside_left .m-menu__nav > li.is-hidden.is-after {
	translate: 16px 0;
}

/* a render lays everything out where it belongs, with nothing sliding into place */
body.button-theme-neon #m_aside_left.is-still :is(li, .sidenav-mark, .m-menu__submenu, .m-menu__ver-arrow) {
	transition: none !important;
}

/* ---- WHAT A ROW CARRIES BESIDE ITS WORDS ----------------------------------------------------------------------- */

/* THE AGENCY MARK - the glyph in the lime, with no ground (on a lit row as well), the neon chip when pointed at.
   What it means is the legend's under the menu. */
body.button-theme-neon #m_aside_left .m-menu__link .agency_icon {
	--ag-bg: transparent;
	--ag-ink: var(--btn-accent);
	--ag-sh: none;
	--ag-ease: ease-in;

	display: inline-flex;
	float: right;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	margin-left: 8px;
	padding: 0;
	border-radius: 6px;
	background: var(--ag-bg);
	box-shadow: var(--ag-sh);
	color: var(--ag-ink);
	font-size: 14px;
	cursor: help;
	transition: background-color 0.3s var(--ag-ease), color 0.3s var(--ag-ease), box-shadow 0.3s var(--ag-ease);
}

body.button-theme-neon #m_aside_left .m-menu__link .agency_icon:hover {
	--ag-bg: var(--btn-accent);
	--ag-ink: var(--btn-brand);
	--ag-sh: var(--btn-hover-sh);
	--ag-ease: ease-out;
}

/* a first-level page with no list to open keeps the chevron's column - its 12px box and the row's 12px gap - so
   its agency mark stands in line with the marks on the rows that have one */
body.button-theme-neon #m_aside_left .m-menu__nav > .m-menu__item > .m-menu__link:not(:has(> .m-menu__ver-arrow)) .agency_icon {
	margin-right: 24px;
}

/* THE COUNT a Flows group and a category carry - the count chip, the accent on the brand ink */
body.button-theme-neon #m_aside_left .m-menu__link .uplink_count {
	position: static;
	display: inline-flex;
	float: right;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 22px;
	height: 20px;
	margin: 1px 0 0 8px;
	padding: 0 6px;
	border-radius: 6px;
	background: var(--btn-accent);
	color: var(--btn-brand);
	font-size: 13px;
	font-weight: 600;
	transition: background-color 0.3s var(--r-ease), color 0.3s var(--r-ease);
}

body.button-theme-neon #m_aside_left .m-menu__link .uplink_count > span {
	top: 0;
}

body.button-theme-neon #m_aside_left .m-menu__link:is(:hover, :focus-visible) .uplink_count {
	background: var(--btn-hover-ink);
	color: var(--btn-accent);
}

/* a Flow whose rules read a field from a disabled step, in the row's indent */
body.button-theme-neon #m_aside_left .m-menu__link > .uplink-cond-error {
	top: 50%;
	left: 8px;
	margin-top: -7px;
	font-size: 13px;
	line-height: 1;
}

/* THE SQUARES A ROW OFFERS UNDER THE POINTER - a Flow's menu, a web page's preview, an ATS tool's pin: icon-wash
   squares that come in with the pointer and take the neon under it, placed on the row's centre line without a
   transform, which would trap a Flow's menu under the rows after it. */
body.button-theme-neon #m_aside_left .m-menu__link > .uplink_dropdown {
	top: calc(50% - 13px);
	right: 8px;
}

body.button-theme-neon #m_aside_left .m-menu__link > .uplink_dropdown > .btn {
	opacity: 0;
	pointer-events: none;
}

body.button-theme-neon #m_aside_left .m-menu__link:hover > .uplink_dropdown > .btn,
body.button-theme-neon #m_aside_left .m-menu__link > .uplink_dropdown.show > .btn {
	opacity: 1;
	pointer-events: auto;
	--sq-ease: ease-out;
}

body.button-theme-neon #m_aside_left :is(.uplink_dropdown > .btn, .view_page_link > .view_page, .ats-pin-item > .ats-pin-btn) {
	--sq-bg: var(--btn-ico);
	--sq-ink: var(--btn-ico-ink);
	--sq-sh: none;
	--sq-ease: ease-in;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 6px;
	background: var(--sq-bg);
	box-shadow: var(--sq-sh);
	color: var(--sq-ink);
	font-size: 13px;
	text-decoration: none;
	transform: none;
	transition: opacity 0.3s var(--sq-ease), background-color 0.3s var(--sq-ease), color 0.3s var(--sq-ease), box-shadow 0.3s var(--sq-ease), rotate 0.3s var(--sq-ease);
}

body.button-theme-neon #m_aside_left :is(.uplink_dropdown > .btn, .view_page_link > .view_page, .ats-pin-item > .ats-pin-btn):hover {
	--sq-bg: var(--btn-accent);
	--sq-ink: var(--btn-hover-ink);
	--sq-sh: var(--btn-hover-sh);
	--sq-ease: ease-out;
}

body.button-theme-neon #m_aside_left :is(.uplink_dropdown > .btn, .view_page_link > .view_page) i {
	color: inherit;
	font-size: inherit;
}

/* the preview of a web page sits left of its agency mark */
body.button-theme-neon #m_aside_left .view_page_link > .view_page {
	position: absolute;
	top: calc(50% - 13px);
	right: 40px;
	opacity: 0;
	pointer-events: none;
}

body.button-theme-neon #m_aside_left .view_page_link:hover > .view_page {
	opacity: 1;
	pointer-events: auto;
	--sq-ease: ease-out;
}

/* THE ATS TOOLS PIN - out with the pointer, kept out once pinned, on the primary wash and turned */
body.button-theme-neon #m_aside_left .m-menu__nav .ats-pin-item > .m-menu__link {
	padding-right: 42px !important;
}

body.button-theme-neon #m_aside_left .ats-pin-item > .ats-pin-btn {
	top: 50%;
	right: 8px;
	margin-top: -13px;
	opacity: 0;
}

body.button-theme-neon #m_aside_left .ats-pin-item:hover > .ats-pin-btn,
body.button-theme-neon #m_aside_left .ats-pin-item.ats-pin-item--pinned > .ats-pin-btn {
	opacity: 1;
	--sq-ease: ease-out;
}

body.button-theme-neon #m_aside_left .ats-pin-item.ats-pin-item--pinned > .ats-pin-btn {
	--sq-bg: var(--btn-pri);
	--sq-ink: var(--btn-pri-ink);

	rotate: -45deg;
}

body.button-theme-neon #m_aside_left .ats-pin-item.ats-pin-item--pinned > .ats-pin-btn:hover {
	--sq-bg: var(--btn-accent);
	--sq-ink: var(--btn-hover-ink);
}

/* a pinned row glides to its new place (the partial's first-last-invert-play), on translate so nothing sits on a
   transform at rest - named through an open list, to outweigh the cascade */
body.button-theme-neon #m_aside_left .m-menu__item.m-menu__item--open > .m-menu__submenu > .m-menu__subnav > .ats-pin-item.is-flip {
	translate: 0 var(--pin-fy);
	transition: none;
}

body.button-theme-neon #m_aside_left .m-menu__item.m-menu__item--open > .m-menu__submenu > .m-menu__subnav > .ats-pin-item.is-flipping {
	translate: none;
	transition: translate 0.3s ease-out, opacity 0.3s ease-out, height 0.3s ease-out;
}

/* ---- THE LIME RULE ON THE OPEN PAGE - the header's underline, turned to run down the row and slide to the next.
   One element per menu (sidenav_place), laid over the row through --x --y --h measured inside the menu; while the
   rows move it rides with them untransitioned. */
body.button-theme-neon #m_aside_left .sidenav-mark {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 3px;
	height: var(--h, 0px);
	border-radius: 2px;
	background: var(--btn-accent);
	box-shadow: 0 0 12px var(--btn-accent);
	opacity: 0;
	pointer-events: none;
	transform: translate(var(--x, 0px), var(--y, 0px));
	transition: transform 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-in;
}

body.button-theme-neon #m_aside_left .sidenav-mark.is-on {
	opacity: 1;
	transition: transform 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out;
}

body.button-theme-neon #m_aside_left.is-tracking .sidenav-mark {
	transition: opacity 0.3s ease-out;
}

body.button-theme-neon #m_aside_left .sidenav-mark.is-placing {
	transition: none;
}

/* ---- GETTING STARTED'S PROGRESS - a white track on the gradient, filled in the accent ------------------------- */
body.button-theme-neon #m_aside_left .m-menu__nav > .m-menu__section.progress-gs-sidebar-wrap {
	display: block;
	min-height: 0;
	margin-bottom: 10px;
	padding: 0 14px !important;
}

body.button-theme-neon #m_aside_left .progress-gs-sidebar-wrap > .m-menu__section-text {
	margin-bottom: 10px !important;
}

body.button-theme-neon #m_aside_left .progress-gs-sidebar {
	height: 22px;
	margin: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.85) !important;
}

body.button-theme-neon #m_aside_left .progress-gs-sidebar .progress-bar {
	border-radius: 6px;
	background: var(--btn-accent) !important;
}

body.button-theme-neon #m_aside_left .progress-gs-sidebar .text {
	color: var(--btn-hover-ink);
	font-size: 13px;
	font-weight: 600;
	text-shadow: none;
}

/* ---- THE LEGEND - what the agency glyph means, at the end of the menu -------------------------------------------- */
body.button-theme-neon #m_aside_left .sidenav-legend {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 var(--sn-pad) 20px;
	padding: 12px 6px 0;
	box-shadow: inset 0 1px 0 var(--sn-rule);
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
	line-height: 1.35;
}

body.button-theme-neon #m_aside_left .sidenav-legend > i {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--btn-accent);
	font-size: 14px;
}

/* ---- THE JOB BOARD SETTINGS HEADER ------------------------------------------------------------------------------
   Its first row is the board being edited, in a tile, then the crumb; scrolled, the row is the sticky bar and holds
   the tile, the section's title and Save. The bar spans the page card rather than the window, so the menu beside it
   is never under it: the card starts the page's 10px gutter, the menu and the gap in from the left. */
body.button-theme-neon #m_aside_left ~ .m-wrapper #sticky-head.fixed > div {
	right: 10px;
	left: calc(10px + var(--sn-w) + var(--sn-gap));
	width: auto;
	height: 64px;
	padding: 0 30px;
	border: 0;
	border-radius: 0 0 20px 20px;
	box-shadow: 0 8px 20px rgba(16, 46, 72, 0.16);
}

body.button-theme-neon #sticky-head .es-head {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 32px;
}

body.button-theme-neon #sticky-head .es-board {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 12px 0 5px;
	border-radius: 6px;
	background: #f7f9fc;
	box-shadow: inset 0 0 0 1px #e3e9f0;
	color: #23384b;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

body.button-theme-neon #sticky-head .es-board__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

body.button-theme-neon #sticky-head .es-board__logo :is(svg, img) {
	width: 22px;
	max-width: 22px;
	height: 22px;
}

body.button-theme-neon #sticky-head .es-crumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #8ba0b3;
	font-size: 14px;
	white-space: nowrap;
}

body.button-theme-neon #sticky-head .es-crumb__root {
	color: #8ba0b3;
	transition: color 0.3s ease-in;
}

body.button-theme-neon #sticky-head .es-crumb__root:hover {
	color: var(--btn-brand);
	text-decoration: none;
	transition: color 0.3s ease-out;
}

body.button-theme-neon #sticky-head .es-crumb__sep {
	font-size: 13px;
}

body.button-theme-neon #sticky-head .es-crumb__group {
	color: #4f6f8d;
	font-weight: 500;
}

body.button-theme-neon #sticky-head .es-crumb:has(> .es-crumb__group:empty) > .es-crumb__sep {
	display: none;
}

/* THE AGENCY PILL beside an agency-level page's title, in the menu's own pairing - the accent with the brand ink -
   in the title and in the bar alike. Its glyph sits in the flex line, so the old nudges come off. */
body.button-theme-neon :is(.solution-edit-header, #sticky-head) .agency_span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	margin: 0;
	padding: 0 12px;
	border-radius: 6px;
	background: var(--btn-accent);
	color: var(--btn-brand);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
	cursor: help;
}

body.button-theme-neon :is(.solution-edit-header, #sticky-head) .agency_span > i {
	position: static;
	color: inherit !important;
	font-size: 14px !important;
}

/* A PAGE PICKED IN A KEPT MENU brings its title in, the way the concept's page card does - never on a first draw */
body.button-theme-neon .solution-edit-header .edit-solution-section > .title.is-arriving {
	animation: sidenav-title-arrive 0.3s ease-out;
}

@keyframes sidenav-title-arrive {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* THE BAR - the tile, then the title on a divider, then Save at the far end; the crumb stays with the page */
body.button-theme-neon #sticky-head.fixed .es-head {
	gap: 18px;
	height: 100%;
}

body.button-theme-neon #sticky-head.fixed .es-crumb {
	display: none;
}

body.button-theme-neon #sticky-head.fixed .es-board + .head-solution-section,
body.button-theme-neon #sticky-head.fixed .es-board ~ .head-solution-section {
	padding-left: 18px;
	box-shadow: inset 1px 0 0 #e3e9f0;
}

body.button-theme-neon #sticky-head.fixed .head-solution-section .m-subheader__title {
	margin: 0;
	padding: 0;
	color: #5b7e9f !important;
	font-size: 20px !important;
	font-weight: 600;
	line-height: 1.3;
}

body.button-theme-neon #sticky-head.fixed .head-solution-section .title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

body.button-theme-neon #sticky-head.fixed .head-solution-section .title > i {
	position: static;
	margin: 0;
	padding: 0;
	color: var(--btn-brand) !important;
	font-size: 20px !important;
	line-height: 1;
}

body.button-theme-neon #sticky-head.fixed .header_buttons .row {
	margin: 0;
}

body.button-theme-neon #sticky-head.fixed .header_buttons .col-12 {
	padding: 0;
}