/* 
    Created on : Feb 18, 2023, 1:40:24 PM
    Author     : jeff
*/
#coinwatch_credits{
    display:inline;
}
#no_results{
    display:block;
    padding:1em;
    text-align:center;
    font-size:1.5em;
    display:none;
}
#no_results .new_coin_button{
    display:inline;
    float:none;
}
.flex_row{
    display:flex;
    flex-grow:1;
}
.flex_row > *{
    flex-grow:1;
}
#field_search{
    border-radius: 3px 0  0 3px;
}
.clear_input{
    border-radius:0 3px 3px 0;
    margin-left:-1px;
    border:2px solid #fff;
}
#portfolio_results{
    display:flex;
    flex-wrap:wrap;
    flex-shrink:1;
    flex-grow:1;
    flex-direction:row;
    gap:.250rem;
    flex-basis: 20%;
    padding:0 .5em  .5em .5em;
    justify-content:center;
    align-items:start;
    background-color:var(--list_line_odd);
}

.flex_row > div.image{
    display:flex;
    height:50px;
    max-width:50px;
    flex-shrink:1;
    flex-grow:0;
    margin-right:.5em;
    justify-content:center;
    align-items:center;
}
.flex_row > div.name{
    display:flex;
    text-align: left;
    align-items:center;
    font-weight:bold;
    flex-grow:1;
}
.flex_row > div.name >div.name{
    flex-grow:1;
    flex-shrink: 1;
    text-overflow:hidden;
}
div.code{
    font-size:.75em;
}
/* RESULT LINES */
.result_line{
    display:flex;
    text-overflow: "";
    overflow:hidden;
    flex-basis:200px;

    flex-direction:column;
    flex-grow:1;
    flex-shrink:1;
    background-color:var(--list_line_even);
    width:200px;
    flex-wrap:nowrap;
    gap:.250rem;
    align-items: start;
}

.result_line > div{
    overflow:hidden;
    padding:0  .5em ;
    line-height:20px;
    box-sizing: border-box;
    flex-grow:1;
    flex-shrink:1;
    flex-wrap:nowrap;
    width:100%;
    border:1px solid transparent;
}

.result_line > div{
    text-shadow:0 0 0 .25em rgba(0,0,0,1);
}

.result_line:not(#totals_results):hover,
.result_line.chosen{
    background-color:var(--select_hover) !important;
    cursor:pointer;
}
.result_line  div.up{
    background:#1a3a3a!important;

    box-shadow: 0 0 .05em #000;
}

.result_line  div.down{
    background:#5a2a3a !important;
    box-shadow: 0 0 .05em #000;
}
.result_line  div.up h6{
    color:#fff;

}
.result_line  div.down h6{
    color:#fff;

}
.result_line   span.up{
    color:rgba(150,200,150,1);

}
.result_line  span.down{
    color:rgba(255,200,200,1);

}
body:not(.no_animations) .result_line  div{
    transition:background 30s ease-in-out;
}
body:not(.no_animations) .result_line h6{
    transition:color 30s ease-in-out;
}
body:not(.no_animation) .result_line  div.up,
body:not(.no_animation) .result_line  div.down,
body:not(.no_animation) .result_line   span.up,
body:not(.no_animation) .result_line  span.down{

    transition:all .25s ease-in-out;

}
.result_line  .image,
.result_line  .chart{
    display:flex;
    align-items: center;
    justify-content: center;
    height:75px;
    padding:0 !important;
    text-align:center;
    transition:all 0s;
}
.result_line  .image{
    height:50px;
}
.result_line  .image img{
    height:35px;
}
.result_line  .chart{
    height:100%;

}
.result_line  .chart img{
    height:auto;
    width:100%;
    max-width:100%;
    height:100px;
}
.result_line  .chart h6{
    display:none;
}
.result_line  .name{
    align-items: center;
    text-align:center;
    flex-grow:1;
    white-space: nowrap;
}
.result_line div.edit_invest{
    position:relative;
    margin-top:-40px;
}
.result_line .edit_invest{
    text-align:right;
}
.result_line:not(:hover) .coin_invest button{
    background-color:rgba(100,100,150,.5);
}
.search_result_line  div.categories{
    flex-grow:1;
    line-height:11px;
    font-size:11px;
    text-align:right;
    align-items:flex-end;
    justify-content: right;
    padding:.5em .5em .5em 0;
    color:rgba(255,255,255,.8);
    font-style:italic;
}
.result_line span.money{
    font-family: monospace;
}
.result_line  span.money::before{
    content:'$';
    color:#aaaaff;
    position:relative;
    top:-.25em;
    font-size:.75em;
}
.result_line  span.percent::after{
    content:'%';
    color:#aaaaff;
    position:relative;
    top:-.25em;
    font-size:.75em;
}
.modal input::placeholder{
    font-size:.5em;
}
.result_line h6{
    display:block;
    font-size:12px;
    font-variant: small-caps;
    color:#aaaaff;
    line-height:12px;
    margin:0;
    padding:0 0 .125em 0;
}
.result_line > div.name > h6,
.result_line > div.image > h6{
    display:none;
}

/* SEARCH RESULT LINE SPECIFIC */

.search_result_line.result_line{
    flex-direction: row;
    align-items: center;
    gap:.250rem;
    padding:0 .5em 0 0;
    border-radius:0;
    max-width:none;
    width:100%;
}
.search_result_line.result_line >div{
    flex-grow:0;
    flex-shrink:0;
    width:100px;
    flex-grow:1;
    text-align:left;
}
.search_result_line.result_line:nth-child(odd){
    background-color:var(--list_line_odd);
}
.search_result_line.result_line >.image{
    width:50px;
    height:50px;
    max-width:50px;
    display:flex;
    align-items: center;
    justify-content: center;
}
.search_result_line.result_line >.image img{
    width:25px;
    height:25px;
}
.search_result_line.result_line >div.categories{
    flex-grow:1;
    text-align:right;
}
/* Edit investment */
#edit_investment .result_line{
    margin-bottom:1em;
    width:100%;
}
.search_result_line.categories{
    flex-grow:1;
}
/* TOTAL RESULTS LINE */
#totals_results{
    flex-direction:row;
    
}
#portfolio_results.table{
    display:flex;
    flex-direction:column;
    gap:0;
    flex-shrink:0;
    flex-grow:1;
    overflow-x: auto;
    background-color:var(--list_line_odd);
    align-items:center;
}
#totals_results.result_line {
    justify-content: left;
    max-width:none;
    padding: .25em .25em .125em .25em;
    gap:.250rem;
    background-color:var(--list_line_odd);
    flex-wrap:wrap;
    width:100%;
}
#totals_results.result_line > div{
    flex-basis:200px;
    text-align:center;
    padding:0 0 .25em 0;
    border-radius: 0;
    flex-grow:1;
    max-width:none;
    width:auto;
    background-color:#000011;
    text-shadow:0 0 .025em rgba(0,0,0,1);
}
#totals_results.result_line h6{
    font-size:.5em;
    padding:.25em;
    font-weight:bold;
}
#totals_results.result_line {
    font-size:1.5em;
}

#portfolio_results.table .result_line{
    flex-direction:row;
    flex-basis:unset;
    justify-content: start;
    align-items: center;
    gap:0 .25em;
    padding:0  0 0 0;
    max-width:none;
    min-width:100%;
    width:fit-content;
    flex-shrink:0;
    overflow:visible;
    background-color:var(--list_line_odd);
}
#portfolio_results.table .result_line:last-child{
    padding:0;
    flex-grow:1;
}

#portfolio_results.table .result_line > div{
    display:inline-block;
    width:unset;
    height:40px;
    min-height:40px;
    text-align:left;
    flex-grow:1;
    flex-shrink:0;
    padding:0 .25em;
    white-space: hidden;
    text-overflow:'';
}
#portfolio_results.table .result_line:nth-child(odd){
    background-color:var(--list_line_odd);
}
#portfolio_results.table .result_line:nth-child(even){
    background-color:var(--list_line_even);
}
#portfolio_results.table .result_line .flex_row{
    display:flex;
    flex-shrink:0;
    justify-content: center;
    align-items: center;
}

#portfolio_results.table .result_line div.name{
    
    display:flex;
    width:120px;
    max-width:none;
    text-align:left;
    flex-grow:1;
    flex-shrink:0;
}
#portfolio_results.table .result_line div.name span{
    text-align:left;
    
}
#portfolio_results.table .result_line div.chart{
    height:50px;
    min-width:105px;
    align-items:center;
    width:105px !important;
    padding:0;
    flex-grow:0;
    flex-shrink:0;
}
#portfolio_results.table .result_line div.chart span{
    min-width:100px;
    max-width:100px;
    width:100px;
}
#portfolio_results.table .result_line div.chart img{
    height:40px ;
    width:100px ;
    margin:0 auto;
}

#portfolio_results.table .result_line div.image{
    width:50px;
    height:50px;
    max-width:50px;
    min-width:50px;
    flex-grow:0;
    flex-shrink:0;
}
#portfolio_results.table .result_line div.image span{
    display:flex;
    width:50px;
    height:50px;
    align-items: center;
    justify-content: center;
    
}
#portfolio_results.table .result_line div.image img{
    height:30px;
    width:auto;
}
#portfolio_results.table .result_line .rate{
    width:128px;
    min-width:128px;
    white-space: nowrap;
    flex-grow:1;
    flex-shrink:1;
    text-overflow:'';
}
#portfolio_results.table .result_line  div.portfolio_percent{
    width:90px;
    max-width:90px;
    min-width:90px;
    flex-shrink:0;
}
#portfolio_results.table .result_line  div.invested{
    width:100px;
    max-width:100px;
    min-width:100px;
    flex-shrink:0;
}
#portfolio_results.table .result_line  div.price_per{
    width:100px;
    max-width:100px;
    min-width:100px;
    flex-shrink:0;
}
#portfolio_results.table .result_line  div.return{
    width:100px;
    max-width:100px;
    min-width:100px;
    flex-shrink:0;
}
#portfolio_results.table .result_line  div.net{
    width:100px;
    max-width:100px;
    min-width:100px;
    font-weight:bold;
    flex-shrink:0;
}
#portfolio_results.table .result_line  div.return_percent{
    width:90px;
    max-width:90px;
    min-width:90px;
    flex-shrink:0;
}
#portfolio_results.table .result_line  div.coin_amount{
    width:100px;
    max-width:100px;
    min-width:100px;
    flex-shrink:0;
}

#portfolio_results.table .result_line .edit_invest{
    flex-grow:1;
    flex-shrink:0;
    margin-top:0;
    text-align:right;
}
#edit_options .sortable ul{
    display:flex;
    flex:1;
    flex-direction: column;
    flex-basis:100%;
    flex-wrap: wrap;
    min-width:150px;
}
#edit_options_button{
    padding:.5em .75em;
}
.sortable ul li {
    width:100%;
    flex-grow:1;
}
.sortable ul li label{
    width:100%;
    text-align:left;
}

@media (max-width: 980px) {
    
    .search_result_line.result_line >div.code{
	display:none;
    }
    
}