* {
	box-sizing:border-box;
	padding:0;
	margin:0;
	font-family:'Arial';
}

body{
	display:flex;
	align-items:center;
	width:100vw;
	height:100vh;
	font-size:1.2rem;
	background-color:#dedede;
}

.load {
	background-color:rgba(255,255,255,.8);
	display:flex;
	flex-flow:column;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	align-items:center;
	z-index:100;
	cursor:default;
	overflow:visible;
}

.load > span{
	display:block !important;
	width:100% !important;
	height:max(calc((100% - 3rem)/2),0px) !important;
	max-height:30vh !important;
}

.load .loader {
    border: 5px solid #f3f3f3 !important; /* Light grey */
    border-top: 5px solid #3498db !important; /* Blue */
    border-radius: 50% !important;
    width: clamp(1.5rem,3vw,3rem) !important;
    height: clamp(1.5rem,3vw,3rem) !important;
    animation: spin 1s linear infinite !important;
}



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


.panels{
	display:flex;
	width:100%;
	height:100%;
	padding:1rem;
	position:relative;
}

[class$=Panel]{
	display:flex;
	flex-flow:column;
	height:100%;
	overflow:auto;
}

.inputPanel{
	width:20%;
}

.input{
	width:100%;
	height:50%;
	border:1px solid black;
	overflow:hidden;
	display:none;
}

.orderLog{
	width:100%;
	height:50%;
	border:1px solid black;
	background-color:white;
	display:grid;
	grid-template-columns:.75fr 1.05fr .8fr 1.6fr 1fr;
	grid-auto-rows: 1.2em;
	font-size:.55em;
	padding:2%;
	row-gap:.8em;
	overflow-y:auto;
}

.orderTotals{
	grid-column:2/5;
}

.summary{
	display:grid;
	width:100%;
	padding:3%;
	grid-template-columns:1fr 1.5fr;
	align-items:center;
	background-color:white;
	row-gap:1rem;
}

.summaryLabel{
	text-align:right;
}

.summaryValue{
	text-align:center;
	font-size:1.2em;
	font-weight:bold;
}

.positive{
	color:#00c951;
}

.negative{
	color:#ff1912;
}

.stockPanel{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr;
	grid-auto-flow:column;
	width:60%;
	padding-left:3%;
	grid-column-gap:2%;
}

.stockDiv{
	display:grid;
	grid-template-columns:repeat(20,1fr);
	row-gap:.7rem;
	padding:2%;
	margin-bottom:2%;
	font-size:.6em;
	background-color:white;
	cursor:pointer;
	align-items:center;
}

.stockDiv input[type=checkbox]{
	width:1em;
}

.large{
	font-size:1.8em;
}

.col4{
	grid-column:auto /span 4;
}

.col3{
	grid-column:1 /span 3;
}

.col5{
	grid-column:auto /span 5;
}

.Buy{
	background-color:#83e882;
}

.Rebuy{
	background-color:#d385de;
}

.Sell{
	background-color:#ed7e7e;
}

.headDiv{
	align-self:stretch;
	font-weight:bold;
	padding:1%;
	display:flex;
	align-items:center;
}

.detailPanel{
	display:flex;
	flex-flow:column;
	width:30%;
	gap:1%;
	padding:0 2% 0 3%;
	font-size:.8em;
}

.orderRow{
	display:flex;
	width:100%;
	background-color:white;
	padding:1%;
}

.orderDate{
	width:40%;
}

.orderAmount,.orderPrice{
	width:25%;
	text-align:right;
}

.overlay{
	padding-left:20%;
	display:none;
	margin:0 0 0 0;
	top:0px;
	left:0px;
	position:fixed;
	z-index:1100;
	width:100vw;
	height:100vh;
	background-color: rgba(0,0,0,.7);
	flex-flow:column;
	cursor:pointer;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;  
}

.overlayContainer{
	background-color:white;
	display:flex;
	flex-flow:column;
	padding:5%;
	gap:5%;
}

.overlayStocks{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr;
	grid-auto-flow:column;
	width:100%;
	padding-left:3%;
	grid-column-gap:2%;
}