/* CSS Document */

/******************************************************************************
* GLOBAL
******************************************************************************/
* { font-family: Verdana, Tahoma; }

body
{
 background: #728189;
 font-size: 9pt;
 margin: 0px;
	color: #FFF;

 scrollbar-base-color: #728189;
 scrollbar-arrow-color: #647071;
 scrollbar-3dlight-color: #788792;
 scrollbar-darkshadow-color: #788792;
 scrollbar-highlight-color: #AAAAAA;
 scrollbar-track-color: #626E75;
}

.gradienttop
{
	background: #2E9CC2 url(/images/bg_gradient.gif);
	color: #03253F;
}

.layerShadow
{
 position: relative;
 left: 3px;
 top: 3px;
 filter: Alpha(opacity=50);
 opacity: 0.5;
}

.borderline { border: 1px solid #AAA; }
.darkBg {	background: #003343;	color: #FFF; }
.neutralBg { background: #004358;	color: #FFF;	}

/******************************************************************************
* MODIFIERS
******************************************************************************/
.wide { width: 100%; }
.bold { font-weight: bold; }
.hide { display: none; }

/******************************************************************************
* FONTS
******************************************************************************/
.normal { font: 9pt Tahoma, Verdana; }
.small { font: 8pt Tahoma, Verdana; }
.tiny { font: 7pt Verdana; }
a { color: #FFFFFF; text-decoration: none; }

/******************************************************************************
* BUTTONS / INPUTS
******************************************************************************/
.normalButton
{
	background: #2E9CC2 url(/images/bg_button_cyan.gif);
	border: 1px outset #76C0D9;
	color: #03253F;
	font: 9pt Verdana;
}

.smallButton
{
	background: #2E9CC2 url(/images/bg_button_cyan.gif);
	border: 1px outset #76C0D9;
	color: #03253F;
	font: 8pt Verdana;
}

.normalInput
{
 font: 9pt Verdana;
 border: 1px inset #2E9CC2;
}

.normalDarkInput
{
 font: 9pt Verdana;
 border: 1px inset #185C75;
	background: #003343;
	color: #FFF;
}

.normalNeutralInput
{
 font: 9pt Verdana;
 border: 1px inset #185C75;
 background: #004358;
	color: #FFF;
}

.normalErrorInput
{
 font: 9pt Verdana;
 border: 1px inset #185C75;
	background: red;
	color: #FFF;
}

.checkbox
{
 margin: 1px;
 height: 13px;
	width: 13px;
 background: url(/images/checkbox.gif);
 background-repeat: no-repeat;
}

.checkboxSelected
{
 margin: 1px;
 height: 13px;
	width: 13px;
 background: url(/images/checkbox_tick.gif);
 background-repeat: no-repeat;
}

/******************************************************************************
* CLIENT MENUBAR
******************************************************************************/
a.topMenuButton
{
 display: block;
 height: 69px;
 width: 100%;
}

a.topMenuButton:hover
{
 padding-top: 1px;
 background: #00B7F5;
 background: url(/images/bg_menubar_hover.gif);
}

a.lastButton:hover
{
 background-position: top right;
 background: url(/images/bg_menubar_lasthoverred.gif);
}

img.buttonText
{
 position: relative;
 top: 50px;
 border-width: 0px;
}

/******************************************************************************
* PINGER
******************************************************************************/
.pingCell
{
 font-size: 1px;
 height: 2px;
 width: 3px;
 background: #00AADD;
 margin-top: 1px;
 margin-left: 1px;
}

/******************************************************************************
* ACCOUNT EXECUTIVES
******************************************************************************/
.tradingaccount
{
 font: 9pt Verdana;
	color: #FFF;
	height: 30px;
	background: #16566E url(/images/button_normal.gif);
	border: 1px outset #16566E;
}

.tradingaccountSelected
{
 font: 9pt Verdana;
 background: #009900 url(/images/button_green.gif);
	color: #FFF;
	height: 30px;
	border: 1px outset #16566E;
}

/******************************************************************************
* COUNTERS
******************************************************************************/
.counter {	color: white; }
.countertime { font: 8pt Tahoma;	color: #FFF; }
.up { background: green; color: #FFFFFF; }
.down { background: #D5000D; color: #FFFFFF; }

input.counter
{
 width: 80px;
 font: 9pt Verdana;
 background: #16566E url(/images/button_normal.gif);
	border: 1px outset #487B97;
	cursor: pointer;
}

input.up
{
 background: #009900 url(/images/button_green.gif);
	border: 1px outset #009900;
}

input.down
{
 background: #990000 url(/images/button_red.gif);
	border: 1px outset #990000;
}

input.counterdisabled
{
 width: 80px;
 font: 9pt Verdana;
 background: #13495E;
	border: 1px outset #13495E;
	cursor: default;
}

input.updisabled
{
 background: #007F00;
	border: 1px outset #006A00;
}

input.downdisabled
{
 background: #990000;
	border: 1px outset #770000;
}

/******************************************************************************
* PRICES
******************************************************************************/
span.stikethrough { text-decoration: line-through; color: #003343; }

/******************************************************************************
* DEBUG
******************************************************************************/
.show { border: 1px dotted red; }


/******************************************************************************
* LOGIN PAGE
******************************************************************************/
.login-page{
	background: #728189;
}
.login-page #main{
	margin-top: 7%;
	background: url(/images/bg_login_gradient.gif) repeat-x #76c0d9;
	min-height: 365px;
}
.login-page .main-top{
	background: url('/images/bg_login_top.gif');
	height: 10px;
}
.login-page .main-bottom{
	background: url('/images/bg_login_bottom.gif');
	height: 10px;
}
.login-page .loginmessage{
	margin-top: 50px;
	min-height: 50px;
	text-align: right;
	width: 100%;
}
.login-page .container-inner{
	padding: 30px 0;
}
.login-page .registration-text{
	margin-top: 50px;
}
.login-page .language-choice{
	margin-top: 50px;
	text-align: right;
	width: 100%;
}
.login-page form{
	text-align: right;
	width: 100%;
}
.login-page .input{
	width: 100%;
}
.login-page .field-text{
	font: 16px Verdana;  width: 100%;
}
.login-page #username{
	text-transform:uppercase;
}
.login-page .theme-preview{
	padding: 10px 0;
}
@media only screen and (max-width: 575px)  {
	.login-page .submit-button-wrapper{
		padding-top: 10px;
	}
	.login-page .theme-preview img{
		width: 100px;
	}
	.login-page .language-choice{
		margin-top: 10px;
	}
	.login-page .loginmessage{
		margin-top: 10px;
	}

}

.registration-page{
	scrollbar-base-color: #1B91BA;
	scrollbar-arrow-color: #0B7AA1;
	scrollbar-3dlight-color: #76C0D9;
	scrollbar-darkshadow-color: #1B91BA;
	scrollbar-highlight-color: #4DABCC;
	scrollbar-track-color: #0B7AA1;
}
.registration-page #countryflag{
	margin-top: -1px;
}
.registration-page .big-text{
	font: bold 13pt Tahoma !important;
}
.registration-page .bg-blue{
	background: #4DABCC;
}
.registration-page .btn-reg{
	font-size: 16px;
}

@media screen and (max-width: 500px){
	.registration-page table tr td{
	  display: block;
	  width: 100%;
	}
  }

/******************************************************************************
* CUSTOMER PAGE
******************************************************************************/
.navbar{
	min-height: 50px;
}
.nav-wrapper{
	background-color: #2E9CC2;
	/*margin-top: 10px; */
	min-height: 60px;
}
.nav-top-bar{
	background: url('/images/bg_login_top.gif');
	height: 10px;
}
.nav-bottom-bar{
	background: url('/images/bg_login_bottom.gif');
	height: 10px;
}

.navbar li.nav-item {
    font-weight: bold;
}

.navbar-light .navbar-nav .nav-link{
	color: white;
}
.nav-wrapper .navbar-toggler{
	border-color: rgba(255,255,255,1);
}
.nav-wrapper .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.nav-wrapper .show{
	border: 0;
}

table.table td {
    font-size: 10px;
    padding: 5px;
    border-top: 0;
    max-width: none;
    -webkit-overflow-scrolling: touch !important;
}

@media only screen and (max-width: 575px)  {
	.nav-wrapper .row{
		padding: 10px;
	}

	/*.nav-wrapper .navbar-toggler-custom{
		left: 1rem;
	}
	.nav-wrapper .navbar-collapse.collapse.show {
	    margin-top: 40px;
	}*/
}
@media only screen and (max-width: 769px)  {
	/*.nav-wrapper .header-col-left, .nav-wrapper .header-col-right{
		max-width: 90%;
	}*/
}

/******************************************************************************
* ADDED:202208
******************************************************************************/
/* @media screen and (max-width: 700px) {
	#limitorderpanel, #tradehistorypanel, #accountstatementpanel{
		display: none !important;
	}
} */
/* .login-page input{
	font-size: 16px !important;
}
 */
.fav-buttons-wrapper{
	display: inline-flex;
	margin-top: -25px;
}

.text-big{
	font-size: 12px !important;
	font-weight: bold;
}
.ping-bar{
	padding-top: 1rem;
}
@media screen and (max-width: 575px) {
	.header-col-left {
		padding: 0;
	}
	.header-col-left div, .ping-bar .row{
		padding: 0;
	}
	.ping-bar{
		padding-top: 0;
	}

	body{
		padding-bottom: 130px;
	}

}
@media screen and (min-width: 576px) {
	div.table-responsive{
		overflow-x: unset;
	}
}
#tradepanel input[type="number"] {
    width: 50px;
}
#tradepanel input[name="trade[price]"], #tradepanel input[name="trade[altprice]"]{
	width: 100px;
}

#tradepanel input {
	font-size: 16px !important;
}

.fixed-footer {
    position: fixed;
    height: 130px;
    bottom: 0;
    width: 100%;
	background-color: #165D75;
	color: white;
	border-top: 1px solid #AAA;
	padding: 1em 0;
}

#openpositions-mobile table td{
	font-size: 8pt;
	padding: 2px;
}

.currency-symbol{
	margin-top: -6px;
	font-size: 18px;
}

.btn-reg{
	font-size: 16px;
}

.floating-app{
	position:fixed;
	right: 10px;
	bottom: 10px;
}

/* @media screen and (max-width: 500px){
	.quote-panel-grid td.grid-item{
	  
	}
} */

.trade-history-wrapper .header{
	background-color: #2E9CC2;
	font-size: 10px;
	padding: 0.25em;
}
.trade-history-wrapper .sub-header{
	background-color: #004358;
	font-size: 10px;
	padding: 0.25em;
}

/* User guide */
.blink {
	animation: blink 1s linear infinite;
}
@keyframes blink {
	0% {
		opacity: 0;
	}
	50% {
		opacity: .5;
	}
	100% {
		opacity: 1;
	}
}

.blink-border {
	animation: blinkborder 1s linear infinite;
}
@keyframes blinkborder {
	0% {
		opacity: 0;
		border: 0;
	}
	50% {
		opacity: .5;
		border: 1px solid orange;
	}
	100% {
		opacity: 1;
		border: 1px solid red;
	}
}