@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

html, body { height: 100%; padding: 0; margin: 0; }
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; }

body { color: #c3cddb; background: #151d27; line-height: 20px !important; font: 14px 'Poppins', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
p { line-height: 25px !important; font-size: 15px; opacity: .8; }
p strong { color: #fff; }
a { color: #fff; font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }
small { color: #c3cddb; font-weight: 300; }

h1, h2, h3 { color: #fff; margin: 20px 0 30px 0; }
h3 { margin: 20px 0; font-size: 16px; }

.clear { clear: both; }
.container { max-width: 1920px; padding: 0; margin: 0 auto; }
.page-container { max-width: 1000px; padding: 30px 0 50px 0; margin: 0 auto; }
.text-container { max-width: 1000px; padding: 30px 0 50px 0; margin: 0 auto; }
#flex-container { min-height: 100vh; display: flex; flex-direction: column; }

table.data { width: 100%; border-spacing: 0px 0px; border-collapse: separate; clear: both; }
table.data thead tr { padding-bottom: 20px; }
table.data thead tr th { border-bottom: 1px solid #303A46; padding: 15px 10px; margin: 0; font-weight: 300; font-size: 12px; }
table.data tbody tr td { color: #fff; line-height: 20px; padding: 15px 10px; margin: 0; text-align: center; }
table.data tbody tr:nth-child(even) td { background-color: rgba(255,255,255,.02); }
table.data tbody tr:nth-child(odd) td {  }

.align-left { text-align: left !important; }
.align-right { text-align: right !important; }
.align-center { text-align: center !important; }
.font-strong { font-weight: 600; }
.color-green { /*color: #0caf60;*/ color: #00a19c; }
.nowrap { white-space: nowrap; }
.noselect { user-select: none; -webkit-user-select: none; -ms-user-select: none; }

/*
 * BODY
 */

body { }
#body { padding: 70px 20px 0 20px; flex: 1; }

/*
 * HEADER
 */

#header { background-color: #12181F; height: 70px; padding: 20px 30px; position: fixed; top: 0; left: 0; right: 0; z-index: 99999; }
#header #logo { height: 30px; margin-right: 20px; float: left; }
#header #logo img { height: 30px; }

#header #menu { padding: 0; margin: 0; }
#header #menu li { padding: 0; margin: 0; list-style: none; float: left; }
#header #menu li a { height: 30px; line-height: 30px; padding: 0 10px; display: block; }

@media( max-width: 999px ) {
    #header { min-height: 70px; height: auto; }
    #header #logo { width: 140px; margin: 0 auto; float: none; }
    #header #account { position: absolute; top: 20px; right: 20px; }
    #header #mobile-menu { position: absolute; top: 20px; left: 20px; cursor: pointer; display: block !important; }
    #header #menu { padding-top: 20px; display: none; }
    #header #menu li { width: 100%; text-align: center; float: none; }
    #header #menu li a { height: 50px; line-height: 50px; text-transform: uppercase; }
}

/*
 * FOOTER
 */

#footer { background-color: #12181F; padding: 30px 20px; text-align: center; }
#footer a:hover img { opacity: .5; }
#footer small { opacity: .5; }

#footer #socials { width: 200px; height: 30px; margin: 0 auto 20px auto; }
#footer #socials a { width: 30px; height: 30px; margin: 0 5px; float: left; display: block; }
#footer #socials a img { width: 30px; height: 30px; display: block; }
#footer #socials a.disabled img { opacity: .3; cursor: default; }

#footer #developer { margin-bottom: 20px; }
#footer #developer img { height: 30px; }

#footer #footer-links { margin-bottom: 20px; }
#footer #footer-links a { font-weight: normal; }

#footer #copy { }

/*
 * HOME - LATEST SIGNALS
 */

#latest-signals { height: 250px; padding: 20px 0 20px 20px; margin: 0 -20px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
#latest-signals::-webkit-scrollbar { display: none; }
#latest-signals.active { cursor: grabbing; }
#latest-signals #signals { width: 3200px; white-space: nowrap; }
#latest-signals #signals .signal { background-color: #0B0E13; width: 300px; height: 210px; border-radius: 10px; padding: 20px; margin-right: 20px; float: left; }
#latest-signals #signals .signal .coin { margin-bottom: 20px; }
#latest-signals #signals .signal .coin a { font-weight: bold; display: inline-block; }
#latest-signals #signals .signal .coin img { height: 20px; border-radius: 50%; margin-right: 10px; display: block; float: left; }
#latest-signals #signals .signal .time { position: absolute; top: 20px; right: 20px; }
#latest-signals #signals .signal .chart { background-color: #151d27; background-size: contain; width: 260px; height: 130px; border-radius: 10px; }
#latest-signals #signals .signal .chart img { width: 260px; height: 130px; border-radius: 10px; }

/*
 * HOME - ACTIVITIES
 */

#activities { padding-bottom: 20px; }
#activities h3 { margin: 0 0 20px 0; }
#activities table { }
#activities table td.coin a { display: block; }
#activities table td.coin a:hover { text-decoration: none; opacity: .75; }
#activities table td.coin img { height: 40px; border-radius: 50%; margin: 0 10px; display: block; float: left; }
#activities table td.signal img { height: 40px; margin: 0 auto; display: block; }
#activities table td span.status { color: #ff5449; background-color: #322229; border-radius: 20px; padding: 10px 15px; display: inline-block; text-transform: capitalize; white-space: nowrap; }
#activities table td span.status.completed { /*color: #0caf60;*/ color: #00a19c; background-color: #1e2f2f; }
#activities table td span.status.sell_pending { color: #fb774a; background-color: #392f24; }

@media( max-width: 999px ) {
    #activities table th, #activities table td { display: none; }
    #activities table th.mobile, #activities td.mobile { display: table-cell; }
}

/*
 * COINS
 */

#page #coins { max-width: 1000px; }
#page #coins .coin { background-color: #0B0E13; border-radius: 10px; padding: 10px 15px 10px 10px; margin: 0 10px 10px 0; font-weight: bold; float: left; display: block; }
#page #coins .coin img { height: 20px; border-radius: 50%; margin-right: 10px; display: block; float: left; }
#page #coins .coin:hover { text-decoration: none; opacity: .5; }

/*
 * COIN
 */

#page.coin #chart { background-color: #0B0E13; border-radius: 10px; padding: 0 10px 20px 20px; margin-bottom: 20px; }

/*
 * SIGNALS
 */

#page.signals { }