/* DRIVERS PAGE */


/* General definition for every line chart */
.driver-chart {
    width: 100%;
    height: 100%; /* The height is determined by grid row height */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-blue); /* Provides a background colour before charts are rendered */
}


/* ROE DRIVER TREE 1 */
/* Container for the entire grid */
#driver-tree1 {
    display: grid;
    grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr; /* Adding a 40px column for the connectors */
    grid-template-rows: repeat(8, 50px); /* Twelve rows with 50px height*/
    gap: 20px 0px; /* Vertical spacing between grid items, none horizontally */
    position: relative;
}

/* Charts Column 1 */
#driver-roe-1 {
    grid-column: 1;
    grid-row: 4 / span 4; /* Positioned in the middle of the first column, spanning 4 rows */
}

/* Charts Column 2 */
#driver-rnoa {
    grid-column: 3;
    grid-row: 3 / span 2;
}

#driver-financeReturn {
    grid-column: 3;
    grid-row: 7 / span 2;
}

/* Charts Column 3 */
#driver-nopatm {
    grid-column: 5;
    grid-row: 2 / span 2;
}

#driver-noato {
    grid-column: 5;
    grid-row: 4 / span 2;
}

/* Charts Column 4 */
#driver-nopat {
    grid-column: 7;
    grid-row: 1 / span 2;
}

#driver-revenue {
    grid-column: 7;
    grid-row: 3 / span 2;
}

#driver-noa {
    grid-column: 7;
    grid-row: 5 / span 2;
}

/* Connector Column 1-2 */
#connector-roe-rnoa {
    grid-column: 2;
    grid-row: 4 / span 4;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Connector Column 2-3 */
#connector-rnoa-nopatm {
    grid-column: 4;
    grid-row: 3 / span 2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Connector Column 3-4 */
#connector-nopatm-nopat {
    grid-column: 6;
    grid-row: 2 / span 2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#connector-noato-revenue {
    grid-column: 6;
    grid-row: 4 / span 2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* ROE DRIVER TREE 2 */
/* Container for the entire grid */
#driver-tree2 {
    display: grid;
    grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr;
    grid-template-rows: repeat(8, 50px);
    gap: 20px 0px;
    position: relative;
}

/* Charts Column 1 */
#driver-roe-2 {
    grid-column: 1;
    grid-row: 3 / span 4;
}

/* Charts Column 2 */
#driver-pm {
    grid-column: 3;
    grid-row: 2 / span 2;
}

#driver-asset-turnover {
    grid-column: 3;
    grid-row: 4 / span 2;
}

#driver-leverage {
    grid-column: 3;
    grid-row: 6 / span 2;
}

/* Charts Column 3 */
#driver-ni {
    grid-column: 5;
    grid-row: 1 / span 2;
}

#driver-revenue-2 {
    grid-column: 5;
    grid-row: 3 / span 2;
}

#driver-asset {
    grid-column: 5;
    grid-row: 5 / span 2;
}

#driver-equity {
    grid-column: 5;
    grid-row: 7 / span 2;
}

/* Connector Column 1-2 */
#connector-roe-pm {
    grid-column: 2;
    grid-row: 3 / span 4;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Connector Column 2-3 */
#connector-pm-ni {
    grid-column: 4;
    grid-row: 2 / span 2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#connector-leverage-sales {
    grid-column: 4;
    grid-row: 4 / span 2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#connector-turnover-asset {
    grid-column: 4;
    grid-row: 6 / span 2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}





/* CONNECTORS */
/* Connector Styling */
.vertical-line,
.horizontal-top,
.horizontal-bottom,
.horizontal-middle,
.horizontal-middle-full
 {
    content: '';
    position: absolute;
    background-color: var(--mid-blue);
}

/* Vertical line from top to bottom */
.vertical-line {
    width: 2px;
    height: 100%; /* Full height of the grid cell */
    left: 50%; /* Centered horizontally */
    top: 0;
}

/* Horizontal line at the top, extending from the middle to the right */
.horizontal-top {
    width: 50%;
    height: 2px;
    top: 0;
    right: 0;
}

/* Horizontal line at the bottom, extending from the middle to the right */
.horizontal-bottom {
    width: 50%;
    height: 2px;
    bottom: 0;
    right: 0;
}

/* Horizontal line in the middle, extending from the left to the middle */
.horizontal-middle {
    width: 50%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%); /* Center the line vertically */
}

/* Horizontal line in the middle, extending from the left to the right (full width of div) */
.horizontal-middle-full {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%); /* Center the line vertically */
}

/* Locate the icon with the mathematical symbol in center of each connector div */
.driver-centered-icon {
    width: 24px;
    height: 24px;
    position: absolute; /* Position the icon absolutely relative to the connector */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the icon */
    z-index: 80;
    background-color: var(--off-white);
}



@media (max-width: 624px) {
    #driver-tree1 {
        grid-template-columns: 1fr 40px 1fr; /* Adding a 40px column for the connectors */
        grid-template-rows: 0px repeat(6, 50px); /* Set first row to 0px and the rest to 50px */
    }
    #connector-pm-ni, #connector-leverage-sales, #connector-turnover-asset {
        display: none;
    }
    #driver-ni, #driver-revenue-2, #driver-asset, #driver-equity {
        display: none;
    }
    #driver-tree2 {
        grid-template-columns: 1fr 40px 1fr;
        grid-template-rows: 0px 0px 50px 50px 0px 0px 50px 50px;
    }
    #connector-rnoa-nopatm, #connector-nopatm-nopat, #connector-noato-revenue {
        display: none;
    }
    #driver-nopatm, #driver-noato, #driver-nopat, #driver-revenue, #driver-noa {
        display: none;
    }
}