@charset "UTF-8";
:root {
  --inquiry-list-item-background: #FFFFFF;
  --inquiry-list-item-text-title: var(--clc-base-800);
  --inquiry-list-item-text-content: var(--clc-base-400);
  --inquiry-list-item-text-date: var(--clc-base-400);
  --inquiry-list-item-status-waiting-background: rgba(200, 200, 200, 0.16);
  --inquiry-list-item-status-waiting-text: var(--clc-base-700);
  --inquiry-list-item-status-progressing-background: rgba(189, 168, 250, 0.2);
  --inquiry-list-item-status-progressing-text: var(--ivy-primary-500);
  --inquiry-list-item-status-closed-background: rgba(107, 191, 106, 0.16);
  --inquiry-list-item-status-closed-text: #1A9C18;
}

:root {
  --inquiry-create-text-primary: var(--clc-base-800);
  --inquiry-create-text-secondary: var(--clc-base-400);
  --inquiry-create-text-description: var(--clc-base-500);
  --inquiry-create-text-anounce: var(--clc-base-400);
  --inquiry-create-file-upload-text: var(--clc-base-400);
}

:root {
  --inquiry-detail-q-symbol: var(--ivy-primary-500);
  --inquiry-detail-q-symbol-background: #F1ECFE;
  --inquiry-detail-a-symbol: #FFFFFF;
  --inquiry-detail-a-symbol-background: var(--ivy-primary-400);
  --inquiry-detail-q-block-background: var(--clc-base);
  --inquiry-detail-a-block-background: rgba(241, 236, 254, 0.6);
  --inquiry-detail-text-title: var(--clc-base-700);
  --inquiry-detail-text-content: var(--clc-base-900);
  --inquiry-detail-text-date: var(--clc-base-400);
  --inquiry-detail-submit-button-text: var(--clc-base-600);
  --inquiry-detail-submit-button-background: rgba(200, 200, 200, 0.3);
  --inquiry-detail-article-file-background: var(--clc-base);
  --inquiry-detail-comment-file-background: #FFFFFF;
}

:root {
  --inquiry-top-label-text: var(--clc-base-800);
  --inquiry-group-button-text: var(--clc-base-600);
  --inquiry-group-button-text-selected: var(--clc-base);
  --inquiry-group-button-background: var(--clc-base-50);
  --inquiry-group-button-background-selected: var(--clc-base-600);
  --inquiry-submit-button-text: #FFFFFF;
  --inquiry-submit-button-background: var(--ivy-primary-500);
  --inquiry-submit-button-text-disabled: rgba(150, 150, 150, 0.8);
  --inquiry-submit-button-background-disabled: rgba(200, 200, 200, 0.4);
  --inquiry-input-background: #FFFFFF;
  --inquiry-input-placeholder: var(--clc-base-400);
  --inquiry-file-uploaded-icon: var(--ivy-primary-500);
  --inquiry-file-uploaded-background: var(--clc-base-50);
  --inquiry-file-uploaded-text-primary: var(--clv-text-primary);
  --inquiry-file-uploaded-text-secondary: var(--clv-text-tertiary);
  --inquiry-file-uploaded-button-remove: var(--clc-base-500);
  --inquiry-border: 1px solid var(--clc-base-200);
  --inquiry-border-dark-none: 1px solid var(--clc-base-200);
  --inquiry-essential: #D13F3F;
}

/*!
The contents of this file are copyrighted and cannot be used outside of blazor.radzen.com
To use it in your application you need an active subscription - https://www.radzen.com/pricing
Any questions concerning the use or status of this file should be directed to info@radzen.com
*/
.clc-button {
  position: relative;
  overflow: hidden;
}
.clc-button:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%;
  transition: background-size var(--clc-ripple-duration, 0.8s), opacity var(--clc-ripple-duration, 0.8s);
  pointer-events: none;
}
.clc-button.clc-state-disabled:before {
  background: transparent;
}
.clc-button:active:before {
  transition: background-size 0s, opacity 0s;
  opacity: 0.32;
  background-size: 0%;
}

.clc-header {
  padding: 0.5rem;
}
.clc-header a,
.clc-header a:hover,
.clc-header a:focus {
  color: var(--clc-text-color);
}

.sidebar-toggle {
  position: relative;
  overflow: hidden;
}
.sidebar-toggle:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%;
  transition: background-size var(--clc-ripple-duration, 0.8s), opacity var(--clc-ripple-duration, 0.8s);
  pointer-events: none;
}
.sidebar-toggle.clc-state-disabled:before {
  background: transparent;
}
.sidebar-toggle:active:before {
  transition: background-size 0s, opacity 0s;
  opacity: 0.32;
  background-size: 0%;
}

.clc-navigation-item-link,
.clc-menu-toggle {
  position: relative;
  overflow: hidden;
}
.clc-navigation-item-link:before,
.clc-menu-toggle:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%;
  transition: background-size var(--clc-ripple-duration, 0.8s), opacity var(--clc-ripple-duration, 0.8s);
  pointer-events: none;
}
.clc-navigation-item-link.clc-state-disabled:before,
.clc-menu-toggle.clc-state-disabled:before {
  background: transparent;
}
.clc-navigation-item-link:active:before,
.clc-menu-toggle:active:before {
  transition: background-size 0s, opacity 0s;
  opacity: 0.32;
  background-size: 0%;
}

.panel-menu .navigation-item-wrapper-active:before {
  display: none;
}

.clc-panel-menu .clc-navigation-item-link {
  background-position: center;
  transition: background-size var(--clc-ripple-duration, 0.8s);
  background: radial-gradient(circle, transparent 1%, var(--clc-base-300) 1%) center/15000%;
}
.clc-panel-menu .clc-navigation-item-link:active {
  background-color: var(--clc-base-300);
  transition: background-size 0s;
  background-size: 0%;
}
.clc-panel-menu .clc-navigation-item-link.clc-state-disabled:active {
  background-color: transparent;
}
.clc-panel-menu .clc-navigation-item-wrapper-active:before {
  display: none;
}

.clc-steps > ul {
  display: flex;
}
.clc-steps .clc-steps-item:not(:last-child) {
  flex: auto;
  display: flex;
  align-items: center;
}
.clc-steps .clc-steps-item:not(:last-child):after {
  display: "block";
  content: "";
  flex: auto;
  height: 1px;
  margin-inline-end: 16px;
  background-color: var(--clc-base-300);
}

.clc-chkbox-box .clci {
  font-weight: bold;
}
.clc-chkbox-box:after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  opacity: 0;
  transition: background-color var(--clc-transition), width var(--clc-transition), height var(--clc-transition);
}
.clc-chkbox-box:hover:not(.clc-state-disabled):after {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--clc-base-400);
  opacity: 0.3;
}
.clc-chkbox-box:active:not(.clc-state-disabled):after {
  background-color: var(--clc-base-500);
}
.clc-chkbox-box.clc-state-active:hover:not(.clc-state-disabled):after {
  background-color: var(--clc-primary);
  opacity: 0.08;
}
.clc-chkbox-box.clc-state-active:active:hover:not(.clc-state-disabled):after {
  opacity: 0.16;
}

.clc-switch .clc-switch-circle {
  box-shadow: inset 0 0 0 2px var(--clc-base-700);
}

.clc-switch.clc-switch-checked .clc-switch-circle {
  box-shadow: none;
}

.clc-switch .clc-switch-circle:hover:not(.clc-disabled):before {
  transition: background var(--clc-transition), transform var(--clc-transition), outlin-color var(--clc-transition);
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.04);
}
.clc-switch .clc-switch-circle:active:not(.clc-disabled):before {
  width: 1.5rem;
  height: 1.5rem;
  inset-inline-start: 0.25rem;
  margin-block-start: -0.75rem;
}

.clc-switch.clc-switch-checked .clc-switch-circle:before {
  width: 1.5rem;
  height: 1.5rem;
  inset-inline-start: 0.25rem;
  margin-block-start: -0.75rem;
}
.clc-switch.clc-switch-checked .clc-switch-circle:hover:not(.clc-disabled):before {
  box-shadow: 0 0 0 10px var(--clc-primary-lighter);
}

.clc-radiobutton-box:after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  opacity: 0;
  transition: background-color var(--clc-transition), width var(--clc-transition), height var(--clc-transition);
}
.clc-radiobutton-box:hover:not(.clc-state-disabled):after {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--clc-base-400);
  opacity: 0.3;
}
.clc-radiobutton-box:active:not(.clc-state-disabled):after {
  background-color: var(--clc-base-500);
}
.clc-radiobutton-box.clc-state-active:hover:not(.clc-state-disabled):after {
  background-color: var(--clc-primary);
  opacity: 0.08;
}
.clc-radiobutton-box.clc-state-active:active:hover:not(.clc-state-disabled):after {
  opacity: 0.16;
}

.clc-slider .clc-slider-range {
  top: 0;
  bottom: 0;
}
.clc-slider .clc-slider-handle:before {
  display: none;
}
.clc-slider.clc-state-disabled .clc-slider-handle {
  box-shadow: none;
}

.clc-selectbar .clc-button:focus {
  box-shadow: none !important;
  background: var(--clc-base-200);
}

.clc-datepicker-inline table {
  width: 100%;
}

.clc-calendar-view td,
.clc-calendar-view th {
  text-align: center;
}
.clc-calendar-view td a.clc-state-default,
.clc-calendar-view td span.clc-state-default,
.clc-calendar-view th a.clc-state-default,
.clc-calendar-view th span.clc-state-default {
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  line-height: 1rem;
}
.clc-calendar-view td a.clc-state-default:not(.clc-state-active):hover,
.clc-calendar-view td span.clc-state-default:not(.clc-state-active):hover,
.clc-calendar-view th a.clc-state-default:not(.clc-state-active):hover,
.clc-calendar-view th span.clc-state-default:not(.clc-state-active):hover {
  border-radius: 50%;
}
.clc-calendar-view td .clc-state-active,
.clc-calendar-view th .clc-state-active {
  border-radius: 50%;
}

.clc-timepicker {
  flex-wrap: wrap;
}
.clc-timepicker .clc-numeric {
  flex: 1;
}
.clc-timepicker > .clc-button {
  flex-basis: 100%;
}

.clc-datepicker-trigger {
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.clc-timespanpicker-panel {
  flex-direction: column;
}
.clc-timespanpicker-panel > .clc-button {
  align-self: stretch;
}

.clc-numeric .clc-numeric-button {
  box-shadow: none;
}
.clc-numeric .clc-numeric-button:hover {
  box-shadow: none !important;
}

.clc-fileupload-choose.clc-button {
  background-position: center;
  transition: background-size var(--clc-ripple-duration, 0.8s);
  background: radial-gradient(circle, transparent 1%, rgba(0, 0, 0, 0.12) 1%) center/15000%;
}
.clc-fileupload-choose.clc-button:active {
  background-color: rgba(0, 0, 0, 0.12);
  transition: background-size 0s;
  background-size: 0%;
}
.clc-fileupload-choose.clc-button.clc-state-disabled:active {
  background-color: transparent;
}
.clc-fileupload-choose.clc-button input {
  z-index: 1;
}

.clc-datatable .clc-col-icon {
  border-inline-end: var(--clc-border-base-300);
}

.clc-grid-table-composite {
  --clc-grid-right-cell-border: var(--clc-border-base-300);
  --clc-grid-header-cell-border: var(--clc-border-base-300);
}

.clc-pager-pages {
  max-height: 3rem;
}

.clc-pager-element {
  box-shadow: var(--clc-shadow-0) !important;
}
.clc-pager-element:hover {
  box-shadow: var(--clc-shadow-0) !important;
}
.clc-pager-element:active {
  box-shadow: var(--clc-shadow-0) !important;
}

.clc-tree-toggler {
  position: relative;
}

.clc-tree-toggler.clci-caret-right:before {
  margin-left: 0 !important;
}
.clc-tree-toggler.clci-caret-down:before {
  margin-left: 0 !important;
}
.clc-tree-toggler:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  opacity: 0;
  transition: background-color var(--clc-transition), width var(--clc-transition), height var(--clc-transition), left var(--clc-transition), top var(--clc-transition);
}
.clc-tree-toggler:active:after {
  left: 0;
  top: -0.25rem;
  width: 2rem;
  height: 2rem;
  background-color: var(--clc-base-400);
  opacity: 0.3;
}

.clc-scheduler-nav .clc-button {
  box-shadow: var(--clc-shadow-0) !important;
}
.clc-scheduler-nav .clc-button:hover {
  box-shadow: var(--clc-shadow-0) !important;
  background: var(--clc-base-200);
}
.clc-scheduler-nav .clc-button:active {
  box-shadow: var(--clc-shadow-0) !important;
}

.clc-view-header {
  border-top: none !important;
}
.clc-year-view .clc-view-header {
  border-bottom: none !important;
}

.clc-tabview-nav > li > a {
  position: relative;
  overflow: hidden;
}
.clc-tabview-nav > li > a:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%;
  transition: background-size var(--clc-ripple-duration, 0.8s), opacity var(--clc-ripple-duration, 0.8s);
  pointer-events: none;
}
.clc-tabview-nav > li > a.clc-state-disabled:before {
  background: transparent;
}
.clc-tabview-nav > li > a:active:before {
  transition: background-size 0s, opacity 0s;
  opacity: 0.32;
  background-size: 0%;
}

.clc-tabview.clc-tabview-top > .clc-tabview-nav .clc-tabview-selected {
  border-top-width: 0;
}
.clc-tabview.clc-tabview-bottom > .clc-tabview-nav li {
  border-top-width: 0;
}
.clc-tabview.clc-tabview-bottom > .clc-tabview-nav .clc-tabview-selected {
  border-bottom-width: 0;
}
.clc-tabview.clc-tabview-left > .clc-tabview-nav .clc-tabview-selected {
  border-left-width: 0;
}
.clc-tabview.clc-tabview-right > .clc-tabview-nav li {
  border-left-width: 0;
}
.clc-tabview.clc-tabview-right > .clc-tabview-nav .clc-tabview-selected {
  border-right-width: 0;
}
.clc-tabview.clc-tabview-top > .clc-tabview-panels {
  border-top: var(--clc-border-base-300);
}
.clc-tabview.clc-tabview-bottom > .clc-tabview-panels {
  border-bottom: var(--clc-border-base-300);
}
.clc-tabview.clc-tabview-left > .clc-tabview-panels {
  border-left: var(--clc-border-base-300);
}
.clc-tabview.clc-tabview-right > .clc-tabview-panels {
  border-right: var(--clc-border-base-300);
}

.clc-tabview-nav {
  z-index: 0;
}
.clc-tabview-nav li {
  position: relative;
}
.clc-tabview-nav li:after {
  z-index: -1;
  content: "";
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 0.1875rem;
  border-radius: var(--clc-border-radius) var(--clc-border-radius) 0 0;
  background-color: transparent;
}
.clc-tabview-nav li:hover:not(.clc-tabview-selected):not(.clc-state-disabled):after {
  background-color: var(--clc-primary);
}
.clc-tabview-nav li.clc-tabview-selected:after {
  background-color: var(--clc-primary);
}
.clc-tabview-top > .clc-tabview-nav li.clc-tabview-selected {
  margin-bottom: 0;
}
.clc-tabview-bottom > .clc-tabview-nav li:after {
  top: 0;
  border-radius: 0 0 var(--clc-border-radius) var(--clc-border-radius);
}
.clc-tabview-bottom > .clc-tabview-nav li.clc-tabview-selected {
  margin-top: 0;
  padding-top: 0;
}
.clc-tabview-left > .clc-tabview-nav li:after {
  left: auto;
  right: 0;
  top: 1rem;
  bottom: 1rem;
  width: 0.1875rem;
  height: auto;
  border-radius: var(--clc-border-radius) 0 0 var(--clc-border-radius);
}
.clc-tabview-left > .clc-tabview-nav li.clc-tabview-selected {
  margin-right: 0;
}
.clc-tabview-right > .clc-tabview-nav li:after {
  left: 0;
  right: auto;
  top: 0.625rem;
  bottom: 0.625rem;
  width: 0.1875rem;
  height: auto;
  border-radius: 0 var(--clc-border-radius) var(--clc-border-radius) 0;
}
.clc-tabview-right > .clc-tabview-nav li.clc-tabview-selected {
  margin-left: 0;
  padding-left: 0;
}

.clc-login .clc-textbox.invalid {
  --clc-input-focus-shadow: inset 0 0 0 1px var(--clc-danger);
}

.clc-progressbar:has(.clc-progressbar-label) {
  --clc-progressbar-height: 1.25rem;
}

.clc-html-editor-toolbar {
  font-size: 0.825rem;
}

@media (max-width: 768px) {
  .clc-layout .clc-body {
    margin: 0;
    border-radius: 0;
  }
}
.clc-toc-link {
  position: relative;
  overflow: hidden;
}
.clc-toc-link:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%;
  transition: background-size var(--clc-ripple-duration, 0.8s), opacity var(--clc-ripple-duration, 0.8s);
  pointer-events: none;
}
.clc-toc-link.clc-state-disabled:before {
  background: transparent;
}
.clc-toc-link:active:before {
  transition: background-size 0s, opacity 0s;
  opacity: 0.32;
  background-size: 0%;
}
.clc-toc-item-selected > .clc-toc-item-wrapper .clc-toc-link {
  font-variation-settings: "GRAD" 125;
}

.clc-search-input {
  border: var(--clc-border-base-200) !important;
  border-radius: calc(var(--clc-border-radius) * 5) !important;
  background-color: var(--clc-base-200) !important;
}
div:has(.clc-search-input) {
  padding-top: 0.125rem !important;
}
.clc-search-input:hover {
  border: var(--clc-border-base-400) !important;
  background-color: var(--clc-base-400) !important;
}
.clc-search-input:hover:focus, .clc-search-input:focus {
  border: var(--clc-border-base-50) !important;
  background-color: var(--clc-white) !important;
  box-shadow: var(--clc-shadow-1) !important;
}

.clc-card.clc-material-3-demo-card {
  box-shadow: none;
  border: var(--clc-border-base-300);
}

@font-face {
  font-family: "Material Symbols";
  src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/RobotoFlex.woff2") format("woff2 supports variations"), url("../fonts/RobotoFlex.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-display: swap;
}
[class^=clc-], [class^=clc-]::before, [class^=clc-]::after, [class^=clc-] *, [class^=clc-] *::before, [class^=clc-] *::after,
[class*=" clc-"],
[class*=" clc-"]::before,
[class*=" clc-"]::after,
[class*=" clc-"] *,
[class*=" clc-"] *::before,
[class*=" clc-"] *::after {
  box-sizing: border-box;
}

.clc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.clc-text-title-color {
  color: var(--clc-base-900) !important;
}

.clc-text-color {
  color: var(--clc-base-900) !important;
}

.clc-text-secondary-color {
  color: var(--clc-base-800) !important;
}

.clc-text-tertiary-color {
  color: var(--clc-base-700) !important;
}

.clc-text-disabled-color {
  color: var(--clc-base-600) !important;
}

.clc-text-contrast-color {
  color: var(--clc-white) !important;
}

.clc-border-radius {
  border-radius: var(--clc-border-radius) !important;
}

.clc-border-radius-0 {
  border-radius: var(--clc-border-radius-0) !important;
}

.clc-border-radius-1 {
  border-radius: var(--clc-border-radius-1) !important;
}

.clc-border-radius-2 {
  border-radius: var(--clc-border-radius-2) !important;
}

.clc-border-radius-3 {
  border-radius: var(--clc-border-radius-3) !important;
}

.clc-border-radius-4 {
  border-radius: var(--clc-border-radius-4) !important;
}

.clc-border-radius-5 {
  border-radius: var(--clc-border-radius-5) !important;
}

.clc-border-radius-6 {
  border-radius: var(--clc-border-radius-6) !important;
}

.clc-border-radius-7 {
  border-radius: var(--clc-border-radius-7) !important;
}

.clc-border-radius-8 {
  border-radius: var(--clc-border-radius-8) !important;
}

.clc-border-radius-9 {
  border-radius: var(--clc-border-radius-9) !important;
}

.clc-border-radius-10 {
  border-radius: var(--clc-border-radius-10) !important;
}

.clc-shadow-0 {
  box-shadow: var(--clc-shadow-0) !important;
}

.clc-shadow-1 {
  box-shadow: var(--clc-shadow-1) !important;
}

.clc-shadow-2 {
  box-shadow: var(--clc-shadow-2) !important;
}

.clc-shadow-3 {
  box-shadow: var(--clc-shadow-3) !important;
}

.clc-shadow-4 {
  box-shadow: var(--clc-shadow-4) !important;
}

.clc-shadow-5 {
  box-shadow: var(--clc-shadow-5) !important;
}

.clc-shadow-6 {
  box-shadow: var(--clc-shadow-6) !important;
}

.clc-shadow-7 {
  box-shadow: var(--clc-shadow-7) !important;
}

.clc-shadow-8 {
  box-shadow: var(--clc-shadow-8) !important;
}

.clc-shadow-9 {
  box-shadow: var(--clc-shadow-9) !important;
}

.clc-shadow-10 {
  box-shadow: var(--clc-shadow-10) !important;
}

.clc-display-none {
  display: none !important;
}

.clc-display-block {
  display: block !important;
}

.clc-display-inline {
  display: inline !important;
}

.clc-display-inline-block {
  display: inline-block !important;
}

.clc-display-flex {
  display: flex !important;
}

.clc-display-inline-flex {
  display: inline-flex !important;
}

.clc-display-grid {
  display: grid !important;
}

.clc-display-inline-grid {
  display: inline-grid !important;
}

.clc-justify-content-normal {
  justify-content: normal !important;
}

.clc-justify-content-stretch {
  justify-content: stretch !important;
}

.clc-justify-content-center {
  justify-content: center !important;
}

.clc-justify-content-start {
  justify-content: start !important;
}

.clc-justify-content-end {
  justify-content: end !important;
}

.clc-justify-content-flex-start {
  justify-content: flex-start !important;
}

.clc-justify-content-flex-end {
  justify-content: flex-end !important;
}

.clc-justify-content-left {
  justify-content: left !important;
}

.clc-justify-content-right {
  justify-content: right !important;
}

.clc-justify-content-space-between {
  justify-content: space-between !important;
}

.clc-justify-content-space-around {
  justify-content: space-around !important;
}

.clc-justify-content-space-evenly {
  justify-content: space-evenly !important;
}

.clc-align-items-normal {
  align-items: normal !important;
}

.clc-align-items-stretch {
  align-items: stretch !important;
}

.clc-align-items-center {
  align-items: center !important;
}

.clc-align-items-start {
  align-items: start !important;
}

.clc-align-items-end {
  align-items: end !important;
}

.clc-align-items-flex-start {
  align-items: flex-start !important;
}

.clc-align-items-flex-end {
  align-items: flex-end !important;
}

.clc-overflow-auto {
  overflow: auto !important;
}

.clc-overflow-scroll {
  overflow: scroll !important;
}

.clc-overflow-visible {
  overflow: visible !important;
}

.clc-overflow-hidden {
  overflow: hidden !important;
}

.clc-w-25 {
  width: 25% !important;
}

.clc-w-50 {
  width: 50% !important;
}

.clc-w-75 {
  width: 75% !important;
}

.clc-w-100 {
  width: 100% !important;
}

.clc-vw-25 {
  width: 25vw !important;
}

.clc-vw-50 {
  width: 50vw !important;
}

.clc-vw-75 {
  width: 75vw !important;
}

.clc-vw-100 {
  width: 100vw !important;
}

.clc-w-auto {
  width: auto !important;
}

.clc-w-fit-content {
  width: fit-content !important;
}

.clc-w-min-content {
  width: min-content !important;
}

.clc-w-max-content {
  width: max-content !important;
}

.clc-w-stretch {
  width: stretch !important;
}

.clc-min-w-25 {
  min-width: 25% !important;
}

.clc-min-w-50 {
  min-width: 50% !important;
}

.clc-min-w-75 {
  min-width: 75% !important;
}

.clc-min-w-100 {
  min-width: 100% !important;
}

.clc-max-w-25 {
  max-width: 25% !important;
}

.clc-max-w-50 {
  max-width: 50% !important;
}

.clc-max-w-75 {
  max-width: 75% !important;
}

.clc-max-w-100 {
  max-width: 100% !important;
}

.clc-h-25 {
  height: 25% !important;
}

.clc-h-50 {
  height: 50% !important;
}

.clc-h-75 {
  height: 75% !important;
}

.clc-h-100 {
  height: 100% !important;
}

.clc-vh-25 {
  height: 25vh !important;
}

.clc-vh-50 {
  height: 50vh !important;
}

.clc-vh-75 {
  height: 75vh !important;
}

.clc-vh-100 {
  height: 100vh !important;
}

.clc-h-auto {
  height: auto !important;
}

.clc-min-h-25 {
  min-height: 25% !important;
}

.clc-min-h-50 {
  min-height: 50% !important;
}

.clc-min-h-75 {
  min-height: 75% !important;
}

.clc-min-h-100 {
  min-height: 100% !important;
}

.clc-max-h-25 {
  max-height: 25% !important;
}

.clc-max-h-50 {
  max-height: 50% !important;
}

.clc-max-h-75 {
  max-height: 75% !important;
}

.clc-max-h-100 {
  max-height: 100% !important;
}

@media (min-width: 576px) {
  .clc-display-xs-none {
    display: none !important;
  }
  .clc-display-xs-block {
    display: block !important;
  }
  .clc-display-xs-inline {
    display: inline !important;
  }
  .clc-display-xs-inline-block {
    display: inline-block !important;
  }
  .clc-display-xs-flex {
    display: flex !important;
  }
  .clc-display-xs-inline-flex {
    display: inline-flex !important;
  }
  .clc-display-xs-grid {
    display: grid !important;
  }
  .clc-display-xs-inline-grid {
    display: inline-grid !important;
  }
  .clc-justify-content-xs-normal {
    justify-content: normal !important;
  }
  .clc-justify-content-xs-stretch {
    justify-content: stretch !important;
  }
  .clc-justify-content-xs-center {
    justify-content: center !important;
  }
  .clc-justify-content-xs-start {
    justify-content: start !important;
  }
  .clc-justify-content-xs-end {
    justify-content: end !important;
  }
  .clc-justify-content-xs-flex-start {
    justify-content: flex-start !important;
  }
  .clc-justify-content-xs-flex-end {
    justify-content: flex-end !important;
  }
  .clc-justify-content-xs-left {
    justify-content: left !important;
  }
  .clc-justify-content-xs-right {
    justify-content: right !important;
  }
  .clc-justify-content-xs-space-between {
    justify-content: space-between !important;
  }
  .clc-justify-content-xs-space-around {
    justify-content: space-around !important;
  }
  .clc-justify-content-xs-space-evenly {
    justify-content: space-evenly !important;
  }
  .clc-align-items-xs-normal {
    align-items: normal !important;
  }
  .clc-align-items-xs-stretch {
    align-items: stretch !important;
  }
  .clc-align-items-xs-center {
    align-items: center !important;
  }
  .clc-align-items-xs-start {
    align-items: start !important;
  }
  .clc-align-items-xs-end {
    align-items: end !important;
  }
  .clc-align-items-xs-flex-start {
    align-items: flex-start !important;
  }
  .clc-align-items-xs-flex-end {
    align-items: flex-end !important;
  }
  .clc-overflow-xs-auto {
    overflow: auto !important;
  }
  .clc-overflow-xs-scroll {
    overflow: scroll !important;
  }
  .clc-overflow-xs-visible {
    overflow: visible !important;
  }
  .clc-overflow-xs-hidden {
    overflow: hidden !important;
  }
  .clc-w-xs-25 {
    width: 25% !important;
  }
  .clc-w-xs-50 {
    width: 50% !important;
  }
  .clc-w-xs-75 {
    width: 75% !important;
  }
  .clc-w-xs-100 {
    width: 100% !important;
  }
  .clc-vw-xs-25 {
    width: 25vw !important;
  }
  .clc-vw-xs-50 {
    width: 50vw !important;
  }
  .clc-vw-xs-75 {
    width: 75vw !important;
  }
  .clc-vw-xs-100 {
    width: 100vw !important;
  }
  .clc-w-xs-auto {
    width: auto !important;
  }
  .clc-w-xs-fit-content {
    width: fit-content !important;
  }
  .clc-w-xs-min-content {
    width: min-content !important;
  }
  .clc-w-xs-max-content {
    width: max-content !important;
  }
  .clc-w-xs-stretch {
    width: stretch !important;
  }
  .clc-min-w-xs-25 {
    min-width: 25% !important;
  }
  .clc-min-w-xs-50 {
    min-width: 50% !important;
  }
  .clc-min-w-xs-75 {
    min-width: 75% !important;
  }
  .clc-min-w-xs-100 {
    min-width: 100% !important;
  }
  .clc-max-w-xs-25 {
    max-width: 25% !important;
  }
  .clc-max-w-xs-50 {
    max-width: 50% !important;
  }
  .clc-max-w-xs-75 {
    max-width: 75% !important;
  }
  .clc-max-w-xs-100 {
    max-width: 100% !important;
  }
  .clc-h-xs-25 {
    height: 25% !important;
  }
  .clc-h-xs-50 {
    height: 50% !important;
  }
  .clc-h-xs-75 {
    height: 75% !important;
  }
  .clc-h-xs-100 {
    height: 100% !important;
  }
  .clc-vh-xs-25 {
    height: 25vh !important;
  }
  .clc-vh-xs-50 {
    height: 50vh !important;
  }
  .clc-vh-xs-75 {
    height: 75vh !important;
  }
  .clc-vh-xs-100 {
    height: 100vh !important;
  }
  .clc-h-xs-auto {
    height: auto !important;
  }
  .clc-min-h-xs-25 {
    min-height: 25% !important;
  }
  .clc-min-h-xs-50 {
    min-height: 50% !important;
  }
  .clc-min-h-xs-75 {
    min-height: 75% !important;
  }
  .clc-min-h-xs-100 {
    min-height: 100% !important;
  }
  .clc-max-h-xs-25 {
    max-height: 25% !important;
  }
  .clc-max-h-xs-50 {
    max-height: 50% !important;
  }
  .clc-max-h-xs-75 {
    max-height: 75% !important;
  }
  .clc-max-h-xs-100 {
    max-height: 100% !important;
  }
}
@media (min-width: 768px) {
  .clc-display-sm-none {
    display: none !important;
  }
  .clc-display-sm-block {
    display: block !important;
  }
  .clc-display-sm-inline {
    display: inline !important;
  }
  .clc-display-sm-inline-block {
    display: inline-block !important;
  }
  .clc-display-sm-flex {
    display: flex !important;
  }
  .clc-display-sm-inline-flex {
    display: inline-flex !important;
  }
  .clc-display-sm-grid {
    display: grid !important;
  }
  .clc-display-sm-inline-grid {
    display: inline-grid !important;
  }
  .clc-justify-content-sm-normal {
    justify-content: normal !important;
  }
  .clc-justify-content-sm-stretch {
    justify-content: stretch !important;
  }
  .clc-justify-content-sm-center {
    justify-content: center !important;
  }
  .clc-justify-content-sm-start {
    justify-content: start !important;
  }
  .clc-justify-content-sm-end {
    justify-content: end !important;
  }
  .clc-justify-content-sm-flex-start {
    justify-content: flex-start !important;
  }
  .clc-justify-content-sm-flex-end {
    justify-content: flex-end !important;
  }
  .clc-justify-content-sm-left {
    justify-content: left !important;
  }
  .clc-justify-content-sm-right {
    justify-content: right !important;
  }
  .clc-justify-content-sm-space-between {
    justify-content: space-between !important;
  }
  .clc-justify-content-sm-space-around {
    justify-content: space-around !important;
  }
  .clc-justify-content-sm-space-evenly {
    justify-content: space-evenly !important;
  }
  .clc-align-items-sm-normal {
    align-items: normal !important;
  }
  .clc-align-items-sm-stretch {
    align-items: stretch !important;
  }
  .clc-align-items-sm-center {
    align-items: center !important;
  }
  .clc-align-items-sm-start {
    align-items: start !important;
  }
  .clc-align-items-sm-end {
    align-items: end !important;
  }
  .clc-align-items-sm-flex-start {
    align-items: flex-start !important;
  }
  .clc-align-items-sm-flex-end {
    align-items: flex-end !important;
  }
  .clc-overflow-sm-auto {
    overflow: auto !important;
  }
  .clc-overflow-sm-scroll {
    overflow: scroll !important;
  }
  .clc-overflow-sm-visible {
    overflow: visible !important;
  }
  .clc-overflow-sm-hidden {
    overflow: hidden !important;
  }
  .clc-w-sm-25 {
    width: 25% !important;
  }
  .clc-w-sm-50 {
    width: 50% !important;
  }
  .clc-w-sm-75 {
    width: 75% !important;
  }
  .clc-w-sm-100 {
    width: 100% !important;
  }
  .clc-vw-sm-25 {
    width: 25vw !important;
  }
  .clc-vw-sm-50 {
    width: 50vw !important;
  }
  .clc-vw-sm-75 {
    width: 75vw !important;
  }
  .clc-vw-sm-100 {
    width: 100vw !important;
  }
  .clc-w-sm-auto {
    width: auto !important;
  }
  .clc-w-sm-fit-content {
    width: fit-content !important;
  }
  .clc-w-sm-min-content {
    width: min-content !important;
  }
  .clc-w-sm-max-content {
    width: max-content !important;
  }
  .clc-w-sm-stretch {
    width: stretch !important;
  }
  .clc-min-w-sm-25 {
    min-width: 25% !important;
  }
  .clc-min-w-sm-50 {
    min-width: 50% !important;
  }
  .clc-min-w-sm-75 {
    min-width: 75% !important;
  }
  .clc-min-w-sm-100 {
    min-width: 100% !important;
  }
  .clc-max-w-sm-25 {
    max-width: 25% !important;
  }
  .clc-max-w-sm-50 {
    max-width: 50% !important;
  }
  .clc-max-w-sm-75 {
    max-width: 75% !important;
  }
  .clc-max-w-sm-100 {
    max-width: 100% !important;
  }
  .clc-h-sm-25 {
    height: 25% !important;
  }
  .clc-h-sm-50 {
    height: 50% !important;
  }
  .clc-h-sm-75 {
    height: 75% !important;
  }
  .clc-h-sm-100 {
    height: 100% !important;
  }
  .clc-vh-sm-25 {
    height: 25vh !important;
  }
  .clc-vh-sm-50 {
    height: 50vh !important;
  }
  .clc-vh-sm-75 {
    height: 75vh !important;
  }
  .clc-vh-sm-100 {
    height: 100vh !important;
  }
  .clc-h-sm-auto {
    height: auto !important;
  }
  .clc-min-h-sm-25 {
    min-height: 25% !important;
  }
  .clc-min-h-sm-50 {
    min-height: 50% !important;
  }
  .clc-min-h-sm-75 {
    min-height: 75% !important;
  }
  .clc-min-h-sm-100 {
    min-height: 100% !important;
  }
  .clc-max-h-sm-25 {
    max-height: 25% !important;
  }
  .clc-max-h-sm-50 {
    max-height: 50% !important;
  }
  .clc-max-h-sm-75 {
    max-height: 75% !important;
  }
  .clc-max-h-sm-100 {
    max-height: 100% !important;
  }
}
@media (min-width: 1024px) {
  .clc-display-md-none {
    display: none !important;
  }
  .clc-display-md-block {
    display: block !important;
  }
  .clc-display-md-inline {
    display: inline !important;
  }
  .clc-display-md-inline-block {
    display: inline-block !important;
  }
  .clc-display-md-flex {
    display: flex !important;
  }
  .clc-display-md-inline-flex {
    display: inline-flex !important;
  }
  .clc-display-md-grid {
    display: grid !important;
  }
  .clc-display-md-inline-grid {
    display: inline-grid !important;
  }
  .clc-justify-content-md-normal {
    justify-content: normal !important;
  }
  .clc-justify-content-md-stretch {
    justify-content: stretch !important;
  }
  .clc-justify-content-md-center {
    justify-content: center !important;
  }
  .clc-justify-content-md-start {
    justify-content: start !important;
  }
  .clc-justify-content-md-end {
    justify-content: end !important;
  }
  .clc-justify-content-md-flex-start {
    justify-content: flex-start !important;
  }
  .clc-justify-content-md-flex-end {
    justify-content: flex-end !important;
  }
  .clc-justify-content-md-left {
    justify-content: left !important;
  }
  .clc-justify-content-md-right {
    justify-content: right !important;
  }
  .clc-justify-content-md-space-between {
    justify-content: space-between !important;
  }
  .clc-justify-content-md-space-around {
    justify-content: space-around !important;
  }
  .clc-justify-content-md-space-evenly {
    justify-content: space-evenly !important;
  }
  .clc-align-items-md-normal {
    align-items: normal !important;
  }
  .clc-align-items-md-stretch {
    align-items: stretch !important;
  }
  .clc-align-items-md-center {
    align-items: center !important;
  }
  .clc-align-items-md-start {
    align-items: start !important;
  }
  .clc-align-items-md-end {
    align-items: end !important;
  }
  .clc-align-items-md-flex-start {
    align-items: flex-start !important;
  }
  .clc-align-items-md-flex-end {
    align-items: flex-end !important;
  }
  .clc-overflow-md-auto {
    overflow: auto !important;
  }
  .clc-overflow-md-scroll {
    overflow: scroll !important;
  }
  .clc-overflow-md-visible {
    overflow: visible !important;
  }
  .clc-overflow-md-hidden {
    overflow: hidden !important;
  }
  .clc-w-md-25 {
    width: 25% !important;
  }
  .clc-w-md-50 {
    width: 50% !important;
  }
  .clc-w-md-75 {
    width: 75% !important;
  }
  .clc-w-md-100 {
    width: 100% !important;
  }
  .clc-vw-md-25 {
    width: 25vw !important;
  }
  .clc-vw-md-50 {
    width: 50vw !important;
  }
  .clc-vw-md-75 {
    width: 75vw !important;
  }
  .clc-vw-md-100 {
    width: 100vw !important;
  }
  .clc-w-md-auto {
    width: auto !important;
  }
  .clc-w-md-fit-content {
    width: fit-content !important;
  }
  .clc-w-md-min-content {
    width: min-content !important;
  }
  .clc-w-md-max-content {
    width: max-content !important;
  }
  .clc-w-md-stretch {
    width: stretch !important;
  }
  .clc-min-w-md-25 {
    min-width: 25% !important;
  }
  .clc-min-w-md-50 {
    min-width: 50% !important;
  }
  .clc-min-w-md-75 {
    min-width: 75% !important;
  }
  .clc-min-w-md-100 {
    min-width: 100% !important;
  }
  .clc-max-w-md-25 {
    max-width: 25% !important;
  }
  .clc-max-w-md-50 {
    max-width: 50% !important;
  }
  .clc-max-w-md-75 {
    max-width: 75% !important;
  }
  .clc-max-w-md-100 {
    max-width: 100% !important;
  }
  .clc-h-md-25 {
    height: 25% !important;
  }
  .clc-h-md-50 {
    height: 50% !important;
  }
  .clc-h-md-75 {
    height: 75% !important;
  }
  .clc-h-md-100 {
    height: 100% !important;
  }
  .clc-vh-md-25 {
    height: 25vh !important;
  }
  .clc-vh-md-50 {
    height: 50vh !important;
  }
  .clc-vh-md-75 {
    height: 75vh !important;
  }
  .clc-vh-md-100 {
    height: 100vh !important;
  }
  .clc-h-md-auto {
    height: auto !important;
  }
  .clc-min-h-md-25 {
    min-height: 25% !important;
  }
  .clc-min-h-md-50 {
    min-height: 50% !important;
  }
  .clc-min-h-md-75 {
    min-height: 75% !important;
  }
  .clc-min-h-md-100 {
    min-height: 100% !important;
  }
  .clc-max-h-md-25 {
    max-height: 25% !important;
  }
  .clc-max-h-md-50 {
    max-height: 50% !important;
  }
  .clc-max-h-md-75 {
    max-height: 75% !important;
  }
  .clc-max-h-md-100 {
    max-height: 100% !important;
  }
}
@media (min-width: 1280px) {
  .clc-display-lg-none {
    display: none !important;
  }
  .clc-display-lg-block {
    display: block !important;
  }
  .clc-display-lg-inline {
    display: inline !important;
  }
  .clc-display-lg-inline-block {
    display: inline-block !important;
  }
  .clc-display-lg-flex {
    display: flex !important;
  }
  .clc-display-lg-inline-flex {
    display: inline-flex !important;
  }
  .clc-display-lg-grid {
    display: grid !important;
  }
  .clc-display-lg-inline-grid {
    display: inline-grid !important;
  }
  .clc-justify-content-lg-normal {
    justify-content: normal !important;
  }
  .clc-justify-content-lg-stretch {
    justify-content: stretch !important;
  }
  .clc-justify-content-lg-center {
    justify-content: center !important;
  }
  .clc-justify-content-lg-start {
    justify-content: start !important;
  }
  .clc-justify-content-lg-end {
    justify-content: end !important;
  }
  .clc-justify-content-lg-flex-start {
    justify-content: flex-start !important;
  }
  .clc-justify-content-lg-flex-end {
    justify-content: flex-end !important;
  }
  .clc-justify-content-lg-left {
    justify-content: left !important;
  }
  .clc-justify-content-lg-right {
    justify-content: right !important;
  }
  .clc-justify-content-lg-space-between {
    justify-content: space-between !important;
  }
  .clc-justify-content-lg-space-around {
    justify-content: space-around !important;
  }
  .clc-justify-content-lg-space-evenly {
    justify-content: space-evenly !important;
  }
  .clc-align-items-lg-normal {
    align-items: normal !important;
  }
  .clc-align-items-lg-stretch {
    align-items: stretch !important;
  }
  .clc-align-items-lg-center {
    align-items: center !important;
  }
  .clc-align-items-lg-start {
    align-items: start !important;
  }
  .clc-align-items-lg-end {
    align-items: end !important;
  }
  .clc-align-items-lg-flex-start {
    align-items: flex-start !important;
  }
  .clc-align-items-lg-flex-end {
    align-items: flex-end !important;
  }
  .clc-overflow-lg-auto {
    overflow: auto !important;
  }
  .clc-overflow-lg-scroll {
    overflow: scroll !important;
  }
  .clc-overflow-lg-visible {
    overflow: visible !important;
  }
  .clc-overflow-lg-hidden {
    overflow: hidden !important;
  }
  .clc-w-lg-25 {
    width: 25% !important;
  }
  .clc-w-lg-50 {
    width: 50% !important;
  }
  .clc-w-lg-75 {
    width: 75% !important;
  }
  .clc-w-lg-100 {
    width: 100% !important;
  }
  .clc-vw-lg-25 {
    width: 25vw !important;
  }
  .clc-vw-lg-50 {
    width: 50vw !important;
  }
  .clc-vw-lg-75 {
    width: 75vw !important;
  }
  .clc-vw-lg-100 {
    width: 100vw !important;
  }
  .clc-w-lg-auto {
    width: auto !important;
  }
  .clc-w-lg-fit-content {
    width: fit-content !important;
  }
  .clc-w-lg-min-content {
    width: min-content !important;
  }
  .clc-w-lg-max-content {
    width: max-content !important;
  }
  .clc-w-lg-stretch {
    width: stretch !important;
  }
  .clc-min-w-lg-25 {
    min-width: 25% !important;
  }
  .clc-min-w-lg-50 {
    min-width: 50% !important;
  }
  .clc-min-w-lg-75 {
    min-width: 75% !important;
  }
  .clc-min-w-lg-100 {
    min-width: 100% !important;
  }
  .clc-max-w-lg-25 {
    max-width: 25% !important;
  }
  .clc-max-w-lg-50 {
    max-width: 50% !important;
  }
  .clc-max-w-lg-75 {
    max-width: 75% !important;
  }
  .clc-max-w-lg-100 {
    max-width: 100% !important;
  }
  .clc-h-lg-25 {
    height: 25% !important;
  }
  .clc-h-lg-50 {
    height: 50% !important;
  }
  .clc-h-lg-75 {
    height: 75% !important;
  }
  .clc-h-lg-100 {
    height: 100% !important;
  }
  .clc-vh-lg-25 {
    height: 25vh !important;
  }
  .clc-vh-lg-50 {
    height: 50vh !important;
  }
  .clc-vh-lg-75 {
    height: 75vh !important;
  }
  .clc-vh-lg-100 {
    height: 100vh !important;
  }
  .clc-h-lg-auto {
    height: auto !important;
  }
  .clc-min-h-lg-25 {
    min-height: 25% !important;
  }
  .clc-min-h-lg-50 {
    min-height: 50% !important;
  }
  .clc-min-h-lg-75 {
    min-height: 75% !important;
  }
  .clc-min-h-lg-100 {
    min-height: 100% !important;
  }
  .clc-max-h-lg-25 {
    max-height: 25% !important;
  }
  .clc-max-h-lg-50 {
    max-height: 50% !important;
  }
  .clc-max-h-lg-75 {
    max-height: 75% !important;
  }
  .clc-max-h-lg-100 {
    max-height: 100% !important;
  }
}
@media (min-width: 1920px) {
  .clc-display-xl-none {
    display: none !important;
  }
  .clc-display-xl-block {
    display: block !important;
  }
  .clc-display-xl-inline {
    display: inline !important;
  }
  .clc-display-xl-inline-block {
    display: inline-block !important;
  }
  .clc-display-xl-flex {
    display: flex !important;
  }
  .clc-display-xl-inline-flex {
    display: inline-flex !important;
  }
  .clc-display-xl-grid {
    display: grid !important;
  }
  .clc-display-xl-inline-grid {
    display: inline-grid !important;
  }
  .clc-justify-content-xl-normal {
    justify-content: normal !important;
  }
  .clc-justify-content-xl-stretch {
    justify-content: stretch !important;
  }
  .clc-justify-content-xl-center {
    justify-content: center !important;
  }
  .clc-justify-content-xl-start {
    justify-content: start !important;
  }
  .clc-justify-content-xl-end {
    justify-content: end !important;
  }
  .clc-justify-content-xl-flex-start {
    justify-content: flex-start !important;
  }
  .clc-justify-content-xl-flex-end {
    justify-content: flex-end !important;
  }
  .clc-justify-content-xl-left {
    justify-content: left !important;
  }
  .clc-justify-content-xl-right {
    justify-content: right !important;
  }
  .clc-justify-content-xl-space-between {
    justify-content: space-between !important;
  }
  .clc-justify-content-xl-space-around {
    justify-content: space-around !important;
  }
  .clc-justify-content-xl-space-evenly {
    justify-content: space-evenly !important;
  }
  .clc-align-items-xl-normal {
    align-items: normal !important;
  }
  .clc-align-items-xl-stretch {
    align-items: stretch !important;
  }
  .clc-align-items-xl-center {
    align-items: center !important;
  }
  .clc-align-items-xl-start {
    align-items: start !important;
  }
  .clc-align-items-xl-end {
    align-items: end !important;
  }
  .clc-align-items-xl-flex-start {
    align-items: flex-start !important;
  }
  .clc-align-items-xl-flex-end {
    align-items: flex-end !important;
  }
  .clc-overflow-xl-auto {
    overflow: auto !important;
  }
  .clc-overflow-xl-scroll {
    overflow: scroll !important;
  }
  .clc-overflow-xl-visible {
    overflow: visible !important;
  }
  .clc-overflow-xl-hidden {
    overflow: hidden !important;
  }
  .clc-w-xl-25 {
    width: 25% !important;
  }
  .clc-w-xl-50 {
    width: 50% !important;
  }
  .clc-w-xl-75 {
    width: 75% !important;
  }
  .clc-w-xl-100 {
    width: 100% !important;
  }
  .clc-vw-xl-25 {
    width: 25vw !important;
  }
  .clc-vw-xl-50 {
    width: 50vw !important;
  }
  .clc-vw-xl-75 {
    width: 75vw !important;
  }
  .clc-vw-xl-100 {
    width: 100vw !important;
  }
  .clc-w-xl-auto {
    width: auto !important;
  }
  .clc-w-xl-fit-content {
    width: fit-content !important;
  }
  .clc-w-xl-min-content {
    width: min-content !important;
  }
  .clc-w-xl-max-content {
    width: max-content !important;
  }
  .clc-w-xl-stretch {
    width: stretch !important;
  }
  .clc-min-w-xl-25 {
    min-width: 25% !important;
  }
  .clc-min-w-xl-50 {
    min-width: 50% !important;
  }
  .clc-min-w-xl-75 {
    min-width: 75% !important;
  }
  .clc-min-w-xl-100 {
    min-width: 100% !important;
  }
  .clc-max-w-xl-25 {
    max-width: 25% !important;
  }
  .clc-max-w-xl-50 {
    max-width: 50% !important;
  }
  .clc-max-w-xl-75 {
    max-width: 75% !important;
  }
  .clc-max-w-xl-100 {
    max-width: 100% !important;
  }
  .clc-h-xl-25 {
    height: 25% !important;
  }
  .clc-h-xl-50 {
    height: 50% !important;
  }
  .clc-h-xl-75 {
    height: 75% !important;
  }
  .clc-h-xl-100 {
    height: 100% !important;
  }
  .clc-vh-xl-25 {
    height: 25vh !important;
  }
  .clc-vh-xl-50 {
    height: 50vh !important;
  }
  .clc-vh-xl-75 {
    height: 75vh !important;
  }
  .clc-vh-xl-100 {
    height: 100vh !important;
  }
  .clc-h-xl-auto {
    height: auto !important;
  }
  .clc-min-h-xl-25 {
    min-height: 25% !important;
  }
  .clc-min-h-xl-50 {
    min-height: 50% !important;
  }
  .clc-min-h-xl-75 {
    min-height: 75% !important;
  }
  .clc-min-h-xl-100 {
    min-height: 100% !important;
  }
  .clc-max-h-xl-25 {
    max-height: 25% !important;
  }
  .clc-max-h-xl-50 {
    max-height: 50% !important;
  }
  .clc-max-h-xl-75 {
    max-height: 75% !important;
  }
  .clc-max-h-xl-100 {
    max-height: 100% !important;
  }
}
@media (min-width: 2560px) {
  .clc-display-xx-none {
    display: none !important;
  }
  .clc-display-xx-block {
    display: block !important;
  }
  .clc-display-xx-inline {
    display: inline !important;
  }
  .clc-display-xx-inline-block {
    display: inline-block !important;
  }
  .clc-display-xx-flex {
    display: flex !important;
  }
  .clc-display-xx-inline-flex {
    display: inline-flex !important;
  }
  .clc-display-xx-grid {
    display: grid !important;
  }
  .clc-display-xx-inline-grid {
    display: inline-grid !important;
  }
  .clc-justify-content-xx-normal {
    justify-content: normal !important;
  }
  .clc-justify-content-xx-stretch {
    justify-content: stretch !important;
  }
  .clc-justify-content-xx-center {
    justify-content: center !important;
  }
  .clc-justify-content-xx-start {
    justify-content: start !important;
  }
  .clc-justify-content-xx-end {
    justify-content: end !important;
  }
  .clc-justify-content-xx-flex-start {
    justify-content: flex-start !important;
  }
  .clc-justify-content-xx-flex-end {
    justify-content: flex-end !important;
  }
  .clc-justify-content-xx-left {
    justify-content: left !important;
  }
  .clc-justify-content-xx-right {
    justify-content: right !important;
  }
  .clc-justify-content-xx-space-between {
    justify-content: space-between !important;
  }
  .clc-justify-content-xx-space-around {
    justify-content: space-around !important;
  }
  .clc-justify-content-xx-space-evenly {
    justify-content: space-evenly !important;
  }
  .clc-align-items-xx-normal {
    align-items: normal !important;
  }
  .clc-align-items-xx-stretch {
    align-items: stretch !important;
  }
  .clc-align-items-xx-center {
    align-items: center !important;
  }
  .clc-align-items-xx-start {
    align-items: start !important;
  }
  .clc-align-items-xx-end {
    align-items: end !important;
  }
  .clc-align-items-xx-flex-start {
    align-items: flex-start !important;
  }
  .clc-align-items-xx-flex-end {
    align-items: flex-end !important;
  }
  .clc-overflow-xx-auto {
    overflow: auto !important;
  }
  .clc-overflow-xx-scroll {
    overflow: scroll !important;
  }
  .clc-overflow-xx-visible {
    overflow: visible !important;
  }
  .clc-overflow-xx-hidden {
    overflow: hidden !important;
  }
  .clc-w-xx-25 {
    width: 25% !important;
  }
  .clc-w-xx-50 {
    width: 50% !important;
  }
  .clc-w-xx-75 {
    width: 75% !important;
  }
  .clc-w-xx-100 {
    width: 100% !important;
  }
  .clc-vw-xx-25 {
    width: 25vw !important;
  }
  .clc-vw-xx-50 {
    width: 50vw !important;
  }
  .clc-vw-xx-75 {
    width: 75vw !important;
  }
  .clc-vw-xx-100 {
    width: 100vw !important;
  }
  .clc-w-xx-auto {
    width: auto !important;
  }
  .clc-w-xx-fit-content {
    width: fit-content !important;
  }
  .clc-w-xx-min-content {
    width: min-content !important;
  }
  .clc-w-xx-max-content {
    width: max-content !important;
  }
  .clc-w-xx-stretch {
    width: stretch !important;
  }
  .clc-min-w-xx-25 {
    min-width: 25% !important;
  }
  .clc-min-w-xx-50 {
    min-width: 50% !important;
  }
  .clc-min-w-xx-75 {
    min-width: 75% !important;
  }
  .clc-min-w-xx-100 {
    min-width: 100% !important;
  }
  .clc-max-w-xx-25 {
    max-width: 25% !important;
  }
  .clc-max-w-xx-50 {
    max-width: 50% !important;
  }
  .clc-max-w-xx-75 {
    max-width: 75% !important;
  }
  .clc-max-w-xx-100 {
    max-width: 100% !important;
  }
  .clc-h-xx-25 {
    height: 25% !important;
  }
  .clc-h-xx-50 {
    height: 50% !important;
  }
  .clc-h-xx-75 {
    height: 75% !important;
  }
  .clc-h-xx-100 {
    height: 100% !important;
  }
  .clc-vh-xx-25 {
    height: 25vh !important;
  }
  .clc-vh-xx-50 {
    height: 50vh !important;
  }
  .clc-vh-xx-75 {
    height: 75vh !important;
  }
  .clc-vh-xx-100 {
    height: 100vh !important;
  }
  .clc-h-xx-auto {
    height: auto !important;
  }
  .clc-min-h-xx-25 {
    min-height: 25% !important;
  }
  .clc-min-h-xx-50 {
    min-height: 50% !important;
  }
  .clc-min-h-xx-75 {
    min-height: 75% !important;
  }
  .clc-min-h-xx-100 {
    min-height: 100% !important;
  }
  .clc-max-h-xx-25 {
    max-height: 25% !important;
  }
  .clc-max-h-xx-50 {
    max-height: 50% !important;
  }
  .clc-max-h-xx-75 {
    max-height: 75% !important;
  }
  .clc-max-h-xx-100 {
    max-height: 100% !important;
  }
}
.clc-color-white {
  color: var(--clc-white) !important;
}

.clc-color-black {
  color: var(--clc-black) !important;
}

.clc-color-base {
  color: var(--clc-base) !important;
}

.clc-color-base-50 {
  color: var(--clc-base-50) !important;
}

.clc-color-base-100 {
  color: var(--clc-base-100) !important;
}

.clc-color-base-200 {
  color: var(--clc-base-200) !important;
}

.clc-color-base-300 {
  color: var(--clc-base-300) !important;
}

.clc-color-base-400 {
  color: var(--clc-base-400) !important;
}

.clc-color-base-500 {
  color: var(--clc-base-500) !important;
}

.clc-color-base-600 {
  color: var(--clc-base-600) !important;
}

.clc-color-base-700 {
  color: var(--clc-base-700) !important;
}

.clc-color-base-800 {
  color: var(--clc-base-800) !important;
}

.clc-color-base-900 {
  color: var(--clc-base-900) !important;
}

.clc-color-base-light {
  color: var(--clc-base-light) !important;
}

.clc-color-base-lighter {
  color: var(--clc-base-lighter) !important;
}

.clc-color-base-dark {
  color: var(--clc-base-dark) !important;
}

.clc-color-base-darker {
  color: var(--clc-base-darker) !important;
}

.clc-color-primary {
  color: var(--clc-primary) !important;
}

.clc-color-primary-light {
  color: var(--clc-primary-light) !important;
}

.clc-color-primary-lighter {
  color: var(--clc-primary-lighter) !important;
}

.clc-color-primary-dark {
  color: var(--clc-primary-dark) !important;
}

.clc-color-primary-darker {
  color: var(--clc-primary-darker) !important;
}

.clc-color-secondary {
  color: var(--clc-secondary) !important;
}

.clc-color-secondary-light {
  color: var(--clc-secondary-light) !important;
}

.clc-color-secondary-lighter {
  color: var(--clc-secondary-lighter) !important;
}

.clc-color-secondary-dark {
  color: var(--clc-secondary-dark) !important;
}

.clc-color-secondary-darker {
  color: var(--clc-secondary-darker) !important;
}

.clc-color-info {
  color: var(--clc-info) !important;
}

.clc-color-info-light {
  color: var(--clc-info-light) !important;
}

.clc-color-info-lighter {
  color: var(--clc-info-lighter) !important;
}

.clc-color-info-dark {
  color: var(--clc-info-dark) !important;
}

.clc-color-info-darker {
  color: var(--clc-info-darker) !important;
}

.clc-color-success {
  color: var(--clc-success) !important;
}

.clc-color-success-light {
  color: var(--clc-success-light) !important;
}

.clc-color-success-lighter {
  color: var(--clc-success-lighter) !important;
}

.clc-color-success-dark {
  color: var(--clc-success-dark) !important;
}

.clc-color-success-darker {
  color: var(--clc-success-darker) !important;
}

.clc-color-warning {
  color: var(--clc-warning) !important;
}

.clc-color-warning-light {
  color: var(--clc-warning-light) !important;
}

.clc-color-warning-lighter {
  color: var(--clc-warning-lighter) !important;
}

.clc-color-warning-dark {
  color: var(--clc-warning-dark) !important;
}

.clc-color-warning-darker {
  color: var(--clc-warning-darker) !important;
}

.clc-color-danger {
  color: var(--clc-danger) !important;
}

.clc-color-danger-light {
  color: var(--clc-danger-light) !important;
}

.clc-color-danger-lighter {
  color: var(--clc-danger-lighter) !important;
}

.clc-color-danger-dark {
  color: var(--clc-danger-dark) !important;
}

.clc-color-danger-darker {
  color: var(--clc-danger-darker) !important;
}

.clc-color-on-base {
  color: var(--clc-on-base) !important;
}

.clc-color-on-base-light {
  color: var(--clc-on-base-light) !important;
}

.clc-color-on-base-lighter {
  color: var(--clc-on-base-lighter) !important;
}

.clc-color-on-base-dark {
  color: var(--clc-on-base-dark) !important;
}

.clc-color-on-base-darker {
  color: var(--clc-on-base-darker) !important;
}

.clc-color-on-primary {
  color: var(--clc-on-primary) !important;
}

.clc-color-on-primary-light {
  color: var(--clc-on-primary-light) !important;
}

.clc-color-on-primary-lighter {
  color: var(--clc-on-primary-lighter) !important;
}

.clc-color-on-primary-dark {
  color: var(--clc-on-primary-dark) !important;
}

.clc-color-on-primary-darker {
  color: var(--clc-on-primary-darker) !important;
}

.clc-color-on-secondary {
  color: var(--clc-on-secondary) !important;
}

.clc-color-on-secondary-light {
  color: var(--clc-on-secondary-light) !important;
}

.clc-color-on-secondary-lighter {
  color: var(--clc-on-secondary-lighter) !important;
}

.clc-color-on-secondary-dark {
  color: var(--clc-on-secondary-dark) !important;
}

.clc-color-on-secondary-darker {
  color: var(--clc-on-secondary-darker) !important;
}

.clc-color-on-info {
  color: var(--clc-on-info) !important;
}

.clc-color-on-info-light {
  color: var(--clc-on-info-light) !important;
}

.clc-color-on-info-lighter {
  color: var(--clc-on-info-lighter) !important;
}

.clc-color-on-info-dark {
  color: var(--clc-on-info-dark) !important;
}

.clc-color-on-info-darker {
  color: var(--clc-on-info-darker) !important;
}

.clc-color-on-success {
  color: var(--clc-on-success) !important;
}

.clc-color-on-success-light {
  color: var(--clc-on-success-light) !important;
}

.clc-color-on-success-lighter {
  color: var(--clc-on-success-lighter) !important;
}

.clc-color-on-success-dark {
  color: var(--clc-on-success-dark) !important;
}

.clc-color-on-success-darker {
  color: var(--clc-on-success-darker) !important;
}

.clc-color-on-warning {
  color: var(--clc-on-warning) !important;
}

.clc-color-on-warning-light {
  color: var(--clc-on-warning-light) !important;
}

.clc-color-on-warning-lighter {
  color: var(--clc-on-warning-lighter) !important;
}

.clc-color-on-warning-dark {
  color: var(--clc-on-warning-dark) !important;
}

.clc-color-on-warning-darker {
  color: var(--clc-on-warning-darker) !important;
}

.clc-color-on-danger {
  color: var(--clc-on-danger) !important;
}

.clc-color-on-danger-light {
  color: var(--clc-on-danger-light) !important;
}

.clc-color-on-danger-lighter {
  color: var(--clc-on-danger-lighter) !important;
}

.clc-color-on-danger-dark {
  color: var(--clc-on-danger-dark) !important;
}

.clc-color-on-danger-darker {
  color: var(--clc-on-danger-darker) !important;
}

.clc-color-series-1 {
  color: var(--clc-series-1) !important;
}

.clc-color-series-2 {
  color: var(--clc-series-2) !important;
}

.clc-color-series-3 {
  color: var(--clc-series-3) !important;
}

.clc-color-series-4 {
  color: var(--clc-series-4) !important;
}

.clc-color-series-5 {
  color: var(--clc-series-5) !important;
}

.clc-color-series-6 {
  color: var(--clc-series-6) !important;
}

.clc-color-series-7 {
  color: var(--clc-series-7) !important;
}

.clc-color-series-8 {
  color: var(--clc-series-8) !important;
}

.clc-color-series-9 {
  color: var(--clc-series-9) !important;
}

.clc-color-series-10 {
  color: var(--clc-series-10) !important;
}

.clc-color-series-11 {
  color: var(--clc-series-11) !important;
}

.clc-color-series-12 {
  color: var(--clc-series-12) !important;
}

.clc-color-series-13 {
  color: var(--clc-series-13) !important;
}

.clc-color-series-14 {
  color: var(--clc-series-14) !important;
}

.clc-color-series-15 {
  color: var(--clc-series-15) !important;
}

.clc-color-series-16 {
  color: var(--clc-series-16) !important;
}

.clc-color-series-17 {
  color: var(--clc-series-17) !important;
}

.clc-color-series-18 {
  color: var(--clc-series-18) !important;
}

.clc-color-series-19 {
  color: var(--clc-series-19) !important;
}

.clc-color-series-20 {
  color: var(--clc-series-20) !important;
}

.clc-color-series-21 {
  color: var(--clc-series-21) !important;
}

.clc-color-series-22 {
  color: var(--clc-series-22) !important;
}

.clc-color-series-23 {
  color: var(--clc-series-23) !important;
}

.clc-color-series-24 {
  color: var(--clc-series-24) !important;
}

.clc-background-color-white {
  background-color: var(--clc-white) !important;
}

.clc-background-color-black {
  background-color: var(--clc-black) !important;
}

.clc-background-color-base {
  background-color: var(--clc-base) !important;
}

.clc-background-color-base-50 {
  background-color: var(--clc-base-50) !important;
}

.clc-background-color-base-100 {
  background-color: var(--clc-base-100) !important;
}

.clc-background-color-base-200 {
  background-color: var(--clc-base-200) !important;
}

.clc-background-color-base-300 {
  background-color: var(--clc-base-300) !important;
}

.clc-background-color-base-400 {
  background-color: var(--clc-base-400) !important;
}

.clc-background-color-base-500 {
  background-color: var(--clc-base-500) !important;
}

.clc-background-color-base-600 {
  background-color: var(--clc-base-600) !important;
}

.clc-background-color-base-700 {
  background-color: var(--clc-base-700) !important;
}

.clc-background-color-base-800 {
  background-color: var(--clc-base-800) !important;
}

.clc-background-color-base-900 {
  background-color: var(--clc-base-900) !important;
}

.clc-background-color-base-light {
  background-color: var(--clc-base-light) !important;
}

.clc-background-color-base-lighter {
  background-color: var(--clc-base-lighter) !important;
}

.clc-background-color-base-dark {
  background-color: var(--clc-base-dark) !important;
}

.clc-background-color-base-darker {
  background-color: var(--clc-base-darker) !important;
}

.clc-background-color-primary {
  background-color: var(--clc-primary) !important;
}

.clc-background-color-primary-light {
  background-color: var(--clc-primary-light) !important;
}

.clc-background-color-primary-lighter {
  background-color: var(--clc-primary-lighter) !important;
}

.clc-background-color-primary-dark {
  background-color: var(--clc-primary-dark) !important;
}

.clc-background-color-primary-darker {
  background-color: var(--clc-primary-darker) !important;
}

.clc-background-color-secondary {
  background-color: var(--clc-secondary) !important;
}

.clc-background-color-secondary-light {
  background-color: var(--clc-secondary-light) !important;
}

.clc-background-color-secondary-lighter {
  background-color: var(--clc-secondary-lighter) !important;
}

.clc-background-color-secondary-dark {
  background-color: var(--clc-secondary-dark) !important;
}

.clc-background-color-secondary-darker {
  background-color: var(--clc-secondary-darker) !important;
}

.clc-background-color-info {
  background-color: var(--clc-info) !important;
}

.clc-background-color-info-light {
  background-color: var(--clc-info-light) !important;
}

.clc-background-color-info-lighter {
  background-color: var(--clc-info-lighter) !important;
}

.clc-background-color-info-dark {
  background-color: var(--clc-info-dark) !important;
}

.clc-background-color-info-darker {
  background-color: var(--clc-info-darker) !important;
}

.clc-background-color-success {
  background-color: var(--clc-success) !important;
}

.clc-background-color-success-light {
  background-color: var(--clc-success-light) !important;
}

.clc-background-color-success-lighter {
  background-color: var(--clc-success-lighter) !important;
}

.clc-background-color-success-dark {
  background-color: var(--clc-success-dark) !important;
}

.clc-background-color-success-darker {
  background-color: var(--clc-success-darker) !important;
}

.clc-background-color-warning {
  background-color: var(--clc-warning) !important;
}

.clc-background-color-warning-light {
  background-color: var(--clc-warning-light) !important;
}

.clc-background-color-warning-lighter {
  background-color: var(--clc-warning-lighter) !important;
}

.clc-background-color-warning-dark {
  background-color: var(--clc-warning-dark) !important;
}

.clc-background-color-warning-darker {
  background-color: var(--clc-warning-darker) !important;
}

.clc-background-color-danger {
  background-color: var(--clc-danger) !important;
}

.clc-background-color-danger-light {
  background-color: var(--clc-danger-light) !important;
}

.clc-background-color-danger-lighter {
  background-color: var(--clc-danger-lighter) !important;
}

.clc-background-color-danger-dark {
  background-color: var(--clc-danger-dark) !important;
}

.clc-background-color-danger-darker {
  background-color: var(--clc-danger-darker) !important;
}

.clc-background-color-on-base {
  background-color: var(--clc-on-base) !important;
}

.clc-background-color-on-base-light {
  background-color: var(--clc-on-base-light) !important;
}

.clc-background-color-on-base-lighter {
  background-color: var(--clc-on-base-lighter) !important;
}

.clc-background-color-on-base-dark {
  background-color: var(--clc-on-base-dark) !important;
}

.clc-background-color-on-base-darker {
  background-color: var(--clc-on-base-darker) !important;
}

.clc-background-color-on-primary {
  background-color: var(--clc-on-primary) !important;
}

.clc-background-color-on-primary-light {
  background-color: var(--clc-on-primary-light) !important;
}

.clc-background-color-on-primary-lighter {
  background-color: var(--clc-on-primary-lighter) !important;
}

.clc-background-color-on-primary-dark {
  background-color: var(--clc-on-primary-dark) !important;
}

.clc-background-color-on-primary-darker {
  background-color: var(--clc-on-primary-darker) !important;
}

.clc-background-color-on-secondary {
  background-color: var(--clc-on-secondary) !important;
}

.clc-background-color-on-secondary-light {
  background-color: var(--clc-on-secondary-light) !important;
}

.clc-background-color-on-secondary-lighter {
  background-color: var(--clc-on-secondary-lighter) !important;
}

.clc-background-color-on-secondary-dark {
  background-color: var(--clc-on-secondary-dark) !important;
}

.clc-background-color-on-secondary-darker {
  background-color: var(--clc-on-secondary-darker) !important;
}

.clc-background-color-on-info {
  background-color: var(--clc-on-info) !important;
}

.clc-background-color-on-info-light {
  background-color: var(--clc-on-info-light) !important;
}

.clc-background-color-on-info-lighter {
  background-color: var(--clc-on-info-lighter) !important;
}

.clc-background-color-on-info-dark {
  background-color: var(--clc-on-info-dark) !important;
}

.clc-background-color-on-info-darker {
  background-color: var(--clc-on-info-darker) !important;
}

.clc-background-color-on-success {
  background-color: var(--clc-on-success) !important;
}

.clc-background-color-on-success-light {
  background-color: var(--clc-on-success-light) !important;
}

.clc-background-color-on-success-lighter {
  background-color: var(--clc-on-success-lighter) !important;
}

.clc-background-color-on-success-dark {
  background-color: var(--clc-on-success-dark) !important;
}

.clc-background-color-on-success-darker {
  background-color: var(--clc-on-success-darker) !important;
}

.clc-background-color-on-warning {
  background-color: var(--clc-on-warning) !important;
}

.clc-background-color-on-warning-light {
  background-color: var(--clc-on-warning-light) !important;
}

.clc-background-color-on-warning-lighter {
  background-color: var(--clc-on-warning-lighter) !important;
}

.clc-background-color-on-warning-dark {
  background-color: var(--clc-on-warning-dark) !important;
}

.clc-background-color-on-warning-darker {
  background-color: var(--clc-on-warning-darker) !important;
}

.clc-background-color-on-danger {
  background-color: var(--clc-on-danger) !important;
}

.clc-background-color-on-danger-light {
  background-color: var(--clc-on-danger-light) !important;
}

.clc-background-color-on-danger-lighter {
  background-color: var(--clc-on-danger-lighter) !important;
}

.clc-background-color-on-danger-dark {
  background-color: var(--clc-on-danger-dark) !important;
}

.clc-background-color-on-danger-darker {
  background-color: var(--clc-on-danger-darker) !important;
}

.clc-background-color-series-1 {
  background-color: var(--clc-series-1) !important;
}

.clc-background-color-series-2 {
  background-color: var(--clc-series-2) !important;
}

.clc-background-color-series-3 {
  background-color: var(--clc-series-3) !important;
}

.clc-background-color-series-4 {
  background-color: var(--clc-series-4) !important;
}

.clc-background-color-series-5 {
  background-color: var(--clc-series-5) !important;
}

.clc-background-color-series-6 {
  background-color: var(--clc-series-6) !important;
}

.clc-background-color-series-7 {
  background-color: var(--clc-series-7) !important;
}

.clc-background-color-series-8 {
  background-color: var(--clc-series-8) !important;
}

.clc-background-color-series-9 {
  background-color: var(--clc-series-9) !important;
}

.clc-background-color-series-10 {
  background-color: var(--clc-series-10) !important;
}

.clc-background-color-series-11 {
  background-color: var(--clc-series-11) !important;
}

.clc-background-color-series-12 {
  background-color: var(--clc-series-12) !important;
}

.clc-background-color-series-13 {
  background-color: var(--clc-series-13) !important;
}

.clc-background-color-series-14 {
  background-color: var(--clc-series-14) !important;
}

.clc-background-color-series-15 {
  background-color: var(--clc-series-15) !important;
}

.clc-background-color-series-16 {
  background-color: var(--clc-series-16) !important;
}

.clc-background-color-series-17 {
  background-color: var(--clc-series-17) !important;
}

.clc-background-color-series-18 {
  background-color: var(--clc-series-18) !important;
}

.clc-background-color-series-19 {
  background-color: var(--clc-series-19) !important;
}

.clc-background-color-series-20 {
  background-color: var(--clc-series-20) !important;
}

.clc-background-color-series-21 {
  background-color: var(--clc-series-21) !important;
}

.clc-background-color-series-22 {
  background-color: var(--clc-series-22) !important;
}

.clc-background-color-series-23 {
  background-color: var(--clc-series-23) !important;
}

.clc-background-color-series-24 {
  background-color: var(--clc-series-24) !important;
}

.clc-border {
  border-width: 0;
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base);
}

.clc-border-0 {
  border-width: 0 !important;
}

.clc-border-start {
  border-width: 0;
  border-inline-start-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base);
}

.clc-border-start-0 {
  border-inline-start-width: 0 !important;
}

.clc-border-end {
  border-width: 0;
  border-inline-end-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base);
}

.clc-border-end-0 {
  border-inline-end-width: 0 !important;
}

.clc-border-left {
  border-width: 0;
  border-left-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base);
}

.clc-border-left-0 {
  border-left-width: 0 !important;
}

.clc-border-right {
  border-width: 0;
  border-right-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base);
}

.clc-border-right-0 {
  border-right-width: 0 !important;
}

.clc-border-top {
  border-width: 0;
  border-top-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base);
}

.clc-border-top-0 {
  border-top-width: 0 !important;
}

.clc-border-bottom {
  border-width: 0;
  border-bottom-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base);
}

.clc-border-bottom-0 {
  border-bottom-width: 0 !important;
}

.clc-border-white {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-white) !important;
}

.clc-border-black {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-black) !important;
}

.clc-border-base {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base) !important;
}

.clc-border-base-50 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-50) !important;
}

.clc-border-base-100 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-100) !important;
}

.clc-border-base-200 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-200) !important;
}

.clc-border-base-300 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-300) !important;
}

.clc-border-base-400 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-400) !important;
}

.clc-border-base-500 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-500) !important;
}

.clc-border-base-600 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-600) !important;
}

.clc-border-base-700 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-700) !important;
}

.clc-border-base-800 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-800) !important;
}

.clc-border-base-900 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-900) !important;
}

.clc-border-base-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-light) !important;
}

.clc-border-base-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-lighter) !important;
}

.clc-border-base-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-dark) !important;
}

.clc-border-base-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-base-darker) !important;
}

.clc-border-primary {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-primary) !important;
}

.clc-border-primary-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-primary-light) !important;
}

.clc-border-primary-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-primary-lighter) !important;
}

.clc-border-primary-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-primary-dark) !important;
}

.clc-border-primary-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-primary-darker) !important;
}

.clc-border-secondary {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-secondary) !important;
}

.clc-border-secondary-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-secondary-light) !important;
}

.clc-border-secondary-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-secondary-lighter) !important;
}

.clc-border-secondary-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-secondary-dark) !important;
}

.clc-border-secondary-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-secondary-darker) !important;
}

.clc-border-info {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-info) !important;
}

.clc-border-info-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-info-light) !important;
}

.clc-border-info-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-info-lighter) !important;
}

.clc-border-info-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-info-dark) !important;
}

.clc-border-info-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-info-darker) !important;
}

.clc-border-success {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-success) !important;
}

.clc-border-success-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-success-light) !important;
}

.clc-border-success-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-success-lighter) !important;
}

.clc-border-success-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-success-dark) !important;
}

.clc-border-success-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-success-darker) !important;
}

.clc-border-warning {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-warning) !important;
}

.clc-border-warning-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-warning-light) !important;
}

.clc-border-warning-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-warning-lighter) !important;
}

.clc-border-warning-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-warning-dark) !important;
}

.clc-border-warning-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-warning-darker) !important;
}

.clc-border-danger {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-danger) !important;
}

.clc-border-danger-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-danger-light) !important;
}

.clc-border-danger-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-danger-lighter) !important;
}

.clc-border-danger-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-danger-dark) !important;
}

.clc-border-danger-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-danger-darker) !important;
}

.clc-border-on-base {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-base) !important;
}

.clc-border-on-base-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-base-light) !important;
}

.clc-border-on-base-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-base-lighter) !important;
}

.clc-border-on-base-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-base-dark) !important;
}

.clc-border-on-base-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-base-darker) !important;
}

.clc-border-on-primary {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-primary) !important;
}

.clc-border-on-primary-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-primary-light) !important;
}

.clc-border-on-primary-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-primary-lighter) !important;
}

.clc-border-on-primary-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-primary-dark) !important;
}

.clc-border-on-primary-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-primary-darker) !important;
}

.clc-border-on-secondary {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-secondary) !important;
}

.clc-border-on-secondary-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-secondary-light) !important;
}

.clc-border-on-secondary-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-secondary-lighter) !important;
}

.clc-border-on-secondary-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-secondary-dark) !important;
}

.clc-border-on-secondary-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-secondary-darker) !important;
}

.clc-border-on-info {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-info) !important;
}

.clc-border-on-info-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-info-light) !important;
}

.clc-border-on-info-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-info-lighter) !important;
}

.clc-border-on-info-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-info-dark) !important;
}

.clc-border-on-info-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-info-darker) !important;
}

.clc-border-on-success {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-success) !important;
}

.clc-border-on-success-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-success-light) !important;
}

.clc-border-on-success-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-success-lighter) !important;
}

.clc-border-on-success-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-success-dark) !important;
}

.clc-border-on-success-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-success-darker) !important;
}

.clc-border-on-warning {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-warning) !important;
}

.clc-border-on-warning-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-warning-light) !important;
}

.clc-border-on-warning-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-warning-lighter) !important;
}

.clc-border-on-warning-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-warning-dark) !important;
}

.clc-border-on-warning-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-warning-darker) !important;
}

.clc-border-on-danger {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-danger) !important;
}

.clc-border-on-danger-light {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-danger-light) !important;
}

.clc-border-on-danger-lighter {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-danger-lighter) !important;
}

.clc-border-on-danger-dark {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-danger-dark) !important;
}

.clc-border-on-danger-darker {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-on-danger-darker) !important;
}

.clc-border-series-1 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-1) !important;
}

.clc-border-series-2 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-2) !important;
}

.clc-border-series-3 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-3) !important;
}

.clc-border-series-4 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-4) !important;
}

.clc-border-series-5 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-5) !important;
}

.clc-border-series-6 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-6) !important;
}

.clc-border-series-7 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-7) !important;
}

.clc-border-series-8 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-8) !important;
}

.clc-border-series-9 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-9) !important;
}

.clc-border-series-10 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-10) !important;
}

.clc-border-series-11 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-11) !important;
}

.clc-border-series-12 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-12) !important;
}

.clc-border-series-13 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-13) !important;
}

.clc-border-series-14 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-14) !important;
}

.clc-border-series-15 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-15) !important;
}

.clc-border-series-16 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-16) !important;
}

.clc-border-series-17 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-17) !important;
}

.clc-border-series-18 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-18) !important;
}

.clc-border-series-19 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-19) !important;
}

.clc-border-series-20 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-20) !important;
}

.clc-border-series-21 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-21) !important;
}

.clc-border-series-22 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-22) !important;
}

.clc-border-series-23 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-23) !important;
}

.clc-border-series-24 {
  border-width: var(--clc-border-width);
  border-style: solid;
  border-color: var(--clc-series-24) !important;
}

.clc-border-color-white {
  border-color: var(--clc-white) !important;
}

.clc-border-color-black {
  border-color: var(--clc-black) !important;
}

.clc-border-color-base {
  border-color: var(--clc-base) !important;
}

.clc-border-color-base-50 {
  border-color: var(--clc-base-50) !important;
}

.clc-border-color-base-100 {
  border-color: var(--clc-base-100) !important;
}

.clc-border-color-base-200 {
  border-color: var(--clc-base-200) !important;
}

.clc-border-color-base-300 {
  border-color: var(--clc-base-300) !important;
}

.clc-border-color-base-400 {
  border-color: var(--clc-base-400) !important;
}

.clc-border-color-base-500 {
  border-color: var(--clc-base-500) !important;
}

.clc-border-color-base-600 {
  border-color: var(--clc-base-600) !important;
}

.clc-border-color-base-700 {
  border-color: var(--clc-base-700) !important;
}

.clc-border-color-base-800 {
  border-color: var(--clc-base-800) !important;
}

.clc-border-color-base-900 {
  border-color: var(--clc-base-900) !important;
}

.clc-border-color-base-light {
  border-color: var(--clc-base-light) !important;
}

.clc-border-color-base-lighter {
  border-color: var(--clc-base-lighter) !important;
}

.clc-border-color-base-dark {
  border-color: var(--clc-base-dark) !important;
}

.clc-border-color-base-darker {
  border-color: var(--clc-base-darker) !important;
}

.clc-border-color-primary {
  border-color: var(--clc-primary) !important;
}

.clc-border-color-primary-light {
  border-color: var(--clc-primary-light) !important;
}

.clc-border-color-primary-lighter {
  border-color: var(--clc-primary-lighter) !important;
}

.clc-border-color-primary-dark {
  border-color: var(--clc-primary-dark) !important;
}

.clc-border-color-primary-darker {
  border-color: var(--clc-primary-darker) !important;
}

.clc-border-color-secondary {
  border-color: var(--clc-secondary) !important;
}

.clc-border-color-secondary-light {
  border-color: var(--clc-secondary-light) !important;
}

.clc-border-color-secondary-lighter {
  border-color: var(--clc-secondary-lighter) !important;
}

.clc-border-color-secondary-dark {
  border-color: var(--clc-secondary-dark) !important;
}

.clc-border-color-secondary-darker {
  border-color: var(--clc-secondary-darker) !important;
}

.clc-border-color-info {
  border-color: var(--clc-info) !important;
}

.clc-border-color-info-light {
  border-color: var(--clc-info-light) !important;
}

.clc-border-color-info-lighter {
  border-color: var(--clc-info-lighter) !important;
}

.clc-border-color-info-dark {
  border-color: var(--clc-info-dark) !important;
}

.clc-border-color-info-darker {
  border-color: var(--clc-info-darker) !important;
}

.clc-border-color-success {
  border-color: var(--clc-success) !important;
}

.clc-border-color-success-light {
  border-color: var(--clc-success-light) !important;
}

.clc-border-color-success-lighter {
  border-color: var(--clc-success-lighter) !important;
}

.clc-border-color-success-dark {
  border-color: var(--clc-success-dark) !important;
}

.clc-border-color-success-darker {
  border-color: var(--clc-success-darker) !important;
}

.clc-border-color-warning {
  border-color: var(--clc-warning) !important;
}

.clc-border-color-warning-light {
  border-color: var(--clc-warning-light) !important;
}

.clc-border-color-warning-lighter {
  border-color: var(--clc-warning-lighter) !important;
}

.clc-border-color-warning-dark {
  border-color: var(--clc-warning-dark) !important;
}

.clc-border-color-warning-darker {
  border-color: var(--clc-warning-darker) !important;
}

.clc-border-color-danger {
  border-color: var(--clc-danger) !important;
}

.clc-border-color-danger-light {
  border-color: var(--clc-danger-light) !important;
}

.clc-border-color-danger-lighter {
  border-color: var(--clc-danger-lighter) !important;
}

.clc-border-color-danger-dark {
  border-color: var(--clc-danger-dark) !important;
}

.clc-border-color-danger-darker {
  border-color: var(--clc-danger-darker) !important;
}

.clc-border-color-on-base {
  border-color: var(--clc-on-base) !important;
}

.clc-border-color-on-base-light {
  border-color: var(--clc-on-base-light) !important;
}

.clc-border-color-on-base-lighter {
  border-color: var(--clc-on-base-lighter) !important;
}

.clc-border-color-on-base-dark {
  border-color: var(--clc-on-base-dark) !important;
}

.clc-border-color-on-base-darker {
  border-color: var(--clc-on-base-darker) !important;
}

.clc-border-color-on-primary {
  border-color: var(--clc-on-primary) !important;
}

.clc-border-color-on-primary-light {
  border-color: var(--clc-on-primary-light) !important;
}

.clc-border-color-on-primary-lighter {
  border-color: var(--clc-on-primary-lighter) !important;
}

.clc-border-color-on-primary-dark {
  border-color: var(--clc-on-primary-dark) !important;
}

.clc-border-color-on-primary-darker {
  border-color: var(--clc-on-primary-darker) !important;
}

.clc-border-color-on-secondary {
  border-color: var(--clc-on-secondary) !important;
}

.clc-border-color-on-secondary-light {
  border-color: var(--clc-on-secondary-light) !important;
}

.clc-border-color-on-secondary-lighter {
  border-color: var(--clc-on-secondary-lighter) !important;
}

.clc-border-color-on-secondary-dark {
  border-color: var(--clc-on-secondary-dark) !important;
}

.clc-border-color-on-secondary-darker {
  border-color: var(--clc-on-secondary-darker) !important;
}

.clc-border-color-on-info {
  border-color: var(--clc-on-info) !important;
}

.clc-border-color-on-info-light {
  border-color: var(--clc-on-info-light) !important;
}

.clc-border-color-on-info-lighter {
  border-color: var(--clc-on-info-lighter) !important;
}

.clc-border-color-on-info-dark {
  border-color: var(--clc-on-info-dark) !important;
}

.clc-border-color-on-info-darker {
  border-color: var(--clc-on-info-darker) !important;
}

.clc-border-color-on-success {
  border-color: var(--clc-on-success) !important;
}

.clc-border-color-on-success-light {
  border-color: var(--clc-on-success-light) !important;
}

.clc-border-color-on-success-lighter {
  border-color: var(--clc-on-success-lighter) !important;
}

.clc-border-color-on-success-dark {
  border-color: var(--clc-on-success-dark) !important;
}

.clc-border-color-on-success-darker {
  border-color: var(--clc-on-success-darker) !important;
}

.clc-border-color-on-warning {
  border-color: var(--clc-on-warning) !important;
}

.clc-border-color-on-warning-light {
  border-color: var(--clc-on-warning-light) !important;
}

.clc-border-color-on-warning-lighter {
  border-color: var(--clc-on-warning-lighter) !important;
}

.clc-border-color-on-warning-dark {
  border-color: var(--clc-on-warning-dark) !important;
}

.clc-border-color-on-warning-darker {
  border-color: var(--clc-on-warning-darker) !important;
}

.clc-border-color-on-danger {
  border-color: var(--clc-on-danger) !important;
}

.clc-border-color-on-danger-light {
  border-color: var(--clc-on-danger-light) !important;
}

.clc-border-color-on-danger-lighter {
  border-color: var(--clc-on-danger-lighter) !important;
}

.clc-border-color-on-danger-dark {
  border-color: var(--clc-on-danger-dark) !important;
}

.clc-border-color-on-danger-darker {
  border-color: var(--clc-on-danger-darker) !important;
}

.clc-border-color-series-1 {
  border-color: var(--clc-series-1) !important;
}

.clc-border-color-series-2 {
  border-color: var(--clc-series-2) !important;
}

.clc-border-color-series-3 {
  border-color: var(--clc-series-3) !important;
}

.clc-border-color-series-4 {
  border-color: var(--clc-series-4) !important;
}

.clc-border-color-series-5 {
  border-color: var(--clc-series-5) !important;
}

.clc-border-color-series-6 {
  border-color: var(--clc-series-6) !important;
}

.clc-border-color-series-7 {
  border-color: var(--clc-series-7) !important;
}

.clc-border-color-series-8 {
  border-color: var(--clc-series-8) !important;
}

.clc-border-color-series-9 {
  border-color: var(--clc-series-9) !important;
}

.clc-border-color-series-10 {
  border-color: var(--clc-series-10) !important;
}

.clc-border-color-series-11 {
  border-color: var(--clc-series-11) !important;
}

.clc-border-color-series-12 {
  border-color: var(--clc-series-12) !important;
}

.clc-border-color-series-13 {
  border-color: var(--clc-series-13) !important;
}

.clc-border-color-series-14 {
  border-color: var(--clc-series-14) !important;
}

.clc-border-color-series-15 {
  border-color: var(--clc-series-15) !important;
}

.clc-border-color-series-16 {
  border-color: var(--clc-series-16) !important;
}

.clc-border-color-series-17 {
  border-color: var(--clc-series-17) !important;
}

.clc-border-color-series-18 {
  border-color: var(--clc-series-18) !important;
}

.clc-border-color-series-19 {
  border-color: var(--clc-series-19) !important;
}

.clc-border-color-series-20 {
  border-color: var(--clc-series-20) !important;
}

.clc-border-color-series-21 {
  border-color: var(--clc-series-21) !important;
}

.clc-border-color-series-22 {
  border-color: var(--clc-series-22) !important;
}

.clc-border-color-series-23 {
  border-color: var(--clc-series-23) !important;
}

.clc-border-color-series-24 {
  border-color: var(--clc-series-24) !important;
}

.clc-ripple {
  position: relative;
  overflow: hidden;
}
.clc-ripple:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%;
  transition: background-size var(--clc-ripple-duration, 0.8s), opacity var(--clc-ripple-duration, 0.8s);
  pointer-events: none;
}
.clc-ripple.clc-state-disabled:before {
  background: transparent;
}
.clc-ripple:active:before {
  transition: background-size 0s, opacity 0s;
  opacity: 0.32;
  background-size: 0%;
}

body {
  margin: 0;
}

.clc-m-0 {
  margin: 0 !important;
}

.clc-my-0,
.clc-mt-0 {
  margin-top: 0 !important;
}

.clc-mx-0,
.clc-mr-0 {
  margin-right: 0 !important;
}

.clc-my-0,
.clc-mb-0 {
  margin-bottom: 0 !important;
}

.clc-mx-0,
.clc-ml-0 {
  margin-left: 0 !important;
}

.clc-ms-0 {
  margin-inline-start: 0 !important;
}

.clc-me-0 {
  margin-inline-end: 0 !important;
}

.clc-m-05 {
  margin: 0.125rem !important;
}

.clc-my-05,
.clc-mt-05 {
  margin-top: 0.125rem !important;
}

.clc-mx-05,
.clc-mr-05 {
  margin-right: 0.125rem !important;
}

.clc-my-05,
.clc-mb-05 {
  margin-bottom: 0.125rem !important;
}

.clc-mx-05,
.clc-ml-05 {
  margin-left: 0.125rem !important;
}

.clc-ms-05 {
  margin-inline-start: 0.125rem !important;
}

.clc-me-05 {
  margin-inline-end: 0.125rem !important;
}

.clc-m-1 {
  margin: 0.25rem !important;
}

.clc-my-1,
.clc-mt-1 {
  margin-top: 0.25rem !important;
}

.clc-mx-1,
.clc-mr-1 {
  margin-right: 0.25rem !important;
}

.clc-my-1,
.clc-mb-1 {
  margin-bottom: 0.25rem !important;
}

.clc-mx-1,
.clc-ml-1 {
  margin-left: 0.25rem !important;
}

.clc-ms-1 {
  margin-inline-start: 0.25rem !important;
}

.clc-me-1 {
  margin-inline-end: 0.25rem !important;
}

.clc-m-2 {
  margin: 0.5rem !important;
}

.clc-my-2,
.clc-mt-2 {
  margin-top: 0.5rem !important;
}

.clc-mx-2,
.clc-mr-2 {
  margin-right: 0.5rem !important;
}

.clc-my-2,
.clc-mb-2 {
  margin-bottom: 0.5rem !important;
}

.clc-mx-2,
.clc-ml-2 {
  margin-left: 0.5rem !important;
}

.clc-ms-2 {
  margin-inline-start: 0.5rem !important;
}

.clc-me-2 {
  margin-inline-end: 0.5rem !important;
}

.clc-m-3 {
  margin: 0.75rem !important;
}

.clc-my-3,
.clc-mt-3 {
  margin-top: 0.75rem !important;
}

.clc-mx-3,
.clc-mr-3 {
  margin-right: 0.75rem !important;
}

.clc-my-3,
.clc-mb-3 {
  margin-bottom: 0.75rem !important;
}

.clc-mx-3,
.clc-ml-3 {
  margin-left: 0.75rem !important;
}

.clc-ms-3 {
  margin-inline-start: 0.75rem !important;
}

.clc-me-3 {
  margin-inline-end: 0.75rem !important;
}

.clc-m-4 {
  margin: 1rem !important;
}

.clc-my-4,
.clc-mt-4 {
  margin-top: 1rem !important;
}

.clc-mx-4,
.clc-mr-4 {
  margin-right: 1rem !important;
}

.clc-my-4,
.clc-mb-4 {
  margin-bottom: 1rem !important;
}

.clc-mx-4,
.clc-ml-4 {
  margin-left: 1rem !important;
}

.clc-ms-4 {
  margin-inline-start: 1rem !important;
}

.clc-me-4 {
  margin-inline-end: 1rem !important;
}

.clc-m-5 {
  margin: 1.25rem !important;
}

.clc-my-5,
.clc-mt-5 {
  margin-top: 1.25rem !important;
}

.clc-mx-5,
.clc-mr-5 {
  margin-right: 1.25rem !important;
}

.clc-my-5,
.clc-mb-5 {
  margin-bottom: 1.25rem !important;
}

.clc-mx-5,
.clc-ml-5 {
  margin-left: 1.25rem !important;
}

.clc-ms-5 {
  margin-inline-start: 1.25rem !important;
}

.clc-me-5 {
  margin-inline-end: 1.25rem !important;
}

.clc-m-6 {
  margin: 1.5rem !important;
}

.clc-my-6,
.clc-mt-6 {
  margin-top: 1.5rem !important;
}

.clc-mx-6,
.clc-mr-6 {
  margin-right: 1.5rem !important;
}

.clc-my-6,
.clc-mb-6 {
  margin-bottom: 1.5rem !important;
}

.clc-mx-6,
.clc-ml-6 {
  margin-left: 1.5rem !important;
}

.clc-ms-6 {
  margin-inline-start: 1.5rem !important;
}

.clc-me-6 {
  margin-inline-end: 1.5rem !important;
}

.clc-m-7 {
  margin: 1.75rem !important;
}

.clc-my-7,
.clc-mt-7 {
  margin-top: 1.75rem !important;
}

.clc-mx-7,
.clc-mr-7 {
  margin-right: 1.75rem !important;
}

.clc-my-7,
.clc-mb-7 {
  margin-bottom: 1.75rem !important;
}

.clc-mx-7,
.clc-ml-7 {
  margin-left: 1.75rem !important;
}

.clc-ms-7 {
  margin-inline-start: 1.75rem !important;
}

.clc-me-7 {
  margin-inline-end: 1.75rem !important;
}

.clc-m-8 {
  margin: 2rem !important;
}

.clc-my-8,
.clc-mt-8 {
  margin-top: 2rem !important;
}

.clc-mx-8,
.clc-mr-8 {
  margin-right: 2rem !important;
}

.clc-my-8,
.clc-mb-8 {
  margin-bottom: 2rem !important;
}

.clc-mx-8,
.clc-ml-8 {
  margin-left: 2rem !important;
}

.clc-ms-8 {
  margin-inline-start: 2rem !important;
}

.clc-me-8 {
  margin-inline-end: 2rem !important;
}

.clc-m-9 {
  margin: 2.25rem !important;
}

.clc-my-9,
.clc-mt-9 {
  margin-top: 2.25rem !important;
}

.clc-mx-9,
.clc-mr-9 {
  margin-right: 2.25rem !important;
}

.clc-my-9,
.clc-mb-9 {
  margin-bottom: 2.25rem !important;
}

.clc-mx-9,
.clc-ml-9 {
  margin-left: 2.25rem !important;
}

.clc-ms-9 {
  margin-inline-start: 2.25rem !important;
}

.clc-me-9 {
  margin-inline-end: 2.25rem !important;
}

.clc-m-10 {
  margin: 2.5rem !important;
}

.clc-my-10,
.clc-mt-10 {
  margin-top: 2.5rem !important;
}

.clc-mx-10,
.clc-mr-10 {
  margin-right: 2.5rem !important;
}

.clc-my-10,
.clc-mb-10 {
  margin-bottom: 2.5rem !important;
}

.clc-mx-10,
.clc-ml-10 {
  margin-left: 2.5rem !important;
}

.clc-ms-10 {
  margin-inline-start: 2.5rem !important;
}

.clc-me-10 {
  margin-inline-end: 2.5rem !important;
}

.clc-m-11 {
  margin: 2.75rem !important;
}

.clc-my-11,
.clc-mt-11 {
  margin-top: 2.75rem !important;
}

.clc-mx-11,
.clc-mr-11 {
  margin-right: 2.75rem !important;
}

.clc-my-11,
.clc-mb-11 {
  margin-bottom: 2.75rem !important;
}

.clc-mx-11,
.clc-ml-11 {
  margin-left: 2.75rem !important;
}

.clc-ms-11 {
  margin-inline-start: 2.75rem !important;
}

.clc-me-11 {
  margin-inline-end: 2.75rem !important;
}

.clc-m-12 {
  margin: 3rem !important;
}

.clc-my-12,
.clc-mt-12 {
  margin-top: 3rem !important;
}

.clc-mx-12,
.clc-mr-12 {
  margin-right: 3rem !important;
}

.clc-my-12,
.clc-mb-12 {
  margin-bottom: 3rem !important;
}

.clc-mx-12,
.clc-ml-12 {
  margin-left: 3rem !important;
}

.clc-ms-12 {
  margin-inline-start: 3rem !important;
}

.clc-me-12 {
  margin-inline-end: 3rem !important;
}

.clc-p-0 {
  padding: 0 !important;
}

.clc-py-0,
.clc-pt-0 {
  padding-top: 0 !important;
}

.clc-px-0,
.clc-pr-0 {
  padding-right: 0 !important;
}

.clc-py-0,
.clc-pb-0 {
  padding-bottom: 0 !important;
}

.clc-px-0,
.clc-pl-0 {
  padding-left: 0 !important;
}

.clc-ps-0 {
  padding-inline-start: 0 !important;
}

.clc-pe-0 {
  padding-inline-end: 0 !important;
}

.clc-p-05 {
  padding: 0.125rem !important;
}

.clc-py-05,
.clc-pt-05 {
  padding-top: 0.125rem !important;
}

.clc-px-05,
.clc-pr-05 {
  padding-right: 0.125rem !important;
}

.clc-py-05,
.clc-pb-05 {
  padding-bottom: 0.125rem !important;
}

.clc-px-05,
.clc-pl-05 {
  padding-left: 0.125rem !important;
}

.clc-ps-05 {
  padding-inline-start: 0.125rem !important;
}

.clc-pe-05 {
  padding-inline-end: 0.125rem !important;
}

.clc-p-1 {
  padding: 0.25rem !important;
}

.clc-py-1,
.clc-pt-1 {
  padding-top: 0.25rem !important;
}

.clc-px-1,
.clc-pr-1 {
  padding-right: 0.25rem !important;
}

.clc-py-1,
.clc-pb-1 {
  padding-bottom: 0.25rem !important;
}

.clc-px-1,
.clc-pl-1 {
  padding-left: 0.25rem !important;
}

.clc-ps-1 {
  padding-inline-start: 0.25rem !important;
}

.clc-pe-1 {
  padding-inline-end: 0.25rem !important;
}

.clc-p-2 {
  padding: 0.5rem !important;
}

.clc-py-2,
.clc-pt-2 {
  padding-top: 0.5rem !important;
}

.clc-px-2,
.clc-pr-2 {
  padding-right: 0.5rem !important;
}

.clc-py-2,
.clc-pb-2 {
  padding-bottom: 0.5rem !important;
}

.clc-px-2,
.clc-pl-2 {
  padding-left: 0.5rem !important;
}

.clc-ps-2 {
  padding-inline-start: 0.5rem !important;
}

.clc-pe-2 {
  padding-inline-end: 0.5rem !important;
}

.clc-p-3 {
  padding: 0.75rem !important;
}

.clc-py-3,
.clc-pt-3 {
  padding-top: 0.75rem !important;
}

.clc-px-3,
.clc-pr-3 {
  padding-right: 0.75rem !important;
}

.clc-py-3,
.clc-pb-3 {
  padding-bottom: 0.75rem !important;
}

.clc-px-3,
.clc-pl-3 {
  padding-left: 0.75rem !important;
}

.clc-ps-3 {
  padding-inline-start: 0.75rem !important;
}

.clc-pe-3 {
  padding-inline-end: 0.75rem !important;
}

.clc-p-4 {
  padding: 1rem !important;
}

.clc-py-4,
.clc-pt-4 {
  padding-top: 1rem !important;
}

.clc-px-4,
.clc-pr-4 {
  padding-right: 1rem !important;
}

.clc-py-4,
.clc-pb-4 {
  padding-bottom: 1rem !important;
}

.clc-px-4,
.clc-pl-4 {
  padding-left: 1rem !important;
}

.clc-ps-4 {
  padding-inline-start: 1rem !important;
}

.clc-pe-4 {
  padding-inline-end: 1rem !important;
}

.clc-p-5 {
  padding: 1.25rem !important;
}

.clc-py-5,
.clc-pt-5 {
  padding-top: 1.25rem !important;
}

.clc-px-5,
.clc-pr-5 {
  padding-right: 1.25rem !important;
}

.clc-py-5,
.clc-pb-5 {
  padding-bottom: 1.25rem !important;
}

.clc-px-5,
.clc-pl-5 {
  padding-left: 1.25rem !important;
}

.clc-ps-5 {
  padding-inline-start: 1.25rem !important;
}

.clc-pe-5 {
  padding-inline-end: 1.25rem !important;
}

.clc-p-6 {
  padding: 1.5rem !important;
}

.clc-py-6,
.clc-pt-6 {
  padding-top: 1.5rem !important;
}

.clc-px-6,
.clc-pr-6 {
  padding-right: 1.5rem !important;
}

.clc-py-6,
.clc-pb-6 {
  padding-bottom: 1.5rem !important;
}

.clc-px-6,
.clc-pl-6 {
  padding-left: 1.5rem !important;
}

.clc-ps-6 {
  padding-inline-start: 1.5rem !important;
}

.clc-pe-6 {
  padding-inline-end: 1.5rem !important;
}

.clc-p-7 {
  padding: 1.75rem !important;
}

.clc-py-7,
.clc-pt-7 {
  padding-top: 1.75rem !important;
}

.clc-px-7,
.clc-pr-7 {
  padding-right: 1.75rem !important;
}

.clc-py-7,
.clc-pb-7 {
  padding-bottom: 1.75rem !important;
}

.clc-px-7,
.clc-pl-7 {
  padding-left: 1.75rem !important;
}

.clc-ps-7 {
  padding-inline-start: 1.75rem !important;
}

.clc-pe-7 {
  padding-inline-end: 1.75rem !important;
}

.clc-p-8 {
  padding: 2rem !important;
}

.clc-py-8,
.clc-pt-8 {
  padding-top: 2rem !important;
}

.clc-px-8,
.clc-pr-8 {
  padding-right: 2rem !important;
}

.clc-py-8,
.clc-pb-8 {
  padding-bottom: 2rem !important;
}

.clc-px-8,
.clc-pl-8 {
  padding-left: 2rem !important;
}

.clc-ps-8 {
  padding-inline-start: 2rem !important;
}

.clc-pe-8 {
  padding-inline-end: 2rem !important;
}

.clc-p-9 {
  padding: 2.25rem !important;
}

.clc-py-9,
.clc-pt-9 {
  padding-top: 2.25rem !important;
}

.clc-px-9,
.clc-pr-9 {
  padding-right: 2.25rem !important;
}

.clc-py-9,
.clc-pb-9 {
  padding-bottom: 2.25rem !important;
}

.clc-px-9,
.clc-pl-9 {
  padding-left: 2.25rem !important;
}

.clc-ps-9 {
  padding-inline-start: 2.25rem !important;
}

.clc-pe-9 {
  padding-inline-end: 2.25rem !important;
}

.clc-p-10 {
  padding: 2.5rem !important;
}

.clc-py-10,
.clc-pt-10 {
  padding-top: 2.5rem !important;
}

.clc-px-10,
.clc-pr-10 {
  padding-right: 2.5rem !important;
}

.clc-py-10,
.clc-pb-10 {
  padding-bottom: 2.5rem !important;
}

.clc-px-10,
.clc-pl-10 {
  padding-left: 2.5rem !important;
}

.clc-ps-10 {
  padding-inline-start: 2.5rem !important;
}

.clc-pe-10 {
  padding-inline-end: 2.5rem !important;
}

.clc-p-11 {
  padding: 2.75rem !important;
}

.clc-py-11,
.clc-pt-11 {
  padding-top: 2.75rem !important;
}

.clc-px-11,
.clc-pr-11 {
  padding-right: 2.75rem !important;
}

.clc-py-11,
.clc-pb-11 {
  padding-bottom: 2.75rem !important;
}

.clc-px-11,
.clc-pl-11 {
  padding-left: 2.75rem !important;
}

.clc-ps-11 {
  padding-inline-start: 2.75rem !important;
}

.clc-pe-11 {
  padding-inline-end: 2.75rem !important;
}

.clc-p-12 {
  padding: 3rem !important;
}

.clc-py-12,
.clc-pt-12 {
  padding-top: 3rem !important;
}

.clc-px-12,
.clc-pr-12 {
  padding-right: 3rem !important;
}

.clc-py-12,
.clc-pb-12 {
  padding-bottom: 3rem !important;
}

.clc-px-12,
.clc-pl-12 {
  padding-left: 3rem !important;
}

.clc-ps-12 {
  padding-inline-start: 3rem !important;
}

.clc-pe-12 {
  padding-inline-end: 3rem !important;
}

.clc-m-auto {
  margin: auto !important;
}

.clc-my-auto,
.clc-mt-auto {
  margin-top: auto !important;
}

.clc-mx-auto,
.clc-mr-auto {
  margin-right: auto !important;
}

.clc-my-auto,
.clc-mb-auto {
  margin-bottom: auto !important;
}

.clc-mx-auto,
.clc-ml-auto {
  margin-left: auto !important;
}

.clc-ms-auto {
  margin-inline-start: auto !important;
}

.clc-me-auto {
  margin-inline-end: auto !important;
}

@media (min-width: 576px) {
  .clc-m-xs-0 {
    margin: 0 !important;
  }
  .clc-my-xs-0,
  .clc-mt-xs-0 {
    margin-top: 0 !important;
  }
  .clc-mx-xs-0,
  .clc-mr-xs-0 {
    margin-right: 0 !important;
  }
  .clc-my-xs-0,
  .clc-mb-xs-0 {
    margin-bottom: 0 !important;
  }
  .clc-mx-xs-0,
  .clc-ml-xs-0 {
    margin-left: 0 !important;
  }
  .clc-ms-xs-0 {
    margin-inline-start: 0 !important;
  }
  .clc-me-xs-0 {
    margin-inline-end: 0 !important;
  }
  .clc-m-xs-05 {
    margin: 0.125rem !important;
  }
  .clc-my-xs-05,
  .clc-mt-xs-05 {
    margin-top: 0.125rem !important;
  }
  .clc-mx-xs-05,
  .clc-mr-xs-05 {
    margin-right: 0.125rem !important;
  }
  .clc-my-xs-05,
  .clc-mb-xs-05 {
    margin-bottom: 0.125rem !important;
  }
  .clc-mx-xs-05,
  .clc-ml-xs-05 {
    margin-left: 0.125rem !important;
  }
  .clc-ms-xs-05 {
    margin-inline-start: 0.125rem !important;
  }
  .clc-me-xs-05 {
    margin-inline-end: 0.125rem !important;
  }
  .clc-m-xs-1 {
    margin: 0.25rem !important;
  }
  .clc-my-xs-1,
  .clc-mt-xs-1 {
    margin-top: 0.25rem !important;
  }
  .clc-mx-xs-1,
  .clc-mr-xs-1 {
    margin-right: 0.25rem !important;
  }
  .clc-my-xs-1,
  .clc-mb-xs-1 {
    margin-bottom: 0.25rem !important;
  }
  .clc-mx-xs-1,
  .clc-ml-xs-1 {
    margin-left: 0.25rem !important;
  }
  .clc-ms-xs-1 {
    margin-inline-start: 0.25rem !important;
  }
  .clc-me-xs-1 {
    margin-inline-end: 0.25rem !important;
  }
  .clc-m-xs-2 {
    margin: 0.5rem !important;
  }
  .clc-my-xs-2,
  .clc-mt-xs-2 {
    margin-top: 0.5rem !important;
  }
  .clc-mx-xs-2,
  .clc-mr-xs-2 {
    margin-right: 0.5rem !important;
  }
  .clc-my-xs-2,
  .clc-mb-xs-2 {
    margin-bottom: 0.5rem !important;
  }
  .clc-mx-xs-2,
  .clc-ml-xs-2 {
    margin-left: 0.5rem !important;
  }
  .clc-ms-xs-2 {
    margin-inline-start: 0.5rem !important;
  }
  .clc-me-xs-2 {
    margin-inline-end: 0.5rem !important;
  }
  .clc-m-xs-3 {
    margin: 0.75rem !important;
  }
  .clc-my-xs-3,
  .clc-mt-xs-3 {
    margin-top: 0.75rem !important;
  }
  .clc-mx-xs-3,
  .clc-mr-xs-3 {
    margin-right: 0.75rem !important;
  }
  .clc-my-xs-3,
  .clc-mb-xs-3 {
    margin-bottom: 0.75rem !important;
  }
  .clc-mx-xs-3,
  .clc-ml-xs-3 {
    margin-left: 0.75rem !important;
  }
  .clc-ms-xs-3 {
    margin-inline-start: 0.75rem !important;
  }
  .clc-me-xs-3 {
    margin-inline-end: 0.75rem !important;
  }
  .clc-m-xs-4 {
    margin: 1rem !important;
  }
  .clc-my-xs-4,
  .clc-mt-xs-4 {
    margin-top: 1rem !important;
  }
  .clc-mx-xs-4,
  .clc-mr-xs-4 {
    margin-right: 1rem !important;
  }
  .clc-my-xs-4,
  .clc-mb-xs-4 {
    margin-bottom: 1rem !important;
  }
  .clc-mx-xs-4,
  .clc-ml-xs-4 {
    margin-left: 1rem !important;
  }
  .clc-ms-xs-4 {
    margin-inline-start: 1rem !important;
  }
  .clc-me-xs-4 {
    margin-inline-end: 1rem !important;
  }
  .clc-m-xs-5 {
    margin: 1.25rem !important;
  }
  .clc-my-xs-5,
  .clc-mt-xs-5 {
    margin-top: 1.25rem !important;
  }
  .clc-mx-xs-5,
  .clc-mr-xs-5 {
    margin-right: 1.25rem !important;
  }
  .clc-my-xs-5,
  .clc-mb-xs-5 {
    margin-bottom: 1.25rem !important;
  }
  .clc-mx-xs-5,
  .clc-ml-xs-5 {
    margin-left: 1.25rem !important;
  }
  .clc-ms-xs-5 {
    margin-inline-start: 1.25rem !important;
  }
  .clc-me-xs-5 {
    margin-inline-end: 1.25rem !important;
  }
  .clc-m-xs-6 {
    margin: 1.5rem !important;
  }
  .clc-my-xs-6,
  .clc-mt-xs-6 {
    margin-top: 1.5rem !important;
  }
  .clc-mx-xs-6,
  .clc-mr-xs-6 {
    margin-right: 1.5rem !important;
  }
  .clc-my-xs-6,
  .clc-mb-xs-6 {
    margin-bottom: 1.5rem !important;
  }
  .clc-mx-xs-6,
  .clc-ml-xs-6 {
    margin-left: 1.5rem !important;
  }
  .clc-ms-xs-6 {
    margin-inline-start: 1.5rem !important;
  }
  .clc-me-xs-6 {
    margin-inline-end: 1.5rem !important;
  }
  .clc-m-xs-7 {
    margin: 1.75rem !important;
  }
  .clc-my-xs-7,
  .clc-mt-xs-7 {
    margin-top: 1.75rem !important;
  }
  .clc-mx-xs-7,
  .clc-mr-xs-7 {
    margin-right: 1.75rem !important;
  }
  .clc-my-xs-7,
  .clc-mb-xs-7 {
    margin-bottom: 1.75rem !important;
  }
  .clc-mx-xs-7,
  .clc-ml-xs-7 {
    margin-left: 1.75rem !important;
  }
  .clc-ms-xs-7 {
    margin-inline-start: 1.75rem !important;
  }
  .clc-me-xs-7 {
    margin-inline-end: 1.75rem !important;
  }
  .clc-m-xs-8 {
    margin: 2rem !important;
  }
  .clc-my-xs-8,
  .clc-mt-xs-8 {
    margin-top: 2rem !important;
  }
  .clc-mx-xs-8,
  .clc-mr-xs-8 {
    margin-right: 2rem !important;
  }
  .clc-my-xs-8,
  .clc-mb-xs-8 {
    margin-bottom: 2rem !important;
  }
  .clc-mx-xs-8,
  .clc-ml-xs-8 {
    margin-left: 2rem !important;
  }
  .clc-ms-xs-8 {
    margin-inline-start: 2rem !important;
  }
  .clc-me-xs-8 {
    margin-inline-end: 2rem !important;
  }
  .clc-m-xs-9 {
    margin: 2.25rem !important;
  }
  .clc-my-xs-9,
  .clc-mt-xs-9 {
    margin-top: 2.25rem !important;
  }
  .clc-mx-xs-9,
  .clc-mr-xs-9 {
    margin-right: 2.25rem !important;
  }
  .clc-my-xs-9,
  .clc-mb-xs-9 {
    margin-bottom: 2.25rem !important;
  }
  .clc-mx-xs-9,
  .clc-ml-xs-9 {
    margin-left: 2.25rem !important;
  }
  .clc-ms-xs-9 {
    margin-inline-start: 2.25rem !important;
  }
  .clc-me-xs-9 {
    margin-inline-end: 2.25rem !important;
  }
  .clc-m-xs-10 {
    margin: 2.5rem !important;
  }
  .clc-my-xs-10,
  .clc-mt-xs-10 {
    margin-top: 2.5rem !important;
  }
  .clc-mx-xs-10,
  .clc-mr-xs-10 {
    margin-right: 2.5rem !important;
  }
  .clc-my-xs-10,
  .clc-mb-xs-10 {
    margin-bottom: 2.5rem !important;
  }
  .clc-mx-xs-10,
  .clc-ml-xs-10 {
    margin-left: 2.5rem !important;
  }
  .clc-ms-xs-10 {
    margin-inline-start: 2.5rem !important;
  }
  .clc-me-xs-10 {
    margin-inline-end: 2.5rem !important;
  }
  .clc-m-xs-11 {
    margin: 2.75rem !important;
  }
  .clc-my-xs-11,
  .clc-mt-xs-11 {
    margin-top: 2.75rem !important;
  }
  .clc-mx-xs-11,
  .clc-mr-xs-11 {
    margin-right: 2.75rem !important;
  }
  .clc-my-xs-11,
  .clc-mb-xs-11 {
    margin-bottom: 2.75rem !important;
  }
  .clc-mx-xs-11,
  .clc-ml-xs-11 {
    margin-left: 2.75rem !important;
  }
  .clc-ms-xs-11 {
    margin-inline-start: 2.75rem !important;
  }
  .clc-me-xs-11 {
    margin-inline-end: 2.75rem !important;
  }
  .clc-m-xs-12 {
    margin: 3rem !important;
  }
  .clc-my-xs-12,
  .clc-mt-xs-12 {
    margin-top: 3rem !important;
  }
  .clc-mx-xs-12,
  .clc-mr-xs-12 {
    margin-right: 3rem !important;
  }
  .clc-my-xs-12,
  .clc-mb-xs-12 {
    margin-bottom: 3rem !important;
  }
  .clc-mx-xs-12,
  .clc-ml-xs-12 {
    margin-left: 3rem !important;
  }
  .clc-ms-xs-12 {
    margin-inline-start: 3rem !important;
  }
  .clc-me-xs-12 {
    margin-inline-end: 3rem !important;
  }
  .clc-p-xs-0 {
    padding: 0 !important;
  }
  .clc-py-xs-0,
  .clc-pt-xs-0 {
    padding-top: 0 !important;
  }
  .clc-px-xs-0,
  .clc-pr-xs-0 {
    padding-right: 0 !important;
  }
  .clc-py-xs-0,
  .clc-pb-xs-0 {
    padding-bottom: 0 !important;
  }
  .clc-px-xs-0,
  .clc-pl-xs-0 {
    padding-left: 0 !important;
  }
  .clc-ps-xs-0 {
    padding-inline-start: 0 !important;
  }
  .clc-pe-xs-0 {
    padding-inline-end: 0 !important;
  }
  .clc-p-xs-05 {
    padding: 0.125rem !important;
  }
  .clc-py-xs-05,
  .clc-pt-xs-05 {
    padding-top: 0.125rem !important;
  }
  .clc-px-xs-05,
  .clc-pr-xs-05 {
    padding-right: 0.125rem !important;
  }
  .clc-py-xs-05,
  .clc-pb-xs-05 {
    padding-bottom: 0.125rem !important;
  }
  .clc-px-xs-05,
  .clc-pl-xs-05 {
    padding-left: 0.125rem !important;
  }
  .clc-ps-xs-05 {
    padding-inline-start: 0.125rem !important;
  }
  .clc-pe-xs-05 {
    padding-inline-end: 0.125rem !important;
  }
  .clc-p-xs-1 {
    padding: 0.25rem !important;
  }
  .clc-py-xs-1,
  .clc-pt-xs-1 {
    padding-top: 0.25rem !important;
  }
  .clc-px-xs-1,
  .clc-pr-xs-1 {
    padding-right: 0.25rem !important;
  }
  .clc-py-xs-1,
  .clc-pb-xs-1 {
    padding-bottom: 0.25rem !important;
  }
  .clc-px-xs-1,
  .clc-pl-xs-1 {
    padding-left: 0.25rem !important;
  }
  .clc-ps-xs-1 {
    padding-inline-start: 0.25rem !important;
  }
  .clc-pe-xs-1 {
    padding-inline-end: 0.25rem !important;
  }
  .clc-p-xs-2 {
    padding: 0.5rem !important;
  }
  .clc-py-xs-2,
  .clc-pt-xs-2 {
    padding-top: 0.5rem !important;
  }
  .clc-px-xs-2,
  .clc-pr-xs-2 {
    padding-right: 0.5rem !important;
  }
  .clc-py-xs-2,
  .clc-pb-xs-2 {
    padding-bottom: 0.5rem !important;
  }
  .clc-px-xs-2,
  .clc-pl-xs-2 {
    padding-left: 0.5rem !important;
  }
  .clc-ps-xs-2 {
    padding-inline-start: 0.5rem !important;
  }
  .clc-pe-xs-2 {
    padding-inline-end: 0.5rem !important;
  }
  .clc-p-xs-3 {
    padding: 0.75rem !important;
  }
  .clc-py-xs-3,
  .clc-pt-xs-3 {
    padding-top: 0.75rem !important;
  }
  .clc-px-xs-3,
  .clc-pr-xs-3 {
    padding-right: 0.75rem !important;
  }
  .clc-py-xs-3,
  .clc-pb-xs-3 {
    padding-bottom: 0.75rem !important;
  }
  .clc-px-xs-3,
  .clc-pl-xs-3 {
    padding-left: 0.75rem !important;
  }
  .clc-ps-xs-3 {
    padding-inline-start: 0.75rem !important;
  }
  .clc-pe-xs-3 {
    padding-inline-end: 0.75rem !important;
  }
  .clc-p-xs-4 {
    padding: 1rem !important;
  }
  .clc-py-xs-4,
  .clc-pt-xs-4 {
    padding-top: 1rem !important;
  }
  .clc-px-xs-4,
  .clc-pr-xs-4 {
    padding-right: 1rem !important;
  }
  .clc-py-xs-4,
  .clc-pb-xs-4 {
    padding-bottom: 1rem !important;
  }
  .clc-px-xs-4,
  .clc-pl-xs-4 {
    padding-left: 1rem !important;
  }
  .clc-ps-xs-4 {
    padding-inline-start: 1rem !important;
  }
  .clc-pe-xs-4 {
    padding-inline-end: 1rem !important;
  }
  .clc-p-xs-5 {
    padding: 1.25rem !important;
  }
  .clc-py-xs-5,
  .clc-pt-xs-5 {
    padding-top: 1.25rem !important;
  }
  .clc-px-xs-5,
  .clc-pr-xs-5 {
    padding-right: 1.25rem !important;
  }
  .clc-py-xs-5,
  .clc-pb-xs-5 {
    padding-bottom: 1.25rem !important;
  }
  .clc-px-xs-5,
  .clc-pl-xs-5 {
    padding-left: 1.25rem !important;
  }
  .clc-ps-xs-5 {
    padding-inline-start: 1.25rem !important;
  }
  .clc-pe-xs-5 {
    padding-inline-end: 1.25rem !important;
  }
  .clc-p-xs-6 {
    padding: 1.5rem !important;
  }
  .clc-py-xs-6,
  .clc-pt-xs-6 {
    padding-top: 1.5rem !important;
  }
  .clc-px-xs-6,
  .clc-pr-xs-6 {
    padding-right: 1.5rem !important;
  }
  .clc-py-xs-6,
  .clc-pb-xs-6 {
    padding-bottom: 1.5rem !important;
  }
  .clc-px-xs-6,
  .clc-pl-xs-6 {
    padding-left: 1.5rem !important;
  }
  .clc-ps-xs-6 {
    padding-inline-start: 1.5rem !important;
  }
  .clc-pe-xs-6 {
    padding-inline-end: 1.5rem !important;
  }
  .clc-p-xs-7 {
    padding: 1.75rem !important;
  }
  .clc-py-xs-7,
  .clc-pt-xs-7 {
    padding-top: 1.75rem !important;
  }
  .clc-px-xs-7,
  .clc-pr-xs-7 {
    padding-right: 1.75rem !important;
  }
  .clc-py-xs-7,
  .clc-pb-xs-7 {
    padding-bottom: 1.75rem !important;
  }
  .clc-px-xs-7,
  .clc-pl-xs-7 {
    padding-left: 1.75rem !important;
  }
  .clc-ps-xs-7 {
    padding-inline-start: 1.75rem !important;
  }
  .clc-pe-xs-7 {
    padding-inline-end: 1.75rem !important;
  }
  .clc-p-xs-8 {
    padding: 2rem !important;
  }
  .clc-py-xs-8,
  .clc-pt-xs-8 {
    padding-top: 2rem !important;
  }
  .clc-px-xs-8,
  .clc-pr-xs-8 {
    padding-right: 2rem !important;
  }
  .clc-py-xs-8,
  .clc-pb-xs-8 {
    padding-bottom: 2rem !important;
  }
  .clc-px-xs-8,
  .clc-pl-xs-8 {
    padding-left: 2rem !important;
  }
  .clc-ps-xs-8 {
    padding-inline-start: 2rem !important;
  }
  .clc-pe-xs-8 {
    padding-inline-end: 2rem !important;
  }
  .clc-p-xs-9 {
    padding: 2.25rem !important;
  }
  .clc-py-xs-9,
  .clc-pt-xs-9 {
    padding-top: 2.25rem !important;
  }
  .clc-px-xs-9,
  .clc-pr-xs-9 {
    padding-right: 2.25rem !important;
  }
  .clc-py-xs-9,
  .clc-pb-xs-9 {
    padding-bottom: 2.25rem !important;
  }
  .clc-px-xs-9,
  .clc-pl-xs-9 {
    padding-left: 2.25rem !important;
  }
  .clc-ps-xs-9 {
    padding-inline-start: 2.25rem !important;
  }
  .clc-pe-xs-9 {
    padding-inline-end: 2.25rem !important;
  }
  .clc-p-xs-10 {
    padding: 2.5rem !important;
  }
  .clc-py-xs-10,
  .clc-pt-xs-10 {
    padding-top: 2.5rem !important;
  }
  .clc-px-xs-10,
  .clc-pr-xs-10 {
    padding-right: 2.5rem !important;
  }
  .clc-py-xs-10,
  .clc-pb-xs-10 {
    padding-bottom: 2.5rem !important;
  }
  .clc-px-xs-10,
  .clc-pl-xs-10 {
    padding-left: 2.5rem !important;
  }
  .clc-ps-xs-10 {
    padding-inline-start: 2.5rem !important;
  }
  .clc-pe-xs-10 {
    padding-inline-end: 2.5rem !important;
  }
  .clc-p-xs-11 {
    padding: 2.75rem !important;
  }
  .clc-py-xs-11,
  .clc-pt-xs-11 {
    padding-top: 2.75rem !important;
  }
  .clc-px-xs-11,
  .clc-pr-xs-11 {
    padding-right: 2.75rem !important;
  }
  .clc-py-xs-11,
  .clc-pb-xs-11 {
    padding-bottom: 2.75rem !important;
  }
  .clc-px-xs-11,
  .clc-pl-xs-11 {
    padding-left: 2.75rem !important;
  }
  .clc-ps-xs-11 {
    padding-inline-start: 2.75rem !important;
  }
  .clc-pe-xs-11 {
    padding-inline-end: 2.75rem !important;
  }
  .clc-p-xs-12 {
    padding: 3rem !important;
  }
  .clc-py-xs-12,
  .clc-pt-xs-12 {
    padding-top: 3rem !important;
  }
  .clc-px-xs-12,
  .clc-pr-xs-12 {
    padding-right: 3rem !important;
  }
  .clc-py-xs-12,
  .clc-pb-xs-12 {
    padding-bottom: 3rem !important;
  }
  .clc-px-xs-12,
  .clc-pl-xs-12 {
    padding-left: 3rem !important;
  }
  .clc-ps-xs-12 {
    padding-inline-start: 3rem !important;
  }
  .clc-pe-xs-12 {
    padding-inline-end: 3rem !important;
  }
  .clc-m-xs-auto {
    margin: auto !important;
  }
  .clc-my-xs-auto,
  .clc-mt-xs-auto {
    margin-top: auto !important;
  }
  .clc-mx-xs-auto,
  .clc-mr-xs-auto {
    margin-right: auto !important;
  }
  .clc-my-xs-auto,
  .clc-mb-xs-auto {
    margin-bottom: auto !important;
  }
  .clc-mx-xs-auto,
  .clc-ml-xs-auto {
    margin-left: auto !important;
  }
  .clc-ms-xs-auto {
    margin-inline-start: auto !important;
  }
  .clc-me-xs-auto {
    margin-inline-end: auto !important;
  }
}
@media (min-width: 768px) {
  .clc-m-sm-0 {
    margin: 0 !important;
  }
  .clc-my-sm-0,
  .clc-mt-sm-0 {
    margin-top: 0 !important;
  }
  .clc-mx-sm-0,
  .clc-mr-sm-0 {
    margin-right: 0 !important;
  }
  .clc-my-sm-0,
  .clc-mb-sm-0 {
    margin-bottom: 0 !important;
  }
  .clc-mx-sm-0,
  .clc-ml-sm-0 {
    margin-left: 0 !important;
  }
  .clc-ms-sm-0 {
    margin-inline-start: 0 !important;
  }
  .clc-me-sm-0 {
    margin-inline-end: 0 !important;
  }
  .clc-m-sm-05 {
    margin: 0.125rem !important;
  }
  .clc-my-sm-05,
  .clc-mt-sm-05 {
    margin-top: 0.125rem !important;
  }
  .clc-mx-sm-05,
  .clc-mr-sm-05 {
    margin-right: 0.125rem !important;
  }
  .clc-my-sm-05,
  .clc-mb-sm-05 {
    margin-bottom: 0.125rem !important;
  }
  .clc-mx-sm-05,
  .clc-ml-sm-05 {
    margin-left: 0.125rem !important;
  }
  .clc-ms-sm-05 {
    margin-inline-start: 0.125rem !important;
  }
  .clc-me-sm-05 {
    margin-inline-end: 0.125rem !important;
  }
  .clc-m-sm-1 {
    margin: 0.25rem !important;
  }
  .clc-my-sm-1,
  .clc-mt-sm-1 {
    margin-top: 0.25rem !important;
  }
  .clc-mx-sm-1,
  .clc-mr-sm-1 {
    margin-right: 0.25rem !important;
  }
  .clc-my-sm-1,
  .clc-mb-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .clc-mx-sm-1,
  .clc-ml-sm-1 {
    margin-left: 0.25rem !important;
  }
  .clc-ms-sm-1 {
    margin-inline-start: 0.25rem !important;
  }
  .clc-me-sm-1 {
    margin-inline-end: 0.25rem !important;
  }
  .clc-m-sm-2 {
    margin: 0.5rem !important;
  }
  .clc-my-sm-2,
  .clc-mt-sm-2 {
    margin-top: 0.5rem !important;
  }
  .clc-mx-sm-2,
  .clc-mr-sm-2 {
    margin-right: 0.5rem !important;
  }
  .clc-my-sm-2,
  .clc-mb-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .clc-mx-sm-2,
  .clc-ml-sm-2 {
    margin-left: 0.5rem !important;
  }
  .clc-ms-sm-2 {
    margin-inline-start: 0.5rem !important;
  }
  .clc-me-sm-2 {
    margin-inline-end: 0.5rem !important;
  }
  .clc-m-sm-3 {
    margin: 0.75rem !important;
  }
  .clc-my-sm-3,
  .clc-mt-sm-3 {
    margin-top: 0.75rem !important;
  }
  .clc-mx-sm-3,
  .clc-mr-sm-3 {
    margin-right: 0.75rem !important;
  }
  .clc-my-sm-3,
  .clc-mb-sm-3 {
    margin-bottom: 0.75rem !important;
  }
  .clc-mx-sm-3,
  .clc-ml-sm-3 {
    margin-left: 0.75rem !important;
  }
  .clc-ms-sm-3 {
    margin-inline-start: 0.75rem !important;
  }
  .clc-me-sm-3 {
    margin-inline-end: 0.75rem !important;
  }
  .clc-m-sm-4 {
    margin: 1rem !important;
  }
  .clc-my-sm-4,
  .clc-mt-sm-4 {
    margin-top: 1rem !important;
  }
  .clc-mx-sm-4,
  .clc-mr-sm-4 {
    margin-right: 1rem !important;
  }
  .clc-my-sm-4,
  .clc-mb-sm-4 {
    margin-bottom: 1rem !important;
  }
  .clc-mx-sm-4,
  .clc-ml-sm-4 {
    margin-left: 1rem !important;
  }
  .clc-ms-sm-4 {
    margin-inline-start: 1rem !important;
  }
  .clc-me-sm-4 {
    margin-inline-end: 1rem !important;
  }
  .clc-m-sm-5 {
    margin: 1.25rem !important;
  }
  .clc-my-sm-5,
  .clc-mt-sm-5 {
    margin-top: 1.25rem !important;
  }
  .clc-mx-sm-5,
  .clc-mr-sm-5 {
    margin-right: 1.25rem !important;
  }
  .clc-my-sm-5,
  .clc-mb-sm-5 {
    margin-bottom: 1.25rem !important;
  }
  .clc-mx-sm-5,
  .clc-ml-sm-5 {
    margin-left: 1.25rem !important;
  }
  .clc-ms-sm-5 {
    margin-inline-start: 1.25rem !important;
  }
  .clc-me-sm-5 {
    margin-inline-end: 1.25rem !important;
  }
  .clc-m-sm-6 {
    margin: 1.5rem !important;
  }
  .clc-my-sm-6,
  .clc-mt-sm-6 {
    margin-top: 1.5rem !important;
  }
  .clc-mx-sm-6,
  .clc-mr-sm-6 {
    margin-right: 1.5rem !important;
  }
  .clc-my-sm-6,
  .clc-mb-sm-6 {
    margin-bottom: 1.5rem !important;
  }
  .clc-mx-sm-6,
  .clc-ml-sm-6 {
    margin-left: 1.5rem !important;
  }
  .clc-ms-sm-6 {
    margin-inline-start: 1.5rem !important;
  }
  .clc-me-sm-6 {
    margin-inline-end: 1.5rem !important;
  }
  .clc-m-sm-7 {
    margin: 1.75rem !important;
  }
  .clc-my-sm-7,
  .clc-mt-sm-7 {
    margin-top: 1.75rem !important;
  }
  .clc-mx-sm-7,
  .clc-mr-sm-7 {
    margin-right: 1.75rem !important;
  }
  .clc-my-sm-7,
  .clc-mb-sm-7 {
    margin-bottom: 1.75rem !important;
  }
  .clc-mx-sm-7,
  .clc-ml-sm-7 {
    margin-left: 1.75rem !important;
  }
  .clc-ms-sm-7 {
    margin-inline-start: 1.75rem !important;
  }
  .clc-me-sm-7 {
    margin-inline-end: 1.75rem !important;
  }
  .clc-m-sm-8 {
    margin: 2rem !important;
  }
  .clc-my-sm-8,
  .clc-mt-sm-8 {
    margin-top: 2rem !important;
  }
  .clc-mx-sm-8,
  .clc-mr-sm-8 {
    margin-right: 2rem !important;
  }
  .clc-my-sm-8,
  .clc-mb-sm-8 {
    margin-bottom: 2rem !important;
  }
  .clc-mx-sm-8,
  .clc-ml-sm-8 {
    margin-left: 2rem !important;
  }
  .clc-ms-sm-8 {
    margin-inline-start: 2rem !important;
  }
  .clc-me-sm-8 {
    margin-inline-end: 2rem !important;
  }
  .clc-m-sm-9 {
    margin: 2.25rem !important;
  }
  .clc-my-sm-9,
  .clc-mt-sm-9 {
    margin-top: 2.25rem !important;
  }
  .clc-mx-sm-9,
  .clc-mr-sm-9 {
    margin-right: 2.25rem !important;
  }
  .clc-my-sm-9,
  .clc-mb-sm-9 {
    margin-bottom: 2.25rem !important;
  }
  .clc-mx-sm-9,
  .clc-ml-sm-9 {
    margin-left: 2.25rem !important;
  }
  .clc-ms-sm-9 {
    margin-inline-start: 2.25rem !important;
  }
  .clc-me-sm-9 {
    margin-inline-end: 2.25rem !important;
  }
  .clc-m-sm-10 {
    margin: 2.5rem !important;
  }
  .clc-my-sm-10,
  .clc-mt-sm-10 {
    margin-top: 2.5rem !important;
  }
  .clc-mx-sm-10,
  .clc-mr-sm-10 {
    margin-right: 2.5rem !important;
  }
  .clc-my-sm-10,
  .clc-mb-sm-10 {
    margin-bottom: 2.5rem !important;
  }
  .clc-mx-sm-10,
  .clc-ml-sm-10 {
    margin-left: 2.5rem !important;
  }
  .clc-ms-sm-10 {
    margin-inline-start: 2.5rem !important;
  }
  .clc-me-sm-10 {
    margin-inline-end: 2.5rem !important;
  }
  .clc-m-sm-11 {
    margin: 2.75rem !important;
  }
  .clc-my-sm-11,
  .clc-mt-sm-11 {
    margin-top: 2.75rem !important;
  }
  .clc-mx-sm-11,
  .clc-mr-sm-11 {
    margin-right: 2.75rem !important;
  }
  .clc-my-sm-11,
  .clc-mb-sm-11 {
    margin-bottom: 2.75rem !important;
  }
  .clc-mx-sm-11,
  .clc-ml-sm-11 {
    margin-left: 2.75rem !important;
  }
  .clc-ms-sm-11 {
    margin-inline-start: 2.75rem !important;
  }
  .clc-me-sm-11 {
    margin-inline-end: 2.75rem !important;
  }
  .clc-m-sm-12 {
    margin: 3rem !important;
  }
  .clc-my-sm-12,
  .clc-mt-sm-12 {
    margin-top: 3rem !important;
  }
  .clc-mx-sm-12,
  .clc-mr-sm-12 {
    margin-right: 3rem !important;
  }
  .clc-my-sm-12,
  .clc-mb-sm-12 {
    margin-bottom: 3rem !important;
  }
  .clc-mx-sm-12,
  .clc-ml-sm-12 {
    margin-left: 3rem !important;
  }
  .clc-ms-sm-12 {
    margin-inline-start: 3rem !important;
  }
  .clc-me-sm-12 {
    margin-inline-end: 3rem !important;
  }
  .clc-p-sm-0 {
    padding: 0 !important;
  }
  .clc-py-sm-0,
  .clc-pt-sm-0 {
    padding-top: 0 !important;
  }
  .clc-px-sm-0,
  .clc-pr-sm-0 {
    padding-right: 0 !important;
  }
  .clc-py-sm-0,
  .clc-pb-sm-0 {
    padding-bottom: 0 !important;
  }
  .clc-px-sm-0,
  .clc-pl-sm-0 {
    padding-left: 0 !important;
  }
  .clc-ps-sm-0 {
    padding-inline-start: 0 !important;
  }
  .clc-pe-sm-0 {
    padding-inline-end: 0 !important;
  }
  .clc-p-sm-05 {
    padding: 0.125rem !important;
  }
  .clc-py-sm-05,
  .clc-pt-sm-05 {
    padding-top: 0.125rem !important;
  }
  .clc-px-sm-05,
  .clc-pr-sm-05 {
    padding-right: 0.125rem !important;
  }
  .clc-py-sm-05,
  .clc-pb-sm-05 {
    padding-bottom: 0.125rem !important;
  }
  .clc-px-sm-05,
  .clc-pl-sm-05 {
    padding-left: 0.125rem !important;
  }
  .clc-ps-sm-05 {
    padding-inline-start: 0.125rem !important;
  }
  .clc-pe-sm-05 {
    padding-inline-end: 0.125rem !important;
  }
  .clc-p-sm-1 {
    padding: 0.25rem !important;
  }
  .clc-py-sm-1,
  .clc-pt-sm-1 {
    padding-top: 0.25rem !important;
  }
  .clc-px-sm-1,
  .clc-pr-sm-1 {
    padding-right: 0.25rem !important;
  }
  .clc-py-sm-1,
  .clc-pb-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .clc-px-sm-1,
  .clc-pl-sm-1 {
    padding-left: 0.25rem !important;
  }
  .clc-ps-sm-1 {
    padding-inline-start: 0.25rem !important;
  }
  .clc-pe-sm-1 {
    padding-inline-end: 0.25rem !important;
  }
  .clc-p-sm-2 {
    padding: 0.5rem !important;
  }
  .clc-py-sm-2,
  .clc-pt-sm-2 {
    padding-top: 0.5rem !important;
  }
  .clc-px-sm-2,
  .clc-pr-sm-2 {
    padding-right: 0.5rem !important;
  }
  .clc-py-sm-2,
  .clc-pb-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .clc-px-sm-2,
  .clc-pl-sm-2 {
    padding-left: 0.5rem !important;
  }
  .clc-ps-sm-2 {
    padding-inline-start: 0.5rem !important;
  }
  .clc-pe-sm-2 {
    padding-inline-end: 0.5rem !important;
  }
  .clc-p-sm-3 {
    padding: 0.75rem !important;
  }
  .clc-py-sm-3,
  .clc-pt-sm-3 {
    padding-top: 0.75rem !important;
  }
  .clc-px-sm-3,
  .clc-pr-sm-3 {
    padding-right: 0.75rem !important;
  }
  .clc-py-sm-3,
  .clc-pb-sm-3 {
    padding-bottom: 0.75rem !important;
  }
  .clc-px-sm-3,
  .clc-pl-sm-3 {
    padding-left: 0.75rem !important;
  }
  .clc-ps-sm-3 {
    padding-inline-start: 0.75rem !important;
  }
  .clc-pe-sm-3 {
    padding-inline-end: 0.75rem !important;
  }
  .clc-p-sm-4 {
    padding: 1rem !important;
  }
  .clc-py-sm-4,
  .clc-pt-sm-4 {
    padding-top: 1rem !important;
  }
  .clc-px-sm-4,
  .clc-pr-sm-4 {
    padding-right: 1rem !important;
  }
  .clc-py-sm-4,
  .clc-pb-sm-4 {
    padding-bottom: 1rem !important;
  }
  .clc-px-sm-4,
  .clc-pl-sm-4 {
    padding-left: 1rem !important;
  }
  .clc-ps-sm-4 {
    padding-inline-start: 1rem !important;
  }
  .clc-pe-sm-4 {
    padding-inline-end: 1rem !important;
  }
  .clc-p-sm-5 {
    padding: 1.25rem !important;
  }
  .clc-py-sm-5,
  .clc-pt-sm-5 {
    padding-top: 1.25rem !important;
  }
  .clc-px-sm-5,
  .clc-pr-sm-5 {
    padding-right: 1.25rem !important;
  }
  .clc-py-sm-5,
  .clc-pb-sm-5 {
    padding-bottom: 1.25rem !important;
  }
  .clc-px-sm-5,
  .clc-pl-sm-5 {
    padding-left: 1.25rem !important;
  }
  .clc-ps-sm-5 {
    padding-inline-start: 1.25rem !important;
  }
  .clc-pe-sm-5 {
    padding-inline-end: 1.25rem !important;
  }
  .clc-p-sm-6 {
    padding: 1.5rem !important;
  }
  .clc-py-sm-6,
  .clc-pt-sm-6 {
    padding-top: 1.5rem !important;
  }
  .clc-px-sm-6,
  .clc-pr-sm-6 {
    padding-right: 1.5rem !important;
  }
  .clc-py-sm-6,
  .clc-pb-sm-6 {
    padding-bottom: 1.5rem !important;
  }
  .clc-px-sm-6,
  .clc-pl-sm-6 {
    padding-left: 1.5rem !important;
  }
  .clc-ps-sm-6 {
    padding-inline-start: 1.5rem !important;
  }
  .clc-pe-sm-6 {
    padding-inline-end: 1.5rem !important;
  }
  .clc-p-sm-7 {
    padding: 1.75rem !important;
  }
  .clc-py-sm-7,
  .clc-pt-sm-7 {
    padding-top: 1.75rem !important;
  }
  .clc-px-sm-7,
  .clc-pr-sm-7 {
    padding-right: 1.75rem !important;
  }
  .clc-py-sm-7,
  .clc-pb-sm-7 {
    padding-bottom: 1.75rem !important;
  }
  .clc-px-sm-7,
  .clc-pl-sm-7 {
    padding-left: 1.75rem !important;
  }
  .clc-ps-sm-7 {
    padding-inline-start: 1.75rem !important;
  }
  .clc-pe-sm-7 {
    padding-inline-end: 1.75rem !important;
  }
  .clc-p-sm-8 {
    padding: 2rem !important;
  }
  .clc-py-sm-8,
  .clc-pt-sm-8 {
    padding-top: 2rem !important;
  }
  .clc-px-sm-8,
  .clc-pr-sm-8 {
    padding-right: 2rem !important;
  }
  .clc-py-sm-8,
  .clc-pb-sm-8 {
    padding-bottom: 2rem !important;
  }
  .clc-px-sm-8,
  .clc-pl-sm-8 {
    padding-left: 2rem !important;
  }
  .clc-ps-sm-8 {
    padding-inline-start: 2rem !important;
  }
  .clc-pe-sm-8 {
    padding-inline-end: 2rem !important;
  }
  .clc-p-sm-9 {
    padding: 2.25rem !important;
  }
  .clc-py-sm-9,
  .clc-pt-sm-9 {
    padding-top: 2.25rem !important;
  }
  .clc-px-sm-9,
  .clc-pr-sm-9 {
    padding-right: 2.25rem !important;
  }
  .clc-py-sm-9,
  .clc-pb-sm-9 {
    padding-bottom: 2.25rem !important;
  }
  .clc-px-sm-9,
  .clc-pl-sm-9 {
    padding-left: 2.25rem !important;
  }
  .clc-ps-sm-9 {
    padding-inline-start: 2.25rem !important;
  }
  .clc-pe-sm-9 {
    padding-inline-end: 2.25rem !important;
  }
  .clc-p-sm-10 {
    padding: 2.5rem !important;
  }
  .clc-py-sm-10,
  .clc-pt-sm-10 {
    padding-top: 2.5rem !important;
  }
  .clc-px-sm-10,
  .clc-pr-sm-10 {
    padding-right: 2.5rem !important;
  }
  .clc-py-sm-10,
  .clc-pb-sm-10 {
    padding-bottom: 2.5rem !important;
  }
  .clc-px-sm-10,
  .clc-pl-sm-10 {
    padding-left: 2.5rem !important;
  }
  .clc-ps-sm-10 {
    padding-inline-start: 2.5rem !important;
  }
  .clc-pe-sm-10 {
    padding-inline-end: 2.5rem !important;
  }
  .clc-p-sm-11 {
    padding: 2.75rem !important;
  }
  .clc-py-sm-11,
  .clc-pt-sm-11 {
    padding-top: 2.75rem !important;
  }
  .clc-px-sm-11,
  .clc-pr-sm-11 {
    padding-right: 2.75rem !important;
  }
  .clc-py-sm-11,
  .clc-pb-sm-11 {
    padding-bottom: 2.75rem !important;
  }
  .clc-px-sm-11,
  .clc-pl-sm-11 {
    padding-left: 2.75rem !important;
  }
  .clc-ps-sm-11 {
    padding-inline-start: 2.75rem !important;
  }
  .clc-pe-sm-11 {
    padding-inline-end: 2.75rem !important;
  }
  .clc-p-sm-12 {
    padding: 3rem !important;
  }
  .clc-py-sm-12,
  .clc-pt-sm-12 {
    padding-top: 3rem !important;
  }
  .clc-px-sm-12,
  .clc-pr-sm-12 {
    padding-right: 3rem !important;
  }
  .clc-py-sm-12,
  .clc-pb-sm-12 {
    padding-bottom: 3rem !important;
  }
  .clc-px-sm-12,
  .clc-pl-sm-12 {
    padding-left: 3rem !important;
  }
  .clc-ps-sm-12 {
    padding-inline-start: 3rem !important;
  }
  .clc-pe-sm-12 {
    padding-inline-end: 3rem !important;
  }
  .clc-m-sm-auto {
    margin: auto !important;
  }
  .clc-my-sm-auto,
  .clc-mt-sm-auto {
    margin-top: auto !important;
  }
  .clc-mx-sm-auto,
  .clc-mr-sm-auto {
    margin-right: auto !important;
  }
  .clc-my-sm-auto,
  .clc-mb-sm-auto {
    margin-bottom: auto !important;
  }
  .clc-mx-sm-auto,
  .clc-ml-sm-auto {
    margin-left: auto !important;
  }
  .clc-ms-sm-auto {
    margin-inline-start: auto !important;
  }
  .clc-me-sm-auto {
    margin-inline-end: auto !important;
  }
}
@media (min-width: 1024px) {
  .clc-m-md-0 {
    margin: 0 !important;
  }
  .clc-my-md-0,
  .clc-mt-md-0 {
    margin-top: 0 !important;
  }
  .clc-mx-md-0,
  .clc-mr-md-0 {
    margin-right: 0 !important;
  }
  .clc-my-md-0,
  .clc-mb-md-0 {
    margin-bottom: 0 !important;
  }
  .clc-mx-md-0,
  .clc-ml-md-0 {
    margin-left: 0 !important;
  }
  .clc-ms-md-0 {
    margin-inline-start: 0 !important;
  }
  .clc-me-md-0 {
    margin-inline-end: 0 !important;
  }
  .clc-m-md-05 {
    margin: 0.125rem !important;
  }
  .clc-my-md-05,
  .clc-mt-md-05 {
    margin-top: 0.125rem !important;
  }
  .clc-mx-md-05,
  .clc-mr-md-05 {
    margin-right: 0.125rem !important;
  }
  .clc-my-md-05,
  .clc-mb-md-05 {
    margin-bottom: 0.125rem !important;
  }
  .clc-mx-md-05,
  .clc-ml-md-05 {
    margin-left: 0.125rem !important;
  }
  .clc-ms-md-05 {
    margin-inline-start: 0.125rem !important;
  }
  .clc-me-md-05 {
    margin-inline-end: 0.125rem !important;
  }
  .clc-m-md-1 {
    margin: 0.25rem !important;
  }
  .clc-my-md-1,
  .clc-mt-md-1 {
    margin-top: 0.25rem !important;
  }
  .clc-mx-md-1,
  .clc-mr-md-1 {
    margin-right: 0.25rem !important;
  }
  .clc-my-md-1,
  .clc-mb-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .clc-mx-md-1,
  .clc-ml-md-1 {
    margin-left: 0.25rem !important;
  }
  .clc-ms-md-1 {
    margin-inline-start: 0.25rem !important;
  }
  .clc-me-md-1 {
    margin-inline-end: 0.25rem !important;
  }
  .clc-m-md-2 {
    margin: 0.5rem !important;
  }
  .clc-my-md-2,
  .clc-mt-md-2 {
    margin-top: 0.5rem !important;
  }
  .clc-mx-md-2,
  .clc-mr-md-2 {
    margin-right: 0.5rem !important;
  }
  .clc-my-md-2,
  .clc-mb-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .clc-mx-md-2,
  .clc-ml-md-2 {
    margin-left: 0.5rem !important;
  }
  .clc-ms-md-2 {
    margin-inline-start: 0.5rem !important;
  }
  .clc-me-md-2 {
    margin-inline-end: 0.5rem !important;
  }
  .clc-m-md-3 {
    margin: 0.75rem !important;
  }
  .clc-my-md-3,
  .clc-mt-md-3 {
    margin-top: 0.75rem !important;
  }
  .clc-mx-md-3,
  .clc-mr-md-3 {
    margin-right: 0.75rem !important;
  }
  .clc-my-md-3,
  .clc-mb-md-3 {
    margin-bottom: 0.75rem !important;
  }
  .clc-mx-md-3,
  .clc-ml-md-3 {
    margin-left: 0.75rem !important;
  }
  .clc-ms-md-3 {
    margin-inline-start: 0.75rem !important;
  }
  .clc-me-md-3 {
    margin-inline-end: 0.75rem !important;
  }
  .clc-m-md-4 {
    margin: 1rem !important;
  }
  .clc-my-md-4,
  .clc-mt-md-4 {
    margin-top: 1rem !important;
  }
  .clc-mx-md-4,
  .clc-mr-md-4 {
    margin-right: 1rem !important;
  }
  .clc-my-md-4,
  .clc-mb-md-4 {
    margin-bottom: 1rem !important;
  }
  .clc-mx-md-4,
  .clc-ml-md-4 {
    margin-left: 1rem !important;
  }
  .clc-ms-md-4 {
    margin-inline-start: 1rem !important;
  }
  .clc-me-md-4 {
    margin-inline-end: 1rem !important;
  }
  .clc-m-md-5 {
    margin: 1.25rem !important;
  }
  .clc-my-md-5,
  .clc-mt-md-5 {
    margin-top: 1.25rem !important;
  }
  .clc-mx-md-5,
  .clc-mr-md-5 {
    margin-right: 1.25rem !important;
  }
  .clc-my-md-5,
  .clc-mb-md-5 {
    margin-bottom: 1.25rem !important;
  }
  .clc-mx-md-5,
  .clc-ml-md-5 {
    margin-left: 1.25rem !important;
  }
  .clc-ms-md-5 {
    margin-inline-start: 1.25rem !important;
  }
  .clc-me-md-5 {
    margin-inline-end: 1.25rem !important;
  }
  .clc-m-md-6 {
    margin: 1.5rem !important;
  }
  .clc-my-md-6,
  .clc-mt-md-6 {
    margin-top: 1.5rem !important;
  }
  .clc-mx-md-6,
  .clc-mr-md-6 {
    margin-right: 1.5rem !important;
  }
  .clc-my-md-6,
  .clc-mb-md-6 {
    margin-bottom: 1.5rem !important;
  }
  .clc-mx-md-6,
  .clc-ml-md-6 {
    margin-left: 1.5rem !important;
  }
  .clc-ms-md-6 {
    margin-inline-start: 1.5rem !important;
  }
  .clc-me-md-6 {
    margin-inline-end: 1.5rem !important;
  }
  .clc-m-md-7 {
    margin: 1.75rem !important;
  }
  .clc-my-md-7,
  .clc-mt-md-7 {
    margin-top: 1.75rem !important;
  }
  .clc-mx-md-7,
  .clc-mr-md-7 {
    margin-right: 1.75rem !important;
  }
  .clc-my-md-7,
  .clc-mb-md-7 {
    margin-bottom: 1.75rem !important;
  }
  .clc-mx-md-7,
  .clc-ml-md-7 {
    margin-left: 1.75rem !important;
  }
  .clc-ms-md-7 {
    margin-inline-start: 1.75rem !important;
  }
  .clc-me-md-7 {
    margin-inline-end: 1.75rem !important;
  }
  .clc-m-md-8 {
    margin: 2rem !important;
  }
  .clc-my-md-8,
  .clc-mt-md-8 {
    margin-top: 2rem !important;
  }
  .clc-mx-md-8,
  .clc-mr-md-8 {
    margin-right: 2rem !important;
  }
  .clc-my-md-8,
  .clc-mb-md-8 {
    margin-bottom: 2rem !important;
  }
  .clc-mx-md-8,
  .clc-ml-md-8 {
    margin-left: 2rem !important;
  }
  .clc-ms-md-8 {
    margin-inline-start: 2rem !important;
  }
  .clc-me-md-8 {
    margin-inline-end: 2rem !important;
  }
  .clc-m-md-9 {
    margin: 2.25rem !important;
  }
  .clc-my-md-9,
  .clc-mt-md-9 {
    margin-top: 2.25rem !important;
  }
  .clc-mx-md-9,
  .clc-mr-md-9 {
    margin-right: 2.25rem !important;
  }
  .clc-my-md-9,
  .clc-mb-md-9 {
    margin-bottom: 2.25rem !important;
  }
  .clc-mx-md-9,
  .clc-ml-md-9 {
    margin-left: 2.25rem !important;
  }
  .clc-ms-md-9 {
    margin-inline-start: 2.25rem !important;
  }
  .clc-me-md-9 {
    margin-inline-end: 2.25rem !important;
  }
  .clc-m-md-10 {
    margin: 2.5rem !important;
  }
  .clc-my-md-10,
  .clc-mt-md-10 {
    margin-top: 2.5rem !important;
  }
  .clc-mx-md-10,
  .clc-mr-md-10 {
    margin-right: 2.5rem !important;
  }
  .clc-my-md-10,
  .clc-mb-md-10 {
    margin-bottom: 2.5rem !important;
  }
  .clc-mx-md-10,
  .clc-ml-md-10 {
    margin-left: 2.5rem !important;
  }
  .clc-ms-md-10 {
    margin-inline-start: 2.5rem !important;
  }
  .clc-me-md-10 {
    margin-inline-end: 2.5rem !important;
  }
  .clc-m-md-11 {
    margin: 2.75rem !important;
  }
  .clc-my-md-11,
  .clc-mt-md-11 {
    margin-top: 2.75rem !important;
  }
  .clc-mx-md-11,
  .clc-mr-md-11 {
    margin-right: 2.75rem !important;
  }
  .clc-my-md-11,
  .clc-mb-md-11 {
    margin-bottom: 2.75rem !important;
  }
  .clc-mx-md-11,
  .clc-ml-md-11 {
    margin-left: 2.75rem !important;
  }
  .clc-ms-md-11 {
    margin-inline-start: 2.75rem !important;
  }
  .clc-me-md-11 {
    margin-inline-end: 2.75rem !important;
  }
  .clc-m-md-12 {
    margin: 3rem !important;
  }
  .clc-my-md-12,
  .clc-mt-md-12 {
    margin-top: 3rem !important;
  }
  .clc-mx-md-12,
  .clc-mr-md-12 {
    margin-right: 3rem !important;
  }
  .clc-my-md-12,
  .clc-mb-md-12 {
    margin-bottom: 3rem !important;
  }
  .clc-mx-md-12,
  .clc-ml-md-12 {
    margin-left: 3rem !important;
  }
  .clc-ms-md-12 {
    margin-inline-start: 3rem !important;
  }
  .clc-me-md-12 {
    margin-inline-end: 3rem !important;
  }
  .clc-p-md-0 {
    padding: 0 !important;
  }
  .clc-py-md-0,
  .clc-pt-md-0 {
    padding-top: 0 !important;
  }
  .clc-px-md-0,
  .clc-pr-md-0 {
    padding-right: 0 !important;
  }
  .clc-py-md-0,
  .clc-pb-md-0 {
    padding-bottom: 0 !important;
  }
  .clc-px-md-0,
  .clc-pl-md-0 {
    padding-left: 0 !important;
  }
  .clc-ps-md-0 {
    padding-inline-start: 0 !important;
  }
  .clc-pe-md-0 {
    padding-inline-end: 0 !important;
  }
  .clc-p-md-05 {
    padding: 0.125rem !important;
  }
  .clc-py-md-05,
  .clc-pt-md-05 {
    padding-top: 0.125rem !important;
  }
  .clc-px-md-05,
  .clc-pr-md-05 {
    padding-right: 0.125rem !important;
  }
  .clc-py-md-05,
  .clc-pb-md-05 {
    padding-bottom: 0.125rem !important;
  }
  .clc-px-md-05,
  .clc-pl-md-05 {
    padding-left: 0.125rem !important;
  }
  .clc-ps-md-05 {
    padding-inline-start: 0.125rem !important;
  }
  .clc-pe-md-05 {
    padding-inline-end: 0.125rem !important;
  }
  .clc-p-md-1 {
    padding: 0.25rem !important;
  }
  .clc-py-md-1,
  .clc-pt-md-1 {
    padding-top: 0.25rem !important;
  }
  .clc-px-md-1,
  .clc-pr-md-1 {
    padding-right: 0.25rem !important;
  }
  .clc-py-md-1,
  .clc-pb-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .clc-px-md-1,
  .clc-pl-md-1 {
    padding-left: 0.25rem !important;
  }
  .clc-ps-md-1 {
    padding-inline-start: 0.25rem !important;
  }
  .clc-pe-md-1 {
    padding-inline-end: 0.25rem !important;
  }
  .clc-p-md-2 {
    padding: 0.5rem !important;
  }
  .clc-py-md-2,
  .clc-pt-md-2 {
    padding-top: 0.5rem !important;
  }
  .clc-px-md-2,
  .clc-pr-md-2 {
    padding-right: 0.5rem !important;
  }
  .clc-py-md-2,
  .clc-pb-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .clc-px-md-2,
  .clc-pl-md-2 {
    padding-left: 0.5rem !important;
  }
  .clc-ps-md-2 {
    padding-inline-start: 0.5rem !important;
  }
  .clc-pe-md-2 {
    padding-inline-end: 0.5rem !important;
  }
  .clc-p-md-3 {
    padding: 0.75rem !important;
  }
  .clc-py-md-3,
  .clc-pt-md-3 {
    padding-top: 0.75rem !important;
  }
  .clc-px-md-3,
  .clc-pr-md-3 {
    padding-right: 0.75rem !important;
  }
  .clc-py-md-3,
  .clc-pb-md-3 {
    padding-bottom: 0.75rem !important;
  }
  .clc-px-md-3,
  .clc-pl-md-3 {
    padding-left: 0.75rem !important;
  }
  .clc-ps-md-3 {
    padding-inline-start: 0.75rem !important;
  }
  .clc-pe-md-3 {
    padding-inline-end: 0.75rem !important;
  }
  .clc-p-md-4 {
    padding: 1rem !important;
  }
  .clc-py-md-4,
  .clc-pt-md-4 {
    padding-top: 1rem !important;
  }
  .clc-px-md-4,
  .clc-pr-md-4 {
    padding-right: 1rem !important;
  }
  .clc-py-md-4,
  .clc-pb-md-4 {
    padding-bottom: 1rem !important;
  }
  .clc-px-md-4,
  .clc-pl-md-4 {
    padding-left: 1rem !important;
  }
  .clc-ps-md-4 {
    padding-inline-start: 1rem !important;
  }
  .clc-pe-md-4 {
    padding-inline-end: 1rem !important;
  }
  .clc-p-md-5 {
    padding: 1.25rem !important;
  }
  .clc-py-md-5,
  .clc-pt-md-5 {
    padding-top: 1.25rem !important;
  }
  .clc-px-md-5,
  .clc-pr-md-5 {
    padding-right: 1.25rem !important;
  }
  .clc-py-md-5,
  .clc-pb-md-5 {
    padding-bottom: 1.25rem !important;
  }
  .clc-px-md-5,
  .clc-pl-md-5 {
    padding-left: 1.25rem !important;
  }
  .clc-ps-md-5 {
    padding-inline-start: 1.25rem !important;
  }
  .clc-pe-md-5 {
    padding-inline-end: 1.25rem !important;
  }
  .clc-p-md-6 {
    padding: 1.5rem !important;
  }
  .clc-py-md-6,
  .clc-pt-md-6 {
    padding-top: 1.5rem !important;
  }
  .clc-px-md-6,
  .clc-pr-md-6 {
    padding-right: 1.5rem !important;
  }
  .clc-py-md-6,
  .clc-pb-md-6 {
    padding-bottom: 1.5rem !important;
  }
  .clc-px-md-6,
  .clc-pl-md-6 {
    padding-left: 1.5rem !important;
  }
  .clc-ps-md-6 {
    padding-inline-start: 1.5rem !important;
  }
  .clc-pe-md-6 {
    padding-inline-end: 1.5rem !important;
  }
  .clc-p-md-7 {
    padding: 1.75rem !important;
  }
  .clc-py-md-7,
  .clc-pt-md-7 {
    padding-top: 1.75rem !important;
  }
  .clc-px-md-7,
  .clc-pr-md-7 {
    padding-right: 1.75rem !important;
  }
  .clc-py-md-7,
  .clc-pb-md-7 {
    padding-bottom: 1.75rem !important;
  }
  .clc-px-md-7,
  .clc-pl-md-7 {
    padding-left: 1.75rem !important;
  }
  .clc-ps-md-7 {
    padding-inline-start: 1.75rem !important;
  }
  .clc-pe-md-7 {
    padding-inline-end: 1.75rem !important;
  }
  .clc-p-md-8 {
    padding: 2rem !important;
  }
  .clc-py-md-8,
  .clc-pt-md-8 {
    padding-top: 2rem !important;
  }
  .clc-px-md-8,
  .clc-pr-md-8 {
    padding-right: 2rem !important;
  }
  .clc-py-md-8,
  .clc-pb-md-8 {
    padding-bottom: 2rem !important;
  }
  .clc-px-md-8,
  .clc-pl-md-8 {
    padding-left: 2rem !important;
  }
  .clc-ps-md-8 {
    padding-inline-start: 2rem !important;
  }
  .clc-pe-md-8 {
    padding-inline-end: 2rem !important;
  }
  .clc-p-md-9 {
    padding: 2.25rem !important;
  }
  .clc-py-md-9,
  .clc-pt-md-9 {
    padding-top: 2.25rem !important;
  }
  .clc-px-md-9,
  .clc-pr-md-9 {
    padding-right: 2.25rem !important;
  }
  .clc-py-md-9,
  .clc-pb-md-9 {
    padding-bottom: 2.25rem !important;
  }
  .clc-px-md-9,
  .clc-pl-md-9 {
    padding-left: 2.25rem !important;
  }
  .clc-ps-md-9 {
    padding-inline-start: 2.25rem !important;
  }
  .clc-pe-md-9 {
    padding-inline-end: 2.25rem !important;
  }
  .clc-p-md-10 {
    padding: 2.5rem !important;
  }
  .clc-py-md-10,
  .clc-pt-md-10 {
    padding-top: 2.5rem !important;
  }
  .clc-px-md-10,
  .clc-pr-md-10 {
    padding-right: 2.5rem !important;
  }
  .clc-py-md-10,
  .clc-pb-md-10 {
    padding-bottom: 2.5rem !important;
  }
  .clc-px-md-10,
  .clc-pl-md-10 {
    padding-left: 2.5rem !important;
  }
  .clc-ps-md-10 {
    padding-inline-start: 2.5rem !important;
  }
  .clc-pe-md-10 {
    padding-inline-end: 2.5rem !important;
  }
  .clc-p-md-11 {
    padding: 2.75rem !important;
  }
  .clc-py-md-11,
  .clc-pt-md-11 {
    padding-top: 2.75rem !important;
  }
  .clc-px-md-11,
  .clc-pr-md-11 {
    padding-right: 2.75rem !important;
  }
  .clc-py-md-11,
  .clc-pb-md-11 {
    padding-bottom: 2.75rem !important;
  }
  .clc-px-md-11,
  .clc-pl-md-11 {
    padding-left: 2.75rem !important;
  }
  .clc-ps-md-11 {
    padding-inline-start: 2.75rem !important;
  }
  .clc-pe-md-11 {
    padding-inline-end: 2.75rem !important;
  }
  .clc-p-md-12 {
    padding: 3rem !important;
  }
  .clc-py-md-12,
  .clc-pt-md-12 {
    padding-top: 3rem !important;
  }
  .clc-px-md-12,
  .clc-pr-md-12 {
    padding-right: 3rem !important;
  }
  .clc-py-md-12,
  .clc-pb-md-12 {
    padding-bottom: 3rem !important;
  }
  .clc-px-md-12,
  .clc-pl-md-12 {
    padding-left: 3rem !important;
  }
  .clc-ps-md-12 {
    padding-inline-start: 3rem !important;
  }
  .clc-pe-md-12 {
    padding-inline-end: 3rem !important;
  }
  .clc-m-md-auto {
    margin: auto !important;
  }
  .clc-my-md-auto,
  .clc-mt-md-auto {
    margin-top: auto !important;
  }
  .clc-mx-md-auto,
  .clc-mr-md-auto {
    margin-right: auto !important;
  }
  .clc-my-md-auto,
  .clc-mb-md-auto {
    margin-bottom: auto !important;
  }
  .clc-mx-md-auto,
  .clc-ml-md-auto {
    margin-left: auto !important;
  }
  .clc-ms-md-auto {
    margin-inline-start: auto !important;
  }
  .clc-me-md-auto {
    margin-inline-end: auto !important;
  }
}
@media (min-width: 1280px) {
  .clc-m-lg-0 {
    margin: 0 !important;
  }
  .clc-my-lg-0,
  .clc-mt-lg-0 {
    margin-top: 0 !important;
  }
  .clc-mx-lg-0,
  .clc-mr-lg-0 {
    margin-right: 0 !important;
  }
  .clc-my-lg-0,
  .clc-mb-lg-0 {
    margin-bottom: 0 !important;
  }
  .clc-mx-lg-0,
  .clc-ml-lg-0 {
    margin-left: 0 !important;
  }
  .clc-ms-lg-0 {
    margin-inline-start: 0 !important;
  }
  .clc-me-lg-0 {
    margin-inline-end: 0 !important;
  }
  .clc-m-lg-05 {
    margin: 0.125rem !important;
  }
  .clc-my-lg-05,
  .clc-mt-lg-05 {
    margin-top: 0.125rem !important;
  }
  .clc-mx-lg-05,
  .clc-mr-lg-05 {
    margin-right: 0.125rem !important;
  }
  .clc-my-lg-05,
  .clc-mb-lg-05 {
    margin-bottom: 0.125rem !important;
  }
  .clc-mx-lg-05,
  .clc-ml-lg-05 {
    margin-left: 0.125rem !important;
  }
  .clc-ms-lg-05 {
    margin-inline-start: 0.125rem !important;
  }
  .clc-me-lg-05 {
    margin-inline-end: 0.125rem !important;
  }
  .clc-m-lg-1 {
    margin: 0.25rem !important;
  }
  .clc-my-lg-1,
  .clc-mt-lg-1 {
    margin-top: 0.25rem !important;
  }
  .clc-mx-lg-1,
  .clc-mr-lg-1 {
    margin-right: 0.25rem !important;
  }
  .clc-my-lg-1,
  .clc-mb-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .clc-mx-lg-1,
  .clc-ml-lg-1 {
    margin-left: 0.25rem !important;
  }
  .clc-ms-lg-1 {
    margin-inline-start: 0.25rem !important;
  }
  .clc-me-lg-1 {
    margin-inline-end: 0.25rem !important;
  }
  .clc-m-lg-2 {
    margin: 0.5rem !important;
  }
  .clc-my-lg-2,
  .clc-mt-lg-2 {
    margin-top: 0.5rem !important;
  }
  .clc-mx-lg-2,
  .clc-mr-lg-2 {
    margin-right: 0.5rem !important;
  }
  .clc-my-lg-2,
  .clc-mb-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .clc-mx-lg-2,
  .clc-ml-lg-2 {
    margin-left: 0.5rem !important;
  }
  .clc-ms-lg-2 {
    margin-inline-start: 0.5rem !important;
  }
  .clc-me-lg-2 {
    margin-inline-end: 0.5rem !important;
  }
  .clc-m-lg-3 {
    margin: 0.75rem !important;
  }
  .clc-my-lg-3,
  .clc-mt-lg-3 {
    margin-top: 0.75rem !important;
  }
  .clc-mx-lg-3,
  .clc-mr-lg-3 {
    margin-right: 0.75rem !important;
  }
  .clc-my-lg-3,
  .clc-mb-lg-3 {
    margin-bottom: 0.75rem !important;
  }
  .clc-mx-lg-3,
  .clc-ml-lg-3 {
    margin-left: 0.75rem !important;
  }
  .clc-ms-lg-3 {
    margin-inline-start: 0.75rem !important;
  }
  .clc-me-lg-3 {
    margin-inline-end: 0.75rem !important;
  }
  .clc-m-lg-4 {
    margin: 1rem !important;
  }
  .clc-my-lg-4,
  .clc-mt-lg-4 {
    margin-top: 1rem !important;
  }
  .clc-mx-lg-4,
  .clc-mr-lg-4 {
    margin-right: 1rem !important;
  }
  .clc-my-lg-4,
  .clc-mb-lg-4 {
    margin-bottom: 1rem !important;
  }
  .clc-mx-lg-4,
  .clc-ml-lg-4 {
    margin-left: 1rem !important;
  }
  .clc-ms-lg-4 {
    margin-inline-start: 1rem !important;
  }
  .clc-me-lg-4 {
    margin-inline-end: 1rem !important;
  }
  .clc-m-lg-5 {
    margin: 1.25rem !important;
  }
  .clc-my-lg-5,
  .clc-mt-lg-5 {
    margin-top: 1.25rem !important;
  }
  .clc-mx-lg-5,
  .clc-mr-lg-5 {
    margin-right: 1.25rem !important;
  }
  .clc-my-lg-5,
  .clc-mb-lg-5 {
    margin-bottom: 1.25rem !important;
  }
  .clc-mx-lg-5,
  .clc-ml-lg-5 {
    margin-left: 1.25rem !important;
  }
  .clc-ms-lg-5 {
    margin-inline-start: 1.25rem !important;
  }
  .clc-me-lg-5 {
    margin-inline-end: 1.25rem !important;
  }
  .clc-m-lg-6 {
    margin: 1.5rem !important;
  }
  .clc-my-lg-6,
  .clc-mt-lg-6 {
    margin-top: 1.5rem !important;
  }
  .clc-mx-lg-6,
  .clc-mr-lg-6 {
    margin-right: 1.5rem !important;
  }
  .clc-my-lg-6,
  .clc-mb-lg-6 {
    margin-bottom: 1.5rem !important;
  }
  .clc-mx-lg-6,
  .clc-ml-lg-6 {
    margin-left: 1.5rem !important;
  }
  .clc-ms-lg-6 {
    margin-inline-start: 1.5rem !important;
  }
  .clc-me-lg-6 {
    margin-inline-end: 1.5rem !important;
  }
  .clc-m-lg-7 {
    margin: 1.75rem !important;
  }
  .clc-my-lg-7,
  .clc-mt-lg-7 {
    margin-top: 1.75rem !important;
  }
  .clc-mx-lg-7,
  .clc-mr-lg-7 {
    margin-right: 1.75rem !important;
  }
  .clc-my-lg-7,
  .clc-mb-lg-7 {
    margin-bottom: 1.75rem !important;
  }
  .clc-mx-lg-7,
  .clc-ml-lg-7 {
    margin-left: 1.75rem !important;
  }
  .clc-ms-lg-7 {
    margin-inline-start: 1.75rem !important;
  }
  .clc-me-lg-7 {
    margin-inline-end: 1.75rem !important;
  }
  .clc-m-lg-8 {
    margin: 2rem !important;
  }
  .clc-my-lg-8,
  .clc-mt-lg-8 {
    margin-top: 2rem !important;
  }
  .clc-mx-lg-8,
  .clc-mr-lg-8 {
    margin-right: 2rem !important;
  }
  .clc-my-lg-8,
  .clc-mb-lg-8 {
    margin-bottom: 2rem !important;
  }
  .clc-mx-lg-8,
  .clc-ml-lg-8 {
    margin-left: 2rem !important;
  }
  .clc-ms-lg-8 {
    margin-inline-start: 2rem !important;
  }
  .clc-me-lg-8 {
    margin-inline-end: 2rem !important;
  }
  .clc-m-lg-9 {
    margin: 2.25rem !important;
  }
  .clc-my-lg-9,
  .clc-mt-lg-9 {
    margin-top: 2.25rem !important;
  }
  .clc-mx-lg-9,
  .clc-mr-lg-9 {
    margin-right: 2.25rem !important;
  }
  .clc-my-lg-9,
  .clc-mb-lg-9 {
    margin-bottom: 2.25rem !important;
  }
  .clc-mx-lg-9,
  .clc-ml-lg-9 {
    margin-left: 2.25rem !important;
  }
  .clc-ms-lg-9 {
    margin-inline-start: 2.25rem !important;
  }
  .clc-me-lg-9 {
    margin-inline-end: 2.25rem !important;
  }
  .clc-m-lg-10 {
    margin: 2.5rem !important;
  }
  .clc-my-lg-10,
  .clc-mt-lg-10 {
    margin-top: 2.5rem !important;
  }
  .clc-mx-lg-10,
  .clc-mr-lg-10 {
    margin-right: 2.5rem !important;
  }
  .clc-my-lg-10,
  .clc-mb-lg-10 {
    margin-bottom: 2.5rem !important;
  }
  .clc-mx-lg-10,
  .clc-ml-lg-10 {
    margin-left: 2.5rem !important;
  }
  .clc-ms-lg-10 {
    margin-inline-start: 2.5rem !important;
  }
  .clc-me-lg-10 {
    margin-inline-end: 2.5rem !important;
  }
  .clc-m-lg-11 {
    margin: 2.75rem !important;
  }
  .clc-my-lg-11,
  .clc-mt-lg-11 {
    margin-top: 2.75rem !important;
  }
  .clc-mx-lg-11,
  .clc-mr-lg-11 {
    margin-right: 2.75rem !important;
  }
  .clc-my-lg-11,
  .clc-mb-lg-11 {
    margin-bottom: 2.75rem !important;
  }
  .clc-mx-lg-11,
  .clc-ml-lg-11 {
    margin-left: 2.75rem !important;
  }
  .clc-ms-lg-11 {
    margin-inline-start: 2.75rem !important;
  }
  .clc-me-lg-11 {
    margin-inline-end: 2.75rem !important;
  }
  .clc-m-lg-12 {
    margin: 3rem !important;
  }
  .clc-my-lg-12,
  .clc-mt-lg-12 {
    margin-top: 3rem !important;
  }
  .clc-mx-lg-12,
  .clc-mr-lg-12 {
    margin-right: 3rem !important;
  }
  .clc-my-lg-12,
  .clc-mb-lg-12 {
    margin-bottom: 3rem !important;
  }
  .clc-mx-lg-12,
  .clc-ml-lg-12 {
    margin-left: 3rem !important;
  }
  .clc-ms-lg-12 {
    margin-inline-start: 3rem !important;
  }
  .clc-me-lg-12 {
    margin-inline-end: 3rem !important;
  }
  .clc-p-lg-0 {
    padding: 0 !important;
  }
  .clc-py-lg-0,
  .clc-pt-lg-0 {
    padding-top: 0 !important;
  }
  .clc-px-lg-0,
  .clc-pr-lg-0 {
    padding-right: 0 !important;
  }
  .clc-py-lg-0,
  .clc-pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .clc-px-lg-0,
  .clc-pl-lg-0 {
    padding-left: 0 !important;
  }
  .clc-ps-lg-0 {
    padding-inline-start: 0 !important;
  }
  .clc-pe-lg-0 {
    padding-inline-end: 0 !important;
  }
  .clc-p-lg-05 {
    padding: 0.125rem !important;
  }
  .clc-py-lg-05,
  .clc-pt-lg-05 {
    padding-top: 0.125rem !important;
  }
  .clc-px-lg-05,
  .clc-pr-lg-05 {
    padding-right: 0.125rem !important;
  }
  .clc-py-lg-05,
  .clc-pb-lg-05 {
    padding-bottom: 0.125rem !important;
  }
  .clc-px-lg-05,
  .clc-pl-lg-05 {
    padding-left: 0.125rem !important;
  }
  .clc-ps-lg-05 {
    padding-inline-start: 0.125rem !important;
  }
  .clc-pe-lg-05 {
    padding-inline-end: 0.125rem !important;
  }
  .clc-p-lg-1 {
    padding: 0.25rem !important;
  }
  .clc-py-lg-1,
  .clc-pt-lg-1 {
    padding-top: 0.25rem !important;
  }
  .clc-px-lg-1,
  .clc-pr-lg-1 {
    padding-right: 0.25rem !important;
  }
  .clc-py-lg-1,
  .clc-pb-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .clc-px-lg-1,
  .clc-pl-lg-1 {
    padding-left: 0.25rem !important;
  }
  .clc-ps-lg-1 {
    padding-inline-start: 0.25rem !important;
  }
  .clc-pe-lg-1 {
    padding-inline-end: 0.25rem !important;
  }
  .clc-p-lg-2 {
    padding: 0.5rem !important;
  }
  .clc-py-lg-2,
  .clc-pt-lg-2 {
    padding-top: 0.5rem !important;
  }
  .clc-px-lg-2,
  .clc-pr-lg-2 {
    padding-right: 0.5rem !important;
  }
  .clc-py-lg-2,
  .clc-pb-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .clc-px-lg-2,
  .clc-pl-lg-2 {
    padding-left: 0.5rem !important;
  }
  .clc-ps-lg-2 {
    padding-inline-start: 0.5rem !important;
  }
  .clc-pe-lg-2 {
    padding-inline-end: 0.5rem !important;
  }
  .clc-p-lg-3 {
    padding: 0.75rem !important;
  }
  .clc-py-lg-3,
  .clc-pt-lg-3 {
    padding-top: 0.75rem !important;
  }
  .clc-px-lg-3,
  .clc-pr-lg-3 {
    padding-right: 0.75rem !important;
  }
  .clc-py-lg-3,
  .clc-pb-lg-3 {
    padding-bottom: 0.75rem !important;
  }
  .clc-px-lg-3,
  .clc-pl-lg-3 {
    padding-left: 0.75rem !important;
  }
  .clc-ps-lg-3 {
    padding-inline-start: 0.75rem !important;
  }
  .clc-pe-lg-3 {
    padding-inline-end: 0.75rem !important;
  }
  .clc-p-lg-4 {
    padding: 1rem !important;
  }
  .clc-py-lg-4,
  .clc-pt-lg-4 {
    padding-top: 1rem !important;
  }
  .clc-px-lg-4,
  .clc-pr-lg-4 {
    padding-right: 1rem !important;
  }
  .clc-py-lg-4,
  .clc-pb-lg-4 {
    padding-bottom: 1rem !important;
  }
  .clc-px-lg-4,
  .clc-pl-lg-4 {
    padding-left: 1rem !important;
  }
  .clc-ps-lg-4 {
    padding-inline-start: 1rem !important;
  }
  .clc-pe-lg-4 {
    padding-inline-end: 1rem !important;
  }
  .clc-p-lg-5 {
    padding: 1.25rem !important;
  }
  .clc-py-lg-5,
  .clc-pt-lg-5 {
    padding-top: 1.25rem !important;
  }
  .clc-px-lg-5,
  .clc-pr-lg-5 {
    padding-right: 1.25rem !important;
  }
  .clc-py-lg-5,
  .clc-pb-lg-5 {
    padding-bottom: 1.25rem !important;
  }
  .clc-px-lg-5,
  .clc-pl-lg-5 {
    padding-left: 1.25rem !important;
  }
  .clc-ps-lg-5 {
    padding-inline-start: 1.25rem !important;
  }
  .clc-pe-lg-5 {
    padding-inline-end: 1.25rem !important;
  }
  .clc-p-lg-6 {
    padding: 1.5rem !important;
  }
  .clc-py-lg-6,
  .clc-pt-lg-6 {
    padding-top: 1.5rem !important;
  }
  .clc-px-lg-6,
  .clc-pr-lg-6 {
    padding-right: 1.5rem !important;
  }
  .clc-py-lg-6,
  .clc-pb-lg-6 {
    padding-bottom: 1.5rem !important;
  }
  .clc-px-lg-6,
  .clc-pl-lg-6 {
    padding-left: 1.5rem !important;
  }
  .clc-ps-lg-6 {
    padding-inline-start: 1.5rem !important;
  }
  .clc-pe-lg-6 {
    padding-inline-end: 1.5rem !important;
  }
  .clc-p-lg-7 {
    padding: 1.75rem !important;
  }
  .clc-py-lg-7,
  .clc-pt-lg-7 {
    padding-top: 1.75rem !important;
  }
  .clc-px-lg-7,
  .clc-pr-lg-7 {
    padding-right: 1.75rem !important;
  }
  .clc-py-lg-7,
  .clc-pb-lg-7 {
    padding-bottom: 1.75rem !important;
  }
  .clc-px-lg-7,
  .clc-pl-lg-7 {
    padding-left: 1.75rem !important;
  }
  .clc-ps-lg-7 {
    padding-inline-start: 1.75rem !important;
  }
  .clc-pe-lg-7 {
    padding-inline-end: 1.75rem !important;
  }
  .clc-p-lg-8 {
    padding: 2rem !important;
  }
  .clc-py-lg-8,
  .clc-pt-lg-8 {
    padding-top: 2rem !important;
  }
  .clc-px-lg-8,
  .clc-pr-lg-8 {
    padding-right: 2rem !important;
  }
  .clc-py-lg-8,
  .clc-pb-lg-8 {
    padding-bottom: 2rem !important;
  }
  .clc-px-lg-8,
  .clc-pl-lg-8 {
    padding-left: 2rem !important;
  }
  .clc-ps-lg-8 {
    padding-inline-start: 2rem !important;
  }
  .clc-pe-lg-8 {
    padding-inline-end: 2rem !important;
  }
  .clc-p-lg-9 {
    padding: 2.25rem !important;
  }
  .clc-py-lg-9,
  .clc-pt-lg-9 {
    padding-top: 2.25rem !important;
  }
  .clc-px-lg-9,
  .clc-pr-lg-9 {
    padding-right: 2.25rem !important;
  }
  .clc-py-lg-9,
  .clc-pb-lg-9 {
    padding-bottom: 2.25rem !important;
  }
  .clc-px-lg-9,
  .clc-pl-lg-9 {
    padding-left: 2.25rem !important;
  }
  .clc-ps-lg-9 {
    padding-inline-start: 2.25rem !important;
  }
  .clc-pe-lg-9 {
    padding-inline-end: 2.25rem !important;
  }
  .clc-p-lg-10 {
    padding: 2.5rem !important;
  }
  .clc-py-lg-10,
  .clc-pt-lg-10 {
    padding-top: 2.5rem !important;
  }
  .clc-px-lg-10,
  .clc-pr-lg-10 {
    padding-right: 2.5rem !important;
  }
  .clc-py-lg-10,
  .clc-pb-lg-10 {
    padding-bottom: 2.5rem !important;
  }
  .clc-px-lg-10,
  .clc-pl-lg-10 {
    padding-left: 2.5rem !important;
  }
  .clc-ps-lg-10 {
    padding-inline-start: 2.5rem !important;
  }
  .clc-pe-lg-10 {
    padding-inline-end: 2.5rem !important;
  }
  .clc-p-lg-11 {
    padding: 2.75rem !important;
  }
  .clc-py-lg-11,
  .clc-pt-lg-11 {
    padding-top: 2.75rem !important;
  }
  .clc-px-lg-11,
  .clc-pr-lg-11 {
    padding-right: 2.75rem !important;
  }
  .clc-py-lg-11,
  .clc-pb-lg-11 {
    padding-bottom: 2.75rem !important;
  }
  .clc-px-lg-11,
  .clc-pl-lg-11 {
    padding-left: 2.75rem !important;
  }
  .clc-ps-lg-11 {
    padding-inline-start: 2.75rem !important;
  }
  .clc-pe-lg-11 {
    padding-inline-end: 2.75rem !important;
  }
  .clc-p-lg-12 {
    padding: 3rem !important;
  }
  .clc-py-lg-12,
  .clc-pt-lg-12 {
    padding-top: 3rem !important;
  }
  .clc-px-lg-12,
  .clc-pr-lg-12 {
    padding-right: 3rem !important;
  }
  .clc-py-lg-12,
  .clc-pb-lg-12 {
    padding-bottom: 3rem !important;
  }
  .clc-px-lg-12,
  .clc-pl-lg-12 {
    padding-left: 3rem !important;
  }
  .clc-ps-lg-12 {
    padding-inline-start: 3rem !important;
  }
  .clc-pe-lg-12 {
    padding-inline-end: 3rem !important;
  }
  .clc-m-lg-auto {
    margin: auto !important;
  }
  .clc-my-lg-auto,
  .clc-mt-lg-auto {
    margin-top: auto !important;
  }
  .clc-mx-lg-auto,
  .clc-mr-lg-auto {
    margin-right: auto !important;
  }
  .clc-my-lg-auto,
  .clc-mb-lg-auto {
    margin-bottom: auto !important;
  }
  .clc-mx-lg-auto,
  .clc-ml-lg-auto {
    margin-left: auto !important;
  }
  .clc-ms-lg-auto {
    margin-inline-start: auto !important;
  }
  .clc-me-lg-auto {
    margin-inline-end: auto !important;
  }
}
@media (min-width: 1920px) {
  .clc-m-xl-0 {
    margin: 0 !important;
  }
  .clc-my-xl-0,
  .clc-mt-xl-0 {
    margin-top: 0 !important;
  }
  .clc-mx-xl-0,
  .clc-mr-xl-0 {
    margin-right: 0 !important;
  }
  .clc-my-xl-0,
  .clc-mb-xl-0 {
    margin-bottom: 0 !important;
  }
  .clc-mx-xl-0,
  .clc-ml-xl-0 {
    margin-left: 0 !important;
  }
  .clc-ms-xl-0 {
    margin-inline-start: 0 !important;
  }
  .clc-me-xl-0 {
    margin-inline-end: 0 !important;
  }
  .clc-m-xl-05 {
    margin: 0.125rem !important;
  }
  .clc-my-xl-05,
  .clc-mt-xl-05 {
    margin-top: 0.125rem !important;
  }
  .clc-mx-xl-05,
  .clc-mr-xl-05 {
    margin-right: 0.125rem !important;
  }
  .clc-my-xl-05,
  .clc-mb-xl-05 {
    margin-bottom: 0.125rem !important;
  }
  .clc-mx-xl-05,
  .clc-ml-xl-05 {
    margin-left: 0.125rem !important;
  }
  .clc-ms-xl-05 {
    margin-inline-start: 0.125rem !important;
  }
  .clc-me-xl-05 {
    margin-inline-end: 0.125rem !important;
  }
  .clc-m-xl-1 {
    margin: 0.25rem !important;
  }
  .clc-my-xl-1,
  .clc-mt-xl-1 {
    margin-top: 0.25rem !important;
  }
  .clc-mx-xl-1,
  .clc-mr-xl-1 {
    margin-right: 0.25rem !important;
  }
  .clc-my-xl-1,
  .clc-mb-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .clc-mx-xl-1,
  .clc-ml-xl-1 {
    margin-left: 0.25rem !important;
  }
  .clc-ms-xl-1 {
    margin-inline-start: 0.25rem !important;
  }
  .clc-me-xl-1 {
    margin-inline-end: 0.25rem !important;
  }
  .clc-m-xl-2 {
    margin: 0.5rem !important;
  }
  .clc-my-xl-2,
  .clc-mt-xl-2 {
    margin-top: 0.5rem !important;
  }
  .clc-mx-xl-2,
  .clc-mr-xl-2 {
    margin-right: 0.5rem !important;
  }
  .clc-my-xl-2,
  .clc-mb-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .clc-mx-xl-2,
  .clc-ml-xl-2 {
    margin-left: 0.5rem !important;
  }
  .clc-ms-xl-2 {
    margin-inline-start: 0.5rem !important;
  }
  .clc-me-xl-2 {
    margin-inline-end: 0.5rem !important;
  }
  .clc-m-xl-3 {
    margin: 0.75rem !important;
  }
  .clc-my-xl-3,
  .clc-mt-xl-3 {
    margin-top: 0.75rem !important;
  }
  .clc-mx-xl-3,
  .clc-mr-xl-3 {
    margin-right: 0.75rem !important;
  }
  .clc-my-xl-3,
  .clc-mb-xl-3 {
    margin-bottom: 0.75rem !important;
  }
  .clc-mx-xl-3,
  .clc-ml-xl-3 {
    margin-left: 0.75rem !important;
  }
  .clc-ms-xl-3 {
    margin-inline-start: 0.75rem !important;
  }
  .clc-me-xl-3 {
    margin-inline-end: 0.75rem !important;
  }
  .clc-m-xl-4 {
    margin: 1rem !important;
  }
  .clc-my-xl-4,
  .clc-mt-xl-4 {
    margin-top: 1rem !important;
  }
  .clc-mx-xl-4,
  .clc-mr-xl-4 {
    margin-right: 1rem !important;
  }
  .clc-my-xl-4,
  .clc-mb-xl-4 {
    margin-bottom: 1rem !important;
  }
  .clc-mx-xl-4,
  .clc-ml-xl-4 {
    margin-left: 1rem !important;
  }
  .clc-ms-xl-4 {
    margin-inline-start: 1rem !important;
  }
  .clc-me-xl-4 {
    margin-inline-end: 1rem !important;
  }
  .clc-m-xl-5 {
    margin: 1.25rem !important;
  }
  .clc-my-xl-5,
  .clc-mt-xl-5 {
    margin-top: 1.25rem !important;
  }
  .clc-mx-xl-5,
  .clc-mr-xl-5 {
    margin-right: 1.25rem !important;
  }
  .clc-my-xl-5,
  .clc-mb-xl-5 {
    margin-bottom: 1.25rem !important;
  }
  .clc-mx-xl-5,
  .clc-ml-xl-5 {
    margin-left: 1.25rem !important;
  }
  .clc-ms-xl-5 {
    margin-inline-start: 1.25rem !important;
  }
  .clc-me-xl-5 {
    margin-inline-end: 1.25rem !important;
  }
  .clc-m-xl-6 {
    margin: 1.5rem !important;
  }
  .clc-my-xl-6,
  .clc-mt-xl-6 {
    margin-top: 1.5rem !important;
  }
  .clc-mx-xl-6,
  .clc-mr-xl-6 {
    margin-right: 1.5rem !important;
  }
  .clc-my-xl-6,
  .clc-mb-xl-6 {
    margin-bottom: 1.5rem !important;
  }
  .clc-mx-xl-6,
  .clc-ml-xl-6 {
    margin-left: 1.5rem !important;
  }
  .clc-ms-xl-6 {
    margin-inline-start: 1.5rem !important;
  }
  .clc-me-xl-6 {
    margin-inline-end: 1.5rem !important;
  }
  .clc-m-xl-7 {
    margin: 1.75rem !important;
  }
  .clc-my-xl-7,
  .clc-mt-xl-7 {
    margin-top: 1.75rem !important;
  }
  .clc-mx-xl-7,
  .clc-mr-xl-7 {
    margin-right: 1.75rem !important;
  }
  .clc-my-xl-7,
  .clc-mb-xl-7 {
    margin-bottom: 1.75rem !important;
  }
  .clc-mx-xl-7,
  .clc-ml-xl-7 {
    margin-left: 1.75rem !important;
  }
  .clc-ms-xl-7 {
    margin-inline-start: 1.75rem !important;
  }
  .clc-me-xl-7 {
    margin-inline-end: 1.75rem !important;
  }
  .clc-m-xl-8 {
    margin: 2rem !important;
  }
  .clc-my-xl-8,
  .clc-mt-xl-8 {
    margin-top: 2rem !important;
  }
  .clc-mx-xl-8,
  .clc-mr-xl-8 {
    margin-right: 2rem !important;
  }
  .clc-my-xl-8,
  .clc-mb-xl-8 {
    margin-bottom: 2rem !important;
  }
  .clc-mx-xl-8,
  .clc-ml-xl-8 {
    margin-left: 2rem !important;
  }
  .clc-ms-xl-8 {
    margin-inline-start: 2rem !important;
  }
  .clc-me-xl-8 {
    margin-inline-end: 2rem !important;
  }
  .clc-m-xl-9 {
    margin: 2.25rem !important;
  }
  .clc-my-xl-9,
  .clc-mt-xl-9 {
    margin-top: 2.25rem !important;
  }
  .clc-mx-xl-9,
  .clc-mr-xl-9 {
    margin-right: 2.25rem !important;
  }
  .clc-my-xl-9,
  .clc-mb-xl-9 {
    margin-bottom: 2.25rem !important;
  }
  .clc-mx-xl-9,
  .clc-ml-xl-9 {
    margin-left: 2.25rem !important;
  }
  .clc-ms-xl-9 {
    margin-inline-start: 2.25rem !important;
  }
  .clc-me-xl-9 {
    margin-inline-end: 2.25rem !important;
  }
  .clc-m-xl-10 {
    margin: 2.5rem !important;
  }
  .clc-my-xl-10,
  .clc-mt-xl-10 {
    margin-top: 2.5rem !important;
  }
  .clc-mx-xl-10,
  .clc-mr-xl-10 {
    margin-right: 2.5rem !important;
  }
  .clc-my-xl-10,
  .clc-mb-xl-10 {
    margin-bottom: 2.5rem !important;
  }
  .clc-mx-xl-10,
  .clc-ml-xl-10 {
    margin-left: 2.5rem !important;
  }
  .clc-ms-xl-10 {
    margin-inline-start: 2.5rem !important;
  }
  .clc-me-xl-10 {
    margin-inline-end: 2.5rem !important;
  }
  .clc-m-xl-11 {
    margin: 2.75rem !important;
  }
  .clc-my-xl-11,
  .clc-mt-xl-11 {
    margin-top: 2.75rem !important;
  }
  .clc-mx-xl-11,
  .clc-mr-xl-11 {
    margin-right: 2.75rem !important;
  }
  .clc-my-xl-11,
  .clc-mb-xl-11 {
    margin-bottom: 2.75rem !important;
  }
  .clc-mx-xl-11,
  .clc-ml-xl-11 {
    margin-left: 2.75rem !important;
  }
  .clc-ms-xl-11 {
    margin-inline-start: 2.75rem !important;
  }
  .clc-me-xl-11 {
    margin-inline-end: 2.75rem !important;
  }
  .clc-m-xl-12 {
    margin: 3rem !important;
  }
  .clc-my-xl-12,
  .clc-mt-xl-12 {
    margin-top: 3rem !important;
  }
  .clc-mx-xl-12,
  .clc-mr-xl-12 {
    margin-right: 3rem !important;
  }
  .clc-my-xl-12,
  .clc-mb-xl-12 {
    margin-bottom: 3rem !important;
  }
  .clc-mx-xl-12,
  .clc-ml-xl-12 {
    margin-left: 3rem !important;
  }
  .clc-ms-xl-12 {
    margin-inline-start: 3rem !important;
  }
  .clc-me-xl-12 {
    margin-inline-end: 3rem !important;
  }
  .clc-p-xl-0 {
    padding: 0 !important;
  }
  .clc-py-xl-0,
  .clc-pt-xl-0 {
    padding-top: 0 !important;
  }
  .clc-px-xl-0,
  .clc-pr-xl-0 {
    padding-right: 0 !important;
  }
  .clc-py-xl-0,
  .clc-pb-xl-0 {
    padding-bottom: 0 !important;
  }
  .clc-px-xl-0,
  .clc-pl-xl-0 {
    padding-left: 0 !important;
  }
  .clc-ps-xl-0 {
    padding-inline-start: 0 !important;
  }
  .clc-pe-xl-0 {
    padding-inline-end: 0 !important;
  }
  .clc-p-xl-05 {
    padding: 0.125rem !important;
  }
  .clc-py-xl-05,
  .clc-pt-xl-05 {
    padding-top: 0.125rem !important;
  }
  .clc-px-xl-05,
  .clc-pr-xl-05 {
    padding-right: 0.125rem !important;
  }
  .clc-py-xl-05,
  .clc-pb-xl-05 {
    padding-bottom: 0.125rem !important;
  }
  .clc-px-xl-05,
  .clc-pl-xl-05 {
    padding-left: 0.125rem !important;
  }
  .clc-ps-xl-05 {
    padding-inline-start: 0.125rem !important;
  }
  .clc-pe-xl-05 {
    padding-inline-end: 0.125rem !important;
  }
  .clc-p-xl-1 {
    padding: 0.25rem !important;
  }
  .clc-py-xl-1,
  .clc-pt-xl-1 {
    padding-top: 0.25rem !important;
  }
  .clc-px-xl-1,
  .clc-pr-xl-1 {
    padding-right: 0.25rem !important;
  }
  .clc-py-xl-1,
  .clc-pb-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .clc-px-xl-1,
  .clc-pl-xl-1 {
    padding-left: 0.25rem !important;
  }
  .clc-ps-xl-1 {
    padding-inline-start: 0.25rem !important;
  }
  .clc-pe-xl-1 {
    padding-inline-end: 0.25rem !important;
  }
  .clc-p-xl-2 {
    padding: 0.5rem !important;
  }
  .clc-py-xl-2,
  .clc-pt-xl-2 {
    padding-top: 0.5rem !important;
  }
  .clc-px-xl-2,
  .clc-pr-xl-2 {
    padding-right: 0.5rem !important;
  }
  .clc-py-xl-2,
  .clc-pb-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .clc-px-xl-2,
  .clc-pl-xl-2 {
    padding-left: 0.5rem !important;
  }
  .clc-ps-xl-2 {
    padding-inline-start: 0.5rem !important;
  }
  .clc-pe-xl-2 {
    padding-inline-end: 0.5rem !important;
  }
  .clc-p-xl-3 {
    padding: 0.75rem !important;
  }
  .clc-py-xl-3,
  .clc-pt-xl-3 {
    padding-top: 0.75rem !important;
  }
  .clc-px-xl-3,
  .clc-pr-xl-3 {
    padding-right: 0.75rem !important;
  }
  .clc-py-xl-3,
  .clc-pb-xl-3 {
    padding-bottom: 0.75rem !important;
  }
  .clc-px-xl-3,
  .clc-pl-xl-3 {
    padding-left: 0.75rem !important;
  }
  .clc-ps-xl-3 {
    padding-inline-start: 0.75rem !important;
  }
  .clc-pe-xl-3 {
    padding-inline-end: 0.75rem !important;
  }
  .clc-p-xl-4 {
    padding: 1rem !important;
  }
  .clc-py-xl-4,
  .clc-pt-xl-4 {
    padding-top: 1rem !important;
  }
  .clc-px-xl-4,
  .clc-pr-xl-4 {
    padding-right: 1rem !important;
  }
  .clc-py-xl-4,
  .clc-pb-xl-4 {
    padding-bottom: 1rem !important;
  }
  .clc-px-xl-4,
  .clc-pl-xl-4 {
    padding-left: 1rem !important;
  }
  .clc-ps-xl-4 {
    padding-inline-start: 1rem !important;
  }
  .clc-pe-xl-4 {
    padding-inline-end: 1rem !important;
  }
  .clc-p-xl-5 {
    padding: 1.25rem !important;
  }
  .clc-py-xl-5,
  .clc-pt-xl-5 {
    padding-top: 1.25rem !important;
  }
  .clc-px-xl-5,
  .clc-pr-xl-5 {
    padding-right: 1.25rem !important;
  }
  .clc-py-xl-5,
  .clc-pb-xl-5 {
    padding-bottom: 1.25rem !important;
  }
  .clc-px-xl-5,
  .clc-pl-xl-5 {
    padding-left: 1.25rem !important;
  }
  .clc-ps-xl-5 {
    padding-inline-start: 1.25rem !important;
  }
  .clc-pe-xl-5 {
    padding-inline-end: 1.25rem !important;
  }
  .clc-p-xl-6 {
    padding: 1.5rem !important;
  }
  .clc-py-xl-6,
  .clc-pt-xl-6 {
    padding-top: 1.5rem !important;
  }
  .clc-px-xl-6,
  .clc-pr-xl-6 {
    padding-right: 1.5rem !important;
  }
  .clc-py-xl-6,
  .clc-pb-xl-6 {
    padding-bottom: 1.5rem !important;
  }
  .clc-px-xl-6,
  .clc-pl-xl-6 {
    padding-left: 1.5rem !important;
  }
  .clc-ps-xl-6 {
    padding-inline-start: 1.5rem !important;
  }
  .clc-pe-xl-6 {
    padding-inline-end: 1.5rem !important;
  }
  .clc-p-xl-7 {
    padding: 1.75rem !important;
  }
  .clc-py-xl-7,
  .clc-pt-xl-7 {
    padding-top: 1.75rem !important;
  }
  .clc-px-xl-7,
  .clc-pr-xl-7 {
    padding-right: 1.75rem !important;
  }
  .clc-py-xl-7,
  .clc-pb-xl-7 {
    padding-bottom: 1.75rem !important;
  }
  .clc-px-xl-7,
  .clc-pl-xl-7 {
    padding-left: 1.75rem !important;
  }
  .clc-ps-xl-7 {
    padding-inline-start: 1.75rem !important;
  }
  .clc-pe-xl-7 {
    padding-inline-end: 1.75rem !important;
  }
  .clc-p-xl-8 {
    padding: 2rem !important;
  }
  .clc-py-xl-8,
  .clc-pt-xl-8 {
    padding-top: 2rem !important;
  }
  .clc-px-xl-8,
  .clc-pr-xl-8 {
    padding-right: 2rem !important;
  }
  .clc-py-xl-8,
  .clc-pb-xl-8 {
    padding-bottom: 2rem !important;
  }
  .clc-px-xl-8,
  .clc-pl-xl-8 {
    padding-left: 2rem !important;
  }
  .clc-ps-xl-8 {
    padding-inline-start: 2rem !important;
  }
  .clc-pe-xl-8 {
    padding-inline-end: 2rem !important;
  }
  .clc-p-xl-9 {
    padding: 2.25rem !important;
  }
  .clc-py-xl-9,
  .clc-pt-xl-9 {
    padding-top: 2.25rem !important;
  }
  .clc-px-xl-9,
  .clc-pr-xl-9 {
    padding-right: 2.25rem !important;
  }
  .clc-py-xl-9,
  .clc-pb-xl-9 {
    padding-bottom: 2.25rem !important;
  }
  .clc-px-xl-9,
  .clc-pl-xl-9 {
    padding-left: 2.25rem !important;
  }
  .clc-ps-xl-9 {
    padding-inline-start: 2.25rem !important;
  }
  .clc-pe-xl-9 {
    padding-inline-end: 2.25rem !important;
  }
  .clc-p-xl-10 {
    padding: 2.5rem !important;
  }
  .clc-py-xl-10,
  .clc-pt-xl-10 {
    padding-top: 2.5rem !important;
  }
  .clc-px-xl-10,
  .clc-pr-xl-10 {
    padding-right: 2.5rem !important;
  }
  .clc-py-xl-10,
  .clc-pb-xl-10 {
    padding-bottom: 2.5rem !important;
  }
  .clc-px-xl-10,
  .clc-pl-xl-10 {
    padding-left: 2.5rem !important;
  }
  .clc-ps-xl-10 {
    padding-inline-start: 2.5rem !important;
  }
  .clc-pe-xl-10 {
    padding-inline-end: 2.5rem !important;
  }
  .clc-p-xl-11 {
    padding: 2.75rem !important;
  }
  .clc-py-xl-11,
  .clc-pt-xl-11 {
    padding-top: 2.75rem !important;
  }
  .clc-px-xl-11,
  .clc-pr-xl-11 {
    padding-right: 2.75rem !important;
  }
  .clc-py-xl-11,
  .clc-pb-xl-11 {
    padding-bottom: 2.75rem !important;
  }
  .clc-px-xl-11,
  .clc-pl-xl-11 {
    padding-left: 2.75rem !important;
  }
  .clc-ps-xl-11 {
    padding-inline-start: 2.75rem !important;
  }
  .clc-pe-xl-11 {
    padding-inline-end: 2.75rem !important;
  }
  .clc-p-xl-12 {
    padding: 3rem !important;
  }
  .clc-py-xl-12,
  .clc-pt-xl-12 {
    padding-top: 3rem !important;
  }
  .clc-px-xl-12,
  .clc-pr-xl-12 {
    padding-right: 3rem !important;
  }
  .clc-py-xl-12,
  .clc-pb-xl-12 {
    padding-bottom: 3rem !important;
  }
  .clc-px-xl-12,
  .clc-pl-xl-12 {
    padding-left: 3rem !important;
  }
  .clc-ps-xl-12 {
    padding-inline-start: 3rem !important;
  }
  .clc-pe-xl-12 {
    padding-inline-end: 3rem !important;
  }
  .clc-m-xl-auto {
    margin: auto !important;
  }
  .clc-my-xl-auto,
  .clc-mt-xl-auto {
    margin-top: auto !important;
  }
  .clc-mx-xl-auto,
  .clc-mr-xl-auto {
    margin-right: auto !important;
  }
  .clc-my-xl-auto,
  .clc-mb-xl-auto {
    margin-bottom: auto !important;
  }
  .clc-mx-xl-auto,
  .clc-ml-xl-auto {
    margin-left: auto !important;
  }
  .clc-ms-xl-auto {
    margin-inline-start: auto !important;
  }
  .clc-me-xl-auto {
    margin-inline-end: auto !important;
  }
}
@media (min-width: 2560px) {
  .clc-m-xx-0 {
    margin: 0 !important;
  }
  .clc-my-xx-0,
  .clc-mt-xx-0 {
    margin-top: 0 !important;
  }
  .clc-mx-xx-0,
  .clc-mr-xx-0 {
    margin-right: 0 !important;
  }
  .clc-my-xx-0,
  .clc-mb-xx-0 {
    margin-bottom: 0 !important;
  }
  .clc-mx-xx-0,
  .clc-ml-xx-0 {
    margin-left: 0 !important;
  }
  .clc-ms-xx-0 {
    margin-inline-start: 0 !important;
  }
  .clc-me-xx-0 {
    margin-inline-end: 0 !important;
  }
  .clc-m-xx-05 {
    margin: 0.125rem !important;
  }
  .clc-my-xx-05,
  .clc-mt-xx-05 {
    margin-top: 0.125rem !important;
  }
  .clc-mx-xx-05,
  .clc-mr-xx-05 {
    margin-right: 0.125rem !important;
  }
  .clc-my-xx-05,
  .clc-mb-xx-05 {
    margin-bottom: 0.125rem !important;
  }
  .clc-mx-xx-05,
  .clc-ml-xx-05 {
    margin-left: 0.125rem !important;
  }
  .clc-ms-xx-05 {
    margin-inline-start: 0.125rem !important;
  }
  .clc-me-xx-05 {
    margin-inline-end: 0.125rem !important;
  }
  .clc-m-xx-1 {
    margin: 0.25rem !important;
  }
  .clc-my-xx-1,
  .clc-mt-xx-1 {
    margin-top: 0.25rem !important;
  }
  .clc-mx-xx-1,
  .clc-mr-xx-1 {
    margin-right: 0.25rem !important;
  }
  .clc-my-xx-1,
  .clc-mb-xx-1 {
    margin-bottom: 0.25rem !important;
  }
  .clc-mx-xx-1,
  .clc-ml-xx-1 {
    margin-left: 0.25rem !important;
  }
  .clc-ms-xx-1 {
    margin-inline-start: 0.25rem !important;
  }
  .clc-me-xx-1 {
    margin-inline-end: 0.25rem !important;
  }
  .clc-m-xx-2 {
    margin: 0.5rem !important;
  }
  .clc-my-xx-2,
  .clc-mt-xx-2 {
    margin-top: 0.5rem !important;
  }
  .clc-mx-xx-2,
  .clc-mr-xx-2 {
    margin-right: 0.5rem !important;
  }
  .clc-my-xx-2,
  .clc-mb-xx-2 {
    margin-bottom: 0.5rem !important;
  }
  .clc-mx-xx-2,
  .clc-ml-xx-2 {
    margin-left: 0.5rem !important;
  }
  .clc-ms-xx-2 {
    margin-inline-start: 0.5rem !important;
  }
  .clc-me-xx-2 {
    margin-inline-end: 0.5rem !important;
  }
  .clc-m-xx-3 {
    margin: 0.75rem !important;
  }
  .clc-my-xx-3,
  .clc-mt-xx-3 {
    margin-top: 0.75rem !important;
  }
  .clc-mx-xx-3,
  .clc-mr-xx-3 {
    margin-right: 0.75rem !important;
  }
  .clc-my-xx-3,
  .clc-mb-xx-3 {
    margin-bottom: 0.75rem !important;
  }
  .clc-mx-xx-3,
  .clc-ml-xx-3 {
    margin-left: 0.75rem !important;
  }
  .clc-ms-xx-3 {
    margin-inline-start: 0.75rem !important;
  }
  .clc-me-xx-3 {
    margin-inline-end: 0.75rem !important;
  }
  .clc-m-xx-4 {
    margin: 1rem !important;
  }
  .clc-my-xx-4,
  .clc-mt-xx-4 {
    margin-top: 1rem !important;
  }
  .clc-mx-xx-4,
  .clc-mr-xx-4 {
    margin-right: 1rem !important;
  }
  .clc-my-xx-4,
  .clc-mb-xx-4 {
    margin-bottom: 1rem !important;
  }
  .clc-mx-xx-4,
  .clc-ml-xx-4 {
    margin-left: 1rem !important;
  }
  .clc-ms-xx-4 {
    margin-inline-start: 1rem !important;
  }
  .clc-me-xx-4 {
    margin-inline-end: 1rem !important;
  }
  .clc-m-xx-5 {
    margin: 1.25rem !important;
  }
  .clc-my-xx-5,
  .clc-mt-xx-5 {
    margin-top: 1.25rem !important;
  }
  .clc-mx-xx-5,
  .clc-mr-xx-5 {
    margin-right: 1.25rem !important;
  }
  .clc-my-xx-5,
  .clc-mb-xx-5 {
    margin-bottom: 1.25rem !important;
  }
  .clc-mx-xx-5,
  .clc-ml-xx-5 {
    margin-left: 1.25rem !important;
  }
  .clc-ms-xx-5 {
    margin-inline-start: 1.25rem !important;
  }
  .clc-me-xx-5 {
    margin-inline-end: 1.25rem !important;
  }
  .clc-m-xx-6 {
    margin: 1.5rem !important;
  }
  .clc-my-xx-6,
  .clc-mt-xx-6 {
    margin-top: 1.5rem !important;
  }
  .clc-mx-xx-6,
  .clc-mr-xx-6 {
    margin-right: 1.5rem !important;
  }
  .clc-my-xx-6,
  .clc-mb-xx-6 {
    margin-bottom: 1.5rem !important;
  }
  .clc-mx-xx-6,
  .clc-ml-xx-6 {
    margin-left: 1.5rem !important;
  }
  .clc-ms-xx-6 {
    margin-inline-start: 1.5rem !important;
  }
  .clc-me-xx-6 {
    margin-inline-end: 1.5rem !important;
  }
  .clc-m-xx-7 {
    margin: 1.75rem !important;
  }
  .clc-my-xx-7,
  .clc-mt-xx-7 {
    margin-top: 1.75rem !important;
  }
  .clc-mx-xx-7,
  .clc-mr-xx-7 {
    margin-right: 1.75rem !important;
  }
  .clc-my-xx-7,
  .clc-mb-xx-7 {
    margin-bottom: 1.75rem !important;
  }
  .clc-mx-xx-7,
  .clc-ml-xx-7 {
    margin-left: 1.75rem !important;
  }
  .clc-ms-xx-7 {
    margin-inline-start: 1.75rem !important;
  }
  .clc-me-xx-7 {
    margin-inline-end: 1.75rem !important;
  }
  .clc-m-xx-8 {
    margin: 2rem !important;
  }
  .clc-my-xx-8,
  .clc-mt-xx-8 {
    margin-top: 2rem !important;
  }
  .clc-mx-xx-8,
  .clc-mr-xx-8 {
    margin-right: 2rem !important;
  }
  .clc-my-xx-8,
  .clc-mb-xx-8 {
    margin-bottom: 2rem !important;
  }
  .clc-mx-xx-8,
  .clc-ml-xx-8 {
    margin-left: 2rem !important;
  }
  .clc-ms-xx-8 {
    margin-inline-start: 2rem !important;
  }
  .clc-me-xx-8 {
    margin-inline-end: 2rem !important;
  }
  .clc-m-xx-9 {
    margin: 2.25rem !important;
  }
  .clc-my-xx-9,
  .clc-mt-xx-9 {
    margin-top: 2.25rem !important;
  }
  .clc-mx-xx-9,
  .clc-mr-xx-9 {
    margin-right: 2.25rem !important;
  }
  .clc-my-xx-9,
  .clc-mb-xx-9 {
    margin-bottom: 2.25rem !important;
  }
  .clc-mx-xx-9,
  .clc-ml-xx-9 {
    margin-left: 2.25rem !important;
  }
  .clc-ms-xx-9 {
    margin-inline-start: 2.25rem !important;
  }
  .clc-me-xx-9 {
    margin-inline-end: 2.25rem !important;
  }
  .clc-m-xx-10 {
    margin: 2.5rem !important;
  }
  .clc-my-xx-10,
  .clc-mt-xx-10 {
    margin-top: 2.5rem !important;
  }
  .clc-mx-xx-10,
  .clc-mr-xx-10 {
    margin-right: 2.5rem !important;
  }
  .clc-my-xx-10,
  .clc-mb-xx-10 {
    margin-bottom: 2.5rem !important;
  }
  .clc-mx-xx-10,
  .clc-ml-xx-10 {
    margin-left: 2.5rem !important;
  }
  .clc-ms-xx-10 {
    margin-inline-start: 2.5rem !important;
  }
  .clc-me-xx-10 {
    margin-inline-end: 2.5rem !important;
  }
  .clc-m-xx-11 {
    margin: 2.75rem !important;
  }
  .clc-my-xx-11,
  .clc-mt-xx-11 {
    margin-top: 2.75rem !important;
  }
  .clc-mx-xx-11,
  .clc-mr-xx-11 {
    margin-right: 2.75rem !important;
  }
  .clc-my-xx-11,
  .clc-mb-xx-11 {
    margin-bottom: 2.75rem !important;
  }
  .clc-mx-xx-11,
  .clc-ml-xx-11 {
    margin-left: 2.75rem !important;
  }
  .clc-ms-xx-11 {
    margin-inline-start: 2.75rem !important;
  }
  .clc-me-xx-11 {
    margin-inline-end: 2.75rem !important;
  }
  .clc-m-xx-12 {
    margin: 3rem !important;
  }
  .clc-my-xx-12,
  .clc-mt-xx-12 {
    margin-top: 3rem !important;
  }
  .clc-mx-xx-12,
  .clc-mr-xx-12 {
    margin-right: 3rem !important;
  }
  .clc-my-xx-12,
  .clc-mb-xx-12 {
    margin-bottom: 3rem !important;
  }
  .clc-mx-xx-12,
  .clc-ml-xx-12 {
    margin-left: 3rem !important;
  }
  .clc-ms-xx-12 {
    margin-inline-start: 3rem !important;
  }
  .clc-me-xx-12 {
    margin-inline-end: 3rem !important;
  }
  .clc-p-xx-0 {
    padding: 0 !important;
  }
  .clc-py-xx-0,
  .clc-pt-xx-0 {
    padding-top: 0 !important;
  }
  .clc-px-xx-0,
  .clc-pr-xx-0 {
    padding-right: 0 !important;
  }
  .clc-py-xx-0,
  .clc-pb-xx-0 {
    padding-bottom: 0 !important;
  }
  .clc-px-xx-0,
  .clc-pl-xx-0 {
    padding-left: 0 !important;
  }
  .clc-ps-xx-0 {
    padding-inline-start: 0 !important;
  }
  .clc-pe-xx-0 {
    padding-inline-end: 0 !important;
  }
  .clc-p-xx-05 {
    padding: 0.125rem !important;
  }
  .clc-py-xx-05,
  .clc-pt-xx-05 {
    padding-top: 0.125rem !important;
  }
  .clc-px-xx-05,
  .clc-pr-xx-05 {
    padding-right: 0.125rem !important;
  }
  .clc-py-xx-05,
  .clc-pb-xx-05 {
    padding-bottom: 0.125rem !important;
  }
  .clc-px-xx-05,
  .clc-pl-xx-05 {
    padding-left: 0.125rem !important;
  }
  .clc-ps-xx-05 {
    padding-inline-start: 0.125rem !important;
  }
  .clc-pe-xx-05 {
    padding-inline-end: 0.125rem !important;
  }
  .clc-p-xx-1 {
    padding: 0.25rem !important;
  }
  .clc-py-xx-1,
  .clc-pt-xx-1 {
    padding-top: 0.25rem !important;
  }
  .clc-px-xx-1,
  .clc-pr-xx-1 {
    padding-right: 0.25rem !important;
  }
  .clc-py-xx-1,
  .clc-pb-xx-1 {
    padding-bottom: 0.25rem !important;
  }
  .clc-px-xx-1,
  .clc-pl-xx-1 {
    padding-left: 0.25rem !important;
  }
  .clc-ps-xx-1 {
    padding-inline-start: 0.25rem !important;
  }
  .clc-pe-xx-1 {
    padding-inline-end: 0.25rem !important;
  }
  .clc-p-xx-2 {
    padding: 0.5rem !important;
  }
  .clc-py-xx-2,
  .clc-pt-xx-2 {
    padding-top: 0.5rem !important;
  }
  .clc-px-xx-2,
  .clc-pr-xx-2 {
    padding-right: 0.5rem !important;
  }
  .clc-py-xx-2,
  .clc-pb-xx-2 {
    padding-bottom: 0.5rem !important;
  }
  .clc-px-xx-2,
  .clc-pl-xx-2 {
    padding-left: 0.5rem !important;
  }
  .clc-ps-xx-2 {
    padding-inline-start: 0.5rem !important;
  }
  .clc-pe-xx-2 {
    padding-inline-end: 0.5rem !important;
  }
  .clc-p-xx-3 {
    padding: 0.75rem !important;
  }
  .clc-py-xx-3,
  .clc-pt-xx-3 {
    padding-top: 0.75rem !important;
  }
  .clc-px-xx-3,
  .clc-pr-xx-3 {
    padding-right: 0.75rem !important;
  }
  .clc-py-xx-3,
  .clc-pb-xx-3 {
    padding-bottom: 0.75rem !important;
  }
  .clc-px-xx-3,
  .clc-pl-xx-3 {
    padding-left: 0.75rem !important;
  }
  .clc-ps-xx-3 {
    padding-inline-start: 0.75rem !important;
  }
  .clc-pe-xx-3 {
    padding-inline-end: 0.75rem !important;
  }
  .clc-p-xx-4 {
    padding: 1rem !important;
  }
  .clc-py-xx-4,
  .clc-pt-xx-4 {
    padding-top: 1rem !important;
  }
  .clc-px-xx-4,
  .clc-pr-xx-4 {
    padding-right: 1rem !important;
  }
  .clc-py-xx-4,
  .clc-pb-xx-4 {
    padding-bottom: 1rem !important;
  }
  .clc-px-xx-4,
  .clc-pl-xx-4 {
    padding-left: 1rem !important;
  }
  .clc-ps-xx-4 {
    padding-inline-start: 1rem !important;
  }
  .clc-pe-xx-4 {
    padding-inline-end: 1rem !important;
  }
  .clc-p-xx-5 {
    padding: 1.25rem !important;
  }
  .clc-py-xx-5,
  .clc-pt-xx-5 {
    padding-top: 1.25rem !important;
  }
  .clc-px-xx-5,
  .clc-pr-xx-5 {
    padding-right: 1.25rem !important;
  }
  .clc-py-xx-5,
  .clc-pb-xx-5 {
    padding-bottom: 1.25rem !important;
  }
  .clc-px-xx-5,
  .clc-pl-xx-5 {
    padding-left: 1.25rem !important;
  }
  .clc-ps-xx-5 {
    padding-inline-start: 1.25rem !important;
  }
  .clc-pe-xx-5 {
    padding-inline-end: 1.25rem !important;
  }
  .clc-p-xx-6 {
    padding: 1.5rem !important;
  }
  .clc-py-xx-6,
  .clc-pt-xx-6 {
    padding-top: 1.5rem !important;
  }
  .clc-px-xx-6,
  .clc-pr-xx-6 {
    padding-right: 1.5rem !important;
  }
  .clc-py-xx-6,
  .clc-pb-xx-6 {
    padding-bottom: 1.5rem !important;
  }
  .clc-px-xx-6,
  .clc-pl-xx-6 {
    padding-left: 1.5rem !important;
  }
  .clc-ps-xx-6 {
    padding-inline-start: 1.5rem !important;
  }
  .clc-pe-xx-6 {
    padding-inline-end: 1.5rem !important;
  }
  .clc-p-xx-7 {
    padding: 1.75rem !important;
  }
  .clc-py-xx-7,
  .clc-pt-xx-7 {
    padding-top: 1.75rem !important;
  }
  .clc-px-xx-7,
  .clc-pr-xx-7 {
    padding-right: 1.75rem !important;
  }
  .clc-py-xx-7,
  .clc-pb-xx-7 {
    padding-bottom: 1.75rem !important;
  }
  .clc-px-xx-7,
  .clc-pl-xx-7 {
    padding-left: 1.75rem !important;
  }
  .clc-ps-xx-7 {
    padding-inline-start: 1.75rem !important;
  }
  .clc-pe-xx-7 {
    padding-inline-end: 1.75rem !important;
  }
  .clc-p-xx-8 {
    padding: 2rem !important;
  }
  .clc-py-xx-8,
  .clc-pt-xx-8 {
    padding-top: 2rem !important;
  }
  .clc-px-xx-8,
  .clc-pr-xx-8 {
    padding-right: 2rem !important;
  }
  .clc-py-xx-8,
  .clc-pb-xx-8 {
    padding-bottom: 2rem !important;
  }
  .clc-px-xx-8,
  .clc-pl-xx-8 {
    padding-left: 2rem !important;
  }
  .clc-ps-xx-8 {
    padding-inline-start: 2rem !important;
  }
  .clc-pe-xx-8 {
    padding-inline-end: 2rem !important;
  }
  .clc-p-xx-9 {
    padding: 2.25rem !important;
  }
  .clc-py-xx-9,
  .clc-pt-xx-9 {
    padding-top: 2.25rem !important;
  }
  .clc-px-xx-9,
  .clc-pr-xx-9 {
    padding-right: 2.25rem !important;
  }
  .clc-py-xx-9,
  .clc-pb-xx-9 {
    padding-bottom: 2.25rem !important;
  }
  .clc-px-xx-9,
  .clc-pl-xx-9 {
    padding-left: 2.25rem !important;
  }
  .clc-ps-xx-9 {
    padding-inline-start: 2.25rem !important;
  }
  .clc-pe-xx-9 {
    padding-inline-end: 2.25rem !important;
  }
  .clc-p-xx-10 {
    padding: 2.5rem !important;
  }
  .clc-py-xx-10,
  .clc-pt-xx-10 {
    padding-top: 2.5rem !important;
  }
  .clc-px-xx-10,
  .clc-pr-xx-10 {
    padding-right: 2.5rem !important;
  }
  .clc-py-xx-10,
  .clc-pb-xx-10 {
    padding-bottom: 2.5rem !important;
  }
  .clc-px-xx-10,
  .clc-pl-xx-10 {
    padding-left: 2.5rem !important;
  }
  .clc-ps-xx-10 {
    padding-inline-start: 2.5rem !important;
  }
  .clc-pe-xx-10 {
    padding-inline-end: 2.5rem !important;
  }
  .clc-p-xx-11 {
    padding: 2.75rem !important;
  }
  .clc-py-xx-11,
  .clc-pt-xx-11 {
    padding-top: 2.75rem !important;
  }
  .clc-px-xx-11,
  .clc-pr-xx-11 {
    padding-right: 2.75rem !important;
  }
  .clc-py-xx-11,
  .clc-pb-xx-11 {
    padding-bottom: 2.75rem !important;
  }
  .clc-px-xx-11,
  .clc-pl-xx-11 {
    padding-left: 2.75rem !important;
  }
  .clc-ps-xx-11 {
    padding-inline-start: 2.75rem !important;
  }
  .clc-pe-xx-11 {
    padding-inline-end: 2.75rem !important;
  }
  .clc-p-xx-12 {
    padding: 3rem !important;
  }
  .clc-py-xx-12,
  .clc-pt-xx-12 {
    padding-top: 3rem !important;
  }
  .clc-px-xx-12,
  .clc-pr-xx-12 {
    padding-right: 3rem !important;
  }
  .clc-py-xx-12,
  .clc-pb-xx-12 {
    padding-bottom: 3rem !important;
  }
  .clc-px-xx-12,
  .clc-pl-xx-12 {
    padding-left: 3rem !important;
  }
  .clc-ps-xx-12 {
    padding-inline-start: 3rem !important;
  }
  .clc-pe-xx-12 {
    padding-inline-end: 3rem !important;
  }
  .clc-m-xx-auto {
    margin: auto !important;
  }
  .clc-my-xx-auto,
  .clc-mt-xx-auto {
    margin-top: auto !important;
  }
  .clc-mx-xx-auto,
  .clc-mr-xx-auto {
    margin-right: auto !important;
  }
  .clc-my-xx-auto,
  .clc-mb-xx-auto {
    margin-bottom: auto !important;
  }
  .clc-mx-xx-auto,
  .clc-ml-xx-auto {
    margin-left: auto !important;
  }
  .clc-ms-xx-auto {
    margin-inline-start: auto !important;
  }
  .clc-me-xx-auto {
    margin-inline-end: auto !important;
  }
}
@keyframes clc-open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes clc-close {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.clc-open {
  animation: var(--clc-expander-transition) clc-open;
}

.clc-close {
  animation: var(--clc-expander-transition) clc-close;
}

@keyframes clc-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes clc-pulse-subtle {
  0%, 100% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
}
/* 오버레이(transform) 스윕 — _skeleton.scss 의 ::after 가 쓴다.
   background-position 스윕(페인트형)에서 전환. 방향(왼→오른)은 그대로다. */
@keyframes clc-wave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
h1.clc-heading {
  font-size: 2rem;
  line-height: 1.1875em;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--clc-text-title-color);
  margin-block-start: 0;
  margin-block-end: 1rem;
}

h2.clc-heading {
  font-size: 1.5rem;
  line-height: 1.25em;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--clc-text-title-color);
  margin-block-start: 0;
  margin-block-end: 1rem;
}

h3.clc-heading {
  font-size: 1.125rem;
  line-height: 1.25em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--clc-text-title-color);
  margin-block-start: 0;
  margin-block-end: 0.75rem;
}

h4.clc-heading {
  font-size: 1rem;
  line-height: 1.25em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--clc-text-title-color);
  margin-block-start: 0;
  margin-block-end: 0.5rem;
}

h5.clc-heading {
  font-size: 0.875rem;
  line-height: 1.25em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--clc-text-title-color);
  margin-block-start: 0;
  margin-block-end: 0.5rem;
}

h6.clc-heading {
  font-size: 0.75rem;
  line-height: 1.25em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--clc-text-title-color);
  margin-block-start: 0;
  margin-block-end: 0.5rem;
}

.clc-text-display-h1 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-display-h1-font-size);
  line-height: var(--clc-text-display-h1-line-height);
  font-weight: var(--clc-text-display-h1-font-weight);
  letter-spacing: var(--clc-text-display-h1-letter-spacing);
  color: var(--clc-text-display-h1-color);
  margin-block-start: var(--clc-text-display-h1-margin-block-start);
  margin-block-end: var(--clc-text-display-h1-margin-block-end);
}

.clc-stack > .clc-text-display-h1 {
  margin-block: 0;
}

.clc-text-display-h2 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-display-h2-font-size);
  line-height: var(--clc-text-display-h2-line-height);
  font-weight: var(--clc-text-display-h2-font-weight);
  letter-spacing: var(--clc-text-display-h2-letter-spacing);
  color: var(--clc-text-display-h2-color);
  margin-block-start: var(--clc-text-display-h2-margin-block-start);
  margin-block-end: var(--clc-text-display-h2-margin-block-end);
}

.clc-stack > .clc-text-display-h2 {
  margin-block: 0;
}

.clc-text-display-h3 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-display-h3-font-size);
  line-height: var(--clc-text-display-h3-line-height);
  font-weight: var(--clc-text-display-h3-font-weight);
  letter-spacing: var(--clc-text-display-h3-letter-spacing);
  color: var(--clc-text-display-h3-color);
  margin-block-start: var(--clc-text-display-h3-margin-block-start);
  margin-block-end: var(--clc-text-display-h3-margin-block-end);
}

.clc-stack > .clc-text-display-h3 {
  margin-block: 0;
}

.clc-text-display-h4 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-display-h4-font-size);
  line-height: var(--clc-text-display-h4-line-height);
  font-weight: var(--clc-text-display-h4-font-weight);
  letter-spacing: var(--clc-text-display-h4-letter-spacing);
  color: var(--clc-text-display-h4-color);
  margin-block-start: var(--clc-text-display-h4-margin-block-start);
  margin-block-end: var(--clc-text-display-h4-margin-block-end);
}

.clc-stack > .clc-text-display-h4 {
  margin-block: 0;
}

.clc-text-display-h5 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-display-h5-font-size);
  line-height: var(--clc-text-display-h5-line-height);
  font-weight: var(--clc-text-display-h5-font-weight);
  letter-spacing: var(--clc-text-display-h5-letter-spacing);
  color: var(--clc-text-display-h5-color);
  margin-block-start: var(--clc-text-display-h5-margin-block-start);
  margin-block-end: var(--clc-text-display-h5-margin-block-end);
}

.clc-stack > .clc-text-display-h5 {
  margin-block: 0;
}

.clc-text-display-h6 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-display-h6-font-size);
  line-height: var(--clc-text-display-h6-line-height);
  font-weight: var(--clc-text-display-h6-font-weight);
  letter-spacing: var(--clc-text-display-h6-letter-spacing);
  color: var(--clc-text-display-h6-color);
  margin-block-start: var(--clc-text-display-h6-margin-block-start);
  margin-block-end: var(--clc-text-display-h6-margin-block-end);
}

.clc-stack > .clc-text-display-h6 {
  margin-block: 0;
}

.clc-text-h1 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-h1-font-size);
  line-height: var(--clc-text-h1-line-height);
  font-weight: var(--clc-text-h1-font-weight);
  letter-spacing: var(--clc-text-h1-letter-spacing);
  color: var(--clc-text-h1-color);
  margin-block-start: var(--clc-text-h1-margin-block-start);
  margin-block-end: var(--clc-text-h1-margin-block-end);
}

.clc-stack > .clc-text-h1 {
  margin-block: 0;
}

.clc-text-h2 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-h2-font-size);
  line-height: var(--clc-text-h2-line-height);
  font-weight: var(--clc-text-h2-font-weight);
  letter-spacing: var(--clc-text-h2-letter-spacing);
  color: var(--clc-text-h2-color);
  margin-block-start: var(--clc-text-h2-margin-block-start);
  margin-block-end: var(--clc-text-h2-margin-block-end);
}

.clc-stack > .clc-text-h2 {
  margin-block: 0;
}

.clc-text-h3 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-h3-font-size);
  line-height: var(--clc-text-h3-line-height);
  font-weight: var(--clc-text-h3-font-weight);
  letter-spacing: var(--clc-text-h3-letter-spacing);
  color: var(--clc-text-h3-color);
  margin-block-start: var(--clc-text-h3-margin-block-start);
  margin-block-end: var(--clc-text-h3-margin-block-end);
}

.clc-stack > .clc-text-h3 {
  margin-block: 0;
}

.clc-text-h4 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-h4-font-size);
  line-height: var(--clc-text-h4-line-height);
  font-weight: var(--clc-text-h4-font-weight);
  letter-spacing: var(--clc-text-h4-letter-spacing);
  color: var(--clc-text-h4-color);
  margin-block-start: var(--clc-text-h4-margin-block-start);
  margin-block-end: var(--clc-text-h4-margin-block-end);
}

.clc-stack > .clc-text-h4 {
  margin-block: 0;
}

.clc-text-h5 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-h5-font-size);
  line-height: var(--clc-text-h5-line-height);
  font-weight: var(--clc-text-h5-font-weight);
  letter-spacing: var(--clc-text-h5-letter-spacing);
  color: var(--clc-text-h5-color);
  margin-block-start: var(--clc-text-h5-margin-block-start);
  margin-block-end: var(--clc-text-h5-margin-block-end);
}

.clc-stack > .clc-text-h5 {
  margin-block: 0;
}

.clc-text-h6 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-h6-font-size);
  line-height: var(--clc-text-h6-line-height);
  font-weight: var(--clc-text-h6-font-weight);
  letter-spacing: var(--clc-text-h6-letter-spacing);
  color: var(--clc-text-h6-color);
  margin-block-start: var(--clc-text-h6-margin-block-start);
  margin-block-end: var(--clc-text-h6-margin-block-end);
}

.clc-stack > .clc-text-h6 {
  margin-block: 0;
}

.clc-text-subtitle1 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-subtitle1-font-size);
  line-height: var(--clc-text-subtitle1-line-height);
  font-weight: var(--clc-text-subtitle1-font-weight);
  letter-spacing: var(--clc-text-subtitle1-letter-spacing);
  color: var(--clc-text-subtitle1-color);
  margin-block-start: var(--clc-text-subtitle1-margin-block-start);
  margin-block-end: var(--clc-text-subtitle1-margin-block-end);
}

.clc-stack > .clc-text-subtitle1 {
  margin-block: 0;
}

.clc-text-subtitle2 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-subtitle2-font-size);
  line-height: var(--clc-text-subtitle2-line-height);
  font-weight: var(--clc-text-subtitle2-font-weight);
  letter-spacing: var(--clc-text-subtitle2-letter-spacing);
  color: var(--clc-text-subtitle2-color);
  margin-block-start: var(--clc-text-subtitle2-margin-block-start);
  margin-block-end: var(--clc-text-subtitle2-margin-block-end);
}

.clc-stack > .clc-text-subtitle2 {
  margin-block: 0;
}

.clc-text-body1 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-body1-font-size);
  line-height: var(--clc-text-body1-line-height);
  font-weight: var(--clc-text-body1-font-weight);
  letter-spacing: var(--clc-text-body1-letter-spacing);
  color: var(--clc-text-body1-color);
  margin-block-start: var(--clc-text-body1-margin-block-start);
  margin-block-end: var(--clc-text-body1-margin-block-end);
}

.clc-stack > .clc-text-body1 {
  margin-block: 0;
}

.clc-text-body2 {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-body2-font-size);
  line-height: var(--clc-text-body2-line-height);
  font-weight: var(--clc-text-body2-font-weight);
  letter-spacing: var(--clc-text-body2-letter-spacing);
  color: var(--clc-text-body2-color);
  margin-block-start: var(--clc-text-body2-margin-block-start);
  margin-block-end: var(--clc-text-body2-margin-block-end);
}

.clc-stack > .clc-text-body2 {
  margin-block: 0;
}

.clc-text-button {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-button-font-size);
  line-height: var(--clc-text-button-line-height);
  font-weight: var(--clc-text-button-font-weight);
  letter-spacing: var(--clc-text-button-letter-spacing);
  text-transform: var(--clc-text-button-text-transform);
  color: var(--clc-text-button-color);
  margin-block-start: var(--clc-text-button-margin-block-start);
  margin-block-end: var(--clc-text-button-margin-block-end);
}

.clc-stack > .clc-text-button {
  margin-block: 0;
}

.clc-text-caption {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-caption-font-size);
  line-height: var(--clc-text-caption-line-height);
  font-weight: var(--clc-text-caption-font-weight);
  letter-spacing: var(--clc-text-caption-letter-spacing);
  color: var(--clc-text-caption-color);
  margin-block-start: var(--clc-text-caption-margin-block-start);
  margin-block-end: var(--clc-text-caption-margin-block-end);
}

.clc-stack > .clc-text-caption {
  margin-block: 0;
}

.clc-text-overline {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-overline-font-size);
  line-height: var(--clc-text-overline-line-height);
  font-weight: var(--clc-text-overline-font-weight);
  letter-spacing: var(--clc-text-overline-letter-spacing);
  text-transform: var(--clc-text-overline-text-transform);
  color: var(--clc-text-overline-color);
  margin-block-start: var(--clc-text-overline-margin-block-start);
  margin-block-end: var(--clc-text-overline-margin-block-end);
}

.clc-stack > .clc-text-overline {
  margin-block: 0;
}

.clc-text-align-start {
  text-align: start;
}

.clc-text-align-end {
  text-align: end;
}

.clc-text-align-left {
  text-align: left;
}

.clc-text-align-right {
  text-align: right;
}

.clc-text-align-center {
  text-align: center;
}

.clc-text-align-justify {
  text-align: justify;
}

.clc-text-align-justify-all {
  text-align: justify-all;
}

.clc-text-align-match-parent {
  text-align: match-parent;
}

@media (min-width: 576px) {
  .clc-text-align-xs-start {
    text-align: start !important;
  }
  .clc-text-align-xs-end {
    text-align: end !important;
  }
  .clc-text-align-xs-left {
    text-align: left !important;
  }
  .clc-text-align-xs-right {
    text-align: right !important;
  }
  .clc-text-align-xs-center {
    text-align: center !important;
  }
  .clc-text-align-xs-justify {
    text-align: justify !important;
  }
  .clc-text-align-xs-justify-all {
    text-align: justify-all !important;
  }
  .clc-text-align-xs-match-parent {
    text-align: match-parent !important;
  }
}
@media (min-width: 768px) {
  .clc-text-align-sm-start {
    text-align: start !important;
  }
  .clc-text-align-sm-end {
    text-align: end !important;
  }
  .clc-text-align-sm-left {
    text-align: left !important;
  }
  .clc-text-align-sm-right {
    text-align: right !important;
  }
  .clc-text-align-sm-center {
    text-align: center !important;
  }
  .clc-text-align-sm-justify {
    text-align: justify !important;
  }
  .clc-text-align-sm-justify-all {
    text-align: justify-all !important;
  }
  .clc-text-align-sm-match-parent {
    text-align: match-parent !important;
  }
}
@media (min-width: 1024px) {
  .clc-text-align-md-start {
    text-align: start !important;
  }
  .clc-text-align-md-end {
    text-align: end !important;
  }
  .clc-text-align-md-left {
    text-align: left !important;
  }
  .clc-text-align-md-right {
    text-align: right !important;
  }
  .clc-text-align-md-center {
    text-align: center !important;
  }
  .clc-text-align-md-justify {
    text-align: justify !important;
  }
  .clc-text-align-md-justify-all {
    text-align: justify-all !important;
  }
  .clc-text-align-md-match-parent {
    text-align: match-parent !important;
  }
}
@media (min-width: 1280px) {
  .clc-text-align-lg-start {
    text-align: start !important;
  }
  .clc-text-align-lg-end {
    text-align: end !important;
  }
  .clc-text-align-lg-left {
    text-align: left !important;
  }
  .clc-text-align-lg-right {
    text-align: right !important;
  }
  .clc-text-align-lg-center {
    text-align: center !important;
  }
  .clc-text-align-lg-justify {
    text-align: justify !important;
  }
  .clc-text-align-lg-justify-all {
    text-align: justify-all !important;
  }
  .clc-text-align-lg-match-parent {
    text-align: match-parent !important;
  }
}
@media (min-width: 1920px) {
  .clc-text-align-xl-start {
    text-align: start !important;
  }
  .clc-text-align-xl-end {
    text-align: end !important;
  }
  .clc-text-align-xl-left {
    text-align: left !important;
  }
  .clc-text-align-xl-right {
    text-align: right !important;
  }
  .clc-text-align-xl-center {
    text-align: center !important;
  }
  .clc-text-align-xl-justify {
    text-align: justify !important;
  }
  .clc-text-align-xl-justify-all {
    text-align: justify-all !important;
  }
  .clc-text-align-xl-match-parent {
    text-align: match-parent !important;
  }
}
@media (min-width: 2560px) {
  .clc-text-align-xx-start {
    text-align: start !important;
  }
  .clc-text-align-xx-end {
    text-align: end !important;
  }
  .clc-text-align-xx-left {
    text-align: left !important;
  }
  .clc-text-align-xx-right {
    text-align: right !important;
  }
  .clc-text-align-xx-center {
    text-align: center !important;
  }
  .clc-text-align-xx-justify {
    text-align: justify !important;
  }
  .clc-text-align-xx-justify-all {
    text-align: justify-all !important;
  }
  .clc-text-align-xx-match-parent {
    text-align: match-parent !important;
  }
}
.clc-text-wrap {
  white-space: normal !important;
}

.clc-text-nowrap {
  white-space: nowrap !important;
}

.clc-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clc-text-capitalize {
  text-transform: capitalize;
}

.clc-text-uppercase {
  text-transform: uppercase;
}

.clc-text-lowercase {
  text-transform: lowercase;
}

.clc-label {
  vertical-align: middle;
  margin-block-start: 0;
  margin-block-end: 0;
}

.clc-form .row .clc-label {
  min-height: var(--clc-input-height);
  line-height: var(--clc-input-line-height);
  padding-block: var(--clc-input-padding-block);
  padding-inline: var(--clc-input-padding-inline);
  padding-inline-start: 0;
  border-top: var(--clc-input-border);
  border-bottom: var(--clc-input-border);
  border-color: transparent;
}

.clc-layout ::selection {
  background-color: var(--clc-text-selection-background-color);
  color: var(--clc-text-selection-color);
}

.clc-column-drag, .clc-datatable-loading-content .clci-circle-o-notch, .clc-datatable-header .clci-plus, .clc-sortable-column .clci-grid-sort, .clc-datatable .clci-chevron-circle-down, .clc-datatable .clci-chevron-circle-right, .clc-fileupload-row .clc-button .clci-close,
.clc-fileupload-row .clc-button .clci-times,
.clc-fileupload-row .clc-button .clc-icon-trash, .clc-menuitem .clc-menuitem-icon, .clci {
  box-sizing: border-box;
  font-family: var(--clc-icon-font-family);
  font-weight: var(--clc-icon-weight, inherit);
  font-style: normal;
  font-size: var(--clc-icon-size);
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  font-variation-settings: "FILL" var(--clc-icon-fill), "GRAD" var(--clc-icon-grade), "opsz" var(--clc-icon-optical-size);
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
}

i.clci {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.clci-primary {
  color: var(--clc-primary);
}

.clci-secondary {
  color: var(--clc-secondary);
}

.clci-info {
  color: var(--clc-info);
}

.clci-warning {
  color: var(--clc-warning);
}

.clci-error {
  color: var(--clc-danger);
}

.clci-danger {
  color: var(--clc-danger);
}

.clci-success {
  color: var(--clc-success);
}

.clci-base {
  color: var(--clc-base-200);
}

.clci-light {
  color: var(--clc-base-200);
}

.clci-dark {
  color: var(--clc-base-900);
}

.clc-icons-loading .clci {
  color: transparent !important;
  user-select: none;
}

[class^=clc-] img,
[class^=clc-] svg {
  vertical-align: middle;
}

.clc-helper-hidden-accessible {
  opacity: 0;
  height: 0;
}
.clc-helper-hidden-accessible input {
  width: 100%;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.clc-helper-hidden {
  display: none;
}

.clc-hidden-accessible {
  opacity: 0;
  width: 100%;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.clc-scrollbar-measure {
  width: 100px;
  height: 100px;
  overflow: scroll;
  position: absolute;
  top: -9999px;
}

.clc-pager-element, .clc-button {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  color: var(--clc-button-base-color);
  background-color: var(--clc-button-base-background-color);
  background-size: var(--clc-button-background-size);
  background-repeat: no-repeat;
  border: none;
  border-radius: var(--clc-button-border-radius);
  outline: none;
  box-shadow: var(--clc-button-shadow);
  font-size: 1.0625rem;
  font-family: inherit;
  line-height: var(--clc-button-line-height);
  text-decoration: none;
  transition: var(--clc-button-transition);
  -webkit-appearance: none;
}
.clc-pager-element:focus, .clc-button:focus {
  outline: var(--clc-outline-normal);
}
.clc-pager-element:focus-visible, .clc-button:focus-visible {
  outline: var(--clc-button-focus-outline);
  outline-offset: var(--clc-button-focus-outline-offset);
}
.clc-pager-element:not(.clc-state-disabled), .clc-button:not(.clc-state-disabled) {
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .clc-pager-element:not(.clc-state-disabled):not(:active):hover, .clc-button:not(.clc-state-disabled):not(:active):hover {
    text-decoration: none;
    background-image: var(--clc-button-hover-gradient);
    background-size: var(--clc-button-hover-background-size);
    box-shadow: var(--clc-button-hover-shadow);
  }
}
.clc-pager-element:not(.clc-state-disabled):not(:active):not(.clc-variant-text):not(.clc-variant-flat):not(.clc-variant-outlined):focus-visible, .clc-button:not(.clc-state-disabled):not(:active):not(.clc-variant-text):not(.clc-variant-flat):not(.clc-variant-outlined):focus-visible {
  text-decoration: none;
  background-image: var(--clc-button-focus-gradient);
  background-size: var(--clc-button-focus-background-size);
  box-shadow: var(--clc-button-focus-shadow);
}
.clc-pager-element:not(.clc-state-disabled):active, .clc-button:not(.clc-state-disabled):active {
  text-decoration: none;
  background-image: var(--clc-button-active-gradient);
  background-size: var(--clc-button-active-background-size);
  box-shadow: var(--clc-button-active-shadow);
}
.clc-state-disabled.clc-pager-element, .clc-button.clc-state-disabled {
  opacity: var(--clc-button-disabled-opacity);
  cursor: initial;
}
.clc-state-empty.clc-pager-element, .clc-button.clc-state-empty {
  opacity: var(--clc-button-empty-opacity);
  cursor: initial;
}
.clc-pager-element .clc-button-box, .clc-button .clc-button-box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: var(--clc-button-vertical-align);
  line-height: var(--clc-button-line-height);
}
.clc-pager-element .clc-button-text, .clc-button .clc-button-text {
  vertical-align: var(--clc-button-vertical-align);
}
.clc-pager-element .clci, .clc-button .clci {
  vertical-align: var(--clc-button-vertical-align);
}

.clc-button.clc-primary {
  background-color: var(--clc-primary);
  color: var(--clc-on-primary);
}
.clc-button.clc-primary.clc-shade-lighter {
  background-color: var(--clc-primary-lighter);
  color: var(--clc-on-primary-lighter);
}
.clc-button.clc-primary.clc-shade-light {
  background-color: var(--clc-primary-light);
  color: var(--clc-on-primary-light);
}
.clc-button.clc-primary.clc-shade-default {
  background-color: var(--clc-primary);
  color: var(--clc-on-primary);
}
.clc-button.clc-primary.clc-shade-dark {
  background-color: var(--clc-primary-dark);
  color: var(--clc-on-primary-dark);
}
.clc-button.clc-primary.clc-shade-darker {
  background-color: var(--clc-primary-darker);
  color: var(--clc-on-primary-darker);
}
.clc-button.clc-primary.clc-variant-flat {
  box-shadow: none !important;
}

.clc-button.clc-secondary {
  background-color: var(--clc-secondary);
  color: var(--clc-on-secondary);
}
.clc-button.clc-secondary.clc-shade-lighter {
  background-color: var(--clc-secondary-lighter);
  color: var(--clc-on-secondary-lighter);
}
.clc-button.clc-secondary.clc-shade-light {
  background-color: var(--clc-secondary-light);
  color: var(--clc-on-secondary-light);
}
.clc-button.clc-secondary.clc-shade-default {
  background-color: var(--clc-secondary);
  color: var(--clc-on-secondary);
}
.clc-button.clc-secondary.clc-shade-dark {
  background-color: var(--clc-secondary-dark);
  color: var(--clc-on-secondary-dark);
}
.clc-button.clc-secondary.clc-shade-darker {
  background-color: var(--clc-secondary-darker);
  color: var(--clc-on-secondary-darker);
}
.clc-button.clc-secondary.clc-variant-flat {
  box-shadow: none !important;
}

.clc-button.clc-info {
  background-color: var(--clc-info);
  color: var(--clc-on-info);
}
.clc-button.clc-info.clc-shade-lighter {
  background-color: var(--clc-info-lighter);
  color: var(--clc-on-info-lighter);
}
.clc-button.clc-info.clc-shade-light {
  background-color: var(--clc-info-light);
  color: var(--clc-on-info-light);
}
.clc-button.clc-info.clc-shade-default {
  background-color: var(--clc-info);
  color: var(--clc-on-info);
}
.clc-button.clc-info.clc-shade-dark {
  background-color: var(--clc-info-dark);
  color: var(--clc-on-info-dark);
}
.clc-button.clc-info.clc-shade-darker {
  background-color: var(--clc-info-darker);
  color: var(--clc-on-info-darker);
}
.clc-button.clc-info.clc-variant-flat {
  box-shadow: none !important;
}

.clc-button.clc-warning {
  background-color: var(--clc-warning);
  color: var(--clc-on-warning);
}
.clc-button.clc-warning.clc-shade-lighter {
  background-color: var(--clc-warning-lighter);
  color: var(--clc-on-warning-lighter);
}
.clc-button.clc-warning.clc-shade-light {
  background-color: var(--clc-warning-light);
  color: var(--clc-on-warning-light);
}
.clc-button.clc-warning.clc-shade-default {
  background-color: var(--clc-warning);
  color: var(--clc-on-warning);
}
.clc-button.clc-warning.clc-shade-dark {
  background-color: var(--clc-warning-dark);
  color: var(--clc-on-warning-dark);
}
.clc-button.clc-warning.clc-shade-darker {
  background-color: var(--clc-warning-darker);
  color: var(--clc-on-warning-darker);
}
.clc-button.clc-warning.clc-variant-flat {
  box-shadow: none !important;
}

.clc-button.clc-error {
  background-color: var(--clc-danger);
  color: var(--clc-on-danger);
}
.clc-button.clc-error.clc-shade-lighter {
  background-color: var(--clc-error-lighter);
  color: var(--clc-on-error-lighter);
}
.clc-button.clc-error.clc-shade-light {
  background-color: var(--clc-error-light);
  color: var(--clc-on-error-light);
}
.clc-button.clc-error.clc-shade-default {
  background-color: var(--clc-error);
  color: var(--clc-on-error);
}
.clc-button.clc-error.clc-shade-dark {
  background-color: var(--clc-error-dark);
  color: var(--clc-on-error-dark);
}
.clc-button.clc-error.clc-shade-darker {
  background-color: var(--clc-error-darker);
  color: var(--clc-on-error-darker);
}
.clc-button.clc-error.clc-variant-flat {
  box-shadow: none !important;
}

.clc-button.clc-danger {
  background-color: var(--clc-danger);
  color: var(--clc-on-danger);
}
.clc-button.clc-danger.clc-shade-lighter {
  background-color: var(--clc-danger-lighter);
  color: var(--clc-on-danger-lighter);
}
.clc-button.clc-danger.clc-shade-light {
  background-color: var(--clc-danger-light);
  color: var(--clc-on-danger-light);
}
.clc-button.clc-danger.clc-shade-default {
  background-color: var(--clc-danger);
  color: var(--clc-on-danger);
}
.clc-button.clc-danger.clc-shade-dark {
  background-color: var(--clc-danger-dark);
  color: var(--clc-on-danger-dark);
}
.clc-button.clc-danger.clc-shade-darker {
  background-color: var(--clc-danger-darker);
  color: var(--clc-on-danger-darker);
}
.clc-button.clc-danger.clc-variant-flat {
  box-shadow: none !important;
}

.clc-button.clc-success {
  background-color: var(--clc-success);
  color: var(--clc-on-success);
}
.clc-button.clc-success.clc-shade-lighter {
  background-color: var(--clc-success-lighter);
  color: var(--clc-on-success-lighter);
}
.clc-button.clc-success.clc-shade-light {
  background-color: var(--clc-success-light);
  color: var(--clc-on-success-light);
}
.clc-button.clc-success.clc-shade-default {
  background-color: var(--clc-success);
  color: var(--clc-on-success);
}
.clc-button.clc-success.clc-shade-dark {
  background-color: var(--clc-success-dark);
  color: var(--clc-on-success-dark);
}
.clc-button.clc-success.clc-shade-darker {
  background-color: var(--clc-success-darker);
  color: var(--clc-on-success-darker);
}
.clc-button.clc-success.clc-variant-flat {
  box-shadow: none !important;
}

.clc-button.clc-base {
  background-color: var(--clc-base-200);
  color: var(--clc-text-color);
}
.clc-button.clc-base.clc-shade-lighter {
  background-color: var(--clc-base-lighter);
  color: var(--clc-on-base-lighter);
}
.clc-button.clc-base.clc-shade-light {
  background-color: var(--clc-base-light);
  color: var(--clc-on-base-light);
}
.clc-button.clc-base.clc-shade-default {
  background-color: var(--clc-base);
  color: var(--clc-on-base);
}
.clc-button.clc-base.clc-shade-dark {
  background-color: var(--clc-base-dark);
  color: var(--clc-on-base-dark);
}
.clc-button.clc-base.clc-shade-darker {
  background-color: var(--clc-base-darker);
  color: var(--clc-on-base-darker);
}
.clc-button.clc-base.clc-variant-flat {
  box-shadow: none !important;
}

.clc-button.clc-light {
  background-color: var(--clc-base-200);
  color: var(--clc-text-color);
}
.clc-button.clc-light.clc-variant-flat {
  box-shadow: none !important;
}

.clc-button.clc-dark {
  background-color: var(--clc-base-900);
  color: var(--clc-text-contrast-color);
}
.clc-button.clc-dark.clc-variant-flat {
  box-shadow: none !important;
}

.clc-button.clc-variant-outlined.clc-primary {
  background-color: transparent;
}
.clc-button.clc-variant-outlined.clc-primary.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary-lighter);
  color: var(--clc-primary-light);
}
.clc-button.clc-variant-outlined.clc-primary.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary-light);
  color: var(--clc-primary-light);
}
.clc-button.clc-variant-outlined.clc-primary.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary);
  color: var(--clc-primary);
}
.clc-button.clc-variant-outlined.clc-primary.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary-dark);
  color: var(--clc-primary-dark);
}
.clc-button.clc-variant-outlined.clc-primary.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary-darker);
  color: var(--clc-primary-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-outlined.clc-primary:not(.clc-state-disabled):hover {
    background-color: var(--clc-primary-lighter);
    color: var(--clc-on-primary-lighter);
    background-image: none;
  }
}
.clc-button.clc-variant-outlined.clc-primary:not(.clc-state-disabled):active {
  background-color: var(--clc-primary-lighter);
  color: var(--clc-on-primary-lighter);
  background-image: none;
}

.clc-button.clc-variant-outlined.clc-secondary {
  background-color: transparent;
}
.clc-button.clc-variant-outlined.clc-secondary.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary-lighter);
  color: var(--clc-secondary-light);
}
.clc-button.clc-variant-outlined.clc-secondary.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary-light);
  color: var(--clc-secondary-light);
}
.clc-button.clc-variant-outlined.clc-secondary.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary);
  color: var(--clc-secondary);
}
.clc-button.clc-variant-outlined.clc-secondary.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary-dark);
  color: var(--clc-secondary-dark);
}
.clc-button.clc-variant-outlined.clc-secondary.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary-darker);
  color: var(--clc-secondary-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-outlined.clc-secondary:not(.clc-state-disabled):hover {
    background-color: var(--clc-secondary-lighter);
    color: var(--clc-on-secondary-lighter);
    background-image: none;
  }
}
.clc-button.clc-variant-outlined.clc-secondary:not(.clc-state-disabled):active {
  background-color: var(--clc-secondary-lighter);
  color: var(--clc-on-secondary-lighter);
  background-image: none;
}

.clc-button.clc-variant-outlined.clc-info {
  background-color: transparent;
}
.clc-button.clc-variant-outlined.clc-info.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info-lighter);
  color: var(--clc-info-light);
}
.clc-button.clc-variant-outlined.clc-info.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info-light);
  color: var(--clc-info-light);
}
.clc-button.clc-variant-outlined.clc-info.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info);
  color: var(--clc-info);
}
.clc-button.clc-variant-outlined.clc-info.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info-dark);
  color: var(--clc-info-dark);
}
.clc-button.clc-variant-outlined.clc-info.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info-darker);
  color: var(--clc-info-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-outlined.clc-info:not(.clc-state-disabled):hover {
    background-color: var(--clc-info-lighter);
    color: var(--clc-on-info-lighter);
    background-image: none;
  }
}
.clc-button.clc-variant-outlined.clc-info:not(.clc-state-disabled):active {
  background-color: var(--clc-info-lighter);
  color: var(--clc-on-info-lighter);
  background-image: none;
}

.clc-button.clc-variant-outlined.clc-warning {
  background-color: transparent;
}
.clc-button.clc-variant-outlined.clc-warning.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning-lighter);
  color: var(--clc-warning-light);
}
.clc-button.clc-variant-outlined.clc-warning.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning-light);
  color: var(--clc-warning-light);
}
.clc-button.clc-variant-outlined.clc-warning.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning);
  color: var(--clc-warning);
}
.clc-button.clc-variant-outlined.clc-warning.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning-dark);
  color: var(--clc-warning-dark);
}
.clc-button.clc-variant-outlined.clc-warning.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning-darker);
  color: var(--clc-warning-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-outlined.clc-warning:not(.clc-state-disabled):hover {
    background-color: var(--clc-warning-lighter);
    color: var(--clc-on-warning-lighter);
    background-image: none;
  }
}
.clc-button.clc-variant-outlined.clc-warning:not(.clc-state-disabled):active {
  background-color: var(--clc-warning-lighter);
  color: var(--clc-on-warning-lighter);
  background-image: none;
}

.clc-button.clc-variant-outlined.clc-error {
  background-color: transparent;
}
.clc-button.clc-variant-outlined.clc-error.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error-lighter);
  color: var(--clc-error-light);
}
.clc-button.clc-variant-outlined.clc-error.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error-light);
  color: var(--clc-error-light);
}
.clc-button.clc-variant-outlined.clc-error.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error);
  color: var(--clc-error);
}
.clc-button.clc-variant-outlined.clc-error.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error-dark);
  color: var(--clc-error-dark);
}
.clc-button.clc-variant-outlined.clc-error.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error-darker);
  color: var(--clc-error-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-outlined.clc-error:not(.clc-state-disabled):hover {
    background-color: var(--clc-error-lighter);
    color: var(--clc-on-error-lighter);
    background-image: none;
  }
}
.clc-button.clc-variant-outlined.clc-error:not(.clc-state-disabled):active {
  background-color: var(--clc-error-lighter);
  color: var(--clc-on-error-lighter);
  background-image: none;
}

.clc-button.clc-variant-outlined.clc-danger {
  background-color: transparent;
}
.clc-button.clc-variant-outlined.clc-danger.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger-lighter);
  color: var(--clc-danger-light);
}
.clc-button.clc-variant-outlined.clc-danger.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger-light);
  color: var(--clc-danger-light);
}
.clc-button.clc-variant-outlined.clc-danger.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger);
  color: var(--clc-danger);
}
.clc-button.clc-variant-outlined.clc-danger.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger-dark);
  color: var(--clc-danger-dark);
}
.clc-button.clc-variant-outlined.clc-danger.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger-darker);
  color: var(--clc-danger-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-outlined.clc-danger:not(.clc-state-disabled):hover {
    background-color: var(--clc-danger-lighter);
    color: var(--clc-on-danger-lighter);
    background-image: none;
  }
}
.clc-button.clc-variant-outlined.clc-danger:not(.clc-state-disabled):active {
  background-color: var(--clc-danger-lighter);
  color: var(--clc-on-danger-lighter);
  background-image: none;
}

.clc-button.clc-variant-outlined.clc-success {
  background-color: transparent;
}
.clc-button.clc-variant-outlined.clc-success.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success-lighter);
  color: var(--clc-success-light);
}
.clc-button.clc-variant-outlined.clc-success.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success-light);
  color: var(--clc-success-light);
}
.clc-button.clc-variant-outlined.clc-success.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success);
  color: var(--clc-success);
}
.clc-button.clc-variant-outlined.clc-success.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success-dark);
  color: var(--clc-success-dark);
}
.clc-button.clc-variant-outlined.clc-success.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success-darker);
  color: var(--clc-success-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-outlined.clc-success:not(.clc-state-disabled):hover {
    background-color: var(--clc-success-lighter);
    color: var(--clc-on-success-lighter);
    background-image: none;
  }
}
.clc-button.clc-variant-outlined.clc-success:not(.clc-state-disabled):active {
  background-color: var(--clc-success-lighter);
  color: var(--clc-on-success-lighter);
  background-image: none;
}

.clc-button.clc-variant-outlined.clc-base {
  background-color: transparent;
}
.clc-button.clc-variant-outlined.clc-base.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-lighter);
  color: var(--clc-base-light);
}
.clc-button.clc-variant-outlined.clc-base.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-light);
  color: var(--clc-base-light);
}
.clc-button.clc-variant-outlined.clc-base.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-600);
  color: var(--clc-text-color);
}
.clc-button.clc-variant-outlined.clc-base.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-dark);
  color: var(--clc-base-dark);
}
.clc-button.clc-variant-outlined.clc-base.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-darker);
  color: var(--clc-base-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-outlined.clc-base:not(.clc-state-disabled):hover {
    background-color: var(--clc-base-200);
    color: var(--clc-on-base-lighter);
    background-image: none;
  }
}
.clc-button.clc-variant-outlined.clc-base:not(.clc-state-disabled):active {
  background-color: var(--clc-base-200);
  color: var(--clc-on-base-lighter);
  background-image: none;
}

.clc-button.clc-variant-outlined.clc-light {
  background-color: transparent;
}
.clc-button.clc-variant-outlined.clc-light.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-200);
  color: var(--clc-base-200);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-outlined.clc-light:not(.clc-state-disabled):hover {
    background-color: rgba(255, 255, 255, 0.12);
    background-image: none;
  }
}
.clc-button.clc-variant-outlined.clc-light:not(.clc-state-disabled):active {
  background-color: rgba(255, 255, 255, 0.12);
  background-image: none;
}

.clc-button.clc-variant-outlined.clc-dark {
  background-color: transparent;
}
.clc-button.clc-variant-outlined.clc-dark.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-900);
  color: var(--clc-base-900);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-outlined.clc-dark:not(.clc-state-disabled):hover {
    background-color: rgba(0, 0, 0, 0.12);
    background-image: none;
  }
}
.clc-button.clc-variant-outlined.clc-dark:not(.clc-state-disabled):active {
  background-color: rgba(0, 0, 0, 0.12);
  background-image: none;
}

.clc-button.clc-variant-text.clc-primary {
  background-color: transparent;
  box-shadow: none;
}
.clc-button.clc-variant-text.clc-primary.clc-shade-lighter {
  color: var(--clc-primary-lighter);
}
.clc-button.clc-variant-text.clc-primary.clc-shade-light {
  color: var(--clc-primary-light);
}
.clc-button.clc-variant-text.clc-primary.clc-shade-default {
  color: var(--clc-primary);
}
.clc-button.clc-variant-text.clc-primary.clc-shade-dark {
  color: var(--clc-primary-dark);
}
.clc-button.clc-variant-text.clc-primary.clc-shade-darker {
  color: var(--clc-primary-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-text.clc-primary:not(.clc-state-disabled):hover {
    background-color: var(--clc-primary-lighter);
    color: var(--clc-on-primary-lighter);
    background-image: none;
    box-shadow: none;
  }
}
.clc-button.clc-variant-text.clc-primary:not(.clc-state-disabled):active {
  background-color: var(--clc-primary-lighter);
  color: var(--clc-on-primary-lighter);
  background-image: none;
  box-shadow: none;
}

.clc-button.clc-variant-text.clc-secondary {
  background-color: transparent;
  box-shadow: none;
}
.clc-button.clc-variant-text.clc-secondary.clc-shade-lighter {
  color: var(--clc-secondary-lighter);
}
.clc-button.clc-variant-text.clc-secondary.clc-shade-light {
  color: var(--clc-secondary-light);
}
.clc-button.clc-variant-text.clc-secondary.clc-shade-default {
  color: var(--clc-secondary);
}
.clc-button.clc-variant-text.clc-secondary.clc-shade-dark {
  color: var(--clc-secondary-dark);
}
.clc-button.clc-variant-text.clc-secondary.clc-shade-darker {
  color: var(--clc-secondary-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-text.clc-secondary:not(.clc-state-disabled):hover {
    background-color: var(--clc-secondary-lighter);
    color: var(--clc-on-secondary-lighter);
    background-image: none;
    box-shadow: none;
  }
}
.clc-button.clc-variant-text.clc-secondary:not(.clc-state-disabled):active {
  background-color: var(--clc-secondary-lighter);
  color: var(--clc-on-secondary-lighter);
  background-image: none;
  box-shadow: none;
}

.clc-button.clc-variant-text.clc-info {
  background-color: transparent;
  box-shadow: none;
}
.clc-button.clc-variant-text.clc-info.clc-shade-lighter {
  color: var(--clc-info-lighter);
}
.clc-button.clc-variant-text.clc-info.clc-shade-light {
  color: var(--clc-info-light);
}
.clc-button.clc-variant-text.clc-info.clc-shade-default {
  color: var(--clc-info);
}
.clc-button.clc-variant-text.clc-info.clc-shade-dark {
  color: var(--clc-info-dark);
}
.clc-button.clc-variant-text.clc-info.clc-shade-darker {
  color: var(--clc-info-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-text.clc-info:not(.clc-state-disabled):hover {
    background-color: var(--clc-info-lighter);
    color: var(--clc-on-info-lighter);
    background-image: none;
    box-shadow: none;
  }
}
.clc-button.clc-variant-text.clc-info:not(.clc-state-disabled):active {
  background-color: var(--clc-info-lighter);
  color: var(--clc-on-info-lighter);
  background-image: none;
  box-shadow: none;
}

.clc-button.clc-variant-text.clc-warning {
  background-color: transparent;
  box-shadow: none;
}
.clc-button.clc-variant-text.clc-warning.clc-shade-lighter {
  color: var(--clc-warning-lighter);
}
.clc-button.clc-variant-text.clc-warning.clc-shade-light {
  color: var(--clc-warning-light);
}
.clc-button.clc-variant-text.clc-warning.clc-shade-default {
  color: var(--clc-warning);
}
.clc-button.clc-variant-text.clc-warning.clc-shade-dark {
  color: var(--clc-warning-dark);
}
.clc-button.clc-variant-text.clc-warning.clc-shade-darker {
  color: var(--clc-warning-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-text.clc-warning:not(.clc-state-disabled):hover {
    background-color: var(--clc-warning-lighter);
    color: var(--clc-on-warning-lighter);
    background-image: none;
    box-shadow: none;
  }
}
.clc-button.clc-variant-text.clc-warning:not(.clc-state-disabled):active {
  background-color: var(--clc-warning-lighter);
  color: var(--clc-on-warning-lighter);
  background-image: none;
  box-shadow: none;
}

.clc-button.clc-variant-text.clc-error {
  background-color: transparent;
  box-shadow: none;
}
.clc-button.clc-variant-text.clc-error.clc-shade-lighter {
  color: var(--clc-error-lighter);
}
.clc-button.clc-variant-text.clc-error.clc-shade-light {
  color: var(--clc-error-light);
}
.clc-button.clc-variant-text.clc-error.clc-shade-default {
  color: var(--clc-error);
}
.clc-button.clc-variant-text.clc-error.clc-shade-dark {
  color: var(--clc-error-dark);
}
.clc-button.clc-variant-text.clc-error.clc-shade-darker {
  color: var(--clc-error-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-text.clc-error:not(.clc-state-disabled):hover {
    background-color: var(--clc-error-lighter);
    color: var(--clc-on-error-lighter);
    background-image: none;
    box-shadow: none;
  }
}
.clc-button.clc-variant-text.clc-error:not(.clc-state-disabled):active {
  background-color: var(--clc-error-lighter);
  color: var(--clc-on-error-lighter);
  background-image: none;
  box-shadow: none;
}

.clc-button.clc-variant-text.clc-danger {
  background-color: transparent;
  box-shadow: none;
}
.clc-button.clc-variant-text.clc-danger.clc-shade-lighter {
  color: var(--clc-danger-lighter);
}
.clc-button.clc-variant-text.clc-danger.clc-shade-light {
  color: var(--clc-danger-light);
}
.clc-button.clc-variant-text.clc-danger.clc-shade-default {
  color: var(--clc-danger);
}
.clc-button.clc-variant-text.clc-danger.clc-shade-dark {
  color: var(--clc-danger-dark);
}
.clc-button.clc-variant-text.clc-danger.clc-shade-darker {
  color: var(--clc-danger-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-text.clc-danger:not(.clc-state-disabled):hover {
    background-color: var(--clc-danger-lighter);
    color: var(--clc-on-danger-lighter);
    background-image: none;
    box-shadow: none;
  }
}
.clc-button.clc-variant-text.clc-danger:not(.clc-state-disabled):active {
  background-color: var(--clc-danger-lighter);
  color: var(--clc-on-danger-lighter);
  background-image: none;
  box-shadow: none;
}

.clc-button.clc-variant-text.clc-success {
  background-color: transparent;
  box-shadow: none;
}
.clc-button.clc-variant-text.clc-success.clc-shade-lighter {
  color: var(--clc-success-lighter);
}
.clc-button.clc-variant-text.clc-success.clc-shade-light {
  color: var(--clc-success-light);
}
.clc-button.clc-variant-text.clc-success.clc-shade-default {
  color: var(--clc-success);
}
.clc-button.clc-variant-text.clc-success.clc-shade-dark {
  color: var(--clc-success-dark);
}
.clc-button.clc-variant-text.clc-success.clc-shade-darker {
  color: var(--clc-success-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-text.clc-success:not(.clc-state-disabled):hover {
    background-color: var(--clc-success-lighter);
    color: var(--clc-on-success-lighter);
    background-image: none;
    box-shadow: none;
  }
}
.clc-button.clc-variant-text.clc-success:not(.clc-state-disabled):active {
  background-color: var(--clc-success-lighter);
  color: var(--clc-on-success-lighter);
  background-image: none;
  box-shadow: none;
}

.clc-button.clc-variant-text.clc-base {
  background-color: transparent;
  box-shadow: none;
}
.clc-button.clc-variant-text.clc-base.clc-shade-lighter {
  color: var(--clc-base-lighter);
}
.clc-button.clc-variant-text.clc-base.clc-shade-light {
  color: var(--clc-base-light);
}
.clc-button.clc-variant-text.clc-base.clc-shade-default {
  color: inherit;
}
.clc-button.clc-variant-text.clc-base.clc-shade-dark {
  color: var(--clc-base-dark);
}
.clc-button.clc-variant-text.clc-base.clc-shade-darker {
  color: var(--clc-base-darker);
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-text.clc-base:not(.clc-state-disabled):hover {
    background-color: var(--clc-base-200);
    color: var(--clc-on-base-lighter);
    background-image: none;
    box-shadow: none;
  }
}
.clc-button.clc-variant-text.clc-base:not(.clc-state-disabled):active {
  background-color: var(--clc-base-200);
  color: var(--clc-on-base-lighter);
  background-image: none;
  box-shadow: none;
}

.clc-button.clc-variant-text.clc-light {
  color: var(--clc-base-200);
  background-color: transparent;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-text.clc-light:not(.clc-state-disabled):hover {
    background-color: rgba(255, 255, 255, 0.12);
    background-image: none;
    box-shadow: none;
  }
}
.clc-button.clc-variant-text.clc-light:not(.clc-state-disabled):active {
  background-color: rgba(255, 255, 255, 0.12);
  background-image: none;
  box-shadow: none;
}

.clc-button.clc-variant-text.clc-dark {
  color: var(--clc-base-900);
  background-color: transparent;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .clc-button.clc-variant-text.clc-dark:not(.clc-state-disabled):hover {
    background-color: rgba(0, 0, 0, 0.12);
    background-image: none;
    box-shadow: none;
  }
}
.clc-button.clc-variant-text.clc-dark:not(.clc-state-disabled):active {
  background-color: rgba(0, 0, 0, 0.12);
  background-image: none;
  box-shadow: none;
}

.clc-pager-element, .clc-button-lg {
  padding: 0.75rem 1.5rem;
  height: auto;
  line-height: 1.5rem;
  min-height: var(--clc-button-size-lg);
  min-width: var(--clc-button-size-lg);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: normal;
}
.clc-pager-element .clc-button-box, .clc-button-lg .clc-button-box {
  line-height: 1.5rem;
  gap: 0.25rem;
}
.clc-button-icon-left.clc-pager-element, .clc-button-lg.clc-button-icon-left {
  padding: 0 1.375rem;
}
.clc-pager-element, .clc-button-lg.clc-button-icon-only {
  padding: 0.75rem;
}
.clc-pager-element .clci, .clc-button-lg .clci {
  font-size: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  width: 1.5rem;
}

.clc-button-md {
  padding: 0.625rem 1.5rem;
  height: auto;
  line-height: 1.25rem;
  min-height: var(--clc-button-size-md);
  min-width: var(--clc-button-size-md);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: normal;
}
.clc-button-md .clc-button-box {
  line-height: 1.25rem;
  gap: 0.25rem;
}
.clc-button-md.clc-button-icon-left {
  padding: 0 1.375rem;
}
.clc-button-md.clc-button-icon-only, .clc-button-md.clc-pager-element {
  padding: 0.625rem;
}
.clc-button-md .clci {
  font-size: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
  width: 1.25rem;
}

.clc-pager.clc-density-compact .clc-pager-element, .clc-fileupload .clc-button, .clc-button-sm {
  padding: 0.375rem 1rem;
  height: auto;
  line-height: 1rem;
  min-height: var(--clc-button-size-sm);
  min-width: var(--clc-button-size-sm);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: normal;
}
.clc-pager.clc-density-compact .clc-pager-element .clc-button-box, .clc-fileupload .clc-button .clc-button-box, .clc-button-sm .clc-button-box {
  line-height: 1rem;
  gap: 0.25rem;
}
.clc-pager.clc-density-compact .clc-button-icon-left.clc-pager-element, .clc-fileupload .clc-button-icon-left.clc-button, .clc-button-sm.clc-button-icon-left {
  padding: 0 1.375rem;
}
.clc-pager.clc-density-compact .clc-pager-element, .clc-fileupload .clc-button-icon-only.clc-button, .clc-fileupload .clc-button.clc-pager-element, .clc-button-sm.clc-button-icon-only, .clc-button-sm.clc-pager-element {
  padding: 0.375rem;
}
.clc-pager.clc-density-compact .clc-pager-element .clci, .clc-fileupload .clc-button .clci, .clc-button-sm .clci {
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  width: 1rem;
}

.clc-button-xs {
  padding: 0.25rem 0.75rem;
  height: auto;
  line-height: 1rem;
  min-height: var(--clc-button-size-xs);
  min-width: var(--clc-button-size-xs);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: normal;
}
.clc-button-xs .clc-button-box {
  line-height: 1rem;
  gap: 0.125rem;
}
.clc-button-xs.clc-button-icon-left {
  padding: 0 1rem;
}
.clc-button-xs.clc-button-icon-only, .clc-button-xs.clc-pager-element {
  padding: 0.25rem;
}
.clc-button-xs .clci {
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  width: 1rem;
}

@keyframes button-icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.clc-badge {
  box-sizing: border-box;
  color: var(--clc-text-contrast-color);
  display: inline-block;
  padding: var(--clc-badge-padding);
  font-size: var(--clc-badge-font-size);
  font-weight: var(--clc-badge-font-weight);
  line-height: var(--clc-badge-line-height);
  text-align: center;
  text-transform: var(--clc-badge-text-transform);
  white-space: nowrap;
  border-radius: var(--clc-badge-border-radius);
  letter-spacing: var(--clc-badge-letter-spacing);
}
.clc-button .clc-badge {
  vertical-align: top;
}

.clc-badge-primary {
  background-color: var(--clc-primary);
  color: var(--clc-on-primary);
}
.clc-badge-primary.clc-shade-lighter {
  background-color: var(--clc-primary-lighter);
  color: var(--clc-on-primary-lighter);
}
.clc-badge-primary.clc-shade-light {
  background-color: var(--clc-primary-light);
  color: var(--clc-on-primary-light);
}
.clc-badge-primary.clc-shade-default {
  background-color: var(--clc-primary);
  color: var(--clc-on-primary);
}
.clc-badge-primary.clc-shade-dark {
  background-color: var(--clc-primary-dark);
  color: var(--clc-on-primary-dark);
}
.clc-badge-primary.clc-shade-darker {
  background-color: var(--clc-primary-darker);
  color: var(--clc-on-primary-darker);
}

.clc-badge-secondary {
  background-color: var(--clc-secondary);
  color: var(--clc-on-secondary);
}
.clc-badge-secondary.clc-shade-lighter {
  background-color: var(--clc-secondary-lighter);
  color: var(--clc-on-secondary-lighter);
}
.clc-badge-secondary.clc-shade-light {
  background-color: var(--clc-secondary-light);
  color: var(--clc-on-secondary-light);
}
.clc-badge-secondary.clc-shade-default {
  background-color: var(--clc-secondary);
  color: var(--clc-on-secondary);
}
.clc-badge-secondary.clc-shade-dark {
  background-color: var(--clc-secondary-dark);
  color: var(--clc-on-secondary-dark);
}
.clc-badge-secondary.clc-shade-darker {
  background-color: var(--clc-secondary-darker);
  color: var(--clc-on-secondary-darker);
}

.clc-badge-info {
  background-color: var(--clc-info);
  color: var(--clc-on-info);
}
.clc-badge-info.clc-shade-lighter {
  background-color: var(--clc-info-lighter);
  color: var(--clc-on-info-lighter);
}
.clc-badge-info.clc-shade-light {
  background-color: var(--clc-info-light);
  color: var(--clc-on-info-light);
}
.clc-badge-info.clc-shade-default {
  background-color: var(--clc-info);
  color: var(--clc-on-info);
}
.clc-badge-info.clc-shade-dark {
  background-color: var(--clc-info-dark);
  color: var(--clc-on-info-dark);
}
.clc-badge-info.clc-shade-darker {
  background-color: var(--clc-info-darker);
  color: var(--clc-on-info-darker);
}

.clc-badge-warning {
  background-color: var(--clc-warning);
  color: var(--clc-on-warning);
}
.clc-badge-warning.clc-shade-lighter {
  background-color: var(--clc-warning-lighter);
  color: var(--clc-on-warning-lighter);
}
.clc-badge-warning.clc-shade-light {
  background-color: var(--clc-warning-light);
  color: var(--clc-on-warning-light);
}
.clc-badge-warning.clc-shade-default {
  background-color: var(--clc-warning);
  color: var(--clc-on-warning);
}
.clc-badge-warning.clc-shade-dark {
  background-color: var(--clc-warning-dark);
  color: var(--clc-on-warning-dark);
}
.clc-badge-warning.clc-shade-darker {
  background-color: var(--clc-warning-darker);
  color: var(--clc-on-warning-darker);
}

.clc-badge-error {
  background-color: var(--clc-danger);
  color: var(--clc-on-danger);
}
.clc-badge-error.clc-shade-lighter {
  background-color: var(--clc-error-lighter);
  color: var(--clc-on-error-lighter);
}
.clc-badge-error.clc-shade-light {
  background-color: var(--clc-error-light);
  color: var(--clc-on-error-light);
}
.clc-badge-error.clc-shade-default {
  background-color: var(--clc-error);
  color: var(--clc-on-error);
}
.clc-badge-error.clc-shade-dark {
  background-color: var(--clc-error-dark);
  color: var(--clc-on-error-dark);
}
.clc-badge-error.clc-shade-darker {
  background-color: var(--clc-error-darker);
  color: var(--clc-on-error-darker);
}

.clc-badge-danger {
  background-color: var(--clc-danger);
  color: var(--clc-on-danger);
}
.clc-badge-danger.clc-shade-lighter {
  background-color: var(--clc-danger-lighter);
  color: var(--clc-on-danger-lighter);
}
.clc-badge-danger.clc-shade-light {
  background-color: var(--clc-danger-light);
  color: var(--clc-on-danger-light);
}
.clc-badge-danger.clc-shade-default {
  background-color: var(--clc-danger);
  color: var(--clc-on-danger);
}
.clc-badge-danger.clc-shade-dark {
  background-color: var(--clc-danger-dark);
  color: var(--clc-on-danger-dark);
}
.clc-badge-danger.clc-shade-darker {
  background-color: var(--clc-danger-darker);
  color: var(--clc-on-danger-darker);
}

.clc-badge-success {
  background-color: var(--clc-success);
  color: var(--clc-on-success);
}
.clc-badge-success.clc-shade-lighter {
  background-color: var(--clc-success-lighter);
  color: var(--clc-on-success-lighter);
}
.clc-badge-success.clc-shade-light {
  background-color: var(--clc-success-light);
  color: var(--clc-on-success-light);
}
.clc-badge-success.clc-shade-default {
  background-color: var(--clc-success);
  color: var(--clc-on-success);
}
.clc-badge-success.clc-shade-dark {
  background-color: var(--clc-success-dark);
  color: var(--clc-on-success-dark);
}
.clc-badge-success.clc-shade-darker {
  background-color: var(--clc-success-darker);
  color: var(--clc-on-success-darker);
}

.clc-badge-base {
  background-color: var(--clc-base-200);
  color: var(--clc-text-color);
}
.clc-badge-base.clc-shade-lighter {
  background-color: var(--clc-base-lighter);
  color: var(--clc-on-base-lighter);
}
.clc-badge-base.clc-shade-light {
  background-color: var(--clc-base-light);
  color: var(--clc-on-base-light);
}
.clc-badge-base.clc-shade-default {
  background-color: var(--clc-base);
  color: var(--clc-on-base);
}
.clc-badge-base.clc-shade-dark {
  background-color: var(--clc-base-dark);
  color: var(--clc-on-base-dark);
}
.clc-badge-base.clc-shade-darker {
  background-color: var(--clc-base-darker);
  color: var(--clc-on-base-darker);
}

.clc-badge-light {
  background-color: var(--clc-base-200);
  color: var(--clc-text-color);
}

.clc-badge-dark {
  background-color: var(--clc-base-900);
  color: var(--clc-text-contrast-color);
}

.clc-variant-outlined.clc-badge-primary {
  background-color: transparent;
}
.clc-variant-outlined.clc-badge-primary.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary-lighter);
  color: var(--clc-primary-lighter);
}
.clc-variant-outlined.clc-badge-primary.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary-light);
  color: var(--clc-primary-light);
}
.clc-variant-outlined.clc-badge-primary.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary);
  color: var(--clc-primary);
}
.clc-variant-outlined.clc-badge-primary.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary-dark);
  color: var(--clc-primary-dark);
}
.clc-variant-outlined.clc-badge-primary.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary-darker);
  color: var(--clc-primary-darker);
}

.clc-variant-outlined.clc-badge-secondary {
  background-color: transparent;
}
.clc-variant-outlined.clc-badge-secondary.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary-lighter);
  color: var(--clc-secondary-lighter);
}
.clc-variant-outlined.clc-badge-secondary.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary-light);
  color: var(--clc-secondary-light);
}
.clc-variant-outlined.clc-badge-secondary.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary);
  color: var(--clc-secondary);
}
.clc-variant-outlined.clc-badge-secondary.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary-dark);
  color: var(--clc-secondary-dark);
}
.clc-variant-outlined.clc-badge-secondary.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary-darker);
  color: var(--clc-secondary-darker);
}

.clc-variant-outlined.clc-badge-info {
  background-color: transparent;
}
.clc-variant-outlined.clc-badge-info.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info-lighter);
  color: var(--clc-info-lighter);
}
.clc-variant-outlined.clc-badge-info.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info-light);
  color: var(--clc-info-light);
}
.clc-variant-outlined.clc-badge-info.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info);
  color: var(--clc-info);
}
.clc-variant-outlined.clc-badge-info.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info-dark);
  color: var(--clc-info-dark);
}
.clc-variant-outlined.clc-badge-info.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info-darker);
  color: var(--clc-info-darker);
}

.clc-variant-outlined.clc-badge-warning {
  background-color: transparent;
}
.clc-variant-outlined.clc-badge-warning.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning-lighter);
  color: var(--clc-warning-lighter);
}
.clc-variant-outlined.clc-badge-warning.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning-light);
  color: var(--clc-warning-light);
}
.clc-variant-outlined.clc-badge-warning.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning);
  color: var(--clc-warning);
}
.clc-variant-outlined.clc-badge-warning.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning-dark);
  color: var(--clc-warning-dark);
}
.clc-variant-outlined.clc-badge-warning.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning-darker);
  color: var(--clc-warning-darker);
}

.clc-variant-outlined.clc-badge-error {
  background-color: transparent;
}
.clc-variant-outlined.clc-badge-error.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error-lighter);
  color: var(--clc-error-lighter);
}
.clc-variant-outlined.clc-badge-error.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error-light);
  color: var(--clc-error-light);
}
.clc-variant-outlined.clc-badge-error.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error);
  color: var(--clc-error);
}
.clc-variant-outlined.clc-badge-error.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error-dark);
  color: var(--clc-error-dark);
}
.clc-variant-outlined.clc-badge-error.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error-darker);
  color: var(--clc-error-darker);
}

.clc-variant-outlined.clc-badge-danger {
  background-color: transparent;
}
.clc-variant-outlined.clc-badge-danger.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger-lighter);
  color: var(--clc-danger-lighter);
}
.clc-variant-outlined.clc-badge-danger.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger-light);
  color: var(--clc-danger-light);
}
.clc-variant-outlined.clc-badge-danger.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger);
  color: var(--clc-danger);
}
.clc-variant-outlined.clc-badge-danger.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger-dark);
  color: var(--clc-danger-dark);
}
.clc-variant-outlined.clc-badge-danger.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger-darker);
  color: var(--clc-danger-darker);
}

.clc-variant-outlined.clc-badge-success {
  background-color: transparent;
}
.clc-variant-outlined.clc-badge-success.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success-lighter);
  color: var(--clc-success-lighter);
}
.clc-variant-outlined.clc-badge-success.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success-light);
  color: var(--clc-success-light);
}
.clc-variant-outlined.clc-badge-success.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success);
  color: var(--clc-success);
}
.clc-variant-outlined.clc-badge-success.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success-dark);
  color: var(--clc-success-dark);
}
.clc-variant-outlined.clc-badge-success.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success-darker);
  color: var(--clc-success-darker);
}

.clc-variant-outlined.clc-badge-base {
  background-color: transparent;
}
.clc-variant-outlined.clc-badge-base.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-lighter);
  color: var(--clc-base-lighter);
}
.clc-variant-outlined.clc-badge-base.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-light);
  color: var(--clc-base-light);
}
.clc-variant-outlined.clc-badge-base.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base);
  color: var(--clc-base);
}
.clc-variant-outlined.clc-badge-base.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-dark);
  color: var(--clc-base-dark);
}
.clc-variant-outlined.clc-badge-base.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-darker);
  color: var(--clc-base-darker);
}

.clc-variant-outlined.clc-badge-light {
  background-color: transparent;
}
.clc-variant-outlined.clc-badge-light.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-200);
  color: var(--clc-base-200);
}

.clc-variant-outlined.clc-badge-dark {
  background-color: transparent;
}
.clc-variant-outlined.clc-badge-dark.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-900);
  color: var(--clc-base-900);
}

.clc-variant-text.clc-badge-primary {
  background-color: transparent;
}
.clc-variant-text.clc-badge-primary.clc-shade-lighter {
  color: var(--clc-primary-lighter);
}
.clc-variant-text.clc-badge-primary.clc-shade-light {
  color: var(--clc-primary-light);
}
.clc-variant-text.clc-badge-primary.clc-shade-default {
  color: var(--clc-primary);
}
.clc-variant-text.clc-badge-primary.clc-shade-dark {
  color: var(--clc-primary-dark);
}
.clc-variant-text.clc-badge-primary.clc-shade-darker {
  color: var(--clc-primary-darker);
}

.clc-variant-text.clc-badge-secondary {
  background-color: transparent;
}
.clc-variant-text.clc-badge-secondary.clc-shade-lighter {
  color: var(--clc-secondary-lighter);
}
.clc-variant-text.clc-badge-secondary.clc-shade-light {
  color: var(--clc-secondary-light);
}
.clc-variant-text.clc-badge-secondary.clc-shade-default {
  color: var(--clc-secondary);
}
.clc-variant-text.clc-badge-secondary.clc-shade-dark {
  color: var(--clc-secondary-dark);
}
.clc-variant-text.clc-badge-secondary.clc-shade-darker {
  color: var(--clc-secondary-darker);
}

.clc-variant-text.clc-badge-info {
  background-color: transparent;
}
.clc-variant-text.clc-badge-info.clc-shade-lighter {
  color: var(--clc-info-lighter);
}
.clc-variant-text.clc-badge-info.clc-shade-light {
  color: var(--clc-info-light);
}
.clc-variant-text.clc-badge-info.clc-shade-default {
  color: var(--clc-info);
}
.clc-variant-text.clc-badge-info.clc-shade-dark {
  color: var(--clc-info-dark);
}
.clc-variant-text.clc-badge-info.clc-shade-darker {
  color: var(--clc-info-darker);
}

.clc-variant-text.clc-badge-warning {
  background-color: transparent;
}
.clc-variant-text.clc-badge-warning.clc-shade-lighter {
  color: var(--clc-warning-lighter);
}
.clc-variant-text.clc-badge-warning.clc-shade-light {
  color: var(--clc-warning-light);
}
.clc-variant-text.clc-badge-warning.clc-shade-default {
  color: var(--clc-warning);
}
.clc-variant-text.clc-badge-warning.clc-shade-dark {
  color: var(--clc-warning-dark);
}
.clc-variant-text.clc-badge-warning.clc-shade-darker {
  color: var(--clc-warning-darker);
}

.clc-variant-text.clc-badge-error {
  background-color: transparent;
}
.clc-variant-text.clc-badge-error.clc-shade-lighter {
  color: var(--clc-error-lighter);
}
.clc-variant-text.clc-badge-error.clc-shade-light {
  color: var(--clc-error-light);
}
.clc-variant-text.clc-badge-error.clc-shade-default {
  color: var(--clc-error);
}
.clc-variant-text.clc-badge-error.clc-shade-dark {
  color: var(--clc-error-dark);
}
.clc-variant-text.clc-badge-error.clc-shade-darker {
  color: var(--clc-error-darker);
}

.clc-variant-text.clc-badge-danger {
  background-color: transparent;
}
.clc-variant-text.clc-badge-danger.clc-shade-lighter {
  color: var(--clc-danger-lighter);
}
.clc-variant-text.clc-badge-danger.clc-shade-light {
  color: var(--clc-danger-light);
}
.clc-variant-text.clc-badge-danger.clc-shade-default {
  color: var(--clc-danger);
}
.clc-variant-text.clc-badge-danger.clc-shade-dark {
  color: var(--clc-danger-dark);
}
.clc-variant-text.clc-badge-danger.clc-shade-darker {
  color: var(--clc-danger-darker);
}

.clc-variant-text.clc-badge-success {
  background-color: transparent;
}
.clc-variant-text.clc-badge-success.clc-shade-lighter {
  color: var(--clc-success-lighter);
}
.clc-variant-text.clc-badge-success.clc-shade-light {
  color: var(--clc-success-light);
}
.clc-variant-text.clc-badge-success.clc-shade-default {
  color: var(--clc-success);
}
.clc-variant-text.clc-badge-success.clc-shade-dark {
  color: var(--clc-success-dark);
}
.clc-variant-text.clc-badge-success.clc-shade-darker {
  color: var(--clc-success-darker);
}

.clc-variant-text.clc-badge-base {
  background-color: transparent;
}
.clc-variant-text.clc-badge-base.clc-shade-lighter {
  color: var(--clc-base-lighter);
}
.clc-variant-text.clc-badge-base.clc-shade-light {
  color: var(--clc-base-light);
}
.clc-variant-text.clc-badge-base.clc-shade-default {
  color: var(--clc-base);
}
.clc-variant-text.clc-badge-base.clc-shade-dark {
  color: var(--clc-base-dark);
}
.clc-variant-text.clc-badge-base.clc-shade-darker {
  color: var(--clc-base-darker);
}

.clc-variant-text.clc-badge-light {
  color: var(--clc-base-200);
  background-color: transparent;
}

.clc-variant-text.clc-badge-dark {
  color: var(--clc-base-900);
  background-color: transparent;
}

.clc-badge-pill {
  border-radius: var(--clc-badge-pill-border-radius);
  padding: var(--clc-badge-pill-padding);
}

.clc-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--clc-chip-gap);
  padding-block: var(--clc-chip-padding-block);
  padding-inline: var(--clc-chip-padding-inline);
  color: var(--clc-chip-color);
  background-color: var(--clc-chip-background-color);
  border-radius: var(--clc-chip-border-radius);
  border: var(--clc-chip-border-width) solid transparent;
  font-size: var(--clc-chip-font-size);
  font-weight: var(--clc-chip-font-weight);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  transition: filter var(--clc-transition), box-shadow var(--clc-transition), color var(--clc-transition), background-color var(--clc-transition);
}
.clc-chip .clc-chip-icon {
  font-size: var(--clc-chip-icon-size);
  line-height: var(--clc-chip-icon-size);
  margin-inline-start: calc(-1 * (var(--clc-chip-padding-inline) - var(--clc-chip-padding-block)));
}
.clc-chip .clc-button {
  border-radius: var(--clc-chip-border-radius);
  box-shadow: none;
  align-self: center;
  min-width: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  margin-inline-end: calc(-1 * (var(--clc-chip-padding-inline) - var(--clc-chip-padding-block)));
}
.clc-chip .clc-button .clci {
  vertical-align: middle;
  font-size: 1rem;
}
.clc-chip.clc-state-disabled {
  opacity: var(--clc-chip-disabled-opacity);
  pointer-events: none;
}
.clc-chip:not(.clc-state-disabled) {
  cursor: pointer;
}
.clc-chip:not(.clc-state-disabled):hover {
  filter: brightness(0.9);
}
.clc-chip:not(.clc-state-disabled):active {
  filter: brightness(0.85);
}
.clc-chip.clc-chip-selected {
  outline: var(--clc-chip-selected-outline);
  outline-offset: var(--clc-chip-selected-outline-offset);
}
.clc-chip:focus-visible:not(.clc-state-disabled) {
  outline: var(--clc-chip-selected-outline);
  outline-offset: var(--clc-chip-selected-outline-offset);
}
.clc-chip.clc-chip-sm {
  padding-block: var(--clc-chip-sm-padding-block);
  padding-inline: var(--clc-chip-sm-padding-inline);
  gap: var(--clc-chip-sm-gap);
  font-size: var(--clc-chip-sm-font-size);
}
.clc-chip.clc-chip-sm .clc-chip-icon {
  font-size: var(--clc-chip-sm-icon-size);
  margin-inline-start: calc(-1 * (var(--clc-chip-sm-padding-inline) - var(--clc-chip-sm-padding-block)));
}
.clc-chip.clc-chip-xs {
  padding-block: var(--clc-chip-xs-padding-block);
  padding-inline: var(--clc-chip-xs-padding-inline);
  gap: var(--clc-chip-xs-gap);
  font-size: var(--clc-chip-xs-font-size);
}
.clc-chip.clc-chip-xs .clc-chip-icon {
  font-size: var(--clc-chip-xs-icon-size);
  margin-inline-start: calc(-1 * (var(--clc-chip-xs-padding-inline) - var(--clc-chip-xs-padding-block)));
}

.clc-chip-primary {
  background-color: var(--clc-primary);
  color: var(--clc-on-primary);
}
.clc-chip-primary.clc-shade-lighter {
  background-color: var(--clc-primary-lighter);
  color: var(--clc-on-primary-lighter);
}
.clc-chip-primary.clc-shade-light {
  background-color: var(--clc-primary-light);
  color: var(--clc-on-primary-light);
}
.clc-chip-primary.clc-shade-default {
  background-color: var(--clc-primary);
  color: var(--clc-on-primary);
}
.clc-chip-primary.clc-shade-dark {
  background-color: var(--clc-primary-dark);
  color: var(--clc-on-primary-dark);
}
.clc-chip-primary.clc-shade-darker {
  background-color: var(--clc-primary-darker);
  color: var(--clc-on-primary-darker);
}

.clc-chip-secondary {
  background-color: var(--clc-secondary);
  color: var(--clc-on-secondary);
}
.clc-chip-secondary.clc-shade-lighter {
  background-color: var(--clc-secondary-lighter);
  color: var(--clc-on-secondary-lighter);
}
.clc-chip-secondary.clc-shade-light {
  background-color: var(--clc-secondary-light);
  color: var(--clc-on-secondary-light);
}
.clc-chip-secondary.clc-shade-default {
  background-color: var(--clc-secondary);
  color: var(--clc-on-secondary);
}
.clc-chip-secondary.clc-shade-dark {
  background-color: var(--clc-secondary-dark);
  color: var(--clc-on-secondary-dark);
}
.clc-chip-secondary.clc-shade-darker {
  background-color: var(--clc-secondary-darker);
  color: var(--clc-on-secondary-darker);
}

.clc-chip-info {
  background-color: var(--clc-info);
  color: var(--clc-on-info);
}
.clc-chip-info.clc-shade-lighter {
  background-color: var(--clc-info-lighter);
  color: var(--clc-on-info-lighter);
}
.clc-chip-info.clc-shade-light {
  background-color: var(--clc-info-light);
  color: var(--clc-on-info-light);
}
.clc-chip-info.clc-shade-default {
  background-color: var(--clc-info);
  color: var(--clc-on-info);
}
.clc-chip-info.clc-shade-dark {
  background-color: var(--clc-info-dark);
  color: var(--clc-on-info-dark);
}
.clc-chip-info.clc-shade-darker {
  background-color: var(--clc-info-darker);
  color: var(--clc-on-info-darker);
}

.clc-chip-warning {
  background-color: var(--clc-warning);
  color: var(--clc-on-warning);
}
.clc-chip-warning.clc-shade-lighter {
  background-color: var(--clc-warning-lighter);
  color: var(--clc-on-warning-lighter);
}
.clc-chip-warning.clc-shade-light {
  background-color: var(--clc-warning-light);
  color: var(--clc-on-warning-light);
}
.clc-chip-warning.clc-shade-default {
  background-color: var(--clc-warning);
  color: var(--clc-on-warning);
}
.clc-chip-warning.clc-shade-dark {
  background-color: var(--clc-warning-dark);
  color: var(--clc-on-warning-dark);
}
.clc-chip-warning.clc-shade-darker {
  background-color: var(--clc-warning-darker);
  color: var(--clc-on-warning-darker);
}

.clc-chip-error {
  background-color: var(--clc-danger);
  color: var(--clc-on-danger);
}
.clc-chip-error.clc-shade-lighter {
  background-color: var(--clc-error-lighter);
  color: var(--clc-on-error-lighter);
}
.clc-chip-error.clc-shade-light {
  background-color: var(--clc-error-light);
  color: var(--clc-on-error-light);
}
.clc-chip-error.clc-shade-default {
  background-color: var(--clc-error);
  color: var(--clc-on-error);
}
.clc-chip-error.clc-shade-dark {
  background-color: var(--clc-error-dark);
  color: var(--clc-on-error-dark);
}
.clc-chip-error.clc-shade-darker {
  background-color: var(--clc-error-darker);
  color: var(--clc-on-error-darker);
}

.clc-chip-danger {
  background-color: var(--clc-danger);
  color: var(--clc-on-danger);
}
.clc-chip-danger.clc-shade-lighter {
  background-color: var(--clc-danger-lighter);
  color: var(--clc-on-danger-lighter);
}
.clc-chip-danger.clc-shade-light {
  background-color: var(--clc-danger-light);
  color: var(--clc-on-danger-light);
}
.clc-chip-danger.clc-shade-default {
  background-color: var(--clc-danger);
  color: var(--clc-on-danger);
}
.clc-chip-danger.clc-shade-dark {
  background-color: var(--clc-danger-dark);
  color: var(--clc-on-danger-dark);
}
.clc-chip-danger.clc-shade-darker {
  background-color: var(--clc-danger-darker);
  color: var(--clc-on-danger-darker);
}

.clc-chip-success {
  background-color: var(--clc-success);
  color: var(--clc-on-success);
}
.clc-chip-success.clc-shade-lighter {
  background-color: var(--clc-success-lighter);
  color: var(--clc-on-success-lighter);
}
.clc-chip-success.clc-shade-light {
  background-color: var(--clc-success-light);
  color: var(--clc-on-success-light);
}
.clc-chip-success.clc-shade-default {
  background-color: var(--clc-success);
  color: var(--clc-on-success);
}
.clc-chip-success.clc-shade-dark {
  background-color: var(--clc-success-dark);
  color: var(--clc-on-success-dark);
}
.clc-chip-success.clc-shade-darker {
  background-color: var(--clc-success-darker);
  color: var(--clc-on-success-darker);
}

.clc-chip-base {
  background-color: var(--clc-base-200);
  color: var(--clc-text-color);
}
.clc-chip-base.clc-shade-lighter {
  background-color: var(--clc-base-lighter);
  color: var(--clc-on-base-lighter);
}
.clc-chip-base.clc-shade-light {
  background-color: var(--clc-base-light);
  color: var(--clc-on-base-light);
}
.clc-chip-base.clc-shade-default {
  background-color: var(--clc-base);
  color: var(--clc-on-base);
}
.clc-chip-base.clc-shade-dark {
  background-color: var(--clc-base-dark);
  color: var(--clc-on-base-dark);
}
.clc-chip-base.clc-shade-darker {
  background-color: var(--clc-base-darker);
  color: var(--clc-on-base-darker);
}

.clc-chip-light {
  background-color: var(--clc-base-200);
  color: var(--clc-text-color);
}

.clc-chip-dark {
  background-color: var(--clc-base-900);
  color: var(--clc-text-contrast-color);
}

.clc-variant-outlined.clc-chip-primary {
  background-color: transparent;
}
.clc-variant-outlined.clc-chip-primary.clc-shade-lighter {
  border-color: var(--clc-primary-lighter);
  color: var(--clc-primary-light);
}
.clc-variant-outlined.clc-chip-primary.clc-shade-light {
  border-color: var(--clc-primary-light);
  color: var(--clc-primary-light);
}
.clc-variant-outlined.clc-chip-primary.clc-shade-default {
  border-color: var(--clc-primary);
  color: var(--clc-primary);
}
.clc-variant-outlined.clc-chip-primary.clc-shade-dark {
  border-color: var(--clc-primary-dark);
  color: var(--clc-primary-dark);
}
.clc-variant-outlined.clc-chip-primary.clc-shade-darker {
  border-color: var(--clc-primary-darker);
  color: var(--clc-primary-darker);
}
.clc-variant-outlined.clc-chip-primary:not(.clc-state-disabled):hover {
  background-color: var(--clc-primary-lighter);
  color: var(--clc-on-primary-lighter);
  filter: none;
}
.clc-variant-outlined.clc-chip-primary:not(.clc-state-disabled):active {
  background-color: var(--clc-primary-lighter);
  color: var(--clc-on-primary-lighter);
  filter: none;
}

.clc-variant-outlined.clc-chip-secondary {
  background-color: transparent;
}
.clc-variant-outlined.clc-chip-secondary.clc-shade-lighter {
  border-color: var(--clc-secondary-lighter);
  color: var(--clc-secondary-light);
}
.clc-variant-outlined.clc-chip-secondary.clc-shade-light {
  border-color: var(--clc-secondary-light);
  color: var(--clc-secondary-light);
}
.clc-variant-outlined.clc-chip-secondary.clc-shade-default {
  border-color: var(--clc-secondary);
  color: var(--clc-secondary);
}
.clc-variant-outlined.clc-chip-secondary.clc-shade-dark {
  border-color: var(--clc-secondary-dark);
  color: var(--clc-secondary-dark);
}
.clc-variant-outlined.clc-chip-secondary.clc-shade-darker {
  border-color: var(--clc-secondary-darker);
  color: var(--clc-secondary-darker);
}
.clc-variant-outlined.clc-chip-secondary:not(.clc-state-disabled):hover {
  background-color: var(--clc-secondary-lighter);
  color: var(--clc-on-secondary-lighter);
  filter: none;
}
.clc-variant-outlined.clc-chip-secondary:not(.clc-state-disabled):active {
  background-color: var(--clc-secondary-lighter);
  color: var(--clc-on-secondary-lighter);
  filter: none;
}

.clc-variant-outlined.clc-chip-info {
  background-color: transparent;
}
.clc-variant-outlined.clc-chip-info.clc-shade-lighter {
  border-color: var(--clc-info-lighter);
  color: var(--clc-info-light);
}
.clc-variant-outlined.clc-chip-info.clc-shade-light {
  border-color: var(--clc-info-light);
  color: var(--clc-info-light);
}
.clc-variant-outlined.clc-chip-info.clc-shade-default {
  border-color: var(--clc-info);
  color: var(--clc-info);
}
.clc-variant-outlined.clc-chip-info.clc-shade-dark {
  border-color: var(--clc-info-dark);
  color: var(--clc-info-dark);
}
.clc-variant-outlined.clc-chip-info.clc-shade-darker {
  border-color: var(--clc-info-darker);
  color: var(--clc-info-darker);
}
.clc-variant-outlined.clc-chip-info:not(.clc-state-disabled):hover {
  background-color: var(--clc-info-lighter);
  color: var(--clc-on-info-lighter);
  filter: none;
}
.clc-variant-outlined.clc-chip-info:not(.clc-state-disabled):active {
  background-color: var(--clc-info-lighter);
  color: var(--clc-on-info-lighter);
  filter: none;
}

.clc-variant-outlined.clc-chip-warning {
  background-color: transparent;
}
.clc-variant-outlined.clc-chip-warning.clc-shade-lighter {
  border-color: var(--clc-warning-lighter);
  color: var(--clc-warning-light);
}
.clc-variant-outlined.clc-chip-warning.clc-shade-light {
  border-color: var(--clc-warning-light);
  color: var(--clc-warning-light);
}
.clc-variant-outlined.clc-chip-warning.clc-shade-default {
  border-color: var(--clc-warning);
  color: var(--clc-warning);
}
.clc-variant-outlined.clc-chip-warning.clc-shade-dark {
  border-color: var(--clc-warning-dark);
  color: var(--clc-warning-dark);
}
.clc-variant-outlined.clc-chip-warning.clc-shade-darker {
  border-color: var(--clc-warning-darker);
  color: var(--clc-warning-darker);
}
.clc-variant-outlined.clc-chip-warning:not(.clc-state-disabled):hover {
  background-color: var(--clc-warning-lighter);
  color: var(--clc-on-warning-lighter);
  filter: none;
}
.clc-variant-outlined.clc-chip-warning:not(.clc-state-disabled):active {
  background-color: var(--clc-warning-lighter);
  color: var(--clc-on-warning-lighter);
  filter: none;
}

.clc-variant-outlined.clc-chip-error {
  background-color: transparent;
}
.clc-variant-outlined.clc-chip-error.clc-shade-lighter {
  border-color: var(--clc-error-lighter);
  color: var(--clc-error-light);
}
.clc-variant-outlined.clc-chip-error.clc-shade-light {
  border-color: var(--clc-error-light);
  color: var(--clc-error-light);
}
.clc-variant-outlined.clc-chip-error.clc-shade-default {
  border-color: var(--clc-error);
  color: var(--clc-error);
}
.clc-variant-outlined.clc-chip-error.clc-shade-dark {
  border-color: var(--clc-error-dark);
  color: var(--clc-error-dark);
}
.clc-variant-outlined.clc-chip-error.clc-shade-darker {
  border-color: var(--clc-error-darker);
  color: var(--clc-error-darker);
}
.clc-variant-outlined.clc-chip-error:not(.clc-state-disabled):hover {
  background-color: var(--clc-error-lighter);
  color: var(--clc-on-error-lighter);
  filter: none;
}
.clc-variant-outlined.clc-chip-error:not(.clc-state-disabled):active {
  background-color: var(--clc-error-lighter);
  color: var(--clc-on-error-lighter);
  filter: none;
}

.clc-variant-outlined.clc-chip-danger {
  background-color: transparent;
}
.clc-variant-outlined.clc-chip-danger.clc-shade-lighter {
  border-color: var(--clc-danger-lighter);
  color: var(--clc-danger-light);
}
.clc-variant-outlined.clc-chip-danger.clc-shade-light {
  border-color: var(--clc-danger-light);
  color: var(--clc-danger-light);
}
.clc-variant-outlined.clc-chip-danger.clc-shade-default {
  border-color: var(--clc-danger);
  color: var(--clc-danger);
}
.clc-variant-outlined.clc-chip-danger.clc-shade-dark {
  border-color: var(--clc-danger-dark);
  color: var(--clc-danger-dark);
}
.clc-variant-outlined.clc-chip-danger.clc-shade-darker {
  border-color: var(--clc-danger-darker);
  color: var(--clc-danger-darker);
}
.clc-variant-outlined.clc-chip-danger:not(.clc-state-disabled):hover {
  background-color: var(--clc-danger-lighter);
  color: var(--clc-on-danger-lighter);
  filter: none;
}
.clc-variant-outlined.clc-chip-danger:not(.clc-state-disabled):active {
  background-color: var(--clc-danger-lighter);
  color: var(--clc-on-danger-lighter);
  filter: none;
}

.clc-variant-outlined.clc-chip-success {
  background-color: transparent;
}
.clc-variant-outlined.clc-chip-success.clc-shade-lighter {
  border-color: var(--clc-success-lighter);
  color: var(--clc-success-light);
}
.clc-variant-outlined.clc-chip-success.clc-shade-light {
  border-color: var(--clc-success-light);
  color: var(--clc-success-light);
}
.clc-variant-outlined.clc-chip-success.clc-shade-default {
  border-color: var(--clc-success);
  color: var(--clc-success);
}
.clc-variant-outlined.clc-chip-success.clc-shade-dark {
  border-color: var(--clc-success-dark);
  color: var(--clc-success-dark);
}
.clc-variant-outlined.clc-chip-success.clc-shade-darker {
  border-color: var(--clc-success-darker);
  color: var(--clc-success-darker);
}
.clc-variant-outlined.clc-chip-success:not(.clc-state-disabled):hover {
  background-color: var(--clc-success-lighter);
  color: var(--clc-on-success-lighter);
  filter: none;
}
.clc-variant-outlined.clc-chip-success:not(.clc-state-disabled):active {
  background-color: var(--clc-success-lighter);
  color: var(--clc-on-success-lighter);
  filter: none;
}

.clc-variant-outlined.clc-chip-base {
  background-color: transparent;
}
.clc-variant-outlined.clc-chip-base.clc-shade-lighter {
  border-color: var(--clc-base-lighter);
  color: var(--clc-base-light);
}
.clc-variant-outlined.clc-chip-base.clc-shade-light {
  border-color: var(--clc-base-light);
  color: var(--clc-base-light);
}
.clc-variant-outlined.clc-chip-base.clc-shade-default {
  border-color: var(--clc-base-600);
  color: var(--clc-text-color);
}
.clc-variant-outlined.clc-chip-base.clc-shade-dark {
  border-color: var(--clc-base-dark);
  color: var(--clc-base-dark);
}
.clc-variant-outlined.clc-chip-base.clc-shade-darker {
  border-color: var(--clc-base-darker);
  color: var(--clc-base-darker);
}
.clc-variant-outlined.clc-chip-base:not(.clc-state-disabled):hover {
  background-color: var(--clc-base-200);
  color: var(--clc-on-base-lighter);
  filter: none;
}
.clc-variant-outlined.clc-chip-base:not(.clc-state-disabled):active {
  background-color: var(--clc-base-200);
  color: var(--clc-on-base-lighter);
  filter: none;
}

.clc-variant-outlined.clc-chip-light {
  background-color: transparent;
}
.clc-variant-outlined.clc-chip-light.clc-shade-default {
  border-color: var(--clc-base-200);
  color: var(--clc-base-200);
}
.clc-variant-outlined.clc-chip-light:not(.clc-state-disabled):hover {
  background-color: rgba(255, 255, 255, 0.12);
  filter: none;
}
.clc-variant-outlined.clc-chip-light:not(.clc-state-disabled):active {
  background-color: rgba(255, 255, 255, 0.12);
  filter: none;
}

.clc-variant-outlined.clc-chip-dark {
  background-color: transparent;
}
.clc-variant-outlined.clc-chip-dark.clc-shade-default {
  border-color: var(--clc-base-900);
  color: var(--clc-base-900);
}
.clc-variant-outlined.clc-chip-dark:not(.clc-state-disabled):hover {
  background-color: rgba(0, 0, 0, 0.12);
  filter: none;
}
.clc-variant-outlined.clc-chip-dark:not(.clc-state-disabled):active {
  background-color: rgba(0, 0, 0, 0.12);
  filter: none;
}

.clc-variant-text.clc-chip-primary {
  background-color: transparent;
  border-color: transparent;
}
.clc-variant-text.clc-chip-primary.clc-shade-lighter {
  color: var(--clc-primary-lighter);
}
.clc-variant-text.clc-chip-primary.clc-shade-light {
  color: var(--clc-primary-light);
}
.clc-variant-text.clc-chip-primary.clc-shade-default {
  color: var(--clc-primary);
}
.clc-variant-text.clc-chip-primary.clc-shade-dark {
  color: var(--clc-primary-dark);
}
.clc-variant-text.clc-chip-primary.clc-shade-darker {
  color: var(--clc-primary-darker);
}
.clc-variant-text.clc-chip-primary:not(.clc-state-disabled):hover {
  background-color: var(--clc-primary-lighter);
  color: var(--clc-on-primary-lighter);
  filter: none;
}
.clc-variant-text.clc-chip-primary:not(.clc-state-disabled):active {
  background-color: var(--clc-primary-lighter);
  color: var(--clc-on-primary-lighter);
  filter: none;
}

.clc-variant-text.clc-chip-secondary {
  background-color: transparent;
  border-color: transparent;
}
.clc-variant-text.clc-chip-secondary.clc-shade-lighter {
  color: var(--clc-secondary-lighter);
}
.clc-variant-text.clc-chip-secondary.clc-shade-light {
  color: var(--clc-secondary-light);
}
.clc-variant-text.clc-chip-secondary.clc-shade-default {
  color: var(--clc-secondary);
}
.clc-variant-text.clc-chip-secondary.clc-shade-dark {
  color: var(--clc-secondary-dark);
}
.clc-variant-text.clc-chip-secondary.clc-shade-darker {
  color: var(--clc-secondary-darker);
}
.clc-variant-text.clc-chip-secondary:not(.clc-state-disabled):hover {
  background-color: var(--clc-secondary-lighter);
  color: var(--clc-on-secondary-lighter);
  filter: none;
}
.clc-variant-text.clc-chip-secondary:not(.clc-state-disabled):active {
  background-color: var(--clc-secondary-lighter);
  color: var(--clc-on-secondary-lighter);
  filter: none;
}

.clc-variant-text.clc-chip-info {
  background-color: transparent;
  border-color: transparent;
}
.clc-variant-text.clc-chip-info.clc-shade-lighter {
  color: var(--clc-info-lighter);
}
.clc-variant-text.clc-chip-info.clc-shade-light {
  color: var(--clc-info-light);
}
.clc-variant-text.clc-chip-info.clc-shade-default {
  color: var(--clc-info);
}
.clc-variant-text.clc-chip-info.clc-shade-dark {
  color: var(--clc-info-dark);
}
.clc-variant-text.clc-chip-info.clc-shade-darker {
  color: var(--clc-info-darker);
}
.clc-variant-text.clc-chip-info:not(.clc-state-disabled):hover {
  background-color: var(--clc-info-lighter);
  color: var(--clc-on-info-lighter);
  filter: none;
}
.clc-variant-text.clc-chip-info:not(.clc-state-disabled):active {
  background-color: var(--clc-info-lighter);
  color: var(--clc-on-info-lighter);
  filter: none;
}

.clc-variant-text.clc-chip-warning {
  background-color: transparent;
  border-color: transparent;
}
.clc-variant-text.clc-chip-warning.clc-shade-lighter {
  color: var(--clc-warning-lighter);
}
.clc-variant-text.clc-chip-warning.clc-shade-light {
  color: var(--clc-warning-light);
}
.clc-variant-text.clc-chip-warning.clc-shade-default {
  color: var(--clc-warning);
}
.clc-variant-text.clc-chip-warning.clc-shade-dark {
  color: var(--clc-warning-dark);
}
.clc-variant-text.clc-chip-warning.clc-shade-darker {
  color: var(--clc-warning-darker);
}
.clc-variant-text.clc-chip-warning:not(.clc-state-disabled):hover {
  background-color: var(--clc-warning-lighter);
  color: var(--clc-on-warning-lighter);
  filter: none;
}
.clc-variant-text.clc-chip-warning:not(.clc-state-disabled):active {
  background-color: var(--clc-warning-lighter);
  color: var(--clc-on-warning-lighter);
  filter: none;
}

.clc-variant-text.clc-chip-error {
  background-color: transparent;
  border-color: transparent;
}
.clc-variant-text.clc-chip-error.clc-shade-lighter {
  color: var(--clc-error-lighter);
}
.clc-variant-text.clc-chip-error.clc-shade-light {
  color: var(--clc-error-light);
}
.clc-variant-text.clc-chip-error.clc-shade-default {
  color: var(--clc-error);
}
.clc-variant-text.clc-chip-error.clc-shade-dark {
  color: var(--clc-error-dark);
}
.clc-variant-text.clc-chip-error.clc-shade-darker {
  color: var(--clc-error-darker);
}
.clc-variant-text.clc-chip-error:not(.clc-state-disabled):hover {
  background-color: var(--clc-error-lighter);
  color: var(--clc-on-error-lighter);
  filter: none;
}
.clc-variant-text.clc-chip-error:not(.clc-state-disabled):active {
  background-color: var(--clc-error-lighter);
  color: var(--clc-on-error-lighter);
  filter: none;
}

.clc-variant-text.clc-chip-danger {
  background-color: transparent;
  border-color: transparent;
}
.clc-variant-text.clc-chip-danger.clc-shade-lighter {
  color: var(--clc-danger-lighter);
}
.clc-variant-text.clc-chip-danger.clc-shade-light {
  color: var(--clc-danger-light);
}
.clc-variant-text.clc-chip-danger.clc-shade-default {
  color: var(--clc-danger);
}
.clc-variant-text.clc-chip-danger.clc-shade-dark {
  color: var(--clc-danger-dark);
}
.clc-variant-text.clc-chip-danger.clc-shade-darker {
  color: var(--clc-danger-darker);
}
.clc-variant-text.clc-chip-danger:not(.clc-state-disabled):hover {
  background-color: var(--clc-danger-lighter);
  color: var(--clc-on-danger-lighter);
  filter: none;
}
.clc-variant-text.clc-chip-danger:not(.clc-state-disabled):active {
  background-color: var(--clc-danger-lighter);
  color: var(--clc-on-danger-lighter);
  filter: none;
}

.clc-variant-text.clc-chip-success {
  background-color: transparent;
  border-color: transparent;
}
.clc-variant-text.clc-chip-success.clc-shade-lighter {
  color: var(--clc-success-lighter);
}
.clc-variant-text.clc-chip-success.clc-shade-light {
  color: var(--clc-success-light);
}
.clc-variant-text.clc-chip-success.clc-shade-default {
  color: var(--clc-success);
}
.clc-variant-text.clc-chip-success.clc-shade-dark {
  color: var(--clc-success-dark);
}
.clc-variant-text.clc-chip-success.clc-shade-darker {
  color: var(--clc-success-darker);
}
.clc-variant-text.clc-chip-success:not(.clc-state-disabled):hover {
  background-color: var(--clc-success-lighter);
  color: var(--clc-on-success-lighter);
  filter: none;
}
.clc-variant-text.clc-chip-success:not(.clc-state-disabled):active {
  background-color: var(--clc-success-lighter);
  color: var(--clc-on-success-lighter);
  filter: none;
}

.clc-variant-text.clc-chip-base {
  background-color: transparent;
  border-color: transparent;
}
.clc-variant-text.clc-chip-base.clc-shade-lighter {
  color: var(--clc-base-lighter);
}
.clc-variant-text.clc-chip-base.clc-shade-light {
  color: var(--clc-base-light);
}
.clc-variant-text.clc-chip-base.clc-shade-default {
  color: inherit;
}
.clc-variant-text.clc-chip-base.clc-shade-dark {
  color: var(--clc-base-dark);
}
.clc-variant-text.clc-chip-base.clc-shade-darker {
  color: var(--clc-base-darker);
}
.clc-variant-text.clc-chip-base:not(.clc-state-disabled):hover {
  background-color: var(--clc-base-200);
  color: var(--clc-on-base-lighter);
  filter: none;
}
.clc-variant-text.clc-chip-base:not(.clc-state-disabled):active {
  background-color: var(--clc-base-200);
  color: var(--clc-on-base-lighter);
  filter: none;
}

.clc-variant-text.clc-chip-light {
  color: var(--clc-base-200);
  background-color: transparent;
  border-color: transparent;
}
.clc-variant-text.clc-chip-light:not(.clc-state-disabled):hover {
  background-color: rgba(255, 255, 255, 0.12);
  filter: none;
}
.clc-variant-text.clc-chip-light:not(.clc-state-disabled):active {
  background-color: rgba(255, 255, 255, 0.12);
  filter: none;
}

.clc-variant-text.clc-chip-dark {
  color: var(--clc-base-900);
  background-color: transparent;
  border-color: transparent;
}
.clc-variant-text.clc-chip-dark:not(.clc-state-disabled):hover {
  background-color: rgba(0, 0, 0, 0.12);
  filter: none;
}
.clc-variant-text.clc-chip-dark:not(.clc-state-disabled):active {
  background-color: rgba(0, 0, 0, 0.12);
  filter: none;
}

.clc-chip-list {
  display: flex;
  gap: var(--clc-chip-list-gap);
  align-items: center;
}
.clc-chip-list.clc-chip-list-horizontal {
  flex-direction: row;
}
.clc-chip-list.clc-chip-list-vertical {
  flex-direction: column;
  align-items: stretch;
}
.clc-chip-list.clc-chip-list-nowrap {
  flex-wrap: nowrap;
}
.clc-chip-list.clc-chip-list-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.clc-chip-list-item {
  display: inline-flex;
  border-radius: var(--clc-chip-border-radius);
  outline: none;
}
.clc-chip-list-item:focus-visible {
  outline: var(--clc-chip-selected-outline);
  outline-offset: var(--clc-chip-selected-outline-offset);
}
:focus-visible .clc-chip-list-item.clc-state-focused .clc-chip:not(.clc-state-disabled) {
  outline: var(--clc-chip-selected-outline);
  outline-offset: var(--clc-chip-selected-outline-offset);
}

.clc-chip-list:focus, .clc-chip-list:focus-visible {
  outline: none;
}

.clc-dropzone {
  user-select: none;
}

.clc-dropzone-item {
  user-select: none;
  cursor: grab;
}

.clc-dragging {
  cursor: grabbing;
}

.clc-form-field:hover .clc-form-field-content, .clc-autocomplete:hover:not(.clc-state-disabled), .clc-timespanpicker > .clc-inputtext:not(:disabled):not(.clc-state-disabled):hover, .clc-colorpicker:not(:disabled):not(.clc-state-disabled):hover, .clc-lookup-search-input-container input:not(:disabled):not(.clc-state-disabled):hover, .clc-lookup-search input:not(:disabled):not(.clc-state-disabled):hover, .clc-numeric:not(:disabled):not(.clc-state-disabled):hover, .clc-datepicker > .clc-inputtext:not(:disabled):not(.clc-state-disabled):hover, .clc-multiselect:not(:disabled):not(.clc-state-disabled):hover, .clc-dropdown:not(:disabled):not(.clc-state-disabled):hover, .mask:not(:disabled):not(.clc-state-disabled):hover, .clc-textarea:not(:disabled):not(.clc-state-disabled):hover, .clc-textbox:not(:disabled):not(.clc-state-disabled):hover {
  box-shadow: var(--clc-input-hover-shadow);
  background-color: var(--clc-input-hover-background-color);
  border: var(--clc-input-hover-border);
  border-block-end: var(--clc-input-hover-border-block-end);
}

.clc-form-field.clc-state-focused .clc-form-field-content, .clc-numeric:focus-within:not(.clc-state-disabled), .clc-autocomplete:focus-within:not(.clc-state-disabled), .clc-timespanpicker > .clc-inputtext:not(:disabled):not(.clc-state-disabled):focus, .clc-colorpicker:not(:disabled):not(.clc-state-disabled):focus, .clc-lookup-search-input-container input:not(:disabled):not(.clc-state-disabled):focus, .clc-lookup-search input:not(:disabled):not(.clc-state-disabled):focus, .clc-numeric:not(:disabled):not(.clc-state-disabled):focus, .clc-datepicker > .clc-inputtext:not(:disabled):not(.clc-state-disabled):focus, .clc-multiselect:not(:disabled):not(.clc-state-disabled):focus, .clc-dropdown:not(:disabled):not(.clc-state-disabled):focus, .mask:not(:disabled):not(.clc-state-disabled):focus, .clc-textarea:not(:disabled):not(.clc-state-disabled):focus, .clc-textbox:not(:disabled):not(.clc-state-disabled):focus {
  box-shadow: var(--clc-input-focus-shadow);
  background-color: var(--clc-input-focus-background-color);
  border: var(--clc-input-focus-border);
  border-block-end: var(--clc-input-focus-border-block-end);
  outline: var(--clc-input-focus-outline);
  outline-offset: var(--clc-input-focus-outline-offset);
}

:not(.clc-form-field-content) > .clc-colorpicker.clc-state-disabled, :not(.clc-form-field-content) > .clc-numeric.clc-state-disabled, :not(.clc-form-field-content) > .clc-listbox.clc-state-disabled, :not(.clc-form-field-content) > .clc-autocomplete-input:disabled, :not(.clc-form-field-content) > .clc-state-disabled.clc-autocomplete, :not(.clc-form-field-content) > .clc-state-disabled.clc-multiselect, :not(.clc-form-field-content) > .clc-state-disabled.clc-dropdown, .clc-timespanpicker:not(.clc-form-field-content) > .clc-inputtext:disabled, :not(.clc-form-field-content) > .clc-colorpicker:disabled, .clc-lookup-search-input-container :not(.clc-form-field-content) > input:disabled, .clc-lookup-search :not(.clc-form-field-content) > input:disabled, :not(.clc-form-field-content) > .clc-numeric:disabled, .clc-datepicker:not(.clc-form-field-content) > .clc-inputtext:disabled, :not(.clc-form-field-content) > .clc-multiselect:disabled, :not(.clc-form-field-content) > .clc-dropdown:disabled, :not(.clc-form-field-content) > .mask:disabled, :not(.clc-form-field-content) > .clc-textarea:disabled, :not(.clc-form-field-content) > .clc-textbox:disabled {
  color: var(--clc-input-disabled-color);
  box-shadow: var(--clc-input-disabled-shadow);
  background-color: var(--clc-input-disabled-background-color);
  border: var(--clc-input-disabled-border);
  border-block-end: var(--clc-input-disabled-border-block-end);
  opacity: var(--clc-input-disabled-opacity);
}
:not(.clc-form-field-content) > .clc-colorpicker.clc-state-disabled::placeholder, :not(.clc-form-field-content) > .clc-numeric.clc-state-disabled::placeholder, :not(.clc-form-field-content) > .clc-listbox.clc-state-disabled::placeholder, :not(.clc-form-field-content) > .clc-autocomplete-input:disabled::placeholder, :not(.clc-form-field-content) > .clc-state-disabled.clc-autocomplete::placeholder, :not(.clc-form-field-content) > .clc-state-disabled.clc-multiselect::placeholder, :not(.clc-form-field-content) > .clc-state-disabled.clc-dropdown::placeholder, .clc-timespanpicker:not(.clc-form-field-content) > .clc-inputtext:disabled::placeholder, :not(.clc-form-field-content) > .clc-colorpicker:disabled::placeholder, .clc-lookup-search-input-container :not(.clc-form-field-content) > input:disabled::placeholder, .clc-lookup-search :not(.clc-form-field-content) > input:disabled::placeholder, :not(.clc-form-field-content) > .clc-numeric:disabled::placeholder, .clc-datepicker:not(.clc-form-field-content) > .clc-inputtext:disabled::placeholder, :not(.clc-form-field-content) > .clc-multiselect:disabled::placeholder, :not(.clc-form-field-content) > .clc-dropdown:disabled::placeholder, :not(.clc-form-field-content) > .mask:disabled::placeholder, :not(.clc-form-field-content) > .clc-textarea:disabled::placeholder, :not(.clc-form-field-content) > .clc-textbox:disabled::placeholder {
  color: var(--clc-input-disabled-placeholder-color);
}
:not(.clc-form-field-content) > .clc-colorpicker.clc-state-disabled .clc-inputtext, :not(.clc-form-field-content) > .clc-numeric.clc-state-disabled .clc-inputtext, :not(.clc-form-field-content) > .clc-listbox.clc-state-disabled .clc-inputtext, :not(.clc-form-field-content) > .clc-autocomplete-input:disabled .clc-inputtext, :not(.clc-form-field-content) > .clc-state-disabled.clc-autocomplete .clc-inputtext, :not(.clc-form-field-content) > .clc-state-disabled.clc-multiselect .clc-inputtext, :not(.clc-form-field-content) > .clc-state-disabled.clc-dropdown .clc-inputtext, .clc-timespanpicker:not(.clc-form-field-content) > .clc-inputtext:disabled .clc-inputtext, :not(.clc-form-field-content) > .clc-colorpicker:disabled .clc-inputtext, .clc-lookup-search-input-container :not(.clc-form-field-content) > input:disabled .clc-inputtext, .clc-lookup-search :not(.clc-form-field-content) > input:disabled .clc-inputtext, :not(.clc-form-field-content) > .clc-numeric:disabled .clc-inputtext, .clc-datepicker:not(.clc-form-field-content) > .clc-inputtext:disabled .clc-inputtext, :not(.clc-form-field-content) > .clc-multiselect:disabled .clc-inputtext, :not(.clc-form-field-content) > .clc-dropdown:disabled .clc-inputtext, :not(.clc-form-field-content) > .mask:disabled .clc-inputtext, :not(.clc-form-field-content) > .clc-textarea:disabled .clc-inputtext, :not(.clc-form-field-content) > .clc-textbox:disabled .clc-inputtext {
  background-color: var(--clc-input-disabled-background-color);
  color: var(--clc-input-disabled-color);
  border: none;
}

input {
  color: var(--clc-input-value-color);
  font-size: var(--clc-input-font-size);
}
input::placeholder {
  color: var(--clc-input-placeholder-color);
}

.clc-timespanpicker > .clc-inputtext, .clc-colorpicker, .clc-lookup-search-input-container input, .clc-lookup-search input, .clc-numeric, .clc-datepicker > .clc-inputtext, .clc-multiselect, .clc-dropdown, .mask, .clc-textarea, .clc-textbox {
  padding-block: var(--clc-input-padding-block);
  padding-inline: var(--clc-input-padding-inline);
}

.clc-form-field-content, .clc-timespanpicker > .clc-inputtext, .clc-colorpicker, .clc-lookup-search-input-container input, .clc-lookup-search input, .clc-numeric, .clc-datepicker > .clc-inputtext, .clc-multiselect, .clc-dropdown, .mask, .clc-textarea, .clc-textbox {
  box-sizing: border-box;
  border: var(--clc-input-border);
  border-block-end: var(--clc-input-border-block-end);
  border-radius: var(--clc-input-border-radius);
  box-shadow: var(--clc-input-shadow);
  background-color: var(--clc-input-background-color);
}

.clc-timespanpicker > .clc-inputtext, .clc-colorpicker, .clc-lookup-search-input-container input, .clc-lookup-search input, .clc-numeric, .clc-datepicker > .clc-inputtext, .clc-multiselect, .clc-dropdown, .mask, .clc-textarea, .clc-textbox {
  height: var(--clc-input-height);
  line-height: var(--clc-input-line-height);
  color: var(--clc-input-value-color);
  font-family: inherit;
  font-size: var(--clc-input-font-size);
  transition: var(--clc-input-transition);
}
.clc-timespanpicker > .clc-inputtext:not(.invalid), .clc-colorpicker:not(.invalid), .clc-lookup-search-input-container input:not(.invalid), .clc-lookup-search input:not(.invalid), .clc-numeric:not(.invalid), .clc-datepicker > .clc-inputtext:not(.invalid), .clc-multiselect:not(.invalid), .clc-dropdown:not(.invalid), .mask:not(.invalid), .clc-textarea:not(.invalid), .clc-textbox:not(.invalid) {
  outline: none;
}
.clc-input-xs {
  --clc-input-height: var(--clc-input-size-xs);
  --clc-input-padding-block: var(--clc-input-padding-block-xs);
  --clc-input-padding-inline: var(--clc-input-padding-inline-xs);
  --clc-input-font-size: var(--clc-input-font-size-xs);
  --clc-input-line-height: calc(var(--clc-input-size-xs) - 2 * var(--clc-input-padding-block-xs) - 2 * var(--clc-border-width));
  --clc-dropdown-trigger-icon-margin-inline: 0 var(--clc-input-padding-block-xs);
}

.clc-input-sm {
  --clc-input-height: var(--clc-input-size-sm);
  --clc-input-padding-block: var(--clc-input-padding-block-sm);
  --clc-input-padding-inline: var(--clc-input-padding-inline-sm);
  --clc-input-font-size: var(--clc-input-font-size-sm);
  --clc-input-line-height: calc(var(--clc-input-size-sm) - 2 * var(--clc-input-padding-block-sm) - 2 * var(--clc-border-width));
  --clc-dropdown-trigger-icon-margin-inline: 0 var(--clc-input-padding-block-sm);
}

.clc-input-md {
  --clc-input-height: var(--clc-input-size-md);
  --clc-input-padding-block: var(--clc-input-padding-block-md);
  --clc-input-padding-inline: var(--clc-input-padding-inline-md);
  --clc-input-font-size: var(--clc-input-font-size-md);
  --clc-input-line-height: calc(var(--clc-input-size-md) - 2 * var(--clc-input-padding-block-md) - 2 * var(--clc-border-width));
  --clc-dropdown-trigger-icon-margin-inline: 0 var(--clc-input-padding-block-md);
}

.clc-input-lg {
  --clc-input-height: var(--clc-input-size-lg);
  --clc-input-padding-block: var(--clc-input-padding-block-lg);
  --clc-input-padding-inline: var(--clc-input-padding-inline-lg);
  --clc-input-font-size: var(--clc-input-font-size-lg);
  --clc-input-line-height: calc(var(--clc-input-size-lg) - 2 * var(--clc-input-padding-block-lg) - 2 * var(--clc-border-width));
  --clc-dropdown-trigger-icon-margin-inline: 0 var(--clc-input-padding-block-lg);
}

.clc-form-field-content > *, .clc-form-field-content > .clc-autocomplete, .clc-form-field-content > .clc-autocomplete.clc-state-disabled > .clc-inputtext, .clc-form-field-content input, .clc-form-field-content .clc-inputtext, .clc-form-field-content .clc-inputtext.clc-state-disabled, .clc-form-field-content .clc-datepicker.clc-state-disabled > .clc-inputtext {
  box-shadow: none;
  background-color: transparent;
  --clc-input-hover-background-color: transparent;
  --clc-input-focus-background-color: transparent;
  outline: none;
  border: none;
}
.clc-form-field-content > :not(:disabled):not(.clc-state-disabled):hover, .clc-form-field-content input:not(:disabled):not(.clc-state-disabled):hover, .clc-form-field-content .clc-inputtext:not(:disabled):not(.clc-state-disabled):hover {
  border: none;
  box-shadow: none;
}
.clc-form-field-content > :not(:disabled):not(.clc-state-disabled):focus, .clc-form-field-content input:not(:disabled):not(.clc-state-disabled):focus, .clc-form-field-content .clc-inputtext:not(:disabled):not(.clc-state-disabled):focus {
  border: none;
  box-shadow: none;
}
.clc-form-field-content > :not(:disabled):not(.clc-state-disabled):focus-within, .clc-form-field-content input:not(:disabled):not(.clc-state-disabled):focus-within, .clc-form-field-content .clc-inputtext:not(:disabled):not(.clc-state-disabled):focus-within {
  border: none;
  box-shadow: none;
}

.clc-header {
  background-color: var(--clc-header-background-color);
  min-height: var(--clc-header-min-height);
  border-bottom: var(--clc-header-border);
  color: var(--clc-header-color);
  box-shadow: var(--clc-header-shadow);
}
.clc-header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--clc-header-z);
}
.clc-header a {
  text-decoration: none;
}

.clc-footer {
  padding: var(--clc-footer-padding);
  border-top: var(--clc-footer-border);
  background-color: var(--clc-footer-background-color);
  color: var(--clc-footer-color);
}
.clc-footer.fixed {
  position: fixed;
  z-index: var(--clc-footer-z);
  bottom: 0;
  left: 0;
  right: 0;
}

.clc-sidebar {
  background-color: var(--clc-sidebar-background-color);
  color: var(--clc-sidebar-color);
  position: fixed;
  overflow: auto;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: var(--clc-sidebar-z);
  width: var(--clc-sidebar-width);
  opacity: 1;
  transition: width var(--clc-transition), opacity var(--clc-transition);
}
.clc-sidebar.clc-sidebar-start {
  border-inline-end: var(--clc-sidebar-border-inline-end);
}
.clc-sidebar.clc-sidebar-left {
  border-right: var(--clc-sidebar-border-inline-end);
}
.clc-sidebar.clc-sidebar-end {
  border-inline-start: var(--clc-sidebar-border-inline-end);
}
.clc-sidebar.clc-sidebar-right {
  border-left: var(--clc-sidebar-border-inline-end);
}

@media (max-width: 768px) {
  .clc-sidebar-responsive {
    width: 0;
    opacity: 0;
  }
}
.clc-sidebar-expanded {
  width: var(--clc-sidebar-width);
  opacity: 1;
}

.clc-sidebar-collapsed {
  width: 0 !important;
  opacity: 0;
}

.clc-card {
  box-sizing: border-box;
  padding: var(--clc-card-padding);
  border-radius: var(--clc-card-border-radius);
  background-color: var(--clc-card-background-color);
}
.clc-card.clc-variant-filled {
  box-shadow: var(--clc-card-shadow);
}
.clc-card.clc-variant-flat {
  background-color: var(--clc-card-flat-background-color);
}
.clc-card.clc-variant-outlined {
  background: transparent;
  border: var(--clc-card-border);
}
.clc-card.clc-variant-text {
  background: transparent;
}
.clc-card > h1,
.clc-card > h2,
.clc-card > h3,
.clc-card > h4,
.clc-card > h5,
.clc-card > h6 {
  margin-bottom: var(--clc-card-heading-margin-bottom);
}
.clc-card > p {
  margin-bottom: 0;
}

.clc-card-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
}
.clc-card-group > .clc-card {
  flex: 1;
  border-radius: 0;
}
.clc-card-group > .clc-card:first-of-type {
  border-start-start-radius: var(--clc-card-border-radius);
  border-end-start-radius: var(--clc-card-border-radius);
}
.clc-card-group > .clc-card:last-of-type {
  border-start-end-radius: var(--clc-card-border-radius);
  border-end-end-radius: var(--clc-card-border-radius);
}
.clc-card-group > .clc-variant-outlined + .clc-variant-outlined {
  border-inline-start: 0;
}
.clc-card-group > .clc-variant-flat + .clc-variant-flat {
  margin-inline-start: var(--clc-border-width);
}
.clc-card-group > .clc-variant-text + .clc-variant-text {
  border-inline-start: var(--clc-card-border);
}

.clc-card-group > .clc-card:first-of-type,
.clc-card-group > .clc-card + .clc-card:not(:last-of-type) {
  clip-path: inset(-32px 0 -32px -32px);
}

*[dir=rtl] .clc-card-group > .clc-card:first-of-type,
*[dir=rtl] .clc-card-group > .clc-card + .clc-card:not(:last-of-type) {
  clip-path: inset(-32px -32px -32px 0);
}

@media (max-width: 576px) {
  .clc-card-group.clc-card-group-responsive {
    flex-direction: column;
  }
  .clc-card-group.clc-card-group-responsive > .clc-card {
    flex: 1;
    border-radius: 0;
  }
  .clc-card-group.clc-card-group-responsive > .clc-card:first-of-type {
    border-start-start-radius: var(--clc-card-border-radius);
    border-start-end-radius: var(--clc-card-border-radius);
  }
  .clc-card-group.clc-card-group-responsive > .clc-card:last-of-type {
    border-end-start-radius: var(--clc-card-border-radius);
    border-end-end-radius: var(--clc-card-border-radius);
  }
  .clc-card-group.clc-card-group-responsive > .clc-card {
    clip-path: none;
  }
  .clc-card-group.clc-card-group-responsive > .clc-card:first-of-type,
  .clc-card-group.clc-card-group-responsive > .clc-card + .clc-card:not(:last-of-type) {
    clip-path: inset(-32px -32px 0 -32px);
  }
  .clc-card-group.clc-card-group-responsive > .clc-variant-flat + .clc-variant-flat {
    margin: 0;
    margin-top: var(--clc-border-width);
  }
  .clc-card-group.clc-card-group-responsive > .clc-variant-outlined + .clc-variant-outlined {
    border-top: 0;
    border-inline-start: var(--clc-card-border);
  }
  .clc-card-group.clc-card-group-responsive > .clc-variant-text + .clc-variant-text {
    border: 0;
    border-top: var(--clc-card-border);
  }
}
.clc-body {
  margin: var(--clc-layout-body-margin);
  padding: var(--clc-layout-body-padding);
  border-radius: var(--clc-layout-body-border-radius);
  background-color: var(--clc-layout-body-background-color);
}
.clc-body:only-child {
  background-color: transparent;
}
.clc-layout .clc-body {
  transform: translateZ(0);
}

.clc-accordion {
  box-sizing: border-box;
  border-radius: var(--clc-accordion-border-radius);
  box-shadow: var(--clc-accordion-shadow);
  overflow: hidden;
}
.clc-accordion > div:first-child {
  border-radius: var(--clc-accordion-border-radius) var(--clc-accordion-border-radius) 0 0;
}
.clc-accordion > div:nth-last-child(2):has(+ .clc-state-collapsed), .clc-accordion > div:nth-last-child(2):has(+ .clc-state-collapsed) > div {
  border-radius: 0 0 var(--clc-accordion-border-radius) var(--clc-accordion-border-radius);
}
.clc-accordion > div:last-child .clc-accordion-content {
  border-radius: 0 0 var(--clc-accordion-border-radius) var(--clc-accordion-border-radius);
}
.clc-accordion > div:only-child {
  border-radius: var(--clc-accordion-border-radius);
}
.clc-accordion .clc-accordion-header {
  background-color: var(--clc-accordion-item-background-color);
  margin: var(--clc-accordion-item-margin);
}
.clc-accordion .clc-accordion-header:not(:first-child) {
  border-top: var(--clc-accordion-item-border);
}
.clc-accordion .clc-accordion-header > a,
.clc-accordion .clc-accordion-header > button {
  padding-block: var(--clc-accordion-item-padding-block);
  padding-inline: var(--clc-accordion-item-padding-inline);
  color: var(--clc-accordion-item-color);
  line-height: var(--clc-accordion-item-line-height);
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: var(--clc-accordion-item-font-size);
  font-weight: var(--clc-accordion-item-font-weight);
  cursor: pointer;
  background: none;
  border: none;
}
.clc-accordion .clc-accordion-header > a:focus, .clc-accordion .clc-accordion-header > a:focus-visible,
.clc-accordion .clc-accordion-header > button:focus,
.clc-accordion .clc-accordion-header > button:focus-visible {
  outline: none;
}
.clc-accordion .clc-accordion-header > a:hover,
.clc-accordion .clc-accordion-header > button:hover {
  color: var(--clc-accordion-hover-color);
}
.clc-accordion .clc-accordion-header > a span:not(.clc-accordion-toggle-icon),
.clc-accordion .clc-accordion-header > button span:not(.clc-accordion-toggle-icon) {
  flex-grow: 1;
}
.clc-accordion .clc-accordion-header > a > .clci,
.clc-accordion .clc-accordion-header > button > .clci {
  font-size: var(--clc-accordion-icon-font-size);
  margin-inline: var(--clc-accordion-icon-margin-inline);
}
.clc-accordion .clc-accordion-header:has(> a:focus-visible), .clc-accordion .clc-accordion-header:has(> button:focus-visible) {
  outline: var(--clc-accordion-item-focus-outline);
  outline-offset: var(--clc-accordion-item-focus-outline-offset);
}
.clc-accordion > .clc-expander {
  background-color: var(--clc-accordion-item-background-color);
}

.clc-accordion-toggle-icon {
  width: var(--clc-accordion-icon-width);
  height: var(--clc-accordion-icon-height);
  font-size: var(--clc-accordion-icon-font-size);
  order: var(--clc-accordion-toggle-icon-order);
}
.clc-accordion-toggle-icon.clci {
  margin-inline: var(--clc-accordion-toggle-icon-margin-inline);
}
.clc-accordion-toggle-icon.clc-state-expanded {
  transform: rotate(180deg);
  transition: transform var(--clc-transition);
}
.clc-accordion-toggle-icon.clc-state-collapsed {
  transform: rotate(0);
  transition: transform var(--clc-transition);
}

.clc-accordion-content {
  font-size: var(--clc-accordion-content-font-size);
  background-color: var(--clc-accordion-item-background-color);
  padding-block: var(--clc-accordion-content-padding-block);
  padding-inline: var(--clc-accordion-content-padding-inline);
}

/* Right-to-left toggle icons */
*[dir=rtl] .clc-accordion-toggle-icon.clci-chevron-right:before {
  content: "keyboard_arrow_down";
}
*[dir=rtl] .clc-accordion-toggle-icon.clci-chevron-down:before {
  content: "keyboard_arrow_up";
}

.clc-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--clc-panel-padding);
  background: var(--clc-panel-background-color);
  border-radius: var(--clc-panel-border-radius);
  box-shadow: var(--clc-panel-shadow);
}

.clc-panel-titlebar {
  display: flex;
  justify-content: space-between;
}

.clc-panel-content {
  margin: var(--clc-panel-content-margin);
}

.clc-panel-title {
  line-height: var(--clc-panel-title-line-height);
  font-weight: var(--clc-panel-title-font-weight);
}

.clc-panel-titlebar-toggler {
  width: var(--clc-panel-toggle-icon-width);
  height: var(--clc-panel-toggle-icon-height);
  font-size: var(--clc-panel-toggle-icon-font-size);
  border-radius: var(--clc-panel-toggle-icon-border-radius);
  background-color: var(--clc-panel-toggle-icon-background-color);
  border: none;
  padding: 0;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.clc-panel-titlebar-toggler:hover {
  text-decoration: none;
  color: var(--clc-panel-hover-color);
}
.clc-panel-titlebar-toggler:focus {
  outline: var(--clc-outline-normal);
}
.clc-panel-titlebar-toggler:focus-visible {
  outline: var(--clc-panel-toggle-icon-focus-outline);
  outline-offset: var(--clc-panel-toggle-icon-focus-outline-offset);
}
.clc-panel-titlebar-toggler .clci-minus:before {
  content: "remove";
}
.clc-panel-titlebar-toggler .clci-plus:before {
  content: "add";
}

.clc-sidebar-toggle {
  appearance: none;
  cursor: pointer;
  border: none;
  padding: var(--clc-sidebar-toggle-padding);
  margin-inline-end: var(--clc-sidebar-toggle-margin-inline-end);
  border-inline-end: var(--clc-sidebar-toggle-border);
  background-color: var(--clc-sidebar-toggle-background-color);
  color: var(--clc-sidebar-toggle-color);
}
.clc-justify-content-flex-end .clc-sidebar-toggle {
  border-inline-start: var(--clc-sidebar-toggle-border);
  border-inline-end: none;
}
.clc-sidebar-toggle:focus {
  outline: none;
}
.clc-sidebar-toggle:focus-visible {
  outline: var(--clc-sidebar-toggle-focus-outline);
  outline-offset: var(--clc-sidebar-toggle-focus-outline-offset);
}
.clc-sidebar-toggle:focus-visible, .clc-sidebar-toggle:hover {
  color: var(--clc-sidebar-toggle-hover-color);
  background: var(--clc-sidebar-toggle-hover-background-color);
  border-radius: var(--clc-sidebar-toggle-hover-border-radius);
}
.clc-sidebar-toggle .clci {
  width: var(--clc-sidebar-toggle-icon-width);
  height: var(--clc-sidebar-toggle-icon-height);
  font-size: var(--clc-sidebar-toggle-icon-width);
}

.clc-navigation-item-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}
.clc-navigation-item-link:hover {
  text-decoration: none;
}

.clc-navigation-item-text {
  flex: auto;
}

.clc-context-menu {
  box-sizing: border-box;
}
.clc-context-menu .clc-menu {
  flex-direction: column;
}

.clc-context-menu .clc-menu, .clc-context-menu .clc-navigation-menu {
  box-shadow: var(--clc-context-menu-box-shadow);
  border: var(--clc-menu-border);
  border-radius: var(--clc-menu-border-radius);
}

.clc-context-menu .clc-menu:not(.clc-profile-menu) {
  align-items: stretch;
  background-color: var(--clc-menu-background-color);
}
.clc-context-menu .clc-menu:not(.clc-profile-menu) .clc-navigation-item-link {
  color: var(--clc-menu-item-color);
}
.clc-context-menu .clc-menu:not(.clc-profile-menu) .clc-navigation-item-link .clci:not(.clc-navigation-item-icon-children) {
  color: var(--clc-menu-item-icon-color);
}
.clc-context-menu .clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper {
  border-radius: var(--clc-menu-item-border-radius);
}
.clc-context-menu .clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper .clc-navigation-item-link {
  padding-block: var(--clc-menu-item-padding-block);
  padding-inline: var(--clc-menu-item-padding-inline);
}
.clc-context-menu .clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper:hover {
  background-color: var(--clc-menu-item-hover-background-color);
}
.clc-context-menu .clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper:hover .clc-navigation-item-link {
  color: var(--clc-menu-item-hover-color);
}
.clc-context-menu .clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper:hover .clc-navigation-item-link .clci:not(.clc-navigation-item-icon-children) {
  color: var(--clc-menu-item-icon-hover-color);
}
.clc-context-menu .clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper-active {
  background-color: var(--clc-menu-item-selected-background-color);
}
.clc-context-menu .clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper-active .clc-navigation-item-link {
  color: var(--clc-menu-item-selected-color);
}
.clc-context-menu .clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper-active .clc-navigation-item-link .clci:not(.clc-navigation-item-icon-children) {
  color: var(--clc-menu-item-selected-color);
}
.clc-context-menu .clc-menu:not(.clc-profile-menu) > .clc-navigation-item > .clc-navigation-item-wrapper-active:before {
  display: none;
}

.clc-menu:not(.clc-profile-menu) {
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  background-color: var(--clc-menu-top-item-background-color);
}
.clc-context-menu .clc-menu:not(.clc-profile-menu) {
  padding-block: var(--clc-context-menu-padding-block);
  padding-inline: var(--clc-context-menu-padding-inline);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-link {
  padding-block: var(--clc-menu-top-item-padding-block);
  padding-inline: var(--clc-menu-top-item-padding-inline);
  color: var(--clc-menu-top-item-color);
  white-space: nowrap;
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-link .clci:not(.clc-navigation-item-icon-children) {
  color: var(--clc-menu-top-item-icon-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-link.active {
  color: var(--clc-menu-top-item-selected-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-link.active .clci:not(.clc-navigation-item-icon-children) {
  color: var(--clc-menu-top-item-selected-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-link .clc-navigation-item-icon-children.clc-state-expanded {
  transform: rotate(180deg);
  transition: transform var(--clc-expander-transition);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-link .clc-navigation-item-icon-children.clc-state-collapsed {
  transform: rotate(0);
  transition: transform var(--clc-expander-transition);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper {
  border-radius: var(--clc-menu-top-item-border-radius);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper:has(> .active) {
  background-color: var(--clc-menu-top-item-selected-background-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper:hover, .clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper:has(> .active):hover {
  background-color: var(--clc-menu-top-item-hover-background-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper:hover .clc-navigation-item-link, .clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper:has(> .active):hover .clc-navigation-item-link {
  color: var(--clc-menu-top-item-hover-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper:hover .clc-navigation-item-link .clci:not(.clc-navigation-item-icon-children), .clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper:has(> .active):hover .clc-navigation-item-link .clci:not(.clc-navigation-item-icon-children) {
  color: var(--clc-menu-top-item-icon-hover-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper-active {
  background-color: var(--clc-menu-top-item-selected-background-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper-active .clc-navigation-item-link {
  color: var(--clc-menu-top-item-selected-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper-active .clc-navigation-item-link .clci:not(.clc-navigation-item-icon-children) {
  color: var(--clc-menu-top-item-selected-color);
}
.clc-menu:not(.clc-profile-menu):focus {
  outline: var(--clc-outline-normal);
}
.clc-menu:not(.clc-profile-menu):focus-visible {
  outline: var(--clc-menu-item-focus-outline);
}
.clc-menu:not(.clc-profile-menu):focus-visible .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper {
  outline: var(--clc-menu-item-focus-outline);
  outline-offset: var(--clc-menu-item-focus-outline-offset);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item {
  position: relative;
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu {
  list-style: none;
  position: absolute;
  padding-block: var(--clc-context-menu-padding-block);
  padding-inline: var(--clc-context-menu-padding-inline);
  margin: 0;
  min-width: max-content;
  box-shadow: var(--clc-context-menu-box-shadow);
  z-index: 3;
  border-radius: var(--clc-menu-border-radius);
  background-color: var(--clc-menu-background-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-wrapper {
  border-radius: var(--clc-menu-item-border-radius);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-wrapper:has(> .active) {
  background-color: var(--clc-menu-item-selected-background-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-wrapper:hover, .clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-wrapper:has(> .active):hover {
  background-color: var(--clc-menu-item-hover-background-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-wrapper:hover .clc-navigation-item-link, .clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-wrapper:has(> .active):hover .clc-navigation-item-link {
  color: var(--clc-menu-item-hover-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-wrapper:hover .clc-navigation-item-link .clci:not(.clc-navigation-item-icon-children), .clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-wrapper:has(> .active):hover .clc-navigation-item-link .clci:not(.clc-navigation-item-icon-children) {
  color: var(--clc-menu-item-icon-hover-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-wrapper-active {
  background-color: var(--clc-menu-item-selected-background-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-wrapper-active .clc-navigation-item-link {
  color: var(--clc-menu-item-selected-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-wrapper-active .clc-navigation-item-link .clci:not(.clc-navigation-item-icon-children) {
  color: var(--clc-menu-item-selected-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-link {
  padding-block: var(--clc-menu-item-padding-block);
  padding-inline: var(--clc-menu-item-padding-inline);
  color: var(--clc-menu-item-color);
  white-space: nowrap;
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-link .clci:not(.clc-navigation-item-icon-children) {
  color: var(--clc-menu-item-icon-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-link.active {
  color: var(--clc-menu-item-selected-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-item-link.active .clci:not(.clc-navigation-item-icon-children) {
  color: var(--clc-menu-item-selected-color);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-menu {
  position: static;
  box-shadow: none;
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-menu .clc-navigation-item-link {
  margin-inline-start: var(--clc-menu-item-offset);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-menu .clc-navigation-menu .clc-navigation-item-link {
  margin-inline-start: calc(var(--clc-menu-item-offset) * 2);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-menu .clc-navigation-menu .clc-navigation-menu .clc-navigation-item-link {
  margin-inline-start: calc(var(--clc-menu-item-offset) * 3);
}
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-link .clci:not(.clc-navigation-item-icon-children) {
  margin-inline: var(--clc-menu-item-icon-margin-inline);
}

.clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-menu {
  overflow: visible;
}
.clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-menu {
  position: absolute;
  inset-inline-start: 100%;
  top: 0;
  box-shadow: var(--clc-context-menu-box-shadow);
  min-width: max-content;
  z-index: 4;
  background-color: var(--clc-menu-background-color);
  border-radius: var(--clc-menu-border-radius);
}
.clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-menu[data-flyout-flip] {
  inset-inline-start: auto;
  inset-inline-end: 100%;
}
.clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-menu .clc-navigation-item-link {
  margin-inline-start: 0;
}
.clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-menu .clc-navigation-item-text {
  flex: none;
}
.clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-menu .clc-navigation-menu .clc-navigation-item-link {
  margin-inline-start: 0;
}
.clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-menu .clc-navigation-menu .clc-navigation-menu .clc-navigation-item-link {
  margin-inline-start: 0;
}
.clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-item-link .clc-navigation-item-icon-children {
  transition: none;
}
.clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-item-link .clc-navigation-item-icon-children, .clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-item-link .clc-navigation-item-icon-children.clc-state-expanded, .clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-item-link .clc-navigation-item-icon-children.clc-state-collapsed {
  transform: none;
}

.clc-context-menu .clc-menu-flyout:not(.clc-profile-menu) > .clc-navigation-item > .clc-navigation-menu {
  inset-inline-start: 100%;
  top: 0;
  min-width: max-content;
  z-index: 4;
}
.clc-context-menu .clc-menu-flyout:not(.clc-profile-menu) > .clc-navigation-item > .clc-navigation-menu[data-flyout-flip] {
  inset-inline-start: auto;
  inset-inline-end: 100%;
}
.clc-context-menu .clc-menu-flyout:not(.clc-profile-menu) > .clc-navigation-item > .clc-navigation-menu .clc-navigation-item-link {
  margin-inline-start: 0;
}

*[dir=rtl] .clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-item-link .clc-navigation-item-icon-children, *[dir=rtl] .clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-item-link .clc-navigation-item-icon-children.clc-state-expanded, *[dir=rtl] .clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-item-link .clc-navigation-item-icon-children.clc-state-collapsed {
  transform: scaleX(-1);
}

.clc-navigation-item-wrapper,
.clc-navigation-item-link,
.clc-navigation-item-text {
  transition: var(--clc-menu-item-transition);
}

li.clc-navigation-item.clc-state-disabled {
  opacity: var(--clc-menu-item-disabled-opacity);
  cursor: initial;
  pointer-events: none;
}

.clc-menu-toggle-item {
  display: none;
  padding-block: var(--clc-menu-top-item-padding-block);
  padding-inline: var(--clc-menu-top-item-padding-inline);
  justify-content: end;
  align-items: center;
  width: 100%;
  height: 100%;
}

.clc-menu-toggle {
  appearance: none;
  background-color: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--clc-menu-top-item-color);
}
.clc-menu-toggle:hover {
  background-color: transparent;
  color: var(--clc-menu-top-item-hover-color);
}
.clc-menu-toggle:active {
  background-color: transparent;
  color: var(--clc-menu-top-item-color);
}
.clc-context-menu .clc-menu-toggle {
  color: var(--clc-menu-item-color);
}
.clc-context-menu .clc-menu-toggle:hover {
  color: var(--clc-menu-item-hover-color);
}
.clc-context-menu .clc-menu-toggle:active {
  color: var(--clc-menu-item-color);
}

@media (max-width: 768px) {
  .clc-menu:not(.clc-profile-menu).clc-menu-closed .clc-navigation-item {
    display: none;
  }
  .clc-menu:not(.clc-profile-menu) .clc-menu-toggle .clci {
    margin: 0;
  }
  .clc-menu:not(.clc-profile-menu).clc-menu-open {
    display: block;
  }
  .clc-menu:not(.clc-profile-menu).clc-menu-open .clc-navigation-item {
    background-color: inherit;
  }
  .clc-menu:not(.clc-profile-menu).clc-menu-open .clc-navigation-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
  }
  .clc-menu:not(.clc-profile-menu).clc-menu-flyout.clc-menu-open .clc-navigation-menu .clc-navigation-menu {
    position: static;
    box-shadow: none;
    inset-inline-start: auto;
    top: auto;
  }
  .clc-menu:not(.clc-profile-menu) .clc-menu-toggle-item {
    display: flex;
  }
  .clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper-active:before {
    display: none !important;
  }
}
.clc-panel-menu {
  box-sizing: border-box;
  list-style: none;
  padding-block: var(--clc-panel-menu-padding-block);
  padding-inline: var(--clc-panel-menu-padding-inline);
  margin-block-start: 0;
  margin-block-end: 0;
  overflow: auto;
  font-size: var(--clc-panel-menu-font-size);
  font-weight: var(--clc-panel-menu-font-weight);
  color: var(--clc-panel-menu-item-color);
  background-color: var(--clc-panel-menu-item-background-color);
  /* First level items */
  /* Stacked (NavigationRail) style - applies to first-level items only */
  /* Second level items */
}
.clc-panel-menu:focus {
  outline: var(--clc-outline-normal);
}
.clc-panel-menu:focus-visible .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper {
  outline: var(--clc-panel-menu-focus-outline);
  outline-offset: var(--clc-panel-menu-focus-outline-offset);
}
.clc-panel-menu > .clc-navigation-item {
  margin-block: var(--clc-panel-menu-item-margin-block);
  margin-inline: var(--clc-panel-menu-item-margin-inline);
}
.clc-panel-menu .clc-navigation-item {
  border-block-end: var(--clc-panel-menu-item-border);
  border-radius: var(--clc-panel-menu-item-border-radius);
  overflow: hidden;
  /* Do not show expand arrow if there are no child items */
}
.clc-panel-menu .clc-navigation-item:not(.clc-navigation-item-expandable):not(:has(> .clc-expander .clc-navigation-item)) > .clc-navigation-item-wrapper .clc-navigation-item-icon-children {
  display: none;
}
.clc-panel-menu .clc-navigation-item-wrapper {
  position: relative;
  line-height: var(--clc-panel-menu-item-line-height);
  transition: var(--clc-panel-menu-item-transition);
  border-radius: var(--clc-panel-menu-item-border-radius);
  overflow: hidden;
}
.clc-panel-menu .clc-navigation-item-wrapper:hover {
  background-color: var(--clc-panel-menu-item-hover-background-color);
  color: var(--clc-panel-menu-item-hover-color);
}
.clc-panel-menu .clc-navigation-item-wrapper:hover .clc-navigation-item-icon {
  color: var(--clc-panel-menu-item-hover-color);
}
.clc-panel-menu .clc-navigation-item-active,
.clc-panel-menu .clc-navigation-item-wrapper-active {
  background-color: var(--clc-panel-menu-item-active-background-color);
  color: var(--clc-panel-menu-item-active-color);
}
.clc-panel-menu .clc-navigation-item-active:before,
.clc-panel-menu .clc-navigation-item-wrapper-active:before {
  position: absolute;
  content: "";
  inset-block-start: 0;
  inset-block-end: 0;
  width: 4px;
  background-color: var(--clc-panel-menu-item-active-indicator);
}
.clc-panel-menu .clc-navigation-item-active .clc-navigation-item-icon,
.clc-panel-menu .clc-navigation-item-wrapper-active .clc-navigation-item-icon {
  color: var(--clc-panel-menu-item-active-color);
}
.clc-panel-menu .clc-navigation-item-link {
  padding-block: var(--clc-panel-menu-item-padding-block);
  padding-inline: var(--clc-panel-menu-item-padding-inline);
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.clc-panel-menu a.clc-navigation-item-link {
  cursor: pointer;
  text-decoration: none;
}
.clc-panel-menu .clc-navigation-item-text {
  flex: auto;
}
.clc-panel-menu .clc-navigation-item-icon-children {
  margin-inline-start: auto;
  font-size: var(--clc-panel-menu-toggle-icon-font-size);
  opacity: var(--clc-panel-menu-toggle-icon-opacity);
  z-index: 1;
}
.clc-panel-menu .clc-navigation-item-icon-children.clc-state-expanded {
  transform: rotate(180deg);
  transition: transform var(--clc-expander-transition);
}
.clc-panel-menu .clc-navigation-item-icon-children.clc-state-collapsed {
  transform: rotate(0);
  transition: transform var(--clc-expander-transition);
}
.clc-panel-menu .clc-navigation-item-icon {
  height: var(--clc-panel-menu-icon-height);
  width: var(--clc-panel-menu-icon-width);
  color: var(--clc-panel-menu-icon-color);
  margin-inline: var(--clc-panel-menu-icon-margin-inline);
  font-size: var(--clc-panel-menu-icon-font-size);
  transition: var(--clc-panel-menu-item-transition);
}
.clc-panel-menu.clc-panel-menu-stacked > .clc-navigation-item > .clc-navigation-item-wrapper .clc-navigation-item-link {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.clc-panel-menu.clc-panel-menu-stacked > .clc-navigation-item > .clc-navigation-item-wrapper .clc-navigation-item-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clc-panel-menu.clc-panel-menu-stacked > .clc-navigation-item > .clc-navigation-item-wrapper .clc-navigation-item-icon {
  margin-inline: 0;
}
.clc-panel-menu.clc-panel-menu-stacked > .clc-navigation-item > .clc-navigation-item-wrapper .clc-navigation-item-icon-children {
  position: absolute;
  inset-block-start: 0.25rem;
  inset-inline-end: 0.25rem;
  margin-inline-start: 0;
}
.clc-panel-menu .clc-navigation-menu {
  list-style: none;
  padding: 0;
  margin-block-end: 0;
  overflow: hidden;
  /* Third level items */
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-item-wrapper {
  margin-block: var(--clc-panel-menu-item-2nd-level-margin-block);
  margin-inline: var(--clc-panel-menu-item-2nd-level-margin-inline);
  border-radius: var(--clc-panel-menu-item-2nd-level-border-radius);
  background-color: var(--clc-panel-menu-item-2nd-level-background-color);
  overflow: hidden;
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-item-wrapper:hover {
  background-color: var(--clc-panel-menu-item-2nd-level-hover-background-color);
  color: var(--clc-panel-menu-item-2nd-level-hover-color);
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-item-wrapper:hover .clc-navigation-item-icon {
  color: var(--clc-panel-menu-item-2nd-level-hover-color);
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-item-active,
.clc-panel-menu .clc-navigation-menu .clc-navigation-item-wrapper-active {
  background-color: var(--clc-panel-menu-item-2nd-level-active-background-color);
  color: var(--clc-panel-menu-item-2nd-level-active-color);
  font-weight: var(--clc-panel-menu-item-2nd-level-active-font-weight);
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-item-active .clc-navigation-item-icon,
.clc-panel-menu .clc-navigation-menu .clc-navigation-item-wrapper-active .clc-navigation-item-icon {
  color: var(--clc-panel-menu-item-2nd-level-active-color);
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-item-icon {
  height: var(--clc-panel-menu-icon-2nd-level-icon-size);
  width: var(--clc-panel-menu-icon-2nd-level-icon-size);
  font-size: var(--clc-panel-menu-icon-2nd-level-icon-size);
  margin-inline: var(--clc-panel-menu-icon-2nd-level-margin-inline);
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-item {
  border-block-end: none;
  color: var(--clc-panel-menu-item-2nd-level-color);
  font-size: var(--clc-panel-menu-item-2nd-level-font-size);
  font-weight: var(--clc-panel-menu-item-2nd-level-font-weight);
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-item:first-child {
  margin-block-start: var(--clc-panel-menu-2nd-level-vertical-offset);
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-item:last-child {
  margin-block-end: var(--clc-panel-menu-2nd-level-vertical-offset);
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-item .clc-navigation-item-link {
  padding-block: var(--clc-panel-menu-item-2nd-level-padding-block);
  padding-inline: var(--clc-panel-menu-item-2nd-level-padding-inline);
  padding-inline-start: var(--clc-panel-menu-item-2nd-level-offset);
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-menu {
  margin: 0;
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-menu .clc-navigation-item-wrapper {
  color: var(--clc-panel-menu-item-3rd-level-color);
  background-color: var(--clc-panel-menu-item-3rd-level-background-color);
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-menu .clc-navigation-item-wrapper:hover {
  color: var(--clc-panel-menu-item-3rd-level-hover-color);
  background-color: var(--clc-panel-menu-item-3rd-level-hover-background-color);
}
.clc-panel-menu .clc-navigation-menu .clc-navigation-menu .clc-navigation-item-active,
.clc-panel-menu .clc-navigation-menu .clc-navigation-menu .clc-navigation-item-wrapper-active {
  background-color: var(--clc-panel-menu-item-3rd-level-active-background-color);
  color: var(--clc-panel-menu-item-3rd-level-active-color);
}

ul.clc-profile-menu {
  box-sizing: border-box;
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-block: var(--clc-profile-menu-padding-block);
  padding-inline: var(--clc-profile-menu-padding-inline);
  display: inline-block;
  background-color: var(--clc-profile-menu-top-item-background-color);
  border-inline-start: var(--clc-profile-menu-border);
  position: relative;
  z-index: 3;
}
ul.clc-profile-menu > .clc-navigation-item > [role=button]:focus {
  outline: var(--clc-outline-normal);
}
ul.clc-profile-menu > .clc-navigation-item > [role=button]:focus-visible {
  outline: var(--clc-menu-item-focus-outline);
}
ul.clc-profile-menu:focus-within .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper {
  outline: var(--clc-profile-menu-item-focus-outline);
  outline-offset: var(--clc-profile-menu-item-focus-outline-offset);
}
ul.clc-profile-menu .clc-navigation-menu:focus {
  outline: none;
}
ul.clc-profile-menu .clc-navigation-item-icon-children {
  color: var(--clc-profile-menu-toggle-button-color);
}
ul.clc-profile-menu .clc-navigation-item-icon-children.clc-state-expanded {
  transform: rotate(180deg);
  transition: transform var(--clc-expander-transition);
}
ul.clc-profile-menu .clc-navigation-item-icon-children.clc-state-collapsed {
  transform: rotate(0);
  transition: transform var(--clc-expander-transition);
}
ul.clc-profile-menu .clc-navigation-menu {
  list-style: none;
  overflow: hidden;
  position: absolute;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-block: var(--clc-context-menu-padding-block);
  padding-inline: var(--clc-context-menu-padding-inline);
  border-radius: var(--clc-profile-menu-border-radius);
  background-color: var(--clc-profile-menu-background-color);
  box-shadow: var(--clc-context-menu-box-shadow);
  text-align: start;
  inset-block-start: calc(100% - 2px);
  inset-inline-end: 0;
  min-width: 100%;
  white-space: nowrap;
}
ul.clc-profile-menu .clc-navigation-menu .clc-navigation-item-wrapper .clc-navigation-item-link {
  padding-block: var(--clc-menu-item-padding-block);
  padding-inline: var(--clc-menu-item-padding-inline);
}
ul.clc-profile-menu .clc-navigation-menu .clc-navigation-item-wrapper:hover {
  background-color: var(--clc-profile-menu-item-hover-background-color);
  color: var(--clc-menu-item-hover-color);
}
ul.clc-profile-menu .clc-navigation-menu .clc-navigation-item-wrapper:hover .clc-navigation-item-link {
  color: var(--clc-menu-item-hover-color);
}
ul.clc-profile-menu .clc-navigation-menu .clc-navigation-item-wrapper:hover .clc-navigation-item-text {
  color: var(--clc-menu-item-hover-color);
}
ul.clc-profile-menu .clc-navigation-menu .clc-navigation-item-link,
ul.clc-profile-menu .clc-navigation-menu .clc-navigation-item-text {
  color: var(--clc-menu-item-color);
}
ul.clc-profile-menu .clc-navigation-menu .clci {
  width: var(--clc-profile-menu-item-icon-width);
  height: var(--clc-profile-menu-item-icon-height);
  font-size: var(--clc-profile-menu-item-icon-font-size);
  margin-inline: var(--clc-profile-menu-item-icon-margin-inline);
}

.clc-gravatar {
  box-sizing: border-box;
  width: var(--clc-gravatar-width);
  height: var(--clc-gravatar-height);
  display: inline-block;
  border-radius: var(--clc-gravatar-border-radius);
  box-shadow: var(--clc-gravatar-box-shadow);
}

.clc-steps {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.clc-steps .clc-widget-content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.clc-steps ul {
  list-style: none;
  padding: 0;
}
.clc-steps .clc-menuitem-link {
  display: inline-flex;
  align-items: center;
  color: var(--clc-steps-color);
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}
.clc-steps .clc-menuitem-link:hover {
  text-decoration: none;
  color: var(--clc-steps-title-selected-color) !important;
}
.clc-steps .clc-menuitem-link:focus {
  outline: var(--clc-outline-normal);
}
.clc-steps .clc-menuitem-link:focus-visible {
  outline: var(--clc-outline-normal);
}
.clc-steps .clc-menuitem-link:focus-visible .clc-steps-number {
  outline: var(--clc-steps-number-focus-outline);
  outline-offset: var(--clc-steps-number-focus-outline-offset);
}
.clc-steps .clc-state-disabled .clc-menuitem-link {
  color: var(--clc-text-disabled-color);
  cursor: default;
}
.clc-steps .clc-state-disabled .clc-menuitem-link:hover {
  color: var(--clc-text-disabled-color) !important;
}
.clc-steps .clc-state-highlight .clc-steps-title {
  color: var(--clc-steps-title-selected-color);
}
.clc-steps .clc-state-highlight .clc-steps-number {
  background: var(--clc-steps-number-selected-background);
  color: var(--clc-steps-number-selected-color);
}

.clc-steps-item {
  display: inline-block;
}

.clc-steps-title {
  margin-block: var(--clc-steps-title-margin-block);
  margin-inline: var(--clc-steps-title-margin-inline);
}

.clc-steps-number {
  text-align: center;
  line-height: var(--clc-steps-number-line-height);
  color: var(--clc-steps-number-color);
  padding-block: var(--clc-steps-number-padding-block);
  padding-inline: var(--clc-steps-number-padding-inline);
  width: var(--clc-steps-number-width);
  height: var(--clc-steps-number-height);
  background-color: var(--clc-steps-number-background-color);
  border-radius: var(--clc-steps-number-border-radius);
}

.clc-steps-buttons {
  display: flex;
  justify-content: space-between;
  padding-block: var(--clc-steps-buttons-padding-block);
  padding-inline: var(--clc-steps-buttons-padding-inline);
}

.clc-steps-next,
.clc-steps-prev {
  display: inline-flex;
  align-items: center;
  color: var(--clc-steps-button-color) !important;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}
.clc-steps-next:not(.clc-state-disabled):hover,
.clc-steps-prev:not(.clc-state-disabled):hover {
  cursor: pointer;
  color: var(--clc-steps-title-selected-color) !important;
}
.clc-steps-next:hover,
.clc-steps-prev:hover {
  text-decoration: none;
}
.clc-steps-next.clc-state-disabled,
.clc-steps-prev.clc-state-disabled {
  opacity: 0.5 !important;
}

.clc-steps-prev .clci:before {
  content: "navigate_before";
}

.clc-steps-next .clci:before {
  content: "navigate_next";
}

@keyframes clc-steps-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes clc-steps-slide-in {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.clc-steps-fade {
  animation: clc-steps-fade-in var(--clc-steps-transition-duration, 300ms) ease-out;
}

.clc-steps-slide {
  animation: clc-steps-slide-in var(--clc-steps-transition-duration, 300ms) ease-out;
}

*[dir=rtl] .clc-steps-prev .clci:before {
  content: "navigate_next";
}
*[dir=rtl] .clc-steps-next .clci:before {
  content: "navigate_before";
}
@keyframes clc-steps-slide-in {
  from {
    opacity: 0;
    transform: translateX(-1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.clc-textarea {
  padding-block: var(--clc-text-area-padding-block);
  padding-inline: var(--clc-text-area-padding-inline);
  height: auto;
}

.clc-checkbox-list {
  box-sizing: border-box;
  border-radius: var(--clc-border-radius);
}
.clc-checkbox-list .clc-checkbox {
  display: inline-flex;
  align-items: center;
  margin-block: var(--clc-checkbox-margin-block);
  margin-inline: var(--clc-checkbox-margin-inline);
  cursor: pointer;
}
.clc-checkbox-list:focus {
  outline: var(--clc-outline-normal);
}
.clc-checkbox-list:focus-visible {
  outline: var(--clc-checkbox-focus-outline);
  outline-offset: var(--clc-checkbox-focus-outline-offset);
}

.clc-checkbox-list-horizontal {
  --clc-gap: 0;
}

.clc-checkbox-list-vertical {
  --clc-gap: 1rem;
}

.clc-state-disabled .clc-checkbox {
  cursor: initial;
}

.clc-chkbox-label,
.clc-chkbox-template {
  margin-block: var(--clc-checkbox-label-margin-block);
  margin-inline: var(--clc-checkbox-label-margin-inline);
}

button.clc-chkbox-label {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.clc-chkbox {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: var(--clc-checkbox-width);
  min-width: var(--clc-checkbox-width);
  height: var(--clc-checkbox-height);
  border-radius: var(--clc-checkbox-border-radius);
}

.clc-chkbox-box {
  position: absolute;
  cursor: pointer;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--clc-input-border-block-end);
  border-width: var(--clc-checkbox-border-width);
  border-radius: var(--clc-checkbox-border-radius);
  box-shadow: var(--clc-input-shadow);
  background-color: var(--clc-input-background-color);
  transition: var(--clc-transition-all);
}
.clc-chkbox-box:hover:not(.clc-state-disabled) {
  box-shadow: var(--clc-input-hover-shadow);
  background-color: var(--clc-input-hover-background-color);
  border: var(--clc-input-hover-border);
  border-width: var(--clc-checkbox-border-width);
}
.clc-chkbox-box.clc-state-disabled {
  cursor: initial;
  color: var(--clc-input-disabled-color);
  box-shadow: var(--clc-input-disabled-shadow);
  background-color: var(--clc-input-disabled-background-color);
  border: var(--clc-input-disabled-border);
  border-width: var(--clc-checkbox-border-width);
  opacity: var(--clc-input-disabled-opacity);
}
.clc-chkbox-box .clci {
  width: var(--clc-checkbox-icon-width);
  height: var(--clc-checkbox-icon-height);
  font-size: var(--clc-checkbox-icon-font-size);
  color: var(--clc-checkbox-checked-color);
  vertical-align: middle;
  background-color: var(--clc-checkbox-checked-icon-background-color);
  border-radius: var(--clc-checkbox-checked-icon-border-radius);
}
.clc-chkbox-box .clci-check:before {
  content: "check";
}
.clc-chkbox-box .clci-times {
  width: var(--clc-checkbox-tri-icon-width);
  height: var(--clc-checkbox-tri-icon-height);
  font-size: var(--clc-checkbox-tri-icon-font-size);
}
.clc-chkbox-box .clci-times:before {
  content: "remove";
}
.clc-chkbox-box.clc-state-active {
  background-color: var(--clc-checkbox-checked-background-color);
  border: var(--clc-checkbox-checked-border);
}
.clc-chkbox-box.clc-state-active:hover:not(.clc-state-disabled) {
  background-color: var(--clc-checkbox-checked-hover-background-color);
  border: var(--clc-checkbox-checked-hover-border);
}
.clc-chkbox-box.clc-state-active.clc-state-disabled {
  background-color: var(--clc-checkbox-checked-disabled-background-color);
  border: var(--clc-checkbox-checked-disabled-border);
  opacity: 0.5;
}
:focus-visible .clc-chkbox-box.clc-state-focused:not(.clc-state-disabled) {
  outline: var(--clc-checkbox-focus-outline);
  outline-offset: var(--clc-checkbox-focus-outline-offset);
}

.clc-switch {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 3.25rem;
  min-width: 3.25rem;
  height: 2rem;
  border-radius: calc(5 * var(--clc-border-radius));
}
.clc-switch:focus-within {
  outline: var(--clc-outline-normal);
}
.clc-switch:has(:focus-visible) {
  outline: var(--clc-switch-focus-outline);
  outline-offset: var(--clc-switch-focus-outline-offset);
}

.clc-switch-circle {
  position: absolute;
  cursor: pointer;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
}

.clc-switch-circle.clc-disabled {
  opacity: 0.5;
  cursor: initial;
}

.clc-switch-circle.clc-readonly {
  cursor: initial;
}

.clc-switch .clc-switch-circle {
  background: var(--clc-switch-background-color);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  border-radius: calc(5 * var(--clc-border-radius));
}

.clc-switch.clc-switch-checked .clc-switch-circle {
  background: var(--clc-switch-checked-background-color);
}

.clc-switch .clc-switch-circle:before {
  background: var(--clc-switch-circle-background-color);
  width: 1rem;
  height: 1rem;
  inset-inline-start: 0.5rem;
  margin-block-start: -0.5rem;
  border-radius: calc(5 * var(--clc-border-radius) - 3px);
  transition: transform 0.2s linear;
  box-shadow: var(--clc-switch-box-shadow);
}

.clc-switch-circle:before {
  position: absolute;
  content: "";
  inset-block-start: 50%;
}

.clc-switch-circle.clc-disabled:before {
  box-shadow: none;
}

.clc-switch.clc-switch-checked .clc-switch-circle:before {
  background: var(--clc-switch-checked-circle-background-color);
  transform: translateX(1.25rem);
}

*[dir=rtl] .clc-switch.clc-switch-checked .clc-switch-circle:before {
  transform: translateX(-1.25rem);
}

.clc-radio-button-list {
  box-sizing: border-box;
  border-radius: var(--clc-border-radius);
}
.clc-radio-button-list .clc-radio-btn {
  display: inline-flex;
  align-items: center;
  margin-block: var(--clc-radio-margin-block);
  margin-inline: var(--clc-radio-margin-inline);
  cursor: pointer;
}
.clc-radio-button-list .clc-radio-btn.clc-state-disabled {
  cursor: initial;
}
.clc-radio-button-list:focus {
  outline: var(--clc-outline-normal);
}
.clc-radio-button-list:focus-visible {
  outline: var(--clc-radio-focus-outline);
  outline-offset: var(--clc-radio-focus-outline-offset);
}

.clc-radio-button-list-horizontal {
  --clc-gap: 0;
}

.clc-radio-button-list-vertical {
  --clc-gap: 1rem;
}

.clc-state-disabled .clc-radiobutton {
  cursor: initial;
}

.clc-radiobutton-label,
.clc-radiobutton-template {
  margin-block: var(--clc-radio-label-margin-block);
  margin-inline: var(--clc-radio-label-margin-inline);
}
.clc-radiobutton-label.clc-state-disabled,
.clc-radiobutton-template.clc-state-disabled {
  cursor: initial;
  opacity: 0.5;
}

.clc-radiobutton {
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  width: var(--clc-radio-width);
  height: var(--clc-radio-height);
  border-radius: var(--clc-radio-border-radius);
}

.clc-radiobutton-box {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: inherit;
  border: var(--clc-input-border-block-end);
  border-width: var(--clc-radio-border-width);
  border-radius: var(--clc-radio-border-radius);
  box-shadow: var(--clc-input-shadow);
  background-color: var(--clc-input-background-color);
  transition: var(--clc-transition-all);
}
.clc-radiobutton-box:hover:not(.clc-state-disabled) {
  box-shadow: var(--clc-input-hover-shadow);
  background-color: var(--clc-input-hover-background-color);
  border: var(--clc-input-hover-border);
  border-width: var(--clc-radio-border-width);
}
.clc-radiobutton-box:active:not(.clc-state-disabled) {
  background-color: var(--clc-radio-active-background-color);
  box-shadow: var(--clc-radio-active-shadow);
  border-width: var(--clc-radio-border-width);
}
.clc-radiobutton-box.clc-state-disabled {
  cursor: initial;
  box-shadow: var(--clc-input-disabled-shadow);
  background-color: var(--clc-input-disabled-background-color);
  border: var(--clc-input-disabled-border);
  border-width: var(--clc-radio-border-width);
  opacity: var(--clc-input-disabled-opacity);
}
.clc-radiobutton-box .clci {
  width: var(--clc-radio-icon-width);
  height: var(--clc-radio-icon-height);
  color: var(--clc-radio-checked-color);
}
.clc-radiobutton-box .clci-circle-on {
  border-radius: var(--clc-radio-border-radius);
  vertical-align: middle;
  background-color: var(--clc-radio-circle-background-color);
  box-shadow: var(--clc-radio-circle-shadow);
}
.clc-radiobutton-box .clci-circle-on:hover:not(.clc-state-disabled) {
  background-color: var(--clc-radio-circle-hover-background-color);
}
.clc-radiobutton-box.clc-state-active {
  background-color: var(--clc-radio-checked-background-color);
  border: var(--clc-radio-checked-border);
  border-width: var(--clc-radio-border-width);
}
.clc-radiobutton-box.clc-state-active:hover:not(.clc-state-disabled) {
  background-color: var(--clc-radio-checked-hover-background-color);
  border: var(--clc-radio-checked-border);
  box-shadow: var(--clc-radio-checked-hover-shadow);
  border-width: var(--clc-radio-border-width);
}
.clc-radiobutton-box.clc-state-active.clc-state-disabled {
  background-color: var(--clc-radio-checked-background-color);
  border: var(--clc-radio-checked-border);
  border-width: var(--clc-radio-border-width);
  opacity: 0.5;
}
.clc-radio-button-list:focus-visible .clc-radiobutton-box.clc-state-focused:not(.clc-state-disabled) {
  outline: var(--clc-radio-focus-outline);
  outline-offset: var(--clc-radio-focus-outline-offset);
}

.clc-fieldset {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-width: 0;
  border: var(--clc-fieldset-border);
  border-radius: var(--clc-fieldset-border-radius);
}

.clc-fieldset-content {
  padding: var(--clc-fieldset-padding);
}

.clc-fieldset-content-wrapper {
  overflow: hidden;
}

.clc-fieldset-legend-text {
  vertical-align: middle;
}

.clc-fieldset-toggler {
  vertical-align: middle;
  width: var(--clc-fieldset-toggle-width);
  height: var(--clc-fieldset-toggle-height);
  background-color: var(--clc-fieldset-toggle-background-color);
  color: var(--clc-fieldset-toggle-color);
  border: var(--clc-fieldset-toggle-border);
}
.clc-fieldset-toggler.clci {
  text-align: center;
  font-size: var(--clc-fieldset-toggle-font-size);
  line-height: var(--clc-fieldset-toggle-height);
  margin-block: var(--clc-fieldset-toggle-margin-block);
  margin-inline: var(--clc-fieldset-toggle-margin-inline);
}
.clc-fieldset-toggler.clci-minus:before {
  content: "remove";
}
.clc-fieldset-toggler.clci-plus:before {
  content: "add";
}
button:focus .clc-fieldset-toggler {
  outline: var(--clc-outline-normal);
}
button:focus-visible .clc-fieldset-toggler {
  outline: var(--clc-fieldset-toggle-focus-outline);
  outline-offset: var(--clc-fieldset-toggle-focus-outline-offset);
}

.clc-fieldset-legend {
  float: none;
  margin-block: var(--clc-fieldset-legend-margin-block);
  margin-inline: var(--clc-fieldset-legend-margin-inline);
  padding-block: var(--clc-fieldset-legend-padding-block);
  padding-inline: var(--clc-fieldset-legend-padding-inline);
  width: auto;
  color: var(--clc-fieldset-legend-color);
  font-size: var(--clc-fieldset-legend-font-size);
}
.clc-fieldset-legend button {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}
.clc-fieldset-legend button:focus {
  outline: var(--clc-outline-normal);
}

.clc-multiselect, .clc-dropdown {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  text-align: start;
}
.clc-multiselect .clc-placeholder, .clc-dropdown .clc-placeholder {
  color: var(--clc-input-placeholder-color);
}

.clc-dropdown.clc-dropdown-open {
  background-color: var(--clc-dropdown-open-background-color);
  border: var(--clc-dropdown-open-border);
}

.clc-multiselect.clc-state-focus {
  background-color: var(--clc-dropdown-open-background-color);
  border: var(--clc-dropdown-open-border);
}

.clc-multiselect-trigger, .clc-dropdown-trigger {
  position: absolute;
  display: flex;
  align-items: center;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
}
.clc-multiselect-trigger .clci, .clc-dropdown-trigger .clci {
  width: var(--clc-dropdown-trigger-icon-width);
  height: var(--clc-dropdown-trigger-icon-height);
  font-size: var(--clc-dropdown-trigger-icon-height);
  margin-block: var(--clc-dropdown-trigger-icon-margin-block);
  margin-inline: var(--clc-dropdown-trigger-icon-margin-inline);
}
.clc-multiselect-trigger .clci-chevron-down:before, .clc-dropdown-trigger .clci-chevron-down:before {
  content: "arrow_drop_down";
}

.clc-dropdown-clear-icon {
  position: absolute;
  inset-inline-end: calc(var(--clc-dropdown-trigger-icon-width) + 0.5rem);
  inset-block-start: 0;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: var(--clc-dropdown-trigger-icon-height);
  color: inherit;
  opacity: 0.4;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.clc-dropdown-clear-icon:before {
  content: "close";
}
.clc-dropdown-clear-icon:hover {
  opacity: 1;
}
.clc-state-disabled > .clc-dropdown-clear-icon {
  display: none;
}

.clc-spreadsheet-highlight-popup, .clc-splitbutton-menu, .clc-autocomplete-panel, .clc-multiselect-panel, .clc-dropdown-panel {
  position: absolute;
  background-color: var(--clc-dropdown-open-background-color);
  border-radius: var(--clc-input-border-radius);
  border: var(--clc-dropdown-panel-border);
  box-shadow: var(--clc-dropdown-panel-shadow);
}

.clc-dropdown-panel {
  box-sizing: content-box;
  padding: var(--clc-dropdown-panel-padding);
}

.clc-multiselect-panel {
  box-sizing: content-box;
  padding: var(--clc-dropdown-panel-padding);
}
.clc-multiselect-panel .clc-chkbox {
  margin-block: var(--clc-multiselect-checkbox-margin-block);
  margin-inline: var(--clc-multiselect-checkbox-margin-inline);
}

.clc-autocomplete-items, .clc-multiselect-items, .clc-dropdown-items {
  list-style: none;
  padding: var(--clc-dropdown-items-padding);
  margin: 0;
}
.clc-autocomplete-items li, .clc-multiselect-items li, .clc-dropdown-items li {
  /* The 'No results found' item has no CSS class */
}

.clc-dropdown-items-wrapper,
.clc-multiselect-items-wrapper {
  overflow: auto;
  margin: var(--clc-dropdown-items-margin);
  border-radius: var(--clc-input-border-radius);
}

.clc-multiselect-items-wrapper {
  overflow: auto;
}

.clc-dropdown-filter-container {
  padding: var(--clc-dropdown-filter-padding);
  border-bottom: var(--clc-dropdown-filter-border);
}

.clc-multiselect-filter-container .clc-inputtext, .clc-dropdown-filter {
  background-color: transparent;
  color: var(--clc-text-color);
  font-family: inherit;
}

.clc-multiselect-header {
  display: flex;
  align-items: center;
  padding: var(--clc-dropdown-item-padding);
  margin: var(--clc-dropdown-items-margin);
}

.clc-multiselect-selectall {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.clc-menuitem, .clc-autocomplete-list-item, .clc-multiselect-item, .clc-autocomplete-items li, .clc-dropdown-items li, .clc-multiselect-items li, .clc-dropdown-item {
  padding: var(--clc-dropdown-item-padding);
  transition: var(--clc-dropdown-item-transition);
  cursor: default;
  font-size: var(--clc-dropdown-item-font-size);
}
.clc-state-highlight.clc-menuitem, .clc-state-highlight.clc-autocomplete-list-item, .clc-state-highlight.clc-multiselect-item, .clc-autocomplete-items li.clc-state-highlight, .clc-dropdown-items li.clc-state-highlight, .clc-multiselect-items li.clc-state-highlight, .clc-dropdown-item.clc-state-highlight {
  background-color: var(--clc-dropdown-item-selected-background-color);
  color: var(--clc-dropdown-item-selected-color);
  box-shadow: var(--clc-dropdown-item-selected-shadow);
  border-radius: 0;
}
.clc-state-highlight.clc-menuitem:hover, .clc-state-highlight.clc-autocomplete-list-item:hover, .clc-state-highlight.clc-multiselect-item:hover, .clc-autocomplete-items li.clc-state-highlight:hover, .clc-dropdown-items li.clc-state-highlight:hover, .clc-multiselect-items li.clc-state-highlight:hover, .clc-dropdown-item.clc-state-highlight:hover {
  background-color: var(--clc-dropdown-item-selected-hover-background-color);
  color: var(--clc-dropdown-item-selected-hover-color);
}
.clc-state-disabled.clc-menuitem, .clc-state-disabled.clc-autocomplete-list-item, .clc-state-disabled.clc-multiselect-item, .clc-autocomplete-items li.clc-state-disabled, .clc-dropdown-items li.clc-state-disabled, .clc-multiselect-items li.clc-state-disabled, .clc-dropdown-item.clc-state-disabled {
  opacity: var(--clc-dropdown-item-disabled-opacity);
  cursor: initial;
}
.clc-menuitem:hover, .clc-autocomplete-list-item:hover, .clc-multiselect-item:hover, .clc-autocomplete-items li:hover, .clc-dropdown-items li:hover, .clc-multiselect-items li:hover, .clc-dropdown-item:hover {
  background-color: var(--clc-dropdown-item-hover-background-color);
  color: var(--clc-dropdown-item-hover-color);
  border-radius: 0;
}

.clc-multiselect-close {
  display: none;
  background: none;
  border: none;
  padding: 0;
}

.clc-multiselect-filter-container {
  flex: auto;
  border-bottom: var(--clc-dropdown-filter-border);
}
.clc-multiselect-filter-container .clc-inputtext {
  padding: 0;
}

.clc-multiselect-item {
  display: flex;
  align-items: center;
}

.clc-multiselect-item-content {
  flex: 1;
}

.clc-multiselect-label-container,
.clc-dropdown-label {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-block: var(--clc-dropdown-label-padding-block);
  padding-inline: var(--clc-dropdown-label-padding-inline);
  margin: 0;
}

.clc-dropdown-chips {
  height: inherit;
  padding-block: var(--clc-dropdown-chips-padding-block);
  padding-inline: var(--clc-dropdown-chips-padding-inline);
}
.clc-dropdown-chips .clc-dropdown-chips-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-inline-end: 3rem;
}

.clc-clear .clc-multiselect-label-container,
.clc-clear .clc-dropdown-label {
  padding-inline-end: calc(2 * var(--clc-dropdown-trigger-icon-width));
}

.clc-input-xs {
  --clc-dropdown-item-padding: var(--clc-input-padding-block-sm) var(--clc-input-padding-inline-xs);
  --clc-dropdown-item-font-size: var(--clc-input-font-size-xs);
}

.clc-input-sm {
  --clc-dropdown-item-padding: var(--clc-input-padding-block-sm) var(--clc-input-padding-inline-sm);
  --clc-dropdown-item-font-size: var(--clc-input-font-size-sm);
}

.clc-input-lg {
  --clc-dropdown-item-padding: var(--clc-input-padding-block-lg) var(--clc-input-padding-inline-lg);
  --clc-dropdown-item-font-size: var(--clc-input-font-size-lg);
}

.clc-autocomplete {
  box-sizing: border-box;
  display: inline-block;
  border: var(--clc-input-border);
  border-radius: var(--clc-input-border-radius);
  background-color: var(--clc-input-background-color);
  transition: var(--clc-input-transition);
  overflow: hidden;
}
.clc-autocomplete-input {
  padding-block: var(--clc-input-padding-block);
  padding-inline: var(--clc-input-padding-inline);
  background-color: transparent;
  color: var(--clc-input-value-color);
  font-family: inherit;
  box-shadow: var(--clc-input-shadow);
  border: none;
  height: var(--clc-input-height);
  line-height: var(--clc-input-line-height);
  width: 100%;
  transition: var(--clc-input-transition);
}
.clc-autocomplete-input:focus {
  outline: none;
}
.clc-autocomplete-input:disabled {
  border: none;
}

.clc-autocomplete-panel {
  overflow: auto;
  box-sizing: content-box;
}

.clc-listbox {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--clc-listbox-background-color);
  border: var(--clc-listbox-border);
  border-radius: var(--clc-listbox-border-radius);
  text-align: start;
}
.clc-listbox .clc-chkbox {
  margin-block: var(--clc-listbox-checkbox-margin-block);
  margin-inline: var(--clc-listbox-checkbox-margin-inline);
}
.clc-listbox:not(.clc-state-disabled) .clc-listbox-item:hover:hover {
  background-color: var(--clc-dropdown-item-hover-background-color);
  color: var(--clc-dropdown-item-hover-color);
  border-radius: 0;
}
.clc-listbox:focus, .clc-listbox:focus-within {
  outline: var(--clc-outline-normal);
  border: var(--clc-listbox-focus-border);
  box-shadow: var(--clc-listbox-focus-shadow);
}

.clc-listbox-list {
  margin: 0;
  padding: 0;
}
.clc-listbox-list:focus {
  outline: none;
}

.clc-listbox-item {
  cursor: default;
  padding: var(--clc-listbox-item-padding);
  margin: var(--clc-listbox-item-margin);
  cursor: default;
  font-size: var(--clc-dropdown-item-font-size);
}
.clc-listbox-item.clc-state-highlight {
  background-color: var(--clc-dropdown-item-selected-background-color);
  color: var(--clc-dropdown-item-selected-color);
  box-shadow: var(--clc-dropdown-item-selected-shadow);
  border-radius: 0;
}
.clc-listbox-item.clc-state-highlight:hover {
  background-color: var(--clc-dropdown-item-selected-hover-background-color);
  color: var(--clc-dropdown-item-selected-hover-color);
}
.clc-listbox-item.clc-state-disabled {
  opacity: var(--clc-dropdown-item-disabled-opacity);
  cursor: initial;
}

.clc-listbox-header {
  display: flex;
  align-items: center;
  padding-block: var(--clc-listbox-header-padding-block);
  padding-inline: var(--clc-listbox-header-padding-inline);
  border-bottom: var(--clc-listbox-filter-border);
}

.clc-listbox-list-wrapper {
  flex: auto;
  overflow: auto;
  padding: var(--clc-listbox-padding);
}

.clc-listbox-empty-message {
  padding: var(--clc-listbox-item-padding);
  text-align: center;
  color: var(--clc-text-disabled-color);
}
.clc-listbox-empty-message p {
  margin: 0;
}

.clc-listbox-filter-container, .clc-dropdown-filter-container, .clc-multiselect-filter-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.clc-listbox-filter-container .clc-inputtext, .clc-dropdown-filter-container .clc-inputtext, .clc-multiselect-filter-container .clc-inputtext {
  flex: auto;
  width: 0;
  border: none;
  line-height: var(--clc-input-line-height);
  font-family: inherit;
}
.clc-listbox-filter-container .clc-inputtext:focus, .clc-dropdown-filter-container .clc-inputtext:focus, .clc-multiselect-filter-container .clc-inputtext:focus {
  outline: none;
}
.clc-listbox-filter-container .clci-search, .clc-dropdown-filter-container .clci-search, .clc-multiselect-filter-container .clci-search {
  width: var(--clc-listbox-header-icon-width);
  height: var(--clc-listbox-header-icon-height);
  line-height: var(--clc-listbox-header-icon-height);
  font-size: var(--clc-listbox-header-icon-height);
}
.clc-listbox-filter-container .clci-search:before, .clc-dropdown-filter-container .clci-search:before, .clc-multiselect-filter-container .clci-search:before {
  content: "search";
}

.clc-listbox-filter-container {
  flex: auto;
}
.clc-listbox-filter-container .clc-inputtext {
  background-color: transparent;
}

.clc-splitbutton {
  box-sizing: border-box;
  display: inline-flex;
  border-radius: var(--clc-button-border-radius);
}
.clc-splitbutton .clc-button-icon-only .clc-button-text, .clc-splitbutton .clc-pager-element .clc-button-text {
  display: none;
}
.clc-splitbutton .clc-button.clc-splitbutton-menubutton {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.clc-splitbutton .clc-button:not(.clc-splitbutton-menubutton) {
  flex: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.clc-splitbutton-menu {
  display: none;
  position: absolute;
  min-width: var(--clc-splitbutton-menu-min-width);
  box-shadow: var(--clc-splitbutton-menu-shadow);
}

.clc-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.clc-menu-list:focus {
  outline: none;
}

.clc-menuitem .clc-menuitem-link {
  color: inherit;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.clc-menuitem .clc-menuitem-link:hover {
  text-decoration: none;
}
.clc-menuitem .clc-menuitem-icon {
  margin-inline: var(--clc-menu-item-icon-margin-inline);
}

.clc-splitbutton-menubutton {
  margin-inline-start: 1px;
}
.clc-splitbutton-menubutton.clc-variant-outlined {
  border-inline-start: 0;
  margin-inline-start: calc(-1 * var(--clc-border-width));
}
.clc-splitbutton-menubutton .clc-button-text {
  display: none;
}
.clc-splitbutton-menubutton .clci-chevron-down:before {
  content: "arrow_drop_down";
}

.clc-input-xs .clc-menuitem-icon {
  font-size: 1rem;
}

.clc-input-sm .clc-menuitem-icon {
  font-size: 1rem;
}

.clc-input-lg .clc-menuitem-icon {
  font-size: 1.5rem;
}

.clc-slider {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  border: var(--clc-slider-border);
  border-radius: var(--clc-slider-border-radius);
  background-color: var(--clc-slider-background-color);
}
.clc-slider.clc-state-disabled {
  background-color: var(--clc-slider-disabled-background-color);
  border: var(--clc-slider-disabled-border);
}
.clc-slider.clc-state-disabled .clc-slider-range {
  background-color: var(--clc-slider-disabled-range-background-color);
  border: var(--clc-slider-disabled-range-border);
}
.clc-slider.clc-state-disabled .clc-slider-handle {
  background-color: var(--clc-slider-disabled-handle-background-color);
  border: var(--clc-slider-disabled-handle-border);
}

.clc-slider-range {
  position: absolute;
  background-color: var(--clc-slider-range-background-color);
  border: var(--clc-slider-range-border);
}

.clc-slider-handle {
  position: absolute;
  background-color: var(--clc-slider-handle-background-color);
  border: var(--clc-slider-handle-border);
  border-radius: var(--clc-slider-handle-border-radius);
  box-shadow: var(--clc-slider-handle-shadow);
  transition: var(--clc-slider-handle-transition);
}

.clc-slider-horizontal {
  height: var(--clc-slider-horizontal-height);
  width: var(--clc-slider-horizontal-width);
}
.clc-slider-horizontal .clc-slider-range {
  inset-block-start: -1px;
  inset-block-end: -1px;
  inset-inline-start: -1px;
}
.clc-slider-horizontal .clc-slider-range.clc-slider-range-min {
  border-start-start-radius: var(--clc-slider-border-radius);
  border-end-start-radius: var(--clc-slider-border-radius);
}
.clc-slider-horizontal .clc-slider-handle {
  top: 50%;
  transform: translateY(-50%);
  margin-inline-start: calc(var(--clc-slider-handle-width) / -2);
  width: var(--clc-slider-handle-width);
  height: var(--clc-slider-handle-height);
}

.clc-slider-vertical {
  width: var(--clc-slider-horizontal-height);
  height: var(--clc-slider-horizontal-width);
}
.clc-slider-vertical .clc-slider-range {
  inset-inline-start: -1px;
  inset-inline-end: -1px;
  inset-block-end: -1px;
}
.clc-slider-vertical .clc-slider-range.clc-slider-range-min {
  border-end-start-radius: var(--clc-slider-border-radius);
  border-end-end-radius: var(--clc-slider-border-radius);
}
.clc-slider-vertical .clc-slider-handle {
  left: 50%;
  transform: translateX(-50%);
  margin-block-start: calc(var(--clc-slider-handle-width) / -2);
  width: var(--clc-slider-handle-height);
  height: var(--clc-slider-handle-width);
}

.clc-slider:not(.clc-state-disabled) .clc-slider-handle:hover, .clc-slider:not(.clc-state-disabled) .clc-slider-handle:focus, .clc-slider:not(.clc-state-disabled) .clc-slider-handle:active {
  background-color: var(--clc-slider-handle-hover-background-color);
  box-shadow: var(--clc-slider-handle-hover-shadow);
  border: var(--clc-slider-handle-hover-border);
  cursor: pointer;
  outline: none;
}
.clc-slider:not(.clc-state-disabled) .clc-slider-handle:focus {
  outline: var(--clc-outline-normal);
}
.clc-slider:not(.clc-state-disabled) .clc-slider-handle:focus-visible {
  outline: var(--clc-slider-handle-focus-outline);
  outline-offset: var(--clc-slider-handle-focus-outline-offset);
}

.clc-rating {
  box-sizing: border-box;
  display: inline-flex;
  font-size: var(--clc-rating-font-size);
  height: var(--clc-rating-font-size);
  border-radius: var(--clc-border-radius);
}
.clc-rating.clc-state-disabled .clci {
  opacity: var(--clc-rating-disabled-opacity);
  color: var(--clc-rating-disabled-color);
}
.clc-rating a,
.clc-rating button {
  display: inline-flex;
  font-size: var(--clc-rating-font-size);
  width: var(--clc-rating-font-size);
  height: var(--clc-rating-font-size);
  text-decoration: none;
  cursor: default;
  outline: none;
  background: none;
  border: none;
  padding: 0;
}
.clc-rating .clci {
  color: var(--clc-rating-color);
  font-size: var(--clc-rating-font-size);
}
.clc-rating .clci-ban {
  color: var(--clc-rating-ban-icon-color);
}
.clc-rating .clci-ban:before {
  content: "highlight_off";
}
.clc-rating .clci-star-o {
  opacity: var(--clc-rating-opacity);
}
.clc-rating .clci-star-o:before {
  content: "star";
  font-variation-settings: "FILL" 0;
}
.clc-rating .clci-star {
  color: var(--clc-rating-selected-color);
}
.clc-rating .clci-star:before {
  content: "star";
  font-variation-settings: "FILL" 1;
}
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) a:hover, .clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) a:focus-visible,
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) button:hover, .clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) button:focus-visible {
  cursor: pointer;
}
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) a:hover .clci-star,
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) a:hover .clci-star-o,
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) a:hover .clci-ban, .clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) a:focus-visible .clci-star,
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) a:focus-visible .clci-star-o,
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) a:focus-visible .clci-ban,
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) button:hover .clci-star,
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) button:hover .clci-star-o,
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) button:hover .clci-ban, .clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) button:focus-visible .clci-star,
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) button:focus-visible .clci-star-o,
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) button:focus-visible .clci-ban {
  color: var(--clc-rating-focus-color);
}
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) a:focus-visible > span,
.clc-rating:not(.clc-state-disabled):not(.clc-state-readonly) button:focus-visible > span {
  outline: var(--clc-outline-focus);
  border-radius: var(--clc-border-radius);
}

.clc-security-code {
  box-sizing: border-box;
  display: inline-flex;
  border-radius: var(--clc-input-border-radius);
}

.clc-security-code-wrapper {
  flex: 1;
  --clc-gap: 0.5rem;
}

.clc-security-code-input {
  text-align: center;
  min-width: var(--clc-security-code-input-min-width);
  min-height: var(--clc-security-code-input-min-height);
  width: 100%;
  height: 100%;
  padding: var(--clc-security-code-input-padding);
  font-size: var(--clc-security-code-input-font-size);
  font-weight: var(--clc-security-code-input-font-weight);
  line-height: var(--clc-security-code-input-line-height);
}

.clc-signature-pad {
  box-sizing: border-box;
  display: inline-flex;
  position: relative;
  border: var(--clc-signature-pad-border);
  border-radius: var(--clc-signature-pad-border-radius);
  background-color: var(--clc-signature-pad-background-color);
  overflow: hidden;
}
.clc-signature-pad:focus-within {
  outline: var(--clc-input-focus-shadow);
}
.clc-signature-pad.clc-state-disabled {
  opacity: var(--clc-input-disabled-opacity, 0.6);
  pointer-events: none;
}
.clc-signature-pad.clc-state-readonly {
  pointer-events: none;
}

.clc-signature-pad-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.clc-state-disabled .clc-signature-pad-canvas, .clc-state-readonly .clc-signature-pad-canvas {
  cursor: default;
}

.clc-signature-pad-clear {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--clc-signature-pad-clear-color);
  line-height: 1;
  border-radius: var(--clc-border-radius);
}
.clc-signature-pad-clear:hover {
  color: var(--clc-signature-pad-clear-hover-color);
}

.clc-signature-pad-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--clc-signature-pad-placeholder-color);
  pointer-events: none;
  user-select: none;
  font-style: italic;
}

.clc-selectbar {
  box-sizing: border-box;
  display: inline-flex;
  border-radius: var(--clc-selectbar-border-radius);
}
.clc-selectbar:focus {
  outline: var(--clc-outline-normal);
}
.clc-selectbar:focus-visible {
  outline: var(--clc-selectbar-focus-outline);
  outline-offset: var(--clc-selectbar-focus-outline-offset);
}
.clc-selectbar:focus-visible .clc-button.clc-state-focused:not(.clc-state-disabled) {
  outline: var(--clc-selectbar-button-focus-outline);
  outline-offset: var(--clc-selectbar-button-focus-outline-offset);
  z-index: 1;
}
.clc-selectbar .clc-button {
  display: inline-block;
  background-color: var(--clc-selectbar-background-color);
  color: var(--clc-selectbar-color);
  border: none;
  outline: var(--clc-selectbar-border);
  outline-offset: -1px;
  border-radius: 0;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .clc-selectbar .clc-button:not(.clc-state-active):not(.clc-state-disabled):hover {
    background-color: var(--clc-base-200);
    color: var(--clc-on-base-lighter);
    background-image: none;
    box-shadow: none;
  }
}
.clc-selectbar .clc-button.clc-state-active {
  background-color: var(--clc-selectbar-selected-background-color);
  color: var(--clc-selectbar-selected-color);
  outline: var(--clc-selectbar-selected-border);
}
.clc-selectbar.clc-selectbar-horizontal {
  flex-direction: row;
}
.clc-selectbar.clc-selectbar-horizontal .clc-button:first-child {
  border-start-start-radius: var(--clc-selectbar-border-radius);
  border-end-start-radius: var(--clc-selectbar-border-radius);
}
.clc-selectbar.clc-selectbar-horizontal .clc-button:not(:first-child) {
  margin-inline-start: -1px;
}
.clc-selectbar.clc-selectbar-horizontal .clc-button:last-child {
  border-start-end-radius: var(--clc-selectbar-border-radius);
  border-end-end-radius: var(--clc-selectbar-border-radius);
}
.clc-selectbar.clc-selectbar-vertical {
  flex-direction: column;
}
.clc-selectbar.clc-selectbar-vertical .clc-button {
  text-align: center;
}
.clc-selectbar.clc-selectbar-vertical .clc-button:first-child {
  border-top-left-radius: var(--clc-selectbar-border-radius);
  border-top-right-radius: var(--clc-selectbar-border-radius);
}
.clc-selectbar.clc-selectbar-vertical .clc-button:not(:first-child) {
  margin-top: -1px;
}
.clc-selectbar.clc-selectbar-vertical .clc-button:last-child {
  border-bottom-left-radius: var(--clc-selectbar-border-radius);
  border-bottom-right-radius: var(--clc-selectbar-border-radius);
}

.clc-datepicker {
  display: inline-block;
  position: relative;
  border-radius: var(--clc-input-border-radius);
}
.clc-datepicker:has(> .clc-inputtext:not(:disabled):not(.clc-state-disabled):focus) {
  outline: none;
}
.clc-datepicker .clc-readonly {
  cursor: pointer;
}
.clc-datepicker .clc-input-trigger {
  cursor: pointer;
}
.clc-datepicker > .clc-inputtext {
  width: 100%;
  line-height: var(--clc-datepicker-line-height);
}
.clc-datepicker:has(.clc-datepicker-trigger) > .clc-inputtext {
  padding-inline-end: calc(1rem + var(--clc-datepicker-trigger-icon-size));
}
.clc-datepicker:not(.clc-state-disabled):hover .clc-datepicker-trigger {
  box-shadow: none;
  color: var(--clc-datepicker-trigger-icon-hover-color);
}
.clc-datepicker.clc-state-disabled > .clc-inputtext {
  color: var(--clc-input-disabled-color);
  box-shadow: var(--clc-input-disabled-shadow);
  background-color: var(--clc-input-disabled-background-color);
  border: var(--clc-input-disabled-border);
  opacity: var(--clc-input-disabled-opacity);
}
.clc-datepicker.clc-state-disabled > .clc-inputtext::placeholder {
  color: var(--clc-input-disabled-placeholder-color);
}

.clc-datepicker-inline {
  background-color: var(--clc-datepicker-panel-background-color);
  border: var(--clc-input-border);
}

.clc-datepicker-trigger {
  box-shadow: none;
  background-color: transparent;
  padding: 0;
  vertical-align: text-top;
  color: var(--clc-datepicker-trigger-icon-color);
  width: var(--clc-datepicker-trigger-icon-size);
  height: var(--clc-datepicker-trigger-icon-size);
  font-size: var(--clc-datepicker-trigger-icon-size);
}
.clc-datepicker-trigger.clc-state-disabled {
  border: none;
  box-shadow: none;
  cursor: initial;
  opacity: 1;
  color: var(--clc-input-disabled-color);
}
.clc-datepicker-trigger:not(.clc-state-disabled):hover:not(:active), .clc-datepicker-trigger:not(.clc-state-disabled):hover:active {
  background-color: transparent;
}
.clc-datepicker-trigger:not(.clc-state-disabled):active {
  box-shadow: none !important;
  background-image: none !important;
}
.clc-datepicker-trigger .clci-calendar,
.clc-datepicker-trigger .clci-time {
  font-size: inherit;
  vertical-align: top;
}
.clc-datepicker-trigger .clci-calendar:before {
  content: "calendar_today";
}
.clc-datepicker-trigger .clci-time:before {
  content: "schedule";
}
.clc-datepicker-trigger .clc-button-text {
  display: none;
}

.clc-datepicker-field-button {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.625rem;
  transform: translateY(-50%);
}

.clc-datepicker.clc-input-xs {
  --clc-datepicker-trigger-icon-size: var(--clc-datepicker-trigger-icon-size-xs);
}

.clc-datepicker.clc-input-sm {
  --clc-datepicker-trigger-icon-size: var(--clc-datepicker-trigger-icon-size-sm);
}

.clc-datepicker-popup-container {
  box-sizing: content-box;
  position: absolute;
  width: var(--clc-datepicker-popup-width);
  margin: var(--clc-datepicker-panel-margin);
  box-shadow: var(--clc-datepicker-panel-shadow);
  border: var(--clc-datepicker-panel-border);
  border-radius: var(--clc-border-radius);
  background-color: var(--clc-datepicker-panel-background-color);
}

.clc-datepicker-inline-container {
  position: static;
  white-space: nowrap;
}
.clc-datepicker-inline-container .clc-calendar {
  display: inline-block;
}

.clc-datepicker-footer {
  position: relative;
  line-height: var(--clc-datepicker-footer-line-height);
  padding: var(--clc-datepicker-footer-padding);
}

/* Calendar Styles */
.clc-calendar {
  box-sizing: border-box;
}

.clc-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--clc-datepicker-header-background-color);
  border-bottom: var(--clc-datepicker-header-border);
  color: var(--clc-datepicker-header-color);
  padding-block: var(--clc-datepicker-header-padding-block);
  padding-inline: var(--clc-datepicker-header-padding-inline);
}

.clc-calendar-prev,
.clc-calendar-next {
  border-radius: var(--clc-datepicker-prev-next-button-border-radius);
}
.clc-calendar-prev .clci,
.clc-calendar-next .clci {
  color: var(--clc-datepicker-header-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--clc-datepicker-prev-next-icon-size);
}
*[dir=rtl] .clc-calendar-prev .clci,
*[dir=rtl] .clc-calendar-next .clci {
  transform: rotate(180deg);
}

.clc-calendar-prev {
  order: 1;
}
.clc-calendar-prev .clc-calendar-prev-icon:before {
  content: "chevron_left";
}

.clc-calendar-next {
  order: 3;
}
.clc-calendar-next .clc-calendar-next-icon:before {
  content: "chevron_right";
}

.clc-calendar-title {
  order: 2;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.clc-calendar-month-dropdown {
  width: var(--clc-datepicker-month-dropdown-width);
}

.clc-calendar-year-dropdown {
  width: var(--clc-datepicker-year-dropdown-width);
}

.clc-calendar-view-container {
  padding-block: var(--clc-datepicker-calendar-padding-block);
  padding-inline: var(--clc-datepicker-calendar-padding-inline);
}
.clc-calendar-view-container:focus {
  outline: var(--clc-outline-normal);
}
.clc-calendar-view-container:focus-visible {
  outline: var(--clc-datepicker-focus-outline);
  outline-offset: var(--clc-datepicker-focus-outline-offset);
}

.clc-calendar-view {
  table-layout: fixed;
  border-collapse: collapse;
}
.clc-calendar-view th {
  font-weight: normal;
  font-size: var(--clc-datepicker-calendar-header-font-size);
  text-transform: var(--clc-datepicker-calendar-header-text-transform);
  color: var(--clc-datepicker-calendar-header-color);
  padding: var(--clc-datepicker-calendar-item-padding);
  text-align: center;
}
.clc-calendar-view td {
  text-align: center;
  border-top: var(--clc-datepicker-calendar-border);
  padding: 0;
}
.clc-calendar-view td:focus {
  outline: none;
}
.clc-calendar-view td:focus-visible > .clc-state-default {
  outline: var(--clc-datepicker-focus-outline);
  outline-offset: calc(-1 * var(--clc-outline-width));
}
.clc-calendar-view td .clc-state-default {
  display: block;
  padding: var(--clc-datepicker-calendar-item-padding);
  color: var(--clc-datepicker-calendar-color);
  font-size: var(--clc-datepicker-calendar-font-size);
  border-radius: var(--clc-datepicker-calendar-border-radius);
  transition: var(--clc-datepicker-calendar-transition);
}
.clc-calendar-view td .clc-state-default.clc-calendar-today {
  color: var(--clc-datepicker-calendar-today-color);
  background-color: var(--clc-datepicker-calendar-today-background-color);
  box-shadow: var(--clc-datepicker-calendar-today-box-shadow);
  border-radius: var(--clc-datepicker-calendar-today-border-radius);
}
.clc-calendar-view td .clc-state-default.clc-state-focused, .clc-calendar-view td .clc-state-default:hover {
  text-decoration: none;
  color: var(--clc-datepicker-calendar-hover-color);
  background-color: var(--clc-datepicker-calendar-hover-background-color);
  cursor: pointer;
}
.clc-calendar-view td .clc-state-active,
.clc-calendar-view td .clc-state-active.clc-calendar-today {
  color: var(--clc-datepicker-calendar-selected-color);
  background-color: var(--clc-datepicker-calendar-selected-background-color);
  padding: var(--clc-datepicker-calendar-item-padding);
  box-shadow: none;
}
.clc-calendar-view td .clc-state-active.clc-state-focused, .clc-calendar-view td .clc-state-active:hover,
.clc-calendar-view td .clc-state-active.clc-calendar-today.clc-state-focused,
.clc-calendar-view td .clc-state-active.clc-calendar-today:hover {
  color: var(--clc-datepicker-calendar-selected-hover-color);
  background-color: var(--clc-datepicker-calendar-selected-hover-background-color);
}
.clc-calendar-view .clc-state-disabled {
  opacity: 0.5;
}
.clc-calendar-view .clc-calendar-other-month {
  opacity: 0.5;
}
.clc-calendar-view .clc-calendar-week-number {
  opacity: 0.5;
}

/* Time Picker Styles */
.clc-timepicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--clc-timepicker-gap);
  border-top: var(--clc-datepicker-calendar-border);
  padding-block: var(--clc-timepicker-padding-block);
  padding-inline: var(--clc-timepicker-padding-inline);
  color: var(--clc-timepicker-color);
}
.clc-timepicker .clci-chevron-up:before {
  content: "expand_less";
}
.clc-timepicker .clci-chevron-down:before {
  content: "expand_more";
}
.clc-timepicker .clc-separator {
  color: var(--clc-timepicker-separator-color);
}
.clc-timepicker .clc-separator a {
  display: none;
}
.clc-timepicker .clc-button-md {
  padding: var(--clc-timepicker-button-padding);
  text-transform: uppercase;
}

.clc-hour-picker,
.clc-minute-picker,
.clc-second-picker {
  background-color: var(--clc-timepicker-background-color);
  width: 4rem;
}

.clc-ampm-picker a,
.clc-ampm-picker button {
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
}

.clc-numeric {
  display: inline-block;
  position: relative;
  padding: 0px;
}
.clc-numeric input[type=number],
.clc-numeric input[type=text] {
  -moz-appearance: textfield;
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  font-family: inherit;
  line-height: var(--clc-numeric-line-height);
  padding-block: var(--clc-numeric-input-padding-block);
  padding-inline: var(--clc-numeric-input-padding-inline);
  outline: none;
}
.clc-numeric input[type=number]::-webkit-inner-spin-button, .clc-numeric input[type=number]::-webkit-outer-spin-button,
.clc-numeric input[type=text]::-webkit-inner-spin-button,
.clc-numeric input[type=text]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.clc-numeric.clc-state-disabled .clc-numeric-button {
  background-color: var(--clc-numeric-button-disabled-background-color);
  color: var(--clc-numeric-button-disabled-color);
}
.clc-numeric.clc-state-disabled .clc-numeric-button:active, .clc-numeric.clc-state-disabled .clc-numeric-button:hover {
  background-color: var(--clc-numeric-button-disabled-background-color);
  color: var(--clc-numeric-button-disabled-color);
  background-image: none;
  box-shadow: none;
  cursor: initial;
}

.clc-numeric-button {
  position: absolute;
  inset-inline-end: var(--clc-numeric-button-offset);
  padding: 0;
  width: var(--clc-numeric-button-width);
  height: var(--clc-numeric-button-height);
  border-radius: var(--clc-numeric-button-border-radius);
  background-color: var(--clc-numeric-button-background-color);
  color: var(--clc-numeric-button-color);
}
.clc-numeric-button:hover {
  background-color: var(--clc-numeric-button-background-color);
}
.clc-numeric-button .clci {
  font-size: var(--clc-numeric-button-height);
  vertical-align: top;
}
.clc-numeric-button .clci-caret-up:before {
  content: "expand_less";
}
.clc-numeric-button .clci-caret-down:before {
  content: "expand_more";
}

.clc-numeric-up {
  inset-block-start: var(--clc-numeric-button-offset);
}

.clc-numeric-down {
  inset-block-end: var(--clc-numeric-button-offset);
}

.clc-numeric.clc-input-xs {
  --clc-numeric-input-padding-block: var(--clc-numeric-input-padding-block-xs);
  --clc-numeric-input-padding-inline: var(--clc-numeric-input-padding-inline-xs);
  --clc-numeric-button-width: var(--clc-numeric-button-width-xs);
  --clc-numeric-button-height: var(--clc-numeric-button-height-xs);
  --clc-numeric-button-offset: var(--clc-numeric-button-offset-xs);
}

.clc-numeric.clc-input-sm {
  --clc-numeric-input-padding-block: var(--clc-numeric-input-padding-block-sm);
  --clc-numeric-input-padding-inline: var(--clc-numeric-input-padding-inline-sm);
  --clc-numeric-button-width: var(--clc-numeric-button-width-sm);
  --clc-numeric-button-height: var(--clc-numeric-button-height-sm);
  --clc-numeric-button-offset: var(--clc-numeric-button-offset-sm);
}

.clc-numeric.clc-input-lg {
  --clc-numeric-input-padding-block: var(--clc-numeric-input-padding-block-lg);
  --clc-numeric-input-padding-inline: var(--clc-numeric-input-padding-inline-lg);
  --clc-numeric-button-width: var(--clc-numeric-button-width-lg);
  --clc-numeric-button-height: var(--clc-numeric-button-height-lg);
}

.clc-fileupload {
  box-sizing: border-box;
  display: inline-block;
  border-radius: var(--clc-upload-button-bar-border-radius);
}
.clc-fileupload .clc-button {
  vertical-align: middle;
  -webkit-appearance: none !important;
}

.clc-fileupload-choose {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background-color: var(--clc-upload-choose-background-color);
  color: var(--clc-upload-choose-color);
}
.clc-fileupload-choose input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  min-height: 100%;
  cursor: pointer;
}
.clc-fileupload-choose.clc-state-disabled input[type=file] {
  cursor: default;
}
.clc-fileupload-choose:not(.clc-state-disabled) {
  background-color: var(--clc-upload-choose-background-color);
  color: var(--clc-upload-choose-color);
}
.clc-fileupload-choose:not(.clc-state-disabled):hover {
  background-color: var(--clc-upload-choose-hover-background-color);
  color: var(--clc-upload-choose-hover-color);
}
.clc-fileupload-choose:not(.clc-state-disabled):hover:not(:active) {
  background-color: var(--clc-upload-choose-hover-background-color);
  color: var(--clc-upload-choose-hover-color);
}
.clc-fileupload-choose:not(.clc-state-disabled):active {
  background-color: var(--clc-upload-choose-active-background-color);
  color: var(--clc-upload-choose-active-color);
}

.clc-fileupload-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.clc-fileupload-row > div {
  margin: var(--clc-upload-files-margin);
}
.clc-fileupload-row .clc-button-text {
  display: none;
}
.clc-fileupload-row .clc-button {
  background-color: var(--clc-upload-files-remove-background-color);
  color: var(--clc-upload-files-remove-color);
}
.clc-fileupload-row .clc-button .clci-close,
.clc-fileupload-row .clc-button .clci-times,
.clc-fileupload-row .clc-button .clc-icon-trash {
  display: block;
}
.clc-fileupload-row .clc-button .clci-close:before,
.clc-fileupload-row .clc-button .clci-times:before,
.clc-fileupload-row .clc-button .clc-icon-trash:before {
  content: "close";
}

.clc-fileupload-buttonbar {
  position: relative;
  background-color: var(--clc-upload-button-bar-background-color);
  padding: var(--clc-upload-button-bar-padding);
  border-radius: var(--clc-upload-button-bar-border-radius);
}
.clc-fileupload-buttonbar .clc-button:nth-child(3) {
  float: right;
  background-color: var(--clc-upload-cancel-background-color);
  color: var(--clc-upload-cancel-color);
}
.clc-form-field .clc-fileupload-buttonbar {
  background-color: inherit;
}
.clc-form-field.clc-variant-flat .clc-fileupload-buttonbar, .clc-form-field.clc-variant-filled .clc-fileupload-buttonbar {
  --clc-upload-button-bar-padding: calc(var(--clc-form-field-label-floating-top) + 1.5rem) calc(var(--clc-form-field-label-inset-inline-start) + 0.25rem) calc(var(--clc-form-field-label-inset-inline-start) + 0.25rem);
}

.clc-fileupload-files {
  background-color: var(--clc-upload-files-background-color);
  padding: var(--clc-upload-files-padding);
}
.clc-form-field .clc-fileupload-files {
  background-color: inherit;
}

.clc-datatable {
  position: relative;
  box-shadow: var(--clc-grid-shadow);
  border: var(--clc-grid-cell-border);
  border-radius: var(--clc-grid-border-radius);
  background-color: var(--clc-grid-background-color);
  overflow: hidden;
}
.clc-datatable:focus {
  outline: var(--clc-outline-normal);
}
.clc-datatable:focus-visible {
  outline: var(--clc-grid-focus-outline);
  outline-offset: var(--clc-grid-focus-outline-offset);
}
.clc-datatable .clc-col-icon {
  text-align: center;
  vertical-align: middle;
  width: var(--clc-grid-column-icon-width);
  padding: var(--clc-grid-column-icon-padding);
}
.clc-datatable .clci-chevron-circle-right {
  vertical-align: top;
  /* Right-to-left arrow icons */
}
.clc-datatable .clci-chevron-circle-right:before {
  content: "arrow_right";
}
*[dir=rtl] .clc-datatable .clci-chevron-circle-right {
  transform: rotate(180deg);
}
.clc-datatable .clci-chevron-circle-down {
  vertical-align: top;
}
.clc-datatable .clci-chevron-circle-down:before {
  content: "arrow_drop_down";
}
.clc-datatable.clc-has-template > .clc-datatable-scrollable-wrapper > .clc-datatable-scrollable-view > .clc-datatable-scrollable-body > .clc-datatable-scrollable-table-wrapper > table > .clc-datatable-scrollable-colgroup col:first-child {
  width: var(--clc-grid-column-icon-width);
}

.clc-unselectable-text {
  user-select: none;
}

.clc-datatable-tablewrapper > table,
.clc-datatable-scrollable-header-box > table,
.clc-datatable-scrollable-table-wrapper > table,
.clc-datatable-scrollable-footer-box > table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

.clc-resizable-column {
  position: relative;
}

.clc-datatable-reorder-indicator-up {
  position: absolute;
}
.clc-datatable-reorder-indicator-up:before {
  content: "arrow_drop_down";
}

.clc-datatable-reorder-indicator-down {
  position: absolute;
}
.clc-datatable-reorder-indicator-down:before {
  content: "arrow_drop_up";
}

.clc-column-resizer {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  height: 100%;
  cursor: col-resize;
  width: var(--clc-grid-column-resizer-width);
}
.clc-column-resizer:after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  height: 100%;
  width: var(--clc-grid-column-resizer-helper-width);
  background-color: transparent;
}
.clc-column-resizer:hover:after, .clc-column-resizer:active:after {
  background-color: var(--clc-grid-column-resizer-helper-background-color);
}

.clc-rowgroup-header .fa,
.clc-row-toggler {
  color: var(--clc-grid-cell-color);
}

.clc-datatable-scrollable-footer {
  background-color: var(--clc-grid-header-background-color);
  border-top: var(--clc-grid-cell-border);
}

.clc-grid-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.clc-grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--clc-grid-header-background-color);
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: inherit;
  border-bottom: var(--clc-grid-header-cell-border-bottom);
}
.clc-grid-table thead th:not(:last-child) {
  border-inline-end: var(--clc-grid-header-cell-border);
}
.clc-grid-table thead th > div:not(.clc-cell-filter) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  outline: none;
  padding: var(--clc-grid-header-cell-padding);
}
.clc-grid-table thead th.clc-state-focused {
  outline: var(--clc-grid-cell-focus-outline);
  outline-offset: var(--clc-grid-cell-focus-outline-offset);
}
.clc-grid-table thead th .clc-column-title {
  display: inline-flex;
  flex: auto;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  font-size: var(--clc-grid-header-font-size);
  line-height: var(--clc-grid-header-line-height);
  text-transform: var(--clc-grid-header-text-transform);
  color: var(--clc-grid-header-color);
  padding-inline: var(--clc-grid-header-title-padding-inline);
  font-weight: var(--clc-grid-header-font-weight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clc-grid-table thead th .clc-column-title:has(.clc-column-title-content > .clc-chkbox) {
  overflow: visible;
}
.clc-grid-table thead th .clc-column-title-content {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clc-grid-table thead th .clc-column-title-content:has(.clc-chkbox) {
  overflow: visible;
}
.clc-grid-table thead th.clc-text-align-center .clc-column-title {
  justify-content: center;
  padding-inline-start: 0;
}
.clc-grid-table thead th.clc-text-align-center.clc-sortable-column .clc-column-title {
  padding-inline-start: var(--clc-grid-sort-icon-width);
}
.clc-grid-table thead th.clc-text-align-right .clc-column-title {
  justify-content: right;
}
.clc-grid-table thead th.clc-text-align-right.clc-sortable-column .clc-column-title {
  padding-inline-start: var(--clc-grid-sort-icon-width);
}
.clc-grid-table thead th .clc-column-drag + .clc-column-title {
  padding-inline-start: 0;
}

.clc-datatable-tfoot td, .clc-grid-table tfoot td {
  background-color: var(--clc-grid-foot-background-color);
  font-size: var(--clc-grid-cell-font-size);
  line-height: var(--clc-grid-cell-line-height);
  color: var(--clc-grid-foot-cell-color);
  padding: var(--clc-grid-cell-padding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clc-datatable-tfoot td:not(:last-child), .clc-grid-table tfoot td:not(:last-child) {
  border-inline-end: var(--clc-grid-right-cell-border);
}
.clc-datatable-tfoot td.clc-composite-cell, .clc-grid-table tfoot td.clc-composite-cell {
  border-inline-end: var(--clc-grid-right-cell-border);
}

.clc-datatable-scrollable-header {
  background-color: var(--clc-grid-header-background-color);
  border-bottom: var(--clc-grid-bottom-cell-border);
}

.clc-datatable-scrollable-body {
  overflow: auto;
  border-top: none;
  flex: auto;
  border-bottom-right-radius: var(--clc-border-radius);
  border-bottom-left-radius: var(--clc-border-radius);
}

.clc-has-pager .clc-datatable-scrollable-body {
  border-radius: 0;
}

.clc-sortable-column {
  cursor: pointer;
}
.clc-sortable-column:focus {
  outline: none;
}
.clc-sortable-column.clc-state-active {
  background-color: var(--clc-grid-header-sorted-background-color);
}
.clc-sortable-column > div:hover .clci-sort:not(.clci-sort-asc):not(.clci-sort-desc) {
  color: var(--clc-grid-sort-icon-color);
}
.clc-sortable-column .clci-grid-sort {
  width: var(--clc-grid-sort-icon-width);
  height: var(--clc-grid-sort-icon-height);
  font-size: var(--clc-grid-sort-icon-height);
  text-align: left;
}
.clc-sortable-column .clci-sort {
  color: transparent;
}
.clc-sortable-column .clci-sort:before {
  content: "sort";
}
.clc-sortable-column .clci-sort-asc {
  color: var(--clc-grid-header-color);
}
.clc-sortable-column .clci-sort-asc:before {
  content: "arrow_drop_up";
}
.clc-sortable-column .clci-sort-desc {
  color: var(--clc-grid-header-color);
}
.clc-sortable-column .clci-sort-desc:before {
  content: "arrow_drop_down";
}

.clc-grid-table-striped tbody > tr:not(.clc-expanded-row-content):nth-child(even) > td {
  background-color: var(--clc-grid-stripe-background-color);
}
.clc-grid-table-striped tbody > tr:not(.clc-expanded-row-content):nth-child(even) > td.clc-frozen-cell {
  background-color: var(--clc-grid-frozen-stripe-background-color);
}
.clc-grid-table-striped tbody > tr:not(.clc-expanded-row-content):nth-child(odd) > td {
  background-color: var(--clc-grid-stripe-odd-background-color);
}
.clc-grid-table-striped tbody > tr:not(.clc-expanded-row-content):nth-child(odd) > td.clc-frozen-cell {
  background-color: var(--clc-grid-frozen-stripe-odd-background-color);
}

.clc-grid-table-composite .clc-datatable-thead th, .clc-grid-table-composite.clc-grid-table thead th {
  border-bottom: var(--clc-grid-header-cell-border);
}
.clc-grid-table-composite .clc-datatable-thead th.clc-composite-cell, .clc-grid-table-composite.clc-grid-table thead th.clc-composite-cell {
  border-inline-end: var(--clc-grid-header-cell-border);
}

.clc-datatable-data td,
.clc-grid-table td {
  padding: var(--clc-grid-cell-padding);
  border-bottom: var(--clc-grid-bottom-cell-border);
}
.clc-datatable-data td:not(:last-child),
.clc-grid-table td:not(:last-child) {
  border-inline-end: var(--clc-grid-right-cell-border);
}
.clc-datatable-data td.clc-composite-cell,
.clc-grid-table td.clc-composite-cell {
  border-inline-end: var(--clc-grid-right-cell-border);
}
.clc-datatable-data td .clc-cell-data,
.clc-grid-table td .clc-cell-data {
  color: var(--clc-grid-cell-color);
  font-size: var(--clc-grid-cell-font-size);
  line-height: var(--clc-grid-cell-line-height);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clc-datatable-data td .clc-cell-data.clc-text-wrap,
.clc-grid-table td .clc-cell-data.clc-text-wrap {
  text-overflow: unset;
  overflow: visible;
}
.clc-datatable-data td .clc-cell-data.clc-text-nowrap,
.clc-grid-table td .clc-cell-data.clc-text-nowrap {
  text-overflow: unset;
  overflow: visible;
}
.clc-datatable-data td .clc-cell-data:has(.clc-chkbox), .clc-datatable-data td .clc-cell-data:has(.clc-button),
.clc-grid-table td .clc-cell-data:has(.clc-chkbox),
.clc-grid-table td .clc-cell-data:has(.clc-button) {
  overflow: visible;
}
.clc-datatable-data td .clc-cell-toggle,
.clc-grid-table td .clc-cell-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.clc-datatable-data td .clc-column-footer,
.clc-grid-table td .clc-column-footer {
  color: var(--clc-grid-foot-cell-color);
}
.clc-datatable-data tr td:first-child,
.clc-grid-table tr td:first-child {
  border-inline-start: none;
}
.clc-datatable-data tr td:last-child:not(.clc-composite-cell),
.clc-grid-table tr td:last-child:not(.clc-composite-cell) {
  border-inline-end: none;
}
.clc-datatable-data tr:first-child > td,
.clc-grid-table tr:first-child > td {
  border-top: none;
}
.clc-datatable-data tr:last-child > td,
.clc-grid-table tr:last-child > td {
  border-bottom: none;
}

.clc-grid-table.clc-grid-gridlines-both > thead > tr > th,
.clc-grid-table.clc-grid-gridlines-both > thead > tr > th.clc-composite-cell,
.clc-grid-table.clc-grid-gridlines-both > tbody > tr > td,
.clc-grid-table.clc-grid-gridlines-both > tfoot > tr > td {
  border-bottom: var(--clc-grid-cell-border);
}
.clc-grid-table.clc-grid-gridlines-both > thead > tr > th:not(:last-child),
.clc-grid-table.clc-grid-gridlines-both > thead > tr > th.clc-composite-cell:not(:last-child),
.clc-grid-table.clc-grid-gridlines-both > tbody > tr > td:not(:last-child),
.clc-grid-table.clc-grid-gridlines-both > tfoot > tr > td:not(:last-child) {
  border-inline-end: var(--clc-grid-cell-border);
}
.clc-grid-table.clc-grid-gridlines-none > thead > tr > th,
.clc-grid-table.clc-grid-gridlines-none > thead > tr > th.clc-composite-cell,
.clc-grid-table.clc-grid-gridlines-none > tbody > tr > td,
.clc-grid-table.clc-grid-gridlines-none > tfoot > tr > td {
  border-bottom: none;
  border-inline-end: none;
}
.clc-grid-table.clc-grid-gridlines-horizontal > thead > tr > th,
.clc-grid-table.clc-grid-gridlines-horizontal > thead > tr > th.clc-composite-cell,
.clc-grid-table.clc-grid-gridlines-horizontal > tbody > tr > td,
.clc-grid-table.clc-grid-gridlines-horizontal > tfoot > tr > td {
  border-bottom: var(--clc-grid-cell-border);
  border-inline-end: none;
}
.clc-grid-table.clc-grid-gridlines-vertical > thead > tr > th,
.clc-grid-table.clc-grid-gridlines-vertical > thead > tr > th.clc-composite-cell,
.clc-grid-table.clc-grid-gridlines-vertical > tbody > tr > td,
.clc-grid-table.clc-grid-gridlines-vertical > tfoot > tr > td {
  border-bottom: none;
}
.clc-grid-table.clc-grid-gridlines-vertical > thead > tr > th:not(:last-child),
.clc-grid-table.clc-grid-gridlines-vertical > thead > tr > th.clc-composite-cell:not(:last-child),
.clc-grid-table.clc-grid-gridlines-vertical > tbody > tr > td:not(:last-child),
.clc-grid-table.clc-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) {
  border-inline-end: var(--clc-grid-cell-border);
}

.clc-datatable-reflow tbody td > .clc-column-title {
  display: none;
}

.clc-datatable-scrollable {
  display: flex;
  flex-direction: column;
}
.clc-datatable-scrollable.clc-has-height > .clc-datatable-scrollable-wrapper {
  height: 0;
}
.clc-datatable-scrollable.clc-has-height > .clc-datatable-scrollable-wrapper > .clc-datatable-scrollable-view {
  height: 0;
}

.clc-datatable-scrollable-wrapper {
  display: flex;
  flex-direction: column;
  flex: auto;
}

.clc-datatable-scrollable-view {
  display: flex;
  flex: auto;
  flex-direction: column;
  overflow: hidden;
}

.clc-datatable-header {
  background-color: var(--clc-grid-toolbar-background-color);
  padding: var(--clc-grid-header-padding);
  border-bottom: var(--clc-grid-bottom-cell-border);
}
.clc-datatable-header .clci-plus {
  font-size: var(--clc-grid-cell-font-size);
}
.clc-datatable-header .clci-plus:before {
  content: "add";
}

.clc-cell-filter {
  padding: var(--clc-grid-filter-padding);
  margin: var(--clc-grid-filter-margin);
  border-top: var(--clc-grid-filter-border);
  font-size: var(--clc-grid-filter-font-size);
  font-weight: normal;
}
.clc-cell-filter .clc-cell-filter-label {
  display: flex;
  flex: auto;
  align-items: center;
}
.clc-cell-filter .clc-cell-filter-label > .clci {
  width: var(--clc-grid-filter-icon-width);
  height: var(--clc-grid-filter-icon-height);
  font-size: var(--clc-grid-filter-icon-font-size);
  margin-inline: var(--clc-grid-filter-icon-margin-inline);
  color: var(--clc-grid-filter-color);
}
.clc-cell-filter .clc-cell-filter-label > .clci.clc-cell-filter-clear {
  margin-inline-start: auto;
}
.clc-cell-filter .clc-cell-filter-label .clc-current-filter {
  margin-inline-start: 0.5rem;
}

.clc-selectable tbody tr.clc-data-row td,
.clc-selectable tbody tr.clc-data-row .clc-cell-data {
  transition: background-color var(--clc-transition), color var(--clc-transition);
}
.clc-selectable tbody tr.clc-data-row td.clc-frozen-cell:before, .clc-selectable tbody tr.clc-data-row td.clc-frozen-cell:after,
.clc-selectable tbody tr.clc-data-row .clc-cell-data.clc-frozen-cell:before,
.clc-selectable tbody tr.clc-data-row .clc-cell-data.clc-frozen-cell:after {
  content: "";
  position: absolute;
  inset: 0;
  transition: background-color var(--clc-transition), color var(--clc-transition);
}
.clc-selectable tbody tr.clc-data-row td.clc-frozen-cell-left:before, .clc-selectable tbody tr.clc-data-row td.clc-frozen-cell-left-inner:before,
.clc-selectable tbody tr.clc-data-row .clc-cell-data.clc-frozen-cell-left:before,
.clc-selectable tbody tr.clc-data-row .clc-cell-data.clc-frozen-cell-left-inner:before {
  z-index: -1;
}
.clc-selectable tbody tr.clc-data-row td.clc-frozen-cell-left:after, .clc-selectable tbody tr.clc-data-row td.clc-frozen-cell-left-inner:after,
.clc-selectable tbody tr.clc-data-row .clc-cell-data.clc-frozen-cell-left:after,
.clc-selectable tbody tr.clc-data-row .clc-cell-data.clc-frozen-cell-left-inner:after {
  z-index: -2;
}
.clc-selectable tbody tr.clc-data-row td.clc-frozen-cell-right:before, .clc-selectable tbody tr.clc-data-row td.clc-frozen-cell-right-inner:before,
.clc-selectable tbody tr.clc-data-row .clc-cell-data.clc-frozen-cell-right:before,
.clc-selectable tbody tr.clc-data-row .clc-cell-data.clc-frozen-cell-right-inner:before {
  z-index: -2;
}
.clc-selectable tbody tr.clc-data-row td.clc-frozen-cell-right:after, .clc-selectable tbody tr.clc-data-row td.clc-frozen-cell-right-inner:after,
.clc-selectable tbody tr.clc-data-row .clc-cell-data.clc-frozen-cell-right:after,
.clc-selectable tbody tr.clc-data-row .clc-cell-data.clc-frozen-cell-right-inner:after {
  z-index: -1;
}
.clc-selectable tbody tr.clc-data-row.clc-state-highlight > td {
  background-color: var(--clc-grid-selected-background-color);
}
.clc-selectable tbody tr.clc-data-row.clc-state-highlight > td.clc-frozen-cell {
  background-color: var(--clc-grid-background-color);
}
.clc-selectable tbody tr.clc-data-row.clc-state-highlight > td.clc-frozen-cell.clc-frozen-cell-left:before, .clc-selectable tbody tr.clc-data-row.clc-state-highlight > td.clc-frozen-cell.clc-frozen-cell-left-inner:before {
  background-color: var(--clc-grid-selected-background-color);
}
.clc-selectable tbody tr.clc-data-row.clc-state-highlight > td.clc-frozen-cell.clc-frozen-cell-right:after, .clc-selectable tbody tr.clc-data-row.clc-state-highlight > td.clc-frozen-cell.clc-frozen-cell-right-inner:after {
  background-color: var(--clc-grid-selected-background-color);
}
.clc-selectable tbody tr.clc-data-row.clc-state-highlight .clc-cell-data {
  color: var(--clc-grid-selected-color);
}
.clc-selectable tbody tr.clc-data-row.clc-state-highlight > .clci {
  color: var(--clc-grid-selected-color);
}
.clc-selectable tbody tr.clc-data-row.clc-state-focused > td {
  background-color: var(--clc-grid-cell-focus-background-color);
  color: var(--clc-grid-cell-focus-color);
}
.clc-selectable tbody tr.clc-data-row.clc-state-focused > td.clc-frozen-cell {
  background-color: var(--clc-grid-background-color);
}
.clc-selectable tbody tr.clc-data-row.clc-state-focused > td.clc-frozen-cell.clc-frozen-cell-left:before, .clc-selectable tbody tr.clc-data-row.clc-state-focused > td.clc-frozen-cell.clc-frozen-cell-left-inner:before {
  background-color: var(--clc-grid-cell-focus-background-color);
  color: var(--clc-grid-cell-focus-color);
}
.clc-selectable tbody tr.clc-data-row.clc-state-focused > td.clc-frozen-cell.clc-frozen-cell-right:after, .clc-selectable tbody tr.clc-data-row.clc-state-focused > td.clc-frozen-cell.clc-frozen-cell-right-inner:after {
  background-color: var(--clc-grid-cell-focus-background-color);
  color: var(--clc-grid-cell-focus-color);
}
.clc-selectable tbody tr.clc-data-row.clc-state-focused > th.clc-state-focused {
  color: var(--clc-grid-cell-focus-color) !important;
}
.clc-selectable tbody tr.clc-data-row.clc-state-focused .clc-cell-data {
  color: var(--clc-grid-cell-focus-color);
}
.clc-selectable tbody tr.clc-data-row.clc-state-focused > .clci {
  color: var(--clc-grid-cell-focus-color);
}
.clc-selectable tbody tr.clc-data-row.clc-state-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.clc-selectable tbody tr.clc-data-row:hover:not(.clc-state-highlight) > td {
  background-color: var(--clc-grid-hover-background-color);
}
.clc-selectable tbody tr.clc-data-row:hover:not(.clc-state-highlight) > td.clc-frozen-cell {
  background-color: var(--clc-grid-background-color);
}
.clc-selectable tbody tr.clc-data-row:hover:not(.clc-state-highlight) > td.clc-frozen-cell.clc-frozen-cell-left:before, .clc-selectable tbody tr.clc-data-row:hover:not(.clc-state-highlight) > td.clc-frozen-cell.clc-frozen-cell-left-inner:before {
  background-color: var(--clc-grid-hover-background-color);
}
.clc-selectable tbody tr.clc-data-row:hover:not(.clc-state-highlight) > td.clc-frozen-cell.clc-frozen-cell-right:after, .clc-selectable tbody tr.clc-data-row:hover:not(.clc-state-highlight) > td.clc-frozen-cell.clc-frozen-cell-right-inner:after {
  background-color: var(--clc-grid-hover-background-color);
}
.clc-selectable tbody tr.clc-data-row:hover:not(.clc-state-highlight) .clc-cell-data {
  color: var(--clc-grid-hover-color);
}

.clc-cell-filter-content {
  display: flex;
  flex: auto;
  align-items: center;
  color: var(--clc-grid-filter-color);
  min-height: 1.375rem;
  container-type: inline-size;
  container-name: clc-cell-filter-content;
}

@container clc-cell-filter-content (max-width: 200px) {
  .clc-cell-filter-content .clc-filter-button .clci {
    display: none;
  }
  .clc-cell-filter-content .clc-filter-button {
    position: absolute;
    z-index: 1;
    min-height: 0;
    inset-inline-start: calc(var(--clc-border-width) + 1px);
    height: calc(var(--clc-input-height) - var(--clc-border-width) * 2 - 2px);
    max-height: calc(var(--clc-input-height) - var(--clc-border-width) * 2 - 2px);
    line-height: calc(1.25rem - var(--clc-border-width) * 2 - 2px);
    border-radius: calc(var(--clc-input-border-radius) - var(--clc-border-width) - 1px);
  }
  .clc-cell-filter-content:has(.clc-filter-button) .clc-cell-filter-label {
    position: relative;
    min-width: calc(2 * var(--clc-button-size-md));
  }
  .clc-cell-filter-content:has(.clc-filter-button) .clc-textbox,
  .clc-cell-filter-content:has(.clc-filter-button) .clc-inputtext {
    text-indent: var(--clc-button-size-md);
  }
}
.clc-expanded-row > td {
  border-bottom: none;
  background-color: var(--clc-grid-hover-background-color);
}
.clc-expanded-row > td .clc-cell-data,
.clc-expanded-row > td .clc-row-toggler {
  color: var(--clc-grid-hover-color);
}

.clc-expanded-row-template {
  background-color: var(--clc-grid-detail-template-background-color);
  padding: var(--clc-grid-detail-template-padding);
  border: var(--clc-grid-detail-template-border);
  border-radius: var(--clc-grid-detail-template-border-radius);
}

.clc-expanded-row-content > td {
  padding-top: 0;
  background-color: var(--clc-grid-detail-template-background-color);
}

.clc-rowgroup-header a:hover {
  text-decoration: none;
}
.clc-rowgroup-header td {
  border-top: var(--clc-grid-border);
  border-bottom: var(--clc-grid-border);
}

.clc-datatable-loading {
  position: absolute;
  inset: 0;
  background-color: var(--clc-grid-loading-indicator-background-color);
  opacity: var(--clc-grid-loading-indicator-background-opacity);
  z-index: 3;
}

.clc-datatable-loading-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--clc-grid-loading-indicator-color);
  z-index: 3;
}
.clc-datatable-loading-content .clci-circle-o-notch {
  animation: rotation 0.5s linear infinite;
  font-size: 2rem;
}
.clc-datatable-loading-content .clci-circle-o-notch:before {
  content: "refresh";
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .clc-datatable-reflow .clc-data-grid-data > table,
  .clc-datatable-reflow .clc-datatable-tablewrapper > table,
  .clc-datatable-reflow .clc-datatable-scrollable-header-box > table,
  .clc-datatable-reflow .clc-datatable-scrollable-table-wrapper > table {
    table-layout: auto;
    display: block;
  }
  .clc-datatable-reflow .clc-data-grid-data > table > tbody,
  .clc-datatable-reflow .clc-datatable-tablewrapper > table > tbody,
  .clc-datatable-reflow .clc-datatable-scrollable-header-box > table > tbody,
  .clc-datatable-reflow .clc-datatable-scrollable-table-wrapper > table > tbody {
    display: block;
  }
  .clc-datatable-reflow thead th {
    display: none;
  }
  .clc-datatable-reflow .clc-data-row {
    display: block;
  }
  .clc-datatable-reflow .clc-data-row > td {
    display: block;
    width: 100% !important;
    text-align: left !important;
    border: none;
  }
  .clc-datatable-reflow .clc-data-row > td .clc-column-title {
    display: block;
  }
}
.clc-grid-filter {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
.clc-grid-filter .clc-dropdown,
.clc-grid-filter .clc-numeric,
.clc-grid-filter .clc-textbox,
.clc-grid-filter .clc-grid-filter-label {
  display: block;
  width: 100%;
}
.clc-grid-filter .clc-grid-filter-label {
  font-weight: 600;
}

.clc-grid-date-filter {
  width: 576px;
}

.clc-date-filter {
  display: flex;
  align-items: stretch;
  background-color: var(--clc-grid-filter-background-color);
  gap: var(--clc-grid-filter-gap);
  padding: var(--clc-grid-filter-gap);
}
.clc-date-filter .clc-listbox {
  min-width: 11em;
}
.clc-date-filter .clc-listbox .clc-listbox-item {
  font-size: 0.875rem;
}
.clc-date-filter .clc-datepicker-inline {
  border-radius: var(--clc-border-radius);
}
.clc-date-filter .clc-datepicker-inline table {
  width: 100%;
}

.clc-grid-filter-buttons {
  display: flex;
  justify-content: space-between;
  padding: var(--clc-grid-filter-buttons-padding);
  background-color: var(--clc-grid-filter-buttons-background-color);
  border-top: var(--clc-grid-filter-buttons-border);
}
.clc-grid-filter-buttons .clc-button.clc-shade-default.clc-clear-filter {
  background-color: var(--clc-grid-clear-filter-button-background-color);
  color: var(--clc-grid-clear-filter-button-color);
  box-shadow: var(--clc-grid-clear-filter-button-shadow);
  padding-inline: var(--clc-grid-filter-button-padding-inline);
}
.clc-grid-filter-buttons .clc-button.clc-shade-default.clc-apply-filter {
  background-color: var(--clc-grid-apply-filter-button-background-color);
  color: var(--clc-grid-apply-filter-button-color);
  box-shadow: var(--clc-grid-apply-filter-button-shadow);
  padding-inline: var(--clc-grid-filter-button-padding-inline);
}

.clc-grid-filter-icon {
  background: none;
  border: none;
  padding: 0;
  justify-self: flex-end;
  color: var(--clc-grid-filter-color);
  margin-inline: var(--clc-grid-header-filter-icon-margin-inline);
  font-size: var(--clc-grid-header-filter-icon-font-size);
  transition: var(--clc-grid-state-transition);
  font-weight: 400;
}
.clc-grid-filter-icon:hover {
  cursor: pointer;
  color: var(--clc-grid-header-filter-icon-hover-color);
}

.clci.clc-grid-filter-active {
  color: var(--clc-grid-header-filter-icon-active-color) !important;
  --clc-icon-fill: 1;
}

.clc-button.clc-grid-filter-active {
  color: var(--clc-grid-simple-filter-icon-active-color) !important;
  background-color: var(--clc-grid-simple-filter-icon-active-background-color) !important;
}

.clc-data-grid {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.clc-data-grid-data {
  overflow: auto;
  flex: 1;
  outline: var(--clc-outline-normal);
  box-shadow: var(--clc-grid-data-border-shadow);
}

.clc-grid-table td, .clc-grid-table th {
  padding: var(--clc-grid-cell-padding);
}

.clc-grid-table-fixed {
  table-layout: fixed;
}
.clc-grid-table-fixed .clc-frozen-cell {
  position: -webkit-sticky;
  position: sticky;
}
.clc-grid-table-fixed .clc-frozen-cell-left,
.clc-grid-table-fixed .clc-frozen-cell-right,
.clc-grid-table-fixed .clc-frozen-cell-left-inner,
.clc-grid-table-fixed .clc-frozen-cell-right-inner {
  background: var(--clc-grid-frozen-cell-background-color);
  z-index: 1;
}
.clc-grid-table-fixed .clc-frozen-cell-left.clc-frozen-cell-left-end {
  box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12);
  border-inline-end: var(--clc-grid-frozen-cell-border) !important;
}
*[dir=rtl] .clc-grid-table-fixed .clc-frozen-cell-left.clc-frozen-cell-left-end {
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12);
}
.clc-grid-table-fixed .clc-frozen-cell-right.clc-frozen-cell-right-end {
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12);
  border-inline-start: var(--clc-grid-frozen-cell-border) !important;
}
*[dir=rtl] .clc-grid-table-fixed .clc-frozen-cell-right.clc-frozen-cell-right-end {
  box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12);
}
.clc-grid-table-fixed .clc-frozen-cell-left-inner,
.clc-grid-table-fixed .clc-frozen-cell-right-inner {
  border-inline-end: var(--clc-grid-frozen-cell-border) !important;
  border-inline-start: var(--clc-grid-frozen-cell-border) !important;
}

.clc-grid-table tfoot, .clc-grid-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.clc-grid-table {
  width: 100%;
  position: relative;
  border-collapse: separate;
  border-spacing: 0;
}
.clc-grid-table th {
  white-space: nowrap;
  overflow: hidden;
}
.clc-grid-table td {
  white-space: nowrap;
  overflow: hidden;
}

.clc-grid-table tbody > div {
  display: table-row;
}

.clc-column-drag {
  cursor: grab;
  font-size: inherit;
  color: var(--clc-column-drag-handle-color);
  transition: var(--clc-grid-state-transition);
  margin-inline: var(--clc-column-drag-handle-margin-inline);
}
.clc-column-drag:after {
  content: "more_vert";
}
.clc-column-drag:hover {
  color: var(--clc-column-drag-handle-hover-color);
}
.clc-column-drag:active {
  color: var(--clc-column-drag-handle-hover-color);
  cursor: grabbing;
}

.clc-column-draggable {
  background-color: var(--clc-grid-header-background-color);
  border-radius: var(--clc-border-radius);
  box-shadow: var(--clc-column-draggable-shadow);
  padding: 0;
  display: flex;
  align-items: center;
}
.clc-column-draggable > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0;
}
.clc-column-draggable .clc-column-drag {
  max-width: 1rem;
}
.clc-column-draggable .clc-column-title {
  display: inline-flex;
  flex: auto;
  font-size: var(--clc-grid-header-font-size);
  font-weight: var(--clc-grid-header-font-weight);
  line-height: var(--clc-grid-header-line-height);
  text-transform: var(--clc-grid-header-text-transform);
  color: var(--clc-grid-header-color);
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clc-column-draggable .clc-grid-filter-icon {
  display: none;
}

.clc-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--clc-grid-group-header-gap);
  padding: var(--clc-grid-group-header-padding);
  background-color: var(--clc-grid-header-background-color);
  border-bottom: var(--clc-grid-bottom-cell-border);
}

.clc-group-header-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clc-grid-group-header-gap);
}

.clc-group-header-item {
  display: flex;
  align-items: center;
  color: var(--clc-grid-group-header-item-color);
  background-color: var(--clc-grid-group-header-item-background-color);
  border: var(--clc-grid-group-header-item-border);
  border-radius: var(--clc-grid-group-header-item-border-radius);
  padding-block: var(--clc-grid-group-header-item-padding-block);
  padding-inline: var(--clc-grid-group-header-item-padding-inline);
  width: fit-content;
  float: left;
}
.clc-group-header-item .clc-dialog-titlebar-close {
  display: flex;
  align-items: center;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.clc-group-header-item-title {
  font-size: var(--clc-grid-header-font-size);
  font-weight: var(--clc-grid-header-font-weight);
  margin-inline: var(--clc-grid-group-header-item-title-margin-inline);
}

.clc-group-header-drop {
  font-size: var(--clc-body-font-size);
  color: var(--clc-text-tertiary-color);
  height: fit-content;
}

.clc-column-picker {
  display: flex;
}

.clc-filter-menu-symbol {
  width: 1.75rem;
  display: inline-block;
}

.clc-filter-menu-item {
  width: 100%;
  text-align: start;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

.clc-cell-filter-clear {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.clc-filter-button {
  flex: none;
  margin-inline-end: 0.5rem;
}

.clc-data-grid.clc-density-compact {
  --clc-grid-cell-line-height: 1rem;
  --clc-grid-cell-padding: 0.25rem 0.5rem;
  --clc-grid-header-cell-padding: 0.25rem 0;
  --clc-grid-header-padding: 0.25rem 1rem;
  --clc-grid-header-title-padding-inline: 0.5rem 0;
  --clc-grid-filter-padding: 0.25rem 0.5rem;
  --clc-grid-group-header-padding: 0.25rem;
  --clc-grid-group-header-gap: 0.25rem;
  --clc-grid-group-header-item-padding-block: 0.125rem ;
  --clc-grid-group-header-item-padding-inline: 0.5rem 0.25rem;
  --clc-grid-group-header-item-title-margin-inline: 0 0.25rem;
  --clc-dialog-close-font-size: 1rem;
}

.clc-pager {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clc-pager-gap);
  flex-wrap: wrap;
  background-color: var(--clc-pager-background-color);
  padding: var(--clc-pager-padding);
  /* Right-to-left arrow icons */
}
.clc-pager .clc-pager-element:focus,
.clc-pager .clc-pager-page:focus {
  outline: var(--clc-outline-normal);
}
.clc-pager .clc-pager-element:focus-visible,
.clc-pager .clc-pager-page:focus-visible {
  outline: var(--clc-outline-focus);
  outline-offset: var(--clc-outline-offset);
}
.clc-pager.clc-align-justify > .clc-pager-pages > .clc-pager-item:has(.clc-pager-prev) {
  margin-inline-end: auto;
}
.clc-pager.clc-align-justify > .clc-pager-pages > .clc-pager-item:has(.clc-pager-next) {
  margin-inline-start: auto;
}
.clc-pager.clc-align-right > .clc-pager-pages {
  justify-content: right;
}
.clc-pager.clc-align-left > .clc-pager-pages {
  justify-content: left;
}
.clc-pager.clc-align-center > .clc-pager-pages {
  justify-content: center;
}
.clc-pager .clci-step-backward:before {
  content: "first_page";
}
.clc-pager .clci-caret-left:before {
  content: "navigate_before";
}
.clc-pager .clci-caret-right:before {
  content: "navigate_next";
}
.clc-pager .clci-step-forward:before {
  content: "last_page";
}
.clc-pager .clci-reload:before {
  content: "refresh";
}
*[dir=rtl] .clc-pager .clc-pager-icon {
  transform: rotate(180deg);
}
*[dir=rtl] .clc-pager .clc-pager-reload-icon {
  transform: none;
}
.clc-pager .clc-dropdown {
  order: 2;
  width: var(--clc-pager-dropdown-width);
  overflow: visible;
}
.clc-pager .clc-pagesize-text {
  order: 2;
  font-size: var(--clc-pager-summary-font-size);
  color: var(--clc-pager-summary-color);
}
.clc-pager .clc-dropdown-items-wrapper {
  width: var(--clc-pager-dropdown-width-4px);
}

.clc-pager-element:hover,
.clc-pager-page:hover {
  background-color: var(--clc-pager-numeric-button-hover-background-color);
  color: var(--clc-pager-numeric-button-hover-color);
}

.clc-pager-bottom {
  border-top: var(--clc-pager-border);
}

.clc-pager-pages {
  display: flex;
  flex: 1;
  gap: var(--clc-pager-gap);
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clc-pager-element {
  letter-spacing: 0;
}

.clc-align-center .clc-pager-first {
  margin-inline-start: auto;
}

.clc-pager-prev {
  margin-inline-end: auto;
}
.clc-align-left .clc-pager-prev, .clc-align-right .clc-pager-prev, .clc-align-center .clc-pager-prev {
  margin-inline-end: 0;
}

.clc-pager-next {
  margin-inline-start: auto;
}
.clc-align-left .clc-pager-next, .clc-align-right .clc-pager-next, .clc-align-center .clc-pager-next {
  margin-inline-start: 0;
}

.clc-align-center .clc-pager-last {
  margin-inline-end: auto;
}

.clc-pager-first,
.clc-pager-prev {
  background-color: var(--clc-pager-back-button-background-color);
  color: var(--clc-pager-back-button-color);
  border-radius: var(--clc-pager-button-border-radius);
}

.clc-pager-element:hover {
  text-decoration: none;
}

.clc-pager-last,
.clc-pager-next {
  background-color: var(--clc-pager-next-button-background-color);
  color: var(--clc-pager-next-button-color);
  border-radius: var(--clc-pager-button-border-radius);
}

.clc-pager-reload {
  background-color: var(--clc-pager-next-button-background-color);
  color: var(--clc-pager-next-button-color);
  border-radius: var(--clc-pager-button-border-radius);
}

.clc-pager-page {
  display: inline-block;
  min-width: var(--clc-pager-numeric-button-min-width);
  text-align: center;
  gap: var(--clc-pager-gap);
  background-color: var(--clc-pager-numeric-button-background-color);
  border: var(--clc-pager-numeric-button-border);
  border-radius: var(--clc-pager-button-border-radius);
  padding: var(--clc-pager-numeric-button-padding);
  color: var(--clc-pager-numeric-button-color);
}
.clc-pager-page.clc-state-active {
  background-color: var(--clc-pager-numeric-button-selected-background-color);
  color: var(--clc-pager-numeric-button-selected-color);
  border: var(--clc-pager-numeric-button-selected-border);
  padding: var(--clc-pager-numeric-button-selected-padding);
}

.clc-pager-summary {
  padding-inline-end: var(--clc-pager-summary-padding);
  font-size: var(--clc-pager-summary-font-size);
  color: var(--clc-pager-summary-color);
}
.clc-align-right .clc-pager-summary {
  margin-right: auto;
}
.clc-align-left .clc-pager-summary {
  order: 2;
  margin-left: auto;
  padding: 0;
}
*[dir=rtl] .clc-align-right .clc-pager-summary {
  order: 1;
}
*[dir=rtl] .clc-align-left .clc-pager-summary {
  order: 0;
}

@media (max-width: 768px) {
  .clc-pager {
    display: grid;
    grid-column-gap: 0.5rem;
    grid-row-gap: 1rem;
    grid-template-columns: repeat(9, 1fr);
    text-align: center;
  }
  .clc-pager .clc-dropdown {
    grid-column: 1/4;
    width: auto;
    margin: 0 !important;
    text-align: left;
  }
  .clc-pager .clc-pagesize-text {
    grid-column: 4/10;
    margin: 0 !important;
    text-align: left;
  }
  .clc-pager-summary {
    grid-column: 1/10;
    padding: 0 !important;
    text-align: left;
  }
  .clc-pager-pages {
    grid-column: 1/10;
    display: grid;
    grid-column-gap: 0.5rem;
    grid-row-gap: 1rem;
    grid-template-columns: repeat(9, 1fr);
    text-align: center;
  }
  .clc-pager-item {
    grid-column: 5/6;
  }
  .clc-pager-item > .clc-pager-element {
    width: 100%;
  }
  .clc-pager-item:has(.clc-pager-page:not(.clc-state-active)) {
    display: none;
  }
  .clc-pager-item:has(.clc-pager-first) {
    grid-column: 1/3;
    margin: 0 !important;
  }
  .clc-pager-item:has(.clc-pager-prev) {
    grid-column: 3/5;
    margin: 0 !important;
  }
  .clc-pager-item:has(.clc-pager-next) {
    grid-column: 6/8;
    margin: 0 !important;
  }
  .clc-pager-item:has(.clc-pager-last) {
    grid-column: 8/10;
    margin: 0 !important;
  }
}
@container clc-lookup-panel (max-width: 768px) {
  .clc-pager-page:not(.clc-state-active) {
    display: none;
  }
  .clc-pager {
    display: grid;
    grid-column-gap: 0.5rem;
    grid-row-gap: 1rem;
    grid-template-columns: repeat(9, 1fr);
    text-align: center;
  }
  .clc-pager .clc-dropdown {
    grid-column: 1/4;
    width: auto;
    margin: 0 !important;
    text-align: left;
  }
  .clc-pager .clc-pagesize-text {
    grid-column: 4/10;
    margin: 0 !important;
    text-align: left;
  }
  .clc-pager-summary {
    grid-column: 1/10;
    padding: 0 !important;
    text-align: left;
  }
  .clc-pager-first {
    grid-column: 1/3;
    margin: 0 !important;
  }
  .clc-pager-prev {
    grid-column: 3/5;
    margin: 0 !important;
  }
  .clc-pager-pages {
    grid-column: 5/6;
    margin: 0 !important;
  }
  .clc-pager-next {
    grid-column: 6/8;
    margin: 0 !important;
  }
  .clc-pager-last {
    grid-column: 8/10;
    margin: 0 !important;
  }
}
.clc-pager.clc-density-compact {
  --clc-pager-padding: 0.25rem;
  --clc-pager-gap: 0.25rem;
  --clc-pager-summary-padding: 0.5rem ;
}
.clc-overlaypanel {
  position: absolute;
  overflow: hidden;
  box-shadow: var(--clc-overlay-shadow);
  border: var(--clc-overlay-border);
  border-radius: var(--clc-border-radius);
  background-color: var(--clc-overlay-background-color);
}

.clc-tree {
  box-sizing: border-box;
  display: inline-block;
  overflow: auto;
}
.clc-tree:focus {
  outline: var(--clc-outline-normal);
}
.clc-tree:focus-visible {
  outline: var(--clc-outline-focus);
  outline-offset: var(--clc-tree-node-focus-outline-offset);
}

.clc-tree .clc-treenode.clc-treenode-leaf > .clc-treenode-content > .clc-tree-toggler {
  visibility: hidden;
}

.clc-treenode {
  padding-inline-start: var(--clc-tree-node-toggle-width);
}

.clc-tree-toggler {
  cursor: pointer;
  margin-inline-start: calc(var(--clc-tree-node-toggle-width) * -1);
  width: var(--clc-tree-node-toggle-width);
  height: 1.5rem;
  font-size: var(--clc-icon-size);
  line-height: 1.5rem;
  text-align: center;
  color: var(--clc-tree-node-toggle-color);
  transition: var(--clc-tree-transition);
}
.clc-tree-toggler.clci-caret-right {
  /* Right-to-left arrow icons */
}
.clc-tree-toggler.clci-caret-right:before {
  content: "chevron_right";
  margin-inline-start: -0.125rem;
}
*[dir=rtl] .clc-tree-toggler.clci-caret-right {
  transform: rotate(180deg);
}
.clc-tree-toggler.clci-caret-down:before {
  content: "expand_more";
  margin-inline-start: -0.125rem;
}
.clc-tree-toggler:hover {
  color: var(--clc-tree-node-toggle-hover-color);
}

.clc-treenode-content {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-block: var(--clc-tree-node-margin-block);
  margin-inline: var(--clc-tree-node-margin-inline);
}
.clc-treenode-content .clc-treenode-label {
  display: flex;
  align-items: center;
  cursor: inherit;
  padding-block: var(--clc-tree-node-padding-block);
  padding-inline: var(--clc-tree-node-padding-inline);
}
.clc-treenode-content .clc-treenode-label > .clci:first-child {
  margin-inline-end: 0.25rem;
}
.clc-tree:focus-visible .clc-treenode-content.clc-state-focused .clc-treenode-label {
  outline: var(--clc-tree-node-focus-outline);
  outline-offset: var(--clc-tree-node-focus-outline-offset);
}
.clc-treenode-content:not(.clc-treenode-content-selected):hover .clc-treenode-label {
  background-color: var(--clc-tree-node-hover-background-color);
  color: var(--clc-tree-node-hover-color);
  border-radius: var(--clc-tree-node-selected-border-radius);
}
.clc-treenode-content .clc-chkbox {
  margin-inline-end: 0.25rem;
}

.clc-tree-container,
.clc-treenode-children {
  list-style: none;
  padding: 0;
  margin: 0;
}

.clc-treenode-label {
  transition: var(--clc-tree-transition);
}
.clc-treenode-content-selected .clc-treenode-label {
  border-radius: var(--clc-tree-node-selected-border-radius);
  color: var(--clc-tree-node-selected-color);
  background-color: var(--clc-tree-node-selected-background-color);
}

.clc-datalist,
.clc-datagrid {
  background-color: var(--clc-datalist-background-color);
  border-end-start-radius: var(--clc-datalist-border-radius);
  border-end-end-radius: var(--clc-datalist-border-radius);
  box-shadow: var(--clc-datalist-shadow);
  border: var(--clc-datalist-border);
}

.clc-g > div, .clc-datalist-data > li {
  border-radius: var(--clc-datalist-border-radius);
  border: var(--clc-datalist-item-border);
  box-shadow: var(--clc-datalist-item-shadow);
  padding: var(--clc-datalist-item-padding);
  background-color: var(--clc-datalist-item-background-color);
}

.clc-datalist-data {
  list-style: none;
  padding: var(--clc-datalist-padding);
  margin: 0;
}
.clc-datalist-data > li {
  margin-block: var(--clc-datalist-item-margin-block);
  margin-inline: var(--clc-datalist-item-margin-inline);
}
.clc-datalist-data > li:first-child {
  margin-block-start: 0;
}
.clc-datalist-data > li:last-child {
  margin-block-end: 0;
}

.clc-g {
  display: flex;
  flex-wrap: wrap;
}
.clc-g > div {
  flex: auto;
  margin-block: var(--clc-datalist-item-margin-block);
  margin-inline: var(--clc-datalist-item-margin-inline);
}

.clc-datalist-content {
  box-sizing: border-box;
  position: relative;
}

.clc-datafilter {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.25rem;
  align-items: center;
}
.clc-datafilter .clc-selectbar {
  display: inline-flex;
}
.clc-datafilter .clc-datafilter-group {
  position: relative;
  margin: 0.25rem 0 0;
  padding: 0;
  flex-basis: 100%;
}
.clc-datafilter .clc-datafilter-group .clc-datafilter-group {
  margin: 0;
}
.clc-datafilter .clc-datafilter-item {
  position: relative;
  list-style: none;
  margin: 0;
  padding-block: var(--clc-datafilter-item-padding-block);
  padding-inline: calc(var(--clc-datafilter-item-padding-inline-start) + var(--clc-datafilter-item-indentation)) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}
.clc-datafilter .clc-datafilter-item:before {
  content: "";
  position: absolute;
  background-color: transparent;
  width: var(--clc-datafilter-item-path-width);
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: calc(var(--clc-datafilter-item-padding-inline-start) / 2);
  border: 0;
  border-inline-start: var(--clc-datafilter-item-path-border);
}
.clc-datafilter .clc-datafilter-item:after {
  content: "";
  position: absolute;
  background-color: transparent;
  width: var(--clc-datafilter-item-path-width);
  height: calc(var(--clc-datafilter-item-padding-block) + var(--clc-input-height) / 2);
  inset-block-start: 0;
  inset-inline-start: calc(var(--clc-datafilter-item-padding-inline-start) / 2);
  border: 0;
  border-block-end: var(--clc-datafilter-item-path-border);
  border-inline-start: var(--clc-datafilter-item-path-border);
}
.clc-datafilter .clc-datafilter-item .clc-multiselect,
.clc-datafilter .clc-datafilter-item .clc-dropdown {
  flex: 10rem 1;
}
.clc-datafilter .clc-datafilter-group-item:after {
  height: calc(var(--clc-input-height) / 2);
}
.clc-datafilter .clc-datafilter-bar {
  padding-block: 0;
  padding-inline: calc(var(--clc-datafilter-item-padding-inline-start) + var(--clc-datafilter-item-indentation)) 0;
}
.clc-datafilter .clc-datafilter-bar:before {
  display: none;
}
.clc-datafilter .clc-datafilter-bar:after {
  height: calc(var(--clc-input-height) / 2);
  border-end-start-radius: var(--clc-datafilter-item-path-border-radius);
}
.clc-datafilter .clc-datafilter-bar .clc-splitbutton {
  margin-block-start: 0.3125rem;
}
.clc-datafilter .clc-datafilter-editor {
  flex: 10rem 4;
}
.clc-datafilter .clc-button.clc-datafilter-item-clear {
  color: var(--clc-text-secondary-color);
  opacity: 0.5;
}
.clc-datafilter .clc-button.clc-datafilter-item-clear:hover {
  opacity: 1;
}

.clc-scheduler {
  box-sizing: border-box;
  container-name: scheduler;
  container-type: inline-size;
  display: flex;
  height: 400px;
  flex-direction: column;
  border-radius: var(--clc-scheduler-border-radius);
  border: 1px solid var(--clc-scheduler-border-color);
  box-shadow: var(--clc-scheduler-shadow);
  color: var(--clc-scheduler-color);
  background: var(--clc-scheduler-background-color);
  overflow: hidden;
  background-clip: border-box;
}
.clc-scheduler .clc-event-list-btn {
  color: var(--clc-scheduler-event-list-button-color);
  font-size: var(--clc-scheduler-event-list-button-font-size);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  margin-inline-start: auto;
}
.clc-scheduler .clc-event-list-btn:hover {
  color: var(--clc-scheduler-event-list-button-color);
  text-decoration: underline;
}

.clc-slot {
  display: flex;
  height: 1.5em;
  border-block-start: 1px solid var(--clc-scheduler-border-color);
  border-inline-start: 1px solid var(--clc-scheduler-border-color);
}

.clc-slot-title {
  text-align: end;
  font-size: var(--clc-scheduler-slot-title-font-size);
  padding: var(--clc-scheduler-slot-title-padding);
}

.clc-slot-hours {
  flex: 0 0 5rem;
}
.clc-slot-hours .clc-slot-header {
  height: 1.5rem;
  text-align: end;
  font-size: var(--clc-scheduler-header-font-size);
  padding: 0 0.25rem;
  border-inline-end: 1px solid var(--clc-scheduler-border-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clc-slot-minor {
  border-block-start: 1px solid var(--clc-scheduler-minor-border-color);
}

.clc-day-view .clc-slot,
.clc-slots:first-child .clc-slot {
  border-inline-start: none;
}

.clc-event {
  position: absolute;
  padding-block: var(--clc-scheduler-event-padding-block);
  padding-inline: var(--clc-scheduler-event-padding-inline);
  cursor: pointer;
}

.clc-event-content {
  background: var(--clc-scheduler-event-background-color);
  border-radius: var(--clc-scheduler-border-radius);
  color: var(--clc-scheduler-event-color);
  height: 100%;
  padding: var(--clc-scheduler-event-content-padding);
  font-size: var(--clc-scheduler-event-font-size);
  line-height: var(--clc-scheduler-event-line-height);
  overflow: hidden;
}

.clc-events {
  position: relative;
}

.clc-scheduler-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--clc-scheduler-toolbar-padding);
  background: var(--clc-scheduler-toolbar-background-color);
}
.clc-scheduler-nav .clc-scheduler-nav-title {
  display: flex;
  align-self: center;
  font-size: var(--clc-scheduler-toolbar-title-font-size);
  font-weight: var(--clc-scheduler-toolbar-title-font-weight);
  color: var(--clc-scheduler-toolbar-title-color);
}

.clc-view-header {
  border-block-start: var(--clc-scheduler-header-border);
  border-block-end: var(--clc-scheduler-header-border);
  background-color: var(--clc-scheduler-header-background-color);
  text-transform: var(--clc-scheduler-header-text-transform);
  color: var(--clc-scheduler-header-color);
  display: flex;
}
.clc-view-header .clc-slot-header {
  flex: 1;
  text-align: center;
  font-size: var(--clc-scheduler-header-font-size);
  padding: var(--clc-scheduler-header-padding);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.clc-view-header .clc-slot-hour-header {
  flex: 0 0 5rem;
}

.clc-view {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.clc-view-content {
  flex: auto;
  display: flex;
  overflow: auto;
  height: 0;
}
.clc-view-content:focus {
  outline: var(--clc-outline-normal);
}
.clc-view-content:focus-visible {
  outline: var(--clc-scheduler-focus-outline);
  outline-offset: var(--clc-scheduler-focus-outline-offset);
}
.clc-view-content:focus-visible .clc-slot:has(.clc-state-focused) {
  outline: var(--clc-scheduler-focus-outline);
  outline-offset: var(--clc-scheduler-focus-outline-offset);
}
.clc-view-content:focus-visible .clc-event.clc-state-focused .clc-event-content {
  outline: var(--clc-scheduler-focus-outline);
  outline-offset: var(--clc-outline-offset);
}

.clc-event-agenda {
  position: unset;
}
.clc-event-agenda .clc-event-agenda-title {
  font-weight: bold;
}
.clc-event-agenda .clc-event-agenda-time {
  font-style: italic;
}

.clc-view-content-agenda {
  display: flex;
  flex-direction: column;
}

.clc-slot-header-agenda {
  width: 10%;
  min-width: 10%;
  margin-top: 1.5rem;
}
.clc-slot-header-agenda .clc-slot-header-agenda-day-title {
  font-size: var(--clc-scheduler-header-agenda-font-size-small);
  text-transform: var(--clc-scheduler-header-agenda-text-transform);
  color: var(--clc-scheduler-header-color);
  text-align: center;
}
.clc-slot-header-agenda .clc-slot-header-agenda-day-number {
  font-size: var(--clc-scheduler-header-agenda-font-size);
  font-weight: var(--clc-scheduler-header-agenda-font-weight);
  text-transform: var(--clc-scheduler-header-text-transform);
  color: var(--clc-scheduler-header-color);
  text-align: center;
}

.clc-slot-agenda {
  width: 85%;
  min-width: 85%;
}

.clc-slots {
  flex: 1;
  font-size: 1rem;
}

.clc-scheduler-nav-views {
  display: flex;
}
.clc-scheduler-nav-views .clc-button.clc-primary {
  background: var(--clc-scheduler-view-button-background-color);
  color: var(--clc-scheduler-view-button-color);
  border: var(--clc-scheduler-view-button-border);
  border-radius: 0;
  border-inline-end: none;
}
.clc-scheduler-nav-views .clc-button.clc-primary:first-child {
  border-start-start-radius: var(--clc-scheduler-border-radius);
  border-end-start-radius: var(--clc-scheduler-border-radius);
}
.clc-scheduler-nav-views .clc-button.clc-primary:last-child {
  border-start-end-radius: var(--clc-scheduler-border-radius);
  border-end-end-radius: var(--clc-scheduler-border-radius);
  border-inline-end: var(--clc-scheduler-view-button-border);
}
.clc-scheduler-nav-views .clc-button.clc-primary.clc-state-active {
  background-color: var(--clc-scheduler-view-selected-background-color);
  border-color: var(--clc-scheduler-view-selected-border-color);
  color: var(--clc-scheduler-view-selected-color);
}
.clc-scheduler-nav-views .clc-button.clc-primary:focus-visible {
  z-index: 1;
}

.clc-scheduler-nav-prev-next {
  display: flex;
}
.clc-scheduler-nav-prev-next .clc-button {
  background-color: var(--clc-scheduler-prev-next-button-background-color);
  color: var(--clc-scheduler-prev-next-button-color);
  padding-block: var(--clc-scheduler-prev-next-button-padding-block);
  padding-inline: var(--clc-scheduler-prev-next-button-padding-inline);
  font-size: var(--clc-scheduler-prev-next-button-font-size);
}
.clc-scheduler-nav-prev-next .clc-button.clc-today {
  margin-inline-start: var(--clc-scheduler-today-button-margin-inline-start);
  padding: var(--clc-scheduler-today-button-padding);
  font-size: var(--clc-scheduler-today-button-font-size);
  text-transform: var(--clc-scheduler-today-button-text-transform);
}
.clc-scheduler-nav-prev-next .clc-button.clc-zoom-to-fit {
  margin-inline-start: var(--clc-scheduler-today-button-margin-inline-start);
}
.clc-scheduler-nav-prev-next .clc-button.clc-prev {
  border-start-start-radius: var(--clc-scheduler-prev-button-border-start-start-radius);
  border-start-end-radius: var(--clc-scheduler-prev-button-border-start-end-radius);
  border-end-start-radius: var(--clc-scheduler-prev-button-border-end-start-radius);
  border-end-end-radius: var(--clc-scheduler-prev-button-border-end-end-radius);
}
.clc-scheduler-nav-prev-next .clc-button.clc-next {
  border-start-start-radius: var(--clc-scheduler-next-button-border-start-start-radius);
  border-start-end-radius: var(--clc-scheduler-next-button-border-start-end-radius);
  border-end-start-radius: var(--clc-scheduler-next-button-border-end-start-radius);
  border-end-end-radius: var(--clc-scheduler-next-button-border-end-end-radius);
}
.clc-scheduler-nav-prev-next .clc-button:focus-visible {
  z-index: 1;
}

/* Right-to-left .clc-scheduler-nav-prev-next */
*[dir=rtl] .clc-scheduler-nav-prev-next .clc-button.clc-prev .clci,
*[dir=rtl] .clc-scheduler-nav-prev-next .clc-button.clc-next .clci {
  transform: rotate(180deg);
}

.clc-event-list .clc-event {
  position: static;
}

.clc-week {
  flex: 1;
  font-size: 1rem;
}
.clc-week .clc-slots {
  display: flex;
  height: 100%;
}
.clc-week:first-child .clc-slot {
  border-block-start: none;
}

.clc-month {
  flex: 1;
  font-size: 1rem;
}
.clc-month .clc-slots {
  display: flex;
  height: 100%;
}
.clc-month:nth-child(2) .clc-slot {
  border-block-start: none;
}
.clc-month .clc-slot {
  flex: 1;
  height: 100%;
  display: flex;
  border-block-start: 1px solid var(--clc-scheduler-border-color);
  border-inline-start: 1px solid var(--clc-scheduler-border-color);
}
.clc-month .clc-slot:first-child {
  position: sticky;
  z-index: 1;
  inset-inline-start: 0;
  justify-content: center;
  align-items: center;
  background-color: var(--clc-scheduler-header-background-color);
  border-inline-start: none;
  border-inline-end: 1px solid var(--clc-scheduler-border-color);
}
.clc-month .clc-slot:first-child .clc-slot-header {
  text-align: center;
  font-size: var(--clc-scheduler-header-font-size);
  padding: var(--clc-scheduler-header-padding);
  text-transform: var(--clc-scheduler-header-text-transform);
  color: var(--clc-scheduler-header-color);
}
.clc-month .clc-slot:nth-child(2) {
  border-inline-start: none;
}

.clc-day-view .clc-slot:nth-of-type(2) {
  border-block-start: none;
}
.clc-day-view .clc-view-header {
  overflow-y: scroll;
  scrollbar-width: auto;
}

.clc-week-view-content {
  flex: 1;
  display: flex;
}
.clc-week-view-content:focus {
  outline: var(--clc-outline-normal);
}
.clc-week-view-content:focus-visible {
  outline: var(--clc-scheduler-focus-outline);
  outline-offset: var(--clc-scheduler-focus-outline-offset);
}
.clc-week-view-content:focus-visible .clc-slots.clc-state-focused {
  outline: var(--clc-scheduler-focus-outline);
  outline-offset: var(--clc-scheduler-focus-outline-offset);
}
.clc-week-view-content:focus-visible .clc-event.clc-state-focused .clc-event-content {
  outline: var(--clc-scheduler-focus-outline);
  outline-offset: var(--clc-outline-offset);
}

.clc-week-view .clc-slot:nth-of-type(2) {
  border-block-start: none;
}
.clc-week-view .clc-view-header {
  overflow-y: scroll;
  scrollbar-width: auto;
}

.clc-month-view .clc-view-content {
  flex: 1;
  flex-direction: column;
}
.clc-month-view .clc-slot {
  flex: 1;
  height: 100%;
  cursor: pointer;
  align-items: flex-start;
}
.clc-month-view .clc-slot:first-child {
  border-inline-start: none;
}
.clc-month-view .clc-slot-title {
  display: flex;
  align-items: baseline;
  flex: 1;
}

.clc-planner-view {
  overflow: auto;
}
.clc-planner-view .clc-view-header {
  position: sticky;
  inset-block-start: 0px;
  min-height: 2.25rem;
  z-index: 2;
}
.clc-planner-view:focus-visible {
  outline: var(--clc-scheduler-focus-outline);
  outline-offset: var(--clc-scheduler-focus-outline-offset);
}
.clc-planner-view:focus-visible .clc-slot.clc-state-focused {
  outline: var(--clc-scheduler-focus-outline);
  outline-offset: var(--clc-scheduler-focus-outline-offset);
}
.clc-planner-view:focus-visible .clc-event.clc-state-focused .clc-event-content {
  outline: var(--clc-scheduler-focus-outline);
  outline-offset: var(--clc-outline-offset);
}
.clc-planner-view .clc-month .clc-slot:first-child .clc-slot-header {
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
}
.clc-planner-view .clc-month .clc-slot:last-child {
  justify-content: center;
  align-items: center;
  background-color: var(--clc-scheduler-header-background-color);
}
.clc-planner-view .clc-month .clc-slot:last-child .clc-slot-header {
  writing-mode: vertical-rl;
  text-align: center;
  font-size: var(--clc-scheduler-header-font-size);
  padding: var(--clc-scheduler-header-padding);
  text-transform: var(--clc-scheduler-header-text-transform);
  color: var(--clc-scheduler-header-color);
}
.clc-planner-view .clc-month .clc-slot.clc-other-month {
  background-color: var(--clc-scheduler-other-month-background-color);
}
.clc-planner-view .clc-month .clc-slot.clc-weekend {
  color: var(--clc-scheduler-weekend-color);
  background-color: var(--clc-scheduler-weekend-background-color);
}
.clc-planner-view .clc-slot-title {
  display: flex;
  align-items: baseline;
  flex: 1;
}

.clc-timeline-view {
  flex: auto;
  overflow: auto;
  flex-wrap: wrap;
  flex-direction: unset;
}
.clc-timeline-view .clc-view-header {
  position: sticky;
  inset-block-start: 0px;
  min-height: 36px;
  z-index: 2;
}
.clc-timeline-view .clc-view-header .clc-slot-header {
  min-width: var(--clc-scheduler-timeline-slot-width);
  flex: 0 0 auto;
}
.clc-timeline-view:focus-visible {
  outline: var(--clc-scheduler-focus-outline);
  outline-offset: var(--clc-scheduler-focus-outline-offset);
}
.clc-timeline-view:focus-visible .clc-slot.clc-state-focused {
  outline: var(--clc-scheduler-focus-outline);
  outline-offset: var(--clc-scheduler-focus-outline-offset);
}
.clc-timeline-view:focus-visible .clc-event.clc-state-focused .clc-event-content {
  outline: var(--clc-scheduler-focus-outline);
  outline-offset: var(--clc-outline-offset);
}
.clc-timeline-view .clc-month {
  flex: 0 0 auto;
}
.clc-timeline-view .clc-month .clc-slots {
  flex: 0 0 auto;
}
.clc-timeline-view .clc-month .clc-slot {
  width: var(--clc-scheduler-timeline-slot-width);
  height: var(--clc-scheduler-timeline-slot-height);
}
.clc-timeline-view .clc-month .clc-slot.clc-other-month {
  background-color: var(--clc-scheduler-other-month-background-color);
}
.clc-timeline-view .clc-month .clc-slot.clc-weekend {
  color: var(--clc-scheduler-weekend-color);
  background-color: var(--clc-scheduler-weekend-background-color);
}
.clc-timeline-view .clc-slot-title {
  display: flex;
  align-items: baseline;
  flex: 1;
}

.clc-year-view {
  overflow: auto;
  padding: var(--clc-scheduler-year-padding);
  --clc-gap: var(--clc-scheduler-year-padding);
}
.clc-year-view .clc-flex-column,
.clc-year-view .clc-week {
  min-width: fit-content;
}
.clc-year-view .clc-slot {
  flex: 1;
  border-block-start: none;
  justify-content: center;
  height: initial;
  padding: var(--clc-scheduler-year-slot-padding);
  cursor: pointer;
}
.clc-year-view .clc-slot .clc-slot-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
  width: var(--clc-scheduler-year-slot-title-width);
  min-width: 2rem;
  min-height: 2rem;
  border-radius: var(--clc-scheduler-year-slot-title-border-radius);
  transition: var(--clc-datepicker-calendar-transition);
}
.clc-year-view .clc-slot .clc-slot-title.clc-other-month {
  opacity: 0.5;
}
.clc-year-view .clc-slot .clc-slot-title.clc-has-appointments {
  color: var(--clc-scheduler-event-color);
  background-color: var(--clc-scheduler-event-background-color);
}
.clc-year-view .clc-slot .clc-slot-title.clc-state-focused {
  color: var(--clc-datepicker-calendar-hover-color);
  background: var(--clc-datepicker-calendar-hover-background-color);
}
.clc-year-view .clc-slot:hover .clc-slot-title:not(.clc-has-appointments) {
  color: var(--clc-datepicker-calendar-hover-color);
  background: var(--clc-datepicker-calendar-hover-background-color);
}

.clc-year-month:focus {
  outline: var(--clc-outline-normal);
}
.clc-year-month:focus-visible {
  outline: var(--clc-scheduler-focus-outline);
  outline-offset: var(--clc-outline-offset);
  border-radius: var(--clc-border-radius);
}

@container scheduler (width < 640px) {
  .clc-scheduler-nav .clc-scheduler-nav-prev-next {
    justify-content: space-between;
    margin-block-end: 0.5rem;
    margin-inline-end: 0.5rem;
    order: 1;
  }
  .clc-scheduler-nav .clc-scheduler-nav-title {
    justify-content: center;
    width: 100%;
    order: 3;
  }
  .clc-scheduler-nav .clc-scheduler-nav-views {
    margin-block-end: 0.5rem;
    justify-content: center;
    flex-grow: 1;
    order: 2;
  }
  .clc-scheduler-nav .clc-scheduler-nav-views .clc-button {
    flex-grow: 1;
    padding-inline-start: 0.5rem;
    padding-inline-end: 0.5rem;
  }
  .clc-scheduler-nav .clc-scheduler-nav-views .clc-button .clc-button-text {
    display: none;
  }
  .clc-slot-hours,
  .clc-view-header .clc-slot-hour-header {
    flex: 0 0 3rem;
  }
}
@container scheduler (width < 1400px) {
  .clc-planner-view {
    flex-wrap: wrap;
    flex-direction: unset;
  }
  .clc-planner-view .clc-view-header .clc-slot-header {
    flex: 0 0 auto;
    width: var(--clc-scheduler-planner-slot-width);
  }
  .clc-planner-view .clc-month {
    flex: 0 0 auto;
  }
  .clc-planner-view .clc-month .clc-slots {
    flex: 0 0 auto;
  }
  .clc-planner-view .clc-month .clc-slot {
    width: var(--clc-scheduler-planner-slot-width);
    height: var(--clc-scheduler-planner-slot-height);
  }
}
@media (max-width: 576px) {
  .clc-scheduler-nav .clc-scheduler-nav-prev-next {
    justify-content: space-between;
    margin-block-end: 0.5rem;
    margin-inline-end: 0.5rem;
    order: 1;
  }
  .clc-scheduler-nav .clc-scheduler-nav-title {
    justify-content: center;
    width: 100%;
    order: 3;
  }
  .clc-scheduler-nav .clc-scheduler-nav-views {
    margin-block-end: 0.5rem;
    justify-content: center;
    flex-grow: 1;
    order: 2;
  }
  .clc-scheduler-nav .clc-scheduler-nav-views .clc-button {
    flex-grow: 1;
    padding-inline-start: 0.5rem;
    padding-inline-end: 0.5rem;
  }
  .clc-scheduler-nav .clc-scheduler-nav-views .clc-button .clc-button-text {
    display: none;
  }
  .clc-slot-hours,
  .clc-view-header .clc-slot-hour-header {
    flex: 0 0 3rem;
  }
}
@media (max-width: 1399px) {
  .clc-planner-view {
    flex-wrap: wrap;
    flex-direction: unset;
  }
  .clc-planner-view .clc-view-header .clc-slot-header {
    flex: 0 0 auto;
    width: var(--clc-scheduler-planner-slot-width);
  }
  .clc-planner-view .clc-month {
    flex: 0 0 auto;
  }
  .clc-planner-view .clc-month .clc-slots {
    flex: 0 0 auto;
  }
  .clc-planner-view .clc-month .clc-slot {
    width: var(--clc-scheduler-planner-slot-width);
    height: var(--clc-scheduler-planner-slot-height);
  }
}
.clc-tabview {
  box-sizing: border-box;
  display: flex;
}
.clc-tabview.clc-tabview-top {
  flex-direction: column;
}
.clc-tabview.clc-tabview-top-right {
  flex-direction: column;
}
.clc-tabview.clc-tabview-bottom {
  flex-direction: column-reverse;
}
.clc-tabview.clc-tabview-bottom-right {
  flex-direction: column-reverse;
}
.clc-tabview.clc-tabview-left {
  flex-direction: row;
}
.clc-tabview.clc-tabview-right {
  flex-direction: row-reverse;
}

.clc-tabview-nav {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}
.clc-tabview-nav:focus {
  outline: var(--clc-outline-normal);
}
.clc-tabview-nav:focus-visible {
  outline: var(--clc-outline-focus);
  outline-offset: var(--clc-outline-offset);
}
.clc-tabview-nav:focus-visible .clc-state-focused:not(.clc-tabview-selected):not(.clc-state-disabled) {
  outline: var(--clc-tabs-tab-focus-outline);
  outline-offset: var(--clc-tabs-tab-focus-outline-offset);
}
.clc-tabview-nav li {
  border: var(--clc-tabs-border);
  background-color: var(--clc-tabs-tab-background-color);
  color: var(--clc-tabs-tab-color);
  transition: var(--clc-tabs-transition);
}
.clc-tabview-nav li:hover:not(.clc-tabview-selected):not(.clc-state-disabled) {
  background-color: var(--clc-tabs-tab-hover-background-color);
  color: var(--clc-tabs-tab-hover-color);
}
.clc-tabview-nav li a,
.clc-tabview-nav li a:not([href]):not([class]),
.clc-tabview-nav li button {
  display: flex;
  align-items: center;
  color: inherit;
  padding-block: var(--clc-tabs-tab-padding-block);
  padding-inline: var(--clc-tabs-tab-padding-inline);
  font-size: var(--clc-tabs-tab-font-size);
  line-height: var(--clc-tabs-tab-line-height);
  font-weight: var(--clc-tabs-tab-font-weight);
  text-transform: var(--clc-tabs-tab-text-transform);
  letter-spacing: var(--clc-tabs-tab-letter-spacing);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}
.clc-tabview-nav li a:hover,
.clc-tabview-nav li a:not([href]):not([class]):hover,
.clc-tabview-nav li button:hover {
  text-decoration: none;
}
.clc-tabview-nav li.clc-state-disabled {
  opacity: 0.5;
}
.clc-tabview-nav .clc-state-focused:not(.clc-tabview-selected):not(.clc-state-disabled) {
  background-color: var(--clc-tabs-tab-focus-background-color);
  border-color: var(--clc-tabs-tab-focus-background-color);
  color: var(--clc-tabs-tab-focus-color);
}
.clc-tabview-nav .clc-tabview-selected {
  background-color: var(--clc-tabs-tab-selected-background-color);
  color: var(--clc-tabs-tab-selected-color);
  position: relative;
}
.clc-tabview-top > .clc-tabview-nav {
  flex-direction: row;
}
.clc-tabview-top > .clc-tabview-nav li {
  border-top-width: 2px;
  border-bottom-color: var(--clc-tabs-tab-background-color);
  border-radius: var(--clc-tabs-border-radius) var(--clc-tabs-border-radius) 0 0;
}
.clc-tabview-top > .clc-tabview-nav li:hover:not(.clc-tabview-selected):not(.clc-state-disabled) {
  border-top-color: var(--clc-tabs-tab-selected-top-border-color);
}
.clc-tabview-top > .clc-tabview-nav .clc-tabview-selected {
  border-bottom-color: var(--clc-tabs-background-color);
  margin-bottom: -1px;
  border-top-color: var(--clc-tabs-tab-selected-top-border-color);
}
.clc-tabview-top-right > .clc-tabview-nav {
  justify-content: right;
}
.clc-tabview-bottom > .clc-tabview-nav {
  flex-direction: row;
}
.clc-tabview-bottom > .clc-tabview-nav li {
  border-bottom-width: 2px;
  border-top-color: var(--clc-tabs-tab-background-color);
  border-radius: 0 0 var(--clc-tabs-border-radius) var(--clc-tabs-border-radius);
}
.clc-tabview-bottom > .clc-tabview-nav li:hover:not(.clc-tabview-selected):not(.clc-state-disabled) {
  border-bottom-color: var(--clc-tabs-tab-selected-top-border-color);
}
.clc-tabview-bottom > .clc-tabview-nav .clc-tabview-selected {
  border-top-color: var(--clc-tabs-background-color);
  margin-top: -1px;
  padding-top: 1px;
  border-bottom-color: var(--clc-tabs-tab-selected-top-border-color);
}
.clc-tabview-bottom-right > .clc-tabview-nav {
  justify-content: right;
}
.clc-tabview-left > .clc-tabview-nav {
  flex-direction: column;
}
.clc-tabview-left > .clc-tabview-nav li {
  border-left-width: 2px;
  border-right-color: var(--clc-tabs-tab-background-color);
  border-radius: var(--clc-tabs-border-radius) 0 0 var(--clc-tabs-border-radius);
}
.clc-tabview-left > .clc-tabview-nav li:hover:not(.clc-tabview-selected):not(.clc-state-disabled) {
  border-left-color: var(--clc-tabs-tab-selected-top-border-color);
}
.clc-tabview-left > .clc-tabview-nav .clc-tabview-selected {
  border-right-color: var(--clc-tabs-background-color);
  margin-right: -1px;
  border-left-color: var(--clc-tabs-tab-selected-top-border-color);
}
.clc-tabview-right > .clc-tabview-nav {
  flex-direction: column;
}
.clc-tabview-right > .clc-tabview-nav li {
  border-right-width: 2px;
  border-left-color: var(--clc-tabs-tab-background-color);
  border-radius: 0 var(--clc-tabs-border-radius) var(--clc-tabs-border-radius) 0;
}
.clc-tabview-right > .clc-tabview-nav li:hover:not(.clc-tabview-selected):not(.clc-state-disabled) {
  border-right-color: var(--clc-tabs-tab-selected-top-border-color);
}
.clc-tabview-right > .clc-tabview-nav .clc-tabview-selected {
  border-left-color: var(--clc-tabs-background-color);
  margin-left: -1px;
  padding-left: 1px;
  border-right-color: var(--clc-tabs-tab-selected-top-border-color);
}
*[dir=rtl] .clc-tabview-left > .clc-tabview-nav, *[dir=rtl] .clc-tabview-right > .clc-tabview-nav {
  order: 1;
}

.clc-tabview-panels {
  background-color: var(--clc-tabs-background-color);
  border: var(--clc-tabs-border);
  box-shadow: var(--clc-tabs-shadow);
  flex: 1;
  overflow: auto;
}
.clc-tabview-top > .clc-tabview-panels {
  border-radius: 0 0 var(--clc-tabs-border-radius) var(--clc-tabs-border-radius);
}
.clc-tabview-bottom > .clc-tabview-panels {
  border-radius: var(--clc-tabs-border-radius) var(--clc-tabs-border-radius) 0 0;
}
.clc-tabview-left > .clc-tabview-panels {
  border-radius: 0 var(--clc-tabs-border-radius) var(--clc-tabs-border-radius) 0;
}
.clc-tabview-right > .clc-tabview-panels {
  border-radius: var(--clc-tabs-border-radius) 0 0 var(--clc-tabs-border-radius);
}

.clc-tabview-panel {
  padding: var(--clc-tabs-padding);
}

.clc-tabview-icon {
  font-size: var(--clc-tabs-icon-font-size);
  margin-inline: var(--clc-tabs-icon-margin-inline);
}

.clc-tabview-nav li[draggable=true] {
  cursor: grab;
}
.clc-tabview-nav li[draggable=true]:active {
  cursor: grabbing;
}

.clc-tabview-dragging {
  opacity: 0.5;
}

.clc-tabview-drag-over {
  box-shadow: inset 2px 0 0 0 var(--clc-tabs-tab-selected-top-border-color);
}
.clc-tabview-left > .clc-tabview-nav .clc-tabview-drag-over, .clc-tabview-right > .clc-tabview-nav .clc-tabview-drag-over {
  box-shadow: inset 0 2px 0 0 var(--clc-tabs-tab-selected-top-border-color);
}

.clc-tooltip {
  box-sizing: border-box;
  position: absolute;
  transition: top 0.2s, left 0.2s;
  top: 0;
  left: 0;
}

.clc-tooltip:has(.clc-chart-tooltip) {
  pointer-events: none;
}

.clc-tooltip-content {
  background: var(--clc-tooltip-background-color);
  color: var(--clc-tooltip-color);
  box-shadow: var(--clc-tooltip-shadow);
  padding: var(--clc-tooltip-padding);
  border-radius: var(--clc-tooltip-border-radius);
  font-size: var(--clc-tooltip-font-size);
  white-space: normal;
  max-width: min(30rem, 90vw);
}

.clc-tooltip .clc-top-tooltip-content {
  margin-bottom: 16px;
}

.clc-tooltip .clc-top-tooltip-content:after {
  content: " ";
  position: absolute;
  width: 8px;
  height: 8px;
  inset-block-end: 0;
  inset-inline-start: 12px;
  background-color: inherit;
  transform-origin: center;
  transform: translate(-50%, -12px) rotate(45deg);
  border-bottom: inherit;
  border-right: inherit;
}

.clc-tooltip .clc-bottom-tooltip-content {
  margin-top: -8px;
}

.clc-tooltip .clc-bottom-tooltip-content:after {
  content: " ";
  position: absolute;
  width: 8px;
  height: 8px;
  inset-block-start: 0;
  inset-inline-start: 12px;
  background-color: inherit;
  transform-origin: center;
  transform: translate(-50%, -12px) rotate(45deg);
  border-bottom: inherit;
  border-right: inherit;
}

.clc-tooltip .clc-left-tooltip-content {
  margin-right: 8px;
}

.clc-tooltip .clc-left-tooltip-content:after {
  content: " ";
  position: absolute;
  width: 8px;
  height: 8px;
  top: 20px;
  right: 0;
  background-color: inherit;
  transform-origin: center;
  transform: translate(-50%, -10px) rotate(45deg);
  border-bottom: inherit;
  border-right: inherit;
}

.clc-tooltip .clc-right-tooltip-content {
  margin-left: 0;
}

.clc-tooltip .clc-right-tooltip-content:after {
  content: " ";
  position: absolute;
  width: 8px;
  height: 8px;
  top: 20px;
  left: 0;
  background-color: inherit;
  transform-origin: center;
  transform: translate(-50%, -10px) rotate(45deg);
  border-bottom: inherit;
  border-right: inherit;
}

.clc-tooltip .clc-mouse-tooltip-content {
  margin-bottom: 0;
}

.clc-dialog-wrapper {
  box-sizing: border-box;
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  z-index: var(--clc-dialog-zindex);
  align-items: center;
  justify-content: center;
}

.clc-dialog {
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  max-height: 100%;
  min-height: 150px;
  z-index: var(--clc-dialog-zindex);
  background-color: var(--clc-dialog-background-color);
  box-shadow: var(--clc-dialog-shadow);
  border-radius: var(--clc-dialog-border-radius);
}

.clc-dialog-side {
  box-sizing: border-box;
  position: fixed;
  z-index: var(--clc-dialog-zindex);
  background-color: var(--clc-dialog-background-color);
  box-shadow: var(--clc-dialog-shadow);
  border-radius: var(--clc-dialog-border-radius);
  overflow-y: auto;
}
.clc-dialog-side > .clc-dialog-resize-bar {
  flex: 0 0 auto;
  position: absolute;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clc-dialog-resize-bar-color);
  background-color: var(--clc-dialog-resize-bar-background-color);
  opacity: 0.4;
  user-select: none;
}
.clc-dialog-side > .clc-dialog-resize-bar > .clc-resize {
  pointer-events: none;
  border: 1px solid var(--clc-dialog-resize-bar-color);
  border-radius: 1px;
}
.clc-dialog-side > .clc-dialog-resize-bar:hover {
  background-color: var(--clc-dialog-resize-bar-background-color);
  opacity: var(--clc-dialog-resize-bar-hover-opacity);
}
.clc-dialog-side-position-right, .clc-dialog-side-position-left {
  flex-direction: row;
}
.clc-dialog-side-position-right > .clc-dialog-resize-bar, .clc-dialog-side-position-left > .clc-dialog-resize-bar {
  width: var(--clc-dialog-resize-bar-thickness);
  height: var(--clc-dialog-resize-bar-length);
  cursor: col-resize;
  flex-direction: column;
}
.clc-dialog-side-position-right > .clc-dialog-resize-bar > .clc-resize, .clc-dialog-side-position-left > .clc-dialog-resize-bar > .clc-resize {
  height: var(--clc-dialog-resize-bar-handle-size);
  margin: 2px 0;
}
.clc-dialog-side-position-top, .clc-dialog-side-position-bottom {
  flex-direction: column;
}
.clc-dialog-side-position-top > .clc-dialog-resize-bar, .clc-dialog-side-position-bottom > .clc-dialog-resize-bar {
  width: var(--clc-dialog-resize-bar-length);
  height: var(--clc-dialog-resize-bar-thickness);
  cursor: row-resize;
  flex-direction: row;
}
.clc-dialog-side-position-top > .clc-dialog-resize-bar > .clc-resize, .clc-dialog-side-position-bottom > .clc-dialog-resize-bar > .clc-resize {
  width: var(--clc-dialog-resize-bar-handle-size);
  margin: 0 2px;
}
.clc-dialog-side-position-right > .clc-dialog-resize-bar {
  left: 0;
}
.clc-dialog-side-position-left > .clc-dialog-resize-bar {
  right: 0;
}
.clc-dialog-side-position-bottom > .clc-dialog-resize-bar {
  top: 0;
}
.clc-dialog-side-position-top > .clc-dialog-resize-bar {
  bottom: 0;
}

.clc-dialog-titlebar,
.clc-dialog-side-titlebar {
  display: flex;
  flex: 0 0 auto;
  align-items: normal;
  padding-block: var(--clc-dialog-title-padding-block);
  padding-inline: var(--clc-dialog-title-padding-inline);
  font-size: var(--clc-dialog-title-font-size);
  line-height: var(--clc-dialog-title-line-height);
  background-color: var(--clc-dialog-title-background-color);
  border-block-end: var(--clc-dialog-title-border);
}

.clc-dialog-title,
.clc-dialog-side-title {
  flex: auto;
  font-weight: var(--clc-dialog-title-font-weight);
  letter-spacing: var(--clc-dialog-title-letter-spacing);
  color: var(--clc-dialog-title-color);
  user-select: none;
}

.clc-dialog-titlebar-close,
.clc-dialog-side-titlebar-close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.clc-dialog-titlebar-close .clci-times,
.clc-dialog-side-titlebar-close .clci-times {
  font-size: var(--clc-dialog-close-font-size);
  color: var(--clc-dialog-close-color);
  vertical-align: var(--clc-dialog-close-vertical-align);
}
.clc-dialog-titlebar-close .clci-times:before,
.clc-dialog-side-titlebar-close .clci-times:before {
  content: "close";
}
.clc-dialog-titlebar-close:hover .clci-times,
.clc-dialog-side-titlebar-close:hover .clci-times {
  color: var(--clc-dialog-close-hover-color);
}

.clc-dialog-content,
.clc-dialog-side-content {
  flex: 0 1 auto;
  padding: var(--clc-dialog-content-padding);
  overflow: auto;
}

.clc-dialog-confirm, .clc-dialog-alert {
  max-width: 400px;
  margin: 0.75rem;
}

.clc-dialog-confirm-message, .clc-dialog-alert-message {
  margin-block-end: 1.5rem;
}

.clc-dialog-confirm-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.clc-dialog-confirm-buttons .clc-button {
  flex: 8rem 1;
  min-width: fit-content;
}

.clc-dialog-alert-buttons {
  text-align: end;
  gap: 0.5rem;
}
.clc-dialog-alert-buttons .clc-button {
  flex: 8rem 1;
  min-width: fit-content;
}

.clc-dialog-mask {
  position: fixed;
  z-index: var(--clc-dialog-mask-zindex);
  width: 100%;
  height: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  background-color: var(--clc-dialog-mask-background-color);
  opacity: 0.5;
}

.no-scroll {
  overflow: hidden;
  padding-inline-end: 15px;
}

.clc-dialog-side-position-right {
  right: 0;
  min-width: 150px;
  width: 400px;
  max-width: 100%;
  height: 100%;
}

.clc-dialog-side-position-left {
  left: 0;
  min-width: 150px;
  width: 400px;
  max-width: 100%;
  height: 100%;
}

.clc-dialog-side-position-top {
  top: 0;
  min-height: 150px;
  height: 250px;
  width: 100%;
}

.clc-dialog-side-position-bottom {
  bottom: 0;
  min-height: 150px;
  height: 250px;
  width: 100%;
}

@keyframes clc-dialog-open-scale {
  from {
    scale: 0.5;
  }
  to {
    scale: 1;
  }
}
@keyframes clc-dialog-open-opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.clc-dialog.clc-open {
  animation: var(--clc-dialog-transition) clc-dialog-open-opacity, var(--clc-dialog-transition) clc-dialog-open-scale;
}
.clc-dialog:has(.clc-chart).clc-open {
  animation: var(--clc-dialog-transition) clc-dialog-open-opacity;
}

@keyframes clc-side-dialog-right-open {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes clc-side-dialog-right-close {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
.clc-dialog-side-position-right.clc-open {
  animation: var(--clc-dialog-transition) clc-side-dialog-right-open;
}
.clc-dialog-side-position-right.clc-close {
  animation: var(--clc-dialog-transition) clc-side-dialog-right-close;
  transform: translateX(100%);
}

@keyframes clc-side-dialog-top-open {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes clc-side-dialog-top-close {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
.clc-dialog-side-position-top.clc-open {
  animation: var(--clc-dialog-transition) clc-side-dialog-top-open;
}
.clc-dialog-side-position-top.clc-close {
  animation: var(--clc-dialog-transition) clc-side-dialog-top-close;
  transform: translateX(-100%);
}

@keyframes clc-side-dialog-bottom-open {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes clc-side-dialog-bottom-close {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
.clc-dialog-side-position-bottom.clc-open {
  animation: var(--clc-dialog-transition) clc-side-dialog-bottom-open;
}
.clc-dialog-side-position-bottom.clc-close {
  animation: var(--clc-dialog-transition) clc-side-dialog-bottom-close;
  transform: translateY(100%);
}

@keyframes clc-side-dialog-left-open {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes clc-side-dialog-left-close {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.clc-dialog-side-position-left.clc-open {
  animation: var(--clc-dialog-transition) clc-side-dialog-left-open;
}
.clc-dialog-side-position-left.clc-close {
  animation: var(--clc-dialog-transition) clc-side-dialog-left-close;
  transform: translateX(-100%);
}

@media (max-width: 768px) {
  .clc-dialog:not(.clc-dialog-confirm):not(.clc-dialog-alert) {
    position: absolute;
    max-width: 100% !important;
    inset-block-start: 0px !important;
  }
  .clc-dialog-content {
    -webkit-overflow-scrolling: touch;
  }
  .clc-dialog-confirm, .clc-dialog-alert {
    max-width: 355px;
  }
  .no-scroll {
    padding-inline-end: 0;
  }
}
.clc-notification {
  box-sizing: border-box;
  position: fixed;
  z-index: 1002;
  inset-block-start: 100px;
  inset-inline-end: 1rem;
}

.clc-notification-item-wrapper {
  position: relative;
  width: 250px;
  min-width: 20rem;
  background-color: var(--clc-notification-container-background-color);
  margin: 1rem 0;
}
.clc-notification-item-wrapper > .clc-progressbar {
  position: absolute;
  inset-block-end: var(--clc-notification-border-radius);
  inset-inline: var(--clc-notification-border-radius);
  --clc-progressbar-height: 0.25rem;
  --clc-progressbar-border-radius: var(--clc-notification-border-radius);
}
.clc-notification-item-wrapper:has(> .clc-progressbar) .clc-notification-content {
  margin-block-end: var(--clc-notification-border-radius);
}

.clc-notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--clc-notification-gap);
  border-radius: var(--clc-notification-border-radius);
  box-shadow: var(--clc-notification-shadow);
  padding: var(--clc-notification-padding);
}
.clc-notification-success .clc-notification-item {
  color: var(--clc-notification-success-color);
  background-color: var(--clc-notification-success-background-color);
}
.clc-notification-warn .clc-notification-item {
  color: var(--clc-notification-warning-color);
  background-color: var(--clc-notification-warning-background-color);
}
.clc-notification-error .clc-notification-item {
  color: var(--clc-notification-error-color);
  background-color: var(--clc-notification-error-background-color);
}
.clc-notification-info .clc-notification-item {
  color: var(--clc-notification-info-color);
  background-color: var(--clc-notification-info-background-color);
}

.clc-notification-message-wrapper {
  flex: auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--clc-notification-gap);
}

.clc-notification-message {
  flex: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.clc-notification-title,
.clc-notification-content {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.clc-notification-title {
  font-weight: bold;
}

.clc-notification-icon {
  margin: var(--clc-notification-icon-margin);
}
.clc-notification-icon.clci-check {
  color: var(--clc-notification-success-icon-color);
}
.clc-notification-icon.clci-check:before {
  content: "check";
}
.clc-notification-icon.clci-exclamation-triangle {
  color: var(--clc-notification-warning-icon-color);
}
.clc-notification-icon.clci-exclamation-triangle:before {
  content: "warning";
}
.clc-notification-icon.clci-info-circle {
  color: var(--clc-notification-info-icon-color);
}
.clc-notification-icon.clci-info-circle:before {
  content: "info";
}
.clc-notification-icon.clci-times {
  color: var(--clc-notification-error-icon-color);
}
.clc-notification-icon.clci-times:before {
  content: "error";
}

.clc-notification-close {
  cursor: pointer;
  color: inherit;
  opacity: 0.75;
  background: none;
  border: none;
  padding: 0;
}
.clc-notification-close:before {
  content: "close";
}

.clc-form {
  box-sizing: border-box;
}

.clc-message {
  box-sizing: border-box;
}

.clc-messages-error {
  display: inline-block;
  color: var(--clc-form-error-color);
  font-size: var(--clc-form-error-font-size);
  padding: var(--clc-validator-text-padding);
}

.clc-message-popup {
  position: absolute;
  z-index: 1;
  background-color: var(--clc-validator-background-color);
  transform: var(--clc-validator-transform);
  box-shadow: var(--clc-validator-shadow);
  padding: var(--clc-validator-padding);
  border-radius: var(--clc-border-radius);
  color: var(--clc-validator-color);
  pointer-events: none;
}
.clc-message-popup:before {
  content: "";
  border: var(--clc-validator-pointer-size) solid transparent;
  border-bottom-color: var(--clc-validator-background-color);
  position: absolute;
  inset-block-start: calc(-2 * var(--clc-validator-pointer-size));
  inset-inline-start: calc(var(--clc-border-radius) + var(--clc-validator-pointer-size) / 2);
}

body:not(.clc-default-scrollbars) .clc-layout::-webkit-scrollbar,
body:not(.clc-default-scrollbars) .clc-layout ::-webkit-scrollbar,
.clc-scrollbars::-webkit-scrollbar,
.clc-scrollbars ::-webkit-scrollbar {
  background-color: var(--clc-scrollbar-background-color);
  width: var(--clc-scrollbar-size);
  height: var(--clc-scrollbar-size);
}
body:not(.clc-default-scrollbars) .clc-layout::-webkit-scrollbar-thumb,
body:not(.clc-default-scrollbars) .clc-layout ::-webkit-scrollbar-thumb,
.clc-scrollbars::-webkit-scrollbar-thumb,
.clc-scrollbars ::-webkit-scrollbar-thumb {
  background: var(--clc-scrollbar-color);
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: var(--clc-scrollbar-border-radius);
  min-width: var(--clc-scrollbar-size);
  min-height: var(--clc-scrollbar-size);
}
body:not(.clc-default-scrollbars) .clc-layout::-webkit-scrollbar-corner,
body:not(.clc-default-scrollbars) .clc-layout ::-webkit-scrollbar-corner,
.clc-scrollbars::-webkit-scrollbar-corner,
.clc-scrollbars ::-webkit-scrollbar-corner {
  background-color: var(--clc-scrollbar-background-color);
}

.clc-login {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.clc-login .clc-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.clc-login .clc-form .clc-form-row {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.5rem;
}
.clc-login .clc-form .clc-form-row .clc-label {
  flex: 1 8rem;
}
.clc-login .clc-form .clc-form-row .clc-form-input-wrapper {
  flex: 3 14rem;
}
.clc-login .clc-form .clc-form-row .clc-textbox {
  display: block;
  width: 100%;
}
.clc-login .clc-form .clc-form-row .clc-textbox.invalid {
  border: var(--clc-border-danger);
}
.clc-login .clc-form .clc-form-row .clc-switch {
  margin-inline-end: 0.5rem;
}
.clc-login .clc-form .clc-messages-error {
  position: absolute;
}
.clc-login .clc-register {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background-color: var(--clc-login-register-background-color);
  margin-block: var(--clc-login-register-margin-block);
  margin-inline: var(--clc-login-register-margin-inline);
  padding-block: var(--clc-login-register-padding-block);
  padding-inline: var(--clc-login-register-padding-inline);
  border-radius: var(--clc-border-radius);
}
.clc-login .clc-register .clc-button {
  margin-block: var(--clc-login-register-button-margin-block);
  margin-inline: var(--clc-login-register-button-margin-inline);
}
.clc-login .clc-login-buttons {
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.clc-lookup-panel {
  background-color: var(--clc-lookup-panel-background-color);
  padding: var(--clc-lookup-panel-padding);
  container-type: inline-size;
  container-name: clc-lookup-panel;
}

.clc-lookup-search {
  display: flex;
  gap: var(--clc-lookup-search-gap);
  margin-bottom: var(--clc-lookup-search-margin-bottom);
  align-items: center;
}
.clc-lookup-search input {
  flex: auto;
}

.clc-lookup-search-input-container {
  position: relative;
  flex: auto;
  display: flex;
  align-items: center;
}
.clc-lookup-search-input-container input {
  flex: auto;
  padding-inline-end: 1.75rem;
}
.clc-lookup-search-input-container .clc-dropdown-clear-icon {
  position: absolute;
  inset-inline-end: 0.25rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  height: auto;
}

.ssrsviewer {
  display: flex;
}
.ssrsviewer iframe {
  flex: auto;
}

.clc-map {
  box-sizing: border-box;
  height: var(--clc-map-height);
  padding: var(--clc-map-padding);
  background-color: var(--clc-map-background-color);
  box-shadow: var(--clc-map-shadow);
  border-radius: var(--clc-border-radius);
}

.clc-map-container {
  height: 100%;
}

.clc-gauge,
.clc-arc-gauge,
.clc-linear-gauge {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  width: 300px;
  height: 300px;
}

.clc-gauge .clc-line,
.clc-gauge .clc-tick,
.clc-linear-gauge .clc-line,
.clc-linear-gauge .clc-tick {
  stroke: var(--clc-gauge-scale-color);
}
.clc-gauge .clc-tick-text,
.clc-linear-gauge .clc-tick-text {
  font-size: var(--clc-gauge-scale-font-size);
  fill: var(--clc-gauge-scale-label-color);
}

.clc-arc-gauge .clc-line,
.clc-arc-gauge .clc-tick {
  stroke: var(--clc-gauge-arc-scale-color);
}
.clc-arc-gauge .clc-tick-text {
  font-size: var(--clc-gauge-scale-font-size);
  fill: var(--clc-gauge-arc-scale-label-color);
}

.clc-linear-gauge {
  width: 300px;
  height: 150px;
}

.clc-gauge-value {
  position: absolute;
  transform: translateX(-50%);
  padding: 0.5rem;
}

.clc-arc-gauge-value {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0.5rem;
}

.clc-linear-gauge-value {
  position: absolute;
  padding: 0.5rem;
  white-space: nowrap;
  pointer-events: none;
  transition: left var(--clc-transition), top var(--clc-transition);
}

.clc-gauge-pointer,
.clc-linear-gauge-pointer {
  fill: var(--clc-gauge-pointer-color);
}

.clc-linear-gauge-pointer-draggable {
  cursor: grab;
}

.clc-linear-gauge-pointer-arrow {
  transition: transform var(--clc-transition);
}

.clc-linear-gauge-pointer-bar {
  transition: x var(--clc-transition), y var(--clc-transition), width var(--clc-transition), height var(--clc-transition);
}

.clc-linear-gauge-pointer-line {
  transition: x1 var(--clc-transition), y1 var(--clc-transition), x2 var(--clc-transition), y2 var(--clc-transition);
}

.clc-linear-gauge-range {
  shape-rendering: geometricPrecision;
}

.clc-arc-gauge-scale-value {
  fill: var(--clc-gauge-arc-value-color);
}

.clc-arc-gauge-scale {
  fill: var(--clc-gauge-arc-scale-color);
}

.clc-progressbar {
  box-sizing: border-box;
  border-radius: var(--clc-progressbar-border-radius);
  height: var(--clc-progressbar-height);
  position: relative;
  background-color: var(--clc-progressbar-background-color);
  text-align: center;
  display: flex;
  align-items: center;
}

.clc-progressbar-buffer-value {
  border-radius: var(--clc-progressbar-border-radius);
  position: absolute;
  inset-inline-start: 0;
  background-color: var(--clc-progressbar-value-background-color);
  height: 100%;
  width: var(--clc-progressbar-buffer-value);
  opacity: var(--clc-progressbar-buffer-opacity);
  transition: var(--clc-progressbar-value-transition);
}

.clc-progressbar-value {
  border-radius: var(--clc-progressbar-border-radius);
  position: absolute;
  inset-inline-start: 0;
  background-color: var(--clc-progressbar-value-background-color);
  height: 100%;
  width: var(--clc-progressbar-value);
  transition: var(--clc-progressbar-value-transition);
}

.clc-progressbar-label,
.clc-progressbar-label-value {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  margin-top: calc(-1 * var(--clc-progressbar-height) / 2);
  text-align: center;
  font-size: var(--clc-progressbar-font-size);
  line-height: var(--clc-progressbar-height);
}

.clc-progressbar-label-value {
  color: var(--clc-progressbar-color);
  clip-path: inset(0 0 0 var(--clc-progressbar-value));
}

.clc-progressbar-circular {
  box-sizing: border-box;
  position: relative;
}

.clc-progressbar-circular-viewbox {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.clc-progressbar-circular-label {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

.clc-progressbar-circular-background {
  stroke: var(--clc-progressbar-background-color);
  stroke-width: var(--clc-progressbar-circular-stroke-width);
}

.clc-progressbar-circular-buffer-value,
.clc-progressbar-circular-value {
  stroke-linecap: var(--clc-progressbar-circular-value-endpoint);
  stroke-width: var(--clc-progressbar-circular-value-stroke-width);
  transition: var(--clc-progressbar-value-transition);
}

.clc-progressbar-circular-buffer-value {
  stroke: var(--clc-progressbar-value-background-color);
  opacity: var(--clc-progressbar-buffer-opacity);
}

.clc-progressbar-circular-value {
  stroke: var(--clc-progressbar-value-background-color);
}

.clc-progressbar-determinate .clc-progressbar-circular-buffer-value,
.clc-progressbar-determinate .clc-progressbar-circular-value {
  stroke-dasharray: 100;
  transform: rotate(-0.25turn);
}

.clc-progressbar-indeterminate {
  overflow: hidden;
}
.clc-progressbar-indeterminate .clc-progressbar-value {
  background-color: transparent;
  /* 막대 이동을 left/right(레이아웃 속성) 대신 transform 으로 돌린다 — 매 프레임
     리플로우+재페인트 대신 합성만 일어난다. 등가식: 원래 구간 [a, b](부모 폭 기준)는
     width 100% + transform-origin left 에서 translateX(a) scaleX(b - a) 와 같다
     (translateX % 는 자기 폭 = 부모 폭 기준, scaleX 는 왼쪽 원점 기준). */
  /* 구간 환산: [-35%, 0%] → [100%, 190%] (본체), [-200%, 0%] → [107%, 108%] (꼬리) */
}
.clc-progressbar-indeterminate .clc-progressbar-value:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--clc-progressbar-value-background-color);
  transform-origin: left center;
  transform: translateX(-35%) scaleX(0.35);
  animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite clc-progressbar-indeterminate-anim;
}
*[dir=rtl] .clc-progressbar-indeterminate .clc-progressbar-value:before {
  animation-name: clc-progressbar-indeterminate-anim-rtl;
}
.clc-progressbar-indeterminate .clc-progressbar-value:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--clc-progressbar-value-background-color);
  transform-origin: left center;
  transform: translateX(-200%) scaleX(2);
  animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite clc-progressbar-indeterminate-anim-short;
  animation-delay: 1.15s;
}
*[dir=rtl] .clc-progressbar-indeterminate .clc-progressbar-value:after {
  animation-name: clc-progressbar-indeterminate-anim-short-rtl;
}
@keyframes clc-progressbar-indeterminate-anim {
  0% {
    transform: translateX(-35%) scaleX(0.35);
  }
  100%, 60% {
    transform: translateX(100%) scaleX(0.9);
  }
}
@keyframes clc-progressbar-indeterminate-anim-short {
  0% {
    transform: translateX(-200%) scaleX(2);
  }
  100%, 60% {
    transform: translateX(107%) scaleX(0.01);
  }
}
@keyframes clc-progressbar-indeterminate-anim-rtl {
  0% {
    transform: translateX(100%) scaleX(0.35);
  }
  60%, 100% {
    transform: translateX(-90%) scaleX(0.9);
  }
}
@keyframes clc-progressbar-indeterminate-anim-short-rtl {
  0% {
    transform: translateX(100%) scaleX(2);
  }
  60%, 100% {
    transform: translateX(-8%) scaleX(0.01);
  }
}
.clc-progressbar-indeterminate .clc-progressbar-circular-value {
  animation: clc-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, clc-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: 0 0;
}
@keyframes clc-progressbar-circular-indeterminate-anim-rotate {
  100% {
    transform: rotate(1turn);
  }
}
@keyframes clc-progressbar-circular-indeterminate-anim-dash {
  0% {
    stroke-dasharray: 1, 100;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 70, 100;
    stroke-dashoffset: -28;
  }
  100% {
    stroke-dasharray: 70, 100;
    stroke-dashoffset: -99;
  }
}

.clc-progressbar-determinate.clc-progressbar-working .clc-progressbar-value {
  background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--clc-text-contrast-color) 38%, transparent) 50%, transparent 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: clc-progressbar-working-shimmer 1.6s ease-in-out infinite;
}
.clc-progressbar-determinate.clc-progressbar-working .clc-progressbar-circular-value {
  animation: clc-progressbar-working-pulse 1.6s ease-in-out infinite;
}

@keyframes clc-progressbar-working-shimmer {
  from {
    background-position-x: 150%;
  }
  to {
    background-position-x: -50%;
  }
}
@keyframes clc-progressbar-working-pulse {
  0%, 100% {
    stroke-opacity: 1;
  }
  50% {
    stroke-opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .clc-progressbar-determinate.clc-progressbar-working .clc-progressbar-value,
  .clc-progressbar-determinate.clc-progressbar-working .clc-progressbar-circular-value {
    animation: none;
  }
}
.clc-progressbar.clc-progressbar-primary {
  color: var(--clc-on-primary);
}

.clc-progressbar-determinate.clc-progressbar-primary .clc-progressbar-buffer-value,
.clc-progressbar-determinate.clc-progressbar-primary .clc-progressbar-value {
  background-color: var(--clc-primary);
}
.clc-progressbar-determinate.clc-progressbar-primary .clc-progressbar-circular-buffer-value,
.clc-progressbar-determinate.clc-progressbar-primary .clc-progressbar-circular-value {
  stroke: var(--clc-primary);
}

.clc-progressbar-indeterminate.clc-progressbar-primary .clc-progressbar-value:before {
  background-color: var(--clc-primary);
}
.clc-progressbar-indeterminate.clc-progressbar-primary .clc-progressbar-value:after {
  background-color: var(--clc-primary);
}
.clc-progressbar-indeterminate.clc-progressbar-primary .clc-progressbar-circular-value {
  stroke: var(--clc-primary);
}

.clc-progressbar.clc-progressbar-secondary {
  color: var(--clc-on-secondary);
}

.clc-progressbar-determinate.clc-progressbar-secondary .clc-progressbar-buffer-value,
.clc-progressbar-determinate.clc-progressbar-secondary .clc-progressbar-value {
  background-color: var(--clc-secondary);
}
.clc-progressbar-determinate.clc-progressbar-secondary .clc-progressbar-circular-buffer-value,
.clc-progressbar-determinate.clc-progressbar-secondary .clc-progressbar-circular-value {
  stroke: var(--clc-secondary);
}

.clc-progressbar-indeterminate.clc-progressbar-secondary .clc-progressbar-value:before {
  background-color: var(--clc-secondary);
}
.clc-progressbar-indeterminate.clc-progressbar-secondary .clc-progressbar-value:after {
  background-color: var(--clc-secondary);
}
.clc-progressbar-indeterminate.clc-progressbar-secondary .clc-progressbar-circular-value {
  stroke: var(--clc-secondary);
}

.clc-progressbar.clc-progressbar-info {
  color: var(--clc-on-info);
}

.clc-progressbar-determinate.clc-progressbar-info .clc-progressbar-buffer-value,
.clc-progressbar-determinate.clc-progressbar-info .clc-progressbar-value {
  background-color: var(--clc-info);
}
.clc-progressbar-determinate.clc-progressbar-info .clc-progressbar-circular-buffer-value,
.clc-progressbar-determinate.clc-progressbar-info .clc-progressbar-circular-value {
  stroke: var(--clc-info);
}

.clc-progressbar-indeterminate.clc-progressbar-info .clc-progressbar-value:before {
  background-color: var(--clc-info);
}
.clc-progressbar-indeterminate.clc-progressbar-info .clc-progressbar-value:after {
  background-color: var(--clc-info);
}
.clc-progressbar-indeterminate.clc-progressbar-info .clc-progressbar-circular-value {
  stroke: var(--clc-info);
}

.clc-progressbar.clc-progressbar-warning {
  color: var(--clc-on-warning);
}

.clc-progressbar-determinate.clc-progressbar-warning .clc-progressbar-buffer-value,
.clc-progressbar-determinate.clc-progressbar-warning .clc-progressbar-value {
  background-color: var(--clc-warning);
}
.clc-progressbar-determinate.clc-progressbar-warning .clc-progressbar-circular-buffer-value,
.clc-progressbar-determinate.clc-progressbar-warning .clc-progressbar-circular-value {
  stroke: var(--clc-warning);
}

.clc-progressbar-indeterminate.clc-progressbar-warning .clc-progressbar-value:before {
  background-color: var(--clc-warning);
}
.clc-progressbar-indeterminate.clc-progressbar-warning .clc-progressbar-value:after {
  background-color: var(--clc-warning);
}
.clc-progressbar-indeterminate.clc-progressbar-warning .clc-progressbar-circular-value {
  stroke: var(--clc-warning);
}

.clc-progressbar.clc-progressbar-error {
  color: var(--clc-on-danger);
}

.clc-progressbar-determinate.clc-progressbar-error .clc-progressbar-buffer-value,
.clc-progressbar-determinate.clc-progressbar-error .clc-progressbar-value {
  background-color: var(--clc-danger);
}
.clc-progressbar-determinate.clc-progressbar-error .clc-progressbar-circular-buffer-value,
.clc-progressbar-determinate.clc-progressbar-error .clc-progressbar-circular-value {
  stroke: var(--clc-danger);
}

.clc-progressbar-indeterminate.clc-progressbar-error .clc-progressbar-value:before {
  background-color: var(--clc-danger);
}
.clc-progressbar-indeterminate.clc-progressbar-error .clc-progressbar-value:after {
  background-color: var(--clc-danger);
}
.clc-progressbar-indeterminate.clc-progressbar-error .clc-progressbar-circular-value {
  stroke: var(--clc-danger);
}

.clc-progressbar.clc-progressbar-danger {
  color: var(--clc-on-danger);
}

.clc-progressbar-determinate.clc-progressbar-danger .clc-progressbar-buffer-value,
.clc-progressbar-determinate.clc-progressbar-danger .clc-progressbar-value {
  background-color: var(--clc-danger);
}
.clc-progressbar-determinate.clc-progressbar-danger .clc-progressbar-circular-buffer-value,
.clc-progressbar-determinate.clc-progressbar-danger .clc-progressbar-circular-value {
  stroke: var(--clc-danger);
}

.clc-progressbar-indeterminate.clc-progressbar-danger .clc-progressbar-value:before {
  background-color: var(--clc-danger);
}
.clc-progressbar-indeterminate.clc-progressbar-danger .clc-progressbar-value:after {
  background-color: var(--clc-danger);
}
.clc-progressbar-indeterminate.clc-progressbar-danger .clc-progressbar-circular-value {
  stroke: var(--clc-danger);
}

.clc-progressbar.clc-progressbar-success {
  color: var(--clc-on-success);
}

.clc-progressbar-determinate.clc-progressbar-success .clc-progressbar-buffer-value,
.clc-progressbar-determinate.clc-progressbar-success .clc-progressbar-value {
  background-color: var(--clc-success);
}
.clc-progressbar-determinate.clc-progressbar-success .clc-progressbar-circular-buffer-value,
.clc-progressbar-determinate.clc-progressbar-success .clc-progressbar-circular-value {
  stroke: var(--clc-success);
}

.clc-progressbar-indeterminate.clc-progressbar-success .clc-progressbar-value:before {
  background-color: var(--clc-success);
}
.clc-progressbar-indeterminate.clc-progressbar-success .clc-progressbar-value:after {
  background-color: var(--clc-success);
}
.clc-progressbar-indeterminate.clc-progressbar-success .clc-progressbar-circular-value {
  stroke: var(--clc-success);
}

.clc-progressbar.clc-progressbar-base {
  color: var(--clc-text-contrast-color);
}

.clc-progressbar-determinate.clc-progressbar-base .clc-progressbar-buffer-value,
.clc-progressbar-determinate.clc-progressbar-base .clc-progressbar-value {
  background-color: var(--clc-base-600);
}
.clc-progressbar-determinate.clc-progressbar-base .clc-progressbar-circular-buffer-value,
.clc-progressbar-determinate.clc-progressbar-base .clc-progressbar-circular-value {
  stroke: var(--clc-base-600);
}

.clc-progressbar-indeterminate.clc-progressbar-base .clc-progressbar-value:before {
  background-color: var(--clc-base-600);
}
.clc-progressbar-indeterminate.clc-progressbar-base .clc-progressbar-value:after {
  background-color: var(--clc-base-600);
}
.clc-progressbar-indeterminate.clc-progressbar-base .clc-progressbar-circular-value {
  stroke: var(--clc-base-600);
}

.clc-progressbar.clc-progressbar-light {
  color: var(--clc-text-title-color);
}

.clc-progressbar-determinate.clc-progressbar-light .clc-progressbar-buffer-value,
.clc-progressbar-determinate.clc-progressbar-light .clc-progressbar-value {
  background-color: var(--clc-base-400);
}
.clc-progressbar-determinate.clc-progressbar-light .clc-progressbar-circular-buffer-value,
.clc-progressbar-determinate.clc-progressbar-light .clc-progressbar-circular-value {
  stroke: var(--clc-base-400);
}

.clc-progressbar-indeterminate.clc-progressbar-light .clc-progressbar-value:before {
  background-color: var(--clc-base-400);
}
.clc-progressbar-indeterminate.clc-progressbar-light .clc-progressbar-value:after {
  background-color: var(--clc-base-400);
}
.clc-progressbar-indeterminate.clc-progressbar-light .clc-progressbar-circular-value {
  stroke: var(--clc-base-400);
}

.clc-progressbar.clc-progressbar-dark {
  color: var(--clc-text-contrast-color);
}

.clc-progressbar-determinate.clc-progressbar-dark .clc-progressbar-buffer-value,
.clc-progressbar-determinate.clc-progressbar-dark .clc-progressbar-value {
  background-color: var(--clc-base-900);
}
.clc-progressbar-determinate.clc-progressbar-dark .clc-progressbar-circular-buffer-value,
.clc-progressbar-determinate.clc-progressbar-dark .clc-progressbar-circular-value {
  stroke: var(--clc-base-900);
}

.clc-progressbar-indeterminate.clc-progressbar-dark .clc-progressbar-value:before {
  background-color: var(--clc-base-900);
}
.clc-progressbar-indeterminate.clc-progressbar-dark .clc-progressbar-value:after {
  background-color: var(--clc-base-900);
}
.clc-progressbar-indeterminate.clc-progressbar-dark .clc-progressbar-circular-value {
  stroke: var(--clc-base-900);
}

.clc-progressbar-circular-lg {
  width: 6rem;
  height: 6rem;
  font-size: calc(var(--clc-progressbar-font-size) * 1.25);
}

.clc-progressbar-circular-md {
  width: 3rem;
  height: 3rem;
  font-size: calc(var(--clc-progressbar-font-size) * 0.75);
}

.clc-progressbar-circular-sm {
  width: 2rem;
  height: 2rem;
  font-size: calc(var(--clc-progressbar-font-size) * 0.5);
}

.clc-progressbar-circular-xs {
  width: 1.25rem;
  height: 1.25rem;
  font-size: calc(var(--clc-progressbar-font-size) * 0.375);
}

.clc-chart {
  box-sizing: border-box;
  position: relative;
  height: 300px;
}

.clc-area-series {
  fill-opacity: var(--clc-chart-area-opacity);
}

.clc-area-series .clc-area-gradient,
.clc-full-stacked-area-series .clc-area-gradient {
  fill-opacity: 1;
}

.clc-chart-axis-crosshair-label {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.clc-chart-axis-crosshair-label rect {
  fill: var(--clc-on-base);
  rx: var(--clc-border-radius);
  ry: var(--clc-border-radius);
}
.clc-chart-axis-crosshair-label text {
  fill: var(--clc-base);
  font-size: 12px;
  font-weight: bold;
  dominant-baseline: central;
}

@keyframes clc-series-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes clc-series-reveal-rtl {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes clc-series-grow-y {
  from {
    transform: translateY(var(--clc-zero-y, 0px)) scaleY(0) translateY(calc(-1 * var(--clc-zero-y, 0px)));
  }
  to {
    transform: translateY(var(--clc-zero-y, 0px)) scaleY(1) translateY(calc(-1 * var(--clc-zero-y, 0px)));
  }
}
@keyframes clc-series-grow-x {
  from {
    transform: translateX(var(--clc-zero-x, 0px)) scaleX(0) translateX(calc(-1 * var(--clc-zero-x, 0px)));
  }
  to {
    transform: translateX(var(--clc-zero-x, 0px)) scaleX(1) translateX(calc(-1 * var(--clc-zero-x, 0px)));
  }
}
@keyframes clc-series-reveal-down {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes clc-segment-expand {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes clc-marker-pop {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes clc-slice-expand {
  from {
    transform: translate(var(--clc-pie-cx, 0px), var(--clc-pie-cy, 0px)) scale(0) translate(calc(-1 * var(--clc-pie-cx, 0px)), calc(-1 * var(--clc-pie-cy, 0px)));
    opacity: 0;
  }
  to {
    transform: translate(var(--clc-pie-cx, 0px), var(--clc-pie-cy, 0px)) scale(1) translate(calc(-1 * var(--clc-pie-cx, 0px)), calc(-1 * var(--clc-pie-cy, 0px)));
    opacity: 1;
  }
}
@keyframes clc-series-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.clc-chart-animate .clc-line-series,
.clc-chart-animate .clc-stacked-line-series,
.clc-chart-animate .clc-full-stacked-line-series,
.clc-chart-animate .clc-area-series,
.clc-chart-animate .clc-full-stacked-area-series,
.clc-chart-animate .clc-range-area-series,
.clc-chart-animate .clc-waterfall-series,
.clc-chart-animate .clc-candlestick-series,
.clc-chart-animate .clc-ohlc-series,
.clc-chart-animate .clc-highlow-series,
.clc-chart-animate .clc-box-plot-series {
  animation: clc-series-reveal var(--clc-chart-animation-duration, 700ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.clc-chart-animate .clc-column-series,
.clc-chart-animate .clc-full-stacked-column-series,
.clc-chart-animate .clc-range-column-series {
  animation: clc-series-grow-y var(--clc-chart-animation-duration, 700ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.clc-chart-animate .clc-bar-series,
.clc-chart-animate .clc-full-stacked-bar-series,
.clc-chart-animate .clc-range-bar-series,
.clc-chart-animate .clc-bullet-series {
  animation: clc-series-grow-x var(--clc-chart-animation-duration, 700ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.clc-chart-animate .clc-horizontal-waterfall-series {
  animation: clc-series-reveal-down var(--clc-chart-animation-duration, 700ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.clc-chart-animate .clc-funnel-series > g,
.clc-chart-animate .clc-pyramid-series > g {
  transform-box: fill-box;
  transform-origin: center;
  animation: clc-segment-expand 500ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
  animation-delay: calc(var(--clc-segment-order, 0) * 90ms);
}
.clc-chart-animate .clc-scatter-series .clc-marker > * {
  animation: clc-marker-pop var(--clc-chart-animation-duration, 700ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.clc-chart-animate .clc-bubble-series circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: clc-marker-pop var(--clc-chart-animation-duration, 700ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.clc-chart-animate .clc-heatmap-series,
.clc-chart-animate .clc-contour-series {
  animation: clc-series-fade-in var(--clc-chart-animation-duration, 700ms) ease-out;
}
.clc-chart-animate .clc-pie-series > g,
.clc-chart-animate .clc-donut-series > g {
  animation: clc-slice-expand 500ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
  animation-delay: calc(var(--clc-segment-order, 0) * 90ms);
}

*[dir=rtl] .clc-chart-animate .clc-line-series,
*[dir=rtl] .clc-chart-animate .clc-stacked-line-series,
*[dir=rtl] .clc-chart-animate .clc-full-stacked-line-series,
*[dir=rtl] .clc-chart-animate .clc-area-series,
*[dir=rtl] .clc-chart-animate .clc-full-stacked-area-series,
*[dir=rtl] .clc-chart-animate .clc-range-area-series,
*[dir=rtl] .clc-chart-animate .clc-waterfall-series,
*[dir=rtl] .clc-chart-animate .clc-candlestick-series,
*[dir=rtl] .clc-chart-animate .clc-ohlc-series,
*[dir=rtl] .clc-chart-animate .clc-highlow-series,
*[dir=rtl] .clc-chart-animate .clc-box-plot-series {
  animation-name: clc-series-reveal-rtl;
}

.clc-path-transition {
  transition: d 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.clc-chart-zoomable .clc-path-transition {
  transition: none;
}

.clc-chart-series-hover .clc-line-series,
.clc-chart-series-hover .clc-area-series,
.clc-chart-series-hover .clc-column-series,
.clc-chart-series-hover .clc-bar-series,
.clc-chart-series-hover .clc-scatter-series,
.clc-chart-series-hover .clc-candlestick-series,
.clc-chart-series-hover .clc-waterfall-series,
.clc-chart-series-hover .clc-bullet-series {
  transition: opacity 0.2s, filter 0.2s;
  cursor: pointer;
}
.clc-chart-series-hover .clc-line-series:hover, .clc-chart-series-hover .clc-line-series.clc-state-hover,
.clc-chart-series-hover .clc-area-series:hover,
.clc-chart-series-hover .clc-area-series.clc-state-hover,
.clc-chart-series-hover .clc-column-series:hover,
.clc-chart-series-hover .clc-column-series.clc-state-hover,
.clc-chart-series-hover .clc-bar-series:hover,
.clc-chart-series-hover .clc-bar-series.clc-state-hover,
.clc-chart-series-hover .clc-scatter-series:hover,
.clc-chart-series-hover .clc-scatter-series.clc-state-hover,
.clc-chart-series-hover .clc-candlestick-series:hover,
.clc-chart-series-hover .clc-candlestick-series.clc-state-hover,
.clc-chart-series-hover .clc-waterfall-series:hover,
.clc-chart-series-hover .clc-waterfall-series.clc-state-hover,
.clc-chart-series-hover .clc-bullet-series:hover,
.clc-chart-series-hover .clc-bullet-series.clc-state-hover {
  filter: brightness(1.1) drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
}
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-line-series,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-area-series,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-column-series,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-bar-series,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-scatter-series,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-candlestick-series,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-waterfall-series,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-bullet-series,
.clc-chart-series-hover svg:has(> g > :hover) .clc-line-series,
.clc-chart-series-hover svg:has(> g > :hover) .clc-area-series,
.clc-chart-series-hover svg:has(> g > :hover) .clc-column-series,
.clc-chart-series-hover svg:has(> g > :hover) .clc-bar-series,
.clc-chart-series-hover svg:has(> g > :hover) .clc-scatter-series,
.clc-chart-series-hover svg:has(> g > :hover) .clc-candlestick-series,
.clc-chart-series-hover svg:has(> g > :hover) .clc-waterfall-series,
.clc-chart-series-hover svg:has(> g > :hover) .clc-bullet-series {
  opacity: 0.4;
}
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-line-series:hover, .clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-line-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-area-series:hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-area-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-column-series:hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-column-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-bar-series:hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-bar-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-scatter-series:hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-scatter-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-candlestick-series:hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-candlestick-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-waterfall-series:hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-waterfall-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-bullet-series:hover,
.clc-chart-series-hover svg:has(> g > .clc-state-hover) .clc-bullet-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-line-series:hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-line-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-area-series:hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-area-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-column-series:hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-column-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-bar-series:hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-bar-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-scatter-series:hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-scatter-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-candlestick-series:hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-candlestick-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-waterfall-series:hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-waterfall-series.clc-state-hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-bullet-series:hover,
.clc-chart-series-hover svg:has(> g > :hover) .clc-bullet-series.clc-state-hover {
  opacity: 1;
}
.clc-chart-series-hover .clc-pie-series > g,
.clc-chart-series-hover .clc-donut-series > g,
.clc-chart-series-hover .clc-funnel-series > g,
.clc-chart-series-hover .clc-pyramid-series > g {
  transition: opacity var(--clc-transition), filter var(--clc-transition);
  cursor: pointer;
}
.clc-chart-series-hover .clc-pie-series > g > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-pie-series > g > .clc-path,
.clc-chart-series-hover .clc-donut-series > g > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-donut-series > g > .clc-path,
.clc-chart-series-hover .clc-funnel-series > g > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-funnel-series > g > .clc-path,
.clc-chart-series-hover .clc-pyramid-series > g > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-pyramid-series > g > .clc-path {
  transition: transform var(--clc-transition);
}
.clc-chart-series-hover .clc-pie-series > g:hover, .clc-chart-series-hover .clc-pie-series > g.clc-state-hover,
.clc-chart-series-hover .clc-donut-series > g:hover,
.clc-chart-series-hover .clc-donut-series > g.clc-state-hover,
.clc-chart-series-hover .clc-funnel-series > g:hover,
.clc-chart-series-hover .clc-funnel-series > g.clc-state-hover,
.clc-chart-series-hover .clc-pyramid-series > g:hover,
.clc-chart-series-hover .clc-pyramid-series > g.clc-state-hover {
  filter: brightness(1.1) drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
}
.clc-chart-series-hover .clc-pie-series > g:hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-pie-series > g:hover > .clc-path, .clc-chart-series-hover .clc-pie-series > g.clc-state-hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-pie-series > g.clc-state-hover > .clc-path,
.clc-chart-series-hover .clc-donut-series > g:hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-donut-series > g:hover > .clc-path,
.clc-chart-series-hover .clc-donut-series > g.clc-state-hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-donut-series > g.clc-state-hover > .clc-path,
.clc-chart-series-hover .clc-funnel-series > g:hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-funnel-series > g:hover > .clc-path,
.clc-chart-series-hover .clc-funnel-series > g.clc-state-hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-funnel-series > g.clc-state-hover > .clc-path,
.clc-chart-series-hover .clc-pyramid-series > g:hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-pyramid-series > g:hover > .clc-path,
.clc-chart-series-hover .clc-pyramid-series > g.clc-state-hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-pyramid-series > g.clc-state-hover > .clc-path {
  transform: translate(var(--clc-explode-x, 0), var(--clc-explode-y, 0));
}
.clc-chart-series-hover .clc-pie-series > g.clc-state-exploded:hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-pie-series > g.clc-state-exploded:hover > .clc-path, .clc-chart-series-hover .clc-pie-series > g.clc-state-exploded.clc-state-hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-pie-series > g.clc-state-exploded.clc-state-hover > .clc-path,
.clc-chart-series-hover .clc-donut-series > g.clc-state-exploded:hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-donut-series > g.clc-state-exploded:hover > .clc-path,
.clc-chart-series-hover .clc-donut-series > g.clc-state-exploded.clc-state-hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-donut-series > g.clc-state-exploded.clc-state-hover > .clc-path,
.clc-chart-series-hover .clc-funnel-series > g.clc-state-exploded:hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-funnel-series > g.clc-state-exploded:hover > .clc-path,
.clc-chart-series-hover .clc-funnel-series > g.clc-state-exploded.clc-state-hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-funnel-series > g.clc-state-exploded.clc-state-hover > .clc-path,
.clc-chart-series-hover .clc-pyramid-series > g.clc-state-exploded:hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-pyramid-series > g.clc-state-exploded:hover > .clc-path,
.clc-chart-series-hover .clc-pyramid-series > g.clc-state-exploded.clc-state-hover > path:not(.clc-hit-area),
.clc-chart-series-hover .clc-pyramid-series > g.clc-state-exploded.clc-state-hover > .clc-path {
  transform: translate(calc(var(--clc-explode-x, 0) * 1.2), calc(var(--clc-explode-y, 0) * 1.2));
}
.clc-chart-series-hover .clc-pie-series:has(> .clc-state-hover) > g,
.clc-chart-series-hover .clc-donut-series:has(> .clc-state-hover) > g,
.clc-chart-series-hover .clc-funnel-series:has(> .clc-state-hover) > g,
.clc-chart-series-hover .clc-pyramid-series:has(> .clc-state-hover) > g,
.clc-chart-series-hover .clc-pie-series:has(> :hover) > g,
.clc-chart-series-hover .clc-donut-series:has(> :hover) > g,
.clc-chart-series-hover .clc-funnel-series:has(> :hover) > g,
.clc-chart-series-hover .clc-pyramid-series:has(> :hover) > g {
  opacity: 0.4;
}
.clc-chart-series-hover .clc-pie-series:has(> .clc-state-hover) > g:hover, .clc-chart-series-hover .clc-pie-series:has(> .clc-state-hover) > g.clc-state-hover,
.clc-chart-series-hover .clc-donut-series:has(> .clc-state-hover) > g:hover,
.clc-chart-series-hover .clc-donut-series:has(> .clc-state-hover) > g.clc-state-hover,
.clc-chart-series-hover .clc-funnel-series:has(> .clc-state-hover) > g:hover,
.clc-chart-series-hover .clc-funnel-series:has(> .clc-state-hover) > g.clc-state-hover,
.clc-chart-series-hover .clc-pyramid-series:has(> .clc-state-hover) > g:hover,
.clc-chart-series-hover .clc-pyramid-series:has(> .clc-state-hover) > g.clc-state-hover,
.clc-chart-series-hover .clc-pie-series:has(> :hover) > g:hover,
.clc-chart-series-hover .clc-pie-series:has(> :hover) > g.clc-state-hover,
.clc-chart-series-hover .clc-donut-series:has(> :hover) > g:hover,
.clc-chart-series-hover .clc-donut-series:has(> :hover) > g.clc-state-hover,
.clc-chart-series-hover .clc-funnel-series:has(> :hover) > g:hover,
.clc-chart-series-hover .clc-funnel-series:has(> :hover) > g.clc-state-hover,
.clc-chart-series-hover .clc-pyramid-series:has(> :hover) > g:hover,
.clc-chart-series-hover .clc-pyramid-series:has(> :hover) > g.clc-state-hover {
  opacity: 1;
}
.clc-chart-series-hover .clc-legend-item {
  transition: background-color 0.2s, color 0.2s;
  border-radius: var(--clc-border-radius);
}
.clc-chart-series-hover .clc-legend-item:hover {
  background-color: var(--clc-base-200);
  color: var(--clc-on-base-lighter);
}

.clc-pie-series > g.clc-state-exploded > path,
.clc-pie-series > g.clc-state-exploded > .clc-path,
.clc-donut-series > g.clc-state-exploded > path,
.clc-donut-series > g.clc-state-exploded > .clc-path {
  transform: translate(var(--clc-explode-x, 0), var(--clc-explode-y, 0));
  transition: transform var(--clc-transition);
}

.clc-scheme-pastel .clc-series-0 {
  --clc-series-color: var(--clc-series-1);
  fill: var(--clc-series-1);
  stroke: var(--clc-series-1);
}
.clc-scheme-pastel .clc-series-0-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-1);
}
.clc-scheme-pastel .clc-series-item-0 {
  --clc-series-color: var(--clc-series-1);
  fill: var(--clc-series-1);
  stroke: var(--clc-series-1);
}
.clc-scheme-pastel .clc-series-item-0 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-1);
}

.clc-scheme-pastel .clc-series-1 {
  --clc-series-color: var(--clc-series-2);
  fill: var(--clc-series-2);
  stroke: var(--clc-series-2);
}
.clc-scheme-pastel .clc-series-1-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-2);
}
.clc-scheme-pastel .clc-series-item-1 {
  --clc-series-color: var(--clc-series-2);
  fill: var(--clc-series-2);
  stroke: var(--clc-series-2);
}
.clc-scheme-pastel .clc-series-item-1 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-2);
}

.clc-scheme-pastel .clc-series-2 {
  --clc-series-color: var(--clc-series-3);
  fill: var(--clc-series-3);
  stroke: var(--clc-series-3);
}
.clc-scheme-pastel .clc-series-2-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-3);
}
.clc-scheme-pastel .clc-series-item-2 {
  --clc-series-color: var(--clc-series-3);
  fill: var(--clc-series-3);
  stroke: var(--clc-series-3);
}
.clc-scheme-pastel .clc-series-item-2 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-3);
}

.clc-scheme-pastel .clc-series-3 {
  --clc-series-color: var(--clc-series-4);
  fill: var(--clc-series-4);
  stroke: var(--clc-series-4);
}
.clc-scheme-pastel .clc-series-3-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-4);
}
.clc-scheme-pastel .clc-series-item-3 {
  --clc-series-color: var(--clc-series-4);
  fill: var(--clc-series-4);
  stroke: var(--clc-series-4);
}
.clc-scheme-pastel .clc-series-item-3 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-4);
}

.clc-scheme-pastel .clc-series-4 {
  --clc-series-color: var(--clc-series-5);
  fill: var(--clc-series-5);
  stroke: var(--clc-series-5);
}
.clc-scheme-pastel .clc-series-4-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-5);
}
.clc-scheme-pastel .clc-series-item-4 {
  --clc-series-color: var(--clc-series-5);
  fill: var(--clc-series-5);
  stroke: var(--clc-series-5);
}
.clc-scheme-pastel .clc-series-item-4 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-5);
}

.clc-scheme-pastel .clc-series-5 {
  --clc-series-color: var(--clc-series-6);
  fill: var(--clc-series-6);
  stroke: var(--clc-series-6);
}
.clc-scheme-pastel .clc-series-5-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-6);
}
.clc-scheme-pastel .clc-series-item-5 {
  --clc-series-color: var(--clc-series-6);
  fill: var(--clc-series-6);
  stroke: var(--clc-series-6);
}
.clc-scheme-pastel .clc-series-item-5 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-6);
}

.clc-scheme-pastel .clc-series-6 {
  --clc-series-color: var(--clc-series-7);
  fill: var(--clc-series-7);
  stroke: var(--clc-series-7);
}
.clc-scheme-pastel .clc-series-6-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-7);
}
.clc-scheme-pastel .clc-series-item-6 {
  --clc-series-color: var(--clc-series-7);
  fill: var(--clc-series-7);
  stroke: var(--clc-series-7);
}
.clc-scheme-pastel .clc-series-item-6 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-7);
}

.clc-scheme-pastel .clc-series-7 {
  --clc-series-color: var(--clc-series-8);
  fill: var(--clc-series-8);
  stroke: var(--clc-series-8);
}
.clc-scheme-pastel .clc-series-7-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-8);
}
.clc-scheme-pastel .clc-series-item-7 {
  --clc-series-color: var(--clc-series-8);
  fill: var(--clc-series-8);
  stroke: var(--clc-series-8);
}
.clc-scheme-pastel .clc-series-item-7 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-8);
}

.clc-scheme-pastel .clc-series-8 {
  --clc-series-color: var(--clc-series-9);
  fill: var(--clc-series-9);
  stroke: var(--clc-series-9);
}
.clc-scheme-pastel .clc-series-8-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-9);
}
.clc-scheme-pastel .clc-series-item-8 {
  --clc-series-color: var(--clc-series-9);
  fill: var(--clc-series-9);
  stroke: var(--clc-series-9);
}
.clc-scheme-pastel .clc-series-item-8 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-9);
}

.clc-scheme-pastel .clc-series-9 {
  --clc-series-color: var(--clc-series-10);
  fill: var(--clc-series-10);
  stroke: var(--clc-series-10);
}
.clc-scheme-pastel .clc-series-9-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-10);
}
.clc-scheme-pastel .clc-series-item-9 {
  --clc-series-color: var(--clc-series-10);
  fill: var(--clc-series-10);
  stroke: var(--clc-series-10);
}
.clc-scheme-pastel .clc-series-item-9 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-10);
}

.clc-scheme-pastel .clc-series-10 {
  --clc-series-color: var(--clc-series-11);
  fill: var(--clc-series-11);
  stroke: var(--clc-series-11);
}
.clc-scheme-pastel .clc-series-10-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-11);
}
.clc-scheme-pastel .clc-series-item-10 {
  --clc-series-color: var(--clc-series-11);
  fill: var(--clc-series-11);
  stroke: var(--clc-series-11);
}
.clc-scheme-pastel .clc-series-item-10 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-11);
}

.clc-scheme-pastel .clc-series-11 {
  --clc-series-color: var(--clc-series-12);
  fill: var(--clc-series-12);
  stroke: var(--clc-series-12);
}
.clc-scheme-pastel .clc-series-11-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-12);
}
.clc-scheme-pastel .clc-series-item-11 {
  --clc-series-color: var(--clc-series-12);
  fill: var(--clc-series-12);
  stroke: var(--clc-series-12);
}
.clc-scheme-pastel .clc-series-item-11 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-12);
}

.clc-scheme-pastel .clc-series-12 {
  --clc-series-color: var(--clc-series-13);
  fill: var(--clc-series-13);
  stroke: var(--clc-series-13);
}
.clc-scheme-pastel .clc-series-12-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-13);
}
.clc-scheme-pastel .clc-series-item-12 {
  --clc-series-color: var(--clc-series-13);
  fill: var(--clc-series-13);
  stroke: var(--clc-series-13);
}
.clc-scheme-pastel .clc-series-item-12 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-13);
}

.clc-scheme-pastel .clc-series-13 {
  --clc-series-color: var(--clc-series-14);
  fill: var(--clc-series-14);
  stroke: var(--clc-series-14);
}
.clc-scheme-pastel .clc-series-13-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-14);
}
.clc-scheme-pastel .clc-series-item-13 {
  --clc-series-color: var(--clc-series-14);
  fill: var(--clc-series-14);
  stroke: var(--clc-series-14);
}
.clc-scheme-pastel .clc-series-item-13 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-14);
}

.clc-scheme-pastel .clc-series-14 {
  --clc-series-color: var(--clc-series-15);
  fill: var(--clc-series-15);
  stroke: var(--clc-series-15);
}
.clc-scheme-pastel .clc-series-14-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-15);
}
.clc-scheme-pastel .clc-series-item-14 {
  --clc-series-color: var(--clc-series-15);
  fill: var(--clc-series-15);
  stroke: var(--clc-series-15);
}
.clc-scheme-pastel .clc-series-item-14 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-15);
}

.clc-scheme-pastel .clc-series-15 {
  --clc-series-color: var(--clc-series-16);
  fill: var(--clc-series-16);
  stroke: var(--clc-series-16);
}
.clc-scheme-pastel .clc-series-15-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-16);
}
.clc-scheme-pastel .clc-series-item-15 {
  --clc-series-color: var(--clc-series-16);
  fill: var(--clc-series-16);
  stroke: var(--clc-series-16);
}
.clc-scheme-pastel .clc-series-item-15 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-16);
}

.clc-scheme-pastel .clc-series-16 {
  --clc-series-color: var(--clc-series-17);
  fill: var(--clc-series-17);
  stroke: var(--clc-series-17);
}
.clc-scheme-pastel .clc-series-16-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-17);
}
.clc-scheme-pastel .clc-series-item-16 {
  --clc-series-color: var(--clc-series-17);
  fill: var(--clc-series-17);
  stroke: var(--clc-series-17);
}
.clc-scheme-pastel .clc-series-item-16 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-17);
}

.clc-scheme-pastel .clc-series-17 {
  --clc-series-color: var(--clc-series-18);
  fill: var(--clc-series-18);
  stroke: var(--clc-series-18);
}
.clc-scheme-pastel .clc-series-17-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-18);
}
.clc-scheme-pastel .clc-series-item-17 {
  --clc-series-color: var(--clc-series-18);
  fill: var(--clc-series-18);
  stroke: var(--clc-series-18);
}
.clc-scheme-pastel .clc-series-item-17 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-18);
}

.clc-scheme-pastel .clc-series-18 {
  --clc-series-color: var(--clc-series-19);
  fill: var(--clc-series-19);
  stroke: var(--clc-series-19);
}
.clc-scheme-pastel .clc-series-18-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-19);
}
.clc-scheme-pastel .clc-series-item-18 {
  --clc-series-color: var(--clc-series-19);
  fill: var(--clc-series-19);
  stroke: var(--clc-series-19);
}
.clc-scheme-pastel .clc-series-item-18 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-19);
}

.clc-scheme-pastel .clc-series-19 {
  --clc-series-color: var(--clc-series-20);
  fill: var(--clc-series-20);
  stroke: var(--clc-series-20);
}
.clc-scheme-pastel .clc-series-19-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-20);
}
.clc-scheme-pastel .clc-series-item-19 {
  --clc-series-color: var(--clc-series-20);
  fill: var(--clc-series-20);
  stroke: var(--clc-series-20);
}
.clc-scheme-pastel .clc-series-item-19 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-20);
}

.clc-scheme-pastel .clc-series-20 {
  --clc-series-color: var(--clc-series-21);
  fill: var(--clc-series-21);
  stroke: var(--clc-series-21);
}
.clc-scheme-pastel .clc-series-20-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-21);
}
.clc-scheme-pastel .clc-series-item-20 {
  --clc-series-color: var(--clc-series-21);
  fill: var(--clc-series-21);
  stroke: var(--clc-series-21);
}
.clc-scheme-pastel .clc-series-item-20 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-21);
}

.clc-scheme-pastel .clc-series-21 {
  --clc-series-color: var(--clc-series-22);
  fill: var(--clc-series-22);
  stroke: var(--clc-series-22);
}
.clc-scheme-pastel .clc-series-21-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-22);
}
.clc-scheme-pastel .clc-series-item-21 {
  --clc-series-color: var(--clc-series-22);
  fill: var(--clc-series-22);
  stroke: var(--clc-series-22);
}
.clc-scheme-pastel .clc-series-item-21 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-22);
}

.clc-scheme-pastel .clc-series-22 {
  --clc-series-color: var(--clc-series-23);
  fill: var(--clc-series-23);
  stroke: var(--clc-series-23);
}
.clc-scheme-pastel .clc-series-22-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-23);
}
.clc-scheme-pastel .clc-series-item-22 {
  --clc-series-color: var(--clc-series-23);
  fill: var(--clc-series-23);
  stroke: var(--clc-series-23);
}
.clc-scheme-pastel .clc-series-item-22 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-23);
}

.clc-scheme-pastel .clc-series-23 {
  --clc-series-color: var(--clc-series-24);
  fill: var(--clc-series-24);
  stroke: var(--clc-series-24);
}
.clc-scheme-pastel .clc-series-23-tooltip .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-24);
}
.clc-scheme-pastel .clc-series-item-23 {
  --clc-series-color: var(--clc-series-24);
  fill: var(--clc-series-24);
  stroke: var(--clc-series-24);
}
.clc-scheme-pastel .clc-series-item-23 .clc-chart-tooltip-content {
  border: 1px solid var(--clc-series-24);
}

.clc-scheme-palette .clc-series-0 {
  --clc-series-color: #003f5c;
  fill: #003f5c;
  stroke: #003f5c;
}
.clc-scheme-palette .clc-series-0-tooltip .clc-chart-tooltip-content {
  border: 1px solid #003f5c;
}
.clc-scheme-palette .clc-series-item-0 {
  --clc-series-color: #003f5c;
  fill: #003f5c;
  stroke: #003f5c;
}
.clc-scheme-palette .clc-series-item-0 .clc-chart-tooltip-content {
  border: 1px solid #003f5c;
}

.clc-scheme-palette .clc-series-1 {
  --clc-series-color: #2f4b7c;
  fill: #2f4b7c;
  stroke: #2f4b7c;
}
.clc-scheme-palette .clc-series-1-tooltip .clc-chart-tooltip-content {
  border: 1px solid #2f4b7c;
}
.clc-scheme-palette .clc-series-item-1 {
  --clc-series-color: #2f4b7c;
  fill: #2f4b7c;
  stroke: #2f4b7c;
}
.clc-scheme-palette .clc-series-item-1 .clc-chart-tooltip-content {
  border: 1px solid #2f4b7c;
}

.clc-scheme-palette .clc-series-2 {
  --clc-series-color: #665191;
  fill: #665191;
  stroke: #665191;
}
.clc-scheme-palette .clc-series-2-tooltip .clc-chart-tooltip-content {
  border: 1px solid #665191;
}
.clc-scheme-palette .clc-series-item-2 {
  --clc-series-color: #665191;
  fill: #665191;
  stroke: #665191;
}
.clc-scheme-palette .clc-series-item-2 .clc-chart-tooltip-content {
  border: 1px solid #665191;
}

.clc-scheme-palette .clc-series-3 {
  --clc-series-color: #a05195;
  fill: #a05195;
  stroke: #a05195;
}
.clc-scheme-palette .clc-series-3-tooltip .clc-chart-tooltip-content {
  border: 1px solid #a05195;
}
.clc-scheme-palette .clc-series-item-3 {
  --clc-series-color: #a05195;
  fill: #a05195;
  stroke: #a05195;
}
.clc-scheme-palette .clc-series-item-3 .clc-chart-tooltip-content {
  border: 1px solid #a05195;
}

.clc-scheme-palette .clc-series-4 {
  --clc-series-color: #d45087;
  fill: #d45087;
  stroke: #d45087;
}
.clc-scheme-palette .clc-series-4-tooltip .clc-chart-tooltip-content {
  border: 1px solid #d45087;
}
.clc-scheme-palette .clc-series-item-4 {
  --clc-series-color: #d45087;
  fill: #d45087;
  stroke: #d45087;
}
.clc-scheme-palette .clc-series-item-4 .clc-chart-tooltip-content {
  border: 1px solid #d45087;
}

.clc-scheme-palette .clc-series-5 {
  --clc-series-color: #f95d6a;
  fill: #f95d6a;
  stroke: #f95d6a;
}
.clc-scheme-palette .clc-series-5-tooltip .clc-chart-tooltip-content {
  border: 1px solid #f95d6a;
}
.clc-scheme-palette .clc-series-item-5 {
  --clc-series-color: #f95d6a;
  fill: #f95d6a;
  stroke: #f95d6a;
}
.clc-scheme-palette .clc-series-item-5 .clc-chart-tooltip-content {
  border: 1px solid #f95d6a;
}

.clc-scheme-palette .clc-series-6 {
  --clc-series-color: #ff7c43;
  fill: #ff7c43;
  stroke: #ff7c43;
}
.clc-scheme-palette .clc-series-6-tooltip .clc-chart-tooltip-content {
  border: 1px solid #ff7c43;
}
.clc-scheme-palette .clc-series-item-6 {
  --clc-series-color: #ff7c43;
  fill: #ff7c43;
  stroke: #ff7c43;
}
.clc-scheme-palette .clc-series-item-6 .clc-chart-tooltip-content {
  border: 1px solid #ff7c43;
}

.clc-scheme-palette .clc-series-7 {
  --clc-series-color: #ffa600;
  fill: #ffa600;
  stroke: #ffa600;
}
.clc-scheme-palette .clc-series-7-tooltip .clc-chart-tooltip-content {
  border: 1px solid #ffa600;
}
.clc-scheme-palette .clc-series-item-7 {
  --clc-series-color: #ffa600;
  fill: #ffa600;
  stroke: #ffa600;
}
.clc-scheme-palette .clc-series-item-7 .clc-chart-tooltip-content {
  border: 1px solid #ffa600;
}

.clc-scheme-monochrome .clc-series-0 {
  --clc-series-color: #004c6d;
  fill: #004c6d;
  stroke: #004c6d;
}
.clc-scheme-monochrome .clc-series-0-tooltip .clc-chart-tooltip-content {
  border: 1px solid #004c6d;
}
.clc-scheme-monochrome .clc-series-item-0 {
  --clc-series-color: #004c6d;
  fill: #004c6d;
  stroke: #004c6d;
}
.clc-scheme-monochrome .clc-series-item-0 .clc-chart-tooltip-content {
  border: 1px solid #004c6d;
}

.clc-scheme-monochrome .clc-series-1 {
  --clc-series-color: #296080;
  fill: #296080;
  stroke: #296080;
}
.clc-scheme-monochrome .clc-series-1-tooltip .clc-chart-tooltip-content {
  border: 1px solid #296080;
}
.clc-scheme-monochrome .clc-series-item-1 {
  --clc-series-color: #296080;
  fill: #296080;
  stroke: #296080;
}
.clc-scheme-monochrome .clc-series-item-1 .clc-chart-tooltip-content {
  border: 1px solid #296080;
}

.clc-scheme-monochrome .clc-series-2 {
  --clc-series-color: #437594;
  fill: #437594;
  stroke: #437594;
}
.clc-scheme-monochrome .clc-series-2-tooltip .clc-chart-tooltip-content {
  border: 1px solid #437594;
}
.clc-scheme-monochrome .clc-series-item-2 {
  --clc-series-color: #437594;
  fill: #437594;
  stroke: #437594;
}
.clc-scheme-monochrome .clc-series-item-2 .clc-chart-tooltip-content {
  border: 1px solid #437594;
}

.clc-scheme-monochrome .clc-series-3 {
  --clc-series-color: #5d8ba9;
  fill: #5d8ba9;
  stroke: #5d8ba9;
}
.clc-scheme-monochrome .clc-series-3-tooltip .clc-chart-tooltip-content {
  border: 1px solid #5d8ba9;
}
.clc-scheme-monochrome .clc-series-item-3 {
  --clc-series-color: #5d8ba9;
  fill: #5d8ba9;
  stroke: #5d8ba9;
}
.clc-scheme-monochrome .clc-series-item-3 .clc-chart-tooltip-content {
  border: 1px solid #5d8ba9;
}

.clc-scheme-monochrome .clc-series-4 {
  --clc-series-color: #75a1be;
  fill: #75a1be;
  stroke: #75a1be;
}
.clc-scheme-monochrome .clc-series-4-tooltip .clc-chart-tooltip-content {
  border: 1px solid #75a1be;
}
.clc-scheme-monochrome .clc-series-item-4 {
  --clc-series-color: #75a1be;
  fill: #75a1be;
  stroke: #75a1be;
}
.clc-scheme-monochrome .clc-series-item-4 .clc-chart-tooltip-content {
  border: 1px solid #75a1be;
}

.clc-scheme-monochrome .clc-series-5 {
  --clc-series-color: #8eb8d3;
  fill: #8eb8d3;
  stroke: #8eb8d3;
}
.clc-scheme-monochrome .clc-series-5-tooltip .clc-chart-tooltip-content {
  border: 1px solid #8eb8d3;
}
.clc-scheme-monochrome .clc-series-item-5 {
  --clc-series-color: #8eb8d3;
  fill: #8eb8d3;
  stroke: #8eb8d3;
}
.clc-scheme-monochrome .clc-series-item-5 .clc-chart-tooltip-content {
  border: 1px solid #8eb8d3;
}

.clc-scheme-monochrome .clc-series-6 {
  --clc-series-color: #a7cfe9;
  fill: #a7cfe9;
  stroke: #a7cfe9;
}
.clc-scheme-monochrome .clc-series-6-tooltip .clc-chart-tooltip-content {
  border: 1px solid #a7cfe9;
}
.clc-scheme-monochrome .clc-series-item-6 {
  --clc-series-color: #a7cfe9;
  fill: #a7cfe9;
  stroke: #a7cfe9;
}
.clc-scheme-monochrome .clc-series-item-6 .clc-chart-tooltip-content {
  border: 1px solid #a7cfe9;
}

.clc-scheme-monochrome .clc-series-7 {
  --clc-series-color: #c1e7ff;
  fill: #c1e7ff;
  stroke: #c1e7ff;
}
.clc-scheme-monochrome .clc-series-7-tooltip .clc-chart-tooltip-content {
  border: 1px solid #c1e7ff;
}
.clc-scheme-monochrome .clc-series-item-7 {
  --clc-series-color: #c1e7ff;
  fill: #c1e7ff;
  stroke: #c1e7ff;
}
.clc-scheme-monochrome .clc-series-item-7 .clc-chart-tooltip-content {
  border: 1px solid #c1e7ff;
}

.clc-scheme-divergent .clc-series-0 {
  --clc-series-color: #00876c;
  fill: #00876c;
  stroke: #00876c;
}
.clc-scheme-divergent .clc-series-0-tooltip .clc-chart-tooltip-content {
  border: 1px solid #00876c;
}
.clc-scheme-divergent .clc-series-item-0 {
  --clc-series-color: #00876c;
  fill: #00876c;
  stroke: #00876c;
}
.clc-scheme-divergent .clc-series-item-0 .clc-chart-tooltip-content {
  border: 1px solid #00876c;
}

.clc-scheme-divergent .clc-series-1 {
  --clc-series-color: #57a18b;
  fill: #57a18b;
  stroke: #57a18b;
}
.clc-scheme-divergent .clc-series-1-tooltip .clc-chart-tooltip-content {
  border: 1px solid #57a18b;
}
.clc-scheme-divergent .clc-series-item-1 {
  --clc-series-color: #57a18b;
  fill: #57a18b;
  stroke: #57a18b;
}
.clc-scheme-divergent .clc-series-item-1 .clc-chart-tooltip-content {
  border: 1px solid #57a18b;
}

.clc-scheme-divergent .clc-series-2 {
  --clc-series-color: #8cbcac;
  fill: #8cbcac;
  stroke: #8cbcac;
}
.clc-scheme-divergent .clc-series-2-tooltip .clc-chart-tooltip-content {
  border: 1px solid #8cbcac;
}
.clc-scheme-divergent .clc-series-item-2 {
  --clc-series-color: #8cbcac;
  fill: #8cbcac;
  stroke: #8cbcac;
}
.clc-scheme-divergent .clc-series-item-2 .clc-chart-tooltip-content {
  border: 1px solid #8cbcac;
}

.clc-scheme-divergent .clc-series-3 {
  --clc-series-color: #bed6ce;
  fill: #bed6ce;
  stroke: #bed6ce;
}
.clc-scheme-divergent .clc-series-3-tooltip .clc-chart-tooltip-content {
  border: 1px solid #bed6ce;
}
.clc-scheme-divergent .clc-series-item-3 {
  --clc-series-color: #bed6ce;
  fill: #bed6ce;
  stroke: #bed6ce;
}
.clc-scheme-divergent .clc-series-item-3 .clc-chart-tooltip-content {
  border: 1px solid #bed6ce;
}

.clc-scheme-divergent .clc-series-4 {
  --clc-series-color: #f1f1f1;
  fill: #f1f1f1;
  stroke: #f1f1f1;
}
.clc-scheme-divergent .clc-series-4-tooltip .clc-chart-tooltip-content {
  border: 1px solid #f1f1f1;
}
.clc-scheme-divergent .clc-series-item-4 {
  --clc-series-color: #f1f1f1;
  fill: #f1f1f1;
  stroke: #f1f1f1;
}
.clc-scheme-divergent .clc-series-item-4 .clc-chart-tooltip-content {
  border: 1px solid #f1f1f1;
}

.clc-scheme-divergent .clc-series-5 {
  --clc-series-color: #f1c6c6;
  fill: #f1c6c6;
  stroke: #f1c6c6;
}
.clc-scheme-divergent .clc-series-5-tooltip .clc-chart-tooltip-content {
  border: 1px solid #f1c6c6;
}
.clc-scheme-divergent .clc-series-item-5 {
  --clc-series-color: #f1c6c6;
  fill: #f1c6c6;
  stroke: #f1c6c6;
}
.clc-scheme-divergent .clc-series-item-5 .clc-chart-tooltip-content {
  border: 1px solid #f1c6c6;
}

.clc-scheme-divergent .clc-series-6 {
  --clc-series-color: #ec9c9d;
  fill: #ec9c9d;
  stroke: #ec9c9d;
}
.clc-scheme-divergent .clc-series-6-tooltip .clc-chart-tooltip-content {
  border: 1px solid #ec9c9d;
}
.clc-scheme-divergent .clc-series-item-6 {
  --clc-series-color: #ec9c9d;
  fill: #ec9c9d;
  stroke: #ec9c9d;
}
.clc-scheme-divergent .clc-series-item-6 .clc-chart-tooltip-content {
  border: 1px solid #ec9c9d;
}

.clc-scheme-divergent .clc-series-7 {
  --clc-series-color: #e27076;
  fill: #e27076;
  stroke: #e27076;
}
.clc-scheme-divergent .clc-series-7-tooltip .clc-chart-tooltip-content {
  border: 1px solid #e27076;
}
.clc-scheme-divergent .clc-series-item-7 {
  --clc-series-color: #e27076;
  fill: #e27076;
  stroke: #e27076;
}
.clc-scheme-divergent .clc-series-item-7 .clc-chart-tooltip-content {
  border: 1px solid #e27076;
}

.clc-scheme-divergent .clc-series-8 {
  --clc-series-color: #d43d51;
  fill: #d43d51;
  stroke: #d43d51;
}
.clc-scheme-divergent .clc-series-8-tooltip .clc-chart-tooltip-content {
  border: 1px solid #d43d51;
}
.clc-scheme-divergent .clc-series-item-8 {
  --clc-series-color: #d43d51;
  fill: #d43d51;
  stroke: #d43d51;
}
.clc-scheme-divergent .clc-series-item-8 .clc-chart-tooltip-content {
  border: 1px solid #d43d51;
}

.clc-marker {
  stroke: var(--clc-chart-marker-stroke);
}

.clc-series-value-label rect {
  fill: var(--clc-series-color);
  stroke: none;
}
.clc-series-value-label text {
  fill: var(--clc-chart-marker-stroke);
  fill: oklch(from var(--clc-series-color) calc((0.72 - l) * infinity) 0 h);
  stroke: none;
  font-size: 0.75rem;
  dominant-baseline: central;
  font-variant-numeric: tabular-nums;
}

.clc-active-point {
  transition: transform 0.15s ease-out;
}
.clc-active-point .clc-active-point-halo {
  fill: var(--clc-series-color);
  fill-opacity: 0.15;
  stroke: none;
}
.clc-active-point .clc-active-point-dot {
  fill: var(--clc-series-color);
  fill-opacity: 1;
  stroke: var(--clc-chart-marker-stroke);
  stroke-width: 2;
}

.clc-line-series .clc-marker,
.clc-area-series .clc-marker,
.clc-scatter-series .clc-marker {
  cursor: pointer;
}
.clc-line-series .clc-marker > *,
.clc-area-series .clc-marker > *,
.clc-scatter-series .clc-marker > * {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.15s ease-out;
}
.clc-line-series .clc-marker:hover > *,
.clc-area-series .clc-marker:hover > *,
.clc-scatter-series .clc-marker:hover > * {
  transform: scale(1.35);
}

.clc-area-series .clc-marker {
  fill-opacity: 1;
}

.clc-scatter-series .clc-marker {
  fill-opacity: 1;
  cursor: pointer;
}

.clc-bubble-series circle {
  fill-opacity: 0.7;
  cursor: pointer;
  transition: fill-opacity var(--clc-transition);
}
.clc-bubble-series circle:hover {
  fill-opacity: 0.9;
}

.clc-axis {
  stroke: var(--clc-chart-axis-color);
  font-size: var(--clc-chart-axis-font-size);
}

.clc-axis .clc-grid-line {
  stroke: var(--clc-chart-grid-line-color);
}

.clc-tick-text {
  stroke: none;
  fill: var(--clc-chart-axis-label-color);
  font-variant-numeric: tabular-nums;
}

.clc-series-data-label,
.clc-series-data-label-fill {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  stroke: none;
  dominant-baseline: central;
}

.clc-series-data-label {
  fill: var(--clc-chart-axis-label-color);
}

.clc-series-data-label-chip {
  fill: var(--clc-chart-tooltip-background);
  fill-opacity: 0.9;
  stroke: var(--clc-chart-grid-line-color);
  stroke-width: 1;
}

.clc-series-data-label-outline {
  stroke: var(--clc-base-background-color);
  stroke-width: 3;
  stroke-linejoin: round;
  paint-order: stroke;
}

.clc-chart-animate .clc-series-data-label-group {
  animation: clc-chart-tooltip-enter var(--clc-chart-animation-duration, 700ms) ease-out;
}

.clc-value-axis .clc-tick-text {
  text-anchor: end;
}

.clc-axis .clc-axis-title {
  stroke: none;
  text-anchor: middle;
  fill: var(--clc-text-title-color);
}

.clc-donut-title {
  text-anchor: middle;
  fill: var(--clc-text-title-color);
}

.clc-donut-content {
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.clc-legend {
  position: absolute;
  display: flex;
  font-size: var(--clc-chart-legend-font-size);
}

.clc-legend-right {
  right: 0;
  top: 0;
  bottom: 0;
  align-items: center;
}

.clc-legend-left {
  left: 0;
  top: 0;
  bottom: 0;
  align-items: center;
}

.clc-legend-top {
  top: 0;
  left: 0;
  right: 0;
  justify-content: center;
}

.clc-legend-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
}

.clc-legend-items {
  padding: 0;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
}

.clc-legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0.25rem;
  padding: 0.25rem 0.375rem;
  cursor: pointer;
  line-height: 1;
}
.clc-legend-item svg {
  border-radius: calc(var(--clc-border-radius) / 2);
  overflow: hidden;
}
.clc-legend-item:focus {
  outline: var(--clc-outline-normal);
}
.clc-legend-item:focus-visible {
  outline: var(--clc-chart-legend-focus-outline);
  outline-offset: var(--clc-chart-legend-focus-outline-offset);
  border-radius: var(--clc-border-radius);
}

.clc-legend-top .clc-legend-item,
.clc-legend-bottom .clc-legend-item {
  display: inline-flex;
}

.clc-chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: var(--clc-chart-tooltip-max-width);
  pointer-events: none;
}

.clc-chart-tooltip-left .clc-chart-tooltip {
  left: auto;
  right: 0;
}

.clc-top-chart-tooltip {
  transform: translate(-50%, -100%);
}

.clc-bottom-chart-tooltip {
  transform: translate(-50%, 0);
}

.clc-chart-tooltip-content {
  background: var(--clc-chart-tooltip-background);
  color: var(--clc-chart-tooltip-color);
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.18), 0 2px 6px -2px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  border-radius: var(--clc-chart-tooltip-border-radius);
  white-space: normal;
  font-size: var(--clc-chart-tooltip-font-size);
  font-variant-numeric: tabular-nums;
}

@keyframes clc-chart-tooltip-enter {
  from {
    opacity: 0;
    translate: 0 4px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.clc-chart-tooltip-content.clc-chart-tooltip-enter {
  animation: clc-chart-tooltip-enter 0.12s ease-out;
}

.clc-chart-category-tooltip {
  transition: top 0.15s ease-out, left 0.15s ease-out, right 0.15s ease-out;
}

.clc-chart-tooltip-appear .clc-chart-tooltip-content {
  animation: clc-chart-tooltip-enter 0.12s ease-out;
}

.clc-chart-tooltip:not(.clc-pie-tooltip) .clc-chart-tooltip-content:after {
  content: " ";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: inherit;
  transform-origin: center;
}

.clc-top-chart-tooltip:not(.clc-pie-tooltip) .clc-chart-tooltip-content {
  margin-bottom: 15px;
}
.clc-top-chart-tooltip:not(.clc-pie-tooltip) .clc-chart-tooltip-content:after {
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -11px) rotate(45deg);
  border-bottom: inherit;
  border-right: inherit;
}

.clc-bottom-chart-tooltip:not(.clc-pie-tooltip) .clc-chart-tooltip-content {
  margin-top: 15px;
}
.clc-bottom-chart-tooltip:not(.clc-pie-tooltip) .clc-chart-tooltip-content:after {
  left: 50%;
  top: 0;
  transform: translate(-50%, 11px) rotate(45deg);
  border-top: inherit;
  border-left: inherit;
}

.clc-chart-tooltip-title {
  font-weight: 700;
}

.clc-chart-tooltip-item-value {
  font-weight: 600;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.clc-chart-shared-tooltip:has(.clc-chart-tooltip-item-content) .clc-chart-tooltip-title {
  padding: 0 0.5rem;
}
.clc-chart-shared-tooltip:has(.clc-chart-tooltip-item-content) .clc-chart-tooltip-content {
  border: none;
}

.clc-chart-tooltip-item-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--clc-chart-tooltip-item-border-radius);
}
.clc-chart-tooltip-item-content:hover {
  background-color: var(--clc-chart-tooltip-item-hover-background-color);
}
.clc-chart-tooltip-item-content .clc-legend-item {
  margin: 0;
  cursor: inherit;
}

.clc-chart-scrollbar {
  height: 16px;
  padding: 4px 0;
  position: absolute;
}

.clc-chart-scrollbar-track {
  position: relative;
  height: 8px;
  background: var(--clc-base-200, #e5e7eb);
  border-radius: 4px;
  cursor: pointer;
}

.clc-chart-scrollbar-thumb {
  position: absolute;
  height: 100%;
  background: var(--clc-base-400, #9ca3af);
  border-radius: 4px;
  cursor: grab;
  min-width: 20px;
  transition: background 0.15s;
}
.clc-chart-scrollbar-thumb:hover, .clc-chart-scrollbar-thumb:active {
  background: var(--clc-base-500, #6b7280);
}
.clc-chart-scrollbar-thumb:active {
  cursor: grabbing;
}

.clc-range-nav {
  position: relative;
  overflow: visible;
  height: var(--clc-range-nav-height);
  border: var(--clc-range-nav-border);
  border-radius: var(--clc-range-nav-border-radius);
}
.clc-range-nav svg {
  display: block;
  border-radius: var(--clc-range-nav-border-radius);
}
[dir=rtl] .clc-range-nav svg {
  transform: scaleX(-1);
}

.clc-range-nav-shade {
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  background: var(--clc-range-nav-shade-background-color);
  opacity: var(--clc-range-nav-shade-opacity);
  pointer-events: none;
  z-index: 1;
}
.clc-range-nav-shade-start {
  inset-inline-start: 0;
  border-start-start-radius: var(--clc-range-nav-border-radius);
  border-end-start-radius: var(--clc-range-nav-border-radius);
}
.clc-range-nav-shade-end {
  inset-inline-end: 0;
  border-start-end-radius: var(--clc-range-nav-border-radius);
  border-end-end-radius: var(--clc-range-nav-border-radius);
}

.clc-range-nav-window {
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  border: var(--clc-range-nav-border);
  border-width: 0 var(--clc-border-width);
  background: transparent;
  cursor: grab;
  box-sizing: border-box;
  z-index: 2;
}
.clc-range-nav-window:active {
  cursor: grabbing;
}

.clc-range-nav-handle {
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  width: var(--clc-range-nav-handle-width);
  cursor: ew-resize;
  z-index: 3;
}
.clc-range-nav-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: var(--clc-range-nav-handle-height);
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: var(--clc-range-nav-handle-background-color);
  box-shadow: var(--clc-range-nav-handle-shadow);
  transition: background 0.15s, box-shadow 0.15s;
}
.clc-range-nav-handle:hover::before, .clc-range-nav-handle:active::before {
  background: var(--clc-range-nav-handle-hover-background-color);
  box-shadow: var(--clc-range-nav-handle-hover-shadow);
}
.clc-range-nav-handle-start {
  inset-inline-start: calc(var(--clc-range-nav-handle-width) / -2);
}
.clc-range-nav-handle-start::before {
  border-radius: var(--clc-range-nav-handle-border-radius);
}
.clc-range-nav-handle-end {
  inset-inline-end: calc(var(--clc-range-nav-handle-width) / -2);
}
.clc-range-nav-handle-end::before {
  border-radius: var(--clc-range-nav-handle-border-radius);
}

.clc-range-nav-label {
  position: absolute;
  bottom: 100%;
  white-space: nowrap;
  background: var(--clc-chart-tooltip-background);
  color: var(--clc-chart-tooltip-color);
  font-size: var(--clc-chart-tooltip-font-size);
  line-height: 1;
  box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
  border-radius: var(--clc-chart-tooltip-border-radius);
  margin-bottom: 0.25rem;
  pointer-events: none;
  z-index: 4;
}
.clc-range-nav-label::after {
  content: "";
  position: absolute;
  top: 100%;
  border: 4px solid transparent;
  border-top-color: var(--clc-chart-tooltip-background);
}
.clc-range-nav-label-start {
  inset-inline-end: 0;
  inset-inline-start: auto;
}
.clc-range-nav-label-start::after {
  inset-inline-end: max(4px, var(--clc-range-nav-handle-width) / 2 - 4px);
}
.clc-range-nav-label-end {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.clc-range-nav-label-end::after {
  inset-inline-start: max(4px, var(--clc-range-nav-handle-width) / 2 - 4px);
}

.clc-range-nav-axis {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  height: 1.5rem;
  pointer-events: none;
  z-index: 0;
}

.clc-range-nav-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.clc-range-nav-tick-first {
  transform: none;
}
.clc-range-nav-tick-last {
  transform: translateX(-100%);
}

.clc-range-nav-tick-mark {
  width: 1px;
  height: 6px;
  background: var(--clc-chart-axis-color);
  margin: 0 auto;
}

.clc-range-nav-tick-label {
  font-size: var(--clc-chart-axis-font-size);
  line-height: 1.2;
  color: var(--clc-chart-axis-label-color);
  white-space: nowrap;
  text-align: center;
}

.clc-range-nav-has-axis {
  padding-bottom: 1.5rem;
}
.clc-range-nav-has-axis .clc-range-nav-shade {
  bottom: 1.5rem;
}
.clc-range-nav-has-axis .clc-range-nav-window {
  bottom: 1.5rem;
}

/* Compact Range Navigator */
.clc-range-nav-compact {
  height: var(--clc-range-nav-compact-height);
  background: var(--clc-range-nav-compact-background-color);
  border-radius: var(--clc-range-nav-compact-border-radius);
}
.clc-range-nav-compact .clc-range-nav-shade {
  background: transparent;
  opacity: 1;
}
.clc-range-nav-compact .clc-range-nav-window {
  border: none;
  background: var(--clc-range-nav-compact-window-background-color);
  border-radius: var(--clc-range-nav-compact-border-radius);
  opacity: 0.85;
}

.clc-range-nav-compact.clc-range-nav-has-axis {
  padding-bottom: 0;
  margin-bottom: 1.5rem;
}
.clc-range-nav-compact.clc-range-nav-has-axis .clc-range-nav-shade {
  bottom: 0;
}
.clc-range-nav-compact.clc-range-nav-has-axis .clc-range-nav-window {
  bottom: 0;
}
.clc-range-nav-compact.clc-range-nav-has-axis .clc-range-nav-axis {
  top: 100%;
  bottom: auto;
}

.clc-sankey-diagram {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--clc-border-radius);
  height: 300px;
  color: var(--clc-sankey-label-color);
}
.clc-sankey-diagram svg {
  display: block;
  width: 100%;
  height: 100%;
}
.clc-sankey-diagram .clc-sankey-link {
  cursor: pointer;
  pointer-events: painted;
  fill-opacity: 0.8;
  opacity: var(--clc-sankey-link-opacity);
  stroke-width: var(--clc-sankey-link-stroke-width);
  transition: opacity 0.2s;
}
.clc-sankey-diagram .clc-sankey-link:hover {
  opacity: var(--clc-sankey-link-hover-opacity);
}
.clc-sankey-diagram .clc-sankey-node {
  cursor: pointer;
}
.clc-sankey-diagram .clc-sankey-node rect {
  stroke-width: var(--clc-sankey-node-stroke-width);
  transition: opacity 0.2s;
}
.clc-sankey-diagram .clc-sankey-node:hover rect {
  opacity: 0.9;
}
.clc-sankey-diagram svg text {
  fill: var(--clc-sankey-label-color);
}
.clc-sankey-diagram text.clc-sankey-node-label {
  font-size: var(--clc-sankey-label-font-size);
  fill: var(--clc-sankey-label-color);
  stroke: var(--clc-sankey-label-stroke);
  stroke-width: var(--clc-sankey-label-stroke-width);
  stroke-linejoin: round;
  paint-order: stroke;
  font-weight: normal;
  pointer-events: none;
  user-select: none;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-0.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-0 rect {
  fill: #003f5c;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-1.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-1 rect {
  fill: #2f4b7c;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-2.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-2 rect {
  fill: #665191;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-3.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-3 rect {
  fill: #a05195;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-4.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-4 rect {
  fill: #d45087;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-5.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-5 rect {
  fill: #f95d6a;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-6.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-6 rect {
  fill: #ff7c43;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-7.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-7 rect {
  fill: #ffa600;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-8.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-8 rect {
  fill: #003f5c;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-9.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-9 rect {
  fill: #2f4b7c;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-10.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-10 rect {
  fill: #665191;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-11.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-11 rect {
  fill: #a05195;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-12.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-12 rect {
  fill: #d45087;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-13.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-13 rect {
  fill: #f95d6a;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-14.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-14 rect {
  fill: #ff7c43;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-15.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-15 rect {
  fill: #ffa600;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-16.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-16 rect {
  fill: #003f5c;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-17.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-17 rect {
  fill: #2f4b7c;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-18.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-18 rect {
  fill: #665191;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-19.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-19 rect {
  fill: #a05195;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-20.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-20 rect {
  fill: #d45087;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-21.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-21 rect {
  fill: #f95d6a;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-22.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-22 rect {
  fill: #ff7c43;
}
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-23.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-palette .clc-series-item-23 rect {
  fill: #ffa600;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-0.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-0 rect {
  fill: #004c6d;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-1.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-1 rect {
  fill: #255e7e;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-2.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-2 rect {
  fill: #3d708f;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-3.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-3 rect {
  fill: #5383a1;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-4.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-4 rect {
  fill: #6996b3;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-5.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-5 rect {
  fill: #7faac6;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-6.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-6 rect {
  fill: #94bed9;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-7.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-7 rect {
  fill: #abd2ec;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-8.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-8 rect {
  fill: #c1e7ff;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-9.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-9 rect {
  fill: #004c6d;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-10.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-10 rect {
  fill: #255e7e;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-11.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-11 rect {
  fill: #3d708f;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-12.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-12 rect {
  fill: #5383a1;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-13.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-13 rect {
  fill: #6996b3;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-14.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-14 rect {
  fill: #7faac6;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-15.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-15 rect {
  fill: #94bed9;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-16.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-16 rect {
  fill: #abd2ec;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-17.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-17 rect {
  fill: #c1e7ff;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-18.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-18 rect {
  fill: #004c6d;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-19.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-19 rect {
  fill: #255e7e;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-20.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-20 rect {
  fill: #3d708f;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-21.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-21 rect {
  fill: #5383a1;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-22.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-22 rect {
  fill: #6996b3;
}
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-23.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-monochrome .clc-series-item-23 rect {
  fill: #7faac6;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-0.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-0 rect {
  fill: #00876c;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-1.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-1 rect {
  fill: #469f76;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-2.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-2 rect {
  fill: #70b77e;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-3.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-3 rect {
  fill: #98ce86;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-4.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-4 rect {
  fill: #c1e48e;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-5.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-5 rect {
  fill: #eaf898;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-6.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-6 rect {
  fill: #ffffad;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-7.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-7 rect {
  fill: #fed693;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-8.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-8 rect {
  fill: #fcaa78;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-9.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-9 rect {
  fill: #f77b5f;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-10.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-10 rect {
  fill: #ed4a46;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-11.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-11 rect {
  fill: #d92632;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-12.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-12 rect {
  fill: #c31e28;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-13.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-13 rect {
  fill: #aa1620;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-14.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-14 rect {
  fill: #8b0e1a;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-15.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-15 rect {
  fill: #00876c;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-16.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-16 rect {
  fill: #469f76;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-17.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-17 rect {
  fill: #70b77e;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-18.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-18 rect {
  fill: #98ce86;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-19.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-19 rect {
  fill: #c1e48e;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-20.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-20 rect {
  fill: #eaf898;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-21.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-21 rect {
  fill: #ffffad;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-22.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-22 rect {
  fill: #fed693;
}
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-23.clc-sankey-link,
.clc-sankey-diagram.clc-scheme-divergent .clc-series-item-23 rect {
  fill: #fcaa78;
}

.clc-flow-gradient {
  fill-opacity: 0.7;
  pointer-events: none;
  mix-blend-mode: screen;
}

.clc-flow-highlight {
  fill: none;
  pointer-events: none;
  mix-blend-mode: overlay;
  animation: clc-pulse-subtle 3s ease-in-out infinite;
}

.clc-spider-chart {
  position: relative !important;
  display: block;
  height: 100%;
  width: 100%;
}
.clc-spider-chart .clc-spider-chart-wrapper {
  display: flex !important;
  height: 100%;
  align-items: center;
  flex-direction: row;
  gap: 16px;
  justify-content: flex-start;
}
.clc-spider-chart .clc-spider-chart-wrapper > svg {
  flex: 1 1 auto;
  overflow: visible;
  min-width: 0;
  min-height: 0;
}
.clc-spider-chart .clc-spider-chart-wrapper > .clc-spider-legend {
  flex: 0 0 auto;
  max-height: 100%;
  overflow-y: auto;
  padding: 0.75rem;
}
.clc-spider-chart .clc-spider-chart-wrapper.clc-spider-legend-left {
  flex-direction: row-reverse;
}
.clc-spider-chart .clc-spider-chart-wrapper.clc-spider-legend-top {
  flex-direction: column;
  align-items: stretch;
}
.clc-spider-chart .clc-spider-chart-wrapper.clc-spider-legend-top > .clc-spider-legend {
  order: -1;
  align-self: center;
  width: auto;
  max-width: 100%;
  max-height: none;
}
.clc-spider-chart .clc-spider-chart-wrapper.clc-spider-legend-top > .clc-spider-legend .clc-legend-items {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}
.clc-spider-chart .clc-spider-chart-wrapper.clc-spider-legend-bottom {
  flex-direction: column;
  align-items: stretch;
}
.clc-spider-chart .clc-spider-chart-wrapper.clc-spider-legend-bottom > .clc-spider-legend {
  align-self: center;
  width: auto;
  max-width: 100%;
  max-height: none;
}
.clc-spider-chart .clc-spider-chart-wrapper.clc-spider-legend-bottom > .clc-spider-legend .clc-legend-items {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}
.clc-spider-chart .clc-spider-chart-hit-area {
  cursor: pointer;
}
.clc-spider-chart .clc-spider-chart-grid-polygon {
  fill: none;
  stroke: var(--clc-chart-axis-color);
  stroke-width: 1;
}
.clc-spider-chart .clc-spider-chart-grid-circle {
  fill: none;
  stroke: var(--clc-chart-axis-color);
  stroke-width: 1;
}
.clc-spider-chart .clc-spider-chart-grid-line {
  stroke: var(--clc-chart-axis-color);
  stroke-width: 1;
}
.clc-spider-chart .clc-spider-chart-label {
  font-size: 0.875rem;
  fill: var(--clc-text-color) !important;
  user-select: none;
  pointer-events: none;
}
.clc-spider-chart .clc-spider-chart-info-panel {
  display: flex;
  gap: 1rem;
  margin-left: 1rem;
}
.clc-spider-chart .clc-spider-chart-details {
  width: 180px;
  display: flex;
  flex-direction: column;
}
.clc-spider-chart .clc-spider-chart-details .clc-spider-chart-details-header {
  height: 31px;
  padding: 8px 12px 4px 12px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--clc-text-title-color);
}
.clc-spider-chart .clc-spider-chart-details .clc-spider-chart-details-content {
  flex: 1;
  padding: 0 12px 12px 12px;
  overflow-y: auto;
}
.clc-spider-chart .clc-spider-chart-details .clc-spider-chart-details-series-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
  color: inherit;
}
.clc-spider-chart .clc-spider-chart-details .clc-spider-chart-details-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
}
.clc-spider-chart .clc-spider-chart-details .clc-spider-chart-details-item .clc-spider-chart-details-category {
  color: var(--clc-text-secondary-color);
}
.clc-spider-chart .clc-spider-chart-details .clc-spider-chart-details-item .clc-spider-chart-details-value {
  font-weight: 500;
}
.clc-spider-chart .clc-spider-chart-details .clc-spider-chart-details-placeholder {
  opacity: 0.5;
  font-size: 12px;
  color: var(--clc-text-secondary-color);
  text-align: center;
  padding: 20px 0;
}
.clc-spider-chart .clc-spider-chart-area {
  cursor: pointer;
  transition: stroke-width 0.3s ease-in-out, opacity 0.3s ease-in-out, fill-opacity 0.3s ease-in-out;
  fill-opacity: 0.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-opacity: 1;
}
.clc-spider-chart .clc-spider-chart-area[data-stroke-width="1"] {
  stroke-width: 1;
}
.clc-spider-chart .clc-spider-chart-area[data-stroke-width="2"] {
  stroke-width: 2;
}
.clc-spider-chart .clc-spider-chart-area[data-stroke-width="3"] {
  stroke-width: 3;
}
.clc-spider-chart .clc-spider-chart-area[data-stroke-width="4"] {
  stroke-width: 4;
}
.clc-spider-chart .clc-spider-chart-area.clc-state-hover {
  fill-opacity: 0.5;
  stroke-opacity: 1;
}
.clc-spider-chart .clc-spider-chart-area.clc-state-hover[data-stroke-width="1"] {
  stroke-width: 1.5;
}
.clc-spider-chart .clc-spider-chart-area.clc-state-hover[data-stroke-width="2"] {
  stroke-width: 3;
}
.clc-spider-chart .clc-spider-chart-area.clc-state-hover[data-stroke-width="3"] {
  stroke-width: 4.5;
}
.clc-spider-chart .clc-spider-chart-area.clc-state-hover[data-stroke-width="4"] {
  stroke-width: 6;
}
.clc-spider-chart .clc-spider-chart-area.clc-state-hidden {
  opacity: 0;
}
.clc-spider-chart .clc-spider-chart-column {
  cursor: pointer;
  transition: opacity 0.3s ease-in-out, fill-opacity 0.3s ease-in-out;
  fill-opacity: 0.7;
  stroke: var(--clc-base-background-color);
  stroke-width: 1;
}
.clc-spider-chart .clc-spider-chart-column.clc-state-hover {
  fill-opacity: 0.9;
}
.clc-spider-chart .clc-spider-chart-column.clc-state-hidden {
  opacity: 0;
}
.clc-spider-chart .clc-spider-chart-marker {
  cursor: pointer;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  pointer-events: all;
  stroke-width: 2;
}
.clc-spider-chart .clc-spider-chart-marker.clc-state-hover {
  transform: scale(1.25);
  transform-origin: center;
}
.clc-spider-chart .clc-spider-chart-marker.clc-state-hidden {
  opacity: 0;
}
.clc-spider-chart .clc-spider-legend {
  display: flex;
  flex-direction: column;
}
.clc-spider-chart .clc-spider-legend .clc-legend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--clc-border-color);
}
.clc-spider-chart .clc-spider-legend .clc-legend-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--clc-text-title-color);
}
.clc-spider-chart .clc-spider-legend .clc-legend-actions {
  display: flex;
  gap: 0.25rem;
}
.clc-spider-chart .clc-spider-legend .clc-legend-actions .clc-button {
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  min-height: unset;
  line-height: 1.2;
}
.clc-spider-chart .clc-spider-legend .clc-legend-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: max-content;
}
.clc-spider-chart .clc-spider-legend .clc-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
  cursor: pointer;
  border-radius: var(--clc-border-radius);
  transition: background-color 0.2s;
  white-space: nowrap;
}
.clc-spider-chart .clc-spider-legend .clc-legend-item:hover {
  background-color: var(--clc-base-200);
}
.clc-spider-chart .clc-spider-legend .clc-legend-item:focus {
  outline: 2px solid var(--clc-primary);
  outline-offset: -2px;
}
.clc-spider-chart .clc-spider-legend .clc-legend-item svg {
  flex-shrink: 0;
}
.clc-spider-chart .clc-spider-legend .clc-legend-item .clc-legend-item-text {
  font-size: 0.875rem;
  color: var(--clc-text-color);
  user-select: none;
}
.clc-spider-chart.clc-animate path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: spider-draw 1s ease-out forwards;
}
.clc-spider-chart.clc-animate circle {
  opacity: 0;
  animation: spider-fade-in 0.3s ease-out 0.8s forwards;
}

@keyframes spider-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes spider-fade-in {
  to {
    opacity: 1;
  }
}
.clc-gantt {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: var(--clc-gantt-border);
  border-radius: var(--clc-gantt-border-radius);
  background: var(--clc-gantt-background-color);
  overflow: hidden;
}
.clc-gantt .clc-gantt-splitter {
  flex: 1 1 auto;
  min-height: 0;
}
.clc-gantt .clc-scheduler {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: none;
  border-inline-start: var(--clc-gantt-border);
  border-radius: 0;
}
.clc-gantt .clc-gantt-timeline-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.clc-gantt .clc-data-grid {
  border: none;
  border-inline-end: var(--clc-gantt-border);
  border-radius: 0;
}
.clc-gantt .clc-data-grid .clc-grid-table thead tr:first-child th {
  border-top: var(--clc-gantt-header-group-height, 0px) solid var(--clc-grid-header-background-color);
}
.clc-gantt .clc-data-grid .clc-grid-table tbody tr {
  height: var(--clc-gantt-row-height) !important;
}
.clc-gantt .clc-data-grid .clc-grid-table tbody td {
  height: var(--clc-gantt-row-height) !important;
  vertical-align: middle;
  box-sizing: border-box;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1;
  overflow: hidden;
}
.clc-gantt .clc-data-grid .clc-grid-table tbody td .clc-cell-toggle .clc-button {
  min-height: 0;
  padding: 0.125rem;
}
.clc-gantt .clc-gantt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.clc-gantt .clc-gantt-table thead th {
  position: sticky;
  top: var(--clc-gantt-header-group-height, 0px);
  z-index: 2;
}
.clc-gantt .clc-gantt-header-group-row th {
  top: 0 !important;
  z-index: 3;
}
.clc-gantt .clc-gantt-table-header-cell {
  background: var(--clc-grid-header-background-color);
  color: var(--clc-grid-header-color);
  border-bottom: var(--clc-grid-header-cell-border-bottom);
  border-inline-end: var(--clc-grid-bottom-cell-border);
  padding: var(--clc-grid-header-cell-padding);
  font-size: var(--clc-grid-header-font-size);
  line-height: var(--clc-grid-header-line-height);
  text-transform: var(--clc-grid-header-text-transform);
  font-weight: var(--clc-grid-header-font-weight);
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}
.clc-gantt .clc-gantt-table-header-cell:last-child {
  border-inline-end: none;
}
.clc-gantt .clc-gantt-table-row > td {
  padding: 0;
  box-sizing: border-box;
  height: var(--clc-gantt-row-height);
  border-bottom: var(--clc-grid-bottom-cell-border);
  background-color: var(--clc-grid-stripe-odd-background-color);
}
.clc-gantt .clc-gantt-table-row:last-child > td {
  border-bottom: none;
}
.clc-gantt .clc-gantt-table-row:nth-child(even) > td {
  background-color: var(--clc-grid-stripe-background-color);
}
.clc-gantt .clc-gantt-row-container {
  position: relative;
  height: 100%;
}
.clc-gantt .clc-gantt-links {
  position: absolute;
  inset-inline-start: 0;
  top: var(--clc-gantt-header-height, 0px);
  bottom: 0;
  overflow: visible;
  pointer-events: none;
}
.clc-gantt .clc-gantt-link {
  fill: none;
  stroke: var(--clc-text-tertiary-color);
  stroke-width: 1.5;
}
.clc-gantt .clc-gantt-link-arrow {
  fill: var(--clc-text-tertiary-color);
}
.clc-gantt .clc-gantt-row-grid {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
}
.clc-gantt .clc-gantt-row-grid-col {
  border-inline-end: var(--clc-grid-right-cell-border);
  opacity: 0.35;
}
.clc-gantt .clc-gantt-row-grid-col:last-child {
  border-inline-end: none;
}
.clc-gantt .clc-gantt-timeline-row {
  background-color: var(--clc-grid-stripe-odd-background-color);
}
.clc-gantt .clc-gantt-timeline-row:nth-child(even) {
  background-color: var(--clc-grid-stripe-background-color);
}
.clc-gantt .clc-gantt-header {
  flex: 0 0 auto;
  border-bottom: var(--clc-gantt-border);
}
.clc-gantt .clc-data-grid-data {
  overflow-x: scroll !important;
  overflow-y: hidden !important;
}
.clc-gantt .clc-gantt-timeline-scroll {
  flex: 1 1 auto;
  height: 100%;
  overflow-x: scroll;
  overflow-y: auto;
  background: var(--clc-base-background-color);
}
.clc-gantt .clc-gantt-timeline-content {
  position: relative;
  min-height: 100%;
}
.clc-gantt .clc-gantt-timeline-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--clc-base-200);
  border-bottom: 1px solid var(--clc-border-color);
}
.clc-gantt .clc-gantt-bar {
  position: absolute;
  border-radius: var(--clc-gantt-event-border-radius);
  background: var(--clc-primary);
  color: var(--clc-on-primary);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  padding-block: 0;
  padding-inline: 0;
  --clc-scheduler-event-content-padding: 0;
}
.clc-gantt .clc-gantt-bar .clc-event-content {
  border-radius: 0;
}
.clc-gantt .clc-gantt-bar-content {
  position: relative;
  height: 100%;
}
.clc-gantt .clc-gantt-bar-progress {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}
.clc-gantt .clc-gantt-bar-label {
  position: relative;
  z-index: 1;
  padding: 0 0.5rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: calc(0.6 * var(--clc-gantt-row-height));
}
.clc-gantt .clc-gantt-milestone {
  position: absolute;
  width: 0.6em;
  height: 0.6em;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: translateX(-50%);
  background: var(--clc-primary);
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}
.clc-gantt .clc-gantt-milestone .clc-event-content {
  display: none;
}
.clc-gantt .clc-gantt-critical {
  background: var(--clc-danger) !important;
  color: var(--clc-on-danger) !important;
  box-shadow: 0 1px 4px rgba(var(--clc-danger-rgb, 244, 67, 54), 0.4);
}
.clc-gantt .clc-gantt-link-critical {
  stroke: var(--clc-danger);
  stroke-width: 2.5;
}
.clc-gantt .clc-gantt-link-arrow-critical {
  fill: var(--clc-danger);
}
.clc-gantt .clc-gantt-baseline {
  position: absolute;
  border-radius: 2px;
  background: color-mix(in srgb, var(--clc-secondary) 25%, transparent);
  border: 1px solid var(--clc-secondary);
  pointer-events: none;
}
.clc-gantt .clc-gantt-row-grid-col.clc-gantt-nonworking {
  background: var(--clc-text-disabled-color);
  opacity: 0.12;
}
.clc-gantt th.clc-gantt-nonworking {
  background: color-mix(in srgb, var(--clc-grid-header-background-color) 88%, var(--clc-text-disabled-color));
}
.clc-gantt .clc-gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--clc-danger);
  pointer-events: none;
  z-index: 1;
  transform: translateX(-1px);
}
.clc-gantt .clc-gantt-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-inline-start: 2px dashed var(--clc-gantt-marker-color, var(--clc-info));
  pointer-events: none;
  z-index: 1;
}
.clc-gantt .clc-gantt-marker-label {
  position: absolute;
  top: 0;
  inset-inline-start: 4px;
  font-size: 0.625rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--clc-gantt-marker-color, var(--clc-info));
  font-weight: 600;
  padding: 2px 4px;
  background: var(--clc-base-background-color);
  border-radius: var(--clc-border-radius);
}

.clc-link {
  box-sizing: border-box;
  color: var(--clc-link-color);
  text-decoration: none;
  cursor: pointer;
}
.clc-link .clc-link-disabled {
  pointer-events: none;
  opacity: 0.5;
}
.clc-link .clc-link-text {
  text-decoration: var(--clc-link-text-decoration);
}
.clc-link .clci {
  font-size: inherit;
  vertical-align: middle;
}
.clc-link:hover, .clc-link:focus {
  color: var(--clc-link-hover-color);
  text-decoration: none;
}
.clc-link:hover .clc-link-text, .clc-link:focus .clc-link-text {
  text-decoration: var(--clc-link-hover-text-decoration);
}
.clc-link:focus-visible {
  outline: var(--clc-link-focus-outline);
}

.clc-state-highlight .link {
  color: var(--clc-text-contrast-color);
}

.clc-html-editor {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: var(--clc-editor-border-radius);
  border: var(--clc-editor-border);
  overflow: hidden;
}
.clc-html-editor:focus-within {
  outline: var(--clc-editor-focus-outline);
  outline-offset: var(--clc-editor-focus-outline-offset);
}

.clc-html-editor-content {
  flex: 1;
  overflow: auto;
  padding: 0.5rem;
  outline: none;
  background-color: var(--clc-editor-content-background-color);
}
.clc-html-editor-content td.clc-html-editor-cell-selected,
.clc-html-editor-content th.clc-html-editor-cell-selected {
  outline: 2px solid var(--clc-primary);
  outline-offset: -2px;
  background-color: color-mix(in srgb, var(--clc-primary) 12%, transparent);
}

.clc-html-editor-source.clc-textarea {
  --clc-input-hover-shadow: none;
  --clc-input-border: none;
  --clc-input-hover-border: none;
  --clc-input-focus-shadow: none;
  --clc-input-focus-border: none;
  flex: 1;
  padding: 0.5rem;
  overflow: auto;
  outline: none;
  background-color: var(--clc-editor-content-background-color);
}

.clc-html-editor-toolbar {
  border-bottom: var(--clc-editor-border);
  background-color: var(--clc-editor-toolbar-background-color);
  padding: 0.25rem;
}

.clc-html-editor-dialog-item {
  margin-bottom: 1rem;
}
.clc-html-editor-dialog-item label:first-child {
  display: block;
}

.clc-html-editor-dialog-buttons {
  text-align: right;
}

.clc-html-editor-table-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.clc-colorpicker {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.clc-colorpicker.clc-state-disabled {
  cursor: default;
}

button.clc-colorpicker-trigger {
  border: none;
  appearance: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  color: var(--clc-text-color);
  background-color: inherit;
  outline: none;
}
button.clc-colorpicker-trigger .clci {
  font-size: var(--clc-colorpicker-trigger-icon-size);
}
button.clc-colorpicker-trigger .clci:before {
  content: "arrow_drop_down";
}
.clc-state-disabled button.clc-colorpicker-trigger {
  color: var(--clc-input-disabled-color);
}

.clc-colorpicker-popup {
  display: none;
  position: absolute;
  border: var(--clc-colorpicker-panel-border);
  background-color: var(--clc-colorpicker-panel-background-color);
  box-shadow: var(--clc-colorpicker-panel-shadow);
  min-width: 200px;
  max-width: var(--clc-colorpicker-panel-max-width);
  padding: var(--clc-colorpicker-panel-padding);
  border-radius: var(--clc-border-radius);
}

.clc-colorpicker-value {
  flex: 1;
  border-radius: var(--clc-colorpicker-value-border-radius);
  border: var(--clc-colorpicker-panel-border);
  min-width: var(--clc-colorpicker-value-size);
  min-height: var(--clc-colorpicker-value-size);
}

.clc-colorpicker.clc-input-xs {
  --clc-colorpicker-value-size: var(--clc-colorpicker-value-size-xs);
  --clc-colorpicker-trigger-icon-size: var(--clc-colorpicker-trigger-icon-size-xs);
}

.clc-colorpicker.clc-input-sm {
  --clc-colorpicker-value-size: var(--clc-colorpicker-value-size-sm);
  --clc-colorpicker-trigger-icon-size: var(--clc-colorpicker-trigger-icon-size-sm);
}

.clc-saturation-picker {
  height: var(--clc-colorpicker-saturation-height);
  position: relative;
  touch-action: none;
  border-radius: var(--clc-border-radius);
}
.clc-saturation-picker:focus {
  outline: var(--clc-outline-normal);
}
.clc-saturation-picker:focus-visible {
  outline: var(--clc-colorpicker-focus-outline);
  outline-offset: var(--clc-colorpicker-focus-outline-offset);
}

.clc-saturation-white {
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.clc-saturation-black,
.clc-saturation-white {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--clc-border-radius);
  border-start-start-radius: calc(var(--clc-border-radius) - 1px);
}

.clc-saturation-black {
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.clc-saturation-handle {
  position: absolute;
  width: var(--clc-colorpicker-handle-size);
  height: var(--clc-colorpicker-handle-size);
  border: var(--clc-colorpicker-handle-border);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: var(--clc-colorpicker-handle-shadow);
}

.clc-hue-picker {
  margin-bottom: 8px;
  touch-action: none;
  position: relative;
  background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);
  border-radius: var(--clc-border-radius);
  height: var(--clc-colorpicker-handle-size);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.clc-hue-picker:active {
  cursor: none;
}
.clc-hue-picker:focus {
  outline: var(--clc-outline-normal);
}
.clc-hue-picker:focus-visible {
  outline: var(--clc-colorpicker-focus-outline);
  outline-offset: var(--clc-colorpicker-focus-outline-offset);
}

.clc-alpha-picker {
  touch-action: none;
  position: relative;
  border-radius: var(--clc-border-radius);
  height: var(--clc-colorpicker-handle-size);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.clc-alpha-picker:active {
  cursor: none;
}
.clc-alpha-picker:focus {
  outline: var(--clc-outline-normal);
}
.clc-alpha-picker:focus-visible {
  outline: var(--clc-colorpicker-focus-outline);
  outline-offset: var(--clc-colorpicker-focus-outline-offset);
}

.clc-hue-handle,
.clc-alpha-handle {
  position: absolute;
  height: 100%;
  width: 8px;
  border: var(--clc-colorpicker-handle-border);
  border-radius: calc(var(--clc-border-radius) / 2);
  transform: translateX(-50%);
  box-shadow: var(--clc-colorpicker-handle-shadow);
}

.clc-colorpicker-preview-area {
  display: flex;
}

.clc-hue-and-alpha {
  flex: 1;
  padding-inline-end: 8px;
}

.clc-alpha-picker:before,
.clc-colorpicker-preview:before {
  position: absolute;
  z-index: -1;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: var(--clc-border-radius);
  background-image: linear-gradient(45deg, var(--clc-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--clc-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--clc-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--clc-text-disabled-color) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

.clc-colorpicker-preview {
  position: relative;
  width: 32px;
  height: 32px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset;
  border-radius: var(--clc-border-radius);
}

.clc-colorpicker-rgba {
  display: flex;
  gap: 4px;
}

.clc-color-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  color: var(--clc-colorpicker-input-labels-color);
  font-size: 0.75rem;
  text-transform: uppercase;
}
.clc-color-box .clc-textbox {
  width: 80px;
  margin-inline-end: 4px;
  padding: var(--clc-colorpicker-hex-input-padding);
  height: var(--clc-colorpicker-hex-input-height);
}
.clc-color-box .clc-numeric {
  padding: var(--clc-colorpicker-rgba-input-padding);
  height: var(--clc-colorpicker-rgba-input-height);
}
.clc-color-box .clc-numeric .clc-numeric-input {
  padding: 0;
  outline: none;
}
.clc-color-box .clc-numeric button {
  display: none;
}
.clc-color-box .clc-numeric button:hover {
  display: initial;
}

.clc-colorpicker-button {
  display: flex;
}
.clc-colorpicker-button > .clc-button {
  flex: 1;
}

.clc-colorpicker-section:not(:last-child) {
  margin-bottom: 8px;
}

.clc-colorpicker-colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clc-colorpicker-items-gap);
}

.clc-colorpicker-item {
  width: var(--clc-colorpicker-item-size);
  height: var(--clc-colorpicker-item-size);
  border-radius: var(--clc-colorpicker-item-border-radius);
  box-shadow: var(--clc-colorpicker-item-shadow);
  cursor: pointer;
  transition: transform var(--clc-transition);
}
.clc-colorpicker-item:focus {
  outline: var(--clc-outline-normal);
}
.clc-colorpicker-item:focus-visible {
  outline: var(--clc-colorpicker-focus-outline);
  outline-offset: var(--clc-colorpicker-focus-outline-offset);
}
.clc-colorpicker-item.selected {
  transform: var(--clc-colorpicker-item-selected-transform);
}

.clc-splitter {
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}
.clc-splitter > .clc-splitter-bar {
  flex: 0 0 auto;
  position: relative;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clc-splitter-bar-color);
  background-color: var(--clc-splitter-bar-background-color);
  opacity: 0.4;
  user-select: none;
}
.clc-splitter > .clc-splitter-bar > .clc-collapse {
  display: table;
}
.clc-splitter > .clc-splitter-bar > .clc-collapse:before {
  font-family: var(--clc-icon-font-family);
  line-height: normal;
  display: table-cell;
}
.clc-splitter > .clc-splitter-bar > .clc-collapse:hover {
  cursor: pointer;
}
.clc-splitter > .clc-splitter-bar > .clc-resize {
  border: 1px solid var(--clc-splitter-bar-color);
  border-radius: 1px;
}
.clc-splitter > .clc-splitter-bar > .clc-expand {
  display: table;
}
.clc-splitter > .clc-splitter-bar > .clc-expand:before {
  font-family: var(--clc-icon-font-family);
  line-height: normal;
  display: table-cell;
}
.clc-splitter > .clc-splitter-bar > .clc-expand:hover {
  cursor: pointer;
}
.clc-splitter > .clc-splitter-bar-resizable:hover {
  background-color: var(--clc-splitter-bar-background-color);
  opacity: var(--clc-splitter-bar-hover-opacity);
}
.clc-splitter > .clc-splitter-bar-resizable:active {
  background-color: var(--clc-splitter-bar-background-color-active);
  opacity: var(--clc-splitter-bar-hover-opacity);
}
.clc-splitter > .clc-splitter-bar-resizable:active > .clc-expand, .clc-splitter > .clc-splitter-bar-resizable:active > .clc-resize, .clc-splitter > .clc-splitter-bar-resizable:active > .clc-collapse {
  color: var(--clc-splitter-bar-color-active);
}
.clc-splitter > .clc-splitter-bar-resizable:active > .clc-resize {
  border: 1px solid var(--clc-splitter-bar-color-active);
}
.clc-splitter > .clc-splitter-bar-resizable:disabled {
  opacity: 0.2;
}
.clc-splitter-horizontal {
  flex-direction: row;
}
.clc-splitter-horizontal > .clc-splitter-bar {
  flex-direction: column;
  width: 8px;
}
.clc-splitter-horizontal > .clc-splitter-bar > .clc-collapse:before {
  content: "arrow_left";
}
.clc-splitter-horizontal > .clc-splitter-bar > .clc-resize {
  height: 16px;
  margin: 2px 0;
}
.clc-splitter-horizontal > .clc-splitter-bar > .clc-expand:before {
  content: "arrow_right";
}
.clc-splitter-horizontal > .clc-splitter-bar-resizable:hover {
  cursor: col-resize;
}
.clc-splitter-vertical {
  flex-direction: column;
}
.clc-splitter-vertical > .clc-splitter-bar {
  flex-direction: row;
  height: 8px;
}
.clc-splitter-vertical > .clc-splitter-bar > .clc-collapse:before {
  content: "arrow_drop_up";
}
.clc-splitter-vertical > .clc-splitter-bar > .clc-resize {
  width: 16px;
  margin: 0 2px;
}
.clc-splitter-vertical > .clc-splitter-bar > .clc-expand:before {
  content: "arrow_drop_down";
}
.clc-splitter-vertical > .clc-splitter-bar-resizable:hover {
  cursor: row-resize;
}
.clc-splitter-pane {
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
}
.clc-splitter-pane-collapsed {
  flex: 0 1 0% !important;
  overflow: hidden !important;
  display: block !important;
}
.clc-splitter-pane-lastresizable {
  flex: 1 1 auto;
}

.clc-splitter-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.clc-tile-layout {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.clc-tile-layout-cells {
  box-sizing: border-box;
  display: grid;
  position: relative;
  width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
}

.clc-tile-layout-overlay {
  box-sizing: border-box;
  display: grid;
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  pointer-events: none;
  z-index: 2;
}

.clc-tile-layout-overlay-cell {
  background-color: var(--clc-tile-layout-overlay-background-color, var(--clc-primary-lighter));
  border: 1px dashed var(--clc-tile-layout-overlay-border-color, var(--clc-primary));
  border-radius: var(--clc-tile-layout-item-border-radius, var(--clc-card-border-radius));
  pointer-events: none;
  opacity: 0.35;
}

.clc-tile-layout-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background-color: var(--clc-tile-layout-item-background-color, var(--clc-base-background-color));
  border: var(--clc-tile-layout-item-border, var(--clc-card-border));
  border-radius: var(--clc-tile-layout-item-border-radius, var(--clc-card-border-radius));
  box-shadow: var(--clc-tile-layout-item-shadow, var(--clc-card-shadow));
  z-index: 1;
}

.clc-tile-layout-item-active {
  z-index: 3;
  box-shadow: var(--clc-shadow-3, 0 0.5rem 1rem rgba(0, 0, 0, 0.2));
}

.clc-tile-layout-item-header {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--clc-tile-layout-item-header-background-color, var(--clc-base));
  border-bottom: var(--clc-tile-layout-item-border, var(--clc-card-border));
  user-select: none;
}

.clc-tile-layout-item-header-draggable {
  cursor: move;
  touch-action: none;
}

.clc-tile-layout-item-drag-handle {
  color: var(--clc-text-tertiary-color);
  cursor: move;
}

.clc-tile-layout-item-icon {
  color: var(--clc-text-secondary-color);
}

.clc-tile-layout-item-title {
  flex: 1;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clc-tile-layout-item-content {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.75rem;
  overflow: auto;
}

.clc-tile-layout-item-resize-handle {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: 1rem;
  height: 1rem;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 3;
  background: linear-gradient(135deg, transparent 0%, transparent 50%, var(--clc-text-tertiary-color) 50%, var(--clc-text-tertiary-color) 60%, transparent 60%, transparent 70%, var(--clc-text-tertiary-color) 70%, var(--clc-text-tertiary-color) 80%, transparent 80%);
}

.clc-tile-layout-dragging {
  user-select: none;
}

/* Clevi Blazor Layout reset styles */
:root:has(.clc-layout) {
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-size: var(--clc-root-font-size);
}
:root:has(.clc-layout) body {
  margin: 0;
  color: var(--clc-text-color);
  background-color: var(--clc-body-background-color);
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-body-font-size);
  line-height: var(--clc-body-line-height);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* CleviLayout styles */
.clc-layout {
  box-sizing: border-box;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "clc-header clc-header" "clc-sidebar clc-body" "clc-footer clc-footer";
  background-color: var(--clc-layout-background-color);
}
.clc-layout .clc-body {
  grid-area: clc-body;
  overflow: auto;
}
.clc-layout .clc-sidebar {
  grid-area: clc-sidebar;
  position: static;
}
.clc-layout .clc-sidebar-end,
.clc-layout .clc-sidebar-right {
  grid-area: clc-sidebar-2;
}
.clc-layout .clc-header {
  grid-area: clc-header;
  z-index: 2;
}
.clc-layout .clc-footer {
  grid-area: clc-footer;
}

.clc-layout:has(> .clc-sidebar-start),
.clc-layout:has(> .clc-sidebar-left) {
  grid-template-areas: "clc-sidebar clc-body";
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
}
.clc-layout:has(> .clc-sidebar-start):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-header) {
  grid-template-areas: "clc-header clc-header" "clc-sidebar clc-body";
  grid-template-rows: auto 1fr;
}
.clc-layout:has(> .clc-sidebar-start):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar clc-body" "clc-footer clc-footer";
  grid-template-rows: 1fr auto;
}
.clc-layout:has(> .clc-sidebar-start):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-header clc-header" "clc-sidebar clc-body" "clc-footer clc-footer";
  grid-template-rows: auto 1fr auto;
}

.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-header) {
  grid-template-areas: "clc-sidebar clc-header" "clc-sidebar clc-body";
}
.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar clc-body" "clc-sidebar clc-footer";
}
.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar clc-header" "clc-sidebar clc-body" "clc-sidebar clc-footer";
}

.clc-layout:has(> .clc-sidebar-end),
.clc-layout:has(> .clc-sidebar-right) {
  grid-template-areas: "clc-body clc-sidebar-2";
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr;
}
.clc-layout:has(> .clc-sidebar-end):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-right):has(> .clc-header) {
  grid-template-areas: "clc-header clc-header" "clc-body clc-sidebar-2";
  grid-template-rows: auto 1fr;
}
.clc-layout:has(> .clc-sidebar-end):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-right):has(> .clc-footer) {
  grid-template-areas: "clc-body clc-sidebar-2" "clc-footer clc-footer";
  grid-template-rows: 1fr auto;
}
.clc-layout:has(> .clc-sidebar-end):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-right):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-header clc-header" "clc-body clc-sidebar-2" "clc-footer clc-footer";
  grid-template-rows: auto 1fr auto;
}

.clc-layout:has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header) {
  grid-template-areas: "clc-header clc-sidebar-2" "clc-body clc-sidebar-2";
}
.clc-layout:has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-footer) {
  grid-template-areas: "clc-body clc-sidebar-2" "clc-footer clc-sidebar-2";
}
.clc-layout:has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-header clc-sidebar-2" "clc-body clc-sidebar-2" "clc-footer clc-sidebar-2";
}

.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-end),
.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-right),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-end) {
  grid-template-areas: "clc-sidebar clc-body clc-sidebar-2";
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr;
}
.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-end):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-right):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-end):has(> .clc-header) {
  grid-template-areas: "clc-header clc-header clc-header" "clc-sidebar clc-body clc-sidebar-2";
  grid-template-rows: auto 1fr;
}
.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-end):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-right):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-end):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar clc-body clc-sidebar-2" "clc-footer clc-footer clc-footer";
  grid-template-rows: 1fr auto;
}
.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-end):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-right):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-end):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-header clc-header clc-header" "clc-sidebar clc-body clc-sidebar-2" "clc-footer clc-footer clc-footer";
  grid-template-rows: auto 1fr auto;
}

.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-sidebar-end):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-sidebar-right):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-right):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-end):has(> .clc-header) {
  grid-template-areas: "clc-sidebar clc-header clc-header" "clc-sidebar clc-body clc-sidebar-2";
}
.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-sidebar-end):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-sidebar-right):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-right):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-end):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar clc-body clc-sidebar-2" "clc-sidebar clc-footer clc-footer";
}
.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-sidebar-end):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-sidebar-right):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-right):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-end):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar clc-header clc-header" "clc-sidebar clc-body clc-sidebar-2" "clc-sidebar clc-footer clc-footer";
}

.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header) {
  grid-template-areas: "clc-header clc-header clc-sidebar-2" "clc-sidebar clc-body clc-sidebar-2";
}
.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar clc-body clc-sidebar-2" "clc-footer clc-footer clc-sidebar-2";
}
.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-start):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-header clc-header clc-sidebar-2" "clc-sidebar clc-body clc-sidebar-2" "clc-footer clc-footer clc-sidebar-2";
}

.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-header) {
  grid-template-areas: "clc-sidebar clc-head er clc-sidebar-2" "clc-sidebar clc-body clc-sidebar-2";
}
.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar clc-body clc-sidebar-2" "clc-sidebar clc-footer clc-sidebar-2";
}
.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-start.clc-sidebar-fullheight):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer),
.clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-end.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar clc-header clc-sidebar-2" "clc-sidebar clc-body clc-sidebar-2" "clc-sidebar clc-footer clc-sidebar-2";
}

*[dir=rtl] .clc-layout:has(> .clc-sidebar-left) {
  grid-template-areas: "clc-body clc-sidebar";
  grid-template-columns: 1fr auto;
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left):has(> .clc-header) {
  grid-template-areas: "clc-header clc-header" "clc-body clc-sidebar";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left):has(> .clc-footer) {
  grid-template-areas: "clc-body clc-sidebar" "clc-footer clc-footer";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-header clc-header" "clc-body clc-sidebar" "clc-footer clc-footer";
}

*[dir=rtl] .clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-header) {
  grid-template-areas: "clc-header clc-sidebar" "clc-body clc-sidebar";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-footer) {
  grid-template-areas: "clc-body clc-sidebar" "clc-footer clc-sidebar";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-header clc-sidebar" "clc-body clc-sidebar" "clc-footer clc-sidebar";
}

*[dir=rtl] .clc-layout:has(> .clc-sidebar-right) {
  grid-template-areas: "clc-sidebar-2 clc-body";
  grid-template-columns: auto 1fr;
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-right):has(> .clc-header) {
  grid-template-areas: "clc-header clc-header" "clc-sidebar-2 clc-body";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-right):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar-2 clc-body" "clc-footer clc-footer";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-right):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-header clc-header" "clc-sidebar-2 clc-body" "clc-footer clc-footer";
}

*[dir=rtl] .clc-layout:has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header) {
  grid-template-areas: "clc-sidebar-2 clc-header" "clc-sidebar-2 clc-body";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar-2 clc-body" "clc-sidebar-2 clc-footer";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar-2 clc-header" "clc-sidebar-2 clc-body" "clc-sidebar-2 clc-footer";
}

*[dir=rtl] .clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right) {
  grid-template-areas: "clc-sidebar-2 clc-body clc-sidebar";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right):has(> .clc-header) {
  grid-template-areas: "clc-header clc-header clc-header" "clc-sidebar-2 clc-body clc-sidebar";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar-2 clc-body clc-sidebar" "clc-footer clc-footer clc-footer";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-header clc-header clc-header" "clc-sidebar-2 clc-body clc-sidebar" "clc-footer clc-footer clc-footer";
}

*[dir=rtl] .clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-right):has(> .clc-header) {
  grid-template-areas: "clc-header clc-header clc-sidebar" "clc-sidebar-2 clc-body clc-sidebar";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-right):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar-2 clc-body clc-sidebar" "clc-footer clc-footer clc-sidebar";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-right):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-header clc-header clc-sidebar" "clc-sidebar-2 clc-body clc-sidebar" "clc-footer clc-footer clc-sidebar";
}

*[dir=rtl] .clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header) {
  grid-template-areas: "clc-sidebar-2 clc-header clc-header" "clc-sidebar-2 clc-body clc-sidebar";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar-2 clc-body clc-sidebar" "clc-sidebar-2 clc-footer clc-footer";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar-2 clc-header clc-header" "clc-sidebar-2 clc-body clc-sidebar" "clc-sidebar-2 clc-footer clc-footer";
}

*[dir=rtl] .clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header) {
  grid-template-areas: "clc-sidebar-2 clc-header clc-sidebar" "clc-sidebar-2 clc-body clc-sidebar";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar-2 clc-body clc-sidebar" "clc-sidebar-2 clc-footer clc-sidebar";
}
*[dir=rtl] .clc-layout:has(> .clc-sidebar-left.clc-sidebar-fullheight):has(> .clc-sidebar-right.clc-sidebar-fullheight):has(> .clc-header):has(> .clc-footer) {
  grid-template-areas: "clc-sidebar-2 clc-header clc-sidebar" "clc-sidebar-2 clc-body clc-sidebar" "clc-sidebar-2 clc-footer clc-sidebar";
}

@media (max-width: 768px) {
  body:has(> .clc-layout) {
    overflow-x: hidden;
  }
  .clc-layout:not(:has(> .clc-sidebar:nth-of-type(2))) .clc-header,
  .clc-layout:not(:has(> .clc-sidebar:nth-of-type(2))) .clc-footer,
  .clc-layout:not(:has(> .clc-sidebar:nth-of-type(2))) .clc-body {
    width: 100vw;
  }
  .clc-layout:has(> .clc-sidebar-collapsed + .clc-sidebar-expanded) {
    justify-content: end;
  }
  .clc-layout:has(> .clc-sidebar-collapsed + .clc-sidebar-expanded) .clc-header, .clc-layout:has(> .clc-sidebar-collapsed + .clc-sidebar-expanded) .clc-footer {
    margin-inline-start: auto;
  }
  .clc-layout:has(> .clc-sidebar-expanded + .clc-sidebar-expanded) .clc-body {
    width: auto;
  }
}
.clc-breadcrumb {
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.clc-breadcrumb-list {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.clc-breadcrumb-item + .clc-breadcrumb-item::before {
  content: "»"/"";
  display: inline-block;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
  font-size: 1rem;
  line-height: 1.25rem;
}

.clc-breadcrumb-item {
  display: inline-flex;
  align-items: center;
}
.clc-breadcrumb-item .clc-link {
  display: inline-flex;
  align-items: center;
}
.clc-breadcrumb-item .clc-link-disabled {
  pointer-events: none;
  opacity: 0.5;
}

.clc-alert {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--clc-alert-gap);
  margin: var(--clc-alert-margin);
  padding: var(--clc-alert-padding);
  width: 100%;
  border-radius: var(--clc-alert-border-radius);
  background-color: var(--clc-alert-background-color);
  color: var(--clc-alert-color);
}
.clc-alert-lg {
  --clc-alert-gap: 1.5rem;
  --clc-alert-margin: 1.5rem 0;
  --clc-alert-padding: 1.5rem;
  --clc-alert-message-margin: 0.125rem 0;
  --clc-alert-icon-margin: 0.125rem 0;
}
.clc-alert-md {
  --clc-alert-gap: 1rem;
  --clc-alert-margin: 1rem 0;
  --clc-alert-padding: 1rem;
  --clc-alert-message-margin: 0.125rem 0;
  --clc-alert-icon-margin: 0.125rem 0;
}
.clc-alert-sm {
  --clc-alert-gap: 0.5rem;
  --clc-alert-margin: 0.5rem 0;
  --clc-alert-padding: 0.5rem;
  --clc-alert-message-margin: 0.125rem 0;
  --clc-alert-icon-margin: 0.125rem 0;
}
.clc-alert-xs {
  --clc-alert-gap: 0.25rem;
  --clc-alert-margin: 0.25rem 0;
  --clc-alert-padding: 0.25rem;
  --clc-alert-message-margin: 0;
  --clc-alert-icon-margin: 0;
}
.clc-alert .clc-alert-item {
  flex: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--clc-alert-gap);
}
.clc-alert .clc-alert-icon {
  color: var(--clc-alert-icon-color);
  margin: var(--clc-alert-icon-margin);
  font-size: var(--clc-alert-icon-size);
}
.clc-alert .clc-alert-message {
  flex: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: var(--clc-alert-message-margin);
}
.clc-alert .clc-alert-title {
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-text-h6-font-size);
  line-height: var(--clc-text-h6-line-height);
  font-weight: var(--clc-text-h6-font-weight);
  letter-spacing: var(--clc-text-h6-letter-spacing);
  color: var(--clc-alert-title-color);
  margin-bottom: var(--clc-text-h6-margin-bottom);
}
.clc-alert.clc-variant-filled {
  box-shadow: var(--clc-alert-box-shadow);
}
.clc-alert.clc-variant-text {
  --clc-alert-padding: 0;
  --clc-alert-background-color: transparent;
  --clc-alert-gap: 0.5rem;
  --clc-alert-margin: 0;
}
.clc-alert.clc-variant-text .clc-alert-item {
  flex: unset;
}
.clc-alert.clc-variant-text .clc-alert-message {
  flex-direction: row;
}
.clc-alert.clc-variant-text .clc-alert-title {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin-bottom: 0;
  margin-right: 0.5rem;
}
.clc-alert.clc-primary {
  --clc-alert-background-color: var(--clc-primary);
  --clc-alert-color: var(--clc-on-primary);
  --clc-alert-title-color: var(--clc-on-primary);
  --clc-alert-icon-color: var(--clc-on-primary);
}
.clc-alert.clc-primary.clc-shade-lighter {
  --clc-alert-background-color: var(--clc-primary-lighter);
  --clc-alert-color: var(--clc-on-primary-lighter);
  --clc-alert-title-color: var(--clc-on-primary-lighter);
  --clc-alert-icon-color: var(--clc-on-primary-lighter);
}
.clc-alert.clc-primary.clc-shade-light {
  --clc-alert-background-color: var(--clc-primary-light);
  --clc-alert-color: var(--clc-on-primary-light);
  --clc-alert-title-color: var(--clc-on-primary-light);
  --clc-alert-icon-color: var(--clc-on-primary-light);
}
.clc-alert.clc-primary.clc-shade-default {
  --clc-alert-background-color: var(--clc-primary);
  --clc-alert-color: var(--clc-on-primary);
  --clc-alert-title-color: var(--clc-on-primary);
  --clc-alert-icon-color: var(--clc-on-primary);
}
.clc-alert.clc-primary.clc-shade-dark {
  --clc-alert-background-color: var(--clc-primary-dark);
  --clc-alert-color: var(--clc-on-primary-dark);
  --clc-alert-title-color: var(--clc-on-primary-dark);
  --clc-alert-icon-color: var(--clc-on-primary-dark);
}
.clc-alert.clc-primary.clc-shade-darker {
  --clc-alert-background-color: var(--clc-primary-darker);
  --clc-alert-color: var(--clc-on-primary-darker);
  --clc-alert-title-color: var(--clc-on-primary-darker);
  --clc-alert-icon-color: var(--clc-on-primary-darker);
}
.clc-alert.clc-variant-outlined.clc-primary {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-outlined.clc-primary.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary);
  --clc-alert-color: var(--clc-primary);
  --clc-alert-title-color: var(--clc-primary);
  --clc-alert-icon-color: var(--clc-primary);
}
.clc-alert.clc-variant-outlined.clc-primary.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary-lighter);
  --clc-alert-color: var(--clc-primary-lighter);
  --clc-alert-title-color: var(--clc-primary-lighter);
  --clc-alert-icon-color: var(--clc-primary-lighter);
}
.clc-alert.clc-variant-outlined.clc-primary.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary-light);
  --clc-alert-color: var(--clc-primary-light);
  --clc-alert-title-color: var(--clc-primary-light);
  --clc-alert-icon-color: var(--clc-primary-light);
}
.clc-alert.clc-variant-outlined.clc-primary.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary-dark);
  --clc-alert-color: var(--clc-primary-dark);
  --clc-alert-title-color: var(--clc-primary-dark);
  --clc-alert-icon-color: var(--clc-primary-dark);
}
.clc-alert.clc-variant-outlined.clc-primary.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-primary-darker);
  --clc-alert-color: var(--clc-primary-darker);
  --clc-alert-title-color: var(--clc-primary-darker);
  --clc-alert-icon-color: var(--clc-primary-darker);
}
.clc-alert.clc-variant-text.clc-primary {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-text.clc-primary.clc-shade-default {
  --clc-alert-color: var(--clc-primary);
  --clc-alert-icon-color: var(--clc-primary);
  --clc-alert-title-color: var(--clc-primary);
}
.clc-alert.clc-variant-text.clc-primary.clc-shade-lighter {
  --clc-alert-color: var(--clc-primary-lighter);
  --clc-alert-title-color: var(--clc-primary-lighter);
  --clc-alert-icon-color: var(--clc-primary-lighter);
}
.clc-alert.clc-variant-text.clc-primary.clc-shade-light {
  --clc-alert-color: var(--clc-primary-light);
  --clc-alert-title-color: var(--clc-primary-light);
  --clc-alert-icon-color: var(--clc-primary-light);
}
.clc-alert.clc-variant-text.clc-primary.clc-shade-dark {
  --clc-alert-color: var(--clc-primary-dark);
  --clc-alert-title-color: var(--clc-primary-dark);
  --clc-alert-icon-color: var(--clc-primary-dark);
}
.clc-alert.clc-variant-text.clc-primary.clc-shade-darker {
  --clc-alert-color: var(--clc-primary-darker);
  --clc-alert-title-color: var(--clc-primary-darker);
  --clc-alert-icon-color: var(--clc-primary-darker);
}
.clc-alert.clc-secondary {
  --clc-alert-background-color: var(--clc-secondary);
  --clc-alert-color: var(--clc-on-secondary);
  --clc-alert-title-color: var(--clc-on-secondary);
  --clc-alert-icon-color: var(--clc-on-secondary);
}
.clc-alert.clc-secondary.clc-shade-lighter {
  --clc-alert-background-color: var(--clc-secondary-lighter);
  --clc-alert-color: var(--clc-on-secondary-lighter);
  --clc-alert-title-color: var(--clc-on-secondary-lighter);
  --clc-alert-icon-color: var(--clc-on-secondary-lighter);
}
.clc-alert.clc-secondary.clc-shade-light {
  --clc-alert-background-color: var(--clc-secondary-light);
  --clc-alert-color: var(--clc-on-secondary-light);
  --clc-alert-title-color: var(--clc-on-secondary-light);
  --clc-alert-icon-color: var(--clc-on-secondary-light);
}
.clc-alert.clc-secondary.clc-shade-default {
  --clc-alert-background-color: var(--clc-secondary);
  --clc-alert-color: var(--clc-on-secondary);
  --clc-alert-title-color: var(--clc-on-secondary);
  --clc-alert-icon-color: var(--clc-on-secondary);
}
.clc-alert.clc-secondary.clc-shade-dark {
  --clc-alert-background-color: var(--clc-secondary-dark);
  --clc-alert-color: var(--clc-on-secondary-dark);
  --clc-alert-title-color: var(--clc-on-secondary-dark);
  --clc-alert-icon-color: var(--clc-on-secondary-dark);
}
.clc-alert.clc-secondary.clc-shade-darker {
  --clc-alert-background-color: var(--clc-secondary-darker);
  --clc-alert-color: var(--clc-on-secondary-darker);
  --clc-alert-title-color: var(--clc-on-secondary-darker);
  --clc-alert-icon-color: var(--clc-on-secondary-darker);
}
.clc-alert.clc-variant-outlined.clc-secondary {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-outlined.clc-secondary.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary);
  --clc-alert-color: var(--clc-secondary);
  --clc-alert-title-color: var(--clc-secondary);
  --clc-alert-icon-color: var(--clc-secondary);
}
.clc-alert.clc-variant-outlined.clc-secondary.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary-lighter);
  --clc-alert-color: var(--clc-secondary-lighter);
  --clc-alert-title-color: var(--clc-secondary-lighter);
  --clc-alert-icon-color: var(--clc-secondary-lighter);
}
.clc-alert.clc-variant-outlined.clc-secondary.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary-light);
  --clc-alert-color: var(--clc-secondary-light);
  --clc-alert-title-color: var(--clc-secondary-light);
  --clc-alert-icon-color: var(--clc-secondary-light);
}
.clc-alert.clc-variant-outlined.clc-secondary.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary-dark);
  --clc-alert-color: var(--clc-secondary-dark);
  --clc-alert-title-color: var(--clc-secondary-dark);
  --clc-alert-icon-color: var(--clc-secondary-dark);
}
.clc-alert.clc-variant-outlined.clc-secondary.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-secondary-darker);
  --clc-alert-color: var(--clc-secondary-darker);
  --clc-alert-title-color: var(--clc-secondary-darker);
  --clc-alert-icon-color: var(--clc-secondary-darker);
}
.clc-alert.clc-variant-text.clc-secondary {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-text.clc-secondary.clc-shade-default {
  --clc-alert-color: var(--clc-secondary);
  --clc-alert-icon-color: var(--clc-secondary);
  --clc-alert-title-color: var(--clc-secondary);
}
.clc-alert.clc-variant-text.clc-secondary.clc-shade-lighter {
  --clc-alert-color: var(--clc-secondary-lighter);
  --clc-alert-title-color: var(--clc-secondary-lighter);
  --clc-alert-icon-color: var(--clc-secondary-lighter);
}
.clc-alert.clc-variant-text.clc-secondary.clc-shade-light {
  --clc-alert-color: var(--clc-secondary-light);
  --clc-alert-title-color: var(--clc-secondary-light);
  --clc-alert-icon-color: var(--clc-secondary-light);
}
.clc-alert.clc-variant-text.clc-secondary.clc-shade-dark {
  --clc-alert-color: var(--clc-secondary-dark);
  --clc-alert-title-color: var(--clc-secondary-dark);
  --clc-alert-icon-color: var(--clc-secondary-dark);
}
.clc-alert.clc-variant-text.clc-secondary.clc-shade-darker {
  --clc-alert-color: var(--clc-secondary-darker);
  --clc-alert-title-color: var(--clc-secondary-darker);
  --clc-alert-icon-color: var(--clc-secondary-darker);
}
.clc-alert.clc-info {
  --clc-alert-background-color: var(--clc-info);
  --clc-alert-color: var(--clc-on-info);
  --clc-alert-title-color: var(--clc-on-info);
  --clc-alert-icon-color: var(--clc-on-info);
}
.clc-alert.clc-info.clc-shade-lighter {
  --clc-alert-background-color: var(--clc-info-lighter);
  --clc-alert-color: var(--clc-on-info-lighter);
  --clc-alert-title-color: var(--clc-on-info-lighter);
  --clc-alert-icon-color: var(--clc-on-info-lighter);
}
.clc-alert.clc-info.clc-shade-light {
  --clc-alert-background-color: var(--clc-info-light);
  --clc-alert-color: var(--clc-on-info-light);
  --clc-alert-title-color: var(--clc-on-info-light);
  --clc-alert-icon-color: var(--clc-on-info-light);
}
.clc-alert.clc-info.clc-shade-default {
  --clc-alert-background-color: var(--clc-info);
  --clc-alert-color: var(--clc-on-info);
  --clc-alert-title-color: var(--clc-on-info);
  --clc-alert-icon-color: var(--clc-on-info);
}
.clc-alert.clc-info.clc-shade-dark {
  --clc-alert-background-color: var(--clc-info-dark);
  --clc-alert-color: var(--clc-on-info-dark);
  --clc-alert-title-color: var(--clc-on-info-dark);
  --clc-alert-icon-color: var(--clc-on-info-dark);
}
.clc-alert.clc-info.clc-shade-darker {
  --clc-alert-background-color: var(--clc-info-darker);
  --clc-alert-color: var(--clc-on-info-darker);
  --clc-alert-title-color: var(--clc-on-info-darker);
  --clc-alert-icon-color: var(--clc-on-info-darker);
}
.clc-alert.clc-variant-outlined.clc-info {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-outlined.clc-info.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info);
  --clc-alert-color: var(--clc-info);
  --clc-alert-title-color: var(--clc-info);
  --clc-alert-icon-color: var(--clc-info);
}
.clc-alert.clc-variant-outlined.clc-info.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info-lighter);
  --clc-alert-color: var(--clc-info-lighter);
  --clc-alert-title-color: var(--clc-info-lighter);
  --clc-alert-icon-color: var(--clc-info-lighter);
}
.clc-alert.clc-variant-outlined.clc-info.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info-light);
  --clc-alert-color: var(--clc-info-light);
  --clc-alert-title-color: var(--clc-info-light);
  --clc-alert-icon-color: var(--clc-info-light);
}
.clc-alert.clc-variant-outlined.clc-info.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info-dark);
  --clc-alert-color: var(--clc-info-dark);
  --clc-alert-title-color: var(--clc-info-dark);
  --clc-alert-icon-color: var(--clc-info-dark);
}
.clc-alert.clc-variant-outlined.clc-info.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-info-darker);
  --clc-alert-color: var(--clc-info-darker);
  --clc-alert-title-color: var(--clc-info-darker);
  --clc-alert-icon-color: var(--clc-info-darker);
}
.clc-alert.clc-variant-text.clc-info {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-text.clc-info.clc-shade-default {
  --clc-alert-color: var(--clc-info);
  --clc-alert-icon-color: var(--clc-info);
  --clc-alert-title-color: var(--clc-info);
}
.clc-alert.clc-variant-text.clc-info.clc-shade-lighter {
  --clc-alert-color: var(--clc-info-lighter);
  --clc-alert-title-color: var(--clc-info-lighter);
  --clc-alert-icon-color: var(--clc-info-lighter);
}
.clc-alert.clc-variant-text.clc-info.clc-shade-light {
  --clc-alert-color: var(--clc-info-light);
  --clc-alert-title-color: var(--clc-info-light);
  --clc-alert-icon-color: var(--clc-info-light);
}
.clc-alert.clc-variant-text.clc-info.clc-shade-dark {
  --clc-alert-color: var(--clc-info-dark);
  --clc-alert-title-color: var(--clc-info-dark);
  --clc-alert-icon-color: var(--clc-info-dark);
}
.clc-alert.clc-variant-text.clc-info.clc-shade-darker {
  --clc-alert-color: var(--clc-info-darker);
  --clc-alert-title-color: var(--clc-info-darker);
  --clc-alert-icon-color: var(--clc-info-darker);
}
.clc-alert.clc-warning {
  --clc-alert-background-color: var(--clc-warning);
  --clc-alert-color: var(--clc-on-warning);
  --clc-alert-title-color: var(--clc-on-warning);
  --clc-alert-icon-color: var(--clc-on-warning);
}
.clc-alert.clc-warning.clc-shade-lighter {
  --clc-alert-background-color: var(--clc-warning-lighter);
  --clc-alert-color: var(--clc-on-warning-lighter);
  --clc-alert-title-color: var(--clc-on-warning-lighter);
  --clc-alert-icon-color: var(--clc-on-warning-lighter);
}
.clc-alert.clc-warning.clc-shade-light {
  --clc-alert-background-color: var(--clc-warning-light);
  --clc-alert-color: var(--clc-on-warning-light);
  --clc-alert-title-color: var(--clc-on-warning-light);
  --clc-alert-icon-color: var(--clc-on-warning-light);
}
.clc-alert.clc-warning.clc-shade-default {
  --clc-alert-background-color: var(--clc-warning);
  --clc-alert-color: var(--clc-on-warning);
  --clc-alert-title-color: var(--clc-on-warning);
  --clc-alert-icon-color: var(--clc-on-warning);
}
.clc-alert.clc-warning.clc-shade-dark {
  --clc-alert-background-color: var(--clc-warning-dark);
  --clc-alert-color: var(--clc-on-warning-dark);
  --clc-alert-title-color: var(--clc-on-warning-dark);
  --clc-alert-icon-color: var(--clc-on-warning-dark);
}
.clc-alert.clc-warning.clc-shade-darker {
  --clc-alert-background-color: var(--clc-warning-darker);
  --clc-alert-color: var(--clc-on-warning-darker);
  --clc-alert-title-color: var(--clc-on-warning-darker);
  --clc-alert-icon-color: var(--clc-on-warning-darker);
}
.clc-alert.clc-variant-outlined.clc-warning {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-outlined.clc-warning.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning);
  --clc-alert-color: var(--clc-warning);
  --clc-alert-title-color: var(--clc-warning);
  --clc-alert-icon-color: var(--clc-warning);
}
.clc-alert.clc-variant-outlined.clc-warning.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning-lighter);
  --clc-alert-color: var(--clc-warning-lighter);
  --clc-alert-title-color: var(--clc-warning-lighter);
  --clc-alert-icon-color: var(--clc-warning-lighter);
}
.clc-alert.clc-variant-outlined.clc-warning.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning-light);
  --clc-alert-color: var(--clc-warning-light);
  --clc-alert-title-color: var(--clc-warning-light);
  --clc-alert-icon-color: var(--clc-warning-light);
}
.clc-alert.clc-variant-outlined.clc-warning.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning-dark);
  --clc-alert-color: var(--clc-warning-dark);
  --clc-alert-title-color: var(--clc-warning-dark);
  --clc-alert-icon-color: var(--clc-warning-dark);
}
.clc-alert.clc-variant-outlined.clc-warning.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-warning-darker);
  --clc-alert-color: var(--clc-warning-darker);
  --clc-alert-title-color: var(--clc-warning-darker);
  --clc-alert-icon-color: var(--clc-warning-darker);
}
.clc-alert.clc-variant-text.clc-warning {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-text.clc-warning.clc-shade-default {
  --clc-alert-color: var(--clc-warning);
  --clc-alert-icon-color: var(--clc-warning);
  --clc-alert-title-color: var(--clc-warning);
}
.clc-alert.clc-variant-text.clc-warning.clc-shade-lighter {
  --clc-alert-color: var(--clc-warning-lighter);
  --clc-alert-title-color: var(--clc-warning-lighter);
  --clc-alert-icon-color: var(--clc-warning-lighter);
}
.clc-alert.clc-variant-text.clc-warning.clc-shade-light {
  --clc-alert-color: var(--clc-warning-light);
  --clc-alert-title-color: var(--clc-warning-light);
  --clc-alert-icon-color: var(--clc-warning-light);
}
.clc-alert.clc-variant-text.clc-warning.clc-shade-dark {
  --clc-alert-color: var(--clc-warning-dark);
  --clc-alert-title-color: var(--clc-warning-dark);
  --clc-alert-icon-color: var(--clc-warning-dark);
}
.clc-alert.clc-variant-text.clc-warning.clc-shade-darker {
  --clc-alert-color: var(--clc-warning-darker);
  --clc-alert-title-color: var(--clc-warning-darker);
  --clc-alert-icon-color: var(--clc-warning-darker);
}
.clc-alert.clc-error {
  --clc-alert-background-color: var(--clc-danger);
  --clc-alert-color: var(--clc-on-danger);
  --clc-alert-title-color: var(--clc-on-danger);
  --clc-alert-icon-color: var(--clc-on-danger);
}
.clc-alert.clc-error.clc-shade-lighter {
  --clc-alert-background-color: var(--clc-error-lighter);
  --clc-alert-color: var(--clc-on-error-lighter);
  --clc-alert-title-color: var(--clc-on-error-lighter);
  --clc-alert-icon-color: var(--clc-on-error-lighter);
}
.clc-alert.clc-error.clc-shade-light {
  --clc-alert-background-color: var(--clc-error-light);
  --clc-alert-color: var(--clc-on-error-light);
  --clc-alert-title-color: var(--clc-on-error-light);
  --clc-alert-icon-color: var(--clc-on-error-light);
}
.clc-alert.clc-error.clc-shade-default {
  --clc-alert-background-color: var(--clc-error);
  --clc-alert-color: var(--clc-on-error);
  --clc-alert-title-color: var(--clc-on-error);
  --clc-alert-icon-color: var(--clc-on-error);
}
.clc-alert.clc-error.clc-shade-dark {
  --clc-alert-background-color: var(--clc-error-dark);
  --clc-alert-color: var(--clc-on-error-dark);
  --clc-alert-title-color: var(--clc-on-error-dark);
  --clc-alert-icon-color: var(--clc-on-error-dark);
}
.clc-alert.clc-error.clc-shade-darker {
  --clc-alert-background-color: var(--clc-error-darker);
  --clc-alert-color: var(--clc-on-error-darker);
  --clc-alert-title-color: var(--clc-on-error-darker);
  --clc-alert-icon-color: var(--clc-on-error-darker);
}
.clc-alert.clc-variant-outlined.clc-error {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-outlined.clc-error.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger);
  --clc-alert-color: var(--clc-danger);
  --clc-alert-title-color: var(--clc-danger);
  --clc-alert-icon-color: var(--clc-danger);
}
.clc-alert.clc-variant-outlined.clc-error.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error-lighter);
  --clc-alert-color: var(--clc-error-lighter);
  --clc-alert-title-color: var(--clc-error-lighter);
  --clc-alert-icon-color: var(--clc-error-lighter);
}
.clc-alert.clc-variant-outlined.clc-error.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error-light);
  --clc-alert-color: var(--clc-error-light);
  --clc-alert-title-color: var(--clc-error-light);
  --clc-alert-icon-color: var(--clc-error-light);
}
.clc-alert.clc-variant-outlined.clc-error.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error-dark);
  --clc-alert-color: var(--clc-error-dark);
  --clc-alert-title-color: var(--clc-error-dark);
  --clc-alert-icon-color: var(--clc-error-dark);
}
.clc-alert.clc-variant-outlined.clc-error.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-error-darker);
  --clc-alert-color: var(--clc-error-darker);
  --clc-alert-title-color: var(--clc-error-darker);
  --clc-alert-icon-color: var(--clc-error-darker);
}
.clc-alert.clc-variant-text.clc-error {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-text.clc-error.clc-shade-default {
  --clc-alert-color: var(--clc-danger);
  --clc-alert-icon-color: var(--clc-danger);
  --clc-alert-title-color: var(--clc-danger);
}
.clc-alert.clc-variant-text.clc-error.clc-shade-lighter {
  --clc-alert-color: var(--clc-error-lighter);
  --clc-alert-title-color: var(--clc-error-lighter);
  --clc-alert-icon-color: var(--clc-error-lighter);
}
.clc-alert.clc-variant-text.clc-error.clc-shade-light {
  --clc-alert-color: var(--clc-error-light);
  --clc-alert-title-color: var(--clc-error-light);
  --clc-alert-icon-color: var(--clc-error-light);
}
.clc-alert.clc-variant-text.clc-error.clc-shade-dark {
  --clc-alert-color: var(--clc-error-dark);
  --clc-alert-title-color: var(--clc-error-dark);
  --clc-alert-icon-color: var(--clc-error-dark);
}
.clc-alert.clc-variant-text.clc-error.clc-shade-darker {
  --clc-alert-color: var(--clc-error-darker);
  --clc-alert-title-color: var(--clc-error-darker);
  --clc-alert-icon-color: var(--clc-error-darker);
}
.clc-alert.clc-danger {
  --clc-alert-background-color: var(--clc-danger);
  --clc-alert-color: var(--clc-on-danger);
  --clc-alert-title-color: var(--clc-on-danger);
  --clc-alert-icon-color: var(--clc-on-danger);
}
.clc-alert.clc-danger.clc-shade-lighter {
  --clc-alert-background-color: var(--clc-danger-lighter);
  --clc-alert-color: var(--clc-on-danger-lighter);
  --clc-alert-title-color: var(--clc-on-danger-lighter);
  --clc-alert-icon-color: var(--clc-on-danger-lighter);
}
.clc-alert.clc-danger.clc-shade-light {
  --clc-alert-background-color: var(--clc-danger-light);
  --clc-alert-color: var(--clc-on-danger-light);
  --clc-alert-title-color: var(--clc-on-danger-light);
  --clc-alert-icon-color: var(--clc-on-danger-light);
}
.clc-alert.clc-danger.clc-shade-default {
  --clc-alert-background-color: var(--clc-danger);
  --clc-alert-color: var(--clc-on-danger);
  --clc-alert-title-color: var(--clc-on-danger);
  --clc-alert-icon-color: var(--clc-on-danger);
}
.clc-alert.clc-danger.clc-shade-dark {
  --clc-alert-background-color: var(--clc-danger-dark);
  --clc-alert-color: var(--clc-on-danger-dark);
  --clc-alert-title-color: var(--clc-on-danger-dark);
  --clc-alert-icon-color: var(--clc-on-danger-dark);
}
.clc-alert.clc-danger.clc-shade-darker {
  --clc-alert-background-color: var(--clc-danger-darker);
  --clc-alert-color: var(--clc-on-danger-darker);
  --clc-alert-title-color: var(--clc-on-danger-darker);
  --clc-alert-icon-color: var(--clc-on-danger-darker);
}
.clc-alert.clc-variant-outlined.clc-danger {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-outlined.clc-danger.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger);
  --clc-alert-color: var(--clc-danger);
  --clc-alert-title-color: var(--clc-danger);
  --clc-alert-icon-color: var(--clc-danger);
}
.clc-alert.clc-variant-outlined.clc-danger.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger-lighter);
  --clc-alert-color: var(--clc-danger-lighter);
  --clc-alert-title-color: var(--clc-danger-lighter);
  --clc-alert-icon-color: var(--clc-danger-lighter);
}
.clc-alert.clc-variant-outlined.clc-danger.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger-light);
  --clc-alert-color: var(--clc-danger-light);
  --clc-alert-title-color: var(--clc-danger-light);
  --clc-alert-icon-color: var(--clc-danger-light);
}
.clc-alert.clc-variant-outlined.clc-danger.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger-dark);
  --clc-alert-color: var(--clc-danger-dark);
  --clc-alert-title-color: var(--clc-danger-dark);
  --clc-alert-icon-color: var(--clc-danger-dark);
}
.clc-alert.clc-variant-outlined.clc-danger.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-danger-darker);
  --clc-alert-color: var(--clc-danger-darker);
  --clc-alert-title-color: var(--clc-danger-darker);
  --clc-alert-icon-color: var(--clc-danger-darker);
}
.clc-alert.clc-variant-text.clc-danger {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-text.clc-danger.clc-shade-default {
  --clc-alert-color: var(--clc-danger);
  --clc-alert-icon-color: var(--clc-danger);
  --clc-alert-title-color: var(--clc-danger);
}
.clc-alert.clc-variant-text.clc-danger.clc-shade-lighter {
  --clc-alert-color: var(--clc-danger-lighter);
  --clc-alert-title-color: var(--clc-danger-lighter);
  --clc-alert-icon-color: var(--clc-danger-lighter);
}
.clc-alert.clc-variant-text.clc-danger.clc-shade-light {
  --clc-alert-color: var(--clc-danger-light);
  --clc-alert-title-color: var(--clc-danger-light);
  --clc-alert-icon-color: var(--clc-danger-light);
}
.clc-alert.clc-variant-text.clc-danger.clc-shade-dark {
  --clc-alert-color: var(--clc-danger-dark);
  --clc-alert-title-color: var(--clc-danger-dark);
  --clc-alert-icon-color: var(--clc-danger-dark);
}
.clc-alert.clc-variant-text.clc-danger.clc-shade-darker {
  --clc-alert-color: var(--clc-danger-darker);
  --clc-alert-title-color: var(--clc-danger-darker);
  --clc-alert-icon-color: var(--clc-danger-darker);
}
.clc-alert.clc-success {
  --clc-alert-background-color: var(--clc-success);
  --clc-alert-color: var(--clc-on-success);
  --clc-alert-title-color: var(--clc-on-success);
  --clc-alert-icon-color: var(--clc-on-success);
}
.clc-alert.clc-success.clc-shade-lighter {
  --clc-alert-background-color: var(--clc-success-lighter);
  --clc-alert-color: var(--clc-on-success-lighter);
  --clc-alert-title-color: var(--clc-on-success-lighter);
  --clc-alert-icon-color: var(--clc-on-success-lighter);
}
.clc-alert.clc-success.clc-shade-light {
  --clc-alert-background-color: var(--clc-success-light);
  --clc-alert-color: var(--clc-on-success-light);
  --clc-alert-title-color: var(--clc-on-success-light);
  --clc-alert-icon-color: var(--clc-on-success-light);
}
.clc-alert.clc-success.clc-shade-default {
  --clc-alert-background-color: var(--clc-success);
  --clc-alert-color: var(--clc-on-success);
  --clc-alert-title-color: var(--clc-on-success);
  --clc-alert-icon-color: var(--clc-on-success);
}
.clc-alert.clc-success.clc-shade-dark {
  --clc-alert-background-color: var(--clc-success-dark);
  --clc-alert-color: var(--clc-on-success-dark);
  --clc-alert-title-color: var(--clc-on-success-dark);
  --clc-alert-icon-color: var(--clc-on-success-dark);
}
.clc-alert.clc-success.clc-shade-darker {
  --clc-alert-background-color: var(--clc-success-darker);
  --clc-alert-color: var(--clc-on-success-darker);
  --clc-alert-title-color: var(--clc-on-success-darker);
  --clc-alert-icon-color: var(--clc-on-success-darker);
}
.clc-alert.clc-variant-outlined.clc-success {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-outlined.clc-success.clc-shade-default {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success);
  --clc-alert-color: var(--clc-success);
  --clc-alert-title-color: var(--clc-success);
  --clc-alert-icon-color: var(--clc-success);
}
.clc-alert.clc-variant-outlined.clc-success.clc-shade-lighter {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success-lighter);
  --clc-alert-color: var(--clc-success-lighter);
  --clc-alert-title-color: var(--clc-success-lighter);
  --clc-alert-icon-color: var(--clc-success-lighter);
}
.clc-alert.clc-variant-outlined.clc-success.clc-shade-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success-light);
  --clc-alert-color: var(--clc-success-light);
  --clc-alert-title-color: var(--clc-success-light);
  --clc-alert-icon-color: var(--clc-success-light);
}
.clc-alert.clc-variant-outlined.clc-success.clc-shade-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success-dark);
  --clc-alert-color: var(--clc-success-dark);
  --clc-alert-title-color: var(--clc-success-dark);
  --clc-alert-icon-color: var(--clc-success-dark);
}
.clc-alert.clc-variant-outlined.clc-success.clc-shade-darker {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-success-darker);
  --clc-alert-color: var(--clc-success-darker);
  --clc-alert-title-color: var(--clc-success-darker);
  --clc-alert-icon-color: var(--clc-success-darker);
}
.clc-alert.clc-variant-text.clc-success {
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-text.clc-success.clc-shade-default {
  --clc-alert-color: var(--clc-success);
  --clc-alert-icon-color: var(--clc-success);
  --clc-alert-title-color: var(--clc-success);
}
.clc-alert.clc-variant-text.clc-success.clc-shade-lighter {
  --clc-alert-color: var(--clc-success-lighter);
  --clc-alert-title-color: var(--clc-success-lighter);
  --clc-alert-icon-color: var(--clc-success-lighter);
}
.clc-alert.clc-variant-text.clc-success.clc-shade-light {
  --clc-alert-color: var(--clc-success-light);
  --clc-alert-title-color: var(--clc-success-light);
  --clc-alert-icon-color: var(--clc-success-light);
}
.clc-alert.clc-variant-text.clc-success.clc-shade-dark {
  --clc-alert-color: var(--clc-success-dark);
  --clc-alert-title-color: var(--clc-success-dark);
  --clc-alert-icon-color: var(--clc-success-dark);
}
.clc-alert.clc-variant-text.clc-success.clc-shade-darker {
  --clc-alert-color: var(--clc-success-darker);
  --clc-alert-title-color: var(--clc-success-darker);
  --clc-alert-icon-color: var(--clc-success-darker);
}
.clc-alert.clc-base {
  --clc-alert-background-color: var(--clc-base-200);
  --clc-alert-color: var(--clc-text-color);
  --clc-alert-title-color: var(--clc-text-color);
  --clc-alert-icon-color: var(--clc-text-color);
}
.clc-alert.clc-variant-outlined.clc-base {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-text-color);
  --clc-alert-color: var(--clc-text-color);
  --clc-alert-title-color: var(--clc-text-color);
  --clc-alert-icon-color: var(--clc-text-color);
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-text.clc-base {
  --clc-alert-color: var(--clc-text-color);
  --clc-alert-title-color: var(--clc-text-color);
  --clc-alert-icon-color: var(--clc-text-color);
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-light {
  --clc-alert-background-color: var(--clc-base-200);
  --clc-alert-color: var(--clc-text-color);
  --clc-alert-title-color: var(--clc-text-color);
  --clc-alert-icon-color: var(--clc-text-color);
}
.clc-alert.clc-variant-outlined.clc-light {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-200);
  --clc-alert-color: var(--clc-base-200);
  --clc-alert-title-color: var(--clc-base-200);
  --clc-alert-icon-color: var(--clc-base-200);
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-text.clc-light {
  --clc-alert-color: var(--clc-base-200);
  --clc-alert-title-color: var(--clc-base-200);
  --clc-alert-icon-color: var(--clc-base-200);
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-dark {
  --clc-alert-background-color: var(--clc-base-900);
  --clc-alert-color: var(--clc-text-contrast-color);
  --clc-alert-title-color: var(--clc-text-contrast-color);
  --clc-alert-icon-color: var(--clc-text-contrast-color);
}
.clc-alert.clc-variant-outlined.clc-dark {
  box-shadow: inset 0 0 0 var(--clc-border-width) var(--clc-base-900);
  --clc-alert-color: var(--clc-base-900);
  --clc-alert-title-color: var(--clc-base-900);
  --clc-alert-icon-color: var(--clc-base-900);
  --clc-alert-background-color: transparent;
}
.clc-alert.clc-variant-text.clc-dark {
  --clc-alert-color: var(--clc-base-900);
  --clc-alert-title-color: var(--clc-base-900);
  --clc-alert-icon-color: var(--clc-base-900);
  --clc-alert-background-color: transparent;
}

/* 녹음 중 표시 — background-color/color 키프레임(페인트형)에서 오버레이
   opacity(합성형)로 전환. 색을 직접 번갈면 매 프레임 재페인트가 나고, 버튼이
   블러 표면(컴포저) 안이라 그 표면의 backdrop 재샘플까지 끌고 온다.
   기본은 원래의 밝은 danger 칩 그대로 두고, 어두운 danger 를 ::before 오버레이로
   얹어 opacity 만 숨쉬게 한다. 정점을 0.85 로 눌러 두는 이유는 잉크가
   `--clc-on-danger-light` 하나로 고정되므로, 오버레이가 완전 불투명해지는 순간
   글리프 대비가 무너지는 것을 막기 위해서다. */
@keyframes mic-blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.85;
  }
}
.clc-button {
  /* 클래스 중복으로 (0,3,0) — 예전에는 키프레임이 배경을 매 프레임 덮어써서
     변형 클래스(.clc-button.clc-*.clc-shade-*, 0,3,0)를 자동으로 이겼지만,
     정적 선언이 된 지금은 특이성으로 이겨야 한다. */
}
.clc-button.clc-speech-to-text-button-recording.clc-speech-to-text-button-recording {
  position: relative;
  /* 자체 스태킹 컨텍스트 — 음수 z-index 오버레이가 조상 배경 뒤로 꺼지지
     않게 한다. z-index 는 backdrop root 를 만들지 않는다. */
  z-index: 0;
  background-color: var(--clc-danger-light);
  color: var(--clc-on-danger-light);
}
.clc-button.clc-speech-to-text-button-recording.clc-speech-to-text-button-recording::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--clc-danger-darker);
  opacity: 0;
  pointer-events: none;
  animation: mic-blink 2s linear infinite;
}

.clc-flex-row {
  flex-direction: row !important;
}

.clc-flex-row-reverse {
  flex-direction: row-reverse !important;
}

.clc-flex-column {
  flex-direction: column !important;
}

.clc-flex-column-reverse {
  flex-direction: column-reverse !important;
}

.clc-stack {
  box-sizing: border-box;
  gap: var(--clc-gap);
}

.clc-row {
  box-sizing: border-box;
  flex-wrap: wrap;
  gap: var(--clc-gap);
  row-gap: var(--clc-row-gap);
}

.clc-row > [class^=clc-col] {
  flex: 1 0 0%;
}

.clc-row > [class*=clc-col-] {
  flex: 0 0 auto;
  width: 100%;
}

.clc-row > .clc-col-1 {
  max-width: calc((100% - 11 * var(--clc-gap)) / 12);
  flex-basis: calc((100% - 11 * var(--clc-gap)) / 12);
}

.clc-row > .clc-col-2 {
  max-width: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
  flex-basis: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
}

.clc-row > .clc-col-3 {
  max-width: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
  flex-basis: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
}

.clc-row > .clc-col-4 {
  max-width: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
  flex-basis: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
}

.clc-row > .clc-col-5 {
  max-width: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
  flex-basis: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
}

.clc-row > .clc-col-6 {
  max-width: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
  flex-basis: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
}

.clc-row > .clc-col-7 {
  max-width: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
  flex-basis: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
}

.clc-row > .clc-col-8 {
  max-width: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
  flex-basis: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
}

.clc-row > .clc-col-9 {
  max-width: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
  flex-basis: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
}

.clc-row > .clc-col-10 {
  max-width: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
  flex-basis: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
}

.clc-row > .clc-col-11 {
  max-width: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
  flex-basis: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
}

.clc-row > .clc-col-12 {
  max-width: 100%;
  flex-basis: 100%;
}

.clc-offset-0 {
  margin-inline-start: 0;
}

.clc-offset-1 {
  margin-inline-start: calc(1 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
}

.clc-offset-2 {
  margin-inline-start: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
}

.clc-offset-3 {
  margin-inline-start: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
}

.clc-offset-4 {
  margin-inline-start: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
}

.clc-offset-5 {
  margin-inline-start: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
}

.clc-offset-6 {
  margin-inline-start: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
}

.clc-offset-7 {
  margin-inline-start: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
}

.clc-offset-8 {
  margin-inline-start: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
}

.clc-offset-9 {
  margin-inline-start: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
}

.clc-offset-10 {
  margin-inline-start: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
}

.clc-offset-11 {
  margin-inline-start: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 11 * var(--clc-gap));
}

.clc-order-first {
  order: -1 !important;
}

.clc-order-last {
  order: 13 !important;
}

.clc-order-0 {
  order: 0 !important;
}

.clc-order-1 {
  order: 1 !important;
}

.clc-order-2 {
  order: 2 !important;
}

.clc-order-3 {
  order: 3 !important;
}

.clc-order-4 {
  order: 4 !important;
}

.clc-order-5 {
  order: 5 !important;
}

.clc-order-6 {
  order: 6 !important;
}

.clc-order-7 {
  order: 7 !important;
}

.clc-order-8 {
  order: 8 !important;
}

.clc-order-9 {
  order: 9 !important;
}

.clc-order-10 {
  order: 10 !important;
}

.clc-order-11 {
  order: 11 !important;
}

.clc-order-12 {
  order: 12 !important;
}

@media (min-width: 576px) {
  .clc-row > .clc-col-xs-1 {
    max-width: calc((100% - 11 * var(--clc-gap)) / 12);
    flex-basis: calc((100% - 11 * var(--clc-gap)) / 12);
  }
  .clc-row > .clc-col-xs-2 {
    max-width: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
    flex-basis: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
  }
  .clc-row > .clc-col-xs-3 {
    max-width: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
    flex-basis: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
  }
  .clc-row > .clc-col-xs-4 {
    max-width: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
    flex-basis: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
  }
  .clc-row > .clc-col-xs-5 {
    max-width: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
    flex-basis: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
  }
  .clc-row > .clc-col-xs-6 {
    max-width: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
    flex-basis: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
  }
  .clc-row > .clc-col-xs-7 {
    max-width: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
    flex-basis: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
  }
  .clc-row > .clc-col-xs-8 {
    max-width: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
    flex-basis: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
  }
  .clc-row > .clc-col-xs-9 {
    max-width: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
    flex-basis: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
  }
  .clc-row > .clc-col-xs-10 {
    max-width: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
    flex-basis: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
  }
  .clc-row > .clc-col-xs-11 {
    max-width: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
    flex-basis: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
  }
  .clc-row > .clc-col-xs-12 {
    max-width: 100%;
    flex-basis: 100%;
  }
  .clc-offset-xs-0 {
    margin-inline-start: 0;
  }
  .clc-offset-xs-1 {
    margin-inline-start: calc(1 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
  }
  .clc-offset-xs-2 {
    margin-inline-start: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
  }
  .clc-offset-xs-3 {
    margin-inline-start: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
  }
  .clc-offset-xs-4 {
    margin-inline-start: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
  }
  .clc-offset-xs-5 {
    margin-inline-start: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
  }
  .clc-offset-xs-6 {
    margin-inline-start: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
  }
  .clc-offset-xs-7 {
    margin-inline-start: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
  }
  .clc-offset-xs-8 {
    margin-inline-start: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
  }
  .clc-offset-xs-9 {
    margin-inline-start: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
  }
  .clc-offset-xs-10 {
    margin-inline-start: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
  }
  .clc-offset-xs-11 {
    margin-inline-start: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 11 * var(--clc-gap));
  }
  .clc-order-xs-first {
    order: -1 !important;
  }
  .clc-order-xs-last {
    order: 13 !important;
  }
  .clc-order-xs-0 {
    order: 0 !important;
  }
  .clc-order-xs-1 {
    order: 1 !important;
  }
  .clc-order-xs-2 {
    order: 2 !important;
  }
  .clc-order-xs-3 {
    order: 3 !important;
  }
  .clc-order-xs-4 {
    order: 4 !important;
  }
  .clc-order-xs-5 {
    order: 5 !important;
  }
  .clc-order-xs-6 {
    order: 6 !important;
  }
  .clc-order-xs-7 {
    order: 7 !important;
  }
  .clc-order-xs-8 {
    order: 8 !important;
  }
  .clc-order-xs-9 {
    order: 9 !important;
  }
  .clc-order-xs-10 {
    order: 10 !important;
  }
  .clc-order-xs-11 {
    order: 11 !important;
  }
  .clc-order-xs-12 {
    order: 12 !important;
  }
}
@media (min-width: 768px) {
  .clc-row > .clc-col-sm-1 {
    max-width: calc((100% - 11 * var(--clc-gap)) / 12);
    flex-basis: calc((100% - 11 * var(--clc-gap)) / 12);
  }
  .clc-row > .clc-col-sm-2 {
    max-width: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
    flex-basis: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
  }
  .clc-row > .clc-col-sm-3 {
    max-width: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
    flex-basis: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
  }
  .clc-row > .clc-col-sm-4 {
    max-width: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
    flex-basis: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
  }
  .clc-row > .clc-col-sm-5 {
    max-width: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
    flex-basis: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
  }
  .clc-row > .clc-col-sm-6 {
    max-width: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
    flex-basis: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
  }
  .clc-row > .clc-col-sm-7 {
    max-width: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
    flex-basis: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
  }
  .clc-row > .clc-col-sm-8 {
    max-width: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
    flex-basis: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
  }
  .clc-row > .clc-col-sm-9 {
    max-width: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
    flex-basis: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
  }
  .clc-row > .clc-col-sm-10 {
    max-width: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
    flex-basis: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
  }
  .clc-row > .clc-col-sm-11 {
    max-width: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
    flex-basis: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
  }
  .clc-row > .clc-col-sm-12 {
    max-width: 100%;
    flex-basis: 100%;
  }
  .clc-offset-sm-0 {
    margin-inline-start: 0;
  }
  .clc-offset-sm-1 {
    margin-inline-start: calc(1 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
  }
  .clc-offset-sm-2 {
    margin-inline-start: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
  }
  .clc-offset-sm-3 {
    margin-inline-start: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
  }
  .clc-offset-sm-4 {
    margin-inline-start: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
  }
  .clc-offset-sm-5 {
    margin-inline-start: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
  }
  .clc-offset-sm-6 {
    margin-inline-start: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
  }
  .clc-offset-sm-7 {
    margin-inline-start: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
  }
  .clc-offset-sm-8 {
    margin-inline-start: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
  }
  .clc-offset-sm-9 {
    margin-inline-start: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
  }
  .clc-offset-sm-10 {
    margin-inline-start: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
  }
  .clc-offset-sm-11 {
    margin-inline-start: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 11 * var(--clc-gap));
  }
  .clc-order-sm-first {
    order: -1 !important;
  }
  .clc-order-sm-last {
    order: 13 !important;
  }
  .clc-order-sm-0 {
    order: 0 !important;
  }
  .clc-order-sm-1 {
    order: 1 !important;
  }
  .clc-order-sm-2 {
    order: 2 !important;
  }
  .clc-order-sm-3 {
    order: 3 !important;
  }
  .clc-order-sm-4 {
    order: 4 !important;
  }
  .clc-order-sm-5 {
    order: 5 !important;
  }
  .clc-order-sm-6 {
    order: 6 !important;
  }
  .clc-order-sm-7 {
    order: 7 !important;
  }
  .clc-order-sm-8 {
    order: 8 !important;
  }
  .clc-order-sm-9 {
    order: 9 !important;
  }
  .clc-order-sm-10 {
    order: 10 !important;
  }
  .clc-order-sm-11 {
    order: 11 !important;
  }
  .clc-order-sm-12 {
    order: 12 !important;
  }
}
@media (min-width: 1024px) {
  .clc-row > .clc-col-md-1 {
    max-width: calc((100% - 11 * var(--clc-gap)) / 12);
    flex-basis: calc((100% - 11 * var(--clc-gap)) / 12);
  }
  .clc-row > .clc-col-md-2 {
    max-width: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
    flex-basis: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
  }
  .clc-row > .clc-col-md-3 {
    max-width: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
    flex-basis: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
  }
  .clc-row > .clc-col-md-4 {
    max-width: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
    flex-basis: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
  }
  .clc-row > .clc-col-md-5 {
    max-width: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
    flex-basis: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
  }
  .clc-row > .clc-col-md-6 {
    max-width: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
    flex-basis: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
  }
  .clc-row > .clc-col-md-7 {
    max-width: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
    flex-basis: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
  }
  .clc-row > .clc-col-md-8 {
    max-width: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
    flex-basis: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
  }
  .clc-row > .clc-col-md-9 {
    max-width: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
    flex-basis: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
  }
  .clc-row > .clc-col-md-10 {
    max-width: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
    flex-basis: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
  }
  .clc-row > .clc-col-md-11 {
    max-width: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
    flex-basis: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
  }
  .clc-row > .clc-col-md-12 {
    max-width: 100%;
    flex-basis: 100%;
  }
  .clc-offset-md-0 {
    margin-inline-start: 0;
  }
  .clc-offset-md-1 {
    margin-inline-start: calc(1 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
  }
  .clc-offset-md-2 {
    margin-inline-start: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
  }
  .clc-offset-md-3 {
    margin-inline-start: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
  }
  .clc-offset-md-4 {
    margin-inline-start: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
  }
  .clc-offset-md-5 {
    margin-inline-start: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
  }
  .clc-offset-md-6 {
    margin-inline-start: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
  }
  .clc-offset-md-7 {
    margin-inline-start: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
  }
  .clc-offset-md-8 {
    margin-inline-start: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
  }
  .clc-offset-md-9 {
    margin-inline-start: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
  }
  .clc-offset-md-10 {
    margin-inline-start: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
  }
  .clc-offset-md-11 {
    margin-inline-start: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 11 * var(--clc-gap));
  }
  .clc-order-md-first {
    order: -1 !important;
  }
  .clc-order-md-last {
    order: 13 !important;
  }
  .clc-order-md-0 {
    order: 0 !important;
  }
  .clc-order-md-1 {
    order: 1 !important;
  }
  .clc-order-md-2 {
    order: 2 !important;
  }
  .clc-order-md-3 {
    order: 3 !important;
  }
  .clc-order-md-4 {
    order: 4 !important;
  }
  .clc-order-md-5 {
    order: 5 !important;
  }
  .clc-order-md-6 {
    order: 6 !important;
  }
  .clc-order-md-7 {
    order: 7 !important;
  }
  .clc-order-md-8 {
    order: 8 !important;
  }
  .clc-order-md-9 {
    order: 9 !important;
  }
  .clc-order-md-10 {
    order: 10 !important;
  }
  .clc-order-md-11 {
    order: 11 !important;
  }
  .clc-order-md-12 {
    order: 12 !important;
  }
}
@media (min-width: 1280px) {
  .clc-row > .clc-col-lg-1 {
    max-width: calc((100% - 11 * var(--clc-gap)) / 12);
    flex-basis: calc((100% - 11 * var(--clc-gap)) / 12);
  }
  .clc-row > .clc-col-lg-2 {
    max-width: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
    flex-basis: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
  }
  .clc-row > .clc-col-lg-3 {
    max-width: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
    flex-basis: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
  }
  .clc-row > .clc-col-lg-4 {
    max-width: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
    flex-basis: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
  }
  .clc-row > .clc-col-lg-5 {
    max-width: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
    flex-basis: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
  }
  .clc-row > .clc-col-lg-6 {
    max-width: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
    flex-basis: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
  }
  .clc-row > .clc-col-lg-7 {
    max-width: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
    flex-basis: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
  }
  .clc-row > .clc-col-lg-8 {
    max-width: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
    flex-basis: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
  }
  .clc-row > .clc-col-lg-9 {
    max-width: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
    flex-basis: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
  }
  .clc-row > .clc-col-lg-10 {
    max-width: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
    flex-basis: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
  }
  .clc-row > .clc-col-lg-11 {
    max-width: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
    flex-basis: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
  }
  .clc-row > .clc-col-lg-12 {
    max-width: 100%;
    flex-basis: 100%;
  }
  .clc-offset-lg-0 {
    margin-inline-start: 0;
  }
  .clc-offset-lg-1 {
    margin-inline-start: calc(1 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
  }
  .clc-offset-lg-2 {
    margin-inline-start: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
  }
  .clc-offset-lg-3 {
    margin-inline-start: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
  }
  .clc-offset-lg-4 {
    margin-inline-start: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
  }
  .clc-offset-lg-5 {
    margin-inline-start: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
  }
  .clc-offset-lg-6 {
    margin-inline-start: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
  }
  .clc-offset-lg-7 {
    margin-inline-start: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
  }
  .clc-offset-lg-8 {
    margin-inline-start: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
  }
  .clc-offset-lg-9 {
    margin-inline-start: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
  }
  .clc-offset-lg-10 {
    margin-inline-start: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
  }
  .clc-offset-lg-11 {
    margin-inline-start: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 11 * var(--clc-gap));
  }
  .clc-order-lg-first {
    order: -1 !important;
  }
  .clc-order-lg-last {
    order: 13 !important;
  }
  .clc-order-lg-0 {
    order: 0 !important;
  }
  .clc-order-lg-1 {
    order: 1 !important;
  }
  .clc-order-lg-2 {
    order: 2 !important;
  }
  .clc-order-lg-3 {
    order: 3 !important;
  }
  .clc-order-lg-4 {
    order: 4 !important;
  }
  .clc-order-lg-5 {
    order: 5 !important;
  }
  .clc-order-lg-6 {
    order: 6 !important;
  }
  .clc-order-lg-7 {
    order: 7 !important;
  }
  .clc-order-lg-8 {
    order: 8 !important;
  }
  .clc-order-lg-9 {
    order: 9 !important;
  }
  .clc-order-lg-10 {
    order: 10 !important;
  }
  .clc-order-lg-11 {
    order: 11 !important;
  }
  .clc-order-lg-12 {
    order: 12 !important;
  }
}
@media (min-width: 1920px) {
  .clc-row > .clc-col-xl-1 {
    max-width: calc((100% - 11 * var(--clc-gap)) / 12);
    flex-basis: calc((100% - 11 * var(--clc-gap)) / 12);
  }
  .clc-row > .clc-col-xl-2 {
    max-width: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
    flex-basis: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
  }
  .clc-row > .clc-col-xl-3 {
    max-width: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
    flex-basis: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
  }
  .clc-row > .clc-col-xl-4 {
    max-width: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
    flex-basis: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
  }
  .clc-row > .clc-col-xl-5 {
    max-width: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
    flex-basis: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
  }
  .clc-row > .clc-col-xl-6 {
    max-width: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
    flex-basis: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
  }
  .clc-row > .clc-col-xl-7 {
    max-width: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
    flex-basis: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
  }
  .clc-row > .clc-col-xl-8 {
    max-width: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
    flex-basis: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
  }
  .clc-row > .clc-col-xl-9 {
    max-width: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
    flex-basis: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
  }
  .clc-row > .clc-col-xl-10 {
    max-width: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
    flex-basis: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
  }
  .clc-row > .clc-col-xl-11 {
    max-width: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
    flex-basis: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
  }
  .clc-row > .clc-col-xl-12 {
    max-width: 100%;
    flex-basis: 100%;
  }
  .clc-offset-xl-0 {
    margin-inline-start: 0;
  }
  .clc-offset-xl-1 {
    margin-inline-start: calc(1 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
  }
  .clc-offset-xl-2 {
    margin-inline-start: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
  }
  .clc-offset-xl-3 {
    margin-inline-start: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
  }
  .clc-offset-xl-4 {
    margin-inline-start: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
  }
  .clc-offset-xl-5 {
    margin-inline-start: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
  }
  .clc-offset-xl-6 {
    margin-inline-start: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
  }
  .clc-offset-xl-7 {
    margin-inline-start: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
  }
  .clc-offset-xl-8 {
    margin-inline-start: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
  }
  .clc-offset-xl-9 {
    margin-inline-start: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
  }
  .clc-offset-xl-10 {
    margin-inline-start: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
  }
  .clc-offset-xl-11 {
    margin-inline-start: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 11 * var(--clc-gap));
  }
  .clc-order-xl-first {
    order: -1 !important;
  }
  .clc-order-xl-last {
    order: 13 !important;
  }
  .clc-order-xl-0 {
    order: 0 !important;
  }
  .clc-order-xl-1 {
    order: 1 !important;
  }
  .clc-order-xl-2 {
    order: 2 !important;
  }
  .clc-order-xl-3 {
    order: 3 !important;
  }
  .clc-order-xl-4 {
    order: 4 !important;
  }
  .clc-order-xl-5 {
    order: 5 !important;
  }
  .clc-order-xl-6 {
    order: 6 !important;
  }
  .clc-order-xl-7 {
    order: 7 !important;
  }
  .clc-order-xl-8 {
    order: 8 !important;
  }
  .clc-order-xl-9 {
    order: 9 !important;
  }
  .clc-order-xl-10 {
    order: 10 !important;
  }
  .clc-order-xl-11 {
    order: 11 !important;
  }
  .clc-order-xl-12 {
    order: 12 !important;
  }
}
@media (min-width: 2560px) {
  .clc-row > .clc-col-xx-1 {
    max-width: calc((100% - 11 * var(--clc-gap)) / 12);
    flex-basis: calc((100% - 11 * var(--clc-gap)) / 12);
  }
  .clc-row > .clc-col-xx-2 {
    max-width: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
    flex-basis: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
  }
  .clc-row > .clc-col-xx-3 {
    max-width: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
    flex-basis: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
  }
  .clc-row > .clc-col-xx-4 {
    max-width: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
    flex-basis: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
  }
  .clc-row > .clc-col-xx-5 {
    max-width: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
    flex-basis: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
  }
  .clc-row > .clc-col-xx-6 {
    max-width: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
    flex-basis: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
  }
  .clc-row > .clc-col-xx-7 {
    max-width: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
    flex-basis: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
  }
  .clc-row > .clc-col-xx-8 {
    max-width: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
    flex-basis: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
  }
  .clc-row > .clc-col-xx-9 {
    max-width: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
    flex-basis: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
  }
  .clc-row > .clc-col-xx-10 {
    max-width: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
    flex-basis: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
  }
  .clc-row > .clc-col-xx-11 {
    max-width: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
    flex-basis: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
  }
  .clc-row > .clc-col-xx-12 {
    max-width: 100%;
    flex-basis: 100%;
  }
  .clc-offset-xx-0 {
    margin-inline-start: 0;
  }
  .clc-offset-xx-1 {
    margin-inline-start: calc(1 * (100% - 11 * var(--clc-gap)) / 12 + 1 * var(--clc-gap));
  }
  .clc-offset-xx-2 {
    margin-inline-start: calc(2 * (100% - 11 * var(--clc-gap)) / 12 + 2 * var(--clc-gap));
  }
  .clc-offset-xx-3 {
    margin-inline-start: calc(3 * (100% - 11 * var(--clc-gap)) / 12 + 3 * var(--clc-gap));
  }
  .clc-offset-xx-4 {
    margin-inline-start: calc(4 * (100% - 11 * var(--clc-gap)) / 12 + 4 * var(--clc-gap));
  }
  .clc-offset-xx-5 {
    margin-inline-start: calc(5 * (100% - 11 * var(--clc-gap)) / 12 + 5 * var(--clc-gap));
  }
  .clc-offset-xx-6 {
    margin-inline-start: calc(6 * (100% - 11 * var(--clc-gap)) / 12 + 6 * var(--clc-gap));
  }
  .clc-offset-xx-7 {
    margin-inline-start: calc(7 * (100% - 11 * var(--clc-gap)) / 12 + 7 * var(--clc-gap));
  }
  .clc-offset-xx-8 {
    margin-inline-start: calc(8 * (100% - 11 * var(--clc-gap)) / 12 + 8 * var(--clc-gap));
  }
  .clc-offset-xx-9 {
    margin-inline-start: calc(9 * (100% - 11 * var(--clc-gap)) / 12 + 9 * var(--clc-gap));
  }
  .clc-offset-xx-10 {
    margin-inline-start: calc(10 * (100% - 11 * var(--clc-gap)) / 12 + 10 * var(--clc-gap));
  }
  .clc-offset-xx-11 {
    margin-inline-start: calc(11 * (100% - 11 * var(--clc-gap)) / 12 + 11 * var(--clc-gap));
  }
  .clc-order-xx-first {
    order: -1 !important;
  }
  .clc-order-xx-last {
    order: 13 !important;
  }
  .clc-order-xx-0 {
    order: 0 !important;
  }
  .clc-order-xx-1 {
    order: 1 !important;
  }
  .clc-order-xx-2 {
    order: 2 !important;
  }
  .clc-order-xx-3 {
    order: 3 !important;
  }
  .clc-order-xx-4 {
    order: 4 !important;
  }
  .clc-order-xx-5 {
    order: 5 !important;
  }
  .clc-order-xx-6 {
    order: 6 !important;
  }
  .clc-order-xx-7 {
    order: 7 !important;
  }
  .clc-order-xx-8 {
    order: 8 !important;
  }
  .clc-order-xx-9 {
    order: 9 !important;
  }
  .clc-order-xx-10 {
    order: 10 !important;
  }
  .clc-order-xx-11 {
    order: 11 !important;
  }
  .clc-order-xx-12 {
    order: 12 !important;
  }
}
.clc-form-field-helper {
  position: relative;
  padding: var(--clc-form-field-helper-padding);
}

.clc-form-field-content {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  margin-block: var(--clc-form-field-margin-block);
  margin-inline: var(--clc-form-field-margin-inline);
  box-shadow: var(--clc-form-field-shadow);
  transition: var(--clc-input-transition);
}
.clc-form-field-content > *, .clc-form-field-content > .clc-autocomplete, .clc-form-field-content > .clc-autocomplete.clc-state-disabled > .clc-inputtext, .clc-form-field-content input, .clc-form-field-content .clc-inputtext, .clc-form-field-content .clc-inputtext.clc-state-disabled, .clc-form-field-content .clc-datepicker.clc-state-disabled > .clc-inputtext {
  flex: 1;
}
.clc-form-field-content > input {
  width: 100%;
}
.clc-form-field-content .clc-form-field-start,
.clc-form-field-content .clc-form-field-end {
  display: flex;
  flex: 0;
  align-items: center;
  white-space: nowrap;
  padding-block: var(--clc-form-field-start-end-padding-block);
  padding-inline: var(--clc-form-field-start-end-padding-inline);
}

.clc-form-field {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
}
.clc-form-field:hover .clc-form-field-content {
  box-shadow: var(--clc-form-field-hover-shadow);
}
.clc-form-field.clc-state-focused .clc-form-field-content {
  box-shadow: var(--clc-form-field-focus-shadow);
}
.clc-form-field.clc-state-disabled .clc-form-field-content {
  color: var(--clc-input-disabled-color);
  box-shadow: var(--clc-input-disabled-shadow);
}
.clc-form-field.clc-state-disabled.clc-variant-outlined .clc-form-field-content, .clc-form-field.clc-state-disabled.clc-variant-filled .clc-form-field-content, .clc-form-field.clc-state-disabled.clc-variant-flat .clc-form-field-content {
  border: var(--clc-input-disabled-border);
}
.clc-form-field.clc-state-disabled :not(.clc-button).clc-state-disabled,
.clc-form-field.clc-state-disabled :not(.clc-button):disabled {
  color: var(--clc-input-disabled-color);
  opacity: 1;
}
.clc-form-field.clc-state-disabled :not(.clc-button).clc-state-disabled::placeholder,
.clc-form-field.clc-state-disabled :not(.clc-button):disabled::placeholder {
  color: var(--clc-input-disabled-placeholder-color);
}
.clc-form-field.clc-variant-outlined .clc-form-field-start, .clc-form-field.clc-variant-filled .clc-form-field-start, .clc-form-field.clc-variant-flat .clc-form-field-start {
  padding-inline-end: 0;
}
.clc-form-field.clc-variant-outlined .clc-form-field-end, .clc-form-field.clc-variant-filled .clc-form-field-end, .clc-form-field.clc-variant-flat .clc-form-field-end {
  padding-inline-start: 0;
}
.clc-form-field.clc-variant-filled .clc-form-field-content, .clc-form-field.clc-variant-flat .clc-form-field-content {
  margin: 0;
  --clc-input-height: var(--clc-form-field-filled-height);
  --clc-input-padding-block: var(--clc-form-field-filled-padding-block);
  --clc-input-padding-inline: var(--clc-form-field-filled-padding-inline);
  --clc-dropdown-chips-padding-block: var(--clc-form-field-filled-padding-block);
  --clc-dropdown-chips-padding-inline: var(--clc-form-field-filled-padding-inline);
  --clc-numeric-input-padding-block: var(--clc-form-field-filled-numeric-padding-block);
  --clc-numeric-input-padding-inline: var(--clc-form-field-filled-numeric-padding-inline);
  --clc-form-field-label-floating-top: var(--clc-form-field-filled-label-floating-top);
  box-shadow: var(--clc-input-shadow);
}
.clc-form-field.clc-variant-filled .clc-form-field-content .clc-numeric-up, .clc-form-field.clc-variant-flat .clc-form-field-content .clc-numeric-up {
  top: calc(var(--clc-numeric-button-offset) + 1rem);
}
.clc-form-field.clc-variant-filled .clc-form-field-content .clc-form-field-start,
.clc-form-field.clc-variant-filled .clc-form-field-content .clc-form-field-end, .clc-form-field.clc-variant-flat .clc-form-field-content .clc-form-field-start,
.clc-form-field.clc-variant-flat .clc-form-field-content .clc-form-field-end {
  padding-top: 1rem;
}
.clc-form-field.clc-variant-filled .clc-form-field-content .clc-textarea, .clc-form-field.clc-variant-flat .clc-form-field-content .clc-textarea {
  margin-top: 1rem;
}
.clc-form-field.clc-variant-filled .clc-form-field-content .clc-datepicker-trigger,
.clc-form-field.clc-variant-filled .clc-form-field-content .clc-timespanpicker-trigger, .clc-form-field.clc-variant-flat .clc-form-field-content .clc-datepicker-trigger,
.clc-form-field.clc-variant-flat .clc-form-field-content .clc-timespanpicker-trigger {
  top: calc(50% + 0.4375rem);
}
.clc-form-field.clc-variant-filled .clc-form-field-content .clc-datepicker .clc-dropdown-clear-icon,
.clc-form-field.clc-variant-filled .clc-form-field-content .clc-timespanpicker .clc-dropdown-clear-icon, .clc-form-field.clc-variant-flat .clc-form-field-content .clc-datepicker .clc-dropdown-clear-icon,
.clc-form-field.clc-variant-flat .clc-form-field-content .clc-timespanpicker .clc-dropdown-clear-icon {
  top: 0.4375rem;
}
.clc-form-field.clc-variant-filled:has(.clc-input-xs) .clc-form-field-content, .clc-form-field.clc-variant-flat:has(.clc-input-xs) .clc-form-field-content {
  --clc-input-height: var(--clc-form-field-filled-height-xs);
  --clc-input-padding-block: var(--clc-form-field-filled-padding-block-xs);
  --clc-input-padding-inline: var(--clc-form-field-filled-padding-inline-xs);
  --clc-dropdown-chips-padding-block: var(--clc-form-field-filled-padding-block-xs);
  --clc-dropdown-chips-padding-inline: var(--clc-form-field-filled-padding-inline-xs);
  --clc-form-field-label-floating-top: var(--clc-form-field-filled-label-floating-top-xs);
  --clc-form-field-label-floating-font-size: var(--clc-form-field-filled-label-floating-font-size-xs);
}
.clc-form-field.clc-variant-filled:has(.clc-input-xs) .clc-form-field-content > .clc-input-xs, .clc-form-field.clc-variant-flat:has(.clc-input-xs) .clc-form-field-content > .clc-input-xs {
  --clc-input-height: var(--clc-form-field-filled-height-xs);
  --clc-input-padding-block: var(--clc-form-field-filled-padding-block-xs);
  --clc-input-padding-inline: var(--clc-form-field-filled-padding-inline-xs);
}
.clc-form-field.clc-variant-filled:has(.clc-input-sm) .clc-form-field-content, .clc-form-field.clc-variant-flat:has(.clc-input-sm) .clc-form-field-content {
  --clc-input-height: var(--clc-form-field-filled-height-sm);
  --clc-input-padding-block: var(--clc-form-field-filled-padding-block-sm);
  --clc-input-padding-inline: var(--clc-form-field-filled-padding-inline-sm);
  --clc-dropdown-chips-padding-block: var(--clc-form-field-filled-padding-block-sm);
  --clc-dropdown-chips-padding-inline: var(--clc-form-field-filled-padding-inline-sm);
  --clc-form-field-label-floating-top: var(--clc-form-field-filled-label-floating-top-sm);
  --clc-form-field-label-floating-font-size: var(--clc-form-field-filled-label-floating-font-size-sm);
}
.clc-form-field.clc-variant-filled:has(.clc-input-sm) .clc-form-field-content > .clc-input-sm, .clc-form-field.clc-variant-flat:has(.clc-input-sm) .clc-form-field-content > .clc-input-sm {
  --clc-input-height: var(--clc-form-field-filled-height-sm);
  --clc-input-padding-block: var(--clc-form-field-filled-padding-block-sm);
  --clc-input-padding-inline: var(--clc-form-field-filled-padding-inline-sm);
}
.clc-form-field.clc-variant-filled:has(.clc-input-md) .clc-form-field-content, .clc-form-field.clc-variant-flat:has(.clc-input-md) .clc-form-field-content {
  --clc-input-height: var(--clc-form-field-filled-height-md);
  --clc-input-padding-block: var(--clc-form-field-filled-padding-block-md);
  --clc-input-padding-inline: var(--clc-form-field-filled-padding-inline-md);
  --clc-dropdown-chips-padding-block: var(--clc-form-field-filled-padding-block-md);
  --clc-dropdown-chips-padding-inline: var(--clc-form-field-filled-padding-inline-md);
  --clc-form-field-label-floating-top: var(--clc-form-field-filled-label-floating-top-md);
  --clc-form-field-label-floating-font-size: var(--clc-form-field-filled-label-floating-font-size-md);
}
.clc-form-field.clc-variant-filled:has(.clc-input-md) .clc-form-field-content > .clc-input-md, .clc-form-field.clc-variant-flat:has(.clc-input-md) .clc-form-field-content > .clc-input-md {
  --clc-input-height: var(--clc-form-field-filled-height-md);
  --clc-input-padding-block: var(--clc-form-field-filled-padding-block-md);
  --clc-input-padding-inline: var(--clc-form-field-filled-padding-inline-md);
}
.clc-form-field.clc-variant-filled:has(.clc-input-lg) .clc-form-field-content, .clc-form-field.clc-variant-flat:has(.clc-input-lg) .clc-form-field-content {
  --clc-input-height: var(--clc-form-field-filled-height-lg);
  --clc-input-padding-block: var(--clc-form-field-filled-padding-block-lg);
  --clc-input-padding-inline: var(--clc-form-field-filled-padding-inline-lg);
  --clc-dropdown-chips-padding-block: var(--clc-form-field-filled-padding-block-lg);
  --clc-dropdown-chips-padding-inline: var(--clc-form-field-filled-padding-inline-lg);
  --clc-form-field-label-floating-top: var(--clc-form-field-filled-label-floating-top-lg);
  --clc-form-field-label-floating-font-size: var(--clc-form-field-filled-label-floating-font-size-lg);
}
.clc-form-field.clc-variant-filled:has(.clc-input-lg) .clc-form-field-content > .clc-input-lg, .clc-form-field.clc-variant-flat:has(.clc-input-lg) .clc-form-field-content > .clc-input-lg {
  --clc-input-height: var(--clc-form-field-filled-height-lg);
  --clc-input-padding-block: var(--clc-form-field-filled-padding-block-lg);
  --clc-input-padding-inline: var(--clc-form-field-filled-padding-inline-lg);
}
.clc-form-field.clc-variant-flat:not(.clc-state-disabled):hover .clc-form-field-content {
  border: var(--clc-input-hover-border);
  border-block-end: var(--clc-input-hover-border-block-end);
  box-shadow: var(--clc-input-hover-shadow);
}
.clc-form-field.clc-variant-flat:not(.clc-state-disabled).clc-state-focused .clc-form-field-content {
  border: var(--clc-input-focus-border);
  border-block-end: var(--clc-input-focus-border-block-end);
  box-shadow: var(--clc-input-focus-shadow);
}
.clc-form-field.clc-variant-filled .clc-form-field-content {
  border: var(--clc-form-field-filled-border);
  border-radius: var(--clc-form-field-filled-border-radius);
  background-color: var(--clc-form-field-filled-background-color);
}
.clc-form-field.clc-variant-filled .clc-form-field-content:before, .clc-form-field.clc-variant-filled .clc-form-field-content:after {
  display: var(--clc-form-field-filled-underline-display);
}
.clc-form-field.clc-variant-filled:not(.clc-state-disabled):hover .clc-form-field-content {
  border: var(--clc-form-field-filled-hover-border);
  box-shadow: var(--clc-form-field-filled-hover-shadow);
  background-color: var(--clc-form-field-filled-hover-background-color);
}
.clc-form-field.clc-variant-filled:not(.clc-state-disabled).clc-state-focused .clc-form-field-content, .clc-form-field.clc-variant-filled:not(.clc-state-disabled).clc-state-focused:hover .clc-form-field-content {
  border: var(--clc-form-field-filled-focus-border);
  border-block-end: var(--clc-input-focus-border-block-end);
  box-shadow: var(--clc-form-field-filled-focus-shadow);
  background-color: var(--clc-form-field-filled-background-color);
}
.clc-form-field.clc-variant-text .clc-form-field-content {
  border-color: transparent;
  box-shadow: none;
  --clc-input-background-color: transparent;
  --clc-input-hover-background-color: transparent;
  --clc-input-focus-background-color: transparent;
  --clc-input-border-radius: 0;
  --clc-input-padding-block: 0.4375rem;
  --clc-input-padding-inline: 0;
  --clc-numeric-input-padding-block: 0.5rem 0.5rem;
  --clc-numeric-input-padding-inline: 0 1.25rem;
  --clc-text-area-padding-block: 0.4375rem;
  --clc-text-area-padding-inline: 0;
  --clc-form-field-label-inset-inline-start: 0;
  --clc-form-field-label-padding: var(--clc-form-field-text-label-padding);
}
.clc-form-field.clc-variant-text .clc-form-field-content ~ .clc-form-field-helper {
  padding: 0;
}
.clc-form-field.clc-variant-text .clc-form-field-start {
  padding-inline-start: 0;
}
.clc-form-field.clc-variant-text .clc-form-field-end {
  padding-inline-end: 0;
}
.clc-form-field.clc-variant-filled .clc-form-field-content:before, .clc-form-field.clc-variant-text .clc-form-field-content:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-inline-start: 50%;
  inset-inline-end: 50%;
  bottom: calc(-1 * var(--clc-border-width));
  height: calc(var(--clc-border-width) + 1px);
  border: var(--clc-input-focus-border-block-end);
  border-inline-start-width: 0;
  border-inline-end-width: 0;
  transition: inset-inline-start var(--clc-transition), inset-inline-end var(--clc-transition), border-width var(--clc-transition);
}
.clc-form-field.clc-variant-filled .clc-form-field-content:after, .clc-form-field.clc-variant-text .clc-form-field-content:after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--clc-border-width));
  top: auto;
  height: var(--clc-border-width);
  border-block-end: var(--clc-input-border-block-end);
}
.clc-form-field.clc-variant-filled:hover .clc-form-field-content:after, .clc-form-field.clc-variant-text:hover .clc-form-field-content:after {
  border-block-end: var(--clc-input-hover-border-block-end);
}
.clc-form-field.clc-variant-filled.clc-state-disabled .clc-form-field-content:after, .clc-form-field.clc-variant-filled.clc-state-disabled:hover .clc-form-field-content:after, .clc-form-field.clc-variant-text.clc-state-disabled .clc-form-field-content:after, .clc-form-field.clc-variant-text.clc-state-disabled:hover .clc-form-field-content:after {
  border-block-end: var(--clc-input-disabled-border-block-end);
}
.clc-form-field.clc-variant-filled.clc-state-focused:not(.clc-state-disabled) .clc-form-field-content:before, .clc-form-field.clc-variant-text.clc-state-focused:not(.clc-state-disabled) .clc-form-field-content:before {
  inset-inline-start: calc(-1 * var(--clc-border-width));
  inset-inline-end: calc(-1 * var(--clc-border-width));
  border: var(--clc-input-focus-border-block-end);
  border-inline-start-width: var(--clc-border-width);
  border-inline-end-width: var(--clc-border-width);
}
.clc-form-field .clc-numeric-button {
  display: none;
}
.clc-form-field .clc-numeric:focus-within .clc-numeric-button {
  display: block;
}

.clc-form-field-label {
  position: absolute;
  pointer-events: none;
  padding: var(--clc-form-field-label-padding);
  inset-block-start: 50%;
  inset-inline-end: auto;
  border-radius: var(--clc-border-radius);
  inset-inline-start: var(--clc-form-field-label-inset-inline-start);
  max-width: calc(100% - 1.5rem);
  transform: translate(0, -50%);
  background-color: transparent;
  transition: inset-block-start var(--clc-transition), inset-inline-start var(--clc-transition), transform var(--clc-transition), color var(--clc-transition), font-size var(--clc-transition), max-width var(--clc-transition);
}
.clc-state-disabled .clc-form-field-content > .clc-form-field-label {
  color: var(--clc-input-disabled-color) !important;
}
.clc-form-field-start ~ .clc-form-field-label {
  inset-inline-start: calc(var(--clc-form-field-start-end-padding-inline) + 1.5rem + var(--clc-form-field-label-inset-inline-start));
}
.clc-form-field-label:last-child {
  inset-inline-end: 1.5rem;
}
.clc-textarea ~ .clc-form-field-label {
  inset-block-start: var(--clc-form-field-label-textarea-top);
  transform: translate(0, 0);
}
.clc-form-field.clc-variant-filled .clc-textarea ~ .clc-form-field-label, .clc-form-field.clc-variant-flat .clc-textarea ~ .clc-form-field-label {
  transform: translate(0, 0.625rem);
}
.clc-form-field:not(.clc-floating-label) .clc-form-field-label, .clc-textbox:focus ~ .clc-form-field-label, .clc-textarea:focus ~ .clc-form-field-label, .clc-numeric:focus-within ~ .clc-form-field-label, .clc-autocomplete:focus-within ~ .clc-form-field-label, .clc-textbox:not(:placeholder-shown) ~ .clc-form-field-label, .clc-form-field-content > :not(.clc-state-empty):not(.clc-form-field-start):not(.clc-form-field-end) ~ .clc-form-field-label, .clc-form-field.clc-variant-filled .clc-textarea:focus ~ .clc-form-field-label, .clc-form-field.clc-variant-flat .clc-textarea:focus ~ .clc-form-field-label, .clc-form-field.clc-variant-filled > .clc-form-field-content > :not(.clc-state-empty):not(.clc-form-field-start):not(.clc-form-field-end) ~ .clc-form-field-label, .clc-form-field.clc-variant-flat > .clc-form-field-content > :not(.clc-state-empty):not(.clc-form-field-start):not(.clc-form-field-end) ~ .clc-form-field-label, .clc-radio-button-list-vertical ~ .clc-form-field-label, .clc-radio-button-list-horizontal ~ .clc-form-field-label, .clc-checkbox-list-vertical ~ .clc-form-field-label, .clc-checkbox-list-horizontal ~ .clc-form-field-label, .clc-chkbox ~ .clc-form-field-label, .clc-fileupload ~ .clc-form-field-label, .clc-state-empty:has(.clc-placeholder) ~ .clc-form-field-label, .clc-form-field.clc-state-focused .clc-form-field-label {
  inset-inline-start: var(--clc-form-field-label-inset-inline-start);
  inset-inline-end: auto;
  inset-block-start: var(--clc-form-field-label-floating-top);
  padding-block-start: 0;
  padding-block-end: 0;
  transform: translate(0, 0);
  color: var(--clc-input-placeholder-color);
  background-color: var(--clc-form-field-label-floating-background-color);
  font-size: var(--clc-form-field-label-floating-font-size, 0.75rem);
  line-height: 1rem;
  max-width: calc(100% - 1.5rem);
}
.clc-form-field:not(.clc-variant-outlined):not(.clc-floating-label) .clc-form-field-label, .clc-form-field:not(.clc-variant-outlined) *:focus ~ .clc-form-field-label, .clc-form-field:not(.clc-variant-outlined) *:focus-within ~ .clc-form-field-label, .clc-form-field:not(.clc-variant-outlined) :not(.clc-state-empty):not(.clc-form-field-start):not(.clc-form-field-end) ~ .clc-form-field-label, .clc-form-field:not(.clc-variant-outlined) .clc-radio-button-list-vertical ~ .clc-form-field-label, .clc-form-field:not(.clc-variant-outlined) .clc-radio-button-list-horizontal ~ .clc-form-field-label, .clc-form-field:not(.clc-variant-outlined) .clc-checkbox-list-vertical ~ .clc-form-field-label, .clc-form-field:not(.clc-variant-outlined) .clc-checkbox-list-horizontal ~ .clc-form-field-label, .clc-form-field:not(.clc-variant-outlined) .clc-chkbox ~ .clc-form-field-label, .clc-form-field:not(.clc-variant-outlined) .clc-fileupload ~ .clc-form-field-label, .clc-form-field:not(.clc-variant-outlined) .clc-state-empty:has(.clc-placeholder) ~ .clc-form-field-label, .clc-form-field:not(.clc-variant-outlined).clc-state-focused .clc-form-field-label {
  background-color: transparent !important;
}
.invalid ~ .clc-form-field-label {
  color: var(--clc-danger) !important;
}
.clc-state-focused .clc-form-field-label, .clc-form-field.clc-state-focused .clc-form-field-label, .clc-form-field.clc-variant-filled.clc-state-focused ~ .clc-form-field-label, .clc-form-field.clc-variant-flat.clc-state-focused ~ .clc-form-field-label, .clc-textbox:focus ~ .clc-form-field-label, .clc-textarea:focus ~ .clc-form-field-label, .clc-numeric:focus-within ~ .clc-form-field-label, .clc-autocomplete:focus-within ~ .clc-form-field-label, .clc-form-field.clc-variant-filled .clc-textbox:focus ~ .clc-form-field-label, .clc-form-field.clc-variant-flat .clc-textbox:focus ~ .clc-form-field-label {
  color: var(--clc-form-field-label-focus-color);
}

.clc-timeline {
  box-sizing: border-box;
  display: flex;
}
.clc-timeline.clc-timeline-column {
  flex-direction: column;
}
.clc-timeline.clc-timeline-column .clc-timeline-item {
  flex-direction: row;
}
.clc-timeline.clc-timeline-column .clc-timeline-content-start {
  text-align: right;
}
.clc-timeline.clc-timeline-column .clc-timeline-content-end {
  text-align: left;
}
.clc-timeline.clc-timeline-column.clc-timeline-alternate .clc-timeline-item:nth-child(even) {
  flex-direction: row-reverse;
}
.clc-timeline.clc-timeline-column.clc-timeline-alternate .clc-timeline-item:nth-child(even) .clc-timeline-content-start {
  text-align: left;
}
.clc-timeline.clc-timeline-column.clc-timeline-alternate .clc-timeline-item:nth-child(even) .clc-timeline-content-end {
  text-align: right;
}
.clc-timeline.clc-timeline-column.clc-timeline-start:not(.clc-timeline-reverse) .clc-timeline-item:before {
  left: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-axis-size) / 2 - var(--clc-timeline-line-width) / 2);
  right: auto;
}
.clc-timeline.clc-timeline-column.clc-timeline-start:not(.clc-timeline-reverse) .clc-timeline-content-start {
  display: none;
}
.clc-timeline.clc-timeline-column.clc-timeline-start:not(.clc-timeline-reverse) .clc-timeline-content-end {
  max-width: calc(100% - var(--clc-timeline-axis-size));
  text-align: start;
}
.clc-timeline.clc-timeline-column.clc-timeline-end:not(.clc-timeline-reverse) .clc-timeline-item {
  flex-direction: row-reverse;
}
.clc-timeline.clc-timeline-column.clc-timeline-end:not(.clc-timeline-reverse) .clc-timeline-item:before {
  right: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-axis-size) / 2 - var(--clc-timeline-line-width) / 2);
  left: auto;
}
.clc-timeline.clc-timeline-column.clc-timeline-end:not(.clc-timeline-reverse) .clc-timeline-content-start {
  display: none;
}
.clc-timeline.clc-timeline-column.clc-timeline-end:not(.clc-timeline-reverse) .clc-timeline-content-end {
  max-width: calc(100% - var(--clc-timeline-axis-size));
  text-align: end;
}
.clc-timeline.clc-timeline-column.clc-timeline-left:not(.clc-timeline-reverse) .clc-timeline-item:before {
  left: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-axis-size) / 2 - var(--clc-timeline-line-width) / 2);
  right: auto;
}
.clc-timeline.clc-timeline-column.clc-timeline-left:not(.clc-timeline-reverse) .clc-timeline-content-start {
  display: none;
}
.clc-timeline.clc-timeline-column.clc-timeline-left:not(.clc-timeline-reverse) .clc-timeline-content-end {
  max-width: calc(100% - var(--clc-timeline-axis-size));
  text-align: left;
}
.clc-timeline.clc-timeline-column.clc-timeline-right:not(.clc-timeline-reverse) .clc-timeline-item {
  flex-direction: row-reverse;
}
.clc-timeline.clc-timeline-column.clc-timeline-right:not(.clc-timeline-reverse) .clc-timeline-item:before {
  right: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-axis-size) / 2 - var(--clc-timeline-line-width) / 2);
  left: auto;
}
.clc-timeline.clc-timeline-column.clc-timeline-right:not(.clc-timeline-reverse) .clc-timeline-content-start {
  display: none;
}
.clc-timeline.clc-timeline-column.clc-timeline-right:not(.clc-timeline-reverse) .clc-timeline-content-end {
  max-width: calc(100% - var(--clc-timeline-axis-size));
  text-align: right;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse .clc-timeline-item {
  flex-direction: row-reverse;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse .clc-timeline-content-start {
  text-align: left;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse .clc-timeline-content-end {
  text-align: right;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-alternate .clc-timeline-item:nth-child(even) {
  flex-direction: row;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-alternate .clc-timeline-item:nth-child(even) .clc-timeline-content-start {
  text-align: right;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-alternate .clc-timeline-item:nth-child(even) .clc-timeline-content-end {
  text-align: left;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-start .clc-timeline-item:before {
  left: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-axis-size) / 2 - var(--clc-timeline-line-width) / 2);
  right: auto;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-start .clc-timeline-content-start {
  max-width: calc(100% - var(--clc-timeline-axis-size));
  text-align: start;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-start .clc-timeline-content-end {
  display: none;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-end .clc-timeline-item {
  flex-direction: row;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-end .clc-timeline-item:before {
  right: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-axis-size) / 2 - var(--clc-timeline-line-width) / 2);
  left: auto;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-end .clc-timeline-content-start {
  max-width: calc(100% - var(--clc-timeline-axis-size));
  text-align: end;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-end .clc-timeline-content-end {
  display: none;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-left .clc-timeline-item:before {
  left: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-axis-size) / 2 - var(--clc-timeline-line-width) / 2);
  right: auto;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-left .clc-timeline-content-start {
  max-width: calc(100% - var(--clc-timeline-axis-size));
  text-align: left;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-left .clc-timeline-content-end {
  display: none;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-right .clc-timeline-item {
  flex-direction: row;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-right .clc-timeline-item:before {
  right: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-axis-size) / 2 - var(--clc-timeline-line-width) / 2);
  left: auto;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-right .clc-timeline-content-start {
  max-width: calc(100% - var(--clc-timeline-axis-size));
  text-align: right;
}
.clc-timeline.clc-timeline-column.clc-timeline-reverse.clc-timeline-right .clc-timeline-content-end {
  display: none;
}
.clc-timeline.clc-timeline-row {
  flex-direction: row;
}
.clc-timeline.clc-timeline-row .clc-timeline-item {
  flex-direction: column;
  justify-content: end;
  width: 100%;
}
.clc-timeline.clc-timeline-row.clc-timeline-alternate .clc-timeline-item:nth-child(even) {
  flex-direction: column-reverse;
  justify-content: start;
}
.clc-timeline.clc-timeline-row.clc-timeline-start:not(.clc-timeline-reverse) .clc-timeline-item:before, .clc-timeline.clc-timeline-row.clc-timeline-top:not(.clc-timeline-reverse) .clc-timeline-item:before {
  top: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-axis-size) / 2 - var(--clc-timeline-line-width) / 2);
  bottom: auto;
}
.clc-timeline.clc-timeline-row.clc-timeline-start:not(.clc-timeline-reverse) .clc-timeline-content-start, .clc-timeline.clc-timeline-row.clc-timeline-top:not(.clc-timeline-reverse) .clc-timeline-content-start {
  display: none;
}
.clc-timeline.clc-timeline-row.clc-timeline-start:not(.clc-timeline-reverse) .clc-timeline-content-end, .clc-timeline.clc-timeline-row.clc-timeline-top:not(.clc-timeline-reverse) .clc-timeline-content-end {
  max-height: calc(100% - var(--clc-timeline-axis-size));
}
.clc-timeline.clc-timeline-row.clc-timeline-end:not(.clc-timeline-reverse) .clc-timeline-item, .clc-timeline.clc-timeline-row.clc-timeline-bottom:not(.clc-timeline-reverse) .clc-timeline-item {
  flex-direction: column-reverse;
}
.clc-timeline.clc-timeline-row.clc-timeline-end:not(.clc-timeline-reverse) .clc-timeline-item:before, .clc-timeline.clc-timeline-row.clc-timeline-bottom:not(.clc-timeline-reverse) .clc-timeline-item:before {
  bottom: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-axis-size) / 2 - var(--clc-timeline-line-width) / 2);
  top: auto;
}
.clc-timeline.clc-timeline-row.clc-timeline-end:not(.clc-timeline-reverse) .clc-timeline-content-start, .clc-timeline.clc-timeline-row.clc-timeline-bottom:not(.clc-timeline-reverse) .clc-timeline-content-start {
  display: none;
}
.clc-timeline.clc-timeline-row.clc-timeline-end:not(.clc-timeline-reverse) .clc-timeline-content-end, .clc-timeline.clc-timeline-row.clc-timeline-bottom:not(.clc-timeline-reverse) .clc-timeline-content-end {
  max-height: calc(100% - var(--clc-timeline-axis-size));
}
.clc-timeline.clc-timeline-row.clc-timeline-reverse .clc-timeline-item {
  flex-direction: column-reverse;
  justify-content: start;
}
.clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-alternate .clc-timeline-item:nth-child(even) {
  flex-direction: column;
  justify-content: end;
}
.clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-start .clc-timeline-item:before, .clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-top .clc-timeline-item:before {
  top: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-axis-size) / 2 - var(--clc-timeline-line-width) / 2);
  bottom: auto;
}
.clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-start .clc-timeline-content-start, .clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-top .clc-timeline-content-start {
  max-height: calc(100% - var(--clc-timeline-axis-size));
}
.clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-start .clc-timeline-content-end, .clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-top .clc-timeline-content-end {
  display: none;
}
.clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-end .clc-timeline-item, .clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-bottom .clc-timeline-item {
  flex-direction: column;
}
.clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-end .clc-timeline-item:before, .clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-bottom .clc-timeline-item:before {
  bottom: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-axis-size) / 2 - var(--clc-timeline-line-width) / 2);
  top: auto;
}
.clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-end .clc-timeline-content-start, .clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-bottom .clc-timeline-content-start {
  max-height: calc(100% - var(--clc-timeline-axis-size));
}
.clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-end .clc-timeline-content-end, .clc-timeline.clc-timeline-row.clc-timeline-reverse.clc-timeline-bottom .clc-timeline-content-end {
  display: none;
}

.clc-timeline-item {
  display: flex;
  padding: var(--clc-timeline-item-padding);
  position: relative;
}
.clc-timeline-align-items-center .clc-timeline-item {
  align-items: center;
}
.clc-timeline-align-items-normal .clc-timeline-item {
  align-items: normal;
}
.clc-timeline-align-items-start .clc-timeline-item {
  align-items: start;
}
.clc-timeline-align-items-end .clc-timeline-item {
  align-items: end;
}
.clc-timeline-align-items-stretch .clc-timeline-item {
  align-items: stretch;
}
.clc-timeline-item:before {
  content: "";
  position: absolute;
  background-color: var(--clc-timeline-line-color);
}
.clc-timeline-column .clc-timeline-item:before {
  width: var(--clc-timeline-line-width);
  top: 0;
  bottom: 0;
  left: calc(50% - var(--clc-timeline-line-width) / 2);
  right: auto;
}
.clc-timeline-column .clc-timeline-item:first-child:before {
  top: calc(50% - var(--clc-timeline-line-width) / 2);
  border-top-left-radius: var(--clc-timeline-line-border-radius);
  border-top-right-radius: var(--clc-timeline-line-border-radius);
}
.clc-timeline-column.clc-timeline-align-items-start .clc-timeline-item:first-child:before {
  top: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-point-size) / 2 - var(--clc-timeline-line-width) / 2);
}
.clc-timeline-column.clc-timeline-align-items-end .clc-timeline-item:first-child:before {
  top: calc(100% - var(--clc-timeline-item-padding) - var(--clc-timeline-point-size) / 2 - var(--clc-timeline-line-width) / 2);
}
.clc-timeline-column .clc-timeline-item:last-child:before {
  bottom: calc(50% - var(--clc-timeline-line-width) / 2);
  border-bottom-left-radius: var(--clc-timeline-line-border-radius);
  border-bottom-right-radius: var(--clc-timeline-line-border-radius);
}
.clc-timeline-column.clc-timeline-align-items-start .clc-timeline-item:last-child:before {
  bottom: calc(100% - var(--clc-timeline-item-padding) - var(--clc-timeline-point-size) / 2 - var(--clc-timeline-line-width) / 2);
}
.clc-timeline-column.clc-timeline-align-items-end .clc-timeline-item:last-child:before {
  bottom: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-point-size) / 2 - var(--clc-timeline-line-width) / 2);
}
.clc-timeline-row .clc-timeline-item:before {
  top: calc(50% - var(--clc-timeline-line-width) / 2);
  bottom: auto;
  left: 0;
  right: 0;
  height: var(--clc-timeline-line-width);
}
.clc-timeline-row .clc-timeline-item:first-child:before {
  left: calc(50% - var(--clc-timeline-line-width) / 2);
  border-top-left-radius: var(--clc-timeline-line-border-radius);
  border-bottom-left-radius: var(--clc-timeline-line-border-radius);
}
.clc-timeline-row.clc-timeline-align-items-start .clc-timeline-item:first-child:before {
  left: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-point-size) / 2 - var(--clc-timeline-line-width) / 2);
}
.clc-timeline-row.clc-timeline-align-items-end .clc-timeline-item:first-child:before {
  left: calc(100% - var(--clc-timeline-item-padding) - var(--clc-timeline-point-size) / 2 - var(--clc-timeline-line-width) / 2);
}
.clc-timeline-row .clc-timeline-item:last-child:before {
  right: calc(50% - var(--clc-timeline-line-width) / 2);
  border-top-right-radius: var(--clc-timeline-line-border-radius);
  border-bottom-right-radius: var(--clc-timeline-line-border-radius);
}
.clc-timeline-row.clc-timeline-align-items-start .clc-timeline-item:last-child:before {
  right: calc(100% - var(--clc-timeline-item-padding) - var(--clc-timeline-point-size) / 2 - var(--clc-timeline-line-width) / 2);
}
.clc-timeline-row.clc-timeline-align-items-end .clc-timeline-item:last-child:before {
  right: calc(var(--clc-timeline-item-padding) + var(--clc-timeline-point-size) / 2 - var(--clc-timeline-line-width) / 2);
}

.clc-timeline-content-start {
  text-align: center;
}
.clc-timeline-column .clc-timeline-content-start {
  flex: 1 1 auto;
  max-width: calc(50% - var(--clc-timeline-axis-size) / 2);
}

.clc-timeline-content-end {
  flex: 1 1 auto;
  text-align: center;
}
.clc-timeline-column .clc-timeline-content-end {
  max-width: calc(50% - var(--clc-timeline-axis-size) / 2);
}
.clc-timeline-row .clc-timeline-content-end {
  max-height: calc(50% - var(--clc-timeline-axis-size) / 2);
}

.clc-timeline-axis {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 var(--clc-timeline-axis-size);
}
.clc-timeline-column .clc-timeline-axis {
  width: var(--clc-timeline-axis-size);
}
.clc-timeline-row .clc-timeline-axis {
  height: var(--clc-timeline-axis-size);
}

.clc-timeline-point {
  position: relative;
  display: flex;
  flex: 0 1 var(--clc-timeline-point-size);
  align-items: center;
  justify-content: center;
  height: var(--clc-timeline-point-size);
  width: var(--clc-timeline-point-size);
  border: var(--clc-timeline-point-border);
  border-radius: var(--clc-timeline-point-border-radius);
  background-color: var(--clc-timeline-point-background-color);
  color: var(--clc-timeline-point-color);
}

.clc-timeline-point-outlined {
  background-color: var(--clc-base-background-color);
  color: var(--clc-timeline-point-color);
  border-color: var(--clc-timeline-point-background-color);
}

.clc-timeline-point-flat {
  border: 0;
}

.clc-timeline-point-text {
  background-color: var(--clc-base-background-color);
  color: var(--clc-timeline-point-color);
  border: 0;
}

.clc-timeline-point-primary {
  background-color: var(--clc-primary);
  color: var(--clc-on-primary);
}

.clc-timeline-point-outlined.clc-timeline-point-primary {
  background-color: var(--clc-base-background-color);
  color: var(--clc-primary);
  border-color: var(--clc-primary);
}

.clc-timeline-point-text.clc-timeline-point-primary {
  background-color: var(--clc-base-background-color);
  color: var(--clc-primary);
}

.clc-timeline-point-secondary {
  background-color: var(--clc-secondary);
  color: var(--clc-on-secondary);
}

.clc-timeline-point-outlined.clc-timeline-point-secondary {
  background-color: var(--clc-base-background-color);
  color: var(--clc-secondary);
  border-color: var(--clc-secondary);
}

.clc-timeline-point-text.clc-timeline-point-secondary {
  background-color: var(--clc-base-background-color);
  color: var(--clc-secondary);
}

.clc-timeline-point-info {
  background-color: var(--clc-info);
  color: var(--clc-on-info);
}

.clc-timeline-point-outlined.clc-timeline-point-info {
  background-color: var(--clc-base-background-color);
  color: var(--clc-info);
  border-color: var(--clc-info);
}

.clc-timeline-point-text.clc-timeline-point-info {
  background-color: var(--clc-base-background-color);
  color: var(--clc-info);
}

.clc-timeline-point-warning {
  background-color: var(--clc-warning);
  color: var(--clc-on-warning);
}

.clc-timeline-point-outlined.clc-timeline-point-warning {
  background-color: var(--clc-base-background-color);
  color: var(--clc-warning);
  border-color: var(--clc-warning);
}

.clc-timeline-point-text.clc-timeline-point-warning {
  background-color: var(--clc-base-background-color);
  color: var(--clc-warning);
}

.clc-timeline-point-error {
  background-color: var(--clc-danger);
  color: var(--clc-on-danger);
}

.clc-timeline-point-outlined.clc-timeline-point-error {
  background-color: var(--clc-base-background-color);
  color: var(--clc-danger);
  border-color: var(--clc-danger);
}

.clc-timeline-point-text.clc-timeline-point-error {
  background-color: var(--clc-base-background-color);
  color: var(--clc-danger);
}

.clc-timeline-point-danger {
  background-color: var(--clc-danger);
  color: var(--clc-on-danger);
}

.clc-timeline-point-outlined.clc-timeline-point-danger {
  background-color: var(--clc-base-background-color);
  color: var(--clc-danger);
  border-color: var(--clc-danger);
}

.clc-timeline-point-text.clc-timeline-point-danger {
  background-color: var(--clc-base-background-color);
  color: var(--clc-danger);
}

.clc-timeline-point-success {
  background-color: var(--clc-success);
  color: var(--clc-on-success);
}

.clc-timeline-point-outlined.clc-timeline-point-success {
  background-color: var(--clc-base-background-color);
  color: var(--clc-success);
  border-color: var(--clc-success);
}

.clc-timeline-point-text.clc-timeline-point-success {
  background-color: var(--clc-base-background-color);
  color: var(--clc-success);
}

.clc-timeline-point-base {
  background-color: var(--clc-base-200);
  color: var(--clc-text-color);
}

.clc-timeline-point-outlined.clc-timeline-point-base {
  background-color: var(--clc-base-background-color);
  color: var(--clc-base-200);
  border-color: var(--clc-base-200);
}

.clc-timeline-point-text.clc-timeline-point-base {
  background-color: var(--clc-base-background-color);
  color: var(--clc-base-200);
}

.clc-timeline-point-light {
  background-color: var(--clc-base-200);
  color: var(--clc-text-color);
}

.clc-timeline-point-outlined.clc-timeline-point-light {
  background-color: var(--clc-base-background-color);
  color: var(--clc-base-200);
  border-color: var(--clc-base-200);
}

.clc-timeline-point-text.clc-timeline-point-light {
  background-color: var(--clc-base-background-color);
  color: var(--clc-base-200);
}

.clc-timeline-point-dark {
  background-color: var(--clc-base-900);
  color: var(--clc-text-contrast-color);
}

.clc-timeline-point-outlined.clc-timeline-point-dark {
  background-color: var(--clc-base-background-color);
  color: var(--clc-base-900);
  border-color: var(--clc-base-900);
}

.clc-timeline-point-text.clc-timeline-point-dark {
  background-color: var(--clc-base-background-color);
  color: var(--clc-base-900);
}

.clc-timeline-axis-lg {
  --clc-timeline-point-size: 3rem;
}
.clc-timeline-axis-lg .clc-timeline-point .clci {
  font-size: 2rem;
}

.clc-timeline-axis-md {
  --clc-timeline-point-size: 1.5rem;
}
.clc-timeline-axis-md .clc-timeline-point .clci {
  font-size: 1rem;
}

.clc-timeline-axis-sm {
  --clc-timeline-point-size: 1rem;
}
.clc-timeline-axis-sm .clc-timeline-point .clci {
  font-size: 0.625rem;
}

.clc-timeline-axis-xs {
  --clc-timeline-point-size: 0.75rem;
}
.clc-timeline-axis-xs .clc-timeline-point .clci {
  font-size: 0.5rem;
}

.clc-picklist-wrapper {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  --clc-gap: 1rem;
}

.clc-picklist-source-wrapper,
.clc-picklist-target-wrapper {
  flex: 1;
  --clc-gap: 0.5rem;
  overflow: hidden;
}
.clc-picklist-source-wrapper .clc-listbox,
.clc-picklist-target-wrapper .clc-listbox {
  width: 100%;
  height: 100%;
}

.clc-picklist-buttons.clc-flex-row .clci {
  transform: rotate(90deg);
}

.clc-carousel {
  position: relative;
  overflow: hidden;
  scrollbar-color: transparent transparent;
  border-radius: var(--clc-carousel-border-radius);
}
.clc-carousel:not(.clc-carousel-pager-overlay) .clc-carousel-pager-top ~ .clc-carousel-items,
.clc-carousel:not(.clc-carousel-pager-overlay) .clc-carousel-items:has(+ .clc-carousel-pager-bottom) {
  height: calc(100% - var(--clc-carousel-pager-height));
}
.clc-carousel:not(.clc-carousel-pager-overlay) .clc-carousel-pager-top ~ .clc-carousel-items:has(+ .clc-carousel-pager-bottom) {
  height: calc(100% - 2 * var(--clc-carousel-pager-height));
}
.clc-carousel:not(.clc-carousel-pager-overlay) .clc-carousel-pager-top ~ .clc-carousel-prev,
.clc-carousel:not(.clc-carousel-pager-overlay) .clc-carousel-pager-top ~ .clc-carousel-next {
  inset-block-start: calc(50% + var(--clc-carousel-pager-height) / 2);
}
.clc-carousel:not(.clc-carousel-pager-overlay) .clc-carousel-prev:has(~ .clc-carousel-pager-bottom),
.clc-carousel:not(.clc-carousel-pager-overlay) .clc-carousel-next:has(~ .clc-carousel-pager-bottom) {
  inset-block-start: calc(50% - var(--clc-carousel-pager-height) / 2);
}
.clc-carousel:not(.clc-carousel-pager-overlay) .clc-carousel-pager-top ~ .clc-carousel-prev:has(~ .clc-carousel-pager-bottom),
.clc-carousel:not(.clc-carousel-pager-overlay) .clc-carousel-pager-top ~ .clc-carousel-next:has(~ .clc-carousel-pager-bottom) {
  inset-block-start: 50%;
}

.clc-carousel-items {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  border-radius: var(--clc-carousel-border-radius);
  scrollbar-width: none;
  touch-action: pan-y;
  -ms-overflow-style: none;
}
.clc-carousel-items::-webkit-scrollbar {
  display: none;
}

.clc-carousel-no-scroll {
  overflow-x: hidden;
  touch-action: none;
  scroll-snap-type: none;
}

.clc-carousel-item {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  counter-increment: item;
  scrollbar-color: initial;
  scrollbar-width: initial;
  -ms-overflow-style: initial;
}

.clc-carousel-snapper {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

.clc-carousel-pager {
  gap: var(--clc-carousel-pager-gap);
  height: var(--clc-carousel-pager-height);
}

.clc-carousel-pager-button {
  cursor: pointer;
  width: var(--clc-carousel-pager-button-width);
  height: var(--clc-carousel-pager-button-height);
  border: var(--clc-carousel-pager-button-border);
  border-radius: var(--clc-carousel-pager-button-border-radius);
  background-color: var(--clc-carousel-pager-button-background-color);
  color: var(--clc-carousel-pager-button-color);
  transition: var(--clc-button-transition);
  -webkit-appearance: none;
}
.clc-carousel-pager-button:hover {
  border: var(--clc-carousel-pager-button-hover-border);
  background-color: var(--clc-carousel-pager-button-hover-background-color);
  color: var(--clc-carousel-pager-button-hover-color);
}
.clc-carousel-pager-button.clc-state-active {
  width: var(--clc-carousel-pager-button-active-width);
  height: var(--clc-carousel-pager-button-active-height);
  border: var(--clc-carousel-pager-button-active-border);
  background-color: var(--clc-carousel-pager-button-active-background-color);
  color: var(--clc-carousel-pager-button-active-color);
}

.clc-carousel-pager-overlay .clc-carousel-pager {
  position: absolute;
  z-index: 998;
  inset-inline: 0;
  opacity: var(--clc-carousel-pager-overlay-opacity);
}
.clc-carousel-pager-overlay .clc-carousel-pager-top {
  inset-block-start: 0;
}
.clc-carousel-pager-overlay .clc-carousel-pager-bottom {
  inset-block-end: 0;
}

.clc-carousel-prev,
.clc-carousel-next {
  position: absolute;
  z-index: 999;
  inset-block-start: 50%; /* calc(50% - var(--clc-carousel-pager-height)/2) */
  transform: translateY(-50%);
  border-radius: var(--clc-carousel-prev-next-button-border-radius);
}

.clc-carousel-prev {
  inset-inline-start: var(--clc-carousel-prev-next-button-inset);
}

.clc-carousel-next {
  inset-inline-end: var(--clc-carousel-prev-next-button-inset);
}
.clc-carousel-next .clci {
  order: 2;
}

*[dir=rtl] .clc-carousel-prev .clci,
*[dir=rtl] .clc-carousel-next .clci {
  transform: rotate(180deg);
}

/* input field */
.clc-timespanpicker {
  display: inline-block;
  position: relative;
}
.clc-timespanpicker .clc-readonly {
  cursor: pointer;
}
.clc-timespanpicker > .clc-inputtext {
  width: 100%;
  line-height: var(--clc-timespanpicker-line-height);
}
.clc-timespanpicker:has(.clc-timespanpicker-trigger) > .clc-inputtext {
  padding-inline-end: calc(1rem + var(--clc-timespanpicker-trigger-icon-size));
}
.clc-timespanpicker:has(.clc-dropdown-clear-icon) > .clc-inputtext {
  padding-inline-end: calc(1rem + var(--clc-dropdown-trigger-icon-width));
}
.clc-timespanpicker:has(.clc-timespanpicker-trigger):has(.clc-dropdown-clear-icon) > .clc-inputtext {
  padding-inline-end: calc(var(--clc-dropdown-trigger-icon-width) + 1rem + var(--clc-timespanpicker-trigger-icon-size));
}
.clc-timespanpicker:not(.clc-state-disabled):hover .clc-timespanpicker-trigger {
  box-shadow: none;
  color: var(--clc-timespanpicker-trigger-icon-hover-color);
}
.clc-timespanpicker.clc-state-disabled > .clc-inputtext {
  color: var(--clc-input-disabled-color);
  box-shadow: var(--clc-input-disabled-shadow);
  background-color: var(--clc-input-disabled-background-color);
  border: var(--clc-input-disabled-border);
  opacity: var(--clc-input-disabled-opacity);
}
.clc-timespanpicker.clc-state-disabled > .clc-inputtext::placeholder {
  color: var(--clc-input-disabled-placeholder-color);
}
.clc-timespanpicker:not(:has(.clc-timespanpicker-trigger)) .clc-dropdown-clear-icon {
  inset-inline-end: 0.5rem;
}

/* popup trigger button */
.clc-timespanpicker-trigger {
  box-shadow: none;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.625rem;
  transform: translateY(-50%);
  background-color: transparent;
  padding: 0;
  vertical-align: text-top;
  color: var(--clc-timespanpicker-trigger-icon-color);
  width: var(--clc-timespanpicker-trigger-icon-size);
  height: var(--clc-timespanpicker-trigger-icon-size);
  font-size: var(--clc-timespanpicker-trigger-icon-size);
}
.clc-timespanpicker-trigger.clc-state-disabled {
  border: none;
  box-shadow: none;
  cursor: initial;
  opacity: 1;
  color: var(--clc-input-disabled-color);
}
.clc-timespanpicker-trigger:not(.clc-state-disabled):hover:not(:active), .clc-timespanpicker-trigger:not(.clc-state-disabled):hover:active {
  background-color: transparent;
}
.clc-timespanpicker-trigger:not(.clc-state-disabled):active {
  box-shadow: none !important;
  background-image: none !important;
}
.clc-timespanpicker-trigger .clci-timespan {
  font-size: inherit;
  vertical-align: top;
}
.clc-timespanpicker-trigger .clci-timespan:before {
  content: "timer";
}
.clc-timespanpicker-trigger .clc-button-text {
  display: none;
}

/* panel */
.clc-timespanpicker-inline {
  border: var(--clc-input-border);
  border-radius: var(--clc-border-radius);
  background-color: var(--clc-timespanpicker-panel-background-color);
  overflow: auto;
}

.clc-timespanpicker-popup-container {
  display: none;
  box-sizing: content-box;
  position: absolute;
  width: var(--clc-timespanpicker-popup-width);
  margin: var(--clc-timespanpicker-popup-margin);
  box-shadow: var(--clc-timespanpicker-popup-shadow);
  border: var(--clc-timespanpicker-popup-border);
  border-radius: var(--clc-border-radius);
  background-color: var(--clc-timespanpicker-panel-background-color);
}

.clc-timespanpicker-panel {
  padding: var(--clc-timespanpicker-panel-padding);
}

.clc-timespanpicker-panel, .clc-timespanpicker-panel-fieldcontainer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--clc-timespanpicker-panel-gap);
}

.clc-timespanpicker-panel-fieldwithunit {
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--clc-timespanpicker-panel-unit-gap);
  width: min-content;
}

.clc-timespanpicker-unit-label {
  color: var(--clc-timespanpicker-unit-label-color);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.clc-timespanpicker-unitvaluepicker {
  width: fit-content;
  min-width: var(--clc-timespanpicker-panel-field-min-width);
}

.clc-timespanpicker-signpicker {
  align-self: stretch;
}
.clc-timespanpicker-signpicker > .clc-button {
  flex: 1;
  --clc-selectbar-border-radius: var(--clc-input-border-radius);
}

.clc-timespanpicker.clc-input-xs {
  --clc-timespanpicker-trigger-icon-size: var(--clc-timespanpicker-trigger-icon-size-xs);
}

.clc-timespanpicker.clc-input-sm {
  --clc-timespanpicker-trigger-icon-size: var(--clc-timespanpicker-trigger-icon-size-sm);
}

.clc-toc {
  list-style-type: none;
  padding: 0;
  margin: 0;
  line-height: normal;
}

.clc-toc-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.clc-toc-item-wrapper {
  position: relative;
}
.clc-toc-item-wrapper:after {
  content: "";
  position: absolute;
  inset-block: var(--clc-toc-link-selected-indicator-inset-block);
  inset-inline: var(--clc-toc-link-selected-indicator-inset-inline);
  width: var(--clc-toc-link-selected-indicator-size);
  border-radius: var(--clc-toc-link-selected-indicator-border-radius);
  background-color: transparent;
  transition: background-color var(--clc-transition);
}

.clc-toc-item-selected > .clc-toc-item-wrapper:after {
  background-color: var(--clc-toc-link-selected-indicator-color);
}

.clc-toc-link {
  display: flex;
  padding-block: var(--clc-toc-link-padding-block);
  padding-inline: var(--clc-toc-link-padding-inline);
  text-decoration: none;
  text-align: initial;
  font-size: var(--clc-toc-link-font-size);
  font-weight: var(--clc-toc-link-font-weight);
  font-family: inherit;
  border: var(--clc-toc-link-border);
  border-radius: var(--clc-toc-link-border-radius);
  color: var(--clc-toc-link-color);
  background-color: var(--clc-toc-link-background-color);
  transition: border var(--clc-transition), color var(--clc-transition), background-color var(--clc-transition);
  cursor: pointer;
}
.clc-toc-link:hover {
  color: var(--clc-toc-link-hover-color);
  background-color: var(--clc-toc-link-hover-background-color);
}
.clc-toc-link:focus {
  outline: var(--clc-outline-normal);
}
.clc-toc-link:focus-visible {
  outline: var(--clc-link-focus-outline);
  outline-offset: calc(-1 * var(--clc-outline-width));
}
.clc-toc-item-selected > .clc-toc-item-wrapper .clc-toc-link {
  border: var(--clc-toc-link-selected-border);
  color: var(--clc-toc-link-selected-color);
  background-color: var(--clc-toc-link-selected-background-color);
}
.clc-toc-horizontal .clc-toc-item-selected .clc-toc-link {
  border: var(--clc-toc-horizontal-link-selected-border);
  color: var(--clc-toc-horizontal-link-selected-color);
  background-color: var(--clc-toc-horizontal-link-selected-background-color);
}

.clc-toc-horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  border-radius: var(--clc-toc-horizontal-border-radius);
  background-color: var(--clc-toc-horizontal-background-color);
  overflow: hidden;
  box-shadow: var(--clc-toc-horizontal-shadow);
}
.clc-toc-horizontal .clc-toc-item {
  flex: 1;
  display: inline-flex;
}
.clc-toc-horizontal .clc-toc-item .clc-toc-item-wrapper {
  display: flex;
  flex: 1;
}
.clc-toc-horizontal .clc-toc-item .clc-toc-item-wrapper:after {
  inset-block: var(--clc-toc-horizontal-link-selected-indicator-inset-block);
  inset-inline: var(--clc-toc-horizontal-link-selected-indicator-inset-inline);
  width: auto;
  height: var(--clc-toc-link-selected-indicator-size);
}
.clc-toc-horizontal .clc-toc-link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--clc-toc-horizontal-link-padding-block);
  padding-inline: var(--clc-toc-horizontal-link-padding-inline);
  font-size: var(--clc-toc-horizontal-link-font-size);
}

.clc-expander {
  display: grid;
  transition: grid-template-rows var(--clc-expander-transition);
}
.clc-expander > .clc-expander-content {
  overflow: hidden;
  visibility: hidden;
  transition: visibility var(--clc-expander-transition);
}
.clc-expander.clc-state-expanded {
  grid-template-rows: 1fr;
}
.clc-expander.clc-state-expanded > .clc-expander-content {
  visibility: visible;
}
.clc-expander.clc-state-collapsed {
  grid-template-rows: 0fr;
}
.clc-expander.clc-state-collapsed .clc-expander-content {
  visibility: hidden;
}

.clc-skeleton {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background-color: var(--clc-skeleton-background-color);
  border-radius: var(--clc-skeleton-border-radius);
}

.clc-skeleton.clc-skeleton-text {
  width: 10rem;
  height: 0.75em;
}

.clc-skeleton.clc-skeleton-circular {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

.clc-skeleton.clc-skeleton-rectangular {
  width: 3rem;
  height: 2rem;
  border-radius: 0;
}

.clc-skeleton.clc-skeleton-wave::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 25%, var(--clc-skeleton-animation-color) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: clc-wave var(--clc-skeleton-animation-duration) infinite;
}

.clc-skeleton.clc-skeleton-pulse {
  animation: clc-pulse var(--clc-skeleton-animation-duration) infinite;
}

/* CleviFab */
.clc-fab {
  position: absolute;
  inset-block-start: var(--clc-fab-inset-block-start);
  inset-block-end: var(--clc-fab-inset-block-end);
  inset-inline-start: var(--clc-fab-inset-inline-start);
  inset-inline-end: var(--clc-fab-inset-inline-end);
  z-index: var(--clc-fab-zindex);
  border-radius: var(--clc-fab-border-radius);
  box-shadow: var(--clc-fab-shadow);
  transition: transform var(--clc-transition);
}
@media (hover: hover) and (pointer: fine) {
  .clc-fab:not(.clc-state-disabled):not(:active):hover {
    box-shadow: var(--clc-fab-hover-shadow);
  }
}
.clc-fab:not(.clc-state-disabled):active {
  transform: scale(1.1);
  box-shadow: var(--clc-fab-active-shadow);
  transition: transform var(--clc-transition);
}

/* CleviFabMenu */
.clc-fabmenu {
  position: absolute;
  inset-block-start: var(--clc-fab-inset-block-start);
  inset-block-end: var(--clc-fab-inset-block-end);
  inset-inline-start: var(--clc-fab-inset-inline-start);
  inset-inline-end: var(--clc-fab-inset-inline-end);
  z-index: 1000;
}
.clc-fabmenu > .clc-toggle-button {
  border-radius: var(--clc-fab-border-radius);
  box-shadow: var(--clc-fab-shadow);
  transition: transform var(--clc-transition), border-radius var(--clc-transition);
}
@media (hover: hover) and (pointer: fine) {
  .clc-fabmenu > .clc-toggle-button:not(.clc-state-disabled):not(:active):hover {
    box-shadow: var(--clc-fab-hover-shadow);
  }
}
.clc-fabmenu > .clc-toggle-button:not(.clc-state-disabled):active {
  transform: scale(1.1);
  box-shadow: var(--clc-fab-active-shadow);
  transition: transform var(--clc-transition), border-radius var(--clc-transition);
}
.clc-fabmenu > .clc-toggle-button:not(.clc-state-disabled).clc-state-active {
  border-radius: var(--clc-fab-active-border-radius);
  transition: transform var(--clc-transition), border-radius var(--clc-transition);
}

@keyframes clc-fab-expand {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.clc-fabmenu-items {
  position: absolute;
}
.clc-fabmenu-items .clc-button {
  opacity: 0;
  transform: scale(0);
}
.clc-fabmenu-items.clc-open .clc-button {
  animation: clc-fab-expand 0.25s ease forwards;
}
.clc-fabmenu-items.clc-open .clc-button:nth-child(1) {
  animation-delay: 0.05s;
}
.clc-fabmenu-items.clc-open .clc-button:nth-child(2) {
  animation-delay: 0.15s;
}
.clc-fabmenu-items.clc-open .clc-button:nth-child(3) {
  animation-delay: 0.25s;
}
.clc-fabmenu-items.clc-open .clc-button:nth-child(4) {
  animation-delay: 0.35s;
}
.clc-fabmenu-items.clc-open .clc-button:nth-child(5) {
  animation-delay: 0.45s;
}
.clc-fabmenu-items.clc-open .clc-button:nth-child(6) {
  animation-delay: 0.55s;
}
.clc-fabmenu-items.clc-fabmenu-direction-top {
  inset-block-end: calc(100% + var(--clc-fabmenu-offset));
  inset-inline-end: 0;
}
.clc-fabmenu-items.clc-fabmenu-direction-bottom {
  inset-block-start: calc(100% + var(--clc-fabmenu-offset));
  inset-inline-end: 0;
}
.clc-fabmenu-items.clc-fabmenu-direction-left {
  right: calc(100% + var(--clc-fabmenu-offset));
  inset-block-end: 0;
}
.clc-fabmenu-items.clc-fabmenu-direction-right {
  left: calc(100% + var(--clc-fabmenu-offset));
  inset-block-end: 0;
}
.clc-fabmenu-items.clc-fabmenu-direction-start {
  inset-inline-end: calc(100% + var(--clc-fabmenu-offset));
  inset-block-end: 0;
}
.clc-fabmenu-items.clc-fabmenu-direction-end {
  inset-inline-start: calc(100% + var(--clc-fabmenu-offset));
  inset-block-end: 0;
}

.clc-pivot-data-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  border: var(--clc-grid-cell-border);
  border-radius: var(--clc-grid-border-radius);
  background-color: var(--clc-grid-background-color);
  color: var(--clc-grid-cell-color);
  font-family: var(--clc-text-font-family);
  font-size: var(--clc-grid-cell-font-size);
  --clc-grid-header-cell-border: var(--clc-grid-header-cell-border-bottom);
}
.clc-pivot-data-grid .clc-pivot-content {
  flex: 1;
  overflow: auto;
  position: relative;
}
.clc-pivot-data-grid .clc-pivot-table-container {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  --clc-pivot-row-header-width: 140px;
}
.clc-pivot-data-grid .clc-pivot-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  background-color: var(--clc-grid-background-color);
}
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-default .clc-pivot-corner-cell,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-default .clc-pivot-column-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-default .clc-pivot-value-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-default .clc-pivot-row-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-default .clc-pivot-aggregate-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-default .clc-pivot-value-cell,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-default .clc-pivot-total-cell {
  border: var(--clc-grid-cell-border);
}
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-horizontal .clc-pivot-corner-cell,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-horizontal .clc-pivot-column-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-horizontal .clc-pivot-value-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-horizontal .clc-pivot-row-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-horizontal .clc-pivot-aggregate-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-horizontal .clc-pivot-value-cell,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-horizontal .clc-pivot-total-cell {
  border-bottom: var(--clc-grid-bottom-cell-border);
}
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-vertical .clc-pivot-corner-cell,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-vertical .clc-pivot-column-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-vertical .clc-pivot-value-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-vertical .clc-pivot-row-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-vertical .clc-pivot-aggregate-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-vertical .clc-pivot-value-cell,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-vertical .clc-pivot-total-cell {
  border-right: var(--clc-grid-right-cell-border);
}
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-none .clc-pivot-corner-cell,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-none .clc-pivot-column-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-none .clc-pivot-value-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-none .clc-pivot-row-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-none .clc-pivot-aggregate-header,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-none .clc-pivot-value-cell,
.clc-pivot-data-grid .clc-pivot-table.clc-grid-gridlines-none .clc-pivot-total-cell {
  border: none;
}
.clc-pivot-data-grid .clc-pivot-table.clc-grid-table-striped .clc-pivot-row:nth-child(even) {
  background-color: var(--clc-grid-stripe-background-color);
}
.clc-pivot-data-grid .clc-pivot-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--clc-grid-background-color);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-corner-cell {
  padding: var(--clc-grid-header-cell-padding);
  font-weight: var(--clc-grid-header-font-weight);
  text-align: center;
  background-color: var(--clc-grid-header-background-color);
  color: var(--clc-grid-header-color);
  position: sticky;
  left: 0;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: var(--clc-grid-header-cell-border);
  min-width: 140px;
  font-size: var(--clc-grid-header-font-size);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-corner-cell .clc-pivot-corner-title {
  font-size: var(--clc-grid-header-font-size);
  font-weight: var(--clc-grid-header-font-weight);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header {
  padding: var(--clc-grid-header-cell-padding);
  font-weight: var(--clc-grid-header-font-weight);
  text-align: center;
  background-color: var(--clc-grid-header-background-color);
  color: var(--clc-grid-header-color);
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 120px;
  font-size: var(--clc-grid-header-font-size);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-drill-down-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0;
  padding-inline: var(--clc-grid-header-title-padding-inline);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-drill-down-header .clc-pivot-drill-down-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  color: var(--clc-grid-header-color);
  font-size: 0.875rem;
  transition: background-color 0.2s ease;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-drill-down-header .clc-pivot-drill-down-button:hover {
  background-color: var(--clc-grid-header-sorted-background-color);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-drill-down-header .clc-pivot-drill-down-button:focus {
  outline: 2px solid var(--clc-focus-outline-color);
  outline-offset: 2px;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-drill-down-header .clc-pivot-header-text {
  flex: 1;
  text-align: start;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  height: 100%;
  padding: 0;
  position: relative;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content-wrapper .clc-pivot-header-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  flex: 1;
  height: 100%;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content-wrapper .clc-pivot-header-content.clc-sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content-wrapper .clc-pivot-header-content.clc-sortable:hover {
  background-color: var(--clc-grid-header-sorted-background-color);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content-wrapper .clc-pivot-header-content.clc-sortable:focus {
  outline: 2px solid var(--clc-focus-outline-color);
  outline-offset: 2px;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content-wrapper .clc-pivot-header-content.clc-sortable .clc-pivot-header-text {
  flex: initial;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content-wrapper .clc-pivot-header-content .clc-pivot-header-text {
  flex: 1;
  text-align: start;
  padding-inline: var(--clc-grid-header-title-padding-inline);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content-wrapper .clc-pivot-header-content .clc-sortable-column-icon {
  color: var(--clc-grid-header-color);
  opacity: 0.7;
  transition: opacity var(--clc-transition);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content-wrapper .clc-pivot-header-content .clc-sortable-column-icon.clci-sort-asc, .clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content-wrapper .clc-pivot-header-content .clc-sortable-column-icon.clci-sort-desc {
  opacity: 1;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content-wrapper .clc-grid-filter-icon {
  color: var(--clc-grid-header-color);
  opacity: 0.7;
  cursor: pointer;
  transition: var(--clc-transition-all);
  display: flex;
  align-items: center;
  justify-content: center;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content-wrapper .clc-grid-filter-icon:hover {
  opacity: 1;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content-wrapper .clc-grid-filter-icon.clc-grid-filter-active {
  opacity: 1;
  color: var(--clc-primary-color);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header.clc-sortable-column .clc-pivot-header-content {
  cursor: pointer;
  user-select: none;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header {
  padding: var(--clc-grid-header-cell-padding);
  font-weight: var(--clc-grid-header-font-weight);
  text-align: center;
  background-color: var(--clc-grid-header-background-color);
  color: var(--clc-grid-header-color);
  position: sticky;
  z-index: 4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: var(--clc-pivot-row-header-width, 140px);
  font-size: var(--clc-grid-header-font-size);
  vertical-align: bottom;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-drill-down-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-drill-down-header .clc-pivot-drill-down-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  color: var(--clc-grid-header-color);
  font-size: 0.875rem;
  transition: background-color 0.2s ease;
  min-width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-drill-down-header .clc-pivot-drill-down-button:hover {
  background-color: var(--clc-grid-header-sorted-background-color);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-drill-down-header .clc-pivot-drill-down-button:focus {
  outline: 2px solid var(--clc-focus-outline-color);
  outline-offset: 2px;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-drill-down-header .clc-pivot-header-text {
  flex: 1;
  text-align: start;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  height: 100%;
  padding: 0;
  position: relative;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content-wrapper .clc-pivot-header-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  flex: 1;
  height: 100%;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content-wrapper .clc-pivot-header-content.clc-sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content-wrapper .clc-pivot-header-content.clc-sortable:hover {
  background-color: var(--clc-grid-header-sorted-background-color);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content-wrapper .clc-pivot-header-content.clc-sortable:focus {
  outline: 2px solid var(--clc-focus-outline-color);
  outline-offset: 2px;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content-wrapper .clc-pivot-header-content.clc-sortable .clc-pivot-header-text {
  flex: initial;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content-wrapper .clc-pivot-header-content .clc-pivot-header-text {
  flex: 1;
  text-align: start;
  padding-inline: var(--clc-grid-header-title-padding-inline);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content-wrapper .clc-pivot-header-content .clc-sortable-column-icon {
  color: var(--clc-grid-header-color);
  opacity: 0.7;
  transition: opacity var(--clc-transition);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content-wrapper .clc-pivot-header-content .clc-sortable-column-icon.clci-sort-asc, .clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content-wrapper .clc-pivot-header-content .clc-sortable-column-icon.clci-sort-desc {
  opacity: 1;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content-wrapper .clc-grid-filter-icon {
  color: var(--clc-grid-header-color);
  opacity: 0.7;
  cursor: pointer;
  transition: var(--clc-transition-all);
  display: flex;
  align-items: center;
  justify-content: center;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content-wrapper .clc-grid-filter-icon:hover {
  opacity: 1;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content-wrapper .clc-grid-filter-icon.clc-grid-filter-active {
  opacity: 1;
  color: var(--clc-primary-color);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content.clc-sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content.clc-sortable:hover {
  background-color: var(--clc-grid-header-sorted-background-color);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content.clc-sortable:focus {
  outline: 2px solid var(--clc-focus-outline-color);
  outline-offset: 2px;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content.clc-sortable .clc-pivot-header-text {
  flex: initial;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content .clc-pivot-header-text {
  flex: 1;
  text-align: start;
  padding-inline: var(--clc-grid-header-title-padding-inline);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content .clc-sortable-column-icon {
  color: var(--clc-grid-header-color);
  opacity: 0.7;
  transition: opacity var(--clc-transition);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content .clc-sortable-column-icon.clci-sort-asc, .clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content .clc-sortable-column-icon.clci-sort-desc {
  opacity: 1;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header.clc-sortable-column .clc-pivot-header-content {
  cursor: pointer;
  user-select: none;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-total-header {
  padding: var(--clc-grid-header-cell-padding);
  padding-inline: var(--clc-grid-header-title-padding-inline);
  font-weight: var(--clc-grid-header-font-weight);
  text-align: start;
  background-color: var(--clc-grid-header-background-color);
  color: var(--clc-grid-header-color);
  position: sticky;
  z-index: 4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: var(--clc-grid-header-cell-border);
  min-width: 120px;
  font-size: var(--clc-grid-header-font-size);
  vertical-align: bottom;
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-header-row .clc-pivot-aggregate-header {
  padding: var(--clc-grid-cell-padding);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-value-headers .clc-pivot-value-header {
  padding: var(--clc-grid-header-cell-padding);
  font-weight: var(--clc-grid-header-font-weight);
  text-align: center;
  background-color: var(--clc-grid-header-background-color);
  color: var(--clc-grid-header-color);
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: var(--clc-grid-header-cell-border);
  min-width: 100px;
  font-size: var(--clc-grid-header-font-size);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-value-headers .clc-pivot-value-header .clc-pivot-value-title {
  font-size: var(--clc-grid-header-font-size);
  font-weight: var(--clc-grid-header-font-weight);
  margin-bottom: 0.25rem;
  color: var(--clc-grid-header-color);
}
.clc-pivot-data-grid .clc-pivot-header .clc-pivot-value-headers .clc-pivot-value-header .clc-pivot-aggregate-type {
  font-size: 0.75rem;
  color: var(--clc-text-secondary-color);
  font-style: italic;
}
.clc-pivot-data-grid .clc-pivot-content .clc-pivot-body .clc-pivot-row:hover {
  background-color: var(--clc-grid-hover-background-color);
}
.clc-pivot-data-grid .clc-pivot-content .clc-pivot-body .clc-pivot-row .clc-pivot-row-header {
  padding: var(--clc-grid-cell-padding);
  font-weight: 500;
  text-align: start;
  background-color: var(--clc-grid-header-background-color);
  color: var(--clc-grid-header-color);
  position: sticky;
  z-index: 2;
  min-width: var(--clc-pivot-row-header-width, 140px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.clc-pivot-data-grid .clc-pivot-content .clc-pivot-body .clc-pivot-row .clc-pivot-row-header .clc-pivot-drill-down-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}
.clc-pivot-data-grid .clc-pivot-content .clc-pivot-body .clc-pivot-row .clc-pivot-row-header .clc-pivot-drill-down-header .clc-pivot-drill-down-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  color: var(--clc-grid-header-color);
  font-size: 0.875rem;
  transition: background-color 0.2s ease;
  min-width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clc-pivot-data-grid .clc-pivot-content .clc-pivot-body .clc-pivot-row .clc-pivot-row-header .clc-pivot-drill-down-header .clc-pivot-drill-down-button:hover {
  background-color: var(--clc-grid-header-sorted-background-color);
}
.clc-pivot-data-grid .clc-pivot-content .clc-pivot-body .clc-pivot-row .clc-pivot-row-header .clc-pivot-drill-down-header .clc-pivot-drill-down-button:focus {
  outline: 2px solid var(--clc-focus-outline-color);
  outline-offset: 2px;
}
.clc-pivot-data-grid .clc-pivot-content .clc-pivot-body .clc-pivot-row .clc-pivot-row-header .clc-pivot-drill-down-header .clc-pivot-header-text {
  flex: 1;
  text-align: start;
}
.clc-pivot-data-grid .clc-pivot-content .clc-pivot-body .clc-pivot-row .clc-pivot-value-cell {
  padding: var(--clc-grid-cell-padding);
  min-width: 100px;
  text-align: right;
  color: var(--clc-grid-cell-color);
  background-color: var(--clc-grid-background-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clc-pivot-data-grid .clc-pivot-content .clc-pivot-body .clc-pivot-row .clc-pivot-total-cell {
  padding: var(--clc-grid-cell-padding);
  min-width: 120px;
  text-align: right;
  background-color: var(--clc-grid-header-background-color);
  color: var(--clc-grid-header-color);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clc-pivot-data-grid .clc-pivot-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background-color: var(--clc-grid-foot-background-color);
}
.clc-pivot-data-grid .clc-pivot-footer .clc-pivot-footer-row .clc-pivot-footer-header {
  padding: var(--clc-grid-cell-padding);
  font-weight: 600;
  text-align: start;
  background-color: var(--clc-grid-header-background-color);
  color: var(--clc-grid-header-color);
  position: sticky;
  z-index: 4;
  min-width: var(--clc-pivot-row-header-width, 140px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clc-pivot-data-grid .clc-pivot-footer .clc-pivot-footer-row .clc-pivot-footer-cell {
  padding: var(--clc-grid-cell-padding);
  font-weight: 600;
  text-align: right;
  background-color: var(--clc-grid-foot-background-color);
  color: var(--clc-grid-foot-cell-color);
  border: var(--clc-grid-cell-border);
  font-size: var(--clc-grid-cell-font-size);
}
.clc-pivot-data-grid .clc-pivot-footer .clc-pivot-footer-row .clc-pivot-footer-cell:first-child {
  text-align: start;
  border-right: 2px solid var(--clc-grid-cell-border);
  background-color: var(--clc-grid-header-background-color);
  color: var(--clc-grid-header-color);
}
.clc-pivot-data-grid .clc-pivot-footer .clc-pivot-footer-row .clc-pivot-footer-cell:hover {
  background-color: var(--clc-grid-hover-background-color);
}
.clc-pivot-data-grid .clc-pivot-footer .clc-pivot-footer-row .clc-pivot-footer-total {
  padding: var(--clc-grid-cell-padding);
  font-weight: 600;
  text-align: right;
  background-color: var(--clc-grid-header-background-color);
  color: var(--clc-grid-header-color);
  border: var(--clc-grid-cell-border);
  font-size: var(--clc-grid-cell-font-size);
  position: sticky;
  z-index: 4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clc-pivot-data-grid .clc-pivot-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: var(--clc-text-secondary-color);
  font-style: italic;
  min-height: 200px;
  background-color: var(--clc-grid-background-color);
  border-radius: var(--clc-grid-border-radius);
  margin: 0.5rem;
}
@media (max-width: 768px) {
  .clc-pivot-data-grid .clc-pivot-table {
    font-size: var(--clc-grid-cell-font-size);
  }
  .clc-pivot-data-grid .clc-pivot-table .clc-pivot-corner-cell,
  .clc-pivot-data-grid .clc-pivot-table .clc-pivot-column-header,
  .clc-pivot-data-grid .clc-pivot-table .clc-pivot-value-header,
  .clc-pivot-data-grid .clc-pivot-table .clc-pivot-row-header,
  .clc-pivot-data-grid .clc-pivot-table .clc-pivot-value-cell,
  .clc-pivot-data-grid .clc-pivot-table .clc-pivot-total-cell {
    padding: var(--clc-grid-cell-padding);
    min-width: 80px;
  }
}
.clc-pivot-data-grid .clc-panel {
  box-shadow: none;
  border-bottom: var(--clc-grid-cell-border);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.clc-pivot-data-grid .clc-panel .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header,
.clc-pivot-data-grid .clc-panel .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header {
  padding: 0;
}
.clc-pivot-data-grid .clc-panel .clc-pivot-header .clc-pivot-header-row .clc-pivot-column-header .clc-pivot-header-content,
.clc-pivot-data-grid .clc-panel .clc-pivot-header .clc-pivot-header-row .clc-pivot-row-header .clc-pivot-header-content {
  padding: var(--clc-grid-header-cell-padding);
}
.clc-pivot-data-grid .clc-panel-titlebar {
  justify-content: initial;
  align-items: center;
  gap: 0.5rem;
}
.clc-pivot-data-grid .clc-panel-titlebar .clc-panel-titlebar-toggler {
  order: -1;
}

.clc-pivot-data-grid.clc-density-compact .clc-pivot-content .clc-pivot-table .clc-pivot-header-cell,
.clc-pivot-data-grid.clc-density-compact .clc-pivot-content .clc-pivot-table .clc-pivot-cell,
.clc-pivot-data-grid.clc-density-compact .clc-pivot-content .clc-pivot-table .clc-pivot-row-header,
.clc-pivot-data-grid.clc-density-compact .clc-pivot-content .clc-pivot-table .clc-pivot-footer-cell,
.clc-pivot-data-grid.clc-density-compact .clc-pivot-content .clc-pivot-table .clc-pivot-total-cell {
  padding: var(--clc-grid-cell-padding);
}

.clc-pivot-data-grid.clc-has-height .clc-pivot-content .clc-pivot-table-container {
  overflow: auto;
}

.clc-pivot-data-grid.clc-pivot-datatable-scrollable .clc-pivot-content .clc-pivot-table-container {
  overflow: auto;
}

.clc-pivot-table {
  table-layout: fixed;
}
.clc-pivot-table .clc-frozen-cell {
  position: -webkit-sticky;
  position: sticky;
}
.clc-pivot-table .clc-frozen-cell-left,
.clc-pivot-table .clc-frozen-cell-right,
.clc-pivot-table .clc-frozen-cell-left-inner,
.clc-pivot-table .clc-frozen-cell-right-inner {
  background: var(--clc-grid-frozen-cell-background-color);
  z-index: 1;
}
.clc-pivot-table .clc-frozen-cell-left.clc-frozen-cell-left-end {
  box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12);
  border-inline-end: var(--clc-grid-frozen-cell-border) !important;
}
*[dir=rtl] .clc-pivot-table .clc-frozen-cell-left.clc-frozen-cell-left-end {
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12);
}
.clc-pivot-table .clc-frozen-cell-right.clc-frozen-cell-right-end {
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12);
  border-inline-start: var(--clc-grid-frozen-cell-border) !important;
}
*[dir=rtl] .clc-pivot-table .clc-frozen-cell-right.clc-frozen-cell-right-end {
  box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12);
}
.clc-pivot-table .clc-frozen-cell-left-inner,
.clc-pivot-table .clc-frozen-cell-right-inner {
  border-inline-end: var(--clc-grid-frozen-cell-border) !important;
  border-inline-start: var(--clc-grid-frozen-cell-border) !important;
}

.clc-spreadsheet {
  display: flex;
  flex-direction: column;
  border: var(--clc-spreadsheet-cell-border);
  outline: none;
  position: relative;
}
.clc-spreadsheet .clc-tabview-nav {
  background-color: var(--clc-tabs-tab-background-color);
}
.clc-spreadsheet .clc-tabview {
  --clc-tabs-tab-padding-block: 0.25rem;
  --clc-tabs-tab-padding-inline: 0.5rem;
  --clc-tabs-tab-font-size: var(--clc-spreadsheet-tab-font-size);
}
.clc-spreadsheet .clc-tabview-panels {
  border: none;
}
.clc-spreadsheet .clc-tabview-panel {
  padding: 0.25rem;
}

.clc-spreadsheet-table-design {
  overflow-y: hidden;
}
.clc-spreadsheet-table-design .clc-label {
  font-size: var(--clc-input-font-size-sm);
}

.clc-virtual-grid {
  position: relative;
  overflow: hidden;
}

.clc-virtual-grid-content {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  z-index: 1;
  overflow: hidden;
}

.clc-virtual-grid-scroller {
  overflow: scroll;
  position: absolute;
  width: 100%;
  height: 100%;
}

.clc-spreadsheet-formula-editor {
  padding: 0 0.25rem 0.25rem;
  border-bottom: var(--clc-spreadsheet-cell-border);
}
.clc-spreadsheet-formula-editor .clc-spreadsheet-editor {
  border-radius: var(--clc-input-border-radius);
}
.clc-spreadsheet-formula-editor .clc-spreadsheet-editor::before {
  content: "function";
  font-family: var(--clc-icon-font-family);
  font-size: 1rem;
  font-weight: 300;
  position: absolute;
  inset-inline-start: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clc-text-tertiary-color);
  pointer-events: none;
  z-index: 1;
}
.clc-spreadsheet-formula-editor .clc-spreadsheet-editor-input,
.clc-spreadsheet-formula-editor .clc-spreadsheet-editor-highlight {
  min-height: 1.425rem;
  padding: 0.125rem;
  padding-inline-start: 1.5rem;
}

.clc-spreadsheet-cell {
  position: absolute;
  isolation: isolate;
  border-inline-end: var(--clc-spreadsheet-cell-border);
  border-bottom: var(--clc-spreadsheet-cell-border);
  cursor: cell;
  font-size: 0.75rem;
  padding: 0.125rem;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  background: var(--clc-base-background-color);
  user-select: none;
  -webkit-user-select: none;
}

.clc-spreadsheet-selection-cell {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.2);
}

.clc-spreadsheet-selection-cell-top {
  border-top: 2px solid var(--clc-primary);
}

.clc-spreadsheet-selection-cell-right {
  border-inline-end: 2px solid var(--clc-primary);
}

.clc-spreadsheet-selection-cell-bottom {
  border-bottom: 2px solid var(--clc-primary);
}

.clc-spreadsheet-selection-cell-left {
  border-inline-start: 2px solid var(--clc-primary);
}

.clc-spreadsheet-selection-range {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  background: var(--clc-primary-lighter);
  z-index: 2;
}

.clc-spreadsheet-selection-range-top {
  border-top: 2px solid var(--clc-primary);
}

.clc-spreadsheet-selection-range-right {
  border-inline-end: 2px solid var(--clc-primary);
}

.clc-spreadsheet-selection-range-bottom {
  border-bottom: 2px solid var(--clc-primary);
}

.clc-spreadsheet-selection-range-left {
  border-inline-start: 2px solid var(--clc-primary);
}

.clc-spreadsheet-selection-range-mask {
  mask-repeat: no-repeat;
  mask-image: linear-gradient(black, black), linear-gradient(white, white);
  mask-composite: exclude;
  mask-repeat: no-repeat;
  mask-size: 100% 100%, var(--clc-spreadsheet-mask-w) var(--clc-spreadsheet-mask-h);
  mask-position: 0 0, var(--clc-spreadsheet-mask-x) var(--clc-spreadsheet-mask-y);
}

[dir=rtl] .clc-spreadsheet-selection-range-mask {
  mask-position: 0 0, right var(--clc-spreadsheet-mask-x) top var(--clc-spreadsheet-mask-y);
}

.clc-spreadsheet-autofill-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--clc-primary);
  border: 1px solid var(--clc-base-background-color);
  box-sizing: border-box;
  cursor: crosshair;
  z-index: 1;
  pointer-events: auto;
}

.clc-spreadsheet-autofill-range {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  background: var(--clc-primary-lighter);
  z-index: 1;
}

.clc-spreadsheet-autofill-range-top {
  border-top: 2px dashed var(--clc-primary);
}

.clc-spreadsheet-autofill-range-right {
  border-inline-end: 2px dashed var(--clc-primary);
}

.clc-spreadsheet-autofill-range-bottom {
  border-bottom: 2px dashed var(--clc-primary);
}

.clc-spreadsheet-autofill-range-left {
  border-inline-start: 2px dashed var(--clc-primary);
}

.clc-spreadsheet-autofill-handle.clc-spreadsheet-frozen-row,
.clc-spreadsheet-autofill-handle.clc-spreadsheet-frozen-column {
  z-index: 3;
}

.clc-spreadsheet-autofill-handle.clc-spreadsheet-frozen-row.clc-spreadsheet-frozen-column {
  z-index: 4;
}

.clc-spreadsheet-autofill-range.clc-spreadsheet-frozen-row,
.clc-spreadsheet-autofill-range.clc-spreadsheet-frozen-column {
  z-index: 3;
}

.clc-spreadsheet-autofill-range.clc-spreadsheet-frozen-row.clc-spreadsheet-frozen-column {
  z-index: 4;
}

.clc-spreadsheet-column-header, .clc-spreadsheet-corner-header, .clc-spreadsheet-row-header {
  text-align: center;
  position: absolute;
  box-sizing: border-box;
  background: var(--clc-spreadsheet-header-background-color);
  border-inline-end: var(--clc-spreadsheet-cell-border);
  border-bottom: var(--clc-spreadsheet-cell-border);
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.125rem;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
}

.clc-spreadsheet-column-header {
  cursor: s-resize;
}

.clc-spreadsheet-row-header {
  cursor: e-resize;
}

.clc-spreadsheet-header-active {
  background: var(--clc-spreadsheet-header-active-background-color);
}

.clc-spreadsheet-header-selected {
  background: var(--clc-primary);
  color: var(--clc-on-primary);
}

.clc-spreadsheet-cell-editor {
  position: absolute;
  z-index: 1;
  background: var(--clc-base-background-color);
}

.clc-spreadsheet-cell-editor .clc-spreadsheet-editor {
  border: 2px solid var(--clc-primary);
}

.clc-spreadsheet-cell-editor .clc-spreadsheet-editor-input {
  outline: none;
}

.clc-spreadsheet-editor {
  position: relative;
  border: var(--clc-input-border);
  font-size: 0.8rem;
  min-width: fit-content;
  min-height: 100%;
  box-sizing: border-box;
  background-color: var(--clc-base-background-color);
  transition: var(--clc-input-transition);
}
.clc-spreadsheet-editor:hover {
  border: var(--clc-input-hover-border);
  background-color: var(--clc-input-hover-background-color);
}
.clc-spreadsheet-editor:focus-within {
  border: var(--clc-input-focus-border);
  background-color: var(--clc-input-focus-background-color);
  outline: var(--clc-input-focus-outline);
  outline-offset: var(--clc-input-focus-outline-offset);
}

.clc-spreadsheet-editor-input {
  color: transparent;
  caret-color: var(--clc-text-color);
  outline: none;
}

.clc-spreadsheet-editor-highlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  color: var(--clc-cell-color, inherit);
}

.clc-number-highlight {
  color: var(--clc-cell-color, #098658);
  font-weight: 500;
}

.clc-string-highlight {
  color: #a31515;
}

.clc-cell-highlight {
  font-weight: 500;
}

.clc-function-highlight {
  color: #795e26;
  font-weight: 500;
}

.clc-operator-highlight {
  color: var(--clc-cell-color, var(--clc-text-color));
  font-weight: 500;
}

.clc-default-highlight {
  color: var(--clc-cell-color, var(--clc-text-color));
}

.clc-spreadsheet-highlight-popup {
  display: none;
  position: absolute;
  width: 300px;
  overflow: auto;
  box-sizing: content-box;
}
.clc-spreadsheet-highlight-popup .clc-autocomplete-items {
  max-height: min(240px, 40vh);
  overflow-y: auto;
}

.clc-spreadsheet-frozen-row {
  z-index: 2;
}

.clc-spreadsheet-frozen-column {
  z-index: 2;
}

.clc-spreadsheet-frozen-row.clc-spreadsheet-frozen-column {
  z-index: 3;
}

.clc-spreadsheet-corner-header {
  z-index: 10;
}

.clc-spreadsheet-column-header.clc-spreadsheet-frozen-column,
.clc-spreadsheet-row-header.clc-spreadsheet-frozen-row {
  z-index: 4;
}

.clc-spreadsheet-selection-cell {
  z-index: 1;
}

.clc-spreadsheet-selection-range {
  z-index: 1;
}

.clc-spreadsheet-selection-cell.clc-spreadsheet-frozen-row,
.clc-spreadsheet-selection-cell.clc-spreadsheet-frozen-column {
  z-index: 3;
}

.clc-spreadsheet-selection-range.clc-spreadsheet-frozen-row,
.clc-spreadsheet-selection-range.clc-spreadsheet-frozen-column {
  z-index: 3;
}

.clc-spreadsheet-selection-cell.clc-spreadsheet-frozen-row.clc-spreadsheet-frozen-column,
.clc-spreadsheet-selection-range.clc-spreadsheet-frozen-row.clc-spreadsheet-frozen-column {
  z-index: 4;
  z-index: 4;
}

.clc-spreadsheet-cell-editor.clc-spreadsheet-frozen-row,
.clc-spreadsheet-cell-editor.clc-spreadsheet-frozen-column {
  z-index: 3;
}

.clc-spreadsheet-cell-editor.clc-spreadsheet-frozen-row.clc-spreadsheet-frozen-column {
  z-index: 4;
}

.clc-spreadsheet-input-prompt {
  position: absolute;
  z-index: 1;
  background: var(--clc-warning-lighter);
  border: var(--clc-spreadsheet-cell-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
  max-width: 250px;
  font-size: 0.85rem;
  pointer-events: none;
  border-radius: var(--clc-border-radius);
}

.clc-spreadsheet-input-prompt-title {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.clc-spreadsheet-input-prompt.clc-spreadsheet-frozen-row,
.clc-spreadsheet-input-prompt.clc-spreadsheet-frozen-column {
  z-index: 3;
}

.clc-spreadsheet-input-prompt.clc-spreadsheet-frozen-row.clc-spreadsheet-frozen-column {
  z-index: 4;
}

.clc-spreadsheet-validation-error {
  position: absolute;
  z-index: 1;
  background: var(--clc-danger-lighter);
  border: 1px solid var(--clc-danger);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
  max-width: 300px;
  font-size: 0.85rem;
  pointer-events: none;
  border-radius: var(--clc-border-radius);
}

.clc-spreadsheet-validation-error-message {
  color: var(--clc-danger);
}

.clc-spreadsheet-validation-error.clc-spreadsheet-frozen-row,
.clc-spreadsheet-validation-error.clc-spreadsheet-frozen-column {
  z-index: 3;
}

.clc-spreadsheet-validation-error.clc-spreadsheet-frozen-row.clc-spreadsheet-frozen-column {
  z-index: 4;
}

.clc-spreadsheet-horizontal-splitter,
.clc-spreadsheet-vertical-splitter {
  position: absolute;
  background-color: var(--clc-spreadsheet-splitter-background-color);
  z-index: 6;
}

.clc-spreadsheet-table-frame {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.clc-spreadsheet-table-frame-top {
  border-top: 1px solid var(--clc-text-color);
}

.clc-spreadsheet-table-frame-left {
  border-inline-start: 1px solid var(--clc-text-color);
}

.clc-spreadsheet-table-frame-right {
  border-inline-end: 1px solid var(--clc-text-color);
}

.clc-spreadsheet-table-frame-bottom {
  border-bottom: 1px solid var(--clc-text-color);
}

.clc-spreadsheet-table-frame.clc-spreadsheet-frozen-row,
.clc-spreadsheet-table-frame.clc-spreadsheet-frozen-column {
  z-index: 3;
}

.clc-spreadsheet-selection-cell.clc-spreadsheet-frozen-row.clc-spreadsheet-frozen-column,
.clc-spreadsheet-table-frame.clc-spreadsheet-frozen-row.clc-spreadsheet-frozen-column {
  z-index: 4;
  z-index: 4;
}

.clc-spreadsheet-column-resize-handle,
.clc-spreadsheet-row-resize-handle {
  position: absolute;
  z-index: 5;
}
.clc-spreadsheet-column-resize-handle:hover,
.clc-spreadsheet-row-resize-handle:hover {
  background-color: var(--clc-primary);
}

.clc-spreadsheet-column-resize-handle {
  width: 5px;
  cursor: ew-resize;
  transform: translateX(-50%);
}

.clc-spreadsheet-row-resize-handle {
  height: 5px;
  cursor: ns-resize;
  transform: translateY(-50%);
}

.clc-spreadsheet-cell-chevron {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  border-radius: 0;
  padding: 0 !important;
}

.clc-spreadsheet-cell-popup {
  display: none;
  position: absolute;
  overflow: hidden;
  width: 300px;
  padding: 0 var(--clc-dropdown-horizontal-padding);
  background: var(--clc-base-background-color);
  border: var(--clc-border-normal);
  border-radius: var(--clc-border-radius);
  box-shadow: var(--clc-dropdown-panel-shadow);
}

.clc-menu.clc-spreadsheet-cell-menu {
  --clc-menu-item-padding-block: var(--clc-input-padding-block-sm);
  --clc-menu-item-padding-inline: var(--clc-input-padding-inline-sm);
  font-size: var(--clc-input-font-size-sm);
  margin-inline: calc(-1 * var(--clc-dropdown-horizontal-padding));
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.clc-menu.clc-spreadsheet-cell-menu .clc-navigation-item-icon {
  font-size: 1rem;
}

.clc-spreadsheet-cell-menu-filter {
  max-height: min(200px, 40vh);
  overflow-y: auto;
  padding: calc(var(--clc-dialog-content-padding) - max(var(--clc-context-menu-padding-block), var(--clc-context-menu-padding-inline)));
  border-top: var(--clc-border-normal);
  margin-top: 0.5rem;
}

.clc-spreadsheet-cell-menu-filter .clc-navigation-item {
  padding-block: 0.25rem;
}

.clc-spreadsheet-cell-menu-filter .clc-chkbox {
  margin-inline-end: calc(1.5rem - var(--clc-checkbox-width));
}

.clc-spreadsheet-cell-menu-buttons {
  padding: calc(var(--clc-dialog-content-padding) - max(var(--clc-context-menu-padding-block), var(--clc-context-menu-padding-inline)));
  margin-bottom: calc(-1 * var(--clc-context-menu-padding-block));
  border-top: var(--clc-border-normal);
}
.clc-spreadsheet-cell-menu-buttons .clc-button {
  flex: 1;
}

.clc-spreadsheet-cell-hyperlink {
  color: var(--clc-link-color);
  text-decoration: var(--clc-link-text-decoration);
  cursor: pointer;
}
.clc-spreadsheet-cell-hyperlink:hover {
  color: var(--clc-link-hover-color);
  text-decoration: var(--clc-link-hover-text-decoration);
}
.clc-spreadsheet-cell-hyperlink:visited {
  color: #954F72;
}

.clc-spreadsheet-cell-invalid::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 0;
  height: 0;
  border-block-end: 6px solid transparent;
  border-inline-end: 6px solid var(--clc-danger);
}

.clc-spreadsheet-cell-number {
  text-align: end;
}

.clc-spreadsheet-cell-error {
  color: var(--clc-danger);
}

.clc-spreadsheet-cell-editor-number {
  text-align: end;
}

.clc-function-hint-name-active {
  font-weight: bold;
}

.clc-function-hint-parameter-active {
  font-weight: bold;
}

.clc-spreadsheet-image {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.clc-spreadsheet-image-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.clc-spreadsheet-image.clc-spreadsheet-frozen-row,
.clc-spreadsheet-image.clc-spreadsheet-frozen-column {
  z-index: 3;
}

.clc-spreadsheet-image.clc-spreadsheet-frozen-row.clc-spreadsheet-frozen-column {
  z-index: 4;
}

.clc-spreadsheet-image-container {
  position: absolute;
  overflow: hidden;
}
.clc-spreadsheet-image-container img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: auto;
  cursor: grab;
}
.clc-spreadsheet-image-container .clc-spreadsheet-selection-range {
  position: absolute;
  inset: 0;
}

.clc-spreadsheet-resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--clc-primary);
  border: 1px solid var(--clc-base-background-color);
  pointer-events: auto;
  z-index: 5;
}

.clc-spreadsheet-resize-nw {
  cursor: nwse-resize;
}

.clc-spreadsheet-resize-n {
  cursor: ns-resize;
}

.clc-spreadsheet-resize-ne {
  cursor: nesw-resize;
}

.clc-spreadsheet-resize-e {
  cursor: ew-resize;
}

.clc-spreadsheet-resize-se {
  cursor: nwse-resize;
}

.clc-spreadsheet-resize-s {
  cursor: ns-resize;
}

.clc-spreadsheet-resize-sw {
  cursor: nesw-resize;
}

.clc-spreadsheet-resize-w {
  cursor: ew-resize;
}

[dir=rtl] .clc-spreadsheet-resize-nw {
  cursor: nesw-resize;
}
[dir=rtl] .clc-spreadsheet-resize-ne {
  cursor: nwse-resize;
}
[dir=rtl] .clc-spreadsheet-resize-se {
  cursor: nesw-resize;
}
[dir=rtl] .clc-spreadsheet-resize-sw {
  cursor: nwse-resize;
}

.clc-spreadsheet-chart {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.clc-spreadsheet-chart-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.clc-spreadsheet-chart.clc-spreadsheet-frozen-row,
.clc-spreadsheet-chart.clc-spreadsheet-frozen-column {
  z-index: 3;
}

.clc-spreadsheet-chart.clc-spreadsheet-frozen-row.clc-spreadsheet-frozen-column {
  z-index: 4;
}

.clc-spreadsheet-chart-container {
  position: absolute;
  overflow: hidden;
  background: var(--clc-base-background-color);
  pointer-events: auto;
  cursor: grab;
}
.clc-spreadsheet-chart-container .clc-spreadsheet-selection-range {
  position: absolute;
  inset: 0;
}

.clc-spreadsheet-chart-unsupported {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--clc-base-200);
  color: var(--clc-text-disabled-color);
  font-size: 0.875rem;
}

.clc-spreadsheet-sheet-tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top: var(--clc-spreadsheet-cell-border);
}

.clc-spreadsheet-sheet-tabs .clc-tabview {
  flex: 1;
  min-width: 0;
}

.clc-spreadsheet-sheet-tabs .clc-tabview-panels {
  display: none;
}

.clc-spreadsheet-sheet-tabs .clc-tabview-nav {
  border: none;
}

.clc-spreadsheet-add-sheet {
  margin-inline: 4px;
  flex-shrink: 0;
}

.clc-range-picker {
  position: relative;
  display: inline-flex;
  width: 100%;
}
.clc-range-picker .clc-textbox {
  flex: 1;
}

.clc-range-picker-collapse {
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  width: 1.75rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--clc-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.clc-range-picker-collapse:hover {
  color: var(--clc-primary);
}
.clc-range-picker-collapse .clci {
  font-size: 0.875rem;
}

.clc-range-picker-bar {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  background: var(--clc-base-background-color);
  border: 1px solid var(--clc-primary);
  border-radius: var(--clc-border-radius);
  box-shadow: var(--clc-shadow-4);
  padding: 0.375rem 0.5rem;
  min-width: 280px;
  max-width: 480px;
  font-family: var(--clc-font-family);
  font-size: 0.875rem;
}
.clc-range-picker-bar .clc-range-picker-bar-value {
  flex: 1;
  color: var(--clc-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clc-spreadsheet-dialog-actions {
  margin-top: 0.5rem;
}
.clc-spreadsheet-dialog-actions .clc-button {
  min-width: 6rem;
}

.clc-spreadsheet-shortcuts-table {
  max-height: 60vh;
  overflow-y: auto;
}
.clc-spreadsheet-shortcuts-table .clc-grid-table td .clc-cell-data {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.clc-spreadsheet-shortcuts-table td:first-child {
  width: 1%;
}
.clc-spreadsheet-shortcuts-table .clc-badge {
  margin-inline-end: 0.25rem;
  white-space: nowrap;
}
.clc-spreadsheet-shortcuts-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--clc-base-background-color);
}

.clc-spreadsheet-copy-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  /* `linear` 가 아니라 `steps(8)` 인 이유 — background-position 은 페인트형이라
     연속 보간이면 마칭이 떠 있는 내내 초당 60+ 회 서브픽셀 재페인트가 돈다.
     패턴 주기가 8px 이므로 8 스텝이면 정확히 1px 씩 초당 8회만 다시 그리고,
     개미가 픽셀 정렬로 움직여 대시 경계도 더 또렷하다. */
}
.clc-spreadsheet-copy-overlay.clc-spreadsheet-frozen-row, .clc-spreadsheet-copy-overlay.clc-spreadsheet-frozen-column {
  z-index: 3;
}
.clc-spreadsheet-copy-overlay.clc-spreadsheet-frozen-row.clc-spreadsheet-frozen-column {
  z-index: 4;
}
.clc-spreadsheet-copy-overlay .clc-spreadsheet-copy-edge {
  position: absolute;
  will-change: background-position;
}
.clc-spreadsheet-copy-overlay .clc-spreadsheet-copy-edge-top, .clc-spreadsheet-copy-overlay .clc-spreadsheet-copy-edge-bottom {
  height: 2px;
  left: 0;
  right: 0;
  background: repeating-linear-gradient(to right, var(--clc-secondary) 0, var(--clc-secondary) 4px, transparent 4px, transparent 8px);
}
.clc-spreadsheet-copy-overlay .clc-spreadsheet-copy-edge-left, .clc-spreadsheet-copy-overlay .clc-spreadsheet-copy-edge-right {
  width: 2px;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(to bottom, var(--clc-secondary) 0, var(--clc-secondary) 4px, transparent 4px, transparent 8px);
}
.clc-spreadsheet-copy-overlay .clc-spreadsheet-copy-edge-top {
  top: -1px;
  animation: clc-spreadsheet-marching-x 1s steps(8) infinite;
}
.clc-spreadsheet-copy-overlay .clc-spreadsheet-copy-edge-bottom {
  bottom: -1px;
  animation: clc-spreadsheet-marching-x-reverse 1s steps(8) infinite;
}
.clc-spreadsheet-copy-overlay .clc-spreadsheet-copy-edge-left {
  left: -1px;
  animation: clc-spreadsheet-marching-y-reverse 1s steps(8) infinite;
}
.clc-spreadsheet-copy-overlay .clc-spreadsheet-copy-edge-right {
  right: -1px;
  animation: clc-spreadsheet-marching-y 1s steps(8) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .clc-spreadsheet-copy-overlay .clc-spreadsheet-copy-edge {
    animation: none !important;
  }
}

@keyframes clc-spreadsheet-marching-x {
  to {
    background-position: 8px 0;
  }
}
@keyframes clc-spreadsheet-marching-x-reverse {
  to {
    background-position: -8px 0;
  }
}
@keyframes clc-spreadsheet-marching-y {
  to {
    background-position: 0 8px;
  }
}
@keyframes clc-spreadsheet-marching-y-reverse {
  to {
    background-position: 0 -8px;
  }
}
.clc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
  --clc-selectbar-border-radius: var(--clc-border-radius);
  --clc-button-border-radius: var(--clc-border-radius);
}
.clc-toolbar .clc-dropdown {
  --clc-dropdown-open-border: var(--clc-border-focus);
}
.clc-toolbar .clc-button .clci {
  font-size: 1rem;
}
.clc-toolbar .clc-button .clc-button-text {
  font-size: 0.75rem;
}
.clc-toolbar .clc-selectbar.clc-selectbar-horizontal .clc-button {
  outline: none;
  border-radius: var(--clc-border-radius) !important;
}
.clc-toolbar .clc-selectbar.clc-selectbar-horizontal .clc-button:not(:first-child) {
  margin-inline-start: 0.125rem;
}
.clc-toolbar .clc-colorpicker {
  flex-direction: column;
  gap: 0;
  justify-content: center;
  border: 1px solid transparent;
  border-block-end: 1px solid transparent;
  box-shadow: none;
  background-color: transparent;
  --clc-colorpicker-panel-border: none;
}
.clc-toolbar .clc-colorpicker.clc-state-disabled {
  border: 1px solid transparent;
  border-block-end: 1px solid transparent;
}
.clc-toolbar .clc-colorpicker .clci {
  font-size: 0.875rem;
}
.clc-toolbar .clc-colorpicker .clc-colorpicker-value {
  height: 0.25rem;
  min-height: 0.25rem;
  max-height: 0.25rem;
  min-width: 1rem;
}

.clc-toolbar-separator {
  width: 1px;
  height: 1.25rem;
  margin-inline: 0.125rem;
  background-color: var(--clc-base-200);
}

.clc-editor-dropdown-panel {
  --clc-dropdown-panel-padding: 0;
}
.clc-editor-dropdown-panel h1, .clc-editor-dropdown-panel h2, .clc-editor-dropdown-panel h3, .clc-editor-dropdown-panel h4, .clc-editor-dropdown-panel h5, .clc-editor-dropdown-panel h6, .clc-editor-dropdown-panel p {
  margin: 0;
}

:root {
  /* Theme Colors */
  --clc-white: #ffffff;
  --clc-black: #000000;
  --clc-base: #dfe5ec;
  --clc-base-50: #f8fafb;
  --clc-base-100: #f3f6f9;
  --clc-base-200: #e3eaf2;
  --clc-base-300: #dfe5ec;
  --clc-base-400: #dbe0e6;
  --clc-base-500: #d7dbe0;
  --clc-base-600: #c6cbd2;
  --clc-base-700: #74787e;
  --clc-base-800: #45494f;
  --clc-base-900: #1b1d20;
  --clc-base-light: #f3f6f9;
  --clc-base-lighter: #ffffff;
  --clc-base-dark: #45494f;
  --clc-base-darker: #1b1d20;
  --clc-primary: #3481e5;
  --clc-primary-light: #bcd8ff;
  --clc-primary-lighter: rgba(0, 111, 255, 0.13);
  --clc-primary-dark: #375a8b;
  --clc-primary-darker: #00215d;
  --clc-secondary: #5b6371;
  --clc-secondary-light: #c2ccdc;
  --clc-secondary-lighter: rgba(0, 98, 255, 0.13);
  --clc-secondary-dark: #444c58;
  --clc-secondary-darker: #19202b;
  --clc-info: #085786;
  --clc-info-light: #aadaff;
  --clc-info-lighter: rgba(170, 218, 255, 0.5);
  --clc-info-dark: #086791;
  --clc-info-darker: #002d41;
  --clc-success: #3e9108;
  --clc-success-light: #c6ffaa;
  --clc-success-lighter: rgba(198, 255, 170, 0.5);
  --clc-success-dark: #479108;
  --clc-success-darker: #1e4100;
  --clc-warning: #e8e971;
  --clc-warning-light: #f9ffaa;
  --clc-warning-lighter: rgba(249, 255, 170, 0.5);
  --clc-warning-dark: #918908;
  --clc-warning-darker: #413d00;
  --clc-danger: #d35153;
  --clc-danger-light: #ffaeaa;
  --clc-danger-lighter: rgba(255, 174, 170, 0.5);
  --clc-danger-dark: #910813;
  --clc-danger-darker: #410005;
  --clc-on-base: #1b1d20;
  --clc-on-base-light: #1b1d20;
  --clc-on-base-lighter: #1b1d20;
  --clc-on-base-dark: #ffffff;
  --clc-on-base-darker: #f8fafb;
  --clc-on-primary: #ffffff;
  --clc-on-primary-light: #00215d;
  --clc-on-primary-lighter: #00215d;
  --clc-on-primary-dark: #ffffff;
  --clc-on-primary-darker: #bcd8ff;
  --clc-on-secondary: #ffffff;
  --clc-on-secondary-light: #19202b;
  --clc-on-secondary-lighter: #19202b;
  --clc-on-secondary-dark: #ffffff;
  --clc-on-secondary-darker: #c2ccdc;
  --clc-on-info: #ffffff;
  --clc-on-info-light: #002d41;
  --clc-on-info-lighter: #086791;
  --clc-on-info-dark: #ffffff;
  --clc-on-info-darker: #aadaff;
  --clc-on-success: #ffffff;
  --clc-on-success-light: #1e4100;
  --clc-on-success-lighter: #1e4100;
  --clc-on-success-dark: #ffffff;
  --clc-on-success-darker: #c6ffaa;
  --clc-on-warning: #1b1d20;
  --clc-on-warning-light: #413d00;
  --clc-on-warning-lighter: #413d00;
  --clc-on-warning-dark: #ffffff;
  --clc-on-warning-darker: #f9ffaa;
  --clc-on-danger: #ffffff;
  --clc-on-danger-light: #410005;
  --clc-on-danger-lighter: #410005;
  --clc-on-danger-dark: #ffffff;
  --clc-on-danger-darker: #ffaeaa;
  --clc-series-1: #75abf0;
  --clc-series-2: #9c75f0;
  --clc-series-3: #f075e8;
  --clc-series-4: #f0758c;
  --clc-series-5: #f0ba75;
  --clc-series-6: #c9f075;
  --clc-series-7: #75f07d;
  --clc-series-8: #75f0d9;
  --clc-series-9: #478eeb;
  --clc-series-10: #7b47eb;
  --clc-series-11: #eb47e0;
  --clc-series-12: #eb4766;
  --clc-series-13: #eba447;
  --clc-series-14: #b7eb47;
  --clc-series-15: #47eb52;
  --clc-series-16: #47ebcc;
  --clc-series-17: #3d72b8;
  --clc-series-18: #643db8;
  --clc-series-19: #b83db0;
  --clc-series-20: #b83d54;
  --clc-series-21: #b8823d;
  --clc-series-22: #91b83d;
  --clc-series-23: #3db845;
  --clc-series-24: #3db8a1;
  /* Theme Constants */
  --clc-border-width: 1px;
  --clc-root-font-size: 16px;
  --clc-body-font-size: 1rem;
  --clc-body-line-height: 1.5;
  --clc-body-background-color: var(--clc-base-100);
  --clc-text-font-family: Roboto, sans-serif;
  --clc-outline-offset: 2px;
  --clc-outline-width: 2px;
  --clc-outline-color: var(--clc-primary);
  /* Semantic Text */
  --clc-text-title-color: var(--clc-base-900);
  --clc-text-color: var(--clc-base-900);
  --clc-text-secondary-color: var(--clc-base-800);
  --clc-text-tertiary-color: var(--clc-base-700);
  --clc-text-disabled-color: var(--clc-base-600);
  --clc-text-contrast-color: var(--clc-white);
  /* Text */
  --clc-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem);
  --clc-text-display-h1-line-height: normal;
  --clc-text-display-h1-font-weight: 400;
  --clc-text-display-h1-letter-spacing: -1.5px;
  --clc-text-display-h1-color: var(--clc-text-title-color);
  --clc-text-display-h1-margin-block-start: 0;
  --clc-text-display-h1-margin-block-end: 1rem;
  --clc-text-display-h2-font-size: clamp(3rem, 4.167vw, 3.75rem);
  --clc-text-display-h2-line-height: normal;
  --clc-text-display-h2-font-weight: 400;
  --clc-text-display-h2-letter-spacing: -0.5px;
  --clc-text-display-h2-color: var(--clc-text-title-color);
  --clc-text-display-h2-margin-block-start: 0;
  --clc-text-display-h2-margin-block-end: 1rem;
  --clc-text-display-h3-font-size: clamp(2.25rem, 3.333vw, 3rem);
  --clc-text-display-h3-line-height: normal;
  --clc-text-display-h3-font-weight: 400;
  --clc-text-display-h3-letter-spacing: 0;
  --clc-text-display-h3-color: var(--clc-text-title-color);
  --clc-text-display-h3-margin-block-start: 0;
  --clc-text-display-h3-margin-block-end: 0.75rem;
  --clc-text-display-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem);
  --clc-text-display-h4-line-height: normal;
  --clc-text-display-h4-font-weight: 400;
  --clc-text-display-h4-letter-spacing: 0.25px;
  --clc-text-display-h4-color: var(--clc-text-title-color);
  --clc-text-display-h4-margin-block-start: 0;
  --clc-text-display-h4-margin-block-end: 0.5rem;
  --clc-text-display-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem);
  --clc-text-display-h5-line-height: normal;
  --clc-text-display-h5-font-weight: 400;
  --clc-text-display-h5-letter-spacing: 0;
  --clc-text-display-h5-color: var(--clc-text-title-color);
  --clc-text-display-h5-margin-block-start: 0;
  --clc-text-display-h5-margin-block-end: 0.5rem;
  --clc-text-display-h6-font-size: clamp(1rem, 1.389vw, 1.25rem);
  --clc-text-display-h6-line-height: normal;
  --clc-text-display-h6-font-weight: 500;
  --clc-text-display-h6-letter-spacing: 0.15px;
  --clc-text-display-h6-color: var(--clc-text-title-color);
  --clc-text-display-h6-margin-block-start: 0;
  --clc-text-display-h6-margin-block-end: 0.5rem;
  --clc-text-h1-font-size: clamp(3rem, 4.167vw, 3.5625rem);
  --clc-text-h1-line-height: normal;
  --clc-text-h1-font-weight: 400;
  --clc-text-h1-letter-spacing: -0.5px;
  --clc-text-h1-color: var(--clc-text-title-color);
  --clc-text-h1-margin-block-start: 0;
  --clc-text-h1-margin-block-end: 1rem;
  --clc-text-h2-font-size: clamp(2.25rem, 3.333vw, 2.8125rem);
  --clc-text-h2-line-height: normal;
  --clc-text-h2-font-weight: 400;
  --clc-text-h2-letter-spacing: 0;
  --clc-text-h2-color: var(--clc-text-title-color);
  --clc-text-h2-margin-block-start: 0;
  --clc-text-h2-margin-block-end: 1rem;
  --clc-text-h3-font-size: clamp(1.75rem, 2.361vw, 2.125rem);
  --clc-text-h3-line-height: normal;
  --clc-text-h3-font-weight: 400;
  --clc-text-h3-letter-spacing: 0;
  --clc-text-h3-color: var(--clc-text-title-color);
  --clc-text-h3-margin-block-start: 0;
  --clc-text-h3-margin-block-end: 0.75rem;
  --clc-text-h4-font-size: clamp(1.25rem, 1.667vw, 1.5rem);
  --clc-text-h4-line-height: normal;
  --clc-text-h4-font-weight: 400;
  --clc-text-h4-letter-spacing: 0.15px;
  --clc-text-h4-color: var(--clc-text-title-color);
  --clc-text-h4-margin-block-start: 0;
  --clc-text-h4-margin-block-end: 0.5rem;
  --clc-text-h5-font-size: clamp(1rem, 1.389vw, 1.25rem);
  --clc-text-h5-line-height: normal;
  --clc-text-h5-font-weight: 500;
  --clc-text-h5-letter-spacing: 0.15px;
  --clc-text-h5-color: var(--clc-text-title-color);
  --clc-text-h5-margin-block-start: 0;
  --clc-text-h5-margin-block-end: 0.5rem;
  --clc-text-h6-font-size: clamp(0.875rem, 1.389vw, 1rem);
  --clc-text-h6-line-height: normal;
  --clc-text-h6-font-weight: 500;
  --clc-text-h6-letter-spacing: 0.1px;
  --clc-text-h6-color: var(--clc-text-title-color);
  --clc-text-h6-margin-block-start: 0;
  --clc-text-h6-margin-block-end: 0.5rem;
  --clc-text-subtitle1-font-size: 1rem;
  --clc-text-subtitle1-line-height: 1.5;
  --clc-text-subtitle1-font-weight: 400;
  --clc-text-subtitle1-letter-spacing: 0.15px;
  --clc-text-subtitle1-color: var(--clc-text-title-color);
  --clc-text-subtitle1-margin-block-start: 0;
  --clc-text-subtitle1-margin-block-end: 0.5rem;
  --clc-text-subtitle2-font-size: 0.875rem;
  --clc-text-subtitle2-line-height: 1.5;
  --clc-text-subtitle2-font-weight: 500;
  --clc-text-subtitle2-letter-spacing: 0.1px;
  --clc-text-subtitle2-color: var(--clc-text-title-color);
  --clc-text-subtitle2-margin-block-start: 0;
  --clc-text-subtitle2-margin-block-end: 0.5rem;
  --clc-text-body1-font-size: 1rem;
  --clc-text-body1-line-height: 1.5;
  --clc-text-body1-font-weight: 400;
  --clc-text-body1-letter-spacing: 0.5px;
  --clc-text-body1-color: var(--clc-text-color);
  --clc-text-body1-margin-block-start: 0;
  --clc-text-body1-margin-block-end: 0.5rem;
  --clc-text-body2-font-size: 0.875rem;
  --clc-text-body2-line-height: 1.5;
  --clc-text-body2-font-weight: 400;
  --clc-text-body2-letter-spacing: 0.25px;
  --clc-text-body2-color: var(--clc-text-color);
  --clc-text-body2-margin-block-start: 0;
  --clc-text-body2-margin-block-end: 0.5rem;
  --clc-text-button-font-size: 0.875rem;
  --clc-text-button-line-height: normal;
  --clc-text-button-font-weight: 500;
  --clc-text-button-letter-spacing: 1.25px;
  --clc-text-button-text-transform: uppercase;
  --clc-text-button-color: var(--clc-text-color);
  --clc-text-button-margin-block-start: 0;
  --clc-text-button-margin-block-end: 0.5rem;
  --clc-text-caption-font-size: 0.75rem;
  --clc-text-caption-line-height: normal;
  --clc-text-caption-font-weight: 400;
  --clc-text-caption-letter-spacing: 0.4px;
  --clc-text-caption-color: var(--clc-text-color);
  --clc-text-caption-margin-block-start: 0;
  --clc-text-caption-margin-block-end: 0.5rem;
  --clc-text-overline-font-size: 0.625rem;
  --clc-text-overline-line-height: normal;
  --clc-text-overline-font-weight: 400;
  --clc-text-overline-letter-spacing: 1.5px;
  --clc-text-overline-text-transform: uppercase;
  --clc-text-overline-color: var(--clc-text-color);
  --clc-text-overline-margin-block-start: 0;
  --clc-text-overline-margin-block-end: 0.5rem;
  --clc-text-selection-background-color: var(--clc-primary-light);
  --clc-text-selection-color: var(--clc-on-primary-light);
  /* Link */
  --clc-link-color: var(--clc-primary);
  --clc-link-text-decoration: none;
  --clc-link-hover-color: var(--clc-primary-dark);
  --clc-link-hover-text-decoration: underline;
  --clc-link-focus-outline: var(--clc-outline-focus);
  --clc-link-focus-outline-offset: var(--clc-outline-offset);
  /* Base Background */
  --clc-base-background-color: var(--clc-base-50);
  /* Border */
  --clc-border-white: var(--clc-border-width) solid var(--clc-white);
  --clc-border-black: var(--clc-border-width) solid var(--clc-black);
  --clc-border-base: var(--clc-border-width) solid var(--clc-base);
  --clc-border-base-50: var(--clc-border-width) solid var(--clc-base-50);
  --clc-border-base-100: var(--clc-border-width) solid var(--clc-base-100);
  --clc-border-base-200: var(--clc-border-width) solid var(--clc-base-200);
  --clc-border-base-300: var(--clc-border-width) solid var(--clc-base-300);
  --clc-border-base-400: var(--clc-border-width) solid var(--clc-base-400);
  --clc-border-base-500: var(--clc-border-width) solid var(--clc-base-500);
  --clc-border-base-600: var(--clc-border-width) solid var(--clc-base-600);
  --clc-border-base-700: var(--clc-border-width) solid var(--clc-base-700);
  --clc-border-base-800: var(--clc-border-width) solid var(--clc-base-800);
  --clc-border-base-900: var(--clc-border-width) solid var(--clc-base-900);
  --clc-border-base-light: var(--clc-border-width) solid var(--clc-base-light);
  --clc-border-base-lighter: var(--clc-border-width) solid var(--clc-base-lighter);
  --clc-border-base-dark: var(--clc-border-width) solid var(--clc-base-dark);
  --clc-border-base-darker: var(--clc-border-width) solid var(--clc-base-darker);
  --clc-border-primary: var(--clc-border-width) solid var(--clc-primary);
  --clc-border-primary-light: var(--clc-border-width) solid var(--clc-primary-light);
  --clc-border-primary-lighter: var(--clc-border-width) solid var(--clc-primary-lighter);
  --clc-border-primary-dark: var(--clc-border-width) solid var(--clc-primary-dark);
  --clc-border-primary-darker: var(--clc-border-width) solid var(--clc-primary-darker);
  --clc-border-secondary: var(--clc-border-width) solid var(--clc-secondary);
  --clc-border-secondary-light: var(--clc-border-width) solid var(--clc-secondary-light);
  --clc-border-secondary-lighter: var(--clc-border-width) solid var(--clc-secondary-lighter);
  --clc-border-secondary-dark: var(--clc-border-width) solid var(--clc-secondary-dark);
  --clc-border-secondary-darker: var(--clc-border-width) solid var(--clc-secondary-darker);
  --clc-border-info: var(--clc-border-width) solid var(--clc-info);
  --clc-border-info-light: var(--clc-border-width) solid var(--clc-info-light);
  --clc-border-info-lighter: var(--clc-border-width) solid var(--clc-info-lighter);
  --clc-border-info-dark: var(--clc-border-width) solid var(--clc-info-dark);
  --clc-border-info-darker: var(--clc-border-width) solid var(--clc-info-darker);
  --clc-border-success: var(--clc-border-width) solid var(--clc-success);
  --clc-border-success-light: var(--clc-border-width) solid var(--clc-success-light);
  --clc-border-success-lighter: var(--clc-border-width) solid var(--clc-success-lighter);
  --clc-border-success-dark: var(--clc-border-width) solid var(--clc-success-dark);
  --clc-border-success-darker: var(--clc-border-width) solid var(--clc-success-darker);
  --clc-border-warning: var(--clc-border-width) solid var(--clc-warning);
  --clc-border-warning-light: var(--clc-border-width) solid var(--clc-warning-light);
  --clc-border-warning-lighter: var(--clc-border-width) solid var(--clc-warning-lighter);
  --clc-border-warning-dark: var(--clc-border-width) solid var(--clc-warning-dark);
  --clc-border-warning-darker: var(--clc-border-width) solid var(--clc-warning-darker);
  --clc-border-danger: var(--clc-border-width) solid var(--clc-danger);
  --clc-border-danger-light: var(--clc-border-width) solid var(--clc-danger-light);
  --clc-border-danger-lighter: var(--clc-border-width) solid var(--clc-danger-lighter);
  --clc-border-danger-dark: var(--clc-border-width) solid var(--clc-danger-dark);
  --clc-border-danger-darker: var(--clc-border-width) solid var(--clc-danger-darker);
  --clc-border-on-base: var(--clc-border-width) solid var(--clc-on-base);
  --clc-border-on-base-light: var(--clc-border-width) solid var(--clc-on-base-light);
  --clc-border-on-base-lighter: var(--clc-border-width) solid var(--clc-on-base-lighter);
  --clc-border-on-base-dark: var(--clc-border-width) solid var(--clc-on-base-dark);
  --clc-border-on-base-darker: var(--clc-border-width) solid var(--clc-on-base-darker);
  --clc-border-on-primary: var(--clc-border-width) solid var(--clc-on-primary);
  --clc-border-on-primary-light: var(--clc-border-width) solid var(--clc-on-primary-light);
  --clc-border-on-primary-lighter: var(--clc-border-width) solid var(--clc-on-primary-lighter);
  --clc-border-on-primary-dark: var(--clc-border-width) solid var(--clc-on-primary-dark);
  --clc-border-on-primary-darker: var(--clc-border-width) solid var(--clc-on-primary-darker);
  --clc-border-on-secondary: var(--clc-border-width) solid var(--clc-on-secondary);
  --clc-border-on-secondary-light: var(--clc-border-width) solid var(--clc-on-secondary-light);
  --clc-border-on-secondary-lighter: var(--clc-border-width) solid var(--clc-on-secondary-lighter);
  --clc-border-on-secondary-dark: var(--clc-border-width) solid var(--clc-on-secondary-dark);
  --clc-border-on-secondary-darker: var(--clc-border-width) solid var(--clc-on-secondary-darker);
  --clc-border-on-info: var(--clc-border-width) solid var(--clc-on-info);
  --clc-border-on-info-light: var(--clc-border-width) solid var(--clc-on-info-light);
  --clc-border-on-info-lighter: var(--clc-border-width) solid var(--clc-on-info-lighter);
  --clc-border-on-info-dark: var(--clc-border-width) solid var(--clc-on-info-dark);
  --clc-border-on-info-darker: var(--clc-border-width) solid var(--clc-on-info-darker);
  --clc-border-on-success: var(--clc-border-width) solid var(--clc-on-success);
  --clc-border-on-success-light: var(--clc-border-width) solid var(--clc-on-success-light);
  --clc-border-on-success-lighter: var(--clc-border-width) solid var(--clc-on-success-lighter);
  --clc-border-on-success-dark: var(--clc-border-width) solid var(--clc-on-success-dark);
  --clc-border-on-success-darker: var(--clc-border-width) solid var(--clc-on-success-darker);
  --clc-border-on-warning: var(--clc-border-width) solid var(--clc-on-warning);
  --clc-border-on-warning-light: var(--clc-border-width) solid var(--clc-on-warning-light);
  --clc-border-on-warning-lighter: var(--clc-border-width) solid var(--clc-on-warning-lighter);
  --clc-border-on-warning-dark: var(--clc-border-width) solid var(--clc-on-warning-dark);
  --clc-border-on-warning-darker: var(--clc-border-width) solid var(--clc-on-warning-darker);
  --clc-border-on-danger: var(--clc-border-width) solid var(--clc-on-danger);
  --clc-border-on-danger-light: var(--clc-border-width) solid var(--clc-on-danger-light);
  --clc-border-on-danger-lighter: var(--clc-border-width) solid var(--clc-on-danger-lighter);
  --clc-border-on-danger-dark: var(--clc-border-width) solid var(--clc-on-danger-dark);
  --clc-border-on-danger-darker: var(--clc-border-width) solid var(--clc-on-danger-darker);
  --clc-border-series-1: var(--clc-border-width) solid var(--clc-series-1);
  --clc-border-series-2: var(--clc-border-width) solid var(--clc-series-2);
  --clc-border-series-3: var(--clc-border-width) solid var(--clc-series-3);
  --clc-border-series-4: var(--clc-border-width) solid var(--clc-series-4);
  --clc-border-series-5: var(--clc-border-width) solid var(--clc-series-5);
  --clc-border-series-6: var(--clc-border-width) solid var(--clc-series-6);
  --clc-border-series-7: var(--clc-border-width) solid var(--clc-series-7);
  --clc-border-series-8: var(--clc-border-width) solid var(--clc-series-8);
  --clc-border-series-9: var(--clc-border-width) solid var(--clc-series-9);
  --clc-border-series-10: var(--clc-border-width) solid var(--clc-series-10);
  --clc-border-series-11: var(--clc-border-width) solid var(--clc-series-11);
  --clc-border-series-12: var(--clc-border-width) solid var(--clc-series-12);
  --clc-border-series-13: var(--clc-border-width) solid var(--clc-series-13);
  --clc-border-series-14: var(--clc-border-width) solid var(--clc-series-14);
  --clc-border-series-15: var(--clc-border-width) solid var(--clc-series-15);
  --clc-border-series-16: var(--clc-border-width) solid var(--clc-series-16);
  --clc-border-series-17: var(--clc-border-width) solid var(--clc-series-17);
  --clc-border-series-18: var(--clc-border-width) solid var(--clc-series-18);
  --clc-border-series-19: var(--clc-border-width) solid var(--clc-series-19);
  --clc-border-series-20: var(--clc-border-width) solid var(--clc-series-20);
  --clc-border-series-21: var(--clc-border-width) solid var(--clc-series-21);
  --clc-border-series-22: var(--clc-border-width) solid var(--clc-series-22);
  --clc-border-series-23: var(--clc-border-width) solid var(--clc-series-23);
  --clc-border-series-24: var(--clc-border-width) solid var(--clc-series-24);
  /* Interaction State Border */
  --clc-border-normal: var(--clc-border-width) solid var(--clc-base-600);
  --clc-border-hover: var(--clc-border-width) solid var(--clc-base-700);
  --clc-border-focus: var(--clc-border-width) solid var(--clc-primary);
  --clc-border-disabled: var(--clc-border-width) solid var(--clc-base-400);
  /* Border Radius */
  --clc-border-radius: 4px;
  --clc-border-radius-0: 0;
  --clc-border-radius-1: 0.25rem;
  --clc-border-radius-2: 0.5rem;
  --clc-border-radius-3: 0.75rem;
  --clc-border-radius-4: 1rem;
  --clc-border-radius-5: 1.25rem;
  --clc-border-radius-6: 1.5rem;
  --clc-border-radius-7: 1.75rem;
  --clc-border-radius-8: 2rem;
  --clc-border-radius-9: 2.25rem;
  --clc-border-radius-10: 2.5rem;
  /* Outline */
  --clc-outline-white: var(--clc-outline-width) solid var(--clc-white);
  --clc-outline-black: var(--clc-outline-width) solid var(--clc-black);
  --clc-outline-base: var(--clc-outline-width) solid var(--clc-base);
  --clc-outline-base-50: var(--clc-outline-width) solid var(--clc-base-50);
  --clc-outline-base-100: var(--clc-outline-width) solid var(--clc-base-100);
  --clc-outline-base-200: var(--clc-outline-width) solid var(--clc-base-200);
  --clc-outline-base-300: var(--clc-outline-width) solid var(--clc-base-300);
  --clc-outline-base-400: var(--clc-outline-width) solid var(--clc-base-400);
  --clc-outline-base-500: var(--clc-outline-width) solid var(--clc-base-500);
  --clc-outline-base-600: var(--clc-outline-width) solid var(--clc-base-600);
  --clc-outline-base-700: var(--clc-outline-width) solid var(--clc-base-700);
  --clc-outline-base-800: var(--clc-outline-width) solid var(--clc-base-800);
  --clc-outline-base-900: var(--clc-outline-width) solid var(--clc-base-900);
  --clc-outline-base-light: var(--clc-outline-width) solid var(--clc-base-light);
  --clc-outline-base-lighter: var(--clc-outline-width) solid var(--clc-base-lighter);
  --clc-outline-base-dark: var(--clc-outline-width) solid var(--clc-base-dark);
  --clc-outline-base-darker: var(--clc-outline-width) solid var(--clc-base-darker);
  --clc-outline-primary: var(--clc-outline-width) solid var(--clc-primary);
  --clc-outline-primary-light: var(--clc-outline-width) solid var(--clc-primary-light);
  --clc-outline-primary-lighter: var(--clc-outline-width) solid var(--clc-primary-lighter);
  --clc-outline-primary-dark: var(--clc-outline-width) solid var(--clc-primary-dark);
  --clc-outline-primary-darker: var(--clc-outline-width) solid var(--clc-primary-darker);
  --clc-outline-secondary: var(--clc-outline-width) solid var(--clc-secondary);
  --clc-outline-secondary-light: var(--clc-outline-width) solid var(--clc-secondary-light);
  --clc-outline-secondary-lighter: var(--clc-outline-width) solid var(--clc-secondary-lighter);
  --clc-outline-secondary-dark: var(--clc-outline-width) solid var(--clc-secondary-dark);
  --clc-outline-secondary-darker: var(--clc-outline-width) solid var(--clc-secondary-darker);
  --clc-outline-info: var(--clc-outline-width) solid var(--clc-info);
  --clc-outline-info-light: var(--clc-outline-width) solid var(--clc-info-light);
  --clc-outline-info-lighter: var(--clc-outline-width) solid var(--clc-info-lighter);
  --clc-outline-info-dark: var(--clc-outline-width) solid var(--clc-info-dark);
  --clc-outline-info-darker: var(--clc-outline-width) solid var(--clc-info-darker);
  --clc-outline-success: var(--clc-outline-width) solid var(--clc-success);
  --clc-outline-success-light: var(--clc-outline-width) solid var(--clc-success-light);
  --clc-outline-success-lighter: var(--clc-outline-width) solid var(--clc-success-lighter);
  --clc-outline-success-dark: var(--clc-outline-width) solid var(--clc-success-dark);
  --clc-outline-success-darker: var(--clc-outline-width) solid var(--clc-success-darker);
  --clc-outline-warning: var(--clc-outline-width) solid var(--clc-warning);
  --clc-outline-warning-light: var(--clc-outline-width) solid var(--clc-warning-light);
  --clc-outline-warning-lighter: var(--clc-outline-width) solid var(--clc-warning-lighter);
  --clc-outline-warning-dark: var(--clc-outline-width) solid var(--clc-warning-dark);
  --clc-outline-warning-darker: var(--clc-outline-width) solid var(--clc-warning-darker);
  --clc-outline-danger: var(--clc-outline-width) solid var(--clc-danger);
  --clc-outline-danger-light: var(--clc-outline-width) solid var(--clc-danger-light);
  --clc-outline-danger-lighter: var(--clc-outline-width) solid var(--clc-danger-lighter);
  --clc-outline-danger-dark: var(--clc-outline-width) solid var(--clc-danger-dark);
  --clc-outline-danger-darker: var(--clc-outline-width) solid var(--clc-danger-darker);
  --clc-outline-on-base: var(--clc-outline-width) solid var(--clc-on-base);
  --clc-outline-on-base-light: var(--clc-outline-width) solid var(--clc-on-base-light);
  --clc-outline-on-base-lighter: var(--clc-outline-width) solid var(--clc-on-base-lighter);
  --clc-outline-on-base-dark: var(--clc-outline-width) solid var(--clc-on-base-dark);
  --clc-outline-on-base-darker: var(--clc-outline-width) solid var(--clc-on-base-darker);
  --clc-outline-on-primary: var(--clc-outline-width) solid var(--clc-on-primary);
  --clc-outline-on-primary-light: var(--clc-outline-width) solid var(--clc-on-primary-light);
  --clc-outline-on-primary-lighter: var(--clc-outline-width) solid var(--clc-on-primary-lighter);
  --clc-outline-on-primary-dark: var(--clc-outline-width) solid var(--clc-on-primary-dark);
  --clc-outline-on-primary-darker: var(--clc-outline-width) solid var(--clc-on-primary-darker);
  --clc-outline-on-secondary: var(--clc-outline-width) solid var(--clc-on-secondary);
  --clc-outline-on-secondary-light: var(--clc-outline-width) solid var(--clc-on-secondary-light);
  --clc-outline-on-secondary-lighter: var(--clc-outline-width) solid var(--clc-on-secondary-lighter);
  --clc-outline-on-secondary-dark: var(--clc-outline-width) solid var(--clc-on-secondary-dark);
  --clc-outline-on-secondary-darker: var(--clc-outline-width) solid var(--clc-on-secondary-darker);
  --clc-outline-on-info: var(--clc-outline-width) solid var(--clc-on-info);
  --clc-outline-on-info-light: var(--clc-outline-width) solid var(--clc-on-info-light);
  --clc-outline-on-info-lighter: var(--clc-outline-width) solid var(--clc-on-info-lighter);
  --clc-outline-on-info-dark: var(--clc-outline-width) solid var(--clc-on-info-dark);
  --clc-outline-on-info-darker: var(--clc-outline-width) solid var(--clc-on-info-darker);
  --clc-outline-on-success: var(--clc-outline-width) solid var(--clc-on-success);
  --clc-outline-on-success-light: var(--clc-outline-width) solid var(--clc-on-success-light);
  --clc-outline-on-success-lighter: var(--clc-outline-width) solid var(--clc-on-success-lighter);
  --clc-outline-on-success-dark: var(--clc-outline-width) solid var(--clc-on-success-dark);
  --clc-outline-on-success-darker: var(--clc-outline-width) solid var(--clc-on-success-darker);
  --clc-outline-on-warning: var(--clc-outline-width) solid var(--clc-on-warning);
  --clc-outline-on-warning-light: var(--clc-outline-width) solid var(--clc-on-warning-light);
  --clc-outline-on-warning-lighter: var(--clc-outline-width) solid var(--clc-on-warning-lighter);
  --clc-outline-on-warning-dark: var(--clc-outline-width) solid var(--clc-on-warning-dark);
  --clc-outline-on-warning-darker: var(--clc-outline-width) solid var(--clc-on-warning-darker);
  --clc-outline-on-danger: var(--clc-outline-width) solid var(--clc-on-danger);
  --clc-outline-on-danger-light: var(--clc-outline-width) solid var(--clc-on-danger-light);
  --clc-outline-on-danger-lighter: var(--clc-outline-width) solid var(--clc-on-danger-lighter);
  --clc-outline-on-danger-dark: var(--clc-outline-width) solid var(--clc-on-danger-dark);
  --clc-outline-on-danger-darker: var(--clc-outline-width) solid var(--clc-on-danger-darker);
  --clc-outline-series-1: var(--clc-outline-width) solid var(--clc-series-1);
  --clc-outline-series-2: var(--clc-outline-width) solid var(--clc-series-2);
  --clc-outline-series-3: var(--clc-outline-width) solid var(--clc-series-3);
  --clc-outline-series-4: var(--clc-outline-width) solid var(--clc-series-4);
  --clc-outline-series-5: var(--clc-outline-width) solid var(--clc-series-5);
  --clc-outline-series-6: var(--clc-outline-width) solid var(--clc-series-6);
  --clc-outline-series-7: var(--clc-outline-width) solid var(--clc-series-7);
  --clc-outline-series-8: var(--clc-outline-width) solid var(--clc-series-8);
  --clc-outline-series-9: var(--clc-outline-width) solid var(--clc-series-9);
  --clc-outline-series-10: var(--clc-outline-width) solid var(--clc-series-10);
  --clc-outline-series-11: var(--clc-outline-width) solid var(--clc-series-11);
  --clc-outline-series-12: var(--clc-outline-width) solid var(--clc-series-12);
  --clc-outline-series-13: var(--clc-outline-width) solid var(--clc-series-13);
  --clc-outline-series-14: var(--clc-outline-width) solid var(--clc-series-14);
  --clc-outline-series-15: var(--clc-outline-width) solid var(--clc-series-15);
  --clc-outline-series-16: var(--clc-outline-width) solid var(--clc-series-16);
  --clc-outline-series-17: var(--clc-outline-width) solid var(--clc-series-17);
  --clc-outline-series-18: var(--clc-outline-width) solid var(--clc-series-18);
  --clc-outline-series-19: var(--clc-outline-width) solid var(--clc-series-19);
  --clc-outline-series-20: var(--clc-outline-width) solid var(--clc-series-20);
  --clc-outline-series-21: var(--clc-outline-width) solid var(--clc-series-21);
  --clc-outline-series-22: var(--clc-outline-width) solid var(--clc-series-22);
  --clc-outline-series-23: var(--clc-outline-width) solid var(--clc-series-23);
  --clc-outline-series-24: var(--clc-outline-width) solid var(--clc-series-24);
  /* Interaction State Outline */
  --clc-outline-normal: none;
  --clc-outline-focus: var(--clc-outline-width) solid var(--clc-outline-color);
  /* Shadow */
  --clc-shadow-0: none;
  --clc-shadow-1: 0px 1px 2px rgba(69, 73, 79, 0.3), 0px 1px 3px 1px rgba(69, 73, 79, 0.15);
  --clc-shadow-2: 0px 1px 2px rgba(69, 73, 79, 0.3), 0px 2px 6px 2px rgba(69, 73, 79, 0.15);
  --clc-shadow-3: 0px 4px 8px 3px rgba(69, 73, 79, 0.15), 0px 1px 3px rgba(69, 73, 79, 0.3);
  --clc-shadow-4: 0px 6px 10px 4px rgba(69, 73, 79, 0.15), 0px 2px 3px rgba(69, 73, 79, 0.3);
  --clc-shadow-5: 0px 8px 12px 6px rgba(69, 73, 79, 0.15), 0px 4px 4px rgba(69, 73, 79, 0.3);
  --clc-shadow-6: 0px 12px 16px 6px rgba(69, 73, 79, 0.15), 0px 4px 6px rgba(69, 73, 79, 0.3);
  --clc-shadow-7: 0px 16px 20px 6px rgba(69, 73, 79, 0.15), 0px 6px 6px rgba(69, 73, 79, 0.3);
  --clc-shadow-8: 0px 20px 24px 6px rgba(69, 73, 79, 0.15), 0px 6px 8px rgba(69, 73, 79, 0.3);
  --clc-shadow-9: 0px 24px 28px 6px rgba(69, 73, 79, 0.15), 0px 8px 8px rgba(69, 73, 79, 0.3);
  --clc-shadow-10: 0px 28px 32px 6px rgba(69, 73, 79, 0.15), 0px 8px 10px rgba(69, 73, 79, 0.3);
  /* Transition */
  --clc-transition: 0.1s linear;
  --clc-transition-all: all 0.1s linear;
  --clc-expander-transition: 0.2s ease-in-out;
  /* Motion easing & duration tokens (Material 3) */
  --clc-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --clc-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --clc-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --clc-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --clc-duration-short: 150ms;
  --clc-duration-medium: 300ms;
  --clc-duration-long: 500ms;
  --clc-ripple-duration: 0.8s;
  /* Layout Body */
  --clc-layout-body-margin: 0 0.75rem 0.75rem;
  --clc-layout-body-padding: 1rem;
  --clc-layout-body-border-radius: calc(var(--clc-border-radius) * 4);
  --clc-layout-body-background-color: var(--clc-white);
  /* Accordion */
  --clc-accordion-item-padding-block: 1rem;
  --clc-accordion-item-padding-inline: 1rem;
  --clc-accordion-item-margin: 0;
  --clc-accordion-item-border: var(--clc-border-base-200);
  --clc-accordion-item-background-color: var(--clc-base-background-color);
  --clc-accordion-item-color: var(--clc-text-secondary-color);
  --clc-accordion-item-focus-outline: var(--clc-outline-focus);
  --clc-accordion-item-focus-outline-offset: calc(-1 * var(--clc-outline-width));
  --clc-accordion-item-line-height: 1.5rem;
  --clc-accordion-item-font-size: var(--clc-body-font-size);
  --clc-accordion-item-font-weight: 500;
  --clc-accordion-icon-width: var(--clc-icon-size);
  --clc-accordion-icon-height: var(--clc-icon-size);
  --clc-accordion-icon-font-size: var(--clc-icon-size);
  --clc-accordion-icon-margin-inline: 0 0.75rem;
  --clc-accordion-toggle-icon-margin-inline: 0.75rem 0;
  --clc-accordion-toggle-icon-order: 1;
  --clc-accordion-selected-color: var(--clc-text-title-color);
  --clc-accordion-hover-color: var(--clc-text-title-color);
  --clc-accordion-content-padding-inline: 1rem;
  --clc-accordion-content-padding-block: 1rem;
  --clc-accordion-content-font-size: var(--clc-body-font-size);
  --clc-accordion-border-radius: calc(var(--clc-border-radius) * 3);
  --clc-accordion-shadow: var(--clc-shadow-1);
  /* Alert */
  --clc-alert-margin: 0.5rem 0;
  --clc-alert-padding: 1rem;
  --clc-alert-gap: 1rem;
  --clc-alert-color: var(--clc-text-color);
  --clc-alert-background-color: var(--clc-base-200);
  --clc-alert-box-shadow: var(--clc-shadow-1);
  --clc-alert-border-radius: calc(var(--clc-border-radius) * 3);
  --clc-alert-message-margin: 0.125rem 0;
  --clc-alert-title-color: var(--clc-text-h6-color);
  --clc-alert-icon-color: var(--clc-alert-color);
  --clc-alert-icon-margin: 0.125rem 0;
  --clc-alert-icon-size: var(--clc-icon-size);
  /* Badge */
  --clc-badge-border-radius: var(--clc-border-radius);
  --clc-badge-pill-border-radius: calc(4 * var(--clc-border-radius));
  --clc-badge-padding: 0 0.25rem;
  --clc-badge-pill-padding: 0 0.25rem;
  --clc-badge-font-size: 0.6875rem;
  --clc-badge-font-weight: 500;
  --clc-badge-line-height: 1rem;
  --clc-badge-text-transform: none;
  --clc-badge-letter-spacing: 0.02rem;
  /* Button */
  --clc-button-base-background-color: var(--clc-primary);
  --clc-button-base-color: var(--clc-on-primary);
  --clc-button-background-size: auto;
  --clc-button-border-radius: var(--clc-border-radius-8);
  --clc-button-shadow: var(--clc-shadow-1);
  --clc-button-transition: var(--clc-transition-all), width 0, height 0;
  --clc-button-line-height: 1.25rem;
  --clc-button-vertical-align: top;
  --clc-button-hover-shadow: var(--clc-shadow-2);
  --clc-button-hover-gradient: linear-gradient(rgba(55, 90, 139, 0.04), rgba(55, 90, 139, 0.04));
  --clc-button-hover-background-size: auto;
  --clc-button-focus-shadow: var(--clc-shadow-2);
  --clc-button-focus-gradient: linear-gradient(rgba(55, 90, 139, 0.08), rgba(55, 90, 139, 0.08));
  --clc-button-focus-background-size: auto;
  --clc-button-focus-outline: var(--clc-outline-focus);
  --clc-button-focus-outline-offset: var(--clc-outline-offset);
  --clc-button-active-shadow: var(--clc-shadow-1);
  --clc-button-active-gradient: linear-gradient(rgba(55, 90, 139, 0.08), rgba(55, 90, 139, 0.08));
  --clc-button-active-background-size: auto;
  --clc-button-disabled-opacity: 0.2;
  --clc-button-empty-opacity: 0.4;
  --clc-button-size-xs: 1.25rem;
  --clc-button-size-sm: 1.75rem;
  --clc-button-size-md: 2.5rem;
  --clc-button-size-lg: 3rem;
  /* Card */
  --clc-card-padding: 1rem;
  --clc-card-background-color: rgba(215, 219, 224, 0.13);
  --clc-card-flat-background-color: rgba(215, 219, 224, 0.24);
  --clc-card-shadow: var(--clc-shadow-1);
  --clc-card-border: var(--clc-border-base-300);
  --clc-card-border-radius: calc(var(--clc-border-radius) * 3);
  --clc-card-heading-margin-bottom: 0.5rem;
  /* Carousel */
  --clc-carousel-pager-button-width: 0.75rem;
  --clc-carousel-pager-button-height: 0.75rem;
  --clc-carousel-pager-button-border: none;
  --clc-carousel-pager-button-border-radius: 50%;
  --clc-carousel-pager-button-background-color: var(--clc-base-500);
  --clc-carousel-pager-button-color: var(--clc-on-base);
  --clc-carousel-pager-button-hover-border: var(--clc-carousel-pager-button-border);
  --clc-carousel-pager-button-hover-background-color: var(--clc-base-dark);
  --clc-carousel-pager-button-hover-color: var(--clc-on-base-dark);
  --clc-carousel-pager-button-active-width: var(--clc-carousel-pager-button-width);
  --clc-carousel-pager-button-active-height: var(--clc-carousel-pager-button-height);
  --clc-carousel-pager-button-active-border: none;
  --clc-carousel-pager-button-active-background-color: var(--clc-base-dark);
  --clc-carousel-pager-button-active-color: var(--clc-on-base-dark);
  --clc-carousel-pager-overlay-opacity: 0.7;
  --clc-carousel-pager-gap: 0.5rem;
  --clc-carousel-pager-height: 3rem;
  --clc-carousel-prev-next-button-border-radius: var(--clc-button-border-radius);
  --clc-carousel-prev-next-button-inset: 1rem;
  --clc-carousel-border-radius: var(--clc-card-border-radius);
  /* Chart */
  --clc-chart-axis-color: var(--clc-base-500);
  --clc-chart-grid-line-color: color-mix(in srgb, var(--clc-chart-axis-color) 50%, transparent);
  --clc-chart-area-opacity: 0.6;
  --clc-chart-axis-label-color: var(--clc-text-secondary-color);
  --clc-chart-axis-font-size: 0.875rem;
  --clc-chart-legend-font-size: 0.875rem;
  --clc-chart-legend-focus-outline: var(--clc-outline-focus);
  --clc-chart-legend-focus-outline-offset: var(--clc-outline-offset);
  --clc-chart-tooltip-background: var(--clc-base-background-color);
  --clc-chart-tooltip-color: var(--clc-text-color);
  --clc-chart-tooltip-border-radius: var(--clc-tooltip-border-radius);
  --clc-chart-tooltip-font-size: var(--clc-tooltip-font-size);
  --clc-chart-tooltip-max-width: min(30rem, 90vw);
  --clc-chart-tooltip-item-border-radius: var(--clc-border-radius);
  --clc-chart-tooltip-item-hover-background-color: var(--clc-grid-stripe-background-color);
  --clc-chart-marker-stroke: var(--clc-base-background-color);
  /* Range Navigator */
  --clc-range-nav-height: 5rem;
  --clc-range-nav-compact-height: 1rem;
  --clc-range-nav-border-radius: var(--clc-border-radius);
  --clc-range-nav-border: var(--clc-border-width) solid var(--clc-chart-axis-color);
  --clc-range-nav-shade-background-color: var(--clc-base-background-color);
  --clc-range-nav-shade-opacity: 0.7;
  --clc-range-nav-compact-background-color: var(--clc-base-400);
  --clc-range-nav-compact-border-radius: var(--clc-border-radius);
  --clc-range-nav-compact-window-background-color: var(--clc-primary);
  --clc-range-nav-handle-width: 20px;
  --clc-range-nav-handle-border-radius: 50%;
  --clc-range-nav-handle-background-color: var(--clc-base-500);
  --clc-range-nav-handle-hover-background-color: var(--clc-primary);
  --clc-range-nav-handle-height: 20px;
  --clc-range-nav-handle-shadow: var(--clc-shadow-1);
  --clc-range-nav-handle-hover-shadow: var(--clc-shadow-1), 0px 0px 0px 10px var(--clc-primary-lighter);
  /* Chat */
  /* Checkbox */
  --clc-checkbox-width: 1.125rem;
  --clc-checkbox-height: 1.125rem;
  --clc-checkbox-border-radius: 2px;
  --clc-checkbox-border-width: 2px;
  --clc-checkbox-label-margin-block: 0;
  --clc-checkbox-label-margin-inline: 1rem;
  --clc-checkbox-margin-block: 0;
  --clc-checkbox-margin-inline: 0;
  --clc-checkbox-focus-outline: var(--clc-outline-focus);
  --clc-checkbox-focus-outline-offset: var(--clc-outline-offset);
  --clc-checkbox-checked-background-color: var(--clc-primary);
  --clc-checkbox-checked-hover-background-color: var(--clc-primary);
  --clc-checkbox-checked-disabled-background-color: var(--clc-base-800);
  --clc-checkbox-checked-color: var(--clc-on-primary);
  --clc-checkbox-checked-shadow: none;
  --clc-checkbox-checked-border: var(--clc-border-primary);
  --clc-checkbox-checked-hover-border: var(--clc-border-primary);
  --clc-checkbox-checked-disabled-border: var(--clc-border-base-800);
  --clc-checkbox-checked-icon-background-color: transparent;
  --clc-checkbox-checked-icon-border-radius: 0;
  --clc-checkbox-icon-width: var(--clc-body-font-size);
  --clc-checkbox-icon-height: var(--clc-body-font-size);
  --clc-checkbox-icon-font-size: var(--clc-body-font-size);
  --clc-checkbox-tri-icon-width: var(--clc-body-font-size);
  --clc-checkbox-tri-icon-height: var(--clc-body-font-size);
  --clc-checkbox-tri-icon-font-size: var(--clc-body-font-size);
  /* Chip */
  --clc-chip-background-color: var(--clc-base-200);
  --clc-chip-color: var(--clc-text-color);
  --clc-chip-padding-block: 0.125rem;
  --clc-chip-padding-inline: 0.75rem;
  --clc-chip-gap: 0.5rem;
  --clc-chip-border-radius: calc(var(--clc-border-radius) * 4);
  --clc-chip-font-size: 0.875rem;
  --clc-chip-icon-size: 1.25rem;
  --clc-chip-font-weight: 500;
  --clc-chip-border-width: var(--clc-border-width);
  --clc-chip-selected-outline: var(--clc-outline-focus);
  --clc-chip-selected-outline-offset: var(--clc-outline-offset);
  --clc-chip-sm-gap: 0.25rem;
  --clc-chip-sm-font-size: 0.75rem;
  --clc-chip-sm-icon-size: 1rem;
  --clc-chip-sm-padding-block: 0.25rem;
  --clc-chip-sm-padding-inline: 0.5rem;
  --clc-chip-xs-gap: 0.25rem;
  --clc-chip-xs-font-size: 0.6875rem;
  --clc-chip-xs-icon-size: 0.875rem;
  --clc-chip-xs-padding-block: 0.125rem;
  --clc-chip-xs-padding-inline: 0.5625rem;
  --clc-chip-list-gap: 0.5rem;
  --clc-chip-disabled-opacity: 0.2;
  /* ColorPicker */
  --clc-colorpicker-panel-border: none;
  --clc-colorpicker-panel-background-color: var(--clc-base-100);
  --clc-colorpicker-panel-shadow: var(--clc-shadow-2);
  --clc-colorpicker-panel-padding: 0.5rem;
  --clc-colorpicker-panel-max-width: 20rem;
  --clc-colorpicker-saturation-height: 200px;
  --clc-colorpicker-focus-outline: var(--clc-outline-focus);
  --clc-colorpicker-focus-outline-offset: var(--clc-outline-offset);
  --clc-colorpicker-value-border-radius: 1rem;
  --clc-colorpicker-value-size-xs: 0.875rem;
  --clc-colorpicker-value-size-sm: 1.125rem;
  --clc-colorpicker-value-size-md: 20px;
  --clc-colorpicker-value-size-lg: 20px;
  --clc-colorpicker-value-size: var(--clc-colorpicker-value-size-md);
  --clc-colorpicker-trigger-icon-size-xs: 1rem;
  --clc-colorpicker-trigger-icon-size-sm: 1rem;
  --clc-colorpicker-trigger-icon-size-md: var(--clc-icon-size);
  --clc-colorpicker-trigger-icon-size-lg: var(--clc-icon-size);
  --clc-colorpicker-trigger-icon-size: var(--clc-colorpicker-trigger-icon-size-md);
  --clc-colorpicker-items-gap: 0.5rem;
  --clc-colorpicker-item-size: 1.25rem;
  --clc-colorpicker-item-border-radius: 1rem;
  --clc-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset;
  --clc-colorpicker-item-selected-transform: scale(1.25);
  --clc-colorpicker-handle-size: 12px;
  --clc-colorpicker-handle-border: 2px solid var(--clc-white);
  --clc-colorpicker-handle-shadow: var(--clc-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px;
  --clc-colorpicker-hex-input-padding: 0.25rem 0.5rem;
  --clc-colorpicker-hex-input-height: 2rem;
  --clc-colorpicker-rgba-input-padding: 0.25rem 0.5rem;
  --clc-colorpicker-rgba-input-height: 2rem;
  --clc-colorpicker-input-labels-color: var(--clc-text-tertiary-color);
  /* DataFilter */
  --clc-datafilter-item-padding-block: 0.25rem;
  --clc-datafilter-item-padding-inline-start: 2rem;
  --clc-datafilter-item-indentation: 0.25rem;
  --clc-datafilter-item-path-width: 1rem;
  --clc-datafilter-item-path-height: calc(0.25rem + var(--clc-input-height) / 2);
  --clc-datafilter-item-path-border: var(--clc-border-normal);
  --clc-datafilter-item-path-border-radius: calc(2 * var(--clc-border-radius));
  /* DataList */
  --clc-datalist-background-color: var(--clc-base-background-color);
  --clc-datalist-shadow: var(--clc-shadow-1);
  --clc-datalist-padding: 0.5rem;
  --clc-datalist-border: none;
  --clc-datalist-border-radius: calc(var(--clc-border-radius) * 3);
  --clc-datalist-item-shadow: var(--clc-shadow-0);
  --clc-datalist-item-border: none;
  --clc-datalist-item-margin-block: 0.5rem;
  --clc-datalist-item-margin-inline: 0.5rem;
  --clc-datalist-item-padding: 1rem;
  --clc-datalist-item-background-color: rgba(116, 120, 126, 0.08);
  /* DatePicker */
  --clc-datepicker-trigger-icon-size-xs: 1rem;
  --clc-datepicker-trigger-icon-size-sm: 1rem;
  --clc-datepicker-trigger-icon-size-md: var(--clc-icon-size);
  --clc-datepicker-trigger-icon-size-lg: var(--clc-icon-size);
  --clc-datepicker-trigger-icon-size: var(--clc-datepicker-trigger-icon-size-md);
  --clc-datepicker-line-height: 1.5rem;
  --clc-datepicker-trigger-icon-color: var(--clc-text-secondary-color);
  --clc-datepicker-trigger-icon-hover-color: var(--clc-text-title-color);
  --clc-datepicker-popup-width: 22rem;
  --clc-datepicker-panel-border: none;
  --clc-datepicker-panel-background-color: var(--clc-base-50);
  --clc-datepicker-panel-shadow: var(--clc-shadow-2);
  --clc-datepicker-panel-margin: 0;
  --clc-datepicker-header-color: var(--clc-text-secondary-color);
  --clc-datepicker-header-background-color: transparent;
  --clc-datepicker-header-padding-block: 0.75rem;
  --clc-datepicker-header-padding-inline: 0.75rem;
  --clc-datepicker-header-border: none;
  --clc-datepicker-footer-padding: 0 0.75rem;
  --clc-datepicker-footer-line-height: 3rem;
  --clc-datepicker-prev-next-icon-size: 2rem;
  --clc-datepicker-prev-next-button-border-radius: 50%;
  --clc-datepicker-calendar-padding-block: 0 0.75rem;
  --clc-datepicker-calendar-padding-inline: 0.75rem;
  --clc-datepicker-calendar-item-padding: 0.625rem 0;
  --clc-datepicker-calendar-header-font-size: 0.75rem;
  --clc-datepicker-calendar-header-text-transform: uppercase;
  --clc-datepicker-calendar-header-color: var(--clc-text-tertiary-color);
  --clc-datepicker-calendar-font-size: 0.875rem;
  --clc-datepicker-calendar-color: var(--clc-text-color);
  --clc-datepicker-calendar-hover-color: var(--clc-text-title-color);
  --clc-datepicker-calendar-hover-background-color: var(--clc-base-300);
  --clc-datepicker-calendar-selected-color: var(--clc-on-primary);
  --clc-datepicker-calendar-selected-background-color: var(--clc-primary);
  --clc-datepicker-calendar-selected-hover-color: var(--clc-on-primary-dark);
  --clc-datepicker-calendar-selected-hover-background-color: var(--clc-primary-dark);
  --clc-datepicker-calendar-border: none;
  --clc-datepicker-calendar-border-radius: 50%;
  --clc-datepicker-calendar-transition: var(--clc-transition-all);
  --clc-datepicker-calendar-today-color: var(--clc-primary);
  --clc-datepicker-calendar-today-background-color: transparent;
  --clc-datepicker-calendar-today-box-shadow: inset 0 0 0 1px currentColor;
  --clc-datepicker-calendar-today-border-radius: var(--clc-datepicker-calendar-border-radius);
  --clc-datepicker-month-dropdown-width: 8.75rem;
  --clc-datepicker-year-dropdown-width: 6rem;
  --clc-datepicker-focus-outline: var(--clc-outline-focus);
  --clc-datepicker-focus-outline-offset: calc(-1 * var(--clc-outline-width));
  --clc-timepicker-color: var(--clc-text-color);
  --clc-timepicker-background-color: transparent;
  --clc-timepicker-separator-color: var(--clc-text-color);
  --clc-timepicker-padding-block: 0.75rem;
  --clc-timepicker-padding-inline: 0.75rem;
  --clc-timepicker-hour-padding: 0.5rem;
  --clc-timepicker-button-color: var(--clc-text-color);
  --clc-timepicker-button-background-color: var(--clc-base-300);
  --clc-timepicker-button-width: 0.875rem;
  --clc-timepicker-button-height: 0.875rem;
  --clc-timepicker-button-border-radius: 2px;
  --clc-timepicker-button-padding: 0.5rem 1rem !important;
  --clc-timepicker-gap: 0.5rem;
  --clc-timepicker-separator-margin: 0 0.5rem;
  --clc-timepicker-border: var(--clc-border-base-300);
  /* Dialog */
  --clc-dialog-background-color: var(--clc-base-200);
  --clc-dialog-shadow: var(--clc-shadow-0);
  --clc-dialog-title-background-color: var(--clc-base-200);
  --clc-dialog-title-border: none;
  --clc-dialog-title-padding-block: 1.5rem 0;
  --clc-dialog-title-padding-inline: 1.5rem;
  --clc-dialog-title-font-size: 1.5rem;
  --clc-dialog-title-line-height: 2rem;
  --clc-dialog-title-font-weight: 400;
  --clc-dialog-title-letter-spacing: normal;
  --clc-dialog-title-color: var(--clc-text-title-color);
  --clc-dialog-close-font-size: var(--clc-icon-size);
  --clc-dialog-close-color: var(--clc-text-color);
  --clc-dialog-close-hover-color: var(--clc-text-title-color);
  --clc-dialog-close-vertical-align: middle;
  --clc-dialog-content-padding: 1.5rem;
  --clc-dialog-mask-background-color: var(--clc-base-800);
  --clc-dialog-border-radius: calc(var(--clc-border-radius) * 7);
  --clc-dialog-mask-zindex: 1000;
  --clc-dialog-zindex: 1001;
  --clc-dialog-transition: 0.1s ease-in-out;
  --clc-dialog-resize-bar-color: var(--clc-splitter-bar-color);
  --clc-dialog-resize-bar-background-color: var(--clc-splitter-bar-background-color);
  --clc-dialog-resize-bar-hover-opacity: var(--clc-splitter-bar-hover-opacity);
  --clc-dialog-resize-bar-thickness: 8px;
  --clc-dialog-resize-bar-length: 100%;
  --clc-dialog-resize-bar-handle-size: 16px;
  /* DropDown */
  --clc-dropdown-trigger-icon-width: var(--clc-icon-size);
  --clc-dropdown-trigger-icon-height: var(--clc-icon-size);
  --clc-dropdown-trigger-icon-margin-block: 0;
  --clc-dropdown-trigger-icon-margin-inline: 0 0.5rem;
  --clc-dropdown-horizontal-padding: 1rem;
  --clc-dropdown-panel-padding: 0 1rem;
  --clc-dropdown-items-margin: 0 -1rem;
  --clc-dropdown-items-padding: 0.5rem 0;
  --clc-dropdown-item-padding: 0.75rem 1rem;
  --clc-dropdown-item-font-size: var(--clc-input-font-size);
  --clc-dropdown-item-hover-background-color: var(--clc-base-300);
  --clc-dropdown-item-selected-background-color: var(--clc-secondary-lighter);
  --clc-dropdown-item-selected-shadow: none;
  --clc-dropdown-item-hover-color: var(--clc-text-color);
  --clc-dropdown-item-selected-color: var(--clc-on-secondary-lighter);
  --clc-dropdown-item-selected-hover-background-color: var(--clc-base-400);
  --clc-dropdown-item-selected-hover-color: var(--clc-text-color);
  --clc-dropdown-item-transition: none;
  --clc-dropdown-item-disabled-opacity: 0.2;
  --clc-dropdown-label-padding-block: 0;
  --clc-dropdown-label-padding-inline: 0 var(--clc-icon-size);
  --clc-dropdown-filter-border: var(--clc-border-normal);
  --clc-dropdown-filter-padding: 1rem 0 0.5rem;
  --clc-dropdown-open-background-color: var(--clc-base-100);
  --clc-dropdown-open-border: 2px solid var(--clc-primary);
  --clc-dropdown-panel-border: none;
  --clc-dropdown-panel-shadow: var(--clc-shadow-2);
  --clc-dropdown-chips-padding-block: 0.4375rem;
  --clc-dropdown-chips-padding-inline: 0.4375rem 0.9375rem;
  --clc-multiselect-checkbox-margin-block: 0;
  --clc-multiselect-checkbox-margin-inline: 0 1rem;
  /* Editor */
  --clc-editor-border: var(--clc-border-base-300);
  --clc-editor-border-radius: var(--clc-border-radius);
  --clc-editor-toolbar-background-color: var(--clc-base-background-color);
  --clc-editor-content-background-color: var(--clc-base-background-color);
  --clc-editor-focus-outline: var(--clc-outline-focus);
  --clc-editor-focus-outline-offset: calc(-1 * var(--clc-outline-width));
  /* Fieldset */
  --clc-fieldset-border: var(--clc-border-base-300);
  --clc-fieldset-border-radius: var(--clc-border-radius);
  --clc-fieldset-padding: 0 1rem 1rem;
  --clc-fieldset-legend-color: var(--clc-text-color);
  --clc-fieldset-legend-font-size: var(--clc-body-font-size);
  --clc-fieldset-legend-margin-block: 0 1rem;
  --clc-fieldset-legend-margin-inline: 0.5rem 0;
  --clc-fieldset-legend-padding-block: 0;
  --clc-fieldset-legend-padding-inline: 0.5rem;
  --clc-fieldset-toggle-width: 1.5rem;
  --clc-fieldset-toggle-margin-block: 0;
  --clc-fieldset-toggle-margin-inline: 0;
  --clc-fieldset-toggle-height: 1.5rem;
  --clc-fieldset-toggle-background-color: transparent;
  --clc-fieldset-toggle-color: var(--clc-text-tertiary-color);
  --clc-fieldset-toggle-font-size: 1.5rem;
  --clc-fieldset-toggle-border: none;
  --clc-fieldset-toggle-focus-outline: var(--clc-outline-focus);
  --clc-fieldset-toggle-focus-outline-offset: var(--clc-outline-offset);
  /* Fab */
  --clc-fab-inset-block-start: auto;
  --clc-fab-inset-block-end: 1.5rem;
  --clc-fab-inset-inline-start: auto;
  --clc-fab-inset-inline-end: 1.5rem;
  --clc-fab-zindex: 1000;
  --clc-fab-border-radius: var(--clc-border-radius-4);
  --clc-fab-active-border-radius: var(--clc-border-radius-10);
  --clc-fab-shadow: var(--clc-shadow-4);
  --clc-fab-hover-shadow: var(--clc-shadow-6);
  --clc-fab-active-shadow: var(--clc-shadow-6);
  --clc-fabmenu-offset: 0.5rem;
  /* Footer */
  --clc-footer-padding: 1rem;
  --clc-footer-background-color: var(--clc-base-100);
  --clc-footer-border: none;
  --clc-footer-color: var(--clc-text-color);
  --clc-footer-z: 2;
  /* FormField */
  --clc-form-field-margin-block: 0.5rem 0;
  --clc-form-field-margin-inline: 0;
  --clc-form-field-start-end-padding-block: 0;
  --clc-form-field-start-end-padding-inline: 0.75rem;
  --clc-form-field-filled-height: 3.375rem;
  --clc-form-field-filled-padding-block: 1.4375rem 0.4375rem;
  --clc-form-field-filled-padding-inline: 0.9375rem;
  --clc-form-field-filled-numeric-padding-block: 1.4375rem 0.4375rem;
  --clc-form-field-filled-numeric-padding-inline: 0.9375rem 1.25rem;
  --clc-form-field-filled-background-color: var(--clc-base-200);
  --clc-form-field-filled-hover-background-color: var(--clc-base-300);
  --clc-form-field-filled-border: var(--clc-border-width) solid var(--clc-base-200);
  --clc-form-field-filled-hover-border: var(--clc-border-width) solid var(--clc-base-300);
  --clc-form-field-filled-focus-border: var(--clc-border-width) solid var(--clc-base-200);
  --clc-form-field-filled-border-radius: var(--clc-border-radius) var(--clc-border-radius) 0 0;
  --clc-form-field-filled-label-floating-top: 0.5rem;
  --clc-form-field-filled-height-xs: 2.375rem;
  --clc-form-field-filled-height-sm: 2.875rem;
  --clc-form-field-filled-height-md: 3.375rem;
  --clc-form-field-filled-height-lg: 4.375rem;
  --clc-form-field-filled-padding-block-xs: 0.875rem 0.125rem;
  --clc-form-field-filled-padding-block-sm: 1.125rem 0.125rem;
  --clc-form-field-filled-padding-block-md: 1.4375rem 0.4375rem;
  --clc-form-field-filled-padding-block-lg: 1.625rem 0.625rem;
  --clc-form-field-filled-padding-inline-xs: var(--clc-input-padding-inline-xs);
  --clc-form-field-filled-padding-inline-sm: var(--clc-input-padding-inline-sm);
  --clc-form-field-filled-padding-inline-md: 0.9375rem;
  --clc-form-field-filled-padding-inline-lg: var(--clc-input-padding-inline-lg);
  --clc-form-field-filled-label-floating-top-xs: 0.0625rem;
  --clc-form-field-filled-label-floating-top-sm: 0.125rem;
  --clc-form-field-filled-label-floating-top-md: 0.5rem;
  --clc-form-field-filled-label-floating-top-lg: 0.4375rem;
  --clc-form-field-filled-label-floating-font-size-xs: 0.625rem;
  --clc-form-field-filled-label-floating-font-size-sm: 0.6875rem;
  --clc-form-field-filled-label-floating-font-size-md: 0.75rem;
  --clc-form-field-filled-label-floating-font-size-lg: 0.875rem;
  --clc-form-field-filled-hover-shadow: none;
  --clc-form-field-filled-focus-shadow: none;
  --clc-form-field-filled-underline-display: block;
  --clc-form-field-shadow: none;
  --clc-form-field-hover-shadow: var(--clc-input-hover-shadow);
  --clc-form-field-focus-shadow: var(--clc-input-focus-shadow);
  --clc-form-field-label-color: var(--clc-text-color);
  --clc-form-field-label-focus-color: var(--clc-primary);
  --clc-form-field-label-padding: 0 0.25rem;
  --clc-form-field-text-label-padding: 0;
  --clc-form-field-label-inset-inline-start: 0.6875rem;
  --clc-form-field-label-textarea-top: 0.5rem;
  --clc-form-field-label-floating-top: -0.5625rem;
  --clc-form-field-label-floating-background-color: var(--clc-base-50);
  --clc-form-field-helper-padding: 0 1rem;
  /* Forms */
  --clc-form-error-color: var(--clc-danger);
  --clc-form-error-font-size: 0.75rem;
  --clc-validator-background-color: var(--clc-danger);
  --clc-validator-color: var(--clc-on-danger);
  --clc-validator-shadow: 0 6px 14px 0 rgba(211, 81, 83, 0.3);
  --clc-validator-text-padding: 0;
  --clc-validator-padding: 0.25rem 0.5rem;
  --clc-validator-pointer-size: 0.375rem;
  --clc-validator-transform: translateY(12px);
  /* Gauge */
  --clc-gauge-scale-color: var(--clc-base-300);
  --clc-gauge-scale-label-color: var(--clc-text-tertiary-color);
  --clc-gauge-scale-font-size: var(--clc-body-font-size);
  --clc-gauge-pointer-color: var(--clc-text-secondary-color);
  --clc-gauge-arc-scale-color: var(--clc-base-300);
  --clc-gauge-arc-scale-label-color: var(--clc-text-tertiary-color);
  --clc-gauge-arc-value-color: var(--clc-secondary);
  /* Map */
  --clc-map-height: 10rem;
  --clc-map-padding: 1.25rem;
  --clc-map-background-color: var(--clc-base-background-color);
  --clc-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01);
  /* Gravatar */
  --clc-gravatar-width: 2.5rem;
  --clc-gravatar-height: 2.5rem;
  --clc-gravatar-border-radius: 50%;
  --clc-gravatar-box-shadow: none;
  /* Grid */
  --clc-grid-data-border-shadow: none;
  --clc-grid-cell-border: var(--clc-border-base-300);
  --clc-grid-right-cell-border: none;
  --clc-grid-bottom-cell-border: var(--clc-border-base-300);
  --clc-grid-cell-padding: 0.625rem 1rem;
  --clc-grid-cell-color: var(--clc-text-color);
  --clc-grid-cell-font-size: 0.875rem;
  --clc-grid-cell-line-height: var(--clc-body-line-height);
  --clc-grid-cell-focus-background-color: var(--clc-base-200);
  --clc-grid-cell-focus-color: var(--clc-text-title-color);
  --clc-grid-cell-focus-outline: var(--clc-outline-focus);
  --clc-grid-cell-focus-outline-offset: calc(-1 * var(--clc-outline-width));
  --clc-grid-hover-background-color: var(--clc-base-200);
  --clc-grid-hover-color: var(--clc-text-title-color);
  --clc-grid-focus-outline: var(--clc-outline-focus);
  --clc-grid-focus-outline-offset: var(--clc-outline-offset);
  --clc-grid-selected-background-color: var(--clc-secondary-lighter);
  --clc-grid-selected-color: var(--clc-on-secondary-lighter);
  --clc-grid-toolbar-background-color: var(--clc-base-background-color);
  --clc-grid-header-cell-border: none;
  --clc-grid-header-cell-border-bottom: var(--clc-border-base-400);
  --clc-grid-header-background-color: var(--clc-base-background-color);
  --clc-grid-header-font-size: 0.875rem;
  --clc-grid-header-line-height: 1.5rem;
  --clc-grid-header-font-weight: 500;
  --clc-grid-header-text-transform: none;
  --clc-grid-header-color: var(--clc-text-title-color);
  --clc-grid-header-cell-padding: 0.75rem 0;
  --clc-grid-header-title-padding-inline: 1rem 0;
  --clc-grid-header-sorted-background-color: var(--clc-base-200);
  --clc-grid-header-padding: 1rem;
  --clc-grid-foot-cell-color: var(--clc-text-color);
  --clc-grid-foot-background-color: var(--clc-base-100);
  --clc-grid-filter-background-color: var(--clc-base-100);
  --clc-grid-filter-padding: 0.5rem;
  --clc-grid-filter-margin: 0;
  --clc-grid-filter-border: none;
  --clc-grid-filter-font-size: 0.875rem;
  --clc-grid-filter-icon-width: var(--clc-icon-size);
  --clc-grid-filter-icon-height: var(--clc-icon-size);
  --clc-grid-filter-icon-margin-inline: 0 0.25rem;
  --clc-grid-filter-icon-font-size: 0.875rem;
  --clc-grid-filter-color: var(--clc-text-tertiary-color);
  --clc-grid-filter-focus-color: var(--clc-secondary);
  --clc-grid-filter-gap: 1rem;
  --clc-grid-filter-buttons-padding: 0 1rem 1rem;
  --clc-grid-filter-buttons-border: none;
  --clc-grid-filter-buttons-background-color: var(--clc-base-100);
  --clc-grid-filter-button-padding-inline: 1rem;
  --clc-grid-clear-filter-button-background-color: var(--clc-base-100);
  --clc-grid-clear-filter-button-color: var(--clc-text-color);
  --clc-grid-clear-filter-button-shadow: none;
  --clc-grid-apply-filter-button-background-color: var(--clc-base-100);
  --clc-grid-apply-filter-button-color: var(--clc-primary);
  --clc-grid-apply-filter-button-shadow: none;
  --clc-grid-header-filter-icon-margin-inline: auto 1rem;
  --clc-grid-header-filter-icon-hover-color: var(--clc-text-title-color);
  --clc-grid-header-filter-icon-active-color: var(--clc-primary);
  --clc-grid-header-filter-icon-font-size: 1.25rem;
  --clc-grid-simple-filter-icon-active-color: var(--clc-on-primary-lighter);
  --clc-grid-simple-filter-icon-active-background-color: var(--clc-primary-lighter);
  --clc-grid-border: var(--clc-border-base-300);
  --clc-grid-border-radius: calc(var(--clc-border-radius) * 3);
  --clc-grid-sort-icon-width: 1.25rem;
  --clc-grid-sort-icon-height: 1.25rem;
  --clc-grid-sort-icon-color: var(--clc-text-tertiary-color);
  --clc-grid-shadow: none;
  --clc-grid-background-color: var(--clc-white);
  --clc-grid-stripe-background-color: var(--clc-base-50);
  --clc-grid-stripe-odd-background-color: var(--clc-white);
  --clc-grid-column-resizer-width: 0.25rem;
  --clc-grid-column-resizer-helper-width: 0.125rem;
  --clc-grid-column-resizer-helper-background-color: var(--clc-secondary);
  --clc-grid-column-icon-width: 2rem;
  --clc-grid-column-icon-padding: 0;
  --clc-grid-detail-template-border: none;
  --clc-grid-detail-template-border-radius: 0;
  --clc-grid-detail-template-padding: 0;
  --clc-grid-detail-template-background-color: var(--clc-base-100);
  --clc-grid-loading-indicator-color: currentColor;
  --clc-grid-loading-indicator-background-color: var(--clc-base-600);
  --clc-grid-loading-indicator-background-opacity: 0.5;
  --clc-grid-frozen-cell-border: var(--clc-border-base-300);
  --clc-grid-frozen-cell-background-color: var(--clc-base-100);
  --clc-grid-frozen-stripe-background-color: var(--clc-grid-stripe-background-color);
  --clc-grid-frozen-stripe-odd-background-color: var(--clc-grid-stripe-odd-background-color);
  --clc-grid-state-transition: var(--clc-transition-all);
  --clc-grid-group-header-padding: 1rem;
  --clc-grid-group-header-gap: 0.5rem;
  --clc-grid-group-header-item-color: var(--clc-text-color);
  --clc-grid-group-header-item-background-color: var(--clc-base-200);
  --clc-grid-group-header-item-padding-block: 0.25rem;
  --clc-grid-group-header-item-padding-inline: 0.75rem 0.5rem;
  --clc-grid-group-header-item-border: var(--clc-border-base-200);
  --clc-grid-group-header-item-border-radius: calc(4 * var(--clc-border-radius));
  --clc-grid-group-header-item-title-margin-inline: 0 0.5rem;
  --clc-column-drag-handle-color: var(--clc-text-disabled-color);
  --clc-column-drag-handle-hover-color: var(--clc-text-title-color);
  --clc-column-drag-handle-margin-inline: 0;
  --clc-column-draggable-shadow: var(--clc-shadow-4);
  /* Gantt */
  --clc-gantt-row-height: 2.25rem;
  --clc-gantt-border: var(--clc-border-normal);
  --clc-gantt-border-radius: calc(var(--clc-border-radius) * 3);
  --clc-gantt-background-color: var(--clc-base-background-color);
  --clc-gantt-event-border-radius: calc(var(--clc-border-radius) * 3);
  /* Header */
  --clc-header-background-color: var(--clc-base-100);
  --clc-header-min-height: 3.125rem;
  --clc-header-z: 2;
  --clc-header-border: none;
  --clc-header-color: var(--clc-text-color);
  --clc-header-shadow: none;
  /* Icon */
  --clc-icon-font-family: Material Symbols;
  --clc-icon-size: 1.5rem;
  --clc-icon-fill: 0;
  --clc-icon-weight: inherit;
  --clc-icon-grade: 0;
  --clc-icon-optical-size: 40;
  /* Input sizing per size */
  --clc-input-size-xs: 1.5rem;
  --clc-input-size-sm: 1.75rem;
  --clc-input-size-md: 2.5rem;
  --clc-input-size-lg: 3rem;
  --clc-input-padding-block-xs: 0rem;
  --clc-input-padding-block-sm: 0.125rem;
  --clc-input-padding-block-md: 0.4375rem;
  --clc-input-padding-block-lg: 0.625rem;
  --clc-input-padding-inline-xs: 0.25rem;
  --clc-input-padding-inline-sm: 0.5rem;
  --clc-input-padding-inline-md: 0.9375rem;
  --clc-input-padding-inline-lg: 1.125rem;
  --clc-input-font-size-xs: 0.75rem;
  --clc-input-font-size-sm: 0.75rem;
  --clc-input-font-size-md: var(--clc-body-font-size);
  --clc-input-font-size-lg: 1rem;
  /* Input */
  --clc-input-font-size: var(--clc-body-font-size);
  --clc-input-height: var(--clc-input-size-md);
  --clc-input-line-height: var(--clc-body-line-height);
  --clc-input-padding-block: 0.4375rem;
  --clc-input-padding-inline: 0.9375rem;
  --clc-input-value-color: var(--clc-text-color);
  --clc-input-placeholder-color: var(--clc-text-tertiary-color);
  --clc-input-background-color: transparent;
  --clc-input-border: var(--clc-border-normal);
  --clc-input-border-block-end: var(--clc-border-normal);
  --clc-input-border-radius: var(--clc-border-radius);
  --clc-input-shadow: none;
  --clc-input-hover-shadow: none;
  --clc-input-hover-background-color: var(--clc-base-background-color);
  --clc-input-hover-border: var(--clc-border-hover);
  --clc-input-hover-border-block-end: var(--clc-input-hover-border);
  --clc-input-focus-shadow: inset 0 0 0 1px var(--clc-primary);
  --clc-input-focus-background-color: var(--clc-base-background-color);
  --clc-input-focus-border: var(--clc-border-width) solid var(--clc-outline-color);
  --clc-input-focus-border-block-end: var(--clc-input-focus-border);
  --clc-input-focus-outline: var(--clc-outline-normal);
  --clc-input-focus-outline-offset: 0;
  --clc-input-disabled-border: var(--clc-border-disabled);
  --clc-input-disabled-border-block-end: var(--clc-border-disabled);
  --clc-input-disabled-shadow: none;
  --clc-input-disabled-background-color: transparent;
  --clc-input-disabled-color: var(--clc-text-disabled-color);
  --clc-input-disabled-placeholder-color: var(--clc-text-disabled-color);
  --clc-input-disabled-opacity: 1;
  --clc-input-transition: var(--clc-transition-all), width 0, height 0;
  /* Layout */
  --clc-layout-background-color: var(--clc-body-background-color);
  /* Listbox */
  --clc-listbox-background-color: var(--clc-input-background-color);
  --clc-listbox-border-radius: var(--clc-input-border-radius);
  --clc-listbox-border: var(--clc-input-border);
  --clc-listbox-focus-border: var(--clc-input-focus-border);
  --clc-listbox-focus-shadow: var(--clc-input-focus-shadow);
  --clc-listbox-filter-border: var(--clc-border-base-200);
  --clc-listbox-padding: 0;
  --clc-listbox-item-padding: var(--clc-dropdown-item-padding);
  --clc-listbox-item-margin: 0;
  --clc-listbox-checkbox-margin-block: 0;
  --clc-listbox-checkbox-margin-inline: 0 1rem;
  --clc-listbox-header-padding-block: 0.75rem;
  --clc-listbox-header-padding-inline: 1rem;
  --clc-listbox-header-icon-width: var(--clc-icon-size);
  --clc-listbox-header-icon-height: var(--clc-icon-size);
  --clc-listbox-header-icon-margin: 0;
  /* Login */
  --clc-login-register-background-color: rgba(0, 0, 0, 0.04);
  --clc-login-register-padding-block: 1rem;
  --clc-login-register-padding-inline: 1rem;
  --clc-login-register-margin-block: 2rem 0;
  --clc-login-register-margin-inline: 0;
  --clc-login-register-button-margin-block: 0;
  --clc-login-register-button-margin-inline: 0;
  /* Lookup */
  --clc-lookup-panel-background-color: transparent;
  --clc-lookup-panel-padding: 1rem;
  --clc-lookup-search-gap: 0.5rem;
  --clc-lookup-search-margin-bottom: 0.5rem;
  /* Menu */
  --clc-menu-background-color: var(--clc-base-100);
  --clc-menu-border: none;
  --clc-menu-border-radius: var(--clc-border-radius);
  --clc-menu-item-padding-block: 0.5rem;
  --clc-menu-item-padding-inline: 1rem;
  --clc-menu-item-border-radius: 0;
  --clc-menu-item-color: var(--clc-text-color);
  --clc-menu-item-hover-color: var(--clc-text-color);
  --clc-menu-item-hover-background-color: var(--clc-base-300);
  --clc-menu-item-focus-outline: var(--clc-outline-focus);
  --clc-menu-item-focus-outline-offset: calc(-1 * var(--clc-outline-width));
  --clc-menu-item-selected-color: var(--clc-primary);
  --clc-menu-item-selected-background-color: transparent;
  --clc-menu-item-icon-margin-inline: 0 0.5rem;
  --clc-menu-item-icon-color: var(--clc-text-color);
  --clc-menu-item-icon-hover-color: var(--clc-text-color);
  --clc-menu-item-offset: 1rem;
  --clc-menu-item-transition: none;
  --clc-menu-item-disabled-opacity: 0.2;
  --clc-menu-top-item-padding-block: 0.5rem;
  --clc-menu-top-item-padding-inline: 0.5rem;
  --clc-menu-top-item-border-radius: 0;
  --clc-menu-top-item-color: var(--clc-text-color);
  --clc-menu-top-item-background-color: var(--clc-base-100);
  --clc-menu-top-item-hover-color: var(--clc-text-color);
  --clc-menu-top-item-hover-background-color: transparent;
  --clc-menu-top-item-selected-color: var(--clc-primary);
  --clc-menu-top-item-selected-background-color: transparent;
  --clc-menu-top-item-icon-color: var(--clc-text-color);
  --clc-menu-top-item-icon-hover-color: var(--clc-text-color);
  --clc-context-menu-padding-block: 0.5rem;
  --clc-context-menu-padding-inline: 0rem;
  --clc-context-menu-box-shadow: var(--clc-shadow-2);
  /* Notification */
  --clc-notification-padding: 1rem 1.25rem;
  --clc-notification-gap: 0.625rem;
  --clc-notification-icon-margin: 0;
  --clc-notification-container-background-color: transparent;
  --clc-notification-shadow: var(--clc-shadow-2);
  --clc-notification-border-radius: calc(var(--clc-border-radius) * 3);
  --clc-notification-success-color: var(--clc-on-success);
  --clc-notification-success-background-color: var(--clc-success);
  --clc-notification-success-icon-color: var(--clc-on-success);
  --clc-notification-warning-color: var(--clc-on-warning);
  --clc-notification-warning-background-color: var(--clc-warning);
  --clc-notification-warning-icon-color: var(--clc-on-warning);
  --clc-notification-error-color: var(--clc-on-danger);
  --clc-notification-error-background-color: var(--clc-danger);
  --clc-notification-error-icon-color: var(--clc-on-danger);
  --clc-notification-info-color: var(--clc-on-info);
  --clc-notification-info-background-color: var(--clc-info);
  --clc-notification-info-icon-color: var(--clc-on-info);
  /* Numeric */
  --clc-numeric-line-height: var(--clc-body-line-height);
  --clc-numeric-input-padding-block-xs: 0rem;
  --clc-numeric-input-padding-block-sm: 0.25rem;
  --clc-numeric-input-padding-block-md: 0.4375rem;
  --clc-numeric-input-padding-block-lg: 1rem;
  --clc-numeric-input-padding-block: var(--clc-numeric-input-padding-block-md);
  --clc-numeric-input-padding-inline-xs: 0.25rem 0.875rem;
  --clc-numeric-input-padding-inline-sm: 0.375rem 1rem;
  --clc-numeric-input-padding-inline-md: 0.9375rem 1.25rem;
  --clc-numeric-input-padding-inline-lg: 0.625rem 1.625rem;
  --clc-numeric-input-padding-inline: var(--clc-numeric-input-padding-inline-md);
  --clc-numeric-button-width-xs: 0.6875rem;
  --clc-numeric-button-width-sm: 0.75rem;
  --clc-numeric-button-width-md: 1rem;
  --clc-numeric-button-width-lg: 1.25rem;
  --clc-numeric-button-width: var(--clc-numeric-button-width-md);
  --clc-numeric-button-height-xs: 0.6875rem;
  --clc-numeric-button-height-sm: 0.75rem;
  --clc-numeric-button-height-md: 1rem;
  --clc-numeric-button-height-lg: 1.25rem;
  --clc-numeric-button-height: var(--clc-numeric-button-height-md);
  --clc-numeric-button-offset-xs: 0;
  --clc-numeric-button-offset-sm: 0.0625rem;
  --clc-numeric-button-offset-md: 2px;
  --clc-numeric-button-offset-lg: 2px;
  --clc-numeric-button-offset: var(--clc-numeric-button-offset-md);
  --clc-numeric-button-border-radius: calc(var(--clc-border-radius) - 2px);
  --clc-numeric-button-background-color: transparent;
  --clc-numeric-button-disabled-background-color: transparent;
  --clc-numeric-button-disabled-color: var(--clc-text-disabled-color);
  --clc-numeric-button-color: var(--clc-text-color);
  /* Overlay */
  --clc-overlay-shadow: var(--clc-shadow-2);
  --clc-overlay-border: none;
  --clc-overlay-background-color: var(--clc-base-100);
  /* Pager */
  --clc-pager-background-color: transparent;
  --clc-pager-padding: 0.5rem 1rem;
  --clc-pager-gap: 0.5rem;
  --clc-pager-border: none;
  --clc-pager-button-border-radius: 2rem;
  --clc-pager-numeric-button-background-color: transparent;
  --clc-pager-numeric-button-color: var(--clc-text-color);
  --clc-pager-numeric-button-border: none;
  --clc-pager-numeric-button-hover-background-color: var(--clc-base-100);
  --clc-pager-numeric-button-hover-color: var(--clc-text-title-color);
  --clc-pager-numeric-button-padding: 0.75rem 1rem;
  --clc-pager-numeric-button-selected-background-color: var(--clc-secondary-lighter);
  --clc-pager-numeric-button-selected-color: var(--clc-on-secondary-lighter);
  --clc-pager-numeric-button-selected-border: none;
  --clc-pager-numeric-button-selected-padding: 0.75rem 1rem;
  --clc-pager-numeric-button-min-width: 3rem;
  --clc-pager-back-button-background-color: transparent;
  --clc-pager-back-button-color: var(--clc-text-color);
  --clc-pager-next-button-background-color: transparent;
  --clc-pager-next-button-color: var(--clc-text-color);
  --clc-pager-dropdown-width: 80px;
  --clc-pager-summary-padding: 1.25rem;
  --clc-pager-summary-font-size: 0.875rem;
  --clc-pager-summary-color: var(--clc-text-tertiary-color);
  /* PanelMenu */
  --clc-panel-menu-padding-block: 0.5rem;
  --clc-panel-menu-padding-inline: 0;
  --clc-panel-menu-font-size: calc(var(--clc-body-font-size) * 0.875);
  --clc-panel-menu-font-weight: 500;
  --clc-panel-menu-focus-outline: var(--clc-outline-focus);
  --clc-panel-menu-focus-outline-offset: calc(-1 * var(--clc-outline-width));
  --clc-panel-menu-item-line-height: 1.5rem;
  --clc-panel-menu-item-padding-block: 0.75rem;
  --clc-panel-menu-item-padding-inline: 1rem;
  --clc-panel-menu-item-margin-block: 0;
  --clc-panel-menu-item-margin-inline: 0.5rem;
  --clc-panel-menu-item-border: var(--clc-border-base-100);
  --clc-panel-menu-item-border-radius: calc(var(--clc-border-radius) * 5.75);
  --clc-panel-menu-item-color: var(--clc-text-title-color);
  --clc-panel-menu-item-background-color: var(--clc-base-100);
  --clc-panel-menu-item-hover-color: var(--clc-text-color);
  --clc-panel-menu-item-hover-background-color: var(--clc-base-300);
  --clc-panel-menu-item-active-color: var(--clc-on-secondary-lighter);
  --clc-panel-menu-item-active-background-color: var(--clc-secondary-lighter);
  --clc-panel-menu-item-active-indicator: var(--clc-secondary);
  --clc-panel-menu-item-offset: 0;
  --clc-panel-menu-item-transition: color var(--clc-transition), background-color var(--clc-transition);
  --clc-panel-menu-2nd-level-vertical-offset: 0.5rem;
  --clc-panel-menu-item-2nd-level-padding-block: 0.625rem;
  --clc-panel-menu-item-2nd-level-padding-inline: 1rem 0.625rem;
  --clc-panel-menu-item-2nd-level-margin-block: 0;
  --clc-panel-menu-item-2nd-level-margin-inline: 0.5rem;
  --clc-panel-menu-item-2nd-level-border-radius: calc(var(--clc-border-radius) * 5.5);
  --clc-panel-menu-item-2nd-level-offset: 3rem;
  --clc-panel-menu-item-2nd-level-font-size: calc(var(--clc-body-font-size) * 0.875);
  --clc-panel-menu-item-2nd-level-font-weight: 400;
  --clc-panel-menu-item-2nd-level-color: var(--clc-text-secondary-color);
  --clc-panel-menu-item-2nd-level-background-color: var(--clc-base-100);
  --clc-panel-menu-item-2nd-level-hover-color: var(--clc-text-color);
  --clc-panel-menu-item-2nd-level-hover-background-color: var(--clc-base-300);
  --clc-panel-menu-item-2nd-level-active-color: var(--clc-on-secondary-lighter);
  --clc-panel-menu-item-2nd-level-active-background-color: var(--clc-secondary-lighter);
  --clc-panel-menu-item-2nd-level-active-font-weight: 500;
  --clc-panel-menu-item-3rd-level-color: var(--clc-text-secondary-color);
  --clc-panel-menu-item-3rd-level-background-color: var(--clc-base-100);
  --clc-panel-menu-item-3rd-level-hover-color: var(--clc-text-color);
  --clc-panel-menu-item-3rd-level-hover-background-color: var(--clc-base-300);
  --clc-panel-menu-item-3rd-level-active-color: var(--clc-on-secondary-lighter);
  --clc-panel-menu-item-3rd-level-active-background-color: var(--clc-secondary-lighter);
  --clc-panel-menu-icon-width: var(--clc-icon-size);
  --clc-panel-menu-icon-font-size: var(--clc-icon-size);
  --clc-panel-menu-icon-color: var(--clc-text-secondary-color);
  --clc-panel-menu-icon-height: var(--clc-icon-size);
  --clc-panel-menu-icon-margin-inline: 0 1rem;
  --clc-panel-menu-icon-2nd-level-margin-inline: -2.25rem 1rem;
  --clc-panel-menu-icon-2nd-level-icon-size: calc(var(--clc-icon-size) * 0.8);
  --clc-panel-menu-toggle-icon-font-size: var(--clc-icon-size);
  --clc-panel-menu-toggle-icon-opacity: 1;
  /* Panel */
  --clc-panel-background-color: var(--clc-base-background-color);
  --clc-panel-padding: 1rem;
  --clc-panel-title-line-height: 1.5rem;
  --clc-panel-title-font-weight: 500;
  --clc-panel-content-margin: 0;
  --clc-panel-toggle-icon-width: var(--clc-icon-size);
  --clc-panel-toggle-icon-height: var(--clc-icon-size);
  --clc-panel-toggle-icon-font-size: var(--clc-icon-size);
  --clc-panel-toggle-icon-border-radius: 2px;
  --clc-panel-toggle-icon-background-color: transparent;
  --clc-panel-toggle-icon-focus-outline: var(--clc-outline-focus);
  --clc-panel-toggle-icon-focus-outline-offset: var(--clc-outline-offset);
  --clc-panel-hover-color: var(--clc-text-title-color);
  --clc-panel-border-radius: calc(var(--clc-border-radius) * 3);
  --clc-panel-shadow: var(--clc-shadow-1);
  /* ProfileMenu */
  --clc-profile-menu-background-color: var(--clc-base-100);
  --clc-profile-menu-top-item-background-color: var(--clc-base-100);
  --clc-profile-menu-border: none;
  --clc-profile-menu-padding-block: 0.5rem;
  --clc-profile-menu-padding-inline: 1rem;
  --clc-profile-menu-border-radius: var(--clc-border-radius);
  --clc-profile-menu-toggle-button-color: var(--clc-text-color);
  --clc-profile-menu-item-hover-background-color: var(--clc-base-300);
  --clc-profile-menu-item-focus-outline: var(--clc-outline-focus);
  --clc-profile-menu-item-focus-outline-offset: calc(-1 * var(--clc-outline-width));
  --clc-profile-menu-item-icon-width: var(--clc-icon-size);
  --clc-profile-menu-item-icon-height: var(--clc-icon-size);
  --clc-profile-menu-item-icon-font-size: var(--clc-icon-size);
  --clc-profile-menu-item-icon-margin-inline: 0 0.5rem;
  /* ProgressBar */
  --clc-progressbar-value: 100%;
  --clc-progressbar-background-color: var(--clc-base-400);
  --clc-progressbar-color: var(--clc-text-color);
  --clc-progressbar-font-size: var(--clc-body-font-size);
  --clc-progressbar-height: 0.25rem;
  --clc-progressbar-border-radius: 0;
  --clc-progressbar-value-background-color: var(--clc-primary);
  --clc-progressbar-value-transition: var(--clc-transition-all);
  --clc-progressbar-circular-stroke-width: 0;
  --clc-progressbar-circular-value-stroke-width: 3px;
  --clc-progressbar-circular-value-endpoint: square;
  --clc-progressbar-buffer-opacity: 0.35;
  /* Radio */
  --clc-radio-width: 1.25rem;
  --clc-radio-height: 1.25rem;
  --clc-radio-border-radius: 50%;
  --clc-radio-border-width: 2px;
  --clc-radio-label-margin-block: 0;
  --clc-radio-label-margin-inline: 1rem;
  --clc-radio-margin-block: 0;
  --clc-radio-margin-inline: 0;
  --clc-radio-focus-outline: var(--clc-outline-focus);
  --clc-radio-focus-outline-offset: var(--clc-outline-offset);
  --clc-radio-active-background-color: var(--clc-base-background-color);
  --clc-radio-active-shadow: none;
  --clc-radio-checked-background-color: var(--clc-base-background-color);
  --clc-radio-checked-hover-background-color: var(--clc-base-background-color);
  --clc-radio-checked-hover-shadow: none;
  --clc-radio-checked-color: var(--clc-text-contrast-color);
  --clc-radio-circle-background-color: var(--clc-primary);
  --clc-radio-circle-shadow: none;
  --clc-radio-circle-hover-background-color: var(--clc-primary-light);
  --clc-radio-icon-width: 0.625rem;
  --clc-radio-icon-height: 0.625rem;
  --clc-radio-checked-border: var(--clc-border-primary);
  /* Rating */
  --clc-rating-color: var(--clc-text-secondary-color);
  --clc-rating-opacity: 1;
  --clc-rating-font-size: var(--clc-icon-size);
  --clc-rating-selected-color: var(--clc-primary);
  --clc-rating-focus-color: var(--clc-primary-darker);
  --clc-rating-disabled-color: var(--clc-text-disabled-color);
  --clc-rating-disabled-opacity: 0.5;
  --clc-rating-ban-icon: highlight_off;
  --clc-rating-ban-icon-color: var(--clc-text-disabled-color);
  /* Sankey Diagram */
  --clc-sankey-node-stroke-width: 0;
  --clc-sankey-link-stroke-width: 0;
  --clc-sankey-link-opacity: 0.5;
  --clc-sankey-link-hover-opacity: 0.7;
  --clc-sankey-label-font-size: 0.875rem;
  --clc-sankey-label-color: var(--clc-text-color);
  --clc-sankey-label-stroke: var(--clc-body-background-color);
  --clc-sankey-label-stroke-width: 2px;
  /* Scheduler */
  --clc-scheduler-border: var(--clc-border-base-300);
  --clc-scheduler-border-color: var(--clc-base-300);
  --clc-scheduler-minor-border-color: var(--clc-base-200);
  --clc-scheduler-border-radius: calc(var(--clc-border-radius) * 3);
  --clc-scheduler-shadow: var(--clc-shadow-0);
  --clc-scheduler-background-color: var(--clc-base-background-color);
  --clc-scheduler-color: var(--clc-text-tertiary-color);
  --clc-scheduler-toolbar-padding: 0.5rem;
  --clc-scheduler-toolbar-background-color: var(--clc-base-background-color);
  --clc-scheduler-toolbar-title-font-size: 1.5rem;
  --clc-scheduler-toolbar-title-font-weight: 700;
  --clc-scheduler-toolbar-title-color: var(--clc-text-title-color);
  --clc-scheduler-prev-next-button-background-color: var(--clc-base-background-color);
  --clc-scheduler-prev-next-button-color: var(--clc-text-color);
  --clc-scheduler-prev-next-button-padding-block: 0.5rem;
  --clc-scheduler-prev-next-button-padding-inline: 0.5rem;
  --clc-scheduler-prev-next-button-font-size: var(--clc-icon-size);
  --clc-scheduler-prev-button-border-start-start-radius: 2rem;
  --clc-scheduler-prev-button-border-start-end-radius: 2rem;
  --clc-scheduler-prev-button-border-end-start-radius: 2rem;
  --clc-scheduler-prev-button-border-end-end-radius: 2rem;
  --clc-scheduler-next-button-border-start-start-radius: 2rem;
  --clc-scheduler-next-button-border-start-end-radius: 2rem;
  --clc-scheduler-next-button-border-end-start-radius: 2rem;
  --clc-scheduler-next-button-border-end-end-radius: 2rem;
  --clc-scheduler-today-button-margin-inline-start: 1rem;
  --clc-scheduler-today-button-padding: 0.5rem 1rem;
  --clc-scheduler-today-button-font-size: 0.875rem;
  --clc-scheduler-today-button-text-transform: capitalize;
  --clc-scheduler-view-button-border: var(--clc-border-base-600);
  --clc-scheduler-view-button-color: var(--clc-text-secondary-color);
  --clc-scheduler-view-button-background-color: var(--clc-base-background-color);
  --clc-scheduler-view-selected-color: var(--clc-on-secondary-lighter);
  --clc-scheduler-view-selected-background-color: var(--clc-secondary-lighter);
  --clc-scheduler-view-selected-border-color: var(--clc-base-600);
  --clc-scheduler-header-background-color: var(--clc-base-background-color);
  --clc-scheduler-header-font-size: 0.75rem;
  --clc-scheduler-header-font-size-small: 0.5rem;
  --clc-scheduler-header-agenda-font-size: 1.5rem;
  --clc-scheduler-header-agenda-font-weight: 600;
  --clc-scheduler-header-agenda-font-size-small: 1rem;
  --clc-scheduler-header-text-transform: normal;
  --clc-scheduler-header-color: inherit;
  --clc-scheduler-header-border: var(--clc-border-base-300);
  --clc-scheduler-header-padding: 0.5rem 0;
  --clc-scheduler-event-color: var(--clc-on-primary);
  --clc-scheduler-event-background-color: var(--clc-primary);
  --clc-scheduler-event-font-size: 0.75rem;
  --clc-scheduler-event-line-height: 1.25rem;
  --clc-scheduler-event-padding-block: 0 1px;
  --clc-scheduler-event-padding-inline: 1px;
  --clc-scheduler-event-content-padding: 0.125rem 0.5rem;
  --clc-scheduler-event-list-button-color: var(--clc-secondary);
  --clc-scheduler-event-list-button-font-size: 0.75rem;
  --clc-scheduler-slot-title-font-size: 0.875rem;
  --clc-scheduler-slot-title-font-size-small: 0.6rem;
  --clc-scheduler-slot-title-padding: 0 0.25rem;
  --clc-scheduler-day-number-padding: 0 0.5rem;
  --clc-scheduler-weekend-color: var(--clc-text-tertiary-color);
  --clc-scheduler-weekend-background-color: var(--clc-base-100);
  --clc-scheduler-other-month-background-color: var(--clc-base-200);
  --clc-scheduler-timeline-slot-width: 7rem;
  --clc-scheduler-timeline-slot-height: 7rem;
  --clc-scheduler-year-padding: 1.5rem;
  --clc-scheduler-year-slot-padding: 0.25rem;
  --clc-scheduler-year-slot-title-width: fit-content;
  --clc-scheduler-year-slot-title-border-radius: 50%;
  --clc-scheduler-planner-slot-width: 3rem;
  --clc-scheduler-planner-slot-height: 4.5rem;
  --clc-scheduler-focus-outline: var(--clc-outline-focus);
  --clc-scheduler-focus-outline-offset: calc(-1 * var(--clc-outline-width));
  --clc-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2);
  /* Scrollbar */
  --clc-scrollbar-background-color: transparent;
  --clc-scrollbar-color: rgba(0, 0, 0, 0.12);
  --clc-scrollbar-border-radius: calc(2 * var(--clc-border-radius));
  --clc-scrollbar-size: 16px;
  /* SecurityCode */
  --clc-security-code-input-min-width: var(--clc-input-height);
  --clc-security-code-input-min-height: var(--clc-input-height);
  --clc-security-code-input-padding: 0.125rem;
  --clc-security-code-input-font-size: 1.25rem;
  --clc-security-code-input-font-weight: 600;
  --clc-security-code-input-line-height: 1;
  /* SignaturePad */
  --clc-signature-pad-border: var(--clc-input-border);
  --clc-signature-pad-border-radius: var(--clc-input-border-radius);
  --clc-signature-pad-background-color: var(--clc-base-background-color);
  --clc-signature-pad-placeholder-color: var(--clc-text-disabled-color);
  --clc-signature-pad-clear-color: var(--clc-text-secondary-color);
  --clc-signature-pad-clear-hover-color: var(--clc-text-color);
  /* SelectBar */
  --clc-selectbar-background-color: var(--clc-base-background-color);
  --clc-selectbar-color: var(--clc-text-color);
  --clc-selectbar-border: var(--clc-border-base-600);
  --clc-selectbar-selected-background-color: var(--clc-primary-lighter);
  --clc-selectbar-selected-color: var(--clc-on-primary-lighter);
  --clc-selectbar-selected-border: var(--clc-border-base-600);
  --clc-selectbar-border-radius: calc(var(--clc-border-radius) * 7);
  --clc-selectbar-focus-outline: var(--clc-outline-focus);
  --clc-selectbar-focus-outline-offset: var(--clc-outline-offset);
  --clc-selectbar-button-focus-outline: var(--clc-outline-focus);
  --clc-selectbar-button-focus-outline-offset: calc(-1 * var(--clc-outline-width));
  /* SidebarToggle */
  --clc-sidebar-toggle-icon-width: 1.5rem;
  --clc-sidebar-toggle-icon-height: 1.5rem;
  --clc-sidebar-toggle-margin-inline-end: 1rem;
  --clc-sidebar-toggle-padding: 0.8125rem;
  --clc-sidebar-toggle-border: none;
  --clc-sidebar-toggle-color: var(--clc-text-color);
  --clc-sidebar-toggle-background-color: transparent;
  --clc-sidebar-toggle-hover-color: var(--clc-on-primary-light);
  --clc-sidebar-toggle-hover-background-color: var(--clc-primary-light);
  --clc-sidebar-toggle-hover-border-radius: 50%;
  --clc-sidebar-toggle-focus-outline: var(--clc-outline-focus);
  --clc-sidebar-toggle-focus-outline-offset: calc(-1 * var(--clc-outline-offset));
  /* Sidebar */
  --clc-sidebar-z: 1;
  --clc-sidebar-width: 300px;
  --clc-sidebar-border-inline-end: none;
  --clc-sidebar-background-color: var(--clc-base-100);
  --clc-sidebar-color: var(--clc-text-color);
  /* Skeleton */
  --clc-skeleton-background-color: var(--clc-base-200);
  --clc-skeleton-animation-color: var(--clc-base-50);
  --clc-skeleton-border-radius: var(--clc-border-radius);
  --clc-skeleton-animation-duration: 1.5s;
  /* Slider */
  --clc-slider-background-color: var(--clc-base-400);
  --clc-slider-border: none;
  --clc-slider-border-radius: var(--clc-border-radius);
  --clc-slider-horizontal-height: 4px;
  --clc-slider-horizontal-width: 10rem;
  --clc-slider-range-background-color: var(--clc-primary);
  --clc-slider-range-border: none;
  --clc-slider-handle-width: 20px;
  --clc-slider-handle-height: 20px;
  --clc-slider-handle-color: var(--clc-on-secondary);
  --clc-slider-handle-background-color: var(--clc-primary);
  --clc-slider-handle-border: none;
  --clc-slider-handle-border-radius: 50%;
  --clc-slider-handle-shadow: var(--clc-shadow-1);
  --clc-slider-handle-transition: background-color var(--clc-transition), color var(--clc-transition), border var(--clc-transition), box-shadow var(--clc-transition);
  --clc-slider-handle-hover-background-color: var(--clc-primary);
  --clc-slider-handle-hover-border: none;
  --clc-slider-handle-hover-shadow: var(--clc-shadow-1), 0px 0px 0px 10px var(--clc-primary-lighter);
  --clc-slider-handle-focus-outline: var(--clc-outline-focus);
  --clc-slider-handle-focus-outline-offset: var(--clc-outline-offset);
  --clc-slider-disabled-background-color: var(--clc-base-500);
  --clc-slider-disabled-border: none;
  --clc-slider-disabled-range-background-color: var(--clc-base-700);
  --clc-slider-disabled-range-border: none;
  --clc-slider-disabled-handle-border: none;
  --clc-slider-disabled-handle-background-color: var(--clc-base-700);
  /* SplitButton */
  --clc-splitbutton-menu-shadow: var(--clc-shadow-2);
  --clc-splitbutton-menu-min-width: 10rem;
  --clc-splitbutton-background-color: var(--clc-primary);
  --clc-splitbutton-border-radius: var(--clc-border-radius);
  /* Splitter */
  --clc-splitter-bar-color: var(--clc-text-secondary-color);
  --clc-splitter-bar-color-active: var(--clc-on-primary);
  --clc-splitter-bar-background-color: var(--clc-base-200);
  --clc-splitter-bar-background-color-active: var(--clc-primary);
  --clc-splitter-bar-hover-opacity: 1;
  /* Stack/Grid Layout */
  --clc-gap: 1rem;
  --clc-row-gap: 1rem;
  /* Steps */
  --clc-steps-color: var(--clc-text-tertiary-color);
  --clc-steps-number-border-radius: 50%;
  --clc-steps-number-padding-block: 0.25rem;
  --clc-steps-number-padding-inline: 0;
  --clc-steps-number-width: 2rem;
  --clc-steps-number-height: 2rem;
  --clc-steps-number-line-height: var(--clc-body-line-height);
  --clc-steps-number-color: var(--clc-text-contrast-color);
  --clc-steps-number-background-color: var(--clc-base-500);
  --clc-steps-number-selected-color: var(--clc-on-secondary);
  --clc-steps-number-selected-background: var(--clc-secondary);
  --clc-steps-number-focus-outline: var(--clc-outline-focus);
  --clc-steps-number-focus-outline-offset: var(--clc-outline-offset);
  --clc-steps-title-selected-color: var(--clc-secondary);
  --clc-steps-title-margin-block: 0;
  --clc-steps-title-margin-inline: 0.5rem 1rem;
  --clc-steps-buttons-padding-block: 1rem;
  --clc-steps-buttons-padding-inline: 0;
  --clc-steps-button-color: var(--clc-text-secondary-color);
  /* Switch */
  --clc-switch-background-color: var(--clc-base-400);
  --clc-switch-checked-background-color: var(--clc-primary);
  --clc-switch-box-shadow: none;
  --clc-switch-circle-background-color: var(--clc-base-700);
  --clc-switch-checked-circle-background-color: var(--clc-on-primary);
  --clc-switch-focus-outline: var(--clc-outline-focus);
  --clc-switch-focus-outline-offset: var(--clc-outline-offset);
  /* Tabs */
  --clc-tabs-padding: 1rem;
  --clc-tabs-shadow: none;
  --clc-tabs-border: none;
  --clc-tabs-border-radius: 0;
  --clc-tabs-background-color: transparent;
  --clc-tabs-tab-font-size: 0.875rem;
  --clc-tabs-tab-line-height: 1.5rem;
  --clc-tabs-tab-font-weight: 500;
  --clc-tabs-tab-text-transform: none;
  --clc-tabs-tab-letter-spacing: 0.1px;
  --clc-tabs-tab-padding-block: 0.75rem;
  --clc-tabs-tab-padding-inline: 1rem;
  --clc-tabs-tab-background-color: transparent;
  --clc-tabs-tab-color: var(--clc-text-secondary-color);
  --clc-tabs-tab-selected-background-color: var(--clc-tabs-background-color);
  --clc-tabs-tab-selected-color: var(--clc-primary);
  --clc-tabs-tab-selected-top-border-color: var(--clc-secondary);
  --clc-tabs-tab-hover-background-color: transparent;
  --clc-tabs-tab-hover-color: var(--clc-primary);
  --clc-tabs-tab-focus-background-color: var(--clc-base-background-color);
  --clc-tabs-tab-focus-color: var(--clc-primary);
  --clc-tabs-tab-focus-outline: var(--clc-outline-focus);
  --clc-tabs-tab-focus-outline-offset: calc(-1 * var(--clc-outline-width));
  --clc-tabs-icon-font-size: var(--clc-icon-size);
  --clc-tabs-icon-margin-inline: -0.25rem 0.25rem;
  --clc-tabs-transition: var(--clc-transition-all);
  /* Textarea */
  --clc-text-area-padding-block: var(--clc-input-padding-block);
  --clc-text-area-padding-inline: var(--clc-input-padding-inline);
  /* TileLayout */
  --clc-tile-layout-item-background-color: var(--clc-base-background-color);
  --clc-tile-layout-item-border: var(--clc-card-border);
  --clc-tile-layout-item-border-radius: var(--clc-card-border-radius);
  --clc-tile-layout-item-shadow: var(--clc-card-shadow);
  --clc-tile-layout-item-header-background-color: var(--clc-base);
  --clc-tile-layout-overlay-background-color: var(--clc-primary-lighter);
  --clc-tile-layout-overlay-border-color: var(--clc-border-color);
  /* Timeline */
  --clc-timeline-item-padding: 1rem;
  --clc-timeline-axis-size: 4rem;
  --clc-timeline-point-size: 1rem;
  --clc-timeline-point-border: 3px solid var(--clc-base-background-color);
  --clc-timeline-point-border-radius: calc(var(--clc-border-radius) * 12);
  --clc-timeline-point-background-color: var(--clc-base-500);
  --clc-timeline-point-color: var(--clc-text-color);
  --clc-timeline-line-color: var(--clc-base-500);
  --clc-timeline-line-width: 0.125rem;
  --clc-timeline-line-border-radius: calc(var(--clc-border-radius) * 20);
  /* TimestampPicker */
  --clc-timespanpicker-line-height: 1.5rem;
  --clc-timespanpicker-trigger-icon-size-xs: 1rem;
  --clc-timespanpicker-trigger-icon-size-sm: 1rem;
  --clc-timespanpicker-trigger-icon-size-md: var(--clc-icon-size);
  --clc-timespanpicker-trigger-icon-size-lg: var(--clc-icon-size);
  --clc-timespanpicker-trigger-icon-size: var(--clc-timespanpicker-trigger-icon-size-md);
  --clc-timespanpicker-trigger-icon-color: var(--clc-text-secondary-color);
  --clc-timespanpicker-trigger-icon-hover-color: var(--clc-text-title-color);
  --clc-timespanpicker-focus-outline: var(--clc-outline-focus);
  --clc-timespanpicker-focus-outline-offset: calc(-1 * var(--clc-outline-width));
  --clc-timespanpicker-popup-border: none;
  --clc-timespanpicker-popup-shadow: var(--clc-shadow-2);
  --clc-timespanpicker-popup-margin: 0;
  --clc-timespanpicker-popup-width: fit-content;
  --clc-timespanpicker-panel-background-color: var(--clc-base-background-color);
  --clc-timespanpicker-panel-padding: 0.75rem;
  --clc-timespanpicker-panel-gap: 0.5rem;
  --clc-timespanpicker-panel-unit-gap: 0.25rem;
  --clc-timespanpicker-panel-field-min-width: 5rem;
  --clc-timespanpicker-unit-label-color: var(--clc-text-tertiary-color);
  /* Toc */
  --clc-toc-link-padding-block: 0.5rem;
  --clc-toc-link-padding-inline: 1rem;
  --clc-toc-link-font-size: calc(var(--clc-body-font-size) * 0.875);
  --clc-toc-link-font-weight: 400;
  --clc-toc-link-border: var(--clc-border-width) solid transparent;
  --clc-toc-link-border-radius: calc(var(--clc-border-radius) * 8);
  --clc-toc-link-color: var(--clc-text-color);
  --clc-toc-link-background-color: transparent;
  --clc-toc-link-hover-color: var(--clc-text-title-color);
  --clc-toc-link-hover-background-color: var(--clc-base-200);
  --clc-toc-link-selected-border: var(--clc-border-width) solid var(--clc-base-700);
  --clc-toc-link-selected-color: var(--clc-text-title-color);
  --clc-toc-link-selected-background-color: transparent;
  --clc-toc-link-selected-indicator-color: transparent;
  --clc-toc-link-selected-indicator-size: 0.125rem;
  --clc-toc-link-selected-indicator-inset-block: 0.5rem;
  --clc-toc-link-selected-indicator-inset-inline: 0 auto;
  --clc-toc-horizontal-shadow: var(--clc-shadow-3);
  --clc-toc-horizontal-border-radius: calc(var(--clc-border-radius) * 8);
  --clc-toc-horizontal-background-color: var(--clc-base-background-color);
  --clc-toc-horizontal-link-padding-block: 1.25rem;
  --clc-toc-horizontal-link-padding-inline: 1.25rem;
  --clc-toc-horizontal-link-font-size: var(--clc-body-font-size);
  --clc-toc-horizontal-link-selected-indicator-inset-block: auto 0;
  --clc-toc-horizontal-link-selected-indicator-inset-inline: 0.5rem;
  --clc-toc-horizontal-link-selected-border: var(--clc-border-width) solid transparent;
  --clc-toc-horizontal-link-selected-color: var(--clc-on-primary-lighter);
  --clc-toc-horizontal-link-selected-background-color: var(--clc-primary-lighter);
  --clc-toc-link-selected-indicator-border-radius: 0;
  /* Tooltip */
  --clc-tooltip-background-color: var(--clc-base-800);
  --clc-tooltip-color: var(--clc-white);
  --clc-tooltip-shadow: none;
  --clc-tooltip-padding: 0.25rem 0.5rem;
  --clc-tooltip-border-radius: var(--clc-border-radius);
  --clc-tooltip-font-size: 0.75rem;
  /* Tree */
  --clc-tree-background-color: transparent;
  --clc-tree-node-padding-block: 0.25rem;
  --clc-tree-node-padding-inline: 0.5rem;
  --clc-tree-node-selected-background-color: var(--clc-secondary-lighter);
  --clc-tree-node-selected-color: var(--clc-on-secondary-lighter);
  --clc-tree-node-selected-border-radius: calc(var(--clc-border-radius) * 5);
  --clc-tree-node-margin-block: 0;
  --clc-tree-node-margin-inline: 0;
  --clc-tree-node-hover-background-color: var(--clc-base-400);
  --clc-tree-node-hover-color: var(--clc-text-color);
  --clc-tree-node-focus-outline: var(--clc-outline-focus);
  --clc-tree-node-focus-outline-offset: calc(-1 * var(--clc-outline-width));
  --clc-tree-node-toggle-width: 2rem;
  --clc-tree-node-toggle-color: var(--clc-text-tertiary-color);
  --clc-tree-node-toggle-hover-color: var(--clc-text-color);
  --clc-tree-transition: var(--clc-transition-all), width 0, height 0;
  /* Upload */
  --clc-upload-button-bar-background-color: var(--clc-base-100);
  --clc-upload-button-bar-padding: 0.5rem;
  --clc-upload-button-bar-border-radius: calc(var(--clc-border-radius) * 5);
  --clc-upload-files-background-color: var(--clc-base-background-color);
  --clc-upload-files-padding: 0.5rem 0;
  --clc-upload-files-remove-background-color: var(--clc-base-200);
  --clc-upload-files-remove-color: var(--clc-text-color);
  --clc-upload-files-margin: 0 0.5rem;
  --clc-upload-choose-background-color: var(--clc-base-200);
  --clc-upload-choose-color: var(--clc-text-color);
  --clc-upload-choose-hover-background-color: var(--clc-base-200);
  --clc-upload-choose-hover-color: var(--clc-text-title-color);
  --clc-upload-choose-active-background-color: var(--clc-base-200);
  --clc-upload-choose-active-color: var(--clc-text-title-color);
  --clc-upload-cancel-background-color: var(--clc-base-200);
  --clc-upload-cancel-color: var(--clc-text-color);
  --clc-upload-button-background-color: var(--clc-primary);
  /* Spreadsheet */
  --clc-spreadsheet-tab-font-size: 0.75rem;
  --clc-spreadsheet-cell-border: var(--clc-border-base-300);
  --clc-spreadsheet-header-background-color: var(--clc-base-background-color);
  --clc-spreadsheet-header-active-background-color: var(--clc-base-200);
  --clc-spreadsheet-splitter-background-color: var(--clc-base-200);
}

:root {
  --clc-on-success: var(--clc-success-darker);
  --clc-header-fixed-height: 53px;
  --clc-black: #000000;
  --clc-primary: #7448F5;
  --clc-secondary: #F0F0F0;
  --clc-info: #84B7FF;
  --clc-light: #E2D8FD;
  --clc-success: #44D168;
  --clc-warning: #FFC004;
  --clc-danger: #ec6558;
  /*base 회색*/
  --clc-base: #FAFAFA;
  --clc-base-50: #F5F5F5;
  --clc-base-100: #F0F0F0;
  --clc-base-200: #E6E6E6;
  --clc-base-300: #C8C8C8;
  --clc-base-400: #969696;
  --clc-base-500: #646464;
  --clc-base-600: #4B4B4B;
  --clc-base-700: #383838;
  --clc-base-800: #242424;
  --clc-base-900: #141414;
  --clc-body-background-color: #ffffff;
  --clc-layout: var(--clc-layout-body-background-color);
  --sidebar-background-color: var(--clc-base);
  --header-background-color: var(--clc-base);
  --button-shadow: var(--clc-shadow-0);
  --button-hover-shadow: var(--clc-shadow-0);
  --button-focus-shadow: var(--clc-shadow-0);
  --button-active-shadow: var(--clc-shadow-0);
  /*프라이머리컬러(보라색)*/
  --ivy-primary-100: #F1ECFE;
  --ivy-primary-200: #E2D8FD;
  --ivy-primary-300: #BDA8FA;
  --ivy-primary-400: #9878F8;
  --ivy-primary-500: #7448F5;
  --ivy-primary-600: #6036DB;
  --ivy-primary-700: #5737B6;
  --ivy-primary-800: #4C3886;
  --ivy-primary-900: #372961;
  --ivy-secondary-100: #E5F3FF;
  --ivy-secondary-200: #C1E0FF;
  --ivy-secondary-300: #9BCDFF;
  --ivy-secondary-400: #77B9FF;
  --ivy-secondary-500: #60A9FF;
  --ivy-secondary-600: #529AFF;
  --ivy-secondary-700: #4E83F2;
  --ivy-secondary-800: #4668C9;
  --ivy-secondary-900: #3E48A9;
  /*변동형 클레비 컬러*/
  --clc-assign-base: #FAFAFA;
  --clc-assign-base-50: #F5F5F5;
  --clc-assign-base-100: #F0F0F0;
  --clc-assign-base-200: #E6E6E6;
  --clc-assign-base-300: #C8C8C8;
  --clc-assign-base-400: #969696;
  --clc-assign-base-500: #646464;
  --clc-assign-base-600: #4B4B4B;
  --clc-assign-base-700: #383838;
  --clc-assign-base-800: #242424;
  --clc-assign-base-900: #141414;
  --clc-editor-text-red: #d53e0b;
  --clc-editor-text-yellow: #c28b00;
  --clc-editor-text-yellowgreen: #79a00d;
  --clc-editor-text-green: #068858;
  --clc-editor-text-skyblue: #10a0d1;
  --clc-editor-text-blue: #3d69eb;
  --clc-editor-text-purple: #bd1bf3;
  --clc-editor-text-pink: #d813a7;
  --clc-editor-text-gray: #8a8a8a;
  --clc-editor-text-base: #141414;
  /*폰트사이즈 설정*/
  --clc-text-body1-font-size: 16px;
  --clc-text-display-h1-font-size: 24px;
  --clc-text-display-h2-font-size: 20px;
  --clc-text-display-h3-font-size: 18px;
  --clc-text-display-h4-font-size: 16px;
  --clc-text-display-h5-font-size: 14px;
  --clc-text-display-h6-font-size: 12px;
  --clc-title24_SB-font-size: 24px;
  --clc-title20_SB-font-size: 20px;
  --clc-title18_SB-font-size: 18px;
  --clc-title16_SB-font-size: 16px;
  --clc-title14_SB-font-size: 14px;
  --clc-title24_Med-font-size: 24px;
  --clc-title20_Med-font-size: 20px;
  --clc-title18_Med-font-size: 18px;
  --clc-title16_Med-font-size: 16px;
  --clc-title14_Med-font-size: 14px;
  --clc-body16_Reg-font-size: 16px;
  --clc-body14_Reg-font-size: 14px;
  --clc-label14_Med-font-size: 14px;
  --clc-caption13_Reg-font-size: 13px;
  /*폰트굵기 설정*/
  --clc-title24_SB-font-weight: bold;
  --clc-title20_SB-font-weight: bold;
  --clc-title18_SB-font-weight: bold;
  --clc-title16_SB-font-weight: bold;
  --clc-title14_SB-font-weight: bold;
  --clc-title24_Med-font-weight: 500;
  --clc-title20_Med-font-weight: 500;
  --clc-title18_Med-font-weight: 500;
  --clc-title16_Med-font-weight: 500;
  --clc-title14_Med-font-weight: 500;
  --clc-body16_Reg-font-weight: 400;
  --clc-body14_Reg-font-weight: 400;
  --clc-label14_Med-font-weight: 500;
  --clc-caption13_Reg-font-weight: 400;
  /*폰트 높이 설정*/
  --clc-title24_SB-line-height: 1.45;
  --clc-title20_SB-line-height: 1.45;
  --clc-title18_SB-line-height: 1.45;
  --clc-title16_SB-line-height: 1.45;
  --clc-title14_SB-line-height: 1.45;
  --clc-title24_Med-line-height: 1.45;
  --clc-title20_Med-line-height: 1.45;
  --clc-title18_Med-line-height: 1.45;
  --clc-title16_Med-line-height: 1.45;
  --clc-title14_Med-line-height: 1.45;
  --clc-body16_Reg-line-height: 1.4;
  --clc-body14_Reg-line-height: 1.4;
  --clc-label14_Med-line-height: 1.4;
  --clc-caption13_Reg-line-height: 1.4;
  /* 배경 및 기타 회색 컬러 */
  --clv-background: #FFFFFF;
  --clv-background-hover: #FAFAFA;
  --clv-sidebar-background: #FAFAFA;
  --clv-sidebar-background-hover: #F0F0F0;
  --clv-sidebar-background-selected: #E6E6E6;
  --clv-modal-background: #FFFFFF;
  --clv-modal-background-hover: #FAFAFA;
  --clv-modal-border: transparent;
  --clv-modal-overlay: rgba(3, 3, 3, 16%);
  --clv-text-primary: #141414;
  --clv-text-secondary: #646464;
  --clv-text-tertiary: #969696;
  --clv-sidebar-text-primary: #4B4B4B;
  --clv-sidebar-text-primary-hover: #141414;
  --clv-sidebar-text-secondary: #969696;
  --clv-modal-text-primary: #141414;
  --clv-modal-text-secondary: #646464;
  --clv-border: #F0F0F0;
  --clv-sidebar-border: #E6E6E6;
  --clv-modal-border: #F5F5F5;
  --clv-modal-back: #C8C8C8;
  /* 다이얼로그 색상 */
  --clv-dialog-background: #fff;
  /* 버튼 색상 */
  --clv-button-primary: #7448f5;
  --clv-button-secondery: rgba(200, 200, 200, 0.3);
  --clv-button-danger: #ec6558;
  /* 그림자 */
  --clc-shadow-layer0: 0 2px 7px 0 rgba(0, 0, 0, 0.14);
  --clc-shadow-layer1-1: 0 1px 6px 0 rgba(0, 0, 0, 0.12);
  --clc-shadow-layer1-2: 0 5px 14px 0 rgba(0, 0, 0, 0.10);
  --clc-shadow-layer2-1: 0 1px 6px 0 rgba(0, 0, 0, 0.12);
  --clc-shadow-layer2-2: 0 8px 30px 0 rgba(0, 0, 0, 0.15);
  --clc-shadow-layer3-1: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
  --clc-shadow-layer3-2: 0 25px 45px 0 rgba(0, 0, 0, 0.17);
  /* 상호작용 피드백 */
  --clc-interaction-hover: rgba(0, 0, 0, 0.08);
  --clc-interaction-pressed: rgba(0, 0, 0, 0.14);
  --clc-interaction-selected: rgba(0, 0, 0, 0.05);
  --clc-interaction-selected-accent: rgba(152, 120, 248, 0.18);
  --clc-interaction-selected-high-empahsis-fill: rgba(152, 120, 248, 0.12);
  --clc-interaction-selected-high-empahsis-stroke: #9878F8;
  /*채팅 버블*/
  --chat-bubble-sent-bg: #E5F3FF;
  --chat-tobot-bubble-sent-bg: #F1ECFE;
  --chat-bubble-sent-text: #333;
  --chat-whisper-bg: #F3EAFF;
  --chat-whisper-text: #333;
  --chat-whisper-indicator: #8B5CF6;
  /* 노티피케이션 심각도별 아이콘 색 — 중립 배경에서도 가독성 확보 */
  --clc-notification-success-icon-color: #2FA34C;
  --clc-notification-warning-icon-color: #B8860B;
  --clc-notification-error-icon-color: #C64840;
  --clc-notification-info-icon-color: #3D6DD6;
  /* 기본 채팅창 */
  --clv-chat-input-bg: var(--clc-body-background-color);
  --clv-chat-input-border: color-mix(in srgb, var(--clc-text-color) 10%, transparent);
  --clv-chat-input-text: var(--clv-text-primary);
  --clv-chat-input-placeholder: color-mix(in srgb, var(--clc-text-color) 50%, transparent);
  --clv-chat-input-btn-ghost-bg: transparent;
  --clv-chat-input-btn-ghost-color: var(--clv-text-primary);
  --clv-chat-input-btn-solid-bg: var(--clv-text-primary);
  --clv-chat-input-btn-solid-color: var(--clv-background);
  /* 귓속말 채팅창 */
  --clv-chat-input-whisper-bg: #242424;
  --clv-chat-input-whisper-border: var(--ivy-primary-700);
  --clv-chat-input-whisper-text: var(--ivy-primary-200);
  --clv-chat-input-whisper-placeholder: color-mix(in srgb, var(--ivy-primary-200) 30%, transparent);
  --clv-chat-input-whisper-btn-ghost-bg: transparent;
  --clv-chat-input-whisper-btn-ghost-color: var(--ivy-primary-200);
  --clv-chat-input-whisper-btn-solid-bg: var(--ivy-primary-700);
  --clv-chat-input-whisper-btn-solid-color: var(--ivy-primary-200);
  /* ARI 별칭 토큰(--cl-*) — 마켓플레이스·마법사 표면이 소비한다.
     값 전체가 테마 적응형 토큰으로의 간접 참조라 라이트/다크 코어가 같은 선언을 쓰고,
     적응은 참조 대상 토큰이 한다. 클라이언트 ari.css 페이지 스코프에 흩어져 있던
     정의를 테마 뿌리로 승격한 것 — 이름·해석을 바꾸지 않는다. */
  --cl-surface: var(--clc-dialog-background-color, var(--clv-dialog-background, var(--clv-modal-background, var(--clc-assign-base, #fff))));
  --cl-surface-elevated: var(--clc-assign-base, var(--cl-surface));
  --cl-text: var(--clc-text-color, var(--clv-modal-text-primary, #0f172a));
  --cl-text-muted: var(--clv-text-secondary, var(--clc-assign-base-400, #64748b));
  --cl-text-danger: var(--clc-danger, #b91c1c);
  --cl-text-success: var(--clc-success, #16a34a);
  --cl-border: var(--clc-assign-base-200, rgba(148, 163, 184, 0.45));
  --cl-border-subtle: var(--clv-modal-border, var(--clc-assign-base-200, rgba(148, 163, 184, 0.25)));
  --cl-fill-subtle: var(--clc-assign-base-50, rgba(148, 163, 184, 0.12));
  --cl-fill-hover: var(--clc-assign-base-100, rgba(148, 163, 184, 0.22));
  --cl-fill-strong: var(--clc-base-800, rgba(15, 23, 42, 0.85));
  --cl-accent: var(--clc-primary, #2563eb);
  --cl-accent-hover: var(--clc-primary-dark, var(--clc-primary, #1d4ed8));
}

/* 노티피케이션 카드 — 배경은 통일, 심각도는 보더 색으로만 (라이트) */
.clc-notification-success .clc-notification-item,
.clc-notification-warn .clc-notification-item,
.clc-notification-error .clc-notification-item,
.clc-notification-info .clc-notification-item {
  background: var(--clc-assign-base);
  border: 1px solid transparent;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.12), 0 2px 5px -1px rgba(0, 0, 0, 0.05);
}

.clc-notification-success .clc-notification-item {
  border-color: #7FD89A;
}

.clc-notification-warn .clc-notification-item {
  border-color: #E5C270;
}

.clc-notification-error .clc-notification-item {
  border-color: #E88B82;
}

.clc-notification-info .clc-notification-item {
  border-color: #8FB5F2;
}

.no-scroll {
  padding-inline-end: 0px;
}

.clc-text-body1 {
  font-family: "Pretendard";
  margin-bottom: 0;
}

.body {
  font-family: "Pretendard";
}

.clc-body {
  margin: unset;
  border-radius: unset;
}

.clc-layout {
  grid-template-areas: "clc-sidebar clc-header" "clc-sidebar clc-body" "clc-footer clc-footer" !important;
}

.clc-sidebar-expanded {
  width: 250px !important;
}

/* 라벨은 항상 한 줄이다. .clc-button 은 overflow:hidden(리플 :before) 이고
   크기 클래스가 max-height 를 고정하므로, 자동 줄바꿈이 일어나면 버튼이 커지는 게
   아니라 두 번째 줄이 잘린다. 좁은 자리에서는 소비처가 컨테이너에 flex-wrap 을 걸어
   버튼 단위로 접는다. 의도적 2줄 라벨(<br>)은 그 버튼의 max-height 를 함께 풀 것. */
.clc-button {
  /* Legacy themes keep the flat fallback. Mist changes only this state token. */
  box-shadow: var(--clc-button-state-shadow, none) !important;
  white-space: nowrap;
}

.clc-button.clc-secondary.clc-shade-default {
  color: var(--clc-text-color);
}

/* 채움 계열에만 얹는다 — 근거는 다크 코어의 같은 규칙 주석 참고.
   변형을 보지 않는 `!important` 배경이 Text/Outlined 를 지우고 있었다. */
.clc-button.clc-light:not(.clc-variant-text):not(.clc-variant-outlined) {
  background-color: var(--ivy-primary-200);
  color: #333;
}

.clc-button-xs {
  border-radius: 8px !important;
  font-size: 12px !important;
}

.clc-button-sm {
  border-radius: 8px !important;
  font-size: 14px !important;
}

.clc-button-md {
  border-radius: 10px !important;
  font-size: 14px !important;
}

.clc-button-lg {
  border-radius: 12px !important;
  font-size: 20px !important;
}

.clc-button.clc-variant-text.clc-primary.clc-shade-default {
  color: var(--clc-text-color);
}

.clc-dialog, .clc-dialog-titlebar {
  background-color: var(--clc-base-50);
}

.clc-accordion-toggle-icon {
  order: 0;
}

@media screen and (min-width: 769px) {
  .clc-sidebar-collapsed {
    width: 60px !important;
    opacity: 1 !important;
  }
}
/* ==========================================================================
   Clevi Mist — 라이트
   조용한 안개 캔버스(L0) 위에 아크릴 셸(L1) · 종이 콘텐츠(L2) · 베일 오버레이(L3).
   색은 보라 하나만 절제해서 쓰고, 화려함 대신 재질과 위계로 세련미를 만든다.
   ========================================================================== */
:root {
  /* 액센트 — 유일한 색 */
  --clc-primary: #6B45EE;
  --clc-on-primary: #FFFFFF;
  --clv-button-primary: #6B45EE;
  /* ---- 밝기 변형의 두 끝 ----
     `-light` / `-dark` / `-darker` 는 **지면 기준 방향**이다. 이름은 밝기를 말하지만
     뜻은 거리다 — `-light` 는 지면 쪽으로 물러나고, `-dark` 는 지면 반대로 다가온다.
     그래서 다크에서는 `-dark` 가 오히려 밝다. 두 끝만 지면이 정하면 여섯 의미색의
     램프 전부가 코어에서 따라 나온다(파생식은 `_clevi-mist-core.scss`).

     `-ink` 는 그 표면 위에 얹는 잉크다. 지면 쪽 표면에는 지면 잉크가, 반대쪽
     표면에는 반대 잉크가 선다. */
  --clc-shade-ground: #FFFFFF;
  --clc-shade-ground-ink: #1A1922;
  --clc-shade-far: #16151C;
  --clc-shade-far-ink: #FFFFFF;
  /* 선택 워시의 세기. 지면마다 다른 유일한 눈금이다(언어 §8) — 어두운 지면에서
     같은 세기로 읽히려면 더 진하게 섞어야 한다. */
  --clc-shade-wash: 13%;
  /* 고대비 모드 포커스 광대의 지면 눈금(코어의 `@mixin mist-contrast-high` 가 읽는다).
     기본 모드에서는 아무도 읽지 않는다. 심지 혼합은 액센트를 지면 **반대쪽**으로 미는
     비율이라 라이트에서는 밀 필요가 없고(100% = 액센트 그대로), 광대 두 겹의 알파는
     밝은 지면에서 옅게 보이지 않을 만큼만 잡는다. */
  --clc-mist-focus-ring-core-mix: 100%;
  --clc-mist-focus-ring-band-a1: 22%;
  --clc-mist-focus-ring-band-a2: 8%;
  /* 선택 상태 표면 토큰(그리드 내장 페이저 활성·패널메뉴 활성·드롭다운/트리
     선택·스케줄러 뷰·secondary 버튼 lighter)도 material3가 파랑으로 파생 —
     명도는 유지하고 색만 액센트 계열로 재정렬 */
  --clc-secondary-lighter: color-mix(in srgb, var(--clc-primary) 13%, transparent);
  --clc-on-secondary-lighter: var(--clc-primary-dark);
  --clc-secondary-light: #C8C5D8;
  --clc-secondary-dark: #47445A;
  /* 의미색 — 액센트와 같은 규칙으로 지면을 따라 뒤집는다.
     옛 값은 라이트·다크가 같은 파스텔 하나(성공 #6BC682 · 정보 #84B7FF)였고
     그 위에 흰 잉크가 얹혀 채움 버튼 대비가 2.06~3.15:1 이었다 — 라이트에서는
     형광처럼 뜨고 다크에서는 읽히지 않는, 지면을 모르는 색이었다.
     라이트는 "진한 색 + 흰 잉크", 다크는 "밝은 색 + 진한 잉크" — 액센트
     (#6B45EE/#FFFFFF ↔ #BDA8FA/#2A1A5E)와 같은 뒤집기다.
     경고만 흰 잉크로 4.5:1 에 못 닿는 색상이라 두 지면 모두 진한 잉크를 쓴다. */
  --clc-success: #12794A;
  --clc-on-success: #FFFFFF;
  --clc-warning: #F2A50C;
  --clc-on-warning: #241800;
  --clc-danger: #C43C31;
  --clc-on-danger: #FFFFFF;
  --clc-error: #C43C31;
  --clc-on-error: #FFFFFF;
  --clc-info: #1D63C8;
  --clc-on-info: #FFFFFF;
  /* 앰버만 채움색과 잉크색이 갈린다 — 위 채움(#F2A50C)을 흰 종이에 글자로
     얹으면 2.00:1 이다. 코어의 파생 공식이 `-ink-base` 를 먼저 보므로 여기서
     한 값만 주면 잉크와 그 대비가 따라온다(캔버스 위 4.88 · 워시 위 4.60 —
     `tools/check-button-contract.py` 출력).
     토큰을 코어 뒤가 아니라 여기 두는 이유: 파생식이 var() 참조라 선언 순서와
     무관하게 풀린다 — 코어 뒤에 덧쓰는 방식은 임포트 순서가 바뀌면 조용히 죽는다. */
  --clc-warning-ink-base: #9C6900;
  /* ButtonStyle.Dark = 최대 대비 중립(반전 채움). 이름의 dark 는 테마가 아니라
     자리이므로(언어 §8 함정) 값은 지면을 따라 뒤집힌다. */
  --clc-mist-action-contrast-fill: #1A1922;
  --clc-mist-action-contrast-ink: #FBFBFD;
  /* 중립 액션의 채움 3단. 값은 알파이고 **기준은 지면과의 명도차(ΔL)** 다 —
     라이트는 어두워지며, 다크는 밝아지며 존재를 드러내므로 방향은 반대지만 순서는
     같다: 비활성 < 텍스트 호버 워시 < quiet < neutral.

     입력 재질(`--clc-material-field*`)을 쓰지 않는 이유가 여기 있다. 그건 "파인
     입력" 재질이라 다크에서 종이보다 **밝은** 쪽으로 올라간다(테마 주석 참고).
     버튼 무게로 빌려 쓰면 다크에서 사다리가 뒤집힌다 — 실제로 첫 판이 그랬다
     (quiet L 62.3 > neutral L 46, 종이 위 실측). 그래서 버튼 전용으로 따로 잡는다.

     라이트 캔버스 위 ΔL — 비활성 6.1 · 워시 7.6 · quiet 10.8 · neutral 18.3 */
  --clc-mist-action-quiet-fill: rgba(20, 16, 40, 0.05);
  --clc-mist-action-quiet-wash: rgba(20, 16, 40, 0.035);
  --clc-mist-disabled-fill: rgba(20, 16, 40, 0.028);
  /* 비활성 잉크. 비활성 채움(위 `--clc-mist-disabled-fill`) 위에서 재서 삼차 잉크보다
     한 단 진하게 잡는다 — 비활성 채움이 지면을 한 번 더 어둡게 깔아 같은 잉크라도 거기서
     더 내려가기 때문이다(캔버스 위 비활성 채움 4.35 · 종이 위 4.98 · 맨 캔버스 4.60).
     진하게 잡는 방향인 이유: 옅은 쪽(#94929E 급)은 삼차와 ΔE 8 을 벌 수는 있지만 비활성
     채움 위 2.44:1 로 내려가 `tools/check-button-contract.py` 의 비활성 바닥(3:1)을 깬다.
     삼차 잉크가 캔버스 바닥에 맞춰 #8A8894 → #7F7D8A 로 내려왔으므로 여기도 같이 내렸다.
     둘의 거리는 ΔE76 8.38(CIEDE2000 8.34)로, 옛 값 쌍의 8.25 와 같은 급이다 — 보조 정보와
     "누를 수 없음"이 한 화면에서 섞이지 않으려면 이만큼 벌어져 있어야 한다.
     본문 16.87 · 보조 6.53(둘 다 종이 위)과는 여전히 뚜렷이 다르다.
     색은 잉크 가족 그대로다 — 무채색에 미세한 보라 기운(Lab a 3.6 · b -7.0)이고 명도만
     한 단 내렸다. 한 토큰만 순회색으로 빼면 옆의 물린 잉크들이 누렇게 보인다. */
  --clc-mist-disabled-ink: #6A6875;
  /* 고대비 모드 전용 비활성 잉크. 모드는 삼차 잉크를 보조(#5C5A68)로 올리는데, 위 값은 캔버스
     바닥에 맞춰 한 단 내린 값이라 그 보조와 ΔE76 5.77 밖에 벌어지지 않는다 — 바로 위 주석이
     정한 ΔE ≥ 8 바닥 아래이고, 내리기 **전** 값(#75737F, ΔE 10.22)보다도 나쁘다. 대비가 더
     필요해 모드를 켠 사람의 화면에서 "누를 수 없음"이 가장 흐려지는 셈이라, 모드 안에서만
     내리기 전 값으로 되돌린다. 그 값은 비활성 채움 위 3.71:1 이라
     `tools/check-button-contract.py` 의 비활성 바닥(3:1)도 지킨다
     (실측 — #6A6875 4.35 · #75737F 3.71 · #7A7885 3.45 · #7F7D8A 3.22).
     기본 모드의 값과 이름을 나누는 이유는 비활성 잉크가 삼차 잉크를 **따라가면 안 되기**
     때문이다(코어 모드 블록의 같은 주석) — 참조로 이으면 모드에서 함께 올라간다. */
  --clc-mist-disabled-ink-contrast: #75737F;
  /* 프리즘 램프 — "이 입력은 AI에게 간다"는 표시에 쓰는 굴절광.
     액센트 보라에서 출발해 한 바퀴 돌아 보라로 닫는다. 흰 지면에서는 밝기 차이가
     곧 가시성이라 네 색을 L 0.620 등명도로 맞췄다(|ΔL vs 흰색| 전부 0.380 —
     옛 램프는 0.236~0.372 로 들쭉날쭉해 청록부터 사라졌다). 어두운 쪽으로 맞추면
     sRGB 가 담는 채도가 더 커서 대비와 채도가 함께 오른다(1.11~1.60배). 색조는
     옛 램프 그대로다. 소비처는 채팅 컴포저·런처, 그리고 `IconGradients.Prism`
     (SvgIcon)도 이 값을 쓴다. 세기 보정은 파일 끝(코어 임포트 아래)에 있다. */
  --clv-prism-1: #8A62FF;
  --clv-prism-2: #008DDC;
  --clv-prism-3: #009D7B;
  --clv-prism-4: #D445A3;
  /* 강조 프리즘 램프 — "다음은 여기"(가이드가 가리키는 한 곳)에 쓰는 굴절광.
     AI 프리즘과 뜻이 섞이지 않게 액센트 호만 쓴다: 청보라 h288 → 보라 h308 → 난초 h330.
     파랑·청록이 없으니 AI 램프와 한눈에 갈린다. 명도는 AI 램프와 같은 L 0.620 등명도라
     흰 지면·물린 바닥 위에서 세 색이 같은 무게로 선다. 코어에 기본값이 없어 이 자리(위
     `:root`)에서도 동작한다. 세기 보정은 파일 끝(코어 임포트 아래)에 있다. */
  --clv-emphasis-prism-1: #8565FF;
  --clv-emphasis-prism-2: #AB54E9;
  --clv-emphasis-prism-3: #C54EBE;
  /* 잉크 (무채색 위계, 미세한 보라 기운) */
  --clc-base-900: #1A1922;
  --clc-base-600: #4A4956;
  --clc-base-500: #5C5A68;
  --clc-base-400: #8A8894;
  --clc-base-300: #B6B4C0;
  --clv-text-primary: #1A1922;
  --clv-text-secondary: #5C5A68;
  /* 삼차 잉크는 흰 바닥을 전제로 고른 값(#8A8894)이었다. 바닥이 캔버스(#ECEBEF)로 내려앉으면
     같은 값이 2.93:1 까지 떨어져 "옅은 보조"가 아니라 "안 읽히는 글자"가 된다. 한 단 진하게
     잡아 캔버스 3.40 · 종이 3.91 · 흰색 4.04 로 되돌린다(옛 값은 2.93 · 3.37 · 3.48).
     AA(4.5:1)에는 아직 못 미친다 — 캔버스 위에서 AA 를 채우려면 #6B6977 급으로 내려가야 하고
     그러면 보조 잉크(#5C5A68)와 섞인다. 위계를 지키느냐 AA 를 채우느냐는 오너 결정으로 남긴다.
     `--clc-base-400` 은 잉크가 아니라 무채색 눈금이라 그대로 둔다. */
  --clv-text-tertiary: #7F7D8A;
  /* 파랑 틴트가 남는 base 배경 중화 */
  --clc-base-background-color: #FAFAFC;
  /* L0 캔버스 — 평평한 안개 **한 색**. 앱의 페이지 바닥(`--clv-background`)이 곧 이 값이다.
     둘을 잇는 이유: 바닥을 그리는 자리가 두 군데(테마의 body 와 셸 루트)인데 서로 다른
     색을 쥐고 있으면, 셸이 캔버스를 가리는 화면에서는 흰 판이 되고 안 가리는 화면에서는
     안개가 된다 — 같은 앱에서 두 바닥이 나온다. 한 토큰이 두 자리를 다 먹인다.
     **불투명이어야 한다**: 채팅 마스크·sticky 페이드·푸터 밴드가 "여기서 바닥으로 사라진다"의
     정지점으로 이 색을 읽는다. 그라디언트로는 정지점이 가리킬 한 색이 없다.
     비-Mist 테마는 건드리지 않는다 — 코어(`_clevi-light-core.scss`)의 흰 바닥 그대로다.
     톤 드리프트 세 색(`--clc-mist-drift-a/b/c`)은 없앴다. 근거는 코어의 body 규칙 주석. */
  --clc-body-background-color: #ECEBEF;
  --clv-background: var(--clc-body-background-color);
  /* 재질 토큰 (신설) */
  --clc-material-shell: rgba(250, 250, 252, 0.60);
  --clc-material-shell-static: rgba(250, 250, 252, 0.88);
  --clc-material-paper: rgba(255, 255, 255, 0.82);
  /* 베일 알파는 스크림 딤과 **곱해진다** — 근거는 아래 스크림 주석 참고.
     예전 값(.76)은 딤(.24)과 곱해 18.2% 만 통과시켜, 44px blur 를 켜 두고도
     뒤 화면이 거의 안 비쳤다(실측 구조 잔존 11.8%). `-static` 은 blur 가 없는
     폴백이라 불투명에 가깝게 둔다. */
  --clc-material-veil: rgba(252, 252, 254, 0.68);
  --clc-material-veil-static: rgba(252, 252, 254, 0.95);
  --clc-material-blur-shell: blur(32px) saturate(1.4);
  --clc-material-blur-veil: blur(44px) saturate(1.6);
  /* 기기가 버거울 때 쓰라고 테마가 함께 내놓는 절반 값.
     예전에는 테마가 `(pointer: coarse)`를 보고 이 값을 스스로 밀어넣었는데,
     그건 화면 크기로 기기 성능을 단정하는 것이었다. 이제 값만 내놓고
     "언제 쓸지"는 소비처가 정한다. */
  --clc-material-blur-shell-lite: blur(16px) saturate(1.3);
  --clc-material-blur-veil-lite: blur(22px) saturate(1.4);
  /* L2⁺ 크롬 — 콘텐츠 **위에** 겹쳐 뜨는 작은 표면(툴바 pill·커버 액션·캐러셀 nav·
     sticky 바). 종이(L2)는 계약상 blur 없는 반투명이라 캔버스 위에 "놓이는" 카드
     전용이다. 같은 재질이 콘텐츠를 덮으면 뒤 글자가 그대로 비친다 — 떠 있으면 blur.
     베일(L3)보다 반경이 짧은 것은 덮는 면적이 작아 대비만 확보하면 되기 때문이고,
     그만큼 큰 표면보다 자주 그려져도 성능 예산 안에 든다. */
  --clc-material-chrome: rgba(255, 255, 255, 0.72);
  --clc-material-chrome-static: rgba(255, 255, 255, 0.96);
  --clc-material-blur-chrome: blur(20px) saturate(1.4);
  --clc-material-blur-chrome-lite: blur(12px) saturate(1.3);
  /* 스크림 — 오버레이가 뜰 때 앱을 뒤로 물리는 딤(L3 뒤).
     Mist 는 어둡게 덮어서가 아니라 **초점을 빼서** 물린다. 뒤를 흐리면 같은 분리를
     더 옅은 딤으로 얻고, 뒤에 무엇이 있었는지 맥락은 남는다 — 그래서 딤은 예전
     (base-900 × 0.5)보다 옅다. 반경이 베일(44px)보다 짧은 것은 딤이 대비의 절반을
     이미 감당하기 때문이고, 스크림은 화면 전체를 덮는 가장 비싼 blur 라 예산도
     여기서 아낀다. `-static` 은 투명도 줄이기·저사양에서 blur 없이 같은 분리를
     내야 하므로 더 짙다.

     **딤과 베일은 곱해진다.** 다이얼로그 뒤 화면이 최종 픽셀에 기여하는 비율은
     `(1 - 베일알파) x (1 - 딤알파)` 다 — 스크림이 먼저 화면 전체를 덮고, 그 위를
     베일이 또 덮기 때문이다. 이 두 값을 만질 때는 곱을 함께 보라 — 한쪽만 조이면
     비싼 blur 를 켜 둔 채로 결과만 단색이 된다. */
  --clc-material-scrim: rgba(24, 18, 46, 0.24);
  --clc-material-scrim-static: rgba(24, 18, 46, 0.46);
  --clc-material-blur-scrim: blur(14px) saturate(1.1);
  --clc-material-blur-scrim-lite: blur(8px) saturate(1.05);
  --clc-material-hairline: rgba(22, 18, 38, 0.09);
  --clc-material-hairline-strong: rgba(22, 18, 38, 0.16);
  --clc-material-specular: rgba(255, 255, 255, 0.60);
  /* 깊이(elevation) — 표면 외곽 보더를 대체하는 그림자 램프 (표면·깊이 정책).
     0=컨트롤 미세 높이 · 1=카드 기본 · 2=호버 리프트/떠 있는 표면.
     라이트는 그림자가 위계를 만들고, 다크는 표면 밝기 단계가 만든다. */
  --clc-material-elevation-0: 0 1px 2px rgba(20, 14, 45, 0.08);
  --clc-material-elevation-1: 0 1px 2px rgba(20, 14, 45, 0.05), 0 6px 20px rgba(20, 14, 45, 0.07);
  --clc-material-elevation-2: 0 2px 4px rgba(20, 14, 45, 0.06), 0 14px 36px rgba(20, 14, 45, 0.10);
  /* L3 베일(다이얼로그)의 그림자 — 한 겹. 화면을 점유하고 뒤를 물리는 표면은 카드·크롬의
     2겹 램프(가까운 윤곽 + 먼 번짐)가 아니라 멀리 깔리는 한 겹으로 뜬다 — 윤곽은 이미
     스크림이 뒤를 물려서 선다. 값은 베이스 코어 `--clc-shadow-layer3-2` 와 같다:
     다이얼로그가 그 레거시 이름을 직접 읽던 것을 언어 토큰으로 올렸을 뿐 그림은 그대로다. */
  --clc-material-veil-shadow: 0 25px 45px 0 rgba(0, 0, 0, 0.17);
  /* 셸(L1) 가장자리 — 헤어라인 대신 그림자가 캔버스와 분리한다 */
  --clc-material-shell-shadow: 0 1px 2px rgba(20, 14, 45, 0.04), 0 8px 28px rgba(20, 14, 45, 0.06);
  /* 종이보다 한 단계 떠 있는 표면 (보조 버튼·강조 카드) */
  --clc-material-paper-raised: rgba(255, 255, 255, 0.94);
  /* 입력 재질 (L2⁻) — 종이 위에서 한 단계 안쪽으로 파인 자리.
     종이(카드)와 입력이 같은 재질이면 "입력하는 곳"이 안 읽힌다.
     라이트는 종이보다 어둡게, 다크는 밝게 간다 — 방향은 지면이 정하고
     원칙은 "어느 방향이든 배경과 명도차를 확보한다" 하나다.
     2026-08-14 borderless 개정: 보더 없이 파인 배경만으로 구분하므로 배경을
     반 단계 진하게 올렸고, `-strong` 은 호버(깊이 반응) 단계다.
     `-border` 토큰들은 소비처 호환용으로만 남긴 transparent 다. */
  --clc-material-field: rgba(20, 16, 40, 0.07);
  --clc-material-field-strong: rgba(20, 16, 40, 0.11);
  --clc-material-field-border: transparent;
  /* 캔버스 위에 떠 있는 입력(하단 독 옴니박스·채팅 컴포저)은 반대로 "뜬 종이".
     가장 자주 손이 가는 표면이라 그림자로 높이까지 준다. */
  --clc-material-field-raised: #FFFFFF;
  --clc-material-field-raised-border: transparent;
  --clc-material-field-raised-shadow: 0 4px 14px rgba(20, 14, 45, 0.12), 0 1px 3px rgba(20, 14, 45, 0.08);
  /* 채팅 입력은 베이스 테마에서 `--clc-body-background-color`, 곧 캔버스와 같은 값이었다 —
     정의상 배경과 구분될 수 없었다. 화면에서 가장 자주 손이 가는 표면이므로 뜬 종이로 올린다. */
  --clv-chat-input-bg: var(--clc-material-field-raised);
  --clv-chat-input-border: var(--clc-material-field-raised-border);
  /* 보낸 버블 — 코어 값(#E5F3FF)은 Mist 가 쓰지 않는 하늘색 잔재였다. 받은 버블(뜬 종이,
     캔버스 위 #FEFEFE)과의 거리가 ΔE76 8.9 뿐이라 흰 바닥에서는 두 버블이 비슷한 밝은 판이었다.
     액센트 워시(`--clc-primary-lighter`, 13%)로 옮기면 캔버스 위 #DBD5EF 라 받은 버블과
     ΔE76 19.1 로 벌어진다 — "내가 보낸 것"이 색으로 말한다.
     투명 워시라 놓이는 지면을 탄다(캔버스 위든 종이 위든 같은 방향으로 물든다).
     잉크는 코어의 #333 을 그대로 둔다(워시 위 8.89:1). 램프 짝(`--clc-on-primary-lighter`)으로
     옮기면 5.31:1 로 오히려 내려가고, 이 토큰은 채팅 소비처가 직접 읽는 자리라 이번 변경의
     범위를 넘는다. */
  --chat-bubble-sent-bg: var(--clc-primary-lighter);
  /* 표면 매핑 — L1 셸 */
  --clc-sidebar-background-color: var(--clc-material-shell);
  --clc-header-background-color: var(--clc-material-shell);
  --sidebar-background-color: var(--clc-material-shell);
  --header-background-color: var(--clc-material-shell);
  --clv-sidebar-background: var(--clc-material-shell);
  --clv-sidebar-border: var(--clc-material-hairline);
  /* 셸 표면은 Mist 재질인데 그 위 **상태**는 레거시 불투명값(#383838)으로 남아
     있었다 — 사이드바 선택 행이 캔버스보다 훨씬 밝은 회색 덩어리로 떴다.
     선택은 다른 곳(PanelMenu 활성·탭 선택·그리드 선택)과 같은 액센트 워시다. */
  --clv-sidebar-background-selected: var(--clc-interaction-selected-accent);
  /* 표면 매핑 — L3 베일 */
  --clv-dialog-background: var(--clc-material-veil);
  --clv-modal-overlay: var(--clc-material-scrim);
  /* 표면 매핑 — 흰 바닥을 전제하던 Components 소유 토큰들.
     바닥이 흰색에서 캔버스(#ECEBEF)로 내려앉았는데 아래 토큰들은 코어
     (`_clevi-light-core.scss`)의 리터럴 그대로였다. 라이트에서는 페이지 바닥의 호버(#FAFAFA)가
     캔버스보다 **밝아** Mist 의 호버 어휘("파인 자리 = 어두워진다")가 뒤집혔고, 다크에서는
     캔버스와 무관한 회색 슬래브(#383838)가 얹혔다. 재질·액션 어휘로 옮긴다.
     사이드바 호버(#F0F0F0)는 반투명 셸 위에 불투명 회색 판을 얹던 자리라 같은 처지다. */
  --clv-background-hover: var(--clc-mist-action-quiet-wash);
  --clv-sidebar-background-hover: var(--clc-mist-action-quiet-wash);
  --clv-modal-background: var(--clc-material-paper-raised);
  --clv-border: var(--clc-material-hairline);
  /* `--cl-surface` 는 `--clc-dialog-background-color`(= `--clc-base-200`, 라이트 #E6E6E6)를
     타고 나와 Mist 와 무관한 중간 회색이 된다. 종이로 못 박는다.
     한 단 뜬 짝(`--cl-surface-elevated` = `--clc-assign-base`, #FAFAFA)도 함께 옮긴다 —
     한쪽만 옮기면 "뜬 표면"이 종이보다 어두워져 사다리가 뒤집힌다. */
  --cl-surface: var(--clc-material-paper);
  --cl-surface-elevated: var(--clc-material-paper-raised);
  /* 지오메트리 */
  --clc-border-radius: 6px;
  /* L0 캔버스가 비치도록 레이아웃 본문은 투명 */
  --clc-layout-body-background-color: transparent;
}

/* ==========================================================================
   Mist — 아크릴 재질 구조 레이어 (라이트/다크 공용)
   값은 clevi-mist-light-base.scss / clevi-mist-dark-base.scss 의 :root 토큰이 공급한다.

   원칙
   - 투명도 = 깊이. blur(backdrop-filter)는 떠 있는 표면의 특권:
     L1 셸, L2+ 크롬(메뉴·픽커 팝업), L3 베일(다이얼로그)에만 허용.
   - 콘텐츠(L2)는 blur 없는 반투명 종이. 리스트·채팅 타임라인에 유리 비용 0.
   - blur 반경은 애니메이션하지 않는다(등장은 scale/fade만).
   - 행 템플릿 내부에 backdrop-filter를 넣지 않는다.
   ========================================================================== */
/* ---- L0 캔버스: 평평한 안개 한 색 ----
   방사 그라디언트 세 겹(라벤더·웜·쿨 톤 드리프트)과 `background-attachment: fixed` 를 걷어냈다.
   세 가지 이유다.

   1) 앱에서는 **셸이 같은 토큰을 한 번 더 칠한다.** 뷰포트 크기의 셸 루트가 캔버스를 전부 덮으므로
      body 의 그라디언트는 실제로는 거의 보이지 않았다. 이제 바닥 토큰(`--clc-body-background-color`)
      하나가 body 와 `--clv-background` 를 동시에 먹이므로 두 자리가 같은 색을 칠한다 — 덮여도
      드러나도 같은 바닥이다.
   2) **정지점에는 한 색이 필요하다.** 채팅 마스크·sticky 페이드·푸터 밴드는 "여기서 바닥으로
      사라진다"를 바닥색 하드스톱으로 그린다. 바닥이 자리마다 다른 그라디언트면 그 정지점이
      가리킬 색이 없어 페이드 끝에 단차가 생긴다.
   3) `fixed` 는 **문서가 스크롤하는 페이지**에서 배경을 뷰포트에 고정하므로 스크롤 프레임마다
      메인 스레드 리페인트를 만든다(헤드리스 Edge, DPR 1, 1400px 를 2초 스크롤: Paint 120회 /
      래스터 761 태스크. 같은 화면을 평면으로 두면 Paint 5~6회 / 35~38 태스크). 셸 안에서는
      body 가 스크롤하지 않아 이득이 0 이고, iOS WebKit 은 `fixed` 를 아예 무시한다 —
      "비용은 문서 스크롤 페이지에서만, 이득은 어디에서도 없음"이다.

   캔버스에서 여러 색 빛을 걷어낸 대가로 프리즘(AI 굴절광)만이 유일한 다색 표현으로 남는다. */
body {
  background: var(--clc-body-background-color);
}

/* ---- blur 층 프리미티브 ----
   Mist 의 blur 표면이 공통으로 쓰는 뒷층. 존재 이유는 backdrop root 규칙 하나다:
   `backdrop-filter` 를 선언한 요소는 backdrop root 가 되고, **그 안쪽** 표면의
   backdrop-filter 가 받는 입력은 가장 가까운 root 의 이미지뿐이다 — 투명에서 시작해
   root 안에 칠해진 것만 담는다. root 밖(조상·캔버스)은 샘플되지 않고, root 안 콘텐츠도
   불투명하게 칠해졌을 때만 온전히 흐려진다. 판정은 "흐릴 대상이 가장 가까운 root 안에
   불투명하게 칠해져 있는가" 하나다. 셸·다이얼로그처럼 "안에 다른 떠 있는 표면을 담는"
   재질이 blur 를 자기 자신에 걸면 그 안의 드롭다운은 반투명 재질 + 투명 바닥만 보게 된다.
   그래서 blur 를 자기 자신이 아니라 한 겹 뒤의 층에 건다. 조상의 `filter`·
   `opacity < 1`·`mask`·`clip-path`·`mix-blend-mode` 도 root 를 만들어 같은 판정을 받는다
   (Chromium/Edge 152 관측). `transform`·`will-change: transform`·`contain`·`isolation`·
   `overflow`·`border-radius` 는 root 를 만들지 않는다(같은 관측).

   `z-index: -1` 이라 배경 위·본문 아래에 놓인다. 배경색은 여전히 요소 자신이 가지므로
   소비처의 배경 오버라이드가 지금과 똑같이 듣고, 합성 결과도 예전과 같다 —
   균일한 반투명 틴트를 흐리는 것은 무연산이기 때문이다.
   상단 specular 는 이 층이 진다: 요소의 inset box-shadow 는 배경 단계에서 그려져
   음수 z-index 자식에 가려진다. */
.clc-overlaypanel::before, .clc-dialog::before, .clc-sidebar::before,
.clc-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
  pointer-events: none;
}

/* ---- L1 셸: 사이드바·헤더 = 아크릴 ----
   표면·깊이 정책: 셸/캔버스 분리는 재질(아크릴)과 그림자가 담당한다 —
   가장자리 헤어라인 금지. */
.clc-sidebar,
.clc-header {
  box-shadow: var(--clc-material-shell-shadow);
  /* 상시 blur 표면은 자체 레이어로 승격해 리페인트 격리 */
  will-change: transform;
}

.clc-header {
  /* blur 층(::before)의 컨테이닝 블록. `.clc-sidebar` 는 이미 fixed 라 필요 없다.
     헤더는 will-change 로 이미 자체 레이어여서 positioned 가 되어도 합성 순서는 그대로다. */
  position: relative;
}

.clc-sidebar::before,
.clc-header::before {
  -webkit-backdrop-filter: var(--clc-material-blur-shell);
  backdrop-filter: var(--clc-material-blur-shell);
}

.clc-sidebar {
  border-right: 0;
}

.clc-header {
  border-bottom: 0;
}

/* ---- L3 베일: 다이얼로그·오버레이 패널 ----
   표면·깊이 정책: 외곽 보더 없이 베일 재질 + 층 그림자 + 스펙큘러로 뜬다. */
/* 다이얼로그는 안에 또 다른 떠 있는 표면(드롭다운·팝오버·시트)을 담는다.
   그래서 blur 는 자기 자신이 아니라 뒷층이 진다 — `%mist-blur-layer` 주석 참고.
   그림자는 한 겹인 베일 전용 토큰이다(값과 근거는 지면 베이스). 예전에는 베이스 코어의
   `--clc-shadow-layer3-2` 를 직접 읽어, 언어 토큰만 이식하는 스택에서는 이 층의 깊이가
   빠졌다. (`.clc-overlaypanel` 은 이 토큰이 아니라 아래에서 따로 layer2-2 를 읽는다.) */
.clc-dialog {
  background-color: var(--clc-material-veil);
  border: none;
  border-radius: var(--clc-mist-radius-dialog);
  box-shadow: var(--clc-material-veil-shadow);
}

.clc-dialog::before {
  -webkit-backdrop-filter: var(--clc-material-blur-veil);
  backdrop-filter: var(--clc-material-blur-veil);
}

.clc-dialog-titlebar {
  background-color: transparent;
}

/* ---- 스크림: 오버레이 뒤를 덮는 딤 ----
   베이스 테마는 `base-900` 을 `opacity: .5` 로 덮는다. Mist 는 어둡게 덮는 대신
   **초점을 뺀다** — 뒤 화면을 흐리면 더 옅은 딤으로 같은 분리를 얻고, 다이얼로그가
   "떠 있는 유리"라는 재질 이야기도 뒤 화면까지 이어진다.

   `opacity` 를 1 로 되돌리는 것이 이 규칙의 핵심이다. 요소 opacity 는 backdrop-filter
   **결과까지** 함께 흐리게 섞어서(= 선명한 원본과 반반 합성) blur 가 반만 듣는다.
   딤의 세기는 opacity 가 아니라 스크림 색의 알파가 진다.

   딤과 다이얼로그 표면은 형제라서, 스크림의 backdrop-filter 가 `.clc-dialog` 의
   베일 blur 를 막지 않는다(backdrop root 는 조상에만 걸린다). */
.clc-dialog-mask {
  background-color: var(--clc-material-scrim);
  opacity: 1;
  -webkit-backdrop-filter: var(--clc-material-blur-scrim);
  backdrop-filter: var(--clc-material-blur-scrim);
}

.clc-overlaypanel {
  background-color: var(--clc-material-veil);
  border: none;
  border-radius: var(--clc-mist-radius-surface);
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-shadow-layer2-2);
}

.clc-overlaypanel::before {
  -webkit-backdrop-filter: var(--clc-material-blur-veil);
  backdrop-filter: var(--clc-material-blur-veil);
}

/* ---- L2+ 크롬: 메뉴·선택기·픽커 팝업 ----
   이 표면들은 화면을 점유하는 베일이 아니라 콘텐츠 위를 잠깐 덮는 작은 도구다.
   실제 배경을 그리는 안쪽 요소까지 지정해야 베이스 테마의 불투명 배경이 아크릴을
   가리지 않는다. 정적인 중첩 메뉴에는 blur 를 걸지 않고, absolute flyout만 크롬이다. */
.clc-dropdown-panel,
.clc-multiselect-panel,
.clc-autocomplete-panel,
.clc-splitbutton-menu,
.clc-datepicker-popup-container,
.clc-timespanpicker-popup-container,
.clc-colorpicker-popup,
:root .clc-context-menu > .clc-menu,
:root ul.clc-profile-menu > .clc-navigation-item > .clc-navigation-menu,
:root :not(.clc-context-menu) > .clc-menu:not(.clc-profile-menu) > .clc-navigation-item > .clc-navigation-menu {
  background-color: var(--clc-material-chrome);
  -webkit-backdrop-filter: var(--clc-material-blur-chrome);
  backdrop-filter: var(--clc-material-blur-chrome);
  border: none;
  border-radius: var(--clc-mist-radius-surface);
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-2);
}

/* 메뉴 안의 flyout은 이미 blur를 가진 크롬의 자손이다. 자손에 backdrop-filter를
   반복하면 조상 backdrop root 때문에 콘텐츠를 샘플하지 못하므로 정적 크롬으로 분리한다. */
:root .clc-context-menu > .clc-menu .clc-navigation-menu,
:root ul.clc-profile-menu .clc-navigation-menu .clc-navigation-menu,
:root .clc-menu-flyout:not(.clc-profile-menu) .clc-navigation-menu .clc-navigation-menu {
  background-color: var(--clc-material-chrome-static);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  border-radius: var(--clc-mist-radius-surface);
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-2);
}

/* DropDownDataGrid의 lookup panel은 이미 크롬인 dropdown panel 안쪽 콘텐츠다.
   이 층이 다시 불투명 배경/blur를 가지면 바깥 아크릴을 가리고 backdrop root를 중첩한다. */
:root :is(.clc-dropdown-panel, .clc-multiselect-panel) > .clc-lookup-panel {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

/* ---- 알림(Notification): 콘텐츠 위에 겹쳐 뜨는 작은 표면 = L2⁺ 크롬 ----
   Mist 가 임포트하는 clevi 코어는 알림을 "배경은 통일, 심각도는 보더 색으로만" 그린다 —
   리터럴 1px 틴트 보더(#7FD89A 등)는 표면 외곽선(1조)이자 보더 색 상태(4조)다. 비-Mist
   clevi 테마는 그대로 두고 이 후순위 레이어에서만 덮는다.
   · 재질: 화면을 점유하지 않고 콘텐츠 옆에 얹혀 함께 읽히는 표면이라 크롬이다. 다만 등장
     애니메이션(`clc-open`, opacity 페이드)이 표면이 아니라 조상 래퍼에 걸려 있어, 페이드 동안
     래퍼가 backdrop root 가 되어 blur 가 끊겼다가 끝나는 순간 튄다. 그래서 blur 없는 정적
     크롬을 쓴다 — 강등 사다리에서도 바뀔 것이 없다. 불투명은 아니다: 96% 라 뒤 글자가 4% 로
     비친다(본문·보조 잉크를 가득 칠한 글자 기준 대비 1.05~1.14:1 — 형태만 어른거리는 고스트이고
     읽히지는 않는다). 완전 불투명으로 올리는 것은 정적 크롬 토큰 자체의 결정이라 여기서 따로
     값을 만들지 않는다.
   · 외곽: 보더는 레이아웃용 1px 투명만 남기고 색은 지운다. 한 변 레일도 쓰지 않는다.
   · 심각도: 아이콘 잉크(의미색 잉크)와 제목 문구가 말한다. 항목 잉크(`--clc-notification-*-color`)
     는 본문 잉크로 되돌린다 — 베이스는 항목 잉크를 채움 위 잉크(`--clc-on-*`)로 두는데, 레거시
     코어가 채움을 중립 배경으로 바꿔 놓아 짝이 갈렸다. 그 잉크를 실제로 받는 것은 `color: inherit`
     인 닫기(×) 버튼 하나이고, 레거시 매핑에서는 그 버튼이 사라졌다(라이트 흰색이 #FAFAFA 위, 다크
     #05331C 등이 #383838 위). 제목·본문은 컴포넌트의 스코프드 CSS(CleviNotificationMessage.razor.css)
     가 `--clc-text-color` 로 따로 칠하므로 이 토큰이 닿지 않는다.
   반경은 토큰으로 준다 — 진행 막대의 안쪽 여백도 같은 토큰을 읽어 모서리와 맞물린다. */
:root {
  --clc-notification-border-radius: var(--clc-mist-radius-surface);
  --clc-notification-success-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-notification-warning-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-notification-error-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-notification-info-color: var(--clv-text-primary, var(--clc-text-color));
  /* 아이콘 색 토큰은 레거시 코어가 `:root` 에 리터럴로 둔 "중립 배경 위 심각도 잉크"다.
     Mist 에서 그 역할의 정본은 의미색 잉크라 같은 자리에서 다시 가리킨다 — 이 토큰을 상태
     글자색으로 빌려 쓰는 소비처(프로젝트 멤버 상태 등)도 함께 대비가 선다(크롬 위
     라이트 5.76~6.81 · 다크 7.35~8.71:1). */
  --clc-notification-success-icon-color: var(--clc-mist-ink-success);
  --clc-notification-warning-icon-color: var(--clc-mist-ink-warning);
  --clc-notification-error-icon-color: var(--clc-mist-ink-danger);
  --clc-notification-info-icon-color: var(--clc-mist-ink-info);
}

/* 레거시 코어의 `.clc-notification-{severity} .clc-notification-item`(0,2,0)이 배경·보더 색·
   그림자를 리터럴로 직접 말하므로 토큰만으로는 못 덮는다. 같은 특이성의 뒤 규칙으로 덮는다 —
   래퍼 기준 선택자라 심각도 클래스가 없는 알림까지 한 번에 맞는다. */
.clc-notification-item-wrapper > .clc-notification-item {
  background: var(--clc-material-chrome-static);
  border-color: transparent;
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-2);
}

/* 버튼의 색·재질은 아래 "버튼" 절 하나가 소유한다. 예전에는 잉크만 여기서
   따로 고쳐 배경과 짝이 갈렸다 — 배경은 코어가, 잉크는 Mist 가 정하던 자리에서
   다크 Light 버튼이 연보라 위 흰 글씨(1.19:1)가 됐다. */
/* ==========================================================================
   컴포넌트 레이어 — 고빈도 컨트롤의 Mist 재질/지오메트리
   콘텐츠 층(L2)이므로 전부 blur 없는 종이 + 깊이(그림자·스펙큘러).
   표면·깊이 정책: 표면 외곽 보더 금지 — 헤어라인은 표면 안 분리선에만.
   값은 재질 토큰 간접 참조라 라이트/다크 공용이다.
   ========================================================================== */
:root {
  /* 카드 표면 계약 — 클라이언트 surface.css 시맨틱(--clv-card-*)의 Mist 값.
     외곽 보더 대신 표면색 + 깊이 그림자 + 스펙큘러 (표면·깊이 정책 1항). */
  --clv-card-surface: var(--clc-material-paper);
  --clv-card-border-color: transparent;
  --clv-card-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-1);
  --clv-card-shadow-hover: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-2);
  /* 오버레이 표면 계약(`--clv-overlay-*`)의 외곽선도 같은 1항이다. surface.css 의 바닥값은
     헤어라인이라 `.clv-surface-overlay` 와 소비처가 `border: 1px solid var(--clv-overlay-border-color)`
     로 외곽을 그어 왔다 — 카드와 달리 Mist 가 이 토큰을 덮지 않아 선이 그대로 남았다.
     선언은 1px 로 두어 박스 크기를 지키고 색만 비운다(강제 색상 모드의 경계는 그 1px 가 진다). */
  --clv-overlay-border-color: transparent;
  /* 상호작용 상태를 액센트에 종속시켜 테마 색과 자동 동기화 */
  /* 포커스 표시 = 빛이 고인 자리 (오너 방향 확정 2026-08-27). Mist 는 빛·그림자·
     가려짐·깊이의 시스템이고 상태도 그 어휘로 말한다 — 호버가 그림자(자리 깊이 한
     단계)로 반응한다면, 포커스는 빛으로 반응한다. **단색** 액센트 블룸이라 다색
     굴절광인 프리즘("여기는 AI를 향한다")과 뜻이 겹치지 않는다.
     선은 긋지 않는다 — 크리스프한 심(0-blur 스프레드)은 결국 보더로 읽혀서 뺐다.
     두 층이고 가려짐을 계산에 넣는다 — 입력은 대개 스크롤되는 다이얼로그 본문
     (overflow) 안이라 바깥 번짐이 조상에게 잘린다(실측):
     ① 12px 부드러운 번짐 = 여유 있는 맥락에서 빛으로 읽히는 층
     ② 자리 워시(배경) = 번짐이 전부 잘리는 최악의 맥락에서도 켜졌음이 보인다.
     소비처는 조립된 그림자 토큰 하나를 읽는다: 각자 조립하면 세기가 흩어지고,
     표현을 바꿀 때마다 전수 수정이 된다. */
  --clc-mist-focus-bloom: color-mix(in srgb, var(--clc-primary) 26%, transparent);
  --clc-mist-focus-wash: color-mix(in srgb, var(--clc-primary) 9%, var(--clc-material-field-strong));
  --clc-mist-focus-shadow: 0 0 12px 2px var(--clc-mist-focus-bloom);
  --clc-interaction-selected-accent: color-mix(in srgb, var(--clc-primary) 15%, transparent);
  /* 버튼 상태는 그라데이션·선이 아니라 깊이와 빛으로 표현한다. */
  --clc-button-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
  --clc-button-state-shadow: var(--clc-button-shadow);
  --clc-button-hover-gradient: none;
  --clc-button-hover-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-1);
  --clc-button-focus-gradient: none;
  --clc-button-focus-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
  --clc-button-focus-outline: none;
  --clc-button-active-gradient: none;
  --clc-button-active-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
  --clc-button-disabled-opacity: 1;
  --clc-button-empty-opacity: 1;
  /* ---- 의미색 잉크·워시 (언어 §8) — 관용구에서 토큰으로 ----
     채우지 않는 변형(Text/Outlined)은 색을 배경이 아니라 **잉크**로 말한다.
     그러려면 같은 이름이 두 가지 일을 해야 한다: 채움색은 잉크를 얹을 만큼 밝고,
     잉크색은 종이 위에서 읽힐 만큼 진해야 한다. 한 값이 둘 다 되지는 않는다.

     잉크는 의미색을 **15% 만** 본문 잉크 쪽으로 당긴다(위험·오류만 25%, 근거는
     아래 그 줄의 주석). 색상은 사실상 그대로
     남고(빨강은 빨강으로 읽힌다) 대비만 한 단 오른다 — 옛 초안의 50% 혼합은
     대비는 넉넉했지만 다크에서 네 의미색이 전부 흰빛 파스텔로 수렴해 "의미색"이
     아니게 됐다. 워시(호버 자리)는 10%.

     기준 지면은 종이가 아니라 **캔버스**다. 버튼은 카드 안에도 있지만 툴바·사이드바
     처럼 캔버스 위에 바로 놓이는 자리가 더 많고, 라이트 캔버스(#ECEBEF)가 종이
     (#FBFBFD)보다 어두워 여기가 최악이다. 종이 기준으로 잡으면 통과해 보이지만
     실제 화면에서 AA 아래로 내려간다 — 실제로 첫 판이 그렇게 잡혀 라이트 호버가
     4.16~4.37 이었다. 지금 조합의 최악은 4.60:1(라이트 경고, 워시 위 —
     `tools/check-button-contract.py` 출력)이다.

     파생이라 의미색을 바꾸면 잉크와 워시가 **따라온다** — 손으로 고른 리터럴이
     액센트를 안 따라오던 문제를 이 자리에서 닫는다.

     예외 하나 — 라이트 경고는 지면 베이스가 잉크의 씨앗을 따로 준다. 앰버는
     채움으로 쓰려면 밝아야 하고(#F2A50C + 진한 잉크 8.43:1) 잉크로 쓰려면
     진해야 하는데(#F2A50C 를 흰 종이에 얹으면 2.00:1) 한 값이 둘 다 될 수 없다. */
  --clc-mist-ink-primary: color-mix(in srgb, var(--clc-primary) 85%, var(--clv-text-primary));
  --clc-mist-ink-success: color-mix(in srgb, var(--clc-success) 85%, var(--clv-text-primary));
  --clc-mist-ink-warning: color-mix(in srgb, var(--clc-warning-ink-base, var(--clc-warning)) 85%, var(--clv-text-primary));
  /* 위험·오류만 25% 다. 이 둘은 여섯 의미색 중 **자기 색 워시를 얹은 자리 위**에 놓이는
     유일한 잉크이기 때문이다 — 오류 필드의 라벨은 필드 재질 + 위험 워시 두 겹 위에 서고,
     그 자리는 지면보다 한 단 어둡다(라이트 캔버스 #ECEBEF → 자리 #DACCCF). 15% 로는
     그 자리에서 4.09:1 로 AA 아래였다(`tools/check-button-contract.py` (j)). 25% 로 당기면
     문구@지면 6.14 · 라벨@자리 4.69(다크 7.76 · 4.90)로 둘 다 AA 를 넘는다.
     방향은 두 지면 모두 안전하다 — 혼합을 본문 잉크 쪽으로 미는 것이라 라이트는 진해지고
     다크는 밝아진다. 나머지 넷은 그런 자리가 없어 15% 그대로다.
     위험과 오류를 같이 옮기는 이유: 두 씨앗(`--clc-danger` · `--clc-error`)이 같은 값이라
     한쪽만 옮기면 같은 뜻의 빨강 두 개가 화면에서 다른 색으로 갈린다. */
  --clc-mist-ink-danger: color-mix(in srgb, var(--clc-danger) 75%, var(--clv-text-primary));
  --clc-mist-ink-error: color-mix(in srgb, var(--clc-error) 75%, var(--clv-text-primary));
  --clc-mist-ink-info: color-mix(in srgb, var(--clc-info) 85%, var(--clv-text-primary));
  --clc-mist-wash-primary: color-mix(in srgb, var(--clc-primary) 10%, transparent);
  --clc-mist-wash-success: color-mix(in srgb, var(--clc-success) 10%, transparent);
  --clc-mist-wash-warning: color-mix(in srgb, var(--clc-warning) 10%, transparent);
  --clc-mist-wash-danger: color-mix(in srgb, var(--clc-danger) 10%, transparent);
  --clc-mist-wash-error: color-mix(in srgb, var(--clc-error) 10%, transparent);
  --clc-mist-wash-info: color-mix(in srgb, var(--clc-info) 10%, transparent);
  /* ---- 밝기 변형 램프 — 지면의 두 끝에서 파생 ----
     `-lighter` / `-light` / `-dark` / `-darker` 는 컴포넌트의 Shade 사다리다
     (`.clc-button.clc-shade-dark` · 배지 · 칩 · 알림 · 유틸리티 클래스가 소비한다).
     예전에는 전부 손으로 고른 리터럴이었고, 그래서 베이스 색을 바꿔도 따라오지
     않았다 — 2026-09-01 의미색 개편 뒤 실제로 `--clc-success` 는 초록인데
     `--clc-success-light` 는 연두(#c6ffaa), `--clc-info-dark` 는 청록(#086791)으로
     남아 있었다. 두 지면이 같은 값이라 지면도 따라가지 않았다.

     이제 지면이 두 끝(`--clc-shade-ground` / `-far`)만 정하고 램프는 여기서 나온다.
     비율은 손으로 고른 primary 램프를 두 지면 모두 재현하도록 맞춘 값이다
     (라이트 #D8CCFB/#5737B6/#372961 · 다크 #CBB8FF/#E2D8FD 대비 오차 한 자릿수).
     표면×잉크 대비는 지면마다 `-lighter` 를 뺀 열여덟 쌍 최악 6.47:1(라이트 경고 `-dark`),
     `-lighter` 까지 넣은 스물네 쌍 최악 4.99:1(라이트 위험·오류 `-lighter`, 캔버스 위) —
     `tools/check-button-contract.py` 출력.

     예외는 앰버 하나다. 채움색(#F2A50C)을 그대로 어둡게 끌면 흰 잉크가 3.15:1 로
     내려간다 — `-dark` 계열만 잉크 씨앗(`--clc-warning-ink-base`)에서 출발한다.
     `-light` 는 여전히 채움색에서 나온다. 밝은 쪽은 앰버여야 앰버로 읽힌다.

     `error` 는 여기서 처음 정의된다. 옛 테마에는 정의가 아예 없어 88곳이
     정의되지 않은 토큰을 참조하고 있었다. */
  --clc-primary-lighter: color-mix(in srgb, var(--clc-primary) var(--clc-shade-wash), transparent);
  --clc-primary-light: color-mix(in srgb, var(--clc-primary) 34%, var(--clc-shade-ground));
  --clc-primary-dark: color-mix(in srgb, var(--clc-primary) 78%, var(--clc-shade-far));
  --clc-primary-darker: color-mix(in srgb, var(--clc-primary) 52%, var(--clc-shade-far));
  --clc-on-primary-lighter: var(--clc-primary-dark);
  --clc-on-primary-light: var(--clc-shade-ground-ink);
  --clc-on-primary-dark: var(--clc-shade-far-ink);
  --clc-on-primary-darker: var(--clc-shade-far-ink);
  --clc-success-lighter: color-mix(in srgb, var(--clc-success) var(--clc-shade-wash), transparent);
  --clc-success-light: color-mix(in srgb, var(--clc-success) 34%, var(--clc-shade-ground));
  --clc-success-dark: color-mix(in srgb, var(--clc-success) 78%, var(--clc-shade-far));
  --clc-success-darker: color-mix(in srgb, var(--clc-success) 52%, var(--clc-shade-far));
  --clc-on-success-lighter: var(--clc-success-dark);
  --clc-on-success-light: var(--clc-shade-ground-ink);
  --clc-on-success-dark: var(--clc-shade-far-ink);
  --clc-on-success-darker: var(--clc-shade-far-ink);
  --clc-warning-lighter: color-mix(in srgb, var(--clc-warning) var(--clc-shade-wash), transparent);
  --clc-warning-light: color-mix(in srgb, var(--clc-warning) 34%, var(--clc-shade-ground));
  --clc-warning-dark: color-mix(in srgb, var(--clc-warning-ink-base, var(--clc-warning)) 78%, var(--clc-shade-far));
  --clc-warning-darker: color-mix(in srgb, var(--clc-warning-ink-base, var(--clc-warning)) 52%, var(--clc-shade-far));
  --clc-on-warning-lighter: var(--clc-warning-dark);
  --clc-on-warning-light: var(--clc-shade-ground-ink);
  --clc-on-warning-dark: var(--clc-shade-far-ink);
  --clc-on-warning-darker: var(--clc-shade-far-ink);
  --clc-danger-lighter: color-mix(in srgb, var(--clc-danger) var(--clc-shade-wash), transparent);
  --clc-danger-light: color-mix(in srgb, var(--clc-danger) 34%, var(--clc-shade-ground));
  --clc-danger-dark: color-mix(in srgb, var(--clc-danger) 78%, var(--clc-shade-far));
  --clc-danger-darker: color-mix(in srgb, var(--clc-danger) 52%, var(--clc-shade-far));
  --clc-on-danger-lighter: var(--clc-danger-dark);
  --clc-on-danger-light: var(--clc-shade-ground-ink);
  --clc-on-danger-dark: var(--clc-shade-far-ink);
  --clc-on-danger-darker: var(--clc-shade-far-ink);
  --clc-error-lighter: color-mix(in srgb, var(--clc-error) var(--clc-shade-wash), transparent);
  --clc-error-light: color-mix(in srgb, var(--clc-error) 34%, var(--clc-shade-ground));
  --clc-error-dark: color-mix(in srgb, var(--clc-error) 78%, var(--clc-shade-far));
  --clc-error-darker: color-mix(in srgb, var(--clc-error) 52%, var(--clc-shade-far));
  --clc-on-error-lighter: var(--clc-error-dark);
  --clc-on-error-light: var(--clc-shade-ground-ink);
  --clc-on-error-dark: var(--clc-shade-far-ink);
  --clc-on-error-darker: var(--clc-shade-far-ink);
  --clc-info-lighter: color-mix(in srgb, var(--clc-info) var(--clc-shade-wash), transparent);
  --clc-info-light: color-mix(in srgb, var(--clc-info) 34%, var(--clc-shade-ground));
  --clc-info-dark: color-mix(in srgb, var(--clc-info) 78%, var(--clc-shade-far));
  --clc-info-darker: color-mix(in srgb, var(--clc-info) 52%, var(--clc-shade-far));
  --clc-on-info-lighter: var(--clc-info-dark);
  --clc-on-info-light: var(--clc-shade-ground-ink);
  --clc-on-info-dark: var(--clc-shade-far-ink);
  --clc-on-info-darker: var(--clc-shade-far-ink);
  /* ---- 중립 액션 사다리 ----
     의미 없는 버튼도 무게가 여럿이다. 구분하지 않으면 Light 와 Secondary 가 같은
     회색이 되어 호출부가 아무거나 고르게 된다. 비활성도 같은 사다리 위에 있다.

       비활성   지면 소유      + 가라앉은 잉크  누를 수 없음
       워시     지면 소유                       Text 변형의 호버 자리
       quiet    지면 소유      + 본문 잉크      ButtonStyle.Light — 사이드바 행·툴바
       neutral  paper-raised   + 본문 잉크      Secondary/Base — 다이얼로그의 "취소"
       contrast 반전 채움      + 반전 잉크      Dark — 의미색을 쓸 수 없는 최고 강조

     순서의 기준은 색이 아니라 **지면과의 명도차(ΔL)** 다. 라이트는 어두워지며,
     다크는 밝아지며 존재를 드러내므로 방향은 반대지만 순서는 같다.

     아래 세 칸(비활성·워시·quiet)의 값은 **지면 베이스가 소유한다.** 입력 재질에서
     파생시키면 다크에서 사다리가 뒤집힌다 — `--clc-material-field*` 는 "파인 입력"
     재질이라 다크에서 종이보다 밝은 쪽으로 올라가기 때문이다(실측: 종이 위 quiet
     L 62.3 > neutral L 46). neutral 만 재질에서 파생되는 것은 그 칸이 실제로
     "뜬 종이"이기 때문이다. 값과 실측은 지면 베이스의 같은 절에 있다. */
  --clc-mist-action-neutral-fill: var(--clc-material-paper-raised);
  --clc-mist-action-neutral-ink: var(--clv-text-primary, var(--clc-text-color));
  /* 반경 사다리. 이름이 숫자가 아니라 **자리**인 이유는 명명 규칙 5항이다 —
     카드(14)와 다이얼로그(20) 사이가 필요해지면 "3.5단"이 아니라 그게 무슨
     표면인지를 물어야 한다. 큰 표면일수록 크지만 알약은 그 사다리 밖이다:
     콘텐츠 위를 잠깐 지나가는 표면은 모서리를 남기지 않는다. */
  --clc-mist-radius-chip: 8px;
  --clc-mist-radius-field: 10px;
  --clc-mist-radius-surface: 14px;
  --clc-mist-radius-dialog: 20px;
  --clc-mist-radius-pill: 999px;
  /* 모션 — 시간 둘과 곡선 하나. 반경처럼 이름이 숫자가 아니라 **역할**이다.
     state    = 상태 전이(호버·포커스·눌림·선택 워시). 손이 닿는 즉시 답해야 해 짧다.
     material = 재질 전이(프리즘 층의 세기·띠 폭). 표면이 켜지고 꺼지는 것이라 천천히 번진다.
     곡선은 코어와 시각 명세가 실제로 쓰던 ease-out 하나다 — 빨리 출발해 부드럽게 닿는다.
     예전에는 이 값들이 `140ms ease-out` · `420ms ease-out` 리터럴로 열네 곳의 전이
     선언에 흩어져 있어 바꾸려면 전수 수정이었고, 문서가 적은 곡선(cubic-bezier)은 어떤
     규칙도 쓰지 않았다.
     blur 반경은 어느 전이에도 싣지 않는다(파일 머리 원칙 — 등장은 scale/fade 만). 프리즘
     글로우도 material 로 옮기는 것은 세기와 띠 폭뿐이고 흐림 반경은 즉시 바뀐다(프리즘 절). */
  --clc-mist-duration-state: 140ms;
  --clc-mist-duration-material: 420ms;
  --clc-mist-ease: ease-out;
  /* 한 번 재생되고 마는 연출(§10 의 예외 자리) — 칩이 붙는 순간, 버튼이 자리를 옮기는 순간처럼
     "무엇이 생겼다"를 한 번만 말하는 움직임이다. 전이가 아니라서 곡선이 하나일 필요가 없고,
     살짝 넘쳤다 자리를 잡는 스프링 곡선을 쓴다. 상태 전이(호버·포커스·선택)에는 절대 쓰지
     않는다 — 상태는 즉답이고, 넘침은 "도착"의 어휘다. 값이 여기 한 번만 있어야 소비처가
     리터럴을 흩뿌리지 않는다. */
  --clc-mist-duration-oneshot: 240ms;
  --clc-mist-ease-oneshot: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 프리즘 튜닝 기본값 — 오너 확정 "아주 은은".
     전에는 이 값들이 `var(--x, 5px)` 의 두 번째 인자로만 있었다. 그러면 같은
     기본값이 규칙마다 반복되고(spread 와 radius 는 각각 두 곳), 문서가 그것을
     또 한 벌 적어 정본이 셋이 된다. 여기 한 번만 둔다.
     소비처는 조상에서 덮으면 되고(가까운 선언이 이긴다), 켜짐 스위치
     `--clv-prism-on` 만은 값이 아니라 **상태**라 여기 없다 — 그건 `.is-active`
     가 층 자신에게 얹는다.

     spread/inset 은 굴절광 띠의 두 모서리다 — 표면 경계에서 바깥으로 spread,
     안으로 inset. blur 는 그 띠를 녹이는 정도다.

     세기가 낮고(0.23) 링이 센(0.88) 것은 오너 확정이다. 이 구성에서 효과를 짊어지는
     것은 글로우가 아니라 **끊어진 링**이고, 글로우는 그 뒤의 옅은 번짐이다.
     floor 0% 이면 링은 두 군데서만 살아나고 나머지는 사라진다 — 균일하게 한 바퀴
     도는 선은 빛이 아니라 파이핑으로 읽힌다는 것이 이 값의 근거다.

     steps 가 토큰인 이유는 응답 중처럼 회전이 빨라지는 자리 때문이다. 240 스텝을
     4.5s 에 그대로 쓰면 초당 53회 무효화가 되어 사실상 매 프레임 다시 그린다.

     회전은 전부 같은 방향이다(drift 양수). 역행 무리는 "진행"이 아니라 "꾸물거림"
     으로 읽힌다는 오너 확정 — 무리 사이의 강체감은 방향이 아니라 속도 차가 푼다. */
  --clv-prism-spread: 6px;
  --clv-prism-inset: 1px;
  --clv-prism-blur: 7px;
  --clv-prism-saturate: 1.65;
  --clv-prism-strength: 0.23;
  --clv-prism-ring-strength: 0.88;
  --clv-prism-ring-floor: 0%;
  --clv-prism-ring-width: 1px;
  --clv-prism-glint-strength: 0.2;
  --clv-prism-glint-bloom: 12px;
  --clv-prism-glint-drift: 1.9;
  --clv-prism-glint-white: 14%;
  --clv-prism-sheen-strength: 60%;
  --clv-prism-sheen-sweep: 196%;
  --clv-prism-radius: 28px;
  --clv-prism-spin: 34s;
  --clv-prism-steps: 240;
  /* 강조 프리즘 튜닝 기본값 — "다음은 여기"(가이드 강조) 굴절광. 프리미티브는 아래
     `.clv-emphasis-prism` 절에 있고, 램프(`--clv-emphasis-prism-1..3`)는 AI 프리즘 램프처럼
     각 베이스의 위 `:root` 에 있다(여기엔 기본값이 없다).
     AI 프리즘보다 띠가 넓고(12px) 세다(0.86) — 이 빛은 물린(딤) 바닥 위에서 대상 하나를
     짚어야 해서, 선명한 표면 곁에 옅게 번지는 AI 프리즘 값으로는 단색 블룸과 구분이 안 됐다.
     strength 는 다크 값이 기본이고 라이트는 베이스의 지면 보정 블록이 1 로 덮는다.
     floor 는 AI 프리즘 `-ring-floor` 와 같은 개념이다(골의 알파 바닥 — 0% 끊김, 100% 균일한 테).
     arrive 는 새 초점에 닿을 때 한 번 스치는 길이다 — 반복하지 않는다.
     radius 는 대상의 모서리 반경이라 소비처가 대상에 맞춰 덮는다. 켜짐 스위치
     `--clv-emphasis-prism-on` 과 각도 `--clv-emphasis-prism-angle` 은 값이 아니라 상태라 여기 없다. */
  --clv-emphasis-prism-strength: 0.86;
  --clv-emphasis-prism-spread: 12px;
  --clv-emphasis-prism-blur: 12px;
  --clv-emphasis-prism-saturate: 1.35;
  --clv-emphasis-prism-floor: 45%;
  --clv-emphasis-prism-arrive: 1.4s;
  --clv-emphasis-prism-radius: 12px;
  --clc-interaction-selected-high-empahsis-fill: color-mix(in srgb, var(--clc-primary) 12%, transparent);
  --clc-interaction-selected-high-empahsis-stroke: var(--clc-primary);
  /* 입력과 선택 컨트롤의 베이스 토큰도 Mist 재질로 바꾼다. 이 토큰을 읽는
     textbox 외의 checkbox/radio/listbox까지 같은 필드 깊이를 얻는다. */
  --clc-input-background-color: var(--clc-material-field);
  --clc-input-border: 1px solid transparent;
  --clc-input-border-block-end: 1px solid transparent;
  --clc-input-shadow: inset 0 1px 0 var(--clc-material-specular);
  --clc-input-disabled-background-color: var(--clc-material-field);
  --clc-input-disabled-color: var(--clv-text-tertiary, var(--clc-text-tertiary-color));
  --clc-input-disabled-border: 1px solid transparent;
  --clc-input-disabled-border-block-end: 1px solid transparent;
  --clc-input-disabled-shadow: inset 0 1px 0 var(--clc-material-specular);
  --clc-input-disabled-opacity: 1;
  /* 드롭다운·목록·메뉴: 선택은 액센트 워시, 호버는 한 단계 깊어진 자리다. */
  --clc-dropdown-open-background-color: var(--clc-mist-focus-wash);
  --clc-dropdown-open-border: 1px solid transparent;
  --clc-dropdown-panel-border: none;
  --clc-dropdown-panel-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-2);
  --clc-dropdown-filter-border: 1px solid var(--clc-material-hairline);
  --clc-dropdown-item-hover-background-color: var(--clc-material-field-strong);
  --clc-dropdown-item-hover-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-dropdown-item-selected-background-color: var(--clc-interaction-selected-accent);
  --clc-dropdown-item-selected-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-dropdown-item-selected-hover-background-color: color-mix(in srgb, var(--clc-primary) 18%, transparent);
  --clc-dropdown-item-selected-hover-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-dropdown-item-selected-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
  --clc-dropdown-item-transition: background-color var(--clc-mist-duration-state) var(--clc-mist-ease), box-shadow var(--clc-mist-duration-state) var(--clc-mist-ease), color var(--clc-mist-duration-state) var(--clc-mist-ease);
  --clc-dropdown-item-disabled-opacity: 1;
  /* CleviFormField(코어 라벨 래퍼): Filled 변형 토큰과 떠 있는 라벨의 가림막을 Mist 로 바꾼다.
     Outlined 의 라벨 가림막은 보더를 끊으려고 입력 배경을 덧칠하는데, Mist 는 보더가 없고
     재질이 반투명이라 덧칠이 알약처럼 도드라진다 — 투명이 맞다. 상자 자체는 아래
     `.clc-form-field-content` 규칙이 그린다. */
  --clc-form-field-filled-background-color: var(--clc-material-field);
  --clc-form-field-filled-hover-background-color: var(--clc-material-field-strong);
  --clc-form-field-filled-border: 1px solid transparent;
  --clc-form-field-filled-hover-border: 1px solid transparent;
  --clc-form-field-filled-focus-border: 1px solid transparent;
  --clc-form-field-filled-border-radius: var(--clc-mist-radius-field);
  --clc-form-field-label-floating-background-color: transparent;
  /* 라벨 글자는 입력 글자와 같은 선에서 시작한다: 들여쓰기 + 라벨 패딩 = 입력 패딩(md).
     Text 변형은 코어가 컨텐트 스코프에서 이 둘을 0 으로 덮으므로 아래 Text 규칙이 같은
     Mist 토큰을 다시 읽는다. */
  --clc-mist-form-field-label-padding-inline: 0.25rem;
  --clc-mist-form-field-label-inset: calc(var(--clc-input-padding-inline-md) - var(--clc-mist-form-field-label-padding-inline));
  --clc-form-field-label-inset-inline-start: var(--clc-mist-form-field-label-inset);
  --clc-form-field-label-padding: 0 var(--clc-mist-form-field-label-padding-inline);
  --clc-menu-border: none;
  --clc-menu-border-radius: var(--clc-mist-radius-surface);
  --clc-menu-item-border-radius: var(--clc-mist-radius-chip);
  --clc-menu-item-hover-background-color: var(--clc-material-field-strong);
  --clc-menu-item-hover-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-menu-item-selected-background-color: var(--clc-interaction-selected-accent);
  --clc-menu-item-selected-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-menu-item-focus-outline: none;
  --clc-menu-item-transition: background-color var(--clc-mist-duration-state) var(--clc-mist-ease), box-shadow var(--clc-mist-duration-state) var(--clc-mist-ease), color var(--clc-mist-duration-state) var(--clc-mist-ease);
  --clc-menu-item-disabled-opacity: 1;
  --clc-menu-top-item-border-radius: var(--clc-mist-radius-chip);
  --clc-menu-top-item-background-color: transparent;
  --clc-menu-top-item-hover-background-color: var(--clc-material-field-strong);
  --clc-menu-top-item-hover-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-menu-top-item-selected-background-color: var(--clc-interaction-selected-accent);
  --clc-menu-top-item-selected-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-profile-menu-top-item-background-color: transparent;
  --clc-profile-menu-background-color: var(--clc-material-chrome);
  --clc-profile-menu-border: none;
  --clc-profile-menu-border-radius: var(--clc-mist-radius-surface);
  --clc-profile-menu-item-hover-background-color: var(--clc-material-field-strong);
  --clc-profile-menu-item-focus-outline: none;
  /* PanelMenu는 셸 안쪽 내비게이션 콘텐츠다. 루트와 하위 레벨은 투명하게 두고,
     상호작용하는 행만 깊이/선택 워시를 얻는다. */
  --clc-panel-menu-focus-outline: none;
  --clc-panel-menu-item-border: none;
  --clc-panel-menu-item-border-radius: var(--clc-mist-radius-chip);
  --clc-panel-menu-item-color: var(--clv-text-secondary, var(--clc-text-color));
  --clc-panel-menu-item-background-color: transparent;
  --clc-panel-menu-item-hover-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-panel-menu-item-hover-background-color: var(--clc-material-field-strong);
  --clc-panel-menu-item-active-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-panel-menu-item-active-background-color: var(--clc-interaction-selected-accent);
  --clc-panel-menu-item-active-indicator: transparent;
  --clc-panel-menu-item-transition: color var(--clc-mist-duration-state) var(--clc-mist-ease), background-color var(--clc-mist-duration-state) var(--clc-mist-ease), box-shadow var(--clc-mist-duration-state) var(--clc-mist-ease);
  --clc-panel-menu-item-2nd-level-border-radius: var(--clc-mist-radius-chip);
  --clc-panel-menu-item-2nd-level-color: var(--clv-text-secondary, var(--clc-text-color));
  --clc-panel-menu-item-2nd-level-background-color: transparent;
  --clc-panel-menu-item-2nd-level-hover-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-panel-menu-item-2nd-level-hover-background-color: var(--clc-material-field-strong);
  --clc-panel-menu-item-2nd-level-active-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-panel-menu-item-2nd-level-active-background-color: var(--clc-interaction-selected-accent);
  --clc-panel-menu-item-3rd-level-color: var(--clv-text-secondary, var(--clc-text-color));
  --clc-panel-menu-item-3rd-level-background-color: transparent;
  --clc-panel-menu-item-3rd-level-hover-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-panel-menu-item-3rd-level-hover-background-color: var(--clc-material-field-strong);
  --clc-panel-menu-item-3rd-level-active-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-panel-menu-item-3rd-level-active-background-color: var(--clc-interaction-selected-accent);
  --clc-panel-menu-icon-color: var(--clv-text-secondary, var(--clc-text-color));
  /* 탭·분할 선택·스위치도 동일한 선택/포커스 어휘를 쓴다. */
  --clc-tabs-border: none;
  --clc-tabs-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-1);
  --clc-tabs-border-radius: var(--clc-mist-radius-surface);
  --clc-tabs-background-color: var(--clc-material-paper);
  --clc-tabs-tab-background-color: transparent;
  --clc-tabs-tab-color: var(--clv-text-secondary, var(--clc-text-color));
  --clc-tabs-tab-selected-background-color: var(--clc-interaction-selected-accent);
  --clc-tabs-tab-selected-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-tabs-tab-hover-background-color: var(--clc-material-field-strong);
  --clc-tabs-tab-hover-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-tabs-tab-focus-background-color: var(--clc-mist-focus-wash);
  --clc-tabs-tab-focus-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-tabs-tab-focus-outline: none;
  --clc-selectbar-background-color: transparent;
  --clc-selectbar-color: var(--clv-text-secondary, var(--clc-text-color));
  --clc-selectbar-border: none;
  --clc-selectbar-selected-background-color: var(--clc-interaction-selected-accent);
  --clc-selectbar-selected-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-selectbar-selected-border: none;
  --clc-selectbar-border-radius: var(--clc-mist-radius-field);
  --clc-selectbar-focus-outline: none;
  --clc-selectbar-button-focus-outline: none;
  --clc-switch-background-color: var(--clc-material-field-strong);
  --clc-switch-checked-background-color: var(--clc-primary);
  --clc-switch-box-shadow: var(--clc-material-elevation-0);
  --clc-switch-circle-background-color: var(--clc-material-paper-raised);
  --clc-switch-checked-circle-background-color: var(--clc-on-primary);
  --clc-switch-focus-outline: none;
  --clc-checkbox-focus-outline: none;
  --clc-checkbox-checked-background-color: var(--clc-primary);
  --clc-checkbox-checked-hover-background-color: var(--clc-primary-dark);
  --clc-checkbox-checked-disabled-background-color: var(--clc-interaction-selected-accent);
  --clc-checkbox-checked-color: var(--clc-on-primary);
  --clc-checkbox-checked-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
  --clc-checkbox-checked-border: 1px solid transparent;
  --clc-checkbox-checked-hover-border: 1px solid transparent;
  --clc-checkbox-checked-disabled-border: 1px solid transparent;
  --clc-radio-focus-outline: none;
  --clc-radio-active-background-color: var(--clc-primary);
  --clc-radio-active-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
  --clc-radio-checked-background-color: var(--clc-primary);
  --clc-radio-checked-hover-background-color: var(--clc-primary-dark);
  --clc-radio-checked-hover-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-1);
  --clc-radio-checked-color: var(--clc-on-primary);
  --clc-radio-circle-background-color: var(--clc-on-primary);
  --clc-radio-circle-hover-background-color: var(--clc-on-primary);
  --clc-radio-checked-border: 1px solid transparent;
  --clc-chip-background-color: var(--clc-material-field);
  --clc-chip-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-chip-selected-outline: none;
  --clc-chip-disabled-opacity: 1;
  /* 아코디언 아이템은 종이 */
  --clc-accordion-item-background-color: var(--clc-material-paper);
  /* 선택 상태의 파랑 파생 토큰들을 액센트에 정렬
     (`--clc-on-primary-lighter` 는 위 밝기 변형 램프가 여섯 색 전부에 공급한다) */
  --clc-border-primary-lighter: 1px solid color-mix(in srgb, var(--clc-primary) 35%, transparent);
  /* ---- DataGrid: 표면 안의 표 ----
     베이스 코어의 그리드 토큰은 레거시 회색(`--clc-base-*`)을 직접 읽는다. Mist 는 base 사다리를
     지면마다 다시 정의하지 않으므로 다크에서 그 값이 레거시 불투명 회색으로 남는다 — 선택 행
     글자가 `--clc-base-900`(다크 #242424)이라 선택 워시 위 1.14:1 로 사라지던 것이 그 결과다
     (언어 §8 "지면을 따라 뒤집히지 않는 토큰" 함정). 그래서 그리드가 칠하는 자리를 재질로 옮긴다.
     · 바탕은 투명 — 그리드를 담는 카드가 종이 재질을 진다. 교차 행도 불투명 회색 대신
       홀수 = 투명, 짝수 = 지면 소유의 가장 옅은 워시(Text 버튼 호버와 같은 칸)다.
     · 호버는 한 단 깊어진 자리(드롭다운 항목과 같은 field-strong), 선택은 액센트 워시 10% +
       본문 잉크, 셀 포커스는 포커스 워시다.
     · 헤더는 표면 안 구획이라 아래 경계를 헤어라인 한 줄로만 나눈다(2조). 다만 헤더는
       sticky 라 스크롤되는 행 위에 겹친다 — 겹쳐 뜨는 막대는 크롬(L2⁺)이고, 칸마다 blur 를
       걸면 칸 경계마다 흐림 가장자리가 생기고 스크롤마다 칸 수만큼 재샘플하므로 blur 없는
       정적 크롬을 쓴다. 고정 열(frozen)과 합계 행(tfoot — sticky bottom)도 스크롤되는 칸 위에
       겹치는 같은 처지다. 정적 크롬은 불투명이 아니라 96% 라, 밑으로 지나가는 글자가 4% 로
       비친다(가득 칠한 본문 잉크 기준 대비 1.05~1.14:1 — 알림 절과 같은 고스트). 완전
       불투명은 정적 크롬 토큰의 결정이라 그리드만 따로 합성값을 만들지 않는다.
     · 잉크는 본문 잉크 한 가지다. 베이스 코어는 셀·헤더·호버·셀 포커스·합계 잉크를 레거시
       `--clc-text-color`(다크 #E6E6E6)로 두어, 선택 행만 본문 잉크(#F0EFF4)를 받으면 그 줄
       글자만 더 밝게 떴다. 합계 행 바탕도 레거시 불투명 회색(#F0F0F0/#242424)이던 것을 헤더와
       같은 정적 크롬으로 옮긴다.
     · 정렬한 열의 머리 칸도 헤더와 같은 정적 크롬이다. 베이스는 그 칸을 레거시 불투명 회색
       (라이트 `--clc-base-200`, 다크 `--clc-base-700`)으로 칠해, 크롬 헤더 안에 무채색 블록이
       박히고 다크에서는 주변보다 어두운 구멍이 되어 뜻이 뒤집혔다. 정렬 상태는 정렬 아이콘이
       말한다. 피벗 머리의 호버도 이 토큰을 읽으므로 그 호버 반응은 사라진다(쓰는 곳이 없어
       받아들인다). */
  --clc-grid-cell-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-grid-header-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-grid-hover-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-grid-cell-focus-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-grid-foot-cell-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-grid-foot-background-color: var(--clc-material-chrome-static);
  --clc-grid-background-color: transparent;
  --clc-grid-stripe-odd-background-color: transparent;
  --clc-grid-stripe-background-color: var(--clc-mist-action-quiet-wash);
  --clc-grid-hover-background-color: var(--clc-material-field-strong);
  --clc-grid-cell-focus-background-color: var(--clc-mist-focus-wash);
  --clc-grid-selected-background-color: color-mix(in srgb, var(--clc-primary) 10%, transparent);
  --clc-grid-selected-color: var(--clv-text-primary, var(--clc-text-color));
  --clc-grid-header-background-color: var(--clc-material-chrome-static);
  --clc-grid-header-sorted-background-color: var(--clc-material-chrome-static);
  --clc-grid-header-cell-border-bottom: 1px solid var(--clc-material-hairline);
  --clc-grid-frozen-cell-background-color: var(--clc-material-chrome-static);
  --clc-grid-frozen-stripe-background-color: var(--clc-material-chrome-static);
  --clc-grid-frozen-stripe-odd-background-color: var(--clc-material-chrome-static);
}

/* 고정 열은 상태(선택·호버·포커스)에서 코어가 칸 바탕을 `--clc-grid-background-color` 로 다시
   칠하고 그 위에 상태 색을 의사요소로 얹는다. 위에서 그리드 바탕을 투명으로 두었으므로 그대로면
   가로 스크롤 중 밑으로 지나가는 칸이 비친다. 고정 열 스코프에서만 그 토큰을 정적 크롬으로
   되돌린다 — 코어 규칙이 스스로 크롬 바탕을 그리게 하는 토큰 교체라 특이성 경쟁이 없다. */
:root .clc-frozen-cell {
  --clc-grid-background-color: var(--clc-material-chrome-static);
}

/* 고정 열의 교차 행. 고정 칸은 짝·홀 모두 정적 크롬이라 그대로면 줄무늬가 고정 열에서 끊긴다.
   본문 칸과 같은 줄무늬 워시를 크롬 위에 한 겹 더 얹는다. 배경색 토큰 하나로는 "크롬 위에 워시를
   얹은 값"을 만들 수 없어(color-mix 는 두 색을 섞을 뿐 한쪽을 다른 쪽 위에 합성하지 않는다 — 결과
   알파가 크롬보다 낮아진다) 배경 이미지 층으로 겹친다. 이미지 층은 배경색 위, 상태 의사요소 아래에
   칠해진다.
   상태(선택·셀 포커스·선택 가능한 표의 호버)가 걸린 줄은 이 층을 뺀다 — 코어가 그 줄의 본문 칸을
   줄무늬 대신 상태 색으로 칠하므로, 고정 칸에만 줄무늬가 남으면 한 줄이 두 색이 된다. 호버는
   코어처럼 `.clc-selectable` 안에서만 칠해지므로 그 스코프의 더 구체적인 선택자로 걷는다. */
:root .clc-grid-table-striped tbody > tr:not(.clc-expanded-row-content, .clc-state-highlight, .clc-state-focused):nth-child(even) > td.clc-frozen-cell {
  background-image: linear-gradient(var(--clc-grid-stripe-background-color), var(--clc-grid-stripe-background-color));
}

:root .clc-selectable .clc-grid-table-striped tbody > tr.clc-data-row:nth-child(even):hover > td.clc-frozen-cell {
  background-image: none;
}

/* ---- 입력류: 파인 자리(L2⁻) + 포커스 링 ----
   종이(--clc-material-paper)를 쓰면 카드와 입력이 같은 재질이라 구분이 안 된다.
   입력은 종이 위에서 한 단계 파인 자리를 쓴다. 보더 없이 파인 배경만으로
   구분한다 (표면·깊이 정책 2026-08-14 개정) — 투명 보더는 박스 크기 유지용. */
.clc-textbox,
.clc-textarea,
.clc-numeric,
.clc-dropdown,
.clc-multiselect,
.clc-autocomplete,
.clc-listbox,
.clc-datepicker,
.clc-colorpicker,
.clc-lookup {
  background-color: var(--clc-material-field);
  border: 1px solid transparent;
  border-radius: var(--clc-mist-radius-field);
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
  transition: background-color var(--clc-mist-duration-state) var(--clc-mist-ease), box-shadow var(--clc-mist-duration-state) var(--clc-mist-ease);
}

/* 호버 = 깊이 반응: 자리를 반 단계 더 판다 (라이트=잉크 혼합, 다크=흰 혼합 —
   두 테마 모두 field 와 같은 방향의 진한 단계라 방향이 안 뒤집힌다). */
.clc-textbox:hover,
.clc-textarea:hover,
.clc-numeric:hover,
.clc-dropdown:hover,
.clc-multiselect:hover,
.clc-autocomplete:hover,
.clc-listbox:hover,
.clc-datepicker:hover,
.clc-colorpicker:hover,
.clc-lookup:hover {
  background-color: var(--clc-material-field-strong);
}

/* 포커스는 보더 색 변화가 아니라 접근성 포커스 링으로 표시한다 (정책 4항 예외). */
.clc-textbox:focus-within,
.clc-textarea:focus-within,
.clc-numeric:focus-within,
.clc-dropdown:focus-within,
.clc-multiselect:focus-within,
.clc-autocomplete:focus-within,
.clc-listbox:focus-within,
.clc-datepicker:focus-within,
.clc-colorpicker:focus-within,
.clc-lookup:focus-within {
  outline: none;
  box-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular);
}

/* TimeSpanPicker는 기본 모드의 child input이 필드이고, Inline 루트는 패널이다.
   루트 전체를 field로 칠하면 child input과 재질이 겹치고 Inline 패널까지 파인 자리로 보인다. */
.clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext {
  background-color: var(--clc-material-field);
  border: 1px solid transparent;
  border-radius: var(--clc-mist-radius-field);
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
  transition: background-color var(--clc-mist-duration-state) var(--clc-mist-ease), box-shadow var(--clc-mist-duration-state) var(--clc-mist-ease);
}

.clc-timespanpicker:not(.clc-timespanpicker-inline):not(.clc-state-disabled):hover > .clc-inputtext {
  background-color: var(--clc-material-field-strong);
}

.clc-timespanpicker:not(.clc-timespanpicker-inline):focus-within > .clc-inputtext {
  background-color: var(--clc-mist-focus-wash);
  outline: none;
  box-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular);
}

.clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-timespanpicker-trigger:focus-visible {
  outline: none;
  box-shadow: none;
}

.clc-timespanpicker-inline {
  background-color: var(--clc-material-paper);
  border: none;
  border-radius: var(--clc-mist-radius-surface);
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-1);
}

/* 상태(호버·포커스) 재질은 토큰으로 말한다.
   코어의 상태 규칙은 선택자가 `.clc-textbox:not(:disabled):not(.clc-state-disabled):focus`
   (0,4,0) 라 위 요소 규칙(0,2,0)보다 세다 — 요소 규칙만 두면 Mist 링은 그려지지 않고
   코어의 액센트 보더 + inset 액센트 링 + 불투명 배경이 이긴다. 포커스 때 테두리가 두 겹으로
   보이던 원인이 이것이다. 특이성 경쟁을 벌이는 대신 코어 규칙이 읽는 토큰을 Mist 값으로
   갈아 끼운다 — 그러면 코어 규칙 자신이 Mist 를 그린다.
   (`-border-block-end` 토큰들은 코어에서 각각의 `-border` 를 가리키므로 따라온다.) */
:root {
  --clc-input-hover-background-color: var(--clc-material-field-strong);
  --clc-input-hover-border: 1px solid transparent;
  --clc-input-hover-shadow: inset 0 1px 0 var(--clc-material-specular);
  --clc-input-focus-background-color: var(--clc-mist-focus-wash);
  --clc-input-focus-border: 1px solid transparent;
  --clc-input-focus-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular);
  --clc-input-focus-outline: none;
}

/* ---- 읽기전용: 파인 자리를 거둔다 ----
   읽기전용은 값을 보여 주는 자리지 입력하는 곳이 아니다. 파인 자리(필드 재질)를 그대로 두면
   "여기에 쓸 수 있다"로 읽히고, 비활성처럼 잉크를 낮추면 읽어야 할 값이 가라앉는다. 그래서
   재질만 걷는다 — 배경은 투명(놓인 지면이 그대로 보인다: 카드 안이면 종이 쪽), specular 도
   걷고, 잉크는 본문 그대로다. 호버에 자리를 더 파지 않는다 — 쓸 수 없는 곳이 깊이로 반응하면
   거짓 신호다. 포커스는 받는다: 복사·보조기기 탐색 대상이라 포커스(빛) 규칙은 건드리지 않고,
   아래 덮기도 포커스가 안에 있을 때는 빠진다.

   두 층을 비운다(필드 그룹과 같은 방식):
   ① 코어 상태 규칙(0,4,0)은 토큰을 비워 따라오게 한다 — 커스텀 속성은 상속되므로 DatePicker
      처럼 루트 안의 입력이 호버를 그리는 경우도 따라온다.
   ② Mist 요소 규칙(`.clc-textbox:hover` 등)은 포커스가 없을 때만 선택자로 덮는다.
   읽기전용 표식은 컴포넌트마다 다르다: 입력 자신의 `readonly` 속성(TextBox·TextArea·Password·
   Mask, Numeric 안 입력), 루트의 `aria-readonly`(DropDown), 입력의 `clc-readonly` 클래스
   (DatePicker·TimeSpanPicker — DatePicker 는 입력 불가 모드에서도 `readonly` 속성을 달므로
   속성이 아니라 클래스를 본다).

   `:has()` 를 쓰는 두 줄은 `:is()` 로 감싼다. CSS 선택자 목록은 관용적이지 않아, `:has()` 를 모르는
   엔진에서는 그 한 줄 때문에 **규칙 전체**가 버려진다 — `:has()` 가 필요 없는 TextBox·TextArea·
   DropDown·TimeSpanPicker 의 읽기전용까지 함께 사라진다. `:is()` 의 목록은 관용적이라 모르는 항목만
   버려지고, 특이성도 인자에서 오므로 지금과 같다(`:where()` 는 0 이 되어 코어 상태 규칙에 진다).
   같은 방어를 눌림 축소 규칙은 `:where(:has(…))` 로 하고 있다. */
:root :is(.clc-textbox, .clc-textarea)[readonly],
:root .clc-numeric:is(:has(> .clc-numeric-input[readonly])),
:root .clc-datepicker:is(:has(> .clc-inputtext.clc-readonly)),
:root .clc-dropdown[aria-readonly=true],
:root .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext.clc-readonly {
  --clc-input-background-color: transparent;
  --clc-input-hover-background-color: transparent;
  --clc-input-shadow: none;
  --clc-input-hover-shadow: none;
}

:root :is(.clc-textbox, .clc-textarea)[readonly]:not(:focus-within),
:root .clc-numeric:is(:has(> .clc-numeric-input[readonly])):not(:focus-within),
:root .clc-datepicker:is(:has(> .clc-inputtext.clc-readonly)):not(:focus-within),
:root .clc-dropdown[aria-readonly=true]:not(:focus-within),
:root .clc-timespanpicker:not(.clc-timespanpicker-inline):not(:focus-within) > .clc-inputtext.clc-readonly {
  background-color: transparent;
  box-shadow: none;
}

/* 서명 패드는 같은 포커스 토큰을 `box-shadow` 가 아니라 `outline` 으로 읽는다 — 여러 겹
   그림자는 outline 문법이 아니라서 통째로 무효가 된다. 링을 여기서 다시 준다. */
.clc-signature-pad:focus-within {
  outline: none;
  box-shadow: var(--clc-mist-focus-shadow);
}

/* 복합 픽커의 내부 입력은 루트가 필드 재질을 그리므로 자체 재질을 지운다 —
   안 지우면 %input 기본 보더/배경이 이중으로 겹친다. */
.clc-datepicker > .clc-inputtext {
  background-color: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.clc-datepicker > .clc-inputtext:focus {
  outline: none;
  box-shadow: none;
}

/* ---- 필드 그룹: 라벨과 컨트롤을 한 자리에 ----
   라벨을 입력 위에 얹는 자리(다이얼로그의 "새로운 그룹 이름" 같은 것)는 앱마다 손으로
   그려 왔다 — 래퍼에 1px 보더, 포커스에 outline. 그런데 그 안의 컨트롤이 자기 필드 재질과
   포커스 링을 또 그리니 자리가 두 겹으로 보인다. 자리를 그리는 것은 그룹 하나다.
   재질만 계약한다 — 배치·치수(패딩·gap·방향)는 소비처 몫이다.
   `:root` 를 앞에 두는 이유: 소비 앱의 바닥값(surface.css 의 `.clv-field-group`)과 같은
   클래스라 특이성이 같으면 링크 순서에 지고 만다. 테마가 항상 이기게 (0,2,0) 으로 올린다 —
   재질 토큰을 `html`(0,0,1) 바닥값 / `:root`(0,1,0) 테마로 가르는 것과 같은 트릭이다. */
:root .clv-field-group {
  background-color: var(--clc-material-field);
  border: 1px solid transparent;
  border-radius: var(--clc-mist-radius-field);
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
  transition: background-color var(--clc-mist-duration-state) var(--clc-mist-ease), box-shadow var(--clc-mist-duration-state) var(--clc-mist-ease);
}

:root .clv-field-group:hover {
  background-color: var(--clc-material-field-strong);
}

:root .clv-field-group:focus-within {
  background-color: var(--clc-mist-focus-wash);
  box-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular);
}

/* 그룹 안의 컨트롤은 자리를 다시 파지 않는다. 두 층을 다 지워야 한다:
   ① 코어의 상태 규칙(0,4,0)은 선택자로 못 이기므로 그룹 스코프에서 토큰을 비운다.
      커스텀 속성은 상속되니 그룹 안이면 어떤 컨트롤이든 따라온다.
   ② Mist 자신의 요소 규칙(위, 0,2,0)은 자손 선택자(0,2,0 / 상태 0,3,0)로 덮는다. */
:root .clv-field-group {
  --clc-input-background-color: transparent;
  --clc-input-hover-background-color: transparent;
  --clc-input-focus-background-color: transparent;
  --clc-input-border: 1px solid transparent;
  --clc-input-hover-border: 1px solid transparent;
  --clc-input-focus-border: 1px solid transparent;
  --clc-input-shadow: none;
  --clc-input-hover-shadow: none;
  --clc-input-focus-shadow: none;
  --clc-input-focus-outline: none;
  --clc-input-disabled-background-color: transparent;
  --clc-input-disabled-border: 1px solid transparent;
  --clc-input-disabled-border-block-end: 1px solid transparent;
  --clc-input-disabled-shadow: none;
  --clc-input-disabled-opacity: 1;
}

.clv-field-group :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup),
.clv-field-group :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup):hover,
.clv-field-group :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup):focus,
.clv-field-group :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup):focus-within,
.clv-field-group .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext,
.clv-field-group .clc-timespanpicker:not(.clc-timespanpicker-inline):hover > .clc-inputtext,
.clv-field-group .clc-timespanpicker:not(.clc-timespanpicker-inline):focus-within > .clc-inputtext {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

/* ---- CleviFormField: 코어의 라벨 래퍼도 필드 그룹과 같은 계약 ----
   `.clc-form-field` 는 Mist 이전의 Material 식 래퍼(라벨·시작/끝 장식·헬퍼)다. 코어
   `_form-field.scss` 는 자식 컨트롤에 `%input-blank` 를 적용해 상태 토큰을 비우고, 상자는
   래퍼가 그린다고 전제한다. 그런데 Mist 요소 규칙(위, 0,1,0)이 캐스케이드에서 더 뒤라
   평소에는 자식이 필드 재질을 칠하고, 포커스 순간 코어 상태 규칙(0,4,0)이 비워진 토큰을
   읽어 투명해졌다 — "포커스하면 배경이 사라진다"의 원인이다. 래퍼의 포커스 클래스
   `clc-state-focused` 는 아무도 붙이지 않으므로(`IFormFieldContext` 에 포커스 통지가 없다)
   `:focus-within` 으로 읽는다.
   자리를 그리는 것은 `.clc-form-field-content` 하나다 — 변형(Outlined/Flat/Filled/Text)을
   가리지 않는다. Mist 에서 입력은 파인 자리로만 구분되므로 상자 없는 Text 변형도 자리를
   갖는다. 특이성: 변형 규칙 `.clc-form-field.clc-variant-text .clc-form-field-content`(0,3,0)
   는 같은 (0,3,0)으로 뒤에서 이기고, 상태는 (0,5,0)이라 Filled 의 hover(0,5,0)까지 순서로
   이긴다. 비활성은 자리를 그대로 두고 잉크만 코어가 삼차로 낮춘다. */
:root .clc-form-field .clc-form-field-content {
  background-color: var(--clc-material-field);
  border: 1px solid transparent;
  border-radius: var(--clc-mist-radius-field);
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
  transition: background-color var(--clc-mist-duration-state) var(--clc-mist-ease), box-shadow var(--clc-mist-duration-state) var(--clc-mist-ease);
}

:root .clc-form-field:not(.clc-state-disabled):hover .clc-form-field-content {
  background-color: var(--clc-material-field-strong);
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
}

:root .clc-form-field:not(.clc-state-disabled):focus-within .clc-form-field-content {
  background-color: var(--clc-mist-focus-wash);
  box-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular);
}

/* 안의 컨트롤은 자리를 다시 파지 않는다 — 필드 그룹과 같은 두 층이다.
   ① 토큰: 코어의 `%input-blank` 는 hover/focus 배경 토큰만 비우므로 나머지(기본 배경·보더·
      그림자·비활성)를 여기서 비운다. 래퍼 자신은 위 규칙이 값을 직접 말하므로 래퍼가 아니라
      자식(`> *`)에 둔다 — 커스텀 속성은 상속되니 래퍼 안에 한 겹 더 싼 컨트롤도 따라온다.
   ② Mist 요소 규칙(0,1,0 / 상태 0,2,0)은 자손 선택자(0,2,0 / 상태 0,3,0)로 덮는다. */
:root .clc-form-field-content > * {
  --clc-input-background-color: transparent;
  --clc-input-hover-background-color: transparent;
  --clc-input-focus-background-color: transparent;
  --clc-input-border: 1px solid transparent;
  --clc-input-hover-border: 1px solid transparent;
  --clc-input-focus-border: 1px solid transparent;
  --clc-input-shadow: none;
  --clc-input-hover-shadow: none;
  --clc-input-focus-shadow: none;
  --clc-input-focus-outline: none;
  --clc-input-disabled-background-color: transparent;
  --clc-input-disabled-border: 1px solid transparent;
  --clc-input-disabled-border-block-end: 1px solid transparent;
  --clc-input-disabled-shadow: none;
  --clc-input-disabled-opacity: 1;
}

.clc-form-field-content :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup),
.clc-form-field-content :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup):hover,
.clc-form-field-content :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup):focus,
.clc-form-field-content :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup):focus-within,
.clc-form-field-content .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext,
.clc-form-field-content .clc-timespanpicker:not(.clc-timespanpicker-inline):hover > .clc-inputtext,
.clc-form-field-content .clc-timespanpicker:not(.clc-timespanpicker-inline):focus-within > .clc-inputtext {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

/* 떠오른 라벨은 상자 위에 둔다. Material 은 라벨로 보더를 끊으려고 상자 윗변에 걸쳤지만,
   Mist 에는 끊을 보더가 없어 걸친 라벨이 절반은 지면, 절반은 자리 위에 놓인다. 라벨 자리를
   윗변 위(라벨 1rem + 틈 0.25rem)로 올리고 래퍼의 위 여백을 그만큼 넓힌다 — 래퍼는 플렉스
   항목이라 이 여백은 폼 필드 상자 안에 있고 이웃과 겹치지 않는다. Flat/Filled 는 라벨이 키 큰
   자리 안에 들어가는 필드 그룹 꼴이라 그대로 둔다. Text 변형이 0 으로 두던 라벨 들여쓰기·
   패딩은 Outlined 와 같은 Mist 토큰으로 되돌려 라벨 글자가 입력 글자와 같은 선에서 시작한다.
   비어 있을 때 자리 안에 놓이는 플레이스홀더 라벨의 위치와 떠오르는 전환은 코어 그대로다. */
:root .clc-form-field:is(.clc-variant-outlined, .clc-variant-text) {
  --clc-form-field-margin-block: 1.25rem 0;
  --clc-form-field-label-floating-top: -1.25rem;
}

:root .clc-form-field.clc-variant-text .clc-form-field-content {
  --clc-form-field-label-inset-inline-start: var(--clc-mist-form-field-label-inset);
  --clc-form-field-label-padding: 0 var(--clc-mist-form-field-label-padding-inline);
}

/* ---- 읽기전용 래퍼: 자리를 그리는 쪽도 파인 자리를 거둔다 ----
   위 "읽기전용" 절은 컨트롤 자신이 자리를 그릴 때의 계약이다. 그런데 필드 그룹과 CleviFormField
   안에서는 자리를 그리는 것이 래퍼 하나이고 컨트롤은 투명이라, 안에 읽기전용 컨트롤이 들어와도
   래퍼가 계속 파인 자리를 칠했다 — 같은 값이 그룹 밖에서는 "읽는 곳", 그룹 안에서는 "쓰는 곳"으로
   보였다. 래퍼에도 같은 계약을 준다: 재질만 걷고(배경 투명 · specular 없음), 호버에 자리를 더
   파지 않으며, 잉크는 본문 그대로다. 포커스는 받는다 — `:not(:focus-within)` 로 빠지므로 위
   포커스 규칙의 빛과 자리 워시가 그대로 켜진다(복사·보조기기 탐색 대상이다).

   특이성: `:has()` 안의 가장 진한 인자가 `[readonly]:not(.clc-datepicker > .clc-inputtext)` 라
   (0,3,0) 이고, 여기에 래퍼·`:root`·`:not(:focus-within)` 가 붙어 그룹은 (0,6,0), 폼 필드는
   (0,8,0) 이다 — 호버 규칙((0,3,0) / (0,5,0))을 순서와 무관하게 이긴다.

   DatePicker 를 `[readonly]` 로 읽지 않는 이유는 위 절과 같다: 달력으로만 고르는 모드
   (`AllowInput=false`)에서도 입력에 `readonly` 속성을 달기 때문에, 속성만 보면 **쓸 수 있는**
   날짜 필드가 든 그룹까지 자리를 잃는다. 진짜 읽기전용일 때만 붙는 `.clc-readonly` 를 본다.
   `:has()` 를 `:is()` 로 감싸는 이유는 위 절과 같다(모르는 엔진에서 규칙 전체가 버려지는 것 방지). */
:root .clv-field-group:is(:has(:is(.clc-readonly, [aria-readonly=true], [readonly]:not(.clc-datepicker > .clc-inputtext)))):not(:focus-within),
:root .clc-form-field:not(.clc-state-disabled):is(:has(:is(.clc-readonly, [aria-readonly=true], [readonly]:not(.clc-datepicker > .clc-inputtext)))):not(:focus-within) .clc-form-field-content {
  background-color: transparent;
  box-shadow: none;
}

/* ---- 오류: 자리의 색으로 말한다 ----
   Mist 에서 경계는 선이 아니라 재질이 진다(표면·깊이 정책 1조·4조). 오류도 같은 어휘를 쓴다 —
   보더 색을 바꾸거나 외곽선을 두르지 않고, 파인 자리 **위에 위험 워시 한 겹**을 얹어 그 자리
   자체가 잘못됐다고 말한다. 배경색이 아니라 배경 **이미지** 층인 것이 핵심이다: 호버·포커스
   규칙은 `background-color` 만 갈아 끼우므로(코어 `%input-hover` · `%input-focus`) 워시 층이
   그 위에 그대로 남고, 그래서 "포커스 + 오류"가 "포커스"로 덮이지 않는다. 포커스는 자리 **밖**의
   빛(블룸)이고 오류는 자리 **안**의 색이라 두 표시가 겹쳐도 서로를 지우지 않는다.

   베이스는 `.invalid` 에서만 `outline: none` 을 빼 UA 기본 링을 남긴다(`%input` 의
   `&:not(.invalid)`). Mist 는 포커스를 빛으로 말하므로 그 링을 거둔다 — 강제 색상 모드에서는
   파일 끝의 바닥이 진짜 outline 을 다시 준다.

   문구·라벨은 잉크로 말한다. 베이스는 둘 다 채움색(`--clc-danger`)을 글자에 그대로 얹는데,
   채움색은 흰 글자를 받으려고 고른 값이라 지면 위 글자로는 한 단 옅다 — 의미색 잉크
   (`--clc-mist-ink-danger`)가 그 자리의 정본이다(언어 §8). 라벨 규칙은 베이스가 `!important`
   로 못 박아 같은 무게로 덮는다. */
:root :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-colorpicker, .clc-lookup, .mask).invalid,
:root :is(.clc-datepicker, .clc-timespanpicker) > .clc-inputtext.invalid {
  outline: none;
}

:root :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-colorpicker, .clc-lookup).invalid,
:root .clc-datepicker:is(:has(> .clc-inputtext.invalid)),
:root .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext.invalid,
:root .clv-field-group:is(:has(.invalid)),
:root .clc-form-field:is(:has(.invalid)) .clc-form-field-content {
  background-image: linear-gradient(var(--clc-mist-wash-danger), var(--clc-mist-wash-danger));
}

/* 자리를 그리는 것은 하나다 — 그룹·폼 필드 안의 컨트롤은 워시를 다시 얹지 않는다.
   위 두 래퍼 계약(`.clv-field-group :is(…)` · `.clc-form-field-content :is(…)`)은 안쪽 컨트롤의
   `background-color` 만 투명으로 만들고 `background-image` 는 건드리지 않는다. 그대로 두면
   래퍼가 얹은 그룹 워시 **위에** 컨트롤의 워시가 한 겹 더 얹혀, 그룹·CleviFormField 안의 오류
   필드에만 더 붉은 안쪽 상자가 생긴다(라이트 캔버스 실측 1겹 #DACCCF → 2겹 #D8BEBF).
   라벨 대비도 그 자리에서만 한 단 더 내려간다(4.69 → 3.65:1) — (j) 검사는 1겹 자리를 재므로
   이 자리는 검사에 잡히지 않는다. 층을 하나로 되돌리는 것이 여기서 할 일이다.
   특이성은 위 오류 규칙보다 한 단 높다(각 갈래 (0,4,0)·(0,5,0)·(0,6,0) 대 (0,3,0)·(0,4,0)·(0,5,0)). */
:root :is(.clv-field-group, .clc-form-field-content) :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-colorpicker, .clc-lookup).invalid,
:root :is(.clv-field-group, .clc-form-field-content) .clc-datepicker:is(:has(> .clc-inputtext.invalid)),
:root :is(.clv-field-group, .clc-form-field-content) .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext.invalid {
  background-image: none;
}

:root .invalid ~ .clc-form-field-label {
  color: var(--clc-mist-ink-danger) !important;
}

:root {
  /* 검증 문구(`.clc-messages-error`)의 잉크. */
  --clc-form-error-color: var(--clc-mist-ink-danger);
  /* 검증 말풍선은 **채움** 표면이라 채움색(`--clc-validator-background-color`)과 그 짝 잉크
     (`--clc-validator-color` = `--clc-on-danger`)를 그대로 쓴다(라이트 5.20 · 다크 7.38:1).
     외곽 보더는 원래 없다 — 화살표만 `border-bottom-color` 로 그린다.
     그림자만 Mist 로 옮긴다: 기본값이 옛 위험색(#D35153)을 30% 로 깐 리터럴이라 의미색을
     바꿔도 따라오지 않았고, 색이 든 그림자는 Mist 의 깊이 어휘가 아니다. */
  --clc-validator-shadow: var(--clc-material-elevation-2);
}

/* ---- 채팅 컴포저: 캔버스 위에 뜬 종이 ----
   배경색만으로는 부족하다. 그림자(=높이)가 붙어야 "입력하는 곳"으로 읽힌다.
   `ridge` 테두리는 브라우저가 임의로 명암을 넣어 재질을 흐리므로 solid 로 고정한다. */
.chat-composer .input-box-grid {
  border-style: solid;
  box-shadow: var(--clc-material-field-raised-shadow);
}

/* ---- 카드·패널: 캔버스 위에 떠 있는 종이 ----
   표면·깊이 정책: 외곽 보더 금지 — 표면색 차이 + 2겹 그림자 + 스펙큘러가 경계다. */
.clc-card,
.clc-panel {
  background-color: var(--clc-material-paper);
  border: none;
  border-radius: var(--clc-mist-radius-surface);
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-1);
}

/* ==========================================================================
   버튼 — 열 시맨틱 × 네 변형의 단일 모델

   예전에는 배경을 코어(Radzen + clevi 레거시)가, 잉크를 Mist 가 정했다. 두 주인이
   각자 옳은 값을 고르면 짝은 틀린다 — 다크 Light 버튼이 연보라 배경(코어) + 본문
   잉크(Mist)로 대비 1.19:1 이 된 것이 그 결과다. 그래서 여기서 **배경과 잉크를 한
   규칙이 함께** 정한다.

   변형이 무엇을 뜻하는지도 여기서 하나로 정한다.
     Filled   = 채운다 + 깊이        (주요 액션)
     Flat     = 채운다 + 깊이 없음    (밀집된 자리의 주요 액션)
     Outlined = 뜬 종이 + 색 잉크     (Mist 는 선을 긋지 않는다 — 표면·깊이 정책 1항)
     Text     = 아무것도 없다 + 색 잉크

   시맨틱은 두 값만 고른다: **채움색과 그 위 잉크**(Filled/Flat), 그리고 채우지 않는
   변형이 쓰는 **조용한 잉크와 호버 워시**. 나머지는 변형이 조립한다. 스타일을 하나
   더 만들 때 고칠 곳이 네 줄뿐인 이유다.

   비-default Shade 는 코어가 계속 소유한다 — 밝기 변형은 Mist 의 어휘가 아니다.
   ========================================================================== */
/* ---- 1. 시맨틱이 값을 고른다 (변형은 모른다) ---- */
.clc-button {
  --clc-mist-button-fill: var(--clc-mist-action-neutral-fill);
  --clc-mist-button-ink: var(--clc-mist-action-neutral-ink);
  --clc-mist-button-quiet-ink: var(--clc-mist-action-neutral-ink);
  --clc-mist-button-wash: var(--clc-mist-action-quiet-wash);
}

.clc-button.clc-primary {
  --clc-mist-button-fill: var(--clc-primary);
  --clc-mist-button-ink: var(--clc-on-primary);
  --clc-mist-button-quiet-ink: var(--clc-mist-ink-primary);
  --clc-mist-button-wash: var(--clc-mist-wash-primary);
}

.clc-button.clc-success {
  --clc-mist-button-fill: var(--clc-success);
  --clc-mist-button-ink: var(--clc-on-success);
  --clc-mist-button-quiet-ink: var(--clc-mist-ink-success);
  --clc-mist-button-wash: var(--clc-mist-wash-success);
}

.clc-button.clc-warning {
  --clc-mist-button-fill: var(--clc-warning);
  --clc-mist-button-ink: var(--clc-on-warning);
  --clc-mist-button-quiet-ink: var(--clc-mist-ink-warning);
  --clc-mist-button-wash: var(--clc-mist-wash-warning);
}

.clc-button.clc-danger {
  --clc-mist-button-fill: var(--clc-danger);
  --clc-mist-button-ink: var(--clc-on-danger);
  --clc-mist-button-quiet-ink: var(--clc-mist-ink-danger);
  --clc-mist-button-wash: var(--clc-mist-wash-danger);
}

.clc-button.clc-error {
  --clc-mist-button-fill: var(--clc-error);
  --clc-mist-button-ink: var(--clc-on-error);
  --clc-mist-button-quiet-ink: var(--clc-mist-ink-error);
  --clc-mist-button-wash: var(--clc-mist-wash-error);
}

.clc-button.clc-info {
  --clc-mist-button-fill: var(--clc-info);
  --clc-mist-button-ink: var(--clc-on-info);
  --clc-mist-button-quiet-ink: var(--clc-mist-ink-info);
  --clc-mist-button-wash: var(--clc-mist-wash-info);
}

/* 중립 3단. Light 가 가장 조용한 자리(quiet-fill — 지면 소유 알파)이고 Secondary/Base 가
   뜬 종이, Dark 가 반전 채움이다. 셋이 같은 회색이면 호출부가 아무거나 고른다. */
.clc-button.clc-light {
  --clc-mist-button-fill: var(--clc-mist-action-quiet-fill);
  --clc-mist-button-ink: var(--clc-mist-action-neutral-ink);
  --clc-mist-button-quiet-ink: var(--clc-mist-action-neutral-ink);
  --clc-mist-button-wash: var(--clc-mist-action-quiet-wash);
}

.clc-button:is(.clc-secondary, .clc-base) {
  --clc-mist-button-fill: var(--clc-mist-action-neutral-fill);
  --clc-mist-button-ink: var(--clc-mist-action-neutral-ink);
  --clc-mist-button-quiet-ink: var(--clc-mist-action-neutral-ink);
  --clc-mist-button-wash: var(--clc-mist-action-quiet-wash);
}

.clc-button.clc-dark {
  --clc-mist-button-fill: var(--clc-mist-action-contrast-fill);
  --clc-mist-button-ink: var(--clc-mist-action-contrast-ink);
  --clc-mist-button-quiet-ink: var(--clc-mist-action-neutral-ink);
  --clc-mist-button-wash: var(--clc-mist-action-quiet-wash);
}

/* ---- 2. 변형이 조립한다 ----
   `.clc-shade-default` 로 묶은 것은 비-default Shade 를 코어에 남기기 위해서고,
   동시에 레거시 코어의 `.clc-button.clc-light:not(...)` (0,4,0) 과 특이성을 맞춰
   **뒤에 온다는 사실 하나로** 이기기 위해서다. 중요도로 이기면 소비처가 상태를
   덧칠할 수 없게 된다. */
:root .clc-button.clc-shade-default:is(.clc-variant-filled, .clc-variant-flat) {
  background-color: var(--clc-mist-button-fill);
  background-image: none;
  color: var(--clc-mist-button-ink);
  border: none;
}

:root .clc-button.clc-shade-default.clc-variant-outlined {
  background-color: var(--clc-mist-action-neutral-fill);
  background-image: none;
  color: var(--clc-mist-button-quiet-ink);
  border: none;
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
}

:root .clc-button.clc-shade-default.clc-variant-text {
  background-color: transparent;
  background-image: none;
  color: var(--clc-mist-button-quiet-ink);
  border: none;
}

/* ---- 3. 상태: 호버는 깊이, 포커스는 빛 (§7) ----
   채움 변형의 호버는 **색을 바꾸지 않는다**. 코어는 `-dark` 셰이드로 갈아끼운다. 그 셰이드는
   이제 의미색에서 파생되는 램프라 예전(손 리터럴)처럼 색상이 튀지는 않지만, 호버를
   명도로 말하면 상태 어휘가 둘이 되고 채움·잉크 짝의 대비도 호버마다 흔들린다. Mist 의
   호버는 깊이 하나다 — 짝은 그대로 두고 그림자만 한 단 올린다 (표면·깊이 정책 4항). */
@media (hover: hover) and (pointer: fine) {
  :root .clc-button.clc-shade-default:is(.clc-variant-filled, .clc-variant-flat):not(.clc-state-disabled):hover {
    background-color: var(--clc-mist-button-fill);
    background-image: none;
    color: var(--clc-mist-button-ink);
  }
  /* 채우지 않는 변형은 올릴 깊이가 없으니 자리를 아주 옅게 밝혀 응답한다.
     워시가 시맨틱을 따라가므로 위험 액션의 호버는 붉게, 중립은 무채색으로 읽힌다.
     잉크도 여기서 적는다 — 베이스 코어의 호버 규칙(`.clc-variant-{outlined,text}.clc-<시맨틱>`,
     (0,5,0))이 잉크를 `--clc-on-*-lighter` 로 갈아 끼우므로, 적지 않으면 호버마다 잉크가 조용한
     잉크에서 다른 색으로 바뀐다(라이트 primary #5F3ECF → #583AC0). 호버는 자리만 밝힌다. */
  :root .clc-button.clc-shade-default.clc-variant-text:not(.clc-state-disabled):hover {
    background-color: var(--clc-mist-button-wash);
    background-image: none;
    color: var(--clc-mist-button-quiet-ink);
  }
  :root .clc-button.clc-shade-default.clc-variant-outlined:not(.clc-state-disabled):hover {
    background-color: var(--clc-mist-action-neutral-fill);
    background-image: none;
    color: var(--clc-mist-button-quiet-ink);
    box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-1);
  }
}
/* 채우지 않는 변형의 눌림 자리 — 베이스 코어의 `.clc-variant-{outlined,text}.clc-<시맨틱>:active`
   (0,5,0)가 호버 미디어 밖에서 배경과 잉크를 갈아 끼운다. 그대로 두면 호버가 없는 터치에서는 누르는
   순간 Outlined·Text 가 `--clc-<시맨틱>-lighter` 틴트와 `--clc-on-*-lighter` 잉크로 칠해지고, 중립
   Text(아이콘 전용 닫기·툴바 버튼)는 레거시 불투명 회색(`--clc-base-200`) 블록이 된다. 눌림은
   "그림자 한 단 + 축소"(아래 절)이지 색이 아니므로, 자리와 잉크는 호버와 같은 값으로 붙잡는다 —
   Outlined 는 뜬 종이 + 조용한 잉크, Text 는 시맨틱 워시 + 조용한 잉크다. `:root` 로 (0,6,0) 을 만들어
   베이스를 이기고, 호버 미디어 뒤에 두어 데스크톱에서 호버와 겹칠 때도 같은 값이 남는다. 깊이는
   건드리지 않는다(상태 토큰이 정한다). */
:root .clc-button.clc-shade-default.clc-variant-outlined:not(.clc-state-disabled):active {
  background-color: var(--clc-mist-action-neutral-fill);
  color: var(--clc-mist-button-quiet-ink);
}

:root .clc-button.clc-shade-default.clc-variant-text:not(.clc-state-disabled):active {
  background-color: var(--clc-mist-button-wash);
  color: var(--clc-mist-button-quiet-ink);
}

/* clevi light/dark 코어의 호환용 `box-shadow: ... !important`는 이 상태 토큰을 읽는다.
   속성 중요도와 싸우지 않고 값만 바꿔 깊이 상태를 준다.

   깊이가 없는 변형(Flat·Text)은 어느 상태에서도 이 토큰으로 깊이를 받지 않는다. 쉬는 값을
   none 으로 두는 것만으로는 모자랐다 — 아래 호버·눌림 대입이 (0,4,0)/(0,3,0) 이라 (0,2,0) 인
   none 을 이겨, Text 호버에 specular + elevation-1 이 그려졌다(Flat 은 베이스 코어의
   `box-shadow: none !important` 가 막아 드러나지 않았을 뿐이다). 그래서 대입 쪽에서 두 변형을
   뺀다. `:where()` 로 빼는 것은 특이성을 예전 그대로 두기 위해서다 — 이 토큰을 자기 상태
   선택자의 특이성으로 덮어 온 소비처가 있다.

   포커스 대입만은 변형을 가리지 않는다 — 켜졌다는 빛은 모든 변형에 필요하다. 대신 무엇이 실려
   오는지는 변형이 정한다. 포커스 토큰은 "블룸 + 쉬는 깊이(specular + elevation-0)"라 그대로
   받으면 Flat·Text 가 포커스에서만 깊이를 얻는다. 그래서 두 변형의 스코프에서 포커스 토큰을
   블룸만으로 덮는다 — 깊이 없는 변형에게 포커스는 빛 하나다. */
.clc-button:is(.clc-variant-flat, .clc-variant-text) {
  --clc-button-state-shadow: none;
  --clc-button-focus-shadow: var(--clc-mist-focus-shadow);
}

.clc-button:not(:where(.clc-variant-flat, .clc-variant-text)):not(.clc-state-disabled):not(:active):hover {
  --clc-button-state-shadow: var(--clc-button-hover-shadow);
}

.clc-button:not(.clc-state-disabled):not(:active):focus-visible {
  --clc-button-state-shadow: var(--clc-button-focus-shadow);
}

/* 눌림의 깊이 — 깊이가 있는 변형(Filled·Outlined)은 호버에서 올린 한 단(elevation-1)을 내려
   쉬는 깊이(specular + elevation-0 = `--clc-button-active-shadow`)로 돌아간다. 깊이가 없는
   변형은 위 none 그대로다.
   예전에는 따로 `:is(outlined, text, flat):active { … elevation-0 !important }` 가 있었다.
   Outlined 는 이 대입으로 이미 같은 값을 얻고, Flat·Text 에는 쉬는 상태(그림자 없음)보다 깊은
   그림자를 줘 "눌렀는데 떠오르는" 역전을 만들어서 지웠다. */
.clc-button:not(:where(.clc-variant-flat, .clc-variant-text)):not(.clc-state-disabled):active {
  --clc-button-state-shadow: var(--clc-button-active-shadow);
}

/* 같은 눌린 깊이를 변형 규칙의 모양으로도 적는다 — 쉬는·호버 변형 규칙이 자기 깊이를 box-shadow 로
   적는 것과 짝이다. 그려지는 값은 이 규칙이 아니라 레거시 코어의 `.clc-button` 그림자 규칙(상태 토큰을
   읽는 `!important`)이 위 대입에서 읽어 정하고, 값은 둘이 같다.
   그래서 중요도를 쓰지 않는다 — 쓰면 Filled 를 키보드로 누르는 동안의 포커스 빛(아래 포커스 + 눌림
   대입이 상태 토큰으로 싣는다)을 이 규칙이 덮는다. 배경도 적지 않는다 — Filled 가 함께 걸려 채움이
   바뀐다.
   게시 CSS 를 읽는 소비 앱의 버튼 계약 테스트('variant active depth')가 이 선택자 모양
   (`.clc-shade-default:is(…outlined…):active`)으로 눌린 깊이를 찾는다.
   **이 규칙은 렌더되지 않는다 — 소비처 테스트 지문 전용이다.** 중요도가 없어 레거시 코어의
   `.clc-button { box-shadow: var(--clc-button-state-shadow, none) !important }` 에 언제나 진다.
   남은 일(오너 결정 대기): 게시 뒤 소비처 테스트의 'variant active depth' 단언을 토큰 규칙
   (위 `:active` 대입)과 축소 규칙으로 옮기고, 이 규칙과 check-button-contract.py 의 짝 항목을
   함께 지운다. */
:root .clc-button.clc-shade-default:is(.clc-variant-filled, .clc-variant-outlined):not(.clc-state-disabled):active {
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
}

/* 키보드로 누르는 동안(Space·Enter — `:focus-visible` 과 `:active` 가 함께 걸린다)에도 포커스 빛은
   남는다. 누른다고 포커스가 떠나는 것이 아니기 때문이다. 위 포커스 대입은 `:not(:active)` 라
   예전에는 누르는 순간 Filled 의 블룸이 꺼졌고(눌림 대입만 남았다), Outlined·Flat·Text 는 아래
   명시 규칙이 눌림을 가리지 않아 켜진 채였다 — 키보드로 누를 때 변형마다 반응이 달랐다.
   값은 포커스 토큰 그대로다. 깊이 있는 변형에게는 "블룸 + 쉬는 깊이"이고 눌린 깊이가 곧 쉬는
   깊이라(`--clc-button-active-shadow` = `--clc-button-shadow` — check-button-contract 가 본다)
   "빛 + 눌린 깊이"와 같다. 깊이 없는 변형은 위 스코프가 덮은 블룸만 받는다. (0,4,0) 이라 눌림
   대입(0,3,0)을 순서와 무관하게 이긴다. */
.clc-button:not(.clc-state-disabled):focus-visible:active {
  --clc-button-state-shadow: var(--clc-button-focus-shadow);
}

/* ---- 채우지 않거나 깊이 없는 변형의 포커스: 빛 + 자리 워시 ----
   베이스 코어의 포커스 규칙은 Filled 에만 걸리므로 나머지 셋은 여기서 직접 준다. 포커스는 블룸과
   자리 워시 두 층이다. 블룸은 조상의 overflow 에 잘리는 자리(스크롤 목록·다이얼로그 본문)에서
   통째로 사라질 수 있으므로, 자리가 쉬는 모습과 달라야 잘려도 포커스가 보인다(WCAG 2.4.7).
   워시를 어떻게 까는지는 변형이 고른 잉크 짝이 정한다. 처음에는 셋 모두 배경을 포커스 워시로
   갈아 Flat 의 채움 위 잉크가 워시 위에 놓여 1.35~1.51:1 로 라벨이 사라졌고, 그다음에는 배경을
   변형 자신의 것으로 되돌려 대비는 섰지만 블룸이 잘리면 Outlined·Flat 포커스는 쉬는 모습과 픽셀까지
   같아졌고, 중립 Text 는 자리와 지면의 대비가 라이트 1.07 · 다크 1.08:1 로 떨어졌다. 그래서 변형마다
   짝을 깨지 않는 방식으로 워시를 깐다.
   · Flat — 채움은 그대로 두고 워시를 배경 이미지 층으로 채움 위에 겹친다. 채움 위 잉크 대비는
     오히려 오른다(라이트 primary 흰 글자 5.66 → 6.44:1).
   · 중립 시맨틱의 Text·Outlined — 배경을 포커스 워시로 간다. 중립 잉크가 그 위에서 라이트 10.49 ·
     다크 6.52:1 이고, 자리가 지면과 1.40 · 1.78:1 로 갈린다(아래 중립 덮개 규칙).
   · 색 시맨틱의 Text·Outlined — Text 는 호버와 같은 시맨틱 워시, Outlined 는 쉬는 뜬 종이 그대로다.
     포커스 워시 위에서는 조용한 잉크가 라이트 3.49~4.13 · 다크 3.96~4.82:1 로 AA 에 못 미쳐 깔지
     못했다. 블룸이 잘린 자리에서 이 둘을 어떻게 보일지는 아직 정하지 않았다.
   check-button-contract 가 이 규칙들의 본문(배경색·배경 이미지 층·잉크)을 읽어 두 지면에서 잰다.
   세 변형 규칙 모두 그림자에 중요도를 쓴다 — Flat 은 베이스 코어의 `box-shadow: none !important`
   (0,3,0)를 이겨야 하고, 접근성 상태가 소비처의 그림자 덧칠보다 우선해야 한다. */
/* Outlined — 뜬 종이 + 쉬는 깊이 + 빛. 깊이 계약은 Filled 와 같다. `:is()` 한 항목 모양은 게시본
   CSS 를 읽는 소비 앱 계약 테스트가 찾는 선택자 모양이라 남겨 둔다. */
:root .clc-button.clc-shade-default:is(.clc-variant-outlined):not(.clc-state-disabled):focus-visible {
  outline: none;
  background-color: var(--clc-mist-action-neutral-fill);
  background-image: none;
  box-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0) !important;
}

/* Flat — 채움 + 그 위에 겹친 포커스 워시 + 빛. 깊이는 없다. 워시를 배경색이 아니라 한 색
   그라디언트(= 단색 층)로 얹어 채움을 지우지 않는다 — 베이스가 Filled 의 상태 층
   (`--clc-button-*-gradient`)을 얹는 것과 같은 방식이다. */
:root .clc-button.clc-shade-default.clc-variant-flat:not(.clc-state-disabled):focus-visible {
  outline: none;
  background-color: var(--clc-mist-button-fill);
  background-image: linear-gradient(var(--clc-mist-focus-wash), var(--clc-mist-focus-wash));
  box-shadow: var(--clc-mist-focus-shadow) !important;
}

/* Text — 호버와 같은 시맨틱 워시 + 빛. 깊이는 없다. 그 위 조용한 잉크는 호버에서 이미 AA 로 잰
   짝이다. 중립 시맨틱은 아래 덮개가 포커스 워시로 바꾼다. */
:root .clc-button.clc-shade-default.clc-variant-text:not(.clc-state-disabled):focus-visible {
  outline: none;
  background-color: var(--clc-mist-button-wash);
  background-image: none;
  box-shadow: var(--clc-mist-focus-shadow) !important;
}

/* 중립 시맨틱 덮개 — 중립 네 시맨틱(Base·Secondary·Light·Dark)의 Text·Outlined 는 조용한 잉크가
   같은 중립 잉크라 포커스 워시 위에서도 대비가 넉넉하다. 그래서 자리를 포커스 워시로 간다. 아이콘
   전용 닫기·툴바 버튼 대부분이 여기에 든다 — 이 덮개가 없으면 중립 Text 포커스는 3.5% 중립 워시만
   남아 블룸이 잘리면 보이지 않았다. 시맨틱을 한 단 더 붙인 (0,7,0) 이라 위 변형 규칙(0,6,0)을 순서와
   무관하게 이긴다. 배경만 바꾸고 빛·깊이는 위 규칙 그대로다.
   선택자를 변형마다 나눠 적는 것은 소비 앱 계약 테스트가 Outlined 포커스 빛을
   `.clc-shade-default:is(…outlined…):focus-visible` 모양의 **마지막** 규칙에서 찾기 때문이다 — 배경만
   말하는 이 규칙이 그 모양에 걸리면 빛을 찾지 못한다. */
:root .clc-button.clc-shade-default.clc-variant-outlined:is(.clc-base, .clc-secondary, .clc-light, .clc-dark):not(.clc-state-disabled):focus-visible,
:root .clc-button.clc-shade-default.clc-variant-text:is(.clc-base, .clc-secondary, .clc-light, .clc-dark):not(.clc-state-disabled):focus-visible {
  background-color: var(--clc-mist-focus-wash);
}

/* ---- 눌림: 그림자 한 단 내림 + 미세 축소 (오너 결정 2026-09-11) ----
   누르는 순간은 "들어간다"로 읽혀야 한다. 깊이는 위 `:active` 대입이 한 단 내리고, 여기서는
   크기를 0.985 로 줄인다 — 알아챌 만큼만이다(40px 버튼에서 0.6px). transform 이라 레이아웃은
   움직이지 않고, 깊이가 없는 Flat·Text 도 이것 하나로 눌림에 답한다. 적용 범위는 코어 버튼
   전부다 — 변형·Shade 를 가리지 않고 ToggleButton 과 SelectBar 의 칸도 같은 `.clc-button` 이라
   같은 결정을 받는다. SelectBar 칸은 쉬는 깊이가 없고 호버에서만 뜬 종이 + elevation-0 으로 오르는데,
   눌림은 명시 눌림 규칙이 그 칸을 쉬는 자리(투명, 그림자 없음)로 칠해 한 단 내린 뒤 축소한다
   (SelectBar 절). 누를 수 있는 칩도 같은 결정이다(칩 절).

   "코어 버튼 전부"에 예외는 없지만, **이 규칙 하나로는 닿지 않는 둘**이 있어 따로 받는다.
   ① FAB·FAB 메뉴 토글 — 업스트림 베이스가 `:active` 에 `transform: scale(1.1)`(0,3,0 / 0,4,0)을
      이미 갖고 있어 아래 `:where()`(0,1,0)로는 이기지 못한다. 2026-09-12 실측에서 라이트·다크 모두
      FAB 만 눌렸을 때 커졌다 — 다른 버튼이 줄어드는 동안 혼자 반대 방향으로 움직였다. 같은 결정을
      더 높은 특이성으로 다시 준다(바로 아래 FAB 규칙).
   ② SplitButton 반쪽 — 맞닿은 `.clc-button` 두 개라 한쪽만 줄면 이음매에 틈이 벌어진다. 반쪽을
      여기서 빼고 래퍼를 줄인다(SplitButton 절).

   `:where()` 로 특이성을 (0,1,0) 에 둔다. transform 은 FAB 메뉴처럼 컴포넌트나 소비처가 자기
   움직임에 쓰는 속성이라, 그 주인이 있으면 그쪽이 이겨야 한다(이기지 못하면 눌렀을 때 자리가
   튄다 — 다만 그 "이겨야 할 주인"이 눌림 결정과 어긋나면 위 ① 처럼 되찾아 온다). 비활성·비어
   있음은 누를 수 없으니 제외한다. 프리즘을 품은 버튼도 제외한다 — 프리즘 층의 조상에 transform 을
   거는 순간 스택킹 컨텍스트가 생겨 층 순서가 그 버튼 안으로 갇힌다
   (프리즘 절 "구조 주의"). `:has()` 를 모르는 엔진에서는 `:where()` 가 그 항목을 버려 규칙
   전체가 조용히 빠진다 — 축소가 없을 뿐 깊이 표현은 그대로다.

   움직임 줄이기에서는 전이만 0 이 되고(앱 전역 모션 바닥) 축소는 즉시 상태로 남는다 —
   눌렸다는 것은 움직임이 아니라 상태이기 때문이다. */
:where(.clc-button:not(.clc-state-disabled):not(.clc-state-empty):not(:has(.clv-prism)):not(.clc-splitbutton > *)):active {
  transform: scale(0.985);
}

/* FAB 와 FAB 메뉴 토글의 눌림 — 위 ① 의 되찾기. 베이스의 `scale(1.1)` 을 이기려고 `:root` 와
   `.clc-button` 을 붙여 (0,6,0)/(0,5,0) 으로 올린다. 전이도 함께 되찾는다 — 베이스는 같은 규칙에서
   `var(--clc-transition)`(0.1s linear)을 쓰는데, 그 값은 Mist 모션 토큰이 아니라 레거시 곡선이다.
   FAB 메뉴 토글은 열릴 때 모서리 반경도 바뀌므로(`.clc-state-active`) 그 항목을 전이에 남긴다 —
   transform 만 적으면 누르는 동안 반경이 튄다.
   프리즘 제외는 버튼 규칙과 같은 이유인데, 여기서는 `:where()` 안에 넣는다 — `:has()` 를 모르는
   엔진에서 규칙 자체는 살고 제외만 조용히 빠진다. 버튼 규칙처럼 축소가 통째로 사라지면 베이스의
   `scale(1.1)` 이 그대로 드러나(그쪽은 아무 덮개도 없다) 눌림이 반대로 읽힌다. 두 FAB 규칙을 한
   목록으로 묶지 않은 것도 같은 이유다 — 선택자 목록은 관용적이지 않아 한 줄이 무효면 규칙 전체가
   버려진다.
   깊이는 여기서 건드리지 않는다: FAB 는 아직 Mist 가 매핑하지 않은 레거시 깊이
   (`--clc-fab-shadow`/`-hover-`/`-active-` = `--clc-shadow-4`/`-6`/`-6`)를 쓰고, 그 셋 중 눌림만
   한 단 내리면 남은 둘과 어긋난다. FAB 깊이의 Mist 이관은 남은 일이다. */
:root .clc-button.clc-fab:not(.clc-state-disabled):not(.clc-state-empty):not(:where(:has(.clv-prism))):active {
  transform: scale(0.985);
  transition: transform var(--clc-mist-duration-state) var(--clc-mist-ease);
}

:root .clc-fabmenu > .clc-toggle-button:not(.clc-state-disabled):active {
  transform: scale(0.985);
  transition: transform var(--clc-mist-duration-state) var(--clc-mist-ease), border-radius var(--clc-mist-duration-state) var(--clc-mist-ease);
}

/* 쉬는·열린 상태의 전이도 같이 맞춘다. FAB 메뉴 토글만은 베이스가 그 둘에도 전이를 직접 적어
   (0,2,0 / 0,3,0) 레거시 곡선에 머문다 — 누를 때만 Mist 곡선이면 놓을 때 되돌아가는 속도가 다르다.
   FAB 자신은 쉬는 전이 규칙이 없어 `.clc-button` 스코프의 Mist 값을 이미 받는다. */
:root .clc-fabmenu > .clc-toggle-button,
:root .clc-fabmenu > .clc-toggle-button:not(.clc-state-disabled).clc-state-active {
  transition: transform var(--clc-mist-duration-state) var(--clc-mist-ease), border-radius var(--clc-mist-duration-state) var(--clc-mist-ease);
}

/* 버튼의 상태 전이는 Mist 가 여기서 처음 켠다. 베이스 코어 규칙(`transition: var(--clc-button-transition)`)
   이 읽는 토큰의 기본값(`_css-variables.scss` 의 `$button-transition` = `all 0.1s linear, width 0,
   height 0`)은 단위 없는 0 이 시간 값이 아니라서 선언 전체가 무효가 된다 — 그래서 게시본 버튼은
   전이 없이(`all 0s`) 상태가 즉시 바뀌었다. 그 토큰을 버튼 스코프에서 Mist 모션 토큰으로 갈아
   끼운다. 상태가 실제로 바꾸는 네 속성만 적어, `all` 이 크기·패딩 변화까지 끌고 다니지 않게 한다.
   같은 토큰을 읽는 `.clc-pager-element`·캐러셀 페이저 버튼은 이 스코프 밖이라 계속 전이가 없다. */
.clc-button {
  --clc-button-transition: background-color var(--clc-mist-duration-state) var(--clc-mist-ease),
      color var(--clc-mist-duration-state) var(--clc-mist-ease),
      box-shadow var(--clc-mist-duration-state) var(--clc-mist-ease),
      transform var(--clc-mist-duration-state) var(--clc-mist-ease);
}

/* 비활성은 투명도를 낮추지 않는다. 중립 필드 재질과 가라앉은 잉크가 상태를 말한다.
   잉크가 삼차 토큰이 아니라 전용 토큰인 이유는 지면 베이스의 주석 참고 — 삼차는
   **종이 위** 기준값이고 비활성이 놓이는 자리는 필드다.

   진행 중(`clc-state-busy`)은 이 재질을 받지 않는다. CleviButton 은 IsBusy 일 때 클릭을 막으려고
   비활성으로도 표시하는데(`disabled` + `clc-state-disabled`), 로더를 그리는 버튼까지 그대로 두면
   "저장 중" 버튼이 누를 수 없는 버튼과 같은 회색으로 가라앉아 방금 누른 액션이 사라진 것처럼
   읽힌다. 그런 버튼은 자리와 채움·잉크를 그대로 두고 로더가 상태를 말한다(클릭 차단·`aria-busy`
   는 컴포넌트가 유지).
   그래서 컴포넌트는 이 클래스를 **로더를 실제로 그리는 버튼에만** 단다(CleviButton·ToggleButton·
   Fab — ChildContent 가 없고 호출부가 따로 Disabled 로 두지 않은 경우). ChildContent 버튼은
   IsBusy 여도 로더를 그리지 않으므로, 채움을 유지하면 활성 버튼과 픽셀까지 같아진다 — 그 버튼은
   비활성 재질로 가라앉는 것이 곧 진행 중 표시다. 로더 없이도 진행 중을 따로 보이는 표현은 상태
   어휘의 결정으로 남아 있다.
   투명도 1 은 두 상태 모두의 약속이라 규칙을 나눴다. `:where()` 로 빼서 특이성은 예전 (0,3,0)
   그대로다 — 같은 특이성의 SelectBar 칸 규칙이 뒤에서 이기는 순서를 지킨다. */
:root .clc-button.clc-state-disabled,
:root .clc-button.clc-state-empty {
  opacity: 1;
}

:root .clc-button.clc-state-disabled:not(:where(.clc-state-busy)),
:root .clc-button.clc-state-empty:not(:where(.clc-state-busy)) {
  color: var(--clc-mist-disabled-ink, var(--clv-text-tertiary, var(--clc-text-disabled-color))) !important;
  background-color: var(--clc-mist-disabled-fill, var(--clc-material-field)) !important;
  background-image: none;
  box-shadow: inset 0 1px 0 var(--clc-material-specular) !important;
}

:root .clc-button.clc-variant-text:is(.clc-state-disabled, .clc-state-empty) {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ToggleButton의 켜짐은 별도 의미색 액션이 아니라 선택 상태다. */
:root .clc-button.clc-toggle-button.clc-state-active:not(.clc-state-disabled) {
  color: var(--clv-text-primary, var(--clc-text-color)) !important;
  background-color: var(--clc-interaction-selected-accent) !important;
  background-image: none;
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
}

/* ---- 드롭다운·자동완성·목록 ---- */
.clc-dropdown-item,
.clc-multiselect-item,
.clc-autocomplete-list-item,
.clc-listbox-item,
.clc-menuitem {
  border-radius: var(--clc-mist-radius-chip);
}

.clc-dropdown-item:hover,
.clc-multiselect-item:hover,
.clc-autocomplete-list-item:hover,
.clc-listbox-item:hover,
.clc-menuitem:hover {
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
}

:is(.clc-dropdown-item, .clc-multiselect-item, .clc-autocomplete-list-item, .clc-listbox-item, .clc-menuitem).clc-state-disabled {
  opacity: 1;
  color: var(--clv-text-tertiary, var(--clc-text-disabled-color));
  background-color: transparent;
  box-shadow: none;
}

/* 지우기(×)는 값이 있는 활성 필드의 유일한 조작 그래픽이다. 삼차 잉크는 이 파일에서 비활성·
   장식 전용이고, 필드 위에서 2.55~3.57:1 이라 비텍스트 대비 3:1(WCAG 1.4.11)에 못 미쳤다.
   보조 잉크로 올리면 필드 위 4.93~7.39, 호버 자리(field-strong) 위 4.53~6.25:1 이다
   (라이트 캔버스·종이 / 다크 캔버스·종이, check-button-contract 의 Resolver 로 잰 값).
   호버는 본문 잉크로 한 단 더 선다. */
.clc-dropdown-clear-icon {
  opacity: 1;
  color: var(--clv-text-secondary, var(--clc-text-secondary-color));
  transition: color var(--clc-mist-duration-state) var(--clc-mist-ease);
}

.clc-dropdown-clear-icon:hover {
  opacity: 1;
  color: var(--clv-text-primary, var(--clc-text-color));
}

/* 패널의 검색/일괄 선택 영역을 표면 안쪽 헤어라인으로만 나눈다. */
.clc-dropdown-filter-container,
.clc-multiselect-filter-container,
.clc-listbox-header {
  border-bottom: 1px solid var(--clc-material-hairline);
}

/* ---- 메뉴·컨텍스트 메뉴 ---- */
:root .clc-context-menu > .clc-menu,
:root .clc-context-menu .clc-navigation-menu,
:root .clc-menu:not(.clc-profile-menu) > .clc-navigation-item > .clc-navigation-menu {
  border: none;
}

.clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper:hover {
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
}

.clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper-active,
.clc-menu:not(.clc-profile-menu) .clc-navigation-item-wrapper:has(> .active) {
  background-color: var(--clc-interaction-selected-accent);
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
}

.clc-menu:focus-visible .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper {
  outline: none;
  background-color: var(--clc-mist-focus-wash);
  box-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular);
}

li.clc-navigation-item.clc-state-disabled {
  opacity: 1;
  color: var(--clv-text-tertiary, var(--clc-text-disabled-color));
}

li.clc-navigation-item.clc-state-disabled :is(.clc-navigation-item-link, .clci) {
  color: var(--clv-text-tertiary, var(--clc-text-disabled-color));
}

ul.clc-profile-menu {
  background-color: transparent;
  border-inline-start: 0;
}

ul.clc-profile-menu:focus-within .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper {
  outline: none;
  background-color: var(--clc-mist-focus-wash);
  box-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular);
}

ul.clc-profile-menu .clc-navigation-menu .clc-navigation-item-wrapper:hover {
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
}

/* ---- 탭: 외곽선/한 변 레일 대신 종이 + 상태 워시 ---- */
.clc-tabview-nav {
  gap: 0.25rem;
  outline: none;
}

.clc-tabview-nav:focus,
.clc-tabview-nav:focus-visible {
  outline: none;
}

/* roving focus의 실제 대상은 li가 아니라 내부 native button이다. UA outline은 끄고
   li의 Mist bloom 하나만 포커스 표시로 남긴다. */
.clc-tabview-nav li > button:focus,
.clc-tabview-nav li > button:focus-visible {
  outline: none;
}

/* Material3가 선택/hover를 한 변 액센트 레일(::after)로 다시 그리므로 생성 자체를 끈다. */
.clc-tabview-nav li::after {
  content: none;
  display: none;
  background: transparent;
}

.clc-tabview-nav li,
.clc-tabview-top > .clc-tabview-nav li,
.clc-tabview-bottom > .clc-tabview-nav li,
.clc-tabview-left > .clc-tabview-nav li,
.clc-tabview-right > .clc-tabview-nav li {
  border: none;
  border-radius: var(--clc-mist-radius-chip);
  margin: 0;
  box-shadow: none;
}

.clc-tabview-nav li:not(.clc-tabview-selected):not(.clc-state-disabled):hover {
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
}

.clc-tabview-nav .clc-tabview-selected {
  background-color: var(--clc-interaction-selected-accent);
  padding-top: 0;
  padding-left: 0;
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
}

/* roving 포커스의 실제 대상은 li 가 아니라 안쪽 native button 이다(위 규칙이 그 UA outline 을
   껐다). `.clc-state-focused` 는 탭 선택 JS 가 **선택된** li 에 얹는 클래스라, 이 규칙만으로는
   키보드가 지금 어느 탭에 있는지 그려지지 않았다 — 탭은 기본 모드에서 포커스 표시가 아예 없는
   유일한 컨트롤이었다. 선언은 그대로 두고 "안쪽 대상이 키보드 포커스를 받은 li" 한 줄을 더해
   같은 블룸이 그 자리에 서게 한다.
   `:has()` 를 `:is()` 로 감싸는 이유는 읽기전용 절과 같다 — 선택자 목록은 관용적이지 않아
   `:has()` 를 모르는 엔진에서는 이 한 줄 때문에 규칙 전체가 버려진다. */
.clc-tabview-nav .clc-state-focused:not(.clc-state-disabled),
.clc-tabview-nav li:is(:has(> :focus-visible)):not(.clc-state-disabled) {
  border-color: transparent;
  outline: none;
  box-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular);
}

/* 선택과 키보드 자리를 가른다. `clc-state-focused` 를 붙이는 주인이 둘이다 — 서버 렌더의
   `CleviTabsItem` 은 **키보드가 짚은** 탭에 붙이지만, 클라이언트 렌더의 탭 선택 JS
   (`wwwroot/Clevi.App.Components.js`)는 **선택된** 탭에 상시로 얹는다. 뒤쪽에서는 위 규칙의
   둘째 줄(키보드 자리)이 생기면서 선택 탭과 키보드 탭이 **둘 다** 같은 블룸을 받아
   "지금 어디냐"가 두 자리가 됐다. 키보드 포커스가 이 내비 안에 있을 때만, 그 자리가 아닌
   쪽의 표시를 거두고 쉬는 모습으로 되돌린다.
   두 줄인 이유는 "쉬는 모습"이 둘이기 때문이다 — 선택 탭은 선택 워시 + 접지 그림자, 선택되지
   않은 탭은 그림자 없음(`.clc-tabview-nav li` 의 바닥값). 특이성은 (0,5,1)·(0,6,1) 이라
   위 포커스 규칙(0,3,0)과 선택 규칙(0,2,0)을 모두 이긴다.
   `:has()` 를 모르는 엔진에서는 이 두 규칙이 통째로 버려지는데, 그런 엔진에서는 위 규칙의
   `:is(:has())` 줄(키보드 자리)도 함께 빠지므로 표시가 다시 하나(선택 탭)로 돌아간다 —
   덜 정확할 뿐 두 자리로 갈라지지는 않는다. */
.clc-tabview-nav:has(li > :focus-visible) .clc-state-focused:not(:has(> :focus-visible)):not(.clc-state-disabled) {
  outline: none;
  box-shadow: none;
}

.clc-tabview-nav:has(li > :focus-visible) .clc-tabview-selected.clc-state-focused:not(:has(> :focus-visible)):not(.clc-state-disabled) {
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
}

.clc-tabview-nav li.clc-state-disabled,
.clc-tabview-dragging {
  opacity: 1;
  color: var(--clv-text-tertiary, var(--clc-text-disabled-color));
}

.clc-tabview-panels,
.clc-tabview.clc-tabview-top > .clc-tabview-panels,
.clc-tabview.clc-tabview-bottom > .clc-tabview-panels,
.clc-tabview.clc-tabview-left > .clc-tabview-panels,
.clc-tabview.clc-tabview-right > .clc-tabview-panels {
  background-color: var(--clc-material-paper);
  border: none;
  border-radius: var(--clc-mist-radius-surface);
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-1);
}

.clc-tabview-drag-over,
.clc-tabview-left > .clc-tabview-nav .clc-tabview-drag-over,
.clc-tabview-right > .clc-tabview-nav .clc-tabview-drag-over {
  background-color: var(--clc-interaction-selected-accent);
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-1);
}

/* ---- SelectBar·Switch·SplitButton ---- */
.clc-selectbar {
  gap: 0.125rem;
  padding: 0.125rem;
  background-color: var(--clc-material-field);
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
}

.clc-selectbar:focus-visible {
  outline: none;
  background-color: var(--clc-mist-focus-wash);
  box-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular);
}

/* SelectBar 는 버튼 여럿을 한 칸으로 묶은 **선택 컨트롤**이라, 안쪽 버튼의 시맨틱
   색이 아니라 선택 워시가 상태를 말한다. 그래서 칸의 깊이와 채움을 먼저 비운다.
   버튼 모델 규칙은 여기 오지 않는다 — SelectBar 칸에는 변형·Shade 클래스가 붙지
   않아 그 선택자가 애초에 매치되지 않는다. 진짜 상대는 업스트림 베이스의 SelectBar
   규칙((0,5,0)까지 간다)이라 `:root` 로 한 단 올리고, 그림자는 같은 무게의
   `!important` 로 덮는다. 호버·눌림 깊이는 아래 두 규칙이 따로 준다. */
:root .clc-selectbar .clc-button,
:root .clc-selectbar .clc-button.clc-state-active {
  --clc-button-state-shadow: none;
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none !important;
}

/* 선택되지 않은 칸의 호버는 뜬 종이 + elevation-0 으로 한 단 오른다. 눌림(`:active`)에서는 이 규칙이
   빠진다 — 버튼 모델의 호버 대입이 `:not(:active)` 인 것과 같은 이유다(예전에는 눌린 동안에도 호버
   깊이가 남아 쉬는 칸보다 깊은 채로 줄어들었다). */
:root .clc-selectbar .clc-button:not(.clc-state-active):not(.clc-state-disabled):not(:active):hover {
  --clc-button-state-shadow: var(--clc-material-elevation-0);
  background-color: var(--clc-material-paper-raised);
  box-shadow: var(--clc-material-elevation-0) !important;
}

/* 눌린 칸은 쉬는 자리(투명, 그림자 없음)로 한 단 내려오고 버튼 절의 축소만 더해진다. 위 호버 규칙을
   빼는 것만으로는 모자랐다 — 그러면 업스트림 베이스의 SelectBar 칸 호버 규칙(0,5,0)이 드러나, 누르는
   동안 칸이 레거시 불투명 회색(`--clc-base-200`)으로 칠해졌다. 그래서 눌림을 명시 규칙으로 칠한다 —
   (0,6,0) 이라 그 베이스를 이긴다. */
:root .clc-selectbar .clc-button:not(.clc-state-active):not(.clc-state-disabled):active {
  --clc-button-state-shadow: none;
  background-color: transparent;
  box-shadow: none !important;
}

:root .clc-selectbar .clc-button.clc-state-active {
  --clc-button-state-shadow: inset 0 1px 0 var(--clc-material-specular);
  background-color: var(--clc-interaction-selected-accent);
  color: var(--clv-text-primary, var(--clc-text-color));
  box-shadow: inset 0 1px 0 var(--clc-material-specular) !important;
}

.clc-selectbar.clc-selectbar-horizontal .clc-button:not(:first-child),
.clc-selectbar.clc-selectbar-vertical .clc-button:not(:first-child) {
  margin: 0;
}

.clc-switch {
  outline: none;
  transition: box-shadow var(--clc-mist-duration-state) var(--clc-mist-ease);
}

.clc-switch .clc-switch-circle,
.clc-switch.clc-switch-checked .clc-switch-circle {
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
}

.clc-switch:focus-within {
  outline: none;
}

.clc-switch:hover:has(.clc-switch-circle:not(.clc-disabled)) {
  box-shadow: var(--clc-material-elevation-1);
}

.clc-switch .clc-switch-circle:hover:not(.clc-disabled)::before,
.clc-switch.clc-switch-checked .clc-switch-circle:hover:not(.clc-disabled)::before {
  box-shadow: var(--clc-material-elevation-0);
}

.clc-switch:has(:focus-visible) {
  outline: none;
  box-shadow: var(--clc-mist-focus-shadow);
}

:root .clc-switch .clc-switch-circle.clc-disabled {
  opacity: 1;
  background: var(--clc-material-field);
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
}

:root .clc-switch.clc-switch-checked .clc-switch-circle.clc-disabled {
  background: var(--clc-interaction-selected-accent);
}

:root .clc-switch .clc-switch-circle.clc-disabled::before,
:root .clc-switch.clc-switch-checked .clc-switch-circle.clc-disabled::before {
  background: var(--clv-text-tertiary, var(--clc-text-disabled-color));
}

.clc-splitbutton {
  box-shadow: var(--clc-material-elevation-0);
  transition: transform var(--clc-mist-duration-state) var(--clc-mist-ease);
}

/* SplitButton 의 눌림 축소는 반쪽이 아니라 래퍼가 받는다. 반쪽 두 개는 여백 없이 맞닿아 헤어라인
   하나로만 갈리는데(아래 메뉴 버튼 규칙), 한쪽만 0.985 로 줄면 그 이음매가 벌어져 두 반쪽이 서로
   떨어진 것처럼 보인다. 그래서 버튼 절의 축소 규칙에서 `:not(.clc-splitbutton > *)` 로 반쪽을 빼고,
   어느 쪽을 눌러도 컨트롤 전체가 한 덩어리로 줄어들게 한다 — 깊이는 반쪽이 각자 받는다.
   래퍼가 `:active` 인 동안에만 transform 이 붙으므로 전이는 위 규칙에 상시로 둔다(여기에만 적으면
   누를 때만 부드럽고 놓을 때는 튄다). 특이성을 `:where()` 로 비우는 이유는 버튼 절과 같다.
   열린 메뉴는 팝업 JS 가 `document.body` 로 옮겨 두므로(`__radzenHome`) 래퍼 transform 이 만드는
   포함 블록·스택킹 컨텍스트에 걸리지 않는다. */
:where(.clc-splitbutton:has(> .clc-button:active)) {
  transform: scale(0.985);
}

.clc-splitbutton > .clc-button {
  --clc-button-state-shadow: inset 0 1px 0 var(--clc-material-specular);
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
}

.clc-splitbutton > .clc-splitbutton-menubutton,
.clc-splitbutton > .clc-splitbutton-menubutton.clc-variant-outlined {
  margin-inline-start: 0;
  border-inline-start: 1px solid var(--clc-material-hairline);
}

/* ---- Checkbox·Radio·Chip: 선택 워시/빛, opacity 없는 비활성 ---- */
.clc-checkbox-list:focus-visible,
.clc-radio-button-list:focus-visible {
  outline: none;
}

:focus-visible .clc-chkbox-box.clc-state-focused:not(.clc-state-disabled),
.clc-radio-button-list:focus-visible .clc-radiobutton-box.clc-state-focused:not(.clc-state-disabled) {
  outline: none;
  box-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular);
}

/* Material3의 hover halo는 포커스 빛처럼 확장되어 Mist의 hover depth와 의미가 겹친다. */
.clc-chkbox-box::after,
.clc-radiobutton-box::after {
  content: none;
  display: none;
}

.clc-chkbox-box:hover:not(.clc-state-disabled),
.clc-radiobutton-box:hover:not(.clc-state-disabled) {
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
}

/* ---- PanelMenu: 셸 안의 내비게이션 콘텐츠 ---- */
.clc-panel-menu,
.clc-panel-menu:focus {
  background-color: transparent;
  outline: none;
}

.clc-panel-menu .clc-navigation-item {
  border-block-end: none;
}

.clc-panel-menu .clc-navigation-item-wrapper:hover {
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
}

.clc-panel-menu :is(.clc-navigation-item-active, .clc-navigation-item-wrapper-active) {
  background-color: var(--clc-interaction-selected-accent);
  color: var(--clv-text-primary, var(--clc-text-color));
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
}

.clc-panel-menu :is(.clc-navigation-item-active, .clc-navigation-item-wrapper-active)::before {
  content: none;
  display: none;
}

.clc-panel-menu:focus-visible .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper {
  outline: none;
  background-color: var(--clc-mist-focus-wash);
  box-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular);
}

.clc-panel-menu .clc-navigation-item-link,
.clc-panel-menu .clc-navigation-item-link:active,
.clc-panel-menu .clc-navigation-item-link.clc-state-disabled:active {
  background: none;
  background-size: auto;
}

.clc-panel-menu .clc-navigation-item-wrapper:has(> .clc-navigation-item-link:active) {
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
}

.clc-chkbox-box.clc-state-disabled,
.clc-chkbox-box.clc-state-active.clc-state-disabled,
.clc-radiobutton-box.clc-state-disabled,
.clc-radiobutton-box.clc-state-active.clc-state-disabled,
.clc-radiobutton-label.clc-state-disabled,
.clc-radiobutton-template.clc-state-disabled {
  opacity: 1;
  color: var(--clv-text-tertiary, var(--clc-text-disabled-color));
}

.clc-radiobutton-box.clc-state-active.clc-state-disabled {
  background-color: var(--clc-interaction-selected-accent);
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
}

:is(.clc-chkbox-box, .clc-radiobutton-box).clc-state-disabled .clci {
  color: var(--clv-text-tertiary, var(--clc-text-disabled-color));
}

.clc-chip {
  background-color: var(--clc-material-field);
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
  transition: background-color var(--clc-mist-duration-state) var(--clc-mist-ease), box-shadow var(--clc-mist-duration-state) var(--clc-mist-ease), color var(--clc-mist-duration-state) var(--clc-mist-ease), transform var(--clc-mist-duration-state) var(--clc-mist-ease);
}

.clc-chip:not(.clc-state-disabled):hover {
  filter: none;
  background-color: var(--clc-material-paper-raised);
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-1);
}

.clc-chip:not(.clc-state-disabled):active {
  filter: none;
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
}

/* 칩은 누를 수 있는 작은 버튼(CleviChip 은 `role="button"`)이라 버튼 절의 눌림 결정을 같이 받는다 —
   깊이는 바로 위 규칙이 호버에서 한 단 내리고, 크기는 같은 0.985 로 줄인다.
   `role` 로 좁혀서 실제로 빠지는 것은 **하나뿐이다**: DropDown 이 값 표시용으로 찍는 역할 없는
   `div.clc-chip`. 그 칩을 직접 눌러 목록을 열 때 칩 자신이 `:active` 가 되어 누를 수 없는 칩이
   눌린 것처럼 줄어들지 않게 한다(필드의 칩 밖을 누를 때는 칩이 눌린 요소의 조상이 아니라서
   `:active` 가 걸리지 않는다).
   CleviChip 은 Click 이 없어도 `role="button"` 과 tabindex 를 찍으므로(CleviChip.razor) 태그·라벨
   같은 **표시 전용 칩도 이 결정을 받는다** — 누르면 줄어든다. 역할을 Click 유무로 가르는 것은
   접근성 변경이라 컴포넌트 쪽 결정이고, 상태 어휘의 남은 일로 둔다.
   특이성을 `:where()` 로 비우는 이유는 버튼 절과 같다. */
:where(.clc-chip[role=button]:not(.clc-state-disabled)):active {
  transform: scale(0.985);
}

.clc-chip.clc-chip-selected,
.clc-chip:focus-visible:not(.clc-state-disabled),
.clc-chip-list-item:focus-visible,
.clc-chip-list-item:focus-visible .clc-chip:not(.clc-state-disabled) {
  outline: none;
  background-color: var(--clc-interaction-selected-accent);
  box-shadow: var(--clc-mist-focus-shadow), inset 0 1px 0 var(--clc-material-specular);
}

.clc-chip.clc-state-disabled {
  opacity: 1;
  color: var(--clv-text-tertiary, var(--clc-text-disabled-color));
  background-color: var(--clc-material-field);
}

/* ---- 칩: 조용한 라운드 사각 ---- */
.clc-chip {
  border-radius: var(--clc-mist-radius-chip);
}

/* ---- 페이지네이터 활성 페이지: 액센트 소프트 ----
   (토큰이 .clc-paginator 요소 스코프에 정의돼 있어 같은 스코프에서 재정의) */
.clc-paginator {
  --clc-paginator-numeric-button-selected-background-color: color-mix(in srgb, var(--clc-primary) 13%, transparent);
}

/* ---- 스크롤바: 캔버스 위에서 조용하게 ---- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 손잡이는 삼차 잉크를 옅게 편 것이다. 예전에는 `--clc-base-400` 을 읽었는데, 라이트는 Mist 가
   그 값을 무채색 눈금(#8A8894)으로 다시 정의하지만 다크는 정의하지 않아 레거시 회색(#565656)이
   남았다 — 캔버스 위 1.43:1 로 거의 안 보이고 보라 기운도 없었다(언어 §8 "지면을 따라 뒤집히지
   않는 토큰" 함정). 삼차 잉크를 직접 읽으면 두 지면 모두 잉크 위계를 따라간다
   (라이트 캔버스 위 #BBBAC2, 1.62:1 · 다크 #44424B, 1.87:1).
   삼차 잉크가 평평한 캔버스에 맞춰 #7F7D8A 로 내려온 뒤로 `--clc-base-400` 과 값이 갈렸다 —
   손잡이는 눈금이 아니라 잉크를 따라야 하므로 여기서 삼차 잉크를 읽는 것이 맞다. */
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--clv-text-tertiary) 45%, transparent);
  border-radius: var(--clc-mist-radius-pill);
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ==========================================================================
   프리즘 — "여기는 AI를 향한다"는 표시

   액센트가 "이건 주요 동작"을 말한다면, 프리즘은 대상을 말한다. 저채도 램프가
   표면 뒤에서 천천히 돌면서, 그 표면이 모델로 이어진다는 것을 알린다. 무지개가
   아니라 "빛이 갈라진 자국"으로 읽히도록 채도를 낮게 잡는다. 장식이 아니라
   표시이므로 입력·조작이 실제로 AI 로 가는 자리에만 켠다.

   소비처는 자기 CSS 로 다시 그리지 않는다. 마크업 두 층을 얹고 세기는 커스텀
   속성으로만 조절한다. 이렇게 두는 이유는 스코프드 CSS 다 — 소비 컴포넌트의 스코프
   속성은 이 층들에 붙지 않아 자손 선택자로는 손이 닿지 않지만, 커스텀 속성은
   상속되므로 조상 어디서든 값을 말할 수 있다.

       <div class="…">              ← position: relative 인 래퍼
           <span class="clv-prism is-active" aria-hidden="true">
               <span class="clv-prism__glow">
                   <span class="clv-prism__halo"></span>
                   <span class="clv-prism__glint"></span>
               </span>
               <span class="clv-prism__ring"></span>
           </span>
           …내용…                    ← position: relative + z-index (0 < z < 11)
       </div>

   구조 주의 — 글로우를 내용의 의사요소 + `z-index: -1` 로 두면 안 된다. 조상 중
   스택킹 컨텍스트가 없으면 조상들의 배경 뒤까지 내려가, 흰 배경 하나에 통째로
   가려진다(번짐을 아무리 키워도 보이지 않는다). 그래서 래퍼 안의 독립 층으로 두고
   글로우 z-index 0 · 링 z-index 11 로 내용을 위아래에서 감싼다. 같은 이유로
   `.clv-prism` 자신에게 z-index/opacity/transform/filter 를 주면 안 된다 —
   스택킹 컨텍스트가 생기는 순간 두 층이 그 안에 갇혀 샌드위치가 무너진다.

   글로우만 한 겹 더 깊은 이유 — 같은 요소에 `filter` 와 `mask` 를 함께 쓰면 마스크가
   흐림보다 나중이라 번져 나간 부분을 도로 잘라낸다. 그래서 흐림은 바깥 `__glow` 가
   갖고 띠는 자식들(`__halo` 와 `__glint`)이 그린다. 링은 흐리지 않으니 한 겹이면 된다.

   굴절광은 "채운 알약을 흐린 것"이 아니라 "경계에 얹은 띠를 흐린 것"이다. 채운 도형을
   흐리면 어떤 점의 밝기는 그 점이 도형을 얼마나 넓게 "보는가"로 정해진다 — 직선 변
   밖에서는 반평면을 보지만 볼록한 모서리 밖에서는 그보다 좁은 부채꼴만 본다. 그래서
   모서리가, 알약이라면 좌우 캡 전체가 구조적으로 어두워졌다. 700×56 알약에서 실측하면
   캡/직선변 알파비가 표면 밖 0px 에서 0.87, 5px 에서 0.82, 12px 에서 0.75 로 멀어질수록
   더 벌어졌다(총량비 0.83). 게다가 잉크의 대부분은 불투명한 표면 아래에 깔려 버려지고
   보이는 것은 언제나 꼬리뿐이라, 그 격차가 그대로 "여기만 효과가 없다"로 읽혔다.

   띠로 그리면 밝기를 정하는 것이 "도형을 얼마나 보는가"가 아니라 "띠가 얼마나 두꺼운가"
   가 된다. 곡률은 2차 효과로 내려가, 같은 알약에서 표면 밖 0~3px 구간의 캡/직선변 비가
   1.12~0.98(총량비 0.96)이 된다 — 눈에 띄는 안쪽 심지는 캡에서 오히려 조금 더 밝고,
   남은 차이는 알파 0.03 아래의 바깥 꼬리에만 남는다. 잉크가 보이는 곳에 모이므로 같은
   밝기를 더 작은 흐림으로 얻고(9px → 5px), 흐림 비용도 그만큼 준다.

   튜닝 (전부 상속되는 커스텀 속성. 기본값은 위 `:root` 에 토큰으로 있다 —
   아래 값은 그 토큰이 지금 무엇인지를 적은 것이지 두 번째 정본이 아니다):

       --clv-prism-on             0 | 1   켜짐 스위치. 층들이 각자 최대치에 곱한다
       --clv-prism-spread         6px     굴절광 띠가 표면 밖으로 나가는 폭
       --clv-prism-inset          1px     띠가 표면 안으로 물리는 폭. 표면에 가려 직접
                                          보이지는 않지만, 흐린 뒤 바깥 프로필을 채우는
                                          재료라 0 으로 두면 경계가 얇아진다
       --clv-prism-blur           7px     띠를 녹이는 정도
       --clv-prism-saturate       1.65    글로우 채도
       --clv-prism-strength       0.23    글로우 최대 불투명도
       --clv-prism-ring-strength  0.88    링의 봉우리 불투명도
       --clv-prism-ring-floor     0%      링의 골 — 0% 면 선이 끊어지고, 100% 면 옛날처럼
                                          끊기지 않는 한 줄이 된다
       --clv-prism-ring-width     1px     링 두께
       --clv-prism-glint-strength 0.2     반짝임 층 최대 불투명도. 0 이면 층이 안 그려진다
       --clv-prism-glint-bloom    12px    반짝임 띠가 글로우보다 더 번지는 폭
       --clv-prism-glint-drift    1.9     빠른 무리의 회전비. 음수면 램프와 역행하는데,
                                          역행은 "꾸물거림"으로 읽혀 뺐다(오너 확정)
       --clv-prism-glint-white    14%     반짝임에 섞는 흰빛. 어두운 지면일수록 크게 —
                                          라이트 지면은 자해라 0 으로 끈다(라이트 베이스)
       --clv-prism-sheen-strength 60%     스침 한 줄의 세기
       --clv-prism-sheen-sweep    196%    한 바퀴 도는 동안 스침이 훑는 횟수(196% = 1.96번)
       --clv-prism-radius         28px    표면의 모서리 반경
       --clv-prism-spin           34s     한 바퀴 도는 시간
       --clv-prism-steps          240     한 바퀴의 스텝 수. 회전이 빨라지는 자리에서는
                                          반드시 함께 낮춘다(아래 비용 항목)

   켜는 방법은 둘이다. C# 이 판정을 알면 층 자신에게 `is-active` 를, CSS 로만 판정되면
   (예: `:has()`) 조상에 `clv-prism-on` 을 붙이거나 같은 선언을 직접 쓴다.

   `--clv-prism-radius` 는 이 구성에서 더 중요해졌다. 띠가 표면 경계를 따라 달리므로 값이
   표면의 실제 반경과 어긋나면 모서리에서 띠가 떠 보인다. 채운 도형을 흐리던 때는 흐림이
   그 어긋남을 뭉개 줬지만 지금은 아니다.

   ── 빛의 결 ──────────────────────────────────────────────────────────────

   고르게 만들면 이번에는 "테두리"로 읽힌다. 균일한 것은 빛이 아니기 때문이다. 그래서
   두 가지를 얹는다.

   1) 끊어진 링. 링의 알파를 각도에 따라 흔들어 두 군데서만 살아나게 한다(`ring-floor`).
      빛이 센 자리에서는 물체의 윤곽선이 오히려 날아간다 — 균일하게 한 바퀴 도는 선은
      파이핑이지 빛이 아니다. 새로 그린 층이 아니라 있던 선을 덜어낸 것이다.

   2) 반짝임(`__glint`). 밝은 자리들이 둘레를 따라 흐른다. 중요한 것은 그것들이 **한
      덩어리로 돌지 않는다**는 점이다 — 각도 하나에 배수만 곱하면 간격이 영원히 고정되고,
      눈은 그 강체를 즉시 "도는 바퀴"로 알아챈다. 그래서 셋으로 쪼갠다.

          느린 무리 2점   같은 방향 0.42×    81.0s
          빠른 무리 2점   같은 방향 1.9×     17.9s
          스침    1줄    **미끄러짐**       회전 한 바퀴에 1.96번

      마지막 줄이 핵심이다. 앞의 둘은 아무리 속도를 달리해도 결국 "도는" 것이라 회전감이
      남는데, 스침은 길이 방향으로 미끄러지는 빛줄기라 움직임의 **종류**가 다르다.

      셋 다 같은 방향인 것은 오너 확정이다 — 역행 무리는 "진행"이 아니라 "꾸물거림"으로
      읽혔다. 무리 사이의 강체감은 방향이 아니라 속도 차(0.42× vs 1.9×)가 푼다.

   자리에 못 박힌 얼룩은 결함이고, 흘러가는 얼룩은 빛이다 — 이 프리미티브의 두 절반이
   각각 그 문장의 앞뒤다.

   ── 비용 ─────────────────────────────────────────────────────────────────

   커스텀 속성 회전은 페인트형이라, 스텝이 바뀔 때마다 글로우 하위 트리를 다시 그리고
   흐림을 다시 돌린다. 그래서 비용은 곧 **초당 무효화 횟수 × 다시 칠하는 넓이**다.

   회전과 스침을 한 애니메이션이 함께 옮기는 이유가 이것이다. 스침을 따로 돌리면 무효화
   흐름이 둘이 된다(22s 시절 실측: 둘 16.6회/s, 하나 10.9회/s). `@keyframes` 하나가
   두 속성을 같이 옮기면 회전 흐름 하나로 끝난다 — 지금 34s/240 은 초당 7.1회다.
   잃는 것은 전체 무늬의 반복 주기가 한 바퀴(34초)로 짧아지는 것뿐이다.

   `steps` 를 토큰으로 뺀 이유도 같다. 회전이 빨라지는 자리에서 스텝 수를 그대로 두면
   무효화가 그만큼 늘어난다 — 34s/240 은 초당 7.1회지만, 응답 중 4.5s/240 은 초당 53회다.
   빠르게 도는 동안은 눈이 세밀한 스텝을 좇지 못하므로 함께 낮추는 것이 맞다.

   램프(`--clv-prism-1..4`)는 라이트/다크 각자의 `:root` 에 있다 — 이 파일은 구조와
   움직임만 갖는다. 라이트 지면은 세기도 몇 개 덮는다(라이트 베이스의 지면 보정 블록):
   흰 지면에서는 모든 층이 어두운 쪽으로만 보일 수 있어 다크와 물리가 반대이기 때문이다.
   ========================================================================== */
/* 등록하지 않은 커스텀 속성은 보간되지 않고 값이 튄다 — 회전이 멈춘 것처럼 보인다.
   이 등록이 회전의 전제다. */
@property --clv-prism-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
/* 스침의 위치. 회전과 같은 애니메이션이 함께 옮기므로 무효화 흐름이 늘지 않는다. */
@property --clv-prism-sheen {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
.clv-prism {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 회전은 항상 걸어 두고 재생 여부만 여닫는다. `animation` 선언 자체를 켜짐
     규칙에 걸면 안 된다 — 켜질 때마다 애니메이션이 새로 만들어져 매번 0도에서 다시
     시작하고, 결과적으로 각도가 거의 움직이지 않아 "멈춰 있는" 것처럼 보인다.
     `animation-play-state` 는 현재 시각을 보존하므로 몇 번을 여닫아도 이어진다.
     멈춰 있는 동안에는 프레임이 돌지 않으므로 꺼진 프리즘의 비용은 0이다.

     `linear` 가 아니라 `steps()` 인 이유 — 커스텀 속성 회전은 합성기가 못 받는
     페인트형이라, 연속 보간이면 프레임마다 conic 재페인트 + 글로우 blur 재계산이
     돌고, 켜진 프리즘이 화면 전체를 상시 무효화한다(블러 표면과 겹치면 그 표면의
     backdrop 재샘플까지 매 프레임 유발 — Gecko 실측 48fps 의 주범 유형).
     한 바퀴 240 스텝이면 기본 34s 에서 스텝당 ~142ms(초당 ~7회)·1.5° — 반경 28px
     링에서 1.5° 는 호 길이 1px 미만이라 연속과 육안 구분이 안 된다. 재페인트는 매
     프레임이 아니라 **각도가 바뀌는 순간에만** 일어나므로 비용은 각도 갱신 빈도를
     따른다 — 연속 보간이면 화면 주사율만큼, 스텝이면 초당 steps ÷ spin 회(기본 7.1회).
     고정된 개선율이 아니라 주사율과 두 토큰이 정하는 비다. 각도가 안 변하는 프레임은
     무효화 자체가 없다.

     스텝 수가 토큰인 이유 — 회전이 빨라지는 자리(응답 중 4.5s)에서 240 을 그대로 두면
     초당 53회가 되어 프레임의 태반이다. 그 자리는 눈이 세밀한 스텝을 좇지 못하므로
     함께 낮춘다. 스침도 이 한 애니메이션이 같이 옮긴다. */
  animation: clv-prism-spin var(--clv-prism-spin) steps(var(--clv-prism-steps)) infinite;
  animation-play-state: paused;
}

.clv-prism.is-active,
.clv-prism-on .clv-prism {
  --clv-prism-on: 1;
  animation-play-state: running;
}

/* 세 층이 같은 것을 그린다 — 표면 경계에 얹힌 띠. 안쪽을 마스크로 도려내 띠만 남기고,
   링은 그것을 1px 로 선명하게, 글로우는 두껍게 잡아 흐린다. */
.clv-prism__halo,
.clv-prism__glint,
.clv-prism__ring {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  background: conic-gradient(from var(--clv-prism-angle), var(--clv-prism-1), var(--clv-prism-2), var(--clv-prism-3), var(--clv-prism-4), var(--clv-prism-1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* 굴절광의 바깥 겹 — 흐림만 갖는다. 표면보다 spread 만큼 큰 상자라, 자식이 이 상자
   가장자리에 띠를 그리면 띠의 바깥 모서리가 곧 표면 밖 spread 지점이 된다.
   전이는 세기(opacity)와 띠 폭(inset)만 싣는다. `filter` 를 전이 목록에 넣으면 소비처가 상태에
   따라 `--clv-prism-blur` 를 바꿀 때(예: 호버에서 반경을 넓힘) 흐림 반경이 material 시간 동안
   애니메이션된다 — 파일 머리 원칙 "blur 반경은 애니메이션하지 않는다" 위반이고, 흐림은 반경이 바뀌는
   프레임마다 층 전체를 다시 흐린다. 그래서 반경(과 채도)은 즉시 바뀐다. 호버처럼 세기·띠 폭을 함께
   바꾸는 자리에서는 그 둘의 전이가 반경이 바뀌는 순간을 누그러뜨린다. */
.clv-prism__glow {
  position: absolute;
  inset: calc(-1 * var(--clv-prism-spread));
  z-index: 0;
  filter: blur(var(--clv-prism-blur)) saturate(var(--clv-prism-saturate));
  opacity: calc(var(--clv-prism-on, 0) * var(--clv-prism-strength));
  pointer-events: none;
  transition: opacity var(--clc-mist-duration-material) var(--clc-mist-ease), inset var(--clc-mist-duration-material) var(--clc-mist-ease);
}

/* 띠 자체. 반경은 바깥 상자 기준(표면 반경 + spread)이라 표면과 동심이고, 패딩이 곧
   띠의 폭이라 안쪽 모서리는 표면 안 inset 지점에 놓인다. */
.clv-prism__halo {
  border-radius: calc(var(--clv-prism-radius) + var(--clv-prism-spread));
  padding: calc(var(--clv-prism-spread) + var(--clv-prism-inset));
  transition: padding var(--clc-mist-duration-material) var(--clc-mist-ease), border-radius var(--clc-mist-duration-material) var(--clc-mist-ease);
}

/* 반짝임. 같은 띠를 더 두껍게 잡아(bloom) 흐린 뒤에 더 멀리 번지게 하고, 그 위에 밝은
   자리들을 서로 다른 리듬으로 얹는다. 세 배경 층이 각각 하나의 리듬이다 —
   스침(미끄러짐) · 느린 무리(같은 방향 0.42×) · 빠른 무리(같은 방향 1.9×).
   회전 각도는 하나를 나눠 쓰므로 층이 늘어도 무효화 흐름은 그대로다. */
.clv-prism__glint {
  inset: calc(-1 * var(--clv-prism-glint-bloom));
  border-radius: calc(var(--clv-prism-radius) + var(--clv-prism-spread) + var(--clv-prism-glint-bloom));
  padding: calc(var(--clv-prism-glint-bloom) + var(--clv-prism-spread) + var(--clv-prism-inset));
  background: linear-gradient(100deg, transparent 40%, color-mix(in srgb, color-mix(in srgb, #fff var(--clv-prism-glint-white), var(--clv-prism-2)) var(--clv-prism-sheen-strength), transparent) 50%, transparent 60%) var(--clv-prism-sheen) 50%/340% 100% no-repeat, conic-gradient(from calc(var(--clv-prism-angle) * 0.42), transparent 0deg, color-mix(in srgb, #fff var(--clv-prism-glint-white), var(--clv-prism-3)) 30deg, transparent 78deg, transparent 186deg, color-mix(in srgb, #fff var(--clv-prism-glint-white), var(--clv-prism-2)) 212deg, transparent 250deg, transparent 360deg), conic-gradient(from calc(var(--clv-prism-angle) * var(--clv-prism-glint-drift)), transparent 0deg, color-mix(in srgb, #fff var(--clv-prism-glint-white), var(--clv-prism-1)) 16deg, transparent 44deg, transparent 138deg, color-mix(in srgb, #fff var(--clv-prism-glint-white), var(--clv-prism-4)) 162deg, transparent 196deg, transparent 360deg);
  opacity: calc(var(--clv-prism-on, 0) * var(--clv-prism-glint-strength));
  transition: opacity var(--clc-mist-duration-material) var(--clc-mist-ease), padding var(--clc-mist-duration-material) var(--clc-mist-ease), border-radius var(--clc-mist-duration-material) var(--clc-mist-ease);
}

/* 굴절된 테두리. 선이 둘레를 한 바퀴 균일하게 돌면 그것은 빛이 아니라 파이핑이다 —
   빛이 센 쪽에서는 윤곽선이 오히려 날아간다. 그래서 알파를 각도에 따라 흔들어 선을
   끊는다. `--clv-prism-ring-floor` 가 골의 깊이이고, 100% 면 끊기지 않는 한 줄이 된다. */
.clv-prism__ring {
  z-index: 11;
  border-radius: var(--clv-prism-radius);
  padding: var(--clv-prism-ring-width);
  background: conic-gradient(from var(--clv-prism-angle), var(--clv-prism-1) 0deg, color-mix(in srgb, var(--clv-prism-2) var(--clv-prism-ring-floor), transparent) 84deg, var(--clv-prism-3) 172deg, color-mix(in srgb, var(--clv-prism-4) var(--clv-prism-ring-floor), transparent) 266deg, var(--clv-prism-1) 360deg);
  opacity: calc(var(--clv-prism-on, 0) * var(--clv-prism-ring-strength));
  transition: opacity var(--clc-mist-duration-material) var(--clc-mist-ease), padding var(--clc-mist-duration-material) var(--clc-mist-ease);
}

@keyframes clv-prism-spin {
  to {
    --clv-prism-angle: 360deg;
    --clv-prism-sheen: var(--clv-prism-sheen-sweep);
  }
}
/* 움직임 강등 — 회전만 멈추고 색과 링은 남긴다. 프리즘은 장식이 아니라 정보라,
   움직임을 줄여야 할 때도 "AI 를 향한다"는 표시 자체는 남아야 한다.
   터치 기기(`pointer: coarse`)로는 강등하지 않는다 — 그렇게 걸면 모바일 사용자
   대부분이 효과를 아예 못 본다. 강등 여부는 기기가 아니라 설정이 정한다.

   `!important` 를 쓰는 이유: 켜는 규칙은 소비처가 자기 문맥에 맞춰 더 긴 선택자로
   쓰기 마련이라(예: `.chat-composer:has(.mention-bot) .clv-prism`) 특이성 경쟁으로는
   이길 수 없다. 접근성 설정은 소비처 사정보다 위라 특이성 밖에서 결정한다. */
html[data-clevi-motion=reduced] .clv-prism {
  animation-play-state: paused !important;
}

/* OS 가 움직임을 줄이라고 할 때. 기본값(`on`)은 여기에 따른다 — 앱이 시스템 설정을
   임의로 이기지 않는다. 빠져나갈 수 있는 건 사용자가 직접 고른 "항상 켬"(`full`)뿐이다. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-clevi-motion=full]) .clv-prism {
    animation-play-state: paused !important;
  }
  html:not([data-clevi-motion=full]) .clv-prism__glow,
  html:not([data-clevi-motion=full]) .clv-prism__halo,
  html:not([data-clevi-motion=full]) .clv-prism__glint,
  html:not([data-clevi-motion=full]) .clv-prism__ring {
    transition: none;
  }
}
/* ==========================================================================
   강조 프리즘 — "다음은 여기"라는 표시

   사용자가 켠 안내(가이드 스포트라이트·첫 실행 안내)가 지금 가리키는 **한 곳**을 짚는
   굴절광이다. 한 화면에 하나만 켠다. 호버·선택·알림 같은 일상 강조나 광고성 주목에는
   쓰지 않는다 — 흔해지는 순간 "다음은 여기"라는 말이 힘을 잃는다.

   Mist 에서 빛은 세 가지 뜻만 갖는다. 모양이 곧 뜻이라 서로 빌려 쓰지 않는다.

       단색 블룸                  포커스 — 키보드가 지금 여기 있다(`--clc-mist-focus-*`)
       액센트 호 굴절(이 절)       가이드 강조 — 안내가 다음 할 일로 여기를 가리킨다
       전체 램프 굴절(위 프리즘)   AI — 이 입력·조작은 모델로 간다

   AI 프리즘을 그대로 쓰면 비춘 버튼이 AI 기능으로 읽히고 AI 표시는 흔해진다. 그래서
   굴절광이라는 재료만 같이 쓰고 세 가지를 다르게 둔다.

       색     AI 는 보라→파랑→청록→분홍 한 바퀴. 여기는 액센트 호만 — 청보라 h288 →
              보라 h308 → 난초 h330(라이트 L 0.620 · 다크 L 0.76 등명도). 파랑·청록이 없다.
       구성   AI 는 끊어진 링이 효과를 짊어지고 글로우가 뒤에 번진다. 여기는 링 없이 경계
              띠를 흐린 번짐만 있고, 대상 **바깥**으로만 퍼진다 — 대상 자신은 선명하게 둔다.
       움직임 AI 는 34초 한 바퀴 상시 회전. 여기는 새 초점에 닿을 때 `arrive`(1.4s) 동안
              한 번 스치고 멈춘다. 반복(infinite)하지 않는다.

   비춘 대상이 이미 AI 프리즘을 가진 표면이면 겹쳐 그리지 않는다(층을 두지 않거나
   `is-active` 를 빼고 초점 흐림만 둔다) — 두 빛이 한 자리에 겹치면 두 뜻이 다 흐려진다.

   마크업 — 대상(가이드라면 스크림의 구멍) 사각형에 놓는 독립 층이다. 위치·크기와
   `--clv-emphasis-prism-radius`(대상 반경)는 소비처가 준다.

       <span class="clv-emphasis-prism is-active" aria-hidden="true">
           <span class="clv-emphasis-prism__glow">       ← 흐림만 진다(바깥 층)
               <span class="clv-emphasis-prism__halo"></span>   ← 경계 띠(마스크, 자식 층)
           </span>
           <span class="clv-emphasis-prism__lift"></span>       ← 리프트 그림자(깊이)
       </span>

   구조 규칙은 AI 프리즘과 같다 — 흐림(`filter`)은 바깥 `__glow`, 띠(`mask`)는 자식
   `__halo`. 한 요소에 둘을 같이 걸면 마스크가 흐림보다 나중이라 번짐을 도로 자른다.
   `__glow` 는 대상보다 spread + 3×blur 만큼 넓다: 띠(spread)에 흐림 꼬리(가우스 약 3σ)까지
   담아야 소비처가 이 층에 거는 clip-path 가 꼬리를 자르지 않는다.

   구멍 안쪽 번짐은 **소비처가 자른다.** 띠의 안쪽 모서리가 대상 경계에 놓이므로 흐리면
   번짐의 절반이 대상 안으로 스민다. 테마는 대상의 모양을 모르므로 기본 clip 이 없고,
   소비처가 `__glow` 에 인라인 `clip-path: path(evenodd, "바깥 층 전체 사각형 − 대상 둥근
   사각형")` 을 준다. 좌표는 `__glow` 기준이라 대상 사각형은 (E, E) 에서 시작한다
   (E = spread + 3×blur). clip-path 는 filter 보다 나중에 적용되므로 흐린 결과를 자른다.

   켜짐 · 도착 · 변형 (클래스는 층 자신에게 붙인다)
       is-active                    켜짐 스위치(`--clv-emphasis-prism-on: 1`). 없으면 층이 안 보인다
       is-arriving                  도착 스침 한 번. 소비처가 떼고 reflow 뒤 다시 붙이면 다시 재생된다
       clv-emphasis-prism--quiet    조용한 변형(기다리는 단계) — 번짐 ×0.75, 리프트 없음

   튜닝 (상속되는 커스텀 속성. 기본값은 위 `:root` 에 토큰으로 있다 — 아래는 지금 값을
   적은 것이지 두 번째 정본이 아니다):

       --clv-emphasis-prism-1..3        램프(각 베이스의 위 `:root`)
       --clv-emphasis-prism-strength    0.86    번짐 최대 불투명도(라이트는 베이스 보정 1)
       --clv-emphasis-prism-spread      12px    띠가 대상 밖으로 나가는 폭
       --clv-emphasis-prism-blur        12px    띠를 녹이는 정도
       --clv-emphasis-prism-saturate    1.35    번짐 채도
       --clv-emphasis-prism-floor       45%     띠 골의 알파 바닥(AI 프리즘 `-ring-floor` 와 같은 개념)
       --clv-emphasis-prism-arrive      1.4s    도착 스침 길이
       --clv-emphasis-prism-radius      12px    대상 모서리 반경 — 소비처가 실제 반경으로 덮는다.
                                                어긋나면 모서리에서 띠가 떠 보인다
   상태(토큰 아님): `--clv-emphasis-prism-on`(0/1), `--clv-emphasis-prism-angle`(아래 @property).

   빛의 결 — 균일한 테는 빛이 아니라 테두리로 읽힌다. 그래서 띠의 원뿔 그라데이션에 골을
   두 군데(135° · 285°) 두어 보라와 난초 두 웅덩이에 빛이 고인 것으로 읽히게 한다.

   강등 — 움직임 줄이기는 스침 없이 쉬는 각도의 정지한 빛만 남긴다(@property 초기값 =
   쉬는 각도라 애니메이션이 없어도 같은 그림이다). 투명도 줄이기는 번짐을 거두고 리프트만
   남긴다 — 사다리의 근거가 "사용자가 시스템에 말해 둔 요구"이고 번짐은 이 설정이 거두라고
   한 투명도다. AI 프리즘 번짐과 같은 판정이다. 강조는 그때 짙은 정적 딤 + 선명한 대상 +
   리프트로 선다.

   비용 — 멈춰 있는 동안은 애니메이션이 없어 무효화가 0 이다. 도착하는 `arrive` 동안만
   각도 보간(페인트형)이 매 프레임 `__glow` 하위 트리를 다시 흐린다. 한 번뿐이고 한 화면에
   하나라 AI 프리즘의 상시 회전처럼 steps() 로 쪼갤 이유가 없다.

   이 절은 Mist 두 베이스에만 있다(코어는 Mist 베이스만 가져온다). material3 · clevi-light/dark
   테마에서는 층이 스타일을 받지 못해 보이지 않는다 — 소비처는 그때 초점 흐림만으로 선다.
   ========================================================================== */
/* 각도를 등록해야 스침이 보간된다(등록하지 않은 커스텀 속성은 값이 튄다). 초기값이
   쉬는 각도(200°)라 도착이 끝난 뒤나 움직임을 줄인 때에도 같은 그림에서 멈춘다. */
@property --clv-emphasis-prism-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 200deg;
}
/* 층 자신은 자리만 잡는다. 켜짐은 `is-active` 가 층에 얹는 상태다 — 기본을 0 으로 두어
   소비처가 층만 깔아 두고 켜고 끄기를 클래스 하나로 여닫게 한다. */
.clv-emphasis-prism {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --clv-emphasis-prism-on: 0;
}

.clv-emphasis-prism.is-active {
  --clv-emphasis-prism-on: 1;
}

/* 번짐의 바깥 층 — 흐림만 갖는다. 대상보다 spread + 3×blur 만큼 큰 상자라, 흐림 꼬리까지
   이 상자 안에 담긴다(소비처의 clip-path 가 꼬리를 자르지 않는 조건). */
.clv-emphasis-prism__glow {
  position: absolute;
  inset: calc(-1 * (var(--clv-emphasis-prism-spread) + 3 * var(--clv-emphasis-prism-blur)));
  filter: blur(var(--clv-emphasis-prism-blur)) saturate(var(--clv-emphasis-prism-saturate));
  opacity: calc(var(--clv-emphasis-prism-on, 0) * var(--clv-emphasis-prism-strength));
  pointer-events: none;
}

/* 경계 띠. 바깥 층에서 흐림 꼬리(3×blur)만큼 안으로 들어온 상자라 바깥 모서리가 대상 밖
   spread 지점이고, 패딩(= spread)이 띠 폭이라 안쪽 모서리가 곧 대상 경계다. 반경은 대상
   반경 + spread 라 대상과 동심이다. 액센트 호 램프에 골 두 군데(floor)를 둔다. */
.clv-emphasis-prism__halo {
  position: absolute;
  inset: calc(3 * var(--clv-emphasis-prism-blur));
  box-sizing: border-box;
  padding: var(--clv-emphasis-prism-spread);
  border-radius: calc(var(--clv-emphasis-prism-radius) + var(--clv-emphasis-prism-spread));
  background: conic-gradient(from var(--clv-emphasis-prism-angle), var(--clv-emphasis-prism-1) 0deg, var(--clv-emphasis-prism-2) 80deg, color-mix(in srgb, var(--clv-emphasis-prism-2) var(--clv-emphasis-prism-floor), transparent) 135deg, var(--clv-emphasis-prism-3) 205deg, color-mix(in srgb, var(--clv-emphasis-prism-3) var(--clv-emphasis-prism-floor), transparent) 285deg, var(--clv-emphasis-prism-1) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* 리프트 — 대상이 물린 바닥에서 한 단 떠오른 깊이. 바깥 그림자는 상자 안쪽에 그려지지
   않으므로 대상 자신은 어두워지지 않는다. 다크에서는 스크림이 밝기 차이를 만들고 이 그림자는
   윤곽만 보탠다. 투명도 줄이기에서도 남는 층이다. */
.clv-emphasis-prism__lift {
  position: absolute;
  inset: 0;
  border-radius: var(--clv-emphasis-prism-radius);
  box-shadow: var(--clc-material-elevation-2);
  opacity: var(--clv-emphasis-prism-on, 0);
  pointer-events: none;
}

/* 조용한 변형 — 기다리기만 하면 되는 단계. 스크림 없이 빛만 남기므로 세기를 낮추고,
   조작할 대상이 아니라서 떠오르는 깊이(리프트)도 두지 않는다. */
.clv-emphasis-prism--quiet .clv-emphasis-prism__glow {
  opacity: calc(var(--clv-emphasis-prism-on, 0) * var(--clv-emphasis-prism-strength) * 0.75);
}

.clv-emphasis-prism--quiet .clv-emphasis-prism__lift {
  display: none;
}

/* 도착 — 새 초점에 닿을 때 한 번 스치고 쉬는 각도에서 멈춘다. `animation` 을 클래스에 거는
   것이 의도다: 소비처가 `is-arriving` 을 떼고 reflow 뒤 다시 붙이면 애니메이션이 새로 만들어져
   처음부터 재생된다. 끝난 뒤 클래스가 남아 있어도 끝값(200°)이 초기값과 같아 튀지 않는다.
   번짐은 같은 순간 페이드로 들어온다. 둘 다 한 번뿐이다 — 멈춘 동안 무효화 0 이 이 빛의 비용 계약이다. */
.clv-emphasis-prism.is-arriving {
  animation: clv-emphasis-prism-arrive var(--clv-emphasis-prism-arrive) cubic-bezier(0.3, 0.7, 0.2, 1) 1;
}

.clv-emphasis-prism.is-arriving .clv-emphasis-prism__glow {
  animation: clv-emphasis-prism-in 0.5s ease-out 1;
}

@keyframes clv-emphasis-prism-arrive {
  from {
    --clv-emphasis-prism-angle: -160deg;
  }
  to {
    --clv-emphasis-prism-angle: 200deg;
  }
}
@keyframes clv-emphasis-prism-in {
  from {
    opacity: 0;
  }
}
/* 움직임 강등 — 스침과 페이드를 거두고 쉬는 각도의 정지한 빛만 남긴다. 강조는 정보라
   움직임을 줄여도 "다음은 여기"는 남아야 한다. `!important` 와 `full` 탈출구는 AI 프리즘과
   같은 이유다 — 소비처는 층을 더 긴 선택자로 다루기 마련이고, 접근성 설정은 그 특이성
   경쟁 밖에서 결정한다. 빠져나갈 수 있는 것은 사용자가 직접 고른 "항상 켬"(`full`)뿐이다. */
html[data-clevi-motion=reduced] .clv-emphasis-prism,
html[data-clevi-motion=reduced] .clv-emphasis-prism__glow {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-clevi-motion=full]) .clv-emphasis-prism,
  html:not([data-clevi-motion=full]) .clv-emphasis-prism__glow {
    animation: none !important;
  }
}
/* 투명도 줄이기 — 번짐을 거두고 리프트만 남긴다. 강등 사다리 ①과 같은 근거(사용자가 시스템에
   말해 둔 요구)이고, AI 프리즘 번짐에 내린 판정과 같다. 링이 없는 빛이라 번짐을 빼면 빛은 사라지고,
   강조는 짙은 정적 딤 + 선명한 대상 + 리프트로 선다. 흐림 층을 통째로 빼므로 흐림 비용도 0 이 된다.
   이 규칙을 강등 사다리가 아니라 여기 두는 것은 강조 프리즘의 판정을 한 절에 모으기 위해서다. */
@media (prefers-reduced-transparency: reduce) {
  .clv-emphasis-prism__glow {
    display: none !important;
  }
}
/* ==========================================================================
   강등 사다리 — Gecko 성능 폴백 + 접근성/지원 여부의 3단
   토큰 간접 참조라 선택자 반복 없이 값만 갈아끼운다.

   여기 있는 세 단(⓪ Gecko · ① 투명도 줄이기 · ② backdrop-filter 미지원)은 모두
   "사용자가 시스템에 말해 둔 요구"이거나 "브라우저가 못 그린다"는 사실이다. 테마가
   판단해도 되는 근거가 있는 것들이다.

   예전에는 그 앞에 `(pointer: coarse) and (max-width: 820px)`이면 blur를 절반으로
   낮추는 단이 하나 더 있었다. 그건 근거가 다르다 — 화면이 작다는 것은 기기가
   느리다는 뜻이 아니고, 좋은 폰을 쓰는 사람까지 흐린 화면을 강요받았다.
   그래서 테마는 값(`--clc-material-blur-*-lite`)만 내놓고, 언제 쓸지는 소비처가
   설정으로 정하도록 옮겼다(앱 쪽 `data-clevi-surface`).
   ========================================================================== */
/* ⓪ Gecko(Firefox): blur 반경 절반 폴백.
   실측(2026-08, 홈 대시보드): 같은 화면이 blur 켬 48fps ↔ 끔 155fps — Gecko 의
   backdrop-filter 는 Chromium 대비 수 배 느려, full 반경(32~44px)을 그대로 주면
   재페인트가 일어나는 모든 순간(스크롤·전환·표면 위 애니메이션)이 무너진다.
   비용은 대략 면적×반경이라 반경만 절반(-lite)으로 내린다 — 재질은 유지한다
   (minimal 강등이 아니다). "브라우저가 못 그린다" 계열이므로 ② 와 같은 근거로
   테마가 판단한다. `-moz-appearance` 는 Gecko 만 파싱하는 속성이라 UA 스니핑 없이
   엔진을 특정한다. ①(투명도 줄이기)이 같은 특이성(:root)으로 뒤에 오므로
   접근성 설정은 여전히 이 단을 이긴다. */
@supports (-moz-appearance: none) {
  :root {
    --clc-material-blur-shell: var(--clc-material-blur-shell-lite);
    --clc-material-blur-veil: var(--clc-material-blur-veil-lite);
    --clc-material-blur-chrome: var(--clc-material-blur-chrome-lite);
    --clc-material-blur-scrim: var(--clc-material-blur-scrim-lite);
  }
}
/* ① 투명도 줄이기 설정: 전 표면 정적 폴백 */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --clc-material-shell: var(--clc-material-shell-static);
    --clc-material-veil: var(--clc-material-veil-static);
    --clc-material-chrome: var(--clc-material-chrome-static);
    --clc-material-scrim: var(--clc-material-scrim-static);
    --clc-material-blur-shell: none;
    --clc-material-blur-veil: none;
    --clc-material-blur-chrome: none;
    --clc-material-blur-scrim: none;
  }
  /* 프리즘 — 링은 남기고 번짐만 끈다. 움직임 강등이 "회전만 멈추고 색과 링은 남긴다"인 것과
     같은 원칙이다: 링은 "여기는 AI 를 향한다"는 **정보**라 설정이 무엇이든 남아야 하고, 표면
     밖으로 번지는 반투명 글로우(halo·glint 를 담은 흐림 층)는 그 정보를 꾸미는 투명도라
     이 설정이 거두라고 한 바로 그것이다. 글로우 한 겹을 통째로 빼므로 흐림 비용도 함께 0 이 된다.
     `!important` 는 움직임 강등과 같은 이유다 — 소비처는 켜는 규칙을 더 긴 선택자로 쓰기
     마련이고, 접근성 설정은 그 특이성 경쟁 밖에서 결정한다. */
  .clv-prism__glow {
    display: none !important;
  }
}
/* ② backdrop-filter 미지원: 정적 폴백.
   크롬(L2⁺)은 여기서 특히 중요하다 — blur 를 못 그리는 브라우저에서 반투명만 남으면
   콘텐츠 위에 겹치는 표면이라 뒤 글자가 그대로 비친다(종이를 쓰던 시절의 그 결함). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --clc-material-shell: var(--clc-material-shell-static);
    --clc-material-veil: var(--clc-material-veil-static);
    --clc-material-chrome: var(--clc-material-chrome-static);
    --clc-material-scrim: var(--clc-material-scrim-static);
  }
}
/* ==========================================================================
   고대비 모드 — 사용자가 켜는 한 단 (오너 결정 2026-09-12)

   기본 화면은 그대로 둔다. 포커스는 여전히 블룸(26% 12px)과 자리 워시(9%)이고, 기본
   모드에는 선·링·outline 을 새로 넣지 않는다. 대비가 더 필요한 사람은 **모드를 켠다** —
   WCAG G174 가 말하는 "충분한 대비로 전환하는 컨트롤 제공"이 이 한 단이다.

   스위치는 `html` 의 `data-clevi-contrast` 속성이다.
       high      켬
       standard  끔
       없음·auto OS 설정(`prefers-contrast: more`)을 따름
   선택자가 (0,2,0) 이라 `:root`(0,1,0) 토큰 정의를 링크 순서와 무관하게 이긴다. 두 관문의
   본문이 같아야 하므로 믹스인 하나로 찍는다 — 손으로 두 벌 적으면 반드시 갈린다.

   모드가 켜지면 바뀌는 것은 셋뿐이다.
     (a) 포커스 = 단색 광대. 조립 토큰 `--clc-mist-focus-shadow` 만 갈아 끼우므로 그 토큰을
         읽는 코어 스무 남짓 규칙과 클라이언트 소비처는 한 줄도 바뀌지 않는다. 행(메뉴·목록·
         탭·내비)만 자리를 안쪽으로 옮긴다 — inset 그림자는 언제나 가장자리에서 시작해서
         틈을 비울 수 없고, 자르는 컨테이너가 바깥 광대를 잘라 먹기 때문이다.
     (b) 꺼진 선택 컨트롤과 파인 자리에 3:1 경계.
     (c) 삼차 잉크를 보조 잉크로 올린다. 비활성 잉크는 그대로다(WCAG 는 비활성을 면제한다).
   강제 색상 모드(파일 끝)는 이 모드와 무관하게, 켜져 있든 아니든 적용된다.

   광대의 해부 — 프리즘을 한 색·정지로 옮긴 것이다.
       틈(rim) 2px      지면색으로 칠한 불투명 틈. 심지를 표면에서 띄우고, 광대의 안쪽 절반을
                        가리며, 심지의 안쪽 이웃을 언제나 아는 색으로 만든다(두 색 표시, WCAG C40).
                        반투명이면 심지 색이 비쳐 안쪽 대비가 무너진다(다크 실측 4.49 → 10.4).
       심지(core) 1.25px 식별 책임(3:1)을 지는 층. 그림자 심지는 소수 두께가 그대로 그려진다.
                        1px 로 내리면 125% 배율에서 온전한 심지 픽셀이 하나도 없을 수 있다.
       광대(band)       심지 바깥으로 번지는 액센트 두 겹(5px · 18px). 세기는 지면이 정한다.
   ========================================================================== */
:root[data-clevi-contrast=high] {
  /* (a) 기하. reach 는 표시가 표면 밖으로 차지하는 폭 — "잘리지 않을 여유"의 기준이다. */
  --clc-mist-focus-ring-core-width: 1.25px;
  --clc-mist-focus-ring-gap: 2px;
  --clc-mist-focus-ring-reach: calc(var(--clc-mist-focus-ring-gap) + var(--clc-mist-focus-ring-core-width));
  /* 심지 = 액센트를 지면 **반대쪽**으로 민 색. 라이트는 그대로(100%), 다크는 흰빛 쪽으로
     20% 밀어 달아오른 심지가 된다. 비율만 지면이 정한다(지면 베이스의 같은 이름 토큰). */
  --clc-mist-focus-ring-core: color-mix(in srgb, var(--clc-primary) var(--clc-mist-focus-ring-core-mix, 100%), var(--clc-shade-far));
  /* 틈 = **아는 한 색**(불투명). 라이트는 흰빛(#FFFFFF — 스펙큘러와 같은 방향), 다크는
     바닥색(#141318 — 접지 그림자 방향)이다. "지면색"이라고 부르지 않는 이유: 라이트의 실제
     L0 는 캔버스(#ECEBEF)이고 `--clc-shade-ground` 는 램프의 밝은 끝으로 아직 #FFFFFF 라,
     캔버스 위 사물에는 순백 테가 한 겹 둘러진다(캔버스와 1.19:1). 틈에 요구하는 성질은
     "지면과 같은 색"이 아니라 "심지 안쪽 이웃이 아는 한 색"이다 — 대비 책임은 심지가 지고
     틈은 심지를 배경에서 떼어 놓기만 하면 된다. 반투명이면 그 성질이 깨진다(사물의 그림자가
     비쳐 다크 심지 대비가 4.49 → 10.4 로 요동친다. 검사 (i) 가 알파를 문다).
     `--clc-shade-ground` 를 실제 바닥으로 내릴지는 캔버스 담당이 올린 오너 결정에 달렸다 —
     그때 이 토큰도 함께 정한다. */
  --clc-mist-focus-ring-rim: var(--clc-shade-ground);
  --clc-mist-focus-ring-band-inner: color-mix(in srgb, var(--clc-primary) var(--clc-mist-focus-ring-band-a1, 22%), transparent);
  --clc-mist-focus-ring-band-outer: color-mix(in srgb, var(--clc-primary) var(--clc-mist-focus-ring-band-a2, 8%), transparent);
  /* 사물의 조립 — 첫 층이 맨 위다(틈 → 심지 → 광대). 이름과 자리는 기본 모드와 같으므로
     `--clc-button-focus-shadow` · `--clc-input-focus-shadow` 처럼 이 토큰을 var() 로 읽는
     조립들도 손대지 않고 따라온다(커스텀 속성은 쓰는 자리에서 풀린다). */
  --clc-mist-focus-shadow:
      0 0 0 var(--clc-mist-focus-ring-gap) var(--clc-mist-focus-ring-rim),
      0 0 0 var(--clc-mist-focus-ring-reach) var(--clc-mist-focus-ring-core),
      0 0 5px var(--clc-mist-focus-ring-reach) var(--clc-mist-focus-ring-band-inner),
      0 0 18px calc(var(--clc-mist-focus-ring-reach) + 0.5px) var(--clc-mist-focus-ring-band-outer);
  /* outline 형 심지 — 행, 인라인 링크(그림자는 줄바꿈 조각을 잘라 그린다), 전역 폴백이 쓴다.
     정수 1px 인 이유: Chromium 은 outline 두께를 CSS px 정수로 **내림**한다(1.25 를 적어도
     1px 로 그려진다). 행의 심지 색은 워시 위 잉크다 — 의미색이 워시 위에서 잉크로 말하는
     것과 같은 규칙이고, 액센트 그대로 두면 워시 위에서 3:1 아래로 내려간다(다크 크롬 2.7). */
  --clc-mist-focus-ring-width: 1px;
  --clc-mist-focus-ring: var(--clc-mist-focus-ring-width) solid var(--clc-mist-focus-ring-core);
  --clc-mist-focus-ring-inset: var(--clc-mist-focus-ring-width) solid var(--clc-mist-ink-primary);
  --clc-mist-focus-ring-inset-offset: -3px;
  /* 행의 워시는 필드용 포커스 워시(액센트 + field-strong)가 아니라 **순수** 액센트 워시다 —
     행은 파인 자리가 아니고, field-strong 을 섞으면 라이트는 탁해지고 다크는 밝아져 심지
     대비를 깎는다(탭·목록 실측 2.5~2.9 → 순수 워시로 4 이상). */
  --clc-mist-focus-ring-row-wash: var(--clc-mist-wash-primary);
  /* 그리드 셀·트리·스케줄러·슬라이더처럼 Mist 가 아직 배선하지 않은 코어 컴포넌트는
     `--clc-outline-*` 를 읽는다. 바닥값을 같은 심지로 맞춰 Material 2px 링이 섞여 보이지
     않게 한다(행/사물 오프셋 분할은 코어가 이미 갖고 있다). */
  --clc-outline-color: var(--clc-mist-focus-ring-core);
  --clc-outline-width: var(--clc-mist-focus-ring-width);
  --clc-outline-offset: var(--clc-mist-focus-ring-gap);
  /* (b) 경계 색 = 보조 잉크. 두 지면 × 캔버스·종이·크롬·베일 위에서, 자리(필드)·호버 자리
     (field-strong)·지면 어느 이웃과도 최악 4.53(라이트) · 4.38:1(다크) 이다 — 비텍스트
     3:1(WCAG 1.4.11)에 여유가 있다. 재질은 1.15~1.56:1 이라 재질만으로는 닿지 못한다. */
  --clc-mist-contrast-boundary: var(--clv-text-secondary);
  --clc-input-border: var(--clc-mist-focus-ring-width) solid var(--clc-mist-contrast-boundary);
  --clc-input-border-block-end: var(--clc-input-border);
  --clc-input-hover-border: var(--clc-input-border);
  --clc-input-focus-border: var(--clc-input-border);
  --clc-input-disabled-border: var(--clc-input-border);
  --clc-input-disabled-border-block-end: var(--clc-input-border);
  /* (c) 삼차 잉크를 보조 잉크로. 삼차는 이 파일에서 장식·비활성 전용이라 본문 대비 등급이
     낮다 — 모드에서는 한 단 올려 모든 글자가 같은 등급을 받게 한다. */
  --clv-text-tertiary: var(--clv-text-secondary);
  /* 비활성은 따라 올리지 않는다. 삼차 잉크를 **직접** 읽던 비활성 규칙들이 함께 올라가면
     비활성과 활성이 한 잉크가 되어 "누를 수 없음"이 사라진다. 그 규칙들이 읽을 값을
     비활성 잉크 토큰으로 되돌린다(아래 규칙).
     그런데 그 토큰 자체도 모드 안에서는 모자란다 — 삼차가 보조로 올라오면 라이트 비활성
     잉크와 보조 잉크의 거리가 ΔE76 5.77 까지 좁아진다(테마가 정한 바닥은 8). 지면이 모드용
     값을 따로 내놓으므로 여기서 갈아 끼운다. 근거와 실측은 지면 베이스의 같은 이름 토큰. */
  --clc-mist-disabled-ink: var(--clc-mist-disabled-ink-contrast);
  --clc-input-disabled-color: var(--clc-mist-disabled-ink);
}

/* 포커스를 선언하지 않은 요소의 전역 폴백. `:where()` 로 특이성을 0 에 두어 어떤 저자
   규칙에도 지고, 브라우저가 어차피 그리던 자리의 모양만 바꾼다(UA 기본 흰·검 이중 링). */
:where(:root[data-clevi-contrast=high]) :where(:focus-visible) {
  outline: var(--clc-mist-focus-ring);
  outline-offset: var(--clc-mist-focus-ring-gap);
}

/* 가려짐(WCAG 2.4.11) — 광대는 표면 밖으로 3.25px 나간다. 코어 목록·메뉴의 roving 은
   `scrollIntoView({ block: 'nearest' })` 로 항목의 테두리 상자를 스크롤 가장자리에 붙이므로
   표시와 가장자리 사이에 여유를 둔다. 고정 머리글이 있는 스크롤 영역의 `scroll-padding` 은
   소비처 몫이다.
   드롭다운·리스트박스가 목록에 남아 있는 것은 **항목 행** 때문이 아니다(아래 행 규칙에서
   뺀 이유는 거기 적었다) — 항목 템플릿 안의 진짜 초점 대상(`button` · `[tabindex]`)은
   전역 폴백으로 광대를 받고, 그 여유가 필요한 것은 그 자리다. */
:root[data-clevi-contrast=high] :where(.clc-menu, .clc-panel-menu, .clc-listbox, .clc-dropdown-items, .clc-tabview-nav, [role=menu], [role=listbox], [role=tablist], [role=tree]) :where(li, a, button, [tabindex]) {
  scroll-margin: calc(var(--clc-mist-focus-ring-reach) + 2px);
}

/* 행 — 자르는 컨테이너 폭을 꽉 채운 것들. 심지는 안쪽 outline 이고 틈 자리에는 행 자신의
   워시가 비친다. 광대는 겹치지 않는다 — 겹치면 워시가 밝아져 심지 대비가 3:1 아래로 내려간다.

   **여기에 드는 것은 키보드 자리를 뜻하는 클래스를 가진 행뿐이다** — 메뉴·프로필 메뉴·
   패널 메뉴·탭의 `clc-state-focused`, 트리 노드의 `clc-state-focused`, DataGrid 의
   `tr.clc-data-row.clc-state-focused`(roving JS 가 옮긴다). 목록 항목(드롭다운·멀티셀렉트·
   자동완성·리스트박스)은 **뺐다**: 그쪽 roving 이 옮기는 클래스가 `clc-state-highlight` 인데
   같은 클래스가 **선택**도 뜻해서(`IsSelected` 가 붙인다), 여기에 심지를 주면 멀티셀렉트에서
   고른 항목 전부에 키보드 자리 표시가 서서 "지금 어디냐"가 열 자리가 된다. 그 자리는 지금도
   9% 워시 하나라 모드 안에서 3:1 에 못 미친다 — 자리와 선택을 가를 표식이 생기기 전에는
   고칠 수 없으므로 알려진 예외로 남긴다(문서에 적는다). */
:root[data-clevi-contrast=high] .clc-menu:focus-visible .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper,
:root[data-clevi-contrast=high] ul.clc-profile-menu:focus-within .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper,
:root[data-clevi-contrast=high] .clc-panel-menu:focus-visible .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper,
:root[data-clevi-contrast=high] .clc-treenode-content.clc-state-focused,
:root[data-clevi-contrast=high] .clc-tabview-nav .clc-state-focused:not(.clc-state-disabled),
:root[data-clevi-contrast=high] .clc-tabview-nav li:is(:has(> :focus-visible)):not(.clc-state-disabled) {
  background-color: var(--clc-mist-focus-ring-row-wash);
  outline: var(--clc-mist-focus-ring-inset);
  outline-offset: var(--clc-mist-focus-ring-inset-offset);
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
}

/* 기본 모드의 탭 덮개(선택 ≠ 키보드 자리)와 짝. 여기서 거둘 것은 블룸이 아니라 안쪽 심지와
   행 워시다 — 선택 탭은 자기 선택 워시로 되돌린다. 근거는 기본 모드 탭 절의 주석 참고. */
:root[data-clevi-contrast=high] .clc-tabview-nav:has(li > :focus-visible) .clc-state-focused:not(:has(> :focus-visible)):not(.clc-state-disabled) {
  background-color: transparent;
  outline: none;
  box-shadow: none;
}

:root[data-clevi-contrast=high] .clc-tabview-nav:has(li > :focus-visible) .clc-tabview-selected.clc-state-focused:not(:has(> :focus-visible)):not(.clc-state-disabled) {
  background-color: var(--clc-interaction-selected-accent);
  box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
}

/* DataGrid 데이터 행 — 심지는 행(`tr`)에 두르고 워시는 칸(`td`)이 칠한다. 코어가 포커스 행의
   칸 바탕을 `--clc-grid-cell-focus-background-color` 로 직접 칠하므로(`_grid.scss`) 행에
   배경을 줘 봐야 칸이 덮는다. 행 워시는 그 토큰을 갈아 끼워 칸이 스스로 칠하게 한다 —
   고정 열의 의사요소 층까지 같은 토큰을 읽으므로 한 줄이 두 색으로 갈리지 않는다. */
:root[data-clevi-contrast=high] .clc-selectable tbody tr.clc-data-row.clc-state-focused {
  --clc-grid-cell-focus-background-color: var(--clc-mist-focus-ring-row-wash);
  outline: var(--clc-mist-focus-ring-inset);
  outline-offset: var(--clc-mist-focus-ring-inset-offset);
}

/* 인라인 링크 — outline 형 심지. 그림자는 줄바꿈된 링크의 조각마다 상자를 따로 그려 글줄
   사이가 지저분해진다. 본문 줄 사이에서는 2px 틈이 이웃 글자에 닿으므로 1px 로 붙인다. */
:root[data-clevi-contrast=high] .clc-link:focus-visible,
:root[data-clevi-contrast=high] :where(p, li, td, dd, blockquote, figcaption, label) > a:focus-visible {
  outline: var(--clc-mist-focus-ring);
  outline-offset: 1px;
  border-radius: 2px;
}

/* 버튼은 모드 안에서 따로 손댈 것이 없다. 키보드 Space 로 누르는 동안 표시가 꺼지지 않게
   하는 것은 눌림 절의 `:focus-visible:active` 대입이 이미 맡고 있고, 그 대입이 읽는
   `--clc-button-focus-shadow` 가 위에서 갈아 끼운 조립 토큰을 그대로 물고 온다 —
   깊이 없는 변형은 변형 스코프에서 그 토큰을 광대 하나로 덮으므로 Flat/Text 에
   elevation 이 실리지도 않는다(check-button-contract (e)). */
/* 칩 — 선택과 포커스를 가른다. 기본 규칙은 선택된 칩에도 포커스 표시를 그대로 주는데(흐린
   블룸일 때는 넘어갔다), 심지가 생기면 "선택 = 포커스"로 보인다. 선택은 워시, 포커스는 광대. */
:root[data-clevi-contrast=high] .clc-chip.clc-chip-selected:not(:focus-visible) {
  box-shadow: inset 0 1px 0 var(--clc-material-specular);
}

/* 스위치 — 기본 모드에서는 호버 규칙(0,4,0)이 포커스 규칙(0,2,0)을 이겨, 포커스된 스위치에
   마우스를 올리면 표시가 사라진다. 모드 안에서 같은 특이성 경쟁을 끝낸다. */
:root[data-clevi-contrast=high] .clc-switch:has(:focus-visible):not(:has(.clc-disabled)) {
  outline: none;
  box-shadow: var(--clc-mist-focus-shadow);
}

/* (b) 경계를 그리는 층. 토큰(`--clc-input-border*`)만으로는 모자란다 — Mist 자신의 요소
   규칙이 `border: 1px solid transparent` 를 직접 말하기 때문이다. 자리를 그리는 쪽만 긋는다. */
:root[data-clevi-contrast=high] :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup),
:root[data-clevi-contrast=high] .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext,
:root[data-clevi-contrast=high] .clv-field-group,
:root[data-clevi-contrast=high] .clc-form-field .clc-form-field-content,
:root[data-clevi-contrast=high] .clc-chip {
  border-color: var(--clc-mist-contrast-boundary);
}

/* 자리를 그리는 것은 하나다 — 그룹·폼 필드 안의 컨트롤은 경계를 다시 긋지 않는다. */
:root[data-clevi-contrast=high] :is(.clv-field-group, .clc-form-field-content) :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup),
:root[data-clevi-contrast=high] :is(.clv-field-group, .clc-form-field-content) .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext {
  border-color: transparent;
}

/* 스위치 트랙은 보더 토큰을 읽지 않는다. `box-sizing: border-box` 에 폭·높이가 못 박혀
   있어 1px 를 둘러도 크기가 변하지 않는다(inset 그림자로 그리면 포커스 그림자가 지운다). */
:root[data-clevi-contrast=high] .clc-switch {
  border: var(--clc-mist-focus-ring-width) solid var(--clc-mist-contrast-boundary);
}

/* 오류 — 자리 안의 색에 3:1 경계를 더한다. 위험 워시만으로는 자리 대비가 1.14~1.22:1 이라
   색을 구분하기 어려운 사람에게는 "자리가 붉다"가 전달되지 않는다. 경계는 오류 자리 위
   최악 3.41:1(라이트 캔버스, 포커스와 겹친 자리)이다. */
:root[data-clevi-contrast=high] :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-colorpicker, .clc-lookup).invalid,
:root[data-clevi-contrast=high] .clc-datepicker:is(:has(> .clc-inputtext.invalid)),
:root[data-clevi-contrast=high] .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext.invalid,
:root[data-clevi-contrast=high] .clv-field-group:is(:has(.invalid)),
:root[data-clevi-contrast=high] .clc-form-field:is(:has(.invalid)) .clc-form-field-content {
  border-color: var(--clc-mist-ink-danger);
}

/* 자리를 그리는 것은 하나다 — 오류에서도 같다. 위 경계 초기화 규칙과 이 오류 경계 규칙이
   둘 다 (0,4,0) 이라 뒤에 온 오류 쪽이 이겨, 그룹·폼 필드 **안**의 컨트롤에 위험색 보더가
   다시 섰다. 기본 모드에서 워시를 한 겹으로 되돌린 것과 짝이다 — 그러지 않으면 '붉은 상자
   안의 더 붉은 상자'가 된다. 갈래마다 한 단씩 높아 ((0,5,0)·(0,6,0)) 순서와 무관하게 이긴다. */
:root[data-clevi-contrast=high] :is(.clv-field-group, .clc-form-field-content) :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-colorpicker, .clc-lookup).invalid,
:root[data-clevi-contrast=high] :is(.clv-field-group, .clc-form-field-content) .clc-datepicker:is(:has(> .clc-inputtext.invalid)),
:root[data-clevi-contrast=high] :is(.clv-field-group, .clc-form-field-content) .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext.invalid {
  border-color: transparent;
}

/* (c) 비활성 잉크를 제자리에 붙잡는다. 아래 규칙들은 기본 모드에서 삼차 잉크를 직접 읽는데,
   모드가 삼차를 올리면 비활성이 활성 보조 잉크와 같아진다. */
:root[data-clevi-contrast=high] :is(.clc-dropdown-item, .clc-multiselect-item, .clc-autocomplete-list-item, .clc-listbox-item, .clc-menuitem, .clc-chip, .clc-tabview-dragging).clc-state-disabled,
:root[data-clevi-contrast=high] .clc-tabview-nav li.clc-state-disabled,
:root[data-clevi-contrast=high] li.clc-navigation-item.clc-state-disabled,
:root[data-clevi-contrast=high] li.clc-navigation-item.clc-state-disabled :is(.clc-navigation-item-link, .clci),
:root[data-clevi-contrast=high] :is(.clc-chkbox-box, .clc-radiobutton-box, .clc-radiobutton-label, .clc-radiobutton-template).clc-state-disabled,
:root[data-clevi-contrast=high] :is(.clc-chkbox-box, .clc-radiobutton-box).clc-state-disabled .clci {
  color: var(--clc-mist-disabled-ink);
}

:root[data-clevi-contrast=high] .clc-switch .clc-switch-circle.clc-disabled::before,
:root[data-clevi-contrast=high] .clc-switch.clc-switch-checked .clc-switch-circle.clc-disabled::before {
  background: var(--clc-mist-disabled-ink);
}

/* OS 설정을 따르는 자동 단. `standard` 로 **끈** 사람만 빠진다. */
@media (prefers-contrast: more) {
  :root:not([data-clevi-contrast=standard]) {
    /* (a) 기하. reach 는 표시가 표면 밖으로 차지하는 폭 — "잘리지 않을 여유"의 기준이다. */
    --clc-mist-focus-ring-core-width: 1.25px;
    --clc-mist-focus-ring-gap: 2px;
    --clc-mist-focus-ring-reach: calc(var(--clc-mist-focus-ring-gap) + var(--clc-mist-focus-ring-core-width));
    /* 심지 = 액센트를 지면 **반대쪽**으로 민 색. 라이트는 그대로(100%), 다크는 흰빛 쪽으로
       20% 밀어 달아오른 심지가 된다. 비율만 지면이 정한다(지면 베이스의 같은 이름 토큰). */
    --clc-mist-focus-ring-core: color-mix(in srgb, var(--clc-primary) var(--clc-mist-focus-ring-core-mix, 100%), var(--clc-shade-far));
    /* 틈 = **아는 한 색**(불투명). 라이트는 흰빛(#FFFFFF — 스펙큘러와 같은 방향), 다크는
       바닥색(#141318 — 접지 그림자 방향)이다. "지면색"이라고 부르지 않는 이유: 라이트의 실제
       L0 는 캔버스(#ECEBEF)이고 `--clc-shade-ground` 는 램프의 밝은 끝으로 아직 #FFFFFF 라,
       캔버스 위 사물에는 순백 테가 한 겹 둘러진다(캔버스와 1.19:1). 틈에 요구하는 성질은
       "지면과 같은 색"이 아니라 "심지 안쪽 이웃이 아는 한 색"이다 — 대비 책임은 심지가 지고
       틈은 심지를 배경에서 떼어 놓기만 하면 된다. 반투명이면 그 성질이 깨진다(사물의 그림자가
       비쳐 다크 심지 대비가 4.49 → 10.4 로 요동친다. 검사 (i) 가 알파를 문다).
       `--clc-shade-ground` 를 실제 바닥으로 내릴지는 캔버스 담당이 올린 오너 결정에 달렸다 —
       그때 이 토큰도 함께 정한다. */
    --clc-mist-focus-ring-rim: var(--clc-shade-ground);
    --clc-mist-focus-ring-band-inner: color-mix(in srgb, var(--clc-primary) var(--clc-mist-focus-ring-band-a1, 22%), transparent);
    --clc-mist-focus-ring-band-outer: color-mix(in srgb, var(--clc-primary) var(--clc-mist-focus-ring-band-a2, 8%), transparent);
    /* 사물의 조립 — 첫 층이 맨 위다(틈 → 심지 → 광대). 이름과 자리는 기본 모드와 같으므로
       `--clc-button-focus-shadow` · `--clc-input-focus-shadow` 처럼 이 토큰을 var() 로 읽는
       조립들도 손대지 않고 따라온다(커스텀 속성은 쓰는 자리에서 풀린다). */
    --clc-mist-focus-shadow:
        0 0 0 var(--clc-mist-focus-ring-gap) var(--clc-mist-focus-ring-rim),
        0 0 0 var(--clc-mist-focus-ring-reach) var(--clc-mist-focus-ring-core),
        0 0 5px var(--clc-mist-focus-ring-reach) var(--clc-mist-focus-ring-band-inner),
        0 0 18px calc(var(--clc-mist-focus-ring-reach) + 0.5px) var(--clc-mist-focus-ring-band-outer);
    /* outline 형 심지 — 행, 인라인 링크(그림자는 줄바꿈 조각을 잘라 그린다), 전역 폴백이 쓴다.
       정수 1px 인 이유: Chromium 은 outline 두께를 CSS px 정수로 **내림**한다(1.25 를 적어도
       1px 로 그려진다). 행의 심지 색은 워시 위 잉크다 — 의미색이 워시 위에서 잉크로 말하는
       것과 같은 규칙이고, 액센트 그대로 두면 워시 위에서 3:1 아래로 내려간다(다크 크롬 2.7). */
    --clc-mist-focus-ring-width: 1px;
    --clc-mist-focus-ring: var(--clc-mist-focus-ring-width) solid var(--clc-mist-focus-ring-core);
    --clc-mist-focus-ring-inset: var(--clc-mist-focus-ring-width) solid var(--clc-mist-ink-primary);
    --clc-mist-focus-ring-inset-offset: -3px;
    /* 행의 워시는 필드용 포커스 워시(액센트 + field-strong)가 아니라 **순수** 액센트 워시다 —
       행은 파인 자리가 아니고, field-strong 을 섞으면 라이트는 탁해지고 다크는 밝아져 심지
       대비를 깎는다(탭·목록 실측 2.5~2.9 → 순수 워시로 4 이상). */
    --clc-mist-focus-ring-row-wash: var(--clc-mist-wash-primary);
    /* 그리드 셀·트리·스케줄러·슬라이더처럼 Mist 가 아직 배선하지 않은 코어 컴포넌트는
       `--clc-outline-*` 를 읽는다. 바닥값을 같은 심지로 맞춰 Material 2px 링이 섞여 보이지
       않게 한다(행/사물 오프셋 분할은 코어가 이미 갖고 있다). */
    --clc-outline-color: var(--clc-mist-focus-ring-core);
    --clc-outline-width: var(--clc-mist-focus-ring-width);
    --clc-outline-offset: var(--clc-mist-focus-ring-gap);
    /* (b) 경계 색 = 보조 잉크. 두 지면 × 캔버스·종이·크롬·베일 위에서, 자리(필드)·호버 자리
       (field-strong)·지면 어느 이웃과도 최악 4.53(라이트) · 4.38:1(다크) 이다 — 비텍스트
       3:1(WCAG 1.4.11)에 여유가 있다. 재질은 1.15~1.56:1 이라 재질만으로는 닿지 못한다. */
    --clc-mist-contrast-boundary: var(--clv-text-secondary);
    --clc-input-border: var(--clc-mist-focus-ring-width) solid var(--clc-mist-contrast-boundary);
    --clc-input-border-block-end: var(--clc-input-border);
    --clc-input-hover-border: var(--clc-input-border);
    --clc-input-focus-border: var(--clc-input-border);
    --clc-input-disabled-border: var(--clc-input-border);
    --clc-input-disabled-border-block-end: var(--clc-input-border);
    /* (c) 삼차 잉크를 보조 잉크로. 삼차는 이 파일에서 장식·비활성 전용이라 본문 대비 등급이
       낮다 — 모드에서는 한 단 올려 모든 글자가 같은 등급을 받게 한다. */
    --clv-text-tertiary: var(--clv-text-secondary);
    /* 비활성은 따라 올리지 않는다. 삼차 잉크를 **직접** 읽던 비활성 규칙들이 함께 올라가면
       비활성과 활성이 한 잉크가 되어 "누를 수 없음"이 사라진다. 그 규칙들이 읽을 값을
       비활성 잉크 토큰으로 되돌린다(아래 규칙).
       그런데 그 토큰 자체도 모드 안에서는 모자란다 — 삼차가 보조로 올라오면 라이트 비활성
       잉크와 보조 잉크의 거리가 ΔE76 5.77 까지 좁아진다(테마가 정한 바닥은 8). 지면이 모드용
       값을 따로 내놓으므로 여기서 갈아 끼운다. 근거와 실측은 지면 베이스의 같은 이름 토큰. */
    --clc-mist-disabled-ink: var(--clc-mist-disabled-ink-contrast);
    --clc-input-disabled-color: var(--clc-mist-disabled-ink);
  }
  /* 포커스를 선언하지 않은 요소의 전역 폴백. `:where()` 로 특이성을 0 에 두어 어떤 저자
     규칙에도 지고, 브라우저가 어차피 그리던 자리의 모양만 바꾼다(UA 기본 흰·검 이중 링). */
  :where(:root:not([data-clevi-contrast=standard])) :where(:focus-visible) {
    outline: var(--clc-mist-focus-ring);
    outline-offset: var(--clc-mist-focus-ring-gap);
  }
  /* 가려짐(WCAG 2.4.11) — 광대는 표면 밖으로 3.25px 나간다. 코어 목록·메뉴의 roving 은
     `scrollIntoView({ block: 'nearest' })` 로 항목의 테두리 상자를 스크롤 가장자리에 붙이므로
     표시와 가장자리 사이에 여유를 둔다. 고정 머리글이 있는 스크롤 영역의 `scroll-padding` 은
     소비처 몫이다.
     드롭다운·리스트박스가 목록에 남아 있는 것은 **항목 행** 때문이 아니다(아래 행 규칙에서
     뺀 이유는 거기 적었다) — 항목 템플릿 안의 진짜 초점 대상(`button` · `[tabindex]`)은
     전역 폴백으로 광대를 받고, 그 여유가 필요한 것은 그 자리다. */
  :root:not([data-clevi-contrast=standard]) :where(.clc-menu, .clc-panel-menu, .clc-listbox, .clc-dropdown-items, .clc-tabview-nav, [role=menu], [role=listbox], [role=tablist], [role=tree]) :where(li, a, button, [tabindex]) {
    scroll-margin: calc(var(--clc-mist-focus-ring-reach) + 2px);
  }
  /* 행 — 자르는 컨테이너 폭을 꽉 채운 것들. 심지는 안쪽 outline 이고 틈 자리에는 행 자신의
     워시가 비친다. 광대는 겹치지 않는다 — 겹치면 워시가 밝아져 심지 대비가 3:1 아래로 내려간다.

     **여기에 드는 것은 키보드 자리를 뜻하는 클래스를 가진 행뿐이다** — 메뉴·프로필 메뉴·
     패널 메뉴·탭의 `clc-state-focused`, 트리 노드의 `clc-state-focused`, DataGrid 의
     `tr.clc-data-row.clc-state-focused`(roving JS 가 옮긴다). 목록 항목(드롭다운·멀티셀렉트·
     자동완성·리스트박스)은 **뺐다**: 그쪽 roving 이 옮기는 클래스가 `clc-state-highlight` 인데
     같은 클래스가 **선택**도 뜻해서(`IsSelected` 가 붙인다), 여기에 심지를 주면 멀티셀렉트에서
     고른 항목 전부에 키보드 자리 표시가 서서 "지금 어디냐"가 열 자리가 된다. 그 자리는 지금도
     9% 워시 하나라 모드 안에서 3:1 에 못 미친다 — 자리와 선택을 가를 표식이 생기기 전에는
     고칠 수 없으므로 알려진 예외로 남긴다(문서에 적는다). */
  :root:not([data-clevi-contrast=standard]) .clc-menu:focus-visible .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper,
  :root:not([data-clevi-contrast=standard]) ul.clc-profile-menu:focus-within .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper,
  :root:not([data-clevi-contrast=standard]) .clc-panel-menu:focus-visible .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper,
  :root:not([data-clevi-contrast=standard]) .clc-treenode-content.clc-state-focused,
  :root:not([data-clevi-contrast=standard]) .clc-tabview-nav .clc-state-focused:not(.clc-state-disabled),
  :root:not([data-clevi-contrast=standard]) .clc-tabview-nav li:is(:has(> :focus-visible)):not(.clc-state-disabled) {
    background-color: var(--clc-mist-focus-ring-row-wash);
    outline: var(--clc-mist-focus-ring-inset);
    outline-offset: var(--clc-mist-focus-ring-inset-offset);
    box-shadow: inset 0 1px 0 var(--clc-material-specular);
  }
  /* 기본 모드의 탭 덮개(선택 ≠ 키보드 자리)와 짝. 여기서 거둘 것은 블룸이 아니라 안쪽 심지와
     행 워시다 — 선택 탭은 자기 선택 워시로 되돌린다. 근거는 기본 모드 탭 절의 주석 참고. */
  :root:not([data-clevi-contrast=standard]) .clc-tabview-nav:has(li > :focus-visible) .clc-state-focused:not(:has(> :focus-visible)):not(.clc-state-disabled) {
    background-color: transparent;
    outline: none;
    box-shadow: none;
  }
  :root:not([data-clevi-contrast=standard]) .clc-tabview-nav:has(li > :focus-visible) .clc-tabview-selected.clc-state-focused:not(:has(> :focus-visible)):not(.clc-state-disabled) {
    background-color: var(--clc-interaction-selected-accent);
    box-shadow: inset 0 1px 0 var(--clc-material-specular), var(--clc-material-elevation-0);
  }
  /* DataGrid 데이터 행 — 심지는 행(`tr`)에 두르고 워시는 칸(`td`)이 칠한다. 코어가 포커스 행의
     칸 바탕을 `--clc-grid-cell-focus-background-color` 로 직접 칠하므로(`_grid.scss`) 행에
     배경을 줘 봐야 칸이 덮는다. 행 워시는 그 토큰을 갈아 끼워 칸이 스스로 칠하게 한다 —
     고정 열의 의사요소 층까지 같은 토큰을 읽으므로 한 줄이 두 색으로 갈리지 않는다. */
  :root:not([data-clevi-contrast=standard]) .clc-selectable tbody tr.clc-data-row.clc-state-focused {
    --clc-grid-cell-focus-background-color: var(--clc-mist-focus-ring-row-wash);
    outline: var(--clc-mist-focus-ring-inset);
    outline-offset: var(--clc-mist-focus-ring-inset-offset);
  }
  /* 인라인 링크 — outline 형 심지. 그림자는 줄바꿈된 링크의 조각마다 상자를 따로 그려 글줄
     사이가 지저분해진다. 본문 줄 사이에서는 2px 틈이 이웃 글자에 닿으므로 1px 로 붙인다. */
  :root:not([data-clevi-contrast=standard]) .clc-link:focus-visible,
  :root:not([data-clevi-contrast=standard]) :where(p, li, td, dd, blockquote, figcaption, label) > a:focus-visible {
    outline: var(--clc-mist-focus-ring);
    outline-offset: 1px;
    border-radius: 2px;
  }
  /* 버튼은 모드 안에서 따로 손댈 것이 없다. 키보드 Space 로 누르는 동안 표시가 꺼지지 않게
     하는 것은 눌림 절의 `:focus-visible:active` 대입이 이미 맡고 있고, 그 대입이 읽는
     `--clc-button-focus-shadow` 가 위에서 갈아 끼운 조립 토큰을 그대로 물고 온다 —
     깊이 없는 변형은 변형 스코프에서 그 토큰을 광대 하나로 덮으므로 Flat/Text 에
     elevation 이 실리지도 않는다(check-button-contract (e)). */
  /* 칩 — 선택과 포커스를 가른다. 기본 규칙은 선택된 칩에도 포커스 표시를 그대로 주는데(흐린
     블룸일 때는 넘어갔다), 심지가 생기면 "선택 = 포커스"로 보인다. 선택은 워시, 포커스는 광대. */
  :root:not([data-clevi-contrast=standard]) .clc-chip.clc-chip-selected:not(:focus-visible) {
    box-shadow: inset 0 1px 0 var(--clc-material-specular);
  }
  /* 스위치 — 기본 모드에서는 호버 규칙(0,4,0)이 포커스 규칙(0,2,0)을 이겨, 포커스된 스위치에
     마우스를 올리면 표시가 사라진다. 모드 안에서 같은 특이성 경쟁을 끝낸다. */
  :root:not([data-clevi-contrast=standard]) .clc-switch:has(:focus-visible):not(:has(.clc-disabled)) {
    outline: none;
    box-shadow: var(--clc-mist-focus-shadow);
  }
  /* (b) 경계를 그리는 층. 토큰(`--clc-input-border*`)만으로는 모자란다 — Mist 자신의 요소
     규칙이 `border: 1px solid transparent` 를 직접 말하기 때문이다. 자리를 그리는 쪽만 긋는다. */
  :root:not([data-clevi-contrast=standard]) :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup),
  :root:not([data-clevi-contrast=standard]) .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext,
  :root:not([data-clevi-contrast=standard]) .clv-field-group,
  :root:not([data-clevi-contrast=standard]) .clc-form-field .clc-form-field-content,
  :root:not([data-clevi-contrast=standard]) .clc-chip {
    border-color: var(--clc-mist-contrast-boundary);
  }
  /* 자리를 그리는 것은 하나다 — 그룹·폼 필드 안의 컨트롤은 경계를 다시 긋지 않는다. */
  :root:not([data-clevi-contrast=standard]) :is(.clv-field-group, .clc-form-field-content) :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup),
  :root:not([data-clevi-contrast=standard]) :is(.clv-field-group, .clc-form-field-content) .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext {
    border-color: transparent;
  }
  /* 스위치 트랙은 보더 토큰을 읽지 않는다. `box-sizing: border-box` 에 폭·높이가 못 박혀
     있어 1px 를 둘러도 크기가 변하지 않는다(inset 그림자로 그리면 포커스 그림자가 지운다). */
  :root:not([data-clevi-contrast=standard]) .clc-switch {
    border: var(--clc-mist-focus-ring-width) solid var(--clc-mist-contrast-boundary);
  }
  /* 오류 — 자리 안의 색에 3:1 경계를 더한다. 위험 워시만으로는 자리 대비가 1.14~1.22:1 이라
     색을 구분하기 어려운 사람에게는 "자리가 붉다"가 전달되지 않는다. 경계는 오류 자리 위
     최악 3.41:1(라이트 캔버스, 포커스와 겹친 자리)이다. */
  :root:not([data-clevi-contrast=standard]) :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-colorpicker, .clc-lookup).invalid,
  :root:not([data-clevi-contrast=standard]) .clc-datepicker:is(:has(> .clc-inputtext.invalid)),
  :root:not([data-clevi-contrast=standard]) .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext.invalid,
  :root:not([data-clevi-contrast=standard]) .clv-field-group:is(:has(.invalid)),
  :root:not([data-clevi-contrast=standard]) .clc-form-field:is(:has(.invalid)) .clc-form-field-content {
    border-color: var(--clc-mist-ink-danger);
  }
  /* 자리를 그리는 것은 하나다 — 오류에서도 같다. 위 경계 초기화 규칙과 이 오류 경계 규칙이
     둘 다 (0,4,0) 이라 뒤에 온 오류 쪽이 이겨, 그룹·폼 필드 **안**의 컨트롤에 위험색 보더가
     다시 섰다. 기본 모드에서 워시를 한 겹으로 되돌린 것과 짝이다 — 그러지 않으면 '붉은 상자
     안의 더 붉은 상자'가 된다. 갈래마다 한 단씩 높아 ((0,5,0)·(0,6,0)) 순서와 무관하게 이긴다. */
  :root:not([data-clevi-contrast=standard]) :is(.clv-field-group, .clc-form-field-content) :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-colorpicker, .clc-lookup).invalid,
  :root:not([data-clevi-contrast=standard]) :is(.clv-field-group, .clc-form-field-content) .clc-datepicker:is(:has(> .clc-inputtext.invalid)),
  :root:not([data-clevi-contrast=standard]) :is(.clv-field-group, .clc-form-field-content) .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext.invalid {
    border-color: transparent;
  }
  /* (c) 비활성 잉크를 제자리에 붙잡는다. 아래 규칙들은 기본 모드에서 삼차 잉크를 직접 읽는데,
     모드가 삼차를 올리면 비활성이 활성 보조 잉크와 같아진다. */
  :root:not([data-clevi-contrast=standard]) :is(.clc-dropdown-item, .clc-multiselect-item, .clc-autocomplete-list-item, .clc-listbox-item, .clc-menuitem, .clc-chip, .clc-tabview-dragging).clc-state-disabled,
  :root:not([data-clevi-contrast=standard]) .clc-tabview-nav li.clc-state-disabled,
  :root:not([data-clevi-contrast=standard]) li.clc-navigation-item.clc-state-disabled,
  :root:not([data-clevi-contrast=standard]) li.clc-navigation-item.clc-state-disabled :is(.clc-navigation-item-link, .clci),
  :root:not([data-clevi-contrast=standard]) :is(.clc-chkbox-box, .clc-radiobutton-box, .clc-radiobutton-label, .clc-radiobutton-template).clc-state-disabled,
  :root:not([data-clevi-contrast=standard]) :is(.clc-chkbox-box, .clc-radiobutton-box).clc-state-disabled .clci {
    color: var(--clc-mist-disabled-ink);
  }
  :root:not([data-clevi-contrast=standard]) .clc-switch .clc-switch-circle.clc-disabled::before,
  :root:not([data-clevi-contrast=standard]) .clc-switch.clc-switch-checked .clc-switch-circle.clc-disabled::before {
    background: var(--clc-mist-disabled-ink);
  }
}
/* ==========================================================================
   강제 색상 모드 — 접근성 바닥 (고대비 모드와 무관하게 적용)

   강제 색상은 사용자의 팔레트로 화면을 다시 칠한다. 그 과정에서 UA 가 `box-shadow` 를
   none 으로 만들고 배경·잉크를 시스템 색으로 갈아 끼우므로, **Mist 의 상태 어휘가 통째로
   사라진다** — 포커스(빛), 호버(깊이), 선택(워시), 비활성(잉크 단), 표면 경계(그림자·반투명)가
   모두 같은 Canvas/CanvasText 두 색이 된다. 여기서 되살리는 것은 다섯 가지다.

     ① 포커스 = 2px Highlight outline(사물 offset 2px, 행 -2px)
     ② 선택 = Highlight 채움 + HighlightText 잉크
     ③ 비활성 = GrayText
     ④ 표면 경계 = CanvasText(버튼은 ButtonText) — 투명 1px 보더에 색을 돌려준다
     ⑤ 오류 = 같은 색의 **점선** 2px — 위험을 뜻하는 시스템 색이 없어 색이 아니라 모양으로 말한다

   `!important` 를 쓰는 자리는 ① 하나다. 되살릴 대상이 바로 소비처와 코어가 선언한
   `outline: none` 이기 때문이다 — 접근성 설정은 그 특이성 경쟁 **밖**에서 결정한다(프리즘
   움직임·투명도 강등과 같은 논리). 나머지 셋은 특이성만으로 이긴다.

   선택자를 전부 `:root` 로 한 단 올려 쓴 것은 의도다. 계약 테스트가 "이 선택자를 가진
   마지막 규칙"으로 기본 모드의 계약을 읽는데, 여기 같은 모양의 선택자를 두면 그 판정이
   이 블록으로 옮겨 온다. 모양을 다르게 두면 기본 계약은 기본 규칙에서 읽힌다.

   `components/blazor/*.scss`(업스트림 포크)는 건드리지 않는다 — 비-Mist 테마도 같은 베이스를
   쓰므로 바닥은 이 후순위 레이어에만 둔다.
   ========================================================================== */
@media (forced-colors: active) {
  /* ① 포커스. 사물은 표면 밖 2px. 자리를 그리는 쪽이 래퍼인 컨트롤은 래퍼가 받는다. */
  :root :focus-visible,
  :root .clv-field-group:focus-within,
  :root .clc-form-field:not(.clc-state-disabled):focus-within .clc-form-field-content,
  :root :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup):focus-within,
  :root .clc-timespanpicker:not(.clc-timespanpicker-inline):focus-within > .clc-inputtext,
  :root .clc-signature-pad:focus-within,
  :root .clc-switch:has(:focus-visible),
  :root :focus-visible .clc-chkbox-box.clc-state-focused,
  :root .clc-radio-button-list:focus-visible .clc-radiobutton-box.clc-state-focused {
    outline: 2px solid Highlight !important;
    outline-offset: 2px !important;
  }
  /* 자리를 그리는 쪽이 따로 있는 안쪽 컨트롤과, 표시를 행에 넘기는 roving 컨테이너는 겹쳐
     그리지 않는다 — 그대로 두면 상자가 이중으로 둘러진다. */
  :root .clv-field-group :focus-visible,
  :root .clc-form-field-content :focus-visible,
  :root :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup) :focus-visible,
  :root .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-timespanpicker-trigger:focus-visible,
  :root .clc-switch :focus-visible,
  :root .clc-chkbox:focus-visible,
  :root .clc-tabview-nav li > :focus-visible,
  :root :is(.clc-menu, .clc-panel-menu, .clc-tabview-nav, .clc-checkbox-list, .clc-radio-button-list):focus-visible {
    outline: none !important;
  }
  /* 행은 잘리는 컨테이너 안이라 안쪽으로 그린다.
     트리 노드와 DataGrid 데이터 행이 함께 든다 — 둘 다 진짜 초점은 컨테이너에 있고 자리는
     `aria-activedescendant` 가 가리키는 행에 클래스로 표시되므로, 전역 재무장
     (`:root :focus-visible`)이 닿지 않는다. 강제 색상에서 표 위아래로 움직이면 키보드가 어느
     행에 있는지 아무것도 그려지지 않던 자리다(실측). `tr` 의 outline 은 Chromium 이 행 전체에
     그린다(캡처로 확인). */
  :root .clc-treenode-content.clc-state-focused,
  :root .clc-selectable tbody tr.clc-data-row.clc-state-focused,
  :root .clc-menu:focus-visible .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper,
  :root ul.clc-profile-menu:focus-within .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper,
  :root .clc-panel-menu:focus-visible .clc-navigation-item.clc-state-focused > .clc-navigation-item-wrapper,
  :root .clc-tabview-nav .clc-state-focused:not(.clc-state-disabled),
  :root .clc-tabview-nav li:is(:has(> :focus-visible)):not(.clc-state-disabled) {
    outline: 2px solid Highlight !important;
    outline-offset: -2px !important;
  }
  /* ② 선택. Mist 는 선택을 액센트 워시 하나로 말하는데 강제 색상에서 그 배경은 Canvas 로
     덮인다 — 선택된 행과 쉬는 행이 같은 그림이 된다. 시스템의 선택 색으로 옮긴다. */
  :root .clc-tabview-nav .clc-tabview-selected,
  :root .clc-menu .clc-navigation-item-wrapper-active,
  :root .clc-menu .clc-navigation-item-wrapper:has(> .active),
  :root .clc-panel-menu :is(.clc-navigation-item-active, .clc-navigation-item-wrapper-active),
  :root .clc-selectbar .clc-button.clc-state-active,
  :root .clc-chip.clc-chip-selected,
  :root :is(.clc-dropdown-item, .clc-multiselect-item, .clc-autocomplete-list-item, .clc-listbox-item, .clc-menuitem).clc-state-highlight,
  :root .clc-grid-table tbody > tr.clc-state-highlight > td,
  :root :is(.clc-chkbox-box, .clc-radiobutton-box).clc-state-active:not(.clc-state-disabled) {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
    /* `forced-color-adjust: none` 은 그 요소의 저자 색을 **통째로** 되살린다 — UA 가 지우던
       그림자·배경 이미지까지 돌아온다. 실제로 선택된 탭과 선택된 칩에서 Mist 블룸
       (액센트 보라 26% 12px)이 강제 색상 화면에 그대로 뿌려졌다. 다른 요소는 전부
       `box-shadow: none` 인데 이 둘만 보라 글로우를 내는 셈이라 흰 Canvas 테마에서 눈에 띈다.
       시스템 색으로 말할 것(채움·잉크)만 남기고 나머지는 여기서 명시적으로 끈다. */
    box-shadow: none;
    background-image: none;
  }
  /* 위 ② 가 저자 색을 되살린 자리에서는, 기본 모드의 탭 덮개 규칙((0,5,1)·(0,6,1))이 말하는
     그림자도 함께 살아난다(스펙큘러 흰 선 + 접지 그림자). ② 보다 특이성이 높으므로 같은
     모양으로 한 번 더 끈다.
     outline 도 같이 거둔다 — 위 ① 의 행 규칙이 `.clc-tabview-nav .clc-state-focused` 를
     이름으로 들고 있어서, 선택 탭에도 키보드 탭과 **같은** Highlight 테가 서기 때문이다
     (선택은 Highlight 채움이 이미 말한다). ① 이 스스로 만든 이중 표시를 ① 안에서 거두는
     자리라 `!important` 를 쓴다 — 그러지 않으면 같은 중요도 경쟁이 아니라 아예 지지 않는다. */
  :root .clc-tabview-nav:has(li > :focus-visible) .clc-state-focused:not(:has(> :focus-visible)):not(.clc-state-disabled),
  :root .clc-tabview-nav:has(li > :focus-visible) .clc-tabview-selected.clc-state-focused:not(:has(> :focus-visible)):not(.clc-state-disabled) {
    box-shadow: none;
    outline: none !important;
  }
  /* 라디오의 켜짐은 안쪽 점 하나가 전부다 — 채움이 Canvas 로 덮이면 꺼짐과 같은 그림이 된다. */
  :root .clc-radiobutton-box.clc-state-active:not(.clc-state-disabled)::before {
    forced-color-adjust: none;
    background-color: HighlightText;
  }
  /* 스위치도 같은 처지다. 채움을 지는 것은 바깥 상자가 아니라 **트랙**(`.clc-switch-circle`)
     이고 손잡이는 그 `::before` 다 — 둘 다 Canvas 로 덮이면 켜짐·꺼짐이 한 그림이 된다.
     켜짐은 선택 색 트랙 + 그 짝 잉크 손잡이, 꺼짐은 Canvas 트랙 + CanvasText 손잡이다
     (꺼짐의 트랙 경계는 바깥 상자에 두른 1px 가 진다). */
  :root .clc-switch.clc-switch-checked .clc-switch-circle {
    forced-color-adjust: none;
    background: Highlight;
  }
  :root .clc-switch.clc-switch-checked .clc-switch-circle::before {
    forced-color-adjust: none;
    background: HighlightText;
  }
  :root .clc-switch:not(.clc-switch-checked) .clc-switch-circle:not(.clc-disabled)::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
  /* ③ 비활성. Mist 는 `opacity: 1` + 가라앉은 잉크로 말하는데 그 잉크가 CanvasText 로
     덮이면 활성과 구분되지 않는다. */
  :root :is(.clc-button, .clc-chip, .clc-dropdown-item, .clc-multiselect-item, .clc-autocomplete-list-item, .clc-listbox-item, .clc-menuitem, .clc-chkbox-box, .clc-radiobutton-box, .clc-radiobutton-label, .clc-radiobutton-template).clc-state-disabled,
  :root .clc-tabview-nav li.clc-state-disabled,
  :root li.clc-navigation-item.clc-state-disabled,
  :root li.clc-navigation-item.clc-state-disabled :is(.clc-navigation-item-link, .clci),
  :root :is(.clc-chkbox-box, .clc-radiobutton-box).clc-state-disabled .clci,
  :root :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup):disabled,
  :root .clc-form-field.clc-state-disabled {
    color: GrayText;
  }
  :root .clc-switch .clc-switch-circle.clc-disabled,
  :root .clc-switch.clc-switch-checked .clc-switch-circle.clc-disabled {
    forced-color-adjust: none;
    background: Canvas;
    border: 1px solid GrayText;
  }
  :root .clc-switch .clc-switch-circle.clc-disabled::before,
  :root .clc-switch.clc-switch-checked .clc-switch-circle.clc-disabled::before {
    forced-color-adjust: none;
    background: GrayText;
  }
  /* ④ 표면 경계. Mist 는 표면을 재질·그림자로 세우고 보더는 레이아웃용 1px 투명만 남긴다
     (표면·깊이 정책 1조). 강제 색상은 그림자를 지우고 투명은 투명으로 두므로 표면이 배경과
     한 판이 된다. 그 1px 에 색을 돌려주는 것이 여기서 할 일이다.
     클라이언트 시맨틱(`--clv-card-*` · `--clv-overlay-*`)도 같은 자리에서 색만 돌려준다 —
     소비처는 이미 그 토큰으로 1px 를 긋고 있다. */
  :root {
    --clv-card-border-color: CanvasText;
    --clv-overlay-border-color: CanvasText;
    --clc-material-hairline: CanvasText;
    --clc-material-hairline-strong: CanvasText;
  }
  :root :is(.clc-card, .clc-panel, .clc-dialog, .clc-overlaypanel, .clc-tabview-panels, .clc-timespanpicker-inline, .clc-dropdown-panel, .clc-multiselect-panel, .clc-autocomplete-panel, .clc-splitbutton-menu, .clc-datepicker-popup-container, .clc-timespanpicker-popup-container, .clc-colorpicker-popup),
  :root .clc-context-menu > .clc-menu,
  :root .clc-menu:not(.clc-profile-menu) > .clc-navigation-item > .clc-navigation-menu,
  :root ul.clc-profile-menu > .clc-navigation-item > .clc-navigation-menu,
  :root .clc-notification-item-wrapper > .clc-notification-item {
    border: 1px solid CanvasText;
  }
  /* 이미 1px 투명 보더가 있는 것들 — 강제 색상은 그 투명까지 CanvasText 로 갈아 끼우므로
     사실 저절로 선이 선다(실측). 그래도 명시해 두는 것은 계약을 이름으로 남기기 위해서다:
     Mist 가 언젠가 그 1px 를 거두면 여기가 경계의 유일한 주인이 된다. 상자 크기는 그대로다.
     스위치 트랙만 보더가 아예 없어 폭이 필요하다 — `box-sizing: border-box` 에 폭·높이가
     못 박혀 있어 1px 를 둘러도 크기가 변하지 않는다(그러지 않으면 꺼진 트랙이 Canvas 위에서 사라진다). */
  :root :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup, .clc-chip),
  :root .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext,
  :root .clv-field-group,
  :root .clc-form-field .clc-form-field-content,
  :root .clc-selectbar,
  :root .clc-switch {
    border: 1px solid CanvasText;
  }
  /* 자리를 그리는 것은 하나다 — 그룹·폼 필드 안의 컨트롤은 경계를 다시 긋지 않는다
     (고대비 모드의 같은 규칙과 같은 이유. 그대로 두면 상자가 이중으로 둘러진다).
     여기서는 `border-color: transparent` 가 듣지 않는다 — 강제 색상은 캐스케이드가 끝난 뒤
     색을 갈아 끼우므로 투명도 CanvasText 가 된다(실측). 그래서 폭을 0 으로 지운다.
     고대비 모드의 같은 규칙이 색으로 지우는 것은 그 모드에는 이 강제가 없기 때문이다.

     `:root` 를 **두 번** 쓴 것은 의도다. 이 블록의 다른 규칙은 한 단(0,3,0)으로 충분하지만
     여기만은 베이스의 `%input-focus`(`.clc-textbox:not(:disabled):not(.clc-state-disabled):focus`,
     (0,4,0))가 `border` **단축 속성**으로 폭까지 말해서, 포커스가 들어온 순간 1px 가 되살아난다
     — 바깥 래퍼의 Highlight outline 과 겹쳐 이중 상자가 된다. 같은 (0,4,0) 으로 올리면 파일
     끝이라 순서로 이긴다. outline 이 아니라 보더가 원인이다(저자 `outline: none` 은 강제 색상
     에서도 존중된다 — 따로 실험해 배제했다). */
  :root:root :is(.clv-field-group, .clc-form-field-content) :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-datepicker, .clc-colorpicker, .clc-lookup),
  :root:root :is(.clv-field-group, .clc-form-field-content) .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext {
    border-width: 0;
  }
  /* ⑤ 오류. 강제 색상에는 "위험"을 뜻하는 시스템 색이 없다 — Mist 의 유일한 오류 표시인 위험
     워시는 UA 가 Canvas 로 덮고, ④ 가 모든 필드에 같은 1px CanvasText 를 주므로 오류 필드와
     쉬는 필드가 픽셀로 같아진다. 검증 문구가 붙는 화면은 문구가 대신 말하지만, 자리 색만으로
     말하던 필드에는 아무것도 남지 않는다. 색으로 말할 수 없으니 **모양**으로 말한다 —
     같은 시스템 색의 파선 2px 다(`border-style: dashed`).
     자리를 그리는 쪽이 래퍼면 래퍼가 진다: 안쪽 컨트롤은 위 규칙이 (0,4,0) 으로 폭을 0 으로
     지운 상태 그대로고(이 규칙의 첫 갈래는 (0,3,0)), 점선은 그룹·폼 필드 상자 하나에만 선다. */
  :root :is(.clc-textbox, .clc-textarea, .clc-numeric, .clc-dropdown, .clc-multiselect, .clc-autocomplete, .clc-listbox, .clc-colorpicker, .clc-lookup).invalid,
  :root .clc-datepicker:is(:has(> .clc-inputtext.invalid)),
  :root .clc-timespanpicker:not(.clc-timespanpicker-inline) > .clc-inputtext.invalid,
  :root .clv-field-group:is(:has(.invalid)),
  :root .clc-form-field:is(:has(.invalid)) .clc-form-field-content {
    border-style: dashed;
    border-width: 2px;
  }
  /* 버튼은 버튼 팔레트로 선다. 채우지 않는 변형(Text/Flat)도 여기서는 경계를 갖는다 —
     채움이 Canvas 로 덮여 "누를 수 있는 것"이 글자뿐이 되기 때문이다.
     변형 규칙이 `.clc-button.clc-shade-default:is(…)`(0,4,0) 으로 `border: none` 을 말하므로
     같은 무게의 선택자를 하나 더 둔다 — 네 변형을 한 `:is()` 에 담은 모양이라 게시본 CSS 를
     읽는 소비 앱 계약 테스트가 찾는 두 변형 짝(`:is(.clc-variant-filled, .clc-variant-flat)`)
     과 문자열이 겹치지 않는다. */
  :root .clc-button,
  :root .clc-button.clc-shade-default:is(.clc-variant-filled, .clc-variant-flat, .clc-variant-outlined, .clc-variant-text) {
    border: 1px solid ButtonText;
  }
  :root .clc-button.clc-state-disabled {
    border-color: GrayText;
  }
}
/* 프리즘 — 라이트 지면 보정. 흰 지면에서는 모든 층이 "어두운 쪽"으로만 보일 수 있어
   다크와 물리가 반대다. 특히 반짝임은 글로우의 자식이라 유효 불투명도가
   strength × glint-strength = 0.046 뿐인데, 거기에 흰빛(glint-white)까지 섞으면
   지면과 같은 방향이라 결 층 전체가 지각 문턱(유효 ΔL ≈ 0.015) 아래로 내려간다 —
   다크에서 두 성부(안개 + 결)로 노래하던 것이 라이트에서는 반 성부만 남아,
   "빛"이 아니라 "덜 그린 테두리"로 읽혔다. 그래서 라이트에서만 결을 램프 원색으로
   돌리고 세기를 올린다. 다크 베이스는 코어 기본값 그대로 쓴다.

   반드시 이 자리(코어 임포트 아래)에 있어야 한다. 위의 :root 블록(램프 옆)에 두면
   clevi-mist-core 의 :root 기본값이 나중에 로드되어 같은 특이성·나중 규칙으로
   조용히 되돌린다 — 램프(--clv-prism-1..4)는 코어에 기본값이 없어서 위에서도
   동작하는 것이지, 세기 토큰은 다르다. */
:root {
  --clv-prism-glint-white: 0%; /* 14% — 흰 지면에 흰빛 섞기는 자해 */
  --clv-prism-strength: 0.30; /* 0.23 — 흰 지면 대비 손실 보정, 응답 중(0.36) 아래 */
  --clv-prism-glint-strength: 0.30; /* 0.2  — 결 유효 대비 0.012 → 0.034 */
  --clv-prism-ring-floor: 10%; /* 0%   — 옅은 안개 위 완전 단절은 결함으로 읽힌다 */
  --clv-prism-saturate: 1.45; /* 1.65 — 진해진 램프에 그대로 곱하면 색역 클리핑 */
}

/* 강조 프리즘 — 라이트 지면 보정. 강조 프리즘은 물린(딤) 바닥 위에서 대상 둘레로 번지는데,
   라이트의 스크림은 밝은 안개라 번짐이 "어두운 쪽"으로만 보인다. 시안 실측(headless Edge)
   에서 세기를 낮춘 첫 값(0.78)은 보라·자주 두 웅덩이가 바닥에 묻혀 단색 블룸과 구분되지
   않았다. 그래서 라이트에서만 세기를 끝까지 올린다. 위 AI 프리즘 보정과 같은 이유로 반드시 이 자리
   (코어 임포트 아래)에 있어야 한다 — 코어가 이 토큰의 기본값을 갖기 때문이다. */
:root {
  --clv-emphasis-prism-strength: 1; /* 0.86 — 밝은 딤 위에서 번짐이 묻히지 않게 */
}