/* Extend bootstrap and other library classes. */

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.display-5 {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-6 {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;
}

.font-weight-400 {
  font-weight: 400;
}

.cursor-pointer {
  cursor: pointer;
}

.display-none {       /* Avoids important, that's in d-none */
  display: none;
}

.text-strike {
  text-decoration: line-through;
}

/* Another color that's a light gray. table-light is very close to white. Worked off secondary color, reducing lightness. */
.table-lightgray tbody+tbody, .table-lightgray td, .table-lightgray th, .table-lightgray thead th {
  border-color: #d6d7db;
}
.table-lightgray, .table-lightgray > th, .table-lightgray > td {
  background-color: #f7f7f8;
}

.border-lightgray {
  border-color: #d6d7db;
}

/* Use table cell classes and 1% style above to set first column to fit widest label among all the rows.
    https://stackoverflow.com/questions/50525211/cannot-get-bootstrap-4-horizontal-form-to-work-as-required/50625702#50625702
*/
.fit-widest-label.d-table-cell,
.fit-widest-label.d-sm-table-cell,
.fit-widest-label.d-xs-table-cell {
  width: 1%;
}

/* Font weight, sizes, and line heights.
    These aren't really extensions, since there's only the display-n classes. But these are general purpose.
    Font sizes that have line height were for specific squeezing of small fonts for dates, etc. 
    Consider always using the separate line-height classes instead.
*/
.bold {     /* Abbreviation. */
  font-weight: bold;
}

.font-size-125 {            /* Typically to get 20px up from 16px */
  font-size: 1.25rem;
}
.font-size-1125 {           /* Typically to get 18px up from 16px */
  font-size: 1.125rem;
}
.font-size-094 {            /* Typically to get 15px down from 16px */
  font-size: 0.94rem;
}
.font-size-09 {
  font-size: 0.9rem;
  line-height: 1.2;
}
.font-size-0875 {            /* Typically to get 14px down from 16px */
  font-size: 0.875rem;
}
.font-size-08 {
  font-size: 0.8rem;
  line-height: 1.1;
}
.font-size-075 {            /* Typically to get 12px down from 16px */
  font-size: 0.75rem;
  line-height: 1.1;
}
.font-size-07 {
  font-size: 0.7rem;
  line-height: 1.1;
}

.line-height-11 {
  line-height: 1.1;
}

.line-height-12 {
  line-height: 1.2;
}

.line-height-15 {
  line-height: 1.5;
}

address {
  line-height: 1.2; /* Slightly closer together. */
}

/* Sizing utilites.
    Only did widths here; extend as needed.
    w-25, w-50, w-75, w-100 don't have breakpoint classes, so this provides them.
    Really should be mixin approach. e.g., github.com/twbs/bootstrap/issues/21943
*/
@media (min-width: 576px) {
  .w-sm-25 {
    width: 25% !important;
  }

  .w-sm-50 {
    width: 50% !important;
  }

  .w-sm-75 {
    width: 75% !important;
  }

  .w-sm-100 {
    width: 100% !important;
  }

  .w-sm-auto {
    width: auto !important;
  }
}

@media (min-width: 768px) {
  .w-md-25 {
    width: 25% !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-75 {
    width: 75% !important;
  }

  .w-md-100 {
    width: 100% !important;
  }

  .w-md-auto {
    width: auto !important;
  }
}

@media (min-width: 992px) {
  .w-lg-25 {
    width: 25% !important;
  }

  .w-lg-50 {
    width: 50% !important;
  }

  .w-lg-75 {
    width: 75% !important;
  }

  .w-lg-100 {
    width: 100% !important;
  }

  .w-lg-auto {
    width: auto !important;
  }
}

@media (min-width: 1200px) {
  .w-xl-25 {
    width: 25% !important;
  }

  .w-xl-50 {
    width: 50% !important;
  }

  .w-xl-75 {
    width: 75% !important;
  }

  .w-xl-100 {
    width: 100% !important;
  }

  .w-xl-auto {
    width: auto !important;
  }
}

@media (min-width: 576px) {
  .w-sm-25 {
    width: 25% !important;
  }

  .w-sm-50 {
    width: 50% !important;
  }

  .w-sm-75 {
    width: 75% !important;
  }

  .w-sm-100 {
    width: 100% !important;
  }

  .w-sm-auto {
    width: auto !important;
  }
}

.mw-25 {
  max-width: 25% !important;
}

.mw-50 {
  max-width: 50% !important;
}

.mw-75 {
  max-width: 75% !important;
}

/* Opacity (not in bootstrap) */
.opacity-0 {
  opacity: 0;
}

.opacity-1 {
  opacity: 0.1;
}

.opacity-2 {
  opacity: 0.2;
}

.opacity-3 {
  opacity: 0.3;
}

.opacity-4 {
  opacity: 0.4;
}

.opacity-5 {
  opacity: 0.5;
}

.opacity-6 {
  opacity: 0.6;
}

.opacity-7 {
  opacity: 0.7;
}

.opacity-8 {
  opacity: 0.8;
}

.opacity-9 {
  opacity: 0.9;
}

.opacity-10 {
  opacity: 1;
}

/* Content inline-then-block, or block-then-inline at breakpoint. 
    Similar to columns stacking, but allows content to stack or go inline.
    inline is done as inline-block, for margins, padding, etc.
*/
.inline-sm-block, .inline-md-block, .inline-lg-block, .inline-xl-block {
  display: inline-block;
}

@media (min-width: 576px) {
  .inline-sm-block {
    display: block;
  }
}

@media (min-width: 768px) {
  .inline-md-block {
    display: block;
  }
}

@media (min-width: 992px) {
  .inline-lg-block {
    display: block;
  }
}

@media (min-width: 1200px) {
  .inline-xl-block {
    display: block;
  }
}

.block-sm-inline, .block-md-inline, .block-lg-inline, .block-xl-inline {
  display: block;
}

@media (min-width: 576px) {
  .block-sm-inline {
    display: inline-block;
  }
}

@media (min-width: 768px) {
  .block-md-inline {
    display: inline-block;
  }
}

@media (min-width: 992px) {
  .block-lg-inline {
    display: inline-block;
  }
}

@media (min-width: 1200px) {
  .block-xl-inline {
    display: inline-block;
  }
}