/* INFOBYTE STYLES BELOW */

.infoByte_oneByte {
    margin: 1rem 0 2rem;
}

@media all and (min-width: 768px) {
    .infoByte_oneByte {
        width: 800px;
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }
}

.infoByte_oneByte>div {
    padding: 1rem;
}

@media all and (min-width: 768px) {
    .infoByte_oneByte>div {
        padding: 1rem;
        display: flex;
        align-items: center;
    }
}

.infoByte_oneByte .infoByte__icon {
    padding: 0.5rem;
    flex-basis: 128px;
}

@media all and (max-width: 767px) {
    .infoByte_oneByte .infoByte__icon {
        display: none;
    }
}

.infoByte_oneByte .infoByte__icon img {
    max-width: 128px;
}

.infoByte_oneByte .infoByte__figure {
    font-size: 3rem;
    font-weight: normal;
    font-family: Roboto Slab;
    text-align: right;
    color: #283f73;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    flex-basis: 8rem;
}

.infoByte_oneByte .infoByte__desc {
    font-size: 1.2rem;
    font-family: Roboto Slab;
    color: #283f73;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    flex-grow: 1;
}

.infoByte_teal .infoByte__icon {
    background-color: #73c8d1;
}

.infoByte_teal .infoByte__figure {
    background-color: #a8dfe5;
}

.infoByte_teal .infoByte__desc {
    background-color: #daf0f2;
}

.infoByte_yellow .infoByte__icon {
    background-color: #ffc629;
}

.infoByte_yellow .infoByte__figure {
    background-color: #ffda73;
}

.infoByte_yellow .infoByte__desc {
    background-color: #ffeab0;
}

.infoByte_lime .infoByte__icon {
    background-color: #d0d173;
}

.infoByte_lime .infoByte__figure {
    background-color: #e4e6a8;
}

.infoByte_lime .infoByte__desc {
    background-color: #f2f2da;
}

.infoByte_cobalt .infoByte__icon {
    background-color: #778dd0;
}

.infoByte_cobalt .infoByte__figure {
    background-color: #a8b7e5;
}

.infoByte_cobalt .infoByte__desc {
    background-color: #dae0f2;
}

.infoByte_mint .infoByte__icon {
    background-color: #88d1b6;
}

.infoByte_mint .infoByte__figure {
    background-color: #a8e6cf;
}

.infoByte_mint .infoByte__desc {
    background-color: #daf2e9;
}

.infoByte_sdg_grey .infoByte__icon {
    background-color: #f1f1f1;
}

.infoByte_sdg_grey .infoByte__figure {
    background-color: #d1d1d1;
}

.infoByte_sdg_grey .infoByte__desc {
    background-color: #e1e1e1;
}

.infoByte_blue .infoByte__icon {
    background-color: #daf1f2;
}

.infoByte_blue .infoByte__figure {
    background-color: #a8dfe5;
}

.infoByte_blue .infoByte__desc {
    background-color: #73c3d1;
}

.infoByte_greyblue .infoByte__icon {
    background-color: #adbecc;
    color: #3d454c;
}

.infoByte_greyblue .infoByte__figure {
    background-color: #cad6e0;
    color: #3d454c;
}

.infoByte_greyblue .infoByte__desc {
    background-color: #e6edf2;
    color: #3d454c;
}

@media print {
    .infoByte_oneByte {
        width: auto;
        display: block;
    }
    .infoByte_oneByte .infoByte__icon {
        display: none;
    }
    .infoByte_oneByte .infoByte__desc {
        text-align: right;
        border-bottom: 2px solid #283f73;
    }
}


/* Article Image STYLES BELOW */

@media all and (min-width: 768px) {
    .article-infographic-gallery {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: space-between;
        align-items: flex-start;
    }
}

.article-map-chart-gallery {
    margin-bottom: 2rem;
}

.article-feature-image img {
    padding: 1em;
    background-color: #f0f0f0;
}

.article-gallery-item {
    padding: 1em;
    margin: 1em;
    background-color: #f0f0f0;
}

.article-gallery-item.infographic-gallery-item {
    background-color: #F2F7FA;
}

.article-gallery-item h4 {
    margin: 0.5em 0 0;
    padding: 0;
}

.article-infographic-gallery img {
    width: auto;
}

.article-map-chart-gallery .article-gallery-item {
    max-width: 16em;
}

.article-map-chart-gallery .article-gallery-item h4 {
    font-size: 18px;
}

.article-map-chart-gallery .article-gallery-item a {
    display: block;
    background-color: #fff;
}

.article-map-chart-gallery .article-gallery-item a img {
    display: block;
    margin: 0 auto;
}

.infographic-gallery-item .btn {
    margin: 1rem 0 1.5rem 0;
    float:none;
}

.article-gallery-item .gallery-download-link {
    text-decoration: none;
    font-size: 13px;
}


/* ---------------------------
=== INFOBYTE V2 STYLES ===
--------------------------- */

.infoByte_v2 {
    max-width:414px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: min-content auto repeat(2, 1fr) 192px auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin: 1rem 0;
}
@media screen and (min-width: 567px) {
    .infoByte_v2 {
        max-width: 900px;
        grid-template-columns: auto 192px;
        grid-template-rows: min-content auto repeat(1, 1fr) auto min-content;
        column-gap: 0.5rem;
        row-gap: 0px;
    }
}
@media print {
    .infoByte_v2 {
        max-width: 900px;
        grid-template-columns: auto 192px;
        grid-template-rows: min-content auto repeat(2, 1fr) auto min-content;
        column-gap: 0.5rem;
        row-gap: 0px;
        page-break-inside: avoid;
        margin: 2rem 0;
        border: 1px solid #000;
        box-shadow: 3px 3px 4px rgb(0 0 0 / 0.4);
    }
}
.infoByte_v2.infoBytev2_silc_yellow {
    color: #333;
    background-color: #fbaa34;
}
.infoByte_v2.infoBytev2_lfs_purple {
    color: #fff;
    background-color: #1d345c;
}
.infoByte_v2.infoBytev2_lfs_mint { /* not in use */
    color: #07101a;
    background-color: #98d4c2;
}
.infoByte_v2.infoBytev2_lfs_yellow { /* not in use */
    color: #07101a;
    background-color: #fbaa34;
}
.infoByte_v2.infoBytev2_neutral_teal {
    color: #006168;
    background-color: #cad6e0;
}
.infoByte_v2.infoBytev2_neutral_grey {
    color: #3D454C;
    background-color: #e6edf2;
}
.infoByte_v2.infoBytev2_census22_neutral {
    color: #283F73;
    background-color: #E6EDF2;    
}
@media print {
    .infoByte_v2 {
        background: #fdfdfd !important;
        color: #000 !important;
    }
} 

.infoBytev2__image { 
    grid-area: 5 / 1 / 6 / 2;
}
.infoBytev2__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
@media screen and (min-width: 567px) {
.infoBytev2__image { 
    grid-area: 1 / 2 / 5 / 3;
}
.infoBytev2__image img {
        width: 192px;
        height: auto;
    }
}
@media print {
    .infoBytev2__image { 
        grid-area: 1 / 2 / 5 / 3;
    }
    .infoBytev2__image img {
        width: 192px;
        height: auto;
    }
}

.infoBytev2__figure {
    font-family: "Roboto Slab", Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    font-size: 3rem;
    grid-area: 1 / 1 / 2 / 2;
    justify-self: start;
    align-self: end;
    padding: 0.5rem 1rem 0;
}
@media screen and (min-width: 567px) {
    .infoBytev2__figure {
        grid-area: 1 / 1 / 2 / 2;
    }
}
@media print {
    .infoBytev2__figure {
        grid-area: 1 / 1 / 2 / 2;
    }
}

.infoBytev2__desc1 {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.1rem;
    grid-area: 2 / 1 / 3 / 2;
    justify-self: start;
    align-self: start;
    padding: 0 1rem;
}
.infoByte_v2.infoBytev2_neutral_grey .infoBytev2__desc1 {
    color: #006168;
}
.infoByte_v2.infoBytev2_census22_neutral .infoBytev2__desc1 {
    color: #009F7A;
}
@media screen and (min-width: 567px) {
    .infoBytev2__desc1 {
        grid-area: 2 / 1 / 3 / 2;
    }
}
@media print {
    .infoBytev2__desc1 {
        grid-area: 2 / 1 / 3 / 2;
        color: #000 !important;
    }
}
.infoBytev2__desc2 {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.1rem;
    grid-area: 3 / 1 / 4 / 2;
    justify-self: start;
    align-self: start;
    padding: 0 1rem;
}
.infoByte_v2.infoBytev2_silc_yellow .infoBytev2__desc2 {
    color: #7f0004;
}
.infoByte_v2.infoBytev2_lfs_purple .infoBytev2__desc2 {
    color: #fed6a6;
}
.infoByte_v2.infoBytev2_lfs_mint .infoBytev2__desc2 {
    color: #1d345c;
}
.infoByte_v2.infoBytev2_lfs_yellow .infoBytev2__desc2 {
    color: #222944;
}
.infoByte_v2.infoBytev2_neutral_teal .infoBytev2__desc2 {
    color: #35456b;
}
.infoByte_v2.infoBytev2_census22_neutral .infoBytev2__desc2 {
    color: #283F73;
}

@media screen and (min-width: 567px) {
    .infoBytev2__desc2 {
        grid-area: 3 / 1 / 4 / 2;
    }
}
@media print {
    .infoBytev2__desc2 {
        grid-area: 3 / 1 / 4 / 2;
        color: #000 !important;
    }
}
.infoBytev2__footnote {
    color: #000;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 0.9rem; 
    grid-area: 4 / 1 / 5 / 2;
    justify-self: start;
    align-self: end;
    padding: 0 1rem 0.5rem;
}
.infoByte_v2.infoBytev2_silc_yellow .infoBytev2__footnote {
    color: #000;
}
.infoByte_v2.infoBytev2_lfs_purple .infoBytev2__footnote {
    color: #fff;
}
.infoByte_v2.infoBytev2_lfs_mint .infoBytev2__footnote {
    color: #07101a;
}
.infoByte_v2.infoBytev2_lfs_yellow .infoBytev2__footnote {
    color: #07101a;
}
.infoByte_v2.infoBytev2_neutral_teal .infoBytev2__footnote {
    color: #35456b;
}
.infoByte_v2.infoBytev2_neutral_grey .infoBytev2__footnote {
    color: #35456b;
}
.infoByte_v2.infoBytev2_census22_neutral .infoBytev2__footnote {
    color: #283F73;
}
@media screen and (min-width: 567px) {
    .infoBytev2__footnote {
        grid-area: 4 / 1 / 5 / 2;
        justify-self: start;
        align-self: start;
        padding: 0 1rem 0.25rem;
    }
}
@media print {
    .infoBytev2__footnote {
        grid-area: 4 / 1 / 5 / 2;
        justify-self: start;
        align-self: start;
        padding: 0 1rem 0.25rem;
        color: #333 !important;
    }
}
.infoBytev2__source {
    grid-area: 6 / 1 / 7 / 2;
    padding: 0.35rem 1rem;
    text-align: right;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: italic;
    font-size: 0.8rem; 
}
.infoByte_v2.infoBytev2_silc_yellow .infoBytev2__source {
    color: #07101a;
    background-color: #e37f26;
}
.infoByte_v2.infoBytev2_lfs_purple .infoBytev2__source {
    color: #07101a;
    background-color: #fbaa34; 
}
.infoByte_v2.infoBytev2_lfs_mint .infoBytev2__source {
    color: #fff;
    background-color: #35456b;
}
.infoByte_v2.infoBytev2_lfs_yellow .infoBytev2__source {
    color: #fff;
    background-color: #35456b;
}
.infoByte_v2.infoBytev2_neutral_teal .infoBytev2__source {
    color: #fff;
    background-color: #006f74;
}
.infoByte_v2.infoBytev2_neutral_grey .infoBytev2__source {
    color: #fff;
    background-color: #3D454C;
}
.infoByte_v2.infoBytev2_census22_neutral .infoBytev2__source {
    color: #DAF2ED;
    background-color: #35466C;
}

@media screen and (min-width: 567px){
    .infoBytev2__source {
        grid-area: 5 / 1 / 6 / 3;
    }
}
@media print {
    .infoBytev2__source {
        grid-area: 5 / 1 / 6 / 3;
        background: #fff !important;
        color: #333 !important;
        border-top: 1px solid #000;
    }
}

/* =======================
== CPI Mini-Viz Feature ==
======================= */

.prices-mini-viz {
    max-width: 960px;
    background-color: #F2F7Fa;
    padding: 0.25rem 0.5rem;
    margin-bottom: 1rem;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #283F73;
}

@media print {
    .prices-mini-viz {
        max-width: auto;
        page-break-inside: avoid;
    }
}

.prices-mini-viz h3 {
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
    font-weight: 600;
    size: 20px;
    color: #4463AA;
    margin-bottom: 0;
    padding-left: 1rem;
}

.prices-mini-viz h4 {
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 17px;
    color: #286B73;
    margin-top: 0;
    padding-left: 1rem;
}

.prices-mini-viz h6 {
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 16px;
    text-transform: none;
    color: #4463AA;
    margin: 0.5rem 0 0;
    padding-left: 1rem;
}

.prices-mini-viz footer {
    font-size: 15px;
    font-style: italic;
    margin: 0.5rem 0 0;
    padding-left: 1rem;
}

.prices-summary {
    display: grid;
    grid-gap: 1em;
    padding: 0.5em 1em 1em;
    grid-template-columns: 1fr;
}

@media screen and (min-width: 567px) {
    .prices-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1440px) {
    .prices-summary {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media print {
    .prices-summary {
        grid-template-columns: repeat(3, 1fr);
    }
}

.prices-item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
    background-color: #fff;
    padding: 0.5rem;
}

.prices-item-icon {
    grid-area: 1/1/2/2;
    justify-self: center;
    align-self: center;
}

.prices-item-icon img {
    max-width: 90px;
    max-height: 90px;
}

.prices-item-label {
    grid-area: 2/1/3/2;
    font-weight: 600;
    text-align: left;
    justify-self: start;
    align-self: center;
}

.prices-item-current {
    grid-area: 2/2/3/3;
    background-color: #5A6AB0;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    position: relative;
    width: auto;
    height: 30px;
    line-height: 30px;
    padding-left: 8px;
    padding-right: 20px;
    margin: 5px 10px 5px 22px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.price-time-label {
    position: absolute;
    font-size: 10px;
    right: 1px;
    top: 6px;
    background: #e4e5a8;
    color: #5a6ab0;
    rotate: 35deg;
    line-height: 1;
    padding: 0.1em 0.2em;
    border-radius: 2px;
}

.prices-item-current:before {
    content: '';
    position: absolute;
    left: -15px;
    bottom: 0;
    width: 0;
    height: 0;
    border-right: 15px solid #5A6AB0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.prices-item-current:after {
    content: "";
    position: absolute;
    top: 12px;
    left: -5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: -1px -1px 1px #283F73;
}

.prices-item-change {
    grid-area: 1/2/2/3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr;
    margin: 0.5rem;
    border-radius: 5px;
    background-color: #dae0f2;
    color: #4457aa;
}

.prices-item-change.up {
    background-color: #fae1e1;
}

.prices-item-change.down {
    background-color: #e4e5a8;
}

.price-change-indicator {
    text-align: right;
    background: #5A6AB0;
    color: #fff;
    text-transform: uppercase;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    padding: 0.25rem;
}
.price-change-indicator.price-change-lowercase {
    text-transform: none;
}

.price-item-text {
    text-align: right;
    align-self: center;
    justify-self: end;
    font-weight: 700;
    font-size: 28px;
    padding: 0.25rem;
}
.price-item-text.price-item-thousands {
    font-size: 24px;
}

/*.prices-item-change.same .price-item-text {
    font-size: 20px;
}*/

/* ==================

==== Dashboard Indicators ====

===================== */

   .dashboard-grid-container {
      background-color: #F2F7Fa;
      padding: 0.25rem 0.5rem;
      margin-bottom: 1rem;
      font-family: Roboto, Arial, Helvetica, sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #283F73;
   }
   @media print {
      .dashboard-grid-container {
        max-width: auto;
        page-break-inside: avoid;
      }
   }

   .dashboard-grid-container h3 {
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
    font-weight: 600;
    size: 20px;
    color: #4463AA;
    margin-bottom: 0;
    padding-left: 1rem;
}

.dashboard-grid-container h4 {
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 17px;
    color: #286B73;
    margin-top: 0;
    padding-left: 1rem;
}

.dashboard-grid-container h6 {
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 16px;
    text-transform: none;
    color: #4463AA;
    margin: 0.5rem 0 0;
    padding-left: 1rem;
}

.dashboard-grid-container footer {
    font-size: 15px;
    font-style: italic;
    margin: 0.5rem 0 0;
    padding-left: 1rem;
}

.dashboard-grid {
    display: grid;
    grid-gap: 1em;
    padding: 1em 1em 1em;
    grid-template-columns: 1fr;
}

@media screen and (min-width: 1024px) {
    .dashboard-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media screen and (min-width: 1280px) {
    .dashboard-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }
  
@media print {
   .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
   .dashboard-item header {
      background: #5A6AB0;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      padding: 0.75rem 0.25rem;
   }
   .dashboard-item header h4 {
      font-family: 'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
      font-weight: 400;
      font-size: 20px;
      color: #fff;
      margin: 0;
   }

   .dashboard-item-body {
      background: #fff;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      padding: 0.25rem;
   }
   .dashboard-item-indicator {
      text-align: right;
      margin-bottom: 0.25rem;
      padding: 0.5rem 0.25rem 0.25rem;
   }
   .dashboard-indicator-figure {
      font-family: 'Roboto Slab', Georgia, 'Times New Roman', Times, serif;
      font-size: 36px;
      font-weight: bold;
   }
   .dashboard-indicator-descriptor {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
 }

 .dashboard-indicator-period {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
 }

.dashboard-item-chart {
      padding: 0.25rem;
   }


 /* Adjust the height of the chart based on the width and height of the screeen to make more proportional
 */
 /* Small handheld devices */
 @media (max-width: 1439px) and (min-height:720px) { 
    .dashboard-item-chart .pxwidget .pxwidget-canvas-wrapper {
         height: 50vh;
     }
  }
 
  /* Medium handheld devices */
 @media (max-width: 1439px) and (min-height: 900px) { 
    .dashboard-item-chart .pxwidget .pxwidget-canvas-wrapper {
         height: 40vh;
     }
  }
 
  /* Large handheld devices  */
 @media (max-width: 1439px) and (min-height: 1080px) { 
    .dashboard-item-chart .pxwidget .pxwidget-canvas-wrapper {
         height: 32vh;
     }
  }
 /* Small displays  */
 @media (min-width: 1440px) and (min-height:720px) { 
    .dashboard-item-chart .pxwidget .pxwidget-canvas-wrapper {
         height: 40vh;
     }
  }
 
  /* Medium displays */
 @media (min-width: 1440px) and (min-height: 900px) { 
    .dashboard-item-chart .pxwidget .pxwidget-canvas-wrapper {
         height: 32vh;
     }
  }
 
  /* Large displays  */
 @media (min-width: 1440px) and (min-height: 1080px) { 
    .dashboard-item-chart .pxwidget .pxwidget-canvas-wrapper {
         height: 32vh;
     }
  }
  
 /* Extra displays */
@media (min-width: 1440px) and (min-height: 1440px) { 
   .dashboard-item-chart .pxwidget .pxwidget-canvas-wrapper {
        height: 25vh;
    }
 }


/* =============

SOLO GRID
Add a grid around other elements

    ============= */

    .solo-grid {
        display: grid;
        grid-column-gap: 1rem;
        grid-row-gap: 0.5rem;
        padding: 1rem 1rem 1rem;
        grid-template-columns: 1fr;
    }
    
    .solo-grid .shaded-bg {
    /* if the child div has a shaded-bg, add a bg colour and padding */
        background-color: #f5f6fa;
        padding: 1rem;
    }

    .solo-grid.purple, .solo-grid .shaded-bg.purple {
        background-color: #e6e9f2;
    }
    .solo-grid.grey {
        background-color: #f5f6fa;
    }
    .solo-grid.mint, .solo-grid .shaded-bg.mint {
        background-color: #e6f2f2;
    }
    .solo-grid.blue, .solo-grid .shaded-bg.blue {
        background-color: #f2f7fa;
    }
    .solo-grid.grid-centred {
        justify-items: center;
        align-items: center;
    }
    .solo-grid.no-padding {
        padding: 0;
    }

  
/* .solo-grid-2up = 2 cols at desktop */

    @media screen and (min-width: 567px) and (max-width: 767px) {
        .solo-grid.solo-grid-2up {
             grid-template-columns: repeat(1, 1fr);
         }
         .solo-grid.solo-grid-3up {
            grid-template-columns: repeat(2, 1fr);
        }
        .solo-grid.solo-grid-4up {
            grid-template-columns: repeat(2, 1fr);
        }
        /* grid utility - justify end for 2+ cols */
        .solo-grid.solo-grid-3up .grid-justify-end,
        .solo-grid.solo-grid-4up .grid-justify-end {
            justify-self: end;
        }    
    }
     
     @media screen and (min-width: 768px) and (max-width: 991px) {
        .solo-grid.solo-grid-2up {
             grid-template-columns: repeat(1, 1fr);
         }
         .solo-grid.solo-grid-3up {
            grid-template-columns: repeat(2, 1fr);
        }
        .solo-grid.solo-grid-4up {
            grid-template-columns: repeat(2, 1fr);
        }
        /* grid utility - justify end for 2+ cols */
        .solo-grid.solo-grid-3up .grid-justify-end,
        .solo-grid.solo-grid-4up .grid-justify-end {
            justify-self: end;
        }    
    }
     
     @media screen and (min-width: 992px) {
        .solo-grid.solo-grid-2up {
             grid-template-columns: repeat(2, 1fr);
         }
         .solo-grid.solo-grid-3up {
            grid-template-columns: repeat(3, 1fr);
        }
        .solo-grid.solo-grid-4up {
            grid-template-columns: repeat(4, 1fr);
        }
        /* apply grid utility here now that 2up displays 2 cols */
        .solo-grid.solo-grid-2up .grid-justify-end,
        .solo-grid.solo-grid-3up .grid-justify-end,
        .solo-grid.solo-grid-4up .grid-justify-end {
            justify-self: end;
        }    
    }
     
     @media print {
        .solo-grid.solo-grid-2up {
             grid-template-columns: repeat(2, 1fr);
         }
         .solo-grid.solo-grid-3up {
            grid-template-columns: repeat(3, 1fr);
        }
        .solo-grid.solo-grid-4up {
            grid-template-columns: repeat(4, 1fr);
        }
    }
 

    /* PRESENTATION TABLE STYLES */


    .presentation-table table,
    table.presentation-table {
        border: none;
        border-collapse: collapse;
        border-spacing: 0;
        margin: 0 0 1rem;
        table-layout: auto;
        width: auto;
    }
    .presentation-table table caption,
    table.presentation-table caption {
        font-family: "Roboto Slab", Georgia, 'Times New Roman', Times, serif;
        font-size: 1.3rem;
        margin-bottom: 1rem;
        text-align: left;
    }
    .presentation-table table thead tr,
    table.presentation-table thead tr {
        border-bottom: 2px solid #000;
    }
    .presentation-table table th,
    table.presentation-table th {
        font-weight: bold;
        text-align: left;
    }
    .presentation-table table thead th,
    .presentation-table table thead td,
    table.presentation-table thead th,
    table.presentation-table thead td {
        padding: 0.5rem;
        vertical-align: middle;
    }
    .presentation-table table tbody td,
    table.presentation-table tbody td {
        font-feature-settings: "tnum";
        padding: 0.5rem;
        vertical-align: middle;
    }
    .presentation-table.zebra-stripe table tbody tr:nth-child(even) td,
    table.presentation-table.zebra-stripe tbody tr:nth-child(even) td {
        background-color: rgba(230, 233, 242, 0.8);
    }
    .presentation-table table tbody tr:last-child,
    table.presentation-table tbody tr:last-child {
        border-bottom: 2px solid #000;
    }
    .presentation-table table tfoot td,
    table.presentation-table tfoot td {
        padding: 0.45rem;
        font-style: italic;
        font-size: 0.9rem;
    }
    .presentation-table table tfoot tr:last-child,
    table.presentation-table tfoot tr:last-child {
        border-bottom: 2px solid #000;
    }


