/* Converted SCSS -> CSS (utilities)
   Some SCSS variables/mixins were replaced with reasonable defaults.
*/
:root{
  --grid-gutter-xl: 1.5rem;
  --grid-gutter-base: 1rem;
  --fs-nano: 10px;
  --fs-xs: 12px;
  --fs-sm: 12.5px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-xl: 16px;
  --fs-xxl: 24px;
  --white: #ffffff;
  --base-text-color: #212529;
  --fusion-900: 0,0,0; /* used for rgba */
  --border-radius-plus: 0.5rem;
  --panel-edge-radius: 0.5rem;
  --box-shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
  --box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --box-shadow-lg: 0 10px 30px rgba(0,0,0,0.16);
}

/* height & width auto */
.h-auto    { height: auto !important; }
.w-auto    { width: auto !important;  }
.min-height-reset { min-height: initial !important; }
.max-width-reset { max-width: none !important; }
.max-height-reset { max-height: none !important; }

/* width preset */
.min-width-0 { min-width: 0; }

.width-0   { width: 0; }
.width-1   { width: 1.5rem; }
.width-2   { width: 2rem; }
.width-3   { width: 2.5rem; }
.width-4   { width: 2.75rem; }
.width-5   { width: 3rem; }
.width-6   { width: 3.25rem; }
.width-7   { width: 3.5rem; }
.width-8   { width: 3.75rem; }
.width-9   { width: 4rem; }
.width-10  { width: 4.25rem; }

.width-xs  { min-width: 5rem; }
.width-sm  { min-width: 10rem; }
.width-lg  { min-width: 15rem; }
.width-xl  { min-width: 20rem; }

.height-0  { height: 0; }
.height-1  { height: 1.5rem; }
.height-2  { height: 2rem; }
.height-3  { height: 2.5rem; }
.height-4  { height: 2.75rem; }
.height-5  { height: 3rem; }
.height-6  { height: 3.25rem; }
.height-7  { height: 3.5rem; }
.height-8  { height: 3.75rem; }
.height-9  { height: 4rem; }
.height-10 { height: 4.25rem; }

.height-xs  { min-height: 5rem; }
.height-sm  { min-height: 10rem; }
.height-lg  { min-height: 15rem; }
.height-xl  { min-height: 20rem; }

/* line-heights */
.l-h-n { line-height: normal; }

/* no bg image */
.bg-img-none { background-image: none !important; }

/* flex */
.flex-1 { flex: 1; }

/* margins */
.m-g     { margin: var(--grid-gutter-xl); }
.mb-g    { margin-bottom: var(--grid-gutter-xl) !important; }
.mb-gb   { margin-bottom: var(--grid-gutter-base); }

/* paddings */
.p-g    { padding: var(--grid-gutter-xl); }

/* text truncaters */
.text-truncate-header { max-width: calc(var(--grid-gutter-xl) + 4.5625rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-truncate-xs { max-width: 4.5625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-truncate-sm { max-width: 117px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-truncate-md { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-truncate-default { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-truncate-lg { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* blur text */
.text-blur {
  color: transparent !important;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
a.text-blur {
  text-shadow: 0 0 5px rgba(33,150,243,0.5); /* uses primary-ish color */
}

/* positions usage */
.pos-top    { top: 0; }
.pos-left   { left: 0; }
.pos-right  { right: 0; }
.pos-bottom { bottom: 0; }

/* font weights */
.fw-300  { font-weight: 300 !important; }
.fw-400  { font-weight: 400 !important; }
.fw-500  { font-weight: 500 !important; }
.fw-700  { font-weight: 700 !important; }
.fw-900  { font-weight: 900 !important; }
.fw-n    { font-weight: normal !important; }

/* font sizes */
.fs-nano { font-size: 10px !important; }
.fs-xs   { font-size: 12px !important; }
.fs-sm   { font-size: 12.5px !important; }
.fs-b    { font-size: 13px !important; }
.fs-md   { font-size: 14px !important; }
.fs-lg   { font-size: 15px !important; }
.fs-xl   { font-size: 16px !important; }
.fs-xxl  { font-size: 24px !important; }

/* alphas */
.opacity-5   { opacity: 0.05; }
.opacity-10  { opacity: 0.1;  }
.opacity-15  { opacity: 0.15; }
.opacity-20  { opacity: 0.2;  }
.opacity-25  { opacity: 0.25; }
.opacity-30  { opacity: 0.3;  }
.opacity-35  { opacity: 0.35; }
.opacity-40  { opacity: 0.4;  }
.opacity-45  { opacity: 0.45; }
.opacity-50  { opacity: 0.5;  }
.opacity-55  { opacity: 0.55; }
.opacity-60  { opacity: 0.6;  }
.opacity-65  { opacity: 0.65; }
.opacity-70  { opacity: 0.7;  }
.opacity-75  { opacity: 0.75; }
.opacity-80  { opacity: 0.8;  }
.opacity-85  { opacity: 0.85; }
.opacity-90  { opacity: 0.9;  }
.opacity-95  { opacity: 0.95; }
.opacity-100 { opacity: 1;    }

/* backgrounds (basic replacements) */
.bg-white { background-color: var(--white); color: var(--base-text-color); }
.bg-faded { background-color: #f7f7f7; }
.bg-offwhite-fade { background-image: linear-gradient(180deg, #ffffff, #f1fbff); }
.bg-subtlelight { background-color: rgba(33,150,243,0.06); }
.bg-subtlelight-fade { background-image: linear-gradient(180deg, #ffffff, #f5fcff); }
.bg-highlight { background-color: rgba(255,193,7,0.08); }

.bg-gray-50  { background-color: #fafafa; }
.bg-gray-100 { background-color: #f5f5f5; }
.bg-gray-200 { background-color: #eeeeee; }
.bg-gray-300 { background-color: #e0e0e0; }
.bg-gray-400 { background-color: #bdbdbd; }
.bg-gray-500 { background-color: #9e9e9e; }
.bg-gray-600 { background-color: #757575; }
.bg-gray-700 { background-color: #616161; }
.bg-gray-800 { background-color: #424242; }
.bg-gray-900 { background-color: #212121; }

/* borders */
.border-faded { border: 1px solid rgba(var(--fusion-900), 0.07); }
.border-transparent { border: 1px solid transparent !important; }

/* border radius */
.border-top-left-radius-0  { border-top-left-radius: 0 !important; }
.border-bottom-left-radius-0 { border-bottom-left-radius: 0 !important; }
.border-top-right-radius-0 { border-top-right-radius: 0 !important; }
.border-bottom-right-radius-0 { border-bottom-right-radius: 0 !important; }
.rounded-plus { border-radius: var(--border-radius-plus); }
.rounded-bottom { border-radius: 0 0 var(--panel-edge-radius); }
.rounded-top { border-radius: var(--panel-edge-radius) var(--panel-edge-radius) 0 0; }

/* rotate */
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-270 { transform: rotate(270deg); }

/* shadows */
.shadow-0 { box-shadow: none !important; }
.shadow-1, .shadow-hover-1:hover { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.10); }
.shadow-2, .shadow-hover-2:hover { box-shadow: 0 0.1rem 0.15rem rgba(0, 0, 0, 0.1); }
.shadow-3, .shadow-hover-3:hover { box-shadow: 0 0.1rem 0.15rem rgba(0, 0, 0, 0.125); }
.shadow-4, .shadow-hover-4:hover { box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.125); }
.shadow-5, .shadow-hover-5:hover { box-shadow: 0 0.125rem 0.325rem rgba(0, 0, 0, 0.175); }

.shadow-inset-1, .shadow-hover-inset-1:hover { box-shadow: inset 0 .25rem .125rem 0 rgba(33, 37, 41, .025); }
.shadow-inset-2, .shadow-hover-inset-2:hover { box-shadow: inset 0 0.2rem 0.325rem rgba(0, 0, 0, 0.04); }
.shadow-inset-3, .shadow-hover-inset-3:hover { box-shadow: inset 0 0.2rem 0.325rem rgba(0, 0, 0, 0.05); }
.shadow-inset-4, .shadow-hover-inset-4:hover { box-shadow: inset 0 0.25rem 0.5rem rgba(0, 0, 0, 0.06); }
.shadow-inset-5, .shadow-hover-inset-5:hover { box-shadow: inset 0 0.35rem 0.5rem rgba(0, 0, 0, 0.07); }

/* hover helpers */
.shadow-sm-hover:hover { box-shadow: var(--box-shadow-sm) !important; }
.shadow-hover:hover { box-shadow: var(--box-shadow) !important; }
.shadow-lg-hover:hover { box-shadow: var(--box-shadow-lg) !important; }

/* hover any bg */
.hover-bg { background: var(--white); transition: all .1s ease-in; color: inherit; }
.hover-bg:hover { background: inherit; color: inherit; }

/* hover effect dot */
.hover-effect-dot { position: relative; }
.hover-effect-dot:before { content: ""; background: rgba(0,0,0,0.2); width: 0; height: 0; display: block; position: absolute; top: 50%; left: 50%; border-radius: 100%; transition: all 100ms ease-in; }
.hover-effect-dot:hover:before { width: 75%; height: 75%; top: 12%; left: 12%; }

/* hover highlight */
.hover-highlight:hover { background-image: linear-gradient(rgba(29,33,41,.03), rgba(29,33,41,.04)); }
.hover-highlight:active { background-image: linear-gradient(rgba(29,33,41,.05), rgba(29,33,41,.06)); }

/* show/hide child on hover */
.show-child-on-hover .show-on-hover-parent { display:none; }
.show-child-on-hover:hover .show-on-hover-parent { display:block; }

.hide-child-on-hover .hide-on-hover-parent { display:block; }
.hide-child-on-hover:hover .hide-on-hover-parent { display:none; }

/* z-index placeholders (set values as needed) */
.z-index-space { z-index: 10; }
.z-index-cloud { z-index: 20; }
.z-index-ground { z-index: 30; }
.z-index-water { z-index: 40; }

/* cursors */
.cursor-auto { cursor: auto !important; }
.cursor-crosshair { cursor: crosshair !important; }
.cursor-default { cursor: default !important; }
.cursor-e-resize { cursor: e-resize !important; }
.cursor-help { cursor: help !important; }
.cursor-move { cursor: move !important; }
.cursor-n-resize { cursor: n-resize !important; }
.cursor-ne-resize { cursor: ne-resize !important; }
.cursor-nw-resize { cursor: nw-resize !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-progress { cursor: progress !important; }
.cursor-s-resize { cursor: s-resize !important; }
.cursor-se-resize { cursor: se-resize !important; }
.cursor-sw-resize { cursor: sw-resize !important; }
.cursor-text { cursor: text !important; }
.cursor-w-resize { cursor: w-resize !important; }
.cursor-wait { cursor: wait !important; }
.cursor-inherit { cursor: inherit !important; }

/* states */
.state-selected { background: rgba(23,162,184,0.12) !important; }

/* collapse toggle rules */
[aria-expanded="false"] ~ .collapsed-reveal,
.collapsed-reveal { display: none; }
[aria-expanded="false"] ~ .collapsed-hidden,
.collapsed-hidden { display: block; }

[aria-expanded="true"] ~ .collapsed-reveal { display: block; }
[aria-expanded="true"] ~ .collapsed-hidden { display: none; }

/* demo window */
.demo-window { position: relative; z-index: 1; overflow: hidden; padding-top: 23px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); user-select: none; }
.demo-window:before,
.demo-window:after,
.demo-window .demo-window-content:before,
.demo-window .demo-window-content:after { content: ""; position: absolute; display: block; }
.demo-window:before { top: 0; right: 0; left: 0; z-index: 3; height: 23px; background: #e5e5e5; }
.demo-window:after, .demo-window .demo-window-content:before, .demo-window .demo-window-content:after { left: 10px; background: #ccc; top: 6px; z-index: 4; width: 11px; height: 11px; border-radius: 50%; }
.demo-window .demo-window-content { width: 100%; }
.demo-window .demo-window-content img { display: block; width: 100%; }
.demo-window .demo-window-content:before { left: 26px; }
.demo-window .demo-window-content:after { left: 43px; }

/* layout composed */
.layout-composed .page-content { padding: 0 !important; }
.layout-composed .page-content .page-breadcrumb,
.layout-composed .page-content .subheader { display: none; }

/* responsive helpers - mobile breakpoints approximated (768px) */
@media only screen and (max-width: 767.98px) {
  .layout-composed-mobile .page-content { padding: 0 !important; }
  .layout-composed-mobile .page-content .page-breadcrumb,
  .layout-composed-mobile .page-content .subheader { display: none; }

  .position-on-mobile-absolute { position: absolute !important; }
  .position-on-mobile-relative { position: relative !important; }
  .position-on-mobile-static { position: static !important; }

  .height-mobile-auto { height: auto; min-height: auto; max-height: auto; }
  .width-mobile-auto { width: auto; min-width: auto; max-width: auto; }

  .expand-full-height-on-mobile { height: calc(100vh - 56px) !important; }
  .expand-full-width-on-mobile { width: 100vw !important; max-width: 100vw !important; }
}

/* list style none */
.list-style-none { list-style: none; }
.list-style-none ul { list-style: none; }

/* row grid */
.row-grid > .col,
.row-grid > [class^="col-"],
.row-grid > [class*=" col-"],
.row-grid > [class^="col "],
.row-grid > [class*=" col "],
.row-grid > [class$=" col"],
.row-grid > [class="col"] {
  position: relative;
}
.row-grid > .col:after,
.row-grid > [class^="col-"]:after,
.row-grid > [class*=" col-"]:after,
.row-grid > [class^="col "]:after,
.row-grid > [class*=" col "]:after,
.row-grid > [class$=" col"]:after,
.row-grid > [class="col"]:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  display: block;
  width: 0;
  border-left: 1px solid rgba(var(--fusion-900), 0.07);
}
.row-grid > .col:before,
.row-grid > [class^="col-"]:before,
.row-grid > [class*=" col-"]:before,
.row-grid > [class^="col "]:before,
.row-grid > [class*=" col "]:before,
.row-grid > [class$=" col"]:before,
.row-grid > [class="col"]:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  display: block;
  height: 0;
  border-top: 1px solid rgba(var(--fusion-900), 0.07);
}
.row-grid { overflow: hidden; }