#app{
  z-index: 1;
  position: relative;
}

#threebackground{
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* loading */
.lds-dual-ring {
  display: inline-block;
  width: 40px;
  height: 40px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 32px;
  height: 32px;
  margin: 4px;
  border-radius: 50%;
  border: 3px solid #000;
  border-color: #000 transparent #000 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
.lds-white,.lds-white:after {
	border-color: #fff transparent #fff transparent;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* some colors and simple stuff */
.relative{
	position: relative;
}

.vcenter {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.green{
	color: #33DD55;
}
.red{
	color: #DD3355;
}
.bold{
	font-style: bold!important;
	font-weight: bold;
}
.clear{
	display: block;
	width: 100%;
	height:0;
	clear: both;
}

.nPositive{
	color: #116633;
}
.spx-area .nPositive
,.ui-jqgrid-bdiv .ui-state-hover .nPositive, .ui-jqgrid-bdiv .ui-widget-content .ui-state-hover .nPositive
{
	color: #99FFAA;
}
.nNegative{
	color: #661133;
}
.spx-area .nNegative
,.ui-jqgrid-bdiv .ui-state-hover .nNegative, .ui-jqgrid-bdiv .ui-widget-content .ui-state-hover .nNegative{
	color: #FF99AA;
}
.nZero{
	color: #555;
}
.npInt{font-size: 125%;}
.npDec{font-size: 75%;}


.buy{
	color: #3F6C81;
}
.border_buy{
	border: #3F6C81 1px solid;
}
.bg_buy,input.buy,.btn.buy{
	color: #FFFFFF;
	background-color: #3F6C81;
}
.btn.buy.btn-outline-primary{
	color: #3F6C81;
	background-color: #FFFFFF;
}
.btn-check:active + .btn.buy.btn-outline-primary, .btn-check:checked + .btn.buy.btn-outline-primary, .btn.buy.btn-outline-primary.active, .btn.buy.btn-outline-primary.dropdown-toggle.show, .btn.buy.btn-outline-primary:active{
	color: #FFFFFF;
	background-color: #3F6C81;
}


.sell{
	color: #A23345;
}
.border_sell{
	border: #A23345 1px solid;
}
.bg_sell,input.sell,.btn.sell{
	color: #FFFFFF;
	background-color: #A23345;
}
.btn.sell.btn-outline-primary{
	color: #A23345;
	background-color: #FFFFFF;
}
.btn-check:active + .btn.sell.btn-outline-primary, .btn-check:checked + .btn.sell.btn-outline-primary, .btn.sell.btn-outline-primary.active, .btn.sell.btn-outline-primary.dropdown-toggle.show, .btn.sell.btn-outline-primary:active{
	color: #FFFFFF;
	background-color: #A23345;
}

/* -- jqgrid customs -- */
.ui-jqgrid .ui-jqgrid-titlebar-close{
	position: relative;
	float: left;
	margin: 0;
}
.ui-jqgrid{
	margin-left: auto;
	margin-right: auto;
}
.ui-jqgrid .loading{
	left: 25%;
	width: 50%;
	height: 50%;
	top: 25%;
	font-size: 200%;
	opacity: 0.5;
	border-radius: 75px;
}

/* ---- backgroundgrid ---- */
.background_grid {
  border: 0.1rem solid #ddd;
  background-color: #FFF;
  background-image: linear-gradient(#ddd .1rem, transparent .1rem), linear-gradient(90deg, #ddd .1rem, transparent .1rem)
  					/*linear-gradient(#777 .03rem, transparent .03rem), linear-gradient(90deg, #bbb .0.3rem, transparent .0.3rem)*/;
  background-size: 3rem 3rem;
  background-position: -0.1rem -0.1rem;
}




/* ---- POST TEMPLATE ---- */
.ui-jqgrid-hdiv.ui-state-default
,.ui-jqgrid-titlebar.ui-widget-header
,.ui-jqgrid-htable .ui-state-default, .ui-jqgrid-htable .ui-widget-content .ui-state-default
, .ui-jqgrid-bdiv .ui-state-hover, .ui-jqgrid-bdiv .ui-widget-content .ui-state-hover{
	color: white;
}

.ui-jqgrid-titlebar-close
,a:not([href]):not([tabindex]).ui-jqgrid-titlebar-close{
	color: white;
}
/* ---- matrix ---- */
.matrixEl{
	font-size: 75%;
	color: white;
}
.matrixEl.nZero{
	color: #DDD;
    background: #555;
}
.matrixElBest{
	border: 2px solid white !important;
	color: black;
	font-weight: bold;
}

.table > :not(caption) > * > *{
	padding: 0.2%;
}

.table > :not(caption) > td .p-2{
	padding: 0 !important;
}

.card-fullscreen {
    position: fixed !important;
    margin-top: 125px!important;
    margin-left: 95px!important;
    margin-right: 15px!important;
    margin-bottom: 15px!important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: calc(100% - 110px);
    height: calc(100% - 140px);
}
/*.number-font span, h6.number-font span,*/
/*.spx-area h6, .spx-area p */
h6.number-font{
  font-size: 125%;
}
.box-content-inner .single-box-content .number-font span{
  font-size: 110%;
}

.ui-state-hover{
	border: 1px solid var(--primary-bg-color) !important;
	background: var(--primary-bg-color) !important;
	color: white !important;
}

.label-inline{
  position: absolute;
  top: 0;
  left: 12px;
  border-radius: 30px 0px 0px 30px !important;
  opacity:0.7;
}

.speedo_section h6{
	margin-bottom: 5px;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #fd6a4255;
    background: #fd6a4255;
}
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a{
	color: black;
}
.ui-jqgrid-bdiv .ui-state-hover a, .ui-jqgrid-bdiv .ui-widget-content .ui-state-hover a{
	color: white;
}
.ranges li:hover, .ranges li.active {
  background-color: var(--primary-bg-color) !important;
  border: 1px solid var(--primary-bg-color) !important;
  color: white!important;
}
.ranges li{
	color: var(--primary-bg-color) !important;
}
.daterangepicker .input-mini.active{
	border-color: var(--primary-bg-color);
}
.custom-checkbox .custom-control-label::before {
	background: #ccc;
}

.pointer{
	cursor: pointer;
}

/* backtest */
.bactkest_sumsdet .bcktVal, .bactkest_dets .bcktVal{
	float: right;
}
.bactkest_sumsdet .bcktVal_par, .bactkest_dets .bcktVal_par{
	clear:both;
    margin-bottom: 5px;
}

/* serie header */
.sH_valueBox{
	font-weight: bold;
}

.ui-datepicker{
	z-index: 100!important;
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* user settings */
form .box .box-body, .box form .box-body{
    padding-top: inherit;
    height: auto;
    position: relative;
}
input.avatar{
    width: auto;
    height: auto;
}

.clickable{
    cursor: pointer;
}

/* header better */
@media(min-width: 992px){
    .frmSerieStudy{
        display: block;
    }
    .todaySerieStudy{
        float: right;
    }
    .headerToggleInfo{
        display: none;
    }
    .headerWhole.toggledInfo{
        display: block;
    }
}
@media(max-width: 991px){
    .frmSerieStudy{
        display: none;
    }
    .todaySerieStudy{
        float: none;
    }
    .headerToggleInfo{
        display: block;
        position: absolute;
        z-index: 1;
        top: 15px;
        right: 7px;
    }
    .headerWhole.toggledInfo{
        display: none;
    }
    .headerToggleInfo.toggled{
        top: 3px;
        right: 3px;
    }
}
.headerInfosBlock li:not(.vr){
    min-width: 62px;
}
.spx-area:not(.stickyClass){
    position: relative;
}

/* mobile better */
@media(max-width: 500px){
    .app-content .side-app{
        padding: 0 !important;
    }
    .spx-area{
        margin: 0!important;
    }
}
#back-to-top{
    width: 30px;
    height: 30px;
    line-height: 30px;
    opacity: 0.5;
}
#back-to-top i{
    padding-top: 0;
}

.tab-content.sp-tab-content-flex > .active{
    /*display: flex;*/
}


.box-hw{
    width: 120px;
    right: -88px;
}

.echart.m-auto div{
    margin-left: auto!important;
    margin-right: auto!important;
}

/* inner */
.app_help{
    position: absolute;

}

.nav-pills3 .nav-link.btnMinMaxType.active, .btnMinMaxType.active{
    color: #df9a58 !important;
}

#back-to-top{
    bottom: 42px!important/*campaignfooter*/;
}



/* @media all and (min-width: 400px)  {  body  { font-size:calc(0.8% * 100);  } }
@media all and (min-width: 600px)  {  body  { font-size:calc(1.0% * 100);  } }
@media all and (min-width: 800px)  {  body  { font-size:calc(1.1% * 100);  } }
@media all and (min-width: 1100px) {  body  { font-size:calc(1.2% * 100);  } }
@media all and (min-width: 1200px) {  body  { font-size:calc(1.3% * 100);  } }
@media all and (min-width: 1400px) {  body  { font-size:calc(1.3% * 100);  } }
@media all and (min-width: 1600px) {  body  { font-size:calc(1.4% * 100);  } }
@media all and (min-width: 1800px) {  body  { font-size:calc(1.4% * 100);  } } */