body {
    background-color: #DCDCDC;
}
h1 {
    font-size: 32px;
    font-family: 'Permanent Marker', cursive;
}
.modalDiv {
    text-align: center;
}
.topimg {
    margin-top: 20px;
}
.font-prim{
    font-family: 'Courier Prime', Courier, monospace;
}
.font-sec{
    font-family: 'Roboto', sans-serif;
}
.fab {
    color:#000;
    padding: 10px;
}
#menu{
    position: absolute;
    left:20px;
    top:15px;
    cursor: pointer;
}
.title{
    position: absolute;
    top:20px;
    width:188px;
    margin: 0px;
    text-align:center;
    left: calc(50% - 94px);
    line-height:32px;
}
.modal{
    display:none;
    height: 100%;
    width: 100%;
    z-index: 1; 
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgb(0,0,0,0.4); 
}
.modalclose{
    right:20px;
    font-size: 32px;
    margin:16px;
    font-weight: bold;
    cursor:pointer;
    color:white;
}
.modal.lock{
    display:block;
    height: calc(100% - 64px);
}
.modal-content{
    height: calc(80% - 64px);
    width: 70%;
    margin-top:64px;
    margin-left:auto;
    margin-right:auto;
    background-color: #E5E5E5;
    padding:24px;
}
.qrmdl {
    height: 320px;
    width: 320px;
}
#sidenav {
    height: 100%;
    width: 70%;
    max-width:304px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #FAFAFA;
    padding-top: 28px;
    padding-left: 24px;
    padding-right: 24px;
}
.sidenav_logo{
    height:25%;
    max-height:200px; 
}
.sidenav_logo > img{
    height:25%;
    max-height:200px;
    position:absolute;
    top:20px;
}
.intrologo {
    top: 80px;
    position: absolute;
    height: 170px;
    width: 170px;
}
.simplebtn{
    font-family: 'Courier Prime', Courier, monospace;
    font-size: 1.2em;
    text-align:center;
    padding:12px;
    margin: 14px;
    border: 1px solid black;
    border-radius: 10px;
    cursor:pointer;
    color: #000;
}
.simplebtn:hover{
    background-color:#f0f0f0;
}
.simplebtn:active{
    background-color:#F4C51D;
}
.settingLink {
    text-decoration: none;
}
#socialicons{
    position:fixed;
    bottom:28px;
    cursor:pointer;
}
#socialicons > i{
    margin:0 6px;
}
.center{
    display:flex;
    justify-content: center;
}
.perfectcenter{
    display:flex;
    justify-content: center;
    align-items: center;
}
.marketimg {
    position: relative;
    top: -20px;
    width: 200px;
    height: 200px;
}
#bottomnav{
    position:fixed;
    left:0;
    bottom:0;
    background-color:#000;
    color:#B0B0B0;
    width:100%;
    height:64px;
    display:flex;
}
.bottomnav_btn{
    font-size:12px;
    width: 25%;
    position:relative;
    cursor:pointer;
}
.bottomnav_btn > i{
    position:absolute;
    top:20px;
}
.bottomnav_btn.active{
    color:#fff;
}
.indicator{
    position:fixed;
    left:0;
    bottom:64px;
    width:100%;
    height:5px;
    background-color:black;
}
#indicator_bar{
    width:20%;
    border-top:5px solid #F4C51D;
    position:absolute;
    transition:0.3s;
}
.searchbar{
    border:1px solid #000;
    background-color:#E5E5E5;
    border-radius:10px;
    width: calc(100% - 29px);
    height: 33px;
    background-image: url('../assets/search.svg');
    background-position: 4px 7px;
    background-repeat: no-repeat;
    background-size: 18px;
    padding-left: 25px;
}
.searchbar > i{
    left:10px;
}
.searchbar > span{
    left:40px;
    width:228px; 
    font-size:14px;
}
.searchbar > i,span{
    position:absolute;
    line-height: 33px;
}
.section-prim{
    top:50px;
    left:0;
    bottom:86px;
    position:absolute;
    margin: 0 35px 0 35px;
    width:calc(100% - 70px);
}
.belt{
    width:100%;
    height:44px;
    background-color:#000;
    top:198px;
    left:0;
    margin:0;
    position:absolute;
    color:#fff;
    font-size:14px;
}
.belt > div{
    margin: 0 35px 0 35px;
}
.belt.grey{
    background-color: #C4C4C4;
    color:#000;
    margin-top: 50px;
}
.adrs{
    width:calc(100% - 287px);
    overflow: hidden;
    text-overflow: ellipsis;
    line-height:14px;
    margin: 0 7px;
}
.copyadrs, .qrcode{
    float:right;
    margin: 0 14px;
    cursor: pointer;
}
.market-sec {
    top:60px;
    left:0;
    bottom:86px;
    position:absolute;
    margin: 0 35px 0 35px;
    width:calc(100% - 70px);
    transition:0.2s;
}
.markets-icon {
    width: 28px;
    height: 28px;
}
.mkt-label {
    top: -4px;
}
.section-sec{
    top:258px;
    left:0;
    bottom:86px;
    position:absolute;
    margin: 0 35px 0 35px;
    width:calc(100% - 70px);
    transition:0.2s;
}
.section-sec.up{
    top:66px;
}
.section-sec.bitcoin{
    top: 328px;
}
.cardlist{
    margin: 18px 0 18px;
    width: 100%;
    height: calc(100% - 42px);
    left: 35px;
    top: 117px;
    overflow-y: auto;
}
.market-card {
    height: 72px;
    background-color:#E5E5E5;
    border-radius: 10px;
    border: 1px solid #E5E5E5;
    margin: 0 0 12px 0;
    cursor: pointer;
}
.card {
    height: 56px;
    background-color:#E5E5E5;
    border-radius: 10px;
    border: 1px solid #E5E5E5;
    margin: 0 0 12px 0;
    cursor: pointer;
}
.nft {
    height: 84px;
}
.card:hover {
    background-color: #F4C51D;
}
.marketcard_content {
    margin: 14px;
    height: 56px;
    position: relative;
}
.card_content {
    margin: 14px;
    height: 28px;
    position: relative;
}
.nft-content {
    margin: 21px;
    position: relative;
    height: 42px;
}
.card_icon{
    /* left:0px; */
    /* font-size:24px; */
    position:absolute;
}
.card_label{
    left:50px;
    font-size:1.2em;
    width: 67%;
    position:absolute;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nft-label {
    left: 80px;
    width: 90%;
    top: 5px;
}
.card_label.first{
    top:0px;
    line-height:21px;
}
.card_label.second{
    top:24px;
    font-size:0.83em;
    line-height:14px;
}
.card_end{
    right:0px;
    font-size:1em;
    position:absolute;
}
.nft-icon {
    height: 72px;
    width: 72px;
    left: -10px;
    bottom: 15px;
    position: relative;
    border-radius: 10px;
}
.emoji {
    position: relative;
    top: -4px;
    height: 32px;
    width: 32px;
    border-radius: 10px;
}
.tooltip{
    visibility: hidden;
    width: 120px;
    background-color:#F4C51D;
    color: #000;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 50%;
    margin-left: -60px;
    font-size:0.83em;
}
.tooltip.show{
    visibility: visible;
}
.purse{
    position: absolute;
    width: 298px;
    height: 171px;
    top: 90px;
    background: #303030;
    color:#fff;
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.purse .label{
    font-size: 14px;
    top:20px;
    left:94px;
    position:absolute;
}
.purse .amount{
    font-size: 32px;
    top:55px;
    text-align:center;
    width:240px;
    left:28px;
    position:absolute;
}
.tomelink {
    text-decoration: none;
}
.tomeicon {
    width: 28px;
    height: 28px;
    top: 9px;
    left: 9px;
}
.bsvicon {
    position: absolute;
    top: 9px;
    left: 12px;
    width: 28px;
}
#sendbsv{
    width:270px;
    position:absolute;
}
#page-one,#page-two,#page-three,#page-four{
    display:none;
}
.tomelink {
    text-decoration: none;
}
.tome-label {
    display: inline;
    top: -7px;
    position: relative;
}
.tomeicon {
    width: 32px;
    height: 32px;
    top: 0px;
    left: -7px;
    border-radius: 10px;
    position: relative;
}
@media only screen and (min-width: 992px) {
    #bottomnav,.indicator,.belt,.cardlist, #menu{
        max-width:calc(992px - 304px);
        left:calc(50% - 344px);
    }
    .market-sec, .section-prim, .section-sec{
        width:calc(992px - 70px - 304px);
        left:calc(50% - 344px);
    }
};