@charset "UTF-8";
 
@import url(https://fonts.googleapis.com/css?family=Ruda&display=swap);
body {
	background-color: #222;
	color:#CDCDCD;
	font-family: Ruda;
	margin:0;
	font-size: 14px;
	padding: 0;
}

a,.link {color: yellow; text-decoration: underline; cursor: pointer;}
a:visited {color: #ffa800;}


[hidden] {display: none !important;}
input,select,button,textarea {
	background-color: black;
	border: 1px solid #888;
	padding: 0.1cm;
	color: white;
	font-family: Ruda;
	font-size: 0.4cm;
	box-sizing:
	border-box;
}
input[type="date"] {
	padding: 0;
	width: 49%;
	text-align: center;
	font-size: 0.8em;
}
input[readonly] {
	border: 0;
	cursor: default;
}
input[disabled],select[disabled],button[disabled],button[disabled]:hover {
	background-color: #444;
	color: #888;
	
}

input[type=number] {
        -moz-appearance: textfield;
}
select {
    appearance: none;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAgCAQAAAC8nkAAAAAAnElEQVQ4y2NgGAXDBPxX/2+ERZTtv9l/SUxh1////ydhiE76//q/CDazZ/9//V8CRcT8/+//odgdwvf//v81SHzO/5f+L8Ptbof/v/5HwHnt/5/+58fnzZb/X/+LMjAwMPy3/P/7vz3+MGH8f/T/AQaG/+z/X/6vR5dlxFAuzHCNYR6DIcNfBn/GP4RD3Oj/9/83/guOpr1RQCMAALnoRw41qoTsAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
    background-size: 1em;
    background-origin: padding-box;
    padding-right: 1em;
    box-sizing: border-box;
}

x-switch.block {
	display:block;
}
x-switch.block[hidden] {
	display:hidden;
}

.fraction {
	display: inline-flex;
	flex-direction: column;
	vertical-align: middle;
	font-size: 0.8em;
	text-align: center;
	padding: 0 0.2em;
}
.fraction > span{
	display: block;
}

.fraction > span:first-child {
    border-bottom:  1px solid;
}

select.noarrow {
	background-image: none;
}

p.textdoc {white-space: pre-wrap;text-align: justify;font-family: monospace;}

button {
	background-color: #444;
	box-shadow: 2px 2px 5px black;
	min-width: 5em;
	margin: 0 0.4em;
}

.newshare .copylink button {
    font-size: 2em;
    min-width: 2em;
    vertical-align: middle;
}

button:hover {
	color: yellow;
}
button:active {
	box-shadow: 0px 0px 0px black;
	transform: translate(2px,2px);
}

.info_icon {
	display: inline-block;
	background: #3636c3;
	font-family: monospace;
	font-weight: bold;
	width: 1.4em;
	text-align: center;
	padding-top: 0.1em;
	border-radius: 1em;
	text-shadow: 0 0 2px white;
	font-size: 0.9em;
	box-shadow: 0 0 1px 0px black;
	cursor: pointer;
}

x-form {
	display:block;
	position: relative;
}

x-form.sharesform img {
    height: 1em;
    display: block;
    margin-right: 0;
    cursor: pointer;
}

x-form.sharesform table {
    width: 100%;
    border-collapse: collapse;
}

x-form.sharesform .buttons {
	text-align:right;
}

x-form.sharesform table td {
    padding: 0.2em;
    border-bottom: 1px #444 dotted;
}
x-form.sections {
	margin: 0px 2%;
}
x-form  label, x-form  div.label {
	display:flex;
	align-items: center;
	margin: 0.2em 0;
	position: relative;
	gap: 0.5em;
}
x-form  label > *, x-form  div.label > * {
	display:block;
	width: 50%;
	box-sizing: border-box;
}
x-form  div.label >  span:nth-child(2) > span:first-child {
	font-weight:bold;
}

x-form div.label label > *{
	width: unset;
}

x-form img.inline_img {
	height: 2em;
	vertical-align: middle;
}
x-form input[type=number], x-form input.number {
	text-align:center;
}
x-section {
	display:block;
	border: 1px solid;
	padding: 0.5em;
	position: relative;
	margin: 1em 0;
	box-sizing: border-box;
	transition: 0.3s all;
}
x-section.goal {
}
x-section.goal.hidden {
	display:none
}
x-section-caption {
	background-color: #222;
	/* border: 1px solid; */
	display: block;
	position: absolute;
	left: 1em;
	top: -0.7em;
	padding: 0 0.3em;
	/* z-index:1; */
}

x-form.no_adv .adv {
	display:none;
}

x-form.no_experimental .experimental {
	display:none;
}



x-form.no_adv .adv.unhide,x-form.no_experimental .experimental.unhide {
	display:block;
}
x-form.no_adv label.adv.unhide, x-form.no_adv div.label.adv.unhide {
	display: flex;
}
x-form label.modified, x-form div.label.modified {
	color:yellow;	
}

x-section.backtest {padding: 0;}
x-section.backtest div.middle {display: flex;flex-direction: row;overflow: hidden;}
x-section.backtest div.options {
    position: relative;
    width: 0;
}
x-section.backtest div.floating {
    position: absolute;
    left: -12em;
    /* border: 1px solid; */
    padding: 0.5em;
    background-color: #101010;
    text-align: center;
    border: 1px solid #444;
    box-shadow: 0 0 black;
    box-sizing:border-box;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s all ease-in-out;
    width: 12em;
}
x-section.backtest div.floating.shown {opacity: 1;pointer-events: auto;left: 0;} 
x-section.backtest div.floating >div {
    font-size: 0.8em;
    margin-top: 0.5em;
    text-shadow: 0px 0px 6px black;
}
x-section.backtest div.floating >input {
    width: 100%;
}
x-section.backtest  div.sidepanel{
    width: 6%;
    height: 0;
    padding-bottom: 61%;
    position: relative;
}
x-section.backtest  div.sidepanel > div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -100%;
    z-index: 1;
    background-color: #222;
}
x-section.backtest  div.sidepanel img{width: 100%;display: block;box-sizing: border-box;padding: 15%;}
x-section.backtest  div.sidepanel .icon {
    cursor: pointer;
    background-color: #0000;
    transition: 0.3s all;
    opacity: 0.5;
}
x-section.backtest  div.sidepanel .icon:hover {opacity: 1;}
x-section.backtest  div.sidepanel .icon:active {}
x-section.backtest  div.sidepanel .icon.sel{background-color: #101010;opacity: 1;}
x-section.backtest   div.mainpanel{
	flex-grow: 1;
}
x-section.backtest   div.mainpanel div.chart > svg{}
.backtest .chart {
}

.backtest .no_data_panel {
    padding: 1cm;
} 

div.trader.list .selected {
	background-color: #333;
}
div.trader.list .modified::after {
	content:"*";
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	font-size: 1.5em;
	color: yellow;
	left: 0;
	text-align: right;
	text-shadow: 2px 2px 4px black, -2px -2px 4px black, -2px 2px 4px black, 2px -2px 4px black;
}


div.trader.list .paper > *{
	filter: sepia(1) saturate(2);
}

div.float_info {
	background-color: #000000ad;
	border: 1px solid #AAA;
	padding: 5px;
	border-radius: 1em 1em 0 1em;
	transition: 0.3s all;
	color: #fefefe;
	z-index: 10000;
	pointer-events: none;
}

div.float_info table {
	width: fit-content;
}

div.float_info::after {
    	content: "";
    	display:  block;
    	position: absolute;
    	right: -5px;
    	bottom: -5px;
    	width:  10px;
    	height:  10px;
    	border-bottom: 2px solid;
    	border-right: 2px solid;
}


div.float_info th {text-align: left !important;padding:  0 !important;/* white-space: normal; */width: auto;}

div.float_info tr.strategy_info > * {color: #CCC;}


div.float_info td {
	text-align: right;
}

div.float_info td hr {
	margin: 3px 0;
}

div.trader.list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	justify-content: center;
	margin-top: 0.4em;
}
div.trader.list > * {
	cursor: pointer;
}
div.trader.list > *:hover {
	background-color:#223;
}

div.trader.list > *:active {
	background-color:#484b52;
}

div.visstrategy {
	/* border:  1px solid; */
	max-width: 600px;
	margin: 1em auto;
	background-color: #181818;
	box-sizing: border-box;
	padding: 0.5em;
	text-align: center;
}
div.visstrategy span.axes {
    display: block;
    float: left;
    height: 3em;
    width: 6em;
    position: relative;
}
div.visstrategy span.axes > span:first-child {
    display: block;
    position: absolute;
    left: 1em;
    top: 0;
    right: 0;
    text-align: left;
}
div.visstrategy span.axes > span:last-child {
    display: block;
    position: absolute;
    top: 1em;
    right: 0;
}
div.visstrategy span.axes > span:first-child::before {content: "↑";display: block;position: absolute;left: -0.5em;font-size: 2em;font-family: monospace;top: 0;}
div.visstrategy span.axes > span:last-child::before {content: "→";font-size: 2em;font-family: monospace;position: absolute;left: -0.8em;top: -0.3em;}
div.visstrategy > div {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 66.66%;
	line-height: 27;
}

div.visstrategy svg {
	width: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

div.visstrategy svg polygon.yield {
	fill: #005b9654;
}
div.visstrategy svg line.yield {
    stroke: #00a2ff6e;
}


div.visstrategy svg .axes.line {
    stroke: #5c564a;
}
div.visstrategy svg .axes.text {
    fill: wheat;
    font-size: 12px;
}

div.visstrategy svg .budget {stroke: yellow;}
div.visstrategy svg .held {stroke: lime;}
div.visstrategy svg .tangent {stroke: #7efcfc;}
div.visstrategy svg line.current {stroke: #ffffff;}
div.visstrategy svg line.neutral {stroke: #7794a8;stroke-width: 1px;stroke-dasharray: 2 2;}
div.visstrategy svg text.current,div.visstrategy svg text.neutral {fill: #ffffff;alignment-baseline:hanging;transform: translate(5px,0);opacity: 0.5;}
div.visstrategy svg circle.current.held{fill: lime;r: 3;}
div.visstrategy svg circle.current.budget{fill: #7af2f2;r: 3;}
div.trader.list > * >div {
	text-align:center;
}

div.trader.list > * {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	transition: 0.4s all;
	position: relative;
}

div.trader.list .exclamation {
	position: absolute;
	right: 0;
	top: -5px;
	font-size: 0.4cm;
	/* font-weight: bold; */
	color: #F44;
	text-shadow: 0 0 10px black, 0 0 5px black, 0 0 2px black;
	}
.no_api_key {color: #F44;}

div.trader.list img {
	width: 1.2cm;
	height: 1.2cm;
}

div.broker.pair img {
	width: 2cm;
}

.broker.select .bottom {
	display: flex;
	margin-top: 1em;
	justify-content: space-between;
}
.broker.select div.trader.list {
	flex-direction:column;
	max-width: 30em;
	margin: auto;
	max-height: 50vh;
	overflow-x: auto;
	overflow-y:hidden;
}
.broker.select div.trader.list > * {
	text-align:left;
	margin: 0 auto 0 0;
	opacity: 0.75;
	flex-direction: row;
	gap: 0.3em;
}
.broker.select div.trader.list > .available {
	font-weight: bold;
	opacity: 1;
}
.broker.select div.trader.list > .available::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: url(../res/keys.png);
	background-repeat: no-repeat;
	background-size: 1em;
	padding-left: 0.5em;
}
.broker.select div.trader.list > * > div:last-child {
	display: inline;
}
.broker.select div.trader.list > * > img {
	width: 0.7cm;
	height: 0.7cm;
	vertical-align: middle;
}

div.dialog > div.progressdlg {padding: 2em;}

x-progress {display: block;width: 100%;/* height: 2em; */border: 1px solid;border-radius: 0.4em;overflow: hidden;line-height: 2em;box-sizing: border-box;}

x-progress > * {
	background: linear-gradient(90deg, #013805, #3a7111);
	transition: 2s width cubic-bezier(0.4, 0.77, 0.5, 0.93);
	text-align: right;
	padding-right: 0.2em;
	box-sizing: border-box;
	text-shadow: 2px 2px 4px black;
}
x-progress.message > * {
	transition: none;
	background: linear-gradient(359deg, #980000, #809000);
	color: white;
	white-space: nowrap;
}

div.dialog > div {
	margin:auto;
	text-align: center;
	background-color: black;
	border: 1px solid #888;
	display: inline-block;
	vertical-align: middle;
	padding: 0 0 1% 0;
	min-width: 8cm;
	width: 90%;
	max-width: 20cm;
	white-space: normal;
	box-shadow: 10px 6px 20px black;
	box-sizing: border-box;
	padding: 5px;
	max-width: 16cm;
}

.newshare .copylink {
    text-align: left;
}

div.newshare >.mode {
    text-align: left;
    padding: 1em;
}


div.dialog > .newshare {
    max-width: 14cm;
}

div.dialog > .newshare .buttons {
    text-align: right;
    margin-top: 1em;
    position: relative;
}

.newshare .left {
    position: absolute;
    bottom: 0;
}

div.broker  div.keys label>span {
    width: 25%;
    text-align: right;
}
div.broker  div.keys label>*:last-child {
	width:75%;
}
div.broker div.right {
	text-align:right;
}
a[target]::after {
	content:"";
	width: 1em;
	background-size: 1em;
	height: 1em;
	display:inline-block;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEUAAAD9//w/VBoJAAAAAXRSTlMAQObYZgAAAEhJREFUCNdjYMAK5H9Aif/zfzAw/28EEc0goh1INPBbAAk5EGEDIioYgMQHINH4AEg0HzwAZDUCiQZGfMT//1CC8f//BgZcAADmmCYPf9Bi+gAAAABJRU5ErkJggg==);
	background-repeat: no-repeat;
	vertical-align: middle;
}
div.broker.pair table.selector {
    margin: auto;
}
div.broker.pair table.selector td {
    text-align: left;
    padding: 0 0.5em;
}

div.dialog div.confirm div[data-name=custom] {
	text-align: justify;
	margin:  2%;
	white-space: pre-line;
}

div.dialog > div.confirm p {
	text-align: center;
	white-space: pre-line;
}

div.dialog {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	text-align: center;
	white-space: nowrap;
	overflow: auto;
	z-index: 2;
}

div.dialog::before {
	content: "";
	display: inline-block;
	height: 100vh;
	vertical-align: middle;
}

div.broker.pair .form {
	margin: 1em;
}



.control_row {display: flex;}
.control_row > * {flex-grow: 1;margin: 0 0.1em;min-width: 0;}
.control_row > *:first-child {margin-left: 0;}
.control_row > *:last-child {margin-right: 0;}

.flexpanel {
	display: flex;
	justify-content: space-between;
	border-bottom: 2px solid #884;
	background-color: #332;
	position: fixed;
	width: 100%;
	box-sizing: border-box;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
}

.flexpanel > * {
	line-height: 1.5cm;
	white-space: nowrap;
}

.flexpanel > *:first-child {
	white-space: nowrap;
	flex-shrink: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fonticon {
	display: inline-block;
	font-size: 1cm;
	vertical-align: middle;
	width: 1.1cm;
	height: 1.1cm;
	overflow: hidden;
	text-align: center;
	font-weight: bold;
	cursor: default;
	box-sizing: content-box;
	padding: 0.2cm;
	border:  0;
	line-height: 1.1cm;
}



.backicon {
	color: #CC8;
}

a {
	margin: 0;
}

.desktop {
	padding: 4em 0 0 0;
	margin: 0 0 0 0;
}

.lightbox {
	background-color: #5f5f5fb0;
	opacity: 1;
	display:  block;
	position:  fixed;
	top: 0;
	bottom:  0;
	left:  0;
	right: 0;
	z-index: 2;
}

.main_form_wait x-section {
	height: 13em;
    position: relative;
}

.spinner {
	border-left: 10px solid #ffd202;
	border-top: 10px solid #ffd20287;
	border-right: 10px solid #ffd202;
	border-bottom: 10px solid #ffd20287;
	border-radius: 1cm;
	animation: rot 3s infinite cubic-bezier(0.39, -0.01, 0.52, 1.01);
}

.save.spinner  {
	width: 0.7cm;
	height: 0.7cm;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
}

.save.hide {
	display: inline-block;
	animation: savehide 3s;
	animation-fill-mode: forwards;
	vertical-align:middle;
	font-size: 2em;
	width: 0.7cm;
	color: lime;
	box-sizing: border-box;
	/* font-weight: bold; */
	text-shadow: 0 0 10px white;
	overflow: hidden;
}

.spinner.inline {
	display: inline-block;
	vertical-align: middle;
}


.main_form_wait x-section div, .waitdlg div {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1cm;
	height: 1cm;
	margin: auto;
}

.broker.pair .spinner {
	width: 0.4em;
	height: 0.4em;
	display: inline-block;
	vertical-align: text-bottom;
	margin-left: 1em;
}

.spinner.fast {
	animation: rot_fast 0.5s infinite linear;
}

.backtest .charts.spread_vis {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.backtest .charts.spread_vis .error::before {
	content:"⚠️ ";
}
.backtest .charts.spread_vis .error {
	position: absolute;
	left: 0;
	right: 0;
	top: 56%;
	border:  1px solid;
	width: 75%;
	margin: auto;
	background-color: black;
	padding: 1em;
	color: #FFD;
	box-shadow: 5px 5px 5px black;
}

.backtest .charts.spread_vis .spinner {
	display: block;
	position: absolute;
	top: 5em;
	left: 0;
	right: 0;
	margin: auto;
}

.backtest p {
	text-align:center;
	margin: 0;
	font-style:italic;
	height: 5%;
}
.backtest .scrollbar {height: 10%;}

.backtest div.tablecont {
	background: linear-gradient(to right, transparent,#3e3e3e);	
}
.backtest div.tablecont.up {padding-top: 0.4em;}
.backtest div.tablecont.bottom {padding-bottom: 0.4em;}
.backtest table{
	width: 100%;
	border-collapse:collapse;
	padding:0;
}

.backtest  tr > * {
	text-align:center;
	padding: 0 2px;
	margin: 0;
	font-size: 0.9em;
}
.backtest input,.backtest button {
	font-size: 0.9em;
	margin: 0;
	box-sizing: border-box;
	width: 50%;
}

.backtest th {
	font-weight:normal;
	white-space: nowrap;
	width: 14%;
}
.backtest th[data-name=options]:hover {
	background-color: #FFF2;
	cursor: pointer;
}
.backtest th[data-name=options].sel {
    background-color: #151515;
}
.backtest th img {
	width: 2em
}
.backtest > x-form.floating {
	position: absolute;
	top:3em;
	right: 0;
	background-color: #151515;
	padding: 0.5em;
	width: 44vw;
	max-width: 8cm;
	font-size: smaller;
	opacity: 0.9;
	border: 1px solid #FFF5;
}

.backtest td {
	font-weight:bold;
}
.backtest tr:first-child td:first-child {
    padding: 0;
}
.backtest table select {
	display: block;
	width: 7em;
	border: 0;
	background: transparent;
	text-overflow: ellipsis;
	padding: 4px;
	text-align: center;
}
.backtest table select option {
	background-color: black;
}
.backtest table select option:checked {
	background-color: #888;
}
.backtest table select option:hover {
	background-color: #888;
}
.backtest table select option:focus {
	background-color: #888;
}
.backtest td.a,.backtest th.a {
	cursor: pointer;
}
.backtest td.a:hover,.backtest th.a:hover {
	background-color: #FFF2;
}
.backtest td.pc::after {
	content: '%'
}

.backtest input[type=range] {
	width:100%;
	box-sizing: border-box;
}

.backtest.wide {
	width: 100% !important;
}

input[type=range].thick {
  -webkit-appearance: none;
  width: 100%;
  margin: 0px 0;
  border: 0;
  background: none;
}
input[type=range].thick:focus {
  outline: none;
}
input[type=range].thick::-webkit-slider-runnable-track {
  width: 100%;
  height: 32px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #646464;
  border-radius: 0px;
  border: 0.3px solid #010101;
}
input[type=range].thick::-webkit-slider-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 32px;
  width: 50px;
  border-radius: 0px;
  background: #cacaca;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.3px;
}
input[type=range].thick:focus::-webkit-slider-runnable-track {
  background: #717171;
}
input[type=range].thick::-moz-range-track {
  width: 100%;
  height: 32px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #646464;
  border-radius: 0px;
  border: 0.3px solid #010101;
}
input[type=range].thick::-moz-range-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 32px;
  width: 50px;
  border-radius: 0px;
  background: #cacaca;
  cursor: pointer;
}
input[type=range].thick::-ms-track {
  width: 100%;
  height: 32px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range].thick::-ms-fill-lower {
  background: #575757;
  border: 0.3px solid #010101;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range].thick::-ms-fill-upper {
  background: #646464;
  border: 0.3px solid #010101;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range].thick::-ms-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  width: 50px;
  border-radius: 0px;
  background: #cacaca;
  cursor: pointer;
  height: 32px;
}
input[type=range].thick:focus::-ms-fill-lower {
  background: #646464;
}
input[type=range].thick:focus::-ms-fill-upper {
  background: #717171;
}

.trouble_sect {
	display:flex;
	flex-wrap: wrap;	
}

.trouble_sect > * {
	flex-grow: 1;
	width: 7cm;
	text-align: justify;
	margin: 1em;
	/* height: 100%; */
	position: relative;
	padding-bottom: 4em;
}
.trouble_sect > * > div {
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.trouble_sect > * > div > button {
	width: 50%;
	height: 3em;
}

.mark_warn {
	color: #c7c750;
}

.mark_crit {
	color: #ff4141;
}


@keyframes rot {
	0% {
	transform: rotate(0);
	opacity: 0;
	}
	40%{
		opacity:1;
	}
	60% {
		opacity:1;
	}
	100% {
	transform: rotate(960deg);;
	opacity:0;
	}
}

@keyframes rot_fast {
	0% {
	transform: rotate(0);
	}
	100% {
	transform: rotate(360deg);
	}
}

@keyframes savehide {
	0% {
		width: 0.7cm;
		opacity: 1;
		text-shadow: 0 0 0px white;
	}
	50% {
		width: 0.7cm;
		opacity: 1;
		text-shadow: 0 0 20px white;
	}
	75% {
		width: 0.7cm;
		opacity: 0;
		text-shadow: 0 0 100px white;
	}
	100% {
		width: 0;
		opacity: 0;		
	}
}

.error {
	color: red;
	font-size: 0.9em;
	display: none;
}
.error.mark {
	display: block;	
}

.warning {
	color: #f4ff88;
	font-size: 1em;
	padding-left: 2em;
	background: url(data:image/pmh;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAdCAMAAAD8QJ61AAAAM1BMVEVAAAABAwA3KwVVQgZ2YwSQfgC7jwCsoADjtQD9sADkvwD9ugD+wAD9yQD+0wD93AD96gCsTSPwAAAAAXRSTlMAQObYZgAAAM9JREFUKM99ktESxRAMRHG1jVTw/197o6oNynlKYmfFDqUagAjUAogpxZWAEoNrA7aYXxL4lBVhdo4pWa23FHFqcGjmmFkUg4UFX78Vh2+L/MQqiDR5YtnhO60QmUuAuaLRIIOPYEgr9IJuTxSCUobWItzwual1a3BjhECkBYEK4ae1rY14CD1w1vbtxD+rcJTb28FgQGCMkN8WSP5BlLkrezbDfW8Ul4E/X3gHK1qPeUMxOHOSTvS8JzkJ52CaAXUCZ+3eCcC7BR6amEZA/QGVSRdPeDJxawAAAABJRU5ErkJggg==);
	background-size: 1.4em;
	background-repeat: no-repeat;
	background-position: 0% 50%;
	display: none;
}
.warning.mark {
	display: block;
}


.security_form table {
	width: 100%;
	background-color: #3e4130;
	padding: 0.2cm;
}
.security_form table td,.security_form table th {
	text-align: center;
	padding: 0.2cm;
	border-bottom: 1px solid #222;
}

.security_form table td:first-child {
	text-align:left;
}

.panelbutton {
	padding-right: 1em;
	cursor: pointer;
	display: inline-block;
}

.panelbutton:hover {
	background-color: #443;
}

.waitdlg {
	width: 3cm !important;
	height: 6cm;
}

.rightinfo {
	text-align: right;
	font-style: italic;
	font-size: 0.8em;
}

x-form.pair table.orders {margin:  auto;border-collapse: collapse;width: 100%;font-size: 0.8em;background-color: #3e4130;}
x-form.pair table.orders td,x-form.pair table th {
    text-align: center;
    padding: 5px;
    position:relative;
    vertical-align: top;
}

x-form.pair table.orders td,x-form.pair table th[data-name=options] {text-align: right;padding-right: 1em;}

x-form.pair table.orders td:nth-child(4) {
	width: 5em;
}

x-form.pair table.orders td button {
	display:  block;
	left:0;
	top: -6px;
	right:0;
	bottom: 5px;
	min-width: unset;
	width: 2em;
	position: absolute;
	z-index: 1;
}

.pairactions div.icon {
	display:  inline-block;
	border-radius: 10cm;
	overflow: hidden;
	border: 1px solid #555;
	margin: 0.05cm;
	/* float: right; */
}
x-form.pair .pairactions div.icon {
}

.pairactions div.icon.red img {
	background-color: #6f1111;
} 

.pairactions div.icon.red img:hover {
	background-color: red;
} 

.pairactions div.icon.blink {
    animation: 10s blinkanim infinite;
    background-color: #2c8143;
}

@keyframes blinkanim {
	0% {
		box-shadow: 0 0 1px #00ff45;
	}
	50% {
		box-shadow: 0 0 100px #00ff45;
	}
	100% {
		box-shadow: 0 0 200px #ffffff;
	}
}


.fromexchoption {
	padding-bottom: 1em;
	border-bottom: 1px dotted;
	margin-bottom: 1em;
}

.pairactions img {
	width: 1.3cm;
	height: 1.3cm;
	vertical-align: middle;
	border-radius: 0;
	padding: 0.2cm;
	box-sizing: border-box;
	filter: drop-shadow(0px 0px 5px black);
	/* float: right; */
}

.pairactions img:hover {
	background-color: #5f5133;
}



.toppanel {
	margin-bottom: 0.2cm;
	background: linear-gradient(to right, transparent,#3e3e3e);
	margin: -0.5em -0.5em 1em 0;
	/* line-height: 1.7cm; */
	min-height: 1.8cm;
	padding-top: 0.6cm;
	box-sizing: border-box;
}

x-form.paper .toppanel {background: #5c3c00;position: relative;background: #ffff8814;}

x-form.paper .toppanel::before {
	content:"PAPER TRADING";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	/* text-align: center; */
	font-size: 4em;
	font-weight: bold;
	color: #66664473;
	white-space: nowrap;
	overflow: hidden;
	z-index: -100;
}

.toppanel > div > x-checkbox {
	white-space:nowrap;
}

.pairactions {
	padding-right: 0.2cm;
	text-align: right;
	float: right;
	line-height: initial;
	margin-top: -0.4cm;
}

.security_form .buttons {
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	margin: 1em 1em 0 1em;
}

button > img {
	height: 1em;
	vertical-align: middle;
}

.textorderline.current {
	font-size: 1cm;
}

span.tooltip {
	position: absolute;
	display: block;
	width:  40%;
	background: black;
	z-index: 5000;
	padding:  5px;
	border: 1px solid #888;
	left: 2em;
	color:  white;
	font-size: smaller;
	pointer-events: none;
	opacity: 0;
	transition: 1s all cubic-bezier(1, -2.49, 1, 0.97);
	text-align: left;
	font-weight: normal;
}

span.tooltipanchor span.tooltip {
	width: 100%;
}


label span:hover span.tooltip, div.label span:hover span.tooltip, span.tooltipanchor:hover span.tooltip {
	display: block;	
	opacity:1;
	
}

.colornumb.buy {color: #08d208;}

.colornumb.sell {
	color: #ff4141;
}

.strategygoal div {display:none;font-style:italic;margin-bottom: 1em;}
.strategygoal > div.halfhalf > div.halfhalf {display:block;}
.strategygoal > div.stairs > div.stairs {display:block;}
.strategygoal > div.keepvalue > div.keepvalue {display:block;}
.strategygoal > div.keep_balance > div.keep_balance {display:block;}
.strategygoal > div.expwide > div.expwide {display:block;}
.strategygoal > div.sinh > div.sinh {display:block;}
.strategygoal > div.hypersquare > div.hypersquare {display:block;}
.strategygoal > div.errorfn > div.hypersquare {display:block;}
.strategygoal > div.gamma > div.gamma {display:block;}
.strategygoal > div.passive_income> div.passive_income {display:block;}
.strategygoal > div.sinh_gen > div.sinh_gen {display:block;}
.strategygoal > div.sinh > div.sinh_gen {display:block;}
.strategygoal > div.sinh_val > div.sinh_gen {display:block;}
.strategygoal > div.hodlshort > div.hodlshort {display: block;}

x-form.trading .buttons {text-align: center;}
x-form.trading .buttons button {width: 40%}
x-form.trading button.buy {background-color:#024e02;}
x-form.trading button.sell {background-color:#5f0101;}
x-form.trading table.orders  {width: 100%;border-collapse:collapse}
x-form.trading table.orders td  {text-align:center;padding: 3px;border-top: 1px solid #333}
x-form.trading table.orders tr { background-color:black;}
x-form.trading table.orders td button {
    min-width: 2em;
    background-color: transparent;
    border: 0;
    box-shadow: 0 0 0;
}
x-form.trading table.orders td .spinner {display: inline-block;}
x-form.trading .chart .spinner {
	display:  block;
	height:  1cm;
	width: 1cm;
	margin: 3cm auto;
}

[data-name=auto_max_backtest_result] {
	font-weight:bold;
}

[data-name=auto_max_backtest_result].wait::before {
	content:"";
	display:inline-block;
	animation: rot_fast 0.5s infinite linear;
	border-top: 2px solid;
	border-bottom: 2px solid;
	width: 1em;
	height: 1em;
	border-radius: 1em;
	vertical-align: middle;
	margin: 0.2em;
	box-sizing: border-box;
}

.sharedlg {

}
.sharedlg textarea {
	box-sizing: border-box;
	width: 94%;
	margin: 3%;
	text-align: center;
	font-family: monospace;
	overflow: auto;
	height: 18em;
}

.adveditdlg textarea {
	box-sizing: border-box;
	width: 94%;
	margin: 3%;
	text-align: left;
	font-family: monospace;
	overflow: auto;
	height: 18em;	
}

.upload_dialog > p:first-child{
	font-weight: bold;
	font-size: larger;

}

div.progress {
	border: 1px solid #666;
	margin: 1em 10%;
	line-height: 2em;
	position: relative;
	color: #9c997e;
	overflow: hidden;
}

div.progress > div {background: #00ff0073;height:  2em;transition: 1s all linear;position: absolute;left: 0;top: 0;}

table.utilization img {
    width: 24px;
    vertical-align: middle;
    margin-right: 0.5em;
}

table.utilization div.progress {
	margin:0;
	text-align: center;
}

table.utilization td:last-child span::after {
	content: " %";
}

table.utilization span {
	
}

table.utilization {
	border-collapse:collapse;
	width: 13cm;
	margin: auto;
	transition: 1s all;
}

table.utilization tr td {
	text-align:left;
	transition: 0.5s all;
}

table.utilization tr.updated td {
	background-color: #440;
	color: white;
}

table.utilization tr:first-child td {border-bottom: 1px solid;}

table.utilization tr:last-child td {
	border-top: 1px solid;
	font-weight: bold;
}

.dialog.pairdetails > div {
 padding: 1em;
 max-width: 15cm;
}
.dialog.pairdetails > div  div {
	margin: 0.5em;
}
.dialog.pairdetails > div  div > span:first-child{
 text-align: left;
}
.dialog.pairdetails > div  div > span:last-child{
 text-align: right;
}


.reset_strategy {

}

.reset_strategy x-form {
	margin: 2em 1em;
	text-align: left;
}
.reset_strategy x-form div.note {
	text-align: right;
	font-style: italic;
}
.reset_strategy x-form div.buttons {
	text-align: right;
	margin: 1em 0;
}

.wallet_form {}
.wallet_form div.table {
    width: 100%;
    /* max-width: 15cm; */
    margin: auto;
    display: block;
}
.wallet_form div.table>div {
	display: flex;
	/* align-content: center; */
	align-items: center;
}
.wallet_form div.table>div>div:last-child{width: 50%;}
.wallet_form div.table img {
	width: 2em;
	vertical-align: middle;
}
.wallet_form div.table>div>div {
    text-align: left;
    width: 25%;
}

.wallet_form div.hdr {font-weight: bold;border-bottom: 1px solid #464;margin-bottom: 0.3em;}
.wallet_form div.money {
    display: flex;
    flex-wrap: wrap;
}
.wallet_form div.editanch {
	position:relative;
	cursor: pointer;
}
.wallet_form div.editanch::before {
	content:"✎";
	color: #fff8a4;
}
.wallet_form input.editval {position: absolute;/* left: 0; */right: 0;top: -0.1em;bottom: -0.1em;box-sizing: border-box;width: 90%;display: block;text-align: right;}
.wallet_form div.money > div{
    flex-grow: 1;
    flex-basis: 9em;
    text-align: right;
    position: relative;
}
.wallet_form div.money span.modified{
	color: yellow;
}

.wallet_form div.money span:first-child:focus{
	padding: 0 0.5em;
}

.wallet_form table td[data-name=value] {
    text-align: right;
    font-weight: bold;
    color: white;
}
.wallet_form .brk_wallets {}
.wallet_form .brk_wallets .acc_wallet{display: flex;background-color: #181818;padding: 0.5em 0.2em;margin: 0.1em;}
.wallet_form .brk_wallets .acc_wallet > div {
    display: flex;
    flex-wrap: wrap;
    align-self: center;
    justify-content: flex-start;
}
.wallet_form .brk_wallets .acc_wallet .acc_wallet_name{
    min-width: 6em;
    display: block;
}
.wallet_form .brk_wallets .acc_wallet .acc_balances{
    display: block;
    font-family: monospace;
    /* flex-grow: 1; */
}
.wallet_form .brk_wallets .acc_wallet .acc_balances .symbol{
    min-width: 4em;
    display: inline-block;
}
.wallet_form .brk_wallets .acc_wallet .acc_balances .value{
    margin-right: 0.2em;
    min-width: 10em;
    text-align: right;
    color: white;
    display: inline-block;
}

x-section-caption img {
	width: 1em;
	vertical-align: middle;
}

.sepabove {
	position: relative;
	padding-top: 3px;
}
.sepabove::before {
    content: "";
    display: block;
    height:  1px;
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    background: linear-gradient(to right,#ffffff73,#ffffff00);
}

.newsmessages {
    color: #90905f;
}
.newsmessages .buttons {
    text-align: center;
    margin: 1em;
}
.newsmessages .item {
    border-top: 1px solid #ccc;
    padding: 0 1em;
    opacity: 0.5;
    max-height: 3em;
    overflow: hidden;
    transition: 0.5s max-height;
    box-sizing:border-box;
    position: relative;
}

.newsmessages .item::before {
	content:"▶";
	display: block;
	position: absolute;
	width: 1em;
	height: 1em;
	top: 1em;
	left: 0.5em;
	transform: rotate(0deg);
	transition: 0.25s transform;
	line-height: 1em;
	text-align: center;
	pointer-events: none;
}

.newsmessages .item.open::before {
		transform: rotate(90deg);
}

.newsmessages .item.open {
	max-height: 50em;
}
.newsmessages .item.unread {background-color: #000;opacity: 1;}
.newsmessages .item.hl {
	color: white;
}
 
.newsmessages .item .row {
	display: flex;
	gap: 1em;
	font-weight: bold;
	color: #ebebb9;
	cursor: pointer;
	height: 3em;
	align-items: center;
	justify-content: flex-start;
}

.newsmessages .item .row  span:first-child {
	white-space: pre;
	text-align: right;
	width: 7em;
}

.newsmessages .item.hl .row {
	color: white;
}

.newsmessages .item .body {
	white-space: pre-line;
	padding-bottom: 1em;
}

.importbox {
    position: absolute;
    background-color: #222;
    bottom: 1vh;
    left: 1vw;
    right: 1vw;
    padding: 0.5em;
    color: white;
    border: 1px solid;
}
.importbox > div {
	display:
	flex;
	align-items: center;
	flex-direction: column;
	gap: 1em;
	padding: 1em 0;
	background-color: #4d213f;
}
.importbox > div > div > div {
	position: relative;
	display: inline-block;
	width: 7em;
	height: 1em;
	vertical-align: baseline;
	text-align: center;
}

.importbox > div > div > div > div{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 11;
	font-weight: bold;
	width: 100%;
	box-sizing: border-box;
	padding: 0 0.2em;
	overflow-x: hidden;
	text-overflow: ellipsis;
}



div.stabilitytest {}
div.stabilitytest table {
    width: 100%;
}
div.stabilitytest table tr {}
div.stabilitytest table tr.percent td::after {
	content:"%";
}
div.stabilitytest table tr th:first-child{text-align:right;width: 7em;}
div.stabilitytest table tr td {}
div.stabilitytest table td.alertnumb.buy {color: yellow;}
div.stabilitytest table td.liqnumb.buy {color: red;}
div.stabilitytest div.error {
    /* display: block; */
    color: yellow;
    font-weight: bold;
}

.sections .apikeys > div {display: flex;align-items: center;gap: 1em;width: 80%;justify-content: space-between;margin: auto;height: 2.5em;}
.sections .apikeys > div > * {
    white-space: nowrap;
}
.sections .apikeys > div > * > img {width: 2em;vertical-align: middle;}
.sections .apikeys > div > *:nth-child(1) {}
.sections .apikeys > div > *:nth-child(2) > img {
    padding: 0 0.5em;
    opacity: 0.7;
    cursor: pointer;
}
.sections .apikeys > div > *:nth-child(3) {}
.sections .apikeys > div > *:nth-child(4) {}

@media all and (max-width: 15cm) { 

.pairactions img {width: 1.3cm;height: 1.3cm;margin: -0.1cm;}
.pairactions div.icon {
    margin: 0;
}


input,select,button,textarea {
	font-size: 0.4cm;
	padding:0.05cm;
}
.security_form table tr {
	display: flex;
	flex-wrap:wrap;
	border-bottom: 1px solid #000;	
}
.security_form table th {
	display:none;
}
.security_form table td {
	border-bottom: 0;
	flex-grow:1;
	width: 40%;

}
.backtest table select {font-size: 2vw;width: 12vw;}
.backtest {
	font-size: 2vw;
}
table.utilization {
    width:100%;
}
x-section.backtest div.sidepanel {
	width: 7.5%;
}

}


@media all and (min-width: 25cm) { 

.vertical {
	position: relative;
}

.vertical .menu {
	position: absolute;
	width: 5.5cm;
}

.vertical .content {
	margin-left: 5.5cm;
	box-sizing:border-box;
	padding-top: 0.5em;
}

.vertical div.trader.list {
	flex-direction: column;
	margin-top: 1em;
	gap: 0;
	align-items: flex-start;
}
.vertical div.trader.list > *{
	align-items: center;
	flex-direction: row;
	text-align: left;
	margin: 0.1cm;
	align-content: center;
	gap: 0.3em;
	width: 100%;
	position: relative;
}

div.trader.list .modified::after {
    left: 1cm;
    right: unset;
    margin-left: -0.4em;
}


.vertical div.trader.list img {width:  1cm;height: 1cm;vertical-align:middle;}
.vertical div.trader.list .item div {flex-grow: 1;text-align: left;}
.vertical .content x-form.sections {
	display:flex;
	flex-wrap:wrap;
	max-width: none;
	justify-content: center;
	margin: 0.5em 2%;
	gap: 1em;
}
.vertical .content x-form.sections > * {
	flex-grow:1;
	width: 15cm;
	box-sizing: border-box;
	margin: 0;
}

.vertical .content x-section.small_box {
	width: 40%;
	flex-grow: 2;
}

.vertical .content x-section.center_box {
	flex-grow:0;
	width: 11cm;
}


}