body {
    color: #333 !important;
    background-color: #eee;
    width: 100vw;
    height: 100vh;
    margin: 0;
}

body * {
    font-family: 'Roboto', sans-serif;
}

a {
    text-decoration: none;
}

i {
    vertical-align: middle;
}

@-moz-document url-prefix() {
    #countNext {
        margin-left: -60px !important;
        height: 60px !important;
    }

    .charts {
        max-width: 370px !important;
    }
}

/* Preloader */

.js div#preloader { 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    background: #333 url('/ui/images/loading.gif') no-repeat center center; 
}

.js div#offlineWallet { 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    background: #333 url('/ui/images/loading.gif') no-repeat center center; 
    color: #fff;
    text-align: center;
    line-height: 100vh;
}

.js div#offlineWallet span {
    background-color: #333;
}

/* Header */

.mdl-layout-title i,
.mdl-layout-title span,
.mdl-layout-title a {
    color: #fff;
    vertical-align: middle;
}

.is-focused .mdl-textfield__expandable-holder,
.is-dirty .mdl-textfield__expandable-holder {
    padding-right: 10px;
    padding-left: 5px;
}

.mdl-textfield__expandable-holder {
    background-color: #eee;
    color: #333;
}

.mdl-layout__header {
    background-color: #000 !important;
}

.mdl-layout__drawer-button,
.mdl-layout__header,
.mdl-layout__header-row {
    min-height: 40px !important;
    height: 40px !important;
}

.mdl-layout__drawer-button {
    margin: 0 !important;
    line-height: 40px !important;
}

.mdl-layout__header-row {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.headerDetails {
    color: #eee;
    font-size: 13px;
    font-weight: 500;
    text-align: right;
    margin-left: 20px;
}

.vertDivider {
    border-right: 1px solid #333;
    width: 10px;
    height: 100%;
}


/* Main Menu */

.mdl-button-group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding-left: 20px;
    z-index: 2;
}
    /* 5f9cc7 */
.mdl-button-group button {
    background-color: #eee;
    color: #333;
    font-weight: 400;
    display: inline-block;
    float: left;
    margin: 0px;
    box-shadow: none;
    border-radius: 0px;
    text-transform: none;
}
    
.mdl-button-group button:hover {
    background-color: #5f9cc7;
    color: #fff;
}

/* Page */

#page-content {
    padding: 10px;
}

/* Error Box */

.errorBox {
    color: #a94442;
    background-color: #f2dede;
    border-top: 1px solid #ebccd1;
    border-bottom: 1px solid #ebccd1;
    height: 35px;
    line-height: 35px;
}

.errorBox i {
    margin-left: 20px;
    margin-right: 5px;
    font-size: 30px;
    vertical-align: middle;
}

.errorBlockBox {
    color: red !important;
}

/* Table */

.mdl-data-table {
    white-space: normal !important;
    margin-right: 10px;
    margin-bottom: 10px !important;
}

.slimTable {
    max-width: 350px;
}

.mainTable {
    width: 100%;
}

.mdl-data-table td {
    font-size: 12px;
    padding: 0 18px !important;
}

.mdl-data-table tr,
.mdl-data-table tr td {
    height: 40px !important;
}

.mdl-data-table a {
    font-weight: normal;
}

.tbHeader {
    /* background-color: #5f9cc7; */
    color: #555 !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    padding-bottom: 5px !important;
}

.tbAssetHeaderDiv {
    margin-top: 17px;
}

.tbHeaderDiv i {
    font-size: 30px;
}

.tbHeaderDiv {
    color: #555 !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    display: block !important;
    line-height: 32px !important;
}

.tableDiv {
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
}

.scrollDiv {
    flex-wrap: wrap;
}

.mdl-data-table td.longTd {
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.longTd {
    min-width: 250px;
}

.dateTd {
    min-width: 100px;
}

.mdl-data-table tr.focusedTr td a,
.mdl-data-table tr.focusedTr {
    background-color: #5f9cc7 !important;
    color: #fff !important;
}

.mdl-data-table tr td .mdl-data-table {
    display: table-cell;
}

.blockExpand {
    cursor: pointer;
    font-size: 20px !important;
}

#transactionsTableBody .mdl-chip {
    background: none !important;
}

#transactionsTableBody .mdl-chip .mdl-chip__contact {
    height: 16px !important;
    width: 16px !important;
    line-height: 16px !important;
}

tr[id^=blockDetails] td,
tr[id^=accountDetails] td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Transactions Type Menu */

.txTypeMenu button {
    font-size: 12px;
    height: 24px;
    line-height: 24px;
}

.txTypeMenu button.active {
    background-color: #5f9cc7;
    color: #fff;
}

/* Loader */

.mdl-progress {
    width: 100% !important;
}

.mdl-progress .progressbar {
    background-color: rgb(255,64,129) !important;
}

.loaderDiv {
    min-height: 4px;
}

/* Header Elements */

#blockBox {
    margin-right: 10px;
}

#inBlock {
    color: lightgreen;
}

/* Tooltip */

.mdl-tooltip {
    text-align: left !important;
}
.mdl-tooltip--large {
    z-index: 99999;
}

.underText {
    cursor: pointer;
}

/* Monitor */

.inMonitor {
    flex: none !important;
}

.poolsDiv .mdl-card {
    width: 100%;
}

.poolsDiv .mdl-card .mdl-card__supporting-text {
    overflow-y: auto;
    max-height: 590px;
    width: auto !important;
    padding: 0 !important;
}

.poolsDiv .mdl-card .mdl-card__supporting-text table {
    width: 100%;
}

.poolsTable {
    width: 100% !important;
    min-width: 350px;
}

.colDiv {
    flex-direction: column !important;
}

@media screen and (min-width: 1090px) {
    .poolsDiv {
        flex: 1;
        flex-grow: 1;
    }

    .charts1st {
        flex: 1;
        flex-grow: 1;
    }

    .charts {
        text-align: center;
    }
}

.dropAssets {
    display: none !important;
}

.smallAssetTable {
    display: none !important;
}

.mobAliasTable {
    display: none !important;
}

@media screen and (max-width: 1305px) {
    .removeLarge {
        display: none !important;
    }
}

@media screen and (max-width: 1089px) {
    .removeMedium {
        display: none !important;
    }

    .dropAssets {
        display: flex !important;
    }

    .mobAliasTable {
        display: table !important;
    }

    #asset-content {
        max-width: calc(100% - 20px) !important;
    }

    .mdl-data-table {
        width: 100% !important;
    }

    .goodSide {
        display: none !important;
    }
}

@media screen and (max-width: 1024px) {
    .mdl-layout-title {
        margin-left: 40px !important;
    }
}

@media screen and (max-width: 800px) {
    .removeSmall {
        display: none !important;
    }

    .smallAssetTable {
        display: table !important;
    }
}

.dropAssets .mdl-menu__container {
    overflow-y: scroll;
    width: 50% !important;
    height: 300px !important;
}

.dropAssets .mdl-menu__outline {
    width: 100% !important;
}

.dropAssets ul.mdl-menu {
    width: 100% !important;
    clip: rect(0px 126.922px 100% 0px) !important;

}

@media screen and (max-width: 550px) {
    .removeTiny {
        display: none !important;
    }
}

@media screen and (min-width: 711px) and (max-width: 1089px) {
    .poolsDiv {
        flex: 1;
    }

    .charts1st {
        flex: 1;
        max-width: 50%;
    }

    .charts {
        flex: 1;
        text-align: center;
        max-width: 50%;
    }
}


@media screen and (max-width: 710px) {
    .poolsDiv {
        flex: 1;
        order: 3;
    }

    .charts1st {
        flex: 1;
        order: 2;
    }

    .charts {
        flex: 1;
        text-align: center;
        order: 1;
    }

    .mdl-layout-title span {
        display: none !important;
    }
}

.poolsDiv .mdl-data-table {
    border: none !important;
}

.flip-clock-divider .flip-clock-label {
    display: none !important;
}

.charts1st .mdl-card,
.charts .mdl-card {
    width: 100% !important;
    margin-bottom: 10px;
}

.realTimeInfo {
    min-height: 50px !important;
}

.realTimeInfo .mdl-card__supporting-text {
    text-align: center;
    font-size: 25px;
    line-height: 25px;
    font-weight: 700;
    width: auto !important;
}

#todayBlocks {
    color: #16a765;
}

#lastBlock {
    color: #ff7537;
}

#countNext {
    display: inline-block;
    width: 460px;
    zoom: .6;
    -moz-transform: scale(0.6);
    -moz-transform-origin: 60% 0;
    transform-origin: 60% 0;
}

/* Assets */

.assetSearchDiv {
    width: 130px !important;
}

#asset-content .mdl-data-table tr td {
    width: 100% !important;
    padding: 5px !important;
}

#asset-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px;
    border: 1px solid rgba(0,0,0,.12);
    background-color: #fff;
    flex-wrap: wrap;
    max-width: calc(100% - 280px);
}

#asset-content .rowDiv {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#asset-content .rowDiv div {
    margin: 5px;
    flex: 1;
    width: max-content;
    display: flex;
}

#asset-content .canvasDiv {
    width: 100% !important;
}

.insideChart {
    width: 50% !important;
}

.assetScrollTable {
    width: 250px;
}

.scrollTable {
    width: 100%;
}

.assetScrollTable thead tr,
.scrollTable thead tr {
    display: table;
    width: 100%;
}

.tbHeader div {
    width: auto !important;
}

.assetScrollTable thead,
.assetScrollTable tbody,
.scrollTable thead,
.scrollTable tbody {
    display: block;
}

.assetScrollTable tbody tr {
    display: grid;
}

.assetSide tbody tr {
    height: 85px !important;
}

.assetSide tbody tr td {
    padding-top: 15px !important;
}

.assetScrollTable tbody tr td {
    border-collapse: collapse;
    border-bottom: none !important;
}

.assetScrollTable tbody {
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.scrollTable tbody {
    height: 370px;
    overflow-y: auto;
}

.assetDiv {
    flex-wrap: nowrap !important;
}

/* Amounts */

.smallNumber {
    font-size: 10px;
}

/* Goods */

.goodSide tbody tr td {
    padding-top: 10px !important;
}

#good-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: wrap;
}

#good-content .mdl-card {
    margin: 10px;
    width: 310px;
}

#goodsDiv {
    display: flex;
    flex-wrap: wrap;
}

.goods .mdl-card__actions {
    color: #333;
}

.goods .flexText,
.goods  .mdl-card__supporting-text {
    word-wrap: break-word;
    width: auto;
}

.goods .mdl-card--border {
    border-bottom: 3px solid rgba(0,0,0,.1) !important;
}

.goods  .flexText {
    flex: 1;
}

.goods .mdl-card__title-text {
    display: inline-block;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    color: #333;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
}

.goods .goodPrice {
    margin-right: 40px;
    padding-left: 5px;
}

.goods .buyActionCard {
    width: auto;
    position: absolute;
    background-color: #ff4081 !important;
    color: #fff !important;
    right: 0;
    top: 0;
    height: 100%;
}

.goods h5 {
    margin: 0 !important;
    padding: 0 !important;
}

.goods .mdl-chip {
    height: 20px !important;
    line-height: 20px !important;
}

.goods .mdl-chip__text {
    font-size: 10px !important;
}

.goods .priceActionCard {
    background-color: #fff !important;
    color: #444 !important;
    font-weight: bold !important;
    text-align: center;
    position: absolute;
    width: auto;
    border-radius: 0 0 0 5px;
    right: 0;
}

.numGoods {
    padding: 10px;
    padding-top: 22px;
}

#goodImg {
    width: 100%;
}

.mdl-card.goods .mdl-chip .mdl-chip__text a {
    color: #666;
}

/* Aliases */

.aliasDiv {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-wrap: wrap;
}

/* Footer */

footer {
    border-top: 1px solid #ddd;
}

.footerAlignRight {
    font-size: 12px;
    padding-right: 5px;
}

/* Globe */

#globe {
    background: url('/ui/images/backglobe.jpg') no-repeat center center;
    width: 100vw !important;
    height: calc(100vh - 120px) !important;
}

#globe canvas {
    width: 100% !important;
    height: 100% !important;
}

/* General */

tr[id^=accountDetails] td,
tr[id^=blockDetails] td,
tr[id^=transactionDetails] td {
    padding: 10px !important;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.hide {
    display: none !important;
}

.bold,
.bold * {
    font-weight: 500 !important;
}

.alignCenter {
    text-align: center;
}

.margin5 {
    margin: 5px;
}

.blueColor {
    color: rgb(95, 156, 199);
}