﻿
        html, body {
          margin: 0;
          padding: 0;
        }
        td {
            padding: 1px;
        }
        .changeTop {
            font-size: 20px;
            font-weight: 700;
        }
        .changeBottom {
            font-size: 16px;
            font-weight: normal;
        }
        .lastTime {
            font-size: 12px;
            font-weight: normal;
        }
        .companyName {
            font-size: 10px;
            font-weight: 600;
        }
       
        .rangeGood {
            font-size: 16px;
            font-weight: 600;
            color:green;
        }
        .rangeBad {
            font-size: 16px;
            font-weight: 600;
            color:red;
        }
        .newHigh {
            background-color:green;
        }
        .newLow {
            background-color:red;
        }
        .normal {
            background-color:white;
        }
        .high {
            color:green;
            font-size:16px;
        }
        .low {
            color:red;
            font-size:16px;
        }
        
        .highlightRed
        {
            color:red;
            font-size:16px;
            font-weight:700;
        }
        .highlightGreen
        {
            color:green;
            font-size:16px;
            font-weight:700;
        }

		/*** Price Cell ***/
		.lastPrice
		{
			font-size: 20px;	
		}
		.lastPriceSmaller
		{
			font-size: 16px;	
		}
        .priceHigh 
        {
			padding-top:1px;
			padding-bottom:1px;
            font-size: 13px;
            font-weight: 600;
          
        }
        .priceLow 
        {
			padding-top:1px;
			padding-bottom:1px;
            font-size: 13px;
            font-weight: 600;
           
        }
        .bidSize 
        {
            color:green;
            font-size:10px;
        }
        .bidPrice 
        {
            color:navy;
            font-size:13px;
            padding-top:1px;
            padding-bottom:1px;
            
        }
		.askSize 
        {
            color:green;
            font-size:10px;
        }
        .askPrice 
        {
            color:navy;
            font-size:13px;
            padding-top:1px;
            padding-bottom:1px;
           
        }





        .bidSizeBig 
        {
            color:green;
            font-size:14px;
        }
        .bidPriceBig
        {
            color:navy;
            font-size:18px;
            padding-top:1px;
            padding-bottom:1px;
            display:inline-block;
        }
        .askSizeBig 
        {
            color:green;
            font-size:14px;
        }
        .askPriceBig
        {
            color:navy;
            font-size:18px;
            padding-top:1px;
            padding-bottom:1px;
            display:inline-block;
        }

		.SentimentRatingRec
		{
			font-size: 20px;
			font-weight:700;
		}
		.footNote
		{
			display:inline-block;
			text-align:center;
			color:navy;
			font-size:10px;
			font-style:italic !important;
		}
        
       .upDay {
            color:white;
            background-color:#339933;
        }
        .downDay {
            color:white;
            background-color:#cc3300;
        }
        .upAmount {
            color:#339933;
        }
        .downAmount {
            color:#cc3300;
        }
            
       .Uptick {
            color:white;
            background-color:LimeGreen;
        } 
        .NewHigh {
            color:Navy;
            background-color:LightGreen;
        }
        .NewYearlyHigh {
            color:white;
            background-color:Green;
        }

       .Downtick {
            color:white;
            background-color:Coral;
        }
       .NewLow {
            color:white;
            background-color:Crimson;
        }
       .NewYearlyLow {
            color:white;
            background-color:DarkMagenta;
        }
        
        .TicksTable {
            color:navy;
            font-size:1.2em; 
            font-weight:bold; 
            font-family:Monospace;
            font-variant:small-caps;
            border:solid 1px Gray;
            overflow-y:scroll;
            display:block;
            width:95%;
            padding-left:5px;
            padding-right:5px;
            margin-bottom:5px;
            text-align:center;
        }
        
        .TicksInfo {
            color:navy;
            font-size:1.0em; 
            font-weight:600; 
            font-family:Montserrat;
            max-width:420px;
        }
        .TicksInfoSmall {
            color:navy;
            font-size:0.8em; 
            font-weight:600; 
            font-family:Montserrat;
            max-width:450px;
        }
        .ChangesTableRow {
            color:navy;
            font-size:1.4em; 
            font-weight:600; 
            font-family:Montserrat;
            max-width:420px;
            background-color:WhiteSmoke;
            border-style:none;
			box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.2), 0px 2px 4px 1px rgba(0,0,0,0.19);        
        }
	   .ChangesRow {
            color:navy;
            font-size:0.7em; 
            font-weight:600; 
            font-family:Montserrat;
            background-color:WhiteSmoke;
            border-style:none;       
        }
        
        .linkCursor:hover {
		    cursor: pointer;
        }
        
        .chartBackground
        {
			background-color:white;
        }
        .chartBars
        {
			background-color:white;
        }
        .chartVolume
        {
			background-color:gray;
        }
        .chartStudy
        {
			background-color:green;
        }
        .chartDates
        {
			background-color:yellow;
        }
        
        .chartLabel {
            font-size:0.8em; 
            font-weight:700; 
            font-family:Montserrat;
        }
        .chartLine {
             stroke:navy;
             stroke-width:0.2;
         }
         .chartStudyLine {
             stroke:navy;
             stroke-width:1.0;
         }
         .chartLineDiagnostic {
             stroke:black;
             stroke-width:0.4;
         }
        .chartBar {
             stroke:navy;
             stroke-width:1.4;
         }
         .chartBarUp {
             stroke:green;
             stroke-width:1.4;
         }
         .chartBarDown {
             stroke:red;
             stroke-width:1.4;
         }
         .chartTickUp {
             stroke:green;
             stroke-width:0.8;
         }
         .chartTickDown {
             stroke:red;
             stroke-width:0.8;
         }
         .chartStudy1 
         {
 			 color:gray;
             stroke:gray;
             stroke-width:0.8;
         }
         .chartStudy2 
         {
  			 color:orange;
             stroke:orange;
             stroke-width:0.8;
         }
         .chartStudy3 
         {
			 color:darkseagreen;
             stroke:darkseagreen;
             stroke-width:0.8;
         }

         .selectedTicker {
			background-color:#E8E8E8;
         }
        
         .selected {
			background-color: red;
			color: #fff;
			font-weight: bold
		}      
		
		      
         .helpHeading
        {
			display:inline-block;
			width:100%;
	        font-weight:600;
	        font-size:22px;
	        color:#5479CC;
   	        margin-top:20px;
	        margin-bottom:10px;
		}
         .helpSubHeading
        {
			display:inline-block;
			width:100%;
	        font-weight:600;
	        font-size:18px;
	        color:#5479CC;
	        margin-top:20px;
	        margin-bottom:10px;
        }        
        .helpImageDiv
        {
			display:inline-block;
	        width:100%;
	        text-align:center !important;
	        margin-top:10px;
	        margin-bottom:10px;
	    }
	    .helpImage
	    {
			text-align:center;
			width:90%;
			max-width:400px;
		}
		.helpImageSmall
	    {
			display:inline;
			width:30%;
			max-width:200px;
		}
		.homePageRow
		{
			display:inline-block;
			margin-bottom:10px;
			width:100%;
		}
		.homePageRowAdminXX
		{
			display:inline-block;
			margin-bottom:-10px;
			width:100%;
		}
		.watchlistRow
		{
			display:inline-block;
			margin-bottom:20px;
			width:100%;
		}

        .smallTicker
        {
			font-size:1em;
 	        font-weight:bold;
		}
        .tinyTicker
        {
			font-size:.85em;
 	        font-weight:bold;
		}
       
		.static {
			cursor: not-allowed;
		}
		
		.draggable {
			cursor: move;
		}
		.trendline, .trendlineCircle {
             stroke:navy;
             stroke-width:0.6;
        }
		.trendlineLabel {
			font-size:1em; 
            font-weight:600; 
            font-family:Montserrat;        }
        
        :root {
		  --main-color: #ecf0f1;
		  --point-color: #555;
		  --size: 5px;
		}

		.loader {
		  background-color: white;
		  overflow: hidden;
		  width: 100%;
		  height: 100px;
		  position: fixed;
		  top:75px; left: 0px;
		  display: flex;
		  align-items: center;
		  align-content: center; 
		  justify-content: center;  
		  z-index: 100000;
		}

		.loader__element {
		  border-radius: 50%;
		  border: var(--size) solid var(--point-color);
		  margin: calc(var(--size)*2);
		}

		.loader__element:nth-child(1) {
		  animation: preloader .6s ease-in-out alternate infinite;
		}
	

		.loaderText {
		  background-color: white;
		  overflow: hidden;
		  width: 100%;
		  position: fixed;
		  top: 175px; left: 0px;
		  display: inline-block;
		  align-items: center;
		  align-content: center; 
		  justify-content: center;  
		  z-index: 1;
		}

		@keyframes preloader {
		  100% { transform: scale(2); }
		}