body{margin:0;}

.page {
	width: 100%;
}
.page > h1 {
	font-weight: 300 !important;
	color: #fff;
	font-size: 34px;
	margin: 0;
}
.circles-container {
	min-height: 400px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.loader {
	position: relative;
	user-select: none;
	box-sizing: border-box;
	width: 150px;
	height: 150px;
}
.loader-bg {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-sizing: border-box;
	border: 5px solid #eeeeee;
	display: flex;
	align-items: center;
	justify-content: center;
}
.spinner-holder-one {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 50%;
	height: 50%;
	background: transparent;
	box-sizing: border-box;
}
.spinner-holder-two {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: transparent;
	box-sizing: border-box;
}
.loader-spinner {
	width: 200%;
	height: 200%;
	border-radius: 50%;
	border: 5px solid rgb(135, 206, 235);
	box-sizing: border-box;
}
.animate-0-25-a {
	transform: rotate(90deg);
	transform-origin: 100% 100%;
}
.animate-0-25-b {
	transform: rotate(-90deg);
	transform-origin: 100% 100%;
}
.animate-25-50-a {
	transform: rotate(180deg);
	transform-origin: 100% 100%;
}
.animate-25-50-b {
	transform: rotate(-90deg);
	transform-origin: 100% 100%;
}
.animate-50-75-a {
	transform: rotate(270deg);
	transform-origin: 100% 100%;
}
.animate-50-75-b {
	transform: rotate(-90deg);
	transform-origin: 100% 100%;
}
.animate-75-100-a {
	transform: rotate(0deg);
	transform-origin: 100% 100%;
}
.animate-75-100-b {
	transform: rotate(-90deg);
	transform-origin: 100% 100%;
}
.text {
	text-align: center;
	font-size: 20px;
	color: rgb(135, 206, 235);
	font-weight: bold;
}
.blue .loader-bg {
	border-color: rgba(255, 255, 255, 0.1);
	/*box-shadow: inset 2px 2px 20px 0 rgba(0, 0, 0, 0.1) !important;*/
}
.blue .text {
	font-size: 20px;
	color: #3ba8b6 !important;
}
.blue .loader-spinner {
	border-color: #3ba8b6;
}
.blue.circle-loaded-75 .text {
	color: #57a3d8 !important;
}
.blue.circle-loaded-75 .loader-spinner {
	border-color: #57a3d8;
}
.cobalt .loader-bg {
	border-color: #ccc;
	/*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.4) !important;*/
}
.cobalt .text {
	font-size: 20px;
	color: #333 !important;
}
.cobalt .loader-spinner {
	border-color: #333;
}
.fire .loader {
}
.fire .loader-bg {
	border-color: #333;
	/*box-shadow: inset 2px 2px 20px 0 rgba(0, 0, 0, 0.4);*/
}
.fire .text {
	font-size: 20px;
	color: #ee4230 !important;
}
.fire .loader-spinner {
	border-color: #ee4230;
}
.fire.circle-loaded-75 .text {
	color: #c6594e !important;
}
.fire.circle-loaded-75 .loader-spinner {
	border-color: #c6594e;
}
.matte .loader-bg {
	border-color: rgba(255, 255, 255, 0.4);
	/*box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.6);*/
}
.matte .text {
	color: rgba(20, 20, 20) !important;
	font-weight: bold;
}
.matte .loader-spinner {
	border-color: rgba(20, 20, 20);
}
.purple .loader-bg {
	border-color: rgba(255, 255, 255, 0.1);
	/*box-shadow: inset 2px 2px 20px 0 rgba(0, 0, 0, 0.1) !important;*/
}
.purple .text {
	font-size: 20px;
	color: #7b708d !important;
}
.purple .loader-spinner {
	border-color: #7b708d;
}
.purple.circle-loaded-75 .text {
	color: #a186ce !important;
}
.purple.circle-loaded-75 .loader-spinner {
	border-color: #a186ce;
}
.loader-bg {
	border-color: rgba(255, 255, 255, 0.4);
	/*box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.6);*/
}
.text {
	color: rgb(135, 206, 235) !important;
	font-weight: bold;
}
.loader-spinner {
	border-color: rgb(135, 206, 235);
}
.white .loader-bg {
	border-color: rgba(255, 255, 255, 0.1);
	/*box-shadow: inset 2px 2px 20px 0 rgba(0, 0, 0, 0.1) !important;*/
}
.white .text {
	font-size: 20px;
	color: #fff !important;
}
.white .loader-spinner {
	border-color: #fff;
}
.white.circle-loaded-75 .text {
	color: #ddd !important;
}
.white.circle-loaded-75 .loader-spinner {
	border-color: #ddd;
}

}
.page > h1 {
  font-weight: 300 !important;
  color: #fff;
  font-size:34px;
  margin:0;
}
.circles-container {
  min-height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.loader {
    position: relative;
    user-select: none;
    box-sizing: border-box;
    width: 150px;
    height: 150px;
}
.loader-bg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    border: 5px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spinner-holder-one {
    position: absolute;
    top:0;
    left:0;
    overflow: hidden;
    width: 50%;
    height: 50%;
    background: transparent;
    box-sizing: border-box;
}
.spinner-holder-two {
    position: absolute;
    top:0;
    left:0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: transparent;
    box-sizing: border-box;
}
.loader-spinner {
    width: 200%;
    height: 200%;
    border-radius: 50%;
    border: 5px solid rgb(135, 206, 235);
    box-sizing: border-box;
}  
.animate-0-25-a {
    transform: rotate(90deg);
    transform-origin: 100% 100%;
}
.animate-0-25-b {
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
}
.animate-25-50-a {
    transform: rotate(180deg);
    transform-origin: 100% 100%;
}
.animate-25-50-b {
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
}
.animate-50-75-a {
    transform: rotate(270deg);
    transform-origin: 100% 100%;
}
.animate-50-75-b {
    transform: rotate(-90deg);
    transform-origin:100% 100%;
}
.animate-75-100-a {
    transform: rotate(0deg);
    transform-origin: 100% 100%;
}
.animate-75-100-b {
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
}
.text {
    text-align: center;
    font-size: 20px;
    color: rgb(135, 206, 235);
    font-weight: bold;  
}
.blue .loader-bg {
  border-color: rgba(255,255,255,0.1);
  /*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.1) !important;*/
}
.blue .text {
  font-size: 20px;
  color: #3ba8b6 !important;
}
.blue .loader-spinner {
  border-color: #3ba8b6;
}
.blue.circle-loaded-75 .text {
  color: #57a3d8 !important;
}
.blue.circle-loaded-75 .loader-spinner {
  border-color: #57a3d8;
}
.cobalt .loader-bg {
  border-color: #ccc;
  /*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.4) !important;*/
}
.cobalt .text {
  font-size: 20px;
  color: #333 !important;
}
.cobalt .loader-spinner {
  border-color: #333;
}
.fire .loader {
}
.fire .loader-bg {
  border-color: #333;
  /*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.4);*/
}
.fire .text {
  font-size: 20px;
  color: #ee4230 !important;
}
.fire .loader-spinner {
  border-color: #ee4230;
}
.fire.circle-loaded-75 .text {
  color: #c6594e !important;
}
.fire.circle-loaded-75 .loader-spinner {
  border-color: #c6594e;
}
.matte .loader-bg {
  border-color: rgba(255,255,255,0.4);
  /*box-shadow: 2px 2px 20px 0 rgba(0,0,0,0.6);*/
}
.matte .text {
  color: rgba(20, 20, 20) !important;
  font-weight: bold;
}
.matte .loader-spinner {
  border-color: rgba(20, 20, 20);
}
.purple .loader-bg {
  border-color: rgba(255,255,255,0.1);
  /*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.1) !important;*/
}
.purple .text {
  font-size: 20px;
  color: #7b708d !important;
}
.purple .loader-spinner {
  border-color: #7b708d;
}
.purple.circle-loaded-75 .text {
  color: #a186ce !important;
}
.purple.circle-loaded-75 .loader-spinner {
  border-color: #a186ce;
}
.loader-bg {
  border-color: rgba(255,255,255,0.4);
  /*box-shadow: 2px 2px 20px 0 rgba(0,0,0,0.6);*/
}
.text {
  color: rgb(135, 206, 235) !important;
  font-weight: bold;
}
.loader-spinner {
  border-color: rgb(135, 206, 235);
}
.white .loader-bg {
  border-color: rgba(255,255,255,0.1);
  /*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.1) !important;*/
}
.white .text {
  font-size: 20px;
  color: #fff !important;
}
.white .loader-spinner {
  border-color: #fff;
}
.white.circle-loaded-75 .text {
  color: #ddd !important;
}
.white.circle-loaded-75 .loader-spinner {
  border-color: #ddd;
}



.yellow .loader-bg {
	border-color: rgba(255, 255, 255, 0.1);
	/*box-shadow: inset 2px 2px 20px 0 rgba(0, 0, 0, 0.1) !important;*/
}

.yellow .text {
	font-size: 20px;
	color: #d2c315 !important;
}

.yellow .loader-spinner {
	border-color: #d2c315;
}

.yellow.circle-loaded-75 .text {
	color: #ffeb3b !important;
}

.yellow.circle-loaded-75 .loader-spinner {
	border-color: #ffeb3b;
}

.yellow .loader-bg {
  border-color: rgba(255,255,255,0.1);
  /*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.1) !important;*/
}
.yellow .text {
  font-size: 20px;
  color: #d2c315 !important;
}
.yellow .loader-spinner {
  border-color: #d2c315;
}
.yellow.circle-loaded-75 .text {
  color: #ffeb3b !important;
}
.yellow.circle-loaded-75 .loader-spinner {
  border-color: #ffeb3b;
}




.dkgray .loader-bg {
	border-color: rgba(255, 255, 255, 0.1);
}

.dkgray .text {
	font-size: 20px;
	color: #333333 !important;
}

.dkgray .loader-spinner {
	border-color: #333333;
}

.dkgray.circle-loaded-75 .text {
	color: #333333 !important;
}

.dkgray.circle-loaded-75 .loader-spinner {
	border-color: #333333;
}

.dkgray .loader-bg {
	border-color: rgba(255,255,255,0.1);
	/*box-shadow: inset 2px 2px 20px 0 rgba(0,0,0,0.1) !important;*/
}

.dkgray .text {
	font-size: 20px;
	color: #333333 !important;
}

.dkgray .loader-spinner {
	border-color: #333333;
}

.dkgray.circle-loaded-75 .text {
	color: #333333 !important;
}

.dkgray.circle-loaded-75 .loader-spinner {
	border-color: #333333;
}
/* CSS custom properties — default skin values.
   Override these in Content/skins/st-*.css files only. */
:root {
    /* ---- brand / accent ---- */
    --st-accent:            #6366f1;
    --st-accent-hover:      #ebebff;
    --st-accent-text:       #ffffff;

    /* ---- backgrounds ---- */
    --st-bg-body:           whitesmoke;
    --st-bg-ribbon:         whitesmoke;
    --st-bg-toolbar:        #E8E8E8;
    --st-bg-footer:         gray;
    --st-bg-dialog-overlay: rgb(50, 50, 70);
    --st-border-color:      #dee2e6;

    /* ---- text ---- */
    --st-text-body:         #212529;
    --st-text-muted:        color-mix(in srgb, var(--st-text-body) 60%, transparent);
    --st-text-footer:       whitesmoke;
    --st-text-search-sel:   blue;
    --st-text-search-cur:   orange;

    /* ---- grid / report tables ---- */
    --st-grid-header-bg:   color-mix(in srgb, var(--st-accent) 15%, white);
    --st-grid-header-text: color-mix(in srgb, var(--st-accent) 60%, #000);
    --st-grid-alt-row-bg:  color-mix(in srgb, var(--st-accent)  4%, var(--st-bg-body));
    --st-grid-hover-bg:    color-mix(in srgb, var(--st-accent) 10%, white);
    --st-grid-col1-bg:     color-mix(in srgb, var(--st-accent) 10%, var(--st-bg-body));
    --st-grid-border:      var(--st-border-color);
    --st-grid-active-bg:   color-mix(in srgb, var(--st-accent) 20%, white);
    --st-grid-active-text: color-mix(in srgb, var(--st-accent) 80%, #000);

    /* ---- treegrid rows ---- */
    --st-treegrid-row-bg:    var(--st-bg-body);
    --st-treegrid-cat-bg:    var(--st-grid-col1-bg);

    /* ---- tabs ---- */
    --st-tab-bg:             #888888;
    --st-tab-hover-bg:       #466291;
    --st-tab-active-bg:      #293955;
    --st-tab-text:           #ffffff;
    --st-tab-border:         #4897aa;

    /* ---- timesheet cells ---- */
    --st-ts-cell-bg:        #f0f0ff;
    --st-ts-cell-bg-alt:    #E0E0ff;
    --st-ts-cell-bg-sel:    #A0A0ff;

    /* ---- gantt ---- */
    --st-gantt-bar-bg:          lightsteelblue;
    --st-gantt-summary-bg:      orange;
    --st-gantt-summary-triangle: darkorange;
    --st-gantt-percent-bg:      rgba(0, 0, 0, 0.35);
    --st-gantt-milestone-color: slateblue;
    --st-gantt-milestone-bg:    yellow;
    --st-gantt-scale-border:    white;
    --st-gantt-gridline:        lightgray;
    --st-gantt-drag-bg:         blue;
    --st-gantt-link-color:      blue;

    /* ---- gantt critical path ---- */
    --st-gantt-critical-bar-start:    #dc2626;
    --st-gantt-critical-bar-end:      #ef4444;
    --st-gantt-noncritical-bar-start: #2563eb;
    --st-gantt-noncritical-bar-end:   #3b82f6;
    --st-gantt-float-bar-bg:          rgba(30, 58, 95, 0.30);
    --st-gantt-float-bar-stroke:      #3b82f6;
    --st-gantt-float-bar-text:        #60a5fa;
    --st-gantt-critical-arrow:        #ef4444;
    --st-gantt-noncritical-arrow:     #3b82f6;
    --st-gantt-today-color:           #c2580a;
    --st-gantt-weekend-bg:            rgba(0, 0, 0, 0.06);
    --st-gantt-weekend-scale-bg:      rgba(0, 0, 0, 0.12);
    --st-gantt-baseline-bar:          #888888;

    /* ---- dock manager ---- */
    --st-dock-header-bg:    rgba(41, 57, 85, 1.0);
    --st-dock-text:         rgba(255, 255, 255, 1.0);
    --st-dock-border:       #212121;
    --st-dock-pane-bg:      #F5F5F5;
    --st-dock-splitter:     steelblue;
    --st-dock-active-tab:   #212121;
    --st-new-tab-flash:     yellow;

    /* ---- ai chat bubbles ---- */
    --st-ai-bubble-text:    #ffffff;
    --st-ai-bubble-you-bg:  #00469f;
    --st-ai-bubble-ai-bg:   #1e6b3c;
    --st-ai-bubble-app-bg:  #505050;

    /* ---- text selection ---- */
    --st-selection-bg:      #6366f1;
    --st-selection-text:    #ffffff;

    /* ---- typography ---- */
    --st-font-family:       inherit;
    --st-font-size-base:    10pt;
    --st-font-weight:       normal;
    --st-border-radius:     4px;
}


/* ------------------------------------------------------- */
/* Standard Time application styles                        */
/* ------------------------------------------------------- */


/* ------------------------------------------------------- */
/* Main page body                                          */
/* ------------------------------------------------------- */
body {
    padding-top: 0px;
    padding-bottom: 0px;
    height: 100vh;
    overflow: hidden;
    font-weight: var(--st-font-weight);
}

::selection {
    background: var(--st-selection-bg);
    color: var(--st-selection-text);
}

/* ------------------------------------------------------- */
/* Real content areas                                      */
/* ------------------------------------------------------- */
.contentareacolor {
    background-color: var(--st-bg-body);
}


/* ------------------------------------------------------- */
/* The main page controls, under ribbon, above footer      */
/* ------------------------------------------------------- */
.maincontentcontainer {
    height: 80%;
    height: calc(100% - 148px - 24px);
    overflow: hidden;
}


/* ------------------------------------------------------- */
/* Override bootstrap because the max-width was so small   */
/* ------------------------------------------------------- */
.container {
    max-width: 10000px !important;
}


/* ------------------------------------------------------- */
/* Small area at the top for ribbon controls               */
/* ------------------------------------------------------- */
.maincontentribboncontainer {
    height: 4%;
    min-height: 148px;
    width: 100%;
    font-size: var(--st-font-size-base);
    background-color: var(--st-bg-ribbon);
}


/* ------------------------------------------------------- */
/* Bottom of page                                          */
/* ------------------------------------------------------- */
.maincontentfootercontainer {
    height: 2%;
    min-height: 24px;
    position: fixed;
    bottom: 0;
    width: 100%;
    display:inline-table;
    background-color: var(--st-bg-footer);
    color: var(--st-text-footer);
}

.progressbarcontainer {
    height: 100%;
    /*display: inline-block;*/
    display: flex;
    width: fit-content;
    float: right;
}



.lightgrayhover { }
.lightgrayhover:hover { background-color: lightgray !important; }


/* ------------------------------------------------------- */
/* Override +/- icons in tree grid                         */
/* ------------------------------------------------------- */
.ui-icon-plus:before {
    content: '\e646';
}
.ui-icon-minus:before {
    content: '\e648';
}
.ui-icon-plus {
    content: '\e646';
}
.ui-icon-minus {
    content: '\e648';
}

/* ------------------------------------------------------- */
/* Override excessive grid padding                         */
/* ------------------------------------------------------- */
.ui-iggrid .ui-iggrid-header, .ui-iggrid table tbody td, .ui-iggrid table th {
    padding: 0px !important;
}

.ui-iggrid table tbody td.ui-iggrid-selectedcell {
    padding: 0px !important;
}

.ui-iggrid-editingcell {
    padding: 0px !important;
    border-width:0px !important;
}

/* ------------------------------------------------------- */
/* Override excessive tab padding                          */
/* ------------------------------------------------------- */
.ui-tabs-mainribbon .ui-tabs-panel {
    display: block;
    /*padding: 1em 1.4em;*/
    padding: 0 !important;
    overflow: hidden !important;
}

.ui-tabs-panel-mainribbon {
    display: block;
    /*padding: 1em 1.4em;*/
    padding: 0 !important;
    overflow: hidden !important;
}

.ui-corner-all {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}







/* ------------------------------------------------------- */
/* Design tools window when editing a report               */
/* ------------------------------------------------------- */


.ui-tabs-reportdesigntools .ui-tabs-panel {
    display: block;
    /*padding: 1em 1.4em;*/
    padding: 0 !important;
    overflow-y: scroll !important;
}

.ui-tabs-panel-reportdesigntools {
    display: block;
    /*padding: 1em 1.4em;*/
    padding: 0 !important;
    overflow-y: scroll !important;
}






/* ------------------------------------------------------- */
/* Tables within a report                                  */
/* See stdata.Globals.DataTableToHtml()                    */
/* ------------------------------------------------------- */

.reporttable, .reporttable th, .reporttable td {
    border: 1px solid var(--st-grid-border);
    border-collapse: collapse;
}

.reporttableheaderrow {
    background-color: var(--st-grid-header-bg);
    font-weight: 700;
}

.reporttablefooterrow {
    background-color: var(--st-grid-header-bg);
    font-weight:700;
}

.reporttablerows:nth-child(even) {
    background-color: var(--st-grid-alt-row-bg);
}

.reporttablerows:hover {
    background-color: var(--st-grid-hover-bg);
}

.reporttablecols:nth-child(1) {
    background-color: var(--st-grid-col1-bg);
    font-weight: 700;
}






/* ------------------------------------------------------- */
/* Become visible after a preiod of time                   */
/* ------------------------------------------------------- */
.transitiontovisible1 {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.transitiontovisible2 {
    opacity: 1;
}







/* ------------------------------------------------------- */
/* Grid header text alignment and styles                   */
/* ------------------------------------------------------- */
th.ui-iggrid-header:nth-child(1) {
    text-align: left !important;
}

th.ui-iggrid-header {
    text-align: left !important;
}

/* Property grid category row                              */
.ui-igtreegrid-rowlevel0 {
    background-color: var(--st-treegrid-cat-bg) !important;
    white-space: nowrap !important;
}

/* Property grid property row                              */
.ui-igtreegrid-rowlevel1 {
    background-color: var(--st-treegrid-row-bg) !important;
    color: var(--st-text-body) !important;
    white-space:nowrap !important;
}


/* ------------------------------------------------------- */
/* JQuery UI modal dialog overlay background color         */
/* ------------------------------------------------------- */
.ui-widget-overlay {
    opacity: .70 !important;
    filter: Alpha(Opacity=50) !important;
    background: var(--st-bg-dialog-overlay) !important;
}


/* --------------------------------------------------------------------- */
/* Dropdown panel for custom properties like Folder, Attachments, etc.   */
/* --------------------------------------------------------------------- */
.custom-dropdown-panel {
    position: fixed;
    z-index: 1001;
    width: 500px;
    height: 400px;
    background-color: white;
    border-width: 1px;
    border-color: darkgray;
    border-style: solid;
    overflow: hidden;
    border-radius: 8px;
}


.whitetextshadow {
    text-shadow: -1px -1px 0px white, 1px -1px 0px white, -1px 1px 0px white, 1px 1px 0px white;
}

/* Timesheet cells where hours are entered*/
.timesheettimeperiodcell {
    border-width: 1px;
    border-color: whitesmoke;
    border-style: solid;
}

/* Timesheet "today" column helps focus on data entry*/
.timesheettodaycolumncell {
    background-color: var(--st-ts-cell-bg);
    mix-blend-mode: darken;
    border-width: 1px;
    border-color: var(--st-ts-cell-bg-alt);
    border-style: solid;
}

.timesheettimeperiodcell:hover { border-color: var(--st-ts-cell-bg-sel); }
.timesheettodaycolumncell:hover { border-color: var(--st-ts-cell-bg-sel); }

/* darken blend-mode kills white active-cell text on skins with dark accent colors — reset when selected */
.ui-iggrid td.ui-state-active .timesheettodaycolumncell,
.ui-iggrid .ui-ig-altrecord td.ui-state-active .timesheettodaycolumncell {
    mix-blend-mode: normal;
    background-color: transparent;
}

/*.timesheettimeperiodcolumn {*/
    /*background-color: green;*/
/*}

.timesheettimeperiodcolumn:hover div {
    background-color: red !important;
    mix-blend-mode: darken !important;
}*/



.editedgridcell {
    background-color: lightyellow !important
}

/* Signify that an item is selected by user click */
.clickselected {
    background-color: lightblue !important;
}

.draghandle {
    width: 100%; /* Set equal width and height */
    height: 100%;
    background-color: white; /* Optional: Add a background color */
    border-width:1px;
    border-style:solid;
    border-color:orange;
    border-radius: 50%; /* This makes the square element a circle */
}

.draghandle:hover { background-color: cornflowerblue; border-width:2px; }

.floatingmodelessdiv {
    position: relative;
    z-index: -1;
    background: #888;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    font-size: calc(8pt + 0.25vw);
    border: 1px solid #777;
    color: #FFF;
    padding: 0.4em 1em;
    white-space: nowrap;
    line-height: 1.2em;
    cursor: move;
    display: block;
    outline: 0px;
}

/* Popup list used to select records or items */
.popuplistdiv {
    position: fixed;
    z-index: 2001;
    width: 400px;
    height: 300px;
    background-color: white;
    border-style: solid;
    border-color: darkgray;
    border-width: 1px;
    overflow: hidden;
    border-radius: 4px;
    white-space: nowrap;
}

.popuplistminihtmltreeviewholder {
    width: 100%;
    height: 100%;
    list-style-type: none;
    overflow: scroll;
    cursor: default;
}


.popuplistul {
    width: 100%;
    height: 100%;
    list-style-type: none;
    overflow: scroll;
    cursor: default;
}

.multilinetextarea {
    font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace !important;
}


/* ------------------------------------------------------- */
/* Infragistics grid skin overrides                        */
/* Wires IG hard-coded colors to --st-* CSS variables so  */
/* skin files can retheme grids without touching IG files. */
/* ------------------------------------------------------- */

/* Grid header — covers the header table, all header cells, the jQuery UI header class,
   and sortable/filterable header cells which IG marks with an extra class */
.ui-iggrid .ui-iggrid-headertable,
.ui-iggrid th.ui-iggrid-header,
.ui-iggrid .ui-widget-header,
.ui-iggrid th.ui-iggrid-headercell-featureenabled {
    background-color: var(--st-grid-header-bg) !important;
    color: var(--st-grid-header-text) !important;
    border-color: var(--st-grid-border) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--st-accent) !important;
}

/* Alternating rows */
.ui-iggrid tr.ui-ig-altrecord {
    background-color: var(--st-grid-alt-row-bg) !important;
}

/* Row / cell hover */
.ui-iggrid td.ui-state-hover,
.ui-iggrid .ui-ig-altrecord td.ui-state-hover,
.ui-iggrid .ui-ig-altrecord td.ui-state-default.ui-state-hover,
.ui-iggrid th.ui-iggrid-rowselector-class.ui-state-hover,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-hover {
    background: var(--st-grid-hover-bg) !important;
    color: var(--st-text-body) !important;
}

/* Selected / active cell */
.ui-iggrid td.ui-state-active,
.ui-iggrid .ui-ig-altrecord td.ui-state-active,
.ui-iggrid th.ui-iggrid-rowselector-class.ui-state-active,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-active {
    background: var(--st-grid-active-bg) !important;
    color: var(--st-grid-active-text) !important;
    border-color: var(--st-grid-active-bg) !important;
}

/* Focus ring on active row / cell */
.ui-iggrid tr.ui-state-focus td,
.ui-iggrid tr.ui-state-focus th,
.ui-iggrid tr.ui-ig-altrecord.ui-state-focus td,
.ui-iggrid tr.ui-ig-altrecord.ui-state-focus th {
    border-top-color: var(--st-grid-active-bg) !important;
    border-bottom-color: var(--st-grid-active-bg) !important;
}
.ui-iggrid td.ui-state-focus,
.ui-iggrid td.ui-state-active.ui-state-focus {
    border-color: var(--st-grid-active-bg) !important;
}

/* Selected row — left accent stripe via inset shadow (no layout reflow) */
.ui-iggrid tr.ui-state-focus > th:first-child,
.ui-iggrid tr.ui-state-focus > td:first-child,
.ui-iggrid tr.ui-ig-altrecord.ui-state-focus > th:first-child,
.ui-iggrid tr.ui-ig-altrecord.ui-state-focus > td:first-child {
    box-shadow: inset 3px 0 0 var(--st-accent) !important;
}

/* Grid body / scrolldiv background */
.ui-iggrid-scrolldiv,
.ui-iggrid-fixedcontainer {
    background-color: var(--st-bg-body) !important;
}

/* Footer and toolbar bar */
.ui-iggrid .ui-iggrid-footer,
.ui-iggrid .ui-iggrid-toolbar,
.ui-iggrid .ui-iggrid-footer .ui-state-default,
.ui-iggrid .ui-iggrid-toolbar .ui-state-default,
.ui-iggrid .ui-iggrid-addrow td,
.ui-iggrid .ui-iggrid-addrow th {
    background-color: var(--st-bg-toolbar) !important;
    color: var(--st-text-body) !important;
}

/* Group-by area */
.ui-iggrid .ui-iggrid-groupbyarea {
    background-color: var(--st-bg-body) !important;
    color: var(--st-text-body) !important;
}

/* Treegrid context row (theme hard-codes #FFF / rgba(68,68,68,.7)) */
.ui-igtreegrid-contextrow {
    background-color: var(--st-bg-body) !important;
    color: var(--st-text-body) !important;
}

/* Tree widget node colors (theme hard-codes #444/#333 link text, invisible on dark backgrounds) */
.ui-igtree a {
    color: var(--st-text-body) !important;
}
.ui-igtree a.ui-state-hover {
    background-color: var(--st-grid-hover-bg) !important;
    color: var(--st-text-body) !important;
}
.ui-igtree a.ui-state-focus {
    background-color: var(--st-accent-hover) !important;
    border-color: var(--st-accent) !important;
    color: var(--st-text-body) !important;
}
.ui-igtree a.ui-state-active {
    background-color: var(--st-accent) !important;
    color: var(--st-accent-text) !important;
}

/* ------------------------------------------------------- */
/* Ribbon button text color                                */
/* ------------------------------------------------------- */
.ribbonbutton, .ribbonbuttonsmall { color: var(--st-text-body); }


/* ------------------------------------------------------- */
/* jQuery UI tab skin overrides                            */
/* Wires jQUI tab classes to --st-* variables so skin     */
/* files retheme tabs without per-skin class rules.        */
/* ------------------------------------------------------- */

.ui-tabs .ui-tabs-nav {
    background: var(--st-tab-bg) !important;
    border: none !important;
}

.ui-tabs .ui-tabs-tab {
    background: var(--st-tab-bg) !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
}

.ui-tabs .ui-tabs-anchor {
    color: var(--st-tab-text) !important;
}

.ui-tabs .ui-tabs-tab.ui-state-hover {
    background: var(--st-tab-hover-bg) !important;
}

.ui-tabs .ui-tabs-tab.ui-state-active {
    background: var(--st-tab-active-bg) !important;
    border: 1px solid var(--st-tab-border) !important;
    border-bottom: none !important;
    margin-top: 1px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.ui-tabs .ui-tabs-tab.ui-state-active .ui-tabs-anchor {
    color: var(--st-tab-text) !important;
}

.ui-tabs .ui-tabs-panel {
    background: var(--st-bg-body) !important;
    color: var(--st-text-body) !important;
    border: none !important;
}


/* ------------------------------------------------------- */
/* AI chat bubbles                                         */
/* ------------------------------------------------------- */
.ai-bubble {
    width: 78%;
    border-radius: 14px;
    padding: 6px 10px;
    color: var(--st-ai-bubble-text);
    font-size: 9pt;
    font-family: inherit;
    border: none;
    resize: none;
    overflow: hidden;
    word-break: break-word;
    white-space: pre-wrap;
    margin-bottom: 6px;
    display: block;
    box-sizing: border-box;
}

.ai-bubble-you {
    background-color: var(--st-ai-bubble-you-bg);
    margin-left: auto;
}

.ai-bubble-ai {
    background-color: var(--st-ai-bubble-ai-bg);
}

.ai-bubble-app {
    background-color: var(--st-ai-bubble-app-bg);
}

.ai-bubble-error-row {
    position: relative;
    display: block;
    width: 78%;
    margin-bottom: 6px;
}

.ai-bubble-error-row .ai-bubble {
    width: 100%;
    margin-bottom: 0;
}

.ai-error-info-icon {
    position: absolute;
    bottom: 5px;
    right: 6px;
    cursor: pointer;
    font-size: 0.9em;
    color: white;
    background: var(--st-accent);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    user-select: none;
    transition: transform 0.15s ease;
}

.ai-error-info-icon:hover {
    transform: scale(1.2);
}


/* ------------------------------------------------------- */
/* Standard Time ribbon styles                             */
/* ------------------------------------------------------- */

/* https://api.jqueryui.com/theming/css-framework/ */
#MainRibbonTabs .ui-state-active                { background-color: var(--st-tab-active-bg); }
#MainRibbonTabs .ui-state-hover                 { background-color: var(--st-tab-hover-bg); }
#MainRibbonTabs .ui-state-active a,
#MainRibbonTabs .ui-state-hover  a              { color: var(--st-tab-text); }

.ribbonbutton {
    font-size: 9pt !important;
    line-height: 90px !important;
    height: 75px !important;
    border: none !important;
    transition-duration: 0.3s;
}

.ribbonbutton:focus-visible {
    outline: 2px solid var(--st-accent);
    outline-offset: -2px;
    border-radius: 10px;
}

/* Enlarge button image slightly during hover*/
.ribbonbutton:hover {
    background-color: var(--st-accent-hover) !important;
    background-size: 34px !important;
    border-radius: 10px;
}

.ribbonpanelcontainer {
    width: max-content;
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    overflow-y: hidden;
}

.ribbonpanel {
    font-size: 12px;
    color: var(--st-text-muted);
    padding-top: 5px;
    padding-left: 4px;
    padding-right: 4px;
    width: max-content;
    border-right: 1px solid var(--st-grid-border, #dee2e6);
}

.ribbonpanellabel {
    text-align: center;
}


.ribbonbuttonsmall {
    background-color: transparent;
    border: none !important;
    text-align: left;
    transition-duration: 0.3s;
}

.ribbonsmallbuttoncontainer {
    height: 75px !important;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
}




/* ------------------------------------------------------- */
/* Standard Time search bar styles                         */
/* ------------------------------------------------------- */


.searchbutton {
    font-size: 9pt !important;
    line-height: 90px !important;
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    transition-duration: 0.3s;
}

/* Enlarge button image slightly during hover*/
.searchbutton:hover {
    transform: scale(1.1);
}


.searchcontainer {
    margin-left: auto;
    margin-right: 0;
}

.searchinputtext {
    border-width: 0;
    outline-width: 0;
    border-radius: 10px;
}


/* jQuery will search for this class, then set background color to signify that it's selected */
.searchableitem {
    /*color: black !important;*/
    /*background-color: lightgreen !important;*/
}

/* Signify that an item is selected */
.searchselected {
    color: white !important;
    background-color: var(--st-text-search-sel) !important;
}

/* The current search item, F3 to select next */
.searchcurrent {
    color: black !important;
    background-color: var(--st-text-search-cur) !important;
}


/* Go up each parent until a searchable div is found, then search for searchableitem class */
.searchablediv {
}



/* ------------------------------------------------------- */
/* Standard Time toolbar styles                            */
/* ------------------------------------------------------- */

/* ------------------------------------------------------- */
/* Toolbar area above content                              */
/* ------------------------------------------------------- */
.toolbarheadercolor {
    background-color: var(--st-bg-toolbar);
}

/* ------------------------------------------------------- */
/* Toolbar area above views (grids, charts, etc)           */
/* ------------------------------------------------------- */
.maincontenttoolbar {
    height: 4%;
    min-height: 24px;
    width: 100%;
    font-size: 12pt;
    background-color: var(--st-bg-body);
}


.toolbarbutton16 {
    width: 16px !important;
    height: 16px !important;
    border: none !important;
    background-size: contain !important;
    transition-duration: 0.3s;
}

.toolbarbutton20 {
    width: 20px !important;
    height: 20px !important;
    border: none !important;
    background-size: contain !important;
    transition-duration: 0.3s;
}

.toolbarbutton24 {
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    background-size: contain !important;
    transition-duration: 0.3s;
}

.toolbarbutton32 {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background-size: contain !important;
    transition-duration: 0.3s;
}

.toolbarbutton48 {
    width: 48px !important;
    height: 48px !important;
    border: none !important;
    background-size: contain !important;
    transition-duration: 0.3s;
}




.toolbarbutton24:hover {
    /*background-size: 105% !important;*/
    transform: scale(1.1) !important;
}

.toolbarbutton16:hover {
    /*background-size: 105% !important;*/
    transform: scale(1.1) !important;
}



.homeiconbutton {
    font-size: 0.75vw !important;
    /*line-height: 90% !important;*/
    height: 100%;
    width: 100%;
    border: none !important;
    transition-duration: 0.1s;
    background-size: contain !important;
    background-position-y: 10% !important;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    /*-webkit-text-stroke: 5px black;*/
    text-shadow: -1px -1px 0px white, 1px -1px 0px white, -1px 1px 0px white, 1px 1px 0px white;
    -webkit-print-color-adjust: exact;
}

.smallapphomeicon {
    background-position-y: 50% !important;
    font-size: 2vw !important;
}


/* Lift + shadow + accent underline on hover */
.homeiconbutton {
    position: relative;
    overflow: hidden;
    transition: transform 150ms ease-out,
                box-shadow 150ms ease-out,
                background-color 150ms ease-out;
}
.homeiconbutton:hover {
    transform: translateY(-3px) scale(1.07);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--st-accent, #0d6efd) 20%, transparent);
    background-color: color-mix(in srgb, var(--st-accent, #0d6efd) 9%, transparent) !important;
    border-radius: 10px;
}
.homeiconbutton::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--st-accent, #0d6efd);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 150ms ease-out;
    border-radius: 0 0 4px 4px;
}
.homeiconbutton:hover::after {
    transform: scaleX(1);
}

.ten-column-grid-container {
    display: grid;
    grid-template-columns: 9% 9% 9% 9% 9% 9% 9% 9% 9% 9%;
    gap: 1%;
    padding: 0px 10px 20px 10px;
    width: 100%;
    height: 95%;
}

.five-column-grid-container {
    display: grid;
    grid-template-columns: 19% 19% 19% 19% 19%;
    gap: 1%;
    padding: 10px;
    width: 100%;
    height: 90%;
}

.centered-icon-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
    gap: 1%;
    padding: 0px 10px 20px 10px;
    width: 100%;
    height: 95%;
}

.homeiconbuttonrow {
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    padding-right: 10px;
}

/* ---- Home icon layout: Cards ---- */
.icon-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 12px;
    align-content: start;
}
.icon-card {
    border: 1px solid color-mix(in srgb, var(--st-accent, #0d6efd) 18%, transparent);
    border-radius: 6px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--st-accent, #0d6efd) 5%, transparent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
    will-change: transform;
    position: relative;
}
@property --card-beam1-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@property --card-beam2-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
/* Shared beam style — masked to border strip only */
.icon-card::before,
.icon-card::after,
.icon-list-section::before,
.icon-list-section::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 7px;
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
/* Beam 1 — clockwise down the right side */
.icon-card::before,
.icon-list-section::before {
    background: conic-gradient(from var(--card-beam1-angle),
        white 0%,
        var(--st-accent, #0d6efd) 3%,
        color-mix(in srgb, var(--st-accent, #0d6efd) 55%, transparent) 10%,
        color-mix(in srgb, var(--st-accent, #0d6efd) 15%, transparent) 22%,
        transparent 28%,
        transparent 100%);
}
/* Beam 2 — counter-clockwise down the left side (angle decreases 0 → -180) */
.icon-card::after,
.icon-list-section::after {
    background: conic-gradient(from var(--card-beam2-angle),
        white 0%,
        var(--st-accent, #0d6efd) 3%,
        color-mix(in srgb, var(--st-accent, #0d6efd) 55%, transparent) 10%,
        color-mix(in srgb, var(--st-accent, #0d6efd) 15%, transparent) 22%,
        transparent 28%,
        transparent 100%);
}
@keyframes card-laser-beam1 {
    from { --card-beam1-angle: 0deg;    opacity: 1; }
    95%  {                              opacity: 1; }
    to   { --card-beam1-angle: 180deg;  opacity: 0; }
}
@keyframes card-laser-beam2 {
    from { --card-beam2-angle: 0deg;    opacity: 1; }
    95%  {                              opacity: 1; }
    to   { --card-beam2-angle: -180deg; opacity: 0; }
}
.icon-card:has(.iconcardwrap:hover)::before,
.icon-list-section:has(.iconlistwrap:hover)::before {
    animation: card-laser-beam1 0.3s linear 1 forwards;
}
.icon-card:has(.iconcardwrap:hover)::after,
.icon-list-section:has(.iconlistwrap:hover)::after {
    animation: card-laser-beam2 0.3s linear 1 forwards;
}
.icon-card:has(.iconcardwrap:hover),
.icon-list-section:has(.iconlistwrap:hover) {
    border-color: var(--st-accent, #0d6efd);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--st-accent, #0d6efd) 12%, transparent);
}
.icon-card-title {
    font-size: calc(7pt + 0.2vw);
    font-weight: bold;
    color: var(--st-text-muted, #666);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--st-border-color, #eee);
}
.icon-card-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---- Home icon layout: List ---- */
.icon-list-container {
    columns: 2;
    column-gap: 32px;
    padding: 12px;
}
.icon-list-section {
    break-inside: avoid;
    margin-bottom: 16px;
}
.icon-list-header {
    font-size: calc(7pt + 0.2vw);
    font-weight: bold;
    color: var(--st-text-muted, #666);
    margin-bottom: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--st-border-color, #eee);
}



/* Cards — icon stacked above label chip, fixed width so buttons tile evenly */
/* Wrapper div so SetupElementImagesInDivByParent can recurse in and set the <img> src */
.iconcardwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 84px;
    padding: 4px;
    cursor: pointer;
    border-radius: 3px;
    text-align: center;
    font-size: calc(7pt + 0.2vw);
    color: var(--st-text-body, inherit);
    position: relative;
    overflow: hidden;
    transition: transform 150ms ease-out,
                box-shadow 150ms ease-out,
                background-color 150ms ease-out;
}
.iconcardwrap:hover {
    transform: translateY(-3px) scale(1.07);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--st-accent, #0d6efd) 20%, transparent);
    background-color: color-mix(in srgb, var(--st-accent, #0d6efd) 9%, transparent);
    border-radius: 10px;
}
.iconcardwrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--st-accent, #0d6efd);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 150ms ease-out;
    border-radius: 0 0 4px 4px;
}
.iconcardwrap:hover::after {
    transform: scaleX(1);
}
.iconcardimg {
    width: 64px;
    height: 64px;
    display: block;
}
.iconcardlabel {
    display: block;
    background: color-mix(in srgb, var(--st-accent, #0d6efd) 12%, transparent);
    color: var(--st-accent, #0d6efd);
    border-radius: 4px;
    padding: 2px 5px;
    line-height: 1.3;
    width: 100%;
    box-sizing: border-box;
    transition: background 150ms ease-out;
}
/* List — section container */
.icon-list-section {
    background: color-mix(in srgb, var(--st-accent, #0d6efd) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--st-accent, #0d6efd) 18%, transparent);
    border-radius: 6px;
    padding: 6px 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
    will-change: transform;
    position: relative;
}
/* List — compact icon+text rows */
.iconlistwrap {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 3px 4px;
    cursor: pointer;
    border-radius: 3px;
    font-size: calc(7pt + 0.15vw);
    color: var(--st-text-body, inherit);
    transition: background 150ms ease-out;
}
.iconlistwrap:hover {
    background: var(--st-grid-hover-bg, rgba(0,0,0,0.05));
}
.iconlistimg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---- Home icon layout: Planetary ---- */
@property --planet-beam1-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@property --planet-beam2-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.planet-beam-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}
.planet-beam-ring::before,
.planet-beam-ring::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}
.planet-beam-ring::before {
    background: conic-gradient(from var(--planet-beam1-angle),
        white 0%,
        var(--st-accent, #0d6efd) 3%,
        color-mix(in srgb, var(--st-accent, #0d6efd) 55%, transparent) 10%,
        color-mix(in srgb, var(--st-accent, #0d6efd) 15%, transparent) 22%,
        transparent 28%,
        transparent 100%);
}
.planet-beam-ring::after {
    background: conic-gradient(from var(--planet-beam2-angle),
        white 0%,
        var(--st-accent, #0d6efd) 3%,
        color-mix(in srgb, var(--st-accent, #0d6efd) 55%, transparent) 10%,
        color-mix(in srgb, var(--st-accent, #0d6efd) 15%, transparent) 22%,
        transparent 28%,
        transparent 100%);
}
@keyframes planet-laser-beam1 {
    from { --planet-beam1-angle: 0deg;    opacity: 1; }
    95%  {                                opacity: 1; }
    to   { --planet-beam1-angle: 180deg;  opacity: 0; }
}
@keyframes planet-laser-beam2 {
    from { --planet-beam2-angle: 0deg;    opacity: 1; }
    95%  {                                opacity: 1; }
    to   { --planet-beam2-angle: -180deg; opacity: 0; }
}
.planet:has(.planet-icon:hover) .planet-beam-ring::before {
    animation: planet-laser-beam1 0.3s linear 1 forwards;
}
.planet:has(.planet-icon:hover) .planet-beam-ring::after {
    animation: planet-laser-beam2 0.3s linear 1 forwards;
}
/*
 * Each .planet is a fixed 220x220px square. Icons are absolutely positioned
 * at top:50% left:50% (the center), then pushed to their orbit position via
 * an inline transform: rotate(Adeg) translate(82px) rotate(-Adeg).
 * The negative counter-rotation keeps the icon image upright.
 * The 48x48px button box is offset by -24px so its center sits on the orbit ring.
 * Geometry: orbit 82 + half-button 24 = 106px < container half 110px (4px clearance).
 */
.planetary-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 16px;
    align-content: start;
}
.planet {
    position: relative;
    width: 220px;
    height: 220px;
    isolation: isolate;
}
/* Hover ring — z-index:1 keeps it above orbit icons */
.planet::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    pointer-events: none;
    z-index: 1;
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.planet:has(.planet-icon:hover)::before {
    border-color: color-mix(in srgb, var(--st-accent, #0d6efd) 50%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--st-accent, #0d6efd) 20%, transparent);
}
/* Faint background circle — z-index:-1 sits behind all children */
.planet::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--st-accent, #0d6efd) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--st-accent, #0d6efd) 18%, transparent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: -1;
}
@keyframes planet-core-pulse {
    0%   { transform: scale(1);   opacity: 0; }
    15%  { opacity: 0.55; }
    100% { transform: scale(2.4); opacity: 0; }
}
.planet-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--st-accent, #0d6efd);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: calc(6pt + 0.15vw);
    font-weight: bold;
    padding: 4px;
    box-sizing: border-box;
    cursor: default;
    line-height: 1.2;
    transition: transform 250ms ease-out;
}
.planet-core:hover {
    transform: translate(-50%, -50%) scale(1.35);
}
/* Sonar pulse ring — expands from core edge and fades out */
.planet-core::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--st-accent, #0d6efd);
    opacity: 0;
    pointer-events: none;
}
.planet-core:hover::after {
    animation: planet-core-pulse 1.4s ease-out 1;
}
/* Short label (default) / full label (on hover) cross-fade */
.planet-core-short,
.planet-core-full {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    transition: opacity 200ms ease-out;
}
.planet-core-short { opacity: 1; }
.planet-core-full  { opacity: 0; font-size: calc(5pt + 0.1vw); }
.planet-core:hover .planet-core-short { opacity: 0; }
.planet-core:hover .planet-core-full  { opacity: 1; }
.planet-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    margin: -24px 0 0 -28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 150ms ease-out, box-shadow 150ms ease-out,
                translate 150ms ease-out, scale 150ms ease-out;
}
.planet-icon:hover {
    background: color-mix(in srgb, var(--st-accent, #0d6efd) 9%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--st-accent, #0d6efd) 20%, transparent);
    border-radius: 10px;
    translate: 0 -3px;
    scale: 1.07;
}
.planet-icon-img {
    width: 36px;
    height: 36px;
    display: block;
    pointer-events: none;
    flex-shrink: 0;
}
.planet-icon-label {
    font-size: 6pt;
    color: var(--st-text-body, inherit);
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    pointer-events: none;
}

/* ---- Layout toggle buttons: icon-only, 28x28 ---- */
/* AjaxSetButtonBackgroundImage always sets background-position to top center via inline style. */
/* !important overrides the inline position so the icon renders centered in the empty button. */
#divHomeLayoutButtons .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
}
#divHomeLayoutButtons .btn.active {
    background-color: var(--st-accent, #0d6efd);
    border-color: var(--st-accent, #0d6efd);
}



/* ------------------------------------------------------- */
/* Infragistics Dock Manager styles                        */
/* ------------------------------------------------------- */
/*@import '../Scripts/Infragistics/igniteui-dockmanager-package-1.7.0/package/dist/collection/styles/igc.themes.css';*/
/*https://infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/dock-manager*/

/*.standardtime-dockmanager-theme {
    --igc-background-color: rgba(41, 57, 85, 1.0);
    --igc-accent-color: #424242;
    --igc-text-color: #FFF;
    --igc-tab-text-active: #000;
    --igc-tab-header-text-color-active: #000;
    --igc-border-color: #212121;
    --igc-button-text: 'inherit';
    --igc-splitter-background: #000;
    --igc-flyout-shadow-color: rgba(0, 0, 0, .38);
    --igc-joystick-icon-color-active: #fff;
    --igc-joystick-border-color: #424242;
    --igc-tab-background-active: #FFF29D;
    --igc-pane-content-background: #F5F5F5;
    --igc-pane-content-text: #000;
    --igc-pane-header-text: #FFF;
    --igc-pane-header-text-active: #FFF;
    --igc-floating-pane-border-color: rgba(0, 0, 0, .26);
    --igc-context-menu-color-active: #fff;
    --igc-disabled-color: rgba(255, 255, 255, .5);
}
*/

.standardtime-dockmanager-theme {
    --igc-background-color:          var(--st-dock-header-bg);
    --igc-accent-color:              var(--st-dock-active-tab);
    --igc-text-color:                var(--st-dock-text);
    --igc-border-color:              var(--st-dock-border);
    --igc-button-text:               'inherit';
    --igc-splitter-background:       var(--st-dock-splitter);
    --igc-splitter-handle:           var(--st-dock-text);
    --igc-flyout-shadow-color:       rgba(0, 0, 0, .38);
    --igc-joystick-icon-color-active: var(--st-dock-text);
    --igc-joystick-border-color:     var(--st-dock-active-tab);
    --igc-tab-background-active:     var(--st-dock-active-tab);
    --igc-pane-content-background:   var(--st-dock-pane-bg);
    --igc-floating-pane-border-color: rgba(0, 0, 0, .26);
    --igc-context-menu-color-active: var(--st-dock-text);
    --igc-disabled-color:            rgba(255, 255, 255, .5);
}


.dark-theme {
    --igc-background-color: #111;
    --igc-accent-color: #424242;
    --igc-text-color: rgba(255, 255, 255, .7);
    --igc-border-color: #212121;
    --igc-button-text: 'inherit';
    --igc-splitter-background: #000;
    --igc-flyout-shadow-color: rgba(0, 0, 0, .38);
    --igc-joystick-icon-color-active: #fff;
    --igc-joystick-border-color: #424242;
    --igc-tab-background-active: #212121;
    --igc-pane-content-background: #212121;
    --igc-floating-pane-border-color: rgba(0, 0, 0, .26);
    --igc-context-menu-color-active: #fff;
    --igc-disabled-color: rgba(255, 255, 255, .5);
}

.light-theme {
    --igc-background-color: #E5E7E9;
    --igc-accent-color: #fff;
    --igc-text-color: rgba(0, 0, 0, .72);
    --igc-border-color: #F3F5F7;
    --igc-button-text: 'inherit';
    --igc-splitter-background: #D3D6D9;
    --igc-flyout-shadow-color: rgba(0, 0, 0, .08);
    --igc-joystick-icon-color-active: #000;
    --igc-joystick-border-color: #D3D6D9;
    --igc-tab-background-active: #F3F5F7;
    --igc-pane-content-background: #F3F5F7;
    --igc-floating-pane-border-color: #fff;
    --igc-context-menu-color-active: #000;
    --igc-disabled-color: rgba(0, 0, 0, .38);
}

/*
CSS Parts
Part name	            Description
content-pane	        The content pane component.
pane-header	            The content pane header component.
pane-header-content	    The content area of the content pane header.
pane-header-actions	    The actions area of the content pane header.
active	                Indicates an active state. Applies to pane-header, pane-header-content, pane-header-actions, tab-header.
floating	            Indicates a floating pane placement. Applies to pane-header, pane-header-content, pane-header-actions.
window	                Indicates a floating window placement. Applies to pane-header, pane-header-content, pane-header-actions.
split-pane	            The split pane component.
splitter	            The resizing splitter component.
splitter-base	        The base element of the splitter component.
splitter-ghost	        The ghost element of the splitter component.
unpinned-pane-header	The unpinned pane header component.
tab-header	            The tab header component.
selected	            Indicates a selected state. Applies to tab-header.
tab-strip-area	        The tab strip area containing the tab headers.
tab-strip-actions	    The tab strip area containing the tab actions.
top	                    Indicates a top tabs position. Applies to tab-header, tab-strip-area, tab-strip-actions.
bottom	                Indicates a bottom tabs position. Applies to tab-header, tab-strip-area, tab-strip-actions.
context-menu	        The context menu component.
context-menu-item	    An item in the context menu component.
docking-preview	        The docking preview area.
docking-indicator	    The non-root docking indicator.
root-docking-indicator	The root docking indicator.
pane-navigator	        The pane navigator component.
pane-navigator-header	The header area of the pane navigator.
pane-navigator-body	    The body area of the pane navigator.
pane-navigator-items-group	        An items group in the pane navigator component.
pane-navigator-items-group-title	The title element of an items group in the pane navigator.
pane-navigator-item	                An item in the pane navigator.
*/




/*Recommended css for dockmanager slot divs*/ 
/*See Index.chhtml*/
/*Example: <div slot="content3" class="dockManagerContent" style="height:100%; overflow:hidden;" > <div id="divRecordsetGridPartialView1" style="height: 100%; overflow: hidden; background-color: whitesmoke; font-size: 10pt; " > Loading...</div > </div >*/
.dockManagerContent {
    padding: 0.0rem;
    background-color: var(--st-bg-body);
    color: var(--st-text-body);
    height: 100%;
    overflow: hidden;
}




/*Partial views from Ajax are hosting in divs*/
/*See Index.chhtml*/
/*Example: <div slot="content3" class="dockManagerContent" style="height:100%; overflow:hidden;" > <div id="divRecordsetGridPartialView1" style="height: 100%; overflow: hidden; background-color: whitesmoke; font-size: 10pt; " > Loading...</div > </div >*/
.dockManagerPartialView {
    height: 100%;
    overflow: hidden;
    background-color: var(--st-bg-body);
    color: var(--st-text-body);
    font-size: calc(8pt + 0.25vw);
}

igc-dockmanager::part(splitter) {
    flex: 0 0 8px;
}

/*igc-dockmanager::part(pane-header) {
    background-color: var(--white);
    border-bottom: 2px solid var(--main-color);
}*/

igc-dockmanager::part(pane-header active) {
    color: var(--red);
    border-bottom: 2px solid var(--secondary-color);
}

igc-dockmanager::part(pane-header-content) {
    color: var(--st-dock-text);
}






/*Examples below*/
/*https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/dock-manager*/

/*:root {
    --main-color: rgb(227,230,233);
    --secondary-color: rgb(113,115,116);
    --white: #ffffff;
    --font-color: rgb(113,115,116);
    display: flex;
    flex-direction: column;
    height: 100%;
}

igc-dockmanager {
    background-color: var(--main-color);
    padding: 20px;
}

    igc-dockmanager::part(pane-header) {
        background-color: var(--white);
        border-bottom: 2px solid var(--main-color);
    }

    igc-dockmanager::part(pane-header active) {
        font-weight: 700;
        color: var(--secondary-color);
        box-shadow: none;
        border-bottom: 2px solid var(--secondary-color);
    }

    igc-dockmanager::part(pane-header-content) {
        color: rgba(104, 97, 97, 0.938);
    }

    igc-dockmanager::part(splitter) {
        flex: 0 0 15px;
    }

    igc-dockmanager::part(splitter-base) {
        background: transparent;
    }

        igc-dockmanager::part(splitter-base)::after {
            content: none;
        }

    igc-dockmanager::part(content-pane) {
        border-radius: 10px;
    }

    igc-dockmanager::part(tab-header bottom) {
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: var(--main-color);
    }

    igc-dockmanager::part(tab-header active selected bottom) {
        font-weight: 700;
        color: var(--secondary-color);
        box-shadow: inset 0 2px 0 0 var(--secondary-color);
    }

    igc-dockmanager::part(tab-strip-area bottom) {
        border-radius: 0 0 10px 10px;
        border-bottom: 2px solid var(--main-color);
        background-color: var(--white);
    }

    igc-dockmanager::part(tab-strip-actions bottom) {
        display: none;
    }

    igc-dockmanager::part(tabs-content) {
        border-radius: 10px 10px 0 0;
        background-color: var(--white);
    }

    igc-dockmanager::part(root-docking-indicator),
    igc-dockmanager::part(docking-indicator) {
        background-color: rgba(49, 45, 49, 0.733);
        color: var(--white);
        border: none;
        border-radius: 5px;
        margin: 2px
    }

    igc-dockmanager::part(docking-preview) {
        background-color: var(--main-color);
        opacity: 0.7;
    }

    igc-dockmanager::part(unpinned-pane-header) {
        border-radius: 5px;
        margin-bottom: 5px;
        box-shadow: inset 0 2px 0 0 var(--secondary-color);
        background-color: var(--white);
    }

    igc-dockmanager::part(floating-window) {
        border-radius: 10px;
    }

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.floatingHeader {
    display: flex;
    justify-content: space-between;
}

.dockManagerFull {
    padding: 0rem;
    margin: 0rem;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dockManagerFrame {
    padding: 0rem;
    margin: 0rem;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.closeButton {
    width: inherit;
    border: none;
    background: transparent;
    color: var(--font-color);
    font-size: 14px;
}

.stock-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stock-item-movement-up {
    display: flex;
    color: rgb(0,153,255);
}

.stock-item-movement-down {
    display: flex;
    color: rgb(233, 80, 164);
}

igc-avatar::part(image) {
    background-color: white;
}

igc-card {
    height: inherit;
}

igc-card-content {
    padding-top: 5px;
    padding-bottom: 0px;
}*/

/* ACCOUNTS */

/*.account-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}*/

/* TOP MOVERS */

/*.top-movers-content {
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    justify-content: space-evenly;
}

.top-move-stock-item {
    margin: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}*/

/* PHYSICAL CARDS */

/*.add-card-btn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}*/



/* ------------------------------------------------------- */
/* Standard Time Gantt chart styles                        */
/* ------------------------------------------------------- */

/* IG grid sets padding:4px and vertical-align:middle on all <td> cells.
   For gantt cells that combination offsets bars ~8px down (4px padding +
   4px centering when row height > ganttcelldiv height). Override both. */
td:has(.ganttcelldiv) {
    padding: 2px 0 0 0 !important;
    vertical-align: top !important;
}

.ganttitem {
    /*Used to find all gantt items on the entire page used*/
    /*Put actual styles in other classes*/
}

/* ------------------------------------------------------- */
/* Plain Gantt bar                                         */
/* ------------------------------------------------------- */
.ganttbar {
    background-color: var(--st-gantt-bar-bg);
    height: 10px;
    border-radius: 3px;
    cursor: ew-resize;
    transform: translateY(50%);
    -webkit-print-color-adjust: exact;
    color: var(--st-text-body);
    font-size: 8pt;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    white-space: nowrap;
}

/* Enlarge button image slightly during hover*/
.ganttbar:hover {
    border-width:1px;
    border-style:dotted;
    border-color: var(--st-text-body);
    /*background-color: #ebebff !important;*/
    /*transform: translateY(50%) scale(1.1);*/
}


/* ------------------------------------------------------- */
/* Critical path bar classes                               */
/* ------------------------------------------------------- */
.ganttbar-critical {
    background: linear-gradient(to right,
        var(--st-gantt-critical-bar-start),
        var(--st-gantt-critical-bar-end)) !important;
    color: #ffffff;
}

.ganttbar-noncritical {
    background: linear-gradient(to right,
        var(--st-gantt-noncritical-bar-start),
        var(--st-gantt-noncritical-bar-end)) !important;
    color: #ffffff;
}

.ganttsummarybar.ganttbar-noncritical {
    background: var(--st-gantt-summary-bg) !important;
}


/* ------------------------------------------------------- */
/* Float (slack) indicator bar                             */
/* ------------------------------------------------------- */
.ganttfloatbar {
    background-color: var(--st-gantt-float-bar-bg);
    border: 1.5px dashed var(--st-gantt-float-bar-stroke);
    height: 10px;
    border-radius: 2px;
    position: relative;
    transform: translateY(50%);
    -webkit-print-color-adjust: exact;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ganttfloatbar-label {
    color: var(--st-gantt-float-bar-text);
    font-size: 9px;
    font-weight: 400;
    white-space: nowrap;
    pointer-events: none;
}


/* ------------------------------------------------------- */
/* Baseline comparison ghost bar                           */
/* ------------------------------------------------------- */
.ganttbar-baseline {
    height: 4px;
    background-color: var(--st-gantt-baseline-bar);
    border: 1px solid var(--st-gantt-baseline-bar);
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.7;
    -webkit-print-color-adjust: exact;
}

/* Baseline milestone ghost diamond — outline only, no fill */
.ganttbarmilestone-baseline {
    height: 12px;
    width: 12px;
    border-radius: 2px;
    transform: translateY(50%) rotate(45deg);
    border: 2px solid var(--st-gantt-baseline-bar);
    background-color: transparent;
    pointer-events: none;
    opacity: 0.7;
}


/* ------------------------------------------------------- */
/* Weekend shading — scale header cells (Days scale only)  */
/* ------------------------------------------------------- */
/* Cell rows use a CSS repeating-linear-gradient set in JS (no extra DOM nodes).
   Scale header cells use a CSS class because they are individual divs. */
.ganttscalecell-weekend {
    background-color: var(--st-gantt-weekend-scale-bg);
}


/* ------------------------------------------------------- */
/* Today marker line                                       */
/* ------------------------------------------------------- */
.gantttoday {
    border-right: 2px solid var(--st-gantt-today-color);
    height: 100%;
    width: 0;
    pointer-events: none;
    -webkit-print-color-adjust: exact;
}

.ganttscalecell-today {
    background-color: var(--st-gantt-today-color);
    color: #ffffff;
    font-weight: bold;
}

.gantttoday-label {
    position: absolute;
    top: 1px;
    left: 3px;
    display: inline-flex;
    align-items: center;
    height: 11px;
    font-size: 7px;
    font-weight: bold;
    color: #ffffff;
    background-color: var(--st-gantt-today-color);
    padding: 0 3px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
    -webkit-print-color-adjust: exact;
}


/* ------------------------------------------------------- */
/* Summary Gantt bar                                       */
/* ------------------------------------------------------- */
.ganttsummarybar {
    background-color: var(--st-gantt-summary-bg);
    height: 12px;
    cursor: ew-resize;
    transform: translateY(50%);
    -webkit-print-color-adjust: exact;
    color: var(--st-text-body);
    font-size: 8pt;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    white-space: nowrap;
}

.ganttsummarybar-sub {
    height: 10px;
}

/* Enlarge button image slightly during hover*/
.ganttsummarybar:hover {
    border-width:1px;
    border-style:dotted;
    border-color: var(--st-text-body);
    /*background-color: #FFD580 !important;*/
    /*transform: translateY(50%) scale(1.1);*/
}

.ganttpercentbar {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 3px;
    background-color: var(--st-gantt-percent-bg);
    border-radius: 3px;
    pointer-events: none;
    -webkit-print-color-adjust: exact;
}

.gantt-bar-resize-handle {
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
    z-index: 1;
}



/* ------------------------------------------------------- */
/* Milestone Gantt diamond                                 */
/* ------------------------------------------------------- */
.ganttmilestonediamond {
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-bottom-color: var(--st-gantt-milestone-color);
    position: relative;
    top: -7px;
    transform: translateY(10%);
    -webkit-print-color-adjust: exact;
}
.ganttmilestonediamond:after {
    content: '';
    position: absolute;
    left: -7px;
    top: 7px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top-color: var(--st-gantt-milestone-color);
}

.ganttbarmilestone {
    border-width: 1px;
    border-style: solid;
    border-color: var(--st-gantt-milestone-color);
    background-color: var(--st-gantt-milestone-bg);
    height: 12px;
    width: 12px;
    border-radius: 2px;
    cursor: ew-resize;
    transform: translateY(50%) rotate(45deg);
    -webkit-print-color-adjust: exact;
    color: var(--st-text-body);
    font-size: 8pt;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    white-space: nowrap;
}

.ganttbarmilestone:hover {
    border-width: 2px;
    border-style: dotted;
    border-color: var(--st-text-body);
    /*background-color: #FFD580 !important;*/
    /*transform: translateY(50%) scale(1.1);*/
}


/* ------------------------------------------------------- */
/* Gantt Scale                                             */
/* ------------------------------------------------------- */
.ganttscale {
}

.ganttscalecell {
    /*color: black;*/
    /*background-color: white;*/
    font-size: calc(4pt + 0.25vw);
    border-right: solid;
    border-width: 1px;
    border-collapse: collapse;
    border-color: var(--st-gantt-scale-border);
    text-align: center;
    overflow: hidden;
}

.ganttgridline {
    border-right: solid;
    border-width: 1px;
    border-collapse: collapse;
    border-color: var(--st-gantt-gridline);
    -webkit-print-color-adjust: exact;
}

.ganttscaleheadercell {
    font-size: calc(4pt + 0.25vw);
    border-right: solid;
    border-width: 1px;
    border-collapse: collapse;
    border-color: var(--st-gantt-scale-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
}

.ganttscalerowcell {
    font-size: calc(4pt + 0.25vw);
    border-right: solid;
    border-width: 1px;
    border-collapse: collapse;
    border-color: var(--st-gantt-gridline);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
}

.ganttsummarytriangle {
    position: fixed;
    width: 0;
    height: 0;
    padding: 0px;
    margin: 0px;
    top: 0px;
    border: 7px solid transparent;
    border-top: 15px solid var(--st-gantt-summary-triangle);
    border-bottom: 0;
    transform: translateY(20%);
    -webkit-print-color-adjust: exact;
}

/* ------------------------------------------------------- */
/* Summary bar child milestone diamond                     */
/* ------------------------------------------------------- */
.gantt-summary-milestone {
    background-color: #ffffff;
    border: 1.5px solid #000000;
    height: 8px;
    width: 8px;
    border-radius: 1px;
    transform: rotate(45deg);
    cursor: default;
    -webkit-print-color-adjust: exact;
}




/* ------------------------------------------------------- */
/* Plain Gantt bar while dragging                          */
/* ------------------------------------------------------- */
.ganttbardragging {
    background-color: var(--st-gantt-drag-bg);
    color: var(--st-accent-text);
    font-size: 8pt;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    white-space: nowrap;
    height: 10px;
    border-radius: 3px;
    cursor: ew-resize;
    -webkit-print-color-adjust: exact;
}

.ganttlinkline {
    stroke: var(--st-gantt-link-color);
    stroke-width: 4px;
    opacity: 50%;
    fill: none;
    animation: dash 1s linear forwards;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.ganttlinkline-critical {
    stroke: var(--st-gantt-critical-arrow);
    opacity: 0.75;
}

.ganttlinkline-noncritical {
    stroke: var(--st-gantt-noncritical-arrow);
    opacity: 0.5;
}

/* Applied to predecessor and successor bar divs while their connecting arrow is hovered. */
/* outline (not box-shadow) so the ring is not clipped by ganttcelldiv's overflow:hidden. */
.ganttbar-link-highlight {
    outline: 2px solid var(--st-accent);
    outline-offset: 1px;
    position: relative;
    z-index: 5;
}

/* Applied to the visible SVG path while its hit area is hovered. */
.ganttlinkline-highlight {
    opacity: 1 !important;
    stroke-width: 6px !important;
}

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}


/* ------------------------------------------------------- */
/* Gantt scale hover navigation buttons                    */
/* ------------------------------------------------------- */
.gantt-nav-left,
.gantt-nav-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 1px;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.gantt-nav-left  { left: 2px; }
/* left:100% places the group's left edge at the <th> right boundary;
   translateX(-100%-2px) pulls it back by its own width + margin — no JS needed. */
.gantt-nav-right { left: 100%; transform: translate(calc(-100% - 2px), -50%); }

th:has(.ganttscale):hover .gantt-nav-left,
th:has(.ganttscale):hover .gantt-nav-right,
.gantt-nav-left:hover,
.gantt-nav-right:hover {
    opacity: 1;
    pointer-events: auto;
}

.gantt-nav-btn {
    background: rgba(255, 255, 255, 0.85);
    color: #333333;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gantt-nav-btn-wide {
    width: 34px;
}

.gantt-nav-circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: currentColor;
    border-radius: 50%;
    flex-shrink: 0;
}

.gantt-nav-glyph {
    display: inline-block;
    transform: scale(0.55);
    line-height: 1;
}

.gantt-nav-glyph-lg {
    font-size: 18px;
    transform: none;
}

.gantt-nav-btn:hover {
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    border-color: rgba(0, 0, 0, 0.4);
}

.gantt-zoom-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    background: rgba(255, 255, 255, 0.70);
    color: #666666;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    padding: 1px 5px;
    pointer-events: none;
    white-space: nowrap;
    -webkit-print-color-adjust: exact;
}




.MiniHtmlTreeView {
    list-style-type: none;
    margin: 0;
    padding: 0;
}


.MiniHtmlTreeViewCaret {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
}

.MiniHtmlTreeViewCaret::before {
    content: "\25B6";
    color: gray;
    display: inline-block;
    margin-right: 6px;
}

.MiniHtmlTreeViewCaretDown::before {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);
}

.MiniHtmlTreeViewNested {
    display: none;
    list-style-type: none;
}

.MiniHtmlTreeViewActive {
    display: block;
    list-style-type: none;
}

.MiniHtmlTreeViewChild {
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
}

.MiniHtmlTreeViewNoCaret {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
}

.MiniHtmlTreeViewNoCaret::before {
    content: " ";
    color: gray;
    display: inline-block;
    margin-right: 6px;
}