#dashboardPanel {
    padding-top: var(--jl-padding-xxs);
    padding-left: var(--jl-padding-m);
    width: 1725px !important;
    z-index: 2;
    background-color: var(--jl-bg-light) !important;

    & .close {
        float: right;
        margin-top: 0px;
        padding-block: var(--jl-padding-xxs) var(--jl-padding-xxxs);
        padding-inline: var(--jl-padding-s);
        background-color: var(--jl-bg-light) !important;
        & span {
            font-size: 200%;
        }
        border:none;
        color: var(--jl-text);
        border-radius: 4px;
    }
    & .close:hover {
        box-shadow:  var(--jl-table-box-shadow4);
        cursor: pointer;
    }
}

#dashboardPanel .dashboard-content-area {
    display: grid;
    grid-template-columns: 1594px;
    column-gap: var(--jl-padding-m);
    padding-right: var(--jl-padding-m);

    .dashboard-content-right {
        height: 1400px;
    }
    overflow-y: scroll;
    max-height: calc(100vh - 210px);
    min-height: calc(100vh - 210px); /* Meneekö rikki */
    scrollbar-color: var(--jl-bg-dark) var(--jl-border);
    scrollbar-width: thin;
    padding-bottom: 200px;
}


#dashboardPanel .dashboard-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    width: 1701px;
    padding-block: 0px;
    
    .content-show {
        display: block;
    }
    .content-hide {
        display: none;
    }
    & img {
        height: 14px;
        /* margin: 3px auto 6px auto; */
        padding-right: 5px;
        max-width: unset;
        vertical-align: unset;
    }
    & .dashboard-title {
        color: var(--jl-text);
        font-size: var(--jl-font-xxl);
        padding-right: var(--jl-padding-xxs);;
        display: inline;
        margin: 0px !important;
        & span {
            padding-left: var(--jl-padding-xxs);;
            color: var(--jl-text-muted);
            font-size: var(--jl-font-m);;
            font-weight: normal;
        }
    }

    & .dashboard-company-ratios-info {
        font-size: var(--jl-font-xxs);    
        color: var(--jl-text-placeholder);
        font-style: italic;
        display: grid;
        justify-content: space-between;
        grid-auto-flow: column;
        align-items: center;
        /* width: 590px; */
        

        
        /* & div {
            padding-right: 40px;
        } */
    }    
        

}

/* #dashboardPanel .dashboard-company {
    text-align: start;
    font-size: var(--jl-font-xs);
    margin-top: 0;
    display: grid;
    padding-left: var(--jl-padding-xxl);
    color: var(--jl-text-muted);
    gap: 2px;
    padding-bottom: 0px;
    line-height: normal;
    
    & svg {
        fill: var(--jl-link);
        margin-bottom: -4px;
        height: var(--jl-font-l);
    }

    & ul {
        padding-left: 0px !important;
        list-style: none;
        margin: 0px !important;
    }
    
    & ul > li {
        float: left;
        margin-bottom: 2px;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
    & a {
        text-decoration: none;
        color: var(--jl-link);
        margin-right: var(--jl-margin-m);
        padding-left: 0;
    }
    & a:hover {
        text-decoration: underline; 
    }
} */
#dashboardPanel .dashboard-company-metadata-and-ratios {
    display: grid;
    grid-template-columns: 772px 885px ;
    grid-template-areas:
        '. ratios'
        '. ratios'
        '. ratios';
    

    text-align: start;
    font-size: var(--jl-font-xs);
    margin-top: 0;
    
    padding-left: var(--jl-padding-xxl);
    color: var(--jl-text-muted);
    gap: 2px;
    padding-bottom: 0px;
    line-height: normal;
    
    & svg {
        fill: var(--jl-link);
        margin-bottom: -4px;
        height: var(--jl-font-l);
    }

    & ul {
        padding-left: 0px !important;
        list-style: none;
        margin: 0px !important;
    }
    
    & ul > li {
        float: left;
        margin-bottom: 2px;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
    & a {
        text-decoration: none;
        color: var(--jl-link);
        margin-right: var(--jl-margin-m);
        padding-left: 0;
    }
    & a:hover {
        text-decoration: underline; 
    }
    & svg.today-event {
        fill: #75FB4C !important
    }
    & svg.past-event {
        fill: #EA3323 !important
    }
    & .dashboard-company-metadata {
        color: var(--jl-text-placeholder);
        
    }
    & .dashboard-company-ratios {
        grid-area: ratios;
        display: flex;
        gap: 8px;
        padding-right: 16px;

        & .mcap,
        & .score {
            width: 130px !important;
            min-width: 130px !important;
            max-width: 130px !important;
            
            & .dashboard-ratio-value {
                color: var(--jl-primary) !important;
            }
        }
        /* & .score {
            
        } */
        & .dashboard-ratio {
            width: 115px;
            min-width: 115px;
            max-width: 115px;
            display: grid;
            align-content: space-around;
            
            padding-inline: 0px;
            padding-block: 0px;
            border: var(--jl-border-card);
            border-radius: 5px;
            box-shadow: var(--jl-table-box-shadow2);
            
            & .dashboard-ratio-title {
                font-size: var(--jl-font-xxs);
                text-align: center;
                color: var(--jl-text-placeholder);
                padding-top: 0px;
                padding-bottom: 0px;
                text-wrap-mode: nowrap;
            }

            & .dashboard-ratio-value {
                padding-top: 0px;
                padding-bottom: 0px;
                color: var(--jl-text-h1);
                font-size: var(--jl-font-l);
                font-weight: bold;
                text-align: center;    
                text-wrap-mode: nowrap;;
            }

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




#dashboardPanel .dashboard-tabs {
    padding-bottom: 0;
    width: 100%;
    background-color: var(--jl-bg-light) !important;
    /* margin-top: calc(-1 * var(--jl-margin-xs));
    margin-left: calc(-1 * var(--jl-margin-m)); */
    margin-bottom: var(--jl-padding-s);
    margin-top: 0px;

    & .container {
        padding-left: 0px !important;
    }
  
    & ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: var(--jl-bg-light);
        padding-block: var(--jl-padding-xxs);
        margin-top: var(--jl-margin-xs);
        padding-inline-start: var(--jl-padding-xxl) !important;
        border-block: 1px solid var(--jl-border);
    }

    & li {
        float: left;
        padding-top: 0px !important;
        padding-bottom: 0px !important;

        & span {
            display: inline-flex;
            align-items: center;
            margin-right: var(--jl-margin-xxl);
            & svg {
                fill: var(--jl-link);
            }
        }
        & span:has(a.active) {
            & svg {
                fill: var(--jl-text);
            }
        }
    }
      
    & li a {
        display: block;
        color: var(--jl-link);
        text-align: center;
        margin-left: var(--jl-margin-xs);
        text-decoration: none;
        padding-block: var(--jl-padding-xxxs);
        font-size: var(--jl-font-l);
    }
    
    & li a.active {
        color:var(--jl-text);
        border-bottom: 2px solid var(--jl-bg-light);
    }

    & li a:hover:not(.active) {
        border-bottom: 2px solid var(--jl-link);
    }

    & a {
        padding-bottom: 0px;
    }
}