@charset "UTF-8";
/* required styles */
@import "https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap";
@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700&display=block";
@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block";
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}

.leaflet-container {
  overflow: hidden;
}

.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
  background: transparent;
}

/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
  image-rendering: -webkit-optimize-contrast;
}

/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
  width: 1600px;
  height: 1600px;
  -webkit-transform-origin: 0 0;
}

.leaflet-marker-icon,
.leaflet-marker-shadow {
  display: block;
}

/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
  max-width: none !important;
  max-height: none !important;
}

.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
  max-width: none !important;
  max-height: none !important;
  width: auto;
  padding: 0;
}

.leaflet-container img.leaflet-tile {
  /* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
  mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
  -ms-touch-action: pan-x pan-y;
  touch-action: pan-x pan-y;
}

.leaflet-container.leaflet-touch-drag {
  -ms-touch-action: pinch-zoom;
  /* Fallback for FF which doesn't support pinch-zoom */
  touch-action: none;
  touch-action: pinch-zoom;
}

.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  -ms-touch-action: none;
  touch-action: none;
}

.leaflet-container {
  -webkit-tap-highlight-color: transparent;
}

.leaflet-container a {
  -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}

.leaflet-tile {
  filter: inherit;
  visibility: hidden;
}

.leaflet-tile-loaded {
  visibility: inherit;
}

.leaflet-zoom-box {
  width: 0;
  height: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 800;
}

/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
  -moz-user-select: none;
}

.leaflet-pane {
  z-index: 400;
}

.leaflet-tile-pane {
  z-index: 200;
}

.leaflet-overlay-pane {
  z-index: 400;
}

.leaflet-shadow-pane {
  z-index: 500;
}

.leaflet-marker-pane {
  z-index: 600;
}

.leaflet-tooltip-pane {
  z-index: 650;
}

.leaflet-popup-pane {
  z-index: 700;
}

.leaflet-map-pane canvas {
  z-index: 100;
}

.leaflet-map-pane svg {
  z-index: 200;
}

.leaflet-vml-shape {
  width: 1px;
  height: 1px;
}

.lvml {
  behavior: url(#default#VML);
  display: inline-block;
  position: absolute;
}

/* control positioning */
.leaflet-control {
  position: relative;
  z-index: 800;
  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
  pointer-events: auto;
}

.leaflet-top,
.leaflet-bottom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}

.leaflet-top {
  top: 0;
}

.leaflet-right {
  right: 0;
}

.leaflet-bottom {
  bottom: 0;
}

.leaflet-left {
  left: 0;
}

.leaflet-control {
  float: left;
  clear: both;
}

.leaflet-right .leaflet-control {
  float: right;
}

.leaflet-top .leaflet-control {
  margin-top: 10px;
}

.leaflet-bottom .leaflet-control {
  margin-bottom: 10px;
}

.leaflet-left .leaflet-control {
  margin-left: 10px;
}

.leaflet-right .leaflet-control {
  margin-right: 10px;
}

/* zoom and fade animations */
.leaflet-fade-anim .leaflet-popup {
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  opacity: 1;
}

.leaflet-zoom-animated {
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}

svg.leaflet-zoom-animated {
  will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
}

.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

.leaflet-zoom-anim .leaflet-zoom-hide {
  visibility: hidden;
}

/* cursors */
.leaflet-interactive {
  cursor: pointer;
}

.leaflet-grab {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
  cursor: crosshair;
}

.leaflet-popup-pane,
.leaflet-control {
  cursor: auto;
}

.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
  pointer-events: none;
}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
  pointer-events: auto;
}

/* visual tweaks */
.leaflet-container {
  background: #ddd;
  outline-offset: 1px;
}

.leaflet-container a {
  color: #0078A8;
}

.leaflet-zoom-box {
  border: 2px dotted #38f;
  background: rgba(255, 255, 255, 0.5);
}

/* general typography */
.leaflet-container {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* general toolbar styles */
.leaflet-bar {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border-radius: 4px;
}

.leaflet-bar a {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  width: 26px;
  height: 26px;
  line-height: 26px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: black;
}

.leaflet-bar a,
.leaflet-control-layers-toggle {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
}

.leaflet-bar a:hover,
.leaflet-bar a:focus {
  background-color: #f4f4f4;
}

.leaflet-bar a:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.leaflet-bar a:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: none;
}

.leaflet-bar a.leaflet-disabled {
  cursor: default;
  background-color: #f4f4f4;
  color: #bbb;
}

.leaflet-touch .leaflet-bar a {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font: bold 18px "Lucida Console", Monaco, monospace;
  text-indent: 1px;
}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
  font-size: 22px;
}

/* layers control */
.leaflet-control-layers {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  background: #fff;
  border-radius: 5px;
}

.leaflet-control-layers-toggle {
  background-image: url("images/layers.png");
  width: 36px;
  height: 36px;
}

.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url("images/layers-2x.png");
  background-size: 26px 26px;
}

.leaflet-touch .leaflet-control-layers-toggle {
  width: 44px;
  height: 44px;
}

.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: none;
}

.leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: block;
  position: relative;
}

.leaflet-control-layers-expanded {
  padding: 6px 10px 6px 6px;
  color: #333;
  background: #fff;
}

.leaflet-control-layers-scrollbar {
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 5px;
}

.leaflet-control-layers-selector {
  margin-top: 2px;
  position: relative;
  top: 1px;
}

.leaflet-control-layers label {
  display: block;
  font-size: 13px;
  font-size: 1.08333em;
}

.leaflet-control-layers-separator {
  height: 0;
  border-top: 1px solid #ddd;
  margin: 5px -10px 5px -6px;
}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
  background-image: url("images/marker-icon.png");
}

/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.leaflet-control-attribution,
.leaflet-control-scale-line {
  padding: 0 5px;
  color: #333;
  line-height: 1.4;
}

.leaflet-control-attribution a {
  text-decoration: none;
}

.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
  text-decoration: underline;
}

.leaflet-attribution-flag {
  display: inline !important;
  vertical-align: baseline !important;
  width: 1em;
  height: 0.6669em;
}

.leaflet-left .leaflet-control-scale {
  margin-left: 5px;
}

.leaflet-bottom .leaflet-control-scale {
  margin-bottom: 5px;
}

.leaflet-control-scale-line {
  border: 2px solid #777;
  border-top: none;
  line-height: 1.1;
  padding: 2px 5px 1px;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.8);
  text-shadow: 1px 1px #fff;
}

.leaflet-control-scale-line:not(:first-child) {
  border-top: 2px solid #777;
  border-bottom: none;
  margin-top: -2px;
}

.leaflet-control-scale-line:not(:first-child):not(:last-child) {
  border-bottom: 2px solid #777;
}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  box-shadow: none;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

/* popup */
.leaflet-popup {
  position: absolute;
  text-align: center;
  margin-bottom: 20px;
}

.leaflet-popup-content-wrapper {
  padding: 1px;
  text-align: left;
  border-radius: 12px;
}

.leaflet-popup-content {
  margin: 13px 24px 13px 20px;
  line-height: 1.3;
  font-size: 13px;
  font-size: 1.08333em;
  min-height: 1px;
}

.leaflet-popup-content p {
  margin: 17px 0;
  margin: 1.3em 0;
}

.leaflet-popup-tip-container {
  width: 40px;
  height: 20px;
  position: absolute;
  left: 50%;
  margin-top: -1px;
  margin-left: -20px;
  overflow: hidden;
  pointer-events: none;
}

.leaflet-popup-tip {
  width: 17px;
  height: 17px;
  padding: 1px;
  margin: -10px auto 0;
  pointer-events: auto;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: white;
  color: #333;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.leaflet-container a.leaflet-popup-close-button {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  text-align: center;
  width: 24px;
  height: 24px;
  font: 16px/24px Tahoma, Verdana, sans-serif;
  color: #757575;
  text-decoration: none;
  background: transparent;
}

.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
  color: #585858;
}

.leaflet-popup-scrolled {
  overflow: auto;
}

.leaflet-oldie .leaflet-popup-content-wrapper {
  -ms-zoom: 1;
}

.leaflet-oldie .leaflet-popup-tip {
  width: 24px;
  margin: 0 auto;
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
  border: 1px solid #999;
}

/* div icon */
.leaflet-div-icon {
  background: #fff;
  border: 1px solid #666;
}

/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
  position: absolute;
  padding: 6px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #222;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.leaflet-tooltip.leaflet-interactive {
  cursor: pointer;
  pointer-events: auto;
}

.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  position: absolute;
  pointer-events: none;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Directions */
.leaflet-tooltip-bottom {
  margin-top: 6px;
}

.leaflet-tooltip-top {
  margin-top: -6px;
}

.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
  left: 50%;
  margin-left: -6px;
}

.leaflet-tooltip-top:before {
  bottom: 0;
  margin-bottom: -12px;
  border-top-color: #fff;
}

.leaflet-tooltip-bottom:before {
  top: 0;
  margin-top: -12px;
  margin-left: -6px;
  border-bottom-color: #fff;
}

.leaflet-tooltip-left {
  margin-left: -6px;
}

.leaflet-tooltip-right {
  margin-left: 6px;
}

.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  top: 50%;
  margin-top: -6px;
}

.leaflet-tooltip-left:before {
  right: 0;
  margin-right: -12px;
  border-left-color: #fff;
}

.leaflet-tooltip-right:before {
  left: 0;
  margin-left: -12px;
  border-right-color: #fff;
}

/* Printing */
@media print {
  /* Prevent printers from removing background-images of controls. */
  .leaflet-control {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
/* global styling */
.leaflet-control-geosearch *,
.leaflet-control-geosearch *:before,
.leaflet-control-geosearch *:after {
  box-sizing: border-box;
}

/* leaflet button styling */
.leaflet-control-geosearch .leaflet-bar-part {
  border-radius: 4px;
  border-bottom: none;
}

.leaflet-control-geosearch a.leaflet-bar-part:before,
.leaflet-control-geosearch a.leaflet-bar-part:after {
  position: absolute;
  display: block;
  content: "";
}

/* magnifying glass */
.leaflet-control-geosearch a.leaflet-bar-part:before {
  top: 17px;
  left: 15px;
  width: 6px;
  border-top: 2px solid #555;
  transform: rotateZ(45deg);
}

.leaflet-control-geosearch a.leaflet-bar-part:after {
  top: 10px;
  left: 10px;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  border: 2px solid #555;
}

/* resets for pending and error icons */
.leaflet-control-geosearch.error a.leaflet-bar-part:before,
.leaflet-control-geosearch.pending a.leaflet-bar-part:before {
  display: none;
}

.leaflet-control-geosearch.pending a.leaflet-bar-part:after,
.leaflet-control-geosearch.error a.leaflet-bar-part:after {
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
}

/* pending icon */
.leaflet-control-geosearch.pending a.leaflet-bar-part:after {
  content: "";
  border: 2px solid #555;
  border-top: 2px solid #f3f3f3;
  animation: spin 1s linear infinite;
}

/* error icon */
.leaflet-control-geosearch.error a.leaflet-bar-part:after {
  content: "!";
  line-height: initial;
  font-weight: 600;
  font-size: 18px;
  border: none;
}

/* search form styling */
.leaflet-control-geosearch form {
  display: none;
  position: absolute;
  top: 0;
  left: 30px;
  border-radius: 0 4px 4px 0;
  background-color: #fff;
  background-clip: padding-box;
  z-index: -1;
  height: auto;
  margin: 0;
  padding: 0 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

.leaflet-geosearch-button form.open {
  border-radius: 0 4px 4px 4px;
}

.leaflet-control-geosearch.active form {
  display: block;
}

.leaflet-geosearch-button.active .leaflet-bar-part {
  border-radius: 4px 0 0 4px;
  width: 30px;
}

.leaflet-geosearch-button form {
  max-width: 350px;
}

.leaflet-control-geosearch form input {
  min-width: 200px;
  width: 100%;
  outline: none;
  border: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  height: 30px;
  border: none;
  border-radius: 0 4px 4px 0;
  text-indent: 8px;
}

.leaflet-touch .leaflet-geosearch-bar form {
  border: 2px solid rgba(0, 0, 0, 0.2);
  box-shadow: none;
}

.leaflet-touch .leaflet-geosearch-bar form input {
  height: 30px;
}

.leaflet-control-geosearch .results {
  background: #fff;
}

.leaflet-control-geosearch .results > * {
  line-height: 24px;
  padding: 0 8px;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaflet-control-geosearch .results.active {
  padding: 8px 0;
  border-top: 1px solid #c6c6c6;
}

.leaflet-control-geosearch .results > .active,
.leaflet-control-geosearch .results > :hover {
  background-color: #f8f8f8;
  border-color: #c6c6c6;
  cursor: pointer;
}

/* add missing border to form */
.leaflet-control-geosearch .results.active:after {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  left: -2px;
  bottom: -2px;
  top: 30px;
}

.leaflet-touch .leaflet-control-geosearch .results.active:after {
  border-left: 2px solid rgba(0, 0, 0, 0.2);
}

/* animations */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.leaflet-top .leaflet-geosearch-bar,
.leaflet-bottom .leaflet-geosearch-bar {
  display: none;
}

.leaflet-geosearch-bar {
  position: relative;
  display: block;
  height: auto;
  width: 400px;
  max-width: calc(100% - 120px);
  margin: 10px auto 0;
  cursor: auto;
  z-index: 1000;
}

.leaflet-geosearch-bar form {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  border-radius: 4px;
}

.leaflet-geosearch-bar form input {
  min-width: 100%;
  width: 100%;
}

.leaflet-geosearch-bar .results.active:after {
  opacity: 0.2;
}

.leaflet-right .leaflet-control-geosearch form {
  right: 28px;
  left: initial;
  border-radius: 4px 0 0 4px;
  border-left: inherit;
  border-right: none;
}

.leaflet-bar-notfound {
  font-style: italic;
}

.leaflet-control-geosearch button.reset {
  color: black;
  font-weight: bold;
  position: absolute;
  line-height: 26px;
  padding: 0 8px;
  right: 0;
  top: 0;
  cursor: pointer;
  border: none;
  text-decoration: none;
  background-color: #fff;
  border-radius: 0 4px 4px 0;
}

.leaflet-touch .leaflet-control-geosearch button.reset {
  line-height: 30px;
}

.leaflet-control-geosearch button.reset:hover {
  background: #f5f5f5;
}

.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  background: #fff;
  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
}

.flatpickr-calendar.open, .flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}

.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}

.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}

.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}

.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}

.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}

.flatpickr-calendar:before, .flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  left: 22px;
}

.flatpickr-calendar.rightMost:before, .flatpickr-calendar.arrowRight:before, .flatpickr-calendar.rightMost:after, .flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}

.flatpickr-calendar.arrowCenter:before, .flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}

.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}

.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}

.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}

.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}

.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}

.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
  top: 100%;
}

.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}

.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}

.flatpickr-calendar:focus {
  outline: 0;
}

.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}

.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}

.flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i {
  position: relative;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { /*
/*rtl:begin:ignore*/
  left: 0;
} /*
/*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month { /*
/*rtl:begin:ignore*/
  right: 0;
} /*
/*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}

.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}

.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}

.flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}

.numInputWrapper {
  position: relative;
  height: auto;
}

.numInputWrapper input, .numInputWrapper span {
  display: inline-block;
}

.numInputWrapper input {
  width: 100%;
}

.numInputWrapper input::-ms-clear {
  display: none;
}

.numInputWrapper input::-webkit-outer-spin-button, .numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57, 57, 57, 0.15);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.numInputWrapper span:hover {
  background: rgba(0, 0, 0, 0.1);
}

.numInputWrapper span:active {
  background: rgba(0, 0, 0, 0.2);
}

.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}

.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}

.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
  top: 26%;
}

.numInputWrapper span.arrowDown {
  top: 50%;
}

.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57, 57, 57, 0.6);
  top: 40%;
}

.numInputWrapper span svg {
  width: inherit;
  height: auto;
}

.numInputWrapper span svg path {
  fill: rgba(0, 0, 0, 0.5);
}

.numInputWrapper:hover {
  background: rgba(0, 0, 0, 0.05);
}

.numInputWrapper:hover span {
  opacity: 1;
}

.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}

.flatpickr-current-month span.cur-month:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0 ;
  display: inline-block;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}

.flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  pointer-events: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus, .flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}

.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28px;
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: bolder;
}

.dayContainer, .flatpickr-weeks {
  padding: 1px 0 0 0;
}

.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 307.875px;
}

.flatpickr-days:focus {
  outline: 0;
}

.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #e6e6e6;
  box-shadow: -1px 0 0 #e6e6e6;
}

.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
  -ms-flex-preferred-size: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}

.flatpickr-day.today {
  border-color: #959ea9;
}

.flatpickr-day.today:hover, .flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}

.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}

.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #569ff7;
  box-shadow: -10px 0 0 #569ff7;
}

.flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}

.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57, 57, 57, 0.1);
}

.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}

.flatpickr-day.hidden {
  visibility: hidden;
}

.rangeMode .flatpickr-day {
  margin-top: 1px;
}

.flatpickr-weekwrapper {
  float: left;
}

.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
  box-shadow: 1px 0 0 #e6e6e6;
}

.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}

.flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  cursor: default;
  border: none;
}

.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}

.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}

.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}

.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}

.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}

.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}

.flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second {
  font-weight: 400;
}

.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}

.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}

.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}

.flatpickr-input[readonly] {
  cursor: pointer;
}

@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
*, :after, :before {
  box-sizing: border-box;
}

blockquote, body, dd, dl, figure, h1, h2, h3, h4, p {
  margin: 0;
}

ol[role=list], ul[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  line-height: 1.5;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img, picture {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, :after, :before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
:root {
  --op-color-white:#fff;
  --op-color-black:#000;
  --op-color-primary-h:216;
  --op-color-primary-s:58%;
  --op-color-primary-l:48%;
  --op-color-neutral-h:var(--op-color-primary-h);
  --op-color-neutral-s:4%;
  --op-color-neutral-l:var(--op-color-primary-l);
  --op-color-alerts-warning-h:47;
  --op-color-alerts-warning-s:100%;
  --op-color-alerts-warning-l:61%;
  --op-color-alerts-danger-h:0;
  --op-color-alerts-danger-s:99%;
  --op-color-alerts-danger-l:76%;
  --op-color-alerts-info-h:216;
  --op-color-alerts-info-s:58%;
  --op-color-alerts-info-l:48%;
  --op-color-alerts-notice-h:130;
  --op-color-alerts-notice-s:61%;
  --op-color-alerts-notice-l:64%;
  --op-opacity-none:0;
  --op-opacity-overlay:0.2;
  --op-opacity-disabled:0.4;
  --op-opacity-half:0.5;
  --op-opacity-full:1;
  --op-breakpoint-x-small:512px;
  --op-breakpoint-small:768px;
  --op-breakpoint-medium:1024px;
  --op-breakpoint-large:1280px;
  --op-breakpoint-x-large:1440px;
  --op-radius-small:2px;
  --op-radius-medium:4px;
  --op-radius-large:8px;
  --op-radius-x-large:12px;
  --op-radius-2x-large:16px;
  --op-radius-circle:50%;
  --op-radius-pill:9999px;
  --op-border-width:1px;
  --op-border-width-large:2px;
  --op-border-width-x-large:4px;
  --op-color-border:var(--op-color-neutral-plus-five);
  --op-border-none:0 0 0 0;
  --op-border-all:0 0 0 var(--op-border-width);
  --op-border-top:0 calc(var(--op-border-width)*-1) 0 0;
  --op-border-right:var(--op-border-width) 0 0 0;
  --op-border-bottom:0 var(--op-border-width) 0 0;
  --op-border-left:calc(var(--op-border-width)*-1) 0 0 0;
  --op-border-y:var(--op-border-top) var(--op-color-border),var(--op-border-bottom) var(--op-color-border);
  --op-border-x:var(--op-border-left) var(--op-color-border),var(--op-border-right) var(--op-color-border);
  --op-font-scale-unit:1rem;
  --op-font-2x-small:calc(var(--op-font-scale-unit)*1);
  --op-font-x-small:calc(var(--op-font-scale-unit)*1.2);
  --op-font-small:calc(var(--op-font-scale-unit)*1.4);
  --op-font-medium:calc(var(--op-font-scale-unit)*1.6);
  --op-font-large:calc(var(--op-font-scale-unit)*1.8);
  --op-font-x-large:calc(var(--op-font-scale-unit)*2);
  --op-font-2x-large:calc(var(--op-font-scale-unit)*2.4);
  --op-font-3x-large:calc(var(--op-font-scale-unit)*2.8);
  --op-font-4x-large:calc(var(--op-font-scale-unit)*3.2);
  --op-font-5x-large:calc(var(--op-font-scale-unit)*3.6);
  --op-font-6x-large:calc(var(--op-font-scale-unit)*4.8);
  --op-font-weight-thin:100;
  --op-font-weight-extra-light:200;
  --op-font-weight-light:300;
  --op-font-weight-normal:400;
  --op-font-weight-medium:500;
  --op-font-weight-semi-bold:600;
  --op-font-weight-bold:700;
  --op-font-weight-extra-bold:800;
  --op-font-weight-black:900;
  --op-font-family:"Noto Sans",sans-serif;
  --op-font-family-alt:"Noto Serif",serif;
  --op-line-height-none:0;
  --op-line-height-densest:1;
  --op-line-height-denser:1.15;
  --op-line-height-dense:1.3;
  --op-line-height-base:1.5;
  --op-line-height-loose:1.6;
  --op-line-height-looser:1.7;
  --op-line-height-loosest:1.8;
  --op-letter-spacing-navigation:0.01rem;
  --op-letter-spacing-label:0.04rem;
  --op-transition-accordion:rotate 120ms ease-in;
  --op-transition-accordion-content:height 300ms ease,content-visibility 300ms ease allow-discrete;
  --op-transition-input:all 120ms ease-in;
  --op-transition-sidebar:all 200ms ease-in-out;
  --op-transition-modal:all 300ms ease-in;
  --op-transition-panel:right 400ms ease-in;
  --op-transition-tooltip:all 300ms ease-in 300ms;
  --op-animation-flash:rm-slide-in-out-flash 5s normal forwards;
  --op-encoded-images-dropdown-arrow-width:calc(var(--op-space-scale-unit)*1.2);
  --op-encoded-images-dropdown-arrow:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iIzBhMGEwYiIgZD0ibTYgOC4zNzUtNi02IDEuNC0xLjQgNC42IDQuNiA0LjYtNC42IDEuNCAxLjR6Ii8+PC9zdmc+");
  --op-size-unit:0.4rem;
  --op-space-scale-unit:1rem;
  --op-space-3x-small:calc(var(--op-space-scale-unit)*0.2);
  --op-space-2x-small:calc(var(--op-space-scale-unit)*0.4);
  --op-space-x-small:calc(var(--op-space-scale-unit)*0.8);
  --op-space-small:calc(var(--op-space-scale-unit)*1.2);
  --op-space-medium:calc(var(--op-space-scale-unit)*1.6);
  --op-space-large:calc(var(--op-space-scale-unit)*2);
  --op-space-x-large:calc(var(--op-space-scale-unit)*2.4);
  --op-space-2x-large:calc(var(--op-space-scale-unit)*2.8);
  --op-space-3x-large:calc(var(--op-space-scale-unit)*4);
  --op-space-4x-large:calc(var(--op-space-scale-unit)*8);
  --op-shadow-x-small:0 1px 2px rgba(0,0,0,.03),0 1px 3px rgba(0,0,0,.15);
  --op-shadow-small:0 1px 2px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.15);
  --op-shadow-medium:0 4px 8px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.03);
  --op-shadow-large:0 6px 10px rgba(0,0,0,.15),0 2px 3px rgba(0,0,0,.03);
  --op-shadow-x-large:0 8px 12px rgba(0,0,0,.15),0 4px 4px rgba(0,0,0,.03);
  --op-z-index-header:500;
  --op-z-index-footer:500;
  --op-z-index-sidebar:700;
  --op-z-index-dialog:800;
  --op-z-index-dialog-backdrop:801;
  --op-z-index-dialog-content:802;
  --op-z-index-dropdown:900;
  --op-z-index-alert-group:950;
  --op-z-index-tooltip:1000;
  --op-input-height-small:2.8rem;
  --op-input-height-medium:3.6rem;
  --op-input-height-large:4rem;
  --op-input-height-x-large:8.4rem;
  --op-input-inner-focus:inset 0 0 0 var(--op-border-width-large);
  --op-input-outer-focus:0 0 0 var(--op-border-width-x-large);
  --op-input-focus-primary:var(--op-input-inner-focus) var(--op-color-primary-plus-two),var(--op-input-outer-focus) var(--op-color-primary-plus-five);
  --op-input-focus-neutral:var(--op-input-inner-focus) var(--op-color-neutral-plus-two),var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
  --op-input-focus-danger:var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
  --op-input-focus-warning:var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
  --op-input-focus-info:var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
  --op-input-focus-notice:var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
}

@keyframes rm-slide-in-out-flash {
  0% {
    right: -100%;
  }
  10% {
    right: var(--op-space-large);
  }
  70% {
    right: var(--op-space-large);
  }
  to {
    right: -100%;
  }
}
:root {
  color-scheme: light dark;
  --op-color-primary-original:hsl(var(--op-color-primary-h) var(--op-color-primary-s) var(--op-color-primary-l));
  --op-color-primary-plus-max:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%));
  --op-color-primary-plus-eight:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%));
  --op-color-primary-plus-seven:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%));
  --op-color-primary-plus-six:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%));
  --op-color-primary-plus-five:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%));
  --op-color-primary-plus-four:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%));
  --op-color-primary-plus-three:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%));
  --op-color-primary-plus-two:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%));
  --op-color-primary-plus-one:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%));
  --op-color-primary-base:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%));
  --op-color-primary-minus-one:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 36%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%));
  --op-color-primary-minus-two:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%));
  --op-color-primary-minus-three:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%));
  --op-color-primary-minus-four:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%));
  --op-color-primary-minus-five:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%));
  --op-color-primary-minus-six:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%));
  --op-color-primary-minus-seven:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%));
  --op-color-primary-minus-eight:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%));
  --op-color-primary-minus-max:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%));
  --op-color-primary-on-plus-max:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%));
  --op-color-primary-on-plus-max-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%));
  --op-color-primary-on-plus-eight:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%));
  --op-color-primary-on-plus-eight-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%));
  --op-color-primary-on-plus-seven:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%));
  --op-color-primary-on-plus-seven-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%));
  --op-color-primary-on-plus-six:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%));
  --op-color-primary-on-plus-six-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%));
  --op-color-primary-on-plus-five:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%));
  --op-color-primary-on-plus-five-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%));
  --op-color-primary-on-plus-four:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%));
  --op-color-primary-on-plus-four-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%));
  --op-color-primary-on-plus-three:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%));
  --op-color-primary-on-plus-three-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 10%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%));
  --op-color-primary-on-plus-two:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%));
  --op-color-primary-on-plus-two-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 6%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%));
  --op-color-primary-on-plus-one:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%));
  --op-color-primary-on-plus-one-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 95%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%));
  --op-color-primary-on-base:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%));
  --op-color-primary-on-base-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%));
  --op-color-primary-on-minus-one:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%));
  --op-color-primary-on-minus-one-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%));
  --op-color-primary-on-minus-two:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%));
  --op-color-primary-on-minus-two-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%));
  --op-color-primary-on-minus-three:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%));
  --op-color-primary-on-minus-three-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 74%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%));
  --op-color-primary-on-minus-four:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%));
  --op-color-primary-on-minus-four-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%));
  --op-color-primary-on-minus-five:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%));
  --op-color-primary-on-minus-five-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%));
  --op-color-primary-on-minus-six:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%));
  --op-color-primary-on-minus-six-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%));
  --op-color-primary-on-minus-seven:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%));
  --op-color-primary-on-minus-seven-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%));
  --op-color-primary-on-minus-eight:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%));
  --op-color-primary-on-minus-eight-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%));
  --op-color-primary-on-minus-max:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%));
  --op-color-primary-on-minus-max-alt:light-dark(hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%));
  --op-color-neutral-original:hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) var(--op-color-neutral-l));
  --op-color-neutral-plus-max:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%));
  --op-color-neutral-plus-eight:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%));
  --op-color-neutral-plus-seven:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%));
  --op-color-neutral-plus-six:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%));
  --op-color-neutral-plus-five:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%));
  --op-color-neutral-plus-four:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%));
  --op-color-neutral-plus-three:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 70%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%));
  --op-color-neutral-plus-two:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%));
  --op-color-neutral-plus-one:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%));
  --op-color-neutral-base:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%));
  --op-color-neutral-minus-one:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%));
  --op-color-neutral-minus-two:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%));
  --op-color-neutral-minus-three:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%));
  --op-color-neutral-minus-four:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%));
  --op-color-neutral-minus-five:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%));
  --op-color-neutral-minus-six:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%));
  --op-color-neutral-minus-seven:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%));
  --op-color-neutral-minus-eight:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%));
  --op-color-neutral-minus-max:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%));
  --op-color-neutral-on-plus-max:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%));
  --op-color-neutral-on-plus-max-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%));
  --op-color-neutral-on-plus-eight:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%));
  --op-color-neutral-on-plus-eight-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 34%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%));
  --op-color-neutral-on-plus-seven:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%));
  --op-color-neutral-on-plus-seven-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%));
  --op-color-neutral-on-plus-six:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%));
  --op-color-neutral-on-plus-six-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%));
  --op-color-neutral-on-plus-five:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%));
  --op-color-neutral-on-plus-five-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%));
  --op-color-neutral-on-plus-four:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%));
  --op-color-neutral-on-plus-four-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%));
  --op-color-neutral-on-plus-three:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%));
  --op-color-neutral-on-plus-three-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%));
  --op-color-neutral-on-plus-two:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%));
  --op-color-neutral-on-plus-two-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 6%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%));
  --op-color-neutral-on-plus-one:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%));
  --op-color-neutral-on-plus-one-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%));
  --op-color-neutral-on-base:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%));
  --op-color-neutral-on-base-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%));
  --op-color-neutral-on-minus-one:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%));
  --op-color-neutral-on-minus-one-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%));
  --op-color-neutral-on-minus-two:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%));
  --op-color-neutral-on-minus-two-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%));
  --op-color-neutral-on-minus-three:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%));
  --op-color-neutral-on-minus-three-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 74%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%));
  --op-color-neutral-on-minus-four:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%));
  --op-color-neutral-on-minus-four-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%));
  --op-color-neutral-on-minus-five:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%));
  --op-color-neutral-on-minus-five-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%));
  --op-color-neutral-on-minus-six:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%));
  --op-color-neutral-on-minus-six-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 82%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%));
  --op-color-neutral-on-minus-seven:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%));
  --op-color-neutral-on-minus-seven-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%));
  --op-color-neutral-on-minus-eight:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%));
  --op-color-neutral-on-minus-eight-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%));
  --op-color-neutral-on-minus-max:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%));
  --op-color-neutral-on-minus-max-alt:light-dark(hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%));
  --op-color-alerts-warning-original:hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l));
  --op-color-alerts-warning-plus-max:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%));
  --op-color-alerts-warning-plus-eight:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%));
  --op-color-alerts-warning-plus-seven:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%));
  --op-color-alerts-warning-plus-six:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%));
  --op-color-alerts-warning-plus-five:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 90%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%));
  --op-color-alerts-warning-plus-four:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%));
  --op-color-alerts-warning-plus-three:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%));
  --op-color-alerts-warning-plus-two:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%));
  --op-color-alerts-warning-plus-one:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%));
  --op-color-alerts-warning-base:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%));
  --op-color-alerts-warning-minus-one:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%));
  --op-color-alerts-warning-minus-two:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%));
  --op-color-alerts-warning-minus-three:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 18%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%));
  --op-color-alerts-warning-minus-four:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%));
  --op-color-alerts-warning-minus-five:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%));
  --op-color-alerts-warning-minus-six:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%));
  --op-color-alerts-warning-minus-seven:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%));
  --op-color-alerts-warning-minus-eight:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%));
  --op-color-alerts-warning-minus-max:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%));
  --op-color-alerts-warning-on-plus-max:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%));
  --op-color-alerts-warning-on-plus-max-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%));
  --op-color-alerts-warning-on-plus-eight:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%));
  --op-color-alerts-warning-on-plus-eight-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%));
  --op-color-alerts-warning-on-plus-seven:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%));
  --op-color-alerts-warning-on-plus-seven-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%));
  --op-color-alerts-warning-on-plus-six:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%));
  --op-color-alerts-warning-on-plus-six-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%));
  --op-color-alerts-warning-on-plus-five:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%));
  --op-color-alerts-warning-on-plus-five-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%));
  --op-color-alerts-warning-on-plus-four:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%));
  --op-color-alerts-warning-on-plus-four-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%));
  --op-color-alerts-warning-on-plus-three:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%));
  --op-color-alerts-warning-on-plus-three-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%));
  --op-color-alerts-warning-on-plus-two:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%));
  --op-color-alerts-warning-on-plus-two-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%));
  --op-color-alerts-warning-on-plus-one:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%));
  --op-color-alerts-warning-on-plus-one-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 15%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%));
  --op-color-alerts-warning-on-base:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%));
  --op-color-alerts-warning-on-base-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%));
  --op-color-alerts-warning-on-minus-one:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%));
  --op-color-alerts-warning-on-minus-one-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%));
  --op-color-alerts-warning-on-minus-two:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%));
  --op-color-alerts-warning-on-minus-two-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%));
  --op-color-alerts-warning-on-minus-three:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%));
  --op-color-alerts-warning-on-minus-three-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%));
  --op-color-alerts-warning-on-minus-four:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%));
  --op-color-alerts-warning-on-minus-four-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%));
  --op-color-alerts-warning-on-minus-five:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%));
  --op-color-alerts-warning-on-minus-five-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%));
  --op-color-alerts-warning-on-minus-six:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%));
  --op-color-alerts-warning-on-minus-six-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%));
  --op-color-alerts-warning-on-minus-seven:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%));
  --op-color-alerts-warning-on-minus-seven-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%));
  --op-color-alerts-warning-on-minus-eight:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%));
  --op-color-alerts-warning-on-minus-eight-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%));
  --op-color-alerts-warning-on-minus-max:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%));
  --op-color-alerts-warning-on-minus-max-alt:light-dark(hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%));
  --op-color-alerts-danger-original:hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l));
  --op-color-alerts-danger-plus-max:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%));
  --op-color-alerts-danger-plus-eight:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%));
  --op-color-alerts-danger-plus-seven:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%));
  --op-color-alerts-danger-plus-six:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%));
  --op-color-alerts-danger-plus-five:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%));
  --op-color-alerts-danger-plus-four:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%));
  --op-color-alerts-danger-plus-three:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%));
  --op-color-alerts-danger-plus-two:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%));
  --op-color-alerts-danger-plus-one:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 50%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%));
  --op-color-alerts-danger-base:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%));
  --op-color-alerts-danger-minus-one:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%));
  --op-color-alerts-danger-minus-two:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%));
  --op-color-alerts-danger-minus-three:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%));
  --op-color-alerts-danger-minus-four:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%));
  --op-color-alerts-danger-minus-five:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%));
  --op-color-alerts-danger-minus-six:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%));
  --op-color-alerts-danger-minus-seven:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%));
  --op-color-alerts-danger-minus-eight:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%));
  --op-color-alerts-danger-minus-max:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%));
  --op-color-alerts-danger-on-plus-max:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%));
  --op-color-alerts-danger-on-plus-max-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%));
  --op-color-alerts-danger-on-plus-eight:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%));
  --op-color-alerts-danger-on-plus-eight-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%));
  --op-color-alerts-danger-on-plus-seven:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%));
  --op-color-alerts-danger-on-plus-seven-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%));
  --op-color-alerts-danger-on-plus-six:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%));
  --op-color-alerts-danger-on-plus-six-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%));
  --op-color-alerts-danger-on-plus-five:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%));
  --op-color-alerts-danger-on-plus-five-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 30%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%));
  --op-color-alerts-danger-on-plus-four:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%));
  --op-color-alerts-danger-on-plus-four-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%));
  --op-color-alerts-danger-on-plus-three:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%));
  --op-color-alerts-danger-on-plus-three-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%));
  --op-color-alerts-danger-on-plus-two:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%));
  --op-color-alerts-danger-on-plus-two-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%));
  --op-color-alerts-danger-on-plus-one:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%));
  --op-color-alerts-danger-on-plus-one-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 3%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%));
  --op-color-alerts-danger-on-base:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%));
  --op-color-alerts-danger-on-base-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%));
  --op-color-alerts-danger-on-minus-one:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%));
  --op-color-alerts-danger-on-minus-one-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%));
  --op-color-alerts-danger-on-minus-two:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%));
  --op-color-alerts-danger-on-minus-two-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 83%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%));
  --op-color-alerts-danger-on-minus-three:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 86%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%));
  --op-color-alerts-danger-on-minus-three-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 79%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%));
  --op-color-alerts-danger-on-minus-four:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%));
  --op-color-alerts-danger-on-minus-four-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 77%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%));
  --op-color-alerts-danger-on-minus-five:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%));
  --op-color-alerts-danger-on-minus-five-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 81%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%));
  --op-color-alerts-danger-on-minus-six:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%));
  --op-color-alerts-danger-on-minus-six-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 87%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%));
  --op-color-alerts-danger-on-minus-seven:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%));
  --op-color-alerts-danger-on-minus-seven-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%));
  --op-color-alerts-danger-on-minus-eight:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%));
  --op-color-alerts-danger-on-minus-eight-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 91%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%));
  --op-color-alerts-danger-on-minus-max:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%));
  --op-color-alerts-danger-on-minus-max-alt:light-dark(hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%));
  --op-color-alerts-info-original:hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l));
  --op-color-alerts-info-plus-max:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%));
  --op-color-alerts-info-plus-eight:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%));
  --op-color-alerts-info-plus-seven:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%));
  --op-color-alerts-info-plus-six:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%));
  --op-color-alerts-info-plus-five:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%));
  --op-color-alerts-info-plus-four:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%));
  --op-color-alerts-info-plus-three:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%));
  --op-color-alerts-info-plus-two:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%));
  --op-color-alerts-info-plus-one:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 56%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%));
  --op-color-alerts-info-base:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%));
  --op-color-alerts-info-minus-one:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%));
  --op-color-alerts-info-minus-two:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%));
  --op-color-alerts-info-minus-three:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%));
  --op-color-alerts-info-minus-four:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%));
  --op-color-alerts-info-minus-five:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%));
  --op-color-alerts-info-minus-six:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%));
  --op-color-alerts-info-minus-seven:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%));
  --op-color-alerts-info-minus-eight:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%));
  --op-color-alerts-info-minus-max:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%));
  --op-color-alerts-info-on-plus-max:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%));
  --op-color-alerts-info-on-plus-max-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%));
  --op-color-alerts-info-on-plus-eight:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%));
  --op-color-alerts-info-on-plus-eight-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%));
  --op-color-alerts-info-on-plus-seven:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%));
  --op-color-alerts-info-on-plus-seven-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%));
  --op-color-alerts-info-on-plus-six:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%));
  --op-color-alerts-info-on-plus-six-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%));
  --op-color-alerts-info-on-plus-five:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%));
  --op-color-alerts-info-on-plus-five-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%));
  --op-color-alerts-info-on-plus-four:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%));
  --op-color-alerts-info-on-plus-four-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%));
  --op-color-alerts-info-on-plus-three:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%));
  --op-color-alerts-info-on-plus-three-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 10%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%));
  --op-color-alerts-info-on-plus-two:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%));
  --op-color-alerts-info-on-plus-two-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 6%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%));
  --op-color-alerts-info-on-plus-one:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%));
  --op-color-alerts-info-on-plus-one-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 3%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%));
  --op-color-alerts-info-on-base:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%));
  --op-color-alerts-info-on-base-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%));
  --op-color-alerts-info-on-minus-one:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%));
  --op-color-alerts-info-on-minus-one-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%));
  --op-color-alerts-info-on-minus-two:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%));
  --op-color-alerts-info-on-minus-two-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%));
  --op-color-alerts-info-on-minus-three:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%));
  --op-color-alerts-info-on-minus-three-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%));
  --op-color-alerts-info-on-minus-four:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%));
  --op-color-alerts-info-on-minus-four-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%));
  --op-color-alerts-info-on-minus-five:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%));
  --op-color-alerts-info-on-minus-five-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%));
  --op-color-alerts-info-on-minus-six:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%));
  --op-color-alerts-info-on-minus-six-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%));
  --op-color-alerts-info-on-minus-seven:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%));
  --op-color-alerts-info-on-minus-seven-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%));
  --op-color-alerts-info-on-minus-eight:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%));
  --op-color-alerts-info-on-minus-eight-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%));
  --op-color-alerts-info-on-minus-max:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%));
  --op-color-alerts-info-on-minus-max-alt:light-dark(hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%));
  --op-color-alerts-notice-original:hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l));
  --op-color-alerts-notice-plus-max:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%));
  --op-color-alerts-notice-plus-eight:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%));
  --op-color-alerts-notice-plus-seven:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%));
  --op-color-alerts-notice-plus-six:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%));
  --op-color-alerts-notice-plus-five:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%));
  --op-color-alerts-notice-plus-four:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%));
  --op-color-alerts-notice-plus-three:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 70%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%));
  --op-color-alerts-notice-plus-two:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%));
  --op-color-alerts-notice-plus-one:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 47%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%));
  --op-color-alerts-notice-base:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%));
  --op-color-alerts-notice-minus-one:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%));
  --op-color-alerts-notice-minus-two:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%));
  --op-color-alerts-notice-minus-three:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%));
  --op-color-alerts-notice-minus-four:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 22%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%));
  --op-color-alerts-notice-minus-five:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%));
  --op-color-alerts-notice-minus-six:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%));
  --op-color-alerts-notice-minus-seven:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%));
  --op-color-alerts-notice-minus-eight:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%));
  --op-color-alerts-notice-minus-max:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%));
  --op-color-alerts-notice-on-plus-max:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%));
  --op-color-alerts-notice-on-plus-max-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%));
  --op-color-alerts-notice-on-plus-eight:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%));
  --op-color-alerts-notice-on-plus-eight-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%));
  --op-color-alerts-notice-on-plus-seven:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%));
  --op-color-alerts-notice-on-plus-seven-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%));
  --op-color-alerts-notice-on-plus-six:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%));
  --op-color-alerts-notice-on-plus-six-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%));
  --op-color-alerts-notice-on-plus-five:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%));
  --op-color-alerts-notice-on-plus-five-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 30%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%));
  --op-color-alerts-notice-on-plus-four:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%));
  --op-color-alerts-notice-on-plus-four-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%));
  --op-color-alerts-notice-on-plus-three:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%));
  --op-color-alerts-notice-on-plus-three-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%));
  --op-color-alerts-notice-on-plus-two:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%));
  --op-color-alerts-notice-on-plus-two-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%));
  --op-color-alerts-notice-on-plus-one:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%));
  --op-color-alerts-notice-on-plus-one-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 3%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%));
  --op-color-alerts-notice-on-base:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%));
  --op-color-alerts-notice-on-base-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%));
  --op-color-alerts-notice-on-minus-one:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%));
  --op-color-alerts-notice-on-minus-one-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%));
  --op-color-alerts-notice-on-minus-two:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%));
  --op-color-alerts-notice-on-minus-two-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 89%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%));
  --op-color-alerts-notice-on-minus-three:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%));
  --op-color-alerts-notice-on-minus-three-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 85%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%));
  --op-color-alerts-notice-on-minus-four:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%));
  --op-color-alerts-notice-on-minus-four-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 81%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%));
  --op-color-alerts-notice-on-minus-five:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%));
  --op-color-alerts-notice-on-minus-five-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 76%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%));
  --op-color-alerts-notice-on-minus-six:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%));
  --op-color-alerts-notice-on-minus-six-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%));
  --op-color-alerts-notice-on-minus-seven:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%));
  --op-color-alerts-notice-on-minus-seven-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%));
  --op-color-alerts-notice-on-minus-eight:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%));
  --op-color-alerts-notice-on-minus-eight-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 86%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%));
  --op-color-alerts-notice-on-minus-max:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%));
  --op-color-alerts-notice-on-minus-max-alt:light-dark(hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%));
  --op-color-background:var(--op-color-neutral-plus-eight);
  --op-color-on-background:var(--op-color-neutral-on-plus-eight);
  --op-color-on-background-alt:var(--op-color-neutral-on-plus-eight-alt);
}

:root[data-theme-mode=light] {
  color-scheme: only light;
}

:root[data-theme-mode=dark] {
  color-scheme: only dark;
  --op-shadow-x-small:0 1px 3px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.3);
  --op-shadow-small:0 2px 6px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.3);
  --op-shadow-medium:0 4px 8px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);
  --op-shadow-large:0 6px 10px rgba(0,0,0,.15),0 2px 3px rgba(0,0,0,.3);
  --op-shadow-x-large:0 8px 12px rgba(0,0,0,.15),0 4px 4px rgba(0,0,0,.3);
  --op-encoded-images-dropdown-arrow:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZD0ibTYgOC4zNzUtNi02IDEuNC0xLjQgNC42IDQuNiA0LjYtNC42IDEuNCAxLjR6Ii8+PC9zdmc+");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme-mode=light]) {
    --op-shadow-x-small:0 1px 3px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.3);
    --op-shadow-small:0 2px 6px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.3);
    --op-shadow-medium:0 4px 8px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);
    --op-shadow-large:0 6px 10px rgba(0,0,0,.15),0 2px 3px rgba(0,0,0,.3);
    --op-shadow-x-large:0 8px 12px rgba(0,0,0,.15),0 4px 4px rgba(0,0,0,.3);
    --op-encoded-images-dropdown-arrow:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZD0ibTYgOC4zNzUtNi02IDEuNC0xLjQgNC42IDQuNiA0LjYtNC42IDEuNCAxLjR6Ii8+PC9zdmc+");
  }
}
html {
  font-family: var(--op-font-family);
  font-size: 62.5%;
  overflow: hidden;
}

body {
  background: var(--op-color-background);
  color: var(--op-color-on-background);
  font-size: var(--op-font-medium);
  height: 100vh;
  overflow: auto;
}

button {
  background: none;
  cursor: pointer;
}

button, input[type=submit] {
  border: 0;
}

label {
  display: inline-block;
  &:hover {
    cursor: pointer;
  }
}

a {
  color: var(--op-color-primary-original);
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, pre {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--op-font-weight-normal);
  margin-bottom: var(--op-space-small);
  margin-top: 0;
}

h1 {
  font-size: var(--op-font-3x-large);
}

h2 {
  font-size: var(--op-font-2x-large);
}

h3 {
  font-size: var(--op-font-large);
}

h4 {
  font-size: var(--op-font-medium);
}

h5 {
  font-size: var(--op-font-small);
}

h6 {
  font-size: var(--op-font-x-small);
}

p {
  font-size: var(--op-font-medium);
  margin-bottom: var(--op-space-small);
}

small {
  font-size: var(--op-font-small);
}

.app-with-sidebar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  height: 100vh;
  width: 100%;
}

.app-body {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.app__header {
  flex-grow: 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: var(--op-z-index-header);
}

.app__content {
  margin: 0 auto;
  max-width: var(--op-breakpoint-medium);
}

.app__content, .app__content-no-margin {
  flex-grow: 1;
  padding: 0 var(--op-space-large);
  width: 100%;
}

.app__content-no-margin {
  overflow-y: auto;
}

.app__footer {
  bottom: 0;
  flex-grow: 0;
  flex-shrink: 0;
  position: sticky;
  z-index: var(--op-z-index-footer);
}

.container {
  margin: 0 auto;
  max-width: var(--op-breakpoint-medium);
  padding: 0 var(--op-space-large);
  width: 100%;
}

.container--sm {
  max-width: var(--op-breakpoint-small);
}

.container--md-padding {
  padding: 0 var(--op-space-medium);
}

.container--sm-padding {
  padding: 0 var(--op-space-small);
}

.container--xs {
  max-width: var(--op-breakpoint-x-small);
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

.four-fifths-width {
  width: 80%;
}

.three-fifths-width {
  width: 60%;
}

.two-fifths-width {
  width: 40%;
}

.one-fifth-width {
  width: 20%;
}

.three-quarters-width {
  width: 75%;
}

.one-quarter-width {
  width: 25%;
}

.two-thirds-width {
  width: 66.66667%;
}

.one-third-width {
  width: 33.33333%;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-no-wrap {
  flex-wrap: nowrap;
}

.flex-grow-1 {
  flex-grow: 1;
}

.gap-xxs {
  gap: var(--op-space-2x-small);
  --op-gap:var(--op-space-2x-small);
}

.gap-xs {
  gap: var(--op-space-x-small);
  --op-gap:var(--op-space-x-small);
}

.gap-sm {
  gap: var(--op-space-small);
  --op-gap:var(--op-space-small);
}

.gap-md {
  gap: var(--op-space-medium);
  --op-gap:var(--op-space-medium);
}

.gap-lg {
  gap: var(--op-space-large);
  --op-gap:var(--op-space-large);
}

.gap-xl {
  gap: var(--op-space-x-large);
  --op-gap:var(--op-space-x-large);
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.items-stretch {
  align-items: stretch;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-baseline {
  align-items: baseline;
}

.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: center;
}

.self-end {
  align-self: flex-end;
}

.self-stretch {
  align-self: stretch;
}

.self-baseline {
  align-self: baseline;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

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

.text-justify {
  text-align: justify;
}

.margin-xl {
  margin: var(--op-space-x-large);
}

.margin-lg {
  margin: var(--op-space-large);
}

.margin-md {
  margin: var(--op-space-medium);
}

.margin-sm {
  margin: var(--op-space-small);
}

.margin-xs {
  margin: var(--op-space-x-small);
}

.margin-none {
  margin: 0;
}

.margin-auto {
  margin: auto;
}

.margin-y-xl {
  margin-bottom: var(--op-space-x-large);
  margin-top: var(--op-space-x-large);
}

.margin-y-lg {
  margin-bottom: var(--op-space-large);
  margin-top: var(--op-space-large);
}

.margin-y-md {
  margin-bottom: var(--op-space-medium);
  margin-top: var(--op-space-medium);
}

.margin-y-sm {
  margin-bottom: var(--op-space-small);
  margin-top: var(--op-space-small);
}

.margin-y-xs {
  margin-bottom: var(--op-space-x-small);
  margin-top: var(--op-space-x-small);
}

.margin-y-none {
  margin-bottom: 0;
  margin-top: 0;
}

.margin-x-xl {
  margin-left: var(--op-space-x-large);
  margin-right: var(--op-space-x-large);
}

.margin-x-lg {
  margin-left: var(--op-space-large);
  margin-right: var(--op-space-large);
}

.margin-x-md {
  margin-left: var(--op-space-medium);
  margin-right: var(--op-space-medium);
}

.margin-x-sm {
  margin-left: var(--op-space-small);
  margin-right: var(--op-space-small);
}

.margin-x-xs {
  margin-left: var(--op-space-x-small);
  margin-right: var(--op-space-x-small);
}

.margin-x-none {
  margin-left: 0;
  margin-right: 0;
}

.margin-top-xl {
  margin-top: var(--op-space-x-large);
}

.margin-top-lg {
  margin-top: var(--op-space-large);
}

.margin-top-md {
  margin-top: var(--op-space-medium);
}

.margin-top-sm {
  margin-top: var(--op-space-small);
}

.margin-top-xs {
  margin-top: var(--op-space-x-small);
}

.margin-top-none {
  margin-top: 0;
}

.margin-bottom-xl {
  margin-bottom: var(--op-space-x-large);
}

.margin-bottom-lg {
  margin-bottom: var(--op-space-large);
}

.margin-bottom-md {
  margin-bottom: var(--op-space-medium);
}

.margin-bottom-sm {
  margin-bottom: var(--op-space-small);
}

.margin-bottom-xs {
  margin-bottom: var(--op-space-x-small);
}

.margin-bottom-none {
  margin-bottom: 0;
}

.margin-right-xl {
  margin-right: var(--op-space-x-large);
}

.margin-right-lg {
  margin-right: var(--op-space-large);
}

.margin-right-md {
  margin-right: var(--op-space-medium);
}

.margin-right-sm {
  margin-right: var(--op-space-small);
}

.margin-right-xs {
  margin-right: var(--op-space-x-small);
}

.margin-right-none {
  margin-left: 0;
}

.margin-left-xl {
  margin-left: var(--op-space-x-large);
}

.margin-left-lg {
  margin-left: var(--op-space-large);
}

.margin-left-md {
  margin-left: var(--op-space-medium);
}

.margin-left-sm {
  margin-left: var(--op-space-small);
}

.margin-left-xs {
  margin-left: var(--op-space-x-small);
}

.margin-left-none {
  margin-left: 0;
}

.sr-only {
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}

.accordion {
  --_op-accordion-summary-min-height:calc(var(--op-size-unit)*8);
  overflow: hidden;
  interpolate-size: allow-keywords;
  summary {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: var(--op-space-2x-small);
    grid-template-columns: auto 1fr auto;
    min-height: var(--_op-accordion-summary-min-height);
    &::-webkit-details-marker, &::marker {
      content: "";
      display: none;
    }
    .accordion__label {
      color: var(--op-color-neutral-on-plus-max);
      font-size: var(--op-font-x-small);
      font-weight: var(--op-font-weight-semi-bold);
    }
    .accordion__marker {
      --__op-icon-font-size:var(--_op-icon-font-size-x-large);
      --__op-icon-optical-size:var(--_op-icon-optical-size-x-large);
      justify-self: flex-end;
      transition: var(--op-transition-accordion);
      user-select: none;
    }
  }
  &::details-content {
    height: 0;
    transition: var(--op-transition-accordion-content);
  }
  &[open] {
    summary .accordion__marker {
      rotate: 90deg;
    }
    &::details-content {
      height: auto;
    }
  }
  &.accordion--disable-animation {
    summary .accordion__marker {
      transition: none;
    }
    &::details-content {
      transition: none;
    }
  }
}

.alert {
  align-items: center;
  border-radius: var(--op-radius-medium);
  display: flex;
  gap: var(--op-space-small);
  padding: var(--op-space-x-small) var(--op-space-medium);
  .alert__icon {
    --__op-icon-font-size:var(--_op-icon-font-size-large);
    --__op-icon-optical-size:var(--_op-icon-optical-size-large);
    --__op-icon-weight:var(--_op-icon-weight-bold);
    line-height: var(--op-line-height-dense);
  }
  .alert__messages {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--op-space-2x-small);
  }
  .alert__title {
    font-size: var(--op-font-medium);
    font-weight: var(--op-font-weight-medium);
  }
  .alert__description {
    font-size: var(--op-font-small);
  }
  &.alert--flash {
    animation: var(--op-animation-flash);
    position: fixed;
    right: var(--op-space-large);
    top: var(--op-space-large);
    z-index: var(--op-z-index-alert-group);
  }
  &.alert--warning {
    background-color: var(--op-color-alerts-warning-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-plus-eight);
    .alert__title {
      color: var(--op-color-alerts-warning-on-plus-eight-alt);
    }
    &.alert--muted {
      background-color: var(--op-color-alerts-warning-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-warning-on-plus-five);
      .alert__title {
        color: var(--op-color-alerts-warning-on-plus-five-alt);
      }
    }
    &.alert--filled {
      background-color: var(--op-color-alerts-warning-base);
      box-shadow: none;
      color: var(--op-color-alerts-warning-on-base);
      .alert__title {
        color: var(--op-color-alerts-warning-on-base-alt);
      }
    }
  }
  &.alert--alert, &.alert--danger {
    background-color: var(--op-color-alerts-danger-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-plus-eight);
    .alert__title {
      color: var(--op-color-alerts-danger-on-plus-eight-alt);
    }
    &.alert--muted {
      background-color: var(--op-color-alerts-danger-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-danger-on-plus-five);
      .alert__title {
        color: var(--op-color-alerts-danger-on-plus-five-alt);
      }
    }
    &.alert--filled {
      background-color: var(--op-color-alerts-danger-base);
      box-shadow: none;
      color: var(--op-color-alerts-danger-on-base);
      .alert__title {
        color: var(--op-color-alerts-danger-on-base-alt);
      }
    }
  }
  &.alert--info {
    background-color: var(--op-color-alerts-info-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-info-base);
    color: var(--op-color-alerts-info-on-plus-eight);
    .alert__title {
      color: var(--op-color-alerts-info-on-plus-eight-alt);
    }
    &.alert--muted {
      background-color: var(--op-color-alerts-info-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-info-on-plus-five);
      .alert__title {
        color: var(--op-color-alerts-info-on-plus-five-alt);
      }
    }
    &.alert--filled {
      background-color: var(--op-color-alerts-info-base);
      box-shadow: none;
      color: var(--op-color-alerts-info-on-base);
      .alert__title {
        color: var(--op-color-alerts-info-on-base-alt);
      }
    }
  }
  &.alert--notice {
    background-color: var(--op-color-alerts-notice-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-notice-base);
    color: var(--op-color-alerts-notice-on-plus-eight);
    .alert__title {
      color: var(--op-color-alerts-notice-on-plus-eight-alt);
    }
    &.alert--muted {
      background-color: var(--op-color-alerts-notice-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-notice-on-plus-five);
      .alert__title {
        color: var(--op-color-alerts-notice-on-plus-five-alt);
      }
    }
    &.alert--filled {
      background-color: var(--op-color-alerts-notice-base);
      box-shadow: none;
      color: var(--op-color-alerts-notice-on-base);
      .alert__title {
        color: var(--op-color-alerts-notice-on-base-alt);
      }
    }
  }
}

.avatar {
  --_op-avatar-border-radius:var(--op-radius-circle);
  --_op-avatar-inner-border-color:var(--op-color-neutral-minus-max);
  --_op-avatar-outer-border-color:var(--op-color-neutral-base);
  --_op-avatar-inner-border-width:calc(var(--op-border-width) + var(--op-border-width-large));
  --_op-avatar-outer-border-width:var(--op-border-width-large);
  --_op-avatar-disabled-opacity:var(--op-opacity-disabled);
  --_op-avatar-hover-opacity:var(--op-opacity-overlay);
  --_op-avatar-size-small:calc(var(--op-size-unit)*8);
  --_op-avatar-size-medium:calc(var(--op-size-unit)*10);
  --_op-avatar-size-large:calc(var(--op-size-unit)*14);
  --__op-avatar-size:var(--_op-avatar-size-large);
  border-radius: var(--_op-avatar-border-radius);
  display: block;
  height: var(--__op-avatar-size);
  min-height: var(--__op-avatar-size);
  min-width: var(--__op-avatar-size);
  overflow: hidden;
  position: relative;
  width: var(--__op-avatar-size);
  z-index: 1;
  &:before {
    z-index: 2;
  }
  &:after, &:before {
    content: "";
    inset: 0;
    position: absolute;
  }
  &:after {
    border-radius: var(--_op-avatar-border-radius);
    box-shadow: inset 0 0 0 var(--_op-avatar-outer-border-width) var(--_op-avatar-outer-border-color), inset 0 0 0 var(--_op-avatar-inner-border-width) var(--_op-avatar-inner-border-color);
    z-index: 3;
  }
  img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
  &.avatar--disabled {
    opacity: var(--_op-avatar-disabled-opacity);
    pointer-events: none;
  }
  &:focus, &:focus-visible, &:focus-within {
    outline: none;
  }
  &:hover:not(div, .avatar--disabled) {
    --_op-avatar-inner-border-color:var(--op-color-primary-base);
    --_op-avatar-outer-border-color:var(--op-color-primary-plus-one);
    cursor: pointer;
    &:before {
      background-color: var(--op-color-primary-base);
      opacity: var(--_op-avatar-hover-opacity);
    }
  }
  &:focus-visible:not(.avatar--disabled) {
    --_op-avatar-outer-border-color:var(--op-color-primary-base);
    cursor: pointer;
  }
  &.avatar--small {
    --__op-avatar-size:var(--_op-avatar-size-small);
  }
  &.avatar--medium {
    --__op-avatar-size:var(--_op-avatar-size-medium);
  }
  &.avatar--large {
    --__op-avatar-size:var(--_op-avatar-size-large);
  }
}

.badge {
  align-items: center;
  background-color: var(--op-color-neutral-base);
  border-radius: var(--op-radius-medium);
  color: var(--op-color-neutral-on-base);
  cursor: inherit;
  display: inline-flex;
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  gap: var(--op-space-x-small);
  justify-content: center;
  letter-spacing: var(--op-letter-spacing-label);
  line-height: var(--op-line-height-dense);
  padding-block: var(--op-space-2x-small);
  padding-inline: var(--op-space-x-small);
  user-select: none;
  white-space: nowrap;
  .material-symbols-outlined {
    font-size: var(--op-font-small);
  }
  &.badge--primary {
    background-color: var(--op-color-primary-base);
    color: var(--op-color-primary-on-base);
  }
  &.badge--warning {
    background-color: var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-base);
  }
  &.badge--danger {
    background-color: var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-base);
  }
  &.badge--info {
    background-color: var(--op-color-alerts-info-base);
    color: var(--op-color-alerts-info-on-base);
  }
  &.badge--notice {
    background-color: var(--op-color-alerts-notice-base);
    color: var(--op-color-alerts-notice-on-base);
  }
  &.badge--pill {
    border-radius: var(--op-radius-pill);
  }
  &.badge--notification-right {
    inset-inline-end: 0;
    transform: translateY(-50%) translateX(50%);
  }
  &.badge--notification-left, &.badge--notification-right {
    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
    inset-block-start: 0;
    pointer-events: none;
    position: absolute;
  }
  &.badge--notification-left {
    inset-inline-start: 0;
    transform: translateY(-50%) translateX(-50%);
  }
}

.breadcrumbs {
  --_op-breadcrumbs-font-size-small:var(--op-font-x-small);
  --_op-breadcrumbs-font-size-large:var(--op-font-small);
  --__op-breadcrumbs-font-size:var(--_op-breadcrumbs-font-size-small);
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-x-small);
  .breadcrumbs__link {
    font-size: var(--__op-breadcrumbs-font-size);
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
  .breadcrumbs__text {
    font-size: var(--__op-breadcrumbs-font-size);
    font-weight: var(--op-font-weight-bold);
  }
  &.breadcrumbs--small {
    --__op-breadcrumbs-font-size:var(--_op-breadcrumbs-font-size-small);
  }
  &.breadcrumbs--large {
    --__op-breadcrumbs-font-size:var(--_op-breadcrumbs-font-size-large);
  }
}

.btn {
  --_op-btn-height-small:var(--op-input-height-small);
  --_op-btn-height-medium:var(--op-input-height-medium);
  --_op-btn-height-large:var(--op-input-height-large);
  --_op-btn-font-small:var(--op-font-x-small);
  --_op-btn-font-medium:var(--op-font-small);
  --_op-btn-font-large:var(--op-font-small);
  --_op-btn-padding-small:0 var(--op-space-x-small);
  --_op-btn-padding-medium:0 var(--op-space-small);
  --_op-btn-padding-large:0 var(--op-space-small);
  --__op-btn-height:var(--_op-btn-height-large);
  --__op-btn-font-size:var(--_op-btn-font-large);
  --__op-btn-padding:var(--_op-btn-padding-large);
  align-items: center;
  appearance: none;
  background-color: var(--op-color-neutral-plus-eight);
  border-radius: var(--op-radius-medium);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-eight);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--__op-btn-font-size);
  font-weight: var(--op-font-weight-normal);
  gap: var(--op-space-x-small);
  justify-content: center;
  min-height: var(--__op-btn-height);
  padding: var(--__op-btn-padding);
  text-align: center;
  text-decoration: none;
  transition: var(--op-transition-input);
  white-space: nowrap;
  &.btn--active {
    background-color: var(--op-color-primary-plus-five);
    color: var(--op-color-primary-on-plus-five);
  }
  &.btn--active, &:hover {
    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
  }
  &:hover {
    background-color: var(--op-color-primary-plus-eight);
    color: var(--op-color-primary-on-plus-eight);
  }
  &:focus-visible {
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: var(--op-input-focus-primary);
    color: var(--op-color-neutral-on-plus-eight);
  }
  &.btn--no-border {
    background-color: transparent;
    box-shadow: none;
    color: var(--op-color-primary-on-plus-max);
    &.btn--active {
      background-color: var(--op-color-primary-plus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
      color: var(--op-color-primary-on-plus-five);
    }
    &:hover {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
      color: var(--op-color-primary-on-plus-eight);
    }
    &:focus-visible {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: var(--op-input-focus-primary);
      color: var(--op-color-primary-on-plus-eight);
    }
  }
  &.btn--pill {
    border-radius: var(--op-radius-pill);
  }
  &.btn--icon {
    min-width: var(--__op-btn-height);
    padding: 0;
    width: var(--__op-btn-height);
  }
  &.btn--icon-with-label {
    flex-direction: column;
    gap: var(--op-space-3x-small);
    padding: var(--op-space-small);
  }
  &.btn--small {
    --__op-btn-height:var(--_op-btn-height-small);
    --__op-btn-font-size:var(--_op-btn-font-small);
    --__op-btn-padding:var(--_op-btn-padding-small);
  }
  &.btn--medium {
    --__op-btn-height:var(--_op-btn-height-medium);
    --__op-btn-font-size:var(--_op-btn-font-medium);
    --__op-btn-padding:var(--_op-btn-padding-medium);
  }
  &.btn--large {
    --__op-btn-height:var(--_op-btn-height-large);
    --__op-btn-font-size:var(--_op-btn-font-large);
    --__op-btn-padding:var(--_op-btn-padding-large);
  }
  &.btn--disabled, &:disabled {
    opacity: var(--op-opacity-disabled);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
  }
  &.btn--with-badge {
    position: relative;
  }
  &:focus, &:focus-visible, &:focus-within {
    outline: none;
  }
  &.btn--primary {
    background-color: var(--op-color-primary-base);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-base);
    color: var(--op-color-primary-on-base);
    &.btn--active {
      background-color: var(--op-color-primary-minus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
      color: var(--op-color-primary-on-minus-five);
    }
    &:hover {
      background-color: var(--op-color-primary-plus-one);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-one);
      color: var(--op-color-primary-on-plus-one);
    }
    &:focus-visible {
      background-color: var(--op-color-primary-base);
      box-shadow: var(--op-input-focus-primary);
      color: var(--op-color-primary-on-base);
    }
    &.btn--no-border {
      background-color: transparent;
      box-shadow: none;
      color: var(--op-color-primary-base);
      &.btn--active {
        background-color: var(--op-color-primary-plus-five);
        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
        color: var(--op-color-primary-on-plus-five);
      }
      &:hover {
        background-color: var(--op-color-primary-plus-eight);
        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
        color: var(--op-color-primary-on-plus-eight);
      }
      &:focus-visible {
        background-color: var(--op-color-primary-plus-eight);
        box-shadow: var(--op-input-focus-primary);
        color: var(--op-color-primary-on-plus-eight);
      }
    }
  }
  &.btn--delete, &.btn--destructive {
    background-color: var(--op-color-alerts-danger-base);
    box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-base);
    &.btn--active {
      background-color: var(--op-color-alerts-danger-plus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three);
      color: var(--op-color-alerts-danger-on-plus-five);
    }
    &:hover {
      background-color: var(--op-color-alerts-danger-minus-two);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-two);
      color: var(--op-color-alerts-danger-on-minus-two);
    }
    &:focus-visible {
      background-color: var(--op-color-alerts-danger-base);
      box-shadow: var(--op-input-focus-danger);
      color: var(--op-color-alerts-danger-on-base);
    }
  }
  &.btn--warning {
    background-color: var(--op-color-alerts-warning-base);
    box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-base);
    &.btn--active {
      background-color: var(--op-color-alerts-warning-plus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
      color: var(--op-color-alerts-warning-on-plus-five);
    }
    &:hover {
      background-color: var(--op-color-alerts-warning-minus-two);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-minus-two);
      color: var(--op-color-alerts-warning-on-minus-two);
    }
    &:focus-visible {
      background-color: var(--op-color-alerts-warning-base);
      box-shadow: var(--op-input-focus-warning);
      color: var(--op-color-alerts-warning-on-base);
    }
  }
}
@media (width <= 768px) {
  .btn {
    --__op-btn-height:var(--_op-btn-height-large);
    --__op-btn-font-size:var(--_op-btn-font-large);
    &.btn--large, &.btn--medium, &.btn--small {
      --__op-btn-height:var(--_op-btn-height-large);
      --__op-btn-font-size:var(--_op-btn-font-large);
      --__op-btn-padding:var(--_op-btn-padding-large);
    }
  }
}

.btn-group {
  --op-btn-group-hover-z-index:1;
  --op-btn-group-active-z-index:2;
  --op-btn-group-focus-z-index:3;
  align-items: center;
  display: inline-flex;
  .btn {
    + .btn {
      margin-inline-start: calc(var(--op-border-width) * -1);
    }
    &:hover {
      z-index: var(--op-btn-group-hover-z-index);
    }
    &.btn--active {
      z-index: var(--op-btn-group-active-z-index);
    }
    &:focus, &:focus-visible, &:focus-within {
      z-index: var(--op-btn-group-focus-z-index);
    }
    &:not(:first-child, :last-child) {
      border-radius: 0;
    }
    &:first-child:not(:last-child) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
    &:last-child:not(:first-child) {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }
  }
}

.btn-group-toolbar {
  display: flex;
  flex-wrap: wrap;
}

.card {
  --_op-card-padding:var(--op-space-medium);
  --_op-card-box-shadow:var(--op-border-all) var(--op-color-border);
  --_op-card-radius:var(--op-radius-medium);
  background-color: var(--op-color-background);
  border-radius: var(--_op-card-radius);
  box-shadow: var(--_op-card-box-shadow);
  color: var(--op-color-on-background);
  font-size: var(--op-font-medium);
  line-height: var(--op-line-height-base);
  position: relative;
  &.card--condensed {
    --_op-card-padding:var(--op-space-x-small);
  }
  &.card--padded {
    padding: var(--_op-card-padding);
  }
  &.card--shadow-x-small {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-x-small);
  }
  &.card--shadow-small {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-small);
  }
  &.card--shadow-medium {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-medium);
  }
  &.card--shadow-large {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-large);
  }
  &.card--shadow-x-large {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-x-large);
  }
  .card__body, .card__footer, .card__header {
    padding: var(--_op-card-padding);
  }
  .card__header {
    border-top-left-radius: var(--_op-card-radius);
    border-top-right-radius: var(--_op-card-radius);
    h1, h2, h3, h4, h5, h6 {
      margin: 0;
    }
  }
  .card__footer {
    border-bottom-left-radius: var(--_op-card-radius);
    border-bottom-right-radius: var(--_op-card-radius);
  }
}

.confirm-dialog-wrapper {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  outline: 0;
  overflow: hidden;
  position: fixed;
  visibility: hidden;
  z-index: var(--op-z-index-dialog);
  .confirm-dialog-wrapper__backdrop {
    background: var(--op-color-black);
    inset: 0;
    opacity: var(--op-opacity-none);
    position: fixed;
    transition: var(--op-transition-modal);
    visibility: hidden;
    z-index: var(--op-z-index-dialog-backdrop);
  }
  &.confirm-dialog-wrapper--active, &.restrict-project-access__global-confirmation {
    visibility: visible;
    .confirm-dialog {
      opacity: var(--op-opacity-full);
      transform: scale(1);
    }
    .confirm-dialog-wrapper__backdrop {
      opacity: var(--op-opacity-half);
      visibility: visible;
    }
  }
}

.confirm-dialog {
  --_op-confirm-dialog-width:calc(var(--op-size-unit)*100);
  background-color: var(--op-color-background);
  border-radius: var(--op-radius-medium);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-on-background);
  contain: paint;
  font-size: var(--op-font-medium);
  line-height: var(--op-line-height-base);
  opacity: var(--op-opacity-none);
  transform: scale(0.7);
  transition: var(--op-transition-modal);
  width: var(--_op-confirm-dialog-width);
  z-index: var(--op-z-index-dialog-content);
  .confirm-dialog__body, .confirm-dialog__footer, .confirm-dialog__header {
    padding: var(--op-space-medium);
  }
  .confirm-dialog__header {
    font-size: var(--op-font-large);
    font-weight: var(--op-font-weight-semi-bold);
  }
  .confirm-dialog__body {
    box-shadow: var(--op-border-all) var(--op-color-border);
  }
  .confirm-dialog__footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
}

.content-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-medium);
  justify-content: space-between;
  padding-block: var(--op-space-medium);
  .content-header__details {
    display: grid;
    gap: var(--op-space-3x-small);
  }
  .content-header__context {
    color: var(--op-color-on-background-alt);
    font-size: var(--op-font-small);
  }
  .content-header__title {
    color: var(--op-color-on-background);
    font-size: var(--op-font-2x-large);
    font-weight: var(--op-font-weight-medium);
    margin: 0;
  }
  .content-header__subline {
    color: var(--op-color-on-background-alt);
    font-size: var(--op-font-medium);
  }
  .content-header__aside {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-space-2x-small);
    justify-content: end;
    margin-inline-start: auto;
  }
}

.divider {
  --_op-divider-vertical-min-height:var(--op-space-large);
  --_op-divider-height-small:var(--op-border-width);
  --_op-divider-height-medium:var(--op-border-width-large);
  --_op-divider-height-large:var(--op-border-width-x-large);
  --_op-divider-padding-small:var(--op-space-2x-small);
  --_op-divider-padding-medium:var(--op-space-x-small);
  --_op-divider-padding-large:var(--op-space-medium);
  --__op-divider-height:var(--_op-divider-height-small);
  --__op-divider-padding:0;
  background-color: var(--op-color-border);
  height: var(--__op-divider-height);
  margin-block: var(--__op-divider-padding);
  margin-inline: 0;
  width: 100%;
  &.divider--small {
    --__op-divider-height:var(--_op-divider-height-small);
  }
  &.divider--medium {
    --__op-divider-height:var(--_op-divider-height-medium);
  }
  &.divider--large {
    --__op-divider-height:var(--_op-divider-height-large);
  }
  &.divider--spacing-small {
    --__op-divider-padding:var(--_op-divider-padding-small);
  }
  &.divider--spacing-medium {
    --__op-divider-padding:var(--_op-divider-padding-medium);
  }
  &.divider--spacing-large {
    --__op-divider-padding:var(--_op-divider-padding-large);
  }
  &.divider--vertical {
    height: 100%;
    margin-block: 0;
    margin-inline: var(--__op-divider-padding);
    min-height: var(--_op-divider-vertical-min-height);
    width: var(--__op-divider-height);
  }
}

.form-control {
  --_op-form-control-height-small:var(--op-input-height-small);
  --_op-form-control-height-medium:var(--op-input-height-medium);
  --_op-form-control-height-large:var(--op-input-height-large);
  --_op-form-control-font-small:var(--op-font-x-small);
  --_op-form-control-font-medium:var(--op-font-small);
  --_op-form-control-font-large:var(--op-font-small);
  --__op-form-control-height:var(--_op-form-control-height-large);
  --__op-form-control-font-size:var(--_op-form-control-font-large);
  height: var(--__op-form-control-height);
  min-width: var(--__op-form-control-height);
  &.form-control--small {
    --__op-form-control-height:var(--_op-form-control-height-small);
    --__op-form-control-font-size:var(--_op-form-control-font-small);
  }
  &.form-control--medium {
    --__op-form-control-height:var(--_op-form-control-height-medium);
    --__op-form-control-font-size:var(--_op-form-control-font-medium);
  }
  &.form-control--large {
    --__op-form-control-height:var(--_op-form-control-height-large);
    --__op-form-control-font-size:var(--_op-form-control-font-large);
  }
  &:disabled {
    cursor: not-allowed;
    opacity: var(--_op-form-control-opacity-disabled);
  }
  &[readonly] {
    background: transparent;
    box-shadow: none;
    color: var(--op-color-on-background);
    padding: 0;
    pointer-events: none;
    user-select: none;
    &::-webkit-input-placeholder {
      color: var(--op-color-on-background);
    }
  }
}

.form-control:is([type=radio], [type=checkbox]) {
  --_op-form-control-height-small:var(--op-space-medium);
  --_op-form-control-height-medium:var(--op-space-large);
  --_op-form-control-height-large:var(--op-space-x-large);
  accent-color: var(--op-color-primary-base);
  align-self: center;
  cursor: pointer;
  height: var(--__op-form-control-height);
  margin: 0;
  width: var(--__op-form-control-height);
  & + label {
    align-self: center;
  }
}

.form-control:not([type=radio], [type=checkbox]) {
  --_op-form-control-opacity-disabled:var(--op-opacity-disabled);
  --__op-form-control-border-color:var(--op-color-neutral-plus-four);
  appearance: none;
  background-color: var(--op-color-neutral-plus-eight);
  border: none;
  border-radius: var(--op-radius-medium);
  box-shadow: var(--op-border-all) var(--__op-form-control-border-color);
  color: var(--op-color-neutral-on-plus-eight);
  cursor: text;
  display: block;
  font-size: var(--__op-form-control-font-size);
  height: var(--__op-form-control-height);
  line-height: var(--op-line-height-base);
  min-width: var(--__op-form-control-height);
  padding-block: var(--op-space-2x-small);
  padding-inline: var(--op-space-small) var(--op-space-x-small);
  width: 100%;
  &:focus, &:focus-visible, &:focus-within {
    outline: none;
  }
  &:hover:not(:disabled, [readonly]) {
    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three);
  }
  &:focus-visible:not([readonly]) {
    background-color: var(--op-color-primary-plus-seven);
    box-shadow: var(--op-input-focus-primary);
    color: var(--op-color-primary-on-plus-seven);
  }
  &.form-control--no-border {
    background-color: transparent;
    box-shadow: none;
    color: var(--op-color-primary-on-plus-max);
    &:focus-visible:not([readonly]) {
      background-color: var(--op-color-primary-plus-seven);
      box-shadow: var(--op-input-focus-primary);
      color: var(--op-color-primary-on-plus-seven);
    }
    &:hover:not(:disabled, [readonly]) {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
      color: var(--op-color-primary-on-plus-eight);
    }
  }
}

.form-control[type=color] {
  cursor: pointer;
  padding: var(--op-space-2x-small);
  &::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  &::-webkit-color-swatch {
    border: none;
    border-radius: var(--op-radius-medium);
  }
}

.form-control[type=file] {
  padding-block: 0;
  &::file-selector-button {
    --__op-btn-base-height:var(--op-input-height-small);
    --__op-btn-height:var(--__op-btn-base-height);
    align-items: center;
    appearance: none;
    background-color: var(--op-color-neutral-plus-eight);
    border: none;
    border-radius: var(--op-radius-medium);
    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
    color: var(--op-color-neutral-on-plus-eight);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--op-font-x-small);
    font-weight: var(--op-font-weight-normal);
    gap: var(--op-space-x-small);
    justify-content: center;
    margin-block: calc(var(--__op-form-control-height) / 2 - var(--__op-btn-height) / 2);
    min-height: var(--__op-btn-height);
    padding-block: 0;
    padding-inline: var(--op-space-x-small);
    text-align: center;
    text-decoration: none;
    transition: var(--op-transition-input);
    white-space: nowrap;
  }
  &.form-control--small::file-selector-button {
    --__op-btn-height:calc(var(--__op-btn-base-height) - var(--op-space-x-small));
  }
}

select.form-control:not([multiple], [type=radio], [type=checkbox]) {
  appearance: none;
  background-image: var(--op-encoded-images-dropdown-arrow);
  background-position: 100%;
  background-position-x: calc(100% - var(--op-space-3x-large) / 2 + var(--op-encoded-images-dropdown-arrow-width) / 2);
  background-repeat: no-repeat;
  cursor: pointer;
  padding-inline-end: var(--op-space-3x-large);
}

select.form-control[multiple] {
  min-height: calc(var(--__op-form-control-height) * 2);
}

textarea.form-control:not([type=radio], [type=checkbox]) {
  height: calc(var(--__op-form-control-height) * 2);
  max-width: 100%;
  min-height: var(--__op-form-control-height);
}

.form-label, .project__key-label, sl-input::part(form-control-label), :root sl-select::part(form-control-label),
:host sl-select::part(form-control-label),
.sl-theme-light sl-select::part(form-control-label),
.sl-theme-dark sl-select::part(form-control-label) {
  color: var(--op-color-on-background);
  font-weight: var(--op-font-weight-normal);
  letter-spacing: var(--op-letter-spacing-label);
  line-height: var(--op-line-height-base);
}

.form-error, .form-label, .project__key-label, sl-input::part(form-control-label), :root sl-select::part(form-control-label),
:host sl-select::part(form-control-label),
.sl-theme-light sl-select::part(form-control-label),
.sl-theme-dark sl-select::part(form-control-label) {
  font-size: var(--op-font-x-small);
}

.form-error {
  color: var(--op-color-alerts-danger-base);
  width: fit-content;
}

.form-hint {
  display: block;
  font-size: var(--op-font-small);
  font-style: italic;
}

.form-error-summary {
  background-color: var(--op-color-alerts-danger-plus-seven);
  border-radius: var(--op-radius-large);
  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
  color: var(--op-color-alerts-danger-on-plus-seven);
  margin-block-end: var(--op-space-large);
  padding: var(--op-space-large);
  h2 {
    font-size: var(--op-font-medium);
  }
  ul {
    margin-block-end: 0;
  }
}

.form-group {
  align-content: baseline;
  display: grid;
  gap: var(--op-space-x-small);
  grid-auto-rows: auto;
  grid-template-columns: auto 1fr;
  padding-block: var(--op-space-small);
  padding-inline: 0;
  .form-control:not([type=radio], [type=checkbox]), .form-error, .form-hint, .form-label, .project__key-label, sl-input::part(form-control-label), :root sl-select::part(form-control-label),
  :host sl-select::part(form-control-label),
  .sl-theme-light sl-select::part(form-control-label),
  .sl-theme-dark sl-select::part(form-control-label), .segmented-control {
    grid-column: 1/3;
  }
  .form-control[type=checkbox], .form-control[type=radio] {
    grid-column: 1/1;
    & + .form-label, & + .project__key-label, & + sl-input::part(form-control-label), :root & + sl-select::part(form-control-label),
    :host & + sl-select::part(form-control-label),
    .sl-theme-light & + sl-select::part(form-control-label),
    .sl-theme-dark & + sl-select::part(form-control-label) {
      grid-column: 2/3;
      grid-row: 1;
    }
  }
}

.form-group--inline {
  align-items: center;
  .form-label, .project__key-label, sl-input::part(form-control-label), :root sl-select::part(form-control-label),
  :host sl-select::part(form-control-label),
  .sl-theme-light sl-select::part(form-control-label),
  .sl-theme-dark sl-select::part(form-control-label) {
    grid-column: unset;
  }
  .form-error, .form-hint {
    grid-column: 1/3;
  }
  .form-control:not([type=radio], [type=checkbox]), .switch {
    grid-column: unset;
  }
}

.form-group--error {
  .form-control {
    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
    &[type=checkbox], &[type=radio] {
      box-shadow: none;
      & + label {
        color: var(--op-color-alerts-danger-minus-three);
        font-weight: var(--op-font-weight-bold);
      }
    }
    &:hover:not(:disabled, [readonly]) {
      background-color: var(--op-color-alerts-danger-plus-seven);
      box-shadow: var(--op-border-all) var(--op-color-alerts-danger-minus-two);
      color: var(--op-color-alerts-danger-on-plus-seven);
    }
    &[readonly] {
      box-shadow: none;
    }
    &:focus-visible:not([readonly]) {
      background-color: var(--op-color-alerts-danger-plus-seven);
      box-shadow: var(--op-input-focus-danger);
      color: var(--op-color-alerts-danger-on-plus-seven);
    }
    &.form-control--no-border {
      border-radius: 0;
      box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
      &[readonly] {
        box-shadow: none;
      }
      &:focus-visible:not([readonly]) {
        background-color: var(--op-color-alerts-danger-plus-seven);
        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
        color: var(--op-color-alerts-danger-on-plus-seven);
      }
      &:hover:not(:disabled, [readonly]) {
        background-color: var(--op-color-alerts-danger-plus-eight);
        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
        color: var(--op-color-alerts-danger-on-plus-eight);
      }
    }
  }
}

.icon {
  --_op-icon-weight-light:var(--op-font-weight-light);
  --_op-icon-weight-normal:var(--op-font-weight-normal);
  --_op-icon-weight-semi-bold:var(--op-font-weight-semi-bold);
  --_op-icon-weight-bold:var(--op-font-weight-bold);
  --_op-icon-fill-outlined:0;
  --_op-icon-fill-filled:1;
  --_op-icon-emphasis-low:-20;
  --_op-icon-emphasis-normal:0;
  --_op-icon-emphasis-high:200;
  --_op-icon-font-size-small:var(--op-font-small);
  --_op-icon-font-size-medium:var(--op-font-medium);
  --_op-icon-font-size-large:var(--op-font-large);
  --_op-icon-font-size-x-large:var(--op-font-2x-large);
  --_op-icon-optical-size-small:20;
  --_op-icon-optical-size-medium:20;
  --_op-icon-optical-size-large:40;
  --_op-icon-optical-size-x-large:48;
  --__op-icon-weight:var(--_op-icon-weight-normal);
  --__op-icon-fill:var(--_op-icon-fill-outlined);
  --__op-icon-emphasis:var(--_op-icon-emphasis-normal);
  --__op-icon-font-size:var(--_op-icon-font-size-medium);
  --__op-icon-optical-size:var(--_op-icon-optical-size-medium);
  display: inline-block;
  font-size: var(--__op-icon-font-size);
  font-weight: var(--__op-icon-weight);
  height: var(--__op-icon-font-size);
  line-height: var(--op-line-height-densest);
  vertical-align: middle;
  width: var(--__op-icon-font-size);
  &.icon--outlined {
    --__op-icon-fill:var(--_op-icon-fill-outlined);
  }
  &.icon--filled {
    --__op-icon-fill:var(--_op-icon-fill-filled);
  }
  &.icon--weight-light {
    --__op-icon-weight:var(--_op-icon-weight-light);
  }
  &.icon--weight-normal {
    --__op-icon-weight:var(--_op-icon-weight-normal);
  }
  &.icon--weight-semi-bold {
    --__op-icon-weight:var(--_op-icon-weight-semi-bold);
  }
  &.icon--weight-bold {
    --__op-icon-weight:var(--_op-icon-weight-bold);
  }
  &.icon--low-emphasis {
    --__op-icon-emphasis:var(--_op-icon-emphasis-low);
  }
  &.icon--normal-emphasis {
    --__op-icon-emphasis:var(--_op-icon-emphasis-normal);
  }
  &.icon--high-emphasis {
    --__op-icon-emphasis:var(--_op-icon-emphasis-high);
  }
  &.icon--small {
    --__op-icon-font-size:var(--_op-icon-font-size-small);
    --__op-icon-optical-size:var(--_op-icon-optical-size-small);
  }
  &.icon--medium {
    --__op-icon-font-size:var(--_op-icon-font-size-medium);
    --__op-icon-optical-size:var(--_op-icon-optical-size-medium);
  }
  &.icon--large {
    --__op-icon-font-size:var(--_op-icon-font-size-large);
    --__op-icon-optical-size:var(--_op-icon-optical-size-large);
  }
  &.icon--x-large {
    --__op-icon-font-size:var(--_op-icon-font-size-x-large);
    --__op-icon-optical-size:var(--_op-icon-optical-size-x-large);
  }
}

.material-symbols-outlined {
  font-variation-settings: "FILL" var(--__op-icon-fill), "wght" var(--__op-icon-weight), "GRAD" var(--__op-icon-emphasis), "opsz" var(--__op-icon-optical-size);
  font-weight: unset;
}

.custom-icons {
  svg {
    height: 100%;
    width: 100%;
  }
}

.modal-wrapper {
  --_op-modal-backdrop-active-opacity:var(--op-opacity-half);
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  outline: 0;
  overflow: hidden;
  position: fixed;
  visibility: hidden;
  z-index: var(--op-z-index-dialog);
  .modal-wrapper__backdrop {
    background: var(--op-color-black);
    inset: 0;
    opacity: var(--op-opacity-none);
    position: fixed;
    transition: var(--op-transition-modal);
    visibility: hidden;
    z-index: var(--op-z-index-dialog-backdrop);
  }
  &.modal-wrapper--active {
    visibility: visible;
    .modal {
      opacity: var(--op-opacity-full);
      transform: scale(1);
    }
    .modal-wrapper__backdrop {
      opacity: var(--_op-modal-backdrop-active-opacity);
      visibility: visible;
    }
  }
}

.modal {
  --_op-modal-width:calc(var(--op-size-unit)*141);
  --_op-modal-max-height:calc(var(--op-size-unit)*125);
  background-color: var(--op-color-background);
  border-radius: var(--op-radius-medium);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-on-background);
  contain: paint;
  font-size: var(--op-font-medium);
  line-height: var(--op-line-height-base);
  opacity: var(--op-opacity-none);
  transform: scale(0.7);
  transition: var(--op-transition-modal);
  width: var(--_op-modal-width);
  z-index: var(--op-z-index-dialog-content);
  .modal__body, .modal__footer, .modal__header {
    padding: var(--op-space-medium);
  }
  .modal__header {
    align-items: center;
    display: flex;
    font-size: var(--op-font-large);
    font-weight: var(--op-font-weight-semi-bold);
    justify-content: space-between;
  }
  .modal__body {
    box-shadow: var(--op-border-all) var(--op-color-border);
    max-height: var(--_op-modal-max-height);
    overflow-y: auto;
  }
  .modal__footer {
    align-items: center;
    display: flex;
    gap: var(--op-space-small);
    justify-content: flex-end;
  }
}

dialog.modal {
  border: none;
  display: block;
  inset: 0;
  padding: 0;
  position: fixed;
  &::backdrop {
    --op-color-black:#000;
    --_op-modal-backdrop-active-opacity:0.5;
    --op-opacity-none:0;
    --op-opacity-full:1;
    animation: show-backdrop 0.3s ease-in;
    background: var(--op-color-black);
    opacity: var(--_op-modal-backdrop-active-opacity);
  }
  &[open] {
    opacity: var(--op-opacity-full);
    transform: scale(1);
  }
  &.modal--closing {
    opacity: var(--op-opacity-none);
    transform: scale(0.7);
    &::backdrop {
      animation: hide-backdrop 0.3s ease-in;
      opacity: var(--op-opacity-none);
    }
  }
}

@keyframes show-backdrop {
  0% {
    opacity: var(--op-opacity-none);
  }
  to {
    opacity: var(--_op-modal-backdrop-active-opacity);
  }
}
@keyframes hide-backdrop {
  0% {
    opacity: var(--_op-modal-backdrop-active-opacity);
  }
  to {
    opacity: var(--op-opacity-none);
  }
}
.navbar {
  --_op-navbar-background-color:var(--op-color-neutral-plus-eight);
  --_op-navbar-text-color:var(--op-color-neutral-on-plus-eight);
  --_op-navbar-border-color:var(--op-color-neutral-plus-four);
  --_op-navbar-brand-height:calc(var(--op-size-unit)*12);
  --_op-navbar-horizontal-spacing:var(--op-space-x-large);
  --_op-navbar-content-spacing:var(--op-space-x-small);
  --_op-navbar-content-item-spacing:var(--op-space-2x-small);
  align-items: center;
  background-color: var(--_op-navbar-background-color);
  box-shadow: var(--op-border-bottom) var(--_op-navbar-border-color);
  color: var(--_op-navbar-text-color);
  display: flex;
  gap: var(--_op-navbar-content-spacing);
  padding: var(--op-space-small) var(--_op-navbar-horizontal-spacing);
  .navbar__brand {
    height: var(--_op-navbar-brand-height);
    margin-right: var(--_op-navbar-horizontal-spacing);
    img {
      height: 100%;
    }
  }
  .navbar__content {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--_op-navbar-content-item-spacing);
    &.navbar__content--justify-start {
      margin-inline-end: auto;
    }
    &.navbar__content--justify-center {
      margin-inline: auto;
    }
    &.navbar__content--justify-end {
      margin-inline-start: auto;
    }
  }
  &.navbar--primary {
    --_op-navbar-background-color:var(--op-color-primary-plus-six);
    --_op-navbar-text-color:var(--op-color-primary-on-plus-six);
    --_op-navbar-border-color:var(--op-color-primary-plus-four);
  }
}

.pagination {
  align-items: center;
  display: flex;
  gap: 0;
  .form-group {
    align-items: center;
    .form-label, .project__key-label, sl-input::part(form-control-label), :root sl-select::part(form-control-label),
    :host sl-select::part(form-control-label),
    .sl-theme-light sl-select::part(form-control-label),
    .sl-theme-dark sl-select::part(form-control-label) {
      grid-column: 1;
    }
    .form-control {
      grid-column: 2;
    }
  }
  .pagination__divider {
    height: 100%;
    padding-inline: var(--op-space-x-small);
  }
}

.segmented-control {
  --op-input-inner-focus:0 0 0 var(--op-border-width-large);
  --op-input-focus-primary:var(--op-input-inner-focus) var(--op-color-primary-plus-two),var(--op-input-outer-focus) var(--op-color-primary-plus-five);
  --_op-segmented-control-height-small:var(--op-input-height-small);
  --_op-segmented-control-height-medium:var(--op-input-height-medium);
  --_op-segmented-control-height-large:var(--op-input-height-large);
  --_op-segmented-control-font-small:var(--op-font-x-small);
  --_op-segmented-control-font-medium:var(--op-font-small);
  --_op-segmented-control-font-large:var(--op-font-small);
  --_op-segmented-control-label-padding-small:var(--op-space-x-small);
  --_op-segmented-control-label-padding-medium:var(--op-space-small);
  --_op-segmented-control-label-padding-large:var(--op-space-small);
  --_op-segmented-control-label-gap-small:var(--op-space-3x-small);
  --_op-segmented-control-label-gap-medium:var(--op-space-2x-small);
  --_op-segmented-control-label-gap-large:var(--op-space-2x-small);
  --_op-segmented-control-color-icon-default:var(--op-color-neutral-on-plus-eight-alt);
  --_op-segmented-control-color-icon-active:light-dark(var(--op-color-primary-plus-four),var(--op-color-primary-minus-six));
  --__op-segmented-control-height:var(--_op-segmented-control-height-large);
  --__op-segmented-control-font-size:var(--_op-segmented-control-font-large);
  --__op-segmented-control-label-padding:var(--_op-segmented-control-label-padding-large);
  --__op-segmented-control-label-gap:var(--_op-segmented-control-label-gap-large);
  --__op-segmented-control-color-icon:var(--_op-segmented-control-color-icon-default);
  background-color: var(--op-color-neutral-plus-eight);
  border-radius: var(--op-radius-medium);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-neutral-on-plus-eight);
  display: grid;
  font-size: var(--__op-segmented-control-font-size);
  gap: var(--op-space-2x-small);
  grid-auto-flow: column;
  height: var(--__op-segmented-control-height);
  padding: var(--op-space-2x-small);
  position: relative;
  width: fit-content;
  &.segmented-control--full-width {
    width: 100%;
  }
  .icon {
    color: var(--__op-segmented-control-color-icon);
  }
  .segmented-control__input {
    border-width: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    &:checked + .segmented-control__label {
      --__op-segmented-control-color-icon:var(--_op-segmented-control-color-icon-active);
      background-color: var(--op-color-primary-plus-one);
      color: var(--op-color-primary-on-plus-one);
    }
    &:focus-visible {
      + .segmented-control__label {
        box-shadow: var(--op-input-focus-primary);
      }
    }
  }
  .segmented-control__label {
    align-items: center;
    border-radius: var(--op-radius-small);
    display: inline-flex;
    gap: var(--__op-segmented-control-label-gap);
    justify-content: center;
    padding-inline: var(--__op-segmented-control-label-padding);
    white-space: nowrap;
    &:hover {
      background-color: var(--op-color-neutral-plus-five);
      color: var(--op-color-neutral-on-plus-five);
    }
  }
  &.segmented-control--small {
    --__op-segmented-control-height:var(--_op-segmented-control-height-small);
    --__op-segmented-control-font-size:var(--_op-segmented-control-font-small);
    --__op-segmented-control-label-padding:var(--_op-segmented-control-label-padding-small);
    --__op-segmented-control-label-gap:var(--_op-segmented-control-label-gap-small);
    .icon {
      --__op-icon-font-size:var(--_op-icon-font-size-small);
      --__op-icon-optical-size:var(--_op-icon-optical-size-small);
    }
  }
  &.segmented-control--medium {
    --__op-segmented-control-height:var(--_op-segmented-control-height-medium);
    --__op-segmented-control-font-size:var(--_op-segmented-control-font-medium);
    --__op-segmented-control-label-padding:var(--_op-segmented-control-label-padding-medium);
    --__op-segmented-control-label-gap:var(--_op-segmented-control-label-gap-medium);
    .icon {
      --__op-icon-font-size:var(--_op-icon-font-size-medium);
      --__op-icon-optical-size:var(--_op-icon-optical-size-medium);
    }
  }
  &.segmented-control--large {
    --__op-segmented-control-height:var(--_op-segmented-control-height-large);
    --__op-segmented-control-font-size:var(--_op-segmented-control-font-large);
    --__op-segmented-control-label-padding:var(--_op-segmented-control-label-padding-large);
    --__op-segmented-control-label-gap:var(--_op-segmented-control-label-gap-large);
    .icon {
      --__op-icon-font-size:var(--_op-icon-font-size-medium);
      --__op-icon-optical-size:var(--_op-icon-optical-size-medium);
    }
  }
}

.sidebar {
  --_op-sidebar-background-color:var(--op-color-neutral-plus-eight);
  --_op-sidebar-text-color:var(--op-color-neutral-on-plus-eight);
  --_op-sidebar-border-color:var(--op-color-neutral-plus-four);
  --_op-sidebar-rail-width:calc(var(--op-size-unit)*22);
  --_op-sidebar-compact-width:calc(var(--op-size-unit)*42);
  --_op-sidebar-drawer-width:calc(var(--op-size-unit)*54);
  --_op-sidebar-rail-brand-width:calc(var(--op-size-unit)*19);
  --_op-sidebar-compact-brand-width:calc(var(--op-size-unit)*24);
  --_op-sidebar-drawer-brand-width:calc(var(--op-size-unit)*24);
  --_op-sidebar-spacing:calc(var(--op-space-2x-large) + var(--op-space-2x-small));
  --_op-sidebar-brand-spacing:var(--op-space-medium);
  --_op-sidebar-content-spacing:var(--op-space-x-small);
  --_op-sidebar-content-item-spacing:var(--op-space-2x-small);
  --_op-sidebar-transition:var(--op-transition-sidebar);
  --__op-sidebar-width:var(--_op-sidebar-drawer-width);
  --__op-sidebar-brand-width:var(--_op-sidebar-drawer-brand-width);
  background-color: var(--_op-sidebar-background-color);
  box-shadow: var(--op-border-right) var(--_op-sidebar-border-color);
  color: var(--_op-sidebar-text-color);
  display: flex;
  flex-direction: column;
  min-width: var(--__op-sidebar-width);
  overflow-y: auto;
  transition: var(--_op-sidebar-transition);
  width: var(--__op-sidebar-width);
  z-index: var(--op-z-index-sidebar);
  .sidebar__brand {
    height: var(--__op-sidebar-brand-width);
    margin-inline: auto;
    padding: var(--_op-sidebar-brand-spacing);
    img {
      height: 100%;
    }
  }
  .sidebar__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--_op-sidebar-content-item-spacing);
    padding-inline: var(--_op-sidebar-content-spacing);
    > * {
      justify-content: flex-start;
      .material-symbols-outlined {
        --__op-icon-font-size:var(--_op-icon-font-size-large);
        --__op-icon-optical-size:var(--_op-icon-optical-size-large);
        --__op-icon-weight:var(--_op-icon-weight-bold);
      }
    }
    &.sidebar__content--start {
      justify-content: start;
    }
    &.sidebar__content--center {
      justify-content: center;
    }
    &.sidebar__content--end {
      justify-content: end;
    }
  }
  &.sidebar--padded {
    padding-block: var(--_op-sidebar-spacing);
  }
  &.sidebar--drawer {
    --__op-sidebar-width:var(--_op-sidebar-drawer-width);
    --__op-sidebar-brand-width:var(--_op-sidebar-drawer-brand-width);
  }
  &.sidebar--compact {
    --__op-sidebar-width:var(--_op-sidebar-compact-width);
    --__op-sidebar-brand-width:var(--_op-sidebar-compact-brand-width);
    .sidebar__content {
      > * {
        flex-direction: column;
        gap: var(--op-space-3x-small);
        padding: var(--op-space-small);
      }
    }
  }
  &.sidebar--rail {
    --__op-sidebar-width:var(--_op-sidebar-rail-width);
    --__op-sidebar-brand-width:var(--_op-sidebar-rail-brand-width);
    .sidebar__content {
      align-items: center;
      > * {
        font-size: 0;
        gap: 0;
        justify-content: center;
        min-width: var(--__op-btn-height);
        padding: 0;
        width: var(--__op-btn-height);
      }
    }
  }
  &.sidebar--primary {
    --_op-sidebar-background-color:var(--op-color-primary-plus-six);
    --_op-sidebar-text-color:var(--op-color-primary-on-plus-six);
    --_op-sidebar-border-color:var(--op-color-primary-plus-four);
  }
}

.side-panel {
  --_op-side-panel-width:calc(var(--op-size-unit)*54);
  --_op-side-panel-header-padding:var(--op-space-medium);
  --_op-side-panel-body-padding:var(--op-space-medium);
  --_op-side-panel-footer-padding:var(--op-space-medium);
  --_op-side-panel-section-padding:var(--op-space-medium);
  background-color: var(--op-color-background);
  color: var(--op-color-on-background);
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100%;
  min-width: var(--_op-side-panel-width);
  width: var(--_op-side-panel-width);
  &.side-panel--border-left {
    box-shadow: var(--op-border-left) var(--op-color-border);
  }
  &.side-panel--border-right {
    box-shadow: var(--op-border-right) var(--op-color-border);
  }
  &.side-panel--border-left.side-panel--border-right {
    box-shadow: var(--op-border-x);
  }
  .side-panel__header {
    &.side-panel__header--padded {
      padding: var(--_op-side-panel-header-padding);
    }
    &.side-panel__header--padded-x {
      padding-inline: var(--_op-side-panel-header-padding);
    }
    &.side-panel__header--padded-y {
      padding-block: var(--_op-side-panel-header-padding);
    }
  }
  .side-panel__body {
    flex: 1;
    overflow-y: auto;
    &.side-panel__body--padded {
      padding: var(--_op-side-panel-body-padding);
    }
    &.side-panel__body--padded-x {
      padding-inline: var(--_op-side-panel-body-padding);
    }
    &.side-panel__body--padded-y {
      padding-block: var(--_op-side-panel-body-padding);
    }
  }
  .side-panel__footer {
    &.side-panel__footer--padded {
      padding: var(--_op-side-panel-footer-padding);
    }
    &.side-panel__footer--padded-x {
      padding-inline: var(--_op-side-panel-footer-padding);
    }
    &.side-panel__footer--padded-y {
      padding-block: var(--_op-side-panel-footer-padding);
    }
  }
  .side-panel__section {
    &.side-panel__section--padded {
      padding: var(--_op-side-panel-section-padding);
    }
    &.side-panel__section--padded-x {
      padding-inline: var(--_op-side-panel-section-padding);
    }
    &.side-panel__section--padded-y {
      padding-block: var(--_op-side-panel-section-padding);
    }
  }
}

.spinner {
  --_op-spinner-indicator-color:var(--op-color-primary-base);
  --_op-spinner-track-color:var(--op-color-neutral-plus-four);
  --_op-spinner-track-width-x-small:var(--op-border-width);
  --_op-spinner-track-width-small:var(--op-border-width-large);
  --_op-spinner-track-width-medium:calc(var(--op-border-width-large) + var(--op-border-width));
  --_op-spinner-track-width-large:var(--op-border-width-x-large);
  --_op-spinner-diameter-x-small:calc(var(--op-size-unit)*6);
  --_op-spinner-diameter-small:calc(var(--op-size-unit)*10);
  --_op-spinner-diameter-medium:calc(var(--op-size-unit)*15);
  --_op-spinner-diameter-large:calc(var(--op-size-unit)*20);
  --_op-spinner-animation-duration:0.8s;
  --_op-spinner-animation-timing-function:linear;
  --__op-spinner-diameter:var(--_op-spinner-diameter-large);
  --__op-spinner-track-width:var(--_op-spinner-track-width-large);
  animation: spinner var(--_op-spinner-animation-duration) var(--_op-spinner-animation-timing-function) infinite;
  border: var(--__op-spinner-track-width) solid var(--_op-spinner-track-color);
  border-radius: var(--__op-spinner-diameter);
  border-top-color: var(--_op-spinner-indicator-color);
  height: var(--__op-spinner-diameter);
  width: var(--__op-spinner-diameter);
  &.spinner--x-small {
    --__op-spinner-diameter:var(--_op-spinner-diameter-x-small);
    --__op-spinner-track-width:var(--_op-spinner-track-width-x-small);
  }
  &.spinner--small {
    --__op-spinner-diameter:var(--_op-spinner-diameter-small);
    --__op-spinner-track-width:var(--_op-spinner-track-width-small);
  }
  &.spinner--medium {
    --__op-spinner-diameter:var(--_op-spinner-diameter-medium);
    --__op-spinner-track-width:var(--_op-spinner-track-width-medium);
  }
  &.spinner--large {
    --__op-spinner-diameter:var(--_op-spinner-diameter-large);
    --__op-spinner-track-width:var(--_op-spinner-track-width-large);
  }
}

@keyframes spinner {
  to {
    transform: rotate(1turn);
  }
}
.switch {
  --_op-switch-height-small:calc(var(--op-size-unit)*4);
  --_op-switch-height-large:calc(var(--op-size-unit)*6);
  --_op-switch-width-small:calc(var(--op-size-unit)*7);
  --_op-switch-width-large:calc(var(--op-size-unit)*11);
  --_op-switch-opacity-disabled:var(--op-opacity-disabled);
  --_op-switch-switch-padding:var(--op-space-2x-small);
  --__op-switch-width:var(--_op-switch-width-large);
  --__op-switch-height:var(--_op-switch-height-large);
  --__op-switch-switch-size:calc(var(--__op-switch-height) - var(--_op-switch-switch-padding));
  --__op-switch-half-switch-padding:calc(var(--_op-switch-switch-padding)/2);
  align-items: center;
  display: flex;
  position: relative;
  label {
    background: var(--op-color-neutral-base);
    border-radius: var(--op-radius-pill);
    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
    display: block;
    height: var(--__op-switch-height);
    position: relative;
    text-indent: -9999px;
    width: var(--__op-switch-width);
    &:after {
      background-color: var(--op-color-neutral-plus-eight);
      border-radius: var(--op-radius-circle);
      content: "";
      height: var(--__op-switch-switch-size);
      inset-block-start: var(--__op-switch-half-switch-padding);
      inset-inline-start: var(--__op-switch-half-switch-padding);
      position: absolute;
      transition: var(--op-transition-input);
      width: var(--__op-switch-switch-size);
    }
  }
  & + label {
    width: fit-content;
  }
  input {
    height: 0;
    margin-inline-end: calc(var(--op-space-x-small) * -1);
    width: 0;
    &:disabled {
      visibility: hidden;
    }
    &:disabled + label {
      cursor: not-allowed;
      opacity: var(--_op-switch-opacity-disabled);
    }
    &:checked + label {
      background-color: var(--op-color-primary-base);
      box-shadow: none;
      &:after {
        left: calc(100% - var(--__op-switch-half-switch-padding));
        transform: translateX(-100%);
      }
    }
    &:hover + label {
      &:after {
        background-color: var(--op-color-primary-plus-five);
      }
    }
    &:focus-visible + label {
      box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-six), inset var(--op-border-all) var(--op-color-primary-minus-three);
      &:after {
        background-color: var(--op-color-neutral-plus-five);
        box-shadow: var(--op-border-all) var(--op-color-primary-minus-three);
      }
    }
    &:focus-visible:checked + label {
      &:after {
        background-color: var(--op-color-primary-plus-six);
        box-shadow: var(--op-border-all) var(--op-color-primary-minus-two);
      }
    }
  }
  &.switch--small {
    --__op-switch-width:var(--_op-switch-width-small);
    --__op-switch-height:var(--_op-switch-height-small);
  }
  &.switch--large {
    --__op-switch-width:var(--_op-switch-width-large);
    --__op-switch-height:var(--_op-switch-height-large);
  }
}

.tab-group {
  align-items: center;
  display: flex;
}

.tab {
  --_op-tab-font-small:var(--op-font-x-small);
  --_op-tab-font-large:var(--op-font-small);
  --_op-tab-padding-small:calc(var(--op-space-2x-small) + var(--op-space-3x-small)) var(--op-space-medium);
  --_op-tab-padding-large:var(--op-space-x-small) var(--op-space-medium) var(--op-space-small) var(--op-space-medium);
  --_op-tab-indicator-width-small:var(--op-border-width-large);
  --_op-tab-indicator-width-large:var(--op-border-width-x-large);
  --_op-tab-disabled-opacity:var(--op-opacity-disabled);
  --__op-tab-font-size:var(--_op-tab-font-large);
  --__op-tab-padding:var(--_op-tab-padding-large);
  --__op-tab-indicator-width:var(--_op-tab-indicator-width-large);
  --__op-tab-indicator:inset 0 calc(var(--__op-tab-indicator-width)*-1) 0 0;
  background-color: var(--op-color-background);
  color: var(--op-color-on-background);
  font-size: var(--__op-tab-font-size);
  padding: var(--__op-tab-padding);
  text-decoration: none;
  &.tab--active {
    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one);
  }
  &:focus, &:focus-visible, &:focus-within {
    outline: none;
  }
  &:hover {
    background-color: var(--op-color-primary-plus-seven);
    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-base);
    color: var(--op-color-primary-on-plus-seven);
  }
  &:focus-visible:not(.tab--disabled) {
    box-shadow: var(--op-input-focus-primary);
    z-index: 1;
    &.tab--active {
      box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one), var(--op-input-focus-primary);
    }
  }
  &.tab--disabled {
    opacity: var(--_op-tab-disabled-opacity);
    pointer-events: none;
  }
  &.tab--small {
    --__op-tab-padding:var(--_op-tab-padding-small);
    --__op-tab-font-size:var(--_op-tab-font-small);
    --__op-tab-indicator-width:var(--_op-tab-indicator-width-small);
  }
  &.tab--large {
    --__op-tab-padding:var(--_op-tab-padding-large);
    --__op-tab-font-size:var(--_op-tab-font-large);
    --__op-tab-indicator-width:var(--_op-tab-indicator-width-large);
  }
}

.table {
  --_op-table-cell-height-default:calc(var(--op-size-unit)*11);
  --_op-table-cell-height-comfortable:calc(var(--op-size-unit)*16);
  --_op-table-cell-height-compact:calc(var(--op-size-unit)*8);
  --__op-table-cell-height:var(--_op-table-cell-height-default);
  border-collapse: collapse;
  border-radius: var(--op-radius-medium);
  box-shadow: var(--op-border-all) var(--op-color-border);
  contain: paint;
  table-layout: auto;
  width: 100%;
  thead {
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: inset var(--op-border-top) var(--op-color-border);
    color: var(--op-color-neutral-on-plus-eight);
    &:has(th input[type=checkbox]:checked) {
      background-color: var(--op-color-primary-plus-seven);
      color: var(--op-color-primary-on-plus-seven);
    }
  }
  th {
    font-weight: var(--op-font-weight-semi-bold);
    text-align: left;
  }
  tbody, tfoot {
    background-color: var(--op-color-neutral-plus-max);
    color: var(--op-color-neutral-on-plus-max);
  }
  td, th {
    font-size: var(--op-font-small);
    height: var(--__op-table-cell-height);
    padding-block: var(--op-space-2x-small);
    padding-inline: var(--op-space-small);
  }
  tfoot tr {
    box-shadow: var(--op-border-top) var(--op-color-border);
  }
  tr:not(:last-child) {
    box-shadow: inset var(--op-border-top) var(--op-color-border);
  }
  &.table--primary {
    thead {
      background-color: var(--op-color-primary-plus-seven);
      color: var(--op-color-primary-on-plus-seven);
    }
  }
  &.table--danger {
    thead {
      background-color: var(--op-color-alerts-danger-plus-seven);
      color: var(--op-color-alerts-danger-on-plus-seven);
    }
  }
  &.table--container {
    overflow-y: auto;
  }
  &.table--auto-layout {
    table-layout: auto;
  }
  &.table--fixed-layout {
    table-layout: fixed;
  }
  &.table--default-density {
    --__op-table-cell-height:var(--_op-table-cell-height-default);
  }
  &.table--comfortable-density {
    --__op-table-cell-height:var(--_op-table-cell-height-comfortable);
  }
  &.table--compact-density {
    --__op-table-cell-height:var(--_op-table-cell-height-compact);
  }
  &.table--even-striped {
    tbody tr:nth-child(2n) {
      background-color: var(--op-color-neutral-plus-seven);
      color: var(--op-color-neutral-on-plus-seven);
    }
  }
  &.table--odd-striped {
    tbody tr:nth-child(odd) {
      background-color: var(--op-color-neutral-plus-seven);
      color: var(--op-color-neutral-on-plus-seven);
    }
  }
  &.table--sticky-header thead {
    inset-block-start: 0;
    position: sticky;
  }
  &.table--sticky-footer tfoot {
    inset-block-end: 0;
    position: sticky;
  }
}

.tag {
  align-items: center;
  background-color: var(--op-color-neutral-plus-four);
  border-radius: var(--op-radius-pill);
  color: var(--op-color-neutral-on-plus-four);
  display: inline-flex;
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  justify-content: center;
  letter-spacing: var(--op-letter-spacing-label);
  line-height: var(--op-line-height-dense);
  padding: var(--op-space-2x-small);
  user-select: none;
  white-space: nowrap;
  .tag__label {
    padding-inline: var(--op-space-2x-small);
  }
  .btn--icon {
    --__op-btn-height:var(--op-font-medium);
    &:hover {
      background-color: var(--op-color-neutral-minus-three);
      box-shadow: none;
      color: var(--op-color-neutral-on-minus-three);
    }
    &:focus-visible {
      background-color: var(--op-color-neutral-base);
      box-shadow: var(--op-input-focus-neutral);
      color: var(--op-color-neutral-on-base);
    }
  }
  &.tag--primary {
    background-color: var(--op-color-primary-base);
    color: var(--op-color-primary-on-base);
    .btn--icon {
      color: var(--op-color-primary-on-base);
      &:hover {
        background-color: var(--op-color-primary-minus-three);
        box-shadow: none;
        color: var(--op-color-primary-on-minus-three);
      }
      &:focus-visible {
        background-color: var(--op-color-primary-base);
        box-shadow: var(--op-input-focus-primary);
        color: var(--op-color-primary-on-base);
      }
    }
  }
  &.tag--danger {
    background-color: var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-base);
    .btn--icon {
      color: var(--op-color-alerts-danger-on-base);
      &:hover {
        background-color: var(--op-color-alerts-danger-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-danger-on-minus-three);
      }
      &:focus-visible {
        background-color: var(--op-color-alerts-danger-base);
        box-shadow: var(--op-input-focus-danger);
        color: var(--op-color-alerts-danger-on-base);
      }
    }
  }
  &.tag--warning {
    background-color: var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-base);
    .btn--icon {
      color: var(--op-color-alerts-warning-on-base);
      &:hover {
        background-color: var(--op-color-alerts-warning-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-warning-on-minus-three);
      }
      &:focus-visible {
        background-color: var(--op-color-alerts-warning-base);
        box-shadow: var(--op-input-focus-warning);
        color: var(--op-color-alerts-warning-on-base);
      }
    }
  }
  &.tag--info {
    background-color: var(--op-color-alerts-info-base);
    color: var(--op-color-alerts-info-on-base);
    .btn--icon {
      color: var(--op-color-alerts-info-on-base);
      &:hover {
        background-color: var(--op-color-alerts-info-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-info-on-minus-three);
      }
      &:focus-visible {
        background-color: var(--op-color-alerts-info-base);
        box-shadow: var(--op-input-focus-info);
        color: var(--op-color-alerts-info-on-base);
      }
    }
  }
  &.tag--notice {
    background-color: var(--op-color-alerts-notice-base);
    color: var(--op-color-alerts-notice-on-base);
    .btn--icon {
      color: var(--op-color-alerts-notice-on-base);
      &:hover {
        background-color: var(--op-color-alerts-notice-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-notice-on-minus-three);
      }
      &:focus-visible {
        background-color: var(--op-color-alerts-notice-base);
        box-shadow: var(--op-input-focus-notice);
        color: var(--op-color-alerts-notice-on-base);
      }
    }
  }
}

.text-pair {
  --_op-text-pair-font-size-small:var(--op-font-small);
  --_op-text-pair-font-size-medium:var(--op-font-medium);
  --_op-text-pair-font-size-large:var(--op-font-large);
  --__op-text-pair-title-font-size:var(--_op-text-pair-font-size-medium);
  --__op-text-pair-subtitle-font-size:var(--_op-text-pair-font-size-small);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  &.text-pair--inline {
    align-items: baseline;
    flex-direction: row;
  }
  .text-pair__title {
    font-size: var(--__op-text-pair-title-font-size);
    font-weight: var(--op-font-weight-semi-bold);
    line-height: var(--op-line-height-dense);
    &.text-pair__title--small {
      --__op-text-pair-title-font-size:var(--_op-text-pair-font-size-small);
    }
    &.text-pair__title--medium {
      --__op-text-pair-title-font-size:var(--_op-text-pair-font-size-medium);
    }
    &.text-pair__title--large {
      --__op-text-pair-title-font-size:var(--_op-text-pair-font-size-large);
    }
  }
  .text-pair__subtitle {
    font-size: var(--__op-text-pair-subtitle-font-size);
    font-weight: var(--op-font-weight-normal);
    line-height: var(--op-line-height-dense);
    &.text-pair__subtitle--small {
      --__op-text-pair-subtitle-font-size:var(--_op-text-pair-font-size-small);
    }
    &.text-pair__subtitle--medium {
      --__op-text-pair-subtitle-font-size:var(--_op-text-pair-font-size-medium);
    }
    &.text-pair__subtitle--large {
      --__op-text-pair-subtitle-font-size:var(--_op-text-pair-font-size-large);
    }
  }
}

[data-tooltip-text] {
  --_op-tooltip-max-width:calc(var(--op-size-unit)*50);
  --_op-tooltip-padding:var(--op-space-x-small) var(--op-space-medium);
  --_op-tooltip-background-color:var(--op-color-neutral-minus-max);
  --_op-tooltip-text-color:var(--op-color-neutral-on-minus-max);
  --_op-tooltip-arrow-size:calc(var(--op-space-small)/2);
  --_op-tooltip-tooltip-offset:var(--op-space-x-small);
  --_op-tooltip-tooltip-radius:var(--op-radius-medium);
  --_op-tooltip-tooltip-font-size:var(--op-font-small);
  position: relative;
  &:after, &:before {
    opacity: var(--op-opacity-none);
    transition: var(--op-transition-tooltip);
    visibility: hidden;
  }
  &:before {
    background-color: var(--_op-tooltip-background-color);
    border-radius: var(--_op-tooltip-tooltip-radius);
    color: var(--_op-tooltip-text-color);
    content: attr(data-tooltip-text);
    display: block;
    font-family: var(--op-font-family);
    font-size: var(--_op-tooltip-tooltip-font-size);
    max-width: var(--_op-tooltip-max-width);
    overflow-wrap: break-word;
    padding: var(--_op-tooltip-padding);
    text-align: center;
    white-space: normal;
    width: max-content;
  }
  &:after, &:before {
    pointer-events: none;
    position: absolute;
    z-index: var(--op-z-index-tooltip);
  }
  &:after {
    border: var(--_op-tooltip-arrow-size) solid var(--_op-tooltip-background-color);
    content: "";
  }
  &:hover {
    &:after, &:before {
      opacity: var(--op-opacity-full);
      visibility: visible;
    }
  }
  &:not([data-tooltip-position]), &[data-tooltip-position=top] {
    &:after, &:before {
      inset-inline-start: 50%;
      transform: translateX(-50%);
    }
    &:before {
      margin-block-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
    &:after, &:before {
      inset-block-end: 100%;
    }
    &:after {
      border-color: var(--_op-tooltip-background-color) transparent transparent transparent;
      margin-block-end: calc(var(--_op-tooltip-arrow-size) * -1 + var(--_op-tooltip-tooltip-offset));
    }
  }
  &[data-tooltip-position=left] {
    &:after, &:before {
      inset-block-start: 50%;
      transform: translateY(-50%);
    }
    &:before {
      margin-inline-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
    &:after, &:before {
      inset-inline-end: 100%;
    }
    &:after {
      border-color: transparent transparent transparent var(--_op-tooltip-background-color);
      margin-inline-end: calc(var(--_op-tooltip-arrow-size) * -1 + var(--_op-tooltip-tooltip-offset));
    }
  }
  &[data-tooltip-position=bottom] {
    &:after, &:before {
      inset-inline-start: 50%;
      transform: translateX(-50%);
    }
    &:before {
      margin-block-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
    &:after, &:before {
      inset-block-start: 100%;
    }
    &:after {
      border-color: transparent transparent var(--_op-tooltip-background-color) transparent;
      margin-block-start: calc(var(--_op-tooltip-arrow-size) * -1 + var(--_op-tooltip-tooltip-offset));
    }
  }
  &[data-tooltip-position=right] {
    &:after, &:before {
      inset-block-start: 50%;
      transform: translateY(-50%);
    }
    &:before {
      margin-inline-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
    &:after, &:before {
      inset-inline-start: 100%;
    }
    &:after {
      border-color: transparent var(--_op-tooltip-background-color) transparent transparent;
      margin-inline-start: calc(var(--_op-tooltip-arrow-size) * -1 + var(--_op-tooltip-tooltip-offset));
    }
  }
}

/*
  See all icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
  Material Symbols supports:
  optical sizing set through: font-variation-settings: 'opsz' {20|40|48}
  font weight set through: font-variation-settings: 'wght' {100..700}
  fill set through: font-variation-settings: 'FILL' {0|1}
  emphasis set through: font-variation-settings: 'GRAD' {-50|0|200}
*/
/**
 * tom-select.css (v2.2.2)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
:root {
  --ts-pr-clear-button:	0;
  --ts-pr-caret:	0;
  --ts-pr-min:	.75rem;
}

.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-control {
  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 none !important;
  box-shadow: inset 0 0 12px 4px #fff;
}

.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder::after {
  content: "!";
  visibility: hidden;
}

.ts-wrapper.plugin-drag_drop .ui-sortable-helper {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.plugin-checkbox_options .option input {
  margin-right: 0.5rem;
}

.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}

.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2px;
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}

.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: max(var(--ts-pr-caret), 8px);
}

.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: #f8f8f8;
  border-radius: 3px 3px 0 0;
}

.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}

.ts-wrapper .dropdown-header-close:hover {
  color: black;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}

.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px 0;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}

.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}

.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
  color: transparent;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}

.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup:before {
  display: none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
  padding-right: 0 !important;
}

.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}

.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}

.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #d0d0d0;
  margin-left: 6px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #cacaca;
}

.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: white;
}

.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #d0d0d0;
  margin-right: 6px;
}

.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #cacaca;
}

.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: white;
}

.ts-wrapper {
  position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  font-smoothing: inherit;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}

.ts-wrapper.multi.has-items .ts-control {
  padding: 6px 8px 3px;
}

.full .ts-control {
  background-color: #fff;
}

.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}

.focus .ts-control {
  box-shadow: none;
}

.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}

.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0px solid #d0d0d0;
}

.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0px solid #cacaca;
}

.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: #7d7d7d;
  background: white;
  border: 0px solid white;
}

.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
  box-shadow: none !important;
}

.ts-control > input::-ms-clear {
  display: none;
}

.ts-control > input:focus {
  outline: none !important;
}

.has-items .ts-control > input {
  margin: 0px 4px !important;
}

.ts-control.rtl {
  text-align: right;
}

.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}

.ts-control.rtl .ts-control > input {
  margin: 0px 4px 0px -2px !important;
}

.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}

.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}

.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}

.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}

.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}

.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}

.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}

.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}

.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}

.ts-dropdown .active.create {
  color: #495c68;
}

.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}

.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}

.ts-dropdown .spinner:after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ts-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
  overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}


/* Design System Overrides */
.ts-wrapper {
  /* Control */
  .ts-control {
    min-height: var(--op-input-height-large);
    align-items: center;
    border: none;
    border-radius: var(--op-radius-large);
    background-color: var(--op-color-neutral-plus-max);
    box-shadow: var(--op-border-all) var(--op-color-border);
    color: var(--op-color-neutral-on-plus-max);
    font-size: var(--op-font-x-small);
    font-weight: var(--op-font-weight-light);
    line-height: var(--op-line-height-base);
  }
  /* Active control */
  &.dropdown-active {
    .ts-control {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
  /* Dropdown */
  .ts-dropdown {
    border: none;
    margin: 0;
    border-bottom-left-radius: var(--op-radius-large);
    border-bottom-right-radius: var(--op-radius-large);
    box-shadow: var(--op-border-all) var(--op-color-border);
    contain: paint;
    .option,
    .create {
      &.active {
        background-color: var(--op-color-primary-plus-seven);
        color: var(--op-color-primary-on-plus-seven);
      }
    }
  }
  /* Item */
  &.multi {
    .ts-control > div {
      padding: var(--op-space-3x-small) var(--op-space-x-small);
      border-radius: var(--op-radius-medium);
      margin: 0 var(--op-space-3x-small) var(--op-space-3x-small) 0;
      background-color: var(--op-color-primary-base);
      color: var(--op-color-primary-on-base);
      &.active {
        background-color: var(--op-color-primary-plus-two);
        color: var(--op-color-primary-on-plus-two);
      }
    }
  }
  /* Dropdown Arrow */
  &.single,
  &.multi,
  &.single.input-active,
  &.multi.input-active {
    .ts-control {
      /* Highly specific SVG data image for the dropdown arrow. */
      background-image: var(--op-encoded-images-dropdown-arrow);
      background-position-x: calc(100% - var(--op-space-small));
      background-position-y: center;
      background-repeat: no-repeat;
    }
  }
}

/* Design System Overrides */
.ts-wrapper {
  grid-column: 1/3;
  .ts-dropdown {
    .option.active,
    .option:hover {
      background-color: var(--op-color-neutral-plus-six);
      color: var(--op-color-neutral-on-plus-six);
    }
    overflow: hidden;
  }
  .ts-control {
    background: var(--op-color-neutral-plus-eight);
    color: var(--op-color-neutral-on-plus-eight);
    font-weight: var(--op-font-weight-normal);
    box-shadow: none;
    border: solid var(--op-border-width) var(--op-color-neutral-plus-four);
    min-height: var(--op-input-height-small);
  }
  &.multi,
  &.single {
    &.has-items .ts-control {
      padding-left: var(--op-space-small);
      padding-right: var(--op-space-small);
    }
    .ts-control {
      padding-left: var(--op-space-small);
      padding-right: var(--op-space-small);
      border-color: var(--op-color-border);
    }
    &.disabled .ts-control [data-value] {
      background: var(--op-color-background);
      color: var(--op-color-on-background);
      &,
      .remove {
        background: var(--op-color-background);
        color: var(--op-color-on-background);
      }
    }
  }
  &.single,
  &.multi,
  &.single.input-active,
  &.multi.input-active {
    .ts-control {
      /* Highly specific SVG data image for the dropdown arrow. */
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'%3e%3c/path%3e%3c/svg%3e");
      background-position-x: calc(100% - var(--op-space-small));
      background-position-y: center;
      background-repeat: no-repeat;
    }
  }
  &.single.input-active,
  &.multi.input-active {
    .ts-control {
      /* Primary highlight */
      background-color: var(--op-color-primary-plus-eight);
      color: var(--op-color-primary-on-plus-eight);
      border: var(--op-border-width) solid var(--op-color-primary-minus-two);
      box-shadow: none;
      outline: none;
    }
  }
  &.multi {
    .ts-control {
      min-height: var(--op-input-height-medium);
      [data-value] {
        border-color: var(--op-color-primary-minus-three);
        border-radius: var(--op-radius-medium);
        background-color: var(--op-color-primary-minus-three);
        color: var(--op-color-primary-on-minus-three);
        &.active {
          background-color: var(--op-color-primary-minus-five);
          color: var(--op-color-primary-on-minus-one);
        }
      }
      & > div {
        margin: 0 var(--op-space-2x-small) var(--op-space-2x-small) 0;
      }
    }
  }
  &.multi.no-icon {
    .ts-control {
      background-image: none;
    }
    &.input-active {
      .ts-control {
        background-image: none;
      }
    }
  }
}

.ts-dropdown .spinner::after {
  display: none;
} /* Optics styles the .spinner class already */
/* Everything above this point is getting moved to core */
.ts-wrapper {
  input {
    color: var(--op-color-primary-on-plus-eight);
    font-size: var(--op-font-x-small);
    font-weight: var(--op-font-weight-normal);
  }
  .ts-dropdown {
    --op-tom-select-dropdown-top-indent: 98%;
    background-color: var(--op-color-neutral-plus-max);
    color: var(--op-color-neutral-on-plus-max);
    top: var(--op-tom-select-dropdown-top-indent);
    .create {
      background-color: var(--op-color-neutral-plus-six);
      color: var(--op-color-on-background);
    }
    border: var(--op-border-width) solid var(--op-color-primary-minus-three);
    border-radius: 0 0 var(--op-radius-large) var(--op-radius-large);
    box-shadow: var(--op-dropdown-box-shadow);
    .ts-dropdown__tabular-header {
      display: flex;
      justify-content: space-between;
      padding: var(--op-space-x-small);
      padding-right: var(--op-space-large);
      background: var(--op-color-neutral-plus-six);
      color: var(--op-color-neutral-on-plus-six);
      font-weight: var(--op-font-weight-semi-bold);
      z-index: 1;
    }
    .ts-dropdown__tabular-column--large {
      --op-catalog-item-dropdown-name-column-width: 3;
      flex: var(--op-catalog-item-dropdown-name-column-width);
    }
    .ts-dropdown__tabular-column--medium {
      --medium-column-width: 2;
      flex: var(--medium-column-width);
    }
    .ts-dropdown__tabular-column--small {
      --op-catalog-item-dropdown-unit-column-width: 1;
      flex: var(--op-catalog-item-dropdown-unit-column-width);
      .badge {
        width: fit-content;
      }
    }
  }
  .ts-dropdown-content {
    border-radius: var(--op-radius-medium);
    padding-top: var(--op-space-x-small);
    padding-bottom: var(--op-space-x-small);
  }
  .tom-select__option.option {
    background-color: var(--op-color-neutral-plus-max);
    color: var(--op-color-neutral-on-plus-max);
    font-size: var(--op-font-medium);
    padding: var(--op-space-x-small) var(--op-space-large);
    &:hover {
      background-color: var(--op-color-neutral-plus-six);
      color: var(--op-color-neutral-on-plus-three);
    }
    &.selected {
      background-color: var(--op-color-primary-minus-three);
      color: var(--op-color-neutral-plus-max);
    }
  }
  &.multi {
    .ts-control {
      .item {
        border-radius: var(--op-radius-pill);
        padding: var(--op-space-2x-small) var(--op-space-x-small);
      }
    }
  }
}

.tom-select--no-icon {
  .ts-wrapper {
    &.single,
    &.multi,
    &.single.input-active,
    &.multi.input-active {
      .ts-control {
        background-image: none;
      }
    }
  }
}

.tom-select--tags-area {
  --tags-area-height: 150px;
  &.dropdown-active {
    .ts-control {
      border-radius: var(--op-radius-medium) var(--op-radius-medium) 0 0;
      height: auto;
      max-height: var(--tags-area-height);
      overflow-y: scroll;
      overflow-x: hidden;
    }
  }
  &:not(.dropdown-active) {
    .ts-control {
      border-radius: var(--op-radius-medium);
      height: auto;
      max-height: var(--tags-area-height);
      overflow-y: scroll;
      overflow-x: hidden;
    }
  }
}

.tom-select--large {
  .ts-wrapper {
    .ts-control {
      height: var(--op-input-height-x-large);
      /* --op-breakpoint-small */
      @media (max-width: 768px) {
        height: var(--op-input-height-large);
      }
      input {
        --op-tom-select--large-line-height: 20px;
        font-size: var(--op-font-medium);
        /*
        Shoelace is using the important flag to set line height
        so we have to follow suit to override 
        */
        line-height: var(--op-tom-select--large-line-height) !important;
      }
    }
    .ts-dropdown-content {
      border-radius: var(--op-radius-large);
    }
  }
  &.tom-select--catalog-item-select:not(.tom-select--template-form) {
    .ts-wrapper:not(.dropdown-active) {
      .ts-control {
        border-radius: var(--op-radius-large);
      }
    }
  }
}

.tom-select--medium {
  .ts-wrapper {
    .ts-control {
      height: var(--op-input-height-medium);
      padding-block: 0;
      font-size: var(--op-font-small);
      border-radius: var(--op-radius-medium);
      input {
        font-size: var(--op-font-small);
      }
      /* --op-breakpoint-small */
      @media (max-width: 768px) {
        border-radius: var(--op-radius-large);
      }
    }
    &.single {
      .ts-control {
        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
    }
  }
}

.tom-select--small:not(tom-select--no-icon) {
  &.single,
  &.multi,
  &.single.input-active,
  &.multi.input-active {
    .ts-control {
      /* Highly specific SVG data image for the dropdown arrow. */
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'%3e%3c/path%3e%3c/svg%3e");
      background-size: calc(3 * var(--op-size-unit)); /* 12px */
      background-position-x: calc(100% - var(--op-space-small));
      background-position-y: center;
      background-repeat: no-repeat;
    }
  }
}

.tom-select--small {
  .ts-wrapper {
    .tom-select__option.option {
      font-size: var(--op-font-x-small);
      padding: var(--op-space-2x-small) var(--op-space-small);
    }
    &.dropdown-active {
      .ts-control {
        border-radius: var(--op-radius-medium) var(--op-radius-medium) 0 0;
      }
    }
    &:not(.dropdown-active) {
      .ts-control {
        border-radius: var(--op-radius-medium);
      }
    }
    &.tom_select {
      &.single {
        .ts-control {
          padding-top: 0;
          padding-bottom: 0;
          font-size: var(--op-font-x-small);
          height: var(--op-input-height-small);
          input {
            --min-width: 8rem;
            min-width: var(--min-width);
          }
        }
      }
      &.single {
        .ts-control {
          .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            white-space: nowrap;
            overflow: hidden;
            width: 85%;
          }
        }
      }
    }
  }
}

.tom-select--template-form {
  flex: 1;
  padding: 0;
  padding-top: var(--op-space-small);
  .ts-wrapper {
    .ts-control {
      border-radius: var(--op-radius-large) 0 0 var(--op-radius-large);
    }
    &.dropdown-active {
      .ts-control {
        border-radius: var(--op-radius-large) 0 0 0;
      }
    }
  }
}

.one-time-item-modal--catalog-selection-area {
  padding: var(--op-space-small) var(--op-space-medium);
  border-radius: var(--op-radius-large);
  background: var(--op-color-primary-plus-eight);
  align-items: flex-start;
  gap: var(--op-space-medium);
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.tom-select--one-time-item-modal {
  .item {
    font-size: var(--op-font-medium); /* Needed to adjust the size of the selected tom-select catalog item. */
  }
}

.tom-select--catalog-item-select {
  .ts-wrapper {
    .ts-dropdown {
      .option.active,
      .option:hover {
        background-color: var(--op-color-primary-plus-eight);
        color: var(--op-color-primary-on-plus-eight);
      }
    }
  }
  .ts-wrapper {
    .ts-dropdown {
      --op-catalog-item-tom-select-dropdown-top-indent: 98%;
      background-color: var(--op-color-background);
      color: var(--op-color-on-background);
      top: var(--op-catalog-item-tom-select-dropdown-top-indent);
      .active,
      .option:hover {
        background-color: var(--op-color-primary-plus-eight);
        color: var(--op-color-primary-on-plus-eight);
      }
      border: var(--op-border-width) solid var(--op-color-primary-minus-three);
      border-radius: 0 0 var(--op-radius-large) var(--op-radius-large);
    }
    .ts-dropdown-content {
      border-radius: 0 0 var(--op-radius-medium) var(--op-radius-medium);
      padding: 0;
    }
    .tom-select__option.option {
      align-items: center;
      font-size: var(--op-font-small);
      background-color: var(--op-color-primary-plus-max);
      color: var(--op-color-primary-on-plus-max);
      border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
      padding: var(--op-space-x-small);
      &:hover {
        background-color: var(--op-color-primary-plus-eight);
        color: var(--op-color-primary-on-plus-eight);
      }
    }
    &.tom-select--large {
      .ts-wrapper {
        .ts-dropdown {
          border-radius: 0 0 var(--op-radius-large) var(--op-radius-large);
        }
        .ts-dropdown-content {
          border-radius: 0 0 var(--op-radius-large) var(--op-radius-large);
        }
      }
    }
  }
}

.ts-wrapper--hidden-dropdown {
  &.dropdown-active .ts-control {
    border-bottom-left-radius: var(--op-radius-large);
    border-bottom-right-radius: var(--op-radius-large);
  }
  .ts-control {
    background-image: none !important;
  }
  .ts-dropdown {
    display: none !important;
  }
}

/* Need the explicit structure here to avoid specificity issues */
.tom-select--property-groups {
  .ts-wrapper {
    .ts-control {
      border-top: 0;
    }
    &.dropdown-active {
      .ts-control {
        border-top: var(--op-border-width) solid var(--op-color-primary-base);
        border-radius: 0;
      }
    }
    &:not(.dropdown-active) {
      .ts-control {
        border-radius: 0 0 var(--op-radius-medium) var(--op-radius-medium);
      }
    }
  }
}

:root {
  --op-color-primary-h: 201;
  --op-color-primary-s: 67%;
  --op-color-primary-l: 29%;
  --op-color-neutral-h: var(--op-color-primary-h);
  --op-color-neutral-s: 4%;
  --op-color-neutral-l: 29%;
  --op-color-warning-h: 42;
  --op-color-warning-s: 90%;
  --op-color-warning-l: 74%;
  --op-color-danger-h: 0;
  --op-color-danger-s: 100%;
  --op-color-danger-l: 34%;
  --op-color-aspire-h: 211;
  --op-color-aspire-s: 57%;
  --op-color-aspire-l: 33%;
  --op-font-2x-small: 1rem;
  --pi-letter-spacing-denser: 0;
  --pi-letter-spacing-dense: 0.02rem;
  --pi-letter-spacing-normal: 0.04rem;
  --pi-letter-spacing-loose: 0.08rem;
  --pi-letter-spacing-looser: 0.1rem;
  --op-color-primary-luminosity-86: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 86%);
  --op-color-neutral-luminosity-86: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 86%);
  --op-color-alerts-danger-on-plus-eight-alt: hsl(0, 100%, 24%);
  --op-color-aspire-base: hsl(var(--op-color-aspire-h), var(--op-color-aspire-s), var(--op-color-aspire-l));
  --op-color-aspire-minus-1: hsl(var(--op-color-aspire-h), var(--op-color-aspire-s), 24%);
  --op-color-aspire-on-base: hsl(var(--op-color-aspire-h), var(--op-color-aspire-s), 98%);
  --op-color-aspire-on-minus-1: hsl(var(--op-color-aspire-h), var(--op-color-aspire-s), 90%);
  --op-color-badge-purple: hsl(263, 19%, 35%);
  --op-color-badge-yellow: hsl(43, 100%, 27%);
  --op-color-badge-teal: hsl(180, 91%, 27%);
  --op-color-badge-green: hsl(108, 91%, 27%);
  --op-input-height-3x-small: 2.4rem;
  --op-input-height-2x-small: 2.8rem;
  --op-input-height-x-small: 3rem;
  --op-input-height-small: 3.2rem;
  --op-input-height-medium: 4rem;
  --op-input-height-large: 4.4rem;
  --op-input-height-x-large: 4.8rem;
  --op-border-width-medium: 1.5px;
  --op-dialog-small-width: 40rem;
  --op-dialog-default-width: 60rem;
  --op-dialog-large-width: 60rem;
  --op-dialog-x-large-width: 72rem;
  --op-dialog-2x-large-width: 94rem;
  --op-dialog-3x-large-width: 116rem;
  --op-drawer-small-width: 32rem;
  --op-drawer-default-width: 48rem;
  --op-drawer-large-width: 60rem;
  --op-drawer-x-large-width: 72rem;
  --op-drawer-2x-large-width: 94rem;
  --op-drawer-3x-large-width: 106rem;
  --op-shadow-medium-bottom: 0px 4px 8px -4px hsla(0, 0%, 0%, 0.15);
  --op-markup-overlay-shadow: 0px 0.1rem 0px rgba(0, 0, 0, 0.04), 0px 0.8rem 1.6rem var(--op-color-shadow);
  --op-input-shadow: 0rem 0.1rem 0.2rem var(--op-color-shadow);
  --op-shadow-infinite: rgba(0, 0, 0, 0.4) 0px 0px 0px 9999px;
  --op-control-panel-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15), 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
  --op-clippath-form-indeterminate: polygon(10% 35%, 90% 35%, 90% 65%, 10% 65%);
  --op-highlighted-ui: 0px 1px 0px hsla(var(--op-color-primary-h), var(--op-color-primary-s), 0%, 0.08),
    0px 1px 8px hsla(var(--op-color-primary-h), var(--op-color-primary-s), 32%, 0.08),
    0px 4px 4px hsla(var(--op-color-primary-h), var(--op-color-primary-s), 90%, 0.22),
    inset 0px 1px 0px hsla(var(--op-color-primary-h), var(--op-color-primary-s), 100%, 0.8);
  --op-color-shadow: rgba(0, 0, 0, 0.08);
  --op-color-border: var(--op-color-neutral-plus-four);
  --op-border-top-thin: inset 0 var(--op-border-width) 0 0 var(--op-color-border);
  --op-border-bottom-thin: inset 0 calc(-1 * var(--op-border-width)) 0 0 var(--op-color-border);
  --op-border-left-thin: inset var(--op-border-width) 0 0 0 var(--op-color-border);
  --op-border-right-thin: inset calc(-1 * var(--op-border-width)) 0 0 0 var(--op-color-border);
  --op-border-all-thin: 0 0 0 var(--op-border-width) var(--op-color-border);
  --op-border-all-large: 0 0 0 var(--op-border-width-large);
  --op-dropdown-box-shadow: 0 2px 8px hsl(201 4% 84% / 44%);
  --op-markup-panel-width: 28rem;
  --op-markup-left-panel-header-height: 3.6rem;
  --op-markup-right-panel-header-height: 4rem;
  --op-markup-panel-header-height: 3.6rem;
  --op-markup-left-panel-footer-height: 4.4rem;
  --op-collapsible-side-panel-footer-height: 7rem;
  --op-main-content-header-height: 13.1rem;
  --op-main-content-header-height--large: 14.7rem;
  --op-main-content-header-height--small: 8.7rem;
  --op-main-content-header-height--mobile-large: 19.3rem;
  --op-scale-input-width: 8rem;
  --op-pattern-symbol-size: calc(var(--op-size-unit) * 12);
  --op-background-blur-small: blur(0.4rem);
  --op-background-blur-medium: blur(0.8rem);
  --op-markup-view-editor-padding: var(--op-space-medium);
  --op-markup-overlay-opaque-color: hsla(var(--op-color-neutral-h), var(--op-color-neutral-s), 98%, 0.88);
  --op-markup-overlay-primary-opaque-color: hsla(var(--op-color-primary-h), var(--op-color-primary-s), 29%, 0.6);
  --op-mobile-markup-background: rgba(244, 245, 245, 0.70);
  --pi-bottom-nav-rail-height: 8.8rem;
  --pi-breakpoint-markup-navbar: 1420px;
  --op-breakpoint-2x-small: 390px;
  --op-color-surface-complement: var(--op-color-on-background);
  --op-color-surface-complement-alt: var(--op-color-on-background-alt);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme-mode=light]) {
    --op-markup-overlay-opaque-color: hsla(var(--op-color-neutral-h), var(--op-color-neutral-s), 2%, 0.88);
    --op-color-aspire-minus-1: hsl(var(--op-color-aspire-h), var(--op-color-aspire-s), 80%);
    --op-color-aspire-on-minus-1: hsl(var(--op-color-aspire-h), var(--op-color-aspire-s), 10%);
    --op-highlighted-ui: 0px 1px 0px hsla(var(--op-color-primary-h), var(--op-color-primary-s), 0%, 0.16),
      0px 2px 8px hsla(var(--op-color-primary-h), var(--op-color-primary-s), 0%, 0.16),
      0px 8px 28px hsla(var(--op-color-primary-h), var(--op-color-primary-s), 90%, 0.04),
      inset 0px 1px 0px hsla(var(--op-color-primary-h), var(--op-color-primary-s), 100%, 0.04);
  }
}
:root[data-theme-mode=dark] {
  --op-markup-overlay-opaque-color: hsla(var(--op-color-neutral-h), var(--op-color-neutral-s), 2%, 0.88);
  --op-color-aspire-minus-1: hsl(var(--op-color-aspire-h), var(--op-color-aspire-s), 80%);
  --op-color-aspire-on-minus-1: hsl(var(--op-color-aspire-h), var(--op-color-aspire-s), 10%);
  --op-highlighted-ui: 0px 1px 0px hsla(var(--op-color-primary-h), var(--op-color-primary-s), 0%, 0.16),
    0px 2px 8px hsla(var(--op-color-primary-h), var(--op-color-primary-s), 0%, 0.16),
    0px 8px 28px hsla(var(--op-color-primary-h), var(--op-color-primary-s), 90%, 0.04),
    inset 0px 1px 0px hsla(var(--op-color-primary-h), var(--op-color-primary-s), 100%, 0.04);
}

:root {
  -webkit-font-smoothing: antialiased;
  --main-content-height: 100dvh;
  --pi-font-family-bold-report: 'Source Sans 3', var(--op-font-family);
  --pi-item-panel-inner-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12) inset,
                                0 0 6px 1px rgba(0, 0, 0, 0.10) inset,
                                0 0 0 1px var(--op-color-neutral-plus-five) inset;
}

:focus-visible {
  outline: none;
  box-shadow: var(--op-input-focus-primary);
}

body {
  overflow: hidden;
  height: 100dvh;
  min-height: 100dvh;
}

.body--overflow {
  overflow: scroll;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
  -webkit-border-radius: none;
}

input[type=file] {
  display: none;
}

input[type=radio] {
  accent-color: var(--op-color-primary-minus-three);
}

a {
  color: var(--op-color-primary-on-plus-five);
}

h3 {
  font-size: var(--op-font-x-large);
}

h4 {
  font-size: var(--op-font-large);
}

small {
  font-size: var(--op-font-x-small);
}

b {
  font-weight: var(--op-font-weight-semi-bold);
}

p {
  margin: 0;
}

ul {
  padding-inline-start: var(--op-space-x-large);
}

.navigation-layout {
  display: flex;
  height: 100%;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .navigation-layout {
    flex-direction: column-reverse;
  }
  .navigation-layout .main-content {
    height: calc(var(--main-content-height) - var(--pi-bottom-nav-rail-height));
  }
}

.main-content {
  flex-grow: 1;
  height: var(--main-content-height);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.main-content .main-content__flex-wrapper {
  padding: var(--op-space-x-large) var(--op-space-3x-large);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-large);
}
.main-content .main-content__flex-wrapper .thumbnail-card__wrapper {
  padding: var(--op-space-medium) var(--op-space-2x-large);
}

.main-content--styleguide {
  overflow-y: auto;
  height: 100%;
}

.main-content--small-header {
  --op-main-content-header-height: var(--op-main-content-header-height--small);
}

.main-content--large-header {
  --op-main-content-header-height: var(--op-main-content-header-height--large);
}

.main-content__header {
  position: relative;
  height: var(--op-main-content-header-height);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  padding: var(--op-space-large) var(--op-space-3x-large) 0 var(--op-space-3x-large);
  border-bottom: var(--op-border-width) solid var(--op-color-border);
  box-shadow: var(--op-shadow-medium-bottom);
  background-color: var(--op-color-neutral-plus-six);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .main-content__header {
    background: var(--op-color-neutral-plus-max);
    gap: var(--op-space-small);
    justify-content: unset;
    padding: var(--op-space-large) var(--op-space-large) var(--op-space-medium) var(--op-space-large);
  }
}
.main-content__header .main-content__header__mobile-page-name {
  font-size: var(--op-font-2x-large);
  font-weight: var(--op-font-weight-semi-bold);
}
.main-content__header.main-content__header--no-tabs {
  gap: var(--op-space-small);
  justify-content: flex-start;
  padding-bottom: var(--op-space-small);
}
.main-content__header.main-content__header--short {
  height: unset;
  padding-bottom: var(--op-space-2x-large);
}
.main-content__header .organization-show-page__header {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.main-content__header .organization-show-page__header .breadcrumb-heading {
  display: flex;
  flex: 1;
  font-size: var(--op-font-3x-large);
}
.main-content__header .organization-show-page__header .breadcrumb-heading .breadcrumb-heading__organization {
  color: var(--op-color-neutral-on-plus-six-alt);
}
.main-content__header .organization-show-page__header .breadcrumb-heading .breadcrumb-heading__branch {
  width: 0;
  flex: 1;
  padding-left: var(--op-space-small);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.main-content__body {
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
  height: 100%;
  overflow-y: auto;
}
.main-content__body.no-scrolling {
  overflow-y: hidden;
}

.main-content__table-wrapper {
  padding: var(--op-space-medium) var(--op-space-3x-large);
  gap: var(--op-space-large);
  display: grid;
}

.error-message {
  background-color: var(--op-color-alerts-danger-plus-eight);
  padding: var(--op-space-small);
  border: solid var(--op-border-width) var(--op-color-alerts-danger-plus-base);
  color: var(--op-color-alerts-danger-on-plus-eight);
  border-radius: var(--op-radius-medium);
}
.error-message:empty {
  display: none;
}

.error-message__body {
  font-size: var(--op-font-small);
}

:root {
  --scrollbar-width: 1.2rem;
}
:root ::-webkit-scrollbar-corner {
  background: transparent;
}
:root ::-webkit-scrollbar-thumb {
  background-color: var(--op-color-neutral-plus-six);
  border: var(--op-border-width-x-large) solid transparent;
  -webkit-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
  border-radius: var(--op-radius-large);
}
:root ::-webkit-scrollbar-thumb:hover {
  background-color: var(--op-color-neutral-plus-four);
}
:root ::-webkit-scrollbar-button {
  display: none;
}

:root,
:host,
.sl-theme-light {
  color-scheme: light;
  --sl-color-gray-50: hsl(0 0% 97.5%);
  --sl-color-gray-100: hsl(240 4.8% 95.9%);
  --sl-color-gray-200: hsl(240 5.9% 90%);
  --sl-color-gray-300: hsl(240 4.9% 83.9%);
  --sl-color-gray-400: hsl(240 5% 64.9%);
  --sl-color-gray-500: hsl(240 3.8% 46.1%);
  --sl-color-gray-600: hsl(240 5.2% 33.9%);
  --sl-color-gray-700: hsl(240 5.3% 26.1%);
  --sl-color-gray-800: hsl(240 3.7% 15.9%);
  --sl-color-gray-900: hsl(240 5.9% 10%);
  --sl-color-gray-950: hsl(240 7.3% 8%);
  --sl-color-red-50: hsl(0 85.7% 97.3%);
  --sl-color-red-100: hsl(0 93.3% 94.1%);
  --sl-color-red-200: hsl(0 96.3% 89.4%);
  --sl-color-red-300: hsl(0 93.5% 81.8%);
  --sl-color-red-400: hsl(0 90.6% 70.8%);
  --sl-color-red-500: hsl(0 84.2% 60.2%);
  --sl-color-red-600: hsl(0 72.2% 50.6%);
  --sl-color-red-700: hsl(0 73.7% 41.8%);
  --sl-color-red-800: hsl(0 70% 35.3%);
  --sl-color-red-900: hsl(0 62.8% 30.6%);
  --sl-color-red-950: hsl(0 60% 19.6%);
  --sl-color-orange-50: hsl(33.3 100% 96.5%);
  --sl-color-orange-100: hsl(34.3 100% 91.8%);
  --sl-color-orange-200: hsl(32.1 97.7% 83.1%);
  --sl-color-orange-300: hsl(30.7 97.2% 72.4%);
  --sl-color-orange-400: hsl(27 96% 61%);
  --sl-color-orange-500: hsl(24.6 95% 53.1%);
  --sl-color-orange-600: hsl(20.5 90.2% 48.2%);
  --sl-color-orange-700: hsl(17.5 88.3% 40.4%);
  --sl-color-orange-800: hsl(15 79.1% 33.7%);
  --sl-color-orange-900: hsl(15.3 74.6% 27.8%);
  --sl-color-orange-950: hsl(15.2 69.1% 19%);
  --sl-color-amber-50: hsl(48 100% 96.1%);
  --sl-color-amber-100: hsl(48 96.5% 88.8%);
  --sl-color-amber-200: hsl(48 96.6% 76.7%);
  --sl-color-amber-300: hsl(45.9 96.7% 64.5%);
  --sl-color-amber-400: hsl(43.3 96.4% 56.3%);
  --sl-color-amber-500: hsl(37.7 92.1% 50.2%);
  --sl-color-amber-600: hsl(32.1 94.6% 43.7%);
  --sl-color-amber-700: hsl(26 90.5% 37.1%);
  --sl-color-amber-800: hsl(22.7 82.5% 31.4%);
  --sl-color-amber-900: hsl(21.7 77.8% 26.5%);
  --sl-color-amber-950: hsl(22.9 74.1% 16.7%);
  --sl-color-yellow-50: hsl(54.5 91.7% 95.3%);
  --sl-color-yellow-100: hsl(54.9 96.7% 88%);
  --sl-color-yellow-200: hsl(52.8 98.3% 76.9%);
  --sl-color-yellow-300: hsl(50.4 97.8% 63.5%);
  --sl-color-yellow-400: hsl(47.9 95.8% 53.1%);
  --sl-color-yellow-500: hsl(45.4 93.4% 47.5%);
  --sl-color-yellow-600: hsl(40.6 96.1% 40.4%);
  --sl-color-yellow-700: hsl(35.5 91.7% 32.9%);
  --sl-color-yellow-800: hsl(31.8 81% 28.8%);
  --sl-color-yellow-900: hsl(28.4 72.5% 25.7%);
  --sl-color-yellow-950: hsl(33.1 69% 13.9%);
  --sl-color-lime-50: hsl(78.3 92% 95.1%);
  --sl-color-lime-100: hsl(79.6 89.1% 89.2%);
  --sl-color-lime-200: hsl(80.9 88.5% 79.6%);
  --sl-color-lime-300: hsl(82 84.5% 67.1%);
  --sl-color-lime-400: hsl(82.7 78% 55.5%);
  --sl-color-lime-500: hsl(83.7 80.5% 44.3%);
  --sl-color-lime-600: hsl(84.8 85.2% 34.5%);
  --sl-color-lime-700: hsl(85.9 78.4% 27.3%);
  --sl-color-lime-800: hsl(86.3 69% 22.7%);
  --sl-color-lime-900: hsl(87.6 61.2% 20.2%);
  --sl-color-lime-950: hsl(86.5 60.6% 13.9%);
  --sl-color-green-50: hsl(138.5 76.5% 96.7%);
  --sl-color-green-100: hsl(140.6 84.2% 92.5%);
  --sl-color-green-200: hsl(141 78.9% 85.1%);
  --sl-color-green-300: hsl(141.7 76.6% 73.1%);
  --sl-color-green-400: hsl(141.9 69.2% 58%);
  --sl-color-green-500: hsl(142.1 70.6% 45.3%);
  --sl-color-green-600: hsl(142.1 76.2% 36.3%);
  --sl-color-green-700: hsl(142.4 71.8% 29.2%);
  --sl-color-green-800: hsl(142.8 64.2% 24.1%);
  --sl-color-green-900: hsl(143.8 61.2% 20.2%);
  --sl-color-green-950: hsl(144.3 60.7% 12%);
  --sl-color-emerald-50: hsl(151.8 81% 95.9%);
  --sl-color-emerald-100: hsl(149.3 80.4% 90%);
  --sl-color-emerald-200: hsl(152.4 76% 80.4%);
  --sl-color-emerald-300: hsl(156.2 71.6% 66.9%);
  --sl-color-emerald-400: hsl(158.1 64.4% 51.6%);
  --sl-color-emerald-500: hsl(160.1 84.1% 39.4%);
  --sl-color-emerald-600: hsl(161.4 93.5% 30.4%);
  --sl-color-emerald-700: hsl(162.9 93.5% 24.3%);
  --sl-color-emerald-800: hsl(163.1 88.1% 19.8%);
  --sl-color-emerald-900: hsl(164.2 85.7% 16.5%);
  --sl-color-emerald-950: hsl(164.3 87.5% 9.4%);
  --sl-color-teal-50: hsl(166.2 76.5% 96.7%);
  --sl-color-teal-100: hsl(167.2 85.5% 89.2%);
  --sl-color-teal-200: hsl(168.4 83.8% 78.2%);
  --sl-color-teal-300: hsl(170.6 76.9% 64.3%);
  --sl-color-teal-400: hsl(172.5 66% 50.4%);
  --sl-color-teal-500: hsl(173.4 80.4% 40%);
  --sl-color-teal-600: hsl(174.7 83.9% 31.6%);
  --sl-color-teal-700: hsl(175.3 77.4% 26.1%);
  --sl-color-teal-800: hsl(176.1 69.4% 21.8%);
  --sl-color-teal-900: hsl(175.9 60.8% 19%);
  --sl-color-teal-950: hsl(176.5 58.6% 11.4%);
  --sl-color-cyan-50: hsl(183.2 100% 96.3%);
  --sl-color-cyan-100: hsl(185.1 95.9% 90.4%);
  --sl-color-cyan-200: hsl(186.2 93.5% 81.8%);
  --sl-color-cyan-300: hsl(187 92.4% 69%);
  --sl-color-cyan-400: hsl(187.9 85.7% 53.3%);
  --sl-color-cyan-500: hsl(188.7 94.5% 42.7%);
  --sl-color-cyan-600: hsl(191.6 91.4% 36.5%);
  --sl-color-cyan-700: hsl(192.9 82.3% 31%);
  --sl-color-cyan-800: hsl(194.4 69.6% 27.1%);
  --sl-color-cyan-900: hsl(196.4 63.6% 23.7%);
  --sl-color-cyan-950: hsl(196.8 61% 16.1%);
  --sl-color-sky-50: hsl(204 100% 97.1%);
  --sl-color-sky-100: hsl(204 93.8% 93.7%);
  --sl-color-sky-200: hsl(200.6 94.4% 86.1%);
  --sl-color-sky-300: hsl(199.4 95.5% 73.9%);
  --sl-color-sky-400: hsl(198.4 93.2% 59.6%);
  --sl-color-sky-500: hsl(198.6 88.7% 48.4%);
  --sl-color-sky-600: hsl(200.4 98% 39.4%);
  --sl-color-sky-700: hsl(201.3 96.3% 32.2%);
  --sl-color-sky-800: hsl(201 90% 27.5%);
  --sl-color-sky-900: hsl(202 80.3% 23.9%);
  --sl-color-sky-950: hsl(202.3 73.8% 16.5%);
  --sl-color-blue-50: hsl(213.8 100% 96.9%);
  --sl-color-blue-100: hsl(214.3 94.6% 92.7%);
  --sl-color-blue-200: hsl(213.3 96.9% 87.3%);
  --sl-color-blue-300: hsl(211.7 96.4% 78.4%);
  --sl-color-blue-400: hsl(213.1 93.9% 67.8%);
  --sl-color-blue-500: hsl(217.2 91.2% 59.8%);
  --sl-color-blue-600: hsl(221.2 83.2% 53.3%);
  --sl-color-blue-700: hsl(224.3 76.3% 48%);
  --sl-color-blue-800: hsl(225.9 70.7% 40.2%);
  --sl-color-blue-900: hsl(224.4 64.3% 32.9%);
  --sl-color-blue-950: hsl(226.2 55.3% 18.4%);
  --sl-color-indigo-50: hsl(225.9 100% 96.7%);
  --sl-color-indigo-100: hsl(226.5 100% 93.9%);
  --sl-color-indigo-200: hsl(228 96.5% 88.8%);
  --sl-color-indigo-300: hsl(229.7 93.5% 81.8%);
  --sl-color-indigo-400: hsl(234.5 89.5% 73.9%);
  --sl-color-indigo-500: hsl(238.7 83.5% 66.7%);
  --sl-color-indigo-600: hsl(243.4 75.4% 58.6%);
  --sl-color-indigo-700: hsl(244.5 57.9% 50.6%);
  --sl-color-indigo-800: hsl(243.7 54.5% 41.4%);
  --sl-color-indigo-900: hsl(242.2 47.4% 34.3%);
  --sl-color-indigo-950: hsl(243.5 43.6% 22.9%);
  --sl-color-violet-50: hsl(250 100% 97.6%);
  --sl-color-violet-100: hsl(251.4 91.3% 95.5%);
  --sl-color-violet-200: hsl(250.5 95.2% 91.8%);
  --sl-color-violet-300: hsl(252.5 94.7% 85.1%);
  --sl-color-violet-400: hsl(255.1 91.7% 76.3%);
  --sl-color-violet-500: hsl(258.3 89.5% 66.3%);
  --sl-color-violet-600: hsl(262.1 83.3% 57.8%);
  --sl-color-violet-700: hsl(263.4 70% 50.4%);
  --sl-color-violet-800: hsl(263.4 69.3% 42.2%);
  --sl-color-violet-900: hsl(263.5 67.4% 34.9%);
  --sl-color-violet-950: hsl(265.1 61.5% 21.4%);
  --sl-color-purple-50: hsl(270 100% 98%);
  --sl-color-purple-100: hsl(268.7 100% 95.5%);
  --sl-color-purple-200: hsl(268.6 100% 91.8%);
  --sl-color-purple-300: hsl(269.2 97.4% 85.1%);
  --sl-color-purple-400: hsl(270 95.2% 75.3%);
  --sl-color-purple-500: hsl(270.7 91% 65.1%);
  --sl-color-purple-600: hsl(271.5 81.3% 55.9%);
  --sl-color-purple-700: hsl(272.1 71.7% 47.1%);
  --sl-color-purple-800: hsl(272.9 67.2% 39.4%);
  --sl-color-purple-900: hsl(273.6 65.6% 32%);
  --sl-color-purple-950: hsl(276 59.5% 16.5%);
  --sl-color-fuchsia-50: hsl(289.1 100% 97.8%);
  --sl-color-fuchsia-100: hsl(287 100% 95.5%);
  --sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%);
  --sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%);
  --sl-color-fuchsia-400: hsl(292 91.4% 72.5%);
  --sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%);
  --sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%);
  --sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%);
  --sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%);
  --sl-color-fuchsia-900: hsl(296.7 63.6% 28%);
  --sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%);
  --sl-color-pink-50: hsl(327.3 73.3% 97.1%);
  --sl-color-pink-100: hsl(325.7 77.8% 94.7%);
  --sl-color-pink-200: hsl(325.9 84.6% 89.8%);
  --sl-color-pink-300: hsl(327.4 87.1% 81.8%);
  --sl-color-pink-400: hsl(328.6 85.5% 70.2%);
  --sl-color-pink-500: hsl(330.4 81.2% 60.4%);
  --sl-color-pink-600: hsl(333.3 71.4% 50.6%);
  --sl-color-pink-700: hsl(335.1 77.6% 42%);
  --sl-color-pink-800: hsl(335.8 74.4% 35.3%);
  --sl-color-pink-900: hsl(335.9 69% 30.4%);
  --sl-color-pink-950: hsl(336.2 65.4% 15.9%);
  --sl-color-rose-50: hsl(355.7 100% 97.3%);
  --sl-color-rose-100: hsl(355.6 100% 94.7%);
  --sl-color-rose-200: hsl(352.7 96.1% 90%);
  --sl-color-rose-300: hsl(352.6 95.7% 81.8%);
  --sl-color-rose-400: hsl(351.3 94.5% 71.4%);
  --sl-color-rose-500: hsl(349.7 89.2% 60.2%);
  --sl-color-rose-600: hsl(346.8 77.2% 49.8%);
  --sl-color-rose-700: hsl(345.3 82.7% 40.8%);
  --sl-color-rose-800: hsl(343.4 79.7% 34.7%);
  --sl-color-rose-900: hsl(341.5 75.5% 30.4%);
  --sl-color-rose-950: hsl(341.3 70.1% 17.1%);
  --sl-color-primary-50: var(--sl-color-sky-50);
  --sl-color-primary-100: var(--sl-color-sky-100);
  --sl-color-primary-200: var(--sl-color-sky-200);
  --sl-color-primary-300: var(--sl-color-sky-300);
  --sl-color-primary-400: var(--sl-color-sky-400);
  --sl-color-primary-500: var(--sl-color-sky-500);
  --sl-color-primary-600: var(--sl-color-sky-600);
  --sl-color-primary-700: var(--sl-color-sky-700);
  --sl-color-primary-800: var(--sl-color-sky-800);
  --sl-color-primary-900: var(--sl-color-sky-900);
  --sl-color-primary-950: var(--sl-color-sky-950);
  --sl-color-success-50: var(--sl-color-green-50);
  --sl-color-success-100: var(--sl-color-green-100);
  --sl-color-success-200: var(--sl-color-green-200);
  --sl-color-success-300: var(--sl-color-green-300);
  --sl-color-success-400: var(--sl-color-green-400);
  --sl-color-success-500: var(--sl-color-green-500);
  --sl-color-success-600: var(--sl-color-green-600);
  --sl-color-success-700: var(--sl-color-green-700);
  --sl-color-success-800: var(--sl-color-green-800);
  --sl-color-success-900: var(--sl-color-green-900);
  --sl-color-success-950: var(--sl-color-green-950);
  --sl-color-warning-50: var(--sl-color-amber-50);
  --sl-color-warning-100: var(--sl-color-amber-100);
  --sl-color-warning-200: var(--sl-color-amber-200);
  --sl-color-warning-300: var(--sl-color-amber-300);
  --sl-color-warning-400: var(--sl-color-amber-400);
  --sl-color-warning-500: var(--sl-color-amber-500);
  --sl-color-warning-600: var(--sl-color-amber-600);
  --sl-color-warning-700: var(--sl-color-amber-700);
  --sl-color-warning-800: var(--sl-color-amber-800);
  --sl-color-warning-900: var(--sl-color-amber-900);
  --sl-color-warning-950: var(--sl-color-amber-950);
  --sl-color-danger-50: var(--sl-color-red-50);
  --sl-color-danger-100: var(--sl-color-red-100);
  --sl-color-danger-200: var(--sl-color-red-200);
  --sl-color-danger-300: var(--sl-color-red-300);
  --sl-color-danger-400: var(--sl-color-red-400);
  --sl-color-danger-500: var(--sl-color-red-500);
  --sl-color-danger-600: var(--sl-color-red-600);
  --sl-color-danger-700: var(--sl-color-red-700);
  --sl-color-danger-800: var(--sl-color-red-800);
  --sl-color-danger-900: var(--sl-color-red-900);
  --sl-color-danger-950: var(--sl-color-red-950);
  --sl-color-neutral-50: var(--sl-color-gray-50);
  --sl-color-neutral-100: var(--sl-color-gray-100);
  --sl-color-neutral-200: var(--sl-color-gray-200);
  --sl-color-neutral-300: var(--sl-color-gray-300);
  --sl-color-neutral-400: var(--sl-color-gray-400);
  --sl-color-neutral-500: var(--sl-color-gray-500);
  --sl-color-neutral-600: var(--sl-color-gray-600);
  --sl-color-neutral-700: var(--sl-color-gray-700);
  --sl-color-neutral-800: var(--sl-color-gray-800);
  --sl-color-neutral-900: var(--sl-color-gray-900);
  --sl-color-neutral-950: var(--sl-color-gray-950);
  --sl-color-neutral-0: hsl(0, 0%, 100%);
  --sl-color-neutral-1000: hsl(0, 0%, 0%);
  --sl-border-radius-small: 0.1875rem;
  --sl-border-radius-medium: 0.25rem;
  --sl-border-radius-large: 0.5rem;
  --sl-border-radius-x-large: 1rem;
  --sl-border-radius-circle: 50%;
  --sl-border-radius-pill: 9999px;
  --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
  --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
  --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
  --sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
  --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
  --sl-spacing-3x-small: 0.125rem;
  --sl-spacing-2x-small: 0.25rem;
  --sl-spacing-x-small: 0.5rem;
  --sl-spacing-small: 0.75rem;
  --sl-spacing-medium: 1rem;
  --sl-spacing-large: 1.25rem;
  --sl-spacing-x-large: 1.75rem;
  --sl-spacing-2x-large: 2.25rem;
  --sl-spacing-3x-large: 3rem;
  --sl-spacing-4x-large: 4.5rem;
  --sl-transition-x-slow: 1000ms;
  --sl-transition-slow: 500ms;
  --sl-transition-medium: 250ms;
  --sl-transition-fast: 150ms;
  --sl-transition-x-fast: 50ms;
  --sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  --sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --sl-font-serif: Georgia, "Times New Roman", serif;
  --sl-font-size-2x-small: 0.625rem;
  --sl-font-size-x-small: 0.75rem;
  --sl-font-size-small: 0.875rem;
  --sl-font-size-medium: 1rem;
  --sl-font-size-large: 1.25rem;
  --sl-font-size-x-large: 1.5rem;
  --sl-font-size-2x-large: 2.25rem;
  --sl-font-size-3x-large: 3rem;
  --sl-font-size-4x-large: 4.5rem;
  --sl-font-weight-light: 300;
  --sl-font-weight-normal: 400;
  --sl-font-weight-semibold: 500;
  --sl-font-weight-bold: 700;
  --sl-letter-spacing-denser: -0.03em;
  --sl-letter-spacing-dense: -0.015em;
  --sl-letter-spacing-normal: normal;
  --sl-letter-spacing-loose: 0.075em;
  --sl-letter-spacing-looser: 0.15em;
  --sl-line-height-denser: 1;
  --sl-line-height-dense: 1.4;
  --sl-line-height-normal: 1.8;
  --sl-line-height-loose: 2.2;
  --sl-line-height-looser: 2.6;
  --sl-focus-ring-color: var(--sl-color-primary-600);
  --sl-focus-ring-style: solid;
  --sl-focus-ring-width: 3px;
  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
    var(--sl-focus-ring-color);
  --sl-focus-ring-offset: 1px;
  --sl-button-font-size-small: var(--sl-font-size-x-small);
  --sl-button-font-size-medium: var(--sl-font-size-small);
  --sl-button-font-size-large: var(--sl-font-size-medium);
  --sl-input-height-small: 1.875rem;
  --sl-input-height-medium: 2.5rem;
  --sl-input-height-large: 3.125rem;
  --sl-input-background-color: var(--sl-color-neutral-0);
  --sl-input-background-color-hover: var(--sl-input-background-color);
  --sl-input-background-color-focus: var(--sl-input-background-color);
  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
  --sl-input-border-color: var(--sl-color-neutral-300);
  --sl-input-border-color-hover: var(--sl-color-neutral-400);
  --sl-input-border-color-focus: var(--sl-color-primary-500);
  --sl-input-border-color-disabled: var(--sl-color-neutral-300);
  --sl-input-border-width: 1px;
  --sl-input-required-content: "*";
  --sl-input-required-content-offset: -2px;
  --sl-input-required-content-color: var(--sl-input-label-color);
  --sl-input-border-radius-small: var(--sl-border-radius-medium);
  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
  --sl-input-border-radius-large: var(--sl-border-radius-medium);
  --sl-input-font-family: var(--sl-font-sans);
  --sl-input-font-weight: var(--sl-font-weight-normal);
  --sl-input-font-size-small: var(--sl-font-size-small);
  --sl-input-font-size-medium: var(--sl-font-size-medium);
  --sl-input-font-size-large: var(--sl-font-size-large);
  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
  --sl-input-color: var(--sl-color-neutral-700);
  --sl-input-color-hover: var(--sl-color-neutral-700);
  --sl-input-color-focus: var(--sl-color-neutral-700);
  --sl-input-color-disabled: var(--sl-color-neutral-900);
  --sl-input-icon-color: var(--sl-color-neutral-500);
  --sl-input-icon-color-hover: var(--sl-color-neutral-600);
  --sl-input-icon-color-focus: var(--sl-color-neutral-600);
  --sl-input-placeholder-color: var(--sl-color-neutral-500);
  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
  --sl-input-spacing-small: var(--sl-spacing-small);
  --sl-input-spacing-medium: var(--sl-spacing-medium);
  --sl-input-spacing-large: var(--sl-spacing-large);
  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
  --sl-input-focus-ring-offset: 0;
  --sl-input-filled-background-color: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
  --sl-input-filled-color: var(--sl-color-neutral-800);
  --sl-input-filled-color-hover: var(--sl-color-neutral-800);
  --sl-input-filled-color-focus: var(--sl-color-neutral-700);
  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
  --sl-input-label-font-size-small: var(--sl-font-size-small);
  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
  --sl-input-label-font-size-large: var(--sl-font-size-large);
  --sl-input-label-color: inherit;
  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
  --sl-input-help-text-color: var(--sl-color-neutral-500);
  --sl-toggle-size-small: 0.875rem;
  --sl-toggle-size-medium: 1.125rem;
  --sl-toggle-size-large: 1.375rem;
  --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
  --sl-panel-background-color: var(--sl-color-neutral-0);
  --sl-panel-border-color: var(--sl-color-neutral-200);
  --sl-panel-border-width: 1px;
  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
  --sl-tooltip-background-color: var(--sl-color-neutral-800);
  --sl-tooltip-color: var(--sl-color-neutral-0);
  --sl-tooltip-font-family: var(--sl-font-sans);
  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
  --sl-tooltip-font-size: var(--sl-font-size-small);
  --sl-tooltip-line-height: var(--sl-line-height-dense);
  --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
  --sl-tooltip-arrow-size: 6px;
  --sl-z-index-drawer: 700;
  --sl-z-index-dialog: 800;
  --sl-z-index-dropdown: 900;
  --sl-z-index-toast: 950;
  --sl-z-index-tooltip: 1000;
}

@supports (scrollbar-gutter: stable) {
  .sl-scroll-lock {
    scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;
  }
  .sl-scroll-lock body {
    overflow: hidden !important;
  }
}
@supports not (scrollbar-gutter: stable) {
  .sl-scroll-lock body {
    padding-right: var(--sl-scroll-lock-size) !important;
    overflow: hidden !important;
  }
}
.sl-toast-stack {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  z-index: var(--sl-z-index-toast);
  width: 28rem;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

.sl-toast-stack sl-alert {
  margin: var(--sl-spacing-medium);
}

.sl-toast-stack sl-alert::part(base) {
  box-shadow: var(--sl-shadow-large);
}

:host,
.sl-theme-dark {
  color-scheme: dark;
  --sl-color-gray-50: hsl(240 5.1% 15%);
  --sl-color-gray-100: hsl(240 5.7% 18.2%);
  --sl-color-gray-200: hsl(240 4.6% 22%);
  --sl-color-gray-300: hsl(240 5% 27.6%);
  --sl-color-gray-400: hsl(240 5% 35.5%);
  --sl-color-gray-500: hsl(240 3.7% 44%);
  --sl-color-gray-600: hsl(240 5.3% 58%);
  --sl-color-gray-700: hsl(240 5.6% 73%);
  --sl-color-gray-800: hsl(240 7.3% 84%);
  --sl-color-gray-900: hsl(240 9.1% 91.8%);
  --sl-color-gray-950: hsl(0 0% 95%);
  --sl-color-red-50: hsl(0 56% 23.9%);
  --sl-color-red-100: hsl(0.6 60% 33.9%);
  --sl-color-red-200: hsl(0.9 67.2% 37.1%);
  --sl-color-red-300: hsl(1.1 71.3% 43.7%);
  --sl-color-red-400: hsl(1 76% 52.5%);
  --sl-color-red-500: hsl(0.7 89.6% 57.2%);
  --sl-color-red-600: hsl(0 98.6% 67.9%);
  --sl-color-red-700: hsl(0 100% 72.3%);
  --sl-color-red-800: hsl(0 100% 85.6%);
  --sl-color-red-900: hsl(0 100% 90.3%);
  --sl-color-red-950: hsl(0 100% 95.9%);
  --sl-color-orange-50: hsl(15 64.2% 23.3%);
  --sl-color-orange-100: hsl(15.1 70.9% 31.1%);
  --sl-color-orange-200: hsl(15.3 75.7% 35.5%);
  --sl-color-orange-300: hsl(17.1 83.5% 42.7%);
  --sl-color-orange-400: hsl(20.1 88% 50.8%);
  --sl-color-orange-500: hsl(24.3 100% 50.5%);
  --sl-color-orange-600: hsl(27.2 100% 57.7%);
  --sl-color-orange-700: hsl(31.3 100% 68.7%);
  --sl-color-orange-800: hsl(33.8 100% 79.3%);
  --sl-color-orange-900: hsl(38.9 100% 87.7%);
  --sl-color-orange-950: hsl(46.2 100% 95%);
  --sl-color-amber-50: hsl(21.9 66.3% 21.1%);
  --sl-color-amber-100: hsl(21.5 73.6% 29.7%);
  --sl-color-amber-200: hsl(22.3 77.6% 33.3%);
  --sl-color-amber-300: hsl(25.4 84.2% 39.6%);
  --sl-color-amber-400: hsl(31.4 87.4% 46.7%);
  --sl-color-amber-500: hsl(37 96.6% 48.3%);
  --sl-color-amber-600: hsl(43.3 100% 53.4%);
  --sl-color-amber-700: hsl(46.5 100% 61.1%);
  --sl-color-amber-800: hsl(49.3 100% 73%);
  --sl-color-amber-900: hsl(51.8 100% 85%);
  --sl-color-amber-950: hsl(60 100% 94.6%);
  --sl-color-yellow-50: hsl(32.5 60% 18.2%);
  --sl-color-yellow-100: hsl(28.1 68.6% 29%);
  --sl-color-yellow-200: hsl(31.3 75.8% 30.8%);
  --sl-color-yellow-300: hsl(34.7 84.4% 35.3%);
  --sl-color-yellow-400: hsl(40.1 87.3% 43.3%);
  --sl-color-yellow-500: hsl(44.7 88% 46%);
  --sl-color-yellow-600: hsl(47.7 100% 50.9%);
  --sl-color-yellow-700: hsl(51.3 100% 59.9%);
  --sl-color-yellow-800: hsl(54.6 100% 73%);
  --sl-color-yellow-900: hsl(58.9 100% 84.2%);
  --sl-color-yellow-950: hsl(60 100% 94%);
  --sl-color-lime-50: hsl(86.5 54.4% 18%);
  --sl-color-lime-100: hsl(87.6 56.8% 23.3%);
  --sl-color-lime-200: hsl(85.8 63.2% 24.5%);
  --sl-color-lime-300: hsl(86.1 72% 29.4%);
  --sl-color-lime-400: hsl(85.5 76.8% 37.3%);
  --sl-color-lime-500: hsl(84.3 74.2% 42.1%);
  --sl-color-lime-600: hsl(82.8 81.5% 52.6%);
  --sl-color-lime-700: hsl(82 89.9% 64%);
  --sl-color-lime-800: hsl(80.9 97.9% 76.6%);
  --sl-color-lime-900: hsl(77.9 100% 85.8%);
  --sl-color-lime-950: hsl(69.5 100% 93.8%);
  --sl-color-green-50: hsl(144.3 53.6% 16%);
  --sl-color-green-100: hsl(143.2 55.4% 23.5%);
  --sl-color-green-200: hsl(141.5 58.2% 26.3%);
  --sl-color-green-300: hsl(140.8 64.2% 31.8%);
  --sl-color-green-400: hsl(140.3 68% 39.2%);
  --sl-color-green-500: hsl(141.1 64.9% 43%);
  --sl-color-green-600: hsl(141.6 72.4% 55.2%);
  --sl-color-green-700: hsl(141.7 82.7% 70.1%);
  --sl-color-green-800: hsl(141 90.9% 82.1%);
  --sl-color-green-900: hsl(142 100% 89.1%);
  --sl-color-green-950: hsl(144 100% 95.5%);
  --sl-color-emerald-50: hsl(164.3 75% 13.5%);
  --sl-color-emerald-100: hsl(163.5 72.6% 20.1%);
  --sl-color-emerald-200: hsl(162.1 73.7% 22.4%);
  --sl-color-emerald-300: hsl(161.3 77.3% 27.6%);
  --sl-color-emerald-400: hsl(159.6 77.1% 34.3%);
  --sl-color-emerald-500: hsl(159.1 73.5% 37.9%);
  --sl-color-emerald-600: hsl(157.8 66.8% 48.9%);
  --sl-color-emerald-700: hsl(156.2 76.1% 63.8%);
  --sl-color-emerald-800: hsl(152.4 84.4% 77.4%);
  --sl-color-emerald-900: hsl(149.3 100% 87%);
  --sl-color-emerald-950: hsl(158.6 100% 94.8%);
  --sl-color-teal-50: hsl(176.5 51.5% 15.4%);
  --sl-color-teal-100: hsl(175.9 54.7% 22.3%);
  --sl-color-teal-200: hsl(175.9 60.7% 23.9%);
  --sl-color-teal-300: hsl(174.5 67.3% 28.8%);
  --sl-color-teal-400: hsl(174.4 71.9% 34.9%);
  --sl-color-teal-500: hsl(173.1 71% 38.3%);
  --sl-color-teal-600: hsl(172.3 68.2% 48.1%);
  --sl-color-teal-700: hsl(170.5 81.3% 61.5%);
  --sl-color-teal-800: hsl(168.4 92.1% 75.2%);
  --sl-color-teal-900: hsl(168.3 100% 86%);
  --sl-color-teal-950: hsl(180 100% 95.5%);
  --sl-color-cyan-50: hsl(197.1 53.8% 20.3%);
  --sl-color-cyan-100: hsl(196.8 57.3% 27.2%);
  --sl-color-cyan-200: hsl(195.3 62.7% 29.4%);
  --sl-color-cyan-300: hsl(193.5 71.3% 34.1%);
  --sl-color-cyan-400: hsl(192.5 76.8% 40.6%);
  --sl-color-cyan-500: hsl(189.4 78.6% 42.6%);
  --sl-color-cyan-600: hsl(188.2 89.1% 51.7%);
  --sl-color-cyan-700: hsl(187 98.6% 66.2%);
  --sl-color-cyan-800: hsl(184.9 100% 78.3%);
  --sl-color-cyan-900: hsl(180 100% 86.6%);
  --sl-color-cyan-950: hsl(180 100% 94.8%);
  --sl-color-sky-50: hsl(203 63.8% 20.9%);
  --sl-color-sky-100: hsl(203.4 70.4% 28%);
  --sl-color-sky-200: hsl(202.7 75.8% 30.8%);
  --sl-color-sky-300: hsl(203.1 80.4% 36.1%);
  --sl-color-sky-400: hsl(202.1 80.5% 44.3%);
  --sl-color-sky-500: hsl(199.7 85.9% 47.7%);
  --sl-color-sky-600: hsl(198.7 97.9% 57.2%);
  --sl-color-sky-700: hsl(198.7 100% 70.5%);
  --sl-color-sky-800: hsl(198.8 100% 82.5%);
  --sl-color-sky-900: hsl(198.5 100% 89.9%);
  --sl-color-sky-950: hsl(186 100% 95.5%);
  --sl-color-blue-50: hsl(227.1 49.5% 22.7%);
  --sl-color-blue-100: hsl(225.8 58.9% 36.8%);
  --sl-color-blue-200: hsl(227.7 64.4% 42.9%);
  --sl-color-blue-300: hsl(226.1 72.7% 51.2%);
  --sl-color-blue-400: hsl(222.6 86.5% 56.3%);
  --sl-color-blue-500: hsl(217.8 95.8% 57.4%);
  --sl-color-blue-600: hsl(213.3 100% 65%);
  --sl-color-blue-700: hsl(210.9 100% 74.8%);
  --sl-color-blue-800: hsl(211.5 100% 83.4%);
  --sl-color-blue-900: hsl(211 100% 88.9%);
  --sl-color-blue-950: hsl(201.8 100% 95.3%);
  --sl-color-indigo-50: hsl(243.5 40.8% 27%);
  --sl-color-indigo-100: hsl(242.9 45.7% 37.6%);
  --sl-color-indigo-200: hsl(244.7 52.7% 43.1%);
  --sl-color-indigo-300: hsl(245.3 60.5% 52.4%);
  --sl-color-indigo-400: hsl(244.1 79.2% 60.4%);
  --sl-color-indigo-500: hsl(239.6 88.7% 63.8%);
  --sl-color-indigo-600: hsl(234.5 96.7% 70.9%);
  --sl-color-indigo-700: hsl(229.4 100% 78.3%);
  --sl-color-indigo-800: hsl(227.1 100% 85%);
  --sl-color-indigo-900: hsl(223.8 100% 89.9%);
  --sl-color-indigo-950: hsl(220 100% 95.1%);
  --sl-color-violet-50: hsl(265.1 57.3% 25.4%);
  --sl-color-violet-100: hsl(263.5 63.8% 39.4%);
  --sl-color-violet-200: hsl(263.4 66.2% 44.1%);
  --sl-color-violet-300: hsl(263.7 72.8% 52.4%);
  --sl-color-violet-400: hsl(262.5 87.3% 59.8%);
  --sl-color-violet-500: hsl(258.3 95.1% 63.2%);
  --sl-color-violet-600: hsl(255.1 100% 67.2%);
  --sl-color-violet-700: hsl(253 100% 81.5%);
  --sl-color-violet-800: hsl(251.7 100% 87.9%);
  --sl-color-violet-900: hsl(254.1 100% 91.7%);
  --sl-color-violet-950: hsl(257.1 100% 96.1%);
  --sl-color-purple-50: hsl(276 54.3% 20.5%);
  --sl-color-purple-100: hsl(273.6 61.8% 35.4%);
  --sl-color-purple-200: hsl(272.9 64% 41.4%);
  --sl-color-purple-300: hsl(271.9 68.1% 49.2%);
  --sl-color-purple-400: hsl(271.5 85.1% 57.8%);
  --sl-color-purple-500: hsl(270.7 96.4% 62.1%);
  --sl-color-purple-600: hsl(270.5 100% 71.9%);
  --sl-color-purple-700: hsl(270.9 100% 81.3%);
  --sl-color-purple-800: hsl(272.4 100% 87.7%);
  --sl-color-purple-900: hsl(276.7 100% 91.5%);
  --sl-color-purple-950: hsl(300 100% 96.5%);
  --sl-color-fuchsia-50: hsl(297.1 51.2% 18.6%);
  --sl-color-fuchsia-100: hsl(296.7 59.5% 31.5%);
  --sl-color-fuchsia-200: hsl(295.4 65.4% 35.1%);
  --sl-color-fuchsia-300: hsl(294.6 67.4% 42.2%);
  --sl-color-fuchsia-400: hsl(293.3 68.7% 51.2%);
  --sl-color-fuchsia-500: hsl(292.1 88.4% 57.7%);
  --sl-color-fuchsia-600: hsl(292 98.5% 59.5%);
  --sl-color-fuchsia-700: hsl(292.4 100% 79.5%);
  --sl-color-fuchsia-800: hsl(292.9 100% 86.8%);
  --sl-color-fuchsia-900: hsl(300 100% 91.5%);
  --sl-color-fuchsia-950: hsl(300 100% 96.3%);
  --sl-color-pink-50: hsl(336.2 59.6% 20%);
  --sl-color-pink-100: hsl(336.8 63.9% 34%);
  --sl-color-pink-200: hsl(336.8 68.7% 37.6%);
  --sl-color-pink-300: hsl(336.1 71.8% 44.5%);
  --sl-color-pink-400: hsl(333.9 74.9% 53.1%);
  --sl-color-pink-500: hsl(330.7 86.3% 57.7%);
  --sl-color-pink-600: hsl(328.6 91.5% 67.2%);
  --sl-color-pink-700: hsl(327.4 97.6% 78.7%);
  --sl-color-pink-800: hsl(325.1 100% 86.6%);
  --sl-color-pink-900: hsl(322.1 100% 91.3%);
  --sl-color-pink-950: hsl(315 100% 95.9%);
  --sl-color-rose-50: hsl(342.3 62.9% 21.5%);
  --sl-color-rose-100: hsl(342.8 68.9% 34.2%);
  --sl-color-rose-200: hsl(344.8 72.6% 37.3%);
  --sl-color-rose-300: hsl(346.9 75.8% 43.7%);
  --sl-color-rose-400: hsl(348.2 80.1% 52.7%);
  --sl-color-rose-500: hsl(350.4 94.8% 57.5%);
  --sl-color-rose-600: hsl(351.2 100% 58.1%);
  --sl-color-rose-700: hsl(352.3 100% 78.1%);
  --sl-color-rose-800: hsl(352 100% 86.2%);
  --sl-color-rose-900: hsl(354.5 100% 90.7%);
  --sl-color-rose-950: hsl(353.3 100% 95.7%);
  --sl-color-primary-50: var(--sl-color-sky-50);
  --sl-color-primary-100: var(--sl-color-sky-100);
  --sl-color-primary-200: var(--sl-color-sky-200);
  --sl-color-primary-300: var(--sl-color-sky-300);
  --sl-color-primary-400: var(--sl-color-sky-400);
  --sl-color-primary-500: var(--sl-color-sky-500);
  --sl-color-primary-600: var(--sl-color-sky-600);
  --sl-color-primary-700: var(--sl-color-sky-700);
  --sl-color-primary-800: var(--sl-color-sky-800);
  --sl-color-primary-900: var(--sl-color-sky-900);
  --sl-color-primary-950: var(--sl-color-sky-950);
  --sl-color-success-50: var(--sl-color-green-50);
  --sl-color-success-100: var(--sl-color-green-100);
  --sl-color-success-200: var(--sl-color-green-200);
  --sl-color-success-300: var(--sl-color-green-300);
  --sl-color-success-400: var(--sl-color-green-400);
  --sl-color-success-500: var(--sl-color-green-500);
  --sl-color-success-600: var(--sl-color-green-600);
  --sl-color-success-700: var(--sl-color-green-700);
  --sl-color-success-800: var(--sl-color-green-800);
  --sl-color-success-900: var(--sl-color-green-900);
  --sl-color-success-950: var(--sl-color-green-950);
  --sl-color-warning-50: var(--sl-color-amber-50);
  --sl-color-warning-100: var(--sl-color-amber-100);
  --sl-color-warning-200: var(--sl-color-amber-200);
  --sl-color-warning-300: var(--sl-color-amber-300);
  --sl-color-warning-400: var(--sl-color-amber-400);
  --sl-color-warning-500: var(--sl-color-amber-500);
  --sl-color-warning-600: var(--sl-color-amber-600);
  --sl-color-warning-700: var(--sl-color-amber-700);
  --sl-color-warning-800: var(--sl-color-amber-800);
  --sl-color-warning-900: var(--sl-color-amber-900);
  --sl-color-warning-950: var(--sl-color-amber-950);
  --sl-color-danger-50: var(--sl-color-red-50);
  --sl-color-danger-100: var(--sl-color-red-100);
  --sl-color-danger-200: var(--sl-color-red-200);
  --sl-color-danger-300: var(--sl-color-red-300);
  --sl-color-danger-400: var(--sl-color-red-400);
  --sl-color-danger-500: var(--sl-color-red-500);
  --sl-color-danger-600: var(--sl-color-red-600);
  --sl-color-danger-700: var(--sl-color-red-700);
  --sl-color-danger-800: var(--sl-color-red-800);
  --sl-color-danger-900: var(--sl-color-red-900);
  --sl-color-danger-950: var(--sl-color-red-950);
  --sl-color-neutral-50: var(--sl-color-gray-50);
  --sl-color-neutral-100: var(--sl-color-gray-100);
  --sl-color-neutral-200: var(--sl-color-gray-200);
  --sl-color-neutral-300: var(--sl-color-gray-300);
  --sl-color-neutral-400: var(--sl-color-gray-400);
  --sl-color-neutral-500: var(--sl-color-gray-500);
  --sl-color-neutral-600: var(--sl-color-gray-600);
  --sl-color-neutral-700: var(--sl-color-gray-700);
  --sl-color-neutral-800: var(--sl-color-gray-800);
  --sl-color-neutral-900: var(--sl-color-gray-900);
  --sl-color-neutral-950: var(--sl-color-gray-950);
  --sl-color-neutral-0: hsl(240, 5.9%, 11%);
  --sl-color-neutral-1000: hsl(0, 0%, 100%);
  --sl-border-radius-small: 0.1875rem;
  --sl-border-radius-medium: 0.25rem;
  --sl-border-radius-large: 0.5rem;
  --sl-border-radius-x-large: 1rem;
  --sl-border-radius-circle: 50%;
  --sl-border-radius-pill: 9999px;
  --sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
  --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
  --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%);
  --sl-shadow-large: 0 2px 8px rgb(0 0 0 / 24%);
  --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 24%);
  --sl-spacing-3x-small: 0.125rem;
  --sl-spacing-2x-small: 0.25rem;
  --sl-spacing-x-small: 0.5rem;
  --sl-spacing-small: 0.75rem;
  --sl-spacing-medium: 1rem;
  --sl-spacing-large: 1.25rem;
  --sl-spacing-x-large: 1.75rem;
  --sl-spacing-2x-large: 2.25rem;
  --sl-spacing-3x-large: 3rem;
  --sl-spacing-4x-large: 4.5rem;
  --sl-transition-x-slow: 1000ms;
  --sl-transition-slow: 500ms;
  --sl-transition-medium: 250ms;
  --sl-transition-fast: 150ms;
  --sl-transition-x-fast: 50ms;
  --sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  --sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --sl-font-serif: Georgia, "Times New Roman", serif;
  --sl-font-size-2x-small: 0.625rem;
  --sl-font-size-x-small: 0.75rem;
  --sl-font-size-small: 0.875rem;
  --sl-font-size-medium: 1rem;
  --sl-font-size-large: 1.25rem;
  --sl-font-size-x-large: 1.5rem;
  --sl-font-size-2x-large: 2.25rem;
  --sl-font-size-3x-large: 3rem;
  --sl-font-size-4x-large: 4.5rem;
  --sl-font-weight-light: 300;
  --sl-font-weight-normal: 400;
  --sl-font-weight-semibold: 500;
  --sl-font-weight-bold: 700;
  --sl-letter-spacing-denser: -0.03em;
  --sl-letter-spacing-dense: -0.015em;
  --sl-letter-spacing-normal: normal;
  --sl-letter-spacing-loose: 0.075em;
  --sl-letter-spacing-looser: 0.15em;
  --sl-line-height-denser: 1;
  --sl-line-height-dense: 1.4;
  --sl-line-height-normal: 1.8;
  --sl-line-height-loose: 2.2;
  --sl-line-height-looser: 2.6;
  --sl-focus-ring-color: var(--sl-color-primary-700);
  --sl-focus-ring-style: solid;
  --sl-focus-ring-width: 3px;
  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
    var(--sl-focus-ring-color);
  --sl-focus-ring-offset: 1px;
  --sl-button-font-size-small: var(--sl-font-size-x-small);
  --sl-button-font-size-medium: var(--sl-font-size-small);
  --sl-button-font-size-large: var(--sl-font-size-medium);
  --sl-input-height-small: 1.875rem;
  --sl-input-height-medium: 2.5rem;
  --sl-input-height-large: 3.125rem;
  --sl-input-background-color: var(--sl-color-neutral-0);
  --sl-input-background-color-hover: var(--sl-input-background-color);
  --sl-input-background-color-focus: var(--sl-input-background-color);
  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
  --sl-input-border-color: var(--sl-color-neutral-400);
  --sl-input-border-color-hover: var(--sl-color-neutral-500);
  --sl-input-border-color-focus: var(--sl-color-primary-600);
  --sl-input-border-color-disabled: var(--sl-color-neutral-400);
  --sl-input-border-width: 1px;
  --sl-input-required-content: "*";
  --sl-input-required-content-offset: -2px;
  --sl-input-required-content-color: var(--sl-input-label-color);
  --sl-input-border-radius-small: var(--sl-border-radius-medium);
  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
  --sl-input-border-radius-large: var(--sl-border-radius-medium);
  --sl-input-font-family: var(--sl-font-sans);
  --sl-input-font-weight: var(--sl-font-weight-normal);
  --sl-input-font-size-small: var(--sl-font-size-small);
  --sl-input-font-size-medium: var(--sl-font-size-medium);
  --sl-input-font-size-large: var(--sl-font-size-large);
  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
  --sl-input-color: var(--sl-color-neutral-700);
  --sl-input-color-hover: var(--sl-color-neutral-700);
  --sl-input-color-focus: var(--sl-color-neutral-700);
  --sl-input-color-disabled: var(--sl-color-neutral-900);
  --sl-input-icon-color: var(--sl-color-neutral-500);
  --sl-input-icon-color-hover: var(--sl-color-neutral-600);
  --sl-input-icon-color-focus: var(--sl-color-neutral-600);
  --sl-input-placeholder-color: var(--sl-color-neutral-500);
  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
  --sl-input-spacing-small: var(--sl-spacing-small);
  --sl-input-spacing-medium: var(--sl-spacing-medium);
  --sl-input-spacing-large: var(--sl-spacing-large);
  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
  --sl-input-focus-ring-offset: 0;
  --sl-input-filled-background-color: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
  --sl-input-filled-color: var(--sl-color-neutral-800);
  --sl-input-filled-color-hover: var(--sl-color-neutral-800);
  --sl-input-filled-color-focus: var(--sl-color-neutral-700);
  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
  --sl-input-label-font-size-small: var(--sl-font-size-small);
  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
  --sl-input-label-font-size-large: var(--sl-font-size-large);
  --sl-input-label-color: inherit;
  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
  --sl-input-help-text-color: var(--sl-color-neutral-600);
  --sl-toggle-size-small: 0.875rem;
  --sl-toggle-size-medium: 1.125rem;
  --sl-toggle-size-large: 1.375rem;
  --sl-overlay-background-color: hsl(0 0% 0% / 43%);
  --sl-panel-background-color: var(--sl-color-neutral-50);
  --sl-panel-border-color: var(--sl-color-neutral-200);
  --sl-panel-border-width: 1px;
  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
  --sl-tooltip-background-color: var(--sl-color-neutral-800);
  --sl-tooltip-color: var(--sl-color-neutral-0);
  --sl-tooltip-font-family: var(--sl-font-sans);
  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
  --sl-tooltip-font-size: var(--sl-font-size-small);
  --sl-tooltip-line-height: var(--sl-line-height-dense);
  --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
  --sl-tooltip-arrow-size: 6px;
  --sl-z-index-drawer: 700;
  --sl-z-index-dialog: 800;
  --sl-z-index-dropdown: 900;
  --sl-z-index-toast: 950;
  --sl-z-index-tooltip: 1000;
}

@supports (scrollbar-gutter: stable) {
  .sl-scroll-lock {
    scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;
  }
  .sl-scroll-lock body {
    overflow: hidden !important;
  }
}
@supports not (scrollbar-gutter: stable) {
  .sl-scroll-lock body {
    padding-right: var(--sl-scroll-lock-size) !important;
    overflow: hidden !important;
  }
}
.sl-toast-stack {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  z-index: var(--sl-z-index-toast);
  width: 28rem;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

.sl-toast-stack sl-alert {
  margin: var(--sl-spacing-medium);
}

.sl-toast-stack sl-alert::part(base) {
  box-shadow: var(--sl-shadow-large);
}

:root,
:host,
.sl-theme-light,
.sl-theme-dark {
  --sl-spacing-3x-small: var(--op-space-3x-small);
  --sl-spacing-2x-small: var(--op-space-2x-small);
  --sl-spacing-x-small: var(--op-space-x-small);
  --sl-spacing-small: var(--op-space-small);
  --sl-spacing-medium: var(--op-space-medium);
  --sl-spacing-large: var(--op-space-large);
  --sl-spacing-x-large: var(--op-space-x-large);
  --sl-spacing-2x-large: var(--op-space-2x-large);
  --sl-spacing-3x-large: var(--op-space-3x-large);
  --sl-spacing-4x-large: var(--op-space-4x-large);
  --sl-border-radius-small: var(--op-radius-small);
  --sl-border-radius-medium: var(--op-radius-medium);
  --sl-border-radius-large: var(--op-radius-large);
  --sl-border-radius-x-large: var(--op-radius-x-large);
  --sl-border-radius-circle: var(--op-radius-circle);
  --sl-border-radius-pill: var(--op-radius-pill);
  --sl-font-sans: var(--op-font-family);
  --sl-font-size-2x-small: var(--op-font-2x-small);
  --sl-font-size-x-small: var(--op-font-x-small);
  --sl-font-size-small: var(--op-font-small);
  --sl-font-size-medium: var(--op-font-medium);
  --sl-font-size-large: var(--op-font-large);
  --sl-font-size-x-large: var(--op-font-2x-large);
  --sl-font-size-2x-large: var(--op-font-3x-large);
  --sl-font-size-3x-large: var(--op-font-4x-large);
  --sl-font-size-4x-large: var(--op-font-5x-large);
  --sl-font-weight-light: var(--op-font-weight-light);
  --sl-font-weight-normal: var(--op-font-weight-normal);
  --sl-font-weight-semibold: var(--op-font-weight-semi-bold);
  --sl-font-weight-bold: var(--op-font-weight-bold);
  --sl-line-height-denser: var(--op-line-height-denser);
  --sl-line-height-dense: var(--op-line-height-dense);
  --sl-line-height-normal: var(--op-line-height-base);
  --sl-line-height-loose: var(--op-line-height-loose);
  --sl-line-height-looser: var(--op-line-height-looser);
  --sl-z-index-drawer: var(--op-z-index-sidebar);
  --sl-z-index-dialog: var(--op-z-index-dialog);
  --sl-z-index-dropdown: var(--op-z-index-dropdown);
  --sl-z-index-alert-group: var(--op-z-index-alert-group);
  --sl-z-index-tooltip: var(--op-z-index-tooltip);
  --sl-input-height-small: var(--op-input-height-small);
  --sl-input-height-medium: var(--op-input-height-medium);
  --sl-input-height-large: var(--op-input-height-x-large);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  :root,
  :host,
  .sl-theme-light,
  .sl-theme-dark {
    --sl-input-height-large: var(--op-input-height-large);
  }
}
:root,
:host,
.sl-theme-light,
.sl-theme-dark {
  --sl-input-border-radius-small: var(--op-radius-small);
  --sl-input-border-radius-medium: var(--op-radius-medium);
  --sl-input-border-radius-large: var(--op-radius-large);
  --sl-input-border-radius-x-large: var(--op-radius-x-large);
  --sl-input-border-radius-circle: var(--op-radius-circle);
  --sl-input-border-radius-pill: var(--op-radius-pill);
  --sl-focus-ring-alpha: 30%;
  --sl-focus-ring-width: 3px;
  --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) hsl(var(--op-color-primary-h) var(--op-color-primary-s) var(--op-color-primary-l) / var(--sl-focus-ring-alpha));
  --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
  --sl-button-font-size-small: var(--op-font-x-small);
  --sl-button-font-size-medium: var(--op-font-small);
  --sl-button-font-size-large: var(--op-font-medium);
}

:root,
:host,
.sl-theme-light {
  --sl-color-primary-50: var(--op-color-primary-plus-eight);
  --sl-color-primary-100: var(--op-color-primary-plus-six);
  --sl-color-primary-200: var(--op-color-primary-plus-four);
  --sl-color-primary-300: var(--op-color-primary-plus-three);
  --sl-color-primary-400: var(--op-color-primary-plus-two);
  --sl-color-primary-500: var(--op-color-primary-base);
  --sl-color-primary-600: var(--op-color-primary-minus-two);
  --sl-color-primary-700: var(--op-color-primary-minus-four);
  --sl-color-primary-800: var(--op-color-primary-minus-five);
  --sl-color-primary-900: var(--op-color-primary-minus-six);
  --sl-color-primary-950: var(---op-color-primary-minus-seven);
  --sl-color-neutral-50: var(--op-color-neutral-plus-eight);
  --sl-color-neutral-100: var(--op-color-neutral-plus-seven);
  --sl-color-neutral-200: var(--op-color-neutral-plus-four);
  --sl-color-neutral-300: var(--op-color-neutral-plus-three);
  --sl-color-neutral-400: var(--op-color-neutral-plus-two);
  --sl-color-neutral-500: var(--op-color-neutral-plus-one);
  --sl-color-neutral-600: var(--op-color-neutral-base);
  --sl-color-neutral-700: var(--op-color-neutral-minus-two);
  --sl-color-neutral-800: var(--op-color-neutral-minus-four);
  --sl-color-neutral-900: var(--op-color-neutral-minus-six);
  --sl-color-neutral-950: var(--op-color-neutral-minus-seven);
}

:host,
.sl-theme-dark {
  --sl-color-primary-50: var(--op-color-primary-minus-seven);
  --sl-color-primary-100: var(--op-color-primary-minus-six);
  --sl-color-primary-200: var(--op-color-primary-minus-five);
  --sl-color-primary-300: var(--op-color-primary-minus-four);
  --sl-color-primary-400: var(--op-color-primary-minus-two);
  --sl-color-primary-500: var(--op-color-primary-base);
  --sl-color-primary-600: var(--op-color-primary-plus-two);
  --sl-color-primary-700: var(--op-color-primary-plus-three);
  --sl-color-primary-800: var(--op-color-primary-plus-four);
  --sl-color-primary-900: var(--op-color-primary-plus-six);
  --sl-color-primary-950: var(--op-color-primary-plus-eight);
  --sl-color-neutral-50: var(--op-color-neutral-minus-seven);
  --sl-color-neutral-100: var(--op-color-neutral-minus-six);
  --sl-color-neutral-200: var(--op-color-neutral-minus-four);
  --sl-color-neutral-300: var(--op-color-neutral-minus-two);
  --sl-color-neutral-400: var(--op-color-neutral-base);
  --sl-color-neutral-500: var(--op-color-neutral-plus-one);
  --sl-color-neutral-600: var(--op-color-neutral-plus-two);
  --sl-color-neutral-700: var(--op-color-neutral-plus-three);
  --sl-color-neutral-800: var(--op-color-neutral-plus-four);
  --sl-color-neutral-900: var(--op-color-neutral-plus-seven);
  --sl-color-neutral-950: var(--op-color-neutral-plus-eight);
}

sl-button input[type=submit] {
  cursor: pointer;
  background-color: inherit;
  color: inherit;
  padding: 0;
}

sl-button::part(base) {
  /* Public API (customizable component options) */
  --_op-btn-height-small: var(--op-input-height-small);
  --_op-btn-height-medium: var(--op-input-height-medium);
  --_op-btn-height-large: var(--op-input-height-large);
  --_op-btn-font-small: var(--op-font-x-small);
  --_op-btn-font-medium: var(--op-font-small);
  --_op-btn-font-large: var(--op-font-small);
  --_op-btn-padding-small: 0 var(--op-space-x-small);
  --_op-btn-padding-medium: 0 var(--op-space-small);
  --_op-btn-padding-large: 0 var(--op-space-small);
  /* Private API (component option defaults) */
  --__op-btn-height: var(--_op-btn-height-medium);
  --__op-btn-font-size: var(--_op-btn-font-medium);
  --__op-btn-padding: var(--_op-btn-padding-medium);
  display: inline-flex;
  min-height: var(--__op-btn-height);
  align-items: center;
  justify-content: center;
  border-radius: var(--op-radius-medium);
  appearance: none;
  background-color: var(--op-color-neutral-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-eight);
  cursor: pointer;
  font-size: var(--__op-btn-font-size);
  font-weight: var(--op-font-weight-normal);
  text-align: center;
  text-decoration: none;
  transition: var(--op-transition-input);
  white-space: nowrap;
  gap: 0;
  border: none;
  padding: 0;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  sl-button::part(base) {
    border-radius: var(--op-radius-large);
    box-shadow: unset;
  }
}
sl-button::part(base) sl-button:not([disabled]):hover::part(base) {
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
}

sl-button.btn--icon[size=x-small]::part(base) {
  height: var(--op-input-height-3x-small);
  width: var(--op-input-height-3x-small);
}

sl-button[size=x-small]::part(base) {
  --__op-btn-font-size: var(--_op-btn-font-x-small);
  font-weight: var(--op-font-weight-bold);
  min-height: var(--op-input-height-3x-small);
}

sl-button[size=x-small]::part(label) {
  padding: 0 var(--op-space-x-small);
  font-size: var(--_op-btn-font-small);
  font-weight: var(--op-font-weight-bold);
}

sl-button[size=small]::part(base) {
  --_op-btn-font-size: var(--op-font-small);
  border-radius: var(--op-radius-medium);
  font-weight: var(--op-font-weight-medium);
  gap: var(--op-space-2x-small);
  min-height: var(--op-input-height-small);
  padding: 0 var(--op-space-small);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  sl-button[size=small]::part(base) {
    border-radius: var(--op-radius-large);
    box-shadow: unset;
    font-size: var(--op-font-small);
    height: var(--op-input-height-medium);
  }
}

sl-button.btn--icon[size=small]::part(base) {
  height: var(--op-input-height-small);
  width: var(--op-input-height-small);
}

sl-button[size=small]::part(label) {
  padding: 0;
  font-size: var(--_op-btn-font-small);
  font-weight: var(--op-font-weight-medium);
  gap: var(--op-space-2x-small);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  sl-button[size=small]::part(label) {
    font-size: var(--op-font-small);
  }
}

sl-button[size=medium]::part(base) {
  --_op-btn-padding-medium: 0 var(--op-space-medium);
  font-size: var(--_op-btn-font-medium);
  font-weight: var(--op-font-weight-medium);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  sl-button[size=medium]::part(base) {
    border-radius: var(--op-radius-large);
    height: var(--op-input-height-medium);
  }
}

sl-button.btn--icon[size=medium]::part(base) {
  height: var(--op-input-height-medium);
  width: var(--op-input-height-medium);
}

sl-button[size=medium]::part(label) {
  font-size: var(--_op-btn-font-medium);
  font-weight: var(--op-font-weight-medium);
  gap: var(--op-space-x-small);
}

.markup-left-panel__placement-modes sl-button[size=medium]::part(label) {
  padding: 0 var(--op-space-small);
}

sl-button[size=large]::part(base) {
  --_op-btn-font-large: var(--op-font-medium);
  --_op-btn-padding-large: 0 var(--op-space-medium);
  border-radius: var(--op-radius-large);
  height: var(--op-input-height-x-large);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  sl-button[size=large]::part(base) {
    border-radius: var(--op-radius-large);
    height: var(--op-input-height-large);
  }
}

sl-button[size=large]::part(label) {
  padding: 0 var(--op-space-medium);
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-normal);
}

sl-button[disabled]::part(base) {
  cursor: not-allowed;
}

sl-button::part(label) {
  display: flex;
  align-items: center;
}

sl-button.btn--no-border::part(base) {
  box-shadow: none;
}
sl-button.btn--no-border::part(base):hover {
  background-color: var(--op-color-neutral-plus-six);
}

sl-button[variant=primary]::part(base) {
  background-color: var(--op-color-primary-minus-two);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-two);
  color: var(--op-color-primary-on-minus-two);
}
sl-button[variant=primary]:not([disabled]):hover::part(base) {
  background-color: var(--op-color-primary-minus-six);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-six);
  color: var(--op-color-primary-on-minus-six);
}

sl-button[variant=primary-outline]::part(base) {
  background-color: var(--op-color-primary-plus-max);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-one);
  color: var(--op-color-primary-on-plus-max-alt);
  border-radius: var(--op-radius-medium);
}
sl-button[variant=primary-outline]:not([disabled]):hover::part(base) {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight-alt);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-one);
}

sl-button[variant=round-icon]::part(base) {
  --__op-btn-font-size: var(--_op-btn-font-x-small);
  border-radius: var(--op-radius-circle);
  background: var(--op-color-neutral-plus-seven);
  font-weight: var(--op-font-weight-bold);
  min-height: var(--op-input-height-medium);
  height: var(--op-input-height-medium);
  min-width: var(--op-input-height-medium);
  width: var(--op-input-height-medium);
}

sl-button[variant=secondary]::part(base) {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-five);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  sl-button[variant=secondary]::part(base) {
    background-color: var(--op-color-neutral-plus-seven);
    color: var(--op-color-neutral-on-plus-seven);
  }
}
sl-button[variant=secondary]:not([disabled]):hover::part(base), sl-dropdown[open] sl-button[variant=secondary][slot=trigger]::part(base) {
  background-color: var(--op-color-primary-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-two);
  color: var(--op-color-primary-on-plus-eight);
}

sl-button[variant=destructive]::part(base) {
  background-color: var(--op-color-alerts-danger-minus-one);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-one);
  color: var(--op-color-alerts-danger-on-minus-one);
}
sl-button[variant=destructive]:not([disabled]):hover::part(base) {
  background-color: var(--op-color-alerts-danger-minus-three);
  color: var(--op-color-alerts-danger-on-minus-three);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-four);
}

sl-button[variant=destructive-outline]::part(base) {
  background-color: var(--op-color-alerts-danger-plus-max);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-five);
  color: var(--op-color-alerts-danger-on-plus-max-alt);
}
sl-button[variant=destructive-outline]:not([disabled]):hover::part(base) {
  background-color: var(--op-color-alerts-danger-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-one);
  color: var(--op-color-alerts-danger-on-plus-eight-alt);
}

sl-button[variant=warning]::part(base) {
  background-color: var(--op-color-alerts-warning-plus-three);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
  color: var(--op-color-alerts-warning-on-plus-three);
}
sl-button[variant=warning]:not([disabled]):hover::part(base) {
  background-color: var(--op-color-alerts-warning-plus-two);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-two);
  color: var(--op-color-alerts-warning-on-plus-two);
}

sl-button[variant=warning-outline]::part(base) {
  background-color: var(--op-color-alerts-warning-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-two);
  color: var(--op-color-alerts-warning-on-plus-eight);
}
sl-button[variant=warning-outline]:not([disabled]):hover::part(base) {
  background-color: var(--op-color-alerts-warning-plus-six);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-one);
  color: var(--op-color-alerts-warning-on-plus-six);
}

sl-button[variant=outlined-area]::part(base) {
  display: flex;
  flex-direction: column;
  background-color: var(--op-color-neutral-plus-eight);
  border: var(--op-border-width) dashed var(--op-color-border);
  border-radius: var(--op-radius-large);
  box-shadow: unset;
  font-size: var(--op-font-small);
  height: unset;
  padding: var(--op-space-x-large);
  width: 100%;
}
sl-button[variant=outlined-area]:not([disabled]):hover::part(base) {
  background-color: var(--op-color-primary-plus-five);
  border-color: var(--op-color-primary-minus-three);
  box-shadow: none;
}

sl-button[variant=outlined-area]::part(label) {
  display: flex;
  justify-content: center;
}

sl-button[variant=text]::part(base) {
  background-color: transparent;
  box-shadow: none;
  color: var(--op-color-primary-minus-three);
}
sl-button[variant=text]:not([disabled]):hover::part(base) {
  background-color: transparent;
  box-shadow: none;
  color: var(--op-color-primary-on-plus-eight);
}

sl-button[variant=primary-borderless]::part(base) {
  background-color: unset;
  border: none;
  box-shadow: none;
  color: var(--op-color-primary-minus-two);
}
sl-button[variant=primary-borderless]:not([disabled]):hover::part(base) {
  background-color: var(--op-color-primary-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
  color: var(--op-color-primary-on-plus-eight);
}

sl-button[variant=secondary-borderless]::part(base) {
  border: none;
  box-shadow: none;
  background-color: unset;
}
sl-button[variant=secondary-borderless]:not([disabled]):hover::part(base) {
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-plus-on-six);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
  border: 0;
}

sl-button[outline]::part(base) {
  background-color: transparent;
  box-shadow: inset var(--op-border-all) var(--op-color-border), var(--__op-btn-border-shadow);
}

sl-button[icon]::part(base) {
  min-width: var(--__op-btn-height);
  width: var(--__op-btn-height);
  padding: 0;
}

:root sl-radio-group::part(button-group),
:host sl-radio-group::part(button-group),
.sl-theme-light sl-radio-group::part(button-group),
.sl-theme-dark sl-radio-group::part(button-group) {
  --radio-group-padding: 4px;
  border: var(--op-border-width) solid var(--op-color-border);
  border-radius: var(--op-radius-medium);
  padding: var(--radio-group-padding);
}
:root sl-radio-group::part(button-group__base),
:host sl-radio-group::part(button-group__base),
.sl-theme-light sl-radio-group::part(button-group__base),
.sl-theme-dark sl-radio-group::part(button-group__base) {
  gap: var(--op-space-2x-small);
}
:root sl-radio-button::part(button),
:host sl-radio-button::part(button),
.sl-theme-light sl-radio-button::part(button),
.sl-theme-dark sl-radio-button::part(button) {
  border-radius: var(--op-radius-small);
  align-items: center;
  border: none;
  box-shadow: none;
  font-weight: var(--op-font-weight-medium);
}
:root sl-radio-button::part(button):hover,
:host sl-radio-button::part(button):hover,
.sl-theme-light sl-radio-button::part(button):hover,
.sl-theme-dark sl-radio-button::part(button):hover {
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
}
:root sl-radio-group::part(form-control),
:host sl-radio-group::part(form-control),
.sl-theme-light sl-radio-group::part(form-control),
.sl-theme-dark sl-radio-group::part(form-control) {
  margin-inline: initial;
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
}
:root sl-radio-button::part(button--checked),
:host sl-radio-button::part(button--checked),
.sl-theme-light sl-radio-button::part(button--checked),
.sl-theme-dark sl-radio-button::part(button--checked) {
  background-color: var(--op-color-primary-minus-three);
  color: var(--op-color-primary-on-minus-three);
}
:root sl-radio-button::part(button--checked):hover,
:host sl-radio-button::part(button--checked):hover,
.sl-theme-light sl-radio-button::part(button--checked):hover,
.sl-theme-dark sl-radio-button::part(button--checked):hover {
  background-color: var(--op-color-primary-minus-three);
  color: var(--op-color-primary-on-minus-three);
}
:root .sl-radio-group--full-width,
:host .sl-radio-group--full-width,
.sl-theme-light .sl-radio-group--full-width,
.sl-theme-dark .sl-radio-group--full-width {
  width: 100%;
}
:root .sl-radio-group--full-width sl-radio-button,
:root .sl-radio-group--full-width sl-radio-group,
:root .sl-radio-group--full-width sl-radio-group::part(button-group),
:root .sl-radio-group--full-width sl-radio-group::part(form-control),
:root .sl-radio-group--full-width sl-radio-button::part(base),
:host .sl-radio-group--full-width sl-radio-button,
:host .sl-radio-group--full-width sl-radio-group,
:host .sl-radio-group--full-width sl-radio-group::part(button-group),
:host .sl-radio-group--full-width sl-radio-group::part(form-control),
:host .sl-radio-group--full-width sl-radio-button::part(base),
.sl-theme-light .sl-radio-group--full-width sl-radio-button,
.sl-theme-light .sl-radio-group--full-width sl-radio-group,
.sl-theme-light .sl-radio-group--full-width sl-radio-group::part(button-group),
.sl-theme-light .sl-radio-group--full-width sl-radio-group::part(form-control),
.sl-theme-light .sl-radio-group--full-width sl-radio-button::part(base),
.sl-theme-dark .sl-radio-group--full-width sl-radio-button,
.sl-theme-dark .sl-radio-group--full-width sl-radio-group,
.sl-theme-dark .sl-radio-group--full-width sl-radio-group::part(button-group),
.sl-theme-dark .sl-radio-group--full-width sl-radio-group::part(form-control),
.sl-theme-dark .sl-radio-group--full-width sl-radio-button::part(base) {
  width: 100%;
}
:root .sl-radio-group--full-width::part(button-group),
:host .sl-radio-group--full-width::part(button-group),
.sl-theme-light .sl-radio-group--full-width::part(button-group),
.sl-theme-dark .sl-radio-group--full-width::part(button-group) {
  width: 100%;
}
:root sl-radio-group.sl-radio-group--borderless::part(button-group),
:host sl-radio-group.sl-radio-group--borderless::part(button-group),
.sl-theme-light sl-radio-group.sl-radio-group--borderless::part(button-group),
.sl-theme-dark sl-radio-group.sl-radio-group--borderless::part(button-group) {
  border: none;
}
:root sl-radio-group.sl-radio-group--borderless::part(form-control),
:host sl-radio-group.sl-radio-group--borderless::part(form-control),
.sl-theme-light sl-radio-group.sl-radio-group--borderless::part(form-control),
.sl-theme-dark sl-radio-group.sl-radio-group--borderless::part(form-control) {
  border-radius: var(--op-radius-medium);
}
:root .sl-radio-group--placement-mode::part(button-group),
:host .sl-radio-group--placement-mode::part(button-group),
.sl-theme-light .sl-radio-group--placement-mode::part(button-group),
.sl-theme-dark .sl-radio-group--placement-mode::part(button-group) {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
:root .markup-left-panel__drawing-controls sl-radio-group::part(button-group),
:host .markup-left-panel__drawing-controls sl-radio-group::part(button-group),
.sl-theme-light .markup-left-panel__drawing-controls sl-radio-group::part(button-group),
.sl-theme-dark .markup-left-panel__drawing-controls sl-radio-group::part(button-group) {
  box-shadow: none;
  border: none;
  border-radius: unset;
}
:root sl-radio-group.modal-radio-group,
:host sl-radio-group.modal-radio-group,
.sl-theme-light sl-radio-group.modal-radio-group,
.sl-theme-dark sl-radio-group.modal-radio-group {
  --radio-button-height: 13rem;
  color: var(--op-color-neutral-on-plus-eight);
  background-color: var(--op-color-neutral-plus-eight);
  border-radius: var(--op-radius-large);
}
:root sl-radio-group.modal-radio-group::part(button-group),
:host sl-radio-group.modal-radio-group::part(button-group),
.sl-theme-light sl-radio-group.modal-radio-group::part(button-group),
.sl-theme-dark sl-radio-group.modal-radio-group::part(button-group) {
  padding: var(--op-space-x-small);
  border-radius: var(--op-radius-large);
  width: 100%;
}
:root sl-radio-group.modal-radio-group sl-radio-button::part(button),
:host sl-radio-group.modal-radio-group sl-radio-button::part(button),
.sl-theme-light sl-radio-group.modal-radio-group sl-radio-button::part(button),
.sl-theme-dark sl-radio-group.modal-radio-group sl-radio-button::part(button) {
  border-radius: var(--op-radius-medium);
  height: var(--radio-button-height);
}
:root sl-radio-group.modal-radio-group sl-radio-button::part(button):hover,
:host sl-radio-group.modal-radio-group sl-radio-button::part(button):hover,
.sl-theme-light sl-radio-group.modal-radio-group sl-radio-button::part(button):hover,
.sl-theme-dark sl-radio-group.modal-radio-group sl-radio-button::part(button):hover {
  color: var(--op-color-neutral-on-plus-six);
  background-color: var(--op-color-neutral-plus-six);
}
:root sl-radio-group.modal-radio-group sl-radio-button,
:host sl-radio-group.modal-radio-group sl-radio-button,
.sl-theme-light sl-radio-group.modal-radio-group sl-radio-button,
.sl-theme-dark sl-radio-group.modal-radio-group sl-radio-button {
  width: 50%;
  height: var(--radio-button-height);
}
:root sl-radio-group.modal-radio-group sl-radio-button .description,
:host sl-radio-group.modal-radio-group sl-radio-button .description,
.sl-theme-light sl-radio-group.modal-radio-group sl-radio-button .description,
.sl-theme-dark sl-radio-group.modal-radio-group sl-radio-button .description {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--op-font-x-small);
  line-height: var(--op-line-height-dense);
  text-align: left;
}
:root sl-radio-group.modal-radio-group sl-radio-button::part(button--checked),
:host sl-radio-group.modal-radio-group sl-radio-button::part(button--checked),
.sl-theme-light sl-radio-group.modal-radio-group sl-radio-button::part(button--checked),
.sl-theme-dark sl-radio-group.modal-radio-group sl-radio-button::part(button--checked) {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight);
  box-shadow: var(--op-border-all-large) var(--op-color-primary-minus-three);
}
:root sl-radio-group.modal-radio-group sl-radio-button::part(button--checked):hover,
:host sl-radio-group.modal-radio-group sl-radio-button::part(button--checked):hover,
.sl-theme-light sl-radio-group.modal-radio-group sl-radio-button::part(button--checked):hover,
.sl-theme-dark sl-radio-group.modal-radio-group sl-radio-button::part(button--checked):hover {
  color: var(--op-color-primary-on-plus-seven);
  background-color: var(--op-color-primary-plus-seven);
}
:root sl-radio-group.modal-radio-group sl-radio-button::part(label),
:host sl-radio-group.modal-radio-group sl-radio-button::part(label),
.sl-theme-light sl-radio-group.modal-radio-group sl-radio-button::part(label),
.sl-theme-dark sl-radio-group.modal-radio-group sl-radio-button::part(label) {
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-normal);
}
:root sl-radio-group.projects-page-toggle,
:host sl-radio-group.projects-page-toggle,
.sl-theme-light sl-radio-group.projects-page-toggle,
.sl-theme-dark sl-radio-group.projects-page-toggle {
  --toggle-button-height: calc(var(--op-input-height-small) - calc(2 * var(--op-space-2x-small)));
}
:root sl-radio-group.projects-page-toggle::part(button-group__base),
:host sl-radio-group.projects-page-toggle::part(button-group__base),
.sl-theme-light sl-radio-group.projects-page-toggle::part(button-group__base),
.sl-theme-dark sl-radio-group.projects-page-toggle::part(button-group__base) {
  gap: var(--op-space-2x-small);
  height: var(--toggle-button-height);
}
:root sl-radio-group.projects-page-toggle::part(button-group),
:host sl-radio-group.projects-page-toggle::part(button-group),
.sl-theme-light sl-radio-group.projects-page-toggle::part(button-group),
.sl-theme-dark sl-radio-group.projects-page-toggle::part(button-group) {
  --projects-page-toggle-box-shadow: 0px 0px 8px 0px;
  border: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  border-radius: var(--op-radius-medium);
  padding: var(--op-space-2x-small);
}
:root sl-radio-group.projects-page-toggle::part(form-control-input),
:host sl-radio-group.projects-page-toggle::part(form-control-input),
.sl-theme-light sl-radio-group.projects-page-toggle::part(form-control-input),
.sl-theme-dark sl-radio-group.projects-page-toggle::part(form-control-input) {
  display: flex;
}
:root sl-radio-group.projects-page-toggle sl-radio-button::part(button),
:host sl-radio-group.projects-page-toggle sl-radio-button::part(button),
.sl-theme-light sl-radio-group.projects-page-toggle sl-radio-button::part(button),
.sl-theme-dark sl-radio-group.projects-page-toggle sl-radio-button::part(button) {
  vertical-align: top;
  min-height: var(--toggle-button-height);
  width: var(--op-input-height-small);
}
:root sl-radio-group.projects-page-toggle sl-radio-button::part(button):hover,
:host sl-radio-group.projects-page-toggle sl-radio-button::part(button):hover,
.sl-theme-light sl-radio-group.projects-page-toggle sl-radio-button::part(button):hover,
.sl-theme-dark sl-radio-group.projects-page-toggle sl-radio-button::part(button):hover {
  background-color: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-five);
}
:root sl-radio-group.projects-page-toggle sl-radio-button::part(button--checked),
:host sl-radio-group.projects-page-toggle sl-radio-button::part(button--checked),
.sl-theme-light sl-radio-group.projects-page-toggle sl-radio-button::part(button--checked),
.sl-theme-dark sl-radio-group.projects-page-toggle sl-radio-button::part(button--checked) {
  background-color: var(--op-color-primary-minus-two);
  color: var(--op-color-primary-on-minus-two);
}
:root sl-radio-group.projects-page-toggle sl-radio-button::part(button--checked):hover,
:host sl-radio-group.projects-page-toggle sl-radio-button::part(button--checked):hover,
.sl-theme-light sl-radio-group.projects-page-toggle sl-radio-button::part(button--checked):hover,
.sl-theme-dark sl-radio-group.projects-page-toggle sl-radio-button::part(button--checked):hover {
  background-color: var(--op-color-primary-minus-two);
  color: var(--op-color-primary-on-minus-two);
}
:root sl-radio-group.mobile-material-source,
:host sl-radio-group.mobile-material-source,
.sl-theme-light sl-radio-group.mobile-material-source,
.sl-theme-dark sl-radio-group.mobile-material-source {
  border-radius: var(--op-radius-large);
  background: var(--op-color-neutral-plus-seven);
  padding: var(--op-space-2x-small);
}
:root sl-radio-group.mobile-material-source::part(button-group__base),
:host sl-radio-group.mobile-material-source::part(button-group__base),
.sl-theme-light sl-radio-group.mobile-material-source::part(button-group__base),
.sl-theme-dark sl-radio-group.mobile-material-source::part(button-group__base) {
  gap: var(--op-space-2x-small);
}
:root sl-radio-group.mobile-material-source::part(button-group),
:host sl-radio-group.mobile-material-source::part(button-group),
.sl-theme-light sl-radio-group.mobile-material-source::part(button-group),
.sl-theme-dark sl-radio-group.mobile-material-source::part(button-group) {
  width: 100%;
  border: unset;
  padding: 0;
}
:root sl-radio-group.mobile-material-source sl-radio-button,
:host sl-radio-group.mobile-material-source sl-radio-button,
.sl-theme-light sl-radio-group.mobile-material-source sl-radio-button,
.sl-theme-dark sl-radio-group.mobile-material-source sl-radio-button {
  width: 100%;
}
:root sl-radio-group.mobile-material-source sl-radio-button::part(button),
:host sl-radio-group.mobile-material-source sl-radio-button::part(button),
.sl-theme-light sl-radio-group.mobile-material-source sl-radio-button::part(button),
.sl-theme-dark sl-radio-group.mobile-material-source sl-radio-button::part(button) {
  font-size: var(--op-font-small);
  height: var(--op-input-height-medium);
  line-height: unset;
  border-radius: var(--op-radius-large);
}
:root sl-radio-group.mobile-material-source sl-radio-button::part(button--checked),
:host sl-radio-group.mobile-material-source sl-radio-button::part(button--checked),
.sl-theme-light sl-radio-group.mobile-material-source sl-radio-button::part(button--checked),
.sl-theme-dark sl-radio-group.mobile-material-source sl-radio-button::part(button--checked) {
  font-weight: var(--op-font-weight-semi-bold);
}
:root sl-radio-group.radio-group-cards::part(button-group__base),
:host sl-radio-group.radio-group-cards::part(button-group__base),
.sl-theme-light sl-radio-group.radio-group-cards::part(button-group__base),
.sl-theme-dark sl-radio-group.radio-group-cards::part(button-group__base) {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  background-color: unset;
  width: 100%;
}
:root sl-radio-group.radio-group-cards::part(button-group),
:host sl-radio-group.radio-group-cards::part(button-group),
.sl-theme-light sl-radio-group.radio-group-cards::part(button-group),
.sl-theme-dark sl-radio-group.radio-group-cards::part(button-group) {
  width: 100%;
  border: unset;
}
:root sl-radio-group.radio-group-cards sl-radio-button,
:host sl-radio-group.radio-group-cards sl-radio-button,
.sl-theme-light sl-radio-group.radio-group-cards sl-radio-button,
.sl-theme-dark sl-radio-group.radio-group-cards sl-radio-button {
  background-color: var(--op-color-neutral-plus-max);
  border-radius: var(--op-radius-large);
  box-shadow: var(--op-border-all) var(--op-color-border);
}
:root sl-radio-group.radio-group-cards sl-radio-button::part(label),
:host sl-radio-group.radio-group-cards sl-radio-button::part(label),
.sl-theme-light sl-radio-group.radio-group-cards sl-radio-button::part(label),
.sl-theme-dark sl-radio-group.radio-group-cards sl-radio-button::part(label) {
  display: block;
  width: 100%;
}
:root sl-radio-group.radio-group-cards sl-radio-button:hover,
:host sl-radio-group.radio-group-cards sl-radio-button:hover,
.sl-theme-light sl-radio-group.radio-group-cards sl-radio-button:hover,
.sl-theme-dark sl-radio-group.radio-group-cards sl-radio-button:hover {
  border-radius: var(--op-radius-large);
  box-shadow: var(--op-border-all) var(--op-color-border);
}
:root sl-radio-group.radio-group-cards sl-radio-button .description,
:host sl-radio-group.radio-group-cards sl-radio-button .description,
.sl-theme-light sl-radio-group.radio-group-cards sl-radio-button .description,
.sl-theme-dark sl-radio-group.radio-group-cards sl-radio-button .description {
  --min-description-width: 8rem;
  font-size: var(--op-font-x-small);
  text-align: right;
  flex-basis: var(--min-description-width);
  flex-shrink: 0;
}
:root sl-radio-group.radio-group-cards sl-radio-button::part(button):hover,
:host sl-radio-group.radio-group-cards sl-radio-button::part(button):hover,
.sl-theme-light sl-radio-group.radio-group-cards sl-radio-button::part(button):hover,
.sl-theme-dark sl-radio-group.radio-group-cards sl-radio-button::part(button):hover {
  border-radius: var(--op-radius-large);
  box-shadow: var(--op-border-all) var(--op-color-border);
}
:root sl-radio-group.radio-group-cards sl-radio-button::part(button--checked),
:host sl-radio-group.radio-group-cards sl-radio-button::part(button--checked),
.sl-theme-light sl-radio-group.radio-group-cards sl-radio-button::part(button--checked),
.sl-theme-dark sl-radio-group.radio-group-cards sl-radio-button::part(button--checked) {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight);
  border-radius: var(--op-radius-large);
  box-shadow: var(--op-border-all-large) var(--op-color-primary-minus-three);
}
:root sl-radio-group.radio-group-cards sl-radio-button::part(button--checked):hover,
:host sl-radio-group.radio-group-cards sl-radio-button::part(button--checked):hover,
.sl-theme-light sl-radio-group.radio-group-cards sl-radio-button::part(button--checked):hover,
.sl-theme-dark sl-radio-group.radio-group-cards sl-radio-button::part(button--checked):hover {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight);
  box-shadow: var(--op-border-all-large) var(--op-color-primary-minus-three);
}
:root sl-radio-group.radio-group-cards sl-radio-button::part(label),
:host sl-radio-group.radio-group-cards sl-radio-button::part(label),
.sl-theme-light sl-radio-group.radio-group-cards sl-radio-button::part(label),
.sl-theme-dark sl-radio-group.radio-group-cards sl-radio-button::part(label) {
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-normal);
}
:root sl-radio-group.sl-radio-group--with-buttons::part(form-control-input),
:host sl-radio-group.sl-radio-group--with-buttons::part(form-control-input),
.sl-theme-light sl-radio-group.sl-radio-group--with-buttons::part(form-control-input),
.sl-theme-dark sl-radio-group.sl-radio-group--with-buttons::part(form-control-input) {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  background-color: unset;
  width: 100%;
}
:root sl-radio-group.sl-radio-group--with-buttons::part(button-group),
:host sl-radio-group.sl-radio-group--with-buttons::part(button-group),
.sl-theme-light sl-radio-group.sl-radio-group--with-buttons::part(button-group),
.sl-theme-dark sl-radio-group.sl-radio-group--with-buttons::part(button-group) {
  width: 100%;
  border: unset;
}
:root sl-radio-group.sl-radio-group--with-buttons a,
:host sl-radio-group.sl-radio-group--with-buttons a,
.sl-theme-light sl-radio-group.sl-radio-group--with-buttons a,
.sl-theme-dark sl-radio-group.sl-radio-group--with-buttons a {
  text-decoration: none;
}
:root sl-radio-group.sl-radio-group--with-buttons sl-radio::part(base),
:host sl-radio-group.sl-radio-group--with-buttons sl-radio::part(base),
.sl-theme-light sl-radio-group.sl-radio-group--with-buttons sl-radio::part(base),
.sl-theme-dark sl-radio-group.sl-radio-group--with-buttons sl-radio::part(base) {
  background-color: var(--op-color-neutral-plus-six);
  border-radius: var(--op-radius-pill);
  padding: var(--op-space-large);
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
}
:root sl-radio-group.sl-radio-group--with-buttons sl-radio[aria-checked=true]::part(base),
:host sl-radio-group.sl-radio-group--with-buttons sl-radio[aria-checked=true]::part(base),
.sl-theme-light sl-radio-group.sl-radio-group--with-buttons sl-radio[aria-checked=true]::part(base),
.sl-theme-dark sl-radio-group.sl-radio-group--with-buttons sl-radio[aria-checked=true]::part(base) {
  box-shadow: 0px 0px 0px var(--op-border-width-large) var(--op-color-primary-minus-three);
}
:root sl-radio-group.sl-radio-group--with-buttons sl-radio::part(control),
:host sl-radio-group.sl-radio-group--with-buttons sl-radio::part(control),
.sl-theme-light sl-radio-group.sl-radio-group--with-buttons sl-radio::part(control),
.sl-theme-dark sl-radio-group.sl-radio-group--with-buttons sl-radio::part(control) {
  position: relative;
  background-color: transparent;
  border-width: var(--op-border-width-large);
  border-color: var(--op-color-neutral-on-plus-max-alt);
  width: var(--op-space-large);
  height: var(--op-space-large);
}
:root sl-radio-group.sl-radio-group--with-buttons sl-radio::part(control--checked),
:host sl-radio-group.sl-radio-group--with-buttons sl-radio::part(control--checked),
.sl-theme-light sl-radio-group.sl-radio-group--with-buttons sl-radio::part(control--checked),
.sl-theme-dark sl-radio-group.sl-radio-group--with-buttons sl-radio::part(control--checked) {
  border-color: var(--op-color-primary-minus-three);
}
:root sl-radio-group.sl-radio-group--with-buttons sl-radio::part(control--checked):after,
:host sl-radio-group.sl-radio-group--with-buttons sl-radio::part(control--checked):after,
.sl-theme-light sl-radio-group.sl-radio-group--with-buttons sl-radio::part(control--checked):after,
.sl-theme-dark sl-radio-group.sl-radio-group--with-buttons sl-radio::part(control--checked):after {
  --radio-button-offset: 3px;
  --radio-indicator-size: 10px;
  content: "";
  position: absolute;
  top: var(--radio-button-offset);
  left: var(--radio-button-offset);
  border-radius: var(--op-radius-circle);
  background-color: var(--op-color-primary-minus-three);
  height: var(--radio-indicator-size);
  width: var(--radio-indicator-size);
}
:root sl-radio-group.sl-radio-group--with-buttons sl-radio::part(checked-icon),
:host sl-radio-group.sl-radio-group--with-buttons sl-radio::part(checked-icon),
.sl-theme-light sl-radio-group.sl-radio-group--with-buttons sl-radio::part(checked-icon),
.sl-theme-dark sl-radio-group.sl-radio-group--with-buttons sl-radio::part(checked-icon) {
  display: none;
}
:root sl-radio-group.sl-radio-group--with-buttons sl-radio::part(label),
:host sl-radio-group.sl-radio-group--with-buttons sl-radio::part(label),
.sl-theme-light sl-radio-group.sl-radio-group--with-buttons sl-radio::part(label),
.sl-theme-dark sl-radio-group.sl-radio-group--with-buttons sl-radio::part(label) {
  text-decoration: none;
  margin: 0;
  display: block;
  width: 100%;
  font-size: var(--op-font-medium);
  color: var(--op-color-neutral-on-plus-six);
  text-align: start;
}
:root sl-radio-group.sl-radio-group--with-buttons sl-radio:not([disabled]):hover,
:host sl-radio-group.sl-radio-group--with-buttons sl-radio:not([disabled]):hover,
.sl-theme-light sl-radio-group.sl-radio-group--with-buttons sl-radio:not([disabled]):hover,
.sl-theme-dark sl-radio-group.sl-radio-group--with-buttons sl-radio:not([disabled]):hover {
  border-radius: var(--op-radius-pill);
  box-shadow: var(--op-border-all) var(--op-color-primary-minus-three);
}
:root sl-radio-group.sl-radio-group-row,
:host sl-radio-group.sl-radio-group-row,
.sl-theme-light sl-radio-group.sl-radio-group-row,
.sl-theme-dark sl-radio-group.sl-radio-group-row {
  background-color: unset;
}
:root sl-radio-group.sl-radio-group-row::part(button-group),
:host sl-radio-group.sl-radio-group-row::part(button-group),
.sl-theme-light sl-radio-group.sl-radio-group-row::part(button-group),
.sl-theme-dark sl-radio-group.sl-radio-group-row::part(button-group) {
  border: none;
}
:root sl-radio-group.sl-radio-group-row::part(button-group__base),
:host sl-radio-group.sl-radio-group-row::part(button-group__base),
.sl-theme-light sl-radio-group.sl-radio-group-row::part(button-group__base),
.sl-theme-dark sl-radio-group.sl-radio-group-row::part(button-group__base) {
  display: flex;
  flex-direction: column;
}
:root sl-radio-group.sl-radio-group-row sl-radio-button,
:host sl-radio-group.sl-radio-group-row sl-radio-button,
.sl-theme-light sl-radio-group.sl-radio-group-row sl-radio-button,
.sl-theme-dark sl-radio-group.sl-radio-group-row sl-radio-button {
  width: 100%;
  height: unset;
  background: var(--op-color-neutral-plus-eight);
}
:root sl-radio-group.sl-radio-group-row sl-radio-button::part(label),
:host sl-radio-group.sl-radio-group-row sl-radio-button::part(label),
.sl-theme-light sl-radio-group.sl-radio-group-row sl-radio-button::part(label),
.sl-theme-dark sl-radio-group.sl-radio-group-row sl-radio-button::part(label) {
  width: 100%;
  display: flex;
  gap: var(--op-space-x-small);
  align-items: center;
}
:root sl-radio-group.sl-radio-group-row sl-radio-button::part(button),
:host sl-radio-group.sl-radio-group-row sl-radio-button::part(button),
.sl-theme-light sl-radio-group.sl-radio-group-row sl-radio-button::part(button),
.sl-theme-dark sl-radio-group.sl-radio-group-row sl-radio-button::part(button) {
  justify-content: start;
  border: var(--op-border-width) solid var(--op-color-border);
  border-radius: var(--op-radius-medium);
}
:root sl-radio-group.sl-radio-group-row sl-radio-button::part(button):hover,
:host sl-radio-group.sl-radio-group-row sl-radio-button::part(button):hover,
.sl-theme-light sl-radio-group.sl-radio-group-row sl-radio-button::part(button):hover,
.sl-theme-dark sl-radio-group.sl-radio-group-row sl-radio-button::part(button):hover {
  color: var(--op-color-neutral-on-plus-seven);
  background-color: var(--op-color-neutral-plus-max);
  border: var(--op-border-width) solid var(--op-color-primary-minus-two);
}
:root sl-radio-group.sl-radio-group-row sl-radio-button::part(button--checked),
:host sl-radio-group.sl-radio-group-row sl-radio-button::part(button--checked),
.sl-theme-light sl-radio-group.sl-radio-group-row sl-radio-button::part(button--checked),
.sl-theme-dark sl-radio-group.sl-radio-group-row sl-radio-button::part(button--checked) {
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-seven);
  border: var(--op-border-width) solid var(--op-color-primary-minus-two);
}

:root sl-details::part(header),
:host sl-details::part(header),
.sl-theme-light sl-details::part(header),
.sl-theme-dark sl-details::part(header) {
  flex-direction: row-reverse;
}
:root sl-details.summary-icon--end::part(header),
:host sl-details.summary-icon--end::part(header),
.sl-theme-light sl-details.summary-icon--end::part(header),
.sl-theme-dark sl-details.summary-icon--end::part(header) {
  flex-direction: row;
}
:root sl-details.summary-icon--none::part(summary-icon),
:host sl-details.summary-icon--none::part(summary-icon),
.sl-theme-light sl-details.summary-icon--none::part(summary-icon),
.sl-theme-dark sl-details.summary-icon--none::part(summary-icon) {
  display: none;
}
:root sl-details.sl-details--no-border::part(header),
:host sl-details.sl-details--no-border::part(header),
.sl-theme-light sl-details.sl-details--no-border::part(header),
.sl-theme-dark sl-details.sl-details--no-border::part(header) {
  border-radius: var(--op-radius-medium);
  overflow: hidden;
}
:root sl-details.sl-details--no-border[open]::part(header),
:host sl-details.sl-details--no-border[open]::part(header),
.sl-theme-light sl-details.sl-details--no-border[open]::part(header),
.sl-theme-dark sl-details.sl-details--no-border[open]::part(header) {
  background-color: unset;
  color: unset;
  border-bottom: unset;
  border-radius: var(--op-radius-medium);
  overflow: hidden;
}
:root sl-details.sl-details--no-border::part(base),
:host sl-details.sl-details--no-border::part(base),
.sl-theme-light sl-details.sl-details--no-border::part(base),
.sl-theme-dark sl-details.sl-details--no-border::part(base) {
  border: unset;
  border-radius: unset;
  background-color: unset;
  border-radius: var(--op-radius-medium);
  overflow: hidden;
}
:root sl-details.sl-details--small:not([open])::part(header),
:root sl-details.sl-details--medium:not([open])::part(header),
:root sl-details.sl-details--large:not([open])::part(header),
:host sl-details.sl-details--small:not([open])::part(header),
:host sl-details.sl-details--medium:not([open])::part(header),
:host sl-details.sl-details--large:not([open])::part(header),
.sl-theme-light sl-details.sl-details--small:not([open])::part(header),
.sl-theme-light sl-details.sl-details--medium:not([open])::part(header),
.sl-theme-light sl-details.sl-details--large:not([open])::part(header),
.sl-theme-dark sl-details.sl-details--small:not([open])::part(header),
.sl-theme-dark sl-details.sl-details--medium:not([open])::part(header),
.sl-theme-dark sl-details.sl-details--large:not([open])::part(header) {
  border-bottom: none;
}
:root sl-details.sl-details--x-small::part(header),
:host sl-details.sl-details--x-small::part(header),
.sl-theme-light sl-details.sl-details--x-small::part(header),
.sl-theme-dark sl-details.sl-details--x-small::part(header) {
  height: var(--op-space-medium);
  padding: 0 var(--op-space-small);
}
:root sl-details.sl-details--x-small[open]::part(header),
:host sl-details.sl-details--x-small[open]::part(header),
.sl-theme-light sl-details.sl-details--x-small[open]::part(header),
.sl-theme-dark sl-details.sl-details--x-small[open]::part(header) {
  background-color: unset;
  color: unset;
}
:root sl-details.sl-details--x-small::part(base),
:host sl-details.sl-details--x-small::part(base),
.sl-theme-light sl-details.sl-details--x-small::part(base),
.sl-theme-dark sl-details.sl-details--x-small::part(base) {
  border-radius: var(--op-radius-large);
}
:root sl-details.sl-details--x-small:hover,
:host sl-details.sl-details--x-small:hover,
.sl-theme-light sl-details.sl-details--x-small:hover,
.sl-theme-dark sl-details.sl-details--x-small:hover {
  background-color: unset;
  color: unset;
}
:root sl-details.sl-details--x-small::part(content),
:host sl-details.sl-details--x-small::part(content),
.sl-theme-light sl-details.sl-details--x-small::part(content),
.sl-theme-dark sl-details.sl-details--x-small::part(content) {
  padding: 0;
}
:root sl-details.sl-details--small::part(header),
:host sl-details.sl-details--small::part(header),
.sl-theme-light sl-details.sl-details--small::part(header),
.sl-theme-dark sl-details.sl-details--small::part(header) {
  gap: var(--op-space-x-small);
  padding: var(--op-space-x-small) var(--op-space-small);
  font-size: var(--op-font-x-small);
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
  border-bottom: var(--op-border-width) solid var(--op-color-border);
  height: var(--op-input-height-small);
  padding: 0 var(--op-space-small);
}
:root sl-details.sl-details--small::part(header):hover,
:host sl-details.sl-details--small::part(header):hover,
.sl-theme-light sl-details.sl-details--small::part(header):hover,
.sl-theme-dark sl-details.sl-details--small::part(header):hover {
  background-color: var(--op-color-primary-plus-seven);
  color: var(--op-color-neutral-on-plus-seven);
}
:root sl-details.sl-details--small[open]::part(header),
:host sl-details.sl-details--small[open]::part(header),
.sl-theme-light sl-details.sl-details--small[open]::part(header),
.sl-theme-dark sl-details.sl-details--small[open]::part(header) {
  background-color: var(--op-color-primary-plus-seven);
  color: var(--op-color-neutral-on-plus-seven);
}
:root sl-details.sl-details--small::part(summary),
:host sl-details.sl-details--small::part(summary),
.sl-theme-light sl-details.sl-details--small::part(summary),
.sl-theme-dark sl-details.sl-details--small::part(summary) {
  color: var(--op-color-neutral-on-plus-eight);
  font-weight: var(--op-font-weight-medium);
}
:root sl-details.sl-details--small::part(summary-icon),
:host sl-details.sl-details--small::part(summary-icon),
.sl-theme-light sl-details.sl-details--small::part(summary-icon),
.sl-theme-dark sl-details.sl-details--small::part(summary-icon) {
  color: var(--op-color-primary-on-plus-eight);
}
:root sl-details.sl-details--small::part(base),
:host sl-details.sl-details--small::part(base),
.sl-theme-light sl-details.sl-details--small::part(base),
.sl-theme-dark sl-details.sl-details--small::part(base) {
  border-radius: var(--op-radius-medium);
  background: var(--op-color-neutral-plus-eight);
  overflow: hidden;
}
:root sl-details.sl-details--small::part(content),
:host sl-details.sl-details--small::part(content),
.sl-theme-light sl-details.sl-details--small::part(content),
.sl-theme-dark sl-details.sl-details--small::part(content) {
  padding: 0;
}
:root sl-details.sl-details--medium::part(header),
:host sl-details.sl-details--medium::part(header),
.sl-theme-light sl-details.sl-details--medium::part(header),
.sl-theme-dark sl-details.sl-details--medium::part(header) {
  height: var(--op-input-height-small);
  padding: var(--op-space-x-small) var(--op-space-small) var(--op-space-x-small) var(--op-space-medium);
  gap: var(--op-space-x-small);
  border-bottom: var(--op-border-width) solid var(--op-color-border);
}
:root sl-details.sl-details--medium::part(header):hover,
:host sl-details.sl-details--medium::part(header):hover,
.sl-theme-light sl-details.sl-details--medium::part(header):hover,
.sl-theme-dark sl-details.sl-details--medium::part(header):hover {
  background-color: var(--op-color-primary-plus-seven);
  color: var(--op-color-primary-on-plus-seven);
}
:root sl-details.sl-details--medium[open]::part(header),
:host sl-details.sl-details--medium[open]::part(header),
.sl-theme-light sl-details.sl-details--medium[open]::part(header),
.sl-theme-dark sl-details.sl-details--medium[open]::part(header) {
  background-color: unset;
  color: var(--op-color-neutral-on-plus-seven);
}
:root sl-details.sl-details--medium[open]::part(header):hover,
:host sl-details.sl-details--medium[open]::part(header):hover,
.sl-theme-light sl-details.sl-details--medium[open]::part(header):hover,
.sl-theme-dark sl-details.sl-details--medium[open]::part(header):hover {
  background-color: var(--op-color-primary-plus-seven);
  color: var(--op-color-primary-on-plus-seven);
}
:root sl-details.sl-details--medium::part(summary),
:host sl-details.sl-details--medium::part(summary),
.sl-theme-light sl-details.sl-details--medium::part(summary),
.sl-theme-dark sl-details.sl-details--medium::part(summary) {
  color: var(--op-color-neutral-on-plus-eight);
  font-weight: var(--op-font-weight-medium);
}
:root sl-details.sl-details--medium::part(summary-icon),
:host sl-details.sl-details--medium::part(summary-icon),
.sl-theme-light sl-details.sl-details--medium::part(summary-icon),
.sl-theme-dark sl-details.sl-details--medium::part(summary-icon) {
  color: var(--op-color-primary-on-plus-eight);
}
:root sl-details.sl-details--medium::part(content),
:host sl-details.sl-details--medium::part(content),
.sl-theme-light sl-details.sl-details--medium::part(content),
.sl-theme-dark sl-details.sl-details--medium::part(content) {
  padding: 0;
}
:root sl-details.sl-details--medium::part(base),
:host sl-details.sl-details--medium::part(base),
.sl-theme-light sl-details.sl-details--medium::part(base),
.sl-theme-dark sl-details.sl-details--medium::part(base) {
  border-radius: var(--op-radius-medium);
  overflow: hidden;
}
:root sl-details.sl-details--medium.ai-materials-modal::part(header),
:host sl-details.sl-details--medium.ai-materials-modal::part(header),
.sl-theme-light sl-details.sl-details--medium.ai-materials-modal::part(header),
.sl-theme-dark sl-details.sl-details--medium.ai-materials-modal::part(header) {
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
}
:root sl-details.sl-details--medium.ai-materials-modal[open]::part(header),
:host sl-details.sl-details--medium.ai-materials-modal[open]::part(header),
.sl-theme-light sl-details.sl-details--medium.ai-materials-modal[open]::part(header),
.sl-theme-dark sl-details.sl-details--medium.ai-materials-modal[open]::part(header) {
  background-color: var(--op-color-primary-plus-seven);
  color: var(--op-color-neutral-on-plus-seven);
}
:root sl-details.sl-details--large::part(header),
:host sl-details.sl-details--large::part(header),
.sl-theme-light sl-details.sl-details--large::part(header),
.sl-theme-dark sl-details.sl-details--large::part(header) {
  padding: var(--op-space-small) var(--op-space-small) var(--op-space-small) var(--op-space-medium);
  gap: var(--op-space-x-small);
  border-bottom: var(--op-border-width) solid var(--op-color-border);
  overflow: hidden;
}
:root sl-details.sl-details--large::part(header):hover,
:host sl-details.sl-details--large::part(header):hover,
.sl-theme-light sl-details.sl-details--large::part(header):hover,
.sl-theme-dark sl-details.sl-details--large::part(header):hover {
  background-color: var(--op-color-primary-plus-seven);
  color: var(--op-color-neutral-on-plus-seven);
  overflow: hidden;
}
:root sl-details.sl-details--large[open]::part(header),
:host sl-details.sl-details--large[open]::part(header),
.sl-theme-light sl-details.sl-details--large[open]::part(header),
.sl-theme-dark sl-details.sl-details--large[open]::part(header) {
  background-color: var(--op-color-primary-plus-seven);
  color: var(--op-color-neutral-on-plus-seven);
  overflow: hidden;
}
:root sl-details.sl-details--large:not([open]) .open-property-link,
:host sl-details.sl-details--large:not([open]) .open-property-link,
.sl-theme-light sl-details.sl-details--large:not([open]) .open-property-link,
.sl-theme-dark sl-details.sl-details--large:not([open]) .open-property-link {
  display: none;
}
:root sl-details.sl-details--large::part(base),
:host sl-details.sl-details--large::part(base),
.sl-theme-light sl-details.sl-details--large::part(base),
.sl-theme-dark sl-details.sl-details--large::part(base) {
  border: var(--op-border-width) solid var(--op-color-border);
  border-radius: var(--op-radius-large);
  background-color: var(--op-color-neutral-plus-eight);
  overflow: hidden;
}
:root sl-details.sl-details--large::part(summary),
:host sl-details.sl-details--large::part(summary),
.sl-theme-light sl-details.sl-details--large::part(summary),
.sl-theme-dark sl-details.sl-details--large::part(summary) {
  color: var(--op-color-neutral-on-plus-eight);
  font-weight: var(--op-font-weight-normal);
}
:root sl-details.sl-details--large::part(summary-icon),
:host sl-details.sl-details--large::part(summary-icon),
.sl-theme-light sl-details.sl-details--large::part(summary-icon),
.sl-theme-dark sl-details.sl-details--large::part(summary-icon) {
  color: var(--op-color-primary-on-plus-eight);
}
:root sl-details.sl-details--large::part(content),
:host sl-details.sl-details--large::part(content),
.sl-theme-light sl-details.sl-details--large::part(content),
.sl-theme-dark sl-details.sl-details--large::part(content) {
  padding: 0;
  overflow: hidden;
}
:root sl-details.sl-details--large .table__container,
:host sl-details.sl-details--large .table__container,
.sl-theme-light sl-details.sl-details--large .table__container,
.sl-theme-dark sl-details.sl-details--large .table__container {
  padding: var(--op-space-medium);
}
:root sl-details.sl-details--large .table__container.proposal-layout-section__contents,
:host sl-details.sl-details--large .table__container.proposal-layout-section__contents,
.sl-theme-light sl-details.sl-details--large .table__container.proposal-layout-section__contents,
.sl-theme-dark sl-details.sl-details--large .table__container.proposal-layout-section__contents {
  padding: 0;
}
:root sl-details.sl-details--alt.summary-icon--end::part(header),
:host sl-details.sl-details--alt.summary-icon--end::part(header),
.sl-theme-light sl-details.sl-details--alt.summary-icon--end::part(header),
.sl-theme-dark sl-details.sl-details--alt.summary-icon--end::part(header) {
  --op-border-width-2x-large: 8px;
  display: flex;
  padding: var(--op-space-x-large) var(--op-space-large) var(--op-space-large) var(--op-space-large);
  gap: var(--op-space-x-large);
  border-radius: var(--op-radius-large);
  border-top: var(--op-border-width-2x-large) solid var(--op-color-primary-base);
  background: var(--op-color-neutral-plus-eight);
  align-items: center;
  position: relative;
  cursor: default;
  /* --op-breakpoint-large */
}
@media (max-width: 1280px) {
  :root sl-details.sl-details--alt.summary-icon--end::part(header),
  :host sl-details.sl-details--alt.summary-icon--end::part(header),
  .sl-theme-light sl-details.sl-details--alt.summary-icon--end::part(header),
  .sl-theme-dark sl-details.sl-details--alt.summary-icon--end::part(header) {
    flex-direction: column;
  }
}
:root sl-details.sl-details--alt.summary-icon--end::part(summary-icon),
:host sl-details.sl-details--alt.summary-icon--end::part(summary-icon),
.sl-theme-light sl-details.sl-details--alt.summary-icon--end::part(summary-icon),
.sl-theme-dark sl-details.sl-details--alt.summary-icon--end::part(summary-icon) {
  /* --op-breakpoint-large */
}
@media (max-width: 1280px) {
  :root sl-details.sl-details--alt.summary-icon--end::part(summary-icon),
  :host sl-details.sl-details--alt.summary-icon--end::part(summary-icon),
  .sl-theme-light sl-details.sl-details--alt.summary-icon--end::part(summary-icon),
  .sl-theme-dark sl-details.sl-details--alt.summary-icon--end::part(summary-icon) {
    align-self: flex-end;
  }
}
:root sl-details.sl-details--alt.summary-icon--end::part(summary),
:host sl-details.sl-details--alt.summary-icon--end::part(summary),
.sl-theme-light sl-details.sl-details--alt.summary-icon--end::part(summary),
.sl-theme-dark sl-details.sl-details--alt.summary-icon--end::part(summary) {
  /* --op-breakpoint-large */
}
@media (max-width: 1280px) {
  :root sl-details.sl-details--alt.summary-icon--end::part(summary),
  :host sl-details.sl-details--alt.summary-icon--end::part(summary),
  .sl-theme-light sl-details.sl-details--alt.summary-icon--end::part(summary),
  .sl-theme-dark sl-details.sl-details--alt.summary-icon--end::part(summary) {
    align-self: flex-start;
  }
}
:root sl-details.sl-details--alt::part(base),
:host sl-details.sl-details--alt::part(base),
.sl-theme-light sl-details.sl-details--alt::part(base),
.sl-theme-dark sl-details.sl-details--alt::part(base) {
  border: var(--op-border-width) solid var(--op-color-border);
  border-radius: var(--op-radius-large);
  background-color: var(--op-color-neutral-plus-eight);
  overflow: hidden;
}
:root sl-details.sl-details--alt::part(content),
:host sl-details.sl-details--alt::part(content),
.sl-theme-light sl-details.sl-details--alt::part(content),
.sl-theme-dark sl-details.sl-details--alt::part(content) {
  padding: var(--op-space-large);
}
:root sl-details.sl-details__content--collapsed::part(content),
:host sl-details.sl-details__content--collapsed::part(content),
.sl-theme-light sl-details.sl-details__content--collapsed::part(content),
.sl-theme-dark sl-details.sl-details__content--collapsed::part(content) {
  padding: var(--op-space-small);
}
:root sl-details.sl-details__content--expanded::part(content),
:host sl-details.sl-details__content--expanded::part(content),
.sl-theme-light sl-details.sl-details__content--expanded::part(content),
.sl-theme-dark sl-details.sl-details__content--expanded::part(content) {
  padding: var(--op-space-medium);
}
:root sl-details.custom-icon::part(summary-icon),
:host sl-details.custom-icon::part(summary-icon),
.sl-theme-light sl-details.custom-icon::part(summary-icon),
.sl-theme-dark sl-details.custom-icon::part(summary-icon) {
  rotate: none;
}
:root .grouping__container,
:host .grouping__container,
.sl-theme-light .grouping__container,
.sl-theme-dark .grouping__container {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  border-radius: var(--op-radius-large);
}
:root,
:host,
.sl-theme-light,
.sl-theme-dark {
  /* sl-details.proposal__group-details::part(header),
  sl-details.proposal-layout-section::part(header),
  sl-details.template-form::part(header) {
    padding: var(--op-space-x-small) var(--op-space-small);
  } */
}
:root sl-details:not(.onboarding-module, .proposal__group-details, .proposal-layout-section, .project)::part(header),
:host sl-details:not(.onboarding-module, .proposal__group-details, .proposal-layout-section, .project)::part(header),
.sl-theme-light sl-details:not(.onboarding-module, .proposal__group-details, .proposal-layout-section, .project)::part(header),
.sl-theme-dark sl-details:not(.onboarding-module, .proposal__group-details, .proposal-layout-section, .project)::part(header) {
  /* height: var(--op-input-height-small);
  padding: 0 var(--op-space-small); */
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  :root sl-details:not(.onboarding-module, .proposal__group-details, .proposal-layout-section, .project)::part(header),
  :host sl-details:not(.onboarding-module, .proposal__group-details, .proposal-layout-section, .project)::part(header),
  .sl-theme-light sl-details:not(.onboarding-module, .proposal__group-details, .proposal-layout-section, .project)::part(header),
  .sl-theme-dark sl-details:not(.onboarding-module, .proposal__group-details, .proposal-layout-section, .project)::part(header) {
    /* height: var(--op-input-height-medium); */
  }
}
:root .project-group,
:root .property-group,
:host .project-group,
:host .property-group,
.sl-theme-light .project-group,
.sl-theme-light .property-group,
.sl-theme-dark .project-group,
.sl-theme-dark .property-group {
  /* sl-details[open]::part(header) {
    background-color: var(--op-color-primary-plus-six);
    color: var(--op-color-primary-on-plus-six);
    border-radius: 0;
  }

  sl-details::part(header) {
    border-radius: 0;
    margin: 0;
    background-color: var(--op-color-neutral-plus-eight);

    &:hover {
      background-color: var(--op-color-primary-plus-eight);
    }
  } */
}
:root .section-details sl-details::part(header),
:host .section-details sl-details::part(header),
.sl-theme-light .section-details sl-details::part(header),
.sl-theme-dark .section-details sl-details::part(header) {
  /* padding: var(--op-space-x-small);
  */
}
:root .section-details sl-details::part(header):hover,
:host .section-details sl-details::part(header):hover,
.sl-theme-light .section-details sl-details::part(header):hover,
.sl-theme-dark .section-details sl-details::part(header):hover {
  /* background-color: var(--op-color-primary-plus-seven);
  color: var(--op-color-primary-on-plus-seven);
  border-radius: var(--op-radius-medium); */
}
:root .section-details sl-details::part(summary),
:host .section-details sl-details::part(summary),
.sl-theme-light .section-details sl-details::part(summary),
.sl-theme-dark .section-details sl-details::part(summary) {
  /* color: var(--op-color-neutral-on-plus-six); */
  /* font-weight: var(--op-font-weight-medium); */
}
:root .section-details sl-details::part(base),
:host .section-details sl-details::part(base),
.sl-theme-light .section-details sl-details::part(base),
.sl-theme-dark .section-details sl-details::part(base) {
  /* margin: 0;
  background-color: unset; */
  /* border: unset; */
}
:root .markup-panel sl-details::part(header),
:host .markup-panel sl-details::part(header),
.sl-theme-light .markup-panel sl-details::part(header),
.sl-theme-dark .markup-panel sl-details::part(header) {
  /* font-size: var(--op-font-x-small); */
  /* background-color: var(--op-color-neutral-plus-six); */
  /* font-weight: var(--op-font-weight-medium); */
}
:root .markup-panel sl-details::part(header):hover,
:host .markup-panel sl-details::part(header):hover,
.sl-theme-light .markup-panel sl-details::part(header):hover,
.sl-theme-dark .markup-panel sl-details::part(header):hover {
  /* background-color: var(--op-color-primary-plus-five); */
}
:root .markup-panel sl-details::part(summary),
:host .markup-panel sl-details::part(summary),
.sl-theme-light .markup-panel sl-details::part(summary),
.sl-theme-dark .markup-panel sl-details::part(summary) {
  /* color: var(--op-color-neutral-on-plus-six); */
}
:root .markup-panel sl-details[open]::part(header),
:host .markup-panel sl-details[open]::part(header),
.sl-theme-light .markup-panel sl-details[open]::part(header),
.sl-theme-dark .markup-panel sl-details[open]::part(header) {
  /* border-radius: var(--op-radius-medium) var(--op-radius-medium) 0 0; */
}
:root .markup-panel sl-details::part(base),
:host .markup-panel sl-details::part(base),
.sl-theme-light .markup-panel sl-details::part(base),
.sl-theme-dark .markup-panel sl-details::part(base) {
  /* border-radius: var(--op-radius-medium); */
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  :root .markup-panel sl-details::part(base),
  :host .markup-panel sl-details::part(base),
  .sl-theme-light .markup-panel sl-details::part(base),
  .sl-theme-dark .markup-panel sl-details::part(base) {
    border-radius: var(--op-radius-large);
  }
}
:root .estimate-rollup sl-details::part(header),
:host .estimate-rollup sl-details::part(header),
.sl-theme-light .estimate-rollup sl-details::part(header),
.sl-theme-dark .estimate-rollup sl-details::part(header) {
  /* font-size: var(--op-font-x-small); */
}
:root sl-details.template-form[open]::part(header),
:host sl-details.template-form[open]::part(header),
.sl-theme-light sl-details.template-form[open]::part(header),
.sl-theme-dark sl-details.template-form[open]::part(header) {
  /* border-radius: var(--op-radius-large) var(--op-radius-large) 0 0; */
}
:root sl-details.template-form[size=large]::part(combobox),
:host sl-details.template-form[size=large]::part(combobox),
.sl-theme-light sl-details.template-form[size=large]::part(combobox),
.sl-theme-dark sl-details.template-form[size=large]::part(combobox) {
  /* background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four); */
}
:root sl-details.template-form::part(base),
:host sl-details.template-form::part(base),
.sl-theme-light sl-details.template-form::part(base),
.sl-theme-dark sl-details.template-form::part(base) {
  /* background: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  border-radius: var(--op-radius-medium); */
}
:root sl-details.template-form::part(summary),
:host sl-details.template-form::part(summary),
.sl-theme-light sl-details.template-form::part(summary),
.sl-theme-dark sl-details.template-form::part(summary) {
  /* color: var(--op-color-neutral-on-plus-four); */
}
:root sl-details.template-form::part(summary):hover,
:host sl-details.template-form::part(summary):hover,
.sl-theme-light sl-details.template-form::part(summary):hover,
.sl-theme-dark sl-details.template-form::part(summary):hover {
  /* color: var(--op-color-primary-on-plus-eight) */
}
:root sl-details.new-bulk-order__details-header::part(header),
:host sl-details.new-bulk-order__details-header::part(header),
.sl-theme-light sl-details.new-bulk-order__details-header::part(header),
.sl-theme-dark sl-details.new-bulk-order__details-header::part(header) {
  /* height: var(--op-space-3x-large);
  background-color: var(--op-color-primary-plus-seven);
  flex-direction: row;
  border-bottom: var(--op-border-width) solid var(--op-color-border);
  border-radius: var(--op-radius-large) var(--op-radius-large) 0 0; */
}
:root sl-details.proposal-layout-section::part(header),
:host sl-details.proposal-layout-section::part(header),
.sl-theme-light sl-details.proposal-layout-section::part(header),
.sl-theme-dark sl-details.proposal-layout-section::part(header) {
  /* height: var(--op-input-height-large);
  padding-top: 0;
  padding-bottom: 0;
  height: unset; */
}
:root sl-details.proposal-layout-section::part(header):hover,
:host sl-details.proposal-layout-section::part(header):hover,
.sl-theme-light sl-details.proposal-layout-section::part(header):hover,
.sl-theme-dark sl-details.proposal-layout-section::part(header):hover {
  /* background: var(--op-color-primary-plus-six); */
}
:root sl-details.proposal-layout-section .header-padded-section,
:host sl-details.proposal-layout-section .header-padded-section,
.sl-theme-light sl-details.proposal-layout-section .header-padded-section,
.sl-theme-dark sl-details.proposal-layout-section .header-padded-section {
  /* padding: var(--op-space-small) var(--op-space-small) var(--op-space-small) 0; */
}
:root sl-details.proposal-layout-section[open]::part(header),
:host sl-details.proposal-layout-section[open]::part(header),
.sl-theme-light sl-details.proposal-layout-section[open]::part(header),
.sl-theme-dark sl-details.proposal-layout-section[open]::part(header) {
  /* border-radius: 0;
  border-bottom: var(--op-border-width) solid var(--op-color-border); */
}
:root sl-details.proposal-layout-section .table__container,
:host sl-details.proposal-layout-section .table__container,
.sl-theme-light sl-details.proposal-layout-section .table__container,
.sl-theme-dark sl-details.proposal-layout-section .table__container {
  /* padding: var(--op-space-medium); */
}
:root .details-closed-shape-drawing-options::part(header):hover,
:host .details-closed-shape-drawing-options::part(header):hover,
.sl-theme-light .details-closed-shape-drawing-options::part(header):hover,
.sl-theme-dark .details-closed-shape-drawing-options::part(header):hover {
  /* background: var(--op-color-primary-plus-seven); */
}
:root .details-closed-shape-drawing-options::part(summary),
:host .details-closed-shape-drawing-options::part(summary),
.sl-theme-light .details-closed-shape-drawing-options::part(summary),
.sl-theme-dark .details-closed-shape-drawing-options::part(summary) {
  /* font-size: 14px; */
}
:root .sl-details.estimate-request__details-panel,
:host .sl-details.estimate-request__details-panel,
.sl-theme-light .sl-details.estimate-request__details-panel,
.sl-theme-dark .sl-details.estimate-request__details-panel {
  /* background-color: var(--op-color-neutral-plus-eight);
  padding: var(--op-space-medium);
  gap: var(--op-space-small); */
}

:root sl-dialog,
:host sl-dialog,
.sl-theme-light sl-dialog,
.sl-theme-dark sl-dialog {
  --width: var(--op-dialog-default-width);
  --body-spacing: var(--sl-spacing-x-large);
}
:root sl-dialog[size=small],
:host sl-dialog[size=small],
.sl-theme-light sl-dialog[size=small],
.sl-theme-dark sl-dialog[size=small] {
  --width: var(--op-dialog-small-width);
}
:root sl-dialog[size=large],
:host sl-dialog[size=large],
.sl-theme-light sl-dialog[size=large],
.sl-theme-dark sl-dialog[size=large] {
  --width: var(--op-dialog-large-width);
}
:root sl-dialog[size=x-large],
:host sl-dialog[size=x-large],
.sl-theme-light sl-dialog[size=x-large],
.sl-theme-dark sl-dialog[size=x-large] {
  --width: var(--op-dialog-x-large-width);
}
:root sl-dialog[size="2x-large"],
:host sl-dialog[size="2x-large"],
.sl-theme-light sl-dialog[size="2x-large"],
.sl-theme-dark sl-dialog[size="2x-large"] {
  --width: var(--op-dialog-2x-large-width);
}
:root sl-dialog[size="3x-large"],
:host sl-dialog[size="3x-large"],
.sl-theme-light sl-dialog[size="3x-large"],
.sl-theme-dark sl-dialog[size="3x-large"] {
  --width: var(--op-dialog-3x-large-width);
}
:root sl-dialog.above-other-modals,
:host sl-dialog.above-other-modals,
.sl-theme-light sl-dialog.above-other-modals,
.sl-theme-dark sl-dialog.above-other-modals {
  --sl-z-index-dialog: calc(var(--op-z-index-alert-group) + 1);
}
:root sl-dialog[size=fullscreen],
:host sl-dialog[size=fullscreen],
.sl-theme-light sl-dialog[size=fullscreen],
.sl-theme-dark sl-dialog[size=fullscreen] {
  --width: 100%;
}
:root sl-dialog[size=fullscreen]::part(panel),
:host sl-dialog[size=fullscreen]::part(panel),
.sl-theme-light sl-dialog[size=fullscreen]::part(panel),
.sl-theme-dark sl-dialog[size=fullscreen]::part(panel) {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  border-radius: 0;
}
:root sl-dialog[size=fullscreen]::part(close-button),
:host sl-dialog[size=fullscreen]::part(close-button),
.sl-theme-light sl-dialog[size=fullscreen]::part(close-button),
.sl-theme-dark sl-dialog[size=fullscreen]::part(close-button) {
  color: var(--op-color-neutral-on-plus-max);
}
:root sl-dialog[size=fullscreen]::part(header),
:host sl-dialog[size=fullscreen]::part(header),
.sl-theme-light sl-dialog[size=fullscreen]::part(header),
.sl-theme-dark sl-dialog[size=fullscreen]::part(header) {
  border-radius: 0;
  border: none;
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  :root sl-dialog[size=fullscreen]::part(header),
  :host sl-dialog[size=fullscreen]::part(header),
  .sl-theme-light sl-dialog[size=fullscreen]::part(header),
  .sl-theme-dark sl-dialog[size=fullscreen]::part(header) {
    border-bottom: var(--op-border-width) solid var(--op-color-border);
  }
}
:root sl-dialog[size=fullscreen]::part(body),
:host sl-dialog[size=fullscreen]::part(body),
.sl-theme-light sl-dialog[size=fullscreen]::part(body),
.sl-theme-dark sl-dialog[size=fullscreen]::part(body) {
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
}
:root sl-dialog[size=fullscreen]::part(footer),
:host sl-dialog[size=fullscreen]::part(footer),
.sl-theme-light sl-dialog[size=fullscreen]::part(footer),
.sl-theme-dark sl-dialog[size=fullscreen]::part(footer) {
  border-radius: 0;
}
:root sl-dialog.modal--with-header-back-button::part(title),
:host sl-dialog.modal--with-header-back-button::part(title),
.sl-theme-light sl-dialog.modal--with-header-back-button::part(title),
.sl-theme-dark sl-dialog.modal--with-header-back-button::part(title) {
  padding-left: calc(var(--op-space-x-large) * 3);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  :root sl-dialog.modal--with-header-back-button::part(title),
  :host sl-dialog.modal--with-header-back-button::part(title),
  .sl-theme-light sl-dialog.modal--with-header-back-button::part(title),
  .sl-theme-dark sl-dialog.modal--with-header-back-button::part(title) {
    padding-right: 0;
  }
}
:root sl-dialog::part(body),
:host sl-dialog::part(body),
.sl-theme-light sl-dialog::part(body),
.sl-theme-dark sl-dialog::part(body) {
  --body-spacing: var(--op-space-x-large) var(--op-space-x-large);
  padding: 0;
}
:root sl-dialog.overflow-visible::part(body),
:host sl-dialog.overflow-visible::part(body),
.sl-theme-light sl-dialog.overflow-visible::part(body),
.sl-theme-dark sl-dialog.overflow-visible::part(body) {
  overflow: visible;
}
:root sl-dialog.body-overflow-hidden::part(body),
:host sl-dialog.body-overflow-hidden::part(body),
.sl-theme-light sl-dialog.body-overflow-hidden::part(body),
.sl-theme-dark sl-dialog.body-overflow-hidden::part(body) {
  overflow: hidden;
}
:root sl-dialog::part(footer),
:host sl-dialog::part(footer),
.sl-theme-light sl-dialog::part(footer),
.sl-theme-dark sl-dialog::part(footer) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--op-space-small) var(--op-space-x-large);
  background-color: var(--op-color-neutral-plus-max);
  border-bottom-left-radius: var(--op-radius-large);
  border-bottom-right-radius: var(--op-radius-large);
  box-shadow: var(--op-border-top) var(--op-color-border);
  width: 100%;
}
@media (width < 1024px) {
  :root sl-dialog::part(footer),
  :host sl-dialog::part(footer),
  .sl-theme-light sl-dialog::part(footer),
  .sl-theme-dark sl-dialog::part(footer) {
    padding: 0 var(--op-space-large) var(--op-space-medium) var(--op-space-large);
    box-shadow: none;
  }
}
:root sl-dialog.dialog--no-footer::part(footer),
:host sl-dialog.dialog--no-footer::part(footer),
.sl-theme-light sl-dialog.dialog--no-footer::part(footer),
.sl-theme-dark sl-dialog.dialog--no-footer::part(footer) {
  display: none;
}
:root sl-dialog::part(header),
:host sl-dialog::part(header),
.sl-theme-light sl-dialog::part(header),
.sl-theme-dark sl-dialog::part(header) {
  --header-spacing: var(--op-space-medium) var(--op-space-x-large);
  background-color: var(--op-color-neutral-plus-max);
  border-top-left-radius: var(--op-radius-large);
  border-top-right-radius: var(--op-radius-large);
  border-bottom: solid var(--op-border-width) var(--op-color-border);
  align-items: center;
}
@media (width < 1024px) {
  :root sl-dialog::part(header),
  :host sl-dialog::part(header),
  .sl-theme-light sl-dialog::part(header),
  .sl-theme-dark sl-dialog::part(header) {
    --header-spacing: var(--op-space-medium) var(--op-space-large);
    border-bottom: 0;
  }
}
:root sl-dialog.dialog--floating-header::part(header),
:host sl-dialog.dialog--floating-header::part(header),
.sl-theme-light sl-dialog.dialog--floating-header::part(header),
.sl-theme-dark sl-dialog.dialog--floating-header::part(header) {
  --padding: var(--op-space-2x-large);
  --fixed-height: 4.8rem;
  /* --op-breakpoint-2x-small */
}
@media (max-width: 390px) {
  :root sl-dialog.dialog--floating-header::part(header),
  :host sl-dialog.dialog--floating-header::part(header),
  .sl-theme-light sl-dialog.dialog--floating-header::part(header),
  .sl-theme-dark sl-dialog.dialog--floating-header::part(header) {
    --padding: var(--op-space-large);
  }
}
:root sl-dialog.dialog--floating-header::part(header),
:host sl-dialog.dialog--floating-header::part(header),
.sl-theme-light sl-dialog.dialog--floating-header::part(header),
.sl-theme-dark sl-dialog.dialog--floating-header::part(header) {
  width: calc(100vw - var(--padding) * 2);
  height: var(--fixed-height);
  position: absolute;
  z-index: 801;
  border-radius: var(--op-radius-large);
  left: var(--padding);
  top: var(--padding);
  background-color: var(--op-color-neutral-plus-seven);
}
:root sl-dialog.dialog--floating-header .modal-header-left-actions,
:host sl-dialog.dialog--floating-header .modal-header-left-actions,
.sl-theme-light sl-dialog.dialog--floating-header .modal-header-left-actions,
.sl-theme-dark sl-dialog.dialog--floating-header .modal-header-left-actions {
  top: var(--op-space-3x-small);
}
:root sl-dialog::part(header-actions),
:host sl-dialog::part(header-actions),
.sl-theme-light sl-dialog::part(header-actions),
.sl-theme-dark sl-dialog::part(header-actions) {
  --header-spacing: var(--op-space-small) var(--op-space-x-large);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  :root sl-dialog::part(header-actions),
  :host sl-dialog::part(header-actions),
  .sl-theme-light sl-dialog::part(header-actions),
  .sl-theme-dark sl-dialog::part(header-actions) {
    --header-spacing: var(--op-space-small) var(--op-space-x-small);
  }
}
:root sl-dialog::part(header-actions),
:host sl-dialog::part(header-actions),
.sl-theme-light sl-dialog::part(header-actions),
.sl-theme-dark sl-dialog::part(header-actions) {
  padding: var(--header-spacing);
}
:root sl-dialog::part(panel),
:host sl-dialog::part(panel),
.sl-theme-light sl-dialog::part(panel),
.sl-theme-dark sl-dialog::part(panel) {
  border-radius: var(--op-radius-large);
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
}
:root sl-dialog::part(title),
:host sl-dialog::part(title),
.sl-theme-light sl-dialog::part(title),
.sl-theme-dark sl-dialog::part(title) {
  color: var(--op-color-neutral-on-plus-max);
  font-weight: var(--op-font-weight-medium);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  :root sl-dialog::part(title),
  :host sl-dialog::part(title),
  .sl-theme-light sl-dialog::part(title),
  .sl-theme-dark sl-dialog::part(title) {
    font-weight: var(--op-font-weight-semi-bold);
  }
}
:root sl-dialog.sl-confirm-dialog::part(title),
:host sl-dialog.sl-confirm-dialog::part(title),
.sl-theme-light sl-dialog.sl-confirm-dialog::part(title),
.sl-theme-dark sl-dialog.sl-confirm-dialog::part(title) {
  font-size: var(--op-font-medium);
  padding: var(--op-space-medium) var(--op-space-x-large);
}
:root sl-dialog.sl-confirm-dialog::part(header-actions),
:host sl-dialog.sl-confirm-dialog::part(header-actions),
.sl-theme-light sl-dialog.sl-confirm-dialog::part(header-actions),
.sl-theme-dark sl-dialog.sl-confirm-dialog::part(header-actions) {
  padding: 0;
  padding-right: var(--op-space-large);
}
:root sl-dialog.non-closable-modal::part(close-button),
:host sl-dialog.non-closable-modal::part(close-button),
.sl-theme-light sl-dialog.non-closable-modal::part(close-button),
.sl-theme-dark sl-dialog.non-closable-modal::part(close-button) {
  display: none;
}
:root sl-dialog .form-group,
:host sl-dialog .form-group,
.sl-theme-light sl-dialog .form-group,
.sl-theme-dark sl-dialog .form-group {
  gap: var(--op-space-2x-small);
  column-gap: var(--op-space-x-small);
}
:root sl-dialog h1,
:host sl-dialog h1,
.sl-theme-light sl-dialog h1,
.sl-theme-dark sl-dialog h1 {
  margin-bottom: 0;
}
:root sl-dialog.pdf-page-selector,
:host sl-dialog.pdf-page-selector,
.sl-theme-light sl-dialog.pdf-page-selector,
.sl-theme-dark sl-dialog.pdf-page-selector {
  --width: fit-content;
}
:root sl-dialog.pdf-page-selector::part(body),
:host sl-dialog.pdf-page-selector::part(body),
.sl-theme-light sl-dialog.pdf-page-selector::part(body),
.sl-theme-dark sl-dialog.pdf-page-selector::part(body) {
  padding: 0;
}
:root sl-dialog.pdf-page-selector::part(footer),
:host sl-dialog.pdf-page-selector::part(footer),
.sl-theme-light sl-dialog.pdf-page-selector::part(footer),
.sl-theme-dark sl-dialog.pdf-page-selector::part(footer) {
  display: none;
}
:root sl-dialog.pdf-page-selector::part(header),
:host sl-dialog.pdf-page-selector::part(header),
.sl-theme-light sl-dialog.pdf-page-selector::part(header),
.sl-theme-dark sl-dialog.pdf-page-selector::part(header) {
  height: 0;
  border: none;
}
:root sl-dialog.pdf-page-selector::part(close-button),
:host sl-dialog.pdf-page-selector::part(close-button),
.sl-theme-light sl-dialog.pdf-page-selector::part(close-button),
.sl-theme-dark sl-dialog.pdf-page-selector::part(close-button) {
  position: absolute;
  top: var(--op-space-2x-large);
  right: var(--op-space-2x-large);
  background-color: var(--op-color-neutral-plus-max);
  border-radius: var(--op-radius-large);
  padding: var(--op-space-x-small);
}
:root sl-dialog.pdf-page-selector::part(overlay),
:host sl-dialog.pdf-page-selector::part(overlay),
.sl-theme-light sl-dialog.pdf-page-selector::part(overlay),
.sl-theme-dark sl-dialog.pdf-page-selector::part(overlay) {
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.72);
}
:root sl-dialog.confirm-dialog::part(body),
:host sl-dialog.confirm-dialog::part(body),
.sl-theme-light sl-dialog.confirm-dialog::part(body),
.sl-theme-dark sl-dialog.confirm-dialog::part(body) {
  padding: 0;
}
:root sl-dialog.confirm-dialog .confirm-dialog__message,
:host sl-dialog.confirm-dialog .confirm-dialog__message,
.sl-theme-light sl-dialog.confirm-dialog .confirm-dialog__message,
.sl-theme-dark sl-dialog.confirm-dialog .confirm-dialog__message {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  padding: var(--op-space-x-large);
}

sl-dialog.with-cancel-text-close-button::part(close-button) {
  display: none;
}

.modal-header-left-actions {
  position: absolute;
  left: var(--op-space-small);
  top: var(--op-space-small);
}

sl-dialog.modal--with-small-header-text::part(title) {
  font-size: var(--op-font-large);
}

sl-dialog.confirm__no-message::part(body) {
  display: none;
}
sl-dialog.confirm__no-message::part(header) {
  border: none;
}
sl-dialog.confirm__no-message::part(footer) {
  box-shadow: none;
}

:root sl-drawer,
:host sl-drawer,
.sl-theme-light sl-drawer,
.sl-theme-dark sl-drawer {
  --size: var(--op-drawer-default-width);
}
:root sl-drawer[size=small],
:host sl-drawer[size=small],
.sl-theme-light sl-drawer[size=small],
.sl-theme-dark sl-drawer[size=small] {
  --size: var(--op-drawer-small-width);
}
:root sl-drawer[size=large],
:host sl-drawer[size=large],
.sl-theme-light sl-drawer[size=large],
.sl-theme-dark sl-drawer[size=large] {
  --size: var(--op-drawer-large-width);
}
:root sl-drawer[size=x-large],
:host sl-drawer[size=x-large],
.sl-theme-light sl-drawer[size=x-large],
.sl-theme-dark sl-drawer[size=x-large] {
  --size: var(--op-drawer-x-large-width);
}
:root sl-drawer[size="2x-large"],
:host sl-drawer[size="2x-large"],
.sl-theme-light sl-drawer[size="2x-large"],
.sl-theme-dark sl-drawer[size="2x-large"] {
  --size: var(--op-drawer-2x-large-width);
}
:root sl-drawer[size="3x-large"],
:host sl-drawer[size="3x-large"],
.sl-theme-light sl-drawer[size="3x-large"],
.sl-theme-dark sl-drawer[size="3x-large"] {
  --size: var(--op-drawer-3x-large-width);
}
:root sl-drawer::part(body),
:host sl-drawer::part(body),
.sl-theme-light sl-drawer::part(body),
.sl-theme-dark sl-drawer::part(body) {
  background-color: var(--op-color-neutral-plus-max);
  padding: 0;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  :root sl-drawer::part(body),
  :host sl-drawer::part(body),
  .sl-theme-light sl-drawer::part(body),
  .sl-theme-dark sl-drawer::part(body) {
    background: var(--op-color-neutral-plus-max);
  }
}
:root sl-drawer.no-padding::part(panel),
:host sl-drawer.no-padding::part(panel),
.sl-theme-light sl-drawer.no-padding::part(panel),
.sl-theme-dark sl-drawer.no-padding::part(panel) {
  padding: 0;
}
:root sl-drawer::part(panel),
:host sl-drawer::part(panel),
.sl-theme-light sl-drawer::part(panel),
.sl-theme-dark sl-drawer::part(panel) {
  transition: height var(--sl-transition-fast);
}
:root sl-drawer.drawer--no-footer::part(footer),
:host sl-drawer.drawer--no-footer::part(footer),
.sl-theme-light sl-drawer.drawer--no-footer::part(footer),
.sl-theme-dark sl-drawer.drawer--no-footer::part(footer) {
  display: none;
}
:root sl-drawer::part(footer),
:host sl-drawer::part(footer),
.sl-theme-light sl-drawer::part(footer),
.sl-theme-dark sl-drawer::part(footer) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--op-space-small) var(--op-space-x-large);
  background-color: var(--op-color-neutral-plus-max);
  border-bottom-left-radius: var(--op-radius-medium);
  border-bottom-right-radius: var(--op-radius-medium);
  box-shadow: var(--op-border-top) var(--op-color-border);
}
:root sl-drawer [data-controller=kit-form],
:host sl-drawer [data-controller=kit-form],
.sl-theme-light sl-drawer [data-controller=kit-form],
.sl-theme-dark sl-drawer [data-controller=kit-form] {
  height: 100%;
}
:root sl-drawer [data-controller=kit-form] .modal__body,
:host sl-drawer [data-controller=kit-form] .modal__body,
.sl-theme-light sl-drawer [data-controller=kit-form] .modal__body,
.sl-theme-dark sl-drawer [data-controller=kit-form] .modal__body {
  height: 100%;
}
:root sl-drawer.drawer--no-footer::part(footer),
:host sl-drawer.drawer--no-footer::part(footer),
.sl-theme-light sl-drawer.drawer--no-footer::part(footer),
.sl-theme-dark sl-drawer.drawer--no-footer::part(footer) {
  padding: 0;
}
:root sl-drawer::part(header),
:host sl-drawer::part(header),
.sl-theme-light sl-drawer::part(header),
.sl-theme-dark sl-drawer::part(header) {
  --header-spacing: var(--op-space-medium) var(--op-space-x-large);
  background-color: var(--op-color-neutral-plus-max);
  border-top-left-radius: var(--op-radius-medium);
  border-top-right-radius: var(--op-radius-medium);
  font-size: var(--op-font-2x-large);
  border-bottom: solid var(--op-border-width) var(--op-color-border);
}
:root sl-drawer::part(header-actions),
:host sl-drawer::part(header-actions),
.sl-theme-light sl-drawer::part(header-actions),
.sl-theme-dark sl-drawer::part(header-actions) {
  --header-spacing: var(--op-space-small) var(--op-space-x-large);
  padding: var(--header-spacing);
}
:root sl-drawer::part(title),
:host sl-drawer::part(title),
.sl-theme-light sl-drawer::part(title),
.sl-theme-dark sl-drawer::part(title) {
  font-size: var(--op-font-x-large);
  color: var(--op-color-neutral-on-plus-eight);
}
:root sl-drawer.bold-title::part(title),
:host sl-drawer.bold-title::part(title),
.sl-theme-light sl-drawer.bold-title::part(title),
.sl-theme-dark sl-drawer.bold-title::part(title) {
  font-weight: var(--op-font-weight-semi-bold);
}
:root sl-drawer.expanded::part(panel),
:host sl-drawer.expanded::part(panel),
.sl-theme-light sl-drawer.expanded::part(panel),
.sl-theme-dark sl-drawer.expanded::part(panel) {
  height: 100%;
}
:root sl-drawer.fit-sheet-content::part(panel),
:host sl-drawer.fit-sheet-content::part(panel),
.sl-theme-light sl-drawer.fit-sheet-content::part(panel),
.sl-theme-dark sl-drawer.fit-sheet-content::part(panel) {
  height: unset;
}

sl-drawer.modal-drawer::part(base) {
  z-index: var(--op-z-index-dialog-content);
}
sl-drawer.modal-drawer::part(header-actions) {
  padding: 0;
}
sl-drawer.modal-drawer::part(header) {
  flex-direction: row-reverse;
  padding: var(--op-space-small) var(--op-space-x-small);
  align-items: center;
  border-radius: 0;
}
sl-drawer.modal-drawer::part(title) {
  font-size: var(--op-font-medium);
  padding: 0;
  margin-right: 32px;
  text-align: center;
}

sl-drawer.sheet.sheet--over-map::part(base) {
  z-index: calc(var(--map-z-index) + 1);
}
sl-drawer.sheet.sheet--over-map::part(overlay) {
  display: none;
}
sl-drawer.sheet.sheet--over-map pi-sheet-layout .sheet__header {
  padding-bottom: 0;
}
sl-drawer.sheet.sheet--minimized::part(panel) {
  --minimized-sheet-height: calc(35 * var(--op-size-unit));
  height: var(--minimized-sheet-height);
}
sl-drawer.sheet.sheet--minimized-with-button::part(panel) {
  --minimized-sheet-height: calc(48 * var(--op-size-unit));
  height: var(--minimized-sheet-height);
}

:root sl-dropdown,
:host sl-dropdown,
.sl-theme-light sl-dropdown,
.sl-theme-dark sl-dropdown {
  font-size: initial;
}
:root sl-dropdown sl-menu[slot=trigger]::part(base),
:host sl-dropdown sl-menu[slot=trigger]::part(base),
.sl-theme-light sl-dropdown sl-menu[slot=trigger]::part(base),
.sl-theme-dark sl-dropdown sl-menu[slot=trigger]::part(base) {
  background-color: unset;
  border: unset;
  padding: unset;
  cursor: pointer;
}
:root sl-dropdown sl-menu,
:host sl-dropdown sl-menu,
.sl-theme-light sl-dropdown sl-menu,
.sl-theme-dark sl-dropdown sl-menu {
  border-radius: var(--op-radius-large);
}
:root sl-dropdown::part(panel),
:host sl-dropdown::part(panel),
.sl-theme-light sl-dropdown::part(panel),
.sl-theme-dark sl-dropdown::part(panel) {
  box-shadow: var(--op-dropdown-box-shadow);
  border-radius: var(--op-radius-medium);
}

:root sl-menu,
:host sl-menu,
.sl-theme-light sl-menu,
.sl-theme-dark sl-menu {
  --pi-sl-menu-width: calc(66 * var(--op-size-unit));
  min-width: var(--pi-sl-menu-width);
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  padding: var(--op-space-x-small);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  text-align: left;
}
:root sl-menu button:not(.btn--sl-menu-ignore),
:host sl-menu button:not(.btn--sl-menu-ignore),
.sl-theme-light sl-menu button:not(.btn--sl-menu-ignore),
.sl-theme-dark sl-menu button:not(.btn--sl-menu-ignore) {
  display: block;
  align-items: unset;
  justify-content: unset;
  color: inherit;
  margin: 0;
  width: 100%;
  text-align: left;
  padding: 0;
}
:root sl-menu button:not(.btn--sl-menu-ignore).hidden,
:host sl-menu button:not(.btn--sl-menu-ignore).hidden,
.sl-theme-light sl-menu button:not(.btn--sl-menu-ignore).hidden,
.sl-theme-dark sl-menu button:not(.btn--sl-menu-ignore).hidden {
  display: none;
}
:root sl-menu a,
:host sl-menu a,
.sl-theme-light sl-menu a,
.sl-theme-dark sl-menu a {
  text-decoration: none;
  color: var(--op-color-on-background);
  width: 100%;
}
:root sl-menu sl-menu-item::part(base),
:host sl-menu sl-menu-item::part(base),
.sl-theme-light sl-menu sl-menu-item::part(base),
.sl-theme-dark sl-menu sl-menu-item::part(base) {
  padding: var(--op-space-x-small);
}
:root sl-menu sl-menu-item::part(checked-icon),
:root sl-menu sl-menu-item:not(.has-submenu)::part(submenu-icon),
:host sl-menu sl-menu-item::part(checked-icon),
:host sl-menu sl-menu-item:not(.has-submenu)::part(submenu-icon),
.sl-theme-light sl-menu sl-menu-item::part(checked-icon),
.sl-theme-light sl-menu sl-menu-item:not(.has-submenu)::part(submenu-icon),
.sl-theme-dark sl-menu sl-menu-item::part(checked-icon),
.sl-theme-dark sl-menu sl-menu-item:not(.has-submenu)::part(submenu-icon) {
  display: none;
}
:root sl-menu sl-menu-label::part(base),
:host sl-menu sl-menu-label::part(base),
.sl-theme-light sl-menu sl-menu-label::part(base),
.sl-theme-dark sl-menu sl-menu-label::part(base) {
  padding: 0;
  display: flex;
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-neutral-on-plus-eight-alt);
}
:root sl-menu sl-menu-label,
:host sl-menu sl-menu-label,
.sl-theme-light sl-menu sl-menu-label,
.sl-theme-dark sl-menu sl-menu-label {
  padding: var(--op-space-small) var(--op-space-x-small) var(--op-space-2x-small) var(--op-space-x-small);
}
:root sl-menu sl-menu-label.menu__search-hint,
:host sl-menu sl-menu-label.menu__search-hint,
.sl-theme-light sl-menu sl-menu-label.menu__search-hint,
.sl-theme-dark sl-menu sl-menu-label.menu__search-hint {
  padding: var(--op-space-2x-small) var(--op-space-x-small) 0 var(--op-space-x-small);
}
:root sl-menu.action-menu,
:host sl-menu.action-menu,
.sl-theme-light sl-menu.action-menu,
.sl-theme-dark sl-menu.action-menu {
  --pi-sl-menu-width: calc(38 * var(--op-size-unit));
}
:root sl-menu.background-opacity-control-menu,
:host sl-menu.background-opacity-control-menu,
.sl-theme-light sl-menu.background-opacity-control-menu,
.sl-theme-dark sl-menu.background-opacity-control-menu {
  padding: var(--op-space-small);
  overflow: hidden;
}
:root sl-menu.scale-control-menu,
:host sl-menu.scale-control-menu,
.sl-theme-light sl-menu.scale-control-menu,
.sl-theme-dark sl-menu.scale-control-menu {
  --dropdown-offset: 5rem;
  padding: var(--op-space-small);
  overflow: hidden;
  position: absolute;
  left: var(--dropdown-offset);
}
:root sl-menu.scale-control-menu button,
:host sl-menu.scale-control-menu button,
.sl-theme-light sl-menu.scale-control-menu button,
.sl-theme-dark sl-menu.scale-control-menu button {
  padding: revert;
}
:root sl-menu.aspire-dialog-bulk-action-menu,
:host sl-menu.aspire-dialog-bulk-action-menu,
.sl-theme-light sl-menu.aspire-dialog-bulk-action-menu,
.sl-theme-dark sl-menu.aspire-dialog-bulk-action-menu {
  --pi-sl-menu-width: calc(65 * var(--op-size-unit));
  width: var(--pi-sl-menu-width);
  padding: var(--op-space-small);
  overflow: visible;
}
:root sl-menu.report-properties-menu,
:host sl-menu.report-properties-menu,
.sl-theme-light sl-menu.report-properties-menu,
.sl-theme-dark sl-menu.report-properties-menu {
  width: var(--pi-sl-menu-width);
  padding: var(--op-space-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
  font-size: var(--op-font-small);
}
:root sl-menu.report-properties-menu .form-label, :root sl-menu.report-properties-menu .project__key-label, :root sl-menu.report-properties-menu sl-input::part(form-control-label), :root sl-menu.report-properties-menu sl-select::part(form-control-label),
:host sl-menu.report-properties-menu .form-label,
:host sl-menu.report-properties-menu .project__key-label,
:host sl-menu.report-properties-menu sl-input::part(form-control-label),
:host sl-menu.report-properties-menu sl-select::part(form-control-label),
.sl-theme-light sl-menu.report-properties-menu .form-label,
.sl-theme-light sl-menu.report-properties-menu .project__key-label,
.sl-theme-light sl-menu.report-properties-menu sl-input::part(form-control-label),
.sl-theme-light sl-menu.report-properties-menu sl-select::part(form-control-label),
.sl-theme-dark sl-menu.report-properties-menu .form-label,
.sl-theme-dark sl-menu.report-properties-menu .project__key-label,
.sl-theme-dark sl-menu.report-properties-menu sl-input::part(form-control-label),
.sl-theme-dark sl-menu.report-properties-menu sl-select::part(form-control-label) {
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--op-font-small);
}
:root sl-menu.catalog-item-create-menu,
:host sl-menu.catalog-item-create-menu,
.sl-theme-light sl-menu.catalog-item-create-menu,
.sl-theme-dark sl-menu.catalog-item-create-menu {
  --pi-sl-menu-width: calc(48 * var(--op-size-unit));
  width: var(--pi-sl-menu-width);
  margin-top: var(--op-space-2x-small);
}
:root sl-menu.catalog-item-create-menu sl-menu-item::part(base),
:host sl-menu.catalog-item-create-menu sl-menu-item::part(base),
.sl-theme-light sl-menu.catalog-item-create-menu sl-menu-item::part(base),
.sl-theme-dark sl-menu.catalog-item-create-menu sl-menu-item::part(base) {
  font-size: var(--op-font-medium);
}
:root sl-menu.catalog-item-create-menu button,
:host sl-menu.catalog-item-create-menu button,
.sl-theme-light sl-menu.catalog-item-create-menu button,
.sl-theme-dark sl-menu.catalog-item-create-menu button {
  padding: 0;
}
:root sl-menu.property-add-project-menu,
:host sl-menu.property-add-project-menu,
.sl-theme-light sl-menu.property-add-project-menu,
.sl-theme-dark sl-menu.property-add-project-menu {
  --op-property-add-project-menu-width: 24rem;
  width: var(--op-property-add-project-menu-width);
  margin-top: var(--op-space-2x-small);
}
:root sl-menu.property-add-project-menu sl-menu-item::part(base),
:host sl-menu.property-add-project-menu sl-menu-item::part(base),
.sl-theme-light sl-menu.property-add-project-menu sl-menu-item::part(base),
.sl-theme-dark sl-menu.property-add-project-menu sl-menu-item::part(base) {
  font-size: var(--op-font-medium);
}
:root sl-menu.branch-filter-menu,
:host sl-menu.branch-filter-menu,
.sl-theme-light sl-menu.branch-filter-menu,
.sl-theme-dark sl-menu.branch-filter-menu {
  --min-width: calc(60 * var(--op-size-unit));
  min-width: var(--min-width);
  overflow: hidden;
}
:root sl-menu.branch-filter-menu .header-text,
:host sl-menu.branch-filter-menu .header-text,
.sl-theme-light sl-menu.branch-filter-menu .header-text,
.sl-theme-dark sl-menu.branch-filter-menu .header-text {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-neutral-on-plus-max);
  padding: var(--op-space-2x-small) var(--op-space-x-small) var(--op-space-2x-small) var(--op-space-x-small);
}
:root sl-menu.branch-filter-menu .branches-list,
:host sl-menu.branch-filter-menu .branches-list,
.sl-theme-light sl-menu.branch-filter-menu .branches-list,
.sl-theme-dark sl-menu.branch-filter-menu .branches-list {
  overflow-y: auto;
  max-height: calc(var(--auto-size-available-height) - var(--op-space-4x-large));
}
:root sl-menu.branch-filter-menu sl-menu-item::part(base),
:host sl-menu.branch-filter-menu sl-menu-item::part(base),
.sl-theme-light sl-menu.branch-filter-menu sl-menu-item::part(base),
.sl-theme-dark sl-menu.branch-filter-menu sl-menu-item::part(base) {
  padding: var(--op-space-x-small) var(--op-space-small);
}
:root sl-menu.branch-filter-menu sl-menu-item::part(checked-icon),
:host sl-menu.branch-filter-menu sl-menu-item::part(checked-icon),
.sl-theme-light sl-menu.branch-filter-menu sl-menu-item::part(checked-icon),
.sl-theme-dark sl-menu.branch-filter-menu sl-menu-item::part(checked-icon) {
  display: none;
}
:root sl-menu.branch-filter-menu .divider,
:host sl-menu.branch-filter-menu .divider,
.sl-theme-light sl-menu.branch-filter-menu .divider,
.sl-theme-dark sl-menu.branch-filter-menu .divider {
  margin: 0;
}
:root sl-menu.branch-filter-menu .footer-buttons,
:host sl-menu.branch-filter-menu .footer-buttons,
.sl-theme-light sl-menu.branch-filter-menu .footer-buttons,
.sl-theme-dark sl-menu.branch-filter-menu .footer-buttons {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--op-space-x-small);
  gap: var(--op-space-x-small);
}
:root sl-menu.menu--searchable sl-divider,
:host sl-menu.menu--searchable sl-divider,
.sl-theme-light sl-menu.menu--searchable sl-divider,
.sl-theme-dark sl-menu.menu--searchable sl-divider {
  margin: var(--op-space-x-small) 0;
}
:root sl-menu.menu--searchable .menu__search-input-container sl-input::part(form-control),
:host sl-menu.menu--searchable .menu__search-input-container sl-input::part(form-control),
.sl-theme-light sl-menu.menu--searchable .menu__search-input-container sl-input::part(form-control),
.sl-theme-dark sl-menu.menu--searchable .menu__search-input-container sl-input::part(form-control) {
  gap: 0;
}
:root sl-menu.menu--searchable .menu__search-input-container sl-input::part(input),
:host sl-menu.menu--searchable .menu__search-input-container sl-input::part(input),
.sl-theme-light sl-menu.menu--searchable .menu__search-input-container sl-input::part(input),
.sl-theme-dark sl-menu.menu--searchable .menu__search-input-container sl-input::part(input) {
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--op-font-x-small);
}
:root sl-menu.menu--searchable .menu__search-input-container .icon-wrapper,
:host sl-menu.menu--searchable .menu__search-input-container .icon-wrapper,
.sl-theme-light sl-menu.menu--searchable .menu__search-input-container .icon-wrapper,
.sl-theme-dark sl-menu.menu--searchable .menu__search-input-container .icon-wrapper {
  display: flex;
  align-items: center;
}
:root sl-menu.menu--searchable sl-menu-label.menu__search-hint::part(base),
:host sl-menu.menu--searchable sl-menu-label.menu__search-hint::part(base),
.sl-theme-light sl-menu.menu--searchable sl-menu-label.menu__search-hint::part(base),
.sl-theme-dark sl-menu.menu--searchable sl-menu-label.menu__search-hint::part(base) {
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
}
:root sl-menu.symbol-selector-menu,
:host sl-menu.symbol-selector-menu,
.sl-theme-light sl-menu.symbol-selector-menu,
.sl-theme-dark sl-menu.symbol-selector-menu {
  padding: 0;
}
:root sl-menu.markup-toolbar__menu,
:host sl-menu.markup-toolbar__menu,
.sl-theme-light sl-menu.markup-toolbar__menu,
.sl-theme-dark sl-menu.markup-toolbar__menu {
  min-width: max-content;
}
:root sl-menu.menu--box-shadow,
:host sl-menu.menu--box-shadow,
.sl-theme-light sl-menu.menu--box-shadow,
.sl-theme-dark sl-menu.menu--box-shadow {
  box-shadow: var(--op-markup-overlay-shadow);
}
:root sl-menu.markup-toolbar-settings-menu,
:host sl-menu.markup-toolbar-settings-menu,
.sl-theme-light sl-menu.markup-toolbar-settings-menu,
.sl-theme-dark sl-menu.markup-toolbar-settings-menu {
  padding: 0;
}
:root sl-menu.markup-toolbar-settings-menu .markup-toolbar-settings-menu__padded-content,
:host sl-menu.markup-toolbar-settings-menu .markup-toolbar-settings-menu__padded-content,
.sl-theme-light sl-menu.markup-toolbar-settings-menu .markup-toolbar-settings-menu__padded-content,
.sl-theme-dark sl-menu.markup-toolbar-settings-menu .markup-toolbar-settings-menu__padded-content {
  padding: var(--op-space-medium);
}

:root sl-menu-item::part(base),
:host sl-menu-item::part(base),
.sl-theme-light sl-menu-item::part(base),
.sl-theme-dark sl-menu-item::part(base) {
  --op-context-menu-item-height: 36px;
  height: var(--op-context-menu-item-height);
  white-space: normal;
  font-size: var(--op-font-small);
  align-items: center;
  border-radius: var(--op-radius-medium);
  width: 100%;
}
:root sl-menu-item:hover::part(base),
:host sl-menu-item:hover::part(base),
.sl-theme-light sl-menu-item:hover::part(base),
.sl-theme-dark sl-menu-item:hover::part(base) {
  background-color: var(--op-color-neutral-plus-six);
}
:root sl-menu-item:hover::part(label),
:host sl-menu-item:hover::part(label),
.sl-theme-light sl-menu-item:hover::part(label),
.sl-theme-dark sl-menu-item:hover::part(label) {
  color: var(--op-color-neutral-on-plus-six);
}
:root sl-menu-item.menu-item--danger::part(base),
:host sl-menu-item.menu-item--danger::part(base),
.sl-theme-light sl-menu-item.menu-item--danger::part(base),
.sl-theme-dark sl-menu-item.menu-item--danger::part(base) {
  color: var(--op-color-alerts-danger-base);
}
:root sl-menu-item.menu-item--danger::part(label),
:host sl-menu-item.menu-item--danger::part(label),
.sl-theme-light sl-menu-item.menu-item--danger::part(label),
.sl-theme-dark sl-menu-item.menu-item--danger::part(label) {
  color: var(--op-color-alerts-danger-on-plus-max-alt);
}
:root sl-menu-item.menu-item--danger:hover::part(base),
:host sl-menu-item.menu-item--danger:hover::part(base),
.sl-theme-light sl-menu-item.menu-item--danger:hover::part(base),
.sl-theme-dark sl-menu-item.menu-item--danger:hover::part(base) {
  background-color: var(--op-color-alerts-danger-plus-seven);
}
:root sl-menu-item.menu-item--danger:hover::part(label),
:host sl-menu-item.menu-item--danger:hover::part(label),
.sl-theme-light sl-menu-item.menu-item--danger:hover::part(label),
.sl-theme-dark sl-menu-item.menu-item--danger:hover::part(label) {
  color: var(--op-color-alerts-danger-on-plus-seven);
}
:root sl-menu-item.pi-complete-dropdown-menu__menuitem::part(base),
:host sl-menu-item.pi-complete-dropdown-menu__menuitem::part(base),
.sl-theme-light sl-menu-item.pi-complete-dropdown-menu__menuitem::part(base),
.sl-theme-dark sl-menu-item.pi-complete-dropdown-menu__menuitem::part(base) {
  height: unset;
  padding: var(--op-space-small) var(--op-space-medium);
}
:root sl-menu-item.pi-complete-dropdown-menu__menuitem::part(checked-icon),
:root sl-menu-item.pi-complete-dropdown-menu__menuitem::part(submenu-icon),
:host sl-menu-item.pi-complete-dropdown-menu__menuitem::part(checked-icon),
:host sl-menu-item.pi-complete-dropdown-menu__menuitem::part(submenu-icon),
.sl-theme-light sl-menu-item.pi-complete-dropdown-menu__menuitem::part(checked-icon),
.sl-theme-light sl-menu-item.pi-complete-dropdown-menu__menuitem::part(submenu-icon),
.sl-theme-dark sl-menu-item.pi-complete-dropdown-menu__menuitem::part(checked-icon),
.sl-theme-dark sl-menu-item.pi-complete-dropdown-menu__menuitem::part(submenu-icon) {
  display: none;
}
:root sl-menu-item.pi-complete-dropdown-menu__menuitem .material-symbols-outlined,
:host sl-menu-item.pi-complete-dropdown-menu__menuitem .material-symbols-outlined,
.sl-theme-light sl-menu-item.pi-complete-dropdown-menu__menuitem .material-symbols-outlined,
.sl-theme-dark sl-menu-item.pi-complete-dropdown-menu__menuitem .material-symbols-outlined {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
:root sl-menu-item.pi-complete-template-mapping-menu__menuitem::part(base),
:host sl-menu-item.pi-complete-template-mapping-menu__menuitem::part(base),
.sl-theme-light sl-menu-item.pi-complete-template-mapping-menu__menuitem::part(base),
.sl-theme-dark sl-menu-item.pi-complete-template-mapping-menu__menuitem::part(base) {
  height: unset;
}
:root sl-menu-item.pi-complete-template-mapping-menu__menuitem--selected::part(base),
:host sl-menu-item.pi-complete-template-mapping-menu__menuitem--selected::part(base),
.sl-theme-light sl-menu-item.pi-complete-template-mapping-menu__menuitem--selected::part(base),
.sl-theme-dark sl-menu-item.pi-complete-template-mapping-menu__menuitem--selected::part(base) {
  background: var(--op-color-primary-plus-five);
}
:root sl-menu-item.action-dropdown-menu__menuitem::part(checked-icon),
:host sl-menu-item.action-dropdown-menu__menuitem::part(checked-icon),
.sl-theme-light sl-menu-item.action-dropdown-menu__menuitem::part(checked-icon),
.sl-theme-dark sl-menu-item.action-dropdown-menu__menuitem::part(checked-icon) {
  display: none;
}
:root sl-menu-item::part(label),
:host sl-menu-item::part(label),
.sl-theme-light sl-menu-item::part(label),
.sl-theme-dark sl-menu-item::part(label) {
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-eight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root sl-menu-item.with-icon::part(label),
:host sl-menu-item.with-icon::part(label),
.sl-theme-light sl-menu-item.with-icon::part(label),
.sl-theme-dark sl-menu-item.with-icon::part(label) {
  display: flex;
  gap: var(--op-space-small);
  align-items: center;
}
:root sl-menu-item[size=large]::part(label),
:host sl-menu-item[size=large]::part(label),
.sl-theme-light sl-menu-item[size=large]::part(label),
.sl-theme-dark sl-menu-item[size=large]::part(label) {
  font-size: var(--op-font-medium);
}
:root sl-menu-item button,
:host sl-menu-item button,
.sl-theme-light sl-menu-item button,
.sl-theme-dark sl-menu-item button {
  padding: 0;
}
:root sl-menu-item .sl-menu-item__title,
:host sl-menu-item .sl-menu-item__title,
.sl-theme-light sl-menu-item .sl-menu-item__title,
.sl-theme-dark sl-menu-item .sl-menu-item__title {
  font-size: var(--op-font-medium);
  color: var(--op-color-neutral-on-plus-eight);
}
:root sl-menu-item .sl-menu-item__description,
:host sl-menu-item .sl-menu-item__description,
.sl-theme-light sl-menu-item .sl-menu-item__description,
.sl-theme-dark sl-menu-item .sl-menu-item__description {
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
}
:root sl-menu-item.property-maps__sub-menu-item::part(label),
:host sl-menu-item.property-maps__sub-menu-item::part(label),
.sl-theme-light sl-menu-item.property-maps__sub-menu-item::part(label),
.sl-theme-dark sl-menu-item.property-maps__sub-menu-item::part(label) {
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-bar {
  font-size: var(--op-font-medium);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.progress-bar .progress-bar__metadata {
  display: flex;
  justify-content: space-between;
}
.progress-bar .progress-bar__metadata.progress-bar__metadata--small {
  font-size: var(--op-font-x-small);
}
.progress-bar .progress-bar__metadata .progress-bar__units-completed {
  color: var(--op-color-alerts-notice-on-plus-max-alt);
}
.progress-bar .progress-bar__metadata sl-progress-bar {
  width: 100%;
}

:root sl-progress-ring[size=small],
:host sl-progress-ring[size=small],
.sl-theme-light sl-progress-ring[size=small],
.sl-theme-dark sl-progress-ring[size=small] {
  --size: var(--op-space-2x-large);
  --track-color: var(--op-color-neutral-plus-four);
  --indicator-color: var(--op-color-primary-minus-three);
}
:root .progress-ring__label,
:host .progress-ring__label,
.sl-theme-light .progress-ring__label,
.sl-theme-dark .progress-ring__label {
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-small);
}
:root .progress-ring__label.progress-ring__label--small,
:host .progress-ring__label.progress-ring__label--small,
.sl-theme-light .progress-ring__label.progress-ring__label--small,
.sl-theme-dark .progress-ring__label.progress-ring__label--small {
  color: var(--op-color-neutral-on-plus-max-alt);
  font-size: var(--op-font-x-small);
}
:root .progress-ring__label.progress-ring__label--small.progress-ring__label--warning,
:host .progress-ring__label.progress-ring__label--small.progress-ring__label--warning,
.sl-theme-light .progress-ring__label.progress-ring__label--small.progress-ring__label--warning,
.sl-theme-dark .progress-ring__label.progress-ring__label--small.progress-ring__label--warning {
  color: var(--op-color-alerts-warning-on-plus-max-alt);
}

:root sl-select,
:host sl-select,
.sl-theme-light sl-select,
.sl-theme-dark sl-select {
  --sl-input-border-color: var(--op-color-border);
  --sl-input-border-color-focus: var(--op-color-primary-minus-three);
  --sl-input-border-color-hover: var(--op-color-border);
  --sl-input-font-size-large: var(--op-font-medium);
  --sl-input-border-radius-large: var(--op-radius-large);
  --sl-input-border-radius-small: var(--op-radius-medium);
  --sl-input-background-color: var(--op-color-neutral-plus-eight);
  --sl-input-color: var(--op-color-neutral-on-plus-eight);
  --sl-panel-border-width: var(--op-border-width);
  --sl-panel-border-color: var(--op-color-border);
  --sl-input-background-color-focus: var(--op-color-primary-plus-eight);
  --sl-input-color-focus: var(--op-color-primary-on-plus-eight);
}
:root sl-select:not(.with-checkmarks) sl-option::part(checked-icon),
:host sl-select:not(.with-checkmarks) sl-option::part(checked-icon),
.sl-theme-light sl-select:not(.with-checkmarks) sl-option::part(checked-icon),
.sl-theme-dark sl-select:not(.with-checkmarks) sl-option::part(checked-icon) {
  display: none;
}
:root sl-select sl-option::part(base),
:host sl-select sl-option::part(base),
.sl-theme-light sl-select sl-option::part(base),
.sl-theme-dark sl-select sl-option::part(base) {
  border-radius: var(--op-radius-medium);
  padding: var(--op-space-x-small) var(--op-space-small);
}
:root sl-select[size=small]::part(combobox), :root sl-select[size-hack=small]::part(combobox),
:host sl-select[size=small]::part(combobox),
:host sl-select[size-hack=small]::part(combobox),
.sl-theme-light sl-select[size=small]::part(combobox),
.sl-theme-light sl-select[size-hack=small]::part(combobox),
.sl-theme-dark sl-select[size=small]::part(combobox),
.sl-theme-dark sl-select[size-hack=small]::part(combobox) {
  height: var(--op-input-height-small);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  border-radius: var(--op-radius-medium);
}
:root sl-select[size=small]::part(listbox), :root sl-select[size-hack=small]::part(listbox),
:host sl-select[size=small]::part(listbox),
:host sl-select[size-hack=small]::part(listbox),
.sl-theme-light sl-select[size=small]::part(listbox),
.sl-theme-light sl-select[size-hack=small]::part(listbox),
.sl-theme-dark sl-select[size=small]::part(listbox),
.sl-theme-dark sl-select[size-hack=small]::part(listbox) {
  padding: var(--op-space-x-small);
}
:root sl-select[size=small] sl-option::part(base), :root sl-select[size-hack=small] sl-option::part(base),
:host sl-select[size=small] sl-option::part(base),
:host sl-select[size-hack=small] sl-option::part(base),
.sl-theme-light sl-select[size=small] sl-option::part(base),
.sl-theme-light sl-select[size-hack=small] sl-option::part(base),
.sl-theme-dark sl-select[size=small] sl-option::part(base),
.sl-theme-dark sl-select[size-hack=small] sl-option::part(base) {
  font-size: var(--op-font-small);
  padding: var(--op-space-x-small);
}
:root sl-select[size=medium]::part(combobox),
:host sl-select[size=medium]::part(combobox),
.sl-theme-light sl-select[size=medium]::part(combobox),
.sl-theme-dark sl-select[size=medium]::part(combobox) {
  padding-inline: var(--op-space-small);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  :root sl-select[size=medium]::part(combobox),
  :host sl-select[size=medium]::part(combobox),
  .sl-theme-light sl-select[size=medium]::part(combobox),
  .sl-theme-dark sl-select[size=medium]::part(combobox) {
    border: none;
    background: var(--op-color-neutral-plus-seven);
    border-radius: var(--op-radius-large);
  }
}
:root sl-select sl-option[aria-selected=true]:focus-visible,
:host sl-select sl-option[aria-selected=true]:focus-visible,
.sl-theme-light sl-select sl-option[aria-selected=true]:focus-visible,
.sl-theme-dark sl-select sl-option[aria-selected=true]:focus-visible {
  box-shadow: none;
}
:root sl-select sl-option[aria-selected=true]::part(base),
:host sl-select sl-option[aria-selected=true]::part(base),
.sl-theme-light sl-select sl-option[aria-selected=true]::part(base),
.sl-theme-dark sl-select sl-option[aria-selected=true]::part(base) {
  background-color: var(--op-color-primary-plus-five);
  color: var(--op-color-neutral-on-plus-five);
}
:root sl-select sl-option[aria-selected=true][size=large]::part(combobox),
:host sl-select sl-option[aria-selected=true][size=large]::part(combobox),
.sl-theme-light sl-select sl-option[aria-selected=true][size=large]::part(combobox),
.sl-theme-dark sl-select sl-option[aria-selected=true][size=large]::part(combobox) {
  height: var(--op-input-height-x-large);
  border-radius: var(--sl-input-border-radius-large);
}
:root .modal__body sl-select::part(display-label),
:host .modal__body sl-select::part(display-label),
.sl-theme-light .modal__body sl-select::part(display-label),
.sl-theme-dark .modal__body sl-select::part(display-label) {
  font-size: var(--op-font-medium);
}
:root sl-select::part(control),
:host sl-select::part(control),
.sl-theme-light sl-select::part(control),
.sl-theme-dark sl-select::part(control) {
  box-shadow: var(--sl-shadow-small);
}
:root sl-select::part(menu),
:host sl-select::part(menu),
.sl-theme-light sl-select::part(menu),
.sl-theme-dark sl-select::part(menu) {
  border: none;
}
:root sl-select::part(listbox),
:host sl-select::part(listbox),
.sl-theme-light sl-select::part(listbox),
.sl-theme-dark sl-select::part(listbox) {
  padding: var(--op-space-x-small);
  box-shadow: var(--op-dropdown-box-shadow);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
:root sl-select::part(form-control-label),
:host sl-select::part(form-control-label),
.sl-theme-light sl-select::part(form-control-label),
.sl-theme-dark sl-select::part(form-control-label) {
  margin-bottom: 0;
}
:root sl-select::part(form-control-input),
:host sl-select::part(form-control-input),
.sl-theme-light sl-select::part(form-control-input),
.sl-theme-dark sl-select::part(form-control-input) {
  display: flex;
  grid-column: 1/3;
}
:root sl-select::part(combobox),
:host sl-select::part(combobox),
.sl-theme-light sl-select::part(combobox),
.sl-theme-dark sl-select::part(combobox) {
  box-shadow: none;
}
:root sl-select::part(form-control),
:host sl-select::part(form-control),
.sl-theme-light sl-select::part(form-control),
.sl-theme-dark sl-select::part(form-control) {
  display: grid;
  gap: var(--op-space-2x-small);
}
:root .markup-right-panel__content sl-select::part(form-control-label),
:host .markup-right-panel__content sl-select::part(form-control-label),
.sl-theme-light .markup-right-panel__content sl-select::part(form-control-label),
.sl-theme-dark .markup-right-panel__content sl-select::part(form-control-label) {
  margin: 0;
}
:root .markup-right-panel__content sl-select::part(display-input),
:host .markup-right-panel__content sl-select::part(display-input),
.sl-theme-light .markup-right-panel__content sl-select::part(display-input),
.sl-theme-dark .markup-right-panel__content sl-select::part(display-input) {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
}
:root sl-option::part(base),
:host sl-option::part(base),
.sl-theme-light sl-option::part(base),
.sl-theme-dark sl-option::part(base) {
  line-break: anywhere;
  white-space: normal;
}
:root sl-select.inline-label span[slot=prefix],
:host sl-select.inline-label span[slot=prefix],
.sl-theme-light sl-select.inline-label span[slot=prefix],
.sl-theme-dark sl-select.inline-label span[slot=prefix] {
  margin: 0 0 0 var(--op-space-x-small);
}
:root sl-select.inline-label::part(form-control-label),
:host sl-select.inline-label::part(form-control-label),
.sl-theme-light sl-select.inline-label::part(form-control-label),
.sl-theme-dark sl-select.inline-label::part(form-control-label) {
  margin: 0;
  font-size: var(--op-font-x-small);
}
:root sl-select.inline-label::part(form-control),
:host sl-select.inline-label::part(form-control),
.sl-theme-light sl-select.inline-label::part(form-control),
.sl-theme-dark sl-select.inline-label::part(form-control) {
  display: block;
}
:root sl-select.inline-label::part(display-label),
:host sl-select.inline-label::part(display-label),
.sl-theme-light sl-select.inline-label::part(display-label),
.sl-theme-dark sl-select.inline-label::part(display-label) {
  margin: 0 var(--op-space-2x-small);
}
:root sl-select.inline-label::part(icon),
:host sl-select.inline-label::part(icon),
.sl-theme-light sl-select.inline-label::part(icon),
.sl-theme-dark sl-select.inline-label::part(icon) {
  margin-right: var(--op-space-x-small);
}
:root sl-select.inline-label::part(combobox),
:host sl-select.inline-label::part(combobox),
.sl-theme-light sl-select.inline-label::part(combobox),
.sl-theme-dark sl-select.inline-label::part(combobox) {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
}
:root sl-select.inline-label sl-option::part(base),
:host sl-select.inline-label sl-option::part(base),
.sl-theme-light sl-select.inline-label sl-option::part(base),
.sl-theme-dark sl-select.inline-label sl-option::part(base) {
  font-size: var(--op-font-x-small);
}
:root sl-select.no-gap::part(form-control),
:host sl-select.no-gap::part(form-control),
.sl-theme-light sl-select.no-gap::part(form-control),
.sl-theme-dark sl-select.no-gap::part(form-control) {
  gap: 0px;
}
:root sl-select.aspire-sync-select::part(form-control),
:host sl-select.aspire-sync-select::part(form-control),
.sl-theme-light sl-select.aspire-sync-select::part(form-control),
.sl-theme-dark sl-select.aspire-sync-select::part(form-control) {
  gap: 0;
  --aspire-sync-select-max-width: 26rem;
  max-width: var(--aspire-sync-select-max-width);
}
:root sl-select[size=medium]::part(display-input),
:host sl-select[size=medium]::part(display-input),
.sl-theme-light sl-select[size=medium]::part(display-input),
.sl-theme-dark sl-select[size=medium]::part(display-input) {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
:root sl-select[size=small]::part(display-input),
:host sl-select[size=small]::part(display-input),
.sl-theme-light sl-select[size=small]::part(display-input),
.sl-theme-dark sl-select[size=small]::part(display-input) {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
}
:root sl-select.choose-catalog-select--landone:not(.modal__body, .modal__body--padded),
:host sl-select.choose-catalog-select--landone:not(.modal__body, .modal__body--padded),
.sl-theme-light sl-select.choose-catalog-select--landone:not(.modal__body, .modal__body--padded),
.sl-theme-dark sl-select.choose-catalog-select--landone:not(.modal__body, .modal__body--padded) {
  --sl-color-primary-600: var(--op-color-primary-minus-three);
  --sl-color-neutral-0: var(--op-color-primary-on-minus-three);
  --sl-input-background-color: var(--op-color-primary-minus-three);
  --sl-input-color: var(--op-color-primary-on-minus-three);
  --sl-input-border-color: var(--op-color-primary-minus-three);
  --sl-input-background-color-hover: var(--op-color-primary-minus-five);
  --sl-input-color-hover: var(--op-color-primary-on-minus-one);
  --sl-input-border-color-hover: var(--op-color-primary-minus-five);
  --sl-input-background-color-focus: var(--op-color-primary-minus-five);
  --sl-input-color-focus: var(--op-color-primary-on-minus-one);
  --sl-input-border-color-focus: var(--op-color-primary-minus-five);
}
:root sl-select.choose-catalog-select--landone:not(.modal__body, .modal__body--padded)::part(expand-icon),
:host sl-select.choose-catalog-select--landone:not(.modal__body, .modal__body--padded)::part(expand-icon),
.sl-theme-light sl-select.choose-catalog-select--landone:not(.modal__body, .modal__body--padded)::part(expand-icon),
.sl-theme-dark sl-select.choose-catalog-select--landone:not(.modal__body, .modal__body--padded)::part(expand-icon) {
  color: var(--op-color-primary-on-minus-three);
}
:root sl-select.choose-catalog-select--aspire,
:host sl-select.choose-catalog-select--aspire,
.sl-theme-light sl-select.choose-catalog-select--aspire,
.sl-theme-dark sl-select.choose-catalog-select--aspire {
  --sl-color-primary-600: var(--op-color-aspire-base);
  --sl-color-neutral-0: var(--op-color-aspire-on-base);
  --sl-input-background-color: var(--op-color-aspire-base);
  --sl-input-color: var(--op-color-aspire-on-base);
  --sl-input-border-color: var(--op-color-aspire-base);
  --sl-input-background-color-hover: var(--op-color-aspire-minus-1);
  --sl-input-color-hover: var(--op-color-aspire-on-minus-1);
  --sl-input-border-color-hover: var(--op-color-aspire-minus-1);
  --sl-input-background-color-focus: var(--op-color-aspire-minus-1);
  --sl-input-color-focus: var(--op-color-aspire-on-minus-1);
  --sl-input-border-color-focus: var(--op-color-aspire-minus-1);
}
:root sl-select.choose-catalog-select--aspire::part(expand-icon),
:host sl-select.choose-catalog-select--aspire::part(expand-icon),
.sl-theme-light sl-select.choose-catalog-select--aspire::part(expand-icon),
.sl-theme-dark sl-select.choose-catalog-select--aspire::part(expand-icon) {
  color: var(--op-color-aspire-on-base);
}
:root sl-select.background-map-select,
:host sl-select.background-map-select,
.sl-theme-light sl-select.background-map-select,
.sl-theme-dark sl-select.background-map-select {
  --background-map-select-height: 40px;
}
@media (width < 1024px) {
  :root sl-select.background-map-select,
  :host sl-select.background-map-select,
  .sl-theme-light sl-select.background-map-select,
  .sl-theme-dark sl-select.background-map-select {
    width: 100%;
  }
}
:root sl-select.background-map-select::part(display-label),
:host sl-select.background-map-select::part(display-label),
.sl-theme-light sl-select.background-map-select::part(display-label),
.sl-theme-dark sl-select.background-map-select::part(display-label) {
  display: flex;
  justify-content: start;
  margin: 0;
  padding: 0 var(--op-space-small);
}
:root sl-select.background-map-select::part(control),
:host sl-select.background-map-select::part(control),
.sl-theme-light sl-select.background-map-select::part(control),
.sl-theme-dark sl-select.background-map-select::part(control) {
  font-weight: var(--op-font-weight-bold);
  min-height: var(--background-map-select-height);
}
:root sl-select.background-map-select::part(combobox),
:host sl-select.background-map-select::part(combobox),
.sl-theme-light sl-select.background-map-select::part(combobox),
.sl-theme-dark sl-select.background-map-select::part(combobox) {
  padding-inline: var(--op-space-x-small);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
}
:root sl-select.background-map-select::part(expand-icon),
:host sl-select.background-map-select::part(expand-icon),
.sl-theme-light sl-select.background-map-select::part(expand-icon),
.sl-theme-dark sl-select.background-map-select::part(expand-icon) {
  display: none;
}
:root sl-select.background-map-select sl-option::part(base),
:host sl-select.background-map-select sl-option::part(base),
.sl-theme-light sl-select.background-map-select sl-option::part(base),
.sl-theme-dark sl-select.background-map-select sl-option::part(base) {
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-x-small);
}
:root sl-select.background-type-select::part(combobox),
:host sl-select.background-type-select::part(combobox),
.sl-theme-light sl-select.background-type-select::part(combobox),
.sl-theme-dark sl-select.background-type-select::part(combobox) {
  border: var(--op-border-width) solid transparent;
  border-top-color: var(--op-color-border);
  border-radius: 0 0 var(--op-radius-large) var(--op-radius-large);
}
:root sl-select.background-type-select::part(display-input),
:host sl-select.background-type-select::part(display-input),
.sl-theme-light sl-select.background-type-select::part(display-input),
.sl-theme-dark sl-select.background-type-select::part(display-input) {
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-medium);
}
:root sl-select.background-type-select::part(form-control),
:host sl-select.background-type-select::part(form-control),
.sl-theme-light sl-select.background-type-select::part(form-control),
.sl-theme-dark sl-select.background-type-select::part(form-control) {
  grid-gap: unset;
}
:root sl-select.non-clearable-tags::part(tag__remove-button),
:host sl-select.non-clearable-tags::part(tag__remove-button),
.sl-theme-light sl-select.non-clearable-tags::part(tag__remove-button),
.sl-theme-dark sl-select.non-clearable-tags::part(tag__remove-button) {
  display: none;
}
:root sl-select.template-form,
:host sl-select.template-form,
.sl-theme-light sl-select.template-form,
.sl-theme-dark sl-select.template-form {
  --template-form-select-width: 200px;
  width: var(--template-form-select-width);
}

:root sl-switch,
:host sl-switch,
.sl-theme-light sl-switch,
.sl-theme-dark sl-switch {
  --height: var(--op-space-x-large);
  --width: var(--op-space-3x-large);
  --thumb-size: var(--op-space-large);
}
:root sl-switch::part(base),
:host sl-switch::part(base),
.sl-theme-light sl-switch::part(base),
.sl-theme-dark sl-switch::part(base) {
  display: flex;
  gap: var(--op-space-small);
}
:root sl-switch[size=small],
:host sl-switch[size=small],
.sl-theme-light sl-switch[size=small],
.sl-theme-dark sl-switch[size=small] {
  --op-switch-width-small: calc(var(--op-space-2x-large) + var(--op-space-x-small));
  --height: var(--op-space-large);
  --width: var(--op-switch-width-small);
  --thumb-size: var(--op-space-medium);
}
:root sl-switch::part(control),
:host sl-switch::part(control),
.sl-theme-light sl-switch::part(control),
.sl-theme-dark sl-switch::part(control) {
  background-color: var(--op-color-neutral-minus-two);
  border-color: var(--op-color-neutral-minus-two);
  opacity: 0.6;
}
:root sl-switch[checked]::part(control),
:host sl-switch[checked]::part(control),
.sl-theme-light sl-switch[checked]::part(control),
.sl-theme-dark sl-switch[checked]::part(control) {
  background-color: var(--op-color-primary-minus-five);
  border-color: var(--op-color-primary-minus-three);
  opacity: 1;
}
:root sl-switch::part(thumb),
:host sl-switch::part(thumb),
.sl-theme-light sl-switch::part(thumb),
.sl-theme-dark sl-switch::part(thumb) {
  background-color: var(--op-color-neutral-plus-eight);
  border: none;
}
:root sl-switch::part(label),
:host sl-switch::part(label),
.sl-theme-light sl-switch::part(label),
.sl-theme-dark sl-switch::part(label) {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-medium);
  line-height: var(--op-line-height-base);
  margin-inline: 0;
}
:root sl-switch.user-setting,
:host sl-switch.user-setting,
.sl-theme-light sl-switch.user-setting,
.sl-theme-dark sl-switch.user-setting {
  width: 100%;
}
:root sl-switch.user-setting::part(base),
:host sl-switch.user-setting::part(base),
.sl-theme-light sl-switch.user-setting::part(base),
.sl-theme-dark sl-switch.user-setting::part(base) {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
:root sl-switch.user-setting::part(label),
:host sl-switch.user-setting::part(label),
.sl-theme-light sl-switch.user-setting::part(label),
.sl-theme-dark sl-switch.user-setting::part(label) {
  margin: 0;
}
:root sl-switch.delete-materials-in-group-toggle[checked]::part(control),
:host sl-switch.delete-materials-in-group-toggle[checked]::part(control),
.sl-theme-light sl-switch.delete-materials-in-group-toggle[checked]::part(control),
.sl-theme-dark sl-switch.delete-materials-in-group-toggle[checked]::part(control) {
  background-color: var(--op-color-alerts-danger-base);
  border-color: var(--op-color-alerts-danger-base);
}
:root sl-switch.delete-materials-in-group-toggle label,
:host sl-switch.delete-materials-in-group-toggle label,
.sl-theme-light sl-switch.delete-materials-in-group-toggle label,
.sl-theme-dark sl-switch.delete-materials-in-group-toggle label {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
:root sl-switch.user-setting::part(base),
:host sl-switch.user-setting::part(base),
.sl-theme-light sl-switch.user-setting::part(base),
.sl-theme-dark sl-switch.user-setting::part(base) {
  gap: var(--op-space-medium);
}
:root sl-switch.user-setting::part(label),
:host sl-switch.user-setting::part(label),
.sl-theme-light sl-switch.user-setting::part(label),
.sl-theme-dark sl-switch.user-setting::part(label) {
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-surface-complement);
}
:root sl-switch.markup-toolbar-settings-switch::part(base),
:host sl-switch.markup-toolbar-settings-switch::part(base),
.sl-theme-light sl-switch.markup-toolbar-settings-switch::part(base),
.sl-theme-dark sl-switch.markup-toolbar-settings-switch::part(base) {
  align-items: flex-start;
  gap: var(--op-space-x-small);
}
:root sl-switch.markup-toolbar-settings-switch::part(label),
:host sl-switch.markup-toolbar-settings-switch::part(label),
.sl-theme-light sl-switch.markup-toolbar-settings-switch::part(label),
.sl-theme-dark sl-switch.markup-toolbar-settings-switch::part(label) {
  width: 100%;
}
:root sl-switch.markup-toolbar-settings-switch .markup-toolbar-settings-switch__label,
:host sl-switch.markup-toolbar-settings-switch .markup-toolbar-settings-switch__label,
.sl-theme-light sl-switch.markup-toolbar-settings-switch .markup-toolbar-settings-switch__label,
.sl-theme-dark sl-switch.markup-toolbar-settings-switch .markup-toolbar-settings-switch__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.markup-panel__toggle-row sl-switch::part(label) {
  display: none;
}

.sl-switch-container {
  display: flex;
  background: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-six);
  padding: var(--op-space-small);
  width: 100%;
  border-radius: var(--op-radius-medium);
}
.sl-switch-container sl-switch::part(label) {
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-regular);
}

.sl-switch-container--mobile {
  min-height: var(--op-input-height-large);
  border-radius: var(--op-radius-large);
  background: var(--op-color-neutral-plus-seven);
  align-items: center;
  padding-inline: var(--op-space-small);
  display: flex;
}
.sl-switch-container--mobile sl-switch::part(base) {
  width: 100%;
  height: 100%;
}
.sl-switch-container--mobile sl-switch::part(label) {
  width: 100%;
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-max);
}

:root sl-tab-group,
:host sl-tab-group,
.sl-theme-light sl-tab-group,
.sl-theme-dark sl-tab-group {
  --indicator-color: var(--op-color-primary-minus-five);
  --track-color: var(--op-color-border);
  --track-width: var(--op-border-width);
}
:root sl-tab-group::part(base),
:host sl-tab-group::part(base),
.sl-theme-light sl-tab-group::part(base),
.sl-theme-dark sl-tab-group::part(base) {
  border: none;
}
:root sl-tab-group::part(active-tab-indicator),
:host sl-tab-group::part(active-tab-indicator),
.sl-theme-light sl-tab-group::part(active-tab-indicator),
.sl-theme-dark sl-tab-group::part(active-tab-indicator) {
  border-bottom-width: var(--op-border-width-large);
}
:root sl-tab::part(base),
:host sl-tab::part(base),
.sl-theme-light sl-tab::part(base),
.sl-theme-dark sl-tab::part(base) {
  font-size: var(--op-font-x-small);
  padding: 0;
  --sl-color-primary-600: var(--op-color-primary-on-plus-five);
  --sl-color-neutral-600: var(--op-color-neutral-on-plus-six);
}
:root sl-tab-panel::part(base),
:host sl-tab-panel::part(base),
.sl-theme-light sl-tab-panel::part(base),
.sl-theme-dark sl-tab-panel::part(base) {
  border: none;
  padding: 0;
}
:root sl-tab-group.panel-tab-group,
:host sl-tab-group.panel-tab-group,
.sl-theme-light sl-tab-group.panel-tab-group,
.sl-theme-dark sl-tab-group.panel-tab-group {
  overflow: hidden;
}
:root sl-tab-group.panel-tab-group::part(base),
:host sl-tab-group.panel-tab-group::part(base),
.sl-theme-light sl-tab-group.panel-tab-group::part(base),
.sl-theme-dark sl-tab-group.panel-tab-group::part(base) {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}
:root sl-tab-group.panel-tab-group::part(body),
:host sl-tab-group.panel-tab-group::part(body),
.sl-theme-light sl-tab-group.panel-tab-group::part(body),
.sl-theme-dark sl-tab-group.panel-tab-group::part(body) {
  height: 100%;
  overflow: hidden;
}
:root sl-tab-group.panel-tab-group::part(active-tab-indicator),
:host sl-tab-group.panel-tab-group::part(active-tab-indicator),
.sl-theme-light sl-tab-group.panel-tab-group::part(active-tab-indicator),
.sl-theme-dark sl-tab-group.panel-tab-group::part(active-tab-indicator) {
  display: none;
}
:root,
:host,
.sl-theme-light,
.sl-theme-dark {
  /* --op-breakpoint-small */
}
@media (min-width: 768px) {
  :root .panel-tab-group sl-tab::part(base),
  :host .panel-tab-group sl-tab::part(base),
  .sl-theme-light .panel-tab-group sl-tab::part(base),
  .sl-theme-dark .panel-tab-group sl-tab::part(base) {
    padding: var(--op-space-2x-small) var(--op-space-x-small);
    border-radius: var(--op-radius-medium);
    font-weight: var(--op-font-weight-medium);
  }
  :root .panel-tab-group::part(tabs),
  :host .panel-tab-group::part(tabs),
  .sl-theme-light .panel-tab-group::part(tabs),
  .sl-theme-dark .panel-tab-group::part(tabs) {
    border-bottom: none;
  }
  :root .panel-tab-group sl-tab::part(base):hover,
  :host .panel-tab-group sl-tab::part(base):hover,
  .sl-theme-light .panel-tab-group sl-tab::part(base):hover,
  .sl-theme-dark .panel-tab-group sl-tab::part(base):hover {
    padding: var(--op-space-2x-small) var(--op-space-x-small);
    background: var(--op-color-neutral-plus-six);
    color: var(--op-color-neutral-on-plus-six);
  }
  :root .panel-tab-group sl-tab[aria-selected=true]::part(base),
  :host .panel-tab-group sl-tab[aria-selected=true]::part(base),
  .sl-theme-light .panel-tab-group sl-tab[aria-selected=true]::part(base),
  .sl-theme-dark .panel-tab-group sl-tab[aria-selected=true]::part(base) {
    border-bottom: 1px solid var(--op-color-primary-minus-four);
    background: var(--op-color-primary-minus-one);
    color: var(--op-color-primary-on-minus-one);
  }
  :root .panel-tab-group sl-tab-panel[active],
  :host .panel-tab-group sl-tab-panel[active],
  .sl-theme-light .panel-tab-group sl-tab-panel[active],
  .sl-theme-dark .panel-tab-group sl-tab-panel[active] {
    height: 100%;
  }
  :root .panel-tab-group sl-tab-panel::part(base),
  :host .panel-tab-group sl-tab-panel::part(base),
  .sl-theme-light .panel-tab-group sl-tab-panel::part(base),
  .sl-theme-dark .panel-tab-group sl-tab-panel::part(base) {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
:root sl-tab-group.panel-tab-group,
:host sl-tab-group.panel-tab-group,
.sl-theme-light sl-tab-group.panel-tab-group,
.sl-theme-dark sl-tab-group.panel-tab-group {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  :root sl-tab-group.panel-tab-group,
  :host sl-tab-group.panel-tab-group,
  .sl-theme-light sl-tab-group.panel-tab-group,
  .sl-theme-dark sl-tab-group.panel-tab-group {
    --track-color: unset;
    --indicator-color: unset;
  }
  :root sl-tab-group.panel-tab-group::part(tabs),
  :host sl-tab-group.panel-tab-group::part(tabs),
  .sl-theme-light sl-tab-group.panel-tab-group::part(tabs),
  .sl-theme-dark sl-tab-group.panel-tab-group::part(tabs) {
    border-radius: var(--op-radius-large);
    background: var(--op-color-neutral-plus-seven);
    padding: var(--op-space-2x-small);
    gap: var(--op-space-2x-small);
  }
  :root sl-tab-group.panel-tab-group::part(base),
  :host sl-tab-group.panel-tab-group::part(base),
  .sl-theme-light sl-tab-group.panel-tab-group::part(base),
  .sl-theme-dark sl-tab-group.panel-tab-group::part(base) {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-medium);
    height: 100%;
    background: var(--op-color-neutral-plus-max);
  }
  :root sl-tab-group.panel-tab-group::part(body),
  :host sl-tab-group.panel-tab-group::part(body),
  .sl-theme-light sl-tab-group.panel-tab-group::part(body),
  .sl-theme-dark sl-tab-group.panel-tab-group::part(body) {
    display: flex;
    flex-direction: column;
  }
  :root sl-tab-group.panel-tab-group sl-tab-panel[active],
  :host sl-tab-group.panel-tab-group sl-tab-panel[active],
  .sl-theme-light sl-tab-group.panel-tab-group sl-tab-panel[active],
  .sl-theme-dark sl-tab-group.panel-tab-group sl-tab-panel[active] {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  :root sl-tab-group.panel-tab-group sl-tab-panel::part(base),
  :host sl-tab-group.panel-tab-group sl-tab-panel::part(base),
  .sl-theme-light sl-tab-group.panel-tab-group sl-tab-panel::part(base),
  .sl-theme-dark sl-tab-group.panel-tab-group sl-tab-panel::part(base) {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-small);
    height: 100%;
  }
  :root sl-tab-group.panel-tab-group sl-tab[active],
  :host sl-tab-group.panel-tab-group sl-tab[active],
  .sl-theme-light sl-tab-group.panel-tab-group sl-tab[active],
  .sl-theme-dark sl-tab-group.panel-tab-group sl-tab[active] {
    background: var(--op-color-primary-minus-two);
    border-radius: var(--op-radius-large);
  }
  :root sl-tab-group.panel-tab-group sl-tab[active]::part(base),
  :host sl-tab-group.panel-tab-group sl-tab[active]::part(base),
  .sl-theme-light sl-tab-group.panel-tab-group sl-tab[active]::part(base),
  .sl-theme-dark sl-tab-group.panel-tab-group sl-tab[active]::part(base) {
    color: var(--op-color-primary-on-minus-two);
  }
  :root sl-tab-group.panel-tab-group sl-tab,
  :host sl-tab-group.panel-tab-group sl-tab,
  .sl-theme-light sl-tab-group.panel-tab-group sl-tab,
  .sl-theme-dark sl-tab-group.panel-tab-group sl-tab {
    display: flex;
    width: 100%;
    height: var(--op-input-height-medium);
    justify-content: center;
  }
  :root sl-tab-group.panel-tab-group sl-tab::part(base),
  :host sl-tab-group.panel-tab-group sl-tab::part(base),
  .sl-theme-light sl-tab-group.panel-tab-group sl-tab::part(base),
  .sl-theme-dark sl-tab-group.panel-tab-group sl-tab::part(base) {
    color: var(--op-color-neutral-on-plus-seven);
  }
}
:root sl-tab-group.panel-tab-group--sidebar,
:host sl-tab-group.panel-tab-group--sidebar,
.sl-theme-light sl-tab-group.panel-tab-group--sidebar,
.sl-theme-dark sl-tab-group.panel-tab-group--sidebar {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
:root sl-tab-group.panel-tab-group--sidebar sl-tab-panel::part(base),
:host sl-tab-group.panel-tab-group--sidebar sl-tab-panel::part(base),
.sl-theme-light sl-tab-group.panel-tab-group--sidebar sl-tab-panel::part(base),
.sl-theme-dark sl-tab-group.panel-tab-group--sidebar sl-tab-panel::part(base) {
  flex-grow: 1;
  overflow: auto;
  padding: var(--op-horizontal-padding);
}
:root sl-tab-group.panel-tab-group--sidebar sl-tab-panel.no-horizontal-padding::part(base),
:host sl-tab-group.panel-tab-group--sidebar sl-tab-panel.no-horizontal-padding::part(base),
.sl-theme-light sl-tab-group.panel-tab-group--sidebar sl-tab-panel.no-horizontal-padding::part(base),
.sl-theme-dark sl-tab-group.panel-tab-group--sidebar sl-tab-panel.no-horizontal-padding::part(base) {
  padding-left: 0;
  padding-right: 0;
}
:root sl-tab-group.panel-tab-group--sidebar::part(tabs),
:host sl-tab-group.panel-tab-group--sidebar::part(tabs),
.sl-theme-light sl-tab-group.panel-tab-group--sidebar::part(tabs),
.sl-theme-dark sl-tab-group.panel-tab-group--sidebar::part(tabs) {
  background-color: var(--op-color-neutral-plus-eight);
  padding: var(--op-space-x-small) var(--op-horizontal-padding) 0;
}
:root sl-tab-group.sl-tab-group--credit-usage-chart::part(tabs),
:host sl-tab-group.sl-tab-group--credit-usage-chart::part(tabs),
.sl-theme-light sl-tab-group.sl-tab-group--credit-usage-chart::part(tabs),
.sl-theme-dark sl-tab-group.sl-tab-group--credit-usage-chart::part(tabs) {
  display: flex;
  width: 100%;
  justify-content: center;
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  padding: var(--op-space-3x-small);
  gap: 1px;
  border-radius: var(--op-radius-medium);
  margin-bottom: var(--op-space-small);
}
:root sl-tab-group.sl-tab-group--credit-usage-chart::part(active-tab-indicator),
:host sl-tab-group.sl-tab-group--credit-usage-chart::part(active-tab-indicator),
.sl-theme-light sl-tab-group.sl-tab-group--credit-usage-chart::part(active-tab-indicator),
.sl-theme-dark sl-tab-group.sl-tab-group--credit-usage-chart::part(active-tab-indicator) {
  display: none;
}
:root sl-tab-group.sl-tab-group--credit-usage-chart sl-tab,
:host sl-tab-group.sl-tab-group--credit-usage-chart sl-tab,
.sl-theme-light sl-tab-group.sl-tab-group--credit-usage-chart sl-tab,
.sl-theme-dark sl-tab-group.sl-tab-group--credit-usage-chart sl-tab {
  width: 100%;
  height: var(--op-space-2x-large);
  text-align: center;
  border-radius: var(--op-radius-medium);
  cursor: pointer;
}
:root sl-tab-group.sl-tab-group--credit-usage-chart sl-tab::part(base),
:host sl-tab-group.sl-tab-group--credit-usage-chart sl-tab::part(base),
.sl-theme-light sl-tab-group.sl-tab-group--credit-usage-chart sl-tab::part(base),
.sl-theme-dark sl-tab-group.sl-tab-group--credit-usage-chart sl-tab::part(base) {
  color: var(--op-color-neutral-on-plus-eight);
}
:root sl-tab-group.sl-tab-group--credit-usage-chart sl-tab[aria-selected=true],
:host sl-tab-group.sl-tab-group--credit-usage-chart sl-tab[aria-selected=true],
.sl-theme-light sl-tab-group.sl-tab-group--credit-usage-chart sl-tab[aria-selected=true],
.sl-theme-dark sl-tab-group.sl-tab-group--credit-usage-chart sl-tab[aria-selected=true] {
  background-color: var(--op-color-primary-minus-two);
}
:root sl-tab-group.sl-tab-group--credit-usage-chart sl-tab[aria-selected=true]::part(base),
:host sl-tab-group.sl-tab-group--credit-usage-chart sl-tab[aria-selected=true]::part(base),
.sl-theme-light sl-tab-group.sl-tab-group--credit-usage-chart sl-tab[aria-selected=true]::part(base),
.sl-theme-dark sl-tab-group.sl-tab-group--credit-usage-chart sl-tab[aria-selected=true]::part(base) {
  color: var(--op-color-primary-on-minus-two);
}
:root sl-tab-group.sl-tab-group--credit-usage-chart sl-tab:not([aria-selected=true]):hover,
:host sl-tab-group.sl-tab-group--credit-usage-chart sl-tab:not([aria-selected=true]):hover,
.sl-theme-light sl-tab-group.sl-tab-group--credit-usage-chart sl-tab:not([aria-selected=true]):hover,
.sl-theme-dark sl-tab-group.sl-tab-group--credit-usage-chart sl-tab:not([aria-selected=true]):hover {
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
}
:root sl-tab-group.panel-tab-group--markup-panel::part(tabs),
:host sl-tab-group.panel-tab-group--markup-panel::part(tabs),
.sl-theme-light sl-tab-group.panel-tab-group--markup-panel::part(tabs),
.sl-theme-dark sl-tab-group.panel-tab-group--markup-panel::part(tabs) {
  padding: var(--op-space-x-small);
  gap: var(--op-space-2x-small);
  /* --op-breakpoint-small */
}
@media (min-width: 768px) {
  :root sl-tab-group.panel-tab-group--markup-panel::part(tabs),
  :host sl-tab-group.panel-tab-group--markup-panel::part(tabs),
  .sl-theme-light sl-tab-group.panel-tab-group--markup-panel::part(tabs),
  .sl-theme-dark sl-tab-group.panel-tab-group--markup-panel::part(tabs) {
    border-radius: var(--op-radius-large) var(--op-radius-large) 0 0;
  }
}

:root sl-tooltip,
:host sl-tooltip,
.sl-theme-light sl-tooltip,
.sl-theme-dark sl-tooltip {
  --show-delay: 1s;
  --op-min-tooltip-width: 15rem;
}
:root sl-tooltip:not(.markup-zoom-controls),
:host sl-tooltip:not(.markup-zoom-controls),
.sl-theme-light sl-tooltip:not(.markup-zoom-controls),
.sl-theme-dark sl-tooltip:not(.markup-zoom-controls) {
  cursor: help;
}
:root sl-tooltop.markup-zoom-controls,
:host sl-tooltop.markup-zoom-controls,
.sl-theme-light sl-tooltop.markup-zoom-controls,
.sl-theme-dark sl-tooltop.markup-zoom-controls {
  cursor: pointer;
}
:root sl-tooltip.associated-materials-help,
:host sl-tooltip.associated-materials-help,
.sl-theme-light sl-tooltip.associated-materials-help,
.sl-theme-dark sl-tooltip.associated-materials-help {
  --show-delay: 0.2s;
}
:root .tooltip--large,
:host .tooltip--large,
.sl-theme-light .tooltip--large,
.sl-theme-dark .tooltip--large {
  --op-min-tooltip-width: 25rem;
}
:root .tooltip--delay-short,
:host .tooltip--delay-short,
.sl-theme-light .tooltip--delay-short,
.sl-theme-dark .tooltip--delay-short {
  --show-delay: 0.25s;
}
:root .tooltip--no-delay,
:host .tooltip--no-delay,
.sl-theme-light .tooltip--no-delay,
.sl-theme-dark .tooltip--no-delay {
  --show-delay: 0s;
}

.tooltip__title {
  font-size: var(--op-font-small);
}

.tooltip__body {
  font-size: var(--op-font-x-small);
}

.tooltip__reason-title {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
}

.tooltip__reason-message {
  font-size: var(--op-font-x-small);
}

sl-input {
  --sl-input-font-size-medium: var(--op-font-small);
  --sl-input-border-width: var(--op-border-width);
  --sl-input-border-color: var(--op-color-neutral-plus-four);
  --sl-color-primary-500: var(--op-color-neutral-on-plus-eight);
  --sl-input-background-color: var(--op-color-neutral-plus-eight);
  --sl-input-color: var(--op-color-neutral-on-plus-eight);
  --sl-input-background-color-focus: var(--op-color-primary-plus-eight);
  --sl-input-color-focus: var(--op-color-primary-on-plus-eight);
  --sl-input-border-color-focus: var(--op-color-primary-minus-three);
  --sl-focus-ring-width: var(--op-border-width);
  --sl-input-focus-ring-color: var(--op-color-on-background);
  --sl-input-background-color-hover: var(--op-color-primary-plus-eight);
  --sl-input-color-hover: var(--op-color-primary-on-plus-eight);
  --sl-input-border-color-hover: var(--op-color-neutral-plus-four);
}
sl-input::part(base) {
  border: none;
  box-shadow: inset var(--op-border-all) var(--sl-input-border-color);
}
sl-input::part(base):focus, sl-input::part(base):focus-within, sl-input::part(base):focus-visible {
  color: var(--op-color-primary-on-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-two);
  border: none;
  outline: none;
}
sl-input::part(input) {
  align-self: center;
  background-color: transparent;
  width: 100%;
}
sl-input:hover {
  --sl-input-placeholder-color: var(--op-color-primary-on-plus-eight);
}
sl-input[size=mini]::part(base) {
  display: inline-flex;
  align-items: center;
  min-height: var(--op-input-height-3x-small);
  font-size: var(--op-font-x-small);
  border-radius: var(--op-radius-medium);
}
sl-input[size=small]::part(base) {
  --sl-input-height-small: var(--op-input-height-small);
  font-size: var(--op-font-x-small);
  border-radius: var(--op-radius-medium);
}
sl-input[size=medium]::part(base) {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  sl-input[size=medium]::part(base) {
    box-shadow: unset;
    border-radius: var(--op-radius-large);
    background: var(--op-color-neutral-plus-seven);
    height: var(--op-input-height-medium);
  }
  sl-input[size=medium]::part(base):focus, sl-input[size=medium]::part(base):focus-within, sl-input[size=medium]::part(base):focus-visible {
    background: var(--op-color-primary-plus-eight);
    color: var(--op-color-primary-on-plus-eight);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
    border: none;
    outline: none;
  }
}
sl-input[size=medium] sl-copy-button {
  margin-inline-end: var(--op-space-2x-small);
}
sl-input[size=large]::part(base) {
  font-size: var(--op-font-medium);
}
sl-input div[slot=prefix] {
  display: flex;
  color: var(--op-color-neutral-on-plus-eight);
  margin-inline-start: var(--op-space-x-small);
}
sl-input div[slot=suffix] {
  display: flex;
  color: var(--op-color-neutral-on-plus-eight);
  margin-inline-start: var(--op-space-x-small);
  margin-inline-end: var(--op-space-small);
}
sl-input:hover div[slot=prefix],
sl-input:hover div[slot=suffix] {
  color: var(--op-color-primary-on-plus-eight);
}

sl-input::part(input)::placeholder {
  opacity: 0.64;
}

sl-input::part(form-control) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}

sl-input::part(form-control-input) {
  display: flex;
  grid-column: 1/3;
}

sl-input::part(form-control-label) {
  margin-bottom: 0;
}

.main-content__header sl-input::part(form-control-label) {
  display: none;
}

.modal__body sl-input::part(base) {
  background-color: var(--op-color-neutral-plus-eight);
  font-size: var(--op-font-small);
}

.modal__body sl-input::part(input) {
  padding: 0 var(--op-space-small);
  font-size: var(--op-font-small);
}

.modal__body div[slot=prefix] {
  margin-inline-start: var(--op-space-small);
}

sl-input[variant=read-only] {
  --sl-input-background-color-disabled: var(--op-color-neutral-plus-six);
  --sl-input-border-color-disabled: var(--op-color-neutral-plus-four);
}
sl-input[variant=read-only]::part(base) {
  background-color: var(--sl-input-background-color-disabled);
  opacity: 1;
}

sl-input[variant=error]::part(base) {
  border-color: var(--op-color-alerts-danger-base);
  background-color: var(--op-color-alerts-danger-plus-eight);
}
sl-input[variant=error]::part(base):hover {
  background-color: var(--op-color-alerts-danger-plus-seven);
  border-color: var(--op-color-alerts-danger-minus-two);
  color: var(--op-color-alerts-danger-on-plus-seven);
}
sl-input[variant=error]::part(base):focus-visible {
  background-color: var(--op-color-alerts-danger-plus-seven);
  border-color: var(--op-input-focus-danger);
  color: var(--op-color-alerts-danger-on-plus-seven);
}

sl-input.no-gap::part(form-control) {
  gap: 0px;
}

:root sl-color-picker.position-in-sidebar::part(base),
:host sl-color-picker.position-in-sidebar::part(base),
.sl-theme-light sl-color-picker.position-in-sidebar::part(base),
.sl-theme-dark sl-color-picker.position-in-sidebar::part(base) {
  width: calc(var(--op-markup-panel-width) - 4rem);
  position: absolute;
  right: 0;
  top: -6rem;
}
@media only screen and (max-height: 850px) {
  :root sl-color-picker.position-in-sidebar::part(base),
  :host sl-color-picker.position-in-sidebar::part(base),
  .sl-theme-light sl-color-picker.position-in-sidebar::part(base),
  .sl-theme-dark sl-color-picker.position-in-sidebar::part(base) {
    top: -20rem;
  }
}
@media only screen and (max-height: 720px) {
  :root sl-color-picker.position-in-sidebar::part(base),
  :host sl-color-picker.position-in-sidebar::part(base),
  .sl-theme-light sl-color-picker.position-in-sidebar::part(base),
  .sl-theme-dark sl-color-picker.position-in-sidebar::part(base) {
    position: inherit;
  }
}
:root sl-color-picker.position-in-sidebar::part(swatches),
:host sl-color-picker.position-in-sidebar::part(swatches),
.sl-theme-light sl-color-picker.position-in-sidebar::part(swatches),
.sl-theme-dark sl-color-picker.position-in-sidebar::part(swatches) {
  grid-template-columns: repeat(7, 1fr);
}
:root sl-color-picker,
:host sl-color-picker,
.sl-theme-light sl-color-picker,
.sl-theme-dark sl-color-picker {
  line-height: 0;
}
:root sl-color-picker.read-only::part(trigger),
:host sl-color-picker.read-only::part(trigger),
.sl-theme-light sl-color-picker.read-only::part(trigger),
.sl-theme-dark sl-color-picker.read-only::part(trigger) {
  cursor: default;
  opacity: 1;
}
:root sl-color-picker.square::part(trigger),
:host sl-color-picker.square::part(trigger),
.sl-theme-light sl-color-picker.square::part(trigger),
.sl-theme-dark sl-color-picker.square::part(trigger) {
  --sl-input-border-color: var(--op-color-border);
  --offset-to-match-symbol-image: var(--op-space-2x-small);
}
:root sl-color-picker.square::part(trigger)::before,
:host sl-color-picker.square::part(trigger)::before,
.sl-theme-light sl-color-picker.square::part(trigger)::before,
.sl-theme-dark sl-color-picker.square::part(trigger)::before {
  border-radius: var(--op-radius-medium);
  box-shadow: none;
}
:root sl-color-picker.square[size=small]::part(trigger),
:host sl-color-picker.square[size=small]::part(trigger),
.sl-theme-light sl-color-picker.square[size=small]::part(trigger),
.sl-theme-dark sl-color-picker.square[size=small]::part(trigger) {
  --color-picker-trigger-size: calc(var(--op-size-unit) * 6.5); /*26px*/
  width: var(--color-picker-trigger-size);
  height: var(--color-picker-trigger-size);
}
:root sl-color-picker.square[size=medium],
:host sl-color-picker.square[size=medium],
.sl-theme-light sl-color-picker.square[size=medium],
.sl-theme-dark sl-color-picker.square[size=medium] {
  --color-picker-size: calc(var(--op-size-unit) * 8);
}
:root sl-color-picker.square[size=medium]::part(trigger),
:host sl-color-picker.square[size=medium]::part(trigger),
.sl-theme-light sl-color-picker.square[size=medium]::part(trigger),
.sl-theme-dark sl-color-picker.square[size=medium]::part(trigger) {
  width: var(--color-picker-size);
  height: var(--color-picker-size);
}
:root sl-color-picker.square[size=large]::part(trigger),
:host sl-color-picker.square[size=large]::part(trigger),
.sl-theme-light sl-color-picker.square[size=large]::part(trigger),
.sl-theme-dark sl-color-picker.square[size=large]::part(trigger) {
  width: var(--op-input-height-x-large);
  height: var(--op-input-height-x-large);
}

:root sl-spinner[size=large],
:host sl-spinner[size=large],
.sl-theme-light sl-spinner[size=large],
.sl-theme-dark sl-spinner[size=large] {
  --spinner-size-large: 10rem;
  font-size: var(--spinner-size-large);
  --track-width: var(--op-space-x-small);
}
:root sl-spinner[size=medium],
:host sl-spinner[size=medium],
.sl-theme-light sl-spinner[size=medium],
.sl-theme-dark sl-spinner[size=medium] {
  --spinner-size-medium: calc(var(--op-size-unit) * 12);
  font-size: var(--spinner-size-medium);
  --track-width: var(--op-space-2x-small);
}
:root sl-spinner[size=small],
:host sl-spinner[size=small],
.sl-theme-light sl-spinner[size=small],
.sl-theme-dark sl-spinner[size=small] {
  --spinner-size-small: var(--op-space-2x-large);
  font-size: var(--spinner-size-small);
  --track-width: var(--op-space-2x-small);
}

.sl-spinner__full-screen-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--op-z-index-dialog);
  background-color: var(--op-color-background);
  color: var(--op-color-on-background);
}

.sl-spinner__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--op-space-small);
}

sl-alert::part(base) {
  border-radius: var(--op-radius-large);
  padding: var(--op-space-small) var(--op-space-large);
  border-width: 1px;
  margin: var(--op-space-2x-small);
  align-items: center;
}
sl-alert::part(message) {
  align-items: center;
  display: flex;
  padding: 0px;
  gap: var(--op-space-x-small);
}
sl-alert[variant=danger]::part(base) {
  background-color: var(--op-color-alerts-danger-plus-eight);
  border-color: var(--op-color-alerts-danger-base);
  width: fit-content;
}
sl-alert[variant=danger]::part(message) {
  color: var(--op-color-alerts-danger-on-plus-eight-alt);
  justify-content: center;
}
sl-alert[variant=danger] .material-symbols-outlined {
  color: var(--op-color-alerts-danger-base);
}
sl-alert[variant=warning]::part(base) {
  background-color: var(--op-color-alerts-warning-plus-eight);
  border-color: var(--op-color-alerts-warning-base);
  width: fit-content;
}
sl-alert[variant=warning]::part(message) {
  color: var(--op-color-alerts-warning-on-plus-eight-alt);
  justify-content: center;
}
sl-alert[variant=warning] .material-symbols-outlined {
  color: var(--op-color-alerts-warning-base);
}
sl-alert[variant=primary]::part(base) {
  background-color: var(--op-color-primary-plus-eight);
  border-color: var(--op-color-primary-minus-three);
}
sl-alert[variant=primary]::part(close-button) {
  padding-left: var(--op-space-small);
  padding-right: 0;
}
sl-alert[variant=primary]::part(message) {
  color: var(--op-color-primary-on-plus-eight);
  justify-content: space-between;
}
sl-alert[variant=info]::part(base) {
  background-color: var(--op-color-alerts-info-plus-six);
  border: none;
  padding: var(--op-space-medium);
  width: calc(92 * var(--op-size-unit));
}
sl-alert[variant=info] .alert__notification-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
sl-alert[variant=info]::part(close-button) {
  padding-left: var(--op-space-small);
  padding-right: 0;
}
sl-alert[variant=info]::part(message) {
  color: var(--op-color-primary-on-plus-six);
  justify-content: space-between;
  font-size: var(--op-font-medium);
}
sl-alert[variant=actionable]::part(base) {
  padding: var(--op-space-x-small);
  border-color: var(--op-color-primary-minus-three);
}
sl-alert[variant=actionable] .alert-actions {
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
  padding: var(--op-space-2x-small);
}
sl-alert[variant=actionable] .alert-message {
  --toast-width: calc(var(--op-space-4x-large) * 5);
  min-width: var(--toast-width);
  padding: var(--op-space-x-small) var(--op-space-small);
  background-color: var(--op-color-alerts-info-plus-six);
  color: var(--op-color-alerts-info-on-plus-six);
  border-radius: var(--op-radius-large);
  font-size: var(--op-font-x-small);
  display: flex;
  align-items: center;
  gap: var(--op-space-medium);
}
sl-alert[variant=actionable] .alert-message.alert-message--loading {
  background-color: var(--op-color-alerts-notice-plus-six);
  color: var(--op-color-alerts-notice-on-plus-six);
}
sl-alert[variant=actionable] .alert-message.alert-message--error {
  background-color: var(--op-color-alerts-danger-plus-six);
  color: var(--op-color-alerts-danger-on-plus-six);
}

.sl-toast-stack {
  display: flex;
  flex-direction: column-reverse;
  bottom: 1.6rem;
  right: 50%;
  top: unset;
  width: unset;
  max-width: unset;
  transform: translate(50%, 0%);
  align-items: center;
}

.alert__close-button {
  padding-inline-end: unset;
}

sl-breadcrumb::part(base) {
  overflow: hidden;
  gap: var(--op-space-x-small);
  width: 100%;
  flex-wrap: unset;
  padding-top: var(--op-space-3x-small);
  padding-bottom: var(--op-space-3x-small);
}

.breadcrumb-container {
  max-width: 100%;
}

sl-breadcrumb-item {
  --logo-width: 5rem;
}
sl-breadcrumb-item::part(base) {
  gap: var(--op-space-x-small);
}
sl-breadcrumb-item.logo::part(base) {
  min-width: var(--logo-width);
}
sl-breadcrumb-item::part(separator) {
  margin: 0;
}
sl-breadcrumb-item:not(.logo, .menu)::part(label) {
  padding-inline: var(--op-space-x-small);
  border-radius: var(--op-radius-medium);
}
sl-breadcrumb-item::part(suffix), sl-breadcrumb-item::part(prefix) {
  display: none;
}
sl-breadcrumb-item:not(:last-child):not(.logo)::part(label) {
  --breadcrumb-label--linked: var(--op-input-height-small);
  min-height: var(--breadcrumb-label--linked);
  align-content: center;
}
sl-breadcrumb-item:not(:last-child):not(.logo)::part(label):hover {
  background: var(--op-color-primary-plus-six);
  color: var(--op-color-primary-on-plus-six);
}
sl-breadcrumb-item:not(:last-child):not(.logo)::part(label):active, sl-breadcrumb-item:not(:last-child):not(.logo)::part(label):focus {
  background: var(--op-color-primary-plus-six);
  color: var(--op-color-primary-on-plus-six);
  box-shadow: var(--op-border-all) var(--op-color-primary-plus-three);
}
sl-breadcrumb-item:first-child::part(prefix), sl-breadcrumb-item:first-child::part(suffix) {
  display: none;
}

sl-breadcrumb-item.breadcrumb__last-item {
  width: 100%;
}
sl-breadcrumb-item.breadcrumb__last-item::part(label) {
  width: 100%;
  display: flex;
}
sl-breadcrumb-item.breadcrumb__last-item::part(base) {
  width: 100%;
}

sl-skeleton.pdf-page {
  --page-height: 22rem;
  --page-width: 35rem;
  width: var(--page-width);
  height: var(--page-height);
  --border-radius: var(--op-radius-large);
}

sl-badge.circular {
  --badge-size: 6px;
}
sl-badge.circular::part(base) {
  height: var(--badge-size);
  width: var(--badge-size);
  padding: 0;
  border-radius: var(--op-radius-circle);
  border: none;
}

.sl-range-wrapper--large sl-range {
  --thumb-size: 40px;
  --track-height: 12px;
  width: 100%;
}

.sl-range-wrapper--background {
  display: flex;
  padding: var(--op-space-x-small) var(--op-space-small);
  align-items: center;
  gap: var(--op-space-x-small);
  flex: 1 0 0;
  align-self: stretch;
  border-radius: var(--op-radius-large);
  background: var(--op-color-neutral-plus-seven);
  line-height: 0;
}
.sl-range-wrapper--background.sl-range-wrapper--large {
  padding: var(--op-space-medium) var(--op-space-small);
}

.sl-range-wrapper--with-labels {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}
.sl-range-wrapper--with-labels .sl-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--op-font-size-small);
  color: var(--op-color-neutral-plus-three);
  user-select: none;
}
.sl-range-wrapper--with-labels sl-range::part(form-control-label) {
  font-size: var(--op-font-x-small);
}

sl-range::part(base) {
  user-select: none;
  -webkit-user-select: none;
}

sl-tab-group.markup-toolbar-tab-group::part(nav) {
  padding: var(--op-space-x-small) 0 var(--op-space-x-small) var(--op-space-x-small);
  border-right: var(--op-border-width-large) solid var(--op-color-neutral-plus-five);
}
sl-tab-group.markup-toolbar-tab-group::part(tabs) {
  border: none;
}
sl-tab-group.markup-toolbar-tab-group::part(active-tab-indicator) {
  border-color: var(--op-color-primary-minus-one);
  border-width: var(--op-border-width-large);
  right: calc(-1 * var(--op-border-width-large));
}
sl-tab-group.markup-toolbar-tab-group sl-tab-panel::part(base) {
  --tab-panel-width: calc(var(--op-size-unit) * 90);
  --tab-panel-height: calc(var(--op-size-unit) * 75);
  padding: var(--op-space-medium);
  width: var(--tab-panel-width);
  height: var(--tab-panel-height);
  overflow-y: auto;
}
sl-tab-group.markup-toolbar-tab-group sl-tab::part(base) {
  --tab-width: calc(var(--op-size-unit) * 30);
  padding: var(--op-space-x-small) var(--op-space-small);
  border-radius: var(--op-radius-large) 0 0 var(--op-radius-large);
  width: var(--tab-width);
  font-size: var(--op-font-x-small);
}
sl-tab-group.markup-toolbar-tab-group sl-tab[active]::part(base) {
  color: var(--op-color-primary-on-plus-six);
  background-color: var(--op-color-primary-plus-six);
}

.material-symbols-outlined,
.material-symbols {
  line-height: var(--op-line-height-densest);
  vertical-align: baseline;
}

.icon--disabled {
  color: var(--op-color-neutral-minus-two);
  cursor: not-allowed;
}

.material-symbols-outlined,
.material-symbols,
.custom-icons {
  --op-icon-size: var(--op-font-medium);
  font-size: var(--op-icon-size);
}

.custom-icons {
  width: var(--op-icon-size);
  height: var(--op-icon-size);
  flex: none;
}
.custom-icons svg {
  display: block;
}

.icon.icon--small {
  --__op-icon-font-size: var(--op-font-small);
  --op-icon-size: var(--op-font-small);
}
.icon.icon--medium {
  --__op-icon-font-size: var(--op-font-medium);
  --op-icon-size: var(--op-font-medium);
  --mso-optical-sizing: 20;
}
.icon.icon--large {
  --__op-icon-font-size: var(--op-font-x-large);
  --op-icon-size: var(--op-font-x-large);
  --mso-optical-sizing: 40;
}
.icon.icon--large.custom-icons {
  width: var(--op-icon-size);
  height: var(--op-icon-size);
}
.icon.icon--x-large {
  --__op-icon-font-size: var(--op-font-2x-large);
  --op-icon-size: var(--op-font-2x-large);
  --mso-optical-sizing: 48;
}
.icon.icon--x-large.custom-icons {
  width: var(--op-icon-size);
  height: var(--op-icon-size);
}
.icon.icon--2x-large {
  --__op-icon-font-size: var(--op-font-3x-large);
  --op-icon-size: var(--op-font-3x-large);
  --mso-optical-sizing: 54;
}
.icon.icon--2x-large.custom-icons {
  width: var(--op-icon-size);
  height: var(--op-icon-size);
}
.icon.icon--3x-large {
  --__op-icon-font-size: var(--op-font-4x-large);
  --op-icon-size: var(--op-font-4x-large);
  --mso-optical-sizing: 54;
}
.icon.icon--3x-large.custom-icons {
  width: var(--op-icon-size);
  height: var(--op-icon-size);
}
.icon.icon--4x-large {
  --__op-icon-font-size: var(--op-font-5x-large);
  --op-icon-size: var(--op-font-5x-large);
  --mso-optical-sizing: 60;
}
.icon.icon--4x-large.custom-icons {
  width: var(--op-icon-size);
  height: var(--op-icon-size);
}
.icon.icon--5x-large {
  --pi-table-icon-size: calc(1rem * 4);
  --__op-icon-font-size: var(--pi-table-icon-size);
  --op-icon-size: var(--pi-table-icon-size);
  --mso-optical-sizing: 72;
}
.icon.icon--5x-large.custom-icons {
  width: var(--op-icon-size);
  height: var(--op-icon-size);
}

.icon--primary {
  color: var(--op-color-primary-minus-two);
}

.icon--success {
  color: var(--op-color-alerts-notice-minus-one);
}

.icon--danger {
  color: var(--op-color-alerts-danger-on-plus-five-alt);
}

.alert {
  border-radius: var(--op-radius-large);
  font-weight: var(--op-font-weight-normal);
}
.alert.alert--small {
  font-size: var(--op-font-x-small);
  padding-inline: var(--op-space-small);
}
.alert.alert--warning {
  color: var(--op-color-alerts-warning-on-plus-six);
  background-color: var(--op-color-alerts-warning-plus-six);
  border: none;
  box-shadow: none;
}
.alert.alert--danger {
  color: var(--op-color-alerts-danger-on-plus-six);
  background-color: var(--op-color-alerts-danger-plus-six);
  border: none;
  box-shadow: none;
}
.alert.alert--info {
  color: var(--op-color-alerts-info-on-plus-six);
  background-color: var(--op-color-alerts-info-plus-six);
  border: none;
  box-shadow: none;
}
.alert.alert--notice {
  color: var(--op-color-alerts-notice-on-plus-six);
  background-color: var(--op-color-alerts-notice-plus-six);
  border: none;
  box-shadow: none;
}

.badge {
  letter-spacing: normal;
  border-radius: var(--op-radius-pill);
  height: max-content;
  padding: var(--op-space-2x-small) var(--op-space-small);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-semi-bold);
  line-height: var(--op-line-height-base);
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four);
  white-space: nowrap;
}
.badge.badge.badge--clickable.badge--clickable:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.badge.badge--secondary {
  background-color: var(--op-color-primary-plus-four);
  color: var(--op-color-primary-on-plus-four);
}
.badge.badge--secondary.badge--clickable {
  cursor: pointer;
}
.badge.badge--secondary.badge--clickable:hover {
  background-color: var(--op-color-primary-plus-two);
  color: var(--op-color-primary-on-plus-two);
}
.badge.badge--warning {
  background-color: var(--op-color-alerts-warning-plus-one);
  color: var(--op-color-alerts-warning-on-plus-one);
}
.badge.badge--warning.badge--clickable {
  cursor: pointer;
}
.badge.badge--warning.badge--clickable:hover {
  background-color: var(--op-color-primary-plus-three);
  color: var(--op-color-primary-on-plus-three);
}
.badge.badge--notice {
  background-color: var(--op-color-alerts-notice-minus-two);
  color: var(--op-color-alerts-notice-on-minus-two);
}
.badge.badge--notice.badge--clickable {
  cursor: pointer;
}
.badge.badge--notice.badge--clickable:hover {
  background-color: var(--op-color-alerts-notice-minus-five);
  color: var(--op-color-alerts-notice-on-minus-five);
}
.badge.badge--danger {
  background-color: var(--op-color-alerts-danger-minus-two);
  color: var(--op-color-alerts-danger-on-minus-two);
}
.badge.badge--danger.badge--clickable {
  cursor: pointer;
}
.badge.badge--danger.badge--clickable:hover {
  background-color: var(--op-color-alerts-danger-minus-five);
  color: var(--op-color-alerts-danger-on-minus-five);
}
.badge.badge--primary {
  background-color: var(--op-color-primary-minus-two);
  color: var(--op-color-primary-on-minus-two);
}
.badge.badge--primary.badge--clickable {
  cursor: pointer;
}
.badge.badge--primary.badge--clickable:hover {
  background-color: var(--op-color-primary-minus-four);
  color: var(--op-color-primary-on-minus-four);
}
.badge.badge--clickable {
  cursor: pointer;
}
.badge.badge--clickable:hover {
  background-color: var(--op-color-neutral-plus-two);
  color: var(--op-color-neutral-on-plus-two);
}
.badge.badge--bold {
  font-weight: var(--op-font-weight-bold);
}
.badge.badge--small {
  padding: var(--op-space-3x-small) var(--op-space-x-small);
  line-height: var(--op-line-height-dense);
}
.badge.badge--outlined {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-three);
}
.badge.badge--no-icon {
  gap: unset;
}
.badge.badge--quick-filter {
  margin: var(--op-space-x-small) 0px;
  padding: var(--op-space-3x-small) var(--op-space-x-small);
  line-height: var(--op-line-height-dense);
}
.badge.badge--keyboard-shortcut {
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-neutral-plus-three);
  color: var(--op-color-neutral-on-plus-three);
}
.badge.project__list-in-progress-badge {
  background-color: var(--op-color-badge-purple);
  color: var(--op-color-neutral-on-minus-max);
}
.badge.project__list-new-order-badge {
  background-color: var(--op-color-badge-teal);
  color: var(--op-color-neutral-on-minus-max);
}
.badge.project__list-ready-for-review-badge {
  background-color: var(--op-color-badge-yellow);
  color: var(--op-color-neutral-on-minus-max);
}
.badge.project__list-delivered-badge {
  background-color: var(--op-color-badge-green);
  color: var(--op-color-neutral-on-minus-max);
}

.banner-warning {
  --pi-z-index-banner: 10000;
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: var(--pi-z-index-banner);
  background-color: var(--op-color-alerts-warning-plus-five);
  background-image: url("/assets/org-visit-control-background-ec5f377d.png");
  border-radius: var(--op-radius-medium);
  box-shadow: var(--op-shadow-medium);
  box-sizing: border-box;
  color: var(--op-color-alerts-warning-on-plus-five);
  font-size: var(--op-font-small);
  padding: var(--op-space-x-small);
  user-select: none;
}

.banner__drag-handle:hover {
  cursor: grab;
}
.banner__drag-handle:hover:active {
  cursor: grabbing;
}

button:disabled {
  cursor: not-allowed;
}

.btn {
  --_op-btn-font-2x-small: var(--op-font-2x-small);
  --_op-btn-font-x-small: var(--op-font-x-small);
  --_op-btn-font-large: var(--op-font-medium);
  border-radius: var(--op-radius-medium);
  font-weight: var(--op-font-weight-normal);
  --__op-btn-border-shadow: 0 var(--op-border-width) var(--op-border-width-large) var(--op-color-shadow);
  box-shadow: var(--op-border-all) var(--op-color-border), var(--__op-btn-border-shadow);
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
}
.btn:not(:disabled, .btn--disabled):hover {
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
}
.btn.btn--disabled, .btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.btn.btn--outline {
  background-color: transparent;
  box-shadow: inset var(--op-border-all) var(--op-color-border);
}
.btn.btn--no-border {
  box-shadow: none;
}
.btn.btn--icon.btn--pill {
  border-radius: var(--op-radius-pill);
}
.btn.btn--outline:not(:disabled, .btn--disabled):hover {
  background-color: transparent;
  box-shadow: inset var(--op-border-all) var(--op-color-border), var(--__op-btn-border-shadow);
  color: var(--op-color-neutral-on-plus-six);
}
.btn.btn--no-border:not(:disabled, .btn--disabled):hover {
  box-shadow: none;
}
.btn {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .btn.btn--small, .btn.btn--medium, .btn.btn--large {
    --__op-btn-height: var(--_op-btn-height-medium);
  }
}
.btn {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .btn {
    background-color: var(--op-color-neutral-plus-seven);
    color: var(--op-color-neutral-on-plus-seven);
    border-radius: var(--op-radius-large);
    box-shadow: none;
  }
}
.btn.btn--2x-small {
  --__op-btn-font-size: var(--_op-btn-font-2x-small);
  min-height: var(--op-input-height-2x-small);
  padding: 0 var(--op-space-2x-small);
}
.btn.btn--2x-small.btn--icon {
  min-width: var(--op-input-height-2x-small);
  height: var(--op-input-height-2x-small);
  width: var(--op-input-height-2x-small);
}
.btn.btn--x-small {
  --__op-btn-font-size: var(--_op-btn-font-x-small);
  font-weight: var(--op-font-weight-bold);
  min-height: var(--op-input-height-small);
}
.btn.btn--x-small.btn--icon {
  height: var(--op-input-height-small);
  min-width: var(--op-input-height-small);
  width: var(--op-input-height-small);
}
.btn.btn--small {
  --_op-btn-font-size: var(--op-font-small);
  border-radius: var(--op-radius-medium);
  font-weight: var(--op-font-weight-medium);
  gap: var(--op-space-2x-small);
  min-height: var(--op-input-height-small);
  padding: 0 var(--op-space-small);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .btn.btn--small {
    border-radius: var(--op-radius-large);
    box-shadow: unset;
    font-size: var(--op-font-small);
    height: var(--op-input-height-medium);
  }
  .btn.btn--small.btn--icon {
    border-radius: var(--op-radius-large);
    height: var(--op-input-height-medium);
    min-width: unset;
    width: var(--op-input-height-medium);
  }
}
.btn.btn--medium {
  --_op-btn-padding-medium: 0 var(--op-space-medium);
  font-size: var(--_op-btn-font-medium);
  font-weight: var(--op-font-weight-medium);
}
.btn.btn--medium.btn--icon {
  height: var(--op-input-height-medium);
  width: var(--op-input-height-medium);
}
.btn.btn--medium {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .btn.btn--medium {
    border-radius: var(--op-radius-large);
    height: var(--op-input-height-medium);
  }
}
.btn.btn--large {
  --_op-btn-font-large: var(--op-font-medium);
  --_op-btn-padding-large: 0 var(--op-space-medium);
  border-radius: var(--op-radius-large);
  height: var(--op-input-height-x-large);
}
.btn.btn--large.btn--icon {
  height: var(--op-input-height-large);
  width: var(--op-input-height-large);
}
.btn.btn--large {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .btn.btn--large {
    border-radius: var(--op-radius-large);
    height: var(--op-input-height-large);
  }
}
.btn.btn--primary {
  background-color: var(--op-color-primary-minus-two);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-two);
  color: var(--op-color-primary-on-minus-two);
}
.btn.btn--primary:not(:disabled, .btn--disabled):hover {
  background-color: var(--op-color-primary-minus-six);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-six);
  color: var(--op-color-primary-on-minus-six);
}
.btn.btn--primary.btn--outline {
  background-color: var(--op-color-primary-plus-max);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
  color: var(--op-color-primary-on-plus-max-alt);
}
.btn.btn--primary.btn--outline:not(:disabled, .btn--disabled):hover {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight-alt);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-one);
}
.btn.btn--primary {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .btn.btn--primary {
    border-radius: var(--op-radius-large);
  }
}
.btn.btn--primary.btn--no-border {
  background-color: transparent;
  box-shadow: none;
  color: var(--op-color-primary-minus-three);
}
.btn.btn--primary.btn--no-border:not(:disabled, .btn--disabled):hover {
  background-color: transparent;
  box-shadow: none;
  color: var(--op-color-primary-on-plus-eight);
}
.btn.btn--primary.btn--no-border.btn--no-border-invert-colors {
  color: var(--op-color-primary-on-plus-three);
}
.btn.btn--primary.btn--no-border.btn--no-border-invert-colors:not(:disabled, .btn--disabled):hover {
  color: var(--op-color-primary-base);
}
.btn.btn--primary.btn--hover-border {
  box-shadow: none;
}
.btn.btn--primary.btn--hover-border:hover {
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-three);
}
.btn.btn--primary.btn--text {
  color: var(--op-color-primary-minus-two);
}
.btn.btn--primary.btn--text:not(:disabled, .btn--disabled):hover {
  background-color: var(--op-color-primary-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
  color: var(--op-color-primary-on-plus-eight);
}
.btn.btn--secondary {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-five);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .btn.btn--secondary {
    background-color: var(--op-color-neutral-plus-seven);
    color: var(--op-color-neutral-on-plus-seven);
  }
}
.btn.btn--secondary:not(:disabled, .btn--disabled):hover, sl-dropdown[open] .btn.btn--secondary[slot=trigger] {
  background-color: var(--op-color-primary-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-two);
  color: var(--op-color-primary-on-plus-eight);
}
.btn.btn--secondary.btn--no-border:not(:disabled, .btn--disabled):hover {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight);
}
.btn.btn--secondary.btn--outline {
  background-color: transparent;
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
  color: var(--op-color-neutral-on-plus-eight);
}
.btn.btn--secondary.btn--outline:not(:disabled, .btn--disabled):hover {
  background-color: var(--op-color-primary-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-three);
  color: var(--op-color-primary-on-plus-eight);
}
.btn.btn--destructive {
  background-color: var(--op-color-alerts-danger-minus-one);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-one);
  color: var(--op-color-alerts-danger-on-minus-one);
}
.btn.btn--destructive:not(:disabled, .btn--disabled):hover {
  background-color: var(--op-color-alerts-danger-minus-three);
  color: var(--op-color-alerts-danger-on-minus-three);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-four);
}
.btn.btn--destructive.btn--outline {
  background-color: var(--op-color-alerts-danger-plus-max);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-five);
  color: var(--op-color-alerts-danger-on-plus-max-alt);
}
.btn.btn--destructive.btn--outline:not(:disabled, .btn--disabled):hover {
  background-color: var(--op-color-alerts-danger-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-one);
  color: var(--op-color-alerts-danger-on-plus-eight-alt);
}
.btn.btn--destructive.btn--no-border {
  background-color: transparent;
  box-shadow: none;
  color: var(--op-color-alerts-danger-base);
}
.btn.btn--destructive.btn--no-border:not(:disabled, .btn--disabled):hover {
  background-color: transparent;
  color: var(--op-color-alerts-danger-minus-one);
}
.btn.btn--destructive.btn--text {
  color: var(--op-color-alerts-danger-minus-two);
}
.btn.btn--destructive.btn--text:hover {
  background-color: var(--op-color-alerts-danger-plus-eight);
  color: var(--op-color-alerts-danger-on-plus-eight);
}
.btn.btn--link {
  --pi-link-button-color: var(--op-color-primary-on-plus-eight-alt);
  --pi-link-button-color__hover: var(--op-color-primary-on-plus-eight);
  min-height: unset;
  background-color: unset;
  border: none;
  box-shadow: unset;
  color: var(--pi-link-button-color);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.btn.btn--link.btn--link-no-underline {
  text-decoration: none;
}
.btn.btn--link:hover {
  color: var(--pi-link-button-color__hover);
  background-color: unset;
  border: none;
  box-shadow: unset;
}
.btn.btn--rounded-left {
  border-radius: var(--op-radius-medium) 0 0 var(--op-radius-medium);
}
.btn.btn--rounded-right {
  border-radius: 0 var(--op-radius-medium) var(--op-radius-medium) 0;
}
.btn.btn--space-between {
  justify-content: space-between;
}
.btn.btn--warning {
  background-color: var(--op-color-alerts-warning-plus-three);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
  color: var(--op-color-alerts-warning-on-plus-three);
}
.btn.btn--warning:not(:disabled, .btn--disabled):hover {
  background-color: var(--op-color-alerts-warning-plus-two);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-two);
  color: var(--op-color-alerts-warning-on-plus-two);
}
.btn.btn--warning.btn--no-border {
  background-color: transparent;
  box-shadow: none;
  color: var(--op-color-alerts-warning-plus-three);
}
.btn.btn--warning.btn--no-border:not(:disabled, .btn--disabled):hover {
  background-color: transparent;
  color: var(--op-color-warning-plus-three);
}
.btn.btn--warning.btn--outline {
  background-color: var(--op-color-alerts-warning-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-two);
  color: var(--op-color-alerts-warning-on-plus-eight);
}
.btn.btn--warning.btn--outline:not(:disabled, .btn--disabled):hover {
  background-color: var(--op-color-alerts-warning-plus-six);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-one);
  color: var(--op-color-alerts-warning-on-plus-six);
}
.btn.btn--warning.btn--outline-light {
  background-color: var(--op-color-alerts-warning-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-two);
  color: var(--op-color-alerts-warning-on-plus-eight-alt);
}
.btn.btn--warning.btn--outline-light:not(:disabled, .btn--disabled):hover {
  background-color: var(--op-color-alerts-warning-plus-six);
  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-one);
  color: var(--op-color-alerts-warning-on-plus-six);
}
.btn.btn--warning.btn--text {
  color: var(--op-color-alerts-warning-on-plus-three);
}
.btn.btn--warning.btn--text:not(:disabled, .btn--disabled):hover {
  background-color: var(--op-color-warning-plus-six);
  color: var(--op-color-alerts-warning-on-plus-six);
}
.btn.btn--text {
  border: none;
  box-shadow: none;
  background-color: unset;
}
.btn.btn--text:not(:disabled, .btn--disabled):hover {
  cursor: pointer;
  border: none;
  box-shadow: none;
  background-color: unset;
}
.btn.btn--text:disabled {
  cursor: not-allowed;
}
.btn.btn--outlined-area {
  display: flex;
  flex-direction: column;
  background-color: var(--op-color-neutral-plus-eight);
  border: var(--op-border-width) dashed var(--op-color-border);
  border-radius: var(--op-radius-large);
  box-shadow: unset;
  font-size: var(--op-font-small);
  height: unset;
  padding: var(--op-space-x-large);
  width: 100%;
}
.btn.btn--outlined-area:hover:not(:disabled, .btn--disabled) {
  background-color: var(--op-color-primary-plus-five);
  border-color: var(--op-color-primary-minus-three);
  box-shadow: none;
}
.btn.btn--outlined-area.btn--primary {
  background-color: var(--op-color-primary-plus-eight);
  border: var(--op-border-width) dashed var(--op-color-primary-plus-four);
  color: var(--op-color-primary-minus-two);
  box-shadow: unset;
}
.btn.btn--outlined-area.btn--primary:hover:not(:disabled, .btn--disabled) {
  color: var(--op-color-primary-minus-two);
  box-shadow: unset;
}
.btn.btn--outlined-area.btn--small {
  border-radius: var(--op-radius-medium);
}
.btn .btn--rounded {
  border-radius: var(--op-radius-large);
}
.btn.btn--radius-left-none {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn.btn--radius-right-none {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn.btn--circle-icon {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: var(--op-radius-circle);
  background: var(--op-color-neutral-plus-seven);
}
.btn.btn--full-width {
  width: 100%;
}

.callout {
  display: flex;
  align-items: center;
  background-color: var(--op-color-neutral-plus-seven);
  color: var(--op-color-neutral-on-plus-seven);
  border-radius: var(--op-radius-medium);
  padding: var(--op-space-x-small) var(--op-space-small);
}
.callout.callout--info {
  background-color: var(--op-color-alerts-info-plus-six);
  color: var(--op-color-alerts-info-on-plus-six);
}

.callout--primary {
  background-color: var(--op-color-primary-plus-six);
  color: var(--op-color-primary-on-plus-six);
}

.callout--lightest {
  background-color: var(--op-color-neutral-plus-max);
}

.callout--light {
  background-color: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-five);
  border-radius: var(--op-radius-medium);
  padding: var(--op-space-x-small) var(--op-space-small);
}

.callout-with-action {
  display: flex;
  padding: var(--op-space-small) var(--op-space-medium);
  align-items: center;
  gap: var(--op-space-x-small);
  justify-content: space-between;
  font-size: var(--op-font-small);
  border-radius: var(--op-radius-large);
  background: var(--op-color-alerts-info-plus-six);
  color: var(--op-color-alerts-info-on-plus-six);
}
.callout-with-action .callout-with-action__content {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.callout-with-action .callout-with-action__title {
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-medium);
  color: var(--op-color-alerts-info-on-plus-six-alt);
}
.callout-with-action.callout-with-action--neutral {
  background: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
}
.callout-with-action.callout-with-action--neutral .callout-with-action__title {
  color: var(--op-color-neutral-on-plus-six-alt);
}

.card {
  border-radius: var(--op-radius-large);
}
.card .card__header,
.card .card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--op-font-x-large);
  line-height: var(--op-line-height-dense);
  padding: var(--op-space-small) var(--op-space-2x-large);
  line-height: var(--op-line-height-dense);
}
.card .card__header {
  --op-card-header-box-shadow: inset var(--op-border-top) var(--op-color-border);
  box-shadow: var(--op-card-header-box-shadow);
}
.card .card__header.card__header--small {
  padding: var(--op-space-x-small) var(--op-space-small);
}
.card .card__header.card__header--x-small {
  padding: var(--op-space-2x-small) var(--op-space-x-small);
}
.card .card__header.card__header--filled {
  background: var(--op-color-neutral-plus-six);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.card .card__header .header__start,
.card .card__header .header__end {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.card .card__title {
  font-size: var(--op-font-x-large);
  font-weight: var(--op-font-weight-semi-bold);
}
.card .card__title.card__title--small {
  font-size: var(--op-font-small);
}
.card .card__title.card__title--weight-normal {
  font-weight: var(--op-font-weight-normal);
}
.card .card__subtitle {
  font-size: var(--op-font-small);
}
.card .card__body {
  padding: var(--op-space-large) var(--op-space-2x-large);
}
.card .card__body.card__body--spacing-y {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
}
.card .card__body.card__body--condensed {
  display: grid;
  gap: var(--op-space-large);
}
.card .card__body.card__body--small {
  padding: var(--op-space-x-small) var(--op-space-small);
}
.card .card__body.card__body--x-small {
  padding: var(--op-space-x-small);
}
.card .card__footer {
  box-shadow: var(--op-border-top) var(--op-color-border);
}
.card .card__footer .footer__start,
.card .card__footer .footer__end {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.proposal__sidebar-values .card {
  border-radius: var(--op-radius-medium);
}
.card.card--column {
  display: flex;
  flex-direction: column;
}
.card.card--small {
  border-radius: var(--op-radius-medium);
}
.card.card--bulk-order-step {
  display: flex;
  padding: var(--op-space-small) var(--op-space-medium);
  align-items: center;
  justify-content: space-between;
  gap: var(--op-space-small);
  border: 0;
  background-color: var(--op-color-neutral-plus-eight);
  box-shadow: none;
  color: var(--op-color-neutral-on-plus-eight);
}
.card.card--column .bulk-order-step__content {
  width: 100%;
  align-items: flex-start;
}
.card.card--contain-none {
  contain: unset;
  position: unset;
}
.card.card--administration {
  display: flex;
  flex-direction: column;
  border-radius: var(--op-radius-large);
  overflow: hidden;
  width: 100%;
  height: 100%;
  contain: unset;
}
.card.card--administration .details__value {
  align-items: center;
  line-height: var(--op-line-height-loose);
}
.card.card--administration .plan-level-header {
  display: flex;
  gap: var(--op-space-x-large);
  align-items: center;
}
.card.card--administration .plan-level-heading {
  font-size: var(--op-font-3x-large);
  font-weight: var(--op-font-weight-medium);
}
.card.card--administration .plan-level-heading--active {
  color: var(--op-color-primary-original);
}
.card.card--administration .plan-level-heading--canceled {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.card.card--administration .card--administration__block-items {
  display: grid;
  gap: var(--op-space-large);
}
.card.card--administration .card--administration__inline-items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: flex-end;
  row-gap: var(--op-space-medium);
  /* --op-breakpoint-medium */
}
@media (max-width: 1024px) {
  .card.card--administration .card--administration__inline-items {
    grid-template-columns: 1fr 1fr;
  }
}
.card.card--administration .card--administration__inline-items.card--administration__inline-items--header {
  grid-template-columns: 1fr;
}
.card.card--table {
  display: flex;
  flex-direction: column;
  border-radius: var(--op-radius-large) var(--op-radius-large) 0 0;
  contain: layout;
  height: 100%;
}
.card.card--table .card-table__controls {
  --op-z-index-filter-group: 2;
  position: sticky;
  top: 0;
  z-index: var(--op-z-index-filter-group);
}
.card.card--table .card-table__filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--op-space-x-small);
  padding: var(--op-space-small) var(--op-space-x-large);
}
.card.card--table .card-table__filters.card-table__filters--hidden {
  display: none;
}
.card.card--tier {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: 100%;
  background-color: var(--op-color-neutral-plus-max);
  contain: none;
  position: relative;
}
.card.card--tier .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}
.card.card--tier .card__footer {
  box-shadow: none;
  padding: var(--op-space-large);
}
.card.card--tier .tier-card__badge {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card.card--tier.card--tier-popular {
  --op-color-border: var(--op-color-primary-plus-four);
  background-color: var(--op-color-primary-plus-seven);
}
.card.card--tier.card--tier-popular .selection-name,
.card.card--tier.card--tier-popular .callout {
  color: var(--op-color-neutral-on-plus-seven);
}
.card.card--tier.card--tier-popular .content,
.card.card--tier.card--tier-popular .subscription-card__li,
.card.card--tier.card--tier-popular .detail {
  color: var(--op-color-neutral-on-plus-seven-alt);
}
.card.card--tier.card--tier-recommended {
  --op-color-border: var(--op-color-alerts-notice-plus-four);
  background: var(--op-color-alerts-notice-plus-seven);
}
.card.card--tier.card--tier-recommended .selection-name,
.card.card--tier.card--tier-recommended .callout {
  color: var(--op-color-neutral-on-plus-seven);
}
.card.card--tier.card--tier-recommended .content,
.card.card--tier.card--tier-recommended .subscription-card__li,
.card.card--tier.card--tier-recommended .detail {
  color: var(--op-color-neutral-on-plus-seven-alt);
}
.card.card--upgrade-feature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--op-space-3x-large);
}
.card.card--upgrade-feature .card__body {
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-max-alt);
  font-weight: var(--op-font-weight-medium);
  padding: var(--op-space-x-large);
  box-shadow: var(--op-shadow-medium-bottom);
}
.card.card--upgrade-feature .card__header {
  flex-direction: column;
  gap: var(--op-space-x-small);
  box-shadow: none;
  align-items: flex-start;
  font-weight: var(--op-font-weight-medium);
  padding: var(--op-space-x-large);
}
.card.card--proposal-kit-contents {
  display: flex;
  flex-direction: column;
  contain: unset;
}
.card.card--proposal-kit-contents .card__header {
  background-color: var(--op-color-primary-plus-eight);
  border-radius: var(--op-radius-large) var(--op-radius-large) 0 0;
  color: var(--op-color-neutral-on-plus-eight-alt);
  font-size: var(--op-font-medium);
  padding-block: var(--op-space-small);
}
.card.card--user-table {
  border-radius: var(--op-radius-large);
  contain: unset;
  overflow: hidden;
}
.card.card--user-table .card__header {
  box-shadow: unset;
}
.card.card--danger {
  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-minus-one);
}
.card.card--filled {
  background-color: var(--op-color-neutral-plus-max);
}
.card.card--styleguide-colors {
  padding: var(--op-space-medium) 0 0 var(--op-space-medium);
  border-radius: var(--op-radius-medium) 0 0 0;
}

.card-collection {
  display: flex;
  flex-direction: column;
  padding: var(--op-space-x-large) var(--op-space-3x-large);
  gap: var(--op-space-large);
}
.card-collection.card-collection--administration {
  flex-wrap: wrap;
  justify-content: space-between;
}

.card-inlay {
  border-radius: var(--op-radius-large);
  font-size: var(--op-font-medium);
  line-height: var(--op-line-height-base);
  background-color: var(--op-color-neutral-plus-seven);
  color: var(--op-color-neutral-on-plus-seven-alt);
  padding: var(--op-space-x-large);
}
.card-inlay.card-inlay--vertical-spacing {
  display: flex;
  flex-direction: column;
  background: var(--op-color-neutral-plus-six);
  padding: var(--op-space-x-small);
  gap: var(--op-space-small);
}
.card-inlay.card-inlay--settings {
  --op-color-surface-complement: var(--op-color-neutral-on-plus-six);
  --op-color-surface-complement-alt: var(--op-color-neutral-on-plus-six-alt);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-surface-complement);
  padding: var(--op-space-small) var(--op-space-medium);
}
.card-inlay.card-inlay--settings .card__title {
  color: var(--op-color-surface-complement-alt);
}
.card-inlay.card-inlay--settings .card-inlay__body {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}
.card-inlay .card-inlay--sso {
  padding: var(--op-space-medium);
  position: relative;
  width: 33.3333333333%;
}
.card-inlay .card-inlay--sso button {
  position: absolute;
  top: var(--op-space-2x-small);
  right: var(--op-space-2x-small);
}
.card-inlay.card-inlay--option-slider-selection {
  background: var(--op-color-alerts-info-plus-six);
  padding: var(--op-space-2x-small) var(--op-space-x-small);
  font-size: var(--op-font-small);
  border-radius: var(--op-radius-medium);
}
.card-inlay.card-inlay--option-slider-selection.card-inlay--option-slider-selection-empty {
  background: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six-alt);
}
.card-inlay.card-inlay--with-border {
  box-shadow: var(--op-border-all) var(--op-color-border);
}
.card-inlay.card-inlay--on-inlay {
  background-color: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-five-alt);
}
.card-inlay.form-inlay {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight-alt);
  padding: var(--op-space-x-small) var(--op-space-small);
}

.symbol-selector-menu__header {
  position: sticky;
  top: 0;
  display: flex;
  gap: var(--op-space-2x-small);
  background-color: var(--op-color-neutral-plus-max);
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  padding: var(--op-space-x-small);
  width: 100%;
}

sl-menu.symbol-selector-menu__items,
.symbol-selector-menu__items {
  --object-picker-panel-max-height: calc(var(--op-size-unit) * 103);
  display: grid;
  align-items: flex-start;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--op-space-small);
  padding: var(--op-space-small);
  max-height: var(--object-picker-panel-max-height);
  overflow: scroll;
}

:root sl-menu .symbol-selector-menu__items button:not(.btn--sl-menu-ignore) {
  display: flex;
}

.symbol-selector-menu__item {
  background-color: var(--op-color-neutral-plus-max);
  border-radius: var(--op-radius-medium);
  box-shadow: inset var(--op-border-all) var(--op-color-border);
  height: var(--op-input-height-x-large);
  padding: var(--op-space-2x-small);
  width: var(--op-input-height-x-large);
  color: var(--op-color-neutral-on-plus-max);
}
.symbol-selector-menu__item.isSelected {
  background-color: var(--op-color-primary-plus-five);
  box-shadow: var(--op-border-all-large) var(--op-color-primary-minus-three);
  color: var(--op-color-primary-on-plus-five);
}
.symbol-selector-menu__item.symbol-selector-menu__item--hatch {
  padding: unset;
}

.symbol-selector-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  width: var(--op-input-height-x-large);
  height: var(--op-input-height-x-large);
  box-sizing: border-box;
  line-height: 0;
  overflow: hidden;
}

.symbol-selector-menu__trigger .symbol-selector-menu__item {
  display: block;
}

.symbol-selector-menu__items button .symbol-selector-menu__item {
  --symbol-selector-item-size: calc(var(--op-size-unit) * 12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--symbol-selector-item-size);
  height: var(--symbol-selector-item-size);
  padding: var(--op-space-2x-small);
  border: none;
  background: transparent;
  box-sizing: border-box;
}

.symbol-selector-menu__item-radio {
  display: none;
}

.symbol-selector-menu__annotation-filters {
  --pi-annotation-dropdown-width: calc(var(--op-size-unit) * 50);
  width: var(--pi-annotation-dropdown-width);
}

.annotation-filters__items {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.annotation-filters__items .annotation-filters__item {
  padding: var(--op-space-x-small) var(--op-space-small);
}

.inline-group--material-association__select {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .inline-group--material-association__select {
    width: 100%;
  }
}

.inline-group--material-association__perimeter {
  display: grid;
  align-content: center;
  background: var(--op-color-neutral-plus-eight);
  border-radius: var(--op-radius-medium);
  padding-inline: var(--op-space-small);
}

.swatch-color-used-items {
  --pi-swatch-size: calc(var(--op-size-unit) * 6);
  --pi-used-swatch-area-max-width: calc((var(--pi-swatch-size) * 8) + (var(--op-space-x-small) * 7));
  display: flex;
  gap: var(--op-space-x-small);
  flex-wrap: wrap;
  max-width: var(--pi-used-swatch-area-max-width);
}

/* --op-breakpoint-small */
@media (max-width: 768px) {
  .swatch-color-used-items {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
  }
}
.swatch-color-used {
  /* 24px */
  --pi-swatch-size: calc(var(--op-size-unit) * 6);
  cursor: pointer;
  width: var(--pi-swatch-size);
  height: var(--pi-swatch-size);
  min-width: var(--pi-swatch-size);
  min-height: var(--pi-swatch-size);
  flex: 0 0 var(--pi-swatch-size);
  border-radius: var(--op-radius-medium);
}
.swatch-color-used.swatch-color-used--small {
  --pi-swatch-size: calc(var(--op-size-unit) * 4);
}
.swatch-color-used.swatch-color-used--round {
  /* 20px */
  --pi-swatch-size: calc(var(--op-size-unit) * 5);
  min-width: var(--pi-swatch-size);
  min-height: var(--pi-swatch-size);
  border-radius: 50%;
}

/* --op-breakpoint-small */
@media (max-width: 768px) {
  .swatch-color-used {
    --pi-swatch-size: calc(var(--op-size-unit) * 8);
    width: var(--pi-swatch-size);
    height: var(--pi-swatch-size);
  }
  .swatch-color-overflow-grid .swatch-color-used {
    --pi-swatch-size: calc(var(--op-size-unit) * 10);
    width: var(--pi-swatch-size);
    height: var(--pi-swatch-size);
  }
}
.swatch-color-overflow-trigger {
  font-size: var(--op-font-2x-small);
  font-weight: var(--op-text-weight-semibold);
  color: var(--op-color-neutral-on-plus-eight-alt);
  background: var(--op-color-neutral-plus-eight);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  display: flex;
  align-items: center;
  justify-content: center;
}

.swatch-color-overflow-panel {
  padding: var(--op-space-small);
  background: var(--op-color-neutral-plus-max);
  border-radius: var(--op-radius-large);
  box-shadow: var(--op-shadow-large);
}

.swatch-color-overflow-grid {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(5, var(--pi-swatch-size, calc(var(--op-size-unit) * 6)));
  gap: var(--op-space-x-small);
}

/* --op-breakpoint-small */
@media (max-width: 768px) {
  .swatch-color-overflow-grid {
    --color-size: calc(var(--op-size-unit) * 10);
    grid-template-columns: repeat(5, var(--color-size));
  }
}
.swatch-color-overflow-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--op-space-x-small);
}

.swatch-color-overflow-pagination__arrow {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--op-text-size-large);
  color: var(--op-color-neutral-on-plus-max);
  padding: 0 var(--op-space-x-small);
}
.swatch-color-overflow-pagination__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.swatch-color-overflow-pagination__label {
  font-size: var(--op-text-size-x-small);
  color: var(--op-color-neutral-on-plus-max);
}

.inline-group {
  display: grid;
  align-items: center;
  gap: var(--op-space-large);
  grid-template-columns: repeat(4, 1fr);
}
.inline-group.inline-group--material-association {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--op-space-large);
  width: 100%;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .inline-group.inline-group--material-association {
    gap: var(--op-space-x-small);
    grid-template-columns: 1fr;
    border-radius: var(--op-radius-large);
    background: var(--op-color-neutral-plus-eight);
    padding: var(--op-space-x-small);
  }
}
.inline-group.inline-group--material-association .inline-group--material-association__select {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .inline-group.inline-group--material-association .inline-group--material-association__select {
    width: 100%;
  }
}
.inline-group.inline-group--material-association .inline-group--material-association__perimeter {
  display: grid;
  align-content: center;
  background: var(--op-color-neutral-plus-eight);
  border-radius: var(--op-radius-medium);
  padding-inline: var(--op-space-small);
}
.inline-group.inline-group--estimate-inputs {
  grid-template-columns: repeat(3, 1fr);
}
.inline-group.inline-group--item-meta {
  grid-template-columns: 4fr 1fr;
  align-items: baseline;
}
.inline-group.inline-group--item-meta sl-select {
  grid-column: auto;
}
.inline-group.inline-group--item-meta .inline-group--item-meta__type {
  --pi-annotation-type-width: calc(var(--op-size-unit) * 50);
  width: var(--pi-annotation-type-width);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .inline-group.inline-group--item-meta .inline-group--item-meta__type {
    width: 100%;
  }
}
.inline-group.inline-group--item-appearance {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  align-items: start;
}
.inline-group.inline-group--proposal-item-meta {
  grid-template-columns: 1fr 4fr 1fr;
}

.block-group {
  display: grid;
  gap: var(--op-space-small);
  justify-content: start;
}
.block-group.block-group--side-panel {
  justify-content: normal;
  width: 100%;
}
.block-group {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .block-group {
    width: 100%;
    justify-content: normal;
  }
}

.combobox-inline {
  display: flex;
  align-items: end;
}
.combobox-inline sl-input,
.combobox-inline sl-select {
  width: 100%;
}
.combobox-inline .combobox-inline__suffix {
  align-self: center;
  font-size: var(--op-font-x-small);
  padding-inline-start: var(--op-space-2x-small);
  padding-block-start: var(--op-space-large);
}

.material-name-selector {
  width: 100%;
  display: flex;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .material-name-selector {
    flex-direction: column;
  }
}
.material-name-selector .react-select-container {
  z-index: 2;
}
.material-name-selector .react-select-container .react-select__control {
  background-color: var(--op-color-primary-plus-eight);
  border: var(--op-border-width-large) solid var(--op-color-primary-minus-three);
  border-radius: 0 var(--op-radius-medium) var(--op-radius-medium) 0;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .material-name-selector .react-select-container .react-select__control {
    background: var(--op-color-neutral-plus-seven);
    border: none;
    font-size: var(--op-font-medium);
    height: var(--op-input-height-medium);
    padding: 0 var(--op-space-small);
  }
  .material-name-selector .react-select-container .react-select__control:focus {
    background-color: var(--op-color-primary-plus-eight);
    border: var(--op-border-width) solid var(--op-color-primary-plus-three);
  }
}
.material-name-selector .react-select-container .react-select__control:hover {
  border: var(--op-border-width-large) solid var(--op-color-primary-minus-three);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .material-name-selector .react-select-container .react-select__control:hover {
    border: var(--op-border-width) solid var(--op-color-primary-plus-three);
    background-color: var(--op-color-primary-plus-eight);
  }
}
.material-name-selector .react-select-container .react-select__input-container {
  color: var(--op-color-primary-on-plus-eight);
  background-color: var(--op-color-primary-plus-eight);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .material-name-selector .react-select-container .react-select__input-container {
    font-size: var(--op-font-small);
    background: var(--op-color-neutral-plus-seven);
  }
  .material-name-selector .react-select-container .react-select__input-container:hover {
    background-color: var(--op-color-primary-plus-eight);
  }
}
.material-name-selector .react-select-container .material-name-selector__header {
  background-color: var(--op-color-primary-plus-five);
  color: var(--op-color-primary-on-plus-five);
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-x-small);
  padding: var(--op-space-x-small) var(--op-space-small);
}
.material-name-selector .react-select-container .material-name-selector__item {
  display: flex;
  align-items: stretch;
  border-bottom: var(--op-border-width) solid var(--op-color-primary-plus-five);
  padding: var(--op-space-2x-small) var(--op-space-small);
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
}
.material-name-selector .react-select-container .material-name-selector__item:hover {
  background-color: var(--op-color-primary-plus-five);
  color: var(--op-color-primary-on-plus-five);
}
.material-name-selector .react-select-container .material-name-selector__item:last-child {
  border-bottom: none;
}
.material-name-selector.full-border-radius .react-select__control {
  border-radius: var(--op-radius-medium);
}
.material-name-selector sl-select.choose-catalog-select {
  --pi-catalog-select: calc(var(--op-size-unit) * 36);
  width: var(--pi-catalog-select);
  flex-shrink: 0;
}
.material-name-selector sl-select.choose-catalog-select::part(combobox) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  min-width: 15rem;
}
.material-name-selector sl-select.choose-catalog-select::part(display-input) {
  color: var(--op-color-neutral-plus-max);
}

.dialog__footer--catalog-item-controls {
  display: grid;
  align-items: center;
  justify-content: space-between;
  gap: var(--op-space-x-large);
  grid-template-columns: auto auto;
  width: 100%;
}
.dialog__footer--catalog-item-controls .catalog-item-controls__start {
  display: flex;
  justify-content: start;
  grid-column: 1/2;
}
.dialog__footer--catalog-item-controls .catalog-item-controls__end {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--op-space-small);
  grid-column: 2/3;
}

.catalog-item-controls__switch {
  flex-shrink: 0;
}

.catalog-item-controls__confirm {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
}

.catalog-item-controls__message {
  font-size: var(--op-font-x-small);
  max-width: calc(var(--op-size-unit) * 100);
  line-height: var(--op-line-height-dense);
}

.form__range-with-input.form__range-with-input--catalog-item {
  --pi-range-width: calc(var(--op-size-unit) * 67);
  width: var(--pi-range-width);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .form__range-with-input.form__range-with-input--catalog-item {
    width: 100%;
  }
}

.opacity-slider {
  /* 280px */
  --slider-width: calc(var(--op-size-unit) * 70);
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  width: var(--slider-width);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .opacity-slider {
    /* 56px */
    --slider-height: calc(var(--op-size-unit) * 14);
    /* 348px */
    --slider-width: calc(var(--op-size-unit) * 87);
    height: var(--slider-height);
    padding: var(--op-space-x-small) var(--op-space-small);
    align-self: stretch;
    border-radius: var(--op-radius-large);
    background: var(--op-color-neutral-plus-seven);
  }
}

.selected-tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--op-space-small);
  background-color: var(--op-color-primary-plus-five);
  border-bottom: var(--op-border-width) solid var(--op-color-primary-minus-three);
  color: var(--op-color-primary-on-plus-five);
  padding: var(--op-space-x-small) var(--op-space-small);
}
.selected-tool-header .selected-tool-header__title {
  display: flex;
  flex-direction: column;
  line-height: var(--op-line-height-dense);
  font-size: var(--op-font-medium);
  word-break: break-word;
}
.selected-tool-header .selected-tool-header__title .selected-tool-header__name {
  font-weight: var(--op-font-weight-bold);
}
.selected-tool-header .selected-tool-header__title .selected-tool-header__subheading {
  font-size: var(--op-font-small);
}
.selected-tool-header {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .selected-tool-header {
    background-color: unset;
    border-bottom: unset;
    color: var(--op-color-neutral-on-plus-max);
    padding: 0;
    padding-block-end: var(--op-space-small);
  }
  .selected-tool-header .selected-tool-header__title .selected-tool-header__name {
    font-weight: var(--op-font-weight-medium);
  }
}

.tool-associations {
  display: grid;
  gap: var(--op-space-x-small);
  font-size: var(--op-font-x-small);
}
.tool-associations .tool-associations__items {
  background: var(--op-color-neutral-plus-eight);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  border-radius: var(--op-radius-medium);
  color: var(--op-color-neutral-on-plus-eight);
  font-weight: var(--op-font-weight-bold);
  min-height: var(--op-input-height-small);
  padding: var(--op-space-small);
}
.tool-associations .tool-associations__items.tool-associations__items--promaps {
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  border-radius: var(--op-radius-large);
}

:root {
  --pi-compass-position-bottom: calc(var(--op-space-scale-unit) * 4);
  --pi-compass-position-left: calc(var(--op-space-scale-unit) * 29);
  --pi-compass-position-top: calc(var(--op-space-scale-unit) * 2.2);
}

.compass {
  position: absolute;
  bottom: var(--pi-compass-position-bottom);
  left: var(--pi-compass-position-left);
}
.compass--flipped {
  transform: rotate(180deg);
}
.compass:not(.preview-compass) {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .compass:not(.preview-compass) {
    --pi-compass-position-left: calc(var(--op-space-scale-unit) * 12);
    position: fixed;
    top: var(--pi-compass-position-top);
    bottom: unset;
    left: var(--pi-compass-position-left);
  }
}

.preview-compass {
  --preview-compass-position-left: calc(var(--op-space-scale-unit) * 2);
  left: var(--preview-compass-position-left);
}

.credit-counter {
  display: flex;
  gap: var(--op-space-2x-small);
  align-items: center;
  border-radius: var(--op-radius-medium);
  background: var(--op-color-primary-plus-seven);
  height: var(--op-input-height-small);
  padding: 0 var(--op-space-small);
}
.credit-counter .credit-counter__label {
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-seven-alt);
}
.credit-counter .credit-counter__value {
  color: var(--op-color-primary-minus-two);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-bold);
}

.details-group {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
  line-height: var(--op-line-height-base);
}
.details-group .details__label-with-element-wrapper {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.details-group .details__label {
  display: block;
  line-height: var(--op-line-height-dense);
  user-select: none;
  color: var(--op-color-neutral-on-plus-max-alt);
  font-size: var(--op-font-medium);
}
.details-group .details__label.details__label--small {
  font-size: var(--op-font-small);
}
.details-group .details__value {
  display: flex;
  font-size: var(--op-font-x-large);
  font-weight: var(--op-font-weight-medium);
  gap: var(--op-space-x-small);
}
.details-group .details__value.details__value--empty {
  font-weight: var(--font-weight-normal);
  color: var(--op-color-neutral-on-plus-max-alt);
}
.details-group .details__value.details__value--icon {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
}
.details-group .details__value.details__value--icon .material-symbols-outlined {
  color: var(--op-color-primary-minus-three);
}
.details-group .details__value.details__value--tags {
  display: flex;
  gap: var(--op-space-2x-small);
}
.details-group .details__value.details__value--medium {
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-eight);
  align-items: center;
}
.details-group.details-group--condensed {
  align-items: flex-start;
}
.details-group.details-group--condensed .details__label {
  font-size: var(--op-font-x-small);
}
.details-group.details-group--condensed .details__value {
  font-size: var(--op-font-medium);
}
.details-group.details-group--inline {
  flex-direction: row;
  justify-content: space-between;
}
.details-group.details-group--inline .details__label {
  line-height: var(--op-line-height-dense);
}
.details-group.details-group--inline .details__value {
  font-size: var(--op-font-medium);
  line-height: var(--op-line-height-dense);
}

.divider {
  --__op-divider-padding: var(--op-space-medium);
}
.divider.divider--default {
  background: var(--op-color-neutral-plus-five);
}
.divider.divider--margin-none {
  margin: 0;
}
.divider.divider--dashed {
  border: var(--op-border-width) dashed var(--op-color-primary-on-plus-six-alt);
  width: 100%;
}
.divider.divider--vertical {
  margin-inline: var(--op-space-small);
}

.draggable-row {
  --pi-size-draggable-row-handle: var(--op-space-large);
  --pi-z-index-draggable-row: 10;
  overflow: hidden;
}
.draggable-row .draggable-row__handle {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: var(--pi-size-draggable-row-handle);
  z-index: var(--pi-z-index-draggable-row);
}
@media (hover: hover) {
  .draggable-row .draggable-row__handle {
    width: 0;
    opacity: 0;
    transition: all 200ms;
    visibility: hidden;
  }
}
.draggable-row:hover .draggable-row__handle {
  visibility: visible;
  opacity: 1;
  width: var(--pi-size-draggable-row-handle);
  cursor: grab;
}
.draggable-row:hover .draggable-row__handle:active {
  cursor: grabbing;
}

@media (hover: hover) {
  .draggable-row__handle {
    width: 0;
    opacity: 0;
    transition: all 200ms;
    visibility: hidden;
  }
}
.draggable-row__handle {
  display: flex;
  align-items: center;
  height: var(--pi-size-draggable-row-handle);
  flex-shrink: 0;
  z-index: 10;
}

:root {
  --menu-items-container-height: calc(var(--op-size-unit) * 40); /*160px*/
}

.feature-mapping-modal__group-label {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-five);
}

.feature-mapping-modal__suggested-item-label {
  padding: var(--op-space-x-small);
  padding-bottom: var(--op-space-2x-small);
  display: flex;
  gap: var(--op-space-x-small);
  font-weight: var(--op-font-weight-medium);
  color: var(--op-color-neutral-on-plus-max-alt);
  align-items: center;
  font-size: var(--op-font-small);
}

.feature-mapping-modal__suggested-item-container {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-3x-small);
}

.feature-mapping-modal__items-container {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-3x-small);
  overflow-y: auto;
  height: var(--menu-items-container-height);
}

.feature-mapping-modal__no-options-message {
  color: var(--op-color-neutral-on-plus-eight-alt);
  font-size: var(--op-font-x-small);
  display: flex;
  justify-content: center;
  height: var(--menu-items-container-height);
}

.feature-mapping-modal__search-menu {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-3x-small);
}

.feature-mapping-modal__selected-template-label {
  color: var(--op-color-surface-complement-alt);
}

.items-filter {
  display: flex;
  align-items: center;
  background-color: var(--op-color-neutral-plus-five);
  border-radius: var(--op-radius-medium);
  border: var(--op-border-width) solid var(--op-color-border);
  color: var(--op-color-neutral-on-plus-five);
  font-size: var(--op-font-x-small);
}
.items-filter.items-filter--range .items-filter__trigger {
  max-width: var(--op-space-4x-large);
}
.items-filter .items-filter__name {
  display: flex;
  align-items: center;
  height: var(--op-input-height-small);
  padding: 0 var(--op-space-x-small);
}
.items-filter input.form-control.items-filter__trigger,
.items-filter sl-button.items-filter__trigger::part(base),
.items-filter sl-input.items-filter__trigger::part(base) {
  height: var(--op-input-height-small);
  border-radius: 0;
  border: none;
  box-shadow: none;
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.items-filter input.form-control.items-filter__trigger::placeholder,
.items-filter sl-button.items-filter__trigger::part(base)::placeholder,
.items-filter sl-input.items-filter__trigger::part(base)::placeholder {
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.items-filter sl-input.items-filter__trigger::part(input) {
  height: unset;
}
.items-filter sl-input.items-filter__trigger::part(input)::placeholder {
  color: var(--op-color-neutral-on-plus-eight-alt);
  opacity: 1;
}
.items-filter sl-input.items-filter__trigger::part(input):hover::placeholder {
  color: var(--op-color-primary-on-plus-six-alt);
}
.items-filter sl-input.items-filter__trigger.active::part(input)::placeholder {
  color: var(--op-color-primary-on-plus-eight-alt);
}
.items-filter input.form-control.items-filter__trigger:hover:not(:focus-within),
.items-filter sl-dropdown:not([open]) .items-filter__trigger:hover::part(base),
.items-filter sl-input.items-filter__trigger:hover::part(base) {
  box-shadow: none;
  background-color: var(--op-color-primary-plus-six);
  color: var(--op-color-primary-on-plus-six-alt);
}
.items-filter input.form-control.items-filter__trigger:hover:not(:focus-within)::placeholder,
.items-filter sl-dropdown:not([open]) .items-filter__trigger:hover::part(base)::placeholder,
.items-filter sl-input.items-filter__trigger:hover::part(base)::placeholder {
  color: var(--op-color-primary-on-plus-six-alt);
}
.items-filter input.form-control.items-filter__trigger:focus-within,
.items-filter sl-dropdown[open] sl-button.items-filter__trigger::part(base),
.items-filter sl-input.items-filter__trigger.active::part(base) {
  border: none;
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight-alt);
  box-shadow: inset var(--op-border-left) var(--op-color-neutral-plus-four), inset var(--op-border-right) var(--op-color-neutral-plus-four);
}
.items-filter input.form-control.items-filter__trigger:focus-within::placeholder,
.items-filter sl-dropdown[open] sl-button.items-filter__trigger::part(base)::placeholder,
.items-filter sl-input.items-filter__trigger.active::part(base)::placeholder {
  color: var(--op-color-primary-on-plus-eight-alt);
}
.items-filter .btn {
  border: none;
  box-shadow: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: var(--op-input-height-small);
}
.items-filter .btn:hover {
  box-shadow: none;
}
.items-filter .items-filter__selection {
  color: var(--op-color-neutral-on-plus-eight);
}

sl-dropdown.saved-filters sl-menu-item.saved-filters__menu-item::part(label) {
  display: flex;
  align-items: center;
}
sl-dropdown.saved-filters sl-menu-item.saved-filters__menu-item .link.link--primary {
  margin-right: calc(-1 * var(--op-space-3x-large));
  --pi-link-transition: all 300ms ease;
  transition: var(--pi-link-transition);
}
sl-dropdown.saved-filters sl-menu-item.saved-filters__menu-item .saved-filters__menu-suffix {
  display: flex;
  align-items: center;
}
sl-dropdown.saved-filters sl-menu-item.saved-filters__menu-item .icon--outlined {
  visibility: hidden;
}
sl-dropdown.saved-filters sl-menu-item.saved-filters__menu-item .btn--destructive {
  width: 0;
  height: 0;
  opacity: 0;
  transition: all 1s ease;
}
@media (hover: hover) {
  sl-dropdown.saved-filters sl-menu-item.saved-filters__menu-item::part(suffix) {
    visibility: hidden;
  }
}
sl-dropdown.saved-filters sl-menu-item.saved-filters__menu-item:hover::part(suffix) {
  visibility: visible;
}
sl-dropdown.saved-filters sl-menu-item.saved-filters__menu-item:hover .icon--outlined {
  visibility: visible;
}
sl-dropdown.saved-filters sl-menu-item.saved-filters__menu-item:hover .btn--destructive {
  width: var(--__op-btn-height);
  height: var(--__op-btn-height);
  opacity: 1;
}
sl-dropdown.saved-filters sl-menu-item.saved-filters__menu-item:hover .link.link--primary {
  margin-right: 0;
}

sl-button.saved-filters__item::part(label) {
  color: var(--op-color-primary-minus-two);
}
sl-button.saved-filters__item .icon--filled {
  visibility: visible;
}

:root {
  --op-disabled-opacity: 0.44;
}

.form-group {
  /* Resets */
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--op-space-2x-small);
  column-gap: var(--op-space-x-small); /* adds gap for horizontally aligned elements with labels (checkboxes, radios) seperate from vertically aligned elements */
  align-self: flex-start;
  & > turbo-frame,
  sl-select {
    grid-column: 1/3;
  }
  .form-group--error {
    .form-control {
      border: var(--op-border-width) solid var(--op-color-alerts-danger-base);
      background-color: var(--op-color-alerts-danger-plus-eight);
    }
  }
  &.form-group--shoelace-input {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    .form-label, .project__key-label, :root sl-select::part(form-control-label),
    :host sl-select::part(form-control-label),
    .sl-theme-light sl-select::part(form-control-label),
    .sl-theme-dark sl-select::part(form-control-label), sl-input::part(form-control-label) {
      grid-column: unset;
    }
  }
}

.form__group--no-padding {
  padding: 0;
}

.form-label-with-tooltip {
  display: flex;
  gap: var(--op-space-x-small);
}

.form-label, .project__key-label, :root sl-select::part(form-control-label),
:host sl-select::part(form-control-label),
.sl-theme-light sl-select::part(form-control-label),
.sl-theme-dark sl-select::part(form-control-label), sl-input::part(form-control-label) {
  /* Resets */
  padding: 0;
  letter-spacing: 0;
  cursor: pointer;
  color: var(--op-color-neutral-minus-two);
  font-size: var(--op-font-x-small);
  line-height: var(--op-line-height-dense);
  user-select: none;
}

.form-control:not([type=radio], [type=checkbox]) {
  border-radius: var(--op-radius-medium);
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-small);
  background-color: var(--op-color-neutral-plus-eight);
  box-shadow: inset var(--op-border-all) var(--__op-form-control-border-color);
  border: none;
  height: var(--op-input-height-medium);
  /* Hover State */
  &:hover:not(:disabled, [readonly]) {
    background-color: var(--op-color-primary-plus-eight);
    box-shadow: inset var(--op-border-all) var(--__op-form-control-border-color);
    &::placeholder {
      color: var(--op-color-neutral-on-plus-eight);
    }
  }
  &:focus:not([readonly]),
  &:focus-within:not([readonly]),
  &:focus-visible:not([readonly]) {
    background-color: var(--op-color-primary-plus-eight);
    color: var(--op-color-primary-on-plus-eight);
    box-shadow: none;
    border: none;
    outline: none;
  }
  &:focus-visible:not([readonly]) {
    background-color: var(--op-color-primary-plus-eight);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-two);
    color: var(--op-color-primary-on-plus-eight);
    outline: none;
  }
}

/* --op-breakpoint-small */
@media (max-width: 768px) {
  .form-control:not([type=radio], [type=checkbox]) {
    &:focus-visible:not([readonly]) {
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
    }
  }
}
.form-control {
  font-weight: inherit;
  font-size: var(--op-font-small);
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  padding: 0 var(--op-space-small);
  &:hover {
    background-color: var(--op-color-primary-plus-eight);
    color: var(--op-color-primary-on-plus-eight);
    &::placeholder {
      color: var(--op-color-neutral-on-plus-eight);
    }
  }
  &:focus,
  &:focus-within,
  &:focus-visible {
    background-color: var(--op-color-primary-plus-eight);
    color: var(--op-color-primary-on-plus-eight);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-two);
    border: none;
    outline: none;
    &:hover {
      box-shadow: none;
    }
  }
  /* Default checkbox variables */
  --_op-checkbox-check-transform: rotate(45deg);
  --_op-checkbox-check-width: 6px;
  --_op-checkbox-check-height: 11px;
  --_op-checkbox-check-border-width: 0 var(--op-space-3x-small) var(--op-space-3x-small) 0;
  --_op-checkbox-check-top-position: 0;
  --_op-checkbox-check-left-position: 4px;
  --_op-checkbox-hover-indicator-size: var(--op-space-x-small);
  --op-checkbox__indeterminate-height: 2px;
  --_op-checkbox-indeterminate-width: 10px;
  &[type=radio],
  &[type=checkbox] {
    & + .form-label, & + .project__key-label, :root & + sl-select::part(form-control-label),
    :host & + sl-select::part(form-control-label),
    .sl-theme-light & + sl-select::part(form-control-label),
    .sl-theme-dark & + sl-select::part(form-control-label), & + sl-input::part(form-control-label) {
      grid-column: 2/3;
      grid-row: 1;
      align-self: center;
    }
  }
  &[type=radio] {
    accent-color: var(--op-color-primary-minus-three);
    &:hover {
      accent-color: var(--op-color-primary-minus-one);
    }
    &:focus-within {
      box-shadow: none;
    }
  }
  &[type=checkbox]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
  &[type=checkbox],
  &[type=checkbox]:focus {
    position: relative;
    appearance: none;
    background-color: var(--op-color-neutral-plus-eight);
    border: 1px solid var(--op-color-neutral-on-plus-max);
    border-radius: var(--op-radius-small);
    outline: none;
    cursor: pointer;
    padding-inline: 0;
  }
  &[type=checkbox]:checked,
  &[type=checkbox]:indeterminate {
    background-color: var(--op-color-primary-minus-three);
    border-color: var(--op-color-primary-minus-three);
    &:hover {
      background-color: var(--op-color-primary-minus-one);
      border-color: var(--op-color-primary-minus-one);
    }
  }
  &[type=checkbox]:hover {
    background-color: var(--op-color-neutral-plus-seven);
    border-color: var(--op-color-primary-minus-three);
  }
  &[type=checkbox]::before {
    content: "";
    display: block;
    width: var(--_op-checkbox-check-width);
    height: var(--_op-checkbox-check-height);
    border: solid var(--op-color-neutral-on-minus-max);
    border-width: var(--_op-checkbox-check-border-width);
    transform: var(--_op-checkbox-check-transform);
    position: absolute;
    top: var(--_op-checkbox-check-top-position);
    left: var(--_op-checkbox-check-left-position);
    opacity: 0;
  }
  &[type=checkbox]:indeterminate::before {
    width: var(--_op-checkbox-indeterminate-width);
    height: var(--op-checkbox__indeterminate-height);
    transform: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  &[type=checkbox]:checked::before,
  &[type=checkbox]:indeterminate:before {
    opacity: 1;
  }
  &[type=checkbox]:hover:not(:checked, :indeterminate):before {
    content: "";
    display: block;
    width: var(--_op-checkbox-hover-indicator-size);
    height: var(--_op-checkbox-hover-indicator-size);
    background-color: var(--op-color-neutral-plus-four);
    border: none;
    border-radius: var(--op-radius-small);
    position: absolute;
    transform: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    opacity: 1;
  }
  /* Text input definitions */
  &.form-control--x-large,
  &.form__dropdown--x-large {
    &[type=checkbox],
    &[type=radio] {
      --_op-checkbox-hover-indicator-size: var(--op-space-medium);
      --_op-checkbox-check-transform: rotate(45deg) scale(1.2);
      --_op-checkbox-check-top-position: 5px;
      --_op-checkbox-check-left-position: 9px;
      --_op-checkbox-indeterminate-width: 16px;
      height: var(--op-space-2x-large);
      width: var(--op-space-2x-large);
    }
  }
  &.form-control--large,
  &.form__dropdown--large {
    border-radius: var(--op-radius-large);
    height: var(--op-input-height-x-large);
    font-size: var(--op-font-medium);
  }
  &.form-control--medium,
  &.form__dropdown--medium {
    &:not([type=checkbox], [type=radio]) {
      border-radius: var(--op-radius-medium);
      font-size: var(--op-font-small);
    }
    &[type=checkbox],
    &[type=radio] {
      --_op-checkbox-hover-indicator-size: var(--op-space-small);
      --_op-checkbox-check-transform: rotate(45deg) scale(1.2);
      --_op-checkbox-check-border-width: 0 var(--op-space-3x-small) var(--op-space-3x-small) 0;
      --_op-checkbox-check-top-position: 1.5px;
      --_op-checkbox-check-left-position: 5.8px;
      --_op-checkbox-indeterminate-width: 12px;
      height: var(--op-space-large);
      width: var(--op-space-large);
    }
  }
  &.form-control--small,
  &.form__dropdown--small,
  &.form-control--x-small,
  &.form__dropdown--x-small {
    &[type=checkbox],
    &[type=radio] {
      height: var(--op-space-medium);
      width: var(--op-space-medium);
    }
  }
  &.form-control--small,
  &.form__dropdown--small {
    &:not([type=checkbox], [type=radio]) {
      height: var(--op-input-height-small);
      font-size: var(--op-font-x-small);
    }
  }
  &.form-control--x-small,
  &.form__dropdown--x-small {
    &:not([type=checkbox], [type=radio]) {
      height: var(--op-input-height-3x-small);
      padding: 0 var(--op-space-x-small);
      font-size: var(--op-font-x-small);
    }
  }
  &.form-control--disabled {
    background-color: var(--op-color-neutral-plus-eight);
    color: var(--op-color-neutral-on-plus-eight);
    cursor: not-allowed;
    opacity: var(--op-disabled-opacity);
    &:hover,
    &:focus {
      background-color: var(--op-color-neutral-plus-eight);
      color: var(--op-color-neutral-on-plus-eight);
      border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
    }
  }
  &[readonly] {
    padding: 0 var(--op-space-small); /* Undo default in optics */
  }
  /* Textarea definitions */
  &.form__textarea {
    --op-default-textarea-height: calc(3 * var(--op-input-height-medium));
    resize: none;
    padding: var(--op-space-x-small) var(--op-space-small);
    font-size: var(--op-font-small);
    height: var(--op-default-textarea-height);
    &:hover {
      &:focus, &:focus-within, &:focus-visible {
        &::placeholder {
          color: var(--op-color-neutral-plus-one);
        }
      }
    }
  }
  &.form__textarea--large {
    --op-default-textarea-height: calc(3 * var(--op-input-height-medium));
    resize: none;
    padding: var(--op-space-x-small) var(--op-space-medium);
    height: var(--op-default-textarea-height);
    border-radius: var(--op-radius-large);
    font-size: var(--op-font-medium);
  }
  &.form__textarea--small:not([type=radio], [type=checkbox]) { /* deal with specificity problem */
    --op-default-textarea-height: calc(2 * var(--op-input-height-large));
    font-size: var(--op-font-x-small);
    resize: none;
    padding: var(--op-space-small);
    height: var(--op-default-textarea-height);
    border-radius: var(--op-radius-medium);
  }
  &.form__textarea--ai-materials-modal {
    --op-default-textarea-height: 7.8rem;
    font-size: var(--op-font-small);
    resize: none;
    padding: var(--op-space-x-small);
    height: var(--op-default-textarea-height);
    border-radius: var(--op-radius-medium);
  }
}

/* --op-breakpoint-small */
@media (max-width: 768px) {
  .form-control {
    &:focus,
    &:focus-within,
    &:focus-visible {
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
    }
    &.form-control--medium,
    &.form__dropdown--medium {
      &:not([type=checkbox], [type=radio]) {
        background: var(--op-color-neutral-plus-seven);
        border-radius: var(--op-radius-large);
        &.object-group-spacing {
          padding: var(--op-space-medium);
        }
      }
    }
    &.form-control--small,
    &.form__dropdown--small {
      &:not([type=checkbox], [type=radio]) {
        font-size: var(--op-font-small);
        height: var(--op-input-height-medium);
        border-radius: var(--op-radius-large);
      }
    }
  }
}
.form__dropdown {
  border-radius: var(--op-radius-large);
  height: var(--op-input-height-x-large);
}

.form-control.form-control--readonly,
.form__dropdown--readonly,
.form__text-area--readonly {
  &:not([type=checkbox], [type=radio]) {
    background-color: var(--op-color-neutral-plus-six);
    color: var(--op-color-neutral-on-plus-six);
    cursor: default;
    &:hover,
    &:focus {
      background-color: var(--op-color-neutral-plus-six);
      color: var(--op-color-neutral-on-plus-six);
    }
  }
}

/* 
This feels hacky but not sure at the moment another way around specificity issues
Contains .form-control--small styles. Only use this when wanting to display data
in a way that looks like a read-only input, but wraps the content.
*/
.longform-text-input-readonly {
  background: var(--op-color-neutral-plus-six);
  padding: var(--op-space-x-small) var(--op-space-2x-small) var(--op-space-x-small) var(--op-space-small);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-six);
  border-radius: var(--op-radius-medium);
  font-size: var(--op-font-x-small);
  grid-column: 1/3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form__aspire-tags-readonly {
  border: var(--op-border-width) solid var(--op-color-border);
  background-color: var(--op-color-neutral-plus-max);
  border-radius: var(--op-radius-medium) var(--op-radius-medium) 0 0;
  padding: var(--op-space-x-small) var(--op-space-small);
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-2x-small);
}

.form__text-area--readonly {
  --op-text-area-min-height: calc(var(--op-space-4x-large) * 2);
  resize: none;
  line-height: var(--op-line-height-base);
  width: 100%;
  padding: var(--op-space-x-small) var(--op-space-small);
  min-height: var(--op-text-area-min-height);
}

.form__range-with-input {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: last baseline;
  align-self: flex-start;
  gap: var(--op-space-x-small);
  width: 100%;
  sl-range {
    &::part(form-control-label) {
      font-size: var(--op-font-x-small);
    }
  }
  .range-with-input__input {
    --pi-range-input-width: calc(var(--op-size-unit) * 14); /* 56px */
    width: var(--pi-range-input-width);
    flex-shrink: 0;
  }
}

/* --op-breakpoint-small */
@media (max-width: 768px) {
  .form__range-with-input {
    .range-with-input__input {
      --pi-range-input-width: calc(var(--op-size-unit) * 15); /* 60px */
    }
  }
}
.form-choice-item {
  --pi-form-choice-item-height: calc(var(--op-size-unit) * 11); /* 44px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--op-font-small);
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  border-radius: var(--op-radius-medium);
  box-shadow: var(--op-border-all-large) var(--op-color-neutral-plus-four);
  height: var(--pi-form-choice-item-height);
  padding: var(--op-space-small);
  line-height: normal;
  &:has(.form-control[type=checkbox]:checked, .form-control[type=radio]:checked) {
    box-shadow: var(--op-border-all-large) var(--op-color-primary-minus-three);
  }
  .form-choice-item__start {
    display: flex;
    align-items: center;
    gap: var(--op-space-x-small);
  }
  .form-choice-item__end {
    display: flex;
    align-items: flex-end;
    gap: var(--op-space-x-small);
    color: var(--op-color-neutral-on-plus-eight-alt);
  }
}

.form__control-background {
  background: var(--op-color-neutral-plus-five);
  border-radius: var(--op-radius-medium);
  padding-left: var(--op-space-medium);
  padding-right: var(--op-space-medium);
}

.sl-theme-dark sl-details.kit-item,
.sl-theme-light sl-details.kit-item,
.kit-item {
  --pi-kit-item-padding: var(--op-space-x-small) var(--op-space-small);
  background: var(--op-color-neutral-plus-eight);
  border: var(--op-border-width) solid var(--op-color-border);
  border-radius: var(--op-radius-large);
  color: var(--op-color-neutral-on-plus-eight);
  padding: var(--pi-kit-item-padding);
}
.sl-theme-dark sl-details.kit-item:hover,
.sl-theme-light sl-details.kit-item:hover,
.kit-item:hover {
  background: var(--op-color-neutral-plus-seven);
  color: var(--op-color-neutral-on-plus-seven);
}
.sl-theme-dark sl-details.kit-item:hover .kit-item__action,
.sl-theme-light sl-details.kit-item:hover .kit-item__action,
.kit-item:hover .kit-item__action {
  opacity: 100;
}
.sl-theme-dark sl-details.kit-item.kit-item--accordion,
.sl-theme-light sl-details.kit-item.kit-item--accordion,
.kit-item.kit-item--accordion {
  padding: 0;
  background: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
}
.sl-theme-dark sl-details.kit-item.kit-item--accordion:hover,
.sl-theme-light sl-details.kit-item.kit-item--accordion:hover,
.kit-item.kit-item--accordion:hover {
  background: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-five);
}
.sl-theme-dark sl-details.kit-item.kit-item--accordion .kit-item__contents,
.sl-theme-light sl-details.kit-item.kit-item--accordion .kit-item__contents,
.kit-item.kit-item--accordion .kit-item__contents {
  grid-template-columns: 1fr auto;
}
.sl-theme-dark sl-details.kit-item.kit-item--accordion::part(base),
.sl-theme-light sl-details.kit-item.kit-item--accordion::part(base),
.kit-item.kit-item--accordion::part(base) {
  background-color: unset;
  border: unset;
}
.sl-theme-dark sl-details.kit-item.kit-item--accordion::part(header),
.sl-theme-light sl-details.kit-item.kit-item--accordion::part(header),
.kit-item.kit-item--accordion::part(header) {
  padding: var(--pi-kit-item-padding);
}
.sl-theme-dark sl-details.kit-item.kit-item--accordion .kit-item--accordion__item,
.sl-theme-light sl-details.kit-item.kit-item--accordion .kit-item--accordion__item,
.kit-item.kit-item--accordion .kit-item--accordion__item {
  border: unset;
  border-radius: unset;
  border-top: var(--op-border-width) solid var(--op-color-border);
}
.sl-theme-dark sl-details.kit-item.kit-item--accordion .kit-item--accordion__item:nth-child(1 of .kit-item--accordion__item),
.sl-theme-light sl-details.kit-item.kit-item--accordion .kit-item--accordion__item:nth-child(1 of .kit-item--accordion__item),
.kit-item.kit-item--accordion .kit-item--accordion__item:nth-child(1 of .kit-item--accordion__item) {
  border-top: none;
}
.sl-theme-dark sl-details.kit-item.kit-item--accordion .kit-item--accordion__item .kit-item__contents,
.sl-theme-light sl-details.kit-item.kit-item--accordion .kit-item--accordion__item .kit-item__contents,
.kit-item.kit-item--accordion .kit-item--accordion__item .kit-item__contents {
  grid-template-columns: 2fr 1fr 1fr;
}
.sl-theme-dark sl-details.kit-item.kit-item--proposal,
.sl-theme-light sl-details.kit-item.kit-item--proposal,
.kit-item.kit-item--proposal {
  padding: 0;
  padding-inline-end: var(--op-space-small);
  border-radius: var(--op-radius-large);
}
.sl-theme-dark sl-details.kit-item.kit-item--proposal .kit-item--proposal__count,
.sl-theme-light sl-details.kit-item.kit-item--proposal .kit-item--proposal__count,
.kit-item.kit-item--proposal .kit-item--proposal__count {
  --pi-kit-item-count-width: calc(var(--op-space-scale-unit) * 11);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-x-small);
  background: var(--op-color-neutral-plus-seven);
  border-radius: var(--op-radius-large) 0 0 var(--op-radius-large);
  box-shadow: var(--op-border-right) var(--op-color-neutral-plus-three);
  color: var(--op-color-primary-on-plus-seven-alt);
  font-weight: var(--op-font-weight-semi-bold);
  min-width: var(--pi-kit-item-count-width);
  padding: var(--op-space-small);
}
.sl-theme-dark sl-details.kit-item .kit-item__contents,
.sl-theme-light sl-details.kit-item .kit-item__contents,
.kit-item .kit-item__contents {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--op-space-x-small);
  align-items: center;
  width: 100%;
}
.sl-theme-dark sl-details.kit-item .kit-item__action,
.sl-theme-light sl-details.kit-item .kit-item__action,
.kit-item .kit-item__action {
  opacity: 0;
  transition: opacity 0.2s;
}
.sl-theme-dark sl-details.kit-item .badge,
.sl-theme-light sl-details.kit-item .badge,
.kit-item .badge {
  text-transform: capitalize;
}
.sl-theme-dark sl-details.kit-item .kit-item__start,
.sl-theme-light sl-details.kit-item .kit-item__start,
.kit-item .kit-item__start {
  display: flex;
  gap: var(--op-space-2x-small);
  align-items: center;
}
.sl-theme-dark sl-details.kit-item .kit-item__start:has(.kit-item--proposal__count),
.sl-theme-light sl-details.kit-item .kit-item__start:has(.kit-item--proposal__count),
.kit-item .kit-item__start:has(.kit-item--proposal__count) {
  gap: var(--op-space-small);
}
.sl-theme-dark sl-details.kit-item .kit-item__middle,
.sl-theme-light sl-details.kit-item .kit-item__middle,
.kit-item .kit-item__middle {
  display: flex;
  gap: var(--op-space-2x-small);
  align-items: center;
}
.sl-theme-dark sl-details.kit-item .kit-item__end,
.sl-theme-light sl-details.kit-item .kit-item__end,
.kit-item .kit-item__end {
  --pi-kit-item-actions-width: calc(var(--op-space-scale-unit) * 25);
  display: flex;
  gap: var(--op-space-x-small);
  align-items: center;
  justify-content: end;
  min-width: var(--pi-kit-item-actions-width);
}

.kit-item__popup-trigger sl-button[slot=trigger]::part(base) {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  border-radius: var(--op-radius-medium) 0 0 var(--op-radius-medium);
}
.kit-item__popup-trigger.kit-item__popup-trigger--associations sl-button[slot=trigger]::part(base) {
  border-radius: var(--op-radius-medium);
}

.kit-item-rate {
  display: flex;
  align-items: center;
  background: var(--op-color-primary-plus-six);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  border-radius: var(--op-radius-medium);
  color: var(--op-color-primary-on-plus-six);
}
.kit-item-rate .kit-item-rate__label {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  padding: 0 var(--op-space-small);
}

sl-card.kit-item-popup-card {
  --pi-kit-item-rate-popup-width: calc(var(--op-size-unit) * 115);
  color: var(--op-color-neutral-on-plus-four);
  font-size: var(--op-font-x-small);
  width: var(--pi-kit-item-rate-popup-width);
}
sl-card.kit-item-popup-card::part(base) {
  background-color: var(--op-color-neutral-plus-six);
  border-radius: var(--op-radius-large);
  border-color: var(--op-color-neutral-plus-three);
}
sl-card.kit-item-popup-card::part(body) {
  padding: var(--op-space-x-small) var(--op-space-small);
}
sl-card.kit-item-popup-card .popup-card__body {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  gap: var(--op-space-x-small);
  align-items: center;
}
sl-card.kit-item-popup-card .popup-card__body.popup-card__body--block {
  grid-auto-flow: unset;
  justify-content: unset;
}
sl-card.kit-item-popup-card .popup-card__perimeter {
  border-left: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  padding-inline-start: var(--op-space-x-small);
}
sl-card.kit-item-popup-card .popup-card__perimeter .form-group {
  padding: 0;
}
sl-card.kit-item-popup-card .popup-card__perimeter .popup-card__checkbox {
  gap: var(--op-space-x-small);
}
sl-card.kit-item-popup-card::part(footer) {
  display: flex;
  justify-content: flex-end;
  gap: var(--op-space-x-small);
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  padding: var(--op-space-small);
  width: 100%;
}
sl-card.kit-item-popup-card .popup-card__footer {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 100%;
  gap: var(--op-space-small);
}
sl-card.kit-item-popup-card .popup-card__total {
  gap: var(--op-space-small);
}
sl-card.kit-item-popup-card .popup-card__association {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: var(--op-space-x-small);
  align-items: center;
}

.link {
  text-decoration: none;
  color: var(--op-color-neutral-on-background);
}
.link .material-symbols-outlined {
  color: var(--op-color-neutral-on-background);
}
.link:hover {
  color: var(--op-color-primary-minus-three);
}
.link:hover .material-symbols-outlined {
  color: var(--op-color-primary-minus-three);
}
.link:visited {
  color: var(--op-color-neutral-on-background);
}
.link:visited .material-symbols-outlined {
  color: var(--op-color-neutral-on-background);
}
.link.link--primary {
  text-decoration: none;
  color: var(--op-color-primary-on-background);
}
.link.link--primary .material-symbols-outlined {
  color: var(--op-color-primary-base);
}
.link.link--primary:hover {
  color: var(--op-color-primary-minus-three);
}
.link.link--primary:hover .material-symbols-outlined {
  color: var(--op-color-primary-minus-three);
}
.link.link--primary:visited {
  color: var(--op-color-primary-on-base);
}
.link.link--primary:visited .material-symbols-outlined {
  color: var(--op-color-primary-on-base);
}
.link.link--destructive {
  text-decoration: none;
  color: var(--op-color-destructive-on-background);
}
.link.link--destructive .material-symbols-outlined {
  color: var(--op-color-destructive-base);
}
.link.link--destructive:hover {
  color: var(--op-color-destructive-minus-three);
}
.link.link--destructive:hover .material-symbols-outlined {
  color: var(--op-color-destructive-minus-three);
}

.list {
  display: flex;
  flex-direction: column;
}
.list .list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--op-space-x-small);
  box-shadow: var(--op-border-bottom) var(--op-color-border);
}
.list .list__item:last-child {
  box-shadow: none;
}
.list .list__subheading {
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-bold);
}
.list.list--compact {
  margin: 0;
  padding-left: var(--op-space-large);
}

.mobile-profile-sheet__organizations {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}
.mobile-profile-sheet__organizations .mobile-profile-sheet__organization {
  --min-height-for-overflow: 5rem;
  display: flex;
  justify-content: flex-start;
  gap: var(--op-space-x-small);
  overflow: hidden;
  min-height: var(--min-height-for-overflow);
  color: var(--op-color-neutral-on-plus-eight);
  text-overflow: ellipsis;
  font-size: var(--op-font-medium);
  align-items: center;
  padding: var(--op-space-small) var(--op-space-medium);
}
.mobile-profile-sheet__organizations .mobile-profile-sheet__organization.selected {
  border-radius: var(--op-radius-pill);
  box-shadow: var(--op-border-all-large) var(--op-color-primary-minus-three);
}
.mobile-profile-sheet__organizations .mobile-profile-sheet__organization .btn {
  min-height: unset;
  padding: unset;
}
.mobile-profile-sheet__organizations .mobile-profile-sheet__organization-initials {
  width: var(--op-space-large);
  height: var(--op-space-large);
  border-radius: var(--op-radius-medium);
  justify-content: center;
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
  font-size: var(--op-font-2x-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.mobile-profile-sheet__organizations :nth-child(5n+1) .mobile-profile-sheet__organization-initials {
  background: var(--op-color-primary-plus-six);
  color: var(--op-color-primary-on-plus-six);
}
.mobile-profile-sheet__organizations :nth-child(5n+2) .mobile-profile-sheet__organization-initials {
  background: var(--op-color-alerts-notice-plus-six);
  color: var(--op-color-alerts-notice-on-plus-six);
}
.mobile-profile-sheet__organizations :nth-child(5n+3) .mobile-profile-sheet__organization-initials {
  background: var(--op-color-alerts-danger-plus-six);
  color: var(--op-color-alerts-danger-on-plus-six);
}
.mobile-profile-sheet__organizations :nth-child(5n+4) .mobile-profile-sheet__organization-initials {
  --background-orange: rgba(255, 239, 224, 1);
  --text-orange: rgba(82, 39, 0, 1);
  background: var(--background-orange);
  color: var(--text-orange);
}
.mobile-profile-sheet__organizations :nth-child(5n+5) .mobile-profile-sheet__organization-initials {
  --background-yellow: rgba(254, 255, 224, 1);
  --text-yellow: rgba(80, 82, 0, 1);
  background: var(--background-yellow);
  color: var(--text-yellow);
}
.mobile-profile-sheet__organizations :nth-child(n+5) {
  display: none;
}

.expand-organizations-button {
  color: var(--op-color-neutral-on-plus-max-alt);
  text-align: center;
  font-weight: var(--op-font-weight-medium);
}

sl-drawer.sheet.expanded::part(panel) {
  border-radius: unset;
}
sl-drawer.sheet.expanded .mobile-profile-sheet__organizations :nth-child(n+4) {
  display: flex;
}
sl-drawer.sheet.expanded .mobile-profile-sheet__organizations ~ button.btn.btn--no-border {
  display: none;
}

:root {
  --pi-project-modal-subfooter-height: 18.7rem;
  --pi-subheader-height: 10rem;
  --pi-project-modal-tabs-height: 4.4rem;
  --pi-default-templates-section-height: 20.4rem;
  --ts-border-radius: var(--op-radius-large);
}

sl-dialog,
.modal {
  opacity: 1;
}
sl-dialog .modal__header,
.modal .modal__header {
  padding: var(--op-space-medium) var(--op-space-x-large);
  box-shadow: var(--op-border-bottom-thin);
  font-size: var(--op-font-3x-large);
  font-weight: var(--op-font-weight-normal);
}
sl-dialog::part(header-actions),
.modal::part(header-actions) {
  gap: var(--op-space-x-large);
}
sl-dialog .modal__subheader,
sl-dialog .modal__subfooter,
.modal .modal__subheader,
.modal .modal__subfooter {
  display: flex;
  gap: var(--op-space-large);
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
}
sl-dialog .modal__subheader,
.modal .modal__subheader {
  padding: var(--op-space-medium) var(--op-space-x-large);
  box-shadow: var(--op-border-bottom) var(--op-color-border);
  position: sticky;
  top: 0;
  z-index: calc(var(--op-z-index-dialog-content) + 1);
}
sl-dialog .modal__subheader .form-group,
.modal .modal__subheader .form-group {
  width: 100%;
  padding: 0;
}
sl-dialog .modal__subheader .modal__subheader-project-name,
.modal .modal__subheader .modal__subheader-project-name {
  flex: 1 0 40%;
}
sl-dialog .modal__subheader.modal__subheader--tabs,
.modal .modal__subheader.modal__subheader--tabs {
  padding-top: 0;
  z-index: calc(var(--op-z-index-dialog-content) - 1);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: var(--pi-project-modal-tabs-height);
}
sl-dialog .modal__subheader.modal__subheader--new-property,
.modal .modal__subheader.modal__subheader--new-property {
  display: grid;
  grid-template-columns: 3fr 4fr;
}
sl-dialog .modal__subheader.modal__subheader--new-property:has(:nth-child(3)),
.modal .modal__subheader.modal__subheader--new-property:has(:nth-child(3)) {
  grid-template-columns: 3fr 4fr 2fr;
}
sl-dialog .modal__subheader.modal__subheader--description,
.modal .modal__subheader.modal__subheader--description {
  padding: var(--op-space-small) var(--op-space-x-large);
  color: var(--op-color-neutral-on-plus-max-alt);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
sl-dialog .modal__body,
.modal .modal__body {
  display: grid;
  gap: var(--op-space-small);
  padding: var(--op-space-x-large);
  box-shadow: unset;
  max-height: unset;
}
@media (width < 768px) {
  sl-dialog .modal__body,
  .modal .modal__body {
    padding: var(--op-space-large);
    padding-top: var(--op-space-x-small);
  }
}
sl-dialog .modal__body.modal__body--with-loading-spinner,
.modal .modal__body.modal__body--with-loading-spinner {
  text-align: center;
  align-content: center;
  justify-content: center;
  gap: var(--op-space-x-large);
  height: 100%;
}
sl-dialog .modal__body.modal__body--two-column,
.modal .modal__body.modal__body--two-column {
  --pi-modal-column-width: 1fr;
  gap: var(--op-space-large);
  grid-template-columns: var(--pi-modal-column-width) var(--pi-modal-column-width);
}
sl-dialog .modal__body.modal__body--two-column .modal__body-column,
.modal .modal__body.modal__body--two-column .modal__body-column {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}
sl-dialog .modal__body.modal__body--two-column .modal__body-column .form-group,
.modal .modal__body.modal__body--two-column .modal__body-column .form-group {
  padding: 0;
  width: 100%;
}
sl-dialog .modal__body.modal__body--two-column .modal__body-column.modal__body-column--condensed,
.modal .modal__body.modal__body--two-column .modal__body-column.modal__body-column--condensed {
  gap: var(--op-space-2x-small);
}
sl-dialog .modal__body.modal__body--with-tom-select,
.modal .modal__body.modal__body--with-tom-select {
  --pi-modal-body-height: calc(95 * var(--op-size-unit));
  min-height: var(--pi-modal-body-height);
  align-content: flex-start;
}
sl-dialog .modal__body.modal__body--with-tom-select-at-bottom,
.modal .modal__body.modal__body--with-tom-select-at-bottom {
  --pi-modal-body-height: calc(150 * var(--op-size-unit));
  min-height: var(--pi-modal-body-height);
  align-content: flex-start;
}
sl-dialog .modal__body.modal__body--overflow-visible,
.modal .modal__body.modal__body--overflow-visible {
  overflow: visible;
}
sl-dialog .modal__body.modal__body--flex,
.modal .modal__body.modal__body--flex {
  display: flex;
  flex-direction: column;
}
sl-dialog .modal__body.modal__body--condensed,
.modal .modal__body.modal__body--condensed {
  gap: var(--op-space-2x-small);
}
sl-dialog .modal__body.modal__body--expanded,
.modal .modal__body.modal__body--expanded {
  gap: var(--op-space-x-large);
}
sl-dialog .modal__body.modal__body--no-gap,
.modal .modal__body.modal__body--no-gap {
  gap: 0;
}
sl-dialog .modal__body.modal__body--no-padding,
.modal .modal__body.modal__body--no-padding {
  padding: 0;
}
sl-dialog .modal__body.modal__body--canvas-options,
.modal .modal__body.modal__body--canvas-options {
  grid-template-columns: repeat(5, 1fr);
  gap: var(--op-space-medium);
  align-items: center;
}
sl-dialog .modal__body.modal__body--fixed-height,
.modal .modal__body.modal__body--fixed-height {
  height: 60vh;
}
sl-dialog .modal__body.modal__body--max-height,
.modal .modal__body.modal__body--max-height {
  max-height: 60vh;
}
sl-dialog .modal__body .modal__body-content-header,
.modal .modal__body .modal__body-content-header {
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background-color: var(--op-color-neutral-plus-max);
  z-index: var(--op-z-index-header);
  padding: var(--op-space-x-large) var(--op-space-x-large) var(--op-space-x-small) var(--op-space-x-large);
  border-bottom: var(--op-border-width) solid var(--op-color-border);
}
sl-dialog .modal__body .modal__body-content-header .modal__body-content-header-start,
.modal .modal__body .modal__body-content-header .modal__body-content-header-start {
  font-weight: var(--op-font-weight-semi-bold);
}
sl-dialog .modal__body .modal__body-content-header .modal__body-content-header-end,
.modal .modal__body .modal__body-content-header .modal__body-content-header-end {
  color: var(--op-color-neutral-on-plus-max-alt);
}
sl-dialog .modal__body .modal__instructions,
.modal .modal__body .modal__instructions {
  color: var(--op-color-neutral-on-plus-max-alt);
}
sl-dialog .modal__body .modal__heading,
.modal .modal__body .modal__heading {
  font-size: var(--op-font-x-large);
}
sl-dialog .modal__body .modal__emphasized-text,
.modal .modal__body .modal__emphasized-text {
  font-weight: var(--op-font-weight-semi-bold);
}
sl-dialog .modal__body .modal__helper-text,
.modal .modal__body .modal__helper-text {
  font-size: var(--op-font-small);
}
sl-dialog .modal__body .ts-dropdown-content,
.modal .modal__body .ts-dropdown-content {
  --pi-ts-dropdown-max-height: calc(38 * var(--op-size-unit));
  max-height: var(--pi-ts-dropdown-max-height);
}
sl-dialog .modal__subfooter,
.modal .modal__subfooter {
  border-top: var(--op-border-width) solid var(--op-color-border);
  border-bottom: var(--op-border-width) solid var(--op-color-border);
  gap: var(--op-space-large);
  padding: var(--op-space-small) var(--op-space-x-large);
  z-index: var(--op-z-index-dialog-content);
}
.project-templates-modal sl-dialog .modal__subfooter,
.project-templates-modal .modal .modal__subfooter {
  height: var(--pi-default-templates-section-height);
}
sl-dialog .modal__subfooter.modal__subfooter--sticky,
.modal .modal__subfooter.modal__subfooter--sticky {
  position: sticky;
  bottom: 0;
}
sl-dialog .modal__subfooter .modal__subfooter-start,
sl-dialog .modal__subfooter .modal__subfooter-end,
.modal .modal__subfooter .modal__subfooter-start,
.modal .modal__subfooter .modal__subfooter-end {
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-x-small);
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
}
sl-dialog .modal__footer,
.modal .modal__footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  font-size: var(--op-font-x-small);
}
sl-dialog .modal__footer.modal__footer--no-actions,
.modal .modal__footer.modal__footer--no-actions {
  justify-content: flex-end;
}
sl-dialog .modal__footer .modal__footer-start,
.modal .modal__footer .modal__footer-start {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
sl-dialog .modal__footer .modal__footer-end,
.modal .modal__footer .modal__footer-end {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
sl-dialog .modal__footer .modal__footer-end.modal__footer-end--expanded,
.modal .modal__footer .modal__footer-end.modal__footer-end--expanded {
  gap: var(--op-space-x-large);
}
sl-dialog .modal__footer .modal__footer-end.modal__footer-end--text,
.modal .modal__footer .modal__footer-end.modal__footer-end--text {
  color: var(--op-color-primary-on-plus-max-alt);
  font-size: var(--op-font-small);
  gap: var(--op-space-2x-small);
}
sl-dialog .modal__content,
.modal .modal__content {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
}
sl-dialog .modal__content.modal__content--row,
.modal .modal__content.modal__content--row {
  flex-direction: row;
  align-items: flex-end;
}
sl-dialog .modal__content.modal__content--condensed,
.modal .modal__content.modal__content--condensed {
  gap: var(--op-space-x-small);
}
sl-dialog .modal__content.modal__content--extra-condensed,
.modal .modal__content.modal__content--extra-condensed {
  gap: var(--op-space-2x-small);
}
sl-dialog .modal__content.modal__content--expanded,
.modal .modal__content.modal__content--expanded {
  gap: var(--op-space-medium);
}
sl-dialog .modal__content.modal__content--space-between,
.modal .modal__content.modal__content--space-between {
  align-items: center;
  justify-content: space-between;
}
sl-dialog .modal__content.modal__content--two-column,
.modal .modal__content.modal__content--two-column {
  display: inline-grid;
  gap: var(--op-space-medium);
  grid-template-columns: repeat(2, 1fr);
}
sl-dialog .modal__content .modal__expanding-content,
.modal .modal__content .modal__expanding-content {
  flex: 2;
}
sl-dialog .error-message,
.modal .error-message {
  background-color: var(--op-color-alerts-danger-plus-eight);
  display: flex;
  justify-content: start;
  gap: var(--op-space-small);
}
sl-dialog .modal__search-bar-wrapper,
.modal .modal__search-bar-wrapper {
  width: 100%;
  display: flex;
  align-items: end;
}
sl-dialog .modal__search-bar-wrapper .ts-control, sl-dialog .modal__search-bar-wrapper sl-select::part(combobox),
.modal .modal__search-bar-wrapper .ts-control,
.modal .modal__search-bar-wrapper sl-select::part(combobox) {
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
  font-size: var(--op-font-medium);
}
sl-dialog .modal__search-bar-wrapper:hover sl-select::part(combobox), sl-dialog .modal__search-bar-wrapper:hover .ts-control, sl-dialog .modal__search-bar-wrapper:focus sl-select::part(combobox), sl-dialog .modal__search-bar-wrapper:focus .ts-control,
.modal .modal__search-bar-wrapper:hover sl-select::part(combobox),
.modal .modal__search-bar-wrapper:hover .ts-control,
.modal .modal__search-bar-wrapper:focus sl-select::part(combobox),
.modal .modal__search-bar-wrapper:focus .ts-control {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight);
}
sl-dialog .modal__search-bar-wrapper.modal__search-bar-wrapper--with-select .ts-control,
.modal .modal__search-bar-wrapper.modal__search-bar-wrapper--with-select .ts-control {
  --ts-border-radius: var(--op-radius-large) 0 0 var(--op-radius-large);
}
sl-dialog .modal__search-bar-wrapper.modal__search-bar-wrapper--with-select sl-select::part(combobox),
.modal .modal__search-bar-wrapper.modal__search-bar-wrapper--with-select sl-select::part(combobox) {
  --sl-input-border-radius-large: 0 var(--op-radius-large) var(--op-radius-large) 0;
  border: var(--op-border-width) solid var(--op-color-border);
  border-left: none;
  transition: none;
}
sl-dialog .modal__search-bar-wrapper.modal__search-bar-wrapper--with-select sl-select:not(.insight-filter)::part(form-control),
.modal .modal__search-bar-wrapper.modal__search-bar-wrapper--with-select sl-select:not(.insight-filter)::part(form-control) {
  gap: 0;
}
sl-dialog .modal__search-bar-wrapper.modal__search-bar-wrapper--with-select:not(:hover) sl-select::part(combobox),
.modal .modal__search-bar-wrapper.modal__search-bar-wrapper--with-select:not(:hover) sl-select::part(combobox) {
  box-shadow: inset var(--op-border-width) 0 0 0 var(--op-color-neutral-plus-four);
}
sl-dialog .modal__search-bar-wrapper.modal__search-bar-wrapper--with-select sl-select::part(display-input),
.modal .modal__search-bar-wrapper.modal__search-bar-wrapper--with-select sl-select::part(display-input) {
  color: var(--op-color-neutral-on-plus-four);
}
sl-dialog .subheader-container--with-template-tabs,
.modal .subheader-container--with-template-tabs {
  position: sticky;
  top: 0;
  z-index: var(--op-z-index-dialog-content);
}
sl-dialog .subheader-container--with-template-tabs .modal__subheader:not(.modal__subheader--template-tabs),
.modal .subheader-container--with-template-tabs .modal__subheader:not(.modal__subheader--template-tabs) {
  box-shadow: unset;
}
sl-dialog .modal__tutorial-video-preview,
.modal .modal__tutorial-video-preview {
  --modal-video-height: 51rem;
  width: 100%;
  height: var(--modal-video-height);
}
sl-dialog .modal__body--aspire-image-export,
.modal .modal__body--aspire-image-export {
  --minimum-body-height: 30rem;
  min-height: var(--minimum-body-height);
}
sl-dialog .modal__disabled-content,
.modal .modal__disabled-content {
  pointer-events: none;
  opacity: 0.5;
}
sl-dialog .modal__image-library,
.modal .modal__image-library {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow-y: auto;
  grid-gap: var(--op-space-small);
  padding: var(--op-space-large);
  background-color: var(--op-color-background);
  border-radius: var(--op-radius-medium);
  max-height: 50vh;
  box-shadow: var(--op-border-all) var(--op-color-border);
}
sl-dialog .modal__image-library label,
.modal .modal__image-library label {
  place-self: center;
}
sl-dialog .modal__image-library label .modal__image-library-thumbnail,
.modal .modal__image-library label .modal__image-library-thumbnail {
  padding: var(--op-space-small);
}
sl-dialog .modal__image-library .modal__image-library-select,
.modal .modal__image-library .modal__image-library-select {
  display: none;
}
sl-dialog .modal__image-library .modal__image-library-select:checked ~ .modal__image-library-thumbnail,
.modal .modal__image-library .modal__image-library-select:checked ~ .modal__image-library-thumbnail {
  border-radius: var(--op-radius-large);
  background-color: var(--op-color-neutral-plus-six);
  box-shadow: var(--op-border-all) var(--op-color-primary-minus-two);
}
sl-dialog .project-template-types,
.modal .project-template-types {
  display: flex;
  gap: var(--op-space-medium);
}

.aspire-sync-modal__arrow-column {
  --arrow-column-row-width: 26rem;
  width: var(--arrow-column-row-width);
}

.modal__banner {
  --gradient-direction: 61.25deg;
  --gradient-stop-1: 2.62%;
  --gradient-stop-2: 53.76%;
  --gradient-stop-3: 93.69%;
  --noise-tile-size: calc(50 * var(--op-size-unit)); /* 200px */
  --badge-width: calc(var(--op-size-unit) * 12); /* 48px */
  --badge-height: calc(var(--op-size-unit) * 11); /* 44px */
  display: flex;
  padding: var(--op-space-x-small) var(--op-space-x-small) var(--op-space-x-small) var(--op-space-small);
  align-items: center;
  justify-content: space-between;
  border-radius: var(--op-radius-large);
  background: linear-gradient(var(--gradient-direction), var(--op-color-primary-minus-five) var(--gradient-stop-1), var(--op-color-primary-minus-one) var(--gradient-stop-2), var(--op-color-primary-plus-one) var(--gradient-stop-3));
  color: var(--op-color-primary-on-minus-two);
  font-size: var(--op-font-medium);
  font-style: normal;
  font-weight: var(--op-font-weight-normal);
  line-height: normal;
  letter-spacing: var(--op-letter-spacing-denser);
}
.modal__banner .modal__banner-description {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.modal__banner .modal__banner-title {
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-medium);
}
.modal__banner .modal__banner-subtitle {
  font-size: var(--op-font-x-small);
}
.modal__banner .modal__banner-icon {
  flex-shrink: 0;
  width: var(--badge-width);
  height: var(--badge-height);
}
.modal__banner .modal__banner-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.modal__banner.modal__banner--overlay {
  position: relative;
}
.modal__banner.modal__banner--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: var(--noise-tile-size) var(--noise-tile-size);
  opacity: var(--op-opacity-overlay);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.option-slider__wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--op-space-x-small);
  width: 100%;
}
.option-slider__wrapper .option-slider__label {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--op-color-neutral-plus-six);
  padding: var(--op-space-x-small);
  border-radius: var(--op-radius-medium);
  min-width: calc(10 * var(--op-size-unit));
  font-size: var(--op-font-x-small);
  height: var(--op-input-height-small);
}

.pin-preview {
  --pin-preview-width: 500px;
  align-items: flex-start;
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
  border: var(--op-border-width) solid var(--op-color-primary-plus-four);
  border-radius: var(--op-radius-x-large);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: var(--pin-preview-width);
}

.pin-preview__top-row {
  width: 100%;
  align-items: flex-start;
  display: flex;
  gap: var(--op-space-x-large);
  padding: var(--op-space-x-small);
}
.pin-preview__top-row:has(.pin-preview__image) .pin-preview__top-section {
  padding: var(--op-space-2x-small) var(--op-space-2x-small) 0 0;
}

.pin-preview__image-wrapper {
  --pin-preview-image-width: 148px;
  position: relative;
  border-radius: var(--op-radius-large);
  width: var(--pin-preview-image-width);
  overflow: hidden;
}
.pin-preview__image-wrapper img {
  aspect-ratio: 3/2;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.pin-preview__image-wrapper .pin-preview__image-count {
  --pin-preview-image-count-blur: 6px;
  -webkit-backdrop-filter: blur(var(--pin-preview-image-count-blur)) brightness(100%);
  backdrop-filter: blur(var(--pin-preview-image-count-blur)) brightness(100%);
  background-color: hsl(from var(--op-color-primary-plus-four) h s l/0.8);
  border-radius: var(--op-radius-large) 0 var(--op-radius-large) 0;
  box-shadow: inset var(--op-border-width) var(--op-border-width) var(--op-space-2x-small) hsl(from var(--op-color-primary-plus-one) h s l/0.16);
  display: inline-flex;
  justify-content: center;
  right: 0;
  bottom: 0;
  padding: var(--op-space-3x-small) var(--op-space-x-small);
  position: absolute;
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-semi-bold);
  white-space: nowrap;
}

.pin-preview__top-section {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--op-space-x-small);
  padding: var(--op-space-2x-small);
}

.pin-preview__top-section-contents {
  align-items: flex-start;
  display: flex;
  gap: var(--op-space-x-small);
  width: 100%;
}

.pin-preview__name-container {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--op-space-2x-small);
  justify-content: center;
}

.pin-preview__name {
  font-size: var(--op-font-x-large);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: var(--op-color-neutral-minus-max);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pin-preview__group-name {
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-max-alt);
}

.pin-preview__cost {
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-primary-on-plus-max-alt);
}

.pin-preview__tags {
  white-space: nowrap;
  overflow: hidden;
  align-items: flex-start;
  display: inline-flex;
  gap: var(--op-space-2x-small);
}

.pin-preview__bottom-section {
  background-color: var(--op-color-primary-plus-seven);
  font-size: var(--op-font-small);
  color: var(--op-color-primary-on-plus-seven);
  border-top: var(--op-border-width) solid var(--op-color-primary-plus-five);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  padding: var(--op-space-small);
  width: 100%;
}

.pin-preview__description {
  font-size: var(--op-font-small);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
}

.pin-preview__meta {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  width: 100%;
}

.pin-preview__coords {
  color: var(--op-color-neutral-on-plus-seven-alt);
}

.pin-preview__connection {
  color: var(--op-color-primary-on-plus-seven-alt);
}

.profile-menu {
  display: block;
  padding: var(--op-space-large) var(--op-horizontal-padding);
  font-size: var(--op-font-small);
}
.profile-menu sl-card::part(base) {
  --border-radius: var(--op-radius-large);
  width: var(--op-sidebar-org-switcher-width);
}
.profile-menu .profile-menu__organization {
  display: flex;
  align-items: center;
  grid-gap: var(--op-space-2x-small);
  color: var(--op-color-primary-on-plus-five);
  padding: var(--op-space-x-small);
  border-radius: var(--op-radius-large);
}
.profile-menu .profile-menu__organization .btn--text {
  text-align: left;
  white-space: normal;
  color: inherit;
}
.profile-menu .profile-menu__organization .profile-menu__organization-initials {
  --organization-initials-container-size: var(--op-space-x-large);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--op-radius-small);
  font-size: var(--op-font-x-small);
  height: var(--organization-initials-container-size);
  width: var(--organization-initials-container-size);
}
.profile-menu .profile-menu__organization:hover {
  background-color: var(--op-color-primary-plus-eight);
}
.profile-menu .profile-menu__organization.selected {
  border: var(--op-border-width) solid var(--op-color-primary-on-plus-five);
}
.profile-menu sl-dropdown {
  position: relative;
}
.profile-menu sl-dropdown sl-card::part(body) {
  display: flex;
  flex-direction: column;
  font-size: var(--op-font-x-small);
  padding: var(--op-space-small);
}
.profile-menu sl-dropdown sl-card::part(footer) {
  font-size: var(--op-font-x-small);
  padding: var(--op-space-small);
  display: flex;
}
.profile-menu sl-dropdown div[slot=footer] {
  --identity-footer-item-height: 36px;
  width: 100%;
  color: var(--op-color-neutral-on-plus-max);
}
.profile-menu sl-dropdown div[slot=footer] .btn--identity-footer {
  width: 100%;
  min-height: unset;
  height: var(--identity-footer-item-height);
  justify-content: start;
  border-radius: var(--op-radius-large);
  box-shadow: none;
  font-size: var(--op-font-x-small);
}
.profile-menu sl-dropdown div[slot=footer] .btn--identity-footer:hover {
  background-color: var(--op-color-neutral-plus-seven);
  color: var(--op-color-neutral-on-plus-seven);
}
.profile-menu sl-dropdown div[slot=footer] .profile-menu__logout-options {
  height: var(--identity-footer-item-height);
  font-size: var(--op-font-x-small);
  padding-left: var(--op-space-medium);
  display: flex;
  gap: var(--op-space-small);
  align-items: center;
  justify-content: space-between;
}

.profile-menu__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--op-color-primary-plus-five);
  color: var(--op-color-primary-on-plus-five);
  width: var(--op-input-height-large);
  border-radius: var(--op-radius-circle);
  aspect-ratio: 1/1;
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-bold);
  text-decoration: none;
  border: var(--op-border-width) solid var(--op-color-border);
  flex-shrink: 0;
}

.profile-menu__user-info {
  text-align: left;
  padding-left: var(--op-space-medium);
  font-size: var(--op-font-small);
}
.profile-menu__user-info span,
.profile-menu__user-info p {
  margin: 0;
}
.profile-menu__user-info span {
  color: var(--op-color-neutral-on-plus-eight);
  font-weight: var(--op-font-weight-medium);
}
.profile-menu__user-info p {
  font: inherit;
  color: var(--op-color-neutral-on-plus-eight-alt);
}

.profile-menu__switch-organization-menu {
  --max-height: 50rem;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
  overflow-y: auto;
  max-height: var(--max-height);
}
.profile-menu__switch-organization-menu :nth-child(5n+1) .profile-menu__organization-initials {
  background: var(--op-color-primary-plus-six);
  color: var(--op-color-primary-on-plus-six);
}
.profile-menu__switch-organization-menu :nth-child(5n+2) .profile-menu__organization-initials {
  background: var(--op-color-alerts-notice-plus-six);
  color: var(--op-color-alerts-notice-on-plus-six);
}
.profile-menu__switch-organization-menu :nth-child(5n+3) .profile-menu__organization-initials {
  background: var(--op-color-alerts-danger-plus-six);
  color: var(--op-color-alerts-danger-on-plus-six);
}
.profile-menu__switch-organization-menu :nth-child(5n+4) .profile-menu__organization-initials {
  --background-orange: rgba(255, 239, 224, 1);
  --text-orange: rgba(82, 39, 0, 1);
  background: var(--background-orange);
  color: var(--text-orange);
}
.profile-menu__switch-organization-menu :nth-child(5n+5) .profile-menu__organization-initials {
  --background-yellow: rgba(254, 255, 224, 1);
  --text-yellow: rgba(80, 82, 0, 1);
  background: var(--background-yellow);
  color: var(--text-yellow);
}

.profile-menu__title {
  display: none;
}

.global-search-control {
  flex-grow: 1;
}
.global-search-control .global-search-control__input {
  flex-grow: 1;
  --sl-input-font-size-large: var(--op-font-medium);
  --sl-input-background-color: var(--op-color-neutral-plus-eight);
  --sl-input-color: var(--op-color-neutral-on-plus-eight);
  --sl-input-background-color-focus: var(--op-color-neutral-plus-eight);
  --sl-input-color-focus: var(--op-color-neutral-on-plus-eight);
  --sl-input-border-color-focus: var(--op-color-primary-minus-three);
  --sl-input-background-color-hover: var(--op-color-primary-plus-eight);
  --sl-input-color-hover: var(--op-color-primary-on-plus-eight);
  --sl-input-border-color-hover: var(--op-color-neutral-plus-three);
  --sl-input-spacing-large: var(--op-space-small);
}
.global-search-control .global-search-control__input div[slot=prefix],
.global-search-control .global-search-control__input div[slot=suffix] {
  margin-inline-start: var(--op-space-small);
  color: var(--op-color-neutral-on-plus-four);
}
.global-search-control .global-search-control__input div[slot=prefix] .icon,
.global-search-control .global-search-control__input div[slot=prefix] .prefix-suffix-text,
.global-search-control .global-search-control__input div[slot=suffix] .icon,
.global-search-control .global-search-control__input div[slot=suffix] .prefix-suffix-text {
  color: var(--op-color-neutral-on-plus-four);
}
.global-search-control .global-search-control__input::part(suffix) {
  padding-left: 0;
}
.global-search-control .global-search-control__input.global-search-control__input--quick-results-open {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .global-search-control .global-search-control__input.global-search-control__input--quick-results-open {
    --sl-input-border-radius-large: var(--op-radius-large);
  }
}
.global-search-control .global-search-control__input.global-search-control__input--quick-results-open {
  --sl-input-border-radius-large: var(--op-radius-large) var(--op-radius-large) 0 0;
}
.global-search-control .global-search-control__input.global-search-control__input--empty::part(suffix) {
  border-left: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.global-search-control .global-search-control__input.global-search-control__input--results-shown {
  --sl-input-background-color: var(--op-color-neutral-plus-six);
  --sl-input-color: var(--op-color-neutral-on-plus-six);
}
.global-search-control .global-search-control__input.global-search-control__input--results-shown::part(prefix) {
  /* --op-breakpoint-small */
}
@media (min-width: 768px) {
  .global-search-control .global-search-control__input.global-search-control__input--results-shown::part(prefix) {
    padding-right: var(--sl-input-spacing-large);
    background-color: var(--op-color-neutral-plus-four);
    color: var(--op-color-neutral-on-plus-four);
  }
}
.global-search-control .global-search-control__input {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .global-search-control .global-search-control__input {
    --sl-input-background-color: var(--op-color-neutral-plus-seven);
    --sl-input-border-color: var(--op-color-neutral-plus-seven);
    --sl-input-color: var(--op-color-neutral-on-plus-seven);
    --sl-input-background-color-focus: var(--op-color-primary-plus-eight);
    --sl-input-color-focus: var(--op-color-primary-on-plus-eight);
    --sl-input-border-color-focus: var(--op-color-primary-plus-three);
  }
  .global-search-control .global-search-control__input::part(suffix) {
    display: none;
  }
}

.global-search-control__prefix-suffix {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.global-search-control__prefix-suffix.hidden {
  /* --op-breakpoint-small */
}
@media (min-width: 768px) {
  .global-search-control__prefix-suffix.hidden {
    display: none;
    margin: 0;
  }
}
.global-search-control__prefix-suffix .prefix-suffix-text {
  font-size: var(--op-font-x-large);
}

.global-search-control__result {
  padding: var(--op-space-small) var(--op-space-large);
  box-shadow: var(--op-border-bottom-thin);
  font-size: var(--op-font-medium);
  text-align: left;
}
.global-search-control__result:hover {
  background-color: var(--op-color-primary-plus-five);
}
.global-search-control__result .global-search-control__result-address {
  font-size: var(--op-font-x-small);
  font-style: italic;
}

.global-search-control__quick-create {
  color: var(--op-color-neutral-on-plus-eight-alt);
}

.global-search-control__header {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .global-search-control__header {
    height: var(--op-main-content-header-height--mobile-large);
  }
  .global-search-control__header a.badge--primary, .global-search-control__header a.badge--secondary {
    padding: var(--op-space-x-small) var(--op-space-small);
    font-size: var(--op-font-size-medium);
  }
}

.global-search-control__tab-wrapper {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .global-search-control__tab-wrapper {
    overflow-x: scroll;
    gap: var(--op-space-x-small);
    width: calc(100vw - 2 * var(--op-space-large));
  }
}
.global-search-control__tab-wrapper {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  padding: var(--op-space-2x-small);
}

.global-search-control__results-wrapper {
  --op-project-search-form-width: 70rem;
  --input-right-spacer: 25rem;
  z-index: 10;
  width: 100%;
  max-width: var(--op-project-search-form-width);
}
.global-search-control__results-wrapper sl-input div[slot=suffix] {
  margin-inline-start: var(--sl-input-spacing-large);
}
.global-search-control__results-wrapper .global-search-control__input::part(suffix) {
  padding-left: 0;
}
.global-search-control__results-wrapper .global-search-control__input {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .global-search-control__results-wrapper .global-search-control__input[size=large] {
    height: var(--op-input-height-large);
  }
}

.global-search-control__results {
  background-color: var(--op-color-background);
  box-shadow: var(--op-shadow-medium);
  border-left: 2px solid var(--op-color-primary-minus-six);
  border-right: 2px solid var(--op-color-primary-minus-six);
  border-bottom: 2px solid var(--op-color-primary-minus-six);
  border-radius: 0 0 var(--op-radius-large) var(--op-radius-large);
  margin: -1px;
  position: absolute;
  z-index: var(--op-z-index-dropdown);
  overflow: hidden;
}
.global-search-control__results div button {
  width: 100%;
  justify-content: flex-start;
}
.global-search-control__results {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .global-search-control__results {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: var(--op-space-small);
    padding: var(--op-space-small);
    bottom: 0;
    left: 0;
    height: calc(100vh - var(--op-main-content-header-height--mobile-large));
    width: 100vw;
    margin: unset;
    border: unset;
    box-shadow: unset;
  }
  .global-search-control__results .global-search-control__result {
    background-color: var(--op-color-neutral-plus-five);
    color: var(--op-color-neutral-on-plus-five);
    border-radius: var(--op-radius-large);
    border: none;
  }
  .global-search-control__results .global-search-control__result .global-search-control__result-address {
    color: var(--op-color-neutral-on-plus-five-alt);
    font-size: var(--op-font-size-medium);
  }
}

a.global-search-control__link {
  text-decoration: none;
  cursor: pointer;
  color: var(--op-color-on-background);
}

.global-search-control__result-hint {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--op-space-x-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
}

.global-search-control__result-hint--boxed {
  background-color: var(--op-color-neutral-plus-three);
  color: var(--op-color-neutral-on-plus-three);
  padding: var(--op-space-2x-small) var(--op-space-x-small);
  border-radius: var(--op-radius-medium);
}

.global-search-control__result-highlight {
  background-color: var(--op-color-primary-plus-five);
  box-shadow: inset 0 calc(-1 * var(--op-border-width)) 0 0 var(--op-color-primary-minus-three);
}

.selectable-area {
  border: var(--op-border-width-large) solid transparent;
  border-radius: var(--op-radius-x-large);
  padding: var(--op-border-width-large);
  transition: border-color 250ms ease;
}
.selectable-area .selectable-area__content {
  background: var(--op-color-neutral-plus-eight);
  border-radius: var(--op-radius-large);
  padding: var(--op-space-small) var(--op-space-medium);
}
.selectable-area .selectable-area__content .selectable-area__content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.selectable-area .selectable-area__icon {
  color: var(--op-color-neutral-plus-one);
}
.selectable-area .selectable-area__title {
  font-size: var(--op-font-medium);
  color: var(--op-color-neutral-on-plus-eight);
}
.selectable-area.selectable-area--checkbox .selectable-area__content {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
}
.selectable-area.selectable-area--active {
  border-color: var(--op-color-primary-plus-one);
}
.selectable-area.selectable-area--active .selectable-area__icon {
  color: var(--op-color-primary-minus-three);
}
.selectable-area.selectable-area--active .selectable-area__title {
  color: var(--op-color-primary-on-plus-six);
}
.selectable-area.selectable-area--active .selectable-area__content {
  --gradient-direction: 212deg;
  --gradient-first-color-percentage: -32%;
  --gradient-second-color-percentage: 78%;
  background: linear-gradient(var(--gradient-direction), var(--op-color-primary-plus-four) var(--gradient-first-color-percentage), var(--op-color-primary-plus-eight) var(--gradient-second-color-percentage));
}

sl-drawer.sheet::part(body) {
  padding: var(--op-space-medium) var(--op-space-medium) var(--op-space-x-large) var(--op-space-medium);
}
sl-drawer.sheet::part(panel) {
  border-radius: var(--op-radius-x-large) var(--op-radius-x-large) 0 0;
}
sl-drawer.sheet.markup-properties-panel {
  --markup-panel-height: 75vh;
}
sl-drawer.sheet.markup-properties-panel::part(body) {
  height: var(--markup-panel-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
sl-drawer.sheet.markup-properties-panel::part(panel) {
  overflow: hidden;
}
sl-drawer.sheet.markup-properties-panel.expanded::part(panel) {
  border-radius: 0px;
}
sl-drawer.sheet.markup-properties-panel pi-sheet-layout {
  --sheet-layout-height: calc(var(--markup-panel-height) - 4vh);
  display: flex;
  flex: 1;
  flex-direction: column;
  height: var(--sheet-layout-height);
}
sl-drawer.sheet.markup-properties-panel.markup-properties-panel--fit-content::part(body) {
  height: auto;
  overflow: visible;
}
sl-drawer.sheet.markup-properties-panel.markup-properties-panel--fit-content pi-sheet-layout {
  display: block;
  flex: none;
  height: auto;
}
sl-drawer.sheet .sheet__header {
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--op-space-medium);
  align-items: center;
  color: var(--op-color-neutral-on-plus-max);
  text-align: center;
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-semi-bold);
  margin-bottom: var(--op-space-medium);
}
sl-drawer.sheet .sheet__footer {
  padding: var(--op-space-2x-small) var(--op-space-x-small);
  display: flex;
  align-items: center;
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-semi-bold);
}
sl-drawer.sheet .sheet__item {
  --item-height: 56px;
  border-radius: var(--op-radius-pill);
  background: var(--op-color-neutral-plus-six);
  display: flex;
  height: var(--item-height);
  width: 100%;
  padding: var(--op-space-medium) var(--op-space-large);
  align-items: center;
  text-decoration: none;
  gap: var(--op-space-small);
  color: var(--op-color-neutral-on-plus-six);
  justify-content: flex-start;
}
sl-drawer.sheet .sheet__item .material-symbols-outlined {
  color: var(--op-color-neutral-on-plus-six-alt);
}
sl-drawer.sheet .sheet__item.sheet__item--selected {
  background: var(--op-color-primary-plus-six);
}
sl-drawer.sheet .sheet__item.sheet__item--disabled {
  opacity: var(--op-opacity-disabled);
}
sl-drawer.sheet .sheet__item.sheet__item--danger {
  background: var(--op-color-alerts-danger-plus-six);
  color: var(--op-color-alerts-danger-on-plus-six);
}
sl-drawer.sheet .sheet__item.sheet__item--danger .material-symbols-outlined {
  color: var(--op-color-alerts-danger-on-plus-six-alt);
}
sl-drawer.sheet .sheet__item.sheet__item--warning {
  background: var(--op-color-alerts-warning-plus-six);
  color: var(--op-color-alerts-warning-on-plus-six);
}
sl-drawer.sheet .sheet__item.sheet__item--warning .material-symbols-outlined {
  color: var(--op-color-alerts-warning-on-plus-six-alt);
}
sl-drawer.sheet .sheet__item-clear-icon {
  position: absolute;
  right: 6px;
  top: 6px;
}
sl-drawer.sheet .sheet__handle-wrapper {
  --fixed-height: 2rem;
  --fixed-width: 6rem;
  width: var(--fixed-width);
  position: absolute;
  left: calc(50% - var(--fixed-width) / 2);
  top: 0;
  display: flex;
  justify-content: center;
  height: var(--fixed-height);
}
sl-drawer.sheet .sheet__handle .custom-icons {
  height: unset;
}

.sheet-trigger__header {
  border-radius: var(--op-radius-large);
  background: var(--op-color-neutral-plus-seven);
  display: flex;
  height: var(--op-space-3x-large);
  align-items: center;
}
.sheet-trigger__header.sheet-trigger__header__project-categories-menu {
  justify-content: space-between;
  padding: var(--op-space-x-small) var(--op-space-x-small) var(--op-space-x-small) var(--op-space-small);
  width: 100%;
}
.sheet-trigger__header.sheet-trigger__header__project-saved-views {
  justify-content: center;
  padding: var(--op-space-x-small) var(--op-space-x-small) var(--op-space-x-small) var(--op-space-x-small);
}

.side-panel {
  position: fixed;
  top: var(--op-markup-view-editor-padding);
  bottom: var(--op-markup-view-editor-padding);
  z-index: var(--op-z-index-sidebar);
  width: var(--op-markup-panel-width);
  border-radius: var(--op-radius-large);
  box-shadow: var(--op-markup-overlay-shadow);
  background-color: var(--op-color-neutral-plus-eight);
  transition: all ease-in-out 250ms;
  height: unset;
  /* --op-breakpoint-small */
}
@media only screen and (max-width: 768px) {
  .side-panel {
    border-radius: unset;
    top: 0;
    width: 100%;
    bottom: 0;
    height: 100%;
    bottom: env(safe-area-inset-bottom);
  }
}
.side-panel.side-panel--collapsed {
  /* --op-breakpoint-small */
}
@media only screen and (max-width: 768px) {
  .side-panel.side-panel--collapsed {
    top: 100vh;
  }
}
.side-panel .side-panel__footer {
  height: var(--op-collapsible-side-panel-footer-height);
  background-color: var(--op-color-background);
  padding: 0 var(--op-space-small);
  display: flex;
  align-items: center;
  border-top: solid var(--op-border-width) var(--op-color-border);
}

.side-panel__toggle {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  --button-size: calc(2 * var(--op-space-medium));
  width: var(--button-size);
  height: var(--button-size);
  background-color: var(--op-color-background);
  color: var(--op-color-on-background);
  border-radius: var(--op-radius-circle);
  box-shadow: var(--op-markup-overlay-shadow);
}

.side-panel__toggle--mobile {
  --op-toggle-mobile-button-size: 44%;
  position: fixed;
  width: var(--op-toggle-mobile-button-size);
  bottom: var(--op-markup-view-editor-padding);
  bottom: calc(var(--op-markup-view-editor-padding) + env(safe-area-inset-bottom));
}

.side-panel--left {
  left: var(--op-markup-view-editor-padding);
}
.side-panel--left .side-panel__controls {
  position: absolute;
  display: flex;
  gap: var(--op-space-small);
  top: 0;
  left: calc(var(--op-markup-panel-width) + var(--op-markup-view-editor-padding));
}
.side-panel--left .markup-toolbar {
  position: relative;
}
.side-panel--left.side-panel--collapsed {
  left: calc(-1 * var(--op-markup-panel-width));
}
.side-panel--left .side-panel__toggle {
  left: calc(var(--op-markup-panel-width) + var(--op-space-small));
}
.side-panel--left .side-panel__toggle--mobile {
  left: var(--op-markup-view-editor-padding);
}
.side-panel--left {
  /* --op-breakpoint-small */
}
@media only screen and (max-width: 768px) {
  .side-panel--left {
    left: unset;
  }
  .side-panel--left button {
    z-index: 1;
  }
  .side-panel--left.side-panel--collapsed {
    left: unset;
  }
  .side-panel--left .side-panel__controls {
    top: calc(var(--op-markup-view-editor-padding) - 100vh);
    left: var(--op-markup-view-editor-padding);
  }
}

.side-panel--right {
  right: var(--op-markup-view-editor-padding);
  --op-banner-offset-from-sidebar: calc(3 * var(--op-space-2x-large));
}
.side-panel--right .public-beta-banner {
  left: calc(-1 * (var(--op-markup-panel-width) + var(--op-banner-offset-from-sidebar)));
}
.side-panel--right .markup-toolbar {
  top: 0;
  right: calc(var(--op-markup-panel-width) + var(--op-markup-view-editor-padding));
}
.side-panel--right.side-panel--collapsed .public-beta-banner {
  right: calc(-1 + var(--op-banner-offset-from-sidebar));
}
.side-panel--right.side-panel--collapsed {
  right: calc(-1 * var(--op-markup-panel-width));
}
.side-panel--right .side-panel__toggle {
  right: calc(var(--op-markup-panel-width) + var(--op-space-small));
}
.side-panel--right .side-panel__toggle--mobile {
  right: var(--op-markup-view-editor-padding);
}
.side-panel--right {
  /* --op-breakpoint-small */
}
@media only screen and (max-width: 768px) {
  .side-panel--right {
    right: unset;
  }
  .side-panel--right.side-panel--collapsed {
    right: unset;
  }
  .side-panel--right .markup-toolbar {
    top: calc(var(--op-markup-view-editor-padding) - 100vh);
    right: var(--op-markup-view-editor-padding);
  }
}

.tabs {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.tab-group {
  --op-color-on-background: var(--op-color-neutral-on-plus-six);
  display: flex;
  background-color: var(--op-color-background);
  color: var(--op-color-on-background);
  align-items: end;
}
.main-content__header .tab-group {
  background: none;
  color: var(--op-color-neutral-on-plus-six);
}
.tab-group.tab-group--with-border {
  width: 100%;
  border-bottom: var(--op-border-width) solid var(--op-color-border);
  padding: var(--op-space-2x-small) var(--op-horizontal-padding) 0;
}
.tab-group.tab-group--no-background {
  background-color: unset;
}

.tab-group__tab {
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  padding: var(--op-space-x-small) var(--op-space-medium) var(--op-space-small);
  color: var(--op-color-on-background);
  white-space: nowrap;
}
.tab-group__tab.active {
  box-shadow: inset 0 calc(-1 * var(--op-border-width-x-large)) 0 0 var(--op-color-primary-on-plus-five);
}
.tab-group__tab.tab-group__tab--with-badge {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.tab-group__tab .tab-group__tab-link {
  text-decoration: none;
  color: var(--op-color-on-background);
  white-space: nowrap;
}

.tab-group__tab--small {
  padding: var(--op-space-small) var(--op-space-small);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.tab-group__tab--small.active {
  box-shadow: inset 0 calc(-1 * var(--op-border-width-large)) 0 0 var(--op-color-primary-on-plus-five);
}

.tab-group__panel {
  overflow: auto;
  padding: var(--op-horizontal-padding);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  height: 100%;
}

.table-container {
  container: table-container/inline-size;
  height: 100%;
}

.table__container {
  padding: var(--op-space-x-large) var(--op-space-3x-large);
}
.table__container.table__container--table-with-sticky-header {
  padding: var(--op-space-x-large) var(--op-space-3x-large) 0 var(--op-space-3x-large);
  overflow-y: hidden;
  height: 100%;
}
.table__container.table__container--table-with-sticky-header.table__container--table-with-sticky-header__billings-adjustments {
  --table-height: 244px;
  max-height: var(--table-height);
  padding: var(--op-space-small);
  height: auto;
}

.scrolling-table-wrapper {
  border-radius: var(--op-radius-large);
  height: 100%;
  contain: unset;
  overflow-y: auto;
  font-size: var(--op-font-medium);
  line-height: var(--op-line-height-base);
  color: var(--op-color-on-background);
  background-color: var(--op-color-background);
  box-shadow: var(--op-border-all) var(--op-color-border);
  position: relative;
}
.scrolling-table-wrapper.scrolling-table-wrapper--table-with-sticky-header {
  flex: 1;
  border-radius: inherit;
}
.scrolling-table-wrapper.scrolling-table-wrapper--no-radius {
  border-radius: 0;
}
.scrolling-table-wrapper.scrolling-table-wrapper--no-radius-bottom {
  border-radius: var(--op-radius-large) var(--op-radius-large) 0 0;
}
.scrolling-table-wrapper.scrolling-table-wrapper--no-radius-top {
  border-radius: 0 0 var(--op-radius-large) var(--op-radius-large);
}

.table {
  --sticky-heading-z-index: 1;
  border-radius: inherit;
  contain: unset;
}
.table .right-aligned {
  text-align: right;
}
.table thead {
  background: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
}
.table thead.sticky {
  position: sticky;
  top: 0;
  z-index: var(--sticky-heading-z-index);
}
.table thead th {
  height: var(--_op-table-cell-height-default);
  text-transform: unset;
  font-weight: var(--op-font-weight-bold);
}
.table thead th.actions {
  width: var(--op-space-3x-large);
}
.table thead .checkbox_column {
  background-color: var(--op-color-neutral-plus-six);
  box-shadow: inset var(--op-border-top) var(--op-color-border);
}
.table thead tr {
  box-shadow: inset var(--op-border-top) var(--op-color-border);
}
.table thead tr.darker {
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four);
}
.table tbody {
  background: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
}
.table tbody tr {
  transition: background-color 250ms;
}
.table tbody tr td {
  white-space: nowrap;
}
.table tbody tr .actions {
  box-shadow: inset var(--op-border-top) var(--op-color-border);
}
@media (pointer: fine) {
  .table tbody tr .actions sl-dropdown {
    visibility: hidden;
  }
}
.table tbody tr .actions {
  text-align: center;
}
.table tbody tr .actions sl-button[variant=text]::part(base) {
  color: unset;
  height: var(--op-space-x-large);
}
.table tbody tr.selected .actions {
  background: var(--op-color-primary-plus-five);
  box-shadow: inset var(--op-border-right) var(--op-color-border), inset var(--op-border-top) var(--op-color-border);
}
.table tbody tr.selected .actions sl-dropdown {
  visibility: visible;
}
.table tbody tr:hover:not(.no-hover) {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight);
  box-shadow: inset var(--op-border-top) var(--op-color-border);
}
.table tbody tr:hover:not(.no-hover) .actions sl-dropdown {
  visibility: visible;
}
.table tbody tr .checkbox_column {
  --op-border-right-blurred: var(--op-border-width) 0 3px 0;
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  box-shadow: var(--op-border-top) var(--op-color-border), var(--op-border-right-blurred) var(--op-color-border);
}
.table tbody tr .checkbox_column.checkbox_column--with-tooltip:hover {
  z-index: calc(var(--sticky-heading-z-index) + 1);
}
.table tbody tr:not(.selected):hover .checkbox_column {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight);
}
.table tbody tr:not(.selected):hover .actions {
  background: linear-gradient(90deg, transparent 0, var(--op-color-primary-plus-eight) 50%, var(--op-color-primary-plus-eight) 100%);
}
.table tbody tr .actions {
  padding: 0;
}
.table tbody tr .form-group {
  padding: 0;
}
.table tbody tr .form-control {
  gap: 0;
}
.table tbody tr.selected {
  background-color: var(--op-color-primary-plus-five);
}
.table tbody tr.selected .checkbox_column {
  background-color: inherit;
}
.table tbody tr:last-child:hover {
  box-shadow: none;
}
.table tbody tr:last-child .actions {
  box-shadow: none;
}

.checkbox_column {
  left: 0;
  position: sticky;
  width: var(--op-space-3x-large);
  display: flex;
  justify-content: center;
}

a.table__link,
button.table__link {
  display: flex;
  align-items: center;
  padding: 0;
  text-decoration: none;
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-on-background);
}
a.table__link.active,
button.table__link.active {
  color: var(--op-color-primary-minus-three);
}
a.table__link div,
button.table__link div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
a.table__link.table__link--wrap div,
button.table__link.table__link--wrap div {
  text-overflow: unset;
  overflow: unset;
  white-space: wrap;
  text-align: left;
}
td a.table__link,
td button.table__link {
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-primary-minus-one);
  text-decoration: underline;
}
td a.table__link:hover,
td button.table__link:hover {
  color: var(--op-color-primary-minus-two);
}

table.table--vertical-cell-borders {
  border-radius: 0;
  box-shadow: var(--op-border-all) var(--op-color-neutral-plus-four);
}
table.table--vertical-cell-borders th,
table.table--vertical-cell-borders td {
  border-left: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
table.table--vertical-cell-borders td:first-child, table.table--vertical-cell-borders th:first-child {
  border-left: none;
}

table.expandable-table thead {
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.grouping__container table.expandable-table thead {
  border-top: 0;
}
table.expandable-table th:last-child {
  border-top-right-radius: unset;
}
table.expandable-table th:first-child {
  border-top-left-radius: unset;
}
table.expandable-table tr:last-child td:last-child {
  border-bottom-right-radius: var(--op-radius-large);
}
table.expandable-table tr:last-child td:first-child {
  border-bottom-left-radius: var(--op-radius-large);
}
table.expandable-table .actions {
  --groups-table-actions-width: 56px;
  width: var(--groups-table-actions-width);
}

th.name-column,
td.name-column {
  --op-name-column-width: 20vw;
  width: var(--op-name-column-width);
}
th.name-column a,
td.name-column a {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.table tbody tr td.name-column--max-width {
  min-width: 20rem;
  max-width: 20rem;
  white-space: pre-wrap;
}

td.warning {
  background-color: var(--op-color-alerts-warning-plus-six);
  color: var(--op-color-alerts-on-warning-plus-six);
  border: solid var(--op-border-width) var(--op-color-alerts-warning-plus-two);
}

.table:not(.proposal__grouped-materials-table, .table--no-min-width) th:not(.checkbox_column, .actions) {
  min-width: calc(var(--op-space-3x-large) * 4);
}
.table:not(.proposal__grouped-materials-table, .table--no-min-width) th.column--min-width-small {
  min-width: calc(var(--op-space-x-large) * 4);
}
.table:not(.proposal__grouped-materials-table, .table--no-min-width) th.column--min-width-large {
  min-width: calc(var(--op-space-3x-large) * 5);
}
.table:not(.proposal__grouped-materials-table, .table--no-min-width) th a.sort_link {
  white-space: nowrap;
}

td.catalog-item-name {
  width: clamp(10rem, 20vw, 20vw);
  text-overflow: unset;
  overflow: unset;
  white-space: wrap !important;
  text-align: left;
}

td.catalog-item-icon {
  --op-icon-size: var(--op-font-medium);
  width: var(--op-icon-size);
}

table.aspire-sync-table {
  table-layout: auto;
  width: 100%;
  color: var(--op-color-neutral-on-plus-six);
  border-spacing: 0;
}
table.aspire-sync-table th {
  text-align: left;
  font-size: var(--op-font-x-small);
  border-bottom: var(--op-border-width) solid var(--op-color-border);
}
table.aspire-sync-table th,
table.aspire-sync-table td {
  padding: var(--op-space-2x-small);
}
table.aspire-sync-table td {
  height: 100%;
}
table.aspire-sync-table td.disabled {
  color: var(--op-color-neutral-plus-three);
}

.mapping-table-wrapper {
  border-radius: var(--op-radius-medium);
}
.mapping-table-wrapper .table {
  overflow: hidden;
  table-layout: fixed;
}
.mapping-table-wrapper .table colgroup col:nth-child(1) {
  width: 45%;
}
.mapping-table-wrapper .table colgroup col:nth-child(2) {
  width: 10%;
}
.mapping-table-wrapper .table colgroup col:nth-child(3) {
  width: 45%;
}

:root {
  --thumbnail-width: 144px;
  --thumbnail-height: 89px;
}

.thumbnail-card {
  display: grid;
  grid-template-columns: var(--thumbnail-width) auto;
  grid-template-rows: auto;
  grid-template-areas: "top-left top-right" "bottom-left bottom-right";
  box-shadow: none;
  gap: var(--op-space-small);
  padding-left: 0;
  width: 100%;
}
.thumbnail-card .thumbnail-card__thumbnail {
  grid-area: top-left/top-left/bottom-left/bottom-left;
}
.thumbnail-card .thumbnail-card__header {
  grid-area: top-right;
  word-break: break-word;
}
.thumbnail-card .thumbnail-card__content {
  grid-area: bottom-right;
}
.thumbnail-card.thumbnail-card--left-border {
  grid-template-columns: 0 1fr;
  gap: 0;
  padding-left: var(--op-space-medium);
  box-shadow: calc(-1 * var(--op-border-width-x-large)) 0 0 0 var(--op-color-primary-minus-three);
}
.thumbnail-card a:empty:not(.thumbnail-card__group-play-button, .thumbnail-card__play-button) {
  display: none;
}

.left-border {
  padding-left: var(--op-space-medium);
  box-shadow: calc(-1 * var(--op-border-width-x-large)) 0 0 0 var(--op-color-primary-minus-three);
}

.thumbnail-card__wrapper {
  padding: var(--op-space-medium) var(--op-space-3x-large);
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  color: var(--op-color-neutral-on-plus-six);
  transition: opacity var(--op-transition-input);
}
.thumbnail-card__wrapper:not(.thumbnail-card__wrapper--read-only) {
  cursor: pointer;
}
.thumbnail-card__wrapper a {
  text-decoration: none;
  color: var(--op-color-neutral-on-plus-six);
}
.thumbnail-card__wrapper .thumbnail-card__thumbnail {
  position: relative;
}
.thumbnail-card__wrapper .thumbnail-card__title-container {
  display: flex;
  gap: var(--op-space-small);
  align-items: center;
}
.thumbnail-card__wrapper .thumbnail-card__title {
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-medium);
  color: var(--op-color-neutral-on-plus-six);
}
.thumbnail-card__wrapper .thumbnail-card__subtitle {
  color: var(--op-color-primary-on-plus-eight-alt);
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-normal);
  padding-left: var(--op-space-medium);
}
.thumbnail-card__wrapper .thumbnail-card__description-wrapper {
  width: 100%;
  overflow: hidden;
}
.thumbnail-card__wrapper .thumbnail-card__description {
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--op-font-small);
  font-style: italic;
  white-space: pre-wrap;
}
.thumbnail-card__wrapper .thumbnail-card__description.thumbnail-card__description--no-italic {
  font-style: unset;
}
.thumbnail-card__wrapper .thumbnail-card__metadata-row {
  display: flex;
  gap: var(--op-space-medium);
  font-weight: var(--op-font-weight-semi-bold);
}
.thumbnail-card__wrapper .thumbnail-card__metadata-row .thumbnail-card__metadata {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  font-size: var(--op-font-x-small);
}
.thumbnail-card__wrapper .thumbnail-card__metadata-row .thumbnail-card__metadata .material-symbols-outlined,
.thumbnail-card__wrapper .thumbnail-card__metadata-row .thumbnail-card__metadata .custom-icons {
  color: var(--op-color-neutral-on-plus-six-alt);
}
.thumbnail-card__wrapper .thumbnail-card__title-extension {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.thumbnail-card__wrapper:hover, .thumbnail-card__wrapper.thumbnail-card__wrapper--active {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  border-color: var(--op-color-neutral-plus-four);
}
.thumbnail-card__wrapper:hover .thumbnail-card__actions, .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__actions {
  opacity: 1;
}
.thumbnail-card__wrapper:hover .thumbnail-card__title, .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__title {
  color: var(--op-color-neutral-on-plus-eight);
}
.thumbnail-card__wrapper:hover .thumbnail-card__description, .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__description {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.thumbnail-card__wrapper:hover .thumbnail-card__metadata, .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__metadata {
  color: var(--op-color-neutral-on-plus-eight);
}
.thumbnail-card__wrapper:hover .thumbnail-card__metadata .material-symbols-outlined,
.thumbnail-card__wrapper:hover .thumbnail-card__metadata .custom-icons, .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__metadata .material-symbols-outlined,
.thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__metadata .custom-icons {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.thumbnail-card__wrapper:hover:only-child {
  box-shadow: none;
}
.dashboard-section-container .thumbnail-card__wrapper:hover:last-child:not(:only-child) {
  box-shadow: inset var(--op-border-bottom) var(--op-color-neutral-plus-four);
}
.thumbnail-card__wrapper span.thumbnail-card__value-text {
  white-space: nowrap;
}
@media only screen and (max-width: 1140px) {
  .thumbnail-card__wrapper span.thumbnail-card__button-text {
    display: none;
  }
}
@media only screen and (max-width: 1040px) {
  .thumbnail-card__wrapper span.thumbnail-card__label-text {
    display: none;
  }
}

.main-content__body.no-scrolling .thumbnail-card__wrapper,
.project-group .thumbnail-card__wrapper,
.dashboard-section-container .thumbnail-card__wrapper {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
}
.main-content__body.no-scrolling .thumbnail-card__wrapper a,
.project-group .thumbnail-card__wrapper a,
.dashboard-section-container .thumbnail-card__wrapper a {
  color: var(--op-color-neutral-on-plus-eight);
}
.main-content__body.no-scrolling .thumbnail-card__wrapper .thumbnail-card__title,
.project-group .thumbnail-card__wrapper .thumbnail-card__title,
.dashboard-section-container .thumbnail-card__wrapper .thumbnail-card__title {
  color: var(--op-color-neutral-on-plus-eight);
}
.main-content__body.no-scrolling .thumbnail-card__wrapper .thumbnail-card__description,
.project-group .thumbnail-card__wrapper .thumbnail-card__description,
.dashboard-section-container .thumbnail-card__wrapper .thumbnail-card__description {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.main-content__body.no-scrolling .thumbnail-card__wrapper .thumbnail-card__metadata-row .material-symbols-outlined,
.main-content__body.no-scrolling .thumbnail-card__wrapper .thumbnail-card__metadata-row .custom-icons,
.project-group .thumbnail-card__wrapper .thumbnail-card__metadata-row .material-symbols-outlined,
.project-group .thumbnail-card__wrapper .thumbnail-card__metadata-row .custom-icons,
.dashboard-section-container .thumbnail-card__wrapper .thumbnail-card__metadata-row .material-symbols-outlined,
.dashboard-section-container .thumbnail-card__wrapper .thumbnail-card__metadata-row .custom-icons {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.main-content__body.no-scrolling .thumbnail-card__wrapper .thumbnail-card__title-extension,
.project-group .thumbnail-card__wrapper .thumbnail-card__title-extension,
.dashboard-section-container .thumbnail-card__wrapper .thumbnail-card__title-extension {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.main-content__body.no-scrolling .thumbnail-card__wrapper:hover, .main-content__body.no-scrolling .thumbnail-card__wrapper.thumbnail-card__wrapper--active,
.project-group .thumbnail-card__wrapper:hover,
.project-group .thumbnail-card__wrapper.thumbnail-card__wrapper--active,
.dashboard-section-container .thumbnail-card__wrapper:hover,
.dashboard-section-container .thumbnail-card__wrapper.thumbnail-card__wrapper--active {
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
}
.main-content__body.no-scrolling .thumbnail-card__wrapper:hover .thumbnail-card__title, .main-content__body.no-scrolling .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__title,
.project-group .thumbnail-card__wrapper:hover .thumbnail-card__title,
.project-group .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__title,
.dashboard-section-container .thumbnail-card__wrapper:hover .thumbnail-card__title,
.dashboard-section-container .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__title {
  color: var(--op-color-neutral-on-plus-six);
}
.main-content__body.no-scrolling .thumbnail-card__wrapper:hover .thumbnail-card__description, .main-content__body.no-scrolling .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__description,
.project-group .thumbnail-card__wrapper:hover .thumbnail-card__description,
.project-group .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__description,
.dashboard-section-container .thumbnail-card__wrapper:hover .thumbnail-card__description,
.dashboard-section-container .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__description {
  color: var(--op-color-neutral-on-plus-six-alt);
}
.main-content__body.no-scrolling .thumbnail-card__wrapper:hover .thumbnail-card__metadata-row .material-symbols-outlined,
.main-content__body.no-scrolling .thumbnail-card__wrapper:hover .thumbnail-card__metadata-row .custom-icons, .main-content__body.no-scrolling .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__metadata-row .material-symbols-outlined,
.main-content__body.no-scrolling .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__metadata-row .custom-icons,
.project-group .thumbnail-card__wrapper:hover .thumbnail-card__metadata-row .material-symbols-outlined,
.project-group .thumbnail-card__wrapper:hover .thumbnail-card__metadata-row .custom-icons,
.project-group .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__metadata-row .material-symbols-outlined,
.project-group .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__metadata-row .custom-icons,
.dashboard-section-container .thumbnail-card__wrapper:hover .thumbnail-card__metadata-row .material-symbols-outlined,
.dashboard-section-container .thumbnail-card__wrapper:hover .thumbnail-card__metadata-row .custom-icons,
.dashboard-section-container .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__metadata-row .material-symbols-outlined,
.dashboard-section-container .thumbnail-card__wrapper.thumbnail-card__wrapper--active .thumbnail-card__metadata-row .custom-icons {
  color: var(--op-color-neutral-on-plus-six-alt);
}

.thumbnail-card__thumbnail-image {
  min-width: var(--thumbnail-width);
  width: var(--thumbnail-width);
  height: var(--thumbnail-height);
  border: var(--op-border-width-large) solid var(--op-color-neutral-plus-four);
  border-radius: var(--op-radius-large);
  background: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-plus-two);
  object-fit: cover;
  position: relative;
}
.thumbnail-card__thumbnail-image.thumbnail-card__thumbnail-image--empty:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumbnail-card__thumbnail-image.thumbnail-card__thumbnail-image--group {
  border: none;
  background-color: var(--op-color-primary-plus-six);
}

.thumbnail-card__play-button, .thumbnail-card__group-play-button {
  background-image: url("/assets/play_button-930b58e7.svg");
  position: absolute;
  top: 0;
  width: var(--thumbnail-width);
  height: var(--thumbnail-height);
}

.thumbnail-card__group-play-button {
  background-image: url("/assets/group_play_button-22155de8.svg");
}

.thumbnail-card__actions-wrapper {
  display: flex;
  align-items: center;
  gap: var(--op-space-medium);
  width: 100%;
  justify-content: space-between;
}

.thumbnail-card__actions {
  display: flex;
  align-items: flex-end;
  gap: var(--op-space-x-small);
  opacity: 0;
}

.thumbnail-card__actions--visible {
  opacity: 1;
}

.thumbnail-card__title-label {
  font-size: var(--op-font-large);
}

span.thumbnail-card__button-text {
  color: var(--op-color-neutral-on-plus-four);
  background-repead: no-repeat;
}

.thumbnail-card__content {
  display: flex;
  width: 100%;
  gap: var(--op-space-small);
  justify-content: space-between;
  overflow: hidden;
}

.thumbnail-card__container-grid {
  --card-width: 30rem;
  --grid-thumbnail-height: 21rem;
  padding: var(--op-space-large);
  width: 100%;
  display: inline-grid;
  justify-content: center;
  gap: var(--op-space-large);
  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
}
.thumbnail-card__container-grid .thumbnail-card__wrapper {
  box-shadow: var(--op-border-all) var(--op-color-border) !important;
  border-radius: var(--op-radius-large);
  overflow: hidden;
  min-width: var(--card-width);
}
.thumbnail-card__container-grid .thumbnail-card__wrapper:hover {
  background-color: var(--op-color-neutral-plus-eight) !important;
}
.thumbnail-card__container-grid .thumbnail-card__wrapper {
  padding: 0;
}
.thumbnail-card__container-grid .thumbnail-card__wrapper .thumbnail-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}
.thumbnail-card__container-grid .thumbnail-card__wrapper .thumbnail-card__thumbnail-image {
  border: none;
  border-radius: var(--op-radius-large) var(--op-radius-large) 0 0;
  width: 100%;
  min-height: var(--grid-thumbnail-height);
  height: var(--grid-thumbnail-height);
}
.thumbnail-card__container-grid .thumbnail-card__wrapper .thumbnail-card__play-button, .thumbnail-card__container-grid .thumbnail-card__wrapper .thumbnail-card__group-play-button {
  width: 100%;
  height: var(--grid-thumbnail-height);
  max-width: var(--card-width);
  background-image: url("/assets/play_button_grid-384ea210.svg");
  background-size: var(--card-width) 21rem;
  left: calc(50% - var(--card-width) / 2);
}
.thumbnail-card__container-grid .thumbnail-card__wrapper .thumbnail-card__group-play-button {
  background-image: url("/assets/group_play_button_grid-c5b9b455.svg");
}
.thumbnail-card__container-grid .thumbnail-card__wrapper .thumbnail-card__header, .thumbnail-card__container-grid .thumbnail-card__wrapper .thumbnail-card__content {
  padding: var(--op-space-medium);
}
.thumbnail-card__container-grid .thumbnail-card__wrapper .thumbnail-card__content {
  gap: var(--op-space-medium);
  justify-content: space-between;
  height: 100%;
  overflow: auto;
}
.thumbnail-card__container-grid .thumbnail-card__wrapper .thumbnail-card__description {
  white-space: unset;
  text-overflow: unset;
  overflow: unset;
}
.thumbnail-card__container-grid .thumbnail-card__wrapper .thumbnail-card__actions-wrapper {
  gap: 0;
}
.thumbnail-card__container-grid .thumbnail-card__wrapper .thumbnail-card__actions-wrapper .thumbnail-card__actions {
  height: 100%;
}

/* --op-breakpoint-small */
@media (max-width: 768px) {
  .thumbnail-card__wrapper {
    padding: var(--op-space-small);
    display: flex;
    border-bottom: var(--op-border-width) solid var(--op-color-border);
  }
  .thumbnail-card {
    gap: var(--op-space-small) 0;
    display: grid;
    grid-area-rows: 1fr 1fr;
  }
  .thumbnail-card .thumbnail-card__title-container,
  .thumbnail-card .thumbnail-card__header {
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
  }
  .thumbnail-card .thumbnail-card__metadata-row {
    flex-wrap: wrap;
    gap: var(--op-space-x-small);
  }
  .thumbnail-card .thumbnail-card__metadata {
    border-radius: var(--op-radius-pill);
    background: var(--op-color-neutral-plus-five);
    padding: var(--op-space-2x-small) var(--op-space-x-small);
    white-space: nowrap;
  }
  .thumbnail-card .thumbnail-card__thumbnail {
    grid-area: top-left;
  }
  .thumbnail-card .thumbnail-card__content {
    flex-direction: column;
    grid-area: bottom-left/bottom-left/bottom-right/bottom-right;
  }
  .thumbnail-card .thumbnail-card__actions {
    justify-content: flex-end;
    opacity: 1;
  }
  .thumbnail-card .thumbnail-card__thumbnail-image, .thumbnail-card .thumbnail-card__play-button, .thumbnail-card .thumbnail-card__group-play-button {
    transform: translateX(calc(var(--op-space-large) * -1));
  }
  .thumbnail-card .thumbnail-card__thumbnail-image {
    border: var(--op-border-width) solid var(--op-color-primary-base);
  }
}
.user-setting .user-setting__name {
  font-size: var(--op-font-medium);
  color: var(--op-color-surface-complement);
}
.user-setting .user-setting__name.user-setting__name--small {
  font-size: var(--op-font-small);
}
.user-setting .user-setting__description {
  color: var(--op-color-surface-complement-alt);
  font-size: var(--op-font-x-small);
}

.credit-usage-cards {
  --min-width: 18rem;
  display: grid;
  gap: var(--op-space-small);
  grid-template-columns: repeat(auto-fit, minmax(var(--min-width), auto));
}
@media (max-width: 1225px) {
  .credit-usage-cards {
    grid-template-columns: repeat(2, auto);
  }
}

.credit-usage-card {
  contain: none;
  height: 100%;
}

.credit-usage-chart {
  position: relative;
  height: 100%;
  width: 100%;
  margin-top: var(--op-space-large);
}

.credit-usage-chart__title {
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-neutral-on-plus-eight);
}

.credit-usage-chart__subtitle {
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
}

.credit-usage-chart__filter {
  --filter-input-width: 10rem;
  width: var(--filter-input-width);
}

.credit-usage-card__warning-icon {
  color: var(--op-color-alerts-warning-base);
}

.total-credits-widget {
  height: 100%;
}
.total-credits-widget .total-credits-widget__header {
  display: flex;
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-neutral-on-plus-seven);
}
.total-credits-widget .total-credits-widget__subheader {
  display: flex;
  width: 100%;
  justify-content: space-between;
  color: var(--op-color-neutral-on-plus-seven-alt);
}
.total-credits-widget .total-credits-widget__body {
  --chart-body-height: 20vh;
  max-height: var(--chart-body-height);
  overflow-y: auto;
}
.total-credits-widget .total-credits-widget__item {
  color: var(--op-color-neutral-on-plus-seven);
}
.total-credits-widget .total-credits-widget__value {
  color: var(--op-color-neutral-on-plus-seven);
  font-weight: var(--op-font-weight-semi-bold);
}
.total-credits-widget .total-credits-widget__value.total-credits-widget__value--large {
  font-size: var(--op-font-x-large);
}
.total-credits-widget .total-credits-widget__footer-message {
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-seven-alt);
}

.payment-method-callout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--op-space-small);
  color: var(--op-color-neutral-on-plus-five);
  background-color: var(--op-color-alerts-warning-plus-five);
  padding: var(--op-space-small) var(--op-space-medium);
  border-radius: var(--op-radius-large);
}
.payment-method-callout .product-name {
  font-weight: var(--op-font-weight-bold);
}

.company-details {
  display: grid;
  grid-template-columns: 1fr var(--op-space-3x-large);
  align-items: center;
}
.company-details .company-details__content {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: var(--op-space-large);
  /* --op-breakpoint-medium */
}
@media (max-width: 1024px) {
  .company-details .company-details__content {
    grid-template-columns: repeat(2, 1fr);
  }
}

.integration-card-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: start;
  grid-gap: var(--op-space-medium);
}
.integration-card-header h2 {
  margin: 0px;
}
.integration-card-header .integration-card-header__start {
  display: flex;
  gap: var(--op-space-2x-small);
  align-items: center;
}
.integration-card-header .integration-card-header__middle {
  width: 100%;
}
.integration-card-header .integration-card-header__end .integration-status {
  display: flex;
  border-radius: var(--op-radius-x-large);
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-x-small);
  padding: var(--op-space-2x-small) var(--op-space-small);
  margin: 0px;
}
.integration-card-header .integration-card-header__end .integration-status--connected {
  color: var(--op-color-alerts-notice-on-minus-one);
  background-color: var(--op-color-alerts-notice-minus-one);
}
.integration-card-header .integration-card-header__end .integration-status--connection-issue {
  color: var(--op-color-alerts-warning-on-plus-two);
  background-color: var(--op-color-alerts-warning-plus-two);
}
.integration-card-header .integration-card-header__end .integration-status--not-connected {
  color: var(--op-color-alerts-danger-on-base);
  background-color: var(--op-color-alerts-danger-base);
}

.card--administration .card__footer .btn--link {
  text-decoration: none;
}
.card--administration .card__footer p {
  margin: 0;
}

.aspire-integration-card-logo {
  --op-aspire-integration-card-logo-url: url("/assets/aspire-svg-5e05e582.svg");
  --op-aspire-logo-width: 130px;
  background-image: var(--op-aspire-integration-card-logo-url);
  background-size: cover;
  width: var(--op-aspire-logo-width);
}

.go-ilawn-integration-card-logo {
  --op-go-ilawn-integration-card-logo-url: url("/assets/go-ilawn-icon-20b6693d.png");
  --op-go-ilawn-logo-width: 100px;
  background-image: var(--op-go-ilawn-integration-card-logo-url);
  width: var(--op-go-ilawn-logo-width);
}

.landone-integration-card-logo {
  --op-landone-integration-card-logo-url: url("/assets/landone-svg-57f0b175.svg");
  --op-landone-logo-width: 100px;
  background-image: var(--op-landone-integration-card-logo-url);
  background-size: cover;
  width: var(--op-landone-logo-width);
}

.landone-integration-timestamp {
  color: var(--op-color-primary-minus-five);
}

.integration-card-logo {
  --op-integration-logo-height: 53px;
  height: var(--op-integration-logo-height);
}

.integration-card__button-spinner {
  display: flex;
  scale: -1 1;
}
.integration-card__button-spinner.animate-spin {
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme-mode=light]) .aspire-integration-card-logo {
    --op-aspire-integration-card-logo-url: url("/assets/aspire-svg-white-text-776ec7f1.svg");
  }
}
:root[data-theme-mode=dark] .aspire-integration-card-logo {
  --op-aspire-integration-card-logo-url: url("/assets/aspire-svg-white-text-776ec7f1.svg");
}

.stripe-payment-element:not(.modal__body) {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}

.stripe-payment-element {
  --op-spinner-diameter: 10rem;
}
.stripe-payment-element .error-message {
  text-align: center;
  color: var(--op-color-alerts-danger-base);
  margin-top: var(--op-space-medium) 0 0 0;
  border: none;
}
.stripe-payment-element .loading__message {
  display: none;
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-light);
}
.stripe-payment-element .loading__message--visible .loading__message {
  display: block;
}

.feature-flags {
  display: flex;
  gap: var(--op-space-2x-small);
}

.feature-flag-group {
  display: flex;
  flex-basis: 100%;
}
.feature-flag-group .feature-flag-group__items {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  flex-grow: 1;
  border-color: var(--op-color-border);
  border-radius: var(--op-radius-large);
  border-style: solid;
  margin: 0;
}
.feature-flag-group .feature-flag-group__items.feature-flag-group--warning {
  border-color: var(--op-color-alerts-warning-plus-four);
}

.account-settings .disabled {
  pointer-events: none;
}
.account-settings .card__body .form-group {
  padding: 0;
  margin-bottom: var(--space-md);
  width: 100%;
}

.account-settings__logo-upload-area {
  --logo-max-width: 30rem;
  display: flex;
  gap: var(--op-space-x-large);
}
.account-settings__logo-upload-area button,
.account-settings__logo-upload-area label {
  font-weight: var(--op-font-weight-medium);
}

.account-settings__logo-preview {
  max-width: var(--logo-max-width);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--op-space-small);
  aspect-ratio: 2/1;
  padding: var(--op-space-small);
  box-shadow: var(--op-border-all) var(--op-color-primary-plus-five);
  border-radius: var(--op-radius-medium);
}
.account-settings__logo-preview .logo-preview__heading {
  font-size: var(--op-font-medium);
}
.account-settings__logo-preview .logo-preview__subheading {
  font-size: var(--op-font-x-small);
}

.account-settings__logo-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--op-space-small);
  padding-top: var(--op-space-x-small);
  padding-bottom: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
}
.account-settings__logo-actions .logo-actions__text {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}
.account-settings__logo-actions .logo-actions__text .logo-actions__header {
  display: flex;
  gap: var(--op-space-small);
  align-items: center;
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-medium);
}
.account-settings__logo-actions .logo-actions__text .logo-actions__header .logo-actions__size-limit-text {
  color: var(--op-color-neutral-on-plus-eight-alt);
  font-size: var(--op-font-small);
}
.account-settings__logo-actions .logo-actions__text .logo-actions__subheading {
  color: var(--op-color-neutral-on-plus-eight-alt);
  font-size: var(--op-font-small);
}
.account-settings__logo-actions .form-group {
  gap: 0;
  grid-template-columns: none;
  padding: 0;
}
.account-settings__logo-actions .confirm-delete-text {
  font-size: var(--op-font-small);
}

.account-settings__logo-filename {
  font-size: var(--op-font-x-small);
  width: var(--logo-max-width);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--op-space-x-small);
  line-height: normal;
}

.invoices {
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  padding-top: var(--op-space-x-small);
}

.invoice__row {
  background: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-five);
  padding: var(--op-space-x-small) var(--op-space-small);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  border-radius: var(--op-radius-large);
  display: grid;
  grid-template-columns: 4fr 3fr 3fr 1fr;
  align-items: center;
}
.invoice__row:hover {
  background: var(--op-color-neutral-plus-four);
  color: var(--op-color-primary-on-plus-eight);
}
.invoice__row .invoice__date {
  color: var(--op-color-neutral-on-plus-five-alt);
}
.invoice__row .invoice__total {
  color: var(--op-color-primary-on-plus-five);
}
.invoice__row .invoice__actions {
  display: flex;
  gap: var(--op-space-2x-small);
  align-items: center;
}
.invoice__row .invoice__actions a {
  color: var(--op-color-primary-on-plus-max);
}

.aspire-panel {
  height: 100%;
  overflow-y: auto;
}
.aspire-panel .markup-panel__header {
  cursor: pointer;
  user-select: none;
  /* prevents user from selecting text */
  list-style: none;
  justify-content: space-between;
  display: flex;
  padding: 0 var(--op-space-small);
  border-top: var(--op-border-width) solid var(--op-color-border);
}
.aspire-panel .markup-panel__header::-webkit-details-marker {
  display: none;
}

.aspire-panel__body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}

details .markup-panel__header--open {
  display: none;
}
details[open] .markup-panel__header--open {
  display: inline;
}
details[open] .markup-panel__header--closed {
  display: none;
}

.aspire-panel__value-toggle {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  margin-bottom: var(--op-space-large);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .aspire-panel__value-toggle {
    flex-direction: column;
    margin-bottom: var(--op-space-small);
  }
}

.aspire-panel__takeoff-note-content {
  font-size: var(--op-font-x-small);
  background-color: var(--op-color-primary-plus-six);
  color: var(--op-color-primary-on-plus-six);
  padding: var(--op-space-small);
  border-radius: var(--op-radius-medium);
}

.aspire-panel__sync-button::part(label) {
  display: flex;
  align-items: center;
}

.aspire-panel__sync-button::part(base) {
  width: var(--op-space-3x-large);
}

.aspire-panel__configure-sync-button-text {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  font-size: var(--op-font-x-small);
}

.aspire-panel__unlink-from-aspire-warning {
  font-weight: var(--op-font-weight-bold);
}

.aspire-panel__bulk-actions {
  border-block: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  padding: var(--op-space-small) var(--op-space-x-large);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-eight);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .aspire-panel__bulk-actions {
    gap: var(--op-space-x-small);
    padding: var(--op-space-small) 0px;
    border-block: none;
  }
  .aspire-panel__bulk-actions sl-button {
    width: 33%;
  }
}

.aspire-panel__footer-actions {
  padding: var(--op-space-small) var(--op-space-x-large);
}

.aspire-panel__material {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .aspire-panel__material {
    background: var(--op-color-neutral-plus-eight);
    border-radius: var(--op-radius-large);
    padding: var(--op-space-x-small);
    display: flex;
    flex-direction: column;
    gap: var(--op-space-x-small);
  }
  .aspire-panel__material .disabled {
    opacity: 0.44;
  }
  .aspire-panel__material .aspire-panel__association_button::part(base) {
    box-shadow: none;
  }
  .aspire-panel__material .catalog-item__name {
    font-weight: var(--op-font-weight-normal);
  }
  .aspire-panel__material .catalog-item__quantity-message {
    font-size: var(--op-font-x-small);
  }
}

sl-button.aspire-panel__association-button::part(label) {
  display: flex;
  gap: var(--op-space-x-small);
  width: 100%;
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-six);
}
sl-button.aspire-panel__association-button::part(base) {
  box-shadow: none;
}

.aspire-panel__association-button__selectable-type {
  color: var(--op-color-neutral-on-plus-six-alt);
}

.aspire-panel__group {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .aspire-panel__group div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-x-small);
  }
}

.aspire-panel__option {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .aspire-panel__option {
    background: var(--op-color-neutral-plus-five);
    border-radius: var(--op-radius-large);
    padding: var(--op-space-small) var(--op-space-large);
  }
}

.aspire-panel__react-select .react-select__control {
  --select-width: 22rem;
  --select-height: 3.2rem;
  width: var(--select-width);
  min-height: unset;
  height: var(--select-height);
  border-radius: var(--op-radius-medium);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  background-color: var(--op-color-neutral-plus-eight);
  padding: 0 var(--op-space-small);
  font-size: var(--op-font-x-small);
}
.aspire-panel__react-select .react-select__control.aspire-panel__bulk-select-control {
  width: 100%;
}
.aspire-panel__react-select .react-select__control:hover {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight);
}
.aspire-panel__react-select .react-select__control:hover .react-select__placeholder {
  color: var(--op-color-neutral-on-plus-eight);
}
.aspire-panel__react-select .react-select__control.react-select__control--is-focused {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight);
  border: var(--op-border-width) solid var(--op-color-primary-minus-two);
}
.aspire-panel__react-select .react-select__control.react-select__control--is-disabled {
  opacity: 0.65;
}
.aspire-panel__react-select .react-select__control.react-select__control--is-disabled .react-select__input-container {
  visibility: visible;
}
.aspire-panel__react-select .react-select__control {
  /* --op-breakpoint-small */
}
@media (width > 768px) {
  .aspire-panel__react-select .react-select__control.react-select__control--menu-is-open {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}
.aspire-panel__react-select {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .aspire-panel__react-select .react-select__control {
    width: 100%;
    height: unset;
    font-size: var(--op-font-medium);
    padding: var(--op-space-small) var(--op-space-medium);
    gap: var(--op-space-x-small);
    border-radius: var(--op-radius-large);
  }
  .aspire-panel__react-select .react-select__control .react-select__indicators {
    display: none;
  }
  .aspire-panel__react-select .react-select__control .icon {
    color: var(--op-color-neutral-on-plus-max-alt);
  }
  .aspire-panel__react-select .react-select__control .react-select__placeholder {
    display: flex;
    gap: var(--op-space-x-small);
    align-items: center;
  }
}

.react-select__menu-portal.aspire-panel__menu-portal {
  z-index: 9999 !important;
}

.react-select__menu.aspire-panel__menu {
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
  border-bottom-right-radius: var(--op-radius-medium);
  border-bottom-left-radius: var(--op-radius-medium);
  border: var(--op-border-width) solid var(--op-color-primary-minus-two);
  border-top: 0;
}
.react-select__menu.aspire-panel__menu.aspire-panel__bulk-select-menu {
  position: relative;
}
.react-select__menu.aspire-panel__menu .react-select__group {
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.react-select__menu.aspire-panel__menu .react-select__group:not(:last-child) .react-select__option:last-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.react-select__menu.aspire-panel__menu .react-select__group-heading {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-neutral-on-plus-eight-alt);
  padding: var(--op-space-x-small) var(--op-space-small);
}
.react-select__menu.aspire-panel__menu .react-select__option {
  padding: var(--op-space-x-small) var(--op-space-small);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-eight);
}
.react-select__menu.aspire-panel__menu .react-select__option.react-select__option--is-selected {
  background-color: var(--op-color-primary-minus-three);
  color: var(--op-color-neutral-plus-max);
}
.react-select__menu.aspire-panel__menu {
  /* --op-breakpoint-small */
}
@media (width > 768px) {
  .react-select__menu.aspire-panel__menu.react-select__option--is-focused:not(.react-select__option--is-selected) {
    background-color: var(--op-color-neutral-plus-seven);
  }
  .react-select__menu.aspire-panel__menu:last-child {
    border-bottom-right-radius: var(--op-radius-small);
    border-bottom-left-radius: var(--op-radius-small);
  }
}
.react-select__menu.aspire-panel__menu {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .react-select__menu.aspire-panel__menu {
    border: none;
    border-radius: var(--op-border-radius-large);
    margin-top: var(--op-space-small);
  }
  .react-select__menu.aspire-panel__menu .react-select__menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-x-small);
  }
}

.aspire-panel__material-table {
  background-color: var(--op-color-neutral-plus-eight);
  border: var(--op-border-width) solid var(--op-color-border);
  border-collapse: collapse;
}
.aspire-panel__material-table th,
.aspire-panel__material-table td {
  padding: var(--op-space-x-small) var(--op-space-small);
  font-size: var(--op-font-small);
}
.aspire-panel__material-table th {
  border-bottom: var(--op-border-width) solid var(--op-color-border);
  color: var(--op-color-neutral-on-plus-eight);
  text-align: left;
  font-weight: var(--op-font-weight-semi-bold);
  background-color: var(--op-color-neutral-plus-six);
}
.aspire-panel__material-table td {
  border-bottom: var(--op-border-width) solid var(--op-color-border);
  text-align: top;
}
.aspire-panel__material-table .form__checkbox {
  min-width: var(--op-space-medium);
}
.aspire-panel__material-table tr th:first-child,
.aspire-panel__material-table tr td:first-child {
  --checkbox-column-width: 2rem;
  border-right: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  width: var(--checkbox-column-width);
}
.aspire-panel__material-table tr.disabled {
  opacity: 0.65;
}
.aspire-panel__material-table tr.disabled .aspire-panel__react-select .react-select__control.react-select__control--is-disabled {
  opacity: 1;
}

.aspire_panel__disabled-attribute {
  border-bottom: var(--op-border-width) dotted var(--op-color-neutral-on-plus-eight-alt);
}

.link-to-aspire__name {
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-small);
}

.link-to-aspire__section-name {
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-small);
}

.aspire-sync-mode-text {
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-medium);
  margin: 0;
}

.catalog-item-units {
  font-size: var(--op-font-x-small);
}

.association-mapping__row:hover .association-mapping__row-action {
  --table-row-action: calc(var(--op-size-unit) * 9.25); /*37px*/
  width: var(--table-row-action);
  margin-left: var(--op-space-x-small);
}
.association-mapping__row .association-mapping__row-action {
  transition: width 300ms ease, margin-left 300ms ease;
  width: 0;
  overflow: hidden;
}

.bottom-nav-rail {
  --nav-button-width: 1fr;
  display: grid;
  grid-template-columns: repeat(5, var(--nav-button-width));
  padding-bottom: var(--op-space-small);
  height: var(--pi-bottom-nav-rail-height);
  background-color: var(--op-color-neutral-plus-max);
  width: 100%;
  /* --op-breakpoint-small */
}
@media (min-width: 768px) {
  .bottom-nav-rail {
    display: none;
  }
}
.bottom-nav-rail .bottom-nav-rail__item {
  position: relative;
  font-size: var(--op-font-small);
  line-height: normal;
  border-radius: 0 0 var(--op-radius-large) var(--op-radius-large);
  color: var(--op-color-neutral-on-plus-eight);
  padding: var(--op-space-medium) var(--op-space-x-small);
  margin: 0;
  gap: var(--op-space-2x-small);
  align-items: center;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  height: 100%;
}
.bottom-nav-rail .bottom-nav-rail__item .bottom-nav-rail__item-label {
  font-size: var(--op-font-x-small);
}
.bottom-nav-rail .bottom-nav-rail__item:visited, .bottom-nav-rail .bottom-nav-rail__item:focus {
  color: var(--op-color-neutral-on-plus-eight);
}
.bottom-nav-rail .bottom-nav-rail__item:hover {
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
}
.bottom-nav-rail .bottom-nav-rail__item.active {
  background: var(--op-color-primary-plus-six);
  color: var(--op-color-primary-on-plus-six);
}
.bottom-nav-rail .bottom-nav-rail__item.active::before {
  --op-sidebar__nav-item-active-mark-highlight: 0px 1px 1px 0px --op-color-primary-minus-three inset;
  content: "";
  background-color: var(--op-color-primary-minus-one);
  height: var(--op-space-2x-small);
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 0 0 var(--op-radius-medium) var(--op-radius-medium);
  box-shadow: var(--op-sidebar__nav-item-active-mark-highlight);
}
.bottom-nav-rail .bottom-nav-rail__item sl-drawer::part(body) {
  background: var(--op-color-neutral-plus-max);
}
.bottom-nav-rail .bottom-nav-rail__item .sidebar__stripe-trial-timer .wrap {
  border: unset;
  box-shadow: unset;
}
.bottom-nav-rail .sidebar__header {
  background-position: left;
}
.bottom-nav-rail .bottom-nav-rail__more-panel {
  display: flex;
  flex-direction: column;
  padding: var(--op-space-medium) var(--op-space-large) var(--op-space-large);
  justify-content: space-between;
  height: 100%;
}

.bulk-order-panel__detail-row {
  display: flex;
  gap: var(--op-space-small);
}

.modal__content.bulk-order__upload {
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.bulk-order__upload-progress {
  display: flex;
  flex-direction: column;
}
.bulk-order__upload-progress .bulk-order__upload-progress-stage {
  display: flex;
  border: var(--op-border-width) solid var(--op-color-neutral-plus-eight);
  border-radius: var(--op-radius-medium);
  gap: var(--op-space-x-small);
  padding: var(--op-space-x-small) var(--op-space-small);
  background-color: var(--op-color-neutral-plus-eight);
  align-items: center;
}
.bulk-order__upload-progress .bulk-order__upload-progress-stage-connector {
  width: var(--op-space-large);
  border-right: var(--op-border-width) dashed var(--op-color-neutral-plus-two);
}

.bulk-order-address {
  display: flex;
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  border-radius: var(--op-radius-large);
  gap: var(--op-space-medium);
  padding: var(--op-space-small) var(--op-space-small);
  background-color: var(--op-color-neutral-plus-max);
  align-items: center;
}
.bulk-order-address.bulk-order-address--unverified {
  border: var(--op-border-width) solid var(--op-color-alerts-danger-base);
  padding: var(--op-space-x-small) var(--op-space-small);
  background-color: var(--op-color-alerts-danger-plus-eight);
}
.bulk-order-address.bulk-order-address--no-boundary {
  border: var(--op-border-width) solid var(--op-color-alerts-warning-plus-two);
  padding: var(--op-space-x-small) var(--op-space-small);
  background-color: var(--op-color-alerts-warning-plus-seven);
}
.bulk-order-address .bulk-order-address__contents {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-eight);
}
.bulk-order-address .bulk-order-address__contents .bulk-order-address__start {
  display: flex;
  gap: var(--op-space-x-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.bulk-order-address .bulk-order-address__contents .bulk-order-address__end {
  display: flex;
  align-items: center;
  color: var(--op-color-neutral-on-plus-max);
  gap: var(--op-space-medium);
}

.bulk-order-subfooter__subtotal {
  display: flex;
  align-items: center;
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-large);
  gap: var(--op-space-3x-small);
}

.bulk-order-addresses {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
  padding: 0 var(--op-space-x-large);
}
.estimate-request__details-panel .bulk-order-addresses {
  padding: 0;
}

.bulk-order__upload-btn {
  --upload-button-width: 180px;
  width: var(--upload-button-width);
}

.bulk-order-step__header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: var(--op-font-medium);
  color: var(--op-color-neutral-on-plus-eight);
  text-align: left;
}
.bulk-order-step__header .bulk-order-step__header-start {
  display: flex;
  gap: var(--op-space-small);
  align-items: center;
}
.bulk-order-step__header .bulk-order-step__number {
  text-align: left;
  color: var(--op-color-neutral-on-plus-eight-alt);
  font-size: var(--op-font-2x-large);
}
.bulk-order-step__header .bulk-order-step__heading {
  font-weight: var(--op-font-weight-semi-bold);
}

.bulk-order-step__content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--op-space-x-small);
}
.bulk-order-step__content.bulk-order-step__content--indented {
  padding-inline: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
}
.bulk-order-step__content .bulk-order-step__button-wrapper {
  align-items: end;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}

.bulk-order-step__text-area {
  width: 100%;
  resize: none;
  border: var(--op-border-width) solid var(--op-color-border);
  padding: var(--op-space-x-small) var(--op-space-small);
  border-radius: var(--op-radius-medium);
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-minus-four);
}
.bulk-order-step__text-area:focus {
  box-shadow: none;
}

.bulk-order-step__hint {
  color: var(--op-color-alerts-info-on-plus-eight-alt);
  font-size: var(--op-font-x-small);
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
}

.bulk-order-step__note {
  color: var(--op-color-primary-minus-three);
  font-size: var(--op-font-x-small);
  text-align: right;
}
.bulk-order-step__note.bulk-order-step__note--danger {
  color: var(--op-color-alerts-danger-on-plus-eight-alt);
}
.bulk-order-step__note.bulk-order-step__note--warning {
  color: var(--op-color-alerts-warning-on-plus-eight-alt);
}

.edit-bulk-order-modal__widget-total {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
.edit-bulk-order-modal__widget-total .widget-total__subtext {
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-seven-alt);
}
.edit-bulk-order-modal__widget-total .widget-total__cost-adjustment-text {
  color: var(--op-color-primary-on-plus-max-alt);
}

:root {
  --empty-state-vertical-padding: calc(var(--op-space-scale-unit) * 12);
  --empty-state-img-width: calc(var(--op-space-scale-unit) * 28);
}

.empty-state__container {
  display: grid;
  gap: var(--op-space-medium);
  justify-content: center;
  padding-top: var(--empty-state-vertical-padding);
  padding-bottom: var(--empty-state-vertical-padding);
  opacity: 0.8;
}
.empty-state__container > img {
  justify-self: center;
  width: var(--empty-state-img-width);
  height: auto;
}
.empty-state__container.empty-state__container__no-top-padding {
  padding-top: 0px;
}
.empty-state__container.empty-state__container__no-image {
  padding-top: var(--op-space-x-large);
  padding-bottom: var(--op-space-x-large);
  display: block;
}
.empty-state__container {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .empty-state__container {
    padding-inline: var(--op-space-large);
    padding-top: var(--op-space-2x-large);
    opacity: 1;
  }
}

.empty-state__text-block {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}

.empty-state__heading {
  display: flex;
  font-size: var(--op-font-3x-large);
  justify-content: center;
}

.empty-state__subheading {
  display: flex;
  font-size: var(--op-font-medium);
  justify-content: center;
}

html:has(.error-page-body) {
  height: 100%;
}

body.error-page-body {
  --text-max-width: 480px;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: var(--op-space-medium);
  background-color: var(--op-color-neutral-plus-six);
  font-family: var(--op-font-family);
}
body.error-page-body img {
  --image-width: 340px;
  max-width: var(--image-width);
}
body.error-page-body h1 {
  margin: 0;
  color: var(--op-color-neutral-on-plus-eight-alt);
  font-weight: var(--op-font-weight-bold);
  text-align: center;
  font-size: var(--op-font-3x-large);
}
body.error-page-body span {
  text-align: center;
  font-size: var(--op-font-x-large);
  max-width: var(--text-max-width);
}
body.error-page-body a {
  font-size: var(--op-font-x-large);
  color: var(--op-color-primary-on-plus-eight-alt);
}
body.error-page-body .container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--op-space-medium);
  height: 100%;
  align-items: center;
}
body.error-page-body .content {
  display: flex;
  flex-direction: column;
  height: 80%;
  justify-content: center;
  gap: var(--op-space-medium);
  align-items: center;
}
body.error-page-body .quote {
  text-align: center;
  font-size: var(--op-font-medium);
  color: var(--op-color-neutral-on-plus-eight-alt);
}
body.error-page-body .quote-reference {
  text-align: center;
}

.file-attachment__rejection-message {
  color: var(--op-color-alerts-danger-on-plus-seven-alt);
  font-size: var(--op-font-x-small);
}

.file-attachment__drop-target {
  --file-attachment-drop-target-vertical-padding: 32px;
  border: var(--op-border-width-large) dashed var(--op-color-neutral-plus-four);
  padding: var(--file-attachment-drop-target-vertical-padding) var(--op-space-medium);
  background: var(--op-color-neutral-plus-eight);
  border-radius: var(--op-border-radius-large);
}

.file-attachment__drop-target--rejected {
  border-color: var(--op-color-alerts-danger-minus-one);
}

.footer {
  padding: var(--op-space-medium) var(--op-space-3x-large) var(--op-space-medium) var(--op-space-3x-large);
  border-top: var(--op-border-width) solid var(--op-color-border);
}
.footer.hidden {
  display: none;
}

.footer--padding-small {
  padding: var(--op-space-medium) var(--op-space-large) var(--op-space-medium) var(--op-space-large);
}

.footer__two-buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.highlight-diff__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.highlight-diff__wrapper .highlight-diff__label {
  font-size: var(--op-font-x-small);
}
.highlight-diff__wrapper sl-switch::part(base) {
  gap: 0;
}
.highlight-diff__wrapper {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .highlight-diff__wrapper {
    flex-shrink: 0;
    flex-grow: 1;
    background: var(--op-color-neutral-plus-seven);
    border-radius: var(--op-radius-large);
    display: flex;
    padding: var(--op-space-x-small) var(--op-space-small);
    align-items: center;
    gap: var(--op-space-x-small);
    align-self: stretch;
    font-size: var(--op-font-small);
    font-weight: var(--op-font-weight-normal);
  }
  .highlight-diff__wrapper .highlight-diff__label {
    font-size: var(--op-font-small);
  }
}

.insights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--op-space-large);
  /* --op-breakpoint-medium */
}
@media (max-width: 1024px) {
  .insights {
    grid-template-columns: 1fr;
  }
}

.insight-header .form-group {
  padding: 0;
}
.insight-header .ts-control > input {
  min-width: 0;
}
.insight-header .form-control-input {
  display: flex;
}
.insight-header .ts-wrapper.input-active > .ts-control input {
  --min-width: 12rem;
}
.insight-header .ts-wrapper.input-active > .ts-control > .item {
  display: none;
}

.insight {
  background: var(--op-color-neutral-plus-seven);
  color: var(--op-color-neutral-on-plus-seven);
}
.insight .insights__subheader {
  display: flex;
  gap: var(--op-space-x-small);
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.insight .insights__subheader .subheader__start,
.insight .insights__subheader .subheader__end {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.insight .insight__body {
  padding: var(--op-space-large) 0;
  display: flex;
  justify-content: center;
}
.insight .insight__date::part(input) {
  --insight__date-input-width: 13em;
  max-width: var(--insight__date-input-width);
}
.insight .insight__graph {
  --pi-graph-padding-size: 50px;
  margin: var(--pi-graph-padding-size);
  text-align: center;
}
.insight .insight__graph__container {
  --pi-graph-container-padding: var(--op-space-small);
  position: relative;
  height: 100%;
  width: calc(100% - var(--pi-graph-container-padding) * 2);
}
.insight .insight__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  padding: var(--op-space-x-small) var(--op-space-small);
}

.insight-modal .insight__graph__container {
  --pi-card-body-height: 50rem;
  --pi-graph-container-padding: var(--op-space-3x-large);
  padding: var(--op-space-x-large) 0px;
  min-height: var(--pi-card-body-height);
}

.insight-filter .ts-wrapper .ts-control {
  min-height: var(--op-input-height-small);
}
.insight-filter .ts-wrapper .ts-control .item {
  overflow: hidden;
  margin-inline-end: var(--op-space-medium);
}
.insight-filter::part(form-control) {
  display: block;
}

sl-select[size=large].insight-filter__status-select {
  --min-width: 20rem;
  min-width: var(--min-width);
}

.insight__quick-date-filters {
  padding: 0px var(--op-space-x-small);
  background: var(--op-color-neutral-plus-six);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--op-space-x-small);
  justify-content: space-between;
  border: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  border-left: none;
  border-right: none;
  margin-top: var(--op-space-x-small);
}

.flatpickr-calendar {
  overflow: hidden;
  background: var(--op-color-neutral-plus-max);
  box-shadow: var(--op-dropdown-box-shadow);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}

.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--op-color-primary-minus-three);
}

.flatpickr-day {
  color: var(--op-color-neutral-on-plus-max);
  border: var(--op-color-neutral-plus-max);
}
.flatpickr-day:hover {
  color: var(--op-color-neutral-on-plus-six);
  background: var(--op-color-neutral-plus-six);
  border: var(--op-color-neutral-plus-six);
}
.flatpickr-day.nextMonthDay, .flatpickr-day.prevMonthDay {
  color: var(--op-color-neutral-plus-two);
}
.flatpickr-day.nextMonthDay:hover, .flatpickr-day.prevMonthDay:hover {
  color: var(--op-color-neutral-plus-two);
}

.flatpickr-day,
.flatpickr-day.selected.startRange.endRange {
  border-radius: var(--op-radius-large);
}
.flatpickr-day.inRange, .flatpickr-day.inRange.today, .flatpickr-day.inRange.nextMonthDay, .flatpickr-day.inRange.prevMonthDay, .flatpickr-day.inRange.prevMonthDay.today, .flatpickr-day.inRange.nextMonthDay.today,
.flatpickr-day.selected.startRange.endRange.inRange,
.flatpickr-day.selected.startRange.endRange.inRange.today,
.flatpickr-day.selected.startRange.endRange.inRange.nextMonthDay,
.flatpickr-day.selected.startRange.endRange.inRange.prevMonthDay,
.flatpickr-day.selected.startRange.endRange.inRange.prevMonthDay.today,
.flatpickr-day.selected.startRange.endRange.inRange.nextMonthDay.today {
  --flatpickr-day-negative-box-shadow: -5px;
  --flatpickr-day-box-shadow: 5px;
  background-color: var(--op-color-neutral-plus-six);
  border-color: var(--op-color-neutral-plus-six);
  box-shadow: var(--flatpickr-day-negative-box-shadow) 0 0 var(--op-color-neutral-plus-six), var(--flatpickr-day-box-shadow) 0 0 var(--op-color-neutral-plus-six);
}
.flatpickr-day.today,
.flatpickr-day.selected.startRange.endRange.today {
  border: none;
}
.flatpickr-day.today::after,
.flatpickr-day.selected.startRange.endRange.today::after {
  --today-indicator-offset: 46%;
  content: "";
  position: absolute;
  left: var(--today-indicator-offset);
  bottom: var(--op-space-2x-small);
  display: inline-block;
  height: var(--op-space-2x-small);
  width: var(--op-space-2x-small);
  background-color: var(--op-color-primary-minus-one);
  border-radius: var(--op-radius-circle);
}
.flatpickr-day.inRange:not(.nextMonthDay, .prevMonthDay),
.flatpickr-day.selected.startRange.endRange.inRange:not(.nextMonthDay, .prevMonthDay) {
  color: var(--op-color-neutral-on-plus-six);
}

.flatpickr-day.selected.flatpickr-day.startRange,
.flatpickr-day.selected.flatpickr-day.endRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange,
.flatpickr-day.endRange.nextMonthDay {
  color: var(--op-color-primary-on-base);
  background-color: var(--op-color-primary-base);
  border-color: var(--op-color-primary-base);
}
.flatpickr-day.selected.flatpickr-day.startRange:hover,
.flatpickr-day.selected.flatpickr-day.endRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange.nextMonthDay:hover {
  color: var(--op-color-primary-on-plus-one);
  background-color: var(--op-color-primary-plus-one);
  border-color: var(--op-color-primary-plus-one);
}
.flatpickr-day.selected.flatpickr-day.startRange.today,
.flatpickr-day.selected.flatpickr-day.endRange.today,
.flatpickr-day.endRange.today,
.flatpickr-day.startRange.today,
.flatpickr-day.endRange.nextMonthDay.today {
  border: none;
}
.flatpickr-day.selected.flatpickr-day.startRange.today::after,
.flatpickr-day.selected.flatpickr-day.endRange.today::after,
.flatpickr-day.endRange.today::after,
.flatpickr-day.startRange.today::after,
.flatpickr-day.endRange.nextMonthDay.today::after {
  background-color: var(--op-color-primary-plus-five);
}

.flatpickr-day.today.inRange.nextMonthDay:hover,
.flatpickr-day.today.inRange.prevMonthDay:hover,
.flatpickr-day.today:not(.endRange, .startRange):hover {
  color: var(--op-color-neutral-on-plus-six);
  background-color: var(--op-color-neutral-plus-six);
}

.flatpickr-day.today.inRange:hover {
  color: var(--op-color-neutral-on-plus-six);
  background-color: var(--op-color-neutral-plus-six);
}

.flatpickr-day.selected.today:hover {
  color: var(--op-color-neutral-on-plus-six);
  background: none;
}

.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange {
  border-radius: var(--op-radius-large) 0 0 var(--op-radius-large);
}

.flatpickr-day.selected.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 var(--op-radius-large) var(--op-radius-large) 0;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)) {
  --flatpickr-short-range-box-shadow: -10px;
  box-shadow: var(--flatpickr-short-range-box-shadow) 0 0 var(--op-color-primary-base);
}

.legend-settings {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  padding: var(--op-space-small);
  background-color: var(--op-color-neutral-plus-seven);
  color: var(--op-color-neutral-on-plus-seven-alt);
  border-radius: var(--op-radius-medium);
  box-shadow: none;
}
.legend-settings .form-group {
  padding: 0;
}
.legend-settings .legend-settings-header {
  color: var(--op-color-neutral-on-plus-seven-alt);
}
.legend-settings .legend-settings-group {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}
.legend-settings .legend-settings-group-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: var(--op-font-weight-medium);
  font-size: var(--op-font-x-small);
}
.legend-settings .legend-setting-row {
  display: grid;
  grid-template-columns: 1fr 30%;
  align-items: center;
  justify-content: space-between;
  gap: var(--op-space-x-small);
}
.legend-settings .legend-setting-row .form-group {
  align-content: center;
  height: 100%;
}
.legend-settings .legend-setting-row .legend-setting-label {
  color: var(--op-color-neutral-on-plus-seven);
}
.legend-settings .legend-setting-row .legend-seting-label--disabled {
  opacity: var(--op-disabled-opacity);
  cursor: default;
}
.legend-settings .legend-settings-header {
  color: var(--op-color-neutral-on-plus-seven-alt);
}
.legend-settings .legend-setting-value {
  display: flex;
  align-self: flex-start;
  justify-content: flex-end;
  font-weight: var(--op-font-weight-medium);
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-minus-five);
}

.container--login {
  height: 100dvh;
  max-width: unset;
  background: var(--op-color-primary-plus-eight);
  background: radial-gradient(circle at bottom center, rgb(187, 222, 242) 0%, rgb(246, 251, 253) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--op-space-2x-large);
}

.card--login {
  --login-card-max-width: 620px;
  max-width: var(--login-card-max-width);
  width: 100%;
  padding: var(--op-space-large);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  border-radius: var(--op-radius-large);
  box-shadow: 0px 44px 12px 0px rgba(0, 0, 0, 0), 0px 28px 11px 0px rgba(0, 0, 0, 0.01), 0px 16px 9px 0px rgba(0, 0, 0, 0.04), 0px 7px 7px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.07);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .card--login {
    --login-card-max-width: 90vw;
  }
}

.login__form {
  width: stretch;
}

.login__logo {
  --login-logo-width: 260px;
  width: var(--login-logo-width);
}

:root {
  --pi-image-aspect-ratio: 800 / 592;
  --pi-export-width: 108rem;
  --pi-max-overlay-width: 10rem;
}

.pdf-export__section-name {
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-semi-bold);
}

.pdf-export__error-message {
  font-size: var(--op-font-medium);
}

.pdf-export__details-message {
  color: var(--op-color-neutral-on-plus-six-alt);
  font-size: var(--op-font-x-small);
}

.pdf-export__annotated-section-plans-label {
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-x-small);
}

.pdf-export__options-control {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
}
.pdf-export__options-control .pdf-export__options-control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pdf-export__options-control .pdf-export__options-control-header .pdf-export__options-control-title {
  font-size: var(--op-font-medium);
}
.pdf-export__options-control .pdf-export__options-control-header .pdf-export__options-control-details {
  font-size: var(--op-font-x-small);
}
.pdf-export__options-control .pdf-export__options-control-actions-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}
.pdf-export__options-control .pdf-export__options-control-actions-wrapper .pdf-export__options-control-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.pdf-export__options-control .pdf-export__options-control-actions-wrapper .pdf-export__options-control-switch {
  font-size: var(--op-font-small);
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-x-small);
}

.pdf-export__generated-pdf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--op-color-primary-plus-six);
  border-radius: var(--op-radius-large);
  padding: var(--op-space-x-small) var(--op-space-small);
}
.pdf-export__generated-pdf.pdf-export__generated-pdf--error {
  background: var(--op-color-alerts-danger-plus-six);
}

sl-dialog.markup-snapshot__overlay::part(base) {
  pointer-events: none;
}
sl-dialog.markup-snapshot__overlay::part(header) {
  padding: var(--op-space-small) var(--op-space-medium);
}
sl-dialog.markup-snapshot__overlay::part(title) {
  font-size: var(--op-font-medium);
  padding: 0;
}
sl-dialog.markup-snapshot__overlay::part(close-button) {
  display: none;
}
sl-dialog.markup-snapshot__overlay::part(panel) {
  width: unset;
  background: transparent;
  box-shadow: var(--op-shadow-infinite);
}
sl-dialog.markup-snapshot__overlay::part(overlay) {
  background-color: unset;
}
sl-dialog.markup-snapshot__overlay::part(body) {
  opacity: 0;
  aspect-ratio: var(--pi-image-aspect-ratio);
  padding: 0;
  width: 100vw;
  height: 100vh;
  max-width: min(100vw - 16rem, 108rem);
  max-height: min(100vh - 16rem, 80rem);
}
@media (max-aspect-ratio: 800/592) {
  sl-dialog.markup-snapshot__overlay::part(body) {
    height: unset;
  }
}
@media (min-aspect-ratio: 800/592) {
  sl-dialog.markup-snapshot__overlay::part(body) {
    width: unset;
  }
}
sl-dialog.markup-snapshot__overlay::part(footer) {
  pointer-events: all;
  padding: var(--op-space-small) var(--op-space-medium);
}

sl-dialog.markup-snapshot__modal::part(header) {
  display: none;
}
sl-dialog.markup-snapshot__modal::part(title) {
  display: none;
}
sl-dialog.markup-snapshot__modal::part(close-button) {
  display: none;
}
sl-dialog.markup-snapshot__modal::part(overlay) {
  background-color: unset;
}
sl-dialog.markup-snapshot__modal::part(body) {
  background-color: var(--op-color-neutral-plus-six);
  padding: 0;
}
@media print {
  sl-dialog.markup-snapshot__modal::part(body) {
    background-color: none;
    overflow: visible;
  }
}

.markup-snapshot__viewport-capture-zone {
  height: 100%;
  width: 100%;
}

.markup-snapshot__container {
  display: grid;
  grid-template-columns: 1fr 340px;
  position: relative;
  background-color: var(--op-color-neutral-plus-max);
}

.markup-snapshot__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--op-space-medium);
  padding: var(--op-space-x-large);
}

@media print {
  @supports (size: letter landscape) {
    @page {
      size: letter landscape;
    }
  }
  @supports not (size: letter landscape) {
    html {
      rotate: 90deg;
    }
    .body--overflow {
      rotate: -90deg;
    }
  }
}
.markup-snapshot__sidebar {
  height: 100vh;
  display: grid;
  overflow: hidden;
  grid-template-columns: 100%;
  grid-template-rows: 1fr auto;
  color: var(--op-color-neutral-plus-eight-alt);
  background-color: var(--op-color-neutral-plus-eight);
  box-shadow: var(--op-border-left) var(--op-color-border);
}
.markup-snapshot__sidebar .markup-snapshot__export-buttons {
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  background-color: var(--op-color-neutral-plus-seven);
  display: flex;
  flex-wrap: wrap;
  padding: var(--op-space-medium);
  gap: var(--op-space-x-small);
}
.markup-snapshot__sidebar .markup-snapshot__export-buttons .markup-snapshot__export-and-close-button {
  width: 60%;
}
@media print {
  .markup-snapshot__sidebar {
    display: none;
  }
}

.markup-snapshot__sidebar-body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  gap: var(--op-space-large);
  padding: var(--op-space-large);
}
.markup-snapshot__sidebar-body .markup-snapshot__sidebar-section-header {
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-semi-bold);
  padding-bottom: var(--op-space-small);
}
.markup-snapshot__sidebar-body .markup-snapshot__description-wrapper {
  grid-column: 1/3;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}

.markup-snapshot__sidebar-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}
.markup-snapshot__sidebar-toggles .form-group {
  padding: 0;
}
.markup-snapshot__sidebar-toggles .markup-snapshot__sidebar-toggle-row {
  display: flex;
  gap: var(--op-space-medium);
}
.markup-snapshot__sidebar-toggles .markup-snapshot__sidebar-toggle-row .form-group {
  align-self: baseline;
}
.markup-snapshot__sidebar-toggles .markup-snapshot__groups-toggle {
  background: var(--op-color-neutral-plus-six);
  border-radius: var(--op-radius-medium);
  padding: var(--op-space-2x-small) var(--op-space-small);
}

sl-details.markup-snapshot__image-details::part(summary) {
  font-size: var(--op-font-small);
}
sl-details.markup-snapshot__image-details[open]::part(header) {
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
sl-details.markup-snapshot__image-details::part(content) {
  padding: var(--op-space-small);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}

.markup-snapshot__preview,
.markup-snapshot__capture-zone {
  --pi-top-offset: 8rem;
  contain: paint;
  background-color: var(--op-color-neutral-plus-max);
  position: absolute;
  transform: scale(0.03);
  transform-origin: top left;
  top: var(--pi-top-offset);
  left: var(--op-space-x-large);
  width: var(--pi-export-width);
}
.markup-snapshot__preview .markup-snapshot__image img,
.markup-snapshot__capture-zone .markup-snapshot__image img {
  width: var(--pi-export-width);
}
@media print {
  .markup-snapshot__preview,
  .markup-snapshot__capture-zone {
    position: unset;
    top: unset;
    left: unset;
    width: 100%;
  }
}
.markup-snapshot__preview.with-sidebar,
.markup-snapshot__capture-zone.with-sidebar {
  display: grid;
  grid-template-columns: 1fr var(--op-markup-panel-width);
}
.markup-snapshot__preview.with-sidebar .markup-snapshot__image img,
.markup-snapshot__capture-zone.with-sidebar .markup-snapshot__image img {
  width: 100%;
}

.markup-snapshot__capture-zone {
  transition: unset;
  transform: unset;
}

.markup-snapshot__hi-res-capture-zone {
  z-index: -100000;
  transform: unset;
  transform-origin: unset;
  transition: unset;
}
@media print {
  .markup-snapshot__hi-res-capture-zone {
    z-index: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }
}

.markup-snapshot__description {
  font-size: var(--op-font-x-small);
  word-break: break-word;
}

.markup-snapshot__address {
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
}

.markup-snapshot__header.with-logo {
  display: grid;
  grid-template-columns: auto 4fr;
}
.markup-snapshot__header.with-logo .markup-snapshot__logo {
  padding: var(--op-space-small);
  max-height: 10rem;
  border-right: var(--op-border-width) solid var(--op-color-border);
}
.markup-snapshot__header {
  border-bottom: var(--op-border-width) solid var(--op-color-border);
}
.markup-snapshot__header .markup-snapshot__details {
  padding: var(--op-space-large);
  gap: var(--op-space-2x-small);
  display: flex;
  flex-direction: column;
}
.markup-snapshot__header .markup-snapshot__details h2 {
  margin-bottom: 0;
}

.markup-snapshot__legend {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  background-color: var(--op-color-neutral-plus-eight);
  border-left: var(--op-border-width) solid var(--op-color-border);
  padding: var(--op-space-large);
  height: 100%;
  print-color-adjust: exact;
}
.markup-snapshot__legend .column-labels {
  padding: var(--op-space-2x-small) 0;
  border-bottom: var(--op-border-width) solid var(--op-color-border);
}
.markup-snapshot__legend .legend-group-name {
  color: var(--op-color-neutral-on-plus-eight-alt);
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-x-small);
}
.markup-snapshot__legend .markup-snapshot__legend-group {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}

.markup-snapshot__image {
  width: 100%;
  aspect-ratio: var(--pi-image-aspect-ratio);
  position: relative;
}

.markup-snapshot__catalog-item-row {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: center;
  font-size: var(--op-font-x-small);
}

.markup-snapshot__compass {
  position: absolute;
  left: var(--op-space-x-large);
  bottom: var(--op-space-x-large);
}

.markup-snapshot__scale {
  position: absolute;
  right: var(--op-space-x-large);
  bottom: var(--op-space-x-large);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
  width: 25%;
}

.markup-snapshot__scale-line {
  --scale-line-height: 4px;
  height: var(--scale-line-height);
  background-color: var(--op-color-primary-plus-one);
  width: 100%;
}

.markup-snapshot__scale-value {
  padding: var(--op-space-3x-small) var(--op-space-x-small);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  background-color: var(--op-color-neutral-on-minus-max);
  color: var(--op-color-neutral-on-plus-max-alt);
  border: var(--op-border-width) solid var(--op-color-primary-plus-one);
  border-radius: var(--op-radius-pill);
}

.catalog-item-row__material-name {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-neutral-on-plus-eight);
}

.catalog-item-row__material-quantity {
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-eight);
  white-space: nowrap;
}

.export-description__label {
  font-size: var(--op-font-medium);
}

.export-description__help-text {
  text-align: right;
  font-size: var(--op-font-x-small);
  width: 100%;
}

.markup-snapshot__footer {
  width: 100%;
  padding: var(--op-space-medium) var(--op-space-large);
  color: var(--op-color-neutral-on-plus-six);
  background-color: var(--op-color-neutral-plus-max);
  border-top: var(--op-border-width) solid var(--op-color-border);
  font-size: var(--op-font-x-small);
}

.aspire-export__toggles {
  display: flex;
  flex-direction: column;
  padding: var(--op-space-small);
  align-items: flex-start;
  gap: var(--op-space-small);
  border-radius: var(--op-radius-medium);
  background: var(--op-color-neutral-plus-eight);
}

.aspire-export__name-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}

.catalog-item-search-bar {
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
  padding: var(--op-space-2x-small) var(--op-space-x-small);
  border-top: var(--op-border-width) solid var(--op-color-border);
}
.catalog-item-search-bar sl-input {
  flex: 1;
}

.catalog-item-search-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--op-space-3x-small);
  height: var(--op-input-height-small);
}

.catalog-item-search-bar__counter {
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-max-alt);
  white-space: nowrap;
}

.catalog-item-search-bar__no-results {
  font-size: var(--op-font-x-small);
  color: var(--op-color-danger-on-minus-two);
  white-space: nowrap;
}

.catalog-item-search-bar__nav-button,
.catalog-item-search-bar__close-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--op-color-neutral-on-plus-max-alt);
  display: flex;
  align-items: center;
}
.catalog-item-search-bar__nav-button:disabled,
.catalog-item-search-bar__close-button:disabled {
  opacity: var(--op-opacity-disabled);
  cursor: not-allowed;
}
.catalog-item-search-bar__nav-button:hover:not(:disabled),
.catalog-item-search-bar__close-button:hover:not(:disabled) {
  color: var(--op-color-neutral-on-plus-max);
}

.catalog-item-search-bar__nav-button {
  width: var(--op-input-height-small);
  height: var(--op-input-height-small);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-five);
}

.search-match {
  --search-match-indicator-width: 3px;
  box-shadow: inset var(--search-match-indicator-width) 0 0 var(--op-color-warning-plus-three);
  border-radius: var(--op-radius-small);
}

.search-match--active {
  box-shadow: inset var(--search-match-indicator-width) 0 0 var(--op-color-primary-on-plus-six), 0 0 0 var(--op-border-width) var(--op-color-primary-plus-three);
  border-radius: var(--op-radius-small);
  background-color: var(--op-color-primary-plus-seven);
}
.search-match--active .material-list__item-container {
  background-color: var(--op-color-primary-plus-seven);
}

/* Due to react-dnd's import we must specifically target the markup page's search matches using the .react-dnd__root class */
.react-dnd__root li:has(.material-list__group) .material-list__group.is-open + div .search-match--active .material-list__item-container.selectable {
  background-color: var(--op-color-primary-plus-seven);
}

.material-list__group.search-match--active {
  box-shadow: inset var(--search-match-indicator-width) 0 0 var(--op-color-primary-on-plus-six);
}

[role=listitem]:has(> .material-list__group.search-match--active) {
  box-shadow: 0 0 0 var(--op-border-width) var(--op-color-primary-plus-three);
  border-radius: var(--op-radius-small);
}

.markup-left-panel {
  --op-markup-left-panel-page-select-max-height: 15%;
  --op-markup-left-panel-page-select-min-height: 140px;
  --op-markup-left-panel-page-select-header-height: 36px;
}

.markup-panel__header-label-text {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-medium);
}

/* --op-breakpoint-small */
@media (max-width: 768px) {
  .markup-panel__header-label-text {
    font-size: var(--op-font-medium);
  }
}
.markup-left-panel__materials {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding-inline: var(--op-space-2x-small);
  isolation: isolate;
}
.markup-left-panel__materials.markup-left-panel__materials--with-bottom-padding {
  padding-bottom: var(--op-space-2x-small);
}
.markup-left-panel__materials .markup-left-panel__items-content,
.markup-left-panel__materials .markup-left-panel__selected-component {
  overflow-y: scroll;
  flex: 1;
  min-height: 0;
  padding: var(--op-space-x-small);
  padding-right: 0;
  background: var(--op-color-neutral-plus-max);
  border-radius: var(--op-radius-medium);
}
.markup-left-panel__materials .markup-left-panel__items-content.empty-markup-left-panel,
.markup-left-panel__materials .markup-left-panel__selected-component.empty-markup-left-panel {
  --markup-left-panel-empty-bg-size: 90%;
  background: url("/assets/markup-materials/empty-state-footer-03400a5e.svg");
  background-size: var(--markup-left-panel-empty-bg-size);
  background-repeat: no-repeat;
  background-position: center bottom;
  padding: 0;
}
.markup-left-panel__materials .markup-left-panel__items-content::-webkit-scrollbar,
.markup-left-panel__materials .markup-left-panel__selected-component::-webkit-scrollbar {
  width: var(--op-space-x-small);
}
.markup-left-panel__materials .markup-left-panel__items-content::-webkit-scrollbar-track,
.markup-left-panel__materials .markup-left-panel__selected-component::-webkit-scrollbar-track {
  background-color: transparent;
}
.markup-left-panel__materials .markup-left-panel__items-content::-webkit-scrollbar-thumb,
.markup-left-panel__materials .markup-left-panel__selected-component::-webkit-scrollbar-thumb {
  background-color: var(--op-color-neutral-plus-four);
  box-shadow: none;
  border: 0;
  border-radius: 0;
}
.markup-left-panel__materials:has(.markup-left-panel__selected-component) {
  padding-top: var(--op-space-2x-small);
}
.markup-left-panel__materials .markup-left-panel__contents {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  align-content: end;
}

.empty-markup-left-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-bottom: 0;
  gap: var(--op-space-medium);
}

.empty-markup-left-panel__header {
  --empty-panel-header-text-width: 65%;
  display: flex;
  font-size: var(--op-font-small);
  text-align: center;
  align-items: first baseline;
  gap: var(--op-space-x-small);
  font-weight: var(--op-font-weight-medium);
}
.empty-markup-left-panel__header .empty-markup-left-panel__header-text {
  width: var(--empty-panel-header-text-width);
}

.empty-markup-left-panel__content {
  padding: var(--op-space-small);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}

.empty-markup-left-panel__arrow {
  --height: 72px;
  --width: 37px;
  width: var(--width);
  height: var(--height);
  background: url("/assets/markup-materials/empty-state-arrow-47df1daf.svg");
  background-size: cover;
}

.empty-markup-left-panel__details {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  text-align: center;
  color: var(--op-color-neutral-on-plus-eight-alt);
}

.empty-markup-left-panel__squiggle {
  --height: 38.38px;
  --width: 130.68px;
  height: var(--height);
  width: var(--width);
  background: url("/assets/markup-materials/empty-state-squiggle-e4f8ee10.svg");
  align-self: center;
  background-size: cover;
}

.markup-left-panel__item-content {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
}
.markup-left-panel__item-content .markup-left-panel__item-icon {
  display: flex;
  align-items: center;
}
.markup-left-panel__item-content .markup-left-panel__item-details {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.markup-left-panel__item-content.markup-left-panel__item-content--tight {
  gap: var(--op-space-x-small);
}

.markup-left-panel__quantity-control-wrapper {
  display: flex;
  gap: var(--op-space-2x-small);
  align-items: flex-end;
}
.markup-left-panel__quantity-control-wrapper .form-group {
  flex: 1;
}
.markup-left-panel__quantity-control-wrapper {
  /* --op-breakpoint-small */
}
@media only screen and (max-width: 768px) {
  .markup-left-panel__quantity-control-wrapper .modal__form-control {
    flex: 1;
  }
}

.markup-left-panel__page-select-header {
  --markup-left-panel-expand-duration: 0.3s;
  --markup-left-panel-collapse-duration: 0.2s;
  display: flex;
  align-items: center;
  padding: var(--op-space-x-small);
  padding-right: var(--op-space-small);
  gap: var(--op-space-small);
  font-size: var(--op-font-small);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-left-panel__page-select-header {
    background: unset;
    border: none;
    font-size: var(--op-font-large);
    font-weight: var(--op-font-weight-normal);
  }
}
.markup-left-panel__page-select-header .markup-left-panel__page-select-actions {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  margin-left: auto;
  order: 3;
}
.markup-left-panel__page-select-header .markup-left-panel__page-nav {
  display: flex;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-left-panel__page-select-header .markup-left-panel__page-nav {
    gap: var(--op-space-x-small);
  }
}
.markup-left-panel__page-select-header .markup-left-panel__page-select-collapse-button {
  padding: 0;
}
.markup-left-panel__page-select-header button {
  color: inherit;
}
.markup-left-panel__page-select-header .material-symbols-outlined {
  transition: transform var(--markup-left-panel-expand-duration);
}
.markup-left-panel__page-select-header.collapsed .markup-left-panel__page-select-collapse-button {
  transform: rotate(-180deg);
  transition: transform var(--markup-left-panel-collapse-duration);
}

.markup-left-panel__pages-display {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--op-space-2x-small);
  padding-top: 0;
  border-bottom: solid var(--op-border-width) var(--op-color-border);
  max-height: var(--op-markup-left-panel-page-select-max-height);
  min-height: var(--op-markup-left-panel-page-select-min-height);
}
.markup-left-panel__pages-display .markup-left-panel__pages {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
  overflow-y: scroll;
  flex: 1;
  min-height: 0;
  padding: var(--op-space-x-small);
  padding-right: 0;
  background: var(--op-color-neutral-plus-max);
  border-radius: var(--op-radius-medium);
}
.markup-left-panel__pages-display .markup-left-panel__pages::-webkit-scrollbar {
  width: var(--op-space-x-small);
}
.markup-left-panel__pages-display .markup-left-panel__pages::-webkit-scrollbar-track {
  background-color: transparent;
}
.markup-left-panel__pages-display .markup-left-panel__pages::-webkit-scrollbar-thumb {
  background-color: var(--op-color-neutral-plus-four);
  box-shadow: none;
  border: 0;
  border-radius: 0;
}

.markup-left-panel__section {
  overflow: hidden;
  padding: var(--op-space-x-small);
}

.markup-left-panel__overlay {
  display: flex;
  padding: calc(var(--op-size-unit) * 1.5) var(--op-space-x-small) var(--op-space-x-small) var(--op-space-x-small);
  flex-direction: column;
  justify-content: center;
  gap: var(--op-space-x-small);
  align-self: stretch;
  border-radius: var(--op-radius-large);
  border: var(--op-border-width) dashed var(--op-color-primary-plus-two);
  background: var(--op-color-primary-plus-eight);
}
.markup-left-panel__overlay sl-switch {
  display: inline;
}
.markup-left-panel__overlay sl-range {
  width: 100%;
}

.markup-left-panel__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.markup-left-panel_icon {
  display: flex;
  color: var(--op-color-primary-plus-one);
}

.markup-left-panel__overlay div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.markup-left-panel__overlay div:first-child div {
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
  justify-content: flex-start;
  flex: 1 0 0;
  overflow: hidden;
  color: var(--op-color-primary-on-plus-eight);
  text-overflow: ellipsis;
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
}

.markup-left-panel__pages {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-left-panel__pages {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-x-small);
    width: 100%;
  }
}

.markup-left-panel__page {
  --op-border-color: var(--op-color-neutral-plus-five);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--op-space-2x-small);
  font-size: var(--op-font-x-small);
  color: inherit;
  border-radius: var(--op-radius-small);
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-border-color);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-left-panel__page {
    border-radius: var(--op-radius-x-large);
    background: var(--op-color-neutral-plus-seven);
    gap: var(--op-space-2x-small);
    justify-content: unset;
    align-items: unset;
  }
}
.markup-left-panel__page button {
  padding: 0;
}
.markup-left-panel__page span {
  word-break: break-word;
  text-align: left;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-left-panel__page span {
    font-size: var(--op-font-medium);
    font-weight: var(--op-font-weight-normal);
    color: var(--op-color-neutral-on-plus-seven);
  }
}
.markup-left-panel__page img, .markup-left-panel__page .page__image-placeholder {
  --pi-image-width: 55px;
  --pi-image-height: 40px;
  margin-right: var(--op-space-small);
  min-width: var(--pi-image-width);
  width: var(--pi-image-width);
  height: var(--pi-image-height);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-left-panel__page img, .markup-left-panel__page .page__image-placeholder {
    --pi-image-width: 128px;
    --pi-image-height: 83px;
  }
}
.markup-left-panel__page .hidden-button {
  visibility: hidden;
}
.markup-left-panel__page:hover {
  background: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
}
.markup-left-panel__page:hover .hidden-button {
  visibility: visible;
}
.markup-left-panel__page.active {
  background-color: var(--op-color-primary-plus-six);
  color: var(--op-color-primary-on-plus-six);
  font-weight: var(--op-font-weight-semi-bold);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-two);
}
.markup-left-panel__page.active .hidden-button {
  visibility: visible;
}
.markup-left-panel__page.active:hover {
  background: var(--op-color-primary-plus-four);
  color: var(--op-color-primary-on-plus-four);
}
.markup-left-panel__page.active {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-left-panel__page.active {
    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
    background: var(--op-color-primary-plus-seven);
  }
}

.markup-left-panel__action-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: var(--op-font-weight-normal);
  width: 100%;
}

.markup-left-panel__image-dropdowns {
  display: flex;
  gap: var(--op-space-x-small);
  width: 100%;
}
.markup-left-panel__image-dropdowns sl-dropdown,
.markup-left-panel__image-dropdowns sl-button {
  width: 100%;
}

.markup-left-panel__drawing-controls {
  border-radius: var(--op-radius-medium);
  /* We need a border here because the background colors of children will cover a box-shadow */
  border: var(--op-border-width) solid var(--op-color-border);
  background-color: var(--op-color-neutral-plus-eight);
  overflow: hidden;
}

.markup-left-panel__placement-modes {
  display: flex;
  gap: var(--op-space-2x-small);
  box-shadow: none;
  padding: var(--op-space-2x-small);
  justify-content: space-between;
  box-shadow: var(--op-border-top) var(--op-color-border);
}
.markup-left-panel__placement-modes sl-button {
  padding: 0;
  width: 100%;
}
.markup-left-panel__placement-modes sl-button::part(base) {
  width: 100%;
}

.markup-left-panel__placement-mode-options {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  padding: var(--op-space-small);
  background-color: var(--op-color-neutral-plus-seven);
  box-shadow: var(--op-border-top) var(--op-color-border);
}

.markup-left-panel__mobile-group-name-input {
  height: var(--op-input-height-medium);
  display: flex;
  padding: 0 var(--op-space-small) 0 var(--op-space-medium);
  align-items: center;
  gap: var(--op-space-x-small);
  border-radius: var(--op-radius-large);
  border: var(--op-border-width) solid var(--op-color-primary-plus-three);
  background: var(--op-color-primary-plus-eight);
}

.markup-left-panel__group-name-input {
  border: none;
  background-color: unset;
  border-radius: var(--op-radius-medium);
  padding: var(--op-space-2x-small);
  text-overflow: ellipsis;
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-x-small);
  width: 100%;
}
.markup-left-panel__group-name-input:hover {
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-two);
}
.markup-left-panel__group-name-input:focus {
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-two);
  background-color: var(--op-color-neutral-plus-six);
  outline: none;
}

.markup-left-panel__view-controls {
  display: grid;
  width: 100%;
  grid-template-columns: auto 1fr auto;
}
.markup-left-panel__view-controls button {
  --zoom-control-button-z-index: 3;
  z-index: var(--zoom-control-button-z-index);
  color: inherit;
}
.markup-left-panel__view-controls {
  /* --op-breakpoint-small */
}
@media only screen and (max-width: 768px) {
  .markup-left-panel__view-controls {
    background: none;
    padding-top: var(--op-space-small);
  }
}
.markup-left-panel__view-controls .material-symbols-outlined {
  color: var(--op-color-neutral-on-plus-max-alt);
}
.markup-left-panel__view-controls .markup-left-panel__zoom-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-x-small);
}
.markup-left-panel__view-controls .markup-left-panel__zoom-control .material-symbols-outlined {
  color: var(--op-color-primary-on-plus-max-alt);
}

.markup-left-panel__zoom-percent {
  --pi-zoom-percent-min-width: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: var(--op-font-weight-semi-bold);
}
.markup-left-panel__zoom-percent .badge {
  min-width: var(--pi-zoom-percent-min-width);
}

.markup-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  border-radius: var(--op-radius-large);
  overflow: hidden;
  height: 100%;
  /* --op-breakpoint-small */
}
@media only screen and (max-width: 768px) {
  .markup-panel {
    height: calc(100% - var(--op-collapsible-side-panel-footer-height));
    border-radius: unset;
    grid-template-rows: 1fr auto;
    background-color: unset;
  }
  .markup-panel.markup-panel--component-selected {
    grid-template-rows: auto 1fr auto;
  }
  .markup-panel.markup-panel__catalog {
    height: 100%;
  }
  .markup-panel.markup-panel__catalog .markup-panel__header {
    background-color: unset;
    border: unset;
    height: var(--op-input-height-x-large);
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .markup-panel .markup-panel__footer,
  .markup-panel .markup-panel__header {
    border-radius: unset;
  }
  .markup-panel .markup-panel__footer.catalog-header,
  .markup-panel .markup-panel__header.catalog-header {
    --padding-right: 9px;
    padding-right: var(--padding-right);
  }
  .markup-panel .markup-panel__footer.catalog-group__header,
  .markup-panel .markup-panel__header.catalog-group__header {
    --padding-right: calc(var(--op-space-large) + 1px);
    border-radius: var(--op-radius-large);
    border-bottom: unset;
    padding-right: var(--padding-right);
    background-color: var(--op-color-neutral-plus-seven);
  }
  .markup-panel .markup-panel__footer.is-open,
  .markup-panel .markup-panel__header.is-open {
    border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-five);
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
    background-color: var(--op-color-primary-plus-seven);
  }
}

.markup-panel__body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: var(--op-markup-panel-width);
  /* --op-breakpoint-small */
}
@media only screen and (max-width: 768px) {
  .markup-panel__body {
    max-width: unset;
  }
}

.markup-panel__footer {
  display: flex;
  justify-content: center;
  padding: var(--op-space-x-small) var(--op-space-small) var(--op-space-small) var(--op-space-small);
  background: var(--op-color-neutral-plus-seven);
  gap: var(--op-space-x-small);
}
.markup-panel__footer.markup-panel__footer--column {
  gap: var(--op-space-x-small);
  flex-direction: column;
}
.markup-panel__footer.markup-panel__footer--no-border {
  border-top: none;
}
.markup-panel__footer.markup-panel__footer--sub {
  padding: var(--op-space-x-small);
  border-bottom: solid var(--op-border-width) var(--op-color-border);
}
.markup-panel__footer.markup-panel__footer--sub.markup-panel__footer--no-border {
  padding: var(--op-space-x-small) var(--op-space-x-small) 0 var(--op-space-x-small);
  border-bottom: none;
}
.markup-panel__footer.markup-panel__footer--control {
  border-bottom: none;
  padding: var(--op-space-small) var(--op-space-x-small) var(--op-space-x-small) var(--op-space-x-small);
  align-items: center;
}
.markup-panel__footer.markup-panel__footer--control .icon {
  color: var(--op-color-neutral-minus-one);
}
.markup-panel__footer.markup-panel__footer--with-logo {
  --footer-height: 5.3rem;
  height: var(--footer-height);
}
.markup-panel__footer.markup-panel__footer--with-logo img {
  height: 100%;
}
.markup-panel__footer.markup-panel__footer--controls {
  padding: var(--op-space-x-small) var(--op-space-x-small);
  gap: var(--op-space-small);
}

.markup-panel__footer--mobile {
  /* --op-breakpoint-small */
}
@media only screen and (max-width: 768px) {
  .markup-panel__footer--mobile {
    background: unset;
    border: none;
    padding: 0 !important;
  }
}

.markup-panel__header {
  padding: var(--op-space-x-small);
  padding-right: var(--op-space-small);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.markup-panel__header .markup-panel__header-label-with-toggles {
  flex: 1;
  justify-content: space-between;
  display: flex;
}
.markup-panel__header .markup-panel__header-toggles {
  display: flex;
  gap: var(--op-space-x-small);
  /* --op-breakpoint-small */
}
@media only screen and (max-width: 768px) {
  .markup-panel__header .markup-panel__header-toggles {
    gap: var(--op-space-large);
  }
}
.markup-panel__header > button {
  height: 100%;
}
.markup-panel__header > button.material-list__inline-item-action {
  padding: var(--op-space-x-small) var(--op-space-small);
}

.markup-panel__toggle-section {
  display: flex;
  flex-direction: column;
  padding: var(--op-space-x-small) var(--op-space-small);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  border-radius: var(--op-radius-medium);
  color: var(op-color-neutral-on-plus-eight);
  background-color: var(--op-color-neutral-plus-eight);
  gap: var(--op-space-small);
  width: 100%;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-panel__toggle-section {
    border-radius: var(--op-radius-large);
  }
}

.markup-panel__toggle-section--large-radius {
  padding: var(--op-space-x-small);
  border-radius: var(--op-radius-large);
}

.markup-panel__toggle-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.markup-panel__toggle-row .markup-panel__control sl-switch {
  display: flex;
}

.markup-panel__toggle-row--shifted {
  padding-inline: var(--op-space-x-small);
}

.markup-panel__appearance-section {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
  width: 100%;
}
.markup-panel__appearance-section.markup-panel__appearance-section--controls {
  flex-wrap: nowrap;
  flex-direction: row;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-panel__appearance-section.markup-panel__appearance-section--controls {
    gap: var(--op-space-x-small);
  }
}
.markup-panel__appearance-section.markup-panel__appearance-section--controls > .markup-panel__variable-option-container {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
}
.markup-panel__appearance-section.markup-panel__appearance-section--inline {
  display: grid;
  align-items: center;
  gap: var(--op-space-medium);
  grid-template-columns: 1fr 1fr 1fr;
}

/* Ensure dropdown trigger button for pattern picker isn't squished */
.markup-panel__variable-option-container {
  display: flex;
  align-items: center;
  padding: 0 var(--op-space-3x-small) 0 var(--op-space-x-small);
  justify-content: space-between;
  gap: var(--op-space-2x-small);
  border-radius: var(--op-radius-medium);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  background: var(--op-color-neutral-plus-eight);
  height: var(--op-input-height-small);
  width: 100%;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-panel__variable-option-container {
    border-radius: var(--op-radius-large);
    border: none;
    background: var(--op-color-neutral-plus-seven);
  }
}
.markup-panel__variable-option-container > sl-dropdown > button[slot=trigger] {
  --variable-option-trigger-size: calc(var(--op-size-unit) * 7); /* 28px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--variable-option-trigger-size);
  height: var(--variable-option-trigger-size);
  padding: 0;
  border: none;
  background: transparent;
  box-sizing: border-box;
  line-height: 0;
  overflow: hidden;
}
.markup-panel__variable-option-container > sl-dropdown > button[slot=trigger] .symbol-selector-menu__item {
  width: 100%;
  height: 100%;
}
.markup-panel__variable-option-container > sl-dropdown > button {
  padding: 0;
}
.markup-panel__variable-option-container sl-dropdown::part(trigger) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.markup-panel__variable-option-container.markup-panel__variable-option-container--large {
  height: var(--op-input-height-medium);
}
.markup-panel__variable-option-container.markup-panel__variable-option-container--large > sl-dropdown > button[slot=trigger] {
  --variable-option-trigger-size: calc(var(--op-size-unit) * 8); /* 32px */
  width: var(--variable-option-trigger-size);
  height: var(--variable-option-trigger-size);
}

.markup-panel__divider {
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}

.markup-header__section-header {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
}

.markup-panel__padded-area {
  display: grid;
  padding: var(--op-space-small);
  gap: var(--op-space-2x-small);
}
.markup-panel__padded-area .markup-header__section-header {
  margin: 0;
}
.markup-panel__padded-area .markup-panel__divider {
  margin-block: var(--op-space-x-small);
}
.markup-panel__padded-area.gap-sm {
  gap: var(--op-space-small);
}
.markup-panel__padded-area.markup-panel__padded-area--large {
  height: 100%;
}
.markup-panel__padded-area.markup-panel__padded-area--scrollable {
  overflow-y: auto;
}

.markup-panel__context-content {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
}
.markup-panel__context-content span:not(.material-symbols-outlined) {
  font-size: var(--op-font-x-small);
}
.markup-panel__context-content.markup-panel__context-content--space-between {
  justify-content: space-between;
  gap: unset;
  height: 100%;
}

.markup-panel__padded-area--large {
  flex: 1;
  display: grid;
  padding: var(--op-space-large);
  gap: var(--op-space-2x-small);
}

.markup-panel__rollup-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--op-font-x-small);
  height: var(--op-space-medium);
}
.markup-panel__rollup-info .rollup-calculated {
  font-weight: var(--op-font-weight-bold);
}
.markup-panel__rollup-info .rollup-cost {
  font-weight: var(--op-font-weight-bold);
}
.markup-panel__rollup-info .rollup-info__label {
  font-size: var(--op-font-x-small);
}
.markup-panel__rollup-info .rollup-info__value {
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-x-small);
}
.markup-panel__rollup-info sl-input[size=mini] {
  width: 50px;
}
.markup-panel__rollup-info sl-input[size=mini]::part(form-control-label) {
  display: none;
}

.markup-panel__rollup-info-section {
  display: flex;
  flex-direction: column;
  font-size: var(--op-font-x-small);
  gap: var(--op-space-small);
}

.markup-panel__contents {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding-inline: var(--op-space-2x-small);
  padding-block-end: var(--op-space-2x-small);
}

.markup-panel__warning {
  display: flex;
  align-items: center;
  gap: var(--op-space-medium);
  border-radius: var(--op-radius-large);
  padding: var(--op-space-x-small) var(--op-space-small);
  font-size: var(--op-font-x-small);
  background-color: var(--op-color-alerts-warning-plus-six);
  color: var(--op-color-alerts-warning-on-plus-six);
}

.markup-panel__error {
  display: flex;
  align-items: center;
  gap: var(--op-space-medium);
  border-radius: var(--op-radius-large);
  padding: var(--op-space-x-small) var(--op-space-small);
  font-size: var(--op-font-x-small);
  background-color: var(--op-color-alerts-danger-plus-six);
  color: var(--op-color-alerts-danger-on-plus-six);
}

.markup-panel__inlay {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-four);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  border-radius: var(--op-radius-medium);
  padding: var(--op-space-x-small);
}
.markup-panel__inlay.markup-panel__inlay--alt {
  background-color: var(--op-color-neutral-plus-six);
}
.markup-panel__inlay .inlay-title {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.markup-panel__inlay .inlay-subtitle {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-medium);
}

.markup-panel__back-button {
  background: var(--op-color-primary-plus-five);
  box-shadow: var(--op-border-all) var(--op-color-primary-plus-five);
  width: max-content;
  font-weight: var(--op-font-weight-bold);
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
  font-size: var(--op-font-x-small);
  border-radius: var(--op-radius-pill);
  color: var(--op-color-neutral-on-plus-five);
  height: max-content;
  padding: var(--op-space-2x-small) var(--op-space-small);
  white-space: nowrap;
  text-decoration: none;
}
.markup-panel__back-button:hover {
  background: var(--op-color-primary-plus-four);
  color: var(--op-color-neutral-on-plus-four);
}

.markup-panel__value {
  font-weight: var(--op-font-weight-semi-normal);
  font-size: var(--op-font-small);
}

.markup-panel__shadow-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  display: flex;
  min-height: 0;
}

/* --op-breakpoint-small */
@media (min-width: 768px) {
  .markup-panel__shadow-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    box-shadow: var(--pi-item-panel-inner-shadow);
    border-radius: var(--op-radius-medium);
    pointer-events: none;
  }
}
.colors-in-use {
  display: flex;
  gap: var(--op-space-x-small);
  align-items: center;
}

/* --op-breakpoint-small */
@media (max-width: 768px) {
  .markup-panel__appearance-controls {
    width: 100%;
  }
  .colors-in-use {
    flex-direction: column;
    align-items: flex-start;
  }
}
.markup-panel--right {
  display: grid;
  grid-template-rows: 1fr auto;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-panel--right {
    height: 100%;
  }
}
.markup-panel--right .markup-panel__header {
  padding: 0;
}
.markup-panel--right .markup-panel__body .markup-right-panel__contents {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding-inline: var(--op-space-2x-small);
  padding-bottom: var(--op-space-2x-small);
}
.markup-panel--right .markup-panel__body .markup-right-panel__contents .markup-right-panel__padded-area {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.markup-panel--right .markup-panel__footer {
  align-items: center;
  color: var(--op-color-primary-on-plus-six-alt);
  display: flex;
  padding: var(--op-space-x-small) var(--op-space-small);
  justify-content: space-evenly;
  border-top: solid var(--op-border-width) var(--op-color-border);
}
.markup-panel--right .markup-panel__footer .btn {
  flex: 1;
}

@media (min-width: 768px) {
  .markup-panel--right .markup-panel__body .markup-right-panel__contents .markup-right-panel__padded-area {
    flex: 1;
    padding: var(--op-space-x-small);
    padding-right: unset;
    background: var(--op-color-neutral-plus-max);
    border-radius: var(--op-radius-medium);
    overflow-y: scroll;
  }
  .markup-panel--right .markup-panel__body .markup-right-panel__contents .markup-right-panel__padded-area::-webkit-scrollbar {
    width: var(--op-space-x-small);
  }
  .markup-panel--right .markup-panel__body .markup-right-panel__contents .markup-right-panel__padded-area::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .markup-panel--right .markup-panel__body .markup-right-panel__contents .markup-right-panel__padded-area::-webkit-scrollbar-thumb {
    background-color: var(--op-color-neutral-plus-four);
    box-shadow: none;
    border: 0;
    border-radius: 0;
  }
}
.markup-right-panel__content {
  --sl-input-spacing-medium: var(--op-space-small);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  align-content: end;
  color: var(--op-color-primary-on-plus-eight);
}
.markup-right-panel__content .markup-right-panel__content:not(sl-details > .markup-panel__context-content > .markup-right-panel__content) {
  padding: 0;
}
.markup-right-panel__content .markup-right-panel__inline-content {
  display: flex;
  gap: var(--op-space-x-small);
  width: 100%;
}
.markup-right-panel__content .form-group {
  padding: 0;
  width: 100%;
}
.markup-right-panel__content sl-select,
.markup-right-panel__content .catalog-item-modal__size-input {
  flex: 1;
}
.markup-right-panel__content sl-input::part(input) {
  padding-inline: var(--op-space-x-small) var(--op-space-small);
}
.markup-right-panel__content .panel-section--checkboxes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding: var(--op-space-small);
  background-color: var(--op-color-neutral-plus-seven);
  gap: var(--op-space-x-small);
}

.markup-right-panel__multi-select-header {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: var(--op-font-small);
}

.markup-right-panel__content-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-small);
}

.form-control.markup-panel__control {
  display: flex;
  align-items: center;
}
.form-control.markup-panel__control sl-range {
  width: 100%;
}
.form-control.markup-panel__control sl-switch {
  display: flex;
}

.markup-right-panel__footer-actions {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  background: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
  padding: var(--op-space-x-small);
  box-shadow: var(--op-border-top) var(--op-color-border);
  position: sticky;
  bottom: 0;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-right-panel__footer-actions {
    background: var(--op-color-neutral-plus-max);
    box-shadow: unset;
  }
}

.markup-right-panel__footer-actions--light {
  background: var(--op-color-neutral-plus-eight);
}

.markup-right-panel__composite-line-item {
  padding-top: 0;
}

.estimate-rollup__header {
  font-size: var(--op-font-x-small);
}

.estimate-rollup-footer__value {
  font-weight: var(--op-font-weight-bold);
}

.markup-right-panel__estimate-rollup-footer {
  height: var(--op-input-height-small);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: var(--op-font-x-small);
  border-top: var(--op-border-width) solid var(--op-color-border);
  padding: 0 var(--op-space-small);
  background-color: var(--op-color-primary-plus-eight);
  border-radius: 0 0 var(--op-radius-medium) var(--op-radius-medium);
}
.markup-right-panel__estimate-rollup-footer .markup-right-panel__varying-estimate-cost {
  font-style: italic;
  color: var(--op-color-primary-on-plus-eight);
}

.markup-right-panel__input-with-select sl-input {
  flex: 1;
}
.markup-right-panel__input-with-select sl-input::part(base) {
  border-radius: var(--op-radius-medium) 0px 0px var(--op-radius-medium);
}
.markup-right-panel__input-with-select sl-input[size=large]::part(base) {
  border-radius: var(--op-radius-large) 0px 0px var(--op-radius-large);
}
.markup-right-panel__input-with-select.markup-right-panel__input-with-select--object-diameter sl-input::part(base) {
  border-radius: var(--op-radius-medium) 0px 0px var(--op-radius-medium);
}
.markup-right-panel__input-with-select.markup-right-panel__input-with-select--object-diameter sl-input[size=small]::part(base) {
  border-radius: var(--op-radius-medium) 0px 0px var(--op-radius-medium);
}
.markup-right-panel__input-with-select sl-select.markup-right-panel__input-with-select--select {
  flex: 1;
}
.markup-right-panel__input-with-select sl-select.markup-right-panel__input-with-select--select::part(combobox) {
  border-radius: 0px var(--op-radius-medium) var(--op-radius-medium) 0px;
}
.markup-right-panel__input-with-select sl-select.markup-right-panel__input-with-select--select[size=large]::part(combobox) {
  border-radius: 0px var(--op-radius-large) var(--op-radius-large) 0px;
}
.markup-right-panel__input-with-select sl-select.markup-right-panel__input-with-select--select.markup-right-panel__input-with-select__object-units {
  width: 100%;
}
.markup-right-panel__input-with-select sl-select.markup-right-panel__input-with-select--select.markup-right-panel__input-with-select__object-units::part(combobox) {
  border-radius: 0px var(--op-radius-medium) var(--op-radius-medium) 0px;
}
.markup-right-panel__input-with-select sl-select.markup-right-panel__input-with-select--select.markup-right-panel__input-with-select__object-units[size=small]::part(combobox) {
  border-radius: 0px var(--op-radius-medium) var(--op-radius-medium) 0px;
}

.markup-right-panel__subtext {
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
}

.markup-right-panel__trix {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.markup-right-panel__trix .trix-button-row {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  transition: grid-template-rows 250ms ease-in-out;
}
.markup-right-panel__trix .trix-button-row .trix-row-content {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.markup-right-panel__trix .trix-button-row .trix-row-content .trix-button {
  border: none;
  height: var(--op-input-height-small);
  width: var(--op-input-height-small);
}
.markup-right-panel__trix .trix-button-row .trix-row-content .trix-button:disabled {
  opacity: 0.5;
}
.markup-right-panel__trix .trix-button-row.hidden {
  grid-template-rows: 0fr;
}
.markup-right-panel__trix trix-toolbar {
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  border-radius: var(--op-radius-medium) var(--op-radius-medium) 0px 0px;
  border-bottom: none;
  background: var(--op-color-neutral-plus-six);
  padding: var(--op-space-2x-small);
}
.markup-right-panel__trix trix-toolbar .trix-dialogs {
  position: absolute;
}
.markup-right-panel__trix trix-toolbar .trix-dialogs .trix-dialog {
  --op-trix-dialog-left-offset: calc(-1 * var(--op-space-2x-small));
  left: var(--op-trix-dialog-left-offset);
  right: unset;
}
.markup-right-panel__trix trix-editor {
  font-size: var(--op-font-small);
  border-radius: 0px 0px var(--op-radius-medium) var(--op-radius-medium);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.markup-right-panel__trix .trix-content trix-editor {
  padding: var(--op-space-x-small) var(--op-space-small);
}
.markup-right-panel__trix .trix-content trix-editor.trix-editor--read-only {
  border: unset;
  padding: 0;
  font-size: var(--op-font-small);
}

:root {
  --mobile-toolbar-position-offset: 16px;
}

.markup-toolbar {
  position: absolute;
  display: flex;
  gap: var(--op-space-2x-small);
  border-radius: var(--op-radius-large);
  background-color: var(--op-color-neutral-plus-eight);
  box-shadow: var(--op-markup-overlay-shadow);
  padding: var(--op-space-x-small);
  backdrop-filter: var(--op-background-blur-medium);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-toolbar {
    padding: 0;
  }
}
.markup-toolbar .markup-toolbar__item, .markup-toolbar sl-button[variant=default][icon].markup-toolbar__item::part(base) {
  margin: 0 var(--op-space-2x-small);
}
.markup-toolbar.markup-toolbar--responsive {
  /* --pi-breakpoint-markup-navbar */
}
@media only screen and (max-width: 1420px) {
  .markup-toolbar.markup-toolbar--responsive .flex {
    flex-direction: column;
  }
  .markup-toolbar.markup-toolbar--responsive {
    flex-direction: column;
  }
  .markup-toolbar.markup-toolbar--responsive .markup-toolbar__item, .markup-toolbar.markup-toolbar--responsive sl-button[variant=default][icon].markup-toolbar__item::part(base) {
    margin: 0;
  }
  .markup-toolbar.markup-toolbar--responsive .markup-toolbar__divider {
    border: none;
    margin: 0;
    border-top: var(--op-border-width) solid var(--op-color-neutral-plus-three);
    padding-bottom: var(--op-space-x-small);
    margin-top: var(--op-space-x-small);
  }
}
.markup-toolbar.markup-toolbar--responsive {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-toolbar.markup-toolbar--responsive {
    position: fixed;
    z-index: 2;
    top: var(--mobile-toolbar-position-offset);
    right: var(--mobile-toolbar-position-offset);
    background-color: unset;
    backdrop-filter: none;
    box-shadow: none;
    gap: var(--op-space-small);
    padding: 0;
  }
  .markup-toolbar.markup-toolbar--responsive .markup-toolbar__divider {
    display: none;
  }
  .markup-toolbar.markup-toolbar--responsive .markup-toolbar__item.active, .markup-toolbar.markup-toolbar--responsive sl-button.active[variant=default][icon].markup-toolbar__item::part(base) {
    color: var(--op-color-neutral-on-plus-eight);
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-two);
  }
  .markup-toolbar.markup-toolbar--responsive sl-details {
    width: 100%;
  }
  .markup-toolbar.markup-toolbar--responsive sl-details::part(base) {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
  }
  .markup-toolbar.markup-toolbar--responsive sl-details::part(header) {
    order: 1;
    display: flex;
    justify-content: center;
    padding-inline: 0;
  }
  .markup-toolbar.markup-toolbar--responsive sl-details::part(content) {
    order: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--op-space-2x-small);
  }
  .markup-toolbar.markup-toolbar--responsive sl-details::part(summary-icon) {
    rotate: none;
  }
  .markup-toolbar.markup-toolbar--responsive sl-details::part(summary) {
    display: none;
  }
  .markup-toolbar.markup-toolbar--responsive .markup-toolbar-section__non-collapsable {
    --non-collapsable-toolbar-segment-upper-border-radius: 5000px;
    border-radius: var(--non-collapsable-toolbar-segment-upper-border-radius) var(--non-collapsable-toolbar-segment-upper-border-radius) var(--op-radius-pill) var(--op-radius-pill);
  }
}

.markup-toolbar-section {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-toolbar-section {
    --mobile-toolbar-background-color: hsla(var(--op-color-neutral-h), var(--op-color-neutral-s), 98%, 0.70);
    --mobile-toolbar-blur: blur(4px);
    display: flex;
    flex-direction: column;
    gap: var(--op-space-2x-small);
    padding: var(--op-space-2x-small);
    align-items: center;
    border-radius: var(--op-radius-x-large);
    background-color: var(--mobile-toolbar-background-color);
    box-shadow: var(--op-markup-overlay-shadow);
    backdrop-filter: var(--mobile-toolbar-blur);
  }
  .markup-toolbar-section.markup-toolbar-section--undo-redo {
    position: fixed;
    top: var(--mobile-toolbar-position-offset);
    left: var(--mobile-toolbar-position-offset);
    flex-direction: row;
  }
  .markup-toolbar-section.markup-toolbar-section--undo-redo .markup-toolbar__divider {
    display: none;
  }
  .markup-toolbar-section.markup-toolbar-section--undo-redo .markup-toolbar__item, .markup-toolbar-section.markup-toolbar-section--undo-redo sl-button[variant=default][icon].markup-toolbar__item::part(base) {
    margin: 0;
  }
}

.markup-toolbar__divider {
  border-left: var(--op-border-width) solid var(--op-color-neutral-plus-three);
  padding-right: var(--op-space-x-small);
  margin-left: var(--op-space-x-small);
}

sl-button.markup-toolbar__item:not(.markup-toolbar__menu-trigger)::part(label) {
  color: var(--op-color-neutral-on-plus-eight);
}

sl-tooltip.markup-toolbar__item sl-badge {
  position: absolute;
  cursor: pointer;
  left: var(--op-space-md);
  top: var(--op-space-2x-large);
}
sl-tooltip.markup-toolbar__item button {
  color: inherit;
}
sl-tooltip.markup-toolbar__item.active path {
  fill: var(--op-color-primary-on-plus-five);
}

.markup-toolbar__item, sl-button[variant=default][icon].markup-toolbar__item::part(base) {
  color: var(--op-color-neutral-on-plus-eight);
  border-radius: var(--op-radius-medium);
  cursor: pointer;
  padding: var(--op-space-x-small);
  transition: var(--op-transition-input);
  position: relative;
}
.markup-toolbar__item sl-badge, sl-button[variant=default][icon].markup-toolbar__item::part(base) sl-badge {
  left: var(--op-space-md);
  top: var(--op-space-2x-large);
  position: absolute;
  cursor: pointer;
}
.markup-toolbar__item:hover:not(.markup-toolbar__item-disabled), sl-button[variant=default][icon].markup-toolbar__item:hover:not(.markup-toolbar__item-disabled)::part(base) {
  color: var(--op-color-primary-on-plus-five);
  background-color: var(--op-color-primary-plus-five);
  box-shadow: var(--op-border-all) var(--op-color-primary-plus-five);
}
.markup-toolbar__item.active, sl-button.active[variant=default][icon].markup-toolbar__item::part(base) {
  color: var(--op-color-primary-on-plus-five);
  background-color: var(--op-color-primary-plus-five);
  box-shadow: var(--op-border-all) var(--op-color-primary-minus-six);
}
.markup-toolbar__item.warning, sl-button.warning[variant=default][icon].markup-toolbar__item::part(base) {
  color: var(--op-color-alerts-warning-on-plus-two);
  background-color: var(--op-color-alerts-warning-plus-two);
  box-shadow: var(--op-border-all) var(--op-color-alerts-warning-minus-2), var(--icon-shadow);
}
.markup-toolbar__item.warning:hover, sl-button.warning[variant=default][icon].markup-toolbar__item:hover::part(base) {
  background-color: var(--op-color-alerts-warning-plus-one);
  color: var(--op-color-alerts-warning-on-plus-one);
}
.markup-toolbar__item.disabled, sl-button.disabled[variant=default][icon].markup-toolbar__item::part(base) {
  cursor: not-allowed;
}
.markup-toolbar__item.disabled:hover, sl-button.disabled[variant=default][icon].markup-toolbar__item:hover::part(base) {
  color: var(--op-color-neutral-minus-two);
}

.markup-toolbar__item-disabled button,
.markup-toolbar__item-disabled sl-badge {
  opacity: var(--op-opacity-half);
  cursor: not-allowed;
}

.markup-toolbar__icon, sl-button[variant=default][icon].markup-toolbar__item::part(base) {
  --icon-shadow: 0 3px 0 0 var(--op-color-neutral-plus-three);
  width: var(--op-input-height-x-small);
  height: var(--op-input-height-x-small);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--op-color-neutral-on-plus-eight);
  border-radius: var(--op-radius-circle);
  padding: var(--op-space-medium);
  /* --op-breakpoint-small */
}
@media only screen and (max-width: 768px) {
  .markup-toolbar__icon, sl-button[variant=default][icon].markup-toolbar__item::part(base) {
    width: var(--op-input-height-medium);
    height: var(--op-input-height-medium);
    border-radius: var(--op-radius-large);
  }
}

.markup-toolbar__menu-trigger {
  width: var(--op-input-height-x-small);
  height: var(--op-input-height-x-small);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--op-border-all) var(--op-color-border);
  background-color: var(--op-color-background);
  color: var(--op-color-neutral-on-plus-eight);
  border-radius: var(--op-radius-circle);
  cursor: pointer;
}
.markup-toolbar__menu-trigger:hover {
  color: var(--op-color-neutral-on-plus-six);
  background-color: var(--op-color-neutral-plus-six);
}
.markup-toolbar__menu-trigger {
  /* --op-breakpoint-small */
}
@media only screen and (max-width: 768px) {
  .markup-toolbar__menu-trigger {
    width: var(--op-input-height-medium);
    height: var(--op-input-height-medium);
  }
}

.background-opacity-control-menu-title {
  font-size: var(--op-font-x-small);
  white-space: nowrap;
}

.boundary-confirm-shape__transition-start {
  --initial-offset: 36px;
  width: 0;
  position: relative;
  left: var(--initial-offset);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .boundary-confirm-shape__transition-start {
    bottom: var(--initial-offset);
    top: 0;
  }
}

.boundary-confirm-shape {
  width: 100%;
  position: relative;
  left: 0;
  transition: all 150ms;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .boundary-confirm-shape {
    padding: var(--op-space-x-small);
  }
}

.mobile-toolbar-section {
  overflow: hidden;
  transition: all 300ms;
}

.boundary-shape-buttons {
  display: flex;
  gap: var(--op-space-x-small);
}
.boundary-shape-buttons.boundary-shape-buttons--active {
  background: var(--op-color-primary-plus-five);
  border-radius: var(--op-radius-pill);
}
.boundary-shape-buttons {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .boundary-shape-buttons {
    display: block;
  }
}

.drawing-editor-container__sidebar-and-canvas-wrapper {
  position: relative;
}

.canvas-area {
  --canvas-area-height: 100dvh;
  height: var(--canvas-area-height);
  position: relative;
}

.canvas-actions-popup {
  --op-canvas-actions-popup-shadow: 0px 17px 7px rgba(0, 0, 0, 0.01),
                                    0px 10px 6px rgba(0, 0, 0, 0.05),
                                    0px 4px 4px rgba(0, 0, 0, 0.09),
                                    0px 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  background-color: var(--op-color-neutral-plus-max);
  padding: var(--op-space-2x-small);
  gap: var(--op-space-2x-small);
  border-radius: var(--op-radius-large);
  box-shadow: var(--op-canvas-actions-popup-shadow);
}
.canvas-actions-popup .btn--no-border {
  background: transparent;
}
.canvas-actions-popup .btn--no-border .icon-medium {
  --op-canvas-action-icon-size: 24px;
  --op-icon-size: var(--op-canvas-action-icon-size);
}

.canvas-actions-popup--edit {
  align-items: center;
  padding: var(--op-space-x-small);
}
.canvas-actions-popup--edit span {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-neutral-on-plus-eight-alt);
}

.canvas-actions-popup--selection {
  --pi-selection-actions-width: calc(38 * var(--op-size-unit));
  flex-direction: column;
  align-items: stretch;
  min-width: var(--pi-selection-actions-width);
  padding: var(--op-space-x-small);
}
.canvas-actions-popup--selection .selection-actions__item {
  --pi-link-button-color: var(--op-color-neutral-on-plus-eight);
  --pi-link-button-color__hover: var(--op-color-neutral-on-plus-six);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--op-space-small);
  width: 100%;
  border-radius: var(--op-radius-medium);
  font-weight: var(--op-font-weight-normal);
  padding: var(--op-space-x-small);
  text-decoration: none;
}
.canvas-actions-popup--selection .selection-actions__item:hover {
  background-color: var(--op-color-neutral-plus-six);
}
.canvas-actions-popup--selection .selection-actions__item--danger {
  --pi-link-button-color: var(--op-color-alerts-danger-on-plus-max-alt);
  --pi-link-button-color__hover: var(--op-color-alerts-danger-on-plus-seven);
}
.canvas-actions-popup--selection .selection-actions__item--danger:hover {
  background-color: var(--op-color-alerts-danger-plus-seven);
}
.canvas-actions-popup--selection .divider {
  margin: 0;
  width: 100%;
}

.section-error-resolution-modal .modal__subheader.section-error-resolution__subheader {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--op-space-medium);
  font-size: var(--op-font-small);
  background-color: var(--op-color-neutral-plus-max);
  z-index: 1;
}

.background-map-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .background-map-container {
    z-index: -1;
  }
}

.background-map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: rotate(var(--map-rotation)) translate(var(--map-offset), var(--map-offset));
  background-color: var(--op-color-background);
}

.background-map-attribution {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: none;
}

.eagleview-logo {
  --eagleview-logo-width: 48px;
  position: absolute;
  bottom: var(--op-space-medium);
  right: var(--op-space-small);
  width: var(--eagleview-logo-width);
}

.google-maps-logo {
  --google-maps-logo-width: 64px;
  width: var(--google-maps-logo-width);
}

.offscreen-background-map {
  width: 100%;
  height: 100%;
  transform: rotate(var(--map-rotation)) translate(var(--map-offset), var(--map-offset));
}

.canvas-alert-container::part(panel) {
  background: none;
  box-shadow: none;
  height: 100%;
}
.canvas-alert-container::part(body), .canvas-alert-container::part(footer) {
  visibility: hidden;
}
.canvas-alert-container sl-alert {
  visibility: initial;
}
.canvas-alert-container sl-alert::part(message) {
  align-items: center;
}
.canvas-alert-container.no-overlay::part(overlay) {
  display: none;
}

.canvas-alert-container--allow-click::part(panel) {
  pointer-events: none;
}
.canvas-alert-container--allow-click::part(overlay) {
  pointer-events: none;
}
.canvas-alert-container--allow-click sl-alert::part(base) {
  pointer-events: all;
}

.canvas-annotation-notification {
  --annotation-notification-width: calc(159 * var(--op-size-unit));
  display: flex;
  width: var(--annotation-notification-width);
  justify-content: space-between;
  align-items: center;
  gap: var(--op-space-large);
}

.canvas-annotation-notification div:first-child {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  flex: 1 0 0;
}

.scale-not-set-title {
  font-size: var(--op-font-small);
  text-align: center;
}

.scale-not-set-body {
  font-size: var(--op-font-x-small);
  text-align: center;
}

.measured-length-unit {
  font-size: var(--op-font-small);
}

.draw-line-message {
  font-size: var(--op-font-small);
  white-space: nowrap;
  margin-bottom: var(--op-space-x-small);
}

.scale-equation {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  font-size: var(--op-font-small);
}
.scale-equation .scale-control__input {
  min-width: var(--op-scale-input-width);
}

.mobile-markup-action-wrapper {
  position: fixed;
  bottom: var(--op-markup-view-editor-padding);
  bottom: calc(var(--op-markup-view-editor-padding) + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
}
.mobile-markup-action-wrapper .btn {
  background: var(--op-markup-overlay-opaque-color);
  backdrop-filter: blur(var(--op-background-blur-small));
}
.mobile-markup-action-wrapper.mobile-markup-action-wrapper--left {
  z-index: 1;
  left: var(--op-space-medium);
  transform: unset;
}
.mobile-markup-action-wrapper.mobile-markup-action-wrapper--right {
  right: var(--op-space-medium);
  left: unset;
  transform: unset;
}

.section-error-resolution {
  gap: var(--op-space-medium);
}

.section-error-resolution__instructions {
  margin: 0;
  color: var(--op-color-neutral-on-plus-max);
}

.section-error-resolution__version-list {
  display: grid;
  gap: var(--op-space-small);
}

.section-error-resolution__version-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--op-space-small);
  padding: var(--op-space-small);
  border: var(--op-border-width) solid var(--op-color-border);
  border-radius: var(--op-radius-medium);
  background: var(--op-color-neutral-plus-max);
}

.section-error-resolution__checkbox-label {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--op-space-small);
}

.section-error-resolution__checkbox-label input {
  margin: 0;
}

.section-error-resolution__checkbox-label.section-error-resolution__checkbox-label--disabled {
  --section-error-resolution-disabled-opacity: 0.6;
  cursor: default;
  opacity: var(--section-error-resolution-disabled-opacity);
}

.section-error-resolution__version-label {
  --section-error-resolution-version-label-min-width: calc(24 * var(--op-size-unit));
  min-width: var(--section-error-resolution-version-label-min-width);
  font-weight: var(--op-font-weight-semi-bold);
}

.section-error-resolution__version-date {
  color: var(--op-color-neutral-on-plus-max-alt);
  font-size: var(--op-font-small);
}

.section-error-resolution__version-type {
  --section-error-resolution-version-pill-radius: 999px;
  padding: var(--op-space-3x-small) var(--op-space-x-small);
  border-radius: var(--section-error-resolution-version-pill-radius);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-neutral-on-minus-eight);
  background: var(--op-color-neutral-plus-two);
}

.section-error-resolution__empty {
  padding: var(--op-space-small);
  border: var(--op-border-width) dashed var(--op-color-border);
  border-radius: var(--op-radius-medium);
  color: var(--op-color-neutral-on-plus-max-alt);
  font-size: var(--op-font-small);
}

.section-error-resolution__status {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  padding: var(--op-space-small);
  border-radius: var(--op-radius-medium);
  border: var(--op-border-width) solid transparent;
  font-weight: var(--op-font-weight-semi-bold);
  width: 100%;
}

.section-error-resolution__status.section-error-resolution__status--error {
  color: var(--op-color-alerts-danger-on-plus-six);
  background: var(--op-color-alerts-danger-plus-six);
  border-color: var(--op-color-alerts-danger-on-plus-six);
}

.section-error-resolution__status.section-error-resolution__status--testing {
  color: var(--op-color-alerts-info-on-plus-six);
  background: var(--op-color-alerts-info-plus-six);
  border-color: var(--op-color-alerts-info-on-plus-six);
}

.section-error-resolution__status.section-error-resolution__status--resolved {
  color: var(--op-color-alerts-notice-on-plus-six);
  background: var(--op-color-alerts-notice-plus-six);
  border-color: var(--op-color-alerts-notice-on-plus-six);
}

.section-error-resolution__status-icon {
  flex-shrink: 0;
}

.section-error-resolution__footer {
  flex-direction: column;
}

:root {
  --row-height: calc(var(--op-space-scale-unit) * 5.2);
  --pi-height-catalog-item-row: calc(var(--op-space-scale-unit) * 3.2);
}

.material-list__inline-item-action {
  color: var(--op-color-neutral-on-plus-six);
  padding: 0;
}
.material-list__inline-item-action:hover {
  color: var(--op-color-primary-on-plus-five);
}
.material-list__inline-item-action.material-list__inline-item-action--danger {
  color: var(--op-color-alerts-danger-base);
}
.material-list__inline-item-action.material-list__inline-item-action--danger:hover {
  color: var(--op-color-alerts-danger-plus-one);
}
@media (hover: hover) {
  .material-list__inline-item-action.hidden-button {
    visibility: hidden;
  }
  .material-list__item-container:hover .material-list__inline-item-action {
    visibility: visible;
  }
  .markup-panel__header:hover .material-list__inline-item-action {
    visibility: visible;
  }
  .material-list__item-container:hover .material-list__inline-item-action:not(.section__disabled-panel .material-list__inline-item-action) {
    visibility: visible;
  }
  .markup-panel__header:hover .material-list__inline-item-action:not(.section__disabled-panel .material-list__inline-item-action) {
    visibility: visible;
  }
}

.material-list__button-group {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  padding-left: var(--op-space-small);
  justify-content: flex-end;
}

.material-list__item-container {
  display: flex;
  align-items: center;
  border: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  width: 100%;
  gap: var(--op-space-2x-small);
  min-height: var(--pi-height-catalog-item-row);
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  padding: 0 var(--op-space-small) 0 var(--op-space-x-small);
  position: relative;
  border-radius: var(--op-radius-small);
}
@media not (hover: hover) {
  .material-list__item-container {
    padding-left: var(--op-space-2x-small);
  }
}
.material-list__item-container {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .material-list__item-container {
    padding: 0 var(--op-space-large) 0 var(--op-space-small);
    border-radius: var(--op-radius-large);
    background-color: var(--op-color-neutral-plus-max);
    border: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  }
}
@media not (hover: hover) {
  .material-list__item-container .draggable-row__handle {
    --handle-fixed-width: 20px;
    padding-left: var(--op-space-2x-small);
    width: var(--handle-fixed-width);
  }
}
.material-list__item-container .draggable-row__handle {
  transition: width 200ms;
  display: flex;
  justify-content: center;
  background-color: var(--op-color-neutral-plus-eight);
  z-index: 10;
}
.material-list__item-container.selectable:hover:not(.disabled) {
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
}
.material-list__item-container.selectable:hover:not(.disabled) .draggable-row__handle {
  background-color: var(--op-color-neutral-plus-six);
}
.material-list__item-container.selected {
  background-color: var(--op-color-primary-plus-six);
}
.section-details .material-list__item-container {
  border-radius: 0;
  border-color: var(--op-color-neutral-plus-four);
}
.material-list__item-container.material-list__item-container--ai-materials-modal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  padding: var(--op-space-x-small) var(--op-space-medium);
  font-size: var(--op-font-small);
  min-height: unset;
}
.material-list__item-container.material-list__item-container--ai-materials-modal .material-list__item-title {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
}
.material-list__item-container.material-list__item-container--ai-materials-modal .material-list__item-contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.material-list__item-container.material-list__item-container--ai-materials-modal .material-list__item-estimate-label {
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-max-alt);
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
}
.material-list__item-container.material-list__item-container--ai-materials-modal .material-list__item-delete {
  transition: all 300ms ease;
  width: 0px;
  overflow: hidden;
}
.material-list__item-container.material-list__item-container--ai-materials-modal:hover .material-list__item-delete {
  --delete-button-width: 3.2rem;
  width: var(--delete-button-width);
  margin-left: var(--op-space-x-small);
}
.material-list__item-container.material-list__item-container--ai-materials-modal .material-list__item-contents .material-list__item-actions {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}

.material-list__input-item {
  display: flex;
  height: 100%;
  align-items: center;
}
.markup-panel .material-list__input-item {
  flex-direction: column;
  align-items: flex-start;
}

.material-list__item {
  text-align: left;
  display: flex;
  gap: var(--op-space-small);
  justify-content: flex-start;
  align-items: center;
  font-size: var(--op-font-x-small);
  line-height: var(--op-line-height-dense);
  padding: 0;
}
.markup-left-panel__materials .material-list__item {
  padding: var(--op-space-2x-small) 0 var(--op-space-2x-small) 0;
}
.material-list__item {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .material-list__item {
    height: 100%;
    color: var(--op-color-neutral-on-plus-max);
  }
}
.material-list__item:disabled {
  cursor: auto;
}

.material-list__group .markup-panel__header {
  line-height: normal;
  background-color: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-five);
  font-weight: var(--op-font-weight-bold);
  justify-content: space-between;
  font-size: var(--op-font-small);
  display: flex;
  width: 100%;
  padding-inline: var(--op-space-x-small) var(--op-space-small);
  border-radius: var(--op-radius-small);
}
.material-list__group .markup-panel__header.is-open {
  color: var(--op-color-primary-on-plus-six);
  background-color: var(--op-color-primary-plus-six);
  border-bottom: var(--op-border-width) solid var(--op-color-primary-plus-one);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.material-list__group .markup-panel__header.is-open:hover {
  color: var(--op-color-primary-on-plus-five);
  background-color: var(--op-color-primary-plus-five);
}
.material-list__group .markup-panel__header.is-open:hover input,
.material-list__group .markup-panel__header.is-open:hover .material-symbols-outlined:not([title=delete]) {
  color: var(--op-color-primary-on-plus-seven);
}
.material-list__group .markup-panel__header .material-list__group-actions {
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
}
.material-list__group .markup-panel__header:hover {
  color: var(--op-color-neutral-on-plus-seven);
  background-color: var(--op-color-neutral-plus-seven);
}
.material-list__group .markup-panel__header:hover span[title=drag_indicator] {
  visibility: visible;
  opacity: 1;
  width: 1.5rem;
}
.material-list__group .markup-panel__header .material-list__item-contents {
  width: 100%;
  display: grid;
  align-items: center;
  grid-template-columns: auto auto 1fr auto;
}
.material-list__group .markup-panel__header .material-list__item-contents.material-list__item-contents--read-only {
  grid-template-columns: auto 1fr;
}
.material-list__group .markup-panel__header .material-list__item-contents .property-map-group-name-button {
  overflow: hidden;
  width: 100%;
  justify-content: flex-start;
  padding: 0;
}
.material-list__group .markup-panel__header .material-list__item-contents {
  /* --op-breakpoint-small */
}
@media screen and (max-width: 768px) {
  .material-list__group .markup-panel__header .material-list__item-contents {
    grid-template-columns: 1fr auto;
  }
  .material-list__group .markup-panel__header .material-list__item-contents button {
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    gap: var(--op-space-small);
    color: var(--op-color-neutral-on-plus-max);
  }
}
.material-list__group .markup-panel__header .markup-left-panel__catalog-group-name {
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-x-small);
  padding: var(--op-space-2x-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-list__group .markup-panel__header.selected {
  border-bottom: var(--op-border-width) solid var(--op-color-primary-plus-one);
}
.material-list__group .material-list__item-container {
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
  padding-left: var(--op-space-medium);
}

.material-list__group ~ div .material-list__item-container {
  padding-block: 0;
}

.material-list__delete-group-message {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-semi-bold);
}

.material-list__loading-contents {
  background: var(--op-color-neutral-plus-five);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--op-space-small);
  border: var(--op-border-width) solid var(--op-color-border);
  border-radius: var(--op-radius-large);
  padding: var(--op-space-large);
}

.material-list__group-name {
  font-size: var(--op-font-small);
}

.material-list__group-preview {
  border: var(--op-border-width) solid var(--op-color-border);
  border-radius: var(--op-radius-medium);
  overflow-y: auto;
}

.material-list__group-preview-header {
  background: var(--op-color-neutral-plus-five);
  padding: var(--op-space-x-small) var(--op-space-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.material-list__group-preview-item {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-six);
  padding: var(--op-space-small) var(--op-space-medium);
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-x-small);
}
.material-list__group-preview-item:not(:last-child) {
  box-shadow: inset var(--op-border-top) var(--op-color-border);
}

.material-list__delete-group-warning-text {
  color: var(--op-color-alerts-danger-base);
}

.section-details__collapsible-section .markup-panel__header,
.section-details__collapsible-section .material-list__item {
  height: var(--row-height);
}
.section-details__collapsible-section .markup-panel__header.is-open,
.section-details__collapsible-section .material-list__item.is-open {
  border-bottom: unset;
}
.section-details__collapsible-section .material-list__item {
  cursor: grab;
}
.section-details__collapsible-section .material-list__item-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.section-details__collapsible-section .material-list__item-container,
.section-details__collapsible-section .material-list__header-columns {
  --actions-width: 14rem;
  --min-name-width: 16rem;
  --min-inputs-width: 14rem;
  --arrow-width: 3.2rem;
  display: grid;
  grid-template-columns: minmax(var(--min-name-width), 35fr) minmax(var(--min-inputs-width), 1fr) var(--arrow-width) minmax(var(--min-inputs-width), 1fr) minmax(var(--actions-width), 6fr);
  grid-template-areas: "item_name placed arrow_spacer estimate actions";
}
.section-details__collapsible-section .material-list__tree-item {
  border: var(--op-border-width) solid var(--op-color-border);
  border-radius: var(--op-radius-medium);
  overflow: hidden;
  margin-top: var(--op-space-x-small);
  margin-bottom: var(--op-space-x-small);
}
.section-details__collapsible-section .material-list__tree-item__top {
  border: var(--op-border-width) solid var(--op-color-border);
  border-radius: var(--op-radius-medium) var(--op-radius-medium) 0 0;
  overflow: hidden;
  margin-top: var(--op-space-x-small);
}
.section-details__collapsible-section .material-list__tree-item__bottom {
  border: var(--op-border-width) solid var(--op-color-border);
  border-radius: 0 0 var(--op-radius-medium) var(--op-radius-medium);
  overflow: hidden;
  margin-bottom: var(--op-space-x-small);
}
.section-details__collapsible-section .material-list__header-columns {
  gap: var(--op-space-small);
  font-size: var(--op-font-small);
  padding: var(--op-space-x-small) var(--op-space-small);
  align-items: center;
}
.section-details__collapsible-section .material-list__item-area-item_name {
  grid-area: item_name;
}
.section-details__collapsible-section .material-list__item-area-estimate {
  grid-area: estimate;
  margin-left: var(--op-space-small);
}
.section-details__collapsible-section .material-list__item-area-arrow_spacer {
  grid-area: arrow_spacer;
}
.section-details__collapsible-section .material-list__item-area-placed {
  grid-area: placed;
  margin-left: var(--op-space-small);
}
.section-details__collapsible-section .material-list__item-area-actions {
  grid-area: actions;
}

.material-list__item-name-text {
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-eight);
}

.material-list__items-group-name-text {
  padding-top: var(--op-space-2x-small);
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
}

.material-list__header-label-text {
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-seven-alt);
  font-weight: var(--op-font-weight-normal);
}

.section-details__section-title {
  font-size: var(--op-font-medium);
}

.depth-input-value {
  font-size: var(--op-font-x-small);
}

.unit-rate-input-value {
  --3x-space-scale-unit: calc(var(--op-space-scale-unit) * 3);
  width: var(--3x-space-scale-unit);
  text-wrap: nowrap;
  font-size: var(--op-font-x-small);
}

.catalog-item__name {
  font-weight: var(--op-font-weight-semi-bold);
}

.ai-materials-modal__item-estimate-input {
  --estimate-input-width: 9.6rem;
  width: var(--estimate-input-width);
}

.ai-materials-modal__group-options {
  position: absolute;
  top: var(--op-space-x-small);
  right: var(--op-space-medium);
  display: flex;
  align-items: center;
}
.ai-materials-modal__group-options .ai-materials-modal__group-options-dropdown {
  transition: all 300ms ease;
  width: 0px;
  overflow: hidden;
}

.ai-materials-modal__group-container {
  position: relative;
}
.ai-materials-modal__group-container:hover .ai-materials-modal__group-options .ai-materials-modal__group-options-dropdown {
  --delete-button-width: 3.2rem;
  width: var(--delete-button-width);
  margin-left: var(--op-space-x-small);
}
.ai-materials-modal__group-container .ai-materials-modal__group-name-input {
  display: block;
  position: absolute;
  top: var(--op-space-small);
  left: var(--op-space-3x-large);
  width: 50%;
  border: none;
  background-color: unset;
  border-radius: var(--op-radius-medium);
  padding: var(--op-space-2x-small);
  text-overflow: ellipsis;
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-x-small);
}
.ai-materials-modal__group-container .ai-materials-modal__group-name-input:hover {
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-two);
}
.ai-materials-modal__group-container .ai-materials-modal__group-name-input:focus {
  box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-two);
  background-color: var(--op-color-neutral-plus-six);
  outline: none;
}

sl-button.ai-materials-modal__prompt-button[size=small] {
  height: 100%;
}
sl-button.ai-materials-modal__prompt-button[size=small] .icon {
  color: var(--op-color-alerts-notice-on-plus-eight-alt);
}
sl-button.ai-materials-modal__prompt-button[size=small]::part(base) {
  --prompt-button-width: 4rem;
  height: 100%;
  width: var(--prompt-button-width);
}

:root {
  --pi-control-panel-bottom-safari: 50px;
  --pi-control-panel-z-index: 500;
  --pi-control-panel-wrapper-width: 92vw;
}

.control-panel-wrapper {
  position: fixed;
  bottom: var(--op-markup-view-editor-padding);
  bottom: calc(var(--op-markup-view-editor-padding) + var(--pi-control-panel-bottom-safari) + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--pi-control-panel-z-index);
  padding: var(--op-space-x-small);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  border-radius: var(--op-radius-x-large);
  background: var(--op-mobile-markup-background);
  box-shadow: var(--op-control-panel-shadow);
  backdrop-filter: blur(4px);
  width: var(--pi-control-panel-wrapper-width);
}
.control-panel-wrapper .markup-panel__toggle-section {
  background: var(--op-color-neutral-plus-seven);
}
.control-panel-wrapper .markup-panel__variable-option-container {
  width: auto;
}
.control-panel-wrapper sl-radio-group {
  background: var(--op-color-neutral-plus-seven);
  border-radius: var(--op-radius-large);
}
.control-panel-wrapper sl-button-group {
  background: var(--op-color-neutral-plus-seven);
}

.control-panel-wrapper--inline {
  flex-direction: row;
  width: fit-content;
}

.control-panel-wrapper--segment-length {
  width: var(--pi-control-panel-wrapper-width);
}
.control-panel-wrapper--segment-length .control-panel-wrapper__label {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-neutral-on-plus-eight-alt);
}

.control-panel-wrapper__bubble {
  background: var(--op-color-neutral-plus-seven);
  border-radius: var(--op-radius-large);
  display: flex;
  padding: var(--op-space-x-small) var(--op-space-small);
  align-items: center;
  gap: var(--op-space-x-small);
  align-self: stretch;
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}

.control-panel-wrapper__bubble--fill {
  flex: 1 0 0;
  overflow: hidden;
}

.control-panel-wrapper__collapsible {
  transition: all 250ms;
}

.control-panel-wrapper__collapsible:not(.control-panel-wrapper__collapsible--collapsed) sl-color-picker.square::part(trigger)::before {
  border-radius: var(--op-radius-large);
}

.control-panel-wrapper__collapsible--collapsed {
  width: unset;
  left: unset;
  transform: unset;
  right: var(--mobile-toolbar-position-offset);
  padding: var(--op-space-x-small);
}
.control-panel-wrapper__collapsible--collapsed sl-color-picker.square::part(trigger) {
  height: var(--op-input-height-large);
  width: var(--op-input-height-large);
}

.control-panel-wrapper__collapsible--collapsing {
  overflow: hidden;
}

.control-panel__primary-action {
  display: flex;
  align-items: center;
  justify-content: left;
  flex-grow: 1;
}

.control-panel__primary-action-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.control-panel__toggle {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: var(--op-space-x-small) var(--op-space-small);
  border-radius: var(--op-radius-large);
  background: var(--op-color-neutral-plus-seven);
}

.control-panel__full-buttons {
  display: flex;
  gap: var(--op-space-x-small);
}
.control-panel__full-buttons button {
  flex-grow: 1;
}

:root {
  --pi-control-panel-bottom-safari: 50px;
}

.search-tool {
  /* Header */
  --shadow-subtle: 0 1px 0 0 rgba(0, 0, 0, 0.04);
  --shadow-elevated: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
  --shadow-combined: var(--shadow-subtle), var(--shadow-elevated);
  position: fixed;
  inset-block-end: var(--op-markup-view-editor-padding);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: var(--pi-control-panel-z-index);
  display: flex;
  padding: var(--op-space-x-small);
  align-items: center;
  gap: var(--op-space-x-small);
  flex: 1;
  border-radius: var(--op-radius-x-large);
  border: var(--op-border-width) solid var(--op-color-primary-minus-three);
  background: var(--op-color-neutral-plus-max);
  box-shadow: var(--shadow-combined);
}
.search-tool sl-select::part(form-control-input) {
  width: fit-content;
}
.search-tool sl-select::part(combobox) {
  /* 140px */
  --page-select-width: calc(var(--op-size-unit) * 35);
  width: var(--page-select-width);
}
.search-tool sl-input::part(input) {
  /* 236px */
  --search-input-width: calc(59 * var(--op-size-unit));
  width: var(--search-input-width);
}
.search-tool .search-tool__alert {
  /* 340px */
  --page-analysis-width: calc(85 * var(--op-size-unit));
  border-radius: var(--op-radius-large);
  background-color: var(--op-color-alerts-notice-plus-six);
  color: var(--op-color-alerts-notice-on-plus-six);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  display: flex;
  padding: var(--op-space-x-small) var(--op-space-small);
  align-items: center;
  gap: var(--op-space-medium);
  width: var(--page-analysis-width);
  flex: 1 0 0;
}
.search-tool .search-tool__counter {
  --desktop-counter-width: calc(var(--op-size-unit) * 10);
  min-width: var(--desktop-counter-width);
  text-align: center;
  font-size: var(--op-font-small);
}
@media (max-width: 768px) {
  .search-tool {
    --backdrop-blur: 4px;
    /* 348px */
    --search-tool-width-mobile: calc(87 * var(--op-size-unit));
    border-radius: var(--op-radius-x-large);
    background: var(--op-mobile-markup-background);
    box-shadow: var(--op-control-panel-shadow);
    backdrop-filter: blur(var(--backdrop-blur));
    align-items: stretch;
    width: var(--search-tool-width-mobile);
  }
  .search-tool sl-radio-group::part(button-group) {
    border: none;
  }
  .search-tool sl-input {
    flex: 1;
  }
  .search-tool .search-tool__counter {
    --mobile-search-tool-counter-width: calc(var(--op-size-unit) * 10);
    font-size: var(--op-font-small);
    font-weight: var(--op-font-weight-normal);
    min-width: var(--mobile-search-tool-counter-width);
    text-align: center;
  }
  .search-tool .search-tool__stepper {
    display: flex;
    gap: var(--op-space-x-small);
    align-items: center;
    font-size: var(--op-font-medium);
    flex: 1;
  }
  .search-tool .search-tool__stepper * {
    flex: 1;
  }
}
.search-tool.search-tool--centered {
  align-items: center;
}

.search-tool__dropdown-option {
  text-wrap-mode: nowrap;
}

.modal-drawer__body {
  padding: var(--op-space-small);
  font-size: var(--op-font-x-small);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
}

.modal-drawer__row {
  display: flex;
  justify-content: space-between;
  gap: var(--op-space-medium);
}

.modal-drawer__label {
  max-width: 45%;
}

.modal-drawer__value {
  font-weight: var(--op-font-weight-bold);
  text-align: end;
  max-width: 55%;
}

.modal-drawer__loading {
  display: flex;
  align-items: center;
}

sl-details .modal-drawer__loading {
  padding: var(--op-space-medium) var(--op-space-small);
  gap: var(--op-space-medium);
  font-size: var(--op-font-medium);
}
sl-details .modal-drawer__loading .modal-drawer__loading-message {
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
}

sl-drawer .modal-drawer__loading {
  --spinner-size: 6rem;
  flex-direction: column-reverse;
  height: 100%;
  justify-content: center;
  font-size: var(--spinner-size);
  gap: var(--op-space-medium);
}
sl-drawer .modal-drawer__loading .modal-drawer__loading-message {
  font-size: var(--op-font-x-large);
}

.onboarding-module .onboarding-module__title {
  --letter-spacing: -0.8px;
  color: var(--op-color-neutral-on-plus-five-alt);
  font-size: var(--op-font-x-large);
  font-weight: var(--op-font-weight-semi-bold);
  letter-spacing: var(--letter-spacing);
}
.onboarding-module .onboarding-module__completion-tracker {
  color: var(--op-color-primary-on-plus-seven-alt);
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-semi-bold);
  align-items: center;
}
.onboarding-module .onboarding-module__pi-icon {
  --icon-size: calc(var(--op-space-scale-unit) * 3.2);
  --pi-icon: url("/assets/pi-icon-3a6dc893.svg");
  background-image: var(--pi-icon);
  display: flex;
  width: var(--icon-size);
  height: var(--icon-size);
  justify-content: center;
  align-items: center;
  background-size: var(--icon-size);
  background-position: center;
  background-repeat: no-repeat;
}
.onboarding-module .onboarding-module__main-text {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.onboarding-module .onboarding-module__card-text {
  color: var(--op-color-neutral-on-plus-seven);
  font-weight: var(--op-font-weight-medium);
}
.onboarding-module .onboarding-module__card-text--alt {
  color: var(--op-color-neutral-on-plus-seven-alt);
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-small);
}
.onboarding-module .onboarding-module__guide-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--op-space-scale-unit);
}
.onboarding-module .onboarding-module__guide-container .onboarding-module__guide {
  --pi-onboarding-guide-min-width: calc(var(--op-size-unit) * 105);
  flex: 1 1 calc(50% - var(--op-space-scale-unit));
  border-radius: var(--op-radius-large);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  background: var(--op-color-neutral-plus-seven);
  min-width: var(--pi-onboarding-guide-min-width);
  padding: var(--op-space-small);
}
.onboarding-module .onboarding-module__module-buttons {
  align-items: center;
  display: flex;
  gap: var(--op-space-x-small);
}

.pi-complete-panel__title-block {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-semi-bold);
  line-height: normal;
}
.pi-complete-panel__title-block p,
.pi-complete-panel__title-block h3 {
  margin-bottom: 0;
}

.pi-complete-panel__subtitle {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
}

.pi-complete-panel__contents {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}
.pi-complete-panel__contents .form-group {
  padding: 0;
}
.pi-complete-panel__contents .markup-panel__divider {
  margin: 0;
}

.pi-complete-panel__icon-row {
  font-size: var(--op-font-x-small);
}
.pi-complete-panel__icon-row span.material-symbols-outlined {
  color: var(--op-color-primary-base);
}
.pi-complete-panel__icon-row {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  font-weight: var(--op-font-weight-normal);
}

.pi-complete-panel__actions {
  display: flex;
  flex-direction: column;
  padding: var(--op-space-x-small) var(--op-space-small);
  gap: var(--op-space-x-small);
  border-bottom: solid var(--op-border-width) var(--op-color-border);
}
.pi-complete-panel__actions.pi-complete-panel__actions--no-border {
  padding: var(--op-space-x-small) var(--op-space-small) 0 var(--op-space-small);
  border-bottom: unset;
}

.pi-complete-panel__header {
  --op-shadow-small: 0px 4px 6px 0px var(--op-color-neutral-plus-six);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: var(--side-panel-width);
  font-weight: var(--op-font-weight-semi-bold);
  background: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-six);
  gap: var(--op-space-large);
  box-shadow: var(--op-shadow-small);
  padding: var(--op-space-small) var(--op-space-medium);
}

.pi-complete-panel__section {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
}
.pi-complete-panel__section h3 {
  margin-bottom: 0;
}
.pi-complete-panel__section .pi-complete-panel__section-title {
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-x-small);
}
.pi-complete-panel__section.pi-complete-panel__section--condensed {
  gap: var(--op-space-x-small);
}
.pi-complete-panel__section.pi-complete-panel__section--condensed sl-button::part(base) {
  width: auto;
}
.pi-complete-panel__section.pi-complete-panel__section--extra-condensed {
  gap: var(--op-space-2x-small);
}

.pi-complete-panel__notes-section {
  word-break: break-all;
  font-size: var(--op-font-x-small);
}

.pi-complete-panel__submitted-date {
  font-size: var(--op-font-x-small);
  border: var(--op-border-width) solid var(--op-color-primary-minus-three);
  padding: var(--op-space-x-small) var(--op-space-small);
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-primary-plus-five);
  color: var(--op-color-primary-on-plus-five);
}

.pi-complete-feature-list__custom-feature {
  border-bottom: var(--op-border-width) solid var(--op-color-primary-minus-three);
}

.pi-complete-panel__review-card {
  color: var(--op-color-neutral-on-plus-max-alt);
  font-size: var(--op-font-x-small);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
  box-shadow: 0 0 0 var(--op-border-width) var(--op-color-neutral-plus-five);
  border-radius: var(--op-radius-medium);
  overflow: hidden;
}

.pi-complete-panel__review-detail-text {
  color: var(--op-color-neutral-on-plus-max);
}

.pi-complete-panel__review-detail {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.pi-complete-panel__review-detail-card {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  padding: var(--op-space-x-small) var(--op-space-small);
}

.pi-complete-panel__review-detail-header {
  --pi-complete-property-review-card-header-height: calc(var(--op-size-unit) * 9);
  height: var(--pi-complete-property-review-card-header-height);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--op-space-x-small);
  font-size: var(--op-font-x-small);
  color: inherit;
  min-width: 0;
  gap: var(--op-space-x-small);
}
.pi-complete-panel__review-detail-header span {
  word-break: break-word;
  text-align: left;
}
.pi-complete-panel__review-detail-header:hover {
  color: var(--op-color-neutral-on-plus-six);
  background: var(--op-color-neutral-plus-six);
}
.pi-complete-panel__review-detail-header.active {
  padding-block: var(--op-space-2x-small);
  color: var(--op-color-primary-on-plus-seven);
  background-color: var(--op-color-primary-plus-seven);
}
.pi-complete-panel__review-detail-header.confirmed {
  color: var(--op-color-neutral-on-plus-five);
  background: var(--op-color-neutral-plus-five);
}
.pi-complete-panel__review-detail-header.noboundary {
  color: var(--op-color-alerts-warning-on-plus-seven);
  background: var(--op-color-alerts-warning-plus-seven);
}
.pi-complete-panel__review-detail-header .pi-complete-panel__review-card-click-zone {
  flex: 1;
  min-width: 0;
  padding: 0;
}

.pi-complete-panel__truncate-address-header {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.pi-complete-panel__status-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: var(--side-panel-width);
}

.project-template__scroll-container {
  --scroll-container-height: calc(100vh - var(--pi-project-modal-subfooter-height) - var(--pi-subheader-height) - var(--pi-project-modal-tabs-height) - var(--pi-default-templates-section-height));
  --scrollable-content-max-height: 48rem;
  height: var(--scroll-container-height);
  max-height: var(--scrollable-content-max-height);
  overflow-y: auto;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .project-template__scroll-container {
    max-height: unset;
  }
}

.project-template__container {
  --min-template-width: 200px;
  display: grid;
  gap: var(--op-space-medium);
  grid-template-columns: repeat(3, minmax(var(--min-template-width), 1fr));
  background-color: var(--op-color-neutral-plus-2);
  color: var(--op-color-neutral-on-plus-2);
  padding: var(--op-space-x-large);
  /* --op-breakpoint-medium */
}
@media (max-width: 1024px) {
  .project-template__container {
    grid-template-columns: repeat(2, minmax(var(--min-template-width), 1fr));
  }
}
.project-template__container {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .project-template__container {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
}

.project-template {
  color: var(--op-color-neutral-on-plus-max);
  background-color: var(--op-color-neutral-plus-max);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  border-radius: var(--op-radius-large);
  --template-height: 16rem;
  height: var(--template-height);
  display: flex;
  flex-direction: column;
}
.project-template:hover:not([disabled]) {
  border-color: var(--op-color-primary-base);
  background-color: var(--op-color-primary-plus-six);
}
.project-template {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .project-template {
    border: none;
    background-color: var(--op-color-neutral-plus-eight);
    color: var(--op-color-neutral-on-plus-eight);
  }
}
.project-template .btn,
.project-template .btn:hover {
  border: 0;
  box-shadow: none;
  /* --op-breakpoint-small */
}
@media (min-width: 768px) {
  .project-template .btn,
  .project-template .btn:hover {
    border-radius: 0;
    border-top-left-radius: var(--op-radius-large);
    border-top-right-radius: var(--op-radius-large);
  }
}
.project-template sl-tooltip::part(content) {
  white-space: normal;
}

.project-template__header {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  padding: var(--op-space-small);
  width: 100%;
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
}

.project-template__footer {
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  padding: var(--op-space-small);
  width: 100%;
}

.project-template__description {
  --project-template-description-height: 4.2rem;
  font-size: var(--op-font-small);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  width: 100%;
  white-space: normal;
  text-align: initial;
  height: var(--project-template-description-height);
  color: var(--op-color-neutral-on-plus-seven-alt);
}

.project-template__icon {
  color: var(--op-color-primary-base);
}

.project-template__choose-custom-mobile-button {
  color: var(--op-color-primary-on-plus-six);
  background-color: var(--op-color-primary-plus-six);
  padding: var(--op-space-x-small) var(--op-space-x-small) var(--op-space-x-small) var(--op-space-small);
  box-shadow: none;
  border-radius: var(--op-radius-pill);
  width: 100%;
}

.project__modal-label {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}

.project__modal-label--mobile {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.project__modal-label--alt {
  color: var(--op-color-neutral-on-plus-max-alt);
}

.project__blank-page-radio {
  position: absolute;
  opacity: 0;
}
.project__blank-page-radio:checked + .btn--outlined-area {
  border-style: solid;
  border-color: var(--op-color-primary-minus-three);
  background-color: var(--op-color-primary-plus-five);
}

.project__pdf-page-selector {
  --pi-pdf-page-selector-height: 54rem;
  --pi-pdf-page-selector-banner-height: 5.4rem;
  --pi-pdf-pages-container-height: calc(var(--pi-pdf-page-selector-height) - var(--pi-pdf-page-selector-banner-height));
  /* --op-breakpoint-small */
}
@media (min-width: 768px) {
  .project__pdf-page-selector {
    height: var(--pi-pdf-page-selector-height);
  }
}
.project__pdf-page-selector {
  overflow: hidden;
}
.project__pdf-page-selector .project__pdf-page-selector__toggle-all-header .toggle-all-header-text {
  color: var(--op-color-primary-on-minus-one);
  font-size: var(--op-font-medium);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .project__pdf-page-selector .project__pdf-page-selector__toggle-all-header .toggle-all-header-text {
    font-size: var(--op-font-small);
  }
}
.project__pdf-page-selector .project__pdf-page-selector__toggle-all-header {
  padding: 0 var(--op-space-x-large);
  height: var(--pi-pdf-page-selector-banner-height);
  background-color: var(--op-color-primary-minus-one);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .project__pdf-page-selector .project__pdf-page-selector__toggle-all-header sl-button {
    display: none;
  }
  .project__pdf-page-selector .project__pdf-page-selector__toggle-all-header {
    padding: var(--op-space-small) var(--op-space-large) var(--op-space-small) var(--op-space-large);
  }
}
.project__pdf-page-selector .project__pdf-page-selector__pages-container {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  padding: var(--op-space-x-large);
  overflow-y: auto;
  /* --op-breakpoint-small */
}
@media (min-width: 768px) {
  .project__pdf-page-selector .project__pdf-page-selector__pages-container {
    height: var(--pi-pdf-pages-container-height);
  }
}
.project__pdf-page-selector .project__pdf-page-selector__pages-container {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .project__pdf-page-selector .project__pdf-page-selector__pages-container {
    background-color: var(--op-color-neutral-plus-max);
  }
}

.project__pdf-page-selector__page-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  text-align: left;
  padding: var(--op-space-medium);
  transition: var(--op-transition-input);
}
.project__pdf-page-selector__page-overlay.selected {
  background: linear-gradient(180deg, rgba(20, 74, 102, 0) 0%, rgba(20, 74, 102, 0.5) 50%, #144A66 100%);
}
.project__pdf-page-selector__page-overlay input.form-control[type=checkbox] {
  border-radius: var(--op-radius-circle);
  border: var(--op-border-width-large) solid var(--op-color-neutral-plus-four);
}
.project__pdf-page-selector__page-overlay input.form-control[type=checkbox]:checked {
  border: var(--op-border-width-large) solid var(--op-color-primary-plus-three);
}
.project__pdf-page-selector__page-overlay input.form-control[type=checkbox]:hover:not(:checked):before {
  border-radius: var(--op-radius-circle);
}
.project__pdf-page-selector__page-overlay:not(.selected):hover {
  background-color: rgba(24, 86, 119, 0.3);
}

.project__pdf-page-selector__page {
  position: relative;
  border-radius: var(--op-radius-large);
  height: var(--page-height);
  width: var(--page-width);
  overflow: hidden;
  transition: var(--op-transition-input);
  border: var(--op-border-width-large) solid var(--op-color-neutral-plus-four);
  contain: paint;
}
.project__pdf-page-selector__page.selected {
  border: var(--op-border-width-large) solid var(--op-color-primary-minus-three);
}
.project__pdf-page-selector__page canvas {
  border-radius: var(--op-radius-medium);
}

.pdf-page-selector__pages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--op-space-x-small);
  /* --op-breakpoint-medium */
}
@media (max-width: 1024px) {
  .pdf-page-selector__pages {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pdf-page-selector__pages {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .pdf-page-selector__pages {
    grid-template-columns: repeat(2, 1fr);
  }
}
.pdf-page-selector__pages {
  /* --op-breakpoint-x-small */
}
@media (max-width: 512px) {
  .pdf-page-selector__pages {
    grid-template-columns: 1fr;
  }
}

.project__pdf-page-selector__page-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  width: var(--page-width);
  height: var(--page-height);
}
.project__pdf-page-selector__page-button.rendering {
  display: none;
}
.project__pdf-page-selector__page-button canvas {
  width: 100%;
  height: 100%;
}

.project__plan-file-progress {
  width: 100%;
}

.project__plan-file-status {
  font-size: var(--op-font-small);
  text-align: center;
}

.project__plan-file-page-name {
  text-align: center;
}

.project__creation-modal-subheader {
  height: var(--pi-subheader-height);
  transition: height 300ms;
  align-items: flex-end;
}
.project__creation-modal-subheader.animate-closed {
  overflow: hidden;
  padding: 0;
  height: 0;
}

.project__key-label {
  cursor: unset;
}

.project__key-value {
  font-weight: var(--op-font-weight-medium);
}

.project__load-batch {
  margin-left: var(--op-space-2x-large);
}

.project__tags {
  overflow: unset;
}

.project__no-plans-message {
  font-weight: var(--op-font-weight-light);
  font-size: var(--op-font-small);
}

.project__aspire-selection-modal-body {
  --project-selection-modal-body-height: 50rem;
  --project-section-modal-spinner-size: 7rem;
  --project-section-modal-spinner-width: var(--op-space-x-small);
  height: var(--project-selection-modal-body-height);
  overflow: auto;
}
.project__aspire-selection-modal-body sl-spinner {
  font-size: var(--project-section-modal-spinner-size);
  --track-width: var(--project-section-modal-spinner-width);
}
.project__aspire-selection-modal-body .thumbnail-card {
  display: flex;
}

.project__aspire-section-select-modal-body {
  --project-selection-modal-body-height: 50rem;
  padding: var(--op-space-large);
  height: var(--project-selection-modal-body-height);
}

.aspire-selection-select-modal-body__text {
  font-size: var(--op-font-large);
}

.aspire-recommended-projects-text {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-bold);
}

.project__list-change-status-button::part(label) {
  display: inline-flex;
  gap: var(--op-space-x-small);
}

.leaflet-control-geosearch button.reset {
  height: 100%;
  background-color: transparent;
  color: var(--op-color-neutral-minus-two);
  font-size: var(--op-font-2x-large);
  font-weight: var(--op-font-weight-normal);
  padding-right: var(--op-space-small);
  padding-bottom: var(--op-space-3x-small);
}
.leaflet-control-geosearch button.reset:hover {
  background-color: transparent;
}

.truncate-container {
  width: 0;
  display: flex;
  flex: 1;
}

.truncate-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root {
  --datapack-checkbox-item-y-position-offset: calc(var(--op-size-unit) * 2.25); /*9px*/
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  :root {
    --datapack-checkbox-item-y-position-offset: calc(var(--op-size-unit) * 3.25); /*13px*/
  }
}

.promaps__feature-list {
  padding-left: var(--op-space-large);
  margin: 0;
}

.promaps-toolbar__confirm-button {
  color: var(--op-color-alerts-notice-on-plus-eight-alt);
}
.promaps-toolbar__confirm-button:disabled {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.promaps-toolbar__confirm-button:disabled:hover {
  background-color: unset;
}

.promaps-toolbar__cancel-button:disabled {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.promaps-toolbar__cancel-button:disabled:hover {
  background-color: unset;
}

.promaps-pack-features {
  padding-block: var(--op-space-small);
  padding-inline: var(--op-space-x-small);
  display: flex;
  flex-direction: column;
  font-size: var(--op-font-x-small);
}
.promaps-pack-features .form-group {
  width: auto;
}

.promaps-sidebar .promaps-sidebar__logo-image,
.promaps-sidebar .promaps-sidebar__tool-image,
.promaps-sidebar .promaps-sidebar__instructions-1,
.promaps-sidebar .promaps-sidebar__instructions-2 {
  background-position: center;
  background-repeat: no-repeat;
  align-self: center;
}
.promaps-sidebar .promaps-sidebar__logo-image {
  --size: 5rem;
  width: var(--size);
  height: var(--size);
  background-image: url("/assets/pro-maps/logo-f42e1aa5.svg");
}
.promaps-sidebar .promaps-sidebar__tool-image {
  --width: 6rem;
  --height: 5rem;
  width: var(--width);
  height: var(--height);
  background-image: url("/assets/pro-maps/promaps-8626c1a4.svg");
  background-size: cover;
}
.promaps-sidebar .promaps-sidebar__instructions-1 {
  --width: 232px;
  --height: 88px;
  width: var(--width);
  height: var(--height);
  background-image: url("/assets/pro-maps/button-legend-1-50bfa7b3.svg");
}
.promaps-sidebar .promaps-sidebar__instructions-2 {
  --width: 232px;
  --height: 88px;
  width: var(--width);
  height: var(--height);
  background-image: url("/assets/pro-maps/button-legend-2-90fe3a2a.svg");
}
.promaps-sidebar .promaps-sidebar__loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-x-small);
  height: 100%;
}
.promaps-sidebar .promaps-sidebar__loading-container .promaps-sidebar__loading-text {
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-medium);
}
.promaps-sidebar .promaps-sidebar__header-text {
  text-align: center;
  color: var(--op-color-primary-on-plus-eight-alt);
  font-weight: var(--op-font-weight-semi-bold);
}
.promaps-sidebar .promaps-sidebar__text {
  text-align: center;
  color: var(--op-color-neutral-on-plus-eight-alt);
  font-size: var(--op-font-x-small);
}
.promaps-sidebar .promaps-sidebar__area-text {
  overflow: hidden;
  color: var(--op-color-neutral-on-plus-six-alt);
  text-overflow: ellipsis;
  font-size: var(--op-font-x-small);
  font-style: normal;
  font-weight: var(--op-font-weight-normal);
  line-height: normal;
}
.promaps-sidebar .promaps-sidebar__square-footage-banner {
  border-radius: var(--op-radius-medium);
  background: var(--op-color-neutral-plus-six);
  padding: var(--op-space-x-small);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.promaps-sidebar .promaps-sidebar__square-footage-banner label {
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.promaps-sidebar .promaps-sidebar__square-footage-banner .promaps-sidebar__square-footage {
  font-weight: var(--op-font-weight-semi-bold);
}
.promaps-sidebar .promaps-sidebar__details-checkbox {
  --datapack-checkbox-item-x-position-offset: calc(var(--op-size-unit) * 4.25); /*17px*/
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  width: unset;
  position: absolute;
  top: var(--datapack-checkbox-item-y-position-offset);
  left: var(--datapack-checkbox-item-x-position-offset);
}
.promaps-sidebar .promaps-sidebar__details-checkbox .form-label, :root .promaps-sidebar .promaps-sidebar__details-checkbox sl-select::part(form-control-label),
:host .promaps-sidebar .promaps-sidebar__details-checkbox sl-select::part(form-control-label),
.promaps-sidebar .promaps-sidebar__details-checkbox .sl-theme-light sl-select::part(form-control-label),
.sl-theme-light .promaps-sidebar .promaps-sidebar__details-checkbox sl-select::part(form-control-label),
.promaps-sidebar .promaps-sidebar__details-checkbox .sl-theme-dark sl-select::part(form-control-label),
.sl-theme-dark .promaps-sidebar .promaps-sidebar__details-checkbox sl-select::part(form-control-label), .promaps-sidebar .promaps-sidebar__details-checkbox sl-input::part(form-control-label), .promaps-sidebar .promaps-sidebar__details-checkbox .project__key-label {
  font-weight: var(--op-font-weight-semi-bold);
}

.promaps-pack-feature {
  --datapack-height: calc(var(--op-size-unit) * 13); /*52px*/
  display: flex;
  gap: var(--op-space-x-small);
  justify-content: space-between;
  border-radius: var(--op-radius-large);
  padding: var(--op-space-x-small);
  min-height: var(--datapack-height);
}
.promaps-pack-feature .form-group {
  align-self: center;
}
.promaps-pack-feature button {
  visibility: hidden;
  color: var(--op-color-neutral-plus-two);
}
.promaps-pack-feature:hover {
  background: var(--op-color-neutral-plus-six);
}
.promaps-pack-feature:hover button {
  visibility: visible;
}

.markup-panel--right sl-details.promaps-menu__details-main-panel::part(header) {
  background-color: var(--op-color-neutral-plus-eight);
}

.promaps-project-legend {
  display: grid;
  align-items: center;
  grid-template-columns: 4fr 1fr 3fr 1fr;
  gap: var(--op-space-x-small);
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
  padding: var(--op-space-x-small) var(--op-space-small);
}
.promaps-project-legend .promaps-menu__color-swatch,
.promaps-project-legend .promaps-menu__color-indicator,
.promaps-project-legend .promaps-project-legend__area {
  justify-self: end;
}

.promaps-menu__details {
  position: relative;
}
.promaps-menu__details:has(sl-details.sl-details--small) .promaps-sidebar__details-checkbox .form-label, :root .promaps-menu__details:has(sl-details.sl-details--small) .promaps-sidebar__details-checkbox sl-select::part(form-control-label),
:host .promaps-menu__details:has(sl-details.sl-details--small) .promaps-sidebar__details-checkbox sl-select::part(form-control-label),
.promaps-menu__details:has(sl-details.sl-details--small) .promaps-sidebar__details-checkbox .sl-theme-light sl-select::part(form-control-label),
.sl-theme-light .promaps-menu__details:has(sl-details.sl-details--small) .promaps-sidebar__details-checkbox sl-select::part(form-control-label),
.promaps-menu__details:has(sl-details.sl-details--small) .promaps-sidebar__details-checkbox .sl-theme-dark sl-select::part(form-control-label),
.sl-theme-dark .promaps-menu__details:has(sl-details.sl-details--small) .promaps-sidebar__details-checkbox sl-select::part(form-control-label), .promaps-menu__details:has(sl-details.sl-details--small) .promaps-sidebar__details-checkbox sl-input::part(form-control-label), .promaps-menu__details:has(sl-details.sl-details--small) .promaps-sidebar__details-checkbox .project__key-label {
  color: var(--op-color-neutral-on-plus-five);
}
.promaps-menu__details:has(sl-details.sl-details--small[open]) .promaps-sidebar__details-checkbox .form-label, :root .promaps-menu__details:has(sl-details.sl-details--small[open]) .promaps-sidebar__details-checkbox sl-select::part(form-control-label),
:host .promaps-menu__details:has(sl-details.sl-details--small[open]) .promaps-sidebar__details-checkbox sl-select::part(form-control-label),
.promaps-menu__details:has(sl-details.sl-details--small[open]) .promaps-sidebar__details-checkbox .sl-theme-light sl-select::part(form-control-label),
.sl-theme-light .promaps-menu__details:has(sl-details.sl-details--small[open]) .promaps-sidebar__details-checkbox sl-select::part(form-control-label),
.promaps-menu__details:has(sl-details.sl-details--small[open]) .promaps-sidebar__details-checkbox .sl-theme-dark sl-select::part(form-control-label),
.sl-theme-dark .promaps-menu__details:has(sl-details.sl-details--small[open]) .promaps-sidebar__details-checkbox sl-select::part(form-control-label), .promaps-menu__details:has(sl-details.sl-details--small[open]) .promaps-sidebar__details-checkbox sl-input::part(form-control-label), .promaps-menu__details:has(sl-details.sl-details--small[open]) .promaps-sidebar__details-checkbox .project__key-label {
  color: var(--op-color-primary-on-plus-six);
}
.promaps-menu__details sl-details.sl-details--small::part(header) {
  background-color: var(--op-color-neutral-plus-five);
}
.promaps-menu__details sl-details.sl-details--small::part(header):hover {
  background-color: var(--op-color-neutral-plus-seven);
}
.promaps-menu__details sl-details.sl-details--small[open]::part(header) {
  background-color: var(--op-color-primary-plus-six);
}
.promaps-menu__details sl-details.sl-details--small[open]::part(header):hover {
  background-color: var(--op-color-primary-plus-five);
}

.promaps-menu__details-slider {
  --slider-right: 7px;
  --slider-top: 7px;
  position: absolute;
  top: var(--slider-top);
  right: var(--slider-right);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .promaps-menu__details-slider {
    --slider-top: 8px;
  }
}

.promaps-menu__details-slider--open {
  right: var(--op-space-x-large);
}

.promaps-menu__details-slider-label {
  position: absolute;
  top: var(--datapack-checkbox-item-y-position-offset);
  left: var(--op-space-small);
}

.promaps-menu__color-swatch {
  --swatch-size: 1.7rem;
  width: var(--swatch-size);
  height: var(--swatch-size);
  border-radius: var(--op-radius-medium);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.promaps-menu__slope-legend-item {
  width: var(--op-space-medium);
  height: var(--op-space-medium);
  border-radius: var(--op-radius-medium);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  font-size: var(--op-font-x-small);
}
.promaps-menu__slope-legend-item .promaps-menu__settings-feature-area-label {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.promaps-menu__slope-legend-item .promaps-menu__settings-feature-area-value {
  color: var(--op-color-neutral-on-plus-eight);
  font-weight: var(--op-font-weight-bold);
}

.promaps-menu__slope-legend-item--dashed {
  border-style: dashed;
}

.promaps-menu__settings-range {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: last baseline;
  gap: var(--op-space-x-small);
}
.promaps-menu__settings-range sl-range::part(form-control-label) {
  font-size: var(--op-font-x-small);
}

.promaps-menu__settings-associate-materials {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}
.promaps-menu__settings-associate-materials sl-select::part(form-control-label) {
  color: var(--op-color-neutral-on-plus-eight);
}

.promaps-menu__settings-color-picker-label {
  font-size: var(--op-font-x-small);
}

.promaps-menu__settings-no-materials-message {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  padding: var(--op-space-x-small) var(--op-space-large);
}

.promaps-sidebar__feature-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--op-radius-medium);
  padding: var(--op-space-x-small) var(--op-space-small);
  background: var(--op-color-neutral-plus-eight);
  font-size: var(--op-font-x-small);
}
.promaps-sidebar__feature-area .promaps-menu__settings-feature-area-label {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.promaps-sidebar__feature-area .promaps-sidebar__settings-feature-area-value {
  color: var(--op-color-neutral-on-plus-eight);
  font-weight: var(--op-font-weight-bold);
}

.property-map-pin__attachment-message {
  color: var(--op-color-alerts-warning-on-plus-three);
  padding: var(--op-space-small) 0;
}

.property-map-pin__edit-details-message {
  padding: var(--op-space-small) 0;
  color: var(--op-color-neutral-on-plus-six-alt);
}

.property-map-pin__create-project-message {
  padding: var(--op-space-x-small) var(--op-space-small);
  border-radius: var(--op-radius-large);
  background-color: var(--op-color-alerts-info-plus-six);
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-small);
}

.property-map__outlined-area-button {
  --create-button-height: 8rem;
  height: var(--create-button-height);
}
.property-map__outlined-area-button span:not(.material-symbols-outlined) {
  font-size: var(--op-font-x-small);
}

.property-map-pin__new-form__proposal-fields {
  gap: var(--op-space-small);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.property-map-pin__kind-badge-container {
  background-color: var(--op-color-primary-plus-six);
  padding: var(--op-space-small);
  border-radius: var(--op-radius-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.property-map-pin__date-display {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.property-map-pin__date-display .property-map-pin__date-display__label {
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.property-map-pin__date-display .property-map-pin__date-display__date {
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-semi-bold);
}

.property-map-pin__cost-display {
  display: flex;
  gap: var(--op-space-2x-small);
}
.property-map-pin__cost-display .property-map-pin__cost-display__label {
  color: var(--op-color-primary-on-plus-six);
}
.property-map-pin__cost-display .property-map-pin__cost-display__value {
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-neutral-on-plus-six);
}

.property-map-pin__attachments {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  background: var(--op-color-neutral-plus-six);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  padding: var(--op-space-x-small);
  border-radius: var(--op-radius-medium);
}

.property-map-pin__attachments-container {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}

.property-map-pin__attachments-label {
  color: var(--op-color-neutral-on-plus-six-alt);
}

.property-map-pin__attachment {
  --attachment-height: 104px;
  min-height: var(--attachment-height);
  max-height: var(--attachment-height);
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: var(--op-space-2x-small);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  border-radius: var(--op-radius-medium);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.property-map-pin__attachment:hover .property-map-pin__attachment-controls {
  display: flex;
}
.property-map-pin__attachment .property-map-pin__attachment-controls {
  display: none;
  width: 100%;
  gap: var(--op-space-2x-small);
}

.property-map-pin__show-attachment {
  flex-grow: 1;
}

.property-map-pin__number {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  align-self: center;
  font-size: var(--op-font-2x-small);
  font-weight: var(--op-font-weight-bold);
  transform: translateY(-2px);
  display: flex;
  justify-content: center;
}

.property-map__group--empty {
  display: flex;
  flex-direction: column;
  padding: var(--op-space-x-small);
  gap: var(--op-space-scale-unit);
  align-items: center;
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.property-map__group--empty .property-map__add-first-pin-message {
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
}

.property-map-group-prompt-actions {
  display: flex;
  align-items: center;
}
.property-map-group-prompt-actions .btn {
  color: var(--op-color-neutral-on-plus-max-alt);
}

.property-map-group-form__prompts {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
}

.property-map-group-form__prompt-name-row {
  display: flex;
  flex-direction: row;
  gap: var(--op-space-small);
  align-items: center;
}
.property-map-group-form__prompt-name-row sl-select::part(form-control-label) {
  display: none;
}

.property-map-group-form__prompt-field-order {
  padding-left: var(--op-space-medium);
}

.property-map-group-form__prompts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.property-map-group-form__prompt-responses {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}

.property-map-group-form__prompt-response {
  display: flex;
  gap: var(--op-space-2x-small);
}

.property-map-group-form__remove-field {
  color: var(--op-color-alerts-danger-base);
  padding: 0;
}
.property-map-group-form__remove-field:hover {
  color: var(--op-color-alerts-danger-plus-one);
}

.btn.property-map-group-form__remove-prompt {
  color: var(--op-color-alerts-danger-base);
}
.btn.property-map-group-form__remove-prompt:hover {
  color: var(--op-color-alerts-danger-plus-one);
}

.property-map-group-form__prompt-name-field {
  width: 100%;
}
.property-map-group-form__prompt-name-field::part(suffix) {
  width: 0px;
  opacity: 0;
}
.property-map-group-form__prompt-name-field:hover::part(suffix) {
  width: unset;
  opacity: 100;
}

.property-map-group-form__add-field {
  color: var(--op-color-neutral-on-plus-max-alt);
  width: fit-content;
}

.property-map-group-form__prompt-header {
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  padding: var(--op-space-small) var(--op-space-x-large);
}

.property-map-group-form__section {
  padding: var(--op-space-small) var(--op-space-x-large);
}

.property-map-group-prompt__name {
  flex-grow: 1;
}

.property-map-group-prompt__single-response-option {
  height: var(--op-space-medium);
  width: var(--op-space-medium);
  margin: 0;
}

.property-map-group-prompt__single-response-label {
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-eight);
}

.property-map-group-prompt__single-response-option__wrapper {
  display: flex;
  gap: var(--op-space-x-small);
  align-items: center;
}

.property-map-prompt-response trix-toolbar {
  border: none;
  border-radius: 0;
}
.property-map-prompt-response trix-editor {
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
}

.property-map-group-form__request-notice {
  display: flex;
  gap: var(--op-space-2x-small);
  color: var(--op-color-neutral-on-plus-six-alt);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-medium);
}

.property-map-panel__pin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-x-small);
  padding-top: var(--op-space-x-small);
}
.property-map-panel__pin-row:has(+ .property-map-panel__pin-row) {
  border-bottom: var(--op-border-width) var(--op-color-border) solid;
}
.property-map-panel__pin-row .property-map-panel__pin-info {
  display: flex;
  gap: var(--op-space-x-small);
  align-items: center;
}
.property-map-panel__pin-row button {
  visibility: hidden;
}
.property-map-panel__pin-row:hover button {
  visibility: visible;
}

.property-map-report__pins-and-groups {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-large);
}
.property-map-report__pins-and-groups .property-map-report__pins {
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  background: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  padding: var(--op-space-small) var(--op-space-small) var(--op-space-small) var(--op-space-medium);
  display: flex;
  font-weight: var(--op-font-weight-medium);
  align-items: center;
  gap: var(--op-space-2x-small);
  border-radius: var(--op-radius-large);
}
.property-map-report__pins-and-groups .property-map-report__pins:hover button {
  visibility: visible;
}
.property-map-report__pins-and-groups .property-map-report__group {
  display: flex;
  flex-direction: column;
  font-weight: var(--op-font-weight-medium);
}
.property-map-report__pins-and-groups .property-map-report__group sl-details::part(base) {
  opacity: unset;
}
.property-map-report__pins-and-groups .property-map-report__group:hover .property_map_report__group-visibility-btn {
  visibility: visible;
}
.property-map-report__pins-and-groups .property-map-report__group .property-map-report__pins {
  border-radius: unset;
  border: unset;
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.property-map-report__pins-and-groups .property-map-report__group .property-map-report__pins:nth-child(1 of .property-map-report__pins) {
  border-top: none;
}
.property-map-report__pins-and-groups .property-map-report__group .property-map-report__pins:last-child,
.property-map-report__pins-and-groups .property-map-report__group .property-map-report__group-header:last-child {
  border-radius: 0 0 var(--op-radius-medium) var(--op-radius-medium);
  border-bottom: unset;
}
.property-map-report__pins-and-groups .property-map-report__group .property-map-report__pins:last-child.property-map-report__group-header,
.property-map-report__pins-and-groups .property-map-report__group .property-map-report__group-header:last-child.property-map-report__group-header {
  border-radius: var(--op-radius-medium);
}

.excluded-from-report {
  opacity: 0.5;
}

.property-map-report__style-options {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  border-radius: var(--op-radius-medium);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  background: var(--op-color-neutral-plus-eight);
  padding: var(--op-space-x-small);
}
.property-map-report__style-options .property-map-report__style-option {
  padding: var(--op-space-small);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
}
.property-map-report__style-options .property-map-report__style-description {
  color: var(--op-color-neutral-on-plus-six);
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-x-small);
}

.property-map-report__numbered-pin {
  border-radius: var(--op-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--op-font-2x-small);
  height: var(--op-space-large);
  width: var(--op-space-large);
  flex-shrink: 0;
}

.property-map-report__map-label {
  --map-label-spacing: calc(var(--op-space-scale-unit) * 2);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
  position: absolute;
  background-color: var(--report-color);
  top: var(--map-label-spacing);
  left: var(--map-label-spacing);
  padding: var(--op-space-x-small) var(--op-space-large);
}
.property-map-report__map-label--name {
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-medium);
  color: var(--report-contrasted-text-color);
}
.property-map-report__map-label--address {
  font-size: var(--op-font-small);
  color: var(--report-contrasted-text-color);
}

.page-title-with-edit {
  align-items: center;
  gap: var(--op-space-small);
  font-size: var(--op-font-3x-large);
  color: var(--op-color-neutral-on-plus-eight);
}

.property-group {
  --op-property-group-header-height: 5.6rem;
  position: relative;
}

a.property-group__action {
  color: var(--op-color-neutral-on-plus-eight);
  text-decoration: none;
}

.property-group__actions {
  --op-group-action-padding: calc(0.5 * (var(--op-property-group-header-height) - 2.6rem));
  position: absolute;
  right: var(--op-group-action-padding);
  top: var(--op-group-action-padding);
}

.proposal__cost-item {
  display: flex;
  align-items: center;
  padding: var(--op-space-x-small);
  padding-left: var(--op-space-small);
  justify-content: space-between;
  border-bottom: 1px solid var(--op-color-neutral-plus-four);
  font-size: var(--op-font-x-small);
}
.proposal__cost-item sl-input::part(form-control) {
  gap: 0;
  grid-gap: 0;
}
.proposal__cost-item.with-input {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: var(--op-space-small);
  padding-top: var(--op-space-2x-small);
  padding-bottom: var(--op-space-2x-small);
}

span.proposal__cost-item-total {
  text-align: right;
}

.proposal__project-total {
  background-color: var(--op-color-primary-plus-six);
  border: none;
}

.proposal__cost-item__total {
  background-color: var(--op-color-neutral-plus-six);
  border: none;
}

.proposal__sidebar-values {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  font-size: var(--op-font-x-small);
}

.proposal__grouped-materials-table {
  --__op-table-cell-height: 36px;
}
.proposal__grouped-materials-table th,
.proposal__grouped-materials-table tr,
.proposal__grouped-materials-table td {
  font-size: var(--op-font-x-small);
  padding: 0 var(--op-space-small);
  height: var(--__op-table-cell-height);
}
.proposal__grouped-materials-table .actions {
  --width: 1rem;
  width: var(--width);
}
.proposal__grouped-materials-table tr.group-row td {
  background-color: var(--op-color-neutral-plus-five);
}

.proposal__project-tags {
  flex-wrap: wrap;
  display: flex;
  gap: var(--op-space-small);
  background-color: var(--op-color-neutral-plus-seven);
  border-radius: var(--op-radius-medium);
  box-shadow: var(--op-border-all) var(--op-color-border);
  padding: var(--op-space-x-small) var(--op-space-small);
}
.proposal__project-tags.proposal__project-tags--readonly {
  background: var(--op-color-neutral-plus-eight);
  cursor: not-allowed;
  opacity: 0.5;
}

sl-details.proposal__group-details::part(header) {
  height: var(--op-input-height-small);
  padding: var(--op-space-small) var(--op-space-large);
}
sl-details.proposal__group-details .table__container {
  padding: var(--op-space-3x-small) var(--op-space-x-large) var(--op-space-medium) var(--op-space-x-large);
}
sl-details.proposal__group-details .section-label {
  color: var(--op-color-neutral-on-plus-six-alt);
  font-size: var(--op-font-x-small);
}

.proposal__group-subtotal {
  display: flex;
  align-items: center;
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-x-small);
}

.proposal__markup-input {
  width: 7rem;
  align-items: center;
}
.proposal__markup-input::part(input), .proposal__markup-input::part(base) {
  --sl-input-height-small: var(--op-input-height-2x-small);
  height: var(--op-input-height-2x-small);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  border-radius: var(--op-radius-medium);
}
.proposal__markup-input::part(input) {
  padding: 0;
}
.proposal__markup-input::part(base) {
  padding-right: var(--op-space-2x-small);
}
.proposal__markup-input div[slot=prefix] {
  padding: 0 var(--op-space-2x-small);
  margin-inline-start: var(--op-space-3x-small);
}

.proposal__radio-list-item {
  display: flex;
  align-items: center;
}
.proposal__radio-list-item .label {
  flex-grow: 1;
  white-space: pre-wrap;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: var(--op-line-height-denser);
  text-align: left;
}

.proposal__material-form-inputs {
  display: grid;
  grid-template-columns: 1fr 5fr;
}

.proposal__padded-container {
  padding: var(--op-space-medium) var(--op-space-3x-large);
}

.proposal__content-block {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  background-color: var(--op-color-neutral-plus-eight);
  padding: var(--op-space-large);
  border: var(--op-border-width) solid var(--op-color-border);
  border-radius: var(--op-radius-large);
}
.proposal__content-block.proposal__content-block--no-bottom-radius {
  border-radius: var(--op-radius-large) var(--op-radius-large) 0 0;
}

.proposal__signature-block {
  background-color: var(--op-color-neutral-plus-max);
  padding: var(--op-space-3x-large);
  padding-top: var(--op-space-4x-large);
  border-radius: var(--op-radius-medium);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-three);
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.proposal__signature-line {
  padding-top: var(--op-space-small);
  border-top: var(--op-border-width) solid var(--op-color-neutral-on-plus-max);
  color: var(--op-color-neutral-on-plus-max);
  --signature-line-width: 30rem;
  width: var(--signature-line-width);
  font-weight: var(--op-font-weight-semi-bold);
}

.proposal__preview-label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-3x-large);
  opacity: 0.3;
  padding: var(--op-space-4x-large);
  transform: rotate(-35deg);
}

.table__container.proposal-layout-section__contents {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-large);
}
.table__container.proposal-layout-section__contents .form-group {
  padding: 0;
}
.table__container.proposal-layout-section__contents .proposal-layout-section__content-section {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}

.proposal-layout-section__footer {
  background-color: var(--op-color-neutral-plus-eight);
  border: var(--op-border-width) solid var(--op-color-border);
  border-top: 0;
  border-radius: 0 0 var(--op-radius-large) var(--op-radius-large);
  padding: var(--op-space-small) var(--op-space-large);
  font-size: var(--op-font-x-small);
}

.proposal-layout-container {
  display: flex;
}

.proposal__include-content-checkbox-container {
  position: absolute;
  right: var(--op-space-medium);
  top: calc(var(--op-space-medium) + var(--op-space-3x-small));
}

.proposal__include-content-checkbox-spacer {
  --op-include-content-checkbox-spacer-width: 19rem;
  width: var(--op-include-content-checkbox-spacer-width);
}

.proposal-section {
  position: relative;
}

table.proposal-section__edit-table tr.checkbox-row {
  background-color: var(--op-color-primary-plus-eight);
  border-left: none;
}
table.proposal-section__edit-table tr.checkbox-row th {
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-three);
}
table.proposal-section__edit-table tr.checkbox-row th:first-child {
  visibility: hidden;
  border: none;
}
table.proposal-section__edit-table td.checkbox-cell {
  background-color: var(--op-color-primary-plus-eight);
}
table.proposal-section__edit-table tr {
  border-right: var(--op-border-width) solid var(--op-color-neutral-plus-three);
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-three);
  border-left: var(--op-border-width) solid var(--op-color-neutral-plus-three);
}
table.proposal-section__edit-table tr.disabled td:not(.checkbox-cell) {
  background-color: var(--op-color-neutral-plus-six);
}
table.proposal-section__edit-table tr.disabled td:not(.checkbox-cell) span {
  color: var(--op-color-neutral-on-plus-six);
  opacity: 0.3;
}
table.proposal-section__edit-table td.disabled,
table.proposal-section__edit-table th.disabled {
  background-color: var(--op-color-neutral-plus-six);
}
table.proposal-section__edit-table td.disabled span,
table.proposal-section__edit-table th.disabled span {
  color: var(--op-color-neutral-on-plus-six);
  opacity: 0.3;
}
table.proposal-section__edit-table {
  box-shadow: none;
}

.proposal-section__edit-table-link {
  text-decoration: none;
  font-size: var(--op-font-x-small);
}

.proposal-section__edit-note {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
}

.proposal__include-content-checkbox {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--op-space-x-small);
  padding: 0;
}

.proposal-panel-scroll-container {
  overflow-y: auto;
  flex-grow: 1;
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}

.proposal-panel__input-row {
  display: flex;
  gap: var(--op-space-small);
  width: 100%;
  align-items: center;
}
.proposal-panel__input-row .form-group {
  padding-block: 0;
}

.proposal-panel__subfooter {
  padding: var(--op-space-medium);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}
.proposal-panel__subfooter .proposal-item-cost-line {
  display: flex;
  gap: var(--op-space-x-small);
  justify-content: end;
  align-items: center;
}
.proposal-panel__subfooter .proposal-item-cost-line.proposal-item-cost-line__total {
  font-size: var(--op-font-large);
}
.proposal-panel__subfooter .proposal-item-cost-line .amount {
  font-weight: var(--op-font-weight-semi-bold);
}

.estimate-request__address {
  font-size: var(--op-font-x-small);
}

.estimate-request__last-modified-text {
  font-size: var(--op-font-x-small);
}

.estimate-request__project-name-and-cost {
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-large);
}
.estimate-request__project-name-and-cost .estimate-request__project-name {
  font-size: var(--op-font-2x-large);
  font-weight: var(--op-font-weight-medium);
}

.estimate-request__cost {
  background-color: var(--op-color-primary-plus-seven);
  box-shadow: var(--op-border-all) var(--op-color-primary-plus-four);
  border-radius: var(--op-radius-medium);
  padding: var(--op-space-2x-small) var(--op-space-x-small);
  color: var(--op-color-primary-minus-three);
}

.estimate-request__details-tags {
  box-shadow: var(--op-border-all) var(--op-color-border);
  border-radius: var(--op-radius-large);
  overflow: hidden;
}

.estimate-request__feature-notes {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  background-color: var(--op-color-neutral-plus-max);
  box-shadow: var(--op-border-all) var(--op-color-border);
  padding: var(--op-space-small);
}

.estimate-request__feature-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--op-font-x-small);
  gap: var(--op-space-2x-small);
  /* To style the `estimate-request__feature-list` when it is inside of `estimate-request__details-panel` */
}
.estimate-request__details-panel .estimate-request__feature-list {
  grid-template-columns: repeat(2, 1fr);
}
.estimate-request__details-panel .estimate-request__feature-list .estimate-request__feature-list-item {
  color: var(--op-color-neutral-minus-six);
  font-size: var(--op-font-x-small);
}
.estimate-request__feature-list .estimate-request__feature-list-item {
  display: flex;
  gap: var(--op-space-x-small);
  align-items: center;
}

.restrict-project-access {
  font-size: var(--op-font-x-small);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}

.restrict-project-access__permission-status {
  color: var(--op-color-neutral-on-plus-eight-alt);
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-small);
  display: flex;
  gap: var(--op-space-2x-small);
  align-items: center;
}

.restrict-project-access__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--op-font-small);
}

.restrict-project-access__open-button {
  width: fit-content;
  font-size: var(--op-font-x-small);
}

.restrict-project-access__info {
  color: var(--op-color-neutral-plus-two);
}

.restrict-project-access__description {
  color: var(--op-color-neutral-on-plus-eight-alt);
}

.restrict-project-access__user-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}

.restrict-project-access__confirmation {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}

.restrict-project-access__global-confirmation .confirm-dialog {
  width: var(--op-dialog-x-large-width);
}
.restrict-project-access__global-confirmation .confirm-dialog__header {
  font-weight: var(--op-font-weight-medium);
  font-size: var(--op-font-medium);
}

.body--section-details {
  background-color: var(--op-color-neutral-plus-eight);
}

.section-details {
  display: flex;
  flex-direction: column;
  padding: var(--op-space-x-large) var(--op-space-x-large);
  gap: var(--op-space-2x-large);
}

.section-details__header {
  padding: var(--op-space-medium) var(--op-space-large);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: var(--op-border-width) solid var(--op-color-border);
}
.section-details__header:has(.section-details__lock-message.hidden) {
  height: var(--op-main-content-header-height);
}
.section-details__header .section-details__lock-message {
  line-height: var(--op-line-height-dense);
  margin-top: var(--op-space-medium);
}
.section-details__header .section-details__lock-message p {
  margin-bottom: var(--op-space-2x-small);
}

.section-details__panel-border {
  border-top-right-radius: var(--op-radius-large);
  border-top-left-radius: var(--op-radius-large);
}

.section-details__card_top_border {
  --border-width-2x-large: 8px;
  border-top: var(--border-width-2x-large) solid var(--op-color-primary-plus-two);
}

.section-details__input {
  display: flex;
  flex-direction: row;
  gap: var(--op-space-2x-small);
}

.section-details__min-width {
  --plan-page-thumbnail-width: 100px;
  min-width: var(--plan-page-thumbnail-width);
}

.section-details__collapsible-section {
  position: relative;
}
.section-details__collapsible-section .markup-panel__header {
  border-bottom: none;
}
.section-details__collapsible-section .markup-panel__header .markup-panel__group-label {
  display: flex;
  align-items: center;
}

.section-details__catalog-items {
  border-bottom-left-radius: var(--op-radius-large);
  border-bottom-right-radius: var(--op-radius-large);
}

.section-details__pages-actions {
  --pi-pages-actions-y-position-offset: var(--op-space-x-small);
  --pi-pages-actions-x-position-offset: var(--op-space-small);
  position: absolute;
  top: var(--pi-pages-actions-y-position-offset);
  right: var(--pi-pages-actions-x-position-offset);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.section-details__item-action {
  position: absolute;
  right: -12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.section-details__header-labels {
  border: none;
}
.section-details__header-labels:hover {
  background-color: transparent !important;
}
.section-details__header-labels {
  background-color: transparent;
}

.section-details__plan-files {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: flex-end;
  row-gap: var(--op-space-medium);
  /* --op-breakpoint-medium */
}
@media (max-width: 1024px) {
  .section-details__plan-files {
    grid-template-columns: 1fr 1fr;
  }
}

.section-details__plan-file {
  display: flex;
  gap: var(--op-space-small);
  align-items: center;
  padding: var(--op-space-x-small) var(--op-space-small) var(--op-space-x-small) var(--op-space-x-small);
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
}
.section-details__plan-file.section-details__plan-file__no-padding {
  padding: 0;
}
.section-details__plan-file img {
  --plan-page-thumbnail-width: 12rem;
  --plan-page-thumbnail-height: 68px;
  width: var(--plan-page-thumbnail-width);
  height: var(--plan-page-thumbnail-height);
  border: 2px solid var(--op-color-neutral-plus-three);
  border-radius: var(--op-radius-medium);
  object-fit: cover;
}
.section-details__plan-file:hover {
  background-color: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-five);
}
.section-details__plan-file:hover .section-details__plan-file-action {
  display: block;
  color: var(--op-color-primary-on-plus-five);
}

.section-details__plan-file-grid-item {
  display: flex;
  gap: var(--op-space-small);
  padding: var(--op-space-x-small) var(--op-space-x-small) var(--op-space-small) var(--op-space-x-small);
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
}
.section-details__plan-file-grid-item.section-details__plan-file__no-padding {
  padding: 0;
}
.section-details__plan-file-grid-item img {
  width: 100%;
  aspect-ratio: 4/3;
  border: 2px solid var(--op-color-neutral-plus-three);
  border-radius: var(--op-radius-medium);
  object-fit: cover;
}
.section-details__plan-file-grid-item:hover {
  background-color: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-five);
}
.section-details__plan-file-grid-item:hover .section-details__plan-file-action {
  display: block;
  border-radius: var(--op-radius-medium);
  position: absolute;
  top: var(--op-space-small);
  right: var(--op-space-small);
}

.section-details__plan-file-action {
  display: none;
}
.section-details__plan-file-action .delete-icon {
  color: var(--op-color-alerts-danger-base);
}

.section-details__plan-file-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 20px;
}

.copy-button {
  margin-left: auto;
  order: 2;
}

.delete-button {
  order: 3;
}

.section-details__plan-file-name {
  font-size: var(--op-font-medium);
}

.section-details__add-catalog-item-menu {
  --add-catalog-item-menu-width: 198px;
  width: var(--add-catalog-item-menu-width);
}

.section-details__quantity-input {
  --quantity-input-width: 125px;
  width: var(--quantity-input-width);
}

.section-details__add-section-button {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  width: var(--op-space-3x-large);
}

.section__disabled-panel {
  pointer-events: none;
  opacity: var(--op-disabled-opacity);
}

@media print {
  .section-details__card--hidden-on-print {
    display: none;
  }
}
.section-report__dropdown-panel {
  margin-top: var(--op-space-2x-small);
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  padding: var(--op-space-x-small);
  background-color: var(--op-color-white);
  box-shadow: var(--op-shadow-medium);
  z-index: var(--op-z-index-dropdown);
}

.section-report__container {
  width: 100%;
  max-width: var(--op-breakpoint-x-large);
  padding: var(--op-space-3x-large) var(--op-space-3x-large) var(--op-space-x-large) var(--op-space-3x-large);
  margin: 0 auto;
}

.section-report__table-wrapper {
  border-radius: 0 0 var(--op-radius-large) var(--op-radius-large);
}

.section-report__menu {
  margin-bottom: var(--op-space-medium);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}

.section-report__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-medium);
  justify-content: space-between;
}

.section-report_title {
  font-size: var(--op-font-medium);
}

.section-report_summary-text {
  font-size: var(--op-font-medium);
  color: var(--op-color-primary-on-plus-four);
  font-weight: var(--op-font-weight-bold);
}

.section-report__header-name-text {
  font-size: var(--op-font-2x-large);
  color: var(--op-color-neutral-on-plus-six);
}

.section-report__body {
  overflow: visible;
  contain: unset;
}

.section-report__grid_view {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: var(--op-space-medium);
  padding: var(--op-space-medium);
}

.section-report__estimates_grid_view {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: var(--op-space-medium);
  padding: var(--op-space-medium);
}

.section-report__key {
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-medium);
  color: var(--op-color-neutral-on-plus-max-alt);
}

.section-report__value {
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-x-large);
  color: var(--op-color-neutral-on-plus-max);
}

.section-report__hours-value {
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-x-large);
  color: var(--op-color-neutral-on-plus-max-alt);
}

.section-report__filter-bar {
  display: flex;
  gap: var(--op-space-x-small);
  padding: var(--op-space-small);
  align-items: center;
  flex-wrap: wrap;
}
.section-report__filter-bar:not(:last-child) {
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}

.section-report__estimates-parent {
  background-color: var(--op-color-primary-plus-seven);
  color: var(--op-color-neutral-on-plus-max);
  border-left: var(--op-border-width-x-large) solid var(--op-color-primary-plus-two);
}
.section-report__estimates-parent:hover {
  background-color: var(--op-color-primary-plus-eight);
}

.section-report__estimates-single {
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
}

.section-report__estimates-child {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight-alt);
  border-left: var(--op-border-width-x-large) solid var(--op-color-primary-plus-two);
}

.section-report__icon-column {
  max-width: var(--op-space-medium);
}

.section-report__tags-margin {
  margin: var(--op-space-3x-small);
}

.section-report__page-menu-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-report__range-input {
  --range-input-width: 120px;
  max-width: var(--range-input-width);
}

@media print {
  .section-report__menu,
  .section-report__filter-bar {
    display: none;
  }
  .section-report__table-wrapper {
    border-radius: inherit;
  }
  .section-report__container {
    print-color-adjust: exact;
  }
}
:root {
  --op-sidebar-header-image: url("/assets/aspire-property-intelligence-light-34ca4546.svg");
  --op-horizontal-padding: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
  --op-sidebar-org-switcher-width: calc(28rem - (2 * var(--op-horizontal-padding)));
  --sidebar-logo-width: 200px;
  --sidebar-logo-height: 130px;
  --_op-sidebar-spacing: 0;
}

.sidebar {
  --_op-sidebar-drawer-width: calc(70 * var(--op-size-unit));
  min-width: var(--__op-sidebar-width);
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
  padding: 0;
  position: relative;
  overflow: visible;
  z-index: 1;
  transition: all var(--op-transition-sidebar);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}
.sidebar.sidebar--wide {
  --_op-sidebar-width: calc(90 * var(--op-size-unit));
  min-width: var(--_op-sidebar-width);
}
.sidebar.sidebar--full-height {
  height: 100vh;
  overflow: unset;
}
.sidebar.sidebar--with-tabs {
  height: 100vh;
  overflow: unset;
}
.sidebar.sidebar--with-tabs .form-group {
  padding: 0;
}

.sidebar__header {
  --op-transition-sidebar: 200ms;
  height: var(--sidebar-logo-height);
  width: 100%;
  background-image: var(--op-sidebar-header-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--sidebar-logo-width);
  transition-duration: var(--op-transition-sidebar);
  transition-property: all;
  display: block;
}

.sidebar-nav__list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  height: 1px;
  flex: 1 1 auto;
  gap: var(--op-space-x-small);
}
.sidebar-nav__list a span {
  opacity: 1;
  visibility: visible;
  transition: var(--op-transition-sidebar);
}

.sidebar-nav__item {
  position: relative;
  font-size: var(--op-font-small);
  line-height: normal;
  border-radius: var(--op-radius-large);
  color: var(--op-color-neutral-on-plus-eight);
  padding: var(--op-space-small) var(--op-space-medium);
  margin: 0;
  gap: var(--op-space-x-small);
  align-items: center;
  display: flex;
  text-decoration: none;
}
.sidebar-nav__item:visited, .sidebar-nav__item:focus {
  color: var(--op-color-neutral-on-plus-eight);
}
.sidebar-nav__item:hover {
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
}
.sidebar-nav__item.active {
  background: var(--op-color-primary-plus-six);
  color: var(--op-color-primary-on-plus-six);
}
.sidebar-nav__item.active::before {
  --op-sidebar__nav-item-active-mark-highlight: -1px 0px 1px 0px --op-color-primary-minus-three inset;
  content: "";
  width: var(--op-space-2x-small);
  height: var(--op-space-large);
  background-color: var(--op-color-primary-minus-one);
  position: absolute;
  left: 0;
  border-radius: 0 var(--op-radius-medium) var(--op-radius-medium) 0;
  box-shadow: var(--op-sidebar__nav-item-active-mark-highlight);
}

.sidebar-nav__item--space-between {
  justify-content: space-between;
}

.sidebar__trigger {
  --sidebar-collapse-button-position-top: 30px;
  --sidebar-collapse-button-position-right: -32px;
  background-color: var(--op-color-neutral-plus-eight);
  display: block;
  position: absolute;
  top: var(--sidebar-collapse-button-position-top);
  right: var(--sidebar-collapse-button-position-right);
  border-top-right-radius: var(--op-space-small);
  border-bottom-right-radius: var(--op-space-small);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  border-left: 0;
  padding: var(--op-space-2x-small);
  padding-left: var(--op-space-small);
}
.sidebar__trigger span {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--op-space-3x-small) 0;
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--op-font-small);
}

.profile-menu .sidebar__trial-timer {
  padding: 0 0 var(--op-space-small) 0;
  display: none;
}

.sidebar.sidebar--rail {
  --__op-sidebar-width: calc(17 * var(--op-size-unit));
  --op-sidebar-header-image: url("/assets/pi-icon-3a6dc893.svg");
}
.sidebar.sidebar--rail .sidebar__header {
  height: var(--sidebar-logo-height);
  background-size: var(--op-space-2x-large);
}
.sidebar.sidebar--rail .sidebar__trial-timer {
  display: none;
}
.sidebar.sidebar--rail .sidebar__trial-days-left {
  --op-sidebar-trial-days-dimension: 40px;
  font-size: var(--op-font-medium);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--op-space-small);
  gap: var(--op-space-small);
  width: var(--op-sidebar-trial-days-dimension);
  height: var(--op-sidebar-trial-days-dimension);
  background-color: var(--op-color-neutral-plus-six);
  border: var(--op-border-width-large) solid var(--op-color-border);
  border-radius: var(--op-radius-large);
  margin: 0 auto var(--op-space-medium);
  opacity: 1;
  visibility: visible;
  transition: var(--op-transition-sidebar);
}
.sidebar.sidebar--rail .sidebar__trial-days-left:hover {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
}
.sidebar.sidebar--rail .sidebar__trial-days-left:active {
  background-color: var(--op-color-primary-plus-five);
  color: var(--op-color-primary-on-plus-five);
  border-color: var(--op-color-primary-minus-three);
}
.sidebar.sidebar--rail .sidebar-nav__list {
  align-items: center;
  padding: 0;
}
.sidebar.sidebar--rail .sidebar-nav__item {
  height: calc(var(--op-space-3x-large) + var(--op-space-x-small));
  width: calc(var(--op-space-3x-large) + var(--op-space-x-small));
  display: block;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
.sidebar.sidebar--rail .sidebar-nav__item .sidebar__item-label {
  display: none;
}
.sidebar.sidebar--rail .sidebar-nav__item.active::before {
  --op-sidebar__nav-item-active-mark-highlight: 0px 1px 1px 0px --op-color-primary-minus-three inset;
  content: "";
  height: var(--op-space-2x-small);
  width: var(--op-space-large);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: var(--op-radius-medium) var(--op-radius-medium) 0 0;
  box-shadow: var(--op-sidebar__nav-item-active-mark-highlight);
}
.sidebar.sidebar--rail .sidebar__trigger {
  --op-collapsed-trigger-padding-right: 10px;
  --op-collapsed-trigger-padding-left: 6px;
  padding: var(--op-space-2x-small);
  padding-right: var(--op-collapsed-trigger-padding-right);
  padding-left: var(--op-collapsed-trigger-padding-left);
}
.sidebar.sidebar--rail .sidebar__trigger .material-symbols-outlined {
  transform: rotate(180deg);
}
.sidebar.sidebar--rail .profile-menu__user-info,
.sidebar.sidebar--rail .sidebar__trial-timer {
  display: none;
}
.sidebar.sidebar--rail .profile-menu {
  padding: 0;
  margin: 0 auto var(--op-space-large);
  gap: 0;
}
.sidebar.sidebar--rail .profile-menu .sidebar__trial-timer {
  display: block;
}

.sidebar__trial-days-left {
  opacity: 0;
  visibility: hidden;
  font-size: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme-mode=light]) .sidebar__header {
    --op-sidebar-header-url: url("/assets/aspire-property-intelligence-dark-c5d951c2.svg");
  }
}
:root[data-theme-mode=dark] .sidebar__header {
  --op-sidebar-header-url: url("/assets/aspire-property-intelligence-dark-c5d951c2.svg");
}

.sidebar__body {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  padding: var(--op-space-x-large) var(--op-horizontal-padding);
  width: 100%;
  flex-grow: 1;
}
.sidebar__body.sidebar__body--scrollable {
  overflow-y: auto;
}

.sidebar__body--horizontal {
  padding: 0 var(--op-horizontal-padding);
}

.sidebar__details-form {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}
.sidebar__details-form .form-group {
  width: 100%;
}

.sidebar__trial-timer {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  padding: var(--op-space-small);
  background-color: var(--op-color-neutral-plus-six);
  border-radius: var(--op-radius-large);
  box-shadow: inset var(--op-border-all) var(--op-color-border);
}
.sidebar__trial-timer .sidebar__trial-timer-badge {
  /* Helps keep the badge in the normal flow and not take up the full width of its parent container */
}
.sidebar__trial-timer .sidebar__trial-timer-description {
  display: flex;
  gap: var(--op-space-3x-small);
  flex-direction: column;
  font-size: var(--op-font-small);
}
.sidebar__trial-timer .sidebar__trial-timer-description .sidebar__trial-timer-title {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-neutral-on-plus-six);
}
.sidebar__trial-timer .sidebar__trial-timer-description .sidebar__trial-timer-subtitle {
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-six-alt);
}

.sidebar-header {
  height: var(--op-main-content-header-height--small);
  border-bottom: var(--op-border-width) solid var(--op-color-border);
}
.sidebar-header.sidebar-header--padded {
  padding: var(--op-space-x-large) var(--op-horizontal-padding);
  max-width: 100%;
}
.sidebar.sidebar--with-tabs .sidebar-header {
  height: unset;
  --__op-sidebar-width: 36rem;
  border-bottom: none;
}

.sidebar-nav__padded-area {
  padding: 0 var(--op-space-small);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.sidebar-nav__padded-area.sidebar-nav__padded-area--expanded {
  padding: 0 var(--op-space-large);
}

.sidebar-nav__divider-horizontal {
  width: 100%;
  min-height: var(--op-border-width);
  background-color: var(--op-color-neutral-plus-four);
}

.sidebar-action-alert {
  border: var(--op-border-width) solid var(--op-color-neutral-plus-three);
  border-radius: var(--op-radius-medium);
  padding: var(--op-space-small);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  margin-top: var(--op-space-medium);
  background-color: var(--op-color-primary-plus-seven);
}

.sidebar-action-alert__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar-action-alert__footer a {
  text-decoration: none;
}

.sidebar-action-alert__icon-wrapper {
  padding: var(--op-space-2x-small) var(--op-space-2x-small) 0 var(--op-space-2x-small);
  box-shadow: var(--op-shadow-small);
  border-radius: var(--op-radius-medium);
}

.sidebar__footer {
  padding: var(--op-horizontal-padding);
}

:root {
  --subscription-content-max-width: 112rem;
}

.subscription-setup__vertical-layout {
  display: flex;
  gap: var(--op-space-x-large);
}
.subscription-setup__vertical-layout sl-input::part(input) {
  --sl-input-spacing-large: var(--op-space-small) ;
}
.subscription-setup__vertical-layout .subscription-setup__body {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  padding-bottom: var(--op-space-x-large);
  flex: 1;
}
.subscription-setup__vertical-layout .step-header-text {
  color: var(--op-color-on-background);
  font-size: var(--op-font-large);
}
.subscription-setup__vertical-layout .subscription-setup__input-row {
  display: flex;
  gap: var(--op-space-medium);
  align-items: flex-end;
}
.subscription-setup__vertical-layout .subscription-setup__input-row .form-group {
  align-self: unset;
  padding: 0;
}
.subscription-setup__vertical-layout .subscription-setup__input-row .subscription-setup__tier-and-base-price-input {
  display: flex;
  align-items: flex-end;
}
.subscription-setup__vertical-layout .subscription-setup__input-row .subscription-setup__tier-and-base-price-input sl-select::part(combobox) {
  border-radius: var(--op-radius-large) 0 0 var(--op-radius-large);
}
.subscription-setup__vertical-layout .subscription-setup__input-row .subscription-setup__tier-and-base-price-input sl-input::part(base) {
  --subscription-base-price-input-width: 120px;
  border-radius: 0 var(--op-radius-large) var(--op-radius-large) 0;
  border-left-color: var(--op-color-neutral-plus-six);
  width: var(--subscription-base-price-input-width);
}
.subscription-setup__vertical-layout .subscription-setup__input-row .readonly-value {
  background: var(--op-color-neutral-plus-seven);
  color: var(--op-color-neutral-plus-two);
  font-size: var(--op-font-large);
}
.subscription-setup__vertical-layout .subscription-setup__progress-indicator {
  --progress-step-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--op-space-2x-small);
  padding-top: var(--op-space-2x-small);
}
.subscription-setup__vertical-layout .subscription-setup__progress-indicator .progress-step--done,
.subscription-setup__vertical-layout .subscription-setup__progress-indicator .progress-step--in-progress {
  text-align: center;
  height: var(--progress-step-size);
  width: var(--progress-step-size);
  border-radius: var(--op-radius-circle);
}
.subscription-setup__vertical-layout .subscription-setup__progress-indicator .progress-step--done {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--op-color-alerts-notice-on-plus-five);
  background: var(--op-color-alerts-notice-plus-five);
  border: var(--op-border-width-large) solid var(--op-color-alerts-notice-plus-five);
}
.subscription-setup__vertical-layout .subscription-setup__progress-indicator .progress-step--in-progress {
  background: var(--op-color-neutral-plus-four);
  border: var(--op-border-width-large) solid var(--op-color-neutral-plus-four);
}
.subscription-setup__vertical-layout .subscription-setup__progress-indicator .progress-lines--done {
  height: 100%;
  border-left: var(--op-border-width-large) solid var(--op-color-neutral-plus-one);
}
.subscription-setup__vertical-layout .subscription-setup__progress-indicator .progress-lines--in-progress {
  height: 100%;
  border-left: var(--op-border-width-large) solid var(--op-color-neutral-plus-four);
}

.sub-header-text {
  color: var(--op-color-on-background);
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-semi-bold);
}

.cost-summary-row__divider {
  border-bottom: var(--op-border-width) solid var(--op-color-border);
  width: 100%;
}

.subscription-setup__footer {
  display: flex;
  justify-content: space-between;
  color: var(--op-color-neutral-plus-one);
  align-items: center;
  gap: var(--op-space-small);
}

.subscription-setup__discounts {
  display: flex;
  gap: var(--op-space-medium);
  flex-wrap: wrap;
}

.subscription-setup__card {
  --subscription-setup-card-min-width: 300px;
  min-width: var(--subscription-setup-card-min-width);
  display: flex;
  flex-direction: column;
  padding: var(--op-space-medium);
  align-self: stretch;
  gap: var(--op-space-small);
  flex: 1 0 0;
  border-radius: var(--op-radius-large);
  background: var(--op-color-neutral-plus-seven);
}
.subscription-setup__card .form-group {
  padding: 0;
}
.subscription-setup__card.subscription-setup__card--cost-summary {
  gap: var(--op-space-x-small);
  font-size: var(--op-font-medium);
}
.subscription-setup__card .subscription-setup__card-input-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: var(--op-space-medium);
  align-items: center;
}
.subscription-setup__card .cost-summary-row {
  display: flex;
  padding: 0 var(--op-space-2x-small);
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.subscription-setup__card .cost-summary-row .cost-summary-row__year-text {
  color: var(--op-color-on-background-alt);
  font-size: var(--op-font-x-small);
}
.subscription-setup__card .cost-summary-row .cost-summary-row__amount-text {
  color: var(--op-color-on-background);
}
.subscription-setup__card .cost-summary-row .cost-summary-row__discount-text {
  color: var(--op-color-alerts-notice-on-plus-eight-alt);
}
.subscription-setup__card .cost-summary-row .cost-summary-row__total-text {
  color: var(--op-color-neutral-on-plus-seven);
  text-align: right;
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-semi-bold);
}
.subscription-setup__card .payment-method__option_row {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
}
.subscription-setup__card .payment-method__option-text {
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--op-font-medium);
  gap: var(--op-space-small);
}
.subscription-setup__card .payment-method__comment_row {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  align-self: stretch;
}
.subscription-setup__card .details-text {
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--op-font-x-small);
}
.subscription-setup__card .payment-method__warning-text {
  color: var(--op-color-alerts-warning-on-plus-eight-alt);
  font-size: var(--op-font-x-small);
}

.subscription-setup__payment-method {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-medium);
  align-self: stretch;
}

.subscription-setup__contract {
  display: flex;
  align-items: center;
  gap: var(--op-space-medium);
  width: 100%;
}

.subscription-setup__upload-file-button {
  padding-left: var(--op-space-3x-large);
  padding-right: var(--op-space-3x-large);
}

.subscribe-modal {
  --header-logo-width: 176px;
  --header-height: 52.65px;
}
.subscribe-modal:has(.product-led-sales-card)::part(body) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.subscribe-modal:has(.product-led-sales-card) #modal-content {
  width: 100%;
}

.subscribe-modal__logo {
  --header-image: url("/assets/aspire-property-intelligence-light-34ca4546.svg");
  width: var(--header-logo-width);
  height: var(--header-height);
  background-image: var(--header-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--header-logo-width);
}

.subscribe-modal__title {
  font-size: var(--op-font-large);
}

.subscribe-modal__page {
  --min-height: calc(100vh - var(--header-height) - (4 * var(--op-space-large)));
  display: flex;
  flex-direction: column;
  gap: var(--op-space-3x-large);
  align-items: center;
  min-height: var(--min-height);
}

h1.subscribe-modal__sub-header-text {
  font-weight: var(--op-font-weight-semi-bold);
  text-align: center;
}

.subscription-modal__footer {
  --footer-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-scale-unit);
  padding: var(--op-space-small) var(--op-space-large);
  border-radius: var(--op-radius-large);
  background: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six-alt);
  text-align: center;
  font-size: var(--op-font-small);
  font-style: normal;
  font-weight: var(--op-font-weight-normal);
  line-height: normal;
  width: max-content;
  position: fixed;
  bottom: 24px;
  z-index: var(--footer-index);
  /* --op-breakpoint-medium */
}
@media (max-width: 1024px) {
  .subscription-modal__footer {
    position: unset;
    bottom: unset;
    z-index: unset;
  }
}

.subscription-card-container {
  display: flex;
  gap: var(--op-space-large);
  /* --op-breakpoint-medium */
}
@media (max-width: 1024px) {
  .subscription-card-container {
    --subscription-content-max-width: 40rem;
    flex-direction: column;
  }
}
.subscription-card-container {
  max-width: var(--subscription-content-max-width);
}
.subscription-card-container .subscription-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-scale-unit);
}
.subscription-card-container .content {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
  line-height: normal;
  font-style: normal;
  color: var(--op-color-neutral-on-plus-max-alt);
}
.subscription-card-container .price-details {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.subscription-card-container .subscription-card__ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--op-space-2x-small);
  align-self: stretch;
  padding: unset;
  list-style-position: inside;
  margin: unset;
}
.subscription-card-container .subscription-card__li {
  color: var(--op-color-neutral-on-plus-max-alt);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  font-style: normal;
  line-height: normal;
}

.subscription-card__callout-section {
  font-style: normal;
  line-height: normal;
  display: flex;
  align-items: baseline;
  gap: var(--op-space-2x-small);
}
.subscription-card__callout-section .content {
  --content-height: 4.33rem;
  color: var(--op-color-neutral-on-plus-six);
  font-size: var(--op-font-x-small);
  text-wrap: wrap;
  text-align: left;
  min-height: var(--content-height);
}
.subscription-card__callout-section .callout {
  background: transparent;
  font-size: var(--op-font-4x-large);
  color: var(--op-color-neutral-on-plus-max);
  font-weight: var(--op-font-weight-medium);
  padding: 0;
}
.subscription-card__callout-section .callout.callout__checkout {
  font-size: var(--op-font-3x-large);
  color: var(--op-color-neutral-on-plus-six);
}
.subscription-card__callout-section .callout.tier-table__th {
  color: var(--op-color-neutral-on-plus-seven);
  padding: 0;
}
.subscription-card__callout-section .detail {
  color: var(--op-color-neutral-on-plus-max-alt);
  font-size: var(--op-font-medium);
}
.subscription-card__callout-section .detail.detail__checkout {
  color: var(--op-color-neutral-on-plus-six-alt);
  font-size: var(--op-font-large);
}
.subscription-card__callout-section .content {
  --content-height: 4.33rem;
  color: var(--op-color-neutral-on-plus-six);
  font-size: var(--op-font-x-small);
  text-wrap: wrap;
  text-align: left;
  min-height: var(--content-height);
}

.detail__annual {
  color: var(--op-color-neutral-on-plus-seven-alt);
  font-size: var(--op-font-small);
  padding-bottom: var(--op-space-x-small);
}

.subscription-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: flex-start;
  flex-shrink: 0;
  max-width: 200px;
  border-right: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  background: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
  padding: var(--op-space-x-small) var(--op-space-x-large);
  gap: var(--op-space-small);
}

.selection-name {
  color: var(--op-color-neutral-on-plus-max);
  font-weight: var(--op-font-weight-medium);
  font-size: var(--op-font-large);
  line-height: normal;
  font-style: normal;
  justify-content: space-between;
  display: flex;
  align-items: center;
}
.selection-name.selection-name__checkout {
  color: var(--op-color-neutral-on-plus-six);
}

.checkout__ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--op-space-2x-small);
  padding: unset;
  list-style-position: inside;
  margin: unset;
}

.checkout__li {
  flex: 1 0 0;
  font-size: var(--op-font-x-small);
  font-style: normal;
  line-height: normal;
  font-weight: var(--op-font-weight-normal);
}

.subscription__stripe-checkout {
  --max-width: 33rem;
  padding: var(--op-space-3x-large) var(--op-space-large);
  max-width: var(--max-width);
}

.subscription__tos {
  --max-width: calc(150 * var(--op-size-unit));
  max-width: var(--max-width);
}
.subscription__tos .subscription__tos--pane {
  max-height: calc(95 * var(--op-size-unit));
  overflow-y: auto;
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  padding-bottom: var(--op-space-small);
  margin-bottom: var(--op-space-medium);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}

.subscription__checkout-confirmation {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-2x-small);
}

.subscription__cancel_guide {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-x-small);
  color: var(--op-color-neutral-on-plus-max-alt);
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-2x-small);
  align-items: center;
}
.subscription__cancel_guide .subscription__cancel_guide--icon {
  color: var(--op-color-primary-minus-one);
}

.subscription__legal-details {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}

.subscription__checkout-agreement {
  color: var(--op-color-neutral-on-plus-max-alt);
  font-size: var(--op-font-x-small);
  font-style: normal;
  font-weight: var(--op-font-weight-normal);
  line-height: normal;
}

.product-led-sales-card {
  --product-led-sales-card-height: 55rem;
  display: flex;
  width: 100%;
  background-color: var(--op-color-neutral-plus-max);
  max-width: var(--subscription-content-max-width);
  min-height: var(--product-led-sales-card-height);
}
.product-led-sales-card .product-led-sales-card__sidebar {
  --sidebar-min-width: calc(75 * var(--op-size-unit));
  min-width: var(--sidebar-min-width);
  height: 100%;
}
.product-led-sales-card .tier-wizard {
  margin-bottom: var(--op-space-medium);
  width: 100%;
}

.tier-wizard .tier-wizard__step {
  display: flex;
  padding: var(--op-space-medium);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--op-space-small);
  border-radius: var(--op-radius-medium);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  background: var(--op-color-neutral-plus-seven);
}
.tier-wizard .tier-wizard__step .tier-wizard__step-bubble-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}
.tier-wizard .tier-wizard__step .tier-wizard__step-bubble-wrapper .tier-wizard__step-bubble {
  display: flex;
  min-width: var(--op-space-x-large);
  height: var(--op-space-x-large);
  padding-bottom: var(--op-space-3x-small);
  justify-content: center;
  align-items: center;
  border-radius: var(--op-radius-circle);
  border: var(--op-border-width) solid var(--op-color-primary-on-plus-six-alt);
  color: var(--op-color-primary-on-plus-six-alt);
  text-align: center;
  font-size: var(--op-font-x-small);
  font-style: normal;
  font-weight: var(--op-font-weight-medium);
  line-height: normal;
}
.tier-wizard .tier-wizard__step .tier-wizard__step-bubble-wrapper .tier-wizard__step-bubble.tier-wizard__step-bubble--filled {
  color: var(--op-color-primary-plus-seven);
  background: var(--op-color-primary-on-plus-six-alt);
}
.tier-wizard .tier-wizard__step .tier-wizard__discover-message {
  color: var(--op-color-neutral-on-plus-six-alt);
  font-size: var(--op-font-x-small);
  font-style: normal;
  line-height: normal;
}
.tier-wizard .tier-wizard__form {
  width: 75%;
}
.tier-wizard .tier-wizard__form .label {
  color: var(--op-color-neutral-on-plus-six);
  text-align: center;
  font-size: var(--op-font-2x-large);
  font-style: normal;
  font-weight: var(--op-font-weight-medium);
  line-height: normal;
  width: 100%;
  text-align: center;
}
.tier-wizard .tier-wizard__form .form-group {
  display: flex;
  flex-direction: column;
}
.tier-wizard .tier-wizard__form .form-group .radio {
  display: flex;
  gap: var(--op-space-x-small);
  align-items: center;
  width: 100%;
  padding: var(--op-space-small);
  border-radius: var(--op-radius-x-large);
  background: var(--op-color-neutral-plus-eight);
}
.tier-wizard .tier-wizard__form .form-group .radio:has(input[type=radio]:checked) {
  box-shadow: var(--op-border-all) var(--op-color-primary-minus-three);
  background: var(--op-color-primary-plus-eight);
}
.tier-wizard .tier-wizard__form .form-group .form-control[type=radio] {
  height: var(--op-space-large);
  box-shadow: unset;
}
.tier-wizard .tier-wizard__form form {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-large);
}

.tier-wizard__listed-response {
  padding: var(--op-space-2x-small) var(--op-space-x-small);
  background: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four);
  border-radius: var(--op-radius-medium);
  font-size: var(--op-font-x-small);
  width: fit-content;
}

.tier-wizard__result-message {
  display: flex;
  width: 100%;
  padding: var(--op-space-x-small) var(--op-space-medium);
  justify-content: center;
  align-items: center;
  gap: var(--op-space-x-small);
  border-radius: var(--op-radius-large);
  border: var(--op-border-width) solid var(--op-color-primary-plus-four);
  background: var(--op-color-alerts-notice-plus-seven);
}

.tier-table__wrapper {
  --border-bottom-and-right: calc(-1 * var(--op-border-width)) calc(-1 * var(--op-border-width)) 0 0;
  --border-top-and-right: calc(-1 * var(--op-border-width)) var(--op-border-width) 0 0;
  --border-bottom-and-left: var(--op-border-width) calc(-1 * var(--op-border-width)) 0 0;
  --zindex: 1;
  --max-cell-width: calc(var(--subscription-content-max-width) / 4);
  display: flex;
  gap: var(--op-space-large);
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: center;
  margin-bottom: calc(1.5 * var(--op-space-4x-large));
  /* --op-breakpoint-medium */
}
@media (max-width: 1024px) {
  .tier-table__wrapper {
    overflow-x: auto;
    position: relative;
    align-items: unset;
  }
}

table.tier-table {
  border-collapse: collapse;
  border-radius: var(--op-radius-large);
  max-width: var(--subscription-content-max-width);
  /* --op-breakpoint-medium */
}
@media (max-width: 1024px) {
  table.tier-table {
    table-layout: fixed;
  }
}
table.tier-table th, table.tier-table td {
  font-weight: var(--op-font-weight-normal);
  color: unset;
  max-width: var(--max-cell-width);
}
table.tier-table thead {
  --sticky-th-top: -13px;
  --custom-shadow: 0px 8px 28px 0px rgba(0, 0, 0, 0.08);
  box-shadow: var(--custom-shadow);
  position: sticky;
  top: var(--sticky-th-top);
  z-index: calc(1 + var(--zindex));
}
table.tier-table th {
  box-shadow: inset var(--border-top-and-right) var(--op-color-neutral-plus-four), inset var(--border-bottom-and-right) var(--op-color-neutral-plus-four);
  background-color: var(--op-color-neutral-plus-max);
  padding: var(--op-space-large) var(--op-space-large) var(--op-space-small) var(--op-space-large);
  vertical-align: baseline;
  height: 100%;
  position: relative;
}
table.tier-table th .tier-table__th-title {
  color: var(--op-color-neutral-on-plus-max);
  align-items: center;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
table.tier-table th .detail {
  color: var(--op-color-neutral-on-plus-max-alt);
}
table.tier-table th .callout .tier-table__th-title {
  color: var(--op-color-neutral-on-plus-max);
}
table.tier-table th {
  /* --op-breakpoint-medium */
}
@media (max-width: 1024px) {
  table.tier-table th {
    --tier-table-column-width: 42vw;
    width: var(--tier-table-column-width);
  }
}
table.tier-table td {
  box-shadow: inset var(--border-bottom-and-right) var(--op-color-neutral-plus-four);
  max-width: var(--max-cell-width);
  padding: var(--op-space-small) var(--op-space-medium);
}
table.tier-table td.tier-table__feature-column {
  color: var(--op-color-neutral-on-plus-six);
  font-size: var(--op-font-small);
  line-height: normal;
  font-style: normal;
}
table.tier-table td.tier-table__footer-row {
  color: var(--op-color-primary-on-plus-max-alt);
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-small);
}
table.tier-table td:first-child {
  box-shadow: inset var(--border-bottom-and-right) var(--op-color-neutral-plus-four), inset var(--border-bottom-and-left) var(--op-color-neutral-plus-four);
}
table.tier-table td:last-child {
  box-shadow: inset var(--border-bottom-and-right) var(--op-color-neutral-plus-four);
}
table.tier-table th:first-child {
  border-top-left-radius: var(--op-radius-large);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
}
table.tier-table th:last-child {
  border-top-right-radius: var(--op-radius-large);
}
table.tier-table tr:last-child td {
  box-shadow: inset var(--border-bottom-and-right) var(--op-color-neutral-plus-four);
}
table.tier-table tr:last-child td:last-child {
  border-bottom-right-radius: var(--op-radius-large);
}
table.tier-table tr:last-child td:first-child {
  box-shadow: inset var(--border-bottom-and-right) var(--op-color-neutral-plus-four), inset var(--border-bottom-and-left) var(--op-color-neutral-plus-four);
  border-bottom-left-radius: var(--op-radius-large);
}
table.tier-table .tier-table__feature-column {
  background-color: var(--op-color-neutral-plus-six);
}
table.tier-table .tier-table__feature-column .tier-table__th-title {
  color: var(--op-color-neutral-on-plus-six);
}
table.tier-table .tier-table__feature-column .tier-table__feature-column--alt-text {
  color: var(--op-color-neutral-on-plus-six-alt);
}
table.tier-table .tier-table__feature-column {
  /* --op-breakpoint-medium */
}
@media (max-width: 1024px) {
  table.tier-table .tier-table__feature-column {
    position: sticky;
    top: 0;
    left: 0;
    z-index: var(--op-z-index-header);
  }
}
table.tier-table .tier-table__feature-column {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  table.tier-table .tier-table__feature-column .tier-table__questionnaire-btn {
    padding-block: var(--op-space-2x-small);
    text-wrap: balance;
  }
}
table.tier-table .tier-table__td--primary {
  background: var(--op-color-primary-plus-seven);
}
table.tier-table .tier-table__td--green {
  background: var(--op-color-alerts-notice-plus-seven);
}
table.tier-table .tier-table__badge {
  --translate-y: -136%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, var(--translate-y));
  /* --op-breakpoint-medium */
}
@media (max-width: 1024px) {
  table.tier-table .tier-table__badge {
    transform: none;
  }
}
table.tier-table .tier-table__badge {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  table.tier-table .tier-table__badge {
    display: none;
  }
}
table.tier-table th.tier-table__feature-header--green {
  background: var(--op-color-alerts-notice-plus-seven);
}
table.tier-table th.tier-table__feature-header--green .tier-table__th-title {
  color: var(--op-color-neutral-on-plus-seven);
}
table.tier-table th.tier-table__feature-header--green .detail {
  color: var(--op-color-neutral-on-plus-seven-alt);
}
table.tier-table th.tier-table__feature-header--green .callout .tier-table__th-title {
  color: var(--op-color-neutral-on-plus-seven);
}
table.tier-table th.tier-table__feature-header--primary {
  background: var(--op-color-primary-plus-seven);
}
table.tier-table th.tier-table__feature-header--primary .tier-table__th-title {
  color: var(--op-color-neutral-on-plus-seven);
}
table.tier-table th.tier-table__feature-header--primary .detail {
  color: var(--op-color-neutral-on-plus-seven-alt);
}
table.tier-table th.tier-table__feature-header--primary .callout .tier-table__th-title {
  color: var(--op-color-neutral-on-plus-seven);
}

.tier-table__overflow-cover {
  --overflow-cover-top: -24px;
  background-color: var(--op-color-white);
  width: 100%;
  height: var(--op-space-3x-large);
  position: sticky;
  top: var(--overflow-cover-top);
  z-index: var(--zindex);
}

.upgrades-layout {
  grid-row: 1/4;
}

.upgrade-section-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--op-font-x-large);
  font-weight: var(--op-font-weight-medium);
  align-items: center;
}

.upgrade-summary {
  background: var(--op-color-primary-plus-seven);
  border: var(--op-border-width) solid var(--op-color-primary-plus-four);
  border-radius: var(--op-radius-large);
  padding: var(--op-space-x-large);
  display: flex;
  justify-content: space-between;
}
.upgrade-summary .upgrade-summary__details-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}
.upgrade-summary .upgrade-summary__details {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}
.upgrade-summary .upgrade-summary__header {
  display: flex;
  gap: var(--op-space-x-small);
  color: var(--op-color-neutral-on-plus-seven);
  font-size: var(--op-font-2x-large);
  font-weight: var(--op-font-weight-medium);
  align-items: center;
}
.upgrade-summary .upgrade-summary__description {
  color: var(--op-color-neutral-on-plus-seven-alt);
  font-size: var(--op-font-small);
}
.upgrade-summary .upgrade-summary__tags {
  display: flex;
  gap: var(--op-space-small);
}
.upgrade-summary .upgrade-summary__annual-commitment {
  font-size: var(--op-font-medium);
  color: var(--op-color-neutral-on-plus-seven-alt);
  width: 100%;
  text-align: end;
}
.upgrade-summary .cost-wrapper {
  display: flex;
  gap: var(--op-space-x-small);
  align-items: center;
}
.upgrade-summary .upgrade-summary__monthly-cost {
  font-size: var(--op-font-4x-large);
  color: var(--op-color-neutral-on-plus-seven);
  font-weight: var(--op-font-weight-medium);
}
.upgrade-summary .upgrade-summary__monthly-cost-label {
  font-size: var(--op-font-medium);
  color: var(--op-color-neutral-on-plus-seven-alt);
}
.upgrade-summary .upgrade-summary__monthly-cost-wrapper {
  display: flex;
  gap: var(--op-space-2x-small);
  align-items: baseline;
  justify-content: end;
  flex-wrap: wrap;
}
.upgrade-summary .upgrade-summary__costs-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}

.upgrade-features-section-header {
  display: flex;
  color: var(--op-color-neutral-on-plus-max-alt);
  justify-content: space-between;
  gap: var(--op-space-x-small);
  align-items: center;
}

.upgrade-features-section-header__border {
  height: var(--op-border-width);
  background-color: var(--op-color-neutral-plus-four);
  flex-grow: 1;
}

.upgrade-features-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--op-space-x-large);
  grid-auto-rows: 1fr;
}

.upgrade-feature .upgrade-feature__icons {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}

trix-toolbar * {
  box-sizing: border-box;
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}

trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}

trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}

trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: rgb(0, 0, 0);
}

trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}

@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}

trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%;
}

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-dialogs {
  position: relative;
}

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0px 0px 1.5px 1px;
}

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}

trix-toolbar .trix-dialog--link {
  max-width: 600px;
}

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}

trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
}

trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable] ::-moz-selection, trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}

trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}

trix-editor .attachment {
  position: relative;
}

trix-editor .attachment:hover {
  cursor: default;
}

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}

trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}

trix-editor .trix-button-group {
  display: inline-flex;
}

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}

trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}

trix-editor .trix-button.trix-active {
  background: #cbeefa;
}

trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}

trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}

trix-editor .trix-button--remove:hover {
  border-color: #333;
}

trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}

trix-editor .attachment__metadata-container {
  position: relative;
}

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}

trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}

.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}

.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}

.trix-content li {
  margin-left: 1em;
}

.trix-content [dir=rtl] li {
  margin-right: 1em;
}

.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}

.trix-content img {
  max-width: 100%;
  height: auto;
}

.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}

.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}

.trix-content .attachment__caption {
  text-align: center;
}

.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " •";
}

.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}

.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}

.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}

.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

.trix-content {
  border-radius: var(--op-radius-large);
}

trix-toolbar .trix-button-row {
  overflow: hidden;
}

.trix-button-row .trix-button-group {
  border-radius: var(--op-radius-medium);
  border-color: var(--op-color-neutral-plus-four);
}
.trix-button-row .trix-button-group .trix-button {
  --op-trix-icon-button-height: 2.8rem;
  --op-trix-icon-button-width: 4rem;
  height: var(--op-trix-icon-button-height);
  width: var(--op-trix-icon-button-width);
  color: var(--op-color-neutral-on-plus-eight);
}
.trix-button-row .trix-button-group .trix-button:disabled {
  opacity: 0.5;
}

.trix-content--line-measurement-container {
  --standard-page-width: 8.5in;
  --page-horizontal-padding: calc(2 * 64px);
  width: calc(var(--standard-page-width) - var(--page-horizontal-padding));
  font-size: var(--op-font-medium);
  visibility: hidden;
}

.trix-editor__word-count {
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
  font-weight: var(--op-font-weight-bold);
}

.trix-editor--error trix-editor {
  border-color: var(--op-color-alerts-danger-base);
  background-color: var(--op-color-alerts-danger-plus-eight);
}
.trix-editor--error .trix-editor__word-count {
  color: var(--op-color-alerts-danger-on-plus-eight-alt);
}

:root {
  --search-control-height: 66px;
  --leaflet-attribution-z-index: 500;
  --map-z-index: 799;
}

#background_map .leaflet-zoom-anim .leaflet-zoom-animated {
  transition: none !important;
}

.leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar) {
  /* --op-breakpoint-small */
}
@media (min-width: 768px) {
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar) {
    --search-input-height: 44px;
    height: var(--search-control-height) !important;
    background-color: var(--op-color-neutral-minus-four) !important;
    width: 100% !important;
    max-width: unset !important;
    display: flex !important;
    justify-content: center !important;
    padding: var(--op-space-small) var(--op-space-x-large) !important;
    margin: 0 !important;
    z-index: var(--map-z-index) !important;
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar) form {
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    border-radius: var(--op-radius-large) !important;
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar) form a.reset {
    height: 100% !important;
    font-size: 2rem !important;
    background-color: transparent !important;
    line-height: 4.1rem !important;
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar) form input {
    font-size: var(--op-font-small) !important;
    font-family: var(--op-font-family) !important;
    width: 100% !important;
    height: var(--search-input-height) !important;
    border: var(--op-border-width-large) solid var(--op-color-primary-minus-three) !important;
    border-radius: var(--op-radius-medium) !important;
    box-shadow: none;
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar) form.open input {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar) .results {
    transition: box-shadow 300ms;
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar) .results.active {
    padding: 0 !important;
    border-bottom-left-radius: var(--op-radius-large);
    border-bottom-right-radius: var(--op-radius-large);
    font-size: var(--op-font-medium);
    font-family: var(--op-font-family) !important;
    border: var(--op-border-width) solid var(--op-color-primary-minus-three);
    box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 0px 9999px;
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar) .results.active div {
    padding: var(--op-space-small);
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar) .results.active div:hover {
    background-color: var(--op-color-primary-plus-five);
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar) .results.active div:last-child {
    border-bottom-left-radius: var(--op-radius-large);
    border-bottom-right-radius: var(--op-radius-large);
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar).result-selected {
    background-color: var(--op-color-primary-minus-three) !important;
    color: var(--op-color-on-primary-base) !important;
    padding: 0 var(--op-space-medium) !important;
    align-items: center !important;
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar).result-selected form {
    background-color: transparent !important;
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar).result-selected form button.reset {
    display: none !important;
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar).result-selected form input {
    color: var(--op-color-primary-on-minus-three) !important;
    background-color: transparent !important;
    text-decoration: underline;
    border: none !important;
  }
  .leaflet-control-geosearch.leaflet-geosearch-bar:not(.leaflet-bar).result-selected form .results {
    display: none;
  }
}

.leaflet-control-container > .leaflet-top.leaflet-left {
  left: unset !important;
  right: 1.6rem !important;
  top: 1.6rem !important;
  z-index: 800 !important;
}
.leaflet-control-container > .leaflet-top.leaflet-left .leaflet-control-zoom {
  display: none;
  border: none !important;
  box-shadow: none !important;
  flex-direction: row-reverse;
  margin: 0 !important;
  z-index: 801 !important;
}
.leaflet-control-container > .leaflet-top.leaflet-left a.leaflet-control-zoom-in {
  border: none !important;
  border-radius: 0 var(--op-radius-medium) var(--op-radius-medium) 0 !important;
}
.leaflet-control-container > .leaflet-top.leaflet-left a.leaflet-control-zoom-out {
  border: none !important;
  border-radius: var(--op-radius-medium) 0 0 var(--op-radius-medium) !important;
}

.leaflet-google-mutant {
  top: var(--search-control-height);
  height: calc(100% - var(--search-control-height)) !important;
}

.leaflet-map__message-banner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: var(--leaflet-attribution-z-index);
  font-family: var(--op-font-family) !important;
  color: var(--op-color-primary-on-minus-three);
  font-size: var(--op-font-medium);
  padding: var(--op-space-medium) var(--op-space-small);
  background-color: var(--op-markup-overlay-primary-opaque-color);
  backdrop-filter: var(--op-background-blur-small);
}

.leaflet-map__change-address-button {
  color: var(--op-color-primary-on-minus-three);
  font-size: var(--op-font-medium);
  white-space: nowrap;
  gap: var(--op-space-x-small);
  text-decoration: underline;
}

.leaflet-right.leaflet-bottom,
.leaflet-left.leaflet-bottom {
  z-index: var(--leaflet-attribution-z-index);
}

.mobile-leaflet-search-container {
  max-width: unset;
}
.mobile-leaflet-search-container button.reset {
  display: none;
}
.mobile-leaflet-search-container .results.active {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-large);
  padding-top: var(--op-space-medium);
}
.mobile-leaflet-search-container .results.active > div {
  font-size: var(--op-font-medium);
  font-style: normal;
  font-weight: var(--op-font-weight-normal);
  line-height: normal;
  text-align: left;
  color: var(--op-color-neutral-on-plus-max);
}

.react-select__input {
  opacity: 1 !important;
}
.react-select__input:focus-visible {
  box-shadow: none;
}

.react-select-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.react-select-container .react-select__control {
  align-content: center;
  height: var(--op-input-height-medium);
  padding: var(--op-space-2x-small) var(--op-space-2x-small);
  font-size: var(--op-font-small);
  cursor: pointer;
  box-shadow: none;
  background-color: var(--op-color-neutral-plus-eight);
  border-radius: var(--op-radius-medium);
  border: var(--op-border-width) solid var(--op-color-border);
  color: var(--op-color-primary-on-plus-eight);
}
.react-select-container .react-select__control:hover {
  border: var(--op-border-width) solid var(--op-color-primary-minus-three);
}
.react-select-container .react-select__control.react-select__control--menu-is-open {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-width: var(--op-border-width-large);
  border-color: var(--op-color-primary-minus-three);
  border-bottom-width: var(--op-border-width);
  background-color: var(--op-color-primary-plus-eight);
}
.react-select-container .react-select__control.react-select__control--error {
  border-color: var(--op-color-alerts-danger-base);
}
.react-select-container .react-select__input-container {
  grid-template-columns: 0 1fr;
}
.react-select-container .react-select__menu {
  margin-top: 0;
  box-shadow: none;
  border: var(--op-border-width-large) solid var(--op-color-primary-minus-three);
  border-top: 0;
  border-radius: 0 0 var(--op-radius-large) var(--op-radius-large);
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight);
  overflow: hidden;
  z-index: 2;
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .react-select-container .react-select__menu {
    border: var(--op-border-width) solid var(--op-color-primary-plus-three);
    font-size: var(--op-font-small);
  }
}
.react-select-container .react-select__menu.react-select__menu--pin-connection {
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
}
.react-select-container .react-select__menu-list,
.react-select-container .react-select__group {
  padding: 0;
}
.react-select-container .react-select__menu-list .react-select__item--pin-connection,
.react-select-container .react-select__group .react-select__item--pin-connection {
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.react-select-container .react-select__menu-list .react-select__item--pin-connection:hover,
.react-select-container .react-select__group .react-select__item--pin-connection:hover {
  background-color: var(--op-color-neutral-plus-seven);
  color: var(--op-color-neutral-on-plus-seven);
  cursor: pointer;
}

.react-dnd__placeholder {
  --dnd-placeholder-height: 2px;
  height: var(--dnd-placeholder-height);
  background-color: var(--op-color-primary-minus-three);
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  z-index: 1;
}

.react-dnd__placeholder-container {
  position: relative;
}

.react-dnd__root {
  padding: 0;
  padding-bottom: var(--op-space-3x-small);
  margin: 0;
}
.react-dnd__root ul {
  padding: 0;
}
.markup-panel .react-dnd__root {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.markup-panel .react-dnd__root li:has(.material-list__group) .material-list__group.is-open + div {
  padding: var(--op-space-2x-small);
  background-color: var(--op-color-neutral-plus-six);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  border-top: 0;
  border-bottom-left-radius: var(--op-radius-small);
  border-bottom-right-radius: var(--op-radius-small);
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .markup-panel .react-dnd__root li:has(.material-list__group) .material-list__group.is-open + div {
    border-bottom-left-radius: var(--op-radius-large);
    border-bottom-right-radius: var(--op-radius-large);
  }
}
.markup-panel .react-dnd__root li:has(.material-list__group) .material-list__group.is-open + div .material-list__item-container {
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
  border: 0;
}
.markup-panel .react-dnd__root li:has(.material-list__group) .material-list__group.is-open + div .material-list__item-container.selectable:hover:not(.disabled) {
  background-color: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-five);
}
.markup-panel .react-dnd__root li:has(.material-list__group) .material-list__group.is-open + div ul {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.markup-panel .react-dnd__root li:has(.markup-panel__header.selected) {
  border-radius: var(--op-radius-small);
  box-shadow: 0 0 0 var(--op-border-width) var(--op-color-primary-plus-one);
}
.react-dnd__root li > *:not(.search-match) .material-list__item-container {
  background-color: var(--op-color-neutral-plus-six);
  color: var(--op-color-neutral-on-plus-six);
}
.react-dnd__root li > *:not(.search-match) .material-list__item-container.selectable:hover:not(.disabled) .draggable-row__handle {
  background-color: var(--op-color-neutral-plus-five);
}
.react-dnd__root li > *:not(.search-match) .material-list__item-container.selected {
  background-color: var(--op-color-primary-plus-six);
}
.react-dnd__root li > *:not(.search-match) .material-list__item-container {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .react-dnd__root li > *:not(.search-match) .material-list__item-container {
    padding: 0 var(--op-space-small) 0 0;
    background: var(--op-color-neutral-plus-max);
  }
  .react-dnd__root li > *:not(.search-match) .material-list__item-container .material-list__item {
    padding: var(--op-space-x-small);
    border-left: unset;
  }
}
.react-dnd__root li > * .material-list__item-container--project-details {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-primary-on-plus-seven);
  padding: 0 var(--op-space-small) 0 var(--op-space-x-small);
  border-top: none;
}
.react-dnd__root li > * .material-list__item-container--project-details.selected {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-primary-on-plus-seven);
}
.react-dnd__root li > * .material-list__item-container--project-details {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .react-dnd__root li > * .material-list__item-container--project-details {
    padding: 0 var(--op-space-small) 0 0;
    background-color: var(--op-color-neutral-plus-eight);
    color: var(--op-color-primary-on-plus-seven);
  }
  .react-dnd__root li > * .material-list__item-container--project-details .catalog-list__item {
    padding: var(--op-space-x-small);
    border-left: unset;
  }
}
.react-dnd__root {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .react-dnd__root {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--op-space-x-small);
    overflow: scroll;
  }
  .react-dnd__root li {
    width: 100%;
  }
  .react-dnd__root li:has(div.material-list__group) {
    border-radius: var(--op-radius-large);
    background: var(--op-color-neutral-plus-eight);
    display: flex;
    flex-direction: column;
  }
  .react-dnd__root li:has(div.material-list__group) ul {
    gap: var(--op-space-x-small);
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .react-dnd__root li:has(div.material-list__group) li[role=listitem] {
    display: flex;
    justify-content: center;
  }
}

@media print {
  .print-container {
    visibility: visible;
  }
  body:not(.body--styleguide) {
    overflow: visible;
  }
  .proposal-layout-container, .bottom-nav-rail {
    display: none;
  }
  .property-map-report {
    height: 0;
  }
  ._pendo-resource-center-badge-container {
    display: none !important;
  }
  .hide-on-print, .leaflet-control-attribution {
    display: none;
  }
}
/**
  In order for our application to function and respond appropriately in mobile browsers, the body itself
  needs to be made scrollable. This file represents the style adjustments required to implement the
  different layout. This will cause Safari and other mobile browsers with components that overlay the
  screen to respond to scrolling correctly (collapse the url bar, etc).

  These styles are not appropriate for the desktop version of the app, because having the entire body scroll
  is insufficient for our complex layouts with multiple scrolling containers, and therefore are within a media query.
 */
html {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  html {
    overflow: unset;
  }
  html body {
    overflow: unset;
    height: unset;
  }
  html .navigation-layout .main-content {
    min-height: calc(100vh - var(--pi-bottom-nav-rail-height));
    height: unset;
  }
  html .main-content__header {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  html .main-content__body {
    overflow-y: unset;
  }
  html .main-content__body.no-scrolling {
    overflow-y: unset;
  }
  html .bottom-nav-rail {
    position: sticky;
    bottom: 0;
    z-index: 1;
  }
  html .ts-wrapper .ts-control {
    background-color: var(--op-color-neutral-plus-seven);
    color: var(--op-color-neutral-on-plus-seven);
    border: none;
  }
  html .btn--pill {
    padding: var(--op-space-medium) var(--op-space-large) var(--op-space-medium) var(--op-space-large);
  }
  html .btn--icon {
    border-radius: var(--op-radius-large);
  }
  html .btn--icon.btn--circle-icon {
    box-shadow: unset;
    border-radius: var(--op-radius-circle);
    padding: 0;
  }
}

/* --op-breakpoint-small */
@container table-container (max-width: 768px) {
  .table__container,
  .table__container.table__container--table-with-sticky-header {
    padding: unset;
    overflow: unset;
  }
  .card__header--filters {
    display: none;
  }
}
.full-height {
  height: 100%;
}

.flex-fill {
  flex-shrink: 0;
  flex-grow: 1;
}

.fit-height {
  height: fit-content;
}

.medium-input-height {
  height: var(--op-input-height-medium);
}

.fit-width {
  width: fit-content;
}

.word-break {
  word-break: break-word;
}

.whitespace-no-wrap {
  white-space: nowrap;
}

.whitespace-wrap {
  white-space: pre-wrap;
}

.text-decoration-none {
  text-decoration: none;
}

.font-italic {
  font-style: italic;
}

.font-xs {
  font-size: var(--op-font-x-small);
}

.font-sm {
  font-size: var(--op-font-small);
}

.font-xl {
  font-size: var(--op-font-2x-large);
}

.hidden {
  display: none;
}

.hide-when-empty:empty {
  display: none;
}

.hide-on-mobile {
  /* --op-breakpoint-small */
}
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}

.horizontal-scroll {
  overflow-x: scroll;
}

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

.overflow-y {
  overflow-y: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.gap-x-sm {
  gap: var(--op-space-x-small);
}

.gap-2x-sm {
  gap: var(--op-space-2x-small);
}

.gap-2x-lg {
  gap: var(--op-space-2x-large);
}

.gap-3x-lg {
  gap: var(--op-space-3x-large);
}

.gap-4x-lg {
  gap: var(--op-space-4x-large);
}

.font-weight-normal {
  font-weight: var(--op-font-weight-normal);
}

.font-weight-semi-bold {
  font-weight: var(--op-font-weight-medium);
}

.font-weight-bold {
  font-weight: var(--op-font-weight-semi-bold);
}

.contain-layout {
  contain: layout;
}

.text-nowrap {
  text-wrap: nowrap;
}

.padding-top-xs {
  padding-top: var(--op-space-x-small);
}

.padding-left-xs {
  padding-left: var(--op-space-x-small);
}

.padding-right-xs {
  padding-right: var(--op-space-x-small);
}

.padding-top-md {
  padding-top: var(--op-space-medium);
}

.padding-bottom-xs {
  padding-bottom: var(--op-space-x-small);
}

.padding-inline-xs {
  padding-inline: var(--op-space-x-small);
}

.padding-inline-lg {
  padding-inline: var(--op-space-large);
}

.padding-inline-none {
  padding-inline: unset;
}

.padding-none {
  padding: 0;
}

.padding-3x-large {
  padding: var(--op-space-3x-large);
}

.position-relative {
  position: relative;
}

.display-inline-flex {
  display: inline-flex;
}

.display-table-cell {
  display: table-cell;
}

.hide-on-desktop {
  /* --op-breakpoint-small */
}
@media (min-width: 768px) {
  .hide-on-desktop {
    display: none;
  }
}

.justify-flex-start {
  justify-content: flex-start;
}

.justify-start {
  justify-content: start;
}

.align-end {
  align-self: end;
}

.align-center {
  align-self: center;
}

.box-shadow-none {
  box-shadow: none;
}

.border-top-none {
  border-top: 0;
}

.border-radius-medium {
  border-radius: var(--op-radius-medium);
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.rotate-180 {
  transform: rotate(180deg);
}

.cursor-default {
  cursor: default;
}

.invisible {
  visibility: hidden;
}