/***
* The idea of a board is a layout with graphs where the number of digits indicates the number of items in a dashboards line items
* The value of zero suggests the size (smaller pane) and one (large panes)
* NOTE:
*   obviously a board-000 and board-111 would suggest the same thing
*/

.dashboard .chart, .scalar-pane {
    border-radius:8px;
    padding:4px;
    border:1px solid #d3d3d3;
    background-image: linear-gradient(to bottom, #ffffff, #f3f3f3);
}

.dashboard .basic-board {
    display:grid;
    grid-template-rows: 60px calc(100% - 60px);
    grid-template-columns: 100%;
    gap: 10px;
    
    
    
    padding:8px;
    align-content: center;
}
.dashboard .scalar {     
    display:grid; grid-template-rows:auto auto; gap: 10px; align-items: center; align-content: center;}
.dashboard .scalar .value {font-size:40px; font-family: courier; font-weight: bold;}
.dashboard .scalar .label {font-size:10px; text-transform: uppercase;}


.apexcharts-title-text {
    text-transform: capitalize;
}
.dashboard .board-title {grid-column:1 / span 4; text-transform:capitalize; padding:4px;}
.scalar-pane { text-align: center; 
   
    ;}
.board-10{
    
    display:grid;
    grid-template-columns: calc(100% - 125px) 125px; gap: 10px;
}
.board-10 .scalar-pane { display:grid; gap: 10px;
}

.board-10 .scalar-pane  .scalar {border-top:1px solid #d3d3d3}
.board-10 .scalar-pane :first-child {border-top:0px;}
/* .board-10 .scalar-pane :nth-child(3n-1){ border-top:1px solid #d3d3d3;} */

.board-00 , .board-11 {
    display:grid;
    grid-template-columns: repeat(2,1fr); gap:2px
}
.board-110 {
    display:grid;
    grid-template-columns: 2fr 2fr 150px;
    gap: 10px;
}
.board-110 .scalar-pane{display:grid;}

.board-110-2 {
    display:grid;
    grid-template-columns: 2fr 2fr;
    gap: 10px;
} 
.board-110-2 .scalar-pane {grid-row:3; grid-column: 2; 
    display: grid; 
    grid-template-columns: 50% 50%; gap: 10px;}

.board-110-2 .scalar-pane > :nth-child(even){ border-left:1px solid #d3d3d3;}    

.board-100 {
    display:grid;
    grid-template-columns: 2fr 1fr 1fr; gap: 10px;
}
.board-100-2 {
    display:grid;
    grid-template-columns: 2fr 1fr ; gap: 10px;
}

.board-100,.board-100-2 .scalar-pane {display:grid; gap: 10px;}
.board-100-2 > :nth-child(1){grid-row:1 / span 2}
.board-100-2 > :nth-child(2){grid-row:1; grid-column:2}
.board-100-2 .scalar-pane {grid-row:2; grid-column: 2 ; display:grid; grid-template-columns: repeat(2, 1fr); }
.board-100-2 .scalar-pane > :nth-child(even){ border-left:1px solid #d3d3d3;}