/**
 * GrowBot Portfolio styles
 * 
 * @package GrowBot
 * @author  Alejandro Caballero - lava.caballero@gmail.com
 */

.mbot-wrapper .widget-contanier[data-widget-class="account_balances"] .content {
    white-space: nowrap;
    line-height: 34px;
    padding:     1px 0;
    width:       1px;
    overflow:    auto;
    overflow-y:  hidden;
    position:    relative;
}

.mbot-wrapper .widget-contanier[data-widget-class="account_balances"] .content .balances_container {
    width:       100%;
    line-height: 32px;
    height:      32px;
    margin:      0;
    padding:     0;
}

.mbot-wrapper .widget-contanier[data-widget-class="account_balances"] .content .mbot-balance-item {
    font-family:     "Arial Narrow", Arial, Arial, Helvetica, sans-serif !important;
    display:         inline-block;
    margin-right:    10px;
    border-radius:   2px;
    vertical-align:  top;
    text-decoration: none;
}

.mbot-wrapper .widget-contanier[data-widget-class="account_balances"] .content .mbot-balance-item.highlighted {
    color:            black;
    background-color: greenyellow;
}

.mbot-wrapper .widget-contanier[data-widget-class="account_balances"] .content .mbot-balance-item .info {
    display: inline-block;
    vertical-align: top;
}

.mbot-wrapper .widget-contanier[data-widget-class="account_balances"] .content .mbot-balance-item .symbol {
    font-family:    Arial, Arial, Helvetica, sans-serif !important;
    display:        inline-block;
    vertical-align: top;
    font-size:      32px;
}

.mbot-wrapper .widget-contanier[data-widget-class="account_balances"] .content .mbot-balance-item .info-item {
    display:        block;
    vertical-align: top;
    font-size:      12px;
    line-height:    16px;
    text-align:     right;
}

.mbot-wrapper .widget-contanier[data-widget-class="account_balances"] .content .mbot-balance-item .mbot-coin-balance {
    color:          green;
}

.mbot-wrapper .widget-contanier[data-widget-class="account_balances"] .content .mbot-balance-item .info-item.zeroed {
    color:       grey;
}

.mbot-wrapper .widget-contanier[data-widget-class="account_balances"] .content .all_balances_empty ,
.mbot-wrapper .widget-contanier[data-widget-class="account_balances"] .content .fetching_balances_bootstrap_message {
    text-align:  center;
    margin:      0 1px;
    height:      32px;
    line-height: 20px;
}

/* Coin wallet dialog */

.coin_balance_details .exchange h3  { text-transform: capitalize; }
.coin_balance_details ul li .value  { float: right; }

/* Portfolio items */

.mbot-wrapper .widget-contanier[data-widget-class="portfolio"] .content {
    background-color: transparent;
    border:           none;
    box-shadow:       none;
    padding:          0;
    border-radius:    0;
}

.mbot-wrapper .portfolio-item {
    width:           100%;
    flex-grow:       0;
    flex-shrink:     0;
    
    display:         flex;
    flex-direction:  row;
    flex-wrap:       nowrap;
    justify-content: flex-start;
    align-items:     stretch;
    align-content:   stretch;
    
    margin-bottom:   10px;
}

.mbot-wrapper .portfolio-item .icon     { display: inline-block; }
.mbot-wrapper .portfolio-item .icon img { width: 90px; margin-right: 10px; }

@media all and (max-width: 640px) {
    .mbot-wrapper .portfolio-item .icon img { width: 60px; }
}

.mbot-wrapper .portfolio-item .details {
    flex-grow:        1;
    flex-shrink:      1;
    /*width:            calc(100% - 100px);*/
    background-color: white;
    border:           1px solid silver;
    box-shadow:       3px 3px 3px lightgrey;
    border-radius:    5px;
}

.mbot-wrapper .portfolio-item .details .title {
    font-size:        1.4em;
    background-color: lightskyblue;
    border-bottom:    1px solid silver;
    padding:          5px;
}

.mbot-wrapper .portfolio-item.empty { display: none; }

.mbot-wrapper .portfolio-item.empty .details .title {
    background-color: silver;
}

.mbot-wrapper .portfolio-item .breakdown .wallet-item            { padding: 5px 0 0 0; margin-bottom: 5px; border-bottom: 1px solid silver; }
.mbot-wrapper .portfolio-item .breakdown .wallet-item:last-child { margin-bottom: 0; border-bottom: none; }

.mbot-wrapper .portfolio-item .wallet-item[data-exchange="@total"] {
    background-color: whitesmoke;
    color:            mediumblue;
}

.mbot-wrapper .portfolio-item .wallet-item .exchange-name       { padding: 0 5px 5px 5px; }
.mbot-wrapper .portfolio-item .wallet-item .exchange-name .name { text-transform: capitalize; font-size: 1.2em; }

.mbot-wrapper .portfolio-item .wallet-item .balances {
    display:          flex;
    text-align:       right;
    white-space:      nowrap;
    
    flex-direction:   row;
    flex-wrap:        wrap;
    justify-content:  flex-end;
    align-items:      stretch;
    align-content:    flex-end;
}

.mbot-wrapper .portfolio-item .balances > div              { white-space: nowrap; flex-grow: 1; flex-shrink: 1; margin: 5px; }
.mbot-wrapper .portfolio-item .balances > div .caption     { display: inline-block; font-size: 0.9em; color: darkgrey; }
.mbot-wrapper .portfolio-item .balances > div .value       { display: inline-block; }
.mbot-wrapper .portfolio-item .balances > div .value.empty { color: lightgrey; }

/* Filtering */

.filtering_tool .filtering_list        { display: flex; width: calc(100vw - 21px);
                                         gap: 10px; padding: 5px; justify-content: stretch; }
.filtering_tool .filtering_list > span { vertical-align: top; display: inline-block; white-space: nowrap;
                                         text-align: center; cursor: pointer;
                                         overflow: hidden; text-overflow: ellipsis;
                                         padding: 5px; margin: 0; border: none; }

.filtering_tool .filtering_list .framed_content  { margin: 0; }
.filtering_tool .filtering_list .exchange_item   { margin: 0; flex-basis: min-content; flex-shrink: 1; flex-grow: 1; }
.filtering_tool .filtering_list .all_exchanges   { flex-basis: unset; flex-shrink: 0; width: 40px; }

.filtering_tool .filtering_list .caption { overflow: visible; cursor: auto; }

.filtering_tool .filtering_list .asset_filter               { position: relative; overflow: visible; }
.filtering_tool .filtering_list .asset_filter input         { width: 132px; padding-right: 32px; }
.filtering_tool .filtering_list .asset_filter .clear_filter { position: absolute; right: 0; top: 0.1em; }

.mbot-wrapper[data-layout="large-landscape"] .filtering_tool .filtering_list { width: calc(100vw - 126px); }
.mbot-wrapper[data-layout="small-landscape"] .filtering_tool .filtering_list { width: calc(100vw - 101px); }