/* .section__content  h2,.section__image  h2{

  font-size: 40px;
  margin-bottom: 20px;

} */
img.alignright{
 margin: 30px 0px 30px 30px;
    padding: 2px;
}

img.alignleft{
     margin: 30px 30px 25px 0px;
     padding: 2px;
 }

.card-inner { overflow: hidden; }

.section-timeline{
padding: 20px;

}
.team-height-fix {

    height: 350px;
    overflow: hidden;
}

.switcher.group-investment-manager{
    display: none;
}

@media (max-width: 767px) {

    /* .section__content  h2,.section__image  h2 {
        font-size: 28px;
    } */

    .team-height-fix {

        height: auto;
        overflow: visible;
    }


.mobile-margin {

    margin-top: 30px;
}
}

.simplebar-content {

    padding-right: 20px;
}

.simplebar-track {
    border-radius: 31px;
}

.search-no-results {
    width: 100%;
}

.dynamic-columns > .container > .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--minimumColWidth, 250px), 100%), 1fr));
    gap: 2rem;
}

.dynamic-columns > .container > .row > div {
    max-width: 100%;
}

.price-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 2rem;
    margin-bottom: 2rem;

    .price-box {
        padding: 3rem;
        border-radius: 0px 0px 3rem 0;
        background-color: #3498db;
        
        * {
            color: white;
            display: block;
        }

        .label {
           font-weight: 600;
           font-size: 18px;
        }

        .price {
            font-size: min(72px, 10vw);
        }

        
    }
}

.table-container {
    overflow-x: auto;
    
    table.fund-performance-table {
        min-width: 600px;

        th, td {
            padding: 1rem 1.5rem;
            text-align: right;
            vertical-align: top;
        }

        thead {

            tr {
                background: #eee;

                th:first-child {
                    width: 25%;
                    text-align: left;
                }
                
            }
            
        }

        tbody {

            td {
                font-weight: 700;
                font-size: 20px;

                &:first-child {
                    text-align: left
                }
            }
            
        }

        
    }

}

.chart-nav-cumulative-total-return .chart-container {
    flex-direction: row-reverse;
}

.chart-nav-cumulative-total-return .chart-labels {
    flex-direction: row-reverse;
}

/**
 * Styles for the chart container element.
 *
 * This element is used to render a horizontal bar chart, where each bar
 * represents a value in the chart. The bars are stacked horizontally, and
 * the container is given a fixed height to ensure that the bars are always
 * visible.
 *
 * The chart container uses a combination of flexbox and grid to position
 * the bars. The bars are positioned using flexbox, and the container is
 * given a fixed height using the `height` property. The grid is used to
 * position the bars horizontally, and to add a small gap between each bar.
 *
 * The chart container also uses the `box-shadow` property to add a series
 * of horizontal lines to the container. These lines are used to create a
 * grid effect, and to help the user quickly identify the values in the
 * chart.
 *
 * The chart container has a number of child elements, including the
 * `.chart-bar` element and the `.bar-label` element. The `.chart-bar`
 * element is used to render each bar in the chart, and the `.bar-label`
 * element is used to render the label for each bar.
 *
 * The `.chart-bar` element is positioned using flexbox, and is given a
 * fixed width using the `max-width` property. The `.bar-label` element is
 * positioned using absolute positioning, and is given a fixed width and
 * height using the `width` and `height` properties. The label is centered
 * horizontally and vertically using the `top`, `left`, and `transform`
 * properties.
 *
 * The `.chart-bar` element has a hover state, which is used to display the
 * label for the bar when the user hovers over it. The label is displayed
 * by setting the `display` property to `block`.
 */
.chart-container {
    --lineColour: #08305d33;
    display: flex;
    align-items: flex-end;
    /* flex-direction: row-reverse; */
    height: 314px;
    border: 1px solid #ccc;
    box-shadow: inset 0 2px 0px 0px var(--lineColour),
    inset 0px 50px 0px 0px #f3f7fc,
    inset 0 53px 0px 0px var(--lineColour),
    inset 0px 103px 0px 0px #f3f7fc,
    inset 0 106px 0px 0px var(--lineColour),
    inset 0px 156px 0px 0px #f3f7fc,
    inset 0 159px 0px 0px var(--lineColour),
    inset 0px 206px 0px 0px #f3f7fc,
    inset 0 209px 0px 0px var(--lineColour),
    inset 0px 259px 0px 0px #f3f7fc,
    inset 0 262px 0px 0px var(--lineColour);

    .chart-bar {
        flex: 1;
        margin: 0 5px;
        text-align: center;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        .bar {
            position: relative;
            background-color: #3498db;
            width: 100%;
            max-width: 50px;
            border-radius: 5px 5px 0 0;
            margin: 0 auto;
            transition: height 0.3s ease-in-out;

            &.nav-value-bar {
                background-color: #09305C;
                border-radius: 0px;
            }

            .bar-label {
                display: none;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #09305C;
                font-size: 12px;
                font-weight: bold;
                background-color: #fff;
                padding: 2px;
                border-radius: 5px;
            }

            &:hover .bar-label {
                display: block;
            }
        }
    }
}

.chart-labels {
    display: flex;
    /* flex-direction: row-reverse; */

    .chart-label {
        flex: 1;
        text-align: center;
    
        .label-value {
            font-weight: bold;
            margin-top: 5px;
            font-size: 1.5rem;
        }
        .label-date {
            font-size: 0.8em;
            color: #666;
        }
    }
}

.accordion .accordion__body-inner .year-on-year-nav-table {

    tr {

        :is(td, th) {
            font-weight: 700;
            border: none!important;
            
            &:first-child {
                border-right: 1px solid #ccc;
            }

            &:last-child {
                text-align: right;
            }
        }
        
    }

}

:focus-visible {
      outline: 2px solid blue;
      outline-offset: 2px;
}