* {box-sizing:border-box;}

a {text-decoration:none; color:inherit;}

html {height:100%;}

body {margin:0; height:100%; /*padding:2rem 0;*/ font-family:Arial,sans-serif; font-weight:100;}
body {background-color:#000e;}



div#container {background-color:#010101; color:#FFF; max-width:400px; margin:0 auto; /*padding:1rem 0;*/ user-select:none;}
div#container {display:flex; flex-direction:column-reverse; height:100%;}
div#container nav {flex: 0 0 auto;}
div#container div.container {flex: 1 1 auto; overflow-y:hidden;}



div#container nav {/*height:4rem;*/ padding:0 1.75rem;}
div#container nav ul {list-style:none; padding:0; margin:0;}
div#container nav ul {display:flex; flex-direction:row; justify-content:space-between;}
div#container nav li {flex: 1 1 auto; text-align:center; cursor:pointer; padding:1rem;}
div#container nav li {color:#717171;}
div#container nav li.active {color:#FFF;}
div#container nav li svg {font-size:1.5rem; display:inline-block;}
div#container nav li label {display:block; font-size:.5em; display:none;}



div#container div.container {/*height:100%;*/ display:none;}
div#container div.container.active {display:flex; flex-direction:column;}

div#container div.container header {flex: 0 0 auto; height:3rem; padding-top:.5rem; font-weight:100; font-size:.85rem; opacity:1; transition:.2s opacity;}
div#container div.container header {display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; /*border-bottom:1px solid #0004;*/}
div#container div.container header.gone {opacity:0;}

div#container div.container main {flex: 1 1 auto;}
div#container div.container main {overflow-y:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;}
div#container div.container main {scrollbar-width:none; -ms-overflow-style:none;}
div#container div.container main section,
div#container div.container main section.headBox {padding:0 1.75rem;}
div#container div.container main section h1,
div#container div.container main section h2 {font-weight:100; margin:0 0 .25rem;}
div#container div.container main section ul {list-style:none; padding:0; margin:0;}




div#container div#portfolio header div.subtitle {color:#4D585D; font-size:.75rem}
div#container div#portfolio header div.title::before {content:'$';}

div#container div#portfolio main section {/*flex: 1 1 auto;*/ /*border:.5px solid #00F8;*/}

div#container div#portfolio main section.headBox {display:flex; flex-direction:row; justify-content:space-between;}
div#container div#portfolio main section.headBox h1 {line-height:2rem;}
div#container div#portfolio main section.headBox h1 div.totalAmount::before {content:'$';}
div#container div#portfolio main section.headBox div.freeBtn {}
div#container div#portfolio main section.headBox div.freeBtn button {padding:.35rem 1rem; border:0 none; border-radius:100px; color:inherit;}
div#container div#portfolio.up main section.headBox div.freeBtn button {background-color:#021405; color:#01C226;}
div#container div#portfolio.dn main section.headBox div.freeBtn button {background-color:#021405; color:#FF4822;}
div#container div#portfolio main section.headBox div.freeBtn button svg {margin-right:.15rem; position:relative; top:1px;}

div#container div#portfolio main section.arrowBox {font-size:.75em; padding:0 1.75rem; margin-top:1rem;}
div#container div#portfolio main section.arrowBox div span {display:inline-block; margin-right:.15em;}
div#container div#portfolio main section.arrowBox div.up span.c {color:#01C226; font-weight:600;}
div#container div#portfolio main section.arrowBox div.dn span.c {color:#FF4822; font-weight:600;}
div#container div#portfolio main section.arrowBox div.dn span.icon {transform:rotate(180deg);}

div#container div#portfolio main section.chartBox {height:10rem; background-color:#00000008; margin-top:1rem; padding:0;}
div#container div#portfolio main section.chartBox {position:relative;}
/*div#container div#portfolio main section.chartBox:before {width:100%; height:100%; display:block; content:''; background-color:#000;}*/

div#container div#portfolio main section.chartTimer {display:flex; flex-direction:row; justify-content:space-between; font-size:.65em;}
div#container div#portfolio main section.chartTimer {padding:1rem 1.75rem;}
div#container div#portfolio main section.chartTimer div.time {font-weight:600; padding:.5em .75em; background-color:#FFFFFF01; border-radius:.35rem; cursor:pointer;}
div#container div#portfolio.up main section.chartTimer div.time {color:#01C226;}
div#container div#portfolio.dn main section.chartTimer div.time {color:#FF4822;}
div#container div#portfolio main section.chartTimer div.time.active {color:#010101;}
div#container div#portfolio.up main section.chartTimer div.time.active {background-color:#01C226;}
div#container div#portfolio.dn main section.chartTimer div.time.active {background-color:#FF4822;}

div#container div#portfolio main section.bpBox {padding:0 1.75rem; font-size:.75rem;}
div#container div#portfolio main section.bpBox div.inner {display:flex; flex-direction:row; justify-content:space-between; padding:1rem 0; border-top:1px solid #15181C;}
div#container div#portfolio main section.bpBox label {display:flex; flex-direction:row; align-items:center;}
div#container div#portfolio main section.bpBox div#amtBtn {display:flex; flex-direction:row;}
div#container div#portfolio main section.bpBox span#amount {display:flex; flex-direction:row; align-items:center;}
div#container div#portfolio main section.bpBox span#amount:before {content:'$';}
div#container div#portfolio main section.bpBox span.arrow {color:#4d5866; padding-left:.5rem; font-size:1.45em;}

div#container div#portfolio main section#newsBox {padding:.45rem .5rem; height:12rem; background-color:#15181C; position:relative;}
div#container div#portfolio main section#newsBox div.inner {width:100%; height:100%; position:relative;}
div#container div#portfolio main section#newsBox div.inner div.item {width:100%; height:100%; padding:1rem; background-color:#010101;}
div#container div#portfolio main section#newsBox div.inner div.item {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
div#container div#portfolio main section#newsBox div.inner div.item {display:flex; flex-direction:column;}
div#container div#portfolio main section#newsBox div.inner div.item > div {padding-top:.5em;}
div#container div#portfolio main section#newsBox div.inner div.item div.head {flex: 0 1 auto; display:flex; flex-direction:row; justify-content:flex-start; color:#4D585D; font-size:.75em;}
div#container div#portfolio main section#newsBox div.inner div.item div.head div {margin-right:.5em;}
div#container div#portfolio main section#newsBox div.inner div.item div.title {flex: 1 1 auto; text-transform:capitalize; line-height:1.5rem; font-size:1.15rem;}
div#container div#portfolio main section#newsBox div.inner div.item div.cta {flex: 0 1 auto; display:flex; justify-content:flex-start; align-items:center; font-size:.75em;}
div#container div#portfolio.up main section#newsBox div.inner div.item div.cta {color:#01C226; font-weight:600;}
div#container div#portfolio.dn main section#newsBox div.inner div.item div.cta {color:#FF4822; font-weight:600;}
div#container div#portfolio main section#newsBox div.inner div.item div.cta svg {margin-left:.25em;}
div#container div#portfolio main section#newsBox div#counter {position:absolute; top:0; right:0; border-radius:10rem; color:#FFF; font-size:.75rem; padding:.5em .75em; min-height:2.25em; min-width:2.25em;}
div#container div#portfolio.up main section#newsBox div#counter {background-color:#01C226}
div#container div#portfolio.dn main section#newsBox div#counter {background-color:#FF4822}
div#container div#portfolio main section#newsBox div#counter div#count {/*position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);*/}

div#container div#portfolio main section#stocksBox {padding:1rem 1.75rem;}
div#container div#portfolio main section#stocksBox li {border-bottom:.5px solid #15181C;}
div#container div#portfolio main section#stocksBox li {display:flex; flex-direction:row; justify-content:space-between; padding:1.25rem 0;}
div#container div#portfolio main section#stocksBox li div.comp {flex:0 1 auto; width:29%; /*text-align:center;*/ border-radius:.35rem;}
div#container div#portfolio main section#stocksBox li div.comp.ch {background-color:#FFFFFF08;}
div#container div#portfolio main section#stocksBox li div.comp div.symbol {}
div#container div#portfolio main section#stocksBox li div.comp div.shareCount {color:#6D7980; color:#4D585D; font-size:.75em;}
div#container div#portfolio main section#stocksBox li div.comp div.shareCount::after {content:' shares';}
div#container div#portfolio main section#stocksBox li div.comp div.displayData {border-radius:.35rem; color:#010101; font-weight:100; width:100%; height:100%;}
div#container div#portfolio main section#stocksBox li div.comp div.displayData {display:flex; justify-content:center; align-items:center;}
div#container div#portfolio main section#stocksBox li.up div.comp div.displayData {background-color:#01C226;}
div#container div#portfolio main section#stocksBox li.dn div.comp div.displayData {background-color:#FF4822;}
div#container div#portfolio main section#stocksBox li div.comp div.displayData:before {content:'$';}


div#container div#cash {}
div#container div#cash header {}
div#container div#cash main {}


div#container div#search {}
div#container div#search header {}
div#container div#search main {}


div#container div#messages {}
div#container div#messages header {}
div#container div#messages main {}


div#container div#account {}
div#container div#account header {}
div#container div#account main {}



div#container.open {background-color:#FFF; color:#010101;}

div#container.open div.container header div.subtitle {color:#636C72;}

div#container.open div#portfolio.up main section.headBox div.freeBtn button {background-color:#E2F8E3;}
div#container.open div#portfolio.dn main section.headBox div.freeBtn button {background-color:#FFEAE2;}

div#container.open div#portfolio main section.chartTimer div.time.active {color:#FFF;}

div#container.open div#portfolio main section.bpBox div.inner {border-top-color:#F3F5F9;}

div#container.open div#portfolio main section#newsBox {background-color:#F3F5F9;}
div#container.open div#portfolio main section#newsBox div.inner div.item {background-color:#FFF;}

div#container.open div#portfolio main section#stocksBox li {border-bottom-color:#F3F5F9;}
div#container.open div#portfolio main section#stocksBox li div.comp.ch {background-color:#00000008;}
div#container.open div#portfolio main section#stocksBox li div.comp div.displayData {color:#FFF;}


div#container.open nav li {color:#989898;}
div#container.open nav li.active {color:#010101;}