.float-left {
  float: left
}

.float-right {
  float: right
}

.text-left, [align="left"] {
  text-align: left !important
}

.text-center, .bool {
  text-align: center !important
}

.text-right, [align="right"], .number, .date {
  text-align: right !important
}

.text-muted {
  color: gray
}

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

.number, .date {
  white-space: nowrap
}

.text-info {
  color: blue
}

.text-ok {
  color: green
}

.text-contrast {
  color: white
}

.text-warning {
  color: orange
}

.text-danger {
  color: red
}

[class^="bg-"] {
  padding: .5em 1.5em
}

.big {
  font-size: 2em
}

.bigger {
  font-size: 3em
}

.dummy {
  info: #00728f; 
  danger: #fd4b54;
  warning: #fab300;
  ok: #008890;
}

.bg-white {
  color: white
}

.bg-info {
  background: #5e5efb;
  color: white
}

.bg-ok {
  background: #008000;
  color: white
}

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

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

.tertiary-border {
  border-color: $tertiary-color
}

.bordered {
  border-width: 1px
}

.bordered-1 {
  border-width: 1px
}

.bordered-2 {
  border-width: 2px
}

.bordered-4 {
  border-width: 4px
}

.dashed {
  border-style: dashed
}

.hide {
  display: none
}

.padded {
  padding: 1rem
}

.uppercase {
  text-transform: uppercase
}