/* 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: stretch;
    }
}

.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;
}*/

/* ===============
=== RSI Mini Viz ===
================== */
.prices-mini-viz.solo-indicator {
    padding: 1rem;
}
.prices-mini-viz.sidebar-indicator {
    margin-top: 1.5rem;
}
.prices-mini-viz.sidebar-indicator header h3 {
    padding-left: 0;
    margin-top: 0;
}
.prices-mini-viz.sidebar-indicator header h4 {
    padding-left: 0;
}
.prices-mini-viz.sidebar-indicator img {
    display:none;
}
@media screen and (min-width: 1024px) {
    .prices-mini-viz.sidebar-indicator img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
.prices-mini-viz .change-indicator {
    background-color: #fff;
    padding:0.5rem;
    border-radius: 2px;
    margin-top: 1rem;
}
.prices-mini-viz.sidebar-indicator .change-indicator h3 {
    padding: 0 0 0.45rem 0.5rem;
    margin-top:0;
    font-size: 18px;
}
.prices-mini-viz .change-indicator-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 1rem;
}
@media screen and (min-width: 1024px) and (max-width: 1399px) {
    .prices-mini-viz .change-indicator-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        grid-gap: 0.1rem;
    }
}
.prices-mini-viz .change-indicator-grid .prices-item-change {
    grid-area: auto;
}

.prices-mini-viz .change-indicator .price-change-indicator {
    text-align: left;
    padding: 0.25rem 0.5rem;
}

.prices-mini-viz .change-indicator .price-item-text {
    font-size: 18px;
    text-align: left;
    justify-self: start;
    padding: 0.25rem 0.5rem;
}


/* ==================

==== 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 {
        background-color: #f5f6fa;
    }
    
    .solo-grid .shaded-bg, .solo-grid .shaded-bg.cobalt {
    /* 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: #F3FAF7;
    }
    .solo-grid.blue, .solo-grid .shaded-bg.blue {
        background-color: #F1F7F9;
    }
    .solo-grid.teal, .solo-grid .shaded-bg.teal {
        background-color: #F3FAFA;
    }
    .solo-grid.grid-centred {
        justify-items: center;
        align-items: center;
    }
    .solo-grid.no-padding {
        padding: 0;
    }

    .solo-grid .self-centred {
        
    }
    .solo-grid .self-right {

    }
    .solo-grid .self-left {

    }

    .solo-grid iframe {
        max-width: 100%;
    }
  
/* .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);
        }
    }

    .solo-grid .sub-grid {
        display: grid;
    }
    .solo-grid .sub-grid.sub-rows-2x {
        grid-template-rows: subgrid;
        grid-row: span 2;
    }
 

    /* PRESENTATION TABLE STYLES */

/* this allows tables to scroll horizontally on mobile. Wrap around the table. */
.mobile-table-wrapper {
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    /* resize: horizontal; */
}

    .presentation-table table,
    table.presentation-table {
        border: none;
        border-collapse: collapse;
        border-spacing: 0;
        margin: 0 0 1rem;
        table-layout: auto;
        width: fit-content;
    }
    .presentation-table.pub-info-table table,
    table.presentation-table.pub-info-table {
        margin-bottom: 2rem;
    }
    .presentation-table.full-width table,
    table.presentation-table.full-width {
        width: 100%;
    } 
    .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.pub-info-table table caption,
    table.presentation-table.pub-info-table caption {
        background-color: rgba(230, 233, 242, 0.7);
        padding: 1rem 0.5rem;
        font-size: 1.1rem;
        margin: 0.5rem 0;
        border-bottom: 2px solid #000;
        font-family: inherit;
    }
    .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.wide-spacing table thead th,
    .presentation-table.wide-spacing table thead td,
    table.presentation-table.wide-spacing thead th,
    table.presentation-table.wide-spacing thead td {
        padding: 1rem;
        color: #5f6a73;
    }
    .presentation-table table tbody td,
    table.presentation-table tbody td,
    .presentation-table table tbody th,
    table.presentation-table tbody th {
        font-feature-settings: "tnum";
        padding: 0.5rem;
        vertical-align: middle;
    }
    .presentation-table.wide-spacing table tbody td,
    table.presentation-table.wide-spacing tbody td,
    .presentation-table table.wide-spacing tbody th,
    table.presentation-table.wide-spacing tbody th {
        padding: 1rem;
    }
    .presentation-table.zebra-stripe table tbody tr:nth-child(odd) td,
    table.presentation-table.zebra-stripe tbody tr:nth-child(odd) td,
    .presentation-table.zebra-stripe table tbody tr:nth-child(odd) th,
    table.presentation-table.zebra-stripe tbody tr:nth-child(odd) th {
        background-color: rgba(230, 233, 242, 0.7);
    }
    .presentation-table.lined-table table tbody td,
    table.presentation-table.lined-table tbody td {
        border-bottom: 2px solid #ADBECC;
        padding: 0.75rem;
    }
    .presentation-table table.lined-table tbody th,
    table.presentation-table.lined-table tbody th {
        border-bottom: 2px solid #ADBECC;
        padding: 0.75rem;
        background-color: #F2F7FA;
    }
    .presentation-table.schedule-table table tbody td,
    table.presentation-table.schedule-table tbody td {
        border: 2px solid #ADBECC;
        border-width: 0 2px 2px;
        padding: 0.75rem;
    }
    .presentation-table.schedule-table table tbody tr:nth-child(4n-3) td.event,
    table.presentation-table.schedule-table tbody tr:nth-child(4n-3) td.event {
        background-color: #daf0f2;
    }
    .presentation-table.schedule-table table tbody tr:nth-child(4n-2) td.event,
    table.presentation-table.schedule-table tbody tr:nth-child(4n-2) td.event {
        background-color: #fff8e5;
    }
    .presentation-table.schedule-table table tbody tr:nth-child(4n-1) td.event,
    table.presentation-table.schedule-table tbody tr:nth-child(4n-1) td.event {
        background-color: #daf2e9;
    }
    .presentation-table.schedule-table table tbody tr:nth-child(4n) td.event,
    table.presentation-table.schedule-table tbody tr:nth-child(4n) td.event {
        background-color: #E6E9F2;
    }
.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;
    }


/* MEDIA GRID for 2 col layout of fixed-width image or video beside text */

.media-grid {
    display: grid;
    grid-column-gap: 1rem;
    grid-row-gap: 0.5rem;
    padding: 1rem 1rem 1rem;
    grid-template-columns: 1fr;

}
.media-grid.grid-centred {
    justify-items: center;
    align-items: center;
}
.media-grid.no-padding {
    padding: 0;
}
@media screen and (min-width: 1600px) {
    .media-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.media-grid iframe {
    max-width: 100%;
}


/* .block-link-gallery +.block-link-grid || .block-link-list
   > .block-link-item > div > img
   + > .block-link-item > .block-link-content > h3 + div [ > p ] + div [ > btn ]
*/

.block-link-item {
    background-color: #F5F6FA;
    padding: 1rem 1.5rem;
    border-bottom: none;
    margin: 1rem 0;
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
 }
 @media screen and (min-width: 960px) {
    .block-link-item {
       flex-direction: row;
    }
    /* .block-link-item:nth-child(even) {
       flex-direction: row-reverse;
    } */
 }
 
 .block-link-item > div:not(:first-child) {
    margin-left: 1.5rem;
 }
 
 .block-link-content {
    display:flex;
    flex-direction: column;
    align-content: flex-start;
    flex:1;
 }
 
 .block-link-content h3 {
    font-size: 1.45rem;
    font-weight: 700;
    color: #5b6670;
 }
 
 .block-link-content.green h2 { color: #006168; }
 .block-link-content.softgreen h2 { color: #579599; }
 .block-link-content.mint h2 { color: #00A881; }
 .block-link-content.teal h2 { color: #00A3A0; }
 .block-link-content.purple h2 { color: #35456B; }
 .block-link-content.violet h2 { color: #725499; }
 .block-link-content.cobalt h2 { color: #4463aa; }
 .block-link-content.magenta h2 { color: #ab4d88; }
 .block-link-content.pink h2 { color: #d3205c; }
 .block-link-content.csogrey h2 { color: #5b6670; }
 .block-link-content.csoblue h2 { color: #0099b4; }
 
 .block-link-content p {
    color: #5b6670;
    font-family: "Roboto Slab", Times New Roman, Georgia, serif;
    font-size: 1.1rem;
 }
 
 .block-link-content > div {
    flex: 1;
 }
  .block-link-content > div:last-child {
    display:grid;
    grid-auto-flow: column;
    grid-gap: 1rem;
    justify-content: flex-start;
    align-items: flex-end;
    margin-bottom: 0.5rem;
 } 
 
 .block-link-item.margin-top-4x {
    margin-top: 4rem;
 }
 
 .block-link-item.margin-top-6x {
    margin-top: 6rem;
 }