img { max-width: 100%; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.text-align-center { text-align: center; }
.text-align-left { text-align: left; }
.text-align-right { text-align: right; }
.float-left { float: left; }
.float-right { float: right; }
.transparent { opacity: 0; }
.white-sparce-nowrap { white-space: nowrap; }
.dashed { border-style: dashed; }
.dotted { border-style: dotted; }
.no-border { border: 0 solid transparent !important; }
.underline { text-decoration: underline; }
.text-decoration-none { text-decoration: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.flex-grow { flex-grow: 1; }
.flex-end { align-self: flex-end; }
svg path { stroke: inherit; }

.clearfix {
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after { clear: both; }
}

.ellipsis {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

// Screenreader only
.sr-only {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

// Create visual consistency for box elements and clear
// top and bottom margins
.module {
  > *:first-child { margin-top: 0; }
  > *:last-child { margin-bottom: 0; }
}

//make element fullwidth without breaking bootstrap structure
.fullwidth {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.margin-minus {
  margin-left: calc(-1*(1rem + 15px));
  margin-right: calc(-1*(1rem + 15px));
}