body{
font-size: 14px;
background: #eee;
}
.navbar-brand {
    float: left;
    height: 50px;
    padding: 0px; */
    font-size: 18px;
    line-height: 20px;
}
.navbar-brand>img {
    display: block;
    margin-top: -10px;
}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
    color: rgba(0, 0, 0, .9);
	font-weight: bold;
}
.nav-link {color:#6a6f76;}
.h4, h4 {
        font-size: 1.25rem;
        font-weight: bold;
        font-family: 'Trebuchet MS', sans-serif;
}
.modal-title {
    margin: 0;
    line-height: 1.42857143;
    float: left;
    width: 90%;
}
#btn-back-to-top {
position: fixed;
bottom: 60px;
right: 5px;
display: none;
}
.btn-primary {
    color: #fff;
    background-color: #a098bc;
    border-color: #a098bc;
	border-radius: 100px;
}
.btn-primary:hover {
	background-color:#4a3b7c;
	border-color: #4a3b7c;
}
.grid-striped .row:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}

tr.dtrg-end.dtrg-group.dtrg-level-0 {
    font-style: italic;
    
}
text-purple {
  color: #c857db; 
}
a.text-purple {
    color: #a098bc;
}
.filterTable_filter{
	padding-right:10px;
}
#soldTable_info, #heldTable_info {
    margin: 10px;
}
.container-fluid {
   width: 90%;
   border-radius: 0px;
}
.bg-white {
    background-color: white;
    border-bottom: 1px solid #eee;
    box-shadow: 0px 0px 5px gray;
}
.bg-fiffti {
    background-color: #cbc6dc;
    box-shadow: 0px 0px 5px gray;
}

.navbar {
	border-radius: 0px;
}
a.nav-link.active {
    font-weight: bold;
}
.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, .55);
    border-radius: 20px;
}
.navbar-nav .nav-link:hover {
 border-radius: 20px;	
 transition: background-color 0.3s ease;	
}
.rounded-hover {
  border-radius: 20px;
  transition: background-color 0.3s ease;
}
.circle-hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;   /* adjust size */
  height: 30px;
  border-radius: 50% !important;
  transition: background-color 0.3s ease;
}
.circle-hover i {
  color: #a098bc;
  font-size: 16px; /* adjust as needed */
  transition: color 0.3s ease;
}

.circle-hover:hover, a.nav-link:hover {
  background-color: rgba(160, 152, 188, 0.2); /* soft circle highlight */
  text-decoration: none;	
}

.circle-hover:hover i {
  color: #8a7bb8; /* optional color change */
}
td.updated {
  background-color: #a098bc !important; 
  transition: background-color 0.5s ease;
}
#last5alert .row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#last5alert .row:hover {
  background-color: #9f94c6; 
}
#last5alert .row.selected-row {
  background-color: #9f94c6; /* active highlight */
  border-radius: 6px;
}
@media (max-width: 768px) {

}

table.compact thead th, .clndr{
    border-bottom: 1px solid #e2e2e2;
    font-size: 10px;
    line-height: 12px;
    font-family: franklin-normal-500, sans-serif;
    font-weight: 500;
    color: #666;

    vertical-align: bottom;
}

table.compact th, table.compact td {
    font-size: 13px;
    font-family: franklin-normal-500, sans-serif;
    font-weight: 500;
    padding: 6px 50px 0 0;
    line-height: 18px;
}
table.compact  th, table td {
    vertical-align: top;
}
table.compact th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}
table.compact  {
    border-collapse: separate;
    text-indent: initial;
    border-spacing: 0px;
}
 table.compact tr {
            height: 20px;
        }
.fs-mod-subhead h5[data-v-d6e542b3] {
    padding-bottom: 5px;
}
.compact-subhead{
    text-transform: uppercase;
    font-family: franklin-normal-700, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .03em;
    margin: 0;
    color: #111;
}
.closeflag, .msgbox, #hide{
  display: none;
}

.closebutton {
    float: right;
    cursor: pointer;
    border-radius: 50%;
    background: #000;
    margin-bottom: .5em;
    height: 25px;
    width: 25px;
    font-size: x-small;
    color: #fff;
    position: relative;
    bottom: 1.0em;
	box-shadow: 0px 0px 5px gray;
}

.closeflag:checked+.msgbox {
  display: none;
}
a.held, a.held:hover, a.showalertandheld, a.showalertandheld:hover {
    text-decoration: none;
	font-weight: bold;
}

a.basicsymbol, a.basicsymbol:hover {
    text-decoration: none;
}
tr.text-danger a,tr.text-success a {
  color: inherit !important;
}

/* For demonstration purposes: */
.msgbox {
    margin: 10px;
    padding: 10px;
    background: floralwhite;
	border-radius: 10px;
}
tr.histhidngrey {
    font-size: small;
    color: darkgrey;
}
tr.histhidn {
    font-size: small;
}
tr.histhidn th {
  padding: 0 10px; /* horizontal spacing between columns in header row */
}

tr.histhidngrey td {
  padding: 0 10px; /* same for data row */
}
.date-filter {
  background: url("data:image/svg+xml;utf8,<svg fill='gray' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 8px center;
  background-size: 20px;
  padding-right: 20px;
  cursor: pointer;
  width: 100% !important;   /* take full header width */
  min-width: 90px;         /* set a safe minimum */	
background-color: #fff !important;
    border: 0px solid;
    font-weight: bold;
    padding-top: .25rem;
    padding-bottom: .5rem;	
	padding-left: 0px;
}


/*health bar*/
.stock {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: sans-serif;
  margin: 6px 0;
}

/* Equal-width background zones */
.health-bar {
  display: inline-block;
  vertical-align: middle;	
  position: relative;
  width: 40px;
  height: 6px;
  border-radius: 3px;
background: linear-gradient(to right, #ff0000de 0%, #ff000087 31%, #cccccc82 36%, /* smooth blend between red → grey */ #cccccc82 64%, #4189419c 69%, /* smooth blend between grey → green */ #008000f2 100%);
}

	/* Upside-down triangle marker */
	/* The vertical line (needle) */
	.health-bar::before {
	  content: "";
	  position: absolute;
	  top: -1px; /* starts just below triangle tip */
	  left: calc((var(--pos) + 3) / 6 * 100%);
	  transform: translateX(-50%);
	  width: 1.0px;            /* line thickness */
	  height: 7px;            /* extends through and slightly below bar */
	  background-color: #333;  /* needle color */
	  border-radius: 1px;
	}

	/* The triangle marker */
	.health-bar::after {
	  content: "";
	  position: absolute;
	  top: -5px; /* sits just above the bar */
	  left: calc((var(--pos) + 3) / 6 * 100%);
	  transform: translateX(-50%);
	  width: 0;
	  height: 0;
	  border-left: 4px solid transparent;
	  border-right: 4px solid transparent;
	  border-top: 5px solid #333; /* upside-down triangle */
	}

/* Hook up position (or use inline style dynamically) */
.health-bar[data-health="-3"] { --pos: -3; }
.health-bar[data-health="-2.5"] { --pos: -2.5; }
.health-bar[data-health="-2"] { --pos: -2; }
.health-bar[data-health="-1.5"] { --pos: -1.5; }
.health-bar[data-health="-1"] { --pos: -1; }
.health-bar[data-health="-0.5"] { --pos: -0.5; }
.health-bar[data-health="0"] { --pos: 0; }
.health-bar[data-health="0.5"] { --pos: 0.5; }
.health-bar[data-health="1"] { --pos: 1; }
.health-bar[data-health="1.5"] { --pos: 1.5; }
.health-bar[data-health="2"] { --pos: 2; }
.health-bar[data-health="2.5"] { --pos: 2.5; }
.health-bar[data-health="3"] { --pos: 3; }

.button-16 {
    background-color: #ccc;
    border: 0px solid rgb(209, 213, 219);
    border-radius: 1.0rem;
    box-sizing: border-box;
    color: #111827;
    font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* margin: .75rem 0; */
    line-height: 1.25rem;
    /* padding: .75rem 1rem; */
    text-align: center;
    text-decoration: none #D1D5DB solid;
    box-shadow: 1px 2px 3px 0 rgb(114 114 114);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    font-weight: normal;
}
.button-26 {
    background-color: #FFFFFF;
    border: 1px solid rgb(209, 213, 219);
    border-radius: .5rem;
    box-sizing: border-box;
    color: #111827;
    font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* margin: .75rem 0; */
    line-height: 1.25rem;
    /* padding: .75rem 1rem; */
    text-align: center;
    text-decoration: none #D1D5DB solid;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    font-weight: normal;
}

.button-46  {
  background-color: #FFFFFF;
  border: 1px solid rgb(209,213,219);
  border-radius: .25rem;
  box-sizing: border-box;
  color: #111827;
  font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  margin: .75rem 0;
  line-height: 1.25rem;
  padding: .25rem .25rem;
  text-align: center;
  text-decoration: none #D1D5DB solid;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
font-weight: normal;	
}

.button-46:hover, .button-26:hover,.button-16:hover,.button-46:active, .button-26:active, .button-16:active {
  background-color:#a098bc ;
}
.button-46.active,
.button-26.active,
.button-16.active {
    background-color: #a098bc; 
    color: #fff;               
    border-color: #a098bc;     
	  outline: none;
  box-shadow: none;
}
.button-46 :focus, .button-26:focus, .button-16:focus {
  outline: none;
  box-shadow: none; 
}

.button-46 :focus-visible, .button-26:visible, .button-16:visible {
  box-shadow: none;
}
#heldTable .form-select-sm {
    padding-top: .25rem;
    padding-bottom: .5rem;
    font-size: .875rem;
    font-weight: bold;
    border: 0px solid;
}
a.showalert::after {
    
	content: attr(data-after-content);
    font-size: 75%;
    top: -0.5em;
    vertical-align: baseline;
    position: relative;
    line-height: 0;
    color: coral;
    font-weight: normal;
}


a.ema200x::after {
    content: "Ema200";
    font-size: 75%;
    top: -0.5em;
    vertical-align: baseline;
    position: relative;
    line-height: 0;
    color: green;
    font-weight: normal;
}

a.sold {
    position: relative;
}
a.sold::after {
    content: "s";
    font-size: 75%;
    top: -0.75em;
    vertical-align: baseline;
    position: relative;
    line-height: 0;
    color: darkgrey;
    font-weight: normal;
}
.jumbotron .container{
	background: none;
}
@media (min-width: 320px) {
    .jumbotron {
        padding: 2rem 2rem;
		background-image: linear-gradient(45deg, #4b8d3ed4, #103d4c 30%);
        color: #fff;
		border-radius: 0px;
    }
}
.jumbotron-fluid {
    line-height: 280%;
}
.jumbotron .h1, .jumbotron h1 {
    color: inherit;
    font-family: math;
    text-transform: capitalize;
}
.jumbotron h2 {
    font-size: 18px;
    line-height: 28px;
    padding-top: 10px;
    padding-bottom: 20px;
    text-transform: uppercase;
    font-family: monospace;
    font-weight: bold;
}
.lead:before {
    content: "■";
    padding-right: 10px;
    top: -2px;
    position: relative;
    color: #a098bc;
}
.blurred{
 filter: blur(4px);	
}
#acktext {
    line-height: 30px;
}
.bigsilo{
	display: flex;
	}
.silo{
	width: 33%;
	padding: 20px;
	}
.silogrey {
    background: #eee;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 10px;
}
.silosimple {
    padding: 15px;
}
td.secgrp, td.prmgrp {
	background-color: #eee;
}
td.prmgrp {
	background-color: #ccc;
}
td.amsmall, th.amsmall{
border-bottom:1px solid #bbbbbb;padding-left: 5px;padding-top:15px;padding-bottom:13px; font-family: Roboto, sans-serif; font-size: 14px; line-height:20px;"
}
td.amsmall, th.amsmall{
border-bottom:1px solid #bbbbbb;padding-left: 5px;padding-top:5px;padding-bottom:3px; font-family: Roboto, sans-serif; font-size: 14px; line-height:20px;"
}
.dropdown-menu {
	z-index: 1200 !important;
}
.sup1 {
    color: red;
}
.count {
    color: #ccc;
}
.sticky-top{
	margin-bottom: 20px;
}	
a {
    text-decoration: none !important;
}
a:hover {
    text-decoration: underline;
}
a.simple, a.simple:hover {
    text-decoration: none;
	color: #bbb;
    text-shadow: -1px -1px 0 #111;
}
a.horn:hover {
    text-decoration: none;
}
.container {
    overflow: hidden;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    margin-bottom: 30px;
}
.totalsec {
    border-radius: 10px;
    background: #eee;
    margin-top: 20px;
}
.btn-custom {
    border: 0px solid rgba(0, 0, 0, 0.3);
	color: #ccc;
	--background: linear-gradient(to bottom, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
}
.btn-custom:hover{
    color: #000;
	--background: linear-gradient(to bottom, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
}
.text-muted a {
    color: #6c757d;
}
#last5alert {
    float: right;
    border: 1px solid #ccc;
    left: -500px;
    top: -40px;
    border-radius: 5px;
    padding: 10px;
    background: #efefef;
    position: relative;
	display:none
}
.capsule1 {
    border-radius: 20px;
    background: #ccc;
    padding-left: 10px;
    padding-right: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    width: 50%;
    position: relative;
    left: -6px;
}

.dtfilter {
    position: relative; /* Keeps it within normal document flow */
    display: flex; /* Keeps elements aligned */
	width: 100%;
    gap: 10px; /* Adds spacing between elements */
    z-index: 0; /* Ensures it remains above other elements */
	font-weight:bold;
	padding: 4px;
    text-shadow: 0.5px 0.5px #221a1a;
    color: #ccc;
	text-transform: uppercase;
	justify-content: center;
}

.dtfilter input {
    /*padding: 3px;*/
    width: 180px;
    max-width: 100%;
    background: #e9e7ef;
    border: 0px solid #e9e7ef;
    border-radius: 3px;
	outline:none;
}
.dtfilter input::placeholder {
    text-transform: none;
}
.dtfilterlbl {
    position: relative;
}
.floatinghdr {
    position: relative;
    top: 42px;
    background: #a098bc;
    padding: 5px;
    border-radius: 8px;
	margin-left: 5px;
    margin-right: 5px;

}
.floatinghdrhist {

    background: #607d8b;
    padding: 5px;
    border-radius: 8px;
	margin-left: 5px;
    margin-right: 5px;

}
.dt-search {
 	padding-right:10px;
}
.dt-layout-row {
    padding-left: 10px;
}
.dt-search input,
.dt-search input:focus {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray"><circle cx="7" cy="7" r="5" stroke="gray" stroke-width="1.5" fill="none"/><line x1="10" y1="10" x2="14" y2="14" stroke="gray" stroke-width="1.5"/></svg>')
  no-repeat left 6px center;
	background-size: 16px 16px;
	padding-left: 30px !important;
	text-transform: uppercase;
	width: 140px;
	outline: none !important;
}
.soldrow {
    font-style: italic;
    color: #aaa;
}
.dt-layout-row {
    padding-left: 0px;
}
div.dt-container .dt-input {
    margin-left: 10px !important;
	border-radius:10px;
}
#histtable {
    min-height: 400px;
}
#heldTable_wrapper, #soldTable_wrapper {
    border: 1px Solid #eee;
    border-radius: 10px;
}
#status-message {
    transition: opacity 1s ease-out;
}
       table.scrolldown {
            width: 100%;
        }

        /* To display the block as level element */
        table.scrolldown tbody,
        table.scrolldown thead {
            display: block;
        }

        thead tr th {
            height: 40px;
            line-height: 40px;
        }

        table.scrolldown tbody {

            /* Set the height of table body */
            height: 300px;

            /* Set vertical scroll */
            overflow-y: auto;

            /* Hide the horizontal scroll */
            overflow-x: hidden;
        }
        table.scrolldown tbody td,
        table.scrolldown thead th {
            width: 200px;
        }
tr.today {
    color: #2196f3;
}
.plotly-graph-div {
    width: 100% !important;
    max-width: 1000px !important;
    height: 400px !important;
    margin: 0 auto;
}

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

.outlink-tooltip {
    display: none;
    position: absolute;
    top: 22px;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    white-space: nowrap;
    z-index: 9999;
}

.outlink-wrapper:hover .outlink-tooltip {
    display: block;
}

.outlink-tooltip span {
    margin: 0 6px;
    cursor: pointer;
    font-weight: normal;
    color: #0077cc;
}

.outlink-tooltip span:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .plotly-graph-div {

	 overflow-x: scroll;
    }

}
.fg--search {
  background: white;
  position: relative;
  
}

.fg--search input {
  display: block;
}

.fg--search button {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  position: absolute;	
  top: 0;
  right: 0;
  padding: 0px 5px;	
  z-index: 2;color: #ccc;
}
.fg--search input:focus + button .fa-search {
  color: #a098bc;
}
.signal-invalid {
    opacity: 0.4;
	background-color:#e2dcd3; 
}


#formsnp {
    background-color: #FFF;
    height: 600px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0px;
    text-align:center;
}
#formsnp label {
    color: #333;
    height: 20px;
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: right;
    margin-right:15px;
}
#formsnp input, #formsnp select {
    width: 200px;
    margin-top: 10px;
}
.snapshot{
	float: left;
}
button#actvalsubmit {
    width: 200px;
}
.cash-summary {
    margin: 0 auto 15px auto;
    background: #d6cdf5;
    padding: 10px;
    border-radius: 8px;
}
.cash-summary h4 {
    margin-bottom: 10px;
    text-align: center;
}