@charset "utf-8";
/* CSS Document */
#body {	
	flex-direction: row;
  	align-items: stretch;
	min-height: 100vh; 
}
#sidebar {	 
	background: #eaeef3;
	position: fixed;
	width: 250px;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 11;
	box-shadow: -5px -5px 15px 0px hsla(0,0%,100%,.62),5px 5px 15px 0px rgba(163,177,198,.66);
	-webkit-transition: left .3s ease,width .3s ease;
	transition: left .3s ease,width .3s ease;
	z-index:1001;
}
#page-display {
	margin: 0 0 20px 255px;
  	padding: 0 20px;
	-webkit-transition: left .3s ease,width .3s ease;
	transition: left .3s ease,width .3s ease;
}


/* Sidebar */
#logo-box {
	padding: 15px;
	margin: 0 0 25px;
}
#logo-box a { 
	opacity:1
}
#logo-box img {
	padding:0;
	margin:0;
}
#sidebar nav {
	list-style-type: none;
  	margin: 15px;
 	padding: 0;
}
#importer {
    margin: 60px 15px 15px;
}
#importer .file-uploader {
	margin-top: 15px;
}
#importer h5 {
	color:#1A1F36;
	position:absolute;
	top:-30px;
	left:25px;
	border-radius:50px;
	font-size:14px;
	padding: 10px 20px 10px 50px;
	background:#d7dee7;
}
#importer p {
    font-size: 14px;
	line-height: 1.4em;
    margin:0px;
	color:#4F5B76;
	text-align:center;
	padding:15px 0;
}
#importer input[type="file"] {
    background: rgba(255,255,255, 0.2);
    font-size: 15px;
    margin-bottom: 8px;
}

/* Header */
#page-header {
	position: -webkit-sticky;
    position: sticky;
    top: 0;
	padding:10px 0;
    z-index: 1000;
	transition: .5s;
	background:#f3f5f7;
	display: flex;
	justify-content: space-evenly;
}
#page-header.scrolled {
	padding: 10px 20px;
	background: hsla(0,0%,100%,.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: -4px -4px 10px hsla(0,0%,100%,.7),4px 4px 10px rgba(163,177,198,.4);
	-webkit-border-radius: 0 0 8px 8px;
	-moz-border-radius: 0 0 8px 8px;
	border-radius: 0 0 8px 8px;	
}
#page-header h6 {
	margin: 10px 20px;
	padding: 0;
	flex-grow:1;
}
#account-flow, #account-win {
  padding: 0;
  margin: 10px 20px;
  font-size: 18px;
  line-height: 1.3em;
  font-weight:500;
  display:flex;
}
#account-flow p, #account-win p {
	padding:0;
}
#account-flow span, #account-win span {
	margin-left:25px;
	color:#4A68EC;
}
#account-win span {
	color:#00C853;
}
#account-flow span.dropdown {
	cursor:pointer;
	color:#E2E8F0;
	transition: .3s;
	position:relative;
}
#account-flow span.dropdown:hover {
	color:#4F5B76;
}
#account-transaction, #custom-filter-date, #custom-filter-sets {
	position:absolute;
	top: 22px;
	left: 0;
	margin: 0 !important;
	display: flex;
	transition: width 0.4s ease, height 0.4s ease;
	height:0;
	width:0;
	overflow:hidden;
	z-index:1001;
}
#account-transaction.open, #custom-filter-date.open, #custom-filter-sets.open, #custom-filter-sets.open {
	height:auto;
	width: max-content;
	box-shadow: -4px -4px 10px hsla(0,0%,100%,.7),4px 4px 10px rgba(163,177,198,.4);
	padding:8px 12px;
	overflow:visible;
	background:#E8F0FE;
}
#account-transaction label {
   font-size: 14px;
  line-height: 1.5em;
  margin-right: 25px;
}
#account-transaction input {
   font-size: 14px;
  line-height: 1.5em;
  margin-right: 25px;
  padding:0 8px;
  max-width:150px;
  width:150px;
}
#account-transaction input + input {
	width:80px;
}
#account-transaction span {
	margin:0;
	color:#1A1F36;
	transition:.2s;
}
#account-transaction span:hover {
	color:#FF3D00;
}
#custom-filter-date, #custom-filter-sets {
	top:28px;
	right:0;
	left:unset;
}
#custom-filter-date input {
   font-size: 14px;
  line-height: 1.5em;
  margin: 0 10px;
  padding:0 8px;
  max-width:150px;
  width:150px;
}


/* General */
#setting {
	display:none;
}
#setting.open {
	display:block;
}
#calculate-plan {
	flex-grow:1;
}
#quote-display {
	flex-grow:1; 
	min-width:100%;
	margin-bottom:30px;
}
#page-display h4 {
  margin: 0;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: 400;
}
#page-display h3 {
  line-height: 1em;
  margin: 20px 0;
  text-align:center;
}
#page-display h3 strong {
	display:block;
}
#calculate {
	width:100%;
	max-width:400px;
	padding:15px;
	border-radius:6px;
	margin:10px 5px;
	flex-grow:1;
}
#calculate textarea {
	padding: 5px;
	max-height: 40px;
}
#calculate input[type="text"] {
	padding: 0 8px;
	color:#4A68EC;
  margin: 0;
  border-bottom: 1px solid #1A1F36;
  background: none;
  text-align: right;
  text-transform:uppercase;
  max-width:100px;
}
 #calculate input[type="number"] {
	padding: 0 0 0 8px;
	color:#4A68EC;
  margin: 0;
  border-bottom: 1px solid #1A1F36;
  background: none;
  text-align: right;
  text-transform:uppercase;
  max-width:100px;
}
#calculate input[type="radio"] {
	width:14px;
	height:14px;
	margin-top:6px;
	cursor:pointer;
}
#calculate #radio2:checked {
  background-color: #FF3D00;
  border-color: #FF3D00;
}
#setting {
	opacity: 0;
  	transform: scale(0.2);
   	transition: opacity 0.4s ease, transform 0.4s ease, display 0.4s ease;
  	transition-behavior: allow-discrete; 
	background: #d7dee7;
}
#setting.open {
	opacity: 1;
  	transform: scale(1);
}
#setting .border-box {
	border-radius: 0;
	border-top:none;
}
#setting + .border-box  {
	border-top:none;
}
#calculateButton {
    width: 100%;
	display: block;
	margin: 0 auto;
	background: #546171;
	border:none;
	color: #ffffff;
	transition: 1s;
	padding:7px 11px;
	font-size:0.9em;
	box-shadow: -4px -4px 10px hsla(0,0%,100%,.7),4px 4px 10px rgba(163,177,198,.4);
	cursor:pointer;
}
#calculateButton:hover {
    background-color: rgb(73.1269035533,84.4441624365,98.3730964467);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,.1),inset -3px -3px 7px rgba(0,0,0,.0002);
}
#plan1 {
	width: 400px;
	padding:10px;
}
#plan2 {
	width: 400px;
	flex-grow:.8;
	padding:10px;
}
#trade_display_head {
	border: none;
  	padding: 10px 20px 0;
}
#trade_display_head .trade_row {
	background: #4A68EC;
  	border-radius: 7px 7px 0 0;
  	color: #fff;
}
#trade_display_body {
  	padding: 0 20px;
	border: none;
	display:block;
}
#trade_display_body .trade_row:first-of-type {
	border-radius:0;
}
#trade_display_head .trade_row {
	border: none;
	width:100%;
}
#trade_display_body .trade_row {
	width:100%;
}
#calender-stats-line, #dash-stats-header, #dash-trades {
	width:100%;
	padding:15px;
	margin-bottom: 25px;
}
#calendar-head {
	justify-content: space-between;
	display:flex;
	padding: 10px 40px 5px;
  	margin: 0;
}
#calendar-head h6 {
	margin:0;
}
#dash-stat-progress-bars {
	padding: 0 10px;
}
#dash-stats-header #plan1 {
	min-width: 250px;
	max-width: 400px;
	width:30%;
}
#dash-stat-win {
	max-width: 270px;
	width: 35%;
	margin-bottom: 25px;
}
#dash-stat-win .donut-chart {
	margin: 32px auto !important;
}
#dash-eq-chart {
	width: 94%;
  margin: 0 auto 25px;
}
#dash-trades .trade_row p {
  flex: 0 0 calc((100% - (2 * 3px)) / 12.5);
}
#dash-trades.statistics .trade_row p {
  flex: 0 0 calc((100% - (2 * 5px)) / 5);
  text-align:left;
}
#dash-trades.statistics .trade_row p:last-child {
	flex-grow:2;
}
#Trade-card {
	padding: 20px;
	width:40%;
	max-width:600px;
}
#Trade-card .progress-bar div {
	border:none;
	border-radius: 25px;
	padding: 4px;
}
#Holdtime {
	margin:0 15px;
	max-width:400px;
	width:70%;
}
#profitloss {
	margin-bottom:20px;
}
#Proform-bkdwn .flex-4 {
	flex:50%;
	max-width:700px;
}
#Proform-bkdwn .flex-7 {
	flex:50%;
}










#section_head {
    display:flex;
    justify-content: space-between;
}
#section_head h5 {
   color: #f5f5f7;
   margin: 0;
   padding: 0;
   display: inline-block; 
}
#section_head .stat-label {
    padding: 0;
  display: inline-block;
  font-size: 16px;
  margin: 0 10px;
}
#section_head .stat-label + input {
  font-size: 20px;
  margin: 0 15px 0 0;
  background: rgba(255,255,255,.03);
  color: #0083b7;
  border: none;
}
#section_head input::-webkit-outer-spin-button,
#section_head input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#section_head input[type=number] {
  -moz-appearance: textfield;
}

#filter-modal {
    position:absolute;
    top:0;
    left:0;
}
#filter-modal p {
    font-size: 13px;
    color: white;
    padding: 0;
}
#filter-modal input {
    padding: 2px 6px;
    max-width: 80px;
    margin: 0 3px;
}
#filter-modal form {
    margin-top: 12px;
    border-top: 1px solid;
    border-image: linear-gradient(to right, transparent, #424245 15%, #424245 85%, transparent) 1;
    display:block;
}
#day-metrics {
    display: flex;
}
#tradeModal {
  position: absolute;
  top: 0;
  right:0;
  min-width:25%;
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out;
  display: inline-block;
}
#tradeModal.active {
  transform: translateX(0);
}
#tradeModalBody, #stat-bars, #stat-bars div {
    padding:0;
}
#stat-bars {
    display:flex;
}


#saveQuoteButton {
 position: absolute;
  top: -60px;
  right: 0;
 background: rgba(0,0,0,.9);
 opacity: .4;
}

#saveQuoteButton:hover {
 opacity: 1;
}
#calc {
    background: #ffc72c;
}
#calc p {
    padding: 0 0 10px;
  line-height: 1.5em;
  font-size: 14px;
}
#calc select {
    border: none;
  min-width: 12ch;
  max-width: 15px;
  padding: .5em;
}
#calc input {
    border: none;
  min-width: 12ch;
  max-width: 15px;
  padding: .5em;
  line-height: 1em;
  display: block;
  font-size: 17px;
  text-align:center;
}
#calc textarea {
   border: none;
  padding: .5em;
  line-height: 1em;
  display: block;
  font-size: 17px;
  width: 95%;
  min-height: 200px;
}
#Trade-slideout {
	max-width:650px;
	position: absolute;
	right: 0;
	top: 0;
	min-height:100%;
	transition:1s;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 9999;
}
#Trade-slideout.open {
	transform: translateX(0);
	 visibility: visible;
}
#Trade-slideout .article-header + p {
	text-align:center;
	font-weight:600;
}
#Trade-slideout .article-header + p span {
	padding-left:25px;
}
#Trade-slideout .article-header + p span + span {
	font-size:.75em;
	color:#000;
	font-weight:500;
}
#Trade-slideout .article-header + p span.long {
	color:#009a44;
}
#Trade-slideout .article-header + p span.short {
	color:#d11a2a;
}
#tab-history h4 span {
	padding-left:25px;
}
#tab-history h4 + p span {
	padding:0 10px;
}
#tab-history h5, #tab-insight h5 {
	font-size:14px;
	margin:0;
}





/* Responsive Alterations */
/* Small Screen */
@media screen and (max-width: 1280px){
#page-header h6 {margin-left:10px;}
#account-flow, #account-win {font-size:15px;}
#page-header.scrolled {padding: 10px 6px;}
#account-flow, #account-win {margin: 10px 10px;}
#account-flow span, #account-win span {margin-left: 17px;}
#calculate {width:80%; min-width: 400px; max-width:800px;}
#plan1 {margin: 25px 0; width:30%; max-width:400px; min-width:300px;}
#plan2 {margin: 25px 0;}
#dash-stats-header { display:block;}
#dash-stats-header #plan1 {max-width: 390px; position: absolute; top: 246px; right: 5%; width: 40%; margin-right: 35px;}
#dash-stat-win { max-width:390px; width: 40%; margin: 15px 20px;}
#dash-stat-progress-bars {width:100%;}
#dash-stats-one {align-items: flex-start; flex-direction: column-reverse;width: 90%; margin: 0 auto;}
#dash-trades #trade_display_head {padding: 10px 0px 0;}
#dash-trades #trade_display_body {padding: 0;}
#dash-trades .trade_row p {flex: 0 0 calc((100% - (2 * 3px)) / 12);}
#Trade-card, #Holdtime {width:70%; margin-bottom:10px;}
#profitloss {flex: 2 58.33333%; position:relative;}


}
/* Large Tablet */
@media screen and (max-width: 1023px){
#sidebar {left: -250px;}
#sidebar.open {left:0;}
#page-display {margin-left: 0;}
#account-flow span, #account-win span {margin-left: 10px;}
#account-transaction {left: -800%;}
#page-header.scrolled {padding: 8px 0;}
#plan1 {margin: 25px 0; width:80%; max-width:800px; min-width:400px;}
#dash-trades .trade_row p {flex: 0 0 calc((100% - (2 * 3px)) / 11);}
#Proformance-breakdown {display:block;}
#Proformance-breakdown .equity-chart {margin-bottom:20px;}
#Proformance-bkdwn .performance-card {min-width: 40%;}
#Proform-bkdwn .flex-7 { flex:70%; max-width:700px;}
}
/* Small Tablet */
@media screen and (max-width: 767px){
#page-header {flex-wrap: wrap;}
#page-header h6 {width: 100%; text-align:center; margin:10px;}
#account-transaction, #custom-filter-date, #custom-filter-sets {top: -600px;justify-content: space-evenly;}
#account-transaction.open {left: -890%; top: 80px; width: 440px;}
#custom-filter-date.open {left: -538%; top: 38px; width: 440px;}
#custom-filter-sets.open {left: -1209%; top: 38px; width: 440px;}
#plan1 {width:80%; max-width:550px; min-width:400px;}
#calendar-head {padding: 10px 10px 5px;}
#dash-stats-header #plan1 {position: relative; top: 0; right: 0; width: 80%; margin: 10px auto;}
#dash-stat-win {max-width: 390px; width: 80%; margin: 10px auto;}
#dash-trades .trade_row p {flex: 0 0 calc((100% - (2 * 3px)) / 10);}
#Proformance-bkdwn .performance-card {min-width: 60%; max-width:400px;}
}
/* Cellphone */
@media screen and (max-width: 479px){
}