html,body {
	padding-top:0px;
	margin:0px;
	height:100%;
	width:100%;
    overflow-x: hidden;
    overflow-y: hidden;
	background-color: #fff;
	font-size: 11pt;
	-webkit-text-size-adjust: none;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
		Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
		
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
table {
	width:100%;
	border-collapse: collapse;
	
	font-weight:600;
	font-size:12pt;
}

#tblOptions tr {
	height:42px;
	border-bottom:1px solid #ccc;
}

.last {
	font-weight:600;
	font-size:12pt;
}
.up {
	color:green;
}
.down {
	color:red;
}
.tblTitle {
	font-size: 15px;
    color: #818181;
	font-weight:600;
}
.tblHeader {
	font-size: 13px;
    color: #818181;
}

td {
}

@font-face {
	font-family: 'Glyphicons Halflings';
	src: 
		url(css/glyphicons-halflings-regular.ttf) format('truetype')
}


.tooltip {
	position:absolute;
	width:100px;
	background:#f1f1f1;
	border-radius:5px;
	z-index:3; 
	visibility: hidden;
	transition:.5s;
	transition-property: opacity;
}

.tooltip::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #f1f1f1 transparent;
   
}
.tooltip table {
	width:100%;
	border-collapse: separate;
    border-spacing: 0px;
}

.tooltip td{
	height:25px;
	padding-left:5px;
}

.menu-item {
	
}

.tooltip tr:hover {
	background:white;
}


.scroll {
  border: 0;
  border-collapse: collapse;
}

.scroll tr {
  display: flex;
}

.scroll td {
  padding: 10px;
  flex: 1 auto;
  border: 0px solid #aaa;
  word-wrap: break;
  padding-left:20px;
}

.scroll thead tr:after {
  content: '';
  overflow-y: scroll;
  visibility: hidden;
  height: 0;
}

.scroll thead th {
  flex: 1 auto;
  display: block;
  border: 0px solid #000;
}

.scroll tbody {
  display: block;
  width: 100%;
  overflow-y: auto;
  height:600px;
}

.mainMenu {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 2;
    top: 35px;
    left: 0;
    background-color: #fff;
    overflow: hidden;
    transition: .2s;
    padding: 0px;
	box-shadow: 0px 4px 4px #888888;
}

.mainMenu .closebtn {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;

}

.mainMenu .closebtn:hover {
    color: #f1f1f1;
}


.mainMenu .closebtn {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 36px;
    margin-left: 50px;
}
.menu-inner {
	width:100%;
	height:100%;
	padding:20px;
}
.menu-inner span {
	padding:5px;
	margin-left:5px;
	margin-right:5px;
	margin-top:20px;
	display:inline-block;
	border:1px solid #ccc;
	font-size:18pt;
	 border-radius:5px;
	 color:#1942ef;
}

.menu-inner .focused {
	color:#ccc;
	
}
.checkedItem {
	
	width: 20px;
	height: 20px;
	float: right;
	top: 2px;
	position: relative;
	display:none;

}
#menu {
	position:absolute;
	bottom:-100px;
	height:50px;
	width:100%;
	background:white;
	padding:20px;
	transition:.5s;
}

#menu div {
	font-size: 13px;
    padding: 8px;
    color:white;
    width:80%;
    background: #05c394;
    border: solid 1px #204002;
    border-radius: 5px;
    margin:auto;
    text-align:center;
}
#menu a {

	text-decoration:none;
}
#menu  .disabled{
	color:red;
}
.noborder {
	border:0px;
}
.lbl {
	
	font-weight:400;
	font-size:10pt;
	color:#949595;
	padding:3px;
	padding-left:25px;
}
.val {
	padding:5px;
	padding-top:0px;
	padding-left:25px;
}
#price {
	
	padding:5px;
	padding-left:25px;
	padding-bottom:0px;
	font-weight:600;
	font-size:20pt;
}

#change {
	
	padding:5px;
	padding-left:25px;
	font-weight:400;
	font-size:12pt;
}
thead {
   color:#949595;
   font-weight:400;
}
small {
	float:right;
	font-size:9pt;
	position:relative;
	bottom:-3px;
}
#cheader td {

	text-align:center;
}
.focused {
	border-bottom: 3px solid #0ad0bb;
}
#loadIcon {
	position:relative;
	margin:auto;
	top:150px;
	z-index:2000;
}

#loading {
	background-color: #fff;
	top: 0px;
	left: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1002;
}

#loading div {
	position:relative;
	display:inline;
	margin:150px;
	top:150px;
	z-index:2000;
	}
	.button {
	    padding-top: 8px;
	    badding-bottom: 8px;
	    font-size: 18px;
	    padding: 8px;
	    background: #05c394;
	    color:white;
	    --border: solid 1px #204002;
	    border-radius: 0px;
	    cursor:hand;
	    position:relative;
	    display:block;
	    text-align:center;
	    width:90%;
	}
	
	
.curRow {
    overflow: hidden;
    position: relative;
    --transform: translate3d(0px, 0px, 0px);
}


.curRow:hover {
	background-color:#ccc;
}	

	.layout_center {
		margin:auto;
		
	}
	.loginView {
		top:100px;
		width: 320px;
		position: relative;
		border:0px solid #ccc;
    	border-radius: 5px;
    	padding:10px;
    	transition:.5s;
	}
	.loginView td {
		padding-top:5px;
		padding-bottom:5px;
	}
	.loginView table {
		width:100%;
		height:80%;
	}
	.loginView input {
		width:100%;
		height:30px;
		font-size:13pt;
		border:0px;
		
    	border-radius: 0px;
		border-bottom:1px solid #ccc;
		
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	
	.loginView input:focus {
	
		border-bottom:1px solid #085387;
	}
	.button {
	    padding-top: 8px;
	    badding-bottom: 8px;
	    font-size: 18px;
	    padding: 8px;
	    background: #05c394;
	    color:white;
	    --border: solid 1px #204002;
	    border-radius: 0px;
	    cursor:hand;
	    position:relative;
	    display:block;
	    width:90%;
	}
	
	#loadIcon {
		position:relative;
		margin:auto;
		top:150px;
		display:none;
		z-index:10;
	}
	
	.loginView .button-container {
		padding-top:10px;
	}
	.error {
		font-size:9pt;
		color:red;
		text-align:center;
	}
	
	.desc {
		font-size:9pt;
		color:#797b7c;
		text-align:center;
	}
	.lblBank {
	
		font-size:11pt;
		color:#797b7c;
	}
.header {
	color:#4a5352;
	font-weight:600;
	font-size:14pt;
}

.wallet {
	position:absolute;
	z-index:100;
	bottom:10px;
	right:10px;
	width:60px;
	height:60px;
	
    transform: translate3d(0px, 0px, 0px);
}
.wallet img {
	
	width:60px;
	height:60px;
}

.wallet::after {
    background-image: radial-gradient(circle, #12b273 10%, transparent 10.01%);
    background-position: 50% center;
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: scale(10, 10);
    transition: transform 0.5s ease 0s, opacity 1s ease 0s;
    width: 100%;
}

.wallet:active::after {
    opacity: 0.2;
    transform: scale(0, 0);
    transition: all 0s ease 0s;
}

.userInfo {
	top:10px;
	right:0px;
	width:50px;
	height:50px;
}

.userInfo img {
	
	width:40px;
	height:40px;
}

.userInfo::after {
    background-image: radial-gradient(circle, #ee7421 10%, transparent 10.01%);
}

#userView {
	top:50px;
	position:relative;
}

#userView td {
	padding-left:20px;
	border-bottom:1px solid #ccc;
	height:50px;
}
.signOut {
	padding-right:20px;
	text-align:right;
	text-decoration:none;
}
.navRow {
	font-size:10pt;
	font-weight:400;
	background-image: url("images/arrow.png");
	background-repeat: no-repeat;
    background-position: right; 
    color:blue;
}

#portfolioView td {
	padding-left:20px;
	border-bottom:1px solid #ccc;
	height:50px;
}
#portfolioView  .thead {
   color:#949595;
   font-weight:400;
}
.bank {
	font-size:9pt;
	padding-left:30px;
	
}

	.tinput {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;  
    padding-right:60px;
    text-align:right;
    background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;
	border: medium none;
	color: rgb(44, 46, 47);
	margin: 0px;
	text-overflow: clip;
	outline: currentcolor none 0px;
	cursor: pointer;
	letter-spacing: normal;
	line-height: 1.4;
	font-family: sans-serif;
	font-weight: 300;
	font-size: 42px;
    }
    
    .tabcell {
    	border-bottom:3px solid #ccc;
    	text-align:center;
    	height:50px;
    	width:50%;
    }
    
    .tradetype {
    	float:left;
    }
    
    .tradesym {
    	float:right;
    }
    
    .tradetime {
    	float:left;
    	font-weight:200;
    	color:#747375;
    }
    
    .tradevalue {
    	float:right;
    	font-weight:200;
    	color:#747375;
    }
    
    #historyView tr {
    	height:50px;
    }
    
    #historyView td {
    	padding-left:20px;
    	padding-right:20px;
    }
    
    .tradestatus {
    	color:#747375;
    	border-bottom:3px solid #ccc;
    }
    
    .cancelOrder {
    	margin-top:20px;
    	width:150px;
    	display:inline-block;
    	float:right;
    	background:#c93417;
    }
    
   .orderHistd {
    	border-bottom:dashed 1px;
    }
    #helpView {
    
    	width:100%;
    	height:100%;
    	border:0px;
    }
    #helpIframe {
    	width:100%;
    	height:100%;
    	border:0px;
    }
    
    .messagebox {
    	top: 80px;
    	height:40%;
    	width: 320px;
   		position: relative;
    	border-radius: 5px;
    	padding: 10px;
    	transition: .5s;
    	border: 1px solid #ccc;
    	margin:auto;
    	background:#fff;
    	text-align: center;
    	display:flex;
    	flex-direction:column;
    	justify-content:center;
    	-webkit-box-shadow: 2px 10px 36px -4px rgba(0,0,0,0.75);
		-moz-box-shadow: 2px 10px 36px -4px rgba(0,0,0,0.75);
		box-shadow: 2px 10px 36px -4px rgba(0,0,0,0.75);
    }
    .messagebox  .button-container {
    
    	position:absolute;
    	bottom:10px;
    	width: 100%;
    }
    
    .messagebox .button-container .button {
    	display:inline-block;
    	width:120px;
    	margin-left:10px;
    	margin-right:20px;
    }
    
    .messagebox .message {
    	top: 30px;
		color: #999;
		position: relative;
    }
    
    .cellRow {
    	width: 100%;
    	border-bottom: solid 1px #ddd;
    	border-collapse:separate;
	}
	
	.ticker {
    font-size: 13pt;
    font-fimily: Tahoma,Arial,sans-serif;
    color: #333;
    padding-left: 20px;
	}
	
	

.changeBox {
    background: #238853;
    border-radius: 6px;
    padding-right: 2px;
    text-align: right;
    width: 90px;
    color: #fff;

}

.down {

    background: #b31d04;

}

.change {
    font-size: 13pt;
}
.changePct {
    font-size: 9pt;
}
.bid {
	padding-left:20px;
    font-size: 9pt;
    color: #666;
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
}

.ask {
	padding-left:5px;
    font-size: 9pt;
    color: #666;
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
}

#mainTable {
	position:relative;
	overflow:auto;
}
.ask_detail_v {
    font-size: 9pt;
	
}
.bid_detail_v {
    font-size: 9pt;
	
}
.lbltotalValue {
	font-size:13px;
	color:#666;
	font-weight:600;
}
.totalCash {
	
	font-weight:600;
	font-size:13px;
	color:#666;
}

.otalValue {
	font-size:24px;
	font-weight:600;
}

.totalValue {
	padding-left:20px;
	font-size:24px;
	font-weight:600;
}
#totalValue {
	font-size:24px;
	font-weight:600;
}

#totalCash {
	font-size:16px;
	font-weight:600;
}
#accountsummary {
	padding-bottom:30px;
	border-bottom:1px solid #ccc;
	display:none;
}

.positionCell div {
	position:absolute;
	height:14px;
	display:inline;
	width:175px;
    font-size: 11px;
}

.lblPosition {
	top:0px;
    left:20px;
}

.lblMktValue {
	top:0px;
	right:0px;
}


.lblPL {
	bottom:5px;
    left:20px;
}


.lblDayPL {
	bottom:5px;
    right:0px;
}
.disabled {
	color:gray;
}
#bankaccounts td{
	position:relative;
}
.remove {
	position:absolute;
	padding:5px;
	right:20px;
	top:10px;
	color:#770101;
	border-radius:5px;
	border:1px solid #ccc;
}
.veil {
	background-color: rgba(33, 33, 33, 0.3);
	alpha: .6;
	top: 0px;
	left: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1000;
}