/* FAQ styles isolated from ux-styles.css */

/******************************************************
Variables
******************************************************/
:root {
  --Gray-10: #F9F9F9;
  --Gray-30: #e3e3e3;
  --Gray-80: #333333;
  --Black: #000000;
}

/*************************************************
Utility
*************************************************/
.UX-List--NoStyle {
  margin-left: 0;
  margin-bottom: 0;
}
.UX-List--NoStyle > li {
  list-style-type: none;
  margin: 0;
}

/*************************************************
Disclosures (improved accordions. doesn't need a script.)
*************************************************/
[class*=UX-Disclosure--] {
  cursor: pointer;
  height: fit-content;
}
[class*=UX-Disclosure--] > .UX-Disclosure__Summary {
  width: 100%;
  display: inline-flex;
  align-items: center;
}
[class*=UX-Disclosure--] > .UX-Disclosure__Summary::-webkit-details-marker {
  display: none;
}
[class*=UX-Disclosure--] > .UX-Disclosure__Summary .SummaryPhrase {
  font-size: 1rem;
  line-height: 1.4;
}
[class*=UX-Disclosure--] > .UX-Disclosure__Summary h2, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h3, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h4, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h5, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h6, [class*=UX-Disclosure--] > .UX-Disclosure__Summary .SummaryPhrase {
  color: var(--Gray-80);
  font-weight: 400;
  width: 100%;
  display: flex;
  gap: 0.5em;
  text-transform: none;
  margin: 0;
}
[class*=UX-Disclosure--] > .UX-Disclosure__Summary h2::before, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h2::after, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h3::before, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h3::after, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h4::before, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h4::after, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h5::before, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h5::after, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h6::before, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h6::after, [class*=UX-Disclosure--] > .UX-Disclosure__Summary .SummaryPhrase::before, [class*=UX-Disclosure--] > .UX-Disclosure__Summary .SummaryPhrase::after {
  display: inline-block;
  flex-shrink: 0;
  height: 0.4em;
  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;
  margin-top: 0.45em;
}
[class*=UX-Disclosure--] > .UX-Disclosure__Summary h2 {
  padding: 1rem 0;
}
[class*=UX-Disclosure--] > .UX-Disclosure__Summary h3 {
  padding: 0.875rem 0;
}
[class*=UX-Disclosure--] > .UX-Disclosure__Summary h4, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h5, [class*=UX-Disclosure--] > .UX-Disclosure__Summary h6, [class*=UX-Disclosure--] > .UX-Disclosure__Summary .SummaryPhrase {
  padding: 0.75rem 0;
}
[class*=UX-Disclosure--] > .UX-Disclosure__Details {
  padding: 0 0 1em;
  color: var(--Gray-80);
}
[class*=UX-Disclosure--] > .UX-Disclosure__Details p:last-child {
  margin-bottom: 0;
}

.UX-Disclosure--WithBorder {
  border: 1px solid var(--Gray-30);
  border-radius: 2px;
  margin: 8px 0;
  padding: 0 1em;
}

.UX-Disclosure--FloatLeftCaret > .UX-Disclosure__Summary h2::after, .UX-Disclosure--FloatLeftCaret > .UX-Disclosure__Summary h3::after, .UX-Disclosure--FloatLeftCaret > .UX-Disclosure__Summary h4::after, .UX-Disclosure--FloatLeftCaret > .UX-Disclosure__Summary h5::after, .UX-Disclosure--FloatLeftCaret > .UX-Disclosure__Summary h6::after, .UX-Disclosure--FloatLeftCaret > .UX-Disclosure__Summary .SummaryPhrase::after {
  display: none;
}
.UX-Disclosure--FloatLeftCaret > .UX-Disclosure__Details {
  padding: 0 1em 1em;
}
.UX-Disclosure--FloatRightCaret > .UX-Disclosure__Summary h2, .UX-Disclosure--FloatRightCaret > .UX-Disclosure__Summary h3, .UX-Disclosure--FloatRightCaret > .UX-Disclosure__Summary h4, .UX-Disclosure--FloatRightCaret > .UX-Disclosure__Summary h5, .UX-Disclosure--FloatRightCaret > .UX-Disclosure__Summary h6, .UX-Disclosure--FloatRightCaret > .UX-Disclosure__Summary .SummaryPhrase {
  justify-content: space-between;
}
.UX-Disclosure--FloatRightCaret > .UX-Disclosure__Summary h2::before, .UX-Disclosure--FloatRightCaret > .UX-Disclosure__Summary h3::before, .UX-Disclosure--FloatRightCaret > .UX-Disclosure__Summary h4::before, .UX-Disclosure--FloatRightCaret > .UX-Disclosure__Summary h5::before, .UX-Disclosure--FloatRightCaret > .UX-Disclosure__Summary h6::before, .UX-Disclosure--FloatRightCaret > .UX-Disclosure__Summary .SummaryPhrase::before {
  display: none;
}
.UX-Disclosure--InlineRightCaret > .UX-Disclosure__Summary h2::before, .UX-Disclosure--InlineRightCaret > .UX-Disclosure__Summary h3::before, .UX-Disclosure--InlineRightCaret > .UX-Disclosure__Summary h4::before, .UX-Disclosure--InlineRightCaret > .UX-Disclosure__Summary h5::before, .UX-Disclosure--InlineRightCaret > .UX-Disclosure__Summary h6::before, .UX-Disclosure--InlineRightCaret > .UX-Disclosure__Summary .SummaryPhrase::before {
  display: none;
}

.UX-Disclosure__Summary h2::before, .UX-Disclosure__Summary h2::after, .UX-Disclosure__Summary h3::before, .UX-Disclosure__Summary h3::after, .UX-Disclosure__Summary h4::before, .UX-Disclosure__Summary h4::after, .UX-Disclosure__Summary h5::before, .UX-Disclosure__Summary h5::after, .UX-Disclosure__Summary h6::before, .UX-Disclosure__Summary h6::after, .UX-Disclosure__Summary .SummaryPhrase::before, .UX-Disclosure__Summary .SummaryPhrase::after {
  transform: rotate(0deg);
  transition: transform 0.2s ease;
  transform-origin: center;
}

[class*=UX-Disclosure][open] > .UX-Disclosure__Summary h2, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary h3, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary h4, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary h5, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary h6, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary .SummaryPhrase {
  font-weight: 500;
}
[class*=UX-Disclosure][open] > .UX-Disclosure__Summary h2::before, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary h2::after, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary h3::before, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary h3::after, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary h4::before, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary h4::after, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary h5::before, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary h5::after, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary h6::before, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary h6::after, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary .SummaryPhrase::before, [class*=UX-Disclosure][open] > .UX-Disclosure__Summary .SummaryPhrase::after {
  transform: rotate(180deg);
}

@media screen and (min-width: 768px) {
  .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h2, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h3, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h4, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h5, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h6, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary .SummaryPhrase {
    justify-content: flex-start;
  }
  .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h2::after, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h3::after, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h4::after, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h5::after, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h6::after, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary .SummaryPhrase::after {
    display: none;
  }
  .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h2::before, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h3::before, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h4::before, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h5::before, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary h6::before, .FloatCaretLeftAt--768px > .UX-Disclosure__Summary .SummaryPhrase::before {
    display: inline-block;
  }
}

/*************************************************
Pill shaped tabs - don't forget to add script
*************************************************/
.UX-PillTabs__Tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 2rem;
}
.UX-PillTabs button {
  text-transform: none;
  font-weight: 500;
  color: var(--Gray-80);
  background: var(--Gray-10);
  border: 1px solid transparent;
  box-shadow: none;
  float: none;
  border-radius: 2em;
  padding: 0.75em 1.5em;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}
.UX-PillTabs button.selected {
  border: 1px solid var(--Black);
}