#portfolio-container {
    max-width: 1910px;
    width: 100%;
    @media (min-height: 800px) {
        overflow-y: scroll !important;
        max-height: calc(100vh - 20px); 
    }
    scrollbar-color: var(--jl-bg-dark) var(--jl-border);
    scrollbar-width: thin;
    padding-bottom: 200px;
    font-size: var(--jl-font-l);  
    color: var(--jl-text);

    & .portfolio-content {
        width: 1200px;
        border-radius: var(--jl-border-radius);
        border: var(--jl-border-card);
        background-color: var(--jl-bg-light);
        padding: var(--jl-padding-m);

        & .latest-transactions {
            margin-top: var(--jl-margin-xxxl);
            font-size: var(--jl-font-m);
            & li {
                font-size: var(--jl-font-xs);
            }
        }
    }

    & h1 {
        margin-bottom: var(--jl-margin-xs) !important;
    }
    & .jl-last-updated  {
        padding-left: var(--jl-padding-m) !important;
        padding-bottom: 0 !important;
        color: var(--jl-text-placeholder) !important;
                
    }

    & .first-title {
        padding-top: 0px !important;
        margin-top: 0px !important;
        margin-bottom: var(--jl-margin-s) !important;
        text-transform: uppercase;

    }
    
    & .sectionLegend {
        width: 100%;
        font-size: var(--jl-font-xs); 
        color: var(--jl-text-muted);
        font-style: italic;
        max-width: 800px;
        line-height: var(--jl-line-height-xs);

        & a {
            color: var(--jl-link) !important;
            text-decoration: none;           
        }
        & a:hover {
            text-decoration: underline;
        }
    }

    & .table-container {
        overflow: auto;
        /* margin-bottom: var(--jl-margin-m);
        padding-top: var(--jl-padding-m); */
    }
    
    & .section-break {
        margin-top: var(--jl-margin-l);
    }

    & table {
        background-color: var(--jl-bg-light);
    }

    & thead tr th {
        background-color: var(--jl-table-thead-bg);
        color: var(--jl-table-thead-color);
        padding-block: var(--jl-padding-xs);
        padding-inline: 5px !important;
        border-bottom: 1px solid var(--jl-border-color);
    }


    & tbody tr {
        box-shadow: var(--jl-table-box-shadow2);
    }

    & tbody tr:hover {
        box-shadow: var(--jl-table-box-shadow3) !important;
    }
}

#portfolio-chart {
    width: 100%;
    max-width: 614px;
    min-height: 308px;
    aspect-ratio: 2/1;
    margin-bottom: var(--jl-margin-m);
    padding-left: var(--jl-padding-l);

    & .canvas-wrapper {
        width: 100%;
        max-width: 614px;
        min-height: 308px;
        aspect-ratio: 2/1;
        padding-left: 0;
    }
    & .portlet-title {
        font-size: var(--jl-font-xs);
    }
}

#portfolio-profit-history .profit-history-container {
    display: inline-flex;
    flex-direction: row-reverse;
}

#portfolio-content-table, #portfolio-profit-history-table, #porfolio-transactions-table {
    margin: unset;
    font-size: var(--jl-font-xs);
    border-collapse: collapse;

    & img {
        height: 11px;
        margin: 3px auto 3px auto;
        display: block;
    }

    & th {
        border: 0px !important;
    }

    & td {
        color: var(--jl-table-text);
        text-align: left;
        padding: var(--jl-table-cell-padding) !important;
        border: 0px !important;
        border-bottom: 1px solid var(--jl-table-row-border); 
    }

    & td.red {
        color: var(--jl-negative);
    }

    & td.green {
        color: var(--jl-positive)
    }
}

#portfolio-profit-history-table {

    max-width: 550px;
    width: 550px !important;
    min-width: 550px;
    margin-top: var(--jl-margin-s);
    margin-bottom: var(--jl-margin-s);

    & td, & th {
        text-align: right;
        width: 140px;
    }
    & .timeframe {
        text-align: left;
        width: 250px;
    }
    &  tr:nth-child(6) td {
        border-bottom: 2px solid var(--jl-border) !important;
    }
}


 
#portfolio-content-table {
    max-width: 1200px;
    width: 100% !important;
    min-width: 1100px;

    & tbody tr:nth-of-type(odd) {
        box-shadow: var(--jl-table-box-shadow1);
    }
    & tbody tr:nth-of-type(even) {
        box-shadow: var(--jl-table-box-shadow2);
    }

    & td.flag,
    & th.flag {
        width: 22px !important;
        max-width: 22px;
        min-width: 22px;
    }

    & td.company-name,
    & th.company-name {
        text-align: left;
        width: 250px !important;
        max-width: 250px;
        min-width: 250px;
    }

    & td.ticker,
    & th.ticker {
        text-align: left;
        margin-right: 3px;
        width: 72px !important;
        max-width: 72px;
        min-width: 72px;
    }

    & td.number,
    & th.number {
        text-align: right;
        margin-right: 3px;
        width: 95px !important;
        max-width: 95px;
        min-width: 95px;
    }


    & tr.sum > td {
        font-weight: bold;
        background-color: var(--jl-table-thead-bg);
        color: var(--jl-table-thead-color);
        padding-block: var(--jl-padding-xs) !important;


    }

    & td.portion,
    & td.currencyRate {
        color: var(--jl-text-muted);
        font-size: var(--jl-font-xss);
    }

    & td.marketValue {
        font-weight: 600;
    }
}




#portfolio-transactions .transactions {
    margin: unset;
    max-width: 1204px;
    width: 100% !important;
    min-width: 1100px;
    font-size: var(--jl-font-xs);
    border-collapse: collapse;

    & tbody tr:nth-of-type(odd) {
        box-shadow: var(--jl-table-box-shadow1);
    }
    & tbody tr:nth-of-type(even) {
        box-shadow: var(--jl-table-box-shadow2);
    }
    td, & th {
        text-align: right;
    }
   

    & td.company,
    & th.company {
        text-align: left;
        width: 250px !important;
        max-width: 250px;
        min-width: 250px;
    }
    & td.tx-type,
    & th.tx-type {
        width: 75px !important;
        max-width: 75px;
        min-width: 75px;
    }
    & td.tx-date,
    & th.tx-date {
        width: 100px !important;
        max-width: 100px;
        min-width: 100px;
    }
    
    & td.quantity,
    & th.quantity {
        width: 90px !important;
        max-width: 90px;
        min-width: 90px;
    }
    & td.stock-price,
    & th.stock-price {
        width: 90px !important;
        max-width: 90px;
        min-width: 90px;
    }
    & td.currency-rate,
    & th.currency-rate {
        width: 90px !important;
        max-width: 90px;
        min-width: 90px;
    }
    & td.comission,
    & th.comission {
        width: 90px !important;
        max-width: 90px;
        min-width: 90px;
    }
    & td.total,
    & th.total {
        width: 90px !important;
        max-width: 90px;
        min-width: 90px;
    }
    & td.cash,
    & th.cash {
        width: 90px !important;
        max-width: 90px;
        min-width: 90px;
    }

    & thead .sorting:before,
    & thead .sorting:after,
    & thead .sorting_asc:before,
    & thead .sorting_asc:after,
    & thead .sorting_desc:before, 
    & thead .sorting_asc_disabled:before,
    & thead .sorting_asc_disabled:after,
    & thead .sorting_desc_disabled:before, 
    & thead .sorting_desc_disabled:after{
        right: unset !important;
        display: none !important;
        /* padding-right: 10px !important; */
    }
    & thead .sorting {
        /* padding-right: 10px !important; */
    }
}

#portfolio-transactions #porfolio-transactions-table_filter {
    font-size: var(--jl-font-xs) !important;
    margin-bottom: var(--jl-margin-xs);
    float: unset;
    background-color: var(--jl-bg-light);
    width: 180px;
    border-radius: 5px !important;

    & input {
        display: block;
        -webkit-appearance: none;
        appearance: none;
        outline: 1px solid var(--jl-border);
        padding: var(--jl-padding-xs) var(--jl-padding-s) !important;
        background-clip: padding-box;
        border: none;
        color: var(--jl-text) !important;
        background-color: var(--jl-input-bg);
	    font-size: var(--jl-font-xs) !important;
        font-family: Verdana, Geneva, Tahoma, sans-serif !important;
        border-radius: 5px !important;
        height: 32px !important;
        margin-left: 0px !important;
    }
    & input:focus {
        outline: 2px solid var(--jl-highlight);
    }
    & input::placeholder {
        color: var(--jl-text-placeholder);
        font-size: var(--jl-font-xs);
    }
}
#portfolio-transactions #porfolio-transactions-table_wrapper {
    margin-top: 20px;
    
}