/*
  The site runs Bootstrap 3.3.4, but many views use Bootstrap 4 utility classes (d-flex,
  justify-content-center, mt-2, ...) that Bootstrap 3 doesn't have, so they did nothing.
  These are just the ones the views use, with Bootstrap 4's values. Sizes are in px
  (Bootstrap 4 spacers at a 16px root) because Bootstrap 3 sets html { font-size: 10px }.
  Spacing names the template already defines in px (mt-5, pl-5, mb-20, ...) are left to style.css.
*/

/* Display */
.d-none { display: none !important; }
.d-flex { display: flex !important; }
@media (min-width: 576px) { .d-sm-none { display: none !important; } }
@media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-block { display: block !important; } }
@media (min-width: 992px) { .d-lg-block { display: block !important; } }
@media (min-width: 1200px) { .d-xl-block { display: block !important; } }

/* Flex */
.flex-row { flex-direction: row !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-fill { flex: 1 1 auto !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.align-items-center { align-items: center !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }

/* Sizing */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* Spacing: 1 = 4px, 2 = 8px, 3 = 16px, 5 = 48px */
.m-3 { margin: 16px !important; }
.mt-2 { margin-top: 8px !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.ml-1 { margin-left: 4px !important; }
.ml-2 { margin-left: 8px !important; }
.ml-5 { margin-left: 48px !important; }
.mr-1 { margin-right: 4px !important; }
.mr-2 { margin-right: 8px !important; }
.p-1 { padding: 4px !important; }