@charset "UTF-8";
:root {
  --color-primary: rgba(25, 28, 32, 1);
  --color-primary-inverse: $color_primary_inverse;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --spacer: 1rem;
  --transition-translate-factor: 0.5;
  --transition-rotate-factor: -4deg;
  --transition-scale-factor: 0.05;
  --transition-skew-factor: -4deg;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
.nesty-input,
.hc-multiselect-toggle,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select,
.nesty-input,
.hc-multiselect-toggle {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

@-ms-viewport {
  width: device-width;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -ms-overflow-style: scrollbar;
  background-color: rgba(243, 244, 245, 1);
  height: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: $color_text;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
}

html,
body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

[role="main"] {
  flex-grow: 1;
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

[tabindex="-1"]:focus {
  outline: none !important;
}

a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
.nesty-input,
.hc-multiselect-toggle,
summary,
textarea {
  touch-action: manipulation;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin: 1.5rem 0 1rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.375;
  color: $color_heading;
}

h1,
.h1 {
  font-size: 2.25rem;
  font-weight: 500;
}

h2,
.h2 {
  font-size: 1.5rem;
  font-weight: 500;
}

h3,
.h3 {
  font-size: 1.25rem;
  font-weight: 500;
}

h4,
.h4 {
  font-size: 1.125rem;
  font-weight: 700;
}

h5,
.h5 {
  font-size: 1em;
  font-weight: 700;
}

h6,
.h6 {
  font-size: 0.875rem;
  font-weight: 700;
}

b,
strong {
  font-weight: 700;
}

em {
  padding: 0 0.25rem;
  background-color: #FAF089;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

dfn {
  font-style: italic;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

small,
.small {
  font-size: 0.875rem;
}

mark {
  padding: .2rem;
  color: $color_text;
  background-color: #FEFCBF;
}

blockquote {
  padding: 1.5em;
  margin: 0 0 1rem;
  border-style: solid;
  border-width: 0 0 0 4px;
  border-color: $color_border;
}

summary {
  cursor: pointer;
  text-decoration: none;
}

pre,
code,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875em;
}

code {
  padding: 0.25em;
  background-color: $color_gray_200;
  border-radius: 4px;
}

pre {
  padding: 1em;
  margin: 0 0 1rem;
  background-color: $color_gray_100;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
}

kbd {
  display: inline-block;
  padding: 0 0.25em;
  color: $color_text;
  background-color: #fff;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  text-align: center;
  user-select: none;
  border: 1px solid $color_border;
  border-radius: 4px;
  box-shadow: 0 1px 0 $color_border;
}

img {
  vertical-align: middle;
  border-style: none;
}

figure {
  display: inline-block;
  margin: 0 0 1rem;
  max-width: 100%;
}

figcaption {
  font-size: 90%;
  color: $color_gray_600;
}

svg:not(:root) {
  overflow: hidden;
}

a {
  color: $color_link;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: darken($color_link, 4%);
  text-decoration: underline;
}

a:active {
  color: darken($color_link, 8%);
}

a.is-disabled {
  color: #EDECE9;
  pointer-events: none;
  cursor: not-allowed;
}

fieldset:disabled a {
  pointer-events: none;
}

a[href^="#fn:"],
a[href^="#fnref:"] {
  margin: 0 2px;
}

ol,
ul,
dl {
  margin: 0 0 1rem;
}

ol,
ul {
  padding: 0 0 0 1.5rem;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1rem;
  margin-left: 0;
}

input,
select,
.nesty-input,
.hc-multiselect-toggle,
textarea {
  line-height: inherit;
}

input::-webkit-file-upload-button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  font: inherit;
}

input[type="search"] {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select::-ms-expand, .nesty-input::-ms-expand,
.hc-multiselect-toggle::-ms-expand {
  display: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

[type="date"],
[type="time"],
[type="datetime-local"],
[type="month"] {
  -webkit-appearance: listbox;
  -moz-appearance: listbox;
  appearance: listbox;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

button,
input {
  overflow: visible;
}

button,
select,
.nesty-input,
.hc-multiselect-toggle {
  text-transform: none;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

table {
  margin-bottom: 1rem;
  width: 100%;
  border-collapse: collapse;
}

thead {
  vertical-align: bottom;
}

th {
  text-align: inherit;
}

caption {
  text-align: left;
  caption-side: bottom;
}

.avatar {
  position: relative;
  display: inline-block;
  margin: 0 0.75rem 1rem 0;
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
}

.avatar-img {
  border: 2px solid #fff;
  border-radius: 50%;
  max-width: 100%;
  height: 100%;
}

.avatar-sm {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
}

.avatar-lg {
  width: 4rem;
  min-width: 4rem;
  height: 4rem;
}

.avatar-group {
  padding-left: 0;
  list-style: none;
}

.avatar-group .avatar:not(:last-child) {
  margin-right: -1rem;
}

.badge, .recent-activity-item-parent {
  padding: 0.25em 0.375em;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  color: #2D2C2C;
  background-color: #EDECE9;
  transition: 0.15s ease-in-out;
}

a.badge:focus, a.recent-activity-item-parent:focus, a.badge:hover, a.recent-activity-item-parent:hover {
  color: #2D2C2C;
  background-color: #d6d4cd;
}

a.badge:focus, a.recent-activity-item-parent:focus, a.badge.is-focused, a.is-focused.recent-activity-item-parent {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(237, 242, 247, 0.25);
}

a.badge:focus, a.recent-activity-item-parent:focus, a.badge:hover, a.recent-activity-item-parent:hover {
  text-decoration: none;
}

.badge:empty, .recent-activity-item-parent:empty {
  display: none;
}

.badge, .recent-activity-item-parent {
  position: relative;
  top: -1px;
}

.button {
  display: inline-block;
  padding: 0.5em 1.25em;
  line-height: 1.5;
  color: $color_text;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid $color_border;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.15s ease-in-out;
}

.button:hover {
  text-decoration: none;
}

.button:disabled, .button.is-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}

a.button.is-disabled,
fieldset:disabled a.button {
  pointer-events: none;
}

.button-link {
  color: $color_link;
  border-color: transparent;
  text-decoration: none;
}

.button-link:hover {
  color: darken($color_link, 4%);
  text-decoration: underline;
}

.button-link:focus {
  box-shadow: none;
}

.button-link:disabled, .button-link.is-disabled {
  color: #EDECE9;
  pointer-events: none;
}

.button-sm {
  padding: 0.25em 0.75em;
  font-size: 0.875rem;
}

.button-lg {
  padding: 0.5em 1.5em;
  font-size: 1.125rem;
}

.not-a-button {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  overflow: visible;
  user-select: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.button-primary {
  color: $color_primary_inverse;
  border-color: rgba(25, 28, 32, 1);
  background-color: rgba(25, 28, 32, 1);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.button-primary:hover {
  color: $color_primary_inverse;
  border-color: #0e0f12;
  background-color: #101215;
}

.button-primary:focus, .button-primary.is-focused {
  outline: 0;
}

.button-primary:disabled, .button-primary.is-disabled {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.button-primary:not(:disabled):not(.is-disabled):active, .button-primary:not(:disabled):not(.is-disabled)[data-selected="true"], .button-primary:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #030303;
  background-color: #070809;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.button-outline:hover {
  color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.button-outline:focus, .button-outline.is-focused {
  outline: 0;
}

.button-outline:disabled, .button-outline.is-disabled {
  color: $color_text;
  border-color: $color_border;
}

.button-outline:not(:disabled):not(.is-disabled):active, .button-outline:not(:disabled):not(.is-disabled)[data-selected="true"], .button-outline:not(:disabled):not(.is-disabled).is-active {
  color: #101215;
  border-color: #101215;
}

.button-outline-primary {
  color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.button-outline-primary:hover {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
}

.button-outline-primary:focus, .button-outline-primary.is-focused {
  outline: 0;
}

.button-outline-primary:disabled, .button-outline-primary.is-disabled {
  color: $color_text;
  border-color: $color_border;
}

.button-outline-primary:not(:disabled):not(.is-disabled):active, .button-outline-primary:not(:disabled):not(.is-disabled)[data-selected="true"], .button-outline-primary:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #101215;
  background-color: #101215;
}

.button-secondary {
  color: $color_secondary_inverse;
  border-color: $color_secondary;
  background-color: $color_secondary;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.button-secondary:hover {
  color: $color_secondary_inverse;
  border-color: darken($color_secondary, 5%);
  background-color: darken($color_secondary, 4%);
}

.button-secondary:focus, .button-secondary.is-focused {
  outline: 0;
}

.button-secondary:disabled, .button-secondary.is-disabled {
  color: $color_secondary_inverse;
  background-color: $color_secondary;
  border-color: $color_secondary;
}

.button-secondary:not(:disabled):not(.is-disabled):active, .button-secondary:not(:disabled):not(.is-disabled)[data-selected="true"], .button-secondary:not(:disabled):not(.is-disabled).is-active {
  color: $color_secondary_inverse;
  border-color: darken($color_secondary, 10%);
  background-color: darken($color_secondary, 8%);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.button-outline-secondary {
  color: $color_secondary;
  border-color: $color_secondary;
}

.button-outline-secondary:hover {
  color: $color_secondary_inverse;
  background-color: $color_secondary;
}

.button-outline-secondary:focus, .button-outline-secondary.is-focused {
  outline: 0;
}

.button-outline-secondary:disabled, .button-outline-secondary.is-disabled {
  color: $color_text;
  border-color: $color_border;
}

.button-outline-secondary:not(:disabled):not(.is-disabled):active, .button-outline-secondary:not(:disabled):not(.is-disabled)[data-selected="true"], .button-outline-secondary:not(:disabled):not(.is-disabled).is-active {
  color: $color_secondary_inverse;
  border-color: darken($color_secondary, 4%);
  background-color: darken($color_secondary, 4%);
}

.button-tertiary {
  color: $color_tertiary_inverse;
  border-color: $color_tertiary;
  background-color: $color_tertiary;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.button-tertiary:hover {
  color: $color_tertiary_inverse;
  border-color: darken($color_tertiary, 5%);
  background-color: darken($color_tertiary, 4%);
}

.button-tertiary:focus, .button-tertiary.is-focused {
  outline: 0;
}

.button-tertiary:disabled, .button-tertiary.is-disabled {
  color: $color_tertiary_inverse;
  background-color: $color_tertiary;
  border-color: $color_tertiary;
}

.button-tertiary:not(:disabled):not(.is-disabled):active, .button-tertiary:not(:disabled):not(.is-disabled)[data-selected="true"], .button-tertiary:not(:disabled):not(.is-disabled).is-active {
  color: $color_tertiary_inverse;
  border-color: darken($color_tertiary, 10%);
  background-color: darken($color_tertiary, 8%);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.button-outline-tertiary {
  color: $color_tertiary;
  border-color: $color_tertiary;
}

.button-outline-tertiary:hover {
  color: $color_tertiary_inverse;
  background-color: $color_tertiary;
}

.button-outline-tertiary:focus, .button-outline-tertiary.is-focused {
  outline: 0;
}

.button-outline-tertiary:disabled, .button-outline-tertiary.is-disabled {
  color: $color_text;
  border-color: $color_border;
}

.button-outline-tertiary:not(:disabled):not(.is-disabled):active, .button-outline-tertiary:not(:disabled):not(.is-disabled)[data-selected="true"], .button-outline-tertiary:not(:disabled):not(.is-disabled).is-active {
  color: $color_tertiary_inverse;
  border-color: darken($color_tertiary, 4%);
  background-color: darken($color_tertiary, 4%);
}

.button-translucent {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.button-translucent:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.125);
  background-color: rgba(255, 255, 255, 0.125);
}

.button-translucent:focus {
  outline: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 0.2rem $color_outline;
}

.button-translucent:not(:disabled):not(.is-disabled):active, .button-translucent:not(:disabled):not(.is-disabled)[data-selected="true"], .button-translucent:not(:disabled):not(.is-disabled).is-active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.button-translucent:not(:disabled):not(.is-disabled):active:focus, .button-translucent:not(:disabled):not(.is-disabled)[data-selected="true"]:focus, .button-translucent:not(:disabled):not(.is-disabled).is-active:focus {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem $color_outline;
}

.button .badge, .button .recent-activity-item-parent {
  position: relative;
  top: -1px;
}

.button-group,
.button-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.button-group > .button,
.button-group-vertical > .button {
  position: relative;
  flex: 1 1 auto;
}

.button-group > .button:hover,
.button-group-vertical > .button:hover {
  z-index: 1;
}

.button-group > .button:focus, .button-group > .button:active, .button-group > .button.is-active,
.button-group-vertical > .button:focus,
.button-group-vertical > .button:active,
.button-group-vertical > .button.is-active {
  z-index: 1;
}

.button-group > .button:not(:first-child),
.button-group > .button-group:not(:first-child) {
  margin-left: -1px;
}

.button-group > .button:not(:last-child),
.button-group > .button-group:not(:last-child) > .button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.button-group > .button:not(:first-child),
.button-group > .button-group:not(:first-child) > .button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.button-group-sm > .button {
  padding: 0.25em 0.75em;
  font-size: 0.875rem;
}

.button-group-lg > .button {
  padding: 0.5em 1.5em;
  font-size: 1.125rem;
}

.button-group-vertical {
  flex-direction: column;
  align-content: flex-start;
  justify-content: center;
}

.button-group-vertical > .button,
.button-group-vertical > .button-group {
  width: 100%;
}

.button-group-vertical > .button:not(:first-child),
.button-group-vertical > .button-group:not(:first-child) {
  margin-top: -1px;
}

.button-group-vertical > .button:not(:last-child),
.button-group-vertical > .button-group:not(:last-child) > .button {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.button-group-vertical > .button:not(:first-child),
.button-group-vertical > .button-group:not(:first-child) > .button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-field {
  margin-bottom: 1.5rem;
}

.form-field > label {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}

.form-field > p {
  margin: 0.25rem 0 0;
  color: $color_gray_600;
  font-size: 0.875rem;
}

.form-field select, .form-field .nesty-input,
.form-field .hc-multiselect-toggle,
.form-field > input,
.form-field > textarea {
  padding: 0.5em 0.75em;
  color: inherit;
  border: 1px solid $color_border;
  background-color: #fff;
  width: 100%;
  border-radius: 4px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-field select:hover, .form-field .nesty-input:hover,
.form-field .hc-multiselect-toggle:hover,
.form-field > input:hover,
.form-field > textarea:hover {
  border-color: $color_gray_600;
}

.form-field select:focus, .form-field .nesty-input:focus,
.form-field .hc-multiselect-toggle:focus,
.form-field > input:focus,
.form-field > textarea:focus {
  outline: 0;
  border-color: rgba(25, 28, 32, 1);
}

.form-field select:disabled, .form-field .nesty-input:disabled,
.form-field .hc-multiselect-toggle:disabled, .form-field select.is-disabled, .form-field .is-disabled.nesty-input,
.form-field .is-disabled.hc-multiselect-toggle,
.form-field > input:disabled,
.form-field > input.is-disabled,
.form-field > textarea:disabled,
.form-field > textarea.is-disabled {
  border-color: $color_border;
  background-color: #E7E5E2;
  cursor: not-allowed;
}

.form-field select, .form-field .nesty-input,
.form-field .hc-multiselect-toggle {
  padding-right: 2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' width='10' height='6'%3E%3Cpath fill='%232D3748' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E") no-repeat #fff;
  background-position: right 0.75em center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-field > input::-webkit-input-placeholder,
.form-field > textarea::-webkit-input-placeholder {
  color: $color_gray_600;
}

.form-field > input::-moz-placeholder,
.form-field > textarea::-moz-placeholder {
  color: $color_gray_600;
}

.form-field > input:-moz-placeholder,
.form-field > textarea:-moz-placeholder {
  color: $color_gray_600;
}

.form-field > input:-ms-input-placeholder,
.form-field > textarea:-ms-input-placeholder {
  color: $color_gray_600;
}

.form-field > textarea {
  min-height: 8em;
}

.form-field.required > label::after {
  margin-left: 2px;
  content: "*";
  color: #FC8181;
}

.form-field .optional {
  margin-left: 2px;
}

.search {
  position: relative;
}

.search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 1em;
  margin-right: 1em;
  bottom: -.125em;
  display: inline-block;
  width: 1em;
  line-height: 1;
}

.search .form-field {
  display: flex;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.search .form-field:hover {
  border-color: $color_gray_600;
}

.search .form-field:focus {
  border-color: rgba(25, 28, 32, 1);
  box-shadow: 0 0 0 0.2rem $color_outline;
}

.search .form-field.is-focused + .search-icon {
  color: rgba(25, 28, 32, 1);
}

.search [type="search"] {
  padding: 12px 16px;
  margin: 0 0.5rem;
  background: #F3F2F0;
  border-radius: 100px;
  outline: none;
  border: 1px solid #E7E5E2;
}

.search [type="search"]:hover {
  background: #FFF;
}

.search-sm [type="search"] {
  padding: 0.375em 0.675em;
}

.search-lg [type="search"] {
  padding: 0.675em 1em;
}

[dir="ltr"] .search:not(.search-right) .search-icon {
  left: 0;
}

[dir="rtl"] .search:not(.search-right) .search-icon {
  right: 0;
}

[dir="ltr"] .search:not(.search-right) [type="search"] {
  padding-left: 2.5em;
}

[dir="rtl"] .search:not(.search-right) [type="search"] {
  padding-right: 2.5em;
}

[dir="ltr"] .search-right .search-icon {
  right: 0;
}

[dir="rtl"] .search-right .search-icon {
  left: 0;
}

[dir="ltr"] .search-right [type="search"] {
  padding-right: 2.5em;
}

[dir="rtl"] .search-right [type="search"] {
  padding-left: 2.5em;
}

.search [type="submit"] {
  display: inline-block;
  padding: 0.5em 1.25em;
  line-height: 1.5;
  color: $color_text;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid $color_border;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.15s ease-in-out;
  color: $color_primary_inverse;
  border-color: rgba(25, 28, 32, 1);
  background-color: rgba(25, 28, 32, 1);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  flex: 0;
  margin: 0 0.5rem;
}

.search [type="submit"]:hover {
  text-decoration: none;
}

.search [type="submit"]:disabled, .search [type="submit"].is-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}

.search [type="submit"]:hover {
  color: $color_primary_inverse;
  border-color: #0e0f12;
  background-color: #101215;
}

.search [type="submit"]:focus, .search [type="submit"].is-focused {
  outline: 0;
}

.search [type="submit"]:disabled, .search [type="submit"].is-disabled {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.search [type="submit"]:not(:disabled):not(.is-disabled):active, .search [type="submit"]:not(:disabled):not(.is-disabled)[data-selected="true"], .search [type="submit"]:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #030303;
  background-color: #070809;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

@media (max-width: 991.98px) {
  .search [type="submit"] {
    display: flex;
    font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' viewBox='0 0 12 12' width='16' height='16' fill='none' stroke='white' aria-hidden='true'%3E%3Ccircle cx='4.5' cy='4.5' r='4'%3E%3C/circle%3E%3Cpath stroke-linecap='round' d='M11 11L7.5 7.5'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
  }
}

.search-translucent .search-icon {
  color: #fff;
}

.search-translucent [type="search"] {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.1);
}

.search-translucent [type="search"]:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.25);
}

.search-translucent [type="search"]:focus {
  background-color: #fff;
}

.search-translucent [type="search"]:not(:focus) {
  color: #fff;
}

.search-translucent [type="search"]:not(:focus)::-webkit-input-placeholder {
  color: $color_gray_200;
}

.search-translucent [type="search"]:not(:focus)::-moz-placeholder {
  color: $color_gray_200;
}

.search-translucent [type="search"]:not(:focus):-moz-placeholder {
  color: $color_gray_200;
}

.search-translucent [type="search"]:not(:focus):-ms-input-placeholder {
  color: $color_gray_200;
}

.boolean input {
  padding: 0.5rem;
  margin-right: 0.5em;
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.boolean input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

.boolean input:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

.boolean input:checked, .boolean input:indeterminate {
  border-color: rgba(25, 28, 32, 1);
  background-color: rgba(25, 28, 32, 1);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 0.75em;
}

.boolean input:active {
  filter: brightness(90%);
}

.boolean input:focus {
  outline: 0;
  border-color: rgba(25, 28, 32, 1);
}

.nesty-input,
.hc-multiselect-toggle {
  height: auto;
}

.nesty-input:hover,
.hc-multiselect-toggle:hover {
  color: inherit;
  text-decoration: none;
}

.nesty-input::after,
.hc-multiselect-toggle::after {
  content: "";
}

.hc-multiselect-toggle li {
  padding: 4px 6px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 1;
}

.upload-dropzone {
  color: inherit;
  border: 1px solid $color_border;
  background-color: #fff;
  width: 100%;
  border-radius: 4px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.upload-dropzone span {
  color: inherit;
}

.upload-dropzone:hover {
  border-color: $color_gray_600;
}

.upload-dropzone[data-hc-focus="true"] {
  outline: 0;
  border-color: rgba(25, 28, 32, 1);
  box-shadow: 0 0 0 0.2rem $color_outline;
}

.svg-icon {
  box-sizing: content-box;
  height: 1em;
}

.svg-icon {
  position: relative;
  bottom: -.125em;
  display: inline-block;
  width: 1em;
  line-height: 1;
  flex-shrink: 0;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.content img {
  max-width: 100%;
  height: auto;
}

.link-plain {
  text-decoration: none;
}

.link-plain:hover {
  color: inherit;
  text-decoration: none;
}

.link-stretched::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0);
}

.link-anchor {
  opacity: 0;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

:hover > .link-anchor, .link-anchor:focus {
  opacity: 1;
}

.link-anchor::before {
  content: "#";
}

.link-anchor:hover, .link-anchor:focus, .link-anchor:active {
  text-decoration: none;
}

.link {
  color: currentColor;
}

.link::after {
  background-color: currentColor;
  opacity: 0.2;
}

.link:focus, .link:hover {
  color: $color_link;
}

.link:focus::after, .link:hover::after {
  background-color: $color_link;
  opacity: 1;
}

.link-article {
  color: $color_link;
}

.link-article::after {
  background-color: $color_link;
  opacity: 0.2;
}

.link-article:focus::after, .link-article:hover::after {
  opacity: 1;
}

.link-implied {
  text-decoration: none;
  color: currentColor;
}

.link-implied:hover {
  color: inherit;
  text-decoration: none;
}

.link-implied::after {
  background-color: currentColor;
  opacity: 0;
}

.link-implied:focus::after, .link-implied:hover::after {
  opacity: 0.2;
}

.link,
.link-article,
.link-implied {
  position: relative;
}

.link::after,
.link-article::after,
.link-implied::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.125em;
  content: "";
  height: .125em;
}

.link:focus, .link:hover,
.link-article:focus,
.link-article:hover,
.link-implied:focus,
.link-implied:hover {
  text-decoration: none;
}

.link:active::after,
.link-article:active::after,
.link-implied:active::after {
  opacity: 1;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-bordered > :not(:last-child) {
  border-bottom: 1px solid $color_border;
}

.list-item {
  margin: 0.5rem 0;
}

.list-divider {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  margin-bottom: 1rem;
}

.list-divider > * + * {
  padding-left: 0.5rem;
}

.list-divider > * + *::before {
  display: inline-block;
  padding-right: 0.5rem;
  content: "·";
}

.list-divider > * + *::before {
  color: $color_gray_600;
}

.list-divider > * + *[data-divider]::before {
  content: attr(data-divider);
}

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.list-group-item-action {
  width: 100%;
  color: $color_text;
  text-align: inherit;
}

.list-group-item-action:focus, .list-group-item-action:hover {
  z-index: 1;
  color: $color_text;
  text-decoration: none;
  background-color: $color_gray_100;
}

.list-group-item-action:active {
  color: $color_text;
  background-color: $color_gray_200;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.5em 1em;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid $color_border;
}

.list-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.list-group-item:disabled, .list-group-item.is-disabled {
  color: $color_gray_600;
  pointer-events: none;
  background-color: #fff;
}

.list-group-item.is-active {
  z-index: 2;
  color: #fff;
  background-color: $color_link;
  border-color: $color_link;
}

.list-group-horizontal {
  flex-direction: row;
}

.list-group-horizontal .list-group-item {
  margin-right: -1px;
  margin-bottom: 0;
}

.list-group-horizontal .list-group-item:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0;
}

.list-group-horizontal .list-group-item:last-child {
  margin-right: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
}

@media (min-width: 576px) {
  .sm\:list-group-horizontal {
    flex-direction: row;
  }
  .sm\:list-group-horizontal .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .sm\:list-group-horizontal .list-group-item:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
  }
  .sm\:list-group-horizontal .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 768px) {
  .md\:list-group-horizontal {
    flex-direction: row;
  }
  .md\:list-group-horizontal .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .md\:list-group-horizontal .list-group-item:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
  }
  .md\:list-group-horizontal .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 992px) {
  .lg\:list-group-horizontal {
    flex-direction: row;
  }
  .lg\:list-group-horizontal .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .lg\:list-group-horizontal .list-group-item:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
  }
  .lg\:list-group-horizontal .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 1200px) {
  .xl\:list-group-horizontal {
    flex-direction: row;
  }
  .xl\:list-group-horizontal .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .xl\:list-group-horizontal .list-group-item:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
  }
  .xl\:list-group-horizontal .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0;
  }
}

.list-group-flush .list-group-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.list-group-flush .list-group-item:first-child {
  border-top: 0;
}

.list-group-flush .list-group-item:last-child {
  margin-bottom: -1px;
}

.list-group-flush:last-child .list-group-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

.table, .content table:not([class*="table"]) {
  color: $color_text;
  border-color: transparent;
}

.table th, .content table:not([class*="table"]) th,
.table td,
.content table:not([class*="table"]) td {
  padding: 0.75rem;
  vertical-align: top;
}

.table thead th, .content table:not([class*="table"]) thead th {
  font-size: 0.9375rem;
  font-weight: 500;
  vertical-align: bottom;
  border-bottom: 1px solid $color_border;
}

.table tbody, .content table:not([class*="table"]) tbody {
  font-size: 0.9375rem;
}

.table tr:not(:last-child), .content table:not([class*="table"]) tr:not(:last-child) {
  border-bottom: 1px solid $color_border;
}

.table-sm th,
.table-sm td {
  padding: 0.375rem;
}

.table-flush th:first-child,
.table-flush td:first-child {
  padding-left: 0;
}

.table-flush th:last-child,
.table-flush td:last-child {
  padding-right: 0;
}

.table-bordered {
  border: 1px solid $color_border;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid $color_border;
}

.table-bordered th:first-child,
.table-bordered td:first-child {
  padding-left: 0.75rem;
}

.table-bordered th:last-child,
.table-bordered td:last-child {
  padding-right: 0.75rem;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}

.table-borderless tr:not(:last-child) {
  border-bottom: none;
}

.table-flush th:first-child,
.table-flush td:first-child {
  padding-left: 0;
}

.table-flush th:last-child,
.table-flush td:last-child {
  padding-right: 0;
}

.hr {
  margin: 0;
  border: 0;
  border-bottom: 1px solid $color_border;
  background: transparent;
}

.zd-comment {
  margin-bottom: 1rem;
}

.notification {
  border: 1px solid;
  display: table;
  font-family: sans-serif;
  font-size: 13px;
  padding: 13px 15px;
  transition: height .2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

.notification-inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}

.notification-icon, .notification-text, .notification-dismiss {
  display: table-cell;
  vertical-align: middle;
}

.notification-text {
  padding: 0 15px;
  width: 100%;
}

.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}

.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}

.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}

.notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}

.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}

.notification-alert {
  color: #ad5e18;
  background: #fff8ed;
  border-color: #fcdba9;
}

.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}

.notification-icon::before, .notification-inline.notification-error::before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}

.notification-dismiss, a.notification-dismiss {
  color: #555;
  cursor: pointer;
  opacity: .6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}

.notification-dismiss:hover {
  opacity: 1;
}

.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}

[dir="rtl"] .notification-inline {
  text-align: right;
}

.notification-inline[aria-hidden="true"] {
  display: none;
}

.notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
  margin: -2px 5px 0 0;
}

[dir="rtl"] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}

.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}

.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

.notification-left-aligned {
  text-align: left;
  padding-left: 0;
}

html[dir="rtl"] .notification-left-aligned {
  text-align: right;
  padding-left: auto;
  padding-right: 0;
}

:not(.container) .template-notice {
  padding: 0 2rem;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.layout {
  position: relative;
  background-color: #fff;
  z-index: 0;
}

.layout--boxed {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  overflow: clip;
}

.layout--boxed ~ .powered-by-zendesk {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.container {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  padding: 0 2rem;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  padding: 0 2rem;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .flex-container {
    flex-direction: row;
    align-items: flex-end;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  margin-right: -1rem;
  margin-left: -1rem;
}

.row-flush {
  margin-right: 0;
  margin-left: 0;
}

.row-flush > [class*="col"] {
  padding-right: 0;
  padding-left: 0;
}

.row-sm {
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.row-sm > [class*="col"] {
  padding-right: 16px;
  padding-left: 16px;
}

.row-lg {
  margin-right: -1.5rem;
  margin-left: -1.5rem;
}

.row-lg > [class*="col"] {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .sm\:col-1, .sm\:col-2, .sm\:col-3, .sm\:col-4, .sm\:col-5, .sm\:col-6, .sm\:col-7, .sm\:col-8, .sm\:col-9, .sm\:col-10, .sm\:col-11, .sm\:col-12, .sm\:col,
.sm\:col-auto, .md\:col-1, .md\:col-2, .md\:col-3, .md\:col-4, .md\:col-5, .md\:col-6, .md\:col-7, .md\:col-8, .md\:col-9, .md\:col-10, .md\:col-11, .md\:col-12, .md\:col,
.md\:col-auto, .lg\:col-1, .lg\:col-2, .lg\:col-3, .lg\:col-4, .lg\:col-5, .lg\:col-6, .lg\:col-7, .lg\:col-8, .lg\:col-9, .lg\:col-10, .lg\:col-11, .lg\:col-12, .lg\:col,
.lg\:col-auto, .xl\:col-1, .xl\:col-2, .xl\:col-3, .xl\:col-4, .xl\:col-5, .xl\:col-6, .xl\:col-7, .xl\:col-8, .xl\:col-9, .xl\:col-10, .xl\:col-11, .xl\:col-12, .xl\:col,
.xl\:col-auto, .recent-articles,
.related-articles {
  position: relative;
  padding-right: 1rem;
  padding-left: 1rem;
  width: 100%;
  min-height: 1px;
  min-width: 0;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  flex: 1 0 300px;
}

.col-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-order-1 {
  order: 1;
}

.col-order-2 {
  order: 2;
}

.col-order-3 {
  order: 3;
}

.col-order-4 {
  order: 4;
}

.col-order-5 {
  order: 5;
}

.col-order-6 {
  order: 6;
}

.col-order-7 {
  order: 7;
}

.col-order-8 {
  order: 8;
}

.col-order-9 {
  order: 9;
}

.col-order-10 {
  order: 10;
}

.col-order-11 {
  order: 11;
}

.col-order-12 {
  order: 12;
}

.col-offset-1 {
  margin-left: 8.3333333333%;
}

.col-offset-2 {
  margin-left: 16.6666666667%;
}

.col-offset-3 {
  margin-left: 25%;
}

.col-offset-4 {
  margin-left: 33.3333333333%;
}

.col-offset-5 {
  margin-left: 41.6666666667%;
}

.col-offset-6 {
  margin-left: 50%;
}

.col-offset-7 {
  margin-left: 58.3333333333%;
}

.col-offset-8 {
  margin-left: 66.6666666667%;
}

.col-offset-9 {
  margin-left: 75%;
}

.col-offset-10 {
  margin-left: 83.3333333333%;
}

.col-offset-11 {
  margin-left: 91.6666666667%;
}

@media (min-width: 576px) {
  .sm\:col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .sm\:col-auto {
    flex: 1 0 300px;
  }
  .sm\:col-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .sm\:col-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .sm\:col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .sm\:col-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .sm\:col-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .sm\:col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .sm\:col-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .sm\:col-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .sm\:col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .sm\:col-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .sm\:col-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .sm\:col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .sm\:col-order-1 {
    order: 1;
  }
  .sm\:col-order-2 {
    order: 2;
  }
  .sm\:col-order-3 {
    order: 3;
  }
  .sm\:col-order-4 {
    order: 4;
  }
  .sm\:col-order-5 {
    order: 5;
  }
  .sm\:col-order-6 {
    order: 6;
  }
  .sm\:col-order-7 {
    order: 7;
  }
  .sm\:col-order-8 {
    order: 8;
  }
  .sm\:col-order-9 {
    order: 9;
  }
  .sm\:col-order-10 {
    order: 10;
  }
  .sm\:col-order-11 {
    order: 11;
  }
  .sm\:col-order-12 {
    order: 12;
  }
  .sm\:col-offset-0 {
    margin-left: 0;
  }
  .sm\:col-offset-1 {
    margin-left: 8.3333333333%;
  }
  .sm\:col-offset-2 {
    margin-left: 16.6666666667%;
  }
  .sm\:col-offset-3 {
    margin-left: 25%;
  }
  .sm\:col-offset-4 {
    margin-left: 33.3333333333%;
  }
  .sm\:col-offset-5 {
    margin-left: 41.6666666667%;
  }
  .sm\:col-offset-6 {
    margin-left: 50%;
  }
  .sm\:col-offset-7 {
    margin-left: 58.3333333333%;
  }
  .sm\:col-offset-8 {
    margin-left: 66.6666666667%;
  }
  .sm\:col-offset-9 {
    margin-left: 75%;
  }
  .sm\:col-offset-10 {
    margin-left: 83.3333333333%;
  }
  .sm\:col-offset-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 768px) {
  .md\:col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .md\:col-auto {
    flex: 1 0 300px;
  }
  .md\:col-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .md\:col-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .md\:col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .md\:col-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .md\:col-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .md\:col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .md\:col-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .md\:col-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .md\:col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .md\:col-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .md\:col-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .md\:col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .md\:col-order-1 {
    order: 1;
  }
  .md\:col-order-2 {
    order: 2;
  }
  .md\:col-order-3 {
    order: 3;
  }
  .md\:col-order-4 {
    order: 4;
  }
  .md\:col-order-5 {
    order: 5;
  }
  .md\:col-order-6 {
    order: 6;
  }
  .md\:col-order-7 {
    order: 7;
  }
  .md\:col-order-8 {
    order: 8;
  }
  .md\:col-order-9 {
    order: 9;
  }
  .md\:col-order-10 {
    order: 10;
  }
  .md\:col-order-11 {
    order: 11;
  }
  .md\:col-order-12 {
    order: 12;
  }
  .md\:col-offset-0 {
    margin-left: 0;
  }
  .md\:col-offset-1 {
    margin-left: 8.3333333333%;
  }
  .md\:col-offset-2 {
    margin-left: 16.6666666667%;
  }
  .md\:col-offset-3 {
    margin-left: 25%;
  }
  .md\:col-offset-4 {
    margin-left: 33.3333333333%;
  }
  .md\:col-offset-5 {
    margin-left: 41.6666666667%;
  }
  .md\:col-offset-6 {
    margin-left: 50%;
  }
  .md\:col-offset-7 {
    margin-left: 58.3333333333%;
  }
  .md\:col-offset-8 {
    margin-left: 66.6666666667%;
  }
  .md\:col-offset-9 {
    margin-left: 75%;
  }
  .md\:col-offset-10 {
    margin-left: 83.3333333333%;
  }
  .md\:col-offset-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 992px) {
  .lg\:col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .lg\:col-auto {
    flex: 1 0 300px;
  }
  .lg\:col-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .lg\:col-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .lg\:col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .lg\:col-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .lg\:col-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .lg\:col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .lg\:col-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .lg\:col-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .lg\:col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .lg\:col-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .lg\:col-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .lg\:col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .lg\:col-order-1 {
    order: 1;
  }
  .lg\:col-order-2 {
    order: 2;
  }
  .lg\:col-order-3 {
    order: 3;
  }
  .lg\:col-order-4 {
    order: 4;
  }
  .lg\:col-order-5 {
    order: 5;
  }
  .lg\:col-order-6 {
    order: 6;
  }
  .lg\:col-order-7 {
    order: 7;
  }
  .lg\:col-order-8 {
    order: 8;
  }
  .lg\:col-order-9 {
    order: 9;
  }
  .lg\:col-order-10 {
    order: 10;
  }
  .lg\:col-order-11 {
    order: 11;
  }
  .lg\:col-order-12 {
    order: 12;
  }
  .lg\:col-offset-0 {
    margin-left: 0;
  }
  .lg\:col-offset-1 {
    margin-left: 8.3333333333%;
  }
  .lg\:col-offset-2 {
    margin-left: 16.6666666667%;
  }
  .lg\:col-offset-3 {
    margin-left: 25%;
  }
  .lg\:col-offset-4 {
    margin-left: 33.3333333333%;
  }
  .lg\:col-offset-5 {
    margin-left: 41.6666666667%;
  }
  .lg\:col-offset-6 {
    margin-left: 50%;
  }
  .lg\:col-offset-7 {
    margin-left: 58.3333333333%;
  }
  .lg\:col-offset-8 {
    margin-left: 66.6666666667%;
  }
  .lg\:col-offset-9 {
    margin-left: 75%;
  }
  .lg\:col-offset-10 {
    margin-left: 83.3333333333%;
  }
  .lg\:col-offset-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 1200px) {
  .xl\:col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .xl\:col-auto {
    flex: 1 0 300px;
  }
  .xl\:col-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .xl\:col-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .xl\:col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .xl\:col-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .xl\:col-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .xl\:col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .xl\:col-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .xl\:col-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .xl\:col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .xl\:col-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .xl\:col-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .xl\:col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .xl\:col-order-1 {
    order: 1;
  }
  .xl\:col-order-2 {
    order: 2;
  }
  .xl\:col-order-3 {
    order: 3;
  }
  .xl\:col-order-4 {
    order: 4;
  }
  .xl\:col-order-5 {
    order: 5;
  }
  .xl\:col-order-6 {
    order: 6;
  }
  .xl\:col-order-7 {
    order: 7;
  }
  .xl\:col-order-8 {
    order: 8;
  }
  .xl\:col-order-9 {
    order: 9;
  }
  .xl\:col-order-10 {
    order: 10;
  }
  .xl\:col-order-11 {
    order: 11;
  }
  .xl\:col-order-12 {
    order: 12;
  }
  .xl\:col-offset-0 {
    margin-left: 0;
  }
  .xl\:col-offset-1 {
    margin-left: 8.3333333333%;
  }
  .xl\:col-offset-2 {
    margin-left: 16.6666666667%;
  }
  .xl\:col-offset-3 {
    margin-left: 25%;
  }
  .xl\:col-offset-4 {
    margin-left: 33.3333333333%;
  }
  .xl\:col-offset-5 {
    margin-left: 41.6666666667%;
  }
  .xl\:col-offset-6 {
    margin-left: 50%;
  }
  .xl\:col-offset-7 {
    margin-left: 58.3333333333%;
  }
  .xl\:col-offset-8 {
    margin-left: 66.6666666667%;
  }
  .xl\:col-offset-9 {
    margin-left: 75%;
  }
  .xl\:col-offset-10 {
    margin-left: 83.3333333333%;
  }
  .xl\:col-offset-11 {
    margin-left: 91.6666666667%;
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: row;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-radius: 16px;
  background: #F3F2F0;
  gap: 12px;
}

.card:hover {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.card img {
  height: 48px !important;
}

@media (min-width: 768px) {
  .card {
    flex-direction: row;
    gap: 25px;
  }
}

.card-body {
  flex: 1 1 auto;
  padding: 1rem 1.5rem;
}

.cta {
  background-color: #EDF2F7;
  color: rgba(25, 28, 32, 1);
}

.cta h3 {
  color: rgba(25, 28, 32, 1);
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #e2e8f0;
}

.hero h1,
.hero h2 {
  color: rgba(24, 24, 24, 1);
}

@keyframes skeleton {
  100% {
    left: 100%;
  }
}

.skeleton {
  position: relative;
  border-radius: 4px;
  height: 8rem;
  overflow: hidden;
  line-height: 0.6;
  background-color: #f9f9f9;
}

.skeleton::before {
  position: absolute;
  top: 0;
  width: 1000px;
  height: 100%;
  content: "";
  left: -1800px;
  animation: 1.5s ease-in-out 300ms infinite normal none running skeleton;
  background-image: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.skeleton::after {
  content: "";
  display: block;
}

.media {
  display: flex;
  align-items: flex-start;
  flex: 1;
}

.media-body {
  flex: 1;
  min-width: 0;
}

.svg-shape {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 4rem;
  fill: #fff;
}

.header {
  height: 72px;
  background-color: rgba(60, 81, 121, 0);
}

.world-id-mode header.header {
  display: none;
}

.header .navbar-brand,
.header .navbar-toggle,
.header .nav-link {
  color: #fefefe;
}

.header .navbar-brand:focus, .header .navbar-brand:hover,
.header .navbar-toggle:focus,
.header .navbar-toggle:hover,
.header .nav-link:focus,
.header .nav-link:hover {
  color: #efefef;
}

.header .navbar-brand:active,
.header .navbar-toggle:active,
.header .nav-link:active {
  color: #dfdfdf;
}

.fixed-header {
  visibility: hidden;
  background-color: transparent;
  transition: background-color 0.15s ease-in-out;
}

.fixed-header .navbar-brand,
.fixed-header .navbar-toggle,
.fixed-header .nav-link {
  color: #fefefe;
}

.fixed-header .navbar-brand:focus, .fixed-header .navbar-brand:hover,
.fixed-header .navbar-toggle:focus,
.fixed-header .navbar-toggle:hover,
.fixed-header .nav-link:focus,
.fixed-header .nav-link:hover {
  color: #efefef;
}

.fixed-header .navbar-brand:active,
.fixed-header .navbar-toggle:active,
.fixed-header .nav-link:active {
  color: #dfdfdf;
}

.fixed-header:not(.visible) ~ main > .hero, .fixed-header.sticky-header ~ main > .hero {
  margin-top: -72px;
}

.text-h1 {
  font-size: 34px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 40.8px */
  letter-spacing: -0.34px;
}

.text-s2 {
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 20.4px */
}

.text-b4 {
  font-size: 13px;
  font-style: normal;
  font-weight: 350;
  line-height: 130%; /* 16.9px */
}

.text-header .navbar-brand,
.text-header .navbar-toggle,
.text-header .nav-link {
  color: #fefefe;
}

.text-header .navbar-brand:focus, .text-header .navbar-brand:hover,
.text-header .navbar-toggle:focus,
.text-header .navbar-toggle:hover,
.text-header .nav-link:focus,
.text-header .nav-link:hover {
  color: #efefef;
}

.text-header .navbar-brand:active,
.text-header .navbar-toggle:active,
.text-header .nav-link:active {
  color: #dfdfdf;
}

#logo {
  height: 32px;
}

.footer {
  position: relative;
  background-color: rgba(255, 255, 255, 1);
}

.world-id-mode footer {
  display: none;
}

.footer .nav {
  gap: 24px;
}

.footer .container {
  padding-top: 24px;
  padding-bottom: 24px;
}

.footer .nav-link {
  color: rgba(155, 163, 174, 1);
  padding: 0;
}

.footer .nav-link:hover {
  color: #8a93a0;
}

.footer .nav-link:active {
  color: #798493;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  margin-bottom: 1rem;
}

/* Breadcrumb as eyebrow above the article title */
.article-breadcrumbs {
  margin-bottom: 0.5rem;
}
.article-breadcrumbs .breadcrumbs {
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #575654;
}
.article-breadcrumbs .breadcrumbs li {
  color: #575654;
}
.article-breadcrumbs .breadcrumbs li:last-child {
  color: #2D2C2C;
}

.breadcrumbs > * + * {
  padding-left: 0.5rem;
}

.breadcrumbs > * + *::before {
  display: inline-block;
  padding-right: 0.5rem;
  content: "/";
}

.breadcrumbs li {
  color: #424140;
}

.breadcrumbs li + li::before {
  color: #424140;
}

.dropdown {
  position: relative;
  display: inline-flex;
}

.dropdown-toggle {
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  background-color: #fff;
  z-index: 99;
  padding: 0.75rem 0;
  margin: 0.25rem 0;
  border: 1px solid $color_border;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  min-width: 170px;
  font-size: 0.875rem;
}

.dropdown-menu-start {
  left: 0;
  right: auto;
  transform: translateX(0);
}

.dropdown-menu-end {
  left: auto;
  right: 0;
  transform: translateX(0);
}

.dropdown-menu-top {
  top: auto;
  bottom: 100%;
}

.dropdown-menu[aria-expanded="true"] {
  display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    clear: both;
    font-weight: 500;
    color: #2D2C2C;
    text-align: inherit;
    background-color: transparent;
    border: 0;
}

.dropdown-item:focus, .dropdown-item:hover {
  color: #2a2928;
  text-decoration: none;
  background-color: $color_gray_200;
}

.dropdown-item.is-active {
  color: #fff;
  text-decoration: none;
  background-color: $color_link;
}

.dropdown-item[aria-selected="true"] {
  cursor: default;
}

.dropdown-item[aria-selected="true"]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}

[dir="rtl"] .dropdown-item[aria-selected="true"]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}

.has-dropdown {
  position: relative;
}

.has-dropdown:focus > .dropdown-menu, .has-dropdown:hover > .dropdown-menu {
  display: block;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5em 1em;
}

.nav-link:focus, .nav-link:hover {
  text-decoration: none;
  cursor: pointer;
}

.nav-line .nav-link {
  position: relative;
}

.nav-line .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  border-bottom: 3px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  transition: border-color 0.15s ease-in-out;
}

.nav-line .nav-link:hover::after {
  border-bottom-color: $color_border;
}

.nav-line .nav-link:active, .nav-line .nav-link.is-active::after {
  border-bottom-color: rgba(25, 28, 32, 1);
}

.nav-tabs {
  position: relative;
  flex-direction: column;
  border: 1px solid $color_border;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-width: 1px 1px 0;
  margin-bottom: -1px;
}

.nav-tabs .nav-item {
  border-bottom: 1px solid $color_border;
}

@media (min-width: 576px) {
  .nav-tabs {
    flex-direction: row;
    border-width: 0 0 1px;
  }
  .nav-tabs .nav-item,
  .nav-tabs .nav-link {
    z-index: 1;
  }
  .nav-tabs .nav-item {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom: none;
  }
  .nav-tabs .nav-link {
    margin-bottom: -1px;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    border-bottom-color: $color_border;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .nav-tabs .nav-link.is-active {
    background-color: #fff;
    border-color: $color_border;
    border-bottom-color: transparent;
  }
  .nav-tabs .dropdown-menu {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .nav-tabs .dropdown-menu .is-active {
    border: none;
    font-weight: 500;
  }
}

.nav-pills .nav-link.is-active {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
}

.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 96;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 98;
}

.menu {
  top: 0;
  right: 0;
  left: 0;
  z-index: 99;
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 72px 0 1.5rem;
  background-color: rgba(60, 81, 121, 0);
}

.menu-links-center::before {
  content: "";
  display: flex;
  margin-right: auto;
}

.menu-standard {
  position: absolute;
  text-align: center;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
}

.menu-slide-in {
  position: fixed;
  bottom: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 20rem;
  box-shadow: 5px 0 40px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
  .md\:menu-expanded {
    position: revert;
    top: auto;
    bottom: auto;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    text-align: left;
    max-width: none;
    background-color: transparent;
    box-shadow: none;
  }
}

@media (min-width: 992px) {
  .lg\:menu-expanded {
    position: revert;
    top: auto;
    bottom: auto;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    text-align: left;
    max-width: none;
    background-color: transparent;
    box-shadow: none;
  }
}

@media (min-width: 1200px) {
  .xl\:menu-expanded {
    position: revert;
    top: auto;
    bottom: auto;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    text-align: left;
    max-width: none;
    background-color: transparent;
    box-shadow: none;
  }
}

.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.navbar-light .navbar-brand {
  color: #2D2C2C;
}

.navbar-light .navbar-toggle,
.navbar-light .nav-link {
  color: #424140;
}

.navbar-light .navbar-toggle:focus, .navbar-light .navbar-toggle:hover,
.navbar-light .nav-link:focus,
.navbar-light .nav-link:hover {
  color: #2D2C2C;
}

.navbar-dark .navbar-brand {
  color: #fff;
}

.navbar-dark .navbar-toggle,
.navbar-dark .nav-link {
  color: #E7E5E2;
}

.navbar-dark .navbar-toggle:focus, .navbar-dark .navbar-toggle:hover,
.navbar-dark .nav-link:focus,
.navbar-dark .nav-link:hover {
  color: #fff;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
}

.navbar-brand:focus, .navbar-brand:hover {
  text-decoration: none;
}

.navbar-tagline {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.navbar-toggle {
  position: relative;
  display: block;
  padding: 1rem 0.5rem;
  height: auto;
  border: none;
  background-color: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  cursor: pointer;
  order: 1;
  z-index: 100;
}

.navbar-toggle span {
  display: block;
  position: relative;
  pointer-events: none;
}

.navbar-toggle span, .navbar-toggle span:before, .navbar-toggle span:after {
  background-color: currentColor;
  height: 2px;
  width: 26px;
  outline: 1px solid transparent;
  transition: background-color 0.15s, transform 0.15s;
}

.navbar-toggle span:before, .navbar-toggle span:after {
  position: absolute;
  content: "";
  left: 0;
}

.navbar-toggle span:before {
  top: -7px;
}

.navbar-toggle span:after {
  top: 7px;
}

.navbar-toggle[aria-expanded="true"] {
  outline: none;
}

.navbar-toggle[aria-expanded="true"] span {
  background-color: transparent;
}

.navbar-toggle[aria-expanded="true"] span:before, .navbar-toggle[aria-expanded="true"] span:after {
  top: 0;
}

.navbar-toggle[aria-expanded="true"] span:before {
  transform: rotate(-45deg);
}

.navbar-toggle[aria-expanded="true"] span:after {
  transform: rotate(45deg);
}

.pagination {
  margin: 1rem 0;
  text-align: center;
}

.pagination-list {
  padding-left: 0;
}

.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}

.pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link {
  display: inline-block;
  padding: 0.5em 1.25em;
  line-height: 1.5;
  color: $color_text;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid $color_border;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.15s ease-in-out;
  color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover {
  text-decoration: none;
}

.pagination-next-link:disabled, .pagination-next-link.is-disabled, .pagination-prev-link:disabled, .pagination-prev-link.is-disabled, .pagination-first-link:disabled, .pagination-first-link.is-disabled, .pagination-last-link:disabled, .pagination-last-link.is-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}

.pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
}

.pagination-next-link:focus, .pagination-next-link.is-focused, .pagination-prev-link:focus, .pagination-prev-link.is-focused, .pagination-first-link:focus, .pagination-first-link.is-focused, .pagination-last-link:focus, .pagination-last-link.is-focused {
  outline: 0;
}

.pagination-next-link:disabled, .pagination-next-link.is-disabled, .pagination-prev-link:disabled, .pagination-prev-link.is-disabled, .pagination-first-link:disabled, .pagination-first-link.is-disabled, .pagination-last-link:disabled, .pagination-last-link.is-disabled {
  color: $color_text;
  border-color: $color_border;
}

.pagination-next-link:not(:disabled):not(.is-disabled):active, .pagination-next-link:not(:disabled):not(.is-disabled)[data-selected="true"], .pagination-next-link:not(:disabled):not(.is-disabled).is-active, .pagination-prev-link:not(:disabled):not(.is-disabled):active, .pagination-prev-link:not(:disabled):not(.is-disabled)[data-selected="true"], .pagination-prev-link:not(:disabled):not(.is-disabled).is-active, .pagination-first-link:not(:disabled):not(.is-disabled):active, .pagination-first-link:not(:disabled):not(.is-disabled)[data-selected="true"], .pagination-first-link:not(:disabled):not(.is-disabled).is-active, .pagination-last-link:not(:disabled):not(.is-disabled):active, .pagination-last-link:not(:disabled):not(.is-disabled)[data-selected="true"], .pagination-last-link:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #101215;
  background-color: #101215;
}

.pagination-first-text, .pagination-last-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

@media (max-width: 767.98px) {
  .collapsible-nav {
    position: relative;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-left: 0;
    margin-right: 0;
    max-height: 3em;
    overflow: hidden;
    cursor: pointer;
    transition: max-height 0.3s ease-in-out;
  }
  .collapsible-nav > * {
    line-height: 3em;
  }
  .collapsible-nav > [aria-selected="true"] {
    order: -1;
  }
  .collapsible-nav .nav-link {
    padding: 0;
    border: none;
  }
  .collapsible-nav .nav-link::after {
    display: none;
  }
  .collapsible-nav .nav-link.is-active {
    order: -1;
    color: inherit;
    background-color: transparent;
  }
  .collapsible-nav::after {
    position: absolute;
    right: 0;
    top: calc(3em / 2 - .5em);
    content: "";
    height: 1em;
    width: 1em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%232D3748' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'%3E%3C/path%3E%3C/svg%3E") no-repeat transparent center center;
    pointer-events: none;
  }
  [dir="rtl"] .collapsible-nav::after {
    left: 0;
    right: auto;
  }
  .collapsible-nav.is-expanded {
    max-height: 100vh;
  }
  .collapsible-nav.is-expanded::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath stroke='%232D3748' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'%3E%3C/path%3E%3C/svg%3E") no-repeat transparent center center;
  }
  .collapsible-nav .dropdown-menu {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .collapse-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    margin: 0;
    font-size: 1em;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease-in-out;
  }
  .collapse-title::after {
    content: "";
    height: 1em;
    width: 1em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%232D3748' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'%3E%3C/path%3E%3C/svg%3E") no-repeat transparent center center;
  }
  .collapse-title.is-active::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath stroke='%232D3748' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'%3E%3C/path%3E%3C/svg%3E") no-repeat transparent center center;
  }
  .collapse-title:focus, .collapse-title:hover {
    text-decoration: none;
    outline: none;
  }
}

.collapse:not(.is-visible) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: all 0.15s ease-in-out;
}

.expand {
  display: flex !important;
  height: 100% !important;
  max-height: none !important;
  overflow: visible;
}

@media (min-width: 576px) {
  .sm\:expand {
    display: flex !important;
    height: 100% !important;
    max-height: none !important;
    overflow: visible;
  }
}

@media (min-width: 768px) {
  .md\:expand {
    display: flex !important;
    height: 100% !important;
    max-height: none !important;
    overflow: visible;
  }
}

@media (min-width: 992px) {
  .lg\:expand {
    display: flex !important;
    height: 100% !important;
    max-height: none !important;
    overflow: visible;
  }
}

@media (min-width: 1200px) {
  .xl\:expand {
    display: flex !important;
    height: 100% !important;
    max-height: none !important;
    overflow: visible;
  }
}

.tab-panel {
  padding: 1rem;
  margin-bottom: 1rem;
  list-style: none;
  border: 1px solid $color_border;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.tab-panel:not(:first-of-type) {
  display: none;
}

.tab-panel :last-child {
  margin-bottom: 0;
}

.tab {
  display: none;
}

.tab.is-active {
  display: block;
}

.fade {
  transition: opacity 150ms ease;
}

.fade:not(.is-shown) {
  opacity: 0;
}

.scaled {
  transition: opacity 500ms ease, transform 500ms ease;
  transform: scale(1);
}

.scaled:not(.is-shown) {
  opacity: 0;
  transform: scale(1.1);
}

.toggle {
  padding-left: 1em;
  padding-right: 1em;
}

.toggle:not(:last-child) {
  border-bottom: 1px solid $color_border;
}

.toggle-title {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  margin: 0;
  font-size: 1em;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease-in-out;
}

.toggle-title::after {
  content: "";
  height: 1em;
  width: 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%232D3748' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'%3E%3C/path%3E%3C/svg%3E") no-repeat transparent center center;
}

.toggle-title.is-active::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath stroke='%232D3748' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'%3E%3C/path%3E%3C/svg%3E") no-repeat transparent center center;
}

.toggle-title:focus, .toggle-title:hover {
  text-decoration: none;
  outline: none;
}

.text-note {
  color: rgba(80, 109, 255, 1);
}

.text-warning {
  color: #ef526e;
}

.text-notification {
  color: #fff;
}

.text-inherit {
  color: inherit;
}

.text-base {
  color: $color_text;
}

.text-black {
  color: #000;
}

.text-white {
  color: #fff;
}

.text-gray-100 {
  color: $color_gray_100;
}

.text-gray-200 {
  color: $color_gray_200;
}

.text-gray-300 {
  color: #E7E5E2;
}

.text-gray-400 {
  color: #EDECE9;
}

.text-gray-500 {
  color: #575654;
}

.text-gray-600 {
  color: $color_gray_600;
}

.text-gray-700 {
  color: #424140;
}

.text-gray-800 {
  color: #373635;
}

.text-gray-900 {
  color: #2D2C2C;
}

.text-red-500 {
  color: #EA392A;
}

.text-orange-500 {
  color: #FF6F0F;
}

.text-green-500 {
  color: #00AB48;
}

.text-primary {
  color: rgba(25, 28, 32, 1);
}

.text-secondary {
  color: $color_secondary;
}

.text-tertiary {
  color: $color_tertiary;
}

.text-primary-inverse {
  color: $color_primary_inverse;
}

.text-secondary-inverse {
  color: $color_secondary_inverse;
}

.text-tertiary-inverse {
  color: $color_tertiary_inverse;
}

.hover\:text-inherit:hover {
  color: inherit;
}

.hover\:text-base:hover {
  color: $color_text;
}

.hover\:text-black:hover {
  color: #000;
}

.hover\:text-white:hover {
  color: #fff;
}

.hover\:text-gray-100:hover {
  color: $color_gray_100;
}

.hover\:text-gray-200:hover {
  color: $color_gray_200;
}

.hover\:text-gray-300:hover {
  color: #E7E5E2;
}

.hover\:text-gray-400:hover {
  color: #EDECE9;
}

.hover\:text-gray-500:hover {
  color: #575654;
}

.hover\:text-gray-600:hover {
  color: $color_gray_600;
}

.hover\:text-gray-700:hover {
  color: #424140;
}

.hover\:text-gray-800:hover {
  color: #373635;
}

.hover\:text-gray-900:hover {
  color: #2D2C2C;
}

.hover\:text-red-500:hover {
  color: #EA392A;
}

.hover\:text-orange-500:hover {
  color: #FF6F0F;
}

.hover\:text-green-500:hover {
  color: #00AB48;
}

.hover\:text-primary:hover {
  color: rgba(25, 28, 32, 1);
}

.hover\:text-secondary:hover {
  color: $color_secondary;
}

.hover\:text-tertiary:hover {
  color: $color_tertiary;
}

.hover\:text-primary-inverse:hover {
  color: $color_primary_inverse;
}

.hover\:text-secondary-inverse:hover {
  color: $color_secondary_inverse;
}

.hover\:text-tertiary-inverse:hover {
  color: $color_tertiary_inverse;
}

@media (min-width: 576px) {
  .sm\:text-inherit {
    color: inherit;
  }
  .sm\:text-base {
    color: $color_text;
  }
  .sm\:text-black {
    color: #000;
  }
  .sm\:text-white {
    color: #fff;
  }
  .sm\:text-gray-100 {
    color: $color_gray_100;
  }
  .sm\:text-gray-200 {
    color: $color_gray_200;
  }
  .sm\:text-gray-300 {
    color: #E7E5E2;
  }
  .sm\:text-gray-400 {
    color: #EDECE9;
  }
  .sm\:text-gray-500 {
    color: #575654;
  }
  .sm\:text-gray-600 {
    color: $color_gray_600;
  }
  .sm\:text-gray-700 {
    color: #424140;
  }
  .sm\:text-gray-800 {
    color: #373635;
  }
  .sm\:text-gray-900 {
    color: #2D2C2C;
  }
  .sm\:text-red-500 {
    color: #EA392A;
  }
  .sm\:text-orange-500 {
    color: #FF6F0F;
  }
  .sm\:text-green-500 {
    color: #00AB48;
  }
  .sm\:text-primary {
    color: rgba(25, 28, 32, 1);
  }
  .sm\:text-secondary {
    color: $color_secondary;
  }
  .sm\:text-tertiary {
    color: $color_tertiary;
  }
  .sm\:text-primary-inverse {
    color: $color_primary_inverse;
  }
  .sm\:text-secondary-inverse {
    color: $color_secondary_inverse;
  }
  .sm\:text-tertiary-inverse {
    color: $color_tertiary_inverse;
  }
}

@media (min-width: 768px) {
  .md\:text-inherit {
    color: inherit;
  }
  .md\:text-base {
    color: $color_text;
  }
  .md\:text-black {
    color: #000;
  }
  .md\:text-white {
    color: #fff;
  }
  .md\:text-gray-100 {
    color: $color_gray_100;
  }
  .md\:text-gray-200 {
    color: $color_gray_200;
  }
  .md\:text-gray-300 {
    color: #E7E5E2;
  }
  .md\:text-gray-400 {
    color: #EDECE9;
  }
  .md\:text-gray-500 {
    color: #575654;
  }
  .md\:text-gray-600 {
    color: $color_gray_600;
  }
  .md\:text-gray-700 {
    color: #424140;
  }
  .md\:text-gray-800 {
    color: #373635;
  }
  .md\:text-gray-900 {
    color: #2D2C2C;
  }
  .md\:text-red-500 {
    color: #EA392A;
  }
  .md\:text-orange-500 {
    color: #FF6F0F;
  }
  .md\:text-green-500 {
    color: #00AB48;
  }
  .md\:text-primary {
    color: rgba(25, 28, 32, 1);
  }
  .md\:text-secondary {
    color: $color_secondary;
  }
  .md\:text-tertiary {
    color: $color_tertiary;
  }
  .md\:text-primary-inverse {
    color: $color_primary_inverse;
  }
  .md\:text-secondary-inverse {
    color: $color_secondary_inverse;
  }
  .md\:text-tertiary-inverse {
    color: $color_tertiary_inverse;
  }
}

@media (min-width: 992px) {
  .lg\:text-inherit {
    color: inherit;
  }
  .lg\:text-base {
    color: $color_text;
  }
  .lg\:text-black {
    color: #000;
  }
  .lg\:text-white {
    color: #fff;
  }
  .lg\:text-gray-100 {
    color: $color_gray_100;
  }
  .lg\:text-gray-200 {
    color: $color_gray_200;
  }
  .lg\:text-gray-300 {
    color: #E7E5E2;
  }
  .lg\:text-gray-400 {
    color: #EDECE9;
  }
  .lg\:text-gray-500 {
    color: #575654;
  }
  .lg\:text-gray-600 {
    color: $color_gray_600;
  }
  .lg\:text-gray-700 {
    color: #424140;
  }
  .lg\:text-gray-800 {
    color: #373635;
  }
  .lg\:text-gray-900 {
    color: #2D2C2C;
  }
  .lg\:text-red-500 {
    color: #EA392A;
  }
  .lg\:text-orange-500 {
    color: #FF6F0F;
  }
  .lg\:text-green-500 {
    color: #00AB48;
  }
  .lg\:text-primary {
    color: rgba(25, 28, 32, 1);
  }
  .lg\:text-secondary {
    color: $color_secondary;
  }
  .lg\:text-tertiary {
    color: $color_tertiary;
  }
  .lg\:text-primary-inverse {
    color: $color_primary_inverse;
  }
  .lg\:text-secondary-inverse {
    color: $color_secondary_inverse;
  }
  .lg\:text-tertiary-inverse {
    color: $color_tertiary_inverse;
  }
}

@media (min-width: 1200px) {
  .xl\:text-inherit {
    color: inherit;
  }
  .xl\:text-base {
    color: $color_text;
  }
  .xl\:text-black {
    color: #000;
  }
  .xl\:text-white {
    color: #fff;
  }
  .xl\:text-gray-100 {
    color: $color_gray_100;
  }
  .xl\:text-gray-200 {
    color: $color_gray_200;
  }
  .xl\:text-gray-300 {
    color: #E7E5E2;
  }
  .xl\:text-gray-400 {
    color: #EDECE9;
  }
  .xl\:text-gray-500 {
    color: #575654;
  }
  .xl\:text-gray-600 {
    color: $color_gray_600;
  }
  .xl\:text-gray-700 {
    color: #424140;
  }
  .xl\:text-gray-800 {
    color: #373635;
  }
  .xl\:text-gray-900 {
    color: #2D2C2C;
  }
  .xl\:text-red-500 {
    color: #EA392A;
  }
  .xl\:text-orange-500 {
    color: #FF6F0F;
  }
  .xl\:text-green-500 {
    color: #00AB48;
  }
  .xl\:text-primary {
    color: rgba(25, 28, 32, 1);
  }
  .xl\:text-secondary {
    color: $color_secondary;
  }
  .xl\:text-tertiary {
    color: $color_tertiary;
  }
  .xl\:text-primary-inverse {
    color: $color_primary_inverse;
  }
  .xl\:text-secondary-inverse {
    color: $color_secondary_inverse;
  }
  .xl\:text-tertiary-inverse {
    color: $color_tertiary_inverse;
  }
}

.font-heading {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.font-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.font-code {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.wysiwyg-font-size-small {
  font-size: 0.875rem;
}

.wysiwyg-font-size-medium {
  font-size: 1em;
}

.wysiwyg-font-size-large {
  font-size: 1.125rem;
}

.wysiwyg-font-size-x-large {
  font-size: 1.25rem;
}

.font-size-xs {
  font-size: 0.75rem;
}

.font-size-sm {
  font-size: 0.875rem;
}

.font-size-md {
  font-size: 0.9375rem;
}

.font-size-base {
  font-size: 1rem;
}

.font-size-lg {
  font-size: 1.125rem;
}

.font-size-xl {
  font-size: 1.25rem;
}

.font-size-2xl {
  font-size: 1.5rem;
}

.font-size-3xl {
  font-size: 1.875rem;
}

.font-size-4xl {
  font-size: 2.25rem;
}

.font-size-5xl {
  font-size: 3rem;
}

.font-size-6xl {
  font-size: 4rem;
}

@media (min-width: 576px) {
  .sm\:font-size-xs {
    font-size: 0.75rem;
  }
  .sm\:font-size-sm {
    font-size: 0.875rem;
  }
  .sm\:font-size-md {
    font-size: 0.9375rem;
  }
  .sm\:font-size-base {
    font-size: 1rem;
  }
  .sm\:font-size-lg {
    font-size: 1.125rem;
  }
  .sm\:font-size-xl {
    font-size: 1.25rem;
  }
  .sm\:font-size-2xl {
    font-size: 1.5rem;
  }
  .sm\:font-size-3xl {
    font-size: 1.875rem;
  }
  .sm\:font-size-4xl {
    font-size: 2.25rem;
  }
  .sm\:font-size-5xl {
    font-size: 3rem;
  }
  .sm\:font-size-6xl {
    font-size: 4rem;
  }
}

@media (min-width: 768px) {
  .md\:font-size-xs {
    font-size: 0.75rem;
  }
  .md\:font-size-sm {
    font-size: 0.875rem;
  }
  .md\:font-size-md {
    font-size: 0.9375rem;
  }
  .md\:font-size-base {
    font-size: 1rem;
  }
  .md\:font-size-lg {
    font-size: 1.125rem;
  }
  .md\:font-size-xl {
    font-size: 1.25rem;
  }
  .md\:font-size-2xl {
    font-size: 1.5rem;
  }
  .md\:font-size-3xl {
    font-size: 1.875rem;
  }
  .md\:font-size-4xl {
    font-size: 2.25rem;
  }
  .md\:font-size-5xl {
    font-size: 3rem;
  }
  .md\:font-size-6xl {
    font-size: 4rem;
  }
}

@media (min-width: 992px) {
  .lg\:font-size-xs {
    font-size: 0.75rem;
  }
  .lg\:font-size-sm {
    font-size: 0.875rem;
  }
  .lg\:font-size-md {
    font-size: 0.9375rem;
  }
  .lg\:font-size-base {
    font-size: 1rem;
  }
  .lg\:font-size-lg {
    font-size: 1.125rem;
  }
  .lg\:font-size-xl {
    font-size: 1.25rem;
  }
  .lg\:font-size-2xl {
    font-size: 1.5rem;
  }
  .lg\:font-size-3xl {
    font-size: 1.875rem;
  }
  .lg\:font-size-4xl {
    font-size: 2.25rem;
  }
  .lg\:font-size-5xl {
    font-size: 3rem;
  }
  .lg\:font-size-6xl {
    font-size: 4rem;
  }
}

@media (min-width: 1200px) {
  .xl\:font-size-xs {
    font-size: 0.75rem;
  }
  .xl\:font-size-sm {
    font-size: 0.875rem;
  }
  .xl\:font-size-md {
    font-size: 0.9375rem;
  }
  .xl\:font-size-base {
    font-size: 1rem;
  }
  .xl\:font-size-lg {
    font-size: 1.125rem;
  }
  .xl\:font-size-xl {
    font-size: 1.25rem;
  }
  .xl\:font-size-2xl {
    font-size: 1.5rem;
  }
  .xl\:font-size-3xl {
    font-size: 1.875rem;
  }
  .xl\:font-size-4xl {
    font-size: 2.25rem;
  }
  .xl\:font-size-5xl {
    font-size: 3rem;
  }
  .xl\:font-size-6xl {
    font-size: 4rem;
  }
}

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

@media (min-width: 576px) {
  .sm\:normal {
    font-style: normal;
  }
  .sm\:italic {
    font-style: italic;
  }
}

@media (min-width: 768px) {
  .md\:normal {
    font-style: normal;
  }
  .md\:italic {
    font-style: italic;
  }
}

@media (min-width: 992px) {
  .lg\:normal {
    font-style: normal;
  }
  .lg\:italic {
    font-style: italic;
  }
}

@media (min-width: 1200px) {
  .xl\:normal {
    font-style: normal;
  }
  .xl\:italic {
    font-style: italic;
  }
}

.font-hairline {
  font-weight: 100;
}

.font-thin {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

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

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}

@media (min-width: 576px) {
  .sm\:font-hairline {
    font-weight: 100;
  }
  .sm\:font-thin {
    font-weight: 200;
  }
  .sm\:font-light {
    font-weight: 300;
  }
  .sm\:font-normal {
    font-weight: 400;
  }
  .sm\:font-medium {
    font-weight: 500;
  }
  .sm\:font-semibold {
    font-weight: 600;
  }
  .sm\:font-bold {
    font-weight: 700;
  }
  .sm\:font-extrabold {
    font-weight: 800;
  }
  .sm\:font-black {
    font-weight: 900;
  }
}

@media (min-width: 768px) {
  .md\:font-hairline {
    font-weight: 100;
  }
  .md\:font-thin {
    font-weight: 200;
  }
  .md\:font-light {
    font-weight: 300;
  }
  .md\:font-normal {
    font-weight: 400;
  }
  .md\:font-medium {
    font-weight: 500;
  }
  .md\:font-semibold {
    font-weight: 600;
  }
  .md\:font-bold {
    font-weight: 700;
  }
  .md\:font-extrabold {
    font-weight: 800;
  }
  .md\:font-black {
    font-weight: 900;
  }
}

@media (min-width: 992px) {
  .lg\:font-hairline {
    font-weight: 100;
  }
  .lg\:font-thin {
    font-weight: 200;
  }
  .lg\:font-light {
    font-weight: 300;
  }
  .lg\:font-normal {
    font-weight: 400;
  }
  .lg\:font-medium {
    font-weight: 500;
  }
  .lg\:font-semibold {
    font-weight: 600;
  }
  .lg\:font-bold {
    font-weight: 700;
  }
  .lg\:font-extrabold {
    font-weight: 800;
  }
  .lg\:font-black {
    font-weight: 900;
  }
}

@media (min-width: 1200px) {
  .xl\:font-hairline {
    font-weight: 100;
  }
  .xl\:font-thin {
    font-weight: 200;
  }
  .xl\:font-light {
    font-weight: 300;
  }
  .xl\:font-normal {
    font-weight: 400;
  }
  .xl\:font-medium {
    font-weight: 500;
  }
  .xl\:font-semibold {
    font-weight: 600;
  }
  .xl\:font-bold {
    font-weight: 700;
  }
  .xl\:font-extrabold {
    font-weight: 800;
  }
  .xl\:font-black {
    font-weight: 900;
  }
}

.tracking-tighter {
  letter-spacing: -0.05em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-normal {
  letter-spacing: 0;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

@media (min-width: 576px) {
  .sm\:tracking-tighter {
    letter-spacing: -0.05em;
  }
  .sm\:tracking-tight {
    letter-spacing: -0.025em;
  }
  .sm\:tracking-normal {
    letter-spacing: 0;
  }
  .sm\:tracking-wide {
    letter-spacing: 0.025em;
  }
  .sm\:tracking-wider {
    letter-spacing: 0.05em;
  }
}

@media (min-width: 768px) {
  .md\:tracking-tighter {
    letter-spacing: -0.05em;
  }
  .md\:tracking-tight {
    letter-spacing: -0.025em;
  }
  .md\:tracking-normal {
    letter-spacing: 0;
  }
  .md\:tracking-wide {
    letter-spacing: 0.025em;
  }
  .md\:tracking-wider {
    letter-spacing: 0.05em;
  }
}

@media (min-width: 992px) {
  .lg\:tracking-tighter {
    letter-spacing: -0.05em;
  }
  .lg\:tracking-tight {
    letter-spacing: -0.025em;
  }
  .lg\:tracking-normal {
    letter-spacing: 0;
  }
  .lg\:tracking-wide {
    letter-spacing: 0.025em;
  }
  .lg\:tracking-wider {
    letter-spacing: 0.05em;
  }
}

@media (min-width: 1200px) {
  .xl\:tracking-tighter {
    letter-spacing: -0.05em;
  }
  .xl\:tracking-tight {
    letter-spacing: -0.025em;
  }
  .xl\:tracking-normal {
    letter-spacing: 0;
  }
  .xl\:tracking-wide {
    letter-spacing: 0.025em;
  }
  .xl\:tracking-wider {
    letter-spacing: 0.05em;
  }
}

.line-height-1 {
  line-height: 1;
}

.line-height-tight {
  line-height: 1.25;
}

.line-height-snug {
  line-height: 1.375;
}

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

.line-height-relaxed {
  line-height: 1.625;
}

.line-height-wide {
  line-height: 2;
}

.list-none {
  list-style-type: none;
}

.list-disc {
  list-style-type: disc;
}

.list-decimal {
  list-style-type: decimal;
}

.list-square {
  list-style-type: square;
}

.list-inside {
  list-style-position: inside;
}

.list-outside {
  list-style-position: outside;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

@media (min-width: 576px) {
  .sm\:text-left {
    text-align: left;
  }
  .sm\:text-right {
    text-align: right;
  }
  .sm\:text-center {
    text-align: center;
  }
  .sm\:text-justify {
    text-align: justify;
  }
}

@media (min-width: 768px) {
  .md\:text-left {
    text-align: left;
  }
  .md\:text-right {
    text-align: right;
  }
  .md\:text-center {
    text-align: center;
  }
  .md\:text-justify {
    text-align: justify;
  }
}

@media (min-width: 992px) {
  .lg\:text-left {
    text-align: left;
  }
  .lg\:text-right {
    text-align: right;
  }
  .lg\:text-center {
    text-align: center;
  }
  .lg\:text-justify {
    text-align: justify;
  }
}

@media (min-width: 1200px) {
  .xl\:text-left {
    text-align: left;
  }
  .xl\:text-right {
    text-align: right;
  }
  .xl\:text-center {
    text-align: center;
  }
  .xl\:text-justify {
    text-align: justify;
  }
}

.underline {
  text-decoration: underline;
}

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

.no-underline {
  text-decoration: none;
}

.hover\:underline:hover {
  text-decoration: underline;
}

.hover\:line-through:hover {
  text-decoration: line-through;
}

.hover\:no-underline:hover {
  text-decoration: none;
}

.lowercase {
  text-transform: lowercase;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

@media (min-width: 576px) {
  .sm\:lowercase {
    text-transform: lowercase;
  }
  .sm\:uppercase {
    text-transform: uppercase;
  }
  .sm\:capitalize {
    text-transform: capitalize;
  }
  .sm\:normal-case {
    text-transform: none;
  }
}

@media (min-width: 768px) {
  .md\:lowercase {
    text-transform: lowercase;
  }
  .md\:uppercase {
    text-transform: uppercase;
  }
  .md\:capitalize {
    text-transform: capitalize;
  }
  .md\:normal-case {
    text-transform: none;
  }
}

@media (min-width: 992px) {
  .lg\:lowercase {
    text-transform: lowercase;
  }
  .lg\:uppercase {
    text-transform: uppercase;
  }
  .lg\:capitalize {
    text-transform: capitalize;
  }
  .lg\:normal-case {
    text-transform: none;
  }
}

@media (min-width: 1200px) {
  .xl\:lowercase {
    text-transform: lowercase;
  }
  .xl\:uppercase {
    text-transform: uppercase;
  }
  .xl\:capitalize {
    text-transform: capitalize;
  }
  .xl\:normal-case {
    text-transform: none;
  }
}

.align-baseline {
  vertical-align: baseline;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.align-bottom {
  vertical-align: bottom;
}

.align-text-top {
  vertical-align: text-top;
}

.align-text-bottom {
  vertical-align: text-bottom;
}

@media (min-width: 576px) {
  .sm\:align-baseline {
    vertical-align: baseline;
  }
  .sm\:align-top {
    vertical-align: top;
  }
  .sm\:align-middle {
    vertical-align: middle;
  }
  .sm\:align-bottom {
    vertical-align: bottom;
  }
  .sm\:align-text-top {
    vertical-align: text-top;
  }
  .sm\:align-text-bottom {
    vertical-align: text-bottom;
  }
}

@media (min-width: 768px) {
  .md\:align-baseline {
    vertical-align: baseline;
  }
  .md\:align-top {
    vertical-align: top;
  }
  .md\:align-middle {
    vertical-align: middle;
  }
  .md\:align-bottom {
    vertical-align: bottom;
  }
  .md\:align-text-top {
    vertical-align: text-top;
  }
  .md\:align-text-bottom {
    vertical-align: text-bottom;
  }
}

@media (min-width: 992px) {
  .lg\:align-baseline {
    vertical-align: baseline;
  }
  .lg\:align-top {
    vertical-align: top;
  }
  .lg\:align-middle {
    vertical-align: middle;
  }
  .lg\:align-bottom {
    vertical-align: bottom;
  }
  .lg\:align-text-top {
    vertical-align: text-top;
  }
  .lg\:align-text-bottom {
    vertical-align: text-bottom;
  }
}

@media (min-width: 1200px) {
  .xl\:align-baseline {
    vertical-align: baseline;
  }
  .xl\:align-top {
    vertical-align: top;
  }
  .xl\:align-middle {
    vertical-align: middle;
  }
  .xl\:align-bottom {
    vertical-align: bottom;
  }
  .xl\:align-text-top {
    vertical-align: text-top;
  }
  .xl\:align-text-bottom {
    vertical-align: text-bottom;
  }
}

.white-space-normal {
  white-space: normal;
}

.white-space-no-wrap {
  white-space: nowrap;
}

.white-space-pre {
  white-space: pre;
}

.white-space-pre-line {
  white-space: pre-line;
}

.white-space-pre-wrap {
  white-space: pre-wrap;
}

.break-normal {
  word-break: normal;
}

.break-words {
  word-wrap: break-word;
}

.break-spaces {
  word-wrap: break-spaces;
}

.break-all {
  word-break: break-all;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.ratio {
  position: relative;
  height: 0;
}

.ratio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 96;
}

.ratio-1-1 {
  padding-bottom: 100%;
}

.ratio-16-9 {
  padding-bottom: 56.25%;
}

.ratio-4-3 {
  padding-bottom: 75%;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.inline {
  display: inline !important;
}

.table, .content table:not([class*="table"]) {
  display: table !important;
}

.table-header-group {
  display: table-header-group !important;
}

.table-row {
  display: table-row !important;
}

.table-cell {
  display: table-cell !important;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

.hidden {
  display: none !important;
}

.empty\:hidden:empty {
  display: none;
}

@media (min-width: 576px) {
  .sm\:block {
    display: block !important;
  }
  .sm\:inline-block {
    display: inline-block !important;
  }
  .sm\:inline {
    display: inline !important;
  }
  .sm\:table {
    display: table !important;
  }
  .sm\:table-header-group {
    display: table-header-group !important;
  }
  .sm\:table-row {
    display: table-row !important;
  }
  .sm\:table-cell {
    display: table-cell !important;
  }
  .sm\:flex {
    display: flex !important;
  }
  .sm\:inline-flex {
    display: inline-flex !important;
  }
  .sm\:hidden {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .md\:block {
    display: block !important;
  }
  .md\:inline-block {
    display: inline-block !important;
  }
  .md\:inline {
    display: inline !important;
  }
  .md\:table {
    display: table !important;
  }
  .md\:table-header-group {
    display: table-header-group !important;
  }
  .md\:table-row {
    display: table-row !important;
  }
  .md\:table-cell {
    display: table-cell !important;
  }
  .md\:flex {
    display: flex !important;
  }
  .md\:inline-flex {
    display: inline-flex !important;
  }
  .md\:hidden {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .lg\:block {
    display: block !important;
  }
  .lg\:inline-block {
    display: inline-block !important;
  }
  .lg\:inline {
    display: inline !important;
  }
  .lg\:table {
    display: table !important;
  }
  .lg\:table-header-group {
    display: table-header-group !important;
  }
  .lg\:table-row {
    display: table-row !important;
  }
  .lg\:table-cell {
    display: table-cell !important;
  }
  .lg\:flex {
    display: flex !important;
  }
  .lg\:inline-flex {
    display: inline-flex !important;
  }
  .lg\:hidden {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .xl\:block {
    display: block !important;
  }
  .xl\:inline-block {
    display: inline-block !important;
  }
  .xl\:inline {
    display: inline !important;
  }
  .xl\:table {
    display: table !important;
  }
  .xl\:table-header-group {
    display: table-header-group !important;
  }
  .xl\:table-row {
    display: table-row !important;
  }
  .xl\:table-cell {
    display: table-cell !important;
  }
  .xl\:flex {
    display: flex !important;
  }
  .xl\:inline-flex {
    display: inline-flex !important;
  }
  .xl\:hidden {
    display: none !important;
  }
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

@media (min-width: 576px) {
  .sm\:float-left {
    float: left;
  }
  .sm\:float-right {
    float: right;
  }
  .sm\:float-none {
    float: none;
  }
  .sm\:clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}

@media (min-width: 768px) {
  .md\:float-left {
    float: left;
  }
  .md\:float-right {
    float: right;
  }
  .md\:float-none {
    float: none;
  }
  .md\:clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}

@media (min-width: 992px) {
  .lg\:float-left {
    float: left;
  }
  .lg\:float-right {
    float: right;
  }
  .lg\:float-none {
    float: none;
  }
  .lg\:clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}

@media (min-width: 1200px) {
  .xl\:float-left {
    float: left;
  }
  .xl\:float-right {
    float: right;
  }
  .xl\:float-none {
    float: none;
  }
  .xl\:clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.scrolling-touch {
  -webkit-overflow-scrolling: touch;
}

.scrolling-auto {
  -webkit-overflow-scrolling: auto;
}

@media (min-width: 576px) {
  .sm\:overflow-auto {
    overflow: auto;
  }
  .sm\:overflow-hidden {
    overflow: hidden;
  }
  .sm\:overflow-visible {
    overflow: visible;
  }
  .sm\:overflow-scroll {
    overflow: scroll;
  }
  .sm\:overflow-x-auto {
    overflow-x: auto;
  }
  .sm\:overflow-y-auto {
    overflow-y: auto;
  }
  .sm\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .sm\:overflow-y-hidden {
    overflow-y: hidden;
  }
  .sm\:overflow-x-visible {
    overflow-x: visible;
  }
  .sm\:overflow-y-visible {
    overflow-y: visible;
  }
  .sm\:overflow-x-scroll {
    overflow-x: scroll;
  }
  .sm\:overflow-y-scroll {
    overflow-y: scroll;
  }
  .sm\:scrolling-touch {
    -webkit-overflow-scrolling: touch;
  }
  .sm\:scrolling-auto {
    -webkit-overflow-scrolling: auto;
  }
}

@media (min-width: 768px) {
  .md\:overflow-auto {
    overflow: auto;
  }
  .md\:overflow-hidden {
    overflow: hidden;
  }
  .md\:overflow-visible {
    overflow: visible;
  }
  .md\:overflow-scroll {
    overflow: scroll;
  }
  .md\:overflow-x-auto {
    overflow-x: auto;
  }
  .md\:overflow-y-auto {
    overflow-y: auto;
  }
  .md\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .md\:overflow-y-hidden {
    overflow-y: hidden;
  }
  .md\:overflow-x-visible {
    overflow-x: visible;
  }
  .md\:overflow-y-visible {
    overflow-y: visible;
  }
  .md\:overflow-x-scroll {
    overflow-x: scroll;
  }
  .md\:overflow-y-scroll {
    overflow-y: scroll;
  }
  .md\:scrolling-touch {
    -webkit-overflow-scrolling: touch;
  }
  .md\:scrolling-auto {
    -webkit-overflow-scrolling: auto;
  }
}

@media (min-width: 992px) {
  .lg\:overflow-auto {
    overflow: auto;
  }
  .lg\:overflow-hidden {
    overflow: hidden;
  }
  .lg\:overflow-visible {
    overflow: visible;
  }
  .lg\:overflow-scroll {
    overflow: scroll;
  }
  .lg\:overflow-x-auto {
    overflow-x: auto;
  }
  .lg\:overflow-y-auto {
    overflow-y: auto;
  }
  .lg\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .lg\:overflow-y-hidden {
    overflow-y: hidden;
  }
  .lg\:overflow-x-visible {
    overflow-x: visible;
  }
  .lg\:overflow-y-visible {
    overflow-y: visible;
  }
  .lg\:overflow-x-scroll {
    overflow-x: scroll;
  }
  .lg\:overflow-y-scroll {
    overflow-y: scroll;
  }
  .lg\:scrolling-touch {
    -webkit-overflow-scrolling: touch;
  }
  .lg\:scrolling-auto {
    -webkit-overflow-scrolling: auto;
  }
}

@media (min-width: 1200px) {
  .xl\:overflow-auto {
    overflow: auto;
  }
  .xl\:overflow-hidden {
    overflow: hidden;
  }
  .xl\:overflow-visible {
    overflow: visible;
  }
  .xl\:overflow-scroll {
    overflow: scroll;
  }
  .xl\:overflow-x-auto {
    overflow-x: auto;
  }
  .xl\:overflow-y-auto {
    overflow-y: auto;
  }
  .xl\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .xl\:overflow-y-hidden {
    overflow-y: hidden;
  }
  .xl\:overflow-x-visible {
    overflow-x: visible;
  }
  .xl\:overflow-y-visible {
    overflow-y: visible;
  }
  .xl\:overflow-x-scroll {
    overflow-x: scroll;
  }
  .xl\:overflow-y-scroll {
    overflow-y: scroll;
  }
  .xl\:scrolling-touch {
    -webkit-overflow-scrolling: touch;
  }
  .xl\:scrolling-auto {
    -webkit-overflow-scrolling: auto;
  }
}

@media (max-width: 575.98px) {
  .sm\:scroll-x {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .sm\:scroll-x::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .md\:scroll-x {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .md\:scroll-x::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .lg\:scroll-x {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .lg\:scroll-x::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .xl\:scroll-x {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .xl\:scroll-x::-webkit-scrollbar {
    display: none;
  }
}

.scroll-x {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-x::-webkit-scrollbar {
  display: none;
}

.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.initial {
  position: initial;
}

.absolute-top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 100;
}

.absolute-bottom {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 96;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 96;
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 97;
}

@media (min-width: 576px) {
  .sm\:static {
    position: static;
  }
  .sm\:relative {
    position: relative;
  }
  .sm\:absolute {
    position: absolute;
  }
  .sm\:fixed {
    position: fixed;
  }
  .sm\:sticky {
    position: sticky;
  }
  .sm\:initial {
    position: initial;
  }
  .sm\:absolute-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
  }
  .sm\:absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 100;
  }
  .sm\:fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 96;
  }
  .sm\:fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 96;
  }
  .sm\:sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 97;
  }
}

@media (min-width: 768px) {
  .md\:static {
    position: static;
  }
  .md\:relative {
    position: relative;
  }
  .md\:absolute {
    position: absolute;
  }
  .md\:fixed {
    position: fixed;
  }
  .md\:sticky {
    position: sticky;
  }
  .md\:initial {
    position: initial;
  }
  .md\:absolute-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
  }
  .md\:absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 100;
  }
  .md\:fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 96;
  }
  .md\:fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 96;
  }
  .md\:sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 97;
  }
}

@media (min-width: 992px) {
  .lg\:static {
    position: static;
  }
  .lg\:relative {
    position: relative;
  }
  .lg\:absolute {
    position: absolute;
  }
  .lg\:fixed {
    position: fixed;
  }
  .lg\:sticky {
    position: sticky;
  }
  .lg\:initial {
    position: initial;
  }
  .lg\:absolute-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
  }
  .lg\:absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 100;
  }
  .lg\:fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 96;
  }
  .lg\:fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 96;
  }
  .lg\:sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 97;
  }
}

@media (min-width: 1200px) {
  .xl\:static {
    position: static;
  }
  .xl\:relative {
    position: relative;
  }
  .xl\:absolute {
    position: absolute;
  }
  .xl\:fixed {
    position: fixed;
  }
  .xl\:sticky {
    position: sticky;
  }
  .xl\:initial {
    position: initial;
  }
  .xl\:absolute-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
  }
  .xl\:absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 100;
  }
  .xl\:fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 96;
  }
  .xl\:fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 96;
  }
  .xl\:sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 97;
  }
}

.top-0 {
  top: 0;
}

.top-100 {
  top: 100%;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.top-auto {
  top: auto;
}

.bottom-auto {
  bottom: auto;
}

.left-auto {
  left: auto;
}

.right-auto {
  right: auto;
}

@media (min-width: 576px) {
  .sm\:top-0 {
    top: 0;
  }
  .sm\:top-100 {
    top: 100%;
  }
  .sm\:bottom-0 {
    bottom: 0;
  }
  .sm\:left-0 {
    left: 0;
  }
  .sm\:right-0 {
    right: 0;
  }
  .sm\:top-auto {
    top: auto;
  }
  .sm\:bottom-auto {
    bottom: auto;
  }
  .sm\:left-auto {
    left: auto;
  }
  .sm\:right-auto {
    right: auto;
  }
}

@media (min-width: 768px) {
  .md\:top-0 {
    top: 0;
  }
  .md\:top-100 {
    top: 100%;
  }
  .md\:bottom-0 {
    bottom: 0;
  }
  .md\:left-0 {
    left: 0;
  }
  .md\:right-0 {
    right: 0;
  }
  .md\:top-auto {
    top: auto;
  }
  .md\:bottom-auto {
    bottom: auto;
  }
  .md\:left-auto {
    left: auto;
  }
  .md\:right-auto {
    right: auto;
  }
}

@media (min-width: 992px) {
  .lg\:top-0 {
    top: 0;
  }
  .lg\:top-100 {
    top: 100%;
  }
  .lg\:bottom-0 {
    bottom: 0;
  }
  .lg\:left-0 {
    left: 0;
  }
  .lg\:right-0 {
    right: 0;
  }
  .lg\:top-auto {
    top: auto;
  }
  .lg\:bottom-auto {
    bottom: auto;
  }
  .lg\:left-auto {
    left: auto;
  }
  .lg\:right-auto {
    right: auto;
  }
}

@media (min-width: 1200px) {
  .xl\:top-0 {
    top: 0;
  }
  .xl\:top-100 {
    top: 100%;
  }
  .xl\:bottom-0 {
    bottom: 0;
  }
  .xl\:left-0 {
    left: 0;
  }
  .xl\:right-0 {
    right: 0;
  }
  .xl\:top-auto {
    top: auto;
  }
  .xl\:bottom-auto {
    bottom: auto;
  }
  .xl\:left-auto {
    left: auto;
  }
  .xl\:right-auto {
    right: auto;
  }
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

@media (min-width: 576px) {
  .sm\:visible {
    visibility: visible;
  }
  .sm\:invisible {
    visibility: hidden;
  }
}

@media (min-width: 768px) {
  .md\:visible {
    visibility: visible;
  }
  .md\:invisible {
    visibility: hidden;
  }
}

@media (min-width: 992px) {
  .lg\:visible {
    visibility: visible;
  }
  .lg\:invisible {
    visibility: hidden;
  }
}

@media (min-width: 1200px) {
  .xl\:visible {
    visibility: visible;
  }
  .xl\:invisible {
    visibility: hidden;
  }
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-100 {
  z-index: 100;
}

.z-auto {
  z-index: auto;
}

.z-fixed {
  z-index: 96;
}

.z-sticky {
  z-index: 97;
}

.z-dropdown {
  z-index: 99;
}

.bg-fixed {
  background-attachment: fixed;
}

.bg-local {
  background-attachment: local;
}

.bg-scroll {
  background-attachment: scroll;
}

.bg-inherit {
  background-color: inherit;
}

.bg-transparent {
  background-color: transparent;
}

.bg-translucent {
  background-color: rgba(255, 255, 255, 0.1);
}

.bg-header-fixed {
  background-color: transparent;
}

.bg-header {
  background-color: rgba(60, 81, 121, 0);
}

.bg-note {
  background-color: rgba(80, 109, 255, 1);
}

.bg-warning {
  background-color: #ef526e;
}

.bg-notification {
  background-color: #ef526e;
}

.bg-custom-blocks {
  background-color: #fafafb;
}

.bg-content-blocks {
  background-color: rgba(255, 254, 254, 1);
}

.blur {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.bg-black {
  background-color: #000;
}

.bg-white {
  background-color: #fff;
}

.bg-gray-100 {
  background-color: $color_gray_100;
}

.bg-gray-200 {
  background-color: $color_gray_200;
}

.bg-gray-300 {
  background-color: #E7E5E2;
}

.bg-gray-400 {
  background-color: #EDECE9;
}

.bg-gray-500 {
  background-color: #575654;
}

.bg-gray-600 {
  background-color: $color_gray_600;
}

.bg-gray-700 {
  background-color: #424140;
}

.bg-gray-800 {
  background-color: #373635;
}

.bg-gray-900 {
  background-color: #2D2C2C;
}

.bg-red-500 {
  background-color: #EA392A;
}

.bg-orange-500 {
  background-color: #FF6F0F;
}

.bg-green-500 {
  background-color: #00AB48;
}

.bg-primary {
  background-color: rgba(25, 28, 32, 1);
}

.bg-secondary {
  background-color: $color_secondary;
}

.bg-tertiary {
  background-color: $color_tertiary;
}

.hover\:bg-inherit:hover {
  background-color: inherit;
}

.hover\:bg-transparent:hover {
  background-color: transparent;
}

.hover\:bg-translucent:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.hover\:bg-black:hover {
  background-color: #000;
}

.hover\:bg-white:hover {
  background-color: #fff;
}

.hover\:bg-gray-100:hover {
  background-color: $color_gray_100;
}

.hover\:bg-gray-200:hover {
  background-color: $color_gray_200;
}

.hover\:bg-gray-300:hover {
  background-color: #E7E5E2;
}

.hover\:bg-gray-400:hover {
  background-color: #EDECE9;
}

.hover\:bg-gray-500:hover {
  background-color: #575654;
}

.hover\:bg-gray-600:hover {
  background-color: $color_gray_600;
}

.hover\:bg-gray-700:hover {
  background-color: #424140;
}

.hover\:bg-gray-800:hover {
  background-color: #373635;
}

.hover\:bg-gray-900:hover {
  background-color: #2D2C2C;
}

.hover\:bg-red-500:hover {
  background-color: #EA392A;
}

.hover\:bg-orange-500:hover {
  background-color: #FF6F0F;
}

.hover\:bg-green-500:hover {
  background-color: #00AB48;
}

.hover\:bg-primary:hover {
  background-color: rgba(25, 28, 32, 1);
}

.hover\:bg-secondary:hover {
  background-color: $color_secondary;
}

.hover\:bg-tertiary:hover {
  background-color: $color_tertiary;
}

@media (min-width: 576px) {
  .sm\:bg-inherit {
    background-color: inherit;
  }
  .sm\:bg-transparent {
    background-color: transparent;
  }
  .sm\:bg-translucent {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .sm\:bg-black {
    background-color: #000;
  }
  .sm\:bg-white {
    background-color: #fff;
  }
  .sm\:bg-gray-100 {
    background-color: $color_gray_100;
  }
  .sm\:bg-gray-200 {
    background-color: $color_gray_200;
  }
  .sm\:bg-gray-300 {
    background-color: #E7E5E2;
  }
  .sm\:bg-gray-400 {
    background-color: #EDECE9;
  }
  .sm\:bg-gray-500 {
    background-color: #575654;
  }
  .sm\:bg-gray-600 {
    background-color: $color_gray_600;
  }
  .sm\:bg-gray-700 {
    background-color: #424140;
  }
  .sm\:bg-gray-800 {
    background-color: #373635;
  }
  .sm\:bg-gray-900 {
    background-color: #2D2C2C;
  }
  .sm\:bg-red-500 {
    background-color: #EA392A;
  }
  .sm\:bg-orange-500 {
    background-color: #FF6F0F;
  }
  .sm\:bg-green-500 {
    background-color: #00AB48;
  }
  .sm\:bg-primary {
    background-color: rgba(25, 28, 32, 1);
  }
  .sm\:bg-secondary {
    background-color: $color_secondary;
  }
  .sm\:bg-tertiary {
    background-color: $color_tertiary;
  }
}

@media (min-width: 768px) {
  .md\:bg-inherit {
    background-color: inherit;
  }
  .md\:bg-transparent {
    background-color: transparent;
  }
  .md\:bg-translucent {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .md\:bg-black {
    background-color: #000;
  }
  .md\:bg-white {
    background-color: #fff;
  }
  .md\:bg-gray-100 {
    background-color: $color_gray_100;
  }
  .md\:bg-gray-200 {
    background-color: $color_gray_200;
  }
  .md\:bg-gray-300 {
    background-color: #E7E5E2;
  }
  .md\:bg-gray-400 {
    background-color: #EDECE9;
  }
  .md\:bg-gray-500 {
    background-color: #575654;
  }
  .md\:bg-gray-600 {
    background-color: $color_gray_600;
  }
  .md\:bg-gray-700 {
    background-color: #424140;
  }
  .md\:bg-gray-800 {
    background-color: #373635;
  }
  .md\:bg-gray-900 {
    background-color: #2D2C2C;
  }
  .md\:bg-red-500 {
    background-color: #EA392A;
  }
  .md\:bg-orange-500 {
    background-color: #FF6F0F;
  }
  .md\:bg-green-500 {
    background-color: #00AB48;
  }
  .md\:bg-primary {
    background-color: rgba(25, 28, 32, 1);
  }
  .md\:bg-secondary {
    background-color: $color_secondary;
  }
  .md\:bg-tertiary {
    background-color: $color_tertiary;
  }
}

@media (min-width: 992px) {
  .lg\:bg-inherit {
    background-color: inherit;
  }
  .lg\:bg-transparent {
    background-color: transparent;
  }
  .lg\:bg-translucent {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .lg\:bg-black {
    background-color: #000;
  }
  .lg\:bg-white {
    background-color: #fff;
  }
  .lg\:bg-gray-100 {
    background-color: $color_gray_100;
  }
  .lg\:bg-gray-200 {
    background-color: $color_gray_200;
  }
  .lg\:bg-gray-300 {
    background-color: #E7E5E2;
  }
  .lg\:bg-gray-400 {
    background-color: #EDECE9;
  }
  .lg\:bg-gray-500 {
    background-color: #575654;
  }
  .lg\:bg-gray-600 {
    background-color: $color_gray_600;
  }
  .lg\:bg-gray-700 {
    background-color: #424140;
  }
  .lg\:bg-gray-800 {
    background-color: #373635;
  }
  .lg\:bg-gray-900 {
    background-color: #2D2C2C;
  }
  .lg\:bg-red-500 {
    background-color: #EA392A;
  }
  .lg\:bg-orange-500 {
    background-color: #FF6F0F;
  }
  .lg\:bg-green-500 {
    background-color: #00AB48;
  }
  .lg\:bg-primary {
    background-color: rgba(25, 28, 32, 1);
  }
  .lg\:bg-secondary {
    background-color: $color_secondary;
  }
  .lg\:bg-tertiary {
    background-color: $color_tertiary;
  }
}

@media (min-width: 1200px) {
  .xl\:bg-inherit {
    background-color: inherit;
  }
  .xl\:bg-transparent {
    background-color: transparent;
  }
  .xl\:bg-translucent {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .xl\:bg-black {
    background-color: #000;
  }
  .xl\:bg-white {
    background-color: #fff;
  }
  .xl\:bg-gray-100 {
    background-color: $color_gray_100;
  }
  .xl\:bg-gray-200 {
    background-color: $color_gray_200;
  }
  .xl\:bg-gray-300 {
    background-color: #E7E5E2;
  }
  .xl\:bg-gray-400 {
    background-color: #EDECE9;
  }
  .xl\:bg-gray-500 {
    background-color: #575654;
  }
  .xl\:bg-gray-600 {
    background-color: $color_gray_600;
  }
  .xl\:bg-gray-700 {
    background-color: #424140;
  }
  .xl\:bg-gray-800 {
    background-color: #373635;
  }
  .xl\:bg-gray-900 {
    background-color: #2D2C2C;
  }
  .xl\:bg-red-500 {
    background-color: #EA392A;
  }
  .xl\:bg-orange-500 {
    background-color: #FF6F0F;
  }
  .xl\:bg-green-500 {
    background-color: #00AB48;
  }
  .xl\:bg-primary {
    background-color: rgba(25, 28, 32, 1);
  }
  .xl\:bg-secondary {
    background-color: $color_secondary;
  }
  .xl\:bg-tertiary {
    background-color: $color_tertiary;
  }
}

.bg-bottom {
  background-position: bottom;
}

.bg-center {
  background-position: center;
}

.bg-left {
  background-position: left;
}

.bg-right {
  background-position: right;
}

.bg-top {
  background-position: top;
}

.bg-left-bottom {
  background-position: left bottom;
}

.bg-left-top {
  background-position: left top;
}

.bg-right-bottom {
  background-position: right bottom;
}

.bg-right-top {
  background-position: right top;
}

@media (min-width: 576px) {
  .sm\:bg-bottom {
    background-position: bottom;
  }
  .sm\:bg-center {
    background-position: center;
  }
  .sm\:bg-left {
    background-position: left;
  }
  .sm\:bg-right {
    background-position: right;
  }
  .sm\:bg-top {
    background-position: top;
  }
  .sm\:bg-left-bottom {
    background-position: left bottom;
  }
  .sm\:bg-left-top {
    background-position: left top;
  }
  .sm\:bg-right-bottom {
    background-position: right bottom;
  }
  .sm\:bg-right-top {
    background-position: right top;
  }
}

@media (min-width: 768px) {
  .md\:bg-bottom {
    background-position: bottom;
  }
  .md\:bg-center {
    background-position: center;
  }
  .md\:bg-left {
    background-position: left;
  }
  .md\:bg-right {
    background-position: right;
  }
  .md\:bg-top {
    background-position: top;
  }
  .md\:bg-left-bottom {
    background-position: left bottom;
  }
  .md\:bg-left-top {
    background-position: left top;
  }
  .md\:bg-right-bottom {
    background-position: right bottom;
  }
  .md\:bg-right-top {
    background-position: right top;
  }
}

@media (min-width: 992px) {
  .lg\:bg-bottom {
    background-position: bottom;
  }
  .lg\:bg-center {
    background-position: center;
  }
  .lg\:bg-left {
    background-position: left;
  }
  .lg\:bg-right {
    background-position: right;
  }
  .lg\:bg-top {
    background-position: top;
  }
  .lg\:bg-left-bottom {
    background-position: left bottom;
  }
  .lg\:bg-left-top {
    background-position: left top;
  }
  .lg\:bg-right-bottom {
    background-position: right bottom;
  }
  .lg\:bg-right-top {
    background-position: right top;
  }
}

@media (min-width: 1200px) {
  .xl\:bg-bottom {
    background-position: bottom;
  }
  .xl\:bg-center {
    background-position: center;
  }
  .xl\:bg-left {
    background-position: left;
  }
  .xl\:bg-right {
    background-position: right;
  }
  .xl\:bg-top {
    background-position: top;
  }
  .xl\:bg-left-bottom {
    background-position: left bottom;
  }
  .xl\:bg-left-top {
    background-position: left top;
  }
  .xl\:bg-right-bottom {
    background-position: right bottom;
  }
  .xl\:bg-right-top {
    background-position: right top;
  }
}

.bg-repeat {
  background-repeat: repeat;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.bg-repeat-x {
  background-repeat: repeat-x;
}

.bg-repeat-y {
  background-repeat: repeat-y;
}

@media (min-width: 576px) {
  .sm\:bg-repeat {
    background-repeat: repeat;
  }
  .sm\:bg-no-repeat {
    background-repeat: no-repeat;
  }
  .sm\:bg-repeat-x {
    background-repeat: repeat-x;
  }
  .sm\:bg-repeat-y {
    background-repeat: repeat-y;
  }
}

@media (min-width: 768px) {
  .md\:bg-repeat {
    background-repeat: repeat;
  }
  .md\:bg-no-repeat {
    background-repeat: no-repeat;
  }
  .md\:bg-repeat-x {
    background-repeat: repeat-x;
  }
  .md\:bg-repeat-y {
    background-repeat: repeat-y;
  }
}

@media (min-width: 992px) {
  .lg\:bg-repeat {
    background-repeat: repeat;
  }
  .lg\:bg-no-repeat {
    background-repeat: no-repeat;
  }
  .lg\:bg-repeat-x {
    background-repeat: repeat-x;
  }
  .lg\:bg-repeat-y {
    background-repeat: repeat-y;
  }
}

@media (min-width: 1200px) {
  .xl\:bg-repeat {
    background-repeat: repeat;
  }
  .xl\:bg-no-repeat {
    background-repeat: no-repeat;
  }
  .xl\:bg-repeat-x {
    background-repeat: repeat-x;
  }
  .xl\:bg-repeat-y {
    background-repeat: repeat-y;
  }
}

.bg-auto {
  background-size: auto;
}

.bg-cover {
  background-size: cover;
}

.bg-contain {
  background-size: contain;
}

@media (min-width: 576px) {
  .sm\:bg-auto {
    background-size: auto;
  }
  .sm\:bg-cover {
    background-size: cover;
  }
  .sm\:bg-contain {
    background-size: contain;
  }
}

@media (min-width: 768px) {
  .md\:bg-auto {
    background-size: auto;
  }
  .md\:bg-cover {
    background-size: cover;
  }
  .md\:bg-contain {
    background-size: contain;
  }
}

@media (min-width: 992px) {
  .lg\:bg-auto {
    background-size: auto;
  }
  .lg\:bg-cover {
    background-size: cover;
  }
  .lg\:bg-contain {
    background-size: contain;
  }
}

@media (min-width: 1200px) {
  .xl\:bg-auto {
    background-size: auto;
  }
  .xl\:bg-cover {
    background-size: cover;
  }
  .xl\:bg-contain {
    background-size: contain;
  }
}

.border {
  border: 1px solid $color_border;
}

.border-top {
  border-top: 1px solid $color_border;
}

.border-right {
  border-right: 1px solid $color_border;
}

.border-bottom {
  border-bottom: 1px solid $color_border;
}

.border-left {
  border-left: 1px solid $color_border;
}

@media (min-width: 576px) {
  .sm\:border {
    border: 1px solid $color_border;
  }
  .sm\:border-top {
    border-top: 1px solid $color_border;
  }
  .sm\:border-right {
    border-right: 1px solid $color_border;
  }
  .sm\:border-bottom {
    border-bottom: 1px solid $color_border;
  }
  .sm\:border-left {
    border-left: 1px solid $color_border;
  }
}

@media (min-width: 768px) {
  .md\:border {
    border: 1px solid $color_border;
  }
  .md\:border-top {
    border-top: 1px solid $color_border;
  }
  .md\:border-right {
    border-right: 1px solid $color_border;
  }
  .md\:border-bottom {
    border-bottom: 1px solid $color_border;
  }
  .md\:border-left {
    border-left: 1px solid $color_border;
  }
}

@media (min-width: 992px) {
  .lg\:border {
    border: 1px solid $color_border;
  }
  .lg\:border-top {
    border-top: 1px solid $color_border;
  }
  .lg\:border-right {
    border-right: 1px solid $color_border;
  }
  .lg\:border-bottom {
    border-bottom: 1px solid $color_border;
  }
  .lg\:border-left {
    border-left: 1px solid $color_border;
  }
}

@media (min-width: 1200px) {
  .xl\:border {
    border: 1px solid $color_border;
  }
  .xl\:border-top {
    border-top: 1px solid $color_border;
  }
  .xl\:border-right {
    border-right: 1px solid $color_border;
  }
  .xl\:border-bottom {
    border-bottom: 1px solid $color_border;
  }
  .xl\:border-left {
    border-left: 1px solid $color_border;
  }
}

.border-transparent {
  border-color: transparent;
}

.border-translucent {
  border-color: rgba(255, 255, 255, 0.1);
}

.border-current {
  border-color: currentColor;
}

.border-note {
  border-color: rgba(80, 109, 255, 1);
}

.border-warning {
  border-color: #ef526e;
}

.border-black {
  border-color: #000;
}

.border-top-black {
  border-top-color: #000;
}

.border-right-black {
  border-right-color: #000;
}

.border-bottom-black {
  border-bottom-color: #000;
}

.border-left-black {
  border-left-color: #000;
}

.border-white {
  border-color: #fff;
}

.border-top-white {
  border-top-color: #fff;
}

.border-right-white {
  border-right-color: #fff;
}

.border-bottom-white {
  border-bottom-color: #fff;
}

.border-left-white {
  border-left-color: #fff;
}

.border-gray-100 {
  border-color: $color_gray_100;
}

.border-top-gray-100 {
  border-top-color: $color_gray_100;
}

.border-right-gray-100 {
  border-right-color: $color_gray_100;
}

.border-bottom-gray-100 {
  border-bottom-color: $color_gray_100;
}

.border-left-gray-100 {
  border-left-color: $color_gray_100;
}

.border-gray-200 {
  border-color: $color_gray_200;
}

.border-top-gray-200 {
  border-top-color: $color_gray_200;
}

.border-right-gray-200 {
  border-right-color: $color_gray_200;
}

.border-bottom-gray-200 {
  border-bottom-color: $color_gray_200;
}

.border-left-gray-200 {
  border-left-color: $color_gray_200;
}

.border-gray-300 {
  border-color: #E7E5E2;
}

.border-top-gray-300 {
  border-top-color: #E7E5E2;
}

.border-right-gray-300 {
  border-right-color: #E7E5E2;
}

.border-bottom-gray-300 {
  border-bottom-color: #E7E5E2;
}

.border-left-gray-300 {
  border-left-color: #E7E5E2;
}

.border-gray-400 {
  border-color: #EDECE9;
}

.border-top-gray-400 {
  border-top-color: #EDECE9;
}

.border-right-gray-400 {
  border-right-color: #EDECE9;
}

.border-bottom-gray-400 {
  border-bottom-color: #EDECE9;
}

.border-left-gray-400 {
  border-left-color: #EDECE9;
}

.border-gray-500 {
  border-color: #575654;
}

.border-top-gray-500 {
  border-top-color: #575654;
}

.border-right-gray-500 {
  border-right-color: #575654;
}

.border-bottom-gray-500 {
  border-bottom-color: #575654;
}

.border-left-gray-500 {
  border-left-color: #575654;
}

.border-gray-600 {
  border-color: $color_gray_600;
}

.border-top-gray-600 {
  border-top-color: $color_gray_600;
}

.border-right-gray-600 {
  border-right-color: $color_gray_600;
}

.border-bottom-gray-600 {
  border-bottom-color: $color_gray_600;
}

.border-left-gray-600 {
  border-left-color: $color_gray_600;
}

.border-gray-700 {
  border-color: #424140;
}

.border-top-gray-700 {
  border-top-color: #424140;
}

.border-right-gray-700 {
  border-right-color: #424140;
}

.border-bottom-gray-700 {
  border-bottom-color: #424140;
}

.border-left-gray-700 {
  border-left-color: #424140;
}

.border-gray-800 {
  border-color: #373635;
}

.border-top-gray-800 {
  border-top-color: #373635;
}

.border-right-gray-800 {
  border-right-color: #373635;
}

.border-bottom-gray-800 {
  border-bottom-color: #373635;
}

.border-left-gray-800 {
  border-left-color: #373635;
}

.border-gray-900 {
  border-color: #2D2C2C;
}

.border-top-gray-900 {
  border-top-color: #2D2C2C;
}

.border-right-gray-900 {
  border-right-color: #2D2C2C;
}

.border-bottom-gray-900 {
  border-bottom-color: #2D2C2C;
}

.border-left-gray-900 {
  border-left-color: #2D2C2C;
}

.border-red-500 {
  border-color: #EA392A;
}

.border-top-red-500 {
  border-top-color: #EA392A;
}

.border-right-red-500 {
  border-right-color: #EA392A;
}

.border-bottom-red-500 {
  border-bottom-color: #EA392A;
}

.border-left-red-500 {
  border-left-color: #EA392A;
}

.border-orange-500 {
  border-color: #FF6F0F;
}

.border-top-orange-500 {
  border-top-color: #FF6F0F;
}

.border-right-orange-500 {
  border-right-color: #FF6F0F;
}

.border-bottom-orange-500 {
  border-bottom-color: #FF6F0F;
}

.border-left-orange-500 {
  border-left-color: #FF6F0F;
}

.border-green-500 {
  border-color: #00AB48;
}

.border-top-green-500 {
  border-top-color: #00AB48;
}

.border-right-green-500 {
  border-right-color: #00AB48;
}

.border-bottom-green-500 {
  border-bottom-color: #00AB48;
}

.border-left-green-500 {
  border-left-color: #00AB48;
}

.border-primary {
  border-color: rgba(25, 28, 32, 1);
}

.border-top-primary {
  border-top-color: rgba(25, 28, 32, 1);
}

.border-right-primary {
  border-right-color: rgba(25, 28, 32, 1);
}

.border-bottom-primary {
  border-bottom-color: rgba(25, 28, 32, 1);
}

.border-left-primary {
  border-left-color: rgba(25, 28, 32, 1);
}

.border-secondary {
  border-color: $color_secondary;
}

.border-top-secondary {
  border-top-color: $color_secondary;
}

.border-right-secondary {
  border-right-color: $color_secondary;
}

.border-bottom-secondary {
  border-bottom-color: $color_secondary;
}

.border-left-secondary {
  border-left-color: $color_secondary;
}

.border-tertiary {
  border-color: $color_tertiary;
}

.border-top-tertiary {
  border-top-color: $color_tertiary;
}

.border-right-tertiary {
  border-right-color: $color_tertiary;
}

.border-bottom-tertiary {
  border-bottom-color: $color_tertiary;
}

.border-left-tertiary {
  border-left-color: $color_tertiary;
}

.hover\:border-transparent:hover {
  border-color: transparent;
}

.hover\:border-translucent:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.hover\:border-current:hover {
  border-color: currentColor;
}

.hover\:border-black:hover {
  border-color: #000;
}

.hover\:border-top-black:hover {
  border-top-color: #000;
}

.hover\:border-right-black:hover {
  border-right-color: #000;
}

.hover\:border-bottom-black:hover {
  border-bottom-color: #000;
}

.hover\:border-left-black:hover {
  border-left-color: #000;
}

.hover\:border-white:hover {
  border-color: #fff;
}

.hover\:border-top-white:hover {
  border-top-color: #fff;
}

.hover\:border-right-white:hover {
  border-right-color: #fff;
}

.hover\:border-bottom-white:hover {
  border-bottom-color: #fff;
}

.hover\:border-left-white:hover {
  border-left-color: #fff;
}

.hover\:border-gray-100:hover {
  border-color: $color_gray_100;
}

.hover\:border-top-gray-100:hover {
  border-top-color: $color_gray_100;
}

.hover\:border-right-gray-100:hover {
  border-right-color: $color_gray_100;
}

.hover\:border-bottom-gray-100:hover {
  border-bottom-color: $color_gray_100;
}

.hover\:border-left-gray-100:hover {
  border-left-color: $color_gray_100;
}

.hover\:border-gray-200:hover {
  border-color: $color_gray_200;
}

.hover\:border-top-gray-200:hover {
  border-top-color: $color_gray_200;
}

.hover\:border-right-gray-200:hover {
  border-right-color: $color_gray_200;
}

.hover\:border-bottom-gray-200:hover {
  border-bottom-color: $color_gray_200;
}

.hover\:border-left-gray-200:hover {
  border-left-color: $color_gray_200;
}

.hover\:border-gray-300:hover {
  border-color: #E7E5E2;
}

.hover\:border-top-gray-300:hover {
  border-top-color: #E7E5E2;
}

.hover\:border-right-gray-300:hover {
  border-right-color: #E7E5E2;
}

.hover\:border-bottom-gray-300:hover {
  border-bottom-color: #E7E5E2;
}

.hover\:border-left-gray-300:hover {
  border-left-color: #E7E5E2;
}

.hover\:border-gray-400:hover {
  border-color: #EDECE9;
}

.hover\:border-top-gray-400:hover {
  border-top-color: #EDECE9;
}

.hover\:border-right-gray-400:hover {
  border-right-color: #EDECE9;
}

.hover\:border-bottom-gray-400:hover {
  border-bottom-color: #EDECE9;
}

.hover\:border-left-gray-400:hover {
  border-left-color: #EDECE9;
}

.hover\:border-gray-500:hover {
  border-color: #575654;
}

.hover\:border-top-gray-500:hover {
  border-top-color: #575654;
}

.hover\:border-right-gray-500:hover {
  border-right-color: #575654;
}

.hover\:border-bottom-gray-500:hover {
  border-bottom-color: #575654;
}

.hover\:border-left-gray-500:hover {
  border-left-color: #575654;
}

.hover\:border-gray-600:hover {
  border-color: $color_gray_600;
}

.hover\:border-top-gray-600:hover {
  border-top-color: $color_gray_600;
}

.hover\:border-right-gray-600:hover {
  border-right-color: $color_gray_600;
}

.hover\:border-bottom-gray-600:hover {
  border-bottom-color: $color_gray_600;
}

.hover\:border-left-gray-600:hover {
  border-left-color: $color_gray_600;
}

.hover\:border-gray-700:hover {
  border-color: #424140;
}

.hover\:border-top-gray-700:hover {
  border-top-color: #424140;
}

.hover\:border-right-gray-700:hover {
  border-right-color: #424140;
}

.hover\:border-bottom-gray-700:hover {
  border-bottom-color: #424140;
}

.hover\:border-left-gray-700:hover {
  border-left-color: #424140;
}

.hover\:border-gray-800:hover {
  border-color: #373635;
}

.hover\:border-top-gray-800:hover {
  border-top-color: #373635;
}

.hover\:border-right-gray-800:hover {
  border-right-color: #373635;
}

.hover\:border-bottom-gray-800:hover {
  border-bottom-color: #373635;
}

.hover\:border-left-gray-800:hover {
  border-left-color: #373635;
}

.hover\:border-gray-900:hover {
  border-color: #2D2C2C;
}

.hover\:border-top-gray-900:hover {
  border-top-color: #2D2C2C;
}

.hover\:border-right-gray-900:hover {
  border-right-color: #2D2C2C;
}

.hover\:border-bottom-gray-900:hover {
  border-bottom-color: #2D2C2C;
}

.hover\:border-left-gray-900:hover {
  border-left-color: #2D2C2C;
}

.hover\:border-red-500:hover {
  border-color: #EA392A;
}

.hover\:border-top-red-500:hover {
  border-top-color: #EA392A;
}

.hover\:border-right-red-500:hover {
  border-right-color: #EA392A;
}

.hover\:border-bottom-red-500:hover {
  border-bottom-color: #EA392A;
}

.hover\:border-left-red-500:hover {
  border-left-color: #EA392A;
}

.hover\:border-orange-500:hover {
  border-color: #FF6F0F;
}

.hover\:border-top-orange-500:hover {
  border-top-color: #FF6F0F;
}

.hover\:border-right-orange-500:hover {
  border-right-color: #FF6F0F;
}

.hover\:border-bottom-orange-500:hover {
  border-bottom-color: #FF6F0F;
}

.hover\:border-left-orange-500:hover {
  border-left-color: #FF6F0F;
}

.hover\:border-green-500:hover {
  border-color: #00AB48;
}

.hover\:border-top-green-500:hover {
  border-top-color: #00AB48;
}

.hover\:border-right-green-500:hover {
  border-right-color: #00AB48;
}

.hover\:border-bottom-green-500:hover {
  border-bottom-color: #00AB48;
}

.hover\:border-left-green-500:hover {
  border-left-color: #00AB48;
}

.hover\:border-primary:hover {
  border-color: rgba(25, 28, 32, 1);
}

.hover\:border-top-primary:hover {
  border-top-color: rgba(25, 28, 32, 1);
}

.hover\:border-right-primary:hover {
  border-right-color: rgba(25, 28, 32, 1);
}

.hover\:border-bottom-primary:hover {
  border-bottom-color: rgba(25, 28, 32, 1);
}

.hover\:border-left-primary:hover {
  border-left-color: rgba(25, 28, 32, 1);
}

.hover\:border-secondary:hover {
  border-color: $color_secondary;
}

.hover\:border-top-secondary:hover {
  border-top-color: $color_secondary;
}

.hover\:border-right-secondary:hover {
  border-right-color: $color_secondary;
}

.hover\:border-bottom-secondary:hover {
  border-bottom-color: $color_secondary;
}

.hover\:border-left-secondary:hover {
  border-left-color: $color_secondary;
}

.hover\:border-tertiary:hover {
  border-color: $color_tertiary;
}

.hover\:border-top-tertiary:hover {
  border-top-color: $color_tertiary;
}

.hover\:border-right-tertiary:hover {
  border-right-color: $color_tertiary;
}

.hover\:border-bottom-tertiary:hover {
  border-bottom-color: $color_tertiary;
}

.hover\:border-left-tertiary:hover {
  border-left-color: $color_tertiary;
}

@media (min-width: 576px) {
  .sm\:border-transparent {
    border-color: transparent;
  }
  .sm\:border-translucent {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .sm\:border-current {
    border-color: currentColor;
  }
  .sm\:border-black {
    border-color: #000;
  }
  .sm\:border-top-black {
    border-top-color: #000;
  }
  .sm\:border-right-black {
    border-right-color: #000;
  }
  .sm\:border-bottom-black {
    border-bottom-color: #000;
  }
  .sm\:border-left-black {
    border-left-color: #000;
  }
  .sm\:border-white {
    border-color: #fff;
  }
  .sm\:border-top-white {
    border-top-color: #fff;
  }
  .sm\:border-right-white {
    border-right-color: #fff;
  }
  .sm\:border-bottom-white {
    border-bottom-color: #fff;
  }
  .sm\:border-left-white {
    border-left-color: #fff;
  }
  .sm\:border-gray-100 {
    border-color: $color_gray_100;
  }
  .sm\:border-top-gray-100 {
    border-top-color: $color_gray_100;
  }
  .sm\:border-right-gray-100 {
    border-right-color: $color_gray_100;
  }
  .sm\:border-bottom-gray-100 {
    border-bottom-color: $color_gray_100;
  }
  .sm\:border-left-gray-100 {
    border-left-color: $color_gray_100;
  }
  .sm\:border-gray-200 {
    border-color: $color_gray_200;
  }
  .sm\:border-top-gray-200 {
    border-top-color: $color_gray_200;
  }
  .sm\:border-right-gray-200 {
    border-right-color: $color_gray_200;
  }
  .sm\:border-bottom-gray-200 {
    border-bottom-color: $color_gray_200;
  }
  .sm\:border-left-gray-200 {
    border-left-color: $color_gray_200;
  }
  .sm\:border-gray-300 {
    border-color: #E7E5E2;
  }
  .sm\:border-top-gray-300 {
    border-top-color: #E7E5E2;
  }
  .sm\:border-right-gray-300 {
    border-right-color: #E7E5E2;
  }
  .sm\:border-bottom-gray-300 {
    border-bottom-color: #E7E5E2;
  }
  .sm\:border-left-gray-300 {
    border-left-color: #E7E5E2;
  }
  .sm\:border-gray-400 {
    border-color: #EDECE9;
  }
  .sm\:border-top-gray-400 {
    border-top-color: #EDECE9;
  }
  .sm\:border-right-gray-400 {
    border-right-color: #EDECE9;
  }
  .sm\:border-bottom-gray-400 {
    border-bottom-color: #EDECE9;
  }
  .sm\:border-left-gray-400 {
    border-left-color: #EDECE9;
  }
  .sm\:border-gray-500 {
    border-color: #575654;
  }
  .sm\:border-top-gray-500 {
    border-top-color: #575654;
  }
  .sm\:border-right-gray-500 {
    border-right-color: #575654;
  }
  .sm\:border-bottom-gray-500 {
    border-bottom-color: #575654;
  }
  .sm\:border-left-gray-500 {
    border-left-color: #575654;
  }
  .sm\:border-gray-600 {
    border-color: $color_gray_600;
  }
  .sm\:border-top-gray-600 {
    border-top-color: $color_gray_600;
  }
  .sm\:border-right-gray-600 {
    border-right-color: $color_gray_600;
  }
  .sm\:border-bottom-gray-600 {
    border-bottom-color: $color_gray_600;
  }
  .sm\:border-left-gray-600 {
    border-left-color: $color_gray_600;
  }
  .sm\:border-gray-700 {
    border-color: #424140;
  }
  .sm\:border-top-gray-700 {
    border-top-color: #424140;
  }
  .sm\:border-right-gray-700 {
    border-right-color: #424140;
  }
  .sm\:border-bottom-gray-700 {
    border-bottom-color: #424140;
  }
  .sm\:border-left-gray-700 {
    border-left-color: #424140;
  }
  .sm\:border-gray-800 {
    border-color: #373635;
  }
  .sm\:border-top-gray-800 {
    border-top-color: #373635;
  }
  .sm\:border-right-gray-800 {
    border-right-color: #373635;
  }
  .sm\:border-bottom-gray-800 {
    border-bottom-color: #373635;
  }
  .sm\:border-left-gray-800 {
    border-left-color: #373635;
  }
  .sm\:border-gray-900 {
    border-color: #2D2C2C;
  }
  .sm\:border-top-gray-900 {
    border-top-color: #2D2C2C;
  }
  .sm\:border-right-gray-900 {
    border-right-color: #2D2C2C;
  }
  .sm\:border-bottom-gray-900 {
    border-bottom-color: #2D2C2C;
  }
  .sm\:border-left-gray-900 {
    border-left-color: #2D2C2C;
  }
  .sm\:border-red-500 {
    border-color: #EA392A;
  }
  .sm\:border-top-red-500 {
    border-top-color: #EA392A;
  }
  .sm\:border-right-red-500 {
    border-right-color: #EA392A;
  }
  .sm\:border-bottom-red-500 {
    border-bottom-color: #EA392A;
  }
  .sm\:border-left-red-500 {
    border-left-color: #EA392A;
  }
  .sm\:border-orange-500 {
    border-color: #FF6F0F;
  }
  .sm\:border-top-orange-500 {
    border-top-color: #FF6F0F;
  }
  .sm\:border-right-orange-500 {
    border-right-color: #FF6F0F;
  }
  .sm\:border-bottom-orange-500 {
    border-bottom-color: #FF6F0F;
  }
  .sm\:border-left-orange-500 {
    border-left-color: #FF6F0F;
  }
  .sm\:border-green-500 {
    border-color: #00AB48;
  }
  .sm\:border-top-green-500 {
    border-top-color: #00AB48;
  }
  .sm\:border-right-green-500 {
    border-right-color: #00AB48;
  }
  .sm\:border-bottom-green-500 {
    border-bottom-color: #00AB48;
  }
  .sm\:border-left-green-500 {
    border-left-color: #00AB48;
  }
  .sm\:border-primary {
    border-color: rgba(25, 28, 32, 1);
  }
  .sm\:border-top-primary {
    border-top-color: rgba(25, 28, 32, 1);
  }
  .sm\:border-right-primary {
    border-right-color: rgba(25, 28, 32, 1);
  }
  .sm\:border-bottom-primary {
    border-bottom-color: rgba(25, 28, 32, 1);
  }
  .sm\:border-left-primary {
    border-left-color: rgba(25, 28, 32, 1);
  }
  .sm\:border-secondary {
    border-color: $color_secondary;
  }
  .sm\:border-top-secondary {
    border-top-color: $color_secondary;
  }
  .sm\:border-right-secondary {
    border-right-color: $color_secondary;
  }
  .sm\:border-bottom-secondary {
    border-bottom-color: $color_secondary;
  }
  .sm\:border-left-secondary {
    border-left-color: $color_secondary;
  }
  .sm\:border-tertiary {
    border-color: $color_tertiary;
  }
  .sm\:border-top-tertiary {
    border-top-color: $color_tertiary;
  }
  .sm\:border-right-tertiary {
    border-right-color: $color_tertiary;
  }
  .sm\:border-bottom-tertiary {
    border-bottom-color: $color_tertiary;
  }
  .sm\:border-left-tertiary {
    border-left-color: $color_tertiary;
  }
}

@media (min-width: 768px) {
  .md\:border-transparent {
    border-color: transparent;
  }
  .md\:border-translucent {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .md\:border-current {
    border-color: currentColor;
  }
  .md\:border-black {
    border-color: #000;
  }
  .md\:border-top-black {
    border-top-color: #000;
  }
  .md\:border-right-black {
    border-right-color: #000;
  }
  .md\:border-bottom-black {
    border-bottom-color: #000;
  }
  .md\:border-left-black {
    border-left-color: #000;
  }
  .md\:border-white {
    border-color: #fff;
  }
  .md\:border-top-white {
    border-top-color: #fff;
  }
  .md\:border-right-white {
    border-right-color: #fff;
  }
  .md\:border-bottom-white {
    border-bottom-color: #fff;
  }
  .md\:border-left-white {
    border-left-color: #fff;
  }
  .md\:border-gray-100 {
    border-color: $color_gray_100;
  }
  .md\:border-top-gray-100 {
    border-top-color: $color_gray_100;
  }
  .md\:border-right-gray-100 {
    border-right-color: $color_gray_100;
  }
  .md\:border-bottom-gray-100 {
    border-bottom-color: $color_gray_100;
  }
  .md\:border-left-gray-100 {
    border-left-color: $color_gray_100;
  }
  .md\:border-gray-200 {
    border-color: $color_gray_200;
  }
  .md\:border-top-gray-200 {
    border-top-color: $color_gray_200;
  }
  .md\:border-right-gray-200 {
    border-right-color: $color_gray_200;
  }
  .md\:border-bottom-gray-200 {
    border-bottom-color: $color_gray_200;
  }
  .md\:border-left-gray-200 {
    border-left-color: $color_gray_200;
  }
  .md\:border-gray-300 {
    border-color: #E7E5E2;
  }
  .md\:border-top-gray-300 {
    border-top-color: #E7E5E2;
  }
  .md\:border-right-gray-300 {
    border-right-color: #E7E5E2;
  }
  .md\:border-bottom-gray-300 {
    border-bottom-color: #E7E5E2;
  }
  .md\:border-left-gray-300 {
    border-left-color: #E7E5E2;
  }
  .md\:border-gray-400 {
    border-color: #EDECE9;
  }
  .md\:border-top-gray-400 {
    border-top-color: #EDECE9;
  }
  .md\:border-right-gray-400 {
    border-right-color: #EDECE9;
  }
  .md\:border-bottom-gray-400 {
    border-bottom-color: #EDECE9;
  }
  .md\:border-left-gray-400 {
    border-left-color: #EDECE9;
  }
  .md\:border-gray-500 {
    border-color: #575654;
  }
  .md\:border-top-gray-500 {
    border-top-color: #575654;
  }
  .md\:border-right-gray-500 {
    border-right-color: #575654;
  }
  .md\:border-bottom-gray-500 {
    border-bottom-color: #575654;
  }
  .md\:border-left-gray-500 {
    border-left-color: #575654;
  }
  .md\:border-gray-600 {
    border-color: $color_gray_600;
  }
  .md\:border-top-gray-600 {
    border-top-color: $color_gray_600;
  }
  .md\:border-right-gray-600 {
    border-right-color: $color_gray_600;
  }
  .md\:border-bottom-gray-600 {
    border-bottom-color: $color_gray_600;
  }
  .md\:border-left-gray-600 {
    border-left-color: $color_gray_600;
  }
  .md\:border-gray-700 {
    border-color: #424140;
  }
  .md\:border-top-gray-700 {
    border-top-color: #424140;
  }
  .md\:border-right-gray-700 {
    border-right-color: #424140;
  }
  .md\:border-bottom-gray-700 {
    border-bottom-color: #424140;
  }
  .md\:border-left-gray-700 {
    border-left-color: #424140;
  }
  .md\:border-gray-800 {
    border-color: #373635;
  }
  .md\:border-top-gray-800 {
    border-top-color: #373635;
  }
  .md\:border-right-gray-800 {
    border-right-color: #373635;
  }
  .md\:border-bottom-gray-800 {
    border-bottom-color: #373635;
  }
  .md\:border-left-gray-800 {
    border-left-color: #373635;
  }
  .md\:border-gray-900 {
    border-color: #2D2C2C;
  }
  .md\:border-top-gray-900 {
    border-top-color: #2D2C2C;
  }
  .md\:border-right-gray-900 {
    border-right-color: #2D2C2C;
  }
  .md\:border-bottom-gray-900 {
    border-bottom-color: #2D2C2C;
  }
  .md\:border-left-gray-900 {
    border-left-color: #2D2C2C;
  }
  .md\:border-red-500 {
    border-color: #EA392A;
  }
  .md\:border-top-red-500 {
    border-top-color: #EA392A;
  }
  .md\:border-right-red-500 {
    border-right-color: #EA392A;
  }
  .md\:border-bottom-red-500 {
    border-bottom-color: #EA392A;
  }
  .md\:border-left-red-500 {
    border-left-color: #EA392A;
  }
  .md\:border-orange-500 {
    border-color: #FF6F0F;
  }
  .md\:border-top-orange-500 {
    border-top-color: #FF6F0F;
  }
  .md\:border-right-orange-500 {
    border-right-color: #FF6F0F;
  }
  .md\:border-bottom-orange-500 {
    border-bottom-color: #FF6F0F;
  }
  .md\:border-left-orange-500 {
    border-left-color: #FF6F0F;
  }
  .md\:border-green-500 {
    border-color: #00AB48;
  }
  .md\:border-top-green-500 {
    border-top-color: #00AB48;
  }
  .md\:border-right-green-500 {
    border-right-color: #00AB48;
  }
  .md\:border-bottom-green-500 {
    border-bottom-color: #00AB48;
  }
  .md\:border-left-green-500 {
    border-left-color: #00AB48;
  }
  .md\:border-primary {
    border-color: rgba(25, 28, 32, 1);
  }
  .md\:border-top-primary {
    border-top-color: rgba(25, 28, 32, 1);
  }
  .md\:border-right-primary {
    border-right-color: rgba(25, 28, 32, 1);
  }
  .md\:border-bottom-primary {
    border-bottom-color: rgba(25, 28, 32, 1);
  }
  .md\:border-left-primary {
    border-left-color: rgba(25, 28, 32, 1);
  }
  .md\:border-secondary {
    border-color: $color_secondary;
  }
  .md\:border-top-secondary {
    border-top-color: $color_secondary;
  }
  .md\:border-right-secondary {
    border-right-color: $color_secondary;
  }
  .md\:border-bottom-secondary {
    border-bottom-color: $color_secondary;
  }
  .md\:border-left-secondary {
    border-left-color: $color_secondary;
  }
  .md\:border-tertiary {
    border-color: $color_tertiary;
  }
  .md\:border-top-tertiary {
    border-top-color: $color_tertiary;
  }
  .md\:border-right-tertiary {
    border-right-color: $color_tertiary;
  }
  .md\:border-bottom-tertiary {
    border-bottom-color: $color_tertiary;
  }
  .md\:border-left-tertiary {
    border-left-color: $color_tertiary;
  }
}

@media (min-width: 992px) {
  .lg\:border-transparent {
    border-color: transparent;
  }
  .lg\:border-translucent {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .lg\:border-current {
    border-color: currentColor;
  }
  .lg\:border-black {
    border-color: #000;
  }
  .lg\:border-top-black {
    border-top-color: #000;
  }
  .lg\:border-right-black {
    border-right-color: #000;
  }
  .lg\:border-bottom-black {
    border-bottom-color: #000;
  }
  .lg\:border-left-black {
    border-left-color: #000;
  }
  .lg\:border-white {
    border-color: #fff;
  }
  .lg\:border-top-white {
    border-top-color: #fff;
  }
  .lg\:border-right-white {
    border-right-color: #fff;
  }
  .lg\:border-bottom-white {
    border-bottom-color: #fff;
  }
  .lg\:border-left-white {
    border-left-color: #fff;
  }
  .lg\:border-gray-100 {
    border-color: $color_gray_100;
  }
  .lg\:border-top-gray-100 {
    border-top-color: $color_gray_100;
  }
  .lg\:border-right-gray-100 {
    border-right-color: $color_gray_100;
  }
  .lg\:border-bottom-gray-100 {
    border-bottom-color: $color_gray_100;
  }
  .lg\:border-left-gray-100 {
    border-left-color: $color_gray_100;
  }
  .lg\:border-gray-200 {
    border-color: $color_gray_200;
  }
  .lg\:border-top-gray-200 {
    border-top-color: $color_gray_200;
  }
  .lg\:border-right-gray-200 {
    border-right-color: $color_gray_200;
  }
  .lg\:border-bottom-gray-200 {
    border-bottom-color: $color_gray_200;
  }
  .lg\:border-left-gray-200 {
    border-left-color: $color_gray_200;
  }
  .lg\:border-gray-300 {
    border-color: #E7E5E2;
  }
  .lg\:border-top-gray-300 {
    border-top-color: #E7E5E2;
  }
  .lg\:border-right-gray-300 {
    border-right-color: #E7E5E2;
  }
  .lg\:border-bottom-gray-300 {
    border-bottom-color: #E7E5E2;
  }
  .lg\:border-left-gray-300 {
    border-left-color: #E7E5E2;
  }
  .lg\:border-gray-400 {
    border-color: #EDECE9;
  }
  .lg\:border-top-gray-400 {
    border-top-color: #EDECE9;
  }
  .lg\:border-right-gray-400 {
    border-right-color: #EDECE9;
  }
  .lg\:border-bottom-gray-400 {
    border-bottom-color: #EDECE9;
  }
  .lg\:border-left-gray-400 {
    border-left-color: #EDECE9;
  }
  .lg\:border-gray-500 {
    border-color: #575654;
  }
  .lg\:border-top-gray-500 {
    border-top-color: #575654;
  }
  .lg\:border-right-gray-500 {
    border-right-color: #575654;
  }
  .lg\:border-bottom-gray-500 {
    border-bottom-color: #575654;
  }
  .lg\:border-left-gray-500 {
    border-left-color: #575654;
  }
  .lg\:border-gray-600 {
    border-color: $color_gray_600;
  }
  .lg\:border-top-gray-600 {
    border-top-color: $color_gray_600;
  }
  .lg\:border-right-gray-600 {
    border-right-color: $color_gray_600;
  }
  .lg\:border-bottom-gray-600 {
    border-bottom-color: $color_gray_600;
  }
  .lg\:border-left-gray-600 {
    border-left-color: $color_gray_600;
  }
  .lg\:border-gray-700 {
    border-color: #424140;
  }
  .lg\:border-top-gray-700 {
    border-top-color: #424140;
  }
  .lg\:border-right-gray-700 {
    border-right-color: #424140;
  }
  .lg\:border-bottom-gray-700 {
    border-bottom-color: #424140;
  }
  .lg\:border-left-gray-700 {
    border-left-color: #424140;
  }
  .lg\:border-gray-800 {
    border-color: #373635;
  }
  .lg\:border-top-gray-800 {
    border-top-color: #373635;
  }
  .lg\:border-right-gray-800 {
    border-right-color: #373635;
  }
  .lg\:border-bottom-gray-800 {
    border-bottom-color: #373635;
  }
  .lg\:border-left-gray-800 {
    border-left-color: #373635;
  }
  .lg\:border-gray-900 {
    border-color: #2D2C2C;
  }
  .lg\:border-top-gray-900 {
    border-top-color: #2D2C2C;
  }
  .lg\:border-right-gray-900 {
    border-right-color: #2D2C2C;
  }
  .lg\:border-bottom-gray-900 {
    border-bottom-color: #2D2C2C;
  }
  .lg\:border-left-gray-900 {
    border-left-color: #2D2C2C;
  }
  .lg\:border-red-500 {
    border-color: #EA392A;
  }
  .lg\:border-top-red-500 {
    border-top-color: #EA392A;
  }
  .lg\:border-right-red-500 {
    border-right-color: #EA392A;
  }
  .lg\:border-bottom-red-500 {
    border-bottom-color: #EA392A;
  }
  .lg\:border-left-red-500 {
    border-left-color: #EA392A;
  }
  .lg\:border-orange-500 {
    border-color: #FF6F0F;
  }
  .lg\:border-top-orange-500 {
    border-top-color: #FF6F0F;
  }
  .lg\:border-right-orange-500 {
    border-right-color: #FF6F0F;
  }
  .lg\:border-bottom-orange-500 {
    border-bottom-color: #FF6F0F;
  }
  .lg\:border-left-orange-500 {
    border-left-color: #FF6F0F;
  }
  .lg\:border-green-500 {
    border-color: #00AB48;
  }
  .lg\:border-top-green-500 {
    border-top-color: #00AB48;
  }
  .lg\:border-right-green-500 {
    border-right-color: #00AB48;
  }
  .lg\:border-bottom-green-500 {
    border-bottom-color: #00AB48;
  }
  .lg\:border-left-green-500 {
    border-left-color: #00AB48;
  }
  .lg\:border-primary {
    border-color: rgba(25, 28, 32, 1);
  }
  .lg\:border-top-primary {
    border-top-color: rgba(25, 28, 32, 1);
  }
  .lg\:border-right-primary {
    border-right-color: rgba(25, 28, 32, 1);
  }
  .lg\:border-bottom-primary {
    border-bottom-color: rgba(25, 28, 32, 1);
  }
  .lg\:border-left-primary {
    border-left-color: rgba(25, 28, 32, 1);
  }
  .lg\:border-secondary {
    border-color: $color_secondary;
  }
  .lg\:border-top-secondary {
    border-top-color: $color_secondary;
  }
  .lg\:border-right-secondary {
    border-right-color: $color_secondary;
  }
  .lg\:border-bottom-secondary {
    border-bottom-color: $color_secondary;
  }
  .lg\:border-left-secondary {
    border-left-color: $color_secondary;
  }
  .lg\:border-tertiary {
    border-color: $color_tertiary;
  }
  .lg\:border-top-tertiary {
    border-top-color: $color_tertiary;
  }
  .lg\:border-right-tertiary {
    border-right-color: $color_tertiary;
  }
  .lg\:border-bottom-tertiary {
    border-bottom-color: $color_tertiary;
  }
  .lg\:border-left-tertiary {
    border-left-color: $color_tertiary;
  }
}

@media (min-width: 1200px) {
  .xl\:border-transparent {
    border-color: transparent;
  }
  .xl\:border-translucent {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .xl\:border-current {
    border-color: currentColor;
  }
  .xl\:border-black {
    border-color: #000;
  }
  .xl\:border-top-black {
    border-top-color: #000;
  }
  .xl\:border-right-black {
    border-right-color: #000;
  }
  .xl\:border-bottom-black {
    border-bottom-color: #000;
  }
  .xl\:border-left-black {
    border-left-color: #000;
  }
  .xl\:border-white {
    border-color: #fff;
  }
  .xl\:border-top-white {
    border-top-color: #fff;
  }
  .xl\:border-right-white {
    border-right-color: #fff;
  }
  .xl\:border-bottom-white {
    border-bottom-color: #fff;
  }
  .xl\:border-left-white {
    border-left-color: #fff;
  }
  .xl\:border-gray-100 {
    border-color: $color_gray_100;
  }
  .xl\:border-top-gray-100 {
    border-top-color: $color_gray_100;
  }
  .xl\:border-right-gray-100 {
    border-right-color: $color_gray_100;
  }
  .xl\:border-bottom-gray-100 {
    border-bottom-color: $color_gray_100;
  }
  .xl\:border-left-gray-100 {
    border-left-color: $color_gray_100;
  }
  .xl\:border-gray-200 {
    border-color: $color_gray_200;
  }
  .xl\:border-top-gray-200 {
    border-top-color: $color_gray_200;
  }
  .xl\:border-right-gray-200 {
    border-right-color: $color_gray_200;
  }
  .xl\:border-bottom-gray-200 {
    border-bottom-color: $color_gray_200;
  }
  .xl\:border-left-gray-200 {
    border-left-color: $color_gray_200;
  }
  .xl\:border-gray-300 {
    border-color: #E7E5E2;
  }
  .xl\:border-top-gray-300 {
    border-top-color: #E7E5E2;
  }
  .xl\:border-right-gray-300 {
    border-right-color: #E7E5E2;
  }
  .xl\:border-bottom-gray-300 {
    border-bottom-color: #E7E5E2;
  }
  .xl\:border-left-gray-300 {
    border-left-color: #E7E5E2;
  }
  .xl\:border-gray-400 {
    border-color: #EDECE9;
  }
  .xl\:border-top-gray-400 {
    border-top-color: #EDECE9;
  }
  .xl\:border-right-gray-400 {
    border-right-color: #EDECE9;
  }
  .xl\:border-bottom-gray-400 {
    border-bottom-color: #EDECE9;
  }
  .xl\:border-left-gray-400 {
    border-left-color: #EDECE9;
  }
  .xl\:border-gray-500 {
    border-color: #575654;
  }
  .xl\:border-top-gray-500 {
    border-top-color: #575654;
  }
  .xl\:border-right-gray-500 {
    border-right-color: #575654;
  }
  .xl\:border-bottom-gray-500 {
    border-bottom-color: #575654;
  }
  .xl\:border-left-gray-500 {
    border-left-color: #575654;
  }
  .xl\:border-gray-600 {
    border-color: $color_gray_600;
  }
  .xl\:border-top-gray-600 {
    border-top-color: $color_gray_600;
  }
  .xl\:border-right-gray-600 {
    border-right-color: $color_gray_600;
  }
  .xl\:border-bottom-gray-600 {
    border-bottom-color: $color_gray_600;
  }
  .xl\:border-left-gray-600 {
    border-left-color: $color_gray_600;
  }
  .xl\:border-gray-700 {
    border-color: #424140;
  }
  .xl\:border-top-gray-700 {
    border-top-color: #424140;
  }
  .xl\:border-right-gray-700 {
    border-right-color: #424140;
  }
  .xl\:border-bottom-gray-700 {
    border-bottom-color: #424140;
  }
  .xl\:border-left-gray-700 {
    border-left-color: #424140;
  }
  .xl\:border-gray-800 {
    border-color: #373635;
  }
  .xl\:border-top-gray-800 {
    border-top-color: #373635;
  }
  .xl\:border-right-gray-800 {
    border-right-color: #373635;
  }
  .xl\:border-bottom-gray-800 {
    border-bottom-color: #373635;
  }
  .xl\:border-left-gray-800 {
    border-left-color: #373635;
  }
  .xl\:border-gray-900 {
    border-color: #2D2C2C;
  }
  .xl\:border-top-gray-900 {
    border-top-color: #2D2C2C;
  }
  .xl\:border-right-gray-900 {
    border-right-color: #2D2C2C;
  }
  .xl\:border-bottom-gray-900 {
    border-bottom-color: #2D2C2C;
  }
  .xl\:border-left-gray-900 {
    border-left-color: #2D2C2C;
  }
  .xl\:border-red-500 {
    border-color: #EA392A;
  }
  .xl\:border-top-red-500 {
    border-top-color: #EA392A;
  }
  .xl\:border-right-red-500 {
    border-right-color: #EA392A;
  }
  .xl\:border-bottom-red-500 {
    border-bottom-color: #EA392A;
  }
  .xl\:border-left-red-500 {
    border-left-color: #EA392A;
  }
  .xl\:border-orange-500 {
    border-color: #FF6F0F;
  }
  .xl\:border-top-orange-500 {
    border-top-color: #FF6F0F;
  }
  .xl\:border-right-orange-500 {
    border-right-color: #FF6F0F;
  }
  .xl\:border-bottom-orange-500 {
    border-bottom-color: #FF6F0F;
  }
  .xl\:border-left-orange-500 {
    border-left-color: #FF6F0F;
  }
  .xl\:border-green-500 {
    border-color: #00AB48;
  }
  .xl\:border-top-green-500 {
    border-top-color: #00AB48;
  }
  .xl\:border-right-green-500 {
    border-right-color: #00AB48;
  }
  .xl\:border-bottom-green-500 {
    border-bottom-color: #00AB48;
  }
  .xl\:border-left-green-500 {
    border-left-color: #00AB48;
  }
  .xl\:border-primary {
    border-color: rgba(25, 28, 32, 1);
  }
  .xl\:border-top-primary {
    border-top-color: rgba(25, 28, 32, 1);
  }
  .xl\:border-right-primary {
    border-right-color: rgba(25, 28, 32, 1);
  }
  .xl\:border-bottom-primary {
    border-bottom-color: rgba(25, 28, 32, 1);
  }
  .xl\:border-left-primary {
    border-left-color: rgba(25, 28, 32, 1);
  }
  .xl\:border-secondary {
    border-color: $color_secondary;
  }
  .xl\:border-top-secondary {
    border-top-color: $color_secondary;
  }
  .xl\:border-right-secondary {
    border-right-color: $color_secondary;
  }
  .xl\:border-bottom-secondary {
    border-bottom-color: $color_secondary;
  }
  .xl\:border-left-secondary {
    border-left-color: $color_secondary;
  }
  .xl\:border-tertiary {
    border-color: $color_tertiary;
  }
  .xl\:border-top-tertiary {
    border-top-color: $color_tertiary;
  }
  .xl\:border-right-tertiary {
    border-right-color: $color_tertiary;
  }
  .xl\:border-bottom-tertiary {
    border-bottom-color: $color_tertiary;
  }
  .xl\:border-left-tertiary {
    border-left-color: $color_tertiary;
  }
}

.border-radius {
  border-radius: 4px;
}

.border-radius-0 {
  border-radius: 0;
}

.border-radius-top {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.border-radius-right {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.border-radius-bottom {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.border-radius-left {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.rounded {
  border-radius: 2rem;
}

.circle {
  border-radius: 50%;
}

@media (min-width: 576px) {
  .sm\:border-radius {
    border-radius: 4px;
  }
  .sm\:border-radius-0 {
    border-radius: 0;
  }
  .sm\:border-radius-top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .sm\:border-radius-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .sm\:border-radius-bottom {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .sm\:border-radius-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .sm\:rounded {
    border-radius: 2rem;
  }
  .sm\:circle {
    border-radius: 50%;
  }
}

@media (min-width: 768px) {
  .md\:border-radius {
    border-radius: 4px;
  }
  .md\:border-radius-0 {
    border-radius: 0;
  }
  .md\:border-radius-top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .md\:border-radius-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .md\:border-radius-bottom {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .md\:border-radius-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .md\:rounded {
    border-radius: 2rem;
  }
  .md\:circle {
    border-radius: 50%;
  }
}

@media (min-width: 992px) {
  .lg\:border-radius {
    border-radius: 4px;
  }
  .lg\:border-radius-0 {
    border-radius: 0;
  }
  .lg\:border-radius-top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .lg\:border-radius-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .lg\:border-radius-bottom {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .lg\:border-radius-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .lg\:rounded {
    border-radius: 2rem;
  }
  .lg\:circle {
    border-radius: 50%;
  }
}

@media (min-width: 1200px) {
  .xl\:border-radius {
    border-radius: 4px;
  }
  .xl\:border-radius-0 {
    border-radius: 0;
  }
  .xl\:border-radius-top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .xl\:border-radius-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .xl\:border-radius-bottom {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .xl\:border-radius-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .xl\:rounded {
    border-radius: 2rem;
  }
  .xl\:circle {
    border-radius: 50%;
  }
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-dotted {
  border-style: dotted;
}

.border-none {
  border-style: none;
}

.border-1 {
  border-width: 1px;
}

.border-top-1 {
  border-top-width: 1px;
}

.border-right-1 {
  border-right-width: 1px;
}

.border-bottom-1 {
  border-bottom-width: 1px;
}

.border-left-1 {
  border-left-width: 1px;
}

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

.border-top-2 {
  border-top-width: 2px;
}

.border-right-2 {
  border-right-width: 2px;
}

.border-bottom-2 {
  border-bottom-width: 2px;
}

.border-left-2 {
  border-left-width: 2px;
}

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

.border-top-3 {
  border-top-width: 3px;
}

.border-right-3 {
  border-right-width: 3px;
}

.border-bottom-3 {
  border-bottom-width: 3px;
}

.border-left-3 {
  border-left-width: 3px;
}

.border-4 {
  border-width: 4px;
}

.border-top-4 {
  border-top-width: 4px;
}

.border-right-4 {
  border-right-width: 4px;
}

.border-bottom-4 {
  border-bottom-width: 4px;
}

.border-left-4 {
  border-left-width: 4px;
}

.border-0 {
  border-width: 0;
}

.border-top-0 {
  border-top-width: 0;
}

.border-right-0 {
  border-right-width: 0;
}

.border-bottom-0 {
  border-bottom-width: 0;
}

.border-left-0 {
  border-left-width: 0;
}

@media (min-width: 576px) {
  .sm\:border-1 {
    border-width: 1px;
  }
  .sm\:border-top-1 {
    border-top-width: 1px;
  }
  .sm\:border-right-1 {
    border-right-width: 1px;
  }
  .sm\:border-bottom-1 {
    border-bottom-width: 1px;
  }
  .sm\:border-left-1 {
    border-left-width: 1px;
  }
  .sm\:border-2 {
    border-width: 2px;
  }
  .sm\:border-top-2 {
    border-top-width: 2px;
  }
  .sm\:border-right-2 {
    border-right-width: 2px;
  }
  .sm\:border-bottom-2 {
    border-bottom-width: 2px;
  }
  .sm\:border-left-2 {
    border-left-width: 2px;
  }
  .sm\:border-3 {
    border-width: 3px;
  }
  .sm\:border-top-3 {
    border-top-width: 3px;
  }
  .sm\:border-right-3 {
    border-right-width: 3px;
  }
  .sm\:border-bottom-3 {
    border-bottom-width: 3px;
  }
  .sm\:border-left-3 {
    border-left-width: 3px;
  }
  .sm\:border-4 {
    border-width: 4px;
  }
  .sm\:border-top-4 {
    border-top-width: 4px;
  }
  .sm\:border-right-4 {
    border-right-width: 4px;
  }
  .sm\:border-bottom-4 {
    border-bottom-width: 4px;
  }
  .sm\:border-left-4 {
    border-left-width: 4px;
  }
  .sm\:border-0 {
    border-width: 0;
  }
  .sm\:border-top-0 {
    border-top-width: 0;
  }
  .sm\:border-right-0 {
    border-right-width: 0;
  }
  .sm\:border-bottom-0 {
    border-bottom-width: 0;
  }
  .sm\:border-left-0 {
    border-left-width: 0;
  }
}

@media (min-width: 768px) {
  .md\:border-1 {
    border-width: 1px;
  }
  .md\:border-top-1 {
    border-top-width: 1px;
  }
  .md\:border-right-1 {
    border-right-width: 1px;
  }
  .md\:border-bottom-1 {
    border-bottom-width: 1px;
  }
  .md\:border-left-1 {
    border-left-width: 1px;
  }
  .md\:border-2 {
    border-width: 2px;
  }
  .md\:border-top-2 {
    border-top-width: 2px;
  }
  .md\:border-right-2 {
    border-right-width: 2px;
  }
  .md\:border-bottom-2 {
    border-bottom-width: 2px;
  }
  .md\:border-left-2 {
    border-left-width: 2px;
  }
  .md\:border-3 {
    border-width: 3px;
  }
  .md\:border-top-3 {
    border-top-width: 3px;
  }
  .md\:border-right-3 {
    border-right-width: 3px;
  }
  .md\:border-bottom-3 {
    border-bottom-width: 3px;
  }
  .md\:border-left-3 {
    border-left-width: 3px;
  }
  .md\:border-4 {
    border-width: 4px;
  }
  .md\:border-top-4 {
    border-top-width: 4px;
  }
  .md\:border-right-4 {
    border-right-width: 4px;
  }
  .md\:border-bottom-4 {
    border-bottom-width: 4px;
  }
  .md\:border-left-4 {
    border-left-width: 4px;
  }
  .md\:border-0 {
    border-width: 0;
  }
  .md\:border-top-0 {
    border-top-width: 0;
  }
  .md\:border-right-0 {
    border-right-width: 0;
  }
  .md\:border-bottom-0 {
    border-bottom-width: 0;
  }
  .md\:border-left-0 {
    border-left-width: 0;
  }
}

@media (min-width: 992px) {
  .lg\:border-1 {
    border-width: 1px;
  }
  .lg\:border-top-1 {
    border-top-width: 1px;
  }
  .lg\:border-right-1 {
    border-right-width: 1px;
  }
  .lg\:border-bottom-1 {
    border-bottom-width: 1px;
  }
  .lg\:border-left-1 {
    border-left-width: 1px;
  }
  .lg\:border-2 {
    border-width: 2px;
  }
  .lg\:border-top-2 {
    border-top-width: 2px;
  }
  .lg\:border-right-2 {
    border-right-width: 2px;
  }
  .lg\:border-bottom-2 {
    border-bottom-width: 2px;
  }
  .lg\:border-left-2 {
    border-left-width: 2px;
  }
  .lg\:border-3 {
    border-width: 3px;
  }
  .lg\:border-top-3 {
    border-top-width: 3px;
  }
  .lg\:border-right-3 {
    border-right-width: 3px;
  }
  .lg\:border-bottom-3 {
    border-bottom-width: 3px;
  }
  .lg\:border-left-3 {
    border-left-width: 3px;
  }
  .lg\:border-4 {
    border-width: 4px;
  }
  .lg\:border-top-4 {
    border-top-width: 4px;
  }
  .lg\:border-right-4 {
    border-right-width: 4px;
  }
  .lg\:border-bottom-4 {
    border-bottom-width: 4px;
  }
  .lg\:border-left-4 {
    border-left-width: 4px;
  }
  .lg\:border-0 {
    border-width: 0;
  }
  .lg\:border-top-0 {
    border-top-width: 0;
  }
  .lg\:border-right-0 {
    border-right-width: 0;
  }
  .lg\:border-bottom-0 {
    border-bottom-width: 0;
  }
  .lg\:border-left-0 {
    border-left-width: 0;
  }
}

@media (min-width: 1200px) {
  .xl\:border-1 {
    border-width: 1px;
  }
  .xl\:border-top-1 {
    border-top-width: 1px;
  }
  .xl\:border-right-1 {
    border-right-width: 1px;
  }
  .xl\:border-bottom-1 {
    border-bottom-width: 1px;
  }
  .xl\:border-left-1 {
    border-left-width: 1px;
  }
  .xl\:border-2 {
    border-width: 2px;
  }
  .xl\:border-top-2 {
    border-top-width: 2px;
  }
  .xl\:border-right-2 {
    border-right-width: 2px;
  }
  .xl\:border-bottom-2 {
    border-bottom-width: 2px;
  }
  .xl\:border-left-2 {
    border-left-width: 2px;
  }
  .xl\:border-3 {
    border-width: 3px;
  }
  .xl\:border-top-3 {
    border-top-width: 3px;
  }
  .xl\:border-right-3 {
    border-right-width: 3px;
  }
  .xl\:border-bottom-3 {
    border-bottom-width: 3px;
  }
  .xl\:border-left-3 {
    border-left-width: 3px;
  }
  .xl\:border-4 {
    border-width: 4px;
  }
  .xl\:border-top-4 {
    border-top-width: 4px;
  }
  .xl\:border-right-4 {
    border-right-width: 4px;
  }
  .xl\:border-bottom-4 {
    border-bottom-width: 4px;
  }
  .xl\:border-left-4 {
    border-left-width: 4px;
  }
  .xl\:border-0 {
    border-width: 0;
  }
  .xl\:border-top-0 {
    border-top-width: 0;
  }
  .xl\:border-right-0 {
    border-right-width: 0;
  }
  .xl\:border-bottom-0 {
    border-bottom-width: 0;
  }
  .xl\:border-left-0 {
    border-left-width: 0;
  }
}

.align-content-start {
  align-content: flex-start;
}

.align-content-end {
  align-content: flex-end;
}

.align-content-center {
  align-content: center;
}

.align-content-between {
  align-content: space-between;
}

.align-content-around {
  align-content: space-around;
}

.align-content-stretch {
  align-content: stretch;
}

@media (min-width: 576px) {
  .sm\:align-content-start {
    align-content: flex-start;
  }
  .sm\:align-content-end {
    align-content: flex-end;
  }
  .sm\:align-content-center {
    align-content: center;
  }
  .sm\:align-content-between {
    align-content: space-between;
  }
  .sm\:align-content-around {
    align-content: space-around;
  }
  .sm\:align-content-stretch {
    align-content: stretch;
  }
}

@media (min-width: 768px) {
  .md\:align-content-start {
    align-content: flex-start;
  }
  .md\:align-content-end {
    align-content: flex-end;
  }
  .md\:align-content-center {
    align-content: center;
  }
  .md\:align-content-between {
    align-content: space-between;
  }
  .md\:align-content-around {
    align-content: space-around;
  }
  .md\:align-content-stretch {
    align-content: stretch;
  }
}

@media (min-width: 992px) {
  .lg\:align-content-start {
    align-content: flex-start;
  }
  .lg\:align-content-end {
    align-content: flex-end;
  }
  .lg\:align-content-center {
    align-content: center;
  }
  .lg\:align-content-between {
    align-content: space-between;
  }
  .lg\:align-content-around {
    align-content: space-around;
  }
  .lg\:align-content-stretch {
    align-content: stretch;
  }
}

@media (min-width: 1200px) {
  .xl\:align-content-start {
    align-content: flex-start;
  }
  .xl\:align-content-end {
    align-content: flex-end;
  }
  .xl\:align-content-center {
    align-content: center;
  }
  .xl\:align-content-between {
    align-content: space-between;
  }
  .xl\:align-content-around {
    align-content: space-around;
  }
  .xl\:align-content-stretch {
    align-content: stretch;
  }
}

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

@media (min-width: 576px) {
  .sm\:align-items-start {
    align-items: flex-start;
  }
  .sm\:align-items-end {
    align-items: flex-end;
  }
  .sm\:align-items-center {
    align-items: center;
  }
  .sm\:align-items-baseline {
    align-items: baseline;
  }
  .sm\:align-items-stretch {
    align-items: stretch;
  }
}

@media (min-width: 768px) {
  .md\:align-items-start {
    align-items: flex-start;
  }
  .md\:align-items-end {
    align-items: flex-end;
  }
  .md\:align-items-center {
    align-items: center;
  }
  .md\:align-items-baseline {
    align-items: baseline;
  }
  .md\:align-items-stretch {
    align-items: stretch;
  }
}

@media (min-width: 992px) {
  .lg\:align-items-start {
    align-items: flex-start;
  }
  .lg\:align-items-end {
    align-items: flex-end;
  }
  .lg\:align-items-center {
    align-items: center;
  }
  .lg\:align-items-baseline {
    align-items: baseline;
  }
  .lg\:align-items-stretch {
    align-items: stretch;
  }
}

@media (min-width: 1200px) {
  .xl\:align-items-start {
    align-items: flex-start;
  }
  .xl\:align-items-end {
    align-items: flex-end;
  }
  .xl\:align-items-center {
    align-items: center;
  }
  .xl\:align-items-baseline {
    align-items: baseline;
  }
  .xl\:align-items-stretch {
    align-items: stretch;
  }
}

.align-self-auto {
  align-self: auto;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

@media (min-width: 576px) {
  .sm\:align-self-auto {
    align-self: auto;
  }
  .sm\:align-self-start {
    align-self: flex-start;
  }
  .sm\:align-self-end {
    align-self: flex-end;
  }
  .sm\:align-self-center {
    align-self: center;
  }
  .sm\:align-self-baseline {
    align-self: baseline;
  }
  .sm\:align-self-stretch {
    align-self: stretch;
  }
}

@media (min-width: 768px) {
  .md\:align-self-auto {
    align-self: auto;
  }
  .md\:align-self-start {
    align-self: flex-start;
  }
  .md\:align-self-end {
    align-self: flex-end;
  }
  .md\:align-self-center {
    align-self: center;
  }
  .md\:align-self-baseline {
    align-self: baseline;
  }
  .md\:align-self-stretch {
    align-self: stretch;
  }
}

@media (min-width: 992px) {
  .lg\:align-self-auto {
    align-self: auto;
  }
  .lg\:align-self-start {
    align-self: flex-start;
  }
  .lg\:align-self-end {
    align-self: flex-end;
  }
  .lg\:align-self-center {
    align-self: center;
  }
  .lg\:align-self-baseline {
    align-self: baseline;
  }
  .lg\:align-self-stretch {
    align-self: stretch;
  }
}

@media (min-width: 1200px) {
  .xl\:align-self-auto {
    align-self: auto;
  }
  .xl\:align-self-start {
    align-self: flex-start;
  }
  .xl\:align-self-end {
    align-self: flex-end;
  }
  .xl\:align-self-center {
    align-self: center;
  }
  .xl\:align-self-baseline {
    align-self: baseline;
  }
  .xl\:align-self-stretch {
    align-self: stretch;
  }
}

.flex-initial {
  flex: initial;
}

.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.flex-none {
  flex: none;
}

.flex-fill {
  flex: 1 1 auto;
}

.flex-grow {
  flex-grow: 1;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

@media (min-width: 576px) {
  .sm\:flex-initial {
    flex: initial;
  }
  .sm\:flex-1 {
    flex: 1;
  }
  .sm\:flex-auto {
    flex: auto;
  }
  .sm\:flex-none {
    flex: none;
  }
  .sm\:flex-fill {
    flex: 1 1 auto;
  }
  .sm\:flex-grow {
    flex-grow: 1;
  }
  .sm\:flex-grow-0 {
    flex-grow: 0;
  }
  .sm\:flex-shrink {
    flex-shrink: 1;
  }
  .sm\:flex-shrink-0 {
    flex-shrink: 0;
  }
}

@media (min-width: 768px) {
  .md\:flex-initial {
    flex: initial;
  }
  .md\:flex-1 {
    flex: 1;
  }
  .md\:flex-auto {
    flex: auto;
  }
  .md\:flex-none {
    flex: none;
  }
  .md\:flex-fill {
    flex: 1 1 auto;
  }
  .md\:flex-grow {
    flex-grow: 1;
  }
  .md\:flex-grow-0 {
    flex-grow: 0;
  }
  .md\:flex-shrink {
    flex-shrink: 1;
  }
  .md\:flex-shrink-0 {
    flex-shrink: 0;
  }
}

@media (min-width: 992px) {
  .lg\:flex-initial {
    flex: initial;
  }
  .lg\:flex-1 {
    flex: 1;
  }
  .lg\:flex-auto {
    flex: auto;
  }
  .lg\:flex-none {
    flex: none;
  }
  .lg\:flex-fill {
    flex: 1 1 auto;
  }
  .lg\:flex-grow {
    flex-grow: 1;
  }
  .lg\:flex-grow-0 {
    flex-grow: 0;
  }
  .lg\:flex-shrink {
    flex-shrink: 1;
  }
  .lg\:flex-shrink-0 {
    flex-shrink: 0;
  }
}

@media (min-width: 1200px) {
  .xl\:flex-initial {
    flex: initial;
  }
  .xl\:flex-1 {
    flex: 1;
  }
  .xl\:flex-auto {
    flex: auto;
  }
  .xl\:flex-none {
    flex: none;
  }
  .xl\:flex-fill {
    flex: 1 1 auto;
  }
  .xl\:flex-grow {
    flex-grow: 1;
  }
  .xl\:flex-grow-0 {
    flex-grow: 0;
  }
  .xl\:flex-shrink {
    flex-shrink: 1;
  }
  .xl\:flex-shrink-0 {
    flex-shrink: 0;
  }
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

@media (min-width: 576px) {
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:flex-column {
    flex-direction: column;
  }
  .sm\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .sm\:flex-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (min-width: 768px) {
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:flex-column {
    flex-direction: column;
  }
  .md\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .md\:flex-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (min-width: 992px) {
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:flex-column {
    flex-direction: column;
  }
  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .lg\:flex-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (min-width: 1200px) {
  .xl\:flex-row {
    flex-direction: row;
  }
  .xl\:flex-column {
    flex-direction: column;
  }
  .xl\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .xl\:flex-column-reverse {
    flex-direction: column-reverse;
  }
}

.flex-first {
  order: -1;
}

.flex-last {
  order: 13;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

@media (min-width: 576px) {
  .sm\:flex-first {
    order: -1;
  }
  .sm\:flex-last {
    order: 13;
  }
  .sm\:order-inherit {
    order: inherit;
  }
}

@media (min-width: 768px) {
  .md\:flex-first {
    order: -1;
  }
  .md\:flex-last {
    order: 13;
  }
  .md\:order-inherit {
    order: inherit;
  }
}

@media (min-width: 992px) {
  .lg\:flex-first {
    order: -1;
  }
  .lg\:flex-last {
    order: 13;
  }
  .lg\:order-inherit {
    order: inherit;
  }
}

@media (min-width: 1200px) {
  .xl\:flex-first {
    order: -1;
  }
  .xl\:flex-last {
    order: 13;
  }
  .xl\:order-inherit {
    order: inherit;
  }
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-no-wrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

@media (min-width: 576px) {
  .sm\:flex-wrap {
    flex-wrap: wrap;
  }
  .sm\:flex-no-wrap {
    flex-wrap: nowrap;
  }
  .sm\:flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@media (min-width: 768px) {
  .md\:flex-wrap {
    flex-wrap: wrap;
  }
  .md\:flex-no-wrap {
    flex-wrap: nowrap;
  }
  .md\:flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@media (min-width: 992px) {
  .lg\:flex-wrap {
    flex-wrap: wrap;
  }
  .lg\:flex-no-wrap {
    flex-wrap: nowrap;
  }
  .lg\:flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@media (min-width: 1200px) {
  .xl\:flex-wrap {
    flex-wrap: wrap;
  }
  .xl\:flex-no-wrap {
    flex-wrap: nowrap;
  }
  .xl\:flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

@media (min-width: 576px) {
  .sm\:justify-content-start {
    justify-content: flex-start;
  }
  .sm\:justify-content-end {
    justify-content: flex-end;
  }
  .sm\:justify-content-center {
    justify-content: center;
  }
  .sm\:justify-content-between {
    justify-content: space-between;
  }
  .sm\:justify-content-around {
    justify-content: space-around;
  }
}

@media (min-width: 768px) {
  .md\:justify-content-start {
    justify-content: flex-start;
  }
  .md\:justify-content-end {
    justify-content: flex-end;
  }
  .md\:justify-content-center {
    justify-content: center;
  }
  .md\:justify-content-between {
    justify-content: space-between;
  }
  .md\:justify-content-around {
    justify-content: space-around;
  }
}

@media (min-width: 992px) {
  .lg\:justify-content-start {
    justify-content: flex-start;
  }
  .lg\:justify-content-end {
    justify-content: flex-end;
  }
  .lg\:justify-content-center {
    justify-content: center;
  }
  .lg\:justify-content-between {
    justify-content: space-between;
  }
  .lg\:justify-content-around {
    justify-content: space-around;
  }
}

@media (min-width: 1200px) {
  .xl\:justify-content-start {
    justify-content: flex-start;
  }
  .xl\:justify-content-end {
    justify-content: flex-end;
  }
  .xl\:justify-content-center {
    justify-content: center;
  }
  .xl\:justify-content-between {
    justify-content: space-between;
  }
  .xl\:justify-content-around {
    justify-content: space-around;
  }
}

.-mt-1px {
  margin-top: -1px;
}

.-mb-1px {
  margin-bottom: -1px;
}

.m-0 {
  margin: 0;
}

.mt-0,
.my-0 {
  margin-top: 0;
}

.mr-0,
.mx-0 {
  margin-right: 0;
}

.mb-0,
.my-0 {
  margin-bottom: 0;
}

.ml-0,
.mx-0 {
  margin-left: 0;
}

.-m-0 {
  margin: 0;
}

.-mt-0,
.-my-0 {
  margin-top: 0;
}

.-mr-0,
.-mx-0 {
  margin-right: 0;
}

.-mb-0,
.-my-0 {
  margin-bottom: 0;
}

.-ml-0,
.-mx-0 {
  margin-left: 0;
}

.m-1 {
  margin: 0.25rem;
}

.mt-2px {
    margin-top: 2px;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem;
}

.-m-1 {
  margin: -0.25rem;
}

.-mt-1,
.-my-1 {
  margin-top: -0.25rem;
}

.-mr-1,
.-mx-1 {
  margin-right: -0.25rem;
}

.-mb-1,
.-my-1 {
  margin-bottom: -0.25rem;
}

.-ml-1,
.-mx-1 {
  margin-left: -0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem;
}

.-m-2 {
  margin: -0.5rem;
}

.-mt-2,
.-my-2 {
  margin-top: -0.5rem;
}

.-mr-2,
.-mx-2 {
  margin-right: -0.5rem;
}

.-mb-2,
.-my-2 {
  margin-bottom: -0.5rem;
}

.-ml-2,
.-mx-2 {
  margin-left: -0.5rem;
}

.m-3 {
  margin: 0.75rem;
}

.mt-3,
.my-3 {
  margin-top: 0.75rem;
}

.mr-3,
.mx-3 {
  margin-right: 0.75rem;
}

.mb-3,
.my-3 {
  margin-bottom: 0.75rem;
}

.ml-3,
.mx-3 {
  margin-left: 0.75rem;
}

.-m-3 {
  margin: -0.75rem;
}

.-mt-3,
.-my-3 {
  margin-top: -0.75rem;
}

.-mr-3,
.-mx-3 {
  margin-right: -0.75rem;
}

.-mb-3,
.-my-3 {
  margin-bottom: -0.75rem;
}

.-ml-3,
.-mx-3 {
  margin-left: -0.75rem;
}

.m-4 {
  margin: 1rem;
}

.mt-4,
.my-4 {
  margin-top: 1rem;
}

.mr-4,
.mx-4 {
  margin-right: 1rem;
}

.mb-4,
.my-4 {
  margin-bottom: 1rem;
}

.ml-4,
.mx-4 {
  margin-left: 1rem;
}

.-m-4 {
  margin: -1rem;
}

.-mt-4,
.-my-4 {
  margin-top: -1rem;
}

.-mr-4,
.-mx-4 {
  margin-right: -1rem;
}

.-mb-4,
.-my-4 {
  margin-bottom: -1rem;
}

.-ml-4,
.-mx-4 {
  margin-left: -1rem;
}

.m-5 {
  margin: 1.5rem;
}

.mt-5,
.my-5 {
  margin-top: 1.5rem;
}

.mr-5,
.mx-5 {
  margin-right: 1.5rem;
}

.mb-5,
.my-5 {
  margin-bottom: 1.5rem;
}

.ml-5,
.mx-5 {
  margin-left: 1.5rem;
}

.-m-5 {
  margin: -1.5rem;
}

.-mt-5,
.-my-5 {
  margin-top: -1.5rem;
}

.-mr-5,
.-mx-5 {
  margin-right: -1.5rem;
}

.-mb-5,
.-my-5 {
  margin-bottom: -1.5rem;
}

.-ml-5,
.-mx-5 {
  margin-left: -1.5rem;
}

.m-6 {
  margin: 2rem;
}

.mt-6,
.my-6 {
  margin-top: 2rem;
}

.mr-6,
.mx-6 {
  margin-right: 2rem;
}

.mb-6,
.my-6 {
  margin-bottom: 2rem;
}

.ml-6,
.mx-6 {
  margin-left: 2rem;
}

.-m-6 {
  margin: -2rem;
}

.-mt-6,
.-my-6 {
  margin-top: -2rem;
}

.-mr-6,
.-mx-6 {
  margin-right: -2rem;
}

.-mb-6,
.-my-6 {
  margin-bottom: -2rem;
}

.-ml-6,
.-mx-6 {
  margin-left: -2rem;
}

.m-7 {
  margin: 3rem;
}

.mt-7,
.my-7 {
  margin-top: 3rem;
}

.mr-7,
.mx-7 {
  margin-right: 3rem;
}

.mb-7,
.my-7 {
  margin-bottom: 3rem;
}

.ml-7,
.mx-7 {
  margin-left: 3rem;
}

.-m-7 {
  margin: -3rem;
}

.-mt-7,
.-my-7 {
  margin-top: -3rem;
}

.-mr-7,
.-mx-7 {
  margin-right: -3rem;
}

.-mb-7,
.-my-7 {
  margin-bottom: -3rem;
}

.-ml-7,
.-mx-7 {
  margin-left: -3rem;
}

.m-8 {
  margin: 4rem;
}

.mt-8,
.my-8 {
  margin-top: 4rem;
}

.mr-8,
.mx-8 {
  margin-right: 4rem;
}

.mb-8,
.my-8 {
  margin-bottom: 4rem;
}

.ml-8,
.mx-8 {
  margin-left: 4rem;
}

.-m-8 {
  margin: -4rem;
}

.-mt-8,
.-my-8 {
  margin-top: -4rem;
}

.-mr-8,
.-mx-8 {
  margin-right: -4rem;
}

.-mb-8,
.-my-8 {
  margin-bottom: -4rem;
}

.-ml-8,
.-mx-8 {
  margin-left: -4rem;
}

.m-9 {
  margin: 6rem;
}

.mt-9,
.my-9 {
  margin-top: 6rem;
}

.mr-9,
.mx-9 {
  margin-right: 6rem;
}

.mb-9,
.my-9 {
  margin-bottom: 6rem;
}

.ml-9,
.mx-9 {
  margin-left: 6rem;
}

.-m-9 {
  margin: -6rem;
}

.-mt-9,
.-my-9 {
  margin-top: -6rem;
}

.-mr-9,
.-mx-9 {
  margin-right: -6rem;
}

.-mb-9,
.-my-9 {
  margin-bottom: -6rem;
}

.-ml-9,
.-mx-9 {
  margin-left: -6rem;
}

.m-auto {
  margin: auto;
}

.mt-auto,
.my-auto {
  margin-top: auto;
}

.mr-auto,
.mx-auto {
  margin-right: auto;
}

.mb-auto,
.my-auto {
  margin-bottom: auto;
}

.ml-auto,
.mx-auto {
  margin-left: auto;
}

@media (min-width: 576px) {
  .sm\:m-0 {
    margin: 0;
  }
  .sm\:mt-0,
  .sm\:my-0 {
    margin-top: 0;
  }
  .sm\:mr-0,
  .sm\:mx-0 {
    margin-right: 0;
  }
  .sm\:mb-0,
  .sm\:my-0 {
    margin-bottom: 0;
  }
  .sm\:ml-0,
  .sm\:mx-0 {
    margin-left: 0;
  }
  .sm\:-m-0 {
    margin: 0;
  }
  .sm\:-mt-0,
  .sm\:-my-0 {
    margin-top: 0;
  }
  .sm\:-mr-0,
  .sm\:-mx-0 {
    margin-right: 0;
  }
  .sm\:-mb-0,
  .sm\:-my-0 {
    margin-bottom: 0;
  }
  .sm\:-ml-0,
  .sm\:-mx-0 {
    margin-left: 0;
  }
  .sm\:m-1 {
    margin: 0.25rem;
  }
  .sm\:mt-1,
  .sm\:my-1 {
    margin-top: 0.25rem;
  }
  .sm\:mr-1,
  .sm\:mx-1 {
    margin-right: 0.25rem;
  }
  .sm\:mb-1,
  .sm\:my-1 {
    margin-bottom: 0.25rem;
  }
  .sm\:ml-1,
  .sm\:mx-1 {
    margin-left: 0.25rem;
  }
  .sm\:-m-1 {
    margin: -0.25rem;
  }
  .sm\:-mt-1,
  .sm\:-my-1 {
    margin-top: -0.25rem;
  }
  .sm\:-mr-1,
  .sm\:-mx-1 {
    margin-right: -0.25rem;
  }
  .sm\:-mb-1,
  .sm\:-my-1 {
    margin-bottom: -0.25rem;
  }
  .sm\:-ml-1,
  .sm\:-mx-1 {
    margin-left: -0.25rem;
  }
  .sm\:m-2 {
    margin: 0.5rem;
  }
  .sm\:mt-2,
  .sm\:my-2 {
    margin-top: 0.5rem;
  }
  .sm\:mr-2,
  .sm\:mx-2 {
    margin-right: 0.5rem;
  }
  .sm\:mb-2,
  .sm\:my-2 {
    margin-bottom: 0.5rem;
  }
  .sm\:ml-2,
  .sm\:mx-2 {
    margin-left: 0.5rem;
  }
  .sm\:-m-2 {
    margin: -0.5rem;
  }
  .sm\:-mt-2,
  .sm\:-my-2 {
    margin-top: -0.5rem;
  }
  .sm\:-mr-2,
  .sm\:-mx-2 {
    margin-right: -0.5rem;
  }
  .sm\:-mb-2,
  .sm\:-my-2 {
    margin-bottom: -0.5rem;
  }
  .sm\:-ml-2,
  .sm\:-mx-2 {
    margin-left: -0.5rem;
  }
  .sm\:m-3 {
    margin: 0.75rem;
  }
  .sm\:mt-3,
  .sm\:my-3 {
    margin-top: 0.75rem;
  }
  .sm\:mr-3,
  .sm\:mx-3 {
    margin-right: 0.75rem;
  }
  .sm\:mb-3,
  .sm\:my-3 {
    margin-bottom: 0.75rem;
  }
  .sm\:ml-3,
  .sm\:mx-3 {
    margin-left: 0.75rem;
  }
  .sm\:-m-3 {
    margin: -0.75rem;
  }
  .sm\:-mt-3,
  .sm\:-my-3 {
    margin-top: -0.75rem;
  }
  .sm\:-mr-3,
  .sm\:-mx-3 {
    margin-right: -0.75rem;
  }
  .sm\:-mb-3,
  .sm\:-my-3 {
    margin-bottom: -0.75rem;
  }
  .sm\:-ml-3,
  .sm\:-mx-3 {
    margin-left: -0.75rem;
  }
  .sm\:m-4 {
    margin: 1rem;
  }
  .sm\:mt-4,
  .sm\:my-4 {
    margin-top: 1rem;
  }
  .sm\:mr-4,
  .sm\:mx-4 {
    margin-right: 1rem;
  }
  .sm\:mb-4,
  .sm\:my-4 {
    margin-bottom: 1rem;
  }
  .sm\:ml-4,
  .sm\:mx-4 {
    margin-left: 1rem;
  }
  .sm\:-m-4 {
    margin: -1rem;
  }
  .sm\:-mt-4,
  .sm\:-my-4 {
    margin-top: -1rem;
  }
  .sm\:-mr-4,
  .sm\:-mx-4 {
    margin-right: -1rem;
  }
  .sm\:-mb-4,
  .sm\:-my-4 {
    margin-bottom: -1rem;
  }
  .sm\:-ml-4,
  .sm\:-mx-4 {
    margin-left: -1rem;
  }
  .sm\:m-5 {
    margin: 1.5rem;
  }
  .sm\:mt-5,
  .sm\:my-5 {
    margin-top: 1.5rem;
  }
  .sm\:mr-5,
  .sm\:mx-5 {
    margin-right: 1.5rem;
  }
  .sm\:mb-5,
  .sm\:my-5 {
    margin-bottom: 1.5rem;
  }
  .sm\:ml-5,
  .sm\:mx-5 {
    margin-left: 1.5rem;
  }
  .sm\:-m-5 {
    margin: -1.5rem;
  }
  .sm\:-mt-5,
  .sm\:-my-5 {
    margin-top: -1.5rem;
  }
  .sm\:-mr-5,
  .sm\:-mx-5 {
    margin-right: -1.5rem;
  }
  .sm\:-mb-5,
  .sm\:-my-5 {
    margin-bottom: -1.5rem;
  }
  .sm\:-ml-5,
  .sm\:-mx-5 {
    margin-left: -1.5rem;
  }
  .sm\:m-6 {
    margin: 2rem;
  }
  .sm\:mt-6,
  .sm\:my-6 {
    margin-top: 2rem;
  }
  .sm\:mr-6,
  .sm\:mx-6 {
    margin-right: 2rem;
  }
  .sm\:mb-6,
  .sm\:my-6 {
    margin-bottom: 2rem;
  }
  .sm\:ml-6,
  .sm\:mx-6 {
    margin-left: 2rem;
  }
  .sm\:-m-6 {
    margin: -2rem;
  }
  .sm\:-mt-6,
  .sm\:-my-6 {
    margin-top: -2rem;
  }
  .sm\:-mr-6,
  .sm\:-mx-6 {
    margin-right: -2rem;
  }
  .sm\:-mb-6,
  .sm\:-my-6 {
    margin-bottom: -2rem;
  }
  .sm\:-ml-6,
  .sm\:-mx-6 {
    margin-left: -2rem;
  }
  .sm\:m-7 {
    margin: 3rem;
  }
  .sm\:mt-7,
  .sm\:my-7 {
    margin-top: 3rem;
  }
  .sm\:mr-7,
  .sm\:mx-7 {
    margin-right: 3rem;
  }
  .sm\:mb-7,
  .sm\:my-7 {
    margin-bottom: 3rem;
  }
  .sm\:ml-7,
  .sm\:mx-7 {
    margin-left: 3rem;
  }
  .sm\:-m-7 {
    margin: -3rem;
  }
  .sm\:-mt-7,
  .sm\:-my-7 {
    margin-top: -3rem;
  }
  .sm\:-mr-7,
  .sm\:-mx-7 {
    margin-right: -3rem;
  }
  .sm\:-mb-7,
  .sm\:-my-7 {
    margin-bottom: -3rem;
  }
  .sm\:-ml-7,
  .sm\:-mx-7 {
    margin-left: -3rem;
  }
  .sm\:m-8 {
    margin: 4rem;
  }
  .sm\:mt-8,
  .sm\:my-8 {
    margin-top: 4rem;
  }
  .sm\:mr-8,
  .sm\:mx-8 {
    margin-right: 4rem;
  }
  .sm\:mb-8,
  .sm\:my-8 {
    margin-bottom: 4rem;
  }
  .sm\:ml-8,
  .sm\:mx-8 {
    margin-left: 4rem;
  }
  .sm\:-m-8 {
    margin: -4rem;
  }
  .sm\:-mt-8,
  .sm\:-my-8 {
    margin-top: -4rem;
  }
  .sm\:-mr-8,
  .sm\:-mx-8 {
    margin-right: -4rem;
  }
  .sm\:-mb-8,
  .sm\:-my-8 {
    margin-bottom: -4rem;
  }
  .sm\:-ml-8,
  .sm\:-mx-8 {
    margin-left: -4rem;
  }
  .sm\:m-9 {
    margin: 6rem;
  }
  .sm\:mt-9,
  .sm\:my-9 {
    margin-top: 6rem;
  }
  .sm\:mr-9,
  .sm\:mx-9 {
    margin-right: 6rem;
  }
  .sm\:mb-9,
  .sm\:my-9 {
    margin-bottom: 6rem;
  }
  .sm\:ml-9,
  .sm\:mx-9 {
    margin-left: 6rem;
  }
  .sm\:-m-9 {
    margin: -6rem;
  }
  .sm\:-mt-9,
  .sm\:-my-9 {
    margin-top: -6rem;
  }
  .sm\:-mr-9,
  .sm\:-mx-9 {
    margin-right: -6rem;
  }
  .sm\:-mb-9,
  .sm\:-my-9 {
    margin-bottom: -6rem;
  }
  .sm\:-ml-9,
  .sm\:-mx-9 {
    margin-left: -6rem;
  }
  .sm\:m-auto {
    margin: auto;
  }
  .sm\:mt-auto,
  .sm\:my-auto {
    margin-top: auto;
  }
  .sm\:mr-auto,
  .sm\:mx-auto {
    margin-right: auto;
  }
  .sm\:mb-auto,
  .sm\:my-auto {
    margin-bottom: auto;
  }
  .sm\:ml-auto,
  .sm\:mx-auto {
    margin-left: auto;
  }
}

@media (min-width: 768px) {
  .md\:m-0 {
    margin: 0;
  }
  .md\:mt-0,
  .md\:my-0 {
    margin-top: 0;
  }
  .md\:mr-0,
  .md\:mx-0 {
    margin-right: 0;
  }
  .md\:mb-0,
  .md\:my-0 {
    margin-bottom: 0;
  }
  .md\:ml-0,
  .md\:mx-0 {
    margin-left: 0;
  }
  .md\:-m-0 {
    margin: 0;
  }
  .md\:-mt-0,
  .md\:-my-0 {
    margin-top: 0;
  }
  .md\:-mr-0,
  .md\:-mx-0 {
    margin-right: 0;
  }
  .md\:-mb-0,
  .md\:-my-0 {
    margin-bottom: 0;
  }
  .md\:-ml-0,
  .md\:-mx-0 {
    margin-left: 0;
  }
  .md\:m-1 {
    margin: 0.25rem;
  }
  .md\:mt-1,
  .md\:my-1 {
    margin-top: 0.25rem;
  }
  .md\:mr-1,
  .md\:mx-1 {
    margin-right: 0.25rem;
  }
  .md\:mb-1,
  .md\:my-1 {
    margin-bottom: 0.25rem;
  }
  .md\:ml-1,
  .md\:mx-1 {
    margin-left: 0.25rem;
  }
  .md\:-m-1 {
    margin: -0.25rem;
  }
  .md\:-mt-1,
  .md\:-my-1 {
    margin-top: -0.25rem;
  }
  .md\:-mr-1,
  .md\:-mx-1 {
    margin-right: -0.25rem;
  }
  .md\:-mb-1,
  .md\:-my-1 {
    margin-bottom: -0.25rem;
  }
  .md\:-ml-1,
  .md\:-mx-1 {
    margin-left: -0.25rem;
  }
  .md\:m-2 {
    margin: 0.5rem;
  }
  .md\:mt-2,
  .md\:my-2 {
    margin-top: 0.5rem;
  }
  .md\:mr-2,
  .md\:mx-2 {
    margin-right: 0.5rem;
  }
  .md\:mb-2,
  .md\:my-2 {
    margin-bottom: 0.5rem;
  }
  .md\:ml-2,
  .md\:mx-2 {
    margin-left: 0.5rem;
  }
  .md\:-m-2 {
    margin: -0.5rem;
  }
  .md\:-mt-2,
  .md\:-my-2 {
    margin-top: -0.5rem;
  }
  .md\:-mr-2,
  .md\:-mx-2 {
    margin-right: -0.5rem;
  }
  .md\:-mb-2,
  .md\:-my-2 {
    margin-bottom: -0.5rem;
  }
  .md\:-ml-2,
  .md\:-mx-2 {
    margin-left: -0.5rem;
  }
  .md\:m-3 {
    margin: 0.75rem;
  }
  .md\:mt-3,
  .md\:my-3 {
    margin-top: 0.75rem;
  }
  .md\:mr-3,
  .md\:mx-3 {
    margin-right: 0.75rem;
  }
  .md\:mb-3,
  .md\:my-3 {
    margin-bottom: 0.75rem;
  }
  .md\:ml-3,
  .md\:mx-3 {
    margin-left: 0.75rem;
  }
  .md\:-m-3 {
    margin: -0.75rem;
  }
  .md\:-mt-3,
  .md\:-my-3 {
    margin-top: -0.75rem;
  }
  .md\:-mr-3,
  .md\:-mx-3 {
    margin-right: -0.75rem;
  }
  .md\:-mb-3,
  .md\:-my-3 {
    margin-bottom: -0.75rem;
  }
  .md\:-ml-3,
  .md\:-mx-3 {
    margin-left: -0.75rem;
  }
  .md\:m-4 {
    margin: 1rem;
  }
  .md\:mt-4,
  .md\:my-4 {
    margin-top: 1rem;
  }
  .md\:mr-4,
  .md\:mx-4 {
    margin-right: 1rem;
  }
  .md\:mb-4,
  .md\:my-4 {
    margin-bottom: 1rem;
  }
  .md\:ml-4,
  .md\:mx-4 {
    margin-left: 1rem;
  }
  .md\:-m-4 {
    margin: -1rem;
  }
  .md\:-mt-4,
  .md\:-my-4 {
    margin-top: -1rem;
  }
  .md\:-mr-4,
  .md\:-mx-4 {
    margin-right: -1rem;
  }
  .md\:-mb-4,
  .md\:-my-4 {
    margin-bottom: -1rem;
  }
  .md\:-ml-4,
  .md\:-mx-4 {
    margin-left: -1rem;
  }
  .md\:m-5 {
    margin: 1.5rem;
  }
  .md\:mt-5,
  .md\:my-5 {
    margin-top: 1.5rem;
  }
  .md\:mr-5,
  .md\:mx-5 {
    margin-right: 1.5rem;
  }
  .md\:mb-5,
  .md\:my-5 {
    margin-bottom: 1.5rem;
  }
  .md\:ml-5,
  .md\:mx-5 {
    margin-left: 1.5rem;
  }
  .md\:-m-5 {
    margin: -1.5rem;
  }
  .md\:-mt-5,
  .md\:-my-5 {
    margin-top: -1.5rem;
  }
  .md\:-mr-5,
  .md\:-mx-5 {
    margin-right: -1.5rem;
  }
  .md\:-mb-5,
  .md\:-my-5 {
    margin-bottom: -1.5rem;
  }
  .md\:-ml-5,
  .md\:-mx-5 {
    margin-left: -1.5rem;
  }
  .md\:m-6 {
    margin: 2rem;
  }
  .md\:mt-6,
  .md\:my-6 {
    margin-top: 2rem;
  }
  .md\:mr-6,
  .md\:mx-6 {
    margin-right: 2rem;
  }
  .md\:mb-6,
  .md\:my-6 {
    margin-bottom: 2rem;
  }
  .md\:ml-6,
  .md\:mx-6 {
    margin-left: 2rem;
  }
  .md\:-m-6 {
    margin: -2rem;
  }
  .md\:-mt-6,
  .md\:-my-6 {
    margin-top: -2rem;
  }
  .md\:-mr-6,
  .md\:-mx-6 {
    margin-right: -2rem;
  }
  .md\:-mb-6,
  .md\:-my-6 {
    margin-bottom: -2rem;
  }
  .md\:-ml-6,
  .md\:-mx-6 {
    margin-left: -2rem;
  }
  .md\:m-7 {
    margin: 3rem;
  }
  .md\:mt-7,
  .md\:my-7 {
    margin-top: 3rem;
  }
  .md\:mr-7,
  .md\:mx-7 {
    margin-right: 3rem;
  }
  .md\:mb-7,
  .md\:my-7 {
    margin-bottom: 3rem;
  }
  .md\:ml-7,
  .md\:mx-7 {
    margin-left: 3rem;
  }
  .md\:-m-7 {
    margin: -3rem;
  }
  .md\:-mt-7,
  .md\:-my-7 {
    margin-top: -3rem;
  }
  .md\:-mr-7,
  .md\:-mx-7 {
    margin-right: -3rem;
  }
  .md\:-mb-7,
  .md\:-my-7 {
    margin-bottom: -3rem;
  }
  .md\:-ml-7,
  .md\:-mx-7 {
    margin-left: -3rem;
  }
  .md\:m-8 {
    margin: 4rem;
  }
  .md\:mt-8,
  .md\:my-8 {
    margin-top: 4rem;
  }
  .md\:mr-8,
  .md\:mx-8 {
    margin-right: 4rem;
  }
  .md\:mb-8,
  .md\:my-8 {
    margin-bottom: 4rem;
  }
  .md\:ml-8,
  .md\:mx-8 {
    margin-left: 4rem;
  }
  .md\:-m-8 {
    margin: -4rem;
  }
  .md\:-mt-8,
  .md\:-my-8 {
    margin-top: -4rem;
  }
  .md\:-mr-8,
  .md\:-mx-8 {
    margin-right: -4rem;
  }
  .md\:-mb-8,
  .md\:-my-8 {
    margin-bottom: -4rem;
  }
  .md\:-ml-8,
  .md\:-mx-8 {
    margin-left: -4rem;
  }
  .md\:m-9 {
    margin: 6rem;
  }
  .md\:mt-9,
  .md\:my-9 {
    margin-top: 6rem;
  }
  .md\:mr-9,
  .md\:mx-9 {
    margin-right: 6rem;
  }
  .md\:mb-9,
  .md\:my-9 {
    margin-bottom: 6rem;
  }
  .md\:ml-9,
  .md\:mx-9 {
    margin-left: 6rem;
  }
  .md\:-m-9 {
    margin: -6rem;
  }
  .md\:-mt-9,
  .md\:-my-9 {
    margin-top: -6rem;
  }
  .md\:-mr-9,
  .md\:-mx-9 {
    margin-right: -6rem;
  }
  .md\:-mb-9,
  .md\:-my-9 {
    margin-bottom: -6rem;
  }
  .md\:-ml-9,
  .md\:-mx-9 {
    margin-left: -6rem;
  }
  .md\:m-auto {
    margin: auto;
  }
  .md\:mt-auto,
  .md\:my-auto {
    margin-top: auto;
  }
  .md\:mr-auto,
  .md\:mx-auto {
    margin-right: auto;
  }
  .md\:mb-auto,
  .md\:my-auto {
    margin-bottom: auto;
  }
  .md\:ml-auto,
  .md\:mx-auto {
    margin-left: auto;
  }
}

@media (min-width: 992px) {
  .lg\:m-0 {
    margin: 0;
  }
  .lg\:mt-0,
  .lg\:my-0 {
    margin-top: 0;
  }
  .lg\:mr-0,
  .lg\:mx-0 {
    margin-right: 0;
  }
  .lg\:mb-0,
  .lg\:my-0 {
    margin-bottom: 0;
  }
  .lg\:ml-0,
  .lg\:mx-0 {
    margin-left: 0;
  }
  .lg\:-m-0 {
    margin: 0;
  }
  .lg\:-mt-0,
  .lg\:-my-0 {
    margin-top: 0;
  }
  .lg\:-mr-0,
  .lg\:-mx-0 {
    margin-right: 0;
  }
  .lg\:-mb-0,
  .lg\:-my-0 {
    margin-bottom: 0;
  }
  .lg\:-ml-0,
  .lg\:-mx-0 {
    margin-left: 0;
  }
  .lg\:m-1 {
    margin: 0.25rem;
  }
  .lg\:mt-1,
  .lg\:my-1 {
    margin-top: 0.25rem;
  }
  .lg\:mr-1,
  .lg\:mx-1 {
    margin-right: 0.25rem;
  }
  .lg\:mb-1,
  .lg\:my-1 {
    margin-bottom: 0.25rem;
  }
  .lg\:ml-1,
  .lg\:mx-1 {
    margin-left: 0.25rem;
  }
  .lg\:-m-1 {
    margin: -0.25rem;
  }
  .lg\:-mt-1,
  .lg\:-my-1 {
    margin-top: -0.25rem;
  }
  .lg\:-mr-1,
  .lg\:-mx-1 {
    margin-right: -0.25rem;
  }
  .lg\:-mb-1,
  .lg\:-my-1 {
    margin-bottom: -0.25rem;
  }
  .lg\:-ml-1,
  .lg\:-mx-1 {
    margin-left: -0.25rem;
  }
  .lg\:m-2 {
    margin: 0.5rem;
  }
  .lg\:mt-2,
  .lg\:my-2 {
    margin-top: 0.5rem;
  }
  .lg\:mr-2,
  .lg\:mx-2 {
    margin-right: 0.5rem;
  }
  .lg\:mb-2,
  .lg\:my-2 {
    margin-bottom: 0.5rem;
  }
  .lg\:ml-2,
  .lg\:mx-2 {
    margin-left: 0.5rem;
  }
  .lg\:-m-2 {
    margin: -0.5rem;
  }
  .lg\:-mt-2,
  .lg\:-my-2 {
    margin-top: -0.5rem;
  }
  .lg\:-mr-2,
  .lg\:-mx-2 {
    margin-right: -0.5rem;
  }
  .lg\:-mb-2,
  .lg\:-my-2 {
    margin-bottom: -0.5rem;
  }
  .lg\:-ml-2,
  .lg\:-mx-2 {
    margin-left: -0.5rem;
  }
  .lg\:m-3 {
    margin: 0.75rem;
  }
  .lg\:mt-3,
  .lg\:my-3 {
    margin-top: 0.75rem;
  }
  .lg\:mr-3,
  .lg\:mx-3 {
    margin-right: 0.75rem;
  }
  .lg\:mb-3,
  .lg\:my-3 {
    margin-bottom: 0.75rem;
  }
  .lg\:ml-3,
  .lg\:mx-3 {
    margin-left: 0.75rem;
  }
  .lg\:-m-3 {
    margin: -0.75rem;
  }
  .lg\:-mt-3,
  .lg\:-my-3 {
    margin-top: -0.75rem;
  }
  .lg\:-mr-3,
  .lg\:-mx-3 {
    margin-right: -0.75rem;
  }
  .lg\:-mb-3,
  .lg\:-my-3 {
    margin-bottom: -0.75rem;
  }
  .lg\:-ml-3,
  .lg\:-mx-3 {
    margin-left: -0.75rem;
  }
  .lg\:m-4 {
    margin: 1rem;
  }
  .lg\:mt-4,
  .lg\:my-4 {
    margin-top: 1rem;
  }
  .lg\:mr-4,
  .lg\:mx-4 {
    margin-right: 1rem;
  }
  .lg\:mb-4,
  .lg\:my-4 {
    margin-bottom: 1rem;
  }
  .lg\:ml-4,
  .lg\:mx-4 {
    margin-left: 1rem;
  }
  .lg\:-m-4 {
    margin: -1rem;
  }
  .lg\:-mt-4,
  .lg\:-my-4 {
    margin-top: -1rem;
  }
  .lg\:-mr-4,
  .lg\:-mx-4 {
    margin-right: -1rem;
  }
  .lg\:-mb-4,
  .lg\:-my-4 {
    margin-bottom: -1rem;
  }
  .lg\:-ml-4,
  .lg\:-mx-4 {
    margin-left: -1rem;
  }
  .lg\:m-5 {
    margin: 1.5rem;
  }
  .lg\:mt-5,
  .lg\:my-5 {
    margin-top: 1.5rem;
  }
  .lg\:mr-5,
  .lg\:mx-5 {
    margin-right: 1.5rem;
  }
  .lg\:mb-5,
  .lg\:my-5 {
    margin-bottom: 1.5rem;
  }
  .lg\:ml-5,
  .lg\:mx-5 {
    margin-left: 1.5rem;
  }
  .lg\:-m-5 {
    margin: -1.5rem;
  }
  .lg\:-mt-5,
  .lg\:-my-5 {
    margin-top: -1.5rem;
  }
  .lg\:-mr-5,
  .lg\:-mx-5 {
    margin-right: -1.5rem;
  }
  .lg\:-mb-5,
  .lg\:-my-5 {
    margin-bottom: -1.5rem;
  }
  .lg\:-ml-5,
  .lg\:-mx-5 {
    margin-left: -1.5rem;
  }
  .lg\:m-6 {
    margin: 2rem;
  }
  .lg\:mt-6,
  .lg\:my-6 {
    margin-top: 2rem;
  }
  .lg\:mr-6,
  .lg\:mx-6 {
    margin-right: 2rem;
  }
  .lg\:mb-6,
  .lg\:my-6 {
    margin-bottom: 2rem;
  }
  .lg\:ml-6,
  .lg\:mx-6 {
    margin-left: 2rem;
  }
  .lg\:-m-6 {
    margin: -2rem;
  }
  .lg\:-mt-6,
  .lg\:-my-6 {
    margin-top: -2rem;
  }
  .lg\:-mr-6,
  .lg\:-mx-6 {
    margin-right: -2rem;
  }
  .lg\:-mb-6,
  .lg\:-my-6 {
    margin-bottom: -2rem;
  }
  .lg\:-ml-6,
  .lg\:-mx-6 {
    margin-left: -2rem;
  }
  .lg\:m-7 {
    margin: 3rem;
  }
  .lg\:mt-7,
  .lg\:my-7 {
    margin-top: 3rem;
  }
  .lg\:mr-7,
  .lg\:mx-7 {
    margin-right: 3rem;
  }
  .lg\:mb-7,
  .lg\:my-7 {
    margin-bottom: 3rem;
  }
  .lg\:ml-7,
  .lg\:mx-7 {
    margin-left: 3rem;
  }
  .lg\:-m-7 {
    margin: -3rem;
  }
  .lg\:-mt-7,
  .lg\:-my-7 {
    margin-top: -3rem;
  }
  .lg\:-mr-7,
  .lg\:-mx-7 {
    margin-right: -3rem;
  }
  .lg\:-mb-7,
  .lg\:-my-7 {
    margin-bottom: -3rem;
  }
  .lg\:-ml-7,
  .lg\:-mx-7 {
    margin-left: -3rem;
  }
  .lg\:m-8 {
    margin: 4rem;
  }
  .lg\:mt-8,
  .lg\:my-8 {
    margin-top: 4rem;
  }
  .lg\:mr-8,
  .lg\:mx-8 {
    margin-right: 4rem;
  }
  .lg\:mb-8,
  .lg\:my-8 {
    margin-bottom: 4rem;
  }
  .lg\:ml-8,
  .lg\:mx-8 {
    margin-left: 4rem;
  }
  .lg\:-m-8 {
    margin: -4rem;
  }
  .lg\:-mt-8,
  .lg\:-my-8 {
    margin-top: -4rem;
  }
  .lg\:-mr-8,
  .lg\:-mx-8 {
    margin-right: -4rem;
  }
  .lg\:-mb-8,
  .lg\:-my-8 {
    margin-bottom: -4rem;
  }
  .lg\:-ml-8,
  .lg\:-mx-8 {
    margin-left: -4rem;
  }
  .lg\:m-9 {
    margin: 6rem;
  }
  .lg\:mt-9,
  .lg\:my-9 {
    margin-top: 6rem;
  }
  .lg\:mr-9,
  .lg\:mx-9 {
    margin-right: 6rem;
  }
  .lg\:mb-9,
  .lg\:my-9 {
    margin-bottom: 6rem;
  }
  .lg\:ml-9,
  .lg\:mx-9 {
    margin-left: 6rem;
  }
  .lg\:-m-9 {
    margin: -6rem;
  }
  .lg\:-mt-9,
  .lg\:-my-9 {
    margin-top: -6rem;
  }
  .lg\:-mr-9,
  .lg\:-mx-9 {
    margin-right: -6rem;
  }
  .lg\:-mb-9,
  .lg\:-my-9 {
    margin-bottom: -6rem;
  }
  .lg\:-ml-9,
  .lg\:-mx-9 {
    margin-left: -6rem;
  }
  .lg\:m-auto {
    margin: auto;
  }
  .lg\:mt-auto,
  .lg\:my-auto {
    margin-top: auto;
  }
  .lg\:mr-auto,
  .lg\:mx-auto {
    margin-right: auto;
  }
  .lg\:mb-auto,
  .lg\:my-auto {
    margin-bottom: auto;
  }
  .lg\:ml-auto,
  .lg\:mx-auto {
    margin-left: auto;
  }
}

@media (min-width: 1200px) {
  .xl\:m-0 {
    margin: 0;
  }
  .xl\:mt-0,
  .xl\:my-0 {
    margin-top: 0;
  }
  .xl\:mr-0,
  .xl\:mx-0 {
    margin-right: 0;
  }
  .xl\:mb-0,
  .xl\:my-0 {
    margin-bottom: 0;
  }
  .xl\:ml-0,
  .xl\:mx-0 {
    margin-left: 0;
  }
  .xl\:-m-0 {
    margin: 0;
  }
  .xl\:-mt-0,
  .xl\:-my-0 {
    margin-top: 0;
  }
  .xl\:-mr-0,
  .xl\:-mx-0 {
    margin-right: 0;
  }
  .xl\:-mb-0,
  .xl\:-my-0 {
    margin-bottom: 0;
  }
  .xl\:-ml-0,
  .xl\:-mx-0 {
    margin-left: 0;
  }
  .xl\:m-1 {
    margin: 0.25rem;
  }
  .xl\:mt-1,
  .xl\:my-1 {
    margin-top: 0.25rem;
  }
  .xl\:mr-1,
  .xl\:mx-1 {
    margin-right: 0.25rem;
  }
  .xl\:mb-1,
  .xl\:my-1 {
    margin-bottom: 0.25rem;
  }
  .xl\:ml-1,
  .xl\:mx-1 {
    margin-left: 0.25rem;
  }
  .xl\:-m-1 {
    margin: -0.25rem;
  }
  .xl\:-mt-1,
  .xl\:-my-1 {
    margin-top: -0.25rem;
  }
  .xl\:-mr-1,
  .xl\:-mx-1 {
    margin-right: -0.25rem;
  }
  .xl\:-mb-1,
  .xl\:-my-1 {
    margin-bottom: -0.25rem;
  }
  .xl\:-ml-1,
  .xl\:-mx-1 {
    margin-left: -0.25rem;
  }
  .xl\:m-2 {
    margin: 0.5rem;
  }
  .xl\:mt-2,
  .xl\:my-2 {
    margin-top: 0.5rem;
  }
  .xl\:mr-2,
  .xl\:mx-2 {
    margin-right: 0.5rem;
  }
  .xl\:mb-2,
  .xl\:my-2 {
    margin-bottom: 0.5rem;
  }
  .xl\:ml-2,
  .xl\:mx-2 {
    margin-left: 0.5rem;
  }
  .xl\:-m-2 {
    margin: -0.5rem;
  }
  .xl\:-mt-2,
  .xl\:-my-2 {
    margin-top: -0.5rem;
  }
  .xl\:-mr-2,
  .xl\:-mx-2 {
    margin-right: -0.5rem;
  }
  .xl\:-mb-2,
  .xl\:-my-2 {
    margin-bottom: -0.5rem;
  }
  .xl\:-ml-2,
  .xl\:-mx-2 {
    margin-left: -0.5rem;
  }
  .xl\:m-3 {
    margin: 0.75rem;
  }
  .xl\:mt-3,
  .xl\:my-3 {
    margin-top: 0.75rem;
  }
  .xl\:mr-3,
  .xl\:mx-3 {
    margin-right: 0.75rem;
  }
  .xl\:mb-3,
  .xl\:my-3 {
    margin-bottom: 0.75rem;
  }
  .xl\:ml-3,
  .xl\:mx-3 {
    margin-left: 0.75rem;
  }
  .xl\:-m-3 {
    margin: -0.75rem;
  }
  .xl\:-mt-3,
  .xl\:-my-3 {
    margin-top: -0.75rem;
  }
  .xl\:-mr-3,
  .xl\:-mx-3 {
    margin-right: -0.75rem;
  }
  .xl\:-mb-3,
  .xl\:-my-3 {
    margin-bottom: -0.75rem;
  }
  .xl\:-ml-3,
  .xl\:-mx-3 {
    margin-left: -0.75rem;
  }
  .xl\:m-4 {
    margin: 1rem;
  }
  .xl\:mt-4,
  .xl\:my-4 {
    margin-top: 1rem;
  }
  .xl\:mr-4,
  .xl\:mx-4 {
    margin-right: 1rem;
  }
  .xl\:mb-4,
  .xl\:my-4 {
    margin-bottom: 1rem;
  }
  .xl\:ml-4,
  .xl\:mx-4 {
    margin-left: 1rem;
  }
  .xl\:-m-4 {
    margin: -1rem;
  }
  .xl\:-mt-4,
  .xl\:-my-4 {
    margin-top: -1rem;
  }
  .xl\:-mr-4,
  .xl\:-mx-4 {
    margin-right: -1rem;
  }
  .xl\:-mb-4,
  .xl\:-my-4 {
    margin-bottom: -1rem;
  }
  .xl\:-ml-4,
  .xl\:-mx-4 {
    margin-left: -1rem;
  }
  .xl\:m-5 {
    margin: 1.5rem;
  }
  .xl\:mt-5,
  .xl\:my-5 {
    margin-top: 1.5rem;
  }
  .xl\:mr-5,
  .xl\:mx-5 {
    margin-right: 1.5rem;
  }
  .xl\:mb-5,
  .xl\:my-5 {
    margin-bottom: 1.5rem;
  }
  .xl\:ml-5,
  .xl\:mx-5 {
    margin-left: 1.5rem;
  }
  .xl\:-m-5 {
    margin: -1.5rem;
  }
  .xl\:-mt-5,
  .xl\:-my-5 {
    margin-top: -1.5rem;
  }
  .xl\:-mr-5,
  .xl\:-mx-5 {
    margin-right: -1.5rem;
  }
  .xl\:-mb-5,
  .xl\:-my-5 {
    margin-bottom: -1.5rem;
  }
  .xl\:-ml-5,
  .xl\:-mx-5 {
    margin-left: -1.5rem;
  }
  .xl\:m-6 {
    margin: 2rem;
  }
  .xl\:mt-6,
  .xl\:my-6 {
    margin-top: 2rem;
  }
  .xl\:mr-6,
  .xl\:mx-6 {
    margin-right: 2rem;
  }
  .xl\:mb-6,
  .xl\:my-6 {
    margin-bottom: 2rem;
  }
  .xl\:ml-6,
  .xl\:mx-6 {
    margin-left: 2rem;
  }
  .xl\:-m-6 {
    margin: -2rem;
  }
  .xl\:-mt-6,
  .xl\:-my-6 {
    margin-top: -2rem;
  }
  .xl\:-mr-6,
  .xl\:-mx-6 {
    margin-right: -2rem;
  }
  .xl\:-mb-6,
  .xl\:-my-6 {
    margin-bottom: -2rem;
  }
  .xl\:-ml-6,
  .xl\:-mx-6 {
    margin-left: -2rem;
  }
  .xl\:m-7 {
    margin: 3rem;
  }
  .xl\:mt-7,
  .xl\:my-7 {
    margin-top: 3rem;
  }
  .xl\:mr-7,
  .xl\:mx-7 {
    margin-right: 3rem;
  }
  .xl\:mb-7,
  .xl\:my-7 {
    margin-bottom: 3rem;
  }
  .xl\:ml-7,
  .xl\:mx-7 {
    margin-left: 3rem;
  }
  .xl\:-m-7 {
    margin: -3rem;
  }
  .xl\:-mt-7,
  .xl\:-my-7 {
    margin-top: -3rem;
  }
  .xl\:-mr-7,
  .xl\:-mx-7 {
    margin-right: -3rem;
  }
  .xl\:-mb-7,
  .xl\:-my-7 {
    margin-bottom: -3rem;
  }
  .xl\:-ml-7,
  .xl\:-mx-7 {
    margin-left: -3rem;
  }
  .xl\:m-8 {
    margin: 4rem;
  }
  .xl\:mt-8,
  .xl\:my-8 {
    margin-top: 4rem;
  }
  .xl\:mr-8,
  .xl\:mx-8 {
    margin-right: 4rem;
  }
  .xl\:mb-8,
  .xl\:my-8 {
    margin-bottom: 4rem;
  }
  .xl\:ml-8,
  .xl\:mx-8 {
    margin-left: 4rem;
  }
  .xl\:-m-8 {
    margin: -4rem;
  }
  .xl\:-mt-8,
  .xl\:-my-8 {
    margin-top: -4rem;
  }
  .xl\:-mr-8,
  .xl\:-mx-8 {
    margin-right: -4rem;
  }
  .xl\:-mb-8,
  .xl\:-my-8 {
    margin-bottom: -4rem;
  }
  .xl\:-ml-8,
  .xl\:-mx-8 {
    margin-left: -4rem;
  }
  .xl\:m-9 {
    margin: 6rem;
  }
  .xl\:mt-9,
  .xl\:my-9 {
    margin-top: 6rem;
  }
  .xl\:mr-9,
  .xl\:mx-9 {
    margin-right: 6rem;
  }
  .xl\:mb-9,
  .xl\:my-9 {
    margin-bottom: 6rem;
  }
  .xl\:ml-9,
  .xl\:mx-9 {
    margin-left: 6rem;
  }
  .xl\:-m-9 {
    margin: -6rem;
  }
  .xl\:-mt-9,
  .xl\:-my-9 {
    margin-top: -6rem;
  }
  .xl\:-mr-9,
  .xl\:-mx-9 {
    margin-right: -6rem;
  }
  .xl\:-mb-9,
  .xl\:-my-9 {
    margin-bottom: -6rem;
  }
  .xl\:-ml-9,
  .xl\:-mx-9 {
    margin-left: -6rem;
  }
  .xl\:m-auto {
    margin: auto;
  }
  .xl\:mt-auto,
  .xl\:my-auto {
    margin-top: auto;
  }
  .xl\:mr-auto,
  .xl\:mx-auto {
    margin-right: auto;
  }
  .xl\:mb-auto,
  .xl\:my-auto {
    margin-bottom: auto;
  }
  .xl\:ml-auto,
  .xl\:mx-auto {
    margin-left: auto;
  }
}

.p-0 {
  padding: 0;
}

.pt-0,
.py-0 {
  padding-top: 0;
}

.pr-0,
.px-0 {
  padding-right: 0;
}

.pb-0,
.py-0 {
  padding-bottom: 0;
}

.pl-0,
.px-0 {
  padding-left: 0;
}

.p-1 {
  padding: 0.25rem;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.pt-3,
.py-3 {
  padding-top: 0.75rem;
}

.pr-3,
.px-3 {
  padding-right: 0.75rem;
}

.pb-3,
.py-3 {
  padding-bottom: 0.75rem;
}

.pl-3,
.px-3 {
  padding-left: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.pt-4,
.py-4 {
  padding-top: 1rem;
}

.pr-4,
.px-4 {
  padding-right: 1rem;
}

.pb-4,
.py-4 {
  padding-bottom: 1rem;
}

.pl-4,
.px-4 {
  padding-left: 1rem;
}

.p-5 {
  padding: 1.5rem;
}

.pt-5,
.py-5 {
  padding-top: 1.5rem;
}

.pr-5,
.px-5 {
  padding-right: 1.5rem;
}

.pb-5,
.py-5 {
  padding-bottom: 1.5rem;
}

.pl-5,
.px-5 {
  padding-left: 1.5rem;
}

.p-6 {
  padding: 2rem;
}

.pt-6,
.py-6 {
  padding-top: 2rem;
}

.pr-6,
.px-6 {
  padding-right: 2rem;
}

.pb-6,
.py-6 {
  padding-bottom: 2rem;
}

.pl-6,
.px-6 {
  padding-left: 2rem;
}

.p-7 {
  padding: 3rem;
}

.pt-7,
.py-7 {
  padding-top: 3rem;
}

.pr-7,
.px-7 {
  padding-right: 3rem;
}

.pb-7,
.py-7 {
  padding-bottom: 3rem;
}

.pl-7,
.px-7 {
  padding-left: 3rem;
}

.p-8 {
  padding: 4rem;
}

.pt-8,
.py-8 {
  padding-top: 4rem;
}

.pr-8,
.px-8 {
  padding-right: 4rem;
}

.pb-8,
.py-8 {
  padding-bottom: 4rem;
}

.pl-8,
.px-8 {
  padding-left: 4rem;
}

.p-9 {
  padding: 6rem;
}

.pt-9,
.py-9 {
  padding-top: 6rem;
}

.pr-9,
.px-9 {
  padding-right: 6rem;
}

.pb-9,
.py-9 {
  padding-bottom: 6rem;
}

.pl-9,
.px-9 {
  padding-left: 6rem;
}

@media (min-width: 576px) {
  .sm\:p-0 {
    padding: 0;
  }
  .sm\:pt-0,
  .sm\:py-0 {
    padding-top: 0;
  }
  .sm\:pr-0,
  .sm\:px-0 {
    padding-right: 0;
  }
  .sm\:pb-0,
  .sm\:py-0 {
    padding-bottom: 0;
  }
  .sm\:pl-0,
  .sm\:px-0 {
    padding-left: 0;
  }
  .sm\:p-1 {
    padding: 0.25rem;
  }
  .sm\:pt-1,
  .sm\:py-1 {
    padding-top: 0.25rem;
  }
  .sm\:pr-1,
  .sm\:px-1 {
    padding-right: 0.25rem;
  }
  .sm\:pb-1,
  .sm\:py-1 {
    padding-bottom: 0.25rem;
  }
  .sm\:pl-1,
  .sm\:px-1 {
    padding-left: 0.25rem;
  }
  .sm\:p-2 {
    padding: 0.5rem;
  }
  .sm\:pt-2,
  .sm\:py-2 {
    padding-top: 0.5rem;
  }
  .sm\:pr-2,
  .sm\:px-2 {
    padding-right: 0.5rem;
  }
  .sm\:pb-2,
  .sm\:py-2 {
    padding-bottom: 0.5rem;
  }
  .sm\:pl-2,
  .sm\:px-2 {
    padding-left: 0.5rem;
  }
  .sm\:p-3 {
    padding: 0.75rem;
  }
  .sm\:pt-3,
  .sm\:py-3 {
    padding-top: 0.75rem;
  }
  .sm\:pr-3,
  .sm\:px-3 {
    padding-right: 0.75rem;
  }
  .sm\:pb-3,
  .sm\:py-3 {
    padding-bottom: 0.75rem;
  }
  .sm\:pl-3,
  .sm\:px-3 {
    padding-left: 0.75rem;
  }
  .sm\:p-4 {
    padding: 1rem;
  }
  .sm\:pt-4,
  .sm\:py-4 {
    padding-top: 1rem;
  }
  .sm\:pr-4,
  .sm\:px-4 {
    padding-right: 1rem;
  }
  .sm\:pb-4,
  .sm\:py-4 {
    padding-bottom: 1rem;
  }
  .sm\:pl-4,
  .sm\:px-4 {
    padding-left: 1rem;
  }
  .sm\:p-5 {
    padding: 1.5rem;
  }
  .sm\:pt-5,
  .sm\:py-5 {
    padding-top: 1.5rem;
  }
  .sm\:pr-5,
  .sm\:px-5 {
    padding-right: 1.5rem;
  }
  .sm\:pb-5,
  .sm\:py-5 {
    padding-bottom: 1.5rem;
  }
  .sm\:pl-5,
  .sm\:px-5 {
    padding-left: 1.5rem;
  }
  .sm\:p-6 {
    padding: 2rem;
  }
  .sm\:pt-6,
  .sm\:py-6 {
    padding-top: 2rem;
  }
  .sm\:pr-6,
  .sm\:px-6 {
    padding-right: 2rem;
  }
  .sm\:pb-6,
  .sm\:py-6 {
    padding-bottom: 2rem;
  }
  .sm\:pl-6,
  .sm\:px-6 {
    padding-left: 2rem;
  }
  .sm\:p-7 {
    padding: 3rem;
  }
  .sm\:pt-7,
  .sm\:py-7 {
    padding-top: 3rem;
  }
  .sm\:pr-7,
  .sm\:px-7 {
    padding-right: 3rem;
  }
  .sm\:pb-7,
  .sm\:py-7 {
    padding-bottom: 3rem;
  }
  .sm\:pl-7,
  .sm\:px-7 {
    padding-left: 3rem;
  }
  .sm\:p-8 {
    padding: 4rem;
  }
  .sm\:pt-8,
  .sm\:py-8 {
    padding-top: 4rem;
  }
  .sm\:pr-8,
  .sm\:px-8 {
    padding-right: 4rem;
  }
  .sm\:pb-8,
  .sm\:py-8 {
    padding-bottom: 4rem;
  }
  .sm\:pl-8,
  .sm\:px-8 {
    padding-left: 4rem;
  }
  .sm\:p-9 {
    padding: 6rem;
  }
  .sm\:pt-9,
  .sm\:py-9 {
    padding-top: 6rem;
  }
  .sm\:pr-9,
  .sm\:px-9 {
    padding-right: 6rem;
  }
  .sm\:pb-9,
  .sm\:py-9 {
    padding-bottom: 6rem;
  }
  .sm\:pl-9,
  .sm\:px-9 {
    padding-left: 6rem;
  }
}

@media (min-width: 768px) {
  .md\:p-0 {
    padding: 0;
  }
  .md\:pt-0,
  .md\:py-0 {
    padding-top: 0;
  }
  .md\:pr-0,
  .md\:px-0 {
    padding-right: 0;
  }
  .md\:pb-0,
  .md\:py-0 {
    padding-bottom: 0;
  }
  .md\:pl-0,
  .md\:px-0 {
    padding-left: 0;
  }
  .md\:p-1 {
    padding: 0.25rem;
  }
  .md\:pt-1,
  .md\:py-1 {
    padding-top: 0.25rem;
  }
  .md\:pr-1,
  .md\:px-1 {
    padding-right: 0.25rem;
  }
  .md\:pb-1,
  .md\:py-1 {
    padding-bottom: 0.25rem;
  }
  .md\:pl-1,
  .md\:px-1 {
    padding-left: 0.25rem;
  }
  .md\:p-2 {
    padding: 0.5rem;
  }
  .md\:pt-2,
  .md\:py-2 {
    padding-top: 0.5rem;
  }
  .md\:pr-2,
  .md\:px-2 {
    padding-right: 0.5rem;
  }
  .md\:pb-2,
  .md\:py-2 {
    padding-bottom: 0.5rem;
  }
  .md\:pl-2,
  .md\:px-2 {
    padding-left: 0.5rem;
  }
  .md\:p-3 {
    padding: 0.75rem;
  }
  .md\:pt-3,
  .md\:py-3 {
    padding-top: 0.75rem;
  }
  .md\:pr-3,
  .md\:px-3 {
    padding-right: 0.75rem;
  }
  .md\:pb-3,
  .md\:py-3 {
    padding-bottom: 0.75rem;
  }
  .md\:pl-3,
  .md\:px-3 {
    padding-left: 0.75rem;
  }
  .md\:p-4 {
    padding: 1rem;
  }
  .md\:pt-4,
  .md\:py-4 {
    padding-top: 1rem;
  }
  .md\:pr-4,
  .md\:px-4 {
    padding-right: 1rem;
  }
  .md\:pb-4,
  .md\:py-4 {
    padding-bottom: 1rem;
  }
  .md\:pl-4,
  .md\:px-4 {
    padding-left: 1rem;
  }
  .md\:p-5 {
    padding: 1.5rem;
  }
  .md\:pt-5,
  .md\:py-5 {
    padding-top: 1.5rem;
  }
  .md\:pr-5,
  .md\:px-5 {
    padding-right: 1.5rem;
  }
  .md\:pb-5,
  .md\:py-5 {
    padding-bottom: 1.5rem;
  }
  .md\:pl-5,
  .md\:px-5 {
    padding-left: 1.5rem;
  }
  .md\:p-6 {
    padding: 2rem;
  }
  .md\:pt-6,
  .md\:py-6 {
    padding-top: 2rem;
  }
  .md\:pr-6,
  .md\:px-6 {
    padding-right: 2rem;
  }
  .md\:pb-6,
  .md\:py-6 {
    padding-bottom: 2rem;
  }
  .md\:pl-6,
  .md\:px-6 {
    padding-left: 2rem;
  }
  .md\:p-7 {
    padding: 3rem;
  }
  .md\:pt-7,
  .md\:py-7 {
    padding-top: 3rem;
  }
  .md\:pr-7,
  .md\:px-7 {
    padding-right: 3rem;
  }
  .md\:pb-7,
  .md\:py-7 {
    padding-bottom: 3rem;
  }
  .md\:pl-7,
  .md\:px-7 {
    padding-left: 3rem;
  }
  .md\:p-8 {
    padding: 4rem;
  }
  .md\:pt-8,
  .md\:py-8 {
    padding-top: 4rem;
  }
  .md\:pr-8,
  .md\:px-8 {
    padding-right: 4rem;
  }
  .md\:pb-8,
  .md\:py-8 {
    padding-bottom: 4rem;
  }
  .md\:pl-8,
  .md\:px-8 {
    padding-left: 4rem;
  }
  .md\:p-9 {
    padding: 6rem;
  }
  .md\:pt-9,
  .md\:py-9 {
    padding-top: 6rem;
  }
  .md\:pr-9,
  .md\:px-9 {
    padding-right: 6rem;
  }
  .md\:pb-9,
  .md\:py-9 {
    padding-bottom: 6rem;
  }
  .md\:pl-9,
  .md\:px-9 {
    padding-left: 6rem;
  }
}

@media (min-width: 992px) {
  .lg\:p-0 {
    padding: 0;
  }
  .lg\:pt-0,
  .lg\:py-0 {
    padding-top: 0;
  }
  .lg\:pr-0,
  .lg\:px-0 {
    padding-right: 0;
  }
  .lg\:pb-0,
  .lg\:py-0 {
    padding-bottom: 0;
  }
  .lg\:pl-0,
  .lg\:px-0 {
    padding-left: 0;
  }
  .lg\:p-1 {
    padding: 0.25rem;
  }
  .lg\:pt-1,
  .lg\:py-1 {
    padding-top: 0.25rem;
  }
  .lg\:pr-1,
  .lg\:px-1 {
    padding-right: 0.25rem;
  }
  .lg\:pb-1,
  .lg\:py-1 {
    padding-bottom: 0.25rem;
  }
  .lg\:pl-1,
  .lg\:px-1 {
    padding-left: 0.25rem;
  }
  .lg\:p-2 {
    padding: 0.5rem;
  }
  .lg\:pt-2,
  .lg\:py-2 {
    padding-top: 0.5rem;
  }
  .lg\:pr-2,
  .lg\:px-2 {
    padding-right: 0.5rem;
  }
  .lg\:pb-2,
  .lg\:py-2 {
    padding-bottom: 0.5rem;
  }
  .lg\:pl-2,
  .lg\:px-2 {
    padding-left: 0.5rem;
  }
  .lg\:p-3 {
    padding: 0.75rem;
  }
  .lg\:pt-3,
  .lg\:py-3 {
    padding-top: 0.75rem;
  }
  .lg\:pr-3,
  .lg\:px-3 {
    padding-right: 0.75rem;
  }
  .lg\:pb-3,
  .lg\:py-3 {
    padding-bottom: 0.75rem;
  }
  .lg\:pl-3,
  .lg\:px-3 {
    padding-left: 0.75rem;
  }
  .lg\:p-4 {
    padding: 1rem;
  }
  .lg\:pt-4,
  .lg\:py-4 {
    padding-top: 1rem;
  }
  .lg\:pr-4,
  .lg\:px-4 {
    padding-right: 1rem;
  }
  .lg\:pb-4,
  .lg\:py-4 {
    padding-bottom: 1rem;
  }
  .lg\:pl-4,
  .lg\:px-4 {
    padding-left: 1rem;
  }
  .lg\:p-5 {
    padding: 1.5rem;
  }
  .lg\:pt-5,
  .lg\:py-5 {
    padding-top: 1.5rem;
  }
  .lg\:pr-5,
  .lg\:px-5 {
    padding-right: 1.5rem;
  }
  .lg\:pb-5,
  .lg\:py-5 {
    padding-bottom: 1.5rem;
  }
  .lg\:pl-5,
  .lg\:px-5 {
    padding-left: 1.5rem;
  }
  .lg\:p-6 {
    padding: 2rem;
  }
  .lg\:pt-6,
  .lg\:py-6 {
    padding-top: 2rem;
  }
  .lg\:pr-6,
  .lg\:px-6 {
    padding-right: 2rem;
  }
  .lg\:pb-6,
  .lg\:py-6 {
    padding-bottom: 2rem;
  }
  .lg\:pl-6,
  .lg\:px-6 {
    padding-left: 2rem;
  }
  .lg\:p-7 {
    padding: 3rem;
  }
  .lg\:pt-7,
  .lg\:py-7 {
    padding-top: 3rem;
  }
  .lg\:pr-7,
  .lg\:px-7 {
    padding-right: 3rem;
  }
  .lg\:pb-7,
  .lg\:py-7 {
    padding-bottom: 3rem;
  }
  .lg\:pl-7,
  .lg\:px-7 {
    padding-left: 3rem;
  }
  .lg\:p-8 {
    padding: 4rem;
  }
  .lg\:pt-8,
  .lg\:py-8 {
    padding-top: 4rem;
  }
  .lg\:pr-8,
  .lg\:px-8 {
    padding-right: 4rem;
  }
  .lg\:pb-8,
  .lg\:py-8 {
    padding-bottom: 4rem;
  }
  .lg\:pl-8,
  .lg\:px-8 {
    padding-left: 4rem;
  }
  .lg\:p-9 {
    padding: 6rem;
  }
  .lg\:pt-9,
  .lg\:py-9 {
    padding-top: 6rem;
  }
  .lg\:pr-9,
  .lg\:px-9 {
    padding-right: 6rem;
  }
  .lg\:pb-9,
  .lg\:py-9 {
    padding-bottom: 6rem;
  }
  .lg\:pl-9,
  .lg\:px-9 {
    padding-left: 6rem;
  }
}

@media (min-width: 1200px) {
  .xl\:p-0 {
    padding: 0;
  }
  .xl\:pt-0,
  .xl\:py-0 {
    padding-top: 0;
  }
  .xl\:pr-0,
  .xl\:px-0 {
    padding-right: 0;
  }
  .xl\:pb-0,
  .xl\:py-0 {
    padding-bottom: 0;
  }
  .xl\:pl-0,
  .xl\:px-0 {
    padding-left: 0;
  }
  .xl\:p-1 {
    padding: 0.25rem;
  }
  .xl\:pt-1,
  .xl\:py-1 {
    padding-top: 0.25rem;
  }
  .xl\:pr-1,
  .xl\:px-1 {
    padding-right: 0.25rem;
  }
  .xl\:pb-1,
  .xl\:py-1 {
    padding-bottom: 0.25rem;
  }
  .xl\:pl-1,
  .xl\:px-1 {
    padding-left: 0.25rem;
  }
  .xl\:p-2 {
    padding: 0.5rem;
  }
  .xl\:pt-2,
  .xl\:py-2 {
    padding-top: 0.5rem;
  }
  .xl\:pr-2,
  .xl\:px-2 {
    padding-right: 0.5rem;
  }
  .xl\:pb-2,
  .xl\:py-2 {
    padding-bottom: 0.5rem;
  }
  .xl\:pl-2,
  .xl\:px-2 {
    padding-left: 0.5rem;
  }
  .xl\:p-3 {
    padding: 0.75rem;
  }
  .xl\:pt-3,
  .xl\:py-3 {
    padding-top: 0.75rem;
  }
  .xl\:pr-3,
  .xl\:px-3 {
    padding-right: 0.75rem;
  }
  .xl\:pb-3,
  .xl\:py-3 {
    padding-bottom: 0.75rem;
  }
  .xl\:pl-3,
  .xl\:px-3 {
    padding-left: 0.75rem;
  }
  .xl\:p-4 {
    padding: 1rem;
  }
  .xl\:pt-4,
  .xl\:py-4 {
    padding-top: 1rem;
  }
  .xl\:pr-4,
  .xl\:px-4 {
    padding-right: 1rem;
  }
  .xl\:pb-4,
  .xl\:py-4 {
    padding-bottom: 1rem;
  }
  .xl\:pl-4,
  .xl\:px-4 {
    padding-left: 1rem;
  }
  .xl\:p-5 {
    padding: 1.5rem;
  }
  .xl\:pt-5,
  .xl\:py-5 {
    padding-top: 1.5rem;
  }
  .xl\:pr-5,
  .xl\:px-5 {
    padding-right: 1.5rem;
  }
  .xl\:pb-5,
  .xl\:py-5 {
    padding-bottom: 1.5rem;
  }
  .xl\:pl-5,
  .xl\:px-5 {
    padding-left: 1.5rem;
  }
  .xl\:p-6 {
    padding: 2rem;
  }
  .xl\:pt-6,
  .xl\:py-6 {
    padding-top: 2rem;
  }
  .xl\:pr-6,
  .xl\:px-6 {
    padding-right: 2rem;
  }
  .xl\:pb-6,
  .xl\:py-6 {
    padding-bottom: 2rem;
  }
  .xl\:pl-6,
  .xl\:px-6 {
    padding-left: 2rem;
  }
  .xl\:p-7 {
    padding: 3rem;
  }
  .xl\:pt-7,
  .xl\:py-7 {
    padding-top: 3rem;
  }
  .xl\:pr-7,
  .xl\:px-7 {
    padding-right: 3rem;
  }
  .xl\:pb-7,
  .xl\:py-7 {
    padding-bottom: 3rem;
  }
  .xl\:pl-7,
  .xl\:px-7 {
    padding-left: 3rem;
  }
  .xl\:p-8 {
    padding: 4rem;
  }
  .xl\:pt-8,
  .xl\:py-8 {
    padding-top: 4rem;
  }
  .xl\:pr-8,
  .xl\:px-8 {
    padding-right: 4rem;
  }
  .xl\:pb-8,
  .xl\:py-8 {
    padding-bottom: 4rem;
  }
  .xl\:pl-8,
  .xl\:px-8 {
    padding-left: 4rem;
  }
  .xl\:p-9 {
    padding: 6rem;
  }
  .xl\:pt-9,
  .xl\:py-9 {
    padding-top: 6rem;
  }
  .xl\:pr-9,
  .xl\:px-9 {
    padding-right: 6rem;
  }
  .xl\:pb-9,
  .xl\:py-9 {
    padding-bottom: 6rem;
  }
  .xl\:pl-9,
  .xl\:px-9 {
    padding-left: 6rem;
  }
}

.h-0 {
  height: 0;
}

.h-1 {
  height: 0.25rem;
}

.h-2 {
  height: 0.5rem;
}

.h-3 {
  height: 0.75rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.5rem;
}

.h-6 {
  height: 2rem;
}

.h-7 {
  height: 3rem;
}

.h-8 {
  height: 4rem;
}

.h-9 {
  height: 6rem;
}

.h-px {
  height: 1px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

@media (min-width: 576px) {
  .sm\:h-0 {
    height: 0;
  }
  .sm\:h-1 {
    height: 0.25rem;
  }
  .sm\:h-2 {
    height: 0.5rem;
  }
  .sm\:h-3 {
    height: 0.75rem;
  }
  .sm\:h-4 {
    height: 1rem;
  }
  .sm\:h-5 {
    height: 1.5rem;
  }
  .sm\:h-6 {
    height: 2rem;
  }
  .sm\:h-7 {
    height: 3rem;
  }
  .sm\:h-8 {
    height: 4rem;
  }
  .sm\:h-9 {
    height: 6rem;
  }
  .sm\:h-px {
    height: 1px;
  }
  .sm\:h-auto {
    height: auto;
  }
  .sm\:h-full {
    height: 100%;
  }
  .sm\:h-screen {
    height: 100vh;
  }
}

@media (min-width: 768px) {
  .md\:h-0 {
    height: 0;
  }
  .md\:h-1 {
    height: 0.25rem;
  }
  .md\:h-2 {
    height: 0.5rem;
  }
  .md\:h-3 {
    height: 0.75rem;
  }
  .md\:h-4 {
    height: 1rem;
  }
  .md\:h-5 {
    height: 1.5rem;
  }
  .md\:h-6 {
    height: 2rem;
  }
  .md\:h-7 {
    height: 3rem;
  }
  .md\:h-8 {
    height: 4rem;
  }
  .md\:h-9 {
    height: 6rem;
  }
  .md\:h-px {
    height: 1px;
  }
  .md\:h-auto {
    height: auto;
  }
  .md\:h-full {
    height: 100%;
  }
  .md\:h-screen {
    height: 100vh;
  }
}

@media (min-width: 992px) {
  .lg\:h-0 {
    height: 0;
  }
  .lg\:h-1 {
    height: 0.25rem;
  }
  .lg\:h-2 {
    height: 0.5rem;
  }
  .lg\:h-3 {
    height: 0.75rem;
  }
  .lg\:h-4 {
    height: 1rem;
  }
  .lg\:h-5 {
    height: 1.5rem;
  }
  .lg\:h-6 {
    height: 2rem;
  }
  .lg\:h-7 {
    height: 3rem;
  }
  .lg\:h-8 {
    height: 4rem;
  }
  .lg\:h-9 {
    height: 6rem;
  }
  .lg\:h-px {
    height: 1px;
  }
  .lg\:h-auto {
    height: auto;
  }
  .lg\:h-full {
    height: 100%;
  }
  .lg\:h-screen {
    height: 100vh;
  }
}

@media (min-width: 1200px) {
  .xl\:h-0 {
    height: 0;
  }
  .xl\:h-1 {
    height: 0.25rem;
  }
  .xl\:h-2 {
    height: 0.5rem;
  }
  .xl\:h-3 {
    height: 0.75rem;
  }
  .xl\:h-4 {
    height: 1rem;
  }
  .xl\:h-5 {
    height: 1.5rem;
  }
  .xl\:h-6 {
    height: 2rem;
  }
  .xl\:h-7 {
    height: 3rem;
  }
  .xl\:h-8 {
    height: 4rem;
  }
  .xl\:h-9 {
    height: 6rem;
  }
  .xl\:h-px {
    height: 1px;
  }
  .xl\:h-auto {
    height: auto;
  }
  .xl\:h-full {
    height: 100%;
  }
  .xl\:h-screen {
    height: 100vh;
  }
}

.max-h-0 {
  max-height: 0;
}

.max-h-full {
  max-height: 100%;
}

.max-h-screen {
  max-height: 100vh;
}

.min-h-0 {
  min-height: 0;
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.w-0 {
  width: 0;
}

.w-1 {
  width: 0.25rem;
}

.w-2 {
  width: 0.5rem;
}

.w-3 {
  width: 0.75rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.5rem;
}

.w-6 {
  width: 2rem;
}

.w-7 {
  width: 3rem;
}

.w-8 {
  width: 4rem;
}

.w-9 {
  width: 6rem;
}

.w-px {
  width: 1px;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

@media (min-width: 576px) {
  .sm\:w-0 {
    width: 0;
  }
  .sm\:w-1 {
    width: 0.25rem;
  }
  .sm\:w-2 {
    width: 0.5rem;
  }
  .sm\:w-3 {
    width: 0.75rem;
  }
  .sm\:w-4 {
    width: 1rem;
  }
  .sm\:w-5 {
    width: 1.5rem;
  }
  .sm\:w-6 {
    width: 2rem;
  }
  .sm\:w-7 {
    width: 3rem;
  }
  .sm\:w-8 {
    width: 4rem;
  }
  .sm\:w-9 {
    width: 6rem;
  }
  .sm\:w-px {
    width: 1px;
  }
  .sm\:w-auto {
    width: auto;
  }
  .sm\:w-full {
    width: 100%;
  }
  .sm\:w-screen {
    width: 100vw;
  }
}

@media (min-width: 768px) {
  .md\:w-0 {
    width: 0;
  }
  .md\:w-1 {
    width: 0.25rem;
  }
  .md\:w-2 {
    width: 0.5rem;
  }
  .md\:w-3 {
    width: 0.75rem;
  }
  .md\:w-4 {
    width: 1rem;
  }
  .md\:w-5 {
    width: 1.5rem;
  }
  .md\:w-6 {
    width: 2rem;
  }
  .md\:w-7 {
    width: 3rem;
  }
  .md\:w-8 {
    width: 4rem;
  }
  .md\:w-9 {
    width: 6rem;
  }
  .md\:w-px {
    width: 1px;
  }
  .md\:w-auto {
    width: auto;
  }
  .md\:w-full {
    width: 100%;
  }
  .md\:w-screen {
    width: 100vw;
  }
}

@media (min-width: 992px) {
  .lg\:w-0 {
    width: 0;
  }
  .lg\:w-1 {
    width: 0.25rem;
  }
  .lg\:w-2 {
    width: 0.5rem;
  }
  .lg\:w-3 {
    width: 0.75rem;
  }
  .lg\:w-4 {
    width: 1rem;
  }
  .lg\:w-5 {
    width: 1.5rem;
  }
  .lg\:w-6 {
    width: 2rem;
  }
  .lg\:w-7 {
    width: 3rem;
  }
  .lg\:w-8 {
    width: 4rem;
  }
  .lg\:w-9 {
    width: 6rem;
  }
  .lg\:w-px {
    width: 1px;
  }
  .lg\:w-auto {
    width: auto;
  }
  .lg\:w-full {
    width: 100%;
  }
  .lg\:w-screen {
    width: 100vw;
  }
}

@media (min-width: 1200px) {
  .xl\:w-0 {
    width: 0;
  }
  .xl\:w-1 {
    width: 0.25rem;
  }
  .xl\:w-2 {
    width: 0.5rem;
  }
  .xl\:w-3 {
    width: 0.75rem;
  }
  .xl\:w-4 {
    width: 1rem;
  }
  .xl\:w-5 {
    width: 1.5rem;
  }
  .xl\:w-6 {
    width: 2rem;
  }
  .xl\:w-7 {
    width: 3rem;
  }
  .xl\:w-8 {
    width: 4rem;
  }
  .xl\:w-9 {
    width: 6rem;
  }
  .xl\:w-px {
    width: 1px;
  }
  .xl\:w-auto {
    width: auto;
  }
  .xl\:w-full {
    width: 100%;
  }
  .xl\:w-screen {
    width: 100vw;
  }
}

.max-w-9 {
  max-width: 6rem;
}

.max-w-10 {
  max-width: 8rem;
}

.max-w-11 {
  max-width: 12rem;
}

.max-w-12 {
  max-width: 16rem;
}

.max-w-13 {
  max-width: 20rem;
}

.max-w-sm {
  max-width: 576px;
}

.max-w-md {
  max-width: 768px;
}

.max-w-lg {
  max-width: 992px;
}

.max-w-xl {
  max-width: 1200px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-screen {
  max-width: 100vw;
}

.max-w-none {
  max-width: none;
}

@media (min-width: 576px) {
  .sm\:max-w-9 {
    max-width: 6rem;
  }
  .sm\:max-w-10 {
    max-width: 8rem;
  }
  .sm\:max-w-11 {
    max-width: 12rem;
  }
  .sm\:max-w-12 {
    max-width: 16rem;
  }
  .sm\:max-w-13 {
    max-width: 20rem;
  }
  .sm\:max-w-sm {
    max-width: 576px;
  }
  .sm\:max-w-md {
    max-width: 768px;
  }
  .sm\:max-w-lg {
    max-width: 992px;
  }
  .sm\:max-w-xl {
    max-width: 1200px;
  }
  .sm\:max-w-full {
    max-width: 100%;
  }
  .sm\:max-w-screen {
    max-width: 100vw;
  }
  .sm\:max-w-none {
    max-width: none;
  }
}

@media (min-width: 768px) {
  .md\:max-w-9 {
    max-width: 6rem;
  }
  .md\:max-w-10 {
    max-width: 8rem;
  }
  .md\:max-w-11 {
    max-width: 12rem;
  }
  .md\:max-w-12 {
    max-width: 16rem;
  }
  .md\:max-w-13 {
    max-width: 20rem;
  }
  .md\:max-w-sm {
    max-width: 576px;
  }
  .md\:max-w-md {
    max-width: 768px;
  }
  .md\:max-w-lg {
    max-width: 992px;
  }
  .md\:max-w-xl {
    max-width: 1200px;
  }
  .md\:max-w-full {
    max-width: 100%;
  }
  .md\:max-w-screen {
    max-width: 100vw;
  }
  .md\:max-w-none {
    max-width: none;
  }
}

@media (min-width: 992px) {
  .lg\:max-w-9 {
    max-width: 6rem;
  }
  .lg\:max-w-10 {
    max-width: 8rem;
  }
  .lg\:max-w-11 {
    max-width: 12rem;
  }
  .lg\:max-w-12 {
    max-width: 16rem;
  }
  .lg\:max-w-13 {
    max-width: 20rem;
  }
  .lg\:max-w-sm {
    max-width: 576px;
  }
  .lg\:max-w-md {
    max-width: 768px;
  }
  .lg\:max-w-lg {
    max-width: 992px;
  }
  .lg\:max-w-xl {
    max-width: 1200px;
  }
  .lg\:max-w-full {
    max-width: 100%;
  }
  .lg\:max-w-screen {
    max-width: 100vw;
  }
  .lg\:max-w-none {
    max-width: none;
  }
}

@media (min-width: 1200px) {
  .xl\:max-w-9 {
    max-width: 6rem;
  }
  .xl\:max-w-10 {
    max-width: 8rem;
  }
  .xl\:max-w-11 {
    max-width: 12rem;
  }
  .xl\:max-w-12 {
    max-width: 16rem;
  }
  .xl\:max-w-13 {
    max-width: 20rem;
  }
  .xl\:max-w-sm {
    max-width: 576px;
  }
  .xl\:max-w-md {
    max-width: 768px;
  }
  .xl\:max-w-lg {
    max-width: 992px;
  }
  .xl\:max-w-xl {
    max-width: 1200px;
  }
  .xl\:max-w-full {
    max-width: 100%;
  }
  .xl\:max-w-screen {
    max-width: 100vw;
  }
  .xl\:max-w-none {
    max-width: none;
  }
}

.min-w-0 {
  min-width: 0;
}

.min-w-50 {
  min-width: 50%;
}

.min-w-dropdown {
  min-width: 170px;
}

.min-w-full {
  min-width: 100%;
}

.min-w-screen {
  min-width: 100vw;
}

@media (min-width: 576px) {
  .sm\:min-w-0 {
    min-width: 0;
  }
  .sm\:min-w-50 {
    min-width: 50%;
  }
  .sm\:min-w-dropdown {
    min-width: 170px;
  }
  .sm\:min-w-full {
    min-width: 100%;
  }
  .sm\:min-w-screen {
    min-width: 100vw;
  }
}

@media (min-width: 768px) {
  .md\:min-w-0 {
    min-width: 0;
  }
  .md\:min-w-50 {
    min-width: 50%;
  }
  .md\:min-w-dropdown {
    min-width: 170px;
  }
  .md\:min-w-full {
    min-width: 100%;
  }
  .md\:min-w-screen {
    min-width: 100vw;
  }
}

@media (min-width: 992px) {
  .lg\:min-w-0 {
    min-width: 0;
  }
  .lg\:min-w-50 {
    min-width: 50%;
  }
  .lg\:min-w-dropdown {
    min-width: 170px;
  }
  .lg\:min-w-full {
    min-width: 100%;
  }
  .lg\:min-w-screen {
    min-width: 100vw;
  }
}

@media (min-width: 1200px) {
  .xl\:min-w-0 {
    min-width: 0;
  }
  .xl\:min-w-50 {
    min-width: 50%;
  }
  .xl\:min-w-dropdown {
    min-width: 170px;
  }
  .xl\:min-w-full {
    min-width: 100%;
  }
  .xl\:min-w-screen {
    min-width: 100vw;
  }
}

.border-collapse {
  border-collapse: collapse;
}

.border-separate {
  border-collapse: separate;
}

.table-auto {
  table-layout: auto;
}

.table-fixed {
  table-layout: fixed;
}

.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.shadow-xs {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.shadow-sm {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-md {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-lg {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.shadow-outline {
  box-shadow: 0 0 0 2px $color_outline;
}

.shadow-solid {
  box-shadow: 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.5);
}

.shadow-none {
  box-shadow: none;
}

.shadow-bottom {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
}

.hover\:shadow:hover {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.hover\:shadow-xs:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.hover\:shadow-sm:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.hover\:shadow-md:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hover\:shadow-lg:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hover\:shadow-xl:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.hover\:shadow-inner:hover {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.hover\:shadow-outline:hover {
  box-shadow: 0 0 0 2px $color_outline;
}

.hover\:shadow-solid:hover {
  box-shadow: 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.5);
}

.hover\:shadow-none:hover {
  box-shadow: none;
}

@media (min-width: 576px) {
  .sm\:shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .sm\:shadow-xs {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  .sm\:shadow-sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .sm\:shadow-md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .sm\:shadow-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .sm\:shadow-xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  .sm\:shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  }
  .sm\:shadow-outline {
    box-shadow: 0 0 0 2px $color_outline;
  }
  .sm\:shadow-solid {
    box-shadow: 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.5);
  }
  .sm\:shadow-none {
    box-shadow: none;
  }
}

@media (min-width: 768px) {
  .md\:shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .md\:shadow-xs {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  .md\:shadow-sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .md\:shadow-md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .md\:shadow-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .md\:shadow-xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  .md\:shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  }
  .md\:shadow-outline {
    box-shadow: 0 0 0 2px $color_outline;
  }
  .md\:shadow-solid {
    box-shadow: 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.5);
  }
  .md\:shadow-none {
    box-shadow: none;
  }
}

@media (min-width: 992px) {
  .lg\:shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .lg\:shadow-xs {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  .lg\:shadow-sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .lg\:shadow-md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .lg\:shadow-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .lg\:shadow-xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  .lg\:shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  }
  .lg\:shadow-outline {
    box-shadow: 0 0 0 2px $color_outline;
  }
  .lg\:shadow-solid {
    box-shadow: 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.5);
  }
  .lg\:shadow-none {
    box-shadow: none;
  }
}

@media (min-width: 1200px) {
  .xl\:shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .xl\:shadow-xs {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  .xl\:shadow-sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .xl\:shadow-md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .xl\:shadow-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .xl\:shadow-xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  .xl\:shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  }
  .xl\:shadow-outline {
    box-shadow: 0 0 0 2px $color_outline;
  }
  .xl\:shadow-solid {
    box-shadow: 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.5);
  }
  .xl\:shadow-none {
    box-shadow: none;
  }
}

.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

.appearance-none {
  appearance: none;
}

.cursor-pointer {
  cursor: pointer;
}

.outline-none {
  outline: none;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.select-none {
  user-select: none;
}

.select-text {
  user-select: text;
}

.fill-current {
  fill: currentColor;
}

.stroke-current {
  stroke: currentColor;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  margin: 0;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  width: auto;
  height: auto;
}

.scale-95 {
  transform: scale(0.95);
}

.scale-100 {
  transform: scale(1);
}

.scale-105 {
  transform: scale(1.05);
}

.scale-110 {
  transform: scale(1.1);
}

.rotate-45 {
  transform: rotate(45deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

.translate-x-0 {
  transform: translateX(0);
}

.translate-x-full {
  transform: translateX(-100%);
}

.transition-slow {
  transition: 0.5s;
}

.transition {
  transition: 0.3s;
}

.transition-fast {
  transition: 0.15s;
}

.timing-bounce {
  transition-timing-function: cubic-bezier(0.77, 0, 0.2, 2.25);
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation: none !important;
    transition: none !important;
  }
}

.transition-none {
  transition-property: none;
}

.transition-all {
  transition-property: all;
}

.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
}

.transition-opacity {
  transition-property: opacity;
}

.transition-shadow {
  transition-property: box-shadow;
}

.transition-transform {
  transition-property: transform;
}

.timing-bounce {
  transition-timing-function: cubic-bezier(0.77, 0, 0.2, 2.25);
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation: none !important;
    transition: none !important;
  }
}

.transition-none {
  transition-duration: 0s;
}

.transition-slow {
  transition-duration: 0.5s;
}

.transition-medium {
  transition-duration: 0.3s;
}

.transition-fast {
  transition-duration: 0.15s;
}

.timing-bounce {
  transition-timing-function: cubic-bezier(0.77, 0, 0.2, 2.25);
}

.badge-white {
  color: #2D2C2C;
  background-color: #fff;
}

a.badge-white:focus, a.badge-white:hover {
  color: #2D2C2C;
  background-color: #e6e6e6;
}

a.badge-white:focus, a.badge-white.is-focused {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.badge-new {
  color: #fff;
  background-color: #FFAE00;
}

a.badge-new:focus, a.badge-new:hover {
  color: #fff;
  background-color: #cc8b00;
}

a.badge-new:focus, a.badge-new.is-focused {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(214, 158, 46, 0.25);
}

.badge-open {
  color: #fff;
  background-color: #EA392A;
}

a.badge-open:focus, a.badge-open:hover {
  color: #fff;
  background-color: #cd2314;
}

a.badge-open:focus, a.badge-open.is-focused {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(229, 62, 62, 0.25);
}

.badge-hold {
  color: #fff;
  background-color: #2D2C2C;
}

a.badge-hold:focus, a.badge-hold:hover {
  color: #fff;
  background-color: #131313;
}

a.badge-hold:focus, a.badge-hold.is-focused {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(26, 32, 44, 0.25);
}

.badge-solved {
  color: #fff;
  background-color: #575654;
}

a.badge-solved:focus, a.badge-solved:hover {
  color: #fff;
  background-color: #3d3c3b;
}

a.badge-solved:focus, a.badge-solved.is-focused {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(113, 128, 150, 0.25);
}

.badge-answered,
.badge-answered,
.badge-completed,
.badge-planned {
  color: #fff;
  background-color: #007CFB;
}

a.badge-answered:focus, a.badge-answered:hover, .badge-answered:focus, .badge-answered:hover, .badge-completed:focus, .badge-completed:hover, .badge-planned:focus, .badge-planned:hover {
  color: #fff;
  background-color: #0063c8;
}

a.badge-answered:focus, a.badge-answered.is-focused, .badge-answered:focus, .badge-answered.is-focused, .badge-completed:focus, .badge-completed.is-focused, .badge-planned:focus, .badge-planned.is-focused {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
}

.actions-user button,
.subscribe-article button,
.subscribe-section button,
.subscribe-topic button,
.subscribe-organization button,
.subscribe-link button,
.subscribe-user button {
  display: inline-block;
  padding: 0.5em 1.25em;
  line-height: 1.5;
  color: $color_text;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid $color_border;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.15s ease-in-out;
}

.actions-user button:hover,
.subscribe-article button:hover,
.subscribe-section button:hover,
.subscribe-topic button:hover,
.subscribe-organization button:hover,
.subscribe-link button:hover,
.subscribe-user button:hover {
  text-decoration: none;
}

.actions-user button:disabled, .actions-user button.is-disabled,
.subscribe-article button:disabled,
.subscribe-article button.is-disabled,
.subscribe-section button:disabled,
.subscribe-section button.is-disabled,
.subscribe-topic button:disabled,
.subscribe-topic button.is-disabled,
.subscribe-organization button:disabled,
.subscribe-organization button.is-disabled,
.subscribe-link button:disabled,
.subscribe-link button.is-disabled,
.subscribe-user button:disabled,
.subscribe-user button.is-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}

.subscribe-article button,
.subscribe-section button,
.subscribe-topic button,
.subscribe-organization button {
  color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.subscribe-article button:hover,
.subscribe-section button:hover,
.subscribe-topic button:hover,
.subscribe-organization button:hover {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
}

.subscribe-article button:focus, .subscribe-article button.is-focused,
.subscribe-section button:focus,
.subscribe-section button.is-focused,
.subscribe-topic button:focus,
.subscribe-topic button.is-focused,
.subscribe-organization button:focus,
.subscribe-organization button.is-focused {
  outline: 0;
}

.subscribe-article button:disabled, .subscribe-article button.is-disabled,
.subscribe-section button:disabled,
.subscribe-section button.is-disabled,
.subscribe-topic button:disabled,
.subscribe-topic button.is-disabled,
.subscribe-organization button:disabled,
.subscribe-organization button.is-disabled {
  color: $color_text;
  border-color: $color_border;
}

.subscribe-article button:not(:disabled):not(.is-disabled):active, .subscribe-article button:not(:disabled):not(.is-disabled)[data-selected="true"], .subscribe-article button:not(:disabled):not(.is-disabled).is-active,
.subscribe-section button:not(:disabled):not(.is-disabled):active,
.subscribe-section button:not(:disabled):not(.is-disabled)[data-selected="true"],
.subscribe-section button:not(:disabled):not(.is-disabled).is-active,
.subscribe-topic button:not(:disabled):not(.is-disabled):active,
.subscribe-topic button:not(:disabled):not(.is-disabled)[data-selected="true"],
.subscribe-topic button:not(:disabled):not(.is-disabled).is-active,
.subscribe-organization button:not(:disabled):not(.is-disabled):active,
.subscribe-organization button:not(:disabled):not(.is-disabled)[data-selected="true"],
.subscribe-organization button:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #101215;
  background-color: #101215;
}

.subscribe-article,
.subscribe-section,
.subscribe-topic {
  align-self: center;
  white-space: nowrap;
}

.subscribe-article button,
.subscribe-section button,
.subscribe-topic button {
  padding: 0.25em 0.75em;
  font-size: 0.875rem;
}

.actions-user button,
.subscribe-link button,
.subscribe-user button {
  color: $color_primary_inverse;
  border-color: rgba(25, 28, 32, 1);
  background-color: rgba(25, 28, 32, 1);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 0.25em 0.75em;
  font-size: 0.875rem;
  width: 100%;
}

.actions-user button:hover,
.subscribe-link button:hover,
.subscribe-user button:hover {
  color: $color_primary_inverse;
  border-color: #0e0f12;
  background-color: #101215;
}

.actions-user button:focus, .actions-user button.is-focused,
.subscribe-link button:focus,
.subscribe-link button.is-focused,
.subscribe-user button:focus,
.subscribe-user button.is-focused {
  outline: 0;
}

.actions-user button:disabled, .actions-user button.is-disabled,
.subscribe-link button:disabled,
.subscribe-link button.is-disabled,
.subscribe-user button:disabled,
.subscribe-user button.is-disabled {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.actions-user button:not(:disabled):not(.is-disabled):active, .actions-user button:not(:disabled):not(.is-disabled)[data-selected="true"], .actions-user button:not(:disabled):not(.is-disabled).is-active,
.subscribe-link button:not(:disabled):not(.is-disabled):active,
.subscribe-link button:not(:disabled):not(.is-disabled)[data-selected="true"],
.subscribe-link button:not(:disabled):not(.is-disabled).is-active,
.subscribe-user button:not(:disabled):not(.is-disabled):active,
.subscribe-user button:not(:disabled):not(.is-disabled)[data-selected="true"],
.subscribe-user button:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #030303;
  background-color: #070809;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

@media (min-width: 768px) {
  .actions-user button,
  .subscribe-link button,
  .subscribe-user button {
    width: auto;
  }
}

.actions-user {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.actions-user > button {
  position: relative;
}

.actions-user > button:hover {
  z-index: 1;
}

.actions-user > button:focus, .actions-user > button:active, .actions-user > button.is-active {
  z-index: 1;
}

.actions-user > button:not(:first-child) {
  margin-left: -1px;
}

.actions-user > button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.actions-user > button:last-child {
  width: auto;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.actions-comment button {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  overflow: visible;
  user-select: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .5rem;
  margin-right: -.5rem;
}

.form input[type="submit"] {
  display: inline-block;
  padding: 0.5em 1.25em;
  line-height: 1.5;
  color: $color_text;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid $color_border;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.15s ease-in-out;
  color: $color_primary_inverse;
  border-color: rgba(25, 28, 32, 1);
  background-color: rgba(25, 28, 32, 1);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 0.5em 1.5em;
  font-size: 1.125rem;
}

.form input[type="submit"]:hover {
  text-decoration: none;
}

.form input[type="submit"]:disabled, .form input[type="submit"].is-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}

.form input[type="submit"]:hover {
  color: $color_primary_inverse;
  border-color: #0e0f12;
  background-color: #101215;
}

.form input[type="submit"]:focus, .form input[type="submit"].is-focused {
  outline: 0;
}

.form input[type="submit"]:disabled, .form input[type="submit"].is-disabled {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.form input[type="submit"]:not(:disabled):not(.is-disabled):active, .form input[type="submit"]:not(:disabled):not(.is-disabled)[data-selected="true"], .form input[type="submit"]:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #030303;
  background-color: #070809;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.icon-circle {
  display: inline-flex;
  padding: 1em;
  background-color: $color_gray_100;
  border-radius: 50%;
}

.icon-circle [class*="icon-"]::before,
.icon-circle .svg-icon {
  bottom: auto;
}

a:hover .icon-circle {
  color: rgba(25, 28, 32, 1);
  text-decoration: none;
  background-color: $color_primary_inverse;
  border-color: rgba(25, 28, 32, 1);
}

.img-left {
  float: left;
  text-align: left;
  margin-right: 1rem;
}

.img-right {
  float: right;
  text-align: right;
  margin-left: 1rem;
}

.img-thumbnail {
  padding: 1rem;
  border: 1px solid $color_border;
  border-radius: 4px;
}

@media (min-width: 768px) {
  .img-left {
    margin-left: -1rem;
  }
  .img-right {
    margin-right: -1rem;
  }
}

.share {
  padding-left: 0;
  list-style: none;
}

.share svg {
  width: 1em;
  height: 1em;
}

.share li {
  display: inline-block;
  margin-right: .5rem;
}

.share a {
  color: inherit;
}

.share-facebook:focus, .share-facebook:hover {
  color: #3b5998;
}

.share-twitter:focus, .share-twitter:hover {
  color: #00aced;
}

.share-linkedin:focus, .share-linkedin:hover {
  color: #007bb6;
}

.list-check,
.list-number {
  list-style: none;
  padding-left: 0;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.list-check > li,
.list-number > li {
  position: relative;
  padding-left: 2.75em;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.list-check > li::before,
.list-number > li::before {
  position: absolute;
  left: .5em;
  display: inline-block;
  width: 1.725em;
  height: 1.725em;
  line-height: 1.725em;
  text-align: center;
  font-size: .875em;
  font-weight: 500;
  border-radius: 50%;
}

.list-check > li::before {
  content: "✓";
  background-color: #E7E5E2;
}

.list-number {
  counter-reset: list;
}

.list-number > li {
  counter-increment: list;
}

.list-number > li::before {
  content: counter(list);
  background-color: #E7E5E2;
}

@media (min-width: 768px) {
  .recent-articles,
  .related-articles {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
}

.recent-articles h2,
.related-articles h2 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 1rem;
}

.recent-articles ul,
.related-articles ul {
  padding-left: 0;
  list-style: none;
}

.recent-articles a,
.related-articles a {
  display: block;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.suggestion-list label {
  display: block;
  padding-bottom: .5rem;
  font-size: 0.9375rem;
  border-bottom: 1px solid $color_border;
}

.suggestion-list ul {
  padding-left: 0;
  list-style: none;
  font-size: 0.9375rem;
  padding-bottom: 1rem;
}

.suggestion-list a {
  display: block;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

@media (min-width: 992px) {
  .meta-block::before {
    display: none;
  }
}

.recent-activity-list {
  display: grid;
  margin-top: 1rem;
  margin-bottom: 0;
  list-style: none;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .recent-activity-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px) {
  .recent-activity-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.recent-activity-header {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.recent-activity-item {
  position: relative;
  display: inline-block;
  width: 100%;
  border: 1px solid $color_border;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  background-color: #fff;
}

.recent-activity-item-link {
  display: block;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.recent-activity-item-meta {
  font-size: 0.9375rem;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  margin-bottom: 1rem;
}

.recent-activity-item-meta > * + * {
  padding-left: 0.5rem;
}

.recent-activity-item-meta > * + *::before {
  display: inline-block;
  padding-right: 0.5rem;
  content: "·";
}

.recent-activity-item-meta > * + *::before {
  color: $color_gray_600;
}

.recent-activity-accessibility-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

.recent-activity-comment-icon::after {
  content: attr(data-comment-count);
  margin-left: 0.25rem;
}

.recent-activity-controls a {
  display: block;
  margin-top: 1rem;
}

.sidebar {
  position: relative;
}

.sidebar::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100vw;
  content: "";
  background-color: inherit;
}

.requests-sort-symbol {
  position: absolute;
  left: calc(100% + .25em);
  bottom: 0;
  font-size: .625em;
}

.content table:not([class*="table"]) {
  max-height: 20rem;
  overflow-y: scroll;
  border: none;
}

.note,
.warning {
  position: relative;
  z-index: 1;
  margin: 2rem 0;
  border-radius: 0.25rem;
  overflow: hidden;
}

.note::after,
.warning::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.05;
  width: 100%;
  height: 100%;
}

.note,
.warning {
  padding: 1.5rem;
  overflow: hidden;
}

.note::before,
.warning::before {
  display: block;
  font-weight: bold;
  margin-bottom: 0.75rem;
}

.note {
  border-left: 4px solid rgba(80, 109, 255, 1);
}

.note::before {
  content: "Note";
  color: rgba(80, 109, 255, 1);
}

.note::before:empty {
  display: none;
}

.note::after {
  background-color: rgba(80, 109, 255, 1);
}

.warning {
  border-left: 4px solid #ef526e;
}

.warning::before {
  content: "Warning";
  color: #ef526e;
}

.warning::after {
  background-color: #ef526e;
}

.form .note {
  padding: 1rem;
  border: 1px solid rgba(80, 109, 255, 1);
}

.form .note::before {
  display: none;
}

.pull-left,
.pull-right {
  font-weight: bold;
}

.content em {
  color: inherit;
  background-color: transparent;
  padding: 0;
}

.content img,
.content iframe {
  max-width: 100%;
}

@media (min-width: 992px) {
  .pull-left {
    float: left;
    margin-left: -1rem;
    margin-right: 1.5rem;
    text-align: left;
  }
  .pull-right {
    float: right;
    margin-left: 1.5rem;
    margin-right: -1rem;
    text-align: right;
  }
  .pull-left,
  .pull-right {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    max-width: 20rem;
  }
}

.bg-community {
  background-image: url($community_background_image);
}

.bg-home {
  background-image: url($homepage_background_image);
}

.bg-hero {
  background: -webkit-linear-gradient(rgba(24, 24, 24, 1), rgba(72, 89, 118, .96));
  background: linear-gradient(rgba(24, 24, 24, 1), rgba(72, 89, 118, .96));
}

.group:hover .group-hover\:text-white {
  color: #fff;
}

.group:hover .group-hover\:text-primary {
  color: rgba(25, 28, 32, 1);
}

.group:hover .group-hover\:text-primary-inverse {
  color: $color_primary_inverse;
}

[class*="columns-"] {
  column-gap: 1.5rem;
}

[class*="columns-"] > * {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.columns-auto {
  column-count: auto;
  column-width: 20em;
}

@media (min-width: 768px) {
  .columns-2 {
    column-count: 2;
  }
}

@media (min-width: 768px) {
  .columns-3 {
    column-count: 2;
  }
}

@media (min-width: 992px) {
  .columns-3 {
    column-count: 3;
  }
}

@media (min-width: 768px) {
  .columns-4 {
    column-count: 2;
  }
}

@media (min-width: 1200px) {
  .columns-4 {
    column-count: 4;
  }
}

[class*="grid-"] {
  display: grid;
  gap: 1.5rem;
}

.grid-auto {
  grid-auto-rows: minmax(20em, auto);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 576px) {
  .sm\:grid-auto {
    grid-auto-rows: minmax(20em, auto);
  }
  .sm\:grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .sm\:grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .sm\:grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) {
  .md\:grid-auto {
    grid-auto-rows: minmax(20em, auto);
  }
  .md\:grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .md\:grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .md\:grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 992px) {
  .lg\:grid-auto {
    grid-auto-rows: minmax(20em, auto);
  }
  .lg\:grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .lg\:grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .lg\:grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) {
  .xl\:grid-auto {
    grid-auto-rows: minmax(20em, auto);
  }
  .xl\:grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .xl\:grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .xl\:grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

[x-cloak] {
  display: none !important;
}

@media (max-width: 991.98px) {
  body:not(.world-id-mode) .header .search,
  .home-page .header .search,
.home-page .header .search-toggle,
.community-topic-list-page .header .search,
.community-topic-list-page .header .search-toggle,
.community-post-list-page .header .search,
.community-post-list-page .header .search-toggle {
  display: none !important;
	}
}

/* body.world-id-mode .hero-heading.desktop {
    display: none !important;
}

body:not(.world-id-mode) .hero-heading.world-app {
    display: none !important;
}*/

body.world-id-mode .header .search { 
  display: none !important;
}

@media (min-width: 992px) {
  body:not(.world-id-mode) main .search { 
  	display: none !important;
  }
}

.home-page .footer {
  margin-top: 0;
}

.avatar-img {
  background-color: #828d9d;
}

.layout--boxed {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
}



/* =========================================
   CUSTOM CSS
   ========================================= */

/* Empty logo hook for future use */
#logo {
}

/* Home page vertical centering on tablet+ */
@media (min-width: 768px) {
  .home-page main {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.world-id-mode main {
  margin-top: 0;
}

.menu-links-right .min-w-dropdown {
  bottom: inherit !important;
  max-height: 236px;
  overflow-y: auto;
}

.bg-home {
  background: white;
}

.home-page .footer {
  margin-top: 0;
}

.bg-content-blocks {
  padding-bottom: 80px;
}

.hero .relative.container.z-30.py-6 {
  margin-top: 0 !important;
}

#popular-keywords {
  color: #575654;
}

#popular-keywords .align-items-center.m-1 a {
  padding: 8px 16px;
  border: 1px solid #E7E5E2;
  border-radius: 20px;
  transition: 0.3s;
}

#popular-keywords .align-items-center.m-1 a:hover {
  text-transform: none;
  text-decoration: none;
  box-shadow: rgba(100, 100, 111, 0.1) 0 3px 16px 0;
}

#popular-keywords .align-items-center.m-1 span {
  display: none;
}

.subscribe-user {
  display: none;
}

/* =========================================
   SEARCH VISIBILITY RULES
   ========================================= */
@media (max-width: 991.98px) {
  body:not(.world-id-mode) .header .search,
  .home-page .header .search,
  .home-page .header .search-toggle,
  .community-topic-list-page .header .search,
  .community-topic-list-page .header .search-toggle,
  .community-post-list-page .header .search,
  .community-post-list-page .header .search-toggle {
    display: none !important;
  }
}

body.world-id-mode .header .search {
  display: none !important;
}

@media (min-width: 992px) {
  body:not(.world-id-mode) main .search {
    display: none !important;
  }
}

/* =========================================
   MOBILE MENU ADJUSTMENTS
   ========================================= */
@media (max-width: 991.98px) {
  .menu-standard {
    display: flex !important;
    flex-direction: row;
    position: relative;
    top: 8px;
    text-align: right;
    background: transparent !important;
    padding-top: 0;
    box-shadow: none;
  }

  .menu-standard .user-menu {
    display: none;
  }

  footer .nav {
    justify-content: center;
  }

  .navbar-toggle {
    display: none;
  }
}

/* =========================================
   MW NOTIFICATION BANNER
   ========================================= */
.ns-box {
  position: relative;
  background: rgba(192, 57, 43, 0.85);
  padding: 10px 20px 20px 20px;
  line-height: 1.4;
  z-index: 1000;
  pointer-events: none;
  color: rgba(250, 251, 255, 0.95);
  font-size: 85%;
  border-bottom: 1px solid #DDD;
}

.ns-box.ns-show,
.ns-box.ns-visible {
  pointer-events: auto;
}

.ns-box a {
  color: inherit;
  opacity: 0.7;
  font-weight: 700;
}

.ns-box a:hover,
.ns-box a:focus {
  opacity: 1;
}

.ns-box p {
  margin: 0;
}

.ns-close {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 4px;
  top: 4px;
  overflow: hidden;
  text-indent: 100%;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ns-close:hover,
.ns-close:focus {
  outline: none;
}

.ns-close::before,
.ns-close::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 60%;
  top: 50%;
  left: 50%;
  background: #6e6e6e;
}

.ns-close:hover::before,
.ns-close:hover::after {
  background: #fff;
}

.ns-close::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.ns-close::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ns-box-inner i {
  color: #fff;
  font-size: 3.8em;
}

.megaphone:before {
  content: '\1F4E3';
  font-family: "entypo";
  font-size: 2.2em;
}

.ns-box.ns-bar {
  top: 0;
  left: 0;
  width: 100%;
}

.ns-bar .ns-close {
  background: transparent;
  margin-top: 15px;
  right: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ns-bar .ns-close::before,
.ns-bar .ns-close::after {
  background: #b7b5b3;
}

[class^="ns-effect-"].ns-bar.ns-hide,
[class*=" ns-effect-"].ns-bar.ns-hide {
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.ns-effect-slidetop {
  box-shadow: inset 5.4em 0 rgba(0, 0, 0, 0.1);
}

.ns-effect-slidetop .icon {
  position: absolute;
  display: block;
  font-size: 109%;
  top: 50%;
  left: 1em;
  -webkit-transform: translate3d(0, -20%, 0);
  transform: translate3d(0, -20%, 0);
}

.ns-effect-slidetop p {
  padding: 0 3.2em;
  font-size: 1.2em;
  display: inline-block;
}

.ns-effect-slidetop .ns-close::before,
.ns-effect-slidetop .ns-close::after {
  width: 2px;
  background: #fff;
}

.ns-effect-slidetop .ns-close:hover::before,
.ns-effect-slidetop .ns-close:hover::after {
  background: #fff;
}

.ns-effect-slidetop.ns-show .icon,
.ns-effect-slidetop.ns-show p {
  -webkit-animation-name: animScaleUp;
  animation-name: animScaleUp;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.ns-effect-slidetop.ns-show p {
  -webkit-animation-name: animFade;
  animation-name: animFade;
}

@-webkit-keyframes animScaleUp {
  0% { opacity: 0; -webkit-transform: translate3d(0, -50%, 0) scale3d(0, 0, 1); }
  100% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0) scale3d(1, 1, 1); }
}

@keyframes animScaleUp {
  0% { opacity: 0; -webkit-transform: translate3d(0, -50%, 0) scale3d(0, 0, 1); transform: translate3d(0, -50%, 0) scale3d(0, 0, 1); }
  100% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0) scale3d(1, 1, 1); transform: translate3d(0, -50%, 0) scale3d(1, 1, 1); }
}

.ns-effect-slidetop.ns-show,
.ns-effect-slidetop.ns-hide {
  -webkit-animation-name: animSlideTop;
  animation-name: animSlideTop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

@-webkit-keyframes animSlideTop {
  0% { -webkit-transform: translate3d(0, -100%, 0); }
  100% { -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes animSlideTop {
  0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
  100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

/* =========================================
   VIDEO EMBEDS
   ========================================= */
.video-container {
  max-width: 400px;
  margin: 0 auto;
}

.video-container iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Accordion video only */
.js-toggles .video-container--accordion {
  position: relative;
  width: min(100%, 620px) !important;
  margin: 24px auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
}

.js-toggles .video-container--accordion iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

/* =========================================
   ZENDESK AUTOCOMPLETE
   ========================================= */
zd-autocomplete-header {
  display: none !important;
}

zd-autocomplete {
  border-radius: 12px;
  border: 1px solid #E7E5E2;
  background: #FFF;
}

zd-autocomplete-multibrand {
  border-bottom: 1px solid #E7E5E2;
}

zd-autocomplete-breadcrumbs-multibrand {
  display: none !important;
}

zd-autocomplete-multibrand zd-autocomplete-title-multibrand {
  color: #2D2C2C;
  font-size: 13px;
  font-style: normal;
  font-weight: 350;
  line-height: 130%;
}

/* =========================================
   HEADER LAYOUT (STICKY)
   ========================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  z-index: 999;
  background: #ffffff;
}

/* Keep main content below fixed header */
main {
  margin-top: 88px;
  background: #F3F2F0;
}

/* Gradient fade under header */
.header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -40px;
  width: 100%;
  height: 40px;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
}

/* Brand-specific header color override */
.header .navbar-brand,
.header .navbar-toggle,
.header .nav-link,
.fixed-header .nav-link {
  color: #575654 !important;
}

.header .navbar-brand:hover,
.header .navbar-toggle:hover,
.header .nav-link:hover,
.fixed-header .nav-link:hover {
  color: #24374e !important;
}

/* =========================================
   HEADER ACTIONS
   ========================================= */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  position: relative;
}

/* Remove spacing when CTA is hidden in app */
.header-actions.cta-hidden-in-app {
  gap: 0 !important;
}

/* =========================================
   HEADER CTA
   ========================================= */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 9999px;
  background: #2D2C2C;
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.header-cta:hover {
  background: #2a2a2a;
}

.header-cta:active {
  transform: translateY(1px);
}

.header-cta:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 24, 24, 0.15);
}

/* =========================================
   LANGUAGE SWITCHER
   ========================================= */
.language-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #E7E5E2;
  border-radius: 9999px;
  background: #FFF;
  white-space: nowrap;
  cursor: pointer;
}

.language-button[aria-expanded="true"] {
  background: #F3F2F0;
}

/* Flag in button */
.language-button .locale-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 14px;
  margin-right: 0;
  border-radius: 2px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* Shared locale flag fallback */
.locale-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 18px;
  margin-right: 5px;
  border-radius: 2px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 auto;
}

.language-dropdown .dropdown-item span.js-locale-flag {
  margin-right: 10px;
}

/* Dropdown */
.language-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  transform: none;
  margin-top: 6px;
  min-width: 220px;
  max-width: 90vw;
  border-radius: 12px;
  overflow: hidden;
  z-index: 1000;
  animation: languageDropdownFadeIn 0.2s ease-out;
}

.language-dropdown-content {
  max-height: 236px;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
}

.language-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 8px 14px;
  font-size: 14px;
  line-height: normal;
  white-space: nowrap;
  overflow: visible;
  transition: background-color 0.2s ease;
}

.language-dropdown .dropdown-item:hover {
  background-color: #f3f4f6;
}

.language-dropdown .locale-flag {
  width: 20px;
  height: 14px;
  flex-shrink: 0;
}

/* Scrollbar */
.language-dropdown-content::-webkit-scrollbar {
  width: 4px;
}

.language-dropdown-content::-webkit-scrollbar-track {
  background: transparent;
}

.language-dropdown-content::-webkit-scrollbar-thumb {
  background-color: #E7E5E2;
  border-radius: 2px;
}

.language-dropdown-content::-webkit-scrollbar-thumb:hover {
  background-color: #d1d5db;
}

@keyframes languageDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   DESKTOP HEADER CONTROL NORMALIZATION
   ========================================= */
@media (min-width: 1024px) {
  .header .search {
    min-width: 380px;
    height: 40px;
    box-sizing: border-box;
  }

  .header .search [type="search"] {
    height: 40px;
    box-sizing: border-box;
    border-radius: 9999px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 2.5em;
    padding-right: 16px;
    line-height: 40px;
  }

  .header .language-button,
  .header .header-cta {
    height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
  }

  .header .language-button {
    padding: 0 14px;
  }

  .header .header-cta {
    padding: 0 16px;
  }
}

/* =========================================
   MOBILE HEADER OPTIMIZATION
   ========================================= */
@media (max-width: 480px) {
  .header-actions {
    gap: 6px;
  }

  .language-button span:not(.locale-flag) {
    display: none !important;
  }

  .language-button {
    padding: 6px 8px;
  }

  .header-cta {
    font-size: 13px;
    padding: 0 10px;
    height: 34px;
  }

  .language-dropdown {
    right: 0;
    left: auto;
    transform: none;
    min-width: 180px;
  }
}

@media (max-width: 360px) {
  .header-cta {
    font-size: 12px;
    padding: 0 8px;
  }

  .language-button {
    padding: 4px 6px;
  }

  .language-dropdown {
    min-width: 160px;
  }
}

/* =========================================
   IN-APP WEBVIEW HIDING
   ========================================= */
.in-app-webview .header-cta,
html.in-app-webview .header-cta,
body.in-app-webview .header-cta {
  display: none !important;
}

.in-app-webview .article-bottom-cta,
html.in-app-webview .article-bottom-cta,
body.in-app-webview .article-bottom-cta,
.in-app-webview .article-bottom-divider,
html.in-app-webview .article-bottom-divider,
body.in-app-webview .article-bottom-divider {
  display: none !important;
}

/* =========================================
   ARTICLE BOTTOM CTA
   ========================================= */
.article-bottom-divider {
  border: 0;
  border-top: 1px solid #d9dee7;
  margin: 36px 0;
}

.article-bottom-cta {
  padding: 12px 0 8px;
}

.article-bottom-cta__inner {
  max-width: 420px;
}

.article-bottom-cta__title {
  margin: 0 0 28px;
  color: #2d2d2d;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -1.6px;
}

.article-bottom-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 9999px;
  background: #2d2b2b;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.2px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.article-bottom-cta__button:hover {
  background: #1f1f1f;
  color: #ffffff !important;
  text-decoration: none !important;
}

.article-bottom-cta__button:active {
  transform: translateY(1px);
}

.article-bottom-cta__button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 43, 43, 0.12);
}

@media (max-width: 991.98px) {
  .article-bottom-divider {
    margin: 32px 0;
  }

  .article-bottom-cta__inner {
    max-width: 360px;
  }

  .article-bottom-cta__title {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -1.1px;
    margin-bottom: 24px;
  }

  .article-bottom-cta__button {
    min-height: 50px;
    padding: 0 22px;
    font-size: 16px;
  }
}

@media (max-width: 767.98px) {
  .article-bottom-divider {
    margin: 28px 0;
  }

  .article-bottom-cta {
    padding: 8px 0 4px;
  }

  .article-bottom-cta__inner {
    max-width: 100%;
  }

  .article-bottom-cta__title {
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -0.7px;
    margin-bottom: 20px;
  }

  .article-bottom-cta__button {
    min-height: 46px;
    padding: 0 20px;
    font-size: 15px;
  }
}

/* =========================================
   SIDEBAR ABOVE HEADER FADE
   ========================================= */
.article-page aside .sticky-top {
  position: sticky;
  top: 88px;
  z-index: 2;
  background: transparent !important;
}

.article-page aside .sticky-top > div,
.article-page aside .sticky-top .bg-gray-200 {
  position: relative;
  z-index: 2;
}

/* =========================================
   SMALL ARTICLE TWEAKS
   ========================================= */
.article-section-nav a:hover {
  text-decoration: underline;
}


/* =========================================
   FORCE INTER FONT ON ARTICLE CONTENT
   Overrides inline font-family styles
   that get pasted in from external sources
   (Word, Google Docs, etc.)
   ========================================= */
.content,
.content *:not(code):not(pre):not(kbd):not(samp):not(tt) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* =========================================
   WORLDPROMVP CUSTOM FONT
   ========================================= */

/* 1. Register the font with the browser.
      World brand sanctions only Regular (400) and Medium (500),
      so we clamp the variable font's range to that window.
      font-synthesis: none prevents the browser from faking
      a bold or italic when one isn't supplied. */
@font-face {
  font-family: 'WorldProMVP';
  src: url(/hc/theming_assets/01KQV1AZWFJ88XPCZYZ6AXCJ7R) format('truetype-variations');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

/* 2. Apply WorldProMVP globally (body inherits to most elements).
      v89: simplified to match the World App HC font stack exactly.
      Previously this stack interleaved Noto Sans / Noto Sans JP / HK
      / Arabic / Bengali / Hebrew between Inter and the OS stack to
      try to keep non-Latin scripts on brand-approved web fonts. That
      well-intentioned choice caused Noto Sans JP to render JP
      punctuation (、 。) centered-in-cell — see ZD Slack
      #cx-localization 2026-05-19 (Zrinka Bađun). Forcing OpenType
      `palt` in v88 only half-fixed it; the glyph shapes still didn't
      match the working World App HC. v89 drops the Noto preferences
      entirely so the OS native JP font (Hiragino on macOS, Yu Gothic
      on Windows) renders Japanese — identical approach to the
      User/World App HC, which Localization has confirmed renders
      correctly. */
body {
  font-family: 'WorldProMVP', 'Inter',
    -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* 3. Apply WorldProMVP to all headings (overrides theme's heading font setting) */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: 'WorldProMVP', 'Inter',
    -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* 4. Override any inline font-family inside article body content
      (catches pasted Verdana/Arial styles, leaves code blocks alone) */
.content,
.content *:not(code):not(pre):not(kbd):not(samp):not(tt) {
  font-family: 'WorldProMVP', 'Inter',
    -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* v88's :lang(ja|ko|zh) palt rule was removed in v89.
   Reason: it only mattered when Noto Sans JP was in the font stack
   (Noto centers full-width punctuation by default and needs `palt` to
   correct it). With OS fonts (Hiragino, Yu Gothic) the punctuation
   already sits at the bottom-right by default and palt becomes a no-op
   that would only add maintenance noise. */

/* =========================================
   v90: SCOPED CHINESE WEB FONT (:lang(zh))
   =========================================
   Chinese is the exception to v89's "let the OS render non-Latin" rule.
   On macOS, PingFang TC centers full-width punctuation (、 。 ，) in-cell
   *and* doesn't expose the OpenType `palt` feature — so there's no
   CSS-only way to nudge the OS font into producing bottom-right
   punctuation for Traditional Chinese. The fix is to opt into a
   web font (Noto Sans SC/TC/HK) that *does* expose `palt`, and enable
   the feature only for Chinese-tagged content.

   Scope: all zh-* variants (Simplified, Traditional, Hong Kong, etc.)
   because Localization owns the regional content and any Chinese page
   should render consistently. Other scripts (JP, KO, AR, BN, HE) keep
   v89's OS-fallback behavior — those OS fonts handle punctuation fine.

   Trade-off: Chinese readers now download Noto Sans (subset to just
   their script via Google Fonts `unicode-range`), but get correct
   horizontal-flow punctuation across macOS, Windows, and Linux instead
   of the OS-dependent flaw inherited from PingFang TC.

   Reported by Federico after v89 deployed (2026-05-19). The World App
   HC also has this PingFang issue but Localization hasn't flagged it
   there yet. ========================================= */
:lang(zh),
[lang="zh"], [lang^="zh-"] {
  font-family: 'WorldProMVP', 'Inter',
    'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK',
    -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-feature-settings: "palt" 1;
}



/* ============================================================
   World ID Help Center — Custom Style Additions
   Append this entire block to the bottom of style.css.
   Delete any previous incremental additions from this project
   (eyebrow rules, sticky bar rules, header fixes, etc.) and
   replace with this consolidated version.

   Note: One non-additive change is required in the base theme:
   on line ~3085, remove the `visibility: hidden;` declaration
   from the `.breadcrumbs` rule (so breadcrumbs render).
   ============================================================ */


/* ============================================================
   1. ARTICLE BREADCRUMB — EYEBROW ABOVE TITLE
   ============================================================ */
.article-breadcrumbs {
  margin-bottom: 0.5rem;
}
.article-breadcrumbs .breadcrumbs {
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #575654;
}
.article-breadcrumbs .breadcrumbs li {
  color: #575654;
}
.article-breadcrumbs .breadcrumbs li:last-child {
  color: #2D2C2C;
}


/* ============================================================
   2. SKIP "WORLD ID HELP CENTER" ROOT IN ARTICLE BREADCRUMBS
   Hides the first item so breadcrumbs start with the category.
   Also removes the orphaned "/" separator and resets the
   leftover left-padding so the breadcrumb left-aligns cleanly.
   Scoped to article eyebrow + sticky bar only.
   ============================================================ */
.article-breadcrumbs .breadcrumbs > li:first-child,
.article-sticky-bar__crumbs .breadcrumbs > li:first-child {
  display: none;
}
.article-breadcrumbs .breadcrumbs > li:first-child + li::before,
.article-sticky-bar__crumbs .breadcrumbs > li:first-child + li::before {
  display: none;
}
.article-breadcrumbs .breadcrumbs > li:first-child + li,
.article-sticky-bar__crumbs .breadcrumbs > li:first-child + li {
  padding-left: 0;
}


/* ============================================================
   3. ARTICLE STICKY BAR — APPEARS ON SCROLL PAST ARTICLE HEADER
   Light theme to match the main header. Smooth 320ms fade-in.
   ============================================================ */
.article-sticky-bar {
  position: fixed;
  top: var(--main-header-height, 64px); /* sits below the main header */
  left: 0;
  right: 0;
  z-index: 10; /* low enough that header dropdowns (z=1000+) always win */
  background: #F3F2F0; /* soft blue-tinted accent — clearly a header zone,
                           distinct from main header (pure white) AND from
                           article body content beneath */
  color: #2D2C2C;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  border-top: none; /* no top edge — clean transition from main header */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* only the bottom edge */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* subtle lift over article */
}

.article-sticky-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.article-sticky-bar__inner {
  /* v100: now also has .container class on the same element, which
     supplies max-width 1140px and horizontal padding. Vertical padding
     + min-height stay here; display switches from flex to block so the
     inner .row controls horizontal layout. The hidden logo is a sibling
     of the row but remains display:none so it doesn't affect layout. */
  padding: 5px 0; /* vertical only; .container supplies horizontal */
  min-height: 44px;
}

/* Hide the duplicate logo — the main header already shows it */
.article-sticky-bar__logo {
  display: none !important;
}

.article-sticky-bar__logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.article-sticky-bar__context {
  flex: 1;
  min-width: 0;
}

.article-sticky-bar__crumbs {
  margin-bottom: 0;
}

.article-sticky-bar__crumbs .breadcrumbs {
  margin-bottom: 0;
  font-size: 0.6875rem;
  color: #575654;
}

.article-sticky-bar__crumbs .breadcrumbs li {
  color: #575654;
}

.article-sticky-bar__crumbs .breadcrumbs li:last-child {
  color: #2D2C2C;
}

/* v100g15: Zendesk's `{{breadcrumbs}}` helper always appends the current
   article title as the last item. Because the sticky bar already renders
   the title on its own line below the breadcrumb, that trailing crumb
   produces a visible duplicate ("Glossary of Terms" + "Glossary of Terms"
   stacked). Hide the last <li> so the breadcrumb stops at the parent
   section ("Exploring World / General Resources"). The dedicated title
   row below retains its 2-line clamp for long titles. */
.article-sticky-bar__crumbs .breadcrumbs > li:last-child {
  display: none;
}

/* v100g15: When glossary-page.js initializes successfully, it adds
   `is-glossary-page` to <html>. The TOC trigger button only exists on
   article_page.hbs (the default-template fallback path). On the canonical
   glossary article the browse bar IS the TOC, so hide just the TOC
   chevron button — the static title row stays visible as the article
   label. The static fallback exists on BOTH templates, so we never
   hide it. */
html.is-glossary-page .article-sticky-bar__title-row {
  display: none !important;
}

/* v102g17 — Eyebrow title was rendering blank on the glossary article.
   Cause: script.js's TOC code counts the H2 letter dividers (inserted
   by glossary-page.js) as TOC content, so it does `fallback.hidden =
   true` expecting to reveal the trigger button. The previous rule
   hides the trigger on glossary pages, leaving NOTHING visible in the
   title row. Fix: on glossary pages, force the static fallback to stay
   visible regardless of the `hidden` attribute script.js sets.
   Specificity (0,0,3,1) beats the `[hidden]` rule a few lines down
   (0,0,2,0), and the !important is required because [hidden]'s UA
   `display: none` is set with high precedence. */
html.is-glossary-page .article-sticky-bar__title--static,
html.is-glossary-page .article-sticky-bar__title--static[hidden] {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-sticky-bar__title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  color: #2D2C2C;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-sticky-bar__search {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #2D2C2C;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.article-sticky-bar__search:hover,
.article-sticky-bar__search:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.4);
  outline: none;
}

.article-sticky-bar__search svg {
  fill: currentColor;
  width: 16px;
  height: 16px;
}

/* Gradient fade below the bar was removed — it was visually
   washing out the breadcrumb area. The bar's bottom hairline
   border + subtle shadow provides enough visual separation
   without a gradient strip. */

/* Mobile: keep breadcrumb visible — make it compact, not hidden.
   Single line, ellipsis if it overflows. */
@media (max-width: 480px) {
  .article-sticky-bar__inner {
    padding: 4px 2rem; /* match theme's .container horizontal padding */
    gap: 8px;
    min-height: 40px;
  }
  .article-sticky-bar__logo img {
    width: 26px;
    height: 26px;
  }
  .article-sticky-bar__crumbs {
    display: block;
  }
  .article-sticky-bar__crumbs .breadcrumbs {
    display: block;
    font-size: 0.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-wrap: nowrap;
  }
  .article-sticky-bar__crumbs .breadcrumbs li {
    display: inline;
  }
  .article-sticky-bar__title {
    font-size: 0.8125rem;
    line-height: 1.2;
  }
  .article-sticky-bar__search {
    width: 28px;
    height: 28px;
  }
  .article-sticky-bar__search svg {
    width: 14px;
    height: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-sticky-bar {
    transition: opacity 120ms linear;
  }
  .article-sticky-bar.is-visible {
    transform: none;
  }
}


/* ============================================================
   4. MAIN HEADER STAYS VISIBLE — sticky bar sits below it.
   The main header keeps its own sticky behavior from the theme.

   CRITICAL: The theme has a 40px white-to-transparent gradient
   ::after pseudo-element below the main header (style.css
   line 16006). That gradient was washing out the sticky bar's
   breadcrumb. Override it to none.

   Also remove main header's box-shadow and border-bottom to
   prevent visible seams above the breadcrumb.
   ============================================================ */
.header::after {
  display: none !important;
}

body.article-sticky-bar-active .header.shadow,
body.article-sticky-bar-active header.header,
body.article-sticky-bar-active .header.border-bottom {
  box-shadow: none !important;
  border-bottom: none !important;
}

/* SEAMLESS MERGE: When sticky bar is visible, the main header's
   bottom edge gradients from white to the sticky bar's blue tint,
   so the two bars visually merge into one continuous header
   surface with no hard color edge between them. */
body.article-sticky-bar-active .header {
  background: linear-gradient(
    to bottom,
    #FFFFFF 0%,
    #FFFFFF 65%,
    #F3F2F0 100%
  ) !important;
}


/* ============================================================
   4b. COMPACT MAIN HEADER
   Override the theme's 72px so the main header is
   tighter top-to-bottom. Reduces total sticky chrome height.
   Navbar items stay vertically centered automatically.
   ============================================================ */
.header {
  height: auto !important;
  min-height: 56px;
}
.header .navbar {
  padding-top: 6px;
  padding-bottom: 6px;
  min-height: 56px;
}
@media (min-width: 1024px) {
  .header,
  .header .navbar {
    min-height: 60px;
  }
}

/* ============================================================
   4c. HEADER STACKING — the theme's custom .header rule sets
   z-index: 999 (line 15990 in style.css). Our sticky bar's
   z-index: 10 sits comfortably below that, so dropdowns
   emanating from inside the header (language picker, user
   menu) naturally paint above it.
   ============================================================ */
/* No overflow clipping anywhere in the header chain — otherwise
   absolutely-positioned dropdowns get cut off at the parent edge. */
.header,
.header .navbar,
.header .nav,
.header .nav.menu,
.header .header-actions,
.header .language-button,
.header .user-menu {
  overflow: visible !important;
}

/* Dropdowns: belt-and-suspenders high z-index in case any future
   rule tries to clip them. */
.header .language-dropdown,
.header [x-ref="menu"],
.header .z-dropdown,
.language-dropdown {
  z-index: 99999 !important;
}

/* Hide the sticky bar's search icon on viewports where the main
   header already shows a full, persistent search input — avoids
   duplication. Threshold matches the desktop normalization rule
   that makes the main search a prominent 380px-wide pill. */
@media (min-width: 1024px) {
  .article-sticky-bar__search {
    display: none;
  }
}


/* ============================================================
   5. DESKTOP HEADER LAYOUT — KEEP ITEMS INLINE (NO WRAP)
   Override theme default flex-wrap: wrap so the user menu
   stays on the same row as search / language / CTA.
   Search shrinks gracefully when other items need space.
   ============================================================ */
@media (min-width: 768px) {
  .header .navbar,
  .header .navbar .nav.menu {
    flex-wrap: nowrap !important;
  }
  .header .navbar .search {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 320px;
  }
  .header .navbar .user-menu {
    margin-bottom: 0 !important;
    flex-shrink: 0;
  }
  .header .navbar .header-actions {
    flex-shrink: 0;
    flex-wrap: nowrap;
  }
}


/* ============================================================
   6. DESKTOP HEADER NORMALIZATION (>= 1024px)
   - ALL header items uniform 40px height
   - Search bar flex-grows aggressively to fill available width
   - .nav.menu inside .navbar also grows so its children can grow
   - header-actions ml-auto is overridden so search wins the space
   ============================================================ */
@media (min-width: 1024px) {
  .header .navbar {
    align-items: center;
    gap: 12px;
  }

  /* The nav menu must grow inside navbar so its children can */
  .header .nav.menu {
    flex: 1 1 auto !important;
    align-items: center;
    gap: 12px;
    width: auto;
  }

  /* Logo wrapper: fixed height, no shrink */
  .header .navbar-brand {
    height: 40px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .header .navbar-brand img {
    height: 32px;
    width: auto;
  }

  /* Search: greedy fill (flex-basis 0 so it ignores natural width
     and just grows to absorb all available space) */
  .header .search {
    flex: 1 1 0 !important;
    min-width: 200px;
    max-width: none !important;
    width: auto;
    height: 40px;
    box-sizing: border-box;
    margin: 0;
  }
  .header .search [type="search"] {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border-radius: 9999px;
    padding: 0 16px 0 2.5em;
    line-height: 40px;
  }

  /* Header-actions: ml-auto removed so search can absorb the space.
     The wrapper just stays at its natural width on the right. */
  .header .header-actions {
    margin-left: 0 !important;
    flex-shrink: 0;
    gap: 8px;
  }

  /* Language picker + CTA: 40px tall, no shrink */
  .header .language-button,
  .header .header-cta {
    height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
  }
  .header .language-button {
    padding: 0 14px;
  }
  .header .header-cta {
    padding: 0 16px;
  }

  /* User menu: 40px tall avatar wrapper, no shrink */
  .header .user-menu {
    flex-shrink: 0;
  }
  .header .user-menu .nav-link {
    height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
  }
  .header .user-menu .avatar-img {
    width: 28px;
    height: 28px;
  }
}


/* ============================================================
   7. MOBILE HEADER OPTIMIZATION (<= 480px)
   Compact the language picker and CTA so they fit comfortably
   on phones. Hamburger menu stays as the mobile pattern.
   ============================================================ */
@media (max-width: 480px) {
  .header-actions {
    gap: 6px;
  }
  .language-button span:not(.locale-flag) {
    display: none !important;
  }
  .language-button {
    padding: 6px 8px;
  }
  .header-cta {
    font-size: 13px;
    padding: 0 10px;
    height: 34px;
  }
  .language-dropdown {
    right: 0;
    left: auto;
    transform: none;
    min-width: 180px;
  }
}


/* ============================================================
   8. TIGHTER PHONES (<= 360px)
   Even more compact CTA and language picker.
   ============================================================ */
@media (max-width: 360px) {
  .header-cta {
    font-size: 12px;
    padding: 0 8px;
  }
  .language-button {
    padding: 4px 6px;
  }
  .language-dropdown {
    min-width: 160px;
  }
}

/* ============================================================
   APPLE-INSPIRED HOME PAGE
   Tokens: spacing scale (8, 16, 24, 32, 48, 64, 96), white + 
   pale gray surfaces, World-dark #2D2C2C accent, blue #007CFB
   for eyebrows, generous typography, subtle hover lifts.
   ============================================================ */

/* Hero */
.apl-hero {
  background: #ffffff;
  padding: 64px 24px 48px;
  text-align: center;
}
.apl-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}
.apl-hero-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #2D2C2C;
  margin: 0 0 28px;
}
.apl-hero-title-muted {
  color: #575654;
}
.apl-hero-search {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
.apl-hero-search input,
.apl-hero-search .apl-search-input input,
.apl-hero-search .apl-search-input [type="search"] {
  height: 48px !important;
  background: #F9F9F8 !important;
  border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 9999px !important;
  padding: 0 20px 0 48px !important;
  font-size: 16px !important;
  color: #2D2C2C !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.apl-hero-search input:focus,
.apl-hero-search [type="search"]:focus {
  border-color: rgba(0, 0, 0, 0.2) !important;
  background: #ffffff !important;
  outline: none !important;
}
.apl-hero-search .search-icon,
.apl-hero-search svg.search-icon {
  position: absolute;
  left: 20px !important;
  top: 50%;
  transform: translateY(-50%);
  width: 18px !important;
  height: 18px !important;
  /* v56: reset the base .search-icon margin (0 1em) that was
     bleeding through and pushing the icon ~16px to the right,
     making the placeholder text crowd against it. */
  margin: 0 !important;
  color: #575654;
  pointer-events: none;
}
.apl-hero-hint {
  font-size: 15px;
  color: #575654;
  margin: 16px auto 0;
  max-width: 480px;
}

/* Section container */
.apl-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}
.apl-section-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #2D2C2C;
  margin: 0 0 24px;
}

/* Topic cards */
.apl-cats {
  background: #F9F9F8;
  padding: 48px 0 64px;
}
.apl-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.apl-card {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 24px 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}
.apl-card-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  color: #2D2C2C;
}
.apl-card-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.apl-card-icon > svg {
  width: 100%;
  height: 100%;
}
.apl-card-title {
  font-size: 18px;
  font-weight: 500;
  color: #2D2C2C;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.apl-card-desc {
  font-size: 15px;
  color: #575654;
  margin: 0;
  line-height: 1.5;
}

/* Featured articles */
.apl-featured {
  background: #ffffff;
  padding: 48px 0 64px;
}
.apl-feat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.apl-feat {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-feat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.apl-feat-eyebrow {
  font-size: 12px;
  color: #007CFB;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}
.apl-feat-title {
  font-size: 20px;
  font-weight: 500;
  color: #2D2C2C;
  margin: 0 0 8px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.apl-feat-desc {
  font-size: 15px;
  color: #575654;
  margin: 0 0 12px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.apl-feat-meta {
  font-size: 12px;
  color: #575654;
  margin: auto 0 0;
  padding-top: 4px;
}

/* ============================================================
   FEATURED BENTO GRID (v64)
   3-column bento with three layout presets:
     - classic     : uniform 3x2, all cards same size (6 slots)
     - editorial   : 2x1 wide top + 1x2 right pillar + 4 standard (7 slots, default)
     - hero-pillar : 1x3 left pillar + 6 standard (7 slots)

   Slot sizing is driven by [data-slot-index="N"] selectors per preset.
   This means the SAME Handlebars markup powers all three presets — only
   CSS responds to settings.featured_layout. Switching presets in admin
   does not require any article re-curation.

   Each card carries .apl-article-card--bento. Standard 1x1 slots hide
   the description; wide and pillar slots show it. Card sizes are tagged
   by data-card-size which script.js infers from preset + slot index.
   ============================================================ */

/* Override the legacy 2-col grid for any preset variant */
.apl-feat-grid--classic,
.apl-feat-grid--editorial,
.apl-feat-grid--hero-pillar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: 14px;
}

/* Bento card base — slots default to "standard" 1x1.
   Card layout: full-bleed banner on top, content padded below. */
.apl-article-card--bento {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 0;
}
.apl-article-card--bento > .apl-feat-eyebrow,
.apl-article-card--bento > .apl-feat-title,
.apl-article-card--bento > .apl-feat-desc,
.apl-article-card--bento > .apl-feat-meta {
  margin-left: 18px;
  margin-right: 18px;
}
.apl-article-card--bento > .apl-feat-eyebrow {
  margin-top: 14px;
}
.apl-article-card--bento > .apl-feat-meta {
  margin-bottom: 16px;
}

/* Hero banner zone (image or section-icon fallback tile) */
.apl-feat-banner {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #F1EFE8;
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}
.apl-feat-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.apl-feat-banner-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.apl-feat-banner-fallback > img,
.apl-feat-banner-fallback > svg {
  width: 38%;
  max-width: 64px;
  height: auto;
  opacity: 0.92;
}

/* Accent tile colors — cycle by slot index modulo 3 (cyan / dark / stone).
   Applied only when banner is in fallback state (no card-only image). */
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="0"] .apl-feat-banner,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="3"] .apl-feat-banner,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="6"] .apl-feat-banner {
  background: linear-gradient(135deg, #00B5C4 0%, #007A85 100%);
}
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="0"] .apl-feat-banner-fallback img,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="3"] .apl-feat-banner-fallback img,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="6"] .apl-feat-banner-fallback img {
  filter: brightness(0) invert(1);
}
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="1"] .apl-feat-banner,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="4"] .apl-feat-banner {
  background: #1A1A1A;
}
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="1"] .apl-feat-banner-fallback img,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="4"] .apl-feat-banner-fallback img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(90%) saturate(2500%) hue-rotate(155deg) brightness(95%) contrast(101%);
}
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="2"] .apl-feat-banner,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="5"] .apl-feat-banner {
  background: #F1EFE8;
}
/* stone tile keeps icon dark — no filter needed */

/* Default: bento cards are standard 1x1 → hide description */
.apl-article-card--bento .apl-feat-desc {
  display: none;
}
/* Wide and pillar slots reveal the description */
.apl-article-card--bento[data-card-size="wide"] .apl-feat-desc,
.apl-article-card--bento[data-card-size="pillar-2"] .apl-feat-desc,
.apl-article-card--bento[data-card-size="pillar-3"] .apl-feat-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tall pillars get more room — banner becomes taller and description shows 3 lines */
.apl-article-card--bento[data-card-size="pillar-2"],
.apl-article-card--bento[data-card-size="pillar-3"] {
  display: flex;
  flex-direction: column;
}
.apl-article-card--bento[data-card-size="pillar-2"] .apl-feat-banner,
.apl-article-card--bento[data-card-size="pillar-3"] .apl-feat-banner {
  aspect-ratio: auto;
  flex: 1 1 55%;
  min-height: 160px;
}
.apl-article-card--bento[data-card-size="pillar-3"] .apl-feat-desc {
  -webkit-line-clamp: 3;
}

/* Wide 2x1 banner — image stretches wider */
.apl-article-card--bento[data-card-size="wide"] .apl-feat-banner {
  aspect-ratio: 32 / 9;
}

/* === CLASSIC PRESET — all 6 slots standard 1x1.
   No size overrides; everything inherits the default. */

/* === EDITORIAL PRESET ===
   Slot 0 = wide 2x1 banner (top)
   Slot 1 = right pillar 1x2
   Slot 2-5 = standard 1x1
   Slot 6 = standard 1x1 (optional overflow row) */
.apl-feat-grid--editorial .apl-article-card--bento[data-slot-index="0"] {
  grid-column: span 2;
  grid-row: span 1;
}
.apl-feat-grid--editorial .apl-article-card--bento[data-slot-index="1"] {
  grid-column: span 1;
  grid-row: span 2;
}

/* === HERO PILLAR PRESET ===
   Slot 0 = tall left pillar 1x3
   Slot 1-6 = standard 1x1 (filling the right two columns) */
.apl-feat-grid--hero-pillar .apl-article-card--bento[data-slot-index="0"] {
  grid-column: span 1;
  grid-row: span 3;
}

/* Responsive breakpoints — preserve anchors, collapse standards */
@media (max-width: 1023px) {
  .apl-feat-grid--classic,
  .apl-feat-grid--editorial,
  .apl-feat-grid--hero-pillar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Wide/pillar slots span full 2-col width on tablet */
  .apl-feat-grid--editorial .apl-article-card--bento[data-slot-index="0"] {
    grid-column: span 2;
    grid-row: span 1;
  }
  .apl-feat-grid--editorial .apl-article-card--bento[data-slot-index="1"] {
    grid-column: span 2;
    grid-row: span 1;
  }
  .apl-feat-grid--hero-pillar .apl-article-card--bento[data-slot-index="0"] {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 480px) {
  .apl-feat-grid--classic,
  .apl-feat-grid--editorial,
  .apl-feat-grid--hero-pillar {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .apl-feat-grid--classic .apl-article-card--bento,
  .apl-feat-grid--editorial .apl-article-card--bento,
  .apl-feat-grid--hero-pillar .apl-article-card--bento {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

/* ============================================================
   INNER-PAGE BENTO (category + section pages, v70)
   When settings.category_layout / settings.section_layout is NOT "none",
   the .apl-article-list gets data-layout="<preset>" and articles get
   data-slot-index="<n>". Per-slot CSS rules below shape each card by
   position. When data-layout="none" (default), these rules don't match
   and the existing 2-col grid + author-marker shapes apply unchanged.

   Slot map mirrors the home-page bento:
     editorial   : slot 0 = 2x1 wide, slot 1 = 1x2 pillar, rest = 1x1
     hero-pillar : slot 0 = 1x3 pillar, rest = 1x1
     classic     : every slot = 1x1 (uniform 3x2 grid)
   Articles beyond the preset's "anchor" slots flow naturally as 1x1
   standard cards thanks to grid auto-flow.
   ============================================================ */

.apl-article-list[data-layout="classic"],
.apl-article-list[data-layout="editorial"],
.apl-article-list[data-layout="hero-pillar"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: 14px;
}

/* Editorial preset on inner pages */
.apl-article-list[data-layout="editorial"] .apl-article-card[data-slot-index="0"] {
  grid-column: span 2;
}
.apl-article-list[data-layout="editorial"] .apl-article-card[data-slot-index="1"] {
  grid-column: span 1;
  grid-row: span 2;
}

/* Hero pillar preset on inner pages */
.apl-article-list[data-layout="hero-pillar"] .apl-article-card[data-slot-index="0"] {
  grid-column: span 1;
  grid-row: span 3;
}

/* Tablet collapse — wide and pillar anchors become full-width */
@media (max-width: 1023px) {
  .apl-article-list[data-layout="classic"],
  .apl-article-list[data-layout="editorial"],
  .apl-article-list[data-layout="hero-pillar"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .apl-article-list[data-layout="editorial"] .apl-article-card[data-slot-index="0"],
  .apl-article-list[data-layout="editorial"] .apl-article-card[data-slot-index="1"] {
    grid-column: span 2;
    grid-row: span 1;
  }
  .apl-article-list[data-layout="hero-pillar"] .apl-article-card[data-slot-index="0"] {
    grid-column: span 2;
    grid-row: span 1;
  }
}

/* Narrow-phone collapse — single column, all cards span 1 */
@media (max-width: 480px) {
  .apl-article-list[data-layout="classic"],
  .apl-article-list[data-layout="editorial"],
  .apl-article-list[data-layout="hero-pillar"] {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .apl-article-list[data-layout] .apl-article-card {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

/* === Empty description hide (v73) ===
   Cards no longer render an auto-excerpt — description is empty by
   default and populated only when the article has <p class="card-summary">
   in its body. This rule hides empty desc elements so cards stay clean
   when no summary is provided. script.js also sets inline display:none
   after parsing, but :empty here prevents any flash of empty space
   between template render and JS hydration. */
.apl-feat-desc:empty,
.apl-article-card-desc:empty {
  display: none !important;
}

/* ============================================================
   ALERT BANNER (v76) — home page only, above the main header
   Lives at the top of header.hbs (before the <header> element).
   When script.js injects content, the banner pins to top: 0 with
   position: sticky so it stays visible during scroll. The main
   header sits below it and stacks via top: var(--alert-height).

   Inner content is wrapped in a .container element so the horizontal
   margins (logo / search / CTA edges) line up with the main header.
   Background spans full viewport width; content is constrained.

   Two label variants share layout and only diverge on color:
     .apl-alert--alert  → red,  for outages / incidents
     .apl-alert--info   → cyan, for announcements / scheduled events

   Highest severity wins (script.js): if any `alert` articles are
   active, only those render. Otherwise `info` articles render.
   Non-dismissible on desktop; dismissible on mobile (≤640px).
   ============================================================ */

.apl-alert-banner {
  /* Empty by default — zero layout impact until JS populates. */
}
.apl-alert-banner[data-active="1"] {
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* v77: must sit above Zenplates' .sticky-top (z-index: 97) so the
     alert stays visible above the header when both are pinned. */
  z-index: 100;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
}
.apl-alert-banner[data-severity="alert"] { background: #FBEEEC; }
.apl-alert-banner[data-severity="info"] { background: #E6F7F9; }

/* When the alert is active, push the sticky-header offset down to make
   room. JS sets --apl-alert-height on <html> after measuring AND also
   applies inline style.top to header.header directly (see script.js
   measureAndPublishHeight) — these CSS rules are defense-in-depth so
   the offset works even if the inline style is somehow cleared. */
html[data-has-alert="1"] header.header,
html[data-has-alert="1"] header.header.sticky-header,
html[data-has-alert="1"] header.header.sticky-top,
html[data-has-alert="1"] header.header.fixed-header,
html[data-has-alert="1"] .sticky-header,
html[data-has-alert="1"] .sticky-top,
html[data-has-alert="1"] .fixed-header {
  top: var(--apl-alert-height, 0px) !important;
}

.apl-alert {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  align-items: flex-start;
  position: relative;
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* v79: consistent height across carousel. JS measures the tallest
     alert in the active set and writes that pixel value to
     --apl-alert-min-height on the .apl-alert-banner wrapper. Every
     alert in the carousel then has at least that height, so cycling
     doesn't jump the page. */
  min-height: var(--apl-alert-min-height, auto);
  box-sizing: border-box;
  /* v81: slide-in + fade transition. The .apl-alert--entering class
     (set briefly by script.js when a new slot is rendered) shifts the
     new alert 40px to the right and hides it; removing the class
     triggers a transition back to translateX(0) opacity 1. */
  transform: translateX(0);
  opacity: 1;
  transition:
    transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 240ms ease-out;
}
.apl-alert.apl-alert--entering {
  transform: translateX(40px);
  opacity: 0;
}
.apl-alert__icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}
.apl-alert__content {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}
.apl-alert__row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2px;
  gap: 14px;
}
.apl-alert__title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}
.apl-alert__timestamp {
  font-size: 10.5px;
  opacity: 0.65;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
/* v81: counter sits at the right end of the footer row, on the same
   horizontal line as the CTA pill and the dots. The footer's flex
   layout pushes it to the far right via margin-left: auto. */
.apl-alert__counter {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.apl-alert__desc {
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 4px;
}
/* v81: footer row that consolidates CTA + dots + counter on a single
   line at the bottom of each alert. CTA is a tinted-background pill;
   dots are absolutely centered between CTA and counter; counter sits
   right-aligned at the end of the row. */
.apl-alert__footer {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 8px;
  gap: 12px;
}
.apl-alert__cta {
  font-size: 11.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  /* v81: pill shape, severity-tinted background. */
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05); /* overridden by severity rules below */
  transition: background 180ms ease, transform 180ms ease;
}
.apl-alert__cta:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.apl-alert__cta svg,
.apl-alert__cta i {
  font-size: 11px;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-alert__cta:hover svg,
.apl-alert__cta:hover i { transform: translateX(2px); }

/* Dismiss button — hidden on desktop, visible on mobile (rules below). */
.apl-alert__dismiss {
  display: none;
}

/* Severity coloring — applies to inner text (background is on the
   sticky banner wrapper above). CTA pill gets a tinted background
   from the same severity color family.
   v82: primary colors are admin-overridable via theme settings.
   JS writes --apl-alert-color-critical / --apl-alert-color-info to
   the banner element after reading from window.Theme.settings.
   The CSS fallback values preserve the original v76+ palette. */
.apl-alert--alert { color: #501313; }
.apl-alert--alert .apl-alert__icon { color: var(--apl-alert-color-critical, #A32D2D); }
.apl-alert--alert .apl-alert__desc { color: #791F1F; }
.apl-alert--alert .apl-alert__cta {
  color: var(--apl-alert-color-critical, #A32D2D);
  background: var(--apl-alert-cta-bg-critical, rgba(163, 45, 45, 0.12));
}
.apl-alert--alert .apl-alert__cta:hover {
  background: var(--apl-alert-cta-bg-critical-hover, rgba(163, 45, 45, 0.18));
}
.apl-alert--alert .apl-alert__timestamp { color: rgba(80,19,19,0.65); }

.apl-alert--info { color: #003D45; }
.apl-alert--info .apl-alert__icon { color: var(--apl-alert-color-info, #00B5C4); }
.apl-alert--info .apl-alert__desc { color: #007A85; }
.apl-alert--info .apl-alert__cta {
  color: var(--apl-alert-color-info, #007A85);
  background: var(--apl-alert-cta-bg-info, rgba(0, 181, 196, 0.15));
}
.apl-alert--info .apl-alert__cta:hover {
  background: var(--apl-alert-cta-bg-info-hover, rgba(0, 181, 196, 0.22));
}
.apl-alert--info .apl-alert__timestamp { color: rgba(0,61,69,0.65); }

/* Carousel dots row — v81: dots are now INSIDE the alert's footer row.
   Absolutely centered between the CTA (left) and counter (right). */
.apl-alert-dots {
  display: flex;
  gap: 6px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.apl-alert-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background 180ms, width 180ms;
  padding: 0;
  border: none;
}
.apl-alert-dot.is-active { width: 20px; border-radius: 3px; }
.apl-alert-banner[data-severity="alert"] .apl-alert-dot.is-active { background: var(--apl-alert-color-critical, #A32D2D); }
.apl-alert-banner[data-severity="info"] .apl-alert-dot.is-active { background: var(--apl-alert-color-info, #00B5C4); }
.apl-alert-dot:focus { outline: 2px solid currentColor; outline-offset: 2px; }

/* === Mobile (≤640px) — tighter layout + visible dismiss === */
@media (max-width: 640px) {
  .apl-alert {
    padding: 8px 0 9px;
    gap: 9px;
  }
  .apl-alert__icon { font-size: 15px; }
  .apl-alert__row1 {
    margin-bottom: 1px;
    gap: 8px;
  }
  .apl-alert__title {
    font-size: 11.5px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .apl-alert__timestamp { font-size: 9.5px; }
  .apl-alert__desc {
    font-size: 10.5px;
    line-height: 1.4;
    margin: 1px 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .apl-alert__cta { font-size: 10.5px; }
  .apl-alert__content { padding-right: 24px; }
  .apl-alert__dismiss {
    display: flex;
    position: absolute;
    right: 0;
    top: 4px;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 0;
  }
  .apl-alert__dismiss svg { width: 12px; height: 12px; }
  .apl-alert--alert .apl-alert__dismiss { color: #A32D2D; }
  .apl-alert--info .apl-alert__dismiss { color: #007A85; }
  .apl-alert__dismiss:hover,
  .apl-alert__dismiss:focus { opacity: 1; }

  /* v81: counter is now part of the footer row (flex layout) — just
     resize the font for mobile, no positioning override needed. */
  .apl-alert__counter {
    font-size: 9.5px;
  }
  /* v81: mobile CTA pill — tighter padding and smaller font. */
  .apl-alert__cta {
    padding: 4px 10px;
    font-size: 10.5px;
    gap: 4px;
  }
  .apl-alert__footer {
    margin-top: 6px;
    gap: 8px;
  }
  .apl-alert-dots {
    /* On mobile, smaller dots so the centered cluster fits between
       the CTA pill and the counter. */
    gap: 5px;
  }
  .apl-alert-dot {
    width: 5px;
    height: 5px;
  }
  .apl-alert-dot.is-active {
    width: 16px;
  }
}

/* Still need help */
.apl-support {
  background: #F9F9F8;
  padding: 56px 0;
  text-align: center;
}
.apl-support-inner {
  max-width: 560px;
}
.apl-support-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #2D2C2C;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.apl-support-desc {
  font-size: 15px;
  color: #575654;
  margin: 0 0 24px;
}
.apl-support-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.apl-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 9999px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 500;
  color: #2D2C2C;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.apl-support-btn:hover {
  transform: translateY(-1px);
  background: #ffffff;
}
.apl-support-btn.primary {
  background: #2D2C2C;
  color: #ffffff;
  border-color: #2D2C2C;
}
.apl-support-btn.primary:hover {
  background: #2D2C2C;
  border-color: #2D2C2C;
}

/* In-app webview: hide elements that would loop or external-open */
body.in-app-webview .apl-support-btn:not(.primary) {
  display: none !important;
}

/* iOS / Android platform hooks (use these to customize CTA per platform) */
/* Example: body[data-platform="ios"] .header-cta { ...App Store badge... } */
/* Example: body[data-platform="android"] .header-cta { ...Play Store badge... } */

/* Mobile: cards stack 2-up, then 1-up */
@media (max-width: 768px) {
  .apl-hero {
    padding: 40px 20px 32px;
  }
  .apl-hero-title {
    font-size: 40px;
  }
  .apl-cat-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Featured grid stays 2-col on tablet — collapse to 1-col below */
  .apl-feat {
    padding: 18px 20px;
  }
  .apl-feat-title {
    font-size: 18px;
  }
  .apl-section-title {
    font-size: 26px;
  }
  .apl-cats,
  .apl-featured {
    padding: 32px 0 40px;
  }
  .apl-support {
    padding: 40px 0;
  }
}
@media (max-width: 480px) {
  .apl-cat-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .apl-feat-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .apl-card {
    padding: 18px 16px;
  }
}


/* ============================================================
   APPLE-INSPIRED INNER PAGES
   Compact page hero + article card list + support strip.
   Used by category_page.hbs and section_page.hbs.
   ============================================================ */

/* Compact page hero (replaces the big decorative hero on inner pages) */
.apl-page-hero {
  background: #ffffff;
  padding: 32px 0 24px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.apl-page-hero header {
  margin: 0;
}
.apl-page-hero .article-breadcrumbs {
  margin-bottom: 8px;
}
.apl-page-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #2D2C2C;
  margin: 0 0 6px;
  line-height: 1.15;
}
.apl-page-desc {
  font-size: 16px;
  color: #575654;
  margin: 0;
  line-height: 1.5;
  max-width: 680px;
}
.apl-subscribe {
  margin-top: 14px;
}

/* Content area with section blocks + article cards */
.apl-content {
  background: #F9F9F8;
  padding: 32px 0 64px;
}
.apl-section-block {
  margin-bottom: 32px;
}
.apl-section-block:last-child {
  margin-bottom: 0;
}
.apl-section-name {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #2D2C2C;
  margin: 0 0 14px;
}
.apl-section-name a {
  color: inherit;
  text-decoration: none;
}
.apl-section-name a:hover {
  color: #007CFB;
  text-decoration: none;
}

/* Article cards */
.apl-article-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 768px) {
  .apl-article-list {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
.apl-article-card {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
}
.apl-article-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #2D2C2C;
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.apl-article-card-desc {
  font-size: 13px;
  color: #575654;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.apl-article-card-meta {
  font-size: 11.5px;
  color: #575654;
  margin: 4px 0 0;
}
.apl-article-lock {
  fill: currentColor;
  color: #575654;
  flex-shrink: 0;
}

/* "Show all articles" link card */
.apl-article-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #007CFB;
  text-decoration: none;
  letter-spacing: -0.005em;
}
.apl-article-card-more:hover {
  color: #0064CB;
  text-decoration: none;
}
.apl-article-card-more svg {
  transition: transform 200ms ease;
}
.apl-article-card-more:hover svg {
  transform: translateX(2px);
}

/* Empty state */
.apl-empty {
  font-size: 14px;
  color: #575654;
  margin: 0;
  padding: 24px;
  text-align: center;
  background: #ffffff;
  border-radius: 12px;
  border: 0.5px dashed rgba(0, 0, 0, 0.1);
}
.apl-empty a {
  color: #007CFB;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .apl-page-hero {
    padding: 24px 0 18px;
  }
  .apl-page-title {
    font-size: 24px;
  }
  .apl-page-desc {
    font-size: 14px;
  }
  .apl-content {
    padding: 24px 0 40px;
  }
  .apl-section-name {
    font-size: 17px;
  }
}


/* ============================================================
   SEARCH HIGHLIGHTING
   Wraps matching query terms in <mark class="search-hl"> via
   script.js. Uses the same blue accent we use elsewhere.
   ============================================================ */
/* v110: match the snippet <em> treatment so result-card titles and
   bodies share one visual language for query matches. Previously
   (v58) title marks were font-weight 500 against a bold (600)
   title, which read as the OPPOSITE of highlighted — matched words
   looked LESS emphasized than the surrounding title. Now: same
   bold cyan as snippet em. The stopword filter in script.js
   (around line 549) prevents marks from being wrapped around
   noise words in the first place, so this style only ever lands
   on content words. */
mark.search-hl {
  background: transparent;
  color: #007CFB;
  padding: 0;
  border-radius: 0;
  font-weight: 600;
}

/* Article support strip variant (lighter top spacing since it
   follows article content directly, not a separate page section) */
.apl-support--article {
  margin-top: 32px;
  border-radius: 16px;
}


/* ============================================================
   SEARCH RESULTS EMPTY STATE
   Shown when no results match the query.
   ============================================================ */
.apl-noresults {
  text-align: center;
  padding: 48px 24px;
  background: #ffffff;
  border-radius: 16px;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  margin: 24px 0;
}
.apl-noresults svg {
  color: #575654;
  margin-bottom: 16px;
}
.apl-noresults-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #2D2C2C;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.apl-noresults-desc {
  font-size: 14px;
  color: #575654;
  margin: 0 0 24px;
}
.apl-noresults-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}


/* ============================================================
   ARTICLE CARD READING TIME
   Lays out "X min read · Updated Y" cleanly in the meta line.
   ============================================================ */
.apl-article-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.apl-card-rt:empty {
  display: none;
}
.apl-card-meta-sep:empty {
  display: none;
}
.apl-card-rt {
  font-weight: 500;
  color: #575654;
}

/* Home featured card meta — separator hidden, just shows reading time */
.apl-feat .apl-card-meta-sep {
  display: none;
}


/* ============================================================
   ARTICLE VOTING — Apple-inspired
   "Was this article helpful?" card + Yes/No pill buttons +
   structured follow-up shown when user votes No.
   ============================================================ */
.apl-vote {
  background: #F9F9F8;
  border-radius: 16px;
  padding: 28px 24px;
  margin: 32px 0;
  text-align: center;
}
.apl-vote-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #2D2C2C;
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}
.apl-vote-buttons {
  display: inline-flex;
  gap: 10px;
  margin-bottom: 12px;
}
.apl-vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 10px 22px;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  color: #2D2C2C;
  font-family: inherit;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.apl-vote-btn:hover {
  transform: translateY(-1px);
  background: #F3F2F0;
  border-color: rgba(0, 0, 0, 0.25);
}
.apl-vote-btn.is-active {
  background: #2D2C2C;
  color: #ffffff;
  border-color: #2D2C2C;
}
.apl-vote-btn.is-active:hover {
  background: #2D2C2C;
}
.apl-vote-label {
  display: block;
  font-size: 12.5px;
  color: #575654;
  margin: 0;
}

/* Structured follow-up shown after "No" */
.apl-vote-followup {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}
.apl-vote-followup-title {
  font-size: 14px;
  font-weight: 500;
  color: #2D2C2C;
  margin: 0 0 12px;
}
.apl-vote-reasons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.apl-vote-reason {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 9999px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: #2D2C2C;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.apl-vote-reason:hover {
  background: #F3F2F0;
  border-color: rgba(0, 0, 0, 0.2);
}
.apl-vote-reason.is-selected {
  background: #F3F2F0;
  border-color: #007CFB;
  color: #007CFB;
  font-weight: 500;
}
.apl-vote-followup-cta {
  font-size: 13px;
  color: #575654;
  margin: 0;
}
.apl-vote-contact-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #007CFB;
  cursor: pointer;
  font-weight: 500;
}
.apl-vote-contact-link:hover {
  text-decoration: underline;
}


/* ============================================================
   ARTICLE BODY TYPOGRAPHY — Apple-inspired scale
   Tightens heading sizes, line-height, paragraph spacing in
   article content. Applies only inside [itemprop="articleBody"]
   so it doesn't affect navigation chrome.
   ============================================================ */
[itemprop="articleBody"] {
  font-size: 16px;
  line-height: 1.6;
  color: #2D2C2C;
}
[itemprop="articleBody"] p {
  margin: 0 0 16px;
}
[itemprop="articleBody"] h1 {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #2D2C2C;
  margin: 32px 0 12px;
}
[itemprop="articleBody"] h2 {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: #2D2C2C;
  margin: 28px 0 10px;
}
[itemprop="articleBody"] h3 {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: #2D2C2C;
  margin: 24px 0 8px;
}
[itemprop="articleBody"] h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2D2C2C;
  margin: 20px 0 8px;
}
[itemprop="articleBody"] ul,
[itemprop="articleBody"] ol {
  margin: 0 0 16px;
  padding-left: 24px;
}
[itemprop="articleBody"] li {
  margin: 0 0 6px;
  line-height: 1.55;
}
[itemprop="articleBody"] a {
  color: #007CFB;
}
[itemprop="articleBody"] a:hover {
  color: #0064CB;
}
[itemprop="articleBody"] blockquote {
  margin: 20px 0;
  padding: 12px 18px;
  background: #F9F9F8;
  border-left: 3px solid #007CFB;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #575654;
}
[itemprop="articleBody"] code {
  background: #F9F9F8;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #2D2C2C;
}
[itemprop="articleBody"] pre {
  background: #F9F9F8;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 16px 0;
}
[itemprop="articleBody"] pre code {
  background: transparent;
  padding: 0;
}
[itemprop="articleBody"] hr {
  border: none;
  border-top: 0.5px solid rgba(0, 0, 0, 0.1);
  margin: 32px 0;
}
[itemprop="articleBody"] img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 12px 0;
}


/* ============================================================
   ARTICLE META (reading time + updated date)
   Stand-alone, always visible regardless of article_metadata setting.
   ============================================================ */
.apl-article-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 4px 0 12px;
  font-size: 13px;
  color: #575654;
}
.apl-article-meta li {
  margin: 0;
}
.apl-article-meta .apl-article-reading-time {
  font-weight: 500;
  color: #575654;
}


/* ============================================================
   PHASE COHESIVE — neutralize old gray strips on internal pages
   The remaining theme templates (requests, profile, subscriptions,
   etc.) render their breadcrumbs inside <div class="bg-gray-100">
   strips. Restyle them to match the design system (light background,
   no heavy weight, tighter spacing) without rewriting each template.
   ============================================================ */
.bg-gray-100 {
  background: #F9F9F8 !important;
}

/* Specifically tighten and clean the breadcrumb strips that sit
   between hero/header and page-container on internal pages */
.bg-gray-100.pt-4,
.bg-gray-100.pt-5,
.bg-gray-100.pt-5.pb-1 {
  padding: 12px 0 !important;
  background: #ffffff !important;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.bg-gray-100 .breadcrumbs {
  margin-bottom: 0;
  font-size: 0.8125rem;
}
.bg-gray-100 .breadcrumbs li {
  color: #575654;
}
.bg-gray-100 .breadcrumbs li:last-child {
  color: #2D2C2C;
}
/* Skip "World ID Help Center" root on these strips too */
.bg-gray-100 .breadcrumbs > li:first-child {
  display: none;
}
.bg-gray-100 .breadcrumbs > li:first-child + li::before {
  display: none;
}
.bg-gray-100 .breadcrumbs > li:first-child + li {
  padding-left: 0;
}


/* ============================================================
   PHASE COHESIVE — footer compaction
   Tighten the existing 1066-line footer template without
   rewriting its conditional logic. Reduces visual weight to
   match the Apple-minimal language.
   ============================================================ */
.footer {
  background: #ffffff !important;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08) !important;
  padding-top: 32px !important;
  padding-bottom: 24px !important;
  margin-top: 48px !important;
}
.footer .svg-shape {
  display: none !important;
}
.footer .nav-link,
.footer .footer-link {
  font-size: 13px !important;
  color: #575654 !important;
  padding: 4px 12px !important;
  text-decoration: none;
  letter-spacing: -0.005em;
}
.footer .nav-link:hover,
.footer .footer-link:hover {
  color: #2D2C2C !important;
}
.footer h2,
.footer h3,
.footer .footer-heading {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #2D2C2C !important;
  letter-spacing: -0.005em;
  margin-bottom: 12px !important;
}
.footer p,
.footer .text-base {
  font-size: 12px !important;
  color: #575654 !important;
}
/* Powered-by-zendesk row */
.powered-by-zendesk {
  font-size: 11px !important;
  color: #575654 !important;
  padding: 12px 0 !important;
  background: #ffffff !important;
  border-top: 0.5px solid rgba(0, 0, 0, 0.05) !important;
}


/* ============================================================
   PHASE COHESIVE — internal page chrome
   Apply container padding and consistent spacing for pages that
   still use the original page-container structure (requests,
   profile, subscriptions, contributions, new_request).
   ============================================================ */
.requests-page .page-container,
.user-profile-page .page-container,
.subscriptions-page .page-container,
.contributions-page .page-container,
.request-page .page-container,
.new-request-page .page-container {
  max-width: 980px;
  padding-top: 24px;
}
.requests-page h1,
.user-profile-page h1,
.subscriptions-page h1,
.contributions-page h1,
.request-page h1,
.new-request-page h1,
.new-community-post-page h1 {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #2D2C2C;
  line-height: 1.2;
  margin: 16px 0 8px;
}
.requests-page h2,
.user-profile-page h2,
.subscriptions-page h2,
.contributions-page h2 {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #2D2C2C;
  letter-spacing: -0.005em;
}


/* ============================================================
   REMOVE REDUNDANT BREADCRUMB EYEBROW ON CATEGORY/SECTION PAGES
   On category pages, after hiding the "World ID Help Center"
   root, the only remaining breadcrumb item is the category
   itself — which exactly duplicates the <h1>. Hide entirely.
   On section pages, hide just the last item (the section name,
   which duplicates the <h1>), leaving the category as parent
   context above the title.
   ============================================================ */

/* Category pages — hide the whole eyebrow */
html.category-page .article-breadcrumbs {
  display: none;
}

/* Section pages — hide just the last item (section name = h1) */
html.section-page .article-breadcrumbs .breadcrumbs > li:last-child {
  display: none;
}


/* ============================================================
   FEATURED ARTICLE CARD (promoted in section)
   When an article inside a section's article list is marked
   "Promoted" in Zendesk admin, it gets .apl-article-card--featured
   class. Spans both columns of the 2-col grid, with a Featured
   badge and slightly more prominent styling.
   ============================================================ */
.apl-article-card--featured {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #ffffff 0%, #F3F2F0 100%);
  border-color: rgba(0, 102, 204, 0.18);
  padding: 22px 26px;
}
.apl-article-card--featured .apl-article-card-title {
  font-size: 17px;
  letter-spacing: -0.005em;
}
.apl-article-card--featured .apl-article-card-desc {
  font-size: 14px;
  -webkit-line-clamp: 3;
}
.apl-article-card-badge {
  display: inline-block;
  font-size: 10px;
  color: #007CFB;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  padding: 3px 9px;
  background: #ffffff;
  border-radius: 9999px;
  border: 0.5px solid rgba(0, 102, 204, 0.25);
  width: fit-content;
}

/* Section name on category page — no link, just a heading */
.apl-section-name {
  color: #2D2C2C;
}

/* Mobile: featured cards still span the only column (1fr) */
@media (max-width: 480px) {
  .apl-article-card--featured {
    grid-column: 1 / -1;
    padding: 18px 18px;
  }
}


/* ============================================================
   ARTICLE CARD ICON
   Section-based inline SVG icon at top-left of each card.
   Injected by script.js based on the section name (keyword
   match). Falls back to generic article icon.
   ============================================================ */
.apl-article-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 0 12px;
  color: #2D2C2C;
  background: #F9F9F8;
  border-radius: 8px;
  flex-shrink: 0;
}
.apl-article-card-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Featured card variant — slightly larger icon, tinted background */
.apl-article-card--featured .apl-article-card-icon {
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 0.5px solid rgba(0, 102, 204, 0.18);
}
.apl-article-card--featured .apl-article-card-icon svg {
  width: 20px;
  height: 20px;
  color: #007CFB;
}

/* Home page featured card — icon at top */
.apl-feat .apl-article-card-icon {
  margin-bottom: 14px;
}

/* Mobile — slightly smaller icon */
@media (max-width: 480px) {
  .apl-article-card-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
  }
  .apl-article-card-icon svg {
    width: 16px;
    height: 16px;
  }
}


/* ============================================================
   V3 — CATEGORY PAGE REDESIGN
   Section emblems + three card shapes (standard / wide featured /
   pillar tall) + optional banner images on featured/pillar cards.
   Per-card icons are retired; only section emblems carry icon
   weight now. Appended last so it overrides earlier rules.
   ============================================================ */

/* --- Section block: bigger heading, generous gap, thin rule --- */
.apl-section-block {
  margin: 0 0 96px;
  padding: 0 0 96px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}
.apl-section-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Section heading row: emblem + h2 side by side */
.apl-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
}
.apl-section-emblem {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #F3F2F0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #007CFB;
}
.apl-section-emblem svg {
  width: 32px;
  height: 32px;
  display: block;
}
/* Override earlier .apl-section-name rules */
.apl-section-block > .apl-section-header > .apl-section-name,
.apl-section-block > .apl-section-name {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #2D2C2C;
  margin: 0;
  line-height: 1.2;
}

/* --- Article list grid: 2 cols, supports row/col spans --- */
.apl-article-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  gap: 16px;
}
@media (min-width: 768px) {
  .apl-article-list {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    gap: 16px;
  }
}

/* --- Standard card (1x1) — text-only, no per-card icon --- */
.apl-article-card {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: inherit;
}

/* Retire the per-card icon — emblem-only now */
.apl-article-card-icon { display: none !important; }

/* Title — Apple-ish weight 500 + tighter tracking */
.apl-article-card-title {
  font-size: 16px;
  font-weight: 500;
  color: #2D2C2C;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Description — 3-line clamp (no mid-word "...") */
.apl-article-card-desc {
  font-size: 13px;
  color: #575654;
  margin: 0;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Banner (top strip of featured / pillar cards) --- */
.apl-card-banner {
  width: calc(100% + 40px);
  margin: -20px -20px 14px;
  background: linear-gradient(135deg, #2D2C2C 0%, #1F3A5F 60%, #007CFB 100%);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.apl-card-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.08) 0, transparent 50%);
  pointer-events: none;
}
.apl-card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

/* === Banner fallback target (v69) ===
   When script.js can't find a card-only image in the body, it injects the
   section's icon (or a generic 2x2 SVG) into [data-fallback-target] and
   tags the card with data-banner-style="fallback". Default state: hidden
   (zero size, no impact). Active state: visible, centered icon. */
.apl-card-banner-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.apl-card-banner-fallback > img,
.apl-card-banner-fallback > svg {
  width: 38%;
  max-width: 56px;
  height: auto;
  opacity: 0.92;
}

/* Fallback active state — featured/pillar cards on category/section pages
   only. Home bento cards have their own slot-index cycling palette
   (see "FEATURED BENTO GRID" block above). For inner pages we use a single
   cyan accent so cards across a section read as a set. */
.apl-article-card--featured[data-banner-style="fallback"] .apl-card-banner,
.apl-article-card--pillar[data-banner-style="fallback"] .apl-card-banner {
  background: linear-gradient(135deg, #00B5C4 0%, #007A85 100%);
}
.apl-article-card--featured[data-banner-style="fallback"] .apl-card-banner::after,
.apl-article-card--pillar[data-banner-style="fallback"] .apl-card-banner::after {
  /* suppress the radial overlay when we're showing an icon — keeps the
     cyan accent flat and the icon high-contrast */
  display: none;
}
.apl-article-card--featured[data-banner-style="fallback"] .apl-card-banner-fallback > img,
.apl-article-card--pillar[data-banner-style="fallback"] .apl-card-banner-fallback > img {
  /* invert so dark/grayscale section SVGs read as white on the cyan tile */
  filter: brightness(0) invert(1);
}
.apl-article-card--featured[data-banner-style="fallback"] .apl-card-banner-fallback > svg,
.apl-article-card--pillar[data-banner-style="fallback"] .apl-card-banner-fallback > svg {
  color: #ffffff;
}

/* --- Featured wide card (2x1) — spans both columns --- */
.apl-article-card--featured {
  grid-column: span 2;
  background: #ffffff;
  border-color: rgba(0, 102, 204, 0.15);
  padding: 20px;
}
.apl-article-card--featured .apl-card-banner {
  height: 140px;
}
.apl-article-card--featured .apl-article-card-title {
  font-size: 18px;
}
.apl-article-card--featured .apl-article-card-desc {
  font-size: 13.5px;
  -webkit-line-clamp: 2;
}

/* --- Pillar card (1x2) — spans both rows on the left --- */
.apl-article-card--pillar {
  grid-row: span 2;
  background: #ffffff;
  border-color: rgba(0, 102, 204, 0.15);
}
.apl-article-card--pillar .apl-card-banner {
  height: 220px;
}
.apl-article-card--pillar .apl-article-card-title {
  font-size: 19px;
  line-height: 1.25;
}
.apl-article-card--pillar .apl-article-card-desc {
  font-size: 13.5px;
  -webkit-line-clamp: 5;
}

/* Featured eyebrow — keep but lighter than the previous pill badge */
.apl-article-card--featured .apl-article-card-badge,
.apl-article-card--pillar .apl-article-card-badge {
  display: inline-block;
  font-size: 10.5px;
  color: #007CFB;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 4px;
  padding: 0;
  background: transparent;
  border: none;
  width: auto;
}

/* --- Author-controlled card image (Mode B) ---
   Authors add class="card-only" to a body image; it's hidden
   from the article body but extracted by script.js as the card
   hero banner. */
.article-body img.card-only,
.article-content img.card-only,
.apl-article-body img.card-only {
  display: none !important;
}

/* --- Author-controlled card summary ---
   Authors add <p class="card-summary">...</p> at the top of an
   article body. script.js uses that as the card description.
   We hide it from the article body itself so it doesn't read as
   a redundant lead paragraph. */
.article-body p.card-summary,
.article-content p.card-summary,
.apl-article-body p.card-summary,
.article-body .card-summary,
.article-content .card-summary,
.apl-article-body .card-summary {
  display: none !important;
}

/* --- Author-controlled pillar marker ---
   Authors add <span class="card-pillar" hidden></span> anywhere
   in the article body. script.js uses it to upgrade promoted
   cards to the tall pillar shape. Hide from body display in case
   author forgets the hidden attribute. */
.article-body .card-pillar,
.article-content .card-pillar,
.apl-article-body .card-pillar,
.article-body [data-card-shape],
.article-content [data-card-shape],
.apl-article-body [data-card-shape] {
  display: none !important;
}

/* --- Sticky bar dedup (category pages only) ---
   On category pages the breadcrumb leaf == the page title, so
   the sticky bar showed the same name twice. Hide the
   breadcrumb crumbs there; the title carries the context. */
html.category-page .article-sticky-bar__crumbs {
  display: none;
}

/* --- Mobile collapse: all cards become 1×1 stacked --- */
@media (max-width: 768px) {
  .apl-section-block {
    margin-bottom: 56px;
    padding-bottom: 56px;
  }
  .apl-section-block > .apl-section-header > .apl-section-name,
  .apl-section-block > .apl-section-name {
    font-size: 22px;
  }
  .apl-section-emblem {
    width: 44px;
    height: 44px;
  }
  .apl-section-emblem svg {
    width: 24px;
    height: 24px;
  }
  .apl-article-card--featured,
  .apl-article-card--pillar {
    grid-column: span 1;
    grid-row: span 1;
  }
  .apl-article-card--featured .apl-card-banner,
  .apl-article-card--pillar .apl-card-banner {
    height: 140px;
  }
  .apl-article-card--pillar .apl-article-card-desc {
    -webkit-line-clamp: 3;
  }
}


/* v20 reveal-on-scroll-up + mobile search FAB — removed v41 cleanup
   (header reveal superseded in v30 by `html.is-scrolling-down header.header
   { transform: none !important }`; FAB retired in v30, see global
   `.mobile-search-fab, #apl-mobile-search-fab { display: none !important }`) */


/* ============================================================
   V22 — POLISH PASS
   1. Tighter section spacing (56px, no hairline rule)
   2. Featured card: banner on the left, text on the right
      (vertical split instead of horizontal)
   3. Sleeker main header (60px tall vs 88px)
   4. Bolder headings throughout (weight 600 instead of 500)
   ============================================================ */

/* --- 1. Section spacing — whitespace only, no rule --- */
.apl-section-block {
  margin: 0 0 56px !important;
  padding: 0 !important;
  border-bottom: none !important;
}
.apl-section-block:last-child {
  margin-bottom: 0 !important;
}

/* --- 2. Card body wrapper holds padding now (was on the card) --- */
/* v98: bumped padding 20->24 + gap 6->8 for breathing room on category/section
   cards. Compact (text-only) override below was also relaxed -- it used to
   force padding-top:0 which made non-promoted cards' titles hug the top edge. */
.apl-article-card {
  padding: 0;
}
.apl-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0; /* prevent flex item overflow */
}

/* Wide featured card — banner LEFT, text RIGHT (vertical split) */
.apl-article-card--featured {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
}
.apl-article-card--featured .apl-card-banner {
  width: 38%;
  flex-shrink: 0;
  min-height: 200px;
  height: auto;
  margin: 0;
}
.apl-article-card--featured .apl-card-body {
  padding: 24px 28px; /* v98: aligned w/ 24px base rhythm */
  justify-content: center;
}

/* Pillar card — keep banner on top, text below (works for tall cards) */
.apl-article-card--pillar {
  flex-direction: column;
  padding: 0;
}
.apl-article-card--pillar .apl-card-banner {
  width: 100%;
  margin: 0;
}
.apl-article-card--pillar .apl-card-body {
  padding: 24px; /* v98: matched base */
}

/* Mobile: featured card collapses to banner-on-top (1 column) */
@media (max-width: 768px) {
  .apl-article-card--featured {
    flex-direction: column;
  }
  .apl-article-card--featured .apl-card-banner {
    width: 100%;
    height: 140px;
    min-height: 0;
  }
  .apl-article-card--featured .apl-card-body {
    padding: 20px 24px; /* v98: scaled to match new 24px desktop rhythm */
  }
  .apl-section-block {
    margin-bottom: 40px !important;
  }
}

/* --- 3. Sleeker main header — reduce 88px to 60px --- */
header.header {
  height: 60px !important;
}
main {
  margin-top: 60px !important;
}
/* Re-tighten internal navbar vertical alignment */
header.header .navbar {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 60px;
}

/* --- 4. Headings use Medium (brand-sanctioned max weight) --- */
.apl-hero-title,
.apl-hero-title-muted,
.apl-section-title,
.apl-section-name,
.apl-page-title,
.apl-article-card-title,
.apl-feat-title,
.apl-card-title,
.apl-support-title {
  font-weight: 500 !important;
}
.apl-article-card--featured .apl-article-card-title,
.apl-article-card--pillar .apl-article-card-title {
  font-weight: 500 !important;
}
/* Article body headings */
.article-body h1, .article-content h1, .apl-article-body h1,
.article-body h2, .article-content h2, .apl-article-body h2,
.article-body h3, .article-content h3, .apl-article-body h3 {
  font-weight: 500 !important;
}


/* ============================================================
   V23 — IMAGE RATIO / POSITION + REMOVE FEATURED LABEL
   Author markers (in article body):
     <span class="card-image" data-ratio="..." data-position="..." hidden></span>
   data-ratio: third | half | full   (default: half)
   data-position: left | right       (ignored for ratio=full)
   ============================================================ */

/* --- Remove the visible "Featured" label across all cards ---
   The non-standard size now carries the meaning of "featured". */
.apl-article-card-badge {
  display: none !important;
}

/* --- Hide the marker element itself from article body view --- */
.article-body .card-image,
.article-content .card-image,
.apl-article-body .card-image {
  display: none !important;
}

/* --- Default featured card: image LEFT, half width (was 38%) --- */
.apl-article-card--featured .apl-card-banner {
  width: 50%;
}

/* --- Ratio: 1/3 (third) --- */
.apl-article-card--featured[data-image-ratio="third"] .apl-card-banner {
  width: 33.333%;
}

/* --- Ratio: 1/2 (half) — explicit (default) --- */
.apl-article-card--featured[data-image-ratio="half"] .apl-card-banner {
  width: 50%;
}

/* --- Position: right — banner moves to the right side --- */
.apl-article-card--featured[data-image-position="right"] {
  flex-direction: row-reverse;
}

/* --- Ratio: full — image fills the card, text overlays at bottom
       with a dark gradient for legibility --- */
.apl-article-card--featured[data-image-ratio="full"] {
  position: relative;
  flex-direction: column;
  min-height: 260px;
  justify-content: flex-end;
  color: #ffffff;
  overflow: hidden;
}
.apl-article-card--featured[data-image-ratio="full"] .apl-card-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0;
}
/* Dark gradient overlay — bottom-heavy so text reads on top */
.apl-article-card--featured[data-image-ratio="full"] .apl-card-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.05) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.apl-article-card--featured[data-image-ratio="full"] .apl-card-body {
  position: relative;
  z-index: 2;
  padding: 28px 32px;
  color: #ffffff;
  justify-content: flex-end;
}
.apl-article-card--featured[data-image-ratio="full"] .apl-card-body .apl-article-card-title {
  color: #ffffff;
}
.apl-article-card--featured[data-image-ratio="full"] .apl-card-body .apl-article-card-desc {
  color: rgba(255, 255, 255, 0.88);
}
.apl-article-card--featured[data-image-ratio="full"] .apl-card-body .apl-article-card-meta {
  color: rgba(255, 255, 255, 0.72);
}


/* ============================================================
   V24 — SEARCH RESULTS PAGE
   Filter pills at top + special AI Answer card + single-column
   result cards with section path eyebrow and always-visible
   snippet.
   ============================================================ */

/* --- Filter pill rows --- */
.apl-search-filters-section {
  background: #ffffff;
  padding: 0 0 8px;
}
.apl-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.apl-pill-row:last-child {
  margin-bottom: 0;
}
.apl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #F9F9F8;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: #2D2C2C;
  text-decoration: none;
  transition: background 200ms ease,
              color 200ms ease,
              border-color 200ms ease,
              transform 160ms ease;
  white-space: nowrap;
}
.apl-pill:hover {
  background: #F3F2F0;
  color: #007CFB;
  border-color: rgba(0, 102, 204, 0.18);
  text-decoration: none;
}
.apl-pill:active {
  transform: scale(0.97);
}
.apl-pill--active {
  background: #2D2C2C;
  color: #ffffff;
  border-color: #2D2C2C;
}
.apl-pill--active:hover {
  background: #2D2C2C;
  color: #ffffff;
  border-color: #2D2C2C;
}
.apl-pill-name {
  line-height: 1;
}
.apl-pill-count {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 9999px;
  font-weight: 500;
  background: #ffffff;
  color: #575654;
  border: 0.5px solid rgba(0, 0, 0, 0.05);
}
.apl-pill--active .apl-pill-count {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  border-color: transparent;
}

/* --- AI Answer card --- */
.apl-ai-answer-section {
  background: #ffffff;
  padding: 0 0 8px;
}
.apl-ai-answer {
  background: linear-gradient(180deg, #F4F8FD 0%, #F3F2F0 100%);
  border: 0.5px solid rgba(0, 102, 204, 0.15);
  border-radius: 16px;
  padding: 22px 26px;
  margin: 16px 0 0;
}
.apl-ai-answer__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #007CFB;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 10px;
}
.apl-ai-answer__label svg {
  flex-shrink: 0;
}
.apl-ai-answer__body {
  font-size: 14.5px;
  color: #2D2C2C;
  line-height: 1.6;
}
.apl-ai-answer__body p {
  margin: 0 0 12px;
}
.apl-ai-answer__body p:last-child {
  margin-bottom: 0;
}
.apl-ai-answer__body a {
  color: #007CFB;
  text-decoration: none;
}
.apl-ai-answer__body a:hover {
  text-decoration: underline;
}
.apl-ai-answer__body ul,
.apl-ai-answer__body ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.apl-ai-answer__body li {
  margin: 0 0 4px;
}

/* --- Results section + result cards --- */
.apl-results-section {
  background: #F9F9F8;
  padding: 24px 0 56px;
  min-height: 200px;
}
.apl-result-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apl-result-card {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-result-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: inherit;
}
.apl-result-eyebrow {
  font-size: 11.5px;
  color: #575654;
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.apl-result-sep {
  color: #E1DFDA;
}
.apl-result-title {
  font-size: 17px;
  font-weight: 600;
  color: #2D2C2C;
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.apl-result-external {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #575654;
}
.apl-result-snippet {
  font-size: 13.5px;
  color: #575654;
  margin: 0;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Zendesk auto-wraps matched query terms in <em> inside the
   result snippet. v108: dropped the boxy gray-blue pills — every
   matched word (including stopwords like "a", "an", "to", "me")
   got its own pill, which clustered visually and made result
   lists hard to scan. New look: no background, no padding, just
   bold + brand cyan. Stopword <em>s are unwrapped by a small JS
   loop in templates/search_results.hbs so only content words
   keep the accent. Broader .apl-result-card em selector also
   covers any title <em> Zendesk might emit in future. */
.apl-result-card em,
.apl-result-snippet em {
  background: transparent;
  color: #007CFB;
  padding: 0;
  border-radius: 0;
  font-style: normal;
  font-weight: 600;
}
.apl-result-meta {
  font-size: 11.5px;
  color: #575654;
  margin: 0;
}

/* --- Pagination --- */
.apl-search-pagination {
  display: flex;
  justify-content: center;
  margin: 32px 0 0;
}
.apl-search-pagination .pagination {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.apl-search-pagination .pagination .page-item .page-link,
.apl-search-pagination .pagination a,
.apl-search-pagination .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #2D2C2C;
  text-decoration: none;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  transition: background 160ms ease, color 160ms ease;
}
.apl-search-pagination .pagination a:hover {
  background: #F3F2F0;
  color: #007CFB;
  text-decoration: none;
}
.apl-search-pagination .pagination .is-active a,
.apl-search-pagination .pagination .current a,
.apl-search-pagination .pagination .active a {
  background: #2D2C2C;
  color: #ffffff;
  border-color: #2D2C2C;
}

/* --- Mobile: pill row scrolls horizontally --- */
@media (max-width: 768px) {
  .apl-pill-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-right: -16px;
    padding-right: 16px;
  }
  .apl-pill-row::-webkit-scrollbar {
    display: none;
  }
  .apl-pill {
    flex-shrink: 0;
  }
  .apl-ai-answer {
    padding: 16px 18px;
    margin-top: 12px;
  }
  .apl-result-card {
    padding: 16px 18px;
  }
  .apl-result-title {
    font-size: 16px;
  }
}


/* ============================================================
   V25 — SEARCH RESULTS POLISH
   1. Remove visible seam lines between page sections
   2. Unify white→gray transition (single soft step instead of
      multiple visible boundaries)
   3. Smooth pill click feedback + page-load fade-in
   ============================================================ */

/* --- 1+2. Cohesive backgrounds on the search results page --- */
/* The page hero stays white. Filter row, AI answer, and results
   all share the same soft gray so they read as one section.
   The only color transition is hero → "rest of page". */
html.search-results-page .apl-page-hero {
  border-bottom: none !important;
}
html.search-results-page .apl-search-filters-section,
html.search-results-page .apl-ai-answer-section,
html.search-results-page .apl-results-section {
  background: #F9F9F8;
}
html.search-results-page .apl-search-filters-section {
  padding: 24px 0 4px;
}
html.search-results-page .apl-ai-answer-section {
  padding: 12px 0 0;
}
html.search-results-page .apl-results-section {
  padding: 16px 0 56px;
}

/* Pills now sit on gray background — switch their fill to white
   so they read clearly. Active stays dark navy. */
html.search-results-page .apl-pill {
  background: #ffffff;
}
html.search-results-page .apl-pill:hover {
  background: #F3F2F0;
}
html.search-results-page .apl-pill--active {
  background: #2D2C2C;
}
html.search-results-page .apl-pill--active:hover {
  background: #2D2C2C;
}

/* --- 3. Smooth page-load fade-in (results, filters, hero) --- */
@keyframes apl-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.search-results-page .apl-page-hero > *,
html.search-results-page .apl-search-filters-section > *,
html.search-results-page .apl-ai-answer-section > *,
html.search-results-page .apl-result-list,
html.search-results-page .apl-search-pagination,
html.search-results-page .apl-noresults {
  animation: apl-fade-up 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
html.search-results-page .apl-search-filters-section > * { animation-delay: 60ms; }
html.search-results-page .apl-ai-answer-section > *     { animation-delay: 120ms; }
html.search-results-page .apl-result-list,
html.search-results-page .apl-noresults                  { animation-delay: 160ms; }
html.search-results-page .apl-search-pagination          { animation-delay: 220ms; }

/* Respect reduced-motion preference — skip the fade for users
   who want minimal animation. */
@media (prefers-reduced-motion: reduce) {
  html.search-results-page .apl-page-hero > *,
  html.search-results-page .apl-search-filters-section > *,
  html.search-results-page .apl-ai-answer-section > *,
  html.search-results-page .apl-result-list,
  html.search-results-page .apl-search-pagination,
  html.search-results-page .apl-noresults {
    animation: none !important;
  }
}

/* Pill click feedback — JS adds .is-clicked while navigation starts */
.apl-pill.is-clicked {
  background: #2D2C2C !important;
  color: #ffffff !important;
  border-color: #2D2C2C !important;
}
.apl-pill.is-clicked .apl-pill-count {
  background: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: transparent !important;
}


/* ============================================================
   V26 — FIXES
   1. Restore padding on home page featured cards (.apl-feat).
      v22 zeroed out .apl-article-card padding to support the
      banner-on-side layout, but home featured cards share that
      class without the inner .apl-card-body wrapper, so their
      content was hugging the card edge (eyebrow text clipped).
   2. Sticky search filters — filter pill row stays pinned just
      below the main header while scrolling the results list.
   ============================================================ */

/* --- 1. Home page featured cards keep their padding ---
   Bento cards (v64) opt out — they have a full-bleed banner on top
   and apply their own inner padding to the text content only. --- */
.apl-feat.apl-article-card:not(.apl-article-card--bento),
.apl-feat-grid .apl-article-card:not(.apl-article-card--bento) {
  padding: 20px 22px;
}
@media (max-width: 768px) {
  .apl-feat.apl-article-card:not(.apl-article-card--bento),
  .apl-feat-grid .apl-article-card:not(.apl-article-card--bento) {
    padding: 16px 18px;
  }
}

/* --- 2. Sticky search filters on the results page ---
   Filters pin just below the main header (60px). Background
   matches the page so result cards scroll cleanly underneath. */
html.search-results-page .apl-search-filters-section {
  position: sticky;
  top: var(--main-header-height, 60px);
  z-index: 50;
  /* Slight shadow appears when stuck, via the page below scrolling away */
  box-shadow: 0 4px 12px -10px rgba(0, 0, 0, 0.12);
  /* Background already #F9F9F8 from v25 — keep solid so cards don't show through */
  background: #F9F9F8;
  padding-top: 16px;
  padding-bottom: 12px;
}


/* ============================================================
   V27 — MULTI-FIX BUNDLE
   1. Hide all .apl-support sections (Still need help? CTA)
      across every page — removing for now, will re-add later.
   2. Force featured cards to single column on mobile regardless
      of whether data-image-ratio is set. Earlier v22 mobile rule
      was being overridden by v23's default 50% width.
   3. Remove the visible line under the main header at rest —
      .header.border-bottom utility class was drawing a hairline.
   4. Search again card styles (used at the bottom of article
      pages now that the library nav is gone).
   ============================================================ */

/* --- 1. Hide support strip globally (page-level CTA removed for now) --- */
.apl-support {
  display: none !important;
}

/* --- 2. Mobile featured cards always collapse to single column,
       regardless of data-image-ratio. Full-image keeps its full-bleed
       treatment (already handled by its own rules). --- */
@media (max-width: 768px) {
  .apl-article-card--featured:not([data-image-ratio="full"]) {
    flex-direction: column !important;
  }
  .apl-article-card--featured:not([data-image-ratio="full"]) .apl-card-banner {
    width: 100% !important;
    height: 160px !important;
    min-height: 0 !important;
  }
  .apl-article-card--featured:not([data-image-ratio="full"]) .apl-card-body {
    padding: 18px 20px !important;
  }
}

/* --- 3. Main header: no visible border-bottom at rest --- */
header.header,
header.header.border-bottom {
  border-bottom: none !important;
}
/* Theme adds a gradient fade after the header; ensure it stays disabled */
.header::after {
  display: none !important;
}

/* --- 4. Search again card — removed v41 cleanup
       (replaced by `.apl-related` in v28-v29) --- */

/* --- 4b. Home topic card icons: force size on injected SVGs ---
       The keyword-matched icon SVG is generated at 32px (for section
       emblems). Inside .apl-card-icon (24px container), we scale
       it down via CSS so the home topic cards look proportionate. */
.apl-card-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
}

/* --- 5. Hide the legacy article library-style navigation
       (Previous/Next + Articles in section + recent articles).
       Related articles are now re-presented in the new
       .apl-related card below the article — see section 6.
       --- */
#article-section-nav,
.article-section-nav,
.article-relative-navigation,
#section-articles-sidebar,
.section-articles-sidebar {
  display: none !important;
}
/* The related/recent articles footer on article page is the
   <footer class="row my-6"> that contains {{related_articles}}
   and {{recent_articles}}. Target via the article body context. */
.article-body > footer.row,
article > footer.row {
  display: none !important;
}

/* --- 6. Related articles card (replaces the old Search again card).
       Renders Zendesk's {{related_articles}} output as our cards. --- */
.apl-related {
  background: #F9F9F8;
  padding: 48px 0;
  margin-top: 32px;
}
.apl-related-inner {
  max-width: 720px;
  margin: 0 auto;
}
.apl-related-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #2D2C2C;
  margin: 0 0 20px;
  letter-spacing: -0.015em;
  text-align: center;
}
/* Hide Zendesk's default "Related articles" header — we use our own h2.
   Catch every form the helper might render it as. */
.apl-related .related-articles > h3,
.apl-related .related-articles--header,
.apl-related [data-element="related-articles"] > h3,
.apl-related h3 {
  display: none !important;
}

/* --- V29: Single container card holding 2-3 article rows --- */
/* The <ul> becomes the card. Each <li> is a row with a separator. */
.apl-related .related-articles ul,
.apl-related .article-list,
.apl-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-related li,
.apl-related .article-list-item {
  margin: 0;
  padding: 0;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}
.apl-related li:first-child,
.apl-related .article-list-item:first-child {
  border-top: none;
}
/* Cap the list at 3 visible articles */
.apl-related li:nth-child(n+4),
.apl-related .article-list-item:nth-child(n+4) {
  display: none !important;
}
.apl-related li a,
.apl-related .article-list-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 16px 20px;
  text-decoration: none;
  color: #2D2C2C;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  transition: background 200ms ease, color 200ms ease;
}
/* Right-side chevron indicates "go to article" */
.apl-related li a::after,
.apl-related .article-list-item a::after {
  content: "›";
  color: #E1DFDA;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 200ms ease, color 200ms ease;
}
.apl-related li a:hover,
.apl-related .article-list-item a:hover {
  background: #F9F9F8;
  color: #007CFB;
  text-decoration: none;
}
.apl-related li a:hover::after,
.apl-related .article-list-item a:hover::after {
  color: #007CFB;
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .apl-related {
    padding: 36px 0;
  }
  .apl-related-title {
    font-size: 19px;
  }
  .apl-related li a,
  .apl-related .article-list-item a {
    padding: 14px 16px;
    font-size: 14px;
  }
  .apl-related li a::after,
  .apl-related .article-list-item a::after {
    font-size: 18px;
  }
}


/* ============================================================
   V30 — UNIFIED SEARCH OVERLAY
   1. Slim mobile main header to 48px, always visible (drops v20
      reveal-on-scroll-up behavior)
   2. Hide mobile FAB (single search affordance now)
   3. Eyebrow header padding bump (more relaxed)
   4. Suggestions dropdown overlay below the search input
      (no backdrop — page stays fully visible)
   ============================================================ */

/* --- 1. Mobile main header slimmed to 48px + always visible --- */
@media (max-width: 768px) {
  header.header {
    height: 48px !important;
  }
  main {
    margin-top: 48px !important;
  }
  header.header .navbar {
    min-height: 48px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
/* Disable the v20 reveal-on-scroll-up — header is always visible now */
html.is-scrolling-down header.header {
  transform: none !important;
}

/* --- 2. Mobile FAB retired (single header search affordance) --- */
.mobile-search-fab,
#apl-mobile-search-fab {
  display: none !important;
}

/* --- 3. Eyebrow header padding bump — more relaxed, more visible --- */
.article-sticky-bar__inner {
  padding: 10px 2rem !important;
  min-height: 54px !important;
}
@media (max-width: 768px) {
  .article-sticky-bar__inner {
    padding: 9px 16px !important;
    min-height: 48px !important;
  }
}

/* --- 4. Suggestions dropdown --- */
.apl-search-dropdown {
  position: fixed;
  background: #FFFFFF;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 8px;
  box-shadow:
    0 24px 56px -12px rgba(0, 0, 0, 0.22),
    0 6px 16px -6px rgba(0, 0, 0, 0.08);
  z-index: 1500;
  max-height: 460px;
  overflow-y: auto;
  max-width: 480px;
}
.apl-search-dropdown[hidden] {
  display: none !important;
}
@media (max-width: 768px) {
  .apl-search-dropdown {
    max-width: none;
    padding: 6px;
    border-radius: 14px;
  }
}
.apl-search-dropdown__label {
  font-size: 10px;
  color: #575654;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 12px 6px;
}
.apl-search-dropdown__list {
  display: flex;
  flex-direction: column;
}
.apl-search-dropdown__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none !important;
  color: #2D2C2C !important;
  font-size: 13px;
  line-height: 1.4;
  transition: background 160ms ease;
}
.apl-search-dropdown__row:hover,
.apl-search-dropdown__row:focus,
.apl-search-dropdown__row[aria-current="true"] {
  background: #F9F9F8;
  outline: none;
}
.apl-search-dropdown__row svg {
  color: #575654;
  flex-shrink: 0;
}
.apl-search-dropdown__row-text {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
.apl-search-dropdown__row--article {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.apl-search-dropdown__path {
  font-size: 10.5px;
  color: #575654;
  letter-spacing: 0.04em;
}
.apl-search-dropdown__title {
  font-size: 13.5px;
  color: #2D2C2C;
  font-weight: 500;
  line-height: 1.35;
  width: 100%;
}
/* v58: subtler highlight in the live-search dropdown — Medium
   weight, no pill background or color shift. Matches the search
   results page treatment for consistency. */
.apl-search-hl {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-style: normal;
  font-weight: 500;
}
.apl-search-dropdown__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  margin: 6px -8px -8px;
  text-decoration: none !important;
  color: #007CFB !important;
  font-size: 12.5px;
  font-weight: 500;
  transition: background 160ms ease;
}
.apl-search-dropdown__footer:hover {
  background: #F9F9F8;
}
.apl-search-dropdown__footer svg {
  flex-shrink: 0;
}
.apl-search-dropdown__empty {
  font-size: 13px;
  color: #6E6E73;
  padding: 22px 16px;
  text-align: center;
}
.apl-search-dropdown__loading {
  font-size: 12.5px;
  color: #575654;
  padding: 16px 14px;
  text-align: center;
}

/* When overlay is open, hint that the input is active */
html.apl-search-open header.header input[type="search"] {
  border-color: #007CFB;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}


/* ============================================================
   V31 — FIX: search input visible in mobile main header
   ============================================================
   Zendesk Xavier's mobile menu hides search behind the hamburger.
   Search lives inside `<div class="nav menu" x-show="isOpen">`,
   which Alpine.js collapses on mobile until the toggle is tapped.
   We override that — force the menu visible on mobile, but show
   only the search inside it (hide other menu items + the toggle
   button). Effectively pulls the search out without a template
   edit. Also tightens eyebrow alignment to match the navbar
   content edge.
   ============================================================ */

@media (max-width: 768px) {
  /* 1. Force the navbar mobile menu to act as a flex row that
        holds the search input always visible.
        Alpine sets `display: none` inline when collapsed — our
        `!important` rules win. */
  header.header .nav.menu,
  header.header [class*="menu-"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 8px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    transition: none !important;
  }

  /* 2. Inside the menu, hide only items that aren't the search,
        the header-actions (language + CTA), or the user-menu.
        Custom links, category dropdowns, etc. stay hidden — but
        the actions and user avatar render alongside the search. */
  header.header .nav.menu > *:not(.search):not([class*="search"]):not(.header-actions):not(.user-menu) {
    display: none !important;
  }

  /* 3. The hamburger toggle is no longer needed. */
  header.header .navbar-toggle {
    display: none !important;
  }

  /* 3b. Header-actions and user-menu — keep visible, compact sizing */
  header.header .nav.menu > .header-actions {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: 6px !important;
    gap: 4px;
  }
  header.header .nav.menu > .user-menu {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: 4px !important;
  }
  /* Tighten the CTA button and language dropdown for narrow space */
  header.header .header-actions .header-cta,
  header.header .header-cta {
    padding: 0 10px !important;
    font-size: 11px !important;
    height: 32px !important;
    white-space: nowrap;
  }
  header.header .header-actions .relative {
    margin: 0 !important;
  }
  /* User-menu compact (just avatar, no name on mobile) */
  header.header .user-menu .user-menu-name,
  header.header .user-menu span:not(.sr-only):not(.avatar) {
    display: none !important;
  }
}

/* ============================================================
   V36 — FOOLPROOF ADAPTIVE MAIN HEADER
   Logo + search + language + CTA always render. As the viewport
   tightens, elements compact (text → icons) rather than being
   hidden. The avatar is the only element that drops at very
   narrow widths to free space.
   ============================================================ */

/* At medium-narrow widths (≤480px), the CTA becomes a circular
   icon button (right-arrow) instead of disappearing.
   Specificity matched to v34's `.header-actions .header-cta` so this
   wins the cascade (later rule, equal specificity). */
@media (max-width: 480px) {
  header.header .header-actions .header-cta,
  header.header .header-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #2D2C2C !important;
    color: #ffffff !important;
    font-size: 0 !important;        /* hide the text */
    line-height: 0 !important;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }
  /* Inline arrow glyph via inline SVG data-URI */
  header.header .header-actions .header-cta::before,
  header.header .header-cta::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
  }
  /* Avatar dropped at this width to keep room for the four primaries */
  header.header .user-menu {
    display: none !important;
  }
  /* Language picker compact (flag + chevron only — already collapsing
     because text overflows). Constrain width so it doesn't push other
     items. */
  header.header .header-actions .relative {
    max-width: 64px !important;
  }
}

/* At 360px and below, keep all four primaries visible. Just tighten
   the gaps. Nothing else is hidden. */
@media (max-width: 360px) {
  header.header .navbar {
    gap: 6px !important;
  }
  header.header .header-actions {
    margin-left: 4px !important;
  }
}


/* ============================================================
   V36 — EYEBROW CONTENT OVERFLOW HANDLING
   The breadcrumb + title in the sticky eyebrow truncate cleanly
   when they don't fit, instead of wrapping or overflowing
   awkwardly behind the main header.
   ============================================================ */

.article-sticky-bar__context {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.article-sticky-bar__crumbs,
.article-sticky-bar__title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.article-sticky-bar__crumbs .breadcrumbs,
.article-sticky-bar__crumbs ol.breadcrumbs,
.article-sticky-bar__crumbs ul.breadcrumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.article-sticky-bar__crumbs .breadcrumbs li {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  min-width: 0;
  max-width: 200px;
}


/* ============================================================
   V38 — REMOVE USER/PROFILE SECTION GLOBALLY
   Per Federico: the user avatar / sign-in menu in the main
   header isn't needed right now. Hide it across all widths.
   Easy to bring back later by removing this rule.
   ============================================================ */
header.header .user-menu,
header.header .nav.menu > .user-menu {
  display: none !important;
}


/* ============================================================
   V39 — FOOLPROOF RESPONSIVE NAVBAR
   Single consistent flex skeleton applied at every width:
     - Logo (left): flex 0 0 auto. Fixed natural size. Never moves.
     - Menu (middle wrapper): flex 1 1 0, min-width 0. Holds the
       search + right group. Expands and contracts with viewport.
     - Search (inside menu): flex 1 1 0, min-width 0. ABSORBS all
       width changes. Other elements never have to move to make
       room — only search does.
     - Header-actions (right): flex 0 0 auto. Fixed natural size.
       Stays anchored to the right edge.
   And to eliminate the jarring 768→769 transition (right group
   was jumping from 104px compact to 468px full-text), the compact
   icon-mode now applies all the way up to ≤768px. Above 768px,
   full-text appears with plenty of room.
   ============================================================ */

/* Navbar layout — applies at all widths */
header.header .navbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px;
}

/* Logo: anchored left, never grows or shrinks */
header.header .navbar-brand,
header.header .navbar-brand.mr-auto {
  flex: 0 0 auto !important;
  margin: 0 !important;
  min-width: auto !important;
}

/* Menu container: takes all space between logo and right group */
header.header .nav.menu {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  margin: 0 !important;
}

/* Search: the elastic element that ABSORBS all viewport changes */
header.header .nav.menu .search,
header.header .navbar .search,
header.header div.search {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* The Zendesk theme's `form-field` class adds its own pill styling
   (background, border, border-radius, padding) to the <form>. That
   stacks visually on top of the input's pill. Strip the form back to
   a transparent invisible wrapper so only the input renders as the
   pill. */
header.header .search > form,
header.header .search form.form-field {
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
header.header .search input[type="search"] {
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Right group: fixed natural size, anchored right */
header.header .header-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  margin: 0 !important;
}

/* === Compact icon mode for the right group at ≤768px ===
   Was at ≤480px in v36/v37; extended here so the desktop→tablet
   transition is no longer a 360px jump. Above 768px the full
   label "Explore World ID App" appears; at 768 and below it's
   the circular icon. Language picker becomes flag+chevron only. */
@media (max-width: 768px) {
  header.header .header-actions .header-cta,
  header.header .header-cta {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border-radius: 50% !important;
    background: #2D2C2C !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }
  header.header .header-actions .header-cta::before,
  header.header .header-cta::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
  }
  /* Language picker: cap the BUTTON at flag + chevron only, but let
     the dropdown menu escape the wrapper so it's not clipped on
     tap. (overflow: hidden was the v49 mobile bug — the dropdown
     opened but was invisible because the wrapper clipped it.) */
  header.header .header-actions .relative {
    max-width: 64px !important;
    overflow: visible !important;
  }
  /* Constrain only the button's visual width, not the dropdown. */
  header.header .header-actions .relative .language-button {
    max-width: 64px;
    overflow: hidden;
  }
}

  /* 4. Backdrop element from slide-in nav style — kill it on mobile
        since the menu is always inline now. */
  header.header .backdrop,
  header.header + .backdrop {
    display: none !important;
  }

  /* 5. Style the search input so it sits properly inside the slim
        48px navbar. */
  header.header .nav.menu .search {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative;
  }
  /* v57: Form acts as a transparent passthrough — full width of the
     search wrap, no padding of its own, no styling. The previous v56
     rule applied input-padding to the form too, which pushed the
     visible input 56px right and stranded the icon outside the pill. */
  header.header .nav.menu .search .form-field {
    width: 100% !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* The visible input is the styled pill — fills the form, gets the
     padding for the icon-left zone, and matches the language/CTA
     pill height (40px) exactly. */
  header.header .nav.menu .search input[type="search"] {
    width: 100% !important;
    height: 40px !important;
    border-radius: 9999px !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    background: #F9F9F8 !important;
    padding: 0 16px 0 48px !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }
  header.header .nav.menu .search .search-icon {
    position: absolute;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    color: #575654;
    pointer-events: none;
  }

  /* 6. Eyebrow alignment — match the navbar's horizontal padding
        exactly. Probed live: navbar uses padding-left: 32px on
        mobile (and 32px on desktop within max-width 1140), so
        eyebrow inner uses 32px too. Content edges line up. */
  .article-sticky-bar__inner {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }


/* ============================================================
   V32 — STRONGER MOBILE SEARCH OVERRIDE
   v31 forced .nav.menu to display:flex but the .search element
   inside it still had display:none from a Zendesk theme rule.
   The browser was layering: menu visible → search hidden. Now
   we explicitly force display:flex on every level (menu, search,
   form, input) AND remove navbar flex-wrap so it stays one row.
   ============================================================ */

@media (max-width: 768px) {
  /* Force navbar to a single row (was wrapping when content didn't fit) */
  header.header .navbar {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px;
    min-height: 48px !important;
  }

  /* Logo: don't shrink, no extra margins */
  header.header .navbar-brand,
  header.header .navbar-brand.mr-auto {
    flex: 0 0 auto !important;
    margin: 0 !important;
    max-width: 32px;
  }
  header.header .navbar-brand img {
    max-height: 26px;
    width: auto;
  }
  /* Hide the navbar tagline text ("World ID Help Center") on mobile —
     it eats horizontal space the search needs */
  header.header .navbar-tagline,
  header.header .navbar-brand .navbar-tagline,
  header.header .navbar-brand span:not(.sr-only) {
    display: none !important;
  }

  /* THE CRITICAL FIX: force .search display:flex.
     Some theme rule has it at display:none on mobile; this beats
     it with high-specificity + !important. Note: NO opacity rule
     here — that's owned by v33's hero-visible cross-fade. */
  header.header div.search,
  header.header .nav.menu .search,
  header.header .navbar .search,
  header.header [class~="search"]:not(.search-icon):not(.search-toggle):not(.search-hl) {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    visibility: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    margin: 0 !important;
  }

  /* Form (Zendesk renders <form class="form-field">) */
  header.header .search > form,
  header.header .search form.form-field,
  header.header .search > .form-field {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    visibility: visible !important;
    margin: 0 !important;
  }

  /* Input — actually visible pill. Opacity owned by v33's
     hero-visible cross-fade, not forced here. */
  header.header .search input[type="search"],
  header.header .search input {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 34px !important;
    border-radius: 9999px !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    background: #F9F9F8 !important;
    padding: 0 14px 0 34px !important;
    font-size: 13px !important;
    color: #2D2C2C !important;
    margin: 0 !important;
  }

  /* Search icon (magnifier) on the left */
  header.header .search .search-icon {
    position: absolute !important;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px !important;
    height: 12px !important;
    color: #575654 !important;
    pointer-events: none;
    z-index: 1;
  }

  /* Submit button (if Zendesk renders one) — hide on mobile, icon-only */
  header.header .search button[type="submit"] {
    display: none !important;
  }
}


/* ============================================================
   V33 — DUPLICATE SEARCH BAR SUPPRESSION
   1. Article page: Zendesk's default `.hero` element renders
      "World ID Help Center" + a search bar above the article
      body. We have our own page header (sticky eyebrow + article
      header inside the article tag). Hide the Zendesk `.hero`
      entirely on article pages.
   2. Home page: when the big centered hero search (`.apl-hero`)
      is in view, the main header search hides. When user scrolls
      past it, main header search fades in. Never two search
      bars at the same time.
   ============================================================ */

/* --- 1. Hide Zendesk's default .hero on article pages --- */
html.article-page .hero {
  display: none !important;
}

/* --- 2. Hide main header search when home hero is visible ---
   JS adds .apl-hero-visible to <html> via IntersectionObserver. */
html.apl-hero-visible header.header .search,
html.apl-hero-visible header.header input[type="search"] {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html header.header .search,
html header.header input[type="search"] {
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   V35 — UNIVERSAL CARD HEIGHT + NO-CUTOFF RULE
   Across every card group (category article lists, home topic
   cards, home featured articles), establish two principles:
     1. Description / body text NEVER truncates. No more mid-word
        ellipsis. Cards grow vertically to accommodate the full
        text.
     2. Within a group/row, cards equalize height to the tallest
        sibling. Meta (reading time + updated date) sits flush
        with the bottom of the card so cards in the same row read
        as a unit.
   ============================================================ */

/* --- 1. Disable line-clamp truncation on card descriptions --- */
.apl-article-card-desc,
.apl-feat-desc,
.apl-card-desc,
.apl-result-snippet {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* --- 2. Equal-height cards within a row via CSS Grid stretch --- */
.apl-article-list,
.apl-feat-grid,
.apl-cat-grid {
  align-items: stretch !important;
}

/* Cards fill their grid cell vertically */
.apl-article-card,
.apl-feat,
.apl-card,
.apl-result-card {
  height: 100% !important;
}

/* Internal body fills the card, allowing meta to sit at the bottom */
.apl-article-card .apl-card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Featured + topic cards on the home page don't use .apl-card-body,
   so apply the same flex behavior directly */
.apl-feat,
.apl-card {
  display: flex !important;
  flex-direction: column !important;
}

/* Pin meta to the bottom of any card */
.apl-article-card-meta,
.apl-feat-meta,
.apl-result-meta {
  margin-top: auto !important;
}


/* --- Mobile: all featured cards collapse to top-banner + text --- */
@media (max-width: 768px) {
  .apl-article-card--featured[data-image-ratio="third"],
  .apl-article-card--featured[data-image-ratio="half"] {
    flex-direction: column !important;
  }
  .apl-article-card--featured[data-image-ratio="third"] .apl-card-banner,
  .apl-article-card--featured[data-image-ratio="half"] .apl-card-banner {
    width: 100%;
    height: 140px;
    min-height: 0;
  }
  /* Full keeps its full-bleed treatment on mobile too */
  .apl-article-card--featured[data-image-ratio="full"] {
    min-height: 220px;
  }
  .apl-article-card--featured[data-image-ratio="full"] .apl-card-body {
    padding: 24px 28px; /* v98: aligned w/ new desktop featured rhythm */
  }
}



/* ============================================================
   v49/v50 — MOBILE NAVBAR RESTRUCTURE
   Desktop is unchanged. On phones (<=768px), the navbar collapses
   to a clean inline row: Logo + Search + Language + CTA.
   ============================================================ */
@media (max-width: 768px) {
  /* Consistent horizontal padding so navbar contents don't touch
     the screen edges. Overrides Bootstrap's .container default. */
  .header > .navbar,
  .header > .navbar.container,
  .header .navbar.container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hide the "World ID Help Center" tagline — saves horizontal space */
  .header .navbar-tagline {
    display: none !important;
  }

  /* Hide the hamburger menu toggle — search and actions are inline now */
  .header .navbar-toggle {
    display: none !important;
  }

  /* Force the collapsible nav menu to always render as a flex row on mobile.
     Override Alpine.js x-show which would normally hide it when isOpen=false. */
  .header .nav.menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    flex: 1 1 auto;
    gap: 8px;
    margin: 0;
    padding: 0;
    height: auto !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    background: transparent !important;
  }

  /* Hide optional header links (Back to website / Community / Submit a request)
     on mobile — they crowd the row. Users can reach those pages via the CTA
     or the footer. */
  .header .nav.menu .nav-link.header-link {
    display: none !important;
  }

  /* Hide category dropdown on mobile too */
  .header .nav.menu .category-dropdown {
    display: none !important;
  }

  /* Search bar fills the available middle space */
  .header .nav.menu .search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0 4px;
  }

  /* Header actions wrapper: keep language + CTA on the right, compact */
  .header .header-actions {
    flex-shrink: 0;
    gap: 6px;
  }

  /* Compact language button: show flag only, hide locale label text */
  .header .language-button {
    padding: 0 10px;
    min-width: 0;
  }
  .header .language-button .locale-label {
    display: none;
  }
  .header .language-button .svg-icon {
    margin-left: 4px;
  }

  /* Compact CTA on mobile */
  .header .header-cta {
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* User menu (if signed in) — keep compact */
  .header .user-menu {
    flex-shrink: 0;
  }
}

/* Even tighter on very small screens (<=480px) */
@media (max-width: 480px) {
  .header .navbar {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header .nav.menu .search {
    margin: 0 2px;
  }
  .header .language-button {
    padding: 0 8px;
  }
  /* Make the locale flag slightly smaller so it sits comfortably next to CTA */
  .header .language-button .locale-flag {
    width: 18px;
    height: 13px;
  }
}


/* ============================================================
   v51 — NAVBAR VISUAL HARMONY
   Normalize font sizes, icon scale, and vertical centering
   across every navbar element. Applies at all breakpoints —
   mobile-specific overrides live in the earlier v49/v50 block.
   ============================================================ */

/* Make sure every direct child of the navbar centers on the same
   baseline. The navbar is the .navbar element inside .header. */
.header .navbar {
  align-items: center;
}

/* Search input: match the rest of the controls at 15px so the
   placeholder reads at the same size as the language and CTA labels. */
.header .search [type="search"] {
  font-size: 15px;
  line-height: 1.4;
}

/* v52/v54 — Header search input: 40px tall, explicit padding so the
   magnifier icon and placeholder text don't collide. The icon sits
   in a 48px-wide left padding zone; text starts at 48px so there's
   a clear 10px gap after the 18px icon (which lives at margin-left 16). */
.header .search [type="search"],
.header .search input[type="search"] {
  height: 40px !important;
  padding: 0 16px 0 48px !important;
  line-height: 1.4 !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}

/* Header search magnifier — 18px (proportional to 15px text per brand
   rule of font × 1.2 for emphasis icons). Anchored to the input's true
   vertical center. margin-left: 16 places it centered in the 48px left
   padding zone so it has ~15px of breathing room before the placeholder. */
.header .search-icon {
  width: 18px !important;
  height: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 16px !important;
  margin-right: 0 !important;
}

/* v54 — Suggestions dropdown should match the input width on desktop,
   not be clamped to 480px (which made the hero search dropdown look
   narrower than its search bar). Cap only at very wide breakpoints
   so the dropdown doesn't span the entire screen on huge monitors. */
.apl-search-dropdown {
  max-width: none !important;
}
@media (min-width: 1400px) {
  .apl-search-dropdown {
    max-width: 720px !important;
  }
}

/* Language button label and CTA — normalize to 15px to match
   the search field, removing the 17px/13px/15px size mishmash
   that was making the navbar feel inconsistent. */
.header .language-button,
.header .language-button .locale-label,
.header .header-cta {
  font-size: 15px;
  line-height: 1;
}

/* Locale dropdown items inside the menu — match the trigger size */
.header .language-dropdown .dropdown-item {
  font-size: 15px;
}

/* Mobile-specific: bump the v49 compact CTA back up to 15px
   to match the rest, since the rest of the navbar is now 15px too. */
@media (max-width: 768px) {
  .header .header-cta {
    font-size: 15px;
  }
  /* Tagline is hidden on mobile so no override needed */
}


/* ============================================================
   v55 — ARTICLE PAGE: relocate "Looking for something else?"
   Desktop (>=992px): sidebar position (replaces the In-This-Article
   TOC slot in the right aside). Mobile (<992px): bottom of article.
   ============================================================ */

/* Hide the original TOC sidebar element on desktop — the related-
   articles sidebar takes its slot. */
@media (min-width: 992px) {
  aside [data-element="table-of-contents"][data-template="sidebar-table-of-contents"] {
    display: none !important;
  }
}

/* On desktop, hide the bottom (full-width) version of the
   related-articles section since the sidebar version takes over. */
@media (min-width: 992px) {
  #apl-related-section {
    display: none !important;
  }
}

/* On mobile, hide the sidebar variant — the bottom version is
   visible there. */
@media (max-width: 991px) {
  .apl-related--sidebar {
    display: none !important;
  }
}

/* v61: Sidebar related-articles card — no border (per request), sits
   cleanly inside the aside. Heading uses brand accent color. */
.apl-related--sidebar {
  background: #FFFFFF;
  border: none;
  border-radius: 16px;
  padding: 20px 22px;
  margin: 0 0 20px;
}
/* v62: scoped overrides for the sidebar/bottom related-articles cards.
   The v28-v29 baseline rules (line ~19104+) put a border on the inner
   <ul>, hid all <h3>s inside .apl-related, and styled the rows with
   chevrons. We KEEP the chevrons/rows (they look good) but:
   - drop the UL border (border on the card is unwanted)
   - un-hide the helper's heading and tint it with brand accent
   These selectors are 0,2,1+ specificity (2 classes + tag), beating
   the baseline's 0,1,1 — and use !important to top the older !important. */

/* Drop the inner UL border for our scoped variants */
.apl-related--sidebar ul,
.apl-related--sidebar .related-articles ul,
.apl-related--sidebar .article-list,
.apl-related--bottom ul,
.apl-related--bottom .related-articles ul,
.apl-related--bottom .article-list {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Un-hide and re-style the helper's heading (the v28-v29 rule
   force-hides all h3 inside .apl-related). Brand accent #007CFB. */
.apl-related--sidebar h1,
.apl-related--sidebar h2,
.apl-related--sidebar h3,
.apl-related--sidebar h4,
.apl-related--sidebar h5,
.apl-related--sidebar h6,
.apl-related--sidebar .related-articles > h1,
.apl-related--sidebar .related-articles > h2,
.apl-related--sidebar .related-articles > h3,
.apl-related--sidebar .related-articles > h4,
.apl-related--bottom h1,
.apl-related--bottom h2,
.apl-related--bottom h3,
.apl-related--bottom h4,
.apl-related--bottom h5,
.apl-related--bottom h6,
.apl-related--bottom .related-articles > h1,
.apl-related--bottom .related-articles > h2,
.apl-related--bottom .related-articles > h3,
.apl-related--bottom .related-articles > h4 {
  display: block !important;
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #007CFB !important;
  margin: 0 0 12px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  text-align: left !important;
}

/* Bottom variant heading slightly larger for the wider card */
.apl-related--bottom h1,
.apl-related--bottom h2,
.apl-related--bottom h3,
.apl-related--bottom h4,
.apl-related--bottom .related-articles > h2,
.apl-related--bottom .related-articles > h3,
.apl-related--bottom .related-articles > h4 {
  font-size: 20px !important;
  margin: 0 0 14px !important;
}

/* The helper renders a <ul>; reset list styling and lay out vertically. */
.apl-related-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.apl-related-list ul li {
  margin: 0;
}

/* Sidebar variant — compact vertical list with hairline dividers. */
.apl-related--sidebar .apl-related-list ul a {
  display: block;
  padding: 10px 0;
  font-size: 15px;
  color: #2D2C2C;
  text-decoration: none;
  line-height: 1.4;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.apl-related--sidebar .apl-related-list ul a:hover {
  color: #007CFB;
}
.apl-related--sidebar .apl-related-list ul li:last-child a {
  border-bottom: none;
  padding-bottom: 0;
}
.apl-related--sidebar .apl-related-list ul li:first-child a {
  padding-top: 0;
}

/* Bottom (mobile) variant — responsive grid for wide phones/tablets. */
.apl-related--bottom .apl-related-list ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
}
.apl-related--bottom .apl-related-list ul a {
  display: block;
  padding: 14px 18px;
  font-size: 15px;
  color: #2D2C2C;
  text-decoration: none;
  line-height: 1.4;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.apl-related--bottom .apl-related-list ul a:hover {
  color: #007CFB;
  background: #F9F9F8;
}

/* ================================================================
   v92 — Translation-safe card variants
   Powered by data-card-* attributes that script.js applies from the
   article's Zendesk labels (data-labels). See script.js STEP 1.
   ================================================================ */

/* --- Size variants (Tier A labels) -------------------------- */

/* card-pillar: tall pillar slot. Reuses the existing --pillar class
   styling but applies via attribute selector so it works on home bento
   cards too (which don't use the legacy class system). */
.apl-article-card[data-card-pillar="1"] {
  grid-row: span 2;
}
.apl-article-card[data-card-pillar="1"] .apl-card-banner,
.apl-article-card[data-card-pillar="1"] .apl-feat-banner {
  aspect-ratio: 3 / 4;
}

/* card-wide: span 2 columns for a banner look. */
.apl-article-card[data-card-wide="1"] {
  grid-column: span 2;
}
.apl-article-card[data-card-wide="1"] .apl-card-banner,
.apl-article-card[data-card-wide="1"] .apl-feat-banner {
  aspect-ratio: 21 / 9;
}

/* card-compact: text-only dense card. Hides the banner slot, tightens
   padding, removes large title scale. Applied automatically by
   script.js STEP 4 when a promoted card has no image OR when an
   article is non-promoted (data-promoted="0"). */
.apl-article-card[data-card-compact="1"] .apl-card-banner,
.apl-article-card[data-card-compact="1"] .apl-feat-banner {
  display: none;
}
/* v98: removed the `padding-top: 0` override that used to fire here. It was
   written for the case where a banner sat above the body, but compact cards
   hide the banner entirely -- the rule made titles hug the top edge of the
   card. Compact cards now inherit the full 24px top padding from .apl-card-body. */
.apl-article-card[data-card-compact="1"] {
  /* Slightly tighter overall to make the dense card feel intentional */
  min-height: auto;
}

/* --- Badge slot (Tier B labels) ----------------------------- */

.apl-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #FFFFFF;
  background: #0F1115;
  pointer-events: none;
}
/* Make sure cards establish a positioning context for the absolute badge */
.apl-article-card {
  position: relative;
}
/* Hide the badge until script.js reveals it (defensive: HTML also sets hidden) */
.apl-card-badge[hidden] {
  display: none !important;
}

/* Color variants by badge kind */
.apl-card-badge[data-badge-kind="new"] {
  background: #00B5C4; /* World cyan — fresh content */
  color: #0F1115;
}
.apl-card-badge[data-badge-kind="updated"] {
  background: #0F1115; /* World black — refined content */
  color: #FFFFFF;
}
.apl-card-badge[data-badge-kind="popular"] {
  background: #F4B860; /* World sand — editorial pick */
  color: #0F1115;
}

/* --- Video overlay ------------------------------------------ */

.apl-card-video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 17, 21, 0.7);
  color: #FFFFFF;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.apl-card-video-overlay[hidden] {
  display: none !important;
}
/* Video overlay is only meaningful when there's a banner image to overlay.
   On compact cards, hide it. */
.apl-article-card[data-card-compact="1"] .apl-card-video-overlay {
  display: none !important;
}

/* --- Mobile tweaks ------------------------------------------ */

@media (max-width: 720px) {
  .apl-card-badge {
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    font-size: 10px;
  }
  .apl-card-video-overlay {
    width: 44px;
    height: 44px;
  }
}




/* ============================================================================
 * Glossary highlighter — v72_glossaryv1
 * ----------------------------------------------------------------------------
 * Styles for terms wrapped by assets/glossary.js inside .article-content.
 * Brand: dotted underline using info-blue #007CFB; tooltip uses World
 * neutral surface (#F9F9F8) with #E7E5E2 border and #2D2C2C body text.
 * Mobile: tap toggles via the .is-open class set by glossary.js.
 * ============================================================================ */

.hc-glossary-term {
  position: relative;
  display: inline;
  cursor: help;
  /* Dotted underline = signature glossary affordance. Sits 2px below the
     baseline so it never collides with descenders. */
  border-bottom: 1.5px dotted #007CFB;
  padding-bottom: 1px;
  color: inherit;
  text-decoration: none;
  outline: none;
  transition: color 120ms ease, border-bottom-color 120ms ease, background-color 120ms ease;
}

.hc-glossary-term:hover,
.hc-glossary-term:focus,
.hc-glossary-term.is-open {
  color: #007CFB;
  border-bottom-color: #007CFB;
  border-bottom-style: solid;
  background-color: rgba(0, 124, 251, 0.06);
  border-radius: 2px;
}

.hc-glossary-term:focus-visible {
  /* Keyboard focus ring — matches the World focus outline used elsewhere in the theme. */
  outline: 2px solid #007CFB;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Tooltip popover ----------------------------------------------------- */

.hc-glossary-tooltip {
  /* Hidden by default; revealed on hover/focus/is-open */
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 100;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  min-width: 220px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px 13px;

  background-color: #F9F9F8;
  color: #2D2C2C;
  border: 1px solid #E7E5E2;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(45, 44, 44, 0.16), 0 2px 6px rgba(45, 44, 44, 0.08);

  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  cursor: auto;

  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 0s linear 140ms; /* delay visibility off-switch until fade finishes */
}

.hc-glossary-term:hover > .hc-glossary-tooltip,
.hc-glossary-term:focus > .hc-glossary-tooltip,
.hc-glossary-term:focus-within > .hc-glossary-tooltip,
.hc-glossary-term.is-open > .hc-glossary-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* Tooltip arrow */
.hc-glossary-tooltip::before,
.hc-glossary-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.hc-glossary-tooltip::before {
  /* Border layer */
  border-top: 7px solid #E7E5E2;
}
.hc-glossary-tooltip::after {
  /* Fill layer, 1px above border for a clean seam */
  border-top: 7px solid #F9F9F8;
  margin-top: -1px;
}

/* Tooltip content */
.hc-glossary-tooltip__heading {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2D2C2C;
  margin-bottom: 4px;
  letter-spacing: 0;
}
.hc-glossary-tooltip__body {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #575654;
  line-height: 1.45;
}

/* ---- Responsive: flip tooltip below the term when there's no room above. ---
   Pure CSS can't detect available space, so on narrow viewports we just
   stack the tooltip below the line to avoid clipping at the top. */
@media (max-width: 640px) {
  .hc-glossary-tooltip {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translateX(-50%) translateY(-4px);
    min-width: 200px;
    font-size: 13px;
    padding: 10px 12px 11px;
  }
  .hc-glossary-term:hover > .hc-glossary-tooltip,
  .hc-glossary-term:focus > .hc-glossary-tooltip,
  .hc-glossary-term:focus-within > .hc-glossary-tooltip,
  .hc-glossary-term.is-open > .hc-glossary-tooltip {
    transform: translateX(-50%) translateY(0);
  }
  .hc-glossary-tooltip::before,
  .hc-glossary-tooltip::after {
    top: auto;
    bottom: 100%;
  }
  .hc-glossary-tooltip::before {
    border-top: none;
    border-bottom: 7px solid #E7E5E2;
  }
  .hc-glossary-tooltip::after {
    border-top: none;
    border-bottom: 7px solid #F9F9F8;
    margin-top: 0;
    margin-bottom: -1px;
  }
}

/* ---- Print: drop the highlight altogether so printed articles stay clean. - */
@media print {
  .hc-glossary-term {
    border-bottom: none;
    color: inherit;
    background: none;
  }
  .hc-glossary-tooltip { display: none !important; }
}

/* ---- Reduced motion: kill the slide transition. -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hc-glossary-term,
  .hc-glossary-tooltip {
    transition: none;
  }
}


/* ============================================================================
 * Glossary v3 — anchor wrapper + tooltip CTA
 * ----------------------------------------------------------------------------
 * In v72_glossaryv3, the wrapper element is an <a> instead of a <span>, so
 * clicks navigate to the anchor on the canonical glossary article. These
 * overrides keep the anchor from picking up the default link color/underline
 * and style the new "View in glossary →" CTA inside the tooltip.
 * ============================================================================ */

a.hc-glossary-term,
a.hc-glossary-term:link,
a.hc-glossary-term:visited {
  color: inherit;
  text-decoration: none;
  /* The dotted underline is the only signal — kill the browser default. */
}

a.hc-glossary-term:hover {
  text-decoration: none;
}

/* The CTA "View in glossary →" inside the tooltip */
.hc-glossary-tooltip__cta {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #E7E5E2;
  color: #007CFB;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* ============================================================================
 * v98_glossaryv5 — TOOLTIP POSITIONING SAFETY OVERRIDE
 * ----------------------------------------------------------------------------
 * Higher-specificity rule that re-asserts position:relative on the wrapper
 * regardless of how the bare .hc-glossary-term rule above gets parsed by
 * Zendesk's CSS pipeline. Without this, an upstream CSS imbalance in
 * Xavier's main build was causing Chrome to drop the bare rule's
 * declarations during error-recovery, and the tooltip then positioned
 * itself relative to <article class="col"> instead of the wrapper.
 * ============================================================================ */
.article-content a.hc-glossary-term,
.article-content span.hc-glossary-term {
  position: relative;
  display: inline;
}


/* ============================================================================
 * v98_glossaryv6 — Viewport-aware tooltip edge clamping
 * ----------------------------------------------------------------------------
 * When a term sits near the viewport edge, the centered tooltip would clip
 * off-screen. glossary.js measures the overflow and writes a per-term CSS
 * variable `--hc-tooltip-x-offset` (in pixels) that shifts the tooltip body
 * onscreen. The arrow shifts by the SAME amount in the OPPOSITE direction so
 * it keeps pointing at the term, not at the shifted tooltip center.
 * ============================================================================ */

/* Default state — tooltip centered on the term (offset 0).
   These rules layer over the existing translateX(-50%) defaults from the
   glossaryv1 block above, adding the dynamic horizontal offset. */
.hc-glossary-tooltip {
  transform: translateX(calc(-50% + var(--hc-tooltip-x-offset, 0px))) translateY(4px);
}

.hc-glossary-term:hover > .hc-glossary-tooltip,
.hc-glossary-term:focus > .hc-glossary-tooltip,
.hc-glossary-term:focus-within > .hc-glossary-tooltip,
.hc-glossary-term.is-open > .hc-glossary-tooltip {
  transform: translateX(calc(-50% + var(--hc-tooltip-x-offset, 0px))) translateY(0);
}

/* Arrow keeps pointing at the term — inverse offset. */
.hc-glossary-tooltip::before,
.hc-glossary-tooltip::after {
  transform: translateX(calc(-50% - var(--hc-tooltip-x-offset, 0px)));
}

/* Mobile media-query overrides — same pattern, just with the small-screen
   transform values from the glossaryv1 mobile block. */
@media (max-width: 640px) {
  .hc-glossary-tooltip {
    transform: translateX(calc(-50% + var(--hc-tooltip-x-offset, 0px))) translateY(-4px);
  }
  .hc-glossary-term:hover > .hc-glossary-tooltip,
  .hc-glossary-term:focus > .hc-glossary-tooltip,
  .hc-glossary-term:focus-within > .hc-glossary-tooltip,
  .hc-glossary-term.is-open > .hc-glossary-tooltip {
    transform: translateX(calc(-50% + var(--hc-tooltip-x-offset, 0px))) translateY(0);
  }
}


/* ============================================================
   v99: STICKY RIGHT SIDEBAR + ANCHOR SCROLL OFFSET
   ============================================================
   Fixes two visual bugs on article pages where the fixed
   eyebrow chrome (main header + .article-sticky-bar) was
   overlapping content beneath it:

   1. Related articles sidebar scrolled away with the body
      instead of remaining visible. The existing `.sticky-top`
      class on the wrapper is conditional on Alpine's
      tableOfContents state, so articles without H2s never
      got sticky behavior at all.

   2. Clicking an in-page anchor (e.g., a glossary term link
      jumping to #pearl-orb) landed the target heading behind
      the eyebrow header rather than below it.

   Sticky chrome height (desktop, v102g16 update):
     ~60px main header + up to ~80px .article-sticky-bar
     (single-line ≈ 44px, 2-line title ≈ 80px) + ~16px breathing
     room = 156px worst-case offset. We use 156px so the sidebar
     never sits behind the eyebrow when the article title wraps.

   Mobile (<768px):
     ~56px main header + ~68px .article-sticky-bar (2-line on
     mobile too) + ~12px breathing = 136px offset.
   ============================================================ */

/* ---- 1. Right-hand sidebar: always sticky on article pages
         (unconditional — does not depend on TOC presence). The
         :has() selector lets us target the wrapper without
         editing the template.

         v100 FIX: the previous align-self: flex-start collapsed
         the aside to its content height, which left the inner
         sticky div no track to ride. Removed — the aside now
         stretches to full grid/flex row height (matching the
         article body column), giving the sticky card a long
         track to stick along.

         v102g16 FIX: top bumped from 120 → 156px to clear the
         2-line title case. Single-line titles get a slightly
         larger gap, which is the right trade-off — long titles
         are the failure mode (related-articles got clipped),
         short titles just gain a bit of breathing room. ---- */
@media (min-width: 768px) {
  html.article-page aside:has(.apl-related--sidebar) > div {
    position: -webkit-sticky;
    position: sticky;
    top: 156px;
    z-index: 2;
    /* if the sidebar's content is taller than the visible
       space below the eyebrow, scroll internally rather than
       overflow the viewport */
    max-height: calc(100vh - 176px);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  /* v103g18 → v104g19 → v104g20 — Glossary template no longer has an
     aside; this override only fires on the article_page.hbs fallback
     path. Offset bumped to 60px to match the browse bar so both
     columns dock at the same y, AND so neither one is clipped by the
     eyebrow's rendered height (which can exceed its `min-height: 44px`
     by a few pixels due to baseline rounding). */
  html.is-glossary-page aside:has(.apl-related--sidebar) > div {
    top: calc(var(--main-header-height, 64px) + 60px);
    max-height: calc(100vh - var(--main-header-height, 64px) - 80px);
  }
}

/* v104g24 — Anchor landing for glossary article. The chrome stack is:
     ~64px main header + 60px eyebrow + ~60px browse bar + 24px fade
     = ~208px. We use 216px to give a small cushion below the fade.
     `!important` is required because the regular `html.article-page`
     rule (156px, defined a few lines below) has equal specificity and
     comes later in source order, so it would win without !important.
     The `.hc-glossary-section` rule further down (90px) is similarly
     overridden via the catch-all clause below. */
html.is-glossary-page .article-content :is(h1, h2, h3, h4, h5, h6),
html.is-glossary-page .article-content [id] {
  /* v104g25 — Bumped 216 → 260. Live measurement showed browse-bar
     bottom at ~224 and fade ending at ~248; the prior 216 put the
     target heading ABOVE the bar's bottom edge (partially hidden
     behind the card). 260 gives a 12px cushion below the fade. */
  scroll-margin-top: 260px !important;
}

@media (max-width: 767px) {
  html.is-glossary-page .article-content :is(h1, h2, h3, h4, h5, h6),
  html.is-glossary-page .article-content [id] {
    scroll-margin-top: 232px !important;
  }
}

/* ---- 2. Anchor scroll offset: clicked targets land BELOW
         the eyebrow chrome, not behind it. Covers headings
         and any [id] inside the article body (e.g., glossary
         term anchors, footnote refs). Bumped in v102g16 to
         match the new sidebar top (worst-case 2-line title). ---- */
html.article-page .article-content :is(h1, h2, h3, h4, h5, h6),
html.article-page .article-content [id] {
  scroll-margin-top: 156px;
}

@media (max-width: 767px) {
  html.article-page .article-content :is(h1, h2, h3, h4, h5, h6),
  html.article-page .article-content [id] {
    scroll-margin-top: 136px;
  }
}


/* ============================================================
   v100: TOC OVERLAY IN EYEBROW HEADER
   ============================================================
   The eyebrow's title row becomes an interactive button when
   the article has ≥2 H2s. Clicking expands a TOC panel that
   slides down from the bottom edge of the eyebrow. The panel
   is column-aligned with the article body below (Variant A):
   right edge = article body column right edge on desktop;
   full-width on mobile.
   ============================================================ */

/* The article-body column inside the eyebrow — stacks
   breadcrumb above title vertically and centers them in the
   eyebrow's vertical space. */
html.article-page .article-sticky-bar__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* ---- Interactive trigger (replaces title row when JS confirms
        the article has ≥2 H2 headings worth indexing). ---- */
.article-sticky-bar__title-row {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 2px 6px 2px 4px;
  margin-left: -4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.article-sticky-bar__title-row .article-sticky-bar__title {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.article-sticky-bar__title-row:hover {
  background-color: rgba(255, 255, 255, 0.65);
}

.article-sticky-bar__title-row:focus-visible {
  outline: 2px solid #185FA5;
  outline-offset: 1px;
  background-color: rgba(255, 255, 255, 0.65);
}

.article-sticky-bar__title-row:hover .article-sticky-bar__title,
.article-sticky-bar__title-row:focus-visible .article-sticky-bar__title {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 0.5px;
}

/* Static fallback title — shown by default; JS hides it when
   it reveals the interactive trigger. Same typography so no
   visible shift on JS upgrade. */
.article-sticky-bar__title--static {
  margin: 0;
  padding: 2px 0;
}

/* v102g16 — Honor the [hidden] HTML attribute that script.js sets
   when it reveals the interactive TOC trigger. The base rule on
   `.article-sticky-bar__title` (line ~16691) sets `display: -webkit-box`
   on the same element, which silently overrides the implicit
   `display: none` of [hidden]. Without this override the static
   fallback never disappears and the article title visibly renders
   twice (the user-facing bug in v101g15). The !important is
   intentional because it must outrank multiple sources of `display`
   on the same element (base rule, mobile media query). */
.article-sticky-bar__title--static[hidden],
.article-sticky-bar__title-row[hidden] {
  display: none !important;
}

/* Chevron — rotates 180° when panel is open. */
.apl-toc-chev {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #575654;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms ease;
}

.article-sticky-bar__title-row[aria-expanded="true"] .apl-toc-chev {
  transform: rotate(180deg);
  color: #2D2C2C;
}

/* ---- TOC overlay panel ---- */

/* Wrapper positions the panel below the eyebrow. .article-sticky-bar
   is position:fixed, so absolute positioning is relative to it. The
   wrapper itself doesn't catch clicks — only the visible panel does. */
.apl-toc-panel-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 11;
  pointer-events: none;
}

.apl-toc-panel-wrapper[hidden] {
  display: none;
}

/* The visible panel sits inside col-8 (article-body-aligned). Its
   right edge therefore matches the article body column right edge. */
.apl-toc-panel {
  pointer-events: auto;
  background: #FFFFFF;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.apl-toc-list {
  list-style: none;
  margin: 0;
  padding: 8px 18px 12px;
}

.apl-toc-list li {
  padding: 7px 0;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.4;
  color: #2D2C2C;
  cursor: pointer;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
}

.apl-toc-list li:last-child {
  border-bottom: none;
}

.apl-toc-list li.apl-toc-list__h3 {
  padding-left: 22px;
  font-size: 0.75rem; /* 12px */
  color: #575654;
}

.apl-toc-list a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.apl-toc-list li:hover,
.apl-toc-list a:hover,
.apl-toc-list a:focus-visible {
  color: #185FA5;
  outline: none;
}

.apl-toc-list a:hover,
.apl-toc-list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 0.5px;
}

/* ---- Backdrop ---- */
.apl-toc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.04);
  z-index: 9; /* below .article-sticky-bar (z=10) and panel (z=11) */
  cursor: pointer;
}

.apl-toc-backdrop[hidden] {
  display: none;
}

/* ---- Mobile (<768px): edge-to-edge panel, 2-line title wrap. ---- */
@media (max-width: 767px) {
  /* Allow eyebrow to grow vertically if title wraps to 2 lines. */
  .article-sticky-bar__inner {
    min-height: 40px;
  }
  .article-sticky-bar__main {
    min-height: 32px;
  }

  /* Title wraps to 2 lines max on mobile (instead of single-line clamp). */
  .article-sticky-bar__title-row .article-sticky-bar__title,
  .article-sticky-bar__title--static {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }

  /* On mobile there's no right sidebar; the panel should fill the
     full content width. The col is already col (full width) at this
     breakpoint, so just adjust radius for a cleaner edge feel. */
  .apl-toc-panel {
    border-radius: 0 0 6px 6px;
    max-height: 60vh;
  }

  .apl-toc-list {
    padding: 6px 14px 10px;
  }

  .apl-toc-list li {
    padding: 8px 0;
  }
}



/* ============================================================================
 * v98_glossaryv12 — Full-width layout for the custom glossary template
 * ----------------------------------------------------------------------------
 * Applied only to the canonical glossary article (which uses templates/
 * article_pages/glossary.hbs and gets the `.article-glossary` class on
 * <html>). The custom template drops the sidebar; this CSS gives the
 * article column full container width and tightens reference-document spacing.
 * ============================================================================ */

.hc-glossary-page > .apl-glossary-article {
  /* Full container width: no row/col flex constraints, no sidebar. */
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.article-glossary .apl-glossary-article > header h1 {
  /* Slightly tighter title leading for a reference-doc feel */
  line-height: 1.15;
}

.article-glossary .apl-article-meta {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  gap: 8px;
  color: #575654;
  font-size: 14px;
}

/* On a glossary article, hide the article-bottom-cta / vote / related-articles
   even if some other partial accidentally renders them. Belt-and-suspenders.
   v104g19 — `.apl-related` returned to this list. The glossary template
   reverted to a full-width layout (no right sidebar) so the sticky search
   card can span the full article column. Federico's call. */
.article-glossary .apl-vote,
.article-glossary .article-bottom-cta,
.article-glossary .apl-related,
.article-glossary .article-bottom-divider,
.article-glossary #article-section-nav,
.article-glossary [id^="comments"],
.article-glossary [data-element="navigation"],
.article-glossary [data-template="call-to-action"] {
  display: none !important;
}

/* The bottom-of-article related-articles section (.apl-related--bottom)
   stays hidden on the glossary — only the sidebar one comes back. The
   bottom section would visually compete with the A-Z browse experience
   and is redundant when the sidebar already shows related articles. */
.article-glossary .apl-related--bottom {
  display: none !important;
}

/* v104g21 — Hide related-articles + bottom CTAs whenever we're on the
   canonical glossary article, regardless of which template renders it.
   The `is-glossary-page` class is added by glossary-page.js once it
   confirms the current article ID matches window.HC_GLOSSARY_ARTICLE_ID,
   so this rule fires on BOTH the custom `glossary.hbs` template AND
   the default `article_page.hbs` fallback path (where the .article-
   glossary class is NOT present, which is why the rule block above
   missed it). Federico's call to keep the glossary article free of
   the related-articles sidebar so the full-width search card can
   span the whole article column. */
html.is-glossary-page .apl-related,
html.is-glossary-page .apl-related--sidebar,
html.is-glossary-page .apl-related--bottom,
html.is-glossary-page #apl-related-sidebar-section,
html.is-glossary-page #apl-related-section,
html.is-glossary-page aside:has(.apl-related--sidebar) {
  display: none !important;
}

/* v104g21 — When the aside is hidden, the article column on
   article_page.hbs (which uses `col md:col-8` grid classes) still
   reserves 8/12 of the row width, leaving an empty 4/12 strip on
   the right. Expand the article column to fill the full row so the
   search card and term list breathe across the whole content area.
   Scoped to glossary so non-glossary articles keep their col-8 + col-4
   layout. */
@media (min-width: 768px) {
  html.is-glossary-page .article-page main .row > article,
  html.is-glossary-page .article-page main .row > .col,
  html.is-glossary-page main .row > article.md\:col-8,
  html.is-glossary-page main .row > .col.md\:col-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* ============================================================================
 * v98_glossaryv13 — RESTORE: Glossary Page browse UI (originally v11)
 * ----------------------------------------------------------------------------
 * This block was lost between v11 and v12 builds — the live theme shipped
 * without it, causing the browse bar to render with browser-default styling
 * (massive unstyled SVG search icon, plain letter buttons, no sticky behavior).
 *
 * Restored 2026-05-20. Styles the sticky search + A-Z letter nav and the
 * letter-divider sections injected by assets/glossary-page.js on the canonical
 * "Glossary of Terms" article.
 * ============================================================================ */

/* ---- Sticky browse bar --------------------------------------------------- */

.hc-glossary-browse {
  position: sticky;
  /* v104g20 — Bumped from 44 → 60px. The eyebrow's content (breadcrumb
     + title) plus padding can render slightly taller than its declared
     `min-height: 44px` on some browsers/devices because of baseline
     rounding and font ascent. With top:108 the card's top edge was
     getting clipped behind the eyebrow on the live preview. The extra
     16px of clearance gives the card breathing room while still
     keeping it close enough to the eyebrow that document content
     can't fit between them visibly. */
  top: calc(var(--main-header-height, 64px) + 60px);
  /* Below the main header (z=100+) and the article eyebrow (z=10
     fixed). The browse bar is in flow above content at that level. */
  z-index: 9;
  /* v104g20 — Frosted-glass card. Opacity raised from 88 → 94% and
     backdrop-filter blur from 10 → 16px because v104g19 still let
     some text bleed through the card under fast scrolling. The new
     values are opaque enough that body text reads as a uniform soft
     wash even when scrolling quickly, while still keeping enough
     translucency for the effect to feel glassy rather than solid.
     Saturation kick stays so colours behind the card don't go dull. */
  margin: 0 0 32px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border-radius: 14px;
  border: 0.5px solid rgba(231, 229, 226, 0.7);
  box-shadow:
    0 8px 28px rgba(45, 44, 44, 0.08),
    0 2px 8px rgba(45, 44, 44, 0.04);
}

/* v104g19 — Bottom fade strip. Sits directly below the card and
   creates a soft gradient from the page background colour to fully
   transparent. As the user scrolls and article text re-emerges
   below the card, it eases in instead of hard-cutting at the card's
   bottom border. `pointer-events: none` keeps clicks pass-through
   so links underneath remain interactive on their way up. */
.hc-glossary-browse::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 24px;
  background: linear-gradient(
    to bottom,
    #F3F2F0 0%,
    rgba(243, 242, 240, 0.7) 50%,
    rgba(243, 242, 240, 0) 100%
  );
  pointer-events: none;
}

.hc-glossary-browse__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---- Search input -------------------------------------------------------- */

.hc-glossary-browse__search {
  position: relative;
  flex: 1 1 280px;
  min-width: 200px;
  max-width: 360px;
}

.hc-glossary-browse__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #575654;
  pointer-events: none;
  flex-shrink: 0;
}

.hc-glossary-browse__search-input {
  width: 100%;
  height: 36px;
  padding: 0 14px 0 36px;
  font-size: 14px;
  line-height: 1.4;
  color: #2D2C2C;
  /* v102g17 — Soft pill treatment. The browse bar is now itself a
     white card, so the input needs a contrasting tint and pill
     radius so it doesn't blend into the card surface. */
  background: #F3F2F0;
  border: 1px solid transparent;
  border-radius: 18px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.hc-glossary-browse__search-input::placeholder {
  color: #575654;
  opacity: 0.8;
}

.hc-glossary-browse__search-input:focus {
  border-color: #007CFB;
  box-shadow: 0 0 0 3px rgba(0, 124, 251, 0.18);
}

.hc-glossary-browse__search-input::-webkit-search-cancel-button,
.hc-glossary-browse__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* ---- A-Z letter nav ------------------------------------------------------ */

.hc-glossary-browse__letters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.hc-glossary-browse__letter {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #2D2C2C;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
  outline: none;
}

.hc-glossary-browse__letter:hover {
  background: #EDECE9;
}

.hc-glossary-browse__letter:focus-visible {
  border-color: #007CFB;
  box-shadow: 0 0 0 2px rgba(0, 124, 251, 0.25);
}

.hc-glossary-browse__letter.is-active {
  background: #007CFB;
  color: #FFFFFF;
}

.hc-glossary-browse__letter.is-disabled,
.hc-glossary-browse__letter:disabled {
  color: #C8C5BF;
  cursor: not-allowed;
  pointer-events: none;
}

.hc-glossary-browse__letter.is-filtered-out {
  opacity: 0.35;
}

/* ---- Letter divider sections (h2 inserted by glossary-page.js) ----------- */

.article-content h2.hc-glossary-section {
  margin-top: 40px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  font-size: 32px;
  font-weight: 500;
  color: #2D2C2C;
  border-bottom: 2px solid #007CFB;
  /* v104g24 — Was 90px; that was sized for the chrome stack before the
     v104g19 search card existed. Bumped to 216 so deep-links to letter
     dividers (e.g., /articles/<id>#letter-b) land below the fade just
     like term anchors. The catch-all is-glossary-page rule near the top
     of style.css now uses the same value with !important, so this is
     mostly belt-and-suspenders. */
  /* v104g25 — Synced to the 260px catch-all rule near the top of
     style.css (deep-links to letter dividers land below the fade). */
  scroll-margin-top: 260px;
}

.article-content h2.hc-glossary-section:focus {
  outline: none;
}

/* v102g17 — Stronger visual hierarchy between term and definition.
   Previously term (h3) and its paragraph both read at near-identical
   weight, so the eye had to work to parse where each entry started.
   These rules ONLY apply on the canonical glossary article (scoped
   via `html.is-glossary-page`), so non-glossary articles with h3+p
   patterns are unaffected. */
html.is-glossary-page .article-content h3 {
  font-size: 16px;
  font-weight: 500;
  color: #2D2C2C;
  line-height: 1.3;
  margin-top: 18px;
  margin-bottom: 2px;
}

/* Definition = the paragraph IMMEDIATELY following each term. The
   adjacent-sibling selector keeps unrelated paragraphs (rare) at
   normal styling. */
html.is-glossary-page .article-content h3 + p {
  font-size: 13px;
  color: #575654; /* matches --color-text-secondary visually */
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 0;
}

/* Cross-link colour inside definitions stays on-brand. */
html.is-glossary-page .article-content h3 + p a {
  color: #185FA5;
}

/* ---- Hidden states (search filtering) ------------------------------------ */

.article-content h3.is-hidden,
.article-content p.is-hidden,
.article-content h2.hc-glossary-section.is-hidden {
  display: none !important;
}

/* ---- "No results" banner ------------------------------------------------- */

.hc-glossary-noresults {
  padding: 18px 20px;
  margin: 0 0 24px;
  background: #F9F9F8;
  border: 1px dashed #E7E5E2;
  border-radius: 8px;
  color: #575654;
  font-size: 15px;
}

.hc-glossary-noresults strong {
  color: #2D2C2C;
  font-weight: 600;
}

/* ---- Mobile / narrow viewport -------------------------------------------- */

@media (max-width: 640px) {
  .hc-glossary-browse {
    margin-left: -12px;
    margin-right: -12px;
    padding: 12px;
  }
  .hc-glossary-browse__inner {
    gap: 10px;
  }
  .hc-glossary-browse__search {
    flex-basis: 100%;
    max-width: 100%;
  }
  .hc-glossary-browse__letters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding-bottom: 2px;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
    scrollbar-width: none;
  }
  .hc-glossary-browse__letters::-webkit-scrollbar {
    display: none;
  }
  .hc-glossary-browse__letter {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .article-content h2.hc-glossary-section {
    margin-top: 32px;
    font-size: 28px;
    /* v104g25 — Synced to the 232px mobile catch-all rule. */
    scroll-margin-top: 232px;
  }
}

/* ---- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .hc-glossary-browse__letter,
  .hc-glossary-browse__search-input {
    transition: none;
  }
}

/* ---- Print: hide the browse UI; print the terms as a plain list --------- */

@media print {
  .hc-glossary-browse,
  .hc-glossary-noresults { display: none !important; }
  .article-content h2.hc-glossary-section {
    border-bottom: 1px solid #000;
    font-size: 22px;
  }
}

/* =========================================================================
   NEW REQUEST PAGE — World brand restyle
   Added in v107g32 alongside the new_request_page.hbs template.
   Scoped under html.new-request-page so it does not affect other pages
   (e.g. the comment form on request_page.hbs or any other form-field usage).
   Palette sampled from world.org/brand (cyan primary, neutral grays).
   ========================================================================= */

html.new-request-page #page-container h1 {
  color: #2D2C2C;
  font-weight: 500;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

/* Field wrapper spacing */
html.new-request-page .form-field {
  margin-bottom: 1.5rem;
}

/* Labels — primary text color, slightly heavier than body */
html.new-request-page .form-field > label {
  display: block;
  color: #2D2C2C;
  font-weight: 500;
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
}

/* Helper / description text under fields */
html.new-request-page .form-field > p {
  margin: 0.5rem 0 0;
  color: #575654;
  font-size: 0.875rem;
}

/* Inputs, selects, textareas — rounded, World-brand bordered */
html.new-request-page .form-field input[type="text"],
html.new-request-page .form-field input[type="email"],
html.new-request-page .form-field input[type="url"],
html.new-request-page .form-field input[type="tel"],
html.new-request-page .form-field input[type="number"],
html.new-request-page .form-field input[type="password"],
html.new-request-page .form-field input[type="search"],
html.new-request-page .form-field select,
html.new-request-page .form-field textarea,
html.new-request-page .form-field .nesty-input,
html.new-request-page .form-field .hc-multiselect-toggle {
  width: 100%;
  padding: 0.75rem 1rem;
  color: #2D2C2C;
  background-color: #FFFFFF;
  border: 1.5px solid #E7E5E2;
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

html.new-request-page .form-field textarea {
  min-height: 140px;
  resize: vertical;
}

/* Hover */
html.new-request-page .form-field input:hover,
html.new-request-page .form-field select:hover,
html.new-request-page .form-field textarea:hover,
html.new-request-page .form-field .nesty-input:hover {
  border-color: #575654;
}

/* Focus — World cyan ring */
html.new-request-page .form-field input:focus,
html.new-request-page .form-field select:focus,
html.new-request-page .form-field textarea:focus,
html.new-request-page .form-field .nesty-input:focus {
  outline: 0;
  border-color: #3FDBED;
  box-shadow: 0 0 0 3px rgba(63, 219, 237, 0.25);
}

/* Placeholder color */
html.new-request-page .form-field input::placeholder,
html.new-request-page .form-field textarea::placeholder {
  color: #575654;
  opacity: 0.7;
}

/* Disabled state */
html.new-request-page .form-field input:disabled,
html.new-request-page .form-field select:disabled,
html.new-request-page .form-field textarea:disabled {
  background-color: #F3F2F0;
  border-color: #E7E5E2;
  color: #575654;
  cursor: not-allowed;
}

/* Select dropdown — re-add caret (since appearance:none stripped native) */
html.new-request-page .form-field select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' width='10' height='6'%3E%3Cpath fill='%232D2C2C' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 10px 6px;
}

/* WYSIWYG (rich text) container — match input borders */
html.new-request-page .form-field .editor,
html.new-request-page .form-field .ck-editor__main,
html.new-request-page .form-field .ck.ck-editor__main > .ck-editor__editable {
  border-radius: 12px !important;
  border: 1.5px solid #E7E5E2 !important;
  min-height: 140px;
}

/* Submit button — pill, dark, matches "Explore World ID App" header CTA */
html.new-request-page .request-form input[type="submit"],
html.new-request-page .request-form button[type="submit"],
html.new-request-page .request-form .button-primary {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background-color: #2D2C2C;
  color: #FFFFFF;
  border: 1.5px solid #2D2C2C;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

html.new-request-page .request-form input[type="submit"]:hover,
html.new-request-page .request-form button[type="submit"]:hover,
html.new-request-page .request-form .button-primary:hover {
  background-color: #424140;
  border-color: #424140;
}

html.new-request-page .request-form input[type="submit"]:focus,
html.new-request-page .request-form button[type="submit"]:focus,
html.new-request-page .request-form .button-primary:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(63, 219, 237, 0.35);
}

html.new-request-page .request-form input[type="submit"]:disabled,
html.new-request-page .request-form button[type="submit"]:disabled,
html.new-request-page .request-form .button-primary:disabled {
  background-color: #575654;
  border-color: #575654;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Form actions row — push submit to the right on wider screens */
html.new-request-page .request-form .form-field:last-of-type {
  margin-bottom: 2rem;
}

/* Error message styling — World secondary red */
html.new-request-page .form-field .error-message,
html.new-request-page .form-field [data-test-id="error-message"] {
  color: #EA392A;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

html.new-request-page .form-field.has-error input,
html.new-request-page .form-field.has-error select,
html.new-request-page .form-field.has-error textarea {
  border-color: #EA392A;
}

/* Required marker */
html.new-request-page .form-field .required {
  color: #EA392A;
  margin-left: 0.25rem;
}

/* End of NEW REQUEST PAGE block */

/* ============================================================
   v107g34 — Glossary page UX overrides
   Hide the article-vote ("Was this article helpful?") widget on
   the canonical glossary article. The glossary is a reference,
   not a how-to, so rating it is not meaningful.
   Scoped to `html.is-glossary-page` (added synchronously in
   document_head.hbs via window.HC_GLOSSARY_ARTICLE_ID match)
   so this never affects any other article.
   ============================================================ */
html.is-glossary-page .apl-vote,
html.is-glossary-page #apl-vote,
html.is-glossary-page .article-vote,
html.is-glossary-page .article-votes {
  display: none !important;
}

/* End of v107g34 glossary overrides */