/***** Variables */
:root {
  --White: #FFFFFF;
  --Gray-10: #FBFBFB;
  --Gray-20: #F2F2F2;
  --Gray-30: #E3E3E3;
  --Gray-40: #CCCCCC;
  --Gray-50: #ABABAB;
  --Gray-60: #999999;
  --Gray-70: #666666;
  --Gray-80: #333333;
  --Black: #000000;
  --BradyBlue-0: #F0F5FF;
  --BradyBlue-5: #E2EBF9;
  --BradyBlue-20: #C2D5F4;
  --BradyBlue-30: #A1BBE8;
  --BradyBlue-40: #7598D1;
  --BradyBlue-50: #4476C1;
  --BradyBlue-70: #043F8D;
  --BradyBlue-80: #03387E;
}

/***** Colors */
.UX-Color--White {
  color: var(--White);
}
.UX-Color--Gray-10 {
  color: var(--Gray-10);
}
.UX-Color--Gray-20 {
  color: var(--Gray-20);
}
.UX-Color--Gray-30 {
  color: var(--Gray-30);
}
.UX-Color--Gray-40 {
  color: var(--Gray-40);
}
.UX-Color--Gray-50 {
  color: var(--Gray-50);
}
.UX-Color--Gray-60 {
  color: var(--Gray-60);
}
.UX-Color--Gray-70 {
  color: var(--Gray-70);
}
.UX-Color--Gray-80 {
  color: var(--Gray-80);
}
.UX-Color--Black {
  color: var(--Black);
}
.UX-Color--BradyBlue-0 {
  color: var(--BradyBlue-0);
}
.UX-Color--BradyBlue-5 {
  color: var(--BradyBlue-5);
}
.UX-Color--BradyBlue-20 {
  color: var(--BradyBlue-20);
}
.UX-Color--BradyBlue-30 {
  color: var(--BradyBlue-30);
}
.UX-Color--BradyBlue-40 {
  color: var(--BradyBlue-40);
}
.UX-Color--BradyBlue-50 {
  color: var(--BradyBlue-50);
}
.UX-Color--BradyBlue-70 {
  color: var(--BradyBlue-70);
}
.UX-Color--BradyBlue-80 {
  color: var(--BradyBlue-80);
}

/***** Background colors */
.UX-BgColor--White {
  background-color: var(--White);
}
.UX-BgColor--Gray-10 {
  background-color: var(--Gray-10);
}
.UX-BgColor--Gray-20 {
  background-color: var(--Gray-20);
}
.UX-BgColor--Gray-30 {
  background-color: var(--Gray-30);
}
.UX-BgColor--Gray-40 {
  background-color: var(--Gray-40);
}
.UX-BgColor--Gray-50 {
  background-color: var(--Gray-50);
}
.UX-BgColor--Gray-60 {
  background-color: var(--Gray-60);
}
.UX-BgColor--Gray-70 {
  background-color: var(--Gray-70);
}
.UX-BgColor--Gray-80 {
  background-color: var(--Gray-80);
}
.UX-BgColor--Black {
  background-color: var(--Black);
}
.UX-BgColor--BradyBlue-0 {
  background-color: var(--BradyBlue-0);
}
.UX-BgColor--BradyBlue-5 {
  background-color: var(--BradyBlue-5);
}
.UX-BgColor--BradyBlue-20 {
  background-color: var(--BradyBlue-20);
}
.UX-BgColor--BradyBlue-30 {
  background-color: var(--BradyBlue-30);
}
.UX-BgColor--BradyBlue-40 {
  background-color: var(--BradyBlue-40);
}
.UX-BgColor--BradyBlue-50 {
  background-color: var(--BradyBlue-50);
}
.UX-BgColor--BradyBlue-70 {
  background-color: var(--BradyBlue-70);
}
.UX-BgColor--BradyBlue-80 {
  background-color: var(--BradyBlue-80);
}

/***** Row styles
- all rows must go inside UX-GridWrapper to make sure that the right padding on the last column in each row gets clipped. */
.UX-GridWrapper {
  display: block;
  overflow: hidden;
}

/***** Row styles */
[class^=UX-Row] {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 1.5rem);
}

/* Padding */
.UX-Row--Padding-16 {
  padding: 1rem 0 0 0;
}
.UX-Row--Padding-24 {
  padding: 1.5rem 0 0.5rem 0;
}
.UX-Row--Padding-32 {
  padding: 2rem 0 1rem 0;
}

/* For row margins, just use BR-Margin--X */
/* All descendants of UX-Row */
[class^=UX-Row] * {
  box-sizing: border-box;
}

/* Direct children of UX-Row */
[class^=UX-Row] > * {
  padding: 0 1.5rem 1rem 0;
}

/* Fix bottom margin of the last paragraph in each column */
[class^=UX-Row] > * p:last-child [class^=UX-Row] > * .blog-para:last-child {
  margin-bottom: 0;
}

/* to manipulate columns (change padding, background color, etc.), put the contents of the column in a div with this class, then apply styles/classes to this div */
.UX-FillBox {
  width: 100%;
  height: 100%;
}

/***** Column widths */
.xs-1 {
  flex: 0 0 8.3333333333%;
}
.xs-2 {
  flex: 0 0 16.6666666667%;
}
.xs-3 {
  flex: 0 0 25%;
}
.xs-4 {
  flex: 0 0 33.3333333333%;
}
.xs-5 {
  flex: 0 0 41.6666666667%;
}
.xs-6 {
  flex: 0 0 50%;
}
.xs-7 {
  flex: 0 0 58.3333576389%;
}
.xs-8 {
  flex: 0 0 66.6666666667%;
}
.xs-9 {
  flex: 0 0 75.00001875%;
}
.xs-10 {
  flex: 0 0 83.3333333333%;
}
.xs-11 {
  flex: 0 0 91.6666743056%;
}
.xs-12 {
  flex: 0 0 100%;
}

@media (min-width: 40em) {
  .sm-1 {
    flex: 0 0 8.3333333333%;
  }
  .sm-2 {
    flex: 0 0 16.6666666667%;
  }
  .sm-3 {
    flex: 0 0 25%;
  }
  .sm-4 {
    flex: 0 0 33.3333333333%;
  }
  .sm-5 {
    flex: 0 0 41.6666666667%;
  }
  .sm-6 {
    flex: 0 0 50%;
  }
  .sm-7 {
    flex: 0 0 58.3333576389%;
  }
  .sm-8 {
    flex: 0 0 66.6666666667%;
  }
  .sm-9 {
    flex: 0 0 75.00001875%;
  }
  .sm-10 {
    flex: 0 0 83.3333333333%;
  }
  .sm-11 {
    flex: 0 0 91.6666743056%;
  }
  .sm-12 {
    flex: 0 0 100%;
  }
}
@media (min-width: 48em) {
  .md-1 {
    flex: 0 0 8.3333333333%;
  }
  .md-2 {
    flex: 0 0 16.6666666667%;
  }
  .md-3 {
    flex: 0 0 25%;
  }
  .md-4 {
    flex: 0 0 33.3333333333%;
  }
  .md-5 {
    flex: 0 0 41.6666666667%;
  }
  .md-6 {
    flex: 0 0 50%;
  }
  .md-7 {
    flex: 0 0 58.3333576389%;
  }
  .md-8 {
    flex: 0 0 66.6666666667%;
  }
  .md-9 {
    flex: 0 0 75.00001875%;
  }
  .md-10 {
    flex: 0 0 83.3333333333%;
  }
  .md-11 {
    flex: 0 0 91.6666743056%;
  }
  .md-12 {
    flex: 0 0 100%;
  }
}
@media (min-width: 64em) {
  .lg-1 {
    flex: 0 0 8.3333333333%;
  }
  .lg-2 {
    flex: 0 0 16.6666666667%;
  }
  .lg-3 {
    flex: 0 0 25%;
  }
  .lg-4 {
    flex: 0 0 33.3333333333%;
  }
  .lg-5 {
    flex: 0 0 41.6666666667%;
  }
  .lg-6 {
    flex: 0 0 50%;
  }
  .lg-7 {
    flex: 0 0 58.3333576389%;
  }
  .lg-8 {
    flex: 0 0 66.6666666667%;
  }
  .lg-9 {
    flex: 0 0 75.00001875%;
  }
  .lg-10 {
    flex: 0 0 83.3333333333%;
  }
  .lg-11 {
    flex: 0 0 91.6666743056%;
  }
  .lg-12 {
    flex: 0 0 100%;
  }
}
@media (min-width: 75em) {
  .xl-1 {
    flex: 0 0 8.3333333333%;
  }
  .xl-2 {
    flex: 0 0 16.6666666667%;
  }
  .xl-3 {
    flex: 0 0 25%;
  }
  .xl-4 {
    flex: 0 0 33.3333333333%;
  }
  .xl-5 {
    flex: 0 0 41.6666666667%;
  }
  .xl-6 {
    flex: 0 0 50%;
  }
  .xl-7 {
    flex: 0 0 58.3333576389%;
  }
  .xl-8 {
    flex: 0 0 66.6666666667%;
  }
  .xl-9 {
    flex: 0 0 75.00001875%;
  }
  .xl-10 {
    flex: 0 0 83.3333333333%;
  }
  .xl-11 {
    flex: 0 0 91.6666743056%;
  }
  .xl-12 {
    flex: 0 0 100%;
  }
}
/***** Position/Alignment/Display */
/* Center content horizontally and vertically */
.UX-Center--H {
  margin-left: auto;
  margin-right: auto;
}
.UX-Center--V {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Display */
.UX-Display--TrueInline {
  display: inline;
}

.UX-Display--Block {
  display: block;
}

/***** Lists */
.UX-List--NoBullet {
  list-style-type: none;
}

/***** Icons */
[class^=UX-Icon] {
  width: 20px;
  height: 20px;
}

.UX-Icon--Inline {
  display: inline;
  margin: 0 2px;
}

/***** Width */
.UX-Width--100 {
  width: 100%;
}
.UX-Width--FitContent {
  width: fit-content;
}

.UX-MaxWidth--100px {
  max-width: 100px;
}
.UX-MaxWidth--150px {
  max-width: 150px;
}
.UX-MaxWidth--200px {
  max-width: 200px;
}
.UX-MaxWidth--300px {
  max-width: 300px;
}
.UX-MaxWidth--400px {
  max-width: 400px;
}
.UX-MaxWidth--500px {
  max-width: 500px;
}

/***** Height */
.UX-Height--0 {
  height: 0;
}
.UX-Height--100 {
  height: 100%;
}

/****************************** Uses BR prefix. Follows same patterns as what's used in our main style sheet. */
/* Flex */
.BR-Flex__Justify__Center {
  justify-content: center;
}

/***** Margins */
.BR-MarginTop--24 {
  margin-top: 1.5rem;
}
.BR-MarginTop--48 {
  margin-top: 3rem;
}
.BR-MarginTop--56 {
  margin-top: 3.5rem;
}

.BR-MarginBottom--24 {
  margin-bottom: 1.5rem;
}
.BR-MarginBottom--48 {
  margin-bottom: 3rem;
}
.BR-MarginBottom--56 {
  margin-bottom: 3.5rem;
}

/***** Padding */
/* Top */
.BR-PaddingTop--24 {
  padding-top: 1.5rem;
}

/* Bottom */
.BR-PaddingBottom--24 {
  padding-bottom: 1.5rem;
}

/***** Text */
.BR-Font__Align--Center {
  text-align: center;
}
.BR-Font__Style--Uppercase {
  text-transform: uppercase;
}

/***** Links - these are made by dev team but are not yet incorporated into main css */
.BR-Link__Light {
  color: #0660D7;
  text-decoration: none;
}
.BR-Link__Light:visited {
  color: #800080;
  text-decoration: none;
}
.BR-Link__Light:hover, .BR-Link__Light:focus, .BR-Link__Light:active {
  color: #043F8D;
  text-decoration: underline;
}
.BR-Link__Light:disabled {
  color: #666666;
  text-decoration: none;
}
.BR-Link__Dark {
  color: #94B8F5;
  text-decoration: none;
}
.BR-Link__Dark:visited {
  color: #FFC72C;
  text-decoration: none;
}
.BR-Link__Dark:hover, .BR-Link__Dark:focus, .BR-Link__Dark:active {
  color: #C1E9FF;
  text-decoration: underline;
}
.BR-Link__Dark:disabled {
  color: #A8A8A8;
  text-decoration: none;
}

/*# sourceMappingURL=styles-ux.css.map */