:root {
  --ml-card-mw: 115px;
  --ml-card-tight-mw: 115px;
  --ml-card-wide-mw: 160px;
  --ml-card-blue: #1e5278;
  --ml-card-lightBlue: #2e85f0;
  --ml-card-background: #fff;
  --ml-card-surface-background: #fff;
}

.ml-MLResponsiveGrid-wrapper {
  padding-bottom: 8vh;
}

/* ---- Card Styles ---- */
.ml-responsive-cards {
  display: flex;	
  flex-flow: row wrap;	
}

.ml-responsive-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 160px));
  grid-gap: 1rem;
}

.ml-responsive-cards-grid-sm {
  display: grid;
  grid-template-columns: repeat(auto-fill, 95px);
  grid-gap: 0.625rem;
}

/* --- White Cards --- */
.ml-card-surface {
  position: relative;
  box-sizing: border-box;
  background-color: var(--ml-card-surface-background);
  border: 1px solid #bfbfbf;
  border-radius: 0px; 
  padding: 1rem;
}

.ml-card-surface-lin {
  display: block;
}

.ml-card-surface-link .ml-card-title {
  font-size: .85rem;
  line-height: 1.475rem;
  padding: 0;
}

.ml-card-surface-link .ml-card-surface { 
  -webkit-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}

.ml-card-surface-link .ml-card-surface:hover {
  border-width: 2px;
}

.ml-card-surface::before {
  content: "";
  padding-top: 100%;
  display: block;
}

.ml-card-surface .ml-card-surface-content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.ml-card-surface .ml-card-surface-content > div {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  position: relative;
  top: 1rem;
}

.ml-card-surface .ml-card-content img,
.ml-card-surface .ml-card-content svg {
  width: 140px;
  height: 60px;
}

.ml-responsive-cards-grid-sm .ml-card-surface .ml-card-content { 
  padding: 0px;
}

.ml-responsive-cards-grid-sm .ml-card-surface .ml-card-content svg {
  width: 90px;
  height: 40px;
  padding: 0px;
}

.ml-responsive-cards-grid-sm .ml-card-surface .ml-card-title {
  padding: 0px;
  font-size: 0.625rem;
}

.ml-card-surface .ml-card-title {
  color: #7a8d9f;
  font-weight: 400;
}

/* --- Blue, multi-item cards --- */
.ml-card {
  border-radius: 5px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  background-color: var(--ml-card-background);
  margin: 15px;
  min-height: 158px;
 
}

.ml-card-boot {
  border-radius: 5px;
  background-color: var(--ml-card-background);
  min-height: 164px;
  border: 1px dashed #b5ccdb;
}

.ml-card-boot .ml-card-item {
  height: 100px;
  min-width: 100px;
}

.ml-card-boot-tall {
  border-radius: 5px;
  background-color: var(--ml-card-background);
  border: 1px dashed #b5ccdb;
  height: 100%;
}

.ml-card-boot-tall .ml-card-item {
  padding-bottom: 0.5rem;
  min-width: 100px;
}

.ml-card:last-child {
  margin-bottom: 0px;
}

.ml-card-title {
  color: var(--ml-card-blue);
  text-align: center;
  padding: 8px 8px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2307692308;
  min-width: 0px;
}

.ml-card-w-subtitle > div:first-child {
  padding-bottom: 5px;
}

.ml-card-w-subtitle > div:nth-child(2) {
  color: #fff;
  text-align: center;
  font-size: 11px;
  line-height: 1.4545454545;
  padding-bottom: 10px;
}

.ml-card-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 10px 15px 10px;
  min-width: 0px;  
}

.ml-card-content > div {
  min-width: var(--ml-card-mw);  
}

.ml-card-tight .ml-card-content > div {
  min-width: var(--ml-card-tight-mw);
}

.ml-card-wide .ml-card-content > div {
  min-width: var(--ml-card-wide-mw);
}

.ml-card-content > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ml-card-content > div svg {
  line-height: 0px;
}

.ml-card-content.ml-card-svg-row {
  flex-direction: column;
}

.ml-card-content.ml-card-svg-row > div:first-child {
  flex-direction: row;
  justify-content: space-between;
}

.ml-card-content > div > div {
  text-align: center;
}

.ml-card-bullet-list .ml-card-content {
  align-items: flex-start;
}

.ml-card-bullet-list .ml-card-content ul {
  margin: 0;
}

.ml-card-bullet-list .ml-card-content li {
  color: #fff;
  font-size: 11px;
  line-height: 1.4545454545;
  padding: 0;
}

.ml-card-desc {
  color: #1e5278; 
  font-size: 11px; 
  line-height: 1.4545454545;
  padding: 0 5px;
}

.ml-card-1-item {
  flex-basis: 215px;
}

.ml-card-2-item {
  flex-basis: 250px;
}

.ml-card-2-item-wide {
  flex-basis: 290px;
}

.ml-card-3-item {
  flex-basis: 390px;
}

.ml-card-3-item-tight {
  flex-basis: 345px;
}

.ml-card-3-item-wide {
  flex-basis: 480px;
}

.ml-card-4-item {
  flex-basis: 520px;
}

.ml-card-4-item-tight {
  flex-basis: 460px;
}

.ml-card-stacked-4-item {
  flex: 0 0 360px;
}

.ml-card-stacked-4-item .ml-card-content {
  flex-flow: row wrap;
}

.ml-card-stacked-4-item .ml-card-content > div {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 10px;
}

.ml-card-stacked-4-item .ml-card-content > div:nth-child(-n + 2) {
  padding-bottom: 10px;
}

.ml-card-stacked-4-item .ml-card-content > div > .ml-card-desc {
  padding-left: 5px;
}

.ml-card-5-item {
  flex-basis: 650px;
}

.ml-card-6-item {
  flex-basis: 780px;
}

.ml-card-7-item {
  flex-basis: 910px;
}

.ml-card-8-item {
  flex-basis: 1040px;
}

.ml-card-9-item {
  flex-basis: 1170px;
}

.ml-card-10-item {
  flex-basis: 1300px;
}

.ml-card-11-item {
  flex-basis: 1430px;
}

.ml-card-span-2 {
  flex-basis: 260px;
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {    

    .ml-responsive-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(145px, 160px));
      grid-gap: 1rem;
      justify-content: center;
    }

    .ml-card-3-item,
    .ml-card-3-item-tight,
    .ml-card-3-item-wide,
    .ml-card-4-item,
    .ml-card-4-item-tight,
    .ml-card-4-item-wide,
    .ml-card-5-item,
    .ml-card-6-item {
      flex-basis: 336px;
    }

    .ml-card-3-item .ml-card-content,
    .ml-card-3-item-tight .ml-card-content,
    .ml-card-3-item-wide .ml-card-content,
    .ml-card-4-item .ml-card-content,
    .ml-card-4-item-tight .ml-card-content,
    .ml-card-4-item-wide .ml-card-content,
    .ml-card-5-item .ml-card-content,
    .ml-card-6-item .ml-card-content {
      flex-flow: row wrap;
      justify-content: center;
    }

    .ml-card-bullet-list .ml-card-content {
      justify-content: flex-start;
    }

    .ml-card-2-item .ml-card-content > div,
    .ml-card-3-item .ml-card-content > div,
    .ml-card-3-item-wide .ml-card-content > div,
    .ml-card-4-item .ml-card-content > div,
    .ml-card-4-item-wide .ml-card-content > div {
      max-width: var(--ml-card-mw);
    }

    .ml-card-3-item-tight .ml-card-content > div,
    .ml-card-4-item-tight .ml-card-content > div {
      max-width: var(--ml-card-mw);
    }

    .ml-card-3-item .ml-card-content > div:nth-child(-n + 2),
    .ml-card-3-item-wide .ml-card-content > div:nth-child(-n + 2),
    .ml-card-3-item-tight .ml-card-content > div:nth-child(-n + 2),
    .ml-card-4-item .ml-card-content > div:nth-child(-n + 2),
    .ml-card-4-item-wide .ml-card-content > div:nth-child(-n + 2),    
    .ml-card-4-item-tight .ml-card-content > div:nth-child(-n + 2),
    .ml-card-5-item .ml-card-content > div:nth-child(-n + 4),
    .ml-card-6-item .ml-card-content > div:nth-child(-n + 5),
    .ml-card-8-item .ml-card-content > div:nth-child(-n + 6) {
      padding-bottom: 10px;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
    .ml-card-3-item,
    .ml-card-3-item-tight,
    .ml-card-3-item-wide,
    .ml-card-4-item,
    .ml-card-4-item-tight,
    .ml-card-4-item-wide,
    .ml-card-5-item,
    .ml-card-6-item {
      flex-basis: 500px;
    }
}

@media only screen 
and (max-width: 476px) {
  .ml-responsive-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 160px));
    grid-gap: 1rem;
    justify-content: center;
  }

  .ml-card-3-item .ml-card-content > div {
    max-width: var(--ml-card-mw);
  }

  .ml-card-3-item-tight .ml-card-content > div {
    max-width: var(--ml-card-tight-mw);
  }

  .ml-card-3-item,
  .ml-card-3-item-tight .ml-card-content > div {
    flex-basis: 450px;
  }

  .ml-card-3-item .ml-card-content,
  .ml-card-3-item-tight .ml-card-content {
    flex-flow: row wrap;
    justify-content: space-between;
  }

  .ml-card-3-item .ml-card-content > div:nth-child(-n + 2),
  .ml-card-3-item-tight .ml-card-content > div:nth-child(-n + 2) {
    padding-bottom: 10px;
  }
}

@media only screen 
  and (max-width: 576px) {
    .ml-card-3-item-wide .ml-card-content > div,
    .ml-card-4-item .ml-card-content > div,
    .ml-card-4-item-wide .ml-card-content > div {
      max-width: var(--ml-card-mw);
    }

    .ml-card-4-item-tight .ml-card-content > div {
      max-width: var(--ml-card-tight-mw);
    }

    .ml-card-3-item-wide,
    .ml-card-4-item,
    .ml-card-4-item-wide,
    .ml-card-4-item-tight {
      flex-basis: 450px;
    }

    .ml-card-3-item-wide .ml-card-content,
    .ml-card-4-item .ml-card-content,
    .ml-card-4-item-wide .ml-card-content,
    .ml-card-4-item-tight .ml-card-content {
      flex-flow: row wrap;
      justify-content: space-evenly;
    }

    .ml-card-3-item-wide .ml-card-content > div:nth-child(-n + 2),
    .ml-card-4-item .ml-card-content > div:nth-child(-n + 2),
    .ml-card-4-item-wide .ml-card-content > div:nth-child(-n + 2),
    .ml-card-4-item-tight .ml-card-content > div:nth-child(-n + 2) {
      padding-bottom: 10px;
    }
}

/* --- Media Queries --- */
@media only screen 
  and (max-width: 1200px) {
    .ml-card-6-item .ml-card-content > div,
    .ml-card-7-item .ml-card-content > div {
      max-width: var(--ml-card-mw);
    }

    .ml-card-7-item-tight .ml-card-content > div {
      max-width: var(--ml-card-tight-mw);
    }

    .ml-card-6-item,
    .ml-card-7-item,
    .ml-card-7-item-tight {
      flex-basis: 450px;
    }      

    .ml-card-8-item {
      flex-basis: 709px;
    }

    .ml-card-6-item .ml-card-content,
    .ml-card-7-item .ml-card-content,
    .ml-card-7-item-tight .ml-card-content,
    .ml-card-8-item .ml-card-content,
    .ml-card-9-item .ml-card-content,
    .ml-card-10-item .ml-card-content,
    .ml-card-11-item .ml-card-content {
      flex-flow: row wrap;
      justify-content: space-evenly;
    }

    .ml-card-6-item .ml-card-content > div:nth-child(-n + 4),
    .ml-card-7-item .ml-card-content > div:nth-child(-n + 6),
    .ml-card-7-item-tight .ml-card-content > div:nth-child(-n + 6),
    .ml-card-8-item .ml-card-content > div:nth-child(-n + 4) {
      padding-bottom: 10px;
    }
}    

@media only screen
  and (min-width: 1400px) {
    .ml-responsive-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(145px, 160px));
      grid-gap: 1rem;
      max-width: 60vw;
      margin-left: auto;
      margin-right: auto;
    }

    .ml-card-8-item .ml-card-content > div,
    .ml-card-9-item .ml-card-content > div,
    .ml-card-10-item .ml-card-content > div,
    .ml-card-11-item .ml-card-content > div {
      max-width: var(--ml-card-mw);
    }    

    .ml-card-8-item {
      flex-basis: 709px;
    }
    
    .ml-card-8-item .ml-card-content,
    .ml-card-9-item .ml-card-content,
    .ml-card-10-item .ml-card-content,
    .ml-card-11-item .ml-card-content {
      flex-flow: row wrap;
      justify-content: space-evenly;
    }

    .ml-card-8-item .ml-card-content > div:nth-child(-n + 4) {
      padding-bottom: 10px;
    }
}
 
@media (min-width: 1920px) {
  .ml-responsive-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 175px));
    grid-gap: 1rem;
    max-width: 60vw;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Fill Colors */
.ml-dash-link-onSurface {
  fill: var(--ml-card-surface-background);
}

.ml-dash-block-darkBlue {
  fill: var(--ml-card-blue);
}

.ml-dash-block-lightBlue {
  fill: var(--ml-card-lightBlue);
}

/*
@media (min-width: 2560px) {
  ml-responsive-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 200px));
    grid-gap: 1rem;
    max-width: 70vw;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 2880px) {
  ml-responsive-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 160px));
    grid-gap: 1rem;
    max-width: 70vw;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 3840px) {
  ml-responsive-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 160px));
    grid-gap: 1rem;
    max-width: 70vw;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 4096px) {
  ml-responsive-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 160px));
    grid-gap: 1rem;
    max-width: 70vw;
    margin-left: auto;
    margin-right: auto;
  }
} */