/******************************************************************************
*                       T R I N I X   M E D I A 
*       F R O N T E N D    F R A M E W O R K    L I B R A R Y
*   M Y D I M E   D A S H B O A R D    M O D U L E    S T Y L E S
*                      Development Version 0.0.1
*                        (c) Trinix Media 2023
*
*   Created by: Brandon Reilly on:    2023-09-15 @ 1:01PM
*   Updated by Brandon Reilly on:   2023-09-15 @ 1:01PM
* 
******************************************************************************/
:root {
    --summary-max-horizontal-containers: 3;
    --summary-max-horizontal-containers: var(--tabbed-view-max-horizontal-containers);
    --summary-container-min-height: 15rem;
}

.TM-lib .summary-header,
.TM-lib .summary-group {
    display: inline-block;
    height: auto;
    margin: 0 .25rem;
    padding: .25rem 0 0 .5rem;
    border-radius: .35rem;
    color: rgb(225, 235, 245);
    background: rgba(0, 50, 0, .75);

}

.TM-lib .summary-header {
    grid-column: 1 / span var(--summary-max-horizontal-containers);
    grid-row-start: 1;
    width: calc(100% - (.5rem * calc(var(--summary-max-horizontal-containers) + 1)));
    font-size: 1.0rem;
}
    
.TM-lib .summary-group {
    min-height: var(--summary-container-min-height);
    width: calc(100% - (.5rem * calc(var(--summary-max-horizontal-containers) + 1)));
    min-height: var(--summary-container-min-height);
    font-size: 1.15rem;
}

@media (max-width: 720px) {
    :root {
        /*     --summary-max-horizontal-containers: 3; */
        --summary-container-min-height: 10rem;
        --summary-max-horizontal-containers: var(--tabbed-view-max-horizontal-containers);
    }
    .TM-lib .summary-header {
        font-size: 0.95rem;
    }
    .TM-lib .summary-group {
        font-size: 0.85rem;
    }

    
}