input.clear {
    padding: 0;
    margin: 0;
    border-radius: 0;
    outline: none;
    border: none;
    background-color: transparent;
}

/* #region Navigation Breadcrumbs */

.brd-nav-cont {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
@scope (html) to ([popover],[dialog]) {
    .light-mode .brd-nav-cont * {
        font-weight: 600 ;
    }
}

@scope (.brd-nav-cont) to ([popover],[dialog]) {
    ol.brd-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    ol.brd-nav > * {
        white-space: nowrap;
    }
    ol.brd-nav > li {
        display: flex;
        align-items: center;
        gap: var(--style-padding-small);
    }
    ol.brd-nav li:not(:first-of-type) {
        padding-left: var(--style-padding-small);
    }
    ol.brd-nav li:not(:first-of-type, .tail)::before {
        content: '\00203A';
        color: var(--style-text-tertiary);
    }
    ol.brd-nav > li:first-child > header {
        display: flex;
        align-items: center;
        gap: var(--style-padding-small);
    }
    ol.brd-nav > li > header > svg {
        color: var(--style-text-tertiary);
    }
    ol.brd-nav li.tail {
        padding-left: var(--style-padding-tiny);
    }

    .brd-views {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--style-padding-tiny);
    }
    .brd-views:not(:empty) {
        margin-left: var(--style-padding-medium);
        padding-left: var(--style-padding-medium);
        border-left: var(--border-regular);
    }

    .nav-brd-item {
        display: flex;
        align-items: center;
        color: var(--color-text-4);
    }
    .nav-brd-item .icon:empty {
        display: none;
    }

    .nav-brd-item a,
    .nav-brd-item button {
        color: var(--color-text-3);
        outline-width: 1px;
    }
    .nav-brd-item a:hover,
    .nav-brd-item button:hover {
        color: var(--color-text-2);
    }
    .nav-brd-item .weak {
        color: var(--color-text-5);
    }
    .nav-brd-item a:hover .weak,
    .nav-brd-item button:hover .weak {
        color: var(--color-text-3);
    }
    .nav-brd-item strong,
    .nav-brd-item .strong,
    .nav-brd-item:not(:has(.strong, strong)) {
        color: var(--color-text-2);
    }
    .nav-brd-item a:hover strong,
    .nav-brd-item a:hover .strong,
    .nav-brd-item button:hover strong,
    .nav-brd-item button:hover .strong {
        color: var(--color-text-1);
    }

    .nav-brd-item button.toggle,
    .nav-brd-item a.toggle {
        border: var(--border-regular)
    }
    .nav-brd-item button.toggle.active,
    .nav-brd-item a.toggle.active {
        border-color: var(--style-background-accent-thick);
        background-color: var(--style-background-accent-thin);
    }
    .nav-brd-item button.toggle.inactive span,
    .nav-brd-item a.toggle:not(.active) span {
        color: var(--color-text-4);
    }
    .nav-brd-item button.toggle.inactive .icon,
    .nav-brd-item button.toggle.inactive .icon *,
    .nav-brd-item a.toggle:not(.active) .icon,
    .nav-brd-item a.toggle:not(.active) .icon * {
        color: var(--color-text-5);
    }
    .nav-brd-item button.toggle.inactive:hover span,
    .nav-brd-item a.toggle:not(.active):hover span {
        color: var(--color-text-2);
    }
    .nav-brd-item button.toggle.inactive:hover .icon,
    .nav-brd-item button.toggle.inactive:hover .icon *,
    .nav-brd-item a.toggle:not(.active):hover .icon,
    .nav-brd-item a.toggle:not(.active):hover .icon * {
        color: var(--color-text-3);
    }

    .nav-brd-item a.live.active {
        background-color: transparent;
        border: 1px solid var(--color-red) !important;
        border-radius: var(--style-border-radius);
        box-sizing: content-box;
        max-height: var(--style-label-height);
        height: var(--style-label-height);
        padding: 0 2px;
    }

    .nav-brd-item a.live.active .nav-brd-lbl {
        height: calc(var(--style-label-height) - 4px);
        border-radius: 2px;
        background-color: var(--color-red);
        padding: 0 7px 0 5px !important;
    }
    .nav-brd-item a.live.active * {
        color: #fff !important;
    }

    /* .nav-brd-item a.live {
        background-color: transparent;
        border: 1px solid var(--color-red) !important;
        border-radius: var(--style-border-radius);
        box-sizing: content-box;
        max-height: var(--style-label-height);
        height: var(--style-label-height);
        padding: 0 2px;
    }
    .nav-brd-item a.live .nav-brd-lbl {
        height: calc(var(--style-label-height) - 4px);
        border-radius: 2px;
        background-color: var(--color-red);
        padding: 0 7px 0 5px !important;
    }
    .nav-brd-item a.live * {
        color: #fff !important;
    }
    .nav-brd-item a.live:not(.active) {
        border-color: var(--color-text-7) !important;
    }
    .nav-brd-item a.live:not(.active) .nav-brd-lbl {
        background-color: transparent;
    }
    .nav-brd-item a.live:not(.active) * {
        color: var(--color-text-5);
    } */


    .nav-brd-lbl {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        flex-wrap: nowrap;
        gap: var(--style-padding-tiny);
        overflow: hidden;
        height: var(--style-label-height);
    }
    .nav-brd-lbl .icon,
    .nav-brd-lbl .icon > * {
        height: 16px;
        width: 16px;
        display: flex;
        line-height: 0;
    }
    
    .nav-brd-lbl .icon > svg:not(:has(.icon-fill, .icon-stroke)) {
        border-radius: 3px;
    }
    .nav-brd-lbl .label {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: -1.5px;
    }
    button .nav-brd-lbl span:not(> span) {
        line-height: 0;
    }
}



/* #endregion */

/* #region Buttons */
button,
a.button {
    display: flex;
    align-items: center;
    min-height: 24px;
    min-width: 24px;
    gap: var(--style-padding-tiny);
    justify-content: space-between;
    border-radius: var(--style-border-radius);
    white-space: nowrap;
    padding-left: var(--style-padding-tiny);
    padding-right: var(--style-padding-tiny);
    font-weight: 500;
}
.light-mode button,
.light-mode a.button {
    font-weight: 600;
}
button .button-content,
a.button .button-content {
    display: flex;
    align-items: center;
}
button .icon,
a.button .icon {
    display: flex;
    align-items: center;
}
button:not(:disabled),
button:not(:disabled) * {
    cursor: pointer !important;
}
button:disabled,
button:disabled * {
    cursor: default;
}


button,
button * {
    color: var(--style-text-primary);
    font-weight: 500;
}


button > .centre,
button > .center,
.button-body > .centre,
.button-body > .center,
a.button > .centre,
a.button > .center {
    display: flex;
    justify-content: center;
    min-width: 18px;
    align-items: center;
    justify-self: start;
}
button:empty,
button:not(:has(> *)),
a.button:empty,
a.button:not(:has(> *)) {
    padding-left: var(--style-padding-small);
    padding-right: var(--style-padding-small);
}
button > *,
a.button > * {
    align-items: center;
    display: flex;
    gap: var(--style-padding-tiny);
}
button:focus,
a.button:focus {
    outline: 1.5px solid var(--color-accent);
    outline-offset: -1px;
}

button:focus:focus:not(:focus-visible),
a.button:focus:focus:not(:focus-visible) {
    outline: none;
}


button:hover:not(:disabled),
a.button:hover:not(:disabled) {
    background-color: var(--style-background-accent-thin);
}

a.button .leading,
a.button .center,
a.button .centre,
a.button .trailing {
    display: flex;
    align-items: center;
    gap: var(--style-padding-small);
}

button > .leading,
.button-body > .leading,
a.button > .leading {
    justify-self: start;
    padding-left: var(--style-padding-tiny);
    align-items: center;
}
button > .centre:only-child,
a.button > .centre:only-child,
button > .center:only-child,
a.button > .center:only-child {
    padding: 0 var(--style-padding-small);
}

button:has(> .icon:only-child),
a.button:has(> .icon:only-child),
button:has(> .icon:only-child),
a.button:has(> .icon:only-child) {
    padding: 0;
}

button > .trailing,
.button-body > .trailing,
a.button > .trailing {
    justify-self: end;
    padding-right: var(--style-padding-tiny);
    align-items: center;
}

button.flex-grow,
a.button.flex-grow {
    flex-grow: 1;
    width: 100%;
}

button span.shortcut-key {
    color: var(--style-text-quarternary);
    font-size: 12px;
    font-family: var(--font-mono);
    padding-right: var(--style-padding-tiny);
}
button > *:only-child,
a.button > *:only-child {
    flex-grow: 1;
}
button:not(.link) > span:only-child,
a.button:not(.link) > span:only-child,
button:not(.link) > div:only-child,
a.button:not(.link) > div:only-child {
    padding-left: var(--style-padding-tiny);
    padding-right: var(--style-padding-tiny);
}

/* --------------------Button Styles-------------------- */

/* #region Button Plain */

button.plain {
    border: none;
    background-color: var(--style-background-accent-ultrathin);
}
button:not(:focus, :focus-visible) {
    outline: none !important;
}
button:focus {
    outline-color: var(--color-accent);
}
/* #endregion */

/* #region Button Link  */

@scope (body) to ([popover],[dialog]) {
    button.link {
        opacity: 0.8;
        transition-duration: var(--anim-duration-ultrashort);
        display: inline;
    }
    button.link:hover,
    button:has([popover]:popover-open, [dialog]) {
        opacity: 1;
    }
}



/* #endregion */

/* #region Button Bordered */

button.bordered {
    border: var(--border-regular);
}

button.bordered:disabled {
    color: var(--style-text-quarternary);
    opacity: 0.6;
}

/* #endregion */

/* #region Button Prominent */

button.prominent {
    outline-offset: 2px;
    background-color: var(--style-background-accent-thin);
}
button.prominent:hover:not(:disabled) {
    background-color: var(--style-background-accent-regular);
}

button.prominent:focus,
button.prominent:focus * {
    color: var(--style-text-primary);
}

/* #endregion */

/* #region Button Bordered Prominent */

a.button.bordered-prominent,
button.bordered-prominent {
    background-color: var(--style-background-accent-ultrathin);
    border: var(--border-regular);
    color: var(--style-text-secondary);
}

a.button.bordered-prominent:hover:not(:disabled),
button.bordered-prominent:hover:not(:disabled) {
    background-color: var(--style-background-accent-thin);
    border-color: var(--style-background-accent-thick);
    color: var(--style-text-primary);
}

a.button.bordered-prominent:disabled,
button.bordered-prominent:disabled {
    color: var(--style-text-quarternary);
    opacity: 0.6;
}

/* #endregion */



/* #region Button Roles */

button.destructive,
button.primary,
button.normal,
button.cancel {
    border: none;
}

/* #region Destructive */

button.destructive,
button.destructive > * {
    color: var(--style-role-destructive-accent-dark);
    font-weight: 600;
}
button.destructive {
    background-color: var(--style-role-destructive-background);
}

button.prominent.destructive > *,
button.bordered-prominent.destructive > * {
    color: var(--style-role-destructive-accent) !important;
    font-weight: 400;
}


button.destructive {
    outline-color: var(--style-role-destructive-background);
    outline-offset: 1.5px;
}

button.destructive:disabled {
    opacity: 0.5;
}
button.destructive:hover:not(:disabled) {
    background-color: var(--style-role-destructive-background-hover);
}

/* #endregion */

/* #region Primary */

button.primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent-light);
    outline-offset: 2.5px;
    color: var(--color-accent-text);
}
button.primary * {
    color: var(--color-accent-text);
}
button.primary:hover {
    background-color: var(--color-accent-hover) !important;
}
button.primary:focus {
    outline-color: var(--color-accent);
}

button.primary:disabled {
    background-color: var(--style-background-accent-thin);
    color: var(--style-text-quarternary);
    opacity: 0.6;
}
button.primary.bordered,
button.primary.bordered-prominent {
    border: 1.5px solid var(--style-background-accent-thick);
}

/* #endregion */

/* #endregion */

/* #region Button Link */

button.link {
    display: inline;
    background-color: transparent !important;
    padding: 0;
    font-weight: 500;
    color: var(--style-text-tertiary);
}
button.link:hover {
    color: var(--style-text-primary);
}
button.link:focus {
    outline: none;
    text-decoration: underline;
    color: var(--style-text-primary);
}
button.link:focus:not(:focus-visible) {
    text-decoration: none;
}

/* #endregion */


/* #region Menu Picker */

.menu-picker-wrap {
    display: flex;
}
.menu-picker-wrap.flex-grow {
    width: 100%;
}


/* #endregion */


/* #region Generic Menu  */

.generic-menu {
  border-radius: var(--style-border-radius-tiny);
}

.generic-menu-popover {  
  display: block;
  max-height: inherit;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  border-radius: var(--style-border-radius-tiny);
  border: var(--border-regular);
  background-color: var(--style-background-tertiary);
}
.generic-menu-popover-content {
  padding: var(--style-padding-tiny);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.generic-menu-popover-content button {
  width: 100%;
}

.generic-filter-item .filter-operator {
  font-weight: 500;
}
.generic-filter-item button.filter-operator {
  border-radius: 0 !important;
}

.generic-menu-content {
  border-radius: var(--style-border-radius-tiny);
  border: var(--border-regular);
  background-color: var(--style-background-tertiary);
  padding: var(--style-padding-tiny);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--popover-shadow);
}

.generic-menu-content form {
  display: contents;
}

.generic-menu-content button {
  background-color: transparent;
}

.generic-menu span.heading {
  padding: var(--style-padding-tiny) var(--style-padding-small) 0;
  font-size: var(--font-size-small);
  color: var(--style-text-quarternary);
  font-weight: 600;
}

.generic-menu hr {
  background-color: var(--style-background-accent-thin);
  display: block;
  height: 1px;
  margin: 2px var(--style-padding-small);
}
.generic-menu.sub-menu {
  padding-top: 0;
  margin-top: calc(var(--style-padding-tiny) * -1);
}

.generic-menu span.label {
    padding-right: var(--style-padding-small);
}


/* #region Generic Menu Item */

.generic-menu-item {
  border-radius: var(--style-border-radius);
  transition-duration: var(--anim-duration-ultrashort);
  
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.generic-menu-item.active {
  background-color: var(--style-background-accent-thin);
}

.generic-menu-item:hover {
  background-color: var(--style-background-accent-regular);
}

.generic-menu-item .leading,
.generic-menu-item .trailing {
  display: flex;
  align-items: center;

}



/* #endregion */

/* #endregion */


/* #region Text Toggle Button */




.text-toggle-button.inactive {
    color: var(--style-text-quarternary);
    border-color: transparent;
}
.text-toggle-button.inactive:hover {
    background-color: var(--style-background-accent-ultrathin);
}
.text-toggle-button.active.bordered,
.text-toggle-button.active.bordered-prominent {
    background-color: var(--style-background-accent-thin);
    border: 1px solid var(--style-background-accent-thick);
    color: var(--style-text-primary);
}
.text-toggle-button.bordered-prominent:disabled {
    color: var(--style-text-quarternary);
}
.text-toggle-button:not(:disabled):hover {
    color: var(--style-text-primary);
}
.text-toggle-button.bordered-prominent {
    color: var(--style-text-secondary);
}

.text-toggle-button.bordered-prominent.active {
    background-color: var(--style-background-accent-regular);
}
.text-toggle-button.bordered-prominent:disabled {
    opacity: 0.5;
}

/* #endregion */

/* #region Button Focus */

button:focus:not(:focus-visible) {
    outline-color: transparent;
}

button .icon-stroke {
    stroke:  currentColor;
    transition-property: stroke;
    transition-duration: var(--anim-duration-ultrashort);
}
button .icon-fill {
    fill: currentColor;
    transition-property: fill;
    transition-duration: var(--anim-duration-ultrashort);
}

button:disabled .icon-stroke {
    stroke:  var(--style-text-quarternary);
}
button:disabled .icon-fill {
    fill:  var(--style-text-quarternary);
}


/* #endregion */

/* --------------------Button Styles-------------------- */



/* #region Collapse Icon */

.collapse-icon {
    transform: translateY(0px) rotateZ(-90deg);
    transition-duration: var(--anim-duration-short);
}
.collapse-icon.open {
    transform: translateY(0px) rotateZ(0deg);
}

/* #endregion */

/* #endregion */

/* #region Control Item Checkbox */

.label-switch {
    height: var(--icon-size-tiny);
    width: calc(var(--icon-size-tiny) * 1.5);
}

.control-item input[type="checkbox"],
.label-switch input[type="checkbox"] {
    appearance: none;
    border: none;
    height: var(--icon-size-tiny);
    width: calc(var(--icon-size-tiny) * 1.5);
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.control-item input[type="checkbox"]::before,
.control-item input[type="checkbox"]::after,
.label-switch input[type="checkbox"]::before,
.label-switch input[type="checkbox"]::after {
    content: '';
    display: block;
    position: absolute;
    transition-duration: var(--anim-duration-medium);
}

.control-item input[type="checkbox"]::before,
.label-switch input[type="checkbox"]::before {
    height: var(--icon-size-tiny);
    width: calc(var(--icon-size-tiny) * 1.5);
    background-color: var(--style-background-accent-regular);
    top: 0;
    left: 0;
    border-radius: calc(var(--icon-size-tiny) / 2);
}

.control-item input[type="checkbox"]:checked:before,
.label-switch input[type="checkbox"]:checked::before {
    background-color: var(--color-accent);
}

.control-item input[type="checkbox"]::after,
.label-switch input[type="checkbox"]::after {
    height: calc(var(--icon-size-tiny) - 6px);
    width: calc(var(--icon-size-tiny) - 6px);
    top: 3px;
    left: 3px;
    background-color: var(--color-accent-text);
    border-radius: 50%;
    box-shadow:
        lch(0 0 0 / 0.22) 0px 0px 5px,
        lch(0 0 0 / 0.12) 0px 2px 4px,
        lch(0 0 0 / 0.10) 0px 1px 2px;
}

.control-item input[type="checkbox"]:checked::after,
.label-switch input[type="checkbox"]:checked::after {
    transform: translateX(calc(var(--icon-size-tiny) / 2));
}

.control-item input[type="checkbox"][disabled],
.label-switch input[type="checkbox"][disabled] {
    cursor: default;
}

.control-item input[type="checkbox"][disabled]::before,
.label-switch input[type="checkbox"][disabled]::before {
    background-color: var(--style-background-accent-regular);
}

.control-item input[type="checkbox"][disabled]::after,
.label-switch input[type="checkbox"][disabled]::after {
    background-color: var(--style-background-accent-thick);
}

.control-item input:focus,
.label-switch input:focus {
    outline: 1.5px solid var(--color-accent);
    outline-offset: 1.5px;
    border-radius: calc(var(--icon-size-tiny) / 2);
}
.control-item input:focus:not(:focus-visible),
.label-switch input:focus:not(:focus-visible) {
    outline-color: transparent;
}

/* #endregion */

/* #region Segmented Picker Controls */

.control-segmented-picker {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: 0;
    flex-shrink: 1;
    width: auto;
    border-radius: var(--style-border-radius);
    border: var(--border-regular);
    overflow: visible;
}
.control-segmented-picker * {
    font-weight: 500;
    letter-spacing: 0.03em;
}
.control-segmented-picker.full-width {
    width: 100%;
}

.control-segmented-picker button.segment-button {
    outline-offset: 1px;
    outline-width: 1.5px;
}

.control-segmented-picker.full-width button.segment-button {
    display: flex;
    width: 0;
    flex: 1 1 0;
    justify-content: center;
}

.control-segmented-picker button.segment-button {
    transition: var(--anim-duration-short);
    transition-property: background-color;
    padding: 6px var(--style-padding-medium);
    color: var(--style-text-tertiary);
    text-align: center;
    cursor: pointer;
}

.control-segmented-picker.reduce-height button.segment-button {
    padding: 0 4px;
    font-size: var(--font-size-paragraph);
}

.control-segmented-picker button.segment-button:hover {
    color: var(--style-text-primary);
    background-color: transparent;
}

.control-segmented-picker button.segment-button.active {
    background-color: var(--style-background-accent-regular);
    color: var(--style-text-primary);
    cursor: default;
}

.control-segmented-picker.padding button.segment-button {
    padding-left: var(--style-padding-medium);
    padding-right: var(--style-padding-medium);
}


.control-segmented-picker.full-width button.segment-button {
    display: flex;
    width: 0;
    flex: 1 1 0;
    justify-content: center;
}

.control-segmented-picker button.segment-button {
    transition: var(--anim-duration-short);
    transition-property: background-color;
    padding: 6px var(--style-padding-medium);
    color: var(--style-text-tertiary);
    text-align: center;
    cursor: pointer;
    border-radius: calc(var(--style-border-radius) - 1px);
}

.control-segmented-picker.reduce-height button.segment-button {
    padding: 0 4px;
    font-size: var(--font-size-paragraph);
    height: var(--style-label-height);
}

.control-segmented-picker button.segment-button:hover {
    color: var(--style-text-primary);
    background-color: transparent;
}

.control-segmented-picker button.segment-button.active {
    background-color: var(--style-background-accent-regular);
    color: var(--style-text-primary);
    cursor: default;
}


.control-segmented-picker.padding button.segment-button {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* #endregion */

/* #region Popover Control Panel */

.popover-control-panel {
    background-color: var(--style-background-tertiary);
  border-radius: var(--style-border-radius-tiny);
  border: var(--border-regular);
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 320px;
  max-width: 100%;
  max-height: 100%;
}

.popover-control-panel .icon-fill {
    fill: currentColor;
}
.popover-control-panel .icon-stroke {
    stroke: currentColor;
}

.popover-control-section {
    display: flex;
    flex-direction: column;
    padding: var(--style-padding-medium);
}

.popover-control-section.icon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--style-padding-small);
}
.popover-control-section:nth-of-type(n+1) {
    border-top: var(--border-regular);
}

.popover-control-section.control-grid {
    display: grid;
    gap: var(--style-padding-small);
    grid-template-columns: 16px auto 1fr 28px;
    align-items: center;
}
.popover-control-section.vertical {
    display: flex;
    flex-direction: column;
    gap: var(--style-padding-small);
}



/* #region Popover Icon Grid */

.popover-control-section.icon-grid .text-toggle-button {
    justify-content: center;
    line-height: 1.2 !important;
}
.popover-control-section.icon-grid .text-toggle-button .centre {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    padding: 6px 0;
}
.popover-control-section.icon-grid .text-toggle-button svg {
    width: 20px !important;
    height: 20px !important;
}

/* #endregion */

/* #region Popover Control Grid Group */

.popover-control-grid-item {
    display: contents;
}
.popover-control-grid-item > .icon {
    display: flex;
    align-items: center;
}
.popover-control-grid-item > .icon svg {
    opacity: 0.7;
}
.popover-control-grid-item > .control {
    margin-left: var(--style-padding-small);
    justify-items: end;
}

.popover-control-grid-item > .label * {
    color: var(--style-text-tertiary);
}

/* #endregion */

/* #region Popover Toggle Item */

.popover-control-grid-item.toggle-only {
    display: flex;
    grid-column-start: 1;
    grid-column-end: -1;
    align-items: center;
    justify-content: space-between;
    padding-top: 2px;
    padding-bottom: 2px;
}
.popover-control-grid-item.toggle-only:first-child {
    padding-top: 0;
}
.popover-control-grid-item.toggle-only:last-child {
    padding-bottom: 0;
}
.popover-control-grid-item.toggle-only.indent {
    padding-left: calc(16px + var(--style-padding-small));
}
.popover-control-grid-item.toggle-only .icon {
    margin-right: var(--style-padding-small);
}
.popover-control-grid-item.toggle-only label {
    flex-grow: 1;
    overflow: hidden;
    text-wrap: nowrap;
}
.popover-control-grid-item.toggle-only .control {
    width: 28px;
    justify-self: end;
}

/* #endregion */

/* #region Popover Toggle Group */

.popover-control-toggle-group {
    display: flex;
    flex-direction: column;
    gap: var(--style-padding-small);
}

.popover-control-toggle-group .toggles {
    max-width: 320px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    flex-wrap: wrap;
}
.popover-control-toggle-group .text-toggle-button,
.popover-control-toggle-group .text-toggle-button * {
    transition-duration: var(--anim-duration-ultrashort);
}
.popover-control-toggle-group .text-toggle-button.inactive {
    background-color: var(--style-background-accent-ultrathin);
    border: 1px solid var(--style-background-accent-regular);
}
.popover-control-toggle-group .text-toggle-button.inactive * {
    color: var(--style-text-tertiary);
}
.popover-control-toggle-group .text-toggle-button.active {
    border: 1px solid var(--style-background-accent-thick);
    background-color: var(--style-background-accent-regular);
}
.popover-control-toggle-group .text-toggle-button:hover,
.popover-control-toggle-group .text-toggle-button:hover * {
    color: var(--style-text-primary);
}
.popover-control-toggle-group .text-toggle-button.inactive:hover {
    border-color: var(--style-background-accent-thick);
}
.popover-control-toggle-group .text-toggle-button.active:hover {
    background-color: var(--style-background-accent-thick);
}

/* #endregion */

/* #endregion */

/* #region Date Picker Month */

.dpk-main-wrap {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    flex-grow: 0;

}
.dpk-main-wrap.single {
    width: calc(var(--date-picker-month-cell) * 8  + (var(--style-padding-medium) * 2));
}
.dpk-main-wrap.double {
    width: calc((var(--date-picker-month-cell) * 16) + var(--style-padding-large) + (var(--style-padding-medium) * 2));
}

.dpk-main-wrap :disabled svg .icon-stroke {
    stroke: var(--style-text-quarternary);
}
.dpk-main-wrap :disabled svg .icon-fill {
    fill: var(--style-text-quarternary);
}

.dpk-main-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--style-padding-medium);
    padding: var(--style-padding-medium);
    border-bottom: var(--border-regular);
}
.dpk-main-wrap.double .dpk-main-detail {
    grid-template-columns: 1fr 1fr;
}

.dpk-main-picker {
    padding: 0 var(--style-padding-medium);
    height: 320px;
}

.dpk-mnth-single {
    display: flex;
    flex-direction: row;
    margin-top: var(--style-padding-medium);
}

.dpk-mnth-pair {
    display: grid;
    grid-template-columns: repeat(2, calc(var(--date-picker-month-cell) * 8));
    gap: var(--style-padding-large);
    height: 100%;
    
}
.dpk-mnth-pair.calendars {
    margin-top: var(--style-padding-medium);
}

.dpk-mnth-wrap {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    gap: var(--style-padding-small);
    height: 100%;
    overflow: hidden;
}
.dpk-mnth-wrap * {
    font-weight: 600;
}

.dpk-mnth-wrap .header {
    display: grid;
    grid-template-columns: auto 1fr;
    padding-top: var(--style-padding-tiny);
}
.dpk-mnth-wrap .header .leading,
.dpk-mnth-wrap .header .trailing {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-self: center;
}
.dpk-mnth-wrap .header .leading {
    padding-left: var(--style-padding-medium);
    justify-content: start;
}
.dpk-mnth-wrap .header .trailing {
    justify-content: end;
    padding-right: var(--style-padding-tiny);
}

table.dpk-mnth {
    border-collapse: collapse;
    border: none;
    width: calc(var(--date-picker-month-cell) * 7);
}
table.dpk-mnth.nr-week {
    width: calc(var(--date-picker-month-cell) * 8);
}
table.dpk-mnth * {
    text-align: center;
}
table.dpk-mnth th {
    text-align: center;
    padding-bottom: 6px;
    border-bottom: var(--border-regular);
    border-bottom-width: 1.5px;
    color: var(--style-text-tertiary);
}
table.dpk-mnth td {
    height: var(--date-picker-month-cell) !important;
    width: var(--date-picker-month-cell) !important;
    position: relative;
}
table.dpk-mnth td::before {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    border-radius: 8px;
    border: 1px solid transparent;
}

table.dpk-mnth button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: transparent;
    display: inline-flex;
    justify-content: center;
    border: 1px solid transparent;
    color: var(--style-text-primary);
    letter-spacing: 0.04em;
}

table.dpk-mnth td.disabled span {
    color: var(--style-text-quarternary) !important;
    opacity: 0.4 !important;
}
table.dpk-mnth td.out-month span {
    color: var(--style-text-quarternary) !important;
    opacity: 0.2 !important;
}
table.dpk-mnth td.weekend button {
    color: var(--style-text-quarternary);
}

table.dpk-mnth td button:hover {
    background-color: var(--color-accent);
    color: var(--style-text-primary);
}
table.dpk-mnth td.today:not(.selected)::before {
    border-color: var(--style-background-accent-thick);
    border-style: dashed;
    border-width: 1.5px;
}
table.dpk-mnth td.selected.partial::before {
    border-style: dashed;
    border-width: 1.5px;
}
table.dpk-mnth td.selected::before {
    background-color: var(--style-background-accent-thin);
    border-color: var(--style-background-accent-ultrathick);
    border-width: 1px;
}


table.dpk-mnth td.selected.out-month::before {
    background-color: var(--style-background-accent-ultrathin);
    border-color: var(--style-background-accent-regular);
}
table.dpk-mnth td.selected.first-in-week:not(.first-in-range, .last-in-range, .single)::before {
    mask-image: linear-gradient(90deg,rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 16px);;
}
table.dpk-mnth td.selected.last-in-week:not(.first-in-range, .last-in-range, .single)::before {
    mask-image: linear-gradient(90deg,rgba(0, 0, 0, 1) calc(100% - 16px), rgba(0, 0, 0, 0) 100%);;
}



table.dpk-mnth td.selected.first-in-range::before {
    right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
table.dpk-mnth td.selected.last-in-range::before {
    left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}
table.dpk-mnth td.selected:not(.first-in-range, .last-in-range, .single)::before {
    border-radius: 0;
    border-right: none;
    border-left: none;
    left: 0;
    right: 0;
}

table.dpk-mnth td.nrwk button {
    color: var(--style-text-quarternary);
}
table.dpk-mnth td.nrwk button:hover {
    background-color: var(--style-background-accent-regular);
}
table.dpk-mnth td.nrwk.disabled span {
    color: var(--style-text-quarternary);
}

.dpk-group-selector {
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--style-padding-small);
    scroll-snap-type: y mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    height: 100%;
}
.dpk-group-selector > * {
    padding-top: var(--style-padding-large);
}
.dpk-group-selector > :last-child {
    padding-bottom: var(--style-padding-large);
}

.dpk-group {
    scroll-snap-align: start;
}
.dpk-grp-header {
    margin-bottom: var(--style-padding-small);
    color: var(--style-text-tertiary);
}
.dpk-grp-content {
    display: grid;
    gap: var(--style-padding-small);
}
.dpk-grp-content.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}
.dpk-grp-content.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.dpk-grp-content button {
    justify-content: center;
    text-align: center;
}
.dpk-grp-content button span {
    justify-content: center;
}

.dpk-state-picker > * {
    height: 30px;
    width: 100%;
}
.dpk-state-value {
    border: var(--border-regular);
    justify-content: end;
    display: flex;
    align-items: center;
    gap: var(--style-padding-tiny);
    padding: 0 var(--style-padding-small);
    border-radius: var(--style-border-radius);
    height: 30px;
}

.dpk-state-value.optional {
    padding-right: var(--style-padding-tiny);
}
.dpk-state-value button.clear-date {
    background-color: transparent !important;
}
.dpk-state-value button.clear-date:hover svg .icon-fill {
    fill-opacity: 0.8;
}

.dtp-icon-style .icon-stroke {
    stroke: var(--style-text-tertiary);
}
.dtp-icon-style .icon-fill {
    fill: var(--style-text-tertiary);
}

.dpk-button-wrap {
    display: grid;
    gap: 0;
}
.dpk-button-wrap.single {
    grid-template-columns: 28px 148px;
}
.dpk-button-wrap.single.optional {
    grid-template-columns: 28px 148px 28px;
}
.dpk-button-wrap.multi {
    grid-template-columns: 28px 224px;
}
.dpk-button-wrap.multi.optional {
    grid-template-columns: 28px 224px 28px;
}

.dpk-button-wrap > .control-menu > button {
    width: 100%;
}
.dpk-button-wrap > .control-menu > button span {
    justify-content: end;
}
.dpk-button-wrap > .control-menu > button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.dpk-button-wrap.optional > .control-menu > button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;   
}
.dpk-button-wrap > .control-menu > button > * {
    justify-content: end;
}
.dpk-button-wrap.optional > button.clear-date {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}
.dpk-button-wrap.optional > button.clear-date .icon-stroke {
    stroke: var(--style-text-tertiary);
}
.dpk-button-wrap.optional > button.clear-date:hover .icon-stroke {
    stroke: var(--style-text-primary);
}

.dpk-button-wrap .range-label > *:nth-of-type(n+2) {
    padding-left: var(--style-padding-tiny);
}

.dpk-button-wrap .dtp-marker-icon {
    border: var(--border-regular);
    border-right: none;
    width: 100%;
    border-top-left-radius: var(--style-border-radius);
    border-bottom-left-radius: var(--style-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}


/* #endregion */

/* #region Checkbox Vector */
.veckbx.inact * {
    transition-duration: var(--anim-duration-ultrashort);
}
.veckbx.inact .bx {
    stroke: var(--color-accent);
}
.veckbx.act .bx {
    fill: var(--color-accent);
}
.veckbx.inact .ln {
    stroke: transparent;
}
.veckbx.act .ln {
    stroke: var(--color-accent-text);
}

/* #endregion */

/* #region Custom Input with Format */


.input-cust-format {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    font: inherit;
}
.input-cust-format.button {
    background-color: var(--style-background-accent-ultrathin);
    height: var(--style-label-height);
    padding: 0 var(--style-padding-small);
    border-radius: var(--style-border-radius);
}
.input-cust-format input {
    border: none;
    outline: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    height: auto;
    font: inherit;
}
.input-cust-format .in-el {
    font: inherit;
    background-color: transparent;
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
}
.input-cust-format .in-el.pre,
.input-cust-format .in-el.suf {
    background-color: transparent;
    font: inherit;
    color: var(--color-text-5);
}

/* #endregion */

/* #region Weekday Picker */

.weekday-picker {
  width: 248px;  
}

.weekday-picker.background {
  background-color: var(--style-background-accent-ultrathin);
  border: var(--border-regular);
  border-radius: var(--style-border-radius);
}

.weekday-picker .weekday-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: var(--style-padding-small);
  padding: var(--style-padding-medium);
}

.weekday-picker .weekday-content:nth-of-type(n+2) {
  border-top: var(--border-regular);
}

.weekday-picker .weekdays,
.weekday-picker .weekday-shortcuts {
  display: grid;
  grid-template-columns: repeat(7, 30px);
  gap: 2px;
}

.weekday-item {
  width: 32px;
  height: 24px;
  text-align: center !important;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: var(--anim-duration-short);
}
.weekday-item span {
    display: block;
    text-align: center;
}
.weekday-item:hover:not(:disabled) {
  background-color: var(--style-background-accent-regular);
}
.weekday-item:disabled span {
    color: var(--color-text-5);
}
.weekday-item.active {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
}

.weekday-item.active:has(+ .active) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.weekday-item.active + .active {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.date-range-shortcut {
  padding: 0 !important;
  margin: 0 !important;
  justify-content: center;
  overflow: hidden;
  display: flex;
  text-align: center;
  align-items: center;
  border: var(--border-regular);
}
.date-range-shortcut span {
    width: 100%;
    text-align: center;
    display: block;
}
.date-range-shortcut:not(:disabled) .action:hover {
  background-color: var(--style-background-accent-regular);
}
.date-range-shortcut:disabled span {
    color: var(--color-text-5);
}


/* #endregion */


/* #region Platform Style Picker */

.pkr-plat-sty {
    display: flex;
    flex-direction: column;
    gap: var(--style-padding-small);
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--style-padding-medium);
    min-width: 180px;
}
.pkr-plat-sty .plt-sel-head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
}

.pkr-plat-sty .plt-ico-grd {
    display: grid;
    gap: var(--style-padding-small);
    justify-content: center;
}

.pkr-plat-sty .plt-ico-grd > button {
    display: flex;
    justify-content: center;
    background-color: var(--style-background-accent-ultrathin);
    color: var(--color-text-4);
    min-height: var(--style-label-height);
    border: var(--border-regular);
    opacity: 0.8;
    transition-duration: var(--anim-duration-ultrashort);
    transition-property: opacity;
    outline: 1.5px solid transparent;
    outline-offset: 1.5px;
}
.pkr-plat-sty .plt-ico-grd > button:hover:not(:disabled) {
    opacity: 1;
    color: var(--color-text-2);
}
.pkr-plat-sty .plt-ico-grd > button:focus {
    outline-color: var(--color-accent);
}
.pkr-plat-sty .plt-ico-grd > button:disabled {
    color: var(--color-text-6);
    background-color: transparent;
}
.pkr-plat-sty .plt-ico-grd > button.selected {
    color: var(--color-text-1);
    background-color: var(--style-background-accent-regular);
    border-color: var(--style-background-accent-thick);
}

.pkr-plat-sty .plt-ico-grd > button.selected.plat-select {
    background-color: var(--platform-label-background) !important;
    color: var(--platform-label-text-fill) !important;
    opacity: 1;
    font-weight: 700;
}

/* #endregion */