.grid {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 0;
    /**
     * Temporary hack to be sure avatar
     * is rendered on print preview
     */
    display: block !important;
}
  
.grid .grid {
    margin-left: -1em;
    margin-right: -1em;
}
  
/* Rows */
.grid > .row {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: inherit;
  align-items: stretch;
  width: 100% !important;
  padding: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Columns */
/* Standard 16 column */
.grid > .column:not(.row),
  .grid > .row > .column {
  position: relative;
  display: inline-block;
  width: 6.25%;
  padding-left: 1rem;
  padding-right: 1rem;
  vertical-align: top;
}
  
.grid > * {
  padding-left: 1rem;
  padding-right: 1rem;
}
  
/* Columns */
/* Vertical padding when no rows */
  
.grid > .column:not(.row) {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
  
.grid > .row > .column {
  margin-top: 0;
  margin-bottom: 0;
}
  
/* Assume full width with one column */
.grid > .column:only-child,
  .grid > .row > .column:only-child {
  width: 100%;
}
  
/* Column Width */
.grid > .row > [class*="one wide"].column,
  .grid > .column.row > [class*="one wide"].column,
  .grid > [class*="one wide"].column,
  .column.grid > [class*="one wide"].column {
    width: 6.25% !important;
}

.grid > .row > [class*="two wide"].column,
  .grid > .column.row > [class*="two wide"].column,
  .grid > [class*="two wide"].column,
  .column.grid > [class*="two wide"].column {
    width: 12.5% !important;
}

.grid > .row > [class*="three wide"].column,
  .grid > .column.row > [class*="three wide"].column,
  .grid > [class*="three wide"].column,
  .column.grid > [class*="three wide"].column {
    width: 18.75% !important;
}

.grid > .row > [class*="four wide"].column,
  .grid > .column.row > [class*="four wide"].column,
  .grid > [class*="four wide"].column,
  .column.grid > [class*="four wide"].column {
    width: 25% !important;
}

.grid > .row > [class*="five wide"].column,
  .grid > .column.row > [class*="five wide"].column,
  .grid > [class*="five wide"].column,
  .column.grid > [class*="five wide"].column {
    width: 31.25% !important;
}

.grid > .row > [class*="six wide"].column,
  .grid > .column.row > [class*="six wide"].column,
  .grid > [class*="six wide"].column,
  .column.grid > [class*="six wide"].column {
    width: 37.5% !important;
}

.grid > .row > [class*="seven wide"].column,
  .grid > .column.row > [class*="seven wide"].column,
  .grid > [class*="seven wide"].column,
  .column.grid > [class*="seven wide"].column {
    width: 43.75% !important;
}

.grid > .row > [class*="eight wide"].column,
  .grid > .column.row > [class*="eight wide"].column,
  .grid > [class*="eight wide"].column,
  .column.grid > [class*="eight wide"].column {
    width: 50% !important;
}

.grid > .row > [class*="nine wide"].column,
  .grid > .column.row > [class*="nine wide"].column,
  .grid > [class*="nine wide"].column,
  .column.grid > [class*="nine wide"].column {
    width: 56.25% !important;
}

.grid > .row > [class*="ten wide"].column,
  .grid > .column.row > [class*="ten wide"].column,
  .grid > [class*="ten wide"].column,
  .column.grid > [class*="ten wide"].column {
    width: 62.5% !important;
}

.grid > .row > [class*="eleven wide"].column,
  .grid > .column.row > [class*="eleven wide"].column,
  .grid > [class*="eleven wide"].column,
  .column.grid > [class*="eleven wide"].column {
    width: 68.75% !important;
}

.grid > .row > [class*="twelve wide"].column,
  .grid > .column.row > [class*="twelve wide"].column,
  .grid > [class*="twelve wide"].column,
  .column.grid > [class*="twelve wide"].column {
    width: 75% !important;
}

.grid > .row > [class*="thirteen wide"].column,
  .grid > .column.row > [class*="thirteen wide"].column,
  .grid > [class*="thirteen wide"].column,
  .column.grid > [class*="thirteen wide"].column {
    width: 81.25% !important;
}

.grid > .row > [class*="fourteen wide"].column,
  .grid > .column.row > [class*="fourteen wide"].column,
  .grid > [class*="fourteen wide"].column,
  .column.grid > [class*="fourteen wide"].column {
    width: 87.5% !important;
}

  .grid > .row > [class*="fifteen wide"].column,
  .grid > .column.row > [class*="fifteen wide"].column,
  .grid > [class*="fifteen wide"].column,
  .column.grid > [class*="fifteen wide"].column {
    width: 93.75% !important;
}

.grid > .row > [class*="sixteen wide"].column,
  .grid > .column.row > [class*="sixteen wide"].column,
  .grid > [class*="sixteen wide"].column,
  .column.grid > [class*="sixteen wide"].column {
    width: 100% !important;
}
  
  /* Center Aligned */
[class*="center aligned"].grid > .column,
  [class*="center aligned"].grid > .row > .column,
  .grid > [class*="center aligned"].row > .column,
  .grid > [class*="center aligned"].column.column,
  .grid > .row > [class*="center aligned"].column.column {
    text-align: center;
}
  
  /* Stackable */
@media only screen and (max-width: 767px) {
    .stackable.grid > .row > .wide.column,
    .stackable.grid > .wide.column,
    .stackable.grid > .column.grid > .column,
    .stackable.grid > .column.row > .column,
    .stackable.grid > .row > .column,
    .stackable.grid > .column:not(.row),
    .grid > .stackable.row > .column {
      width: 100% !important;
      padding: 1em !important;
    }
}
  
  /* Mobile only column */
[class*="mobile only"].grid,
  .grid > [class*="mobile only"].row,
  .grid > [class*="mobile only"].column,
  .grid > .row > [class*="mobile only"].column {
    display: none;
}

@media only screen and (max-width: 767px) {
    [class*="mobile only"].grid,
    .grid > [class*="mobile only"].row,
    .grid > [class*="mobile only"].column,
    .grid > .row > [class*="mobile only"].column {
      display: block;
    }
}