p {
  max-width: 60ch;
}

pre {
  white-space: pre-line;
  max-width: 100%;
}

.fill-viewport {
  width: 100vw;
  height: 100vh;
}

[layout-children=row] {
  display: flex;
  flex-direction: row;
  align-items: center;

  /* make sure the children break nicely for different browser widths, e.g., tablet, phone, etc. */
  flex-wrap: wrap;
}

[layout-children=row-top] {
  display: flex;
  flex-direction: row;

  /* make sure the children break nicely for different browser widths, e.g., tablet, phone, etc. */
  flex-wrap: wrap;
}

/* can't think of a time at this point where we want the buttons to wrap inside a card. */
.mdl-card__actions[layout-children] {
  flex-wrap: nowrap;
}

[layout-children=column] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: calc(18px * 5); /* assume 5 codes per column, mdl-card__supporting-text's line-height is 18px */
  flex-wrap: wrap;
  padding-bottom: 1em;
}

.out-of-sight {
  position: absolute;
  right: 100%;
}

@media print {
  body * {
      visibility: hidden;
  }

  .printable-codes {
      position: fixed;
      top: 0;
      left: 0;
      width: 20em; /* based on the fact that a code and its checkbox take about 10 em's and there will be a max of 2 cols */
  }

  .printable-codes, .printable-codes * {
      visibility: visible;
  }
}

[child-spacing=space-around] {
  justify-content: space-around;
}

[child-spacing=space-between] {
  justify-content: space-between;
}

[child-spacing=center] {
  justify-content: center;
}

[child-spacing=end] {
  justify-content: flex-end;
}

form p.error {
  display: flex;
  flex-direction: row;
  align-items: center;
}

form p.error > i {
  margin: 0 1em;
}

i.material-icons.mdl-typography--display-4 {
  font-size: 112px; /* needed to override font-size established in material icons. */
}

.margin {
  margin: 1em;
}

.white-bg {
  background-color: white;
}

/* file entire card, so need to match mdl-card's min-height of 200px */
.fixed-height {
  height: 200px;
}

.fill-parent {
  width: 100%;
  height: 100%;
}

.scale-to-parent {
  max-width: 90%;
  max-height: 90%;
}

.hide {
  visibility: hidden;
}

.show {
  visibility: visible;
}

/* out-of-box styles for the cards don't work well when there are many cards */
.mdl-card {
  width: initial;
  margin: 1em;
}

/* cards on profile review needed to have consistent width */
.mdl-card.fixed-width {
  width: 365px; /* takes into acocunt "... (10 remaining)" for appropriate width */
}

/* don't want images to be too small on cards */
.mdl-card__media > img {
  min-width: 20%;
}

/* phones (2 cards / row) */
@media only screen and (min-width : 320px) {
  .mdl-card.row-aware {
    min-width: calc(50% - 2em);
    max-width: calc(50% - 2em);
  }

  .mdl-card.fill-phone-viewport {
    height: 100vh;
    width: 100vw;
  }
}
/* phones, small tablets, landscape */
@media only screen and (min-width : 600px) {
  /*  (3 cards / row) */
  .mdl-card.row-aware {
    min-width: calc(33% - 2em);
    max-width: calc(33% - 2em);
  }

  .mdl-card.fill-phone-viewport {
    height: auto;
    width: auto;
  }
}
/* tablets, small desktops */
@media only screen and (min-width : 850px) {
  /*  (4 cards / row) */
  .mdl-card.row-aware {
    min-width: calc(25% - 2em);
    max-width: calc(25% - 2em);
  }

  .mdl-card.fill-phone-viewport {
    height: auto;
    width: auto;
  }
}
/* desktops */
@media only screen and (min-width : 1024px) {
  /*  (5 cards / row) */
  .mdl-card.row-aware {
    min-width: calc(20% - 2em);
    max-width: calc(20% - 2em);
  }

  .mdl-card.fill-phone-viewport {
    height: auto;
    width: auto;
  }
}

.mdl-card.disabled, .mdl-button[disabled].not-allowed, a[href=''][download].mdl-button--disabled.not-allowed {
  cursor: not-allowed;
}

.mdl-card.disabled img {
  opacity: 0.3;
}

.alert {
  max-width: 80%;
  min-width: 30%;
  background-color: tomato;
  border-radius: 0.33em;
  padding: 1em;

  /* had to center manually instead of using flex due to ie11 bug that
     was causing idp cards not to wrap when parent container was centered
   */
  margin-left: auto;
  margin-right: auto;
}

.alert a {
  color: blue;
}

/* The font-size in the mdl-textfield was overriding the one in caption since 
   it was defined later in the CSS but the font-size from caption is what was 
   needed here so more specificity required to override it back */
.mdl-textfield.mdl-typography--caption {
  font-size: 12px
}


/* special case where we want a button for all it's built-in characteristics, 
e.g., primary color, but also want to set the text apart a bit. */
.mdl-button.mdl-typography--caption {
  text-transform: none;
  font-size: 12px
}
a.mdl-button.mdl-typography--body-2, a.mdl-button.mdl-typography--body-2 > i.material-icons {
  text-transform: none;
  font-size: 14px
}

/* didn't feel like the padding was enough out of the box */
.mdl-card__actions {
  padding: 1em;
}

/* needed ability to center text in these card titles at times */
.mdl-card__title.center {
  justify-content: center;
}

[flex] {
  flex: 1;
}

.gradient-bg {
  background: linear-gradient(rgba(200,200,200,1) 0%,
                              rgba(250,250,250,1) 50%,
                              rgba(200,200,200,1) 100%);
}

.mdl-card > .mdl-card__media > img.icon {
  max-width: 24px;
}

/* Material icons */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(material-icons.woff2) format('woff2'),
       url(material-icons.woff) format('woff');
}