:root {
    --header-bg: #0A0E27;
    --secondary-site-bg: #fff;
    --bg-light: #fff;
    --menu-bg: #0A0E27;
    --link-color: #067dbe;
    --link-color-hover: #01579B;
    --site-max-width: 1380px;
    --main-font-color: #555;
    --accent-green: #00D4AA;
    --accent-gold: gold; /*#FFC107; */
    --accent-main: var(--accent-gold);
    --text-light: #E4E7EB;
    --ticker-up-color: rgb(7, 137, 7);
    --ticker-down-color: #dc1414;
    --ticker-active-color: #db7735;
    --curve-box-border-color: rgba(0,0,0,0.10);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)
}

body, th, td {
    font-family: "Inter", "Arial", sans-serif; color:var(--main-font-color);
    -webkit-font-smoothing: antialiased;
}
body {
    margin: 0;
    font-size: 14px;
    line-height: 25px;
    background: var(--bg-light);
}
a {
    color: var(--link-color);
    text-underline-offset: 2px;
}
    a:hover {
        color: #01579B;
    }
        h1, h2, h3, h4 {
            margin:15px 0 15px
        }
        h1 {
            font-size: 37px;
            line-height: 45px;
        }
        h2{
            font-size: 28px; 
            line-height: 32px;
        }
        h3{
            font-size: 21px; 
        }
        h4{
            font-size: 16px; 
            font-weight: 400;
        }

        .adSpotPad {
            text-align:center;
            padding:10px 5px;
        }

.chgUp, .stockgain {
    color: var(--ticker-up-color) !important
}
        .chgDown, .stockloss{
            color:var(--ticker-down-color) !important
        }
        .numcell {
            text-align:right
        }
        .bold5{
            font-weight:600 !important;
        }

#sitewrap {
    background: linear-gradient(180deg, #F0F5F9, #F0F5F9);
}

#headerwrap {
    background: var(--header-bg);
    
}

header {
}

#sitehead {
    display: grid;
    grid-template-columns: 1fr 315px;
    align-items: center;
    height: 50px;
    margin: 0 auto;
    padding: 0 15px;
    max-width: var(--site-max-width);
}

.siteTitle {
    font: italic 700 28px "Open Sans", "Arial";
    text-decoration: none;
    margin-left: 17px;
     width: 330px;  
    letter-spacing: -1px;
} 
         
.search-container {
    display:grid;
    grid-template-columns:1fr 80px; 
    column-gap:5px
}

#results strong {
    color:var(--accent-main)
}
.search-input input[type="text"] {
    padding: 10px;
    width: 99%;
}
input#search-input {
    font-size: 16px;
    border-radius: 4px; 
    padding: 4px 6px;
    border-radius: 5px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255,255,255,0.7);
    transition: background 0.3s;
}

.search-container button {
    padding: 9px 20px;
    background-color: #1977dd;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

.search-container button:hover {
    background-color: #0056b3;
}
#results{
  position:absolute;
  z-index:44; 
}

.results-box { 
    border: 1px solid #e0e0e0; 
    padding: 10px;
    text-align: left;
    display: none;
}

#results a {
    text-decoration: none;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 7px 4px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

#results a:hover {
    background-color: #111;
}
div#results div {
    text-align: left;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 0;
    width: 299px;
    background: #23273D; 
    border-top: none;
} 








        #quoteForm{
            text-align:right;
            padding:2px 20px
        } 
        #quoteForm_symbol {
            width:140px;
        }

div#divRecentQuotes {
    background: none;
    border-top: none;
    text-align: right;

    position: absolute;
    top: 59px; 
}

    div#divRecentQuotes a {
        display: inline-block;
        padding: 1px 5px;
        color: lightblue;
        text-decoration: none
    }
    div#divRecentQuotes a:hover {
        color: var(--accent-main);
    }

        #spaHistoryRow{ 
            margin-left: 20px;
            text-align: left;
            font-size: 14px;
            padding: 3px 0;
            display: grid;
            grid-template-columns: auto auto auto auto auto;
            gap: 8px;
        }

        #spaHistoryRow a{
            color:#fff;
            text-decoration-color:#e8e8e8
        }
#navwrap {
    border-top: 1px solid rgba(255,255,255,0.2);
    background: none;
    max-width: var(--site-max-width);
    margin:0 auto;
}


#menu {
	color: #fff;
	height: 45px;
	padding-left: 5px; 

}
#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
}
#menu li {
	float: left;
	display: inline;
	position: relative;
}
    #menu a {
        display: block;
        line-height: 45px;
        padding: 0 12px;
        text-decoration: none;
        border: none;
        color: #FFFFFF;
        font-size: 14px;
        transition: color 0.3s;
    }
    #menu li a:hover {
        color: var(--accent-main);
        border: none;
    }

    #menu a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0; /* Starts with 0 width */
        height: 3px;
        background: var(--accent-main);
        transition: width 0.3s; /* Animates the width change */
    }

/* On hover, the width expands to 100% */
    #menu a:hover::after {
        width: 100%;
    }

#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 45px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 45px;
	text-align: center;
	position: absolute;
	left: 35px;
    font-size:25px
}
#menu label:before {
	font-size: 1.6em;
	content: "\2261"; 
	margin-left: 20px;
}
    #menu ul.sub-menus {
        height: auto;
        overflow: hidden;
        width: 170px;
        background: var(--header-bg);
        position: absolute;
        z-index: 99;
        display: none;
    }
#menu ul.sub-menus li {
	display: block;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #fff;
	font-size: 14px;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #213A48;
	color: #FFFFFF;
}
@media screen and (max-width: 800px){
	#menu {position:relative}
	#menu ul {background:#1e323d;position:absolute;top:100%;right:0;left:0;z-index:11;height:auto;display:none}
	#menu ul.sub-menus {width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:30px;}
	#menu li {display:block;float:none;width:auto;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block}
	#menu input {z-index:4}
	#menu input:checked + label {color:white}
	#menu input:checked + label:before {content:"\00d7"}
	#menu input:checked ~ ul {display:block}
}


.contentbg {
    /*background: linear-gradient(135deg, var(--bg-light) 0%, #E5E7EB 100%);*/
}

.container {
    background:#fff;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 20px 50px;
    min-height: 900px; 
    padding: 20px;
    overflow: hidden
}   

footer{
    background:#111;
    min-height:100px
}
#sitefoot {
    max-width:var(--site-max-width);
    margin:0 auto;
    padding:14px;
    text-align:center;
    color:#a7a7a7
}

#sitefoot a {
    color:#e8e8e8;
    padding:2px;
    display:inline-block
}
        
    @font-face {
        font-family: 'FontAwesome';
        src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/fonts/fontawesome-webfont.eot?v=4.6.3');
        src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),
            url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),
            url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),
            url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),
            url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    } 

    .fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
    .fa-twitter:before{content:"\f099";}
    .fa-facebook:before{content:"\f09a";}
    .fa-arrow-circle-right:before{content:"\f0a9";}
    .fa-arrow-circle-up:before{content:"\f0aa";color:var(--ticker-up-color)}
    .fa-arrow-circle-down:before{content:"\f0ab";color:var(--ticker-down-color)}
    .fa-bars:before{content:"\f0c9";}
    .fa-angle-double-down:before{content:"\f103";}
    .fa-angle-up:before{content:"\f106";}
    .fa-newspaper-o:before{content:"\f1ea";}
    .fa-pie-chart:before{content:"\f200";}
    .fa-bar-chart:before{content:"\f080";color:var(--ticker-active-color)}
    
    .addIcon:before {
        font-family:'FontAwesome';
        padding-right: 6px; 

     }

.iconUp:before {
    content: "\f0aa"; 
    color:var(--ticker-up-color);
}
.iconDown:before { 
    content: "\f0ab";
    color:var(--ticker-down-color);
}
.iconActive:before { 
    content: "\f080";  
    color:var(--ticker-active-color);
}


    .thHeaderTitle { 
        text-align:left
    }
    .thGainers {
        color:var(--ticker-up-color); 
    }
    .thLosers {
        color:var(--ticker-down-color); 
    }
    .thActives {
        color:var(--ticker-active-color); 
    }


                              
#divTickerNews{ 
}

.tickerNewsRow {
    margin: 11px 0;
    display: grid;
    grid-template-columns: 25px 1fr;
}
.tickerNewsRow .newsIcon, .tickerNewsRow .newsHeadline {
 
}
.tickerNewsRow .newsIcon{
padding-right:10px
}
.tickerNewsRow .newsHeadline {
font-weight:bold
}
a.newsTicker {
    padding: 5px;
    background: #caf3ca;
    border-radius: 5px;
    margin-right: 11px;
}
.tickerNewsRow .newsDate {
    font-size: 14px;
    font-weight: normal;
    color: #555;
}
.newsDesc { 
}

@media only screen and (max-width: 1300px) {

    .hideU13{
        display:none
    }
}
@media only screen and (max-width: 1200px) {

    .hideU12{
        display:none
    }
}
@media only screen and (max-width: 1100px) {

    .hideU11{
        display:none
    }

    .container {
        padding: 35px 15px;
    } 
    div#divRecentQuotes {
        top: 100px;
        right: 5px;
    }
        div#divRecentQuotes a {
            color: var(--link-color)
        }
        div#divRecentQuotes a:hover {
            color: var(--link-color-hover)
        }
}

@media only screen and (max-width: 920px) {
    #tpmenu9{display:none !important}
    .hideU9{
        display:none
    }
}
@media only screen and (max-width: 840px) {
    #tpmenu8{display:none !important}
}
@media only screen and (max-width: 800px){
    
    #results {
         top: 80px;
        right: 2px;
        width:85%;
    }

    .hideU8{
        display:none
    }


    #sitehead{
        display:block
    }
    #sitewrap{
        padding:0;
        margin-top:-2px
    }
    #sitehead {
        height:inherit
    }

    .container {
        padding: 35px 15px;
    } 

    .siteTitle{
        font-size: 25px; 
        text-align:center;
        display:block;
        margin:2px;
        width:inherit
    }

    .search-container {  
        position: absolute;
        right: 5px;
        margin-top: 5px;
        z-index: 25;
        width: 85%;
    }


    .search-input input[type="text"] {
    }


    #quoteForm input {
        float: none;
        margin-right: 5px;
        padding: 8px;
        font-size: 15px;
        border-radius: 4px;
    
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    input#quoteForm_button {
        padding: 7px;
        position: absolute;
        z-index: 999;
        right: 2px;
        top: 45px;
        height: 39px;
    }
    input#quoteForm_symbol {
    position: absolute;
        z-index: 999;
        right: 95px;
        top: 44px;
    }
    div#divRecentQuotes { 
        right:5px;
        top:82px;
    }
        div#divRecentQuotes a {
            display: inline-block;
            padding: 3px 6px;
            color: var(--link-color)
        }
        div#divRecentQuotes a:hover {
            color: var(--link-color)
        }

    section.content {
        padding-top: 20px;
    }

}