/*************************************************
Pseudo cards (img + heading + content, but no background color or border)
*************************************************/
.PseudoCard-Container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.PseudoCard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 1rem;
}
.PseudoCard__Image {
  border-radius: 4px;
}
.PseudoCard__Heading {
  margin: 0.5em 0 0;
}
.PseudoCard__ListOfLinks {
  margin: 0;
}
.PseudoCard__ListOfLinks li {
  list-style-type: none;
  margin: 0 0 0.75rem;
}
.PseudoCard__ListOfLinks li:last-child {
  margin: 0;
}
.PseudoCard p:last-child {
  margin-bottom: 0;
}

/* Specific for the support page */
@media screen and (min-width: 37.5em) {
  .SupportPage .PseudoCard {
    width: calc(50% - 10px);
  }
}
@media screen and (min-width: 64em) {
  .SupportPage .PseudoCard {
    width: calc(33.33% - 13.34px);
  }
}
@media screen and (min-width: 75em) {
  .SupportPage .PseudoCard {
    width: calc(50% - 10px);
  }
}

/*************************************************
Quicklinks
*************************************************/
.UX-Quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-left: 0;
}
.UX-Quicklinks li {
  list-style-type: none;
  display: flex;
  align-items: center;
  background: var(--Gray-10);
  border-radius: 4px;
  margin: 0;
  width: 100%;
  min-height: 80px;
}
@media screen and (min-width: 37.5em) {
  .UX-Quicklinks li {
    width: calc(50% - 10px);
  }
}
@media screen and (min-width: 64em) {
  .UX-Quicklinks li {
    width: calc(33.33% - 13.33px);
  }
}
@media screen and (min-width: 75em) {
  .UX-Quicklinks li {
    width: calc(50% - 10px);
  }
}
.UX-Quicklinks li:hover {
  background: var(--Gray-20);
}
.UX-Quicklinks li a {
  color: var(--Black);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.25rem 0.5rem 0.25rem 1.5rem;
  width: 100%;
}
.UX-Quicklinks li a p {
  margin: 0;
}
.UX-Quicklinks li a img {
  width: 32px;
  height: auto;
}

/*************************************************
Tile patterned hero
*************************************************/
.TiledHero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: 250px;
  /*.BR-LayoutConstraint:has([class^="TiledHero"]) {
    width: 100%;
  }*/
}
@media screen and (min-width: 75em) {
  .TiledHero {
    min-height: 300px;
  }
}
.TiledHero__Text--Left, .TiledHero__Text--Center {
  display: flex;
  flex-direction: column;
  color: #FFF;
  position: relative;
  z-index: 1;
  padding: 2rem 0;
}
@media screen and (min-width: 75em) {
  .TiledHero__Text--Left, .TiledHero__Text--Center {
    margin-bottom: 1.125rem;
  }
}
.TiledHero__Text--Left section[class*=BR-Alert__Component], .TiledHero__Text--Center section[class*=BR-Alert__Component] {
  margin-top: 2rem;
  text-align: left;
}
.TiledHero__Text--Center {
  align-items: center;
  text-align: center;
}
.TiledHero__H1 {
  color: #FFF;
  margin: 0 0 0.75rem 0;
}
.TiledHero__Subhead {
  color: #FFF;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.5rem;
  margin: 0;
}
.TiledHero__Gradient {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0.1;
  opacity: 1;
}
.TiledHero__Pattern {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 90px 105px;
  background-repeat: repeat;
  opacity: 0.33;
  z-index: 0.2;
}

.TiledHero.TiledHero--DarkBlue {
  background: #03387E;
}
.TiledHero.TiledHero--DarkBlue .TiledHero__Gradient {
  background: linear-gradient(60deg, rgb(0, 44, 102) 0%, rgb(0, 35, 80) 75%, rgb(0, 22, 50) 100%);
}

/*************************************************
Tooltips
*************************************************/
.UX-Tooltip {
  position: relative;
}
.UX-Tooltip .UX-Tooltip__Icon {
  display: inline-block;
  content: "";
  background-repeat: no-repeat;
  vertical-align: middle;
  width: 1.125em;
  height: 1.125em;
  margin: 0 0 0.25em 0.25em;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%233399fe;%7D.cls-1,.cls-2%7Bstroke-width:0px;%7D.cls-2%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M8,16c4.42,0,8-3.58,8-8S12.42,0,8,0,0,3.58,0,8s3.58,8,8,8Z'/%3E%3Cpath class='cls-2' d='M9.34,10.74c-.49.41-1.07.71-1.69.86.11-.28.24-.55.38-.81.57-1.23,1.2-2.41,1.74-3.63.45-1,.08-1.58-.91-1.45-1.3.18-2.5.77-3.45,1.68-.12.14-.37.27-.21.49.16.22.37.09.52,0,.46-.35.99-.62,1.55-.77-.13.32-.26.54-.33.77-.58,1.22-1.22,2.5-1.74,3.71-.46.95-.13,1.49.87,1.45,1.39-.15,2.69-.77,3.68-1.77.09-.05.16-.14.19-.24.03-.1.02-.21-.02-.3-.22-.26-.43-.08-.59.05v-.04ZM9.88,2c-.38,0-.75.14-1.04.4-.28.26-.46.61-.49,1,0,.14.03.28.09.41s.14.24.25.34c.1.09.23.17.36.21.13.04.28.06.42.04.37.02.74-.11,1.03-.35.29-.24.47-.58.51-.96.02-.15,0-.3-.06-.44-.05-.14-.14-.27-.24-.37-.11-.1-.24-.18-.38-.23-.14-.05-.3-.06-.45-.04'/%3E%3C/svg%3E");
}
.UX-Tooltip .UX-Tooltip__HiddenContent {
  display: none;
}
.UX-Tooltip:hover .UX-Tooltip__HiddenContent, .UX-Tooltip:focus .UX-Tooltip__HiddenContent, .UX-Tooltip:active .UX-Tooltip__HiddenContent {
  display: block;
  position: absolute;
  top: calc(1em + 20px);
  right: -20px;
  background: var(--White);
  color: var(--Gray-80);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--Gray-50);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
  max-width: 300px;
}
@media screen and (min-width: 48em) {
  .UX-Tooltip:hover .UX-Tooltip__HiddenContent, .UX-Tooltip:focus .UX-Tooltip__HiddenContent, .UX-Tooltip:active .UX-Tooltip__HiddenContent {
    min-width: 200px;
  }
}
.UX-Tooltip:hover .UX-Tooltip__HiddenContent:before, .UX-Tooltip:focus .UX-Tooltip__HiddenContent:before, .UX-Tooltip:active .UX-Tooltip__HiddenContent:before {
  content: "";
  position: absolute;
  top: calc(1em - 27px);
  right: 20px;
  background: var(--White);
  width: 20px;
  height: 20px;
  border-left: 1px solid var(--Gray-50);
  border-top: 1px solid var(--Gray-50);
  transform: rotate(45deg);
}
.UX-Tooltip:hover .UX-Tooltip__HiddenContent.AlignTooltipContentLeft, .UX-Tooltip:focus .UX-Tooltip__HiddenContent.AlignTooltipContentLeft, .UX-Tooltip:active .UX-Tooltip__HiddenContent.AlignTooltipContentLeft {
  left: -20px;
}
.UX-Tooltip:hover .UX-Tooltip__HiddenContent.AlignTooltipContentLeft:before, .UX-Tooltip:focus .UX-Tooltip__HiddenContent.AlignTooltipContentLeft:before, .UX-Tooltip:active .UX-Tooltip__HiddenContent.AlignTooltipContentLeft:before {
  left: 20px;
}
.UX-Tooltip:focus .UX-Tooltip__HiddenContent, .UX-Tooltip:active .UX-Tooltip__HiddenContent {
  z-index: 2;
}
.UX-Tooltip:hover .UX-Tooltip__HiddenContent {
  z-index: 3;
}

/*************************************************
Side-by-side grid layout
Adds our typical page margins at 500px.
Creates a two-column grid layout (not masonry) at 1200px.
*************************************************/
.BR-LayoutConstraint:has(> .TwoColGridAt--75em) {
  position: relative;
}

@media screen and (max-width: 31.25em) {
  .BR-LayoutConstraint:has(> .TwoColGridAt--75em) {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 75em) {
  .TwoColGridAt--75em {
    display: grid;
    grid-template-columns: calc(50% - 10px);
    grid-template-rows: auto 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .TwoColGridAt--75em > div:nth-child(even) {
    grid-column-start: 2;
  }
  .TwoColGridAt--75em .TwoColGridAt--75em__SubGrid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}
@media screen and (min-width: 90em) {
  .TwoColGridAt--75em {
    grid-template-columns: calc(50% - 16px);
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .TwoColGridAt--75em .TwoColGridAt--75em__SubGrid {
    gap: 32px;
  }
}
/* Unique for Support */
.SupportPage .BR-LayoutConstraint:has(> .TwoColGridAt--75em) {
  margin-top: 1rem;
}
@media screen and (min-width: 75em) {
  .SupportPage .BR-LayoutConstraint:has(> .TwoColGridAt--75em) {
    margin-top: -2rem;
  }
}

/*************************************************
Custom disclosures to accomodate the support page layout
*************************************************/
.LayoutDisclosure {
  background: #fff;
  padding: 0.5rem 1.5rem;
}
@media screen and (min-width: 75em) {
  .LayoutDisclosure {
    padding: 0.75rem 1.5rem;
  }
}
@media screen and (min-width: 100em) {
  .LayoutDisclosure {
    padding: 1rem 1.5rem;
  }
}
.LayoutDisclosure .LayoutDisclosure__Button {
  background: none;
  color: var(--Gray-80);
  text-transform: none;
  text-align: left;
  border: 0;
  box-shadow: none;
  float: none;
  padding: 0;
  display: flex;
  align-items: center;
  width: 100%;
}
.LayoutDisclosure__Summary {
  color: var(--Gray-80);
  font-weight: 400;
  width: 100%;
  text-transform: none;
  margin: 0;
}
.LayoutDisclosure__Summary .Summary__Icon {
  display: inline-block;
  min-height: 0.4em;
  min-width: 0.625em;
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.59 8.58'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23000;stroke-miterlimit:10;stroke-width:1.7px;%7D%3C/style%3E%3C/defs%3E%3Cpolyline class='cls-1' points='15.01 .62 7.8 7.42 .58 .62'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.LayoutDisclosure__Details {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0.75rem 0 1.25rem;
}
@media screen and (min-width: 100em) {
  .LayoutDisclosure__Details {
    padding: 1rem 0 1.5rem;
  }
}
.LayoutDisclosure__Details p:last-child,
.LayoutDisclosure__Details ul:last-child,
.LayoutDisclosure__Details ol:last-child {
  margin-bottom: 0;
}
.LayoutDisclosure > h2.LayoutDisclosure__Summary {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.LayoutDisclosure > h3.LayoutDisclosure__Summary {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.LayoutDisclosure > h4.LayoutDisclosure__Summary,
.LayoutDisclosure > h5.LayoutDisclosure__Summary,
.LayoutDisclosure > h6.LayoutDisclosure__Summary,
.LayoutDisclosure > p.LayoutDisclosure__Summary {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.LayoutDisclosure.FloatRightCaret .Summary__Icon:first-child {
  display: none;
}
.LayoutDisclosure.FloatRightCaret .Summary__Icon:last-child {
  margin-left: auto;
}

.LayoutDisclosureFloatLeftCaret .Summary__Icon:first-child {
  margin-right: 0.625em;
}
.LayoutDisclosureFloatLeftCaret .Summary__Icon:last-child {
  display: none;
}

.LayoutDisclosureInlineRightCaret .Summary__Icon:first-child {
  display: none;
}
.LayoutDisclosureInlineRightCaret .Summary__Icon:last-child {
  margin-left: 0.625em;
}

.Summary__Icon {
  transform: rotate(0deg);
  transition: transform 0.2s ease;
  transform-origin: center;
}

.LayoutDisclosure.ClosedDisclosure .LayoutDisclosure__Summary {
  font-weight: 400;
}
.LayoutDisclosure.ClosedDisclosure .LayoutDisclosure__Summary .Summary__Icon {
  transform: rotate(0deg);
}
.LayoutDisclosure.ClosedDisclosure .LayoutDisclosure__Details {
  display: none;
}

.LayoutDisclosure.OpenDisclosure .LayoutDisclosure__Summary {
  font-weight: 500;
}
.LayoutDisclosure.OpenDisclosure .LayoutDisclosure__Summary .Summary__Icon {
  transform: rotate(180deg);
}
.LayoutDisclosure.OpenDisclosure .LayoutDisclosure__Details {
  display: flex;
}

@media screen and (min-width: 75em) {
  .KeepOpenAt--1200px .LayoutDisclosure__Button {
    cursor: default;
  }
}
@media screen and (min-width: 48em) {
  .FloatCaretLeftAt--768px .LayoutDisclosure__Summary .Summary__Icon:first-child {
    display: inline-block;
    margin-right: 0.625em;
  }
  .FloatCaretLeftAt--768px .LayoutDisclosure__Summary .Summary__Icon:last-child {
    display: none;
  }
}
.Separate {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
  margin: 8px 0;
}

@media screen and (min-width: 75em) {
  .KeepOpenAt--1200px.Separate {
    margin: 0;
    border-radius: 6px;
  }
  .KeepOpenAt--1200px.Separate .Summary__Icon:first-child,
  .KeepOpenAt--1200px.Separate .Summary__Icon:last-child {
    display: none;
  }
  .KeepOpenAt--1200px.CenterWhenForcedOpen .LayoutDisclosure__Button {
    justify-content: center;
  }
}

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