/*******************************************
    Grid breakpoints:
    xs  < 576px
    sm  >= 576
    md  >= 768
    lg  >= 992
    xl  > 1200
********************************************/

/****************************
    Typography
*****************************/
.text-break {
  word-break: break-word;
}
.h1-sm,
.h1-md,
.h1-lg,
.h1-xl,
.h2-sm,
.h2-md,
.h2-lg,
.h2-xl,
.h3-sm,
.h3-md,
.h3-lg,
.h3-xl,
.h4-sm,
.h4-md,
.h4-lg,
.h4-xl,
.h5-sm,
.h5-md,
.h5-lg,
.h5-xl {
  font-size: initial;
}
h1,
.h1 {
  font-size: 1.9rem;
}
h2,
.h2 {
  font-size: 1.5rem;
}
h3,
.h3 {
  font-size: 1.4rem;
}
h4,
.h4 {
  font-size: 1.2rem;
}
h5,
.h5 {
  font-size: 1.1rem;
}
@media (min-width: 576px) {
  .h1-sm {
    font-size: 1.9rem;
  }
  .h2-sm {
    font-size: 1.5rem;
  }
  .h3-sm {
    font-size: 1.4rem;
  }
  .h4-sm {
    font-size: 1.2rem;
  }
  .h5-sm {
    font-size: 1.1rem;
  }
}
@media (min-width: 768px) {
  .h1-md {
    font-size: 1.9rem;
  }
  .h2-md {
    font-size: 1.5rem;
  }
  .h3-md {
    font-size: 1.4rem;
  }
  .h4-md {
    font-size: 1.2rem;
  }
  .h5-md {
    font-size: 1.1rem;
  }
}
@media (min-width: 992px) {
  .h1-lg {
    font-size: 1.9rem;
  }
  .h2-lg {
    font-size: 1.5rem;
  }
  .h3-lg {
    font-size: 1.4rem;
  }
  .h4-lg {
    font-size: 1.2rem;
  }
  .h5-lg {
    font-size: 1.1rem;
  }
}
@media (min-width: 1200px) {
  .h1-xl {
    font-size: 1.9rem;
  }
  .h2-xl {
    font-size: 1.5rem;
  }
  .h3-xl {
    font-size: 1.4rem;
  }
  .h4-xl {
    font-size: 1.2rem;
  }
  .h5-xl {
    font-size: 1.1rem;
  }
}

/* Preformatted Text */
pre.pre-wrap {
  white-space: pre-wrap;
}

/****************************
    Borders
*****************************/
.border-dashed {
  border: dashed 2px #dee2e6;
}
@media (min-width: 576px) {
  .border-sm-0 {
    border: 0 !important;
  }
  .border-top-sm-0 {
    border-top: 0 !important;
  }
  .border-right-sm-0 {
    border-right: 0 !important;
  }
  .border-bottom-sm-0 {
    border-bottom: 0 !important;
  }
  .border-left-sm-0 {
    border-left: 0 !important;
  }
}
@media (min-width: 768px) {
  .border-md-0 {
    border: 0 !important;
  }
  .border-top-md-0 {
    border-top: 0 !important;
  }
  .border-right-md-0 {
    border-right: 0 !important;
  }
  .border-bottom-md-0 {
    border-bottom: 0 !important;
  }
  .border-left-md-0 {
    border-left: 0 !important;
  }
}
@media (min-width: 992px) {
  .border-lg-0 {
    border: 0 !important;
  }
  .border-top-lg-0 {
    border-top: 0 !important;
  }
  .border-right-lg-0 {
    border-right: 0 !important;
  }
  .border-bottom-lg-0 {
    border-bottom: 0 !important;
  }
  .border-left-lg-0 {
    border-left: 0 !important;
  }
}
@media (min-width: 1200px) {
  .border-xl-0 {
    border: 0 !important;
  }
  .border-top-xl-0 {
    border-top: 0 !important;
  }
  .border-right-xl-0 {
    border-right: 0 !important;
  }
  .border-bottom-xl-0 {
    border-bottom: 0 !important;
  }
  .border-left-xl-0 {
    border-left: 0 !important;
  }
}

/****************************
    Flexbox
*****************************/

/* Media Queries */
@media (min-width: 576px) {
  .flex-sm-0 {
    flex: 0 0 0;
  }
}
@media (min-width: 768px) {
  .flex-md-0 {
    flex: 0 0 0;
  }
}
@media (min-width: 992px) {
  .flex-lg-0 {
    flex: 0 0 0;
  }
}
@media (min-width: 1200px) {
  .flex-xl-0 {
    flex: 0 0 0;
  }
}

/****************************
    Screen Reader Only
*****************************/
@media (min-width: 576px) {
  .sm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .sm-sr-only-focusable:active,
  .sm-sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}
@media (min-width: 768px) {
  .md-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .md-sr-only-focusable:active,
  .md-sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}
@media (min-width: 992px) {
  .lg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .lg-sr-only-focusable:active,
  .lg-sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}
@media (min-width: 1200px) {
  .xl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .xl-sr-only-focusable:active,
  .xl-sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

/****************************
    Layout
*****************************/
/* height */
.minh-250 {
  min-height: 250px;
}
.h-250 {
  height: 250px;
  overflow-y: scroll;
}
.maxh-250 {
  max-height: 250px;
  overflow-y: scroll;
}
@media (max-width: 767px) {
  .max-mobile-height {
    max-height: 250px;
    overflow-y: scroll;
  }
  .mobile-height {
    height: 250px;
    overflow-y: scroll;
  }
}

/* width */
.minw-0 {
  min-width: 0;
} /* this fixes a weird flexbox overflow bug */
.minw-25 {
  min-width: 25%;
}
.minw-50 {
  min-width: 50%;
}
.minw-75 {
  min-width: 75%;
}
.maxw-25 {
  max-width: 25%;
}
.maxw-50 {
  max-width: 50%;
}
.maxw-75 {
  max-width: 75%;
}
.maxw-100 {
  max-width: 100%;
}
.absolute-w100 {
  left: 0;
  right: 0;
  padding: inherit;
}

/* z-index */
.high-z {
  z-index: 50;
}
/* position */
.top-3 {
  top: 1rem;
}

/* Media Queries */
@media (max-width: 575px) {
  .position-xs-sticky {
    position: -webkit-sticky!important;
    position: sticky!important;
  }
  .position-xs-fixed {
    position: fixed;
  }
  .position-xs-relative {
    position: relative;
  }
  .position-xs-absolute {
    position: absolute;
  }
  .position-xs-static {
    position: static;
  }
  .w-xs-100 {
    width: 100% !important;
  }
  .h-xs-100 {
    height: 100% !important;
  }
  .absolute-xs-w100 {
    left: 0;
    right: 0;
    padding: inherit;
  }
  .top-xs-3 {
    top: 1rem;
  }
}
@media (min-width: 576px) {
  .position-sm-sticky {
    position: -webkit-sticky!important;
    position: sticky!important;
  }
  .position-sm-fixed {
    position: fixed;
  }
  .position-sm-relative {
    position: relative;
  }
  .position-sm-absolute {
    position: absolute;
  }
  .position-sm-static {
    position: static;
  }
  .w-sm-auto {
    width: auto !important;
  }
  .w-sm-25 {
    width: 25% !important;
  }
  .w-sm-50 {
    width: 50% !important;
  }
  .w-sm-75 {
    width: 75% !important;
  }
  .w-sm-100 {
    width: 100% !important;
  }
  .h-sm-100 {
    height: 100% !important;
  }
  .absolute-sm-w100 {
    left: 0;
    right: 0;
    padding: inherit;
  }
  .top-sm-3 {
    top: 1rem;
  }
}
@media (min-width: 768px) {
  .position-md-sticky {
    position: -webkit-sticky!important;
    position: sticky!important;
  }
  .position-md-fixed {
    position: fixed;
  }
  .position-md-relative {
    position: relative;
  }
  .position-md-absolute {
    position: absolute;
  }
  .position-md-static {
    position: static;
  }
  .w-md-auto {
    width: auto !important;
  }
  .w-md-25 {
    width: 25% !important;
  }
  .w-md-50 {
    width: 50% !important;
  }
  .w-md-75 {
    width: 75% !important;
  }
  .w-md-100 {
    width: 100% !important;
  }
  .h-md-100 {
    height: 100% !important;
  }
  .absolute-md-w100 {
    left: 0;
    right: 0;
    padding: inherit;
  }
  .top-md-3 {
    top: 1rem;
  }
}
@media (min-width: 992px) {
  .position-lg-sticky {
    position: -webkit-sticky!important;
    position: sticky!important;
  }
  .position-lg-fixed {
    position: fixed;
  }
  .position-lg-relative {
    position: relative;
  }
  .position-lg-absolute {
    position: absolute;
  }
  .position-lg-static {
    position: static;
  }
  .w-lg-auto {
    width: auto !important;
  }
  .w-lg-25 {
    width: 25% !important;
  }
  .w-lg-50 {
    width: 50% !important;
  }
  .w-lg-75 {
    width: 75% !important;
  }
  .w-lg-100 {
    width: 100% !important;
  }
  .h-lg-100 {
    height: 100% !important;
  }
  .absolute-lg-w100 {
    left: 0;
    right: 0;
    padding: inherit;
  }
  .top-lg-3 {
    top: 1rem;
  }
}
@media (min-width: 1200px) {
  .position-xl-sticky {
    position: -webkit-sticky!important;
    position: sticky!important;
  }
  .position-xl-fixed {
    position: fixed;
  }
  .position-xl-relative {
    position: relative;
  }
  .position-xl-absolute {
    position: absolute;
  }
  .position-xl-static {
    position: static;
  }
  .w-xl-auto {
    width: auto !important;
  }
  .w-xl-25 {
    width: 25% !important;
  }
  .w-xl-50 {
    width: 50% !important;
  }
  .w-xl-75 {
    width: 75% !important;
  }
  .w-xl-100 {
    width: 100% !important;
  }
  .h-xl-100 {
    height: 100% !important;
  }
  .absolute-xl-w100 {
    left: 0;
    right: 0;
    padding: inherit;
  }
  .top-xl-3 {
    top: 1rem;
  }
}

/****************************
    Margin & Padding
*****************************/
.m-15 {
  margin: 15px !important;
}
.mt-15 {
  margin-top: 15px !important;
}
.mr-15 {
  margin-right: 15px !important;
}
.mb-15 {
  margin-bottom: 15px !important;
}
.ml-15 {
  margin-left: 15px !important;
}
.mx-15 {
  margin-right: 15px !important;
  margin-left: 15px !important;
}
.my-15 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}
@media (min-width: 576px) {
  .p-sm-15 {
    padding: 15px !important;
  }
  .pt-sm-15 {
    padding-top: 15px !important;
  }
  .pr-sm-15 {
    padding-right: 15px !important;
  }
  .pb-sm-15 {
    padding-bottom: 15px !important;
  }
  .pl-sm-15 {
    padding-left: 15px !important;
  }
  .px-sm-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .py-sm-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}
@media (min-width: 768px) {
  .p-md-15 {
    padding: 15px !important;
  }
  .pt-md-15 {
    padding-top: 15px !important;
  }
  .pr-md-15 {
    padding-right: 15px !important;
  }
  .pb-md-15 {
    padding-bottom: 15px !important;
  }
  .pl-md-15 {
    padding-left: 15px !important;
  }
  .px-md-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .py-md-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}
@media (min-width: 992px) {
  .p-lg-15 {
    padding: 15px !important;
  }
  .pt-lg-15 {
    padding-top: 15px !important;
  }
  .pr-lg-15 {
    padding-right: 15px !important;
  }
  .pb-lg-15 {
    padding-bottom: 15px !important;
  }
  .pl-lg-15 {
    padding-left: 15px !important;
  }
  .px-lg-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .py-lg-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}
@media (min-width: 1200px) {
  .p-lg-15 {
    padding: 15px !important;
  }
  .pt-lg-15 {
    padding-top: 15px !important;
  }
  .pr-lg-15 {
    padding-right: 15px !important;
  }
  .pb-lg-15 {
    padding-bottom: 15px !important;
  }
  .pl-lg-15 {
    padding-left: 15px !important;
  }
  .px-lg-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .py-lg-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}
/* Alignment */
.valign-middle {
  vertical-align: middle;
}

/****************************
    Overlay
*****************************/
.overlay {
  position: relative;
}
.overlay:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  background-color: #333;
}
#main.overlay:after {
  z-index: 10;
}