@charset "UTF-8";
/* CSS Document */
html, body {
	margin: 0;
	padding: 0;
	outline: 0;
	font-family: Verdana, Arial, sans-serif, 黑體, 新細明體;
	font-size: 12px;
	line-height: 20px;
	color: #000;

	transition-duration: 0.1s;

}

/* html {
	overflow: -moz-scrollbars-vertical;
	overflow: scroll;
} */
:root{
 --scrollbar-bg: F1F1F1;
 --scrollbar   : #C1C1C1;
 --t2-bg       : #e4ecf5;
 --t2-border   : #f0f0f0;
 --input-color : #000;
 --input-bg    : white;
 --oddRow-bg   : #ffffff;
 --evenRow-bg  : #f0f0f0;
 --table-hover-bg: #f2f5a9;
 --button-page-filter: none;
 --dropdown-bg : #f6f6f6;
 --dropdown-border :1px solid #ddd;
 --logo-path	   : url("../img/Hee_logo.png");
 --headline-path   : url("../img/tab_headline_bg_190.png");
 --keyframe-border : 2px solid #f0f0f0;
 --svg-bg          : #F2F6FC;
 --stockName       : #6d6e71;
 --stockName-bg    : #FBFBFB;
 --stockName-border: 0.5px solid lightGray;
 --outerBorder     : #cccccc;
 --buyPrice        : #0e318a;
 --sellPrice        : #8a0e12;
 --background-color: #ffffff;
 --header-text-shadow: #082b34;
 --changePriceCell: lightGreen;
 --copyTooltip_bg: #fff;
 --emptyType_bg: #e4ecf5;
 --searchUnderlying_buyRow: url("../img/lightModeBlue.png");
 --searchUnderlying_askRow: url("../img/lightModeRed.png");
 --stockDropdownBorder: #cccccc;

}

.dark-mode-body{
background-color: #1a1a1a;
color: white;
--scrollbar: #666;
--scrollbar-bg: #202324;
 --t2-bg       : #303233;
 --t2-border   : #36393a;
 --input-color : #ffffff;
 --input-bg    : #3B3B3B;
 --oddRow-bg   : #181A1B;
 --evenRow-bg  : #202325;
 --table-hover-bg: #aeb079;
 --button-page-filter: invert(100%);
 --dropdown-bg: #3B3B3B;
 --dropdown-border: 1px solid #403f3f;
 --logo-path	   : url("../img/Hee_logo_dark.png");
 --headline-path   : url("../img/tab_headline_bg_dark_190.png");
 --keyframe-border : 2px solid black;
 --svg-bg          : #1D1F20;
 --stockName       : #ffffff;
 --stockName-bg    : #202325;
 --stockName-border: 0.5px solid darkGray;
 --outerBorder     : #3d3d3d;
 --buyPrice        : #1771e6;
 --sellPrice       : #e3171d;
 --background-color: #1a1a1a;
--header-text-shadow: #f7f5f5;
--changePriceCell: rgb(47,158,79);
--emptyType_bg: #3d3c3c;
--copyTooltip_bg: #555;
transition-duration: 0.1s;
--searchUnderlying_buyRow: url("../img/newnew_darkModeBlue.png");
--searchUnderlying_askRow: url("../img/newnew_darkModeRed.png");
--stockDropdownBorder: #555;



}


/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


::-webkit-scrollbar-corner {
  background: rgb(0,0,0,0);
}

	.titlebar_1 {
		width: 1010px;
		border: 0px;
		min-height: 40px;
	}

	.titlebar_2 {
		width: 1010px;
		border: 2px solid var(--t2-border);
		min-height: 30px;
		background-color: var(--t2-bg);
		text-align: left;
		display: flex;
		flex-flow: row;
		align-items: center;
	}


:focus {
	outline-color: #0099da;
}



a {
	color: #8f8f8f;
	text-decoration: none;
}

a:hover, a:active, a:link, a:focus {
	text-decoration: none;
	outline: 0;
	cursor: pointer;
}

div.clear, span.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

img {
	border: 0;
}

input {
	font-family: Verdana, Arial, sans-serif, 黑體, 新細明體;
	color: var(--input-color);
    background-color: var(--input-bg);
    border: 0.1px solid grey;
	font-size: 12px;
	line-height: 16px;
}

textarea {
	font-family: Verdana, Arial, sans-serif, 黑體, 新細明體;
	color: #000;
	font-size: 12px;
	line-height: 16px;
}

ol, ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.xspan::first-letter {
  font-size: 150%;
    display: inline-block;

}

.xspan{
font-size: 1vw;
}

.xh1{
font-family: "Raleway", sans-serif;
font-size: 1.5vw;
font-weight: normal;
margin: -2px 0px 0px;
display: inline-block;
text-shadow: 1px 1px 2px var(--header-text-shadow);
}

.unselectable_img{
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn_common_small_long {
	width: 160px;
	height: 26px;
	color: #ffffff;
	text-align: center;
	line-height: 26px;
	border-radius: 3px;
}

.btn_common_small_long_focus {
	width: 160px;
	height: 26px;
	color: #ffffff;
	text-align: center;
	line-height: 26px;
	background: url(../img/btn_170x26_sell.png) no-repeat 0 0;
	border-radius: 3px;
}

.focus {
	background: url(../img/btn_170x26_sell.png) no-repeat 0 0;
	cursor: default;
	filter: brightness(1.15)
}

.nonFocus {
	background: url(../img/btn_170x26.png) no-repeat 0 0;
	cursor: pointer;
}

.wssButton:hover{
	filter: brightness(1.15);
}

.btn_common_small_long_leftMost_focus {
	width: 160px;
	height: 26px;
	color: #ffffff;
	text-align: center;
	line-height: 26px;
	background: url(../img/btn_170x26_sell.png) no-repeat 0 0;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.btn_common_small_long_leftMost {
	width: 160px;
	height: 26px;
	color: #ffffff;
	text-align: center;
	line-height: 26px;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.btn_common_small_long_rightMost {
	width: 160px;
	height: 26px;
	color: #ffffff;
	text-align: center;
	line-height: 26px;
	border-top-right-radius: 13px;
	border-bottom-right-radius: 13px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;

}

.btn_common_small_long_rightMost_focus {
	width: 160px;
	height: 26px;
	color: #ffffff;
	text-align: center;
	line-height: 26px;
	background: url(../img/btn_170x26_sell.png) no-repeat 0 0;
	border-top-right-radius: 13px;
	border-bottom-right-radius: 13px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;

}

.applybtn {
	width: 70px;
	height: 26px;
	color: #ffffff;
	text-align: center;
	line-height: 26px;
	background: url(../img/btn_70x26.png) no-repeat 0 0;
	cursor: pointer;
}

.applybtn:hover{
		/*background-position: 0 -26px;*/
}

.normalBtn{
    width: 70px; /*135px;*/
	height: 26px;
	color: #ffffff;
	text-align: center;
	line-height: 26px;
	background: url(../img/btn_135x26.png) no-repeat 0 0;
    opacity: 100%;
	cursor: pointer;
	border-radius: 3px;
}

.newWindowBtn{
background-color: var(--svg-bg);
}

.newWindowBtn:hover{
cursor: pointer;
}
 .dropbtn {
	width: 100px;/*135px;*/
	height: 26px;
	color: #ffffff;
	text-align: center;
	line-height: 26px;
	background: url(../img/btn_135x26.png) no-repeat 0 0;
	cursor: pointer;
	border-radius: 3px;
}
.dropbtn:hover{
    //background-position: 0 -26px;
}



/**header**/
#header {
	width: 940px;
	padding: 0 10px;
}

#language {
	padding-top: 7px;
	float: right;
	width: 660px;
	text-align: right;
	/*margin-top:*/
}

#language a, #language span {
	color: #8f8f8f;
}

#language a:hover {
	color: #0099da;
}



/* .list_view_content_table td:not(:first-child) { */
/* 	height: 30px; */
/* 	padding: 0; */
/* } */



#keyframe {
	border: var(--keyframe-border);
	border-radius: 3px;
	margin: 11px 0;
	padding: 11px 15px;
	width: 1010px;
	min-height: 640px;
}

#keyframe a:not(.newTabLink){
	color: #026296;
}

#keyframe a:hover {
	cusor: pointer;
	text-decoration: underline;
}

.loadingLogo {
	float: left;
	margin-left: 10px;
	background-image: url(../img/loading_animation.gif);
	background-size: 100% 100%;
	width: 20px;
	height: 20px;
	display: none;
}

#navbar{
display:none;
}

	.show {opacity: 100%; display: block}

	.navbar{
		background-image: linear-gradient(#52BAE6, #0378AA);
		width: 100%; background-color:#0378AA; overflow:hidden;
		visibility: visible;
		height: auto;
		margin-left: 10px;

	}

	.navbar a {

		float: left;
		padding: 12px;
		color: white;
		text-decoration: none;
		font-size: 17px;

	}

	.navbar button{
		font-size: 16px;
		border: none;
		outline: none;
		color: white;
		padding: 14px 16px;
		background-color: inherit;
		font-family: inherit;
		margin: 0;

	}


	.navbar td.active {
		background-image: linear-gradient(#52BAE6, #032aaa);
		color: white;
	}

	.navbar td:hover{
		background-image: linear-gradient(#52BAE6, #032aaa);
	}
	.navbar button:hover{
		background-image: linear-gradient(#52BAE6, #032aaa);
	}
	.navbar a:hover{
		background-image: linear-gradient(#52BAE6, #032aaa);
	}

	.dropdownlanguage {
		display: none;
		position: absolute;
		background-color: #f1f1f1;
		min-width: 160px;
		overflow: auto;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		height: 50px;
		z-index: 999;
	}

	.languageDrop:hover .dropdownlanguage{
		display:block;
	}
	#language_btn:hover {
		cursor: pointer;

	}

    .dropdown-content{
        opacity: 0%;
        display: none;
        position: absolute;
        background-color: var(--dropdown-bg);
        color: var(--input-color);
        min-width: 230px;
        overflow: auto;
        border: var(--dropdown-border);
        z-index: 2;
    }
	.stock-dropdown-content{
		opacity: 0%;
		display: none;
		position: absolute;
		background-color: var(--dropdown-bg);
		color: var(--input-color);
		overflow: auto;
		border: var(--dropdown-border);
		z-index: 1;
		margin-top: 6.5%;
		margin-left: 69.5%;
		border: 1px solid var(--stockDropdownBorder);
	}
	.stock-dropdown-content a {
		color: var(--stockName);
		padding: 12px 16px;
		text-decoration: none;
		display: block;
	}
    .dropdown{
        margin: 0 1%;
    }

	#logo{
	content : var(--logo-path);
	}

	.loadingLogoNew {
    	margin: auto;
    	background-image: url(../img/loading_animation_new.gif);
    	background-size: 100% 100%;
    	width: 8vw;
    	height: 6.5vw;
    	display: none;
    }

    .clickable{
        cursor: pointer;
    }
@media screen and (max-width: 1370px) {
    #language{
    margin-top: 30px;

    }
}
@media screen and (max-width: 1255px) {

    .titlebar_1{
    display: block;
    }
    #navbar{
    display:none;
    }
    .unnecessary1{
    display:none;
    }
    #language{
    margin-top: 20px;
    }



}